@ciromaciel/dashboard-kit 1.0.0

package/README.md

@@ -0,0 +1,40 @@
+# @ciromaciel/dashboard-kit
+
+Os componentes que os sete painéis da RiLiGar compartilham.
+
+```bash
+bun add @ciromaciel/dashboard-kit
+```
+
+```jsx
+import { DataTable, EmptyState, AuthLoader } from '@ciromaciel/dashboard-kit'
+```
+
+## O que entra aqui
+
+O que é **o mesmo** nos painéis. Não entra o que é do produto — o semáforo de
+estado do Monitors, a régua de moeda do Payments. A linha divisória: se um
+painel precisou mudar o componente para servir ao produto, o componente ainda
+não é de todos.
+
+| | |
+|---|---|
+| `DataTable` · `TableSkeleton` · `templateFor` | a tabela e a espera dela |
+| `EmptyState` | o vazio — que não é a mesma coisa que "ainda carregando" |
+| `SectionCard` · `Field` · `FieldStacked` · `CardActions` | o cartão de seção |
+| `PageHeader` | título e trilha |
+| `HoldToConfirmButton` · `HoldToConfirmIcon` | a confirmação destrutiva |
+| `AuthLoader` | a tela do instante em que o painel não sabe quem você é |
+| `Wordmark` | a marca, em dois papéis. O nome vem por prop |
+| `ZenLabel` · `notify` | rótulo e aviso |
+
+## Por que não há build
+
+O pacote publica o fonte. Os sete painéis são Vite, que compila JSX de
+dependência sem cerimônia — um passo de build só produziria o que o consumidor
+já sabe produzir. Menos uma engrenagem para quebrar.
+
+## Peers
+
+`@mantine/core`, `@mantine/hooks`, `@mantine/notifications`,
+`@tabler/icons-react`, `react`. Todos já presentes nos sete painéis.

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@ciromaciel/dashboard-kit",
+  "version": "1.0.0",
+  "license": "MIT",
+  "type": "module",
+  "description": "Os componentes que os sete painéis da RiLiGar compartilham: a tabela, a espera, o vazio, a confirmação destrutiva e a marca.",
+  "main": "src/index.js",
+  "files": [
+    "src",
+    "README.md"
+  ],
+  "exports": {
+    ".": "./src/index.js"
+  },
+  "scripts": {
+    "test": "bun test tests/",
+    "format": "prettier --write \"src/**/*.{js,jsx,css}\"",
+    "format:check": "prettier --check \"src/**/*.{js,jsx,css}\""
+  },
+  "peerDependencies": {
+    "@mantine/core": "^7.0.0 || ^8.0.0",
+    "@mantine/hooks": "^7.0.0 || ^8.0.0",
+    "@tabler/icons-react": "^3.0.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "@mantine/notifications": "^7.0.0 || ^8.0.0"
+  },
+  "devDependencies": {
+    "@happy-dom/global-registrator": "^20.14.3",
+    "@mantine/core": "^8.0.0",
+    "@mantine/hooks": "^8.0.0",
+    "@mantine/notifications": "^8.0.0",
+    "@tabler/icons-react": "^3.0.0",
+    "@testing-library/react": "^16.0.0",
+    "happy-dom": "^15.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/riligar/packages.git",
+    "directory": "dashboard-kit"
+  }
+}

package/src/auth-labels.js

