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)