AutoMoto Admin

Analytics

Revenue, bookings & fleet performance

{showReport&&(

Monthly Revenue Report

Bookings

{rptBks.length}

Revenue

{MVR(rptRev)}

Avg Booking

{rptBks.length?MVR(Math.round(rptRev/rptBks.length)):'—'}

Bikes Used

{rptBikesUsed}

{rptBks.map(b=>( ))} {!rptBks.length&&} {rptBks.length>0&&}

Customer	Bike	Amount
{b.userName} {fmtDate(b.startDate)} → {fmtDate(b.endDate)}	{b.bikeName}	{MVR(b.total)}
No bookings in {MN_FULL[reportMonth]} {reportYear}
Total		{MVR(rptRev)}

)} {/* KPI row */}

=0?'↑ '+revPct+'% vs last month':'↓ '+Math.abs(revPct)+'% vs last month'):null} subPos={revPct>=0}/>

{/* Second KPI row */}

70?'var(--green)':utilPct>40?'var(--amber)':'var(--text2)'} sub={rentedToday+' / '+visibleBikes.length+' bikes out today'} subPos={true}/> 80?'var(--green)':'var(--amber)'} sub={signedContracts+' of '+totalContracts+' signed'} subPos={signRate>60}/> =0?'↑ '+bkPct+'% vs last month':'↓ '+Math.abs(bkPct)+'% vs last month'):null} subPos={bkPct>=0}/>

{/* Revenue chart */}

Monthly Revenue — Last 6 Months

{months.map((m,i) => { const h = Math.max(4, Math.round((m.rev/maxRev)*116)); return (

{m.rev>0 &&

{MVR(m.rev)}

}

{m.label}

{m.count>0 &&

{m.count}×

}

); })}

{/* Upcoming returns + Booking status */}

Upcoming Returns (next 7 days)

{upcoming.length ? upcoming.map((b,i) => { const e = new Date(b.endDate||b.end_date); const diff = Math.round((e-today)/86400000); return (

{b.userName||b.user_name}

{b.bikeName||b.bike_name}

{diff===0?'Today':diff===1?'Tomorrow':fmtDate(b.endDate||b.end_date)}

); }) :

No returns in the next 7 days.

}

Booking Status Breakdown

{['confirmed','active','completed','cancelled','pending'].map(s => { const cnt = bookings.filter(b=>b.status===s).length; const pct = bookings.length ? Math.round((cnt/bookings.length)*100) : 0; const COLOR = {confirmed:'var(--blue)',active:'var(--green)',completed:'var(--text2)',cancelled:'var(--red)',pending:'var(--amber)'}; const BG = {confirmed:'var(--blue-dim)',active:'var(--green-dim)',completed:'var(--faint)',cancelled:'var(--red-dim)',pending:'var(--amber-dim)'}; return (

{s} {cnt}

); })}

{/* Bike performance table */}

Performance by Bike

{byBike.map(b => ( ))} {!byBike.length && }

Bike	Trips	Revenue	Avg/Trip	Yield/Day
{b.name} {b.year}	{b.bookings}	{MVR(b.revenue)}	{b.bookings>0?MVR(Math.round(b.revenue/b.bookings)):'—'}	{b.days>0?MVR(b.yield):'—'}
No booking data yet.

{/* Mobile bike cards */}

{byBike.map(b => (

{b.name} ({b.year})

{b.bookings} trips · {b.days} days rented

{MVR(b.revenue)}

{b.days>0?MVR(b.yield)+'/day':'—'}

))} {!byBike.length &&

No booking data yet.

}

); } const DEFAULT_PERMS = { bookings: true, contracts: true, users: false, bikes: true, nonpayers: false, invoices: true, content: false, analytics: false }; const ROLE_CFG = { superadmin: { label: 'Super Admin', color: 'var(--red)', bg: 'var(--red-dim)' }, manager: { label: 'Manager', color: 'var(--blue)', bg: 'var(--blue-dim)' }, staff: { label: 'Staff', color: 'var(--green)', bg: 'var(--green-dim)' }, }; const ALL_PERMS = ['bookings','contracts','users','bikes','nonpayers','invoices','content','analytics']; // Pages staff role is allowed to access (in display order) const STAFF_PAGES = ['dashboard','bookings','contracts','invoices','bikes']; // Returns NAV_ITEMS visible to this user, with Fleet label for bikes when staff function navItemsFor(adminUser) { if (!adminUser) return []; if (adminUser.role === 'staff') { return NAV_ITEMS .filter(n => STAFF_PAGES.includes(n.id)) .map(n => n.id === 'bikes' ? {...n, label:'Fleet', mobIcon:'\ud83c\udfcd'} : n) .sort((a,b) => STAFF_PAGES.indexOf(a.id) - STAFF_PAGES.indexOf(b.id)); } return NAV_ITEMS; } function PageAdminUsers({currentUser}) { const [admins, setAdmins] = useState([]); const [loading, setLoading] = useState(true); const [showAdd, setShowAdd] = useState(false); const [detail, setDetail] = useState(null); const [form, setForm] = useState({name:'',email:'',password:'',role:'staff',permissions:{...DEFAULT_PERMS},active:true}); const [saving, setSaving] = useState(false); const [err, setErr] = useState(''); const load = async () => { setLoading(true); try { const rows = await sbGet('admin_users','select=*&order=created_at.asc'); setAdmins(rows||[]); } catch(e) {} setLoading(false); }; useEffect(()=>{ load(); },[]); const save = async () => { if(!form.name.trim()||!form.email.trim()||!form.password.trim()) { setErr('Name, email and password are required.'); return; } setSaving(true); setErr(''); try { await sbInsert('admin_users',{name:form.name.trim(),email:form.email.trim().toLowerCase(),password:form.password,role:form.role,permissions:form.permissions,active:form.active}); await load(); setShowAdd(false); setForm({name:'',email:'',password:'',role:'staff',permissions:{...DEFAULT_PERMS},active:true}); } catch(e) { setErr(e.message||'Failed to create user.'); } setSaving(false); }; const toggleActive = async (u) => { await sbUpdate('admin_users', u.id, {active:!u.active}); await load(); }; const updateRole = async (u, role) => { await sbUpdate('admin_users', u.id, {role}); await load(); if(detail&&detail.id===u.id) setDetail(prev=>({...prev,role})); }; const updatePerms = async (u, perms) => { await sbUpdate('admin_users', u.id, {permissions:perms}); await load(); if(detail&&detail.id===u.id) setDetail(prev=>({...prev,permissions:perms})); }; const resetPw = async (u, newPw) => { if(!newPw.trim()) return; await sbUpdate('admin_users', u.id, {password:newPw.trim()}); alert('Password updated.'); }; const PermToggle = ({perms, setPerms, disabled}) => (

