feat: добавить рабочий dashboard admin
- добавлен Mantine theme provider и AppShell layout\n- сгенерирован Backend API клиент и добавлены infra/business хуки\n- добавлены таблица assets, detail/presets panels и create asset modal
This commit is contained in:
@@ -0,0 +1,37 @@
|
||||
import { Paper, SimpleGrid, Skeleton, Stack, Text } from "@mantine/core"
|
||||
|
||||
import { DASHBOARD_CARDS } from "../../config/dashboard.config"
|
||||
import type { SummaryCardsProps } from "./types/summary-cards-props.type"
|
||||
|
||||
/**
|
||||
* Карточки сводных метрик dashboard.
|
||||
*
|
||||
* Используется для:
|
||||
* - отображения количества assets, presets и hosts
|
||||
* - компактного статуса загрузки данных
|
||||
*/
|
||||
export const SummaryCards = (props: SummaryCardsProps) => {
|
||||
const { isLoading, summary } = props
|
||||
|
||||
return (
|
||||
<SimpleGrid cols={{ base: 1, md: 3 }} spacing="md">
|
||||
{DASHBOARD_CARDS.map((card) => (
|
||||
<Paper bg="white" key={card.title} p="xl" radius="xl" shadow="xs" withBorder>
|
||||
<Stack gap="sm">
|
||||
{isLoading ? (
|
||||
<Skeleton height={42} width={86} />
|
||||
) : (
|
||||
<Text c="violet.7" fw={850} fz={42} lh={0.9}>
|
||||
{summary[card.metric]}
|
||||
</Text>
|
||||
)}
|
||||
<Text fw={800}>{card.title}</Text>
|
||||
<Text c="dimmed" fz="sm" lh={1.55}>
|
||||
{card.description}
|
||||
</Text>
|
||||
</Stack>
|
||||
</Paper>
|
||||
))}
|
||||
</SimpleGrid>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user