@tinya-code/gas-admin-ui 0.2.0-alpha.13 → 0.2.0-alpha.15

package/src/lib/widgets/chart-line/chart-line.ts

@@ -0,0 +1,219 @@
+import { Component, OnDestroy, computed, effect, input, viewChild } from '@angular/core';
+import type { ElementRef } from '@angular/core';
+import {
+  CategoryScale,
+  Chart,
+  LineController,
+  LineElement,
+  LinearScale,
+  PointElement,
+  Tooltip,
+  type ChartConfiguration,
+} from 'chart.js';
+
+import { Skeleton } from '../../shared/components/skeleton/skeleton';
+import type { BarDatum } from '../bar-chart/bar-chart';
+
+// Chart.js usa registro explícito en vez de `chart.js/auto`: sólo entra lo que
+// esta serie necesita (sin DoughnutController, sin Filler, sin Legend).
+Chart.register(CategoryScale, LineController, LineElement, LinearScale, PointElement, Tooltip);
+
+/**
+ * Serie temporal con Chart.js (viabilidad B2.1).
+ *
+ * La librería —61,4 K gz medidos— sólo se arrastra con ESTE componente y se
+ * descarga en su propio chunk: el descriptor del widget la trae con
+ * `import('./chart-line')` y es esa llamada la que hace que esbuild la
+ * aparte del bundle inicial (aquí se importa estáticamente, así que ningún
+ * `@defer` de otro fichero podría separarla).
+ *
+ * El `@defer (on viewport)` de abajo cumple el otro objetivo y vive aquí, y
+ * no en un host: el chunk llega con el panel, pero el lienzo y la instancia
+ * de `Chart` sólo se crean cuando el gráfico entra en pantalla. Un host no
+ * puede decidir eso — desde R3.6 el motor no conoce ningún tipo concreto
+ * (R3.6 · `doc/plan-refactor-motor.md`).
+ *
+ * La condición `on viewport` necesita `IntersectionObserver`, que jsdom no
+ * trae: los tests configuran `DeferBlockBehavior.Manual` y pintan el bloque
+ * a mano, igual que hacía `widget-host.spec`.
+ */
+@Component({
+  selector: 'app-chart-line',
+  imports: [Skeleton],
+  template: `
+    <div class="rounded-lg border border-neutral/20 bg-surface p-4">
+      <p class="mb-3 text-sm text-neutral">{{ label() }}</p>
+
+      @if (data().length === 0) {
+        <p class="text-sm text-neutral/60" data-testid="empty">Sin datos.</p>
+      } @else {
+        <div aria-live="polite" aria-atomic="true">
+          @defer (on viewport) {
+            <div role="img" [attr.aria-label]="summary()" class="relative h-32">
+              <canvas #canvas class="absolute inset-0 h-full w-full"></canvas>
+            </div>
+          } @placeholder {
+            <div class="relative h-32" aria-hidden="true">
+              <svg
+                viewBox="0 0 100 40"
+                preserveAspectRatio="none"
+                class="absolute inset-0 h-full w-full text-primary"
+              >
+                <polyline
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  vector-effect="non-scaling-stroke"
+                  [attr.points]="sparkPoints()"
+                />
+              </svg>
+            </div>
+          } @loading {
+            <app-skeleton [lines]="3" [height]="24" />
+          } @error {
+            <p class="text-sm text-neutral/60" data-testid="chart-error">
+              No se pudo cargar el gráfico.
+            </p>
+          }
+        </div>
+      }
+    </div>
+  `,
+})
+export class ChartLine implements OnDestroy {
+  /** Título del gráfico. */
+  readonly label = input.required<string>();
+  /** Series a dibujar; vacío ⇒ estado «Sin datos». */
+  readonly data = input<BarDatum[]>([]);
+  /** Sufijo de las cifras del eje («unidades», «S/»). */
+  readonly unit = input('');
+
+  /**
+   * Opcional y no `required`: el lienzo sólo existe una vez completado el
+   * `@defer`, así que el `effect` de abajo se re-ejecuta solo al aparecer y
+   * dibuja en ese momento. Un `viewChild.required` reventaría en el primer
+   * ciclo, cuando el bloque todavía está en placeholder.
+   */
+  private readonly canvas = viewChild<ElementRef<HTMLCanvasElement>>('canvas');
+
+  private chart: Chart<'line'> | null = null;
+
+  constructor() {
+    effect(() => {
+      const lienzo = this.canvas();
+      this.data();
+      this.label();
+      this.unit();
+
+      if (lienzo) {
+        this.render(lienzo.nativeElement);
+      } else {
+        // Sin lienzo (sin datos, o el bloque aún en placeholder) no hay nada
+        // que mantener vivo: una instancia huérfana seguiría redibujando.
+        this.destroy();
+      }
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.destroy();
+  }
+
+  protected readonly summary = computed(() => {
+    const rows = this.data();
+    if (rows.length === 0) {
+      return 'Sin datos.';
+    }
+    const unit = this.unit();
+    const first = rows[0];
+    const last = rows[rows.length - 1];
+    const delta = last.value - first.value;
+    const trend = delta > 0 ? 'sube' : delta < 0 ? 'baja' : 'se mantiene';
+    return (
+      `Serie de ${rows.length} puntos, de ${first.label} (${first.value}${unit}) ` +
+      `a ${last.label} (${last.value}${unit}): ${trend}.`
+    );
+  });
+
+  /** Miniatura del placeholder: la misma serie, dibujada con SVG y sin JS. */
+  protected readonly sparkPoints = computed(() => {
+    const rows = this.data();
+    if (rows.length === 0) {
+      return '';
+    }
+    const max = Math.max(0, ...rows.map((row) => row.value));
+    const last = rows.length - 1;
+    return rows
+      .map((row, index) => {
+        const x = last === 0 ? 50 : (index / last) * 100;
+        const y = max === 0 ? 40 : 40 - (row.value / max) * 36;
+        return `${x.toFixed(2)},${y.toFixed(2)}`;
+      })
+      .join(' ');
+  });
+
+  private render(canvas: HTMLCanvasElement): void {
+    const rows = this.data();
+
+    // Sin datos no hay lienzo en el template: crear un `Chart` sobre él
+    // reventaría (y el `@if` ya se lo habría llevado por delante).
+    if (rows.length === 0) {
+      this.destroy();
+      return;
+    }
+
+    const config: ChartConfiguration<'line'> = {
+      type: 'line',
+      data: {
+        labels: rows.map((row) => row.label),
+        datasets: [
+          {
+            label: this.label(),
+            data: rows.map((row) => row.value),
+            borderColor: this.cssColor('--color-primary'),
+            borderWidth: 2,
+            pointRadius: 3,
+            pointHoverRadius: 5,
+            tension: 0.35,
+          },
+        ],
+      },
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: {
+          legend: { display: false },
+          tooltip: { enabled: true, mode: 'index', intersect: false },
+        },
+        scales: {
+          x: { grid: { display: false } },
+          y: {
+            beginAtZero: true,
+            ticks: {
+              callback: (value) =>
+                typeof value === 'number' ? `${value}${this.unit()}` : String(value),
+            },
+          },
+        },
+      },
+    };
+
+    this.destroy();
+    this.chart = new Chart<'line'>(canvas, config);
+  }
+
+  private destroy(): void {
+    this.chart?.destroy();
+    this.chart = null;
+  }
+
+  /**
+   * Chart.js pinta en el lienzo y NO entiende `var(--…)`, así que el token se
+   * resuelve en tiempo de dibujo. Se lee en cada render —no al arrancar—
+   * porque el modo oscuro sobre-escribe `--color-primary` (`styles/theme.css`).
+   */
+  private cssColor(token: string): string {
+    const value = getComputedStyle(document.documentElement).getPropertyValue(token).trim();
+    return value || '#1d69f0';
+  }
+}

package/src/lib/widgets/descriptors.ts

@@ -0,0 +1,29 @@
+import type { RenderDescriptor } from '../core/registry/render-registry';
+
+import { descriptor as barChartDescriptor } from './bar-chart/bar-chart.descriptor';
+import { descriptor as chartLineDescriptor } from './chart-line/chart-line.descriptor';
+import { descriptor as metricCardDescriptor } from './metric-card/metric-card.descriptor';
+import { descriptor as quickActionsDescriptor } from './quick-actions/quick-actions.descriptor';
+import { descriptor as recordListDescriptor } from './record-list/record-list.descriptor';
+import { descriptor as statusProgressDescriptor } from './status-progress/status-progress.descriptor';
+
+/**
+ * Manifiesto de descriptores de widget (R3.6 · registro único de render).
+ *
+ * Mismo criterio que `fields/descriptors.ts`: una línea por tipo y el
+ * registro los recoge al importar este módulo. Es la **única** lista manual
+ * del catálogo de widgets — `import.meta.glob` no sobrevive a `ng build`
+ * (D9-1), así que se mantiene el «registro manual de una línea».
+ *
+ * Añadir un widget ⇒ crear la carpeta + su `.descriptor.ts` + una línea
+ * acá. **Ningún host se toca** (R3.8): si el componente sigue la forma
+ * estándar `{widget, data}` ni siquiera hay que escribir `inputs`.
+ */
+export const widgetDescriptors: readonly RenderDescriptor[] = [
+  barChartDescriptor,
+  chartLineDescriptor,
+  metricCardDescriptor,
+  quickActionsDescriptor,
+  recordListDescriptor,
+  statusProgressDescriptor,
+];

package/src/lib/widgets/metric-card/metric-card.descriptor.ts

@@ -0,0 +1,41 @@
+import type { MetricCardWidget } from '../../core/models/schema.model';
+import type { RenderDescriptor } from '../../core/registry/render-registry';
+
+/**
+ * El dato de un KPI es un ESCALAR y puede llegar de dos formas:
+ *
+ * - **payload**: `data[widget.key]` ya es la cifra (la resuelve el handler
+ *   del panel);
+ * - **fuente declarada** (F8 · R6.5): una vista con `aggregate` devuelve
+ *   `[{ value: … }]` y la cifra es ese `value`.
+ *
+ * Cualquier otra forma ⇒ `null`, que `MetricCard` pinta como vacío. Se
+ * traduce acá, en el borde — el componente no debería saber de dónde salió
+ * el número.
+ */
+function valorDeKpi(data: unknown): number | string | null {
+  if (Array.isArray(data)) {
+    const first = data[0];
+    if (typeof first !== 'object' || first === null) return null;
+    const value = (first as { value?: unknown }).value;
+    return value === undefined || value === null ? null : (value as number | string);
+  }
+  if (data === undefined) return null;
+  return data as number | string | null;
+}
+
+/** Descriptor del widget `metric-card` (R3.6). */
+export const descriptor: RenderDescriptor = {
+  kind: 'widget',
+  type: 'metric-card',
+  since: '1.0',
+  load: () => import('./metric-card').then((module) => module.MetricCard),
+  surfaces: ['display'],
+  // El KPI no recibe el widget entero: sólo vive de su rótulo, del dato y de
+  // la nota al pie. Pasa el dato ya traducido — `MetricCard` distingue el
+  // `0` de un vacío, y el `0` de un agregado llega como `[{ value: 0 }]`.
+  inputs: (config, extras) => {
+    const cfg = config as MetricCardWidget;
+    return { label: cfg.label, value: valorDeKpi(extras.data), hint: cfg.hint ?? '' };
+  },
+};

package/src/lib/widgets/metric-card/metric-card.spec.ts

@@ -0,0 +1,52 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MetricCard } from './metric-card';
+
+describe('MetricCard', () => {
+  let fixture: ComponentFixture<MetricCard>;
+
+  const root = (): HTMLElement => fixture.nativeElement as HTMLElement;
+  const value = (): HTMLElement | null => root().querySelector('[data-testid="value"]');
+  const empty = (): HTMLElement | null => root().querySelector('[data-testid="value-empty"]');
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({ imports: [MetricCard] }).compileComponents();
+    fixture = TestBed.createComponent(MetricCard);
+    fixture.componentRef.setInput('label', 'Pendientes');
+  });
+
+  it('renderiza la etiqueta y la cifra', () => {
+    fixture.componentRef.setInput('value', 3);
+    fixture.detectChanges();
+
+    expect(root().textContent).toContain('Pendientes');
+    expect(value()?.textContent?.trim()).toBe('3');
+    expect(empty()).toBeNull();
+  });
+
+  it('value null ⇒ estado vacío con el placeholder', () => {
+    fixture.componentRef.setInput('value', null);
+    fixture.detectChanges();
+
+    expect(empty()).not.toBeNull();
+    expect(value()).toBeNull();
+  });
+
+  it('0 es un valor, no un vacío', () => {
+    fixture.componentRef.setInput('value', 0);
+    fixture.detectChanges();
+
+    expect(value()?.textContent?.trim()).toBe('0');
+    expect(empty()).toBeNull();
+  });
+
+  it('sin hint no pinta la línea secundaria', () => {
+    fixture.componentRef.setInput('value', 3);
+    fixture.detectChanges();
+    expect(root().textContent).not.toContain('hint');
+
+    fixture.componentRef.setInput('hint', 'de 12 totales');
+    fixture.detectChanges();
+    expect(root().textContent).toContain('de 12 totales');
+  });
+});

