Retail briefing UI kit
Every component in the app, on one page. Data comes from src/data/mock.json; all interaction state lives in a Zustand store. No server logic, no fetching.
Zustand store
Live state. Change anything below and watch which panels re-render.
{
"density": "comfortable",
"search": "",
"statusFilter": [],
"season": "",
"division": "",
"zone": "",
"selectedIds": [],
"panelState": "ready"
}Re-render comparison
Whole store: 1 render
useDemoStore() — no selector
Density only: 1 render
useDemoStore(s => s.density)
Selection count only: 1 render
0 selected · s => s.selectedIds.length
Pill
Five tones, plus the status mapping used by the table.
neutralaccentsuccesswarningdanger
DraftSubmittedIn progressFinalised
Stat
Figures from the mock file.
Briefs
12
Committed spend
€486,200
Excludes drafts
Stores in scope
1,412
Past studio cut-off
3
Needs attention
Form controls
TextInput, Select, ChipToggle, Button — all writing to Zustand.
Status
Density
Projects table
12 of 12 rows · 0 selected
| Campaign | Project | Season | Division | Zone | Launch | Owner | Status | Stores | Days to finalise | |
|---|---|---|---|---|---|---|---|---|---|---|
| H1245 | Clubs FW26 Juventus Launch | SS26 | Football | Italy | 30 Jun 2026 | M. Keller | In progressHard | 274 | 12 | |
| H1244 | Teamsport SS26 Rollout | SS26 | Football | Central | 31 May 2026 | L. Fontaine | Submitted | 168 | 4 | |
| H1251 | Adizero FW26 Launch | FW26 | Running | Central | 30 Nov 2026 | M. Keller | DraftHard | 322 | 48 | |
| H1260 | Back to School 2026 | FW26 | Kids | East Europe | 15 Sept 2026 | T. Adeyemi | In progress | 168 | 6 overdue | |
| H1266 | Terrex Outdoor FW26 | FW26 | Outdoor | Nordics | 31 Dec 2026 | S. Novak | Draft | 50 | 72 | |
| H1271 | Samba City Pack | SS26 | Originals | North | 30 Jun 2026 | L. Fontaine | Finalised | 222 | — | |
| H1280 | End of Season Sale SS26 | SS26 | Cross-Category | Central | 31 Jul 2026 | R. Duarte | SubmittedHard | 416 | 9 | |
| H1288 | Sportswear Essentials FW26 | FW26 | Sportswear | Iberia | 20 Sept 2026 | T. Adeyemi | Draft | 100 | 31 | |
| H1292 | Pulse Football FW26 Drop 2 | FW26 | Football | Central | 31 Oct 2026 | M. Keller | In progressHard | 150 | 2 overdue | |
| H1301 | Originals Holiday FW26 | FW26 | Originals | France | 31 Dec 2026 | S. Novak | Draft | 198 | 66 | |
| H1308 | Supernova SS26 Activation | SS26 | Running | Nordics | 30 Apr 2026 | R. Duarte | Submitted | 80 | 14 overdue | |
| H1315 | Originals Icons SS26 | SS26 | Originals | Central | 15 Mar 2026 | L. Fontaine | Finalised | 186 | — |
Panel states
Skeleton and EmptyState, toggled from the store.
- Profile type
- Commercial
- Category
- Apparel & Footwear
- Touchpoints
- ISC & LZ
- Window
- Half Takeover
Graphic formats
Mock catalogue rows.
| Adicode | Format | Qty | Versions | Template |
|---|---|---|---|---|
| POS-CLP-A4H | Graphic A4 Horizontal 297x210mm | 2 | 3 | Auto |
| POS-CLP-WIN | Window 1000x2000mm | 1 | 2 | Auto |
| POS-VIN-MID | Midfloor Frame Graphic 447x1365mm | 2 | 1 | Auto |
| POS-HNG-BAN | Hanging Banner Double Sided 1000x2000mm | 1 | 2 | Manual |
| POS-LB-2400 | Lightbox Panel 2400x1200mm | 1 | 1 | Manual |
| POS-PLN-400 | Plinth Graphic 400x400mm | 3 | 2 | Manual |
Cost estimate
Static figures from the mock file.
Artwork
€18,420
Print
€41,780
Delivery
€4,800
Total
€65,000
| Country | Artwork | Delivery | Total | |
|---|---|---|---|---|
| Germany | €6,140 | €15,320 | €1,712 | €23,172 |
| France | €4,820 | €11,240 | €1,281 | €17,341 |
| Italy | €3,910 | €8,460 | €986 | €13,356 |
| Spain | €2,180 | €4,320 | €519 | €7,019 |
| Sweden | €1,370 | €2,440 | €302 | €4,112 |