Compare commits
7 Commits
nico/18-ma
...
nico/25-ma
| Author | SHA1 | Date | |
|---|---|---|---|
| 687ce11a81 | |||
| 1ba4643e23 | |||
| 113dd7ba6f | |||
| 71a305cd4b | |||
| 84b96ca3be | |||
| 8159216a2c | |||
| d714c09efc |
@@ -1,385 +1,38 @@
|
||||
import {
|
||||
Badge,
|
||||
Button,
|
||||
Card,
|
||||
Grid,
|
||||
GridCol,
|
||||
Group,
|
||||
Select,
|
||||
Stack,
|
||||
Table,
|
||||
Text,
|
||||
Title,
|
||||
useMantineColorScheme,
|
||||
} from "@mantine/core";
|
||||
import {
|
||||
IconBuildingStore,
|
||||
IconCategory,
|
||||
IconCurrency,
|
||||
IconUsers,
|
||||
} from "@tabler/icons-react";
|
||||
import { useState } from "react";
|
||||
import { Grid, GridCol, Stack } from "@mantine/core";
|
||||
import { HeaderToggle } from "./umkm/header-toggle";
|
||||
import { ProdukUnggulan } from "./umkm/produk-unggulan";
|
||||
import type { SalesData } from "./umkm/sales-table";
|
||||
import { SalesTable } from "./umkm/sales-table";
|
||||
import { SummaryCards } from "./umkm/summary-cards";
|
||||
import { TopProducts } from "./umkm/top-products";
|
||||
|
||||
const BumdesPage = () => {
|
||||
const { colorScheme } = useMantineColorScheme();
|
||||
const dark = colorScheme === "dark";
|
||||
|
||||
const [timeFilter, setTimeFilter] = useState<string>("bulan");
|
||||
|
||||
// Sample data for KPI cards
|
||||
const kpiData = [
|
||||
{
|
||||
title: "UMKM Aktif",
|
||||
value: 45,
|
||||
icon: <IconUsers size={24} />,
|
||||
color: "darmasaba-blue",
|
||||
},
|
||||
{
|
||||
title: "UMKM Terdaftar",
|
||||
value: 68,
|
||||
icon: <IconBuildingStore size={24} />,
|
||||
color: "darmasaba-success",
|
||||
},
|
||||
{
|
||||
title: "Omzet",
|
||||
value: "Rp 48.000.000",
|
||||
icon: <IconCurrency size={24} />,
|
||||
color: "darmasaba-warning",
|
||||
},
|
||||
{
|
||||
title: "Kategori UMKM",
|
||||
value: 34,
|
||||
icon: <IconCategory size={24} />,
|
||||
color: "darmasaba-danger",
|
||||
},
|
||||
];
|
||||
|
||||
// Sample data for top products
|
||||
const topProducts = [
|
||||
{
|
||||
rank: 1,
|
||||
name: "Beras Premium Organik",
|
||||
umkmOwner: "Warung Pak Joko",
|
||||
growth: "+12%",
|
||||
},
|
||||
{
|
||||
rank: 2,
|
||||
name: "Keripik Singkong",
|
||||
umkmOwner: "Ibu Sari Snack",
|
||||
growth: "+8%",
|
||||
},
|
||||
{
|
||||
rank: 3,
|
||||
name: "Madu Alami",
|
||||
umkmOwner: "Peternakan Lebah",
|
||||
growth: "+5%",
|
||||
},
|
||||
];
|
||||
|
||||
// Sample data for product sales
|
||||
const productSales = [
|
||||
{
|
||||
produk: "Beras Premium Organik",
|
||||
penjualanBulanIni: "Rp 8.500.000",
|
||||
bulanLalu: "Rp 8.500.000",
|
||||
trend: 10,
|
||||
volume: "650 Kg",
|
||||
stok: "850 Kg",
|
||||
},
|
||||
{
|
||||
produk: "Keripik Singkong",
|
||||
penjualanBulanIni: "Rp 4.200.000",
|
||||
bulanLalu: "Rp 3.800.000",
|
||||
trend: 10,
|
||||
volume: "320 Kg",
|
||||
stok: "120 Kg",
|
||||
},
|
||||
{
|
||||
produk: "Madu Alami",
|
||||
penjualanBulanIni: "Rp 3.750.000",
|
||||
bulanLalu: "Rp 4.100.000",
|
||||
trend: -8,
|
||||
volume: "150 Liter",
|
||||
stok: "45 Liter",
|
||||
},
|
||||
{
|
||||
produk: "Kecap Tradisional",
|
||||
penjualanBulanIni: "Rp 2.800.000",
|
||||
bulanLalu: "Rp 2.500.000",
|
||||
trend: 12,
|
||||
volume: "280 Botol",
|
||||
stok: "95 Botol",
|
||||
},
|
||||
];
|
||||
const handleDetailClick = (product: SalesData) => {
|
||||
console.log("Detail clicked for:", product);
|
||||
// TODO: Open modal or navigate to detail page
|
||||
};
|
||||
|
||||
return (
|
||||
<Stack gap="lg">
|
||||
{/* KPI Cards */}
|
||||
<Grid gutter="md">
|
||||
{kpiData.map((kpi, index) => (
|
||||
<GridCol key={index} span={{ base: 12, sm: 6, md: 3 }}>
|
||||
<Card
|
||||
p="md"
|
||||
radius="md"
|
||||
withBorder
|
||||
bg={dark ? "#141D34" : "white"}
|
||||
style={{ borderColor: dark ? "#141D34" : "white" }}
|
||||
>
|
||||
<Group justify="space-between" align="center">
|
||||
<Stack gap={0}>
|
||||
<Text size="sm" c={dark ? "dark.3" : "dimmed"}>
|
||||
{kpi.title}
|
||||
</Text>
|
||||
<Text size="xl" fw={700} c={dark ? "dark.0" : "black"}>
|
||||
{typeof kpi.value === "number"
|
||||
? kpi.value.toLocaleString()
|
||||
: kpi.value}
|
||||
</Text>
|
||||
</Stack>
|
||||
<Badge variant="light" color={kpi.color} p={8} radius="md">
|
||||
{kpi.icon}
|
||||
</Badge>
|
||||
</Group>
|
||||
</Card>
|
||||
</GridCol>
|
||||
))}
|
||||
</Grid>
|
||||
{/* KPI Summary Cards */}
|
||||
<SummaryCards />
|
||||
|
||||
{/* Update Penjualan Produk Header */}
|
||||
<Card
|
||||
p="md"
|
||||
radius="md"
|
||||
withBorder
|
||||
bg={dark ? "#141D34" : "white"}
|
||||
style={{ borderColor: dark ? "#141D34" : "white" }}
|
||||
>
|
||||
<Group justify="space-between" align="center" px="md" py="xs">
|
||||
<Title order={3} c={dark ? "dark.0" : "black"}>
|
||||
Update Penjualan Produk
|
||||
</Title>
|
||||
<Group>
|
||||
<Button
|
||||
variant={timeFilter === "minggu" ? "filled" : "light"}
|
||||
onClick={() => setTimeFilter("minggu")}
|
||||
color="darmasaba-blue"
|
||||
>
|
||||
Minggu ini
|
||||
</Button>
|
||||
<Button
|
||||
variant={timeFilter === "bulan" ? "filled" : "light"}
|
||||
onClick={() => setTimeFilter("bulan")}
|
||||
color="darmasaba-blue"
|
||||
>
|
||||
Bulan ini
|
||||
</Button>
|
||||
</Group>
|
||||
</Group>
|
||||
</Card>
|
||||
{/* Header with Time Range Toggle */}
|
||||
<HeaderToggle />
|
||||
|
||||
{/* Main Content - 2 Column Layout */}
|
||||
<Grid gutter="md">
|
||||
{/* Produk Unggulan (Left Column) */}
|
||||
{/* Left Panel - Produk Unggulan */}
|
||||
<GridCol span={{ base: 12, lg: 4 }}>
|
||||
<Stack gap="md">
|
||||
{/* Total Penjualan, Produk Aktif, Total Transaksi */}
|
||||
<Card
|
||||
p="md"
|
||||
radius="md"
|
||||
withBorder
|
||||
bg={dark ? "#141D34" : "white"}
|
||||
style={{ borderColor: dark ? "#141D34" : "white" }}
|
||||
>
|
||||
<Stack gap="md">
|
||||
<Group justify="space-between">
|
||||
<Text size="sm" c={dark ? "dark.3" : "dimmed"}>
|
||||
Total Penjualan
|
||||
</Text>
|
||||
<Text size="lg" fw={700} c={dark ? "dark.0" : "black"}>
|
||||
Rp 28.500.000
|
||||
</Text>
|
||||
</Group>
|
||||
<Group justify="space-between">
|
||||
<Text size="sm" c={dark ? "dark.3" : "dimmed"}>
|
||||
Produk Aktif
|
||||
</Text>
|
||||
<Text size="lg" fw={700} c={dark ? "dark.0" : "black"}>
|
||||
124 Produk
|
||||
</Text>
|
||||
</Group>
|
||||
<Group justify="space-between">
|
||||
<Text size="sm" c={dark ? "dark.3" : "dimmed"}>
|
||||
Total Transaksi
|
||||
</Text>
|
||||
<Text size="lg" fw={700} c={dark ? "dark.0" : "black"}>
|
||||
1.240 Transaksi
|
||||
</Text>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Card>
|
||||
|
||||
{/* Top 3 Produk Terlaris */}
|
||||
<Card
|
||||
p="md"
|
||||
radius="md"
|
||||
withBorder
|
||||
bg={dark ? "#141D34" : "white"}
|
||||
style={{ borderColor: dark ? "#141D34" : "white" }}
|
||||
>
|
||||
<Title order={4} mb="md" c={dark ? "dark.0" : "black"}>
|
||||
Top 3 Produk Terlaris
|
||||
</Title>
|
||||
<Stack gap="sm">
|
||||
{topProducts.map((product) => (
|
||||
<Group
|
||||
key={product.rank}
|
||||
justify="space-between"
|
||||
align="center"
|
||||
>
|
||||
<Group gap="sm">
|
||||
<Badge
|
||||
variant="filled"
|
||||
color={
|
||||
product.rank === 1
|
||||
? "gold"
|
||||
: product.rank === 2
|
||||
? "gray"
|
||||
: "bronze"
|
||||
}
|
||||
radius="xl"
|
||||
size="lg"
|
||||
>
|
||||
{product.rank}
|
||||
</Badge>
|
||||
<Stack gap={0}>
|
||||
<Text fw={500} c={dark ? "dark.0" : "black"}>
|
||||
{product.name}
|
||||
</Text>
|
||||
<Text size="sm" c={dark ? "dark.3" : "dimmed"}>
|
||||
{product.umkmOwner}
|
||||
</Text>
|
||||
</Stack>
|
||||
</Group>
|
||||
<Badge
|
||||
variant="light"
|
||||
color={product.growth.startsWith("+") ? "green" : "red"}
|
||||
>
|
||||
{product.growth}
|
||||
</Badge>
|
||||
</Group>
|
||||
))}
|
||||
</Stack>
|
||||
</Card>
|
||||
<ProdukUnggulan />
|
||||
<TopProducts />
|
||||
</Stack>
|
||||
</GridCol>
|
||||
|
||||
{/* Detail Penjualan Produk (Right Column) */}
|
||||
{/* Right Panel - Detail Penjualan Produk */}
|
||||
<GridCol span={{ base: 12, lg: 8 }}>
|
||||
<Card
|
||||
p="md"
|
||||
radius="md"
|
||||
withBorder
|
||||
bg={dark ? "#141D34" : "white"}
|
||||
style={{ borderColor: dark ? "#141D34" : "white" }}
|
||||
>
|
||||
<Group justify="space-between" mb="md">
|
||||
<Title order={4} c={dark ? "dark.0" : "black"}>
|
||||
Detail Penjualan Produk
|
||||
</Title>
|
||||
<Select
|
||||
placeholder="Filter kategori"
|
||||
data={[
|
||||
{ value: "semua", label: "Semua Kategori" },
|
||||
{ value: "makanan", label: "Makanan" },
|
||||
{ value: "minuman", label: "Minuman" },
|
||||
{ value: "kerajinan", label: "Kerajinan" },
|
||||
]}
|
||||
defaultValue="semua"
|
||||
w={200}
|
||||
/>
|
||||
</Group>
|
||||
|
||||
<Table striped highlightOnHover withColumnBorders>
|
||||
<Table.Thead>
|
||||
<Table.Tr>
|
||||
<Table.Th>
|
||||
<Text c={dark ? "white" : "dimmed"}>Produk</Text>
|
||||
</Table.Th>
|
||||
<Table.Th>
|
||||
<Text c={dark ? "white" : "dimmed"}>
|
||||
Penjualan Bulan Ini
|
||||
</Text>
|
||||
</Table.Th>
|
||||
<Table.Th>
|
||||
<Text c={dark ? "white" : "dimmed"}>Bulan Lalu</Text>
|
||||
</Table.Th>
|
||||
<Table.Th>
|
||||
<Text c={dark ? "white" : "dimmed"}>Trend</Text>
|
||||
</Table.Th>
|
||||
<Table.Th>
|
||||
<Text c={dark ? "white" : "dimmed"}>Volume</Text>
|
||||
</Table.Th>
|
||||
<Table.Th>
|
||||
<Text c={dark ? "white" : "dimmed"}>Stok</Text>
|
||||
</Table.Th>
|
||||
<Table.Th>
|
||||
<Text c={dark ? "white" : "dimmed"}>Aksi</Text>
|
||||
</Table.Th>
|
||||
</Table.Tr>
|
||||
</Table.Thead>
|
||||
<Table.Tbody>
|
||||
{productSales.map((product, index) => (
|
||||
<Table.Tr key={index}>
|
||||
<Table.Td>
|
||||
<Text fw={500} c={dark ? "dark.0" : "black"}>
|
||||
{product.produk}
|
||||
</Text>
|
||||
</Table.Td>
|
||||
<Table.Td>
|
||||
<Text fz={"sm"} c={dark ? "dark.0" : "black"}>
|
||||
{product.penjualanBulanIni}
|
||||
</Text>
|
||||
</Table.Td>
|
||||
<Table.Td>
|
||||
<Text fz={"sm"} c={dark ? "white" : "dimmed"}>
|
||||
{product.bulanLalu}
|
||||
</Text>
|
||||
</Table.Td>
|
||||
<Table.Td>
|
||||
<Group gap="xs">
|
||||
<Text c={product.trend >= 0 ? "green" : "red"}>
|
||||
{product.trend >= 0 ? "↑" : "↓"}{" "}
|
||||
{Math.abs(product.trend)}%
|
||||
</Text>
|
||||
</Group>
|
||||
</Table.Td>
|
||||
<Table.Td>
|
||||
<Text fz={"sm"} c={dark ? "dark.0" : "black"}>
|
||||
{product.volume}
|
||||
</Text>
|
||||
</Table.Td>
|
||||
<Table.Td>
|
||||
<Badge
|
||||
variant="light"
|
||||
color={
|
||||
parseInt(product.stok) > 200 ? "green" : "yellow"
|
||||
}
|
||||
>
|
||||
{product.stok}
|
||||
</Badge>
|
||||
</Table.Td>
|
||||
<Table.Td>
|
||||
<Button
|
||||
variant="subtle"
|
||||
size="compact-sm"
|
||||
color="darmasaba-blue"
|
||||
>
|
||||
Detail
|
||||
</Button>
|
||||
</Table.Td>
|
||||
</Table.Tr>
|
||||
))}
|
||||
</Table.Tbody>
|
||||
</Table>
|
||||
</Card>
|
||||
<SalesTable onDetailClick={handleDetailClick} />
|
||||
</GridCol>
|
||||
</Grid>
|
||||
</Stack>
|
||||
|
||||
@@ -25,7 +25,7 @@ export function StatCard({
|
||||
trend,
|
||||
trendValue,
|
||||
icon,
|
||||
iconColor = "darmasaba-blue",
|
||||
iconColor = "#1E3A5F",
|
||||
}: StatCardProps) {
|
||||
const { colorScheme } = useMantineColorScheme();
|
||||
const dark = colorScheme === "dark";
|
||||
@@ -77,6 +77,7 @@ export function StatCard({
|
||||
size="xl"
|
||||
radius="xl"
|
||||
color={dark ? "gray" : iconColor}
|
||||
bg={dark ? "gray" : iconColor}
|
||||
>
|
||||
{icon}
|
||||
</ThemeIcon>
|
||||
|
||||
@@ -1,116 +1,73 @@
|
||||
import { BarChart, PieChart } from "@mantine/charts";
|
||||
import {
|
||||
Badge,
|
||||
Box,
|
||||
Card,
|
||||
Grid,
|
||||
GridCol,
|
||||
Group,
|
||||
Progress,
|
||||
Stack,
|
||||
Table,
|
||||
Text,
|
||||
ThemeIcon,
|
||||
Title,
|
||||
useMantineColorScheme,
|
||||
} from "@mantine/core";
|
||||
import {
|
||||
IconArrowDown,
|
||||
IconArrowUp,
|
||||
IconBabyCarriage,
|
||||
IconSkull,
|
||||
} from "@tabler/icons-react";
|
||||
import React from "react";
|
||||
Baby,
|
||||
BarChart3,
|
||||
Building2,
|
||||
Home,
|
||||
PieChart as PieChartIcon,
|
||||
TrendingDown,
|
||||
Users,
|
||||
} from "lucide-react";
|
||||
import {
|
||||
Bar,
|
||||
BarChart,
|
||||
CartesianGrid,
|
||||
Cell,
|
||||
Pie,
|
||||
PieChart,
|
||||
ResponsiveContainer,
|
||||
Tooltip,
|
||||
XAxis,
|
||||
YAxis,
|
||||
} from "recharts";
|
||||
|
||||
// Sample Data
|
||||
// KPI Data
|
||||
const kpiData = [
|
||||
{
|
||||
id: 1,
|
||||
title: "Total Penduduk",
|
||||
value: "5.634",
|
||||
sub: "Aktif terdaftar",
|
||||
icon: (
|
||||
<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>
|
||||
),
|
||||
subtitle: "Aktif terdaftar",
|
||||
icon: Users,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Kepala Keluarga",
|
||||
value: "1.354",
|
||||
sub: "Total KK",
|
||||
icon: (
|
||||
<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>
|
||||
),
|
||||
subtitle: "Total KK",
|
||||
icon: Home,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Kelahiran",
|
||||
value: "23",
|
||||
sub: "Tahun ini",
|
||||
icon: (
|
||||
<IconBabyCarriage
|
||||
className="h-6 w-6 text-muted-foreground"
|
||||
role="img"
|
||||
aria-label="Icon kelahiran"
|
||||
/>
|
||||
),
|
||||
subtitle: "Tahun ini",
|
||||
icon: Baby,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "Kemiskinan",
|
||||
value: "324",
|
||||
delta: "-10% dari tahun lalu",
|
||||
deltaType: "positive",
|
||||
icon: (
|
||||
<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>
|
||||
),
|
||||
subtitle: "-10% dari tahun lalu",
|
||||
trend: "positive",
|
||||
icon: TrendingDown,
|
||||
},
|
||||
];
|
||||
|
||||
// Age Distribution Data
|
||||
const ageDistributionData = [
|
||||
{ ageRange: "17-25", total: 850 },
|
||||
{ ageRange: "26-35", total: 1200 },
|
||||
@@ -120,6 +77,7 @@ const ageDistributionData = [
|
||||
{ ageRange: "65+", total: 484 },
|
||||
];
|
||||
|
||||
// Job Distribution Data
|
||||
const jobDistributionData = [
|
||||
{ job: "Sipil", total: 1200 },
|
||||
{ job: "Guru", total: 850 },
|
||||
@@ -128,283 +86,597 @@ const jobDistributionData = [
|
||||
{ job: "Wiraswasta", total: 984 },
|
||||
];
|
||||
|
||||
// Religion Data
|
||||
const religionData = [
|
||||
{ religion: "Hindu", total: 4234, color: "red" },
|
||||
{ religion: "Islam", total: 856, color: "blue" },
|
||||
{ religion: "Kristen", total: 412, color: "green" },
|
||||
{ religion: "Buddha", total: 202, color: "yellow" },
|
||||
{ name: "Hindu", value: 4234, color: "#EF4444" },
|
||||
{ name: "Islam", value: 856, color: "#3B82F6" },
|
||||
{ name: "Kristen", value: 412, color: "#22C55E" },
|
||||
{ name: "Buddha", value: 202, color: "#FACC15" },
|
||||
];
|
||||
|
||||
// Banjar Data
|
||||
const banjarData = [
|
||||
{ banjar: "Banjar Darmasaba", population: 1200, kk: 300, poor: 45 },
|
||||
{ banjar: "Banjar Manesa", population: 950, kk: 240, poor: 32 },
|
||||
{ banjar: "Banjar Cabe", population: 800, kk: 200, poor: 28 },
|
||||
{ banjar: "Banjar Penenjoan", population: 1100, kk: 280, poor: 38 },
|
||||
{ banjar: "Banjar Baler Pasar", population: 984, kk: 250, poor: 42 },
|
||||
{ banjar: "Banjar Bucu", population: 600, kk: 184, poor: 25 },
|
||||
{ banjar: "Darmasaba", population: 1200, kk: 300, poor: 45 },
|
||||
{ banjar: "Manesa", population: 950, kk: 240, poor: 32 },
|
||||
{ banjar: "Cabe", population: 800, kk: 200, poor: 28 },
|
||||
{ banjar: "Penenjoan", population: 1100, kk: 280, poor: 38 },
|
||||
{ banjar: "Baler Pasar", population: 984, kk: 250, poor: 42 },
|
||||
{ banjar: "Bucu", population: 600, kk: 184, poor: 25 },
|
||||
];
|
||||
|
||||
// Dynamic Stats Data
|
||||
const dynamicStats = [
|
||||
{
|
||||
title: "Kelahiran",
|
||||
value: "23",
|
||||
icon: <IconBabyCarriage size={16} />,
|
||||
color: "green",
|
||||
icon: Baby,
|
||||
color: "#22C55E",
|
||||
},
|
||||
{
|
||||
title: "Kematian",
|
||||
value: "12",
|
||||
icon: <IconSkull size={16} />,
|
||||
color: "red",
|
||||
icon: TrendingDown,
|
||||
color: "#EF4444",
|
||||
},
|
||||
{
|
||||
title: "Pindah Masuk",
|
||||
value: "45",
|
||||
icon: <IconArrowDown size={16} />,
|
||||
color: "blue",
|
||||
icon: Users,
|
||||
color: "#3B82F6",
|
||||
},
|
||||
{
|
||||
title: "Pindah Keluar",
|
||||
value: "32",
|
||||
icon: <IconArrowUp size={16} />,
|
||||
color: "orange",
|
||||
icon: Users,
|
||||
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 { colorScheme } = useMantineColorScheme();
|
||||
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 */}
|
||||
<Grid gutter="lg">
|
||||
{/* Grafik Pengelompokan Umur */}
|
||||
<Grid.Col span={{ base: 12, lg: 6 }}>
|
||||
return (
|
||||
<Stack gap="lg">
|
||||
{/* TOP SECTION - 4 STAT CARDS */}
|
||||
<Grid gutter="md">
|
||||
{kpiData.map((item) => (
|
||||
<Grid.Col key={item.id} span={{ base: 12, sm: 6, lg: 3 }}>
|
||||
<Card
|
||||
p="md"
|
||||
radius="md"
|
||||
radius="xl"
|
||||
withBorder
|
||||
bg={dark ? "#141D34" : "white"}
|
||||
style={{ borderColor: dark ? "#141D34" : "white" }}
|
||||
bg={dark ? "#1E293B" : "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">
|
||||
Grafik Pengelompokan Umur
|
||||
</Title>
|
||||
<BarChart
|
||||
h={300}
|
||||
data={ageDistributionData}
|
||||
dataKey="ageRange"
|
||||
series={[{ name: "total", color: "darmasaba-navy" }]}
|
||||
withLegend
|
||||
/>
|
||||
<Group justify="space-between" align="flex-start" w="100%">
|
||||
<Stack gap={2}>
|
||||
<Text size="sm" c="dimmed">
|
||||
{item.title}
|
||||
</Text>
|
||||
<Text size="xl" fw={700} c={dark ? "white" : "gray.9"}>
|
||||
{item.value}
|
||||
</Text>
|
||||
<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>
|
||||
</Grid.Col>
|
||||
))}
|
||||
</Grid>
|
||||
|
||||
{/* Demografi Pekerjaan */}
|
||||
<Grid.Col span={{ base: 12, lg: 6 }}>
|
||||
<Card
|
||||
p="md"
|
||||
radius="md"
|
||||
withBorder
|
||||
bg={dark ? "#141D34" : "white"}
|
||||
style={{ borderColor: dark ? "#141D34" : "white" }}
|
||||
>
|
||||
<Title order={3} fw={500} mb="md">
|
||||
{/* ROW 2 - 3 COLUMNS */}
|
||||
<Grid gutter="lg">
|
||||
{/* LEFT: PENGELOMPOKAN UMUR */}
|
||||
<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"}>
|
||||
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
|
||||
</Title>
|
||||
<BarChart
|
||||
h={300}
|
||||
data={jobDistributionData}
|
||||
dataKey="job"
|
||||
series={[{ name: "total", color: "darmasaba-navy" }]}
|
||||
withLegend
|
||||
/>
|
||||
</Card>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
</Group>
|
||||
<ResponsiveContainer width="100%" height={250}>
|
||||
<BarChart data={jobDistributionData} 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="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 */}
|
||||
<Grid gutter="lg">
|
||||
{/* Distribusi Agama */}
|
||||
<Grid.Col span={{ base: 12, lg: 6 }}>
|
||||
<Card
|
||||
p="md"
|
||||
radius="md"
|
||||
withBorder
|
||||
bg={dark ? "#141D34" : "white"}
|
||||
style={{ borderColor: dark ? "#141D34" : "white" }}
|
||||
>
|
||||
<Title order={3} fw={500} mb="md">
|
||||
Distribusi Agama
|
||||
{/* RIGHT: STATISTIK DINAMIKA PENDUDUK */}
|
||||
<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"}>
|
||||
Dinamika Penduduk
|
||||
</Title>
|
||||
<PieChart
|
||||
h={300}
|
||||
data={religionData.map((item) => ({
|
||||
name: item.religion,
|
||||
value: item.total,
|
||||
color: item.color,
|
||||
}))}
|
||||
withLabels
|
||||
withLabelsLine
|
||||
labelsPosition="outside"
|
||||
labelsType="percent"
|
||||
/>
|
||||
</Card>
|
||||
</Grid.Col>
|
||||
|
||||
{/* Data per Banjar */}
|
||||
<Grid.Col span={{ base: 12, lg: 6 }}>
|
||||
<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">
|
||||
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"}>
|
||||
</Group>
|
||||
<Grid gutter="sm">
|
||||
{dynamicStats.map((stat, index) => (
|
||||
<Grid.Col key={index} span={6}>
|
||||
<Card
|
||||
p="sm"
|
||||
radius="lg"
|
||||
bg={dark ? "#334155" : "#F1F5F9"}
|
||||
style={{
|
||||
transition: "transform 0.15s ease",
|
||||
cursor: "pointer",
|
||||
}}
|
||||
>
|
||||
<Stack gap={2} align="center">
|
||||
<ThemeIcon
|
||||
color={stat.color}
|
||||
variant="filled"
|
||||
size="md"
|
||||
radius="lg"
|
||||
>
|
||||
<stat.icon size={14} />
|
||||
</ThemeIcon>
|
||||
<Text size="xs" c="dimmed" ta="center">
|
||||
{stat.title}
|
||||
</Text>
|
||||
<Title order={4} fw={700} c={stat.color}>
|
||||
<Text
|
||||
size="lg"
|
||||
fw={700}
|
||||
c={stat.color}
|
||||
style={{ lineHeight: 1 }}
|
||||
>
|
||||
{stat.value}
|
||||
</Title>
|
||||
</Box>
|
||||
<Box c={stat.color}>{stat.icon}</Box>
|
||||
</Text>
|
||||
</Stack>
|
||||
</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>
|
||||
</Card>
|
||||
</Grid.Col>
|
||||
))}
|
||||
</Grid>
|
||||
</Card>
|
||||
</Stack>
|
||||
</Box>
|
||||
<Text size="sm" fw={600} c={dark ? "white" : "gray.9"}>
|
||||
{item.value.toLocaleString()}
|
||||
</Text>
|
||||
</Group>
|
||||
))}
|
||||
</Stack>
|
||||
</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>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -9,11 +9,18 @@ import {
|
||||
Title,
|
||||
useMantineColorScheme,
|
||||
} from "@mantine/core";
|
||||
import { IconUserShield } from "@tabler/icons-react";
|
||||
import {
|
||||
IconLayoutSidebarLeftCollapse,
|
||||
IconUserShield,
|
||||
} from "@tabler/icons-react";
|
||||
import { useLocation, useNavigate } from "@tanstack/react-router";
|
||||
import { Bell, Moon, Sun, User as UserIcon } from "lucide-react"; // Renamed User to UserIcon to avoid conflict with Mantine's User component if it exists
|
||||
import { Bell, Moon, Sun, User as UserIcon } from "lucide-react";
|
||||
|
||||
export function Header() {
|
||||
interface HeaderProps {
|
||||
onSidebarToggle?: () => void;
|
||||
}
|
||||
|
||||
export function Header({ onSidebarToggle }: HeaderProps) {
|
||||
const location = useLocation();
|
||||
const { colorScheme, toggleColorScheme } = useMantineColorScheme();
|
||||
const dark = colorScheme === "dark";
|
||||
@@ -56,9 +63,24 @@ export function Header() {
|
||||
return (
|
||||
<Group justify="space-between" w="100%">
|
||||
{/* Title */}
|
||||
<Title order={3} c={"white"}>
|
||||
{getPageTitle()}
|
||||
</Title>
|
||||
<Group gap="md">
|
||||
<ActionIcon
|
||||
onClick={onSidebarToggle}
|
||||
variant="subtle"
|
||||
size="lg"
|
||||
radius="xl"
|
||||
visibleFrom="sm"
|
||||
aria-label="Toggle sidebar"
|
||||
>
|
||||
<IconLayoutSidebarLeftCollapse
|
||||
color="white"
|
||||
style={{ width: "70%", height: "70%" }}
|
||||
/>
|
||||
</ActionIcon>
|
||||
{/* <Title order={3} c={"white"}>
|
||||
{getPageTitle()}
|
||||
</Title> */}
|
||||
</Group>
|
||||
|
||||
{/* Right Section */}
|
||||
<Group gap="md">
|
||||
|
||||
@@ -181,7 +181,7 @@ const HelpPage = () => {
|
||||
<HelpCard
|
||||
style={{ borderColor: dark ? "#141D34" : "white" }}
|
||||
bg={dark ? "#141D34" : "white"}
|
||||
icon={<IconBook size={24} />}
|
||||
icon={<IconBook size={24} color="white" />}
|
||||
title="Panduan Memulai"
|
||||
h="100%"
|
||||
>
|
||||
@@ -211,7 +211,7 @@ const HelpPage = () => {
|
||||
<HelpCard
|
||||
style={{ borderColor: dark ? "#141D34" : "white" }}
|
||||
bg={dark ? "#141D34" : "white"}
|
||||
icon={<IconVideo size={24} />}
|
||||
icon={<IconVideo size={24} color="white" />}
|
||||
title="Video Tutorial"
|
||||
h="100%"
|
||||
>
|
||||
@@ -241,7 +241,7 @@ const HelpPage = () => {
|
||||
<HelpCard
|
||||
style={{ borderColor: dark ? "#141D34" : "white" }}
|
||||
bg={dark ? "#141D34" : "white"}
|
||||
icon={<IconHelpCircle size={24} />}
|
||||
icon={<IconHelpCircle size={24} color="white" />}
|
||||
title="FAQ"
|
||||
h="100%"
|
||||
>
|
||||
@@ -273,7 +273,7 @@ const HelpPage = () => {
|
||||
<HelpCard
|
||||
style={{ borderColor: dark ? "#141D34" : "white" }}
|
||||
bg={dark ? "#141D34" : "white"}
|
||||
icon={<IconHeadphones size={24} />}
|
||||
icon={<IconHeadphones size={24} color="white" />}
|
||||
title="Hubungi Support"
|
||||
h="100%"
|
||||
>
|
||||
@@ -308,7 +308,7 @@ const HelpPage = () => {
|
||||
<HelpCard
|
||||
style={{ borderColor: dark ? "#141D34" : "white" }}
|
||||
bg={dark ? "#141D34" : "white"}
|
||||
icon={<IconFileText size={24} />}
|
||||
icon={<IconFileText size={24} color="white" />}
|
||||
title="Dokumentasi"
|
||||
h="100%"
|
||||
>
|
||||
@@ -340,7 +340,7 @@ const HelpPage = () => {
|
||||
<HelpCard
|
||||
style={{ borderColor: dark ? "#141D34" : "white" }}
|
||||
bg={dark ? "#141D34" : "white"}
|
||||
icon={<IconMessage size={24} />}
|
||||
icon={<IconMessage size={24} color="white" />}
|
||||
title="Jenna - Virtual Assistant"
|
||||
h="100%"
|
||||
>
|
||||
|
||||
@@ -13,10 +13,10 @@ import {
|
||||
useMantineColorScheme,
|
||||
} from "@mantine/core";
|
||||
import {
|
||||
MessageCircle,
|
||||
CheckCircle,
|
||||
AlertTriangle,
|
||||
CheckCircle,
|
||||
Clock,
|
||||
MessageCircle,
|
||||
TrendingUp,
|
||||
} from "lucide-react";
|
||||
import {
|
||||
|
||||
@@ -125,10 +125,51 @@ const KeamananPage = () => {
|
||||
</Title>
|
||||
</Group>
|
||||
|
||||
{/* KPI Cards */}
|
||||
|
||||
|
||||
<Grid gutter="md">
|
||||
{kpiData.map((kpi, index) => (
|
||||
<GridCol key={index} span={{ base: 12, sm: 6, md: 6 }}>
|
||||
{/* Peta Keamanan CCTV */}
|
||||
<GridCol span={{ base: 12, lg: 6 }}>
|
||||
<Stack gap={"xs"}>
|
||||
{/* KPI Cards */}
|
||||
<Grid gutter="md">
|
||||
{kpiData.map((kpi, index) => (
|
||||
<GridCol key={index} span={{ base: 12, sm: 6, md: 6 }}>
|
||||
<Card
|
||||
p="md"
|
||||
radius="md"
|
||||
withBorder
|
||||
bg={dark ? "#141D34" : "white"}
|
||||
style={{ borderColor: dark ? "#141D34" : "white" }}
|
||||
h="100%"
|
||||
>
|
||||
<Group justify="space-between" align="center">
|
||||
<Stack gap={0}>
|
||||
<Text size="sm" c={dark ? "dark.3" : "dimmed"}>
|
||||
{kpi.subtitle}
|
||||
</Text>
|
||||
<Group gap="xs" align="center">
|
||||
<Text size="xl" fw={700} c={dark ? "dark.0" : "black"}>
|
||||
{kpi.value}
|
||||
</Text>
|
||||
<Text size="sm" c={dark ? "dark.3" : "dimmed"}>
|
||||
{kpi.title}
|
||||
</Text>
|
||||
</Group>
|
||||
</Stack>
|
||||
<ThemeIcon
|
||||
variant="light"
|
||||
color={kpi.color}
|
||||
size="xl"
|
||||
radius="xl"
|
||||
>
|
||||
{kpi.icon}
|
||||
</ThemeIcon>
|
||||
</Group>
|
||||
</Card>
|
||||
</GridCol>
|
||||
))}
|
||||
</Grid>
|
||||
<Card
|
||||
p="md"
|
||||
radius="md"
|
||||
@@ -137,119 +178,81 @@ const KeamananPage = () => {
|
||||
style={{ borderColor: dark ? "#141D34" : "white" }}
|
||||
h="100%"
|
||||
>
|
||||
<Group justify="space-between" align="center">
|
||||
<Stack gap={0}>
|
||||
<Text size="sm" c={dark ? "dark.3" : "dimmed"}>
|
||||
{kpi.subtitle}
|
||||
</Text>
|
||||
<Group gap="xs" align="center">
|
||||
<Text size="xl" fw={700} c={dark ? "dark.0" : "black"}>
|
||||
{kpi.value}
|
||||
</Text>
|
||||
<Text size="sm" c={dark ? "dark.3" : "dimmed"}>
|
||||
{kpi.title}
|
||||
</Text>
|
||||
</Group>
|
||||
</Stack>
|
||||
<ThemeIcon
|
||||
variant="light"
|
||||
color={kpi.color}
|
||||
size="xl"
|
||||
radius="xl"
|
||||
>
|
||||
{kpi.icon}
|
||||
</ThemeIcon>
|
||||
</Group>
|
||||
</Card>
|
||||
</GridCol>
|
||||
))}
|
||||
</Grid>
|
||||
|
||||
<Grid gutter="md">
|
||||
{/* Peta Keamanan CCTV */}
|
||||
<GridCol span={{ base: 12, lg: 6 }}>
|
||||
<Card
|
||||
p="md"
|
||||
radius="md"
|
||||
withBorder
|
||||
bg={dark ? "#141D34" : "white"}
|
||||
style={{ borderColor: dark ? "#141D34" : "white" }}
|
||||
h="100%"
|
||||
>
|
||||
<Title order={3} mb="md" c={dark ? "dark.0" : "black"}>
|
||||
Peta Keamanan CCTV
|
||||
</Title>
|
||||
<Text size="sm" c={dark ? "dark.3" : "dimmed"} mb="md">
|
||||
Titik Lokasi CCTV
|
||||
</Text>
|
||||
|
||||
{/* Placeholder for map */}
|
||||
<Box
|
||||
style={{
|
||||
backgroundColor: dark ? "#2d3748" : "#e2e8f0",
|
||||
borderRadius: "8px",
|
||||
height: "400px",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
<Stack align="center">
|
||||
<IconMapPin
|
||||
size={48}
|
||||
stroke={1.5}
|
||||
color={dark ? "#94a3b8" : "#64748b"}
|
||||
/>
|
||||
<Text c={dark ? "dark.3" : "dimmed"}>Peta Lokasi CCTV</Text>
|
||||
<Text size="sm" c={dark ? "dark.3" : "dimmed"} ta="center">
|
||||
Integrasi dengan Google Maps atau Mapbox akan ditampilkan di
|
||||
sini
|
||||
</Text>
|
||||
</Stack>
|
||||
</Box>
|
||||
|
||||
{/* CCTV Locations List */}
|
||||
<Stack mt="md" gap="sm">
|
||||
<Title order={4} c={dark ? "dark.0" : "black"}>
|
||||
Daftar CCTV
|
||||
<Title order={3} mb="md" c={dark ? "dark.0" : "black"}>
|
||||
Peta Keamanan CCTV
|
||||
</Title>
|
||||
{cctvLocations.map((cctv, index) => (
|
||||
<Card
|
||||
key={index}
|
||||
p="md"
|
||||
radius="md"
|
||||
withBorder
|
||||
bg={dark ? "#263852ff" : "#F1F5F9"}
|
||||
style={{ borderColor: dark ? "#263852ff" : "#F1F5F9" }}
|
||||
>
|
||||
<Group justify="space-between">
|
||||
<Stack gap={0}>
|
||||
<Group gap="xs">
|
||||
<Text fw={500} c={dark ? "dark.0" : "black"}>
|
||||
{cctv.id}
|
||||
<Text size="sm" c={dark ? "dark.3" : "dimmed"} mb="md">
|
||||
Titik Lokasi CCTV
|
||||
</Text>
|
||||
|
||||
{/* Placeholder for map */}
|
||||
<Box
|
||||
style={{
|
||||
backgroundColor: dark ? "#2d3748" : "#e2e8f0",
|
||||
borderRadius: "8px",
|
||||
height: "400px",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
<Stack align="center">
|
||||
<IconMapPin
|
||||
size={48}
|
||||
stroke={1.5}
|
||||
color={dark ? "#94a3b8" : "#64748b"}
|
||||
/>
|
||||
<Text c={dark ? "dark.3" : "dimmed"}>Peta Lokasi CCTV</Text>
|
||||
<Text size="sm" c={dark ? "dark.3" : "dimmed"} ta="center">
|
||||
Integrasi dengan Google Maps atau Mapbox akan ditampilkan di
|
||||
sini
|
||||
</Text>
|
||||
</Stack>
|
||||
</Box>
|
||||
|
||||
{/* CCTV Locations List */}
|
||||
<Stack mt="md" gap="sm">
|
||||
<Title order={4} c={dark ? "dark.0" : "black"}>
|
||||
Daftar CCTV
|
||||
</Title>
|
||||
{cctvLocations.map((cctv, index) => (
|
||||
<Card
|
||||
key={index}
|
||||
p="md"
|
||||
radius="md"
|
||||
withBorder
|
||||
bg={dark ? "#263852ff" : "#F1F5F9"}
|
||||
style={{ borderColor: dark ? "#263852ff" : "#F1F5F9" }}
|
||||
>
|
||||
<Group justify="space-between">
|
||||
<Stack gap={0}>
|
||||
<Group gap="xs">
|
||||
<Text fw={500} c={dark ? "dark.0" : "black"}>
|
||||
{cctv.id}
|
||||
</Text>
|
||||
<Badge
|
||||
variant="dot"
|
||||
color={cctv.status === "active" ? "green" : "gray"}
|
||||
>
|
||||
{cctv.status === "active" ? "Online" : "Offline"}
|
||||
</Badge>
|
||||
</Group>
|
||||
<Text size="sm" c={dark ? "dark.3" : "dimmed"}>
|
||||
{cctv.location}
|
||||
</Text>
|
||||
</Stack>
|
||||
<Group gap="xs">
|
||||
<IconClock size={16} stroke={1.5} />
|
||||
<Text size="sm" c={dark ? "dark.3" : "dimmed"}>
|
||||
{cctv.lastSeen}
|
||||
</Text>
|
||||
<Badge
|
||||
variant="dot"
|
||||
color={cctv.status === "active" ? "green" : "gray"}
|
||||
>
|
||||
{cctv.status === "active" ? "Online" : "Offline"}
|
||||
</Badge>
|
||||
</Group>
|
||||
<Text size="sm" c={dark ? "dark.3" : "dimmed"}>
|
||||
{cctv.location}
|
||||
</Text>
|
||||
</Stack>
|
||||
<Group gap="xs">
|
||||
<IconClock size={16} stroke={1.5} />
|
||||
<Text size="sm" c={dark ? "dark.3" : "dimmed"}>
|
||||
{cctv.lastSeen}
|
||||
</Text>
|
||||
</Group>
|
||||
</Group>
|
||||
</Card>
|
||||
))}
|
||||
</Stack>
|
||||
</Card>
|
||||
</Card>
|
||||
))}
|
||||
</Stack>
|
||||
</Card>
|
||||
</Stack>
|
||||
</GridCol>
|
||||
|
||||
{/* Daftar Laporan Keamanan */}
|
||||
|
||||
@@ -1,73 +1,70 @@
|
||||
import { BarChart } from "@mantine/charts";
|
||||
import {
|
||||
Badge,
|
||||
Box,
|
||||
Button,
|
||||
Card,
|
||||
Grid,
|
||||
GridCol,
|
||||
Group,
|
||||
Progress,
|
||||
Stack,
|
||||
Text,
|
||||
ThemeIcon,
|
||||
Title,
|
||||
useMantineColorScheme,
|
||||
} from "@mantine/core";
|
||||
import {
|
||||
IconCurrency,
|
||||
IconTrendingDown,
|
||||
IconTrendingUp,
|
||||
} from "@tabler/icons-react";
|
||||
import React from "react";
|
||||
CheckCircle,
|
||||
Coins,
|
||||
PieChart as PieChartIcon,
|
||||
Receipt,
|
||||
TrendingDown,
|
||||
TrendingUp,
|
||||
} from "lucide-react";
|
||||
import {
|
||||
Bar,
|
||||
BarChart,
|
||||
CartesianGrid,
|
||||
Line,
|
||||
LineChart,
|
||||
ResponsiveContainer,
|
||||
Tooltip,
|
||||
XAxis,
|
||||
YAxis,
|
||||
} from "recharts";
|
||||
|
||||
// Sample Data
|
||||
// KPI Data
|
||||
const kpiData = [
|
||||
{
|
||||
id: 1,
|
||||
title: "Total APBDes",
|
||||
value: "Rp 5.2M",
|
||||
sub: "Tahun 2025",
|
||||
icon: <IconCurrency className="h-6 w-6 text-muted-foreground" />,
|
||||
subtitle: "Tahun 2025",
|
||||
icon: Coins,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Realisasi",
|
||||
value: "68%",
|
||||
sub: "Rp 3.5M dari 5.2M",
|
||||
icon: (
|
||||
<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"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M9 12.75 11.25 15 15 9.75M21 12c0 1.268-.63 2.473-1.688 3.342-.48.485-.926.97-1.378 1.44c-1.472 1.58-2.306 2.787-2.91 3.514-.15.18-.207.33-.207.33A.75.75 0 0 1 15 21h-3c-1.104 0-2.08-.542-2.657-1.455-.139-.201-.264-.406-.38-.614l-.014-.025C8.85 18.067 8.156 17.2 7.5 16.325.728 12.56.728 7.44 7.5 3.675c3.04-.482 5.584.47 7.042 1.956.674.672 1.228 1.462 1.696 2.307.426.786.793 1.582 1.113 2.392h.001Z"
|
||||
/>
|
||||
</svg>
|
||||
),
|
||||
subtitle: "Rp 3.5M dari 5.2M",
|
||||
icon: CheckCircle,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Pemasukan",
|
||||
value: "Rp 580jt",
|
||||
sub: "Bulan ini",
|
||||
delta: "+8%",
|
||||
deltaType: "positive",
|
||||
icon: <IconTrendingUp className="h-6 w-6 text-muted-foreground" />,
|
||||
subtitle: "Bulan ini",
|
||||
trend: "+8%",
|
||||
icon: TrendingUp,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "Pengeluaran",
|
||||
value: "Rp 520jt",
|
||||
sub: "Bulan ini",
|
||||
icon: <IconTrendingDown className="h-6 w-6 text-muted-foreground" />,
|
||||
subtitle: "Bulan ini",
|
||||
icon: TrendingDown,
|
||||
},
|
||||
];
|
||||
|
||||
// Income & Expense Data
|
||||
const incomeExpenseData = [
|
||||
{ month: "Apr", income: 450, expense: 380 },
|
||||
{ month: "Mei", income: 520, expense: 420 },
|
||||
@@ -78,6 +75,7 @@ const incomeExpenseData = [
|
||||
{ month: "Okt", income: 580, expense: 520 },
|
||||
];
|
||||
|
||||
// Sector Allocation Data
|
||||
const allocationData = [
|
||||
{ sector: "Pembangunan", amount: 1200 },
|
||||
{ sector: "Kesehatan", amount: 800 },
|
||||
@@ -87,13 +85,7 @@ const allocationData = [
|
||||
{ sector: "Teknologi", amount: 300 },
|
||||
];
|
||||
|
||||
const assistanceFundData = [
|
||||
{ source: "Dana Desa (DD)", amount: 1800, status: "cair" },
|
||||
{ source: "Alokasi Dana Desa (ADD)", amount: 950, status: "cair" },
|
||||
{ source: "Bagi Hasil Pajak", amount: 450, status: "cair" },
|
||||
{ source: "Hibah Provinsi", amount: 300, status: "proses" },
|
||||
];
|
||||
|
||||
// APBDes Report Data
|
||||
const apbdReport = {
|
||||
income: [
|
||||
{ category: "Dana Desa", amount: 1800 },
|
||||
@@ -113,244 +105,410 @@ const apbdReport = {
|
||||
totalExpenses: 2155,
|
||||
};
|
||||
|
||||
// Aid & Grants Data
|
||||
const assistanceFundData = [
|
||||
{ source: "Dana Desa (DD)", amount: 1800, status: "cair" },
|
||||
{ source: "Alokasi Dana Desa (ADD)", amount: 950, status: "cair" },
|
||||
{ source: "Bagi Hasil Pajak", amount: 450, status: "cair" },
|
||||
{ source: "Hibah Provinsi", amount: 300, status: "proses" },
|
||||
];
|
||||
|
||||
const KeuanganAnggaran = () => {
|
||||
const { colorScheme } = useMantineColorScheme();
|
||||
const dark = colorScheme === "dark";
|
||||
return (
|
||||
<Box>
|
||||
<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" }}
|
||||
h="100%"
|
||||
>
|
||||
<Group justify="space-between" align="flex-start" mb="xs">
|
||||
<Text size="sm" fw={500} c="dimmed">
|
||||
{kpi.title}
|
||||
</Text>
|
||||
{React.cloneElement(kpi.icon, {
|
||||
className: "h-6 w-6",
|
||||
color: "var(--mantine-color-dimmed)",
|
||||
})}
|
||||
</Group>
|
||||
<Title order={3} fw={700} mt="xs">
|
||||
{kpi.value}
|
||||
</Title>
|
||||
{kpi.delta && (
|
||||
<Text
|
||||
size="xs"
|
||||
c={
|
||||
kpi.deltaType === "positive"
|
||||
? "green"
|
||||
: kpi.deltaType === "negative"
|
||||
? "red"
|
||||
: "dimmed"
|
||||
}
|
||||
mt={4}
|
||||
>
|
||||
{kpi.delta}
|
||||
</Text>
|
||||
)}
|
||||
{kpi.sub && (
|
||||
<Text size="xs" c="dimmed" mt="auto">
|
||||
{kpi.sub}
|
||||
</Text>
|
||||
)}
|
||||
</Card>
|
||||
</Grid.Col>
|
||||
))}
|
||||
</Grid>
|
||||
|
||||
{/* Charts Section */}
|
||||
<Grid gutter="lg">
|
||||
{/* Grafik Pemasukan vs Pengeluaran */}
|
||||
<Grid.Col span={{ base: 12, lg: 6 }}>
|
||||
return (
|
||||
<Stack gap="lg">
|
||||
{/* TOP SECTION - 4 STAT CARDS */}
|
||||
<Grid gutter="md">
|
||||
{kpiData.map((item) => (
|
||||
<Grid.Col key={item.id} span={{ base: 12, sm: 6, lg: 3 }}>
|
||||
<Card
|
||||
p="md"
|
||||
radius="md"
|
||||
radius="xl"
|
||||
withBorder
|
||||
bg={dark ? "#141D34" : "white"}
|
||||
style={{ borderColor: dark ? "#141D34" : "white" }}
|
||||
bg={dark ? "#1E293B" : "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">
|
||||
Pemasukan vs Pengeluaran
|
||||
</Title>
|
||||
<BarChart
|
||||
h={300}
|
||||
data={incomeExpenseData}
|
||||
dataKey="month"
|
||||
series={[
|
||||
{ name: "income", color: "green", label: "Pemasukan" },
|
||||
{ name: "expense", color: "red", label: "Pengeluaran" },
|
||||
]}
|
||||
withLegend
|
||||
/>
|
||||
<Group justify="space-between" align="flex-start" w="100%">
|
||||
<Stack gap={2}>
|
||||
<Text size="sm" c="dimmed">
|
||||
{item.title}
|
||||
</Text>
|
||||
<Text size="xl" fw={700} c={dark ? "white" : "gray.9"}>
|
||||
{item.value}
|
||||
</Text>
|
||||
<Group gap={4} align="flex-start">
|
||||
{item.trend && <TrendingUp size={14} color="#22C55E" />}
|
||||
<Text
|
||||
size="xs"
|
||||
c={item.trend ? "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>
|
||||
</Grid.Col>
|
||||
))}
|
||||
</Grid>
|
||||
|
||||
{/* Alokasi Anggaran Per Sektor */}
|
||||
<Grid.Col span={{ base: 12, lg: 6 }}>
|
||||
<Card
|
||||
p="md"
|
||||
radius="md"
|
||||
withBorder
|
||||
bg={dark ? "#141D34" : "white"}
|
||||
style={{ borderColor: dark ? "#141D34" : "white" }}
|
||||
>
|
||||
<Title order={3} fw={500} mb="md">
|
||||
{/* MAIN CHART SECTION */}
|
||||
<Grid gutter="lg">
|
||||
{/* LEFT: PEMASUKAN DAN PENGELUARAN (70%) */}
|
||||
<Grid.Col span={{ base: 12, lg: 8 }}>
|
||||
<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"}>
|
||||
Pemasukan dan Pengeluaran
|
||||
</Title>
|
||||
</Group>
|
||||
<ResponsiveContainer width="100%" height={300}>
|
||||
<LineChart data={incomeExpenseData}>
|
||||
<CartesianGrid
|
||||
strokeDasharray="3 3"
|
||||
vertical={false}
|
||||
stroke={dark ? "#334155" : "#e5e7eb"}
|
||||
/>
|
||||
<XAxis
|
||||
dataKey="month"
|
||||
axisLine={false}
|
||||
tickLine={false}
|
||||
tick={{
|
||||
fill: dark ? "#E2E8F0" : "#374151",
|
||||
fontSize: 12,
|
||||
}}
|
||||
/>
|
||||
<YAxis
|
||||
axisLine={false}
|
||||
tickLine={false}
|
||||
tick={{
|
||||
fill: dark ? "#E2E8F0" : "#374151",
|
||||
fontSize: 12,
|
||||
}}
|
||||
tickFormatter={(value) => `Rp ${value}jt`}
|
||||
/>
|
||||
<Tooltip
|
||||
contentStyle={{
|
||||
backgroundColor: dark ? "#1E293B" : "white",
|
||||
borderColor: dark ? "#334155" : "#e5e7eb",
|
||||
borderRadius: "8px",
|
||||
}}
|
||||
labelStyle={{ color: dark ? "#E2E8F0" : "#374151" }}
|
||||
formatter={(value: number | undefined) => [
|
||||
`Rp ${value}jt`,
|
||||
"",
|
||||
]}
|
||||
/>
|
||||
<Line
|
||||
type="monotone"
|
||||
dataKey="income"
|
||||
stroke="#22C55E"
|
||||
strokeWidth={2}
|
||||
dot={{ fill: "#22C55E", strokeWidth: 2, r: 4 }}
|
||||
activeDot={{ r: 6 }}
|
||||
name="Pemasukan"
|
||||
/>
|
||||
<Line
|
||||
type="monotone"
|
||||
dataKey="expense"
|
||||
stroke="#EF4444"
|
||||
strokeWidth={2}
|
||||
dot={{ fill: "#EF4444", strokeWidth: 2, r: 4 }}
|
||||
activeDot={{ r: 6 }}
|
||||
name="Pengeluaran"
|
||||
/>
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
</Card>
|
||||
</Grid.Col>
|
||||
|
||||
{/* RIGHT: ALOKASI ANGGARAN PER SEKTOR (30%) */}
|
||||
<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"}>
|
||||
Alokasi Anggaran Per Sektor
|
||||
</Title>
|
||||
<BarChart
|
||||
h={300}
|
||||
data={allocationData}
|
||||
dataKey="sector"
|
||||
series={[
|
||||
{ name: "amount", color: "darmasaba-navy", label: "Jumlah" },
|
||||
]}
|
||||
withLegend
|
||||
orientation="horizontal"
|
||||
/>
|
||||
</Card>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
</Group>
|
||||
<ResponsiveContainer width="100%" height={300}>
|
||||
<BarChart data={allocationData} 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,
|
||||
}}
|
||||
tickFormatter={(value) => `${value}`}
|
||||
/>
|
||||
<YAxis
|
||||
type="category"
|
||||
dataKey="sector"
|
||||
axisLine={false}
|
||||
tickLine={false}
|
||||
tick={{
|
||||
fill: dark ? "#E2E8F0" : "#374151",
|
||||
fontSize: 11,
|
||||
}}
|
||||
width={100}
|
||||
/>
|
||||
<Tooltip
|
||||
contentStyle={{
|
||||
backgroundColor: dark ? "#1E293B" : "white",
|
||||
borderColor: dark ? "#334155" : "#e5e7eb",
|
||||
borderRadius: "8px",
|
||||
}}
|
||||
formatter={(value: number | undefined) => [
|
||||
`Rp ${value}jt`,
|
||||
"Jumlah",
|
||||
]}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="amount"
|
||||
fill="#1E3A5F"
|
||||
radius={[0, 8, 8, 0]}
|
||||
maxBarSize={30}
|
||||
/>
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</Card>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
|
||||
<Grid gutter="lg">
|
||||
{/* Dana Bantuan & Hibah */}
|
||||
<Grid.Col span={{ base: 12, lg: 6 }}>
|
||||
<Card
|
||||
p="md"
|
||||
radius="md"
|
||||
withBorder
|
||||
bg={dark ? "#141D34" : "white"}
|
||||
style={{ borderColor: dark ? "#141D34" : "white" }}
|
||||
>
|
||||
<Title order={3} fw={500} mb="md">
|
||||
Dana Bantuan & Hibah
|
||||
{/* BOTTOM SECTION */}
|
||||
<Grid gutter="lg">
|
||||
{/* LEFT: LAPORAN APBDES */}
|
||||
<Grid.Col span={{ base: 12, lg: 6 }}>
|
||||
<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">
|
||||
<Receipt size={14} />
|
||||
</ThemeIcon>
|
||||
<Title order={4} c={dark ? "white" : "gray.9"}>
|
||||
Laporan APBDes
|
||||
</Title>
|
||||
<Stack gap="sm">
|
||||
{assistanceFundData.map((fund, index) => (
|
||||
<Group
|
||||
key={index}
|
||||
justify="space-between"
|
||||
align="center"
|
||||
p="sm"
|
||||
style={{
|
||||
border: "1px solid var(--mantine-color-gray-3)",
|
||||
borderRadius: "var(--mantine-radius-sm)",
|
||||
}}
|
||||
>
|
||||
</Group>
|
||||
|
||||
<Grid gutter="md">
|
||||
{/* Pendapatan */}
|
||||
<Grid.Col span={6}>
|
||||
<Card p="sm" radius="lg" bg={dark ? "#064E3B" : "#DCFCE7"}>
|
||||
<Title order={5} c="#22C55E" mb="sm">
|
||||
Pendapatan
|
||||
</Title>
|
||||
<Stack gap="xs">
|
||||
{apbdReport.income.map((item, index) => (
|
||||
<Group key={index} justify="space-between">
|
||||
<Text size="sm" c={dark ? "gray.3" : "gray.7"}>
|
||||
{item.category}
|
||||
</Text>
|
||||
<Text size="sm" fw={600} c="#22C55E">
|
||||
Rp {item.amount.toLocaleString()}jt
|
||||
</Text>
|
||||
</Group>
|
||||
))}
|
||||
<Group
|
||||
justify="space-between"
|
||||
mt="sm"
|
||||
pt="sm"
|
||||
style={{
|
||||
borderTop: `1px solid ${dark ? "#065F46" : "#86EFAC"}`,
|
||||
}}
|
||||
>
|
||||
<Text fw={700} c="#22C55E">
|
||||
Total:
|
||||
</Text>
|
||||
<Text fw={700} c="#22C55E">
|
||||
Rp {apbdReport.totalIncome.toLocaleString()}jt
|
||||
</Text>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Card>
|
||||
</Grid.Col>
|
||||
|
||||
{/* Belanja */}
|
||||
<Grid.Col span={6}>
|
||||
<Card p="sm" radius="lg" bg={dark ? "#7F1D1D" : "#FEE2E2"}>
|
||||
<Title order={5} c="#EF4444" mb="sm">
|
||||
Belanja
|
||||
</Title>
|
||||
<Stack gap="xs">
|
||||
{apbdReport.expenses.map((item, index) => (
|
||||
<Group key={index} justify="space-between">
|
||||
<Text size="sm" c={dark ? "gray.3" : "gray.7"}>
|
||||
{item.category}
|
||||
</Text>
|
||||
<Text size="sm" fw={600} c="#EF4444">
|
||||
Rp {item.amount.toLocaleString()}jt
|
||||
</Text>
|
||||
</Group>
|
||||
))}
|
||||
<Group
|
||||
justify="space-between"
|
||||
mt="sm"
|
||||
pt="sm"
|
||||
style={{
|
||||
borderTop: `1px solid ${dark ? "#991B1B" : "#FCA5A5"}`,
|
||||
}}
|
||||
>
|
||||
<Text fw={700} c="#EF4444">
|
||||
Total:
|
||||
</Text>
|
||||
<Text fw={700} c="#EF4444">
|
||||
Rp {apbdReport.totalExpenses.toLocaleString()}jt
|
||||
</Text>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Card>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
|
||||
{/* Saldo */}
|
||||
<Group
|
||||
justify="space-between"
|
||||
mt="md"
|
||||
pt="md"
|
||||
style={{
|
||||
borderTop: `1px solid ${dark ? "#334155" : "#e5e7eb"}`,
|
||||
}}
|
||||
>
|
||||
<Text fw={700} c={dark ? "white" : "gray.9"}>
|
||||
Saldo:
|
||||
</Text>
|
||||
<Text
|
||||
fw={700}
|
||||
size="lg"
|
||||
c={
|
||||
apbdReport.totalIncome > apbdReport.totalExpenses
|
||||
? "#22C55E"
|
||||
: "#EF4444"
|
||||
}
|
||||
>
|
||||
Rp{" "}
|
||||
{(
|
||||
apbdReport.totalIncome - apbdReport.totalExpenses
|
||||
).toLocaleString()}
|
||||
jt
|
||||
</Text>
|
||||
</Group>
|
||||
</Card>
|
||||
</Grid.Col>
|
||||
|
||||
{/* RIGHT: DANA BANTUAN DAN HIBAH */}
|
||||
<Grid.Col span={{ base: 12, lg: 6 }}>
|
||||
<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">
|
||||
<Coins size={14} />
|
||||
</ThemeIcon>
|
||||
<Title order={4} c={dark ? "white" : "gray.9"}>
|
||||
Dana Bantuan dan Hibah
|
||||
</Title>
|
||||
</Group>
|
||||
<Stack gap="sm">
|
||||
{assistanceFundData.map((fund, index) => (
|
||||
<Card
|
||||
key={index}
|
||||
p="sm"
|
||||
radius="lg"
|
||||
bg={dark ? "#334155" : "#F1F5F9"}
|
||||
style={{
|
||||
borderColor: "transparent",
|
||||
transition: "background-color 0.15s ease",
|
||||
}}
|
||||
>
|
||||
<Group justify="space-between" align="center">
|
||||
<Box>
|
||||
<Text size="sm" fw={500}>
|
||||
<Text size="sm" fw={600} c={dark ? "white" : "gray.9"}>
|
||||
{fund.source}
|
||||
</Text>
|
||||
<Text size="sm" c="dimmed">
|
||||
<Text size="xs" c="dimmed">
|
||||
Rp {fund.amount.toLocaleString()}jt
|
||||
</Text>
|
||||
</Box>
|
||||
<Badge
|
||||
variant="light"
|
||||
color={fund.status === "cair" ? "green" : "yellow"}
|
||||
radius="sm"
|
||||
fw={600}
|
||||
>
|
||||
{fund.status}
|
||||
{fund.status === "cair" ? "Cair" : "Proses"}
|
||||
</Badge>
|
||||
</Group>
|
||||
))}
|
||||
</Stack>
|
||||
</Card>
|
||||
</Grid.Col>
|
||||
|
||||
{/* Laporan APBDes */}
|
||||
<Grid.Col span={{ base: 12, lg: 6 }}>
|
||||
<Card
|
||||
p="md"
|
||||
radius="md"
|
||||
withBorder
|
||||
bg={dark ? "#141D34" : "white"}
|
||||
style={{ borderColor: dark ? "#141D34" : "white" }}
|
||||
>
|
||||
<Title order={3} fw={500} mb="md">
|
||||
Laporan APBDes
|
||||
</Title>
|
||||
|
||||
<Box mb="md">
|
||||
<Title order={4} mb="sm">
|
||||
Pendapatan
|
||||
</Title>
|
||||
<Stack gap="xs">
|
||||
{apbdReport.income.map((item, index) => (
|
||||
<Group key={index} justify="space-between">
|
||||
<Text size="sm">{item.category}</Text>
|
||||
<Text size="sm" c="green">
|
||||
Rp {item.amount.toLocaleString()}jt
|
||||
</Text>
|
||||
</Group>
|
||||
))}
|
||||
<Group justify="space-between" mt="sm">
|
||||
<Text fw={700}>Total Pendapatan:</Text>
|
||||
<Text fw={700} c="green">
|
||||
Rp {apbdReport.totalIncome.toLocaleString()}jt
|
||||
</Text>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Title order={4} mb="sm">
|
||||
Belanja
|
||||
</Title>
|
||||
<Stack gap="xs">
|
||||
{apbdReport.expenses.map((item, index) => (
|
||||
<Group key={index} justify="space-between">
|
||||
<Text size="sm">{item.category}</Text>
|
||||
<Text size="sm" c="red">
|
||||
Rp {item.amount.toLocaleString()}jt
|
||||
</Text>
|
||||
</Group>
|
||||
))}
|
||||
<Group justify="space-between" mt="sm">
|
||||
<Text fw={700}>Total Belanja:</Text>
|
||||
<Text fw={700} c="red">
|
||||
Rp {apbdReport.totalExpenses.toLocaleString()}jt
|
||||
</Text>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
mt="md"
|
||||
pt="md"
|
||||
style={{ borderTop: "1px solid var(--mantine-color-gray-3)" }}
|
||||
>
|
||||
<Group justify="space-between">
|
||||
<Text fw={700}>Saldo:</Text>
|
||||
<Text
|
||||
fw={700}
|
||||
c={
|
||||
apbdReport.totalIncome > apbdReport.totalExpenses
|
||||
? "green"
|
||||
: "red"
|
||||
}
|
||||
>
|
||||
Rp{" "}
|
||||
{(
|
||||
apbdReport.totalIncome - apbdReport.totalExpenses
|
||||
).toLocaleString()}
|
||||
jt
|
||||
</Text>
|
||||
</Group>
|
||||
</Box>
|
||||
</Card>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Card>
|
||||
))}
|
||||
</Stack>
|
||||
</Card>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -1,12 +1,11 @@
|
||||
import { Grid, Stack } from "@mantine/core";
|
||||
import { ActivityCard } from "./kinerja-divisi/activity-card";
|
||||
import { ArchiveCard } from "./kinerja-divisi/archive-card";
|
||||
import { DiscussionPanel } from "./kinerja-divisi/discussion-panel";
|
||||
import { DivisionList } from "./kinerja-divisi/division-list";
|
||||
import { DocumentChart } from "./kinerja-divisi/document-chart";
|
||||
import { ProgressChart } from "./kinerja-divisi/progress-chart";
|
||||
import { DiscussionPanel } from "./kinerja-divisi/discussion-panel";
|
||||
import { EventCard } from "./kinerja-divisi/event-card";
|
||||
import { ArchiveCard } from "./kinerja-divisi/archive-card";
|
||||
|
||||
import { ProgressChart } from "./kinerja-divisi/progress-chart";
|
||||
|
||||
// Data for program kegiatan (Section 1)
|
||||
const programKegiatanData = [
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Card, Text, Progress, Group, Box } from "@mantine/core";
|
||||
import { Box, Card, Group, Progress, Text } from "@mantine/core";
|
||||
|
||||
interface ActivityCardProps {
|
||||
title: string;
|
||||
@@ -86,4 +86,4 @@ export function ActivityCard({
|
||||
</Box>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -8,7 +8,7 @@ import {
|
||||
Text,
|
||||
ThemeIcon,
|
||||
Title,
|
||||
useMantineColorScheme
|
||||
useMantineColorScheme,
|
||||
} from "@mantine/core";
|
||||
import { CheckCircle, Clock, FileText, MessageCircle } from "lucide-react";
|
||||
import {
|
||||
|
||||
@@ -1,12 +1,15 @@
|
||||
import {
|
||||
ActionIcon,
|
||||
Alert,
|
||||
Box,
|
||||
Button,
|
||||
Card,
|
||||
Group,
|
||||
Modal,
|
||||
Select,
|
||||
Space,
|
||||
Stack,
|
||||
Switch,
|
||||
Table,
|
||||
Text,
|
||||
TextInput,
|
||||
@@ -23,167 +26,63 @@ import {
|
||||
import { useState } from "react";
|
||||
|
||||
const AksesDanTimSettings = () => {
|
||||
const [opened, setOpened] = useState(false);
|
||||
const { colorScheme } = useMantineColorScheme();
|
||||
const dark = colorScheme === "dark";
|
||||
|
||||
// Sample team members data
|
||||
const teamMembers = [
|
||||
{
|
||||
id: 1,
|
||||
name: "Admin Utama",
|
||||
email: "admin@desa.go.id",
|
||||
role: "Administrator",
|
||||
status: "Aktif",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "Operator Desa",
|
||||
email: "operator@desa.go.id",
|
||||
role: "Operator",
|
||||
status: "Aktif",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "Staff Keuangan",
|
||||
email: "keuangan@desa.go.id",
|
||||
role: "Keuangan",
|
||||
status: "Aktif",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: "Staff Umum",
|
||||
email: "umum@desa.go.id",
|
||||
role: "Umum",
|
||||
status: "Nonaktif",
|
||||
},
|
||||
];
|
||||
|
||||
const roles = [
|
||||
{ value: "administrator", label: "Administrator" },
|
||||
{ value: "operator", label: "Operator" },
|
||||
{ value: "keuangan", label: "Keuangan" },
|
||||
{ value: "umum", label: "Umum" },
|
||||
{ value: "keamanan", label: "Keamanan" },
|
||||
];
|
||||
|
||||
return (
|
||||
<Card
|
||||
withBorder
|
||||
radius="md"
|
||||
p="xl"
|
||||
bg={dark ? "#141D34" : "white"}
|
||||
style={{ borderColor: dark ? "#141D34" : "white" }}
|
||||
<Stack
|
||||
pr={"50%"}
|
||||
gap={"xl"}
|
||||
>
|
||||
<Modal
|
||||
opened={opened}
|
||||
onClose={() => setOpened(false)}
|
||||
title="Tambah Anggota Tim"
|
||||
size="lg"
|
||||
>
|
||||
<TextInput
|
||||
label="Nama Lengkap"
|
||||
placeholder="Masukkan nama lengkap anggota tim"
|
||||
mb="md"
|
||||
/>
|
||||
<TextInput
|
||||
label="Alamat Email"
|
||||
placeholder="Masukkan alamat email"
|
||||
mb="md"
|
||||
/>
|
||||
<Select
|
||||
label="Peran"
|
||||
placeholder="Pilih peran anggota tim"
|
||||
data={roles}
|
||||
mb="md"
|
||||
/>
|
||||
<Group justify="flex-end" mt="xl">
|
||||
<Button variant="outline" onClick={() => setOpened(false)}>
|
||||
Batal
|
||||
</Button>
|
||||
<Button>Undang Anggota</Button>
|
||||
</Group>
|
||||
</Modal>
|
||||
|
||||
<Title order={2} mb="lg">
|
||||
Akses & Tim
|
||||
</Title>
|
||||
<Text color="dimmed" mb="xl">
|
||||
Kelola akses dan anggota tim Anda
|
||||
</Text>
|
||||
|
||||
<Space h="lg" />
|
||||
|
||||
<Group justify="space-between" mb="md">
|
||||
<Title order={4}>Anggota Tim</Title>
|
||||
<Button
|
||||
leftSection={<IconUserPlus size={16} />}
|
||||
onClick={() => setOpened(true)}
|
||||
>
|
||||
Tambah Anggota
|
||||
</Button>
|
||||
</Group>
|
||||
|
||||
<Table highlightOnHover>
|
||||
<Table.Thead>
|
||||
<Table.Tr>
|
||||
<Table.Th>Nama</Table.Th>
|
||||
<Table.Th>Email</Table.Th>
|
||||
<Table.Th>Peran</Table.Th>
|
||||
<Table.Th>Status</Table.Th>
|
||||
<Table.Th>Aksi</Table.Th>
|
||||
</Table.Tr>
|
||||
</Table.Thead>
|
||||
<Table.Tbody>
|
||||
{teamMembers.map((member) => (
|
||||
<Table.Tr key={member.id}>
|
||||
<Table.Td>
|
||||
<Group gap="sm">
|
||||
<IconUser size={20} />
|
||||
<Text>{member.name}</Text>
|
||||
</Group>
|
||||
</Table.Td>
|
||||
<Table.Td>{member.email}</Table.Td>
|
||||
<Table.Td>
|
||||
<Text fw={500}>{member.role}</Text>
|
||||
</Table.Td>
|
||||
<Table.Td>
|
||||
<Text c={member.status === "Aktif" ? "green" : "red"} fw={500}>
|
||||
{member.status}
|
||||
</Text>
|
||||
</Table.Td>
|
||||
<Table.Td>
|
||||
<Group>
|
||||
<ActionIcon variant="subtle" color="blue">
|
||||
<IconEdit size={16} />
|
||||
</ActionIcon>
|
||||
<ActionIcon variant="subtle" color="red">
|
||||
<IconTrash size={16} />
|
||||
</ActionIcon>
|
||||
</Group>
|
||||
</Table.Td>
|
||||
</Table.Tr>
|
||||
))}
|
||||
</Table.Tbody>
|
||||
</Table>
|
||||
|
||||
<Space h="xl" />
|
||||
|
||||
<Alert
|
||||
icon={<IconInfoCircle size={16} />}
|
||||
title="Informasi"
|
||||
color="blue"
|
||||
mb="md"
|
||||
>
|
||||
Administrator memiliki akses penuh ke semua fitur. Peran lainnya
|
||||
memiliki akses terbatas sesuai kebutuhan.
|
||||
</Alert>
|
||||
|
||||
<Group justify="flex-end" mt="xl">
|
||||
<Box>
|
||||
<Stack gap={"xs"}>
|
||||
<Title order={2}>
|
||||
Manajemen Tim
|
||||
</Title>
|
||||
<Button bg={"#1E3A5F"} radius={"md"} c={"white"} fullWidth >Undangan Anggota Baru</Button>
|
||||
<Button bg={"#1E3A5F"} radius={"md"} c={"white"} fullWidth>Kelola Role & Permission</Button>
|
||||
<Group justify="space-between">
|
||||
<Text fw={"bold"} fz={"sm"}>Daftar Anggota Teraktif</Text>
|
||||
<Text fw={"bold"} fz={"sm"}>12 Anggota</Text>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Box>
|
||||
<Box>
|
||||
<Stack gap={"xs"}>
|
||||
<Title order={2}>
|
||||
Hak Akses
|
||||
</Title>
|
||||
<Group justify="space-between">
|
||||
<Text fw={"bold"} fz={"sm"}>Administrator</Text>
|
||||
<Text fw={"bold"} fz={"sm"}>2 Orang</Text>
|
||||
</Group>
|
||||
<Group justify="space-between">
|
||||
<Text fw={"bold"} fz={"sm"}>Editor</Text>
|
||||
<Text fw={"bold"} fz={"sm"}>5 Orang</Text>
|
||||
</Group>
|
||||
<Group justify="space-between">
|
||||
<Text fw={"bold"} fz={"sm"}>Viewer</Text>
|
||||
<Text fw={"bold"} fz={"sm"}>5 Orang</Text>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Box>
|
||||
<Box>
|
||||
<Stack gap={"xs"}>
|
||||
<Title order={2}>
|
||||
Kolaborasi
|
||||
</Title>
|
||||
<Group mb="md" justify="space-between">
|
||||
<Text fw={"bold"} fz={"sm"}>Izin Export Data</Text>
|
||||
<Switch defaultChecked />
|
||||
</Group>
|
||||
<Group mb="md" justify="space-between">
|
||||
<Text fw={"bold"} fz={"sm"}>Require Approval Untuk Perubahan</Text>
|
||||
<Switch defaultChecked />
|
||||
</Group>
|
||||
</Stack>
|
||||
</Box>
|
||||
<Group justify="flex-start" mt="xl">
|
||||
<Button variant="outline">Batal</Button>
|
||||
<Button>Simpan Perubahan</Button>
|
||||
</Group>
|
||||
</Card>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -1,89 +1,65 @@
|
||||
import {
|
||||
Alert,
|
||||
Button,
|
||||
Card,
|
||||
Box,
|
||||
Group,
|
||||
PasswordInput,
|
||||
Space,
|
||||
Stack,
|
||||
Switch,
|
||||
Text,
|
||||
Title,
|
||||
useMantineColorScheme,
|
||||
Title
|
||||
} from "@mantine/core";
|
||||
import { IconInfoCircle, IconLock } from "@tabler/icons-react";
|
||||
|
||||
const KeamananSettings = () => {
|
||||
const { colorScheme } = useMantineColorScheme();
|
||||
const dark = colorScheme === "dark";
|
||||
return (
|
||||
<Card
|
||||
withBorder
|
||||
radius="md"
|
||||
p="xl"
|
||||
bg={dark ? "#141D34" : "white"}
|
||||
style={{ borderColor: dark ? "#141D34" : "white" }}
|
||||
<Stack
|
||||
pr={"50%"}
|
||||
gap={"xl"}
|
||||
>
|
||||
<Title order={2} mb="lg">
|
||||
Pengaturan Keamanan
|
||||
</Title>
|
||||
<Text color="dimmed" mb="xl">
|
||||
Kelola keamanan akun Anda
|
||||
</Text>
|
||||
|
||||
<Space h="lg" />
|
||||
|
||||
<PasswordInput
|
||||
label="Kata Sandi Saat Ini"
|
||||
placeholder="Masukkan kata sandi saat ini"
|
||||
mb="md"
|
||||
/>
|
||||
|
||||
<PasswordInput
|
||||
label="Kata Sandi Baru"
|
||||
placeholder="Masukkan kata sandi baru"
|
||||
mb="md"
|
||||
/>
|
||||
|
||||
<PasswordInput
|
||||
label="Konfirmasi Kata Sandi Baru"
|
||||
placeholder="Konfirmasi kata sandi baru"
|
||||
mb="md"
|
||||
/>
|
||||
|
||||
<Space h="md" />
|
||||
|
||||
<Group mb="md">
|
||||
<Switch label="Verifikasi Dua Langkah" />
|
||||
<Switch label="Login Otentikasi Aplikasi" />
|
||||
</Group>
|
||||
|
||||
<Space h="md" />
|
||||
|
||||
<Alert
|
||||
icon={<IconLock size={16} />}
|
||||
title="Keamanan"
|
||||
color="orange"
|
||||
mb="md"
|
||||
>
|
||||
Gunakan kata sandi yang kuat dan unik. Hindari menggunakan kata sandi
|
||||
yang sama di banyak layanan.
|
||||
</Alert>
|
||||
|
||||
<Alert
|
||||
icon={<IconInfoCircle size={16} />}
|
||||
title="Informasi"
|
||||
color="blue"
|
||||
mb="md"
|
||||
>
|
||||
Setelah mengganti kata sandi, Anda akan diminta logout dari semua
|
||||
perangkat.
|
||||
</Alert>
|
||||
|
||||
<Group justify="flex-end" mt="xl">
|
||||
<Box>
|
||||
<Stack gap={"xs"}>
|
||||
<Title order={2}>
|
||||
Autentikasi
|
||||
</Title>
|
||||
<Group mb="md" justify="space-between">
|
||||
<Text fw={"bold"} fz={"sm"}>Two-Factor Authentication</Text>
|
||||
<Switch defaultChecked />
|
||||
</Group>
|
||||
<Group mb="md" justify="space-between">
|
||||
<Text fw={"bold"} fz={"sm"}>Biometrik Login</Text>
|
||||
<Switch defaultChecked />
|
||||
</Group>
|
||||
<Group mb="md" justify="space-between">
|
||||
<Text fw={"bold"} fz={"sm"}>IP Whitelist</Text>
|
||||
<Switch defaultChecked />
|
||||
</Group>
|
||||
</Stack>
|
||||
</Box>
|
||||
<Box>
|
||||
<Stack gap={"xs"}>
|
||||
<Title order={2}>
|
||||
Password
|
||||
</Title>
|
||||
<Button bg={"#1E3A5F"} radius={"md"} c={"white"} fullWidth >Ubah Password</Button>
|
||||
<Button bg={"#1E3A5F"} radius={"md"} c={"white"} fullWidth>Riwayat Login</Button>
|
||||
<Button bg={"#1E3A5F"} radius={"md"} c={"white"} fullWidth>Perangkat Terdaftar</Button>
|
||||
</Stack>
|
||||
</Box>
|
||||
<Box>
|
||||
<Stack gap={"xs"}>
|
||||
<Title order={2}>
|
||||
Audit & Log
|
||||
</Title>
|
||||
<Group mb="md" justify="space-between">
|
||||
<Text fw={"bold"} fz={"sm"}>Log Aktivitas</Text>
|
||||
<Switch defaultChecked />
|
||||
</Group>
|
||||
<Button bg={"#1E3A5F"} radius={"md"} c={"white"} fullWidth>Download Log</Button>
|
||||
</Stack>
|
||||
</Box>
|
||||
<Group justify="flex-start" mt="xl">
|
||||
<Button variant="outline">Batal</Button>
|
||||
<Button>Perbarui Kata Sandi</Button>
|
||||
<Button>Simpan Perubahan</Button>
|
||||
</Group>
|
||||
</Card>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -1,10 +1,14 @@
|
||||
import {
|
||||
Alert,
|
||||
Box,
|
||||
Button,
|
||||
Card,
|
||||
Checkbox,
|
||||
Grid,
|
||||
GridCol,
|
||||
Group,
|
||||
Space,
|
||||
Stack,
|
||||
Switch,
|
||||
Text,
|
||||
Title,
|
||||
@@ -16,70 +20,82 @@ const NotifikasiSettings = () => {
|
||||
const { colorScheme } = useMantineColorScheme();
|
||||
const dark = colorScheme === "dark";
|
||||
return (
|
||||
<Card
|
||||
withBorder
|
||||
radius="md"
|
||||
p="xl"
|
||||
bg={dark ? "#141D34" : "white"}
|
||||
style={{ borderColor: dark ? "#141D34" : "white" }}
|
||||
<Stack
|
||||
pr={"20%"}
|
||||
gap={"xs"}
|
||||
>
|
||||
<Title order={2} mb="lg">
|
||||
Pengaturan Notifikasi
|
||||
</Title>
|
||||
<Text color="dimmed" mb="xl">
|
||||
Kelola preferensi notifikasi Anda
|
||||
</Text>
|
||||
|
||||
<Space h="lg" />
|
||||
|
||||
<Checkbox.Group defaultValue={["email", "push"]} mb="md">
|
||||
<Title order={4} mb="sm">
|
||||
Metode Notifikasi
|
||||
</Title>
|
||||
<Group>
|
||||
<Checkbox value="email" label="Email" />
|
||||
<Checkbox value="push" label="Notifikasi Push" />
|
||||
<Checkbox value="sms" label="SMS" />
|
||||
</Group>
|
||||
</Checkbox.Group>
|
||||
|
||||
<Space h="md" />
|
||||
|
||||
<Group mb="md">
|
||||
<Switch label="Notifikasi Email" defaultChecked />
|
||||
<Switch label="Notifikasi Push" defaultChecked />
|
||||
</Group>
|
||||
|
||||
<Space h="md" />
|
||||
|
||||
<Title order={4} mb="sm">
|
||||
Jenis Notifikasi
|
||||
</Title>
|
||||
<Group align="start">
|
||||
<Switch label="Pengaduan Baru" defaultChecked />
|
||||
<Switch label="Update Status Pengaduan" defaultChecked />
|
||||
<Switch label="Laporan Mingguan" />
|
||||
<Switch label="Pemberitahuan Keamanan" defaultChecked />
|
||||
<Switch label="Aktivitas Akun" defaultChecked />
|
||||
</Group>
|
||||
|
||||
<Space h="md" />
|
||||
|
||||
<Alert
|
||||
icon={<IconInfoCircle size={16} />}
|
||||
title="Tip"
|
||||
color="blue"
|
||||
mb="md"
|
||||
>
|
||||
Anda dapat menyesuaikan frekuensi notifikasi mingguan sesuai kebutuhan
|
||||
Anda.
|
||||
</Alert>
|
||||
|
||||
<Group justify="flex-end" mt="xl">
|
||||
<Grid gutter={{ base: 5, xs: 'md', md: 'xl', xl: 50 }}>
|
||||
<GridCol span={6}>
|
||||
<Stack gap={"xs"}>
|
||||
<Title order={3} mb="sm">
|
||||
Metode Notifikasi
|
||||
</Title>
|
||||
<Group mb="md" justify="space-between">
|
||||
<Text fw={"bold"} fz={"sm"}>Laporan Harian</Text>
|
||||
<Switch defaultChecked />
|
||||
</Group>
|
||||
<Group mb="md" justify="space-between">
|
||||
<Text fw={"bold"} fz={"sm"}>Alert Sistem</Text>
|
||||
<Switch defaultChecked />
|
||||
</Group>
|
||||
<Group mb="md" justify="space-between">
|
||||
<Text fw={"bold"} fz={"sm"}>Update Keamanan</Text>
|
||||
<Switch defaultChecked />
|
||||
</Group>
|
||||
<Group mb="md" justify="space-between">
|
||||
<Text fw={"bold"} fz={"sm"}>Newsletter Bulanan</Text>
|
||||
<Switch defaultChecked />
|
||||
</Group>
|
||||
</Stack>
|
||||
</GridCol>
|
||||
<GridCol span={6}>
|
||||
<Stack gap={"xs"}>
|
||||
<Title order={3} mb="sm">
|
||||
Preferensi Alert
|
||||
</Title>
|
||||
<Group mb="md" justify="space-between">
|
||||
<Text fw={"bold"} fz={"sm"}>Treshold Memori</Text>
|
||||
<Switch defaultChecked />
|
||||
</Group>
|
||||
<Group mb="md" justify="space-between">
|
||||
<Text fw={"bold"} fz={"sm"}>Treshold CPU</Text>
|
||||
<Switch defaultChecked />
|
||||
</Group>
|
||||
<Group mb="md" justify="space-between">
|
||||
<Text fw={"bold"} fz={"sm"}>Treshold Disk</Text>
|
||||
<Switch defaultChecked />
|
||||
</Group>
|
||||
</Stack>
|
||||
</GridCol>
|
||||
<GridCol span={6}>
|
||||
<Stack gap={"xs"}>
|
||||
<Title order={3} mb="sm">
|
||||
Notifikasi Push
|
||||
</Title>
|
||||
<Group mb="md" justify="space-between">
|
||||
<Text fw={"bold"} fz={"sm"}>Alert Kritis</Text>
|
||||
<Switch defaultChecked />
|
||||
</Group>
|
||||
<Group mb="md" justify="space-between">
|
||||
<Text fw={"bold"} fz={"sm"}>Aktivitas Tim</Text>
|
||||
<Switch defaultChecked />
|
||||
</Group>
|
||||
<Group mb="md" justify="space-between">
|
||||
<Text fw={"bold"} fz={"sm"}>Komentar & Mention</Text>
|
||||
<Switch defaultChecked />
|
||||
</Group>
|
||||
<Group mb="md" justify="space-between">
|
||||
<Text fw={"bold"} fz={"sm"}>Bunyi Notifikasi</Text>
|
||||
<Switch defaultChecked />
|
||||
</Group>
|
||||
</Stack>
|
||||
</GridCol>
|
||||
</Grid>
|
||||
<Group justify="flex-start" mt="xl">
|
||||
<Button variant="outline">Batal</Button>
|
||||
<Button>Simpan Preferensi</Button>
|
||||
</Group>
|
||||
</Card>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -1,44 +1,22 @@
|
||||
import {
|
||||
Alert,
|
||||
Box,
|
||||
Button,
|
||||
Card,
|
||||
Group,
|
||||
Select,
|
||||
Space,
|
||||
Switch,
|
||||
Text,
|
||||
TextInput,
|
||||
Title,
|
||||
useMantineColorScheme,
|
||||
} from "@mantine/core";
|
||||
import { IconInfoCircle } from "@tabler/icons-react";
|
||||
import { DateInput } from "@mantine/dates";
|
||||
|
||||
const UmumSettings = () => {
|
||||
const { colorScheme } = useMantineColorScheme();
|
||||
const dark = colorScheme === "dark";
|
||||
return (
|
||||
<Card
|
||||
withBorder
|
||||
radius="md"
|
||||
p="xl"
|
||||
bg={dark ? "#141D34" : "white"}
|
||||
style={{ borderColor: dark ? "#141D34" : "white" }}
|
||||
<Box
|
||||
pr={"50%"}
|
||||
>
|
||||
<Title order={2} mb="lg">
|
||||
Pengaturan Umum
|
||||
Preferensi Tampilan
|
||||
</Title>
|
||||
<Text color="dimmed" mb="xl">
|
||||
Kelola pengaturan umum aplikasi Anda
|
||||
</Text>
|
||||
|
||||
<Space h="lg" />
|
||||
|
||||
<TextInput
|
||||
label="Nama Aplikasi"
|
||||
placeholder="Masukkan nama aplikasi"
|
||||
defaultValue="Dashboard Desa Plus"
|
||||
mb="md"
|
||||
/>
|
||||
|
||||
<Select
|
||||
label="Bahasa Aplikasi"
|
||||
@@ -61,25 +39,48 @@ const UmumSettings = () => {
|
||||
mb="md"
|
||||
/>
|
||||
|
||||
<Group mb="md">
|
||||
<Switch label="Notifikasi Email" defaultChecked />
|
||||
<DateInput
|
||||
label="Format Tanggal"
|
||||
mb={"xl"}
|
||||
/>
|
||||
|
||||
<Title order={2} mb="lg">
|
||||
Dashboard
|
||||
</Title>
|
||||
|
||||
<Group mb="md" justify="space-between">
|
||||
<Text fw={"bold"} fz={"sm"}>Refresh Otomatis</Text>
|
||||
<Switch defaultChecked />
|
||||
</Group>
|
||||
|
||||
<Alert
|
||||
icon={<IconInfoCircle size={16} />}
|
||||
title="Informasi"
|
||||
color="blue"
|
||||
mb="md"
|
||||
>
|
||||
Beberapa pengaturan mungkin memerlukan restart aplikasi untuk diterapkan
|
||||
sepenuhnya.
|
||||
</Alert>
|
||||
<Group mb="md" justify="space-between">
|
||||
<Text fw={"bold"} fz={"sm"}>Interval Refresh</Text>
|
||||
<Select
|
||||
data={[
|
||||
{ value: "1", label: "30d" },
|
||||
{ value: "2", label: "60d" },
|
||||
{ value: "3", label: "90d" },
|
||||
]}
|
||||
defaultValue="1"
|
||||
w={90}
|
||||
/>
|
||||
</Group>
|
||||
|
||||
<Group mb="md" justify="space-between">
|
||||
<Text fw={"bold"} fz={"sm"}>Tampilkan Grid</Text>
|
||||
<Switch defaultChecked />
|
||||
</Group>
|
||||
|
||||
<Group mb="md" justify="space-between">
|
||||
<Text fw={"bold"} fz={"sm"}>Animasi Transisi</Text>
|
||||
<Switch defaultChecked />
|
||||
</Group>
|
||||
|
||||
<Group justify="flex-end" mt="xl">
|
||||
<Button variant="outline">Batal</Button>
|
||||
<Button>Simpan Perubahan</Button>
|
||||
</Group>
|
||||
</Card>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -61,10 +61,7 @@ export function Sidebar({ className }: SidebarProps) {
|
||||
return (
|
||||
<Box className={className}>
|
||||
{/* Logo */}
|
||||
<Image
|
||||
src={dark ? "/white.png" : "/light-mode.png"}
|
||||
alt="Logo"
|
||||
/>
|
||||
<Image src={dark ? "/white.png" : "/light-mode.png"} alt="Logo" />
|
||||
|
||||
{/* Search */}
|
||||
<Box p="md">
|
||||
|
||||
@@ -1,463 +1,45 @@
|
||||
import {
|
||||
Badge,
|
||||
Card,
|
||||
Grid,
|
||||
GridCol,
|
||||
Group,
|
||||
List,
|
||||
Progress,
|
||||
Stack,
|
||||
Text,
|
||||
ThemeIcon,
|
||||
Title,
|
||||
useMantineColorScheme,
|
||||
} from "@mantine/core";
|
||||
import {
|
||||
IconAward,
|
||||
IconBabyCarriage,
|
||||
IconBook,
|
||||
IconCalendarEvent,
|
||||
IconHeartbeat,
|
||||
IconMedicalCross,
|
||||
IconSchool,
|
||||
IconStethoscope,
|
||||
} from "@tabler/icons-react";
|
||||
import { useState } from "react";
|
||||
import { Grid, GridCol, Stack } from "@mantine/core";
|
||||
import { SummaryCards } from "./sosial/summary-cards";
|
||||
import { HealthStats } from "./sosial/health-stats";
|
||||
import { PosyanduSchedule } from "./sosial/posyandu-schedule";
|
||||
import { Pendidikan } from "./sosial/pendidikan";
|
||||
import { Beasiswa } from "./sosial/beasiswa";
|
||||
import { EventCalendar } from "./sosial/event-calendar";
|
||||
|
||||
const SosialPage = () => {
|
||||
const { colorScheme } = useMantineColorScheme();
|
||||
const dark = colorScheme === "dark";
|
||||
|
||||
// Sample data for health statistics
|
||||
const healthStats = {
|
||||
ibuHamil: 87,
|
||||
balita: 342,
|
||||
alertStunting: 12,
|
||||
posyanduAktif: 8,
|
||||
};
|
||||
|
||||
// Sample data for health progress
|
||||
const healthProgress = [
|
||||
{ label: "Imunisasi Lengkap", value: 92, color: "green" },
|
||||
{ label: "Pemeriksaan Rutin", value: 88, color: "blue" },
|
||||
{ label: "Gizi Baik", value: 86, color: "teal" },
|
||||
{ label: "Target Stunting", value: 14, color: "red" },
|
||||
];
|
||||
|
||||
// Sample data for posyandu schedule
|
||||
const posyanduSchedule = [
|
||||
{
|
||||
nama: "Posyandu Mawar",
|
||||
tanggal: "Senin, 15 Feb 2026",
|
||||
jam: "08:00 - 11:00",
|
||||
},
|
||||
{
|
||||
nama: "Posyandu Melati",
|
||||
tanggal: "Selasa, 16 Feb 2026",
|
||||
jam: "08:00 - 11:00",
|
||||
},
|
||||
{
|
||||
nama: "Posyandu Dahlia",
|
||||
tanggal: "Rabu, 17 Feb 2026",
|
||||
jam: "08:00 - 11:00",
|
||||
},
|
||||
{
|
||||
nama: "Posyandu Anggrek",
|
||||
tanggal: "Kamis, 18 Feb 2026",
|
||||
jam: "08:00 - 11:00",
|
||||
},
|
||||
];
|
||||
|
||||
// Sample data for education stats
|
||||
const educationStats = {
|
||||
siswa: {
|
||||
tk: 125,
|
||||
sd: 480,
|
||||
smp: 210,
|
||||
sma: 150,
|
||||
},
|
||||
sekolah: {
|
||||
jumlah: 8,
|
||||
guru: 42,
|
||||
},
|
||||
};
|
||||
|
||||
// Sample data for scholarships
|
||||
const scholarshipData = {
|
||||
penerima: 45,
|
||||
dana: "Rp 1.200.000.000",
|
||||
tahunAjaran: "2025/2026",
|
||||
};
|
||||
|
||||
// Sample data for cultural events
|
||||
const culturalEvents = [
|
||||
{
|
||||
nama: "Hari Kesaktian Pancasila",
|
||||
tanggal: "1 Oktober 2025",
|
||||
lokasi: "Balai Desa",
|
||||
},
|
||||
{
|
||||
nama: "Festival Budaya Desa",
|
||||
tanggal: "20 Mei 2026",
|
||||
lokasi: "Lapangan Desa",
|
||||
},
|
||||
{
|
||||
nama: "Perayaan HUT Desa",
|
||||
tanggal: "17 Agustus 2026",
|
||||
lokasi: "Balai Desa",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Stack gap="lg">
|
||||
{/* Health Statistics Cards */}
|
||||
{/* Top Summary Cards - 4 Grid */}
|
||||
<SummaryCards />
|
||||
|
||||
{/* Second Row - 2 Column Grid */}
|
||||
<Grid gutter="md">
|
||||
<GridCol span={{ base: 12, sm: 6, md: 3 }}>
|
||||
<Card
|
||||
p="md"
|
||||
radius="md"
|
||||
withBorder
|
||||
bg={dark ? "#141D34" : "white"}
|
||||
style={{ borderColor: dark ? "#141D34" : "white" }}
|
||||
>
|
||||
<Group justify="space-between" align="center">
|
||||
<Stack gap={0}>
|
||||
<Text size="sm" c={dark ? "dark.3" : "dimmed"}>
|
||||
Ibu Hamil Aktif
|
||||
</Text>
|
||||
<Text size="xl" fw={700} c={dark ? "dark.0" : "black"}>
|
||||
{healthStats.ibuHamil}
|
||||
</Text>
|
||||
</Stack>
|
||||
<ThemeIcon
|
||||
variant="light"
|
||||
color="darmasaba-blue"
|
||||
size="xl"
|
||||
radius="xl"
|
||||
>
|
||||
<IconHeartbeat size={24} />
|
||||
</ThemeIcon>
|
||||
</Group>
|
||||
</Card>
|
||||
{/* Left - Statistik Kesehatan */}
|
||||
<GridCol span={{ base: 12, lg: 6 }}>
|
||||
<HealthStats />
|
||||
</GridCol>
|
||||
|
||||
<GridCol span={{ base: 12, sm: 6, md: 3 }}>
|
||||
<Card
|
||||
p="md"
|
||||
radius="md"
|
||||
withBorder
|
||||
bg={dark ? "#141D34" : "white"}
|
||||
style={{ borderColor: dark ? "#141D34" : "white" }}
|
||||
>
|
||||
<Group justify="space-between" align="center">
|
||||
<Stack gap={0}>
|
||||
<Text size="sm" c={dark ? "dark.3" : "dimmed"}>
|
||||
Balita Terdaftar
|
||||
</Text>
|
||||
<Text size="xl" fw={700} c={dark ? "dark.0" : "black"}>
|
||||
{healthStats.balita}
|
||||
</Text>
|
||||
</Stack>
|
||||
<ThemeIcon
|
||||
variant="light"
|
||||
color="darmasaba-success"
|
||||
size="xl"
|
||||
radius="xl"
|
||||
>
|
||||
<IconBabyCarriage size={24} />
|
||||
</ThemeIcon>
|
||||
</Group>
|
||||
</Card>
|
||||
</GridCol>
|
||||
|
||||
<GridCol span={{ base: 12, sm: 6, md: 3 }}>
|
||||
<Card
|
||||
p="md"
|
||||
radius="md"
|
||||
withBorder
|
||||
bg={dark ? "#141D34" : "white"}
|
||||
style={{ borderColor: dark ? "#141D34" : "white" }}
|
||||
>
|
||||
<Group justify="space-between" align="center">
|
||||
<Stack gap={0}>
|
||||
<Text size="sm" c={dark ? "dark.3" : "dimmed"}>
|
||||
Alert Stunting
|
||||
</Text>
|
||||
<Text size="xl" fw={700} c="red">
|
||||
{healthStats.alertStunting}
|
||||
</Text>
|
||||
</Stack>
|
||||
<ThemeIcon variant="light" color="red" size="xl" radius="xl">
|
||||
<IconStethoscope size={24} />
|
||||
</ThemeIcon>
|
||||
</Group>
|
||||
</Card>
|
||||
</GridCol>
|
||||
|
||||
<GridCol span={{ base: 12, sm: 6, md: 3 }}>
|
||||
<Card
|
||||
p="md"
|
||||
radius="md"
|
||||
withBorder
|
||||
bg={dark ? "#141D34" : "white"}
|
||||
style={{ borderColor: dark ? "#141D34" : "white" }}
|
||||
>
|
||||
<Group justify="space-between" align="center">
|
||||
<Stack gap={0}>
|
||||
<Text size="sm" c={dark ? "dark.3" : "dimmed"}>
|
||||
Posyandu Aktif
|
||||
</Text>
|
||||
<Text size="xl" fw={700} c={dark ? "dark.0" : "black"}>
|
||||
{healthStats.posyanduAktif}
|
||||
</Text>
|
||||
</Stack>
|
||||
<ThemeIcon
|
||||
variant="light"
|
||||
color="darmasaba-warning"
|
||||
size="xl"
|
||||
radius="xl"
|
||||
>
|
||||
<IconMedicalCross size={24} />
|
||||
</ThemeIcon>
|
||||
</Group>
|
||||
</Card>
|
||||
{/* Right - Jadwal Posyandu */}
|
||||
<GridCol span={{ base: 12, lg: 6 }}>
|
||||
<PosyanduSchedule />
|
||||
</GridCol>
|
||||
</Grid>
|
||||
|
||||
{/* Health Progress Bars */}
|
||||
<Card
|
||||
p="md"
|
||||
radius="md"
|
||||
withBorder
|
||||
bg={dark ? "#141D34" : "white"}
|
||||
style={{ borderColor: dark ? "#141D34" : "white" }}
|
||||
>
|
||||
<Title order={3} mb="md" c={dark ? "dark.0" : "black"}>
|
||||
Statistik Kesehatan
|
||||
</Title>
|
||||
<Stack gap="md">
|
||||
{healthProgress.map((item, index) => (
|
||||
<div key={index}>
|
||||
<Group justify="space-between" mb={5}>
|
||||
<Text size="sm" fw={500} c={dark ? "dark.0" : "black"}>
|
||||
{item.label}
|
||||
</Text>
|
||||
<Text size="sm" fw={600} c={dark ? "dark.0" : "black"}>
|
||||
{item.value}%
|
||||
</Text>
|
||||
</Group>
|
||||
<Progress
|
||||
value={item.value}
|
||||
size="lg"
|
||||
radius="xl"
|
||||
color={item.color}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</Stack>
|
||||
</Card>
|
||||
|
||||
{/* Third Row - 2 Column Grid */}
|
||||
<Grid gutter="md">
|
||||
{/* Jadwal Posyandu */}
|
||||
{/* Left - Pendidikan */}
|
||||
<GridCol span={{ base: 12, lg: 6 }}>
|
||||
<Card
|
||||
p="md"
|
||||
radius="md"
|
||||
withBorder
|
||||
bg={dark ? "#141D34" : "white"}
|
||||
style={{ borderColor: dark ? "#141D34" : "white" }}
|
||||
>
|
||||
<Title order={3} mb="md" c={dark ? "dark.0" : "black"}>
|
||||
Jadwal Posyandu
|
||||
</Title>
|
||||
<Stack gap="sm">
|
||||
{posyanduSchedule.map((item, index) => (
|
||||
<Card
|
||||
key={index}
|
||||
p="md"
|
||||
radius="md"
|
||||
withBorder
|
||||
bg={dark ? "#263852ff" : "#F1F5F9"}
|
||||
style={{ borderColor: dark ? "#263852ff" : "#F1F5F9" }}
|
||||
h="100%"
|
||||
>
|
||||
<Group justify="space-between">
|
||||
<Stack gap={0}>
|
||||
<Text fw={500} c={dark ? "dark.0" : "black"}>
|
||||
{item.nama}
|
||||
</Text>
|
||||
<Text size="sm" c={dark ? "dark.0" : "black"}>
|
||||
{item.tanggal}
|
||||
</Text>
|
||||
</Stack>
|
||||
<Badge variant="light" color="darmasaba-blue">
|
||||
{item.jam}
|
||||
</Badge>
|
||||
</Group>
|
||||
</Card>
|
||||
))}
|
||||
</Stack>
|
||||
</Card>
|
||||
<Pendidikan />
|
||||
</GridCol>
|
||||
|
||||
{/* Pendidikan */}
|
||||
{/* Right - Beasiswa Desa */}
|
||||
<GridCol span={{ base: 12, lg: 6 }}>
|
||||
<Card
|
||||
p="md"
|
||||
radius="md"
|
||||
withBorder
|
||||
bg={dark ? "#141D34" : "white"}
|
||||
style={{ borderColor: dark ? "#141D34" : "white" }}
|
||||
h="100%"
|
||||
>
|
||||
<Title order={3} mb="md" c={dark ? "dark.0" : "black"}>
|
||||
Pendidikan
|
||||
</Title>
|
||||
<Stack gap="md">
|
||||
<Group justify="space-between">
|
||||
<Text fw={500} c={dark ? "dark.0" : "black"}>
|
||||
TK / PAUD
|
||||
</Text>
|
||||
<Text fw={700} c={dark ? "dark.0" : "black"}>
|
||||
{educationStats.siswa.tk}
|
||||
</Text>
|
||||
</Group>
|
||||
<Group justify="space-between">
|
||||
<Text fw={500} c={dark ? "dark.0" : "black"}>
|
||||
SD
|
||||
</Text>
|
||||
<Text fw={700} c={dark ? "dark.0" : "black"}>
|
||||
{educationStats.siswa.sd}
|
||||
</Text>
|
||||
</Group>
|
||||
<Group justify="space-between">
|
||||
<Text fw={500} c={dark ? "dark.0" : "black"}>
|
||||
SMP
|
||||
</Text>
|
||||
<Text fw={700} c={dark ? "dark.0" : "black"}>
|
||||
{educationStats.siswa.smp}
|
||||
</Text>
|
||||
</Group>
|
||||
<Group justify="space-between">
|
||||
<Text fw={500} c={dark ? "dark.0" : "black"}>
|
||||
SMA
|
||||
</Text>
|
||||
<Text fw={700} c={dark ? "dark.0" : "black"}>
|
||||
{educationStats.siswa.sma}
|
||||
</Text>
|
||||
</Group>
|
||||
|
||||
<Card
|
||||
withBorder
|
||||
radius="md"
|
||||
p="md"
|
||||
mt="md"
|
||||
bg={dark ? "#263852ff" : "#F1F5F9"}
|
||||
style={{ borderColor: dark ? "#263852ff" : "#F1F5F9" }}
|
||||
>
|
||||
<Group justify="space-between">
|
||||
<Text fw={500} c={dark ? "dark.0" : "black"}>
|
||||
Jumlah Lembaga Pendidikan
|
||||
</Text>
|
||||
<Text fw={700} c={dark ? "dark.0" : "black"}>
|
||||
{educationStats.sekolah.jumlah}
|
||||
</Text>
|
||||
</Group>
|
||||
<Group justify="space-between" mt="sm">
|
||||
<Text fw={500} c={dark ? "dark.0" : "black"}>
|
||||
Jumlah Tenaga Pengajar
|
||||
</Text>
|
||||
<Text fw={700} c={dark ? "dark.0" : "black"}>
|
||||
{educationStats.sekolah.guru}
|
||||
</Text>
|
||||
</Group>
|
||||
</Card>
|
||||
</Stack>
|
||||
</Card>
|
||||
<Beasiswa />
|
||||
</GridCol>
|
||||
</Grid>
|
||||
|
||||
<Grid gutter="md">
|
||||
{/* Beasiswa Desa */}
|
||||
<GridCol span={{ base: 12, lg: 6 }}>
|
||||
<Card
|
||||
p="md"
|
||||
radius="md"
|
||||
withBorder
|
||||
bg={dark ? "#141D34" : "white"}
|
||||
style={{ borderColor: dark ? "#141D34" : "white" }}
|
||||
h="100%"
|
||||
>
|
||||
<Group justify="space-between" align="center">
|
||||
<Stack gap={0}>
|
||||
<Text size="sm" c={dark ? "dark.3" : "dimmed"}>
|
||||
Beasiswa Desa
|
||||
</Text>
|
||||
<Text size="xl" fw={700} c={dark ? "dark.0" : "black"}>
|
||||
Penerima: {scholarshipData.penerima}
|
||||
</Text>
|
||||
</Stack>
|
||||
<ThemeIcon
|
||||
variant="light"
|
||||
color="darmasaba-success"
|
||||
size="xl"
|
||||
radius="xl"
|
||||
>
|
||||
<IconAward size={24} />
|
||||
</ThemeIcon>
|
||||
</Group>
|
||||
<Text mt="md" c={dark ? "dark.0" : "black"}>
|
||||
Dana Tersalurkan:{" "}
|
||||
<Text span fw={700}>
|
||||
{scholarshipData.dana}
|
||||
</Text>
|
||||
</Text>
|
||||
<Text mt="sm" c={dark ? "dark.3" : "dimmed"}>
|
||||
Tahun Ajaran: {scholarshipData.tahunAjaran}
|
||||
</Text>
|
||||
</Card>
|
||||
</GridCol>
|
||||
|
||||
{/* Kalender Event Budaya */}
|
||||
<GridCol span={{ base: 12, lg: 6 }}>
|
||||
<Card
|
||||
p="md"
|
||||
radius="md"
|
||||
withBorder
|
||||
bg={dark ? "#141D34" : "white"}
|
||||
style={{ borderColor: dark ? "#141D34" : "white" }}
|
||||
h="100%"
|
||||
>
|
||||
<Title order={3} mb="md" c={dark ? "dark.0" : "black"}>
|
||||
Kalender Event Budaya
|
||||
</Title>
|
||||
<List spacing="sm">
|
||||
{culturalEvents.map((event, index) => (
|
||||
<List.Item
|
||||
key={index}
|
||||
icon={
|
||||
<ThemeIcon color="darmasaba-blue" size={24} radius="xl">
|
||||
<IconCalendarEvent size={12} />
|
||||
</ThemeIcon>
|
||||
}
|
||||
>
|
||||
<Group justify="space-between">
|
||||
<Text fw={500} c={dark ? "dark.0" : "black"}>
|
||||
{event.nama}
|
||||
</Text>
|
||||
<Text size="sm" c={dark ? "dark.3" : "dimmed"}>
|
||||
{event.lokasi}
|
||||
</Text>
|
||||
</Group>
|
||||
<Text size="sm" c={dark ? "dark.3" : "dimmed"}>
|
||||
{event.tanggal}
|
||||
</Text>
|
||||
</List.Item>
|
||||
))}
|
||||
</List>
|
||||
</Card>
|
||||
</GridCol>
|
||||
</Grid>
|
||||
{/* Bottom Section - Event Budaya */}
|
||||
<EventCalendar />
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
69
src/components/sosial/beasiswa.tsx
Normal file
69
src/components/sosial/beasiswa.tsx
Normal file
@@ -0,0 +1,69 @@
|
||||
import { Card, Group, Stack, Text, ThemeIcon, Title } from "@mantine/core";
|
||||
import { useMantineColorScheme } from "@mantine/core";
|
||||
import { IconAward } from "@tabler/icons-react";
|
||||
|
||||
interface ScholarshipData {
|
||||
penerima: number;
|
||||
dana: string;
|
||||
tahunAjaran: string;
|
||||
}
|
||||
|
||||
interface BeasiswaProps {
|
||||
data?: ScholarshipData;
|
||||
}
|
||||
|
||||
export const Beasiswa = ({ data }: BeasiswaProps) => {
|
||||
const { colorScheme } = useMantineColorScheme();
|
||||
const dark = colorScheme === "dark";
|
||||
|
||||
const defaultData: ScholarshipData = {
|
||||
penerima: 45,
|
||||
dana: "Rp 1.200.000.000",
|
||||
tahunAjaran: "2025/2026",
|
||||
};
|
||||
|
||||
const displayData = data || defaultData;
|
||||
|
||||
return (
|
||||
<Card
|
||||
p="md"
|
||||
radius="xl"
|
||||
withBorder
|
||||
shadow="sm"
|
||||
bg={dark ? "#141D34" : "white"}
|
||||
style={{ borderColor: dark ? "#141D34" : "#e5e7eb" }}
|
||||
h={"100%"}
|
||||
>
|
||||
<Group justify="space-between" align="center">
|
||||
<Stack gap={2}>
|
||||
<Text size="sm" c={dark ? "dark.3" : "dimmed"} fw={500}>
|
||||
Beasiswa Desa
|
||||
</Text>
|
||||
<Text size="xl" fw={700} c={dark ? "dark.0" : "#1e3a5f"}>
|
||||
Penerima: {displayData.penerima}
|
||||
</Text>
|
||||
</Stack>
|
||||
<ThemeIcon
|
||||
variant="light"
|
||||
color="darmasaba-success"
|
||||
size="xl"
|
||||
radius="xl"
|
||||
>
|
||||
<IconAward size={24} />
|
||||
</ThemeIcon>
|
||||
</Group>
|
||||
<Stack gap="xs" mt="md">
|
||||
<Group justify="space-between">
|
||||
<Text c={dark ? "dark.3" : "dimmed"}>Dana Tersalurkan:</Text>
|
||||
<Text fw={700} c={dark ? "dark.0" : "#1e3a5f"}>
|
||||
{displayData.dana}
|
||||
</Text>
|
||||
</Group>
|
||||
<Group justify="space-between">
|
||||
<Text c={dark ? "dark.3" : "dimmed"}>Tahun Ajaran:</Text>
|
||||
<Text c={dark ? "dark.0" : "#1e3a5f"}>{displayData.tahunAjaran}</Text>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
94
src/components/sosial/event-calendar.tsx
Normal file
94
src/components/sosial/event-calendar.tsx
Normal file
@@ -0,0 +1,94 @@
|
||||
import { Card, Group, Stack, Text, Title, ThemeIcon } from "@mantine/core";
|
||||
import { useMantineColorScheme } from "@mantine/core";
|
||||
import { IconCalendarEvent } from "@tabler/icons-react";
|
||||
|
||||
interface EventItem {
|
||||
id: string;
|
||||
nama: string;
|
||||
tanggal: string;
|
||||
lokasi: string;
|
||||
}
|
||||
|
||||
interface EventCalendarProps {
|
||||
data?: EventItem[];
|
||||
}
|
||||
|
||||
export const EventCalendar = ({ data }: EventCalendarProps) => {
|
||||
const { colorScheme } = useMantineColorScheme();
|
||||
const dark = colorScheme === "dark";
|
||||
|
||||
const defaultData: EventItem[] = [
|
||||
{
|
||||
id: "1",
|
||||
nama: "Hari Kesaktian Pancasila",
|
||||
tanggal: "1 Oktober 2025",
|
||||
lokasi: "Balai Desa",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
nama: "Festival Budaya Desa",
|
||||
tanggal: "20 Mei 2026",
|
||||
lokasi: "Lapangan Desa",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
nama: "Perayaan HUT Desa",
|
||||
tanggal: "17 Agustus 2026",
|
||||
lokasi: "Balai Desa",
|
||||
},
|
||||
];
|
||||
|
||||
const displayData = data || defaultData;
|
||||
|
||||
return (
|
||||
<Card
|
||||
p="md"
|
||||
radius="xl"
|
||||
withBorder
|
||||
shadow="sm"
|
||||
bg={dark ? "#141D34" : "white"}
|
||||
style={{ borderColor: dark ? "#141D34" : "#e5e7eb" }}
|
||||
>
|
||||
<Title order={3} mb="md" c={dark ? "dark.0" : "#1e3a5f"}>
|
||||
Kalender Event Budaya
|
||||
</Title>
|
||||
<Stack gap="sm">
|
||||
{displayData.map((event) => (
|
||||
<Card
|
||||
key={event.id}
|
||||
p="md"
|
||||
radius="md"
|
||||
withBorder
|
||||
bg={dark ? "#263852ff" : "#F1F5F9"}
|
||||
style={{ borderColor: dark ? "#263852ff" : "#F1F5F9" }}
|
||||
hoverable
|
||||
>
|
||||
<Group justify="space-between" mb="xs">
|
||||
<Group gap="sm" align="center">
|
||||
<ThemeIcon
|
||||
color="darmasaba-blue"
|
||||
size="md"
|
||||
radius="xl"
|
||||
variant="light"
|
||||
>
|
||||
<IconCalendarEvent size={16} />
|
||||
</ThemeIcon>
|
||||
<Text fw={600} c={dark ? "dark.0" : "#1e3a5f"}>
|
||||
{event.nama}
|
||||
</Text>
|
||||
</Group>
|
||||
<Text size="sm" c={dark ? "dark.3" : "dimmed"} fw={500}>
|
||||
{event.lokasi}
|
||||
</Text>
|
||||
</Group>
|
||||
<Group pl={36}>
|
||||
<Text size="sm" c={dark ? "dark.4" : "gray.6"}>
|
||||
{event.tanggal}
|
||||
</Text>
|
||||
</Group>
|
||||
</Card>
|
||||
))}
|
||||
</Stack>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
66
src/components/sosial/health-stats.tsx
Normal file
66
src/components/sosial/health-stats.tsx
Normal file
@@ -0,0 +1,66 @@
|
||||
import { Card, Group, Progress, Stack, Text, Title } from "@mantine/core";
|
||||
import { useMantineColorScheme } from "@mantine/core";
|
||||
|
||||
interface HealthProgressItem {
|
||||
label: string;
|
||||
value: number;
|
||||
color: string;
|
||||
}
|
||||
|
||||
interface HealthStatsProps {
|
||||
data?: HealthProgressItem[];
|
||||
}
|
||||
|
||||
export const HealthStats = ({ data }: HealthStatsProps) => {
|
||||
const { colorScheme } = useMantineColorScheme();
|
||||
const dark = colorScheme === "dark";
|
||||
|
||||
const defaultData: HealthProgressItem[] = [
|
||||
{ label: "Imunisasi Lengkap", value: 92, color: "green" },
|
||||
{ label: "Pemeriksaan Rutin", value: 88, color: "blue" },
|
||||
{ label: "Gizi Baik", value: 86, color: "teal" },
|
||||
{ label: "Target Stunting", value: 14, color: "red" },
|
||||
];
|
||||
|
||||
const displayData = data || defaultData;
|
||||
|
||||
return (
|
||||
<Card
|
||||
p="md"
|
||||
radius="xl"
|
||||
withBorder
|
||||
shadow="sm"
|
||||
bg={dark ? "#141D34" : "white"}
|
||||
style={{ borderColor: dark ? "#141D34" : "#e5e7eb" }}
|
||||
h={'100%'}
|
||||
>
|
||||
<Title order={3} mb="md" c={dark ? "dark.0" : "#1e3a5f"}>
|
||||
Statistik Kesehatan
|
||||
</Title>
|
||||
<Stack gap="md">
|
||||
{displayData.map((item, index) => (
|
||||
<div key={index}>
|
||||
<Group justify="space-between" mb={5}>
|
||||
<Text size="sm" fw={500} c={dark ? "dark.0" : "#1e3a5f"}>
|
||||
{item.label}
|
||||
</Text>
|
||||
<Text
|
||||
size="sm"
|
||||
fw={600}
|
||||
c={item.color === "red" ? "red" : dark ? "dark.0" : "#1e3a5f"}
|
||||
>
|
||||
{item.value}%
|
||||
</Text>
|
||||
</Group>
|
||||
<Progress
|
||||
value={item.value}
|
||||
size="lg"
|
||||
radius="xl"
|
||||
color={item.color}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</Stack>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
114
src/components/sosial/pendidikan.tsx
Normal file
114
src/components/sosial/pendidikan.tsx
Normal file
@@ -0,0 +1,114 @@
|
||||
import { Card, Group, Stack, Text, Title } from "@mantine/core";
|
||||
import { useMantineColorScheme } from "@mantine/core";
|
||||
|
||||
interface EducationData {
|
||||
siswa: {
|
||||
tk: number;
|
||||
sd: number;
|
||||
smp: number;
|
||||
sma: number;
|
||||
};
|
||||
sekolah: {
|
||||
jumlah: number;
|
||||
guru: number;
|
||||
};
|
||||
}
|
||||
|
||||
interface PendidikanProps {
|
||||
data?: EducationData;
|
||||
}
|
||||
|
||||
export const Pendidikan = ({ data }: PendidikanProps) => {
|
||||
const { colorScheme } = useMantineColorScheme();
|
||||
const dark = colorScheme === "dark";
|
||||
|
||||
const defaultData: EducationData = {
|
||||
siswa: {
|
||||
tk: 125,
|
||||
sd: 480,
|
||||
smp: 210,
|
||||
sma: 150,
|
||||
},
|
||||
sekolah: {
|
||||
jumlah: 8,
|
||||
guru: 42,
|
||||
},
|
||||
};
|
||||
|
||||
const displayData = data || defaultData;
|
||||
|
||||
return (
|
||||
<Card
|
||||
p="md"
|
||||
radius="xl"
|
||||
withBorder
|
||||
shadow="sm"
|
||||
bg={dark ? "#141D34" : "white"}
|
||||
style={{ borderColor: dark ? "#141D34" : "#e5e7eb" }}
|
||||
>
|
||||
<Title order={3} mb="md" c={dark ? "dark.0" : "#1e3a5f"}>
|
||||
Pendidikan
|
||||
</Title>
|
||||
<Stack gap="md">
|
||||
<Group justify="space-between">
|
||||
<Text fw={500} c={dark ? "dark.0" : "#1e3a5f"}>
|
||||
TK / PAUD
|
||||
</Text>
|
||||
<Text fw={700} c={dark ? "dark.0" : "#1e3a5f"}>
|
||||
{displayData.siswa.tk}
|
||||
</Text>
|
||||
</Group>
|
||||
<Group justify="space-between">
|
||||
<Text fw={500} c={dark ? "dark.0" : "#1e3a5f"}>
|
||||
SD
|
||||
</Text>
|
||||
<Text fw={700} c={dark ? "dark.0" : "#1e3a5f"}>
|
||||
{displayData.siswa.sd}
|
||||
</Text>
|
||||
</Group>
|
||||
<Group justify="space-between">
|
||||
<Text fw={500} c={dark ? "dark.0" : "#1e3a5f"}>
|
||||
SMP
|
||||
</Text>
|
||||
<Text fw={700} c={dark ? "dark.0" : "#1e3a5f"}>
|
||||
{displayData.siswa.smp}
|
||||
</Text>
|
||||
</Group>
|
||||
<Group justify="space-between">
|
||||
<Text fw={500} c={dark ? "dark.0" : "#1e3a5f"}>
|
||||
SMA
|
||||
</Text>
|
||||
<Text fw={700} c={dark ? "dark.0" : "#1e3a5f"}>
|
||||
{displayData.siswa.sma}
|
||||
</Text>
|
||||
</Group>
|
||||
|
||||
<Card
|
||||
withBorder
|
||||
radius="md"
|
||||
p="md"
|
||||
mt="md"
|
||||
bg={dark ? "#263852ff" : "#F1F5F9"}
|
||||
style={{ borderColor: dark ? "#263852ff" : "#F1F5F9" }}
|
||||
>
|
||||
<Group justify="space-between">
|
||||
<Text fw={500} c={dark ? "dark.0" : "#1e3a5f"}>
|
||||
Jumlah Lembaga Pendidikan
|
||||
</Text>
|
||||
<Text fw={700} c={dark ? "dark.0" : "#1e3a5f"}>
|
||||
{displayData.sekolah.jumlah}
|
||||
</Text>
|
||||
</Group>
|
||||
<Group justify="space-between" mt="sm">
|
||||
<Text fw={500} c={dark ? "dark.0" : "#1e3a5f"}>
|
||||
Jumlah Tenaga Pengajar
|
||||
</Text>
|
||||
<Text fw={700} c={dark ? "dark.0" : "#1e3a5f"}>
|
||||
{displayData.sekolah.guru}
|
||||
</Text>
|
||||
</Group>
|
||||
</Card>
|
||||
</Stack>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
89
src/components/sosial/posyandu-schedule.tsx
Normal file
89
src/components/sosial/posyandu-schedule.tsx
Normal file
@@ -0,0 +1,89 @@
|
||||
import { Badge, Card, Group, Stack, Text, Title } from "@mantine/core";
|
||||
import { useMantineColorScheme } from "@mantine/core";
|
||||
|
||||
interface PosyanduItem {
|
||||
id: string;
|
||||
nama: string;
|
||||
tanggal: string;
|
||||
jam: string;
|
||||
}
|
||||
|
||||
interface PosyanduScheduleProps {
|
||||
data?: PosyanduItem[];
|
||||
}
|
||||
|
||||
export const PosyanduSchedule = ({ data }: PosyanduScheduleProps) => {
|
||||
const { colorScheme } = useMantineColorScheme();
|
||||
const dark = colorScheme === "dark";
|
||||
|
||||
const defaultData: PosyanduItem[] = [
|
||||
{
|
||||
id: "1",
|
||||
nama: "Posyandu Mawar",
|
||||
tanggal: "Senin, 15 Feb 2026",
|
||||
jam: "08:00 - 11:00",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
nama: "Posyandu Melati",
|
||||
tanggal: "Selasa, 16 Feb 2026",
|
||||
jam: "08:00 - 11:00",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
nama: "Posyandu Dahlia",
|
||||
tanggal: "Rabu, 17 Feb 2026",
|
||||
jam: "08:00 - 11:00",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
nama: "Posyandu Anggrek",
|
||||
tanggal: "Kamis, 18 Feb 2026",
|
||||
jam: "08:00 - 11:00",
|
||||
},
|
||||
];
|
||||
|
||||
const displayData = data || defaultData;
|
||||
|
||||
return (
|
||||
<Card
|
||||
p="md"
|
||||
radius="xl"
|
||||
withBorder
|
||||
shadow="sm"
|
||||
bg={dark ? "#141D34" : "white"}
|
||||
style={{ borderColor: dark ? "#141D34" : "#e5e7eb" }}
|
||||
>
|
||||
<Title order={3} mb="md" c={dark ? "dark.0" : "#1e3a5f"}>
|
||||
Jadwal Posyandu
|
||||
</Title>
|
||||
<Stack gap="sm">
|
||||
{displayData.map((item) => (
|
||||
<Card
|
||||
key={item.id}
|
||||
p="md"
|
||||
radius="md"
|
||||
withBorder
|
||||
bg={dark ? "#263852ff" : "#F1F5F9"}
|
||||
style={{ borderColor: dark ? "#263852ff" : "#F1F5F9" }}
|
||||
hoverable
|
||||
>
|
||||
<Group justify="space-between">
|
||||
<Stack gap={0}>
|
||||
<Text fw={600} c={dark ? "dark.0" : "#1e3a5f"}>
|
||||
{item.nama}
|
||||
</Text>
|
||||
<Text size="sm" c={dark ? "dark.3" : "dimmed"}>
|
||||
{item.tanggal}
|
||||
</Text>
|
||||
</Stack>
|
||||
<Badge variant="light" color="darmasaba-blue" size="md">
|
||||
{item.jam}
|
||||
</Badge>
|
||||
</Group>
|
||||
</Card>
|
||||
))}
|
||||
</Stack>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
132
src/components/sosial/summary-cards.tsx
Normal file
132
src/components/sosial/summary-cards.tsx
Normal file
@@ -0,0 +1,132 @@
|
||||
import { Card, Grid, GridCol, Group, Stack, Text, ThemeIcon } from "@mantine/core";
|
||||
import { useMantineColorScheme } from "@mantine/core";
|
||||
import {
|
||||
IconBabyCarriage,
|
||||
IconHeartbeat,
|
||||
IconMedicalCross,
|
||||
IconStethoscope,
|
||||
} from "@tabler/icons-react";
|
||||
|
||||
interface SummaryCardProps {
|
||||
title: string;
|
||||
value: number;
|
||||
subtitle?: string;
|
||||
icon: React.ReactNode;
|
||||
color: string;
|
||||
highlight?: boolean;
|
||||
backgroundColor: string;
|
||||
}
|
||||
|
||||
const SummaryCard = ({
|
||||
title,
|
||||
value,
|
||||
subtitle,
|
||||
icon,
|
||||
color,
|
||||
highlight = false,
|
||||
backgroundColor,
|
||||
}: SummaryCardProps) => {
|
||||
const { colorScheme } = useMantineColorScheme();
|
||||
const dark = colorScheme === "dark";
|
||||
|
||||
return (
|
||||
<Card
|
||||
p="md"
|
||||
radius="xl"
|
||||
withBorder
|
||||
shadow="sm"
|
||||
bg={dark ? "#141D34" : "white"}
|
||||
style={{ borderColor: dark ? "#141D34" : "#e5e7eb" }}
|
||||
>
|
||||
<Group justify="space-between" align="center">
|
||||
<Stack gap={2}>
|
||||
<Text size="sm" c={dark ? "dark.3" : "dimmed"} fw={500}>
|
||||
{title}
|
||||
</Text>
|
||||
<Text
|
||||
size="xl"
|
||||
fw={700}
|
||||
c={highlight ? "red" : dark ? "dark.0" : "#1e3a5f"}
|
||||
>
|
||||
{value}
|
||||
</Text>
|
||||
{subtitle && (
|
||||
<Text size="xs" c={dark ? "dark.4" : "gray.6"}>
|
||||
{subtitle}
|
||||
</Text>
|
||||
)}
|
||||
</Stack>
|
||||
<ThemeIcon bg={backgroundColor} color={color} size="xl" radius="xl">
|
||||
{icon}
|
||||
</ThemeIcon>
|
||||
</Group>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
interface HealthSummaryData {
|
||||
ibuHamil: number;
|
||||
balita: number;
|
||||
alertStunting: number;
|
||||
posyanduAktif: number;
|
||||
}
|
||||
|
||||
interface SummaryCardsProps {
|
||||
data?: HealthSummaryData;
|
||||
}
|
||||
|
||||
export const SummaryCards = ({ data }: SummaryCardsProps) => {
|
||||
const defaultData: HealthSummaryData = {
|
||||
ibuHamil: 87,
|
||||
balita: 342,
|
||||
alertStunting: 12,
|
||||
posyanduAktif: 8,
|
||||
};
|
||||
|
||||
const displayData = data || defaultData;
|
||||
|
||||
return (
|
||||
<Grid gutter="md">
|
||||
<GridCol span={{ base: 12, sm: 6, lg: 3 }}>
|
||||
<SummaryCard
|
||||
title="Ibu Hamil Aktif"
|
||||
value={displayData.ibuHamil}
|
||||
subtitle="Aktif"
|
||||
icon={<IconHeartbeat size={20} />}
|
||||
color= "white"
|
||||
backgroundColor= "#1E3A5F"
|
||||
/>
|
||||
</GridCol>
|
||||
<GridCol span={{ base: 12, sm: 6, lg: 3 }}>
|
||||
<SummaryCard
|
||||
title="Balita Terdaftar"
|
||||
value={displayData.balita}
|
||||
subtitle="Terdaftar"
|
||||
icon={<IconBabyCarriage size={20} />}
|
||||
color= "white"
|
||||
backgroundColor= "#1E3A5F"
|
||||
/>
|
||||
</GridCol>
|
||||
<GridCol span={{ base: 12, sm: 6, lg: 3 }}>
|
||||
<SummaryCard
|
||||
title="Alert Stunting"
|
||||
value={displayData.alertStunting}
|
||||
subtitle="Perhatian"
|
||||
icon={<IconStethoscope size={20} />}
|
||||
color= "white"
|
||||
backgroundColor= "#1E3A5F"
|
||||
/>
|
||||
</GridCol>
|
||||
<GridCol span={{ base: 12, sm: 6, lg: 3 }}>
|
||||
<SummaryCard
|
||||
title="Posyandu Aktif"
|
||||
value={displayData.posyanduAktif}
|
||||
subtitle="Aktif"
|
||||
icon={<IconMedicalCross size={20} />}
|
||||
color= "white"
|
||||
backgroundColor= "#1E3A5F"
|
||||
/>
|
||||
</GridCol>
|
||||
</Grid>
|
||||
);
|
||||
};
|
||||
@@ -52,8 +52,8 @@ export const HelpCard = ({
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: isDark
|
||||
? theme.colors.blue[8]
|
||||
: theme.colors.blue[0],
|
||||
? "#263852ff"
|
||||
: "#1E3A5F",
|
||||
borderRadius: "8px",
|
||||
padding: "8px",
|
||||
display: "flex",
|
||||
|
||||
75
src/components/umkm/header-toggle.tsx
Normal file
75
src/components/umkm/header-toggle.tsx
Normal file
@@ -0,0 +1,75 @@
|
||||
import {
|
||||
Button,
|
||||
Card,
|
||||
Group,
|
||||
Title,
|
||||
useMantineColorScheme,
|
||||
} from "@mantine/core";
|
||||
import { useSnapshot } from "valtio";
|
||||
import { setRange, umkmStore } from "../../store/umkm";
|
||||
|
||||
type TimeRange = "minggu" | "bulan";
|
||||
|
||||
interface HeaderToggleProps {
|
||||
title?: string;
|
||||
onRangeChange?: (range: TimeRange) => void;
|
||||
}
|
||||
|
||||
export const HeaderToggle = ({
|
||||
title = "Update Penjualan Produk",
|
||||
onRangeChange,
|
||||
}: HeaderToggleProps) => {
|
||||
const { colorScheme } = useMantineColorScheme();
|
||||
const dark = colorScheme === "dark";
|
||||
const { selectedRange } = useSnapshot(umkmStore);
|
||||
|
||||
const handleRangeChange = (range: TimeRange) => {
|
||||
setRange(range);
|
||||
onRangeChange?.(range);
|
||||
};
|
||||
|
||||
return (
|
||||
<Card
|
||||
p="md"
|
||||
radius="xl"
|
||||
withBorder
|
||||
shadow="sm"
|
||||
bg={dark ? "#1e3a5f" : "#1e3a5f"}
|
||||
style={{ borderColor: dark ? "#1e3a5f" : "#1e3a5f" }}
|
||||
>
|
||||
<Group justify="space-between" align="center" px="md" py="xs">
|
||||
<Title order={3} c="white">
|
||||
{title}
|
||||
</Title>
|
||||
<Group gap="xs">
|
||||
<Button
|
||||
variant={selectedRange === "minggu" ? "white" : "transparent"}
|
||||
onClick={() => handleRangeChange("minggu")}
|
||||
c={selectedRange === "minggu" ? "#1e3a5f" : "white"}
|
||||
fw={600}
|
||||
radius="xl"
|
||||
size="sm"
|
||||
style={{
|
||||
opacity: selectedRange === "minggu" ? 1 : 0.8,
|
||||
}}
|
||||
>
|
||||
Minggu ini
|
||||
</Button>
|
||||
<Button
|
||||
variant={selectedRange === "bulan" ? "white" : "transparent"}
|
||||
onClick={() => handleRangeChange("bulan")}
|
||||
c={selectedRange === "bulan" ? "#1e3a5f" : "white"}
|
||||
fw={600}
|
||||
radius="xl"
|
||||
size="sm"
|
||||
style={{
|
||||
opacity: selectedRange === "bulan" ? 1 : 0.8,
|
||||
}}
|
||||
>
|
||||
Bulan ini
|
||||
</Button>
|
||||
</Group>
|
||||
</Group>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
100
src/components/umkm/produk-unggulan.tsx
Normal file
100
src/components/umkm/produk-unggulan.tsx
Normal file
@@ -0,0 +1,100 @@
|
||||
import { Card, Group, Stack, Text, useMantineColorScheme } from "@mantine/core";
|
||||
|
||||
interface MetricCardProps {
|
||||
title: string;
|
||||
value: string | number;
|
||||
trend?: {
|
||||
value: number;
|
||||
label: string;
|
||||
};
|
||||
}
|
||||
|
||||
const MetricCard = ({ title, value, trend }: MetricCardProps) => {
|
||||
const { colorScheme } = useMantineColorScheme();
|
||||
const dark = colorScheme === "dark";
|
||||
|
||||
return (
|
||||
<Group justify="space-between" align="center">
|
||||
<Text size="sm" c={dark ? "dark.3" : "dimmed"} fw={500}>
|
||||
{title}
|
||||
</Text>
|
||||
<Stack gap={0} align="flex-end">
|
||||
<Text size="lg" fw={700} c={dark ? "dark.0" : "#1e3a5f"}>
|
||||
{value}
|
||||
</Text>
|
||||
{trend && (
|
||||
<Text size="xs" c={trend.value >= 0 ? "green" : "red"} fw={600}>
|
||||
{trend.value >= 0 ? "↑" : "↓"} {Math.abs(trend.value)}%{" "}
|
||||
{trend.label}
|
||||
</Text>
|
||||
)}
|
||||
</Stack>
|
||||
</Group>
|
||||
);
|
||||
};
|
||||
|
||||
interface ProdukUnggulanProps {
|
||||
data?: {
|
||||
totalPenjualan: number;
|
||||
produkAktif: number;
|
||||
totalTransaksi: number;
|
||||
trend?: {
|
||||
value: number;
|
||||
label: string;
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
export const ProdukUnggulan = ({ data }: ProdukUnggulanProps) => {
|
||||
const { colorScheme } = useMantineColorScheme();
|
||||
const dark = colorScheme === "dark";
|
||||
|
||||
const defaultData = {
|
||||
totalPenjualan: 30900000,
|
||||
produkAktif: 7,
|
||||
totalTransaksi: 500,
|
||||
trend: {
|
||||
value: 18,
|
||||
label: "vs bulan lalu",
|
||||
},
|
||||
};
|
||||
|
||||
const displayData = data || defaultData;
|
||||
|
||||
const formatCurrency = (value: number) => {
|
||||
if (value >= 1000000) {
|
||||
return `Rp ${(value / 1000000).toFixed(1)}M`;
|
||||
}
|
||||
if (value >= 1000) {
|
||||
return `Rp ${(value / 1000).toFixed(0)}K`;
|
||||
}
|
||||
return `Rp ${value.toLocaleString()}`;
|
||||
};
|
||||
|
||||
return (
|
||||
<Card
|
||||
p="md"
|
||||
radius="xl"
|
||||
withBorder
|
||||
shadow="sm"
|
||||
bg={dark ? "#141D34" : "white"}
|
||||
style={{ borderColor: dark ? "#141D34" : "#e5e7eb" }}
|
||||
>
|
||||
<Stack gap="lg">
|
||||
<MetricCard
|
||||
title="Total Penjualan"
|
||||
value={formatCurrency(displayData.totalPenjualan)}
|
||||
trend={displayData.trend}
|
||||
/>
|
||||
<MetricCard
|
||||
title="Produk Aktif"
|
||||
value={`${displayData.produkAktif} kategori`}
|
||||
/>
|
||||
<MetricCard
|
||||
title="Total Transaksi"
|
||||
value={`${displayData.totalTransaksi} transaksi`}
|
||||
/>
|
||||
</Stack>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
260
src/components/umkm/sales-table.tsx
Normal file
260
src/components/umkm/sales-table.tsx
Normal file
@@ -0,0 +1,260 @@
|
||||
import {
|
||||
Badge,
|
||||
Button,
|
||||
Card,
|
||||
Group,
|
||||
Select,
|
||||
Table,
|
||||
Text,
|
||||
Title,
|
||||
useMantineColorScheme,
|
||||
} from "@mantine/core";
|
||||
import { IconArrowDown, IconArrowUp } from "@tabler/icons-react";
|
||||
|
||||
export interface SalesData {
|
||||
id: string;
|
||||
produk: string;
|
||||
penjualanBulanIni: number;
|
||||
bulanLalu: number;
|
||||
trend: number;
|
||||
volume: string;
|
||||
stok: number;
|
||||
unit: string;
|
||||
}
|
||||
|
||||
interface SalesTableProps {
|
||||
data?: SalesData[];
|
||||
onDetailClick?: (product: SalesData) => void;
|
||||
}
|
||||
|
||||
export const SalesTable = ({ data, onDetailClick }: SalesTableProps) => {
|
||||
const { colorScheme } = useMantineColorScheme();
|
||||
const dark = colorScheme === "dark";
|
||||
|
||||
const defaultData: SalesData[] = [
|
||||
{
|
||||
id: "1",
|
||||
produk: "Beras Premium Organik",
|
||||
penjualanBulanIni: 8500000,
|
||||
bulanLalu: 7600000,
|
||||
trend: 12,
|
||||
volume: "650 Kg",
|
||||
stok: 850,
|
||||
unit: "Kg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
produk: "Keripik Singkong",
|
||||
penjualanBulanIni: 4200000,
|
||||
bulanLalu: 3800000,
|
||||
trend: 11,
|
||||
volume: "320 Kg",
|
||||
stok: 120,
|
||||
unit: "Kg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
produk: "Madu Alami",
|
||||
penjualanBulanIni: 3750000,
|
||||
bulanLalu: 4100000,
|
||||
trend: -9,
|
||||
volume: "150 Liter",
|
||||
stok: 45,
|
||||
unit: "Liter",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
produk: "Kecap Tradisional",
|
||||
penjualanBulanIni: 2800000,
|
||||
bulanLalu: 2500000,
|
||||
trend: 12,
|
||||
volume: "280 Botol",
|
||||
stok: 95,
|
||||
unit: "Botol",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
produk: "Sambal Bu Rudy",
|
||||
penjualanBulanIni: 2100000,
|
||||
bulanLalu: 2300000,
|
||||
trend: -9,
|
||||
volume: "180 Botol",
|
||||
stok: 35,
|
||||
unit: "Botol",
|
||||
},
|
||||
];
|
||||
|
||||
const displayData = data || defaultData;
|
||||
|
||||
const formatCurrency = (value: number) => {
|
||||
if (value >= 1000000) {
|
||||
return `Rp ${(value / 1000000).toFixed(1)}M`;
|
||||
}
|
||||
if (value >= 1000) {
|
||||
return `Rp ${(value / 1000).toFixed(0)}K`;
|
||||
}
|
||||
return `Rp ${value.toLocaleString()}`;
|
||||
};
|
||||
|
||||
const getStockStatus = (stock: number) => {
|
||||
if (stock > 200) return { color: "green", label: "Aman" };
|
||||
if (stock > 50) return { color: "yellow", label: "Sedang" };
|
||||
return { color: "red", label: "Rendah" };
|
||||
};
|
||||
|
||||
return (
|
||||
<Card
|
||||
p="md"
|
||||
radius="xl"
|
||||
withBorder
|
||||
shadow="sm"
|
||||
bg={dark ? "#141D34" : "white"}
|
||||
style={{ borderColor: dark ? "#141D34" : "#e5e7eb" }}
|
||||
>
|
||||
<Group justify="space-between" mb="md">
|
||||
<Title order={4} c={dark ? "dark.0" : "#1e3a5f"}>
|
||||
Detail Penjualan Produk
|
||||
</Title>
|
||||
<Group gap="xs">
|
||||
<Select
|
||||
placeholder="Filter kategori"
|
||||
data={[
|
||||
{ value: "semua", label: "Semua Kategori" },
|
||||
{ value: "makanan", label: "Makanan" },
|
||||
{ value: "minuman", label: "Minuman" },
|
||||
{ value: "kerajinan", label: "Kerajinan" },
|
||||
]}
|
||||
defaultValue="semua"
|
||||
w={180}
|
||||
size="sm"
|
||||
/>
|
||||
<Select
|
||||
placeholder="Filter UMKM"
|
||||
data={[
|
||||
{ value: "semua", label: "Semua UMKM" },
|
||||
{ value: "umkm1", label: "Warung Pak Joko" },
|
||||
{ value: "umkm2", label: "Ibu Sari Snack" },
|
||||
]}
|
||||
defaultValue="semua"
|
||||
w={180}
|
||||
size="sm"
|
||||
/>
|
||||
</Group>
|
||||
</Group>
|
||||
|
||||
<Table
|
||||
stickyHeader
|
||||
stickyHeaderOffset={60}
|
||||
highlightOnHover
|
||||
withRowBorders={false}
|
||||
verticalSpacing="sm"
|
||||
>
|
||||
<Table.Thead>
|
||||
<Table.Tr>
|
||||
<Table.Th style={{ backgroundColor: dark ? "#1e3a5f" : "#f8f9fa" }}>
|
||||
<Text size="sm" fw={600} c={dark ? "white" : "dimmed"}>
|
||||
Produk
|
||||
</Text>
|
||||
</Table.Th>
|
||||
<Table.Th style={{ backgroundColor: dark ? "#1e3a5f" : "#f8f9fa" }}>
|
||||
<Text size="sm" fw={600} c={dark ? "white" : "dimmed"}>
|
||||
Penjualan Bulan Ini
|
||||
</Text>
|
||||
</Table.Th>
|
||||
<Table.Th style={{ backgroundColor: dark ? "#1e3a5f" : "#f8f9fa" }}>
|
||||
<Text size="sm" fw={600} c={dark ? "white" : "dimmed"}>
|
||||
Bulan Lalu
|
||||
</Text>
|
||||
</Table.Th>
|
||||
<Table.Th style={{ backgroundColor: dark ? "#1e3a5f" : "#f8f9fa" }}>
|
||||
<Text size="sm" fw={600} c={dark ? "white" : "dimmed"}>
|
||||
Trend
|
||||
</Text>
|
||||
</Table.Th>
|
||||
<Table.Th style={{ backgroundColor: dark ? "#1e3a5f" : "#f8f9fa" }}>
|
||||
<Text size="sm" fw={600} c={dark ? "white" : "dimmed"}>
|
||||
Volume
|
||||
</Text>
|
||||
</Table.Th>
|
||||
<Table.Th style={{ backgroundColor: dark ? "#1e3a5f" : "#f8f9fa" }}>
|
||||
<Text size="sm" fw={600} c={dark ? "white" : "dimmed"}>
|
||||
Stok
|
||||
</Text>
|
||||
</Table.Th>
|
||||
<Table.Th style={{ backgroundColor: dark ? "#1e3a5f" : "#f8f9fa" }}>
|
||||
<Text size="sm" fw={600} c={dark ? "white" : "dimmed"}>
|
||||
Aksi
|
||||
</Text>
|
||||
</Table.Th>
|
||||
</Table.Tr>
|
||||
</Table.Thead>
|
||||
<Table.Tbody>
|
||||
{displayData.map((product) => {
|
||||
const stockStatus = getStockStatus(product.stok);
|
||||
return (
|
||||
<Table.Tr
|
||||
key={product.id}
|
||||
style={{
|
||||
backgroundColor: dark ? "#141D34" : "white",
|
||||
}}
|
||||
>
|
||||
<Table.Td>
|
||||
<Text fw={600} c={dark ? "dark.0" : "#1e3a5f"}>
|
||||
{product.produk}
|
||||
</Text>
|
||||
</Table.Td>
|
||||
<Table.Td>
|
||||
<Text size="sm" fw={600} c={dark ? "dark.0" : "#1e3a5f"}>
|
||||
{formatCurrency(product.penjualanBulanIni)}
|
||||
</Text>
|
||||
</Table.Td>
|
||||
<Table.Td>
|
||||
<Text size="sm" c={dark ? "dark.3" : "dimmed"}>
|
||||
{formatCurrency(product.bulanLalu)}
|
||||
</Text>
|
||||
</Table.Td>
|
||||
<Table.Td>
|
||||
<Group gap="xs">
|
||||
{product.trend >= 0 ? (
|
||||
<IconArrowUp size={16} color="green" />
|
||||
) : (
|
||||
<IconArrowDown size={16} color="red" />
|
||||
)}
|
||||
<Text
|
||||
size="sm"
|
||||
fw={600}
|
||||
c={product.trend >= 0 ? "green" : "red"}
|
||||
>
|
||||
{Math.abs(product.trend)}%
|
||||
</Text>
|
||||
</Group>
|
||||
</Table.Td>
|
||||
<Table.Td>
|
||||
<Text size="sm" c={dark ? "dark.0" : "#1e3a5f"}>
|
||||
{product.volume}
|
||||
</Text>
|
||||
</Table.Td>
|
||||
<Table.Td>
|
||||
<Badge variant="light" color={stockStatus.color} size="sm">
|
||||
{product.stok} {product.unit} ({stockStatus.label})
|
||||
</Badge>
|
||||
</Table.Td>
|
||||
<Table.Td>
|
||||
<Button
|
||||
variant="subtle"
|
||||
size="compact-sm"
|
||||
color="darmasaba-blue"
|
||||
radius="xl"
|
||||
onClick={() => onDetailClick?.(product)}
|
||||
>
|
||||
Detail
|
||||
</Button>
|
||||
</Table.Td>
|
||||
</Table.Tr>
|
||||
);
|
||||
})}
|
||||
</Table.Tbody>
|
||||
</Table>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
148
src/components/umkm/summary-cards.tsx
Normal file
148
src/components/umkm/summary-cards.tsx
Normal file
@@ -0,0 +1,148 @@
|
||||
import {
|
||||
Avatar,
|
||||
Card,
|
||||
Grid,
|
||||
GridCol,
|
||||
Group,
|
||||
Stack,
|
||||
Text,
|
||||
useMantineColorScheme
|
||||
} from "@mantine/core";
|
||||
import {
|
||||
IconCategory,
|
||||
IconCurrencyDollar,
|
||||
IconTrendingUp,
|
||||
IconUsers
|
||||
} from "@tabler/icons-react";
|
||||
|
||||
interface KpiCardProps {
|
||||
title: string;
|
||||
value: string | number;
|
||||
subtitle?: string;
|
||||
icon: React.ReactNode;
|
||||
color: string;
|
||||
backgroundColor: string;
|
||||
}
|
||||
|
||||
const KpiCard = ({ title, value, subtitle, icon, color, backgroundColor }: KpiCardProps) => {
|
||||
const { colorScheme } = useMantineColorScheme();
|
||||
const dark = colorScheme === "dark";
|
||||
|
||||
const formatValue = (val: string | number) => {
|
||||
if (typeof val === "number") {
|
||||
if (val >= 1000000) {
|
||||
return `${(val / 1000000).toFixed(1)}M`;
|
||||
}
|
||||
if (val >= 1000) {
|
||||
return `${(val / 1000).toFixed(1)}K`;
|
||||
}
|
||||
return val.toLocaleString();
|
||||
}
|
||||
return val;
|
||||
};
|
||||
|
||||
return (
|
||||
<Card
|
||||
p="md"
|
||||
radius="xl"
|
||||
withBorder
|
||||
shadow="sm"
|
||||
bg={dark ? "#141D34" : "white"}
|
||||
style={{ borderColor: dark ? "#141D34" : "#e5e7eb" }}
|
||||
>
|
||||
<Group justify="space-between" align="center">
|
||||
<Stack gap={2}>
|
||||
<Text size="sm" c={dark ? "dark.3" : "dimmed"} fw={500}>
|
||||
{title}
|
||||
</Text>
|
||||
<Text size="xl" fw={700} c={dark ? "dark.0" : "#1e3a5f"}>
|
||||
{formatValue(value)}
|
||||
</Text>
|
||||
{subtitle && (
|
||||
<Text size="xs" c={dark ? "dark.4" : "gray.6"}>
|
||||
{subtitle}
|
||||
</Text>
|
||||
)}
|
||||
</Stack>
|
||||
<Avatar
|
||||
color={color}
|
||||
bg={backgroundColor}
|
||||
size={40}
|
||||
radius="xl"
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
{icon}
|
||||
</Avatar>
|
||||
</Group>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
interface SummaryCardsProps {
|
||||
data?: {
|
||||
umkmAktif: number;
|
||||
umkmTerdaftar: number;
|
||||
omzet: number;
|
||||
kategoriTerbanyak: { count: number; name: string };
|
||||
};
|
||||
}
|
||||
|
||||
export const SummaryCards = ({ data }: SummaryCardsProps) => {
|
||||
const defaultData = {
|
||||
umkmAktif: 45,
|
||||
umkmTerdaftar: 68,
|
||||
omzet: 48000000,
|
||||
kategoriTerbanyak: { count: 34, name: "Kuliner" },
|
||||
};
|
||||
|
||||
const displayData = data || defaultData;
|
||||
|
||||
const kpiData: KpiCardProps[] = [
|
||||
{
|
||||
title: "UMKM Aktif",
|
||||
value: displayData.umkmAktif,
|
||||
subtitle: "Beroperasi",
|
||||
icon: <IconCurrencyDollar size={25} />,
|
||||
color: "white",
|
||||
backgroundColor: "#1E3A5F"
|
||||
},
|
||||
{
|
||||
title: "UMKM Terdaftar",
|
||||
value: displayData.umkmTerdaftar,
|
||||
subtitle: "Total registrasi",
|
||||
icon: <IconUsers size={25} />,
|
||||
color: "white",
|
||||
backgroundColor: "#1E3A5F"
|
||||
},
|
||||
{
|
||||
title: "Omzet",
|
||||
value: displayData.omzet,
|
||||
subtitle: "Omzet BUMDes per bulan",
|
||||
icon: <IconTrendingUp size={25} />,
|
||||
color: "white",
|
||||
backgroundColor: "#1E3A5F"
|
||||
},
|
||||
{
|
||||
title: "UMKM Terbanyak",
|
||||
value: displayData.kategoriTerbanyak.count,
|
||||
subtitle: `Kategori ${displayData.kategoriTerbanyak.name}`,
|
||||
icon: <IconTrendingUp size={25} />,
|
||||
color: "white",
|
||||
backgroundColor: "#1E3A5F"
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Grid gutter="md">
|
||||
{kpiData.map((kpi, index) => (
|
||||
<GridCol key={index} span={{ base: 12, sm: 6, lg: 3 }}>
|
||||
<KpiCard {...kpi} />
|
||||
</GridCol>
|
||||
))}
|
||||
</Grid>
|
||||
);
|
||||
};
|
||||
140
src/components/umkm/top-products.tsx
Normal file
140
src/components/umkm/top-products.tsx
Normal file
@@ -0,0 +1,140 @@
|
||||
import {
|
||||
Badge,
|
||||
Card,
|
||||
Group,
|
||||
Stack,
|
||||
Text,
|
||||
Title,
|
||||
useMantineColorScheme,
|
||||
} from "@mantine/core";
|
||||
|
||||
interface TopProduct {
|
||||
rank: number;
|
||||
name: string;
|
||||
umkmName: string;
|
||||
revenue: number;
|
||||
quantitySold: number;
|
||||
trend: number;
|
||||
}
|
||||
|
||||
interface TopProductsProps {
|
||||
products?: TopProduct[];
|
||||
}
|
||||
|
||||
const formatCurrency = (value: number) => {
|
||||
if (value >= 1000000) {
|
||||
return `${(value / 1000000).toFixed(1)}M`;
|
||||
}
|
||||
if (value >= 1000) {
|
||||
return `${(value / 1000).toFixed(0)}K`;
|
||||
}
|
||||
return value.toString();
|
||||
};
|
||||
|
||||
const formatNumber = (value: number) => {
|
||||
if (value >= 1000) {
|
||||
return `${(value / 1000).toFixed(1)}K`;
|
||||
}
|
||||
return value.toString();
|
||||
};
|
||||
|
||||
export const TopProducts = ({ products }: TopProductsProps) => {
|
||||
const { colorScheme } = useMantineColorScheme();
|
||||
const dark = colorScheme === "dark";
|
||||
|
||||
const defaultProducts: TopProduct[] = [
|
||||
{
|
||||
rank: 1,
|
||||
name: "Beras Premium Organik",
|
||||
umkmName: "Warung Pak Joko",
|
||||
revenue: 8500000,
|
||||
quantitySold: 650,
|
||||
trend: 12,
|
||||
},
|
||||
{
|
||||
rank: 2,
|
||||
name: "Keripik Singkong",
|
||||
umkmName: "Ibu Sari Snack",
|
||||
revenue: 4200000,
|
||||
quantitySold: 320,
|
||||
trend: 8,
|
||||
},
|
||||
{
|
||||
rank: 3,
|
||||
name: "Madu Alami",
|
||||
umkmName: "Peternakan Lebah",
|
||||
revenue: 3750000,
|
||||
quantitySold: 150,
|
||||
trend: 5,
|
||||
},
|
||||
];
|
||||
|
||||
const displayProducts = products || defaultProducts;
|
||||
|
||||
const getRankColor = (rank: number) => {
|
||||
if (rank === 1) return "yellow";
|
||||
if (rank === 2) return "gray";
|
||||
if (rank === 3) return "orange";
|
||||
return "blue";
|
||||
};
|
||||
|
||||
return (
|
||||
<Card
|
||||
p="md"
|
||||
radius="xl"
|
||||
withBorder
|
||||
shadow="sm"
|
||||
bg={dark ? "#141D34" : "white"}
|
||||
style={{ borderColor: dark ? "#141D34" : "#e5e7eb" }}
|
||||
>
|
||||
<Title order={4} mb="md" c={dark ? "dark.0" : "#1e3a5f"}>
|
||||
Top 3 Produk Terlaris
|
||||
</Title>
|
||||
<Stack gap="sm">
|
||||
{displayProducts.map((product) => (
|
||||
<Group key={product.rank} justify="space-between" align="center">
|
||||
<Group gap="sm">
|
||||
<Badge
|
||||
variant="filled"
|
||||
color={getRankColor(product.rank)}
|
||||
radius="xl"
|
||||
size="lg"
|
||||
w={30}
|
||||
h={30}
|
||||
>
|
||||
{product.rank}
|
||||
</Badge>
|
||||
<Stack gap={0}>
|
||||
<Text fw={600} c={dark ? "dark.0" : "#1e3a5f"}>
|
||||
{product.name}
|
||||
</Text>
|
||||
<Text size="sm" c={dark ? "dark.3" : "dimmed"}>
|
||||
{product.umkmName}
|
||||
</Text>
|
||||
<Group gap="xs" mt={2}>
|
||||
<Text size="xs" c={dark ? "dark.4" : "gray.6"}>
|
||||
Rp {formatCurrency(product.revenue)}
|
||||
</Text>
|
||||
<Text size="xs" c={dark ? "dark.4" : "gray.6"}>
|
||||
•
|
||||
</Text>
|
||||
<Text size="xs" c={dark ? "dark.4" : "gray.6"}>
|
||||
{formatNumber(product.quantitySold)} terjual
|
||||
</Text>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Group>
|
||||
<Badge
|
||||
variant="light"
|
||||
color={product.trend >= 0 ? "green" : "red"}
|
||||
size="sm"
|
||||
>
|
||||
{product.trend >= 0 ? "+" : ""}
|
||||
{product.trend}%
|
||||
</Badge>
|
||||
</Group>
|
||||
))}
|
||||
</Stack>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
35
src/hooks/use-sidebar-fullscreen.ts
Normal file
35
src/hooks/use-sidebar-fullscreen.ts
Normal file
@@ -0,0 +1,35 @@
|
||||
import { useDisclosure } from "@mantine/hooks";
|
||||
import { useState } from "react";
|
||||
|
||||
export function useSidebarFullscreen() {
|
||||
const [opened, { toggle: toggleMobile }] = useDisclosure();
|
||||
const [sidebarCollapsed, setSidebarCollapsed] = useDisclosure(false);
|
||||
const [clickCount, setClickCount] = useState(0);
|
||||
|
||||
const toggleSidebar = () => {
|
||||
setSidebarCollapsed.toggle();
|
||||
setClickCount(0);
|
||||
};
|
||||
|
||||
const handleMainClick = () => {
|
||||
if (!sidebarCollapsed) {
|
||||
const newCount = clickCount + 1;
|
||||
setClickCount(newCount);
|
||||
|
||||
if (newCount === 2) {
|
||||
toggleSidebar();
|
||||
} else {
|
||||
setTimeout(() => setClickCount(0), 300);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
opened,
|
||||
toggleMobile,
|
||||
sidebarCollapsed,
|
||||
toggleSidebar,
|
||||
handleMainClick,
|
||||
isCollapsed: sidebarCollapsed,
|
||||
};
|
||||
}
|
||||
@@ -1,16 +1,22 @@
|
||||
import { AppShell, Burger, Group, useMantineColorScheme } from "@mantine/core";
|
||||
import { useDisclosure } from "@mantine/hooks";
|
||||
import { createFileRoute } from "@tanstack/react-router";
|
||||
import { Header } from "@/components/header";
|
||||
import HelpPage from "@/components/help-page";
|
||||
import { Sidebar } from "@/components/sidebar";
|
||||
import { useSidebarFullscreen } from "@/hooks/use-sidebar-fullscreen";
|
||||
|
||||
export const Route = createFileRoute("/bantuan")({
|
||||
component: BantuanPage,
|
||||
component: BantuanRoute,
|
||||
});
|
||||
|
||||
function BantuanPage() {
|
||||
const [opened, { toggle }] = useDisclosure();
|
||||
function BantuanRoute() {
|
||||
const {
|
||||
opened,
|
||||
toggleMobile,
|
||||
sidebarCollapsed,
|
||||
toggleSidebar,
|
||||
handleMainClick,
|
||||
} = useSidebarFullscreen();
|
||||
const { colorScheme } = useMantineColorScheme();
|
||||
const headerBgColor = colorScheme === "dark" ? "#11192D" : "#19355E";
|
||||
const navbarBgColor = colorScheme === "dark" ? "#11192D" : "white";
|
||||
@@ -22,14 +28,19 @@ function BantuanPage() {
|
||||
navbar={{
|
||||
width: 300,
|
||||
breakpoint: "sm",
|
||||
collapsed: { mobile: !opened },
|
||||
collapsed: { mobile: !opened, desktop: sidebarCollapsed },
|
||||
}}
|
||||
padding="md"
|
||||
>
|
||||
<AppShell.Header bg={headerBgColor}>
|
||||
<Group h="100%" px="md">
|
||||
<Burger opened={opened} onClick={toggle} hiddenFrom="sm" size="sm" />
|
||||
<Header />
|
||||
<Burger
|
||||
opened={opened}
|
||||
onClick={toggleMobile}
|
||||
hiddenFrom="sm"
|
||||
size="sm"
|
||||
/>
|
||||
<Header onSidebarToggle={toggleSidebar} />
|
||||
</Group>
|
||||
</AppShell.Header>
|
||||
|
||||
@@ -43,7 +54,11 @@ function BantuanPage() {
|
||||
</div>
|
||||
</AppShell.Navbar>
|
||||
|
||||
<AppShell.Main bg={mainBgColor}>
|
||||
<AppShell.Main
|
||||
bg={mainBgColor}
|
||||
onClick={handleMainClick}
|
||||
style={{ cursor: sidebarCollapsed ? "default" : "pointer" }}
|
||||
>
|
||||
<HelpPage />
|
||||
</AppShell.Main>
|
||||
</AppShell>
|
||||
|
||||
@@ -1,9 +1,66 @@
|
||||
import { AppShell, Burger, Group, useMantineColorScheme } from "@mantine/core";
|
||||
import { createFileRoute } from "@tanstack/react-router";
|
||||
import BumdesPage from "@/components/bumdes-page";
|
||||
import { Header } from "@/components/header";
|
||||
import { Sidebar } from "@/components/sidebar";
|
||||
import { useSidebarFullscreen } from "@/hooks/use-sidebar-fullscreen";
|
||||
|
||||
export const Route = createFileRoute("/bumdes")({
|
||||
component: RouteComponent,
|
||||
component: BumdesRoute,
|
||||
});
|
||||
|
||||
function RouteComponent() {
|
||||
return <div>Hello "/bumdes"!</div>;
|
||||
function BumdesRoute() {
|
||||
const {
|
||||
opened,
|
||||
toggleMobile,
|
||||
sidebarCollapsed,
|
||||
toggleSidebar,
|
||||
handleMainClick,
|
||||
} = useSidebarFullscreen();
|
||||
const { colorScheme } = useMantineColorScheme();
|
||||
const headerBgColor = colorScheme === "dark" ? "#11192D" : "#19355E";
|
||||
const navbarBgColor = colorScheme === "dark" ? "#11192D" : "white";
|
||||
const mainBgColor = colorScheme === "dark" ? "#11192D" : "#edf3f8ff";
|
||||
|
||||
return (
|
||||
<AppShell
|
||||
header={{ height: 60 }}
|
||||
navbar={{
|
||||
width: 300,
|
||||
breakpoint: "sm",
|
||||
collapsed: { mobile: !opened, desktop: sidebarCollapsed },
|
||||
}}
|
||||
padding="md"
|
||||
>
|
||||
<AppShell.Header bg={headerBgColor}>
|
||||
<Group h="100%" px="md">
|
||||
<Burger
|
||||
opened={opened}
|
||||
onClick={toggleMobile}
|
||||
hiddenFrom="sm"
|
||||
size="sm"
|
||||
/>
|
||||
<Header onSidebarToggle={toggleSidebar} />
|
||||
</Group>
|
||||
</AppShell.Header>
|
||||
|
||||
<AppShell.Navbar
|
||||
p="md"
|
||||
bg={navbarBgColor}
|
||||
style={{ display: "flex", flexDirection: "column" }}
|
||||
>
|
||||
<div style={{ flex: 1, overflowY: "auto" }}>
|
||||
<Sidebar />
|
||||
</div>
|
||||
</AppShell.Navbar>
|
||||
|
||||
<AppShell.Main
|
||||
bg={mainBgColor}
|
||||
onClick={handleMainClick}
|
||||
style={{ cursor: sidebarCollapsed ? "default" : "pointer" }}
|
||||
>
|
||||
<BumdesPage />
|
||||
</AppShell.Main>
|
||||
</AppShell>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import { AppShell, Burger, Group, useMantineColorScheme } from "@mantine/core";
|
||||
import { useDisclosure } from "@mantine/hooks";
|
||||
import { createFileRoute } from "@tanstack/react-router";
|
||||
import { Header } from "@/components/header";
|
||||
import { Sidebar } from "@/components/sidebar";
|
||||
import { useSidebarFullscreen } from "@/hooks/use-sidebar-fullscreen";
|
||||
import DemografiPekerjaan from "../components/demografi-pekerjaan";
|
||||
|
||||
export const Route = createFileRoute("/demografi-pekerjaan")({
|
||||
@@ -10,7 +10,13 @@ export const Route = createFileRoute("/demografi-pekerjaan")({
|
||||
});
|
||||
|
||||
function DemografiPekerjaanPage() {
|
||||
const [opened, { toggle }] = useDisclosure();
|
||||
const {
|
||||
opened,
|
||||
toggleMobile,
|
||||
sidebarCollapsed,
|
||||
toggleSidebar,
|
||||
handleMainClick,
|
||||
} = useSidebarFullscreen();
|
||||
const { colorScheme } = useMantineColorScheme();
|
||||
const headerBgColor = colorScheme === "dark" ? "#11192D" : "#19355E";
|
||||
const navbarBgColor = colorScheme === "dark" ? "#11192D" : "white";
|
||||
@@ -22,14 +28,19 @@ function DemografiPekerjaanPage() {
|
||||
navbar={{
|
||||
width: 300,
|
||||
breakpoint: "sm",
|
||||
collapsed: { mobile: !opened },
|
||||
collapsed: { mobile: !opened, desktop: sidebarCollapsed },
|
||||
}}
|
||||
padding="md"
|
||||
>
|
||||
<AppShell.Header bg={headerBgColor}>
|
||||
<Group h="100%" px="md">
|
||||
<Burger opened={opened} onClick={toggle} hiddenFrom="sm" size="sm" />
|
||||
<Header />
|
||||
<Burger
|
||||
opened={opened}
|
||||
onClick={toggleMobile}
|
||||
hiddenFrom="sm"
|
||||
size="sm"
|
||||
/>
|
||||
<Header onSidebarToggle={toggleSidebar} />
|
||||
</Group>
|
||||
</AppShell.Header>
|
||||
|
||||
@@ -43,7 +54,11 @@ function DemografiPekerjaanPage() {
|
||||
</div>
|
||||
</AppShell.Navbar>
|
||||
|
||||
<AppShell.Main bg={mainBgColor}>
|
||||
<AppShell.Main
|
||||
bg={mainBgColor}
|
||||
onClick={handleMainClick}
|
||||
style={{ cursor: sidebarCollapsed ? "default" : "pointer" }}
|
||||
>
|
||||
<DemografiPekerjaan />
|
||||
</AppShell.Main>
|
||||
</AppShell>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { AppShell, Burger, Group, useMantineColorScheme } from "@mantine/core";
|
||||
import { useDisclosure } from "@mantine/hooks";
|
||||
import { createFileRoute } from "@tanstack/react-router";
|
||||
import { useState } from "react";
|
||||
import { DashboardContent } from "@/components/dashboard-content";
|
||||
import { Header } from "@/components/header";
|
||||
import { Sidebar } from "@/components/sidebar";
|
||||
@@ -11,25 +12,41 @@ export const Route = createFileRoute("/")({
|
||||
|
||||
function DashboardPage() {
|
||||
const [opened, { toggle }] = useDisclosure();
|
||||
const [sidebarCollapsed, setSidebarCollapsed] = useDisclosure(false);
|
||||
const [clickCount, setClickCount] = useState(0);
|
||||
const { colorScheme } = useMantineColorScheme();
|
||||
const headerBgColor = colorScheme === "dark" ? "#11192D" : "#19355E";
|
||||
const navbarBgColor = colorScheme === "dark" ? "#11192D" : "white";
|
||||
const mainBgColor = colorScheme === "dark" ? "#11192D" : "#edf3f8ff";
|
||||
|
||||
const handleMainClick = () => {
|
||||
if (!sidebarCollapsed) {
|
||||
const newCount = clickCount + 1;
|
||||
setClickCount(newCount);
|
||||
|
||||
if (newCount === 2) {
|
||||
setSidebarCollapsed.toggle();
|
||||
setClickCount(0);
|
||||
} else {
|
||||
setTimeout(() => setClickCount(0), 300);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<AppShell
|
||||
header={{ height: 60 }}
|
||||
navbar={{
|
||||
width: 300,
|
||||
breakpoint: "sm",
|
||||
collapsed: { mobile: !opened },
|
||||
collapsed: { mobile: !opened, desktop: sidebarCollapsed },
|
||||
}}
|
||||
padding="md"
|
||||
>
|
||||
<AppShell.Header bg={headerBgColor}>
|
||||
<Group h="100%" px="md">
|
||||
<Burger opened={opened} onClick={toggle} hiddenFrom="sm" size="sm" />
|
||||
<Header />
|
||||
<Header onSidebarToggle={setSidebarCollapsed.toggle} />
|
||||
</Group>
|
||||
</AppShell.Header>
|
||||
|
||||
@@ -43,7 +60,11 @@ function DashboardPage() {
|
||||
</div>
|
||||
</AppShell.Navbar>
|
||||
|
||||
<AppShell.Main bg={mainBgColor}>
|
||||
<AppShell.Main
|
||||
bg={mainBgColor}
|
||||
onClick={handleMainClick}
|
||||
style={{ cursor: sidebarCollapsed ? "default" : "pointer" }}
|
||||
>
|
||||
<DashboardContent />
|
||||
</AppShell.Main>
|
||||
</AppShell>
|
||||
|
||||
@@ -1,16 +1,22 @@
|
||||
import { AppShell, Burger, Group, useMantineColorScheme } from "@mantine/core";
|
||||
import { useDisclosure } from "@mantine/hooks";
|
||||
import { createFileRoute } from "@tanstack/react-router";
|
||||
import { Header } from "@/components/header";
|
||||
import JennaAnalytic from "@/components/jenna-analytic";
|
||||
import { Sidebar } from "@/components/sidebar";
|
||||
import { useSidebarFullscreen } from "@/hooks/use-sidebar-fullscreen";
|
||||
|
||||
export const Route = createFileRoute("/jenna-analytic")({
|
||||
component: JennaAnalyticPage,
|
||||
});
|
||||
|
||||
function JennaAnalyticPage() {
|
||||
const [opened, { toggle }] = useDisclosure();
|
||||
const {
|
||||
opened,
|
||||
toggleMobile,
|
||||
sidebarCollapsed,
|
||||
toggleSidebar,
|
||||
handleMainClick,
|
||||
} = useSidebarFullscreen();
|
||||
const { colorScheme } = useMantineColorScheme();
|
||||
const headerBgColor = colorScheme === "dark" ? "#11192D" : "#19355E";
|
||||
const navbarBgColor = colorScheme === "dark" ? "#11192D" : "white";
|
||||
@@ -22,14 +28,19 @@ function JennaAnalyticPage() {
|
||||
navbar={{
|
||||
width: 300,
|
||||
breakpoint: "sm",
|
||||
collapsed: { mobile: !opened },
|
||||
collapsed: { mobile: !opened, desktop: sidebarCollapsed },
|
||||
}}
|
||||
padding="md"
|
||||
>
|
||||
<AppShell.Header bg={headerBgColor}>
|
||||
<Group h="100%" px="md">
|
||||
<Burger opened={opened} onClick={toggle} hiddenFrom="sm" size="sm" />
|
||||
<Header />
|
||||
<Burger
|
||||
opened={opened}
|
||||
onClick={toggleMobile}
|
||||
hiddenFrom="sm"
|
||||
size="sm"
|
||||
/>
|
||||
<Header onSidebarToggle={toggleSidebar} />
|
||||
</Group>
|
||||
</AppShell.Header>
|
||||
|
||||
@@ -43,7 +54,11 @@ function JennaAnalyticPage() {
|
||||
</div>
|
||||
</AppShell.Navbar>
|
||||
|
||||
<AppShell.Main bg={mainBgColor}>
|
||||
<AppShell.Main
|
||||
bg={mainBgColor}
|
||||
onClick={handleMainClick}
|
||||
style={{ cursor: sidebarCollapsed ? "default" : "pointer" }}
|
||||
>
|
||||
<JennaAnalytic />
|
||||
</AppShell.Main>
|
||||
</AppShell>
|
||||
|
||||
@@ -1,9 +1,66 @@
|
||||
import { AppShell, Burger, Group, useMantineColorScheme } from "@mantine/core";
|
||||
import { createFileRoute } from "@tanstack/react-router";
|
||||
import { Header } from "@/components/header";
|
||||
import KeamananPage from "@/components/keamanan-page";
|
||||
import { Sidebar } from "@/components/sidebar";
|
||||
import { useSidebarFullscreen } from "@/hooks/use-sidebar-fullscreen";
|
||||
|
||||
export const Route = createFileRoute("/keamanan")({
|
||||
component: RouteComponent,
|
||||
component: KeamananRoute,
|
||||
});
|
||||
|
||||
function RouteComponent() {
|
||||
return <div>Hello "/keamanan"!</div>;
|
||||
function KeamananRoute() {
|
||||
const {
|
||||
opened,
|
||||
toggleMobile,
|
||||
sidebarCollapsed,
|
||||
toggleSidebar,
|
||||
handleMainClick,
|
||||
} = useSidebarFullscreen();
|
||||
const { colorScheme } = useMantineColorScheme();
|
||||
const headerBgColor = colorScheme === "dark" ? "#11192D" : "#19355E";
|
||||
const navbarBgColor = colorScheme === "dark" ? "#11192D" : "white";
|
||||
const mainBgColor = colorScheme === "dark" ? "#11192D" : "#edf3f8ff";
|
||||
|
||||
return (
|
||||
<AppShell
|
||||
header={{ height: 60 }}
|
||||
navbar={{
|
||||
width: 300,
|
||||
breakpoint: "sm",
|
||||
collapsed: { mobile: !opened, desktop: sidebarCollapsed },
|
||||
}}
|
||||
padding="md"
|
||||
>
|
||||
<AppShell.Header bg={headerBgColor}>
|
||||
<Group h="100%" px="md">
|
||||
<Burger
|
||||
opened={opened}
|
||||
onClick={toggleMobile}
|
||||
hiddenFrom="sm"
|
||||
size="sm"
|
||||
/>
|
||||
<Header onSidebarToggle={toggleSidebar} />
|
||||
</Group>
|
||||
</AppShell.Header>
|
||||
|
||||
<AppShell.Navbar
|
||||
p="md"
|
||||
bg={navbarBgColor}
|
||||
style={{ display: "flex", flexDirection: "column" }}
|
||||
>
|
||||
<div style={{ flex: 1, overflowY: "auto" }}>
|
||||
<Sidebar />
|
||||
</div>
|
||||
</AppShell.Navbar>
|
||||
|
||||
<AppShell.Main
|
||||
bg={mainBgColor}
|
||||
onClick={handleMainClick}
|
||||
style={{ cursor: sidebarCollapsed ? "default" : "pointer" }}
|
||||
>
|
||||
<KeamananPage />
|
||||
</AppShell.Main>
|
||||
</AppShell>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,16 +1,22 @@
|
||||
import { AppShell, Burger, Group, useMantineColorScheme } from "@mantine/core";
|
||||
import { useDisclosure } from "@mantine/hooks";
|
||||
import { createFileRoute } from "@tanstack/react-router";
|
||||
import { Header } from "@/components/header";
|
||||
import KeuanganAnggaran from "@/components/keuangan-anggaran";
|
||||
import { Sidebar } from "@/components/sidebar";
|
||||
import { useSidebarFullscreen } from "@/hooks/use-sidebar-fullscreen";
|
||||
|
||||
export const Route = createFileRoute("/keuangan-anggaran")({
|
||||
component: KeuanganAnggaranPage,
|
||||
});
|
||||
|
||||
function KeuanganAnggaranPage() {
|
||||
const [opened, { toggle }] = useDisclosure();
|
||||
const {
|
||||
opened,
|
||||
toggleMobile,
|
||||
sidebarCollapsed,
|
||||
toggleSidebar,
|
||||
handleMainClick,
|
||||
} = useSidebarFullscreen();
|
||||
const { colorScheme } = useMantineColorScheme();
|
||||
const headerBgColor = colorScheme === "dark" ? "#11192D" : "#19355E";
|
||||
const navbarBgColor = colorScheme === "dark" ? "#11192D" : "white";
|
||||
@@ -22,14 +28,19 @@ function KeuanganAnggaranPage() {
|
||||
navbar={{
|
||||
width: 300,
|
||||
breakpoint: "sm",
|
||||
collapsed: { mobile: !opened },
|
||||
collapsed: { mobile: !opened, desktop: sidebarCollapsed },
|
||||
}}
|
||||
padding="md"
|
||||
>
|
||||
<AppShell.Header bg={headerBgColor}>
|
||||
<Group h="100%" px="md">
|
||||
<Burger opened={opened} onClick={toggle} hiddenFrom="sm" size="sm" />
|
||||
<Header />
|
||||
<Burger
|
||||
opened={opened}
|
||||
onClick={toggleMobile}
|
||||
hiddenFrom="sm"
|
||||
size="sm"
|
||||
/>
|
||||
<Header onSidebarToggle={toggleSidebar} />
|
||||
</Group>
|
||||
</AppShell.Header>
|
||||
|
||||
@@ -43,7 +54,11 @@ function KeuanganAnggaranPage() {
|
||||
</div>
|
||||
</AppShell.Navbar>
|
||||
|
||||
<AppShell.Main bg={mainBgColor}>
|
||||
<AppShell.Main
|
||||
bg={mainBgColor}
|
||||
onClick={handleMainClick}
|
||||
style={{ cursor: sidebarCollapsed ? "default" : "pointer" }}
|
||||
>
|
||||
<KeuanganAnggaran />
|
||||
</AppShell.Main>
|
||||
</AppShell>
|
||||
|
||||
@@ -1,16 +1,22 @@
|
||||
import { AppShell, Burger, Group, useMantineColorScheme } from "@mantine/core";
|
||||
import { useDisclosure } from "@mantine/hooks";
|
||||
import { createFileRoute } from "@tanstack/react-router";
|
||||
import { Header } from "@/components/header";
|
||||
import KinerjaDivisi from "@/components/kinerja-divisi";
|
||||
import { Sidebar } from "@/components/sidebar";
|
||||
import { useSidebarFullscreen } from "@/hooks/use-sidebar-fullscreen";
|
||||
|
||||
export const Route = createFileRoute("/kinerja-divisi")({
|
||||
component: KinerjaDivisiPage,
|
||||
});
|
||||
|
||||
function KinerjaDivisiPage() {
|
||||
const [opened, { toggle }] = useDisclosure();
|
||||
const {
|
||||
opened,
|
||||
toggleMobile,
|
||||
sidebarCollapsed,
|
||||
toggleSidebar,
|
||||
handleMainClick,
|
||||
} = useSidebarFullscreen();
|
||||
const { colorScheme } = useMantineColorScheme();
|
||||
const headerBgColor = colorScheme === "dark" ? "#11192D" : "#19355E";
|
||||
const navbarBgColor = colorScheme === "dark" ? "#11192D" : "white";
|
||||
@@ -22,14 +28,19 @@ function KinerjaDivisiPage() {
|
||||
navbar={{
|
||||
width: 300,
|
||||
breakpoint: "sm",
|
||||
collapsed: { mobile: !opened },
|
||||
collapsed: { mobile: !opened, desktop: sidebarCollapsed },
|
||||
}}
|
||||
padding="md"
|
||||
>
|
||||
<AppShell.Header bg={headerBgColor}>
|
||||
<Group h="100%" px="md">
|
||||
<Burger opened={opened} onClick={toggle} hiddenFrom="sm" size="sm" />
|
||||
<Header />
|
||||
<Burger
|
||||
opened={opened}
|
||||
onClick={toggleMobile}
|
||||
hiddenFrom="sm"
|
||||
size="sm"
|
||||
/>
|
||||
<Header onSidebarToggle={toggleSidebar} />
|
||||
</Group>
|
||||
</AppShell.Header>
|
||||
|
||||
@@ -43,7 +54,11 @@ function KinerjaDivisiPage() {
|
||||
</div>
|
||||
</AppShell.Navbar>
|
||||
|
||||
<AppShell.Main bg={mainBgColor}>
|
||||
<AppShell.Main
|
||||
bg={mainBgColor}
|
||||
onClick={handleMainClick}
|
||||
style={{ cursor: sidebarCollapsed ? "default" : "pointer" }}
|
||||
>
|
||||
<KinerjaDivisi />
|
||||
</AppShell.Main>
|
||||
</AppShell>
|
||||
|
||||
@@ -1,16 +1,22 @@
|
||||
import { AppShell, Burger, Group, useMantineColorScheme } from "@mantine/core";
|
||||
import { useDisclosure } from "@mantine/hooks";
|
||||
import { createFileRoute } from "@tanstack/react-router";
|
||||
import { Header } from "@/components/header";
|
||||
import PengaduanLayananPublik from "@/components/pengaduan-layanan-publik";
|
||||
import { Sidebar } from "@/components/sidebar";
|
||||
import { useSidebarFullscreen } from "@/hooks/use-sidebar-fullscreen";
|
||||
|
||||
export const Route = createFileRoute("/pengaduan-layanan-publik")({
|
||||
component: PengaduanLayananPublikPage,
|
||||
});
|
||||
|
||||
function PengaduanLayananPublikPage() {
|
||||
const [opened, { toggle }] = useDisclosure();
|
||||
const {
|
||||
opened,
|
||||
toggleMobile,
|
||||
sidebarCollapsed,
|
||||
toggleSidebar,
|
||||
handleMainClick,
|
||||
} = useSidebarFullscreen();
|
||||
const { colorScheme } = useMantineColorScheme();
|
||||
const headerBgColor = colorScheme === "dark" ? "#11192D" : "#19355E";
|
||||
const navbarBgColor = colorScheme === "dark" ? "#11192D" : "white";
|
||||
@@ -22,14 +28,19 @@ function PengaduanLayananPublikPage() {
|
||||
navbar={{
|
||||
width: 300,
|
||||
breakpoint: "sm",
|
||||
collapsed: { mobile: !opened },
|
||||
collapsed: { mobile: !opened, desktop: sidebarCollapsed },
|
||||
}}
|
||||
padding="md"
|
||||
>
|
||||
<AppShell.Header bg={headerBgColor}>
|
||||
<Group h="100%" px="md">
|
||||
<Burger opened={opened} onClick={toggle} hiddenFrom="sm" size="sm" />
|
||||
<Header />
|
||||
<Burger
|
||||
opened={opened}
|
||||
onClick={toggleMobile}
|
||||
hiddenFrom="sm"
|
||||
size="sm"
|
||||
/>
|
||||
<Header onSidebarToggle={toggleSidebar} />
|
||||
</Group>
|
||||
</AppShell.Header>
|
||||
|
||||
@@ -43,7 +54,11 @@ function PengaduanLayananPublikPage() {
|
||||
</div>
|
||||
</AppShell.Navbar>
|
||||
|
||||
<AppShell.Main bg={mainBgColor}>
|
||||
<AppShell.Main
|
||||
bg={mainBgColor}
|
||||
onClick={handleMainClick}
|
||||
style={{ cursor: sidebarCollapsed ? "default" : "pointer" }}
|
||||
>
|
||||
<PengaduanLayananPublik />
|
||||
</AppShell.Main>
|
||||
</AppShell>
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
import { createFileRoute } from "@tanstack/react-router";
|
||||
import AksesDanTimSettings from "@/components/pengaturan/akses-dan-tim";
|
||||
|
||||
export const Route = createFileRoute("/pengaturan/akses-dan-tim")({
|
||||
component: RouteComponent,
|
||||
});
|
||||
|
||||
function RouteComponent() {
|
||||
return <div>Hello "/pengaturan/akses-dan-tim"!</div>;
|
||||
return <AksesDanTimSettings />;
|
||||
}
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
import { createFileRoute } from "@tanstack/react-router";
|
||||
import KeamananSettings from "@/components/pengaturan/keamanan";
|
||||
|
||||
export const Route = createFileRoute("/pengaturan/keamanan")({
|
||||
component: RouteComponent,
|
||||
});
|
||||
|
||||
function RouteComponent() {
|
||||
return <div>Hello "/pengaturan/keamanan"!</div>;
|
||||
return <KeamananSettings />;
|
||||
}
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
import { createFileRoute } from "@tanstack/react-router";
|
||||
import NotifikasiSettings from "@/components/pengaturan/notifikasi";
|
||||
|
||||
export const Route = createFileRoute("/pengaturan/notifikasi")({
|
||||
component: RouteComponent,
|
||||
});
|
||||
|
||||
function RouteComponent() {
|
||||
return <div>Hello "/pengaturan/notifikasi"!</div>;
|
||||
return <NotifikasiSettings />;
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { AppShell, Burger, Group, useMantineColorScheme } from "@mantine/core";
|
||||
import { useDisclosure, useMediaQuery } from "@mantine/hooks";
|
||||
import { useMediaQuery } from "@mantine/hooks";
|
||||
import {
|
||||
createFileRoute,
|
||||
Outlet,
|
||||
@@ -8,13 +8,20 @@ import {
|
||||
import { useEffect } from "react";
|
||||
import { Header } from "@/components/header";
|
||||
import { Sidebar } from "@/components/sidebar";
|
||||
import { useSidebarFullscreen } from "@/hooks/use-sidebar-fullscreen";
|
||||
|
||||
export const Route = createFileRoute("/pengaturan")({
|
||||
component: PengaturanLayout,
|
||||
});
|
||||
|
||||
function PengaturanLayout() {
|
||||
const [opened, { toggle, close }] = useDisclosure();
|
||||
const {
|
||||
opened,
|
||||
toggleMobile,
|
||||
sidebarCollapsed,
|
||||
toggleSidebar,
|
||||
handleMainClick,
|
||||
} = useSidebarFullscreen();
|
||||
const { colorScheme } = useMantineColorScheme();
|
||||
|
||||
const isMobile = useMediaQuery("(max-width: 48em)");
|
||||
@@ -27,9 +34,9 @@ function PengaturanLayout() {
|
||||
// Auto close navbar on route change (mobile only)
|
||||
useEffect(() => {
|
||||
if (isMobile && opened) {
|
||||
close();
|
||||
toggleMobile();
|
||||
}
|
||||
}, [routerState.location.pathname, isMobile, opened, close]);
|
||||
}, [routerState.location.pathname, isMobile, opened, toggleMobile]);
|
||||
|
||||
return (
|
||||
<AppShell
|
||||
@@ -37,14 +44,19 @@ function PengaturanLayout() {
|
||||
navbar={{
|
||||
width: 300,
|
||||
breakpoint: "sm",
|
||||
collapsed: { mobile: !opened },
|
||||
collapsed: { mobile: !opened, desktop: sidebarCollapsed },
|
||||
}}
|
||||
padding="md"
|
||||
>
|
||||
<AppShell.Header bg={headerBgColor}>
|
||||
<Group h="100%" px="lg" align="center" wrap="nowrap">
|
||||
<Burger opened={opened} onClick={toggle} hiddenFrom="sm" size="sm" />
|
||||
<Header />
|
||||
<Burger
|
||||
opened={opened}
|
||||
onClick={toggleMobile}
|
||||
hiddenFrom="sm"
|
||||
size="sm"
|
||||
/>
|
||||
<Header onSidebarToggle={toggleSidebar} />
|
||||
</Group>
|
||||
</AppShell.Header>
|
||||
|
||||
@@ -58,7 +70,11 @@ function PengaturanLayout() {
|
||||
</div>
|
||||
</AppShell.Navbar>
|
||||
|
||||
<AppShell.Main bg={mainBgColor}>
|
||||
<AppShell.Main
|
||||
bg={mainBgColor}
|
||||
onClick={handleMainClick}
|
||||
style={{ cursor: sidebarCollapsed ? "default" : "pointer" }}
|
||||
>
|
||||
<div className="p-2">
|
||||
<Outlet />
|
||||
</div>
|
||||
|
||||
@@ -1,9 +1,66 @@
|
||||
import { AppShell, Burger, Group, useMantineColorScheme } from "@mantine/core";
|
||||
import { createFileRoute } from "@tanstack/react-router";
|
||||
import { Header } from "@/components/header";
|
||||
import { Sidebar } from "@/components/sidebar";
|
||||
import SosialPage from "@/components/sosial-page";
|
||||
import { useSidebarFullscreen } from "@/hooks/use-sidebar-fullscreen";
|
||||
|
||||
export const Route = createFileRoute("/sosial")({
|
||||
component: RouteComponent,
|
||||
component: SosialRoute,
|
||||
});
|
||||
|
||||
function RouteComponent() {
|
||||
return <div>Hello "/sosial"!</div>;
|
||||
function SosialRoute() {
|
||||
const {
|
||||
opened,
|
||||
toggleMobile,
|
||||
sidebarCollapsed,
|
||||
toggleSidebar,
|
||||
handleMainClick,
|
||||
} = useSidebarFullscreen();
|
||||
const { colorScheme } = useMantineColorScheme();
|
||||
const headerBgColor = colorScheme === "dark" ? "#11192D" : "#19355E";
|
||||
const navbarBgColor = colorScheme === "dark" ? "#11192D" : "white";
|
||||
const mainBgColor = colorScheme === "dark" ? "#11192D" : "#edf3f8ff";
|
||||
|
||||
return (
|
||||
<AppShell
|
||||
header={{ height: 60 }}
|
||||
navbar={{
|
||||
width: 300,
|
||||
breakpoint: "sm",
|
||||
collapsed: { mobile: !opened, desktop: sidebarCollapsed },
|
||||
}}
|
||||
padding="md"
|
||||
>
|
||||
<AppShell.Header bg={headerBgColor}>
|
||||
<Group h="100%" px="md">
|
||||
<Burger
|
||||
opened={opened}
|
||||
onClick={toggleMobile}
|
||||
hiddenFrom="sm"
|
||||
size="sm"
|
||||
/>
|
||||
<Header onSidebarToggle={toggleSidebar} />
|
||||
</Group>
|
||||
</AppShell.Header>
|
||||
|
||||
<AppShell.Navbar
|
||||
p="md"
|
||||
bg={navbarBgColor}
|
||||
style={{ display: "flex", flexDirection: "column" }}
|
||||
>
|
||||
<div style={{ flex: 1, overflowY: "auto" }}>
|
||||
<Sidebar />
|
||||
</div>
|
||||
</AppShell.Navbar>
|
||||
|
||||
<AppShell.Main
|
||||
bg={mainBgColor}
|
||||
onClick={handleMainClick}
|
||||
style={{ cursor: sidebarCollapsed ? "default" : "pointer" }}
|
||||
>
|
||||
<SosialPage />
|
||||
</AppShell.Main>
|
||||
</AppShell>
|
||||
);
|
||||
}
|
||||
|
||||
30
src/store/sosial.ts
Normal file
30
src/store/sosial.ts
Normal file
@@ -0,0 +1,30 @@
|
||||
import { proxy } from "valtio";
|
||||
|
||||
type SelectedYear = string;
|
||||
|
||||
interface SosialState {
|
||||
selectedYear: SelectedYear;
|
||||
filters: {
|
||||
dusun: string | null;
|
||||
kategori: string | null;
|
||||
};
|
||||
}
|
||||
|
||||
export const sosialStore = proxy<SosialState>({
|
||||
selectedYear: new Date().getFullYear().toString(),
|
||||
filters: {
|
||||
dusun: null,
|
||||
kategori: null,
|
||||
},
|
||||
});
|
||||
|
||||
export const setYear = (year: SelectedYear) => {
|
||||
sosialStore.selectedYear = year;
|
||||
};
|
||||
|
||||
export const setFilter = (
|
||||
key: keyof SosialState["filters"],
|
||||
value: string | null,
|
||||
) => {
|
||||
sosialStore.filters[key] = value;
|
||||
};
|
||||
30
src/store/umkm.ts
Normal file
30
src/store/umkm.ts
Normal file
@@ -0,0 +1,30 @@
|
||||
import { proxy } from "valtio";
|
||||
|
||||
type TimeRange = "minggu" | "bulan";
|
||||
|
||||
interface UmkmState {
|
||||
selectedRange: TimeRange;
|
||||
filters: {
|
||||
kategori: string | null;
|
||||
umkm: string | null;
|
||||
};
|
||||
}
|
||||
|
||||
export const umkmStore = proxy<UmkmState>({
|
||||
selectedRange: "bulan",
|
||||
filters: {
|
||||
kategori: null,
|
||||
umkm: null,
|
||||
},
|
||||
});
|
||||
|
||||
export const setRange = (range: TimeRange) => {
|
||||
umkmStore.selectedRange = range;
|
||||
};
|
||||
|
||||
export const setFilter = (
|
||||
key: keyof UmkmState["filters"],
|
||||
value: string | null,
|
||||
) => {
|
||||
umkmStore.filters[key] = value;
|
||||
};
|
||||
Reference in New Issue
Block a user