ladill-transfer/resources/views/qr/account/billing.blade.php

<x-user-layout>
    <x-slot name="title">Billing</x-slot>
    @php
        $fmt = fn ($m) => 'GHS '.number_format($m / 100, 2);
        $fmtBytes = function (int $bytes) {
            if ($bytes >= 1073741824) {
                return number_format($bytes / 1073741824, 2).' GB';
            }
            if ($bytes >= 1048576) {
                return number_format($bytes / 1048576, 1).' MB';
            }

            return number_format($bytes / 1024, 0).' KB';
        };
    @endphp
    <div class="mx-auto max-w-3xl">
        <h1 class="text-xl font-semibold tracking-tight text-slate-900">Billing</h1>
        <p class="mt-0.5 text-sm text-slate-500">Storage is billed monthly at GHS {{ number_format($pricePerGb, 2) }} per GB while your wallet can pay. Renewals debit your <a href="{{ $walletUrl }}" class="font-medium text-indigo-600 hover:text-indigo-800">Ladill wallet</a>; unpaid renewals keep files for {{ (int) config('transfer.grace_period_days', 15) }} days before deletion.</p>

        <div class="mt-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
            <div class="rounded-2xl border border-slate-200 bg-white p-5">
                <p class="text-xs font-medium uppercase tracking-wide text-slate-400">Storage used</p>
                <p class="mt-1.5 text-2xl font-semibold text-slate-900">{{ $fmtBytes($storageBytes) }}</p>
            </div>
            <div class="rounded-2xl border border-slate-200 bg-white p-5">
                <p class="text-xs font-medium uppercase tracking-wide text-slate-400">Monthly estimate</p>
                <p class="mt-1.5 text-2xl font-semibold text-slate-900">GHS {{ number_format($monthlyTotalGhs, 2) }}</p>
            </div>
            <div class="rounded-2xl border border-slate-200 bg-white p-5">
                <p class="text-xs font-medium uppercase tracking-wide text-slate-400">Spent on Transfer</p>
                <p class="mt-1.5 text-2xl font-semibold text-slate-900">{{ $fmt($spentMinor) }}</p>
            </div>
            <div class="rounded-2xl border border-slate-200 bg-white p-5">
                <p class="text-xs font-medium uppercase tracking-wide text-slate-400">Refunded / credited</p>
                <p class="mt-1.5 text-2xl font-semibold text-slate-900">{{ $fmt($creditedMinor) }}</p>
            </div>
        </div>

        <div class="mt-6 rounded-2xl border border-slate-200 bg-white">
            <div class="flex items-center justify-between border-b border-slate-100 px-5 py-3.5">
                <h2 class="text-sm font-semibold text-slate-900">Active transfer storage</h2>
                <span class="text-xs text-slate-400">GHS {{ number_format($pricePerGb, 2) }}/GB/mo</span>
            </div>
            @if($activeTransfers->isEmpty())
                <p class="px-5 py-8 text-center text-sm text-slate-400">No active transfers with stored files yet.</p>
            @else
                <ul class="divide-y divide-slate-50">
                    @foreach($activeTransfers as $transfer)
                        <li class="flex items-center justify-between gap-4 px-5 py-3.5">
                            <div class="min-w-0">
                                <a href="{{ route('transfer.transfers.show', $transfer) }}" class="truncate text-sm font-medium text-slate-900 hover:text-indigo-700">{{ $transfer->title }}</a>
                                <p class="text-xs text-slate-400">
                                    {{ $fmtBytes($transfer->storage_bytes) }}
                                    @if($transfer->isInGracePeriod())
                                        · payment due · kept until {{ $transfer->grace_ends_at?->format('M j, Y') }}
                                    @elseif($transfer->paid_until)
                                        · paid through {{ $transfer->paid_until->format('M j, Y') }}
                                    @endif
                                </p>
                            </div>
                            <span class="shrink-0 text-sm font-medium text-slate-700">GHS {{ number_format($transfer->monthlyCostGhs(), 2) }}<span class="text-xs text-slate-400">/mo</span></span>
                        </li>
                    @endforeach
                </ul>
                <div class="flex items-center justify-between border-t border-slate-100 px-5 py-3">
                    <span class="text-xs font-medium uppercase tracking-wide text-slate-400">Monthly total</span>
                    <span class="text-sm font-semibold text-slate-900">GHS {{ number_format($monthlyTotalGhs, 2) }}</span>
                </div>
            @endif
        </div>

        <div class="mt-4 flex flex-wrap items-center justify-between gap-3 rounded-2xl border border-indigo-100 bg-indigo-50/60 px-5 py-4">
            <div>
                <p class="text-xs font-medium uppercase tracking-wide text-indigo-600">Wallet balance</p>
                <p class="mt-0.5 text-lg font-semibold text-slate-900">{{ $fmt($balanceMinor) }}</p>
            </div>
            <div class="flex flex-wrap gap-2">
                <a href="{{ $walletUrl }}" class="inline-flex rounded-lg border border-indigo-200 bg-white px-4 py-2 text-sm font-semibold text-indigo-700 hover:bg-indigo-50">View wallet</a>
                <a href="{{ $topupUrl }}" class="inline-flex rounded-lg bg-indigo-600 px-4 py-2 text-sm font-semibold text-white hover:bg-indigo-700">Top up</a>
            </div>
        </div>

        <p class="mt-4 text-xs text-slate-400">Keep your wallet funded so monthly renewals succeed. If a renewal fails, you have {{ (int) config('transfer.grace_period_days', 15) }} days to top up before files are deleted.</p>
    </div>
</x-user-layout>