44 lines
1.9 KiB
Markdown
44 lines
1.9 KiB
Markdown
|
# Admin dashboard visual unify — design spec
|
|||
|
|
|
|||
|
|
**Date:** 2026-10-14
|
|||
|
|
**Status:** Approved (owner)
|
|||
|
|
**Scope:** Visual chrome only on the admin dashboard
|
|||
|
|
|
|||
|
|
## Goal
|
|||
|
|
|
|||
|
|
Make the admin dashboard look like the rest of the admin panel: calm, bordered cards, brand navy, even spacing. Remove marketing-style gradients, gold chips, lift hover, and multi-colour KPI accents that made the page feel scattered.
|
|||
|
|
|
|||
|
|
## Decisions
|
|||
|
|
|
|||
|
|
| Decision | Choice |
|
|||
|
|
|---|---|
|
|||
|
|
| Content / API | Unchanged — same fields, sorts, charts, `GET dashboard/overview` |
|
|||
|
|
| Approach | Unify with panel chrome (not a new IA, not polish-only) |
|
|||
|
|
| Filters / refresh / export | Out of scope (PROTECTED §A) |
|
|||
|
|
|
|||
|
|
## Visual rules
|
|||
|
|
|
|||
|
|
1. **Page background** — no radial gold/navy wash; no negative margin on the dashboard container.
|
|||
|
|
2. **Header** — title «نمای کلی» + muted subtitle «آمار ۳۰ روز گذشته · بهروز از سرور»; remove «منتزر» badge.
|
|||
|
|
3. **Chart/table cards** — light border / default ant Card look; drop heavy multi-layer shadows.
|
|||
|
|
4. **Period labels** — muted text next to the title (not gold pills).
|
|||
|
|
5. **KPI cards** — flat; soft grey icon well + `#1c2d56` icon/value; no side accent bar; no translateY hover.
|
|||
|
|
6. **Sales summary** — three equal cells; no gold accent on the average.
|
|||
|
|
7. **Spacing** — ~16px gap between blocks.
|
|||
|
|
8. **Chart series colours** — keep `#1c2d56 / #28c76f / #ff9f43 / #ea5455` and −45° x-label rotation.
|
|||
|
|
|
|||
|
|
## Files
|
|||
|
|
|
|||
|
|
- `apps/admin-panel/src/views/Dashboard.vue`
|
|||
|
|
- `apps/admin-panel/src/components/statistics-cards/StatisticsCardLine.vue`
|
|||
|
|
- `docs/parity/PROTECTED.md` §A (document chrome change)
|
|||
|
|
- `docs/parity/CHANGELOG.md`
|
|||
|
|
|
|||
|
|
## States
|
|||
|
|
|
|||
|
|
Loading (`a-spin`), empty product chart (`a-empty`), tables, and fetch error handling stay as today.
|
|||
|
|
|
|||
|
|
## Done when
|
|||
|
|
|
|||
|
|
Same stats and charts render; page reads as part of the admin shell (no gradient / gold chip / card lift); desktop and mobile grids still work.
|