# gapuccino/prueba-front architecture

> Architecture diagram of the GitHub repository gapuccino/prueba-front, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-08-10). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/gapuccino/prueba-front
- Repository: https://github.com/gapuccino/prueba-front

## Overview

#### Purpose and Runtime
Single-page cargo-order management UI for listing, filtering, monitoring, and inspecting freight orders. It runs as a React + TypeScript application built and served by Vite; deployment is suitable for static hosting such as Vercel. Browser-side REST endpoints are injected through Vite environment variables in `.env.example`.

#### Bootstrapping and View Control
`src/main.tsx` mounts the application and global styles from `src/index.css`. `src/App.tsx` is the top-level composition and owns switching between the order-list and selected-order detail experiences, rather than relying on a separate routing directory.
- `src/main.tsx`
- `src/App.tsx`
- `src/views/OrderListView/OrderListView.tsx`
- `src/views/OrderDetailsView/OrderDetailsView.tsx`

#### Domain Model and Data Boundary
Order interfaces centralize the client’s expected API shape, status codes, locations, and display fields. `src/services/api.ts` is the external-data boundary: it reads the configured upcoming/all-orders REST URLs, fetches and normalizes responses, and degrades to bundled local data when the API/network is unavailable. This keeps UI components independent of transport and response irregularities.
- `src/types/order.ts`
- `src/services/api.ts`
- `src/services/mockData.ts`

#### List Discovery Flow
The list view obtains orders through the service layer, partitions or presents them through Upcoming/Completed/Past tabs, and applies interactive order-number search. It renders each result as an `OrderCard`; callbacks propagate resume/selection actions upward to `App` for transition to the detail view.
- `src/views/OrderListView/OrderListView.tsx`
- `src/components/common/Tabs/Tabs.tsx`
- `src/components/common/SearchBar/SearchBar.tsx`
- `src/components/orders/OrderCard/OrderCard.tsx`

#### Time-Gated Order Actions
Order cards use a live countdown based on order date/time utilities. Future orders display remaining time; elapsed/ready orders enable their navigation action. This is a browser-local timer/control boundary, not a server-side scheduling system.
- `src/components/common/CountdownTimer/CountdownTimer.tsx`
- `src/components/orders/OrderCard/OrderCard.tsx`
- `src/utils/time.ts`

#### Detail, Location, and Tracking Flow
The detail view receives the selected order and exposes pickup versus dropoff information through local UI state and an expandable information panel. The timeline translates order status into visible shipment progression. “Track Order” availability is gated by `status_code >= 3`; current action behavior is browser-console output rather than integration with a tracking provider.
- `src/views/OrderDetailsView/OrderDetailsView.tsx`
- `src/components/common/ExpandablePanel/ExpandablePanel.tsx`
- `src/components/orders/OrderTimeline/OrderTimeline.tsx`

#### Presentation Resilience and Shared UI
Shared header, accessible tabs/search/panels, and local SVG icon components provide the reusable presentation layer. Avatar handling is deliberately resilient: absent or invalid API image data is converted to an inline generated SVG, avoiding broken remote image rendering.
- `src/components/common/Header/Header.tsx`
- `src/components/common/icons/index.ts`
- `src/utils/avatar.ts`

#### External Dependencies and Operational Constraints
Node.js 18+ is required for development/build. The only stated external runtime services are the two REST order endpoints configured as `VITE_API_UPCOMING_URL` and `VITE_API_ALL_ORDERS_URL`; mock data permits functional offline/API-failure behavior. No backend, database, authentication, map, or real tracking service is represented in the repository tree.

