From eb3f8011679a41fb0909c1522fe853cc1ec7a062 Mon Sep 17 00:00:00 2001
From: Dave <david.els1@outlook.com>
Date: Fri, 28 Aug 2026 00:22:30 +0200
Subject: [PATCH] feat(boss-dashboard): add reps list section

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

diff --git a/src/app/(mobile)/m/dashboard-view.tsx b/src/app/(mobile)/m/dashboard-view.tsx
index 44d4f84..b5eab97 100644
--- a/src/app/(mobile)/m/dashboard-view.tsx
+++ b/src/app/(mobile)/m/dashboard-view.tsx
@@ -124,10 +124,65 @@ export default function BossDashboardView() {
         </div>
       )}
 
-      {/* Placeholder for reps (Task 12) */}
-      <div className="rounded-xl bg-muted/30 p-3 text-xs text-muted-foreground">
-        Reps list lands here in Task 12.
-      </div>
+      {/* Reps section */}
+      <section>
+        <div className="flex items-center justify-between mb-2">
+          <h2 className="text-xs font-bold uppercase tracking-widest text-muted-foreground">
+            Sales reps
+          </h2>
+          {data && (
+            <span className="text-xs text-muted-foreground">
+              {data.reps.length}
+            </span>
+          )}
+        </div>
+
+        {data && data.reps.length === 0 ? (
+          <div className="rounded-xl border border-border/60 bg-card/50 p-6 text-center text-sm text-muted-foreground">
+            No rep activity in this window.
+          </div>
+        ) : (
+          <ul className="space-y-2">
+            {data?.reps.map((rep) => (
+              <li key={rep.id || "unknown"}>
+                <button
+                  type="button"
+                  disabled={rep.isUnknown}
+                  onClick={() => openSheet(rep)}
+                  className="w-full rounded-xl border border-border/60 bg-card p-3 text-left transition-colors hover:bg-card/70 disabled:opacity-50 disabled:cursor-not-allowed"
+                >
+                  <div className="flex items-center justify-between gap-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">
+                        {(rep.name[0] ?? "?").toUpperCase()}
+                      </div>
+                      <div className="min-w-0">
+                        <div className="text-sm font-medium truncate">{rep.name}</div>
+                      </div>
+                    </div>
+                    <div className="grid grid-cols-4 gap-2 text-center shrink-0">
+                      <Metric label="loaded" value={rep.quotesLoaded} color="text-cyan-400" />
+                      <Metric label="for" value={rep.quotesDoneFor} color="text-violet-400" />
+                      <Metric label="done" value={rep.quotesDoneBy} color="text-emerald-400" />
+                      <Metric label="orders" value={rep.ordersPlaced} color="text-orange-400" />
+                    </div>
+                  </div>
+                  {data.orderTotals.total > 0 && (
+                    <div className="mt-2 h-1 rounded-full bg-muted overflow-hidden">
+                      <div
+                        className="h-full bg-orange-400"
+                        style={{
+                          width: `${Math.min(100, Math.round((rep.ordersPlaced / data.orderTotals.total) * 100))}%`,
+                        }}
+                      />
+                    </div>
+                  )}
+                </button>
+              </li>
+            ))}
+          </ul>
+        )}
+      </section>
 
       {/* Placeholder for drivers (Task 13) */}
       <div className="rounded-xl bg-muted/30 p-3 text-xs text-muted-foreground">
@@ -176,3 +231,28 @@ function OrderTotal({
     </div>
   );
 }
+
+function Metric({
+  label,
+  value,
+  color,
+}: {
+  label: string;
+  value: number;
+  color: string;
+}) {
+  return (
+    <div>
+      <div className={`text-sm font-semibold tabular-nums ${color}`}>
+        {value.toLocaleString()}
+      </div>
+      <div className="text-[9px] uppercase tracking-wider text-muted-foreground">
+        {label}
+      </div>
+    </div>
+  );
+}
+
+function openSheet(_rep: BossDashboardData["reps"][number]) {
+  // Wired in Task 14.
+}