feat: tambah filter inactive since di halaman user management

2026-05-28 14:32:56 +08:00
parent 75d2ef5b4c
commit 0e2c97df47
2 changed files with 80 additions and 44 deletions
--- a/src/frontend/config/api.ts
+++ b/src/frontend/config/api.ts
@@ -33,6 +33,11 @@ export const API_URLS = {
    return `${DESA_PLUS_PROXY}/api/monitoring/log-all-villages?${params}`
  },
  getStaleVillages: (days: 7 | 14 | 30 = 7) => `${DESA_PLUS_PROXY}/api/monitoring/stale-villages?days=${days}`,
+  getInactiveUsers: (days: 7 | 14 | 30 = 7, idVillage?: string, page = 1) => {
+    const params = new URLSearchParams({ days: String(days), page: String(page) })
+    if (idVillage) params.set('idVillage', idVillage)
+    return `${DESA_PLUS_PROXY}/api/monitoring/inactive-users?${params}`
+  },
  getGridOverview: () => `${DESA_PLUS_PROXY}/api/monitoring/grid-overview`,
  getDailyActivity: (range: 7 | 30 | 90 = 7) => `${DESA_PLUS_PROXY}/api/monitoring/daily-activity?range=${range}`,
  getComparisonActivity: (range: 7 | 30 | 90 = 7) => `${DESA_PLUS_PROXY}/api/monitoring/comparison-activity?range=${range}`,
--- a/src/frontend/routes/apps.$appId.users.index.tsx
+++ b/src/frontend/routes/apps.$appId.users.index.tsx
@@ -240,6 +240,7 @@ function UsersIndexPage() {
  const [filterRole, setFilterRole] = useState<string | null>(null)
  const [filterVillageSearch, setFilterVillageSearch] = useState('')
  const [filterVillageId, setFilterVillageId] = useState<string | null>(null)
+  const [filterInactiveDays, setFilterInactiveDays] = useState<string | null>(null)
  const [sortBy, setSortBy] = useState<string | null>(null)
  const [sortDir, setSortDir] = useState<'asc' | 'desc'>('asc')

@@ -254,22 +255,21 @@ function UsersIndexPage() {
  }

  const isDesaPlus = appId === 'desa-plus'
+  const isInactiveMode = !!filterInactiveDays

  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,
-      )
+    ? isInactiveMode
+      ? API_URLS.getInactiveUsers(Number(filterInactiveDays) as 7 | 14 | 30, filterVillageId ?? undefined, page)
+      : 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 users: APIUser[] = isInactiveMode
+    ? (response?.data?.users || [])
+    : (response?.data?.user || [])
+  const totalPages = response?.data?.totalPage ?? 0
+  const totalUsers = response?.data?.total ?? 0

  useEffect(() => {
    if (debouncedSearch.length >= 3 || debouncedSearch.length === 0) {
@@ -280,7 +280,7 @@ function UsersIndexPage() {

  useEffect(() => {
    setPage(1)
-  }, [filterStatus, filterRole, filterVillageId])
+  }, [filterStatus, filterRole, filterVillageId, filterInactiveDays])

  const handleClearSearch = () => {
    setSearch('')
@@ -524,7 +524,6 @@ function UsersIndexPage() {
            onChange={(updates) => setForm((f) => ({ ...f, ...updates }))}
            {...sharedFormProps}
          />
-
          <Button
            fullWidth
            mt="lg"
@@ -597,7 +596,11 @@ function UsersIndexPage() {
        <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`}
+            {isLoading
+              ? 'Loading users...'
+              : isInactiveMode
+                ? `${totalUsers} users with no activity in the last ${filterInactiveDays} days`
+                : `${totalUsers} users registered in the Desa+ system`}
          </Text>
        </Stack>
        <Button
@@ -611,26 +614,33 @@ function UsersIndexPage() {
        </Button>
      </Group>

-      {/* Search / Filter */}
+      {/* 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"
-          />
+          <Tooltip
+            label="Search is disabled when Inactive filter is active"
+            disabled={!isInactiveMode}
+            withArrow
+          >
+            <TextInput
+              placeholder="Search name, NIK, or email... (min. 3 characters)"
+              leftSection={<TbSearch size={16} />}
+              size="sm"
+              disabled={isInactiveMode}
+              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"
+            />
+          </Tooltip>
          <Group gap="sm" wrap="nowrap">
            <Select
              size="sm"
@@ -643,6 +653,7 @@ function UsersIndexPage() {
              onChange={setFilterStatus}
              radius="md"
              clearable
+              disabled={isInactiveMode}
              style={{ flex: 1 }}
            />
            <Select
@@ -653,6 +664,7 @@ function UsersIndexPage() {
              onChange={setFilterRole}
              radius="md"
              clearable
+              disabled={isInactiveMode}
              style={{ flex: 1 }}
            />
            <Select
@@ -667,6 +679,27 @@ function UsersIndexPage() {
              clearable
              style={{ flex: 1 }}
            />
+            <Select
+              size="sm"
+              placeholder="Inactive since..."
+              data={[
+                { value: '7', label: 'No activity 7D' },
+                { value: '14', label: 'No activity 14D' },
+                { value: '30', label: 'No activity 30D' },
+              ]}
+              value={filterInactiveDays}
+              onChange={(v) => {
+                setFilterInactiveDays(v)
+                setFilterStatus(null)
+                setFilterRole(null)
+                setSearch('')
+                setSearchQuery('')
+                setPage(1)
+              }}
+              radius="md"
+              clearable
+              style={{ flex: 1 }}
+            />
          </Group>
        </Stack>
      </Paper>
@@ -687,7 +720,11 @@ function UsersIndexPage() {
          <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.'}
+              {isInactiveMode
+                ? `No users with ${filterInactiveDays}+ days of inactivity.`
+                : searchQuery || filterStatus || filterRole || filterVillageId
+                  ? 'No users match your filters.'
+                  : 'No users found.'}
            </Text>
          </Stack>
        </Paper>
@@ -718,12 +755,12 @@ function UsersIndexPage() {
                  ].map(({ label, col, width }) => (
                    <Table.Th
                      key={label}
-                      style={{ width: isMobile ? undefined : width, cursor: col ? 'pointer' : undefined, userSelect: 'none' }}
-                      onClick={col ? () => handleSort(col) : undefined}
+                      style={{ width: isMobile ? undefined : width, cursor: col && !isInactiveMode ? 'pointer' : undefined, userSelect: 'none' }}
+                      onClick={col && !isInactiveMode ? () => handleSort(col) : undefined}
                    >
                      <Group gap={4} wrap="nowrap">
                        <span>{label}</span>
-                        {col && (
+                        {col && !isInactiveMode && (
                          sortBy === col
                            ? sortDir === 'asc'
                              ? <TbArrowUp size={13} />
@@ -744,13 +781,7 @@ function UsersIndexPage() {
                  >
                    <Table.Td>
                      <Group gap="md" wrap="nowrap">
-                        <Avatar
-                          size="lg"
-                          radius="md"
-                          variant="light"
-                          color={getRoleColor(user.role)}
-                          style={{ flexShrink: 0 }}
-                        >
+                        <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' }}>
@@ -847,12 +878,12 @@ function UsersIndexPage() {
        </Paper>
      )}

-      {!isLoading && !error && response?.data?.totalPage > 1 && (
+      {!isLoading && !error && totalPages > 1 && (
        <Group justify="center">
          <Pagination
            value={page}
            onChange={setPage}
-            total={response.data.totalPage}
+            total={totalPages}
            size="sm"
            radius="md"
            withEdges={false}