Add hero sections to Transfers and Files index pages.

Surface wallet balance and key stats at a glance, matching the layout used across other Ladill apps.

Co-authored-by: Cursor <cursoragent@cursor.com>

app/Http/Controllers/Transfer/FilesController.php

@@ -6,6 +6,7 @@ use App\Http\Controllers\Controller;
 use App\Models\Transfer;
 use App\Models\TransferFile;
 use App\Models\User;
+use App\Services\Billing\BillingClient;
 use App\Services\Transfer\FileStorageService;
 use App\Services\Transfer\TransferRecipientMailService;
 use App\Services\Transfer\TransferService;
@@ -24,6 +25,7 @@ class FilesController extends Controller
     public function __construct(
         private TransferService $transfers,
         private FileStorageService $storage,
+        private BillingClient $billing,
     ) {}
 
     public function index(Request $request): View
@@ -88,6 +90,19 @@ class FilesController extends Controller
             ->where('status', '!=', Transfer::STATUS_DELETED)
             ->sum('storage_bytes');
 
+        $fileCount = TransferFile::query()
+            ->whereHas('transfer', fn ($q) => $q
+                ->where('user_id', $account->id)
+                ->where('status', '!=', Transfer::STATUS_DELETED))
+            ->count();
+
+        $balanceMinor = 0;
+        try {
+            $balanceMinor = $this->billing->balanceMinor($account->public_id);
+        } catch (\Throwable) {
+            // Balance is informational on this page.
+        }
+
         return view('transfer.files.index', [
             'files' => $files,
             'folders' => $folders,
@@ -99,6 +114,8 @@ class FilesController extends Controller
             'storageBytes' => (int) $storageBytes,
             'storageGb' => round($storageBytes / (1024 * 1024 * 1024), 2),
             'pricePerGb' => (float) config('transfer.price_per_gb_month', 0.30),
+            'fileCount' => $fileCount,
+            'balanceMinor' => $balanceMinor,
         ]);
     }
 

app/Http/Controllers/Transfer/TransferController.php

@@ -25,6 +25,7 @@ class TransferController extends Controller
         private ChunkedUploadService $chunkedUploads,
         private QrImageGeneratorService $imageGenerator,
         private QrPdfExporter $pdfExporter,
+        private BillingClient $billing,
     ) {}
 
     public function index(Request $request): View
@@ -58,7 +59,34 @@ class TransferController extends Controller
             ->paginate(20)
             ->withQueryString();
 
-        return view('transfer.transfers.index', compact('transfers', 'search', 'status', 'sort'));
+        $transferCount = Transfer::query()
+            ->where('user_id', $account->id)
+            ->shareTransfers()
+            ->where('status', '!=', Transfer::STATUS_DELETED)
+            ->count();
+
+        $activeCount = Transfer::query()
+            ->where('user_id', $account->id)
+            ->shareTransfers()
+            ->accessible()
+            ->count();
+
+        $balanceMinor = 0;
+        try {
+            $balanceMinor = $this->billing->balanceMinor($account->public_id);
+        } catch (\Throwable) {
+            // Balance is informational on this page.
+        }
+
+        return view('transfer.transfers.index', compact(
+            'transfers',
+            'search',
+            'status',
+            'sort',
+            'transferCount',
+            'activeCount',
+            'balanceMinor',
+        ));
     }
 
     public function create(BillingClient $billing): View

resources/views/transfer/files/index.blade.php

@@ -29,7 +29,7 @@
         ])->values();
     @endphp
 
-    <div class="space-y-4"
+    <div class="space-y-6"
          x-data="filesManager(@js([
              'fileIds' => $fileRows->pluck('id')->all(),
              'files' => $fileRows->all(),
@@ -54,15 +54,20 @@
              ])->values()->all(),
          ]))">
 
-        {{-- Header --}}
-        <div class="flex flex-wrap items-start justify-between gap-4">
-            <div>
-                <h1 class="text-xl font-semibold text-slate-900">Files</h1>
-                <p class="mt-1 text-sm text-slate-500">{{ $fmtBytes($storageBytes) }} stored (~GHS {{ number_format($storageGb * $pricePerGb, 2) }}/month)</p>
+        <div class="relative overflow-hidden rounded-2xl border border-slate-200 bg-white">
+            <div class="absolute inset-0 bg-gradient-to-br from-sky-50/80 via-white to-indigo-50/60"></div>
+            <div class="relative px-6 py-8 sm:px-10">
+                <div class="flex flex-col gap-6 lg:flex-row lg:items-center lg:justify-between">
+                    <div class="max-w-xl">
+                        <div class="inline-flex items-center gap-1.5 rounded-full bg-sky-100 px-3 py-1 text-xs font-semibold text-sky-700">
+                            Cloud storage · QR sharing
                         </div>