package/src/lib/widgets/metric-card/metric-card.ts

@@ -0,0 +1,48 @@
+import { Component, computed, input } from '@angular/core';
+
+/**
+ * KPI de una cifra suelta («3 pendientes»).
+ *
+ * Cero dependencias: es sólo presentación — el valor lo trae el
+ * orquestador del panel desde el endpoint de métricas.
+ *
+ * Sin `icon`: el schema no tiene hoy un registro de nombres de icono
+ * (los Lucide se importan estáticamente), así que un `icon?: string` no
+ * podría resolverse declarativamente. Se añade cuando exista ese registro.
+ */
+@Component({
+  selector: 'app-metric-card',
+  template: `
+    <article class="rounded-lg border border-neutral/20 bg-surface p-4">
+      <p class="text-sm text-neutral">{{ label() }}</p>
+
+      @if (empty()) {
+        <p class="font-display text-3xl font-semibold text-neutral/40" data-testid="value-empty">
+          —
+        </p>
+      } @else {
+        <p class="font-display text-3xl font-semibold" data-testid="value">{{ display() }}</p>
+      }
+
+      @if (hint()) {
+        <p class="mt-1 text-xs text-neutral">{{ hint() }}</p>
+      }
+    </article>
+  `,
+})
+export class MetricCard {
+  /** Rótulo del KPI. */
+  readonly label = input.required<string>();
+  /** Cifra a mostrar; `null`/`undefined` ⇒ estado vacío. */
+  readonly value = input<unknown>(null);
+  /** Texto secundario estático bajo la cifra. */
+  readonly hint = input('');
+
+  /** `0` es un valor, no un vacío: sólo `null`/`undefined` vacían la tarjeta. */
+  protected readonly empty = computed(() => this.value() === null || this.value() === undefined);
+
+  protected readonly display = computed(() => {
+    const value = this.value();
+    return typeof value === 'number' ? new Intl.NumberFormat('es-PE').format(value) : String(value);
+  });
+}

