Add transfer search and OneDrive-style Files storage UI.

Transfers now lists all shares with filters and pagination; Files becomes a selectable cloud view with download, share, delete, move, and open-in-email actions. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-06-08 20:59:05 +00:00
parent b36148eeb6
commit 19170d6bc7
15 changed files with 1083 additions and 59 deletions
@@ -509,6 +509,135 @@ Alpine.data('transferCreateForm', (config = {}) => ({
    },
 }));

+Alpine.data('filesManager', (config = {}) => ({
+    selected: [],
+    fileIds: config.fileIds || [],
+    files: config.files || [],
+    routes: config.routes || {},
+    csrf: config.csrf || '',
+    moveModalOpen: false,
+    toast: '',
+    _toastTimer: null,
+
+    get allSelected() {
+        return this.fileIds.length > 0 && this.selected.length === this.fileIds.length;
+    },
+
+    toggleAll(event) {
+        this.selected = event.target.checked ? [...this.fileIds] : [];
+    },
+
+    clearSelection() {
+        this.selected = [];
+    },
+
+    selectedFiles() {
+        return this.files.filter((file) => this.selected.includes(file.id));
+    },
+
+    showToast(message) {
+        this.toast = message;
+        clearTimeout(this._toastTimer);
+        this._toastTimer = setTimeout(() => { this.toast = ''; }, 2800);
+    },
+
+    submitAction(url, extra = {}) {
+        const form = document.createElement('form');
+        form.method = 'POST';
+        form.action = url;
+        form.style.display = 'none';
+
+        const csrf = document.createElement('input');
+        csrf.type = 'hidden';
+        csrf.name = '_token';
+        csrf.value = this.csrf;
+        form.appendChild(csrf);
+
+        this.selected.forEach((id) => {
+            const input = document.createElement('input');
+            input.type = 'hidden';
+            input.name = 'files[]';
+            input.value = id;
+            form.appendChild(input);
+        });
+
+        Object.entries(extra).forEach(([key, value]) => {
+            const input = document.createElement('input');
+            input.type = 'hidden';
+            input.name = key;
+            input.value = value;
+            form.appendChild(input);
+        });
+
+        document.body.appendChild(form);
+        form.submit();
+    },
+
+    downloadSelected() {
+        if (this.selected.length === 0) return;
+        if (this.selected.length === 1) {
+            const file = this.selectedFiles()[0];
+            if (file?.downloadUrl) {
+                window.location.href = file.downloadUrl;
+            }
+            return;
+        }
+        this.submitAction(this.routes.bulkDownload);
+    },
+
+    async deleteSelected() {
+        if (this.selected.length === 0) return;
+        if (! confirm(`Delete ${this.selected.length} file${this.selected.length === 1 ? '' : 's'}? This cannot be undone.`)) {
+            return;
+        }
+        this.submitAction(this.routes.bulkDelete);
+    },
+
+    async shareSelected() {
+        if (this.selected.length === 0) return;
+        try {
+            const res = await fetch(this.routes.share, {
+                method: 'POST',
+                headers: {
+                    Accept: 'application/json',
+                    'Content-Type': 'application/json',
+                    'X-CSRF-TOKEN': this.csrf,
+                    'X-Requested-With': 'XMLHttpRequest',
+                },
+                body: JSON.stringify({ files: this.selected }),
+            });
+            const data = await res.json();
+            if (data.links?.length) {
+                await navigator.clipboard.writeText(data.links.join('\n'));
+                this.showToast(data.message || 'Share links copied.');
+            }
+        } catch (e) {
+            this.showToast('Could not copy share links.');
+        }
+    },
+
+    async copyLinks() {
+        const links = [...new Set(this.selectedFiles().map((f) => f.shareUrl).filter(Boolean))];
+        if (links.length === 0) {
+            this.showToast('No share links available.');
+            return;
+        }
+        try {
+            await navigator.clipboard.writeText(links.join('\n'));
+            this.showToast(links.length === 1 ? 'Link copied.' : `${links.length} links copied.`);
+        } catch (e) {
+            this.showToast('Could not copy links.');
+        }
+    },
+
+    openInEmail() {
+        if (this.selected.length === 0) return;
+        const params = new URLSearchParams();
+        this.selected.forEach((id) => params.append('files[]', id));
+        window.location.href = `${this.routes.openInEmail}?${params.toString()}`;
+    },
+}));
+
 window.Alpine = Alpine;
 registerLadillConfirmStore(Alpine);