{ALL_PERMS.map(p=>( !disabled&&setPerms({...perms,[p]:!perms[p]})} style={{width:14,height:14,accentColor:'var(--red)',cursor:'pointer'}}/> {p} ))}

); return (

Access Control

Admin Users

{currentUser?.role==='superadmin'&&}

{loading ?

Loading…

: ( <>

{admins.map(u=>( ))}

Name	Email	Role	Last Login	Status	Actions
{u.name}{u.id===currentUser?.id&&(you)}	{u.email}		{u.last_login?fmtDate(u.last_login.split('T')[0]):'Never'}	{u.active?'Active':'Inactive'}	{currentUser?.role==='superadmin'&&u.id!==currentUser?.id&&( )}

{}

{admins.map(u=>(

setDetail(u)}>

{u.name}{u.id===currentUser?.id&&' (you)'}

{u.email}

{u.active?'Active':'Inactive'} Last login: {u.last_login?fmtDate(u.last_login.split('T')[0]):'Never'}

))}

)} {} {showAdd&&( setShowAdd(false)}>

{[['name','Full Name'],['email','Email Address'],['password','Password']].map(([k,l])=>(

{l} setForm(p=>({...p,[k]:ev.target.value}))}/>

))}

Role

Page Permissions setForm(prev=>({...prev,permissions:p}))}/>

{err&&

{err}

}

)} {} {detail&&( setDetail(null)} wide>

Name

{detail.name}

{detail.email}

Joined

{fmtDate(detail.created_at?.split('T')[0])}

Last Login

{detail.last_login?fmtDate(detail.last_login.split('T')[0]):'Never'}

{currentUser?.role==='superadmin'&&detail.id!==currentUser?.id&&( <>

Role

{['staff','manager','superadmin'].map(r=>( ))}

Page Permissions updatePerms(detail,p)}/>

Reset Password

)} {(currentUser?.role!=='superadmin'||detail.id===currentUser?.id)&&(

Contact your super admin to make changes to this account.

)}

); } /* ════ ACCOUNTING ════ */ const ACCOUNT_TYPES = ['asset','liability','equity','income','expense']; const ACCOUNT_TYPE_COLOR = { asset: {color:'var(--blue)',bg:'#0A1628',border:'#0d1f3c'}, liability: {color:'var(--amber)',bg:'#1C1200',border:'#2a1c00'}, equity: {color:'#A855F7',bg:'#1A0A2A',border:'#2d1545'}, income: {color:'var(--green)',bg:'#052010',border:'#0a3018'}, expense: {color:'var(--red-soft)',bg:'#2A0000',border:'#440000'}, }; const TX_TYPES = ['income','expense','transfer','journal']; const PAYMENT_METHODS = ['cash','bank_transfer','card','other']; function fmtCurrency(amount,code='MVR'){return code+' '+Number(amount).toLocaleString('en-US',{minimumFractionDigits:2,maximumFractionDigits:2});} async function loadAccounting(){const[accs,txs,curs]=await Promise.all([sbGet('accounts','select=*&active=eq.true&order=code.asc'),sbGet('transactions','select=*&order=date.desc,created_at.desc'),sbGet('currencies','select=*&active=eq.true&order=code.asc')]);return{accounts:accs||[],transactions:txs||[],currencies:curs||[]};} function calcPL(transactions,period='month'){const now=new Date();const start=new Date(now.getFullYear(),period==='month'?now.getMonth():period==='quarter'?Math.floor(now.getMonth()/3)*3:0,1);const txs=transactions.filter(t=>new Date(t.date)>=start);const income=txs.filter(t=>t.type==='income').reduce((a,t)=>a+Number(t.amount_mvr),0);const expense=txs.filter(t=>t.type==='expense').reduce((a,t)=>a+Number(t.amount_mvr),0);return{income,expense,net:income-expense,txs};} function AccDashboard({data}){const{transactions}=data;const month=calcPL(transactions,'month');const year=calcPL(transactions,'year');const recentTx=[...transactions].slice(0,8);const StatCard=({label,value,color})=>(

{label}

{value}

);return(

This Month

=0?'#22C55E':'#FF5555'}/>

This Year

=0?'#22C55E':'#FF5555'}/>

