fun/Kol-Manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add accent color to invoice settings and update related views; enhance event creation with brand contract option

Browse Source
This commit is contained in:
I-Fun
2026-04-02 07:24:43 +07:00
parent 86176c99c7
commit 5748b163b6
15 changed files with 302 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
resources/views/files/index.blade.php
View File

@@ -6,8 +6,30 @@
@section('content')
{{-- ── File Detail Popup Modal ──────────────────────────────── --}}
<div id="file-detail-modal"
class="fixed inset-0 z-50 flex items-end sm:items-center justify-center bg-black/40 hidden"
onclick="if(event.target===this)this.classList.add('hidden')">
<div class="cat-card p-5 w-full sm:max-w-sm rounded-b-none sm:rounded-3xl shadow-xl mx-0 sm:mx-4">
<div class="w-10 h-1 bg-gray-200 rounded-full mx-auto mb-4 sm:hidden"></div>
<div class="flex items-center justify-between mb-3">
<h3 class="font-bold text-gray-800 text-base" id="fdm-name">File</h3>
<button onclick="document.getElementById('file-detail-modal').classList.add('hidden')"
class="text-gray-400 hover:text-gray-600 text-xl leading-none">✕</button>
</div>
<div id="fdm-preview" class="mb-3 flex justify-center"></div>
<div class="text-sm text-gray-600 space-y-1.5" id="fdm-body"></div>
<div class="flex gap-2 mt-4">
<a id="fdm-view-btn" href="#" target="_blank"
class="btn-sakura flex-1 text-center py-2 text-sm">View / Download</a>
<button onclick="document.getElementById('file-detail-modal').classList.add('hidden')"
class="flex-1 py-2 rounded-full border border-pink-200 text-gray-600 text-sm hover:bg-pink-50">Close</button>
</div>
</div>
</div>
{{-- ── Upload Form (collapsible) ────────────────────────────── --}}
<div class="cat-card p-4 mb-4"
<div class="cat-card p-4 mb-4" id="upload-panel"
x-data="{
open: false,
uploading: false,
@@ -172,12 +194,14 @@
<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">
<div class="w-full aspect-square rounded-2xl overflow-hidden bg-pink-50 cursor-pointer"
onclick="showFileDetail({{ json_encode(['name' => $file->name ?: $file->original_name, 'url' => $file->url, 'size' => $file->human_size, 'folder' => $file->folder, 'client' => $file->client?->name, 'is_image' => $file->is_image, 'icon' => $file->icon, 'created_at' => $file->created_at->format('d M Y')]) }})">
<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">
<div class="w-full aspect-square rounded-2xl bg-pink-50 flex items-center justify-center text-4xl cursor-pointer"
onclick="showFileDetail({{ json_encode(['name' => $file->name ?: $file->original_name, 'url' => $file->url, 'size' => $file->human_size, 'folder' => $file->folder, 'client' => $file->client?->name, 'is_image' => false, 'icon' => $file->icon, 'created_at' => $file->created_at->format('d M Y')]) }})">
{{ $file->icon }}
</div>
@endif
@@ -219,11 +243,42 @@
<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('[x-data]').__x.$data.open = true"
<button onclick="document.getElementById('upload-panel')._x_dataStack[0].open = true; document.getElementById('upload-panel').scrollIntoView({behavior:'smooth'})"
class="btn-sakura mt-4 inline-block text-sm">Upload your first file</button>
</div>
@endforelse
<div class="mt-4">{{ $files->links() }}</div>
@push('scripts')
<script>
function showFileDetail(file) {
document.getElementById('fdm-name').textContent = file.name;
document.getElementById('fdm-view-btn').href = file.url;
// Preview area
const preview = document.getElementById('fdm-preview');
if (file.is_image) {
preview.innerHTML = `<img src="${file.url}" alt="${file.name}" class="max-h-48 rounded-2xl object-contain border border-pink-100">`;
} else {
preview.innerHTML = `<span class="text-6xl">${file.icon}</span>`;
}
// Info rows
const rows = [
['Size', file.size],
['Folder', file.folder],
file.client ? ['Client', file.client] : null,
['Uploaded', file.created_at],
].filter(Boolean);
document.getElementById('fdm-body').innerHTML = rows.map(([label, value]) =>
`<div class="flex gap-2"><span class="text-gray-400 w-16 shrink-0">${label}</span><span class="font-medium text-gray-700 truncate">${value}</span></div>`
).join('');
document.getElementById('file-detail-modal').classList.remove('hidden');
}
</script>
@endpush
@endsection