upd: connected api monitoring
Deskripsi: - overview page No Issues
This commit is contained in:
@@ -13,10 +13,12 @@ import {
|
||||
TextInput,
|
||||
Switch,
|
||||
Badge,
|
||||
Textarea
|
||||
Textarea,
|
||||
Skeleton
|
||||
} from '@mantine/core'
|
||||
import { useDisclosure } from '@mantine/hooks'
|
||||
import { createFileRoute, useParams, useNavigate } from '@tanstack/react-router'
|
||||
import useSWR from 'swr'
|
||||
import {
|
||||
TbActivity,
|
||||
TbAlertTriangle,
|
||||
@@ -24,125 +26,131 @@ import {
|
||||
TbRefresh,
|
||||
TbVersions
|
||||
} from 'react-icons/tb'
|
||||
import { API_URLS } from '../config/api'
|
||||
|
||||
export const Route = createFileRoute('/apps/$appId/')({
|
||||
component: AppOverviewPage,
|
||||
})
|
||||
|
||||
const fetcher = (url: string) => fetch(url).then((res) => res.json())
|
||||
|
||||
function AppOverviewPage() {
|
||||
const { appId } = useParams({ from: '/apps/$appId/' })
|
||||
const navigate = useNavigate()
|
||||
const isDesaPlus = appId === 'desa-plus'
|
||||
const [versionModalOpened, { open: openVersionModal, close: closeVersionModal }] = useDisclosure(false)
|
||||
|
||||
// Data Fetching
|
||||
const { data: gridRes, isLoading: gridLoading, mutate: mutateGrid } = useSWR(isDesaPlus ? API_URLS.getGridOverview() : null, fetcher)
|
||||
const { data: dailyRes, isLoading: dailyLoading, mutate: mutateDaily } = useSWR(isDesaPlus ? API_URLS.getDailyActivity() : null, fetcher)
|
||||
const { data: comparisonRes, isLoading: comparisonLoading, mutate: mutateComparison } = useSWR(isDesaPlus ? API_URLS.getComparisonActivity() : null, fetcher)
|
||||
|
||||
const grid = gridRes?.data
|
||||
const dailyData = dailyRes?.data || []
|
||||
const comparisonData = comparisonRes?.data || []
|
||||
|
||||
const handleRefresh = () => {
|
||||
mutateGrid()
|
||||
mutateDaily()
|
||||
mutateComparison()
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Modal opened={versionModalOpened} onClose={closeVersionModal} title="Update Version Information" radius="md">
|
||||
<Stack gap="md">
|
||||
<TextInput label="Active Version" defaultValue="v1.2.0" />
|
||||
<TextInput label="Minimum Version" defaultValue="v1.0.0" />
|
||||
<TextInput label="Active Version" defaultValue={grid?.version?.mobile_latest_version || 'v1.2.0'} />
|
||||
<TextInput label="Minimum Version" defaultValue={grid?.version?.mobile_minimum_version || 'v1.0.0'} />
|
||||
<Textarea
|
||||
label="Update Message"
|
||||
placeholder="Enter release notes or update message..."
|
||||
defaultValue={grid?.version?.mobile_message_update || ''}
|
||||
minRows={3}
|
||||
autosize
|
||||
/>
|
||||
<Switch label="Maintenance Mode" description="Enable to put the app in maintenance mode for users." />
|
||||
<Switch
|
||||
label="Maintenance Mode"
|
||||
description="Enable to put the app in maintenance mode for users."
|
||||
defaultChecked={grid?.version?.mobile_maintenance === 'true'}
|
||||
/>
|
||||
<Button fullWidth onClick={closeVersionModal}>Save Changes</Button>
|
||||
</Stack>
|
||||
</Modal>
|
||||
|
||||
<Stack gap="xl">
|
||||
{/* 🔝 HEADER SECTION */}
|
||||
{/* <Paper withBorder p="lg" radius="2xl" className="glass"> */}
|
||||
<Group justify="space-between">
|
||||
<Stack gap={0}>
|
||||
<Title order={3}>Overview</Title>
|
||||
<Text size="sm" c="dimmed">Last updated: Just now</Text>
|
||||
</Stack>
|
||||
<Group justify="space-between">
|
||||
<Stack gap={0}>
|
||||
<Title order={3}>Overview</Title>
|
||||
<Text size="sm" c="dimmed">Detailed metrics for {isDesaPlus ? 'Desa+' : appId}</Text>
|
||||
</Stack>
|
||||
|
||||
<Group gap="md">
|
||||
{/* <Select
|
||||
placeholder="Date Range"
|
||||
data={['Today', '7 Days', '30 Days']}
|
||||
defaultValue="Today"
|
||||
leftSection={<TbCalendar size={16} />}
|
||||
radius="md"
|
||||
w={140}
|
||||
/> */}
|
||||
<ActionIcon variant="light" color="brand-blue" size="lg" radius="md">
|
||||
<TbRefresh size={20} />
|
||||
</ActionIcon>
|
||||
{/* <Button
|
||||
variant="gradient"
|
||||
gradient={{ from: '#2563EB', to: '#7C3AED' }}
|
||||
radius="md"
|
||||
leftSection={<TbFilter size={18} />}
|
||||
>
|
||||
Add Filter
|
||||
</Button> */}
|
||||
<Group gap="md">
|
||||
<ActionIcon variant="light" color="brand-blue" size="lg" radius="md" onClick={handleRefresh}>
|
||||
<TbRefresh size={20} />
|
||||
</ActionIcon>
|
||||
</Group>
|
||||
</Group>
|
||||
</Group>
|
||||
{/* </Paper> */}
|
||||
|
||||
{/* 📊 1. SUMMARY CARDS */}
|
||||
<SimpleGrid cols={{ base: 1, sm: 2, lg: 4 }} spacing="lg">
|
||||
<SummaryCard
|
||||
title="Active Version"
|
||||
value="v1.2.0"
|
||||
icon={TbVersions}
|
||||
color="brand-blue"
|
||||
onClick={openVersionModal}
|
||||
>
|
||||
<Group justify="space-between" mt="md">
|
||||
<Stack gap={0}>
|
||||
<Text size="xs" c="dimmed">Min. Version</Text>
|
||||
<Text size="sm" fw={600}>v1.0.0</Text>
|
||||
</Stack>
|
||||
<Stack gap={0} align="flex-end">
|
||||
<Text size="xs" c="dimmed">Maintenance</Text>
|
||||
<Badge size="sm" color="gray" variant="light">False</Badge>
|
||||
</Stack>
|
||||
</Group>
|
||||
</SummaryCard>
|
||||
<SummaryCard
|
||||
title="Total Activity Today"
|
||||
value="3,842"
|
||||
icon={TbActivity}
|
||||
color="teal"
|
||||
trend={{ value: '14.2%', positive: true }}
|
||||
/>
|
||||
<SummaryCard
|
||||
title="Total Villages Active"
|
||||
value="138"
|
||||
icon={TbBuildingCommunity}
|
||||
color="indigo"
|
||||
onClick={() => navigate({ to: `/apps/${appId}/villages` })}
|
||||
>
|
||||
<Group justify="space-between" mt="md">
|
||||
<Text size="xs" c="dimmed">Nonactive Villages</Text>
|
||||
<Badge size="sm" color="red" variant="light">24</Badge>
|
||||
</Group>
|
||||
</SummaryCard>
|
||||
<SummaryCard
|
||||
title="Errors Today"
|
||||
value="12"
|
||||
icon={TbAlertTriangle}
|
||||
color="red"
|
||||
isError={true}
|
||||
trend={{ value: '4.8%', positive: false }}
|
||||
/>
|
||||
</SimpleGrid>
|
||||
<SimpleGrid cols={{ base: 1, sm: 2, lg: 4 }} spacing="lg">
|
||||
<SummaryCard
|
||||
title="Active Version"
|
||||
value={gridLoading ? '...' : (grid?.version?.mobile_latest_version || 'N/A')}
|
||||
icon={TbVersions}
|
||||
color="brand-blue"
|
||||
onClick={openVersionModal}
|
||||
>
|
||||
<Group justify="space-between" mt="md">
|
||||
<Stack gap={0}>
|
||||
<Text size="xs" c="dimmed">Min. Version</Text>
|
||||
<Text size="sm" fw={600}>{grid?.version?.mobile_minimum_version || '-'}</Text>
|
||||
</Stack>
|
||||
<Stack gap={0} align="flex-end">
|
||||
<Text size="xs" c="dimmed">Maintenance</Text>
|
||||
<Badge size="sm" color={grid?.version?.mobile_maintenance === 'true' ? 'red' : 'gray'} variant="light">
|
||||
{grid?.version?.mobile_maintenance?.toUpperCase() || 'FALSE'}
|
||||
</Badge>
|
||||
</Stack>
|
||||
</Group>
|
||||
</SummaryCard>
|
||||
|
||||
{/* 📈 📊 2 & 3. CHARTS GRID */}
|
||||
<SimpleGrid cols={{ base: 1, lg: 2 }} spacing="lg">
|
||||
<VillageActivityLineChart />
|
||||
<VillageComparisonBarChart />
|
||||
</SimpleGrid>
|
||||
<SummaryCard
|
||||
title="Total Activity Today"
|
||||
value={gridLoading ? '...' : (grid?.activity?.today?.toLocaleString() || '0')}
|
||||
icon={TbActivity}
|
||||
color="teal"
|
||||
trend={grid?.activity?.increase ? { value: `${grid.activity.increase}%`, positive: grid.activity.increase > 0 } : undefined}
|
||||
/>
|
||||
|
||||
{/* 🐞 4. LATEST ERROR REPORTS */}
|
||||
<ErrorDataTable />
|
||||
</Stack>
|
||||
<SummaryCard
|
||||
title="Total Villages Active"
|
||||
value={gridLoading ? '...' : (grid?.village?.active || '0')}
|
||||
icon={TbBuildingCommunity}
|
||||
color="indigo"
|
||||
onClick={() => navigate({ to: `/apps/${appId}/villages` })}
|
||||
>
|
||||
<Group justify="space-between" mt="md">
|
||||
<Text size="xs" c="dimmed">Nonactive Villages</Text>
|
||||
<Badge size="sm" color="red" variant="light">{grid?.village?.inactive || 0}</Badge>
|
||||
</Group>
|
||||
</SummaryCard>
|
||||
|
||||
<SummaryCard
|
||||
title="Errors Today"
|
||||
value="12"
|
||||
icon={TbAlertTriangle}
|
||||
color="red"
|
||||
isError={true}
|
||||
trend={{ value: '4.8%', positive: false }}
|
||||
/>
|
||||
</SimpleGrid>
|
||||
|
||||
<SimpleGrid cols={{ base: 1, lg: 2 }} spacing="lg">
|
||||
<VillageActivityLineChart data={dailyData} isLoading={dailyLoading} />
|
||||
<VillageComparisonBarChart data={comparisonData} isLoading={comparisonLoading} />
|
||||
</SimpleGrid>
|
||||
|
||||
<ErrorDataTable />
|
||||
</Stack>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user