https://www.blankcollar.ai/demo/bc-dashboard.js?v=1786060000

1/* AUTO-GENERATED from bc-dashboard.jsx by demo/build-demo.cjs — do not edit by hand. */
2const StatStrip = () => React.createElement("div", {
3  className: "stats"
4}, bc.stats.map(s => React.createElement("div", {
5  key: s.label,
6  className: "stat"
7}, React.createElement("div", {
8  className: "label"
9}, s.label), React.createElement("div", {
10  className: "v num"
11}, s.value), React.createElement("div", {
12  className: `delta ${s.deltaPos ? "pos" : "neg"}`
13}, s.deltaPos ? "↑" : "↓", " ", s.delta))));
14const Spark = ({
15  data,
16  pos
17}) => React.createElement("div", {
18  className: "spark"
19}, data.map((v, i) => React.createElement("i", {
20  key: i,
21  style: {
22    height: `${v / 14 * 100}%`,
23    background: pos ? "var(--ink-2)" : "var(--warn)",
24    opacity: 0.4 + i / data.length * 0.6
25  }
26})));
27const GoalRow = ({
28  g,
29  onOpen
30}) => {
31  const ag = bc.teammates.find(t => t.id === g.owner) || bc.you;
32  const statusColor = {
33    "on-track": "pos",
34    "at-risk": "warn",
35    "done": "info",
36    "queued": "idle"
37  }[g.status] || "idle";
38  return React.createElement("div", {
39    className: "goal-row",
40    onClick: () => onOpen(g.id)
41  }, React.createElement("div", {
42    className: "gn"
43  }, g.id), React.createElement("div", null, React.createElement("div", {
44    className: "gtitle"
45  }, g.title), React.createElement("div", {
46    className: "gsub"
47  }, g.sub)), React.createElement("div", {
48    className: "gprog"
49  }, React.createElement("div", {
50    className: "progressbar"
51  }, React.createElement("i", {
52    style: {
53      width: `${g.progress}%`
54    }
55  })), React.createElement("span", {
56    style: {
57      width: 28,
58      textAlign: "right"
59    }
60  }, g.progress, "%")), React.createElement("div", {
61    className: "gowner"
62  }, ag.human ? React.createElement("div", {
63    className: "avatar h",
64    style: {
65      width: 22,
66      height: 22,
67      fontSize: 10
68    }
69  }, ag.initials) : React.createElement("div", {
70    className: "sigil",
71    style: {
72      width: 22,
73      height: 22
74    }
75  }, React.createElement(Sigil, {
76    seed: ag.seed || ag.name,
77    size: 20
78  })), React.createElement("span", {
79    style: {
80      fontSize: 12
81    }
82  }, ag.name?.split(" ")[0] || "John")), React.createElement("div", {
83    className: "gdue"
84  }, React.createElement("span", {
85    className: `dot ${statusColor}`,
86    style: {
87      marginRight: 6
88    }
89  }), g.due), React.createElement("div", {
90    className: "gmore"
91  }, React.createElement(I, {
92    name: "chev",
93    size: 14
94  })));
95};
96const Dashboard = ({
97  onOpenGoal,
98  onOpenBrain
99}) => {
100  const today = new Date().toLocaleDateString("en-US", {
101    weekday: "long",
102    month: "long",
103    day: "numeric"
104  });
105  const liveGoals = bc.goals.filter(g => g.track === "active");
106  const doneGoals = bc.goals.filter(g => g.track === "done");
107  return React.createElement("div", {
108    className: "page"
109  }, React.createElement("div", {
110    className: "page-head"
111  }, React.createElement("div", {
112    className: "meta"
113  }, React.createElement("div", {
114    className: "editorial-eyebrow"
115  }, "\u2116 24 \xB7 Week of Jul 28"), React.createElement("div", {
116    className: "titlerow"
117  }, React.createElement("div", {
118    className: "h1"
119  }, "Good afternoon, John.")), React.createElement("div", {
120    className: "small",
121    style: {
122      maxWidth: 620,
123      marginTop: 4
124    }
125  }, "Your studio is on pace for a record quarter. Two items want your attention today; everything else is moving without you.")), React.createElement("div", {
126    className: "stack-h",
127    style: {
128      alignItems: "center"
129    }
130  }, React.createElement("span", {
131    className: "tiny mono"
132  }, today), React.createElement("span", {
133    className: "vrule",
134    style: {
135      height: 28
136    }
137  }), React.createElement("button", {
138    className: "btn btn-sm"
139  }, React.createElement(I, {
140    name: "play",
141    size: 11
142  }), " Daily briefing"))), React.createElement(StatStrip, null), React.createElement("div", {
143    className: "twocol"
144  }, React.createElement("div", {
145    className: "left"
146  }, React.createElement("div", {
147    className: "section"
148  }, React.createElement("div", {
149    className: "section-head"
150  }, React.createElement("div", {
151    className: "stack-h"
152  }, React.createElement("span", {
153    className: "title"
154  }, "Wants your attention"), React.createElement("span", {
155    className: "pill"
156  }, "2 items")), React.createElement("div", {
157    className: "stack-h"
158  }, React.createElement("span", {
159    className: "tiny mono"
160  }, "Updated 1m ago"))), React.createElement("div", {
161    className: "card",
162    style: {
163      padding: 0,
164      overflow: "hidden"
165    }
166  }, React.createElement("div", {
167    style: {
168      display: "grid",
169      gridTemplateColumns: "auto 1fr auto",
170      gap: 16,
171      padding: "16px 18px",
172      alignItems: "center",

173      borderBottom: "1px solid var(--line)"
174    }
175  }, React.createElement("div", {
176    className: "sigil",
177    style: {
178      width: 36,
179      height: 36
180    }
181  }, React.createElement(Sigil, {
182    seed: "Linden-rec-13",
183    size: 34
184  })), React.createElement("div", null, React.createElement("div", {
185    style: {
186      fontSize: 13,
187      fontWeight: 500
188    }
189  }, "Linden wants approval to extend an offer", " ", React.createElement("span", {
190    className: "mono",
191    style: {
192      color: "var(--muted)",
193      fontSize: 11
194    }
195  }, "\xB7 Recruiting")), React.createElement("div", {
196    className: "small",
197    style: {
198      marginTop: 4
199    }
200  }, "Senior Designer, candidate ", React.createElement("span", {
201    className: "mono"
202  }, "#C-019"), ". $148K base, 18% above band. Reasoning: 9 of 9 interviewers ranked top-1. Two competing offers in market.")), React.createElement("div", {
203    className: "stack-h"
204  }, React.createElement("button", {
205    className: "btn btn-sm"
206  }, "Decline"), React.createElement("button", {
207    className: "btn btn-primary btn-sm"
208  }, React.createElement(I, {
209    name: "check",
210    size: 12
211  }), " Approve"))), React.createElement("div", {
212    style: {
213      display: "grid",
214      gridTemplateColumns: "auto 1fr auto",
215      gap: 16,
216      padding: "16px 18px",
217      alignItems: "center"
218    }
219  }, React.createElement("div", {
220    className: "sigil",
221    style: {
222      width: 36,
223      height: 36
224    }
225  }, React.createElement(Sigil, {
226    seed: "Quill-cpy-08",
227    size: 34
228  })), React.createElement("div", null, React.createElement("div", {
229    style: {
230      fontSize: 13,
231      fontWeight: 500
232    }
233  }, "Quill drafted the Hadid Residence proposal, ready for your review", React.createElement("span", {
234    className: "mono",
235    style: {
236      color: "var(--muted)",
237      fontSize: 11,
238      marginLeft: 8
239    }
240  }, "\xB7 $128,400 \xB7 11 wk")), React.createElement("div", {
241    className: "small",
242    style: {
243      marginTop: 4
244    }
245  }, "Third revision incorporates your last note on phasing. Veda has client on a soft hold until Friday.")), React.createElement("div", {
246    className: "stack-h"
247  }, React.createElement("button", {
248    className: "btn btn-sm"
249  }, "Open in sandbox"), React.createElement("button", {
250    className: "btn btn-primary btn-sm"
251  }, "Review draft"))))), React.createElement("div", {
252    className: "section"
253  }, React.createElement("div", {
254    className: "section-head"
255  }, React.createElement("div", {
256    className: "stack-h"
257  }, React.createElement("span", {
258    className: "title"
259  }, "Active goals"), React.createElement("span", {
260    className: "pill"
261  }, liveGoals.length)), React.createElement("div", {
262    className: "stack-h"
263  }, React.createElement("div", {
264    className: "seg"
265  }, React.createElement("button", {
266    className: "on"
267  }, "Mine"), React.createElement("button", null, "Studio"), React.createElement("button", null, "All")), React.createElement("button", {
268    className: "btn btn-ghost btn-sm"
269  }, React.createElement(I, {
270    name: "filter",
271    size: 12
272  }), " Filter"), React.createElement("button", {
273    className: "btn btn-ghost btn-sm"
274  }, React.createElement(I, {
275    name: "sort",
276    size: 12
277  }), " Sort"))), React.createElement("div", {
278    className: "goal-list"
279  }, liveGoals.map(g => React.createElement(GoalRow, {
280    key: g.id,
281    g: g,
282    onOpen: onOpenGoal
283  })))), React.createElement("div", {
284    className: "section"
285  }, React.createElement("div", {
286    className: "section-head"
287  }, React.createElement("div", {
288    className: "stack-h"
289  }, React.createElement("span", {
290    className: "title"
291  }, "This week's outcomes"), React.createElement("span", {
292    className: "tiny mono"
293  }, "Mon 28 \u2013 Sun 3")), React.createElement("button", {
294    className: "btn btn-ghost btn-sm"
295  }, "View all", React.createElement(I, {
296    name: "arrow",
297    size: 12
298  }))), React.createElement("div", {
299    style: {
300      display: "grid",
301      gridTemplateColumns: "repeat(3, 1fr)",
302      gap: 0,
303      border: "1px solid var(--line)",
304      borderRadius: 6,
305      overflow: "hidden"
306    }
307  }, [{
308    v: "+ $84K",
309    l: "New revenue booked",
310    sub: "2 contracts signed",
311    pos: true
312  }, {
313    v: "− $12.4K",
314    l: "Costs avoided",
315    sub: "Vendor renegotiations",
316    pos: true
317  }, {
318    v: "+ 5",
319    l: "New leads qualified",

320    sub: "From 23 raw inbound",
321    pos: true
322  }].map((c, i) => React.createElement("div", {
323    key: i,
324    style: {
325      padding: 18,
326      borderRight: i < 2 ? "1px solid var(--line)" : 0,
327      background: "var(--bg-1)"
328    }
329  }, React.createElement("div", {
330    className: "eyebrow",
331    style: {
332      marginBottom: 8
333    }
334  }, c.l), React.createElement("div", {
335    className: "num",
336    style: {
337      fontSize: 26,
338      fontWeight: 500,
339      letterSpacing: "-0.02em"
340    }
341  }, c.v), React.createElement("div", {
342    className: "tiny",
343    style: {
344      marginTop: 4
345    }
346  }, c.sub))))), React.createElement("div", {
347    className: "section"
348  }, React.createElement("div", {
349    className: "section-head"
350  }, React.createElement("div", {
351    className: "stack-h"
352  }, React.createElement("span", {
353    className: "title"
354  }, "Recently closed"), React.createElement("span", {
355    className: "pill"
356  }, doneGoals.length))), React.createElement("div", {
357    className: "goal-list"
358  }, doneGoals.map(g => React.createElement(GoalRow, {
359    key: g.id,
360    g: g,
361    onOpen: onOpenGoal
362  }))))), React.createElement("div", {
363    className: "right"
364  }, React.createElement("div", {
365    className: "rail-section"
366  }, React.createElement("div", {
367    className: "section-head",
368    style: {
369      marginBottom: 12
370    }
371  }, React.createElement("span", {
372    className: "title"
373  }, "Heartbeat"), React.createElement("span", {
374    className: "tiny mono"
375  }, "14d")), bc.heartbeats.map(h => React.createElement("div", {
376    key: h.kpi,
377    className: "hb-row"
378  }, React.createElement("div", null, React.createElement("div", {
379    className: "hbn"
380  }, h.kpi), React.createElement("div", {
381    className: "hbsub"
382  }, h.v, " \xB7 ", React.createElement("span", {
383    style: {
384      color: h.pos ? "var(--pos)" : "var(--warn)"
385    }
386  }, h.sub))), React.createElement(Spark, {
387    data: h.trend,
388    pos: h.pos
389  })))), React.createElement("div", {
390    className: "rail-section"
391  }, React.createElement("div", {
392    className: "section-head",
393    style: {
394      marginBottom: 12
395    }
396  }, React.createElement("span", {
397    className: "title"
398  }, "Live now"), React.createElement("span", {
399    className: "live-tag"
400  }, React.createElement("span", {
401    className: "dot"
402  }), "5")), bc.teammates.filter(t => t.status === "live").slice(0, 5).map(a => React.createElement("div", {
403    key: a.id,
404    className: "agent-item"
405  }, React.createElement("div", {
406    className: "sigil"
407  }, React.createElement(Sigil, {
408    seed: a.seed,
409    size: 30
410  })), React.createElement("div", null, React.createElement("div", {
411    className: "name"
412  }, a.name, " ", React.createElement("span", {
413    className: "role",
414    style: {
415      marginLeft: 6
416    }
417  }, a.role)), React.createElement("div", {
418    className: "activity"
419  }, a.activity)), React.createElement("span", {
420    className: "dot live"
421  }))), React.createElement("button", {
422    className: "btn btn-ghost btn-sm",
423    style: {
424      marginTop: 12,
425      width: "100%",
426      justifyContent: "center"
427    }
428  }, "Open team")), React.createElement("div", {
429    className: "rail-section"
430  }, React.createElement("div", {
431    className: "section-head",
432    style: {
433      marginBottom: 12
434    }
435  }, React.createElement("span", {
436    className: "title"
437  }, "Across your channels")), React.createElement("div", {
438    className: "stack-v",
439    style: {
440      gap: 10
441    }
442  }, [{
443    ch: "slack",
444    label: "Slack",
445    note: "12 messages · 4 from clients",
446    dot: "live"
447  }, {
448    ch: "whatsapp",
449    label: "WhatsApp",
450    note: "4 unread · Aster handling",
451    dot: "info"
452  }, {
453    ch: "email",
454    label: "Email",
455    note: "8 in studio inbox · 2 need you",
456    dot: "warn"
457  }, {
458    ch: "telegram",
459    label: "Telegram",
460    note: "1 vendor reply",
461    dot: "idle"
462  }].map(c => React.createElement("div", {
463    key: c.ch,
464    style: {
465      display: "flex",
466      alignItems: "center",
467      gap: 10
468    }
469  }, React.createElement(ChannelMark, {
470    ch: c.ch,
471    size: 20
472  }), React.createElement("div", {
473    style: {
474      flex: 1
475    }
476  }, React.createElement("div", {
477    style: {
478      fontSize: 12.5
479    }
480  }, c.label), React.createElement("div", {
481    className: "tiny"
482  }, c.note)), React.createElement("span", {
483    className: `dot ${c.dot}`
484  }))))), React.createElement("div", {
485    className: "rail-section"
486  }, React.createElement("div", {
487    className: "section-head",
488    style: {
489      marginBottom: 12
490    }
491  }, React.createElement("span", {
492    className: "title"
493  }, "Company brain"), React.createElement("button", {
494    className: "btn btn-ghost btn-sm",
495    onClick: onOpenBrain
496  }, "Open ", React.createElement(I, {
497    name: "arrow",
498    size: 12
499  }))), React.createElement("div", {
500    style: {
501      height: 140,
502      position: "relative",
503      overflow: "hidden",
504      border: "1px solid var(--line)",
505      borderRadius: 4,
506      background: "var(--bg)"
507    }
508  }, React.createElement(BrainMini, null)), React.createElement("div", {
509    className: "tiny",
510    style: {
511      marginTop: 10
512    }
513  }, React.createElement("span", {
514    className: "num"
515  }, "2,418"), " facts \xB7 ", React.createElement("span", {
516    className: "num"
517  }, "147"), " entities \xB7 last updated 2m ago")))));
518};
519const BrainMini = () => {
520  const nodes = bc.brainNodes.slice(0, 14);
521  return React.createElement("svg", {

522    viewBox: "0 0 100 60",
523    preserveAspectRatio: "none",
524    width: "100%",
525    height: "100%"
526  }, bc.brainEdges.slice(0, 18).map(([a, b], i) => {
527    const na = bc.brainNodes.find(n => n.id === a);
528    const nb = bc.brainNodes.find(n => n.id === b);
529    if (!na || !nb) return null;
530    return React.createElement("line", {
531      key: i,
532      x1: na.x,
533      y1: na.y * 0.6,
534      x2: nb.x,
535      y2: nb.y * 0.6,
536      stroke: "var(--line-2)",
537      strokeWidth: "0.3"
538    });
539  }), nodes.map(n => React.createElement("circle", {
540    key: n.id,
541    cx: n.x,
542    cy: n.y * 0.6,
543    r: n.size * 0.18,
544    fill: n.kind === "person" ? "var(--ink)" : n.kind === "agent" ? "var(--ink-2)" : n.kind === "goal" ? "var(--bg)" : "var(--muted)",
545    stroke: n.kind === "goal" ? "var(--ink)" : "none",
546    strokeWidth: "0.4"
547  })));
548};
549window.Dashboard = Dashboard;