104 lines
5.6 KiB
PHP
104 lines
5.6 KiB
PHP
@extends('layouts.app')
|
||
|
||
@section('title', 'Invoices')
|
||
@section('page-title', 'Invoices 🧾')
|
||
@section('page-subtitle', 'Manage your brand deal payments')
|
||
|
||
@section('content')
|
||
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-5">
|
||
<div class="flex gap-2 flex-wrap">
|
||
@foreach(['all','draft','sent','paid','overdue'] as $s)
|
||
<a href="{{ request()->fullUrlWithQuery(['status' => $s]) }}"
|
||
class="px-3 py-1.5 rounded-full text-xs font-semibold transition-colors
|
||
{{ request('status', 'all') === $s
|
||
? 'text-white'
|
||
: 'bg-white text-gray-500 hover:bg-pink-50 border border-pink-100' }}"
|
||
style="{{ request('status', 'all') === $s ? 'background:#FFB7C5' : '' }}">
|
||
{{ ucfirst($s) }}
|
||
</a>
|
||
@endforeach
|
||
</div>
|
||
<a href="{{ route('invoices.create') }}" class="btn-sakura text-sm shrink-0">＋ New Invoice</a>
|
||
</div>
|
||
|
||
{{-- Mobile card list --}}
|
||
<div class="flex flex-col gap-3 sm:hidden">
|
||
@forelse($invoices as $invoice)
|
||
<div class="cat-card p-4">
|
||
<div class="flex items-start justify-between gap-2 mb-2">
|
||
<div>
|
||
<div class="font-mono text-sm font-bold text-gray-700">{{ $invoice->invoice_number }}</div>
|
||
<div class="text-xs text-gray-400">{{ $invoice->client?->name ?? '—' }}</div>
|
||
</div>
|
||
<span class="badge {{ $invoice->status->badgeClass() }} shrink-0">{{ $invoice->status->label() }}</span>
|
||
</div>
|
||
<div class="text-sm text-gray-700 font-semibold mb-1">{{ $invoice->title }}</div>
|
||
<div class="flex items-center justify-between text-xs text-gray-500">
|
||
<span>Due {{ $invoice->due_date->format('d M Y') }}</span>
|
||
<span class="font-bold text-gray-800">{{ $invoice->formatted_total }}</span>
|
||
</div>
|
||
<div class="flex gap-2 mt-3 pt-3 border-t border-pink-50">
|
||
<a href="{{ route('invoices.show', $invoice) }}" class="flex-1 text-center text-xs py-1.5 px-3 rounded-full border border-pink-200 text-pink-600 hover:bg-pink-50">View</a>
|
||
<a href="{{ route('invoices.pdf', $invoice) }}" target="_blank" class="flex-1 text-center text-xs py-1.5 px-3 rounded-full border border-pink-200 text-pink-600 hover:bg-pink-50">PDF</a>
|
||
<a href="{{ route('invoices.edit', $invoice) }}" class="flex-1 text-center text-xs py-1.5 px-3 rounded-full border border-pink-200 text-gray-600 hover:bg-pink-50">Edit</a>
|
||
</div>
|
||
</div>
|
||
@empty
|
||
<div class="text-center py-16 text-gray-400">
|
||
<span class="text-5xl block mb-2">🧾</span>
|
||
<p>No invoices yet. <a href="{{ route('invoices.create') }}" class="text-pink-500 hover:underline">Create one!</a></p>
|
||
</div>
|
||
@endforelse
|
||
</div>
|
||
|
||
{{-- Desktop table --}}
|
||
<div class="cat-card overflow-hidden hidden sm:block">
|
||
<div class="overflow-x-auto">
|
||
<table class="table w-full">
|
||
<thead class="bg-pink-50">
|
||
<tr>
|
||
<th class="px-5 py-4">Invoice #</th>
|
||
<th class="px-5 py-4">Client</th>
|
||
<th class="px-5 py-4">Title</th>
|
||
<th class="px-5 py-4">Total</th>
|
||
<th class="px-5 py-4">Due Date</th>
|
||
<th class="px-5 py-4">Status</th>
|
||
<th class="px-5 py-4">Actions</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
@forelse($invoices as $invoice)
|
||
<tr class="border-b border-pink-50 hover:bg-pink-50/50 transition-colors">
|
||
<td class="px-5 py-4 font-mono text-sm font-semibold text-gray-700">{{ $invoice->invoice_number }}</td>
|
||
<td class="px-5 py-4 text-sm text-gray-600">{{ $invoice->client?->name ?? '—' }}</td>
|
||
<td class="px-5 py-4 text-sm text-gray-700 max-w-xs truncate">{{ $invoice->title }}</td>
|
||
<td class="px-5 py-4 font-bold text-gray-800 text-sm">{{ $invoice->formatted_total }}</td>
|
||
<td class="px-5 py-4 text-sm text-gray-500">
|
||
{{ $invoice->due_date->format('d M Y') }}
|
||
@if($invoice->due_date->isPast() && $invoice->status->value !== 'paid')
|
||
<span class="text-red-400 text-xs block">Overdue!</span>
|
||
@endif
|
||
</td>
|
||
<td class="px-5 py-4"><span class="badge {{ $invoice->status->badgeClass() }}">{{ $invoice->status->label() }}</span></td>
|
||
<td class="px-5 py-4">
|
||
<div class="flex items-center gap-2">
|
||
<a href="{{ route('invoices.show', $invoice) }}" class="text-xs text-pink-500 hover:underline">View</a>
|
||
<a href="{{ route('invoices.pdf', $invoice) }}" class="text-xs text-pink-500 hover:underline" target="_blank">PDF</a>
|
||
<a href="{{ route('invoices.edit', $invoice) }}" class="text-xs text-gray-500 hover:underline">Edit</a>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
@empty
|
||
<tr><td colspan="7" class="text-center py-16 text-gray-400">
|
||
<span class="text-4xl block mb-2">🧾</span>
|
||
No invoices yet.
|
||
</td></tr>
|
||
@endforelse
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt-4">{{ $invoices->links() }}</div>
|
||
@endsection
|