import React,{useMemo,useState,useEffect} from "react";
import {createRoot} from "react-dom/client";
import {createClient} from "@supabase/supabase-js";
import {Activity,AlertTriangle,BarChart3,Bell,Bot,CheckCircle2,CircleDollarSign,CreditCard,Download,Eye,Globe2,Headphones,LayoutDashboard,LogOut,MapPin,Menu,Moon,Package,Plus,RefreshCw,Search,Send,Settings,ShieldCheck,Sun,Ticket,Truck,Users,Wallet,X,Zap} from "lucide-react";
import {Area,AreaChart,Bar,BarChart,CartesianGrid,ResponsiveContainer,Tooltip,XAxis,YAxis,PieChart,Pie,Cell} from "recharts";
import "./styles.css";

const url=import.meta.env.VITE_SUPABASE_URL,key=import.meta.env.VITE_SUPABASE_ANON_KEY;
const supabase=url&&key?createClient(url,key):null;
const carriers=["Yalidine","ZR Express","DHL","FedEx","UPS","Colissimo","Chronopost","DPD","Mondial Relay","Boxtal"];
const statuses=["Confirmée","Expédiée","En transit","En livraison","Livrée","Échec","Retournée"];
const seed=[
["TS-10482","Amine B.","+213555214418","Tizi Ouzou","Yalidine","En transit",12900,650,"YAL-8F31K2","2026-10-08",false],
["TS-10481","Sarah K.","+213770132960","Alger","ZR Express","Livrée",8400,500,"ZR-92K8M1","2026-10-06",false],
["TS-10480","Yanis M.","+213661339011","Oran","Yalidine","En livraison",15600,750,"YAL-2N88QP","2026-10-06",false],
["TS-10479","Nadia T.","+213550881242","Béjaïa","DHL","Échec",6200,900,"DHL-55P9AA","2026-10-06",true],
["TS-10478","Mehdi A.","+213697552014","Blida","Yalidine","Livrée",11000,600,"YAL-7H3P0D","2026-10-05",false],
["TS-10477","Lina S.","+213540903117","Sétif","ZR Express","Retournée",9700,700,"ZR-1A0Q4Z","2026-10-05",false],
["TS-10476","Karim R.","+213772110562","Boumerdès","Yalidine","En transit",13400,550,"YAL-3D4X8L","2026-10-07",false],
["TS-10475","Imen Z.","+213555447708","Constantine","Colissimo","Expédiée",7200,800,"COL-4P8N2V","2026-10-08",false]
];
const makeOrders=()=>seed.map(x=>({id:x[0],customer:x[1],phone:x[2],city:x[3],carrier:x[4],status:x[5],amount:x[6],cost:x[7],tracking:x[8],eta:x[9],blocked:x[10]}));
const money=n=>new Intl.NumberFormat("fr-DZ").format(n)+" DA";
const cls=(...x)=>x.filter(Boolean).join(" ");