Recent Transactions

{recentTx.length===0&&

No transactions yet.

}{recentTx.map(t=>(

{t.description}

{fmtDate(t.date)} · {t.type} · {t.payment_method||'—'}

{t.type==='income'?'+':'-'}{fmtCurrency(t.amount_mvr)}

))}

);} function AccTransactions({data,reload,adminUser}){const{accounts,currencies,transactions}=data;const[showAdd,setShowAdd]=useState(false);const[filter,setFilter]=useState('all');const[search,setSearch]=useState('');const[form,setForm]=useState({date:nowStr(),type:'income',description:'',reference:'',debit_account:'',credit_account:'',amount:'',currency:'MVR',rate_to_mvr:'1',payment_method:'cash',notes:''});const filtered=transactions.filter(t=>{if(filter!=='all'&&t.type!==filter)return false;if(search&&!t.description.toLowerCase().includes(search.toLowerCase()))return false;return true;});const amountMVR=()=>(Number(form.amount)||0)*(Number(form.rate_to_mvr)||1);const saveTransaction=async()=>{if(!form.description||!form.amount||!form.debit_account||!form.credit_account)return;await sbInsert('transactions',{date:form.date,type:form.type,description:form.description,reference:form.reference||null,debit_account:form.debit_account,credit_account:form.credit_account,amount:Number(form.amount),currency:form.currency,rate_to_mvr:Number(form.rate_to_mvr)||1,amount_mvr:amountMVR(),payment_method:form.payment_method,notes:form.notes||null,created_by:adminUser?.id||null});await reload();setShowAdd(false);setForm({date:nowStr(),type:'income',description:'',reference:'',debit_account:'',credit_account:'',amount:'',currency:'MVR',rate_to_mvr:'1',payment_method:'cash',notes:''});};return(

{['all',...TX_TYPES].map(f=>())}

setSearch(ev.target.value)} placeholder="Search transactions…" style={{marginBottom:12}}/>

{filtered.map(t=>())}{!filtered.length&&}

Date	Description	Type	Method	Amount (MVR)
{fmtDate(t.date)}	{t.description} {t.reference&& {t.reference} }	{t.type}	{t.payment_method?.replace('_',' ')\|\|'—'}	{t.type==='income'?'+':'-'}{fmtCurrency(t.amount_mvr)}
No transactions found.

{filtered.map(t=>(

{t.description}

{fmtDate(t.date)} · {t.payment_method?.replace('_',' ')||'—'}

{t.type==='income'?'+':'-'}{fmtCurrency(t.amount_mvr)}

))}

{showAdd&&(setShowAdd(false)} wide>

DatesetForm(p=>({...p,date:ev.target.value}))}/>

Type

DescriptionsetForm(p=>({...p,description:ev.target.value}))} placeholder="e.g. Bike rental payment"/>

Reference (optional)setForm(p=>({...p,reference:ev.target.value}))} placeholder="e.g. RIDE-001"/>

Debit Account

Credit Account

AmountsetForm(p=>({...p,amount:ev.target.value}))} placeholder="0.00"/>

Currency

Rate to MVRsetForm(p=>({...p,rate_to_mvr:ev.target.value}))}/>

Payment Method

Notes (optional)

setForm(p=>({...p,notes:ev.target.value}))} rows={2} style={{resize:'vertical'}}/></div><div style={{background:'var(--bg)',borderRadius:8,padding:'12px 14px',marginBottom:14,display:'flex',justifyContent:'space-between',alignItems:'center'}}><span style={{fontSize:12,color:'var(--muted)',fontWeight:600}}>Total in MVR</span><span style={{fontSize:20,fontWeight:900,color:form.type==='income'?'#22C55E':'#FF5555'}}>{fmtCurrency(amountMVR())}</span></div><div style={{display:'flex',gap:8}}><button className="btn btn-red" style={{flex:1,fontSize:12}} onClick={saveTransaction} disabled={!form.description||!form.amount||!form.debit_account||!form.credit_account}>Save Transaction</button><button className="btn btn-ghost" style={{flex:1,fontSize:12}} onClick={()=>setShowAdd(false)}>Cancel</button></div></div></Modal>)}</div>);}

