115 lines
6.4 KiB
PHP
115 lines
6.4 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 shrink-0">
|
||
<a href="{{ route('invoices.create') }}" class="btn-sakura text-sm">＋ New Invoice</a>
|
||
<a href="{{ route('invoice-settings.edit') }}"
|
||
class="btn-sakura text-sm px-3 py-2 rounded-full border border-gray-200 text-gray-500 hover:bg-gray-50 flex items-center gap-1">
|
||
⚙️ Settings
|
||
</a>
|
||
</div>
|
||
</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>
|
||
{{-- Share button disabled --}}
|
||
</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.pdf-legacy', $invoice) }}"
|
||
class="text-xs text-pink-500 hover:underline" target="_blank">PDF (Legacy)</a>
|
||
<a href="{{ route('invoices.edit', $invoice) }}"
|
||
class="text-xs text-gray-500 hover:underline">Edit</a>
|
||
{{-- Share button disabled --}}
|
||
</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>
|
||
{{-- Share scripts disabled --}}
|
||
@endsection |