package/src/lib/widgets/quick-actions/quick-actions.descriptor.ts

@@ -0,0 +1,13 @@
+import type { RenderDescriptor } from '../../core/registry/render-registry';
+
+/** Descriptor del widget `quick-actions` (R3.6). */
+export const descriptor: RenderDescriptor = {
+  kind: 'widget',
+  type: 'quick-actions',
+  since: '1.0',
+  load: () => import('./quick-actions').then((module) => module.QuickActions),
+  surfaces: ['display'],
+  // El único widget sin dato: sus botones salen todos del schema. Por eso no
+  // recibe `data` — `ngComponentOutletInputs` no admite inputs inexistentes.
+  inputs: (config) => ({ widget: config }),
+};

package/src/lib/widgets/quick-actions/quick-actions.spec.ts

@@ -0,0 +1,61 @@
+import { provideRouter } from '@angular/router';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { describe, expect, it, beforeEach } from 'vitest';
+
+import type { QuickActionsWidget } from '../../core/models/schema.model';
+import { QuickActions } from './quick-actions';
+
+describe('QuickActions', () => {
+  let fixture: ComponentFixture<QuickActions>;
+
+  const widget: QuickActionsWidget = {
+    type: 'quick-actions',
+    key: 'acciones_rapidas',
+    label: 'Accesos Directos',
+    actions: [
+      { label: 'Nuevo Pedido', icon: 'plus', navigateTo: '/admin/orders?action=create' },
+      { label: 'Configuración', icon: 'settings', navigateTo: '/admin/pickpass' },
+      { label: 'Guía Externa', icon: 'external', navigateTo: 'https://ejemplo.com/guia' },
+    ],
+  };
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [QuickActions],
+      providers: [provideRouter([])],
+    }).compileComponents();
+    fixture = TestBed.createComponent(QuickActions);
+  });
+
+  it('1. renderiza todas las acciones declaradas con sus textos', () => {
+    fixture.componentRef.setInput('widget', widget);
+    fixture.detectChanges();
+
+    const root = fixture.nativeElement as HTMLElement;
+    expect(root.textContent).toContain('Accesos Directos');
+    expect(root.textContent).toContain('Nuevo Pedido');
+    expect(root.textContent).toContain('Configuración');
+    expect(root.textContent).toContain('Guía Externa');
+  });
+
+  it('2. genera enlaces internos con routerLink', () => {
+    fixture.componentRef.setInput('widget', widget);
+    fixture.detectChanges();
+
+    const root = fixture.nativeElement as HTMLElement;
+    const links = root.querySelectorAll('a');
+    expect(links.length).toBe(3);
+    expect(links[0].getAttribute('href')).toBe('/admin/orders?action=create');
+    expect(links[1].getAttribute('href')).toBe('/admin/pickpass');
+  });
+
+  it('3. genera enlaces externos con target blank y rel noopener', () => {
+    fixture.componentRef.setInput('widget', widget);
+    fixture.detectChanges();
+
+    const root = fixture.nativeElement as HTMLElement;
+    const links = root.querySelectorAll('a');
+    expect(links[2].getAttribute('href')).toBe('https://ejemplo.com/guia');
+    expect(links[2].getAttribute('target')).toBe('_blank');
+  });
+});

