DashboardPage

Vertical rhythm of a dashboard page. Put it inside Page so the page container query applies.

Import

import { DashboardPage } from "@jcsoftdev/ui/containers";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/containers/dashboard.

Usage

export const Default: Story = {
  render: () => (
    <DashboardPage>
      <KpiRow aria-label="Cifras clave">
        <Kpi label="Matrícula" value="1 240" description="+32 este mes" />
        <Kpi label="Recaudación" value="86%" description="Meta 90%" />
        <Kpi label="Morosidad" value="S/ 18 400" description="42 familias" />
        <Kpi label="Asistencia" value="94%" description="Últimos 30 días" />
      </KpiRow>
      <CardGrid columns={2}>
        <ChartCard title="Recaudación" subtitle="Miles de soles por mes" height={260}>
          <Collected />
        </ChartCard>
        <ChartCard title="Recaudación (mes)" aside={<Chip tone="success">+8%</Chip>} height={260}>
          <Collected />
        </ChartCard>
      </CardGrid>
      <TableCard title="Últimos pagos" subtitle="Hoy">
        <Table>
          <TableHead>
            <TableRow>
              <TableHeaderCell>Familia</TableHeaderCell>
              <TableHeaderCell alignRight>Monto</TableHeaderCell>
            </TableRow>
          </TableHead>
          <TableBody>
            <TableRow>
              <TableCell>Quispe</TableCell>
              <TableCell alignRight>S/ 450</TableCell>
            </TableRow>
            <TableRow>
              <TableCell>Huamán</TableCell>
              <TableCell alignRight>S/ 380</TableCell>
            </TableRow>
          </TableBody>
        </Table>
      </TableCard>
    </DashboardPage>
  ),
};

Source of the Storybook story.

Props

This component declares no props of its own.

It also accepts the native props of the element or primitive it renders (for example className, id, aria-* and event handlers).

Storybook stories

• Default
• Three Columns
• Narrow

Source

packages/ui/src/containers/dashboard/dashboard.tsx