MICHAEL/STYLE
MA
{open && (
<>
setOpen(false)} style={{ position: 'fixed', inset: 0, zIndex: 80 }} />
Notificaciones
{unread} nuevas
{OWNER_NOTIFS.map((n, i) => (
))}
)}
);
}
/* one appointment row */
function ApptRow({ time, name, svc, status, last }) {
const dot = status === 'now' ? 'var(--accent)' : status === 'done' ? 'var(--muted-2)' : 'var(--bone)';
return (
{time}
{status === 'now' &&
Ahora}
);
}
const TODAY = [
{ time: '9:00A', name: 'Luis Reyes', svc: '#1 fade · línea', status: 'done' },
{ time: '10:15', name: 'David Ortiz', svc: 'Beard sculpt', status: 'done' },
{ time: '11:30', name: 'Andrés P.', svc: 'SMP · sesión 2', status: 'now' },
{ time: '1:00P', name: 'Marco Díaz', svc: '#2 fade · sharp line', status: 'up' },
{ time: '2:30P', name: 'Jay Carrillo', svc: 'Kids cut', status: 'up' },
{ time: '5:30P', name: 'Carlos M.', svc: '#2 fade · the usual', status: 'up' },
];
/* ——— HOY · dashboard (mixed) with layout variations ——— */
function OwnerHome({ layout = 'Mixto', period = 'Hoy', goCitas, goClientes, goPagos }) {
const { Card, Pill, Button } = OWN;
const money = period === 'Semana' ? '$X,XXX' : '$XXX';
const moneyCap = period === 'Semana' ? 'Ingresos · semana' : 'Ingresos · hoy';
const NextCard = (
Andrés P.
SMP · sesión 2 de 3 · cicatrizando bien
);
const IncomeStrip = (
);
const TodayList = (
La agenda · Today
{TODAY.slice(2, 6).map((a, i, arr) => )}
);
const Alerts = (
Pendientes · Needs you
);
let body;
if (layout === 'Agenda') {
body = (<>
{NextCard}
El día completo · Full day
{TODAY.map((a, i, arr) => )}
);
} else if (layout === 'Ingresos') {
body = (<>
{moneyCap}
{money}
{period === 'Semana' ? '32 citas · 4 nuevos clientes' : '6 citas · 1 SMP · 1 nuevo'}
{[40, 62, 35, 78, 90, 55, 70].map((h, i) => (
))}
{['L', 'M', 'M', 'J', 'V', 'S', 'D'].map((d, i) => {d})}
{NextCard}
);
} else {
body = (<>{IncomeStrip}{NextCard}{TodayList}{Alerts});
}
return (
Lunes 30 jun
Buenas, Michael
{TODAY.filter((a) => a.status !== 'done').length} citas por delante · Dios primero
{body}
);
}
/* ——— CITAS · day agenda + pending requests (accept/reject) ——— */
function OwnerCitas({ onBell }) {
const { Card, Button } = OWN;
const [day, setDay] = React.useState('Hoy');
const days = ['Hoy', 'Mar', 'Mié', 'Jue', 'Vie'];
const [reqs, setReqs] = React.useState([
{ id: 1, name: 'Erick Santos', svc: 'Solicita · #2 fade', when: 'Jue · 4:00P' },
{ id: 2, name: 'Pedro Lima', svc: 'Solicita · consulta SMP', when: 'Vie · 11:00A' },
]);
const [resolved, setResolved] = React.useState({});
const act = (id, kind) => { setResolved((r) => ({ ...r, [id]: kind })); };
return (
Tu día · at a glance.
{days.map((d) => {
const on = d === day;
return (
);
})}
{TODAY.map((a, i, arr) => )}
Solicitudes · Requests
{reqs.map((r) => {
const st = resolved[r.id];
return (
{r.svc}
{!st ? (
) : (
{st === 'ok' ? '✓ Confirmada' : '✕ Rechazada'}
)}
);
})}
);
}
/* ——— CLIENTES · CRM list + detail ——— */
const CLIENTS = [
{ in: 'CM', name: 'Carlos Martínez', last: 'hace 18 días', tag: 'Regular', cuts: 5, smp: true, note: '#2 fade, línea marcada. Sensible en la nuca — máquina suave.' },
{ in: 'AP', name: 'Andrés Peña', last: 'sesión 2 · hoy', tag: 'SMP', cuts: 2, smp: true, note: 'Serie SMP de 3. Entradas. Día 4 de cicatrización, va bien.' },
{ in: 'LR', name: 'Luis Reyes', last: 'hoy', tag: 'Regular', cuts: 12, smp: false, note: '#1 fade siempre. Le gusta rápido, poco hablar.' },
{ in: 'DO', name: 'David Ortiz', last: 'hoy', tag: 'Barba', cuts: 7, smp: false, note: 'Beard sculpt cada 3 semanas. Aceite al final.' },
{ in: 'JC', name: 'Jay Carrillo', last: 'hace 1 mes', tag: 'Niños', cuts: 3, smp: false, note: 'Hijo de Ana. Paciente, premio al final 😊 — sin emoji en factura.' },
];
function OwnerClientes({ onBell }) {
const { Card, Pill, Button } = OWN;
const [q, setQ] = React.useState('');
const [open, setOpen] = React.useState(null);
const list = CLIENTS.filter((c) => c.name.toLowerCase().includes(q.toLowerCase()));
const sel = CLIENTS.find((c) => c.name === open);
return (
{CLIENTS.length} activos · Houston, TX
setQ(e.target.value)} placeholder="Buscar · Search" style={{
width: '100%', boxSizing: 'border-box', fontFamily: 'var(--font-body)', fontSize: '0.8rem',
padding: '11px 14px', borderRadius: 'var(--radius-input)', border: '1px solid var(--bd-d)',
background: 'var(--card)', color: 'var(--bone)', marginBottom: '13px', outline: 'none',
}} />
{sel && (
{sel.in}
{sel.name}
{sel.cuts} cortes{sel.smp ? ' · 1 serie SMP' : ''}
Nota · Notes
{sel.note}
Fotos · Photos
)}
{list.map((c) => (
))}
);
}
/* ——— TRABAJO · portfolio management ——— */
function OwnerTrabajo({ onBell }) {
const { FilterTabs } = OWN;
const [f, setF] = React.useState('Todo');
const tiles = [
{ span: 'tall', tag: 'Fade', img: 'assets/work-fade.png' }, { span: 'wide', tag: 'Beard', img: 'assets/work-beard.png' },
{ span: '', tag: 'Niños', img: 'assets/work-kids.png' }, { span: '', tag: 'SMP' },
{ span: 'wide', tag: 'Barba', img: 'assets/work-beard-lineup.png' }, { span: '', tag: 'Diseño' },
];
return (
Sube y organiza · the proof.
{tiles.map((t, i) => (
{t.img
?
:
}
{t.tag &&
{t.tag}}
))}
);
}
/* ——— YO · Michael's profile + business settings ——— */
function OwnerYo({ accent, setAccent, goCobrar, goPagos, onBell, payments }) {
const { Button, Card } = OWN;
const [lang, setLang] = React.useState('EN');
const [mkt, setMkt] = React.useState(false);
const feed = payments || PAYMENTS;
const weekTotal = feed.reduce((s, p) => s + p.amount, 0);
const weekClients = new Set(feed.map((p) => p.name)).size;
const trend = [40, 62, 35, 78, 90, 55, 70];
const row = { display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '13px 0', borderBottom: '1px solid var(--bd-d)' };
const rowLabel = { display: 'flex', alignItems: 'center', gap: '10px', color: 'var(--bone)', fontSize: '0.76rem' };
const mktTools = [
{ icon: 'share', title: 'Compartir trabajo · Share to IG', sub: 'Postea fades y antes/después a @michaelstyle23' },
{ icon: 'megaphone', title: 'Promoción · Run a promo', sub: 'Crea una oferta — ej. 1ra consulta SMP gratis' },
{ icon: 'star', title: 'Pedir reseñas · Ask for reviews', sub: 'Envía link de Google a clientes recientes' },
{ icon: 'users', title: 'Referidos · Referral card', sub: 'Trae un amigo · ambos ahorran' },
];
return (
Dominican barber · SMP artist · Houston, TX
{/* —— Ingresos · big income card → opens the income detail page —— */}
Dinero · Money
Horario · Hours
9–7 · L–S
Servicios y precios
{mkt && (
{mktTools.map((m) => (
))}
Idioma · Language
Notificaciones
ON
Dios primero.
);
}
/* ——— PAGOS · receive payments + full history by method ——— */
/* Payment methods — kept on-brand (mono + single accent, no vendor colors). */
const PAY_METHODS = [
{ id: 'tarjeta', label: 'Tarjeta', en: 'Card', icon: 'card' },
{ id: 'zelle', label: 'Zelle', en: 'Zelle', icon: 'send' },
{ id: 'efectivo', label: 'Efectivo', en: 'Cash · pago directo', icon: 'cash' },
{ id: 'cashapp', label: 'CashApp', en: 'CashApp', icon: 'dollar' },
{ id: 'applepay', label: 'Apple Pay', en: 'Apple Pay', icon: 'phone' },
];
const PM = Object.fromEntries(PAY_METHODS.map((m) => [m.id, m]));
const PAYMENTS = [
{ id: 9, name: 'Luis Reyes', svc: '#1 fade · línea', amount: 35, method: 'efectivo', detail: 'En persona', when: '9:10A', day: 'Hoy' },
{ id: 8, name: 'David Ortiz', svc: 'Beard sculpt', amount: 40, method: 'tarjeta', detail: 'Visa ·· 4242', when: '10:40A', day: 'Hoy' },
{ id: 7, name: 'Andrés Peña', svc: 'SMP · sesión 2 de 3', amount: 250, method: 'zelle', detail: 'michaelstyle@…', when: 'Ayer · 4:20P', day: 'Ayer' },
{ id: 6, name: 'Marco Díaz', svc: '#2 fade · sharp line', amount: 35, method: 'cashapp', detail: '$michaelstyle23', when: 'Ayer · 1:05P', day: 'Ayer' },
{ id: 5, name: 'Carlos Martínez', svc: '#2 fade · the usual', amount: 35, method: 'applepay', detail: 'iPhone tap', when: 'Sáb · 5:30P', day: 'Sem' },
{ id: 4, name: 'Jay Carrillo', svc: 'Kids cut', amount: 25, method: 'efectivo', detail: 'En persona', when: 'Sáb · 2:30P', day: 'Sem' },
{ id: 3, name: 'Erick Santos', svc: 'Beard line-up', amount: 20, method: 'tarjeta', detail: 'Mastercard ·· 8810', when: 'Vie · 6:00P', day: 'Sem' },
{ id: 2, name: 'Pedro Lima', svc: 'Consulta SMP', amount: 50, method: 'zelle', detail: 'michaelstyle@…', when: 'Vie · 11:30A', day: 'Sem' },
];
window.MS_PAYMENTS = PAYMENTS; // seed shared payment feed (lifted to the app root)
const QUICK_AMOUNTS = [25, 35, 40, 60, 250];
const money = (n) => '$' + n.toLocaleString('en-US');
function MethodBadge({ id, size = 30 }) {
const m = PM[id];
return (
);
}
function PayRow({ p, last }) {
const m = PM[p.method];
return (
{p.name}
{(m ? m.label : p.method) + ' · ' + p.svc}
{money(p.amount)}
{p.when}
);
}
/* Back chevron used by the pay sub-screens that live under "Yo". */
function BackToYo({ onBack }) {
return (
);
}
/* ——— PAGOS · summary + full history (OWNER-ONLY — never shown to a client) ——— */
function OwnerPagos({ onBack, payments }) {
const { Card } = OWN;
const [period, setPeriod] = React.useState('Semana');
const feed = payments || PAYMENTS;
const periods = ['Hoy', 'Semana', 'Mes'];
const inPeriod = (p) => period === 'Hoy' ? p.day === 'Hoy' : true; // Semana/Mes show all sample data
const shown = feed.filter(inPeriod);
const total = shown.reduce((s, p) => s + p.amount, 0);
const byMethod = PAY_METHODS
.map((m) => ({ ...m, sum: shown.filter((p) => p.method === m.id).reduce((s, p) => s + p.amount, 0) }))
.filter((m) => m.sum > 0)
.sort((a, b) => b.sum - a.sum);
const periodCap = period === 'Hoy' ? 'Cobrado · hoy' : period === 'Mes' ? 'Cobrado · este mes' : 'Cobrado · esta semana';
return (
{onBack && }
El dinero · Income
Ingresos
Solo para ti · your records.
{/* period control */}
{periods.map((d) => {
const on = d === period;
return (
);
})}
{/* total + breakdown by method */}
{periodCap}
{money(total)}
{shown.length} pagos · {new Set(shown.map((p) => p.name)).size} clientes
{/* trend chart (representative) */}
{[40, 62, 35, 78, 90, 55, 70].map((h, i) => (
))}
{['L', 'M', 'M', 'J', 'V', 'S', 'D'].map((d, i) => {d})}
{/* proportion bar (shades of accent) */}
{byMethod.map((m, i) => (
))}
{byMethod.map((m, i) => (
{m.label}
{money(m.sum)}
))}
Historial · History
{shown.map((p, i) => )}
);
}
/* ——— COBRAR · the charge experience (CLIENT-SAFE — no history on screen) ——— */
function OwnerCobrar({ onBack, onCharge, onDone }) {
const { Card, Button } = OWN;
const [amount, setAmount] = React.useState(35);
const [method, setMethod] = React.useState('tarjeta');
const [name, setName] = React.useState('');
const [done, setDone] = React.useState(null);
const submit = () => {
const p = {
id: Date.now(), name: name.trim() || 'Cliente directo', svc: 'Cobro rápido',
amount, method, detail: PM[method].en, when: 'Ahora', day: 'Hoy',
};
if (onCharge) onCharge(p);
setDone(p);
};
const reset = () => { setDone(null); setAmount(35); setMethod('tarjeta'); setName(''); };
/* —— success / receipt — safe to show the client —— */
if (done) {
return (
Pago recibido · Paid
{money(done.amount)}
{PM[done.method].label} · {done.name}
Gracias · thank you. Dios primero.
);
}
/* —— charge form —— */
return (
{onBack && }
Cobrar · Charge
Nuevo cobro
Monto y método · then collect.
{money(amount)}
{QUICK_AMOUNTS.map((a) => {
const on = a === amount;
return (
);
})}
Método · Method
{PAY_METHODS.map((m) => {
const on = m.id === method;
return (
);
})}
setName(e.target.value)} placeholder="Cliente (opcional) · Customer" style={{
width: '100%', boxSizing: 'border-box', fontFamily: 'var(--font-body)', fontSize: '0.8rem',
padding: '11px 14px', borderRadius: 'var(--radius-input)', border: '1px solid var(--bd-d)',
background: 'var(--card)', color: 'var(--bone)', marginBottom: '14px', outline: 'none',
}} />
);
}
/* —— Owner tab bar (relabeled, owner icons) —— */
function OwnerTabBar({ active, onChange }) {
const tabs = [
{ id: 'hoy', label: 'Hoy', icon: 'home' }, { id: 'citas', label: 'Citas', icon: 'book' },
{ id: 'clientes', label: 'Clientes', icon: 'users' }, { id: 'trabajo', label: 'Trabajo', icon: 'work' },
{ id: 'yo', label: 'Yo', icon: 'me' },
];
// Pay sub-screens (pagos/cobrar) live under "Yo" — keep that tab lit while they're open.
const litTab = (active === 'pagos' || active === 'cobrar') ? 'yo' : active;
return (
{tabs.map((t) => {
const on = t.id === litTab;
return (
);
})}
);
}
Object.assign(window, { OwnerHome, OwnerCitas, OwnerClientes, OwnerTrabajo, OwnerYo, OwnerPagos, OwnerCobrar, OwnerTabBar });