Skip to main content

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 (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)

MockAPI DataIntegration

CRITICAL: 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

      —
    • Revenue,DELETED expenses,(2026-03-05). invoices,All bankpages accounts,now contactsuse real API.
    • MUSTPages beuse replacedstores withvia realhooks API(useDashboardStore, callsuseInvoiceStore, when backend readyetc.)
    • FlagLoading alland mockerror datastates usagehandled within comments:every //page TODO:and Replace with API callstore

    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)
Back to top