feat: add notes management feature with CRUD operations

- Created Note model and controller for handling notes.
- Added routes for notes CRUD operations.
- Implemented notes index view with search and pinning functionality.
- Created migration for notes table with necessary fields.
- Developed event creation form with client and contract options.
This commit is contained in:
I-Fun
2026-04-02 23:24:38 +07:00
parent 5748b163b6
commit 1b90f730a6
25 changed files with 1524 additions and 390 deletions

View File

@@ -121,7 +121,7 @@
<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 (you receive)</span>
<span class="text-gray-700">Grand Total</span>
<span class="text-pink-600">Rp <span x-text="formatNum(total)"></span></span>
</div>
</div>

View File

@@ -116,7 +116,7 @@
<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 (you receive)</span>
<span class="text-gray-700">Grand Total</span>
<span class="text-pink-600">Rp <span x-text="formatNum(total)"></span></span>
</div>
</div>

View File

@@ -6,18 +6,7 @@
@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>
<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">

View File

@@ -2,119 +2,180 @@
<html lang="en">
<head>
<meta charset="UTF-8">
@php
$accent = $invoiceSettings->accent_color ?? '#FFB7C5';
$hex = ltrim($accent, '#');
$r = hexdec(substr($hex, 0, 2));
$g = hexdec(substr($hex, 2, 2));
$b = hexdec(substr($hex, 4, 2));
// 92% white + 8% accent → very light tint
$tint = sprintf('#%02X%02X%02X',
(int)(255 * 0.92 + $r * 0.08),
(int)(255 * 0.92 + $g * 0.08),
(int)(255 * 0.92 + $b * 0.08)
);
// 80% white + 20% accent → medium-light tint (for borders)
$tintMid = sprintf('#%02X%02X%02X',
(int)(255 * 0.80 + $r * 0.20),
(int)(255 * 0.80 + $g * 0.20),
(int)(255 * 0.80 + $b * 0.20)
);
@endphp
<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: {{ $invoiceSettings->accent_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; }
body { font-family: 'Helvetica', Arial, sans-serif; color: #374151; font-size: 13px; padding: 40px; }
/* ── Header ───────────────────────────────── */
.header-table { width: 100%; margin-bottom: 36px; }
.logo-name { font-size: 22px; font-weight: 900; color: {{ $accent }}; }
.logo-sub { font-size: 11px; color: #9CA3AF; margin-top: 3px; }
.inv-number { font-size: 22px; font-weight: 700; color: #1F2937; }
/* ── Billing grid ─────────────────────────── */
.billing-table { width: 100%; margin-bottom: 28px; }
.section-title { font-size: 10px; font-weight: 700; color: #9CA3AF;
text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
.billing-name { font-weight: 700; font-size: 15px; color: #111827; }
.billing-detail{ font-size: 12px; color: #6B7280; margin-top: 2px; }
.detail-table { font-size: 12px; width: auto; float: right; }
.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 {{ $invoiceSettings->accent_color ?? '#FFB7C5' }}; margin-top: 6px; padding-top: 8px; font-size: 15px; font-weight: 800; color: {{ $invoiceSettings->accent_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; }
.detail-table .lbl { color: #9CA3AF; padding-right: 16px; white-space: nowrap; }
.detail-table .val { font-weight: 600; text-align: right; white-space: nowrap; }
/* ── Line items ───────────────────────────── */
table.items { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
table.items thead td { background: {{ $tint }}; padding: 10px 12px;
font-size: 10px; font-weight: 700; color: #9CA3AF; text-transform: uppercase; }
table.items tbody td { padding: 10px 12px; border-bottom: 1px solid {{ $tintMid }}; font-size: 12px; }
.td-right { text-align: right; }
.td-center { text-align: center; }
/* ── Totals ───────────────────────────────── */
.totals-wrap { width: 100%; margin-bottom: 24px; }
.totals-inner { width: 260px; float: right; }
.totals-inner table { width: 100%; font-size: 12px; border-collapse: collapse; }
.totals-inner table td { padding: 4px 0; }
.totals-inner table td.amount { text-align: right; font-weight: 600; }
.totals-total td { border-top: 2px solid {{ $accent }};
padding-top: 8px !important; margin-top: 6px;
font-size: 15px; font-weight: 800; color: {{ $accent }}; }
.clearfix::after { content: ""; display: table; clear: both; }
/* ── Payment info ─────────────────────────── */
.bank-box { background: {{ $tint }}; border-radius: 10px;
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; }
.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 style="display:flex; align-items:center; gap:12px;">
@if($invoiceSettings->header_logo && file_exists(storage_path('app/public/' . $invoiceSettings->header_logo)))
<img src="{{ storage_path('app/public/' . $invoiceSettings->header_logo) }}"
style="width:52px; height:52px; object-fit:cover; border-radius:12px;" alt="Logo">
@endif
<div>
<div class="logo">{{ $invoiceSettings->header_name ?: 'KOL Manager' }}</div>
<div class="logo-sub">{{ $invoiceSettings->header_title ?: 'Personal Talent Assistant' }}</div>
</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>
{{-- ── Header ─────────────────────────────────────────────────── --}}
<table class="header-table" cellpadding="0" cellspacing="0">
<tr>
<td style="vertical-align:middle;">
<table cellpadding="0" cellspacing="0">
<tr>
@if($invoiceSettings->header_logo && file_exists(storage_path('app/public/' . $invoiceSettings->header_logo)))
<td style="vertical-align:middle; padding-right:12px; width:64px;">
<img src="{{ storage_path('app/public/' . $invoiceSettings->header_logo) }}"
style="width:52px; height:52px; object-fit:cover; border-radius:12px; display:block;" alt="Logo">
</td>
@endif
<td style="vertical-align:middle;">
<div class="logo-name">{{ $invoiceSettings->header_name ?: 'KOL Manager' }}</div>
<div class="logo-sub">{{ $invoiceSettings->header_title ?: 'Personal Talent Assistant' }}</div>
</td>
</tr>
</table>
</td>
<td style="text-align:right; vertical-align:top;">
<div class="inv-number">{{ $invoice->invoice_number }}</div>
</td>
</tr>
</table>
<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>
{{-- ── Billing Info ─────────────────────────────────────────────── --}}
<table class="billing-table" cellpadding="0" cellspacing="0">
<tr>
<td style="width:50%; vertical-align:top; padding-right:24px;">
<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
<tr><td>Currency</td><td>{{ $invoice->currency }}</td></tr>
</table>
</div>
</div>
</td>
<td style="width:50%; vertical-align:top; text-align:right;">
<div class="section-title">Invoice Details</div>
<table class="detail-table" cellpadding="0" cellspacing="0">
<tr><td class="lbl">Issue Date</td><td class="val">{{ $invoice->issue_date->format('d M Y') }}</td></tr>
<tr><td class="lbl">Due Date</td><td class="val">{{ $invoice->due_date->format('d M Y') }}</td></tr>
@if($invoice->paid_date)
<tr><td class="lbl">Paid Date</td><td class="val">{{ $invoice->paid_date->format('d M Y') }}</td></tr>
@endif
</table>
</td>
</tr>
</table>
<table class="items">
{{-- ── Line Items ───────────────────────────────────────────────── --}}
<table class="items" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>Description</th>
<th>Qty</th>
<th style="text-align:right">Unit Price</th>
<th>Total</th>
<td style="width:50%;">Description</td>
<td class="td-center" style="width:10%;">Qty</td>
<td class="td-right" style="width:20%;">Unit Price</td>
<td class="td-right" style="width:20%;">Total</td>
</tr>
</thead>
<tbody>
@foreach($invoice->items as $item)
<tr>
<td>
{{ $item->description }}
@if(!$item->is_taxable)
<span style="margin-left:6px; font-size:10px; background:#F3F4F6; color:#6B7280; padding:2px 8px; border-radius:10px; font-weight:600;">Non-Taxable</span>
@endif
</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>
<tr>
<td>
{{ $item->description }}
@if(!$item->is_taxable)
<span style="margin-left:6px; font-size:10px; background:#F3F4F6; color:#6B7280; padding:2px 8px; border-radius:10px; font-weight:600;">Non-Taxable</span>
@endif
</td>
<td class="td-center">{{ $item->quantity }}</td>
<td class="td-right">Rp {{ number_format($item->unit_price, 0, ',', '.') }}</td>
<td class="td-right" style="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>
@if($invoice->tax_rate > 0)
<div class="totals-row" style="color:#D97706"><span>Tax ({{ $invoice->tax_rate }}% — paid by client)</span><span>Rp {{ number_format($invoice->tax_amount, 0, ',', '.') }}</span></div>
@endif
<div class="totals-row total"><span>Total (you receive)</span><span>{{ $invoice->formatted_total }}</span></div>
{{-- ── Totals ───────────────────────────────────────────────────── --}}
<div class="totals-wrap clearfix">
<div class="totals-inner">
<table cellpadding="0" cellspacing="0">
<tr>
<td style="color:#6B7280;">Subtotal</td>
<td class="amount">Rp {{ number_format($invoice->subtotal, 0, ',', '.') }}</td>
</tr>
@if($invoice->tax_rate > 0)
<tr>
<td style="color:#D97706;">Tax ({{ $invoice->tax_rate }}% — paid by client)</td>
<td class="amount" style="color:#D97706;">Rp {{ number_format($invoice->tax_amount, 0, ',', '.') }}</td>
</tr>
@endif
<tr class="totals-total">
<td>Grand Total</td>
<td class="amount">{{ $invoice->formatted_total }}</td>
</tr>
</table>
</div>
</div>
{{-- ── Payment Info ──────────────────────────────────────────────── --}}
@if($invoice->bank_name)
<div class="bank-box">
<div class="bank-title">Payment Information</div>
@@ -130,7 +191,7 @@
<div class="notes">{{ $invoice->notes }}</div>
@endif
<div class="footer">Generated by KOL Manager · Thank you for the collaboration! 🐱</div>
<div class="footer">Generated by KOL Manager · Thank you for the collaboration!</div>
</body>
</html>

View File

@@ -61,29 +61,79 @@
<div class="cat-card p-5">
<h2 class="text-sm font-bold text-gray-700 mb-4 flex items-center gap-2">🎨 Invoice Header</h2>
@if($settings->header_logo)
<div class="mb-3 flex items-center gap-3">
<img src="{{ asset('storage/' . $settings->header_logo) }}"
alt="Logo" class="h-16 w-16 object-cover rounded-2xl border border-pink-100">
<div>
<p class="text-xs font-semibold text-gray-600">Current Logo</p>
<p class="text-xs text-gray-400 mt-0.5">Upload a new file to replace it</p>
</div>
</div>
@endif
{{-- Logo auto-upload (independent of main Save form) --}}
<div class="mb-4"
x-data="{
uploading: false,
errorMsg: '',
logoUrl: '{{ $settings->header_logo ? asset('storage/' . $settings->header_logo) : '' }}',
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div class="sm:col-span-2">
<label class="block text-xs font-semibold text-gray-600 mb-1">Logo / Profile Picture</label>
<input type="file" name="header_logo" accept="image/*"
async pickFile(input) {
if (!input.files.length) return;
this.uploading = true;
this.errorMsg = '';
const fd = new FormData();
fd.append('header_logo', input.files[0]);
fd.append('_token', document.querySelector('meta[name=csrf-token]').content);
try {
const res = await fetch('{{ route('invoice-settings.upload-logo') }}', { method: 'POST', body: fd });
const data = await res.json();
if (res.ok) {
this.logoUrl = data.url + '?t=' + Date.now();
} else {
this.errorMsg = data.message ?? 'Upload failed.';
}
} catch {
this.errorMsg = 'Network error. Please try again.';
}
this.uploading = false;
input.value = '';
},
async removeLogo() {
if (!confirm('Remove this logo?')) return;
const fd = new FormData();
fd.append('_token', document.querySelector('meta[name=csrf-token]').content);
fd.append('_method', 'DELETE');
await fetch('{{ route('invoice-settings.delete-logo') }}', { method: 'POST', body: fd });
this.logoUrl = '';
}
}">
{{-- Current logo preview --}}
<template x-if="logoUrl">
<div class="flex items-center gap-3 mb-3">
<img :src="logoUrl" alt="Logo"
class="h-16 w-16 object-cover rounded-2xl border border-pink-100 shrink-0">
<div class="flex-1 min-w-0">
<p class="text-xs font-semibold text-gray-600">Current Logo</p>
<p class="text-xs text-gray-400 mt-0.5">Choose a new file to replace it</p>
</div>
<button type="button" @click="removeLogo()"
class="text-xs px-3 py-1.5 rounded-full border border-red-200 text-red-400 hover:bg-red-50 shrink-0">
🗑️ Remove
</button>
</div>
</template>
<label class="block text-xs font-semibold text-gray-600 mb-1">Logo / Profile Picture</label>
<div class="relative">
<input type="file" accept="image/*"
@change="pickFile($event.target)"
class="w-full text-sm text-gray-600
file:mr-3 file:py-1.5 file:px-4
file:rounded-full file:border-0
file:text-xs file:font-semibold
file:bg-pink-50 file:text-pink-600
hover:file:bg-pink-100 cursor-pointer">
<p class="text-xs text-gray-400 mt-1">Max 2 MB. Shown at the top-left of your invoice.</p>
hover:file:bg-pink-100 cursor-pointer"
:disabled="uploading">
<span x-show="uploading" class="text-xs text-pink-500 mt-1 block">Uploading…</span>
<span x-show="errorMsg" x-text="errorMsg" class="text-xs text-red-500 mt-1 block"></span>
</div>
<p class="text-xs text-gray-400 mt-1">Max 2 MB. Uploads immediately on file selection.</p>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div>
<label class="block text-xs font-semibold text-gray-600 mb-1">Talent / Business Name</label>
<input type="text" name="header_name"
@@ -101,14 +151,6 @@
<div class="flex items-center gap-3 mt-1">
<input type="color" name="accent_color" x-model="color"
class="w-10 h-10 rounded-xl cursor-pointer border-2 border-pink-100 p-0.5">
<div class="flex gap-2 flex-wrap">
@foreach(['#FFB7C5','#B5EAD7','#FDFD96','#E8D5F5','#FFD5B8','#AEC6CF','#FF8FAD','#A8D8EA'] as $preset)
<button type="button"
class="w-7 h-7 rounded-full ring-2 ring-transparent hover:ring-gray-400 transition-all"
style="background:{{ $preset }}"
@click="color = '{{ $preset }}'"></button>
@endforeach
</div>
</div>
<p class="text-xs text-gray-400 mt-1.5">Applied to your invoice header name and totals.</p>
</div>

View File

@@ -63,9 +63,21 @@
</div>
{{-- Line Items --}}
@php
$accent = $invoiceSettings->accent_color ?? '#FFB7C5';
$hex = ltrim($accent, '#');
$r = hexdec(substr($hex, 0, 2));
$g = hexdec(substr($hex, 2, 2));
$b = hexdec(substr($hex, 4, 2));
$tint = sprintf('#%02X%02X%02X',
(int)(255 * 0.92 + $r * 0.08),
(int)(255 * 0.92 + $g * 0.08),
(int)(255 * 0.92 + $b * 0.08)
);
@endphp
<table class="w-full mb-6">
<thead class="bg-pink-50">
<tr class="text-xs text-gray-500 uppercase">
<thead>
<tr class="text-xs text-gray-500 uppercase" style="background:{{ $tint }}">
<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>
@@ -103,14 +115,14 @@
@endif
<div class="flex justify-between text-base font-bold pt-2 border-t border-pink-200"
style="color:{{ $invoiceSettings->accent_color ?? '#FFB7C5' }}">
<span>Total (you receive)</span><span>{{ $invoice->formatted_total }}</span>
<span>Grand 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="rounded-2xl p-4 text-sm" style="background:{{ $tint }}">
<div class="font-semibold text-gray-700 mb-2">💳 Payment Info</div>
<div class="text-gray-600">
{{ $invoice->bank_name }}