feat: server-side filter, village filter, and sortable columns on users page
This commit is contained in:
@@ -9,8 +9,15 @@ export const API_URLS = {
|
||||
`${DESA_PLUS_PROXY}/api/monitoring/grid-villages?id=${id}`,
|
||||
graphLogVillages: (id: string, time: string) =>
|
||||
`${DESA_PLUS_PROXY}/api/monitoring/graph-log-villages?id=${id}&time=${time}`,
|
||||
getUsers: (page: number, search: string) =>
|
||||
`${DESA_PLUS_PROXY}/api/monitoring/user?page=${page}&search=${encodeURIComponent(search)}`,
|
||||
getUsers: (page: number, search: string, isActive?: string, idUserRole?: string, idVillage?: string, orderBy?: string, orderDir?: string) => {
|
||||
const params = new URLSearchParams({ page: String(page), search })
|
||||
if (isActive !== undefined) params.set('isActive', isActive)
|
||||
if (idUserRole) params.set('idUserRole', idUserRole)
|
||||
if (idVillage) params.set('idVillage', idVillage)
|
||||
if (orderBy) params.set('orderBy', orderBy)
|
||||
if (orderDir) params.set('orderDir', orderDir)
|
||||
return `${DESA_PLUS_PROXY}/api/monitoring/user?${params}`
|
||||
},
|
||||
getLogsAllVillages: (page: number, search: string) =>
|
||||
`${DESA_PLUS_PROXY}/api/monitoring/log-all-villages?page=${page}&search=${encodeURIComponent(search)}`,
|
||||
getGridOverview: () => `${DESA_PLUS_PROXY}/api/monitoring/grid-overview`,
|
||||
|
||||
@@ -28,6 +28,9 @@ import { createFileRoute, useParams } from '@tanstack/react-router'
|
||||
import { useEffect, useState } from 'react'
|
||||
import {
|
||||
TbAlertCircle,
|
||||
TbArrowDown,
|
||||
TbArrowsSort,
|
||||
TbArrowUp,
|
||||
TbBriefcase,
|
||||
TbCircleCheck,
|
||||
TbCircleX,
|
||||
@@ -224,22 +227,39 @@ function UsersIndexPage() {
|
||||
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 apiUrl = isDesaPlus ? API_URLS.getUsers(page, searchQuery) : null
|
||||
|
||||
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 || []
|
||||
|
||||
const filteredUsers = users.filter((user) => {
|
||||
if (filterStatus === 'active' && !user.isActive) return false
|
||||
if (filterStatus === 'inactive' && user.isActive) return false
|
||||
if (filterRole && user.role !== filterRole) return false
|
||||
return true
|
||||
})
|
||||
|
||||
const roleFilterOptions = Array.from(new Set(users.map((u) => u.role))).map((r) => ({ value: r, label: r }))
|
||||
|
||||
useEffect(() => {
|
||||
if (debouncedSearch.length >= 3 || debouncedSearch.length === 0) {
|
||||
setSearchQuery(debouncedSearch)
|
||||
@@ -247,6 +267,10 @@ function UsersIndexPage() {
|
||||
}
|
||||
}, [debouncedSearch])
|
||||
|
||||
useEffect(() => {
|
||||
setPage(1)
|
||||
}, [filterStatus, filterRole, filterVillageId])
|
||||
|
||||
const handleClearSearch = () => {
|
||||
setSearch('')
|
||||
setSearchQuery('')
|
||||
@@ -291,7 +315,11 @@ function UsersIndexPage() {
|
||||
const targetVillageId = opened ? form.idVillage : editForm.idVillage
|
||||
const targetGroupId = opened ? form.idGroup : editForm.idGroup
|
||||
|
||||
const { data: rolesResp } = useSWR(isAnyModalOpened ? API_URLS.listRole() : null, fetcher)
|
||||
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
|
||||
@@ -306,6 +334,7 @@ function UsersIndexPage() {
|
||||
)
|
||||
|
||||
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 }))
|
||||
@@ -573,9 +602,8 @@ function UsersIndexPage() {
|
||||
|
||||
{/* Search / Filter */}
|
||||
<Paper withBorder p="md" className="glass">
|
||||
<Group gap="sm" align="flex-end" wrap="nowrap">
|
||||
<Stack gap="sm">
|
||||
<TextInput
|
||||
style={{ flex: 1 }}
|
||||
placeholder="Search name, NIK, or email... (min. 3 characters)"
|
||||
leftSection={<TbSearch size={16} />}
|
||||
size="sm"
|
||||
@@ -592,31 +620,44 @@ function UsersIndexPage() {
|
||||
onChange={(e) => setSearch(e.currentTarget.value)}
|
||||
radius="md"
|
||||
/>
|
||||
<Select
|
||||
size="sm"
|
||||
placeholder="Status"
|
||||
data={[
|
||||
{ value: 'active', label: 'Active' },
|
||||
{ value: 'inactive', label: 'Inactive' },
|
||||
]}
|
||||
value={filterStatus}
|
||||
onChange={setFilterStatus}
|
||||
radius="md"
|
||||
clearable
|
||||
w={130}
|
||||
/>
|
||||
<Select
|
||||
size="sm"
|
||||
placeholder="Role"
|
||||
data={roleFilterOptions}
|
||||
value={filterRole}
|
||||
onChange={setFilterRole}
|
||||
radius="md"
|
||||
clearable
|
||||
w={150}
|
||||
disabled={roleFilterOptions.length === 0}
|
||||
/>
|
||||
</Group>
|
||||
<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 ? (
|
||||
@@ -630,12 +671,12 @@ function UsersIndexPage() {
|
||||
<Text size="sm" c="dimmed">Failed to load users from the API.</Text>
|
||||
</Stack>
|
||||
</Paper>
|
||||
) : filteredUsers.length === 0 ? (
|
||||
) : 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 ? 'No users match your filters.' : 'No users found.'}
|
||||
{searchQuery || filterStatus || filterRole || filterVillageId ? 'No users match your filters.' : 'No users found.'}
|
||||
</Text>
|
||||
</Stack>
|
||||
</Paper>
|
||||
@@ -656,15 +697,34 @@ function UsersIndexPage() {
|
||||
>
|
||||
<Table.Thead>
|
||||
<Table.Tr>
|
||||
<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>
|
||||
{[
|
||||
{ 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>
|
||||
{filteredUsers.map((user) => (
|
||||
{users.map((user) => (
|
||||
<Table.Tr
|
||||
key={user.id}
|
||||
style={{ cursor: 'pointer' }}
|
||||
|
||||
Reference in New Issue
Block a user