// ScheduleGrid.jsx — TeamBridge app inside a lo-fi browser window. // Browser chrome + icon rail + wireframe left nav + weekly schedule (the action). // All inner content uses LOCAL coords (0,0 = window content top-left). // Browser window placement on the 1920x1080 canvas (full width; agent cards float over it) const WIN = { x: 130, y: 100, w: 1660, h: 880 }; // Local layout (inside the window) const L = { CHROME: 46, RAIL: 56, NAV: 236, HEADER: 58, FILTER: 50, DAYHDR: 54, LEFT: 300, WINW: 1660, WINH: 880 }; L.MAIN_X = L.RAIL + L.NAV; // 292 L.MAIN_W = L.WINW - L.MAIN_X; // 1516 L.APP_TOP = L.CHROME; // 46 L.ROWS_TOP = L.APP_TOP + L.HEADER + L.FILTER + L.DAYHDR; // 208 L.ROWS = 6; L.ROW_H = (L.WINH - L.ROWS_TOP) / L.ROWS; // ~130.7 L.DAY_X0 = L.MAIN_X + L.LEFT; // 592 L.DAY_W = (L.MAIN_W - L.LEFT) / 7; // ~173.7 const cellX = (d) => L.DAY_X0 + d * L.DAY_W; const cellY = (r) => L.ROWS_TOP + r * L.ROW_H; const cellCenterL = (r, d) => ({ x: cellX(d) + L.DAY_W / 2, y: cellY(r) + L.ROW_H / 2 }); const FOCAL_DAY = 2, CANCEL_ROW = 3, TARGET_ROW = 1, TODAY = 2; // canvas-space focal points (for the camera in HeroAnimation) const GRID = { WIN, colXCanvas: WIN.x + cellCenterL(0, FOCAL_DAY).x, // ~1082 cancelYCanvas: WIN.y + cellCenterL(CANCEL_ROW, FOCAL_DAY).y, // ~707 targetYCanvas: WIN.y + cellCenterL(TARGET_ROW, FOCAL_DAY).y, // ~443 }; GRID.midYCanvas = (GRID.cancelYCanvas + GRID.targetYCanvas) / 2; window.GRID = GRID; const DAYS = [ { d: 'Sun', n: 31 }, { d: 'Mon', n: 1 }, { d: 'Tue', n: 2 }, { d: 'Wed', n: 3 }, { d: 'Thu', n: 4 }, { d: 'Fri', n: 5 }, { d: 'Sat', n: 6 }, ]; // shift color system — role tag + location tag (colorful but still wireframe text) const ROLE_COLORS = [ { bg: '#E4EEFB', bar: '#3F82C9' }, // blue { bg: '#ECE8F7', bar: '#7B5BB2' }, // purple { bg: '#FBE7E7', bar: '#CF4B4A' }, // red { bg: '#E9EAF7', bar: '#5B63C4' }, // indigo ]; const PRIORITY_COLOR = { bg: '#E0F2E4', bar: '#2E9E3C' }; const LOC_COLORS = { green: { bg: '#E7F4EA', bar: '#2E9E3C' }, coral: { bg: '#FBEBE3', bar: '#C76A48' }, amber: { bg: '#FAF1DD', bar: '#C68A2C' }, teal: { bg: '#E2F2F1', bar: '#2E9690' }, }; const FAC_LOC = { 'Birchwood Park': 'green', 'Portside Health': 'coral', 'Northern Cardinal': 'amber', 'Nansemond Pointe': 'teal', 'Autumn Care': 'coral', }; function _hash(s){ let h=0; for(let i=0;i<(s||'').length;i++) h=(h*31+s.charCodeAt(i))>>>0; return h; } const ROWS = [ { name: 'Aisha Armour', initials: 'AA', hours: '29.9 hrs', tone: '#D6CFC4', shifts: { 0: { t: '7:25a–6:49p', f: 'Birchwood Park', c: 'green' }, 4: { t: '7:00a–3:00p', f: 'Portside Health', c: 'purple' }, 5: { t: '7:00a–7:00p', f: 'Portside Health', c: 'purple' } } }, { name: 'Maya Okafor', initials: 'MO', hours: '22.5 hrs', tone: '#E0B9A6', candidate: true, shifts: { 1: { t: '7:00a–3:00p', f: 'Northern Cardinal', c: 'purple' }, 3: { t: '7:00a–3:00p', f: 'Northern Cardinal', c: 'purple' } } }, { name: 'Anna Bradshaw', initials: 'AB', hours: '46.5 hrs', tone: '#B9C7B0', shifts: { 0: { t: '6:58a–7:30p', f: 'Portside Health', c: 'green' }, 2: { t: '6:56a–7:00p', f: 'Portside Health', c: 'green' }, 3: { t: '7:00a–7:00p', f: 'Northern Cardinal', c: 'purple' }, 5: { t: '7:00a–7:00p', f: 'Portside Health', c: 'green' } } }, { name: 'Camren Branch', initials: 'CB', hours: '7.5 hrs', tone: '#C9B6D6', shifts: { } }, { name: 'Deon Carter', initials: 'DC', hours: '31.2 hrs', tone: '#A9C2D6', candidate: true, shifts: { 1: { t: '7:13p–7:52a', f: 'Nansemond Pointe', c: 'green' }, 4: { t: '7:00p–7:00a', f: 'Nansemond Pointe', c: 'green' }, 6: { t: '7:00p–7:00a', f: 'Nansemond Pointe', c: 'green' } } }, { name: 'Luka Petrov', initials: 'LP', hours: '18.0 hrs', tone: '#C7C2B4', candidate: true, shifts: { 0: { t: '7:00p–7:00a', f: 'Nansemond Pointe', c: 'green' }, 5: { t: '7:00a–3:00p', f: 'Portside Health', c: 'purple' } } }, ]; // Colorful-but-wireframe shift chip: grey time bar + colored role / priority / location tags. function ChipTag({ c, w }) { return (
); } function ShiftChip({ shift, w }) { const role = ROLE_COLORS[_hash(shift.t) % ROLE_COLORS.length]; const loc = LOC_COLORS[FAC_LOC[shift.f] || 'green']; const priority = (_hash((shift.f || '') + (shift.t || '')) % 4) === 0; return (
{priority && }
); } // ── wireframe nav helpers ──────────────────────────────────────────────────── function NavItem({ icon, label, active, indent = 0, faded }) { const TB = window.TB; return (
); } function NavSection({ w }) { return
; } function ScheduleGrid({ cancelP = 0, moveP = 0 }) { const TB = window.TB; const me = window.Easing.easeInOutCubic(window.clamp(moveP, 0, 1)); const from = cellCenterL(CANCEL_ROW, FOCAL_DAY); const to = cellCenterL(TARGET_ROW, FOCAL_DAY); const travelX = from.x + (to.x - from.x) * me; const travelY = from.y + (to.y - from.y) * me; const chipBg = me < 0.5 ? '#FFE9E9' : '#E6F6E7'; const chipBar = me < 0.5 ? '#CC1E1D' : '#1D8A28'; const pill = { height: 32, display: 'flex', alignItems: 'center', padding: '0 13px', borderRadius: 8, border: `1px solid ${TB.line}`, background: '#fff', fontSize: 12.5, fontWeight: 600, color: TB.ink2, whiteSpace: 'nowrap', gap: 6 }; return (
{/* browser window */}
{/* chrome bar */}
app.teambridge.com/schedule
{/* icon rail */}
{[0, 1, 2, 3, 4, 5, 6].map(i => (
))}
TS
{/* wireframe left nav */}
{/* ===== MAIN ===== */} {/* header */}
{/* filter row */}
{/* today column highlight */}
{/* day header */}
{DAYS.map((day, i) => { const today = i === TODAY; return (
{day.d} {day.n}
); })}
{/* grid lines */} {ROWS.map((_, r) =>
)} {DAYS.map((_, i) =>
)} {/* employee rows */} {ROWS.map((row, r) => (
))} {/* data-driven chips (skip focal cells) */} {ROWS.map((row, r) => DAYS.map((_, d) => { const shift = row.shifts[d]; if (!shift) return null; return (
); }))} {/* FOCAL: Camren Tuesday chip fades on cancel */}
{/* FOCAL: open slot */}
CALLED OUT
{/* FOCAL: travelling / filled chip */} {moveP > 0.001 && (
0.5 ? '#9FD3A6' : '#F2A6A5' }}>
{me > 0.98 && ✓}
0.5 ? '#C3E6C8' : '#F7C9C8' }}>
)}
); } window.ScheduleGrid = ScheduleGrid; window.ROWS = ROWS;