wibu/dashboard-desaplus-noc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: improve dark mode styling in demografi-pekerjaan component

Browse Source 
Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
This commit is contained in:
nico
2026-02-13 15:45:48 +08:00
parent 81c138a961
commit 6722c8646a
8 changed files with 101 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/components/bumdes-page.tsx
View File

@@ -109,18 +109,11 @@ const BumdesPage = () => {
return (
<Stack gap="lg">
{/* Page Header */}
<Group justify="space-between" align="center">
<Title order={2} c={dark ? "dark.0" : "black"}>
BUMDes & UMKM Desa
</Title>
</Group>
{/* KPI Cards */}
<Grid gutter="md">
{kpiData.map((kpi, index) => (
<GridCol key={index} span={{ base: 12, sm: 6, md: 3 }}>
<Card withBorder radius="md" padding="lg">
<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"}>
@@ -145,7 +138,7 @@ const BumdesPage = () => {
</Grid>
{/* Update Penjualan Produk Header */}
<Card withBorder radius="md" bg={dark ? "dark.8" : "darmasaba-blue.0"}>
<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
@@ -174,7 +167,7 @@ const BumdesPage = () => {
<GridCol span={{ base: 12, lg: 4 }}>
<Stack gap="md">
{/* Total Penjualan, Produk Aktif, Total Transaksi */}
<Card withBorder radius="md" p="lg">
<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>
@@ -192,7 +185,7 @@ const BumdesPage = () => {
</Card>
{/* Top 3 Produk Terlaris */}
<Card withBorder radius="md" p="lg">
<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) => (
@@ -226,7 +219,7 @@ const BumdesPage = () => {
{/* Detail Penjualan Produk (Right Column) */}
<GridCol span={{ base: 12, lg: 8 }}>
<Card withBorder radius="md" p="lg">
<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
@@ -245,13 +238,13 @@ const BumdesPage = () => {
<Table striped highlightOnHover withColumnBorders>
<Table.Thead>
<Table.Tr>
<Table.Th><Text c={dark ? "dark.3" : "dimmed"}>Produk</Text></Table.Th>
<Table.Th><Text c={dark ? "dark.3" : "dimmed"}>Penjualan Bulan Ini</Text></Table.Th>
<Table.Th><Text c={dark ? "dark.3" : "dimmed"}>Bulan Lalu</Text></Table.Th>
<Table.Th><Text c={dark ? "dark.3" : "dimmed"}>Trend</Text></Table.Th>
<Table.Th><Text c={dark ? "dark.3" : "dimmed"}>Volume</Text></Table.Th>
<Table.Th><Text c={dark ? "dark.3" : "dimmed"}>Stok</Text></Table.Th>
<Table.Th><Text c={dark ? "dark.3" : "dimmed"}>Aksi</Text></Table.Th>
<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>
@@ -264,7 +257,7 @@ const BumdesPage = () => {
<Text fz={"sm"} c={dark ? "dark.0" : "black"}>{product.penjualanBulanIni}</Text>
</Table.Td>
<Table.Td>
<Text fz={"sm"} c={dark ? "dark.3" : "dimmed"}>{product.bulanLalu}</Text>
<Text fz={"sm"} c={dark ? "white" : "dimmed"}>{product.bulanLalu}</Text>
</Table.Td>
<Table.Td>
<Group gap="xs">

74
src/components/demografi-pekerjaan.tsx
View File

@@ -1,8 +1,6 @@
import React from "react";
import {
Button,
Card,
Badge,
Title,
Text,
Group,
@@ -10,7 +8,7 @@ import {
Grid,
Box,
Table,
Progress,
useMantineColorScheme,
} from "@mantine/core";
import { IconBabyCarriage, IconSkull, IconArrowUp, IconArrowDown } from "@tabler/icons-react";
import { BarChart, PieChart } from "@mantine/charts";
@@ -30,7 +28,10 @@ const kpiData = [
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"
@@ -52,7 +53,10 @@ const kpiData = [
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"
@@ -67,7 +71,7 @@ const kpiData = [
value: "23",
sub: "Tahun ini",
icon: (
<IconBabyCarriage className="h-6 w-6 text-muted-foreground" />
<IconBabyCarriage className="h-6 w-6 text-muted-foreground" role="img" aria-label="Icon kelahiran" />
),
},
{
@@ -84,7 +88,10 @@ const kpiData = [
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"
@@ -136,31 +143,26 @@ const dynamicStats = [
];
const DemografiPekerjaan = () => {
const { colorScheme } = useMantineColorScheme();
const dark = colorScheme === "dark";
return (
<Box className="space-y-6">
<Stack gap="xl">
<Group justify="space-between" align="center">
<Title order={2} fw={700}>
Demografi & Kependudukan
</Title>
<Button variant="filled">Export Data</Button>
</Group>
{/* KPI Cards */}
<Grid gutter="lg">
{kpiData.map((kpi) => (
<Grid.Col key={kpi.id} span={{ base: 12, md: 6, lg: 3 }}>
<Card shadow="sm" padding="lg" radius="md" withBorder>
<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">
<Text size="sm" fw={500} c={dark ? "dark.3" : "dimmed"}>
{kpi.title}
</Text>
{React.cloneElement(kpi.icon, {
className: "h-6 w-6",
color: "var(--mantine-color-dimmed)",
color: dark ? "var(--mantine-color-dark-3)" : "var(--mantine-color-dimmed)",
})}
</Group>
<Title order={3} fw={700} mt="xs">
<Title order={3} fw={700} c={dark ? "dark.0" : "black"} mt="xs">
{kpi.value}
</Title>
{kpi.delta && (
@@ -171,7 +173,7 @@ const DemografiPekerjaan = () => {
? "green"
: kpi.deltaType === "negative"
? "red"
: "dimmed"
: dark ? "dark.3" : "dimmed"
}
mt={4}
>
@@ -179,7 +181,7 @@ const DemografiPekerjaan = () => {
</Text>
)}
{kpi.sub && (
<Text size="xs" c="dimmed" mt={2}>
<Text size="xs" c={dark ? "dark.3" : "dimmed"} mt={2}>
{kpi.sub}
</Text>
)}
@@ -192,7 +194,7 @@ const DemografiPekerjaan = () => {
<Grid gutter="lg">
{/* Grafik Pengelompokan Umur */}
<Grid.Col span={{ base: 12, lg: 6 }}>
<Card shadow="sm" padding="lg" radius="md" withBorder>
<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>
@@ -208,7 +210,7 @@ const DemografiPekerjaan = () => {
{/* Demografi Pekerjaan */}
<Grid.Col span={{ base: 12, lg: 6 }}>
<Card shadow="sm" padding="lg" radius="md" withBorder>
<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>
@@ -227,7 +229,7 @@ const DemografiPekerjaan = () => {
<Grid gutter="lg">
{/* Distribusi Agama */}
<Grid.Col span={{ base: 12, lg: 6 }}>
<Card shadow="sm" padding="lg" radius="md" withBorder>
<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>
@@ -248,27 +250,27 @@ const DemografiPekerjaan = () => {
{/* Data per Banjar */}
<Grid.Col span={{ base: 12, lg: 6 }}>
<Card shadow="sm" padding="lg" radius="md" withBorder>
<Title order={3} fw={500} mb="md">
<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>Banjar</Table.Th>
<Table.Th>Penduduk</Table.Th>
<Table.Th>KK</Table.Th>
<Table.Th>Miskin</Table.Th>
<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={index}>
<Table.Td>{item.banjar}</Table.Td>
<Table.Td>{item.population.toLocaleString()}</Table.Td>
<Table.Td>{item.kk.toLocaleString()}</Table.Td>
<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="red">{item.poor.toLocaleString()}</Text>
<Text c={dark ? "red.4" : "red"}>{item.poor.toLocaleString()}</Text>
</Table.Td>
</Table.Tr>
))}
@@ -279,17 +281,17 @@ const DemografiPekerjaan = () => {
</Grid>
{/* Statistik Dinamika Penduduk */}
<Card shadow="sm" padding="lg" radius="md" withBorder>
<Title order={3} fw={500} mb="md">
<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={index} span={{ base: 12, md: 3 }}>
<Card shadow="sm" padding="lg" radius="md" withBorder>
<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="dimmed">
<Text size="sm" fw={500} c={dark ? "dark.3" : "dimmed"}>
{stat.title}
</Text>
<Title order={4} fw={700} c={stat.color}>

26
src/components/help-page.tsx
View File

@@ -1,9 +1,11 @@
import { Container, Grid, Title, Text, SimpleGrid, Box, Accordion, Stack } from '@mantine/core';
import { Container, Grid, Title, Text, SimpleGrid, Box, Accordion, Stack, useMantineColorScheme } from '@mantine/core';
import { HelpCard } from '@/components/ui/help-card';
import { IconBook, IconVideo, IconHelpCircle, IconMessage, IconFileText, IconHeadphones } from '@tabler/icons-react';
import { useState } from 'react';
const HelpPage = () => {
const { colorScheme } = useMantineColorScheme();
const dark = colorScheme === "dark";
// Sample data for sections
const guideItems = [
{ title: 'Cara Login', description: 'Langkah-langkah untuk login ke dashboard' },
@@ -89,7 +91,7 @@ const HelpPage = () => {
{/* Statistics Section */}
<SimpleGrid cols={3} spacing="lg" mb="xl">
{stats.map((stat, index) => (
<HelpCard key={index} p="lg" style={{ textAlign: 'center' }} h="100%">
<HelpCard key={index} bg={dark ? "#141D34" : "white"} p="lg" style={{ textAlign: 'center', borderColor: dark ? "#141D34" : "white" }} h="100%" >
<Text size="xl" fw={700} style={{ fontSize: '32px' }}>{stat.value}</Text>
<Text size="sm" color="dimmed">{stat.label}</Text>
</HelpCard>
@@ -101,7 +103,7 @@ const HelpPage = () => {
<Grid gutter="lg" justify="center">
{/* Panduan Memulai */}
<Grid.Col span={{ base: 12, sm: 6, md: 4 }}>
<HelpCard icon={<IconBook size={24} />} title="Panduan Memulai" h="100%">
<HelpCard style={{ borderColor: dark ? "#141D34" : "white" }} bg={dark ? "#141D34" : "white"} icon={<IconBook size={24} />} title="Panduan Memulai" h="100%">
<Box>
{guideItems.map((item, index) => (
<Box key={index} py="sm" style={{ borderBottom: '1px solid #eee', cursor: 'pointer' }} onClick={() => alert(`Navigasi ke ${item.title}`)}>
@@ -115,7 +117,7 @@ const HelpPage = () => {
{/* Video Tutorial */}
<Grid.Col span={{ base: 12, sm: 6, md: 4 }}>
<HelpCard icon={<IconVideo size={24} />} title="Video Tutorial" h="100%">
<HelpCard style={{ borderColor: dark ? "#141D34" : "white" }} bg={dark ? "#141D34" : "white"} icon={<IconVideo size={24} />} title="Video Tutorial" h="100%">
<Box>
{videoItems.map((item, index) => (
<Box key={index} py="sm" style={{ borderBottom: '1px solid #eee', cursor: 'pointer' }} onClick={() => alert(`Buka video: ${item.title}`)}>
@@ -129,10 +131,10 @@ const HelpPage = () => {
{/* FAQ */}
<Grid.Col span={{ base: 12, sm: 6, md: 4 }}>
<HelpCard icon={<IconHelpCircle size={24} />} title="FAQ" h="100%">
<Accordion variant="separated">
<HelpCard style={{ borderColor: dark ? "#141D34" : "white" }} bg={dark ? "#141D34" : "white"} icon={<IconHelpCircle size={24} />} title="FAQ" h="100%">
<Accordion variant="separated" >
{faqItems.map((item, index) => (
<Accordion.Item key={index} value={`faq-${index}`}>
<Accordion.Item style={{ backgroundColor: dark ? "#263852ff" : "#F1F5F9" }} key={index} value={`faq-${index}`}>
<Accordion.Control>{item.question}</Accordion.Control>
<Accordion.Panel>
<Text size="sm">{item.answer}</Text>
@@ -149,7 +151,7 @@ const HelpPage = () => {
<Grid>
{/* Hubungi Support */}
<Grid.Col span={{ base: 12, sm: 6, md: 4 }}>
<HelpCard icon={<IconHeadphones size={24} />} title="Hubungi Support" h="100%">
<HelpCard style={{ borderColor: dark ? "#141D34" : "white" }} bg={dark ? "#141D34" : "white"} icon={<IconHeadphones size={24} />} title="Hubungi Support" h="100%">
<Box>
<Text fw={500}>Email</Text>
<Text size="sm" color="dimmed" mb="md"><a href="mailto:support@example.com">support@example.com</a></Text>
@@ -168,7 +170,7 @@ const HelpPage = () => {
{/* Dokumentasi */}
<Grid.Col span={{ base: 12, sm: 6, md: 4 }}>
<HelpCard icon={<IconFileText size={24} />} title="Dokumentasi" h="100%">
<HelpCard style={{ borderColor: dark ? "#141D34" : "white" }} bg={dark ? "#141D34" : "white"} icon={<IconFileText size={24} />} title="Dokumentasi" h="100%">
<Box>
{documentationItems.map((item, index) => (
<Box key={index} py="sm" style={{ borderBottom: '1px solid #eee', cursor: 'pointer' }} onClick={() => alert(`Navigasi ke dokumentasi: ${item.title}`)}>
@@ -182,7 +184,7 @@ const HelpPage = () => {
{/* Jenna - Virtual Assistant */}
<Grid.Col span={{ base: 12, sm: 6, md: 4 }}>
<HelpCard icon={<IconMessage size={24} />} title="Jenna - Virtual Assistant" h="100%">
<HelpCard style={{ borderColor: dark ? "#141D34" : "white" }} bg={dark ? "#141D34" : "white"} icon={<IconMessage size={24} />} title="Jenna - Virtual Assistant" h="100%">
<Box style={{ height: '300px', display: 'flex', flexDirection: 'column' }}>
<Box style={{ flex: 1, overflowY: 'auto', marginBottom: '12px', maxHeight: '200px' }}>
{messages.map((msg) => (
@@ -190,8 +192,8 @@ const HelpPage = () => {
key={msg.id}
style={{
alignSelf: msg.sender === 'user' ? 'flex-end' : 'flex-start',
backgroundColor: msg.sender === 'user' ? '#3B82F6' : '#F3F4F6',
color: msg.sender === 'user' ? 'white' : 'black',
backgroundColor: msg.sender === 'user' ? dark ? "#263852ff" : "#F1F5F9" : dark ? "#263852ff" : "#F1F5F9",
color: msg.sender === 'user' ? dark ? "#F1F5F9" : "#263852ff" : dark ? "#F1F5F9" : "#263852ff",
padding: '8px 12px',
borderRadius: '8px',
marginBottom: '8px',

10
src/components/keamanan-page.tsx
View File

@@ -101,7 +101,7 @@ const KeamananPage = () => {
<Grid gutter="md">
{kpiData.map((kpi, index) => (
<GridCol key={index} span={{ base: 12, sm: 6, md: 6 }}>
<Card withBorder radius="md" padding="lg">
<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"}>
@@ -128,7 +128,7 @@ const KeamananPage = () => {
<Grid gutter="md">
{/* Peta Keamanan CCTV */}
<GridCol span={{ base: 12, lg: 6 }}>
<Card withBorder radius="md" p="lg">
<Card p="md" radius="md" withBorder bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }} h="100%">
<Title order={3} mb="md" c={dark ? "dark.0" : "black"}>Peta Keamanan CCTV</Title>
<Text size="sm" c={dark ? "dark.3" : "dimmed"} mb="md">Titik Lokasi CCTV</Text>
@@ -154,7 +154,7 @@ const KeamananPage = () => {
<Stack mt="md" gap="sm">
<Title order={4} c={dark ? "dark.0" : "black"}>Daftar CCTV</Title>
{cctvLocations.map((cctv, index) => (
<Card key={index} withBorder radius="md" p="md">
<Card key={index} p="md" radius="md" withBorder bg={dark ? "#263852ff" : "#F1F5F9"} style={{ borderColor: dark ? "#263852ff" : "#F1F5F9" }}>
<Group justify="space-between">
<Stack gap={0}>
<Group gap="xs">
@@ -181,12 +181,12 @@ const KeamananPage = () => {
{/* Daftar Laporan Keamanan */}
<GridCol span={{ base: 12, lg: 6 }}>
<Card withBorder radius="md" p="lg">
<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"}>Laporan Keamanan Lingkungan</Title>
<Stack gap="sm">
{securityReports.map((report, index) => (
<Card key={index} withBorder radius="md" p="md">
<Card key={index} p="md" radius="md" withBorder bg={dark ? "#263852ff" : "#F1F5F9"} style={{ borderColor: dark ? "#263852ff" : "#F1F5F9" }}>
<Group justify="space-between" mb="sm">
<Text fw={500} c={dark ? "dark.0" : "black"}>{report.title}</Text>
<Badge

40
src/components/keuangan-anggaran.tsx
View File

@@ -10,6 +10,7 @@ import {
Grid,
Box,
Progress,
useMantineColorScheme,
} from "@mantine/core";
import { IconTrendingUp, IconTrendingDown, IconCurrency } from "@tabler/icons-react";
import { BarChart } from "@mantine/charts";
@@ -115,31 +116,16 @@ const apbdReport = {
};
const KeuanganAnggaran = () => {
const { colorScheme } = useMantineColorScheme();
const dark = colorScheme === "dark";
return (
<Box>
<Stack gap="xl">
<Group justify="space-between" align="center">
<Title order={2} fw={700}>
Keuangan & Anggaran
</Title>
<Button variant="filled">Export Laporan</Button>
</Group>
{/* KPI Cards */}
<Grid gutter="lg">
{kpiData.map((kpi) => (
<Grid.Col key={kpi.id} span={{ base: 12, md: 6, lg: 3 }}>
<Card
shadow="sm"
padding="lg"
radius="md"
withBorder
style={{
display: 'flex',
flexDirection: 'column',
height: '100%'
}}
>
<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}
@@ -181,7 +167,7 @@ const KeuanganAnggaran = () => {
<Grid gutter="lg">
{/* Grafik Pemasukan vs Pengeluaran */}
<Grid.Col span={{ base: 12, lg: 6 }}>
<Card shadow="sm" padding="lg" radius="md" withBorder>
<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>
@@ -200,7 +186,7 @@ const KeuanganAnggaran = () => {
{/* Alokasi Anggaran Per Sektor */}
<Grid.Col span={{ base: 12, lg: 6 }}>
<Card shadow="sm" padding="lg" radius="md" withBorder>
<Card p="md" radius="md" withBorder bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }}>
<Title order={3} fw={500} mb="md">
Alokasi Anggaran Per Sektor
</Title>
@@ -219,7 +205,7 @@ const KeuanganAnggaran = () => {
<Grid gutter="lg">
{/* Dana Bantuan & Hibah */}
<Grid.Col span={{ base: 12, lg: 6 }}>
<Card shadow="sm" padding="lg" radius="md" withBorder>
<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>
@@ -243,8 +229,8 @@ const KeuanganAnggaran = () => {
Rp {fund.amount.toLocaleString()}jt
</Text>
</Box>
<Badge
variant="light"
<Badge
variant="light"
color={fund.status === "cair" ? "green" : "yellow"}
>
{fund.status}
@@ -257,11 +243,11 @@ const KeuanganAnggaran = () => {
{/* Laporan APBDes */}
<Grid.Col span={{ base: 12, lg: 6 }}>
<Card shadow="sm" padding="lg" radius="md" withBorder>
<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">
@@ -281,7 +267,7 @@ const KeuanganAnggaran = () => {
</Group>
</Stack>
</Box>
<Box>
<Title order={4} mb="sm">Belanja</Title>
<Stack gap="xs">
@@ -301,7 +287,7 @@ const KeuanganAnggaran = () => {
</Group>
</Stack>
</Box>
<Box mt="md" pt="md" style={{ borderTop: '1px solid var(--mantine-color-gray-3)' }}>
<Group justify="space-between">
<Text fw={700}>Saldo:</Text>

3
src/components/sidebar.tsx
View File

@@ -21,6 +21,7 @@ export function Sidebar({ className }: SidebarProps) {
const location = useLocation();
const navigate = useNavigate();
const { colorScheme } = useMantineColorScheme();
const dark = colorScheme === 'dark';
const isActiveBg = colorScheme === 'dark' ? "#182949" : "#E6F0FF";
const isActiveBorder = colorScheme === 'dark' ? "#00398D" : "#1F41AE";
@@ -89,7 +90,7 @@ export function Sidebar({ className }: SidebarProps) {
styles={{
input: {
"&::placeholder": {
color: "var(--mantine-color-gray-5)",
color: dark ? "#F1F5F9" : "#263852ff",
},
},
}}

31
src/components/sosial-page.tsx
View File

@@ -82,17 +82,10 @@ const SosialPage = () => {
return (
<Stack gap="lg">
{/* Page Header */}
<Group justify="space-between" align="center">
<Title order={2} c={dark ? "dark.0" : "black"}>
Sosial Desa
</Title>
</Group>
{/* Health Statistics Cards */}
<Grid gutter="md">
<GridCol span={{ base: 12, sm: 6, md: 3 }}>
<Card withBorder radius="md" padding="lg">
<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"}>
@@ -110,7 +103,7 @@ const SosialPage = () => {
</GridCol>
<GridCol span={{ base: 12, sm: 6, md: 3 }}>
<Card withBorder radius="md" padding="lg">
<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"}>
@@ -128,7 +121,7 @@ const SosialPage = () => {
</GridCol>
<GridCol span={{ base: 12, sm: 6, md: 3 }}>
<Card withBorder radius="md" padding="lg">
<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"}>
@@ -146,7 +139,7 @@ const SosialPage = () => {
</GridCol>
<GridCol span={{ base: 12, sm: 6, md: 3 }}>
<Card withBorder radius="md" padding="lg">
<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"}>
@@ -165,7 +158,7 @@ const SosialPage = () => {
</Grid>
{/* Health Progress Bars */}
<Card withBorder radius="md" p="lg">
<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) => (
@@ -192,15 +185,15 @@ const SosialPage = () => {
<Grid gutter="md">
{/* Jadwal Posyandu */}
<GridCol span={{ base: 12, lg: 6 }}>
<Card withBorder radius="md" p="lg">
<Card p="md" radius="md" withBorder bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }}>
<Title order={3} mb="md" c={dark ? "dark.0" : "black"}>Jadwal Posyandu</Title>
<Stack gap="sm">
{posyanduSchedule.map((item, index) => (
<Card key={index} withBorder radius="md" p="md">
<Card key={index} p="md" radius="md" withBorder bg={dark ? "#263852ff" : "#F1F5F9"} style={{ borderColor: dark ? "#263852ff" : "#F1F5F9" }} h="100%">
<Group justify="space-between">
<Stack gap={0}>
<Text fw={500} c={dark ? "dark.0" : "black"}>{item.nama}</Text>
<Text size="sm" c={dark ? "dark.3" : "dimmed"}>{item.tanggal}</Text>
<Text size="sm" c={dark ? "dark.0" : "black"}>{item.tanggal}</Text>
</Stack>
<Badge variant="light" color="darmasaba-blue">
{item.jam}
@@ -214,7 +207,7 @@ const SosialPage = () => {
{/* Pendidikan */}
<GridCol span={{ base: 12, lg: 6 }}>
<Card withBorder radius="md" p="lg">
<Card p="md" radius="md" withBorder bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }} h="100%">
<Title order={3} mb="md" c={dark ? "dark.0" : "black"}>Pendidikan</Title>
<Stack gap="md">
<Group justify="space-between">
@@ -234,7 +227,7 @@ const SosialPage = () => {
<Text fw={700} c={dark ? "dark.0" : "black"}>{educationStats.siswa.sma}</Text>
</Group>
<Card withBorder radius="md" p="md" mt="md">
<Card withBorder radius="md" p="md" mt="md" bg={dark ? "#263852ff" : "#F1F5F9"} style={{ borderColor: dark ? "#263852ff" : "#F1F5F9" }}>
<Group justify="space-between">
<Text fw={500} c={dark ? "dark.0" : "black"}>Jumlah Lembaga Pendidikan</Text>
<Text fw={700} c={dark ? "dark.0" : "black"}>{educationStats.sekolah.jumlah}</Text>
@@ -252,7 +245,7 @@ const SosialPage = () => {
<Grid gutter="md">
{/* Beasiswa Desa */}
<GridCol span={{ base: 12, lg: 6 }}>
<Card withBorder radius="md" p="lg" bg={dark ? "dark.8" : "darmasaba-blue.0"}>
<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>
@@ -269,7 +262,7 @@ const SosialPage = () => {
{/* Kalender Event Budaya */}
<GridCol span={{ base: 12, lg: 6 }}>
<Card withBorder radius="md" p="lg">
<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) => (

6
src/routes/dashboard/pengaturan/umum.tsx
View File

@@ -1,9 +1,11 @@
import { Card, Title, Text, Space, TextInput, Select, Button, Group, Switch, Alert } from '@mantine/core';
import { Card, Title, Text, Space, TextInput, Select, Button, Group, Switch, Alert, useMantineColorScheme } from '@mantine/core';
import { IconInfoCircle } from '@tabler/icons-react';
const UmumSettings = () => {
const { colorScheme } = useMantineColorScheme();
const dark = colorScheme === 'dark';
return (
<Card withBorder radius="md" p="xl">
<Card withBorder radius="md" p="xl" bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }}>
<Title order={2} mb="lg">Pengaturan Umum</Title>
<Text color="dimmed" mb="xl">Kelola pengaturan umum aplikasi Anda</Text>