dispatch page

src/features/store-admin/AssignBar.tsx

@@ -2,7 +2,7 @@ import { useState } from 'react';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { Button } from '@astryxdesign/core/Button';
 import { Selector } from '@astryxdesign/core/Selector';
-import { UserCheck } from 'lucide-react';
+import { Route, UserCheck } from 'lucide-react';
 import { errorMessage } from '@/api/client';
 import {
   RIDER_MESSAGE,
@@ -13,6 +13,7 @@ import type { OrderRow, TenantLocation } from '@/api/types';
 import { useRiders } from '@/queries/hooks';
 import { queryKeys } from '@/queries/keys';
 import { buildDeliveries, riderName, riderVehicle } from './assignDelivery';
+import { RoutePlanDrawer } from './RoutePlanDrawer';
 
 /**
  * Assigning riders, from the orders table itself.
@@ -40,6 +41,7 @@ export function AssignBar({ orders, branchOf, assigned, onClear, onDone }: Assig
   const client = useQueryClient();
   const [riderId, setRiderId] = useState('');
   const [outcome, setOutcome] = useState<string | null>(null);
+  const [planning, setPlanning] = useState(false);
 
   // Every order in a batch shares a region in practice — they are one branch's
   // orders — so the first one carrying a region decides which fleet to ask for.
@@ -136,6 +138,20 @@ export function AssignBar({ orders, branchOf, assigned, onClear, onDone }: Assig
         />
       </div>
 
+      {/* Two ways to commit the same selection, and the difference is worth the
+          second button: "Assign" hands the orders over as they are, which is
+          right for one or two. "Plan the route" sequences them first — real
+          road distances and an ETA per leg — which starts paying for itself at
+          about four stops and is the only path that fills the delivery rows'
+          kms fields with anything real. */}
+      <Button
+        label="Plan the route"
+        variant="secondary"
+        size="sm"
+        icon={<Route size={14} />}
+        isDisabled={!rider || orders.length === 0}
+        onClick={() => setPlanning(true)}
+      />
       <Button
         label={send.isPending ? 'Assigning…' : 'Assign rider'}
         variant="primary"
@@ -146,6 +162,17 @@ export function AssignBar({ orders, branchOf, assigned, onClear, onDone }: Assig
       />
       <Button label="Clear" variant="ghost" size="sm" onClick={onClear} />
 
+      {planning && rider ? (
+        <RoutePlanDrawer
+          orders={orders}
+          rider={rider}
+          branchOf={branchOf}
+          assigned={assigned}
+          onClose={() => setPlanning(false)}
+          onDone={onDone}
+        />
+      ) : null}
+
       {outcome ? (
         <span className="assign-bar-outcome" role="status">
           {outcome}