Shared Components

export interface ColumnConfig {
  key: string;              // Property key from data object
  label: string;            // Display label for column header
  sortable?: boolean;       // Enable sorting (future feature)
  formatter?: (value: any, item: any) => string;  // Custom formatter
  isHtml?: boolean;         // Allow HTML in formatted content
}

// Component TypeScript
vehicleColumns: ColumnConfig[] = [
  { key: 'brand', label: 'Marca', sortable: true },
  { key: 'model', label: 'Modelo', sortable: true },
  { key: 'licensePlate', label: 'Placas', sortable: false },
  { 
    key: 'year', 
    label: 'Año', 
    formatter: (value) => value.toString() 
  }
];

vehicles = signal<Vehicle[]>([]);

onVehicleClick(vehicle: Vehicle) {
  console.log('Vehicle clicked:', vehicle);
}

onEditVehicle(vehicle: Vehicle) {
  // Open edit modal
}

onDeleteVehicle(vehicle: Vehicle) {
  // Confirm and delete
}

<!-- Component Template -->
<hh-generic-list
  [items]="vehicles()"
  [columns]="vehicleColumns"
  [title]="'Mis Vehículos'"
  [itemsPerPage]="5"
  [showActions]="true"
  (rowClick)="onVehicleClick($event)"
  (edit)="onEditVehicle($event)"
  (delete)="onDeleteVehicle($event)"
></hh-generic-list>

export type AllowedFileType = 'image' | 'video' | 'document';

export interface MaxSizesByType {
  image?: number;     // Bytes
  video?: number;     // Bytes
  document?: number;  // Bytes
}

getSelectedFiles(): File[]  // Returns currently selected files
reset(): void               // Clears all selected files

// Component TypeScript
fileUploadMaxFiles = 3;
fileUploadAllowedTypes: AllowedFileType[] = ['image', 'document'];
fileUploadSavePath = signal('/uploads/pagos');
fileUploadMaxSizes: MaxSizesByType = {
  image: 5 * 1024 * 1024,    // 5 MB
  document: 5 * 1024 * 1024   // 5 MB
};

selectedFiles = signal<File[]>([]);

onFilesChange(files: File[]) {
  this.selectedFiles.set(files);
  console.log('Selected files:', files);
}

<!-- Component Template -->
<hh-file-upload
  [maxFiles]="fileUploadMaxFiles"
  [allowedTypes]="fileUploadAllowedTypes"
  [savePath]="fileUploadSavePath()"
  [maxSizesByType]="fileUploadMaxSizes"
  componentId="pago-residente-comprobante"
  (filesChange)="onFilesChange($event)"
></hh-file-upload>

export enum BannerPeriod {
  Month = 'month',        // 30 days
  Bimester = 'bimester',  // 60 days
  Quarter = 'quarter',    // 90 days
  HalfYear = 'halfYear',  // 180 days
  Year = 'year'           // 365 days
}

<hh-banner-carousel [period]="BannerPeriod.Quarter"></hh-banner-carousel>

export interface CommunityFilterItem {
  id?: string;
  nombre: string;
}

communities = signal<CommunityFilterItem[]>([
  { id: '1', nombre: 'Community A' },
  { id: '2', nombre: 'Community B' }
]);

selectedCommunityId = signal<string>('1');

onCommunityChange(id: string) {
  this.selectedCommunityId.set(id);
  // Reload data for selected community
}

<hh-community-filter
  [communities]="communities()"
  [selectedId]="selectedCommunityId()"
  [showAllOption]="true"
  (selectedIdChange)="onCommunityChange($event)"
></hh-community-filter>

export interface TopMenuItem {
  route: string;   // Router path
  label: string;   // Display text
  icon: string;    // Font Awesome icon class
  badge?: string;  // Optional badge (e.g., notification count)
}

menuItems: TopMenuItem[] = [
  { route: '/admin/pagos', label: 'Pagos', icon: 'fa-money-bill', badge: '3' },
  { route: '/admin/morosos', label: 'Morosos', icon: 'fa-exclamation-triangle' },
  { route: '/admin/banco', label: 'Banco', icon: 'fa-bank' }
];

<hh-top-menu [menuItems]="menuItems"></hh-top-menu>

export enum NotificationType {
  SUCCESS = 'success',
  ERROR = 'error',
  WARNING = 'warning',
  INFO = 'info'
}

export interface Notification {
  id: string;
  type: NotificationType;
  message: string;
  duration?: number;  // Auto-dismiss time in ms
}

private notificationService = inject(NotificationService);

// Show success notification
this.notificationService.success('Vehicle saved successfully!');

// Show error notification
this.notificationService.error('Failed to save vehicle');

// Show warning
this.notificationService.warning('Please review the form');

// Show info
this.notificationService.info('Processing your request...');

title = 'Happy Habitat'
subtitle = 'Administrando comunidades en armonia'

<hh-header></hh-header>

<hh-footer></hh-footer>

<hh-left-menu></hh-left-menu>

themes = [
  { value: 'lemonade', label: 'Lemonade' },
  { value: 'dark', label: 'Oscuro' },
  { value: 'winter', label: 'Winter' },
  { value: 'forest', label: 'Bosque' },
  { value: 'autumn', label: 'Autumn' },
  { value: 'lofi', label: 'Lofi' }
];

<hh-right-bar></hh-right-bar>

<hh-pagination 
  [totalPages]="totalPages()" 
  [currentPage]="currentPage()"
></hh-pagination>

<hh-breadcrums></hh-breadcrums>

<hh-area-chart [data]="chartData"></hh-area-chart>
<hh-bar-chart [data]="barChartData"></hh-bar-chart>