package/src/lib/widgets/quick-actions/quick-actions.ts

@@ -0,0 +1,100 @@
+import { Component, input } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import {
+  LucideExternalLink,
+  LucideFileText,
+  LucidePlus,
+  LucideSettings,
+  LucideZap,
+} from '@lucide/angular';
+
+import type { QuickActionsWidget } from '../../core/models/schema.model';
+import { parseNavigationUrl, type ParsedRoute } from '../../core/utils/template-interpolator';
+
+const BUTTON_CLASSES: Record<string, string> = {
+  primary:
+    'bg-primary text-surface hover:bg-primary/90 font-medium px-4 py-2.5 rounded-lg inline-flex items-center gap-2 text-sm transition-colors',
+  outline:
+    'border border-neutral/40 bg-surface text-neutral hover:bg-neutral/10 font-medium px-4 py-2.5 rounded-lg inline-flex items-center gap-2 text-sm transition-colors',
+  secondary:
+    'bg-neutral/10 text-neutral-light hover:bg-neutral/20 font-medium px-4 py-2.5 rounded-lg inline-flex items-center gap-2 text-sm transition-colors',
+};
+
+/**
+ * Grid de accesos directos y atajos operativos para el Dashboard.
+ */
+@Component({
+  selector: 'app-quick-actions',
+  imports: [RouterLink, LucidePlus, LucideSettings, LucideFileText, LucideExternalLink, LucideZap],
+  template: `
+    <article class="flex h-full flex-col rounded-xl border border-neutral/20 bg-surface p-4">
+      <h2 class="mb-3 text-sm font-semibold text-neutral-light">{{ widget().label }}</h2>
+
+      <div class="grid flex-1 grid-cols-1 gap-2.5 sm:grid-cols-2">
+        @for (action of widget().actions; track action.label) {
+          @if (isExternal(action.navigateTo)) {
+            <a
+              [href]="action.navigateTo"
+              target="_blank"
+              rel="noopener noreferrer"
+              [class]="buttonClass(action.variant)"
+            >
+              @switch (action.icon) {
+                @case ('plus') {
+                  <svg lucidePlus size="16" class="shrink-0" />
+                }
+                @case ('settings') {
+                  <svg lucideSettings size="16" class="shrink-0" />
+                }
+                @case ('document') {
+                  <svg lucideFileText size="16" class="shrink-0" />
+                }
+                @default {
+                  <svg lucideExternalLink size="16" class="shrink-0" />
+                }
+              }
+              <span class="truncate">{{ action.label }}</span>
+            </a>
+          } @else {
+            <a
+              [routerLink]="parseRoute(action.navigateTo).path"
+              [queryParams]="parseRoute(action.navigateTo).queryParams"
+              [class]="buttonClass(action.variant)"
+            >
+              @switch (action.icon) {
+                @case ('plus') {
+                  <svg lucidePlus size="16" class="shrink-0" />
+                }
+                @case ('settings') {
+                  <svg lucideSettings size="16" class="shrink-0" />
+                }
+                @case ('document') {
+                  <svg lucideFileText size="16" class="shrink-0" />
+                }
+                @default {
+                  <svg lucideZap size="16" class="shrink-0" />
+                }
+              }
+              <span class="truncate">{{ action.label }}</span>
+            </a>
+          }
+        }
+      </div>
+    </article>
+  `,
+})
+export class QuickActions {
+  readonly widget = input.required<QuickActionsWidget>();
+
+  protected isExternal(url: string): boolean {
+    return /^https?:\/\//i.test(url);
+  }
+
+  protected parseRoute(url: string): ParsedRoute {
+    return parseNavigationUrl(url);
+  }
+
+  protected buttonClass(variant?: string): string {
+    return BUTTON_CLASSES[variant || 'secondary'] || BUTTON_CLASSES['secondary'];
+  }
+}