@@ -0,0 +1,77 @@
+/**
+ * The words of the authentication screen, in one place.
+ *
+ * WHY THIS FILE EXISTS
+ *
+ * `@ciromaciel/auth-react` renders the auth form but takes every visible string
+ * as a prop. Each dashboard was therefore carrying its own copy of the same
+ * Portuguese — seven times over. They were identical when compared
+ * (`signInButton: 'Entrar'` in all seven), which is precisely the state that
+ * does not survive: the next wording change lands in one panel and the other
+ * six keep the old text, with nothing failing and no test noticing.
+ *
+ * WHY THE LABELS ARE IN PORTUGUESE AND THE KEYS IN ENGLISH
+ *
+ * The keys are the SDK's contract (`emailPlaceholder`, `sendCodeButton`) and
+ * belong to the code. The values are what a person reads on screen. That is the
+ * boundary the house draws in https://github.com/riligar/infrastructure/blob/prod/apps/website/docs/2026-09-10-idioma-do-codigo.md: not
+ * "string vs. not-string", but WHO READS IT.
+ *
+ * WHY THERE IS ONLY ONE SCREEN HERE
+ *
+ * There used to be five — sign-in, sign-up, magic link, reset, verification.
+ * All five answered the same question (does this person control this inbox?),
+ * and four of them answered it with a URL. Now there is one way in: the code
+ * that arrives by email. There is no separate sign-up — the first entry creates
+ * the account.
+ *
+ * HOW TO CHANGE A WORD
+ *
+ * Change it here and the seven dashboards change together. If one product ever
+ * needs a different word, spread over it at the call site
+ * (`{...AUTH_LABELS.signIn, sendCodeButton: 'Acessar'}`) rather than copying
+ * the block back into the panel — a copy is how this file was needed in the
+ * first place.
+ */
+
+export const AUTH_LABELS = {
+    signIn: {
+        email: 'Email',
+        emailPlaceholder: 'seu@email.com',
+        invalidEmail: 'Email inválido',
+        sendCodeButton: 'Enviar código',
+        sendingCode: 'Enviando…',
+        codeSent: 'Digite o código que enviamos',
+        codeSentTo: 'Enviado para',
+        codeLabel: 'Código de acesso',
+        confirmCode: 'Confirmar',
+        verifyingCode: 'Entrando…',
+        invalidCode: 'Código inválido.',
+        resendCode: 'Reenviar código',
+        changeEmail: 'Usar outro e-mail',
+        // The terms notice under the first step. Two keys, not one sentence:
+        // the link text has to be a separate node, and splitting it here keeps
+        // the whole sentence readable instead of hiding half of it in JSX.
+        termsNotice: 'Criando uma conta, você concorda com todos os nossos',
+        termsLink: 'termos e condições',
+    },
+}
+
+/**
+ * The titles and the notification texts of the screen.
+ *
+ * Separate from `AUTH_LABELS` because these are not the SDK's contract: the
+ * panel passes them as `title`/`subtitle` and uses them in its own `notify`
+ * calls. Same reason for existing — seven identical copies.
+ */
+export const AUTH_TEXTS = {
+    signIn: {
+        title: 'Entrar',
+        subtitle: 'Enviamos um código para o seu e-mail',
+        codeSent: 'Código enviado',
+        codeSentMessage: 'Confira sua caixa de entrada e informe o código.',
+        success: 'Bem-vindo!',
+        successMessage: 'Você foi autenticado com sucesso',
+        error: 'Erro ao entrar',
+    },
+}

package/src/components/ActiveResource.jsx

@@ -0,0 +1,68 @@
+import { Box, Text } from '@mantine/core'
+
+/**
+ * O recurso aberto, no topo da coluna.
+ *
+ * VEIO DE SEIS CÓPIAS COM QUATRO NOMES: `ActiveProject` (payments, messages,
+ * hoster), `ActiveInstance` (storage), `ActiveApplication` (auth) e
+ * `ActiveFunction` (functions). Payments e Messages eram idênticos exceto pelo
+ * idioma do comentário; as outras diferiam apenas em DE ONDE vinham o título e
+ * o subtítulo — `project.name`/`tenant.name`, `summary.label`/
+ * `tenant.environment`.
+ *
+ * Isso não é um componente por produto: é um componente que recebia o dado já
+ * mastigado em quatro lugares diferentes. Aqui ele recebe `title` e `subtitle`
+ * prontos, e cada painel decide o que são.
+ *
+ * O centro é o enquadramento: o nome centrado marca "você está DENTRO deste
+ * recurso", contra a lista alinhada à esquerda que ficava acima. É o que separa
+ * navegar de operar.
+ *
+ * @param {string} title    O nome do recurso. Uma linha, com reticências.
+ * @param {string} subtitle A segunda linha — estado, ambiente, endereço. Some
+ *                          quando não houver: um rótulo vazio ocuparia a linha
+ *                          mais valiosa para não dizer nada.
+ * @param {'muted'|'alert'} tone  `alert` pinta o subtítulo de vermelho. É a
+ *                          exceção cromática do sistema, e existe para o caso
+ *                          em que o subtítulo É o problema — "SEM GATEWAY" num
+ *                          projeto que não consegue cobrar.
+ * @param {boolean} mono    Título em monoespaçado, para nome que é identificador
+ *                          (o Functions nomeia função, não produto).
+ */
+export function ActiveResource({ title, subtitle, tone = 'muted', mono = false }) {
+    return (
+        <Box
+            w="100%"
+            px={12}
+            pb={10}
+            mb={4}
+            ta="center"
+        >
+            <Text
+                fz={13}
+                fw={900}
+                c="gray.9"
+                lts="-0.02em"
+                lh={1.3}
+                lineClamp={1}
+                ff={mono ? 'monospace' : undefined}
+            >
+                {title}
+            </Text>
+
+            {subtitle && (
+                <Text
+                    fz={9}
+                    fw={800}
+                    c={tone === 'alert' ? 'red.6' : 'gray.4'}
+                    tt="uppercase"
+                    lts="1.5px"
+                    mt={3}
+                    lineClamp={1}
+                >
+                    {subtitle}
+                </Text>
+            )}
+        </Box>
+    )
+}

