📦 AlpuraCardDashboardComponent – Guía de uso y API

Este documento describe el componente AlpuraCardDashboardComponent, diseñado para mostrar una tarjeta de resumen en el dashboard dentro de la aplicación Alpura.

---

📁 Importaciones necesarias

Para utilizar el componente AlpuraCardDashboardComponent, debes importar su clase y usarla en tu plantilla.

import { AlpuraFiltersComponent, IAlpuraFilters } from './ruta/alpura-filters.component';

@Component({
  selector: 'app-remoto',
  standalone: true,
  imports: [
    CommonModule,
    AlpuraCardDashboardComponent,
  ],
  templateUrl: './aseguradora.component.html',
  styleUrl: './aseguradora.component.scss',
})

---

🧩 Estructura HTML de ejemplo

<alpura-card-dashboard
  [cardDashConfig]="cardDashConfig"
></alpura-card-dashboard>

---

🧠 Inputs

Nombre	Tipo	Descripción
cardDashConfig	IAlpuraCardDashboard[]	Configuración de la card.

---

🧪 Estructura de filtros (IAlpuraCardDashboard)

Cada propiedad del objeto en cardDashConfig representa un valor dentro del componente, a continuación se explica a detalle:

/**
 * Datos necesarios para renderizar una tarjeta de dashboard.
 * @interface IAlpuraCardDashboard
 */
export interface IAlpuraCardDashboard {
  /** Texto que aparece en la parte superior de la tarjeta. */
  title: string;
  /** Valor principal que se muestra en la tarjeta. */
  value: string;
  /** Nombre del ícono válido de Material Icons a renderizar. */
  icon: string;
  /**
   * Color del borde de la tarjeta.
   * Puede ser un valor hex (#RRGGBB), rgb(a).
   * @default '#4caf50'
   */
  borderColor?: string;
  /**
   * Color del texto del elemento `<p>`.
   * Puede ser un valor hex (#RRGGBB), rgb(a).
   * @default '#4caf50'
   */
  textColor?: string;
  /**
   * Color del icono de la tarjeta.
   * Permite personalizar de forma independiente el color del icono.
   * Si no se especifica, tomará por defecto el valor de `textColor` (o `#4caf50`).
   */
  iconColor?: string;
}

tip

Para incorporar un icono, favor de basarse en los iconos de la siguiente URL https://fonts.google.com/icons

warning

Las siguientes propiedades son opcionales:

• borderColor
• textColor

Ya que por defecto esas propiedades tienen seteado el color: "#4caf50"

Ejemplo de configuración:

public cardDashConfig!: IAlpuraFilters;
this.cardDashConfig = {
  title: "TOTAL VALUE 111",
  value: "$10,000",
  icon: "airplay",
  borderColor: "#4caf50",
  textColor: "#4caf50",
};

🚀 Resultado esperado

• Generación dinámica de cards informativas a forma de resumen.

---

🧩 Vista previa

Este componente permite mostrar información resumida. Ideal para dashboards o reportes.

---

📬 Soporte

Para dudas o mantenimiento del componente AlpuraCardDashboardComponent, contactar al equipo de arquitectura.