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

feat: resolve HMR port conflict and update project files

Browse Source
This commit is contained in:
nico
2026-02-13 17:49:33 +08:00
parent ca43baa7c7
commit 6c3e7c86b6
17 changed files with 140 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

125
src/components/pengaturan/akses-dan-tim.tsx Normal file
View File

@@ -0,0 +1,125 @@
import { Card, Title, Text, Space, Button, Group, Alert, Table, ActionIcon, Modal, TextInput, Select, useMantineColorScheme } from '@mantine/core';
import { IconInfoCircle, IconUserPlus, IconTrash, IconEdit, IconUser } from '@tabler/icons-react';
import { useState } from 'react';
const AksesDanTimSettings = () => {
const [opened, setOpened] = useState(false);
const { colorScheme } = useMantineColorScheme();
const dark = colorScheme === 'dark';
// Sample team members data
const teamMembers = [
{ id: 1, name: 'Admin Utama', email: 'admin@desa.go.id', role: 'Administrator', status: 'Aktif' },
{ id: 2, name: 'Operator Desa', email: 'operator@desa.go.id', role: 'Operator', status: 'Aktif' },
{ id: 3, name: 'Staff Keuangan', email: 'keuangan@desa.go.id', role: 'Keuangan', status: 'Aktif' },
{ id: 4, name: 'Staff Umum', email: 'umum@desa.go.id', role: 'Umum', status: 'Nonaktif' },
];
const roles = [
{ value: 'administrator', label: 'Administrator' },
{ value: 'operator', label: 'Operator' },
{ value: 'keuangan', label: 'Keuangan' },
{ value: 'umum', label: 'Umum' },
{ value: 'keamanan', label: 'Keamanan' },
];
return (
<Card withBorder radius="md" p="xl" bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }}>
<Modal
opened={opened}
onClose={() => setOpened(false)}
title="Tambah Anggota Tim"
size="lg"
>
<TextInput
label="Nama Lengkap"
placeholder="Masukkan nama lengkap anggota tim"
mb="md"
/>
<TextInput
label="Alamat Email"
placeholder="Masukkan alamat email"
mb="md"
/>
<Select
label="Peran"
placeholder="Pilih peran anggota tim"
data={roles}
mb="md"
/>
<Group justify="flex-end" mt="xl">
<Button variant="outline" onClick={() => setOpened(false)}>Batal</Button>
<Button>Undang Anggota</Button>
</Group>
</Modal>
<Title order={2} mb="lg">Akses & Tim</Title>
<Text color="dimmed" mb="xl">Kelola akses dan anggota tim Anda</Text>
<Space h="lg" />
<Group justify="space-between" mb="md">
<Title order={4}>Anggota Tim</Title>
<Button leftSection={<IconUserPlus size={16} />} onClick={() => setOpened(true)}>
Tambah Anggota
</Button>
</Group>
<Table highlightOnHover>
<Table.Thead>
<Table.Tr>
<Table.Th>Nama</Table.Th>
<Table.Th>Email</Table.Th>
<Table.Th>Peran</Table.Th>
<Table.Th>Status</Table.Th>
<Table.Th>Aksi</Table.Th>
</Table.Tr>
</Table.Thead>
<Table.Tbody>
{teamMembers.map((member) => (
<Table.Tr key={member.id}>
<Table.Td>
<Group gap="sm">
<IconUser size={20} />
<Text>{member.name}</Text>
</Group>
</Table.Td>
<Table.Td>{member.email}</Table.Td>
<Table.Td>
<Text fw={500}>{member.role}</Text>
</Table.Td>
<Table.Td>
<Text c={member.status === 'Aktif' ? 'green' : 'red'} fw={500}>
{member.status}
</Text>
</Table.Td>
<Table.Td>
<Group>
<ActionIcon variant="subtle" color="blue">
<IconEdit size={16} />
</ActionIcon>
<ActionIcon variant="subtle" color="red">
<IconTrash size={16} />
</ActionIcon>
</Group>
</Table.Td>
</Table.Tr>
))}
</Table.Tbody>
</Table>
<Space h="xl" />
<Alert icon={<IconInfoCircle size={16} />} title="Informasi" color="blue" mb="md">
Administrator memiliki akses penuh ke semua fitur. Peran lainnya memiliki akses terbatas sesuai kebutuhan.
</Alert>
<Group justify="flex-end" mt="xl">
<Button variant="outline">Batal</Button>
<Button>Simpan Perubahan</Button>
</Group>
</Card>
);
};
export default AksesDanTimSettings;

57
src/components/pengaturan/keamanan.tsx Normal file
View File

