$\"Europe$

Europe Careers CRM

Secure Management System

Your Career · Our Priority

\n}\n\nfunction Icon({name,size=18,strokeWidth=2}:{name:string,size?:number,strokeWidth?:number}){const p={width:size,height:size,viewBox:\"0 0 24 24\",fill:\"none\",stroke:\"currentColor\",strokeWidth,strokeLinecap:\"round\" as const,strokeLinejoin:\"round\" as const,ariaHidden:true};switch(name){case\"home\":return ;case\"users\":return ;case\"calendar\":return ;case\"phone\":return ;case\"whatsapp\":return ;case\"clock\":return ;case\"list\":return ;case\"check\":return ;case\"chart\":return ;case\"briefcase\":return ;case\"globe\":return ;case\"settings\":return ;case\"bell\":return ;case\"search\":return ;case\"file\":return ;case\"headset\":return ;case\"spark\":return ;default:return }}\n\nfunction Layout({user,onLogout,children,active,onNav}:{user:User,onLogout:()=>void,children:React.ReactNode,active:string,onNav:(x:string)=>void}){\n const nav=user.role===\"super_admin\"?[\"Dashboard\",\"Leads\",\"Follow-Ups\",\"Counsellors\",\"Reports\",\"Settings\"]:[\"Dashboard\",\"My Leads\",\"Follow-Ups\"];\n const [profileOpen,setProfileOpen]=useState(false);\n const navigate=(n:string)=>{setProfileOpen(false);onNav(n);window.scrollTo({top:0,behavior:\"smooth\"})};\n const initials=user.name.split(\" \").map(x=>x[0]).join(\"\").slice(0,2).toUpperCase();\n return

{if(e.key==='Enter'&&e.currentTarget.value.trim()){localStorage.setItem('crm_global_search',e.currentTarget.value.trim());onNav(user.role==='super_admin'?'Leads':'My Leads')}}} defaultValue={localStorage.getItem('crm_global_search')||''} className=\"h-11 w-full rounded-xl bg-slate-50 border border-slate-200 pl-11 pr-4 text-sm text-slate-700 placeholder:text-slate-400 outline-none transition focus:bg-white focus:border-blue-500 focus:ring-4 focus:ring-blue-50\" placeholder=\"Search by candidate, EC ID, phone or email...\"/>

{children}

\n}\n\nfunction Stat({label,value,accent=false,icon=\"circle\",trend=\"\",sub=\"Live\"}:{label:string,value:any,accent?:boolean,icon?:string,trend?:string,sub?:string}){return

{label}

{value??0}

{trend&&

{trend}

}

{sub}

}\nconst terminalStatuses=[\"Converted\",\"Lost\",\"Not Interested\",\"Irrelevant\"];\nfunction followupStatus(l:any){\n if(terminalStatuses.includes(String(l?.status||\"\"))) return null;\n const next=String(l?.next_followup||\"\").trim();\n if(!next||next===\"No follow-up\") return \"MISSING\";\n const datePart=next.match(/\\d{4}-\\d{2}-\\d{2}/)?.[0]||next.slice(0,10);\n const timePart=next.match(/\\b\\d{1,2}:\\d{2}(?:\\s?[AP]M)?\\b/i)?.[0]||\"23:59\";\n const isoTime=/AM|PM/i.test(timePart)?(()=>{const m=timePart.match(/(\\d{1,2}):(\\d{2})\\s*([AP]M)/i);if(!m)return \"23:59\";let h=Number(m[1])%12;if(m[3].toUpperCase()===\"PM\")h+=12;return `${pad(h)}:${m[2]}`})():timePart;\n const now=new Date(); const todayIso=today();\n if(datePart{cfg[s][0]}}\nfunction Badge({text}:{text:string}){const cls=text===\"Converted\"?\"bg-emerald-50 text-emerald-700\":text===\"OVERDUE\"?\"bg-red-50 text-red-700\":\"bg-slate-100 text-slate-700\";return {text}}\nfunction ProgramBadge({text}:{text?:string}){const p=String(text||\"\").trim();if(!p)return —;const cfg:any={\"Ausbildung\":\"bg-blue-50 text-blue-700 border-blue-100\",\"Nursing / Pflege\":\"bg-emerald-50 text-emerald-700 border-emerald-100\",\"Doctor Placement\":\"bg-violet-50 text-violet-700 border-violet-100\",\"Handwerker\":\"bg-amber-50 text-amber-700 border-amber-100\",\"MBBS in Europe\":\"bg-rose-50 text-rose-700 border-rose-100\",\"MBA\":\"bg-cyan-50 text-cyan-700 border-cyan-100\",\"BTech\":\"bg-indigo-50 text-indigo-700 border-indigo-100\",\"Study Abroad\":\"bg-fuchsia-50 text-fuchsia-700 border-fuchsia-100\",\"Job Placement\":\"bg-orange-50 text-orange-700 border-orange-100\"};const cls=cfg[p]||\"bg-slate-100 text-slate-700 border-slate-200\";return {p}}\n\nfunction RecentLeads(){const [items,setItems]=useState([]);useEffect(()=>{api('/api/leads').then(d=>setItems((d.items||[]).slice(0,6))).catch(()=>{})},[]);return <>{items.map(l=>{l.candidate_name}{l.ec_id}{l.source||'CRM'}{l.created_at?new Date(l.created_at).toLocaleString('en-IN',{dateStyle:'medium',timeStyle:'short',timeZone:'Asia/Kolkata'}):'—'})}}\n\nfunction Dashboard({user,onOpenFollow}:{user:User,onOpenFollow:(f:Follow)=>void}){const [d,setD]=useState(null),[todayF,setTodayF]=useState([]),[overdue,setOverdue]=useState([]); useEffect(()=>{Promise.all([api(\"/api/dashboard\"),api(\"/api/follow-ups?mode=today\"),api(\"/api/follow-ups?mode=overdue\")]).then(([a,b,c])=>{setD(a);setTodayF(b.items||[]);setOverdue(c.items||[])}).catch(()=>{})},[]); if(!d)return

Loading dashboard…

; const c=d.counts||{},pipe=d.pipeline||[],perf=d.performance||[],pipeTotal=Math.max(1,pipe.reduce((n:any,x:any)=>n+(Number(x.count)||0),0)); return

Welcome Back, {user.name}

Here’s what’s happening with your Europe Careers CRM today.

{new Intl.DateTimeFormat(\"en-IN\",{dateStyle:\"full\",timeZone:\"Asia/Kolkata\"}).format(new Date())}
{new Intl.DateTimeFormat(\"en-IN\",{timeStyle:\"short\",timeZone:\"Asia/Kolkata\"}).format(new Date())} IST

Today’s Follow-Ups ({todayF.length})

View All

{todayF.slice(0,6).map(f=>

{f.candidate_name}

{f.ec_id} · {f.program}

{f.scheduled_time}

)}{!todayF.length&&

No calls due today.

}

Overdue Follow-Ups ({overdue.length})

View All

{overdue.slice(0,6).map(f=>

{f.candidate_name}

{f.ec_id} · {f.program}

)}{!overdue.length&&

No overdue calls.

}

Upcoming Follow-Ups

View All

{(d.upcoming||[]).slice(0,6).map((f:any)=>

{f.candidate_name}

{f.ec_id} · {f.program}

{f.scheduled_date} · {f.scheduled_time}

)}{!(d.upcoming||[]).length&&

Use Follow-Ups → Upcoming.

}

Lead Pipeline

View Details

`${[\"#2878e8\",\"#27b98b\",\"#f5bd4f\",\"#ef6b7a\",\"#8b95a1\",\"#8b5cf6\"][i]} ${(pipe.slice(0,i).reduce((n:any,z:any)=>n+(Number(z.count)||0),0)/pipeTotal)*360}deg ${(pipe.slice(0,i+1).reduce((n:any,z:any)=>n+(Number(z.count)||0),0)/pipeTotal)*360}deg`).join(',')})`}}>

{c.total||0}Total Leads

{pipe.slice(0,6).map((x:any,i:number)=>

{x.status}{x.count}

)}

Leads by Program

View Details

{(d.programs||[]).slice(0,7).map((x:any,i:number)=>

{x.count}

Number(z.count)||0))*145)}px`}}/>{x.label}

)}

Leads by Country

View Details