function AccountingAuthGate({adminUser, children}) {
  const [unlocked, setUnlocked] = useState(false);
  const [unlockedAt, setUnlockedAt] = useState(null);
  const [step, setStep]   = useState('password');
  const [pass, setPass]   = useState('');
  const [otp,  setOtp]    = useState('');
  const [err,  setErr]    = useState('');
  const [busy, setBusy]   = useState(false);

// Auto-lock after 30 minutes
  useEffect(() => {
    if (!unlocked) return;
    const timer = setTimeout(() => { setUnlocked(false); setStep('password'); setPass(''); setOtp(''); }, 30 * 60 * 1000);
    return () => clearTimeout(timer);
  }, [unlocked]);

const resendOTP = async () => {
    setBusy(true);
    const code = await createOTP(adminUser.email, 'accounting');
    await sendEmail({ type:'otp', to:adminUser.email, name:adminUser.name, otp:code });
    setErr('New code sent.');
    setBusy(false);
  };

if (unlocked) return (
    <div>
      <div style={{display:'flex',alignItems:'center',gap:8,marginBottom:16,padding:'8px 12px',background:'var(--green-dim)',border:'1px solid var(--green-dim)',borderRadius:8}}>
        <span style={{fontSize:11,color:'var(--green)',fontWeight:700}}>🔓 Accounting unlocked</span>
        <span style={{fontSize:10,color:'var(--muted)',marginLeft:'auto'}}>Auto-locks in 30 min</span>
        <button onClick={()=>{setUnlocked(false);setStep('password');setPass('');setOtp('');}} style={{background:'none',border:'1px solid var(--border)',borderRadius:4,padding:'2px 8px',cursor:'pointer',fontSize:10,color:'var(--muted)'}}>Lock</button>
      </div>
      {children}
    </div>
  );

return (
    <div className="page">
      <div style={{marginBottom:18}}><div className="lbl" style={{marginBottom:4}}>Accounting</div><div className="page-title">Finance</div></div>
      <div style={{maxWidth:400,margin:'0 auto'}}>
        <div className="card" style={{padding:28}}>
          <div style={{textAlign:'center',marginBottom:20}}>
            <div style={{fontSize:32,marginBottom:8}}>🔐</div>
            <div style={{fontSize:16,fontWeight:800,marginBottom:4}}>{step==='password'?'Verify Identity':'Check Your Email'}</div>
            <div style={{fontSize:12,color:'var(--muted)',lineHeight:1.6}}>{step==='password'?'Re-enter your password to access financial data.':'Enter the 6-digit code sent to '+adminUser?.email}</div>
          </div>
          {step==='password' && (
            <>
              <div className="field" style={{marginBottom:16}}><label className="lbl">Password</label>
                <input value={pass} onChange={ev=>setPass(ev.target.value)} onKeyDown={ev=>ev.key==='Enter'&&submitPassword()} type="password" placeholder="••••••••" autoFocus/>
              </div>
              {err&&<div style={{background:'var(--red-dim)',border:'1px solid var(--red)',borderRadius:6,padding:'8px 10px',fontSize:11,color:'var(--red-soft)',marginBottom:12}}>{err}</div>}
              <button className="btn btn-red" style={{width:'100%',fontSize:12}} onClick={submitPassword} disabled={busy||!pass}>
                {busy?<span style={{display:'flex',alignItems:'center',justifyContent:'center',gap:8}}><Spinner/>Verifying…</span>:'Continue'}
              </button>
            </>
          )}
          {step==='otp' && (
            <>
              <div className="field" style={{marginBottom:16}}><label className="lbl">One-Time Code</label>
                <input value={otp} onChange={ev=>setOtp(ev.target.value.replace(/\D/g,'').slice(0,6))} onKeyDown={ev=>ev.key==='Enter'&&submitOTP()} type="text" inputMode="numeric" placeholder="000000" style={{fontSize:24,fontWeight:900,letterSpacing:'.2em',textAlign:'center'}} autoFocus/>
              </div>
              {err&&<div style={{background:'var(--red-dim)',border:'1px solid var(--red)',borderRadius:6,padding:'8px 10px',fontSize:11,color:'var(--red-soft)',marginBottom:12}}>{err}</div>}
              <button className="btn btn-red" style={{width:'100%',fontSize:12,marginBottom:10}} onClick={submitOTP} disabled={busy||otp.length<6}>
                {busy?<span style={{display:'flex',alignItems:'center',justifyContent:'center',gap:8}}><Spinner/>Verifying…</span>:'Unlock Accounting'}
              </button>
              <div style={{display:'flex',gap:10,justifyContent:'center'}}>
                <button onClick={resendOTP} disabled={busy} style={{background:'none',border:'none',color:'var(--muted)',fontSize:11,cursor:'pointer'}}>Resend code</button>
                <span style={{color:'var(--border)'}}>·</span>
                <button onClick={()=>{setStep('password');setOtp('');setErr('');}} style={{background:'none',border:'none',color:'var(--muted)',fontSize:11,cursor:'pointer'}}>Back</button>
              </div>
            </>
          )}
        </div>
      </div>
    </div>
  );
}