Main entry points: [`src/App.tsx`](https://github.com/gapuccino/prueba-front/blob/main/src/App.tsx) (View controller), [`src/views/OrderListView/OrderListView.tsx`](https://github.com/gapuccino/prueba-front/blob/main/src/views/OrderListView/OrderListView.tsx) (Order list view), [`src/components/orders/OrderCard/OrderCard.tsx`](https://github.com/gapuccino/prueba-front/blob/main/src/components/orders/OrderCard/OrderCard.tsx) (Order card), [`src/views/OrderDetailsView/OrderDetailsView.tsx`](https://github.com/gapuccino/prueba-front/blob/main/src/views/OrderDetailsView/OrderDetailsView.tsx) (Order details view)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_bootstrap["Application Shell"]
  node_vite{{"Vite browser runtime<br/>build/runtime"}}
  node_main["Application entry<br/>React entry<br/>[main.tsx]"]
  node_app["View controller<br/>React composition<br/>[App.tsx]"]
end

subgraph group_data["Order Data"]
  node_order_model["Order model<br/>TypeScript domain types<br/>[order.ts]"]
  node_order_api["Order API service<br/>REST data boundary<br/>[api.ts]"]
  node_rest_endpoints{{"Order REST endpoints<br/>external REST APIs"}}
  node_mock_data["Bundled fallback orders<br/>offline data<br/>[mockData.ts]"]
end

subgraph group_list["Order Discovery"]
  node_order_list["Order list view<br/>React view<br/>[OrderListView.tsx]"]
  node_list_controls["Tabs and search<br/>shared controls<br/>[Tabs.tsx]"]
  node_order_card["Order card<br/>order presentation<br/>[OrderCard.tsx]"]
  node_countdown["Live countdown<br/>browser timer UI<br/>[CountdownTimer.tsx]"]
  node_time_utils["Order time utilities<br/>time logic<br/>[time.ts]"]
end

subgraph group_detail["Order Detail"]
  node_order_details["Order details view<br/>React view"]
  node_detail_panel["Expandable details<br/>shared panel"]
  node_timeline["Shipment timeline<br/>status presentation<br/>[OrderTimeline.tsx]"]
end

subgraph group_shared["Shared UI"]
  node_header["Shared header<br/>shared layout<br/>[Header.tsx]"]
  node_icons["SVG icons<br/>shared presentation<br/>[index.ts]"]
  node_avatar["Avatar fallback<br/>presentation resilience<br/>[avatar.ts]"]
end

node_vite -->|"serves"| node_main
node_main -->|"mounts"| node_app
node_app -->|"shows list"| node_order_list
node_app -->|"shows selected order"| node_order_details
node_app -->|"composes"| node_header
node_order_api -->|"fetches"| node_rest_endpoints
node_order_api -.->|"falls back to"| node_mock_data
node_order_api -->|"normalizes to"| node_order_model
node_order_list -->|"loads orders"| node_order_api
node_order_list -->|"uses"| node_list_controls
node_order_list -->|"renders"| node_order_card
node_order_card -->|"uses"| node_countdown
node_countdown -->|"calculates with"| node_time_utils
node_order_card -->|"selects order"| node_app
node_order_details -->|"uses"| node_detail_panel
node_order_details -->|"renders"| node_timeline
node_order_details -->|"reads"| node_order_model
node_order_card -->|"renders avatar via"| node_avatar
node_header -->|"uses"| node_icons

click node_main "https://github.com/gapuccino/prueba-front/blob/main/src/main.tsx"
click node_app "https://github.com/gapuccino/prueba-front/blob/main/src/App.tsx"
click node_order_model "https://github.com/gapuccino/prueba-front/blob/main/src/types/order.ts"
click node_order_api "https://github.com/gapuccino/prueba-front/blob/main/src/services/api.ts"
click node_mock_data "https://github.com/gapuccino/prueba-front/blob/main/src/services/mockData.ts"
click node_order_list "https://github.com/gapuccino/prueba-front/blob/main/src/views/OrderListView/OrderListView.tsx"
click node_list_controls "https://github.com/gapuccino/prueba-front/blob/main/src/components/common/Tabs/Tabs.tsx"
click node_order_card "https://github.com/gapuccino/prueba-front/blob/main/src/components/orders/OrderCard/OrderCard.tsx"
click node_countdown "https://github.com/gapuccino/prueba-front/blob/main/src/components/common/CountdownTimer/CountdownTimer.tsx"
click node_time_utils "https://github.com/gapuccino/prueba-front/blob/main/src/utils/time.ts"
click node_order_details "https://github.com/gapuccino/prueba-front/blob/main/src/views/OrderDetailsView/OrderDetailsView.tsx"
click node_detail_panel "https://github.com/gapuccino/prueba-front/blob/main/src/components/common/ExpandablePanel/ExpandablePanel.tsx"
click node_timeline "https://github.com/gapuccino/prueba-front/blob/main/src/components/orders/OrderTimeline/OrderTimeline.tsx"
click node_header "https://github.com/gapuccino/prueba-front/blob/main/src/components/common/Header/Header.tsx"
click node_icons "https://github.com/gapuccino/prueba-front/blob/main/src/components/common/icons/index.ts"
click node_avatar "https://github.com/gapuccino/prueba-front/blob/main/src/utils/avatar.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_vite,node_main,node_app toneBlue
class node_order_model,node_order_api,node_rest_endpoints,node_mock_data toneAmber
class node_order_list,node_list_controls,node_order_card,node_countdown,node_time_utils toneMint
class node_order_details,node_detail_panel,node_timeline toneRose
class node_header,node_icons,node_avatar toneIndigo
```

## Components

### Application Shell

- **Vite browser runtime**: build/runtime · Builds the React SPA and injects REST endpoint variables.
- [Application entry](https://github.com/gapuccino/prueba-front/blob/main/src/main.tsx): React entry · `src/main.tsx`
- [View controller](https://github.com/gapuccino/prueba-front/blob/main/src/App.tsx): React composition · Owns list-to-detail selection state. · `src/App.tsx`

### Order Data

- [Order model](https://github.com/gapuccino/prueba-front/blob/main/src/types/order.ts): TypeScript domain types · Defines API order shape, statuses, locations, and display fields. · `src/types/order.ts`
- [Order API service](https://github.com/gapuccino/prueba-front/blob/main/src/services/api.ts): REST data boundary · Fetches and normalizes configured upcoming and all-order responses. · `src/services/api.ts`
- **Order REST endpoints**: external REST APIs · Configured by VITE_API_UPCOMING_URL and VITE_API_ALL_ORDERS_URL.
- [Bundled fallback orders](https://github.com/gapuccino/prueba-front/blob/main/src/services/mockData.ts): offline data · Keeps the UI functional when APIs or network fail. · `src/services/mockData.ts`

### Order Discovery

- [Order list view](https://github.com/gapuccino/prueba-front/blob/main/src/views/OrderListView/OrderListView.tsx): React view · Loads orders, partitions tabs, and handles order-number search. · `src/views/OrderListView/OrderListView.tsx`
- [Tabs and search](https://github.com/gapuccino/prueba-front/blob/main/src/components/common/Tabs/Tabs.tsx): shared controls · `src/components/common/Tabs/Tabs.tsx`
- [Order card](https://github.com/gapuccino/prueba-front/blob/main/src/components/orders/OrderCard/OrderCard.tsx): order presentation · Displays results and propagates selection or resume actions. · `src/components/orders/OrderCard/OrderCard.tsx`
- [Live countdown](https://github.com/gapuccino/prueba-front/blob/main/src/components/common/CountdownTimer/CountdownTimer.tsx): browser timer UI · Gates future-order navigation locally in the browser. · `src/components/common/CountdownTimer/CountdownTimer.tsx`
- [Order time utilities](https://github.com/gapuccino/prueba-front/blob/main/src/utils/time.ts): time logic · `src/utils/time.ts`

### Order Detail

- [Order details view](https://github.com/gapuccino/prueba-front/blob/main/src/views/OrderDetailsView/OrderDetailsView.tsx): React view · Shows the selected order and locally switches pickup versus dropoff details. · `src/views/OrderDetailsView/OrderDetailsView.tsx`
- [Expandable details](https://github.com/gapuccino/prueba-front/blob/main/src/components/common/ExpandablePanel/ExpandablePanel.tsx): shared panel · `src/components/common/ExpandablePanel/ExpandablePanel.tsx`
- [Shipment timeline](https://github.com/gapuccino/prueba-front/blob/main/src/components/orders/OrderTimeline/OrderTimeline.tsx): status presentation · Translates order status into shipment progression; tracking is console-only when status_code >= 3. · `src/components/orders/OrderTimeline/OrderTimeline.tsx`

### Shared UI

- [Shared header](https://github.com/gapuccino/prueba-front/blob/main/src/components/common/Header/Header.tsx): shared layout · `src/components/common/Header/Header.tsx`
- [SVG icons](https://github.com/gapuccino/prueba-front/blob/main/src/components/common/icons/index.ts): shared presentation · `src/components/common/icons/index.ts`
- [Avatar fallback](https://github.com/gapuccino/prueba-front/blob/main/src/utils/avatar.ts): presentation resilience · Generates inline SVG avatars for absent or invalid image data. · `src/utils/avatar.ts`

## Connections

- Vite browser runtime → Application entry: serves
- Application entry → View controller: mounts
- View controller → Order list view: shows list
- View controller → Order details view: shows selected order
- View controller → Shared header: composes
- Order API service → Order REST endpoints: fetches
- Order API service → Bundled fallback orders: falls back to
- Order API service → Order model: normalizes to
- Order list view → Order API service: loads orders
- Order list view → Tabs and search: uses
- Order list view → Order card: renders
- Order card → Live countdown: uses
- Live countdown → Order time utilities: calculates with
- Order card → View controller: selects order
- Order details view → Expandable details: uses
- Order details view → Shipment timeline: renders
- Order details view → Order model: reads
- Order card → Avatar fallback: renders avatar via
- Shared header → SVG icons: uses