nicoarya20/dashboard-noc-desa-darmasaba
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix Lint-1

Browse Source
This commit is contained in:
nico
2026-03-25 15:07:10 +08:00
parent 687ce11a81
commit 7c8012d277
14 changed files with 209 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,22 +5,18 @@ import {
Grid, Grid,
GridCol, GridCol,
Group, Group,
List,
Stack, Stack,
Text, Text,
ThemeIcon, ThemeIcon,
Title, Title,
useMantineColorScheme, useMantineColorScheme
} from "@mantine/core"; } from "@mantine/core";
import { import {
IconAlertTriangle, IconAlertTriangle,
IconCamera, IconCamera,
IconClock, IconClock,
IconEye, IconMapPin
IconMapPin,
IconShieldLock,
} from "@tabler/icons-react"; } from "@tabler/icons-react";
import { useState } from "react";
const KeamananPage = () => { const KeamananPage = () => {
const { colorScheme } = useMantineColorScheme(); const { colorScheme } = useMantineColorScheme();
@@ -125,8 +121,6 @@ const KeamananPage = () => {
</Title> </Title>
</Group> </Group>
<Grid gutter="md"> <Grid gutter="md">
{/* Peta Keamanan CCTV */} {/* Peta Keamanan CCTV */}
<GridCol span={{ base: 12, lg: 6 }}> <GridCol span={{ base: 12, lg: 6 }}>
@@ -149,7 +143,11 @@ const KeamananPage = () => {
{kpi.subtitle} {kpi.subtitle}
</Text> </Text>
<Group gap="xs" align="center"> <Group gap="xs" align="center">
<Text size="xl" fw={700} c={dark ? "dark.0" : "black"}> <Text
size="xl"
fw={700}
c={dark ? "dark.0" : "black"}
>
{kpi.value} {kpi.value}
</Text> </Text>
<Text size="sm" c={dark ? "dark.3" : "dimmed"}> <Text size="sm" c={dark ? "dark.3" : "dimmed"}>
@@ -265,10 +263,6 @@ const KeamananPage = () => {
style={{ borderColor: dark ? "#141D34" : "white" }} style={{ borderColor: dark ? "#141D34" : "white" }}
h="100%" h="100%"
> >
<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 <Card

92
src/components/pengaturan/akses-dan-tim.tsx
View File

@@ -1,79 +1,69 @@
import { import { Box, Button, Group, Stack, Switch, Text, Title } from "@mantine/core";
ActionIcon,
Alert,
Box,
Button,
Card,
Group,
Modal,
Select,
Space,
Stack,
Switch,
Table,
Text,
TextInput,
Title,
useMantineColorScheme,
} from "@mantine/core";
import {
IconEdit,
IconInfoCircle,
IconTrash,
IconUser,
IconUserPlus,
} from "@tabler/icons-react";
import { useState } from "react";
const AksesDanTimSettings = () => { const AksesDanTimSettings = () => {
return ( return (
<Stack <Stack pr={"50%"} gap={"xl"}>
pr={"50%"}
gap={"xl"}
>
<Box> <Box>
<Stack gap={"xs"}> <Stack gap={"xs"}>
<Title order={2}> <Title order={2}>Manajemen Tim</Title>
Manajemen Tim <Button bg={"#1E3A5F"} radius={"md"} c={"white"} fullWidth>
</Title> Undangan Anggota Baru
<Button bg={"#1E3A5F"} radius={"md"} c={"white"} fullWidth >Undangan Anggota Baru</Button> </Button>
<Button bg={"#1E3A5F"} radius={"md"} c={"white"} fullWidth>Kelola Role & Permission</Button> <Button bg={"#1E3A5F"} radius={"md"} c={"white"} fullWidth>
Kelola Role & Permission
</Button>
<Group justify="space-between"> <Group justify="space-between">
<Text fw={"bold"} fz={"sm"}>Daftar Anggota Teraktif</Text> <Text fw={"bold"} fz={"sm"}>
<Text fw={"bold"} fz={"sm"}>12 Anggota</Text> Daftar Anggota Teraktif
</Text>
<Text fw={"bold"} fz={"sm"}>
12 Anggota
</Text>
</Group> </Group>
</Stack> </Stack>
</Box> </Box>
<Box> <Box>
<Stack gap={"xs"}> <Stack gap={"xs"}>
<Title order={2}> <Title order={2}>Hak Akses</Title>
Hak Akses
</Title>
<Group justify="space-between"> <Group justify="space-between">
<Text fw={"bold"} fz={"sm"}>Administrator</Text> <Text fw={"bold"} fz={"sm"}>
<Text fw={"bold"} fz={"sm"}>2 Orang</Text> Administrator
</Text>
<Text fw={"bold"} fz={"sm"}>
2 Orang
</Text>
</Group> </Group>
<Group justify="space-between"> <Group justify="space-between">
<Text fw={"bold"} fz={"sm"}>Editor</Text> <Text fw={"bold"} fz={"sm"}>
<Text fw={"bold"} fz={"sm"}>5 Orang</Text> Editor
</Text>
<Text fw={"bold"} fz={"sm"}>
5 Orang
</Text>
</Group> </Group>
<Group justify="space-between"> <Group justify="space-between">
<Text fw={"bold"} fz={"sm"}>Viewer</Text> <Text fw={"bold"} fz={"sm"}>
<Text fw={"bold"} fz={"sm"}>5 Orang</Text> Viewer
</Text>
<Text fw={"bold"} fz={"sm"}>
5 Orang
</Text>
</Group> </Group>
</Stack> </Stack>
</Box> </Box>
<Box> <Box>
<Stack gap={"xs"}> <Stack gap={"xs"}>
<Title order={2}> <Title order={2}>Kolaborasi</Title>
Kolaborasi
</Title>
<Group mb="md" justify="space-between"> <Group mb="md" justify="space-between">
<Text fw={"bold"} fz={"sm"}>Izin Export Data</Text> <Text fw={"bold"} fz={"sm"}>
Izin Export Data
</Text>
<Switch defaultChecked /> <Switch defaultChecked />
</Group> </Group>
<Group mb="md" justify="space-between"> <Group mb="md" justify="space-between">
<Text fw={"bold"} fz={"sm"}>Require Approval Untuk Perubahan</Text> <Text fw={"bold"} fz={"sm"}>
Require Approval Untuk Perubahan
</Text>
<Switch defaultChecked /> <Switch defaultChecked />
</Group> </Group>
</Stack> </Stack>

59
src/components/pengaturan/keamanan.tsx
View File

@@ -1,58 +1,57 @@
import { import { Box, Button, Group, Stack, Switch, Text, Title } from "@mantine/core";
Button,
Box,
Group,
Stack,
Switch,
Text,
Title
} from "@mantine/core";
const KeamananSettings = () => { const KeamananSettings = () => {
return ( return (
<Stack <Stack pr={"50%"} gap={"xl"}>
pr={"50%"}
gap={"xl"}
>
<Box> <Box>
<Stack gap={"xs"}> <Stack gap={"xs"}>
<Title order={2}> <Title order={2}>Autentikasi</Title>
Autentikasi
</Title>
<Group mb="md" justify="space-between"> <Group mb="md" justify="space-between">
<Text fw={"bold"} fz={"sm"}>Two-Factor Authentication</Text> <Text fw={"bold"} fz={"sm"}>
Two-Factor Authentication
</Text>
<Switch defaultChecked /> <Switch defaultChecked />
</Group> </Group>
<Group mb="md" justify="space-between"> <Group mb="md" justify="space-between">
<Text fw={"bold"} fz={"sm"}>Biometrik Login</Text> <Text fw={"bold"} fz={"sm"}>
Biometrik Login
</Text>
<Switch defaultChecked /> <Switch defaultChecked />
</Group> </Group>
<Group mb="md" justify="space-between"> <Group mb="md" justify="space-between">
<Text fw={"bold"} fz={"sm"}>IP Whitelist</Text> <Text fw={"bold"} fz={"sm"}>
IP Whitelist
</Text>
<Switch defaultChecked /> <Switch defaultChecked />
</Group> </Group>
</Stack> </Stack>
</Box> </Box>
<Box> <Box>
<Stack gap={"xs"}> <Stack gap={"xs"}>
<Title order={2}> <Title order={2}>Password</Title>
Password <Button bg={"#1E3A5F"} radius={"md"} c={"white"} fullWidth>
</Title> Ubah Password
<Button bg={"#1E3A5F"} radius={"md"} c={"white"} fullWidth >Ubah Password</Button> </Button>
<Button bg={"#1E3A5F"} radius={"md"} c={"white"} fullWidth>Riwayat Login</Button> <Button bg={"#1E3A5F"} radius={"md"} c={"white"} fullWidth>
<Button bg={"#1E3A5F"} radius={"md"} c={"white"} fullWidth>Perangkat Terdaftar</Button> Riwayat Login
</Button>
<Button bg={"#1E3A5F"} radius={"md"} c={"white"} fullWidth>
Perangkat Terdaftar
</Button>
</Stack> </Stack>
</Box> </Box>
<Box> <Box>
<Stack gap={"xs"}> <Stack gap={"xs"}>
<Title order={2}> <Title order={2}>Audit & Log</Title>
Audit & Log
</Title>
<Group mb="md" justify="space-between"> <Group mb="md" justify="space-between">
<Text fw={"bold"} fz={"sm"}>Log Aktivitas</Text> <Text fw={"bold"} fz={"sm"}>
Log Aktivitas
</Text>
<Switch defaultChecked /> <Switch defaultChecked />
</Group> </Group>
<Button bg={"#1E3A5F"} radius={"md"} c={"white"} fullWidth>Download Log</Button> <Button bg={"#1E3A5F"} radius={"md"} c={"white"} fullWidth>
Download Log
</Button>
</Stack> </Stack>
</Box> </Box>
<Group justify="flex-start" mt="xl"> <Group justify="flex-start" mt="xl">

51
src/components/pengaturan/notifikasi.tsx
View File

@@ -20,30 +20,35 @@ const NotifikasiSettings = () => {
const { colorScheme } = useMantineColorScheme(); const { colorScheme } = useMantineColorScheme();
const dark = colorScheme === "dark"; const dark = colorScheme === "dark";
return ( return (
<Stack <Stack pr={"20%"} gap={"xs"}>
pr={"20%"} <Grid gutter={{ base: 5, xs: "md", md: "xl", xl: 50 }}>
gap={"xs"}
>
<Grid gutter={{ base: 5, xs: 'md', md: 'xl', xl: 50 }}>
<GridCol span={6}> <GridCol span={6}>
<Stack gap={"xs"}> <Stack gap={"xs"}>
<Title order={3} mb="sm"> <Title order={3} mb="sm">
Metode Notifikasi Metode Notifikasi
</Title> </Title>
<Group mb="md" justify="space-between"> <Group mb="md" justify="space-between">
<Text fw={"bold"} fz={"sm"}>Laporan Harian</Text> <Text fw={"bold"} fz={"sm"}>
Laporan Harian
</Text>
<Switch defaultChecked /> <Switch defaultChecked />
</Group> </Group>
<Group mb="md" justify="space-between"> <Group mb="md" justify="space-between">
<Text fw={"bold"} fz={"sm"}>Alert Sistem</Text> <Text fw={"bold"} fz={"sm"}>
Alert Sistem
</Text>
<Switch defaultChecked /> <Switch defaultChecked />
</Group> </Group>
<Group mb="md" justify="space-between"> <Group mb="md" justify="space-between">
<Text fw={"bold"} fz={"sm"}>Update Keamanan</Text> <Text fw={"bold"} fz={"sm"}>
Update Keamanan
</Text>
<Switch defaultChecked /> <Switch defaultChecked />
</Group> </Group>
<Group mb="md" justify="space-between"> <Group mb="md" justify="space-between">
<Text fw={"bold"} fz={"sm"}>Newsletter Bulanan</Text> <Text fw={"bold"} fz={"sm"}>
Newsletter Bulanan
</Text>
<Switch defaultChecked /> <Switch defaultChecked />
</Group> </Group>
</Stack> </Stack>
@@ -54,15 +59,21 @@ const NotifikasiSettings = () => {
Preferensi Alert Preferensi Alert
</Title> </Title>
<Group mb="md" justify="space-between"> <Group mb="md" justify="space-between">
<Text fw={"bold"} fz={"sm"}>Treshold Memori</Text> <Text fw={"bold"} fz={"sm"}>
Treshold Memori
</Text>
<Switch defaultChecked /> <Switch defaultChecked />
</Group> </Group>
<Group mb="md" justify="space-between"> <Group mb="md" justify="space-between">
<Text fw={"bold"} fz={"sm"}>Treshold CPU</Text> <Text fw={"bold"} fz={"sm"}>
Treshold CPU
</Text>
<Switch defaultChecked /> <Switch defaultChecked />
</Group> </Group>
<Group mb="md" justify="space-between"> <Group mb="md" justify="space-between">
<Text fw={"bold"} fz={"sm"}>Treshold Disk</Text> <Text fw={"bold"} fz={"sm"}>
Treshold Disk
</Text>
<Switch defaultChecked /> <Switch defaultChecked />
</Group> </Group>
</Stack> </Stack>
@@ -73,19 +84,27 @@ const NotifikasiSettings = () => {
Notifikasi Push Notifikasi Push
</Title> </Title>
<Group mb="md" justify="space-between"> <Group mb="md" justify="space-between">
<Text fw={"bold"} fz={"sm"}>Alert Kritis</Text> <Text fw={"bold"} fz={"sm"}>
Alert Kritis
</Text>
<Switch defaultChecked /> <Switch defaultChecked />
</Group> </Group>
<Group mb="md" justify="space-between"> <Group mb="md" justify="space-between">
<Text fw={"bold"} fz={"sm"}>Aktivitas Tim</Text> <Text fw={"bold"} fz={"sm"}>
Aktivitas Tim
</Text>
<Switch defaultChecked /> <Switch defaultChecked />
</Group> </Group>
<Group mb="md" justify="space-between"> <Group mb="md" justify="space-between">
<Text fw={"bold"} fz={"sm"}>Komentar & Mention</Text> <Text fw={"bold"} fz={"sm"}>
Komentar & Mention
</Text>
<Switch defaultChecked /> <Switch defaultChecked />
</Group> </Group>
<Group mb="md" justify="space-between"> <Group mb="md" justify="space-between">
<Text fw={"bold"} fz={"sm"}>Bunyi Notifikasi</Text> <Text fw={"bold"} fz={"sm"}>
Bunyi Notifikasi
</Text>
<Switch defaultChecked /> <Switch defaultChecked />
</Group> </Group>
</Stack> </Stack>

35
src/components/pengaturan/umum.tsx
View File

@@ -1,19 +1,9 @@
import { import { Box, Button, Group, Select, Switch, Text, Title } from "@mantine/core";
Box,
Button,
Group,
Select,
Switch,
Text,
Title,
} from "@mantine/core";
import { DateInput } from "@mantine/dates"; import { DateInput } from "@mantine/dates";
const UmumSettings = () => { const UmumSettings = () => {
return ( return (
<Box <Box pr={"50%"}>
pr={"50%"}
>
<Title order={2} mb="lg"> <Title order={2} mb="lg">
Preferensi Tampilan Preferensi Tampilan
</Title> </Title>
@@ -39,22 +29,23 @@ const UmumSettings = () => {
mb="md" mb="md"
/> />
<DateInput <DateInput label="Format Tanggal" mb={"xl"} />
label="Format Tanggal"
mb={"xl"}
/>
<Title order={2} mb="lg"> <Title order={2} mb="lg">
Dashboard Dashboard
</Title> </Title>
<Group mb="md" justify="space-between"> <Group mb="md" justify="space-between">
<Text fw={"bold"} fz={"sm"}>Refresh Otomatis</Text> <Text fw={"bold"} fz={"sm"}>
Refresh Otomatis
</Text>
<Switch defaultChecked /> <Switch defaultChecked />
</Group> </Group>
<Group mb="md" justify="space-between"> <Group mb="md" justify="space-between">
<Text fw={"bold"} fz={"sm"}>Interval Refresh</Text> <Text fw={"bold"} fz={"sm"}>
Interval Refresh
</Text>
<Select <Select
data={[ data={[
{ value: "1", label: "30d" }, { value: "1", label: "30d" },
@@ -67,12 +58,16 @@ const UmumSettings = () => {
</Group> </Group>
<Group mb="md" justify="space-between"> <Group mb="md" justify="space-between">
<Text fw={"bold"} fz={"sm"}>Tampilkan Grid</Text> <Text fw={"bold"} fz={"sm"}>
Tampilkan Grid
</Text>
<Switch defaultChecked /> <Switch defaultChecked />
</Group> </Group>
<Group mb="md" justify="space-between"> <Group mb="md" justify="space-between">
<Text fw={"bold"} fz={"sm"}>Animasi Transisi</Text> <Text fw={"bold"} fz={"sm"}>
Animasi Transisi
</Text>
<Switch defaultChecked /> <Switch defaultChecked />
</Group> </Group>

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

@@ -1,10 +1,10 @@
import { Grid, GridCol, Stack } from "@mantine/core"; import { Grid, GridCol, Stack } from "@mantine/core";
import { SummaryCards } from "./sosial/summary-cards";
import { HealthStats } from "./sosial/health-stats";
import { PosyanduSchedule } from "./sosial/posyandu-schedule";
import { Pendidikan } from "./sosial/pendidikan";
import { Beasiswa } from "./sosial/beasiswa"; import { Beasiswa } from "./sosial/beasiswa";
import { EventCalendar } from "./sosial/event-calendar"; import { EventCalendar } from "./sosial/event-calendar";
import { HealthStats } from "./sosial/health-stats";
import { Pendidikan } from "./sosial/pendidikan";
import { PosyanduSchedule } from "./sosial/posyandu-schedule";
import { SummaryCards } from "./sosial/summary-cards";
const SosialPage = () => { const SosialPage = () => {
return ( return (

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

@@ -1,5 +1,12 @@
import { Card, Group, Stack, Text, ThemeIcon, Title } from "@mantine/core"; import {
import { useMantineColorScheme } from "@mantine/core"; Card,
Group,
Stack,
Text,
ThemeIcon,
Title,
useMantineColorScheme,
} from "@mantine/core";
import { IconAward } from "@tabler/icons-react"; import { IconAward } from "@tabler/icons-react";
interface ScholarshipData { interface ScholarshipData {

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

@@ -1,5 +1,12 @@
import { Card, Group, Stack, Text, Title, ThemeIcon } from "@mantine/core"; import {
import { useMantineColorScheme } from "@mantine/core"; Card,
Group,
Stack,
Text,
ThemeIcon,
Title,
useMantineColorScheme,
} from "@mantine/core";
import { IconCalendarEvent } from "@tabler/icons-react"; import { IconCalendarEvent } from "@tabler/icons-react";
interface EventItem { interface EventItem {

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

@@ -1,5 +1,12 @@
import { Card, Group, Progress, Stack, Text, Title } from "@mantine/core"; import {
import { useMantineColorScheme } from "@mantine/core"; Card,
Group,
Progress,
Stack,
Text,
Title,
useMantineColorScheme,
} from "@mantine/core";
interface HealthProgressItem { interface HealthProgressItem {
label: string; label: string;
@@ -32,7 +39,7 @@ export const HealthStats = ({ data }: HealthStatsProps) => {
shadow="sm" shadow="sm"
bg={dark ? "#141D34" : "white"} bg={dark ? "#141D34" : "white"}
style={{ borderColor: dark ? "#141D34" : "#e5e7eb" }} style={{ borderColor: dark ? "#141D34" : "#e5e7eb" }}
h={'100%'} h={"100%"}
> >
<Title order={3} mb="md" c={dark ? "dark.0" : "#1e3a5f"}> <Title order={3} mb="md" c={dark ? "dark.0" : "#1e3a5f"}>
Statistik Kesehatan Statistik Kesehatan

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

@@ -1,5 +1,11 @@
import { Card, Group, Stack, Text, Title } from "@mantine/core"; import {
import { useMantineColorScheme } from "@mantine/core"; Card,
Group,
Stack,
Text,
Title,
useMantineColorScheme,
} from "@mantine/core";
interface EducationData { interface EducationData {
siswa: { siswa: {

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

@@ -1,5 +1,12 @@
import { Badge, Card, Group, Stack, Text, Title } from "@mantine/core"; import {
import { useMantineColorScheme } from "@mantine/core"; Badge,
Card,
Group,
Stack,
Text,
Title,
useMantineColorScheme,
} from "@mantine/core";
interface PosyanduItem { interface PosyanduItem {
id: string; id: string;

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

@@ -1,5 +1,13 @@
import { Card, Grid, GridCol, Group, Stack, Text, ThemeIcon } from "@mantine/core"; import {
import { useMantineColorScheme } from "@mantine/core"; Card,
Grid,
GridCol,
Group,
Stack,
Text,
ThemeIcon,
useMantineColorScheme,
} from "@mantine/core";
import { import {
IconBabyCarriage, IconBabyCarriage,
IconHeartbeat, IconHeartbeat,
@@ -93,8 +101,8 @@ export const SummaryCards = ({ data }: SummaryCardsProps) => {
value={displayData.ibuHamil} value={displayData.ibuHamil}
subtitle="Aktif" subtitle="Aktif"
icon={<IconHeartbeat size={20} />} icon={<IconHeartbeat size={20} />}
color= "white" color="white"
backgroundColor= "#1E3A5F" backgroundColor="#1E3A5F"
/> />
</GridCol> </GridCol>
<GridCol span={{ base: 12, sm: 6, lg: 3 }}> <GridCol span={{ base: 12, sm: 6, lg: 3 }}>
@@ -103,8 +111,8 @@ export const SummaryCards = ({ data }: SummaryCardsProps) => {
value={displayData.balita} value={displayData.balita}
subtitle="Terdaftar" subtitle="Terdaftar"
icon={<IconBabyCarriage size={20} />} icon={<IconBabyCarriage size={20} />}
color= "white" color="white"
backgroundColor= "#1E3A5F" backgroundColor="#1E3A5F"
/> />
</GridCol> </GridCol>
<GridCol span={{ base: 12, sm: 6, lg: 3 }}> <GridCol span={{ base: 12, sm: 6, lg: 3 }}>
@@ -113,8 +121,8 @@ export const SummaryCards = ({ data }: SummaryCardsProps) => {
value={displayData.alertStunting} value={displayData.alertStunting}
subtitle="Perhatian" subtitle="Perhatian"
icon={<IconStethoscope size={20} />} icon={<IconStethoscope size={20} />}
color= "white" color="white"
backgroundColor= "#1E3A5F" backgroundColor="#1E3A5F"
/> />
</GridCol> </GridCol>
<GridCol span={{ base: 12, sm: 6, lg: 3 }}> <GridCol span={{ base: 12, sm: 6, lg: 3 }}>
@@ -123,8 +131,8 @@ export const SummaryCards = ({ data }: SummaryCardsProps) => {
value={displayData.posyanduAktif} value={displayData.posyanduAktif}
subtitle="Aktif" subtitle="Aktif"
icon={<IconMedicalCross size={20} />} icon={<IconMedicalCross size={20} />}
color= "white" color="white"
backgroundColor= "#1E3A5F" backgroundColor="#1E3A5F"
/> />
</GridCol> </GridCol>
</Grid> </Grid>

4
src/components/ui/help-card.tsx
View File

@@ -51,9 +51,7 @@ export const HelpCard = ({
{icon && ( {icon && (
<div <div
style={{ style={{
backgroundColor: isDark backgroundColor: isDark ? "#263852ff" : "#1E3A5F",
? "#263852ff"
: "#1E3A5F",
borderRadius: "8px", borderRadius: "8px",
padding: "8px", padding: "8px",
display: "flex", display: "flex",

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

@@ -6,13 +6,13 @@ import {
Group, Group,
Stack, Stack,
Text, Text,
useMantineColorScheme useMantineColorScheme,
} from "@mantine/core"; } from "@mantine/core";
import { import {
IconCategory, IconCategory,
IconCurrencyDollar, IconCurrencyDollar,
IconTrendingUp, IconTrendingUp,
IconUsers IconUsers,
} from "@tabler/icons-react"; } from "@tabler/icons-react";
interface KpiCardProps { interface KpiCardProps {
@@ -24,7 +24,14 @@ interface KpiCardProps {
backgroundColor: string; backgroundColor: string;
} }
const KpiCard = ({ title, value, subtitle, icon, color, backgroundColor }: KpiCardProps) => { const KpiCard = ({
title,
value,
subtitle,
icon,
color,
backgroundColor,
}: KpiCardProps) => {
const { colorScheme } = useMantineColorScheme(); const { colorScheme } = useMantineColorScheme();
const dark = colorScheme === "dark"; const dark = colorScheme === "dark";
@@ -108,7 +115,7 @@ export const SummaryCards = ({ data }: SummaryCardsProps) => {
subtitle: "Beroperasi", subtitle: "Beroperasi",
icon: <IconCurrencyDollar size={25} />, icon: <IconCurrencyDollar size={25} />,
color: "white", color: "white",
backgroundColor: "#1E3A5F" backgroundColor: "#1E3A5F",
}, },
{ {
title: "UMKM Terdaftar", title: "UMKM Terdaftar",
@@ -116,7 +123,7 @@ export const SummaryCards = ({ data }: SummaryCardsProps) => {
subtitle: "Total registrasi", subtitle: "Total registrasi",
icon: <IconUsers size={25} />, icon: <IconUsers size={25} />,
color: "white", color: "white",
backgroundColor: "#1E3A5F" backgroundColor: "#1E3A5F",
}, },
{ {
title: "Omzet", title: "Omzet",
@@ -124,7 +131,7 @@ export const SummaryCards = ({ data }: SummaryCardsProps) => {
subtitle: "Omzet BUMDes per bulan", subtitle: "Omzet BUMDes per bulan",
icon: <IconTrendingUp size={25} />, icon: <IconTrendingUp size={25} />,
color: "white", color: "white",
backgroundColor: "#1E3A5F" backgroundColor: "#1E3A5F",
}, },
{ {
title: "UMKM Terbanyak", title: "UMKM Terbanyak",
@@ -132,7 +139,7 @@ export const SummaryCards = ({ data }: SummaryCardsProps) => {
subtitle: `Kategori ${displayData.kategoriTerbanyak.name}`, subtitle: `Kategori ${displayData.kategoriTerbanyak.name}`,
icon: <IconTrendingUp size={25} />, icon: <IconTrendingUp size={25} />,
color: "white", color: "white",
backgroundColor: "#1E3A5F" backgroundColor: "#1E3A5F",
}, },
]; ];