From d2fc871427e6fa02ca8ebd9746bb7fffebe55815 Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Tue, 17 Feb 2026 18:44:02 +0200
Subject: [PATCH] fix: syntax error in Invoices.vue

---
 src/views/Invoices.vue | 467 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 467 insertions(+)
 create mode 100644 src/views/Invoices.vue

diff --git a/src/views/Invoices.vue b/src/views/Invoices.vue
new file mode 100644
index 0000000..745a002
--- /dev/null
+++ b/src/views/Invoices.vue
@@ -0,0 +1,467 @@
+<template>
+  <div class="p-6">
+    <h1 class="text-2xl font-bold mb-6">Invoices</h1>
+
+    <!-- Header -->
+    <div class="flex items-center justify-between mb-6">
+      <div class="flex gap-2">
+        <button
+          @click="view = 'list'"
+          :class="[
+            'px-4 py-2 rounded-lg transition-colors',
+            view === 'list'
+              ? 'bg-amber text-background'
+              : 'border border-border text-text-primary hover:bg-surface-elevated'
+          ]"
+        >
+          List
+        </button>
+        <button
+          @click="view = 'create'"
+          :class="[
+            'px-4 py-2 rounded-lg transition-colors',
+            view === 'create'
+              ? 'bg-amber text-background'
+              : 'border border-border text-text-primary hover:bg-surface-elevated'
+          ]"
+        >
+          Create
+        </button>
+      </div>
+    </div>
+
+    <!-- List View -->
+    <div v-if="view === 'list'" class="bg-surface border border-border rounded-lg overflow-hidden">
+      <div v-if="invoicesStore.invoices.length > 0" class="overflow-x-auto">
+        <table class="w-full">
+          <thead class="bg-surface-elevated">
+            <tr>
+              <th class="px-4 py-3 text-left text-sm font-medium text-text-secondary">Invoice #</th>
+              <th class="px-4 py-3 text-left text-sm font-medium text-text-secondary">Client</th>
+              <th class="px-4 py-3 text-left text-sm font-medium text-text-secondary">Date</th>
+              <th class="px-4 py-3 text-right text-sm font-medium text-text-secondary">Amount</th>
+              <th class="px-4 py-3 text-center text-sm font-medium text-text-secondary">Status</th>
+              <th class="px-4 py-3 text-center text-sm font-medium text-text-secondary">Actions</th>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-border">
+            <tr
+              v-for="invoice in invoicesStore.invoices"
+              :key="invoice.id"
+              class="hover:bg-surface-elevated transition-colors"
+            >
+              <td class="px-4 py-3 text-text-primary font-medium">
+                {{ invoice.invoice_number }}
+              </td>
+              <td class="px-4 py-3 text-text-primary">
+                {{ getClientName(invoice.client_id) }}
+              </td>
+              <td class="px-4 py-3 text-text-secondary">
+                {{ formatDate(invoice.date) }}
+              </td>
+              <td class="px-4 py-3 text-right text-text-primary font-mono">
+                ${{ invoice.total.toFixed(2) }}
+              </td>
+              <td class="px-4 py-3 text-center">
+                <span
+                  :class="[
+                    'px-2 py-1 text-xs font-medium rounded',
+                    invoice.status === 'paid' ? 'bg-green-900 text-green-200' :
+                    invoice.status === 'pending' ? 'bg-yellow-900 text-yellow-200' :
+                    'bg-red-900 text-red-200'
+                  ]"
+                >
+                  {{ invoice.status }}
+                </span>
+              </td>
+              <td class="px-4 py-3 text-center">
+                <div class="flex items-center justify-center gap-2">
+                  <button
+                    @click="viewInvoice(invoice)"
+                    class="p-2 text-text-secondary hover:text-amber transition-colors"
+                    title="View"
+                  >
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+                    </svg>
+                  </button>
+                  <button
+                    @click="exportPDF(invoice)"
+                    class="p-2 text-text-secondary hover:text-amber transition-colors"
+                    title="Export PDF"
+                  >
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+                    </svg>
+                  </button>
+                  <button
+                    @click="confirmDelete(invoice)"
+                    class="p-2 text-text-secondary hover:text-error transition-colors"
+                    title="Delete"
+                  >
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                    </svg>
+                  </button>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <div v-else class="text-center text-text-secondary py-12">
+        No invoices yet. Create your first invoice!
+      </div>
+    </div>
+
+    <!-- Create View -->
+    <div v-else-if="view === 'create'" class="bg-surface border border-border rounded-lg p-6">
+      <h2 class="text-xl font-bold mb-4">Create Invoice</h2>
+
+      <form @submit.prevent="handleCreate" class="space-y-4">
+        <!-- Client -->
+        <div>
+          <label class="block text-sm text-text-secondary mb-1">Client *</label>
+          <select
+            v-model="createForm.client_id"
+            required
+            class="w-full px-3 py-2 bg-background border border-border rounded-lg text-text-primary focus:outline-none focus:border-amber"
+          >
+            <option :value="0">Select a client</option>
+            <option
+              v-for="client in clientsStore.clients"
+              :key="client.id"
+              :value="client.id"
+            >
+              {{ client.name }}
+            </option>
+          </select>
+        </div>
+
+        <!-- Date -->
+        <div class="grid grid-cols-2 gap-4">
+          <div>
+            <label class="block text-sm text-text-secondary mb-1">Invoice Date *</label>
+            <input
+              v-model="createForm.date"
+              type="date"
+              required
+              class="w-full px-3 py-2 bg-background border border-border rounded-lg text-text-primary focus:outline-none focus:border-amber"
+            />
+          </div>
+          <div>
+            <label class="block text-sm text-text-secondary mb-1">Due Date</label>
+            <input
+              v-model="createForm.due_date"
+              type="date"
+              class="w-full px-3 py-2 bg-background border border-border rounded-lg text-text-primary focus:outline-none focus:border-amber"
+            />
+          </div>
+        </div>
+
+        <!-- Tax Rate -->
+        <div class="grid grid-cols-2 gap-4">
+          <div>
+            <label class="block text-sm text-text-secondary mb-1">Tax Rate (%)</label>
+            <input
+              v-model.number="createForm.tax_rate"
+              type="number"
+              min="0"
+              max="100"
+              step="0.01"
+              class="w-full px-3 py-2 bg-background border border-border rounded-lg text-text-primary focus:outline-none focus:border-amber"
+            />
+          </div>
+          <div>
+            <label class="block text-sm text-text-secondary mb-1">Discount ($)</label>
+            <input
+              v-model.number="createForm.discount"
+              type="number"
+              min="0"
+              step="0.01"
+              class="w-full px-3 py-2 bg-background border border-border rounded-lg text-text-primary focus:outline-none focus:border-amber"
+            />
+          </div>
+        </div>
+
+        <!-- Notes -->
+        <div>
+          <label class="block text-sm text-text-secondary mb-1">Notes</label>
+          <textarea
+            v-model="createForm.notes"
+            rows="3"
+            class="w-full px-3 py-2 bg-background border border-border rounded-lg text-text-primary focus:outline-none focus:border-amber"
+            placeholder="Additional notes for the invoice"
+          ></textarea>
+        </div>
+
+        <!-- Calculated Total -->
+        <div class="bg-surface-elevated rounded-lg p-4">
+          <div class="flex justify-between text-text-secondary mb-2">
+            <span>Subtotal:</span>
+            <span>${{ calculateSubtotal().toFixed(2) }}</span>
+          </div>
+          <div class="flex justify-between text-text-secondary mb-2">
+            <span>Tax ({{ createForm.tax_rate }}%):</span>
+            <span>${{ calculateTax().toFixed(2) }}</span>
+          </div>
+          <div class="flex justify-between text-text-secondary mb-2">
+            <span>Discount:</span>
+            <span>-${{ createForm.discount.toFixed(2) }}</span>
+          </div>
+          <div class="flex justify-between text-text-primary font-bold text-lg pt-2 border-t border-border">
+            <span>Total:</span>
+            <span>${{ calculateTotal().toFixed(2) }}</span>
+          </div>
+        </div>
+
+        <!-- Buttons -->
+        <div class="flex justify-end gap-3 pt-4">
+          <button
+            type="button"
+            @click="view = 'list'"
+            class="px-4 py-2 border border-border text-text-primary rounded-lg hover:bg-surface-elevated transition-colors"
+          >
+            Cancel
+          </button>
+          <button
+            type="submit"
+            class="px-4 py-2 bg-amber text-background font-medium rounded-lg hover:bg-amber-hover transition-colors"
+          >
+            Create Invoice
+          </button>
+        </div>
+      </form>
+    </div>
+
+    <!-- Invoice Detail View -->
+    <div
+      v-if="showDetailDialog"
+      class="fixed inset-0 bg-black/50 flex items-center justify-center z-50"
+      @click.self="showDetailDialog = false"
+    >
+      <div class="bg-surface border border-border rounded-lg w-full max-w-2xl mx-4 p-6 max-h-[90vh] overflow-y-auto">
+        <div class="flex items-start justify-between mb-6">
+          <div>
+            <h2 class="text-2xl font-bold text-text-primary">Invoice {{ selectedInvoice?.invoice_number }}</h2>
+            <p class="text-text-secondary">{{ getClientName(selectedInvoice?.client_id || 0) }}</p>
+          </div>
+          <button
+            @click="showDetailDialog = false"
+            class="p-2 text-text-secondary hover:text-text-primary transition-colors"
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+
+        <div class="space-y-4">
+          <div class="grid grid-cols-2 gap-4">
+            <div>
+              <p class="text-sm text-text-secondary">Invoice Date</p>
+              <p class="text-text-primary">{{ formatDate(selectedInvoice?.date || '') }}</p>
+            </div>
+            <div>
+              <p class="text-sm text-text-secondary">Due Date</p>
+              <p class="text-text-primary">{{ selectedInvoice?.due_date ? formatDate(selectedInvoice.due_date) : '-' }}</p>
+            </div>
+          </div>
+
+          <div class="border-t border-border pt-4">
+            <div class="flex justify-between text-text-secondary mb-2">
+              <span>Subtotal:</span>
+              <span>${{ (selectedInvoice?.subtotal || 0).toFixed(2) }}</span>
+            </div>
+            <div class="flex justify-between text-text-secondary mb-2">
+              <span>Tax ({{ selectedInvoice?.tax_rate || 0 }}%):</span>
+              <span>${{ (selectedInvoice?.tax_amount || 0).toFixed(2) }}</span>
+            </div>
+            <div class="flex justify-between text-text-secondary mb-2">
+              <span>Discount:</span>
+              <span>-${{ (selectedInvoice?.discount || 0).toFixed(2) }}</span>
+            </div>
+            <div class="flex justify-between text-text-primary font-bold text-lg pt-2 border-t border-border">
+              <span>Total:</span>
+              <span>${{ (selectedInvoice?.total || 0).toFixed(2) }}</span>
+            </div>
+          </div>
+
+          <div v-if="selectedInvoice?.notes" class="border-t border-border pt-4">
+            <p class="text-sm text-text-secondary mb-1">Notes</p>
+            <p class="text-text-primary">{{ selectedInvoice.notes }}</p>
+          </div>
+        </div>
+
+        <div class="flex justify-end gap-3 mt-6">
+          <button
+            @click="exportPDF(selectedInvoice!)"
+            class="px-4 py-2 bg-amber text-background font-medium rounded-lg hover:bg-amber-hover transition-colors"
+          >
+            Export PDF
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Delete Confirmation Dialog -->
+    <div
+      v-if="showDeleteDialog"
+      class="fixed inset-0 bg-black/50 flex items-center justify-center z-50"
+      @click.self="showDeleteDialog = false"
+    >
+      <div class="bg-surface border border-border rounded-lg w-full max-w-sm mx-4 p-6">
+        <h2 class="text-xl font-bold mb-2">Delete Invoice</h2>
+        <p class="text-text-secondary mb-6">
+          Are you sure you want to delete invoice "{{ invoiceToDelete?.invoice_number }}"? This action cannot be undone.
+        </p>
+        <div class="flex justify-end gap-3">
+          <button
+            @click="showDeleteDialog = false"
+            class="px-4 py-2 border border-border text-text-primary rounded-lg hover:bg-surface-elevated transition-colors"
+          >
+            Cancel
+          </button>
+          <button
+            @click="handleDelete"
+            class="px-4 py-2 bg-error text-white font-medium rounded-lg hover:opacity-90 transition-opacity"
+          >
+            Delete
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue'
+import { invoke } from '@tauri-apps/api/core'
+import { useInvoicesStore, type Invoice } from '../stores/invoices'
+import { useClientsStore } from '../stores/clients'
+
+const invoicesStore = useInvoicesStore()
+const clientsStore = useClientsStore()
+
+// View state
+const view = ref<'list' | 'create'>('list')
+
+// Dialog state
+const showDetailDialog = ref(false)
+const showDeleteDialog = ref(false)
+const selectedInvoice = ref<Invoice | null>(null)
+const invoiceToDelete = ref<Invoice | null>(null)
+
+// Create form
+const createForm = reactive({
+  client_id: 0,
+  date: new Date().toISOString().split('T')[0],
+  due_date: '',
+  tax_rate: 0,
+  discount: 0,
+  notes: ''
+})
+
+// Get client name by ID
+function getClientName(clientId: number): string {
+  const client = clientsStore.clients.find(c => c.id === clientId)
+  return client?.name || 'Unknown Client'
+}
+
+// Format date
+function formatDate(dateString: string): string {
+  if (!dateString) return '-'
+  const date = new Date(dateString)
+  return date.toLocaleDateString('en-US', {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric'
+  })
+}
+
+// Calculate subtotal (simplified - would need line items in a real app)
+function calculateSubtotal(): number {
+  // For now, just return 0 - would need time entries or line items
+  return 0
+}
+
+// Calculate tax
+function calculateTax(): number {
+  return calculateSubtotal() * (createForm.tax_rate / 100)
+}
+
+// Calculate total
+function calculateTotal(): number {
+  return calculateSubtotal() + calculateTax() - createForm.discount
+}
+
+// View invoice details
+function viewInvoice(invoice: Invoice) {
+  selectedInvoice.value = invoice
+  showDetailDialog.value = true
+}
+
+// Confirm delete
+function confirmDelete(invoice: Invoice) {
+  invoiceToDelete.value = invoice
+  showDeleteDialog.value = true
+}
+
+// Handle delete
+async function handleDelete() {
+  if (invoiceToDelete.value?.id) {
+    await invoicesStore.deleteInvoice(invoiceToDelete.value.id)
+  }
+  showDeleteDialog.value = false
+  invoiceToDelete.value = null
+}
+
+// Handle create
+async function handleCreate() {
+  if (!createForm.client_id) {
+    alert('Please select a client')
+    return
+  }
+
+  const subtotal = calculateSubtotal()
+  const taxAmount = subtotal * (createForm.tax_rate / 100)
+  const total = subtotal + taxAmount - createForm.discount
+
+  const invoice: Invoice = {
+    client_id: createForm.client_id,
+    invoice_number: `INV-${Date.now()}`,
+    date: createForm.date,
+    due_date: createForm.due_date || undefined,
+    subtotal,
+    tax_rate: createForm.tax_rate,
+    tax_amount: taxAmount,
+    discount: createForm.discount,
+    total,
+    notes: createForm.notes || undefined,
+    status: 'pending'
+  }
+
+  await invoicesStore.createInvoice(invoice)
+  view.value = 'list'
+}
+
+// Export PDF (placeholder - would need PDF generation)
+async function exportPDF(invoice: Invoice) {
+  try {
+    await invoke('export_invoice_pdf', { invoiceId: invoice.id })
+  } catch (error) {
+    console.error('Failed to export PDF:', error)
+    alert('Failed to export PDF. This feature requires backend implementation.')
+  }
+}
+
+// Load data on mount
+onMounted(async () => {
+  await Promise.all([
+    invoicesStore.fetchInvoices(),
+    clientsStore.fetchClients()
+  ])
+})
+</script>