Templates

Plantilla de dashboard React

Plantilla de dashboard React

Esta plantilla combina indicadores, progreso y una lista de pedidos. Instala primero el <a href="/docs/react/intro/setup-react">paquete React</a> y usa el siguiente componente en tu app de navegador.

Plantilla completa

import {
  ArcWidgetKpiBar,
  ArcWidgetTable,
  ArcWidgetProgressBar,
} from '@arcrider/arcwidgets-react';
export default function Example() {
  return (
    <div
      style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
        gap: 20,
      }}
    >
      <section>
        <h2>Kennzahlen</h2>
        <ArcWidgetKpiBar
          data={{
            settings: {
              height: '160px',
            },
            cards: [
              {
                card: 1,
                title: 'Aufträge',
                value: 12,
              },
            ],
          }}
        />
      </section>
      <section>
        <h2>Fortschritt</h2>
        <ArcWidgetProgressBar
          data={{
            valueProgress: 7,
            valueTotal: 12,
            valueText: '7 von 12',
          }}
        />
      </section>
      <section>
        <h2>Aktuell</h2>
        <ArcWidgetTable
          data={{
            height: '240px',
            table: [
              {
                id: 'a',
                columns: [
                  {
                    value: 'Angebot prüfen',
                    width: 'fraction',
                  },
                ],
              },
            ],
          }}
        />
      </section>
    </div>
  );
}

Adaptar

Sustituye los datos de ejemplo por tu estado o por datos de tu API. Añade carga, resultados vacíos y error. CSS Grid se encarga del layout y se adapta al ancho disponible.

Más fuentes completas están en el paquete npm bajo examples/docs/. Usan solo exports públicos y están comprobadas contra los tipos incluidos. Los archivos .arctemplate del Developer Kit son para la otra plataforma y no se importan en React.