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

feat(hubs): Procurement / People / IT hubs over real EA2 catalogue

Browse Source 
Single Hub component parameterised by hub key. Each hub:
- Lists quick actions that look up a matching published process and
  start it as a real transaction
- Pulls the full published catalogue from /api/ea2/flow/processes and
  filters via a hub-specific regex (procurement|hr|it)
- Falls back to top-N when no matches, with a Studio CTA when empty

Landing surface gets a hero-hub row of chips: Procurement Hub, People
Hub, IT Hub, Talk to Pi, Team Chat. Same EA2-write doctrine as wizard.
This commit is contained in:
shad
2026-06-14 12:47:24 +04:00
parent 47b1bf6998
commit b438e9a664
5 changed files with 248 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/index.css
+22
View File
@@ -1937,3 +1937,25 @@ select.studio-input { background: var(--bp-paper); }
.agent-scene { grid-template-columns: 1fr; height: auto; }
.agent-sidebar { max-height: 240px; }
}
.hub-scene { padding: 24px; max-width: 1200px; margin: 0 auto; background: var(--bp-paper); min-height: calc(100vh - 60px); }
.hub-head { margin-bottom: 24px; }
.hub-intro { font-size: 13px; color: var(--bp-muted); max-width: 720px; line-height: 1.5; margin-top: 6px; }
.hub-section-label { font-family: var(--bp-mono); font-size: 10px; letter-spacing: 0.08em; color: var(--bp-muted); margin-bottom: 10px; text-transform: uppercase; }
.hub-quick { margin-bottom: 32px; }
.hub-quick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.hub-quick-card { text-align: left; padding: 14px; background: var(--bp-paper); border: 1px solid var(--bp-navy); cursor: pointer; transition: background 0.1s; display: flex; flex-direction: column; gap: 6px; }
.hub-quick-card:hover:not(:disabled) { background: color-mix(in srgb, var(--bp-amber) 15%, var(--bp-paper)); }
.hub-quick-card:disabled { opacity: 0.5; cursor: not-allowed; }
.hub-quick-title { font-size: 12px; font-weight: 700; color: var(--bp-navy); display: flex; align-items: center; gap: 6px; }
.hub-quick-meta { font-family: var(--bp-mono); font-size: 10px; color: var(--bp-muted); }
.hub-catalogue-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.hub-flow-card { padding: 12px; background: var(--bp-paper); border: 1px solid var(--bp-navy); display: flex; flex-direction: column; gap: 8px; }
.hub-flow-title { font-size: 12px; font-weight: 700; color: var(--bp-navy); display: flex; align-items: center; gap: 6px; }
.hub-flow-desc { font-size: 11px; color: var(--bp-muted); line-height: 1.4; }
.hub-empty { padding: 16px; font-size: 11px; color: var(--bp-muted); }
.link-inline { background: transparent; border: 0; padding: 0; color: var(--bp-navy); text-decoration: underline; cursor: pointer; font: inherit; }
.hero-hub-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.hub-chip { padding: 8px 14px; background: var(--bp-paper); border: 1px solid var(--bp-navy); color: var(--bp-navy); font-family: var(--bp-mono); font-size: 11px; letter-spacing: 0.04em; cursor: pointer; transition: background 0.1s; }
.hub-chip:hover { background: color-mix(in srgb, var(--bp-amber) 20%, var(--bp-paper)); }