gapuccino/prueba-front

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.