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

Fix Konsisten Warna Bg

Browse Source
This commit is contained in:
nico
2026-03-25 16:46:59 +08:00
parent 5c09e7a0be
commit 366c08fbaa
13 changed files with 44 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -155,7 +155,7 @@ const HelpPage = () => {
{stats.map((stat, index) => ( {stats.map((stat, index) => (
<HelpCard <HelpCard
key={index} key={index}
bg={dark ? "#141D34" : "white"} bg={dark ? "#1E293B" : "white"}
p="lg" p="lg"
style={{ style={{
textAlign: "center", textAlign: "center",
@@ -180,7 +180,7 @@ const HelpPage = () => {
<Grid.Col span={{ base: 12, sm: 6, md: 4 }}> <Grid.Col span={{ base: 12, sm: 6, md: 4 }}>
<HelpCard <HelpCard
style={{ borderColor: dark ? "#141D34" : "white" }} style={{ borderColor: dark ? "#141D34" : "white" }}
bg={dark ? "#141D34" : "white"} bg={dark ? "#1E293B" : "white"}
icon={<IconBook size={24} color="white" />} icon={<IconBook size={24} color="white" />}
title="Panduan Memulai" title="Panduan Memulai"
h="100%" h="100%"
@@ -210,7 +210,7 @@ const HelpPage = () => {
<Grid.Col span={{ base: 12, sm: 6, md: 4 }}> <Grid.Col span={{ base: 12, sm: 6, md: 4 }}>
<HelpCard <HelpCard
style={{ borderColor: dark ? "#141D34" : "white" }} style={{ borderColor: dark ? "#141D34" : "white" }}
bg={dark ? "#141D34" : "white"} bg={dark ? "#1E293B" : "white"}
icon={<IconVideo size={24} color="white" />} icon={<IconVideo size={24} color="white" />}
title="Video Tutorial" title="Video Tutorial"
h="100%" h="100%"
@@ -240,7 +240,7 @@ const HelpPage = () => {
<Grid.Col span={{ base: 12, sm: 6, md: 4 }}> <Grid.Col span={{ base: 12, sm: 6, md: 4 }}>
<HelpCard <HelpCard
style={{ borderColor: dark ? "#141D34" : "white" }} style={{ borderColor: dark ? "#141D34" : "white" }}
bg={dark ? "#141D34" : "white"} bg={dark ? "#1E293B" : "white"}
icon={<IconHelpCircle size={24} color="white" />} icon={<IconHelpCircle size={24} color="white" />}
title="FAQ" title="FAQ"
h="100%" h="100%"
@@ -272,7 +272,7 @@ const HelpPage = () => {
<Grid.Col span={{ base: 12, sm: 6, md: 4 }}> <Grid.Col span={{ base: 12, sm: 6, md: 4 }}>
<HelpCard <HelpCard
style={{ borderColor: dark ? "#141D34" : "white" }} style={{ borderColor: dark ? "#141D34" : "white" }}
bg={dark ? "#141D34" : "white"} bg={dark ? "#1E293B" : "white"}
icon={<IconHeadphones size={24} color="white" />} icon={<IconHeadphones size={24} color="white" />}
title="Hubungi Support" title="Hubungi Support"
h="100%" h="100%"
@@ -307,7 +307,7 @@ const HelpPage = () => {
<Grid.Col span={{ base: 12, sm: 6, md: 4 }}> <Grid.Col span={{ base: 12, sm: 6, md: 4 }}>
<HelpCard <HelpCard
style={{ borderColor: dark ? "#141D34" : "white" }} style={{ borderColor: dark ? "#141D34" : "white" }}
bg={dark ? "#141D34" : "white"} bg={dark ? "#1E293B" : "white"}
icon={<IconFileText size={24} color="white" />} icon={<IconFileText size={24} color="white" />}
title="Dokumentasi" title="Dokumentasi"
h="100%" h="100%"
@@ -339,7 +339,7 @@ const HelpPage = () => {
<Grid.Col span={{ base: 12, sm: 6, md: 4 }}> <Grid.Col span={{ base: 12, sm: 6, md: 4 }}>
<HelpCard <HelpCard
style={{ borderColor: dark ? "#141D34" : "white" }} style={{ borderColor: dark ? "#141D34" : "white" }}
bg={dark ? "#141D34" : "white"} bg={dark ? "#1E293B" : "white"}
icon={<IconMessage size={24} color="white" />} icon={<IconMessage size={24} color="white" />}
title="Jenna - Virtual Assistant" title="Jenna - Virtual Assistant"
h="100%" h="100%"

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

@@ -126,7 +126,7 @@ const KeamananPage = () => {
p="md" p="md"
radius="md" radius="md"
withBorder withBorder
bg={dark ? "#141D34" : "white"} bg={dark ? "#1E293B" : "white"}
style={{ borderColor: dark ? "#141D34" : "white" }} style={{ borderColor: dark ? "#141D34" : "white" }}
h="100%" h="100%"
> >
@@ -143,7 +143,7 @@ const KeamananPage = () => {
> >
{kpi.value} {kpi.value}
</Text> </Text>
<Text size="sm" c={dark ? "dark.3" : "dimmed"}> <Text size="sm" c={dark ? "white" : "dimmed"}>
{kpi.title} {kpi.title}
</Text> </Text>
</Group> </Group>
@@ -165,14 +165,14 @@ const KeamananPage = () => {
p="md" p="md"
radius="md" radius="md"
withBorder withBorder
bg={dark ? "#141D34" : "white"} bg={dark ? "#1E293B" : "white"}
style={{ borderColor: dark ? "#141D34" : "white" }} style={{ borderColor: dark ? "#141D34" : "white" }}
h="100%" h="100%"
> >
<Title order={3} mb="md" c={dark ? "dark.0" : "black"}> <Title order={3} mb="md" c={dark ? "dark.0" : "black"}>
Peta Keamanan CCTV Peta Keamanan CCTV
</Title> </Title>
<Text size="sm" c={dark ? "dark.3" : "dimmed"} mb="md"> <Text size="sm" c={dark ? "white" : "dimmed"} mb="md">
Titik Lokasi CCTV Titik Lokasi CCTV
</Text> </Text>
@@ -228,13 +228,13 @@ const KeamananPage = () => {
{cctv.status === "active" ? "Online" : "Offline"} {cctv.status === "active" ? "Online" : "Offline"}
</Badge> </Badge>
</Group> </Group>
<Text size="sm" c={dark ? "dark.3" : "dimmed"}> <Text size="sm" c={dark ? "white" : "dimmed"}>
{cctv.location} {cctv.location}
</Text> </Text>
</Stack> </Stack>
<Group gap="xs"> <Group gap="xs">
<IconClock size={16} stroke={1.5} /> <IconClock size={16} stroke={1.5} />
<Text size="sm" c={dark ? "dark.3" : "dimmed"}> <Text size="sm" c={dark ? "white" : "dimmed"}>
{cctv.lastSeen} {cctv.lastSeen}
</Text> </Text>
</Group> </Group>
@@ -252,7 +252,7 @@ const KeamananPage = () => {
p="md" p="md"
radius="md" radius="md"
withBorder withBorder
bg={dark ? "#141D34" : "white"} bg={dark ? "#1E293B" : "white"}
style={{ borderColor: dark ? "#141D34" : "white" }} style={{ borderColor: dark ? "#141D34" : "white" }}
h="100%" h="100%"
> >
@@ -287,19 +287,19 @@ const KeamananPage = () => {
<Group justify="space-between"> <Group justify="space-between">
<Group gap="xs"> <Group gap="xs">
<IconMapPin size={16} stroke={1.5} /> <IconMapPin size={16} stroke={1.5} />
<Text size="sm" c={dark ? "dark.3" : "dimmed"}> <Text size="sm" c={dark ? "white" : "dimmed"}>
{report.location} {report.location}
</Text> </Text>
</Group> </Group>
<Group gap="xs"> <Group gap="xs">
<IconClock size={16} stroke={1.5} /> <IconClock size={16} stroke={1.5} />
<Text size="sm" c={dark ? "dark.3" : "dimmed"}> <Text size="sm" c={dark ? "white" : "dimmed"}>
{report.reportedAt} {report.reportedAt}
</Text> </Text>
</Group> </Group>
</Group> </Group>
<Text size="sm" c={dark ? "dark.3" : "dimmed"} mt="sm"> <Text size="sm" c={dark ? "white" : "dimmed"} mt="sm">
{report.date} {report.date}
</Text> </Text>
</Card> </Card>

7
src/components/kinerja-divisi/activity-card.tsx
View File

@@ -1,4 +1,4 @@
import { Box, Card, Group, Progress, Text } from "@mantine/core"; import { Box, Card, Group, Progress, Text, useMantineColorScheme } from "@mantine/core";
interface ActivityCardProps { interface ActivityCardProps {
title: string; title: string;
@@ -26,13 +26,16 @@ export function ActivityCard({
} }
}; };
const { colorScheme } = useMantineColorScheme();
const dark = colorScheme === "dark";
return ( return (
<Card <Card
radius="xl" radius="xl"
p={0} p={0}
withBorder={false} withBorder={false}
style={{ style={{
backgroundColor: "#F3F4F6", backgroundColor: dark ? "#334155" : "white",
overflow: "hidden", overflow: "hidden",
}} }}
> >

14
src/components/sosial/beasiswa.tsx
View File

@@ -37,16 +37,16 @@ export const Beasiswa = ({ data }: BeasiswaProps) => {
radius="xl" radius="xl"
withBorder withBorder
shadow="sm" shadow="sm"
bg={dark ? "#141D34" : "white"} bg={dark ? "#1E293B" : "white"}
style={{ borderColor: dark ? "#141D34" : "#e5e7eb" }} style={{ borderColor: dark ? "#141D34" : "#e5e7eb" }}
h={"100%"} h={"100%"}
> >
<Group justify="space-between" align="center"> <Group justify="space-between" align="center">
<Stack gap={2}> <Stack gap={2}>
<Text size="sm" c={dark ? "dark.3" : "dimmed"} fw={500}> <Text size="sm" c={dark ? "white" : "dimmed"} fw={500}>
Beasiswa Desa Beasiswa Desa
</Text> </Text>
<Text size="xl" fw={700} c={dark ? "dark.0" : "#1e3a5f"}> <Text size="xl" fw={700} c={dark ? "white" : "#1e3a5f"}>
Penerima: {displayData.penerima} Penerima: {displayData.penerima}
</Text> </Text>
</Stack> </Stack>
@@ -61,14 +61,14 @@ export const Beasiswa = ({ data }: BeasiswaProps) => {
</Group> </Group>
<Stack gap="xs" mt="md"> <Stack gap="xs" mt="md">
<Group justify="space-between"> <Group justify="space-between">
<Text c={dark ? "dark.3" : "dimmed"}>Dana Tersalurkan:</Text> <Text c={dark ? "white" : "dimmed"}>Dana Tersalurkan:</Text>
<Text fw={700} c={dark ? "dark.0" : "#1e3a5f"}> <Text fw={700} c={dark ? "white" : "#1e3a5f"}>
{displayData.dana} {displayData.dana}
</Text> </Text>
</Group> </Group>
<Group justify="space-between"> <Group justify="space-between">
<Text c={dark ? "dark.3" : "dimmed"}>Tahun Ajaran:</Text> <Text c={dark ? "white" : "dimmed"}>Tahun Ajaran:</Text>
<Text c={dark ? "dark.0" : "#1e3a5f"}>{displayData.tahunAjaran}</Text> <Text c={dark ? "white" : "#1e3a5f"}>{displayData.tahunAjaran}</Text>
</Group> </Group>
</Stack> </Stack>
</Card> </Card>

2
src/components/sosial/event-calendar.tsx
View File

@@ -53,7 +53,7 @@ export const EventCalendar = ({ data }: EventCalendarProps) => {
radius="xl" radius="xl"
withBorder withBorder
shadow="sm" shadow="sm"
bg={dark ? "#141D34" : "white"} bg={dark ? "#1E293B" : "white"}
style={{ borderColor: dark ? "#141D34" : "#e5e7eb" }} style={{ borderColor: dark ? "#141D34" : "#e5e7eb" }}
> >
<Title order={3} mb="md" c={dark ? "dark.0" : "#1e3a5f"}> <Title order={3} mb="md" c={dark ? "dark.0" : "#1e3a5f"}>

2
src/components/sosial/health-stats.tsx
View File

@@ -37,7 +37,7 @@ export const HealthStats = ({ data }: HealthStatsProps) => {
radius="xl" radius="xl"
withBorder withBorder
shadow="sm" shadow="sm"
bg={dark ? "#141D34" : "white"} bg={dark ? "#1E293B" : "white"}
style={{ borderColor: dark ? "#141D34" : "#e5e7eb" }} style={{ borderColor: dark ? "#141D34" : "#e5e7eb" }}
h={"100%"} h={"100%"}
> >

2
src/components/sosial/pendidikan.tsx
View File

@@ -49,7 +49,7 @@ export const Pendidikan = ({ data }: PendidikanProps) => {
radius="xl" radius="xl"
withBorder withBorder
shadow="sm" shadow="sm"
bg={dark ? "#141D34" : "white"} bg={dark ? "#1E293B" : "white"}
style={{ borderColor: dark ? "#141D34" : "#e5e7eb" }} style={{ borderColor: dark ? "#141D34" : "#e5e7eb" }}
> >
<Title order={3} mb="md" c={dark ? "dark.0" : "#1e3a5f"}> <Title order={3} mb="md" c={dark ? "dark.0" : "#1e3a5f"}>

7
src/components/sosial/posyandu-schedule.tsx
View File

@@ -58,7 +58,7 @@ export const PosyanduSchedule = ({ data }: PosyanduScheduleProps) => {
radius="xl" radius="xl"
withBorder withBorder
shadow="sm" shadow="sm"
bg={dark ? "#141D34" : "white"} bg={dark ? "#1E293B" : "white"}
style={{ borderColor: dark ? "#141D34" : "#e5e7eb" }} style={{ borderColor: dark ? "#141D34" : "#e5e7eb" }}
> >
<Title order={3} mb="md" c={dark ? "dark.0" : "#1e3a5f"}> <Title order={3} mb="md" c={dark ? "dark.0" : "#1e3a5f"}>
@@ -73,14 +73,13 @@ export const PosyanduSchedule = ({ data }: PosyanduScheduleProps) => {
withBorder withBorder
bg={dark ? "#263852ff" : "#F1F5F9"} bg={dark ? "#263852ff" : "#F1F5F9"}
style={{ borderColor: dark ? "#263852ff" : "#F1F5F9" }} style={{ borderColor: dark ? "#263852ff" : "#F1F5F9" }}
hoverable
> >
<Group justify="space-between"> <Group justify="space-between">
<Stack gap={0}> <Stack gap={0}>
<Text fw={600} c={dark ? "dark.0" : "#1e3a5f"}> <Text fw={600} c={dark ? "white" : "#1e3a5f"}>
{item.nama} {item.nama}
</Text> </Text>
<Text size="sm" c={dark ? "dark.3" : "dimmed"}> <Text size="sm" c={dark ? "white" : "dimmed"}>
{item.tanggal} {item.tanggal}
</Text> </Text>
</Stack> </Stack>

6
src/components/sosial/summary-cards.tsx
View File

@@ -43,7 +43,7 @@ const SummaryCard = ({
radius="xl" radius="xl"
withBorder withBorder
shadow="sm" shadow="sm"
bg={dark ? "#141D34" : "white"} bg={dark ? "#1E293B" : "white"}
style={{ borderColor: dark ? "#141D34" : "#e5e7eb" }} style={{ borderColor: dark ? "#141D34" : "#e5e7eb" }}
> >
<Group justify="space-between" align="center"> <Group justify="space-between" align="center">
@@ -54,12 +54,12 @@ const SummaryCard = ({
<Text <Text
size="xl" size="xl"
fw={700} fw={700}
c={highlight ? "red" : dark ? "dark.0" : "#1e3a5f"} c={highlight ? "red" : dark ? "white" : "#1e3a5f"}
> >
{value} {value}
</Text> </Text>
{subtitle && ( {subtitle && (
<Text size="xs" c={dark ? "dark.4" : "gray.6"}> <Text size="xs" c={dark ? "white" : "gray.6"}>
{subtitle} {subtitle}
</Text> </Text>
)} )}

2
src/components/umkm/produk-unggulan.tsx
View File

@@ -77,7 +77,7 @@ export const ProdukUnggulan = ({ data }: ProdukUnggulanProps) => {
radius="xl" radius="xl"
withBorder withBorder
shadow="sm" shadow="sm"
bg={dark ? "#141D34" : "white"} bg={dark ? "#1E293B" : "white"}
style={{ borderColor: dark ? "#141D34" : "#e5e7eb" }} style={{ borderColor: dark ? "#141D34" : "#e5e7eb" }}
> >
<Stack gap="lg"> <Stack gap="lg">

2
src/components/umkm/sales-table.tsx
View File

@@ -108,7 +108,7 @@ export const SalesTable = ({ data, onDetailClick }: SalesTableProps) => {
radius="xl" radius="xl"
withBorder withBorder
shadow="sm" shadow="sm"
bg={dark ? "#141D34" : "white"} bg={dark ? "#1E293B" : "white"}
style={{ borderColor: dark ? "#141D34" : "#e5e7eb" }} style={{ borderColor: dark ? "#141D34" : "#e5e7eb" }}
> >
<Group justify="space-between" mb="md"> <Group justify="space-between" mb="md">

6
src/components/umkm/summary-cards.tsx
View File

@@ -54,7 +54,7 @@ const KpiCard = ({
radius="xl" radius="xl"
withBorder withBorder
shadow="sm" shadow="sm"
bg={dark ? "#141D34" : "white"} bg={dark ? "#1E293B" : "white"}
style={{ borderColor: dark ? "#141D34" : "#e5e7eb" }} style={{ borderColor: dark ? "#141D34" : "#e5e7eb" }}
> >
<Group justify="space-between" align="center"> <Group justify="space-between" align="center">
@@ -62,11 +62,11 @@ const KpiCard = ({
<Text size="sm" c={dark ? "dark.3" : "dimmed"} fw={500}> <Text size="sm" c={dark ? "dark.3" : "dimmed"} fw={500}>
{title} {title}
</Text> </Text>
<Text size="xl" fw={700} c={dark ? "dark.0" : "#1e3a5f"}> <Text size="xl" fw={700} c={dark ? "white" : "#1e3a5f"}>
{formatValue(value)} {formatValue(value)}
</Text> </Text>
{subtitle && ( {subtitle && (
<Text size="xs" c={dark ? "dark.4" : "gray.6"}> <Text size="xs" c={dark ? "white" : "gray.6"}>
{subtitle} {subtitle}
</Text> </Text>
)} )}

2
src/components/umkm/top-products.tsx
View File

@@ -84,7 +84,7 @@ export const TopProducts = ({ products }: TopProductsProps) => {
radius="xl" radius="xl"
withBorder withBorder
shadow="sm" shadow="sm"
bg={dark ? "#141D34" : "white"} bg={dark ? "#1E293B" : "white"}
style={{ borderColor: dark ? "#141D34" : "#e5e7eb" }} style={{ borderColor: dark ? "#141D34" : "#e5e7eb" }}
> >
<Title order={4} mb="md" c={dark ? "dark.0" : "#1e3a5f"}> <Title order={4} mb="md" c={dark ? "dark.0" : "#1e3a5f"}>