This commit is contained in:
@@ -62,7 +62,7 @@ const isDraft = invoice.status === 'draft';
|
||||
<a href="/dashboard/invoices" class="btn btn-ghost btn-xs btn-square">
|
||||
<Icon name="heroicons:arrow-left" class="w-4 h-4" />
|
||||
</a>
|
||||
<div class={`badge ${
|
||||
<div class={`badge badge-xs ${
|
||||
invoice.status === 'paid' || invoice.status === 'accepted' ? 'badge-success' :
|
||||
invoice.status === 'sent' ? 'badge-info' :
|
||||
invoice.status === 'void' || invoice.status === 'declined' ? 'badge-error' :
|
||||
@@ -71,15 +71,15 @@ const isDraft = invoice.status === 'draft';
|
||||
{invoice.status}
|
||||
</div>
|
||||
</div>
|
||||
<h1 class="text-3xl font-bold">{invoice.number}</h1>
|
||||
<h1 class="text-2xl font-extrabold tracking-tight">{invoice.number}</h1>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-2">
|
||||
{isDraft && (
|
||||
<form method="POST" action={`/api/invoices/${invoice.id}/status`}>
|
||||
<input type="hidden" name="status" value="sent" />
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<Icon name="heroicons:paper-airplane" class="w-5 h-5" />
|
||||
<button type="submit" class="btn btn-primary btn-sm">
|
||||
<Icon name="heroicons:paper-airplane" class="w-4 h-4" />
|
||||
Mark Sent
|
||||
</button>
|
||||
</form>
|
||||
@@ -87,8 +87,8 @@ const isDraft = invoice.status === 'draft';
|
||||
{(invoice.status !== 'paid' && invoice.status !== 'void' && invoice.type === 'invoice') && (
|
||||
<form method="POST" action={`/api/invoices/${invoice.id}/status`}>
|
||||
<input type="hidden" name="status" value="paid" />
|
||||
<button type="submit" class="btn btn-success">
|
||||
<Icon name="heroicons:check" class="w-5 h-5" />
|
||||
<button type="submit" class="btn btn-success btn-sm">
|
||||
<Icon name="heroicons:check" class="w-4 h-4" />
|
||||
Mark Paid
|
||||
</button>
|
||||
</form>
|
||||
@@ -96,25 +96,25 @@ const isDraft = invoice.status === 'draft';
|
||||
{(invoice.status !== 'accepted' && invoice.status !== 'declined' && invoice.status !== 'void' && invoice.type === 'quote') && (
|
||||
<form method="POST" action={`/api/invoices/${invoice.id}/status`}>
|
||||
<input type="hidden" name="status" value="accepted" />
|
||||
<button type="submit" class="btn btn-success">
|
||||
<Icon name="heroicons:check" class="w-5 h-5" />
|
||||
<button type="submit" class="btn btn-success btn-sm">
|
||||
<Icon name="heroicons:check" class="w-4 h-4" />
|
||||
Mark Accepted
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
{(invoice.type === 'quote' && invoice.status === 'accepted') && (
|
||||
<form method="POST" action={`/api/invoices/${invoice.id}/convert`}>
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<Icon name="heroicons:document-duplicate" class="w-5 h-5" />
|
||||
<button type="submit" class="btn btn-primary btn-sm">
|
||||
<Icon name="heroicons:document-duplicate" class="w-4 h-4" />
|
||||
Convert to Invoice
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
<div class="dropdown dropdown-end">
|
||||
<div role="button" tabindex="0" class="btn btn-square btn-ghost border border-base-300">
|
||||
<Icon name="heroicons:ellipsis-horizontal" class="w-6 h-6" />
|
||||
<div role="button" tabindex="0" class="btn btn-square btn-ghost btn-sm border border-base-200">
|
||||
<Icon name="heroicons:ellipsis-horizontal" class="w-4 h-4" />
|
||||
</div>
|
||||
<ul tabindex="0" class="dropdown-content z-1 menu p-2 shadow bg-base-100 rounded-box w-52 border border-base-200">
|
||||
<ul tabindex="0" class="dropdown-content z-1 menu p-2 bg-base-100 rounded-box w-52 border border-base-200">
|
||||
<li>
|
||||
<a href={`/dashboard/invoices/${invoice.id}/edit`}>
|
||||
<Icon name="heroicons:pencil-square" class="w-4 h-4" />
|
||||
@@ -153,7 +153,7 @@ const isDraft = invoice.status === 'draft';
|
||||
</div>
|
||||
|
||||
<!-- Invoice Paper -->
|
||||
<div class="card bg-base-100 shadow-xl border border-base-200 print:shadow-none print:border-none">
|
||||
<div class="card card-border bg-base-100 print:shadow-none print:border-none">
|
||||
<div class="card-body p-8 sm:p-12">
|
||||
<!-- Header Section -->
|
||||
<div class="flex flex-col sm:flex-row justify-between gap-8 mb-12">
|
||||
@@ -264,20 +264,20 @@ const isDraft = invoice.status === 'draft';
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form method="POST" action={`/api/invoices/${invoice.id}/items/add`} class="bg-base-200/50 p-4 rounded-lg mb-8 border border-base-300/50">
|
||||
<h4 class="text-sm font-bold mb-3">Add Item</h4>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-12 gap-4 items-end">
|
||||
<form method="POST" action={`/api/invoices/${invoice.id}/items/add`} class="bg-base-200/50 p-4 rounded-lg mb-8 border border-base-200">
|
||||
<h4 class="text-xs font-semibold mb-3">Add Item</h4>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-12 gap-3 items-end">
|
||||
<div class="sm:col-span-6">
|
||||
<label class="label text-xs pt-0" for="item-description">Description</label>
|
||||
<input type="text" id="item-description" name="description" class="input input-sm input-bordered w-full" required placeholder="Service or product..." />
|
||||
<label class="text-xs text-base-content/60" for="item-description">Description</label>
|
||||
<input type="text" id="item-description" name="description" class="input input-sm w-full" required placeholder="Service or product..." />
|
||||
</div>
|
||||
<div class="sm:col-span-2">
|
||||
<label class="label text-xs pt-0" for="item-quantity">Qty</label>
|
||||
<input type="number" id="item-quantity" name="quantity" step="0.01" class="input input-sm input-bordered w-full" required value="1" />
|
||||
<label class="text-xs text-base-content/60" for="item-quantity">Qty</label>
|
||||
<input type="number" id="item-quantity" name="quantity" step="0.01" class="input input-sm w-full" required value="1" />
|
||||
</div>
|
||||
<div class="sm:col-span-3">
|
||||
<label class="label text-xs pt-0" for="item-unit-price">Unit Price ({invoice.currency})</label>
|
||||
<input type="number" id="item-unit-price" name="unitPrice" step="0.01" class="input input-sm input-bordered w-full" required placeholder="0.00" />
|
||||
<label class="text-xs text-base-content/60" for="item-unit-price">Unit Price ({invoice.currency})</label>
|
||||
<input type="number" id="item-unit-price" name="unitPrice" step="0.01" class="input input-sm w-full" required placeholder="0.00" />
|
||||
</div>
|
||||
<div class="sm:col-span-1">
|
||||
<button type="submit" class="btn btn-sm btn-primary w-full">
|
||||
@@ -346,13 +346,11 @@ const isDraft = invoice.status === 'draft';
|
||||
<!-- Tax Modal -->
|
||||
<dialog id="tax_modal" class="modal">
|
||||
<div class="modal-box">
|
||||
<h3 class="font-bold text-lg">Update Tax Rate</h3>
|
||||
<p class="py-4">Enter the tax percentage to apply to the subtotal.</p>
|
||||
<h3 class="font-semibold text-base">Update Tax Rate</h3>
|
||||
<p class="py-3 text-sm text-base-content/60">Enter the tax percentage to apply to the subtotal.</p>
|
||||
<form method="POST" action={`/api/invoices/${invoice.id}/update-tax`}>
|
||||
<div class="form-control mb-6">
|
||||
<label class="label" for="tax-rate">
|
||||
Tax Rate (%)
|
||||
</label>
|
||||
<fieldset class="fieldset mb-4">
|
||||
<legend class="fieldset-legend text-xs">Tax Rate (%)</legend>
|
||||
<input
|
||||
type="number"
|
||||
id="tax-rate"
|
||||
@@ -360,14 +358,14 @@ const isDraft = invoice.status === 'draft';
|
||||
step="0.01"
|
||||
min="0"
|
||||
max="100"
|
||||
class="input input-bordered w-full"
|
||||
class="input w-full"
|
||||
value={invoice.taxRate ?? 0}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</fieldset>
|
||||
<div class="modal-action">
|
||||
<button type="button" class="btn" onclick="document.getElementById('tax_modal').close()">Cancel</button>
|
||||
<button type="submit" class="btn btn-primary">Update</button>
|
||||
<button type="button" class="btn btn-sm" onclick="document.getElementById('tax_modal').close()">Cancel</button>
|
||||
<button type="submit" class="btn btn-primary btn-sm">Update</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@@ -379,30 +377,28 @@ const isDraft = invoice.status === 'draft';
|
||||
<!-- Import Time Modal -->
|
||||
<dialog id="import_time_modal" class="modal">
|
||||
<div class="modal-box">
|
||||
<h3 class="font-bold text-lg">Import Time Entries</h3>
|
||||
<p class="py-4">Import billable time entries for this client.</p>
|
||||
<h3 class="font-semibold text-base">Import Time Entries</h3>
|
||||
<p class="py-3 text-sm text-base-content/60">Import billable time entries for this client.</p>
|
||||
<form method="POST" action={`/api/invoices/${invoice.id}/import-time`}>
|
||||
<div class="grid grid-cols-2 gap-4 mb-4">
|
||||
<div class="form-control">
|
||||
<label class="label" for="start-date">Start Date</label>
|
||||
<input type="date" id="start-date" name="startDate" class="input input-bordered" required />
|
||||
</div>
|
||||
<div class="form-control">
|
||||
<label class="label" for="end-date">End Date</label>
|
||||
<input type="date" id="end-date" name="endDate" class="input input-bordered" required />
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-3 mb-3">
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend text-xs">Start Date</legend>
|
||||
<input type="date" id="start-date" name="startDate" class="input" required />
|
||||
</fieldset>
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend text-xs">End Date</legend>
|
||||
<input type="date" id="end-date" name="endDate" class="input" required />
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<div class="form-control mb-6">
|
||||
<label class="label cursor-pointer justify-start gap-4">
|
||||
<input type="checkbox" name="groupByDay" class="checkbox" />
|
||||
<span class="label-text">Group entries by day</span>
|
||||
</label>
|
||||
</div>
|
||||
<label class="label cursor-pointer justify-start gap-3 mb-4">
|
||||
<input type="checkbox" name="groupByDay" class="checkbox checkbox-sm" />
|
||||
<span class="text-sm">Group entries by day</span>
|
||||
</label>
|
||||
|
||||
<div class="modal-action">
|
||||
<button type="button" class="btn" onclick="document.getElementById('import_time_modal').close()">Cancel</button>
|
||||
<button type="submit" class="btn btn-primary">Import</button>
|
||||
<button type="button" class="btn btn-sm" onclick="document.getElementById('import_time_modal').close()">Cancel</button>
|
||||
<button type="submit" class="btn btn-primary btn-sm">Import</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -47,83 +47,73 @@ const discountValueDisplay = invoice.discountType === 'fixed'
|
||||
<DashboardLayout title={`Edit ${invoice.number} - Chronus`}>
|
||||
<div class="max-w-3xl mx-auto">
|
||||
<div class="mb-6">
|
||||
<a href={`/dashboard/invoices/${invoice.id}`} class="btn btn-ghost btn-sm gap-2 pl-0 hover:bg-transparent text-base-content/60">
|
||||
<a href={`/dashboard/invoices/${invoice.id}`} class="btn btn-ghost btn-xs gap-2 pl-0 hover:bg-transparent text-base-content/60">
|
||||
<Icon name="heroicons:arrow-left" class="w-4 h-4" />
|
||||
Back to Invoice
|
||||
</a>
|
||||
<h1 class="text-3xl font-bold mt-2">Edit Details</h1>
|
||||
<h1 class="text-2xl font-extrabold tracking-tight mt-2">Edit Details</h1>
|
||||
</div>
|
||||
|
||||
<form method="POST" action={`/api/invoices/${invoice.id}/update`} class="card bg-base-100 shadow-xl border border-base-200">
|
||||
<div class="card-body gap-6">
|
||||
<form method="POST" action={`/api/invoices/${invoice.id}/update`} class="card card-border bg-base-100">
|
||||
<div class="card-body p-4 gap-3">
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
<!-- Number -->
|
||||
<div class="form-control">
|
||||
<label class="label font-semibold" for="invoice-number">
|
||||
Number
|
||||
</label>
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend text-xs">Number</legend>
|
||||
<input
|
||||
type="text"
|
||||
id="invoice-number"
|
||||
name="number"
|
||||
class="input input-bordered font-mono"
|
||||
class="input font-mono"
|
||||
value={invoice.number}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<!-- Currency -->
|
||||
<div class="form-control">
|
||||
<label class="label font-semibold" for="invoice-currency">
|
||||
Currency
|
||||
</label>
|
||||
<select id="invoice-currency" name="currency" class="select select-bordered w-full">
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend text-xs">Currency</legend>
|
||||
<select id="invoice-currency" name="currency" class="select w-full">
|
||||
<option value="USD" selected={invoice.currency === 'USD'}>USD ($)</option>
|
||||
<option value="EUR" selected={invoice.currency === 'EUR'}>EUR (€)</option>
|
||||
<option value="GBP" selected={invoice.currency === 'GBP'}>GBP (£)</option>
|
||||
<option value="CAD" selected={invoice.currency === 'CAD'}>CAD ($)</option>
|
||||
<option value="AUD" selected={invoice.currency === 'AUD'}>AUD ($)</option>
|
||||
</select>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<!-- Issue Date -->
|
||||
<div class="form-control">
|
||||
<label class="label font-semibold" for="invoice-issue-date">
|
||||
Issue Date
|
||||
</label>
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend text-xs">Issue Date</legend>
|
||||
<input
|
||||
type="date"
|
||||
id="invoice-issue-date"
|
||||
name="issueDate"
|
||||
class="input input-bordered"
|
||||
class="input"
|
||||
value={issueDateStr}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<!-- Due Date -->
|
||||
<div class="form-control">
|
||||
<label class="label font-semibold" for="invoice-due-date">
|
||||
{invoice.type === 'quote' ? 'Valid Until' : 'Due Date'}
|
||||
</label>
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend text-xs">{invoice.type === 'quote' ? 'Valid Until' : 'Due Date'}</legend>
|
||||
<input
|
||||
type="date"
|
||||
id="invoice-due-date"
|
||||
name="dueDate"
|
||||
class="input input-bordered"
|
||||
class="input"
|
||||
value={dueDateStr}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<!-- Discount -->
|
||||
<div class="form-control">
|
||||
<label class="label font-semibold" for="invoice-discount-type">
|
||||
Discount
|
||||
</label>
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend text-xs">Discount</legend>
|
||||
<div class="join w-full">
|
||||
<select id="invoice-discount-type" name="discountType" class="select select-bordered join-item">
|
||||
<select id="invoice-discount-type" name="discountType" class="select join-item">
|
||||
<option value="percentage" selected={!invoice.discountType || invoice.discountType === 'percentage'}>%</option>
|
||||
<option value="fixed" selected={invoice.discountType === 'fixed'}>Fixed</option>
|
||||
</select>
|
||||
@@ -133,48 +123,44 @@ const discountValueDisplay = invoice.discountType === 'fixed'
|
||||
name="discountValue"
|
||||
step="0.01"
|
||||
min="0"
|
||||
class="input input-bordered join-item w-full"
|
||||
class="input join-item w-full"
|
||||
value={discountValueDisplay}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<!-- Tax Rate -->
|
||||
<div class="form-control">
|
||||
<label class="label font-semibold" for="invoice-tax-rate">
|
||||
Tax Rate (%)
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
id="invoice-tax-rate"
|
||||
name="taxRate"
|
||||
step="0.01"
|
||||
min="0"
|
||||
max="100"
|
||||
class="input input-bordered"
|
||||
value={invoice.taxRate}
|
||||
/>
|
||||
</div>
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend text-xs">Tax Rate (%)</legend>
|
||||
<input
|
||||
type="number"
|
||||
id="invoice-tax-rate"
|
||||
name="taxRate"
|
||||
step="0.01"
|
||||
min="0"
|
||||
max="100"
|
||||
class="input"
|
||||
value={invoice.taxRate}
|
||||
/>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<!-- Notes -->
|
||||
<div class="form-control flex flex-col">
|
||||
<label class="label font-semibold" for="invoice-notes">
|
||||
Notes / Terms
|
||||
</label>
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend text-xs">Notes / Terms</legend>
|
||||
<textarea
|
||||
id="invoice-notes"
|
||||
name="notes"
|
||||
class="textarea textarea-bordered h-32 font-mono text-sm"
|
||||
class="textarea h-32 font-mono text-sm"
|
||||
placeholder="Payment terms, bank details, or thank you notes..."
|
||||
>{invoice.notes}</textarea>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<div class="divider"></div>
|
||||
<div class="divider my-0"></div>
|
||||
|
||||
<div class="card-actions justify-end">
|
||||
<a href={`/dashboard/invoices/${invoice.id}`} class="btn btn-ghost">Cancel</a>
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<div class="flex justify-end gap-2">
|
||||
<a href={`/dashboard/invoices/${invoice.id}`} class="btn btn-ghost btn-sm">Cancel</a>
|
||||
<button type="submit" class="btn btn-primary btn-sm">
|
||||
Save Changes
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -19,7 +19,8 @@ const currentTeamIdResolved = userMembership.organizationId;
|
||||
// Get filter parameters
|
||||
const currentYear = new Date().getFullYear();
|
||||
const yearParam = Astro.url.searchParams.get('year');
|
||||
const selectedYear = yearParam === 'current' || !yearParam ? 'current' : parseInt(yearParam);
|
||||
const selectedYear: string | number = yearParam === 'current' || !yearParam ? 'current' : parseInt(yearParam);
|
||||
const yearNum = typeof selectedYear === 'number' ? selectedYear : currentYear;
|
||||
const selectedType = Astro.url.searchParams.get('type') || 'all';
|
||||
const selectedStatus = Astro.url.searchParams.get('status') || 'all';
|
||||
const sortBy = Astro.url.searchParams.get('sort') || 'date-desc';
|
||||
@@ -43,8 +44,8 @@ if (!availableYears.includes(currentYear)) {
|
||||
}
|
||||
|
||||
// Filter by year
|
||||
const yearStart = selectedYear === 'current' ? new Date(currentYear, 0, 1) : new Date(selectedYear, 0, 1);
|
||||
const yearEnd = selectedYear === 'current' ? new Date() : new Date(selectedYear, 11, 31, 23, 59, 59);
|
||||
const yearStart = new Date(yearNum, 0, 1);
|
||||
const yearEnd = selectedYear === 'current' ? new Date() : new Date(yearNum, 11, 31, 23, 59, 59);
|
||||
|
||||
let filteredInvoices = allInvoicesRaw.filter(i => {
|
||||
const issueDate = i.invoice.issueDate;
|
||||
@@ -103,81 +104,67 @@ const getStatusColor = (status: string) => {
|
||||
<DashboardLayout title="Invoices & Quotes - Chronus">
|
||||
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-6">
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold">Invoices & Quotes</h1>
|
||||
<p class="text-base-content/60 mt-1">Manage your billing and estimates</p>
|
||||
<h1 class="text-2xl font-extrabold tracking-tight">Invoices & Quotes</h1>
|
||||
<p class="text-base-content/60 text-sm mt-1">Manage your billing and estimates</p>
|
||||
</div>
|
||||
<a href="/dashboard/invoices/new" class="btn btn-primary">
|
||||
<Icon name="heroicons:plus" class="w-5 h-5" />
|
||||
<a href="/dashboard/invoices/new" class="btn btn-primary btn-sm">
|
||||
<Icon name="heroicons:plus" class="w-4 h-4" />
|
||||
Create New
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
|
||||
<div class="stats shadow bg-base-100 border border-base-200">
|
||||
<StatCard
|
||||
title="Total Invoices"
|
||||
value={String(yearInvoices.filter(i => i.invoice.type === 'invoice').length)}
|
||||
description={selectedYear === 'current' ? `${currentYear} (YTD)` : selectedYear}
|
||||
icon="heroicons:document-text"
|
||||
color="text-primary"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="stats shadow bg-base-100 border border-base-200">
|
||||
<StatCard
|
||||
title="Open Quotes"
|
||||
value={String(yearInvoices.filter(i => i.invoice.type === 'quote' && i.invoice.status === 'sent').length)}
|
||||
description="Waiting for approval"
|
||||
icon="heroicons:clipboard-document-list"
|
||||
color="text-secondary"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="stats shadow bg-base-100 border border-base-200">
|
||||
<StatCard
|
||||
title="Total Revenue"
|
||||
value={formatCurrency(yearInvoices
|
||||
.filter(i => i.invoice.type === 'invoice' && i.invoice.status === 'paid')
|
||||
.reduce((acc, curr) => acc + curr.invoice.total, 0), 'USD')}
|
||||
description={`Paid invoices (${selectedYear === 'current' ? `${currentYear} YTD` : selectedYear})`}
|
||||
icon="heroicons:currency-dollar"
|
||||
color="text-success"
|
||||
/>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-3 mb-6">
|
||||
<StatCard
|
||||
title="Total Invoices"
|
||||
value={String(yearInvoices.filter(i => i.invoice.type === 'invoice').length)}
|
||||
description={selectedYear === 'current' ? `${currentYear} (YTD)` : String(selectedYear)}
|
||||
icon="heroicons:document-text"
|
||||
color="text-primary"
|
||||
/>
|
||||
<StatCard
|
||||
title="Open Quotes"
|
||||
value={String(yearInvoices.filter(i => i.invoice.type === 'quote' && i.invoice.status === 'sent').length)}
|
||||
description="Waiting for approval"
|
||||
icon="heroicons:clipboard-document-list"
|
||||
color="text-secondary"
|
||||
/>
|
||||
<StatCard
|
||||
title="Total Revenue"
|
||||
value={formatCurrency(yearInvoices
|
||||
.filter(i => i.invoice.type === 'invoice' && i.invoice.status === 'paid')
|
||||
.reduce((acc, curr) => acc + curr.invoice.total, 0), 'USD')}
|
||||
description={`Paid invoices (${selectedYear === 'current' ? `${currentYear} YTD` : selectedYear})`}
|
||||
icon="heroicons:currency-dollar"
|
||||
color="text-success"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Filters -->
|
||||
<div class="card bg-base-100 shadow-xl border border-base-200 mb-6">
|
||||
<div class="card-body">
|
||||
<form method="GET" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text font-medium">Year</span>
|
||||
</label>
|
||||
<select name="year" class="select select-bordered w-full" onchange="this.form.submit()">
|
||||
<div class="card card-border bg-base-100 mb-6">
|
||||
<div class="card-body p-4">
|
||||
<form method="GET" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend text-xs">Year</legend>
|
||||
<select name="year" class="select w-full" onchange="this.form.submit()">
|
||||
<option value="current" selected={selectedYear === 'current'}>Current Year to Date ({currentYear})</option>
|
||||
{availableYears.map(year => (
|
||||
<option value={year} selected={year === selectedYear}>{year}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text font-medium">Type</span>
|
||||
</label>
|
||||
<select name="type" class="select select-bordered w-full" onchange="this.form.submit()">
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend text-xs">Type</legend>
|
||||
<select name="type" class="select w-full" onchange="this.form.submit()">
|
||||
<option value="all" selected={selectedType === 'all'}>All Types</option>
|
||||
<option value="invoice" selected={selectedType === 'invoice'}>Invoices</option>
|
||||
<option value="quote" selected={selectedType === 'quote'}>Quotes</option>
|
||||
</select>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text font-medium">Status</span>
|
||||
</label>
|
||||
<select name="status" class="select select-bordered w-full" onchange="this.form.submit()">
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend text-xs">Status</legend>
|
||||
<select name="status" class="select w-full" onchange="this.form.submit()">
|
||||
<option value="all" selected={selectedStatus === 'all'}>All Statuses</option>
|
||||
<option value="draft" selected={selectedStatus === 'draft'}>Draft</option>
|
||||
<option value="sent" selected={selectedStatus === 'sent'}>Sent</option>
|
||||
@@ -186,13 +173,11 @@ const getStatusColor = (status: string) => {
|
||||
<option value="declined" selected={selectedStatus === 'declined'}>Declined</option>
|
||||
<option value="void" selected={selectedStatus === 'void'}>Void</option>
|
||||
</select>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text font-medium">Sort By</span>
|
||||
</label>
|
||||
<select name="sort" class="select select-bordered w-full" onchange="this.form.submit()">
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend text-xs">Sort By</legend>
|
||||
<select name="sort" class="select w-full" onchange="this.form.submit()">
|
||||
<option value="date-desc" selected={sortBy === 'date-desc'}>Date (Newest First)</option>
|
||||
<option value="date-asc" selected={sortBy === 'date-asc'}>Date (Oldest First)</option>
|
||||
<option value="amount-desc" selected={sortBy === 'amount-desc'}>Amount (High to Low)</option>
|
||||
@@ -200,13 +185,13 @@ const getStatusColor = (status: string) => {
|
||||
<option value="number-desc" selected={sortBy === 'number-desc'}>Number (Z-A)</option>
|
||||
<option value="number-asc" selected={sortBy === 'number-asc'}>Number (A-Z)</option>
|
||||
</select>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
|
||||
{(selectedYear !== 'current' || selectedType !== 'all' || selectedStatus !== 'all' || sortBy !== 'date-desc') && (
|
||||
<div class="mt-4">
|
||||
<a href="/dashboard/invoices" class="btn btn-ghost btn-sm">
|
||||
<Icon name="heroicons:x-mark" class="w-4 h-4" />
|
||||
<div class="mt-3">
|
||||
<a href="/dashboard/invoices" class="btn btn-ghost btn-xs">
|
||||
<Icon name="heroicons:x-mark" class="w-3 h-3" />
|
||||
Clear Filters
|
||||
</a>
|
||||
</div>
|
||||
@@ -214,19 +199,19 @@ const getStatusColor = (status: string) => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card bg-base-100 shadow-xl border border-base-200">
|
||||
<div class="card card-border bg-base-100">
|
||||
<div class="card-body p-0">
|
||||
<div class="px-6 py-4 border-b border-base-200 bg-base-200/30">
|
||||
<p class="text-sm text-base-content/70">
|
||||
<div class="px-4 py-3 border-b border-base-200">
|
||||
<p class="text-xs text-base-content/50">
|
||||
Showing <span class="font-semibold text-base-content">{allInvoices.length}</span>
|
||||
{allInvoices.length === 1 ? 'result' : 'results'}
|
||||
{selectedYear === 'current' ? ` for ${currentYear} (year to date)` : ` for ${selectedYear}`}
|
||||
</p>
|
||||
</div>
|
||||
<div class="overflow-x-auto md:overflow-visible pb-32 md:pb-0">
|
||||
<table class="table table-zebra">
|
||||
<table class="table table-sm">
|
||||
<thead>
|
||||
<tr class="bg-base-200/50">
|
||||
<tr>
|
||||
<th>Number</th>
|
||||
<th>Client</th>
|
||||
<th>Date</th>
|
||||
@@ -240,14 +225,14 @@ const getStatusColor = (status: string) => {
|
||||
<tbody>
|
||||
{allInvoices.length === 0 ? (
|
||||
<tr>
|
||||
<td colspan="8" class="text-center py-8 text-base-content/60">
|
||||
<td colspan="8" class="text-center py-8 text-base-content/50 text-sm">
|
||||
No invoices or quotes found. Create one to get started.
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
allInvoices.map(({ invoice, client }) => (
|
||||
<tr class="hover:bg-base-200/50 transition-colors">
|
||||
<td class="font-mono font-medium">
|
||||
<tr class="hover">
|
||||
<td class="font-mono font-medium text-sm">
|
||||
<a href={`/dashboard/invoices/${invoice.id}`} class="link link-hover text-primary">
|
||||
{invoice.number}
|
||||
</a>
|
||||
@@ -265,7 +250,7 @@ const getStatusColor = (status: string) => {
|
||||
{formatCurrency(invoice.total, invoice.currency)}
|
||||
</td>
|
||||
<td>
|
||||
<div class={`badge ${getStatusColor(invoice.status)} badge-sm uppercase font-bold tracking-wider`}>
|
||||
<div class={`badge ${getStatusColor(invoice.status)} badge-xs uppercase font-bold tracking-wider`}>
|
||||
{invoice.status}
|
||||
</div>
|
||||
</td>
|
||||
@@ -274,10 +259,10 @@ const getStatusColor = (status: string) => {
|
||||
</td>
|
||||
<td class="text-right">
|
||||
<div class="dropdown dropdown-end">
|
||||
<div role="button" tabindex="0" class="btn btn-ghost btn-sm btn-square">
|
||||
<Icon name="heroicons:ellipsis-vertical" class="w-5 h-5" />
|
||||
<div role="button" tabindex="0" class="btn btn-ghost btn-xs btn-square">
|
||||
<Icon name="heroicons:ellipsis-vertical" class="w-4 h-4" />
|
||||
</div>
|
||||
<ul tabindex="0" class="dropdown-content menu p-2 shadow-lg bg-base-100 rounded-box w-52 border border-base-200 z-100">
|
||||
<ul tabindex="0" class="dropdown-content menu p-2 bg-base-100 rounded-box w-52 border border-base-200 z-100">
|
||||
<li>
|
||||
<a href={`/dashboard/invoices/${invoice.id}`}>
|
||||
<Icon name="heroicons:eye" class="w-4 h-4" />
|
||||
|
||||
@@ -80,124 +80,112 @@ const defaultDueDate = nextMonth.toISOString().split('T')[0];
|
||||
<DashboardLayout title="New Document - Chronus">
|
||||
<div class="max-w-3xl mx-auto">
|
||||
<div class="mb-6">
|
||||
<a href="/dashboard/invoices" class="btn btn-ghost btn-sm gap-2 pl-0 hover:bg-transparent text-base-content/60">
|
||||
<a href="/dashboard/invoices" class="btn btn-ghost btn-xs gap-2 pl-0 hover:bg-transparent text-base-content/60">
|
||||
<Icon name="heroicons:arrow-left" class="w-4 h-4" />
|
||||
Back to Invoices
|
||||
</a>
|
||||
<h1 class="text-3xl font-bold mt-2">Create New Document</h1>
|
||||
<h1 class="text-2xl font-extrabold tracking-tight mt-2">Create New Document</h1>
|
||||
</div>
|
||||
|
||||
{teamClients.length === 0 ? (
|
||||
<div role="alert" class="alert alert-warning shadow-lg">
|
||||
<Icon name="heroicons:exclamation-triangle" class="w-6 h-6" />
|
||||
<div role="alert" class="alert alert-warning">
|
||||
<Icon name="heroicons:exclamation-triangle" class="w-5 h-5" />
|
||||
<div>
|
||||
<h3 class="font-bold">No Clients Found</h3>
|
||||
<h3 class="font-semibold text-sm">No Clients Found</h3>
|
||||
<div class="text-xs">You need to add a client before you can create an invoice or quote.</div>
|
||||
</div>
|
||||
<a href="/dashboard/clients" class="btn btn-sm">Manage Clients</a>
|
||||
</div>
|
||||
) : (
|
||||
<form method="POST" action="/api/invoices/create" class="card bg-base-100 shadow-xl border border-base-200">
|
||||
<div class="card-body gap-6">
|
||||
<form method="POST" action="/api/invoices/create" class="card card-border bg-base-100">
|
||||
<div class="card-body p-4 gap-4">
|
||||
|
||||
<!-- Document Type -->
|
||||
<div class="form-control">
|
||||
<label class="label font-semibold" for="document-type-invoice">
|
||||
Document Type
|
||||
</label>
|
||||
<div class="flex gap-4">
|
||||
<label class="label cursor-pointer justify-start gap-2 border border-base-300 rounded-lg p-3 flex-1 hover:border-primary has-checked:border-primary has-checked:bg-primary/5 transition-all font-medium" for="document-type-invoice">
|
||||
<input type="radio" id="document-type-invoice" name="type" value="invoice" class="radio radio-primary" checked />
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend text-xs">Document Type</legend>
|
||||
<div class="flex gap-3">
|
||||
<label class="label cursor-pointer justify-start gap-2 border border-base-200 rounded-lg p-3 flex-1 hover:border-primary has-checked:border-primary has-checked:bg-primary/5 transition-all font-medium text-sm" for="document-type-invoice">
|
||||
<input type="radio" id="document-type-invoice" name="type" value="invoice" class="radio radio-primary radio-sm" checked />
|
||||
Invoice
|
||||
</label>
|
||||
<label class="label cursor-pointer justify-start gap-2 border border-base-300 rounded-lg p-3 flex-1 hover:border-primary has-checked:border-primary has-checked:bg-primary/5 transition-all font-medium" for="document-type-quote">
|
||||
<input type="radio" id="document-type-quote" name="type" value="quote" class="radio radio-primary" />
|
||||
<label class="label cursor-pointer justify-start gap-2 border border-base-200 rounded-lg p-3 flex-1 hover:border-primary has-checked:border-primary has-checked:bg-primary/5 transition-all font-medium text-sm" for="document-type-quote">
|
||||
<input type="radio" id="document-type-quote" name="type" value="quote" class="radio radio-primary radio-sm" />
|
||||
Quote / Estimate
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
<!-- Client -->
|
||||
<div class="form-control">
|
||||
<label class="label font-semibold" for="invoice-client">
|
||||
Client
|
||||
</label>
|
||||
<select id="invoice-client" name="clientId" class="select select-bordered w-full" required>
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend text-xs">Client</legend>
|
||||
<select id="invoice-client" name="clientId" class="select w-full" required>
|
||||
<option value="" disabled selected>Select a client...</option>
|
||||
{teamClients.map(client => (
|
||||
<option value={client.id}>{client.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<!-- Number -->
|
||||
<div class="form-control">
|
||||
<label class="label font-semibold" for="documentNumber">
|
||||
Number
|
||||
</label>
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend text-xs">Number</legend>
|
||||
<input
|
||||
type="text"
|
||||
name="number"
|
||||
id="documentNumber"
|
||||
class="input input-bordered font-mono"
|
||||
class="input font-mono"
|
||||
value={nextInvoiceNumber}
|
||||
data-invoice-number={nextInvoiceNumber}
|
||||
data-quote-number={nextQuoteNumber}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<!-- Issue Date -->
|
||||
<div class="form-control">
|
||||
<label class="label font-semibold" for="invoice-issue-date">
|
||||
Issue Date
|
||||
</label>
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend text-xs">Issue Date</legend>
|
||||
<input
|
||||
type="date"
|
||||
id="invoice-issue-date"
|
||||
name="issueDate"
|
||||
class="input input-bordered"
|
||||
class="input"
|
||||
value={today}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<!-- Due Date -->
|
||||
<div class="form-control">
|
||||
<label class="label font-semibold" for="invoice-due-date" id="dueDateLabel">
|
||||
Due Date
|
||||
</label>
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend text-xs" id="dueDateLabel">Due Date</legend>
|
||||
<input
|
||||
type="date"
|
||||
id="invoice-due-date"
|
||||
name="dueDate"
|
||||
class="input input-bordered"
|
||||
class="input"
|
||||
value={defaultDueDate}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<!-- Currency -->
|
||||
<div class="form-control">
|
||||
<label class="label font-semibold" for="invoice-currency">
|
||||
Currency
|
||||
</label>
|
||||
<select id="invoice-currency" name="currency" class="select select-bordered w-full">
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend text-xs">Currency</legend>
|
||||
<select id="invoice-currency" name="currency" class="select w-full">
|
||||
<option value="USD" selected={currentOrganization?.defaultCurrency === 'USD'}>USD ($)</option>
|
||||
<option value="EUR" selected={currentOrganization?.defaultCurrency === 'EUR'}>EUR (€)</option>
|
||||
<option value="GBP" selected={currentOrganization?.defaultCurrency === 'GBP'}>GBP (£)</option>
|
||||
<option value="CAD" selected={currentOrganization?.defaultCurrency === 'CAD'}>CAD ($)</option>
|
||||
<option value="AUD" selected={currentOrganization?.defaultCurrency === 'AUD'}>AUD ($)</option>
|
||||
</select>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<div class="divider"></div>
|
||||
<div class="divider my-0"></div>
|
||||
|
||||
<div class="card-actions justify-end">
|
||||
<a href="/dashboard/invoices" class="btn btn-ghost">Cancel</a>
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<div class="flex justify-end gap-2">
|
||||
<a href="/dashboard/invoices" class="btn btn-ghost btn-sm">Cancel</a>
|
||||
<button type="submit" class="btn btn-primary btn-sm">
|
||||
Create Draft
|
||||
<Icon name="heroicons:arrow-right" class="w-4 h-4" />
|
||||
</button>
|
||||
|
||||
Reference in New Issue
Block a user