# Route Stops

> An ordered multi-order trip - pickups and drop-offs with done, current and failed states, cash per stop, a trip summary and a per-stop action slot.

Source: https://docs.nasaqui.com/components/route-stops

## Install

```bash
npx shadcn@latest add https://docs.nasaqui.com/r/route-stops.json
```

The courier's to-do list for a trip. The first stop that is not done is the current one and gets the actions.

## When to use

- A courier trip with several pickups and drop-offs.

## When not to use

- Order history: use [`Timeline`](https://docs.nasaqui.com/components/timeline).
- Drawing the path: use [`MapView`](https://docs.nasaqui.com/components/map-view) routes.

## Import

```tsx
import { RouteStops } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"
```

## Quick start

```tsx
<RouteStops stops={[{ id: "p1", kind: "pickup", name: "Bakery" }, { id: "d1", kind: "dropoff", name: "Sara", cashMinor: 10000 }]} />
```

## Anatomy

```
RouteStops  data-slot="route-stops"
├─ summary: stops, cash to collect
└─ ol > li  data-slot="route-stop"  data-kind data-status data-current
   ├─ marker, name, address, order ref, ETA, note
   └─ actions (current stop, or all)
```

## API

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `stops` | `RouteStop[]` | required | `id`, `kind` (`pickup`/`dropoff`), `name`, `nameAr`, `address`, `addressAr`, `status` (`pending`/`done`/`failed`), `orderRef`, `cashMinor`, `eta`, `note`, `noteAr`. |
| `currency` | `string` | `"USD"` (`"SAR"` in Arabic) | ISO currency. |
| `onSelectStop` | `(stop) => void` | none | Makes stops clickable. |
| `renderActions` | `(stop, { current }) => ReactNode` | none | Per-stop actions. |
| `actionsForAll` | `boolean` | `false` | Show actions on every stop, not just the current one. |
| `hideSummary` | `boolean` | `false` | Hide the trip summary. |
| `locale` / `labels` | `"en" \| "ar"` / partial strings | context | Language and overrides. |

## Examples

Lab stories: interactive trip, read-only, all done, Arabic.

## Accessibility

An ordered list; the current stop has `aria-current="step"`. Selectable stops are buttons.

## RTL & i18n

Logical layout, Arabic names and notes via `nameAr`, `addressAr`, `noteAr`.

## Styling & tokens

Uses `--status-success`, `--status-danger`, `--brand`. Target `[data-current]`, `[data-kind]`, `[data-status]`.

## Do / Don't

- Do give each stop an `orderRef` on multi-order trips.
- Don't show actions on future stops.

## Related

[`DispatchOffer`](https://docs.nasaqui.com/components/dispatch-offer), [`CashCollect`](https://docs.nasaqui.com/components/cash-collect), [`MapView`](https://docs.nasaqui.com/components/map-view).

## Lab

https://docs.nasaqui.com/?path=/docs/components-delivery-route-stops--docs

## Code

### React

```tsx
<RouteStops stops={[{ id: "p1", kind: "pickup", name: "Bakery" }, { id: "d1", kind: "dropoff", name: "Sara", cashMinor: 10000 }]} />
```

### shadcn

```tsx
<RouteStops stops={[{ id: "p1", kind: "pickup", name: "Bakery" }, { id: "d1", kind: "dropoff", name: "Sara", cashMinor: 10000 }]} />
```

### Vue

```vue
<script setup lang="ts">
import { NqRouteStops } from "@fadymondy/nasaq/vue";

const stops = [
  { id: "p1", kind: "pickup", name: "Bakery" },
  { id: "d1", kind: "dropoff", name: "Sara", cashMinor: 10000 },
] as const;
</script>

<template>
  <NqRouteStops :stops="stops" />
</template>
```

### Blade

```blade
<x-nq::route-stops :stops="[['id' => 'p1', 'kind' => 'pickup', 'name' => 'Bakery'], ['id' => 'd1', 'kind' => 'dropoff', 'name' => 'Sara', 'cashMinor' => 10000]]" />
```

### HTML + Alpine

```html
<section data-slot="route-stops" aria-label="Trip stops" class="flex flex-col gap-3">
            <header data-slot="route-summary" class="flex flex-wrap items-center justify-between gap-2 text-body-sm">
            <span class="text-foreground">0 of 2 stops done</span>
            <span class="flex flex-wrap items-center gap-x-4 gap-y-1 text-muted-foreground">
                                    <span class="inline-flex items-center gap-1">
                        <svg aria-hidden="true" class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M11 15h2a2 2 0 1 0 0-4h-3c-.6 0-1.1.2-1.4.6L3 17"/>
  <path d="m7 21 1.6-1.4c.3-.4.8-.6 1.4-.6h4c1.1 0 2.1-.4 2.8-1.2l4.6-4.4a2 2 0 0 0-2.75-2.91l-4.2 3.9"/>
  <path d="m2 16 6 6"/>
  <circle cx="16" cy="9" r="2.9"/>
  <circle cx="6" cy="5" r="3"/>
</svg>                        Cash to collect
                        <bdi data-slot="route-cash-pending" class="font-medium tabular-nums text-foreground">$100.00</bdi>
                    </span>
                                            </span>
        </header>
    <ol role="list" class="flex flex-col">
                                <li data-stop="p1" data-kind="pickup" data-status="pending"  data-current aria-current="step"  class="flex gap-3">
                <span class="flex flex-col items-center">
                    <span class="flex size-8 shrink-0 items-center justify-center rounded-full border-2 [&amp;_svg]:size-4 border-primary bg-card text-primary ring-4 ring-primary/20">
                        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <polygon points="3 11 22 2 13 21 11 13 3 11"/>
</svg>                    </span>
                                            <span aria-hidden="true" class="my-1 min-h-4 w-0.5 flex-1 rounded-full bg-nq-line"></span>
                                    </span>
                <div class="flex min-w-0 flex-1 flex-col gap-2 pt-0.5 pb-4">
                    <div
                                                    class="flex items-start gap-3"
                                            >
                        <span class="flex min-w-0 flex-1 flex-col gap-0.5 text-start">
                            <span class="flex flex-wrap items-center gap-2">
                                <span class="text-caption text-muted-foreground">Pick up</span>
                                                                                                    <span data-slot="badge"     class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-nq-brand/40 bg-[color-mix(in_oklab,var(--nq-brand)_14%,transparent)] text-foreground">Next stop</span>
                                                            </span>
                            <bdi dir="auto" class="truncate text-label text-foreground">Bakery</bdi>
                                                                                                            </span>
                                            </div>
                                    </div>
            </li>
                                <li data-stop="d1" data-kind="dropoff" data-status="pending"  class="flex gap-3">
                <span class="flex flex-col items-center">
                    <span class="flex size-8 shrink-0 items-center justify-center rounded-full border-2 [&amp;_svg]:size-4 border-nq-line-strong bg-card text-muted-foreground">
                        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"/>
  <circle cx="12" cy="10" r="3"/>
</svg>                    </span>
                                    </span>
                <div class="flex min-w-0 flex-1 flex-col gap-2 pt-0.5">
                    <div
                                                    class="flex items-start gap-3"
                                            >
                        <span class="flex min-w-0 flex-1 flex-col gap-0.5 text-start">
                            <span class="flex flex-wrap items-center gap-2">
                                <span class="text-caption text-muted-foreground">Drop off</span>
                                                                                            </span>
                            <bdi dir="auto" class="truncate text-label text-foreground">Sara</bdi>
                                                                                                            </span>
                                                    <span data-slot="stop-cash" class="flex shrink-0 flex-col items-end">
                                <span class="text-caption text-muted-foreground">Cash</span>
                                <bdi class="text-label tabular-nums text-foreground">$100.00</bdi>
                            </span>
                                            </div>
                                    </div>
            </li>
            </ol>
</section>
```