{(d.countries||[]).slice(0,6).map((x:any)=>

{x.label}{x.count}

Number(z.count)||0))*100)}%`}}/>

)}

Counsellor Performance

View All

{perf.map((p:any)=>)}

Counsellor	Due	Done	Missed	Won
{p.name}	{p.due}	{p.calls_completed}	{p.overdue}	{p.conversions}

Recent Leads

View All

{[\"Name\",\"EC ID\",\"Program\",\"Source\",\"Status\",\"Created\"].map(h=>)}

{h}

}\n\nfunction LeadModal({lead,onClose,onSaved,counsellors,mode=\"edit\",onFollow,user}:{lead:Partial|null,onClose:()=>void,onSaved:()=>void,counsellors:User[],mode?:\"edit\"|\"add\",onFollow?:(l:Lead)=>void,user:User}){\n const programs=[\"Ausbildung\",\"Nursing / Pflege\",\"Doctor Placement\",\"Handwerker\",\"MBBS in Europe\",\"MBA\",\"BTech\",\"Study Abroad\",\"Job Placement\"];\n const countries=[\"Germany\",\"Italy\",\"Poland\",\"Hungary\",\"Romania\",\"Bulgaria\",\"Austria\",\"Netherlands\",\"France\",\"Spain\",\"Other Europe\"];\n const makeEcId=()=>`EC-${crypto.randomUUID().slice(0,6).toUpperCase()}`; const [form,setForm]=useState({candidate_name:\"\",ec_id:mode===\"add\"?makeEcId():\"\",phone:mode===\"add\"?\"+91\":\"\",email:\"\",country:\"Germany\",program:\"\",lead_type:\"\",current_city:\"\",qualification:\"\",experience:\"\",language_level:\"\",preferred_country:\"Germany\",source:\"CRM\",counsellor_id:mode===\"add\"&&user.role!==\"super_admin\"?String(user.id):\"\",status:\"New\",first_followup_date:\"\",first_followup_time:\"\",first_followup_note:\"\",...lead}),[err,setErr]=useState(\"\"),[history,setHistory]=useState([]); const creationDisplay=form.created_at?new Intl.DateTimeFormat(\"en-GB\",{timeZone:\"Asia/Kolkata\",day:\"2-digit\",month:\"2-digit\",year:\"numeric\",hour:\"2-digit\",minute:\"2-digit\",hour12:true}).format(new Date(form.created_at))+\" IST\":new Intl.DateTimeFormat(\"en-GB\",{timeZone:\"Asia/Kolkata\",day:\"2-digit\",month:\"2-digit\",year:\"numeric\",hour:\"2-digit\",minute:\"2-digit\",hour12:true}).format(new Date())+\" IST\";\n useEffect(()=>{if(mode===\"edit\"&&lead?.id)api(`/api/leads/${lead.id}`).then(d=>setHistory(d.history||[])).catch(()=>{})},[mode,lead?.id]);\n const set=(k:string,v:string)=>setForm((x:any)=>({...x,[k]:v}));\n const save=async()=>{setErr(\"\");const payload={...form,candidate_name:String(form.candidate_name||\"\").trim(),phone:String(form.phone||\"\").trim()};if(!payload.candidate_name||!payload.phone||payload.phone.trim()===\"+91\"){setErr(\"Candidate Name and a valid phone number are required\");return}if(mode===\"add\"&&!terminalStatuses.includes(String(payload.status||\"\"))&&(!payload.counsellor_id||!payload.first_followup_date||!payload.first_followup_time||!String(payload.first_followup_note||\"\").trim())){setErr(\"Counsellor, Next Follow-Up Date/Time and What Happened Today are required for every active lead\");return}try{await api(mode===\"add\"?\"/api/leads\":`/api/leads/${lead?.id}`,{method:mode===\"add\"?\"POST\":\"PUT\",headers:{\"Content-Type\":\"application/json\"},body:JSON.stringify(payload)});onSaved()}catch(e){setErr(e instanceof Error?e.message:\"Could not save\")}};\n const field=(k:string,l:string,placeholder=\"\")=>

{l}{[\"candidate_name\",\"phone\"].includes(k)&& *}set(k,e.target.value)} className=\"mt-1 w-full rounded-xl border border-slate-200 bg-white px-3 py-2.5 outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-100\"/>

;\n const select=(k:string,l:string,options:string[],empty=\"Select\")=>

{l}

;\n return

{mode===\"add\"?\"Add New Lead\":\"Edit Lead\"}

Update the record and keep the activity history current.

👤

Lead Information

Candidate basic details and preferences

{mode===\"edit\"&&lead?.ec_id&&EC ID: {lead.ec_id}}

{field(\"candidate_name\",\"Candidate Name\",\"Candidate full name\")}

EC ID

Auto-generated · cannot be edited

{field(\"phone\",\"Phone\",\"+91…\")}{field(\"email\",\"Email\",\"candidate@email.com\")}{select(\"country\",\"Interested Country\",countries)}{select(\"program\",\"Interested Program\",programs)}{select(\"lead_type\",\"Lead Type\",[\"Job\",\"Study\"])}{select(\"source\",\"Lead Source\",[\"Website\",\"WhatsApp\",\"Walk-in\",\"Referral\",\"Facebook\",\"Instagram\",\"Other\"])}{user.role===\"super_admin\"&&

Counsellor{(lead as any)?.counsellor_name&&

Assigned counsellor: {(lead as any).counsellor_name}

} {mode===\"add\"?:

{(lead as any)?.counsellor_name||\"Unassigned\"}🔒 Locked

}

}{select(\"status\",\"Lead Status\",statuses,\"Select status\")}{mode===\"add\"&&!terminalStatuses.includes(String(form.status||\"\"))&&

☎

Next Follow-Up *

Today is recorded as the first follow-up. Schedule the next call before creation.

Next Follow-Up Date *set(\"first_followup_date\",e.target.value)} className=\"mt-1 w-full rounded-xl border border-slate-200 bg-white px-3 py-2.5 outline-none focus:border-blue-500\"/>

Next Follow-Up Time *

09:00 AM – 06:00 PM IST · 30 min slots

What Happened Today? *

set(\"first_followup_note\",e.target.value)} rows={3} placeholder=\"Record what happened on today's first call…\" className=\"mt-1 w-full rounded-xl border border-slate-200 bg-white px-3 py-2.5 outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-100 resize-none\"/><div className=\"text-[10px] text-slate-400 mt-1\">This note will be saved as today's first follow-up history and shown to the counsellor.</div></div></div>}{select(\"lead_temperature\",\"Lead Temperature\",[\"Hot\",\"Warm\",\"Cold\"])}{field(\"current_city\",\"Current City\",\"Enter current city\")}<div><label className=\"text-xs font-semibold text-slate-600\">First Follow-Up Date</label><input type=\"text\" value={creationDisplay} readOnly className=\"mt-1 w-full rounded-xl border border-slate-200 bg-slate-50 text-slate-700 px-3 py-2.5 font-medium cursor-not-allowed\"/><div className=\"text-[10px] text-slate-400 mt-1\">Auto-filled in IST · cannot be edited</div></div>{field(\"qualification\",\"Qualification\",\"BSc Nursing / MBBS / BTech…\")}{field(\"experience\",\"Work Experience\",\"Fresher / 2 years…\")}{select(\"preferred_country\",\"Preferred Country\",countries)}</div><div className=\"mt-4\"><label className=\"text-xs font-semibold text-slate-600\">Additional Notes</label><textarea value={form.notes||\"\"} onChange={e=>set(\"notes\",e.target.value)} rows={3} placeholder=\"Enter any additional notes about the candidate…\" className=\"mt-1 w-full rounded-xl border border-slate-200 px-3 py-2.5\"/></div>{err&&<div className=\"mt-4 bg-red-50 text-red-700 rounded-xl p-3 text-sm\">{err}</div>}</section>{mode===\"edit\"&&<section className=\"rounded-2xl bg-white border border-slate-200 shadow-sm p-5 md:p-6\"><div className=\"flex items-center justify-between border-b border-slate-100 pb-4 mb-4\"><div className=\"flex items-center gap-3\"><div className=\"h-10 w-10 rounded-xl bg-blue-600 text-white flex items-center justify-center\">◷</div><div><h4 className=\"font-bold text-lg\">Follow-Up History</h4><p className=\"text-sm text-slate-500\">Complete history of calls and follow-ups with this candidate</p></div></div>{lead&&lead.id&&onFollow&&<button onClick={()=>onFollow(lead as Lead)} className=\"rounded-xl bg-blue-600 text-white px-4 py-2.5 font-semibold\">＋ Add Follow-Up</button>}</div><div className=\"overflow-x-auto\"><table className=\"w-full text-sm min-w-[850px]\"><thead className=\"bg-slate-50 text-slate-600\"><tr>{[\"#\",\"Status\",\"Called On\",\"Next Follow-Up\",\"Notes\",\"Actions\"].map(h=><th key={h} className=\"px-3 py-3 text-left font-semibold\">{h}</th>)}</tr></thead><tbody>{history.map((f:any,i:number)=>{const completed=f.status===\"completed\";return <tr key={f.id} className=\"border-t border-slate-100\"><td className=\"px-3 py-3\">{i+1}</td><td className=\"px-3 py-3\"><Badge text={completed?\"Completed\":f.status===\"pending\"?\"Scheduled\":\"Not yet\"}/></td><td className=\"px-3 py-3 whitespace-nowrap\">{f.completed_at?new Date(f.completed_at).toLocaleString(\"en-IN\",{dateStyle:\"medium\",timeStyle:\"short\",timeZone:\"Asia/Kolkata\"}):\"Not yet\"}</td><td className=\"px-3 py-3 whitespace-nowrap\"><span className={`rounded-lg px-2.5 py-1.5 font-semibold ${f.next_followup_date?\"bg-amber-50 text-amber-700\":\"bg-slate-100 text-slate-500\"}`}>{f.next_followup_date?`${f.next_followup_date}, ${f.next_followup_time||\"\"}`:\"Not scheduled\"}</span></td><td className=\"px-3 py-3 max-w-xs truncate\">{f.note||\"—\"}</td><td className=\"px-3 py-3\"><div className=\"flex gap-1\"><button onClick={()=>onFollow?.(lead as Lead)} title=\"Add follow-up\" className=\"h-9 w-9 rounded-lg border border-slate-200\">＋</button>{f.phone&&<a href={`https://wa.me/${String(f.phone).replace(/\\D/g,\"\")}`} target=\"_blank\" className=\"h-9 w-9 rounded-lg border border-green-200 bg-green-50 text-green-600 flex items-center justify-center\">◉</a>}</div></td></tr>})}</tbody></table>{!history.length&&<div className=\"py-10 text-center text-slate-400\">No follow-up history yet.</div>}</div><div className=\"mt-4 pt-4 border-t border-slate-100 text-xs text-slate-500 flex justify-between\"><span>Total Follow-Ups: {history.length} · Newest on top</span><span>All dates & times in IST · 09:00 AM – 06:00 PM allowed</span></div></section>}</div></div></div>}\n\nfunction FollowModal({follow,onClose,onSaved}:{follow:Follow,onClose:()=>void,onSaved:()=>void}){const [note,setNote]=useState(\"\"),[nextDate,setNextDate]=useState(\"\"),[nextTime,setNextTime]=useState(\"\"),[leadStatus,setLeadStatus]=useState(follow.lead_status||\"\"),[err,setErr]=useState(\"\");const save=async()=>{setErr(\"\");if(!note.trim()){setErr(\"What happened today is required\");return}if(!terminalStatuses.includes(leadStatus)&&(!nextDate||!nextTime)){setErr(\"Next Follow-Up Date and Time are mandatory unless status is Converted, Lost, Not Interested or Irrelevant\");return}try{await api(`/api/follow-ups/${follow.id}/complete`,{method:\"POST\",headers:{\"Content-Type\":\"application/json\"},body:JSON.stringify({note:note.trim(),lead_status:leadStatus,next_followup_date:terminalStatuses.includes(leadStatus)?\"\":nextDate,next_followup_time:terminalStatuses.includes(leadStatus)?\"\":nextTime})});onSaved()}catch(e){setErr(e instanceof Error?e.message:\"Could not complete\")}};return <div className=\"fixed inset-0 z-50 bg-slate-950/50 flex items-center justify-center p-4\"><div className=\"w-full max-w-xl rounded-2xl bg-white shadow-2xl p-6\"><div className=\"flex justify-between\"><div><h3 className=\"text-xl font-bold\">Complete Follow-Up</h3><p className=\"text-sm text-slate-500 mt-1\">{follow.candidate_name} · {follow.ec_id} · {follow.scheduled_date} {follow.scheduled_time}</p></div><button onClick={onClose} className=\"text-xl text-slate-400\">×</button></div><div className=\"mt-5\"><label className=\"text-sm font-semibold\">Call Outcome / Lead Status <span className=\"text-red-600\">*</span></label><select value={leadStatus} onChange={e=>{setLeadStatus(e.target.value);if(terminalStatuses.includes(e.target.value)){setNextDate(\"\");setNextTime(\"\")}}} className=\"mt-2 w-full rounded-xl border border-slate-200 bg-white px-3 py-2.5\"><option value=\"\">Keep current status</option>{statuses.map(x=><option key={x}>{x}</option>)}</select>{terminalStatuses.includes(leadStatus)&&<div className=\"mt-2 rounded-xl bg-red-50 border border-red-100 text-red-700 p-3 text-sm font-semibold\">🚫 {leadStatus} — no further follow-up will be scheduled.</div>}</div><div className=\"mt-4\"><label className=\"text-sm font-semibold\">What happened today? <span className=\"text-red-600\">*</span></label><textarea value={note} onChange={e=>setNote(e.target.value)} rows={5} placeholder=\"Record the call outcome…\" className=\"mt-2 w-full rounded-xl border border-slate-200 px-3 py-3\"/></div>{!terminalStatuses.includes(leadStatus)&&<div className=\"grid grid-cols-2 gap-4 mt-4\"><div><label className=\"text-sm font-semibold\">Next Follow-Up Date <span className=\"text-red-600\">*</span></label><input type=\"date\" min={today()} max={maxFollowupDate()} value={nextDate} onChange={e=>setNextDate(e.target.value)} required className=\"mt-2 w-full rounded-xl border border-slate-200 px-3 py-2.5\"/></div><div><label className=\"text-sm font-semibold\">Next Follow-Up Time <span className=\"text-red-600\">*</span></label><select value={nextTime} onChange={e=>setNextTime(e.target.value)} required className=\"mt-2 w-full rounded-xl border border-slate-200 bg-white px-3 py-2.5\"><option value=\"\">Select time</option>{Array.from({length:19},(_,i)=>{const m=540+i*30,h=Math.floor(m/60),mm=m%60,v=`${String(h).padStart(2,\"0\")}:${String(mm).padStart(2,\"0\")}`,label=new Date(2000,0,1,h,mm).toLocaleTimeString(\"en-IN\",{hour:\"2-digit\",minute:\"2-digit\",hour12:true});return <option key={v} value={v}>{label}</option>})}</select></div></div>}{err&&<div className=\"mt-4 rounded-xl bg-red-50 text-red-700 p-3 text-sm\">{err}</div>}<div className=\"mt-6 flex justify-end gap-3\"><button onClick={onClose} className=\"rounded-xl border px-4 py-2 font-semibold\">Cancel</button><button onClick={save} disabled={!note.trim()||(!terminalStatuses.includes(leadStatus)&&(!nextDate||!nextTime))} className=\"rounded-xl bg-slate-950 text-white px-4 py-2 font-semibold disabled:opacity-40 disabled:cursor-not-allowed\">Complete Call</button></div></div></div>}\n\nfunction Leads({user,onFollow,onView}:{user:User,onFollow:(l:Lead)=>void,onView:(id:number)=>void}){const [items,setItems]=useState<Lead[]>([]),[counsellors,setCounsellors]=useState<User[]>([]),[search,setSearch]=useState(\"\"),[modal,setModal]=useState<any>(null);const load=()=>api(`/api/leads?search=${encodeURIComponent(search)}`).then(d=>setItems(d.items||[]));useEffect(()=>{load();api(\"/api/counsellors\").then(d=>setCounsellors(d.items||[]))},[search]);return <div><div className=\"flex flex-col md:flex-row gap-3 md:items-center md:justify-between mb-5\"><div><h2 className=\"text-2xl font-bold text-slate-900\">Leads</h2><p className=\"text-sm text-slate-500\">Manage candidate records and keep the call timeline current.</p></div><div className=\"flex gap-2\"><input value={search} onChange={e=>setSearch(e.target.value)} placeholder=\"Search candidate, EC ID, phone…\" className=\"rounded-xl border border-slate-200 bg-white px-4 py-2.5 w-72\"/>{user.role===\"super_admin\"&&<button onClick={()=>setModal({})} className=\"rounded-xl bg-blue-600 text-white px-5 py-2.5 font-semibold shadow-sm hover:bg-blue-700\">＋ Add New Lead</button>}</div></div><div className=\"bg-white border border-slate-200 rounded-2xl overflow-auto shadow-sm\"><table className=\"w-full text-sm\"><thead className=\"bg-slate-50 text-slate-500\"><tr>{[\"Candidate\",\"EC ID\",\"Phone\",\"Country\",\"Program\",\"Counsellor\",\"Status\",\"Last Follow-Up\",\"Next Follow-Up\",\"Actions\"].map(h=><th key={h} className=\"px-4 py-3 text-left font-semibold whitespace-nowrap\">{h}</th>)}</tr></thead><tbody>{items.map(l=><tr key={l.id} className=\"border-t border-slate-100 hover:bg-slate-50/70\"><td className=\"px-4 py-4 font-semibold\">{l.candidate_name}<div className=\"text-xs text-slate-400\">{l.email}</div></td><td className=\"px-4\">{l.ec_id}</td><td className=\"px-4 whitespace-nowrap\">{l.phone}</td><td className=\"px-4\">{l.country}</td><td className=\"px-4\">{l.program}</td><td className=\"px-4\">{l.counsellor_name||\"—\"}</td><td className=\"px-4\"><Badge text={l.status}/></td><td className=\"px-4 whitespace-nowrap\">{l.next_followup||\"—\"}</td><td className=\"px-4 whitespace-nowrap\"><button onClick={()=>setModal(l)} className=\"mr-2 rounded-lg border border-slate-200 px-3 py-1.5 font-semibold\">Edit</button><button onClick={()=>onView(l.id)} className=\"mr-2 rounded-lg border border-slate-200 px-3 py-1.5 font-semibold\">View</button><button onClick={()=>onFollow(l)} className=\"rounded-lg bg-slate-950 text-white px-3 py-1.5 font-semibold\">+ Follow-Up</button></td></tr>)}</tbody></table>{!items.length&&<div className=\"p-12 text-center text-slate-400\">No leads found.</div>}</div>{modal&&<LeadModal mode={modal.id?\"edit\":\"add\"} lead={modal} onClose={()=>setModal(null)} onSaved={()=>{setModal(null);load()}} onFollow={onFollow} counsellors={counsellors} user={user}/>}</div>}\n\nfunction FollowUps({user,onOpenFollow}:{user:User,onOpenFollow:(f:Follow)=>void}){const [mode,setMode]=useState(user.role===\"counsellor\"?\"today\":\"today\"),[items,setItems]=useState<Follow[]>([]),[counsellors,setCounsellors]=useState<any[]>([]),[search,setSearch]=useState(\"\"),[copiedId,setCopiedId]=useState<number|null>(null);const copyPhone=async(id:number,phone:string)=>{try{await navigator.clipboard.writeText(phone);setCopiedId(id);setTimeout(()=>setCopiedId(null),1200)}catch{}};const load=()=>api(`/api/follow-ups?mode=${mode}${search?`&candidate=${encodeURIComponent(search)}`:\"\"}`).then(d=>setItems(d.items||[]));useEffect(()=>{load();api(\"/api/counsellors\").then(d=>setCounsellors(d.items||[]))},[mode,search]);return <div><div className=\"flex flex-col md:flex-row md:justify-between md:items-end gap-3 mb-5\"><div><h2 className=\"text-2xl font-bold\">Follow-Ups</h2><p className=\"text-sm text-slate-500\">Overdue calls stay visible until completed.</p></div><input value={search} onChange={e=>setSearch(e.target.value)} placeholder=\"Search candidate / EC ID\" className=\"rounded-xl border border-slate-200 bg-white px-4 py-2.5 w-72\"/></div><div className=\"flex gap-2 mb-4 flex-wrap\">{[[\"today\",\"Today\"],[\"overdue\",\"Overdue\"],[\"upcoming\",\"Upcoming\"],[\"completed\",\"Completed\"],[\"all\",\"All\"]].map(([v,l])=><button key={v} onClick={()=>setMode(v)} className={`rounded-full px-4 py-2 text-sm font-semibold transition ${mode===v?\"bg-[#142b4b] text-white shadow-sm\":\"bg-white border border-slate-200 text-slate-700 hover:bg-slate-50\"}`}>{l}</button>)}</div><div className=\"space-y-3\">{items.map(f=>{const over=f.status==='pending' && (f.scheduled_date<today() || (f.scheduled_date===today()&&f.scheduled_time<new Date().toLocaleTimeString('en-GB',{hour:'2-digit',minute:'2-digit',hour12:false})));return <div key={f.id} className={`rounded-2xl bg-white border p-5 ${over?\"border-red-200 bg-red-50/30\":\"border-slate-200\"}`}><div className=\"flex flex-col md:flex-row md:items-center gap-4 justify-between\"><div><div className=\"flex items-center gap-2\"><div className=\"font-bold\">{f.candidate_name}</div>{over&&<Badge text=\"OVERDUE\"/>}{f.status==='completed'&&<Badge text=\"Completed\"/>}</div><div className=\"text-sm text-slate-500 mt-1 flex items-center gap-1.5 flex-wrap\"><span className=\"font-semibold text-slate-700\">{f.phone}</span><button type=\"button\" onClick={()=>copyPhone(f.id,String(f.phone||\"\"))} title=\"Copy phone number\" aria-label={`Copy phone number ${f.phone}`} className=\"inline-flex items-center justify-center h-6 w-6 rounded-md border border-slate-200 bg-white text-slate-500 hover:bg-slate-50 hover:text-slate-900 transition\">{copiedId===f.id?\"✓\":\"⧉\"}</button><span>·</span><span className=\"font-semibold text-slate-600\">{f.ec_id?.split(\"-\").length>1?`EC-${f.ec_id.split(\"-\").pop()}`:f.ec_id}</span><span>·</span><span>{f.country}</span><span>·</span><span>{f.program}</span></div><div className=\"text-xs text-slate-500 mt-2\">Counsellor: {f.counsellor_name} · {f.scheduled_date} at {f.scheduled_time}</div>{f.note&&<div className=\"mt-3 rounded-xl bg-slate-50 p-3 text-sm\"><span className=\"font-semibold\">Note:</span> {f.note}</div>}</div>{f.status==='pending'&&<div className=\"flex gap-2\"><button onClick={()=>onOpenFollow(f)} className=\"rounded-xl bg-[#142b4b] text-white px-4 py-2.5 font-semibold shadow-sm hover:bg-[#0f223d]\">Complete</button></div>}</div></div>})}{!items.length&&<div className=\"rounded-2xl bg-white border border-slate-200 p-10 text-center\"><div className=\"text-sm font-semibold text-slate-600\">{mode===\"today\"?\"No pending calls are due today.\":mode===\"overdue\"?\"Great — there are no overdue calls.\":mode===\"upcoming\"?\"No upcoming calls are scheduled.\":mode===\"completed\"?\"No completed follow-ups found.\":\"No follow-ups found.\"}</div>{mode===\"today\"&&<button type=\"button\" onClick={()=>setMode(\"upcoming\")} className=\"mt-3 rounded-lg bg-[#142b4b] px-4 py-2 text-xs font-bold text-white hover:bg-[#0f223d]\">View Upcoming Calls</button>}</div>}</div></div>}\n\nfunction Counsellors(){const empty={name:\"\",email:\"\",password:\"\",status:\"active\"};const [items,setItems]=useState<any[]>([]),[form,setForm]=useState<any>(empty),[editing,setEditing]=useState<any>(null),[err,setErr]=useState(\"\"),[saving,setSaving]=useState(false);const load=()=>api(\"/api/counsellors\").then(d=>setItems(d.items||[])).catch(()=>{});useEffect(load,[]);const reset=()=>{setForm({...empty});setEditing(null);setErr(\"\")};const save=async()=>{setErr(\"\");if(!form.name.trim()||!form.email.trim()||(!editing&&!form.password)){setErr(editing?\"Name and email are required\":\"Name, email and password are required\");return}setSaving(true);try{const result=await api(editing?`/api/counsellors/${editing.id}`:\"/api/counsellors\",{method:editing?\"PUT\":\"POST\",headers:{\"Content-Type\":\"application/json\"},body:JSON.stringify({...form,name:form.name.trim(),email:form.email.trim().toLowerCase()})});if(editing&&result.user){setItems(prev=>prev.map(u=>Number(u.id)===Number(result.user.id)?result.user:u))}else{await load()}reset()}catch(e){setErr(e instanceof Error?e.message:\"Could not save counsellor\")}finally{setSaving(false)}};const edit=(u:any)=>{setEditing(u);setForm({name:u.name||\"\",email:u.email||\"\",password:\"\",status:u.status||\"active\"});setErr(\"\")};const del=async(id:number)=>{if(!confirm(\"Delete this counsellor? Only counsellors with no assigned leads can be deleted.\"))return;try{await api(`/api/counsellors/${id}`,{method:\"DELETE\"});load()}catch(e){alert(e instanceof Error?e.message:\"Could not delete\")}};return <div className=\"space-y-5\"><div className=\"flex items-center justify-between\"><div><h2 className=\"text-2xl font-bold\">Counsellors</h2><p className=\"text-sm text-slate-500 mt-1\">Create, update and manage counsellor login access from one place.</p></div><button onClick={reset} className=\"rounded-xl bg-blue-600 text-white px-5 py-3 font-bold shadow-sm\">＋ Create User</button></div><div className=\"grid lg:grid-cols-3 gap-5 items-start\"><div className=\"lg:col-span-2 rounded-2xl bg-white border border-slate-200 overflow-auto shadow-sm\"><div className=\"p-5 border-b font-bold\">Counsellor Users <span className=\"ml-2 text-xs font-semibold text-slate-400\">{items.length} users</span></div><table className=\"w-full text-sm\"><thead className=\"bg-slate-50\"><tr><th className=\"px-4 py-3 text-left\">Name</th><th className=\"px-4 py-3 text-left\">Email</th><th className=\"px-4 py-3 text-left\">Status</th><th className=\"px-4 py-3 text-right\">Actions</th></tr></thead><tbody>{items.map(u=><tr key={u.id} className=\"border-t\"><td className=\"px-4 py-4 font-semibold\">{u.name}</td><td className=\"px-4\">{u.email}</td><td className=\"px-4\"><span className={`rounded-full px-2.5 py-1 text-xs font-semibold ${u.status==='active'?\"bg-emerald-50 text-emerald-700\":\"bg-slate-100 text-slate-600\"}`}>{u.status==='active'?\"Active\":\"Inactive\"}</span></td><td className=\"px-4 text-right whitespace-nowrap\"><button onClick={()=>edit(u)} className=\"rounded-lg border border-slate-200 px-3 py-1.5 font-semibold hover:bg-slate-50 mr-2\">Edit</button><button onClick={()=>del(u.id)} className=\"text-red-600 font-semibold\">Delete</button></td></tr>)}</tbody></table></div><div className=\"rounded-2xl bg-white border border-slate-200 p-5 h-fit self-start shadow-sm\"><div className=\"flex items-center justify-between\"><h3 className=\"font-bold\">{editing?\"Update User\":\"Create User\"}</h3>{editing&&<button onClick={reset} className=\"text-xs font-semibold text-slate-500\">Cancel</button>}</div><p className=\"text-xs text-slate-500 mt-1\">{editing?\"Update account details or leave password blank to keep the current password.\":\"Create a new counsellor login.\"}</p><div className=\"space-y-3 mt-4\">{[[\"name\",\"Full name\"],[\"email\",\"Email\"]].map(([k,l])=><div key={k}><label className=\"text-xs font-semibold text-slate-500\">{l}</label><input value={form[k]||\"\"} onChange={e=>setForm({...form,[k]:e.target.value})} className=\"mt-1 w-full rounded-xl border px-3 py-2.5\"/></div>)}<div><label className=\"text-xs font-semibold text-slate-500\">{editing?\"New Password (optional)\":\"Password\"}</label><input type=\"password\" value={form.password||\"\"} onChange={e=>setForm({...form,password:e.target.value})} placeholder={editing?\"Leave blank to keep current password\":\"Enter password\"} className=\"mt-1 w-full rounded-xl border px-3 py-2.5\"/></div>{editing&&<div><label className=\"text-xs font-semibold text-slate-500\">Account Status</label><select value={form.status} onChange={e=>setForm({...form,status:e.target.value})} className=\"mt-1 w-full rounded-xl border px-3 py-2.5\"><option value=\"active\">Active — Can Login</option><option value=\"inactive\">Inactive — Block Login</option></select></div>}{err&&<div className=\"text-sm text-red-700 bg-red-50 p-3 rounded-xl\">{err}</div>}<div className=\"mt-5 pt-4 border-t border-slate-200\"><button type=\"button\" disabled={saving} onClick={save} style={{display:\"block\",visibility:\"visible\",width:\"100%\"}} className=\"w-full rounded-xl bg-blue-600 hover:bg-blue-700 text-white py-3 font-bold shadow-sm disabled:opacity-50 disabled:cursor-not-allowed\">{saving?\"Saving…\":editing?\"Update User\":\"Create User\"}</button></div></div></div></div></div>}\n\nfunction LeadDetailsModal({leadId,onClose}:{leadId:number,onClose:()=>void}){const [d,setD]=useState<any>(null);useEffect(()=>{api(`/api/leads/${leadId}`).then(setD)},[leadId]);return <div className=\"fixed inset-0 z-50 bg-slate-950/50 flex items-center justify-center p-4\"><div className=\"w-full max-w-3xl rounded-2xl bg-white shadow-2xl max-h-[90vh] overflow-auto p-6\"><div className=\"flex justify-between\"><div><h3 className=\"text-xl font-bold\">Lead Details</h3><p className=\"text-sm text-slate-500\">Complete immutable call timeline.</p></div><button onClick={onClose} className=\"text-xl text-slate-400\">×</button></div>{!d?<div className=\"py-12 text-center text-slate-400\">Loading…</div>:<div className=\"space-y-6 mt-5\"><div className=\"grid md:grid-cols-4 gap-3\">{[[\"Candidate\",d.lead.candidate_name],[\"EC ID\",d.lead.ec_id],[\"Phone\",d.lead.phone],[\"Status\",d.lead.status],[\"Country\",d.lead.country],[\"Program\",d.lead.program],[\"Counsellor\",d.lead.counsellor_name||\"—\"],[\"Created\",d.lead.created_at]].map(([k,v])=><div key={k} className=\"rounded-xl bg-slate-50 p-3\"><div className=\"text-[11px] text-slate-500\">{k}</div><div className=\"mt-1 font-semibold text-sm\">{v||\"—\"}</div></div>)}</div><div><h4 className=\"font-bold mb-3\">Follow-Up History</h4><div className=\"space-y-3\">{(d.history||[]).map((f:any)=><div key={f.id} className=\"border-l-2 border-slate-300 pl-4\"><div className=\"flex flex-wrap gap-2 items-center\"><b>{f.scheduled_date} · {f.scheduled_time}</b><span className=\"text-xs text-slate-500\">{f.counsellor_name}</span>{f.status==='completed'?<Badge text=\"Completed\"/>:<Badge text=\"Pending\"/>}</div>{f.note&&<div className=\"mt-2 text-sm\">{f.note}</div>}{f.next_followup_date&&<div className=\"mt-2 text-sm font-semibold\">Next Follow-Up: {f.next_followup_date} · {f.next_followup_time}</div>}</div>)}{!d.history?.length&&<div className=\"text-slate-400\">No follow-up history yet.</div>}</div></div></div>}</div></div>}\n\n\nfunction FollowUpDataModal({lead,onClose,onAdd}:{lead:Lead,onClose:()=>void,onAdd:(l:Lead)=>void}){const [d,setD]=useState<any>(null);useEffect(()=>{api(`/api/leads/${lead.id}`).then(setD).catch(()=>{})},[lead.id]);const history=d?.history||[];const last=history.find((f:any)=>f.status==='completed');const next=history.find((f:any)=>f.status==='pending');const fmt=(x:any)=>x?new Date(x).toLocaleString('en-IN',{dateStyle:'medium',timeStyle:'short',timeZone:'Asia/Kolkata'}):'—';return <div className=\"fixed inset-0 z-50 bg-slate-950/50 flex items-center justify-center p-4\"><div className=\"w-full max-w-4xl max-h-[90vh] overflow-auto rounded-2xl bg-white shadow-2xl\"><div className=\"sticky top-0 z-10 bg-[#142b4b] text-white px-6 py-5 flex items-center justify-between\"><div><h3 className=\"text-xl font-bold\">Follow-Up Data</h3><p className=\"text-sm text-slate-300 mt-1\">{lead.candidate_name} · {lead.ec_id} · {lead.phone}</p></div><div className=\"flex gap-2\"><button onClick={()=>onAdd(lead)} className=\"rounded-xl bg-blue-600 hover:bg-blue-500 px-4 py-2.5 font-bold\">＋ Add Follow-Up</button><button onClick={onClose} className=\"text-2xl text-slate-300 hover:text-white px-2\">×</button></div></div>{!d?<div className=\"p-12 text-center text-slate-400\">Loading follow-up data…</div>:<div className=\"p-6 space-y-5\"><div className=\"grid md:grid-cols-3 gap-4\"><div className=\"rounded-2xl border border-slate-200 bg-slate-50 p-4\"><div className=\"text-xs font-bold text-slate-500 uppercase\">Last Follow-Up</div><div className=\"text-lg font-extrabold text-[#102653] mt-2\">{last?.completed_at?fmt(last.completed_at):'No call yet'}</div><div className=\"text-xs text-slate-500 mt-2\">Latest completed call · IST</div></div><div className=\"rounded-2xl border border-blue-100 bg-blue-50/60 p-4\"><div className=\"text-xs font-bold text-blue-600 uppercase\">Next Follow-Up</div><div className=\"text-lg font-extrabold text-[#102653] mt-2\">{next?`${next.scheduled_date} · ${next.scheduled_time}`:'Not scheduled'}</div><div className=\"text-xs text-slate-500 mt-2\">Pending call</div></div><div className=\"rounded-2xl border border-emerald-100 bg-emerald-50/60 p-4\"><div className=\"text-xs font-bold text-emerald-600 uppercase\">Total Calls</div><div className=\"text-lg font-extrabold text-[#102653] mt-2\">{history.filter((f:any)=>f.status==='completed').length}</div><div className=\"text-xs text-slate-500 mt-2\">Completed call records</div></div></div><div className=\"rounded-2xl border border-slate-200 overflow-hidden\"><div className=\"px-5 py-4 bg-slate-50 border-b font-bold\">Complete Follow-Up History</div><div className=\"divide-y divide-slate-100\">{history.map((f:any,i:number)=><div key={f.id} className=\"p-5\"><div className=\"flex flex-col md:flex-row md:items-start md:justify-between gap-3\"><div><div className=\"flex items-center gap-2\"><span className=\"font-bold\">Call #{history.length-i}</span><Badge text={f.status==='completed'?'Completed':'Pending'}/></div><div className=\"text-xs text-slate-500 mt-1\">{f.status==='completed'?`Called: ${fmt(f.completed_at)}`:`Scheduled: ${f.scheduled_date} · ${f.scheduled_time}`} · {f.counsellor_name}</div></div>{f.next_followup_date&&<div className=\"rounded-lg bg-amber-50 text-amber-700 px-3 py-2 text-xs font-bold\">Next: {f.next_followup_date} · {f.next_followup_time}</div>}</div>{f.note&&<div className=\"mt-3 rounded-xl bg-slate-50 p-4 text-sm leading-6\"><b>What Happened Today:</b><div className=\"mt-1 text-slate-700 whitespace-pre-wrap\">{f.note}</div></div>}</div>)}{!history.length&&<div className=\"p-10 text-center text-slate-400\">No follow-up history yet. Add the first follow-up.</div>}</div></div></div>}</div></div>}\nfunction LeadsWorkspace({user,onFollow,onFollowData,onView,onNav}:{user:User,onFollow:(l:Lead)=>void,onFollowData:(l:Lead)=>void,onView:(id:number)=>void,onNav:(x:string)=>void}){const [items,setItems]=useState<any[]>([]),[counsellors,setCounsellors]=useState<User[]>([]),[search,setSearch]=useState(()=>localStorage.getItem('crm_global_search')||''),[country,setCountry]=useState(\"\"),[program,setProgram]=useState(\"\"),[status,setStatus]=useState(\"\"),[counsellor,setCounsellor]=useState(\"\"),[page,setPage]=useState(1),[total,setTotal]=useState(0),[totalPages,setTotalPages]=useState(1),[modal,setModal]=useState<any>(null),[loading,setLoading]=useState(false),[err,setErr]=useState(\"\");const programs=[\"Ausbildung\",\"Nursing / Pflege\",\"Doctor Placement\",\"Handwerker\",\"MBBS in Europe\",\"MBA\",\"BTech\",\"Study Abroad\",\"Job Placement\"];const countries=[\"Germany\",\"Italy\",\"Poland\",\"Hungary\",\"Romania\",\"Bulgaria\",\"Austria\",\"Netherlands\",\"France\",\"Spain\",\"Other Europe\"];const load=async()=>{setLoading(true);setErr(\"\");try{const qs=new URLSearchParams();if(search)qs.set(\"search\",search);if(country)qs.set(\"country\",country);if(program)qs.set(\"program\",program);if(status)qs.set(\"status\",status);if(counsellor)qs.set(\"counsellor\",counsellor);qs.set(\"page\",String(page));qs.set(\"limit\",\"50\");const d=await api(`/api/leads?${qs}`);setItems(d.items||[]);setTotal(Number(d.total)||0);setTotalPages(Number(d.totalPages)||1)}catch(e){setErr(e instanceof Error?e.message:\"Could not load leads\")}finally{setLoading(false)}};const deleteLead=async(id:number,name:string)=>{if(user.role!==\"super_admin\")return;if(!confirm(`Delete lead \"${name}\"? This action cannot be undone.`))return;try{await api(`/api/leads/${id}`,{method:\"DELETE\"});setItems(prev=>prev.filter(x=>Number(x.id)!==Number(id)));setTotal(n=>Math.max(0,n-1));alert(\"Lead deleted successfully.\")}catch(e){alert(e instanceof Error?e.message:\"Could not delete lead\")}};useEffect(()=>{api(\"/api/counsellors\").then(d=>setCounsellors(d.items||[])).catch(()=>{})},[]);useEffect(()=>{load()},[search,country,program,status,counsellor,page]);useEffect(()=>{setPage(1)},[search,country,program,status,counsellor]);return <div><div className=\"flex flex-col xl:flex-row xl:items-end xl:justify-between gap-4 mb-5\"><div><div className=\"flex items-center gap-3\"><h2 className=\"text-2xl font-bold\">Leads</h2><span className=\"rounded-full bg-blue-50 text-blue-700 px-3 py-1 text-xs font-bold\">{items.length} shown</span></div><p className=\"text-sm text-slate-500\">Live lead database — use filters to find the exact candidate and continue the call workflow.</p></div><button onClick={()=>setModal({})} className=\"rounded-xl bg-blue-600 text-white px-5 py-3 font-semibold shadow-sm hover:bg-blue-700\">＋ Add New Lead</button></div><div className=\"rounded-2xl bg-white border border-slate-200 shadow-sm p-4 mb-5\"><div className=\"grid md:grid-cols-2 xl:grid-cols-5 gap-3\"><input value={search} onChange={e=>setSearch(e.target.value)} placeholder=\"Search name / EC ID / phone / email\" className=\"rounded-xl border border-slate-200 px-4 py-2.5 xl:col-span-1\"/><select value={country} onChange={e=>setCountry(e.target.value)} className=\"rounded-xl border border-slate-200 px-3 py-2.5\"><option value=\"\">All Countries</option>{countries.map(x=><option key={x}>{x}</option>)}</select><select value={program} onChange={e=>setProgram(e.target.value)} className=\"rounded-xl border border-slate-200 px-3 py-2.5\"><option value=\"\">All Programs</option>{programs.map(x=><option key={x}>{x}</option>)}</select><select value={status} onChange={e=>setStatus(e.target.value)} className=\"rounded-xl border border-slate-200 px-3 py-2.5\"><option value=\"\">All Statuses</option>{statuses.map(x=><option key={x}>{x}</option>)}</select>{user.role===\"super_admin\"?<select value={counsellor} onChange={e=>setCounsellor(e.target.value)} className=\"rounded-xl border border-slate-200 px-3 py-2.5\"><option value=\"\">All Counsellors</option>{counsellors.map(x=><option key={x.id} value={x.id}>{x.name}</option>)}</select>:<button onClick={()=>{localStorage.removeItem('crm_global_search');setSearch(\"\");setCountry(\"\");setProgram(\"\");setStatus(\"\");setCounsellor(\"\")}} className=\"rounded-xl border border-slate-200 bg-slate-50 px-4 py-2.5 font-semibold\">Clear Filters</button>}</div>{user.role===\"super_admin\"&&<div className=\"mt-3 flex justify-end\"><button onClick={()=>{localStorage.removeItem('crm_global_search');setSearch(\"\");setCountry(\"\");setProgram(\"\");setStatus(\"\");setCounsellor(\"\")}} className=\"text-sm font-semibold text-blue-600\">Clear all filters</button></div>}</div>{err&&<div className=\"mb-4 rounded-xl bg-red-50 text-red-700 p-3 text-sm\">{err}</div>}<div className=\"bg-white border border-slate-200 rounded-2xl overflow-auto shadow-sm\"><table className=\"w-full text-sm\"><thead className=\"bg-slate-50 text-slate-500\"><tr>{[\"Candidate\",\"Phone\",\"Country\",\"Program\",\"Counsellor\",\"Status\",\"Last Follow-Up\",\"Next Follow-Up\",\"Actions\"].map(h=><th key={h} className=\"px-4 py-3 text-left font-semibold whitespace-nowrap\">{h}</th>)}</tr></thead><tbody>{items.map(l=><tr key={l.id} className=\"border-t border-slate-100 hover:bg-slate-50/70\"><td className=\"px-4 py-4 font-semibold\">{l.candidate_name}<div className=\"text-xs text-slate-400\">{l.email||\"No email\"}</div></td><td className=\"px-4 whitespace-nowrap\"><a href={`tel:${l.phone}`} className=\"hover:text-blue-600\">{l.phone}</a></td><td className=\"px-4\">{l.country||\"—\"}</td><td className=\"px-4\"><ProgramBadge text={l.program}/></td><td className=\"px-4\">{l.counsellor_name||\"Unassigned\"}</td><td className=\"px-4\"><Badge text={l.status}/></td><td className=\"px-4 whitespace-nowrap\">{l.last_followup||\"No call yet\"}</td><td className=\"px-4 whitespace-nowrap\"><div className=\"flex flex-col items-start gap-1.5\">{l.next_followup||\"No follow-up\"}<FollowupBadge lead={l}/></div></td><td className=\"px-4 whitespace-nowrap\"><div className=\"flex items-center gap-1.5\"><button onClick={()=>onFollowData(l)} className=\"rounded-lg bg-blue-600 text-white px-3 py-1.5 font-semibold shadow-sm hover:bg-blue-700\">Follow-Up</button>{user.role==='super_admin'&&<button onClick={()=>setModal(l)} className=\"rounded-lg border border-slate-200 px-3 py-1.5 font-semibold hover:bg-slate-50\">Edit</button>}{user.role==='super_admin'&&<button onClick={()=>deleteLead(l.id,l.candidate_name)} title=\"Delete lead\" className=\"rounded-lg border border-red-200 bg-red-50 text-red-600 px-3 py-1.5 font-semibold hover:bg-red-100\">Delete</button>}<button onClick={()=>onView(l.id)} className=\"rounded-lg border border-slate-200 px-3 py-1.5 font-semibold hover:bg-slate-50\">View</button>{l.phone&&<a href={`https://wa.me/${String(l.phone).replace(/\\D/g,\"\")}?text=${encodeURIComponent(`Hi ${l.candidate_name}, this is Europe Careers. We’re following up regarding your career application. Please let us know a convenient time to connect.`)}`} target=\"_blank\" rel=\"noopener noreferrer\" title=\"Send WhatsApp message\" aria-label={`Send WhatsApp message to ${l.candidate_name}`} className=\"h-9 w-9 rounded-lg border border-green-200 bg-green-50 text-green-600 flex items-center justify-center hover:bg-green-100 hover:border-green-300 transition\"><Icon name=\"whatsapp\" size={18}/></a>}</div></td></tr>)}</tbody></table>{loading&&<div className=\"p-10 text-center text-slate-400\">Loading live leads…</div>}{!loading&&!items.length&&<div className=\"p-12 text-center text-slate-400\">No leads match these filters.</div>}{!loading&&total>0&&<div className=\"flex flex-col sm:flex-row items-center justify-between gap-3 border-t border-slate-100 px-4 py-3 bg-slate-50\"><div className=\"text-xs text-slate-500\">Showing <b>{(page-1)*50+1}</b>–<b>{Math.min(page*50,total)}</b> of <b>{total}</b> leads</div><div className=\"flex items-center gap-1\"><button disabled={page<=1} onClick={()=>setPage(p=>Math.max(1,p-1))} className=\"rounded-lg border bg-white px-3 py-2 text-sm font-semibold disabled:opacity-40\">← Prev</button><span className=\"px-3 text-xs font-bold text-slate-600\">Page {page} / {totalPages}</span><button disabled={page>=totalPages} onClick={()=>setPage(p=>Math.min(totalPages,p+1))} className=\"rounded-lg border bg-white px-3 py-2 text-sm font-semibold disabled:opacity-40\">Next →</button></div></div>}</div>{modal&&<LeadModal mode={modal.id?\"edit\":\"add\"} lead={modal.id?modal:null} onClose={()=>setModal(null)} onSaved={()=>{setModal(null);load()}} onFollow={onFollow} counsellors={counsellors} user={user}/>}</div>}\nfunction AdminReports(){const [d,setD]=useState<any>(null),[tab,setTab]=useState(\"overview\"),[selected,setSelected]=useState<any>(null);useEffect(()=>{api('/api/admin/insights').then(setD).catch(()=>{})},[]);if(!d)return <div className=\"animate-pulse text-slate-500\">Loading management report…</div>;const s=d.summary||{},tabs=[[\"overview\",\"Overview\"],[\"missing\",\"Missing Follow-Ups\"],[\"stale\",\"Stale Leads\"],[\"activity\",\"Activity Log\"]];return <div className=\"space-y-5\"><div><h2 className=\"text-2xl font-bold\">Super Admin Control Center</h2><p className=\"text-sm text-slate-500 mt-1\">Operational accountability, lead health and team activity — live from the CRM.</p></div><div className=\"grid grid-cols-2 md:grid-cols-4 xl:grid-cols-7 gap-3\">{[[\"Unassigned\",s.unassigned,\"text-amber-600\"],[\"Missing Follow-Ups\",s.missing_followups,\"text-red-600\"],[\"Stale 3+ Days\",s.stale_3_days,\"text-orange-600\"],[\"Stale 7+ Days\",s.stale_7_days,\"text-red-600\"],[\"Converted\",s.converted,\"text-emerald-600\"],[\"Contacted\",s.contacted,\"text-blue-600\"],[\"Activities Today\",s.activities_today,\"text-violet-600\"]].map(([l,v,cl])=><button key={l} onClick={()=>setTab(l===\"Missing Follow-Ups\"?\"missing\":l===\"Stale 3+ Days\"||l===\"Stale 7+ Days\"?\"stale\":\"overview\")} className=\"rounded-xl bg-white border border-slate-200 p-4 text-left shadow-sm hover:shadow-md\"><div className=\"text-xs text-slate-500\">{l}</div><div className={`text-2xl font-extrabold mt-1 ${cl}`}>{v??0}</div></button>)}</div><div className=\"flex gap-2 flex-wrap\">{tabs.map(([v,l])=><button key={v} onClick={()=>setTab(v)} className={`rounded-full px-4 py-2 text-sm font-semibold ${tab===v?\"bg-slate-950 text-white\":\"bg-white border border-slate-200\"}`}>{l}{v===\"missing\"&&Number(s.missing_followups)>0?<span className=\"ml-2 rounded-full bg-red-100 text-red-700 px-2\">{s.missing_followups}</span>:null}</button>)}</div>{tab===\"overview\"&&<div className=\"grid lg:grid-cols-2 gap-5\"><section className=\"rounded-2xl bg-white border border-slate-200 p-5\"><h3 className=\"font-bold\">What needs attention</h3><div className=\"space-y-3 mt-4\">{[[\"Missing Follow-Ups\",s.missing_followups,\"Open Missing Follow-Ups\",\"missing\"],[\"Unassigned Leads\",s.unassigned,\"Go to Leads\",\"leads\"],[\"Stale 7+ Days\",s.stale_7_days,\"Review Stale Leads\",\"stale\"]].map(([l,v,b,t])=><div key={l} className=\"flex items-center justify-between rounded-xl bg-slate-50 p-4\"><div><div className=\"font-semibold\">{l}</div><div className=\"text-xs text-slate-500 mt-1\">{Number(v)||0} records need attention</div></div><button onClick={()=>setTab(t as string)} className=\"text-sm font-bold text-blue-600\">{b} →</button></div>)}</div></section><section className=\"rounded-2xl bg-white border border-slate-200 p-5\"><h3 className=\"font-bold\">Counsellor accountability</h3><div className=\"overflow-auto mt-4\"><table className=\"w-full text-sm\"><thead className=\"bg-slate-50\"><tr><th className=\"p-2 text-left\">Counsellor</th><th className=\"p-2\">Assigned</th><th className=\"p-2\">Due</th><th className=\"p-2\">Done</th><th className=\"p-2\">Overdue</th><th className=\"p-2\">Missing</th><th className=\"p-2\">Won</th><th className=\"p-2\">Done %</th></tr></thead><tbody>{(d.performance||[]).map((p:any)=><tr key={p.id} className=\"border-t\"><td className=\"p-2 font-semibold\">{p.name}</td><td className=\"p-2 text-center\">{p.assigned}</td><td className=\"p-2 text-center\">{p.due}</td><td className=\"p-2 text-center text-emerald-600\">{p.calls_completed}</td><td className=\"p-2 text-center text-red-600\">{p.overdue}</td><td className=\"p-2 text-center text-amber-600 font-semibold\">{p.missing}</td><td className=\"p-2 text-center font-bold text-emerald-700\">{p.conversions}</td><td className=\"p-2 text-center font-bold\">{Math.round((Number(p.calls_completed)||0)/Math.max(1,(Number(p.calls_completed)||0)+(Number(p.overdue)||0))*100)}%</td></tr>)}</tbody></table></div></section></div>}{tab===\"missing\"&&<AdminTable title=\"Missing Follow-Ups\" items={d.missing_followups||[]} empty=\"No active leads are missing a pending follow-up.\"/>}{tab===\"stale\"&&<AdminTable title=\"Stale Leads (3+ days without update)\" items={d.stale||[]} empty=\"No stale active leads.\"/>}{tab===\"activity\"&&<div className=\"rounded-2xl bg-white border border-slate-200 overflow-auto\"><div className=\"p-5 border-b font-bold\">Recent Activity</div><table className=\"w-full text-sm\"><thead className=\"bg-slate-50\"><tr><th className=\"p-3 text-left\">Time</th><th className=\"p-3 text-left\">User</th><th className=\"p-3 text-left\">Action</th><th className=\"p-3 text-left\">Lead</th><th className=\"p-3 text-left\">Details</th></tr></thead><tbody>{(d.activity||[]).map((a:any)=><tr key={a.id} className=\"border-t\"><td className=\"p-3 whitespace-nowrap\">{a.created_at}</td><td className=\"p-3 font-semibold\">{a.user_name||\"System\"}</td><td className=\"p-3\">{a.action}</td><td className=\"p-3\">{a.candidate_name||\"—\"}</td><td className=\"p-3 text-slate-500\">{a.details||\"—\"}</td></tr>)}</tbody></table></div>}</div>}\nfunction AdminTable({title,items,empty}:{title:string,items:any[],empty:string}){return <div className=\"rounded-2xl bg-white border border-slate-200 overflow-auto\"><div className=\"p-5 border-b flex justify-between\"><div className=\"font-bold\">{title}</div><span className=\"text-sm text-slate-500\">{items.length} records</span></div><table className=\"w-full text-sm\"><thead className=\"bg-slate-50\"><tr>{[\"Candidate\",\"EC ID\",\"Counsellor\",\"Status\",\"Last Update\",\"Action\"].map(h=><th key={h} className=\"p-3 text-left whitespace-nowrap\">{h}</th>)}</tr></thead><tbody>{items.map((x:any)=><tr key={x.id} className=\"border-t\"><td className=\"p-3 font-semibold\">{x.candidate_name}</td><td className=\"p-3 text-blue-700\">{x.ec_id}</td><td className=\"p-3\">{x.counsellor_name||\"Unassigned\"}</td><td className=\"p-3\"><Badge text={x.status}/></td><td className=\"p-3 whitespace-nowrap\">{x.updated_at}</td><td className=\"p-3\"><button onClick={()=>window.dispatchEvent(new CustomEvent('crm-open-lead',{detail:x.id}))} className=\"text-blue-600 font-semibold\">Open Lead →</button></td></tr>)}</tbody></table>{!items.length&&<div className=\"p-10 text-center text-slate-400\">{empty}</div>}</div>}\n\n\nexport function App(){const [user,setUser]=useState<User|null>(null),[checking,setChecking]=useState(true),[active,setActive]=useState(\"Dashboard\"),[follow,setFollow]=useState<Follow|null>(null),[leadFollow,setLeadFollow]=useState<Lead|null>(null),[followData,setFollowData]=useState<Lead|null>(null),[detail,setDetail]=useState<number|null>(null),[globalAdd,setGlobalAdd]=useState(false),[globalCounsellors,setGlobalCounsellors]=useState<User[]>([]),[refreshKey,setRefreshKey]=useState(0);useEffect(()=>{const sid=localStorage.getItem('ec_session');if(!sid){setChecking(false);return}fetch('/api/me',{headers:{'X-Session-ID':sid}}).then(async r=>{if(!r.ok)throw new Error('Session invalid');const d=await r.json();localStorage.setItem('ec_user',JSON.stringify(d.user));setUser(d.user)}).catch(()=>{localStorage.removeItem('ec_user');localStorage.removeItem('ec_session')}).finally(()=>setChecking(false))},[]);useEffect(()=>{const add=()=>{if(user){setGlobalAdd(true);api('/api/counsellors').then(d=>setGlobalCounsellors(d.items||[])).catch(()=>{})}};const open=(e:any)=>{setActive('Leads');setDetail(Number(e.detail))};window.addEventListener('open-add-lead',add);window.addEventListener('crm-open-lead',open);return()=>{window.removeEventListener('open-add-lead',add);window.removeEventListener('crm-open-lead',open)}},[user]);if(checking)return <div className=\"min-h-screen bg-[#0b1830] flex items-center justify-center text-white\"><div className=\"text-center\"><div className=\"mx-auto h-12 w-12 rounded-xl bg-white flex items-center justify-center shadow-xl\"><img src=\"https://europecareers.in/wp-content/uploads/2026/02/Europecareers.in_-2__1_-removebg-preview-1-e1773039949263.png\" className=\"max-h-8 max-w-[120px] object-contain\"/></div><div className=\"mt-4 text-sm text-slate-300\">Checking secure session…</div></div></div>;if(!user)return <Login onLogin={setUser}/>;const logout=async()=>{try{await api(\"/api/logout\",{method:\"POST\"})}catch{} localStorage.removeItem(\"ec_user\");localStorage.removeItem(\"ec_session\");setUser(null)};return <Layout user={user} onLogout={logout} active={active} onNav={n=>setActive(n)}>{active===\"Dashboard\"&&<DashboardPro key={`dash-${refreshKey}`} user={user} onOpenFollow={setFollow} onNav={setActive}/>} {(active===\"Leads\"||active===\"My Leads\")&&<LeadsWorkspace key={`leads-${refreshKey}`} user={user} onFollow={l=>{setLeadFollow(l);setFollow(null)}} onFollowData={setFollowData} onView={setDetail} onNav={setActive}/>} {active===\"Follow-Ups\"&&<FollowUps key={`followups-${refreshKey}`} user={user} onOpenFollow={setFollow}/>} {followData&&<FollowUpDataModalV2 lead={followData} onClose={()=>setFollowData(null)} onAdd={l=>{setFollowData(null);setLeadFollow(l)}}/>} {active===\"Counsellors\"&&user.role===\"super_admin\"&&<Counsellors/>} {active===\"Reports\"&&user.role===\"super_admin\"&&<AdminReports/>} {active===\"Settings\"&&user.role===\"super_admin\"&&<div className=\"space-y-5\"><div className=\"rounded-2xl bg-white border border-slate-200 p-6\"><h2 className=\"text-2xl font-bold\">CRM Settings</h2><p className=\"mt-2 text-slate-500\">Follow-ups use IST and are restricted to 09:00–18:00. Historical records are append-only. Super Admin control reports flag unassigned, missing and stale active leads.</p><div className=\"mt-5 grid md:grid-cols-3 gap-3\"><div className=\"rounded-xl bg-slate-50 p-4\"><b>Business Hours</b><div className=\"text-sm text-slate-500 mt-1\">09:00 AM – 06:00 PM IST</div></div><div className=\"rounded-xl bg-slate-50 p-4\"><b>Follow-Up History</b><div className=\"text-sm text-slate-500 mt-1\">Append-only audit trail</div></div><div className=\"rounded-xl bg-slate-50 p-4\"><b>Access</b><div className=\"text-sm text-slate-500 mt-1\">Super Admin has full control</div></div></div></div><AdminPassword/><div className=\"rounded-2xl bg-white border border-slate-200 shadow-sm p-6\"><div className=\"flex items-start justify-between gap-4\"><div><h3 className=\"text-lg font-extrabold text-[#102653]\">Backup & Export</h3><p className=\"text-sm text-slate-500 mt-1\">Keep an offline copy of your CRM data. Recommended before major changes or regularly each week.</p></div><div className=\"h-10 w-10 rounded-xl bg-blue-50 text-blue-600 flex items-center justify-center\"><Icon name=\"file\" size={19}/></div></div><div className=\"grid md:grid-cols-2 gap-4 mt-5\"><div className=\"rounded-2xl border border-slate-200 p-5\"><div className=\"font-bold\">Professional Excel Export</div><p className=\"text-xs text-slate-500 mt-1\">Real .xlsx workbook with Leads, Follow-Up History, Activity Log and Counsellors.</p><button onClick={()=>downloadAdminFile('/api/admin/export/leads.xlsx',`europe-careers-crm-${today()}.xlsx`).catch(e=>alert(e instanceof Error?e.message:'Export failed'))} className=\"mt-4 rounded-xl bg-blue-600 hover:bg-blue-700 text-white px-4 py-2.5 font-bold\">↓ Export Excel (.xlsx)</button></div><div className=\"rounded-2xl border border-blue-100 bg-blue-50/40 p-5\"><div className=\"font-bold text-[#102653]\">Full CRM Backup</div><p className=\"text-xs text-slate-500 mt-1\">Leads, complete follow-up history, counsellor accounts (no passwords), and activity log.</p><button onClick={()=>downloadAdminFile('/api/admin/backup.json',`europe-careers-crm-backup-${today()}.json`).catch(e=>alert(e instanceof Error?e.message:'Backup failed'))} className=\"mt-4 rounded-xl bg-slate-950 hover:bg-slate-800 text-white px-4 py-2.5 font-bold\">↓ Download Full Backup</button></div></div><div className=\"mt-4 rounded-xl bg-amber-50 border border-amber-100 p-3 text-xs text-amber-800\">🔐 Backup downloads are available only to Super Admin. Passwords and active session tokens are never included.</div></div></div>} {follow&&<FollowModal follow={follow} onClose={()=>setFollow(null)} onSaved={()=>{setFollow(null);setRefreshKey(k=>k+1)}}/>} {leadFollow&&<CreateFollow lead={leadFollow} onClose={()=>setLeadFollow(null)} onSaved={()=>{setLeadFollow(null);setRefreshKey(k=>k+1)}}/>} {detail&&<LeadDetailsModal leadId={detail} onClose={()=>setDetail(null)}/>} {globalAdd&&<LeadModal mode=\"add\" lead={null} counsellors={globalCounsellors} user={user} onClose={()=>setGlobalAdd(false)} onSaved={()=>{setGlobalAdd(false);setRefreshKey(k=>k+1)}}/>}</Layout>}\n\nfunction AdminPassword(){const [current,setCurrent]=useState(\"\"),[next,setNext]=useState(\"\"),[confirm,setConfirm]=useState(\"\"),[err,setErr]=useState(\"\"),[ok,setOk]=useState(\"\"),[saving,setSaving]=useState(false);const save=async()=>{setErr(\"\");setOk(\"\");if(next.length<12){setErr(\"New password must be at least 12 characters.\");return}if(next!==confirm){setErr(\"New passwords do not match.\");return}setSaving(true);try{const d=await api('/api/admin/change-password',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({current_password:current,new_password:next})});setOk(d.message||\"Password changed successfully.\");setCurrent(\"\");setNext(\"\");setConfirm(\"\")}catch(e){setErr(e instanceof Error?e.message:\"Could not change password\")}finally{setSaving(false)}};return <section className=\"rounded-2xl bg-white border border-slate-200 shadow-sm p-6\"><div className=\"flex items-start gap-3\"><div className=\"h-10 w-10 rounded-xl bg-red-50 text-red-600 flex items-center justify-center\">🔐</div><div><h3 className=\"text-lg font-extrabold text-[#102653]\">Super Admin Password</h3><p className=\"text-sm text-slate-500 mt-1\">Change the password used for the Super Admin account.</p></div></div><div className=\"grid md:grid-cols-3 gap-4 mt-5\"><div><label className=\"text-xs font-bold text-slate-600\">Current Password</label><input type=\"password\" value={current} onChange={e=>setCurrent(e.target.value)} autoComplete=\"current-password\" className=\"mt-1 w-full rounded-xl border border-slate-200 px-3 py-2.5\"/></div><div><label className=\"text-xs font-bold text-slate-600\">New Password</label><input type=\"password\" value={next} onChange={e=>setNext(e.target.value)} autoComplete=\"new-password\" placeholder=\"Minimum 12 characters\" className=\"mt-1 w-full rounded-xl border border-slate-200 px-3 py-2.5\"/></div><div><label className=\"text-xs font-bold text-slate-600\">Confirm New Password</label><input type=\"password\" value={confirm} onChange={e=>setConfirm(e.target.value)} autoComplete=\"new-password\" className=\"mt-1 w-full rounded-xl border border-slate-200 px-3 py-2.5\"/></div></div>{err&&<div className=\"mt-4 rounded-xl bg-red-50 border border-red-100 text-red-700 p-3 text-sm font-semibold\">{err}</div>}{ok&&<div className=\"mt-4 rounded-xl bg-emerald-50 border border-emerald-100 text-emerald-700 p-3 text-sm font-semibold\">✓ {ok}</div>}<button type=\"button\" disabled={saving||!current||!next||!confirm} onClick={save} className=\"mt-4 rounded-xl bg-[#142b4b] hover:bg-[#0f223d] text-white px-5 py-3 font-bold disabled:opacity-40\">{saving?\"Changing…\":\"Change Admin Password\"}</button></section>}\n\nfunction CreateFollow({lead,onClose,onSaved}:{lead:Lead,onClose:()=>void,onSaved:()=>void}){const [nextDate,setNextDate]=useState(\"\"),[nextTime,setNextTime]=useState(\"\"),[note,setNote]=useState(\"\"),[leadStatus,setLeadStatus]=useState(lead.status||\"\"),[err,setErr]=useState(\"\"),[saving,setSaving]=useState(false);const now=new Date(),callDate=new Intl.DateTimeFormat(\"en-GB\",{timeZone:\"Asia/Kolkata\",day:\"2-digit\",month:\"2-digit\",year:\"numeric\"}).format(now),callTime=new Intl.DateTimeFormat(\"en-IN\",{timeZone:\"Asia/Kolkata\",hour:\"2-digit\",minute:\"2-digit\",hour12:true}).format(now),timeOptions=Array.from({length:19},(_,i)=>{const m=540+i*30,h=Math.floor(m/60),mm=m%60;return {value:`${String(h).padStart(2,\"0\")}:${String(mm).padStart(2,\"0\")}`,label:new Date(2000,0,1,h,mm).toLocaleTimeString(\"en-IN\",{hour:\"2-digit\",minute:\"2-digit\",hour12:true})}});const save=async()=>{setErr(\"\");if(!note.trim()){setErr(\"What Happened Today is required\");return}if(!terminalStatuses.includes(leadStatus)&&(!nextDate||!nextTime)){setErr(\"Next Follow-Up Date and Time are mandatory unless status is Converted, Lost, Not Interested or Irrelevant\");return}setSaving(true);try{await api(`/api/leads/${lead.id}/follow-up-call`,{method:\"POST\",headers:{\"Content-Type\":\"application/json\"},body:JSON.stringify({note:note.trim(),lead_status:leadStatus,next_followup_date:terminalStatuses.includes(leadStatus)?\"\":nextDate,next_followup_time:terminalStatuses.includes(leadStatus)?\"\":nextTime})});onSaved()}catch(e){setErr(e instanceof Error?e.message:\"Could not save follow-up\")}finally{setSaving(false)}};return <div className=\"fixed inset-0 z-50 bg-slate-950/50 flex items-center justify-center p-4\"><div className=\"w-full max-w-xl rounded-2xl bg-white shadow-2xl overflow-hidden\"><div className=\"bg-[#142b4b] text-white px-6 py-5 flex items-center justify-between\"><div><h3 className=\"text-xl font-bold\">Follow-Up</h3><p className=\"text-sm text-slate-300 mt-1\">{lead.candidate_name} · {lead.ec_id}</p></div><button onClick={onClose} className=\"text-2xl text-slate-300 hover:text-white\">×</button></div><div className=\"p-6 space-y-5\"><div className=\"grid grid-cols-2 gap-4\"><div><label className=\"text-xs font-bold text-slate-500 uppercase tracking-wide\">Current Date</label><input value={callDate} readOnly className=\"mt-2 w-full rounded-xl border border-slate-200 bg-slate-50 px-3 py-3 font-semibold text-slate-700 cursor-not-allowed\"/><div className=\"text-[10px] text-slate-400 mt-1\">Auto-filled · IST · cannot be changed</div></div><div><label className=\"text-xs font-bold text-slate-500 uppercase tracking-wide\">Call Time</label><input value={callTime} readOnly className=\"mt-2 w-full rounded-xl border border-slate-200 bg-slate-50 px-3 py-3 font-semibold text-slate-700 cursor-not-allowed\"/><div className=\"text-[10px] text-slate-400 mt-1\">Auto-filled · IST · cannot be changed</div></div></div><div><label className=\"text-sm font-bold text-slate-700\">Call Outcome / Lead Status <span className=\"text-red-600\">*</span></label><select value={leadStatus} onChange={e=>{setLeadStatus(e.target.value);if(terminalStatuses.includes(e.target.value)){setNextDate(\"\");setNextTime(\"\")}}} className=\"mt-2 w-full rounded-xl border border-slate-200 bg-white px-3 py-3 outline-none focus:border-blue-500\"><option value=\"\">Keep current status</option>{statuses.map(x=><option key={x}>{x}</option>)}</select>{terminalStatuses.includes(leadStatus)&&<div className=\"mt-2 rounded-xl bg-red-50 border border-red-100 text-red-700 p-3 text-sm font-semibold\">🚫 {leadStatus} — no further follow-up will be scheduled.</div>}</div>{!terminalStatuses.includes(leadStatus)&&<div><label className=\"text-sm font-bold text-slate-700\">Next Follow-Up <span className=\"text-red-600\">*</span></label><div className=\"text-xs text-slate-500 mt-1\">Mandatory after the call. Select the next call date and time.</div><div className=\"grid grid-cols-2 gap-3 mt-2\"><div><input type=\"date\" min={today()} max={maxFollowupDate()} value={nextDate} onChange={e=>setNextDate(e.target.value)} required className=\"w-full rounded-xl border border-slate-200 px-3 py-3 outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-100\"/><div className=\"text-[10px] text-slate-400 mt-1\">Choose next call date *</div></div><div><select value={nextTime} onChange={e=>setNextTime(e.target.value)} required className=\"w-full rounded-xl border border-slate-200 bg-white px-3 py-3 outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-100\"><option value=\"\">Select time</option>{timeOptions.map(x=><option key={x.value} value={x.value}>{x.label}</option>)}</select><div className=\"text-[10px] text-slate-400 mt-1\">09:00 AM – 06:00 PM IST · 30 min slots *</div></div></div></div>}<div><label className=\"text-sm font-bold text-slate-700\">What Happened Today? <span className=\"text-red-600\">*</span></label><textarea value={note} onChange={e=>setNote(e.target.value)} rows={6} placeholder=\"Write exactly what happened on today's call...\" className=\"mt-2 w-full rounded-xl border border-slate-200 px-4 py-3 outline-none resize-none focus:border-blue-500 focus:ring-2 focus:ring-blue-100\"/><div className=\"text-xs text-slate-400 mt-1\">This note will be permanently saved in the Follow-Up History.</div></div>{err&&<div className=\"rounded-xl bg-red-50 border border-red-100 text-red-700 p-3 text-sm font-medium\">{err}</div>}<div className=\"flex justify-end gap-3 pt-1\"><button onClick={onClose} className=\"rounded-xl border border-slate-200 px-5 py-3 font-semibold\">Cancel</button><button disabled={saving||!note.trim()||(!terminalStatuses.includes(leadStatus)&&(!nextDate||!nextTime))} onClick={save} className=\"rounded-xl bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 font-bold disabled:opacity-40 disabled:cursor-not-allowed\">{saving?\"Saving…\":\"Save Follow-Up\"}</button></div></div></div></div>}\n\n\nfunction DashboardPro({user,onOpenFollow,onNav}:{user:User,onOpenFollow:(f:Follow)=>void,onNav:(x:string)=>void}){\n const [d,setD]=useState<any>(null),[todayF,setTodayF]=useState<Follow[]>([]),[overdue,setOverdue]=useState<Follow[]>([]);\n useEffect(()=>{Promise.all([api('/api/dashboard'),api('/api/follow-ups?mode=today'),api('/api/follow-ups?mode=overdue')]).then(([a,b,c])=>{setD(a);setTodayF(b.items||[]);setOverdue(c.items||[])}).catch(()=>{})},[]);\n if(!d)return <div className=\"min-h-[60vh] flex items-center justify-center text-slate-400\">Loading dashboard…</div>;\n const c=d.counts||{},pipe=d.pipeline||[],perf=d.performance||[],programs=d.programs||[],countries=d.countries||[],maxProg=Math.max(1,...programs.map((x:any)=>Number(x.count)||0)),maxCountry=Math.max(1,...countries.map((x:any)=>Number(x.count)||0));\n const palette=[\"bg-blue-500\",\"bg-emerald-500\",\"bg-amber-400\",\"bg-rose-400\",\"bg-violet-500\",\"bg-cyan-500\"];\n const stat=(label:string,value:any,sub:string,icon:string,box:string,ink:string)=><div className={`rounded-2xl border p-4 shadow-sm ${box}`}><div className=\"flex items-center gap-3\"><div className={`h-11 w-11 shrink-0 rounded-xl flex items-center justify-center ${ink}`}><Icon name={icon} size={20}/></div><div className=\"min-w-0\"><div className=\"text-[11px] font-semibold text-slate-500 truncate\">{label}</div><div className=\"text-2xl font-extrabold text-[#102653] leading-tight\">{value??0}</div><div className=\"text-[10px] text-slate-500 mt-0.5\">{sub}</div></div></div></div>;\n const section=(title:string,action:string,go:()=>void,body:React.ReactNode,wide=false)=><section className={`rounded-2xl bg-white border border-slate-200 shadow-sm overflow-hidden ${wide?'lg:col-span-2':''}`}><div className=\"px-5 py-4 border-b border-slate-100 flex items-center justify-between\"><h3 className=\"font-bold text-[#102653]\">{title}</h3><button onClick={go} className=\"text-xs font-bold text-blue-600 hover:text-blue-800\">{action} →</button></div>{body}</section>;\n return <div className=\"space-y-5\">\n  <div className=\"flex flex-col xl:flex-row xl:items-end xl:justify-between gap-4\"><div><div className=\"flex items-center gap-2\"><h1 className=\"text-3xl font-extrabold tracking-tight text-[#102653]\">Welcome Back, {user.name}</h1><span className=\"h-8 w-8 rounded-full bg-amber-50 text-amber-500 flex items-center justify-center\"><Icon name=\"spark\" size={17}/></span></div><p className=\"text-sm text-slate-500 mt-1\">Here’s what’s happening with your Europe Careers CRM today.</p></div><div className=\"flex items-center gap-4\"><div className=\"hidden sm:block text-right text-xs text-slate-500\">{new Intl.DateTimeFormat('en-IN',{dateStyle:'full',timeZone:'Asia/Kolkata'}).format(new Date())}<br/><b className=\"text-slate-800 text-sm\">{new Intl.DateTimeFormat('en-IN',{timeStyle:'short',timeZone:'Asia/Kolkata'}).format(new Date())} IST</b></div><button onClick={()=>window.dispatchEvent(new CustomEvent('open-add-lead'))} className=\"rounded-xl bg-blue-600 hover:bg-blue-700 text-white px-5 py-3 font-bold shadow-sm\">＋ Add New Lead</button></div></div>\n  <div className=\"grid grid-cols-2 md:grid-cols-4 xl:grid-cols-7 gap-3\">{stat('Total Leads',c.total,'All time','users','bg-white border-slate-200','bg-blue-50 text-blue-600')}{stat('New Leads',c.new_leads,'Created today','users','bg-emerald-50/60 border-emerald-100','bg-emerald-100 text-emerald-600')}{stat(\"Today's Follow-Ups\",c.today,'Due today','phone','bg-amber-50/60 border-amber-100','bg-amber-100 text-amber-600')}{stat('Overdue Follow-Ups',c.overdue,'Past due','clock','bg-rose-50/60 border-rose-100','bg-rose-100 text-rose-600')}{stat('Pending Follow-Ups',c.pending,'Upcoming','list','bg-violet-50/60 border-violet-100','bg-violet-100 text-violet-600')}{stat('Completed Follow-Ups',c.completed,'Total','check','bg-emerald-50/60 border-emerald-100','bg-emerald-100 text-emerald-600')}{stat('Converted Leads',c.converted,'Success','chart','bg-blue-50/60 border-blue-100','bg-blue-100 text-blue-600')}</div>\n  <div className=\"grid lg:grid-cols-3 gap-5\">\n   {section(`Today’s Follow-Ups (${todayF.length})`,'View All',()=>onNav('Follow-Ups'),<div className=\"p-3\">{todayF.slice(0,5).map(f=><div key={f.id} className=\"flex items-center gap-3 px-2 py-3 border-b last:border-0\"><div className=\"h-9 w-9 rounded-lg bg-blue-50 text-blue-600 flex items-center justify-center\">☎</div><div className=\"min-w-0 flex-1\"><div className=\"font-semibold text-sm truncate\">{f.candidate_name}</div><div className=\"text-[11px] text-slate-400 flex items-center gap-1.5 flex-wrap\"><span>{f.ec_id} ·</span><ProgramBadge text={f.program}/></div></div><span className=\"text-xs font-semibold text-slate-600 whitespace-nowrap\">{f.scheduled_time}</span><button onClick={()=>onOpenFollow(f)} className=\"h-8 w-8 rounded-lg bg-blue-600 text-white\">→</button></div>)}{!todayF.length&&<div className=\"py-12 text-center text-sm text-slate-400\">No calls due today.</div>}</div>)}\n   {section(`Overdue Follow-Ups (${overdue.length})`,'View All',()=>onNav('Follow-Ups'),<div className=\"p-3\">{overdue.slice(0,5).map(f=><div key={f.id} className=\"flex items-center gap-3 px-2 py-3 border-b last:border-0\"><div className=\"h-9 w-9 rounded-lg bg-rose-50 text-rose-600 flex items-center justify-center\">◷</div><div className=\"min-w-0 flex-1\"><div className=\"font-semibold text-sm truncate\">{f.candidate_name}</div><div className=\"text-[11px] text-slate-400 flex items-center gap-1.5 flex-wrap\"><span>{f.ec_id} ·</span><ProgramBadge text={f.program}/></div></div><Badge text=\"OVERDUE\"/><button onClick={()=>onOpenFollow(f)} className=\"h-8 w-8 rounded-lg bg-blue-600 text-white\">→</button></div>)}{!overdue.length&&<div className=\"py-12 text-center text-sm text-slate-400\">No overdue calls.</div>}</div>)}\n   {section('Upcoming Follow-Ups','View All',()=>onNav('Follow-Ups'),<div className=\"p-3\">{(d.upcoming||[]).slice(0,5).map((f:any)=><div key={f.id} className=\"flex items-center gap-3 px-2 py-3 border-b last:border-0\"><div className=\"h-9 w-9 rounded-lg bg-violet-50 text-violet-600 flex items-center justify-center\">▣</div><div className=\"min-w-0 flex-1\"><div className=\"font-semibold text-sm truncate\">{f.candidate_name}</div><div className=\"text-[11px] text-slate-400 flex items-center gap-1.5 flex-wrap\"><span>{f.ec_id} ·</span><ProgramBadge text={f.program}/></div></div><span className=\"text-[11px] font-semibold text-slate-600 whitespace-nowrap\">{f.scheduled_date}<br/>{f.scheduled_time}</span></div>)}{!(d.upcoming||[]).length&&<div className=\"py-12 text-center text-sm text-slate-400\">No upcoming follow-ups.</div>}</div>)}\n  </div>\n  <div className=\"grid lg:grid-cols-3 gap-5\">\n   {section('Lead Pipeline','View Details',()=>onNav('Leads'),<div className=\"p-5 flex items-center gap-5 min-h-[235px]\"><div className=\"relative h-40 w-40 shrink-0 rounded-full\" style={{background:`conic-gradient(${pipe.slice(0,6).map((x:any,i:number)=>{const a=pipe.slice(0,i).reduce((n:any,z:any)=>n+(Number(z.count)||0),0)/Math.max(1,pipe.reduce((n:any,z:any)=>n+(Number(z.count)||0),0))*360;const b=pipe.slice(0,i+1).reduce((n:any,z:any)=>n+(Number(z.count)||0),0)/Math.max(1,pipe.reduce((n:any,z:any)=>n+(Number(z.count)||0),0))*360;return `${['#2878e8','#27b98b','#f5bd4f','#ef6b7a','#8b5cf6','#24b6bd'][i]} ${a}deg ${b}deg`}).join(',')}`}}><div className=\"absolute inset-7 rounded-full bg-white flex flex-col items-center justify-center shadow-inner\"><b className=\"text-2xl text-[#102653]\">{c.total||0}</b><span className=\"text-[10px] text-slate-500\">Total Leads</span></div></div><div className=\"space-y-2.5 text-xs flex-1\">{pipe.slice(0,6).map((x:any,i:number)=><div key={x.status} className=\"flex justify-between items-center gap-2\"><span className=\"flex items-center gap-2\"><i className={`h-2.5 w-2.5 rounded-full ${palette[i]}`}></i>{x.status}</span><b>{x.count}</b></div>)}</div></div>)}\n   {section('Leads by Program','View Details',()=>onNav('Leads'),<div className=\"p-5 h-[235px] flex items-end gap-3\">{programs.slice(0,7).map((x:any,i:number)=><div key={x.label} className=\"flex-1 flex flex-col items-center gap-1.5 h-full justify-end\"><b className=\"text-[11px]\">{x.count}</b><div className={`w-full max-w-12 rounded-t-lg ${palette[i%palette.length]}`} style={{height:`${Math.max(14,(Number(x.count)||0)/maxProg*145)}px`}}></div><span className=\"text-[9px] text-slate-500 text-center leading-tight line-clamp-2\">{x.label}</span></div>)}</div>)}\n   {section('Leads by Country','View Details',()=>onNav('Leads'),<div className=\"p-5 space-y-4 min-h-[235px]\">{countries.slice(0,6).map((x:any,i:number)=><div key={x.label}><div className=\"flex justify-between text-xs mb-1.5\"><span>{x.label}</span><b>{x.count}</b></div><div className=\"h-2 rounded-full bg-slate-100 overflow-hidden\"><div className={`h-full rounded-full ${palette[i%palette.length]}`} style={{width:`${Math.max(5,(Number(x.count)||0)/maxCountry*100)}%`}}/></div></div>)}{!countries.length&&<div className=\"text-center text-sm text-slate-400 pt-16\">No country data yet.</div>}</div>)}\n  </div>\n  <div className=\"grid lg:grid-cols-5 gap-5\">\n   {section(user.role==='super_admin'?'Counsellor Performance':'My Performance','View All',()=>onNav(user.role==='super_admin'?'Reports':'Follow-Ups'),<div className=\"overflow-auto\"><table className=\"w-full text-sm\"><thead className=\"bg-slate-50\"><tr>{['Counsellor','Assigned','Due','Done','Missed','Missing','Won','Done %'].map(h=><th key={h} className=\"px-4 py-3 text-left text-[11px] text-slate-500 font-bold whitespace-nowrap\">{h}</th>)}</tr></thead><tbody>{perf.map((p:any)=><tr key={p.id} className=\"border-t border-slate-100\"><td className=\"px-4 py-3 font-semibold whitespace-nowrap\">{p.name}</td><td className=\"px-4 py-3\">{p.assigned??0}</td><td className=\"px-4 py-3\">{p.due??0}</td><td className=\"px-4 py-3 text-emerald-600 font-semibold\">{p.calls_completed??0}</td><td className=\"px-4 py-3 text-red-600 font-semibold\">{p.overdue??0}</td><td className=\"px-4 py-3 text-amber-600 font-semibold\">{p.missing??0}</td><td className=\"px-4 py-3 text-emerald-700 font-bold\">{p.conversions??0}</td><td className=\"px-4 py-3 font-bold\">{Math.round((Number(p.calls_completed)||0)/Math.max(1,(Number(p.calls_completed)||0)+(Number(p.overdue)||0))*100)}%</td></tr>)}</tbody></table>{!perf.length&&<div className=\"p-10 text-center text-sm text-slate-400\">No counsellor activity yet.</div>}</div>,true)}\n   {section('Recent Leads','View All',()=>onNav(user.role==='super_admin'?'Leads':'My Leads'),<div className=\"overflow-auto\"><table className=\"w-full text-sm\"><thead className=\"bg-slate-50\"><tr>{['Name','EC ID','Program','Source','Status','Created'].map(h=><th key={h} className=\"px-4 py-3 text-left text-[11px] text-slate-500 font-bold whitespace-nowrap\">{h}</th>)}</tr></thead><tbody><RecentLeads/></tbody></table></div>,true)}\n  </div>\n </div>\n}\n\n\nfunction FollowUpDataModalV2({lead,onClose,onAdd}:{lead:Lead,onClose:()=>void,onAdd:(l:Lead)=>void}){\n const [d,setD]=useState<any>(null);\n useEffect(()=>{api(`/api/leads/${lead.id}`).then(setD).catch(()=>{})},[lead.id]);\n const history=(d?.history||[]).slice();\n const pending=history.find((f:any)=>f.status==='pending');\n const completed=history.filter((f:any)=>f.status==='completed').sort((a:any,b:any)=>String(b.completed_at||b.id).localeCompare(String(a.completed_at||a.id)));\n const last=completed[0];\n const status=followupStatus({...lead,next_followup:pending?`${pending.scheduled_date} ${pending.scheduled_time}`:lead.next_followup});\n const statusCfg:any={OVERDUE:[\"🔴 OVERDUE\",\"border-red-200 bg-red-50 text-red-700\"],TODAY:[\"🟠 DUE TODAY\",\"border-orange-200 bg-orange-50 text-orange-700\"],UPCOMING:[\"🟢 UPCOMING\",\"border-emerald-200 bg-emerald-50 text-emerald-700\"],MISSING:[\"⚠️ FOLLOW-UP MISSING\",\"border-amber-200 bg-amber-50 text-amber-700\"]};\n const fmt=(x:any)=>x?new Date(x).toLocaleString('en-IN',{dateStyle:'medium',timeStyle:'short',timeZone:'Asia/Kolkata'}):'—';\n return <div className=\"fixed inset-0 z-50 bg-slate-950/60 flex items-center justify-center p-3 md:p-5\"><div className=\"w-full max-w-5xl max-h-[94vh] overflow-hidden rounded-2xl bg-white shadow-2xl flex flex-col\">\n  <div className=\"bg-[#142b4b] text-white px-5 md:px-7 py-5 flex items-center justify-between shrink-0\"><div><div className=\"flex items-center gap-3\"><h3 className=\"text-xl md:text-2xl font-bold\">Follow-Up Data</h3>{status&&<span className=\"rounded-full bg-white/10 border border-white/20 px-3 py-1 text-[11px] font-bold\">{statusCfg[status]?.[0]}</span>}</div><p className=\"text-sm text-slate-300 mt-1\">{lead.candidate_name} · {lead.ec_id} · {lead.phone}</p></div><div className=\"flex items-center gap-2\"><button onClick={onClose} className=\"text-2xl text-slate-300 hover:text-white px-2\">×</button></div></div>\n  {!d?<div className=\"p-14 text-center text-slate-400\">Loading follow-up data…</div>:<div className=\"overflow-auto p-5 md:p-7 space-y-5\">\n   {pending&&<section className={`sticky top-0 z-10 rounded-2xl border p-5 shadow-lg ring-1 ring-black/5 ${statusCfg[status]?.[1]||'border-blue-200 bg-blue-50 text-blue-700'}`}><div className=\"flex flex-col md:flex-row md:items-center md:justify-between gap-4\"><div><div className=\"flex items-center gap-2\"><div className=\"text-xs font-extrabold uppercase tracking-wider opacity-70\">NEXT CALL</div>{status&&<span className=\"rounded-full bg-white/70 border border-black/5 px-2.5 py-1 text-[10px] font-extrabold\">{statusCfg[status]?.[0]}</span>}</div><div className=\"text-2xl font-extrabold mt-1\">{new Date(`${pending.scheduled_date}T${pending.scheduled_time}:00+05:30`).toLocaleDateString('en-IN',{day:'2-digit',month:'short',year:'numeric',timeZone:'Asia/Kolkata'})} · {pending.scheduled_time}</div><div className=\"text-sm mt-1\">Pending call · {pending.counsellor_name||lead.counsellor_name||'Assigned counsellor'}</div></div></div></section>}\n   {!pending&&!terminalStatuses.includes(String(lead.status||''))&&<section className=\"rounded-2xl border-2 border-red-200 bg-red-50 p-5 flex flex-col md:flex-row md:items-center md:justify-between gap-4 shadow-sm\"><div><div className=\"flex items-center gap-2\"><span className=\"h-8 w-8 rounded-full bg-red-100 text-red-600 flex items-center justify-center font-bold\">!</span><div><div className=\"font-extrabold text-red-800\">🚨 FOLLOW-UP MISSING</div><div className=\"text-sm text-red-700 mt-1\">This active lead requires your next call schedule.</div></div></div></div><button onClick={()=>onAdd(lead)} className=\"rounded-xl bg-red-600 hover:bg-red-700 text-white px-5 py-3 font-bold shadow-sm\">＋ Schedule Next Call</button></section>}\n   <div className=\"grid grid-cols-2 md:grid-cols-4 gap-3\"><div className=\"rounded-2xl border border-slate-200 bg-slate-50 p-4\"><div className=\"text-[11px] font-bold text-slate-500 uppercase\">Total Calls</div><div className=\"text-2xl font-extrabold text-[#102653] mt-1\">{completed.length}</div></div><div className=\"rounded-2xl border border-emerald-100 bg-emerald-50/60 p-4\"><div className=\"text-[11px] font-bold text-emerald-600 uppercase\">Completed</div><div className=\"text-2xl font-extrabold text-[#102653] mt-1\">{completed.length}</div></div><div className=\"rounded-2xl border border-blue-100 bg-blue-50/60 p-4\"><div className=\"text-[11px] font-bold text-blue-600 uppercase\">Next Call</div><div className=\"text-sm font-extrabold text-[#102653] mt-2\">{pending?`${pending.scheduled_date} · ${pending.scheduled_time}`:'Not scheduled'}</div></div><div className=\"rounded-2xl border border-slate-200 bg-white p-4\"><div className=\"text-[11px] font-bold text-slate-500 uppercase\">Last Contact</div><div className=\"text-sm font-extrabold text-[#102653] mt-2\">{last?.completed_at?fmt(last.completed_at):'No call yet'}</div></div></div>\n   <section className=\"rounded-2xl border border-slate-200 overflow-hidden\"><div className=\"px-5 py-4 bg-slate-50 border-b border-slate-200 flex items-center justify-between\"><div><h4 className=\"font-extrabold text-[#102653]\">Call Timeline</h4><p className=\"text-xs text-slate-500 mt-1\">Immutable history · newest call first</p></div><button onClick={()=>onAdd(lead)} className=\"rounded-xl bg-blue-600 text-white px-4 py-2.5 font-bold\">＋ Add Follow-Up</button></div><div className=\"p-5 md:p-6 space-y-4\">{history.map((f:any,i:number)=>{const done=f.status==='completed';return <div key={f.id} className=\"relative pl-8\"><div className={`absolute left-0 top-1 h-5 w-5 rounded-full flex items-center justify-center text-[10px] ${done?'bg-emerald-100 text-emerald-700':'bg-blue-100 text-blue-700'}`}>{done?'✓':'○'}</div>{i<history.length-1&&<div className=\"absolute left-[9px] top-6 bottom-[-18px] w-px bg-slate-200\"/>}<div className=\"rounded-2xl border border-slate-200 bg-white p-4 md:p-5 shadow-sm\"><div className=\"flex flex-col md:flex-row md:items-start md:justify-between gap-3\"><div><div className=\"flex flex-wrap items-center gap-2\"><span className=\"font-extrabold text-[#102653]\">Call #{history.length-i}</span><Badge text={done?'Completed':'Pending'}/></div><div className=\"text-xs text-slate-500 mt-1\">{done?`Called: ${fmt(f.completed_at)}`:`Scheduled: ${f.scheduled_date} · ${f.scheduled_time}`} · {f.counsellor_name||'Assigned counsellor'}</div></div>{f.next_followup_date&&<div className=\"rounded-lg bg-amber-50 text-amber-700 px-3 py-2 text-xs font-bold whitespace-nowrap\">Next: {f.next_followup_date} · {f.next_followup_time}</div>}</div>{f.note&&<div className=\"mt-4 rounded-xl bg-slate-50 border border-slate-100 p-4 text-sm leading-6\"><div className=\"text-[11px] font-extrabold uppercase tracking-wide text-slate-500\">What Happened Today</div><div className=\"mt-1 whitespace-pre-wrap text-slate-700\">{f.note}</div></div>}</div></div>})}{!history.length&&<div className=\"py-12 text-center text-slate-400\">No follow-up history yet. Start the first call.</div>}</div></section>\n  </div>}\n </div></div>\n}\n","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useMemo, useState } from \"https://esm.sh/react@18.2.0\";\n\ntype User={id:number,name:string,email:string,role:string};\ntype Lead={id:number,candidate_name:string,ec_id:string,phone:string,email:string,country:string,program:string,counsellor_id:number|null,counsellor_name?:string,status:string,next_followup?:string,latest_note?:string};\ntype Follow={id:number,lead_id:number,candidate_name:string,ec_id:string,phone:string,country:string,program:string,counsellor_id:number,counsellor_name:string,scheduled_date:string,scheduled_time:string,status:string,note?:string,next_followup_date?:string,next_followup_time?:string,completed_at?:string,lead_status?:string};\nconst statuses=[\"New\",\"Contacted\",\"Interested\",\"Follow-Up\",\"Qualified\",\"Converted\",\"Not Interested\",\"Irrelevant\",\"Not Reachable\",\"Lost\"];\nconst pad=(n:number)=>String(n).padStart(2,\"0\");\nconst today=()=>{const d=new Date(); const x=new Intl.DateTimeFormat(\"en-CA\",{timeZone:\"Asia/Kolkata\"}).format(d);return x}; const maxFollowupDate=()=>{const now=new Date();const parts=new Intl.DateTimeFormat(\"en-US\",{timeZone:\"Asia/Kolkata\",year:\"numeric\",month:\"2-digit\",day:\"2-digit\"}).formatToParts(now);const y=Number(parts.find(x=>x.type===\"year\")?.value),m=Number(parts.find(x=>x.type===\"month\")?.value)-1,d=Number(parts.find(x=>x.type===\"day\")?.value);const x=new Date(Date.UTC(y,m,d+15));return `${x.getUTCFullYear()}-${String(x.getUTCMonth()+1).padStart(2,\"0\")}-${String(x.getUTCDate()).padStart(2,\"0\")}`};\nasync function api(url:string,init?:RequestInit){const headers=new Headers(init?.headers);const sid=localStorage.getItem(\"ec_session\");if(sid)headers.set(\"X-Session-ID\",sid);const r=await fetch(url,{...init,headers});const data=await r.json().catch(()=>({}));if(r.status===401){localStorage.removeItem(\"ec_user\");localStorage.removeItem(\"ec_session\");window.location.reload();}if(!r.ok)throw new Error(data.error||\"Request failed\");return data;}\nasync function downloadAdminFile(url:string,defaultName:string){const sid=localStorage.getItem(\"ec_session\");const r=await fetch(url,{headers:sid?{\"X-Session-ID\":sid}:undefined});if(r.status===401){localStorage.removeItem(\"ec_user\");localStorage.removeItem(\"ec_session\");window.location.reload();return}if(!r.ok)throw new Error(\"Could not create export\");const blob=await r.blob();const disposition=r.headers.get(\"Content-Disposition\")||\"\";const match=disposition.match(/filename=\\\\\\\"?([^\\\\\\\";]+)\\\\\\\"?/i);const name=match?.[1]||defaultName;const a=document.createElement(\"a\");a.href=URL.createObjectURL(blob);a.download=name;document.body.appendChild(a);a.click();a.remove();setTimeout(()=>URL.revokeObjectURL(a.href),1000);}\n\nfunction Login({onLogin}:{onLogin:(u:User)=>void}){\n const [identifier,setIdentifier]=useState(\"\"),[password,setPassword]=useState(\"\"),[showPassword,setShowPassword]=useState(false),[loading,setLoading]=useState(false),[err,setErr]=useState(\"\");\n const submit=async(e:React.FormEvent)=>{e.preventDefault();setErr(\"\");setLoading(true);try{const d=await api(\"/api/login\",{method:\"POST\",headers:{\"Content-Type\":\"application/json\"},body:JSON.stringify({identifier,password})});localStorage.setItem(\"ec_user\",JSON.stringify(d.user));localStorage.setItem(\"ec_session\",d.sessionId);onLogin(d.user)}catch(e){setErr(e instanceof Error?e.message:\"Login failed\")}finally{setLoading(false)}};\n return <div className=\"min-h-screen bg-[#0b1830] flex items-center justify-center p-4 md:p-6\"><div className=\"w-full max-w-[430px]\"><div className=\"text-center mb-7\"><div className=\"inline-flex h-20 min-w-20 px-4 rounded-2xl bg-white items-center justify-center shadow-2xl\"><img src=\"https://europecareers.in/wp-content/uploads/2026/02/Europecareers.in_-2__1_-removebg-preview-1-e1773039949263.png\" alt=\"Europe Careers\" className=\"max-h-12 max-w-[210px] object-contain\"/></div><h1 className=\"mt-5 text-2xl font-extrabold text-white tracking-tight\">Europe Careers CRM</h1><p className=\"mt-1.5 text-sm text-slate-400\">Secure Management System</p></div><form onSubmit={submit} className=\"rounded-3xl bg-white p-6 md:p-8 shadow-2xl border border-white/10 space-y-5\"><div><h2 className=\"text-xl font-extrabold text-[#102653]\">Welcome back</h2><p className=\"text-sm text-slate-500 mt-1\">Sign in to continue to your workspace.</p></div><div><label className=\"text-sm font-bold text-slate-700\">Email</label><input type=\"email\" autoComplete=\"username\" autoFocus className=\"mt-2 w-full rounded-xl border border-slate-200 px-4 py-3.5 outline-none transition focus:border-blue-500 focus:ring-4 focus:ring-blue-50\" value={identifier} onChange={e=>setIdentifier(e.target.value)} placeholder=\"name@europecareers.com\" required/></div><div><label className=\"text-sm font-bold text-slate-700\">Password</label><div className=\"relative mt-2\"><input type={showPassword?\"text\":\"password\"} autoComplete=\"current-password\" className=\"w-full rounded-xl border border-slate-200 px-4 py-3.5 pr-20 outline-none transition focus:border-blue-500 focus:ring-4 focus:ring-blue-50\" value={password} onChange={e=>setPassword(e.target.value)} placeholder=\"Enter your password\" required/><button type=\"button\" onClick={()=>setShowPassword(v=>!v)} className=\"absolute right-3 top-1/2 -translate-y-1/2 text-xs font-bold text-slate-500 hover:text-slate-900\">{showPassword?\"Hide\":\"Show\"}</button></div></div>{err&&<div role=\"alert\" className=\"rounded-xl border border-red-100 bg-red-50 px-4 py-3 text-sm font-medium text-red-700\">{err}</div>}<button disabled={loading} className=\"w-full rounded-xl bg-[#142b4b] hover:bg-[#0f223d] px-4 py-3.5 font-bold text-white shadow-sm transition disabled:opacity-60 disabled:cursor-not-allowed\">{loading?\"Signing in…\":\"Sign in\"}</button><div className=\"pt-1 text-center text-[11px] text-slate-400\">Authorised access only · Europe Careers CRM</div></form><div className=\"mt-5 text-center text-[11px] text-slate-500\">Your Career · Our Priority</div></div></div>\n}\n\nfunction Icon({name,size=18,strokeWidth=2}:{name:string,size?:number,strokeWidth?:number}){const p={width:size,height:size,viewBox:\"0 0 24 24\",fill:\"none\",stroke:\"currentColor\",strokeWidth,strokeLinecap:\"round\" as const,strokeLinejoin:\"round\" as const,ariaHidden:true};switch(name){case\"home\":return <svg {...p}><path d=\"m3 10 9-7 9 7\"/><path d=\"M5 9v11h14V9\"/><path d=\"M9 20v-6h6v6\"/></svg>;case\"users\":return <svg {...p}><path d=\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\"/><circle cx=\"9\" cy=\"7\" r=\"4\"/><path d=\"M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75\"/></svg>;case\"calendar\":return <svg {...p}><rect x=\"3\" y=\"4\" width=\"18\" height=\"17\" rx=\"3\"/><path d=\"M16 2v4M8 2v4M3 10h18\"/><path d=\"M8 14h.01M12 14h.01M16 14h.01M8 18h.01M12 18h.01\"/></svg>;case\"phone\":return <svg {...p}><path d=\"M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.12.9.33 1.78.62 2.63a2 2 0 0 1-.45 2.11L8 9.73a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 0 2.11-.45c.85.29 1.73.5 2.63.62A2 2 0 0 1 22 16.92z\"/></svg>;case\"whatsapp\":return <svg {...p}><path d=\"M20.5 3.5A10.1 10.1 0 0 0 12 1.1 10.9 10.9 0 0 0 2.8 16.9L1.5 22.5l5.8-1.3A10.9 10.9 0 1 0 20.5 3.5Z\"/><path d=\"M8.5 7.5c.2-.4.5-.5.9-.5h.7c.2 0 .4.1.5.4l.9 2.1c.1.2.1.5-.1.7l-.7.8c.7 1.2 1.6 2.1 2.8 2.8l.8-.7c.2-.2.5-.2.7-.1l2.1.9c.3.1.4.3.4.5v.7c0 .4-.2.7-.5.9-.5.3-1.1.4-1.7.2-3.6-1-6.6-4-7.6-7.6-.2-.6-.1-1.2.2-1.7Z\"/></svg>;case\"clock\":return <svg {...p}><circle cx=\"12\" cy=\"12\" r=\"9\"/><path d=\"M12 7v5l3 2\"/></svg>;case\"list\":return <svg {...p}><path d=\"M8 6h13M8 12h13M8 18h13\"/><path d=\"M3 6h.01M3 12h.01M3 18h.01\"/></svg>;case\"check\":return <svg {...p}><path d=\"m5 12 4 4L19 6\"/></svg>;case\"chart\":return <svg {...p}><path d=\"M4 20V10M10 20V4M16 20v-7M22 20H2\"/></svg>;case\"briefcase\":return <svg {...p}><rect x=\"3\" y=\"7\" width=\"18\" height=\"13\" rx=\"2\"/><path d=\"M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M3 12h18\"/></svg>;case\"globe\":return <svg {...p}><circle cx=\"12\" cy=\"12\" r=\"9\"/><path d=\"M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18\"/></svg>;case\"settings\":return <svg {...p}><circle cx=\"12\" cy=\"12\" r=\"3\"/><path d=\"M19.4 15a1.7 1.7 0 0 0 .34 1.88l.06.06-1.42 1.42-.06-.06a1.7 1.7 0 0 0-1.88-.34 1.7 1.7 0 0 0-1.03 1.56V20h-2v-.08a1.7 1.7 0 0 0-1.03-1.56 1.7 1.7 0 0 0-1.88.34l-.06.06-1.42-1.42.06-.06A1.7 1.7 0 0 0 9.4 15a1.7 1.7 0 0 0-1.56-1.03H7v-2h.84A1.7 1.7 0 0 0 9.4 11a1.7 1.7 0 0 0-.34-1.88L9 9.06l1.42-1.42.06.06A1.7 1.7 0 0 0 12.36 8.04 1.7 1.7 0 0 0 13.4 6.5V6h2v.5a1.7 1.7 0 0 0 1.03 1.56 1.7 1.7 0 0 0 1.88-.34l.06-.06 1.42 1.42-.06.06A1.7 1.7 0 0 0 19.4 11c.22.62.8 1.03 1.46 1.03H21v2h-.14A1.7 1.7 0 0 0 19.4 15z\"/></svg>;case\"bell\":return <svg {...p}><path d=\"M18 8a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9\"/><path d=\"M10 21h4\"/></svg>;case\"search\":return <svg {...p}><circle cx=\"11\" cy=\"11\" r=\"7\"/><path d=\"m20 20-4-4\"/></svg>;case\"file\":return <svg {...p}><path d=\"M6 3h8l4 4v14H6z\"/><path d=\"M14 3v5h5M9 13h6M9 17h6\"/></svg>;case\"headset\":return <svg {...p}><path d=\"M4 13a8 8 0 0 1 16 0\"/><path d=\"M4 13v4a2 2 0 0 0 2 2h2v-6H4zM20 13v4a2 2 0 0 1-2 2h-2v-6h4z\"/><path d=\"M16 19c0 1.1-.9 2-2 2h-2\"/></svg>;case\"spark\":return <svg {...p}><path d=\"m12 3 1.6 5.4L19 10l-5.4 1.6L12 17l-1.6-5.4L5 10l5.4-1.6L12 3z\"/><path d=\"m19 16 .7 2.3L22 19l-2.3.7L19 22l-.7-2.3L16 19l2.3-.7L19 16z\"/></svg>;default:return <svg {...p}><circle cx=\"12\" cy=\"12\" r=\"9\"/></svg>}}\n\nfunction Layout({user,onLogout,children,active,onNav}:{user:User,onLogout:()=>void,children:React.ReactNode,active:string,onNav:(x:string)=>void}){\n const nav=user.role===\"super_admin\"?[\"Dashboard\",\"Leads\",\"Follow-Ups\",\"Counsellors\",\"Reports\",\"Settings\"]:[\"Dashboard\",\"My Leads\",\"Follow-Ups\"];\n const [profileOpen,setProfileOpen]=useState(false);\n const navigate=(n:string)=>{setProfileOpen(false);onNav(n);window.scrollTo({top:0,behavior:\"smooth\"})};\n const initials=user.name.split(\" \").map(x=>x[0]).join(\"\").slice(0,2).toUpperCase();\n return <div className=\"min-h-screen flex bg-[#f4f8fd] text-slate-900\"><aside className=\"w-56 bg-[#142b4b] text-white hidden md:flex flex-col shadow-xl\"><div className=\"h-16 bg-white px-4 flex items-center gap-3\"><img src=\"https://europecareers.in/wp-content/uploads/2026/02/Europecareers.in_-2__1_-removebg-preview-1-e1773039949263.png\" alt=\"Europe Careers\" className=\"h-11 w-auto max-w-[150px] object-contain\"/><div className=\"h-8 w-px bg-slate-200\"/><div><div className=\"font-extrabold text-[#102653] leading-none\">CRM</div><div className=\"text-[9px] text-slate-500 mt-1\">Management System</div></div></div><nav className=\"p-3 space-y-1\">{nav.map(n=><button key={n} type=\"button\" onClick={()=>navigate(n)} aria-current={active===n?\"page\":undefined} className={`w-full rounded-lg px-3 py-3 text-left text-sm font-semibold flex items-center gap-3 ${active===n?\"bg-blue-600 text-white shadow-md\":\"text-slate-200 hover:bg-white/10\"}`}><span className=\"w-6 h-6 flex items-center justify-center\"><Icon name={n===\"Dashboard\"?\"home\":n===\"Leads\"||n===\"My Leads\"?\"users\":n===\"Follow-Ups\"?\"calendar\":n===\"Counsellors\"?\"users\":n===\"Reports\"?\"chart\":\"settings\"} size={17}/></span>{n}</button>)}</nav><div className=\"mt-auto p-3\"><button onClick={onLogout} className=\"w-full rounded-xl bg-white/10 hover:bg-red-500/20 border border-white/10 px-4 py-3 text-left text-sm font-semibold text-white transition flex items-center gap-3\"><span className=\"text-lg\">↪</span><span>Logout</span></button></div></aside><div className=\"flex-1 min-w-0\"><header className=\"h-[72px] bg-white border-b border-slate-200 flex items-center gap-4 px-4 md:px-7 shadow-[0_1px_3px_rgba(15,23,42,0.04)]\"><button className=\"md:hidden h-10 w-10 rounded-xl border border-slate-200 text-slate-600 hover:bg-slate-50\" onClick={()=>onNav(\"Dashboard\")}>☰</button><div className=\"flex-1 max-w-2xl\"><div className=\"relative\"><span className=\"absolute left-4 top-1/2 -translate-y-1/2 text-slate-400\"><Icon name=\"search\" size={18}/></span><input onKeyDown={e=>{if(e.key==='Enter'&&e.currentTarget.value.trim()){localStorage.setItem('crm_global_search',e.currentTarget.value.trim());onNav(user.role==='super_admin'?'Leads':'My Leads')}}} defaultValue={localStorage.getItem('crm_global_search')||''} className=\"h-11 w-full rounded-xl bg-slate-50 border border-slate-200 pl-11 pr-4 text-sm text-slate-700 placeholder:text-slate-400 outline-none transition focus:bg-white focus:border-blue-500 focus:ring-4 focus:ring-blue-50\" placeholder=\"Search by candidate, EC ID, phone or email...\"/></div></div><div className=\"ml-auto flex items-center gap-2 sm:gap-3\"><button aria-label=\"Notifications\" title=\"Notifications\" className=\"h-10 w-10 rounded-xl border border-slate-200 bg-white text-slate-600 flex items-center justify-center hover:bg-slate-50 hover:border-slate-300 transition\"><Icon name=\"bell\" size={18}/></button><div className=\"h-8 w-px bg-slate-200 hidden sm:block\"/><div className=\"relative\"><button onClick={()=>setProfileOpen(v=>!v)} className=\"flex items-center gap-3 rounded-xl px-2 py-1.5 hover:bg-slate-50 transition\"><div className=\"h-10 w-10 rounded-xl bg-[#142b4b] text-white flex items-center justify-center text-xs font-extrabold shadow-sm\">{initials}</div><div className=\"hidden sm:block text-left leading-tight\"><div className=\"text-sm font-bold text-slate-900\">{user.name}</div><div className=\"text-[11px] text-slate-500 mt-0.5\">{user.role===\"super_admin\"?\"Super Admin\":\"Counsellor\"}</div></div><span className={`hidden sm:block text-slate-400 text-sm transition-transform ${profileOpen?\"rotate-180\":\"\"}`}>⌄</span></button>{profileOpen&&<div className=\"absolute right-0 top-14 z-40 w-64 rounded-2xl border border-slate-200 bg-white p-2 shadow-xl\"><div className=\"px-3 py-3 border-b border-slate-100\"><div className=\"font-bold text-slate-900\">{user.name}</div><div className=\"text-xs text-slate-500 mt-1\">{user.role===\"super_admin\"?\"Super Admin\":\"Counsellor\"}</div></div><button onClick={()=>{setProfileOpen(false);onLogout()}} className=\"mt-2 w-full rounded-xl px-3 py-2.5 text-left text-sm font-semibold text-red-600 hover:bg-red-50\">↪ Sign out</button></div>}</div></div></header><main className=\"p-4 md:p-5 lg:p-6 max-w-[1600px]\">{children}</main></div></div>\n}\n\nfunction Stat({label,value,accent=false,icon=\"circle\",trend=\"\",sub=\"Live\"}:{label:string,value:any,accent?:boolean,icon?:string,trend?:string,sub?:string}){return <div className={`text-left w-full rounded-2xl bg-white border p-4 shadow-sm hover:shadow-md transition ${accent?\"border-red-100 bg-red-50/30\":\"border-slate-200\"}`}><div className=\"flex items-center gap-3\"><div className={`h-11 w-11 shrink-0 rounded-xl flex items-center justify-center ${accent?\"bg-red-100 text-red-600\":\"bg-blue-50 text-blue-600\"}`}><Icon name={icon} size={20}/></div><div className=\"min-w-0\"><div className=\"text-[12px] text-slate-600 font-medium truncate\">{label}</div><div className=\"text-2xl font-extrabold text-[#102653] mt-0.5 leading-none\">{value??0}</div>{trend&&<div className={`text-xs font-semibold mt-1 ${accent?\"text-red-600\":\"text-emerald-600\"}`}>{trend}</div>}<div className=\"text-[10px] text-slate-400 mt-1\">{sub}</div></div></div></div>}\nconst terminalStatuses=[\"Converted\",\"Lost\",\"Not Interested\",\"Irrelevant\"];\nfunction followupStatus(l:any){\n if(terminalStatuses.includes(String(l?.status||\"\"))) return null;\n const next=String(l?.next_followup||\"\").trim();\n if(!next||next===\"No follow-up\") return \"MISSING\";\n const datePart=next.match(/\\d{4}-\\d{2}-\\d{2}/)?.[0]||next.slice(0,10);\n const timePart=next.match(/\\b\\d{1,2}:\\d{2}(?:\\s?[AP]M)?\\b/i)?.[0]||\"23:59\";\n const isoTime=/AM|PM/i.test(timePart)?(()=>{const m=timePart.match(/(\\d{1,2}):(\\d{2})\\s*([AP]M)/i);if(!m)return \"23:59\";let h=Number(m[1])%12;if(m[3].toUpperCase()===\"PM\")h+=12;return `${pad(h)}:${m[2]}`})():timePart;\n const now=new Date(); const todayIso=today();\n if(datePart<todayIso) return \"OVERDUE\";\n if(datePart===todayIso){const nowIst=new Intl.DateTimeFormat(\"en-GB\",{timeZone:\"Asia/Kolkata\",hour:\"2-digit\",minute:\"2-digit\",hour12:false}).format(now);return isoTime<=nowIst?\"OVERDUE\":\"TODAY\";}\n return \"UPCOMING\";\n}\nfunction FollowupBadge({lead}:{lead:any}){const s=followupStatus(lead);if(!s)return null;const cfg:any={OVERDUE:[\"🔴 Overdue\",\"bg-red-50 text-red-700 border-red-100\"],TODAY:[\"🟠 Due Today\",\"bg-orange-50 text-orange-700 border-orange-100\"],UPCOMING:[\"🟢 Upcoming\",\"bg-emerald-50 text-emerald-700 border-emerald-100\"],MISSING:[\"⚠️ Missing\",\"bg-amber-50 text-amber-700 border-amber-100\"]};return <span className={`inline-flex rounded-full border px-2.5 py-1 text-[11px] font-bold whitespace-nowrap ${cfg[s][1]}`}>{cfg[s][0]}</span>}\nfunction Badge({text}:{text:string}){const cls=text===\"Converted\"?\"bg-emerald-50 text-emerald-700\":text===\"OVERDUE\"?\"bg-red-50 text-red-700\":\"bg-slate-100 text-slate-700\";return <span className={`rounded-full px-2.5 py-1 text-xs font-semibold ${cls}`}>{text}</span>}\nfunction ProgramBadge({text}:{text?:string}){const p=String(text||\"\").trim();if(!p)return <span className=\"text-slate-400\">—</span>;const cfg:any={\"Ausbildung\":\"bg-blue-50 text-blue-700 border-blue-100\",\"Nursing / Pflege\":\"bg-emerald-50 text-emerald-700 border-emerald-100\",\"Doctor Placement\":\"bg-violet-50 text-violet-700 border-violet-100\",\"Handwerker\":\"bg-amber-50 text-amber-700 border-amber-100\",\"MBBS in Europe\":\"bg-rose-50 text-rose-700 border-rose-100\",\"MBA\":\"bg-cyan-50 text-cyan-700 border-cyan-100\",\"BTech\":\"bg-indigo-50 text-indigo-700 border-indigo-100\",\"Study Abroad\":\"bg-fuchsia-50 text-fuchsia-700 border-fuchsia-100\",\"Job Placement\":\"bg-orange-50 text-orange-700 border-orange-100\"};const cls=cfg[p]||\"bg-slate-100 text-slate-700 border-slate-200\";return <span className={`inline-flex items-center rounded-lg border px-2.5 py-1.5 text-xs font-bold whitespace-nowrap ${cls}`}>{p}</span>}\n\nfunction RecentLeads(){const [items,setItems]=useState<any[]>([]);useEffect(()=>{api('/api/leads').then(d=>setItems((d.items||[]).slice(0,6))).catch(()=>{})},[]);return <>{items.map(l=><tr key={l.id} className=\"border-t\"><td className=\"p-3 font-semibold whitespace-nowrap\">{l.candidate_name}</td><td className=\"p-3 whitespace-nowrap\">{l.ec_id}</td><td className=\"p-3 whitespace-nowrap\"><ProgramBadge text={l.program}/></td><td className=\"p-3 whitespace-nowrap\">{l.source||'CRM'}</td><td className=\"p-3\"><Badge text={l.status}/></td><td className=\"p-3 whitespace-nowrap\">{l.created_at?new Date(l.created_at).toLocaleString('en-IN',{dateStyle:'medium',timeStyle:'short',timeZone:'Asia/Kolkata'}):'—'}</td></tr>)}</>}\n\nfunction Dashboard({user,onOpenFollow}:{user:User,onOpenFollow:(f:Follow)=>void}){const [d,setD]=useState<any>(null),[todayF,setTodayF]=useState<Follow[]>([]),[overdue,setOverdue]=useState<Follow[]>([]); useEffect(()=>{Promise.all([api(\"/api/dashboard\"),api(\"/api/follow-ups?mode=today\"),api(\"/api/follow-ups?mode=overdue\")]).then(([a,b,c])=>{setD(a);setTodayF(b.items||[]);setOverdue(c.items||[])}).catch(()=>{})},[]); if(!d)return <div className=\"animate-pulse text-slate-500\">Loading dashboard…</div>; const c=d.counts||{},pipe=d.pipeline||[],perf=d.performance||[],pipeTotal=Math.max(1,pipe.reduce((n:any,x:any)=>n+(Number(x.count)||0),0)); return <div className=\"space-y-6\"><div className=\"flex flex-col lg:flex-row lg:items-end lg:justify-between gap-4\"><div><h2 className=\"text-3xl font-bold tracking-tight\">Welcome Back, {user.name}</h2><p className=\"text-slate-500 mt-1\">Here’s what’s happening with your Europe Careers CRM today.</p></div><div className=\"flex items-center gap-4\"><div className=\"hidden sm:block text-right text-xs text-slate-500\">{new Intl.DateTimeFormat(\"en-IN\",{dateStyle:\"full\",timeZone:\"Asia/Kolkata\"}).format(new Date())}<br/><b className=\"text-slate-700\">{new Intl.DateTimeFormat(\"en-IN\",{timeStyle:\"short\",timeZone:\"Asia/Kolkata\"}).format(new Date())} IST</b></div><button onClick={()=>window.dispatchEvent(new CustomEvent(\"open-add-lead\"))} className=\"rounded-xl bg-blue-600 text-white px-5 py-3 font-semibold shadow-sm hover:bg-blue-700\">＋ Add New Lead</button></div></div><div className=\"grid grid-cols-2 xl:grid-cols-7 gap-3\"><Stat label=\"Total Leads\" value={c.total} icon=\"👥\" sub=\"All time\"/><Stat label=\"New Leads\" value={c.new_leads} icon=\"♟\" sub=\"Created Today\"/><Stat label=\"Today's Follow-Ups\" value={c.today} icon=\"☎\" sub=\"Due Today\"/><Stat label=\"Overdue Follow-Ups\" value={c.overdue} accent icon=\"◷\" sub=\"Past Due\"/><Stat label=\"Pending Follow-Ups\" value={c.pending} icon=\"☷\" sub=\"Upcoming\"/><Stat label=\"Completed Follow-Ups\" value={c.completed} icon=\"✓\" sub=\"Total\"/><Stat label=\"Converted Leads\" value={c.converted} icon=\"▥\" sub=\"Success\"/></div><div className=\"grid xl:grid-cols-3 gap-5\"><section className=\"rounded-2xl bg-white border border-slate-200 shadow-sm overflow-hidden\"><div className=\"p-4 border-b flex items-center justify-between\"><h3 className=\"font-bold\">Today’s Follow-Ups ({todayF.length})</h3><span className=\"text-sm text-blue-600 font-semibold\">View All</span></div><div className=\"p-3\">{todayF.slice(0,6).map(f=><div key={f.id} className=\"grid grid-cols-[1fr_auto_auto] gap-3 items-center px-2 py-3 border-b last:border-0 text-sm\"><div><b>{f.candidate_name}</b><div className=\"text-xs text-slate-400\">{f.ec_id} · {f.program}</div></div><span className=\"text-xs text-slate-500\">{f.scheduled_time}</span><button onClick={()=>onOpenFollow(f)} className=\"h-8 w-8 rounded-lg border text-blue-600\">☎</button></div>)}{!todayF.length&&<div className=\"py-10 text-center text-slate-400\">No calls due today.</div>}</div></section><section className=\"rounded-2xl bg-white border border-slate-200 shadow-sm overflow-hidden\"><div className=\"p-4 border-b flex items-center justify-between\"><h3 className=\"font-bold\">Overdue Follow-Ups ({overdue.length})</h3><span className=\"text-sm text-blue-600 font-semibold\">View All</span></div><div className=\"p-3\">{overdue.slice(0,6).map(f=><div key={f.id} className=\"grid grid-cols-[1fr_auto_auto] gap-3 items-center px-2 py-3 border-b last:border-0 text-sm\"><div><b>{f.candidate_name}</b><div className=\"text-xs text-slate-400\">{f.ec_id} · {f.program}</div></div><Badge text=\"OVERDUE\"/><button onClick={()=>onOpenFollow(f)} className=\"h-8 w-8 rounded-lg border text-blue-600\">☎</button></div>)}{!overdue.length&&<div className=\"py-10 text-center text-slate-400\">No overdue calls.</div>}</div></section><section className=\"rounded-2xl bg-white border border-slate-200 shadow-sm overflow-hidden\"><div className=\"p-4 border-b flex items-center justify-between\"><h3 className=\"font-bold\">Upcoming Follow-Ups</h3><span className=\"text-sm text-blue-600 font-semibold\">View All</span></div><div className=\"p-3\">{(d.upcoming||[]).slice(0,6).map((f:any)=><div key={f.id} className=\"flex justify-between items-center px-2 py-3 border-b last:border-0 text-sm\"><div><b>{f.candidate_name}</b><div className=\"text-xs text-slate-400\">{f.ec_id} · {f.program}</div></div><span className=\"text-xs font-semibold text-slate-600\">{f.scheduled_date} · {f.scheduled_time}</span></div>)}{!(d.upcoming||[]).length&&<div className=\"py-10 text-center text-slate-400\">Use Follow-Ups → Upcoming.</div>}</div></section></div><div className=\"grid lg:grid-cols-3 gap-5\"><section className=\"rounded-2xl bg-white border border-slate-200 shadow-sm p-5\"><div className=\"flex justify-between mb-5\"><h3 className=\"font-bold\">Lead Pipeline</h3><span className=\"text-sm text-blue-600\">View Details</span></div><div className=\"flex items-center gap-5\"><div className=\"relative h-40 w-40 shrink-0 rounded-full\" style={{background:`conic-gradient(${pipe.slice(0,6).map((x:any,i:number)=>`${[\"#2878e8\",\"#27b98b\",\"#f5bd4f\",\"#ef6b7a\",\"#8b95a1\",\"#8b5cf6\"][i]} ${(pipe.slice(0,i).reduce((n:any,z:any)=>n+(Number(z.count)||0),0)/pipeTotal)*360}deg ${(pipe.slice(0,i+1).reduce((n:any,z:any)=>n+(Number(z.count)||0),0)/pipeTotal)*360}deg`).join(',')})`}}><div className=\"absolute inset-7 rounded-full bg-white flex flex-col items-center justify-center\"><b className=\"text-2xl\">{c.total||0}</b><span className=\"text-xs text-slate-500\">Total Leads</span></div></div><div className=\"space-y-2 text-xs flex-1\">{pipe.slice(0,6).map((x:any,i:number)=><div key={x.status} className=\"flex justify-between items-center gap-3\"><span className=\"flex items-center gap-2\"><i className={`h-2.5 w-2.5 rounded-full ${[\"bg-blue-500\",\"bg-emerald-500\",\"bg-amber-400\",\"bg-rose-400\",\"bg-slate-400\",\"bg-violet-500\"][i]}`}></i>{x.status}</span><b>{x.count}</b></div>)}</div></div></section><section className=\"rounded-2xl bg-white border border-slate-200 shadow-sm p-5\"><div className=\"flex justify-between mb-5\"><h3 className=\"font-bold\">Leads by Program</h3><span className=\"text-sm text-blue-600\">View Details</span></div><div className=\"h-52 flex items-end gap-3\">{(d.programs||[]).slice(0,7).map((x:any,i:number)=><div key={x.label} className=\"flex-1 flex flex-col items-center gap-2\"><div className=\"text-xs font-semibold\">{x.count}</div><div className=\"w-full rounded-t-lg bg-blue-500\" style={{height:`${Math.max(12,Number(x.count)/Math.max(1,...(d.programs||[]).map((z:any)=>Number(z.count)||0))*145)}px`}}/><span className=\"text-[10px] text-slate-500 text-center truncate w-full\">{x.label}</span></div>)}</div></section><section className=\"rounded-2xl bg-white border border-slate-200 shadow-sm p-5\"><div className=\"flex justify-between mb-5\"><h3 className=\"font-bold\">Leads by Country</h3><span className=\"text-sm text-blue-600\">View Details</span></div><div className=\"space-y-3\">{(d.countries||[]).slice(0,6).map((x:any)=><div key={x.label}><div className=\"flex justify-between text-xs mb-1\"><span>{x.label}</span><b>{x.count}</b></div><div className=\"h-2 rounded-full bg-slate-100\"><div className=\"h-2 rounded-full bg-blue-500\" style={{width:`${Math.max(5,Number(x.count)/Math.max(1,...(d.countries||[]).map((z:any)=>Number(z.count)||0))*100)}%`}}/></div></div>)}</div></section></div><div className=\"grid lg:grid-cols-5 gap-5\"><section className=\"lg:col-span-2 rounded-2xl bg-white border border-slate-200 shadow-sm p-5\"><div className=\"flex justify-between mb-4\"><h3 className=\"font-bold\">Counsellor Performance</h3><span className=\"text-sm text-blue-600\">View All</span></div><div className=\"overflow-auto\"><table className=\"w-full text-sm\"><thead className=\"bg-slate-50\"><tr><th className=\"p-2 text-left\">Counsellor</th><th className=\"p-2\">Due</th><th className=\"p-2\">Done</th><th className=\"p-2\">Missed</th><th className=\"p-2\">Won</th></tr></thead><tbody>{perf.map((p:any)=><tr key={p.id} className=\"border-t\"><td className=\"p-2 font-semibold\">{p.name}</td><td className=\"p-2 text-center\">{p.due}</td><td className=\"p-2 text-center text-emerald-600\">{p.calls_completed}</td><td className=\"p-2 text-center text-red-600\">{p.overdue}</td><td className=\"p-2 text-center text-emerald-600\">{p.conversions}</td></tr>)}</tbody></table></div></section><section className=\"lg:col-span-3 rounded-2xl bg-white border border-slate-200 shadow-sm p-5\"><div className=\"flex justify-between mb-4\"><h3 className=\"font-bold\">Recent Leads</h3><span className=\"text-sm text-blue-600\">View All</span></div><div className=\"rounded-xl border border-slate-100 overflow-auto\"><table className=\"w-full text-sm\"><thead className=\"bg-slate-50\"><tr>{[\"Name\",\"EC ID\",\"Program\",\"Source\",\"Status\",\"Created\"].map(h=><th key={h} className=\"p-3 text-left whitespace-nowrap\">{h}</th>)}</tr></thead><tbody><RecentLeads/></tbody></table></div></section></div></div>}\n\nfunction LeadModal({lead,onClose,onSaved,counsellors,mode=\"edit\",onFollow,user}:{lead:Partial<Lead>|null,onClose:()=>void,onSaved:()=>void,counsellors:User[],mode?:\"edit\"|\"add\",onFollow?:(l:Lead)=>void,user:User}){\n const programs=[\"Ausbildung\",\"Nursing / Pflege\",\"Doctor Placement\",\"Handwerker\",\"MBBS in Europe\",\"MBA\",\"BTech\",\"Study Abroad\",\"Job Placement\"];\n const countries=[\"Germany\",\"Italy\",\"Poland\",\"Hungary\",\"Romania\",\"Bulgaria\",\"Austria\",\"Netherlands\",\"France\",\"Spain\",\"Other Europe\"];\n const makeEcId=()=>`EC-${crypto.randomUUID().slice(0,6).toUpperCase()}`; const [form,setForm]=useState<any>({candidate_name:\"\",ec_id:mode===\"add\"?makeEcId():\"\",phone:mode===\"add\"?\"+91\":\"\",email:\"\",country:\"Germany\",program:\"\",lead_type:\"\",current_city:\"\",qualification:\"\",experience:\"\",language_level:\"\",preferred_country:\"Germany\",source:\"CRM\",counsellor_id:mode===\"add\"&&user.role!==\"super_admin\"?String(user.id):\"\",status:\"New\",first_followup_date:\"\",first_followup_time:\"\",first_followup_note:\"\",...lead}),[err,setErr]=useState(\"\"),[history,setHistory]=useState<any[]>([]); const creationDisplay=form.created_at?new Intl.DateTimeFormat(\"en-GB\",{timeZone:\"Asia/Kolkata\",day:\"2-digit\",month:\"2-digit\",year:\"numeric\",hour:\"2-digit\",minute:\"2-digit\",hour12:true}).format(new Date(form.created_at))+\" IST\":new Intl.DateTimeFormat(\"en-GB\",{timeZone:\"Asia/Kolkata\",day:\"2-digit\",month:\"2-digit\",year:\"numeric\",hour:\"2-digit\",minute:\"2-digit\",hour12:true}).format(new Date())+\" IST\";\n useEffect(()=>{if(mode===\"edit\"&&lead?.id)api(`/api/leads/${lead.id}`).then(d=>setHistory(d.history||[])).catch(()=>{})},[mode,lead?.id]);\n const set=(k:string,v:string)=>setForm((x:any)=>({...x,[k]:v}));\n const save=async()=>{setErr(\"\");const payload={...form,candidate_name:String(form.candidate_name||\"\").trim(),phone:String(form.phone||\"\").trim()};if(!payload.candidate_name||!payload.phone||payload.phone.trim()===\"+91\"){setErr(\"Candidate Name and a valid phone number are required\");return}if(mode===\"add\"&&!terminalStatuses.includes(String(payload.status||\"\"))&&(!payload.counsellor_id||!payload.first_followup_date||!payload.first_followup_time||!String(payload.first_followup_note||\"\").trim())){setErr(\"Counsellor, Next Follow-Up Date/Time and What Happened Today are required for every active lead\");return}try{await api(mode===\"add\"?\"/api/leads\":`/api/leads/${lead?.id}`,{method:mode===\"add\"?\"POST\":\"PUT\",headers:{\"Content-Type\":\"application/json\"},body:JSON.stringify(payload)});onSaved()}catch(e){setErr(e instanceof Error?e.message:\"Could not save\")}};\n const field=(k:string,l:string,placeholder=\"\")=><div><label className=\"text-xs font-semibold text-slate-600\">{l}{[\"candidate_name\",\"phone\"].includes(k)&&<span className=\"text-red-600\"> *</span>}</label><input required={[\"candidate_name\",\"phone\"].includes(k)} value={form[k]||\"\"} placeholder={placeholder} onChange={e=>set(k,e.target.value)} className=\"mt-1 w-full rounded-xl border border-slate-200 bg-white px-3 py-2.5 outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-100\"/></div>;\n const select=(k:string,l:string,options:string[],empty=\"Select\")=><div><label className=\"text-xs font-semibold text-slate-600\">{l}</label><select value={form[k]||\"\"} onChange={e=>set(k,e.target.value)} className=\"mt-1 w-full rounded-xl border border-slate-200 bg-white px-3 py-2.5 outline-none focus:border-blue-500\"><option value=\"\">{empty}</option>{options.map(x=><option key={x}>{x}</option>)}</select></div>;\n return <div className=\"fixed inset-0 z-50 bg-slate-100 overflow-auto\"><div className=\"min-h-screen bg-slate-50\"><div className=\"sticky top-0 z-10 bg-white border-b border-slate-200 px-5 md:px-8 py-4 flex items-center justify-between\"><div className=\"flex items-center gap-3\"><button onClick={onClose} className=\"h-10 w-10 rounded-xl border border-slate-200 text-xl\">←</button><div><h3 className=\"text-xl md:text-2xl font-bold text-slate-900\">{mode===\"add\"?\"Add New Lead\":\"Edit Lead\"}</h3><p className=\"text-sm text-slate-500\">Update the record and keep the activity history current.</p></div></div><div className=\"flex gap-2\"><button onClick={onClose} className=\"hidden md:block rounded-xl border border-slate-200 bg-white px-4 py-2.5 font-semibold\">Close</button><button onClick={save} disabled={mode===\"add\"&&(String(form.phone||\"\").trim()===\"\"||String(form.phone||\"\").trim()===\"+91\"||(!terminalStatuses.includes(String(form.status||\"\"))&&(!form.counsellor_id||!form.first_followup_date||!form.first_followup_time||!String(form.first_followup_note||\"\").trim())))} className=\"rounded-xl bg-blue-600 text-white px-5 py-2.5 font-semibold shadow-sm disabled:opacity-40 disabled:cursor-not-allowed\">{mode===\"add\"?\"Create Lead\":\"Save Changes\"}</button></div></div><div className=\"max-w-6xl mx-auto p-5 md:p-8 space-y-5\"><section className=\"rounded-2xl bg-white border border-slate-200 shadow-sm p-5 md:p-6\"><div className=\"flex items-center justify-between border-b border-slate-100 pb-4 mb-5\"><div className=\"flex items-center gap-3\"><div className=\"h-10 w-10 rounded-xl bg-blue-600 text-white flex items-center justify-center\">👤</div><div><h4 className=\"font-bold text-lg\">Lead Information</h4><p className=\"text-sm text-slate-500\">Candidate basic details and preferences</p></div></div>{mode===\"edit\"&&lead?.ec_id&&<span className=\"rounded-lg bg-blue-50 text-blue-700 px-3 py-2 text-sm font-bold\">EC ID: {lead.ec_id}</span>}</div><div className=\"grid md:grid-cols-3 gap-4\">{field(\"candidate_name\",\"Candidate Name\",\"Candidate full name\")}<div><label className=\"text-xs font-semibold text-slate-600\">EC ID</label><input type=\"text\" value={form.ec_id||\"\"} readOnly aria-readonly=\"true\" className=\"mt-1 w-full rounded-xl border border-slate-200 bg-slate-50 text-slate-600 px-3 py-2.5 font-semibold cursor-not-allowed select-all\"/><div className=\"text-[10px] text-slate-400 mt-1\">Auto-generated · cannot be edited</div></div>{field(\"phone\",\"Phone\",\"+91…\")}{field(\"email\",\"Email\",\"candidate@email.com\")}{select(\"country\",\"Interested Country\",countries)}{select(\"program\",\"Interested Program\",programs)}{select(\"lead_type\",\"Lead Type\",[\"Job\",\"Study\"])}{select(\"source\",\"Lead Source\",[\"Website\",\"WhatsApp\",\"Walk-in\",\"Referral\",\"Facebook\",\"Instagram\",\"Other\"])}{user.role===\"super_admin\"&&<div><label className=\"text-xs font-semibold text-slate-600\">Counsellor</label>{(lead as any)?.counsellor_name&&<div className=\"text-[10px] text-slate-400 mt-1\">Assigned counsellor: {(lead as any).counsellor_name}</div>} {mode===\"add\"?<select value={form.counsellor_id||\"\"} onChange={e=>set(\"counsellor_id\",e.target.value)} className=\"mt-1 w-full rounded-xl border border-slate-200 bg-white px-3 py-2.5 outline-none focus:border-blue-500\"><option value=\"\">Unassigned</option>{counsellors.map(c=><option key={c.id} value={c.id}>{c.name}</option>)}</select>:<div className=\"mt-1 w-full rounded-xl border border-slate-200 bg-slate-50 px-3 py-2.5 font-semibold text-slate-600\">{(lead as any)?.counsellor_name||\"Unassigned\"}<span className=\"float-right text-xs text-slate-400\">🔒 Locked</span></div>}</div>}{select(\"status\",\"Lead Status\",statuses,\"Select status\")}{mode===\"add\"&&!terminalStatuses.includes(String(form.status||\"\"))&&<div className=\"md:col-span-3 rounded-2xl border border-blue-100 bg-blue-50/60 p-4\"><div className=\"flex items-center gap-2\"><span className=\"h-8 w-8 rounded-lg bg-blue-600 text-white flex items-center justify-center\">☎</span><div><div className=\"font-extrabold text-[#102653]\">Next Follow-Up <span className=\"text-red-600\">*</span></div><div className=\"text-xs text-slate-500 mt-0.5\">Today is recorded as the first follow-up. Schedule the next call before creation · maximum 15 days ahead.</div></div></div><div className=\"grid md:grid-cols-2 gap-3 mt-3\"><div><label className=\"text-xs font-semibold text-slate-600\">Next Follow-Up Date *</label><input type=\"date\" min={today()} max={maxFollowupDate()} value={form.first_followup_date||\"\"} onChange={e=>set(\"first_followup_date\",e.target.value)} className=\"mt-1 w-full rounded-xl border border-slate-200 bg-white px-3 py-2.5 outline-none focus:border-blue-500\"/></div><div><label className=\"text-xs font-semibold text-slate-600\">Next Follow-Up Time *</label><select value={form.first_followup_time||\"\"} onChange={e=>set(\"first_followup_time\",e.target.value)} className=\"mt-1 w-full rounded-xl border border-slate-200 bg-white px-3 py-2.5 outline-none focus:border-blue-500\"><option value=\"\">Select time</option>{Array.from({length:19},(_,i)=>{const m=540+i*30,h=Math.floor(m/60),mm=m%60,v=`${String(h).padStart(2,\"0\")}:${String(mm).padStart(2,\"0\")}`,label=new Date(2000,0,1,h,mm).toLocaleTimeString(\"en-IN\",{hour:\"2-digit\",minute:\"2-digit\",hour12:true});return <option key={v} value={v}>{label}</option>})}</select><div className=\"text-[10px] text-slate-400 mt-1\">09:00 AM – 06:00 PM IST · 30 min slots</div></div></div><div className=\"mt-3\"><label className=\"text-xs font-semibold text-slate-600\">What Happened Today? <span className=\"text-red-600\">*</span></label><textarea value={form.first_followup_note||\"\"} onChange={e=>set(\"first_followup_note\",e.target.value)} rows={3} placeholder=\"Record what happened on today's first call…\" className=\"mt-1 w-full rounded-xl border border-slate-200 bg-white px-3 py-2.5 outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-100 resize-none\"/><div className=\"text-[10px] text-slate-400 mt-1\">This note will be saved as today's first follow-up history and shown to the counsellor.</div></div></div>}{select(\"lead_temperature\",\"Lead Temperature\",[\"Hot\",\"Warm\",\"Cold\"])}{field(\"current_city\",\"Current City\",\"Enter current city\")}<div><label className=\"text-xs font-semibold text-slate-600\">First Follow-Up Date</label><input type=\"text\" value={creationDisplay} readOnly className=\"mt-1 w-full rounded-xl border border-slate-200 bg-slate-50 text-slate-700 px-3 py-2.5 font-medium cursor-not-allowed\"/><div className=\"text-[10px] text-slate-400 mt-1\">Auto-filled in IST · cannot be edited</div></div>{field(\"qualification\",\"Qualification\",\"BSc Nursing / MBBS / BTech…\")}{field(\"experience\",\"Work Experience\",\"Fresher / 2 years…\")}{select(\"preferred_country\",\"Preferred Country\",countries)}</div><div className=\"mt-4\"><label className=\"text-xs font-semibold text-slate-600\">Additional Notes</label><textarea value={form.notes||\"\"} onChange={e=>set(\"notes\",e.target.value)} rows={3} placeholder=\"Enter any additional notes about the candidate…\" className=\"mt-1 w-full rounded-xl border border-slate-200 px-3 py-2.5\"/></div>{err&&<div className=\"mt-4 bg-red-50 text-red-700 rounded-xl p-3 text-sm\">{err}</div>}</section>{mode===\"edit\"&&<section className=\"rounded-2xl bg-white border border-slate-200 shadow-sm p-5 md:p-6\"><div className=\"flex items-center justify-between border-b border-slate-100 pb-4 mb-4\"><div className=\"flex items-center gap-3\"><div className=\"h-10 w-10 rounded-xl bg-blue-600 text-white flex items-center justify-center\">◷</div><div><h4 className=\"font-bold text-lg\">Follow-Up History</h4><p className=\"text-sm text-slate-500\">Complete history of calls and follow-ups with this candidate</p></div></div>{lead&&lead.id&&onFollow&&<button onClick={()=>onFollow(lead as Lead)} className=\"rounded-xl bg-blue-600 text-white px-4 py-2.5 font-semibold\">＋ Add Follow-Up</button>}</div><div className=\"overflow-x-auto\"><table className=\"w-full text-sm min-w-[850px]\"><thead className=\"bg-slate-50 text-slate-600\"><tr>{[\"#\",\"Status\",\"Called On\",\"Next Follow-Up\",\"Notes\",\"Actions\"].map(h=><th key={h} className=\"px-3 py-3 text-left font-semibold\">{h}</th>)}</tr></thead><tbody>{history.map((f:any,i:number)=>{const completed=f.status===\"completed\";return <tr key={f.id} className=\"border-t border-slate-100\"><td className=\"px-3 py-3\">{i+1}</td><td className=\"px-3 py-3\"><Badge text={completed?\"Completed\":f.status===\"pending\"?\"Scheduled\":\"Not yet\"}/></td><td className=\"px-3 py-3 whitespace-nowrap\">{f.completed_at?new Date(f.completed_at).toLocaleString(\"en-IN\",{dateStyle:\"medium\",timeStyle:\"short\",timeZone:\"Asia/Kolkata\"}):\"Not yet\"}</td><td className=\"px-3 py-3 whitespace-nowrap\"><span className={`rounded-lg px-2.5 py-1.5 font-semibold ${f.next_followup_date?\"bg-amber-50 text-amber-700\":\"bg-slate-100 text-slate-500\"}`}>{f.next_followup_date?`${f.next_followup_date}, ${f.next_followup_time||\"\"}`:\"Not scheduled\"}</span></td><td className=\"px-3 py-3 max-w-xs truncate\">{f.note||\"—\"}</td><td className=\"px-3 py-3\"><div className=\"flex gap-1\"><button onClick={()=>onFollow?.(lead as Lead)} title=\"Add follow-up\" className=\"h-9 w-9 rounded-lg border border-slate-200\">＋</button>{f.phone&&<a href={`https://wa.me/${String(f.phone).replace(/\\D/g,\"\")}`} target=\"_blank\" className=\"h-9 w-9 rounded-lg border border-green-200 bg-green-50 text-green-600 flex items-center justify-center\">◉</a>}</div></td></tr>})}</tbody></table>{!history.length&&<div className=\"py-10 text-center text-slate-400\">No follow-up history yet.</div>}</div><div className=\"mt-4 pt-4 border-t border-slate-100 text-xs text-slate-500 flex justify-between\"><span>Total Follow-Ups: {history.length} · Newest on top</span><span>All dates & times in IST · 09:00 AM – 06:00 PM allowed</span></div></section>}</div></div></div>}\n\nfunction FollowModal({follow,onClose,onSaved}:{follow:Follow,onClose:()=>void,onSaved:()=>void}){const [note,setNote]=useState(\"\"),[nextDate,setNextDate]=useState(\"\"),[nextTime,setNextTime]=useState(\"\"),[leadStatus,setLeadStatus]=useState(follow.lead_status||\"\"),[err,setErr]=useState(\"\");const save=async()=>{setErr(\"\");if(!note.trim()){setErr(\"What happened today is required\");return}if(!terminalStatuses.includes(leadStatus)&&(!nextDate||!nextTime)){setErr(\"Next Follow-Up Date and Time are mandatory unless status is Converted, Lost, Not Interested or Irrelevant\");return}try{await api(`/api/follow-ups/${follow.id}/complete`,{method:\"POST\",headers:{\"Content-Type\":\"application/json\"},body:JSON.stringify({note:note.trim(),lead_status:leadStatus,next_followup_date:terminalStatuses.includes(leadStatus)?\"\":nextDate,next_followup_time:terminalStatuses.includes(leadStatus)?\"\":nextTime})});onSaved()}catch(e){setErr(e instanceof Error?e.message:\"Could not complete\")}};return <div className=\"fixed inset-0 z-50 bg-slate-950/50 flex items-center justify-center p-4\"><div className=\"w-full max-w-xl rounded-2xl bg-white shadow-2xl p-6\"><div className=\"flex justify-between\"><div><h3 className=\"text-xl font-bold\">Complete Follow-Up</h3><p className=\"text-sm text-slate-500 mt-1\">{follow.candidate_name} · {follow.ec_id} · {follow.scheduled_date} {follow.scheduled_time}</p></div><button onClick={onClose} className=\"text-xl text-slate-400\">×</button></div><div className=\"mt-5\"><label className=\"text-sm font-semibold\">Call Outcome / Lead Status <span className=\"text-red-600\">*</span></label><select value={leadStatus} onChange={e=>{setLeadStatus(e.target.value);if(terminalStatuses.includes(e.target.value)){setNextDate(\"\");setNextTime(\"\")}}} className=\"mt-2 w-full rounded-xl border border-slate-200 bg-white px-3 py-2.5\"><option value=\"\">Keep current status</option>{statuses.map(x=><option key={x}>{x}</option>)}</select>{terminalStatuses.includes(leadStatus)&&<div className=\"mt-2 rounded-xl bg-red-50 border border-red-100 text-red-700 p-3 text-sm font-semibold\">🚫 {leadStatus} — no further follow-up will be scheduled.</div>}</div><div className=\"mt-4\"><label className=\"text-sm font-semibold\">What happened today? <span className=\"text-red-600\">*</span></label><textarea value={note} onChange={e=>setNote(e.target.value)} rows={5} placeholder=\"Record the call outcome…\" className=\"mt-2 w-full rounded-xl border border-slate-200 px-3 py-3\"/></div>{!terminalStatuses.includes(leadStatus)&&<div className=\"grid grid-cols-2 gap-4 mt-4\"><div><label className=\"text-sm font-semibold\">Next Follow-Up Date <span className=\"text-red-600\">*</span></label><input type=\"date\" min={today()} max={maxFollowupDate()} value={nextDate} onChange={e=>setNextDate(e.target.value)} required className=\"mt-2 w-full rounded-xl border border-slate-200 px-3 py-2.5\"/></div><div><label className=\"text-sm font-semibold\">Next Follow-Up Time <span className=\"text-red-600\">*</span></label><select value={nextTime} onChange={e=>setNextTime(e.target.value)} required className=\"mt-2 w-full rounded-xl border border-slate-200 bg-white px-3 py-2.5\"><option value=\"\">Select time</option>{Array.from({length:19},(_,i)=>{const m=540+i*30,h=Math.floor(m/60),mm=m%60,v=`${String(h).padStart(2,\"0\")}:${String(mm).padStart(2,\"0\")}`,label=new Date(2000,0,1,h,mm).toLocaleTimeString(\"en-IN\",{hour:\"2-digit\",minute:\"2-digit\",hour12:true});return <option key={v} value={v}>{label}</option>})}</select></div></div>}{err&&<div className=\"mt-4 rounded-xl bg-red-50 text-red-700 p-3 text-sm\">{err}</div>}<div className=\"mt-6 flex justify-end gap-3\"><button onClick={onClose} className=\"rounded-xl border px-4 py-2 font-semibold\">Cancel</button><button onClick={save} disabled={!note.trim()||(!terminalStatuses.includes(leadStatus)&&(!nextDate||!nextTime))} className=\"rounded-xl bg-slate-950 text-white px-4 py-2 font-semibold disabled:opacity-40 disabled:cursor-not-allowed\">Complete Call</button></div></div></div>}\n\nfunction Leads({user,onFollow,onView}:{user:User,onFollow:(l:Lead)=>void,onView:(id:number)=>void}){const [items,setItems]=useState<Lead[]>([]),[counsellors,setCounsellors]=useState<User[]>([]),[search,setSearch]=useState(\"\"),[modal,setModal]=useState<any>(null);const load=()=>api(`/api/leads?search=${encodeURIComponent(search)}`).then(d=>setItems(d.items||[]));useEffect(()=>{load();api(\"/api/counsellors\").then(d=>setCounsellors(d.items||[]))},[search]);return <div><div className=\"flex flex-col md:flex-row gap-3 md:items-center md:justify-between mb-5\"><div><h2 className=\"text-2xl font-bold text-slate-900\">Leads</h2><p className=\"text-sm text-slate-500\">Manage candidate records and keep the call timeline current.</p></div><div className=\"flex gap-2\"><input value={search} onChange={e=>setSearch(e.target.value)} placeholder=\"Search candidate, EC ID, phone…\" className=\"rounded-xl border border-slate-200 bg-white px-4 py-2.5 w-72\"/>{user.role===\"super_admin\"&&<button onClick={()=>setModal({})} className=\"rounded-xl bg-blue-600 text-white px-5 py-2.5 font-semibold shadow-sm hover:bg-blue-700\">＋ Add New Lead</button>}</div></div><div className=\"bg-white border border-slate-200 rounded-2xl overflow-auto shadow-sm\"><table className=\"w-full text-sm\"><thead className=\"bg-slate-50 text-slate-500\"><tr>{[\"Candidate\",\"EC ID\",\"Phone\",\"Country\",\"Program\",\"Counsellor\",\"Status\",\"Last Follow-Up\",\"Next Follow-Up\",\"Actions\"].map(h=><th key={h} className=\"px-4 py-3 text-left font-semibold whitespace-nowrap\">{h}</th>)}</tr></thead><tbody>{items.map(l=><tr key={l.id} className=\"border-t border-slate-100 hover:bg-slate-50/70\"><td className=\"px-4 py-4 font-semibold\">{l.candidate_name}<div className=\"text-xs text-slate-400\">{l.email}</div></td><td className=\"px-4\">{l.ec_id}</td><td className=\"px-4 whitespace-nowrap\">{l.phone}</td><td className=\"px-4\">{l.country}</td><td className=\"px-4\">{l.program}</td><td className=\"px-4\">{l.counsellor_name||\"—\"}</td><td className=\"px-4\"><Badge text={l.status}/></td><td className=\"px-4 whitespace-nowrap\">{l.next_followup||\"—\"}</td><td className=\"px-4 whitespace-nowrap\"><button onClick={()=>setModal(l)} className=\"mr-2 rounded-lg border border-slate-200 px-3 py-1.5 font-semibold\">Edit</button><button onClick={()=>onView(l.id)} className=\"mr-2 rounded-lg border border-slate-200 px-3 py-1.5 font-semibold\">View</button><button onClick={()=>onFollow(l)} className=\"rounded-lg bg-slate-950 text-white px-3 py-1.5 font-semibold\">+ Follow-Up</button></td></tr>)}</tbody></table>{!items.length&&<div className=\"p-12 text-center text-slate-400\">No leads found.</div>}</div>{modal&&<LeadModal mode={modal.id?\"edit\":\"add\"} lead={modal} onClose={()=>setModal(null)} onSaved={()=>{setModal(null);load()}} onFollow={onFollow} counsellors={counsellors} user={user}/>}</div>}\n\nfunction FollowUps({user,onOpenFollow}:{user:User,onOpenFollow:(f:Follow)=>void}){const [mode,setMode]=useState(user.role===\"counsellor\"?\"today\":\"today\"),[items,setItems]=useState<Follow[]>([]),[counsellors,setCounsellors]=useState<any[]>([]),[search,setSearch]=useState(\"\"),[copiedId,setCopiedId]=useState<number|null>(null);const copyPhone=async(id:number,phone:string)=>{try{await navigator.clipboard.writeText(phone);setCopiedId(id);setTimeout(()=>setCopiedId(null),1200)}catch{}};const load=()=>api(`/api/follow-ups?mode=${mode}${search?`&candidate=${encodeURIComponent(search)}`:\"\"}`).then(d=>setItems(d.items||[]));useEffect(()=>{load();api(\"/api/counsellors\").then(d=>setCounsellors(d.items||[]))},[mode,search]);return <div><div className=\"flex flex-col md:flex-row md:justify-between md:items-end gap-3 mb-5\"><div><h2 className=\"text-2xl font-bold\">Follow-Ups</h2><p className=\"text-sm text-slate-500\">Overdue calls stay visible until completed.</p></div><input value={search} onChange={e=>setSearch(e.target.value)} placeholder=\"Search candidate / EC ID\" className=\"rounded-xl border border-slate-200 bg-white px-4 py-2.5 w-72\"/></div><div className=\"flex gap-2 mb-4 flex-wrap\">{[[\"today\",\"Today\"],[\"overdue\",\"Overdue\"],[\"upcoming\",\"Upcoming\"],[\"completed\",\"Completed\"],[\"all\",\"All\"]].map(([v,l])=><button key={v} onClick={()=>setMode(v)} className={`rounded-full px-4 py-2 text-sm font-semibold transition ${mode===v?\"bg-[#142b4b] text-white shadow-sm\":\"bg-white border border-slate-200 text-slate-700 hover:bg-slate-50\"}`}>{l}</button>)}</div><div className=\"space-y-3\">{items.map(f=>{const over=f.status==='pending' && (f.scheduled_date<today() || (f.scheduled_date===today()&&f.scheduled_time<new Date().toLocaleTimeString('en-GB',{hour:'2-digit',minute:'2-digit',hour12:false})));return <div key={f.id} className={`rounded-2xl bg-white border p-5 ${over?\"border-red-200 bg-red-50/30\":\"border-slate-200\"}`}><div className=\"flex flex-col md:flex-row md:items-center gap-4 justify-between\"><div><div className=\"flex items-center gap-2\"><div className=\"font-bold\">{f.candidate_name}</div>{over&&<Badge text=\"OVERDUE\"/>}{f.status==='completed'&&<Badge text=\"Completed\"/>}</div><div className=\"text-sm text-slate-500 mt-1 flex items-center gap-1.5 flex-wrap\"><span className=\"font-semibold text-slate-700\">{f.phone}</span><button type=\"button\" onClick={()=>copyPhone(f.id,String(f.phone||\"\"))} title=\"Copy phone number\" aria-label={`Copy phone number ${f.phone}`} className=\"inline-flex items-center justify-center h-6 w-6 rounded-md border border-slate-200 bg-white text-slate-500 hover:bg-slate-50 hover:text-slate-900 transition\">{copiedId===f.id?\"✓\":\"⧉\"}</button><span>·</span><span className=\"font-semibold text-slate-600\">{f.ec_id?.split(\"-\").length>1?`EC-${f.ec_id.split(\"-\").pop()}`:f.ec_id}</span><span>·</span><span>{f.country}</span><span>·</span><span>{f.program}</span></div><div className=\"text-xs text-slate-500 mt-2\">Counsellor: {f.counsellor_name} · {f.scheduled_date} at {f.scheduled_time}</div>{f.note&&<div className=\"mt-3 rounded-xl bg-slate-50 p-3 text-sm\"><span className=\"font-semibold\">Note:</span> {f.note}</div>}</div>{f.status==='pending'&&<div className=\"flex gap-2\"><button onClick={()=>onOpenFollow(f)} className=\"rounded-xl bg-[#142b4b] text-white px-4 py-2.5 font-semibold shadow-sm hover:bg-[#0f223d]\">Complete</button></div>}</div></div>})}{!items.length&&<div className=\"rounded-2xl bg-white border border-slate-200 p-10 text-center\"><div className=\"text-sm font-semibold text-slate-600\">{mode===\"today\"?\"No pending calls are due today.\":mode===\"overdue\"?\"Great — there are no overdue calls.\":mode===\"upcoming\"?\"No upcoming calls are scheduled.\":mode===\"completed\"?\"No completed follow-ups found.\":\"No follow-ups found.\"}</div>{mode===\"today\"&&<button type=\"button\" onClick={()=>setMode(\"upcoming\")} className=\"mt-3 rounded-lg bg-[#142b4b] px-4 py-2 text-xs font-bold text-white hover:bg-[#0f223d]\">View Upcoming Calls</button>}</div>}</div></div>}\n\nfunction Counsellors(){const empty={name:\"\",email:\"\",password:\"\",status:\"active\"};const [items,setItems]=useState<any[]>([]),[form,setForm]=useState<any>(empty),[editing,setEditing]=useState<any>(null),[err,setErr]=useState(\"\"),[saving,setSaving]=useState(false);const load=()=>api(\"/api/counsellors\").then(d=>setItems(d.items||[])).catch(()=>{});useEffect(load,[]);const reset=()=>{setForm({...empty});setEditing(null);setErr(\"\")};const save=async()=>{setErr(\"\");if(!form.name.trim()||!form.email.trim()||(!editing&&!form.password)){setErr(editing?\"Name and email are required\":\"Name, email and password are required\");return}setSaving(true);try{const result=await api(editing?`/api/counsellors/${editing.id}`:\"/api/counsellors\",{method:editing?\"PUT\":\"POST\",headers:{\"Content-Type\":\"application/json\"},body:JSON.stringify({...form,name:form.name.trim(),email:form.email.trim().toLowerCase()})});if(editing&&result.user){setItems(prev=>prev.map(u=>Number(u.id)===Number(result.user.id)?result.user:u))}else{await load()}reset()}catch(e){setErr(e instanceof Error?e.message:\"Could not save counsellor\")}finally{setSaving(false)}};const edit=(u:any)=>{setEditing(u);setForm({name:u.name||\"\",email:u.email||\"\",password:\"\",status:u.status||\"active\"});setErr(\"\")};const del=async(id:number)=>{if(!confirm(\"Delete this counsellor? Only counsellors with no assigned leads can be deleted.\"))return;try{await api(`/api/counsellors/${id}`,{method:\"DELETE\"});load()}catch(e){alert(e instanceof Error?e.message:\"Could not delete\")}};return <div className=\"space-y-5\"><div className=\"flex items-center justify-between\"><div><h2 className=\"text-2xl font-bold\">Counsellors</h2><p className=\"text-sm text-slate-500 mt-1\">Create, update and manage counsellor login access from one place.</p></div><button onClick={reset} className=\"rounded-xl bg-blue-600 text-white px-5 py-3 font-bold shadow-sm\">＋ Create User</button></div><div className=\"grid lg:grid-cols-3 gap-5 items-start\"><div className=\"lg:col-span-2 rounded-2xl bg-white border border-slate-200 overflow-auto shadow-sm\"><div className=\"p-5 border-b font-bold\">Counsellor Users <span className=\"ml-2 text-xs font-semibold text-slate-400\">{items.length} users</span></div><table className=\"w-full text-sm\"><thead className=\"bg-slate-50\"><tr><th className=\"px-4 py-3 text-left\">Name</th><th className=\"px-4 py-3 text-left\">Email</th><th className=\"px-4 py-3 text-left\">Status</th><th className=\"px-4 py-3 text-right\">Actions</th></tr></thead><tbody>{items.map(u=><tr key={u.id} className=\"border-t\"><td className=\"px-4 py-4 font-semibold\">{u.name}</td><td className=\"px-4\">{u.email}</td><td className=\"px-4\"><span className={`rounded-full px-2.5 py-1 text-xs font-semibold ${u.status==='active'?\"bg-emerald-50 text-emerald-700\":\"bg-slate-100 text-slate-600\"}`}>{u.status==='active'?\"Active\":\"Inactive\"}</span></td><td className=\"px-4 text-right whitespace-nowrap\"><button onClick={()=>edit(u)} className=\"rounded-lg border border-slate-200 px-3 py-1.5 font-semibold hover:bg-slate-50 mr-2\">Edit</button><button onClick={()=>del(u.id)} className=\"text-red-600 font-semibold\">Delete</button></td></tr>)}</tbody></table></div><div className=\"rounded-2xl bg-white border border-slate-200 p-5 h-fit self-start shadow-sm\"><div className=\"flex items-center justify-between\"><h3 className=\"font-bold\">{editing?\"Update User\":\"Create User\"}</h3>{editing&&<button onClick={reset} className=\"text-xs font-semibold text-slate-500\">Cancel</button>}</div><p className=\"text-xs text-slate-500 mt-1\">{editing?\"Update account details or leave password blank to keep the current password.\":\"Create a new counsellor login.\"}</p><div className=\"space-y-3 mt-4\">{[[\"name\",\"Full name\"],[\"email\",\"Email\"]].map(([k,l])=><div key={k}><label className=\"text-xs font-semibold text-slate-500\">{l}</label><input value={form[k]||\"\"} onChange={e=>setForm({...form,[k]:e.target.value})} className=\"mt-1 w-full rounded-xl border px-3 py-2.5\"/></div>)}<div><label className=\"text-xs font-semibold text-slate-500\">{editing?\"New Password (optional)\":\"Password\"}</label><input type=\"password\" value={form.password||\"\"} onChange={e=>setForm({...form,password:e.target.value})} placeholder={editing?\"Leave blank to keep current password\":\"Enter password\"} className=\"mt-1 w-full rounded-xl border px-3 py-2.5\"/></div>{editing&&<div><label className=\"text-xs font-semibold text-slate-500\">Account Status</label><select value={form.status} onChange={e=>setForm({...form,status:e.target.value})} className=\"mt-1 w-full rounded-xl border px-3 py-2.5\"><option value=\"active\">Active — Can Login</option><option value=\"inactive\">Inactive — Block Login</option></select></div>}{err&&<div className=\"text-sm text-red-700 bg-red-50 p-3 rounded-xl\">{err}</div>}<div className=\"mt-5 pt-4 border-t border-slate-200\"><button type=\"button\" disabled={saving} onClick={save} style={{display:\"block\",visibility:\"visible\",width:\"100%\"}} className=\"w-full rounded-xl bg-blue-600 hover:bg-blue-700 text-white py-3 font-bold shadow-sm disabled:opacity-50 disabled:cursor-not-allowed\">{saving?\"Saving…\":editing?\"Update User\":\"Create User\"}</button></div></div></div></div></div>}\n\nfunction LeadDetailsModal({leadId,onClose}:{leadId:number,onClose:()=>void}){const [d,setD]=useState<any>(null);useEffect(()=>{api(`/api/leads/${leadId}`).then(setD)},[leadId]);return <div className=\"fixed inset-0 z-50 bg-slate-950/50 flex items-center justify-center p-4\"><div className=\"w-full max-w-3xl rounded-2xl bg-white shadow-2xl max-h-[90vh] overflow-auto p-6\"><div className=\"flex justify-between\"><div><h3 className=\"text-xl font-bold\">Lead Details</h3><p className=\"text-sm text-slate-500\">Complete immutable call timeline.</p></div><button onClick={onClose} className=\"text-xl text-slate-400\">×</button></div>{!d?<div className=\"py-12 text-center text-slate-400\">Loading…</div>:<div className=\"space-y-6 mt-5\"><div className=\"grid md:grid-cols-4 gap-3\">{[[\"Candidate\",d.lead.candidate_name],[\"EC ID\",d.lead.ec_id],[\"Phone\",d.lead.phone],[\"Status\",d.lead.status],[\"Country\",d.lead.country],[\"Program\",d.lead.program],[\"Counsellor\",d.lead.counsellor_name||\"—\"],[\"Created\",d.lead.created_at]].map(([k,v])=><div key={k} className=\"rounded-xl bg-slate-50 p-3\"><div className=\"text-[11px] text-slate-500\">{k}</div><div className=\"mt-1 font-semibold text-sm\">{v||\"—\"}</div></div>)}</div><div><h4 className=\"font-bold mb-3\">Follow-Up History</h4><div className=\"space-y-3\">{(d.history||[]).map((f:any)=><div key={f.id} className=\"border-l-2 border-slate-300 pl-4\"><div className=\"flex flex-wrap gap-2 items-center\"><b>{f.scheduled_date} · {f.scheduled_time}</b><span className=\"text-xs text-slate-500\">{f.counsellor_name}</span>{f.status==='completed'?<Badge text=\"Completed\"/>:<Badge text=\"Pending\"/>}</div>{f.note&&<div className=\"mt-2 text-sm\">{f.note}</div>}{f.next_followup_date&&<div className=\"mt-2 text-sm font-semibold\">Next Follow-Up: {f.next_followup_date} · {f.next_followup_time}</div>}</div>)}{!d.history?.length&&<div className=\"text-slate-400\">No follow-up history yet.</div>}</div></div></div>}</div></div>}\n\n\nfunction FollowUpDataModal({lead,onClose,onAdd}:{lead:Lead,onClose:()=>void,onAdd:(l:Lead)=>void}){const [d,setD]=useState<any>(null);useEffect(()=>{api(`/api/leads/${lead.id}`).then(setD).catch(()=>{})},[lead.id]);const history=d?.history||[];const last=history.find((f:any)=>f.status==='completed');const next=history.find((f:any)=>f.status==='pending');const fmt=(x:any)=>x?new Date(x).toLocaleString('en-IN',{dateStyle:'medium',timeStyle:'short',timeZone:'Asia/Kolkata'}):'—';return <div className=\"fixed inset-0 z-50 bg-slate-950/50 flex items-center justify-center p-4\"><div className=\"w-full max-w-4xl max-h-[90vh] overflow-auto rounded-2xl bg-white shadow-2xl\"><div className=\"sticky top-0 z-10 bg-[#142b4b] text-white px-6 py-5 flex items-center justify-between\"><div><h3 className=\"text-xl font-bold\">Follow-Up Data</h3><p className=\"text-sm text-slate-300 mt-1\">{lead.candidate_name} · {lead.ec_id} · {lead.phone}</p></div><div className=\"flex gap-2\"><button onClick={()=>onAdd(lead)} className=\"rounded-xl bg-blue-600 hover:bg-blue-500 px-4 py-2.5 font-bold\">＋ Add Follow-Up</button><button onClick={onClose} className=\"text-2xl text-slate-300 hover:text-white px-2\">×</button></div></div>{!d?<div className=\"p-12 text-center text-slate-400\">Loading follow-up data…</div>:<div className=\"p-6 space-y-5\"><div className=\"grid md:grid-cols-3 gap-4\"><div className=\"rounded-2xl border border-slate-200 bg-slate-50 p-4\"><div className=\"text-xs font-bold text-slate-500 uppercase\">Last Follow-Up</div><div className=\"text-lg font-extrabold text-[#102653] mt-2\">{last?.completed_at?fmt(last.completed_at):'No call yet'}</div><div className=\"text-xs text-slate-500 mt-2\">Latest completed call · IST</div></div><div className=\"rounded-2xl border border-blue-100 bg-blue-50/60 p-4\"><div className=\"text-xs font-bold text-blue-600 uppercase\">Next Follow-Up</div><div className=\"text-lg font-extrabold text-[#102653] mt-2\">{next?`${next.scheduled_date} · ${next.scheduled_time}`:'Not scheduled'}</div><div className=\"text-xs text-slate-500 mt-2\">Pending call</div></div><div className=\"rounded-2xl border border-emerald-100 bg-emerald-50/60 p-4\"><div className=\"text-xs font-bold text-emerald-600 uppercase\">Total Calls</div><div className=\"text-lg font-extrabold text-[#102653] mt-2\">{history.filter((f:any)=>f.status==='completed').length}</div><div className=\"text-xs text-slate-500 mt-2\">Completed call records</div></div></div><div className=\"rounded-2xl border border-slate-200 overflow-hidden\"><div className=\"px-5 py-4 bg-slate-50 border-b font-bold\">Complete Follow-Up History</div><div className=\"divide-y divide-slate-100\">{history.map((f:any,i:number)=><div key={f.id} className=\"p-5\"><div className=\"flex flex-col md:flex-row md:items-start md:justify-between gap-3\"><div><div className=\"flex items-center gap-2\"><span className=\"font-bold\">Call #{history.length-i}</span><Badge text={f.status==='completed'?'Completed':'Pending'}/></div><div className=\"text-xs text-slate-500 mt-1\">{f.status==='completed'?`Called: ${fmt(f.completed_at)}`:`Scheduled: ${f.scheduled_date} · ${f.scheduled_time}`} · {f.counsellor_name}</div></div>{f.next_followup_date&&<div className=\"rounded-lg bg-amber-50 text-amber-700 px-3 py-2 text-xs font-bold\">Next: {f.next_followup_date} · {f.next_followup_time}</div>}</div>{f.note&&<div className=\"mt-3 rounded-xl bg-slate-50 p-4 text-sm leading-6\"><b>What Happened Today:</b><div className=\"mt-1 text-slate-700 whitespace-pre-wrap\">{f.note}</div></div>}</div>)}{!history.length&&<div className=\"p-10 text-center text-slate-400\">No follow-up history yet. Add the first follow-up.</div>}</div></div></div>}</div></div>}\nfunction LeadsWorkspace({user,onFollow,onFollowData,onView,onNav}:{user:User,onFollow:(l:Lead)=>void,onFollowData:(l:Lead)=>void,onView:(id:number)=>void,onNav:(x:string)=>void}){const [items,setItems]=useState<any[]>([]),[counsellors,setCounsellors]=useState<User[]>([]),[search,setSearch]=useState(()=>localStorage.getItem('crm_global_search')||''),[country,setCountry]=useState(\"\"),[program,setProgram]=useState(\"\"),[status,setStatus]=useState(\"\"),[counsellor,setCounsellor]=useState(\"\"),[page,setPage]=useState(1),[total,setTotal]=useState(0),[totalPages,setTotalPages]=useState(1),[modal,setModal]=useState<any>(null),[loading,setLoading]=useState(false),[err,setErr]=useState(\"\");const programs=[\"Ausbildung\",\"Nursing / Pflege\",\"Doctor Placement\",\"Handwerker\",\"MBBS in Europe\",\"MBA\",\"BTech\",\"Study Abroad\",\"Job Placement\"];const countries=[\"Germany\",\"Italy\",\"Poland\",\"Hungary\",\"Romania\",\"Bulgaria\",\"Austria\",\"Netherlands\",\"France\",\"Spain\",\"Other Europe\"];const load=async()=>{setLoading(true);setErr(\"\");try{const qs=new URLSearchParams();if(search)qs.set(\"search\",search);if(country)qs.set(\"country\",country);if(program)qs.set(\"program\",program);if(status)qs.set(\"status\",status);if(counsellor)qs.set(\"counsellor\",counsellor);qs.set(\"page\",String(page));qs.set(\"limit\",\"50\");const d=await api(`/api/leads?${qs}`);setItems(d.items||[]);setTotal(Number(d.total)||0);setTotalPages(Number(d.totalPages)||1)}catch(e){setErr(e instanceof Error?e.message:\"Could not load leads\")}finally{setLoading(false)}};const deleteLead=async(id:number,name:string)=>{if(user.role!==\"super_admin\")return;if(!confirm(`Delete lead \"${name}\"? This action cannot be undone.`))return;try{await api(`/api/leads/${id}`,{method:\"DELETE\"});setItems(prev=>prev.filter(x=>Number(x.id)!==Number(id)));setTotal(n=>Math.max(0,n-1));alert(\"Lead deleted successfully.\")}catch(e){alert(e instanceof Error?e.message:\"Could not delete lead\")}};useEffect(()=>{api(\"/api/counsellors\").then(d=>setCounsellors(d.items||[])).catch(()=>{})},[]);useEffect(()=>{load()},[search,country,program,status,counsellor,page]);useEffect(()=>{setPage(1)},[search,country,program,status,counsellor]);return <div><div className=\"flex flex-col xl:flex-row xl:items-end xl:justify-between gap-4 mb-5\"><div><div className=\"flex items-center gap-3\"><h2 className=\"text-2xl font-bold\">Leads</h2><span className=\"rounded-full bg-blue-50 text-blue-700 px-3 py-1 text-xs font-bold\">{items.length} shown</span></div><p className=\"text-sm text-slate-500\">Live lead database — use filters to find the exact candidate and continue the call workflow.</p></div><button onClick={()=>setModal({})} className=\"rounded-xl bg-blue-600 text-white px-5 py-3 font-semibold shadow-sm hover:bg-blue-700\">＋ Add New Lead</button></div><div className=\"rounded-2xl bg-white border border-slate-200 shadow-sm p-4 mb-5\"><div className=\"grid md:grid-cols-2 xl:grid-cols-5 gap-3\"><input value={search} onChange={e=>setSearch(e.target.value)} placeholder=\"Search name / EC ID / phone / email\" className=\"rounded-xl border border-slate-200 px-4 py-2.5 xl:col-span-1\"/><select value={country} onChange={e=>setCountry(e.target.value)} className=\"rounded-xl border border-slate-200 px-3 py-2.5\"><option value=\"\">All Countries</option>{countries.map(x=><option key={x}>{x}</option>)}</select><select value={program} onChange={e=>setProgram(e.target.value)} className=\"rounded-xl border border-slate-200 px-3 py-2.5\"><option value=\"\">All Programs</option>{programs.map(x=><option key={x}>{x}</option>)}</select><select value={status} onChange={e=>setStatus(e.target.value)} className=\"rounded-xl border border-slate-200 px-3 py-2.5\"><option value=\"\">All Statuses</option>{statuses.map(x=><option key={x}>{x}</option>)}</select>{user.role===\"super_admin\"?<select value={counsellor} onChange={e=>setCounsellor(e.target.value)} className=\"rounded-xl border border-slate-200 px-3 py-2.5\"><option value=\"\">All Counsellors</option>{counsellors.map(x=><option key={x.id} value={x.id}>{x.name}</option>)}</select>:<button onClick={()=>{localStorage.removeItem('crm_global_search');setSearch(\"\");setCountry(\"\");setProgram(\"\");setStatus(\"\");setCounsellor(\"\")}} className=\"rounded-xl border border-slate-200 bg-slate-50 px-4 py-2.5 font-semibold\">Clear Filters</button>}</div>{user.role===\"super_admin\"&&<div className=\"mt-3 flex justify-end\"><button onClick={()=>{localStorage.removeItem('crm_global_search');setSearch(\"\");setCountry(\"\");setProgram(\"\");setStatus(\"\");setCounsellor(\"\")}} className=\"text-sm font-semibold text-blue-600\">Clear all filters</button></div>}</div>{err&&<div className=\"mb-4 rounded-xl bg-red-50 text-red-700 p-3 text-sm\">{err}</div>}<div className=\"bg-white border border-slate-200 rounded-2xl overflow-auto shadow-sm\"><table className=\"w-full text-sm\"><thead className=\"bg-slate-50 text-slate-500\"><tr>{[\"Candidate\",\"Phone\",\"Country\",\"Program\",\"Counsellor\",\"Status\",\"Last Follow-Up\",\"Next Follow-Up\",\"Actions\"].map(h=><th key={h} className=\"px-4 py-3 text-left font-semibold whitespace-nowrap\">{h}</th>)}</tr></thead><tbody>{items.map(l=><tr key={l.id} className=\"border-t border-slate-100 hover:bg-slate-50/70\"><td className=\"px-4 py-4 font-semibold\">{l.candidate_name}<div className=\"text-xs text-slate-400\">{l.email||\"No email\"}</div></td><td className=\"px-4 whitespace-nowrap\"><a href={`tel:${l.phone}`} className=\"hover:text-blue-600\">{l.phone}</a></td><td className=\"px-4\">{l.country||\"—\"}</td><td className=\"px-4\"><ProgramBadge text={l.program}/></td><td className=\"px-4\">{l.counsellor_name||\"Unassigned\"}</td><td className=\"px-4\"><Badge text={l.status}/></td><td className=\"px-4 whitespace-nowrap\">{l.last_followup||\"No call yet\"}</td><td className=\"px-4 whitespace-nowrap\"><div className=\"flex flex-col items-start gap-1.5\">{l.next_followup||\"No follow-up\"}<FollowupBadge lead={l}/></div></td><td className=\"px-4 whitespace-nowrap\"><div className=\"flex items-center gap-1.5\"><button onClick={()=>onFollowData(l)} className=\"rounded-lg bg-blue-600 text-white px-3 py-1.5 font-semibold shadow-sm hover:bg-blue-700\">Follow-Up</button>{user.role==='super_admin'&&<button onClick={()=>setModal(l)} className=\"rounded-lg border border-slate-200 px-3 py-1.5 font-semibold hover:bg-slate-50\">Edit</button>}{user.role==='super_admin'&&<button onClick={()=>deleteLead(l.id,l.candidate_name)} title=\"Delete lead\" className=\"rounded-lg border border-red-200 bg-red-50 text-red-600 px-3 py-1.5 font-semibold hover:bg-red-100\">Delete</button>}<button onClick={()=>onView(l.id)} className=\"rounded-lg border border-slate-200 px-3 py-1.5 font-semibold hover:bg-slate-50\">View</button>{l.phone&&<a href={`https://wa.me/${String(l.phone).replace(/\\D/g,\"\")}?text=${encodeURIComponent(`Hi ${l.candidate_name}, this is Europe Careers. We’re following up regarding your career application. Please let us know a convenient time to connect.`)}`} target=\"_blank\" rel=\"noopener noreferrer\" title=\"Send WhatsApp message\" aria-label={`Send WhatsApp message to ${l.candidate_name}`} className=\"h-9 w-9 rounded-lg border border-green-200 bg-green-50 text-green-600 flex items-center justify-center hover:bg-green-100 hover:border-green-300 transition\"><Icon name=\"whatsapp\" size={18}/></a>}</div></td></tr>)}</tbody></table>{loading&&<div className=\"p-10 text-center text-slate-400\">Loading live leads…</div>}{!loading&&!items.length&&<div className=\"p-12 text-center text-slate-400\">No leads match these filters.</div>}{!loading&&total>0&&<div className=\"flex flex-col sm:flex-row items-center justify-between gap-3 border-t border-slate-100 px-4 py-3 bg-slate-50\"><div className=\"text-xs text-slate-500\">Showing <b>{(page-1)*50+1}</b>–<b>{Math.min(page*50,total)}</b> of <b>{total}</b> leads</div><div className=\"flex items-center gap-1\"><button disabled={page<=1} onClick={()=>setPage(p=>Math.max(1,p-1))} className=\"rounded-lg border bg-white px-3 py-2 text-sm font-semibold disabled:opacity-40\">← Prev</button><span className=\"px-3 text-xs font-bold text-slate-600\">Page {page} / {totalPages}</span><button disabled={page>=totalPages} onClick={()=>setPage(p=>Math.min(totalPages,p+1))} className=\"rounded-lg border bg-white px-3 py-2 text-sm font-semibold disabled:opacity-40\">Next →</button></div></div>}</div>{modal&&<LeadModal mode={modal.id?\"edit\":\"add\"} lead={modal.id?modal:null} onClose={()=>setModal(null)} onSaved={()=>{setModal(null);load()}} onFollow={onFollow} counsellors={counsellors} user={user}/>}</div>}\nfunction AdminReports(){const [d,setD]=useState<any>(null),[tab,setTab]=useState(\"overview\"),[selected,setSelected]=useState<any>(null);useEffect(()=>{api('/api/admin/insights').then(setD).catch(()=>{})},[]);if(!d)return <div className=\"animate-pulse text-slate-500\">Loading management report…</div>;const s=d.summary||{},tabs=[[\"overview\",\"Overview\"],[\"missing\",\"Missing Follow-Ups\"],[\"stale\",\"Stale Leads\"],[\"activity\",\"Activity Log\"]];return <div className=\"space-y-5\"><div><h2 className=\"text-2xl font-bold\">Super Admin Control Center</h2><p className=\"text-sm text-slate-500 mt-1\">Operational accountability, lead health and team activity — live from the CRM.</p></div><div className=\"grid grid-cols-2 md:grid-cols-4 xl:grid-cols-7 gap-3\">{[[\"Unassigned\",s.unassigned,\"text-amber-600\"],[\"Missing Follow-Ups\",s.missing_followups,\"text-red-600\"],[\"Stale 3+ Days\",s.stale_3_days,\"text-orange-600\"],[\"Stale 7+ Days\",s.stale_7_days,\"text-red-600\"],[\"Converted\",s.converted,\"text-emerald-600\"],[\"Contacted\",s.contacted,\"text-blue-600\"],[\"Activities Today\",s.activities_today,\"text-violet-600\"]].map(([l,v,cl])=><button key={l} onClick={()=>setTab(l===\"Missing Follow-Ups\"?\"missing\":l===\"Stale 3+ Days\"||l===\"Stale 7+ Days\"?\"stale\":\"overview\")} className=\"rounded-xl bg-white border border-slate-200 p-4 text-left shadow-sm hover:shadow-md\"><div className=\"text-xs text-slate-500\">{l}</div><div className={`text-2xl font-extrabold mt-1 ${cl}`}>{v??0}</div></button>)}</div><div className=\"flex gap-2 flex-wrap\">{tabs.map(([v,l])=><button key={v} onClick={()=>setTab(v)} className={`rounded-full px-4 py-2 text-sm font-semibold ${tab===v?\"bg-slate-950 text-white\":\"bg-white border border-slate-200\"}`}>{l}{v===\"missing\"&&Number(s.missing_followups)>0?<span className=\"ml-2 rounded-full bg-red-100 text-red-700 px-2\">{s.missing_followups}</span>:null}</button>)}</div>{tab===\"overview\"&&<div className=\"grid lg:grid-cols-2 gap-5\"><section className=\"rounded-2xl bg-white border border-slate-200 p-5\"><h3 className=\"font-bold\">What needs attention</h3><div className=\"space-y-3 mt-4\">{[[\"Missing Follow-Ups\",s.missing_followups,\"Open Missing Follow-Ups\",\"missing\"],[\"Unassigned Leads\",s.unassigned,\"Go to Leads\",\"leads\"],[\"Stale 7+ Days\",s.stale_7_days,\"Review Stale Leads\",\"stale\"]].map(([l,v,b,t])=><div key={l} className=\"flex items-center justify-between rounded-xl bg-slate-50 p-4\"><div><div className=\"font-semibold\">{l}</div><div className=\"text-xs text-slate-500 mt-1\">{Number(v)||0} records need attention</div></div><button onClick={()=>setTab(t as string)} className=\"text-sm font-bold text-blue-600\">{b} →</button></div>)}</div></section><section className=\"rounded-2xl bg-white border border-slate-200 p-5\"><h3 className=\"font-bold\">Counsellor accountability</h3><div className=\"overflow-auto mt-4\"><table className=\"w-full text-sm\"><thead className=\"bg-slate-50\"><tr><th className=\"p-2 text-left\">Counsellor</th><th className=\"p-2\">Assigned</th><th className=\"p-2\">Due</th><th className=\"p-2\">Done</th><th className=\"p-2\">Overdue</th><th className=\"p-2\">Missing</th><th className=\"p-2\">Won</th><th className=\"p-2\">Done %</th></tr></thead><tbody>{(d.performance||[]).map((p:any)=><tr key={p.id} className=\"border-t\"><td className=\"p-2 font-semibold\">{p.name}</td><td className=\"p-2 text-center\">{p.assigned}</td><td className=\"p-2 text-center\">{p.due}</td><td className=\"p-2 text-center text-emerald-600\">{p.calls_completed}</td><td className=\"p-2 text-center text-red-600\">{p.overdue}</td><td className=\"p-2 text-center text-amber-600 font-semibold\">{p.missing}</td><td className=\"p-2 text-center font-bold text-emerald-700\">{p.conversions}</td><td className=\"p-2 text-center font-bold\">{Math.round((Number(p.calls_completed)||0)/Math.max(1,(Number(p.calls_completed)||0)+(Number(p.overdue)||0))*100)}%</td></tr>)}</tbody></table></div></section></div>}{tab===\"missing\"&&<AdminTable title=\"Missing Follow-Ups\" items={d.missing_followups||[]} empty=\"No active leads are missing a pending follow-up.\"/>}{tab===\"stale\"&&<AdminTable title=\"Stale Leads (3+ days without update)\" items={d.stale||[]} empty=\"No stale active leads.\"/>}{tab===\"activity\"&&<div className=\"rounded-2xl bg-white border border-slate-200 overflow-auto\"><div className=\"p-5 border-b font-bold\">Recent Activity</div><table className=\"w-full text-sm\"><thead className=\"bg-slate-50\"><tr><th className=\"p-3 text-left\">Time</th><th className=\"p-3 text-left\">User</th><th className=\"p-3 text-left\">Action</th><th className=\"p-3 text-left\">Lead</th><th className=\"p-3 text-left\">Details</th></tr></thead><tbody>{(d.activity||[]).map((a:any)=><tr key={a.id} className=\"border-t\"><td className=\"p-3 whitespace-nowrap\">{a.created_at}</td><td className=\"p-3 font-semibold\">{a.user_name||\"System\"}</td><td className=\"p-3\">{a.action}</td><td className=\"p-3\">{a.candidate_name||\"—\"}</td><td className=\"p-3 text-slate-500\">{a.details||\"—\"}</td></tr>)}</tbody></table></div>}</div>}\nfunction AdminTable({title,items,empty}:{title:string,items:any[],empty:string}){return <div className=\"rounded-2xl bg-white border border-slate-200 overflow-auto\"><div className=\"p-5 border-b flex justify-between\"><div className=\"font-bold\">{title}</div><span className=\"text-sm text-slate-500\">{items.length} records</span></div><table className=\"w-full text-sm\"><thead className=\"bg-slate-50\"><tr>{[\"Candidate\",\"EC ID\",\"Counsellor\",\"Status\",\"Last Update\",\"Action\"].map(h=><th key={h} className=\"p-3 text-left whitespace-nowrap\">{h}</th>)}</tr></thead><tbody>{items.map((x:any)=><tr key={x.id} className=\"border-t\"><td className=\"p-3 font-semibold\">{x.candidate_name}</td><td className=\"p-3 text-blue-700\">{x.ec_id}</td><td className=\"p-3\">{x.counsellor_name||\"Unassigned\"}</td><td className=\"p-3\"><Badge text={x.status}/></td><td className=\"p-3 whitespace-nowrap\">{x.updated_at}</td><td className=\"p-3\"><button onClick={()=>window.dispatchEvent(new CustomEvent('crm-open-lead',{detail:x.id}))} className=\"text-blue-600 font-semibold\">Open Lead →</button></td></tr>)}</tbody></table>{!items.length&&<div className=\"p-10 text-center text-slate-400\">{empty}</div>}</div>}\n\n\nexport function App(){const [user,setUser]=useState<User|null>(null),[checking,setChecking]=useState(true),[active,setActive]=useState(\"Dashboard\"),[follow,setFollow]=useState<Follow|null>(null),[leadFollow,setLeadFollow]=useState<Lead|null>(null),[followData,setFollowData]=useState<Lead|null>(null),[detail,setDetail]=useState<number|null>(null),[globalAdd,setGlobalAdd]=useState(false),[globalCounsellors,setGlobalCounsellors]=useState<User[]>([]),[refreshKey,setRefreshKey]=useState(0);useEffect(()=>{const sid=localStorage.getItem('ec_session');if(!sid){setChecking(false);return}fetch('/api/me',{headers:{'X-Session-ID':sid}}).then(async r=>{if(!r.ok)throw new Error('Session invalid');const d=await r.json();localStorage.setItem('ec_user',JSON.stringify(d.user));setUser(d.user)}).catch(()=>{localStorage.removeItem('ec_user');localStorage.removeItem('ec_session')}).finally(()=>setChecking(false))},[]);useEffect(()=>{const add=()=>{if(user){setGlobalAdd(true);api('/api/counsellors').then(d=>setGlobalCounsellors(d.items||[])).catch(()=>{})}};const open=(e:any)=>{setActive('Leads');setDetail(Number(e.detail))};window.addEventListener('open-add-lead',add);window.addEventListener('crm-open-lead',open);return()=>{window.removeEventListener('open-add-lead',add);window.removeEventListener('crm-open-lead',open)}},[user]);if(checking)return <div className=\"min-h-screen bg-[#0b1830] flex items-center justify-center text-white\"><div className=\"text-center\"><div className=\"mx-auto h-12 w-12 rounded-xl bg-white flex items-center justify-center shadow-xl\"><img src=\"https://europecareers.in/wp-content/uploads/2026/02/Europecareers.in_-2__1_-removebg-preview-1-e1773039949263.png\" className=\"max-h-8 max-w-[120px] object-contain\"/></div><div className=\"mt-4 text-sm text-slate-300\">Checking secure session…</div></div></div>;if(!user)return <Login onLogin={setUser}/>;const logout=async()=>{try{await api(\"/api/logout\",{method:\"POST\"})}catch{} localStorage.removeItem(\"ec_user\");localStorage.removeItem(\"ec_session\");setUser(null)};return <Layout user={user} onLogout={logout} active={active} onNav={n=>setActive(n)}>{active===\"Dashboard\"&&<DashboardPro key={`dash-${refreshKey}`} user={user} onOpenFollow={setFollow} onNav={setActive}/>} {(active===\"Leads\"||active===\"My Leads\")&&<LeadsWorkspace key={`leads-${refreshKey}`} user={user} onFollow={l=>{setLeadFollow(l);setFollow(null)}} onFollowData={setFollowData} onView={setDetail} onNav={setActive}/>} {active===\"Follow-Ups\"&&<FollowUps key={`followups-${refreshKey}`} user={user} onOpenFollow={setFollow}/>} {followData&&<FollowUpDataModalV2 lead={followData} onClose={()=>setFollowData(null)} onAdd={l=>{setFollowData(null);setLeadFollow(l)}}/>} {active===\"Counsellors\"&&user.role===\"super_admin\"&&<Counsellors/>} {active===\"Reports\"&&user.role===\"super_admin\"&&<AdminReports/>} {active===\"Settings\"&&user.role===\"super_admin\"&&<div className=\"space-y-5\"><div className=\"rounded-2xl bg-white border border-slate-200 p-6\"><h2 className=\"text-2xl font-bold\">CRM Settings</h2><p className=\"mt-2 text-slate-500\">Follow-ups use IST and are restricted to 09:00–18:00. Historical records are append-only. Super Admin control reports flag unassigned, missing and stale active leads.</p><div className=\"mt-5 grid md:grid-cols-3 gap-3\"><div className=\"rounded-xl bg-slate-50 p-4\"><b>Business Hours</b><div className=\"text-sm text-slate-500 mt-1\">09:00 AM – 06:00 PM IST</div></div><div className=\"rounded-xl bg-slate-50 p-4\"><b>Follow-Up History</b><div className=\"text-sm text-slate-500 mt-1\">Append-only audit trail</div></div><div className=\"rounded-xl bg-slate-50 p-4\"><b>Access</b><div className=\"text-sm text-slate-500 mt-1\">Super Admin has full control</div></div></div></div><AdminPassword/><div className=\"rounded-2xl bg-white border border-slate-200 shadow-sm p-6\"><div className=\"flex items-start justify-between gap-4\"><div><h3 className=\"text-lg font-extrabold text-[#102653]\">Backup & Export</h3><p className=\"text-sm text-slate-500 mt-1\">Keep an offline copy of your CRM data. Recommended before major changes or regularly each week.</p></div><div className=\"h-10 w-10 rounded-xl bg-blue-50 text-blue-600 flex items-center justify-center\"><Icon name=\"file\" size={19}/></div></div><div className=\"grid md:grid-cols-2 gap-4 mt-5\"><div className=\"rounded-2xl border border-slate-200 p-5\"><div className=\"font-bold\">Professional Excel Export</div><p className=\"text-xs text-slate-500 mt-1\">Real .xlsx workbook with Leads, Follow-Up History, Activity Log and Counsellors.</p><button onClick={()=>downloadAdminFile('/api/admin/export/leads.xlsx',`europe-careers-crm-${today()}.xlsx`).catch(e=>alert(e instanceof Error?e.message:'Export failed'))} className=\"mt-4 rounded-xl bg-blue-600 hover:bg-blue-700 text-white px-4 py-2.5 font-bold\">↓ Export Excel (.xlsx)</button></div><div className=\"rounded-2xl border border-blue-100 bg-blue-50/40 p-5\"><div className=\"font-bold text-[#102653]\">Full CRM Backup</div><p className=\"text-xs text-slate-500 mt-1\">Leads, complete follow-up history, counsellor accounts (no passwords), and activity log.</p><button onClick={()=>downloadAdminFile('/api/admin/backup.json',`europe-careers-crm-backup-${today()}.json`).catch(e=>alert(e instanceof Error?e.message:'Backup failed'))} className=\"mt-4 rounded-xl bg-slate-950 hover:bg-slate-800 text-white px-4 py-2.5 font-bold\">↓ Download Full Backup</button></div></div><div className=\"mt-4 rounded-xl bg-amber-50 border border-amber-100 p-3 text-xs text-amber-800\">🔐 Backup downloads are available only to Super Admin. Passwords and active session tokens are never included.</div></div></div>} {follow&&<FollowModal follow={follow} onClose={()=>setFollow(null)} onSaved={()=>{setFollow(null);setRefreshKey(k=>k+1)}}/>} {leadFollow&&<CreateFollow lead={leadFollow} onClose={()=>setLeadFollow(null)} onSaved={()=>{setLeadFollow(null);setRefreshKey(k=>k+1)}}/>} {detail&&<LeadDetailsModal leadId={detail} onClose={()=>setDetail(null)}/>} {globalAdd&&<LeadModal mode=\"add\" lead={null} counsellors={globalCounsellors} user={user} onClose={()=>setGlobalAdd(false)} onSaved={()=>{setGlobalAdd(false);setRefreshKey(k=>k+1)}}/>}</Layout>}\n\nfunction AdminPassword(){const [current,setCurrent]=useState(\"\"),[next,setNext]=useState(\"\"),[confirm,setConfirm]=useState(\"\"),[err,setErr]=useState(\"\"),[ok,setOk]=useState(\"\"),[saving,setSaving]=useState(false);const save=async()=>{setErr(\"\");setOk(\"\");if(next.length<12){setErr(\"New password must be at least 12 characters.\");return}if(next!==confirm){setErr(\"New passwords do not match.\");return}setSaving(true);try{const d=await api('/api/admin/change-password',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({current_password:current,new_password:next})});setOk(d.message||\"Password changed successfully.\");setCurrent(\"\");setNext(\"\");setConfirm(\"\")}catch(e){setErr(e instanceof Error?e.message:\"Could not change password\")}finally{setSaving(false)}};return <section className=\"rounded-2xl bg-white border border-slate-200 shadow-sm p-6\"><div className=\"flex items-start gap-3\"><div className=\"h-10 w-10 rounded-xl bg-red-50 text-red-600 flex items-center justify-center\">🔐</div><div><h3 className=\"text-lg font-extrabold text-[#102653]\">Super Admin Password</h3><p className=\"text-sm text-slate-500 mt-1\">Change the password used for the Super Admin account.</p></div></div><div className=\"grid md:grid-cols-3 gap-4 mt-5\"><div><label className=\"text-xs font-bold text-slate-600\">Current Password</label><input type=\"password\" value={current} onChange={e=>setCurrent(e.target.value)} autoComplete=\"current-password\" className=\"mt-1 w-full rounded-xl border border-slate-200 px-3 py-2.5\"/></div><div><label className=\"text-xs font-bold text-slate-600\">New Password</label><input type=\"password\" value={next} onChange={e=>setNext(e.target.value)} autoComplete=\"new-password\" placeholder=\"Minimum 12 characters\" className=\"mt-1 w-full rounded-xl border border-slate-200 px-3 py-2.5\"/></div><div><label className=\"text-xs font-bold text-slate-600\">Confirm New Password</label><input type=\"password\" value={confirm} onChange={e=>setConfirm(e.target.value)} autoComplete=\"new-password\" className=\"mt-1 w-full rounded-xl border border-slate-200 px-3 py-2.5\"/></div></div>{err&&<div className=\"mt-4 rounded-xl bg-red-50 border border-red-100 text-red-700 p-3 text-sm font-semibold\">{err}</div>}{ok&&<div className=\"mt-4 rounded-xl bg-emerald-50 border border-emerald-100 text-emerald-700 p-3 text-sm font-semibold\">✓ {ok}</div>}<button type=\"button\" disabled={saving||!current||!next||!confirm} onClick={save} className=\"mt-4 rounded-xl bg-[#142b4b] hover:bg-[#0f223d] text-white px-5 py-3 font-bold disabled:opacity-40\">{saving?\"Changing…\":\"Change Admin Password\"}</button></section>}\n\nfunction CreateFollow({lead,onClose,onSaved}:{lead:Lead,onClose:()=>void,onSaved:()=>void}){const [nextDate,setNextDate]=useState(\"\"),[nextTime,setNextTime]=useState(\"\"),[note,setNote]=useState(\"\"),[leadStatus,setLeadStatus]=useState(lead.status||\"\"),[err,setErr]=useState(\"\"),[saving,setSaving]=useState(false);const now=new Date(),callDate=new Intl.DateTimeFormat(\"en-GB\",{timeZone:\"Asia/Kolkata\",day:\"2-digit\",month:\"2-digit\",year:\"numeric\"}).format(now),callTime=new Intl.DateTimeFormat(\"en-IN\",{timeZone:\"Asia/Kolkata\",hour:\"2-digit\",minute:\"2-digit\",hour12:true}).format(now),timeOptions=Array.from({length:19},(_,i)=>{const m=540+i*30,h=Math.floor(m/60),mm=m%60;return {value:`${String(h).padStart(2,\"0\")}:${String(mm).padStart(2,\"0\")}`,label:new Date(2000,0,1,h,mm).toLocaleTimeString(\"en-IN\",{hour:\"2-digit\",minute:\"2-digit\",hour12:true})}});const save=async()=>{setErr(\"\");if(!note.trim()){setErr(\"What Happened Today is required\");return}if(!terminalStatuses.includes(leadStatus)&&(!nextDate||!nextTime)){setErr(\"Next Follow-Up Date and Time are mandatory unless status is Converted, Lost, Not Interested or Irrelevant\");return}setSaving(true);try{await api(`/api/leads/${lead.id}/follow-up-call`,{method:\"POST\",headers:{\"Content-Type\":\"application/json\"},body:JSON.stringify({note:note.trim(),lead_status:leadStatus,next_followup_date:terminalStatuses.includes(leadStatus)?\"\":nextDate,next_followup_time:terminalStatuses.includes(leadStatus)?\"\":nextTime})});onSaved()}catch(e){setErr(e instanceof Error?e.message:\"Could not save follow-up\")}finally{setSaving(false)}};return <div className=\"fixed inset-0 z-50 bg-slate-950/50 flex items-center justify-center p-4\"><div className=\"w-full max-w-xl rounded-2xl bg-white shadow-2xl overflow-hidden\"><div className=\"bg-[#142b4b] text-white px-6 py-5 flex items-center justify-between\"><div><h3 className=\"text-xl font-bold\">Follow-Up</h3><p className=\"text-sm text-slate-300 mt-1\">{lead.candidate_name} · {lead.ec_id}</p></div><button onClick={onClose} className=\"text-2xl text-slate-300 hover:text-white\">×</button></div><div className=\"p-6 space-y-5\"><div className=\"grid grid-cols-2 gap-4\"><div><label className=\"text-xs font-bold text-slate-500 uppercase tracking-wide\">Current Date</label><input value={callDate} readOnly className=\"mt-2 w-full rounded-xl border border-slate-200 bg-slate-50 px-3 py-3 font-semibold text-slate-700 cursor-not-allowed\"/><div className=\"text-[10px] text-slate-400 mt-1\">Auto-filled · IST · cannot be changed</div></div><div><label className=\"text-xs font-bold text-slate-500 uppercase tracking-wide\">Call Time</label><input value={callTime} readOnly className=\"mt-2 w-full rounded-xl border border-slate-200 bg-slate-50 px-3 py-3 font-semibold text-slate-700 cursor-not-allowed\"/><div className=\"text-[10px] text-slate-400 mt-1\">Auto-filled · IST · cannot be changed</div></div></div><div><label className=\"text-sm font-bold text-slate-700\">Call Outcome / Lead Status <span className=\"text-red-600\">*</span></label><select value={leadStatus} onChange={e=>{setLeadStatus(e.target.value);if(terminalStatuses.includes(e.target.value)){setNextDate(\"\");setNextTime(\"\")}}} className=\"mt-2 w-full rounded-xl border border-slate-200 bg-white px-3 py-3 outline-none focus:border-blue-500\"><option value=\"\">Keep current status</option>{statuses.map(x=><option key={x}>{x}</option>)}</select>{terminalStatuses.includes(leadStatus)&&<div className=\"mt-2 rounded-xl bg-red-50 border border-red-100 text-red-700 p-3 text-sm font-semibold\">🚫 {leadStatus} — no further follow-up will be scheduled.</div>}</div>{!terminalStatuses.includes(leadStatus)&&<div><label className=\"text-sm font-bold text-slate-700\">Next Follow-Up <span className=\"text-red-600\">*</span></label><div className=\"text-xs text-slate-500 mt-1\">Mandatory after the call. Select the next call date and time.</div><div className=\"grid grid-cols-2 gap-3 mt-2\"><div><input type=\"date\" min={today()} max={maxFollowupDate()} value={nextDate} onChange={e=>setNextDate(e.target.value)} required className=\"w-full rounded-xl border border-slate-200 px-3 py-3 outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-100\"/><div className=\"text-[10px] text-slate-400 mt-1\">Choose next call date *</div></div><div><select value={nextTime} onChange={e=>setNextTime(e.target.value)} required className=\"w-full rounded-xl border border-slate-200 bg-white px-3 py-3 outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-100\"><option value=\"\">Select time</option>{timeOptions.map(x=><option key={x.value} value={x.value}>{x.label}</option>)}</select><div className=\"text-[10px] text-slate-400 mt-1\">09:00 AM – 06:00 PM IST · 30 min slots *</div></div></div></div>}<div><label className=\"text-sm font-bold text-slate-700\">What Happened Today? <span className=\"text-red-600\">*</span></label><textarea value={note} onChange={e=>setNote(e.target.value)} rows={6} placeholder=\"Write exactly what happened on today's call...\" className=\"mt-2 w-full rounded-xl border border-slate-200 px-4 py-3 outline-none resize-none focus:border-blue-500 focus:ring-2 focus:ring-blue-100\"/><div className=\"text-xs text-slate-400 mt-1\">This note will be permanently saved in the Follow-Up History.</div></div>{err&&<div className=\"rounded-xl bg-red-50 border border-red-100 text-red-700 p-3 text-sm font-medium\">{err}</div>}<div className=\"flex justify-end gap-3 pt-1\"><button onClick={onClose} className=\"rounded-xl border border-slate-200 px-5 py-3 font-semibold\">Cancel</button><button disabled={saving||!note.trim()||(!terminalStatuses.includes(leadStatus)&&(!nextDate||!nextTime))} onClick={save} className=\"rounded-xl bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 font-bold disabled:opacity-40 disabled:cursor-not-allowed\">{saving?\"Saving…\":\"Save Follow-Up\"}</button></div></div></div></div>}\n\n\nfunction DashboardPro({user,onOpenFollow,onNav}:{user:User,onOpenFollow:(f:Follow)=>void,onNav:(x:string)=>void}){\n const [d,setD]=useState<any>(null),[todayF,setTodayF]=useState<Follow[]>([]),[overdue,setOverdue]=useState<Follow[]>([]);\n useEffect(()=>{Promise.all([api('/api/dashboard'),api('/api/follow-ups?mode=today'),api('/api/follow-ups?mode=overdue')]).then(([a,b,c])=>{setD(a);setTodayF(b.items||[]);setOverdue(c.items||[])}).catch(()=>{})},[]);\n if(!d)return <div className=\"min-h-[60vh] flex items-center justify-center text-slate-400\">Loading dashboard…</div>;\n const c=d.counts||{},pipe=d.pipeline||[],perf=d.performance||[],programs=d.programs||[],countries=d.countries||[],maxProg=Math.max(1,...programs.map((x:any)=>Number(x.count)||0)),maxCountry=Math.max(1,...countries.map((x:any)=>Number(x.count)||0));\n const palette=[\"bg-blue-500\",\"bg-emerald-500\",\"bg-amber-400\",\"bg-rose-400\",\"bg-violet-500\",\"bg-cyan-500\"];\n const stat=(label:string,value:any,sub:string,icon:string,box:string,ink:string)=><div className={`rounded-2xl border p-4 shadow-sm ${box}`}><div className=\"flex items-center gap-3\"><div className={`h-11 w-11 shrink-0 rounded-xl flex items-center justify-center ${ink}`}><Icon name={icon} size={20}/></div><div className=\"min-w-0\"><div className=\"text-[11px] font-semibold text-slate-500 truncate\">{label}</div><div className=\"text-2xl font-extrabold text-[#102653] leading-tight\">{value??0}</div><div className=\"text-[10px] text-slate-500 mt-0.5\">{sub}</div></div></div></div>;\n const section=(title:string,action:string,go:()=>void,body:React.ReactNode,wide=false)=><section className={`rounded-2xl bg-white border border-slate-200 shadow-sm overflow-hidden ${wide?'lg:col-span-2':''}`}><div className=\"px-5 py-4 border-b border-slate-100 flex items-center justify-between\"><h3 className=\"font-bold text-[#102653]\">{title}</h3><button onClick={go} className=\"text-xs font-bold text-blue-600 hover:text-blue-800\">{action} →</button></div>{body}</section>;\n return <div className=\"space-y-5\">\n  <div className=\"flex flex-col xl:flex-row xl:items-end xl:justify-between gap-4\"><div><div className=\"flex items-center gap-2\"><h1 className=\"text-3xl font-extrabold tracking-tight text-[#102653]\">Welcome Back, {user.name}</h1><span className=\"h-8 w-8 rounded-full bg-amber-50 text-amber-500 flex items-center justify-center\"><Icon name=\"spark\" size={17}/></span></div><p className=\"text-sm text-slate-500 mt-1\">Here’s what’s happening with your Europe Careers CRM today.</p></div><div className=\"flex items-center gap-4\"><div className=\"hidden sm:block text-right text-xs text-slate-500\">{new Intl.DateTimeFormat('en-IN',{dateStyle:'full',timeZone:'Asia/Kolkata'}).format(new Date())}<br/><b className=\"text-slate-800 text-sm\">{new Intl.DateTimeFormat('en-IN',{timeStyle:'short',timeZone:'Asia/Kolkata'}).format(new Date())} IST</b></div><button onClick={()=>window.dispatchEvent(new CustomEvent('open-add-lead'))} className=\"rounded-xl bg-blue-600 hover:bg-blue-700 text-white px-5 py-3 font-bold shadow-sm\">＋ Add New Lead</button></div></div>\n  <div className=\"grid grid-cols-2 md:grid-cols-4 xl:grid-cols-7 gap-3\">{stat('Total Leads',c.total,'All time','users','bg-white border-slate-200','bg-blue-50 text-blue-600')}{stat('New Leads',c.new_leads,'Created today','users','bg-emerald-50/60 border-emerald-100','bg-emerald-100 text-emerald-600')}{stat(\"Today's Follow-Ups\",c.today,'Due today','phone','bg-amber-50/60 border-amber-100','bg-amber-100 text-amber-600')}{stat('Overdue Follow-Ups',c.overdue,'Past due','clock','bg-rose-50/60 border-rose-100','bg-rose-100 text-rose-600')}{stat('Pending Follow-Ups',c.pending,'Upcoming','list','bg-violet-50/60 border-violet-100','bg-violet-100 text-violet-600')}{stat('Completed Follow-Ups',c.completed,'Total','check','bg-emerald-50/60 border-emerald-100','bg-emerald-100 text-emerald-600')}{stat('Converted Leads',c.converted,'Success','chart','bg-blue-50/60 border-blue-100','bg-blue-100 text-blue-600')}</div>\n  <div className=\"grid lg:grid-cols-3 gap-5\">\n   {section(`Today’s Follow-Ups (${todayF.length})`,'View All',()=>onNav('Follow-Ups'),<div className=\"p-3\">{todayF.slice(0,5).map(f=><div key={f.id} className=\"flex items-center gap-3 px-2 py-3 border-b last:border-0\"><div className=\"h-9 w-9 rounded-lg bg-blue-50 text-blue-600 flex items-center justify-center\">☎</div><div className=\"min-w-0 flex-1\"><div className=\"font-semibold text-sm truncate\">{f.candidate_name}</div><div className=\"text-[11px] text-slate-400 flex items-center gap-1.5 flex-wrap\"><span>{f.ec_id} ·</span><ProgramBadge text={f.program}/></div></div><span className=\"text-xs font-semibold text-slate-600 whitespace-nowrap\">{f.scheduled_time}</span><button onClick={()=>onOpenFollow(f)} className=\"h-8 w-8 rounded-lg bg-blue-600 text-white\">→</button></div>)}{!todayF.length&&<div className=\"py-12 text-center text-sm text-slate-400\">No calls due today.</div>}</div>)}\n   {section(`Overdue Follow-Ups (${overdue.length})`,'View All',()=>onNav('Follow-Ups'),<div className=\"p-3\">{overdue.slice(0,5).map(f=><div key={f.id} className=\"flex items-center gap-3 px-2 py-3 border-b last:border-0\"><div className=\"h-9 w-9 rounded-lg bg-rose-50 text-rose-600 flex items-center justify-center\">◷</div><div className=\"min-w-0 flex-1\"><div className=\"font-semibold text-sm truncate\">{f.candidate_name}</div><div className=\"text-[11px] text-slate-400 flex items-center gap-1.5 flex-wrap\"><span>{f.ec_id} ·</span><ProgramBadge text={f.program}/></div></div><Badge text=\"OVERDUE\"/><button onClick={()=>onOpenFollow(f)} className=\"h-8 w-8 rounded-lg bg-blue-600 text-white\">→</button></div>)}{!overdue.length&&<div className=\"py-12 text-center text-sm text-slate-400\">No overdue calls.</div>}</div>)}\n   {section('Upcoming Follow-Ups','View All',()=>onNav('Follow-Ups'),<div className=\"p-3\">{(d.upcoming||[]).slice(0,5).map((f:any)=><div key={f.id} className=\"flex items-center gap-3 px-2 py-3 border-b last:border-0\"><div className=\"h-9 w-9 rounded-lg bg-violet-50 text-violet-600 flex items-center justify-center\">▣</div><div className=\"min-w-0 flex-1\"><div className=\"font-semibold text-sm truncate\">{f.candidate_name}</div><div className=\"text-[11px] text-slate-400 flex items-center gap-1.5 flex-wrap\"><span>{f.ec_id} ·</span><ProgramBadge text={f.program}/></div></div><span className=\"text-[11px] font-semibold text-slate-600 whitespace-nowrap\">{f.scheduled_date}<br/>{f.scheduled_time}</span></div>)}{!(d.upcoming||[]).length&&<div className=\"py-12 text-center text-sm text-slate-400\">No upcoming follow-ups.</div>}</div>)}\n  </div>\n  <div className=\"grid lg:grid-cols-3 gap-5\">\n   {section('Lead Pipeline','View Details',()=>onNav('Leads'),<div className=\"p-5 flex items-center gap-5 min-h-[235px]\"><div className=\"relative h-40 w-40 shrink-0 rounded-full\" style={{background:`conic-gradient(${pipe.slice(0,6).map((x:any,i:number)=>{const a=pipe.slice(0,i).reduce((n:any,z:any)=>n+(Number(z.count)||0),0)/Math.max(1,pipe.reduce((n:any,z:any)=>n+(Number(z.count)||0),0))*360;const b=pipe.slice(0,i+1).reduce((n:any,z:any)=>n+(Number(z.count)||0),0)/Math.max(1,pipe.reduce((n:any,z:any)=>n+(Number(z.count)||0),0))*360;return `${['#2878e8','#27b98b','#f5bd4f','#ef6b7a','#8b5cf6','#24b6bd'][i]} ${a}deg ${b}deg`}).join(',')}`}}><div className=\"absolute inset-7 rounded-full bg-white flex flex-col items-center justify-center shadow-inner\"><b className=\"text-2xl text-[#102653]\">{c.total||0}</b><span className=\"text-[10px] text-slate-500\">Total Leads</span></div></div><div className=\"space-y-2.5 text-xs flex-1\">{pipe.slice(0,6).map((x:any,i:number)=><div key={x.status} className=\"flex justify-between items-center gap-2\"><span className=\"flex items-center gap-2\"><i className={`h-2.5 w-2.5 rounded-full ${palette[i]}`}></i>{x.status}</span><b>{x.count}</b></div>)}</div></div>)}\n   {section('Leads by Program','View Details',()=>onNav('Leads'),<div className=\"p-5 h-[235px] flex items-end gap-3\">{programs.slice(0,7).map((x:any,i:number)=><div key={x.label} className=\"flex-1 flex flex-col items-center gap-1.5 h-full justify-end\"><b className=\"text-[11px]\">{x.count}</b><div className={`w-full max-w-12 rounded-t-lg ${palette[i%palette.length]}`} style={{height:`${Math.max(14,(Number(x.count)||0)/maxProg*145)}px`}}></div><span className=\"text-[9px] text-slate-500 text-center leading-tight line-clamp-2\">{x.label}</span></div>)}</div>)}\n   {section('Leads by Country','View Details',()=>onNav('Leads'),<div className=\"p-5 space-y-4 min-h-[235px]\">{countries.slice(0,6).map((x:any,i:number)=><div key={x.label}><div className=\"flex justify-between text-xs mb-1.5\"><span>{x.label}</span><b>{x.count}</b></div><div className=\"h-2 rounded-full bg-slate-100 overflow-hidden\"><div className={`h-full rounded-full ${palette[i%palette.length]}`} style={{width:`${Math.max(5,(Number(x.count)||0)/maxCountry*100)}%`}}/></div></div>)}{!countries.length&&<div className=\"text-center text-sm text-slate-400 pt-16\">No country data yet.</div>}</div>)}\n  </div>\n  <div className=\"grid lg:grid-cols-5 gap-5\">\n   {section(user.role==='super_admin'?'Counsellor Performance':'My Performance','View All',()=>onNav(user.role==='super_admin'?'Reports':'Follow-Ups'),<div className=\"overflow-auto\"><table className=\"w-full text-sm\"><thead className=\"bg-slate-50\"><tr>{['Counsellor','Assigned','Due','Done','Missed','Missing','Won','Done %'].map(h=><th key={h} className=\"px-4 py-3 text-left text-[11px] text-slate-500 font-bold whitespace-nowrap\">{h}</th>)}</tr></thead><tbody>{perf.map((p:any)=><tr key={p.id} className=\"border-t border-slate-100\"><td className=\"px-4 py-3 font-semibold whitespace-nowrap\">{p.name}</td><td className=\"px-4 py-3\">{p.assigned??0}</td><td className=\"px-4 py-3\">{p.due??0}</td><td className=\"px-4 py-3 text-emerald-600 font-semibold\">{p.calls_completed??0}</td><td className=\"px-4 py-3 text-red-600 font-semibold\">{p.overdue??0}</td><td className=\"px-4 py-3 text-amber-600 font-semibold\">{p.missing??0}</td><td className=\"px-4 py-3 text-emerald-700 font-bold\">{p.conversions??0}</td><td className=\"px-4 py-3 font-bold\">{Math.round((Number(p.calls_completed)||0)/Math.max(1,(Number(p.calls_completed)||0)+(Number(p.overdue)||0))*100)}%</td></tr>)}</tbody></table>{!perf.length&&<div className=\"p-10 text-center text-sm text-slate-400\">No counsellor activity yet.</div>}</div>,true)}\n   {section('Recent Leads','View All',()=>onNav(user.role==='super_admin'?'Leads':'My Leads'),<div className=\"overflow-auto\"><table className=\"w-full text-sm\"><thead className=\"bg-slate-50\"><tr>{['Name','EC ID','Program','Source','Status','Created'].map(h=><th key={h} className=\"px-4 py-3 text-left text-[11px] text-slate-500 font-bold whitespace-nowrap\">{h}</th>)}</tr></thead><tbody><RecentLeads/></tbody></table></div>,true)}\n  </div>\n </div>\n}\n\n\nfunction FollowUpDataModalV2({lead,onClose,onAdd}:{lead:Lead,onClose:()=>void,onAdd:(l:Lead)=>void}){\n const [d,setD]=useState<any>(null);\n useEffect(()=>{api(`/api/leads/${lead.id}`).then(setD).catch(()=>{})},[lead.id]);\n const history=(d?.history||[]).slice();\n const pending=history.find((f:any)=>f.status==='pending');\n const completed=history.filter((f:any)=>f.status==='completed').sort((a:any,b:any)=>String(b.completed_at||b.id).localeCompare(String(a.completed_at||a.id)));\n const last=completed[0];\n const status=followupStatus({...lead,next_followup:pending?`${pending.scheduled_date} ${pending.scheduled_time}`:lead.next_followup});\n const statusCfg:any={OVERDUE:[\"🔴 OVERDUE\",\"border-red-200 bg-red-50 text-red-700\"],TODAY:[\"🟠 DUE TODAY\",\"border-orange-200 bg-orange-50 text-orange-700\"],UPCOMING:[\"🟢 UPCOMING\",\"border-emerald-200 bg-emerald-50 text-emerald-700\"],MISSING:[\"⚠️ FOLLOW-UP MISSING\",\"border-amber-200 bg-amber-50 text-amber-700\"]};\n const fmt=(x:any)=>x?new Date(x).toLocaleString('en-IN',{dateStyle:'medium',timeStyle:'short',timeZone:'Asia/Kolkata'}):'—';\n return <div className=\"fixed inset-0 z-50 bg-slate-950/60 flex items-center justify-center p-3 md:p-5\"><div className=\"w-full max-w-5xl max-h-[94vh] overflow-hidden rounded-2xl bg-white shadow-2xl flex flex-col\">\n  <div className=\"bg-[#142b4b] text-white px-5 md:px-7 py-5 flex items-center justify-between shrink-0\"><div><div className=\"flex items-center gap-3\"><h3 className=\"text-xl md:text-2xl font-bold\">Follow-Up Data</h3>{status&&<span className=\"rounded-full bg-white/10 border border-white/20 px-3 py-1 text-[11px] font-bold\">{statusCfg[status]?.[0]}</span>}</div><p className=\"text-sm text-slate-300 mt-1\">{lead.candidate_name} · {lead.ec_id} · {lead.phone}</p></div><div className=\"flex items-center gap-2\"><button onClick={onClose} className=\"text-2xl text-slate-300 hover:text-white px-2\">×</button></div></div>\n  {!d?<div className=\"p-14 text-center text-slate-400\">Loading follow-up data…</div>:<div className=\"overflow-auto p-5 md:p-7 space-y-5\">\n   {pending&&<section className={`sticky top-0 z-10 rounded-2xl border p-5 shadow-lg ring-1 ring-black/5 ${statusCfg[status]?.[1]||'border-blue-200 bg-blue-50 text-blue-700'}`}><div className=\"flex flex-col md:flex-row md:items-center md:justify-between gap-4\"><div><div className=\"flex items-center gap-2\"><div className=\"text-xs font-extrabold uppercase tracking-wider opacity-70\">NEXT CALL</div>{status&&<span className=\"rounded-full bg-white/70 border border-black/5 px-2.5 py-1 text-[10px] font-extrabold\">{statusCfg[status]?.[0]}</span>}</div><div className=\"text-2xl font-extrabold mt-1\">{new Date(`${pending.scheduled_date}T${pending.scheduled_time}:00+05:30`).toLocaleDateString('en-IN',{day:'2-digit',month:'short',year:'numeric',timeZone:'Asia/Kolkata'})} · {pending.scheduled_time}</div><div className=\"text-sm mt-1\">Pending call · {pending.counsellor_name||lead.counsellor_name||'Assigned counsellor'}</div></div></div></section>}\n   {!pending&&!terminalStatuses.includes(String(lead.status||''))&&<section className=\"rounded-2xl border-2 border-red-200 bg-red-50 p-5 flex flex-col md:flex-row md:items-center md:justify-between gap-4 shadow-sm\"><div><div className=\"flex items-center gap-2\"><span className=\"h-8 w-8 rounded-full bg-red-100 text-red-600 flex items-center justify-center font-bold\">!</span><div><div className=\"font-extrabold text-red-800\">🚨 FOLLOW-UP MISSING</div><div className=\"text-sm text-red-700 mt-1\">This active lead requires your next call schedule.</div></div></div></div><button onClick={()=>onAdd(lead)} className=\"rounded-xl bg-red-600 hover:bg-red-700 text-white px-5 py-3 font-bold shadow-sm\">＋ Schedule Next Call</button></section>}\n   <div className=\"grid grid-cols-2 md:grid-cols-4 gap-3\"><div className=\"rounded-2xl border border-slate-200 bg-slate-50 p-4\"><div className=\"text-[11px] font-bold text-slate-500 uppercase\">Total Calls</div><div className=\"text-2xl font-extrabold text-[#102653] mt-1\">{completed.length}</div></div><div className=\"rounded-2xl border border-emerald-100 bg-emerald-50/60 p-4\"><div className=\"text-[11px] font-bold text-emerald-600 uppercase\">Completed</div><div className=\"text-2xl font-extrabold text-[#102653] mt-1\">{completed.length}</div></div><div className=\"rounded-2xl border border-blue-100 bg-blue-50/60 p-4\"><div className=\"text-[11px] font-bold text-blue-600 uppercase\">Next Call</div><div className=\"text-sm font-extrabold text-[#102653] mt-2\">{pending?`${pending.scheduled_date} · ${pending.scheduled_time}`:'Not scheduled'}</div></div><div className=\"rounded-2xl border border-slate-200 bg-white p-4\"><div className=\"text-[11px] font-bold text-slate-500 uppercase\">Last Contact</div><div className=\"text-sm font-extrabold text-[#102653] mt-2\">{last?.completed_at?fmt(last.completed_at):'No call yet'}</div></div></div>\n   <section className=\"rounded-2xl border border-slate-200 overflow-hidden\"><div className=\"px-5 py-4 bg-slate-50 border-b border-slate-200 flex items-center justify-between\"><div><h4 className=\"font-extrabold text-[#102653]\">Call Timeline</h4><p className=\"text-xs text-slate-500 mt-1\">Immutable history · newest call first</p></div><button onClick={()=>onAdd(lead)} className=\"rounded-xl bg-blue-600 text-white px-4 py-2.5 font-bold\">＋ Add Follow-Up</button></div><div className=\"p-5 md:p-6 space-y-4\">{history.map((f:any,i:number)=>{const done=f.status==='completed';return <div key={f.id} className=\"relative pl-8\"><div className={`absolute left-0 top-1 h-5 w-5 rounded-full flex items-center justify-center text-[10px] ${done?'bg-emerald-100 text-emerald-700':'bg-blue-100 text-blue-700'}`}>{done?'✓':'○'}</div>{i<history.length-1&&<div className=\"absolute left-[9px] top-6 bottom-[-18px] w-px bg-slate-200\"/>}<div className=\"rounded-2xl border border-slate-200 bg-white p-4 md:p-5 shadow-sm\"><div className=\"flex flex-col md:flex-row md:items-start md:justify-between gap-3\"><div><div className=\"flex flex-wrap items-center gap-2\"><span className=\"font-extrabold text-[#102653]\">Call #{history.length-i}</span><Badge text={done?'Completed':'Pending'}/></div><div className=\"text-xs text-slate-500 mt-1\">{done?`Called: ${fmt(f.completed_at)}`:`Scheduled: ${f.scheduled_date} · ${f.scheduled_time}`} · {f.counsellor_name||'Assigned counsellor'}</div></div>{f.next_followup_date&&<div className=\"rounded-lg bg-amber-50 text-amber-700 px-3 py-2 text-xs font-bold whitespace-nowrap\">Next: {f.next_followup_date} · {f.next_followup_time}</div>}</div>{f.note&&<div className=\"mt-4 rounded-xl bg-slate-50 border border-slate-100 p-4 text-sm leading-6\"><div className=\"text-[11px] font-extrabold uppercase tracking-wide text-slate-500\">What Happened Today</div><div className=\"mt-1 whitespace-pre-wrap text-slate-700\">{f.note}</div></div>}</div></div>})}{!history.length&&<div className=\"py-12 text-center text-slate-400\">No follow-up history yet. Start the first call.</div>}</div></section>\n  </div>}\n </div></div>\n}\n","createdAt",["D",1789202026418],"branchVersion","branchId","398d1cc9-8d86-4c4c-b719-baeac445feeb","id","c2c4de1c-ac75-46c6-bae3-140bce9b41c9","europe-careers-crm",["D",1789029036131],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Europe Careers call-focused CRM","imageUrl","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/89e2c936-3779-44fe-ac05-33566fc05a01/square512?exp=1789592399&sig=8840317cc661d076e1200125e983ff9ff5e38945875ab81314972722cf34898e","f007d3fe-0142-4134-8bc5-d309aa62c030","pinnedFileId","01a08a70-b0f3-7058-9d1e-0aa6e04fe885","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","01a085c1-b560-76ae-8210-c20c2a71a6a5","tursoName","c2c4de1cac7546c6bae3140bce9b41c9","tursoHostname","c2c4de1cac7546c6bae3140bce9b41c9-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789550457365],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_102":101,"_110":106},"org",{"_102":101,"_103":104,"_105":106,"_18":57,"_107":108,"_109":25},"branch",{"_13":91,"_32":92,"_44":43,"_93":45,"_94":-5,"_95":-5,"_96":-5,"_97":-5,"_98":-5,"_99":46,"_100":101},"isOwned",401,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","shubhamsingh","handle","displayName","Shubham Singh","avatar","https://lh3.googleusercontent.com/a/ACg8ocJsbxTyyQF93TMC5EMaDyttNcoees_fgoJx-kjJsyD3ARH3vXQ=s96-c","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_44":45,"_32":46,"_39":254,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":56,"_18":57,"_58":59,"_60":61,"_62":-5,"_63":-5,"_64":65,"_66":67,"_68":69,"_70":71,"_72":255,"_74":-5,"_75":76,"_77":76,"_78":79,"_80":79,"_81":79,"_82":76,"_83":76,"_84":256,"_86":257,"_88":258,"_90":25},"tree",[187,194,195,196,197],"files",[187,188,189,190,191,192,193,194,195,196,197],"counts",{"_177":65,"_178":161,"_179":65,"_180":181,"_182":183},"contents",[133,134,135,136,137],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_44":171,"_32":172,"_30":173,"_140":-5,"_42":43,"_41":161,"_142":61,"_39":174,"_13":65,"_34":175,"_36":-5,"_24":25,"_147":-5,"_27":176},{"_44":165,"_32":166,"_30":167,"_140":-5,"_42":43,"_41":161,"_142":61,"_39":168,"_13":65,"_34":20,"_36":169,"_24":25,"_147":-5,"_27":170},{"_44":158,"_32":159,"_30":160,"_140":-5,"_42":43,"_41":161,"_142":61,"_39":162,"_13":65,"_34":20,"_36":163,"_24":25,"_147":-5,"_27":164},{"_44":150,"_32":151,"_30":152,"_140":-5,"_42":43,"_41":153,"_142":61,"_39":154,"_13":155,"_34":35,"_36":156,"_24":25,"_147":-5,"_27":157},{"_44":138,"_32":139,"_30":59,"_140":-5,"_42":43,"_41":141,"_142":25,"_39":143,"_13":144,"_34":145,"_36":146,"_24":25,"_147":148,"_27":149},"c6577008-1003-42c2-aed2-24c491a1a134","index.ts","parentId",367,"latest",["D",1789202008634],87,"http","import { parseVal, serveImmutableFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport * as XLSX from \"npm:xlsx\";\nimport { Root } from \"./frontend/root.tsx\";\nimport { initDb, sqlite } from \"./db.ts\";\n\nconst app = new Hono();\nawait initDb();\nawait sqlite.execute(`CREATE TABLE IF NOT EXISTS activity_log (id INTEGER PRIMARY KEY AUTOINCREMENT,user_id INTEGER,lead_id INTEGER,action TEXT NOT NULL,details TEXT DEFAULT '',created_at TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP)`);\nconst logActivity=async(user:any,action:string,leadId:number|null=null,details:string=\"\")=>{try{await sqlite.execute({sql:`INSERT INTO activity_log(user_id,lead_id,action,details,created_at) VALUES(?,?,?,?,datetime('now'))`,args:[Number(user?.user_id)||null,leadId,action,details]})}catch{}};\nconst STATUSES=[\"New\",\"Contacted\",\"Interested\",\"Follow-Up\",\"Qualified\",\"Converted\",\"Not Interested\",\"Irrelevant\",\"Not Reachable\",\"Lost\"];\nconst nowParts=()=>new Intl.DateTimeFormat(\"en-CA\",{timeZone:\"Asia/Kolkata\",year:\"numeric\",month:\"2-digit\",day:\"2-digit\",hour:\"2-digit\",minute:\"2-digit\",hour12:false}).formatToParts(new Date()).reduce((a:any,p)=>({...a,[p.type]:p.value}),{});\nconst todayIST=()=>{const p=nowParts();return `${p.year}-${p.month}-${p.day}`};\nconst timeIST=()=>{const p=nowParts();return `${p.hour}:${p.minute}`};\nconst nowIST=()=>`${todayIST()}T${timeIST()}:00+05:30`;\nconst validTime=(t:string)=>/^([01]\\d|2[0-3]):[0-5]\\d$/.test(t)&&t>=\"09:00\"&&t<=\"18:00\";\nconst futureSchedule=(d:string,t:string)=>{const td=todayIST(),tm=timeIST();return d>td||(d===td&&t>=tm)};const within15Days=(d:string,t:string)=>{const td=todayIST(),max=new Date(`${td}T00:00:00+05:30`);max.setDate(max.getDate()+15);return new Date(`${d}T${t}:00+05:30`)<=max};\nconst token=()=>crypto.randomUUID()+crypto.randomUUID();\nasync function auth(c:any,next:any){const sid=c.req.header(\"X-Session-ID\");if(!sid)return c.json({error:\"Authentication required\"},401);const r=await sqlite.execute({sql:`SELECT s.user_id,u.name,u.email,u.role,u.status FROM sessions s JOIN users u ON u.id=s.user_id WHERE s.token=? AND u.status='active' LIMIT 1`,args:[sid]});if(!r.rows[0])return c.json({error:\"Session expired. Please login again.\"},401);c.set(\"user\",r.rows[0]);return next()}\nconst admin=(c:any)=>c.get(\"user\")?.role===\"super_admin\";\napp.get(\"/\",c=>c.html(Root()));app.get(\"/__immutable/*\",c=>serveImmutableFile(c.req.path));app.get(\"/source\",c=>c.redirect(parseVal().links.self.val));\napp.post(\"/api/login\",async c=>{const b=await c.req.json();const id=String(b.identifier||\"\").trim().toLowerCase();const r=await sqlite.execute({sql:`SELECT id,name,email,role,status FROM users WHERE lower(email)=? AND password=? AND status='active' LIMIT 1`,args:[id,String(b.password||\"\")]});if(!r.rows[0])return c.json({error:\"Invalid login credentials\"},401);const sid=token();await sqlite.execute({sql:`CREATE TABLE IF NOT EXISTS sessions(token TEXT PRIMARY KEY,user_id INTEGER NOT NULL,created_at TEXT NOT NULL)`});await sqlite.execute({sql:`INSERT INTO sessions(token,user_id,created_at) VALUES(?,?,?)`,args:[sid,Number((r.rows[0] as any).id),nowIST()]});return c.json({user:r.rows[0],sessionId:sid})});\napp.post(\"/api/logout\",auth,async c=>{const sid=c.req.header(\"X-Session-ID\");await sqlite.execute({sql:`DELETE FROM sessions WHERE token=?`,args:[sid]});return c.json({ok:true})});\napp.get(\"/api/me\",auth,c=>c.json({user:c.get(\"user\"),today:todayIST(),time:timeIST()}));\napp.post(\"/api/admin/change-password\",auth,async c=>{if(!admin(c))return c.json({error:\"Admin access required\"},403);const b=await c.req.json(),current=String(b.current_password||\"\"),next=String(b.new_password||\"\");if(next.length<12)return c.json({error:\"New password must be at least 12 characters\"},400);if(next===current)return c.json({error:\"New password must be different from the current password\"},400);const u=c.get(\"user\");const r=await sqlite.execute({sql:`SELECT id FROM users WHERE id=? AND password=? AND role='super_admin' AND status='active' LIMIT 1`,args:[Number(u.user_id),current]});if(!r.rows[0])return c.json({error:\"Current password is incorrect\"},400);await sqlite.execute({sql:`UPDATE users SET password=? WHERE id=? AND role='super_admin'`,args:[next,Number(u.user_id)]});return c.json({ok:true,message:\"Password changed successfully. Use the new password next time you sign in.\"})});\napp.get(\"/api/counsellors\",auth,async c=>{const u=c.get(\"user\");const r=u.role==='super_admin'?await sqlite.execute(`SELECT id,name,email,role,status,created_at FROM users WHERE role='counsellor' ORDER BY name`):await sqlite.execute({sql:`SELECT id,name,email,role,status,created_at FROM users WHERE id=? AND role='counsellor'`,args:[Number(u.user_id)]});return c.json({items:r.rows})});\napp.post(\"/api/counsellors\",auth,async c=>{if(!admin(c))return c.json({error:\"Admin access required\"},403);const b=await c.req.json();if(!b.name||!b.email||!b.password)return c.json({error:\"Name, email and password required\"},400);try{await sqlite.execute({sql:`INSERT INTO users(name,email,password,role) VALUES(?,?,?,'counsellor')`,args:[b.name.trim(),b.email.trim().toLowerCase(),b.password]});return c.json({ok:true})}catch{return c.json({error:\"Email already exists\"},400)}});\napp.put(\"/api/counsellors/:id\",auth,async c=>{if(!admin(c))return c.json({error:\"Admin access required\"},403);const id=Number(c.req.param(\"id\")),b=await c.req.json(),name=String(b.name||\"\").trim(),email=String(b.email||\"\").trim().toLowerCase(),password=String(b.password||\"\");if(!name||!email)return c.json({error:\"Name and email are required\"},400);const exists=await sqlite.execute({sql:`SELECT id FROM users WHERE lower(email)=? AND id<>? LIMIT 1`,args:[email,id]});if(exists.rows[0])return c.json({error:\"Email already exists\"},400);const status=b.status===\"inactive\"?\"inactive\":\"active\";try{const result=password?await sqlite.execute({sql:`UPDATE users SET name=?,email=?,password=?,status=? WHERE id=? AND role='counsellor'`,args:[name,email,password,status,id]}):await sqlite.execute({sql:`UPDATE users SET name=?,email=?,status=? WHERE id=? AND role='counsellor'`,args:[name,email,status,id]});if(Number(result.rowsAffected||0)!==1)return c.json({error:\"Counsellor not found or could not be updated\"},404);const updated=await sqlite.execute({sql:`SELECT id,name,email,role,status,created_at FROM users WHERE id=? AND role='counsellor' LIMIT 1`,args:[id]});return c.json({ok:true,user:updated.rows[0]})}catch{return c.json({error:\"Could not update counsellor\"},400)}});\napp.delete(\"/api/counsellors/:id\",auth,async c=>{if(!admin(c))return c.json({error:\"Admin access required\"},403);const id=Number(c.req.param(\"id\"));const x=await sqlite.execute({sql:`SELECT COUNT(*) c FROM leads WHERE counsellor_id=?`,args:[id]});if(Number((x.rows[0] as any).c)>0)return c.json({error:\"Reassign all leads before deleting this counsellor\"},400);await sqlite.execute({sql:`DELETE FROM users WHERE id=? AND role='counsellor'`,args:[id]});return c.json({ok:true})});\napp.get(\"/api/leads\",auth,async c=>{const q=c.req.query(),u=c.get(\"user\"),p:any[]=[],w:string[]=[];if(u.role!==\"super_admin\"){w.push(`l.counsellor_id=?`);p.push(Number(u.user_id))}if(q.search){w.push(`(l.candidate_name LIKE ? OR l.ec_id LIKE ? OR l.phone LIKE ? OR l.email LIKE ?)`);const s=`%${q.search}%`;p.push(s,s,s,s)}for(const [k,col] of [[\"country\",\"l.country\"],[\"program\",\"l.program\"],[\"counsellor\",\"l.counsellor_id\"],[\"status\",\"l.status\"]] as any[])if(q[k]){w.push(`${col}=?`);p.push(q[k])}const page=Math.max(1,Number(q.page)||1),limit=Math.min(100,Math.max(10,Number(q.limit)||50)),where=w.length?`WHERE ${w.join(' AND ')}`:\"\";const total=await sqlite.execute({sql:`SELECT COUNT(*) total FROM leads l ${where}`,args:p});const r=await sqlite.execute({sql:`SELECT l.*,u.name counsellor_name,(SELECT scheduled_date||' '||scheduled_time FROM follow_ups f WHERE f.lead_id=l.id AND f.status='pending' ORDER BY f.scheduled_date,f.scheduled_time LIMIT 1) next_followup,(SELECT scheduled_date||' '||scheduled_time FROM follow_ups f WHERE f.lead_id=l.id AND f.status='completed' ORDER BY f.id DESC LIMIT 1) last_followup,(SELECT note FROM follow_ups f WHERE f.lead_id=l.id AND f.status='completed' ORDER BY f.id DESC LIMIT 1) latest_note FROM leads l LEFT JOIN users u ON u.id=l.counsellor_id ${where} ORDER BY l.created_at DESC,l.id DESC LIMIT ? OFFSET ?`,args:[...p,limit,(page-1)*limit]});const n=Number((total.rows[0] as any)?.total||0);return c.json({items:r.rows,page,limit,total:n,totalPages:Math.max(1,Math.ceil(n/limit))})});\napp.post(\"/api/leads\",auth,async c=>{const u=c.get(\"user\");const b=await c.req.json(),candidateName=String(b.candidate_name||\"\").trim(),phone=String(b.phone||\"\").trim(),status=String(b.status||\"New\"),cid=u.role==='super_admin'?Number(b.counsellor_id||0):Number(u.user_id),fd=String(b.first_followup_date||\"\"),ft=String(b.first_followup_time||\"\"),fn=String(b.first_followup_note||\"\").trim();if(!candidateName||!phone||phone===\"+91\")return c.json({error:\"Candidate Name and a valid phone number are required\"},400);if(!STATUSES.includes(status))return c.json({error:\"Invalid status\"},400);const terminal=[\"Converted\",\"Lost\",\"Not Interested\",\"Irrelevant\"].includes(status);if(!terminal){if(!cid)return c.json({error:\"Counsellor and Next Follow-Up are required for every active lead\"},400);if(!/^\\d{4}-\\d{2}-\\d{2}$/.test(fd)||!ft||!validTime(ft))return c.json({error:\"Counsellor and Next Follow-Up Date/Time are required. Time must be 09:00–18:00 IST\"},400);if(fn.length<2)return c.json({error:\"What Happened Today? is required for the first follow-up\"},400);const td=todayIST(),tm=timeIST();if(fd<td||(fd===td&&ft<tm))return c.json({error:\"Next Follow-Up cannot be scheduled in the past\"},400);if(!within15Days(fd,ft))return c.json({error:\"Next Follow-Up cannot be scheduled more than 15 days ahead\"},400)}const ecId=String(b.ec_id||\"\").trim()||`EC-${crypto.randomUUID().slice(0,6).toUpperCase()}`;try{const r=await sqlite.execute({sql:`INSERT INTO leads(candidate_name,ec_id,phone,email,country,program,counsellor_id,status,lead_type,dob,current_city,qualification,experience,language_level,preferred_country,source,lead_temperature,notes,created_at,updated_at) VALUES(?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,datetime('now'),datetime('now'))`,args:[candidateName,ecId,phone,b.email||\"\",b.country||\"\",b.program||\"\",cid||null,status,b.lead_type||\"\",b.dob||\"\",b.current_city||\"\",b.qualification||\"\",b.experience||\"\",b.language_level||\"\",b.preferred_country||\"\",b.source||\"CRM\",b.lead_temperature||\"Cold\",b.notes||\"\"]});const id=Number(r.lastInsertRowid);if(!terminal){const createdDate=todayIST(),createdTime=timeIST();await sqlite.batch([{sql:`INSERT INTO follow_ups(lead_id,counsellor_id,scheduled_date,scheduled_time,completed_at,note,next_followup_date,next_followup_time,status,created_at) VALUES(?,?,?,?,?,?,?,?, 'completed',datetime('now'))`,args:[id,cid,createdDate,createdTime,nowIST(),fn,fd,ft]},{sql:`INSERT INTO follow_ups(lead_id,counsellor_id,scheduled_date,scheduled_time,status,created_at) VALUES(?,?,?,?, 'pending',datetime('now'))`,args:[id,cid,fd,ft]}])}await logActivity(c.get('user'),'Lead created',id,`${candidateName} · ${ecId}${!terminal?` · first follow-up recorded ${todayIST()} ${timeIST()} · next ${fd} ${ft}`:' · terminal status'}`);return c.json({id,ec_id:ecId})}catch{return c.json({error:\"EC ID already exists\"},400)}});\napp.put(\"/api/leads/:id\",auth,async c=>{const raw=await c.req.json(),id=Number(c.req.param(\"id\")),u=c.get(\"user\"),candidateName=String(raw.candidate_name||\"\").trim(),phone=String(raw.phone||\"\").trim();if(u.role!==\"super_admin\")return c.json({error:\"Counsellors cannot edit lead records. Use the calling workflow only.\"},403);if(!candidateName||!phone||phone===\"+91\")return c.json({error:\"Candidate Name and a valid phone number are required\"},400);const own=await sqlite.execute({sql:`SELECT counsellor_id,ec_id FROM leads WHERE id=?`,args:[id]});if(!own.rows[0])return c.json({error:\"Lead not found\"},404);if(u.role!==\"super_admin\"&&Number((own.rows[0] as any).counsellor_id)!==Number(u.user_id))return c.json({error:\"You can only edit assigned leads\"},403);const ecId=String(raw.ec_id||\"\").trim()||String((own.rows[0] as any).ec_id||\"\")||`EC-${crypto.randomUUID().slice(0,6).toUpperCase()}`;if(!STATUSES.includes(raw.status))return c.json({error:\"Invalid status\"},400);const terminal=[\"Converted\",\"Lost\",\"Not Interested\",\"Irrelevant\"].includes(String(raw.status));if(!terminal){const fd=String(raw.first_followup_date||\"\"),ft=String(raw.first_followup_time||\"\");if(/^\\d{4}-\\d{2}-\\d{2}$/.test(fd)&&validTime(ft)&&!within15Days(fd,ft))return c.json({error:\"Next Follow-Up cannot be scheduled more than 15 days ahead\"},400);if(!raw.counsellor_id||!/^\\d{4}-\\d{2}-\\d{2}$/.test(fd)||!validTime(ft)||!futureSchedule(fd,ft)||String(raw.first_followup_note||\"\").trim().length<2){const pending=await sqlite.execute({sql:`SELECT id FROM follow_ups WHERE lead_id=? AND status='pending' LIMIT 1`,args:[id]});if(!pending.rows[0])return c.json({error:\"Active leads must have a pending Follow-Up. Schedule the next call before saving this status.\"},400)}}await sqlite.execute({sql:`UPDATE leads SET candidate_name=?,ec_id=?,phone=?,email=?,country=?,program=?,counsellor_id=?,status=?,lead_type=?,dob=?,current_city=?,qualification=?,experience=?,language_level=?,preferred_country=?,source=?,lead_temperature=?,notes=?,updated_at=datetime('now') WHERE id=?`,args:[candidateName,ecId,phone,raw.email||\"\",raw.country||\"\",raw.program||\"\",raw.counsellor_id?Number(raw.counsellor_id):null,raw.status,raw.lead_type||\"\",raw.dob||\"\",raw.current_city||\"\",raw.qualification||\"\",raw.experience||\"\",raw.language_level||\"\",raw.preferred_country||\"\",raw.source||\"CRM\",raw.lead_temperature||\"Cold\",raw.notes||\"\",id]});if(terminal)await sqlite.execute({sql:`DELETE FROM follow_ups WHERE lead_id=? AND status='pending'`,args:[id]});await logActivity(u,'Lead updated',id,`${candidateName} · ${ecId} · ${raw.status}`);return c.json({ok:true,ec_id:ecId})});\napp.delete(\"/api/leads/:id\",auth,async c=>{if(!admin(c))return c.json({error:\"Admin access required\"},403);const id=Number(c.req.param(\"id\"));const x=await sqlite.execute({sql:`SELECT COUNT(*) c FROM follow_ups WHERE lead_id=?`,args:[id]});if(Number((x.rows[0] as any).c)>0)return c.json({error:\"Cannot delete a lead with follow-up history\"},400);await sqlite.execute({sql:`DELETE FROM leads WHERE id=?`,args:[id]});return c.json({ok:true})});\napp.get(\"/api/leads/:id\",auth,async c=>{const id=Number(c.req.param(\"id\")),u=c.get(\"user\");const a=await sqlite.execute({sql:`SELECT l.*,u.name counsellor_name,(SELECT scheduled_date||' '||scheduled_time FROM follow_ups f WHERE f.lead_id=l.id AND f.status='pending' ORDER BY f.scheduled_date,f.scheduled_time LIMIT 1) next_followup FROM leads l LEFT JOIN users u ON u.id=l.counsellor_id WHERE l.id=?`,args:[id]});if(!a.rows[0])return c.json({error:\"Lead not found\"},404);if(u.role!==\"super_admin\"&&Number((a.rows[0] as any).counsellor_id)!==Number(u.user_id))return c.json({error:\"Access denied\"},403);const h=await sqlite.execute({sql:`SELECT f.*,u.name counsellor_name FROM follow_ups f JOIN users u ON u.id=f.counsellor_id WHERE f.lead_id=? ORDER BY f.id DESC`,args:[id]});return c.json({lead:a.rows[0],history:h.rows})});\napp.post(\"/api/leads/:id/follow-up-call\",auth,async c=>{const id=Number(c.req.param(\"id\")),b=await c.req.json(),u=c.get(\"user\"),note=String(b.note||\"\").trim(),nd=String(b.next_followup_date||\"\"),nt=String(b.next_followup_time||\"\"),leadStatus=String(b.lead_status||\"\");if(note.length<2)return c.json({error:\"What Happened Today is required\"},400);if(leadStatus&&!STATUSES.includes(leadStatus))return c.json({error:\"Invalid lead status\"},400);if(![\"Converted\",\"Lost\",\"Not Interested\",\"Irrelevant\"].includes(leadStatus)&&(!nd||!nt||!validTime(nt)))return c.json({error:\"Next Follow-Up Date and Time are mandatory unless status is Not Interested or Irrelevant. Time must be 09:00–18:00 IST\"},400);if(![\"Converted\",\"Lost\",\"Not Interested\",\"Irrelevant\"].includes(leadStatus)&&!futureSchedule(nd,nt))return c.json({error:\"Next Follow-Up cannot be scheduled in the past\"},400);if(![\"Converted\",\"Lost\",\"Not Interested\",\"Irrelevant\"].includes(leadStatus)&&!within15Days(nd,nt))return c.json({error:\"Next Follow-Up cannot be scheduled more than 15 days ahead\"},400);if([\"Converted\",\"Lost\",\"Not Interested\",\"Irrelevant\"].includes(leadStatus)&&(nd||nt))return c.json({error:\"No further follow-up is allowed when status is Not Interested\"},400);const lead=await sqlite.execute({sql:`SELECT * FROM leads WHERE id=? LIMIT 1`,args:[id]});if(!lead.rows[0])return c.json({error:\"Lead not found\"},404);const l=lead.rows[0] as any;if(u.role!==\"super_admin\"&&Number(l.counsellor_id)!==Number(u.user_id))return c.json({error:\"You can only add follow-ups for assigned leads\"},403);const cid=Number(l.counsellor_id)||Number(u.user_id),d=todayIST(),t=timeIST();const pending=await sqlite.execute({sql:`SELECT * FROM follow_ups WHERE lead_id=? AND status='pending' ORDER BY scheduled_date,scheduled_time LIMIT 1`,args:[id]});const current=pending.rows[0] as any;const stm:any[]=[];if(current){const scheduledAt=`${current.scheduled_date}T${current.scheduled_time}:00+05:30`;if(Date.parse(scheduledAt)>Date.parse(nowIST()))return c.json({error:\"This follow-up is scheduled for the future and cannot be completed yet.\"},400);stm.push({sql:`UPDATE follow_ups SET completed_at=?,note=?,next_followup_date=?,next_followup_time=?,status='completed' WHERE id=?`,args:[nowIST(),note,[\"Converted\",\"Lost\",\"Not Interested\",\"Irrelevant\"].includes(leadStatus)?null:nd||null,[\"Converted\",\"Lost\",\"Not Interested\",\"Irrelevant\"].includes(leadStatus)?null:nt||null,Number(current.id)]})}else{stm.push({sql:`INSERT INTO follow_ups(lead_id,counsellor_id,scheduled_date,scheduled_time,completed_at,note,next_followup_date,next_followup_time,status,created_at) VALUES(?,?,?,?,?,?,?,?, 'completed',datetime('now'))`,args:[id,cid,d,t,nowIST(),note,[\"Converted\",\"Lost\",\"Not Interested\",\"Irrelevant\"].includes(leadStatus)?null:nd||null,[\"Converted\",\"Lost\",\"Not Interested\",\"Irrelevant\"].includes(leadStatus)?null:nt||null]})}if(![\"Converted\",\"Lost\",\"Not Interested\",\"Irrelevant\"].includes(leadStatus))stm.push({sql:`INSERT INTO follow_ups(lead_id,counsellor_id,scheduled_date,scheduled_time,status,created_at) VALUES(?,?,?,?, 'pending',datetime('now'))`,args:[id,cid,nd,nt]});stm.push({sql:`UPDATE leads SET counsellor_id=?,status=COALESCE(NULLIF(?,''),status),updated_at=datetime('now') WHERE id=?`,args:[cid,leadStatus,id]});await sqlite.batch(stm);await logActivity(u,'Follow-up call recorded',id,`${d} ${t} · status ${leadStatus||l.status}${[\"Converted\",\"Lost\",\"Not Interested\",\"Irrelevant\"].includes(leadStatus)?' · no further follow-up':nd?` · next ${nd} ${nt}`:''}`);return c.json({ok:true,called_date:d,called_time:t})});\napp.post(\"/api/follow-ups\",auth,async c=>{const b=await c.req.json(),u=c.get(\"user\"),d=String(b.scheduled_date||\"\"),t=String(b.scheduled_time||\"\");if(!b.lead_id||!/^\\d{4}-\\d{2}-\\d{2}$/.test(d)||!validTime(t))return c.json({error:\"Valid date and time (09:00–18:00 IST) are required\"},400);if(!futureSchedule(d,t))return c.json({error:\"Follow-Up cannot be scheduled in the past\"},400);if(!within15Days(d,t))return c.json({error:\"Follow-Up cannot be scheduled more than 15 days ahead\"},400);const lead=await sqlite.execute({sql:`SELECT counsellor_id,status FROM leads WHERE id=?`,args:[Number(b.lead_id)]});if(!lead.rows[0])return c.json({error:\"Lead not found\"},404);const leadRow=lead.rows[0] as any;if([\"Converted\",\"Lost\",\"Not Interested\",\"Irrelevant\"].includes(String(leadRow.status||\"\")))return c.json({error:\"No follow-up is allowed for a closed lead\"},400);const existing=await sqlite.execute({sql:`SELECT id FROM follow_ups WHERE lead_id=? AND status='pending' LIMIT 1`,args:[Number(b.lead_id)]});if(existing.rows[0])return c.json({error:\"This lead already has a pending follow-up. Complete it before scheduling another.\"},400);const cid=admin(c)?Number(b.counsellor_id||0):Number(u.user_id);if(!cid)return c.json({error:\"Counsellor is required\"},400);if(!admin(c)&&Number(leadRow.counsellor_id)!==Number(u.user_id))return c.json({error:\"You can only schedule follow-ups for assigned leads\"},403);await sqlite.execute({sql:`INSERT INTO follow_ups(lead_id,counsellor_id,scheduled_date,scheduled_time,status,created_at) VALUES(?,?,?,?, 'pending',datetime('now'))`,args:[Number(b.lead_id),cid,d,t]});await sqlite.execute({sql:`UPDATE leads SET counsellor_id=?,updated_at=datetime('now') WHERE id=?`,args:[cid,Number(b.lead_id)]});return c.json({ok:true})});\napp.post(\"/api/follow-ups/:id/complete\",auth,async c=>{const id=Number(c.req.param(\"id\")),b=await c.req.json(),u=c.get(\"user\"),note=String(b.note||\"\").trim(),nd=String(b.next_followup_date||\"\"),nt=String(b.next_followup_time||\"\"),leadStatus=String(b.lead_status||\"\");if(note.length<2)return c.json({error:\"Follow-Up Notes are required\"},400);if(leadStatus&&!STATUSES.includes(leadStatus))return c.json({error:\"Invalid lead status\"},400);if(![\"Converted\",\"Lost\",\"Not Interested\",\"Irrelevant\"].includes(leadStatus)&&(!nd||!nt||!validTime(nt)))return c.json({error:\"Next Follow-Up Date and Time are mandatory unless status is Not Interested or Irrelevant\"},400);if(![\"Converted\",\"Lost\",\"Not Interested\",\"Irrelevant\"].includes(leadStatus)&&!futureSchedule(nd,nt))return c.json({error:\"Next Follow-Up cannot be scheduled in the past\"},400);if(![\"Converted\",\"Lost\",\"Not Interested\",\"Irrelevant\"].includes(leadStatus)&&!within15Days(nd,nt))return c.json({error:\"Next Follow-Up cannot be scheduled more than 15 days ahead\"},400);if([\"Converted\",\"Lost\",\"Not Interested\",\"Irrelevant\"].includes(leadStatus)&&(nd||nt))return c.json({error:\"No further follow-up is allowed when status is Not Interested\"},400);const r=await sqlite.execute({sql:`SELECT * FROM follow_ups WHERE id=? AND status='pending' LIMIT 1`,args:[id]});if(!r.rows[0])return c.json({error:\"Follow-up is missing or already completed\"},404);const f=r.rows[0] as any;if(u.role!==\"super_admin\"&&Number(f.counsellor_id)!==Number(u.user_id))return c.json({error:\"You can only complete your own follow-ups\"},403);const scheduledAt=`${f.scheduled_date}T${f.scheduled_time}:00+05:30`,scheduledMs=Date.parse(scheduledAt),nowMs=Date.parse(nowIST());if(Number.isFinite(scheduledMs)&&scheduledMs>nowMs)return c.json({error:\"This follow-up is scheduled for the future and cannot be completed yet.\"},400);const stm:any[]=[{sql:`UPDATE follow_ups SET completed_at=?,note=?,next_followup_date=?,next_followup_time=?,status='completed' WHERE id=?`,args:[nowIST(),note,[\"Converted\",\"Lost\",\"Not Interested\",\"Irrelevant\"].includes(leadStatus)?null:nd||null,[\"Converted\",\"Lost\",\"Not Interested\",\"Irrelevant\"].includes(leadStatus)?null:nt||null,id]},{sql:`UPDATE leads SET status=COALESCE(NULLIF(?,''),status),updated_at=datetime('now') WHERE id=?`,args:[leadStatus,Number(f.lead_id)]}];if(![\"Converted\",\"Lost\",\"Not Interested\",\"Irrelevant\"].includes(leadStatus))stm.push({sql:`INSERT INTO follow_ups(lead_id,counsellor_id,scheduled_date,scheduled_time,status,created_at) VALUES(?,?,?,?, 'pending',datetime('now'))`,args:[f.lead_id,f.counsellor_id,nd,nt]});await sqlite.batch(stm);await logActivity(u,'Follow-up completed',Number(f.lead_id),`${f.scheduled_date} ${f.scheduled_time} · status ${leadStatus||'unchanged'}${[\"Converted\",\"Lost\",\"Not Interested\",\"Irrelevant\"].includes(leadStatus)?' · no further follow-up':` · next ${nd} ${nt}`}`);return c.json({ok:true})});\napp.get(\"/api/follow-ups\",auth,async c=>{const q=c.req.query(),u=c.get(\"user\"),p:any[]=[],w:string[]=[],today=todayIST(),now=timeIST(),mode=q.mode||\"today\";if(u.role!==\"super_admin\"){w.push(`f.counsellor_id=?`);p.push(Number(u.user_id))}if(mode==='today'){w.push(`f.scheduled_date=? AND f.status='pending'`);p.push(today)}else if(mode==='overdue'){w.push(`f.status='pending' AND (f.scheduled_date<? OR (f.scheduled_date=? AND f.scheduled_time<?))`);p.push(today,today,now)}else if(mode==='upcoming'){w.push(`f.status='pending' AND (f.scheduled_date>? OR (f.scheduled_date=? AND f.scheduled_time>=?))`);p.push(today,today,now)}else if(mode==='completed')w.push(`f.status='completed'`);else w.push(`1=1`);if(q.counsellor){w.push(`f.counsellor_id=?`);p.push(q.counsellor)}if(q.candidate){w.push(`(l.candidate_name LIKE ? OR l.ec_id LIKE ? OR l.phone LIKE ?)`);p.push(`%${q.candidate}%`,`%${q.candidate}%`,`%${q.candidate}%`)}const r=await sqlite.execute({sql:`SELECT f.*,l.candidate_name,l.ec_id,l.phone,l.country,l.program,l.status lead_status,u.name counsellor_name FROM follow_ups f JOIN leads l ON l.id=f.lead_id JOIN users u ON u.id=f.counsellor_id WHERE ${w.join(' AND ')} ORDER BY f.scheduled_date ASC,f.scheduled_time ASC,f.id DESC`,args:p});return c.json({items:r.rows,today,now})});\nconst csvCell=(v:any)=>`\"${String(v??\"\").replace(/\"/g,'\"\"')}\"`;\napp.get(\"/api/admin/export/leads.csv\",auth,async c=>{if(!admin(c))return c.json({error:\"Admin access required\"},403);const r=await sqlite.execute(`SELECT l.*,u.name counsellor_name FROM leads l LEFT JOIN users u ON u.id=l.counsellor_id ORDER BY l.id ASC`);const rows:any[]=r.rows as any[];const header=[\"ID\",\"EC ID\",\"Candidate Name\",\"Phone\",\"Email\",\"Country\",\"Program\",\"Counsellor\",\"Status\",\"Lead Type\",\"Current City\",\"Qualification\",\"Experience\",\"Language Level\",\"Preferred Country\",\"Source\",\"Lead Temperature\",\"Notes\",\"Created At\",\"Updated At\"];const lines=[header.map(csvCell).join(\",\"),...rows.map(l=>[l.id,l.ec_id,l.candidate_name,l.phone,l.email,l.country,l.program,l.counsellor_name,l.status,l.lead_type,l.current_city,l.qualification,l.experience,l.language_level,l.preferred_country,l.source,l.lead_temperature,l.notes,l.created_at,l.updated_at].map(csvCell).join(\",\"))];return new Response(\"\\\\uFEFF\"+lines.join(\"\\\\r\\\\n\"),{headers:{\"Content-Type\":\"text/csv; charset=utf-8\",\"Content-Disposition\":\"attachment; filename=\\\"europe-careers-leads-\"+todayIST()+\".csv\\\"\"}})});\napp.get(\"/api/admin/backup.json\",auth,async c=>{if(!admin(c))return c.json({error:\"Admin access required\"},403);const [leads,followUps,users,activity]=await Promise.all([sqlite.execute(`SELECT * FROM leads ORDER BY id ASC`),sqlite.execute(`SELECT * FROM follow_ups ORDER BY id ASC`),sqlite.execute(`SELECT id,name,email,role,status,created_at FROM users ORDER BY id ASC`),sqlite.execute(`SELECT * FROM activity_log ORDER BY id ASC`)]);return new Response(JSON.stringify({backup_version:1,exported_at:nowIST(),timezone:\"Asia/Kolkata\",leads:leads.rows,follow_ups:followUps.rows,users:users.rows,activity_log:activity.rows},null,2),{headers:{\"Content-Type\":\"application/json; charset=utf-8\",\"Content-Disposition\":\"attachment; filename=\\\"europe-careers-crm-backup-\"+todayIST()+\".json\\\"\"}})});\napp.get(\"/api/admin/export/leads.xlsx\",auth,async c=>{if(!admin(c))return c.json({error:\"Admin access required\"},403);const [leads,followUps,activity,users]=await Promise.all([sqlite.execute(`SELECT l.*,u.name counsellor_name FROM leads l LEFT JOIN users u ON u.id=l.counsellor_id ORDER BY l.id ASC`),sqlite.execute(`SELECT f.*,l.candidate_name,l.ec_id,u.name counsellor_name FROM follow_ups f JOIN leads l ON l.id=f.lead_id JOIN users u ON u.id=f.counsellor_id ORDER BY f.id ASC`),sqlite.execute(`SELECT a.*,u.name user_name,l.candidate_name,l.ec_id FROM activity_log a LEFT JOIN users u ON u.id=a.user_id LEFT JOIN leads l ON l.id=a.lead_id ORDER BY a.id ASC`),sqlite.execute(`SELECT id,name,email,role,status,created_at FROM users WHERE role='counsellor' ORDER BY id ASC`)]);const leadRows=(leads.rows as any[]).map(l=>({\"ID\":l.id,\"EC ID\":l.ec_id,\"Candidate Name\":l.candidate_name,\"Phone\":l.phone,\"Email\":l.email,\"Country\":l.country,\"Program\":l.program,\"Counsellor\":l.counsellor_name||\"\",\"Status\":l.status,\"Lead Type\":l.lead_type,\"Current City\":l.current_city,\"Qualification\":l.qualification,\"Experience\":l.experience,\"Language Level\":l.language_level,\"Preferred Country\":l.preferred_country,\"Source\":l.source,\"Lead Temperature\":l.lead_temperature,\"Notes\":l.notes,\"Created At\":l.created_at,\"Updated At\":l.updated_at}));const followRows=(followUps.rows as any[]).map(f=>({\"ID\":f.id,\"Lead ID\":f.lead_id,\"EC ID\":f.ec_id,\"Candidate Name\":f.candidate_name,\"Counsellor\":f.counsellor_name,\"Scheduled Date\":f.scheduled_date,\"Scheduled Time\":f.scheduled_time,\"Status\":f.status,\"Completed At\":f.completed_at||\"\",\"Note\":f.note||\"\",\"Next Follow-Up Date\":f.next_followup_date||\"\",\"Next Follow-Up Time\":f.next_followup_time||\"\",\"Created At\":f.created_at}));const activityRows=(activity.rows as any[]).map(a=>({\"ID\":a.id,\"Time\":a.created_at,\"User\":a.user_name||\"System\",\"Action\":a.action,\"Lead\":a.candidate_name||\"\",\"EC ID\":a.ec_id||\"\",\"Details\":a.details||\"\"}));const counsellorRows=(users.rows as any[]).map(u=>({\"ID\":u.id,\"Name\":u.name,\"Email\":u.email,\"Status\":u.status,\"Created At\":u.created_at}));const wb=XLSX.utils.book_new();const add=(name:string,rows:any[],widths:number[])=>{const ws=XLSX.utils.json_to_sheet(rows);ws[\"!freeze\"]={xSplit:0,ySplit:1};ws[\"!autofilter\"]={ref:ws[\"!ref\"]||\"A1:A1\"};ws[\"!cols\"]=widths.map(w=>({wch:w}));XLSX.utils.book_append_sheet(wb,ws,name)};add(\"Leads\",leadRows,[8,18,24,16,28,16,24,22,18,14,20,24,18,18,22,16,16,45,22,22]);add(\"Follow-Up History\",followRows,[8,10,18,24,22,16,16,14,24,45,20,20,22]);add(\"Activity Log\",activityRows,[8,22,20,28,24,18,60]);add(\"Counsellors\",counsellorRows,[8,24,32,14,22]);const buf=XLSX.write(wb,{type:\"array\",bookType:\"xlsx\"});return new Response(buf,{headers:{\"Content-Type\":\"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet\",\"Content-Disposition\":\"attachment; filename=\\\"europe-careers-crm-\"+todayIST()+\".xlsx\\\"\"}})});\napp.get(\"/api/admin/insights\",auth,async c=>{if(!admin(c))return c.json({error:\"Admin access required\"},403);const today=todayIST(),now=timeIST();const r=await sqlite.execute({sql:`SELECT (SELECT COUNT(*) FROM leads WHERE counsellor_id IS NULL) unassigned,(SELECT COUNT(*) FROM leads l WHERE l.status NOT IN ('Converted','Lost','Not Interested') AND NOT EXISTS(SELECT 1 FROM follow_ups f WHERE f.lead_id=l.id AND f.status='pending')) missing_followups,(SELECT COUNT(*) FROM leads l WHERE l.status NOT IN ('Converted','Lost','Not Interested') AND julianday(datetime('now','+05:30'))-julianday(datetime(l.updated_at,'+05:30'))>=3) stale_3_days,(SELECT COUNT(*) FROM leads l WHERE l.status NOT IN ('Converted','Lost','Not Interested') AND julianday(datetime('now','+05:30'))-julianday(datetime(l.updated_at,'+05:30'))>=7) stale_7_days,(SELECT COUNT(*) FROM leads WHERE status='Converted') converted,(SELECT COUNT(*) FROM leads WHERE status!='New') contacted,(SELECT COUNT(*) FROM activity_log WHERE date(datetime(created_at,'+05:30'))=date(datetime('now','+05:30'))) activities_today`});const missing=await sqlite.execute({sql:`SELECT l.id,l.candidate_name,l.ec_id,l.status,l.updated_at,u.name counsellor_name FROM leads l LEFT JOIN users u ON u.id=l.counsellor_id WHERE l.status NOT IN ('Converted','Lost','Not Interested') AND NOT EXISTS(SELECT 1 FROM follow_ups f WHERE f.lead_id=l.id AND f.status='pending') ORDER BY l.updated_at ASC LIMIT 100`});const stale=await sqlite.execute({sql:`SELECT l.id,l.candidate_name,l.ec_id,l.status,l.updated_at,u.name counsellor_name FROM leads l LEFT JOIN users u ON u.id=l.counsellor_id WHERE l.status NOT IN ('Converted','Lost','Not Interested') AND julianday(datetime('now','+05:30'))-julianday(datetime(l.updated_at,'+05:30'))>=3 ORDER BY l.updated_at ASC LIMIT 100`});const activity=await sqlite.execute({sql:`SELECT a.id,a.action,a.details,a.created_at,u.name user_name,l.candidate_name FROM activity_log a LEFT JOIN users u ON u.id=a.user_id LEFT JOIN leads l ON l.id=a.lead_id ORDER BY a.id DESC LIMIT 30`});return c.json({summary:r.rows[0],missing_followups:missing.rows,stale:stale.rows,activity:activity.rows,today,now})});\n\napp.get(\"/api/dashboard\",auth,async c=>{const u=c.get(\"user\"),today=todayIST(),now=timeIST(),p:any[]=[today,today,today,now],scope=u.role==='super_admin'?``:` AND f.counsellor_id=${Number(u.user_id)}`,leadScope=u.role==='super_admin'?``:` WHERE counsellor_id=${Number(u.user_id)}`,leadAnd=u.role==='super_admin'?``:` AND counsellor_id=${Number(u.user_id)}`;const k=await sqlite.execute({sql:`SELECT (SELECT COUNT(*) FROM leads${leadScope}) total,(SELECT COUNT(*) FROM leads WHERE date(datetime(created_at,'+05:30'))=date(datetime('now','+05:30'))${leadAnd}) new_leads,(SELECT COUNT(*) FROM follow_ups f WHERE f.status='pending' AND f.scheduled_date=?${scope}) today,(SELECT COUNT(*) FROM follow_ups f WHERE f.status='pending' AND (f.scheduled_date<? OR (f.scheduled_date=? AND f.scheduled_time<?))${scope}) overdue,(SELECT COUNT(*) FROM follow_ups f WHERE f.status='pending'${scope}) pending,(SELECT COUNT(*) FROM follow_ups f WHERE f.status='completed'${scope}) completed,(SELECT COUNT(*) FROM leads${leadScope?leadScope+` AND`: ` WHERE`} status='Converted') converted`,args:p});const perf=await sqlite.execute({sql:`SELECT u.id,u.name,(SELECT COUNT(*) FROM leads l WHERE l.counsellor_id=u.id) assigned,(SELECT COUNT(*) FROM follow_ups f WHERE f.counsellor_id=u.id AND f.status='pending' AND f.scheduled_date=?) due,(SELECT COUNT(*) FROM follow_ups f WHERE f.counsellor_id=u.id AND f.status='completed' AND substr(f.completed_at,1,10)=?) calls_completed,(SELECT COUNT(*) FROM follow_ups f WHERE f.counsellor_id=u.id AND f.status='pending' AND (f.scheduled_date<? OR (f.scheduled_date=? AND f.scheduled_time<?))) overdue,(SELECT COUNT(*) FROM leads l WHERE l.counsellor_id=u.id AND l.status NOT IN ('Converted','Lost','Not Interested') AND NOT EXISTS(SELECT 1 FROM follow_ups f WHERE f.lead_id=l.id AND f.status='pending')) missing,(SELECT COUNT(*) FROM leads l WHERE l.counsellor_id=u.id AND l.status='Converted') conversions,(SELECT COUNT(*) FROM leads l WHERE l.counsellor_id=u.id AND l.status NOT IN ('Converted','Lost','Not Interested')) active_leads FROM users u WHERE u.role='counsellor'${u.role==='super_admin'?'':` AND u.id=${Number(u.user_id)}`} ORDER BY u.name`,args:[today,today,today,today,now]});const pipe=await sqlite.execute({sql:`SELECT status,COUNT(*) count FROM leads${u.role==='super_admin'?'':` WHERE counsellor_id=${Number(u.user_id)}`} GROUP BY status ORDER BY count DESC`});const programs=await sqlite.execute({sql:`SELECT COALESCE(NULLIF(program,''),'Other') label,COUNT(*) count FROM leads${leadScope} GROUP BY program ORDER BY count DESC LIMIT 8`});const countries=await sqlite.execute({sql:`SELECT COALESCE(NULLIF(country,''),'Other') label,COUNT(*) count FROM leads${leadScope} GROUP BY country ORDER BY count DESC LIMIT 8`});const upcoming=await sqlite.execute({sql:`SELECT f.id,f.scheduled_date,f.scheduled_time,l.candidate_name,l.ec_id,l.program,l.country FROM follow_ups f JOIN leads l ON l.id=f.lead_id WHERE f.status='pending' AND (f.scheduled_date>? OR (f.scheduled_date=? AND f.scheduled_time>=?))${scope} ORDER BY f.scheduled_date,f.scheduled_time LIMIT 8`,args:[today,today,now]});return c.json({counts:k.rows[0],performance:perf.rows,pipeline:pipe.rows,programs:programs.rows,countries:countries.rows,upcoming:upcoming.rows})});\napp.onError((err)=>{console.error(err);return new Response(\"Internal Server Error\",{status:500})});\nexport default app.fetch;\n","label","europecrm",[139],"16a9d69a-e87c-4a52-aaed-4db773992d53","db.ts","ef02d66e-acf1-11f1-8f7e-1607ee4eb77e",198,["D",1789106336812],4,"import { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\n\nlet ready: Promise<void> | undefined;\n\nexport function initDb() {\n  if (!ready) ready = (async () => {\n    await sqlite.execute(`CREATE TABLE IF NOT EXISTS users (\n      id INTEGER PRIMARY KEY AUTOINCREMENT,\n      name TEXT NOT NULL,\n      email TEXT NOT NULL UNIQUE,\n      password TEXT NOT NULL,\n      role TEXT NOT NULL CHECK(role IN ('super_admin','counsellor')),\n      status TEXT NOT NULL DEFAULT 'active',\n      created_at TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP\n    )`);\n    await sqlite.execute(`CREATE TABLE IF NOT EXISTS leads (\n      id INTEGER PRIMARY KEY AUTOINCREMENT,\n      candidate_name TEXT NOT NULL,\n      ec_id TEXT NOT NULL UNIQUE,\n      phone TEXT NOT NULL,\n      email TEXT DEFAULT '',\n      country TEXT DEFAULT '',\n      program TEXT DEFAULT '',\n      counsellor_id INTEGER,\n      status TEXT NOT NULL DEFAULT 'New',\n      created_at TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP,\n      updated_at TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP,\n      FOREIGN KEY(counsellor_id) REFERENCES users(id)\n    )`);\n    await sqlite.execute(`CREATE TABLE IF NOT EXISTS follow_ups (\n      id INTEGER PRIMARY KEY AUTOINCREMENT,\n      lead_id INTEGER NOT NULL,\n      counsellor_id INTEGER NOT NULL,\n      scheduled_date TEXT NOT NULL,\n      scheduled_time TEXT NOT NULL,\n      completed_at TEXT,\n      note TEXT,\n      next_followup_date TEXT,\n      next_followup_time TEXT,\n      status TEXT NOT NULL DEFAULT 'pending' CHECK(status IN ('pending','completed')),\n      created_at TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP,\n      FOREIGN KEY(lead_id) REFERENCES leads(id),\n      FOREIGN KEY(counsellor_id) REFERENCES users(id)\n    )`);\n    // Lead profile extensions used by the Europe Careers enquiry form.\n    for (const sql of [\n      `ALTER TABLE leads ADD COLUMN lead_type TEXT DEFAULT ''`,\n      `ALTER TABLE leads ADD COLUMN dob TEXT DEFAULT ''`,\n      `ALTER TABLE leads ADD COLUMN current_city TEXT DEFAULT ''`,\n      `ALTER TABLE leads ADD COLUMN qualification TEXT DEFAULT ''`,\n      `ALTER TABLE leads ADD COLUMN experience TEXT DEFAULT ''`,\n      `ALTER TABLE leads ADD COLUMN language_level TEXT DEFAULT ''`,\n      `ALTER TABLE leads ADD COLUMN preferred_country TEXT DEFAULT ''`,\n      `ALTER TABLE leads ADD COLUMN source TEXT DEFAULT 'CRM'`,\n      `ALTER TABLE leads ADD COLUMN lead_temperature TEXT DEFAULT 'Cold'`,\n      `ALTER TABLE leads ADD COLUMN notes TEXT DEFAULT ''`\n    ]) { try { await sqlite.execute(sql); } catch {} }\n    await sqlite.execute(`CREATE INDEX IF NOT EXISTS idx_followups_due ON follow_ups(scheduled_date, scheduled_time, status)`);\n    await sqlite.execute(`CREATE INDEX IF NOT EXISTS idx_followups_lead ON follow_ups(lead_id, created_at DESC)`);\n    // Enforce the CRM invariant at database level: one pending follow-up per lead.\n    try { await sqlite.execute(`CREATE UNIQUE INDEX IF NOT EXISTS uq_followups_one_pending_per_lead ON follow_ups(lead_id) WHERE status='pending'`); } catch {}\n    // Triggers protect against duplicate pending rows even if legacy duplicates exist and the unique index cannot be created yet.\n    await sqlite.execute(`CREATE TRIGGER IF NOT EXISTS trg_followup_one_pending_insert BEFORE INSERT ON follow_ups WHEN NEW.status='pending' AND EXISTS(SELECT 1 FROM follow_ups WHERE lead_id=NEW.lead_id AND status='pending') BEGIN SELECT RAISE(ABORT,'A lead can have only one pending follow-up'); END`);\n    await sqlite.execute(`CREATE TRIGGER IF NOT EXISTS trg_followup_one_pending_update BEFORE UPDATE OF lead_id,status ON follow_ups WHEN NEW.status='pending' AND EXISTS(SELECT 1 FROM follow_ups WHERE lead_id=NEW.lead_id AND status='pending' AND id<>NEW.id) BEGIN SELECT RAISE(ABORT,'A lead can have only one pending follow-up'); END`);\n    const count = await sqlite.execute(`SELECT COUNT(*) AS c FROM users`);\n    if (Number((count.rows[0] as any)?.c || 0) === 0) {\n      await sqlite.execute({sql:`INSERT INTO users (name,email,password,role) VALUES (?,?,?,?)`, args:[\"Super Admin\",\"admin@europecareers.com\",\"admin123\",\"super_admin\"]});\n      await sqlite.execute({sql:`INSERT INTO users (name,email,password,role) VALUES (?,?,?,?)`, args:[\"Rahul Counsellor\",\"rahul@europecareers.com\",\"rahul123\",\"counsellor\"]});\n      await sqlite.execute({sql:`INSERT INTO users (name,email,password,role) VALUES (?,?,?,?)`, args:[\"Priya Counsellor\",\"priya@europecareers.com\",\"priya123\",\"counsellor\"]});\n    }\n  })();\n  return ready;\n}\n\nexport { sqlite };\n",[151],"c0eca97f-4777-4071-ae4c-127e6f7d808f","README.md","01a08a70-b0f3-7058-9d1e-07eb950f89b8",1,["D",1789029036131],"# React + Hono Starter\n\nA minimal starter template for building client-side React apps with a Hono\nbackend on Val Town. Click **Remix** to get your own copy.\n\n## Picking a starter\n\n| Starter | When to pick it |\n| --- | --- |\n| [`basic-html-starter`](https://www.val.town/x/templates/basic-html-starter) | Static HTML pages. Sprinkle of vanilla JS. No server-side rendering. |\n| [`hono-jsx-starter`](https://www.val.town/x/templates/hono-jsx-starter) | Dynamic server-rendered HTML with JSX. API routes. No React, no SPA. |\n| **[`react-hono-starter`](https://www.val.town/x/templates/react-hono-starter)** *(you're here)* | Client-side React SPA with a Hono API backend. |\n\n**Want to build UI?** Start writing React components in\n[`frontend/components/`](/frontend/components/). Import them into `App.tsx` and\nyou're good to go. Styling is [Twind](https://twind.style/) — just use Tailwind\nutility classes, zero config.\n\n**Want to add an API?** Add routes in [`index.ts`](/index.ts) (there's a\ncommented-out example). Fetch them from your React components.\n\n## Architecture\n\n```mermaid\ngraph LR\n    Browser -->|\"GET /\"| Hono[\"index.ts<br/>(Hono server)\"]\n    Hono -->|serves| HTML[\"root.tsx\"]\n    HTML -->|loads| Entry[\"index.tsx\"]\n    Entry -->|renders| App[\"App.tsx\"]\n    App -->|renders| Counter[\"Counter.tsx\"]\n```\n\n## File structure\n\n```\nindex.ts              ← Hono backend (serves frontend + API routes)\nfrontend/\n  root.tsx            ← HTML shell (stamps immutable asset URLs)\n  index.tsx           ← React entrypoint (mounts <App />)\n  favicon.svg         ← App icon\n  components/\n    App.tsx            ← Root component (layout + view source link)\n    Counter.tsx        ← Example component with state\n```\n\n## How it works\n\n1. **`index.ts`** is the HTTP entrypoint — a Hono server that serves the\n   frontend and any API routes you add.\n2. **`frontend/root.tsx`** is the HTML shell — it loads Twind and stamps\n   immutable asset URLs for the favicon and React entrypoint.\n3. **`frontend/index.tsx`** mounts the React app.\n4. **`frontend/components/App.tsx`** is the root layout — add new components\n   alongside it.\n5. **`frontend/components/Counter.tsx`** is an example stateful component —\n   replace it with your own!\n\n## Next steps\n\n- Add API routes in `index.ts`\n- Add new components in `frontend/components/`\n- Add a SQLite database — see the\n  [React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) for\n  a full-stack example with database, queries, and shared types\n\nTemplate updates and upgrade paths for existing remixes: [CHANGELOG.md](/CHANGELOG.md)\n",[159],"d8991706-f27d-4a75-8a01-f1f4e32c43b3","CHANGELOG.md","01a08a70-b0f3-7058-9d1e-010ffdae1146",["D",1789029036131],"# Changelog\n\n## 2026-07-30 — Immutable asset caching\n\nFrontend files are now served at version-addressed URLs\n(`/__immutable/45/frontend/index.tsx`) with\n`Cache-Control: public, max-age=31536000, immutable`, so repeat visits load the\nwhole client graph from the browser cache — roughly 3× faster (~665ms → ~157ms\nmeasured). Publishing your val bumps its version, which changes every URL, so\ncaches invalidate automatically. Old-version URLs return 404 after a publish\n(like Next.js build assets); a reload picks up the new version.\n\nWhat changed in the template:\n\n- `frontend/index.html` → [`frontend/root.tsx`](/frontend/root.tsx): the HTML\n  shell is now JSX and stamps asset URLs with `immutableFileUrl()`\n- [`index.ts`](/index.ts): serves `Root()` at `/`, and one\n  `app.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path))` route\n  serves all frontend files\n\n### Upgrading an existing remix\n\nYour copy of this template doesn't update automatically. Two options:\n\n**Minimal (most of the benefit):** point both routes at `serveImmutableFile` —\nyour existing bare URLs redirect into versioned space, the new route serves\nthem, and the whole module graph gets cached (costs one redirect per page view):\n\n```ts\nimport { serveImmutableFile } from \"https://esm.town/v/std/utils/index.ts\";\n\napp.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path));\napp.get(\"/frontend/**/*\", (c) => serveImmutableFile(c.req.path)); // was serveFile\n```\n\n**Full upgrade (also removes the redirect):** three self-contained steps —\nno other files needed. Adjust the `<title>`, favicon, and body of `Root()` to\nmatch your app's existing `index.html`, and stamp anything else your shell\nreferences directly (images, css) with `immutableFileUrl()`.\n\n1. Create `frontend/root.tsx`:\n\n```tsx\n/** @jsxImportSource npm:hono@4/jsx */\nimport { raw } from \"npm:hono@4/html\";\nimport { immutableFileUrl } from \"https://esm.town/v/std/utils/index.ts\";\n\n// The HTML shell for the app. It is never cached, so immutableFileUrl can stamp\n// the current val version into each asset URL — the browser caches those\n// immutably, and publishing the val changes the URLs, refetching exactly once.\nexport function Root() {\n  return (\n    <>\n      {raw(\"<!DOCTYPE html>\")}\n      <html lang=\"en\">\n        <head>\n          <meta charSet=\"UTF-8\" />\n          <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n          <title>React Hono Val Town Starter</title>\n          <script src=\"https://cdn.twind.style\" crossOrigin=\"\" />\n          <link rel=\"icon\" href={immutableFileUrl(\"/frontend/favicon.svg\")} type=\"image/svg+xml\" />\n        </head>\n        <body className=\"font-sans text-gray-800 p-6\">\n          <main>\n            <div id=\"root\" />\n          </main>\n          <script src=\"https://esm.town/v/std/catch\" />\n          <script src={immutableFileUrl(\"/frontend/index.tsx\")} type=\"module\" />\n        </body>\n      </html>\n    </>\n  );\n}\n```\n\n2. In your Hono entrypoint, import `Root` and `serveImmutableFile`, and replace\n   your `/` and frontend file routes with:\n\n```ts\nimport { serveImmutableFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Root } from \"./frontend/root.tsx\";\n\n// Serve the (never-cached) HTML shell at the root /\napp.get(\"/\", (c) => c.html(Root()));\n\n// Serve frontend files at the version-addressed URLs Root() stamps, cached immutably\napp.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path));\n```\n\n3. Delete `frontend/index.html` (and any now-unused `serveFile` import).\n",[166],"9690a07e-0e3a-48df-84ce-e64c38a2d121","frontend","01a08a70-b0f3-7058-9d1d-feeee68b2dd9",["D",1789029036131],"directory",[172],"pulls","branches","forks","envVars",{"_184":65,"_186":65},"connections",{"_184":161,"_185":65},"count","unfilledCount","emptyCount",{"_44":171,"_32":172,"_30":173,"_140":-5,"_42":43,"_41":161,"_142":61,"_39":251,"_13":65,"_34":175,"_36":-5,"_24":25,"_147":-5,"_199":252,"_27":253},{"_44":247,"_32":241,"_30":236,"_140":173,"_42":43,"_41":161,"_142":61,"_39":248,"_13":65,"_34":175,"_36":-5,"_24":25,"_147":-5,"_199":249,"_27":250},{"_44":242,"_32":33,"_30":31,"_140":236,"_42":43,"_41":14,"_142":25,"_39":243,"_13":244,"_34":35,"_36":38,"_24":25,"_147":-5,"_199":245,"_27":246},{"_44":233,"_32":234,"_30":235,"_140":236,"_42":43,"_41":161,"_142":61,"_39":237,"_13":65,"_34":35,"_36":238,"_24":25,"_147":-5,"_199":239,"_27":240},{"_44":226,"_32":227,"_30":228,"_140":173,"_42":43,"_41":161,"_142":61,"_39":229,"_13":65,"_34":20,"_36":230,"_24":25,"_147":-5,"_199":231,"_27":232},{"_44":219,"_32":220,"_30":221,"_140":173,"_42":43,"_41":214,"_142":61,"_39":222,"_13":155,"_34":35,"_36":223,"_24":25,"_147":-5,"_199":224,"_27":225},{"_44":211,"_32":212,"_30":213,"_140":173,"_42":43,"_41":214,"_142":61,"_39":215,"_13":155,"_34":35,"_36":216,"_24":25,"_147":-5,"_199":217,"_27":218},{"_44":165,"_32":166,"_30":167,"_140":-5,"_42":43,"_41":161,"_142":61,"_39":208,"_13":65,"_34":20,"_36":169,"_24":25,"_147":-5,"_199":209,"_27":210},{"_44":158,"_32":159,"_30":160,"_140":-5,"_42":43,"_41":161,"_142":61,"_39":205,"_13":65,"_34":20,"_36":163,"_24":25,"_147":-5,"_199":206,"_27":207},{"_44":150,"_32":151,"_30":152,"_140":-5,"_42":43,"_41":153,"_142":61,"_39":202,"_13":155,"_34":35,"_36":156,"_24":25,"_147":-5,"_199":203,"_27":204},{"_44":138,"_32":139,"_30":59,"_140":-5,"_42":43,"_41":141,"_142":25,"_39":198,"_13":144,"_34":145,"_36":146,"_24":25,"_147":148,"_199":200,"_27":201},["D",1789202008634],"children",[],[139],["D",1789106336812],[],[151],["D",1789029036131],[],[159],["D",1789029036131],[],[166],"02e493fd-7eda-4c2b-91b8-ce7b37281bf3","root.tsx","01a08a70-b0f3-7058-9d1d-f8043637f72c",314,["D",1789200525544],"/** @jsxImportSource npm:hono@4/jsx */\nimport { raw } from \"npm:hono@4/html\";\nimport { immutableFileUrl } from \"https://esm.town/v/std/utils/index.ts\";\n\nexport function Root() {\n  return (\n    <>\n      {raw(\"<!DOCTYPE html>\")}\n      <html lang=\"en\">\n        <head>\n          <meta charSet=\"UTF-8\" />\n          <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n          <meta name=\"theme-color\" content=\"#0f172a\" />\n          <title>Europe Careers CRM</title>\n          <script src=\"https://cdn.twind.style\" crossOrigin=\"\" />\n          <link rel=\"icon\" href={immutableFileUrl(\"/frontend/favicon.svg\")} type=\"image/svg+xml\" />\n        </head>\n        <body className=\"bg-slate-50 text-slate-900 antialiased\">\n          <main><div id=\"root\" /></main>\n          <script src=\"https://esm.town/v/std/catch\" />\n          <script src={immutableFileUrl(\"/frontend/index.tsx\")} type=\"module\" />\n        </body>\n      </html>\n    </>\n  );\n}\n",[],[172,212],"6d89f939-4ed0-4973-b9e3-a0e877404edb","index.tsx","01a08a70-b0f3-7058-9d1d-f76fd4675f67",["D",1789200525544],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./components/App.tsx\";\n\nclass CRMErrorBoundary extends React.Component<React.PropsWithChildren, { error: Error | null }> {\n  state = { error: null as Error | null };\n  static getDerivedStateFromError(error: Error) { return { error }; }\n  componentDidCatch(error: Error) { console.error(\"CRM UI error:\", error); }\n  render() {\n    if (this.state.error) {\n      return <div style={{minHeight:\"100vh\",display:\"grid\",placeItems:\"center\",background:\"#f6f8fb\",fontFamily:\"Inter,Arial,sans-serif\",padding:24}}>\n        <div style={{maxWidth:520,width:\"100%\",background:\"white\",border:\"1px solid #e5e7eb\",borderRadius:16,padding:28,boxShadow:\"0 10px 30px rgba(0,0,0,.08)\"}}>\n          <div style={{fontSize:22,fontWeight:800,color:\"#111827\",marginBottom:8}}>Something went wrong</div>\n          <div style={{fontSize:14,color:\"#6b7280\",lineHeight:1.6,marginBottom:18}}>The CRM caught an unexpected screen error instead of showing a blank page.</div>\n          <div style={{fontSize:12,color:\"#991b1b\",background:\"#fef2f2\",padding:12,borderRadius:10,marginBottom:18,wordBreak:\"break-word\"}}>{this.state.error.message}</div>\n          <button onClick={() => window.location.reload()} style={{border:0,borderRadius:10,padding:\"11px 16px\",fontWeight:700,cursor:\"pointer\",background:\"#0f172a\",color:\"white\"}}>Reload CRM</button>\n        </div>\n      </div>;\n    }\n    return this.props.children;\n  }\n}\n\nconst root = document.getElementById(\"root\");\nif (!root) {\n  throw new Error(\"No root element found\");\n}\n\ncreateRoot(root).render(<CRMErrorBoundary><App /></CRMErrorBoundary>);",[],[172,220],"e9e8c6bb-cb8e-4553-bea0-2b613f106dcc","favicon.svg","01a08a70-b0f3-7058-9d1d-f031b8a709c8",["D",1789029036131],"<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" xmlns=\"http://www.w3.org/2000/svg\">\n  <rect x=\"4\" y=\"4\" width=\"24\" height=\"24\" rx=\"6\" fill=\"#4a90e2\" />\n  <circle cx=\"16\" cy=\"16\" r=\"8\" fill=\"#ffffff\" opacity=\"0.3\" />\n</svg>",[],[172,227],"284c0f92-c857-4ae6-80b4-e8286ae81dc2","Counter.tsx","01a08a70-b0f3-7058-9d1d-ea1f379e7648","01a08a70-b0f3-7058-9d1d-edfb5341f0b9",["D",1789029036131],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\n\nexport function Counter() {\n  const [count, setCount] = useState(0);\n  return (\n    <div class=\"flex items-center gap-3\">\n      <span class=\"text-lg\">Clicked</span>\n      <button\n        onClick={() => setCount((c) => c + 1)}\n        class=\"bg-blue-500 hover:bg-blue-600 text-white font-medium px-4 py-2 rounded-lg transition-colors cursor-pointer\"\n      >\n        {count}\n      </button>\n      <span class=\"text-lg\">times</span>\n    </div>\n  );\n}\n",[],[172,241,234],"components","5160c74c-1e6a-41d7-8831-c6af1d1cfedb",["D",1789202026418],258,[],[172,241,33],"88710b66-b61a-4e5b-8c51-965db8d77656",["D",1789029036131],[189,190],[172,241],["D",1789029036131],[188,191,192,193],[172],["D",1789029036131],["D",1789550457365],{"_102":101,"_110":106},{"_102":101,"_103":104,"_105":106,"_18":57,"_107":108,"_109":25},{"_13":91,"_32":92,"_44":43,"_93":45,"_94":-5,"_95":-5,"_96":-5,"_97":-5,"_98":-5,"_99":46,"_100":101},"ctx",{"_84":-5,"_130":292,"_293":294,"_295":296,"_297":25,"_298":25,"_299":25,"_300":61,"_301":-5,"_302":-7,"_303":-7,"_304":65,"_305":25,"_306":25,"_307":-5,"_308":25,"_309":25,"_310":25,"_311":-5},"ENV",{"_263":264,"_265":266,"_267":92,"_268":269,"_270":271,"_272":273,"_274":275,"_276":277,"_278":279,"_280":281,"_282":283,"_284":285,"_286":287,"_288":289,"_290":291},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","5015b8df46402d8bba4f485ecc37aec202b0e06b","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]
</article></body></html>

Diff · v371