lashman/zeroclock
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

feat: add two-step invoice flow with full-screen template picker

Browse Source
This commit is contained in:
Your Name
2026-02-18 14:43:55 +02:00
parent a313477cd7
commit f40cc97668
1 changed files with 118 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

205
src/views/Invoices.vue
View File

@@ -1,9 +1,9 @@
<template>
<div class="p-6">
<h1 class="text-[1.75rem] font-bold font-[family-name:var(--font-heading)] tracking-tight text-text-primary mb-6">Invoices</h1>
<h1 v-if="view !== 'template-picker'" class="text-[1.75rem] font-bold font-[family-name:var(--font-heading)] tracking-tight text-text-primary mb-6">Invoices</h1>
<!-- View tabs -->
<div class="flex gap-6 mb-6 border-b border-border-subtle">
<!-- View tabs (hidden in template picker) -->
<div v-if="view !== 'template-picker'" class="flex gap-6 mb-6 border-b border-border-subtle">
<button
@click="view = 'list'"
class="pb-2 text-[0.8125rem] transition-colors duration-150 -mb-px"
@@ -371,18 +371,6 @@
</div>
</div>
<!-- Template Selection -->
<div>
<label class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-2">Invoice Template</label>
<InvoiceTemplatePicker
v-model="selectedTemplateId"
:invoice="previewCreateInvoice"
:client="selectedClient"
:items="createPreviewItems"
:business-info="businessInfo"
/>
</div>
<!-- Buttons -->
<div class="flex justify-end gap-3 pt-2">
<button
@@ -402,49 +390,80 @@
</form>
</div>
<!-- Invoice Preview Dialog -->
<Transition name="modal">
<div
v-if="showDetailDialog"
class="fixed inset-0 bg-black/80 backdrop-blur-[4px] flex flex-col items-center p-6 z-50 overflow-y-auto"
@click.self="showDetailDialog = false"
>
<!-- Toolbar -->
<div class="flex items-center gap-3 mb-4 shrink-0">
<select
v-model="selectedTemplateId"
class="px-3 py-2 bg-white/10 border border-white/20 text-white text-[0.75rem] rounded-lg focus:outline-none appearance-none cursor-pointer"
>
<option v-for="tmpl in INVOICE_TEMPLATES" :key="tmpl.id" :value="tmpl.id" class="text-black bg-white">
{{ tmpl.name }}
</option>
</select>
<button
@click="exportPDF(selectedInvoice!)"
class="px-4 py-2 bg-accent text-bg-base text-[0.75rem] font-medium rounded-lg hover:bg-accent-hover transition-colors"
>
Export PDF
</button>
<button
@click="showDetailDialog = false"
class="px-4 py-2 border border-white/20 text-white/80 text-[0.75rem] rounded-lg hover:bg-white/10 transition-colors"
>
Close
</button>
<!-- Template Picker View -->
<div v-else-if="view === 'template-picker'" class="-m-6 -mt-[calc(1.5rem+1.75rem+1.5rem)] h-screen flex flex-col">
<!-- Top bar -->
<div class="flex items-center justify-between px-6 py-3 border-b border-border-subtle bg-bg-surface shrink-0">
<div class="flex items-center gap-3">
<button
@click="handlePickerBack"
class="p-1.5 text-text-tertiary hover:text-text-secondary transition-colors"
>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
</svg>
</button>
<span class="text-[0.8125rem] font-medium text-text-primary">
{{ selectedInvoice?.invoice_number }}
</span>
<span class="text-[0.75rem] text-text-tertiary">
{{ selectedInvoice ? getClientName(selectedInvoice.client_id) : '' }}
</span>
</div>
<div class="flex items-center gap-3">
<button
@click="handlePickerExport"
class="px-4 py-2 bg-accent text-bg-base text-[0.75rem] font-medium rounded-lg hover:bg-accent-hover transition-colors"
>
Export PDF
</button>
<button
@click="handlePickerSave"
class="px-4 py-2 border border-border-subtle text-text-secondary text-[0.75rem] rounded-lg hover:bg-bg-elevated transition-colors"
>
Save &amp; Close
</button>
</div>
</div>
<!-- Template preview -->
<div class="w-[8.5in] shrink-0">
<InvoicePreview
:template="getTemplateById(selectedTemplateId)"
:invoice="selectedInvoice!"
:client="previewClient"
:items="previewItems"
:business-info="businessInfo"
/>
<!-- Split pane -->
<div class="flex-1 flex overflow-hidden">
<!-- Left: Template list -->
<div class="w-56 border-r border-border-subtle overflow-y-auto bg-bg-surface shrink-0">
<div v-for="cat in TEMPLATE_CATEGORIES" :key="cat.id">
<div class="text-[0.5625rem] text-text-tertiary uppercase tracking-[0.1em] font-medium px-3 pt-3 pb-1">
{{ cat.label }}
</div>
<button
v-for="tmpl in getTemplatesByCategory(cat.id)"
:key="tmpl.id"
class="w-full flex items-center gap-2 px-3 py-1.5 text-[0.75rem] transition-colors"
:class="tmpl.id === selectedTemplateId
? 'bg-accent/10 text-accent-text'
: 'text-text-secondary hover:bg-bg-elevated hover:text-text-primary'"
@click="selectedTemplateId = tmpl.id"
>
<span class="w-2.5 h-2.5 rounded-full shrink-0 border border-black/10" :style="{ backgroundColor: tmpl.colors.primary }" />
<span class="truncate">{{ tmpl.name }}</span>
</button>
</div>
</div>
<!-- Right: Preview -->
<div class="flex-1 bg-bg-inset p-8 overflow-y-auto flex justify-center">
<div class="w-full max-w-lg">
<InvoicePreview
v-if="selectedInvoice"
:template="getTemplateById(selectedTemplateId)"
:invoice="selectedInvoice"
:client="pickerClient"
:items="previewItems"
:business-info="businessInfo"
/>
</div>
</div>
</div>
</div>
</Transition>
<!-- Delete Confirmation Dialog -->
<Transition name="modal">
@@ -487,8 +506,7 @@ import AppNumberInput from '../components/AppNumberInput.vue'
import AppSelect from '../components/AppSelect.vue'
import AppDatePicker from '../components/AppDatePicker.vue'
import InvoicePreview from '../components/InvoicePreview.vue'
import InvoiceTemplatePicker from '../components/InvoiceTemplatePicker.vue'
import { getTemplateById, INVOICE_TEMPLATES } from '../utils/invoiceTemplates'
import { getTemplateById, getTemplatesByCategory, TEMPLATE_CATEGORIES } from '../utils/invoiceTemplates'
import type { BusinessInfo } from '../utils/invoicePdfRenderer'
import { useInvoicesStore, type Invoice, type InvoiceItem } from '../stores/invoices'
import { useClientsStore, type Client } from '../stores/clients'
@@ -511,10 +529,10 @@ const settingsStore = useSettingsStore()
const toastStore = useToastStore()
// View state
const view = ref<'list' | 'create'>('list')
const view = ref<'list' | 'create' | 'template-picker'>('list')
const pickerInvoiceId = ref<number | null>(null)
// Dialog state
const showDetailDialog = ref(false)
const showDeleteDialog = ref(false)
const selectedInvoice = ref<Invoice | null>(null)
const invoiceToDelete = ref<Invoice | null>(null)
@@ -534,11 +552,11 @@ const createForm = reactive({
const lineItems = ref<LineItem[]>([])
const importProjectId = ref(0)
const showTokenHelp = ref(false)
const selectedTemplateId = ref('clean-minimal')
const selectedTemplateId = ref('clean')
// Preview state
// Preview / picker state
const previewItems = ref<InvoiceItem[]>([])
const previewClient = computed<Client | null>(() => {
const pickerClient = computed<Client | null>(() => {
if (!selectedInvoice.value) return null
return clientsStore.clients.find(c => c.id === selectedInvoice.value!.client_id) || null
})
@@ -557,29 +575,6 @@ const businessInfo = computed<BusinessInfo>(() => ({
logo: settingsStore.settings.business_logo || '',
}))
const previewCreateInvoice = computed<Invoice>(() => ({
client_id: createForm.client_id,
invoice_number: resolvedInvoiceNumber.value,
date: createForm.date,
due_date: createForm.due_date || undefined,
subtotal: calculateSubtotal(),
tax_rate: createForm.tax_rate,
tax_amount: calculateTax(),
discount: createForm.discount,
total: calculateTotal(),
notes: createForm.notes || undefined,
status: 'pending',
}))
const createPreviewItems = computed(() =>
lineItems.value.map(li => ({
description: li.description,
quantity: li.quantity,
rate: li.unit_price,
amount: li.quantity * li.unit_price,
}))
)
// Resolve invoice number tokens
const resolvedInvoiceNumber = computed(() => {
const now = new Date()
@@ -647,16 +642,18 @@ function calculateTotal(): number {
return calculateSubtotal() + calculateTax() - createForm.discount
}
// View invoice details
// View invoice → open template picker
async function viewInvoice(invoice: Invoice) {
selectedInvoice.value = invoice
pickerInvoiceId.value = invoice.id!
selectedTemplateId.value = invoice.template_id || 'clean'
try {
previewItems.value = invoice.id ? await invoicesStore.getInvoiceItems(invoice.id) : []
} catch (e) {
console.error('Failed to load invoice items:', e)
previewItems.value = []
}
showDetailDialog.value = true
view.value = 'template-picker'
}
// Confirm delete
@@ -715,7 +712,19 @@ async function handleCreate() {
}
}
// Reset form
// Navigate to template picker with the new invoice
selectedInvoice.value = { ...invoice, id: invoiceId }
pickerInvoiceId.value = invoiceId
selectedTemplateId.value = 'clean'
previewItems.value = lineItems.value.map(li => ({
invoice_id: invoiceId,
description: li.description,
quantity: li.quantity,
rate: li.unit_price,
amount: li.quantity * li.unit_price,
}))
// Reset form for next use
createForm.client_id = 0
createForm.invoice_number = 'INV-{YYYY}-{###}'
createForm.date = new Date().toISOString().split('T')[0]
@@ -725,6 +734,28 @@ async function handleCreate() {
createForm.notes = ''
lineItems.value = []
view.value = 'template-picker'
}
// Template picker actions
async function handlePickerSave() {
if (pickerInvoiceId.value) {
await invoicesStore.updateInvoiceTemplate(pickerInvoiceId.value, selectedTemplateId.value)
}
pickerInvoiceId.value = null
selectedInvoice.value = null
view.value = 'list'
}
async function handlePickerExport() {
if (selectedInvoice.value) {
await exportPDF(selectedInvoice.value)
}
}
function handlePickerBack() {
pickerInvoiceId.value = null
selectedInvoice.value = null
view.value = 'list'
}