import { useState, useRef } from "react"; const C = { deepBg:"#112e30", tealDeep:"#1a6e72", tealMid:"#229FA4", tealBright:"#64C9C4", tealLight:"#85D8D4", tealPale:"#B2E8E6", tealWash:"#E8F8F8", offWhite:"#F5FAFA", warmGray:"#F0F6F6", textDark:"#112628", textMid:"#2a5254", textMuted:"#5c8486", borderLight:"rgba(34,159,164,0.13)", borderMid:"rgba(34,159,164,0.25)", gold:"#c4a832", amber:"#854F0B", amberBg:"#FAEEDA", green:"#3B6D11", greenBg:"#EAF3DE", red:"#A32D2D", redBg:"#FCEBEB", }; const EJS = { serviceId:"YOUR_SERVICE_ID", teamTemplateId:"YOUR_TEAM_TEMPLATE_ID", clientTemplateId:"YOUR_CLIENT_TEMPLATE_ID", publicKey:"YOUR_PUBLIC_KEY", twwuEmail:"hello@theworldwithinustravels.com" }; const DEMO = EJS.publicKey === "YOUR_PUBLIC_KEY"; async function sendEmail(tid, params) { if (DEMO) return { demo:true }; const res = await fetch("https://api.emailjs.com/api/v1.0/email/send", { method:"POST", headers:{"Content-Type":"application/json"}, body:JSON.stringify({ service_id:EJS.serviceId, template_id:tid, user_id:EJS.publicKey, template_params:params }) }); if (!res.ok) throw new Error(await res.text()); return { sent:true }; } async function notifyTeam({ eventType, proposal, clientName, clientEmail, detail, actionBy }) { const ts = new Date().toLocaleString("en-US",{weekday:"short",month:"short",day:"numeric",year:"numeric",hour:"numeric",minute:"2-digit"}); return sendEmail(EJS.teamTemplateId, { to_email:EJS.twwuEmail, event_type:eventType, proposal, client:clientName, client_email:clientEmail||"not provided", detail, action_by:actionBy, timestamp:ts }); } async function notifyClient({ clientEmail, clientName, destination, dates, eventType, detail, curatorName }) { if (!clientEmail) return { skipped:true }; return sendEmail(EJS.clientTemplateId, { to_email:clientEmail, client_name:clientName, destination, dates, event_type:eventType, detail, curator_name:curatorName||"Shammy", twwu_email:EJS.twwuEmail }); } const TEAM = [ { id:"anina", name:"Anina Monteforte", role:"CEO", dept:"Leadership", initials:"AM", color:"#7a5520", bg:"#f5e9c8", pipelineAccess:true, financeAccess:true }, { id:"shammy", name:"Shammy", role:"Chief of Staff", dept:"Chief of Staff Office", initials:"SH", color:C.tealDeep, bg:C.tealWash, pipelineAccess:true, financeAccess:true }, { id:"gpLead1", name:"G&P Lead", role:"Growth & Partnerships Lead", dept:"Growth & Partnerships", initials:"GL", color:"#596b15", bg:"#eaf0c4", pipelineAccess:true, financeAccess:false }, { id:"gpLead2", name:"G&P Manager", role:"Growth & Partnerships Manager", dept:"Growth & Partnerships", initials:"GM", color:"#596b15", bg:"#eaf0c4", pipelineAccess:true, financeAccess:false }, { id:"tolg", name:"Travel Ops Lead (Group)", role:"Travel Ops Lead — Group Trips", dept:"Travel Operations", initials:"TG", color:"#3B6D11", bg:"#EAF3DE", pipelineAccess:true, financeAccess:false }, { id:"tolc", name:"Oliwia Warczok", role:"Travel Ops Lead — Custom Trips", dept:"Travel Operations", initials:"OW", color:"#3B6D11", bg:"#EAF3DE", pipelineAccess:true, financeAccess:false }, { id:"bsLead", name:"Brand Lead", role:"Brand & Storytelling Lead", dept:"Brand & Storytelling", initials:"BL", color:"#3a6878", bg:"#d8edf2", pipelineAccess:true, financeAccess:false }, { id:"celead1", name:"CE Lead 1", role:"CE & Success Lead", dept:"CE & Success", initials:"CL", color:"#3a6878", bg:"#d8edf2", pipelineAccess:false, financeAccess:false }, { id:"celead2", name:"CE Lead 2", role:"CE & Success Lead", dept:"CE & Success", initials:"CL", color:"#3a6878", bg:"#d8edf2", pipelineAccess:false, financeAccess:false }, { id:"pm1", name:"Project Manager 1",role:"PM", dept:"CE & Success", initials:"PM", color:"#596b15", bg:"#eaf0c4", pipelineAccess:false, financeAccess:false }, { id:"psolead1",name:"PSO Lead 1", role:"PSO Lead", dept:"Proposal Strategy & Ops",initials:"PL",color:"#229FA4", bg:"#E8F8F8", pipelineAccess:false, financeAccess:false }, { id:"psolead2",name:"PSO Lead 2", role:"PSO Lead", dept:"Proposal Strategy & Ops",initials:"PL",color:"#229FA4", bg:"#E8F8F8", pipelineAccess:false, financeAccess:false }, { id:"psopm1", name:"PSO PM 1", role:"PSO PM", dept:"Proposal Strategy & Ops",initials:"PP",color:"#1a6e72", bg:"#B2E8E6", pipelineAccess:false, financeAccess:false }, ]; const TRIP_TYPES = ["Group Trips","Retreats","Custom Trips","Corporate Retreats"]; const PIPELINE_STAGES_GROUP = [ { id:"lead", label:"Lead Received", color:"#B4B2A9" }, { id:"outreach", label:"Outreach Sent", color:"#888780" }, { id:"callsched",label:"Call Scheduled", color:C.tealMid }, { id:"callcomp", label:"Call Completed", color:C.tealDeep }, { id:"booked", label:"Deposit Paid / Booked",color:C.green }, { id:"noproc", label:"Not Proceeding", color:C.red }, ]; const PIPELINE_STAGES_CUSTOM = [ { id:"lead", label:"Lead Received", color:"#B4B2A9" }, { id:"emailsent",label:"Initial Email Sent", color:"#888780" }, { id:"formcomp", label:"Inquiry Form Complete", color:C.tealMid }, { id:"callsched",label:"Call Scheduled w/ Anina",color:C.tealMid }, { id:"callcomp", label:"Call Completed", color:C.tealDeep }, { id:"feepaid", label:"Design Fee Paid", color:C.green }, { id:"proposal", label:"→ Proposal Phase", color:"#7a5520" }, { id:"noproc", label:"Not Proceeding", color:C.red }, ]; const LEAD_STATUSES = [ { id:"inquired", label:"Inquired", color:"#888780" }, { id:"outreach", label:"Outreach Sent", color:C.tealMid }, { id:"pending", label:"Deposit Pending", color:C.amber }, { id:"booked", label:"Booked", color:C.green }, { id:"noproc", label:"Not Proceeding", color:C.red }, ]; const STATUS_LABELS = { draft:"Draft", review:"In Review", feedback:"Feedback Received", approved:"Approved", handed:"Handed to Operations" }; const STATUS_COLORS = { draft: { bg:"#F1EFE8", color:"#5F5E5A", bar:"#B4B2A9" }, review: { bg:C.tealWash, color:C.tealMid, bar:C.tealLight }, feedback: { bg:C.amberBg, color:C.amber, bar:"#EF9F27" }, approved: { bg:C.greenBg, color:C.green, bar:"#639922" }, handed: { bg:"#d8edf2", color:"#3a6878", bar:"#3a6878" }, }; const PKG = { luxe: { label:"✦ Luxe", bg:"#f5e9c8", color:"#7a5520", border:"#e8d5a8", sel:"#a0732c" }, gold: { label:"◈ Gold", bg:"#eaf0c4", color:"#596b15", border:"#dde5b0", sel:"#8a9a2a" }, silver: { label:"◇ Silver", bg:"#d8edf2", color:"#3a6878", border:"#b8d5dc", sel:"#4e8090" }, }; const INIT_LEADS_GROUP = [ { id:"lg1", name:"Maria Santos", contact:"maria@email.com", source:"Instagram", tripInterest:"Morocco Group Escape Apr 2026", status:"callcomp", assignedTo:"celead1", notes:"Called Mar 10, very interested.", dateReceived:"Mar 8, 2026", lastContact:"Mar 10, 2026" }, { id:"lg2", name:"Keisha Brown", contact:"keisha@email.com", source:"Referral — Text", tripInterest:"El Salvador Retreat Sept 2026", status:"callsched",assignedTo:"celead2", notes:"Referred by past client.", dateReceived:"Apr 10, 2026", lastContact:"Apr 11, 2026" }, { id:"lg3", name:"Priya Nair", contact:"priya@email.com", source:"Website Inquiry Form",tripInterest:"Morocco Group Escape Apr 2026",status:"booked", assignedTo:"celead1", notes:"Deposit paid via WeTravel.", dateReceived:"Mar 1, 2026", lastContact:"Mar 20, 2026" }, { id:"lg4", name:"Janet Flores", contact:"", source:"Instagram", tripInterest:"Group Retreat TBD", status:"lead", assignedTo:"", notes:"", dateReceived:"Apr 12, 2026", lastContact:"" }, ]; const INIT_LEADS_CUSTOM = [ { id:"lc1", name:"Dennis Heyman", contact:"dennis@example.com", source:"Referral — Email", tripType:"Group Birthday Trip", travelDates:"Jul 2026", groupSize:"10", services:["Luxury Accommodation","Curated Experiences","Private Guide or Driver"], status:"feepaid", assignedTo:"psolead1", notes:"Morocco birthday trip. Design fee $650 paid.", dateReceived:"Mar 5, 2026", lastContact:"Mar 18, 2026", designPackage:"Wellness Retreat / Group — $650", ninetyDay:false }, { id:"lc2", name:"Kwame Asante", contact:"kwame@email.com", source:"Social Media", tripType:"Group Birthday Trip", travelDates:"Aug 2026", groupSize:"8", services:["Luxury Accommodation","Flights & Transfers","Curated Experiences"], status:"callcomp", assignedTo:"celead1", notes:"Ghana birthday trip. Discussing design fee.", dateReceived:"Mar 28, 2026", lastContact:"Apr 5, 2026", designPackage:"", ninetyDay:false }, { id:"lc3", name:"Amanda & James", contact:"amanda@example.com", source:"Referral — Text", tripType:"Honeymoon", travelDates:"May 2026", groupSize:"2", services:["Luxury Accommodation","Dining Reservations","24/7 Concierge Service"], status:"proposal", assignedTo:"psopm1", notes:"Proposal approved. Handed to ops.", dateReceived:"Feb 14, 2026", lastContact:"Mar 30, 2026", designPackage:"Week Getaway — $425", ninetyDay:true }, { id:"lc4", name:"Self-Care for Latinas",contact:"retreat@example.com", source:"Website Inquiry Form",tripType:"Retreat", travelDates:"Nov 2026", groupSize:"20", services:["Luxury Accommodation","Curated Experiences","Flights & Transfers"], status:"lead", assignedTo:"", notes:"El Salvador annual retreat inquiry.", dateReceived:"Apr 11, 2026", lastContact:"", designPackage:"", ninetyDay:false }, ]; const INIT_SPONSORED_TRIPS = [ { id:"st1", name:"Morocco Group Escape", dates:"Apr 22–28, 2026", destination:"Marrakech, Morocco", totalSeats:16, bookedSeats:11, depositPending:2, sources:{social:18,wetravel:7}, booked:{social:8,wetravel:3}, leads:[ { id:"wl1", name:"Maria Santos", email:"maria@email.com", source:"wetravel", status:"booked", dateAdded:"Mar 8, 2026", notes:"Paid deposit via WeTravel booking page" }, { id:"wl2", name:"Keisha Brown", email:"keisha@email.com", source:"social", status:"booked", dateAdded:"Mar 10, 2026", notes:"DM via Instagram" }, { id:"wl3", name:"Priya Nair", email:"priya@email.com", source:"wetravel", status:"booked", dateAdded:"Mar 12, 2026", notes:"WeTravel booking page" }, { id:"wl4", name:"Janet Flores", email:"", source:"social", status:"inquired", dateAdded:"Apr 12, 2026", notes:"Story reply on Instagram" }, { id:"wl5", name:"Diane Okafor", email:"diane@email.com", source:"wetravel", status:"pending", dateAdded:"Apr 8, 2026", notes:"Deposit pending confirmation" }, ]}, { id:"st2", name:"El Salvador Retreat", dates:"Sept 12–18, 2026", destination:"El Salvador", totalSeats:20, bookedSeats:6, depositPending:4, sources:{social:22,wetravel:4}, booked:{social:5,wetravel:1}, leads:[ { id:"wl6", name:"Carmen Rivera", email:"carmen@email.com", source:"social", status:"booked", dateAdded:"Mar 20, 2026", notes:"Instagram reel inquiry" }, { id:"wl7", name:"Tanya Williams",email:"tanya@email.com", source:"wetravel", status:"booked", dateAdded:"Mar 22, 2026", notes:"WeTravel page booking" }, { id:"wl8", name:"Lucia Mendez", email:"lucia@email.com", source:"social", status:"pending", dateAdded:"Apr 5, 2026", notes:"Facebook DM, deposit pending" }, ]}, { id:"st3", name:"Ghana Cultural Journey",dates:"Aug 5–14, 2026", destination:"Accra & Cape Coast, Ghana", totalSeats:14, bookedSeats:3, depositPending:1, sources:{social:9,wetravel:2}, booked:{social:3,wetravel:0}, leads:[ { id:"wl9", name:"Abena Asante",email:"abena@email.com", source:"social", status:"booked", dateAdded:"Apr 1, 2026", notes:"TikTok comment DM booked" }, { id:"wl10", name:"Grace Mensah", email:"grace@email.com", source:"wetravel", status:"inquired", dateAdded:"Apr 9, 2026", notes:"WeTravel inquiry, not yet booked" }, ]}, ]; const INIT_PROPOSALS = [ { id:"marrakech", destination:"Marrakech, Morocco", client:"Dennis Heyman", clientEmail:"dennis@example.com", tripType:"Group Trips", groupSize:10, dates:"Jul 10–17, 2026", nights:6, status:"review", activity:"Shared 2 days ago", comments:3, assignedTo:"psolead1", conversations:[ { name:"Dennis Heyman", role:"client", text:"The riad looks stunning! Is the rooftop available every evening?", time:"Mar 18, 4:20pm" }, { name:"Shammy", role:"team", text:"The rooftop is yours every evening!", time:"Mar 18, 5:10pm" }, ]}, { id:"peru", destination:"Sacred Valley, Peru", client:"Self-Care for Latinas", clientEmail:"retreat@example.com", tripType:"Retreats", groupSize:20, dates:"Nov 2026", nights:7, status:"feedback", activity:"Feedback 1 day ago", comments:5, assignedTo:"psopm1", conversations:[ { name:"Self-Care for Latinas", role:"client", text:"Can we swap Day 3 for the salt flats?", time:"Apr 10, 2:00pm" }, ]}, { id:"hawaii", destination:"Maui, Hawaii", client:"Amanda & James", clientEmail:"amanda@example.com", tripType:"Custom Trips", groupSize:2, dates:"May 2026", nights:10, status:"approved", activity:"Approved Mar 14", comments:8, assignedTo:"psolead2", conversations:[] }, { id:"elsalvador", destination:"El Salvador", client:"Self-Care Retreat", clientEmail:"", tripType:"Retreats", groupSize:15, dates:"Sept 2026", nights:5, status:"draft", activity:"Last edited today", comments:0, assignedTo:"psopm1", conversations:[] }, ]; const HOTELS = { luxe:[ { id:"l1", name:"Dar Sukkar", stars:5, price:"$1,200", desc:"Private riad exclusively for your group. Central Medina, rooftop terrace, plunge pool.", amenities:["Entire riad exclusively reserved","Private rooftop + plunge pool","Dedicated house staff 24/7","Daily breakfast included"] }, { id:"l2", name:"La Sultana Marrakech", stars:5, price:"$1,450", desc:"Five interconnected riads in the Kasbah. Rooftop pool, award-winning spa.", amenities:["Rooftop pool with Medina views","Full-service spa access","Butler service","Curated daily programs"] }, { id:"l3", name:"Royal Mansour", stars:5, price:"$2,200", desc:"The most iconic address in Marrakech — private riads with royal-level service.", amenities:["Private riad with personal staff","Royal Mansour Spa","Three signature restaurants","Bespoke experience concierge"] }, ], gold:[ { id:"g1", name:"Riad Kniza", stars:4, price:"$720", desc:"Antique-filled boutique riad, family-run with exceptional personal service.", amenities:["Courtyard pool and lounge","Rooftop terrace with views","Breakfast and afternoon tea","In-house hammam"] }, { id:"g2", name:"Riad Fes Maya", stars:4, price:"$640", desc:"Elegant 18th-century residence with Andalusian gardens and a rooftop terrace.", amenities:["Andalusian courtyard garden","Rooftop dining terrace","Daily breakfast included","Concierge experience desk"] }, { id:"g3", name:"Les Jardins de la Koutoubia", stars:4, price:"$580", desc:"Contemporary hotel near Jemaa el-Fna with two pools and a lush garden.", amenities:["Two outdoor pools","Heated indoor pool + spa","Central Medina location","Welcome dinner included"] }, ], silver:[ { id:"s1", name:"Riad Yasmine", stars:3, price:"$320", desc:"Colorful, photogenic riad with a signature pool and warm hospitality.", amenities:["Signature turquoise pool","Rooftop lounge area","Breakfast included"] }, { id:"s2", name:"Dar Darma", stars:3, price:"$280", desc:"Boutique riad with artisan-crafted interiors in the heart of the souk.", amenities:["Courtyard lounge","Artisan-tiled interiors","Breakfast included"] }, { id:"s3", name:"Maison MK", stars:3, price:"$260", desc:"Minimal, design-forward riad with a serene courtyard.", amenities:["Design-led interiors","Courtyard pool","Daily breakfast included"] }, ], }; const ADDONS = [ { id:"a1", icon:"🎈", name:"Private Hot Air Balloon", desc:"Sunrise balloon over the Palmeraie with champagne landing", price:"$320/person" }, { id:"a2", icon:"🍲", name:"Private Cooking Class", desc:"Moroccan cuisine with a master chef in a traditional kitchen", price:"$120/person" }, { id:"a3", icon:"🐪", name:"Desert Day Trip — Agafay", desc:"Camel trek, luxury desert camp lunch, sunset views", price:"$195/person" }, { id:"a4", icon:"🛍️", name:"Personal Shopping Guide", desc:"Half-day guide to the finest artisans and boutiques", price:"$85/person" }, { id:"a5", icon:"✍️", name:"Calligraphy Workshop", desc:"Private Arabic calligraphy with a local master artist", price:"$75/person" }, { id:"a6", icon:"📸", name:"Professional Photography", desc:"2-hour Medina session with edited gallery in 5 days", price:"$250/group" }, { id:"a7", icon:"✨", name:"Couples Hammam Ritual", desc:"Private hammam and argan oil treatment at the riad", price:"$160/couple" }, { id:"a8", icon:"🌙", name:"Airport VIP Meet & Greet", desc:"Fast-track and private lounge access on arrival", price:"$95/person" }, ]; const DAYS_DEFAULT = [ { title:"Arrival & Welcome Dinner — Nouba Rooftop", desc:"Private airport transfers to Dar Sukkar riad. Welcome refreshments. Evening: private rooftop dinner catered by Nouba.", meals:"Dinner included", hotel:"Dar Sukkar Riad" }, { title:"Medina at Dawn + Hammam & Wellness", desc:"Private guided sunrise walk through the Medina. Afternoon: group hammam and spa treatments at La Sultana Spa.", meals:"Breakfast included", hotel:"Dar Sukkar Riad" }, { title:"Ourika Valley Mountain Excursion", desc:"Full-day private excursion to the Ourika Valley. Berber village visit, waterfall hike, and mountain lodge lunch.", meals:"Breakfast + Lunch included", hotel:"Dar Sukkar Riad" }, { title:"Artisan Workshop + Safran by Koya Dinner", desc:"Morning at the leather tanneries with private artisan workshop. Evening: private dining at Safran by Koya.", meals:"Breakfast + Dinner included",hotel:"Dar Sukkar Riad" }, { title:"Free Day + Theatro Farewell Evening", desc:"Morning at leisure. Afternoon poolside. Evening: farewell dinner at Theatro.", meals:"Breakfast + Dinner included",hotel:"Dar Sukkar Riad" }, { title:"Departure Day", desc:"Late checkout. Final breakfast at the riad. Private transfers to Marrakech Menara Airport.", meals:"Breakfast included", hotel:"—" }, ]; const PROPOSAL_STAGES = [ { id:"s1", num:"01", title:"Client Brief Handoff", dept:"CE & Success", status:"Handoff Complete", statusColor:"#3B6D11", statusBg:"#EAF3DE", owners:["CE Lead","PM"], checklist:["Full profile shared with PSO","ClickUp status set to Proposal Phase","Design fee confirmed"], fields:[ { key:"clientProfile", label:"Client Profile Summary", type:"textarea", placeholder:"Summarize client profile, trip type, preferences, constraints..." }, { key:"designPackage", label:"Design Package", type:"select", options:["Mini Escape — $250","Week Getaway — $425","Adventure of a Lifetime — $550","Wellness Retreat / Group — $650","TBD"] }, { key:"designFee", label:"Design Fee Confirmed", type:"select", options:["Yes","No","Pending"] }, { key:"clickupStatus", label:"ClickUp Status Set", type:"select", options:["Yes — Proposal Phase","Not yet"] }, { key:"briefNotes", label:"Additional Brief Notes", type:"textarea", placeholder:"Specific client requests, constraints, or context from CE..." }, ]}, { id:"s2", num:"02", title:"Proposal Development", dept:"PSO", status:"In Development", statusColor:C.tealMid, statusBg:C.tealWash, owners:["PSO Lead","PSO PM"], checklist:["ClickUp project set up","Destinations researched","Draft proposal built"], fields:[ { key:"clickupProject", label:"ClickUp Project Created", type:"select", options:["Yes","No"] }, { key:"destinations", label:"Destinations Researched", type:"textarea", placeholder:"List destinations considered, rationale for selected option..." }, { key:"draftStatus", label:"Draft Proposal Status", type:"select", options:["Not started","In progress","Draft complete"] }, { key:"draftNotes", label:"Draft Development Notes", type:"textarea", placeholder:"Research notes, key elements of the proposal..." }, { key:"deliveryTarget", label:"Proposal Delivery Target Date", type:"text", placeholder:"e.g. April 10, 2026" }, ]}, { id:"s3", num:"03", title:"Vendor Scoping", dept:"PSO", status:"Vendor Scoping", statusColor:"#7a5520", statusBg:"#f5e9c8", owners:["PSO Lead","PSO PM"], checklist:["Partners identified","Availability & quotes confirmed","Logged in ClickUp"], fields:[ { key:"vendors", label:"Vendors / Partners Identified", type:"textarea", placeholder:"Hotels, experiences, transfers, dining, guides..." }, { key:"availability", label:"Availability Confirmed", type:"select", options:["All confirmed","Partially confirmed","Pending","Not started"] }, { key:"quotes", label:"Quotes Obtained", type:"select", options:["All received","Partially received","Pending"] }, { key:"clickupLogged", label:"Logged in ClickUp", type:"select", options:["Yes","No","In progress"] }, { key:"vendorNotes", label:"Vendor Notes & Holds", type:"textarea", placeholder:"Holds, deadlines, contingencies, backup options..." }, ]}, { id:"s4", num:"04", title:"Budget Alignment", dept:"PSO", status:"Budget Review", statusColor:"#854F0B", statusBg:"#FAEEDA", owners:["PSO Lead","PSO PM"], checklist:["Full cost model built","Aligned to design package","Scope changes flagged to CE"], fields:[ { key:"costModel", label:"Cost Model Status", type:"select", options:["Complete","In progress","Not started"] }, { key:"totalBudget", label:"Total Trip Cost (USD)", type:"text", placeholder:"e.g. $24,000" }, { key:"perPersonCost", label:"Per Person Cost (USD)", type:"text", placeholder:"e.g. $3,000" }, { key:"packageAlignment", label:"Aligned to Design Package", type:"select", options:["Yes — fully aligned","Partially aligned — see notes","No — CE review needed"] }, { key:"scopeChanges", label:"Scope Changes Flagged to CE", type:"select", options:["No changes","Yes — flagged","Pending CE review"] }, { key:"budgetNotes", label:"Budget Notes", type:"textarea", placeholder:"Cost breakdown, scope change details, CE feedback..." }, ]}, { id:"s5", num:"05", title:"Proposal Production", dept:"PSO + CE", status:"Proposal Ready", statusColor:C.tealMid, statusBg:C.tealWash, owners:["PSO Team","CE Lead"], checklist:["Built in WeTravel","Canva deck prepared (backup)","CE Lead review complete"], fields:[ { key:"wetravelStatus", label:"Built in WeTravel", type:"select", options:["Complete","In progress","Not started"] }, { key:"canvaDeck", label:"Canva Deck Prepared", type:"select", options:["Complete","In progress","Not needed","Not started"] }, { key:"ceReview", label:"CE Lead Review", type:"select", options:["Approved","In review","Not started","Revisions requested"] }, { key:"proposalLink", label:"WeTravel / Proposal Link", type:"text", placeholder:"Paste proposal URL here..." }, { key:"productionNotes",label:"Production Notes", type:"textarea", placeholder:"Final proposal notes, design decisions, CE feedback..." }, ]}, { id:"s6", num:"06", title:"Client Presentation", dept:"CE & Success", status:"Presented", statusColor:"#3a6878", statusBg:"#d8edf2", owners:["Anina","CE & Success Lead"], checklist:["CE Lead presents proposal","Client questions addressed","Feedback logged in ClickUp"], fields:[ { key:"presentationDate", label:"Presentation Date", type:"text", placeholder:"e.g. April 15, 2026" }, { key:"presentationMethod", label:"Presentation Method", type:"select", options:["Video call","In-person","Email / async","Portal share"] }, { key:"clientQuestions", label:"Client Questions / Feedback", type:"textarea", placeholder:"Log all client questions and responses..." }, { key:"feedbackLogged", label:"Feedback Logged in ClickUp", type:"select", options:["Yes","No","In progress"] }, { key:"presentationNotes", label:"Presentation Notes", type:"textarea", placeholder:"Overall impressions, client reaction, follow-up items..." }, ]}, { id:"s7", num:"07", title:"Client Approval", dept:"CE & Success", status:"Approved / Revise", statusColor:"#112e30", statusBg:"#B2E8E6", owners:["PSO Lead","PSO PM","CE & Success Lead"], checklist:["Approval formally collected","OR: revisions fed back to PSO","ClickUp status updated"], fields:[ { key:"approvalStatus", label:"Approval Status", type:"select", options:["Approved","Revisions requested","Pending","Declined"] }, { key:"approvalDate", label:"Approval Date", type:"text", placeholder:"e.g. April 18, 2026" }, { key:"revisionDetails", label:"Revision Details (if applicable)", type:"textarea", placeholder:"Detail any revisions requested — fed back to PSO..." }, { key:"clickupFinal", label:"ClickUp Status Updated", type:"select", options:["Yes — Approved","Yes — Revise","Not yet"] }, { key:"approvalNotes", label:"Approval Notes", type:"textarea", placeholder:"Final notes, conditions of approval, next steps..." }, ]}, ]; function exportProposalJSON(proposal, stageData, days, selectedHotel, selectedAddons) { const hotel = Object.values(HOTELS).flat().find(h=>h.id===selectedHotel)||null; const addons = ADDONS.filter(a=>selectedAddons.includes(a.id)); const payload = { _twwu_schema:"ops-handoff-v1", exportedAt:new Date().toISOString(), exportedBy:"Sales & Proposal Portal", proposal:{ id:proposal.id, destination:proposal.destination, client:proposal.client, clientEmail:proposal.clientEmail, tripType:proposal.tripType, groupSize:proposal.groupSize, dates:proposal.dates, nights:proposal.nights, status:"Approved" }, itinerary:days, accommodation:hotel, addOns:addons, proposalStages:stageData, handoff:{ triggeredAt:new Date().toISOString(), status:"Ready for Operations", notes:"Auto-generated from approved proposal." }, }; const blob = new Blob([JSON.stringify(payload,null,2)],{type:"application/json"}); const url = URL.createObjectURL(blob); const a = document.createElement("a"); a.href=url; a.download=`TWWU_OpsHandoff_${proposal.destination.replace(/[^a-zA-Z0-9]/g,"_")}_${new Date().toISOString().slice(0,10)}.json`; a.click(); URL.revokeObjectURL(url); } function parseWeCSV(text) { const lines = text.trim().split("\n").filter(l=>l.trim()); if (lines.length<2) return []; const headers = lines[0].split(",").map(h=>h.trim().toLowerCase().replace(/[^a-z0-9]/g,"")); const nameIdx = headers.findIndex(h=>h.includes("name")||h.includes("participant")); const emailIdx = headers.findIndex(h=>h.includes("email")); const dateIdx = headers.findIndex(h=>h.includes("date")||h.includes("created")); const statusIdx= headers.findIndex(h=>h.includes("status")||h.includes("payment")); return lines.slice(1).map((line,i)=>{ const cols = line.split(",").map(c=>c.trim().replace(/^"|"$/g,"")); const rawStatus = statusIdx>=0 ? cols[statusIdx]?.toLowerCase() : ""; const status = rawStatus.includes("paid")||rawStatus.includes("complet")||rawStatus.includes("confirm") ? "booked" : rawStatus.includes("pend") ? "pending" : "inquired"; return { id:"csv_"+Date.now()+"_"+i, name:nameIdx>=0?cols[nameIdx]||"Unknown":`Participant ${i+1}`, email:emailIdx>=0?cols[emailIdx]||"":"", source:"wetravel", status, dateAdded:dateIdx>=0?cols[dateIdx]||new Date().toLocaleDateString("en-US",{month:"short",day:"numeric",year:"numeric"}):new Date().toLocaleDateString("en-US",{month:"short",day:"numeric",year:"numeric"}), notes:"Imported from WeTravel CSV", }; }).filter(r=>r.name&&r.name!=="Unknown"||r.email); } const panel = {background:"white",border:`1px solid ${C.borderLight}`,borderRadius:12,overflow:"hidden",marginBottom:20}; const ph = {padding:"14px 20px",borderBottom:`1px solid ${C.borderLight}`,display:"flex",alignItems:"center",justifyContent:"space-between"}; const pt = {fontSize:11,fontWeight:500,letterSpacing:"0.08em",textTransform:"uppercase",color:C.textMuted}; const pb = {padding:20}; const inputSt = {width:"100%",border:`1px solid ${C.borderLight}`,borderRadius:7,padding:"9px 12px",fontFamily:"inherit",fontSize:13,color:C.textDark,outline:"none",background:"white"}; const labelSt = {fontSize:11,letterSpacing:"0.1em",textTransform:"uppercase",color:C.textMuted,marginBottom:5,display:"block",fontWeight:500}; function btn(v,extra={}) { return {fontFamily:"inherit",fontSize:12,fontWeight:500,padding:"7px 14px",borderRadius:6,cursor:"pointer",border:"none",display:"inline-flex",alignItems:"center",gap:6,transition:"all 0.15s",...extra, ...(v==="primary"?{background:C.tealMid,color:"white"}:v==="outline"?{background:"transparent",color:C.tealMid,border:`1px solid ${C.tealLight}`}:v==="danger"?{background:C.redBg,color:C.red,border:`1px solid rgba(163,45,45,0.2)`}:{background:"transparent",color:C.textMid,border:`1px solid ${C.borderMid}`})}; } function Badge({status}) { const sc = STATUS_COLORS[status]||STATUS_COLORS.draft; return {STATUS_LABELS[status]||status}; } function Stars({n}) { return {"★".repeat(n)}{"☆".repeat(5-n)}; } function Toast({msg}) { return msg ? : null; } function Avatar({member,size=28}) { if (!member) return null; return ; } function PipelineStatusPill({label,color}) { return {label}; } // ─── LOGIN ──────────────────────────────────────────────────────────────────── function LoginScreen({onLogin}) { const [search,setSearch] = useState(""); const [selected,setSelected] = useState(null); const depts = [...new Set(TEAM.map(t=>t.dept))]; const filtered = TEAM.filter(t=>t.name.toLowerCase().includes(search.toLowerCase())||t.role.toLowerCase().includes(search.toLowerCase())||t.dept.toLowerCase().includes(search.toLowerCase())); return ( ); } // ─── FINANCE DASHBOARD ──────────────────────────────────────────────────────── const DEMO_FINANCE = { summary:{ totalRevenue:284500, totalCosts:162800, netProfit:121700, margin:42.8, confirmedRevenue:198000, pipelineValue:86500 }, byTripType:[ { type:"Group Trips", revenue:112000, costs:67200, profit:44800, margin:40, trips:3 }, { type:"Retreats", revenue:78500, costs:44100, profit:34400, margin:43.8, trips:2 }, { type:"Custom Trips", revenue:64000, costs:36200, profit:27800, margin:43.4, trips:4 }, { type:"Corporate Retreats", revenue:30000, costs:15300, profit:14700, margin:49.0, trips:1 }, ], byTrip:[ { name:"Morocco Group Escape", type:"Group Trips", revenue:48000, costs:28800, profit:19200, status:"confirmed", client:"Dennis Heyman" }, { name:"El Salvador Retreat", type:"Retreats", revenue:38500, costs:22000, profit:16500, status:"confirmed", client:"Self-Care for Latinas" }, { name:"Maui Honeymoon", type:"Custom Trips", revenue:22000, costs:12400, profit:9600, status:"approved", client:"Amanda & James" }, { name:"Ghana Cultural Journey", type:"Group Trips", revenue:32000, costs:19000, profit:13000, status:"pipeline", client:"Kwame Asante" }, { name:"Sacred Valley Retreat", type:"Retreats", revenue:40000, costs:22100, profit:17900, status:"confirmed", client:"Self-Care for Latinas" }, { name:"Corporate Retreat TBD", type:"Corporate Retreats", revenue:30000, costs:15300, profit:14700, status:"pipeline", client:"TBD" }, ], designFees:{ collected:4250, outstanding:1300, total:5550 }, monthly:[ { month:"Jan", revenue:18000, costs:10800 }, { month:"Feb", revenue:24000, costs:14200 }, { month:"Mar", revenue:42000, costs:24000 }, { month:"Apr", revenue:38500, costs:22100 }, { month:"May", revenue:51000, costs:29200 }, { month:"Jun", revenue:44000, costs:25100 }, ], }; function FinanceDashboard({currentUser,toast}) { const [uploadedData,setUploadedData] = useState(null); const [showUpload,setShowUpload] = useState(false); const fileRef = useRef(null); const data = uploadedData || DEMO_FINANCE; const isDemo = !uploadedData; const handleFile = (e) => { const file = e.target.files[0]; if(!file) return; const reader = new FileReader(); reader.onload = (ev) => { try { const parsed = JSON.parse(ev.target.result); setUploadedData(parsed); setShowUpload(false); toast("Finance data loaded successfully!"); } catch(err) { toast("Could not parse JSON file. Please check the format."); } }; reader.readAsText(file); }; if (!currentUser.financeAccess) { return ( ); } const fmt = (n) => "$"+Math.round(n).toLocaleString(); const maxRev = Math.max(...data.monthly.map(m=>m.revenue)); const tripStatusColor = {confirmed:{bg:C.greenBg,color:C.green},approved:{bg:C.tealWash,color:C.tealMid},pipeline:{bg:C.amberBg,color:C.amber}}; return (