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

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

@@ -1,8 +1,6 @@
import React from "react"; import React from "react";
import { import {
Button,
Card, Card,
Badge,
Title, Title,
Text, Text,
Group, Group,
@@ -10,7 +8,7 @@ import {
Grid, Grid,
Box, Box,
Table, Table,
Progress, useMantineColorScheme,
} from "@mantine/core"; } from "@mantine/core";
import { IconBabyCarriage, IconSkull, IconArrowUp, IconArrowDown } from "@tabler/icons-react"; import { IconBabyCarriage, IconSkull, IconArrowUp, IconArrowDown } from "@tabler/icons-react";
import { BarChart, PieChart } from "@mantine/charts"; import { BarChart, PieChart } from "@mantine/charts";
@@ -30,7 +28,10 @@ const kpiData = [
strokeWidth={1.5} strokeWidth={1.5}
stroke="currentColor" stroke="currentColor"
className="h-6 w-6 text-muted-foreground" className="h-6 w-6 text-muted-foreground"
role="img"
aria-label="Icon penduduk"
> >
<title>Total Penduduk</title>
<path <path
strokeLinecap="round" strokeLinecap="round"
strokeLinejoin="round" strokeLinejoin="round"
@@ -52,7 +53,10 @@ const kpiData = [
strokeWidth={1.5} strokeWidth={1.5}
stroke="currentColor" stroke="currentColor"
className="h-6 w-6 text-muted-foreground" className="h-6 w-6 text-muted-foreground"
role="img"
aria-label="Icon kepala keluarga"
> >
<title>Kepala Keluarga</title>
<path <path
strokeLinecap="round" strokeLinecap="round"
strokeLinejoin="round" strokeLinejoin="round"
@@ -67,7 +71,7 @@ const kpiData = [
value: "23", value: "23",
sub: "Tahun ini", sub: "Tahun ini",
icon: ( 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} strokeWidth={1.5}
stroke="currentColor" stroke="currentColor"
className="h-6 w-6 text-muted-foreground" className="h-6 w-6 text-muted-foreground"
role="img"
aria-label="Icon kemiskinan"
> >
<title>Kemiskinan</title>
<path <path
strokeLinecap="round" strokeLinecap="round"
strokeLinejoin="round" strokeLinejoin="round"
@@ -136,31 +143,26 @@ const dynamicStats = [
]; ];
const DemografiPekerjaan = () => { const DemografiPekerjaan = () => {
const { colorScheme } = useMantineColorScheme();
const dark = colorScheme === "dark";
return ( return (
<Box className="space-y-6"> <Box className="space-y-6">
<Stack gap="xl"> <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 */} {/* KPI Cards */}
<Grid gutter="lg"> <Grid gutter="lg">
{kpiData.map((kpi) => ( {kpiData.map((kpi) => (
<Grid.Col key={kpi.id} span={{ base: 12, md: 6, lg: 3 }}> <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"> <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} {kpi.title}
</Text> </Text>
{React.cloneElement(kpi.icon, { {React.cloneElement(kpi.icon, {
className: "h-6 w-6", className: "h-6 w-6",
color: "var(--mantine-color-dimmed)", color: dark ? "var(--mantine-color-dark-3)" : "var(--mantine-color-dimmed)",
})} })}
</Group> </Group>
<Title order={3} fw={700} mt="xs"> <Title order={3} fw={700} c={dark ? "dark.0" : "black"} mt="xs">
{kpi.value} {kpi.value}
</Title> </Title>
{kpi.delta && ( {kpi.delta && (
@@ -171,7 +173,7 @@ const DemografiPekerjaan = () => {
? "green" ? "green"
: kpi.deltaType === "negative" : kpi.deltaType === "negative"
? "red" ? "red"
: "dimmed" : dark ? "dark.3" : "dimmed"
} }
mt={4} mt={4}
> >
@@ -179,7 +181,7 @@ const DemografiPekerjaan = () => {
</Text> </Text>
)} )}
{kpi.sub && ( {kpi.sub && (
<Text size="xs" c="dimmed" mt={2}> <Text size="xs" c={dark ? "dark.3" : "dimmed"} mt={2}>
{kpi.sub} {kpi.sub}
</Text> </Text>
)} )}
@@ -192,7 +194,7 @@ const DemografiPekerjaan = () => {
<Grid gutter="lg"> <Grid gutter="lg">
{/* Grafik Pengelompokan Umur */} {/* Grafik Pengelompokan Umur */}
<Grid.Col span={{ base: 12, lg: 6 }}> <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"> <Title order={3} fw={500} mb="md">
Grafik Pengelompokan Umur Grafik Pengelompokan Umur
</Title> </Title>
@@ -208,7 +210,7 @@ const DemografiPekerjaan = () => {
{/* Demografi Pekerjaan */} {/* Demografi Pekerjaan */}
<Grid.Col span={{ base: 12, lg: 6 }}> <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"> <Title order={3} fw={500} mb="md">
Demografi Pekerjaan Demografi Pekerjaan
</Title> </Title>
@@ -227,7 +229,7 @@ const DemografiPekerjaan = () => {
<Grid gutter="lg"> <Grid gutter="lg">
{/* Distribusi Agama */} {/* Distribusi Agama */}
<Grid.Col span={{ base: 12, lg: 6 }}> <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"> <Title order={3} fw={500} mb="md">
Distribusi Agama Distribusi Agama
</Title> </Title>
@@ -248,27 +250,27 @@ const DemografiPekerjaan = () => {
{/* Data per Banjar */} {/* Data per Banjar */}
<Grid.Col span={{ base: 12, lg: 6 }}> <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"> <Title order={3} fw={500} c={dark ? "dark.0" : "black"} mb="md">
Data per Banjar Data per Banjar
</Title> </Title>
<Table striped highlightOnHover> <Table striped highlightOnHover>
<Table.Thead> <Table.Thead>
<Table.Tr> <Table.Tr>
<Table.Th>Banjar</Table.Th> <Table.Th><Text c={dark ? "dark.0" : "black"}>Banjar</Text></Table.Th>
<Table.Th>Penduduk</Table.Th> <Table.Th><Text c={dark ? "dark.0" : "black"}>Penduduk</Text></Table.Th>
<Table.Th>KK</Table.Th> <Table.Th><Text c={dark ? "dark.0" : "black"}>KK</Text></Table.Th>
<Table.Th>Miskin</Table.Th> <Table.Th><Text c={dark ? "dark.0" : "black"}>Miskin</Text></Table.Th>
</Table.Tr> </Table.Tr>
</Table.Thead> </Table.Thead>
<Table.Tbody> <Table.Tbody>
{banjarData.map((item, index) => ( {banjarData.map((item, index) => (
<Table.Tr key={index}> <Table.Tr key={`${item.banjar}-${index}`}>
<Table.Td>{item.banjar}</Table.Td> <Table.Td><Text c={dark ? "dark.0" : "black"}>{item.banjar}</Text></Table.Td>
<Table.Td>{item.population.toLocaleString()}</Table.Td> <Table.Td><Text c={dark ? "dark.0" : "black"}>{item.population.toLocaleString()}</Text></Table.Td>
<Table.Td>{item.kk.toLocaleString()}</Table.Td> <Table.Td><Text c={dark ? "dark.0" : "black"}>{item.kk.toLocaleString()}</Text></Table.Td>
<Table.Td> <Table.Td>
<Text c="red">{item.poor.toLocaleString()}</Text> <Text c={dark ? "red.4" : "red"}>{item.poor.toLocaleString()}</Text>
</Table.Td> </Table.Td>
</Table.Tr> </Table.Tr>
))} ))}
@@ -279,17 +281,17 @@ const DemografiPekerjaan = () => {
</Grid> </Grid>
{/* Statistik Dinamika Penduduk */} {/* Statistik Dinamika Penduduk */}
<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"> <Title order={3} fw={500} c={dark ? "dark.0" : "black"} mb="md">
Statistik Dinamika Penduduk Statistik Dinamika Penduduk
</Title> </Title>
<Grid gutter="md"> <Grid gutter="md">
{dynamicStats.map((stat, index) => ( {dynamicStats.map((stat, index) => (
<Grid.Col key={index} span={{ base: 12, md: 3 }}> <Grid.Col key={`${stat.title}-${index}`} span={{ base: 12, md: 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="center"> <Group justify="space-between" align="center">
<Box> <Box>
<Text size="sm" fw={500} c="dimmed"> <Text size="sm" fw={500} c={dark ? "dark.3" : "dimmed"}>
{stat.title} {stat.title}
</Text> </Text>
<Title order={4} fw={700} c={stat.color}> <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 { HelpCard } from '@/components/ui/help-card';
import { IconBook, IconVideo, IconHelpCircle, IconMessage, IconFileText, IconHeadphones } from '@tabler/icons-react'; import { IconBook, IconVideo, IconHelpCircle, IconMessage, IconFileText, IconHeadphones } from '@tabler/icons-react';
import { useState } from 'react'; import { useState } from 'react';
const HelpPage = () => { const HelpPage = () => {
const { colorScheme } = useMantineColorScheme();
const dark = colorScheme === "dark";
// Sample data for sections // Sample data for sections
const guideItems = [ const guideItems = [
{ title: 'Cara Login', description: 'Langkah-langkah untuk login ke dashboard' }, { title: 'Cara Login', description: 'Langkah-langkah untuk login ke dashboard' },
@@ -89,7 +91,7 @@ const HelpPage = () => {
{/* Statistics Section */} {/* Statistics Section */}
<SimpleGrid cols={3} spacing="lg" mb="xl"> <SimpleGrid cols={3} spacing="lg" mb="xl">
{stats.map((stat, index) => ( {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="xl" fw={700} style={{ fontSize: '32px' }}>{stat.value}</Text>
<Text size="sm" color="dimmed">{stat.label}</Text> <Text size="sm" color="dimmed">{stat.label}</Text>
</HelpCard> </HelpCard>
@@ -101,7 +103,7 @@ const HelpPage = () => {
<Grid gutter="lg" justify="center"> <Grid gutter="lg" justify="center">
{/* Panduan Memulai */} {/* Panduan Memulai */}
<Grid.Col span={{ base: 12, sm: 6, md: 4 }}> <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> <Box>
{guideItems.map((item, index) => ( {guideItems.map((item, index) => (
<Box key={index} py="sm" style={{ borderBottom: '1px solid #eee', cursor: 'pointer' }} onClick={() => alert(`Navigasi ke ${item.title}`)}> <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 */} {/* Video Tutorial */}
<Grid.Col span={{ base: 12, sm: 6, md: 4 }}> <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> <Box>
{videoItems.map((item, index) => ( {videoItems.map((item, index) => (
<Box key={index} py="sm" style={{ borderBottom: '1px solid #eee', cursor: 'pointer' }} onClick={() => alert(`Buka video: ${item.title}`)}> <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 */} {/* FAQ */}
<Grid.Col span={{ base: 12, sm: 6, md: 4 }}> <Grid.Col span={{ base: 12, sm: 6, md: 4 }}>
<HelpCard icon={<IconHelpCircle size={24} />} title="FAQ" h="100%"> <HelpCard style={{ borderColor: dark ? "#141D34" : "white" }} bg={dark ? "#141D34" : "white"} icon={<IconHelpCircle size={24} />} title="FAQ" h="100%">
<Accordion variant="separated"> <Accordion variant="separated" >
{faqItems.map((item, index) => ( {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.Control>{item.question}</Accordion.Control>
<Accordion.Panel> <Accordion.Panel>
<Text size="sm">{item.answer}</Text> <Text size="sm">{item.answer}</Text>
@@ -149,7 +151,7 @@ const HelpPage = () => {
<Grid> <Grid>
{/* Hubungi Support */} {/* Hubungi Support */}
<Grid.Col span={{ base: 12, sm: 6, md: 4 }}> <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> <Box>
<Text fw={500}>Email</Text> <Text fw={500}>Email</Text>
<Text size="sm" color="dimmed" mb="md"><a href="mailto:support@example.com">support@example.com</a></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 */} {/* Dokumentasi */}
<Grid.Col span={{ base: 12, sm: 6, md: 4 }}> <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> <Box>
{documentationItems.map((item, index) => ( {documentationItems.map((item, index) => (
<Box key={index} py="sm" style={{ borderBottom: '1px solid #eee', cursor: 'pointer' }} onClick={() => alert(`Navigasi ke dokumentasi: ${item.title}`)}> <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 */} {/* Jenna - Virtual Assistant */}
<Grid.Col span={{ base: 12, sm: 6, md: 4 }}> <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={{ height: '300px', display: 'flex', flexDirection: 'column' }}>
<Box style={{ flex: 1, overflowY: 'auto', marginBottom: '12px', maxHeight: '200px' }}> <Box style={{ flex: 1, overflowY: 'auto', marginBottom: '12px', maxHeight: '200px' }}>
{messages.map((msg) => ( {messages.map((msg) => (
@@ -190,8 +192,8 @@ const HelpPage = () => {
key={msg.id} key={msg.id}
style={{ style={{
alignSelf: msg.sender === 'user' ? 'flex-end' : 'flex-start', alignSelf: msg.sender === 'user' ? 'flex-end' : 'flex-start',
backgroundColor: msg.sender === 'user' ? '#3B82F6' : '#F3F4F6', backgroundColor: msg.sender === 'user' ? dark ? "#263852ff" : "#F1F5F9" : dark ? "#263852ff" : "#F1F5F9",
color: msg.sender === 'user' ? 'white' : 'black', color: msg.sender === 'user' ? dark ? "#F1F5F9" : "#263852ff" : dark ? "#F1F5F9" : "#263852ff",
padding: '8px 12px', padding: '8px 12px',
borderRadius: '8px', borderRadius: '8px',
marginBottom: '8px', marginBottom: '8px',

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

@@ -101,7 +101,7 @@ const KeamananPage = () => {
<Grid gutter="md"> <Grid gutter="md">
{kpiData.map((kpi, index) => ( {kpiData.map((kpi, index) => (
<GridCol key={index} span={{ base: 12, sm: 6, md: 6 }}> <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"> <Group justify="space-between" align="center">
<Stack gap={0}> <Stack gap={0}>
<Text size="sm" c={dark ? "dark.3" : "dimmed"}> <Text size="sm" c={dark ? "dark.3" : "dimmed"}>
@@ -128,7 +128,7 @@ const KeamananPage = () => {
<Grid gutter="md"> <Grid gutter="md">
{/* Peta Keamanan CCTV */} {/* Peta Keamanan CCTV */}
<GridCol span={{ base: 12, lg: 6 }}> <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> <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> <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"> <Stack mt="md" gap="sm">
<Title order={4} c={dark ? "dark.0" : "black"}>Daftar CCTV</Title> <Title order={4} c={dark ? "dark.0" : "black"}>Daftar CCTV</Title>
{cctvLocations.map((cctv, index) => ( {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"> <Group justify="space-between">
<Stack gap={0}> <Stack gap={0}>
<Group gap="xs"> <Group gap="xs">
@@ -181,12 +181,12 @@ const KeamananPage = () => {
{/* Daftar Laporan Keamanan */} {/* Daftar Laporan Keamanan */}
<GridCol span={{ base: 12, lg: 6 }}> <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> <Title order={3} mb="md" c={dark ? "dark.0" : "black"}>Laporan Keamanan Lingkungan</Title>
<Stack gap="sm"> <Stack gap="sm">
{securityReports.map((report, index) => ( {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"> <Group justify="space-between" mb="sm">
<Text fw={500} c={dark ? "dark.0" : "black"}>{report.title}</Text> <Text fw={500} c={dark ? "dark.0" : "black"}>{report.title}</Text>
<Badge <Badge

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

@@ -10,6 +10,7 @@ import {
Grid, Grid,
Box, Box,
Progress, Progress,
useMantineColorScheme,
} from "@mantine/core"; } from "@mantine/core";
import { IconTrendingUp, IconTrendingDown, IconCurrency } from "@tabler/icons-react"; import { IconTrendingUp, IconTrendingDown, IconCurrency } from "@tabler/icons-react";
import { BarChart } from "@mantine/charts"; import { BarChart } from "@mantine/charts";
@@ -115,31 +116,16 @@ const apbdReport = {
}; };
const KeuanganAnggaran = () => { const KeuanganAnggaran = () => {
const { colorScheme } = useMantineColorScheme();
const dark = colorScheme === "dark";
return ( return (
<Box> <Box>
<Stack gap="xl"> <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 */} {/* KPI Cards */}
<Grid gutter="lg"> <Grid gutter="lg">
{kpiData.map((kpi) => ( {kpiData.map((kpi) => (
<Grid.Col key={kpi.id} span={{ base: 12, md: 6, lg: 3 }}> <Grid.Col key={kpi.id} span={{ base: 12, md: 6, lg: 3 }}>
<Card <Card p="md" radius="md" withBorder bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }} h="100%">
shadow="sm"
padding="lg"
radius="md"
withBorder
style={{
display: 'flex',
flexDirection: 'column',
height: '100%'
}}
>
<Group justify="space-between" align="flex-start" mb="xs"> <Group justify="space-between" align="flex-start" mb="xs">
<Text size="sm" fw={500} c="dimmed"> <Text size="sm" fw={500} c="dimmed">
{kpi.title} {kpi.title}
@@ -181,7 +167,7 @@ const KeuanganAnggaran = () => {
<Grid gutter="lg"> <Grid gutter="lg">
{/* Grafik Pemasukan vs Pengeluaran */} {/* Grafik Pemasukan vs Pengeluaran */}
<Grid.Col span={{ base: 12, lg: 6 }}> <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"> <Title order={3} fw={500} mb="md">
Pemasukan vs Pengeluaran Pemasukan vs Pengeluaran
</Title> </Title>
@@ -200,7 +186,7 @@ const KeuanganAnggaran = () => {
{/* Alokasi Anggaran Per Sektor */} {/* Alokasi Anggaran Per Sektor */}
<Grid.Col span={{ base: 12, lg: 6 }}> <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"> <Title order={3} fw={500} mb="md">
Alokasi Anggaran Per Sektor Alokasi Anggaran Per Sektor
</Title> </Title>
@@ -219,7 +205,7 @@ const KeuanganAnggaran = () => {
<Grid gutter="lg"> <Grid gutter="lg">
{/* Dana Bantuan & Hibah */} {/* Dana Bantuan & Hibah */}
<Grid.Col span={{ base: 12, lg: 6 }}> <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"> <Title order={3} fw={500} mb="md">
Dana Bantuan & Hibah Dana Bantuan & Hibah
</Title> </Title>
@@ -243,8 +229,8 @@ const KeuanganAnggaran = () => {
Rp {fund.amount.toLocaleString()}jt Rp {fund.amount.toLocaleString()}jt
</Text> </Text>
</Box> </Box>
<Badge <Badge
variant="light" variant="light"
color={fund.status === "cair" ? "green" : "yellow"} color={fund.status === "cair" ? "green" : "yellow"}
> >
{fund.status} {fund.status}
@@ -257,11 +243,11 @@ const KeuanganAnggaran = () => {
{/* Laporan APBDes */} {/* Laporan APBDes */}
<Grid.Col span={{ base: 12, lg: 6 }}> <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"> <Title order={3} fw={500} mb="md">
Laporan APBDes Laporan APBDes
</Title> </Title>
<Box mb="md"> <Box mb="md">
<Title order={4} mb="sm">Pendapatan</Title> <Title order={4} mb="sm">Pendapatan</Title>
<Stack gap="xs"> <Stack gap="xs">
@@ -281,7 +267,7 @@ const KeuanganAnggaran = () => {
</Group> </Group>
</Stack> </Stack>
</Box> </Box>
<Box> <Box>
<Title order={4} mb="sm">Belanja</Title> <Title order={4} mb="sm">Belanja</Title>
<Stack gap="xs"> <Stack gap="xs">
@@ -301,7 +287,7 @@ const KeuanganAnggaran = () => {
</Group> </Group>
</Stack> </Stack>
</Box> </Box>
<Box mt="md" pt="md" style={{ borderTop: '1px solid var(--mantine-color-gray-3)' }}> <Box mt="md" pt="md" style={{ borderTop: '1px solid var(--mantine-color-gray-3)' }}>
<Group justify="space-between"> <Group justify="space-between">
<Text fw={700}>Saldo:</Text> <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 location = useLocation();
const navigate = useNavigate(); const navigate = useNavigate();
const { colorScheme } = useMantineColorScheme(); const { colorScheme } = useMantineColorScheme();
const dark = colorScheme === 'dark';
const isActiveBg = colorScheme === 'dark' ? "#182949" : "#E6F0FF"; const isActiveBg = colorScheme === 'dark' ? "#182949" : "#E6F0FF";
const isActiveBorder = colorScheme === 'dark' ? "#00398D" : "#1F41AE"; const isActiveBorder = colorScheme === 'dark' ? "#00398D" : "#1F41AE";
@@ -89,7 +90,7 @@ export function Sidebar({ className }: SidebarProps) {
styles={{ styles={{
input: { input: {
"&::placeholder": { "&::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 ( return (
<Stack gap="lg"> <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 */} {/* Health Statistics Cards */}
<Grid gutter="md"> <Grid gutter="md">
<GridCol span={{ base: 12, sm: 6, md: 3 }}> <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"> <Group justify="space-between" align="center">
<Stack gap={0}> <Stack gap={0}>
<Text size="sm" c={dark ? "dark.3" : "dimmed"}> <Text size="sm" c={dark ? "dark.3" : "dimmed"}>
@@ -110,7 +103,7 @@ const SosialPage = () => {
</GridCol> </GridCol>
<GridCol span={{ base: 12, sm: 6, md: 3 }}> <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"> <Group justify="space-between" align="center">
<Stack gap={0}> <Stack gap={0}>
<Text size="sm" c={dark ? "dark.3" : "dimmed"}> <Text size="sm" c={dark ? "dark.3" : "dimmed"}>
@@ -128,7 +121,7 @@ const SosialPage = () => {
</GridCol> </GridCol>
<GridCol span={{ base: 12, sm: 6, md: 3 }}> <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"> <Group justify="space-between" align="center">
<Stack gap={0}> <Stack gap={0}>
<Text size="sm" c={dark ? "dark.3" : "dimmed"}> <Text size="sm" c={dark ? "dark.3" : "dimmed"}>
@@ -146,7 +139,7 @@ const SosialPage = () => {
</GridCol> </GridCol>
<GridCol span={{ base: 12, sm: 6, md: 3 }}> <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"> <Group justify="space-between" align="center">
<Stack gap={0}> <Stack gap={0}>
<Text size="sm" c={dark ? "dark.3" : "dimmed"}> <Text size="sm" c={dark ? "dark.3" : "dimmed"}>
@@ -165,7 +158,7 @@ const SosialPage = () => {
</Grid> </Grid>
{/* Health Progress Bars */} {/* 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> <Title order={3} mb="md" c={dark ? "dark.0" : "black"}>Statistik Kesehatan</Title>
<Stack gap="md"> <Stack gap="md">
{healthProgress.map((item, index) => ( {healthProgress.map((item, index) => (
@@ -192,15 +185,15 @@ const SosialPage = () => {
<Grid gutter="md"> <Grid gutter="md">
{/* Jadwal Posyandu */} {/* Jadwal Posyandu */}
<GridCol span={{ base: 12, lg: 6 }}> <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> <Title order={3} mb="md" c={dark ? "dark.0" : "black"}>Jadwal Posyandu</Title>
<Stack gap="sm"> <Stack gap="sm">
{posyanduSchedule.map((item, index) => ( {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"> <Group justify="space-between">
<Stack gap={0}> <Stack gap={0}>
<Text fw={500} c={dark ? "dark.0" : "black"}>{item.nama}</Text> <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> </Stack>
<Badge variant="light" color="darmasaba-blue"> <Badge variant="light" color="darmasaba-blue">
{item.jam} {item.jam}
@@ -214,7 +207,7 @@ const SosialPage = () => {
{/* Pendidikan */} {/* Pendidikan */}
<GridCol span={{ base: 12, lg: 6 }}> <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> <Title order={3} mb="md" c={dark ? "dark.0" : "black"}>Pendidikan</Title>
<Stack gap="md"> <Stack gap="md">
<Group justify="space-between"> <Group justify="space-between">
@@ -234,7 +227,7 @@ const SosialPage = () => {
<Text fw={700} c={dark ? "dark.0" : "black"}>{educationStats.siswa.sma}</Text> <Text fw={700} c={dark ? "dark.0" : "black"}>{educationStats.siswa.sma}</Text>
</Group> </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"> <Group justify="space-between">
<Text fw={500} c={dark ? "dark.0" : "black"}>Jumlah Lembaga Pendidikan</Text> <Text fw={500} c={dark ? "dark.0" : "black"}>Jumlah Lembaga Pendidikan</Text>
<Text fw={700} c={dark ? "dark.0" : "black"}>{educationStats.sekolah.jumlah}</Text> <Text fw={700} c={dark ? "dark.0" : "black"}>{educationStats.sekolah.jumlah}</Text>
@@ -252,7 +245,7 @@ const SosialPage = () => {
<Grid gutter="md"> <Grid gutter="md">
{/* Beasiswa Desa */} {/* Beasiswa Desa */}
<GridCol span={{ base: 12, lg: 6 }}> <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"> <Group justify="space-between" align="center">
<Stack gap={0}> <Stack gap={0}>
<Text size="sm" c={dark ? "dark.3" : "dimmed"}>Beasiswa Desa</Text> <Text size="sm" c={dark ? "dark.3" : "dimmed"}>Beasiswa Desa</Text>
@@ -269,7 +262,7 @@ const SosialPage = () => {
{/* Kalender Event Budaya */} {/* Kalender Event Budaya */}
<GridCol span={{ base: 12, lg: 6 }}> <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> <Title order={3} mb="md" c={dark ? "dark.0" : "black"}>Kalender Event Budaya</Title>
<List spacing="sm"> <List spacing="sm">
{culturalEvents.map((event, index) => ( {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'; import { IconInfoCircle } from '@tabler/icons-react';
const UmumSettings = () => { const UmumSettings = () => {
const { colorScheme } = useMantineColorScheme();
const dark = colorScheme === 'dark';
return ( 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> <Title order={2} mb="lg">Pengaturan Umum</Title>
<Text color="dimmed" mb="xl">Kelola pengaturan umum aplikasi Anda</Text> <Text color="dimmed" mb="xl">Kelola pengaturan umum aplikasi Anda</Text>