David/WFDASH-WEBAPP
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
WFDASH-WEBAPP/.superpowers/brainstorm/39145-1783449414/content/hybrid-expandable-layout.html

106 lines
6.1 KiB
HTML
Raw Permalink Normal View History

feat(collection-pool): add unified redesigned collection pool view Remove redundant Assign Drivers top-level navigation link since driver assignment is now embedded directly in the collection pool page per-row, and add an Other nav section for leftover navigation items Extract collection pool view logic into a dedicated view-model module with full Vitest test coverage for assignment state classification, row sorting, pool age labeling, and proximity marker grouping Flatten the collection pool page into a single unified list replacing the old grouped assigned/unassigned layout, with updated row UI showing all required operational details and context-aware actions Add database migration to add optional `collection_photo` field to order_items for driver pickup proof photos Add complete design documentation, planning artifacts, and brainstorming session files for the collection pool redesign project
2026-07-07 18:49:31 +00:00
<h2>Option 3: Hybrid Table With Expandable Detail</h2>
<p class="subtitle">Compact top-level rows with the full operational detail revealed only when a row is expanded.</p>
<div class="section">
<div class="mockup">
<div class="mockup-header">Collection Pool · Hybrid compact list</div>
<div class="mockup-body" style="padding:0">
<div style="display:grid;grid-template-columns:6px 1.2fr 1fr 0.7fr 0.8fr 0.9fr 1.1fr;gap:0;border-bottom:1px solid #e5e7eb;background:#f8fafc;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#64748b;">
<div style="background:#7c3aed;"></div>
<div style="padding:12px;">Supplier / Items</div>
<div style="padding:12px;">Customer / Company</div>
<div style="padding:12px;">Pool Age</div>
<div style="padding:12px;">PO Number</div>
<div style="padding:12px;">Status</div>
<div style="padding:12px;">Actions</div>
</div>
<div style="display:grid;grid-template-columns:6px 1.2fr 1fr 0.7fr 0.8fr 0.9fr 1.1fr;border-bottom:1px solid #e5e7eb;background:white;align-items:center;">
<div style="background:#7c3aed;min-height:68px;"></div>
<div style="padding:12px;">
<div style="font-weight:700;color:#0f172a;">Bearings International</div>
<div style="font-size:13px;color:#334155;">2 x Wheel hub kits</div>
</div>
<div style="padding:12px;">
<div style="font-size:13px;color:#0f172a;">Mogalakwena North Pit</div>
<div style="font-size:12px;color:#64748b;">Anglo American Platinum</div>
</div>
<div style="padding:12px;font-weight:600;color:#b45309;">4d</div>
<div style="padding:12px;font-family:monospace;color:#0f172a;">PO-18294</div>
<div style="padding:12px;">
<span style="display:inline-flex;align-items:center;gap:6px;border-radius:999px;background:#dbeafe;color:#1d4ed8;padding:4px 10px;font-size:12px;font-weight:700;">Assigned today</span>
</div>
<div style="padding:12px;display:flex;gap:8px;flex-wrap:wrap;">
<button class="mock-button" style="padding:8px 10px;">Reschedule</button>
<button class="mock-button" style="padding:8px 10px;background:#111827;">Mark Ready</button>
</div>
</div>
<div style="border-bottom:1px solid #e5e7eb;background:#f8fafc;padding:14px 18px 16px 24px;">
<div style="font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#64748b;margin-bottom:10px;">Expanded detail panel</div>
<div style="display:grid;grid-template-columns:repeat(4, minmax(0,1fr));gap:12px;">
<div style="border:1px solid #e2e8f0;border-radius:12px;background:white;padding:12px;">
<div style="font-size:11px;text-transform:uppercase;color:#94a3b8;">Items scheduled</div>
<div style="margin-top:6px;font-weight:700;color:#0f172a;">Wheel hub kits, 2 units</div>
</div>
<div style="border:1px solid #e2e8f0;border-radius:12px;background:white;padding:12px;">
<div style="font-size:11px;text-transform:uppercase;color:#94a3b8;">Assignment</div>
<div style="margin-top:6px;font-weight:700;color:#0f172a;">Assigned for today</div>
<div style="font-size:12px;color:#64748b;">Driver name hidden from main row</div>
</div>
<div style="border:1px solid #e2e8f0;border-radius:12px;background:white;padding:12px;">
<div style="font-size:11px;text-transform:uppercase;color:#94a3b8;">Supplier cluster</div>
<div style="margin-top:6px;font-weight:700;color:#0f172a;">Purple side marker</div>
<div style="font-size:12px;color:#64748b;">Within 2 km of related suppliers</div>
</div>
<div style="border:1px solid #e2e8f0;border-radius:12px;background:white;padding:12px;">
<div style="font-size:11px;text-transform:uppercase;color:#94a3b8;">Extra actions</div>
<div style="margin-top:6px;font-weight:700;color:#0f172a;">Mark Awaiting</div>
<div style="font-size:12px;color:#64748b;">Secondary action stays inside the panel</div>
</div>
</div>
</div>
<div style="display:grid;grid-template-columns:6px 1.2fr 1fr 0.7fr 0.8fr 0.9fr 1.1fr;border-bottom:1px solid #e5e7eb;background:white;align-items:center;">
<div style="background:#16a34a;min-height:68px;"></div>
<div style="padding:12px;">
<div style="font-weight:700;color:#0f172a;">Hydraulic Supplies Co.</div>
<div style="font-size:13px;color:#334155;">1 x Seal kit assembly</div>
</div>
<div style="padding:12px;">
<div style="font-size:13px;color:#0f172a;">Rustenburg Workshop</div>
<div style="font-size:12px;color:#64748b;">Wolfram Fleet Services</div>
</div>
<div style="padding:12px;font-weight:600;color:#0f172a;">6h</div>
<div style="padding:12px;font-family:monospace;color:#0f172a;">PO-18301</div>
<div style="padding:12px;">
<span style="display:inline-flex;align-items:center;gap:6px;border-radius:999px;background:#f3f4f6;color:#374151;padding:4px 10px;font-size:12px;font-weight:700;">Unassigned</span>
</div>
<div style="padding:12px;display:flex;gap:8px;flex-wrap:wrap;">
<button class="mock-button" style="padding:8px 10px;">Assign Driver</button>
<button class="mock-button" style="padding:8px 10px;">Mark Awaiting</button>
</div>
</div>
</div>
</div>
</div>
<div class="pros-cons">
<div class="pros">
<h4>What it improves</h4>
<ul>
<li>Keeps the list visually compact when there are many rows.</li>
<li>Lets operators focus on a narrower primary scan line.</li>
<li>Still supports the same actions on each row.</li>
</ul>
</div>
<div class="cons">
<h4>Why I did not recommend it</h4>
<ul>
<li>Some required context shifts into the expanded panel instead of staying visible all the time.</li>
<li>Dispatchers need an extra click to inspect fuller customer and item detail.</li>
<li>It adds interaction complexity instead of removing it.</li>
</ul>
</div>
</div>
Reference in a new issue Copy permalink