change style of button
This commit is contained in:
I-Fun
@@ -5,97 +5,109 @@
|
||||
@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 flex-col sm:flex-row sm:items-center justify-between gap-3 mb-5">
|
||||
|
||||
<div class="flex gap-2 shrink-0">
|
||||
<a href="{{ route('invoice-settings.edit') }}"
|
||||
class="text-xs px-3 py-2 rounded-full border border-gray-200 text-gray-500 hover:bg-gray-50 flex items-center gap-1">
|
||||
⚙️ Settings
|
||||
</a>
|
||||
<a href="{{ route('invoices.create') }}" class="btn-sakura text-sm">＋ New Invoice</a>
|
||||
<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>
|
||||
</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>
|
||||
{{-- 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>
|
||||
<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>
|
||||
@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>
|
||||
<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.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>
|
||||
@endforelse
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4">{{ $invoices->links() }}</div>
|
||||
{{-- Share scripts disabled --}}
|
||||
@endsection
|
||||
{{-- 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>
|
||||
{{-- 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
|
||||
Reference in New Issue
Block a user