Frontend — Status & Architecture

Bilko Web — Next.js Frontend 
 BookStack — Provjeri PRVO 
 Prije traženja bilo čega — provjeri BookStack (https://docs.basicconsulting.no). Centralna baza znanja za tools, skills, hooks, agents, rules, projekte, klijente, dokumentaciju. Ako odgovor postoji tamo — NE TRAŽI dalje. 
 Tech Stack 
 
 Framework: Next.js 15 (App Router) 
 React: 19.0.0 
 TypeScript: 5.3.0 
 Styling: Tailwind CSS 4 + shadcn/ui 
 State: Zustand 4.5.0 (installed but mostly React hooks) 
 Charts: Recharts 2.15.0 
 Icons: Lucide React 
 
 Pages (App Router) 
 All pages under app/(dashboard)/ : 
 
 dashboard/page.tsx — Revenue, expenses, charts 
 invoices/page.tsx — Invoice list 
 invoices/new/page.tsx — 6-step invoice wizard 
 expenses/page.tsx — Expense list 
 purchases/page.tsx — Alias to expenses 
 banking/page.tsx — Placeholder 
 reports/page.tsx — Reports hub (4 active report cards) 
 reports/vat/page.tsx — VAT report (real API + date filter) 
 reports/profit-loss/page.tsx — P&L statement (real API + date filter) 
 reports/balance-sheet/page.tsx — Balance sheet (real API + date filter) 
 reports/trial-balance/page.tsx — Trial balance (real API + date filter) 
 settings/page.tsx — User settings 
 
 Components 
 UI (shadcn/ui): 17 components in components/ui/ 
 
 avatar, button, card, dialog, dropdown-menu, input, label, select, separator, sheet, skeleton, table, tabs 
 
 Layout: 
 
 components/sidebar.tsx — Dark navigation sidebar 
 components/top-bar.tsx — Header with user menu 
 
 Design System 
 Embedded in tailwind.config.ts : 73 tokens 
 
 Colors: primary (#8B6BBF Plum), secondary (#5B3E8A), accent (#F2C87A Gold), surface (#F9F7FC), sidebar white, chart colors 
 Typography: Work Sans (body), National Park (headings), DM Mono (mono), 8 sizes (xs to 4xl) 
 Spacing: 8px grid (xs, sm, md, lg, xl, 2xl, 3xl) 
 Radius: 4 values (sm: 6px, md: 8px, lg: 12px, full: 9999px) 
 Shadows: card, modal, dropdown 
 Breakpoints: sm (640px), md (768px), lg (1024px), xl (1280px) 
 
 API Integration 
 All data fetched from real backend API via lib/api.ts and Zustand stores in lib/stores/ . 
 
 lib/api.ts — Typed API client with auth, token refresh, and all endpoint methods 
 lib/stores/ — Zustand stores per resource (dashboard, invoices, expenses, contacts, banking, settings) 
 lib/mock-data.ts — DELETED (2026-03-05). All pages now use real API. 
 Pages use stores via hooks (useDashboardStore, useInvoiceStore, etc.) 
 Loading and error states handled in every page and store 
 
 State Management 
 
 Zustand installed but not yet used 
 Currently: React hooks (useState, useEffect) 
 Future: Migrate to Zustand stores for global state (user, org, auth) 
 
 Development Rules 
 
 No production mock data — Always flag mock data usage 
 Design system tokens — Use tokens from tailwind.config.ts, NEVER hardcode colors 
 Responsive — Mobile-first, test at all breakpoints 
 Accessibility — Use shadcn/ui primitives (Radix UI), semantic HTML 
 TypeScript strict — No any types without explicit justification 
 
 API Integration (Future) 
 When backend ready: 
 
 Create lib/api.ts with fetch wrappers 
 Replace mock-data imports with API calls 
 Add loading states, error handling 
 Implement auth token management (JWT)