package/src/lib/widgets/record-list/record-list.descriptor.ts

@@ -0,0 +1,16 @@
+import type { RenderDescriptor } from '../../core/registry/render-registry';
+
+/** Descriptor del widget `record-list` (R3.6). */
+export const descriptor: RenderDescriptor = {
+  kind: 'widget',
+  type: 'record-list',
+  since: '1.0',
+  load: () => import('./record-list').then((module) => module.RecordList),
+  surfaces: ['display'],
+  // `RecordList` dibuja filas: fuera de un array no hay nada que listar, y un
+  // objeto suelto no debe colarse como si fuera una única fila.
+  inputs: (config, extras) => ({
+    widget: config,
+    data: Array.isArray(extras.data) ? (extras.data as Record<string, unknown>[]) : null,
+  }),
+};

package/src/lib/widgets/record-list/record-list.spec.ts

@@ -0,0 +1,79 @@
+import { provideRouter } from '@angular/router';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { describe, expect, it, beforeEach } from 'vitest';
+
+import type { RecordListWidget } from '../../core/models/schema.model';
+import { RecordList } from './record-list';
+
+describe('RecordList', () => {
+  let fixture: ComponentFixture<RecordList>;
+
+  const widget: RecordListWidget = {
+    type: 'record-list',
+    key: 'pedidos_pendientes',
+    label: 'Pedidos que Requieren Atención',
+    columns: ['ref', 'customer_name', 'status'],
+    action: {
+      label: 'Ver Ficha',
+      routeTemplate: '/admin/orders?id={ref}',
+    },
+  };
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [RecordList],
+      providers: [provideRouter([])],
+    }).compileComponents();
+    fixture = TestBed.createComponent(RecordList);
+  });
+
+  it('1. renderiza las filas y columnas declaradas', () => {
+    const data = [
+      { ref: 'ORD-001', customer_name: 'Cliente Uno', status: 'PENDIENTE' },
+      { ref: 'ORD-002', customer_name: 'Cliente Dos', status: 'PENDIENTE' },
+    ];
+
+    fixture.componentRef.setInput('widget', widget);
+    fixture.componentRef.setInput('data', data);
+    fixture.detectChanges();
+
+    const root = fixture.nativeElement as HTMLElement;
+    expect(root.textContent).toContain('Pedidos que Requieren Atención');
+    expect(root.textContent).toContain('ORD-001');
+    expect(root.textContent).toContain('Cliente Uno');
+    expect(root.textContent).toContain('ORD-002');
+    expect(root.textContent).toContain('Cliente Dos');
+  });
+
+  it('2. renderiza estado vacío cuando no hay datos', () => {
+    fixture.componentRef.setInput('widget', widget);
+    fixture.componentRef.setInput('data', []);
+    fixture.detectChanges();
+
+    const root = fixture.nativeElement as HTMLElement;
+    expect(root.textContent).toContain('Sin registros pendientes');
+  });
+
+  it('3. genera el enlace de acción con la ruta interpolada', () => {
+    const data = [{ ref: 'ORD-777', customer_name: 'Carlos', status: 'PENDIENTE' }];
+
+    fixture.componentRef.setInput('widget', widget);
+    fixture.componentRef.setInput('data', data);
+    fixture.detectChanges();
+
+    const root = fixture.nativeElement as HTMLElement;
+    const link = root.querySelector('a');
+    expect(link).not.toBeNull();
+    expect(link?.getAttribute('href')).toBe('/admin/orders?id=ORD-777');
+    expect(link?.textContent?.trim()).toBe('Ver Ficha');
+  });
+
+  it('4. maneja datos nulos sin romper', () => {
+    fixture.componentRef.setInput('widget', widget);
+    fixture.componentRef.setInput('data', null);
+    fixture.detectChanges();
+
+    const root = fixture.nativeElement as HTMLElement;
+    expect(root.textContent).toContain('Sin registros pendientes');
+  });
+});