updates on the kalman filter and the dispatch page by time filteration updates

src/pages/nearle/dispatch/Dispatch.css

@@ -2161,11 +2161,18 @@
   overflow: hidden;
 }
 
+/* Trip-header — badge + stats + sort toggle in one row.
+   Layout: `flex-start` with a `gap` so badge and stats stay hugged
+   together on the left; `margin-left: auto` on the toggle pushes it
+   to the right. `flex-wrap` so the toggle drops to a second line on
+   narrow sidebars instead of squeezing the stats. */
 .dispatch-container .trip-header {
-  padding: 12px 16px;
+  padding: 10px 14px;
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-start;
   align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
   border-bottom: 1px solid var(--border);
   background: #fff;
 }
@@ -2176,6 +2183,8 @@
   font-size: 11px;
   font-weight: 800;
   color: #fff;
+  flex-shrink: 0;
+  letter-spacing: 0.02em;
 }
 
 .dispatch-container .trip-stats {
@@ -2183,7 +2192,121 @@
   font-weight: 600;
   color: var(--text-muted);
   display: flex;
-  gap: 12px;
+  gap: 10px;
+  flex-shrink: 0;
+}
+
+/* Trip-card sort toggle — full-width segmented control.
+   Wraps onto its own row below the badge + stats (the trip-header is
+   `flex-wrap: wrap`, and `flex-basis: 100%` here forces the break).
+   Each pill = 50% of the row → big symmetric tap targets that read as
+   a clear "tab bar" instead of a discreet right-side switch. Active
+   state is a clean white "thumb" with the mode's semantic color
+   applied to the icon (indigo for Planned, emerald for By time), so
+   you can tell the mode at a glance from across the screen without
+   reading the labels. */
+.dispatch-container .trip-sort-toggle {
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+  flex-basis: 100%;
+  margin-left: 0;
+  padding: 3px;
+  background: #f1f5f9;
+  border-radius: 10px;
+  position: relative;
+  isolation: isolate;
+}
+
+.dispatch-container .trip-sort-pill {
+  flex: 1 1 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 6px 10px;
+  min-height: 28px;
+  font-size: 11.5px;
+  font-weight: 600;
+  letter-spacing: 0.01em;
+  line-height: 1;
+  color: #64748b;
+  background: transparent;
+  border: 0;
+  border-radius: 7px;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
+  -webkit-appearance: none;
+          appearance: none;
+}
+
+.dispatch-container .trip-sort-pill svg {
+  width: 14px;
+  height: 14px;
+  flex: 0 0 auto;
+  display: block;
+  color: #94a3b8;
+  transition: color 0.18s ease, transform 0.18s ease;
+}
+
+.dispatch-container .trip-sort-pill:hover:not(.is-active) {
+  color: #0f172a;
+}
+
+.dispatch-container .trip-sort-pill:hover:not(.is-active) svg {
+  color: #475569;
+}
+
+.dispatch-container .trip-sort-pill:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.4);
+}
+
+.dispatch-container .trip-sort-pill.is-active {
+  color: #0f172a;
+  background: #ffffff;
+  box-shadow:
+    0 1px 2px rgba(15, 23, 42, 0.08),
+    0 0 0 1px rgba(15, 23, 42, 0.04),
+    0 2px 6px rgba(15, 23, 42, 0.06);
+}
+
+/* Mode-semantic accent on the active pill's icon — picks up the same
+   indigo / emerald used on the Compare control + the time-rank badge
+   below, so the page reads as a coherent system. */
+.dispatch-container .trip-sort-toggle[data-mode='planned']
+  .trip-sort-pill.is-active svg {
+  color: #6366f1;
+}
+
+.dispatch-container .trip-sort-toggle[data-mode='time']
+  .trip-sort-pill.is-active svg {
+  color: #10b981;
+}
+
+/* Time-mode visual cues on individual order cards. Numbered badge
+   switches from "planned step N" to "delivered #N inside this trip"
+   when sort mode is `time`. Emerald (delivered family) signals
+   "ranked by completion," distinguishing it from the planned step. */
+.dispatch-container .zone-order-num.is-time-rank {
+  background: #ecfdf5;
+  color: #047857;
+  box-shadow: inset 0 0 0 1.5px #6ee7b7;
+}
+
+/* Cards whose order isn't yet delivered, while time-sort is active.
+   These are pushed to the end of the trip list (MAX_SAFE_INTEGER sort
+   key) — the muted styling tells the operator "not yet delivered"
+   at a glance without reading every status pill. */
+.dispatch-container .zone-order-card.is-pending-time {
+  opacity: 0.72;
+}
+
+.dispatch-container .zone-order-card.is-pending-time .zone-order-num.is-time-rank {
+  background: #f8fafc;
+  color: #64748b;
+  box-shadow: inset 0 0 0 1.5px #cbd5e1;
 }
 
 .dispatch-container .step-wrap {
@@ -5523,6 +5646,37 @@
   text-overflow: ellipsis;
 }
 
+/* Delivery customer line — sits directly under the rider name in
+   the popup header. Visual rank: bigger/bolder than .pu-delivery-id
+   (which is just a backend reference), smaller/lighter than .pu-rider
+   (the primary identity). One-line, ellipsis-truncated for long
+   customer names, with the full name in the title tooltip. */
+.dispatch-container .dispatch-popup .pu-customer {
+  margin-top: 4px;
+  padding: 0;
+  font-size: 13px;
+  font-weight: 600;
+  color: rgba(255, 255, 255, 0.92);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  letter-spacing: -0.005em;
+  max-width: 100%;
+}
+
+.dispatch-container .dispatch-popup .pu-customer svg {
+  font-size: 14px;
+  opacity: 0.85;
+  flex: 0 0 auto;
+}
+
+.dispatch-container .dispatch-popup .pu-customer span {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+}
+
 .dispatch-container .dispatch-popup .pu-delivery-id {
   margin-top: 6px;
   font-size: 11px;