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>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user