// Hi-fi Routines (calendar), Contacts list + detail, To-Dos, Settings. const { FONT_DISPLAY: SR_DISPLAY, FONT_BODY: SR_BODY, FONT_MONO: SR_MONO } = window.HIFI; // ============================================================ // Routines — month calendar + rail // ============================================================ const HifiRoutinesScreen = ({ t, nav }) => { const visible = ROUTINES; // ---- displayed month (navigable) ---- const nowRef = new Date(); const [cursor, setCursor] = React.useState(() => new Date(nowRef.getFullYear(), nowRef.getMonth(), 1)); const year = cursor.getFullYear(); const month = cursor.getMonth(); const MONTHS = ['January','February','March','April','May','June','July','August','September','October','November','December']; const monthLabel = `${MONTHS[month]} ${year}`; const today = new Date(); today.setHours(0, 0, 0, 0); const isCurrentMonth = year === today.getFullYear() && month === today.getMonth(); const todayDay = today.getDate(); const firstWeekday = new Date(year, month, 1).getDay(); const daysInMonth = new Date(year, month + 1, 0).getDate(); const totalCells = Math.ceil((firstWeekday + daysInMonth) / 7) * 7; const goPrev = () => setCursor(new Date(year, month - 1, 1)); const goNext = () => setCursor(new Date(year, month + 1, 1)); const goToday = () => setCursor(new Date(today.getFullYear(), today.getMonth(), 1)); // ---- expand each routine's recurrence into this month's day buckets ---- const DAY_MS = 86400000; const sod = (d) => { const x = new Date(d); x.setHours(0, 0, 0, 0); return x; }; // Per-occurrence status: the next-due anchor carries the real status; earlier // projected cycles read as muted/done; later cycles as upcoming. const occStatus = (occ, anchor) => { const od = +sod(occ), ad = +sod(anchor), td = +today; if (od === ad) { const diff = (ad - td) / DAY_MS; return diff < 0 ? 'overdue' : diff <= 14 ? 'soon' : 'ok'; } if (od < td) return 'done'; const diff = (od - td) / DAY_MS; return diff <= 14 ? 'soon' : 'ok'; }; const occurrencesInMonth = (r) => { if (!r.date) return []; const anchor = sod(new Date(r.date + 'T00:00:00')); const iv = window.Hub.freqInterval(r.freq); const out = []; if (!iv) { if (anchor.getFullYear() === year && anchor.getMonth() === month) out.push(new Date(year, month, anchor.getDate())); return out; } if (iv.months) { const span = (year * 12 + month) - (anchor.getFullYear() * 12 + anchor.getMonth()); if ((((span % iv.months) + iv.months) % iv.months) === 0) { out.push(new Date(year, month, Math.min(anchor.getDate(), daysInMonth))); } return out; } // day-based (weekly / every 2 weeks) const monthStart = new Date(year, month, 1); const monthEnd = new Date(year, month, daysInMonth); const k = Math.floor((+sod(monthStart) - +anchor) / (DAY_MS * iv.days)); let occ = new Date(anchor); occ.setDate(occ.getDate() + k * iv.days); let guard = 0; while (occ < monthStart && guard++ < 60) occ.setDate(occ.getDate() + iv.days); guard = 0; while (occ <= monthEnd && guard++ < 60) { out.push(new Date(occ)); occ = new Date(occ); occ.setDate(occ.getDate() + iv.days); } return out; }; const eventsByDay = {}; visible.forEach(r => { if (!r.date) return; const anchor = sod(new Date(r.date + 'T00:00:00')); occurrencesInMonth(r).forEach(occ => { (eventsByDay[occ.getDate()] = eventsByDay[occ.getDate()] || []).push({ r, status: occStatus(occ, anchor), kind: 'due' }); }); }); // Reminders for this month — distinct visual treatment. visible.forEach(r => { const rd = window.Hub.reminderDate(r); if (!rd) return; if (rd.getFullYear() === year && rd.getMonth() === month) { const day = rd.getDate(); (eventsByDay[day] = eventsByDay[day] || []).push({ r, status: 'reminder', kind: 'reminder' }); } }); const rank = { overdue: 0, soon: 1, reminder: 2, ok: 3, done: 4 }; Object.values(eventsByDay).forEach(list => list.sort((a, b) => rank[a.status] - rank[b.status])); const overdueRoutines = visible.filter(r => r.status === 'overdue'); const usedCats = [...new Set(visible.map(r => (findAsset(r.asset) || {}).cat).filter(Boolean))]; return ( <> {(() => { const g = (window.Account.current().calendar || {}).google; return g ? ( nav.go('profile')} title="Manage calendar sync" style={{ cursor: 'pointer', display: 'inline-flex' }}> Synced to Google Calendar ) : ( nav.go('profile')}> Connect calendar ); })()} Today nav.openAdd('routine')}> Routine } /> {ROUTINES.length === 0 ? ( nav.openAdd('routine')} secondaryLabel="Browse assets" onSecondary={() => nav.go('assets')}/> ) : ( <>
{/* Calendar */}
{['Sun','Mon','Tue','Wed','Thu','Fri','Sat'].map((d, i) => (
{d.toUpperCase()}
))}
{Array.from({ length: totalCells }, (_, i) => { const dayNum = i - firstWeekday + 1; const inMonth = dayNum >= 1 && dayNum <= daysInMonth; const events = inMonth ? (eventsByDay[dayNum] || []) : []; const isToday = inMonth && isCurrentMonth && dayNum === todayDay; const shown = events.slice(0, 3); const extra = events.length - shown.length; return (
{inMonth ? dayNum : ''}
{shown.map(({ r, status, kind }, k) => { const isReminder = kind === 'reminder'; const isDone = status === 'done'; const tone = isReminder ? { c: t.info || t.inkSoft, bg: t.infoBg } : isDone ? { c: t.inkFaint, bg: t.inputBg } : statusTone(t, status); const a = findAsset(r.asset); const icon = isReminder ? 'bell' : a ? (CAT_ICON[a.cat] || 'repeat') : 'repeat'; const reminderLbl = isReminder ? window.Hub.reminderLabel(r) : ''; return (
nav.openRoutine(r.id)} style={{ fontSize: 11, padding: '2px 6px', borderRadius: 5, cursor: 'pointer', background: isReminder ? 'transparent' : tone.bg, color: isDone ? t.inkFaint : t.ink, fontWeight: 500, border: isReminder ? `1px dashed ${tone.c}` : '1px solid transparent', display: 'flex', alignItems: 'center', gap: 5, }} title={isReminder ? `Reminder · ${r.task}${a ? ' · ' + a.name : ''} · ${reminderLbl} · due ${r.nextLabel}` : `${r.task}${a ? ' · ' + a.name : ''} · ${r.nextLabel}${r.synced ? ' · on calendar' : ''}`}> {r.task} {!isReminder && r.synced && }
); })} {extra > 0 &&
+{extra} more
}
); })}
{/* Rail */}
Overdue · {overdueRoutines.length}}/>
{overdueRoutines.map(r => { const a = findAsset(r.asset); return (
nav.openRoutine(r.id)} style={{ display: 'flex', gap: 10, cursor: 'pointer', alignItems: 'center' }}>
{r.task}
{a ? a.name + ' · ' : ''}{r.nextLabel}
); })} {overdueRoutines.length === 0 &&
Nothing overdue here.
}
Overdue
Due soon
On track
Reminder
{usedCats.length > 0 && ( <>
{usedCats.map(c => (
{c}
))}
)}
)} ); }; // ============================================================ // Contacts — shared bits (tappable links, logo, AI enrichment) // ============================================================ const telHref = (s) => 'tel:' + String(s || '').replace(/[^+\d]/g, ''); const PhoneValue = ({ t, value, mono = true }) => isGap(value) ? {value} : e.currentTarget.style.color = t.accentDeep} onMouseLeave={e => e.currentTarget.style.color = t.ink} style={{ fontSize: 13, color: t.ink, fontFamily: mono ? SR_MONO : 'inherit', textDecoration: 'none' }}>{value}; const EmailValue = ({ t, value }) => isGap(value) ? {value} : e.currentTarget.style.color = t.accentDeep} onMouseLeave={e => e.currentTarget.style.color = t.ink} style={{ fontSize: 13, color: t.ink, textDecoration: 'none', wordBreak: 'break-all' }}>{value}; const CompanyLogo = ({ t, c, size = 44, radius = 11 }) => { const [ok, setOk] = React.useState(true); const initials = c.co.split(' ').slice(0, 2).map(w => w[0]).join(''); // Use an explicit logo if set, otherwise derive one for free from the // website domain (no API key, falls back to initials if it doesn't load). const domain = (c.website || '').replace(/^https?:\/\//i, '').replace(/^www\./i, '').replace(/\/.*$/, '').trim(); const src = c.logo || (domain ? 'https://logo.clearbit.com/' + domain : ''); if (src && ok) { return setOk(false)} style={{ width: size, height: size, borderRadius: radius, objectFit: 'contain', background: '#fff', border: `1px solid ${t.border}`, flex: '0 0 auto', padding: 4, boxSizing: 'border-box', }}/>; } return
{initials}
; }; // One labelled contact-method row in the Company card. const CompanyInfoRow = ({ t, icon, children }) => (
{children}
); // ============================================================ // Contacts — card grid // ============================================================ const HifiContactsScreen = ({ t, nav }) => ( <> nav.openSearch()}> Find nav.openAdd('contact')}> Contact } /> {CONTACTS.length === 0 ? ( nav.openAdd('contact')}/> ) : (
{CONTACTS.map(c => { const linkedAssets = assetsByContact(c.id); return ( nav.openContact(c.id)} style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
{c.cat}
{c.co}
{c.people.length > 0 ? `${c.people.length} contact${c.people.length > 1 ? 's' : ''}` : '? add phone & email'}
{linkedAssets.slice(0, 3).map(a => {a.name})} {linkedAssets.length === 0 && no linked assets} {linkedAssets.length > 3 && +{linkedAssets.length - 3}}
); })}
)} ); // ============================================================ // Contact detail // ============================================================ const HifiContactDetailScreen = ({ t, nav, contactId }) => { const c = findContact(contactId); if (!c) return null; const linkedAssets = assetsByContact(c.id); const linkedRoutines = routinesByContact(c.id); const hasCompanyInfo = c.website || c.phone || c.email || c.address || c.description; return ( <> nav.go('contacts')}>Contacts / {c.cat} / {c.co}} sub={`${c.cat} · service & maintenance`} actions={<> nav.openEdit('contact', c)}>Edit nav.openPerson(c.id)}> Person } />
nav.openPerson(c.id)} style={{ padding: '5px 10px', fontSize: 12 }}> add person}/> {c.people.length === 0 && (
No individuals saved yet. nav.openPerson(c.id)}>Add the first one.
)} {c.people.map((p, i) => (
{p.name} {p.role || '—'}
nav.openPerson(c.id, i)} style={{ width: 30, height: 30, borderRadius: 8 }}/> nav.removePerson(c.id, i)} style={{ width: 30, height: 30, borderRadius: 8 }}/>
))} { window.Hub.update('contact', c.id, { notes: v }); nav.refresh(); }}/>
{c.cat}
{c.co}
{c.description &&
{c.description}
} {hasCompanyInfo ? (
{c.website && ( e.currentTarget.style.color = t.accentDeep} onMouseLeave={e => e.currentTarget.style.color = t.ink}> {c.website.replace(/^https?:\/\//i, '')} )} {c.phone && } {c.email && } {c.address && ( e.currentTarget.style.color = t.accentDeep} onMouseLeave={e => e.currentTarget.style.color = t.ink}> {c.address} )} nav.openEdit('contact', c)} style={{ marginTop: 3, padding: '6px 11px', fontSize: 12, alignSelf: 'flex-start' }}> edit details
) : (
No company details yet. Add the website, phone, email, and address — the logo fills in from the website automatically.
nav.openEdit('contact', c)} style={{ padding: '7px 12px', fontSize: 12.5 }}> Add company details
)}
{linkedAssets.map(a => (
nav.openAsset(a.id)} style={{ display: 'flex', alignItems: 'center', gap: 10, cursor: 'pointer' }}> {a.name}
))} {linkedAssets.length === 0 &&
None linked yet.
}
nav.openLink(c.id)} style={{ marginTop: 12, padding: '6px 11px', fontSize: 12 }}> link asset
{linkedRoutines.map(r => { const tone = statusTone(t, r.status); return (
nav.openRoutine(r.id)} style={{ display: 'flex', gap: 10, cursor: 'pointer' }}>
{r.task}
{findAsset(r.asset) ? findAsset(r.asset).name : '—'}
); })} {linkedRoutines.length === 0 &&
None.
}
); }; // ============================================================ // To-Dos — filter chips + table // ============================================================ const HifiTodosScreen = ({ t, nav }) => { const [filter, setFilter] = React.useState('open'); const openN = TODOS.filter(td => td.status !== 'Done').length; const doneN = TODOS.filter(td => td.status === 'Done').length; const taskN = TODOS.filter(td => td.type === 'Task').length; const gapN = TODOS.filter(td => td.type === 'Info Gap').length; const filtered = TODOS.filter(td => { if (filter === 'open') return td.status !== 'Done'; if (filter === 'done') return td.status === 'Done'; if (filter === 'tasks') return td.type === 'Task'; if (filter === 'gaps') return td.type === 'Info Gap'; if (filter === 'high') return td.priority === 'High'; return true; }); const prioTone = p => p === 'High' ? { c: t.overdue, bg: t.overdueBg } : p === 'Normal' ? { c: t.inkSoft, bg: t.infoBg } : { c: t.inkFaint, bg: t.infoBg }; return ( <> nav.openSearch()}> Search nav.openAdd('todo')}> New } /> {TODOS.length === 0 ? ( nav.openAdd('todo')}/> ) : ( <>
setFilter('open')}>Open · {openN} setFilter('done')}>Done · {doneN} setFilter('tasks')}>Tasks · {taskN} setFilter('gaps')}>Info gaps · {gapN} setFilter('high')}>High priority Sort: priority
{/* header */}
TASK TYPE PRIORITY ASSET STATUS
{filtered.map((td, i) => { const a = td.asset ? findAsset(td.asset) : null; const pt = prioTone(td.priority); const done = td.status === 'Done'; return (
nav.toggleTodo(td.id)} style={{ width: 18, height: 18, borderRadius: 5, cursor: 'pointer', border: `1.5px solid ${done ? t.ok : t.border}`, background: done ? t.ok : t.inputBg, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', }}>{done && } {td.title} {td.type} {td.priority} {a ? nav.openAsset(a.id)}>{a.name} : —} {td.status}
); })} {filtered.length === 0 && (
Nothing matches this filter.
)}
)} ); }; // ============================================================ // Settings — minimal but real (profile, appearance, notifications) // ============================================================ const ToggleRow = ({ t, label, sub, on }) => { const [v, setV] = React.useState(on); return (
{label}
{sub &&
{sub}
}
); }; const HifiSettingsScreen = ({ t, nav, themeId, onTheme }) => ( <>
R
Robert
Homeowner · Milton, ON
Edit profile
Choose a palette for the whole app.
{Object.values(window.HIFI.THEMES).map(th => ( ))}
); Object.assign(window, { HifiRoutinesScreen, HifiContactsScreen, HifiContactDetailScreen, HifiTodosScreen, HifiSettingsScreen, });