From 44f93feb13bc529e4f0cf5e760ed45cd277f5d30 Mon Sep 17 00:00:00 2001
From: Dave <david.els1@outlook.com>
Date: Fri, 28 Aug 2026 00:23:32 +0200
Subject: [PATCH] feat(boss-dashboard): add drivers section

---
 src/app/(mobile)/m/dashboard-view.tsx | 61 +++++++++++++++++++++++++--
 1 file changed, 57 insertions(+), 4 deletions(-)

diff --git a/src/app/(mobile)/m/dashboard-view.tsx b/src/app/(mobile)/m/dashboard-view.tsx
index b5eab97..94b73e7 100644
--- a/src/app/(mobile)/m/dashboard-view.tsx
+++ b/src/app/(mobile)/m/dashboard-view.tsx
@@ -184,10 +184,63 @@ export default function BossDashboardView() {
         )}
       </section>
 
-      {/* Placeholder for drivers (Task 13) */}
-      <div className="rounded-xl bg-muted/30 p-3 text-xs text-muted-foreground">
-        Driver stops land here in Task 13.
-      </div>
+      {/* Drivers section */}
+      <section>
+        <div className="flex items-center justify-between mb-2">
+          <h2 className="text-xs font-bold uppercase tracking-widest text-muted-foreground">
+            Driver stops today
+          </h2>
+          {data && (
+            <span className="text-xs text-muted-foreground">
+              {data.drivers.reduce((s, d) => s + d.stopsToday, 0)}
+            </span>
+          )}
+        </div>
+
+        {data && data.drivers.length === 0 ? (
+          <div className="rounded-xl border border-border/60 bg-card/50 p-6 text-center text-sm text-muted-foreground">
+            No driver stops scheduled today.
+          </div>
+        ) : (
+          <ul className="space-y-2">
+            {data?.drivers.map((drv) => {
+              const allDone = drv.stopsLeft === 0;
+              const noneStarted = drv.stopsDone === 0 && drv.stopsLeft > 0;
+              const badgeColor = allDone
+                ? "bg-emerald-500/15 text-emerald-400"
+                : noneStarted
+                  ? "bg-rose-500/15 text-rose-400"
+                  : "bg-amber-500/15 text-amber-400";
+              const badgeLabel = allDone
+                ? "All done"
+                : noneStarted
+                  ? `${drv.stopsLeft} left`
+                  : `${drv.stopsLeft} left`;
+              return (
+                <li
+                  key={drv.id}
+                  className="flex items-center justify-between gap-3 rounded-xl border border-border/60 bg-card p-3"
+                >
+                  <div className="flex items-center gap-2 min-w-0">
+                    <div className="grid h-8 w-8 place-items-center rounded-full bg-cyan-500/15 text-cyan-300 text-xs font-semibold shrink-0">
+                      {(drv.name[0] ?? "?").toUpperCase()}
+                    </div>
+                    <div className="min-w-0">
+                      <div className="text-sm font-medium truncate">{drv.name}</div>
+                      <div className="text-[11px] text-muted-foreground">
+                        {drv.stopsToday} stops · {drv.stopsDone} done
+                      </div>
+                    </div>
+                  </div>
+                  <span className={`rounded-full px-2.5 py-1 text-[11px] font-medium ${badgeColor}`}>
+                    {badgeLabel}
+                  </span>
+                </li>
+              );
+            })}
+          </ul>
+        )}
+      </section>
     </div>
   );
 }