Differentiate Billing from Wallet with storage usage breakdown.
Deploy Ladill Transfer / deploy (push) Successful in 27s
Deploy Ladill Transfer / deploy (push) Successful in 27s
Billing lists per-transfer storage costs and monthly estimates; Wallet stays focused on balance and top-up. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
isaacclad
@@ -1,13 +1,83 @@
|
||||
<x-user-layout>
|
||||
<x-slot name="title">Billing</x-slot>
|
||||
@php $fmt = fn ($m) => 'GHS '.number_format($m / 100, 2); @endphp
|
||||
@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">File storage is billed from your Ladill wallet (GHS {{ number_format(config('transfer.price_per_gb_month', 1), 2) }} per GB per month of retention).</p>
|
||||
<div class="mt-6 rounded-2xl border border-slate-200 bg-white p-6">
|
||||
<p class="text-xs font-medium uppercase tracking-wide text-slate-400">Current balance</p>
|
||||
<p class="mt-1 text-3xl font-semibold text-slate-900">{{ $fmt($balanceMinor) }}</p>
|
||||
<a href="{{ $topupUrl }}" class="mt-4 inline-flex rounded-lg bg-indigo-600 px-4 py-2 text-sm font-semibold text-white hover:bg-indigo-700">Top up wallet</a>
|
||||
<p class="mt-0.5 text-sm text-slate-500">Storage is metered at GHS {{ number_format($pricePerGb, 2) }} per GB per month of retention and debited from your <a href="{{ $walletUrl }}" class="font-medium text-indigo-600 hover:text-indigo-800">Ladill wallet</a>.</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->expires_at)
|
||||
· expires {{ $transfer->expires_at->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">Retention is prepaid from your wallet. Keep it funded so transfers stay available through their expiry date.</p>
|
||||
</div>
|
||||
</x-user-layout>
|
||||
|
||||
@@ -19,5 +19,9 @@
|
||||
<p class="mt-1.5 text-2xl font-semibold text-slate-900">{{ $fmt($creditedMinor) }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="mt-4 text-xs text-slate-400">
|
||||
For storage usage and monthly estimates, see
|
||||
<a href="{{ route('account.billing') }}" class="font-medium text-indigo-600 hover:text-indigo-800">Billing</a>.
|
||||
</p>
|
||||
</div>
|
||||
</x-user-layout>
|
||||
|
||||
Reference in New Issue
Block a user