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

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

@@ -1,219 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

@@ -1,41 +0,0 @@
-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

@@ -1,52 +0,0 @@
-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

@@ -1,48 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,61 +0,0 @@
-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

@@ -1,100 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,79 +0,0 @@
-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');
-  });
-});