103 lines
3.1 KiB
TypeScript
103 lines
3.1 KiB
TypeScript
import { Card, Group, Text, ThemeIcon, Badge, Avatar, Stack, Button, Progress, Box } from '@mantine/core'
|
|
import { Link } from '@tanstack/react-router'
|
|
import { TbDeviceMobile, TbActivity, TbAlertTriangle, TbChevronRight } from 'react-icons/tb'
|
|
|
|
interface AppCardProps {
|
|
id: string
|
|
name: string
|
|
status: 'active' | 'warning' | 'error'
|
|
users: number
|
|
errors: number
|
|
version: string
|
|
}
|
|
|
|
export function AppCard({ id, name, status, users, errors, version }: AppCardProps) {
|
|
const statusColor = status === 'active' ? 'teal' : status === 'warning' ? 'orange' : 'red'
|
|
|
|
return (
|
|
<Card
|
|
withBorder
|
|
padding="xl"
|
|
radius="2xl"
|
|
className="premium-card glass"
|
|
styles={(theme) => ({
|
|
root: {
|
|
backgroundColor: 'rgba(30, 41, 59, 0.4)',
|
|
borderColor: 'rgba(255,255,255,0.08)',
|
|
transition: 'transform 0.2s ease, box-shadow 0.2s ease',
|
|
'&:hover': {
|
|
transform: 'translateY(-4px)',
|
|
boxShadow: '0 12px 24px -8px rgba(0, 0, 0, 0.4)',
|
|
borderColor: 'rgba(37, 99, 235, 0.3)',
|
|
},
|
|
},
|
|
})}
|
|
>
|
|
<Group justify="space-between" mb="lg">
|
|
<Group gap="md">
|
|
<Avatar
|
|
variant="gradient"
|
|
gradient={{ from: '#2563EB', to: '#7C3AED', deg: 135 }}
|
|
radius="lg"
|
|
size="lg"
|
|
>
|
|
<TbDeviceMobile size={26} />
|
|
</Avatar>
|
|
<Stack gap={0}>
|
|
<Text fw={700} size="lg" style={{ letterSpacing: '-0.3px' }}>{name}</Text>
|
|
<Text size="xs" c="dimmed" fw={600}>BUILD v{version}</Text>
|
|
</Stack>
|
|
</Group>
|
|
<Badge color={statusColor} variant="dot" size="sm">
|
|
{status.toUpperCase()}
|
|
</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">HEALTH INCIDENTS</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>
|
|
|
|
<Button
|
|
component={Link}
|
|
to={`/apps/${id}`}
|
|
variant="light"
|
|
color="brand-blue"
|
|
fullWidth
|
|
mt="xl"
|
|
radius="md"
|
|
rightSection={<TbChevronRight size={16} />}
|
|
styles={{
|
|
root: {
|
|
height: '44px',
|
|
'&:hover': {
|
|
backgroundColor: 'rgba(37, 99, 235, 0.15)',
|
|
}
|
|
}
|
|
}}
|
|
>
|
|
Center Intelligence
|
|
</Button>
|
|
</Card>
|
|
)
|
|
}
|