); } // ───────────────────────────────────────────────────────────── // Icons (Lucide subset, inline SVG, stroke 2) // ───────────────────────────────────────────────────────────── const Icon = { briefcase: (p) => , fileText: (p) => , user: (p) => , bell: (p) => , menu: (p) => , mapPin: (p) => , euro: (p) => , check: (p) => , checkCircle: (p) => , clock: (p) => , calendar: (p) => , upload: (p) => , chevronRight: (p) => , chevronLeft: (p) => , filter: (p) => , search: (p) => , settings: (p) => , card: (p) => , shield: (p) => , logout: (p) => , plus: (p) => , x: (p) => , message: (p) => , star: (p) => , phone: (p) => , }; // ───────────────────────────────────────────────────────────── // Buttons // ───────────────────────────────────────────────────────────── function Button({ children, variant = 'primary', size = 'md', full, onClick, leading, trailing, style }) { const sizes = { sm: { h: 40, px: 14, fs: 14, br: 10 }, md: { h: 52, px: 18, fs: 15, br: 12 }, lg: { h: 60, px: 22, fs: 17, br: 14 }, }[size]; const variants = { primary: { bg: C.t1, color: C.white, border: 'none', shadow: '0 4px 14px rgba(10,114,101,.32)' }, dark: { bg: C.g1, color: C.white, border: 'none', shadow: '0 4px 14px rgba(15,81,50,.32)' }, yellow: { bg: C.yellow, color: '#3F2A06', border: 'none', shadow: '0 4px 14px rgba(252,211,77,.4)' }, secondary: { bg: C.white, color: C.g1, border: `1.5px solid ${C.line}`, shadow: 'none' }, ghost: { bg: 'transparent', color: C.g1, border: 'none', shadow: 'none' }, danger: { bg: C.white, color: C.danger, border: `1.5px solid ${C.line}`, shadow: 'none' }, }[variant]; return ( ); } // ───────────────────────────────────────────────────────────── // Status badge // ───────────────────────────────────────────────────────────── function Badge({ children, variant = 'new', size = 'md' }) { const variants = { new: { bg: '#FEF3C7', fg: '#92400E', dot: C.warning, label: 'Nouveau' }, pending:{ bg: '#DBEAFE', fg: '#1E40AF', dot: C.info, label: 'En attente' }, accepted:{ bg: '#D1FAE5', fg: '#065F46', dot: C.success, label: 'Accepté' }, inprogress:{ bg: '#FEF3C7', fg: '#854D0E', dot: C.warning, label: 'En cours' }, validated:{ bg: '#D1FAE5', fg: '#065F46', dot: C.success, label: 'Validé' }, refused:{ bg: '#FEE2E2', fg: '#991B1B', dot: C.danger, label: 'Refusé' }, urgent: { bg: '#FEE2E2', fg: '#991B1B', dot: C.danger, label: 'Urgent' }, }[variant] || { bg: C.line, fg: C.text, dot: C.sub }; const fontSize = size === 'sm' ? 11 : 12; const padY = size === 'sm' ? 4 : 5; const padX = size === 'sm' ? 8 : 10; return ( {children || variants.label} ); } // ───────────────────────────────────────────────────────────── // Métier badge (with category color) // ───────────────────────────────────────────────────────────── function MetierBadge({ metier }) { const colors = { 'Plomberie': { bg: '#DBEAFE', fg: '#1E40AF' }, 'Électricité': { bg: '#FEF3C7', fg: '#92400E' }, 'Maçonnerie': { bg: '#E5E7EB', fg: '#374151' }, 'Menuiserie': { bg: '#FED7AA', fg: '#9A3412' }, 'Couverture': { bg: '#DDD6FE', fg: '#5B21B6' }, 'Peinture': { bg: '#FBCFE8', fg: '#9D174D' }, 'Cuisine': { bg: '#FED7AA', fg: '#9A3412' }, 'Énergie': { bg: '#DBEAFE', fg: '#1E40AF' }, 'DPE': { bg: '#FEF3C7', fg: '#92400E' }, }[metier] || { bg: C.line, fg: C.sub }; return ( {metier} ); } // ───────────────────────────────────────────────────────────── // Chantier card — main feed primitive // ───────────────────────────────────────────────────────────── function ChantierCard({ chantier, onClick, accepted = false }) { return (

{chantier.urgent && Urgent} {accepted && }

{chantier.title}

{chantier.zone} · {chantier.distance}

{chantier.budget}€ budget client

{chantier.posted}

); } // ───────────────────────────────────────────────────────────── // Bottom navigation (4 tabs) // ───────────────────────────────────────────────────────────── function BottomNav({ active, onChange, platform = 'ios' }) { const items = [ { key: 'chantiers', label: 'Chantiers', Icon: Icon.briefcase }, { key: 'devis', label: 'Mes devis', Icon: Icon.fileText }, { key: 'messages', label: 'Messages', Icon: Icon.message, badge: 2 }, { key: 'profil', label: 'Profil', Icon: Icon.user }, ]; const isAndroid = platform === 'android'; return (

{items.map(it => { const isActive = active === it.key; return ( ); })}

); } // ───────────────────────────────────────────────────────────── // App header — branded green band // ───────────────────────────────────────────────────────────── function AppHeader({ title, subtitle, onMenu, onBell, bellCount, dark = true, safeTop = 50 }) { return (

{!dark && }

{subtitle}

{title}

); } // ───────────────────────────────────────────────────────────── // Filter chips // ───────────────────────────────────────────────────────────── function FilterChips({ items, active, onChange }) { return (

{items.map(it => { const isActive = active === it.key; return ( ); })}

); } // ───────────────────────────────────────────────────────────── // Document upload row (KBIS / RC pro / décennale) // ───────────────────────────────────────────────────────────── function DocumentUploadRow({ label, status, filename, onUpload }) { const variants = { pending: { bg: C.bg, border: C.line, fg: C.sub, label: 'À téléverser', icon: Icon.upload, iconColor: C.sub }, uploaded: { bg: '#FEF3C7', border: '#FDE68A', fg: '#92400E', label: 'En vérification', icon: Icon.clock, iconColor: '#92400E' }, validated: { bg: '#D1FAE5', border: '#A7F3D0', fg: '#065F46', label: 'Validé', icon: Icon.checkCircle, iconColor: C.success }, rejected: { bg: '#FEE2E2', border: '#FECACA', fg: '#991B1B', label: 'Refusé — re-téléverser', icon: Icon.x, iconColor: C.danger }, }[status]; const I = variants.icon; return ( ); } Object.assign(window, { C, BatiSpotMark, BatiSpotLogo, GradientBand, Icon, Button, Badge, MetierBadge, ChantierCard, BottomNav, AppHeader, FilterChips, DocumentUploadRow, });