b9828def38
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
105 lines
6.1 KiB
HTML
105 lines
6.1 KiB
HTML
<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>
|