feat: improve UI/UX consistency across all dashboard pages
Apply uniform design system across all routes and components: - Consistent header pattern with gradient-text titles, dimmed subtitles - Loader type="dots" replacing text-based loading states - Icon + text empty/error states with Paper+glass containers - Full STATUS_COLOR/STATUS_LABEL maps for all BugStatus values - dayjs timestamps, Tooltip on action icons, size="sm" on badges/pagination - Modals with overlayProps blur and gradient save buttons - Replace left-border Papers with clean Stack headers - Translate all remaining Indonesian UI strings to English - New monitoring-themed SVG logo and redesigned splash screen
This commit is contained in:
@@ -4,9 +4,9 @@ import {
|
||||
Badge,
|
||||
Box,
|
||||
Button,
|
||||
Container,
|
||||
Divider,
|
||||
Group,
|
||||
Loader,
|
||||
Modal,
|
||||
Pagination,
|
||||
Paper,
|
||||
@@ -14,18 +14,20 @@ import {
|
||||
Select,
|
||||
SimpleGrid,
|
||||
Stack,
|
||||
Switch,
|
||||
Table,
|
||||
Text,
|
||||
TextInput,
|
||||
ThemeIcon,
|
||||
Title,
|
||||
Switch,
|
||||
Tooltip,
|
||||
} from '@mantine/core'
|
||||
import { useDisclosure, useMediaQuery } from '@mantine/hooks'
|
||||
import { notifications } from '@mantine/notifications'
|
||||
import { createFileRoute, useParams } from '@tanstack/react-router'
|
||||
import { useState } from 'react'
|
||||
import {
|
||||
TbAlertCircle,
|
||||
TbBriefcase,
|
||||
TbCircleCheck,
|
||||
TbCircleX,
|
||||
@@ -160,9 +162,7 @@ function UsersIndexPage() {
|
||||
try {
|
||||
const res = await fetch(API_URLS.createUser(), {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(form)
|
||||
})
|
||||
|
||||
@@ -172,7 +172,7 @@ function UsersIndexPage() {
|
||||
await fetch(API_URLS.createLog(), {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ type: 'CREATE', message: `Didaftarkan user (${appId}) baru: ${form.name}-${form.nik}` })
|
||||
body: JSON.stringify({ type: 'CREATE', message: `New user registered (${appId}): ${form.name} - ${form.nik}` })
|
||||
}).catch(console.error)
|
||||
|
||||
notifications.show({
|
||||
@@ -181,19 +181,9 @@ function UsersIndexPage() {
|
||||
color: 'teal',
|
||||
icon: <TbCircleCheck size={18} />
|
||||
})
|
||||
mutate() // Refresh user list
|
||||
mutate()
|
||||
close()
|
||||
setForm({
|
||||
name: '',
|
||||
nik: '',
|
||||
phone: '',
|
||||
email: '',
|
||||
gender: '',
|
||||
idUserRole: '',
|
||||
idVillage: '',
|
||||
idGroup: '',
|
||||
idPosition: ''
|
||||
})
|
||||
setForm({ name: '', nik: '', phone: '', email: '', gender: '', idUserRole: '', idVillage: '', idGroup: '', idPosition: '' })
|
||||
} else {
|
||||
notifications.show({
|
||||
title: 'Error',
|
||||
@@ -202,12 +192,8 @@ function UsersIndexPage() {
|
||||
icon: <TbCircleX size={18} />
|
||||
})
|
||||
}
|
||||
} catch (e) {
|
||||
notifications.show({
|
||||
title: 'Network Error',
|
||||
message: 'Unable to connect to the server.',
|
||||
color: 'red'
|
||||
})
|
||||
} catch {
|
||||
notifications.show({ title: 'Network Error', message: 'Unable to connect to the server.', color: 'red' })
|
||||
} finally {
|
||||
setIsSubmitting(false)
|
||||
}
|
||||
@@ -249,9 +235,7 @@ function UsersIndexPage() {
|
||||
try {
|
||||
const res = await fetch(API_URLS.editUser(), {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(editForm)
|
||||
})
|
||||
|
||||
@@ -261,7 +245,7 @@ function UsersIndexPage() {
|
||||
await fetch(API_URLS.createLog(), {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ type: 'UPDATE', message: `Data user (${appId}) diperbarui: ${editForm.name}-${editForm.id}` })
|
||||
body: JSON.stringify({ type: 'UPDATE', message: `User updated (${appId}): ${editForm.name} - ${editForm.id}` })
|
||||
}).catch(console.error)
|
||||
|
||||
notifications.show({
|
||||
@@ -280,12 +264,8 @@ function UsersIndexPage() {
|
||||
icon: <TbCircleX size={18} />
|
||||
})
|
||||
}
|
||||
} catch (e) {
|
||||
notifications.show({
|
||||
title: 'Network Error',
|
||||
message: 'Unable to connect to the server.',
|
||||
color: 'red'
|
||||
})
|
||||
} catch {
|
||||
notifications.show({ title: 'Network Error', message: 'Unable to connect to the server.', color: 'red' })
|
||||
} finally {
|
||||
setIsSubmitting(false)
|
||||
}
|
||||
@@ -309,348 +289,342 @@ function UsersIndexPage() {
|
||||
|
||||
if (!isDesaPlus) {
|
||||
return (
|
||||
<Container size="xl" py="xl">
|
||||
<Paper p="xl" radius="xl" className="glass" style={{ textAlign: 'center' }}>
|
||||
<TbUsers size={48} color="gray" opacity={0.5} />
|
||||
<Title order={3} mt="md">User Management</Title>
|
||||
<Text c="dimmed">This feature is currently customized for Desa+. Other apps coming soon.</Text>
|
||||
</Paper>
|
||||
</Container>
|
||||
<Paper withBorder radius="2xl" className="glass" p="xl">
|
||||
<Stack align="center" gap="xs" py="xl">
|
||||
<TbUsers size={40} style={{ opacity: 0.25 }} />
|
||||
<Text fw={600} size="sm">User Management</Text>
|
||||
<Text size="sm" c="dimmed">This feature is currently available for Desa+. Other apps coming soon.</Text>
|
||||
</Stack>
|
||||
</Paper>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Stack gap="xl" py="md">
|
||||
<Paper withBorder radius="2xl" p="xl" className="glass" style={{ borderLeft: '6px solid #2563EB' }}>
|
||||
<Stack gap="lg">
|
||||
<Group justify="space-between" align="center">
|
||||
<Stack gap={4}>
|
||||
<Group gap="xs">
|
||||
<ThemeIcon variant="light" color="brand-blue" size="lg" radius="md">
|
||||
<TbUsers size={22} />
|
||||
</ThemeIcon>
|
||||
<Title order={3}>User Management</Title>
|
||||
</Group>
|
||||
<Text size="sm" c="dimmed" ml={40}>
|
||||
{isLoading ? 'Loading users...' : `${response?.data?.total || 0} users registered in the Desa+ system`}
|
||||
</Text>
|
||||
</Stack>
|
||||
<Button
|
||||
variant="gradient"
|
||||
gradient={{ from: '#2563EB', to: '#7C3AED', deg: 135 }}
|
||||
leftSection={<TbPlus size={18} />}
|
||||
radius="md"
|
||||
size="md"
|
||||
onClick={open}
|
||||
>
|
||||
Add User
|
||||
</Button>
|
||||
</Group>
|
||||
{/* Add User Modal */}
|
||||
<Modal
|
||||
opened={opened}
|
||||
onClose={close}
|
||||
title={<Text fw={700} size="lg">Add New User</Text>}
|
||||
radius="md"
|
||||
size="lg"
|
||||
overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
|
||||
>
|
||||
<Stack gap="md">
|
||||
<Box>
|
||||
<Text size="xs" fw={700} c="dimmed" mb={8} tt="uppercase" style={{ letterSpacing: '0.05em' }}>
|
||||
Personal Information
|
||||
</Text>
|
||||
<SimpleGrid cols={2} spacing="md">
|
||||
<TextInput
|
||||
label="Full Name"
|
||||
placeholder="Enter full name"
|
||||
required
|
||||
value={form.name}
|
||||
onChange={(e) => setForm(f => ({ ...f, name: e.target.value }))}
|
||||
/>
|
||||
<TextInput
|
||||
label="NIK"
|
||||
placeholder="16-digit identity number"
|
||||
required
|
||||
value={form.nik}
|
||||
onChange={(e) => setForm(f => ({ ...f, nik: e.target.value }))}
|
||||
/>
|
||||
</SimpleGrid>
|
||||
|
||||
<Modal
|
||||
opened={opened}
|
||||
onClose={close}
|
||||
title={<Text fw={700} size="lg">Add New User</Text>}
|
||||
radius="xl"
|
||||
size="lg"
|
||||
overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
|
||||
>
|
||||
<Stack gap="md">
|
||||
<Box>
|
||||
<Text size="xs" fw={700} c="dimmed" mb={8} style={{ textTransform: 'uppercase', letterSpacing: '0.05em' }}>
|
||||
Personal Information
|
||||
</Text>
|
||||
<SimpleGrid cols={2} spacing="md">
|
||||
<TextInput
|
||||
label="Full Name"
|
||||
placeholder="Enter full name"
|
||||
required
|
||||
value={form.name}
|
||||
onChange={(e) => setForm(f => ({ ...f, name: e.target.value }))}
|
||||
/>
|
||||
<TextInput
|
||||
label="NIK"
|
||||
placeholder="16-digit identity number"
|
||||
required
|
||||
value={form.nik}
|
||||
onChange={(e) => setForm(f => ({ ...f, nik: e.target.value }))}
|
||||
/>
|
||||
</SimpleGrid>
|
||||
<SimpleGrid cols={2} spacing="md" mt="sm">
|
||||
<TextInput
|
||||
label="Email Address"
|
||||
placeholder="email@example.com"
|
||||
required
|
||||
value={form.email}
|
||||
onChange={(e) => setForm(f => ({ ...f, email: e.target.value }))}
|
||||
/>
|
||||
<TextInput
|
||||
label="Phone Number"
|
||||
placeholder="628xxxxxxxxxx"
|
||||
required
|
||||
value={form.phone}
|
||||
onChange={(e) => setForm(f => ({ ...f, phone: e.target.value }))}
|
||||
/>
|
||||
</SimpleGrid>
|
||||
|
||||
<SimpleGrid cols={2} spacing="md" mt="sm">
|
||||
<TextInput
|
||||
label="Email Address"
|
||||
placeholder="email@example.com"
|
||||
required
|
||||
value={form.email}
|
||||
onChange={(e) => setForm(f => ({ ...f, email: e.target.value }))}
|
||||
/>
|
||||
<TextInput
|
||||
label="Phone Number"
|
||||
placeholder="628xxxxxxxxxx"
|
||||
required
|
||||
value={form.phone}
|
||||
onChange={(e) => setForm(f => ({ ...f, phone: e.target.value }))}
|
||||
/>
|
||||
</SimpleGrid>
|
||||
<Select
|
||||
label="Gender"
|
||||
placeholder="Select gender"
|
||||
data={[
|
||||
{ value: 'M', label: 'Male' },
|
||||
{ value: 'F', label: 'Female' },
|
||||
]}
|
||||
mt="sm"
|
||||
required
|
||||
value={form.gender}
|
||||
onChange={(v) => setForm(f => ({ ...f, gender: v || '' }))}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Select
|
||||
label="Gender"
|
||||
placeholder="Select gender"
|
||||
data={[
|
||||
{ value: 'M', label: 'Male' },
|
||||
{ value: 'F', label: 'Female' },
|
||||
]}
|
||||
mt="sm"
|
||||
required
|
||||
value={form.gender}
|
||||
onChange={(v) => setForm(f => ({ ...f, gender: v || '' }))}
|
||||
/>
|
||||
</Box>
|
||||
<Divider label="Role & Organization" labelPosition="center" my="sm" />
|
||||
|
||||
<Divider label="Role & Organization" labelPosition="center" my="sm" />
|
||||
<Box>
|
||||
<Select
|
||||
label="User Role"
|
||||
placeholder="Select user role"
|
||||
data={rolesOptions}
|
||||
required
|
||||
value={form.idUserRole}
|
||||
onChange={(v) => setForm(f => ({ ...f, idUserRole: v || '' }))}
|
||||
/>
|
||||
|
||||
<Box>
|
||||
<Select
|
||||
label="User Role"
|
||||
placeholder="Select user role"
|
||||
data={rolesOptions}
|
||||
required
|
||||
value={form.idUserRole}
|
||||
onChange={(v) => setForm(f => ({ ...f, idUserRole: v || '' }))}
|
||||
/>
|
||||
<Select
|
||||
label="Village"
|
||||
placeholder="Type to search village..."
|
||||
searchable
|
||||
onSearchChange={setVillageSearch}
|
||||
data={villagesOptions}
|
||||
mt="sm"
|
||||
required
|
||||
value={form.idVillage}
|
||||
onChange={(v) => setForm(f => ({ ...f, idVillage: v || '', idGroup: '', idPosition: '' }))}
|
||||
/>
|
||||
|
||||
<Select
|
||||
label="Village"
|
||||
placeholder="Type to search village..."
|
||||
searchable
|
||||
onSearchChange={setVillageSearch}
|
||||
data={villagesOptions}
|
||||
mt="sm"
|
||||
required
|
||||
value={form.idVillage}
|
||||
onChange={(v) => {
|
||||
setForm(f => ({ ...f, idVillage: v || '', idGroup: '', idPosition: '' }))
|
||||
}}
|
||||
/>
|
||||
<SimpleGrid cols={2} spacing="md" mt="sm">
|
||||
<Select
|
||||
label="Group"
|
||||
placeholder={form.idVillage ? 'Select group' : 'Select village first'}
|
||||
data={groupsOptions}
|
||||
disabled={!form.idVillage}
|
||||
required
|
||||
value={form.idGroup}
|
||||
onChange={(v) => setForm(f => ({ ...f, idGroup: v || '', idPosition: '' }))}
|
||||
/>
|
||||
<Select
|
||||
label="Position"
|
||||
placeholder={form.idGroup ? 'Select position' : 'Select group first'}
|
||||
data={positionsOptions}
|
||||
disabled={!form.idGroup}
|
||||
value={form.idPosition || ''}
|
||||
onChange={(v) => setForm(f => ({ ...f, idPosition: v || '' }))}
|
||||
/>
|
||||
</SimpleGrid>
|
||||
</Box>
|
||||
|
||||
<SimpleGrid cols={2} spacing="md" mt="sm">
|
||||
<Select
|
||||
label="Group"
|
||||
placeholder={form.idVillage ? "Select group" : "Select village first"}
|
||||
data={groupsOptions}
|
||||
disabled={!form.idVillage}
|
||||
required
|
||||
value={form.idGroup}
|
||||
onChange={(v) => {
|
||||
setForm(f => ({ ...f, idGroup: v || '', idPosition: '' }))
|
||||
}}
|
||||
/>
|
||||
<Select
|
||||
label="Position"
|
||||
placeholder={form.idGroup ? "Select position" : "Select group first"}
|
||||
data={positionsOptions}
|
||||
disabled={!form.idGroup}
|
||||
value={form.idPosition || ''}
|
||||
onChange={(v) => setForm(f => ({ ...f, idPosition: v || '' }))}
|
||||
/>
|
||||
</SimpleGrid>
|
||||
</Box>
|
||||
|
||||
<Button
|
||||
fullWidth
|
||||
mt="lg"
|
||||
radius="md"
|
||||
size="md"
|
||||
variant="gradient"
|
||||
gradient={{ from: '#2563EB', to: '#7C3AED', deg: 135 }}
|
||||
loading={isSubmitting}
|
||||
onClick={handleCreateUser}
|
||||
>
|
||||
Register User
|
||||
</Button>
|
||||
</Stack>
|
||||
</Modal>
|
||||
|
||||
<Modal
|
||||
opened={editOpened}
|
||||
onClose={closeEdit}
|
||||
title={<Text fw={700} size="lg">Edit User</Text>}
|
||||
radius="xl"
|
||||
size="lg"
|
||||
overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
|
||||
>
|
||||
<Stack gap="md">
|
||||
<Box>
|
||||
<Text size="xs" fw={700} c="dimmed" mb={8} style={{ textTransform: 'uppercase', letterSpacing: '0.05em' }}>
|
||||
Personal Information
|
||||
</Text>
|
||||
<SimpleGrid cols={2} spacing="md">
|
||||
<TextInput
|
||||
label="Full Name"
|
||||
placeholder="Enter full name"
|
||||
required
|
||||
value={editForm.name}
|
||||
onChange={(e) => setEditForm(f => ({ ...f, name: e.target.value }))}
|
||||
/>
|
||||
<TextInput
|
||||
label="NIK"
|
||||
placeholder="16-digit identity number"
|
||||
required
|
||||
value={editForm.nik}
|
||||
onChange={(e) => setEditForm(f => ({ ...f, nik: e.target.value }))}
|
||||
/>
|
||||
</SimpleGrid>
|
||||
|
||||
<SimpleGrid cols={2} spacing="md" mt="sm">
|
||||
<TextInput
|
||||
label="Email Address"
|
||||
placeholder="email@example.com"
|
||||
required
|
||||
value={editForm.email}
|
||||
onChange={(e) => setEditForm(f => ({ ...f, email: e.target.value }))}
|
||||
/>
|
||||
<TextInput
|
||||
label="Phone Number"
|
||||
placeholder="628xxxxxxxxxx"
|
||||
required
|
||||
value={editForm.phone}
|
||||
onChange={(e) => setEditForm(f => ({ ...f, phone: e.target.value }))}
|
||||
/>
|
||||
</SimpleGrid>
|
||||
|
||||
<Select
|
||||
label="Gender"
|
||||
placeholder="Select gender"
|
||||
data={[
|
||||
{ value: 'M', label: 'Male' },
|
||||
{ value: 'F', label: 'Female' },
|
||||
]}
|
||||
mt="sm"
|
||||
required
|
||||
value={editForm.gender}
|
||||
onChange={(v) => setEditForm(f => ({ ...f, gender: v || '' }))}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Divider label="Role & Organization" labelPosition="center" my="sm" />
|
||||
|
||||
<Box>
|
||||
<Select
|
||||
label="User Role"
|
||||
placeholder="Select user role"
|
||||
data={rolesOptions}
|
||||
required
|
||||
value={editForm.idUserRole}
|
||||
onChange={(v) => setEditForm(f => ({ ...f, idUserRole: v || '' }))}
|
||||
/>
|
||||
|
||||
<Select
|
||||
label="Village"
|
||||
placeholder="Type to search village..."
|
||||
searchable
|
||||
onSearchChange={setVillageSearch}
|
||||
data={villagesOptions}
|
||||
mt="sm"
|
||||
required
|
||||
value={editForm.idVillage}
|
||||
onChange={(v) => {
|
||||
setEditForm(f => ({ ...f, idVillage: v || '', idGroup: '', idPosition: '' }))
|
||||
}}
|
||||
/>
|
||||
|
||||
<SimpleGrid cols={2} spacing="md" mt="sm">
|
||||
<Select
|
||||
label="Group"
|
||||
placeholder={editForm.idVillage ? "Select group" : "Select village first"}
|
||||
data={groupsOptions}
|
||||
disabled={!editForm.idVillage}
|
||||
required
|
||||
value={editForm.idGroup}
|
||||
onChange={(v) => {
|
||||
setEditForm(f => ({ ...f, idGroup: v || '', idPosition: '' }))
|
||||
}}
|
||||
/>
|
||||
<Select
|
||||
label="Position"
|
||||
placeholder={editForm.idGroup ? "Select position" : "Select group first"}
|
||||
data={positionsOptions}
|
||||
disabled={!editForm.idGroup}
|
||||
value={editForm.idPosition || ''}
|
||||
onChange={(v) => setEditForm(f => ({ ...f, idPosition: v || '' }))}
|
||||
/>
|
||||
</SimpleGrid>
|
||||
</Box>
|
||||
|
||||
<Divider label="System Access" labelPosition="center" my="sm" />
|
||||
|
||||
<SimpleGrid cols={2} spacing="xl">
|
||||
<Switch
|
||||
label="Account Active"
|
||||
description="Enable or disable user access"
|
||||
checked={editForm.isActive}
|
||||
onChange={(event) => setEditForm(f => ({ ...f, isActive: event.currentTarget.checked }))}
|
||||
/>
|
||||
<Switch
|
||||
label="Without OTP"
|
||||
description="Bypass login OTP verification"
|
||||
checked={editForm.isWithoutOTP}
|
||||
onChange={(event) => setEditForm(f => ({ ...f, isWithoutOTP: event.currentTarget.checked }))}
|
||||
/>
|
||||
</SimpleGrid>
|
||||
|
||||
<Button
|
||||
fullWidth
|
||||
mt="lg"
|
||||
radius="md"
|
||||
size="md"
|
||||
variant="gradient"
|
||||
gradient={{ from: '#2563EB', to: '#7C3AED', deg: 135 }}
|
||||
loading={isSubmitting}
|
||||
onClick={handleUpdateUser}
|
||||
>
|
||||
Update User
|
||||
</Button>
|
||||
</Stack>
|
||||
</Modal>
|
||||
|
||||
<TextInput
|
||||
placeholder="Search name, NIK, or email..."
|
||||
leftSection={<TbSearch size={18} />}
|
||||
size="md"
|
||||
rightSection={
|
||||
search ? (
|
||||
<ActionIcon variant="transparent" color="gray" onClick={handleClearSearch} size="md">
|
||||
<TbX size={18} />
|
||||
</ActionIcon>
|
||||
) : null
|
||||
}
|
||||
value={search}
|
||||
onChange={(e) => handleSearchChange(e.currentTarget.value)}
|
||||
<Button
|
||||
fullWidth
|
||||
mt="lg"
|
||||
radius="md"
|
||||
style={{ maxWidth: 500 }}
|
||||
ml={40}
|
||||
/>
|
||||
variant="gradient"
|
||||
gradient={{ from: '#2563EB', to: '#7C3AED', deg: 135 }}
|
||||
loading={isSubmitting}
|
||||
onClick={handleCreateUser}
|
||||
>
|
||||
Register User
|
||||
</Button>
|
||||
</Stack>
|
||||
</Modal>
|
||||
|
||||
{/* Edit User Modal */}
|
||||
<Modal
|
||||
opened={editOpened}
|
||||
onClose={closeEdit}
|
||||
title={<Text fw={700} size="lg">Edit User</Text>}
|
||||
radius="md"
|
||||
size="lg"
|
||||
overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
|
||||
>
|
||||
<Stack gap="md">
|
||||
<Box>
|
||||
<Text size="xs" fw={700} c="dimmed" mb={8} tt="uppercase" style={{ letterSpacing: '0.05em' }}>
|
||||
Personal Information
|
||||
</Text>
|
||||
<SimpleGrid cols={2} spacing="md">
|
||||
<TextInput
|
||||
label="Full Name"
|
||||
placeholder="Enter full name"
|
||||
required
|
||||
value={editForm.name}
|
||||
onChange={(e) => setEditForm(f => ({ ...f, name: e.target.value }))}
|
||||
/>
|
||||
<TextInput
|
||||
label="NIK"
|
||||
placeholder="16-digit identity number"
|
||||
required
|
||||
value={editForm.nik}
|
||||
onChange={(e) => setEditForm(f => ({ ...f, nik: e.target.value }))}
|
||||
/>
|
||||
</SimpleGrid>
|
||||
|
||||
<SimpleGrid cols={2} spacing="md" mt="sm">
|
||||
<TextInput
|
||||
label="Email Address"
|
||||
placeholder="email@example.com"
|
||||
required
|
||||
value={editForm.email}
|
||||
onChange={(e) => setEditForm(f => ({ ...f, email: e.target.value }))}
|
||||
/>
|
||||
<TextInput
|
||||
label="Phone Number"
|
||||
placeholder="628xxxxxxxxxx"
|
||||
required
|
||||
value={editForm.phone}
|
||||
onChange={(e) => setEditForm(f => ({ ...f, phone: e.target.value }))}
|
||||
/>
|
||||
</SimpleGrid>
|
||||
|
||||
<Select
|
||||
label="Gender"
|
||||
placeholder="Select gender"
|
||||
data={[
|
||||
{ value: 'M', label: 'Male' },
|
||||
{ value: 'F', label: 'Female' },
|
||||
]}
|
||||
mt="sm"
|
||||
required
|
||||
value={editForm.gender}
|
||||
onChange={(v) => setEditForm(f => ({ ...f, gender: v || '' }))}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Divider label="Role & Organization" labelPosition="center" my="sm" />
|
||||
|
||||
<Box>
|
||||
<Select
|
||||
label="User Role"
|
||||
placeholder="Select user role"
|
||||
data={rolesOptions}
|
||||
required
|
||||
value={editForm.idUserRole}
|
||||
onChange={(v) => setEditForm(f => ({ ...f, idUserRole: v || '' }))}
|
||||
/>
|
||||
|
||||
<Select
|
||||
label="Village"
|
||||
placeholder="Type to search village..."
|
||||
searchable
|
||||
onSearchChange={setVillageSearch}
|
||||
data={villagesOptions}
|
||||
mt="sm"
|
||||
required
|
||||
value={editForm.idVillage}
|
||||
onChange={(v) => setEditForm(f => ({ ...f, idVillage: v || '', idGroup: '', idPosition: '' }))}
|
||||
/>
|
||||
|
||||
<SimpleGrid cols={2} spacing="md" mt="sm">
|
||||
<Select
|
||||
label="Group"
|
||||
placeholder={editForm.idVillage ? 'Select group' : 'Select village first'}
|
||||
data={groupsOptions}
|
||||
disabled={!editForm.idVillage}
|
||||
required
|
||||
value={editForm.idGroup}
|
||||
onChange={(v) => setEditForm(f => ({ ...f, idGroup: v || '', idPosition: '' }))}
|
||||
/>
|
||||
<Select
|
||||
label="Position"
|
||||
placeholder={editForm.idGroup ? 'Select position' : 'Select group first'}
|
||||
data={positionsOptions}
|
||||
disabled={!editForm.idGroup}
|
||||
value={editForm.idPosition || ''}
|
||||
onChange={(v) => setEditForm(f => ({ ...f, idPosition: v || '' }))}
|
||||
/>
|
||||
</SimpleGrid>
|
||||
</Box>
|
||||
|
||||
<Divider label="System Access" labelPosition="center" my="sm" />
|
||||
|
||||
<SimpleGrid cols={2} spacing="xl">
|
||||
<Switch
|
||||
label="Account Active"
|
||||
description="Enable or disable user access"
|
||||
checked={editForm.isActive}
|
||||
onChange={(event) => setEditForm(f => ({ ...f, isActive: event.currentTarget.checked }))}
|
||||
/>
|
||||
<Switch
|
||||
label="Without OTP"
|
||||
description="Bypass login OTP verification"
|
||||
checked={editForm.isWithoutOTP}
|
||||
onChange={(event) => setEditForm(f => ({ ...f, isWithoutOTP: event.currentTarget.checked }))}
|
||||
/>
|
||||
</SimpleGrid>
|
||||
|
||||
<Button
|
||||
fullWidth
|
||||
mt="lg"
|
||||
radius="md"
|
||||
variant="gradient"
|
||||
gradient={{ from: '#2563EB', to: '#7C3AED', deg: 135 }}
|
||||
loading={isSubmitting}
|
||||
onClick={handleUpdateUser}
|
||||
>
|
||||
Update User
|
||||
</Button>
|
||||
</Stack>
|
||||
</Modal>
|
||||
|
||||
{/* Header */}
|
||||
<Group justify="space-between" align="flex-start">
|
||||
<Stack gap={4}>
|
||||
<Title order={3}>User Management</Title>
|
||||
<Text size="sm" c="dimmed">
|
||||
{isLoading ? 'Loading users...' : `${response?.data?.total ?? 0} users registered in the Desa+ system`}
|
||||
</Text>
|
||||
</Stack>
|
||||
<Button
|
||||
variant="gradient"
|
||||
gradient={{ from: '#2563EB', to: '#7C3AED', deg: 135 }}
|
||||
leftSection={<TbPlus size={18} />}
|
||||
size="sm"
|
||||
onClick={open}
|
||||
>
|
||||
Add User
|
||||
</Button>
|
||||
</Group>
|
||||
|
||||
{/* Search / Filter */}
|
||||
<Paper withBorder p="md" className="glass">
|
||||
<TextInput
|
||||
placeholder="Search name, NIK, or email... (min. 3 characters)"
|
||||
leftSection={<TbSearch size={16} />}
|
||||
size="sm"
|
||||
rightSection={
|
||||
search ? (
|
||||
<Tooltip label="Clear search" withArrow>
|
||||
<ActionIcon variant="transparent" color="gray" onClick={handleClearSearch} size="sm">
|
||||
<TbX size={16} />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
) : null
|
||||
}
|
||||
value={search}
|
||||
onChange={(e) => handleSearchChange(e.currentTarget.value)}
|
||||
radius="md"
|
||||
/>
|
||||
</Paper>
|
||||
|
||||
{isLoading ? (
|
||||
<Paper p="xl" radius="xl" withBorder style={{ textAlign: 'center' }}>
|
||||
<Text c="dimmed">Loading user data...</Text>
|
||||
</Paper>
|
||||
<Group justify="center" py="xl">
|
||||
<Loader type="dots" />
|
||||
</Group>
|
||||
) : error ? (
|
||||
<Paper p="xl" radius="xl" withBorder style={{ textAlign: 'center' }}>
|
||||
<Text c="red">Failed to load data from API.</Text>
|
||||
<Paper withBorder radius="2xl" className="glass" p="md">
|
||||
<Stack align="center" gap="xs" py="xl">
|
||||
<TbAlertCircle size={32} style={{ opacity: 0.4, color: 'var(--mantine-color-red-6)' }} />
|
||||
<Text size="sm" c="dimmed">Failed to load users from the API.</Text>
|
||||
</Stack>
|
||||
</Paper>
|
||||
) : users.length === 0 ? (
|
||||
<Paper p="xl" radius="xl" withBorder style={{ textAlign: 'center' }}>
|
||||
<TbUsers size={40} color="gray" opacity={0.4} />
|
||||
<Text c="dimmed" mt="md">No users match your criteria.</Text>
|
||||
<Paper withBorder radius="2xl" className="glass" p="md">
|
||||
<Stack align="center" gap="xs" py="xl">
|
||||
<TbUsers size={32} style={{ opacity: 0.25 }} />
|
||||
<Text size="sm" c="dimmed">
|
||||
{searchQuery ? 'No users match your search.' : 'No users found.'}
|
||||
</Text>
|
||||
</Stack>
|
||||
</Paper>
|
||||
) : (
|
||||
<Paper withBorder radius="2xl" className="glass" style={{ overflow: 'hidden' }}>
|
||||
<ScrollArea h={isMobile ? undefined : 'auto'} offsetScrollbars>
|
||||
<Table
|
||||
className="data-table"
|
||||
verticalSpacing="md"
|
||||
horizontalSpacing="md"
|
||||
highlightOnHover
|
||||
@@ -658,21 +632,25 @@ function UsersIndexPage() {
|
||||
style={{
|
||||
tableLayout: isMobile ? 'auto' : 'fixed',
|
||||
width: '100%',
|
||||
minWidth: isMobile ? 900 : 'unset'
|
||||
minWidth: isMobile ? 900 : 'unset',
|
||||
}}
|
||||
>
|
||||
<Table.Thead bg="rgba(0,0,0,0.05)">
|
||||
<Table.Thead>
|
||||
<Table.Tr>
|
||||
<Table.Th style={{ border: 'none', width: isMobile ? undefined : '28%' }}>User & ID</Table.Th>
|
||||
<Table.Th style={{ border: 'none', width: isMobile ? undefined : '25%' }}>Contact Detail</Table.Th>
|
||||
<Table.Th style={{ border: 'none', width: isMobile ? undefined : '22%' }}>Organization</Table.Th>
|
||||
<Table.Th style={{ border: 'none', width: isMobile ? undefined : '20%' }}>Role</Table.Th>
|
||||
<Table.Th style={{ border: 'none', width: isMobile ? undefined : '10%' }}>Status</Table.Th>
|
||||
<Table.Th style={{ width: isMobile ? undefined : '28%' }}>User & ID</Table.Th>
|
||||
<Table.Th style={{ width: isMobile ? undefined : '25%' }}>Contact</Table.Th>
|
||||
<Table.Th style={{ width: isMobile ? undefined : '22%' }}>Organization</Table.Th>
|
||||
<Table.Th style={{ width: isMobile ? undefined : '15%' }}>Role</Table.Th>
|
||||
<Table.Th style={{ width: isMobile ? undefined : '10%' }}>Status</Table.Th>
|
||||
</Table.Tr>
|
||||
</Table.Thead>
|
||||
<Table.Tbody>
|
||||
{users.map((user) => (
|
||||
<Table.Tr key={user.id} style={{ borderBottom: '1px solid rgba(255,255,255,0.05)' }} onClick={()=>{handleEditOpen(user)}}>
|
||||
<Table.Tr
|
||||
key={user.id}
|
||||
style={{ cursor: 'pointer' }}
|
||||
onClick={() => handleEditOpen(user)}
|
||||
>
|
||||
<Table.Td>
|
||||
<Group gap="md" wrap="nowrap">
|
||||
<Avatar
|
||||
@@ -680,15 +658,15 @@ function UsersIndexPage() {
|
||||
radius="md"
|
||||
variant="light"
|
||||
color={getRoleColor(user.role)}
|
||||
style={{ border: '1px solid rgba(255,255,255,0.1)', flexShrink: 0 }}
|
||||
style={{ flexShrink: 0 }}
|
||||
>
|
||||
{user.name.charAt(0)}
|
||||
</Avatar>
|
||||
<Stack gap={2} style={{ overflow: 'hidden' }}>
|
||||
<Text fw={700} size="sm" truncate="end" style={{ color: 'var(--mantine-color-white)' }}>{user.name}</Text>
|
||||
<Text fw={700} size="sm" truncate="end">{user.name}</Text>
|
||||
<Group gap={4} wrap="nowrap">
|
||||
<TbId size={12} color="var(--mantine-color-dimmed)" />
|
||||
<Text size="xs" c="dimmed" style={{ letterSpacing: '0.5px' }} truncate="end">{user.nik}</Text>
|
||||
<Text size="xs" c="dimmed" truncate="end">{user.nik}</Text>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Group>
|
||||
@@ -727,11 +705,10 @@ function UsersIndexPage() {
|
||||
</Table.Td>
|
||||
<Table.Td>
|
||||
<Badge
|
||||
variant="filled"
|
||||
variant="light"
|
||||
color={getRoleColor(user.role)}
|
||||
radius="md"
|
||||
size="sm"
|
||||
fullWidth={false}
|
||||
styles={{ root: { textTransform: 'uppercase', fontWeight: 800, whiteSpace: 'nowrap' } }}
|
||||
>
|
||||
{user.role}
|
||||
@@ -740,11 +717,15 @@ function UsersIndexPage() {
|
||||
<Table.Td>
|
||||
<Stack gap={4}>
|
||||
<Group gap="xs" wrap="nowrap">
|
||||
{user.isActive ? (
|
||||
<Box style={{ width: 8, height: 8, borderRadius: '50%', background: '#10b981', boxShadow: '0 0 8px #10b981' }} />
|
||||
) : (
|
||||
<Box style={{ width: 8, height: 8, borderRadius: '50%', background: '#ef4444' }} />
|
||||
)}
|
||||
<Box
|
||||
style={{
|
||||
width: 8,
|
||||
height: 8,
|
||||
borderRadius: '50%',
|
||||
background: user.isActive ? '#10b981' : '#ef4444',
|
||||
boxShadow: user.isActive ? '0 0 8px #10b981' : undefined,
|
||||
}}
|
||||
/>
|
||||
<Text size="xs" fw={800} c={user.isActive ? 'teal.4' : 'red.5'}>
|
||||
{user.isActive ? 'ACTIVE' : 'INACTIVE'}
|
||||
</Text>
|
||||
@@ -765,11 +746,12 @@ function UsersIndexPage() {
|
||||
)}
|
||||
|
||||
{!isLoading && !error && response?.data?.totalPage > 0 && (
|
||||
<Group justify="center" mt="xl">
|
||||
<Group justify="center">
|
||||
<Pagination
|
||||
value={page}
|
||||
onChange={setPage}
|
||||
total={response.data.totalPage}
|
||||
size="sm"
|
||||
radius="md"
|
||||
withEdges={false}
|
||||
siblings={1}
|
||||
|
||||
Reference in New Issue
Block a user