// work.jsx — Hiring / Technicians (matching layout) / Vacation with month+weekday+region function WorkScreen({ ctx }) { const { lang, openChat, goTab, openPostMenu, openApplicants, openJobDetail, openHiringAppDetail, openApplyJob, openVacSheet, openHiringSheet, openTechSheet, openDayPicker, openSchedule, openPublicProfile, liveJobs=[], liveTechs=[], liveVacations=[] } = ctx; const t = STRINGS[lang]; const [sub, setSub] = React.useState('hiring'); const [vacTab, setVacTab] = React.useState('applied'); const [myActivityTab, setMyActivityTab] = React.useState('applications'); // 'applications' | 'myposts' const subIcons = { hiring: (s, c) => Icon.briefcase(s, c), techs: (s, c) => ( ), vac: (s, c) => ( ), }; const handlePostBtn = () => { if (sub === 'vac') openVacSheet(); else if (sub === 'hiring') openHiringSheet(); else if (sub === 'techs') openTechSheet(); }; // Contextual "+ " button label & icon per sub-tab const postBtnCfg = { hiring: { label: lang==='pt'?'Vaga':lang==='es'?'Empleo':'Job', icon: (s,c) => Icon.briefcase(s,c), }, techs: { label: lang==='pt'?'Técnico':lang==='es'?'Técnico':'Tech', icon: (s,c) => ( ), }, vac: { label: lang==='pt'?'Férias':lang==='es'?'Vacaciones':'Vacation', icon: (s,c) => ( ), }, }; const postBtn = postBtnCfg[sub] || postBtnCfg.hiring; const activeJobs = MY_APPLICATIONS.filter(a => ['accepted','in_progress'].includes(a.status)); const tabs = [ { id:'hiring', label:t.hiring }, { id:'techs', label:lang==='pt'?'Técnicos':lang==='es'?'Técnicos':'Techs' }, { id:'vac', label:t.vacation }, ]; // ── My Active Jobs sticky card ────────────────────────────── const myJobsLabel = lang==='pt' ? 'Meus Jobs Ativos' : lang==='es' ? 'Mis Jobs Activos' : 'My Active Jobs'; const emptyLabel = lang==='pt' ? 'Nenhum job ativo no momento' : lang==='es' ? 'Sin jobs activos por ahora' : 'No active jobs right now'; const findWorkLabel = lang==='pt' ? 'Busque vagas abaixo ↓' : lang==='es' ? 'Busca trabajos abajo ↓' : 'Browse jobs below ↓'; const seeAllLabel = lang==='pt' ? 'Ver todos' : lang==='es' ? 'Ver todos' : 'See all'; const statusChipStyle = (status) => { const cfg = { accepted: { bg:'#e8f5e9', color:'#2e7d32', label: lang==='pt'?'Contratado':lang==='es'?'Contratado':'Hired' }, in_progress: { bg:'#fff3e0', color:'#e65100', label: lang==='pt'?'Em andamento':lang==='es'?'En progreso':'In Progress' }, }; return cfg[status] || { bg:'#f5f5f5', color:'#555', label: status }; }; // Checklist icon for the card header const ChecklistIcon = ( ); // FAB — aqua floating action button const FabBtn = ( ); return (
{t.work}
{sub==='hiring' ? (lang==='pt'?'Vagas de Emprego':lang==='es'?'Ofertas de Trabajo':'Job Openings') : sub==='techs' ? (lang==='pt'?'Técnicos Disponíveis':lang==='es'?'Técnicos Disponibles':'Available Techs') : (lang==='pt'?'Cobertura de Férias':lang==='es'?'Cobertura de Vacaciones':'Vacation Cover')}
} leftBack onBack={()=>goTab('home')} > {/* Contextual stats strip per sub-tab */}
{sub === 'hiring' && <>
{Icon.briefcase(13,'rgba(255,255,255,0.88)')}
{HIRING.length}
{lang==='pt'?'vagas':lang==='es'?'empleos':'openings'}
{Icon.check(13,'rgba(255,255,255,0.88)')}
{MY_APPLICATIONS.filter(a=>a.type==='hiring').length}
{lang==='pt'?'candidaturas':lang==='es'?'solicitudes':'applied'}
{Icon.pin(11,'rgba(255,255,255,0.8)')} South Florida
} {sub === 'techs' && <>
{TECHS.length}
{lang==='pt'?'técnicos':lang==='es'?'técnicos':'techs'}
{Icon.pin(11,'rgba(255,255,255,0.8)')} South Florida
} {sub === 'vac' && <>
{VACATION_LISTINGS.length}
{lang==='pt'?'coberturas':lang==='es'?'coberturas':'covers'}
{Icon.cal(13,'rgba(255,255,255,0.88)')}
{VACATIONS_APPLIED ? VACATIONS_APPLIED.length : 0}
{lang==='pt'?'aplicadas':lang==='es'?'aplicadas':'applied'}
}
{/* ── Find Work tabs — TOP ── */}
{lang==='pt' ? 'ENCONTRAR TRABALHO' : lang==='es' ? 'ENCONTRAR TRABAJO' : 'FIND WORK'}
{tabs.map(s => { const on = sub === s.id; return ( ); })}
{/* ── My Activity — unified card for hiring + vacation ── */} {(sub === 'hiring' || sub === 'vac') && (() => { // Data per sub-tab const myApps = sub === 'hiring' ? MY_APPLICATIONS.filter(a => a.type === 'hiring') : (typeof VACATIONS_APPLIED !== 'undefined' ? VACATIONS_APPLIED : []); const myPosts = MY_POSTS.filter(p => sub === 'hiring' ? p.type === 'hiring' : p.type === 'vacation' ); const totalApps = myApps.length; const totalPosts = myPosts.length; const activityLbl = lang==='pt'?'Minha Atividade':lang==='es'?'Mi Actividad':'My Activity'; const appsLbl = lang==='pt'?'Candidaturas':lang==='es'?'Solicitudes':'Applications'; const myPostsLbl = lang==='pt'?'Meus Posts':lang==='es'?'Mis Posts':'My Posts'; const emptyApps = lang==='pt'?'Nenhuma candidatura ainda':lang==='es'?'Sin solicitudes aún':'No applications yet'; const emptyPosts = lang==='pt'?'Nenhum post publicado':lang==='es'?'Sin publicaciones':'No posts yet'; return (
{/* Section title */}
{activityLbl}
{/* Inner tab switcher */}
{[ { id:'applications', label: appsLbl, count: totalApps }, { id:'myposts', label: myPostsLbl, count: totalPosts }, ].map(tab => { const on = myActivityTab === tab.id; return ( ); })}
{/* ── Applications tab ── */} {myActivityTab === 'applications' && ( myApps.length === 0 ?
{emptyApps}
: myApps.map((app, i) => { // Hiring app if (sub === 'hiring') { const isPending = app.status === 'pending'; const isAccepted = app.status === 'accepted'; const isProgress = app.status === 'in_progress'; const statusCfg = isPending ? { label: lang==='pt'?'Aguardando':lang==='es'?'Pendiente':'Pending', color:'oklch(0.48 0.14 68)', bg:'oklch(0.96 0.05 68)' } : isAccepted || isProgress ? { label: lang==='pt'?'Aceito ✓':lang==='es'?'Aceptado ✓':'Accepted ✓', color:'var(--pg-blue-600)', bg:'var(--pg-blue-50)' } : { label: lang==='pt'?'Recusado':lang==='es'?'Rechazado':'Rejected', color:'oklch(0.45 0.18 20)', bg:'oklch(0.95 0.04 20)' }; return (
openHiringAppDetail && openHiringAppDetail(app)} style={{display:'flex', alignItems:'center', gap:10, padding:'8px 0', borderTop:'1px solid var(--pg-ink-100)', cursor:'pointer'}}>
{app.company}
{statusCfg.label} · {tr(app.pay, lang)}
{Icon.chev(14,'var(--pg-ink-300)')}
); } // Vacation app const isAwaiting = app.status === 'awaiting'; const isAccepted = app.status === 'accepted'; const statusCfg = isAwaiting ? { label: lang==='pt'?'Aguardando':lang==='es'?'Pendiente':'Pending', color:'oklch(0.48 0.14 68)', bg:'oklch(0.96 0.05 68)' } : isAccepted ? { label: lang==='pt'?'Confirmado ✓':lang==='es'?'Confirmado ✓':'Confirmed ✓', color:'var(--pg-blue-600)', bg:'var(--pg-blue-50)' } : { label: app.status, color:'var(--pg-ink-500)', bg:'var(--pg-ink-100)' }; return (
openSchedule && openSchedule(app)} style={{display:'flex', alignItems:'center', gap:10, padding:'8px 0', borderTop:'1px solid var(--pg-ink-100)', cursor:'pointer'}}>
{app.owner}
{statusCfg.label} · {tr(app.month, lang)} · {app.poolsPerDay} {lang==='pt'?'pisc/dia':lang==='es'?'pisc/día':'pools/day'}
${app.pricePerPool}
{lang==='pt'?'/piscina':lang==='es'?'/piscina':'/pool'}
); }) )} {/* ── My Posts tab ── */} {myActivityTab === 'myposts' && ( myPosts.length === 0 ?
{emptyPosts}
: myPosts.map(post => { const pending = post.applicants ? post.applicants.filter(a=>a.status==='pending').length : 0; const withInterview = post.applicants ? post.applicants.filter(a=>a.interview).length : 0; const totalApplicants = post.applicants ? post.applicants.length : 0; return (
openApplicants && openApplicants(post)} style={{display:'flex', alignItems:'center', gap:10, padding:'8px 0', borderTop:'1px solid var(--pg-ink-100)', cursor:'pointer'}}>
{tr(post.title, lang)}
{lang==='pt'?'ABERTA':lang==='es'?'ABIERTA':'OPEN'} {pending > 0 && {pending} {lang==='pt'?'pendente(s)':lang==='es'?'pendiente(s)':'pending'} } {withInterview > 0 && 📅 {withInterview} {lang==='pt'?'entrev.':lang==='es'?'entrev.':'interview'}{withInterview>1?'s':''} }
{totalApplicants > 0 && {totalApplicants} {lang==='pt'?'cands.':lang==='es'?'cands.':'apps'} } {Icon.chev(14,'var(--pg-ink-300)')}
); }) )}
); })()} {/* ── Content panels ── */}
{sub === 'hiring' && setHiringSheetOpen(true)} user={ctx.user} onApply={openApplyJob} hidePosted={true} openPublicProfile={openPublicProfile} liveJobs={liveJobs}/>} {sub === 'techs' && setTechSheetOpen(true)} openPublicProfile={openPublicProfile} liveTechs={liveTechs}/>} {sub === 'vac' && }
{FabBtn}
); } // ── Shared "My Applications" tracking section ───────────────── function MyApplicationsSection({ apps, lang, onChat, type='hiring' }) { if (!apps || apps.length === 0) return null; const sectionLabel = lang==='pt' ? 'MINHAS CANDIDATURAS' : lang==='es' ? 'MIS SOLICITUDES' : 'MY APPLICATIONS'; const pendingCount = apps.filter(a => a.status === 'pending').length; const TypeIcon = (s, c) => type === 'techs' ? ( ) : Icon.briefcase(s, c); return (
{/* Header */}
{sectionLabel} 0 ? 'oklch(0.96 0.05 68)' : 'var(--pg-ink-100)', color: pendingCount > 0 ? 'oklch(0.48 0.14 68)' : 'var(--pg-ink-500)', }}>{apps.length}
{apps.map(app => { const isPending = app.status === 'pending'; const isAccepted = app.status === 'accepted'; const isRejected = app.status === 'rejected'; const statusCfg = isPending ? { label: lang==='pt'?'AGUARDANDO':lang==='es'?'PENDIENTE':'PENDING', bg:'oklch(0.96 0.05 68)', color:'oklch(0.48 0.14 68)', bar:'oklch(0.75 0.14 68)', } : isAccepted ? { label: lang==='pt'?'ACEITO ✓':lang==='es'?'ACEPTADO ✓':'ACCEPTED ✓', bg:'var(--pg-aqua-100)', color:'var(--pg-aqua-700)', bar:'var(--pg-aqua-500)', } : { label: lang==='pt'?'RECUSADO':lang==='es'?'RECHAZADO':'REJECTED', bg:'oklch(0.95 0.04 20)', color:'oklch(0.45 0.18 20)', bar:'oklch(0.60 0.18 20)', }; const iconColor = isAccepted ? 'var(--pg-aqua-700)' : isRejected ? 'var(--pg-ink-400)' : 'var(--pg-blue-700)'; const iconBg = isAccepted ? 'var(--pg-aqua-100)' : isRejected ? 'var(--pg-ink-100)' : 'var(--pg-blue-100)'; return (
{/* Status banner */}
{statusCfg.label} {app.when} {lang==='pt'?'atrás':lang==='es'?'atrás':'ago'}
{/* Body */}
{/* Company + role row */}
{TypeIcon(16, iconColor)}
{app.company}
{tr(app.title, lang)}
{Icon.pin(11,'var(--pg-ink-400)')} {app.loc} · {tr(app.pay, lang)}
{/* Note */} {app.note && (
{tr(app.note, lang)}
)} {/* Actions */}
{isAccepted ? ( ) : isRejected ? ( ) : ( )}
); })}
); } // ── Card with company-style header ──────────────────────────── function HiringPanel({ t, lang, onChat, onViewApplicants, onCreate, user, onApply, hidePosted=false, openPublicProfile, liveJobs=[] }) { const Company = (s=20, c='var(--pg-blue-500)') => ( ); const Briefcase = (s=13, c='var(--pg-ink-500)') => Icon.briefcase(s, c); const License = (s=13, c='var(--pg-ink-500)') => ( ); const cdlLbl = lang==='pt'?'Carteira de motorista obrigatória':lang==='es'?'Licencia de conducir requerida':'Driver license required'; const eqProv = lang==='pt'?'Equipamento fornecido':lang==='es'?'Equipo provisto':'Equipment provided'; const contractLabel = (c) => ({ fullTime: lang==='pt'?'Full-time':lang==='es'?'Tiempo completo':'Full-time', partTime: lang==='pt'?'Part-time':lang==='es'?'Medio tiempo':'Part-time', contract: lang==='pt'?'Contrato':lang==='es'?'Contrato':'Contract', }[c] || c); return ( <>
{/* ── Live jobs posted by real users ── */} {liveJobs.map(job => (
{job.role}
{Icon.pin(11,'var(--pg-ink-400)')} {job.loc}
NEW
{job.desc ?

{job.desc}

: null}
{contractLabel(job.contract)} {job.payMode !== 'neg' && job.pay ? ${job.pay}{job.payMode==='weekly'?(lang==='pt'?'/sem':'/wk'):'/pool'} : null} {job.payMode === 'neg' ? {lang==='pt'?'Negociável':lang==='es'?'Negociable':'Negotiable'} : null} {job.carReq === 'ownCar' ? 🚗 {lang==='pt'?'Carro próprio':lang==='es'?'Auto propio':'Own car'} : null} {job.carReq === 'companyCar' ? 🏢 {lang==='pt'?'Carro fornecido':lang==='es'?'Auto provisto':'Company car'} : null} {job.equipReq === 'ownEquip' ? 🔧 {lang==='pt'?'Equip. próprio':lang==='es'?'Equipo propio':'Own equip.'} : null}
👤 {job.author}
))} {/* ── Static seed jobs ── */} {HIRING.map(h => (

{descForHiring(h, lang)}

{Icon.pin(13, 'var(--pg-ink-500)')} {h.loc} {Briefcase(13, 'var(--pg-ink-500)')} {eqProv}
{License(13, 'var(--pg-ink-500)')} {cdlLbl}
{tr(h.pay, lang)}
))}
{/* My Posted Jobs — bottom section (hidden when tab switcher is active) */} {!hidePosted && (() => { const myPosts = MY_POSTS.filter(p => p.type === 'hiring'); if (myPosts.length === 0) return null; const sectionLbl = lang==='pt' ? 'MINHAS VAGAS PUBLICADAS' : lang==='es' ? 'MIS VACANTES PUBLICADAS' : 'MY POSTED JOBS'; return (
{sectionLbl} {myPosts.length}
{myPosts.map(post => { const pending = post.applicants.filter(a=>a.status==='pending').length; const withInterview = post.applicants.filter(a=>a.interview).length; return (
onViewApplicants && onViewApplicants(post)}>
{tr(post.title, lang)}
{lang==='pt'?'ABERTA':lang==='es'?'ABIERTA':'OPEN'} {pending > 0 && ( {pending} {lang==='pt'?'pendente(s)':lang==='es'?'pendiente(s)':'pending'} )} {withInterview > 0 && ( 📅 {withInterview} {lang==='pt'?'entrevista':lang==='es'?'entrevista':'interview'}{withInterview>1?'s':''} )}
{post.applicants.length} {lang==='pt'?'cands.':lang==='es'?'cands.':'apps'} {Icon.chev(14,'var(--pg-ink-300)')}
); })}
); })()} ); } function descForHiring(h, lang) { const descs = { 1: { en:'Looking for a reliable pool tech for our growing route. Full training provided.', pt:'Procurando técnico de piscina confiável para nossa rota em crescimento. Treinamento completo.', es:'Buscamos técnico de piscina confiable para nuestra ruta en crecimiento. Capacitación completa.' }, 2: { en:'Expanding company needs experienced technician. Truck and equipment provided. CPO preferred.', pt:'Empresa em expansão precisa de técnico experiente. Veículo e equipamentos fornecidos. CPO preferencial.', es:'Empresa en expansión necesita técnico con experiencia. Camioneta y equipo provistos. CPO preferido.' }, 3: { en:'High-end residential route. Must have own equipment and truck. Premium clientele.', pt:'Rota residencial premium. Necessário equipamento e veículo próprios. Clientela exclusiva.', es:'Ruta residencial premium. Necesario equipo y camioneta propios. Clientela exclusiva.' }, }; return (descs[h.id] || descs[1])[lang] || (descs[h.id] || descs[1]).en; } // ── Tech Review Sheet ───────────────────────────────────────── function TechReviewSheet({ open, onClose, tech, lang='en' }) { const [rating, setRating] = React.useState(0); const [hover, setHover] = React.useState(0); const [comment, setComment] = React.useState(''); const [submitted, setSubmitted] = React.useState(false); React.useEffect(() => { if (open) { setRating(0); setHover(0); setComment(''); setSubmitted(false); } }, [open]); if (!tech) return null; const titleLbl = lang==='pt' ? 'Avaliar técnico' : lang==='es' ? 'Calificar técnico' : 'Rate technician'; const reviewPh = lang==='pt' ? 'Compartilhe sua experiência com este técnico…' : lang==='es' ? 'Comparte tu experiencia con este técnico…' : 'Share your experience with this technician…'; const submitLbl = lang==='pt' ? 'Enviar avaliação' : lang==='es' ? 'Enviar reseña' : 'Submit review'; const skipLbl = lang==='pt' ? 'Pular por agora' : lang==='es' ? 'Omitir por ahora' : 'Skip for now'; const sentLbl = lang==='pt' ? 'Avaliação enviada!' : lang==='es' ? '¡Reseña enviada!' : 'Review submitted!'; const sentSubLbl = lang==='pt' ? 'Obrigado! Isso ajuda outros pool guys a escolher técnicos de qualidade.' : lang==='es' ? '¡Gracias! Esto ayuda a otros pool guys a elegir técnicos de calidad.' : 'Thanks! This helps other pool guys choose quality technicians.'; const starLabels = { en:['Terrible','Bad','OK','Good','Excellent'], pt:['Péssimo','Ruim','Ok','Bom','Excelente'], es:['Pésimo','Malo','Ok','Bueno','Excelente'], }; const sLabels = starLabels[lang] || starLabels.en; const displayed = hover || rating; const handleSubmit = () => { setSubmitted(true); setTimeout(() => onClose(), 1900); }; return (
{submitted ? (
{Icon.check(30,'var(--pg-aqua-700)')}
{sentLbl}
{sentSubLbl}
) : ( <>

{titleLbl}

{/* Tech info card */}
{tech.name}
{tr(tech.speciality, lang)} · {tech.loc}
{tech.rating}
{/* Star picker */}
{[1,2,3,4,5].map(s => ( ))}
{displayed > 0 && (
{sLabels[displayed-1]}
)}