shad/canvas-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(hubs): match dev.flow-master.ai workbench pattern + 4 named workflows

Browse Source 
Inspected dev.flow-master.ai/dashboard/hubs/{procurement,hr,it} via real
dev-login. Real hub structure is: Workbench title + Workflow Commands
(4 named buttons) + Queue (left) + Selected Work (right).

- Procurement: New purchase request / Vendor approval / PO change-cancel / Three-way match
- HR: Employee onboarding / Off-boarding / Sick leave / Payroll management
- IT: Access request / Equipment request / Service ticket / User off-boarding

Hub.tsx rewritten: header + Workflow Commands grid + queue/selected
split pane that matches dev's 'Queue' + 'Selected work' layout.

Oracle gap #3 (hubs not feature parity) — partial close. Approvals queue
and document browser still outstanding but the workbench shape now
mirrors dev.
This commit is contained in:
shad
2026-06-14 13:19:49 +04:00
parent 8933148719
commit 665dcf488e
4 changed files with 199 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/index.css
+15
View File
@@ -1994,3 +1994,18 @@ select.studio-input { background: var(--bp-paper); }
.explainer-foot { margin-top: 32px; padding-top: 16px; border-top: 1px solid color-mix(in srgb, var(--bp-navy) 25%, transparent); }
.explainer-foot-label { font-family: var(--bp-mono); font-size: 10px; letter-spacing: 0.08em; color: var(--bp-muted); }
.explainer-foot p { font-size: 11px; color: var(--bp-muted); margin-top: 4px; }
.hub-commands { margin-bottom: 24px; }
.hub-split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.hub-queue, .hub-selected { border: 1px solid var(--bp-navy); padding: 16px; background: var(--bp-paper); display: flex; flex-direction: column; gap: 10px; }
.hub-queue-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.hub-queue-row {
width: 100%; text-align: left; padding: 8px 10px;
background: var(--bp-paper); border: 1px solid color-mix(in srgb, var(--bp-navy) 20%, transparent);
color: var(--bp-navy); font-size: 12px; cursor: pointer;
display: flex; gap: 8px; align-items: center;
}
.hub-queue-row:hover { background: color-mix(in srgb, var(--bp-amber) 15%, var(--bp-paper)); }
.hub-queue-row.active { background: color-mix(in srgb, var(--bp-amber) 30%, var(--bp-paper)); border-color: var(--bp-navy); }
.hub-queue-name { flex: 1; }
@media (max-width: 900px) { .hub-split { grid-template-columns: 1fr; } }