+ {data.map(d => {
+ const h = max > 0 ? (d.revenue / max) * 100 : 0;
+ const isCurrent = d.hour === currentHour;
+ const isFuture = parseInt(d.hour) > parseInt(currentHour);
+ return (
+
+
+
0 ? 4 : 0,
+ background: isCurrent
+ ? 'var(--brand-500)'
+ : isFuture
+ ? 'var(--ink-100)'
+ : 'var(--brand-200)',
+ }} />
+
+
{d.hour}
+
+ );
+ })}
+
+
+ );
+}
+
+// ---------------------------------------------------------------- Reservations
+function ReservationsCard() {
+ return (
+
+ Add}>
+
+ {OPS_DATA.reservations.map(r => (
+
+
{r.time}
+
+
{r.name}
+
+ {r.guests} guests · Table {r.table}
+ {r.notes && <> · {r.notes} }
+
+
+
+ ))}
+
+ );
+}
+
+window.OpsCards = { KpiCard, ProgressBar, TablesOverview, HourlyRevenueCard, ReservationsCard };
diff --git a/CLAUDE_DESIGN/ops-data.jsx b/CLAUDE_DESIGN/ops-data.jsx
new file mode 100644
index 0000000..a5d3867
--- /dev/null
+++ b/CLAUDE_DESIGN/ops-data.jsx
@@ -0,0 +1,73 @@
+// Mock data for the daily ops dashboard
+
+window.OPS_DATA = {
+ business: {
+ name: 'Trattoria del Sole',
+ date: 'Saturday, April 25',
+ dayStartedAt: '11:30',
+ dayDurationMins: 4 * 60 + 18, // 4h 18m so far
+ },
+
+ kpis: {
+ revenue: 2847.50,
+ revenueGoal: 4500,
+ revenueLastWeek: 2640.00,
+ covers: 64,
+ coversGoal: 110,
+ coversLastWeek: 71,
+ tablesOpen: 7,
+ tablesTotal: 18,
+ avgTicket: 44.49,
+ },
+
+ hourly: [
+ // Lunch service mostly done, dinner ramping up
+ { hour: '11', revenue: 0 },
+ { hour: '12', revenue: 480 },
+ { hour: '13', revenue: 720 },
+ { hour: '14', revenue: 410 },
+ { hour: '15', revenue: 180 },
+ { hour: '16', revenue: 90 },
+ { hour: '17', revenue: 240 },
+ { hour: '18', revenue: 580 },
+ { hour: '19', revenue: 147 },
+ { hour: '20', revenue: 0 },
+ { hour: '21', revenue: 0 },
+ { hour: '22', revenue: 0 },
+ ],
+
+ shifts: [
+ { id: 1, name: 'Marco Riva', section: 'Terrace', clockIn: '11:00', hoursWorked: 4.8, tables: ['A1', 'A2'], status: 'active' },
+ { id: 2, name: 'Sofia Greco', section: 'Main hall', clockIn: '11:00', hoursWorked: 4.8, tables: ['B2'], status: 'active' },
+ { id: 3, name: 'Luca Bianchi', section: 'Main hall', clockIn: '11:30', hoursWorked: 4.3, tables: ['A4', 'B4'], status: 'break' },
+ { id: 4, name: 'Elena Costa', section: 'Bar', clockIn: '12:00', hoursWorked: 3.8, tables: ['B1', 'B2'], status: 'active' },
+ { id: 5, name: 'Alessandro Conti', section: 'Terrace', clockIn: '17:00', hoursWorked: 0.3, tables: [], status: 'active' },
+ ],
+
+ scheduledShifts: [
+ { id: 6, name: 'Giulia Ferri', section: 'Main hall', scheduledAt: '18:00' },
+ { id: 7, name: 'Paolo Mancini', section: 'Bar', scheduledAt: '18:30' },
+ ],
+
+ reservations: [
+ { id: 1, time: '19:00', name: 'Bianchi', guests: 4, table: 'A1', notes: 'Anniversary' },
+ { id: 2, time: '19:30', name: 'Romano', guests: 2, table: 'B3', notes: '' },
+ { id: 3, time: '20:00', name: 'De Luca', guests: 6, table: 'C1', notes: 'High chair' },
+ { id: 4, time: '20:00', name: 'Ferrari', guests: 2, table: '—', notes: 'VIP' },
+ { id: 5, time: '20:30', name: 'Russo', guests: 8, table: 'C2', notes: 'Birthday' },
+ { id: 6, time: '21:00', name: 'Marino', guests: 3, table: 'A3', notes: '' },
+ ],
+
+ recentMessages: [
+ { id: 1, to: 'Marco Riva', text: 'Come see me', sentAt: '15:42', read: true },
+ { id: 2, to: 'Everyone', text: 'Specials updated — see kitchen', sentAt: '15:10', read: true },
+ { id: 3, to: 'Luca Bianchi', text: 'Table A4 needs cleaning', sentAt: '14:55', read: false },
+ ],
+
+ presets: [
+ 'Come see me',
+ 'Table __ needs you',
+ 'Table __ needs cleaning',
+ 'Take a break',
+ ],
+};
diff --git a/CLAUDE_DESIGN/ops-layouts.jsx b/CLAUDE_DESIGN/ops-layouts.jsx
new file mode 100644
index 0000000..dbfa064
--- /dev/null
+++ b/CLAUDE_DESIGN/ops-layouts.jsx
@@ -0,0 +1,217 @@
+// Main ops dashboard layout
+
+const { Avatar, Card, Btn, Icon } = window.OpsUI;
+const { KpiCard, ProgressBar, TablesOverview, HourlyRevenueCard, ReservationsCard } = window.OpsCards;
+const { ShiftsCard, MessagesCard, ComposeModal, EndDayModal } = window.OpsCards2;
+const { OPS_DATA } = window;
+
+function TopBar({ onEndDay }) {
+ const b = OPS_DATA.business;
+ return (
+
+
TS
+
+
+
{b.name}
+
+
+
+
+ {b.date} · started at {b.dayStartedAt} · {Math.floor(b.dayDurationMins/60)}h {b.dayDurationMins%60}m running
+
+
+
+ Reports
+
+
+ );
+}
+
+// Compact tablet top bar
+function TabletTopBar({ onEndDay }) {
+ const b = OPS_DATA.business;
+ return (
+
+
+
+
{b.name}
+
+
+
+
+ {b.date} · {b.dayStartedAt} · {Math.floor(b.dayDurationMins/60)}h {b.dayDurationMins%60}m
+
+
+
+
+
+ );
+}
+
+// KPI strip — 3 cards
+function KpiStrip({ compact }) {
+ const k = OPS_DATA.kpis;
+ const revPct = (k.revenue / k.revenueGoal) * 100;
+ const covPct = (k.covers / k.coversGoal) * 100;
+ const tablesOpenPct = (k.tablesOpen / k.tablesTotal) * 100;
+ const revDelta = ((k.revenue - k.revenueLastWeek) / k.revenueLastWeek) * 100;
+ const covDelta = ((k.covers - k.coversLastWeek) / k.coversLastWeek) * 100;
+
+ return (
+
+ );
+}
+
+// ---------------------------------------------------------------- DESKTOP LAYOUT
+function DesktopDashboard() {
+ const [composeOpen, setComposeOpen] = React.useState(false);
+ const [composeText, setComposeText] = React.useState('');
+ const [composeTo, setComposeTo] = React.useState('Everyone');
+ const [endDayOpen, setEndDayOpen] = React.useState(false);
+
+ const openCompose = (preset, to) => {
+ setComposeText(preset || '');
+ setComposeTo(to || 'Everyone');
+ setComposeOpen(true);
+ };
+
+ return (
+
+
setEndDayOpen(true)} />
+
+
+
Today at a glance
+
Updated 19:08 · auto-refresh
+
+
+
+
+
+
+
+
openCompose('', s.name)} />
+
+
+
+
+
setComposeOpen(false)} />
+ setEndDayOpen(false)} onConfirm={() => setEndDayOpen(false)} />
+
+ );
+}
+
+// ---------------------------------------------------------------- TABLET LAYOUT
+function TabletDashboard() {
+ const [composeOpen, setComposeOpen] = React.useState(false);
+ const [composeText, setComposeText] = React.useState('');
+ const [composeTo, setComposeTo] = React.useState('Everyone');
+ const [endDayOpen, setEndDayOpen] = React.useState(false);
+
+ const openCompose = (preset, to) => {
+ setComposeText(preset || '');
+ setComposeTo(to || 'Everyone');
+ setComposeOpen(true);
+ };
+
+ return (
+
+
setEndDayOpen(true)} />
+
+
+
+
+
+
openCompose('', s.name)} />
+
+
setComposeOpen(false)} />
+ setEndDayOpen(false)} onConfirm={() => setEndDayOpen(false)} />
+
+ );
+}
+
+window.OpsLayouts = { DesktopDashboard, TabletDashboard };
diff --git a/CLAUDE_DESIGN/ops-shifts.jsx b/CLAUDE_DESIGN/ops-shifts.jsx
new file mode 100644
index 0000000..ce80400
--- /dev/null
+++ b/CLAUDE_DESIGN/ops-shifts.jsx
@@ -0,0 +1,283 @@
+// Shifts card + Messages card
+
+const { Avatar, Card, Btn, Icon } = window.OpsUI;
+const { OPS_DATA } = window;
+
+// ---------------------------------------------------------------- Shifts
+function ShiftsCard({ onMessage }) {
+ return (
+
+ Start shift}
+ >
+
+ {OPS_DATA.shifts.map(s => (
+
+
+
+
+
{s.name}
+ {s.status === 'break' && (
+
On break
+ )}
+
+
+ {s.section} · in at {s.clockIn} · {s.hoursWorked.toFixed(1)}h worked
+ {s.tables.length > 0 && <> · tables {s.tables.join(', ')}}
+
+
+
+ onMessage(s)} title="Message" style={{
+ width: 36, height: 36, borderRadius: 18,
+ background: 'white', border: '1px solid var(--ink-200)',
+ display: 'flex', alignItems: 'center', justifyContent: 'center',
+ cursor: 'pointer', color: 'var(--ink-700)',
+ }}>
+ ⋯
+
+
+ ))}
+
+ {/* scheduled / not yet started */}
+
Scheduled later
+ {OPS_DATA.scheduledShifts.map(s => (
+
+
+
+
{s.name}
+
+ {s.section} · starts at {s.scheduledAt}
+
+
+
Start now
+
+ ))}
+
+ );
+}
+
+// ---------------------------------------------------------------- Messages
+function MessagesCard({ openCompose }) {
+ return (
+
openCompose()}>Quick send
+
+ {OPS_DATA.presets.map(p => (
+ openCompose(p)} style={{
+ height: 34, padding: '0 12px',
+ borderRadius: 17,
+ background: 'white',
+ border: '1px solid var(--ink-200)',
+ color: 'var(--ink-700)',
+ fontSize: 13, fontWeight: 500,
+ cursor: 'pointer',
+ fontFamily: 'inherit',
+ }}>+ {p}
+ ))}
+
+
+ Recent
+
+ {OPS_DATA.recentMessages.map(m => (
+
+
+
+
+ {m.to}
+ · {m.text}
+
+
+
{m.sentAt}
+ {!m.read &&
}
+
+ ))}
+
+ );
+}
+
+// ---------------------------------------------------------------- Compose modal
+function ComposeModal({ open, prefilled, prefilledTo, onClose }) {
+ const [text, setText] = React.useState('');
+ const [recipient, setRecipient] = React.useState('Everyone');
+
+ React.useEffect(() => {
+ if (open) {
+ setText(prefilled || '');
+ setRecipient(prefilledTo || 'Everyone');
+ }
+ }, [open, prefilled, prefilledTo]);
+
+ if (!open) return null;
+ const recipients = ['Everyone', ...OPS_DATA.shifts.map(s => s.name)];
+
+ return (
+
+
e.stopPropagation()} style={{
+ width: 'min(520px, 100%)',
+ background: 'white',
+ borderRadius: 18,
+ padding: 24,
+ boxShadow: '0 20px 60px rgba(0,0,0,0.25)',
+ }}>
+
+
+
To
+
+ {recipients.map(r => (
+ setRecipient(r)} style={{
+ height: 36, padding: '0 14px',
+ borderRadius: 18,
+ background: recipient === r ? 'var(--brand-500)' : 'white',
+ border: '1px solid ' + (recipient === r ? 'var(--brand-500)' : 'var(--ink-200)'),
+ color: recipient === r ? 'white' : 'var(--ink-700)',
+ fontSize: 14, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit',
+ }}>{r}
+ ))}
+
+
+
Message
+