initial commit
This commit is contained in:
148
resources/views/files/index.blade.php
Normal file
148
resources/views/files/index.blade.php
Normal file
@@ -0,0 +1,148 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('title', 'Files')
|
||||
@section('page-title', 'File Manager 📁')
|
||||
@section('page-subtitle', 'Brand assets, logos, and media files')
|
||||
|
||||
@section('content')
|
||||
|
||||
{{-- ── Upload Form (collapsible on mobile) ─────────────────── --}}
|
||||
<div class="cat-card p-4 mb-4" x-data="{ open: false }">
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="text-sm font-bold text-gray-700 flex items-center gap-2">📤 Upload File</h3>
|
||||
<button class="btn-sakura text-xs px-4 py-1.5" @click="open = !open"
|
||||
x-text="open ? '✕ Close' : '+ Upload'"></button>
|
||||
</div>
|
||||
|
||||
<form x-show="open" x-transition
|
||||
action="{{ route('files.store') }}" method="POST" enctype="multipart/form-data"
|
||||
class="mt-4 grid grid-cols-1 sm:grid-cols-3 gap-3">
|
||||
@csrf
|
||||
<div class="sm:col-span-3">
|
||||
<label class="block text-xs font-semibold text-gray-600 mb-1">
|
||||
File <span class="text-pink-400">*</span>
|
||||
<span class="text-gray-400 font-normal ml-1">Max 50 MB</span>
|
||||
</label>
|
||||
<input type="file" name="file" required
|
||||
class="w-full text-sm text-gray-600
|
||||
file:mr-3 file:py-2 file:px-4
|
||||
file:rounded-full file:border-0
|
||||
file:text-xs file:font-semibold
|
||||
file:bg-pink-50 file:text-pink-600
|
||||
hover:file:bg-pink-100
|
||||
cursor-pointer">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-semibold text-gray-600 mb-1">Folder</label>
|
||||
<input type="text" name="folder" value="general" class="input-soft text-sm"
|
||||
list="folder-list" placeholder="brand-assets, logos...">
|
||||
<datalist id="folder-list">
|
||||
@foreach($folders as $f)
|
||||
<option value="{{ $f }}">
|
||||
@endforeach
|
||||
<option value="brand-assets">
|
||||
<option value="logos">
|
||||
<option value="videos">
|
||||
<option value="photos">
|
||||
<option value="documents">
|
||||
</datalist>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-semibold text-gray-600 mb-1">Client (optional)</label>
|
||||
<select name="client_id" class="input-soft text-sm">
|
||||
<option value="">— None —</option>
|
||||
@foreach($clients as $client)
|
||||
<option value="{{ $client->id }}">{{ $client->name }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
<div class="sm:flex sm:items-end">
|
||||
<button type="submit" class="btn-sakura w-full py-2.5">📤 Upload</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{{-- ── Folder Filter Chips ──────────────────────────────────── --}}
|
||||
<div class="flex gap-2 overflow-x-auto pb-2 mb-4 -mx-4 px-4 lg:mx-0 lg:px-0">
|
||||
<a href="{{ route('files.index') }}"
|
||||
class="shrink-0 px-3 py-1.5 rounded-full text-xs font-semibold transition-colors
|
||||
{{ !request('folder') || request('folder') === 'all'
|
||||
? 'text-white' : 'bg-white text-gray-500 border border-pink-100 hover:bg-pink-50' }}"
|
||||
style="{{ !request('folder') || request('folder') === 'all' ? 'background:#FFB7C5' : '' }}">
|
||||
All
|
||||
</a>
|
||||
@foreach($folders as $f)
|
||||
<a href="{{ request()->fullUrlWithQuery(['folder' => $f]) }}"
|
||||
class="shrink-0 px-3 py-1.5 rounded-full text-xs font-semibold capitalize transition-colors
|
||||
{{ request('folder') === $f
|
||||
? 'text-white' : 'bg-white text-gray-500 border border-pink-100 hover:bg-pink-50' }}"
|
||||
style="{{ request('folder') === $f ? 'background:#FFB7C5' : '' }}">
|
||||
{{ $f }}
|
||||
</a>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
{{-- ── File Grid ────────────────────────────────────────────── --}}
|
||||
@forelse($files as $file)
|
||||
@if($loop->first)
|
||||
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-3">
|
||||
@endif
|
||||
|
||||
<div class="cat-card p-3 flex flex-col gap-2">
|
||||
{{-- Preview / Icon --}}
|
||||
@if($file->is_image)
|
||||
<div class="w-full aspect-square rounded-2xl overflow-hidden bg-pink-50">
|
||||
<img src="{{ $file->url }}" alt="{{ $file->name }}"
|
||||
class="w-full h-full object-cover">
|
||||
</div>
|
||||
@else
|
||||
<div class="w-full aspect-square rounded-2xl bg-pink-50 flex items-center justify-center text-4xl">
|
||||
{{ $file->icon }}
|
||||
</div>
|
||||
@endif
|
||||
|
||||
{{-- Info --}}
|
||||
<div class="min-w-0">
|
||||
<p class="text-xs font-semibold text-gray-700 truncate" title="{{ $file->original_name }}">
|
||||
{{ $file->name ?: $file->original_name }}
|
||||
</p>
|
||||
<p class="text-xs text-gray-400">{{ $file->human_size }}</p>
|
||||
@if($file->client)
|
||||
<p class="text-xs text-pink-500 truncate">👥 {{ $file->client->name }}</p>
|
||||
@endif
|
||||
<span class="text-xs bg-pink-50 text-pink-600 px-2 py-0.5 rounded-full capitalize inline-block mt-0.5">
|
||||
{{ $file->folder }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{{-- Actions --}}
|
||||
<div class="flex gap-1.5 mt-auto">
|
||||
<a href="{{ $file->url }}" target="_blank"
|
||||
class="flex-1 text-center text-xs py-1.5 rounded-full border border-pink-200 text-pink-600 hover:bg-pink-50 font-medium">
|
||||
View
|
||||
</a>
|
||||
<form action="{{ route('files.destroy', $file) }}" method="POST"
|
||||
onsubmit="return confirm('Delete this file?')">
|
||||
@csrf @method('DELETE')
|
||||
<button class="text-xs py-1.5 px-3 rounded-full border border-red-100 text-red-400 hover:bg-red-50">
|
||||
✕
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if($loop->last)
|
||||
</div>
|
||||
@endif
|
||||
@empty
|
||||
<div class="text-center py-16 text-gray-400">
|
||||
<span class="text-5xl block mb-3">📁</span>
|
||||
<p class="text-sm">No files yet.</p>
|
||||
<button onclick="document.querySelector('[\\@click=\\'open = !open\\']').click()"
|
||||
class="btn-sakura mt-4 inline-block text-sm">Upload your first file</button>
|
||||
</div>
|
||||
@endforelse
|
||||
|
||||
<div class="mt-4">{{ $files->links() }}</div>
|
||||
|
||||
@endsection
|
||||
Reference in New Issue
Block a user