| 1 | # Frontend UI/UX Requirements |
| 2 | |
| 3 | All frontend work must preserve a production-grade investment intelligence experience. The product must feel like premium financial SaaS, not a generic admin dashboard or raw CRUD interface. |
| 4 | |
| 5 | ## Design Goals |
| 6 | |
| 7 | - Clean, modern, responsive desktop/tablet/mobile layouts. |
| 8 | - Strong information hierarchy for portfolio and research workflows. |
| 9 | - Accessible typography, keyboard navigation, semantic HTML, visible focus states, and adequate contrast. |
| 10 | - Consistent spacing, terminology, component behavior, and data presentation. |
| 11 | - Professional financial tables, charts, risk indicators, and BUY / HOLD / SELL status presentation. |
| 12 | - Minimal animation, restrained color, and no visually noisy dashboard composition. |
| 13 | - Financial readability takes priority over decorative visuals. |
| 14 | |
| 15 | ## Design System |
| 16 | |
| 17 | Frontend implementation must use reusable components for: |
| 18 | |
| 19 | - typography scale |
| 20 | - spacing scale |
| 21 | - cards |
| 22 | - buttons |
| 23 | - inputs |
| 24 | - badges |
| 25 | - tabs |
| 26 | - tables |
| 27 | - drawers |
| 28 | - dialogs |
| 29 | - tooltips |
| 30 | - skeleton loading |
| 31 | - empty states |
| 32 | - error states |
| 33 | - status indicators |
| 34 | - responsive navigation |
| 35 | - chart containers |
| 36 | |
| 37 | Tailwind CSS and shadcn/ui may be introduced only when compatible with the current Next.js setup and when the added dependency weight is justified. Large UI libraries should not be introduced by default. |
| 38 | |
| 39 | ## Application Shell |
| 40 | |
| 41 | The application must use a professional shell with: |
| 42 | |
| 43 | - collapsible sidebar navigation |
| 44 | - top command/search area |
| 45 | - notification area |
| 46 | - user/account menu |
| 47 | - responsive mobile navigation |
| 48 | |
| 49 | Primary navigation should include Dashboard, Portfolio, Research, Screener, Watchlist, Insights, Brokers, and Settings as the product matures. |
| 50 | |
| 51 | ## Phase 1 Frontend Scope |
| 52 | |
| 53 | Phase 1 frontend must provide professional UI for: |
| 54 | |
| 55 | - application shell |
| 56 | - sidebar navigation |
| 57 | - dashboard |
| 58 | - portfolio list/client selection |
| 59 | - portfolio detail |
| 60 | - holdings table |
| 61 | - portfolio summary cards |
| 62 | - allocation visualization |
| 63 | - mock broker information |
| 64 | - demo-data indicator |
| 65 | - loading, error, and empty states |
| 66 | |
| 67 | Use the actual Phase 1 Portfolio API wherever endpoints exist. Do not hard-code portfolio results when backend endpoints are available. Mock data must be clearly labelled as demo data and never presented as live market data. |
| 68 | |
| 69 | ## Data Presentation |
| 70 | |
| 71 | Important financial areas should be designed to display: |
| 72 | |
| 73 | - last updated time |
| 74 | - source |
| 75 | - REAL-TIME, DELAYED, END-OF-DAY, or RESEARCH UPDATE freshness labels when real data exists |
| 76 | |
| 77 | Phase 1 must clearly display Demo data. |
| 78 | |
| 79 | ## Future Pages |
| 80 | |
| 81 | The stock detail architecture must be able to support: |
| 82 | |
| 83 | - company header |
| 84 | - current price, daily movement, market cap |
| 85 | - AI Opportunity Score |
| 86 | - BUY / ADD / HOLD / TRIM / SELL |
| 87 | - tabs for Overview, Financials, Valuation, Growth, Orders & Backlog, News, Analysts, Institutions, Insiders, and Risks |
| 88 | - valuation, growth, quality, catalyst, analyst, institutional, and risk scores |
| 89 | |
| 90 | Do not implement fake analysis before the relevant backend logic exists. |
| 91 | |
| 92 | ## Error And Loading Experience |
| 93 | |
| 94 | Never show blank pages while loading. Use skeleton cards, skeleton tables, and loading indicators. |
| 95 | |
| 96 | API errors must show professional user-safe messages. Do not expose stack traces, SQL errors, internal service names, secrets, or broker credentials. Show correlation IDs when available. |
| 97 | |
| 98 | ## Security Constraints |
| 99 | |
| 100 | Never request, display, or store broker passwords, Azure credentials, API keys, access tokens, or other secrets in the frontend. Broker integration screens must remain placeholder/demo-only until real provider flows are designed. |