nessar
713ab3b2d9
- Updated apartment-list component to use FontAwesome icons for better visual representation. - Refactored brand-mark component to utilize FontAwesome for the brand icon. - Enhanced dashboard-page with FontAwesome icons for improved navigation. - Replaced SVG icons with FontAwesome in settings-page for consistency and better performance. - Updated sign-in-page to use FontAwesome for the sign-in action icon. - Refactored tenant-card to incorporate FontAwesome icons for attachments. - Enhanced workspace-navigation with FontAwesome icons for all navigation items. - Applied consistent styling for fa-icon elements across components.
82 lines
3.2 KiB
HTML
82 lines
3.2 KiB
HTML
<section class="page-section dashboard-page">
|
||
<header class="page-heading">
|
||
<div>
|
||
<p class="eyebrow">Bonjour {{ session.username() }}</p>
|
||
<h1>Tableau de bord</h1>
|
||
<p>Retrouvez rapidement les actions utiles à votre gestion locative.</p>
|
||
</div>
|
||
<span class="status-pill"><span></span>Espace sécurisé</span>
|
||
</header>
|
||
<div class="dashboard-grid">
|
||
<article
|
||
class="feature-card feature-card-primary"
|
||
[attr.aria-busy]="workspace.apartmentLoadState().loading"
|
||
>
|
||
<div class="feature-icon" aria-hidden="true">
|
||
<fa-icon [icon]="faTableCellsLarge" />
|
||
</div>
|
||
<div>
|
||
<p class="eyebrow">Votre portefeuille</p>
|
||
@if (!workspace.apartmentLoadState().loaded && workspace.apartmentLoadState().loading) {
|
||
<span
|
||
class="skeleton-line skeleton-line-title count-skeleton"
|
||
aria-label="Chargement du nombre d’appartements"
|
||
></span>
|
||
} @else if (
|
||
!workspace.apartmentLoadState().loaded && workspace.apartmentLoadState().error
|
||
) {
|
||
<div class="count-error" role="alert">
|
||
<p>{{ workspace.apartmentLoadState().error }}</p>
|
||
<button mat-button type="button" (click)="workspace.loadApartments()">Réessayer</button>
|
||
</div>
|
||
} @else {
|
||
<h2>
|
||
{{ workspace.apartments().length }} appartement{{
|
||
workspace.apartments().length > 1 ? 's' : ''
|
||
}}
|
||
</h2>
|
||
@if (workspace.apartmentLoadState().loading) {
|
||
<mat-progress-bar mode="indeterminate" aria-label="Actualisation des appartements" />
|
||
}
|
||
@if (workspace.apartmentLoadState().error) {
|
||
<div class="count-error" role="alert">
|
||
<p>{{ workspace.apartmentLoadState().error }}</p>
|
||
<button mat-button type="button" (click)="workspace.loadApartments()">
|
||
Réessayer
|
||
</button>
|
||
</div>
|
||
}
|
||
}
|
||
<p>Centralisez les informations essentielles de vos biens.</p>
|
||
</div>
|
||
<button mat-button type="button" (click)="showApartments()">Gérer mes appartements</button>
|
||
</article>
|
||
<article class="feature-card user-profile">
|
||
<div class="large-avatar">{{ userInitial() }}</div>
|
||
<div class="user-details">
|
||
<p class="eyebrow">Compte actif</p>
|
||
<h3>{{ session.username() }}</h3>
|
||
<p class="user-email">{{ session.email() }}</p>
|
||
<span class="role-chip">Bailleur connecté</span>
|
||
</div>
|
||
</article>
|
||
<article class="feature-card api-demo-section">
|
||
<div>
|
||
<p class="eyebrow">État du service</p>
|
||
<h2>Connexion au serveur</h2>
|
||
<p>Vérifiez que votre espace communique correctement avec le service sécurisé.</p>
|
||
</div>
|
||
<div class="api-actions">
|
||
<button mat-stroked-button type="button" (click)="checkConnection()">
|
||
Tester la connexion
|
||
</button>
|
||
</div>
|
||
@if (helloMessage()) {
|
||
<div class="api-response-wrapper">
|
||
<span>Réponse du serveur</span><code class="api-response-code">{{ helloMessage() }}</code>
|
||
</div>
|
||
}
|
||
</article>
|
||
</div>
|
||
</section>
|