2026-05-22 17:40:31 +08:00
2 changed files with 335 additions and 258 deletions
--- a/src/frontend/config/api.ts
+++ b/src/frontend/config/api.ts
@@ -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`,
--- a/src/frontend/routes/apps.$appId.users.index.tsx
+++ b/src/frontend/routes/apps.$appId.users.index.tsx
@@ -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' }}