Add hero sections to Transfers and Files index pages.
Deploy Ladill Transfer / deploy (push) Successful in 31s
Deploy Ladill Transfer / deploy (push) Successful in 31s
Surface wallet balance and key stats at a glance, matching the layout used across other Ladill apps. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
isaacclad
@@ -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,44 +54,68 @@
|
||||
])->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>
|
||||
<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>
|
||||
<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">
|
||||
<svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/></svg>
|
||||
Create or upload
|
||||
<svg class="h-4 w-4 opacity-80" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/></svg>
|
||||
</button>
|
||||
<div x-show="createMenuOpen"
|
||||
x-cloak
|
||||
x-transition
|
||||
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>
|
||||
</button>
|
||||
<div class="my-1 border-t border-slate-100"></div>
|
||||
<button type="button" @click="triggerFileUpload()" 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 }}/file.svg" alt="" class="h-5 w-5">
|
||||
<span>Files upload</span>
|
||||
</button>
|
||||
<button type="button" @click="triggerFolderUpload()" class="flex w-full items-center gap-3 px-4 py-2.5 text-left text-sm text-slate-700 hover:bg-slate-50">
|
||||
<span class="relative h-5 w-5">
|
||||
<img src="{{ $iconBase }}/folder.svg" alt="" class="h-5 w-5">
|
||||
</span>
|
||||
<span>Folder upload</span>
|
||||
</button>
|
||||
</div>
|
||||
<input type="file" x-ref="fileUploadInput" multiple class="hidden" @change="handleUploadPick($event)">
|
||||
<input type="file" x-ref="folderUploadInput" multiple webkitdirectory class="hidden" @change="handleUploadPick($event)">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Create or upload --}}
|
||||
<div class="relative" @click.outside="createMenuOpen = false">
|
||||
<button type="button"
|
||||
@click="createMenuOpen = !createMenuOpen"
|
||||
class="btn-primary">
|
||||
<svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/></svg>
|
||||
Create or upload
|
||||
<svg class="h-4 w-4 opacity-80" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/></svg>
|
||||
</button>
|
||||
<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">
|
||||
<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>
|
||||
</button>
|
||||
<div class="my-1 border-t border-slate-100"></div>
|
||||
<button type="button" @click="triggerFileUpload()" 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 }}/file.svg" alt="" class="h-5 w-5">
|
||||
<span>Files upload</span>
|
||||
</button>
|
||||
<button type="button" @click="triggerFolderUpload()" class="flex w-full items-center gap-3 px-4 py-2.5 text-left text-sm text-slate-700 hover:bg-slate-50">
|
||||
<span class="relative h-5 w-5">
|
||||
<img src="{{ $iconBase }}/folder.svg" alt="" class="h-5 w-5">
|
||||
</span>
|
||||
<span>Folder upload</span>
|
||||
</button>
|
||||
<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>
|
||||
<input type="file" x-ref="fileUploadInput" multiple class="hidden" @change="handleUploadPick($event)">
|
||||
<input type="file" x-ref="folderUploadInput" multiple webkitdirectory class="hidden" @change="handleUploadPick($event)">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -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>
|
||||
<x-btn.create :href="route('transfer.transfers.create')">New transfer</x-btn.create>
|
||||
</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>
|
||||
|
||||
Reference in New Issue
Block a user