upd: connected api monitoring

Deskripsi:
- list user
- tampilan page list user

No Issues

src/frontend/config/api.ts

@@ -9,4 +9,6 @@ export const API_URLS = {
     `${API_BASE_URL}/api/monitoring/grid-villages?id=${id}`,
   graphLogVillages: (id: string, time: string) => 
     `${API_BASE_URL}/api/monitoring/graph-log-villages?id=${id}&time=${time}`,
+  getUsers: (page: number, search: string) => 
+    `${API_BASE_URL}/api/monitoring/user?page=${page}&search=${encodeURIComponent(search)}`,
 }

src/frontend/config/appMenus.ts

@@ -1,5 +1,5 @@
 import { IconType } from 'react-icons'
-import { TbChartBar, TbHistory, TbAlertTriangle, TbSettings, TbShoppingCart, TbPackage, TbCreditCard, TbBuilding } from 'react-icons/tb'
+import { TbAlertTriangle, TbBuilding, TbChartBar, TbCreditCard, TbHistory, TbPackage, TbShoppingCart, TbUsers } from 'react-icons/tb'
 
 export interface MenuItem {
   value: string
@@ -23,6 +23,7 @@ export const APP_CONFIGS: Record<string, AppConfig> = {
       { value: 'logs', label: 'Log Activity', icon: TbHistory, to: '/apps/desa-plus/logs' },
       { value: 'errors', label: 'Error Reports', icon: TbAlertTriangle, to: '/apps/desa-plus/errors' },
       { value: 'villages', label: 'Villages', icon: TbBuilding, to: '/apps/desa-plus/villages' },
+      { value: 'users', label: 'Users', icon: TbUsers, to: '/apps/desa-plus/users' },
     ],
   },
   'e-commerce': {

src/frontend/routes/apps.$appId.users.index.tsx

@@ -0,0 +1,297 @@
+import { useState } from 'react'
+import useSWR from 'swr'
+import {
+  Badge,
+  Container,
+  Group,
+  Stack,
+  Text,
+  Title,
+  Paper,
+  Button,
+  ActionIcon,
+  TextInput,
+  Table,
+  Avatar,
+  Box,
+  Pagination,
+  ThemeIcon,
+  ScrollArea,
+  Tooltip,
+} from '@mantine/core'
+import { useMediaQuery } from '@mantine/hooks'
+import { createFileRoute, useParams } from '@tanstack/react-router'
+import {
+  TbPlus,
+  TbSearch,
+  TbUsers,
+  TbX,
+  TbMail,
+  TbPhone,
+  TbId,
+  TbBriefcase,
+  TbHome2,
+  TbCircleCheck,
+  TbCircleX,
+} from 'react-icons/tb'
+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
+  isWithoutOTP: boolean
+  isActive: boolean
+  role: string
+  village: string
+  group: string
+  position?: string
+}
+
+const fetcher = (url: string) => fetch(url).then((res) => res.json())
+
+function UsersIndexPage() {
+  const { appId } = useParams({ from: '/apps/$appId/users/' })
+  const [page, setPage] = useState(1)
+  const [search, setSearch] = useState('')
+  const [searchQuery, setSearchQuery] = useState('')
+
+  const isDesaPlus = appId === 'desa-plus'
+  const apiUrl = isDesaPlus ? API_URLS.getUsers(page, searchQuery) : null
+
+  const { data: response, error, isLoading } = useSWR(apiUrl, fetcher)
+  const users: APIUser[] = response?.data?.user || []
+
+  const handleSearchChange = (val: string) => {
+    setSearch(val)
+    if (val.length >= 3 || val.length === 0) {
+      setSearchQuery(val)
+      setPage(1)
+    }
+  }
+
+  const handleClearSearch = () => {
+    setSearch('')
+    setSearchQuery('')
+    setPage(1)
+  }
+
+  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)')
+
+  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>
+    )
+  }
+
+  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"
+            >
+              Add User
+            </Button>
+          </Group>
+
+          <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)}
+            radius="md"
+            style={{ maxWidth: 500 }}
+            ml={40}
+          />
+        </Stack>
+      </Paper>
+
+      {isLoading ? (
+        <Paper p="xl" radius="xl" withBorder style={{ textAlign: 'center' }}>
+          <Text c="dimmed">Loading user data...</Text>
+        </Paper>
+      ) : error ? (
+        <Paper p="xl" radius="xl" withBorder style={{ textAlign: 'center' }}>
+          <Text c="red">Failed to load data from API.</Text>
+        </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>
+      ) : (
+        <Paper withBorder radius="2xl" className="glass" style={{ overflow: 'hidden' }}>
+          <ScrollArea h={isMobile ? undefined : 'auto'} offsetScrollbars>
+            <Table 
+              verticalSpacing="lg" 
+              horizontalSpacing="xl" 
+              highlightOnHover 
+              withColumnBorders={false}
+              style={{ 
+                tableLayout: isMobile ? 'auto' : 'fixed', 
+                width: '100%',
+                minWidth: isMobile ? 900 : 'unset'
+              }}
+            >
+              <Table.Thead bg="rgba(0,0,0,0.05)">
+                <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 : '25%' }}>Organization</Table.Th>
+                  <Table.Th style={{ border: 'none', width: isMobile ? undefined : '12%' }}>Role</Table.Th>
+                  <Table.Th style={{ border: 'none', 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)' }}>
+                    <Table.Td>
+                      <Group gap="md" wrap="nowrap">
+                        <Avatar 
+                          size="lg" 
+                          radius="md" 
+                          variant="light"
+                          color={getRoleColor(user.role)}
+                          style={{ border: '1px solid rgba(255,255,255,0.1)', 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>
+                          <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>
+                          </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="filled" 
+                        color={getRoleColor(user.role)} 
+                        radius="md" 
+                        size="sm"
+                        fullWidth={false}
+                        styles={{ root: { textTransform: 'uppercase', fontWeight: 800, whiteSpace: 'nowrap' } }}
+                      >
+                        {user.role}
+                      </Badge>
+                    </Table.Td>
+                    <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' }} />
+                          )}
+                          <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 > 0 && (
+        <Group justify="center" mt="xl">
+          <Pagination
+            value={page}
+            onChange={setPage}
+            total={response.data.totalPage}
+            radius="md"
+            withEdges={false}
+          />
+        </Group>
+      )}
+    </Stack>
+  )
+}

src/frontend/routes/apps.$appId.users.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute, Outlet } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/apps/$appId/users')({
+  component: UsersLayout,
+})
+
+function UsersLayout() {
+  return <Outlet />
+}