-
-            {{-- Create or upload --}}
-            <div class="relative" @click.outside="createMenuOpen = false">
+                        <h1 class="mt-3 text-2xl font-bold tracking-tight text-slate-900 sm:text-3xl">Your files</h1>
+                        <p class="mt-2 text-sm leading-6 text-slate-600">
+                            Upload, organise, and share files from your Ladill Transfer storage. Billed at GHS {{ number_format($pricePerGb, 2) }}/GB per month.
+                        </p>
+                        <div class="mt-6">
+                            <div class="relative inline-block" @click.outside="createMenuOpen = false">
                                 <button type="button"
                                         @click="createMenuOpen = !createMenuOpen"
                                         class="btn-primary">
@@ -73,7 +78,7 @@
                                 <div x-show="createMenuOpen"
                                      x-cloak
                                      x-transition
-                     class="absolute right-0 z-30 mt-2 w-56 overflow-hidden rounded-xl border border-slate-200 bg-white py-1 shadow-lg">
+                                     class="absolute left-0 z-30 mt-2 w-56 overflow-hidden rounded-xl border border-slate-200 bg-white py-1 shadow-lg sm:left-auto sm:right-0">
                                     <button type="button" @click="openFolderModal()" class="flex w-full items-center gap-3 px-4 py-2.5 text-left text-sm text-slate-700 hover:bg-slate-50">
                                         <img src="{{ $iconBase }}/folder.svg" alt="" class="h-5 w-5">
                                         <span>Folder</span>
@@ -94,6 +99,25 @@
                                 <input type="file" x-ref="folderUploadInput" multiple webkitdirectory class="hidden" @change="handleUploadPick($event)">
                             </div>
                         </div>
+                    </div>
+
+                    <div class="scrollbar-hide flex snap-x snap-mandatory gap-3 overflow-x-auto pb-2 sm:grid sm:grid-cols-3 sm:overflow-visible sm:pb-0 lg:gap-4" style="-ms-overflow-style:none;scrollbar-width:none;">
+                        <div class="mobile-stats-card shrink-0 snap-start rounded-xl border border-slate-200 bg-white/90 px-4 py-3 text-center backdrop-blur-sm">
+                            <p class="whitespace-nowrap text-xl font-bold text-slate-900 sm:text-2xl">GHS {{ number_format($balanceMinor / 100, 2) }}</p>
+                            <p class="mt-0.5 whitespace-nowrap text-[11px] font-medium text-slate-500">Account balance</p>
+                        </div>
+                        <div class="mobile-stats-card shrink-0 snap-start rounded-xl border border-slate-200 bg-white/90 px-4 py-3 text-center backdrop-blur-sm">
+                            <p class="whitespace-nowrap text-xl font-bold text-slate-900 sm:text-2xl">{{ $fmtBytes($storageBytes) }}</p>
+                            <p class="mt-0.5 whitespace-nowrap text-[11px] font-medium text-slate-500">Storage used</p>
+                        </div>
+                        <div class="mobile-stats-card shrink-0 snap-start rounded-xl border border-slate-200 bg-white/90 px-4 py-3 text-center backdrop-blur-sm">
+                            <p class="whitespace-nowrap text-xl font-bold text-slate-900 sm:text-2xl">{{ number_format($fileCount) }}</p>
+                            <p class="mt-0.5 whitespace-nowrap text-[11px] font-medium text-slate-500">Files</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
 
         {{-- Breadcrumbs --}}
         <nav class="flex flex-wrap items-center gap-1 text-sm text-slate-500">

resources/views/transfer/transfers/index.blade.php

@@ -1,16 +1,45 @@
 <x-user-layout>
     <x-slot name="title">Transfers</x-slot>
