isaaccladandCursor
f458dccd49
Deploy Ladill Transfer / deploy (push) Successful in 41s
Remove desktop header search, wire mobile search to the transfers and files page, refine file icons and Shared badge, and align Transfers toolbar with Files. Co-authored-by: Cursor <cursoragent@cursor.com>
105 lines
7.2 KiB
PHP
105 lines
7.2 KiB
PHP
<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>
|
||
<a href="{{ route('transfer.transfers.create') }}" class="inline-flex rounded-xl bg-indigo-600 px-4 py-2 text-sm font-semibold text-white hover:bg-indigo-700">New transfer</a>
|
||
</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">
|
||
<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>
|
||
<input type="search" name="q" value="{{ $search }}" placeholder="Search transfers…"
|
||
class="w-full rounded-lg border border-slate-200 py-1.5 pl-8 pr-2.5 text-xs text-slate-700 placeholder-slate-400 focus:border-indigo-300 focus:outline-none focus:ring-2 focus:ring-indigo-100 sm:w-52">
|
||
</div>
|
||
<select name="status" onchange="this.form.submit()" class="rounded-lg border border-slate-200 px-2 py-1.5 text-xs text-slate-700">
|
||
<option value="all" @selected($status === 'all')>All statuses</option>
|
||
<option value="active" @selected($status === 'active')>Active</option>
|
||
<option value="grace" @selected($status === 'grace')>Payment due</option>
|
||
<option value="expired" @selected($status === 'expired')>Expired</option>
|
||
</select>
|
||
<select name="sort" onchange="this.form.submit()" class="rounded-lg border border-slate-200 px-2 py-1.5 text-xs text-slate-700">
|
||
<option value="newest" @selected($sort === 'newest')>Newest</option>
|
||
<option value="oldest" @selected($sort === 'oldest')>Oldest</option>
|
||
<option value="title" @selected($sort === 'title')>Title</option>
|
||
<option value="downloads" @selected($sort === 'downloads')>Downloads</option>
|
||
</select>
|
||
@if($search !== '' || $status !== 'all' || $sort !== 'newest')
|
||
<a href="{{ route('transfer.transfers.index') }}" class="text-xs font-medium text-slate-500 hover:text-slate-700">Clear</a>
|
||
@endif
|
||
</form>
|
||
</div>
|
||
|
||
@if($transfers->isEmpty())
|
||
<div class="px-6 py-12 text-center">
|
||
<p class="text-sm text-slate-500">
|
||
@if($search !== '' || $status !== 'all')
|
||
No transfers match your filters.
|
||
@else
|
||
No transfers yet.
|
||
@endif
|
||
</p>
|
||
<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">
|
||
<span>{{ $transfers->total() }} transfer{{ $transfers->total() === 1 ? '' : 's' }}</span>
|
||
<span>Showing {{ $transfers->firstItem() }}–{{ $transfers->lastItem() }}</span>
|
||
</div>
|
||
<table class="min-w-full divide-y divide-slate-100">
|
||
<thead class="bg-slate-50 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">
|
||
<tr>
|
||
<th class="px-4 py-3 sm:px-6">Title</th>
|
||
<th class="px-4 py-3 sm:px-6">Status</th>
|
||
<th class="hidden px-4 py-3 sm:table-cell sm:px-6">Files</th>
|
||
<th class="hidden px-4 py-3 md:table-cell sm:px-6">Downloads</th>
|
||
<th class="hidden px-4 py-3 lg:table-cell sm:px-6">Expires</th>
|
||
<th class="px-4 py-3 sm:px-6"></th>
|
||
</tr>
|
||
</thead>
|
||
<tbody class="divide-y divide-slate-100 text-sm">
|
||
@foreach($transfers as $transfer)
|
||
@php
|
||
$statusClass = match (true) {
|
||
$transfer->isPaid() => 'bg-emerald-50 text-emerald-700',
|
||
$transfer->isInGracePeriod() => 'bg-amber-50 text-amber-700',
|
||
default => 'bg-slate-100 text-slate-600',
|
||
};
|
||
@endphp
|
||
<tr class="hover:bg-slate-50/80">
|
||
<td class="px-4 py-4 sm:px-6">
|
||
<p class="font-medium text-slate-900">{{ $transfer->title }}</p>
|
||
<p class="text-xs text-slate-500">{{ $transfer->created_at->format('M j, Y') }}</p>
|
||
@if($transfer->recipient_email)
|
||
<p class="mt-0.5 text-xs text-slate-400">To {{ $transfer->recipient_email }}</p>
|
||
@endif
|
||
</td>
|
||
<td class="px-4 py-4 sm:px-6">
|
||
<span class="inline-flex rounded-full px-2.5 py-0.5 text-xs font-medium {{ $statusClass }}">
|
||
{{ $transfer->billingStatusLabel() }}
|
||
</span>
|
||
</td>
|
||
<td class="hidden px-4 py-4 text-slate-600 sm:table-cell sm:px-6">{{ $transfer->files->count() }}</td>
|
||
<td class="hidden px-4 py-4 text-slate-600 md:table-cell sm:px-6">{{ number_format($transfer->downloads_total) }}</td>
|
||
<td class="hidden px-4 py-4 text-slate-600 lg:table-cell sm:px-6">{{ $transfer->expires_at?->format('M j, Y') ?? '—' }}</td>
|
||
<td class="px-4 py-4 text-right sm:px-6">
|
||
<a href="{{ route('transfer.transfers.show', $transfer) }}" class="font-medium text-indigo-600 hover:text-indigo-800">Open</a>
|
||
</td>
|
||
</tr>
|
||
@endforeach
|
||
</tbody>
|
||
</table>
|
||
@endif
|
||
</div>
|
||
|
||
@if($transfers->hasPages())
|
||
<div>{{ $transfers->links() }}</div>
|
||
@endif
|
||
</div>
|
||
</x-user-layout>
|