844 lines
27 KiB
TypeScript
844 lines
27 KiB
TypeScript
import {
|
|
ActionIcon,
|
|
Avatar,
|
|
Badge,
|
|
Box,
|
|
Button,
|
|
Divider,
|
|
Group,
|
|
Loader,
|
|
Modal,
|
|
Pagination,
|
|
Paper,
|
|
ScrollArea,
|
|
Select,
|
|
SimpleGrid,
|
|
Stack,
|
|
Switch,
|
|
Table,
|
|
Text,
|
|
TextInput,
|
|
ThemeIcon,
|
|
Title,
|
|
Tooltip,
|
|
} from '@mantine/core'
|
|
import { useDisclosure, useDebouncedValue, useMediaQuery } from '@mantine/hooks'
|
|
import { notifications } from '@mantine/notifications'
|
|
import { createFileRoute, useParams } from '@tanstack/react-router'
|
|
import { useEffect, useState } from 'react'
|
|
import {
|
|
TbAlertCircle,
|
|
TbArrowDown,
|
|
TbArrowsSort,
|
|
TbArrowUp,
|
|
TbBriefcase,
|
|
TbCircleCheck,
|
|
TbCircleX,
|
|
TbHome2,
|
|
TbId,
|
|
TbMail,
|
|
TbPhone,
|
|
TbPlus,
|
|
TbSearch,
|
|
TbUsers,
|
|
TbX,
|
|
} from 'react-icons/tb'
|
|
import useSWR from 'swr'
|
|
import { API_URLS } from '../config/api'
|
|
|
|
export const Route = createFileRoute('/apps/$appId/users/')({
|
|
component: UsersIndexPage,
|
|
})
|
|
|
|
interface APIUser {
|
|
id: string
|
|
name: string
|
|
nik: string
|
|
phone: string
|
|
email: string
|
|
gender: string
|
|
isWithoutOTP: boolean
|
|
isActive: boolean
|
|
isApprover: boolean
|
|
role: string
|
|
village: string
|
|
group: string
|
|
position?: string
|
|
idUserRole: string
|
|
idVillage: string
|
|
idGroup: string
|
|
idPosition: string
|
|
}
|
|
|
|
interface BaseUserForm {
|
|
name: string
|
|
nik: string
|
|
phone: string
|
|
email: string
|
|
gender: string
|
|
idUserRole: string
|
|
idVillage: string
|
|
idGroup: string
|
|
idPosition: string
|
|
}
|
|
|
|
const FIELD_LABELS: Record<string, string> = {
|
|
name: 'Full Name',
|
|
nik: 'NIK',
|
|
phone: 'Phone Number',
|
|
email: 'Email Address',
|
|
gender: 'Gender',
|
|
idUserRole: 'User Role',
|
|
idVillage: 'Village',
|
|
idGroup: 'Group',
|
|
}
|
|
|
|
const REQUIRED_FIELDS = ['name', 'nik', 'phone', 'email', 'gender', 'idUserRole', 'idVillage', 'idGroup']
|
|
|
|
const fetcher = (url: string) => fetch(url).then((res) => res.json())
|
|
|
|
interface UserFormFieldsProps {
|
|
values: BaseUserForm
|
|
onChange: (updates: Partial<BaseUserForm>) => void
|
|
villageSearch: string
|
|
onVillageSearchChange: (v: string) => void
|
|
rolesOptions: { value: string; label: string }[]
|
|
villagesOptions: { value: string; label: string }[]
|
|
groupsOptions: { value: string; label: string }[]
|
|
positionsOptions: { value: string; label: string }[]
|
|
}
|
|
|
|
function UserFormFields({
|
|
values,
|
|
onChange,
|
|
onVillageSearchChange,
|
|
rolesOptions,
|
|
villagesOptions,
|
|
groupsOptions,
|
|
positionsOptions,
|
|
}: UserFormFieldsProps) {
|
|
return (
|
|
<>
|
|
<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={values.name}
|
|
onChange={(e) => onChange({ name: e.target.value })}
|
|
/>
|
|
<TextInput
|
|
label="NIK"
|
|
placeholder="16-digit identity number"
|
|
required
|
|
value={values.nik}
|
|
onChange={(e) => onChange({ nik: e.target.value })}
|
|
/>
|
|
</SimpleGrid>
|
|
|
|
<SimpleGrid cols={2} spacing="md" mt="sm">
|
|
<TextInput
|
|
label="Email Address"
|
|
placeholder="email@example.com"
|
|
required
|
|
value={values.email}
|
|
onChange={(e) => onChange({ email: e.target.value })}
|
|
/>
|
|
<TextInput
|
|
label="Phone Number"
|
|
placeholder="628xxxxxxxxxx"
|
|
required
|
|
value={values.phone}
|
|
onChange={(e) => onChange({ phone: e.target.value })}
|
|
/>
|
|
</SimpleGrid>
|
|
|
|
<Select
|
|
label="Gender"
|
|
placeholder="Select gender"
|
|
data={[
|
|
{ value: 'M', label: 'Male' },
|
|
{ value: 'F', label: 'Female' },
|
|
]}
|
|
mt="sm"
|
|
required
|
|
value={values.gender}
|
|
onChange={(v) => onChange({ gender: v || '' })}
|
|
/>
|
|
</Box>
|
|
|
|
<Divider label="Role & Organization" labelPosition="center" my="sm" />
|
|
|
|
<Box>
|
|
<Select
|
|
label="User Role"
|
|
placeholder="Select user role"
|
|
data={rolesOptions}
|
|
required
|
|
value={values.idUserRole}
|
|
onChange={(v) => onChange({ idUserRole: v || '' })}
|
|
/>
|
|
|
|
<Select
|
|
label="Village"
|
|
placeholder="Type to search village..."
|
|
searchable
|
|
onSearchChange={onVillageSearchChange}
|
|
data={villagesOptions}
|
|
mt="sm"
|
|
required
|
|
value={values.idVillage}
|
|
onChange={(v) => onChange({ idVillage: v || '', idGroup: '', idPosition: '' })}
|
|
/>
|
|
|
|
<SimpleGrid cols={2} spacing="md" mt="sm">
|
|
<Select
|
|
label="Group"
|
|
placeholder={values.idVillage ? 'Select group' : 'Select village first'}
|
|
data={groupsOptions}
|
|
disabled={!values.idVillage}
|
|
required
|
|
value={values.idGroup}
|
|
onChange={(v) => onChange({ idGroup: v || '', idPosition: '' })}
|
|
/>
|
|
<Select
|
|
label="Position"
|
|
placeholder={values.idGroup ? 'Select position' : 'Select group first'}
|
|
data={positionsOptions}
|
|
disabled={!values.idGroup}
|
|
value={values.idPosition || ''}
|
|
onChange={(v) => onChange({ idPosition: v || '' })}
|
|
/>
|
|
</SimpleGrid>
|
|
</Box>
|
|
</>
|
|
)
|
|
}
|
|
|
|
function UsersIndexPage() {
|
|
const { appId } = useParams({ from: '/apps/$appId/users/' })
|
|
const [page, setPage] = useState(1)
|
|
const [search, setSearch] = useState('')
|
|
const [searchQuery, setSearchQuery] = useState('')
|
|
const [debouncedSearch] = useDebouncedValue(search, 400)
|
|
const [filterStatus, setFilterStatus] = useState<string | null>(null)
|
|
const [filterRole, setFilterRole] = useState<string | null>(null)
|
|
const [filterVillageSearch, setFilterVillageSearch] = useState('')
|
|
const [filterVillageId, setFilterVillageId] = useState<string | null>(null)
|
|
const [sortBy, setSortBy] = useState<string | null>(null)
|
|
const [sortDir, setSortDir] = useState<'asc' | 'desc'>('asc')
|
|
|
|
const handleSort = (col: string) => {
|
|
if (sortBy === col) {
|
|
setSortDir((d) => (d === 'asc' ? 'desc' : 'asc'))
|
|
} else {
|
|
setSortBy(col)
|
|
setSortDir('asc')
|
|
}
|
|
setPage(1)
|
|
}
|
|
|
|
const isDesaPlus = appId === 'desa-plus'
|
|
|
|
const filterStatusParam = filterStatus === 'active' ? 'true' : filterStatus === 'inactive' ? 'false' : undefined
|
|
const apiUrl = isDesaPlus
|
|
? API_URLS.getUsers(
|
|
page,
|
|
searchQuery,
|
|
filterStatusParam,
|
|
filterRole ?? undefined,
|
|
filterVillageId ?? undefined,
|
|
sortBy ?? undefined,
|
|
sortBy ? sortDir : undefined,
|
|
)
|
|
: null
|
|
|
|
const { data: response, error, isLoading, mutate } = useSWR(apiUrl, fetcher)
|
|
const users: APIUser[] = response?.data?.user || []
|
|
|
|
useEffect(() => {
|
|
if (debouncedSearch.length >= 3 || debouncedSearch.length === 0) {
|
|
setSearchQuery(debouncedSearch)
|
|
setPage(1)
|
|
}
|
|
}, [debouncedSearch])
|
|
|
|
useEffect(() => {
|
|
setPage(1)
|
|
}, [filterStatus, filterRole, filterVillageId])
|
|
|
|
const handleClearSearch = () => {
|
|
setSearch('')
|
|
setSearchQuery('')
|
|
setPage(1)
|
|
}
|
|
|
|
// --- ADD USER LOGIC ---
|
|
const [opened, { open, close }] = useDisclosure(false)
|
|
const [isSubmitting, setIsSubmitting] = useState(false)
|
|
const [villageSearch, setVillageSearch] = useState('')
|
|
const [form, setForm] = useState<BaseUserForm>({
|
|
name: '',
|
|
nik: '',
|
|
phone: '',
|
|
email: '',
|
|
gender: '',
|
|
idUserRole: '',
|
|
idVillage: '',
|
|
idGroup: '',
|
|
idPosition: '',
|
|
})
|
|
|
|
const [editOpened, { open: openEdit, close: closeEdit }] = useDisclosure(false)
|
|
const [editForm, setEditForm] = useState({
|
|
id: '',
|
|
name: '',
|
|
nik: '',
|
|
phone: '',
|
|
email: '',
|
|
gender: '',
|
|
idUserRole: '',
|
|
idVillage: '',
|
|
idGroup: '',
|
|
idPosition: '',
|
|
isActive: true,
|
|
isWithoutOTP: false,
|
|
isApprover: false,
|
|
})
|
|
|
|
// Options Data (Shared for both Add and Edit modals)
|
|
const isAnyModalOpened = opened || editOpened
|
|
const targetVillageId = opened ? form.idVillage : editForm.idVillage
|
|
const targetGroupId = opened ? form.idGroup : editForm.idGroup
|
|
|
|
const { data: rolesResp } = useSWR(isDesaPlus ? API_URLS.listRole() : null, fetcher)
|
|
const { data: filterVillagesResp } = useSWR(
|
|
isDesaPlus && filterVillageSearch.length >= 1 ? API_URLS.getVillages(1, filterVillageSearch) : null,
|
|
fetcher
|
|
)
|
|
const { data: villagesResp } = useSWR(
|
|
isAnyModalOpened && villageSearch.length >= 1 ? API_URLS.getVillages(1, villageSearch) : null,
|
|
fetcher
|
|
)
|
|
const { data: groupsResp } = useSWR(
|
|
isAnyModalOpened && targetVillageId ? API_URLS.listGroup(targetVillageId) : null,
|
|
fetcher
|
|
)
|
|
const { data: positionsResp } = useSWR(
|
|
isAnyModalOpened && targetGroupId ? API_URLS.listPosition(targetGroupId) : null,
|
|
fetcher
|
|
)
|
|
|
|
const rolesOptions = (rolesResp?.data || []).map((r: any) => ({ value: r.id, label: r.name }))
|
|
const filterVillagesOptions = (filterVillagesResp?.data || []).map((v: any) => ({ value: v.id, label: v.name }))
|
|
const villagesOptions = (villagesResp?.data || []).map((v: any) => ({ value: v.id, label: v.name }))
|
|
const groupsOptions = (groupsResp?.data || []).map((g: any) => ({ value: g.id, label: g.name }))
|
|
const positionsOptions = (positionsResp?.data || []).map((p: any) => ({ value: p.id, label: p.name }))
|
|
|
|
const getMissingFields = (data: BaseUserForm) =>
|
|
REQUIRED_FIELDS.filter((f) => !data[f as keyof BaseUserForm]).map((f) => FIELD_LABELS[f] ?? f)
|
|
|
|
const handleCreateUser = async () => {
|
|
const missing = getMissingFields(form)
|
|
if (missing.length > 0) {
|
|
notifications.show({
|
|
title: 'Validation Error',
|
|
message: `Please fill in: ${missing.join(', ')}`,
|
|
color: 'red',
|
|
})
|
|
return
|
|
}
|
|
|
|
setIsSubmitting(true)
|
|
try {
|
|
const res = await fetch(API_URLS.createUser(), {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(form),
|
|
})
|
|
|
|
const result = await res.json()
|
|
|
|
if (result.success) {
|
|
await fetch(API_URLS.createLog(), {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ type: 'CREATE', message: `New user registered (${appId}): ${form.name} - ${form.nik}` }),
|
|
}).catch(console.error)
|
|
|
|
notifications.show({
|
|
title: 'Success',
|
|
message: 'User has been created successfully.',
|
|
color: 'teal',
|
|
icon: <TbCircleCheck size={18} />,
|
|
})
|
|
mutate()
|
|
close()
|
|
setForm({ name: '', nik: '', phone: '', email: '', gender: '', idUserRole: '', idVillage: '', idGroup: '', idPosition: '' })
|
|
} else {
|
|
notifications.show({
|
|
title: 'Error',
|
|
message: result.message || 'Failed to create user.',
|
|
color: 'red',
|
|
icon: <TbCircleX size={18} />,
|
|
})
|
|
}
|
|
} catch {
|
|
notifications.show({ title: 'Network Error', message: 'Unable to connect to the server.', color: 'red' })
|
|
} finally {
|
|
setIsSubmitting(false)
|
|
}
|
|
}
|
|
|
|
const handleEditOpen = (user: APIUser) => {
|
|
setEditForm({
|
|
id: user.id,
|
|
name: user.name,
|
|
nik: user.nik,
|
|
phone: user.phone,
|
|
email: user.email,
|
|
gender: user.gender,
|
|
idUserRole: user.idUserRole,
|
|
idVillage: user.idVillage,
|
|
idGroup: user.idGroup,
|
|
idPosition: user.idPosition,
|
|
isActive: user.isActive,
|
|
isWithoutOTP: user.isWithoutOTP,
|
|
isApprover: user.isApprover,
|
|
})
|
|
setVillageSearch(user.village)
|
|
openEdit()
|
|
}
|
|
|
|
const handleUpdateUser = async () => {
|
|
const missing = getMissingFields(editForm)
|
|
if (missing.length > 0) {
|
|
notifications.show({
|
|
title: 'Validation Error',
|
|
message: `Please fill in: ${missing.join(', ')}`,
|
|
color: 'red',
|
|
})
|
|
return
|
|
}
|
|
|
|
setIsSubmitting(true)
|
|
try {
|
|
const res = await fetch(API_URLS.editUser(), {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(editForm),
|
|
})
|
|
|
|
const result = await res.json()
|
|
|
|
if (result.success) {
|
|
await fetch(API_URLS.createLog(), {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ type: 'UPDATE', message: `User updated (${appId}): ${editForm.name} - ${editForm.id}` }),
|
|
}).catch(console.error)
|
|
|
|
notifications.show({
|
|
title: 'Success',
|
|
message: 'User has been updated successfully.',
|
|
color: 'teal',
|
|
icon: <TbCircleCheck size={18} />,
|
|
})
|
|
mutate()
|
|
closeEdit()
|
|
} else {
|
|
notifications.show({
|
|
title: 'Error',
|
|
message: result.message || 'Failed to update user.',
|
|
color: 'red',
|
|
icon: <TbCircleX size={18} />,
|
|
})
|
|
}
|
|
} catch {
|
|
notifications.show({ title: 'Network Error', message: 'Unable to connect to the server.', color: 'red' })
|
|
} finally {
|
|
setIsSubmitting(false)
|
|
}
|
|
}
|
|
|
|
const getRoleColor = (role: string) => {
|
|
const r = role.toLowerCase()
|
|
if (r.includes('super')) return 'red'
|
|
if (r.includes('admin')) return 'brand-blue'
|
|
if (r.includes('developer')) return 'violet'
|
|
return 'gray'
|
|
}
|
|
|
|
const isMobile = useMediaQuery('(max-width: 768px)')
|
|
|
|
const sharedFormProps = {
|
|
villageSearch,
|
|
onVillageSearchChange: setVillageSearch,
|
|
rolesOptions,
|
|
villagesOptions,
|
|
groupsOptions,
|
|
positionsOptions,
|
|
}
|
|
|
|
if (!isDesaPlus) {
|
|
return (
|
|
<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">
|
|
{/* 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">
|
|
<UserFormFields
|
|
values={form}
|
|
onChange={(updates) => setForm((f) => ({ ...f, ...updates }))}
|
|
{...sharedFormProps}
|
|
/>
|
|
|
|
<Button
|
|
fullWidth
|
|
mt="lg"
|
|
radius="md"
|
|
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">
|
|
<UserFormFields
|
|
values={editForm}
|
|
onChange={(updates) => setEditForm((f) => ({ ...f, ...updates }))}
|
|
{...sharedFormProps}
|
|
/>
|
|
|
|
<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 }))}
|
|
/>
|
|
<Switch
|
|
label="Approver"
|
|
description="Grant approver privileges to this user"
|
|
checked={editForm.isApprover}
|
|
onChange={(event) => setEditForm((f) => ({ ...f, isApprover: 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">
|
|
<Stack gap="sm">
|
|
<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) => setSearch(e.currentTarget.value)}
|
|
radius="md"
|
|
/>
|
|
<Group gap="sm" wrap="nowrap">
|
|
<Select
|
|
size="sm"
|
|
placeholder="Status"
|
|
data={[
|
|
{ value: 'active', label: 'Active' },
|
|
{ value: 'inactive', label: 'Inactive' },
|
|
]}
|
|
value={filterStatus}
|
|
onChange={setFilterStatus}
|
|
radius="md"
|
|
clearable
|
|
style={{ flex: 1 }}
|
|
/>
|
|
<Select
|
|
size="sm"
|
|
placeholder="Role"
|
|
data={rolesOptions}
|
|
value={filterRole}
|
|
onChange={setFilterRole}
|
|
radius="md"
|
|
clearable
|
|
style={{ flex: 1 }}
|
|
/>
|
|
<Select
|
|
size="sm"
|
|
placeholder="Search village..."
|
|
searchable
|
|
onSearchChange={setFilterVillageSearch}
|
|
data={filterVillagesOptions}
|
|
value={filterVillageId}
|
|
onChange={setFilterVillageId}
|
|
radius="md"
|
|
clearable
|
|
style={{ flex: 1 }}
|
|
/>
|
|
</Group>
|
|
</Stack>
|
|
</Paper>
|
|
|
|
{isLoading ? (
|
|
<Group justify="center" py="xl">
|
|
<Loader type="dots" />
|
|
</Group>
|
|
) : error ? (
|
|
<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 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 || filterStatus || filterRole || filterVillageId ? 'No users match your filters.' : '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
|
|
withColumnBorders={false}
|
|
style={{
|
|
tableLayout: isMobile ? 'auto' : 'fixed',
|
|
width: '100%',
|
|
minWidth: isMobile ? 900 : 'unset',
|
|
}}
|
|
>
|
|
<Table.Thead>
|
|
<Table.Tr>
|
|
{[
|
|
{ label: 'User & ID', col: 'name', width: '28%' },
|
|
{ label: 'Contact', col: null, width: '25%' },
|
|
{ label: 'Organization', col: null, width: '22%' },
|
|
{ label: 'Role', col: 'idUserRole', width: '15%' },
|
|
{ label: 'Status', col: 'isActive', width: '10%' },
|
|
].map(({ label, col, width }) => (
|
|
<Table.Th
|
|
key={label}
|
|
style={{ width: isMobile ? undefined : width, cursor: col ? 'pointer' : undefined, userSelect: 'none' }}
|
|
onClick={col ? () => handleSort(col) : undefined}
|
|
>
|
|
<Group gap={4} wrap="nowrap">
|
|
<span>{label}</span>
|
|
{col && (
|
|
sortBy === col
|
|
? sortDir === 'asc'
|
|
? <TbArrowUp size={13} />
|
|
: <TbArrowDown size={13} />
|
|
: <TbArrowsSort size={13} style={{ opacity: 0.35 }} />
|
|
)}
|
|
</Group>
|
|
</Table.Th>
|
|
))}
|
|
</Table.Tr>
|
|
</Table.Thead>
|
|
<Table.Tbody>
|
|
{users.map((user) => (
|
|
<Table.Tr
|
|
key={user.id}
|
|
style={{ cursor: 'pointer' }}
|
|
onClick={() => handleEditOpen(user)}
|
|
>
|
|
<Table.Td>
|
|
<Group gap="md" wrap="nowrap">
|
|
<Avatar
|
|
size="lg"
|
|
radius="md"
|
|
variant="light"
|
|
color={getRoleColor(user.role)}
|
|
style={{ flexShrink: 0 }}
|
|
>
|
|
{user.name.charAt(0)}
|
|
</Avatar>
|
|
<Stack gap={2} style={{ overflow: 'hidden' }}>
|
|
<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" truncate="end">{user.nik}</Text>
|
|
</Group>
|
|
</Stack>
|
|
</Group>
|
|
</Table.Td>
|
|
<Table.Td>
|
|
<Stack gap={4} style={{ overflow: 'hidden' }}>
|
|
<Group gap={8} wrap="nowrap" align="center">
|
|
<ThemeIcon size={18} variant="transparent" color="gray">
|
|
<TbMail size={14} />
|
|
</ThemeIcon>
|
|
<Text size="xs" fw={500} truncate="end">{user.email}</Text>
|
|
</Group>
|
|
<Group gap={8} wrap="nowrap" align="center">
|
|
<ThemeIcon size={18} variant="transparent" color="gray">
|
|
<TbPhone size={14} />
|
|
</ThemeIcon>
|
|
<Text size="xs" c="dimmed" truncate="end">{user.phone}</Text>
|
|
</Group>
|
|
</Stack>
|
|
</Table.Td>
|
|
<Table.Td>
|
|
<Stack gap={4}>
|
|
<Group gap={8} wrap="nowrap" align="center">
|
|
<ThemeIcon size={18} variant="light" color="blue" radius="sm">
|
|
<TbHome2 size={12} />
|
|
</ThemeIcon>
|
|
<Text size="xs" fw={700} truncate="end">{user.village}</Text>
|
|
</Group>
|
|
<Group gap={8} wrap="nowrap" align="center">
|
|
<ThemeIcon size={18} variant="transparent" color="gray">
|
|
<TbBriefcase size={12} />
|
|
</ThemeIcon>
|
|
<Text size="xs" c="dimmed" truncate="end">{user.group} · {user.position || 'Staff'}</Text>
|
|
</Group>
|
|
</Stack>
|
|
</Table.Td>
|
|
<Table.Td>
|
|
<Badge
|
|
variant="light"
|
|
color={getRoleColor(user.role)}
|
|
radius="md"
|
|
size="sm"
|
|
styles={{ root: { textTransform: 'uppercase', fontWeight: 800, whiteSpace: 'nowrap' } }}
|
|
>
|
|
{user.role}
|
|
</Badge>
|
|
</Table.Td>
|
|
<Table.Td>
|
|
<Stack gap={4}>
|
|
<Group gap="xs" wrap="nowrap">
|
|
<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>
|
|
</Group>
|
|
{user.isWithoutOTP && (
|
|
<Badge variant="light" color="orange" size="xs" radius="sm">
|
|
NO OTP
|
|
</Badge>
|
|
)}
|
|
</Stack>
|
|
</Table.Td>
|
|
</Table.Tr>
|
|
))}
|
|
</Table.Tbody>
|
|
</Table>
|
|
</ScrollArea>
|
|
</Paper>
|
|
)}
|
|
|
|
{!isLoading && !error && response?.data?.totalPage > 1 && (
|
|
<Group justify="center">
|
|
<Pagination
|
|
value={page}
|
|
onChange={setPage}
|
|
total={response.data.totalPage}
|
|
size="sm"
|
|
radius="md"
|
|
withEdges={false}
|
|
siblings={1}
|
|
boundaries={1}
|
|
/>
|
|
</Group>
|
|
)}
|
|
</Stack>
|
|
)
|
|
}
|