fix: make dashboard public and remove admin-only restriction from main pages
- Make homepage (/) accessible without authentication - Allow all authenticated users (user & admin) to access main pages: - /kinerja-divisi, /pengaduan, /jenna, /demografi - /keuangan, /bumdes, /sosial, /keamanan - /bantuan, /pengaturan - Reserve admin-only access for /admin/* routes - Update auth middleware to handle public routes properly Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
This commit is contained in:
@@ -1,13 +1,23 @@
|
||||
import {
|
||||
Badge,
|
||||
Button,
|
||||
Card,
|
||||
Grid,
|
||||
GridCol,
|
||||
Group,
|
||||
Select,
|
||||
Stack,
|
||||
Table,
|
||||
Text,
|
||||
Title,
|
||||
useMantineColorScheme,
|
||||
} from "@mantine/core";
|
||||
import {
|
||||
IconBuildingStore,
|
||||
IconCategory,
|
||||
IconCurrency,
|
||||
IconUsers,
|
||||
IconTrendingUp,
|
||||
IconTrendingDown,
|
||||
IconChevronDown,
|
||||
} from "@tabler/icons-react";
|
||||
import { useMantineColorScheme } from "@mantine/core";
|
||||
import { useState } from "react";
|
||||
|
||||
const BumdesPage = () => {
|
||||
@@ -15,98 +25,69 @@ const BumdesPage = () => {
|
||||
const dark = colorScheme === "dark";
|
||||
|
||||
const [timeFilter, setTimeFilter] = useState<string>("bulan");
|
||||
const [categoryFilter, setCategoryFilter] = useState<string>("semua");
|
||||
|
||||
// KPI Data
|
||||
// Sample data for KPI cards
|
||||
const kpiData = [
|
||||
{
|
||||
title: "UMKM Aktif",
|
||||
value: "45",
|
||||
subtitle: "Beroperasi",
|
||||
icon: IconUsers,
|
||||
value: 45,
|
||||
icon: <IconUsers size={24} />,
|
||||
color: "darmasaba-blue",
|
||||
},
|
||||
{
|
||||
title: "UMKM Terdaftar",
|
||||
value: "68",
|
||||
subtitle: "Total terdaftar",
|
||||
icon: IconBuildingStore,
|
||||
value: 68,
|
||||
icon: <IconBuildingStore size={24} />,
|
||||
color: "darmasaba-success",
|
||||
},
|
||||
{
|
||||
title: "Omzet",
|
||||
value: "48 JT",
|
||||
subtitle: "Bulan ini",
|
||||
icon: IconCurrency,
|
||||
value: "Rp 48.000.000",
|
||||
icon: <IconCurrency size={24} />,
|
||||
color: "darmasaba-warning",
|
||||
},
|
||||
{
|
||||
title: "Kategori UMKM",
|
||||
value: "34",
|
||||
subtitle: "Jenis produk",
|
||||
icon: IconCategory,
|
||||
value: 34,
|
||||
icon: <IconCategory size={24} />,
|
||||
color: "darmasaba-danger",
|
||||
},
|
||||
];
|
||||
|
||||
// Mini stats data
|
||||
const miniStats = [
|
||||
{
|
||||
title: "Total Penjualan",
|
||||
value: "Rp 30.900.000",
|
||||
subtitle: "+18% vs bulan lalu",
|
||||
isPositive: true,
|
||||
},
|
||||
{
|
||||
title: "Produk Aktif",
|
||||
value: "7",
|
||||
subtitle: "Kategori produk",
|
||||
},
|
||||
{
|
||||
title: "Total Transaksi",
|
||||
value: "500",
|
||||
subtitle: "Transaksi bulan ini",
|
||||
},
|
||||
];
|
||||
|
||||
// Top 3 products data
|
||||
// Sample data for top products
|
||||
const topProducts = [
|
||||
{
|
||||
rank: 1,
|
||||
name: "Beras Premium Organik",
|
||||
umkmOwner: "Kelompok Tani Subak",
|
||||
sales: "Rp 8.500.000",
|
||||
volume: "650 Kg Terjual",
|
||||
growth: "+15%",
|
||||
umkmOwner: "Warung Pak Joko",
|
||||
growth: "+12%",
|
||||
},
|
||||
{
|
||||
rank: 2,
|
||||
name: "Keripik Singkong",
|
||||
umkmOwner: "Ibu Sari Snack",
|
||||
sales: "Rp 4.200.000",
|
||||
volume: "320 Kg Terjual",
|
||||
growth: "+8%",
|
||||
},
|
||||
{
|
||||
rank: 3,
|
||||
name: "Madu Alami",
|
||||
umkmOwner: "Peternakan Lebah",
|
||||
sales: "Rp 3.750.000",
|
||||
volume: "150 Liter Terjual",
|
||||
growth: "+5%",
|
||||
},
|
||||
];
|
||||
|
||||
// Product sales data
|
||||
// Sample data for product sales
|
||||
const productSales = [
|
||||
{
|
||||
produk: "Beras Premium Organik",
|
||||
umkm: "Kelompok Tani Subak",
|
||||
penjualanBulanIni: "Rp 8.500.000",
|
||||
bulanLalu: "Rp 7.400.000",
|
||||
trend: 15,
|
||||
bulanLalu: "Rp 8.500.000",
|
||||
trend: 10,
|
||||
volume: "650 Kg",
|
||||
stok: "850 Kg",
|
||||
},
|
||||
{
|
||||
produk: "Keripik Singkong",
|
||||
umkm: "Ibu Sari Snack",
|
||||
penjualanBulanIni: "Rp 4.200.000",
|
||||
bulanLalu: "Rp 3.800.000",
|
||||
trend: 10,
|
||||
@@ -115,7 +96,6 @@ const BumdesPage = () => {
|
||||
},
|
||||
{
|
||||
produk: "Madu Alami",
|
||||
umkm: "Peternakan Lebah",
|
||||
penjualanBulanIni: "Rp 3.750.000",
|
||||
bulanLalu: "Rp 4.100.000",
|
||||
trend: -8,
|
||||
@@ -124,7 +104,6 @@ const BumdesPage = () => {
|
||||
},
|
||||
{
|
||||
produk: "Kecap Tradisional",
|
||||
umkm: "Bu Darmi",
|
||||
penjualanBulanIni: "Rp 2.800.000",
|
||||
bulanLalu: "Rp 2.500.000",
|
||||
trend: 12,
|
||||
@@ -133,457 +112,278 @@ const BumdesPage = () => {
|
||||
},
|
||||
];
|
||||
|
||||
const cardStyle = {
|
||||
backgroundColor: dark ? "#1E293B" : "white",
|
||||
border: `1px solid ${dark ? "#1E293B" : "white"}`,
|
||||
};
|
||||
|
||||
const textStyle = {
|
||||
color: dark ? "white" : "#1F2937",
|
||||
};
|
||||
|
||||
const subtitleStyle = {
|
||||
color: dark ? "#9CA3AF" : "#6B7280",
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className="min-h-screen"
|
||||
style={{
|
||||
backgroundColor: dark ? "#0F172A" : "#F3F4F6",
|
||||
minHeight: "100vh",
|
||||
padding: "1.5rem",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="max-w-7xl mx-auto"
|
||||
style={{
|
||||
maxWidth: "80rem",
|
||||
marginLeft: "auto",
|
||||
marginRight: "auto",
|
||||
}}
|
||||
>
|
||||
{/* Row 1: Top 4 Metrics Cards */}
|
||||
<div
|
||||
className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6"
|
||||
style={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: "repeat(4, 1fr)",
|
||||
gap: "1.5rem",
|
||||
marginBottom: "1.5rem",
|
||||
}}
|
||||
>
|
||||
{kpiData.map((kpi, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="rounded-xl shadow-sm p-6"
|
||||
style={{
|
||||
...cardStyle,
|
||||
borderRadius: "12px",
|
||||
boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
|
||||
padding: "1.5rem",
|
||||
}}
|
||||
<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" }}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex-1">
|
||||
<h3
|
||||
className="text-sm font-medium mb-1"
|
||||
style={subtitleStyle}
|
||||
>
|
||||
<Group justify="space-between" align="center">
|
||||
<Stack gap={0}>
|
||||
<Text size="sm" c={dark ? "dark.3" : "dimmed"}>
|
||||
{kpi.title}
|
||||
</h3>
|
||||
<p
|
||||
className="text-3xl font-bold mb-1"
|
||||
style={textStyle}
|
||||
>
|
||||
{kpi.value}
|
||||
</p>
|
||||
<p
|
||||
className="text-xs"
|
||||
style={subtitleStyle}
|
||||
>
|
||||
{kpi.subtitle}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex-shrink-0 ml-4">
|
||||
<div
|
||||
className="w-12 h-12 rounded-full flex items-center justify-center text-white"
|
||||
style={{ backgroundColor: "#1F3A5F" }}
|
||||
>
|
||||
<kpi.icon size={24} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</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>
|
||||
|
||||
{/* Row 2: Sales Update Header */}
|
||||
<div
|
||||
className="rounded-xl shadow-sm mb-6 overflow-hidden"
|
||||
style={{
|
||||
...cardStyle,
|
||||
borderRadius: "12px",
|
||||
boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
|
||||
marginBottom: "1.5rem",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="px-6 py-4 flex items-center justify-between"
|
||||
style={{ backgroundColor: "#1F3A5F" }}
|
||||
>
|
||||
<h3 className="text-lg font-semibold text-white">
|
||||
Update Penjualan Produk
|
||||
</h3>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => setTimeFilter("minggu")}
|
||||
className={`px-4 py-2 rounded-full text-sm font-medium transition-colors ${
|
||||
timeFilter === "minggu"
|
||||
? "bg-white text-[#1F3A5F]"
|
||||
: "bg-white/20 text-white hover:bg-white/30"
|
||||
}`}
|
||||
>
|
||||
Minggu ini
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setTimeFilter("bulan")}
|
||||
className={`px-4 py-2 rounded-full text-sm font-medium transition-colors ${
|
||||
timeFilter === "bulan"
|
||||
? "bg-white text-[#1F3A5F]"
|
||||
: "bg-white/20 text-white hover:bg-white/30"
|
||||
}`}
|
||||
>
|
||||
Bulan ini
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Row 3: Main Content Grid */}
|
||||
<div
|
||||
className="grid grid-cols-1 lg:grid-cols-10 gap-6"
|
||||
style={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: "repeat(10, 1fr)",
|
||||
gap: "1.5rem",
|
||||
}}
|
||||
>
|
||||
{/* Left Column (30%) */}
|
||||
<div className="lg:col-span-3 space-y-6">
|
||||
{/* Produk Unggulan Section */}
|
||||
<div
|
||||
className="rounded-xl shadow-sm p-6"
|
||||
style={{
|
||||
...cardStyle,
|
||||
borderRadius: "12px",
|
||||
boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
|
||||
padding: "1.5rem",
|
||||
}}
|
||||
{/* 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"
|
||||
>
|
||||
<h3
|
||||
className="text-lg font-semibold mb-4"
|
||||
style={textStyle}
|
||||
>
|
||||
Produk Unggulan
|
||||
</h3>
|
||||
Minggu ini
|
||||
</Button>
|
||||
<Button
|
||||
variant={timeFilter === "bulan" ? "filled" : "light"}
|
||||
onClick={() => setTimeFilter("bulan")}
|
||||
color="darmasaba-blue"
|
||||
>
|
||||
Bulan ini
|
||||
</Button>
|
||||
</Group>
|
||||
</Group>
|
||||
</Card>
|
||||
|
||||
{/* Mini Stats Cards */}
|
||||
<div className="space-y-4 mb-6">
|
||||
{miniStats.map((stat, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="p-4 rounded-lg"
|
||||
style={{
|
||||
backgroundColor: dark ? "#334155" : "#F9FAFB",
|
||||
}}
|
||||
<Grid gutter="md">
|
||||
{/* Produk Unggulan (Left Column) */}
|
||||
<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"
|
||||
>
|
||||
<p
|
||||
className="text-sm font-medium mb-1"
|
||||
style={subtitleStyle}
|
||||
<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"}
|
||||
>
|
||||
{stat.title}
|
||||
</p>
|
||||
<p
|
||||
className="text-xl font-bold"
|
||||
style={textStyle}
|
||||
>
|
||||
{stat.value}
|
||||
</p>
|
||||
{stat.subtitle && (
|
||||
<p
|
||||
className="text-xs mt-1"
|
||||
style={
|
||||
stat.isPositive
|
||||
? { color: "#22C55E" }
|
||||
: subtitleStyle
|
||||
{product.growth}
|
||||
</Badge>
|
||||
</Group>
|
||||
))}
|
||||
</Stack>
|
||||
</Card>
|
||||
</Stack>
|
||||
</GridCol>
|
||||
|
||||
{/* Detail Penjualan Produk (Right Column) */}
|
||||
<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"
|
||||
}
|
||||
>
|
||||
{stat.subtitle}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
{product.stok}
|
||||
</Badge>
|
||||
</Table.Td>
|
||||
<Table.Td>
|
||||
<Button
|
||||
variant="subtle"
|
||||
size="compact-sm"
|
||||
color="darmasaba-blue"
|
||||
>
|
||||
Detail
|
||||
</Button>
|
||||
</Table.Td>
|
||||
</Table.Tr>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Top 3 Products */}
|
||||
<h4
|
||||
className="text-base font-semibold mb-4"
|
||||
style={textStyle}
|
||||
>
|
||||
Top 3 Produk Terlaris
|
||||
</h4>
|
||||
<div className="space-y-4">
|
||||
{topProducts.map((product) => (
|
||||
<div
|
||||
key={product.rank}
|
||||
className="flex items-start gap-3 p-3 rounded-lg"
|
||||
style={{
|
||||
backgroundColor: dark ? "#334155" : "#F9FAFB",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="w-8 h-8 rounded-full flex items-center justify-center text-white font-bold text-sm flex-shrink-0"
|
||||
style={{
|
||||
backgroundColor:
|
||||
product.rank === 1
|
||||
? "#FFD700"
|
||||
: product.rank === 2
|
||||
? "#C0C0C0"
|
||||
: "#CD7F32",
|
||||
}}
|
||||
>
|
||||
#{product.rank}
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<p
|
||||
className="text-sm font-medium"
|
||||
style={textStyle}
|
||||
>
|
||||
{product.name}
|
||||
</p>
|
||||
<p
|
||||
className="text-xs mt-1"
|
||||
style={subtitleStyle}
|
||||
>
|
||||
{product.umkmOwner}
|
||||
</p>
|
||||
<div className="flex items-center justify-between mt-2">
|
||||
<p className="text-xs font-medium" style={{ color: "#22C55E" }}>
|
||||
{product.sales}
|
||||
</p>
|
||||
<p
|
||||
className="text-xs"
|
||||
style={{ color: "#22C55E" }}
|
||||
>
|
||||
{product.growth}
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-xs mt-1" style={subtitleStyle}>
|
||||
{product.volume}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Column (70%) */}
|
||||
<div className="lg:col-span-7">
|
||||
<div
|
||||
className="rounded-xl shadow-sm p-6"
|
||||
style={{
|
||||
...cardStyle,
|
||||
borderRadius: "12px",
|
||||
boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
|
||||
padding: "1.5rem",
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h3
|
||||
className="text-lg font-semibold"
|
||||
style={textStyle}
|
||||
>
|
||||
Detail Penjualan Produk
|
||||
</h3>
|
||||
<div className="relative">
|
||||
<select
|
||||
value={categoryFilter}
|
||||
onChange={(e) => setCategoryFilter(e.target.value)}
|
||||
className="appearance-none px-4 py-2 pr-8 rounded-lg text-sm font-medium border-0 focus:ring-2 focus:ring-[#1F3A5F] cursor-pointer"
|
||||
style={{
|
||||
backgroundColor: dark ? "#334155" : "#F9FAFB",
|
||||
color: dark ? "white" : "#1F2937",
|
||||
}}
|
||||
>
|
||||
<option value="semua">Semua Kategori</option>
|
||||
<option value="makanan">Makanan</option>
|
||||
<option value="minuman">Minuman</option>
|
||||
<option value="kerajinan">Kerajinan</option>
|
||||
</select>
|
||||
<IconChevronDown
|
||||
size={16}
|
||||
className="absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none"
|
||||
style={{ color: dark ? "#9CA3AF" : "#6B7280" }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Data Table */}
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr
|
||||
style={{
|
||||
borderBottom: `2px solid ${dark ? "#334155" : "#E5E7EB"}`,
|
||||
}}
|
||||
>
|
||||
<th
|
||||
className="text-left py-3 px-4 text-sm font-medium"
|
||||
style={subtitleStyle}
|
||||
>
|
||||
Produk
|
||||
</th>
|
||||
<th
|
||||
className="text-left py-3 px-4 text-sm font-medium"
|
||||
style={subtitleStyle}
|
||||
>
|
||||
Penjualan Bulan Ini
|
||||
</th>
|
||||
<th
|
||||
className="text-left py-3 px-4 text-sm font-medium"
|
||||
style={subtitleStyle}
|
||||
>
|
||||
Bulan Lalu
|
||||
</th>
|
||||
<th
|
||||
className="text-left py-3 px-4 text-sm font-medium"
|
||||
style={subtitleStyle}
|
||||
>
|
||||
Trend
|
||||
</th>
|
||||
<th
|
||||
className="text-left py-3 px-4 text-sm font-medium"
|
||||
style={subtitleStyle}
|
||||
>
|
||||
Volume
|
||||
</th>
|
||||
<th
|
||||
className="text-left py-3 px-4 text-sm font-medium"
|
||||
style={subtitleStyle}
|
||||
>
|
||||
Stok
|
||||
</th>
|
||||
<th
|
||||
className="text-left py-3 px-4 text-sm font-medium"
|
||||
style={subtitleStyle}
|
||||
>
|
||||
Aksi
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{productSales.map((product, index) => (
|
||||
<tr
|
||||
key={index}
|
||||
style={{
|
||||
borderBottom: `1px solid ${dark ? "#334155" : "#F3F4F6"}`,
|
||||
}}
|
||||
>
|
||||
<td className="py-4 px-4">
|
||||
<p
|
||||
className="text-sm font-medium"
|
||||
style={textStyle}
|
||||
>
|
||||
{product.produk}
|
||||
</p>
|
||||
<p
|
||||
className="text-xs mt-1"
|
||||
style={subtitleStyle}
|
||||
>
|
||||
{product.umkm}
|
||||
</p>
|
||||
</td>
|
||||
<td className="py-4 px-4">
|
||||
<p
|
||||
className="text-sm font-medium"
|
||||
style={textStyle}
|
||||
>
|
||||
{product.penjualanBulanIni}
|
||||
</p>
|
||||
</td>
|
||||
<td className="py-4 px-4">
|
||||
<p
|
||||
className="text-sm"
|
||||
style={subtitleStyle}
|
||||
>
|
||||
{product.bulanLalu}
|
||||
</p>
|
||||
</td>
|
||||
<td className="py-4 px-4">
|
||||
<div
|
||||
className="flex items-center gap-1 text-sm font-medium"
|
||||
style={{
|
||||
color: product.trend >= 0 ? "#22C55E" : "#EF4444",
|
||||
}}
|
||||
>
|
||||
{product.trend >= 0 ? (
|
||||
<IconTrendingUp size={16} />
|
||||
) : (
|
||||
<IconTrendingDown size={16} />
|
||||
)}
|
||||
{product.trend >= 0 ? "+" : ""}
|
||||
{product.trend}%
|
||||
</div>
|
||||
</td>
|
||||
<td className="py-4 px-4">
|
||||
<p
|
||||
className="text-sm"
|
||||
style={textStyle}
|
||||
>
|
||||
{product.volume}
|
||||
</p>
|
||||
</td>
|
||||
<td className="py-4 px-4">
|
||||
<span
|
||||
className="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium"
|
||||
style={{
|
||||
backgroundColor: parseInt(product.stok) > 200 ? "#DCFCE7" : "#FEE2E2",
|
||||
color: parseInt(product.stok) > 200 ? "#166534" : "#991B1B",
|
||||
}}
|
||||
>
|
||||
{product.stok}
|
||||
</span>
|
||||
</td>
|
||||
<td className="py-4 px-4">
|
||||
<button
|
||||
className="px-3 py-1.5 rounded-lg text-sm font-medium transition-colors"
|
||||
style={{
|
||||
backgroundColor: "#1F3A5F",
|
||||
color: "white",
|
||||
}}
|
||||
onMouseEnter={(e) =>
|
||||
(e.currentTarget.style.backgroundColor = "#2d4a6f")
|
||||
}
|
||||
onMouseLeave={(e) =>
|
||||
(e.currentTarget.style.backgroundColor = "#1F3A5F")
|
||||
}
|
||||
>
|
||||
Detail
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Table.Tbody>
|
||||
</Table>
|
||||
</Card>
|
||||
</GridCol>
|
||||
</Grid>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
export default BumdesPage;
|
||||
export default BumdesPage;
|
||||
@@ -1,5 +1,4 @@
|
||||
import {
|
||||
Briefcase,
|
||||
Calendar,
|
||||
CheckCircle,
|
||||
FileText,
|
||||
@@ -28,9 +27,7 @@ import {
|
||||
Card, // Added for icon containers
|
||||
Grid,
|
||||
Group,
|
||||
Image,
|
||||
Progress,
|
||||
SimpleGrid,
|
||||
Stack,
|
||||
Text,
|
||||
ThemeIcon,
|
||||
@@ -69,19 +66,6 @@ const eventData = [
|
||||
{ date: "19 Oktober 2025", title: "Rapat Koordinasi" },
|
||||
];
|
||||
|
||||
const apbdesData = [
|
||||
{ name: "Belanja", value: 390, label: "390M" },
|
||||
{ name: "Pendapatan", value: 470, label: "470M" },
|
||||
{ name: "Pembiayaan", value: 290, label: "290M" },
|
||||
];
|
||||
|
||||
const sdgsData = [
|
||||
{ label: "Desa Berenergi Bersih Dan Terbarukan", value: 99.64, image: "/SDGS-7.png" },
|
||||
{ label: "Desa Damai Berkeadilan", value: 78.65, image: "/SDGS-16.png" },
|
||||
{ label: "Desa Sehat Dan Sejahtera", value: 77.37, image: "/SDGS-3.png" },
|
||||
{ label: "Desa Tanpa Kemiskinan", value: 52.62, image: "/SDGS-1.png" }
|
||||
];
|
||||
|
||||
export function DashboardContent() {
|
||||
const { colorScheme } = useMantineColorScheme();
|
||||
const dark = colorScheme === "dark";
|
||||
@@ -119,7 +103,7 @@ export function DashboardContent() {
|
||||
variant="filled"
|
||||
size="xl"
|
||||
radius="xl"
|
||||
color={dark ? "gray" : "darmasaba-navy"}
|
||||
color={dark ? "gray" : "darmasaba-blue"}
|
||||
>
|
||||
<FileText style={{ width: "70%", height: "70%" }} />
|
||||
</ThemeIcon>
|
||||
@@ -153,7 +137,7 @@ export function DashboardContent() {
|
||||
variant="filled"
|
||||
size="xl"
|
||||
radius="xl"
|
||||
color={dark ? "gray" : "darmasaba-navy"}
|
||||
color={dark ? "gray" : "darmasaba-blue"}
|
||||
>
|
||||
<MessageCircle style={{ width: "70%", height: "70%" }} />
|
||||
</ThemeIcon>
|
||||
@@ -190,7 +174,7 @@ export function DashboardContent() {
|
||||
variant="filled"
|
||||
size="xl"
|
||||
radius="xl"
|
||||
color={dark ? "gray" : "darmasaba-navy"}
|
||||
color={dark ? "gray" : "darmasaba-blue"}
|
||||
>
|
||||
<CheckCircle style={{ width: "70%", height: "70%" }} />
|
||||
</ThemeIcon>
|
||||
@@ -224,7 +208,7 @@ export function DashboardContent() {
|
||||
variant="filled"
|
||||
size="xl"
|
||||
radius="xl"
|
||||
color={dark ? "gray" : "darmasaba-navy"}
|
||||
color={dark ? "gray" : "darmasaba-blue"}
|
||||
>
|
||||
<Users style={{ width: "70%", height: "70%" }} />
|
||||
</ThemeIcon>
|
||||
@@ -292,7 +276,7 @@ export function DashboardContent() {
|
||||
<Tooltip />
|
||||
<Bar
|
||||
dataKey="value"
|
||||
fill="#1E3A5F"
|
||||
fill="var(--mantine-color-blue-filled)"
|
||||
radius={[4, 4, 0, 0]}
|
||||
/>
|
||||
</BarChart>
|
||||
@@ -385,7 +369,46 @@ export function DashboardContent() {
|
||||
<Group gap="xs" mb="lg">
|
||||
<Box>
|
||||
{/* Original SVG icon */}
|
||||
<Briefcase color="#1E3A5F" />
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect
|
||||
x="3"
|
||||
y="3"
|
||||
width="7"
|
||||
height="7"
|
||||
rx="1"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<rect
|
||||
x="3"
|
||||
y="14"
|
||||
width="7"
|
||||
height="7"
|
||||
rx="1"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<rect
|
||||
x="14"
|
||||
y="3"
|
||||
width="7"
|
||||
height="7"
|
||||
rx="1"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<rect
|
||||
x="14"
|
||||
y="14"
|
||||
width="7"
|
||||
height="7"
|
||||
rx="1"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</Box>
|
||||
<Title order={4}>Divisi Teraktif</Title>
|
||||
</Group>
|
||||
@@ -404,7 +427,7 @@ export function DashboardContent() {
|
||||
value={(divisi.value / 37) * 100}
|
||||
size="sm"
|
||||
radius="xl"
|
||||
color="#1E3A5F"
|
||||
color="blue"
|
||||
/>
|
||||
</Box>
|
||||
))}
|
||||
@@ -430,7 +453,7 @@ export function DashboardContent() {
|
||||
<Box
|
||||
key={index}
|
||||
style={{
|
||||
borderLeft: "4px solid #1E3A5F",
|
||||
borderLeft: "4px solid var(--mantine-color-blue-filled)",
|
||||
paddingLeft: 12,
|
||||
}}
|
||||
>
|
||||
@@ -457,60 +480,44 @@ export function DashboardContent() {
|
||||
Grafik APBDes
|
||||
</Title>
|
||||
<Stack gap="xs">
|
||||
{apbdesData.map((data, index) => (
|
||||
<Grid key={index} align="center">
|
||||
<Grid.Col span={3}>
|
||||
<Text size="sm" fw={500}>
|
||||
{data.name}
|
||||
</Text>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={7}>
|
||||
<Progress
|
||||
value={(data.value / 470) * 100}
|
||||
size="lg"
|
||||
radius="xl"
|
||||
color="#1E3A5F"
|
||||
/>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={2}>
|
||||
<Text size="sm" fw={600} ta="right">
|
||||
{data.label}
|
||||
</Text>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
))}
|
||||
<Group align="center" gap="md">
|
||||
<Text size="sm" fw={500} w={60}>
|
||||
Belanja
|
||||
</Text>
|
||||
<Progress
|
||||
value={70}
|
||||
size="lg"
|
||||
radius="xl"
|
||||
color="blue"
|
||||
style={{ flex: 1 }}
|
||||
/>
|
||||
</Group>
|
||||
<Group align="center" gap="md">
|
||||
<Text size="sm" fw={500} w={60}>
|
||||
Pendapatan
|
||||
</Text>
|
||||
<Progress
|
||||
value={90}
|
||||
size="lg"
|
||||
radius="xl"
|
||||
color="green"
|
||||
style={{ flex: 1 }}
|
||||
/>
|
||||
</Group>
|
||||
<Group align="center" gap="md">
|
||||
<Text size="sm" fw={500} w={60}>
|
||||
Pembangunan
|
||||
</Text>
|
||||
<Progress
|
||||
value={50}
|
||||
size="lg"
|
||||
radius="xl"
|
||||
color="orange"
|
||||
style={{ flex: 1 }}
|
||||
/>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Card>
|
||||
|
||||
{/* SDGS Desa */}
|
||||
<Card
|
||||
p="md"
|
||||
style={{ borderColor: dark ? "#141D34" : "white" }}
|
||||
radius="md"
|
||||
withBorder
|
||||
bg={dark ? "#141D34" : "white"}
|
||||
>
|
||||
<Title order={4} mb="lg">
|
||||
SDGS Desa
|
||||
</Title>
|
||||
<SimpleGrid cols={{ base: 2, md: 5 }}>
|
||||
{sdgsData.map((data, index) => (
|
||||
<Card key={index} withBorder bg={dark ? "#141D34" : "white"} p="md">
|
||||
<Group gap="sm" align="center">
|
||||
<Image src={data.image} width={40} height={40} />
|
||||
<Box>
|
||||
<Text size="sm" ta={"center"} fw={500} lineClamp={2}>
|
||||
{data.label}
|
||||
</Text>
|
||||
<Text size="sm" ta={"center"} fw={600} c="darmasaba-blue">
|
||||
{data.value}
|
||||
</Text>
|
||||
</Box>
|
||||
</Group>
|
||||
</Card>
|
||||
))}
|
||||
</SimpleGrid>
|
||||
</Card>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,544 +1,411 @@
|
||||
import { BarChart, PieChart } from "@mantine/charts";
|
||||
import {
|
||||
Box,
|
||||
Card,
|
||||
Grid,
|
||||
Group,
|
||||
Stack,
|
||||
Table,
|
||||
Text,
|
||||
Title,
|
||||
useMantineColorScheme,
|
||||
} from "@mantine/core";
|
||||
import {
|
||||
IconArrowDown,
|
||||
IconArrowUp,
|
||||
IconBabyCarriage,
|
||||
IconSkull,
|
||||
IconUsers,
|
||||
IconHome,
|
||||
IconExclamationCircle,
|
||||
} from "@tabler/icons-react";
|
||||
import { useMantineColorScheme } from "@mantine/core";
|
||||
import {
|
||||
Bar,
|
||||
BarChart,
|
||||
CartesianGrid,
|
||||
Cell,
|
||||
Pie,
|
||||
PieChart,
|
||||
ResponsiveContainer,
|
||||
Tooltip,
|
||||
XAxis,
|
||||
YAxis,
|
||||
} from "recharts";
|
||||
import React from "react";
|
||||
|
||||
// Sample 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>
|
||||
),
|
||||
},
|
||||
{
|
||||
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>
|
||||
),
|
||||
},
|
||||
{
|
||||
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"
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
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>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
const ageDistributionData = [
|
||||
{ ageRange: "17-25", total: 850 },
|
||||
{ ageRange: "26-35", total: 1200 },
|
||||
{ ageRange: "36-45", total: 1100 },
|
||||
{ ageRange: "46-55", total: 950 },
|
||||
{ ageRange: "56-65", total: 750 },
|
||||
{ ageRange: "65+", total: 484 },
|
||||
];
|
||||
|
||||
const jobDistributionData = [
|
||||
{ job: "Sipil", total: 1200 },
|
||||
{ job: "Guru", total: 850 },
|
||||
{ job: "Petani", total: 950 },
|
||||
{ job: "Pedagang", total: 750 },
|
||||
{ job: "Wiraswasta", total: 984 },
|
||||
];
|
||||
|
||||
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" },
|
||||
];
|
||||
|
||||
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 },
|
||||
];
|
||||
|
||||
const dynamicStats = [
|
||||
{
|
||||
title: "Kelahiran",
|
||||
value: "23",
|
||||
icon: <IconBabyCarriage size={16} />,
|
||||
color: "green",
|
||||
},
|
||||
{
|
||||
title: "Kematian",
|
||||
value: "12",
|
||||
icon: <IconSkull size={16} />,
|
||||
color: "red",
|
||||
},
|
||||
{
|
||||
title: "Pindah Masuk",
|
||||
value: "45",
|
||||
icon: <IconArrowDown size={16} />,
|
||||
color: "blue",
|
||||
},
|
||||
{
|
||||
title: "Pindah Keluar",
|
||||
value: "32",
|
||||
icon: <IconArrowUp size={16} />,
|
||||
color: "orange",
|
||||
},
|
||||
];
|
||||
|
||||
const DemografiPekerjaan = () => {
|
||||
const { colorScheme } = useMantineColorScheme();
|
||||
const dark = colorScheme === "dark";
|
||||
|
||||
// KPI Data
|
||||
const kpiData = [
|
||||
{
|
||||
id: 1,
|
||||
title: "Total Penduduk",
|
||||
value: "5.634",
|
||||
subtitle: "Aktif terdaftar",
|
||||
icon: IconUsers,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Kepala Keluarga",
|
||||
value: "1.354",
|
||||
subtitle: "Total KK",
|
||||
icon: IconHome,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Kelahiran",
|
||||
value: "23",
|
||||
subtitle: "Tahun ini",
|
||||
icon: IconBabyCarriage,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "Kemiskinan",
|
||||
value: "324",
|
||||
subtitle: "-10% dari tahun lalu",
|
||||
icon: IconExclamationCircle,
|
||||
},
|
||||
];
|
||||
|
||||
// Age distribution data
|
||||
const ageDistributionData = [
|
||||
{ ageRange: "17-25", total: 850 },
|
||||
{ ageRange: "26-35", total: 1200 },
|
||||
{ ageRange: "36-45", total: 1100 },
|
||||
{ ageRange: "46-55", total: 950 },
|
||||
{ ageRange: "56-65", total: 750 },
|
||||
{ ageRange: "65+", total: 484 },
|
||||
];
|
||||
|
||||
// Job distribution data
|
||||
const jobDistributionData = [
|
||||
{ job: "Sipil", total: 1200 },
|
||||
{ job: "Guru", total: 850 },
|
||||
{ job: "Petani", total: 950 },
|
||||
{ job: "Pedagang", total: 750 },
|
||||
{ job: "Wiraswasta", total: 984 },
|
||||
];
|
||||
|
||||
// Religion data
|
||||
const religionData = [
|
||||
{ religion: "Hindu", total: 4234, color: "#EF4444" },
|
||||
{ religion: "Islam", total: 856, color: "#3B82F6" },
|
||||
{ religion: "Kristen", total: 412, color: "#10B981" },
|
||||
{ religion: "Buddha", total: 202, color: "#F59E0B" },
|
||||
];
|
||||
|
||||
// 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 },
|
||||
];
|
||||
|
||||
// Dynamic stats
|
||||
const dynamicStats = [
|
||||
{
|
||||
title: "Kelahiran",
|
||||
value: "23",
|
||||
icon: IconBabyCarriage,
|
||||
color: "#10B981",
|
||||
},
|
||||
{
|
||||
title: "Kematian",
|
||||
value: "12",
|
||||
icon: IconSkull,
|
||||
color: "#EF4444",
|
||||
},
|
||||
{
|
||||
title: "Pindah Masuk",
|
||||
value: "45",
|
||||
icon: IconArrowDown,
|
||||
color: "#3B82F6",
|
||||
},
|
||||
{
|
||||
title: "Pindah Keluar",
|
||||
value: "32",
|
||||
icon: IconArrowUp,
|
||||
color: "#F59E0B",
|
||||
},
|
||||
];
|
||||
|
||||
const COLORS = ["#1E3A5F", "#3B82F6", "#60A5FA", "#93C5FD", "#DBEAFE"];
|
||||
|
||||
const cardStyle = {
|
||||
backgroundColor: dark ? "#141D34" : "white",
|
||||
border: `1px solid ${dark ? "#141D34" : "white"}`,
|
||||
};
|
||||
|
||||
const textStyle = {
|
||||
color: dark ? "white" : "#1F2937",
|
||||
};
|
||||
|
||||
const subtitleStyle = {
|
||||
color: dark ? "#9CA3AF" : "#6B7280",
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className="min-h-screen"
|
||||
style={{
|
||||
backgroundColor: dark ? "#10192D" : "#F3F4F6",
|
||||
minHeight: "100vh",
|
||||
padding: "1.5rem",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="max-w-7xl mx-auto"
|
||||
style={{
|
||||
maxWidth: "80rem",
|
||||
marginLeft: "auto",
|
||||
marginRight: "auto",
|
||||
}}
|
||||
>
|
||||
{/* Row 1: 4 Statistic Cards */}
|
||||
<div
|
||||
className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6"
|
||||
style={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: "repeat(4, 1fr)",
|
||||
gap: "1.5rem",
|
||||
marginBottom: "1.5rem",
|
||||
}}
|
||||
>
|
||||
<Box className="space-y-6">
|
||||
<Stack gap="xl">
|
||||
{/* KPI Cards */}
|
||||
<Grid gutter="lg">
|
||||
{kpiData.map((kpi) => (
|
||||
<div
|
||||
key={kpi.id}
|
||||
className="rounded-xl shadow-sm p-6"
|
||||
style={{
|
||||
...cardStyle,
|
||||
borderRadius: "12px",
|
||||
boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
|
||||
padding: "1.5rem",
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex-1">
|
||||
<h3
|
||||
className="text-sm font-medium mb-1"
|
||||
style={subtitleStyle}
|
||||
>
|
||||
{kpi.title}
|
||||
</h3>
|
||||
<p
|
||||
className="text-3xl font-bold mb-1"
|
||||
style={textStyle}
|
||||
>
|
||||
{kpi.value}
|
||||
</p>
|
||||
<p
|
||||
className="text-xs"
|
||||
style={subtitleStyle}
|
||||
>
|
||||
{kpi.subtitle}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex-shrink-0 ml-4">
|
||||
<div
|
||||
className="w-12 h-12 rounded-full flex items-center justify-center text-white"
|
||||
style={{ backgroundColor: "#1E3A5F" }}
|
||||
>
|
||||
<kpi.icon size={24} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Row 2: 2 Chart Cards */}
|
||||
<div
|
||||
className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6"
|
||||
style={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: "repeat(2, 1fr)",
|
||||
gap: "1.5rem",
|
||||
marginBottom: "1.5rem",
|
||||
}}
|
||||
>
|
||||
{/* Age Distribution Bar Chart */}
|
||||
<div
|
||||
className="rounded-xl shadow-sm p-6"
|
||||
style={{
|
||||
...cardStyle,
|
||||
borderRadius: "12px",
|
||||
boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
|
||||
padding: "1.5rem",
|
||||
}}
|
||||
>
|
||||
<h3
|
||||
className="text-lg font-semibold mb-4"
|
||||
style={textStyle}
|
||||
>
|
||||
Grafik Pengelompokan Umur
|
||||
</h3>
|
||||
<ResponsiveContainer width="100%" height={300}>
|
||||
<BarChart data={ageDistributionData}>
|
||||
<CartesianGrid
|
||||
strokeDasharray="3 3"
|
||||
vertical={false}
|
||||
stroke={dark ? "#2d3748" : "#E5E7EB"}
|
||||
/>
|
||||
<XAxis
|
||||
dataKey="ageRange"
|
||||
axisLine={false}
|
||||
tickLine={false}
|
||||
tick={{ fill: dark ? "#9CA3AF" : "#6B7280" }}
|
||||
/>
|
||||
<YAxis
|
||||
axisLine={false}
|
||||
tickLine={false}
|
||||
tick={{ fill: dark ? "#9CA3AF" : "#6B7280" }}
|
||||
/>
|
||||
<Tooltip
|
||||
contentStyle={{
|
||||
backgroundColor: dark ? "#1F2937" : "white",
|
||||
border: `1px solid ${dark ? "#374151" : "#E5E7EB"}`,
|
||||
borderRadius: "8px",
|
||||
color: dark ? "white" : "#1F2937",
|
||||
}}
|
||||
/>
|
||||
<Bar dataKey="total" radius={[4, 4, 0, 0]}>
|
||||
{ageDistributionData.map((entry, index) => (
|
||||
<Cell
|
||||
key={`cell-${index}`}
|
||||
fill={COLORS[index % COLORS.length]}
|
||||
/>
|
||||
))}
|
||||
</Bar>
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
|
||||
{/* Job Distribution Bar Chart */}
|
||||
<div
|
||||
className="rounded-xl shadow-sm p-6"
|
||||
style={{
|
||||
...cardStyle,
|
||||
borderRadius: "12px",
|
||||
boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
|
||||
padding: "1.5rem",
|
||||
}}
|
||||
>
|
||||
<h3
|
||||
className="text-lg font-semibold mb-4"
|
||||
style={textStyle}
|
||||
>
|
||||
Demografi Pekerjaan
|
||||
</h3>
|
||||
<ResponsiveContainer width="100%" height={300}>
|
||||
<BarChart data={jobDistributionData}>
|
||||
<CartesianGrid
|
||||
strokeDasharray="3 3"
|
||||
vertical={false}
|
||||
stroke={dark ? "#2d3748" : "#E5E7EB"}
|
||||
/>
|
||||
<XAxis
|
||||
dataKey="job"
|
||||
axisLine={false}
|
||||
tickLine={false}
|
||||
tick={{ fill: dark ? "#9CA3AF" : "#6B7280" }}
|
||||
/>
|
||||
<YAxis
|
||||
axisLine={false}
|
||||
tickLine={false}
|
||||
tick={{ fill: dark ? "#9CA3AF" : "#6B7280" }}
|
||||
/>
|
||||
<Tooltip
|
||||
contentStyle={{
|
||||
backgroundColor: dark ? "#1F2937" : "white",
|
||||
border: `1px solid ${dark ? "#374151" : "#E5E7EB"}`,
|
||||
borderRadius: "8px",
|
||||
color: dark ? "white" : "#1F2937",
|
||||
}}
|
||||
/>
|
||||
<Bar dataKey="total" radius={[4, 4, 0, 0]}>
|
||||
{jobDistributionData.map((entry, index) => (
|
||||
<Cell
|
||||
key={`cell-${index}`}
|
||||
fill={COLORS[index % COLORS.length]}
|
||||
/>
|
||||
))}
|
||||
</Bar>
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Row 3: 3 Insight Cards */}
|
||||
<div
|
||||
className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6"
|
||||
style={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: "repeat(3, 1fr)",
|
||||
gap: "1.5rem",
|
||||
marginBottom: "1.5rem",
|
||||
}}
|
||||
>
|
||||
{/* Religion Distribution Pie Chart */}
|
||||
<div
|
||||
className="rounded-xl shadow-sm p-6"
|
||||
style={{
|
||||
...cardStyle,
|
||||
borderRadius: "12px",
|
||||
boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
|
||||
padding: "1.5rem",
|
||||
}}
|
||||
>
|
||||
<h3
|
||||
className="text-lg font-semibold mb-4"
|
||||
style={textStyle}
|
||||
>
|
||||
Distribusi Agama
|
||||
</h3>
|
||||
<ResponsiveContainer width="100%" height={250}>
|
||||
<PieChart>
|
||||
<Pie
|
||||
data={religionData}
|
||||
cx="50%"
|
||||
cy="50%"
|
||||
outerRadius={80}
|
||||
dataKey="total"
|
||||
nameKey="religion"
|
||||
label={({ name, percent }) =>
|
||||
`${name}: ${percent ? (percent * 100).toFixed(0) : 0}%`
|
||||
}
|
||||
>
|
||||
{religionData.map((entry, index) => (
|
||||
<Cell key={`cell-${index}`} fill={entry.color} />
|
||||
))}
|
||||
</Pie>
|
||||
<Tooltip
|
||||
contentStyle={{
|
||||
backgroundColor: dark ? "#1F2937" : "white",
|
||||
border: `1px solid ${dark ? "#374151" : "#E5E7EB"}`,
|
||||
borderRadius: "8px",
|
||||
color: dark ? "white" : "#1F2937",
|
||||
}}
|
||||
/>
|
||||
</PieChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
|
||||
{/* Population per Banjar Table */}
|
||||
<div
|
||||
className="rounded-xl shadow-sm p-6 lg:col-span-2"
|
||||
style={{
|
||||
...cardStyle,
|
||||
borderRadius: "12px",
|
||||
boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
|
||||
padding: "1.5rem",
|
||||
}}
|
||||
>
|
||||
<h3
|
||||
className="text-lg font-semibold mb-4"
|
||||
style={textStyle}
|
||||
>
|
||||
Data per Banjar
|
||||
</h3>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr
|
||||
style={{
|
||||
borderBottom: `1px solid ${dark ? "#2d3748" : "#E5E7EB"}`,
|
||||
}}
|
||||
>
|
||||
<th
|
||||
className="text-left py-3 px-4 text-sm font-medium"
|
||||
style={subtitleStyle}
|
||||
>
|
||||
Banjar
|
||||
</th>
|
||||
<th
|
||||
className="text-left py-3 px-4 text-sm font-medium"
|
||||
style={subtitleStyle}
|
||||
>
|
||||
Penduduk
|
||||
</th>
|
||||
<th
|
||||
className="text-left py-3 px-4 text-sm font-medium"
|
||||
style={subtitleStyle}
|
||||
>
|
||||
KK
|
||||
</th>
|
||||
<th
|
||||
className="text-left py-3 px-4 text-sm font-medium"
|
||||
style={subtitleStyle}
|
||||
>
|
||||
Miskin
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{banjarData.map((item, index) => (
|
||||
<tr
|
||||
key={index}
|
||||
style={{
|
||||
borderBottom: `1px solid ${dark ? "#2d3748" : "#F3F4F6"}`,
|
||||
}}
|
||||
>
|
||||
<td
|
||||
className="py-3 px-4 text-sm"
|
||||
style={textStyle}
|
||||
>
|
||||
{item.banjar}
|
||||
</td>
|
||||
<td
|
||||
className="py-3 px-4 text-sm"
|
||||
style={textStyle}
|
||||
>
|
||||
{item.population.toLocaleString()}
|
||||
</td>
|
||||
<td
|
||||
className="py-3 px-4 text-sm"
|
||||
style={textStyle}
|
||||
>
|
||||
{item.kk.toLocaleString()}
|
||||
</td>
|
||||
<td
|
||||
className="py-3 px-4 text-sm"
|
||||
style={{ color: "#EF4444" }}
|
||||
>
|
||||
{item.poor.toLocaleString()}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Population Dynamics Stats */}
|
||||
<div
|
||||
className="rounded-xl shadow-sm p-6"
|
||||
style={{
|
||||
...cardStyle,
|
||||
borderRadius: "12px",
|
||||
boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
|
||||
padding: "1.5rem",
|
||||
}}
|
||||
>
|
||||
<h3
|
||||
className="text-lg font-semibold mb-4"
|
||||
style={textStyle}
|
||||
>
|
||||
Statistik Dinamika Penduduk
|
||||
</h3>
|
||||
<div
|
||||
className="grid grid-cols-1 md:grid-cols-4 gap-4"
|
||||
style={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: "repeat(4, 1fr)",
|
||||
gap: "1rem",
|
||||
}}
|
||||
>
|
||||
{dynamicStats.map((stat, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="p-4 rounded-lg"
|
||||
style={{
|
||||
backgroundColor: dark ? "#1F2937" : "#F9FAFB",
|
||||
borderRadius: "8px",
|
||||
padding: "1rem",
|
||||
}}
|
||||
<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" }}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p
|
||||
className="text-sm font-medium mb-1"
|
||||
style={subtitleStyle}
|
||||
>
|
||||
{stat.title}
|
||||
</p>
|
||||
<p
|
||||
className="text-2xl font-bold"
|
||||
style={{ color: stat.color }}
|
||||
>
|
||||
{stat.value}
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
className="w-10 h-10 rounded-full flex items-center justify-center"
|
||||
style={{
|
||||
backgroundColor: `${stat.color}20`,
|
||||
color: stat.color,
|
||||
}}
|
||||
<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}
|
||||
>
|
||||
<stat.icon size={20} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{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 }}>
|
||||
<Card
|
||||
p="md"
|
||||
radius="md"
|
||||
withBorder
|
||||
bg={dark ? "#141D34" : "white"}
|
||||
style={{ borderColor: dark ? "#141D34" : "white" }}
|
||||
>
|
||||
<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
|
||||
/>
|
||||
</Card>
|
||||
</Grid.Col>
|
||||
|
||||
{/* 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">
|
||||
Demografi Pekerjaan
|
||||
</Title>
|
||||
<BarChart
|
||||
h={300}
|
||||
data={jobDistributionData}
|
||||
dataKey="job"
|
||||
series={[{ name: "total", color: "darmasaba-navy" }]}
|
||||
withLegend
|
||||
/>
|
||||
</Card>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
|
||||
{/* 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
|
||||
</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"}>
|
||||
{stat.title}
|
||||
</Text>
|
||||
<Title order={4} fw={700} c={stat.color}>
|
||||
{stat.value}
|
||||
</Title>
|
||||
</Box>
|
||||
<Box c={stat.color}>{stat.icon}</Box>
|
||||
</Group>
|
||||
</Card>
|
||||
</Grid.Col>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Grid>
|
||||
</Card>
|
||||
</Stack>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default DemografiPekerjaan;
|
||||
export default DemografiPekerjaan;
|
||||
@@ -1,72 +1,121 @@
|
||||
import {
|
||||
ActionIcon,
|
||||
Avatar,
|
||||
Badge,
|
||||
Box,
|
||||
Divider,
|
||||
Group,
|
||||
Text,
|
||||
Title,
|
||||
useMantineColorScheme,
|
||||
} from "@mantine/core";
|
||||
import { useLocation } from "@tanstack/react-router";
|
||||
import { Bell, Moon, Sun } from "lucide-react";
|
||||
import { 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
|
||||
|
||||
export function Header() {
|
||||
const location = useLocation();
|
||||
const { colorScheme, toggleColorScheme } = useMantineColorScheme();
|
||||
const dark = colorScheme === "dark";
|
||||
const navigate = useNavigate();
|
||||
|
||||
const title =
|
||||
location.pathname === "/"
|
||||
? "Desa Darmasaba"
|
||||
: "Desa Darmasaba";
|
||||
// Define page titles based on route
|
||||
const getPageTitle = () => {
|
||||
switch (location.pathname) {
|
||||
case "/":
|
||||
return "Beranda";
|
||||
case "/kinerja-divisi":
|
||||
return "Kinerja Divisi";
|
||||
case "/pengaduan-layanan-publik":
|
||||
return "Pengaduan & Layanan Publik";
|
||||
case "/jenna-analytic":
|
||||
return "Jenna Analytic";
|
||||
case "/demografi-pekerjaan":
|
||||
return "Demografi & Kependudukan";
|
||||
case "/keuangan-anggaran":
|
||||
return "Keuangan & Anggaran";
|
||||
case "/bumdes":
|
||||
return "Bumdes & UMKM Desa";
|
||||
case "/sosial":
|
||||
return "Sosial";
|
||||
case "/keamanan":
|
||||
return "Keamanan";
|
||||
case "/bantuan":
|
||||
return "Bantuan";
|
||||
case "/pengaturan":
|
||||
case "/pengaturan/umum":
|
||||
case "/pengaturan/notifikasi":
|
||||
case "/pengaturan/keamanan":
|
||||
case "/pengaturan/akses-dan-tim":
|
||||
return "Pengaturan";
|
||||
default:
|
||||
return "Desa Darmasaba";
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Box
|
||||
style={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: "1fr auto 1fr",
|
||||
alignItems: "center",
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
{/* LEFT SPACER (burger sudah di luar) */}
|
||||
<Box />
|
||||
<Group justify="space-between" w="100%">
|
||||
{/* Title */}
|
||||
<Title order={3} c={"white"}>
|
||||
{getPageTitle()}
|
||||
</Title>
|
||||
|
||||
{/* CENTER TITLE */}
|
||||
<Text
|
||||
c="white"
|
||||
fw={600}
|
||||
size="md"
|
||||
style={{
|
||||
textAlign: "center",
|
||||
whiteSpace: "nowrap",
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis",
|
||||
}}
|
||||
>
|
||||
{title}
|
||||
</Text>
|
||||
{/* Right Section */}
|
||||
<Group gap="md">
|
||||
{/* User Info */}
|
||||
<Group gap="sm">
|
||||
<Box ta="right">
|
||||
<Text c={"white"} size="sm" fw={500}>
|
||||
I. B. Surya Prabhawa M...
|
||||
</Text>
|
||||
<Text c={"white"} size="xs">
|
||||
Kepala Desa
|
||||
</Text>
|
||||
</Box>
|
||||
<Avatar color="blue" radius="xl">
|
||||
<UserIcon color="white" style={{ width: "70%", height: "70%" }} />
|
||||
</Avatar>
|
||||
</Group>
|
||||
|
||||
{/* RIGHT ICONS */}
|
||||
<Group gap="xs" justify="flex-end">
|
||||
<ActionIcon
|
||||
onClick={toggleColorScheme}
|
||||
variant="subtle"
|
||||
radius="xl"
|
||||
>
|
||||
{dark ? <Sun size={18} /> : <Moon size={18} />}
|
||||
</ActionIcon>
|
||||
{/* Divider */}
|
||||
<Divider orientation="vertical" h={30} />
|
||||
|
||||
<ActionIcon variant="subtle" radius="xl" pos="relative">
|
||||
<Bell size={18} />
|
||||
<Badge
|
||||
size="xs"
|
||||
color="red"
|
||||
style={{ position: "absolute", top: -4, right: -4 }}
|
||||
{/* Icons */}
|
||||
<Group gap="sm">
|
||||
<ActionIcon
|
||||
onClick={() => toggleColorScheme()}
|
||||
variant="subtle"
|
||||
size="lg"
|
||||
radius="xl"
|
||||
aria-label="Toggle color scheme"
|
||||
>
|
||||
10
|
||||
</Badge>
|
||||
</ActionIcon>
|
||||
{dark ? (
|
||||
<Sun color="white" style={{ width: "70%", height: "70%" }} />
|
||||
) : (
|
||||
<Moon color="white" style={{ width: "70%", height: "70%" }} />
|
||||
)}
|
||||
</ActionIcon>
|
||||
<ActionIcon variant="subtle" size="lg" radius="xl" pos="relative">
|
||||
<Bell color="white" style={{ width: "70%", height: "70%" }} />
|
||||
<Badge
|
||||
size="xs"
|
||||
color="red"
|
||||
variant="filled"
|
||||
style={{ position: "absolute", top: 0, right: 0 }}
|
||||
radius={"xl"}
|
||||
>
|
||||
10
|
||||
</Badge>
|
||||
</ActionIcon>
|
||||
<ActionIcon variant="subtle" size="lg" radius="xl">
|
||||
<IconUserShield
|
||||
color="white"
|
||||
style={{ width: "70%", height: "70%" }}
|
||||
onClick={() => navigate({ to: "/signin" })}
|
||||
/>
|
||||
</ActionIcon>
|
||||
</Group>
|
||||
</Group>
|
||||
</Box>
|
||||
</Group>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -142,7 +142,14 @@ const HelpPage = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<Container size="lg" py="lg">
|
||||
<Container size="lg" py="xl">
|
||||
<Title order={1} mb="xl" ta="center">
|
||||
Pusat Bantuan
|
||||
</Title>
|
||||
<Text size="lg" color="dimmed" ta="center" mb="xl">
|
||||
Temukan jawaban untuk pertanyaan Anda atau hubungi tim support kami
|
||||
</Text>
|
||||
|
||||
{/* Statistics Section */}
|
||||
<SimpleGrid cols={3} spacing="lg" mb="xl">
|
||||
{stats.map((stat, index) => (
|
||||
@@ -425,4 +432,4 @@ const HelpPage = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default HelpPage;
|
||||
export default HelpPage;
|
||||
@@ -1,328 +1,283 @@
|
||||
import { BarChart } from "@mantine/charts";
|
||||
import {
|
||||
IconAlertTriangle,
|
||||
IconClock,
|
||||
IconMessageChatbot,
|
||||
IconSparkles,
|
||||
} from "@tabler/icons-react";
|
||||
import { useMantineColorScheme } from "@mantine/core";
|
||||
import {
|
||||
Bar,
|
||||
BarChart,
|
||||
CartesianGrid,
|
||||
Cell,
|
||||
ResponsiveContainer,
|
||||
Tooltip,
|
||||
XAxis,
|
||||
YAxis,
|
||||
} from "recharts";
|
||||
Badge,
|
||||
Box,
|
||||
Button,
|
||||
Card,
|
||||
Grid,
|
||||
Group,
|
||||
Progress,
|
||||
Stack,
|
||||
Text,
|
||||
Title,
|
||||
useMantineColorScheme,
|
||||
} from "@mantine/core";
|
||||
import React from "react";
|
||||
|
||||
// Sample Data
|
||||
const kpiData = [
|
||||
{
|
||||
id: 1,
|
||||
title: "Interaksi Hari Ini",
|
||||
value: "61",
|
||||
delta: "+15% dari kemarin",
|
||||
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"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M8.625 12a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H8.25m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H12m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H16.5m-13.5 3h15a2.25 2.25 0 0 0 2.25-2.25V6.75A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25v10.5A2.25 2.25 0 0 0 4.5 19.5Z"
|
||||
/>
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Jawaban Otomatis",
|
||||
value: "87%",
|
||||
sub: "53 dari 61 interaksi",
|
||||
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>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Belum Ditindak",
|
||||
value: "8",
|
||||
sub: "Perlu respon manual",
|
||||
deltaType: "negative",
|
||||
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="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>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "Waktu Respon",
|
||||
value: "2.3 sec",
|
||||
sub: "Rata-rata",
|
||||
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="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
|
||||
/>
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
const chartData = [
|
||||
{ day: "Sen", total: 100 },
|
||||
{ day: "Sel", total: 120 },
|
||||
{ day: "Rab", total: 90 },
|
||||
{ day: "Kam", total: 150 },
|
||||
{ day: "Jum", total: 110 },
|
||||
{ day: "Sab", total: 80 },
|
||||
{ day: "Min", total: 130 },
|
||||
];
|
||||
|
||||
const topTopics = [
|
||||
{ topic: "Cara mengurus KTP", count: 89 },
|
||||
{ topic: "Syarat Kartu Keluarga", count: 76 },
|
||||
{ topic: "Jadwal Posyandu", count: 64 },
|
||||
{ topic: "Pengaduan jalan rusak", count: 52 },
|
||||
{ topic: "Info program bansos", count: 48 },
|
||||
];
|
||||
|
||||
const busyHours = [
|
||||
{ period: "Pagi (08–12)", percentage: 30 },
|
||||
{ period: "Siang (12–16)", percentage: 40 },
|
||||
{ period: "Sore (16–20)", percentage: 20 },
|
||||
{ period: "Malam (20–08)", percentage: 10 },
|
||||
];
|
||||
|
||||
const JennaAnalytic = () => {
|
||||
const { colorScheme } = useMantineColorScheme();
|
||||
const dark = colorScheme === "dark";
|
||||
|
||||
// KPI Data
|
||||
const kpiData = [
|
||||
{
|
||||
id: 1,
|
||||
title: "Interaksi Hari Ini",
|
||||
value: "61",
|
||||
subtitle: "+15% dari kemarin",
|
||||
icon: IconMessageChatbot,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Jawaban Otomatis",
|
||||
value: "87%",
|
||||
subtitle: "53 dari 61 interaksi",
|
||||
icon: IconSparkles,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Belum Ditindak",
|
||||
value: "8",
|
||||
subtitle: "Perlu respon manual",
|
||||
icon: IconAlertTriangle,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "Waktu Respon",
|
||||
value: "2.3s",
|
||||
subtitle: "Rata-rata",
|
||||
icon: IconClock,
|
||||
},
|
||||
];
|
||||
|
||||
// Weekly chatbot interaction data
|
||||
const weeklyData = [
|
||||
{ day: "Sen", interactions: 100 },
|
||||
{ day: "Sel", interactions: 120 },
|
||||
{ day: "Rab", interactions: 90 },
|
||||
{ day: "Kam", interactions: 150 },
|
||||
{ day: "Jum", interactions: 110 },
|
||||
{ day: "Sab", interactions: 80 },
|
||||
{ day: "Min", interactions: 130 },
|
||||
];
|
||||
|
||||
// Top topics data
|
||||
const topTopics = [
|
||||
{ topic: "Cara mengurus KTP", count: 89 },
|
||||
{ topic: "Syarat Kartu Keluarga", count: 76 },
|
||||
{ topic: "Jadwal Posyandu", count: 64 },
|
||||
{ topic: "Pengaduan jalan rusak", count: 52 },
|
||||
{ topic: "Info program bansos", count: 48 },
|
||||
];
|
||||
|
||||
// Busy hour distribution
|
||||
const busyHours = [
|
||||
{ period: "Pagi (08–12)", percentage: 30 },
|
||||
{ period: "Siang (12–16)", percentage: 40 },
|
||||
{ period: "Sore (16–20)", percentage: 20 },
|
||||
{ period: "Malam (20–08)", percentage: 10 },
|
||||
];
|
||||
|
||||
const COLORS = ["#1E3A5F", "#3B82F6", "#60A5FA", "#93C5FD"];
|
||||
|
||||
const cardStyle = {
|
||||
backgroundColor: dark ? "#141D34" : "white",
|
||||
border: `1px solid ${dark ? "#141D34" : "white"}`,
|
||||
};
|
||||
|
||||
const textStyle = {
|
||||
color: dark ? "white" : "#1F2937",
|
||||
};
|
||||
|
||||
const subtitleStyle = {
|
||||
color: dark ? "#9CA3AF" : "#6B7280",
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className="min-h-screen"
|
||||
style={{
|
||||
backgroundColor: dark ? "#10192D" : "#F3F4F6",
|
||||
minHeight: "100vh",
|
||||
padding: "1.5rem",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="max-w-7xl mx-auto"
|
||||
style={{
|
||||
maxWidth: "80rem",
|
||||
marginLeft: "auto",
|
||||
marginRight: "auto",
|
||||
}}
|
||||
>
|
||||
{/* Row 1: 4 Statistic Cards */}
|
||||
<div
|
||||
className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6"
|
||||
style={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: "repeat(4, 1fr)",
|
||||
gap: "1.5rem",
|
||||
marginBottom: "1.5rem",
|
||||
}}
|
||||
>
|
||||
<Box className="space-y-6">
|
||||
<Stack gap="xl">
|
||||
{/* KPI Cards */}
|
||||
<Grid gutter="lg">
|
||||
{kpiData.map((kpi) => (
|
||||
<div
|
||||
key={kpi.id}
|
||||
className="rounded-xl shadow-sm p-6"
|
||||
style={{
|
||||
...cardStyle,
|
||||
borderRadius: "12px",
|
||||
boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
|
||||
padding: "1.5rem",
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex-1">
|
||||
<h3
|
||||
className="text-sm font-medium mb-1"
|
||||
style={subtitleStyle}
|
||||
>
|
||||
<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="dimmed">
|
||||
{kpi.title}
|
||||
</h3>
|
||||
<p
|
||||
className="text-3xl font-bold mb-1"
|
||||
style={textStyle}
|
||||
</Text>
|
||||
{React.cloneElement(kpi.icon, {
|
||||
className: "h-6 w-6", // Keeping classes for now, can be replaced by Mantine Icon component if available or styled with sx prop
|
||||
color: "var(--mantine-color-dimmed)", // Set color via prop
|
||||
})}
|
||||
</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.value}
|
||||
</p>
|
||||
<p
|
||||
className="text-xs"
|
||||
style={subtitleStyle}
|
||||
>
|
||||
{kpi.subtitle}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex-shrink-0 ml-4">
|
||||
<div
|
||||
className="w-12 h-12 rounded-full flex items-center justify-center text-white"
|
||||
style={{ backgroundColor: "#1E3A5F" }}
|
||||
>
|
||||
<kpi.icon size={24} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{kpi.delta}
|
||||
</Text>
|
||||
)}
|
||||
{kpi.sub && (
|
||||
<Text size="xs" c="dimmed" mt={2}>
|
||||
{kpi.sub}
|
||||
</Text>
|
||||
)}
|
||||
</Card>
|
||||
</Grid.Col>
|
||||
))}
|
||||
</div>
|
||||
</Grid>
|
||||
|
||||
{/* Row 2: Full Width Weekly Bar Chart */}
|
||||
<div
|
||||
className="rounded-xl shadow-sm p-6 mb-6"
|
||||
style={{
|
||||
...cardStyle,
|
||||
borderRadius: "12px",
|
||||
boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
|
||||
padding: "1.5rem",
|
||||
marginBottom: "1.5rem",
|
||||
}}
|
||||
<Card
|
||||
p="md"
|
||||
radius="md"
|
||||
withBorder
|
||||
bg={dark ? "#141D34" : "white"}
|
||||
style={{ borderColor: dark ? "#141D34" : "white" }}
|
||||
>
|
||||
<h3
|
||||
className="text-lg font-semibold mb-4"
|
||||
style={textStyle}
|
||||
>
|
||||
Interaksi Chatbot Mingguan
|
||||
</h3>
|
||||
<ResponsiveContainer width="100%" height={300}>
|
||||
<BarChart data={weeklyData}>
|
||||
<CartesianGrid
|
||||
strokeDasharray="3 3"
|
||||
vertical={false}
|
||||
stroke={dark ? "#2d3748" : "#E5E7EB"}
|
||||
/>
|
||||
<XAxis
|
||||
dataKey="day"
|
||||
axisLine={false}
|
||||
tickLine={false}
|
||||
tick={{ fill: dark ? "#9CA3AF" : "#6B7280" }}
|
||||
/>
|
||||
<YAxis
|
||||
axisLine={false}
|
||||
tickLine={false}
|
||||
tick={{ fill: dark ? "#9CA3AF" : "#6B7280" }}
|
||||
/>
|
||||
<Tooltip
|
||||
contentStyle={{
|
||||
backgroundColor: dark ? "#1F2937" : "white",
|
||||
border: `1px solid ${dark ? "#374151" : "#E5E7EB"}`,
|
||||
borderRadius: "8px",
|
||||
color: dark ? "white" : "#1F2937",
|
||||
}}
|
||||
/>
|
||||
<Bar dataKey="interactions" radius={[4, 4, 0, 0]}>
|
||||
{weeklyData.map((entry, index) => (
|
||||
<Cell
|
||||
key={`cell-${index}`}
|
||||
fill={COLORS[index % COLORS.length]}
|
||||
/>
|
||||
<Title order={3} fw={500} mb="md">
|
||||
Interaksi Chatbot
|
||||
</Title>
|
||||
<BarChart
|
||||
h={300}
|
||||
data={chartData}
|
||||
dataKey="day"
|
||||
series={[{ name: "total", color: "blue" }]}
|
||||
withLegend
|
||||
/>
|
||||
</Card>
|
||||
|
||||
{/* Charts and Lists Section */}
|
||||
<Grid gutter="lg">
|
||||
{/* Grafik Interaksi Chatbot (now Bar Chart) */}
|
||||
<Grid.Col 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} fw={500} mb="md">
|
||||
Jam Tersibuk
|
||||
</Title>
|
||||
<Stack gap="sm">
|
||||
{busyHours.map((item, index) => (
|
||||
<Box key={index}>
|
||||
<Text size="sm">{item.period}</Text>
|
||||
<Group align="center">
|
||||
<Progress value={item.percentage} flex={1} />
|
||||
<Text size="sm" fw={500}>
|
||||
{item.percentage}%
|
||||
</Text>
|
||||
</Group>
|
||||
</Box>
|
||||
))}
|
||||
</Bar>
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</Stack>
|
||||
</Card>
|
||||
</Grid.Col>
|
||||
|
||||
{/* Row 3: Two Insight Cards */}
|
||||
<div
|
||||
className="grid grid-cols-1 lg:grid-cols-2 gap-6"
|
||||
style={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))",
|
||||
gap: "1.5rem",
|
||||
}}
|
||||
>
|
||||
{/* Left: Frequently Asked Topics */}
|
||||
<div
|
||||
className="rounded-xl shadow-sm p-6"
|
||||
style={{
|
||||
...cardStyle,
|
||||
borderRadius: "12px",
|
||||
boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
|
||||
padding: "1.5rem",
|
||||
}}
|
||||
>
|
||||
<h3
|
||||
className="text-lg font-semibold mb-4"
|
||||
style={textStyle}
|
||||
>
|
||||
Topik Pertanyaan Terbanyak
|
||||
</h3>
|
||||
<div className="space-y-3">
|
||||
{topTopics.map((item, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex items-center justify-between py-3"
|
||||
style={{
|
||||
borderBottom: `1px solid ${dark ? "#2d3748" : "#E5E7EB"}`,
|
||||
}}
|
||||
>
|
||||
<span
|
||||
className="text-sm font-medium"
|
||||
style={textStyle}
|
||||
>
|
||||
{item.topic}
|
||||
</span>
|
||||
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-darmasaba-blue-100 text-darmasaba-blue-800">
|
||||
{item.count}x
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
{/* Topik Pertanyaan Terbanyak & Jam Tersibuk */}
|
||||
<Grid.Col span={{ base: 12, lg: 6 }}>
|
||||
<Stack gap="lg">
|
||||
{/* Topik Pertanyaan Terbanyak */}
|
||||
<Card
|
||||
p="md"
|
||||
radius="md"
|
||||
withBorder
|
||||
bg={dark ? "#141D34" : "white"}
|
||||
style={{ borderColor: dark ? "#141D34" : "white" }}
|
||||
h="100%"
|
||||
>
|
||||
<Title order={3} fw={500} mb="md">
|
||||
Topik Pertanyaan Terbanyak
|
||||
</Title>
|
||||
<Stack gap="xs">
|
||||
{topTopics.map((item, index) => (
|
||||
<Group
|
||||
key={index}
|
||||
justify="space-between"
|
||||
align="center"
|
||||
p="xs"
|
||||
>
|
||||
<Text size="sm" fw={500}>
|
||||
{item.topic}
|
||||
</Text>
|
||||
<Badge variant="light" color="gray">
|
||||
{item.count}x
|
||||
</Badge>
|
||||
</Group>
|
||||
))}
|
||||
</Stack>
|
||||
</Card>
|
||||
|
||||
{/* Right: Busy Hour Distribution */}
|
||||
<div
|
||||
className="rounded-xl shadow-sm p-6"
|
||||
style={{
|
||||
...cardStyle,
|
||||
borderRadius: "12px",
|
||||
boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
|
||||
padding: "1.5rem",
|
||||
}}
|
||||
>
|
||||
<h3
|
||||
className="text-lg font-semibold mb-4"
|
||||
style={textStyle}
|
||||
>
|
||||
Distribusi Jam Tersibuk
|
||||
</h3>
|
||||
<div className="space-y-4">
|
||||
{busyHours.map((item, index) => (
|
||||
<div key={index}>
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<span
|
||||
className="text-sm font-medium"
|
||||
style={textStyle}
|
||||
>
|
||||
{item.period}
|
||||
</span>
|
||||
<span
|
||||
className="text-sm font-semibold"
|
||||
style={textStyle}
|
||||
>
|
||||
{item.percentage}%
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className="w-full rounded-full h-2"
|
||||
style={{ backgroundColor: dark ? "#2d3748" : "#E5E7EB" }}
|
||||
>
|
||||
<div
|
||||
className="h-2 rounded-full transition-all"
|
||||
style={{
|
||||
width: `${item.percentage}%`,
|
||||
backgroundColor: COLORS[index % COLORS.length],
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Jam Tersibuk */}
|
||||
</Stack>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
</Stack>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default JennaAnalytic;
|
||||
export default JennaAnalytic;
|
||||
@@ -118,6 +118,13 @@ const KeamananPage = () => {
|
||||
|
||||
return (
|
||||
<Stack gap="lg">
|
||||
{/* Page Header */}
|
||||
<Group justify="space-between" align="center">
|
||||
<Title order={2} c={dark ? "dark.0" : "black"}>
|
||||
Keamanan Lingkungan Desa
|
||||
</Title>
|
||||
</Group>
|
||||
|
||||
{/* KPI Cards */}
|
||||
<Grid gutter="md">
|
||||
{kpiData.map((kpi, index) => (
|
||||
@@ -315,4 +322,4 @@ const KeamananPage = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default KeamananPage;
|
||||
export default KeamananPage;
|
||||
@@ -1,568 +1,357 @@
|
||||
import { BarChart } from "@mantine/charts";
|
||||
import {
|
||||
Badge,
|
||||
Box,
|
||||
Button,
|
||||
Card,
|
||||
Grid,
|
||||
Group,
|
||||
Progress,
|
||||
Stack,
|
||||
Text,
|
||||
Title,
|
||||
useMantineColorScheme,
|
||||
} from "@mantine/core";
|
||||
import {
|
||||
IconCurrency,
|
||||
IconTrendingDown,
|
||||
IconTrendingUp,
|
||||
IconCheck,
|
||||
IconClock,
|
||||
} from "@tabler/icons-react";
|
||||
import { useMantineColorScheme } from "@mantine/core";
|
||||
import {
|
||||
Bar,
|
||||
BarChart,
|
||||
CartesianGrid,
|
||||
Cell,
|
||||
Line,
|
||||
LineChart,
|
||||
ResponsiveContainer,
|
||||
Tooltip,
|
||||
XAxis,
|
||||
YAxis,
|
||||
} from "recharts";
|
||||
import React from "react";
|
||||
|
||||
// Sample 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" />,
|
||||
},
|
||||
{
|
||||
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>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Pemasukan",
|
||||
value: "Rp 580jt",
|
||||
sub: "Bulan ini",
|
||||
delta: "+8%",
|
||||
deltaType: "positive",
|
||||
icon: <IconTrendingUp className="h-6 w-6 text-muted-foreground" />,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "Pengeluaran",
|
||||
value: "Rp 520jt",
|
||||
sub: "Bulan ini",
|
||||
icon: <IconTrendingDown className="h-6 w-6 text-muted-foreground" />,
|
||||
},
|
||||
];
|
||||
|
||||
const incomeExpenseData = [
|
||||
{ month: "Apr", income: 450, expense: 380 },
|
||||
{ month: "Mei", income: 520, expense: 420 },
|
||||
{ month: "Jun", income: 480, expense: 500 },
|
||||
{ month: "Jul", income: 580, expense: 450 },
|
||||
{ month: "Agu", income: 550, expense: 520 },
|
||||
{ month: "Sep", income: 600, expense: 480 },
|
||||
{ month: "Okt", income: 580, expense: 520 },
|
||||
];
|
||||
|
||||
const allocationData = [
|
||||
{ sector: "Pembangunan", amount: 1200 },
|
||||
{ sector: "Kesehatan", amount: 800 },
|
||||
{ sector: "Pendidikan", amount: 650 },
|
||||
{ sector: "Sosial", amount: 550 },
|
||||
{ sector: "Kebudayaan", amount: 400 },
|
||||
{ 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" },
|
||||
];
|
||||
|
||||
const apbdReport = {
|
||||
income: [
|
||||
{ category: "Dana Desa", amount: 1800 },
|
||||
{ category: "Alokasi Dana Desa", amount: 480 },
|
||||
{ category: "Bagi Hasil Pajak & Retribusi", amount: 300 },
|
||||
{ category: "Pendapatan Asli Desa", amount: 200 },
|
||||
{ category: "Hibah Bantuan", amount: 300 },
|
||||
],
|
||||
expenses: [
|
||||
{ category: "Penyelenggaraan Pemerintah", amount: 425 },
|
||||
{ category: "Pembangunan Desa", amount: 850 },
|
||||
{ category: "Pembinaan Kemasyarakatan", amount: 320 },
|
||||
{ category: "Pemberdayaan Masyarakat", amount: 380 },
|
||||
{ category: "Penanggulangan Bencana", amount: 180 },
|
||||
],
|
||||
totalIncome: 3080,
|
||||
totalExpenses: 2155,
|
||||
};
|
||||
|
||||
const KeuanganAnggaran = () => {
|
||||
const { colorScheme } = useMantineColorScheme();
|
||||
const dark = colorScheme === "dark";
|
||||
|
||||
// KPI Data
|
||||
const kpiData = [
|
||||
{
|
||||
id: 1,
|
||||
title: "Total APBDes",
|
||||
value: "Rp 5.2M",
|
||||
subtitle: "Tahun 2025",
|
||||
icon: IconCurrency,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Realisasi",
|
||||
value: "68%",
|
||||
subtitle: "Rp 3.5M dari 5.2M",
|
||||
icon: IconCheck,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Pemasukan",
|
||||
value: "Rp 580jt",
|
||||
subtitle: "Bulan ini",
|
||||
delta: "+8%",
|
||||
icon: IconTrendingUp,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "Pengeluaran",
|
||||
value: "Rp 520jt",
|
||||
subtitle: "Bulan ini",
|
||||
icon: IconTrendingDown,
|
||||
},
|
||||
];
|
||||
|
||||
// Income vs Expense data
|
||||
const incomeExpenseData = [
|
||||
{ month: "Apr", income: 450, expense: 380 },
|
||||
{ month: "Mei", income: 520, expense: 420 },
|
||||
{ month: "Jun", income: 480, expense: 500 },
|
||||
{ month: "Jul", income: 580, expense: 450 },
|
||||
{ month: "Agu", income: 550, expense: 520 },
|
||||
{ month: "Sep", income: 600, expense: 480 },
|
||||
{ month: "Okt", income: 580, expense: 520 },
|
||||
];
|
||||
|
||||
// Allocation data
|
||||
const allocationData = [
|
||||
{ sector: "Pembangunan", amount: 1200 },
|
||||
{ sector: "Kesehatan", amount: 800 },
|
||||
{ sector: "Pendidikan", amount: 650 },
|
||||
{ sector: "Sosial", amount: 550 },
|
||||
{ sector: "Kebudayaan", amount: 400 },
|
||||
{ sector: "Teknologi", amount: 300 },
|
||||
];
|
||||
|
||||
// Assistance fund 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" },
|
||||
];
|
||||
|
||||
// APBDes Report data
|
||||
const apbdReport = {
|
||||
income: [
|
||||
{ category: "Dana Desa", amount: 1800 },
|
||||
{ category: "Alokasi Dana Desa", amount: 480 },
|
||||
{ category: "Bagi Hasil Pajak & Retribusi", amount: 300 },
|
||||
{ category: "Pendapatan Asli Desa", amount: 200 },
|
||||
{ category: "Hibah Bantuan", amount: 300 },
|
||||
],
|
||||
expenses: [
|
||||
{ category: "Penyelenggaraan Pemerintah", amount: 425 },
|
||||
{ category: "Pembangunan Desa", amount: 850 },
|
||||
{ category: "Pembinaan Kemasyarakatan", amount: 320 },
|
||||
{ category: "Pemberdayaan Masyarakat", amount: 380 },
|
||||
{ category: "Penanggulangan Bencana", amount: 180 },
|
||||
],
|
||||
totalIncome: 3080,
|
||||
totalExpenses: 2155,
|
||||
};
|
||||
|
||||
const COLORS = ["#1E3A5F", "#3B82F6", "#60A5FA", "#93C5FD", "#DBEAFE"];
|
||||
|
||||
const cardStyle = {
|
||||
backgroundColor: dark ? "#1E293B" : "white",
|
||||
border: `1px solid ${dark ? "#1E293B" : "white"}`,
|
||||
};
|
||||
|
||||
const textStyle = {
|
||||
color: dark ? "white" : "#1F2937",
|
||||
};
|
||||
|
||||
const subtitleStyle = {
|
||||
color: dark ? "#9CA3AF" : "#6B7280",
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className="min-h-screen"
|
||||
style={{
|
||||
backgroundColor: dark ? "#0F172A" : "#F3F4F6",
|
||||
minHeight: "100vh",
|
||||
padding: "1.5rem",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="max-w-7xl mx-auto"
|
||||
style={{
|
||||
maxWidth: "80rem",
|
||||
marginLeft: "auto",
|
||||
marginRight: "auto",
|
||||
}}
|
||||
>
|
||||
{/* Row 1: 4 Summary Metrics Cards */}
|
||||
<div
|
||||
className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6"
|
||||
style={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: "repeat(4, 1fr)",
|
||||
gap: "1.5rem",
|
||||
marginBottom: "1.5rem",
|
||||
}}
|
||||
>
|
||||
<Box>
|
||||
<Stack gap="xl">
|
||||
{/* KPI Cards */}
|
||||
<Grid gutter="lg">
|
||||
{kpiData.map((kpi) => (
|
||||
<div
|
||||
key={kpi.id}
|
||||
className="rounded-xl shadow-sm p-6"
|
||||
style={{
|
||||
...cardStyle,
|
||||
borderRadius: "12px",
|
||||
boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
|
||||
padding: "1.5rem",
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex-1">
|
||||
<h3
|
||||
className="text-sm font-medium mb-1"
|
||||
style={subtitleStyle}
|
||||
>
|
||||
<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}
|
||||
</h3>
|
||||
<p
|
||||
className="text-3xl font-bold mb-1"
|
||||
style={textStyle}
|
||||
</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.value}
|
||||
</p>
|
||||
<p
|
||||
className="text-xs"
|
||||
style={subtitleStyle}
|
||||
>
|
||||
{kpi.subtitle}
|
||||
</p>
|
||||
{kpi.delta && (
|
||||
<p className="text-xs mt-1" style={{ color: "#22C55E" }}>
|
||||
{kpi.delta}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex-shrink-0 ml-4">
|
||||
<div
|
||||
className="w-12 h-12 rounded-full flex items-center justify-center text-white"
|
||||
style={{ backgroundColor: "#1F3A5F" }}
|
||||
>
|
||||
<kpi.icon size={24} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{kpi.delta}
|
||||
</Text>
|
||||
)}
|
||||
{kpi.sub && (
|
||||
<Text size="xs" c="dimmed" mt="auto">
|
||||
{kpi.sub}
|
||||
</Text>
|
||||
)}
|
||||
</Card>
|
||||
</Grid.Col>
|
||||
))}
|
||||
</div>
|
||||
</Grid>
|
||||
|
||||
{/* Row 2: Line Chart Section */}
|
||||
<div
|
||||
className="rounded-xl shadow-sm p-6 mb-6"
|
||||
style={{
|
||||
...cardStyle,
|
||||
borderRadius: "12px",
|
||||
boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
|
||||
padding: "1.5rem",
|
||||
marginBottom: "1.5rem",
|
||||
}}
|
||||
>
|
||||
<h3
|
||||
className="text-lg font-semibold mb-4"
|
||||
style={textStyle}
|
||||
>
|
||||
Pemasukan vs Pengeluaran
|
||||
</h3>
|
||||
<ResponsiveContainer width="100%" height={300}>
|
||||
<LineChart data={incomeExpenseData}>
|
||||
<CartesianGrid
|
||||
strokeDasharray="3 3"
|
||||
vertical={false}
|
||||
stroke={dark ? "#334155" : "#E5E7EB"}
|
||||
/>
|
||||
<XAxis
|
||||
{/* Charts Section */}
|
||||
<Grid gutter="lg">
|
||||
{/* Grafik Pemasukan vs Pengeluaran */}
|
||||
<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">
|
||||
Pemasukan vs Pengeluaran
|
||||
</Title>
|
||||
<BarChart
|
||||
h={300}
|
||||
data={incomeExpenseData}
|
||||
dataKey="month"
|
||||
axisLine={false}
|
||||
tickLine={false}
|
||||
tick={{ fill: dark ? "#9CA3AF" : "#6B7280" }}
|
||||
series={[
|
||||
{ name: "income", color: "green", label: "Pemasukan" },
|
||||
{ name: "expense", color: "red", label: "Pengeluaran" },
|
||||
]}
|
||||
withLegend
|
||||
/>
|
||||
<YAxis
|
||||
axisLine={false}
|
||||
tickLine={false}
|
||||
tick={{ fill: dark ? "#9CA3AF" : "#6B7280" }}
|
||||
tickFormatter={(value) => `${value}jt`}
|
||||
/>
|
||||
<Tooltip
|
||||
contentStyle={{
|
||||
backgroundColor: dark ? "#1F2937" : "white",
|
||||
border: `1px solid ${dark ? "#374151" : "#E5E7EB"}`,
|
||||
borderRadius: "8px",
|
||||
color: dark ? "white" : "#1F2937",
|
||||
}}
|
||||
/>
|
||||
<Line
|
||||
type="monotone"
|
||||
dataKey="income"
|
||||
stroke="#22C55E"
|
||||
strokeWidth={3}
|
||||
dot={{ fill: "#22C55E", strokeWidth: 2, r: 5 }}
|
||||
activeDot={{ r: 7 }}
|
||||
name="Pemasukan"
|
||||
/>
|
||||
<Line
|
||||
type="monotone"
|
||||
dataKey="expense"
|
||||
stroke="#EF4444"
|
||||
strokeWidth={3}
|
||||
dot={{ fill: "#EF4444", strokeWidth: 2, r: 5 }}
|
||||
activeDot={{ r: 7 }}
|
||||
name="Pengeluaran"
|
||||
/>
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
</Card>
|
||||
</Grid.Col>
|
||||
|
||||
{/* Legend */}
|
||||
<div className="flex items-center gap-6 mt-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<div
|
||||
className="w-3 h-3 rounded-full"
|
||||
style={{ backgroundColor: "#22C55E" }}
|
||||
/>
|
||||
<span className="text-sm" style={subtitleStyle}>
|
||||
Pemasukan
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div
|
||||
className="w-3 h-3 rounded-full"
|
||||
style={{ backgroundColor: "#EF4444" }}
|
||||
/>
|
||||
<span className="text-sm" style={subtitleStyle}>
|
||||
Pengeluaran
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Row 3: Analytics Section */}
|
||||
|
||||
|
||||
<div
|
||||
className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6"
|
||||
style={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: "repeat(2, 1fr)",
|
||||
gap: "1.5rem",
|
||||
marginBottom: "1.5rem",
|
||||
}}
|
||||
>
|
||||
{/* Left: Horizontal Bar Chart */}
|
||||
<div
|
||||
className="rounded-xl shadow-sm p-6"
|
||||
style={{
|
||||
...cardStyle,
|
||||
borderRadius: "12px",
|
||||
boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
|
||||
padding: "1.5rem",
|
||||
}}
|
||||
>
|
||||
<h3
|
||||
className="text-lg font-semibold mb-4"
|
||||
style={textStyle}
|
||||
{/* 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" }}
|
||||
>
|
||||
Alokasi Anggaran Per Sektor
|
||||
</h3>
|
||||
<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 ? "#9CA3AF" : "#6B7280" }}
|
||||
tickFormatter={(value) => `${value}jt`}
|
||||
/>
|
||||
<YAxis
|
||||
dataKey="sector"
|
||||
type="category"
|
||||
axisLine={false}
|
||||
tickLine={false}
|
||||
tick={{ fill: dark ? "#9CA3AF" : "#374151" }}
|
||||
width={120}
|
||||
/>
|
||||
<Tooltip
|
||||
contentStyle={{
|
||||
backgroundColor: dark ? "#1F2937" : "white",
|
||||
border: `1px solid ${dark ? "#374151" : "#E5E7EB"}`,
|
||||
borderRadius: "8px",
|
||||
color: dark ? "white" : "#1F2937",
|
||||
}}
|
||||
/>
|
||||
<Bar dataKey="amount" radius={[0, 4, 4, 0]}>
|
||||
{allocationData.map((entry, index) => (
|
||||
<Cell
|
||||
key={`cell-${index}`}
|
||||
fill={COLORS[index % COLORS.length]}
|
||||
/>
|
||||
<Title order={3} fw={500} mb="md">
|
||||
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>
|
||||
|
||||
<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
|
||||
</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)",
|
||||
}}
|
||||
>
|
||||
<Box>
|
||||
<Text size="sm" fw={500}>
|
||||
{fund.source}
|
||||
</Text>
|
||||
<Text size="sm" c="dimmed">
|
||||
Rp {fund.amount.toLocaleString()}jt
|
||||
</Text>
|
||||
</Box>
|
||||
<Badge
|
||||
variant="light"
|
||||
color={fund.status === "cair" ? "green" : "yellow"}
|
||||
>
|
||||
{fund.status}
|
||||
</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>
|
||||
))}
|
||||
</Bar>
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
{/* Right: Assistance Funds List */}
|
||||
<div
|
||||
className="rounded-xl shadow-sm p-6"
|
||||
style={{
|
||||
...cardStyle,
|
||||
borderRadius: "12px",
|
||||
boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
|
||||
padding: "1.5rem",
|
||||
}}
|
||||
>
|
||||
<h3
|
||||
className="text-lg font-semibold mb-4"
|
||||
style={textStyle}
|
||||
>
|
||||
Dana Bantuan dan Hibah
|
||||
</h3>
|
||||
<div className="space-y-3">
|
||||
{assistanceFundData.map((fund, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex items-center justify-between p-4 rounded-lg"
|
||||
style={{
|
||||
backgroundColor: dark ? "#334155" : "#F9FAFB",
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<p
|
||||
className="text-sm font-medium"
|
||||
style={textStyle}
|
||||
>
|
||||
{fund.source}
|
||||
</p>
|
||||
<p
|
||||
className="text-xs mt-1"
|
||||
style={subtitleStyle}
|
||||
>
|
||||
Rp {fund.amount.toLocaleString()}jt
|
||||
</p>
|
||||
</div>
|
||||
<span
|
||||
className="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium"
|
||||
style={{
|
||||
backgroundColor: fund.status === "cair" ? "#DCFCE7" : "#FEF3C7",
|
||||
color: fund.status === "cair" ? "#166534" : "#92400E",
|
||||
}}
|
||||
>
|
||||
{fund.status === "cair" ? (
|
||||
<IconCheck size={14} className="mr-1" />
|
||||
) : (
|
||||
<IconClock size={14} className="mr-1" />
|
||||
)}
|
||||
{fund.status}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
</div>
|
||||
{/* Row 4: Report Section */}
|
||||
<div
|
||||
className="rounded-xl shadow-sm p-6"
|
||||
style={{
|
||||
...cardStyle,
|
||||
borderRadius: "12px",
|
||||
boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
|
||||
padding: "1.5rem",
|
||||
}}
|
||||
>
|
||||
<h3
|
||||
className="text-lg font-semibold mb-6"
|
||||
style={textStyle}
|
||||
>
|
||||
Laporan APBDes
|
||||
</h3>
|
||||
<div
|
||||
className="grid grid-cols-1 md:grid-cols-2 gap-8"
|
||||
style={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: "repeat(2, 1fr)",
|
||||
gap: "2rem",
|
||||
}}
|
||||
>
|
||||
{/* Left: Pendapatan */}
|
||||
<div>
|
||||
<h4
|
||||
className="text-base font-semibold mb-4"
|
||||
style={textStyle}
|
||||
<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)" }}
|
||||
>
|
||||
Pendapatan
|
||||
</h4>
|
||||
<div className="space-y-3">
|
||||
{apbdReport.income.map((item, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex items-center justify-between py-2"
|
||||
style={{
|
||||
borderBottom: `1px solid ${dark ? "#334155" : "#F3F4F6"}`,
|
||||
}}
|
||||
<Group justify="space-between">
|
||||
<Text fw={700}>Saldo:</Text>
|
||||
<Text
|
||||
fw={700}
|
||||
c={
|
||||
apbdReport.totalIncome > apbdReport.totalExpenses
|
||||
? "green"
|
||||
: "red"
|
||||
}
|
||||
>
|
||||
<span className="text-sm" style={subtitleStyle}>
|
||||
{item.category}
|
||||
</span>
|
||||
<span
|
||||
className="text-sm font-medium"
|
||||
style={{ color: "#22C55E" }}
|
||||
>
|
||||
Rp {item.amount.toLocaleString()}jt
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
<div
|
||||
className="flex items-center justify-between py-3 mt-4 pt-4"
|
||||
style={{
|
||||
borderTop: `2px solid ${dark ? "#334155" : "#E5E7EB"}`,
|
||||
}}
|
||||
>
|
||||
<span className="text-base font-bold" style={textStyle}>
|
||||
Total Pendapatan
|
||||
</span>
|
||||
<span
|
||||
className="text-base font-bold"
|
||||
style={{ color: "#22C55E" }}
|
||||
>
|
||||
Rp {apbdReport.totalIncome.toLocaleString()}jt
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right: Belanja */}
|
||||
<div>
|
||||
<h4
|
||||
className="text-base font-semibold mb-4"
|
||||
style={textStyle}
|
||||
>
|
||||
Belanja
|
||||
</h4>
|
||||
<div className="space-y-3">
|
||||
{apbdReport.expenses.map((item, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex items-center justify-between py-2"
|
||||
style={{
|
||||
borderBottom: `1px solid ${dark ? "#334155" : "#F3F4F6"}`,
|
||||
}}
|
||||
>
|
||||
<span className="text-sm" style={subtitleStyle}>
|
||||
{item.category}
|
||||
</span>
|
||||
<span
|
||||
className="text-sm font-medium"
|
||||
style={{ color: "#EF4444" }}
|
||||
>
|
||||
Rp {item.amount.toLocaleString()}jt
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
<div
|
||||
className="flex items-center justify-between py-3 mt-4 pt-4"
|
||||
style={{
|
||||
borderTop: `2px solid ${dark ? "#334155" : "#E5E7EB"}`,
|
||||
}}
|
||||
>
|
||||
<span className="text-base font-bold" style={textStyle}>
|
||||
Total Belanja
|
||||
</span>
|
||||
<span
|
||||
className="text-base font-bold"
|
||||
style={{ color: "#EF4444" }}
|
||||
>
|
||||
Rp {apbdReport.totalExpenses.toLocaleString()}jt
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer: Balance */}
|
||||
<div
|
||||
className="flex items-center justify-between py-4 mt-6 pt-6"
|
||||
style={{
|
||||
borderTop: `2px solid ${dark ? "#334155" : "#E5E7EB"}`,
|
||||
}}
|
||||
>
|
||||
<span className="text-lg font-bold" style={textStyle}>
|
||||
Saldo
|
||||
</span>
|
||||
<span
|
||||
className="text-lg font-bold"
|
||||
style={{
|
||||
color:
|
||||
apbdReport.totalIncome > apbdReport.totalExpenses
|
||||
? "#22C55E"
|
||||
: "#EF4444",
|
||||
}}
|
||||
>
|
||||
Rp{" "}
|
||||
{(
|
||||
apbdReport.totalIncome - apbdReport.totalExpenses
|
||||
).toLocaleString()}
|
||||
jt
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
Rp{" "}
|
||||
{(
|
||||
apbdReport.totalIncome - apbdReport.totalExpenses
|
||||
).toLocaleString()}
|
||||
jt
|
||||
</Text>
|
||||
</Group>
|
||||
</Box>
|
||||
</Card>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
</Stack>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default KeuanganAnggaran;
|
||||
export default KeuanganAnggaran;
|
||||
@@ -1,3 +1,21 @@
|
||||
import {
|
||||
ActionIcon,
|
||||
Box,
|
||||
Card,
|
||||
Divider,
|
||||
Grid,
|
||||
GridCol,
|
||||
Group,
|
||||
List,
|
||||
Badge as MantineBadge,
|
||||
Progress as MantineProgress,
|
||||
Skeleton,
|
||||
Stack,
|
||||
Text,
|
||||
ThemeIcon,
|
||||
Title,
|
||||
useMantineColorScheme,
|
||||
} from "@mantine/core";
|
||||
import {
|
||||
Bar,
|
||||
BarChart,
|
||||
@@ -10,381 +28,518 @@ import {
|
||||
XAxis,
|
||||
YAxis,
|
||||
} from "recharts";
|
||||
import { useMantineColorScheme } from "@mantine/core";
|
||||
import { IconMessage } from "@tabler/icons-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
const KinerjaDivisi = () => {
|
||||
const { colorScheme } = useMantineColorScheme();
|
||||
const dark = colorScheme === "dark";
|
||||
|
||||
// Top row - 4 activity cards
|
||||
const activities = [
|
||||
// Data for division progress chart
|
||||
const divisionProgressData = [
|
||||
{ name: "Sekretariat", selesai: 12, berjalan: 5, tertunda: 2 },
|
||||
{ name: "Keuangan", selesai: 8, berjalan: 7, tertunda: 1 },
|
||||
{ name: "Sosial", selesai: 10, berjalan: 3, tertunda: 4 },
|
||||
{ name: "Humas", selesai: 6, berjalan: 9, tertunda: 3 },
|
||||
];
|
||||
|
||||
// Division task summaries
|
||||
const divisionTasks = [
|
||||
{
|
||||
title: "Rakor 2025",
|
||||
progress: 100,
|
||||
date: "15 Jan 2025",
|
||||
name: "Sekretariat",
|
||||
tasks: [
|
||||
{ title: "Laporan Bulanan", status: "selesai" },
|
||||
{ title: "Arsip Dokumen", status: "berjalan" },
|
||||
{ title: "Undangan Rapat", status: "tertunda" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Pemutakhiran Indeks Desa",
|
||||
progress: 100,
|
||||
date: "20 Feb 2025",
|
||||
name: "Keuangan",
|
||||
tasks: [
|
||||
{ title: "Laporan APBDes", status: "selesai" },
|
||||
{ title: "Verifikasi Dana", status: "tertunda" },
|
||||
{ title: "Pengeluaran Harian", status: "berjalan" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Mengurus akta cerai warga",
|
||||
progress: 100,
|
||||
date: "5 Mar 2025",
|
||||
name: "Sosial",
|
||||
tasks: [
|
||||
{ title: "Program Bantuan", status: "selesai" },
|
||||
{ title: "Kegiatan Posyandu", status: "berjalan" },
|
||||
{ title: "Monitoring Stunting", status: "tertunda" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Pasek 7 desa adat",
|
||||
name: "Humas",
|
||||
tasks: [
|
||||
{ title: "Publikasi Kegiatan", status: "selesai" },
|
||||
{ title: "Koordinasi Media", status: "berjalan" },
|
||||
{ title: "Laporan Kegiatan", status: "tertunda" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
// Archive items
|
||||
const archiveItems = [
|
||||
{ name: "Surat Keputusan", count: 12 },
|
||||
{ name: "Laporan Keuangan", count: 8 },
|
||||
{ name: "Dokumentasi", count: 24 },
|
||||
{ name: "Notulensi Rapat", count: 15 },
|
||||
];
|
||||
|
||||
// Activity progress
|
||||
const activityProgress = [
|
||||
{
|
||||
name: "Pembangunan Jalan",
|
||||
progress: 75,
|
||||
date: "15 Feb 2026",
|
||||
status: "berjalan",
|
||||
},
|
||||
{
|
||||
name: "Posyandu Bulanan",
|
||||
progress: 100,
|
||||
date: "10 Mar 2025",
|
||||
date: "10 Feb 2026",
|
||||
status: "selesai",
|
||||
},
|
||||
{
|
||||
name: "Vaksinasi Massal",
|
||||
progress: 45,
|
||||
date: "20 Feb 2026",
|
||||
status: "berjalan",
|
||||
},
|
||||
{
|
||||
name: "Festival Budaya",
|
||||
progress: 20,
|
||||
date: "5 Mar 2026",
|
||||
status: "berjalan",
|
||||
},
|
||||
];
|
||||
|
||||
// Document statistics
|
||||
const documentStats = [
|
||||
{ name: "Gambar", value: 300, color: "#FAC858" },
|
||||
{ name: "Dokumen", value: 310, color: "#92CC76" },
|
||||
{ name: "Gambar", value: 42 },
|
||||
{ name: "Dokumen", value: 87 },
|
||||
];
|
||||
|
||||
// Activity progress statistics
|
||||
const activityProgressStats = [
|
||||
{ name: "Selesai", value: 83.33, fill: "#92CC76" },
|
||||
{ name: "Dikerjakan", value: 16.67, fill: "#FAC858" },
|
||||
{ name: "Segera Dikerjakan", value: 0, fill: "#5470C6" },
|
||||
{ name: "Dibatalkan", value: 0, fill: "#EE6767" },
|
||||
{ name: "Selesai", value: 12 },
|
||||
{ name: "Dikerjakan", value: 8 },
|
||||
{ name: "Segera Dikerjakan", value: 5 },
|
||||
{ name: "Dibatalkan", value: 2 },
|
||||
];
|
||||
|
||||
const COLORS = ["#10B981", "#F59E0B", "#EF4444", "#6B7280"];
|
||||
const STATUS_COLORS: Record<string, string> = {
|
||||
selesai: "green",
|
||||
berjalan: "blue",
|
||||
tertunda: "red",
|
||||
proses: "yellow",
|
||||
};
|
||||
|
||||
// Discussion data
|
||||
const discussions = [
|
||||
{
|
||||
title: "Pembahasan APBDes 2026",
|
||||
sender: "Kepala Desa",
|
||||
date: "10 Mar 2025",
|
||||
timestamp: "2 jam yang lalu",
|
||||
},
|
||||
{
|
||||
title: "Kegiatan Posyandu",
|
||||
sender: "Divisi Sosial",
|
||||
date: "9 Mar 2025",
|
||||
timestamp: "5 jam yang lalu",
|
||||
},
|
||||
{
|
||||
title: "Festival Budaya",
|
||||
sender: "Divisi Humas",
|
||||
date: "8 Mar 2025",
|
||||
timestamp: "1 hari yang lalu",
|
||||
},
|
||||
];
|
||||
|
||||
// Today's agenda
|
||||
const todayAgenda = [
|
||||
{ time: "09:00", event: "Rapat Evaluasi Bulanan" },
|
||||
{ time: "14:00", event: "Koordinasi Program Bantuan" },
|
||||
];
|
||||
|
||||
return (
|
||||
<div
|
||||
className="min-h-screen"
|
||||
style={{
|
||||
backgroundColor: dark ? "#10192D" : "#F3F4F6",
|
||||
minHeight: "100vh",
|
||||
padding: "1.5rem",
|
||||
}}
|
||||
>
|
||||
{/* Top Row - 4 Activity Cards */}
|
||||
<div
|
||||
className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6"
|
||||
style={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: "repeat(4, 1fr)",
|
||||
gap: "1.5rem",
|
||||
marginBottom: "1.5rem",
|
||||
}}
|
||||
<Stack gap="lg">
|
||||
{/* Grafik Progres Tugas per Divisi */}
|
||||
<Card
|
||||
p="md"
|
||||
radius="md"
|
||||
withBorder
|
||||
bg={dark ? "#141D34" : "white"}
|
||||
style={{ borderColor: dark ? "#141D34" : "white" }}
|
||||
>
|
||||
{activities.map((activity, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="rounded-xl shadow-sm p-5"
|
||||
style={{
|
||||
backgroundColor: dark ? "#141D34" : "white",
|
||||
border: `1px solid ${dark ? "#141D34" : "white"}`,
|
||||
borderRadius: "12px",
|
||||
boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
|
||||
padding: "1.25rem",
|
||||
}}
|
||||
>
|
||||
{/* Dark blue title bar */}
|
||||
<div
|
||||
className="text-white px-3 py-2 rounded-t-lg -mx-5 -mt-5 mb-4"
|
||||
style={{ backgroundColor: "#1E3A5F" }}
|
||||
<Title order={4} mb="md" c={dark ? "white" : "darmasaba-navy"}>
|
||||
Grafik Progres Tugas per Divisi
|
||||
</Title>
|
||||
<ResponsiveContainer width="100%" height={300}>
|
||||
<BarChart data={divisionProgressData}>
|
||||
<CartesianGrid
|
||||
strokeDasharray="3 3"
|
||||
vertical={false}
|
||||
stroke={dark ? "#141D34" : "white"}
|
||||
/>
|
||||
<XAxis
|
||||
dataKey="name"
|
||||
axisLine={false}
|
||||
tickLine={false}
|
||||
tick={{
|
||||
fill: dark
|
||||
? "var(--mantine-color-text)"
|
||||
: "var(--mantine-color-text)",
|
||||
}}
|
||||
/>
|
||||
<YAxis
|
||||
axisLine={false}
|
||||
tickLine={false}
|
||||
tick={{
|
||||
fill: dark
|
||||
? "var(--mantine-color-text)"
|
||||
: "var(--mantine-color-text)",
|
||||
}}
|
||||
/>
|
||||
<Tooltip
|
||||
contentStyle={
|
||||
dark
|
||||
? {
|
||||
backgroundColor: "var(--mantine-color-dark-7)",
|
||||
borderColor: "var(--mantine-color-dark-6)",
|
||||
}
|
||||
: {}
|
||||
}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="selesai"
|
||||
stackId="a"
|
||||
fill="#10B981"
|
||||
name="Selesai"
|
||||
radius={[4, 4, 0, 0]}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="berjalan"
|
||||
stackId="a"
|
||||
fill="#3B82F6"
|
||||
name="Berjalan"
|
||||
radius={[4, 4, 0, 0]}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="tertunda"
|
||||
stackId="a"
|
||||
fill="#EF4444"
|
||||
name="Tertunda"
|
||||
radius={[4, 4, 0, 0]}
|
||||
/>
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</Card>
|
||||
|
||||
{/* Ringkasan Tugas per Divisi */}
|
||||
<Grid gutter="md">
|
||||
{divisionTasks.map((division, index) => (
|
||||
<GridCol key={index} span={{ base: 12, md: 6, lg: 3 }}>
|
||||
<Card
|
||||
p="md"
|
||||
radius="md"
|
||||
withBorder
|
||||
bg={dark ? "#141D34" : "white"}
|
||||
style={{ borderColor: dark ? "#141D34" : "white" }}
|
||||
h="100%"
|
||||
>
|
||||
<h3 className="text-sm font-semibold">{activity.title}</h3>
|
||||
</div>
|
||||
|
||||
{/* Orange progress bar */}
|
||||
<div
|
||||
className="w-full rounded-full h-2 mb-3"
|
||||
style={{ backgroundColor: dark ? "#2d3748" : "#E5E7EB" }}
|
||||
>
|
||||
<div
|
||||
className="bg-orange-500 h-2 rounded-full"
|
||||
style={{ width: `${activity.progress}%` }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Date and badge */}
|
||||
<div className="flex justify-between items-center">
|
||||
<span
|
||||
className="text-xs"
|
||||
style={{ color: dark ? "#9CA3AF" : "#6B7280" }}
|
||||
>
|
||||
{activity.date}
|
||||
</span>
|
||||
<span className="text-xs bg-green-100 text-green-700 px-2 py-1 rounded-full font-medium">
|
||||
Selesai
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Second Row - Charts */}
|
||||
<div
|
||||
className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6"
|
||||
style={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))",
|
||||
gap: "1.5rem",
|
||||
marginBottom: "1.5rem",
|
||||
}}
|
||||
>
|
||||
{/* Left Card - Jumlah Dokumen (Bar Chart) */}
|
||||
<div
|
||||
className="rounded-xl shadow-sm p-5"
|
||||
style={{
|
||||
backgroundColor: dark ? "#141D34" : "white",
|
||||
border: `1px solid ${dark ? "#141D34" : "white"}`,
|
||||
borderRadius: "12px",
|
||||
boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
|
||||
padding: "1.25rem",
|
||||
}}
|
||||
>
|
||||
<h3
|
||||
className="text-lg font-semibold mb-4"
|
||||
style={{ color: dark ? "white" : "#1F2937" }}
|
||||
>
|
||||
Jumlah Dokumen
|
||||
</h3>
|
||||
<ResponsiveContainer width="100%" height={250}>
|
||||
<BarChart data={documentStats}>
|
||||
<CartesianGrid
|
||||
strokeDasharray="3 3"
|
||||
vertical={false}
|
||||
stroke={dark ? "#2d3748" : "#E5E7EB"}
|
||||
/>
|
||||
<XAxis
|
||||
dataKey="name"
|
||||
axisLine={false}
|
||||
tickLine={false}
|
||||
tick={{ fill: dark ? "#9CA3AF" : "#6B7280" }}
|
||||
/>
|
||||
<YAxis
|
||||
axisLine={false}
|
||||
tickLine={false}
|
||||
tick={{ fill: dark ? "#9CA3AF" : "#6B7280" }}
|
||||
/>
|
||||
<Tooltip
|
||||
contentStyle={{
|
||||
backgroundColor: dark ? "#1F2937" : "white",
|
||||
border: `1px solid ${dark ? "#374151" : "#E5E7EB"}`,
|
||||
borderRadius: "8px",
|
||||
color: dark ? "white" : "#1F2937",
|
||||
}}
|
||||
/>
|
||||
<Bar dataKey="value" radius={[4, 4, 0, 0]}>
|
||||
{documentStats.map((entry, index) => (
|
||||
<Cell key={`cell-${index}`} fill={entry.color} />
|
||||
<Title order={4} mb="sm" c={dark ? "white" : "darmasaba-navy"}>
|
||||
{division.name}
|
||||
</Title>
|
||||
<Stack gap="sm">
|
||||
{division.tasks.map((task, taskIndex) => (
|
||||
<Box key={taskIndex}>
|
||||
<Group justify="space-between">
|
||||
<Text size="sm" c={dark ? "white" : "darmasaba-navy"}>
|
||||
{task.title}
|
||||
</Text>
|
||||
<MantineBadge
|
||||
color={STATUS_COLORS[task.status] || "gray"}
|
||||
variant="light"
|
||||
>
|
||||
{task.status}
|
||||
</MantineBadge>
|
||||
</Group>
|
||||
</Box>
|
||||
))}
|
||||
</Bar>
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</Stack>
|
||||
</Card>
|
||||
</GridCol>
|
||||
))}
|
||||
</Grid>
|
||||
|
||||
{/* Right Card - Progres Kegiatan (Pie Chart) */}
|
||||
<div
|
||||
className="rounded-xl shadow-sm p-5"
|
||||
style={{
|
||||
backgroundColor: dark ? "#141D34" : "white",
|
||||
border: `1px solid ${dark ? "#141D34" : "white"}`,
|
||||
borderRadius: "12px",
|
||||
boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
|
||||
padding: "1.25rem",
|
||||
}}
|
||||
>
|
||||
<h3
|
||||
className="text-lg font-semibold mb-4"
|
||||
style={{ color: dark ? "white" : "#1F2937" }}
|
||||
>
|
||||
Progres Kegiatan
|
||||
</h3>
|
||||
<ResponsiveContainer width="100%" height={250}>
|
||||
<PieChart>
|
||||
<Pie
|
||||
data={activityProgressStats.filter(item => item.value > 0)}
|
||||
cx="50%"
|
||||
cy="50%"
|
||||
outerRadius={80}
|
||||
dataKey="value"
|
||||
label={({ name, percent }) =>
|
||||
`${name}: ${percent ? (percent * 100).toFixed(0) : 0}%`
|
||||
}
|
||||
>
|
||||
{activityProgressStats
|
||||
.filter(item => item.value > 0)
|
||||
.map((entry, index) => (
|
||||
<Cell key={`cell-${index}`} fill={entry.fill} />
|
||||
))}
|
||||
</Pie>
|
||||
<Tooltip
|
||||
contentStyle={{
|
||||
backgroundColor: dark ? "#1F2937" : "white",
|
||||
border: `1px solid ${dark ? "#374151" : "#E5E7EB"}`,
|
||||
borderRadius: "8px",
|
||||
color: dark ? "white" : "#1F2937",
|
||||
}}
|
||||
/>
|
||||
</PieChart>
|
||||
</ResponsiveContainer>
|
||||
|
||||
{/* Legend */}
|
||||
<div className="mt-4 space-y-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-3 h-3 rounded-full bg-blue-500"></div>
|
||||
<span
|
||||
className="text-sm"
|
||||
style={{ color: dark ? "#9CA3AF" : "#4B5563" }}
|
||||
>
|
||||
Segera Dikerjakan
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-3 h-3 rounded-full bg-yellow-500"></div>
|
||||
<span
|
||||
className="text-sm"
|
||||
style={{ color: dark ? "#9CA3AF" : "#4B5563" }}
|
||||
>
|
||||
Dikerjakan
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-3 h-3 rounded-full bg-green-500"></div>
|
||||
<span
|
||||
className="text-sm"
|
||||
style={{ color: dark ? "#9CA3AF" : "#4B5563" }}
|
||||
>
|
||||
Selesai
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-3 h-3 rounded-full bg-red-500"></div>
|
||||
<span
|
||||
className="text-sm"
|
||||
style={{ color: dark ? "#9CA3AF" : "#4B5563" }}
|
||||
>
|
||||
Dibatalkan
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom Row */}
|
||||
<div
|
||||
className="grid grid-cols-1 lg:grid-cols-2 gap-6"
|
||||
style={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))",
|
||||
gap: "1.5rem",
|
||||
}}
|
||||
{/* Arsip Digital Perangkat Desa */}
|
||||
<Card
|
||||
p="md"
|
||||
radius="md"
|
||||
withBorder
|
||||
bg={dark ? "#141D34" : "white"}
|
||||
style={{ borderColor: dark ? "#141D34" : "white" }}
|
||||
>
|
||||
{/* Left Card - Diskusi */}
|
||||
<div
|
||||
className="rounded-xl shadow-sm p-5"
|
||||
style={{
|
||||
backgroundColor: dark ? "#141D34" : "white",
|
||||
border: `1px solid ${dark ? "#141D34" : "white"}`,
|
||||
borderRadius: "12px",
|
||||
boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
|
||||
padding: "1.25rem",
|
||||
}}
|
||||
>
|
||||
<h3
|
||||
className="text-lg font-semibold mb-4"
|
||||
style={{ color: dark ? "white" : "#1F2937" }}
|
||||
>
|
||||
Diskusi
|
||||
</h3>
|
||||
<div className="space-y-3">
|
||||
{discussions.map((discussion, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex items-start gap-3 p-3 rounded-lg transition-colors"
|
||||
style={{
|
||||
backgroundColor: dark ? "#1F2937" : "#F9FAFB",
|
||||
}}
|
||||
<Title order={4} mb="md" c={dark ? "white" : "darmasaba-navy"}>
|
||||
Arsip Digital Perangkat Desa
|
||||
</Title>
|
||||
<Grid gutter="md">
|
||||
{archiveItems.map((item, index) => (
|
||||
<GridCol key={index} span={{ base: 12, md: 6, lg: 3 }}>
|
||||
<Card
|
||||
p="md"
|
||||
radius="md"
|
||||
withBorder
|
||||
bg={dark ? "#263852ff" : "#F1F5F9"}
|
||||
style={{ borderColor: dark ? "#263852ff" : "#F1F5F9" }}
|
||||
>
|
||||
<div className="flex-shrink-0">
|
||||
<div
|
||||
className="w-8 h-8 rounded-full flex items-center justify-center"
|
||||
style={{ backgroundColor: "#DBEAFE" }}
|
||||
>
|
||||
<IconMessage
|
||||
className="w-4 h-4"
|
||||
style={{ color: "#1E3A5F" }}
|
||||
stroke={2}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h4
|
||||
className="text-sm font-medium"
|
||||
style={{ color: dark ? "white" : "#1F2937" }}
|
||||
>
|
||||
{discussion.title}
|
||||
</h4>
|
||||
<p
|
||||
className="text-xs mt-1"
|
||||
style={{ color: dark ? "#9CA3AF" : "#6B7280" }}
|
||||
>
|
||||
{discussion.sender} • {discussion.date}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<Group justify="space-between">
|
||||
<Text c={dark ? "white" : "darmasaba-navy"} fw={500}>
|
||||
{item.name}
|
||||
</Text>
|
||||
<Text c={dark ? "white" : "darmasaba-navy"} fw={700}>
|
||||
{item.count}
|
||||
</Text>
|
||||
</Group>
|
||||
</Card>
|
||||
</GridCol>
|
||||
))}
|
||||
</Grid>
|
||||
</Card>
|
||||
|
||||
{/* Right Card - Acara Hari Ini */}
|
||||
<div
|
||||
className="rounded-xl shadow-sm p-5"
|
||||
style={{
|
||||
backgroundColor: dark ? "#141D34" : "white",
|
||||
border: `1px solid ${dark ? "#141D34" : "white"}`,
|
||||
borderRadius: "12px",
|
||||
boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
|
||||
padding: "1.25rem",
|
||||
}}
|
||||
>
|
||||
<h3
|
||||
className="text-lg font-semibold mb-4"
|
||||
style={{ color: dark ? "white" : "#1F2937" }}
|
||||
>
|
||||
Acara Hari Ini
|
||||
</h3>
|
||||
<div className="flex items-center justify-center h-32">
|
||||
<p
|
||||
className="text-sm"
|
||||
style={{ color: dark ? "#9CA3AF" : "#6B7280" }}
|
||||
{/* Kartu Progres Kegiatan */}
|
||||
<Card
|
||||
p="md"
|
||||
radius="md"
|
||||
withBorder
|
||||
bg={dark ? "#141D34" : "white"}
|
||||
style={{ borderColor: dark ? "#141D34" : "white" }}
|
||||
>
|
||||
<Title order={4} mb="md" c={dark ? "white" : "darmasaba-navy"}>
|
||||
Progres Kegiatan / Program
|
||||
</Title>
|
||||
<Stack gap="md">
|
||||
{activityProgress.map((activity, index) => (
|
||||
<Card
|
||||
key={index}
|
||||
p="md"
|
||||
radius="md"
|
||||
withBorder
|
||||
bg={dark ? "#263852ff" : "#F1F5F9"}
|
||||
style={{ borderColor: dark ? "#263852ff" : "#F1F5F9" }}
|
||||
>
|
||||
Tidak ada acara hari ini
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Group justify="space-between" mb="sm">
|
||||
<Text c={dark ? "white" : "darmasaba-navy"} fw={500}>
|
||||
{activity.name}
|
||||
</Text>
|
||||
<MantineBadge
|
||||
color={STATUS_COLORS[activity.status] || "gray"}
|
||||
variant="light"
|
||||
>
|
||||
{activity.status}
|
||||
</MantineBadge>
|
||||
</Group>
|
||||
<Group justify="space-between">
|
||||
<MantineProgress
|
||||
value={activity.progress}
|
||||
size="sm"
|
||||
radius="xl"
|
||||
color={activity.progress === 100 ? "green" : "blue"}
|
||||
w="calc(100% - 80px)"
|
||||
/>
|
||||
<Text size="sm" c={dark ? "white" : "darmasaba-navy"}>
|
||||
{activity.progress}%
|
||||
</Text>
|
||||
</Group>
|
||||
<Text size="sm" c="dimmed" mt="sm">
|
||||
{activity.date}
|
||||
</Text>
|
||||
</Card>
|
||||
))}
|
||||
</Stack>
|
||||
</Card>
|
||||
|
||||
{/* Statistik Dokumen & Progres Kegiatan */}
|
||||
<Grid gutter="md">
|
||||
<GridCol span={{ base: 12, lg: 6 }}>
|
||||
<Card
|
||||
p="md"
|
||||
radius="md"
|
||||
withBorder
|
||||
bg={dark ? "#141D34" : "white"}
|
||||
style={{ borderColor: dark ? "#141D34" : "white" }}
|
||||
>
|
||||
<Title order={4} mb="md" c={dark ? "white" : "darmasaba-navy"}>
|
||||
Jumlah Dokumen
|
||||
</Title>
|
||||
<ResponsiveContainer width="100%" height={200}>
|
||||
<BarChart data={documentStats}>
|
||||
<CartesianGrid
|
||||
strokeDasharray="3 3"
|
||||
vertical={false}
|
||||
stroke={dark ? "#141D34" : "white"}
|
||||
/>
|
||||
<XAxis
|
||||
dataKey="name"
|
||||
axisLine={false}
|
||||
tickLine={false}
|
||||
tick={{
|
||||
fill: dark
|
||||
? "var(--mantine-color-text)"
|
||||
: "var(--mantine-color-text)",
|
||||
}}
|
||||
/>
|
||||
<YAxis
|
||||
axisLine={false}
|
||||
tickLine={false}
|
||||
tick={{
|
||||
fill: dark
|
||||
? "var(--mantine-color-text)"
|
||||
: "var(--mantine-color-text)",
|
||||
}}
|
||||
/>
|
||||
<Tooltip
|
||||
contentStyle={
|
||||
dark
|
||||
? {
|
||||
backgroundColor: "var(--mantine-color-dark-7)",
|
||||
borderColor: "var(--mantine-color-dark-6)",
|
||||
}
|
||||
: {}
|
||||
}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="value"
|
||||
fill={
|
||||
dark
|
||||
? "var(--mantine-color-blue-6)"
|
||||
: "var(--mantine-color-blue-filled)"
|
||||
}
|
||||
radius={[4, 4, 0, 0]}
|
||||
/>
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</Card>
|
||||
</GridCol>
|
||||
|
||||
<GridCol span={{ base: 12, lg: 6 }}>
|
||||
<Card
|
||||
p="md"
|
||||
radius="md"
|
||||
withBorder
|
||||
bg={dark ? "#141D34" : "white"}
|
||||
style={{ borderColor: dark ? "#141D34" : "white" }}
|
||||
>
|
||||
<Title order={4} mb="md" c={dark ? "white" : "darmasaba-navy"}>
|
||||
Progres Kegiatan
|
||||
</Title>
|
||||
<ResponsiveContainer width="100%" height={200}>
|
||||
<PieChart>
|
||||
<Pie
|
||||
data={activityProgressStats}
|
||||
cx="50%"
|
||||
cy="50%"
|
||||
labelLine={false}
|
||||
outerRadius={80}
|
||||
fill="#8884d8"
|
||||
dataKey="value"
|
||||
label={({ name, percent }) =>
|
||||
`${name}: ${percent ? (percent * 100).toFixed(0) : "0"}%`
|
||||
}
|
||||
>
|
||||
{activityProgressStats.map((entry, index) => (
|
||||
<Cell
|
||||
key={`cell-${index}`}
|
||||
fill={COLORS[index % COLORS.length]}
|
||||
/>
|
||||
))}
|
||||
</Pie>
|
||||
<Tooltip
|
||||
contentStyle={
|
||||
dark
|
||||
? {
|
||||
backgroundColor: "var(--mantine-color-dark-7)",
|
||||
borderColor: "var(--mantine-color-dark-6)",
|
||||
}
|
||||
: {}
|
||||
}
|
||||
/>
|
||||
</PieChart>
|
||||
</ResponsiveContainer>
|
||||
</Card>
|
||||
</GridCol>
|
||||
</Grid>
|
||||
|
||||
{/* Diskusi Internal */}
|
||||
<Card
|
||||
p="md"
|
||||
radius="md"
|
||||
withBorder
|
||||
bg={dark ? "#141D34" : "white"}
|
||||
style={{ borderColor: dark ? "#141D34" : "white" }}
|
||||
>
|
||||
<Title order={4} mb="md" c={dark ? "white" : "darmasaba-navy"}>
|
||||
Diskusi Internal
|
||||
</Title>
|
||||
<Stack gap="sm">
|
||||
{discussions.map((discussion, index) => (
|
||||
<Card
|
||||
key={index}
|
||||
p="md"
|
||||
radius="md"
|
||||
withBorder
|
||||
bg={dark ? "#263852ff" : "#F1F5F9"}
|
||||
style={{ borderColor: dark ? "#263852ff" : "#F1F5F9" }}
|
||||
>
|
||||
<Group justify="space-between">
|
||||
<Text c={dark ? "white" : "darmasaba-navy"} fw={500}>
|
||||
{discussion.title}
|
||||
</Text>
|
||||
<Text size="sm" c="dimmed">
|
||||
{discussion.timestamp}
|
||||
</Text>
|
||||
</Group>
|
||||
<Text size="sm" c="dimmed">
|
||||
{discussion.sender}
|
||||
</Text>
|
||||
</Card>
|
||||
))}
|
||||
</Stack>
|
||||
</Card>
|
||||
|
||||
{/* Agenda / Acara Hari Ini */}
|
||||
<Card
|
||||
p="md"
|
||||
radius="md"
|
||||
withBorder
|
||||
bg={dark ? "#141D34" : "white"}
|
||||
style={{ borderColor: dark ? "#141D34" : "white" }}
|
||||
>
|
||||
<Title order={4} mb="md" c={dark ? "white" : "darmasaba-navy"}>
|
||||
Agenda / Acara Hari Ini
|
||||
</Title>
|
||||
{todayAgenda.length > 0 ? (
|
||||
<Stack gap="sm">
|
||||
{todayAgenda.map((agenda, index) => (
|
||||
<Group key={index} align="flex-start">
|
||||
<Box w={60}>
|
||||
<Text c="dimmed">{agenda.time}</Text>
|
||||
</Box>
|
||||
<Divider orientation="vertical" mx="sm" />
|
||||
<Text c={dark ? "white" : "darmasaba-navy"}>
|
||||
{agenda.event}
|
||||
</Text>
|
||||
</Group>
|
||||
))}
|
||||
</Stack>
|
||||
) : (
|
||||
<Text c="dimmed" ta="center" py="md">
|
||||
Tidak ada acara hari ini
|
||||
</Text>
|
||||
)}
|
||||
</Card>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
export default KinerjaDivisi;
|
||||
export default KinerjaDivisi;
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,11 +1,13 @@
|
||||
import {
|
||||
Badge,
|
||||
Box,
|
||||
Collapse,
|
||||
Image,
|
||||
Group,
|
||||
Input,
|
||||
NavLink as MantineNavLink,
|
||||
Stack,
|
||||
useMantineColorScheme
|
||||
Text,
|
||||
useMantineColorScheme,
|
||||
} from "@mantine/core";
|
||||
import { useLocation, useNavigate } from "@tanstack/react-router";
|
||||
import { ChevronDown, ChevronUp, Search } from "lucide-react";
|
||||
@@ -25,35 +27,29 @@ export function Sidebar({ className }: SidebarProps) {
|
||||
|
||||
// State for settings submenu collapse
|
||||
const [settingsOpen, setSettingsOpen] = useState(
|
||||
location.pathname.startsWith("/dashboard/pengaturan"),
|
||||
location.pathname.startsWith("/pengaturan"),
|
||||
);
|
||||
|
||||
// Define menu items with their paths
|
||||
const menuItems = [
|
||||
{ name: "Beranda", path: "/dashboard" },
|
||||
{ name: "Kinerja Divisi", path: "/dashboard/kinerja-divisi" },
|
||||
{
|
||||
name: "Pengaduan & Layanan Publik",
|
||||
path: "/dashboard/pengaduan-layanan-publik",
|
||||
},
|
||||
{ name: "Jenna Analytic", path: "/dashboard/jenna-analytic" },
|
||||
{
|
||||
name: "Demografi & Kependudukan",
|
||||
path: "/dashboard/demografi-pekerjaan",
|
||||
},
|
||||
{ name: "Keuangan & Anggaran", path: "/dashboard/keuangan-anggaran" },
|
||||
{ name: "Bumdes & UMKM Desa", path: "/dashboard/bumdes" },
|
||||
{ name: "Sosial", path: "/dashboard/sosial" },
|
||||
{ name: "Keamanan", path: "/dashboard/keamanan" },
|
||||
{ name: "Bantuan", path: "/dashboard/bantuan" },
|
||||
{ name: "Beranda", path: "/" },
|
||||
{ name: "Kinerja Divisi", path: "/kinerja-divisi" },
|
||||
{ name: "Pengaduan & Layanan Publik", path: "/pengaduan-layanan-publik" },
|
||||
{ name: "Jenna Analytic", path: "/jenna-analytic" },
|
||||
{ name: "Demografi & Kependudukan", path: "/demografi-pekerjaan" },
|
||||
{ name: "Keuangan & Anggaran", path: "/keuangan-anggaran" },
|
||||
{ name: "Bumdes & UMKM Desa", path: "/bumdes" },
|
||||
{ name: "Sosial", path: "/sosial" },
|
||||
{ name: "Keamanan", path: "/keamanan" },
|
||||
{ name: "Bantuan", path: "/bantuan" },
|
||||
];
|
||||
|
||||
// Settings submenu items
|
||||
const settingsItems = [
|
||||
{ name: "Umum", path: "/dashboard/pengaturan/umum" },
|
||||
{ name: "Notifikasi", path: "/dashboard/pengaturan/notifikasi" },
|
||||
{ name: "Keamanan", path: "/dashboard/pengaturan/keamanan" },
|
||||
{ name: "Akses & Tim", path: "/dashboard/pengaturan/akses-dan-tim" },
|
||||
{ name: "Umum", path: "/pengaturan/umum" },
|
||||
{ name: "Notifikasi", path: "/pengaturan/notifikasi" },
|
||||
{ name: "Keamanan", path: "/pengaturan/keamanan" },
|
||||
{ name: "Akses & Tim", path: "/pengaturan/akses-dan-tim" },
|
||||
];
|
||||
|
||||
// Check if any settings submenu is active
|
||||
@@ -61,12 +57,33 @@ export function Sidebar({ className }: SidebarProps) {
|
||||
(item) => location.pathname === item.path,
|
||||
);
|
||||
|
||||
const headerBgColor = colorScheme === "dark" ? "#ebedf0ff" : "#19355E";
|
||||
|
||||
return (
|
||||
<Box className={className}>
|
||||
{/* Logo */}
|
||||
<Image src={"/logo-desa-plus.png"} width={201} height={84} />
|
||||
<Box
|
||||
p="md"
|
||||
style={{ borderBottom: "1px solid var(--mantine-color-gray-3)" }}
|
||||
>
|
||||
<Group gap="xs">
|
||||
<Badge
|
||||
color="dark"
|
||||
variant="filled"
|
||||
size="xl"
|
||||
radius="md"
|
||||
py="xs"
|
||||
px="md"
|
||||
style={{ fontSize: "1.5rem", fontWeight: "bold" }}
|
||||
>
|
||||
DESA
|
||||
</Badge>
|
||||
<Badge color="green" variant="filled" size="md" radius="md">
|
||||
+
|
||||
</Badge>
|
||||
</Group>
|
||||
<Text size="xs" c="dimmed" mt="xs">
|
||||
Digitalisasi Desa Transparansi Kerja
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
{/* Search */}
|
||||
<Box p="md">
|
||||
@@ -94,7 +111,7 @@ export function Sidebar({ className }: SidebarProps) {
|
||||
label={item.name}
|
||||
active={isActive}
|
||||
variant="subtle"
|
||||
color={headerBgColor}
|
||||
color="blue"
|
||||
style={{
|
||||
background: isActive ? isActiveBg : "transparent",
|
||||
fontWeight: isActive ? "bold" : "normal",
|
||||
@@ -186,6 +203,5 @@ export function Sidebar({ className }: SidebarProps) {
|
||||
</Box>
|
||||
</Stack>
|
||||
</Box>
|
||||
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,478 +1,465 @@
|
||||
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,
|
||||
IconUsers,
|
||||
} from "@tabler/icons-react";
|
||||
import { useMantineColorScheme, Title } from "@mantine/core";
|
||||
import { useState } from "react";
|
||||
|
||||
const SosialPage = () => {
|
||||
const { colorScheme } = useMantineColorScheme();
|
||||
const dark = colorScheme === "dark";
|
||||
|
||||
// Health statistics data
|
||||
const healthStats = [
|
||||
{
|
||||
title: "Ibu Hamil Aktif",
|
||||
value: "87",
|
||||
subtitle: "Aktif",
|
||||
icon: IconHeartbeat,
|
||||
},
|
||||
{
|
||||
title: "Balita Terdaftar",
|
||||
value: "342",
|
||||
subtitle: "Terdaftar",
|
||||
icon: IconBabyCarriage,
|
||||
},
|
||||
{
|
||||
title: "Alert Stunting",
|
||||
value: "12",
|
||||
subtitle: "Perlu perhatian",
|
||||
icon: IconStethoscope,
|
||||
alert: true,
|
||||
},
|
||||
{
|
||||
title: "Posyandu Aktif",
|
||||
value: "8",
|
||||
subtitle: "Beroperasi",
|
||||
icon: IconMedicalCross,
|
||||
},
|
||||
];
|
||||
// Sample data for health statistics
|
||||
const healthStats = {
|
||||
ibuHamil: 87,
|
||||
balita: 342,
|
||||
alertStunting: 12,
|
||||
posyanduAktif: 8,
|
||||
};
|
||||
|
||||
// Health progress data
|
||||
// Sample data for health progress
|
||||
const healthProgress = [
|
||||
{ label: "Imunisasi Lengkap", value: 92 },
|
||||
{ label: "Pemeriksaan Rutin", value: 88 },
|
||||
{ label: "Gizi Baik", value: 86 },
|
||||
{ label: "Target Stunting", value: 14, isAlert: true },
|
||||
{ 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" },
|
||||
];
|
||||
|
||||
// Posyandu schedule data
|
||||
// Sample data for posyandu schedule
|
||||
const posyanduSchedule = [
|
||||
{
|
||||
nama: "Posyandu Barat",
|
||||
tanggal: "5 Oktober 2025",
|
||||
nama: "Posyandu Mawar",
|
||||
tanggal: "Senin, 15 Feb 2026",
|
||||
jam: "08:00 - 11:00",
|
||||
},
|
||||
{
|
||||
nama: "Posyandu Timur",
|
||||
tanggal: "6 Oktober 2025",
|
||||
nama: "Posyandu Melati",
|
||||
tanggal: "Selasa, 16 Feb 2026",
|
||||
jam: "08:00 - 11:00",
|
||||
},
|
||||
{
|
||||
nama: "Posyandu Utara",
|
||||
tanggal: "7 Oktober 2025",
|
||||
nama: "Posyandu Dahlia",
|
||||
tanggal: "Rabu, 17 Feb 2026",
|
||||
jam: "08:00 - 11:00",
|
||||
},
|
||||
{
|
||||
nama: "Posyandu Selatan",
|
||||
tanggal: "8 Oktober 2025",
|
||||
nama: "Posyandu Anggrek",
|
||||
tanggal: "Kamis, 18 Feb 2026",
|
||||
jam: "08:00 - 11:00",
|
||||
},
|
||||
];
|
||||
|
||||
// Education stats data
|
||||
const educationStats = [
|
||||
{ level: "TK / PAUD", value: "500" },
|
||||
{ level: "Siswa SD", value: "458" },
|
||||
{ level: "Siswa SMP", value: "234" },
|
||||
{ level: "Siswa SMA", value: "189" },
|
||||
];
|
||||
// Sample data for education stats
|
||||
const educationStats = {
|
||||
siswa: {
|
||||
tk: 125,
|
||||
sd: 480,
|
||||
smp: 210,
|
||||
sma: 150,
|
||||
},
|
||||
sekolah: {
|
||||
jumlah: 8,
|
||||
guru: 42,
|
||||
},
|
||||
};
|
||||
|
||||
// School info data
|
||||
const schoolInfo = [
|
||||
{ label: "Lembaga Pendidikan", value: "10" },
|
||||
{ label: "Tenaga Pengajar", value: "3" },
|
||||
];
|
||||
|
||||
// Scholarship data
|
||||
// Sample data for scholarships
|
||||
const scholarshipData = {
|
||||
penerima: "250+",
|
||||
dana: "1.5M",
|
||||
penerima: 45,
|
||||
dana: "Rp 1.200.000.000",
|
||||
tahunAjaran: "2025/2026",
|
||||
};
|
||||
|
||||
// Cultural events data
|
||||
// Sample data for cultural events
|
||||
const culturalEvents = [
|
||||
{
|
||||
nama: "Lomba Baris Berbaris",
|
||||
tanggal: "1 Desember 2025",
|
||||
nama: "Hari Kesaktian Pancasila",
|
||||
tanggal: "1 Oktober 2025",
|
||||
lokasi: "Balai Desa",
|
||||
},
|
||||
{
|
||||
nama: "Festival Budaya Desa",
|
||||
tanggal: "20 Mei 2026",
|
||||
lokasi: "Lapangan Desa",
|
||||
},
|
||||
{
|
||||
nama: "Lomba Tari Tradisional",
|
||||
tanggal: "10 Desember 2025",
|
||||
lokasi: "Banjar Desa",
|
||||
},
|
||||
{
|
||||
nama: "Davoz",
|
||||
tanggal: "20 Desember 2025",
|
||||
lokasi: "Kantor Desa",
|
||||
nama: "Perayaan HUT Desa",
|
||||
tanggal: "17 Agustus 2026",
|
||||
lokasi: "Balai Desa",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`min-h-screen py-6 px-4 sm:px-6 lg:px-8 ${
|
||||
dark ? "bg-slate-900" : "bg-gray-100"
|
||||
}`}
|
||||
>
|
||||
<div className="max-w-7xl mx-auto w-full">
|
||||
{/* Row 1: Top 4 Metrics Cards */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
|
||||
{healthStats.map((stat, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`rounded-xl shadow-sm p-6 ${
|
||||
dark ? "bg-slate-800 border border-slate-800" : "bg-white border border-white"
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex-1">
|
||||
<h3
|
||||
className={`text-sm font-medium mb-1 ${
|
||||
dark ? "text-gray-400" : "text-gray-500"
|
||||
}`}
|
||||
>
|
||||
{stat.title}
|
||||
</h3>
|
||||
<p
|
||||
className={`text-3xl font-bold mb-1 ${
|
||||
stat.alert
|
||||
? "text-red-500"
|
||||
: dark
|
||||
? "text-white"
|
||||
: "text-gray-800"
|
||||
}`}
|
||||
>
|
||||
{stat.value}
|
||||
</p>
|
||||
<p
|
||||
className={`text-xs ${
|
||||
dark ? "text-gray-400" : "text-gray-500"
|
||||
}`}
|
||||
>
|
||||
{stat.subtitle}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex-shrink-0 ml-4">
|
||||
<div
|
||||
className={`w-12 h-12 rounded-full flex items-center justify-center text-white ${
|
||||
stat.alert ? "bg-red-500" : "bg-blue-900"
|
||||
}`}
|
||||
>
|
||||
<stat.icon size={24} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Stack gap="lg">
|
||||
{/* Health Statistics Cards */}
|
||||
<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>
|
||||
</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>
|
||||
</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>
|
||||
))}
|
||||
</div>
|
||||
</Stack>
|
||||
</Card>
|
||||
|
||||
{/* Row 2: Statistik Kesehatan */}
|
||||
<div
|
||||
className={`rounded-xl shadow-sm p-6 mb-6 ${
|
||||
dark ? "bg-slate-800 border border-slate-800" : "bg-white border border-white"
|
||||
}`}
|
||||
>
|
||||
<h3
|
||||
className={`text-lg font-semibold mb-6 ${
|
||||
dark ? "text-white" : "text-gray-800"
|
||||
}`}
|
||||
<Grid gutter="md">
|
||||
{/* Jadwal Posyandu */}
|
||||
<GridCol span={{ base: 12, lg: 6 }}>
|
||||
<Card
|
||||
p="md"
|
||||
radius="md"
|
||||
withBorder
|
||||
bg={dark ? "#141D34" : "white"}
|
||||
style={{ borderColor: dark ? "#141D34" : "white" }}
|
||||
>
|
||||
Statistik Kesehatan
|
||||
</h3>
|
||||
<div className="space-y-4">
|
||||
{healthProgress.map((item, index) => (
|
||||
<div key={index}>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span
|
||||
className={`text-sm font-medium ${
|
||||
dark ? "text-white" : "text-gray-800"
|
||||
}`}
|
||||
>
|
||||
{item.label}
|
||||
</span>
|
||||
<span
|
||||
className={`text-sm font-semibold ${
|
||||
item.isAlert
|
||||
? "text-red-500"
|
||||
: dark
|
||||
? "text-white"
|
||||
: "text-gray-800"
|
||||
}`}
|
||||
>
|
||||
{item.value}%
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className={`w-full rounded-full h-2 ${
|
||||
dark ? "bg-slate-700" : "bg-gray-200"
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
className={`h-2 rounded-full transition-all ${
|
||||
item.isAlert ? "bg-red-500" : "bg-blue-900"
|
||||
}`}
|
||||
style={{ width: `${item.value}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Row 3: Jadwal Posyandu & Pendidikan */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
|
||||
{/* Jadwal Posyandu */}
|
||||
<div
|
||||
className={`rounded-xl shadow-sm p-6 ${
|
||||
dark ? "bg-slate-800 border border-slate-800" : "bg-white border border-white"
|
||||
}`}
|
||||
>
|
||||
<h3
|
||||
className={`text-lg font-semibold mb-4 ${
|
||||
dark ? "text-white" : "text-gray-800"
|
||||
}`}
|
||||
>
|
||||
<Title order={3} mb="md" c={dark ? "dark.0" : "black"}>
|
||||
Jadwal Posyandu
|
||||
</h3>
|
||||
<div className="space-y-3">
|
||||
</Title>
|
||||
<Stack gap="sm">
|
||||
{posyanduSchedule.map((item, index) => (
|
||||
<div
|
||||
<Card
|
||||
key={index}
|
||||
className={`p-4 rounded-lg ${
|
||||
dark ? "bg-slate-700" : "bg-gray-50"
|
||||
}`}
|
||||
p="md"
|
||||
radius="md"
|
||||
withBorder
|
||||
bg={dark ? "#263852ff" : "#F1F5F9"}
|
||||
style={{ borderColor: dark ? "#263852ff" : "#F1F5F9" }}
|
||||
h="100%"
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p
|
||||
className={`text-sm font-medium ${
|
||||
dark ? "text-white" : "text-gray-800"
|
||||
}`}
|
||||
>
|
||||
<Group justify="space-between">
|
||||
<Stack gap={0}>
|
||||
<Text fw={500} c={dark ? "dark.0" : "black"}>
|
||||
{item.nama}
|
||||
</p>
|
||||
<p
|
||||
className={`text-xs mt-1 ${
|
||||
dark ? "text-gray-400" : "text-gray-500"
|
||||
}`}
|
||||
>
|
||||
</Text>
|
||||
<Text size="sm" c={dark ? "dark.0" : "black"}>
|
||||
{item.tanggal}
|
||||
</p>
|
||||
</div>
|
||||
<span
|
||||
className="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-900"
|
||||
>
|
||||
</Text>
|
||||
</Stack>
|
||||
<Badge variant="light" color="darmasaba-blue">
|
||||
{item.jam}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</Badge>
|
||||
</Group>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</Stack>
|
||||
</Card>
|
||||
</GridCol>
|
||||
|
||||
{/* Pendidikan Section */}
|
||||
<div
|
||||
className={`rounded-xl shadow-sm p-6 ${
|
||||
dark ? "bg-slate-800 border border-slate-800" : "bg-white border border-white"
|
||||
}`}
|
||||
{/* Pendidikan */}
|
||||
<GridCol span={{ base: 12, lg: 6 }}>
|
||||
<Card
|
||||
p="md"
|
||||
radius="md"
|
||||
withBorder
|
||||
bg={dark ? "#141D34" : "white"}
|
||||
style={{ borderColor: dark ? "#141D34" : "white" }}
|
||||
h="100%"
|
||||
>
|
||||
<h3
|
||||
className={`text-lg font-semibold mb-4 ${
|
||||
dark ? "text-white" : "text-gray-800"
|
||||
}`}
|
||||
>
|
||||
<Title order={3} mb="md" c={dark ? "dark.0" : "black"}>
|
||||
Pendidikan
|
||||
</h3>
|
||||
<div className="space-y-3 mb-6">
|
||||
{educationStats.map((item, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`flex items-center justify-between py-2 ${
|
||||
dark ? "border-b border-slate-700" : "border-b border-gray-100"
|
||||
}`}
|
||||
>
|
||||
<span className="text-sm" style={{ color: dark ? "#9CA3AF" : "#6B7280" }}>
|
||||
{item.level}
|
||||
</span>
|
||||
<span
|
||||
className={`text-sm font-semibold ${
|
||||
dark ? "text-white" : "text-gray-800"
|
||||
}`}
|
||||
>
|
||||
{item.value}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</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>
|
||||
|
||||
{/* Info Sekolah */}
|
||||
<h4
|
||||
className={`text-base font-semibold mb-4 ${
|
||||
dark ? "text-white" : "text-gray-800"
|
||||
}`}
|
||||
>
|
||||
Info Sekolah
|
||||
</h4>
|
||||
<div className="space-y-3">
|
||||
{schoolInfo.map((item, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`flex items-center justify-between py-3 px-4 rounded-lg ${
|
||||
dark ? "bg-slate-700" : "bg-gray-50"
|
||||
}`}
|
||||
>
|
||||
<span className="text-sm" style={{ color: dark ? "#9CA3AF" : "#6B7280" }}>
|
||||
{item.label}
|
||||
</span>
|
||||
<span
|
||||
className={`text-lg font-bold ${
|
||||
dark ? "text-white" : "text-gray-800"
|
||||
}`}
|
||||
>
|
||||
{item.value}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Row 4: Beasiswa Desa & Kalender Event Budaya */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{/* Beasiswa Desa */}
|
||||
<div
|
||||
className={`rounded-xl shadow-sm p-6 ${
|
||||
dark ? "bg-slate-800 border border-slate-800" : "bg-white border border-white"
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h3
|
||||
className={`text-lg font-semibold ${
|
||||
dark ? "text-white" : "text-gray-800"
|
||||
}`}
|
||||
<Card
|
||||
withBorder
|
||||
radius="md"
|
||||
p="md"
|
||||
mt="md"
|
||||
bg={dark ? "#263852ff" : "#F1F5F9"}
|
||||
style={{ borderColor: dark ? "#263852ff" : "#F1F5F9" }}
|
||||
>
|
||||
Beasiswa Desa
|
||||
</h3>
|
||||
<div
|
||||
className="w-12 h-12 rounded-full flex items-center justify-center text-white bg-green-500"
|
||||
<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>
|
||||
</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} />
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
|
||||
{/* Two centered metrics */}
|
||||
<div className="grid grid-cols-2 gap-4 mb-6">
|
||||
<div
|
||||
className={`p-4 rounded-lg text-center ${
|
||||
dark ? "bg-slate-700" : "bg-gray-50"
|
||||
}`}
|
||||
>
|
||||
<p
|
||||
className={`text-3xl font-bold mb-1 ${
|
||||
dark ? "text-white" : "text-gray-800"
|
||||
}`}
|
||||
>
|
||||
{scholarshipData.penerima}
|
||||
</p>
|
||||
<p
|
||||
className={`text-xs ${
|
||||
dark ? "text-gray-400" : "text-gray-500"
|
||||
}`}
|
||||
>
|
||||
Penerima Beasiswa
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
className={`p-4 rounded-lg text-center ${
|
||||
dark ? "bg-slate-700" : "bg-gray-50"
|
||||
}`}
|
||||
>
|
||||
<p
|
||||
className={`text-3xl font-bold mb-1 text-green-500`}
|
||||
>
|
||||
{scholarshipData.dana}
|
||||
</p>
|
||||
<p
|
||||
className={`text-xs ${
|
||||
dark ? "text-gray-400" : "text-gray-500"
|
||||
}`}
|
||||
>
|
||||
Dana Tersalurkan
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer text */}
|
||||
<p
|
||||
className={`text-center text-sm ${
|
||||
dark ? "text-gray-400" : "text-gray-500"
|
||||
}`}
|
||||
>
|
||||
Tahun Ajaran {scholarshipData.tahunAjaran}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Kalender Event Budaya */}
|
||||
<div
|
||||
className={`rounded-xl shadow-sm p-6 ${
|
||||
dark ? "bg-slate-800 border border-slate-800" : "bg-white border border-white"
|
||||
}`}
|
||||
>
|
||||
<Title order={3} mb="md" c={dark ? "dark.0" : "black"}>
|
||||
Kalender Event Budaya
|
||||
</Title>
|
||||
|
||||
<div className="space-y-4">
|
||||
{culturalEvents.map((event, index) => (
|
||||
<div
|
||||
{/* 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}
|
||||
className={`flex items-start gap-3 p-4 rounded-lg ${
|
||||
dark ? "bg-slate-700" : "bg-gray-50"
|
||||
}`}
|
||||
icon={
|
||||
<ThemeIcon color="darmasaba-blue" size={24} radius="xl">
|
||||
<IconCalendarEvent size={12} />
|
||||
</ThemeIcon>
|
||||
}
|
||||
>
|
||||
<div
|
||||
className="w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0 bg-blue-100 text-blue-900"
|
||||
>
|
||||
<IconCalendarEvent size={20} />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<p
|
||||
className={`text-sm font-medium ${
|
||||
dark ? "text-white" : "text-gray-800"
|
||||
}`}
|
||||
>
|
||||
<Group justify="space-between">
|
||||
<Text fw={500} c={dark ? "dark.0" : "black"}>
|
||||
{event.nama}
|
||||
</p>
|
||||
<p
|
||||
className={`text-xs mt-1 ${
|
||||
dark ? "text-gray-400" : "text-gray-500"
|
||||
}`}
|
||||
>
|
||||
{event.tanggal}
|
||||
</p>
|
||||
<p
|
||||
className={`text-xs mt-1 ${
|
||||
dark ? "text-gray-400" : "text-gray-500"
|
||||
}`}
|
||||
>
|
||||
Location: {event.lokasi}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</List>
|
||||
</Card>
|
||||
</GridCol>
|
||||
</Grid>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
export default SosialPage;
|
||||
export default SosialPage;
|
||||
101
src/index.css
101
src/index.css
@@ -1,100 +1 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
/* Custom CSS variables for Tailwind */
|
||||
:root {
|
||||
/* Darmasaba Navy Colors */
|
||||
--darmasaba-navy-50: #E1E4F2;
|
||||
--darmasaba-navy-100: #B9C2DD;
|
||||
--darmasaba-navy-200: #91A0C9;
|
||||
--darmasaba-navy-300: #697EBA;
|
||||
--darmasaba-navy-400: #4C6CAE;
|
||||
--darmasaba-navy-500: #3B5B97;
|
||||
--darmasaba-navy-600: #2C497F;
|
||||
--darmasaba-navy-700: #1E3766;
|
||||
--darmasaba-navy-800: #12264D;
|
||||
--darmasaba-navy-900: #071833;
|
||||
--darmasaba-navy: #1E3A5F;
|
||||
|
||||
/* Darmasaba Blue Colors */
|
||||
--darmasaba-blue-50: #E3F0FF;
|
||||
--darmasaba-blue-100: #B6D9FF;
|
||||
--darmasaba-blue-200: #89C2FF;
|
||||
--darmasaba-blue-300: #5CA9FF;
|
||||
--darmasaba-blue-400: #3B8FFF;
|
||||
--darmasaba-blue-500: #237AE0;
|
||||
--darmasaba-blue-600: #1C6BBF;
|
||||
--darmasaba-blue-700: #155BA0;
|
||||
--darmasaba-blue-800: #0E4980;
|
||||
--darmasaba-blue-900: #073260;
|
||||
--darmasaba-blue: #3B82F6;
|
||||
|
||||
/* Darmasaba Success Colors */
|
||||
--darmasaba-success-50: #E3F9E7;
|
||||
--darmasaba-success-100: #BFEEC7;
|
||||
--darmasaba-success-200: #9BD8A7;
|
||||
--darmasaba-success-300: #77C387;
|
||||
--darmasaba-success-400: #5DB572;
|
||||
--darmasaba-success-500: #499A5D;
|
||||
--darmasaba-success-600: #3C7F4A;
|
||||
--darmasaba-success-700: #2F6438;
|
||||
--darmasaba-success-800: #234926;
|
||||
--darmasaba-success-900: #17301B;
|
||||
--darmasaba-success: #22C55E;
|
||||
|
||||
/* Darmasaba Warning Colors */
|
||||
--darmasaba-warning-50: #FFF8E1;
|
||||
--darmasaba-warning-100: #FEE7B3;
|
||||
--darmasaba-warning-200: #FDD785;
|
||||
--darmasaba-warning-300: #FDC757;
|
||||
--darmasaba-warning-400: #FBBF3B;
|
||||
--darmasaba-warning-500: #E1AC23;
|
||||
--darmasaba-warning-600: #C2981D;
|
||||
--darmasaba-warning-700: #A38418;
|
||||
--darmasaba-warning-800: #856F12;
|
||||
--darmasaba-warning-900: #675A0D;
|
||||
--darmasaba-warning: #FACC15;
|
||||
|
||||
/* Darmasaba Danger Colors */
|
||||
--darmasaba-danger-50: #FFE3E3;
|
||||
--darmasaba-danger-100: #FFBABA;
|
||||
--darmasaba-danger-200: #FF9191;
|
||||
--darmasaba-danger-300: #FF6868;
|
||||
--darmasaba-danger-400: #FA4B4B;
|
||||
--darmasaba-danger-500: #E03333;
|
||||
--darmasaba-danger-600: #C22A2A;
|
||||
--darmasaba-danger-700: #A32020;
|
||||
--darmasaba-danger-800: #851616;
|
||||
--darmasaba-danger-900: #670C0C;
|
||||
--darmasaba-danger: #EF4444;
|
||||
|
||||
/* Darmasaba Background */
|
||||
--darmasaba-background: #F5F8FB;
|
||||
|
||||
/* Standard colors for dark mode */
|
||||
--slate-900: #0F172A;
|
||||
--slate-800: #1E293B;
|
||||
--slate-700: #334155;
|
||||
--slate-600: #475569;
|
||||
--gray-50: #F9FAFB;
|
||||
--gray-100: #F3F4F6;
|
||||
--gray-200: #E5E7EB;
|
||||
--gray-600: #4B5563;
|
||||
--gray-700: #1F2937;
|
||||
--gray-400: #9CA3AF;
|
||||
--gray-500: #6B7280;
|
||||
--gray-800: #1F2937;
|
||||
--blue-50: #EFF6FF;
|
||||
--blue-100: #DBEAFE;
|
||||
--blue-900: #1E3A5F;
|
||||
--red-500: #EF4444;
|
||||
--green-500: #22C55E;
|
||||
}
|
||||
|
||||
/* Dark mode support */
|
||||
[data-mantine-color-scheme="dark"] {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
[data-mantine-color-scheme="light"] {
|
||||
color-scheme: light;
|
||||
}
|
||||
@import "tailwindcss";
|
||||
@@ -60,13 +60,36 @@ type RouteRule = {
|
||||
};
|
||||
|
||||
const routeRules: RouteRule[] = [
|
||||
// Public routes - no auth required
|
||||
{
|
||||
match: (p) => p === "/" || p === "/signin" || p === "/signup",
|
||||
requireAuth: false,
|
||||
},
|
||||
// Profile routes - auth required for all roles
|
||||
{
|
||||
match: (p) => p === "/profile" || p.startsWith("/profile/"),
|
||||
requireAuth: true,
|
||||
redirectTo: "/signin",
|
||||
},
|
||||
// Dashboard and main pages - auth required for all roles (not just admin)
|
||||
{
|
||||
match: (p) => p === "/admin" || p.startsWith("/admin/"),
|
||||
match: (p) =>
|
||||
p.startsWith("/kinerja-divisi") ||
|
||||
p.startsWith("/pengaduan") ||
|
||||
p.startsWith("/jenna") ||
|
||||
p.startsWith("/demografi") ||
|
||||
p.startsWith("/keuangan") ||
|
||||
p.startsWith("/bumdes") ||
|
||||
p.startsWith("/sosial") ||
|
||||
p.startsWith("/keamanan") ||
|
||||
p.startsWith("/bantuan") ||
|
||||
p.startsWith("/pengaturan"),
|
||||
requireAuth: true,
|
||||
redirectTo: "/signin",
|
||||
},
|
||||
// Admin routes - auth required with admin role only
|
||||
{
|
||||
match: (p) => p.startsWith("/admin"),
|
||||
requireAuth: true,
|
||||
requiredRole: "admin",
|
||||
redirectTo: "/signin",
|
||||
@@ -98,15 +121,22 @@ export function createProtectedRoute(options: ProtectedRouteOptions = {}) {
|
||||
location: { pathname: string; href: string };
|
||||
}) => {
|
||||
const rule = findRouteRule(location.pathname);
|
||||
|
||||
// If no rule matches, allow access by default
|
||||
if (!rule) return;
|
||||
|
||||
// If route explicitly doesn't require auth, allow access
|
||||
if (rule.requireAuth === false) return;
|
||||
|
||||
const session = await fetchSession();
|
||||
const user = session?.user;
|
||||
|
||||
// If auth is required but user is not logged in, redirect to login
|
||||
if (rule.requireAuth && !user) {
|
||||
redirectToLogin(rule.redirectTo ?? redirectTo, location.href);
|
||||
}
|
||||
|
||||
// If specific role is required, check it
|
||||
if (rule.requiredRole && user?.role !== rule.requiredRole) {
|
||||
redirectToLogin(rule.redirectTo ?? redirectTo, location.href);
|
||||
}
|
||||
@@ -122,4 +152,4 @@ export function createProtectedRoute(options: ProtectedRouteOptions = {}) {
|
||||
* Default Middleware Export
|
||||
* ================================ */
|
||||
|
||||
export const protectedRouteMiddleware = createProtectedRoute();
|
||||
export const protectedRouteMiddleware = createProtectedRoute();
|
||||
@@ -9,35 +9,38 @@
|
||||
// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
|
||||
|
||||
import { Route as rootRouteImport } from './routes/__root'
|
||||
import { Route as SosialRouteImport } from './routes/sosial'
|
||||
import { Route as SignupRouteImport } from './routes/signup'
|
||||
import { Route as SigninRouteImport } from './routes/signin'
|
||||
import { Route as DashboardRouteRouteImport } from './routes/dashboard/route'
|
||||
import { Route as PengaduanLayananPublikRouteImport } from './routes/pengaduan-layanan-publik'
|
||||
import { Route as KinerjaDivisiRouteImport } from './routes/kinerja-divisi'
|
||||
import { Route as KeuanganAnggaranRouteImport } from './routes/keuangan-anggaran'
|
||||
import { Route as KeamananRouteImport } from './routes/keamanan'
|
||||
import { Route as JennaAnalyticRouteImport } from './routes/jenna-analytic'
|
||||
import { Route as DemografiPekerjaanRouteImport } from './routes/demografi-pekerjaan'
|
||||
import { Route as BumdesRouteImport } from './routes/bumdes'
|
||||
import { Route as BantuanRouteImport } from './routes/bantuan'
|
||||
import { Route as PengaturanRouteRouteImport } from './routes/pengaturan/route'
|
||||
import { Route as AdminRouteRouteImport } from './routes/admin/route'
|
||||
import { Route as IndexRouteImport } from './routes/index'
|
||||
import { Route as UsersIndexRouteImport } from './routes/users/index'
|
||||
import { Route as ProfileIndexRouteImport } from './routes/profile/index'
|
||||
import { Route as DashboardIndexRouteImport } from './routes/dashboard/index'
|
||||
import { Route as AdminIndexRouteImport } from './routes/admin/index'
|
||||
import { Route as UsersIdRouteImport } from './routes/users/$id'
|
||||
import { Route as ProfileEditRouteImport } from './routes/profile/edit'
|
||||
import { Route as DashboardSosialRouteImport } from './routes/dashboard/sosial'
|
||||
import { Route as DashboardPengaduanLayananPublikRouteImport } from './routes/dashboard/pengaduan-layanan-publik'
|
||||
import { Route as DashboardKinerjaDivisiRouteImport } from './routes/dashboard/kinerja-divisi'
|
||||
import { Route as DashboardKeuanganAnggaranRouteImport } from './routes/dashboard/keuangan-anggaran'
|
||||
import { Route as DashboardKeamananRouteImport } from './routes/dashboard/keamanan'
|
||||
import { Route as DashboardJennaAnalyticRouteImport } from './routes/dashboard/jenna-analytic'
|
||||
import { Route as DashboardDemografiPekerjaanRouteImport } from './routes/dashboard/demografi-pekerjaan'
|
||||
import { Route as DashboardBumdesRouteImport } from './routes/dashboard/bumdes'
|
||||
import { Route as DashboardBantuanRouteImport } from './routes/dashboard/bantuan'
|
||||
import { Route as PengaturanUmumRouteImport } from './routes/pengaturan/umum'
|
||||
import { Route as PengaturanNotifikasiRouteImport } from './routes/pengaturan/notifikasi'
|
||||
import { Route as PengaturanKeamananRouteImport } from './routes/pengaturan/keamanan'
|
||||
import { Route as PengaturanAksesDanTimRouteImport } from './routes/pengaturan/akses-dan-tim'
|
||||
import { Route as AdminUsersRouteImport } from './routes/admin/users'
|
||||
import { Route as AdminSettingsRouteImport } from './routes/admin/settings'
|
||||
import { Route as AdminApikeyRouteImport } from './routes/admin/apikey'
|
||||
import { Route as DashboardPengaturanRouteRouteImport } from './routes/dashboard/pengaturan/route'
|
||||
import { Route as DashboardPengaturanUmumRouteImport } from './routes/dashboard/pengaturan/umum'
|
||||
import { Route as DashboardPengaturanNotifikasiRouteImport } from './routes/dashboard/pengaturan/notifikasi'
|
||||
import { Route as DashboardPengaturanKeamananRouteImport } from './routes/dashboard/pengaturan/keamanan'
|
||||
import { Route as DashboardPengaturanAksesDanTimRouteImport } from './routes/dashboard/pengaturan/akses-dan-tim'
|
||||
|
||||
const SosialRoute = SosialRouteImport.update({
|
||||
id: '/sosial',
|
||||
path: '/sosial',
|
||||
getParentRoute: () => rootRouteImport,
|
||||
} as any)
|
||||
const SignupRoute = SignupRouteImport.update({
|
||||
id: '/signup',
|
||||
path: '/signup',
|
||||
@@ -48,9 +51,49 @@ const SigninRoute = SigninRouteImport.update({
|
||||
path: '/signin',
|
||||
getParentRoute: () => rootRouteImport,
|
||||
} as any)
|
||||
const DashboardRouteRoute = DashboardRouteRouteImport.update({
|
||||
id: '/dashboard',
|
||||
path: '/dashboard',
|
||||
const PengaduanLayananPublikRoute = PengaduanLayananPublikRouteImport.update({
|
||||
id: '/pengaduan-layanan-publik',
|
||||
path: '/pengaduan-layanan-publik',
|
||||
getParentRoute: () => rootRouteImport,
|
||||
} as any)
|
||||
const KinerjaDivisiRoute = KinerjaDivisiRouteImport.update({
|
||||
id: '/kinerja-divisi',
|
||||
path: '/kinerja-divisi',
|
||||
getParentRoute: () => rootRouteImport,
|
||||
} as any)
|
||||
const KeuanganAnggaranRoute = KeuanganAnggaranRouteImport.update({
|
||||
id: '/keuangan-anggaran',
|
||||
path: '/keuangan-anggaran',
|
||||
getParentRoute: () => rootRouteImport,
|
||||
} as any)
|
||||
const KeamananRoute = KeamananRouteImport.update({
|
||||
id: '/keamanan',
|
||||
path: '/keamanan',
|
||||
getParentRoute: () => rootRouteImport,
|
||||
} as any)
|
||||
const JennaAnalyticRoute = JennaAnalyticRouteImport.update({
|
||||
id: '/jenna-analytic',
|
||||
path: '/jenna-analytic',
|
||||
getParentRoute: () => rootRouteImport,
|
||||
} as any)
|
||||
const DemografiPekerjaanRoute = DemografiPekerjaanRouteImport.update({
|
||||
id: '/demografi-pekerjaan',
|
||||
path: '/demografi-pekerjaan',
|
||||
getParentRoute: () => rootRouteImport,
|
||||
} as any)
|
||||
const BumdesRoute = BumdesRouteImport.update({
|
||||
id: '/bumdes',
|
||||
path: '/bumdes',
|
||||
getParentRoute: () => rootRouteImport,
|
||||
} as any)
|
||||
const BantuanRoute = BantuanRouteImport.update({
|
||||
id: '/bantuan',
|
||||
path: '/bantuan',
|
||||
getParentRoute: () => rootRouteImport,
|
||||
} as any)
|
||||
const PengaturanRouteRoute = PengaturanRouteRouteImport.update({
|
||||
id: '/pengaturan',
|
||||
path: '/pengaturan',
|
||||
getParentRoute: () => rootRouteImport,
|
||||
} as any)
|
||||
const AdminRouteRoute = AdminRouteRouteImport.update({
|
||||
@@ -73,11 +116,6 @@ const ProfileIndexRoute = ProfileIndexRouteImport.update({
|
||||
path: '/profile/',
|
||||
getParentRoute: () => rootRouteImport,
|
||||
} as any)
|
||||
const DashboardIndexRoute = DashboardIndexRouteImport.update({
|
||||
id: '/',
|
||||
path: '/',
|
||||
getParentRoute: () => DashboardRouteRoute,
|
||||
} as any)
|
||||
const AdminIndexRoute = AdminIndexRouteImport.update({
|
||||
id: '/',
|
||||
path: '/',
|
||||
@@ -93,53 +131,25 @@ const ProfileEditRoute = ProfileEditRouteImport.update({
|
||||
path: '/profile/edit',
|
||||
getParentRoute: () => rootRouteImport,
|
||||
} as any)
|
||||
const DashboardSosialRoute = DashboardSosialRouteImport.update({
|
||||
id: '/sosial',
|
||||
path: '/sosial',
|
||||
getParentRoute: () => DashboardRouteRoute,
|
||||
const PengaturanUmumRoute = PengaturanUmumRouteImport.update({
|
||||
id: '/umum',
|
||||
path: '/umum',
|
||||
getParentRoute: () => PengaturanRouteRoute,
|
||||
} as any)
|
||||
const DashboardPengaduanLayananPublikRoute =
|
||||
DashboardPengaduanLayananPublikRouteImport.update({
|
||||
id: '/pengaduan-layanan-publik',
|
||||
path: '/pengaduan-layanan-publik',
|
||||
getParentRoute: () => DashboardRouteRoute,
|
||||
} as any)
|
||||
const DashboardKinerjaDivisiRoute = DashboardKinerjaDivisiRouteImport.update({
|
||||
id: '/kinerja-divisi',
|
||||
path: '/kinerja-divisi',
|
||||
getParentRoute: () => DashboardRouteRoute,
|
||||
const PengaturanNotifikasiRoute = PengaturanNotifikasiRouteImport.update({
|
||||
id: '/notifikasi',
|
||||
path: '/notifikasi',
|
||||
getParentRoute: () => PengaturanRouteRoute,
|
||||
} as any)
|
||||
const DashboardKeuanganAnggaranRoute =
|
||||
DashboardKeuanganAnggaranRouteImport.update({
|
||||
id: '/keuangan-anggaran',
|
||||
path: '/keuangan-anggaran',
|
||||
getParentRoute: () => DashboardRouteRoute,
|
||||
} as any)
|
||||
const DashboardKeamananRoute = DashboardKeamananRouteImport.update({
|
||||
const PengaturanKeamananRoute = PengaturanKeamananRouteImport.update({
|
||||
id: '/keamanan',
|
||||
path: '/keamanan',
|
||||
getParentRoute: () => DashboardRouteRoute,
|
||||
getParentRoute: () => PengaturanRouteRoute,
|
||||
} as any)
|
||||
const DashboardJennaAnalyticRoute = DashboardJennaAnalyticRouteImport.update({
|
||||
id: '/jenna-analytic',
|
||||
path: '/jenna-analytic',
|
||||
getParentRoute: () => DashboardRouteRoute,
|
||||
} as any)
|
||||
const DashboardDemografiPekerjaanRoute =
|
||||
DashboardDemografiPekerjaanRouteImport.update({
|
||||
id: '/demografi-pekerjaan',
|
||||
path: '/demografi-pekerjaan',
|
||||
getParentRoute: () => DashboardRouteRoute,
|
||||
} as any)
|
||||
const DashboardBumdesRoute = DashboardBumdesRouteImport.update({
|
||||
id: '/bumdes',
|
||||
path: '/bumdes',
|
||||
getParentRoute: () => DashboardRouteRoute,
|
||||
} as any)
|
||||
const DashboardBantuanRoute = DashboardBantuanRouteImport.update({
|
||||
id: '/bantuan',
|
||||
path: '/bantuan',
|
||||
getParentRoute: () => DashboardRouteRoute,
|
||||
const PengaturanAksesDanTimRoute = PengaturanAksesDanTimRouteImport.update({
|
||||
id: '/akses-dan-tim',
|
||||
path: '/akses-dan-tim',
|
||||
getParentRoute: () => PengaturanRouteRoute,
|
||||
} as any)
|
||||
const AdminUsersRoute = AdminUsersRouteImport.update({
|
||||
id: '/users',
|
||||
@@ -156,222 +166,192 @@ const AdminApikeyRoute = AdminApikeyRouteImport.update({
|
||||
path: '/apikey',
|
||||
getParentRoute: () => AdminRouteRoute,
|
||||
} as any)
|
||||
const DashboardPengaturanRouteRoute =
|
||||
DashboardPengaturanRouteRouteImport.update({
|
||||
id: '/pengaturan',
|
||||
path: '/pengaturan',
|
||||
getParentRoute: () => DashboardRouteRoute,
|
||||
} as any)
|
||||
const DashboardPengaturanUmumRoute = DashboardPengaturanUmumRouteImport.update({
|
||||
id: '/umum',
|
||||
path: '/umum',
|
||||
getParentRoute: () => DashboardPengaturanRouteRoute,
|
||||
} as any)
|
||||
const DashboardPengaturanNotifikasiRoute =
|
||||
DashboardPengaturanNotifikasiRouteImport.update({
|
||||
id: '/notifikasi',
|
||||
path: '/notifikasi',
|
||||
getParentRoute: () => DashboardPengaturanRouteRoute,
|
||||
} as any)
|
||||
const DashboardPengaturanKeamananRoute =
|
||||
DashboardPengaturanKeamananRouteImport.update({
|
||||
id: '/keamanan',
|
||||
path: '/keamanan',
|
||||
getParentRoute: () => DashboardPengaturanRouteRoute,
|
||||
} as any)
|
||||
const DashboardPengaturanAksesDanTimRoute =
|
||||
DashboardPengaturanAksesDanTimRouteImport.update({
|
||||
id: '/akses-dan-tim',
|
||||
path: '/akses-dan-tim',
|
||||
getParentRoute: () => DashboardPengaturanRouteRoute,
|
||||
} as any)
|
||||
|
||||
export interface FileRoutesByFullPath {
|
||||
'/': typeof IndexRoute
|
||||
'/admin': typeof AdminRouteRouteWithChildren
|
||||
'/dashboard': typeof DashboardRouteRouteWithChildren
|
||||
'/pengaturan': typeof PengaturanRouteRouteWithChildren
|
||||
'/bantuan': typeof BantuanRoute
|
||||
'/bumdes': typeof BumdesRoute
|
||||
'/demografi-pekerjaan': typeof DemografiPekerjaanRoute
|
||||
'/jenna-analytic': typeof JennaAnalyticRoute
|
||||
'/keamanan': typeof KeamananRoute
|
||||
'/keuangan-anggaran': typeof KeuanganAnggaranRoute
|
||||
'/kinerja-divisi': typeof KinerjaDivisiRoute
|
||||
'/pengaduan-layanan-publik': typeof PengaduanLayananPublikRoute
|
||||
'/signin': typeof SigninRoute
|
||||
'/signup': typeof SignupRoute
|
||||
'/dashboard/pengaturan': typeof DashboardPengaturanRouteRouteWithChildren
|
||||
'/sosial': typeof SosialRoute
|
||||
'/admin/apikey': typeof AdminApikeyRoute
|
||||
'/admin/settings': typeof AdminSettingsRoute
|
||||
'/admin/users': typeof AdminUsersRoute
|
||||
'/dashboard/bantuan': typeof DashboardBantuanRoute
|
||||
'/dashboard/bumdes': typeof DashboardBumdesRoute
|
||||
'/dashboard/demografi-pekerjaan': typeof DashboardDemografiPekerjaanRoute
|
||||
'/dashboard/jenna-analytic': typeof DashboardJennaAnalyticRoute
|
||||
'/dashboard/keamanan': typeof DashboardKeamananRoute
|
||||
'/dashboard/keuangan-anggaran': typeof DashboardKeuanganAnggaranRoute
|
||||
'/dashboard/kinerja-divisi': typeof DashboardKinerjaDivisiRoute
|
||||
'/dashboard/pengaduan-layanan-publik': typeof DashboardPengaduanLayananPublikRoute
|
||||
'/dashboard/sosial': typeof DashboardSosialRoute
|
||||
'/pengaturan/akses-dan-tim': typeof PengaturanAksesDanTimRoute
|
||||
'/pengaturan/keamanan': typeof PengaturanKeamananRoute
|
||||
'/pengaturan/notifikasi': typeof PengaturanNotifikasiRoute
|
||||
'/pengaturan/umum': typeof PengaturanUmumRoute
|
||||
'/profile/edit': typeof ProfileEditRoute
|
||||
'/users/$id': typeof UsersIdRoute
|
||||
'/admin/': typeof AdminIndexRoute
|
||||
'/dashboard/': typeof DashboardIndexRoute
|
||||
'/profile/': typeof ProfileIndexRoute
|
||||
'/users/': typeof UsersIndexRoute
|
||||
'/dashboard/pengaturan/akses-dan-tim': typeof DashboardPengaturanAksesDanTimRoute
|
||||
'/dashboard/pengaturan/keamanan': typeof DashboardPengaturanKeamananRoute
|
||||
'/dashboard/pengaturan/notifikasi': typeof DashboardPengaturanNotifikasiRoute
|
||||
'/dashboard/pengaturan/umum': typeof DashboardPengaturanUmumRoute
|
||||
}
|
||||
export interface FileRoutesByTo {
|
||||
'/': typeof IndexRoute
|
||||
'/pengaturan': typeof PengaturanRouteRouteWithChildren
|
||||
'/bantuan': typeof BantuanRoute
|
||||
'/bumdes': typeof BumdesRoute
|
||||
'/demografi-pekerjaan': typeof DemografiPekerjaanRoute
|
||||
'/jenna-analytic': typeof JennaAnalyticRoute
|
||||
'/keamanan': typeof KeamananRoute
|
||||
'/keuangan-anggaran': typeof KeuanganAnggaranRoute
|
||||
'/kinerja-divisi': typeof KinerjaDivisiRoute
|
||||
'/pengaduan-layanan-publik': typeof PengaduanLayananPublikRoute
|
||||
'/signin': typeof SigninRoute
|
||||
'/signup': typeof SignupRoute
|
||||
'/dashboard/pengaturan': typeof DashboardPengaturanRouteRouteWithChildren
|
||||
'/sosial': typeof SosialRoute
|
||||
'/admin/apikey': typeof AdminApikeyRoute
|
||||
'/admin/settings': typeof AdminSettingsRoute
|
||||
'/admin/users': typeof AdminUsersRoute
|
||||
'/dashboard/bantuan': typeof DashboardBantuanRoute
|
||||
'/dashboard/bumdes': typeof DashboardBumdesRoute
|
||||
'/dashboard/demografi-pekerjaan': typeof DashboardDemografiPekerjaanRoute
|
||||
'/dashboard/jenna-analytic': typeof DashboardJennaAnalyticRoute
|
||||
'/dashboard/keamanan': typeof DashboardKeamananRoute
|
||||
'/dashboard/keuangan-anggaran': typeof DashboardKeuanganAnggaranRoute
|
||||
'/dashboard/kinerja-divisi': typeof DashboardKinerjaDivisiRoute
|
||||
'/dashboard/pengaduan-layanan-publik': typeof DashboardPengaduanLayananPublikRoute
|
||||
'/dashboard/sosial': typeof DashboardSosialRoute
|
||||
'/pengaturan/akses-dan-tim': typeof PengaturanAksesDanTimRoute
|
||||
'/pengaturan/keamanan': typeof PengaturanKeamananRoute
|
||||
'/pengaturan/notifikasi': typeof PengaturanNotifikasiRoute
|
||||
'/pengaturan/umum': typeof PengaturanUmumRoute
|
||||
'/profile/edit': typeof ProfileEditRoute
|
||||
'/users/$id': typeof UsersIdRoute
|
||||
'/admin': typeof AdminIndexRoute
|
||||
'/dashboard': typeof DashboardIndexRoute
|
||||
'/profile': typeof ProfileIndexRoute
|
||||
'/users': typeof UsersIndexRoute
|
||||
'/dashboard/pengaturan/akses-dan-tim': typeof DashboardPengaturanAksesDanTimRoute
|
||||
'/dashboard/pengaturan/keamanan': typeof DashboardPengaturanKeamananRoute
|
||||
'/dashboard/pengaturan/notifikasi': typeof DashboardPengaturanNotifikasiRoute
|
||||
'/dashboard/pengaturan/umum': typeof DashboardPengaturanUmumRoute
|
||||
}
|
||||
export interface FileRoutesById {
|
||||
__root__: typeof rootRouteImport
|
||||
'/': typeof IndexRoute
|
||||
'/admin': typeof AdminRouteRouteWithChildren
|
||||
'/dashboard': typeof DashboardRouteRouteWithChildren
|
||||
'/pengaturan': typeof PengaturanRouteRouteWithChildren
|
||||
'/bantuan': typeof BantuanRoute
|
||||
'/bumdes': typeof BumdesRoute
|
||||
'/demografi-pekerjaan': typeof DemografiPekerjaanRoute
|
||||
'/jenna-analytic': typeof JennaAnalyticRoute
|
||||
'/keamanan': typeof KeamananRoute
|
||||
'/keuangan-anggaran': typeof KeuanganAnggaranRoute
|
||||
'/kinerja-divisi': typeof KinerjaDivisiRoute
|
||||
'/pengaduan-layanan-publik': typeof PengaduanLayananPublikRoute
|
||||
'/signin': typeof SigninRoute
|
||||
'/signup': typeof SignupRoute
|
||||
'/dashboard/pengaturan': typeof DashboardPengaturanRouteRouteWithChildren
|
||||
'/sosial': typeof SosialRoute
|
||||
'/admin/apikey': typeof AdminApikeyRoute
|
||||
'/admin/settings': typeof AdminSettingsRoute
|
||||
'/admin/users': typeof AdminUsersRoute
|
||||
'/dashboard/bantuan': typeof DashboardBantuanRoute
|
||||
'/dashboard/bumdes': typeof DashboardBumdesRoute
|
||||
'/dashboard/demografi-pekerjaan': typeof DashboardDemografiPekerjaanRoute
|
||||
'/dashboard/jenna-analytic': typeof DashboardJennaAnalyticRoute
|
||||
'/dashboard/keamanan': typeof DashboardKeamananRoute
|
||||
'/dashboard/keuangan-anggaran': typeof DashboardKeuanganAnggaranRoute
|
||||
'/dashboard/kinerja-divisi': typeof DashboardKinerjaDivisiRoute
|
||||
'/dashboard/pengaduan-layanan-publik': typeof DashboardPengaduanLayananPublikRoute
|
||||
'/dashboard/sosial': typeof DashboardSosialRoute
|
||||
'/pengaturan/akses-dan-tim': typeof PengaturanAksesDanTimRoute
|
||||
'/pengaturan/keamanan': typeof PengaturanKeamananRoute
|
||||
'/pengaturan/notifikasi': typeof PengaturanNotifikasiRoute
|
||||
'/pengaturan/umum': typeof PengaturanUmumRoute
|
||||
'/profile/edit': typeof ProfileEditRoute
|
||||
'/users/$id': typeof UsersIdRoute
|
||||
'/admin/': typeof AdminIndexRoute
|
||||
'/dashboard/': typeof DashboardIndexRoute
|
||||
'/profile/': typeof ProfileIndexRoute
|
||||
'/users/': typeof UsersIndexRoute
|
||||
'/dashboard/pengaturan/akses-dan-tim': typeof DashboardPengaturanAksesDanTimRoute
|
||||
'/dashboard/pengaturan/keamanan': typeof DashboardPengaturanKeamananRoute
|
||||
'/dashboard/pengaturan/notifikasi': typeof DashboardPengaturanNotifikasiRoute
|
||||
'/dashboard/pengaturan/umum': typeof DashboardPengaturanUmumRoute
|
||||
}
|
||||
export interface FileRouteTypes {
|
||||
fileRoutesByFullPath: FileRoutesByFullPath
|
||||
fullPaths:
|
||||
| '/'
|
||||
| '/admin'
|
||||
| '/dashboard'
|
||||
| '/pengaturan'
|
||||
| '/bantuan'
|
||||
| '/bumdes'
|
||||
| '/demografi-pekerjaan'
|
||||
| '/jenna-analytic'
|
||||
| '/keamanan'
|
||||
| '/keuangan-anggaran'
|
||||
| '/kinerja-divisi'
|
||||
| '/pengaduan-layanan-publik'
|
||||
| '/signin'
|
||||
| '/signup'
|
||||
| '/dashboard/pengaturan'
|
||||
| '/sosial'
|
||||
| '/admin/apikey'
|
||||
| '/admin/settings'
|
||||
| '/admin/users'
|
||||
| '/dashboard/bantuan'
|
||||
| '/dashboard/bumdes'
|
||||
| '/dashboard/demografi-pekerjaan'
|
||||
| '/dashboard/jenna-analytic'
|
||||
| '/dashboard/keamanan'
|
||||
| '/dashboard/keuangan-anggaran'
|
||||
| '/dashboard/kinerja-divisi'
|
||||
| '/dashboard/pengaduan-layanan-publik'
|
||||
| '/dashboard/sosial'
|
||||
| '/pengaturan/akses-dan-tim'
|
||||
| '/pengaturan/keamanan'
|
||||
| '/pengaturan/notifikasi'
|
||||
| '/pengaturan/umum'
|
||||
| '/profile/edit'
|
||||
| '/users/$id'
|
||||
| '/admin/'
|
||||
| '/dashboard/'
|
||||
| '/profile/'
|
||||
| '/users/'
|
||||
| '/dashboard/pengaturan/akses-dan-tim'
|
||||
| '/dashboard/pengaturan/keamanan'
|
||||
| '/dashboard/pengaturan/notifikasi'
|
||||
| '/dashboard/pengaturan/umum'
|
||||
fileRoutesByTo: FileRoutesByTo
|
||||
to:
|
||||
| '/'
|
||||
| '/pengaturan'
|
||||
| '/bantuan'
|
||||
| '/bumdes'
|
||||
| '/demografi-pekerjaan'
|
||||
| '/jenna-analytic'
|
||||
| '/keamanan'
|
||||
| '/keuangan-anggaran'
|
||||
| '/kinerja-divisi'
|
||||
| '/pengaduan-layanan-publik'
|
||||
| '/signin'
|
||||
| '/signup'
|
||||
| '/dashboard/pengaturan'
|
||||
| '/sosial'
|
||||
| '/admin/apikey'
|
||||
| '/admin/settings'
|
||||
| '/admin/users'
|
||||
| '/dashboard/bantuan'
|
||||
| '/dashboard/bumdes'
|
||||
| '/dashboard/demografi-pekerjaan'
|
||||
| '/dashboard/jenna-analytic'
|
||||
| '/dashboard/keamanan'
|
||||
| '/dashboard/keuangan-anggaran'
|
||||
| '/dashboard/kinerja-divisi'
|
||||
| '/dashboard/pengaduan-layanan-publik'
|
||||
| '/dashboard/sosial'
|
||||
| '/pengaturan/akses-dan-tim'
|
||||
| '/pengaturan/keamanan'
|
||||
| '/pengaturan/notifikasi'
|
||||
| '/pengaturan/umum'
|
||||
| '/profile/edit'
|
||||
| '/users/$id'
|
||||
| '/admin'
|
||||
| '/dashboard'
|
||||
| '/profile'
|
||||
| '/users'
|
||||
| '/dashboard/pengaturan/akses-dan-tim'
|
||||
| '/dashboard/pengaturan/keamanan'
|
||||
| '/dashboard/pengaturan/notifikasi'
|
||||
| '/dashboard/pengaturan/umum'
|
||||
id:
|
||||
| '__root__'
|
||||
| '/'
|
||||
| '/admin'
|
||||
| '/dashboard'
|
||||
| '/pengaturan'
|
||||
| '/bantuan'
|
||||
| '/bumdes'
|
||||
| '/demografi-pekerjaan'
|
||||
| '/jenna-analytic'
|
||||
| '/keamanan'
|
||||
| '/keuangan-anggaran'
|
||||
| '/kinerja-divisi'
|
||||
| '/pengaduan-layanan-publik'
|
||||
| '/signin'
|
||||
| '/signup'
|
||||
| '/dashboard/pengaturan'
|
||||
| '/sosial'
|
||||
| '/admin/apikey'
|
||||
| '/admin/settings'
|
||||
| '/admin/users'
|
||||
| '/dashboard/bantuan'
|
||||
| '/dashboard/bumdes'
|
||||
| '/dashboard/demografi-pekerjaan'
|
||||
| '/dashboard/jenna-analytic'
|
||||
| '/dashboard/keamanan'
|
||||
| '/dashboard/keuangan-anggaran'
|
||||
| '/dashboard/kinerja-divisi'
|
||||
| '/dashboard/pengaduan-layanan-publik'
|
||||
| '/dashboard/sosial'
|
||||
| '/pengaturan/akses-dan-tim'
|
||||
| '/pengaturan/keamanan'
|
||||
| '/pengaturan/notifikasi'
|
||||
| '/pengaturan/umum'
|
||||
| '/profile/edit'
|
||||
| '/users/$id'
|
||||
| '/admin/'
|
||||
| '/dashboard/'
|
||||
| '/profile/'
|
||||
| '/users/'
|
||||
| '/dashboard/pengaturan/akses-dan-tim'
|
||||
| '/dashboard/pengaturan/keamanan'
|
||||
| '/dashboard/pengaturan/notifikasi'
|
||||
| '/dashboard/pengaturan/umum'
|
||||
fileRoutesById: FileRoutesById
|
||||
}
|
||||
export interface RootRouteChildren {
|
||||
IndexRoute: typeof IndexRoute
|
||||
AdminRouteRoute: typeof AdminRouteRouteWithChildren
|
||||
DashboardRouteRoute: typeof DashboardRouteRouteWithChildren
|
||||
PengaturanRouteRoute: typeof PengaturanRouteRouteWithChildren
|
||||
BantuanRoute: typeof BantuanRoute
|
||||
BumdesRoute: typeof BumdesRoute
|
||||
DemografiPekerjaanRoute: typeof DemografiPekerjaanRoute
|
||||
JennaAnalyticRoute: typeof JennaAnalyticRoute
|
||||
KeamananRoute: typeof KeamananRoute
|
||||
KeuanganAnggaranRoute: typeof KeuanganAnggaranRoute
|
||||
KinerjaDivisiRoute: typeof KinerjaDivisiRoute
|
||||
PengaduanLayananPublikRoute: typeof PengaduanLayananPublikRoute
|
||||
SigninRoute: typeof SigninRoute
|
||||
SignupRoute: typeof SignupRoute
|
||||
SosialRoute: typeof SosialRoute
|
||||
ProfileEditRoute: typeof ProfileEditRoute
|
||||
UsersIdRoute: typeof UsersIdRoute
|
||||
ProfileIndexRoute: typeof ProfileIndexRoute
|
||||
@@ -380,6 +360,13 @@ export interface RootRouteChildren {
|
||||
|
||||
declare module '@tanstack/react-router' {
|
||||
interface FileRoutesByPath {
|
||||
'/sosial': {
|
||||
id: '/sosial'
|
||||
path: '/sosial'
|
||||
fullPath: '/sosial'
|
||||
preLoaderRoute: typeof SosialRouteImport
|
||||
parentRoute: typeof rootRouteImport
|
||||
}
|
||||
'/signup': {
|
||||
id: '/signup'
|
||||
path: '/signup'
|
||||
@@ -394,11 +381,67 @@ declare module '@tanstack/react-router' {
|
||||
preLoaderRoute: typeof SigninRouteImport
|
||||
parentRoute: typeof rootRouteImport
|
||||
}
|
||||
'/dashboard': {
|
||||
id: '/dashboard'
|
||||
path: '/dashboard'
|
||||
fullPath: '/dashboard'
|
||||
preLoaderRoute: typeof DashboardRouteRouteImport
|
||||
'/pengaduan-layanan-publik': {
|
||||
id: '/pengaduan-layanan-publik'
|
||||
path: '/pengaduan-layanan-publik'
|
||||
fullPath: '/pengaduan-layanan-publik'
|
||||
preLoaderRoute: typeof PengaduanLayananPublikRouteImport
|
||||
parentRoute: typeof rootRouteImport
|
||||
}
|
||||
'/kinerja-divisi': {
|
||||
id: '/kinerja-divisi'
|
||||
path: '/kinerja-divisi'
|
||||
fullPath: '/kinerja-divisi'
|
||||
preLoaderRoute: typeof KinerjaDivisiRouteImport
|
||||
parentRoute: typeof rootRouteImport
|
||||
}
|
||||
'/keuangan-anggaran': {
|
||||
id: '/keuangan-anggaran'
|
||||
path: '/keuangan-anggaran'
|
||||
fullPath: '/keuangan-anggaran'
|
||||
preLoaderRoute: typeof KeuanganAnggaranRouteImport
|
||||
parentRoute: typeof rootRouteImport
|
||||
}
|
||||
'/keamanan': {
|
||||
id: '/keamanan'
|
||||
path: '/keamanan'
|
||||
fullPath: '/keamanan'
|
||||
preLoaderRoute: typeof KeamananRouteImport
|
||||
parentRoute: typeof rootRouteImport
|
||||
}
|
||||
'/jenna-analytic': {
|
||||
id: '/jenna-analytic'
|
||||
path: '/jenna-analytic'
|
||||
fullPath: '/jenna-analytic'
|
||||
preLoaderRoute: typeof JennaAnalyticRouteImport
|
||||
parentRoute: typeof rootRouteImport
|
||||
}
|
||||
'/demografi-pekerjaan': {
|
||||
id: '/demografi-pekerjaan'
|
||||
path: '/demografi-pekerjaan'
|
||||
fullPath: '/demografi-pekerjaan'
|
||||
preLoaderRoute: typeof DemografiPekerjaanRouteImport
|
||||
parentRoute: typeof rootRouteImport
|
||||
}
|
||||
'/bumdes': {
|
||||
id: '/bumdes'
|
||||
path: '/bumdes'
|
||||
fullPath: '/bumdes'
|
||||
preLoaderRoute: typeof BumdesRouteImport
|
||||
parentRoute: typeof rootRouteImport
|
||||
}
|
||||
'/bantuan': {
|
||||
id: '/bantuan'
|
||||
path: '/bantuan'
|
||||
fullPath: '/bantuan'
|
||||
preLoaderRoute: typeof BantuanRouteImport
|
||||
parentRoute: typeof rootRouteImport
|
||||
}
|
||||
'/pengaturan': {
|
||||
id: '/pengaturan'
|
||||
path: '/pengaturan'
|
||||
fullPath: '/pengaturan'
|
||||
preLoaderRoute: typeof PengaturanRouteRouteImport
|
||||
parentRoute: typeof rootRouteImport
|
||||
}
|
||||
'/admin': {
|
||||
@@ -429,13 +472,6 @@ declare module '@tanstack/react-router' {
|
||||
preLoaderRoute: typeof ProfileIndexRouteImport
|
||||
parentRoute: typeof rootRouteImport
|
||||
}
|
||||
'/dashboard/': {
|
||||
id: '/dashboard/'
|
||||
path: '/'
|
||||
fullPath: '/dashboard/'
|
||||
preLoaderRoute: typeof DashboardIndexRouteImport
|
||||
parentRoute: typeof DashboardRouteRoute
|
||||
}
|
||||
'/admin/': {
|
||||
id: '/admin/'
|
||||
path: '/'
|
||||
@@ -457,68 +493,33 @@ declare module '@tanstack/react-router' {
|
||||
preLoaderRoute: typeof ProfileEditRouteImport
|
||||
parentRoute: typeof rootRouteImport
|
||||
}
|
||||
'/dashboard/sosial': {
|
||||
id: '/dashboard/sosial'
|
||||
path: '/sosial'
|
||||
fullPath: '/dashboard/sosial'
|
||||
preLoaderRoute: typeof DashboardSosialRouteImport
|
||||
parentRoute: typeof DashboardRouteRoute
|
||||
'/pengaturan/umum': {
|
||||
id: '/pengaturan/umum'
|
||||
path: '/umum'
|
||||
fullPath: '/pengaturan/umum'
|
||||
preLoaderRoute: typeof PengaturanUmumRouteImport
|
||||
parentRoute: typeof PengaturanRouteRoute
|
||||
}
|
||||
'/dashboard/pengaduan-layanan-publik': {
|
||||
id: '/dashboard/pengaduan-layanan-publik'
|
||||
path: '/pengaduan-layanan-publik'
|
||||
fullPath: '/dashboard/pengaduan-layanan-publik'
|
||||
preLoaderRoute: typeof DashboardPengaduanLayananPublikRouteImport
|
||||
parentRoute: typeof DashboardRouteRoute
|
||||
'/pengaturan/notifikasi': {
|
||||
id: '/pengaturan/notifikasi'
|
||||
path: '/notifikasi'
|
||||
fullPath: '/pengaturan/notifikasi'
|
||||
preLoaderRoute: typeof PengaturanNotifikasiRouteImport
|
||||
parentRoute: typeof PengaturanRouteRoute
|
||||
}
|
||||
'/dashboard/kinerja-divisi': {
|
||||
id: '/dashboard/kinerja-divisi'
|
||||
path: '/kinerja-divisi'
|
||||
fullPath: '/dashboard/kinerja-divisi'
|
||||
preLoaderRoute: typeof DashboardKinerjaDivisiRouteImport
|
||||
parentRoute: typeof DashboardRouteRoute
|
||||
}
|
||||
'/dashboard/keuangan-anggaran': {
|
||||
id: '/dashboard/keuangan-anggaran'
|
||||
path: '/keuangan-anggaran'
|
||||
fullPath: '/dashboard/keuangan-anggaran'
|
||||
preLoaderRoute: typeof DashboardKeuanganAnggaranRouteImport
|
||||
parentRoute: typeof DashboardRouteRoute
|
||||
}
|
||||
'/dashboard/keamanan': {
|
||||
id: '/dashboard/keamanan'
|
||||
'/pengaturan/keamanan': {
|
||||
id: '/pengaturan/keamanan'
|
||||
path: '/keamanan'
|
||||
fullPath: '/dashboard/keamanan'
|
||||
preLoaderRoute: typeof DashboardKeamananRouteImport
|
||||
parentRoute: typeof DashboardRouteRoute
|
||||
fullPath: '/pengaturan/keamanan'
|
||||
preLoaderRoute: typeof PengaturanKeamananRouteImport
|
||||
parentRoute: typeof PengaturanRouteRoute
|
||||
}
|
||||
'/dashboard/jenna-analytic': {
|
||||
id: '/dashboard/jenna-analytic'
|
||||
path: '/jenna-analytic'
|
||||
fullPath: '/dashboard/jenna-analytic'
|
||||
preLoaderRoute: typeof DashboardJennaAnalyticRouteImport
|
||||
parentRoute: typeof DashboardRouteRoute
|
||||
}
|
||||
'/dashboard/demografi-pekerjaan': {
|
||||
id: '/dashboard/demografi-pekerjaan'
|
||||
path: '/demografi-pekerjaan'
|
||||
fullPath: '/dashboard/demografi-pekerjaan'
|
||||
preLoaderRoute: typeof DashboardDemografiPekerjaanRouteImport
|
||||
parentRoute: typeof DashboardRouteRoute
|
||||
}
|
||||
'/dashboard/bumdes': {
|
||||
id: '/dashboard/bumdes'
|
||||
path: '/bumdes'
|
||||
fullPath: '/dashboard/bumdes'
|
||||
preLoaderRoute: typeof DashboardBumdesRouteImport
|
||||
parentRoute: typeof DashboardRouteRoute
|
||||
}
|
||||
'/dashboard/bantuan': {
|
||||
id: '/dashboard/bantuan'
|
||||
path: '/bantuan'
|
||||
fullPath: '/dashboard/bantuan'
|
||||
preLoaderRoute: typeof DashboardBantuanRouteImport
|
||||
parentRoute: typeof DashboardRouteRoute
|
||||
'/pengaturan/akses-dan-tim': {
|
||||
id: '/pengaturan/akses-dan-tim'
|
||||
path: '/akses-dan-tim'
|
||||
fullPath: '/pengaturan/akses-dan-tim'
|
||||
preLoaderRoute: typeof PengaturanAksesDanTimRouteImport
|
||||
parentRoute: typeof PengaturanRouteRoute
|
||||
}
|
||||
'/admin/users': {
|
||||
id: '/admin/users'
|
||||
@@ -541,41 +542,6 @@ declare module '@tanstack/react-router' {
|
||||
preLoaderRoute: typeof AdminApikeyRouteImport
|
||||
parentRoute: typeof AdminRouteRoute
|
||||
}
|
||||
'/dashboard/pengaturan': {
|
||||
id: '/dashboard/pengaturan'
|
||||
path: '/pengaturan'
|
||||
fullPath: '/dashboard/pengaturan'
|
||||
preLoaderRoute: typeof DashboardPengaturanRouteRouteImport
|
||||
parentRoute: typeof DashboardRouteRoute
|
||||
}
|
||||
'/dashboard/pengaturan/umum': {
|
||||
id: '/dashboard/pengaturan/umum'
|
||||
path: '/umum'
|
||||
fullPath: '/dashboard/pengaturan/umum'
|
||||
preLoaderRoute: typeof DashboardPengaturanUmumRouteImport
|
||||
parentRoute: typeof DashboardPengaturanRouteRoute
|
||||
}
|
||||
'/dashboard/pengaturan/notifikasi': {
|
||||
id: '/dashboard/pengaturan/notifikasi'
|
||||
path: '/notifikasi'
|
||||
fullPath: '/dashboard/pengaturan/notifikasi'
|
||||
preLoaderRoute: typeof DashboardPengaturanNotifikasiRouteImport
|
||||
parentRoute: typeof DashboardPengaturanRouteRoute
|
||||
}
|
||||
'/dashboard/pengaturan/keamanan': {
|
||||
id: '/dashboard/pengaturan/keamanan'
|
||||
path: '/keamanan'
|
||||
fullPath: '/dashboard/pengaturan/keamanan'
|
||||
preLoaderRoute: typeof DashboardPengaturanKeamananRouteImport
|
||||
parentRoute: typeof DashboardPengaturanRouteRoute
|
||||
}
|
||||
'/dashboard/pengaturan/akses-dan-tim': {
|
||||
id: '/dashboard/pengaturan/akses-dan-tim'
|
||||
path: '/akses-dan-tim'
|
||||
fullPath: '/dashboard/pengaturan/akses-dan-tim'
|
||||
preLoaderRoute: typeof DashboardPengaturanAksesDanTimRouteImport
|
||||
parentRoute: typeof DashboardPengaturanRouteRoute
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -597,64 +563,39 @@ const AdminRouteRouteWithChildren = AdminRouteRoute._addFileChildren(
|
||||
AdminRouteRouteChildren,
|
||||
)
|
||||
|
||||
interface DashboardPengaturanRouteRouteChildren {
|
||||
DashboardPengaturanAksesDanTimRoute: typeof DashboardPengaturanAksesDanTimRoute
|
||||
DashboardPengaturanKeamananRoute: typeof DashboardPengaturanKeamananRoute
|
||||
DashboardPengaturanNotifikasiRoute: typeof DashboardPengaturanNotifikasiRoute
|
||||
DashboardPengaturanUmumRoute: typeof DashboardPengaturanUmumRoute
|
||||
interface PengaturanRouteRouteChildren {
|
||||
PengaturanAksesDanTimRoute: typeof PengaturanAksesDanTimRoute
|
||||
PengaturanKeamananRoute: typeof PengaturanKeamananRoute
|
||||
PengaturanNotifikasiRoute: typeof PengaturanNotifikasiRoute
|
||||
PengaturanUmumRoute: typeof PengaturanUmumRoute
|
||||
}
|
||||
|
||||
const DashboardPengaturanRouteRouteChildren: DashboardPengaturanRouteRouteChildren =
|
||||
{
|
||||
DashboardPengaturanAksesDanTimRoute: DashboardPengaturanAksesDanTimRoute,
|
||||
DashboardPengaturanKeamananRoute: DashboardPengaturanKeamananRoute,
|
||||
DashboardPengaturanNotifikasiRoute: DashboardPengaturanNotifikasiRoute,
|
||||
DashboardPengaturanUmumRoute: DashboardPengaturanUmumRoute,
|
||||
}
|
||||
|
||||
const DashboardPengaturanRouteRouteWithChildren =
|
||||
DashboardPengaturanRouteRoute._addFileChildren(
|
||||
DashboardPengaturanRouteRouteChildren,
|
||||
)
|
||||
|
||||
interface DashboardRouteRouteChildren {
|
||||
DashboardPengaturanRouteRoute: typeof DashboardPengaturanRouteRouteWithChildren
|
||||
DashboardBantuanRoute: typeof DashboardBantuanRoute
|
||||
DashboardBumdesRoute: typeof DashboardBumdesRoute
|
||||
DashboardDemografiPekerjaanRoute: typeof DashboardDemografiPekerjaanRoute
|
||||
DashboardJennaAnalyticRoute: typeof DashboardJennaAnalyticRoute
|
||||
DashboardKeamananRoute: typeof DashboardKeamananRoute
|
||||
DashboardKeuanganAnggaranRoute: typeof DashboardKeuanganAnggaranRoute
|
||||
DashboardKinerjaDivisiRoute: typeof DashboardKinerjaDivisiRoute
|
||||
DashboardPengaduanLayananPublikRoute: typeof DashboardPengaduanLayananPublikRoute
|
||||
DashboardSosialRoute: typeof DashboardSosialRoute
|
||||
DashboardIndexRoute: typeof DashboardIndexRoute
|
||||
const PengaturanRouteRouteChildren: PengaturanRouteRouteChildren = {
|
||||
PengaturanAksesDanTimRoute: PengaturanAksesDanTimRoute,
|
||||
PengaturanKeamananRoute: PengaturanKeamananRoute,
|
||||
PengaturanNotifikasiRoute: PengaturanNotifikasiRoute,
|
||||
PengaturanUmumRoute: PengaturanUmumRoute,
|
||||
}
|
||||
|
||||
const DashboardRouteRouteChildren: DashboardRouteRouteChildren = {
|
||||
DashboardPengaturanRouteRoute: DashboardPengaturanRouteRouteWithChildren,
|
||||
DashboardBantuanRoute: DashboardBantuanRoute,
|
||||
DashboardBumdesRoute: DashboardBumdesRoute,
|
||||
DashboardDemografiPekerjaanRoute: DashboardDemografiPekerjaanRoute,
|
||||
DashboardJennaAnalyticRoute: DashboardJennaAnalyticRoute,
|
||||
DashboardKeamananRoute: DashboardKeamananRoute,
|
||||
DashboardKeuanganAnggaranRoute: DashboardKeuanganAnggaranRoute,
|
||||
DashboardKinerjaDivisiRoute: DashboardKinerjaDivisiRoute,
|
||||
DashboardPengaduanLayananPublikRoute: DashboardPengaduanLayananPublikRoute,
|
||||
DashboardSosialRoute: DashboardSosialRoute,
|
||||
DashboardIndexRoute: DashboardIndexRoute,
|
||||
}
|
||||
|
||||
const DashboardRouteRouteWithChildren = DashboardRouteRoute._addFileChildren(
|
||||
DashboardRouteRouteChildren,
|
||||
const PengaturanRouteRouteWithChildren = PengaturanRouteRoute._addFileChildren(
|
||||
PengaturanRouteRouteChildren,
|
||||
)
|
||||
|
||||
const rootRouteChildren: RootRouteChildren = {
|
||||
IndexRoute: IndexRoute,
|
||||
AdminRouteRoute: AdminRouteRouteWithChildren,
|
||||
DashboardRouteRoute: DashboardRouteRouteWithChildren,
|
||||
PengaturanRouteRoute: PengaturanRouteRouteWithChildren,
|
||||
BantuanRoute: BantuanRoute,
|
||||
BumdesRoute: BumdesRoute,
|
||||
DemografiPekerjaanRoute: DemografiPekerjaanRoute,
|
||||
JennaAnalyticRoute: JennaAnalyticRoute,
|
||||
KeamananRoute: KeamananRoute,
|
||||
KeuanganAnggaranRoute: KeuanganAnggaranRoute,
|
||||
KinerjaDivisiRoute: KinerjaDivisiRoute,
|
||||
PengaduanLayananPublikRoute: PengaduanLayananPublikRoute,
|
||||
SigninRoute: SigninRoute,
|
||||
SignupRoute: SignupRoute,
|
||||
SosialRoute: SosialRoute,
|
||||
ProfileEditRoute: ProfileEditRoute,
|
||||
UsersIdRoute: UsersIdRoute,
|
||||
ProfileIndexRoute: ProfileIndexRoute,
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
/** biome-ignore-all lint/suspicious/noExplicitAny: <explanation */
|
||||
import { protectedRouteMiddleware } from "@/middleware/authMiddleware";
|
||||
import { authStore } from "@/store/auth";
|
||||
import "@mantine/core/styles.css";
|
||||
import "@mantine/dates/styles.css";
|
||||
@@ -6,25 +7,25 @@ import { createRootRoute, Outlet } from "@tanstack/react-router";
|
||||
|
||||
export const Route = createRootRoute({
|
||||
component: RootComponent,
|
||||
beforeLoad: async () => {
|
||||
// Fetch session but don't block navigation
|
||||
try {
|
||||
const res = await fetch("/api/session", {
|
||||
method: "GET",
|
||||
credentials: "include",
|
||||
});
|
||||
if (res.ok) {
|
||||
const { data } = await res.json();
|
||||
authStore.user = data?.user;
|
||||
authStore.session = data;
|
||||
}
|
||||
} catch {
|
||||
// Ignore errors, allow public access
|
||||
beforeLoad: async ({ location }) => {
|
||||
// Only apply auth middleware for routes that need it
|
||||
// Public routes: /, /signin, /signup
|
||||
const isPublicRoute =
|
||||
location.pathname === "/" ||
|
||||
location.pathname === "/signin" ||
|
||||
location.pathname === "/signup";
|
||||
|
||||
if (isPublicRoute) {
|
||||
return;
|
||||
}
|
||||
return {};
|
||||
|
||||
// Apply protected route middleware for all other routes
|
||||
const context = await protectedRouteMiddleware({ location });
|
||||
authStore.user = context?.user as any;
|
||||
authStore.session = context?.session as any;
|
||||
},
|
||||
});
|
||||
|
||||
function RootComponent() {
|
||||
return <Outlet />;
|
||||
}
|
||||
}
|
||||
51
src/routes/bantuan.tsx
Normal file
51
src/routes/bantuan.tsx
Normal file
@@ -0,0 +1,51 @@
|
||||
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";
|
||||
|
||||
export const Route = createFileRoute("/bantuan")({
|
||||
component: BantuanPage,
|
||||
});
|
||||
|
||||
function BantuanPage() {
|
||||
const [opened, { toggle }] = useDisclosure();
|
||||
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 },
|
||||
}}
|
||||
padding="md"
|
||||
>
|
||||
<AppShell.Header bg={headerBgColor}>
|
||||
<Group h="100%" px="md">
|
||||
<Burger opened={opened} onClick={toggle} hiddenFrom="sm" size="sm" />
|
||||
<Header />
|
||||
</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}>
|
||||
<HelpPage />
|
||||
</AppShell.Main>
|
||||
</AppShell>
|
||||
);
|
||||
}
|
||||
9
src/routes/bumdes.tsx
Normal file
9
src/routes/bumdes.tsx
Normal file
@@ -0,0 +1,9 @@
|
||||
import { createFileRoute } from "@tanstack/react-router";
|
||||
|
||||
export const Route = createFileRoute("/bumdes")({
|
||||
component: RouteComponent,
|
||||
});
|
||||
|
||||
function RouteComponent() {
|
||||
return <div>Hello "/bumdes"!</div>;
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
import { createFileRoute } from "@tanstack/react-router";
|
||||
import HelpPage from "@/components/help-page";
|
||||
|
||||
export const Route = createFileRoute("/dashboard/bantuan")({
|
||||
component: HelpPage,
|
||||
});
|
||||
@@ -1,6 +0,0 @@
|
||||
import { createFileRoute } from "@tanstack/react-router";
|
||||
import BumdesPage from "@/components/bumdes-page";
|
||||
|
||||
export const Route = createFileRoute("/dashboard/bumdes")({
|
||||
component: BumdesPage,
|
||||
});
|
||||
@@ -1,6 +0,0 @@
|
||||
import { createFileRoute } from "@tanstack/react-router";
|
||||
import DemografiPekerjaan from "../../components/demografi-pekerjaan";
|
||||
|
||||
export const Route = createFileRoute("/dashboard/demografi-pekerjaan")({
|
||||
component: DemografiPekerjaan,
|
||||
});
|
||||
@@ -1,5 +0,0 @@
|
||||
import { createFileRoute } from "@tanstack/react-router";
|
||||
import { DashboardContent } from "@/components/dashboard-content";
|
||||
export const Route = createFileRoute("/dashboard/")({
|
||||
component: DashboardContent,
|
||||
});
|
||||
@@ -1,6 +0,0 @@
|
||||
import { createFileRoute } from "@tanstack/react-router";
|
||||
import JennaAnalytic from "@/components/jenna-analytic";
|
||||
|
||||
export const Route = createFileRoute("/dashboard/jenna-analytic")({
|
||||
component: JennaAnalytic,
|
||||
});
|
||||
@@ -1,6 +0,0 @@
|
||||
import { createFileRoute } from "@tanstack/react-router";
|
||||
import KeamananPage from "@/components/keamanan-page";
|
||||
|
||||
export const Route = createFileRoute("/dashboard/keamanan")({
|
||||
component: KeamananPage,
|
||||
});
|
||||
@@ -1,6 +0,0 @@
|
||||
import { createFileRoute } from "@tanstack/react-router";
|
||||
import KeuanganAnggaran from "@/components/keuangan-anggaran";
|
||||
|
||||
export const Route = createFileRoute("/dashboard/keuangan-anggaran")({
|
||||
component: KeuanganAnggaran,
|
||||
});
|
||||
@@ -1,5 +0,0 @@
|
||||
import { createFileRoute } from "@tanstack/react-router";
|
||||
import KinerjaDivisi from "@/components/kinerja-divisi";
|
||||
export const Route = createFileRoute("/dashboard/kinerja-divisi")({
|
||||
component: KinerjaDivisi,
|
||||
});
|
||||
@@ -1,5 +0,0 @@
|
||||
import { createFileRoute } from "@tanstack/react-router";
|
||||
import PengaduanLayananPublik from "@/components/pengaduan-layanan-publik";
|
||||
export const Route = createFileRoute("/dashboard/pengaduan-layanan-publik")({
|
||||
component: PengaduanLayananPublik,
|
||||
});
|
||||
@@ -1,6 +0,0 @@
|
||||
import { createFileRoute } from "@tanstack/react-router";
|
||||
import AksesDanTimSettings from "@/components/pengaturan/akses-dan-tim";
|
||||
|
||||
export const Route = createFileRoute("/dashboard/pengaturan/akses-dan-tim")({
|
||||
component: AksesDanTimSettings,
|
||||
});
|
||||
@@ -1,6 +0,0 @@
|
||||
import { createFileRoute } from "@tanstack/react-router";
|
||||
import KeamananSettings from "@/components/pengaturan/keamanan";
|
||||
|
||||
export const Route = createFileRoute("/dashboard/pengaturan/keamanan")({
|
||||
component: KeamananSettings,
|
||||
});
|
||||
@@ -1,6 +0,0 @@
|
||||
import { createFileRoute } from "@tanstack/react-router";
|
||||
import NotifikasiSettings from "@/components/pengaturan/notifikasi";
|
||||
|
||||
export const Route = createFileRoute("/dashboard/pengaturan/notifikasi")({
|
||||
component: NotifikasiSettings,
|
||||
});
|
||||
@@ -1,9 +0,0 @@
|
||||
import { createFileRoute, Outlet } from "@tanstack/react-router";
|
||||
|
||||
export const Route = createFileRoute("/dashboard/pengaturan")({
|
||||
component: () => (
|
||||
<div className="p-2">
|
||||
<Outlet />
|
||||
</div>
|
||||
),
|
||||
});
|
||||
@@ -1,6 +0,0 @@
|
||||
import { createFileRoute } from "@tanstack/react-router";
|
||||
import SocialPage from "@/components/sosial-page";
|
||||
|
||||
export const Route = createFileRoute("/dashboard/sosial")({
|
||||
component: SocialPage,
|
||||
});
|
||||
51
src/routes/demografi-pekerjaan.tsx
Normal file
51
src/routes/demografi-pekerjaan.tsx
Normal file
@@ -0,0 +1,51 @@
|
||||
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 DemografiPekerjaan from "../components/demografi-pekerjaan";
|
||||
|
||||
export const Route = createFileRoute("/demografi-pekerjaan")({
|
||||
component: DemografiPekerjaanPage,
|
||||
});
|
||||
|
||||
function DemografiPekerjaanPage() {
|
||||
const [opened, { toggle }] = useDisclosure();
|
||||
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 },
|
||||
}}
|
||||
padding="md"
|
||||
>
|
||||
<AppShell.Header bg={headerBgColor}>
|
||||
<Group h="100%" px="md">
|
||||
<Burger opened={opened} onClick={toggle} hiddenFrom="sm" size="sm" />
|
||||
<Header />
|
||||
</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}>
|
||||
<DemografiPekerjaan />
|
||||
</AppShell.Main>
|
||||
</AppShell>
|
||||
);
|
||||
}
|
||||
@@ -1,7 +1,51 @@
|
||||
import { createFileRoute, redirect } from "@tanstack/react-router";
|
||||
import { AppShell, Burger, Group, useMantineColorScheme } from "@mantine/core";
|
||||
import { useDisclosure } from "@mantine/hooks";
|
||||
import { createFileRoute } from "@tanstack/react-router";
|
||||
import { DashboardContent } from "@/components/dashboard-content";
|
||||
import { Header } from "@/components/header";
|
||||
import { Sidebar } from "@/components/sidebar";
|
||||
|
||||
export const Route = createFileRoute("/")({
|
||||
beforeLoad: () => {
|
||||
throw redirect({ to: "/dashboard" });
|
||||
},
|
||||
component: DashboardPage,
|
||||
});
|
||||
|
||||
function DashboardPage() {
|
||||
const [opened, { toggle }] = useDisclosure();
|
||||
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 },
|
||||
}}
|
||||
padding="md"
|
||||
>
|
||||
<AppShell.Header bg={headerBgColor}>
|
||||
<Group h="100%" px="md">
|
||||
<Burger opened={opened} onClick={toggle} hiddenFrom="sm" size="sm" />
|
||||
<Header />
|
||||
</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}>
|
||||
<DashboardContent />
|
||||
</AppShell.Main>
|
||||
</AppShell>
|
||||
);
|
||||
}
|
||||
9
src/routes/jenna-analytic.tsx
Normal file
9
src/routes/jenna-analytic.tsx
Normal file
@@ -0,0 +1,9 @@
|
||||
import { createFileRoute } from "@tanstack/react-router";
|
||||
|
||||
export const Route = createFileRoute("/jenna-analytic")({
|
||||
component: RouteComponent,
|
||||
});
|
||||
|
||||
function RouteComponent() {
|
||||
return <div>Hello "/jenna-analytic"!</div>;
|
||||
}
|
||||
9
src/routes/keamanan.tsx
Normal file
9
src/routes/keamanan.tsx
Normal file
@@ -0,0 +1,9 @@
|
||||
import { createFileRoute } from "@tanstack/react-router";
|
||||
|
||||
export const Route = createFileRoute("/keamanan")({
|
||||
component: RouteComponent,
|
||||
});
|
||||
|
||||
function RouteComponent() {
|
||||
return <div>Hello "/keamanan"!</div>;
|
||||
}
|
||||
51
src/routes/keuangan-anggaran.tsx
Normal file
51
src/routes/keuangan-anggaran.tsx
Normal file
@@ -0,0 +1,51 @@
|
||||
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";
|
||||
|
||||
export const Route = createFileRoute("/keuangan-anggaran")({
|
||||
component: KeuanganAnggaranPage,
|
||||
});
|
||||
|
||||
function KeuanganAnggaranPage() {
|
||||
const [opened, { toggle }] = useDisclosure();
|
||||
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 },
|
||||
}}
|
||||
padding="md"
|
||||
>
|
||||
<AppShell.Header bg={headerBgColor}>
|
||||
<Group h="100%" px="md">
|
||||
<Burger opened={opened} onClick={toggle} hiddenFrom="sm" size="sm" />
|
||||
<Header />
|
||||
</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}>
|
||||
<KeuanganAnggaran />
|
||||
</AppShell.Main>
|
||||
</AppShell>
|
||||
);
|
||||
}
|
||||
51
src/routes/kinerja-divisi.tsx
Normal file
51
src/routes/kinerja-divisi.tsx
Normal file
@@ -0,0 +1,51 @@
|
||||
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";
|
||||
|
||||
export const Route = createFileRoute("/kinerja-divisi")({
|
||||
component: KinerjaDivisiPage,
|
||||
});
|
||||
|
||||
function KinerjaDivisiPage() {
|
||||
const [opened, { toggle }] = useDisclosure();
|
||||
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 },
|
||||
}}
|
||||
padding="md"
|
||||
>
|
||||
<AppShell.Header bg={headerBgColor}>
|
||||
<Group h="100%" px="md">
|
||||
<Burger opened={opened} onClick={toggle} hiddenFrom="sm" size="sm" />
|
||||
<Header />
|
||||
</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}>
|
||||
<KinerjaDivisi />
|
||||
</AppShell.Main>
|
||||
</AppShell>
|
||||
);
|
||||
}
|
||||
51
src/routes/pengaduan-layanan-publik.tsx
Normal file
51
src/routes/pengaduan-layanan-publik.tsx
Normal file
@@ -0,0 +1,51 @@
|
||||
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";
|
||||
|
||||
export const Route = createFileRoute("/pengaduan-layanan-publik")({
|
||||
component: PengaduanLayananPublikPage,
|
||||
});
|
||||
|
||||
function PengaduanLayananPublikPage() {
|
||||
const [opened, { toggle }] = useDisclosure();
|
||||
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 },
|
||||
}}
|
||||
padding="md"
|
||||
>
|
||||
<AppShell.Header bg={headerBgColor}>
|
||||
<Group h="100%" px="md">
|
||||
<Burger opened={opened} onClick={toggle} hiddenFrom="sm" size="sm" />
|
||||
<Header />
|
||||
</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}>
|
||||
<PengaduanLayananPublik />
|
||||
</AppShell.Main>
|
||||
</AppShell>
|
||||
);
|
||||
}
|
||||
9
src/routes/pengaturan/akses-dan-tim.tsx
Normal file
9
src/routes/pengaturan/akses-dan-tim.tsx
Normal file
@@ -0,0 +1,9 @@
|
||||
import { createFileRoute } from "@tanstack/react-router";
|
||||
|
||||
export const Route = createFileRoute("/pengaturan/akses-dan-tim")({
|
||||
component: RouteComponent,
|
||||
});
|
||||
|
||||
function RouteComponent() {
|
||||
return <div>Hello "/pengaturan/akses-dan-tim"!</div>;
|
||||
}
|
||||
9
src/routes/pengaturan/keamanan.tsx
Normal file
9
src/routes/pengaturan/keamanan.tsx
Normal file
@@ -0,0 +1,9 @@
|
||||
import { createFileRoute } from "@tanstack/react-router";
|
||||
|
||||
export const Route = createFileRoute("/pengaturan/keamanan")({
|
||||
component: RouteComponent,
|
||||
});
|
||||
|
||||
function RouteComponent() {
|
||||
return <div>Hello "/pengaturan/keamanan"!</div>;
|
||||
}
|
||||
9
src/routes/pengaturan/notifikasi.tsx
Normal file
9
src/routes/pengaturan/notifikasi.tsx
Normal file
@@ -0,0 +1,9 @@
|
||||
import { createFileRoute } from "@tanstack/react-router";
|
||||
|
||||
export const Route = createFileRoute("/pengaturan/notifikasi")({
|
||||
component: RouteComponent,
|
||||
});
|
||||
|
||||
function RouteComponent() {
|
||||
return <div>Hello "/pengaturan/notifikasi"!</div>;
|
||||
}
|
||||
@@ -1,3 +1,4 @@
|
||||
<<<<<<< HEAD:src/routes/dashboard/route.tsx
|
||||
import {
|
||||
AppShell,
|
||||
Burger,
|
||||
@@ -8,13 +9,19 @@ import {
|
||||
import { useDisclosure, useMediaQuery } from "@mantine/hooks";
|
||||
import { createFileRoute, Outlet, useRouterState } from "@tanstack/react-router";
|
||||
import { useEffect } from "react";
|
||||
=======
|
||||
import { AppShell, Burger, Group, useMantineColorScheme } from "@mantine/core";
|
||||
import { useDisclosure } from "@mantine/hooks";
|
||||
import { createFileRoute, Outlet } from "@tanstack/react-router";
|
||||
>>>>>>> 89c8ca8 (fix: make dashboard public and remove admin-only restriction from main pages):src/routes/pengaturan/route.tsx
|
||||
import { Header } from "@/components/header";
|
||||
import { Sidebar } from "@/components/sidebar";
|
||||
|
||||
export const Route = createFileRoute("/dashboard")({
|
||||
component: RouteComponent,
|
||||
export const Route = createFileRoute("/pengaturan")({
|
||||
component: PengaturanLayout,
|
||||
});
|
||||
|
||||
<<<<<<< HEAD:src/routes/dashboard/route.tsx
|
||||
function RouteComponent() {
|
||||
const [opened, { toggle, close }] = useDisclosure();
|
||||
const { colorScheme } = useMantineColorScheme();
|
||||
@@ -23,10 +30,16 @@ function RouteComponent() {
|
||||
|
||||
const isMobile = useMediaQuery("(max-width: 48em)");
|
||||
|
||||
=======
|
||||
function PengaturanLayout() {
|
||||
const [opened, { toggle }] = useDisclosure();
|
||||
const { colorScheme } = useMantineColorScheme();
|
||||
>>>>>>> 89c8ca8 (fix: make dashboard public and remove admin-only restriction from main pages):src/routes/pengaturan/route.tsx
|
||||
const headerBgColor = colorScheme === "dark" ? "#11192D" : "#19355E";
|
||||
const navbarBgColor = colorScheme === "dark" ? "#11192D" : "white";
|
||||
const mainBgColor = colorScheme === "dark" ? "#11192D" : "#edf3f8ff";
|
||||
|
||||
<<<<<<< HEAD:src/routes/dashboard/route.tsx
|
||||
// ✅ AUTO CLOSE NAVBAR ON ROUTE CHANGE (MOBILE ONLY)
|
||||
useEffect(() => {
|
||||
if (isMobile && opened) {
|
||||
@@ -34,6 +47,8 @@ function RouteComponent() {
|
||||
}
|
||||
}, [routerState.location.pathname]);
|
||||
|
||||
=======
|
||||
>>>>>>> 89c8ca8 (fix: make dashboard public and remove admin-only restriction from main pages):src/routes/pengaturan/route.tsx
|
||||
return (
|
||||
<AppShell
|
||||
header={{ height: 60 }}
|
||||
@@ -73,7 +88,9 @@ function RouteComponent() {
|
||||
</AppShell.Navbar>
|
||||
|
||||
<AppShell.Main bg={mainBgColor}>
|
||||
<Outlet />
|
||||
<div className="p-2">
|
||||
<Outlet />
|
||||
</div>
|
||||
</AppShell.Main>
|
||||
</AppShell>
|
||||
);
|
||||
@@ -1,6 +1,6 @@
|
||||
import { createFileRoute } from "@tanstack/react-router";
|
||||
import UmumSettings from "@/components/pengaturan/umum";
|
||||
|
||||
export const Route = createFileRoute("/dashboard/pengaturan/umum")({
|
||||
export const Route = createFileRoute("/pengaturan/umum")({
|
||||
component: UmumSettings,
|
||||
});
|
||||
9
src/routes/sosial.tsx
Normal file
9
src/routes/sosial.tsx
Normal file
@@ -0,0 +1,9 @@
|
||||
import { createFileRoute } from "@tanstack/react-router";
|
||||
|
||||
export const Route = createFileRoute("/sosial")({
|
||||
component: RouteComponent,
|
||||
});
|
||||
|
||||
function RouteComponent() {
|
||||
return <div>Hello "/sosial"!</div>;
|
||||
}
|
||||
Reference in New Issue
Block a user