@@ -0,0 +1,57 @@
import { Card, Title, Text, Space, Button, Group, Alert, PasswordInput, Switch, useMantineColorScheme } from '@mantine/core';
import { IconInfoCircle, IconLock } from '@tabler/icons-react';
const KeamananSettings = () => {
const { colorScheme } = useMantineColorScheme();
const dark = colorScheme === 'dark';
return (
<Card withBorder radius="md" p="xl" bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }}>
<Title order={2} mb="lg">Pengaturan Keamanan</Title>
<Text color="dimmed" mb="xl">Kelola keamanan akun Anda</Text>
<Space h="lg" />
<PasswordInput
label="Kata Sandi Saat Ini"
placeholder="Masukkan kata sandi saat ini"
mb="md"
/>
<PasswordInput
label="Kata Sandi Baru"
placeholder="Masukkan kata sandi baru"
mb="md"
/>
<PasswordInput
label="Konfirmasi Kata Sandi Baru"
placeholder="Konfirmasi kata sandi baru"
mb="md"
/>
<Space h="md" />
<Group mb="md">
<Switch label="Verifikasi Dua Langkah" />
<Switch label="Login Otentikasi Aplikasi" />
</Group>
<Space h="md" />
<Alert icon={<IconLock size={16} />} title="Keamanan" color="orange" mb="md">
Gunakan kata sandi yang kuat dan unik. Hindari menggunakan kata sandi yang sama di banyak layanan.
</Alert>
<Alert icon={<IconInfoCircle size={16} />} title="Informasi" color="blue" mb="md">
Setelah mengganti kata sandi, Anda akan diminta logout dari semua perangkat.
</Alert>
<Group justify="flex-end" mt="xl">
<Button variant="outline">Batal</Button>
<Button>Perbarui Kata Sandi</Button>
</Group>
</Card>
);
};
export default KeamananSettings;

55
src/components/pengaturan/notifikasi.tsx Normal file
View File

@@ -0,0 +1,55 @@
import { Card, Title, Text, Space, Switch, Group, Alert, Checkbox, Button, useMantineColorScheme } from '@mantine/core';
import { IconInfoCircle } from '@tabler/icons-react';
const NotifikasiSettings = () => {
const { colorScheme } = useMantineColorScheme();
const dark = colorScheme === 'dark';
return (
<Card withBorder radius="md" p="xl" bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }}>
<Title order={2} mb="lg">Pengaturan Notifikasi</Title>
<Text color="dimmed" mb="xl">Kelola preferensi notifikasi Anda</Text>
<Space h="lg" />
<Checkbox.Group defaultValue={['email', 'push']} mb="md">
<Title order={4} mb="sm">Metode Notifikasi</Title>
<Group>
<Checkbox value="email" label="Email" />
<Checkbox value="push" label="Notifikasi Push" />
<Checkbox value="sms" label="SMS" />
</Group>
</Checkbox.Group>
<Space h="md" />
<Group mb="md">
<Switch label="Notifikasi Email" defaultChecked />
<Switch label="Notifikasi Push" defaultChecked />
</Group>
<Space h="md" />
<Title order={4} mb="sm">Jenis Notifikasi</Title>
<Group align="start">
<Switch label="Pengaduan Baru" defaultChecked />
<Switch label="Update Status Pengaduan" defaultChecked />
<Switch label="Laporan Mingguan" />
<Switch label="Pemberitahuan Keamanan" defaultChecked />
<Switch label="Aktivitas Akun" defaultChecked />
</Group>
<Space h="md" />
<Alert icon={<IconInfoCircle size={16} />} title="Tip" color="blue" mb="md">
Anda dapat menyesuaikan frekuensi notifikasi mingguan sesuai kebutuhan Anda.
</Alert>
<Group justify="flex-end" mt="xl">
<Button variant="outline">Batal</Button>
<Button>Simpan Preferensi</Button>
</Group>
</Card>
);
};
export default NotifikasiSettings;

58
src/components/pengaturan/umum.tsx Normal file
View File

@@ -0,0 +1,58 @@
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" 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>
<Space h="lg" />
<TextInput
label="Nama Aplikasi"
placeholder="Masukkan nama aplikasi"
defaultValue="Dashboard Desa Plus"
mb="md"
/>
<Select
label="Bahasa Aplikasi"
data={[
{ value: 'id', label: 'Indonesia' },
{ value: 'en', label: 'English' },
]}
defaultValue="id"
mb="md"
/>
<Select
label="Zona Waktu"
data={[
{ value: 'Asia/Jakarta', label: 'Asia/Jakarta (GMT+7)' },
{ value: 'Asia/Makassar', label: 'Asia/Makassar (GMT+8)' },
{ value: 'Asia/Jayapura', label: 'Asia/Jayapura (GMT+9)' },
]}
defaultValue="Asia/Jakarta"
mb="md"
/>
<Group mb="md">
<Switch label="Notifikasi Email" defaultChecked />
</Group>
<Alert icon={<IconInfoCircle size={16} />} title="Informasi" color="blue" mb="md">
Beberapa pengaturan mungkin memerlukan restart aplikasi untuk diterapkan sepenuhnya.
</Alert>
<Group justify="flex-end" mt="xl">
<Button variant="outline">Batal</Button>
<Button>Simpan Perubahan</Button>
</Group>
</Card>
);
};
export default UmumSettings;