240 lines
8.5 KiB
TypeScript
240 lines
8.5 KiB
TypeScript
import { useQuery } from '@tanstack/react-query'
|
|
import { VillageActivityLineChart, VillageComparisonBarChart } from '@/frontend/components/DashboardCharts'
|
|
import { ErrorDataTable } from '@/frontend/components/ErrorDataTable'
|
|
import { SummaryCard } from '@/frontend/components/SummaryCard'
|
|
import { useSession } from '@/frontend/hooks/useAuth'
|
|
import {
|
|
Badge,
|
|
Button,
|
|
Group,
|
|
Modal,
|
|
SimpleGrid,
|
|
Stack,
|
|
Switch,
|
|
Text,
|
|
Textarea,
|
|
TextInput,
|
|
Title
|
|
} from '@mantine/core'
|
|
import { useDisclosure } from '@mantine/hooks'
|
|
import { notifications } from '@mantine/notifications'
|
|
import { createFileRoute, useNavigate, useParams } from '@tanstack/react-router'
|
|
import { useEffect, useState } from 'react'
|
|
import {
|
|
TbActivity,
|
|
TbAlertTriangle,
|
|
TbBuildingCommunity,
|
|
TbVersions
|
|
} from 'react-icons/tb'
|
|
import useSWR from 'swr'
|
|
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)
|
|
const { data: session } = useSession()
|
|
const isDeveloper = session?.user?.role === 'DEVELOPER'
|
|
|
|
// Form State
|
|
const [latestVersion, setLatestVersion] = useState('')
|
|
const [minVersion, setMinVersion] = useState('')
|
|
const [messageUpdate, setMessageUpdate] = useState('')
|
|
const [maintenance, setMaintenance] = useState(false)
|
|
const [isSaving, setIsSaving] = useState(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 { data: appData, isLoading: appLoading } = useQuery({
|
|
queryKey: ['apps', appId],
|
|
queryFn: () => fetch(`/api/apps/${appId}`).then((r) => r.json()),
|
|
})
|
|
|
|
const grid = gridRes?.data
|
|
const dailyData = dailyRes?.data || []
|
|
const comparisonData = comparisonRes?.data || []
|
|
|
|
// Initialize form when data loads or modal opens
|
|
useEffect(() => {
|
|
if (grid?.version && versionModalOpened) {
|
|
setLatestVersion(grid.version.mobile_latest_version || '')
|
|
setMinVersion(grid.version.mobile_minimum_version || '')
|
|
setMessageUpdate(grid.version.mobile_message_update || '')
|
|
setMaintenance(grid.version.mobile_maintenance === 'true')
|
|
}
|
|
}, [grid, versionModalOpened])
|
|
|
|
const handleRefresh = () => {
|
|
mutateGrid()
|
|
mutateDaily()
|
|
mutateComparison()
|
|
}
|
|
|
|
const handleSaveVersion = async () => {
|
|
setIsSaving(true)
|
|
try {
|
|
const response = await fetch(API_URLS.postVersionUpdate(), {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
mobile_latest_version: latestVersion,
|
|
mobile_minimum_version: minVersion,
|
|
mobile_maintenance: maintenance,
|
|
mobile_message_update: messageUpdate,
|
|
}),
|
|
})
|
|
|
|
if (response.ok) {
|
|
await fetch(API_URLS.createLog(), {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ type: 'UPDATE', message: `Update version information: ${JSON.stringify({ latestVersion, minVersion, maintenance, messageUpdate })}` })
|
|
}).catch(console.error)
|
|
|
|
notifications.show({
|
|
title: 'Update Successful',
|
|
message: 'Application version information has been updated.',
|
|
color: 'teal',
|
|
})
|
|
mutateGrid()
|
|
closeVersionModal()
|
|
} else {
|
|
notifications.show({
|
|
title: 'Update Failed',
|
|
message: 'Failed to update version information. Please check your data.',
|
|
color: 'red',
|
|
})
|
|
}
|
|
} catch (error) {
|
|
notifications.show({
|
|
title: 'Network Error',
|
|
message: 'Could not connect to the server. Please try again later.',
|
|
color: 'red',
|
|
})
|
|
} finally {
|
|
setIsSaving(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Modal opened={versionModalOpened} onClose={closeVersionModal} title="Update Version Information" radius="md">
|
|
<Stack gap="md">
|
|
<TextInput
|
|
label="Active Version"
|
|
placeholder="e.g. 2.0.5"
|
|
value={latestVersion}
|
|
onChange={(e) => setLatestVersion(e.currentTarget.value)}
|
|
/>
|
|
<TextInput
|
|
label="Minimum Version"
|
|
placeholder="e.g. 2.0.0"
|
|
value={minVersion}
|
|
onChange={(e) => setMinVersion(e.currentTarget.value)}
|
|
/>
|
|
<Textarea
|
|
label="Update Message"
|
|
placeholder="Enter release notes or update message..."
|
|
value={messageUpdate}
|
|
onChange={(e) => setMessageUpdate(e.currentTarget.value)}
|
|
minRows={3}
|
|
autosize
|
|
/>
|
|
<Switch
|
|
label="Maintenance Mode"
|
|
description="Enable to put the app in maintenance mode for users."
|
|
checked={maintenance}
|
|
onChange={(e) => setMaintenance(e.currentTarget.checked)}
|
|
/>
|
|
<Button fullWidth onClick={handleSaveVersion} loading={isSaving}>Save Changes</Button>
|
|
</Stack>
|
|
</Modal>
|
|
|
|
<Stack gap="xl">
|
|
<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">
|
|
<ActionIcon variant="light" color="brand-blue" size="lg" radius="md" onClick={handleRefresh}>
|
|
<TbRefresh size={20} />
|
|
</ActionIcon>
|
|
</Group> */}
|
|
</Group>
|
|
|
|
<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={isDeveloper ? openVersionModal : undefined}
|
|
>
|
|
<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>
|
|
|
|
<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}
|
|
/>
|
|
|
|
<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 Open"
|
|
value={appLoading ? '...' : (appData?.errors || '0')}
|
|
icon={TbAlertTriangle}
|
|
color="red"
|
|
isError={true}
|
|
onClick={() => navigate({ to: `/apps/${appId}/errors` })}
|
|
/>
|
|
</SimpleGrid>
|
|
|
|
<SimpleGrid cols={{ base: 1, lg: 2 }} spacing="lg">
|
|
<VillageActivityLineChart data={dailyData} isLoading={dailyLoading} />
|
|
<VillageComparisonBarChart data={comparisonData} isLoading={comparisonLoading} />
|
|
</SimpleGrid>
|
|
|
|
<ErrorDataTable appId={appId} />
|
|
</Stack>
|
|
</>
|
|
)
|
|
}
|