refactor: marketplace release polish

Sprint 28, scoped to admin/* (user decision — full marketplace audit
declined in favor of a bounded pass over the 8 admin features from
Sprints 20-27).

- a11y: aria-label added to every bare <select> not already inside a
  <label> across categories/products/orders/transactions/users/monitoring
- loading states: app-skeleton rows/cards added to list pages that
  previously rendered blank during the initial fetch (categories, orders,
  transactions, users, monitoring's event feed, analytics summary cards)
- admin-dashboard-card's custom shimmer CSS replaced with the shared
  SkeletonComponent (same visual result, one less duplicated animation)
- bundle-size budget warning (~198kB over) confirmed pre-existing —
  present at Sprint 20's first build before any admin/* code existed,
  and new admin pages are all lazy-loaded — documented as out of scope
  for this pass rather than chased

docs/ADMIN.md + docs/SPRINT-PLAN.md updated with the scope decision and
what was explicitly not done (Lighthouse, animations, SEO/sitemap,
storefront/editor a11y).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
sdarbinyan
2026-07-16 00:14:46 +04:00
parent 1db63ac99d
commit 576f2600a5
27 changed files with 223 additions and 127 deletions

View File

@@ -6,7 +6,7 @@
<div class="dashboard-card__body">
<ng-container [ngSwitch]="status">
<div class="dashboard-card__skeleton" *ngSwitchCase="'loading'"></div>
<app-skeleton *ngSwitchCase="'loading'" shape="rect" height="24px" width="60%" />
<p class="dashboard-card__muted" *ngSwitchCase="'empty'">{{ 'dashboard.stateEmpty' | translate }}</p>

View File

@@ -68,16 +68,3 @@
color: var(--error-color, #ef4444);
}
.dashboard-card__skeleton {
height: 24px;
width: 60%;
border-radius: var(--radius-sm, 8px);
background: linear-gradient(90deg, var(--bg-secondary, #f5f5f5) 25%, var(--bg-tertiary, #f0f0f0) 37%, var(--bg-secondary, #f5f5f5) 63%);
background-size: 400% 100%;
animation: dashboard-card-shimmer 1.4s ease infinite;
}
@keyframes dashboard-card-shimmer {
0% { background-position: 100% 50%; }
100% { background-position: 0 50%; }
}

View File

@@ -2,11 +2,12 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TranslatePipe } from '../../../../i18n/translate.pipe';
import { AdminDashboardCardStatus } from '../models/admin-dashboard.model';
import { SkeletonComponent } from '../../../../shared/ui/skeleton/skeleton.component';
@Component({
selector: 'app-admin-dashboard-card',
standalone: true,
imports: [CommonModule, TranslatePipe],
imports: [CommonModule, TranslatePipe, SkeletonComponent],
templateUrl: './admin-dashboard-card.component.html',
styleUrls: ['./admin-dashboard-card.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,