upd: menu dashboard
Deskripsi: - connected to database No Issues
This commit is contained in:
42
src/app.ts
42
src/app.ts
@@ -154,18 +154,38 @@ export function createApp() {
|
||||
})
|
||||
|
||||
// ─── Monitoring API ────────────────────────────────
|
||||
.get('/api/dashboard/stats', () => ({
|
||||
totalApps: 3,
|
||||
newErrors: 185,
|
||||
activeUsers: '24.5k',
|
||||
trends: { totalApps: 1, newErrors: 12, activeUsers: 5.2 }
|
||||
}))
|
||||
.get('/api/dashboard/stats', async () => {
|
||||
const newErrors = await prisma.bug.count({ where: { status: 'OPEN' } })
|
||||
const users = await prisma.user.count()
|
||||
return {
|
||||
totalApps: 1,
|
||||
newErrors: newErrors,
|
||||
activeUsers: users,
|
||||
trends: { totalApps: 0, newErrors: 12, activeUsers: 5.2 }
|
||||
}
|
||||
})
|
||||
|
||||
.get('/api/apps', () => [
|
||||
{ id: 'desa-plus', name: 'Desa+', status: 'active', users: 12450, errors: 12, version: '2.4.1' },
|
||||
// { id: 'e-commerce', name: 'E-Commerce', status: 'warning', users: 8900, errors: 45, version: '1.8.0' },
|
||||
// { id: 'fitness-app', name: 'Fitness App', status: 'error', users: 3200, errors: 128, version: '0.9.5' },
|
||||
])
|
||||
.get('/api/dashboard/recent-errors', async () => {
|
||||
const bugs = await prisma.bug.findMany({
|
||||
take: 5,
|
||||
orderBy: { createdAt: 'desc' }
|
||||
})
|
||||
return bugs.map(b => ({
|
||||
id: b.id,
|
||||
app: b.app,
|
||||
message: b.description,
|
||||
version: b.affectedVersion,
|
||||
time: b.createdAt.toISOString(),
|
||||
severity: b.status
|
||||
}))
|
||||
})
|
||||
|
||||
.get('/api/apps', async () => {
|
||||
const desaPlusErrors = await prisma.bug.count({ where: { app: { in: ['desa-plus', 'desa_plus'] }, status: 'OPEN' } })
|
||||
return [
|
||||
{ id: 'desa-plus', name: 'Desa+', status: 'active', users: 12450, errors: desaPlusErrors, version: '2.4.1' },
|
||||
]
|
||||
})
|
||||
|
||||
.get('/api/apps/:appId', ({ params: { appId } }) => {
|
||||
const apps = {
|
||||
|
||||
@@ -36,12 +36,6 @@ export const Route = createFileRoute('/dashboard')({
|
||||
component: DashboardPage,
|
||||
})
|
||||
|
||||
const recentErrors = [
|
||||
{ id: 1, app: 'Desa+', message: 'NullPointerException at village_sync.dart:45', version: '2.4.1', time: '2 mins ago', severity: 'critical' },
|
||||
{ id: 2, app: 'E-Commerce', message: 'Failed to load checkout session', version: '1.8.0', time: '15 mins ago', severity: 'high' },
|
||||
{ id: 3, app: 'Fitness App', message: 'SocketException: Connection timed out', version: '0.9.5', time: '1 hour ago', severity: 'medium' },
|
||||
]
|
||||
|
||||
function DashboardPage() {
|
||||
const { data: sessionData } = useSession()
|
||||
const user = sessionData?.user
|
||||
@@ -56,6 +50,20 @@ function DashboardPage() {
|
||||
queryFn: () => fetch('/api/apps').then((r) => r.json()),
|
||||
})
|
||||
|
||||
const { data: recentErrors = [], isLoading: recentErrorsLoading } = useQuery({
|
||||
queryKey: ['dashboard', 'recent-errors'],
|
||||
queryFn: () => fetch('/api/dashboard/recent-errors').then((r) => r.json()),
|
||||
})
|
||||
|
||||
const formatTimeAgo = (dateStr: string) => {
|
||||
const diff = new Date().getTime() - new Date(dateStr).getTime()
|
||||
const minutes = Math.floor(diff / 60000)
|
||||
if (minutes < 60) return `${minutes || 1} mins ago`
|
||||
const hours = Math.floor(minutes / 60)
|
||||
if (hours < 24) return `${hours} hours ago`
|
||||
return `${Math.floor(hours / 24)} days ago`
|
||||
}
|
||||
|
||||
return (
|
||||
<DashboardLayout>
|
||||
<Container size="xl" py="lg">
|
||||
@@ -86,21 +94,21 @@ function DashboardPage() {
|
||||
value={stats?.totalApps || 0}
|
||||
icon={TbApps}
|
||||
color="brand-blue"
|
||||
trend={{ value: stats?.trends?.totalApps.toString() || '0', positive: true }}
|
||||
// trend={{ value: stats?.trends?.totalApps.toString() || '0', positive: true }}
|
||||
/>
|
||||
<StatsCard
|
||||
title="New Errors"
|
||||
value={stats?.newErrors || 0}
|
||||
icon={TbMessageReport}
|
||||
color="brand-purple"
|
||||
trend={{ value: stats?.trends?.newErrors.toString() || '0', positive: false }}
|
||||
// trend={{ value: stats?.trends?.newErrors.toString() || '0', positive: false }}
|
||||
/>
|
||||
<StatsCard
|
||||
title="Active Users"
|
||||
title="Users"
|
||||
value={stats?.activeUsers || 0}
|
||||
icon={TbUsers}
|
||||
color="teal"
|
||||
trend={{ value: stats?.trends?.activeUsers.toString() || '0', positive: true }}
|
||||
// trend={{ value: stats?.trends?.activeUsers.toString() || '0', positive: true }}
|
||||
/>
|
||||
</SimpleGrid>
|
||||
)}
|
||||
@@ -124,7 +132,7 @@ function DashboardPage() {
|
||||
|
||||
<Group justify="space-between" mt="md">
|
||||
<Title order={3}>Recent Error Reports</Title>
|
||||
<Button variant="subtle" color="brand-blue" rightSection={<TbChevronRight size={16} />}>
|
||||
<Button variant="subtle" color="brand-blue" rightSection={<TbChevronRight size={16} />} component={Link} to="/bug-reports">
|
||||
View All Errors
|
||||
</Button>
|
||||
</Group>
|
||||
@@ -141,23 +149,35 @@ function DashboardPage() {
|
||||
</Table.Tr>
|
||||
</Table.Thead>
|
||||
<Table.Tbody>
|
||||
{recentErrors.map((error) => (
|
||||
{recentErrorsLoading ? (
|
||||
<Table.Tr>
|
||||
<Table.Td colSpan={5} align="center" py="xl">
|
||||
<Loader size="sm" type="dots" />
|
||||
</Table.Td>
|
||||
</Table.Tr>
|
||||
) : recentErrors.length === 0 ? (
|
||||
<Table.Tr>
|
||||
<Table.Td colSpan={5} align="center" py="xl">
|
||||
<Text c="dimmed" size="sm">No recent errors found.</Text>
|
||||
</Table.Td>
|
||||
</Table.Tr>
|
||||
) : recentErrors.map((error: any) => (
|
||||
<Table.Tr key={error.id}>
|
||||
<Table.Td>
|
||||
<Text fw={600} size="sm">{error.app}</Text>
|
||||
<Text fw={600} size="sm" style={{ textTransform: 'uppercase' }}>{error.app}</Text>
|
||||
</Table.Td>
|
||||
<Table.Td>
|
||||
<Text size="sm" c="dimmed">{error.message}</Text>
|
||||
<Text size="sm" c="dimmed" lineClamp={1}>{error.message}</Text>
|
||||
</Table.Td>
|
||||
<Table.Td>
|
||||
<Badge variant="light" color="gray">v{error.version}</Badge>
|
||||
</Table.Td>
|
||||
<Table.Td>
|
||||
<Text size="xs" c="dimmed">{error.time}</Text>
|
||||
<Text size="xs" c="dimmed">{formatTimeAgo(error.time)}</Text>
|
||||
</Table.Td>
|
||||
<Table.Td>
|
||||
<Badge
|
||||
color={error.severity === 'critical' ? 'red' : error.severity === 'high' ? 'orange' : 'yellow'}
|
||||
color={error.severity === 'OPEN' ? 'red' : error.severity === 'IN_PROGRESS' || error.severity === 'ON_HOLD' ? 'orange' : 'yellow'}
|
||||
variant="dot"
|
||||
>
|
||||
{error.severity.toUpperCase()}
|
||||
|
||||
Reference in New Issue
Block a user