package/src/components/AuthLoader.jsx

@@ -0,0 +1,66 @@
+import { Flex, Loader, Stack, Text } from '@mantine/core'
+
+import { Wordmark } from './Wordmark'
+
+/**
+ * The screen for the instant when the dashboard doesn't yet know who you are.
+ *
+ * It is the SAME screen across all seven dashboards. Each one used to have its
+ * own: two said "Verificando sua sessão...", one only showed the wordmark with
+ * no text, and another said "Iniciando sua experiência..." with the markup
+ * loose in the routes file. Anyone using more than one product saw different
+ * screens for the same moment of waiting.
+ *
+ * THE THREE RUNGS, AND WHY ALL THREE
+ *
+ *   - the wordmark (variant `label`) says WHERE you are;
+ *   - the spinner says that SOMETHING is happening;
+ *   - the text says WHAT is happening.
+ *
+ * The spinner alone is an object spinning: it tells you the system hasn't
+ * frozen, and nothing more. Without the wordmark, the screen could belong to
+ * any product — and in a suite of seven that matters. Without the text, you
+ * don't know whether to expect two seconds or whether something is hung.
+ *
+ * THE LOADER SIZE IS `xs`, AND THAT IS A RULE
+ *
+ * The wait here is network, not heavy work. A large loader promises a delay
+ * that doesn't exist and draws more attention than the wordmark — inverting the
+ * hierarchy of the three rungs.
+ *
+ * @param {string} name  - The product name. Required: it is the "where" rung.
+ * @param {string} label - The waiting sentence. The default covers the session
+ *                         case; whoever is checking something else (permissions,
+ *                         for instance) passes their own.
+ */
+export function AuthLoader({ name, label = 'Verificando sua sessão...' }) {
+    return (
+        <Flex
+            h="100dvh"
+            justify="center"
+            align="center"
+        >
+            <Stack
+                align="center"
+                gap="md"
+            >
+                <Wordmark
+                    name={name}
+                    variant="label"
+                    lh={1.4}
+                />
+
+                <Loader size="xs" />
+
+                <Text
+                    ta="center"
+                    fw={500}
+                    fz="sm"
+                    c="gray.6"
+                >
+                    {label}
+                </Text>
+            </Stack>
+        </Flex>
+    )
+}

package/src/components/AuthScreen.jsx

@@ -0,0 +1,32 @@
+import { Flex } from '@mantine/core'
+
+/**
+ * The stage for the authentication screens.
+ *
+ * The five auth screens (sign-in, sign-up, magic link, reset password, verify
+ * email) are the same framing with an SDK component in the middle: one card
+ * centred on an empty screen. Repeating the `<Flex>` in each file gave every
+ * dashboard five definitions of the same measurement — and that is how one of
+ * them keeps `100vh` after the others have moved on.
+ *
+ * It was born in the Monitors dashboard, which had already collapsed its own
+ * five copies into one. This is that component, raised to the kit so the other
+ * six stop keeping their own.
+ *
+ * `100dvh`, not `100vh`: on mobile Safari and Chrome the address bar counts
+ * towards `vh`, and part of the card ended up below the fold. The `px` keeps it
+ * from touching both edges on a narrow screen.
+ */
+export function AuthScreen({ children }) {
+    return (
+        <Flex
+            h="100dvh"
+            px="md"
+            justify="center"
+            align="center"
+            direction="column"
+        >
+            {children}
+        </Flex>
+    )
+}

