Refactor New Ui Semua Pengaturan
This commit is contained in:
@@ -1,12 +1,15 @@
|
||||
import {
|
||||
ActionIcon,
|
||||
Alert,
|
||||
Box,
|
||||
Button,
|
||||
Card,
|
||||
Group,
|
||||
Modal,
|
||||
Select,
|
||||
Space,
|
||||
Stack,
|
||||
Switch,
|
||||
Table,
|
||||
Text,
|
||||
TextInput,
|
||||
@@ -23,167 +26,63 @@ import {
|
||||
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" }}
|
||||
<Stack
|
||||
pr={"50%"}
|
||||
gap={"xl"}
|
||||
>
|
||||
<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">
|
||||
<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>
|
||||
<Group justify="space-between">
|
||||
<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>
|
||||
<Group justify="space-between">
|
||||
<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>
|
||||
</Group>
|
||||
<Group justify="space-between">
|
||||
<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>
|
||||
<Group mb="md" justify="space-between">
|
||||
<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>
|
||||
<Switch defaultChecked />
|
||||
</Group>
|
||||
</Stack>
|
||||
</Box>
|
||||
<Group justify="flex-start" mt="xl">
|
||||
<Button variant="outline">Batal</Button>
|
||||
<Button>Simpan Perubahan</Button>
|
||||
</Group>
|
||||
</Card>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -1,89 +1,65 @@
|
||||
import {
|
||||
Alert,
|
||||
Button,
|
||||
Card,
|
||||
Box,
|
||||
Group,
|
||||
PasswordInput,
|
||||
Space,
|
||||
Stack,
|
||||
Switch,
|
||||
Text,
|
||||
Title,
|
||||
useMantineColorScheme,
|
||||
Title
|
||||
} 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" }}
|
||||
<Stack
|
||||
pr={"50%"}
|
||||
gap={"xl"}
|
||||
>
|
||||
<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">
|
||||
<Box>
|
||||
<Stack gap={"xs"}>
|
||||
<Title order={2}>
|
||||
Autentikasi
|
||||
</Title>
|
||||
<Group mb="md" justify="space-between">
|
||||
<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>
|
||||
<Switch defaultChecked />
|
||||
</Group>
|
||||
<Group mb="md" justify="space-between">
|
||||
<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>
|
||||
</Stack>
|
||||
</Box>
|
||||
<Box>
|
||||
<Stack gap={"xs"}>
|
||||
<Title order={2}>
|
||||
Audit & Log
|
||||
</Title>
|
||||
<Group mb="md" justify="space-between">
|
||||
<Text fw={"bold"} fz={"sm"}>Log Aktivitas</Text>
|
||||
<Switch defaultChecked />
|
||||
</Group>
|
||||
<Button bg={"#1E3A5F"} radius={"md"} c={"white"} fullWidth>Download Log</Button>
|
||||
</Stack>
|
||||
</Box>
|
||||
<Group justify="flex-start" mt="xl">
|
||||
<Button variant="outline">Batal</Button>
|
||||
<Button>Perbarui Kata Sandi</Button>
|
||||
<Button>Simpan Perubahan</Button>
|
||||
</Group>
|
||||
</Card>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -1,10 +1,14 @@
|
||||
import {
|
||||
Alert,
|
||||
Box,
|
||||
Button,
|
||||
Card,
|
||||
Checkbox,
|
||||
Grid,
|
||||
GridCol,
|
||||
Group,
|
||||
Space,
|
||||
Stack,
|
||||
Switch,
|
||||
Text,
|
||||
Title,
|
||||
@@ -16,70 +20,82 @@ 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" }}
|
||||
<Stack
|
||||
pr={"20%"}
|
||||
gap={"xs"}
|
||||
>
|
||||
<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">
|
||||
<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>
|
||||
<Switch defaultChecked />
|
||||
</Group>
|
||||
<Group mb="md" justify="space-between">
|
||||
<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>
|
||||
<Switch defaultChecked />
|
||||
</Group>
|
||||
<Group mb="md" justify="space-between">
|
||||
<Text fw={"bold"} fz={"sm"}>Newsletter Bulanan</Text>
|
||||
<Switch defaultChecked />
|
||||
</Group>
|
||||
</Stack>
|
||||
</GridCol>
|
||||
<GridCol span={6}>
|
||||
<Stack gap={"xs"}>
|
||||
<Title order={3} mb="sm">
|
||||
Preferensi Alert
|
||||
</Title>
|
||||
<Group mb="md" justify="space-between">
|
||||
<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>
|
||||
<Switch defaultChecked />
|
||||
</Group>
|
||||
<Group mb="md" justify="space-between">
|
||||
<Text fw={"bold"} fz={"sm"}>Treshold Disk</Text>
|
||||
<Switch defaultChecked />
|
||||
</Group>
|
||||
</Stack>
|
||||
</GridCol>
|
||||
<GridCol span={6}>
|
||||
<Stack gap={"xs"}>
|
||||
<Title order={3} mb="sm">
|
||||
Notifikasi Push
|
||||
</Title>
|
||||
<Group mb="md" justify="space-between">
|
||||
<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>
|
||||
<Switch defaultChecked />
|
||||
</Group>
|
||||
<Group mb="md" justify="space-between">
|
||||
<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>
|
||||
<Switch defaultChecked />
|
||||
</Group>
|
||||
</Stack>
|
||||
</GridCol>
|
||||
</Grid>
|
||||
<Group justify="flex-start" mt="xl">
|
||||
<Button variant="outline">Batal</Button>
|
||||
<Button>Simpan Preferensi</Button>
|
||||
</Group>
|
||||
</Card>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -1,23 +1,15 @@
|
||||
import {
|
||||
Alert,
|
||||
Box,
|
||||
Button,
|
||||
Card,
|
||||
Group,
|
||||
Select,
|
||||
Space,
|
||||
Switch,
|
||||
Text,
|
||||
TextInput,
|
||||
Title,
|
||||
useMantineColorScheme,
|
||||
} from "@mantine/core";
|
||||
import { DateInput } from "@mantine/dates";
|
||||
import { IconInfoCircle } from "@tabler/icons-react";
|
||||
|
||||
const UmumSettings = () => {
|
||||
const { colorScheme } = useMantineColorScheme();
|
||||
const dark = colorScheme === "dark";
|
||||
return (
|
||||
<Box
|
||||
pr={"50%"}
|
||||
|
||||
@@ -1,16 +1,26 @@
|
||||
import { useDisclosure } from "@mantine/hooks";
|
||||
import { useState } from "react";
|
||||
|
||||
export function useSidebarFullscreen() {
|
||||
const [opened, { toggle: toggleMobile }] = useDisclosure();
|
||||
const [sidebarCollapsed, setSidebarCollapsed] = useDisclosure(false);
|
||||
const [clickCount, setClickCount] = useState(0);
|
||||
|
||||
const toggleSidebar = () => {
|
||||
setSidebarCollapsed.toggle();
|
||||
setClickCount(0);
|
||||
};
|
||||
|
||||
const handleMainClick = () => {
|
||||
if (!sidebarCollapsed) {
|
||||
toggleSidebar();
|
||||
const newCount = clickCount + 1;
|
||||
setClickCount(newCount);
|
||||
|
||||
if (newCount === 2) {
|
||||
toggleSidebar();
|
||||
} else {
|
||||
setTimeout(() => setClickCount(0), 300);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { AppShell, Burger, Group, useMantineColorScheme } from "@mantine/core";
|
||||
import { useDisclosure } from "@mantine/hooks";
|
||||
import { createFileRoute } from "@tanstack/react-router";
|
||||
import { useState } from "react";
|
||||
import { DashboardContent } from "@/components/dashboard-content";
|
||||
import { Header } from "@/components/header";
|
||||
import { Sidebar } from "@/components/sidebar";
|
||||
@@ -12,6 +13,7 @@ export const Route = createFileRoute("/")({
|
||||
function DashboardPage() {
|
||||
const [opened, { toggle }] = useDisclosure();
|
||||
const [sidebarCollapsed, setSidebarCollapsed] = useDisclosure(false);
|
||||
const [clickCount, setClickCount] = useState(0);
|
||||
const { colorScheme } = useMantineColorScheme();
|
||||
const headerBgColor = colorScheme === "dark" ? "#11192D" : "#19355E";
|
||||
const navbarBgColor = colorScheme === "dark" ? "#11192D" : "white";
|
||||
@@ -19,7 +21,15 @@ function DashboardPage() {
|
||||
|
||||
const handleMainClick = () => {
|
||||
if (!sidebarCollapsed) {
|
||||
setSidebarCollapsed.toggle();
|
||||
const newCount = clickCount + 1;
|
||||
setClickCount(newCount);
|
||||
|
||||
if (newCount === 2) {
|
||||
setSidebarCollapsed.toggle();
|
||||
setClickCount(0);
|
||||
} else {
|
||||
setTimeout(() => setClickCount(0), 300);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user