{s.label}
);
}
// ── BOTTOM TAB BAR ────────────────────────────────────────────
function TabBar({ active, onTab }) {
const tabs = [
{ id:'home', label:'Home', icon:
},
{ id:'jobs', label:'Jobs', icon:
},
{ id:'belle', label:'Belle', icon: null },
{ id:'schedule', label:'Schedule', icon:
},
{ id:'more', label:'Menu', icon:
},
];
return (
{tabs.map(t => {
if (t.id === 'belle') {
const isActive = active === 'belle';
return (
onTab('belle')}
style={{flex:1,display:'flex',flexDirection:'column',
alignItems:'center',cursor:'pointer',gap:0,paddingTop:2}}>
{/* Bell icon — matching real app */}
);
}
const isActive = active === t.id;
return (
onTab(t.id)}
style={{flex:1, display:'flex', flexDirection:'column', alignItems:'center',
gap:3, cursor:'pointer', paddingTop:2,
color: isActive ? '#0071e3' : 'rgba(0,0,0,0.26)',
transition:'color 0.1s'}}>
{React.cloneElement(t.icon, {
width:22, height:22,
strokeWidth: isActive ? 2.05 : 1.6,
})}
{t.label}
);
})}
);
}
// ── TOP NAV HEADER ────────────────────────────────────────────
function NavHeader({ title, subtitle, backLabel, onBack, action, transparent }) {
const nav = useNav();
// Special sentinel: onBack="__back" means "use context goBack, hide if unavailable"
let effectiveOnBack;
if (onBack === '__back') {
effectiveOnBack = nav.goBack; // null when stack is empty → back button hides
} else if (onBack !== undefined) {
effectiveOnBack = onBack;
} else {
effectiveOnBack = nav.goBack;
}
const effectiveLabel = backLabel !== undefined ? backLabel : nav.backLabel;
const showBack = !!effectiveOnBack;
return (
{showBack ? (
{Icons.back}
{effectiveLabel && {effectiveLabel}}
{title}
) : (
{subtitle &&
{subtitle}
}
{title}
)}
{action &&
{action}
}
);
}
// ── SECTION HEADER ────────────────────────────────────────────
function SectionHeader({ title, action, onAction }) {
return (
{title}
{action && {action}}
);
}
// ── CARD CONTAINER ────────────────────────────────────────────
function Card({ children, style, onClick, mx = 16 }) {
const [pressed, setPressed] = useState(false);
return (
setPressed(true) : undefined}
onMouseUp={onClick ? () => setPressed(false) : undefined}
onMouseLeave={onClick ? () => setPressed(false) : undefined}
style={{
margin: `0 ${mx}px`,
background: pressed ? '#f7f7f8' : 'white',
borderRadius:14,
border:'1px solid rgba(0,0,0,0.07)',
overflow:'hidden',
cursor: onClick ? 'pointer' : undefined,
transition:'background 0.1s',
...style,
}}>
{children}
);
}
// ── LIST CELL ─────────────────────────────────────────────────
function ListCell({ icon, iconBg, title, subtitle, right, badge, onTap, isLast, chevron=true }) {
const [pressed, setPressed] = useState(false);
return (
setPressed(true) : undefined}
onMouseUp={onTap ? () => setPressed(false) : undefined}
onMouseLeave={onTap ? () => setPressed(false) : undefined}
style={{
padding:'13px 16px',
display:'flex',alignItems:'center',gap:12,
background: pressed ? '#f2f2f4' : 'white',
borderBottom: isLast ? 'none' : '0.5px solid rgba(0,0,0,0.07)',
cursor: onTap ? 'pointer' : 'default',
transition:'background 0.1s',
}}>
{icon && (
{icon}
)}
{title}
{subtitle &&
{subtitle}
}
{badge &&
{badge}
}
{right &&
{right}
}
{chevron && onTap &&
{Icons.chevronR}
}
);
}
// ── BIG ACTION BUTTON ─────────────────────────────────────────
function PrimaryButton({ label, icon, onTap, color='#0071e3', textColor='white', style }) {
const [pressed, setPressed] = useState(false);
return (
setPressed(true)} onMouseUp={() => setPressed(false)} onMouseLeave={() => setPressed(false)}
style={{
height:52, borderRadius:13, background: pressed ? '#0062c4' : color,
display:'flex',alignItems:'center',justifyContent:'center',gap:8,
color:textColor, fontSize:16, fontWeight:600, cursor:'pointer',
letterSpacing:'-0.012em', transition:'all 0.1s',
transform: pressed ? 'scale(0.98)' : 'scale(1)',
...style,
}}>
{icon && {icon}}
{label}
);
}
function SecondaryButton({ label, icon, onTap, style }) {
const [pressed, setPressed] = useState(false);
return (
setPressed(true)} onMouseUp={() => setPressed(false)} onMouseLeave={() => setPressed(false)}
style={{
height:48, borderRadius:12, background: pressed ? '#eaeaec' : '#f2f2f4',
display:'flex',alignItems:'center',justifyContent:'center',gap:7,
color:'#111', fontSize:15, fontWeight:500, cursor:'pointer',
letterSpacing:'-0.008em', transition:'background 0.1s',
...style,
}}>
{icon && {icon}}
{label}
);
}
// ── QUICK ACTION TILE ─────────────────────────────────────────
function QuickTile({ icon, label, color, bg, onTap }) {
const [pressed, setPressed] = useState(false);
return (
setPressed(true)} onMouseUp={() => setPressed(false)} onMouseLeave={() => setPressed(false)}
style={{
flex:1, display:'flex', flexDirection:'column', alignItems:'center',
gap:6, padding:'12px 4px', background: pressed ? '#eaeaec' : bg||'#f2f2f4',
borderRadius:12, cursor:'pointer', transition:'background 0.1s',
}}>
{icon}
{label}
);
}
// ── BOTTOM SHEET ──────────────────────────────────────────────
function BottomSheet({ open, onClose, title, children, halfHeight }) {
return (
<>
{open && (
)}
{title && (
)}
{children}
);
}
// ── BELLE SUGGESTION CARD ─────────────────────────────────────
function BelleSuggestion({ text, actions, onAction }) {
return (
{text}
{actions && actions.length > 0 && (
{actions.map((a,i) => (
))}
)}
);
}
// ── STAT CARD ─────────────────────────────────────────────────
function StatCard({ label, value, color, bg, sub, onTap }) {
const [pressed, setPressed] = useState(false);
return (
setPressed(true):undefined} onMouseUp={onTap?()=>setPressed(false):undefined} onMouseLeave={onTap?()=>setPressed(false):undefined}
style={{background:pressed?'#eaeaec':bg||'#e8f2fd',borderRadius:14,padding:'14px 16px',cursor:onTap?'pointer':'default',transition:'background 0.1s'}}>
{value}
{label}
{sub &&
{sub}
}
);
}
// ── AVATAR ────────────────────────────────────────────────────
function Avatar({ name, size=36, color='#e8f2fd', textColor='#0071e3' }) {
const initials = name.split(' ').map(w=>w[0]).slice(0,2).join('');
return (
{initials}
);
}
// ── OFFLINE BANNER ─────────────────────────────────────────────
function OfflineBanner() {
return (
{Icons.wifi}
Offline mode
Changes saved locally. Syncing when connection returns.
);
}
// ── MENU OVERLAY (slide-up sheet) ─────────────────────────────
function MenuOverlay({ open, onClose, onNav, role }) {
const sections = [
{
title: 'CORE',
items: [
{ icon: Icons.home, label:'Home', screen:'home' },
{ icon: Icons.user, label:'Customers', screen:'customers' },
{ icon: Icons.jobs, label:'Jobs', screen:'jobs' },
{ icon: Icons.schedule, label:'Schedule', screen:'schedule' },
]
},
{
title: 'COMMUNICATION',
items: [
{ icon: Icons.phone, label:'Calls', screen:'calls' },
{ icon: Icons.message, label:'Texts', screen:'messages' },
{ icon:
, label:'Diagnose', screen:'belle' },
{ icon:
, label:'Follow Ups', screen:'follow-ups' },
{ icon:
, label:'Campaigns', screen:'campaigns' },
]
},
{
title: 'FINANCE',
items: [
{ icon: Icons.dollar, label:'Estimates', screen:'estimates' },
{ icon: Icons.invoices, label:'Invoices', screen:'invoices' },
{ icon:
, label:'Payments', screen:'payments' },
]
},
{
title: 'MORE',
items: [
{ icon:
, label:'Reports', screen:'reports' },
{ icon:
, label:'Settings', screen:'settings' },
{ icon:
, label:'Dispatch', screen:'dispatch' },
{ icon:
, label:'Billing', screen:'settings-billing' },
]
},
];
function handleNav(screen) {
onClose();
onNav(screen, { __fromMenu: true });
}
return (
<>
{open && (
)}
{/* Handle */}
{sections.map(sec => (
{sec.title}
{sec.items.map((item, i) => (
handleNav(item.screen)}
style={{
minHeight:50,
padding:'0 12px',
display:'flex', alignItems:'center', gap:10,
borderBottom: i < sec.items.length-1
? '0.5px solid rgba(0,0,0,0.07)' : 'none',
cursor:'pointer',
}}>
{React.cloneElement(item.icon, {width:14,height:14,strokeWidth:1.8})}
{item.label}
))}
))}
);
}
Object.assign(window, {
Icons, Badge, TabBar, NavHeader, SectionHeader, Card, ListCell,
PrimaryButton, SecondaryButton, QuickTile, BottomSheet,
BelleSuggestion, StatCard, Avatar, OfflineBanner, MenuOverlay,
SCREEN_LABELS, screenLabel, NavContext, useNav,
});