initial commit
This commit is contained in:
I-Fun
170
resources/views/invoices/create.blade.php
Normal file
170
resources/views/invoices/create.blade.php
Normal file
@@ -0,0 +1,170 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('title', 'New Invoice')
|
||||
@section('page-title', 'Create Invoice 🧾')
|
||||
@section('page-subtitle', 'Fill in the invoice details')
|
||||
|
||||
@section('content')
|
||||
<div class="max-w-3xl mx-auto">
|
||||
<div class="cat-card p-4 lg:p-8" x-data="invoiceForm()">
|
||||
<form action="{{ route('invoices.store') }}" method="POST">
|
||||
@csrf
|
||||
|
||||
{{-- Header fields --}}
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3 mb-5">
|
||||
<div class="sm:col-span-2">
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1">Invoice Title <span class="text-pink-400">*</span></label>
|
||||
<input type="text" name="title" value="{{ old('title') }}" class="input-soft" required
|
||||
placeholder="e.g. Instagram Collaboration - Brand X">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1">Client</label>
|
||||
<select name="client_id" class="input-soft">
|
||||
<option value="">— No client —</option>
|
||||
@foreach($clients as $client)
|
||||
<option value="{{ $client->id }}" {{ request('client') == $client->id ? 'selected' : '' }}>
|
||||
{{ $client->name }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1">Currency</label>
|
||||
<select name="currency" class="input-soft">
|
||||
<option value="IDR" selected>IDR (Rupiah)</option>
|
||||
<option value="USD">USD (Dollar)</option>
|
||||
<option value="SGD">SGD</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1">Issue Date</label>
|
||||
<input type="date" name="issue_date" value="{{ old('issue_date', today()->toDateString()) }}"
|
||||
class="input-soft" required>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1">Due Date</label>
|
||||
<input type="date" name="due_date"
|
||||
value="{{ old('due_date', today()->addDays(14)->toDateString()) }}"
|
||||
class="input-soft" required>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1">Tax Rate (%)</label>
|
||||
<input type="number" name="tax_rate" x-model="taxRate" @input="recalc()"
|
||||
value="{{ old('tax_rate', 11) }}" class="input-soft" step="0.01">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Line Items --}}
|
||||
<div class="mb-5">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<h3 class="text-sm font-bold text-gray-700">Line Items</h3>
|
||||
<button type="button" @click="addItem()" class="btn-sakura text-xs py-1.5 px-4">＋ Add Item</button>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<template x-for="(item, index) in items" :key="index">
|
||||
<div class="bg-pink-50 rounded-2xl p-3">
|
||||
{{-- Description full width --}}
|
||||
<input type="text" :name="`items[${index}][description]`"
|
||||
x-model="item.description"
|
||||
class="input-soft text-sm mb-2 bg-white"
|
||||
placeholder="Service description" required>
|
||||
{{-- Qty / Price / Total in a row --}}
|
||||
<div class="flex gap-2 items-center">
|
||||
<div class="w-16 shrink-0">
|
||||
<label class="text-xs text-gray-400 block mb-0.5">Qty</label>
|
||||
<input type="number" :name="`items[${index}][quantity]`"
|
||||
x-model.number="item.quantity" @input="recalc()"
|
||||
class="input-soft text-sm text-center bg-white px-2" min="1">
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<label class="text-xs text-gray-400 block mb-0.5">Unit Price</label>
|
||||
<input type="number" :name="`items[${index}][unit_price]`"
|
||||
x-model.number="item.unit_price" @input="recalc()"
|
||||
class="input-soft text-sm bg-white" min="0" step="1000"
|
||||
placeholder="0">
|
||||
</div>
|
||||
<div class="w-24 shrink-0 text-right">
|
||||
<label class="text-xs text-gray-400 block mb-0.5">Total</label>
|
||||
<div class="text-sm font-bold text-gray-700 pt-2">
|
||||
Rp <span x-text="formatNum(item.quantity * item.unit_price)"></span>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" @click="removeItem(index)"
|
||||
class="text-red-400 hover:text-red-600 text-lg shrink-0 pt-4">✕</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Totals --}}
|
||||
<div class="bg-pink-50 rounded-2xl p-4 mb-5">
|
||||
<div class="flex justify-between text-sm py-1">
|
||||
<span class="text-gray-500">Subtotal</span>
|
||||
<span class="font-semibold">Rp <span x-text="formatNum(subtotal)"></span></span>
|
||||
</div>
|
||||
<div class="flex justify-between text-sm py-1">
|
||||
<span class="text-gray-500">Tax (<span x-text="taxRate"></span>%)</span>
|
||||
<span class="font-semibold">Rp <span x-text="formatNum(taxAmount)"></span></span>
|
||||
</div>
|
||||
<div class="flex justify-between text-base font-bold py-2 mt-1 border-t border-pink-200">
|
||||
<span class="text-gray-700">Total</span>
|
||||
<span class="text-pink-600">Rp <span x-text="formatNum(total)"></span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Bank Info --}}
|
||||
<div class="grid grid-cols-1 sm:grid-cols-3 gap-3 mb-5">
|
||||
<div>
|
||||
<label class="block text-xs font-semibold text-gray-600 mb-1">Bank Name</label>
|
||||
<input type="text" name="bank_name" value="{{ old('bank_name') }}"
|
||||
class="input-soft text-sm" placeholder="BCA, Mandiri...">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-semibold text-gray-600 mb-1">Account Number</label>
|
||||
<input type="text" name="bank_account" value="{{ old('bank_account') }}"
|
||||
class="input-soft text-sm">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-semibold text-gray-600 mb-1">Account Holder</label>
|
||||
<input type="text" name="bank_holder" value="{{ old('bank_holder') }}"
|
||||
class="input-soft text-sm">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-5">
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1">Notes</label>
|
||||
<textarea name="notes" rows="2" class="input-soft resize-none"
|
||||
placeholder="Payment terms, etc.">{{ old('notes') }}</textarea>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col sm:flex-row gap-3">
|
||||
<button type="submit" class="btn-sakura flex-1 py-3">🧾 Create Invoice</button>
|
||||
<a href="{{ route('invoices.index') }}"
|
||||
class="flex-1 py-3 text-center rounded-full border border-pink-200 text-gray-600 hover:bg-pink-50 font-semibold text-sm">
|
||||
Cancel
|
||||
</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@push('scripts')
|
||||
<script>
|
||||
function invoiceForm() {
|
||||
return {
|
||||
items: [{ description: '', quantity: 1, unit_price: 0 }],
|
||||
taxRate: 11,
|
||||
get subtotal() { return this.items.reduce((s, i) => s + (i.quantity * i.unit_price), 0); },
|
||||
get taxAmount() { return Math.round(this.subtotal * this.taxRate / 100); },
|
||||
get total() { return this.subtotal + this.taxAmount; },
|
||||
addItem() { this.items.push({ description: '', quantity: 1, unit_price: 0 }); },
|
||||
removeItem(i) { if (this.items.length > 1) this.items.splice(i, 1); },
|
||||
recalc() {},
|
||||
formatNum(n) { return Number(n).toLocaleString('id-ID'); },
|
||||
};
|
||||
}
|
||||
</script>
|
||||
@endpush
|
||||
@endsection
|
||||
164
resources/views/invoices/edit.blade.php
Normal file
164
resources/views/invoices/edit.blade.php
Normal file
@@ -0,0 +1,164 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('title', 'Edit Invoice')
|
||||
@section('page-title', 'Edit Invoice 🧾')
|
||||
@section('page-subtitle', $invoice->invoice_number)
|
||||
|
||||
@section('content')
|
||||
<div class="max-w-3xl mx-auto">
|
||||
<div class="cat-card p-4 lg:p-8" x-data="invoiceEditForm()">
|
||||
<form action="{{ route('invoices.update', $invoice) }}" method="POST">
|
||||
@csrf @method('PUT')
|
||||
|
||||
{{-- Header fields --}}
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3 mb-5">
|
||||
<div class="sm:col-span-2">
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1">Invoice Title</label>
|
||||
<input type="text" name="title" value="{{ old('title', $invoice->title) }}" class="input-soft" required>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1">Client</label>
|
||||
<select name="client_id" class="input-soft">
|
||||
<option value="">— No client —</option>
|
||||
@foreach($clients as $client)
|
||||
<option value="{{ $client->id }}" {{ old('client_id', $invoice->client_id) == $client->id ? 'selected' : '' }}>{{ $client->name }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1">Status</label>
|
||||
<select name="status" class="input-soft">
|
||||
@foreach($statuses as $s)
|
||||
<option value="{{ $s->value }}" {{ old('status', $invoice->status->value) === $s->value ? 'selected' : '' }}>{{ $s->label() }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1">Issue Date</label>
|
||||
<input type="date" name="issue_date" value="{{ old('issue_date', $invoice->issue_date->toDateString()) }}" class="input-soft">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1">Due Date</label>
|
||||
<input type="date" name="due_date" value="{{ old('due_date', $invoice->due_date->toDateString()) }}" class="input-soft">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1">Paid Date</label>
|
||||
<input type="date" name="paid_date" value="{{ old('paid_date', $invoice->paid_date?->toDateString()) }}" class="input-soft">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1">Tax Rate (%)</label>
|
||||
<input type="number" name="tax_rate" x-model="taxRate" @input="recalc()"
|
||||
value="{{ old('tax_rate', $invoice->tax_rate) }}" class="input-soft" step="0.01">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Line Items --}}
|
||||
<div class="mb-5">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<h3 class="text-sm font-bold text-gray-700">Line Items</h3>
|
||||
<button type="button" @click="addItem()" class="btn-sakura text-xs py-1.5 px-4">＋ Add Item</button>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<template x-for="(item, index) in items" :key="index">
|
||||
<div class="bg-pink-50 rounded-2xl p-3">
|
||||
<input type="text" :name="`items[${index}][description]`"
|
||||
x-model="item.description"
|
||||
class="input-soft text-sm mb-2 bg-white"
|
||||
placeholder="Service description" required>
|
||||
<div class="flex gap-2 items-center">
|
||||
<div class="w-16 shrink-0">
|
||||
<label class="text-xs text-gray-400 block mb-0.5">Qty</label>
|
||||
<input type="number" :name="`items[${index}][quantity]`"
|
||||
x-model.number="item.quantity" @input="recalc()"
|
||||
class="input-soft text-sm text-center bg-white px-2" min="1">
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<label class="text-xs text-gray-400 block mb-0.5">Unit Price</label>
|
||||
<input type="number" :name="`items[${index}][unit_price]`"
|
||||
x-model.number="item.unit_price" @input="recalc()"
|
||||
class="input-soft text-sm bg-white" min="0" step="1000">
|
||||
</div>
|
||||
<div class="w-24 shrink-0 text-right">
|
||||
<label class="text-xs text-gray-400 block mb-0.5">Total</label>
|
||||
<div class="text-sm font-bold text-gray-700 pt-2">
|
||||
Rp <span x-text="formatNum(item.quantity * item.unit_price)"></span>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" @click="removeItem(index)"
|
||||
class="text-red-400 hover:text-red-600 text-lg shrink-0 pt-4">✕</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Totals --}}
|
||||
<div class="bg-pink-50 rounded-2xl p-4 mb-5">
|
||||
<div class="flex justify-between text-sm py-1">
|
||||
<span class="text-gray-500">Subtotal</span>
|
||||
<span class="font-semibold">Rp <span x-text="formatNum(subtotal)"></span></span>
|
||||
</div>
|
||||
<div class="flex justify-between text-sm py-1">
|
||||
<span class="text-gray-500">Tax (<span x-text="taxRate"></span>%)</span>
|
||||
<span class="font-semibold">Rp <span x-text="formatNum(taxAmount)"></span></span>
|
||||
</div>
|
||||
<div class="flex justify-between text-base font-bold py-2 mt-1 border-t border-pink-200">
|
||||
<span class="text-gray-700">Total</span>
|
||||
<span class="text-pink-600">Rp <span x-text="formatNum(total)"></span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Bank Info --}}
|
||||
<div class="grid grid-cols-1 sm:grid-cols-3 gap-3 mb-5">
|
||||
<div>
|
||||
<label class="block text-xs font-semibold text-gray-600 mb-1">Bank Name</label>
|
||||
<input type="text" name="bank_name" value="{{ old('bank_name', $invoice->bank_name) }}"
|
||||
class="input-soft text-sm">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-semibold text-gray-600 mb-1">Account Number</label>
|
||||
<input type="text" name="bank_account" value="{{ old('bank_account', $invoice->bank_account) }}"
|
||||
class="input-soft text-sm">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-semibold text-gray-600 mb-1">Account Holder</label>
|
||||
<input type="text" name="bank_holder" value="{{ old('bank_holder', $invoice->bank_holder) }}"
|
||||
class="input-soft text-sm">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-5">
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1">Notes</label>
|
||||
<textarea name="notes" rows="2" class="input-soft resize-none">{{ old('notes', $invoice->notes) }}</textarea>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col sm:flex-row gap-3">
|
||||
<button type="submit" class="btn-sakura flex-1 py-3">💾 Save Changes</button>
|
||||
<a href="{{ route('invoices.show', $invoice) }}"
|
||||
class="flex-1 py-3 text-center rounded-full border border-pink-200 text-gray-600 hover:bg-pink-50 font-semibold text-sm">
|
||||
Cancel
|
||||
</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@push('scripts')
|
||||
<script>
|
||||
function invoiceEditForm() {
|
||||
return {
|
||||
items: @json($invoice->items->map(fn($i) => ['description' => $i->description, 'quantity' => $i->quantity, 'unit_price' => (float)$i->unit_price])),
|
||||
taxRate: {{ $invoice->tax_rate }},
|
||||
get subtotal() { return this.items.reduce((s, i) => s + (i.quantity * i.unit_price), 0); },
|
||||
get taxAmount() { return Math.round(this.subtotal * this.taxRate / 100); },
|
||||
get total() { return this.subtotal + this.taxAmount; },
|
||||
addItem() { this.items.push({ description: '', quantity: 1, unit_price: 0 }); },
|
||||
removeItem(i) { if (this.items.length > 1) this.items.splice(i, 1); },
|
||||
recalc() {},
|
||||
formatNum(n) { return Number(n).toLocaleString('id-ID'); },
|
||||
};
|
||||
}
|
||||
</script>
|
||||
@endpush
|
||||
@endsection
|
||||
103
resources/views/invoices/index.blade.php
Normal file
103
resources/views/invoices/index.blade.php
Normal file
@@ -0,0 +1,103 @@
|
||||
@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
|
||||
119
resources/views/invoices/pdf.blade.php
Normal file
119
resources/views/invoices/pdf.blade.php
Normal file
@@ -0,0 +1,119 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { font-family: 'Helvetica', Arial, sans-serif; color: #374151; font-size: 13px; padding: 40px; }
|
||||
.header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 40px; }
|
||||
.logo { font-size: 22px; font-weight: 900; color: #FFB7C5; }
|
||||
.logo-sub { font-size: 11px; color: #9CA3AF; margin-top: 2px; }
|
||||
.inv-number { font-size: 22px; font-weight: 700; color: #1F2937; text-align: right; }
|
||||
.badge { display: inline-block; padding: 3px 12px; border-radius: 20px; font-size: 11px; font-weight: 700; background: #FDE68A; color: #92400E; }
|
||||
.section-title { font-size: 10px; font-weight: 700; color: #9CA3AF; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
|
||||
.billing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: 32px; }
|
||||
.billing-name { font-weight: 700; font-size: 15px; color: #111827; }
|
||||
.billing-detail { font-size: 12px; color: #6B7280; margin-top: 2px; }
|
||||
.detail-table { width: 100%; font-size: 12px; }
|
||||
.detail-table td { padding: 3px 0; }
|
||||
.detail-table td:first-child { color: #9CA3AF; }
|
||||
.detail-table td:last-child { font-weight: 600; text-align: right; }
|
||||
table.items { width: 100%; border-collapse: collapse; margin-bottom: 24px; }
|
||||
table.items thead { background: #FFF0F5; }
|
||||
table.items th { padding: 10px 12px; text-align: left; font-size: 10px; font-weight: 700; color: #9CA3AF; text-transform: uppercase; }
|
||||
table.items th:last-child, table.items td:last-child { text-align: right; }
|
||||
table.items th:nth-child(2), table.items td:nth-child(2) { text-align: center; }
|
||||
table.items td { padding: 10px 12px; border-bottom: 1px solid #FDE8F0; font-size: 12px; }
|
||||
.totals { display: flex; justify-content: flex-end; margin-bottom: 24px; }
|
||||
.totals-box { width: 260px; }
|
||||
.totals-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 12px; }
|
||||
.totals-row.total { border-top: 2px solid #FFB7C5; margin-top: 6px; padding-top: 8px; font-size: 15px; font-weight: 800; color: #FFB7C5; }
|
||||
.bank-box { background: #FFF5F7; border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; }
|
||||
.bank-title { font-weight: 700; font-size: 12px; color: #374151; margin-bottom: 4px; }
|
||||
.bank-detail { font-size: 12px; color: #6B7280; }
|
||||
.notes { font-size: 11px; color: #9CA3AF; font-style: italic; }
|
||||
.footer { margin-top: 40px; text-align: center; font-size: 11px; color: #D1D5DB; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="header">
|
||||
<div>
|
||||
<div class="logo">🐱 KOL Manager</div>
|
||||
<div class="logo-sub">Personal Talent Assistant</div>
|
||||
</div>
|
||||
<div style="text-align:right">
|
||||
<div class="inv-number">{{ $invoice->invoice_number }}</div>
|
||||
<div style="margin-top:4px"><span class="badge">{{ $invoice->status->label() }}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="billing-grid">
|
||||
<div>
|
||||
<div class="section-title">Bill To</div>
|
||||
@if($invoice->client)
|
||||
<div class="billing-name">{{ $invoice->client->name }}</div>
|
||||
@if($invoice->client->company) <div class="billing-detail">{{ $invoice->client->company }}</div> @endif
|
||||
@if($invoice->client->email) <div class="billing-detail">{{ $invoice->client->email }}</div> @endif
|
||||
@if($invoice->client->full_address) <div class="billing-detail">{{ $invoice->client->full_address }}</div> @endif
|
||||
@else
|
||||
<div class="billing-detail">—</div>
|
||||
@endif
|
||||
</div>
|
||||
<div style="text-align:right">
|
||||
<div class="section-title">Invoice Details</div>
|
||||
<table class="detail-table">
|
||||
<tr><td>Issue Date</td><td>{{ $invoice->issue_date->format('d M Y') }}</td></tr>
|
||||
<tr><td>Due Date</td><td>{{ $invoice->due_date->format('d M Y') }}</td></tr>
|
||||
@if($invoice->paid_date)
|
||||
<tr><td>Paid Date</td><td>{{ $invoice->paid_date->format('d M Y') }}</td></tr>
|
||||
@endif
|
||||
<tr><td>Currency</td><td>{{ $invoice->currency }}</td></tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<table class="items">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Description</th>
|
||||
<th>Qty</th>
|
||||
<th style="text-align:right">Unit Price</th>
|
||||
<th>Total</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach($invoice->items as $item)
|
||||
<tr>
|
||||
<td>{{ $item->description }}</td>
|
||||
<td style="text-align:center">{{ $item->quantity }}</td>
|
||||
<td style="text-align:right">Rp {{ number_format($item->unit_price, 0, ',', '.') }}</td>
|
||||
<td style="text-align:right; font-weight:600">Rp {{ number_format($item->total, 0, ',', '.') }}</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="totals">
|
||||
<div class="totals-box">
|
||||
<div class="totals-row"><span>Subtotal</span><span>Rp {{ number_format($invoice->subtotal, 0, ',', '.') }}</span></div>
|
||||
<div class="totals-row"><span>Tax ({{ $invoice->tax_rate }}%)</span><span>Rp {{ number_format($invoice->tax_amount, 0, ',', '.') }}</span></div>
|
||||
<div class="totals-row total"><span>Total</span><span>{{ $invoice->formatted_total }}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if($invoice->bank_name)
|
||||
<div class="bank-box">
|
||||
<div class="bank-title">💳 Payment Information</div>
|
||||
<div class="bank-detail">{{ $invoice->bank_name }} · {{ $invoice->bank_account }} · a/n {{ $invoice->bank_holder }}</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if($invoice->notes)
|
||||
<div class="notes">{{ $invoice->notes }}</div>
|
||||
@endif
|
||||
|
||||
<div class="footer">Generated by KOL Manager · Thank you for the collaboration! 🐱</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
104
resources/views/invoices/show.blade.php
Normal file
104
resources/views/invoices/show.blade.php
Normal file
@@ -0,0 +1,104 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('title', $invoice->invoice_number)
|
||||
@section('page-title', 'Invoice ' . $invoice->invoice_number)
|
||||
@section('page-subtitle', $invoice->title)
|
||||
|
||||
@section('content')
|
||||
<div class="max-w-3xl mx-auto">
|
||||
<div class="flex gap-3 mb-6">
|
||||
<a href="{{ route('invoices.edit', $invoice) }}" class="btn-sakura">Edit</a>
|
||||
<a href="{{ route('invoices.pdf', $invoice) }}" target="_blank" class="btn btn-outline rounded-full text-pink-500 border-pink-300">📥 Download PDF</a>
|
||||
<form action="{{ route('invoices.destroy', $invoice) }}" method="POST" onsubmit="return confirm('Delete this invoice?')">
|
||||
@csrf @method('DELETE')
|
||||
<button class="btn btn-ghost rounded-full text-error">Delete</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="cat-card p-8">
|
||||
{{-- Invoice Header --}}
|
||||
<div class="flex justify-between items-start mb-8">
|
||||
<div>
|
||||
<div class="text-2xl font-extrabold text-pink-500 flex items-center gap-2">🐱 KOL Manager</div>
|
||||
<div class="text-sm text-gray-400 mt-1">Personal Talent Assistant</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<div class="text-2xl font-bold text-gray-800">{{ $invoice->invoice_number }}</div>
|
||||
<span class="badge {{ $invoice->status->badgeClass() }} mt-1">{{ $invoice->status->label() }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Billing Info --}}
|
||||
<div class="grid grid-cols-2 gap-8 mb-8">
|
||||
<div>
|
||||
<h4 class="text-xs font-bold text-gray-400 uppercase mb-2">Bill To</h4>
|
||||
@if($invoice->client)
|
||||
<div class="font-semibold text-gray-800">{{ $invoice->client->name }}</div>
|
||||
@if($invoice->client->company) <div class="text-sm text-gray-500">{{ $invoice->client->company }}</div> @endif
|
||||
@if($invoice->client->email) <div class="text-sm text-gray-500">{{ $invoice->client->email }}</div> @endif
|
||||
@if($invoice->client->full_address) <div class="text-sm text-gray-400">{{ $invoice->client->full_address }}</div> @endif
|
||||
@else
|
||||
<div class="text-gray-500 text-sm">No client</div>
|
||||
@endif
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<div class="text-xs font-bold text-gray-400 uppercase mb-2">Invoice Details</div>
|
||||
<div class="text-sm space-y-1">
|
||||
<div><span class="text-gray-400">Issue:</span> {{ $invoice->issue_date->format('d M Y') }}</div>
|
||||
<div><span class="text-gray-400">Due:</span> <span class="{{ $invoice->due_date->isPast() && $invoice->status->value !== 'paid' ? 'text-red-500 font-bold' : '' }}">{{ $invoice->due_date->format('d M Y') }}</span></div>
|
||||
@if($invoice->paid_date) <div><span class="text-gray-400">Paid:</span> {{ $invoice->paid_date->format('d M Y') }}</div> @endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Line Items --}}
|
||||
<table class="w-full mb-6">
|
||||
<thead class="bg-pink-50">
|
||||
<tr class="text-xs text-gray-500 uppercase">
|
||||
<th class="text-left py-3 px-4 rounded-l-2xl">Description</th>
|
||||
<th class="text-center py-3 px-4">Qty</th>
|
||||
<th class="text-right py-3 px-4">Unit Price</th>
|
||||
<th class="text-right py-3 px-4 rounded-r-2xl">Total</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach($invoice->items as $item)
|
||||
<tr class="border-b border-pink-50">
|
||||
<td class="py-3 px-4 text-sm text-gray-700">{{ $item->description }}</td>
|
||||
<td class="py-3 px-4 text-sm text-center text-gray-600">{{ $item->quantity }}</td>
|
||||
<td class="py-3 px-4 text-sm text-right text-gray-600">Rp {{ number_format($item->unit_price, 0, ',', '.') }}</td>
|
||||
<td class="py-3 px-4 text-sm text-right font-semibold text-gray-800">Rp {{ number_format($item->total, 0, ',', '.') }}</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{{-- Totals --}}
|
||||
<div class="flex justify-end mb-8">
|
||||
<div class="w-64 space-y-2 text-sm">
|
||||
<div class="flex justify-between text-gray-500">
|
||||
<span>Subtotal</span><span class="font-medium">Rp {{ number_format($invoice->subtotal, 0, ',', '.') }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between text-gray-500">
|
||||
<span>Tax ({{ $invoice->tax_rate }}%)</span><span class="font-medium">Rp {{ number_format($invoice->tax_amount, 0, ',', '.') }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between text-base font-bold text-pink-600 pt-2 border-t border-pink-200">
|
||||
<span>Total</span><span>{{ $invoice->formatted_total }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Bank Info --}}
|
||||
@if($invoice->bank_name)
|
||||
<div class="bg-pink-50 rounded-2xl p-4 text-sm">
|
||||
<div class="font-semibold text-gray-700 mb-2">💳 Payment Info</div>
|
||||
<div class="text-gray-600">{{ $invoice->bank_name }} · {{ $invoice->bank_account }} · {{ $invoice->bank_holder }}</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if($invoice->notes)
|
||||
<div class="mt-4 text-sm text-gray-500 italic">{{ $invoice->notes }}</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
Reference in New Issue
Block a user