diff --git a/src/app/features/admin/dashboard/components/dashboard-card.component.html b/src/app/features/admin/dashboard/components/dashboard-card.component.html index 0f83958..9aad9e1 100644 --- a/src/app/features/admin/dashboard/components/dashboard-card.component.html +++ b/src/app/features/admin/dashboard/components/dashboard-card.component.html @@ -1,8 +1,8 @@ @if (titleKey(); as title) {
- @if (icon(); as iconClass) { - + @if (icon(); as iconName) { + }

{{ title | translate }}

diff --git a/src/app/features/admin/dashboard/components/dashboard-card.component.ts b/src/app/features/admin/dashboard/components/dashboard-card.component.ts index 4428c1e..a14ff4b 100644 --- a/src/app/features/admin/dashboard/components/dashboard-card.component.ts +++ b/src/app/features/admin/dashboard/components/dashboard-card.component.ts @@ -1,11 +1,13 @@ import { ChangeDetectionStrategy, Component, input } from '@angular/core'; import { TranslatePipe } from '../../../../i18n/translate.pipe'; import { CardComponent } from '../../../../shared/ui/card/card.component'; +import { IconComponent } from '../../../../shared/ui/icon/icon.component'; +import { AppIconName } from '../../../../shared/ui/icon/icon-registry'; @Component({ selector: 'app-dashboard-card', standalone: true, - imports: [TranslatePipe, CardComponent], + imports: [TranslatePipe, CardComponent, IconComponent], templateUrl: './dashboard-card.component.html', styleUrl: './dashboard-card.component.scss', changeDetection: ChangeDetectionStrategy.OnPush, @@ -15,7 +17,7 @@ import { CardComponent } from '../../../../shared/ui/card/card.component'; }) export class DashboardCardComponent { readonly titleKey = input(null); - readonly icon = input(null); + readonly icon = input(null); /** 12-column grid span at desktop width, e.g. 'span 12' or 'span 4'. */ readonly span = input('span 4'); } diff --git a/src/app/features/admin/dashboard/components/dashboard-shortcut-card.component.html b/src/app/features/admin/dashboard/components/dashboard-shortcut-card.component.html index 2bba8ba..8e25898 100644 --- a/src/app/features/admin/dashboard/components/dashboard-shortcut-card.component.html +++ b/src/app/features/admin/dashboard/components/dashboard-shortcut-card.component.html @@ -1,6 +1,6 @@ @if (comingSoon()) { } @else { - + {{ labelKey() | translate }} @if (descriptionKey(); as description) { {{ description | translate }} diff --git a/src/app/features/admin/dashboard/components/dashboard-shortcut-card.component.ts b/src/app/features/admin/dashboard/components/dashboard-shortcut-card.component.ts index 22cd00d..ddde128 100644 --- a/src/app/features/admin/dashboard/components/dashboard-shortcut-card.component.ts +++ b/src/app/features/admin/dashboard/components/dashboard-shortcut-card.component.ts @@ -1,17 +1,19 @@ import { ChangeDetectionStrategy, Component, input } from '@angular/core'; import { RouterLink } from '@angular/router'; import { TranslatePipe } from '../../../../i18n/translate.pipe'; +import { IconComponent } from '../../../../shared/ui/icon/icon.component'; +import { AppIconName } from '../../../../shared/ui/icon/icon-registry'; @Component({ selector: 'app-dashboard-shortcut-card', standalone: true, - imports: [RouterLink, TranslatePipe], + imports: [RouterLink, TranslatePipe, IconComponent], templateUrl: './dashboard-shortcut-card.component.html', styleUrl: './dashboard-shortcut-card.component.scss', changeDetection: ChangeDetectionStrategy.OnPush, }) export class DashboardShortcutCardComponent { - readonly icon = input.required(); + readonly icon = input.required(); readonly labelKey = input.required(); readonly descriptionKey = input(null); readonly route = input(null); diff --git a/src/app/features/admin/dashboard/components/dashboard-status-row.component.html b/src/app/features/admin/dashboard/components/dashboard-status-row.component.html index 8b0f6ec..a11205d 100644 --- a/src/app/features/admin/dashboard/components/dashboard-status-row.component.html +++ b/src/app/features/admin/dashboard/components/dashboard-status-row.component.html @@ -5,7 +5,7 @@
} @else {
- + {{ labelKey() | translate }} @if (displayValue() !== null) { {{ displayValue() }} diff --git a/src/app/features/admin/dashboard/components/dashboard-status-row.component.ts b/src/app/features/admin/dashboard/components/dashboard-status-row.component.ts index 73d66e9..73a1b5b 100644 --- a/src/app/features/admin/dashboard/components/dashboard-status-row.component.ts +++ b/src/app/features/admin/dashboard/components/dashboard-status-row.component.ts @@ -1,14 +1,16 @@ import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core'; import { TranslatePipe } from '../../../../i18n/translate.pipe'; import { SkeletonComponent } from '../../../../shared/ui/skeleton/skeleton.component'; +import { IconComponent } from '../../../../shared/ui/icon/icon.component'; +import { AppIconName } from '../../../../shared/ui/icon/icon-registry'; import { AdminDashboardHealthStatus } from '../models/admin-dashboard.model'; -const STATUS_ICON: Record = { - healthy: 'pi-check-circle', - attention: 'pi-exclamation-triangle', - unhealthy: 'pi-times-circle', - unknown: 'pi-question-circle', - loading: 'pi-spin pi-spinner', +const STATUS_ICON: Record = { + healthy: 'checkCircle', + attention: 'warning', + unhealthy: 'xCircle', + unknown: 'help', + loading: 'spinner', }; const STATUS_TEXT_KEY: Record = { @@ -22,7 +24,7 @@ const STATUS_TEXT_KEY: Record = { @Component({ selector: 'app-dashboard-status-row', standalone: true, - imports: [TranslatePipe, SkeletonComponent], + imports: [TranslatePipe, SkeletonComponent, IconComponent], templateUrl: './dashboard-status-row.component.html', styleUrl: './dashboard-status-row.component.scss', changeDetection: ChangeDetectionStrategy.OnPush, diff --git a/src/app/features/admin/dashboard/components/dashboard-timeline.component.html b/src/app/features/admin/dashboard/components/dashboard-timeline.component.html index a39f20a..2d3df9d 100644 --- a/src/app/features/admin/dashboard/components/dashboard-timeline.component.html +++ b/src/app/features/admin/dashboard/components/dashboard-timeline.component.html @@ -31,7 +31,7 @@
    @for (entry of entries(); track entry.id) {
  1. - + {{ entry.labelKey | translate }}
    2. diff --git a/src/app/features/admin/dashboard/components/dashboard-timeline.component.ts b/src/app/features/admin/dashboard/components/dashboard-timeline.component.ts index cf323d1..0f8e47f 100644 --- a/src/app/features/admin/dashboard/components/dashboard-timeline.component.ts +++ b/src/app/features/admin/dashboard/components/dashboard-timeline.component.ts @@ -2,12 +2,14 @@ import { ChangeDetectionStrategy, Component, input } from '@angular/core'; import { TranslatePipe } from '../../../../i18n/translate.pipe'; import { SkeletonComponent } from '../../../../shared/ui/skeleton/skeleton.component'; import { EmptyStateComponent } from '../../../../shared/ui/empty-state/empty-state.component'; +import { IconComponent } from '../../../../shared/ui/icon/icon.component'; +import { AppIconName } from '../../../../shared/ui/icon/icon-registry'; export interface DashboardTimelineEntry { id: string; labelKey: string; timeText: string; - icon: string; + icon: AppIconName; } export type DashboardTimelineStatus = 'loading' | 'ready' | 'unavailable' | 'error'; @@ -15,7 +17,7 @@ export type DashboardTimelineStatus = 'loading' | 'ready' | 'unavailable' | 'err @Component({ selector: 'app-dashboard-timeline', standalone: true, - imports: [TranslatePipe, SkeletonComponent, EmptyStateComponent], + imports: [TranslatePipe, SkeletonComponent, EmptyStateComponent, IconComponent], templateUrl: './dashboard-timeline.component.html', styleUrl: './dashboard-timeline.component.scss', changeDetection: ChangeDetectionStrategy.OnPush, diff --git a/src/app/features/admin/dashboard/facade/admin-dashboard.facade.ts b/src/app/features/admin/dashboard/facade/admin-dashboard.facade.ts index 0b3cc01..526eeca 100644 --- a/src/app/features/admin/dashboard/facade/admin-dashboard.facade.ts +++ b/src/app/features/admin/dashboard/facade/admin-dashboard.facade.ts @@ -16,24 +16,24 @@ import { } from '../models/admin-dashboard.model'; const QUICK_ACTIONS: AdminDashboardQuickAction[] = [ - { id: 'add-product', icon: 'pi-plus-circle', labelKey: 'dashboard.actionAddProduct', descriptionKey: 'dashboard.actionAddProductDescription', route: ['backoffice', 'products', 'create'] }, - { id: 'create-category', icon: 'pi-sitemap', labelKey: 'dashboard.actionCreateCategory', descriptionKey: 'dashboard.actionCreateCategoryDescription', route: ['backoffice', 'categories', 'create'] }, - { id: 'edit-project', icon: 'pi-th-large', labelKey: 'dashboard.actionEditProject', descriptionKey: 'dashboard.actionEditProjectDescription', route: ['edit'] }, - { id: 'edit-homepage', icon: 'pi-home', labelKey: 'dashboard.actionEditHomepage', descriptionKey: 'dashboard.actionEditHomepageDescription', route: ['edit', 'homepage'] }, - { id: 'media-library', icon: 'pi-images', labelKey: 'dashboard.actionMediaLibrary', descriptionKey: 'dashboard.actionMediaLibraryDescription', route: ['backoffice', 'media'] }, - { id: 'orders', icon: 'pi-shopping-cart', labelKey: 'dashboard.actionOrders', descriptionKey: 'dashboard.actionOrdersDescription', route: ['backoffice', 'orders'] }, + { id: 'add-product', icon: 'plusCircle', labelKey: 'dashboard.actionAddProduct', descriptionKey: 'dashboard.actionAddProductDescription', route: ['backoffice', 'products', 'create'] }, + { id: 'create-category', icon: 'network', labelKey: 'dashboard.actionCreateCategory', descriptionKey: 'dashboard.actionCreateCategoryDescription', route: ['backoffice', 'categories', 'create'] }, + { id: 'edit-project', icon: 'layoutGrid', labelKey: 'dashboard.actionEditProject', descriptionKey: 'dashboard.actionEditProjectDescription', route: ['edit'] }, + { id: 'edit-homepage', icon: 'home', labelKey: 'dashboard.actionEditHomepage', descriptionKey: 'dashboard.actionEditHomepageDescription', route: ['edit', 'homepage'] }, + { id: 'media-library', icon: 'images', labelKey: 'dashboard.actionMediaLibrary', descriptionKey: 'dashboard.actionMediaLibraryDescription', route: ['backoffice', 'media'] }, + { id: 'orders', icon: 'cart', labelKey: 'dashboard.actionOrders', descriptionKey: 'dashboard.actionOrdersDescription', route: ['backoffice', 'orders'] }, ]; const SHORTCUTS: AdminDashboardShortcut[] = [ - { id: 'products', icon: 'pi-box', labelKey: 'dashboard.actionProducts', route: ['backoffice', 'products'] }, - { id: 'categories', icon: 'pi-tags', labelKey: 'dashboard.actionCategories', route: ['backoffice', 'categories'] }, - { id: 'marketplace-builder', icon: 'pi-sitemap', labelKey: 'dashboard.shortcutMarketplaceBuilder', route: ['edit'] }, - { id: 'static-pages', icon: 'pi-file-edit', labelKey: 'dashboard.actionStaticPages', route: ['backoffice', 'static-pages'] }, - { id: 'orders', icon: 'pi-shopping-cart', labelKey: 'dashboard.actionOrders', route: ['backoffice', 'orders'] }, - { id: 'users', icon: 'pi-users', labelKey: 'dashboard.actionUsers', route: ['backoffice', 'users'] }, - { id: 'settings', icon: 'pi-cog', labelKey: 'dashboard.shortcutSettings', route: [], comingSoon: true }, - { id: 'media-library', icon: 'pi-images', labelKey: 'dashboard.actionMediaLibrary', route: ['backoffice', 'media'] }, - { id: 'content', icon: 'pi-align-left', labelKey: 'dashboard.shortcutContent', route: ['edit', 'static-pages'] }, + { id: 'products', icon: 'package', labelKey: 'dashboard.actionProducts', route: ['backoffice', 'products'] }, + { id: 'categories', icon: 'tags', labelKey: 'dashboard.actionCategories', route: ['backoffice', 'categories'] }, + { id: 'marketplace-builder', icon: 'network', labelKey: 'dashboard.shortcutMarketplaceBuilder', route: ['edit'] }, + { id: 'static-pages', icon: 'edit', labelKey: 'dashboard.actionStaticPages', route: ['backoffice', 'static-pages'] }, + { id: 'orders', icon: 'cart', labelKey: 'dashboard.actionOrders', route: ['backoffice', 'orders'] }, + { id: 'users', icon: 'users', labelKey: 'dashboard.actionUsers', route: ['backoffice', 'users'] }, + { id: 'settings', icon: 'settings', labelKey: 'dashboard.shortcutSettings', route: [], comingSoon: true }, + { id: 'media-library', icon: 'images', labelKey: 'dashboard.actionMediaLibrary', route: ['backoffice', 'media'] }, + { id: 'content', icon: 'alignLeft', labelKey: 'dashboard.shortcutContent', route: ['edit', 'static-pages'] }, ]; /** diff --git a/src/app/features/admin/dashboard/models/admin-dashboard.model.ts b/src/app/features/admin/dashboard/models/admin-dashboard.model.ts index 3323cc5..0de11a5 100644 --- a/src/app/features/admin/dashboard/models/admin-dashboard.model.ts +++ b/src/app/features/admin/dashboard/models/admin-dashboard.model.ts @@ -1,3 +1,5 @@ +import { AppIconName } from '../../../../shared/ui/icon/icon-registry'; + export type AdminDashboardCardStatus = 'loading' | 'ready' | 'empty' | 'error' | 'pending-backend'; export interface AdminDashboardCardState { @@ -28,7 +30,7 @@ export type AdminDashboardQuickActionId = export interface AdminDashboardQuickAction { id: AdminDashboardQuickActionId; - icon: string; + icon: AppIconName; labelKey: string; descriptionKey: string; route: string[]; @@ -73,7 +75,7 @@ export interface AdminDashboardDraftField { export interface AdminDashboardShortcut { id: string; - icon: string; + icon: AppIconName; labelKey: string; route: string[]; comingSoon?: boolean; diff --git a/src/app/features/admin/dashboard/pages/admin-dashboard-page.component.html b/src/app/features/admin/dashboard/pages/admin-dashboard-page.component.html index 91c0889..e9a3e94 100644 --- a/src/app/features/admin/dashboard/pages/admin-dashboard-page.component.html +++ b/src/app/features/admin/dashboard/pages/admin-dashboard-page.component.html @@ -41,7 +41,7 @@ - + @if (facade.dirty()) {

    {{ 'dashboard.draftStatusHasChanges' | translate }}

    @if (facade.modifiedFieldLabelKeys().length > 0) { @@ -66,21 +66,21 @@
} @else {

- + {{ 'dashboard.draftStatusAllPublished' | translate }}

} - + @for (check of facade.homeHealthChecks(); track check.code) { } - + @@ -99,12 +99,12 @@ - +
    @for (link of documentationLinks; track link.id) {
  • diff --git a/src/app/features/admin/dashboard/pages/admin-dashboard-page.component.ts b/src/app/features/admin/dashboard/pages/admin-dashboard-page.component.ts index 1b920cd..c192554 100644 --- a/src/app/features/admin/dashboard/pages/admin-dashboard-page.component.ts +++ b/src/app/features/admin/dashboard/pages/admin-dashboard-page.component.ts @@ -11,19 +11,21 @@ import { DashboardStatusRowComponent } from '../components/dashboard-status-row. import { DashboardShortcutCardComponent } from '../components/dashboard-shortcut-card.component'; import { DashboardTimelineComponent, DashboardTimelineEntry, DashboardTimelineStatus } from '../components/dashboard-timeline.component'; import { ButtonComponent } from '../../../../shared/ui/button/button.component'; +import { IconComponent } from '../../../../shared/ui/icon/icon.component'; import { AdminDashboardQuickAction, AdminDashboardShortcut } from '../models/admin-dashboard.model'; +import { AppIconName } from '../../../../shared/ui/icon/icon-registry'; interface LinkedAction { - icon: string; + icon: AppIconName; labelKey: string; descriptionKey?: string; route: string[]; comingSoon: boolean; } -const ACTIVITY_ICON: Record = { - 'draft-saved': 'pi-save', - published: 'pi-upload', +const ACTIVITY_ICON: Record = { + 'draft-saved': 'save', + published: 'upload', }; const ACTIVITY_LABEL_KEY: Record = { @@ -31,11 +33,11 @@ const ACTIVITY_LABEL_KEY: Record = { published: 'dashboard.activityPublished', }; -const DOCUMENTATION_LINKS = [ - { id: 'documentation', icon: 'pi-book', labelKey: 'dashboard.docDocumentation' }, - { id: 'shortcuts', icon: 'pi-bolt', labelKey: 'dashboard.docKeyboardShortcuts' }, - { id: 'report-issue', icon: 'pi-flag', labelKey: 'dashboard.docReportIssue' }, - { id: 'release-notes', icon: 'pi-megaphone', labelKey: 'dashboard.docReleaseNotes' }, +const DOCUMENTATION_LINKS: Array<{ id: string; icon: AppIconName; labelKey: string }> = [ + { id: 'documentation', icon: 'book', labelKey: 'dashboard.docDocumentation' }, + { id: 'shortcuts', icon: 'zap', labelKey: 'dashboard.docKeyboardShortcuts' }, + { id: 'report-issue', icon: 'flag', labelKey: 'dashboard.docReportIssue' }, + { id: 'release-notes', icon: 'megaphone', labelKey: 'dashboard.docReleaseNotes' }, ]; @Component({ @@ -51,6 +53,7 @@ const DOCUMENTATION_LINKS = [ DashboardShortcutCardComponent, DashboardTimelineComponent, ButtonComponent, + IconComponent, ], templateUrl: './admin-dashboard-page.component.html', styleUrls: ['./admin-dashboard-page.component.scss'], @@ -98,7 +101,7 @@ export class AdminDashboardPageComponent { id: entry.id, labelKey: ACTIVITY_LABEL_KEY[entry.type] ?? entry.type, timeText: new Date(entry.timestamp).toLocaleString(this.languageService.currentLanguage()), - icon: ACTIVITY_ICON[entry.type] ?? 'pi-circle', + icon: ACTIVITY_ICON[entry.type] ?? 'circle', })), ); diff --git a/src/app/shared/ui/icon/icon-registry.ts b/src/app/shared/ui/icon/icon-registry.ts index 1a7c2b2..3e67b25 100644 --- a/src/app/shared/ui/icon/icon-registry.ts +++ b/src/app/shared/ui/icon/icon-registry.ts @@ -73,7 +73,8 @@ import { LucideUsers as Users, LucideVideo as Video, LucideX as X, - LucideXCircle as XCircle + LucideXCircle as XCircle, + LucideZap as Zap } from '@lucide/angular'; /** @@ -113,6 +114,7 @@ export const APP_ICONS = { edit: Pencil, trash: Trash2, copy: Copy, + save: Save, plus: Plus, plusCircle: PlusCircle, minus: Minus, @@ -156,7 +158,8 @@ export const APP_ICONS = { layoutGrid: LayoutGrid, verified: BadgeCheck, video: Video, - circle: Circle + circle: Circle, + zap: Zap } as const; export type AppIconName = keyof typeof APP_ICONS;