package/src/components/CardSkeleton.jsx

@@ -0,0 +1,82 @@
+import { Box, Card, Group, Skeleton, Stack } from '@mantine/core'
+
+/**
+ * The `SectionCard` skeleton — for the screens that list CARDS instead of table
+ * rows (domains, gateways, projects).
+ *
+ * It exists for the same reason as `TableSkeleton`: while the data hasn't
+ * arrived, the screen shows the SHAPE of what's coming, in the place where it
+ * will appear. What used to be here was an `EmptyState` with the title
+ * "Carregando" — a sentence about the wait occupying the space reserved for the
+ * content. The skeleton says the same thing without spending a line of text,
+ * and the layout doesn't jump on the swap because the space was already
+ * reserved.
+ *
+ * The geometry follows the SectionCard's real header: same padding
+ * (px 16/24 · py 20), a 10px eyebrow above the 18px title.
+ *
+ * The widths VARY between cards (`58% 44% 66%`): identical bars read as a grid,
+ * not as a list of different things.
+ */
+const LARGURAS = ['58%', '44%', '66%', '51%']
+
+export function CardSkeleton({ cards = 2, bodyLines = 2 }) {
+    return (
+        <Stack
+            gap={20}
+            aria-hidden
+        >
+            {Array.from({ length: cards }, (_, i) => (
+                <Card
+                    key={i}
+                    p={0}
+                    withBorder
+                    styles={{ root: { overflow: 'hidden' } }}
+                >
+                    <Group
+                        justify="space-between"
+                        align="flex-end"
+                        px={{ base: 16, sm: 24 }}
+                        py={20}
+                        gap={16}
+                        wrap="nowrap"
+                    >
+                        <Box
+                            miw={0}
+                            flex={1}
+                        >
+                            <Skeleton
+                                height={10}
+                                width={72}
+                                radius={0}
+                                mb={6}
+                            />
+                            <Skeleton
+                                height={18}
+                                width={LARGURAS[i % LARGURAS.length]}
+                                radius={0}
+                            />
+                        </Box>
+                    </Group>
+
+                    {bodyLines > 0 && (
+                        <Stack
+                            gap={12}
+                            px={{ base: 16, sm: 24 }}
+                            pb={20}
+                        >
+                            {Array.from({ length: bodyLines }, (_, j) => (
+                                <Skeleton
+                                    key={j}
+                                    height={14}
+                                    width={LARGURAS[(i + j + 1) % LARGURAS.length]}
+                                    radius={0}
+                                />
+                            ))}
+                        </Stack>
+                    )}
+                </Card>
+            ))}
+        </Stack>
+    )
+}

package/src/components/CommandCenter.css

@@ -0,0 +1,57 @@
+/*
+ * THE HAIRLINE BETWEEN THE METRICS — and why this is CSS, not inline `style`.
+ *
+ * The band changes shape three times: one column on phones, two at `sm`, four
+ * at `md`. The divider has to follow along, SWITCHING AXIS — vertical between
+ * columns, horizontal between stacked rows. A vertical border on a one-column
+ * grid becomes a stray stroke to the left of each block.
+ *
+ * The first version of this component used a `<Divider orientation="vertical">`
+ * hidden below `md`. The result was that FOUR METRICS IN 2×2 (the Monitors case,
+ * on a tablet) ended up with no separator at all: the vertical one was hidden
+ * and there was no horizontal one. The Monitors dashboard had already solved
+ * this in `global.css`, and the extraction into the kit had lost the fix.
+ *
+ * It depends on a media query and on `:nth-child` — neither of which can be
+ * expressed in inline style, and that is why it has to be a stylesheet.
+ *
+ * `!important` because Mantine's stylesheet comes in afterwards and would put
+ * the border back.
+ */
+.rlg-metric-cell {
+    border-left: none !important;
+}
+
+/* base: one column. The divider is horizontal, between the rows. */
+.rlg-metric-cell + .rlg-metric-cell {
+    border-top: var(--rlg-border, 1px solid var(--mantine-color-gray-2)) !important;
+}
+
+/* sm: two columns. Vertical on the right-hand cell of each pair; horizontal
+   only between rows — that is, from the third cell on. */
+@media (min-width: 48em) {
+    .rlg-metric-cell:nth-child(2n) {
+        border-left: var(--rlg-border, 1px solid var(--mantine-color-gray-2)) !important;
+        padding-left: 24px;
+    }
+    .rlg-metric-cell + .rlg-metric-cell {
+        border-top: none !important;
+    }
+    .rlg-metric-cell:nth-child(n + 3) {
+        border-top: var(--rlg-border, 1px solid var(--mantine-color-gray-2)) !important;
+        padding-top: 20px;
+    }
+}
+
+/* md: four in a single row. Vertical on all but the first, and no horizontal
+   one is left. */
+@media (min-width: 62em) {
+    .rlg-metric-cell:not(:first-child) {
+        border-left: var(--rlg-border, 1px solid var(--mantine-color-gray-2)) !important;
+        padding-left: 24px;
+    }
+    .rlg-metric-cell:nth-child(n + 3) {
+        border-top: none !important;
+        padding-top: 0;
+    }
+}

