---
title: "Relay Dispatch — Live Operations"
platform: web
slug: relay-dispatch-live-logistics-operations-dashboard-web
screens: ["dashboard", "map-view"]
domains: ["logistics"]
style: "minimal"
fonts: ["Inter"]
roles: ["top-navigation-bar", "search-bar", "badge", "button", "avatar", "sidebar", "navigation-menu", "card", "segmented-control", "chip", "table"]
score: {clean: 100, consistent: 76, accessible: 64, comprehensible: 69}
url: https://gui.farm/web/relay-dispatch-live-logistics-operations-dashboard-web
raw: https://gui.farm/web/relay-dispatch-live-logistics-operations-dashboard-web/design.guix
download: https://gui.farm/web/relay-dispatch-live-logistics-operations-dashboard-web.gui
---

# Relay Dispatch — Live Operations

A live logistics operations dashboard for dispatching couriers with a real-time map, orders and zone monitoring.

- **Live preview:** https://gui.farm/web/relay-dispatch-live-logistics-operations-dashboard-web
- **Raw source:** https://gui.farm/web/relay-dispatch-live-logistics-operations-dashboard-web/design.guix
- **Download (.gui):** https://gui.farm/web/relay-dispatch-live-logistics-operations-dashboard-web.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Relay Dispatch — Live Operations">
  <tokens>
    <color name="bg" value="#0B0F14" />
    <color name="surface" value="#141A22" />
    <color name="surface-2" value="#1C242E" />
    <color name="glass" value="#0F151CF2" />
    <color name="line" value="#26303C" />
    <color name="line-soft" value="#1E2731" />
    <color name="ink" value="#E8EDF3" />
    <color name="body" value="#B3BECC" />
    <color name="muted" value="#7C8998" />
    <color name="amber" value="#FFAA33" />
    <color name="amber-dim" value="#3A2C15" />
    <color name="mint" value="#3DDC97" />
    <color name="mint-dim" value="#12312A" />
    <color name="red" value="#FF6B5C" />
    <color name="red-dim" value="#3A1D1A" />
    <number name="r-card" value="14" />
    <number name="r-control" value="9" />
    <number name="r-pill" value="999" />
  </tokens>

  <styles>
    <text-style name="Title" font-family="Inter" font-size="20" font-weight="600" line-height="27" />
    <text-style name="Section" font-family="Inter" font-size="14" font-weight="600" line-height="20" />
    <text-style name="Body" font-family="Inter" font-size="13" font-weight="400" line-height="19" />
    <text-style name="Label" font-family="Inter" font-size="12" font-weight="500" line-height="17" />
    <text-style name="Metric" font-family="Inter" font-size="27" font-weight="600" line-height="34" />
    <text-style name="Tiny" font-family="Inter" font-size="11" font-weight="500" line-height="15" />
    <text-style name="Micro" font-family="Inter" font-size="10" font-weight="700" line-height="13" letter-spacing="0.7" />
  </styles>

  <fonts>
    <font family="Inter" source="google" weights="400 500 600 700" styles="normal" />
  </fonts>

  <col w="1440" h="1024" fill="$bg">

    <!-- ================= TOP BAR ================= -->
    <row role="top-navigation-bar" w="1440" h="60" fill="$surface" border="0 0 1 0 $line" p="0 20" gap="18" align="middle-left">
      <row w="202" gap="10" align="middle-left">
        <row w="28" h="28" radius="8" fill="$amber" align="middle-center">
          <img src="https://api.iconify.design/lucide/route.svg?color=%230B0F14" w="17" h="17" />
        </row>
        <text value="Relay Dispatch" font-family="Inter" font-size="16" font-weight="600" line-height="22" fill="$ink" />
      </row>

      <row role="search-bar" w="420" h="38" fill="$surface-2" radius="$r-pill" border="1 $line" p="0 14" gap="9" align="middle-left">
        <img src="https://api.iconify.design/lucide/search.svg?color=%237C8998" w="17" h="17" />
        <text w="fill" text-style="Body" value="Search driver, order ID or zone" fill="$muted" />
        <row h="20" radius="5" fill="$surface" border="1 $line" p="0 6" align="middle-center">
          <text text-style="Micro" value="⌘K" fill="$muted" />
        </row>
      </row>

      <row w="fill" gap="12" align="middle-right">
        <row role="badge" h="28" radius="$r-pill" fill="$mint-dim" p="0 11" gap="7" align="middle-center">
          <ellipse w="7" h="7" fill="$mint" />
          <text text-style="Tiny" value="All systems live" fill="$mint" />
        </row>
        <text text-style="Label" value="Dubai · 21:47 GST" fill="$muted" />
        <row role="button" w="36" h="36" radius="18" fill="$surface-2" align="middle-center">
          <img src="https://api.iconify.design/lucide/bell.svg?color=%23B3BECC" w="18" h="18" />
        </row>
        <row role="avatar" w="34" h="34" radius="17" fill="$amber-dim" border="1 $amber" align="middle-center">
          <text font-family="Inter" font-size="12" font-weight="600" line-height="16" value="JJ" fill="$amber" />
        </row>
      </row>
    </row>

    <row w="1440" h="964">

      <!-- ================= SIDEBAR ================= -->
      <col role="sidebar" w="222" h="964" fill="$surface" border="0 1 0 0 $line" p="16 12" gap="20">

        <col role="navigation-menu" w="198" gap="3">
          <row w="198" h="38" p="0 12" gap="11" radius="$r-control" fill="$surface-2" align="middle-left">
            <img src="https://api.iconify.design/lucide/map.svg?color=%23FFAA33" w="18" h="18" />
            <text text-style="Body" font-weight="600" value="Live map" fill="$ink" />
          </row>
          <row w="198" h="38" p="0 12" gap="11" radius="$r-control" align="middle-left">
            <img src="https://api.iconify.design/lucide/package.svg?color=%237C8998" w="18" h="18" />
            <text w="fill" text-style="Body" value="Orders" fill="$body" />
            <text text-style="Tiny" value="142" fill="$muted" />
          </row>
          <row w="198" h="38" p="0 12" gap="11" radius="$r-control" align="middle-left">
            <img src="https://api.iconify.design/lucide/users.svg?color=%237C8998" w="18" h="18" />
            <text w="fill" text-style="Body" value="Couriers" fill="$body" />
            <text text-style="Tiny" value="38" fill="$muted" />
          </row>
          <row w="198" h="38" p="0 12" gap="11" radius="$r-control" align="middle-left">
            <img src="https://api.iconify.design/lucide/triangle-alert.svg?color=%237C8998" w="18" h="18" />
            <text w="fill" text-style="Body" value="Exceptions" fill="$body" />
            <row role="badge" h="18" radius="$r-pill" fill="$red-dim" p="0 6" align="middle-center">
              <text text-style="Micro" value="4" fill="$red" />
            </row>
          </row>
          <row w="198" h="38" p="0 12" gap="11" radius="$r-control" align="middle-left">
            <img src="https://api.iconify.design/lucide/chart-column.svg?color=%237C8998" w="18" h="18" />
            <text text-style="Body" value="Performance" fill="$body" />
          </row>
        </col>

        <line w="198" fill="$line-soft" />

        <col w="198" gap="7">
          <text text-style="Micro" value="ZONES" fill="$muted" p="0 12" />
          <row w="198" h="32" p="0 12" gap="10" align="middle-left">
            <ellipse w="8" h="8" fill="$mint" />
            <text w="fill" text-style="Label" value="Marina" fill="$body" />
            <text text-style="Tiny" value="12" fill="$muted" />
          </row>
          <row w="198" h="32" p="0 12" gap="10" align="middle-left">
            <ellipse w="8" h="8" fill="$amber" />
            <text w="fill" text-style="Label" value="Business Bay" fill="$body" />
            <text text-style="Tiny" value="19" fill="$muted" />
          </row>
          <row w="198" h="32" p="0 12" gap="10" align="middle-left">
            <ellipse w="8" h="8" fill="$red" />
            <text w="fill" text-style="Label" value="Deira" fill="$body" />
            <text text-style="Tiny" value="7" fill="$muted" />
          </row>
        </col>

        <col w="198" h="fill" gap="auto">
          <row role="card" w="198" radius="$r-card" fill="$surface-2" border="1 $line" p="13" gap="9">
            <col w="fill" gap="6">
              <text text-style="Micro" value="SHIFT ENDS" fill="$muted" />
              <text font-family="Inter" font-size="17" font-weight="600" line-height="22" value="2h 13m" fill="$ink" />
              <text text-style="Tiny" value="Night crew hand-off 00:00" fill="$muted" />
            </col>
          </row>
        </col>
      </col>

      <!-- ================= MAP CANVAS ================= -->
      <frame w="880" h="964" clip>
        <img x="0" y="0" w="880" h="964" fit="cover"
             src="https://gui.farm/tools/map-generator.png?from=Dubai+Marina&amp;to=Business+Bay+Dubai&amp;zoom=12&amp;mode=dark&amp;color=%23FFAA33&amp;line=solid&amp;thickness=6&amp;pins=both&amp;labels=show&amp;ratio=4:5&amp;width=1760" />

        <!-- floating filter rail over the map -->
        <row x="20" y="18" gap="9" align="middle-left">
          <row role="segmented-control" h="36" radius="$r-pill" fill="$glass" border="1 $line" p="3" gap="2" align="middle-center">
            <row h="30" radius="$r-pill" fill="$amber" p="0 13" align="middle-center">
              <text text-style="Tiny" font-weight="600" value="Active" fill="$bg" />
            </row>
            <row h="30" p="0 13" align="middle-center">
              <text text-style="Tiny" value="Idle" fill="$body" />
            </row>
            <row h="30" p="0 13" align="middle-center">
              <text text-style="Tiny" value="All" fill="$body" />
            </row>
          </row>
          <row role="chip" h="36" radius="$r-pill" fill="$glass" border="1 $line" p="0 13" gap="7" align="middle-center">
            <img src="https://api.iconify.design/lucide/bike.svg?color=%23B3BECC" w="15" h="15" />
            <text text-style="Tiny" value="Two-wheeler" fill="$body" />
          </row>
          <row role="chip" h="36" radius="$r-pill" fill="$glass" border="1 $line" p="0 13" gap="7" align="middle-center">
            <img src="https://api.iconify.design/lucide/clock.svg?color=%23FF6B5C" w="15" h="15" />
            <text text-style="Tiny" value="Late only" fill="$body" />
          </row>
        </row>

        <!-- map controls, right edge -->
        <col x="820" y="18" gap="7">
          <row role="button" w="36" h="36" radius="$r-control" fill="$glass" border="1 $line" align="middle-center">
            <img src="https://api.iconify.design/lucide/plus.svg?color=%23B3BECC" w="17" h="17" />
          </row>
          <row role="button" w="36" h="36" radius="$r-control" fill="$glass" border="1 $line" align="middle-center">
            <img src="https://api.iconify.design/lucide/minus.svg?color=%23B3BECC" w="17" h="17" />
          </row>
          <row role="button" w="36" h="36" radius="$r-control" fill="$glass" border="1 $line" align="middle-center">
            <img src="https://api.iconify.design/lucide/locate-fixed.svg?color=%23FFAA33" w="17" h="17" />
          </row>
        </col>

        <!-- selected courier detail, floating bottom-left -->
        <col role="card" x="20" y="700" w="392" radius="$r-card" fill="$glass" border="1 $line" p="16" gap="13">
          <row w="fill" gap="12" align="top-left">
            <frame role="avatar" w="46" h="46" radius="23" clip>
              <img x="0" y="0" w="46" h="46" fit="cover"
                   src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&amp;fit=crop&amp;w=140&amp;h=140&amp;q=85" />
              <ellipse x="33" y="33" w="12" h="12" fill="$mint" border="2 $surface" />
            </frame>
            <col w="fill" gap="3">
              <row gap="8" align="middle-left">
                <text text-style="Section" value="Rami Khoury" fill="$ink" />
                <row role="badge" h="20" radius="$r-pill" fill="$surface-2" p="0 7" gap="4" align="middle-center">
                  <img src="https://api.iconify.design/lucide/star.svg?color=%23FFAA33" w="10" h="10" />
                  <text text-style="Micro" value="4.9" fill="$body" />
                </row>
              </row>
              <text text-style="Tiny" value="RD-2841 · Honda PCX · Plate D 44 812" fill="$muted" />
            </col>
            <row role="badge" h="24" radius="$r-pill" fill="$mint-dim" p="0 9" align="middle-center">
              <text text-style="Micro" value="ON ROUTE" fill="$mint" />
            </row>
          </row>

          <row w="fill" h="6" radius="$r-pill" fill="$surface-2" clip>
            <rect w="248" h="6" radius="$r-pill" fill="$amber" />
          </row>

          <row w="fill" gap="auto" align="middle-left">
            <col gap="2">
              <text text-style="Micro" value="NEXT STOP" fill="$muted" />
              <text text-style="Label" value="Bay Square, Tower 6" fill="$ink" />
            </col>
            <col gap="2" align="middle-right">
              <text text-style="Micro" value="ETA" fill="$muted" />
              <text text-style="Label" value="6 min · 1.4 km" fill="$amber" />
            </col>
            <col gap="2" align="middle-right">
              <text text-style="Micro" value="LOAD" fill="$muted" />
              <text text-style="Label" value="3 of 5 orders" fill="$ink" />
            </col>
          </row>

          <row w="fill" gap="9">
            <row role="button" w="fill" h="38" radius="$r-control" fill="$amber" gap="7" align="middle-center">
              <img src="https://api.iconify.design/lucide/message-circle.svg?color=%230B0F14" w="16" h="16" />
              <text text-style="Label" font-weight="600" value="Message Rami" fill="$bg" />
            </row>
            <row role="button" w="fill" h="38" radius="$r-control" fill="none" border="1 $line" gap="7" align="middle-center">
              <img src="https://api.iconify.design/lucide/shuffle.svg?color=%23B3BECC" w="16" h="16" />
              <text text-style="Label" value="Reassign" fill="$body" />
            </row>
          </row>
        </col>

        <!-- attribution guard: nothing is placed over the map's bottom-right corner -->
      </frame>

      <!-- ================= RIGHT RAIL ================= -->
      <col w="338" h="964" fill="$surface" border="0 0 0 1 $line" p="16" gap="14">

        <row w="306" gap="12" align="middle-left">
          <col w="fill" gap="2">
            <text text-style="Title" value="Dispatch queue" fill="$ink" />
            <text text-style="Tiny" value="Updated 12 seconds ago" fill="$muted" />
          </col>
          <row role="button" w="34" h="34" radius="$r-control" fill="$surface-2" align="middle-center">
            <img src="https://api.iconify.design/lucide/refresh-cw.svg?color=%23B3BECC" w="16" h="16" />
          </row>
        </row>

        <row w="306" gap="10">
          <col role="card" w="fill" radius="$r-card" fill="$surface-2" border="1 $line" p="13" gap="4">
            <text text-style="Micro" value="ON TIME" fill="$muted" />
            <text text-style="Metric" value="94%" fill="$mint" />
          </col>
          <col role="card" w="fill" radius="$r-card" fill="$surface-2" border="1 $line" p="13" gap="4">
            <text text-style="Micro" value="AVG ETA" fill="$muted" />
            <text text-style="Metric" value="18m" fill="$ink" />
          </col>
        </row>

        <col role="card" w="306" radius="$r-card" fill="$surface-2" border="1 $line" p="14" gap="10">
          <row w="fill" gap="auto" align="middle-left">
            <text text-style="Section" value="Drops per hour" fill="$ink" />
            <text text-style="Tiny" value="Last 12h" fill="$muted" />
          </row>
          <img w="278" h="70"
               src="https://gui.farm/tools/charts/bar-chart.svg?data=10:14,11:19,12:31,13:27,14:22,15:18,16:25,17:34,18:41,19:38,20:29,21:23&amp;bar=%23FFAA33&amp;radius=3&amp;surface=dark&amp;grid=hide&amp;values=hide&amp;xlabels=hide&amp;ylabels=hide&amp;width=556&amp;height=140" />
          <text text-style="Tiny" value="Peak 41 drops at 18:00 · dinner rush" fill="$muted" />
        </col>

        <col role="table" w="306" gap="0">
          <row w="306" h="30" p="0 10" gap="8" align="middle-left">
            <text w="fill" text-style="Micro" value="ORDER" fill="$muted" />
            <text w="64" text-style="Micro" value="ZONE" fill="$muted" />
            <text w="46" text-style="Micro" value="ETA" fill="$muted" align="right" />
          </row>

          <row w="306" h="52" border="0 0 1 0 $line-soft" p="0 10" gap="8" align="middle-left">
            <col w="fill" gap="2">
              <text text-style="Label" font-weight="600" value="ML-2841" fill="$ink" />
              <text text-style="Tiny" value="Rami K. · 3 stops" fill="$muted" />
            </col>
            <text w="64" text-style="Tiny" value="Bus. Bay" fill="$body" />
            <text w="46" text-style="Label" value="6m" fill="$mint" align="right" />
          </row>

          <row w="306" h="52" border="0 0 1 0 $line-soft" p="0 10" gap="8" align="middle-left">
            <col w="fill" gap="2">
              <text text-style="Label" font-weight="600" value="ML-2839" fill="$ink" />
              <text text-style="Tiny" value="Sana P. · 1 stop" fill="$muted" />
            </col>
            <text w="64" text-style="Tiny" value="Marina" fill="$body" />
            <text w="46" text-style="Label" value="11m" fill="$body" align="right" />
          </row>

          <row w="306" h="52" border="0 0 1 0 $line-soft" p="0 10" gap="8" align="middle-left">
            <col w="fill" gap="2">
              <text text-style="Label" font-weight="600" value="ML-2836" fill="$ink" />
              <text text-style="Tiny" value="Unassigned · 2 stops" fill="$red" />
            </col>
            <text w="64" text-style="Tiny" value="Deira" fill="$body" />
            <text w="46" text-style="Label" value="24m" fill="$red" align="right" />
          </row>

          <row w="306" h="52" border="0 0 1 0 $line-soft" p="0 10" gap="8" align="middle-left">
            <col w="fill" gap="2">
              <text text-style="Label" font-weight="600" value="ML-2834" fill="$ink" />
              <text text-style="Tiny" value="Omar D. · 4 stops" fill="$muted" />
            </col>
            <text w="64" text-style="Tiny" value="JLT" fill="$body" />
            <text w="46" text-style="Label" value="15m" fill="$body" align="right" />
          </row>

          <row w="306" h="52" p="0 10" gap="8" align="middle-left">
            <col w="fill" gap="2">
              <text text-style="Label" font-weight="600" value="ML-2831" fill="$ink" />
              <text text-style="Tiny" value="Aisha R. · 2 stops" fill="$muted" />
            </col>
            <text w="64" text-style="Tiny" value="Marina" fill="$body" />
            <text w="46" text-style="Label" value="19m" fill="$body" align="right" />
          </row>
        </col>

        <col w="306" h="fill" gap="auto">
          <row role="button" w="306" h="42" radius="$r-control" fill="none" border="1 $line" gap="8" align="middle-center">
            <img src="https://api.iconify.design/lucide/list-plus.svg?color=%23FFAA33" w="17" h="17" />
            <text text-style="Label" font-weight="600" value="Auto-assign 4 unclaimed" fill="$amber" />
          </row>
        </col>
      </col>

    </row>
  </col>
</gui>

```