/* ── Notification Bell ── */
function NotificationBell({bookings, notifications=[]}){
  bookings = bookings || [];
  notifications = notifications || [];
  const[open,setOpen]=useState(false);
  const[seen,setSeen]=useState(()=>{
    try{return JSON.parse(localStorage.getItem('automoto_seen_notifs')||'[]');}catch(e){return [];}
  });

const now=new Date();
  const alerts=[];

// DB notifications from Supabase
  notifications.forEach(function(n){
    alerts.push({id:'db-'+n.id, type: n.type==='danger'?'danger':n.type==='warning'?'warning':'info',
      msg:n.title+(n.body?' — '+n.body:''), time:n.created_at, read:n.read});
  });

// Unsigned contracts older than 1 hour
  bookings.forEach(function(b){
    if(b.contractStatus==='pending'){
      const age=now-new Date(b.createdAt||b.date);
      if(age>3600000){
        alerts.push({id:'unsigned-'+b.id,type:'warning',msg:'Contract unsigned: '+b.userName+' ('+b.ref+')',time:b.createdAt||b.date});
      }
    }
    // Bikes due for return today
    if((b.status==='confirmed'||b.status==='active')&&b.endDate){
      const end=new Date(b.endDate);
      const diff=Math.round((end-now)/(1000*60*60*24));
      if(diff===0){
        alerts.push({id:'return-'+b.id,type:'info',msg:'Bike due back today: '+b.userName+' — '+b.bikeName,time:b.endDate});
      }
      if(diff<0){
        alerts.push({id:'overdue-'+b.id,type:'danger',msg:'Overdue: '+b.userName+' ('+Math.abs(diff)+'d)',time:b.endDate});
      }
    }
  });

const unseen=alerts.filter(function(a){return !seen.includes(a.id) && !a.read;});

return(
    <div style={{position:'relative'}}>
      <button onClick={()=>{setOpen(o=>{if(!o&&unseen.length)markAllSeen();return !o;})}} style={{background:'none',border:'none',cursor:'pointer',position:'relative',padding:4,fontSize:18,lineHeight:1}}>
        🔔
        {unseen.length>0&&<span style={{position:'absolute',top:-1,right:-1,background:'#DC2626',color:'#fff',borderRadius:'50%',width:16,height:16,fontSize:9,fontWeight:700,display:'flex',alignItems:'center',justifyContent:'center'}}>{unseen.length}</span>}
      </button>
      {open&&(
        <>
          <div style={{position:'fixed',inset:0,zIndex:199}} onClick={()=>setOpen(false)}/>
          <div style={{position:'absolute',right:0,top:40,width:320,background:'var(--card)',border:'1px solid var(--border)',borderRadius:14,boxShadow:'0 12px 40px rgba(0,0,0,.18)',zIndex:200,overflow:'hidden'}}>
            <div style={{padding:'13px 16px',fontWeight:800,fontSize:13,borderBottom:'1px solid var(--border)',display:'flex',justifyContent:'space-between',alignItems:'center',background:'var(--card)'}}>
              <span>Notifications</span>
              {unseen.length>0&&<span style={{fontSize:11,color:'var(--red)',fontWeight:700,background:'var(--red-dim)',padding:'2px 8px',borderRadius:20}}>{unseen.length} new</span>}
            </div>
            <div style={{maxHeight:360,overflowY:'auto'}}>
              {alerts.length===0&&<div style={{padding:28,textAlign:'center',color:'var(--muted)',fontSize:13}}>All clear ✓</div>}
              {alerts.map(function(a){
                const isNew=!seen.includes(a.id)&&!a.read;
                return(
                  <div key={a.id} style={{padding:'11px 16px',borderBottom:'1px solid var(--border)',background:isNew?TYPE_BG[a.type]:'transparent',display:'flex',gap:10,alignItems:'flex-start'}}>
                    <span style={{fontSize:14,marginTop:1,flexShrink:0}}>{TYPE_ICON[a.type]}</span>
                    <div style={{flex:1,minWidth:0}}>
                      <div style={{fontSize:12,fontWeight:isNew?700:500,color:isNew?TYPE_COLOR[a.type]:'var(--text)',marginBottom:2,lineHeight:1.4}}>{a.msg}</div>
                      <div style={{fontSize:10,color:'var(--muted)'}}>{fmtDate(a.time)}</div>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        </>
      )}
    </div>
  );
}

/* ── Return Checklist Modal ── */
function ReturnChecklistModal({booking, bike, onConfirm, onClose}){
  const[damaged,setDamaged]=useState(false);
  const[desc,setDesc]=useState('');
  const[charge,setCharge]=useState('');
  const[photo,setPhoto]=useState(null);
  const[saving,setSaving]=useState(false);
  const photoRef=useRef();

const handleFile=ev=>{
    const f=ev.target.files[0]; if(!f) return;
    const r=new FileReader(); r.onload=e=>setPhoto(e.target.result); r.readAsDataURL(f);
  };

return(
    <Modal title="Return Checklist" onClose={onClose}>
      <div style={{padding:20}}>
        <div style={{background:'var(--faint)',borderRadius:10,padding:'12px 14px',marginBottom:18}}>
          <div style={{fontWeight:700,fontSize:14,marginBottom:2}}>{bike?.brand} {bike?.name} {bike?.tag?'· BK-'+bike.tag:''}</div>
          <div style={{fontSize:12,color:'var(--muted)'}}>{booking?.userName} · Returned {new Date().toLocaleDateString()}</div>
        </div>

<div className="lbl" style={{marginBottom:10}}>Checklist</div>
        {['Helmet returned','Keys returned','No fuel issues','Documents intact'].map(item=>(
          <label key={item} style={{display:'flex',alignItems:'center',gap:10,marginBottom:12,cursor:'pointer'}}>
            <input type="checkbox" defaultChecked style={{width:16,height:16,accentColor:'var(--red)'}}/>
            <span style={{fontSize:13}}>{item}</span>
          </label>
        ))}

<div style={{borderTop:'1px solid var(--border)',paddingTop:16,marginTop:8}}>
          <label style={{display:'flex',alignItems:'center',gap:10,cursor:'pointer',marginBottom:damaged?16:0}}>
            <input type="checkbox" checked={damaged} onChange={e=>setDamaged(e.target.checked)} style={{width:18,height:18,accentColor:'#DC2626'}}/>
            <span style={{fontSize:13,fontWeight:700,color:'#DC2626'}}>Damage reported</span>
          </label>
          {damaged&&(
            <div style={{background:'rgba(220,38,38,.06)',borderRadius:10,padding:14,border:'1px solid rgba(220,38,38,.18)'}}>
              <textarea
                value={desc} onChange={e=>setDesc(e.target.value)}
                placeholder="Describe the damage..."
                style={{width:'100%',minHeight:80,borderRadius:8,border:'1px solid var(--border)',padding:'8px 10px',fontSize:13,fontFamily:'Satoshi,sans-serif',background:'var(--card)',color:'var(--text)',resize:'vertical',boxSizing:'border-box'}}
              />
              <div style={{display:'flex',gap:10,marginTop:10,alignItems:'center'}}>
                <div className="field" style={{flex:1,margin:0}}>
                  <label className="lbl">Charge Amount (MVR)</label>
                  <input className="input" type="number" min="0" value={charge} onChange={e=>setCharge(e.target.value)} placeholder="0"/>
                </div>
                <div>
                  <label className="lbl">Photo</label>
                  <input ref={photoRef} type="file" accept="image/*" capture="environment" onChange={handleFile} style={{display:'none'}}/>
                  <button className="btn btn-ghost" style={{fontSize:12}} onClick={()=>photoRef.current.click()}>
                    {photo?'📷 Change':'📷 Photo'}
                  </button>
                </div>
              </div>
              {photo&&<img src={photo} alt="damage" style={{marginTop:10,width:'100%',maxHeight:160,objectFit:'cover',borderRadius:8}}/>}
            </div>
          )}
        </div>

<div style={{display:'flex',gap:10,marginTop:20}}>
          <button className="btn btn-ghost" style={{flex:1}} onClick={onClose} disabled={saving}>Cancel</button>
          <button className="btn btn-red" style={{flex:2}} onClick={handleConfirm} disabled={saving}>
            {saving?'Saving…':'Confirm Return'}
          </button>
        </div>
      </div>
    </Modal>
  );
}

/* ── Page Damage Reports ── */
function PageDamage({damageReports=[]}){
  const total = damageReports.reduce((a,d)=>a+(d.amount_charged||0),0);
  return(
    <div className="page">
      <div style={{marginBottom:18}}>
        <div className="lbl" style={{marginBottom:4}}>Fleet</div>
        <div className="page-title">Damage Reports</div>
      </div>
      {damageReports.length>0&&(
        <div className="card" style={{padding:'14px 18px',marginBottom:16,display:'flex',gap:24}}>
          <div><div className="lbl">Total Reports</div><div style={{fontSize:20,fontWeight:900}}>{damageReports.length}</div></div>
          <div><div className="lbl">Total Charges</div><div style={{fontSize:20,fontWeight:900,color:'var(--red-soft)'}}>{MVR(total)}</div></div>
        </div>
      )}
      <div className="tbl-wrap card" style={{overflow:'hidden'}}>
        <table>
          <thead><tr><th>Date</th><th>Customer</th><th>Bike</th><th>Description</th><th style={{textAlign:'right'}}>Charge</th></tr></thead>
          <tbody>
            {damageReports.map(d=>(
              <tr key={d.id}>
                <td style={{fontSize:12,color:'var(--muted)'}}>{fmtDate(d.date)}</td>
                <td style={{fontWeight:700}}>{d.customer_name}</td>
                <td style={{fontSize:12}}>{d.bike_name}</td>
                <td style={{fontSize:12,color:'var(--text2)',maxWidth:200}}>{d.description||<span style={{color:'var(--muted)'}}>None</span>}</td>
                <td style={{textAlign:'right',fontWeight:700,color:d.amount_charged>0?'#DC2626':'var(--muted)'}}>{d.amount_charged>0?MVR(d.amount_charged):'—'}</td>
              </tr>
            ))}
            {!damageReports.length&&<tr><td colSpan="5" style={{textAlign:'center',padding:32,color:'var(--muted)'}}>No damage reports yet.</td></tr>}
          </tbody>
        </table>
      </div>
      <div className="card-list">
        {damageReports.map(d=>(
          <div key={d.id} className="data-card">
            <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start',marginBottom:8}}>
              <div>
                <div style={{fontWeight:800,fontSize:14}}>{d.customer_name}</div>
                <div style={{fontSize:12,color:'var(--muted)'}}>{d.bike_name} · {fmtDate(d.date)}</div>
              </div>
              {d.amount_charged>0&&<div style={{fontWeight:900,fontSize:16,color:'#DC2626'}}>{MVR(d.amount_charged)}</div>}
            </div>
            {d.description&&<div style={{fontSize:12,color:'var(--text2)',lineHeight:1.5}}>{d.description}</div>}
            {d.photo_url&&<img src={d.photo_url} alt="damage" style={{marginTop:8,width:'100%',maxHeight:140,objectFit:'cover',borderRadius:8}}/>}
          </div>
        ))}
      </div>
    </div>
  );
}

useEffect(() => { if(authed) loadAll(); }, [authed]);

// Service worker + push
  useEffect(() => {
    if (!authed) return;
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('/sw.js').catch(()=>{});
    }
  }, [authed]);

const persistNonPayer = async (np) => {
    const photoUrl = np.photo && np.photo.startsWith('data:')
      ? await uploadPhoto(np.photo, 'automoto-media', 'nonpayers/np')
      : np.photo;
    const row = {ref:np.ref,name:np.name,phone:np.phone,bike_name:np.bikeName,amount:np.amount,days:np.days,date:np.date,status:np.status,photo_url:photoUrl,notes:np.notes};
    await sbInsert('non_payers', row);
    await loadAll();
  };

const persistInvoice = async (inv) => {
    const row = {number:inv.number,customer_name:inv.customerName,customer_phone:inv.customerPhone,date:inv.date,items:inv.items,extra_charges:inv.extraCharges||[],subtotal:inv.subtotal,total:inv.total,payment_status:inv.paymentStatus,paid_at:inv.paidAt||null,notes:inv.notes||null};
    await sbInsert('invoices', row);
    await loadAll();
  };

const persistContent = async (contentObj) => {
    const rows = Object.entries(contentObj).map(([key,value])=>({key,value}));
    await sbUpsert('site_content', rows);
  };

const updateBookingStatus = async (id, status) => {
    await sbUpdate('bookings', id, {status});
    setBookings(prev=>prev.map(b=>b.id===id?{...b,status}:b));
  };

const openReturnChecklist = (bookingId, bikeId) => {
    const booking = bookings.find(b=>String(b.id)===String(bookingId));
    const bike    = bikes.find(b=>String(b.id)===String(bikeId));
    setReturnModal({booking, bike, bookingId, bikeId});
  };

const updateNonPayerStatus = async (id, status) => {
    await sbUpdate('non_payers', id, {status});
    setNonPayers(prev=>prev.map(n=>n.id===id?{...n,status}:n));
  };

const sendContract = b => {
    const msg = encodeURIComponent('Hello '+b.userName+',\n\nPlease sign your AutoMoto rental contract ('+b.ref+').\n\nLink: https://automoto.rent/contract?id='+b.id+'\n\n— AutoMoto');
    window.open('https://wa.me/'+b.phone.replace(/\D/g,'')+'?text='+msg,'_blank');
  };

const counts = {
    bookings:  bookings.filter(b=>b.contractStatus==='pending').length||undefined,
    invoices:  invoices.filter(i=>i.paymentStatus==='unpaid').length||undefined,
    contracts: contracts.filter(c=>c.status==='pending'||c.status==='expiring_soon').length||undefined,
    nonpayers: nonPayers.filter(n=>n.status!=='resolved').length||undefined,
  };

if (!authed) return <LoginScreen onLogin={(u)=>{setAuthed(true);setAdminUser(u);try{localStorage.setItem('automoto_authed','1');localStorage.setItem('automoto_user',JSON.stringify(u));}catch(e){}}}/>;

const navigate = p => { setPage(p); setDrawer(false); window.scrollTo(0,0); };

const canAccess = id => {
    if (!adminUser) return false;
    if (adminUser.role === 'superadmin') return true;
    if (adminUser.role === 'staff') return STAFF_PAGES.includes(id);
    if (id === 'dashboard' || id === 'analytics' || id === 'adminusers') return true;
    return adminUser.permissions?.[id] === true;
  };

if (loading) return (
    <div style={{minHeight:'100vh',display:'flex',alignItems:'center',justifyContent:'center',background:'var(--bg)',flexDirection:'column',gap:16}}>
      <svg className="sp" width="32" height="32" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" stroke="#CC0000" strokeWidth="2" strokeOpacity=".2"/><path d="M12 2a10 10 0 0110 10" stroke="#CC0000" strokeWidth="2" strokeLinecap="round"/></svg>
      <div style={{fontSize:13,color:'var(--muted)',fontWeight:600}}>Loading AutoMoto data…</div>
    </div>
  );

if (dbError) return (
    <div style={{minHeight:'100vh',display:'flex',alignItems:'center',justifyContent:'center',background:'var(--bg)',padding:24}}>
      <div style={{background:'var(--red-dim)',border:'1px solid #CC0000',borderRadius:12,padding:'28px 32px',maxWidth:480,textAlign:'center'}}>
        <div style={{fontSize:28,marginBottom:12}}>⚠️</div>
        <div style={{fontSize:15,fontWeight:800,color:'var(--red-soft)',marginBottom:8}}>Database Error</div>
        <div style={{fontSize:12,color:'var(--muted)',marginBottom:20,lineHeight:1.7,fontFamily:'monospace'}}>{dbError}</div>
        <button className="btn btn-red" onClick={loadAll}>Retry</button>
      </div>
    </div>
  );

return (
    <div className="app">
      <Sidebar page={page} setPage={navigate} onLogout={()=>{setAuthed(false);setAdminUser(null);setBikes([]);setBookings([]);setUsers([]);setContracts([]);setInvoices([]);setNonPayers([]);try{localStorage.removeItem('automoto_authed');localStorage.removeItem('automoto_user');}catch(e){};}} counts={counts} adminUser={adminUser}/>
      <div className="main-content">
        <MobileHeader page={page} onMenuOpen={()=>setDrawer(true)} counts={counts} bookings={bookings} notifications={notifications}/>
        {page==='dashboard' && <PageDashboard bookings={bookings} bikes={bikes} users={users} nonPayers={nonPayers} setPage={navigate}/>}
        {page==='bookings'  && <PageBookings  bookings={bookings} setBookings={setBookings} onSendContract={sendContract} onStatusChange={updateBookingStatus} invoices={invoices} onGenerateInvoice={async inv=>{setInvoices(prev=>[...prev,inv]);await persistInvoice(inv);}} onQuickBook={()=>setShowQB(true)}/>}
        {page==='contracts' && <PageContracts contracts={contracts} setContracts={setContracts} content={content} bikes={bikes} users={users} onSave={persistContract} onStatusChange={updateContractStatus}/>}
        {page==='users'     && <PageUsers     users={users} bookings={bookings} nonPayers={nonPayers}/>}
        {page==='bikes'     && <PageBikes     bikes={bikes} setBikes={setBikes} onSave={persistBike} bookings={bookings} onMarkReturned={openReturnChecklist} onQuickBook={()=>setShowQB(true)} maintLogs={maintLogs} onSaveMaintLog={async(row,nextSvc)=>{await sbInsert('maintenance_logs',row);if(nextSvc){await sbUpdate('bikes',row.bike_id,{last_service_date:row.date,next_service_date:nextSvc});}await loadAll();}}/>}
        {page==='nonpayers' && <PageNonPayers nonPayers={nonPayers} setNonPayers={setNonPayers} onSave={persistNonPayer} onStatusChange={updateNonPayerStatus}/>}
        {page==='content'   && <PageContent   content={content} setContent={setContent} onSave={persistContent}/>}
        {page==='invoices'  && <PageInvoices  invoices={invoices} setInvoices={setInvoices} bikes={bikes} users={users} onSave={persistInvoice} onMarkPaid={updateInvoiceStatus}/>}
        {page==='analytics' && <PageAnalytics bookings={bookings} bikes={bikes} invoices={invoices} contracts={contracts}/>}
        {page==='adminusers' && <PageAdminUsers currentUser={adminUser}/>}
        {page==='damage'      && <PageDamage damageReports={damageReports}/>}
      </div>
      {drawerOpen && <MobileDrawer page={page} setPage={navigate} onClose={()=>setDrawer(false)} onLogout={()=>setAuthed(false)} counts={counts} adminUser={adminUser}/>}
      <MobileBottomNav page={page} setPage={navigate} onMenuOpen={()=>setDrawer(true)} counts={counts} adminUser={adminUser}/>
      {showQuickBook && <QuickBookModal bikes={bikes} users={users} bookings={bookings} onClose={()=>setShowQB(false)} onComplete={loadAll}/>}
      {returnModal && <ReturnChecklistModal booking={returnModal.booking} bike={returnModal.bike} onClose={()=>setReturnModal(null)} onConfirm={async(dmgData)=>{ await markBikeReturned(returnModal.bookingId,returnModal.bikeId,dmgData); }}/>}
      {page==='adminusers' && (
        <div style={{position:'fixed',bottom:'calc(80px + env(safe-area-inset-bottom))',left:0,right:0,display:'flex',justifyContent:'center',zIndex:80,pointerEvents:'none'}}>
          <button onClick={subscribePush} className="btn btn-ghost" style={{pointerEvents:'auto',fontSize:12,boxShadow:'0 2px 12px rgba(0,0,0,.12)',background:'var(--card)',border:'1px solid var(--border)'}}>
            🔔 Enable Push Notifications
          </button>
        </div>
      )}
      {['bookings','bikes'].includes(page) && (
        <button onClick={()=>setShowQB(true)} className="mobile-only-fab" style={{position:'fixed',right:18,bottom:'calc(74px + env(safe-area-inset-bottom))',zIndex:90,background:'var(--red)',color:'#fff',border:'none',borderRadius:'50%',width:52,height:52,fontSize:26,cursor:'pointer',boxShadow:'0 4px 18px rgba(204,0,0,.45)',display:'flex',alignItems:'center',justifyContent:'center'}}>+</button>
      )}
    </div>
  );
}