# 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
1. **No production mock data** — Always flag mock data usage
2. **Design system tokens** — Use tokens from tailwind.config.ts, NEVER hardcode colors
3. **Responsive** — Mobile-first, test at all breakpoints
4. **Accessibility** — Use shadcn/ui primitives (Radix UI), semantic HTML
5. **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)