Inventory Hub

Inventory Hub is a small, focused dashboard for viewing inventory and orders in a clear, predictable way. It is designed as a read-only operational interface: no mutations, no hidden magic, just stateful UI backed by a simple API.

The goal of the project is to build a clean frontend that behaves well under real conditions such as pagination, partial failures, slow networks, and direct linking.

What this app does

• Displays inventory items with limit/offset pagination
• Displays orders as a list with a dedicated detail panel
• Keeps list state, selection, and pagination in sync with the URL
• Handles loading, empty, and error states explicitly
• Remains usable when the backend is slow or temporarily unavailable

There are no create/update/delete actions by design.

Key design choices

Read-only by intention

This dashboard is meant to observe system state, not mutate it. Keeping it read-only simplifies reasoning, avoids accidental side effects, and makes UI state easier to trust.

Explicit state handling

Every screen distinguishes clearly between:

• loading
• empty result
• error
• data loaded

These states are mutually exclusive and never overlap in the UI.

URL as a source of truth

The current view can be fully restored from the URL:

• active tab
• pagination (limit / offset)
• selected order (when applicable)

This allows:

• refresh without losing context
• browser back/forward navigation
• sharing links to a specific view

Example URLs

• /?tab=inventory&inventoryLimit=10&inventoryOffset=0
• /?tab=orders&ordersLimit=5&ordersOffset=5
• /?tab=orders&orderId=order-1&ordersLimit=10&ordersOffset=0

Defensive UI behavior

• Rapid interactions do not cause stale data to appear
• Older requests are ignored when a newer selection is made
• If a selected order disappears due to pagination, the selection is cleared gracefully

Frontend structure

src/
  components/
    ui/
      EmptyState.tsx
      ErrorBox.tsx
      PaginationControls.tsx
      Skeleton.tsx
  pages/
    InventoryPage.tsx
    OrdersPage.tsx
  utils/
    urlState.ts

• Pages own their data fetching and local state
• UI components are small, reusable, and presentation-focused
• urlState centralizes all URL parsing and updates to avoid duplication and drift

Error handling

Backend and network errors are surfaced to the user with:

• a clear error code
• a readable message
• retry actions where applicable

Errors never appear together with loading or empty states.

Tech stack

• React
• TypeScript
• Vite
• Plain CSS-in-JS / colocated styles (no UI framework)
• No external state management or routing libraries are used.

Running locally

npm install
npm run dev

The app expects a backend API to be available. Environment variables are documented in .env.example.