starcoach-hackathon/zarinpal-analytics-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: refine responsive dashboard filters

Browse Source
This commit is contained in:
Amirhossein Khalili
2026-08-20 22:54:20 +03:30
parent 458ab69a3c
commit b599cdfba4
12 changed files with 299 additions and 284 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
DESIGN.md
View File

@@ -132,6 +132,7 @@ The approved Persian-first baseline remains authoritative where the shipped arti
| Version | Date | Decision |
| ------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 0.7.0 | 2026-08-20 | Made period changes confirm-on-selection, moved narrow-screen filters into a bottom sheet, enlarged collapsed navigation targets, simplified focus rings, and promoted the fee-share chart into a dedicated visual column. |
| 0.6.0 | 2026-08-20 | Added full-span Jalali period selection, unified transaction status/amount controls, persistent skeleton states, custom RTL dropdowns, semantic peer/retry tones, and fee-share visualization; tightened the narrow navbar and 600px KPI breakpoint. |
| 0.5.0 | 2026-08-20 | Reconciled the approved baseline with the shipped routed frontend and desktop, mobile, and 639px review captures; converted the file to canonical DESIGN.md format and added the design sidecar. |
| 0.4.0 | 2026-08-20 | Adopted the current ZarinPal panel as the closer interaction reference: top wordmark bar, 256/72px collapsible right sidebar, 8px data surfaces, routed sections, URL-backed period and terminal filters, payment-history chart, transaction table, attempt history, formula help, and supportive insights. |
@@ -197,7 +198,7 @@ The palette is a neutral financial canvas with one decisive blue voice, a very s
### Hierarchy
- **Page Heading** (800, 20px; 24px from 640px, 1.4): Routed page identity at the top of the workspace.
- **Section Heading** (700, 20px; 24px from 640px, 1.5): Major analytics modules and methodology groups.
- **Section Heading** (700, 20px; 24px from 640px, 1.5): Major analytics modules and explanatory groups.
- **Metric** (800, 24px, 1.25): KPI values, amounts, rates, and transaction totals; use tabular numerals.
- **Body** (400, 15px, 1.8): Default interface copy and longer Persian explanations.
- **Supporting** (400, 14px, usually 1.75): Descriptions, filters, table content, and insight summaries.
@@ -245,7 +246,7 @@ The form language is low-radius and precise. Data cards, filter bars, inputs, se
- **Shape:** Compact, bordered or filled, with 6–8px corners and 32–36px desktop height; touch layouts raise interactive targets to at least 44px.
- **Primary:** Action blue with white content in light mode and dark ink on the brighter night action blue.
- **Hover / Focus:** Hover changes tone; active state moves down by 1px where the action is press-like. Keyboard focus uses a visible 3px semantic blue ring. State transitions stay around 160ms.
- **Hover / Focus:** Hover changes tone; active state moves down by 1px where the action is press-like. Keyboard focus uses a restrained 1px semantic blue ring plus the border shift. State transitions stay around 160ms.
- **Ghost:** Transparent at rest, muted-neutral on hover, used for inactive range choices and utility icons.
### Chips
@@ -264,7 +265,7 @@ The form language is low-radius and precise. Data cards, filter bars, inputs, se
### Inputs / Fields
- **Style:** Transparent or workspace-toned field, 1px input border, 6–8px radius, 32–36px desktop height, 44px touch height, and compact 12–14px text. Terminal and status selects use the same RTL popover primitive rather than the browser-native menu.
- **Focus:** Border shifts to the ring color and gains a visible 3px half-opacity blue ring.
- **Focus:** Border shifts to the ring color and gains a restrained 1px low-opacity blue ring.
- **Error / Disabled:** Error uses danger border plus ring; disabled fields reduce opacity and preserve legible text.
### Navigation
@@ -279,7 +280,7 @@ The signature KPI card pairs a muted label and optional formula help with a sema
### Reporting Scope Filter
Daily, Saturday–Friday weekly, Jalali-month, and Persian-season controls share one URL-backed bar. Exact period selection opens a compact RTL popover: a four-digit Jalali year input, month navigation plus calendar grid for day/week, whole-week hover and selection, and named month/season choices. Transaction status and a two-thumb RTL amount range join the same bar after a divider. Backend-offered complete periods are the selectable authority.
Daily, Saturday–Friday weekly, Jalali-month, and Persian-season controls share one URL-backed bar. Clicking a period type first opens the exact-period picker; the URL and backend request change only after a concrete period is chosen. The compact RTL popover provides a four-digit Jalali year input, month navigation plus calendar grid for day/week, whole-week hover and selection, and named month/season choices. Transaction status and a two-thumb RTL amount range sit to the physical right of the calendar control after a divider. Below 768px, the full set moves into a bottom sheet. Backend-offered complete periods are the selectable authority.
### Loading State
@@ -295,7 +296,7 @@ The table stays inside a bordered 8px surface, receives its compact filters from
### Fee Share and Comparative Progress
The fee page pairs numeric KPIs with a compact circular share chart. Peer progress bars move from rose through amber and sky to emerald as the direction-adjusted percentile improves. Retry guidance uses amber, sky, or emerald surfaces and changes its supportive sentence at tested recovery/sample thresholds.
The fee page gives the circular share chart a large physical-right column while three numeric KPI cards stack in the adjacent column. Peer progress bars move from rose through amber and sky to emerald as the direction-adjusted percentile improves. Retry guidance uses amber, sky, or emerald surfaces and changes its supportive sentence at tested recovery/sample thresholds.
## Do's and Don'ts