function App(){
 const [dark,setDark]=useState(localStorage.tsDark==="1"),[page,setPage]=useState("dashboard"),[mobile,setMobile]=useState(false),[orders,setOrders]=useState(makeOrders()),[q,setQ]=useState(""),[filter,setFilter]=useState("Tous"),[add,setAdd]=useState(false),[selected,setSelected]=useState(null),[toast,setToast]=useState("");
 useEffect(()=>{document.documentElement.classList.toggle("dark",dark);localStorage.tsDark=dark?"1":"0"},[dark]);
 const notify=m=>{setToast(m);setTimeout(()=>setToast(""),2500)};
 const filtered=useMemo(()=>orders.filter(o=>(!q||Object.values(o).join(" ").toLowerCase().includes(q.toLowerCase()))&&(filter==="Tous"||o.status===filter)),[orders,q,filter]);
 const metrics={total:orders.length,transit:orders.filter(o=>["Expédiée","En transit","En livraison"].includes(o.status)).length,delivered:orders.filter(o=>o.status==="Livrée").length,late:orders.filter(o=>o.blocked||o.status==="Échec").length,returns:orders.filter(o=>o.status==="Retournée").length};
 metrics.rate=Math.round(metrics.delivered/metrics.total*100);
 const update=(id,status)=>{setOrders(a=>a.map(o=>o.id===id?{...o,status}:o));notify("Statut mis à jour — automatisations prêtes à partir.");};
 const exportCSV=()=>{const s="Commande,Client,Ville,Transporteur,Statut,Montant,Suivi\\n"+orders.map(o=>[o.id,o.customer,o.city,o.carrier,o.status,o.amount,o.tracking].join(",")).join("\\n");const a=document.createElement("a");a.href=URL.createObjectURL(new Blob([s],{type:"text/csv"}));a.download="tracksale-orders.csv";a.click()};
 return <><Sidebar page={page} setPage={setPage} mobile={mobile} setMobile={setMobile} dark={dark} setDark={setDark}/>
 <main className="lg:pl-64"><header className="top"><button className="lg:hidden" onClick={()=>setMobile(true)}><Menu/></button><div><small>Espace vendeur</small><h1>{pageName(page)}</h1></div><div className="top-actions"><button className="icon"><Bell/><i/></button><button className="icon" onClick={()=>setDark(!dark)}>{dark?<Sun/>:<Moon/>}</button><div className="avatar">RT</div></div></header>
 <div className="wrap">
 {page==="dashboard"&&<Dashboard m={metrics} orders={orders} go={setPage}/>}
 {page==="orders"&&<Orders orders={filtered} q={q} setQ={setQ} filter={filter} setFilter={setFilter} add={()=>setAdd(true)} update={update} view={setSelected} exportCSV={exportCSV}/>}
 {page==="tracking"&&<Tracking orders={orders}/>}
 {page==="customers"&&<Customers orders={orders}/>}
 {page==="support"&&<Support notify={notify}/>}
 {page==="analytics"&&<Analytics orders={orders}/>}
 {page==="automations"&&<Automations notify={notify}/>}
 {page==="integrations"&&<Integrations notify={notify}/>}
 {page==="billing"&&<Billing/>}
 {page==="settings"&&<SettingsPage notify={notify}/>}
 {page==="admin"&&<Admin/>}
 </div></main>
 {add&&<AddModal close={()=>setAdd(false)} save={o=>{setOrders(a=>[o,...a]);setAdd(false);notify("Commande créée et numéro de suivi généré.")}}/>}
 {selected&&<TrackModal order={selected} close={()=>setSelected(null)}/>}
 {toast&&<div className="toast"><CheckCircle2/> {toast}</div>}</>
}
function pageName(p){return {dashboard:"Tableau de bord",orders:"Commandes",tracking:"Suivi client",customers:"Clients",support:"SAV & Litiges",analytics:"Analytics",automations:"Automatisations",integrations:"Intégrations",billing:"Abonnement",settings:"Paramètres",admin:"Super Admin"}[p]}
function Sidebar({page,setPage,mobile,setMobile,dark,setDark}){
 const nav=[["dashboard","Tableau de bord",LayoutDashboard],["orders","Commandes",Package],["tracking","Suivi client",MapPin],["customers","Clients",Users],["support","SAV & Litiges",Headphones],["analytics","Analytics",BarChart3],["automations","Automatisations",Zap],["integrations","Intégrations",Globe2],["billing","Abonnement",CreditCard],["settings","Paramètres",Settings]];
 return <aside className={cls("sidebar",mobile&&"mobile-open")}><div className="brand"><span><Truck/></span><b>TRACKSALE <em>PRO</em></b><button className="lg:hidden" onClick={()=>setMobile(false)}><X/></button></div><nav>{nav.map(([id,n,I])=><button key={id} className={cls(page===id&&"active")} onClick={()=>{setPage(id);setMobile(false)}}><I/>{n}</button>)}<hr/><button className={page==="admin"?"active":""} onClick={()=>{setPage("admin");setMobile(false)}}><ShieldCheck/>Super Admin</button></nav><div className="side-bottom"><div className="mode"><b>Mode</b><button onClick={()=>setDark(!dark)}>{dark?<Sun/>:<Moon/>}</button><small>Démo Starter · 7 jours</small></div><button className="logout"><LogOut/>Déconnexion</button></div></aside>
}
function Stat({icon:I,label,value,sub}){return <div className="card stat"><div className="stat-icon"><I/></div><strong>{value}</strong><b>{label}</b><small>{sub}</small></div>}
function Dashboard({m,orders,go}){
 const data=[{n:"30 sept.",o:42,d:31},{n:"1 oct.",o:58,d:44},{n:"2 oct.",o:51,d:40},{n:"3 oct.",o:73,d:55},{n:"4 oct.",o:68,d:54},{n:"5 oct.",o:81,d:66},{n:"6 oct.",o:92,d:73}];
 return <div className="space"><div className="hero"><div><h2>Bonjour, Rezki 👋</h2><p>La santé de vos livraisons en un coup d’œil.</p></div><button className="primary" onClick={()=>go("orders")}><Plus/>Nouvelle commande</button></div><div className="stats">{[[Package,"Commandes",m.total,"Période"],[Truck,"En transit",m.transit,"À suivre"],[CheckCircle2,"Livrées",m.delivered,"Succès"],[AlertTriangle,"En retard",m.late,"Attention"],[RefreshCw,"Retours",m.returns,"Retournés"],[Activity,"Taux livraison",m.rate+"%","Global"]].map(([I,l,v,s])=><Stat key={l} icon={I} label={l} value={v} sub={s}/>)}</div><div className="grid2"><div className="card panel"><div className="panel-head"><div><b>Performance des livraisons</b><small>7 derniers jours</small></div><select><option>Cette semaine</option><option>Ce mois</option></select></div><div className="chart"><ResponsiveContainer><AreaChart data={data}><CartesianGrid strokeDasharray="3 3" vertical={false} opacity=".2"/><XAxis dataKey="n" tickLine={false} axisLine={false}/><YAxis tickLine={false} axisLine={false}/><Tooltip/><Area dataKey="o" name="Commandes" stroke="#1683ff" fill="#1683ff" fillOpacity=".12" strokeWidth={3}/><Area dataKey="d" name="Livrées" stroke="#10b981" fill="none" strokeWidth={2}/></AreaChart></ResponsiveContainer></div></div><div className="card panel"><b>Alertes intelligentes</b><small>À traiter maintenant</small><div className="alerts">{orders.filter(o=>o.blocked||o.status==="Échec").map(o=><div className="alert" key={o.id}><AlertTriangle/><div><b>{o.id} · {o.customer}</b><small>Échec / blocage · {o.carrier}</small></div></div>)}</div><button className="secondary full" onClick={()=>go("support")}>Voir le centre SAV</button></div></div><div className="card table-card"><div className="table-head"><b>Dernières commandes</b><button onClick={()=>go("orders")}>Tout voir →</button></div><OrderTable orders={orders.slice(0,6)}/></div></div>
}
function Orders({orders,q,setQ,filter,setFilter,add,update,view,exportCSV}){return <div className="space"><div className="hero"><div><h2>Commandes</h2><p>{orders.length} résultat(s) · suivi opérationnel.</p></div><div className="actions"><button className="secondary" onClick={exportCSV}><Download/>Exporter</button><button className="primary" onClick={add}><Plus/>Ajouter</button></div></div><div className="card filters"><div className="search"><Search/><input value={q} onChange={e=>setQ(e.target.value)} placeholder="Commande, client, téléphone, suivi..."/></div><select value={filter} onChange={e=>setFilter(e.target.value)}><option>Tous</option>{statuses.map(s=><option key={s}>{s}</option>)}</select><select><option>Transporteur</option>{carriers.map(c=><option key={c}>{c}</option>)}</select></div><div className="card table-card"><OrderTable orders={orders} update={update} view={view}/></div></div>}
function statusClass(s){return s==="Livrée"?"ok":s==="Échec"||s==="Retournée"?"bad":s==="En livraison"?"warn":"info"}
function Badge({s}){return <span className={"badge "+statusClass(s)}>{s}</span>}
function OrderTable({orders,update,view}){return <div className="overflow"><table><thead><tr><th>Commande</th><th>Client</th><th>Transporteur</th><th>Statut</th><th>Montant</th><th>ETA</th><th>Action</th></tr></thead><tbody>{orders.map(o=><tr key={o.id}><td><b>{o.id}</b><small>{o.tracking}</small></td><td><b>{o.customer}</b><small>{o.city}</small></td><td><Truck size={15}/> {o.carrier}</td><td>{update?<select className={"status "+statusClass(o.status)} value={o.status} onChange={e=>update(o.id,e.target.value)}>{statuses.map(s=><option key={s}>{s}</option>)}</select>:<Badge s={o.status}/>}</td><td><b>{money(o.amount)}</b></td><td>{o.eta}</td><td><button className="icon" onClick={()=>view?.(o)}><Eye/></button></td></tr>)}</tbody></table></div>}
function Tracking({orders}){const [code,setCode]=useState("YAL-8F31K2"),o=orders.find(x=>x.tracking===code);return <div className="space"><div><h2>Suivi client</h2><p>Page de suivi brandée, partageable et multilingue.</p></div><div className="card filters"><div className="search"><Search/><input value={code} onChange={e=>setCode(e.target.value)} placeholder="Numéro de suivi"/></div><button className="primary">Rechercher</button></div><div className="tracking-grid"><div className="card tracking"><div className="tracking-head"><small>TRACKSALE PRO · Ma Boutique DZ</small><h3>Votre commande est en route</h3></div>{o?<><div className="tracking-meta"><b>{o.id}</b><Badge s={o.status}/></div><Timeline status={o.status}/><div className="eta"><Truck/><div><b>Livraison estimée</b><small>{o.eta} · {o.city}</small></div></div></>:<p>Aucun colis trouvé.</p>}</div><div className="side-cards"><div className="card panel"><b>Page publique</b><small>URL personnalisable</small><div className="url">suivi.maboutique.com/track</div><button className="primary full">Personnaliser</button></div><div className="card panel"><b>Langues</b><div className="chips"><span>🇫🇷 Français</span><span>🇬🇧 English</span><span>🇩🇿 العربية</span></div></div></div></div></div>}
function Timeline({status}){let all=["Confirmée","Expédiée","En transit","En livraison","Livrée"],idx=all.indexOf(status);if(idx<0)idx=2;return <div className="timeline">{all.map((s,i)=><div className="tl" key={s}><div className={cls("dot",i<=idx&&"done")}>{i<=idx?<CheckCircle2/>:i+1}</div><div><b className={i<=idx?"":"muted"}>{s}</b><small>{i<=idx?"06 oct. 2026 · 09:2"+i:"En attente"}</small></div></div>)}</div>}
function Customers({orders}){return <div className="space"><div><h2>Clients</h2><p>Historique, contact direct et valeur client.</p></div><div className="customer-grid">{orders.slice(0,6).map(o=><div className="card customer" key={o.phone}><div className="person"><span>{o.customer.split(" ").map(x=>x[0]).join("")}</span><div><b>{o.customer}</b><small>{o.phone}</small></div></div><div className="customer-data"><div><small>Ville</small><b>{o.city}</b></div><div><small>Commande</small><b>{money(o.amount)}</b></div></div><a className="secondary full" href={"https://wa.me/"+o.phone} target="_blank">WhatsApp</a></div>)}</div></div>}
function Support({notify}){return <div className="space"><div className="hero"><div><h2>SAV & Litiges</h2><p>Tickets, retours et relances.</p></div><button className="primary" onClick={()=>notify("Ticket créé.")}>+ Nouveau ticket</button></div><div className="stats smallstats"><Stat icon={Ticket} label="Tickets ouverts" value="7" sub="3 prioritaires"/><Stat icon={RefreshCw} label="Retours" value="2" sub="À traiter"/><Stat icon={Bot} label="Réponses IA" value="94%" sub="Résolution"/></div><div className="card table-card"><table><thead><tr><th>Ticket</th><th>Client</th><th>Motif</th><th>Priorité</th><th>Statut</th></tr></thead><tbody>{[["#TK-208","Nadia T.","Colis non reçu","Urgent","Ouvert"],["#TK-207","Yanis M.","Adresse à modifier","Normale","En cours"],["#TK-206","Sarah K.","Avis client","Basse","Résolu"]].map(x=><tr key={x[0]}><td><b>{x[0]}</b></td><td>{x[1]}</td><td>{x[2]}</td><td><Badge s={x[3]==="Urgent"?"Échec":"En transit"}/></td><td>{x[4]}</td></tr>)}</tbody></table></div></div>}
function Analytics({orders}){let data=carriers.map(c=>{let a=orders.filter(o=>o.carrier===c);return{name:c,total:a.length,del:a.filter(o=>o.status==="Livrée").length}}).filter(x=>x.total);let pie=[{name:"Livrées",value:orders.filter(o=>o.status==="Livrée").length},{name:"Transit",value:orders.filter(o=>["Expédiée","En transit","En livraison"].includes(o.status)).length},{name:"Échec/retour",value:orders.filter(o=>["Échec","Retournée"].includes(o.status)).length}];return <div className="space"><div><h2>Analytics & rapports</h2><p>Performance transporteurs, délais et rentabilité.</p></div><div className="grid2"><div className="card panel"><b>Transporteurs</b><div className="chart"><ResponsiveContainer><BarChart data={data}><CartesianGrid strokeDasharray="3 3" vertical={false} opacity=".2"/><XAxis dataKey="name" angle={-20} textAnchor="end" height={60}/><YAxis/><Tooltip/><Bar dataKey="total" fill="#1683ff"/><Bar dataKey="del" fill="#10b981"/></BarChart></ResponsiveContainer></div></div><div className="card panel"><b>Répartition</b><div className="chart"><ResponsiveContainer><PieChart><Pie data={pie} dataKey="value" nameKey="name" outerRadius={95} label>{pie.map((_,i)=><Cell key={i} fill={["#1683ff","#f59e0b","#ef4444"][i]}/>)}</Pie><Tooltip/></PieChart></ResponsiveContainer></div></div></div><div className="stats"><Stat icon={Activity} label="Délai moyen" value="2,4 j" sub="Expédition → livraison"/><Stat icon={RefreshCw} label="Taux retour" value="8,6%" sub="Objectif < 10%"/><Stat icon={Wallet} label="Bénéfice net" value={money(orders.reduce((a,o)=>a+o.amount-o.cost,0))} sub="Démo"/><Stat icon={Download} label="Rapports" value="PDF / XLSX" sub="Prêts à brancher"/></div></div>}
function Automations({notify}){let rules=[["SMS · Expédition","Votre colis {{tracking}} a été expédié."],["WhatsApp · Transit","Bonjour {{customer}}, votre commande est en route 🚚"],["J+1 · Avis","Comment s’est passée votre livraison ? ⭐"],["Alerte · +48h","Colis bloqué depuis plus de 48h."],["Échec · Relance","Relancer automatiquement le client."]];return <div className="space"><div className="hero"><div><h2>Automatisations</h2><p>SMS, Email, WhatsApp et agent IA.</p></div><button className="primary" onClick={()=>notify("Règle ajoutée.")}>+ Créer</button></div>{rules.map((r,i)=><div className="card rule" key={r[0]}><div className="rule-icon"><Zap/></div><div><b>{r[0]}</b><p>{r[1]}</p></div><Badge s="Livrée"/><button className="secondary">Modifier</button></div>)}<div className="card ai"><Bot/><div><h3>Agent IA WhatsApp</h3><p>Répond automatiquement à « où est ma commande ? », consulte le statut et transfère les cas sensibles au SAV. Connecteur WhatsApp Business requis en production.</p><button className="primary" onClick={()=>notify("Agent IA activé en mode démo.")}>Activer l’agent IA</button></div></div></div>}
function Integrations({notify}){let a=[["Shopify","Commandes + webhooks","🛍️"],["WooCommerce","REST API + webhooks","🛒"],["Wix","Orders API","◈"],["YouCan","Synchronisation","⚡"],["Yalidine","Tracking + statuts","🚚"],["ZR Express","Tracking + statuts","📦"],["DHL / FedEx / UPS","APIs transporteurs","✈️"],["Stripe / PayPal","Abonnements SaaS","💳"]];return <div className="space"><div><h2>Intégrations</h2><p>Connectez votre e-commerce, logistique et facturation.</p></div><div className="integration-grid">{a.map(x=><div className="card integration" key={x[0]}><span>{x[2]}</span><h3>{x[0]}</h3><p>{x[1]}</p><button className="secondary full" onClick={()=>notify(x[0]+" prêt à configurer.")}>Connecter</button></div>)}</div><div className="card panel"><b>Transporteurs</b><div className="chips">{carriers.map(c=><span key={c}>{c}</span>)}</div></div></div>}
function Billing(){let plans=[["STARTER","1 900 DA/mois","1 000 commandes · 1 boutique · 2 utilisateurs"],["PRO","4 900 DA/mois","5 000 commandes · 5 boutiques · 10 utilisateurs"],["AGENCY","11 900 DA/mois","25 000 commandes · 20 boutiques · utilisateurs illimités"]];return <div className="space"><div><h2>Abonnement</h2><p>Essai gratuit 7 jours · facturation mensuelle.</p></div><div className="plans">{plans.map((p,i)=><div className={cls("card plan",i===1&&"featured")} key={p[0]}><b>{p[0]}</b><strong>{p[1]}</strong><p>{p[2]}</p><ul>{["Tracking brandé","Automatisations","Analytics","SAV"].map(x=><li key={x}>✓ {x}</li>)}</ul><button className={i===1?"primary":"secondary"}>{i===1?"Plan actuel":"Choisir "+p[0]}</button></div>)}</div><div className="card panel"><b>Paiement sécurisé</b><p>Stripe, PayPal et passerelles locales via backend sécurisé.</p></div></div>}
function SettingsPage({notify}){return <div className="space"><div><h2>Paramètres</h2><p>Marque, domaine, notifications et sécurité.</p></div><div className="grid2"><div className="card panel form"><b>Identité boutique</b><label>Nom<input defaultValue="Ma Boutique DZ"/></label><label>Domaine de suivi<input defaultValue="suivi.maboutique.com"/></label><label>Couleur<input defaultValue="#1683ff"/></label><button className="primary" onClick={()=>notify("Paramètres sauvegardés.")}>Enregistrer</button></div><div className="card panel"><b>Notifications</b>{["Email","SMS","WhatsApp","Alerte vendeur","Avis J+1"].map(x=><label className="toggle" key={x}>{x}<input type="checkbox" defaultChecked/></label>)}</div></div><div className="card panel"><ShieldCheck/><b>Sécurité & RGPD</b><p>RLS Supabase, isolation par workspace, export/suppression des données et journaux d’activité prévus pour la production.</p></div></div>}
function Admin(){return <div className="space"><div><h2>Super Admin</h2><p>Vue globale de la plateforme SaaS.</p></div><div className="stats"><Stat icon={Users} label="Vendeurs actifs" value="284" sub="+18 ce mois"/><Stat icon={CircleDollarSign} label="MRR" value="1,84 M DA" sub="+11,4%"/><Stat icon={Activity} label="Commandes / mois" value="86 420" sub="Plateforme"/><Stat icon={AlertTriangle} label="Incidents" value="2" sub="À surveiller"/></div><div className="grid2"><div className="card panel"><b>Abonnements</b><div className="bars">{[["STARTER",142],["PRO",111],["AGENCY",31]].map(x=><div key={x[0]}><span>{x[0]} <b>{x[1]}</b></span><i><em style={{width:x[1]/284*100+"%"}}/></i></div>)}</div></div><div className="card panel"><b>Derniers comptes</b>{["Fashion DZ","Tech House","Beauty Store","Algeria Gadgets","Kinetic Shop"].map((x,i)=><div className="account" key={x}><span>{i+1}</span><b>{x}</b><small>{i%2?"PRO":"STARTER"}</small></div>)}</div></div></div>}
function AddModal({close,save}){const submit=e=>{e.preventDefault();let f=new FormData(e.currentTarget);save({id:"TS-"+Math.floor(10500+Math.random()*1000),customer:f.get("customer"),phone:f.get("phone"),city:f.get("city"),carrier:f.get("carrier"),status:"Confirmée",amount:+f.get("amount"),cost:+f.get("cost"),tracking:"TS-"+Math.random().toString(36).slice(2,9).toUpperCase(),eta:"2026-10-10",blocked:false})};return <Modal title="Nouvelle commande" close={close}><form className="formgrid" onSubmit={submit}>{[["customer","Client"],["phone","Téléphone"],["city","Ville"],["amount","Montant DA"],["cost","Frais livraison DA"]].map(x=><label key={x[0]}>{x[1]}<input name={x[0]} required type={x[0].includes("amount")||x[0]==="cost"?"number":"text"}/></label>)}<label>Transporteur<select name="carrier">{carriers.map(c=><option key={c}>{c}</option>)}</select></label><button className="primary span2">Créer la commande</button></form></Modal>}
function Modal({title,close,children}){return <div className="modal-bg"><div className="modal"><div className="modal-head"><h3>{title}</h3><button className="icon" onClick={close}><X/></button></div>{children}</div></div>}
function TrackModal({order,close}){return <Modal title={"Suivi "+order.id} close={close}><div className="tracking-head"><small>TRACKSALE PRO</small><h3>Colis en route</h3></div><div className="tracking-meta"><b>{order.tracking}</b><Badge s={order.status}/></div><Timeline status={order.status}/></Modal>}
createRoot(document.getElementById("root")).render(<App/>);