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,
GridCol,
Group,
List,
Stack,
Text,
ThemeIcon,
Title,
useMantineColorScheme,
useMantineColorScheme
} from "@mantine/core";
import {
IconAlertTriangle,
IconCamera,
IconClock,
IconEye,
IconMapPin,
IconShieldLock,
IconMapPin
} from "@tabler/icons-react";
import { useState } from "react";
const KeamananPage = () => {
const { colorScheme } = useMantineColorScheme();
@@ -125,8 +121,6 @@ const KeamananPage = () => {
</Title>
</Group>
<Grid gutter="md">
{/* Peta Keamanan CCTV */}
<GridCol span={{ base: 12, lg: 6 }}>
@@ -149,7 +143,11 @@ const KeamananPage = () => {
{kpi.subtitle}
</Text>
<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}
</Text>
<Text size="sm" c={dark ? "dark.3" : "dimmed"}>
@@ -265,10 +263,6 @@ const KeamananPage = () => {
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

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

@@ -1,79 +1,69 @@
import {
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";
import { Box, Button, Group, Stack, Switch, Text, Title } from "@mantine/core";
const AksesDanTimSettings = () => {
return (
<Stack
pr={"50%"}
gap={"xl"}
>
<Stack pr={"50%"} gap={"xl"}>
<Box>
<Stack gap={"xs"}>
<Title order={2}>
Manajemen Tim
</Title>
<Button bg={"#1E3A5F"} radius={"md"} c={"white"} fullWidth >Undangan Anggota Baru</Button>
<Button bg={"#1E3A5F"} radius={"md"} c={"white"} fullWidth>Kelola Role & Permission</Button>
<Title order={2}>Manajemen Tim</Title>
<Button bg={"#1E3A5F"} radius={"md"} c={"white"} fullWidth>
Undangan Anggota Baru
</Button>
<Button bg={"#1E3A5F"} radius={"md"} c={"white"} fullWidth>
Kelola Role & Permission
</Button>
<Group justify="space-between">
<Text fw={"bold"} fz={"sm"}>Daftar Anggota Teraktif</Text>
<Text fw={"bold"} fz={"sm"}>12 Anggota</Text>
<Text fw={"bold"} fz={"sm"}>
Daftar Anggota Teraktif
</Text>
<Text fw={"bold"} fz={"sm"}>
12 Anggota
</Text>
</Group>
</Stack>
</Box>
<Box>
<Stack gap={"xs"}>
<Title order={2}>
Hak Akses
</Title>
<Title order={2}>Hak Akses</Title>
<Group justify="space-between">
<Text fw={"bold"} fz={"sm"}>Administrator</Text>
<Text fw={"bold"} fz={"sm"}>2 Orang</Text>
<Text fw={"bold"} fz={"sm"}>
Administrator
</Text>
<Text fw={"bold"} fz={"sm"}>
2 Orang
</Text>
</Group>
<Group justify="space-between">
<Text fw={"bold"} fz={"sm"}>Editor</Text>
<Text fw={"bold"} fz={"sm"}>5 Orang</Text>
<Text fw={"bold"} fz={"sm"}>
Editor
</Text>
<Text fw={"bold"} fz={"sm"}>
5 Orang
</Text>
</Group>
<Group justify="space-between">
<Text fw={"bold"} fz={"sm"}>Viewer</Text>
<Text fw={"bold"} fz={"sm"}>5 Orang</Text>
<Text fw={"bold"} fz={"sm"}>
Viewer
</Text>
<Text fw={"bold"} fz={"sm"}>
5 Orang
</Text>
</Group>
</Stack>
</Box>
<Box>
<Stack gap={"xs"}>
<Title order={2}>
Kolaborasi
</Title>
<Title order={2}>Kolaborasi</Title>
<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 />
</Group>
<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 />
</Group>
</Stack>

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

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

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

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

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

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

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

@@ -1,10 +1,10 @@
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 { 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 = () => {
return (

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

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

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

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

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

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

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

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