wibu/monitoring-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: improve UI/UX consistency across all dashboard pages

Browse Source 
Apply uniform design system across all routes and components:
- Consistent header pattern with gradient-text titles, dimmed subtitles
- Loader type="dots" replacing text-based loading states
- Icon + text empty/error states with Paper+glass containers
- Full STATUS_COLOR/STATUS_LABEL maps for all BugStatus values
- dayjs timestamps, Tooltip on action icons, size="sm" on badges/pagination
- Modals with overlayProps blur and gradient save buttons
- Replace left-border Papers with clean Stack headers
- Translate all remaining Indonesian UI strings to English
- New monitoring-themed SVG logo and redesigned splash screen
This commit is contained in:
amaliadwiy
2026-05-05 12:42:41 +08:00
parent ee543a16ad
commit ef852842b4
14 changed files with 1570 additions and 1365 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
src/frontend/components/AppCard.tsx
View File

@@ -1,6 +1,6 @@
import { Avatar, Button, Card, Group, Stack, Text, useComputedColorScheme } from '@mantine/core'
import { Avatar, Badge, Button, Card, Group, Stack, Text, useComputedColorScheme } from '@mantine/core'
import { Link } from '@tanstack/react-router'
import { TbChevronRight, TbDeviceMobile } from 'react-icons/tb'
import { TbAlertTriangle, TbChevronRight, TbDeviceMobile } from 'react-icons/tb'
interface AppCardProps {
id: string
@@ -12,8 +12,9 @@ interface AppCardProps {
maintenance?: boolean
}
export function AppCard({ id, name, status, errors, version }: AppCardProps) {
const statusColor = status === 'active' ? 'teal' : status === 'warning' ? 'orange' : 'red'
export function AppCard({ id, name, status, errors, version, maintenance }: AppCardProps) {
const statusColor = maintenance ? 'gray' : status === 'active' ? 'teal' : status === 'warning' ? 'orange' : 'red'
const statusLabel = maintenance ? 'Maintenance' : status === 'active' ? 'Active' : status === 'warning' ? 'Warning' : 'Error'
const scheme = useComputedColorScheme('light', { getInitialValueInEffect: true })
return (
@@ -35,7 +36,7 @@ export function AppCard({ id, name, status, errors, version }: AppCardProps) {
},
})}
>
<Group justify="space-between" mb="lg">
<Group justify="space-between" mb="md">
<Group gap="md">
<Avatar
variant="gradient"
@@ -45,39 +46,27 @@ export function AppCard({ id, name, status, errors, version }: AppCardProps) {
>
<TbDeviceMobile size={26} />
</Avatar>
<Stack gap={0}>
<Stack gap={2}>
<Text fw={700} size="lg" style={{ letterSpacing: '-0.3px' }}>{name}</Text>
{/* <Text size="xs" c="dimmed" fw={600}>VERSION {version}</Text> */}
{/* <Text size="xs" c="dimmed" fw={600} tt="uppercase">v{version}</Text> */}
</Stack>
</Group>
{/* <Badge color={statusColor} variant="dot" size="sm">
{status.toUpperCase()}
</Badge> */}
<Badge color={statusColor} variant="dot" size="sm">
{statusLabel}
</Badge>
</Group>
{/* <Stack gap="md" mt="sm">
<Box>
<Group justify="space-between" mb={6}>
<Group gap="xs">
<TbActivity size={16} color="#2563EB" />
<Text size="xs" fw={700} c="dimmed">USER ADOPTION</Text>
</Group>
<Text size="sm" fw={700}>{users.toLocaleString()}</Text>
</Group>
<Progress value={85} size="sm" color="brand-blue" radius="xl" />
</Box>
<Box>
<Group justify="space-between" mb={6}>
<Group gap="xs">
<TbAlertTriangle size={16} color={errors > 0 ? '#ef4444' : '#64748b'} />
<Text size="xs" fw={700} c="dimmed">ERROR</Text>
</Group>
<Text size="sm" fw={700} color={errors > 0 ? 'red' : 'dimmed'}>{errors}</Text>
</Group>
<Progress value={errors > 0 ? 30 : 0} size="sm" color="red" radius="xl" />
</Box>
</Stack> */}
<Group justify="space-between" align="center" mb="xs">
<Text size="xs" c="dimmed" fw={500}>Open Errors</Text>
<Badge
color={errors > 0 ? 'red' : 'teal'}
variant="light"
size="sm"
leftSection={errors > 0 ? <TbAlertTriangle size={10} /> : undefined}
>
{errors > 0 ? errors : 'None'}
</Badge>
</Group>
<Button
component={Link}
@@ -85,7 +74,7 @@ export function AppCard({ id, name, status, errors, version }: AppCardProps) {
variant="light"
color="brand-blue"
fullWidth
mt="xl"
mt="md"
radius="md"
rightSection={<TbChevronRight size={16} />}
styles={{
@@ -97,7 +86,7 @@ export function AppCard({ id, name, status, errors, version }: AppCardProps) {
}
}}
>
View
Open Dashboard
</Button>
</Card>
)