@@ -65,8 +65,8 @@
            @include('partials.mobile-bottom-nav', [
                'homeUrl' => route('transfer.dashboard'),
                'homeActive' => request()->routeIs('transfer.dashboard'),
-                'searchUrl' => route('transfer.transfers.index'),
-                'searchActive' => request()->routeIs('transfer.transfers.*'),
+                'searchUrl' => route('transfer.search'),
+                'searchActive' => request()->routeIs('transfer.search'),
                'notificationsUrl' => route('notifications.index'),
                'notificationsActive' => request()->routeIs('notifications.*'),
                'unreadUrl' => route('notifications.unread'),
@@ -13,6 +13,58 @@
            <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg>
        </button>
        @include('partials.mobile-topbar-title')
+        {{-- Search --}}
+        <div class="relative hidden w-full max-w-md lg:block" x-data="topbarSearch({ searchUrl: @js(route('transfer.search')) })" @click.outside="open = false" @keydown.escape.window="open = false">
+            <div class="relative">
+                <svg class="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -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="text"
+                       x-model="query"
+                       @focus="onFocus()"
+                       @input.debounce.200ms="search()"
+                       @keydown.arrow-down.prevent="moveDown()"
+                       @keydown.arrow-up.prevent="moveUp()"
+                       @keydown.enter.prevent="go()"
+                       placeholder="Search transfers and files…"
+                       class="w-full rounded-xl border border-slate-200 bg-slate-50 py-2 pl-9 pr-10 text-sm text-slate-700 placeholder-slate-400 transition focus:border-indigo-300 focus:bg-white focus:ring-2 focus:ring-indigo-100 focus:outline-none">
+                <kbd class="pointer-events-none absolute right-3 top-1/2 hidden -translate-y-1/2 rounded-md border border-slate-200 bg-white px-1.5 py-0.5 text-[10px] font-medium text-slate-400 sm:inline-block">/</kbd>
+            </div>
+            <div x-show="open && (results.length > 0 || (query.length >= 2 && !loading))"
+                 x-cloak
+                 x-transition.opacity.duration.150ms
+                 class="absolute left-0 top-full z-30 mt-1.5 w-full overflow-hidden rounded-xl border border-slate-200 bg-white shadow-lg">
+                <template x-if="loading">
+                    <div class="px-4 py-3 text-center text-xs text-slate-400">Searching…</div>
+                </template>
+                <template x-if="!loading && results.length === 0 && query.length >= 2">
+                    <div class="px-4 py-3 text-center text-xs text-slate-500">No results for "<span x-text="query" class="font-medium"></span>"</div>
+                </template>
+                <template x-if="!loading && results.length > 0">
+                    <ul class="max-h-72 overflow-y-auto py-1">
+                        <template x-for="(item, idx) in results" :key="item.url">
+                            <li>
+                                <a :href="item.url"
+                                   @mouseenter="active = idx"
+                                   :class="idx === active ? 'bg-indigo-50 text-indigo-700' : 'text-slate-700 hover:bg-slate-50'"
+                                   class="flex items-start gap-3 px-4 py-2.5 text-sm transition">
+                                    <span class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg"
+                                          :class="item.type === 'transfer' ? 'bg-indigo-100 text-indigo-600' : 'bg-violet-100 text-violet-600'">
+                                        <svg x-show="item.type === 'transfer'" class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 7.5 12 3m0 0L7.5 7.5M12 3v13.5"/></svg>
+                                        <svg x-show="item.type !== 'transfer'" class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"/></svg>
+                                    </span>
+                                    <span class="min-w-0 flex-1">
+                                        <span class="block truncate font-medium" x-text="item.title"></span>
+                                        <span class="block truncate text-xs text-slate-500" x-text="item.subtitle"></span>
+                                    </span>
+                                </a>
+                            </li>
+                        </template>
+                    </ul>
+                </template>
+                <div class="border-t border-slate-100 px-4 py-2">
+                    <a :href="`{{ route('transfer.search') }}?q=${encodeURIComponent(query)}`" class="text-xs font-medium text-indigo-600 hover:text-indigo-700">View all results</a>
+                </div>
+            </div>
+        </div>
    </div>

    <div class="flex items-center gap-3">
@@ -4,10 +4,10 @@
    @include('partials.search-screen', [
        'query' => $query,
        'results' => $results,
-        'backUrl' => route('events.dashboard'),
-        'searchUrl' => route('events.search'),
-        'heading' => 'Find events and programmes',
-        'placeholder' => 'Search events, programmes, short codes…',
-        'emptyHint' => 'Use at least 2 characters to search event names, programme titles, or short codes.',
+        'backUrl' => route('transfer.dashboard'),
+        'searchUrl' => route('transfer.search'),
+        'heading' => 'Find transfers and files',
+        'placeholder' => 'Search transfers, file names, recipients…',
+        'emptyHint' => 'Use at least 2 characters to search transfer titles, file names, or recipient emails.',
    ])
 </x-user-layout>
@@ -6,43 +6,243 @@
            if ($bytes >= 1048576) return number_format($bytes / 1048576, 1).' MB';
            return number_format($bytes / 1024, 0).' KB';
        };
+        $fileIcon = function (\App\Models\TransferFile $file): string {
+            $mime = (string) $file->mime_type;
+            $ext = strtolower(pathinfo($file->original_name, PATHINFO_EXTENSION));
+            if (str_starts_with($mime, 'image/') || in_array($ext, ['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg'], true)) {
+                return 'image';
+            }
+            if (str_starts_with($mime, 'video/') || in_array($ext, ['mp4', 'mov', 'avi', 'mkv'], true)) {
+                return 'video';
+            }
+            if (str_starts_with($mime, 'audio/') || in_array($ext, ['mp3', 'wav', 'aac'], true)) {
+                return 'audio';
+            }
+            if (in_array($ext, ['zip', 'rar', '7z', 'tar', 'gz'], true)) {
+                return 'archive';
+            }
+            if (in_array($ext, ['pdf', 'doc', 'docx', 'txt', 'rtf'], true)) {
+                return 'document';
+            }
+
+            return 'file';
+        };
+        $fileRows = $files->map(fn ($file) => [
+            'id' => $file->id,
+            'name' => $file->original_name,
+            'size' => $file->humanSize(),
+            'downloads' => $file->downloads_total,
+            'modified' => $file->updated_at?->format('M j, Y') ?? '—',
+            'transferId' => $file->transfer_id,
+            'transferTitle' => $file->transfer->title,
+            'shareUrl' => $file->transfer->qrCode?->publicUrl() ?? '',
+            'downloadUrl' => route('transfer.files.download', $file),
+            'icon' => $fileIcon($file),
+            'shared' => $file->transfer->recipient_email !== null || $file->downloads_total > 0,
+        ])->values();
    @endphp
-    <div class="space-y-6">
-        <div>
-            <h1 class="text-xl font-semibold text-slate-900">Files</h1>
-            <p class="mt-1 text-sm text-slate-500">{{ $fmtBytes($storageBytes) }} stored across active transfers (~GHS {{ number_format($storageGb * $pricePerGb, 2) }}/month).</p>
+
+    <div class="space-y-4"
+         x-data="filesManager(@js([
+             'fileIds' => $fileRows->pluck('id')->all(),
+             'files' => $fileRows->all(),
+             'csrf' => csrf_token(),
+             'routes' => [
+                 'bulkDownload' => route('transfer.files.bulk-download'),
+                 'bulkDelete' => route('transfer.files.bulk-delete'),
+                 'move' => route('transfer.files.move'),
+                 'share' => route('transfer.files.share'),
+                 'openInEmail' => route('transfer.files.open-in-email'),
+                 'reshareEmail' => route('transfer.files.reshare-email'),
+             ],
+             'moveTargets' => $moveTargets->map(fn ($t) => ['id' => $t->id, 'title' => $t->title])->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>

-        @if($files->isEmpty())
-            <div class="rounded-2xl border border-dashed border-slate-200 bg-white px-6 py-12 text-center text-sm text-slate-500">
-                No stored files yet.
+        {{-- Breadcrumbs --}}
+        <nav class="flex flex-wrap items-center gap-1 text-sm text-slate-500">
+            <a href="{{ route('transfer.files.index', request()->except('folder')) }}" class="font-medium text-indigo-600 hover:text-indigo-800">My files</a>
+            @if($folderTransfer)
+                <span>/</span>
+                <span class="font-medium text-slate-900">{{ $folderTransfer->title }}</span>
+            @endif
+        </nav>
+
+        {{-- Action toolbar --}}
+        <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">
+                <template x-if="selected.length === 0">
+                    <div class="flex flex-wrap items-center gap-2 text-sm">
+                        <button type="button" disabled class="rounded-lg px-3 py-1.5 text-slate-400">Download</button>
+                        <button type="button" disabled class="rounded-lg px-3 py-1.5 text-slate-400">Share</button>
+                        <button type="button" disabled class="rounded-lg px-3 py-1.5 text-slate-400">Copy link</button>
+                        <button type="button" disabled class="rounded-lg px-3 py-1.5 text-slate-400">Delete</button>
+                        <button type="button" disabled class="rounded-lg px-3 py-1.5 text-slate-400">Move to</button>
+                        <button type="button" disabled class="rounded-lg px-3 py-1.5 text-slate-400">Open in email</button>
+                    </div>
+                </template>
+                <template x-if="selected.length > 0">
+                    <div class="flex flex-wrap items-center gap-2 text-sm">
+                        <button type="button" @click="downloadSelected()" class="rounded-lg px-3 py-1.5 font-medium text-slate-700 hover:bg-slate-100">Download</button>
+                        <button type="button" @click="shareSelected()" class="rounded-lg px-3 py-1.5 font-medium text-slate-700 hover:bg-slate-100">Share</button>
+                        <button type="button" @click="copyLinks()" class="rounded-lg px-3 py-1.5 font-medium text-slate-700 hover:bg-slate-100">Copy link</button>
+                        <button type="button" @click="deleteSelected()" class="rounded-lg px-3 py-1.5 font-medium text-red-700 hover:bg-red-50">Delete</button>
+                        <button type="button" @click="moveModalOpen = true" class="rounded-lg px-3 py-1.5 font-medium text-slate-700 hover:bg-slate-100">Move to</button>
+                        <button type="button" @click="openInEmail()" class="rounded-lg bg-indigo-600 px-3 py-1.5 font-medium text-white hover:bg-indigo-700">Open in email</button>
+                        <span class="ml-2 text-xs text-slate-500" x-text="`${selected.length} selected`"></span>
+                        <button type="button" @click="clearSelection()" class="text-xs text-slate-400 hover:text-slate-600">Clear</button>
+                    </div>
+                </template>
+
+                <div class="ml-auto flex flex-wrap items-center gap-2">
+                    <form method="get" action="{{ route('transfer.files.index') }}" class="flex items-center gap-2">
+                        @if($folderTransfer)
+                            <input type="hidden" name="folder" value="{{ $folderTransfer->id }}">
+                        @endif
+                        <input type="search" name="q" value="{{ $search }}" placeholder="Search files…"
+                               class="w-40 rounded-lg border border-slate-200 px-2.5 py-1.5 text-xs focus:border-indigo-300 focus:outline-none focus:ring-2 focus:ring-indigo-100 sm:w-52">
+                        <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="name" @selected($sort === 'name')>Name</option>
+                            <option value="size" @selected($sort === 'size')>Size</option>
+                            <option value="downloads" @selected($sort === 'downloads')>Downloads</option>
+                        </select>
+                    </form>
+                </div>
            </div>
-        @else
-            <div class="overflow-hidden rounded-2xl border border-slate-200 bg-white">
+
+            {{-- Folders row (when at root) --}}
+            @if(! $folderTransfer && $folders->isNotEmpty() && $search === '')
+                <div class="border-b border-slate-100 px-4 py-3">
+                    <p class="mb-2 text-xs font-semibold uppercase tracking-wide text-slate-400">Folders</p>
+                    <div class="flex flex-wrap gap-2">
+                        @foreach($folders as $folder)
+                            <a href="{{ route('transfer.files.index', ['folder' => $folder->id]) }}"
+                               class="inline-flex items-center gap-2 rounded-xl border border-slate-200 bg-slate-50 px-3 py-2 text-sm text-slate-700 transition hover:border-indigo-200 hover:bg-indigo-50/60">
+                                <svg class="h-5 w-5 text-amber-500" fill="currentColor" viewBox="0 0 20 20"><path d="M2 6a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6Z"/></svg>
+                                <span class="font-medium">{{ $folder->title }}</span>
+                                <span class="text-xs text-slate-400">{{ $folder->files_count }}</span>
+                            </a>
+                        @endforeach
+                    </div>
+                </div>
+            @endif
+
+            @if($files->isEmpty())
+                <div class="px-6 py-12 text-center text-sm text-slate-500">
+                    @if($search !== '')
+                        No files match your search.
+                    @elseif($folderTransfer)
+                        This folder is empty.
+                    @else
+                        No stored files yet.
+                    @endif
+                </div>
+            @else
                <table class="min-w-full divide-y divide-slate-100 text-sm">
                    <thead class="bg-slate-50 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">
                        <tr>
-                            <th class="px-6 py-3">File</th>
-                            <th class="px-6 py-3">Transfer</th>
-                            <th class="px-6 py-3">Size</th>
-                            <th class="px-6 py-3">Downloads</th>
+                            <th class="w-10 px-4 py-3">
+                                <input type="checkbox" @change="toggleAll($event)" :checked="allSelected" class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500">
+                            </th>
+                            <th class="px-4 py-3">Name</th>
+                            <th class="hidden px-4 py-3 sm:table-cell">Modified</th>
+                            <th class="px-4 py-3">Size</th>
+                            <th class="hidden px-4 py-3 md:table-cell">Sharing</th>
+                            @unless($folderTransfer)
+                                <th class="hidden px-4 py-3 lg:table-cell">Folder</th>
+                            @endunless
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100">
                        @foreach($files as $file)
-                            <tr>
-                                <td class="px-6 py-4 font-medium text-slate-900">{{ $file->original_name }}</td>
-                                <td class="px-6 py-4">
-                                    <a href="{{ route('transfer.transfers.show', $file->transfer) }}" class="text-indigo-600 hover:text-indigo-800">{{ $file->transfer->title }}</a>
+                            @php $icon = $fileIcon($file); @endphp
+                            <tr class="transition"
+                                :class="selected.includes({{ $file->id }}) ? 'bg-indigo-50/80' : 'hover:bg-slate-50/80'">
+                                <td class="px-4 py-3">
+                                    <input type="checkbox" value="{{ $file->id }}" x-model.number="selected" class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500">
                                </td>
-                                <td class="px-6 py-4 text-slate-600">{{ $file->humanSize() }}</td>
-                                <td class="px-6 py-4 text-slate-600">{{ number_format($file->downloads_total) }}</td>
+                                <td class="px-4 py-3">
+                                    <div class="flex items-center gap-3">
+                                        @include('transfer.files.partials.file-icon', ['icon' => $icon])
+                                        <div class="min-w-0">
+                                            <p class="truncate font-medium text-slate-900">{{ $file->original_name }}</p>
+                                            <div class="mt-0.5 flex items-center gap-2 sm:hidden">
+                                                <span class="text-xs text-slate-500">{{ $file->humanSize() }}</span>
+                                            </div>
+                                        </div>
+                                        <div class="ml-auto flex items-center gap-1 opacity-0 transition group-hover:opacity-100 sm:opacity-100" x-show="selected.includes({{ $file->id }})">
+                                            <a href="{{ route('transfer.files.download', $file) }}" class="rounded p-1 text-slate-500 hover:bg-white hover:text-indigo-600" title="Download">
+                                                <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 7.5 12 3m0 0L7.5 7.5M12 3v13.5"/></svg>
+                                            </a>
+                                        </div>
+                                    </div>
+                                </td>
+                                <td class="hidden px-4 py-3 text-slate-600 sm:table-cell">{{ $file->updated_at?->format('M j, Y') ?? '—' }}</td>
+                                <td class="px-4 py-3 text-slate-600">{{ $file->humanSize() }}</td>
+                                <td class="hidden px-4 py-3 md:table-cell">
+                                    @if($file->transfer->recipient_email || $file->downloads_total > 0)
+                                        <span class="inline-flex items-center gap-1 text-xs text-slate-600">
+                                            <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z"/></svg>
+                                            Shared
+                                        </span>
+                                    @else
+                                        <span class="text-xs text-slate-400">Private</span>
+                                    @endif
+                                </td>
+                                @unless($folderTransfer)
+                                    <td class="hidden px-4 py-3 lg:table-cell">
+                                        <a href="{{ route('transfer.files.index', ['folder' => $file->transfer_id]) }}" class="text-indigo-600 hover:text-indigo-800">{{ $file->transfer->title }}</a>
+                                    </td>
+                                @endunless
                            </tr>
                        @endforeach
                    </tbody>
                </table>
-            </div>
+                <div class="flex items-center justify-between border-t border-slate-100 px-4 py-3 text-xs text-slate-500">
+                    <span>{{ $files->total() }} file{{ $files->total() === 1 ? '' : 's' }}</span>
+                    <span>Showing {{ $files->firstItem() }}–{{ $files->lastItem() }}</span>
+                </div>
+            @endif
+        </div>
+
+        @if($files->hasPages())
            <div>{{ $files->links() }}</div>
        @endif
+
+        {{-- Move modal --}}
+        <div x-show="moveModalOpen" x-cloak class="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4" @keydown.escape.window="moveModalOpen = false">
+            <div @click.outside="moveModalOpen = false" class="w-full max-w-md rounded-2xl bg-white p-6 shadow-xl">
+                <h3 class="text-lg font-semibold text-slate-900">Move to folder</h3>
+                <p class="mt-1 text-sm text-slate-500">Group selected files into another transfer folder.</p>
+                <form method="post" action="{{ route('transfer.files.move') }}" class="mt-4 space-y-4">
+                    @csrf
+                    <template x-for="id in selected" :key="id">
+                        <input type="hidden" name="files[]" :value="id">
+                    </template>
+                    <select name="destination" required class="w-full rounded-xl border border-slate-200 px-3 py-2 text-sm focus:border-indigo-300 focus:outline-none focus:ring-2 focus:ring-indigo-100">
+                        <option value="">Choose a transfer folder…</option>
+                        @foreach($moveTargets as $target)
+                            <option value="{{ $target->id }}">{{ $target->title }}</option>
+                        @endforeach
+                    </select>
+                    <div class="flex justify-end gap-2">
+                        <button type="button" @click="moveModalOpen = false" class="rounded-xl px-4 py-2 text-sm font-medium text-slate-600 hover:bg-slate-100">Cancel</button>
+                        <button type="submit" class="rounded-xl bg-indigo-600 px-4 py-2 text-sm font-semibold text-white hover:bg-indigo-700">Move</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+
+        {{-- Toast --}}
+        <div x-show="toast" x-cloak x-transition class="fixed bottom-24 left-1/2 z-50 -translate-x-1/2 rounded-xl bg-slate-900 px-4 py-2 text-sm text-white shadow-lg lg:bottom-8" x-text="toast"></div>
    </div>
 </x-user-layout>
@@ -0,0 +1,19 @@
+@php
+    $colors = match ($icon) {
+        'image' => 'bg-pink-100 text-pink-600',
+        'video' => 'bg-violet-100 text-violet-600',
+        'audio' => 'bg-cyan-100 text-cyan-600',
+        'archive' => 'bg-amber-100 text-amber-600',
+        'document' => 'bg-blue-100 text-blue-600',
+        default => 'bg-slate-100 text-slate-600',
+    };
+@endphp
+<span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg {{ $colors }}">
+    @if($icon === 'image')
+        <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0 0 22.5 18.75V5.25A2.25 2.25 0 0 0 20.25 3H3.75A2.25 2.25 0 0 0 1.5 5.25v13.5A2.25 2.25 0 0 0 3.75 21Z"/></svg>
+    @elseif($icon === 'archive')
+        <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M20.25 7.5 12 3 3.75 7.5m16.5 0v9L12 21l-8.25-4.5v-9M12 3v18"/></svg>
+    @else
+        <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"/></svg>
+    @endif
+</span>
@@ -4,22 +4,57 @@
        <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">Share files with a link and QR code.</p>
+                <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>

+        <form method="get" action="{{ route('transfer.transfers.index') }}" class="flex flex-wrap items-center gap-3">
+            <div class="relative min-w-[220px] flex-1">
+                <svg class="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -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, recipients, files…"
+                       class="w-full rounded-xl border border-slate-200 bg-white py-2 pl-9 pr-3 text-sm text-slate-700 placeholder-slate-400 focus:border-indigo-300 focus:outline-none focus:ring-2 focus:ring-indigo-100">
+            </div>
+            <select name="status" class="rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm text-slate-700 focus:border-indigo-300 focus:outline-none focus:ring-2 focus:ring-indigo-100">
+                <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" class="rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm text-slate-700 focus:border-indigo-300 focus:outline-none focus:ring-2 focus:ring-indigo-100">
+                <option value="newest" @selected($sort === 'newest')>Newest first</option>
+                <option value="oldest" @selected($sort === 'oldest')>Oldest first</option>
+                <option value="title" @selected($sort === 'title')>Title A–Z</option>
+                <option value="downloads" @selected($sort === 'downloads')>Most downloads</option>
+            </select>
+            <button type="submit" class="rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Apply</button>
+            @if($search !== '' || $status !== 'all' || $sort !== 'newest')
+                <a href="{{ route('transfer.transfers.index') }}" class="text-sm font-medium text-slate-500 hover:text-slate-700">Clear</a>
+            @endif
+        </form>
+
        @if($transfers->isEmpty())
            <div class="rounded-2xl border border-dashed border-slate-200 bg-white px-6 py-12 text-center">
-                <p class="text-sm text-slate-500">No active transfers yet.</p>
+                <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="overflow-hidden rounded-2xl border border-slate-200 bg-white">
+                <div class="flex items-center justify-between border-b border-slate-100 px-6 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-6 py-3">Title</th>
+                            <th class="px-6 py-3">Status</th>
                            <th class="px-6 py-3">Files</th>
                            <th class="px-6 py-3">Downloads</th>
                            <th class="px-6 py-3">Expires</th>
@@ -28,10 +63,25 @@
                    </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-6 py-4">
                                    <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-6 py-4">
+                                    <span class="inline-flex rounded-full px-2.5 py-0.5 text-xs font-medium {{ $statusClass }}">
+                                        {{ $transfer->billingStatusLabel() }}
+                                    </span>
                                </td>
                                <td class="px-6 py-4 text-slate-600">{{ $transfer->files->count() }}</td>
                                <td class="px-6 py-4 text-slate-600">{{ number_format($transfer->downloads_total) }}</td>