package/src/components/CommandCenter.jsx

@@ -0,0 +1,185 @@
+import { Box, Card, Group, SimpleGrid } from '@mantine/core'
+
+import './CommandCenter.css'
+
+import { PageHeader } from './PageHeader'
+import { Metric } from './Metric'
+
+/**
+ * The Centro de Comando — the first screen of every RiLiGar dashboard.
+ *
+ * ONE NAME, IN THE USER'S LANGUAGE
+ *
+ * Each dashboard called its landing screen something different — "Visão geral",
+ * "Painel", "Command Center" — three names for the same screen, which forced
+ * anyone using two products to keep two translations in their head. None of the
+ * first two says what the screen DOES; "Centro de Comando" does: here is the
+ * picture of the account, and what needs action.
+ *
+ * It is in Portuguese because the rule is the reader, not the file: what a
+ * person reads stays in Portuguese, identifiers and comments stay in English
+ * (https://github.com/riligar/infrastructure/blob/prod/apps/website/docs/2026-09-10-idioma-do-codigo.md). The component, the file and the
+ * export keep the English name; only the rendered word changed.
+ *
+ * Five dashboards open with a GREETING ("Boa tarde, Ciro.") and the Hoster opens
+ * with the project id. Pinning the title here would erase that from all of them
+ * — trading something good that already exists for a consistency nobody asked
+ * for. The title is free; "Centro de Comando" is the DEFAULT and lives in the
+ * crumb, which is where you read "where am I" without losing the "hello".
+ *
+ * THE THREE LAWS THIS SCREEN CARRIES
+ *
+ * 1. It shows what NEEDS ATTENTION, not the inventory. With dozens of
+ *    resources, listing them all turns this screen into a second list, and the
+ *    information that brought someone here gets diluted among everything that
+ *    is healthy. The list screens are the inventory, with search and filter.
+ *
+ * 2. A big number comes with a NOTE. A bare "99,4%" doesn't say over what
+ *    period or across how many samples — and a dashboard that asserts without
+ *    backing is advertising, not instrumentation. `Metric` is what carries that
+ *    rule; here we only guarantee that the metrics sit at the top, together,
+ *    separated by a hairline and without a frame.
+ *
+ * 3. One call, not N. The whole picture comes from a single endpoint. With N
+ *    detail calls, each number would be computed at a different moment and the
+ *    total wouldn't match the sum of the rows — the worst kind of error in a
+ *    dashboard, because it looks right.
+ *
+ * WHAT THIS COMPONENT DOES, AND WHAT IT DOES NOT
+ *
+ * It is the FRAME: header, work-in-progress band, metrics band, and the body.
+ * It doesn't search data, it doesn't know what uptime is or what a charge is —
+ * each product passes its own metrics and its own body. That's what allows the
+ * same screen across seven products without the kit having to know any of them.
+ *
+ * @param {string}  product   - The product name, for the breadcrumb ("RiLiGar Hoster").
+ *                              Becomes "RiLiGar Hoster · Centro de Comando".
+ * @param {string}  title     - The title. Defaults to "Centro de Comando"; pass the
+ *                              greeting, the project name, whatever the screen asks for.
+ * @param {string}  subtitle  - What this screen shows, in one sentence.
+ * @param {node}    actions   - The screen's primary button, if any. Just one —
+ *                              two primary buttons is none.
+ * @param {node}    working   - Work-in-progress band. Only shows up when there is
+ *                              something to say: a permanent band reading "0 in
+ *                              progress" would be noise in the most valuable spot
+ *                              on the screen.
+ * @param {array}   metrics   - `[{ label, value, note, delta? }]`. Up to four:
+ *                              THREE. The rule is in the component body.
+ * @param {node}    children  - The body — usually tabs with whatever needs action.
+ */
+export function CommandCenter({ product, title, subtitle, actions, working, metrics = [], children }) {
+    /*
+     * THREE METRICS. NOT FOUR.
+     *
+     * The seven dashboards converged on three on their own — only Monitors had
+     * four, and the fourth was "Ping médio", which the table right below
+     * already gave more precisely, in a column per monitor.
+     *
+     * Three is what you read at a glance; from the fourth on, the band stops
+     * being a picture and becomes a short list, something you scan instead of
+     * read. And at `md` the grid divides the width by the number of metrics:
+     * with four, each 64px number loses a quarter of its space and breaks on
+     * medium screens.
+     *
+     * The warning is a `console.warn` and not a silent truncation: dropping the
+     * fourth metric on our own would hide data someone chose to show. Whoever
+     * needs a fourth number decides what goes — not the component.
+     */
+    if (metrics.length > 3 && typeof console !== 'undefined') {
+        console.warn(
+            `[dashboard-kit] <CommandCenter> received ${metrics.length} metrics; the standard is 3. From the fourth on, the strip becomes a list, and the 64px number breaks on medium screens.`,
+        )
+    }
+
+    return (
+        <>
+            <PageHeader
+                crumb={product ? `${product} · Centro de Comando` : 'Centro de Comando'}
+                title={title ?? 'Centro de Comando'}
+                subtitle={subtitle}
+                actions={actions}
+            />
+
+            {/*
+              WORK IN PROGRESS, at the top and before everything else.
+
+              Without this band, someone who kicked off a long operation on
+              another screen and came back here has no way to tell "the system
+              is working" from "the system stopped" — and the two look identical
+              when nothing moves.
+            */}
+            {working && (
+                <Card
+                    p={0}
+                    mb={20}
+                >
+                    <Group
+                        px={{ base: 16, sm: 24 }}
+                        py={14}
+                        gap={12}
+                    >
+                        {working}
+                    </Group>
+                </Card>
+            )}
+
+            {metrics.length > 0 && (
+                <Card
+                    p={0}
+                    mb={20}
+                >
+                    {/*
+                      Separated by a hairline, with no frame per metric. Each one
+                      in its own card would create four objects competing for
+                      attention where there is a single subject: the state of the
+                      account.
+                    */}
+                    <SimpleGrid
+                        cols={{ base: 1, sm: Math.min(metrics.length, 2), md: Math.min(metrics.length, 3) }}
+                        spacing={0}
+                        px={{ base: 16, sm: 24 }}
+                        py={20}
+                    >
+                        {metrics.map(m => (
+                            <Box
+                                key={m.label}
+                                miw={0}
+                                className="rlg-metric-cell"
+                            >
+                                {/*
+                                      `xl` (up to 64px) is the default HERE, and
+                                      not on the list screens.
+
+                                      This is the account-picture screen: the
+                                      number IS the content, not a datum sitting
+                                      next to something else. On the inner
+                                      screens the metric accompanies a table and
+                                      competing with it would be noise; here it
+                                      is the subject, and the size says so
+                                      before any word does.
+
+                                      64px is what the six dashboards were
+                                      already using before this component
+                                      existed. Dropping to 36 would have been a
+                                      44% loss on the very element the screen
+                                      exists to show — and it would have come
+                                      from me, not from a reason.
+
+                                      Anyone who needs a different size passes
+                                      `size` on the metric itself: the spread
+                                      comes afterwards and wins.
+                                    */}
+                                <Metric
+                                    size="xl"
+                                    {...m}
+                                />
+                            </Box>
+                        ))}
+                    </SimpleGrid>
+                </Card>
+            )}
+
+            {children}
+        </>
+    )
+}