upd: connected api monitoring
Deskripsi: - list user - tampilan page list user No Issues
This commit is contained in:
@@ -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)}`,
|
||||
}
|
||||
|
||||
@@ -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': {
|
||||
|
||||
297
src/frontend/routes/apps.$appId.users.index.tsx
Normal file
297
src/frontend/routes/apps.$appId.users.index.tsx
Normal file
@@ -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>
|
||||
)
|
||||
}
|
||||
9
src/frontend/routes/apps.$appId.users.tsx
Normal file
9
src/frontend/routes/apps.$appId.users.tsx
Normal file
@@ -0,0 +1,9 @@
|
||||
import { createFileRoute, Outlet } from '@tanstack/react-router'
|
||||
|
||||
export const Route = createFileRoute('/apps/$appId/users')({
|
||||
component: UsersLayout,
|
||||
})
|
||||
|
||||
function UsersLayout() {
|
||||
return <Outlet />
|
||||
}
|
||||
Reference in New Issue
Block a user