Dashboard Overview

Hola estoy en ionic pero estoy usando angular y css y bosstrap mejora este diseño wey :root { primary color: #4C6FFF; success color: #00E096; warning color: #FFB545; danger color: #FF4757; dark bg: #1A1A1A; card bg: #242424; text primary: #FFFFFF; text secondary: #A0A0A0; } // Header Styles .modern header { .header container { display: flex; justify content: space between; align items: center; } .user section { display: flex; align items: center; gap: 1rem; .user avatar { i { font size: 2.5rem; color: var( primary color); } } .user info { .welcome text { color: var( text secondary); font size: 0.875rem; } .username { color: var( text primary); font size: 1.25rem; font weight: 600; margin: 0; } } } .actions section { display: flex; gap: 0.5rem; ion button { padding start: 0.75rem; padding end: 0.75rem; i { font size: 1.5rem; color: var( text primary); } } ion badge { position: absolute; top: 0.25rem; right: 0.25rem; font size: 0.75rem; } } } // Content Styles .dashboard container { padding: 1rem; background: var( dark bg); min height: 100%; &.scanner active { padding: 0; } } // Action Cards .actions grid { display: grid; grid template columns: repeat(auto fit, minmax(200px, 1fr)); gap: 1rem; .action card { background: var( card bg); border radius: 1rem; margin: 0; padding: 1rem; display: flex; align items: center; gap: 1rem; cursor: pointer; transition: transform 0.2s ease; &:active { transform: scale(0.98); } .card icon { width: 3rem; height: 3rem; border radius: 0.75rem; display: flex; align items: center; justify content: center; i { font size: 1.5rem; color: white; } } .card content { flex: 1; h3 { margin: 0; color: var( text primary); font size: 1rem; font weight: 600; } p { margin: 0.25rem 0 0; color: var( text secondary); font size: 0.875rem; } } .action arrow { color: var( text secondary); font size: 1.25rem; } } } // Bottom Navigation .bottom nav { display: flex; justify content: space around; background: var( card bg); padding: 0.5rem; .nav btn { flex direction: column; padding start: 1rem; padding end: 1rem; height: auto; i { font size: 1.5rem; color: var( text secondary); margin bottom: 0.25rem; } span { font size: 0.75rem; color: var( text secondary); } &.active { i, span { color: var( primary color); } } } } // Scanner Overlay .scanner overlay { position: relative; height: 100vh; background: var( dark bg); .close scanner { position: absolute; top: 1rem; right: 1rem; padding start: 0.75rem; padding end: 0.75rem; background: rgba(0, 0, 0, 0.5); i { font size: 1.5rem; } } } <ion header class="modern header"> <ion toolbar> <div class="header container"> <div class="user section"> <div class="user avatar"> <i class="bi bi person circle"></i> </div> <div class="user info"> <span class="welcome text">Bienvenido de nuevo</span> <h2 class="username">{{ userName }}</h2> </div> </div> <div class="actions section"> <ion button fill="clear" class="notifications btn"> <i class="bi bi bell"></i> <ion badge color="danger">3</ion badge> </ion button> <ion button fill="clear" (click)="logout()" class="logout btn"> <i class="bi bi box arrow right"></i> </ion button> </div> </div> </ion toolbar> </ion header> <ion content> <div class="dashboard container" [ngClass]="{'scanner active': mostrarScanner}"> <! Scanner Overlay > <div *ngIf="mostrarScanner" class="scanner overlay"> <app scan qr></app scan qr> <ion button class="close scanner"> <i class="bi bi x lg"></i> </ion button> </div> <div *ngIf="!mostrarScanner"> <div class="actions grid"> <ion card *ngFor="let item of items" (click)="item.event ? item.event() : null" class="action card"> <div class="card icon" [ngStyle]="{'background color': item.color || '#4C6FFF'}"> <i [class]="'bi ' + item.icon"></i> </div> <div class="card content"> <h3>{{ item.title }}</h3> <p *ngIf="item.description">{{ item.description }}</p> </div> <i class="bi bi chevron right action arrow"></i> </ion card> </div> </div> </div> </ion content> import { Component, OnInit, inject } from '@angular/core'; import { CommonModule } from '@angular/common'; import { FormsModule } from '@angular/forms'; import { IonContent, IonHeader, IonToolbar, IonGrid, IonRow, IonCol, IonCard, IonCardHeader, IonCardTitle, IonCardContent, IonAvatar, IonIcon, IonButton, IonBadge } from '@ionic/angular/standalone'; import { AuthService } from 'src/app/core/services/auth.service'; import { Router } from '@angular/router'; import { ScanQrPage } from 'src/app/components/scan qr/scan qr.page'; @Component({ selector: 'app tab1', templateUrl: './tab1.page.html', styleUrls: ['./tab1.page.scss'], standalone: true, imports: [IonContent, IonHeader, IonToolbar, CommonModule, FormsModule,IonBadge,IonButton, IonCard, ScanQrPage] }) export class Tab1Page implements OnInit { protected auth = inject(AuthService); mostrarScanner = false; userName: string = ''; protected items:Array<any> = []; totalUsuarios: number = 150; // Ejemplo de valor totalMesas: number = 30; // Ejemplo de valor totalDispensadores: number = 10; // constructor( private router: Router) { } ngOnInit() { this.auth.currentUser$.subscribe(user => { if (user) { this.userName = user.name; } }); this.items = [ { title: 'Escanear', description: '', event: () => this.navigateToScanQr(), icon: 'bi qr code scan', color: '#4C6FFF' }, { title: 'Usuarios', description: '', event: () => this.navigateToUsers(), icon: 'bi people fill', color: '#00E096' }, { title: 'Mesas', description: '', //event: () => this.handleCardClick3(), icon: 'bi table', color: '#FFB545' }, { title: this.truncateText('Dispensadores', 15), description: '', //event: () => this.handleCardClick4(), icon: 'bi cup straw', color: '#FF4757' } ]; } logout() { this.auth.logout(); this.router.navigate(['/login']); } toggleScanner() { this.mostrarScanner = !this.mostrarScanner; } navigateToScanQr() { this.router.navigate(['/tabs/admin/dashboard/scan qr']); } navigateToUsers() { this.router.navigate(['/tabs/admin/usuarios']); } truncateText(text: string, maxLength: number): string { return text.length > maxLength ? text.substring(0, maxLength) + '...' : text; } }