@extends('layouts.app')
@section('title','Transactions')
@section('content')
<div class="mx-auto min-h-screen max-w-md bg-white"><header class="border-b px-5 py-4"><a href="/app/dashboard" class="text-sm font-semibold text-slate-500">← Back</a><h1 class="mt-2 text-2xl font-black">Transactions</h1></header><main class="px-5 py-5 pb-24"><div id="transactions" class="space-y-3"><p class="text-sm text-slate-500">Loading...</p></div></main>@include('mobile.partials.bottom-nav')</div>
<script>

axios.get('/api/transactions').then(r=>{const rows=r.data.data||[];document.getElementById('transactions').innerHTML=rows.map(x=>`<a href="/app/transactions/${x.reference}" class="block rounded-2xl border p-4"><div class="flex justify-between"><div><div class="font-bold">${x.service_type}</div><div class="text-xs text-slate-500">${x.reference}</div></div><div class="text-right"><div class="font-black">₦${(x.amount_minor/100).toLocaleString('en-NG',{minimumFractionDigits:2})}</div><div class="text-xs text-slate-500">${x.status}</div></div></div></a>`).join('')||'<p class="text-sm text-slate-500">No transactions yet.</p>';});
</script>
@endsection