Frontend — Status & Architecture

Bilko Web — Next.js Frontend 
 BookStack — Provjeri PRVO 
 Prije traženja bilo čega — provjeri BookStack (http://localhost:6875). 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 
 reports/vat/page.tsx — VAT report 
 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 (#00E5A0), sidebar dark (#111113), chart colors 
 Typography: Inter font, 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) 
 
 Mock Data 
 CRITICAL: All data from lib/mock-data.ts 
 
 Revenue, expenses, invoices, bank accounts, contacts 
 MUST be replaced with real API calls when backend ready 
 Flag all mock data usage with comments: // TODO: Replace with API call 
 
 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)