# SaveInMed Marketplace Frontend

The Marketplace is the customer-facing B2B application where pharmacies purchase products from distributors.

## 🏗 Architecture

The frontend is built with React and Vite, utilizing a component-based architecture state management.

```mermaid
graph TD
    %% User
    User((User))

    %% Core
    subgraph "Application Core"
        App[App Root]
        Router[React Router]
        Store[Zustand Store]
        Query[TanStack Query]
    end

    %% Pages
    subgraph "Pages / Routes"
        LoginP[Login/Auth]
        HomeP[Home / Catalog]
        ProdP[Product Details]
        CartP[Shopping Cart]
        CheckoutP[Checkout]
        ProfileP[User Profile]
        OrdersP[Order History]
    end

    %% Feature Components
    subgraph "Smart Components"
        AuthForm[Auth Forms]
        ProdGrid[Product Grid]
        CartWidget[Cart Widget]
        PayWidget[Payment Widget]
        AddressForm[Address Manager]
    end

    %% API Layer
    subgraph "API Integration"
        API[API Client (Axios)]
        Backend[Backend API]
    end

    %% Flow
    User --> App
    App --> Router
    App --> Store
    
    Router --> LoginP
    Router --> HomeP
    Router --> ProdP
    Router --> CartP
    Router --> CheckoutP
    Router --> ProfileP
    Router --> OrdersP

    HomeP --> ProdGrid
    CartP --> CartWidget
    CheckoutP --> PayWidget
    CheckoutP --> AddressForm
    
    ProdGrid --> Store
    CartWidget --> Store
    PayWidget --> Store
    
    Store --> API
    Query --> API
    API --> Backend

    %% Styling
    style User fill:#f9f,stroke:#333,stroke-width:2px
    style Backend fill:#f87171,stroke:#333,stroke-width:2px
    style Store fill:#60a5fa,stroke:#333
```

## 🛠 Tech Stack
- **Framework**: React 18 + Vite
- **Styling**: TailwindCSS
- **State**: Zustand + TanStack Query
- **Routing**: React Router DOM
- **HTTP**: Axios

## 📦 Key Modules
- **Authentication**: JWT-based login and session management
- **Catalog**: Virtualized product lists with search and filter
- **Checkout**: Multi-step checkout with payment integration
- **Dashboard**: User order history and status tracking

## 🧪 Tests

```bash
npm test
```

> For the complete test matrix (with/without DB and Playwright), see: [docs/TESTES.md](../docs/TESTES.md)