-    <div class="space-y-4">
-        <div class="flex flex-wrap items-center justify-between gap-4">
-            <div>
-                <h1 class="text-xl font-semibold text-slate-900">Transfers</h1>
-                <p class="mt-1 text-sm text-slate-500">All your file shares — active, grace, and expired.</p>
+
+    <div class="space-y-6">
+        <div class="relative overflow-hidden rounded-2xl border border-slate-200 bg-white">
+            <div class="absolute inset-0 bg-gradient-to-br from-sky-50/80 via-white to-indigo-50/60"></div>
+            <div class="relative px-6 py-8 sm:px-10">
+                <div class="flex flex-col gap-6 lg:flex-row lg:items-center lg:justify-between">
+                    <div class="max-w-xl">
+                        <div class="inline-flex items-center gap-1.5 rounded-full bg-sky-100 px-3 py-1 text-xs font-semibold text-sky-700">
+                            File shares · QR downloads
                         </div>
+                        <h1 class="mt-3 text-2xl font-bold tracking-tight text-slate-900 sm:text-3xl">Your transfers</h1>
+                        <p class="mt-2 text-sm leading-6 text-slate-600">
+                            All your file shares — active, grace, and expired. Each transfer gets a QR code and download link for recipients.
+                        </p>
+                        <div class="mt-6">
                             <x-btn.create :href="route('transfer.transfers.create')">New transfer</x-btn.create>
                         </div>
+                    </div>
+
+                    <div class="scrollbar-hide flex snap-x snap-mandatory gap-3 overflow-x-auto pb-2 sm:grid sm:grid-cols-3 sm:overflow-visible sm:pb-0 lg:gap-4" style="-ms-overflow-style:none;scrollbar-width:none;">
+                        <div class="mobile-stats-card shrink-0 snap-start rounded-xl border border-slate-200 bg-white/90 px-4 py-3 text-center backdrop-blur-sm">
+                            <p class="whitespace-nowrap text-xl font-bold text-slate-900 sm:text-2xl">GHS {{ number_format($balanceMinor / 100, 2) }}</p>
+                            <p class="mt-0.5 whitespace-nowrap text-[11px] font-medium text-slate-500">Account balance</p>
+                        </div>
+                        <div class="mobile-stats-card shrink-0 snap-start rounded-xl border border-slate-200 bg-white/90 px-4 py-3 text-center backdrop-blur-sm">
+                            <p class="whitespace-nowrap text-xl font-bold text-slate-900 sm:text-2xl">{{ number_format($transferCount) }}</p>
+                            <p class="mt-0.5 whitespace-nowrap text-[11px] font-medium text-slate-500">Transfers</p>
+                        </div>
+                        <div class="mobile-stats-card shrink-0 snap-start rounded-xl border border-slate-200 bg-white/90 px-4 py-3 text-center backdrop-blur-sm">
+                            <p class="whitespace-nowrap text-xl font-bold text-slate-900 sm:text-2xl">{{ number_format($activeCount) }}</p>
+                            <p class="mt-0.5 whitespace-nowrap text-[11px] font-medium text-slate-500">Active</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
 
         <div class="overflow-hidden rounded-2xl border border-slate-200 bg-white">
-            <div class="flex flex-wrap items-center gap-2 border-b border-slate-100 px-4 py-2.5">
+            <div class="flex flex-wrap items-center gap-2 border-b border-slate-100 px-4 py-3 sm:px-6">
+                <h2 class="text-sm font-semibold text-slate-900">All transfers</h2>
                 <form method="get" action="{{ route('transfer.transfers.index') }}" class="ml-auto flex w-full flex-wrap items-center gap-2 sm:w-auto">
                     <div class="relative min-w-0 flex-1 sm:min-w-[200px]">
                         <svg class="pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-slate-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"/></svg>
@@ -47,7 +76,7 @@
                     <a href="{{ route('transfer.transfers.create') }}" class="mt-3 inline-block text-sm font-semibold text-indigo-600 hover:text-indigo-800">Create your first transfer</a>
                 </div>
             @else
-                <div class="flex items-center justify-between border-b border-slate-100 px-4 py-3 text-xs text-slate-500">
+                <div class="flex items-center justify-between border-b border-slate-100 px-4 py-3 text-xs text-slate-500 sm:px-6">
                     <span>{{ $transfers->total() }} transfer{{ $transfers->total() === 1 ? '' : 's' }}</span>
                     <span>Showing {{ $transfers->firstItem() }}–{{ $transfers->lastItem() }}</span>
                 </div>