From 644f9ee3ce4b3e4d14927a1d6558e56f3b482f0b Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Tue, 17 Feb 2026 21:31:05 +0200
Subject: [PATCH] feat: redesign Invoices - amber tabs and totals, rich empty
 state

---
 src/views/Invoices.vue | 264 +++++++++++++++++++++--------------------
 1 file changed, 135 insertions(+), 129 deletions(-)

diff --git a/src/views/Invoices.vue b/src/views/Invoices.vue
index 745a002..42b5375 100644
--- a/src/views/Invoices.vue
+++ b/src/views/Invoices.vue
@@ -1,107 +1,101 @@
 <template>
   <div class="p-6">
-    <h1 class="text-2xl font-bold mb-6">Invoices</h1>
+    <h1 class="text-[1.5rem] font-medium text-text-primary 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>
+    <!-- View tabs -->
+    <div 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"
+        :class="view === 'list'
+          ? 'text-text-primary border-b-2 border-accent'
+          : 'text-text-tertiary hover:text-text-secondary'"
+      >
+        List
+      </button>
+      <button
+        @click="view = 'create'"
+        class="pb-2 text-[0.8125rem] transition-colors duration-150 -mb-px"
+        :class="view === 'create'
+          ? 'text-text-primary border-b-2 border-accent'
+          : 'text-text-tertiary hover:text-text-secondary'"
+      >
+        Create
+      </button>
     </div>
 
     <!-- List View -->
-    <div v-if="view === 'list'" class="bg-surface border border-border rounded-lg overflow-hidden">
+    <div v-if="view === 'list'">
       <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>
+          <thead>
+            <tr class="border-b border-border-subtle bg-bg-surface">
+              <th class="px-4 py-3 text-left text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] font-medium">Invoice #</th>
+              <th class="px-4 py-3 text-left text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] font-medium">Client</th>
+              <th class="px-4 py-3 text-left text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] font-medium">Date</th>
+              <th class="px-4 py-3 text-right text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] font-medium">Amount</th>
+              <th class="px-4 py-3 text-center text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] font-medium">Status</th>
+              <th class="px-4 py-3 w-24"></th>
             </tr>
           </thead>
-          <tbody class="divide-y divide-border">
+          <tbody>
             <tr
               v-for="invoice in invoicesStore.invoices"
               :key="invoice.id"
-              class="hover:bg-surface-elevated transition-colors"
+              class="group border-b border-border-subtle hover:bg-bg-elevated transition-colors duration-150"
             >
-              <td class="px-4 py-3 text-text-primary font-medium">
+              <td class="px-4 py-3 text-[0.75rem] font-medium text-text-primary">
                 {{ invoice.invoice_number }}
               </td>
-              <td class="px-4 py-3 text-text-primary">
+              <td class="px-4 py-3 text-[0.75rem] text-text-primary">
                 {{ getClientName(invoice.client_id) }}
               </td>
-              <td class="px-4 py-3 text-text-secondary">
+              <td class="px-4 py-3 text-[0.75rem] text-text-secondary">
                 {{ formatDate(invoice.date) }}
               </td>
-              <td class="px-4 py-3 text-right text-text-primary font-mono">
+              <td class="px-4 py-3 text-right text-[0.75rem] font-mono text-accent-text">
                 ${{ 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'
-                  ]"
+                  class="text-[0.6875rem] font-medium"
+                  :class="{
+                    'text-status-running': invoice.status === 'paid',
+                    'text-status-warning': invoice.status === 'pending',
+                    'text-status-error': invoice.status === 'overdue' || invoice.status === 'draft'
+                  }"
                 >
                   {{ invoice.status }}
                 </span>
               </td>
-              <td class="px-4 py-3 text-center">
-                <div class="flex items-center justify-center gap-2">
+              <td class="px-4 py-3">
+                <div class="flex items-center justify-end gap-1 opacity-0 group-hover:opacity-100 transition-opacity duration-100">
                   <button
                     @click="viewInvoice(invoice)"
-                    class="p-2 text-text-secondary hover:text-amber transition-colors"
+                    class="p-1.5 text-text-tertiary hover:text-text-secondary transition-colors duration-150"
                     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 xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                      <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                      <path stroke-linecap="round" stroke-linejoin="round" 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"
+                    class="p-1.5 text-text-tertiary hover:text-text-secondary transition-colors duration-150"
                     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 xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                      <path stroke-linecap="round" stroke-linejoin="round" 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"
+                    class="p-1.5 text-text-tertiary hover:text-status-error transition-colors duration-150"
                     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 xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                      <path stroke-linecap="round" stroke-linejoin="round" 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>
@@ -111,23 +105,31 @@
         </table>
       </div>
 
-      <div v-else class="text-center text-text-secondary py-12">
-        No invoices yet. Create your first invoice!
+      <div v-else class="flex flex-col items-center justify-center py-16">
+        <FileText class="w-12 h-12 text-text-tertiary" :stroke-width="1.5" />
+        <p class="text-sm text-text-secondary mt-4">No invoices yet</p>
+        <p class="text-xs text-text-tertiary mt-2 max-w-xs text-center">Create invoices from your tracked time to bill clients.</p>
+        <button
+          @click="view = 'create'"
+          class="mt-4 px-4 py-2 bg-accent text-bg-base text-xs font-medium rounded hover:bg-accent-hover transition-colors"
+        >
+          Create Invoice
+        </button>
       </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>
+    <div v-else-if="view === 'create'" class="max-w-lg">
+      <h2 class="text-[1rem] font-medium text-text-primary 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>
+          <label class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">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"
+            class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
           >
             <option :value="0">Select a client</option>
             <option
@@ -143,20 +145,20 @@
         <!-- Date -->
         <div class="grid grid-cols-2 gap-4">
           <div>
-            <label class="block text-sm text-text-secondary mb-1">Invoice Date *</label>
+            <label class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">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"
+              class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
             />
           </div>
           <div>
-            <label class="block text-sm text-text-secondary mb-1">Due Date</label>
+            <label class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">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"
+              class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
             />
           </div>
         </div>
@@ -164,56 +166,56 @@
         <!-- Tax Rate -->
         <div class="grid grid-cols-2 gap-4">
           <div>
-            <label class="block text-sm text-text-secondary mb-1">Tax Rate (%)</label>
+            <label class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">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"
+              class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
             />
           </div>
           <div>
-            <label class="block text-sm text-text-secondary mb-1">Discount ($)</label>
+            <label class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">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"
+              class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
             />
           </div>
         </div>
 
         <!-- Notes -->
         <div>
-          <label class="block text-sm text-text-secondary mb-1">Notes</label>
+          <label class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">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"
+            class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
+            placeholder="Additional notes"
           ></textarea>
         </div>
 
         <!-- Calculated Total -->
-        <div class="bg-surface-elevated rounded-lg p-4">
-          <div class="flex justify-between text-text-secondary mb-2">
+        <div class="bg-bg-inset rounded p-4">
+          <div class="flex justify-between text-[0.75rem] text-text-secondary mb-2">
             <span>Subtotal:</span>
-            <span>${{ calculateSubtotal().toFixed(2) }}</span>
+            <span class="font-mono">${{ calculateSubtotal().toFixed(2) }}</span>
           </div>
-          <div class="flex justify-between text-text-secondary mb-2">
+          <div class="flex justify-between text-[0.75rem] text-text-secondary mb-2">
             <span>Tax ({{ createForm.tax_rate }}%):</span>
-            <span>${{ calculateTax().toFixed(2) }}</span>
+            <span class="font-mono">${{ calculateTax().toFixed(2) }}</span>
           </div>
-          <div class="flex justify-between text-text-secondary mb-2">
+          <div class="flex justify-between text-[0.75rem] text-text-secondary mb-2">
             <span>Discount:</span>
-            <span>-${{ createForm.discount.toFixed(2) }}</span>
+            <span class="font-mono">-${{ createForm.discount.toFixed(2) }}</span>
           </div>
-          <div class="flex justify-between text-text-primary font-bold text-lg pt-2 border-t border-border">
+          <div class="flex justify-between text-text-primary font-medium text-[0.8125rem] pt-2 border-t border-border-subtle">
             <span>Total:</span>
-            <span>${{ calculateTotal().toFixed(2) }}</span>
+            <span class="font-mono text-accent-text">${{ calculateTotal().toFixed(2) }}</span>
           </div>
         </div>
 
@@ -222,13 +224,13 @@
           <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"
+            class="px-4 py-2 border border-border-subtle text-text-secondary rounded hover:bg-bg-elevated transition-colors duration-150"
           >
             Cancel
           </button>
           <button
             type="submit"
-            class="px-4 py-2 bg-amber text-background font-medium rounded-lg hover:bg-amber-hover transition-colors"
+            class="px-4 py-2 bg-accent text-bg-base font-medium rounded hover:bg-accent-hover transition-colors duration-150"
           >
             Create Invoice
           </button>
@@ -236,24 +238,24 @@
       </form>
     </div>
 
-    <!-- Invoice Detail View -->
+    <!-- Invoice Detail Dialog -->
     <div
       v-if="showDetailDialog"
-      class="fixed inset-0 bg-black/50 flex items-center justify-center z-50"
+      class="fixed inset-0 bg-black/70 backdrop-blur-[4px] 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="bg-bg-surface border border-border-subtle rounded shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-2xl mx-4 p-6 max-h-[90vh] overflow-y-auto animate-modal-enter">
         <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>
+            <h2 class="text-[1.5rem] font-medium text-text-primary">{{ selectedInvoice?.invoice_number }}</h2>
+            <p class="text-[0.75rem] 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"
+            class="p-2 text-text-tertiary hover:text-text-secondary transition-colors duration-150"
           >
-            <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 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="M6 18L18 6M6 6l12 12" />
             </svg>
           </button>
         </div>
@@ -261,44 +263,44 @@
         <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>
+              <p class="text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1">Invoice Date</p>
+              <p class="text-[0.8125rem] 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>
+              <p class="text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1">Due Date</p>
+              <p class="text-[0.8125rem] 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">
+          <div class="border-t border-border-subtle pt-4">
+            <div class="flex justify-between text-[0.75rem] text-text-secondary mb-2">
               <span>Subtotal:</span>
-              <span>${{ (selectedInvoice?.subtotal || 0).toFixed(2) }}</span>
+              <span class="font-mono">${{ (selectedInvoice?.subtotal || 0).toFixed(2) }}</span>
             </div>
-            <div class="flex justify-between text-text-secondary mb-2">
+            <div class="flex justify-between text-[0.75rem] text-text-secondary mb-2">
               <span>Tax ({{ selectedInvoice?.tax_rate || 0 }}%):</span>
-              <span>${{ (selectedInvoice?.tax_amount || 0).toFixed(2) }}</span>
+              <span class="font-mono">${{ (selectedInvoice?.tax_amount || 0).toFixed(2) }}</span>
             </div>
-            <div class="flex justify-between text-text-secondary mb-2">
+            <div class="flex justify-between text-[0.75rem] text-text-secondary mb-2">
               <span>Discount:</span>
-              <span>-${{ (selectedInvoice?.discount || 0).toFixed(2) }}</span>
+              <span class="font-mono">-${{ (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">
+            <div class="flex justify-between text-text-primary font-medium text-[0.8125rem] pt-2 border-t border-border-subtle">
               <span>Total:</span>
-              <span>${{ (selectedInvoice?.total || 0).toFixed(2) }}</span>
+              <span class="font-mono text-accent-text">${{ (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 v-if="selectedInvoice?.notes" class="border-t border-border-subtle pt-4">
+            <p class="text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1">Notes</p>
+            <p class="text-[0.8125rem] 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"
+            class="px-4 py-2 bg-accent text-bg-base font-medium rounded hover:bg-accent-hover transition-colors duration-150"
           >
             Export PDF
           </button>
@@ -309,24 +311,24 @@
     <!-- Delete Confirmation Dialog -->
     <div
       v-if="showDeleteDialog"
-      class="fixed inset-0 bg-black/50 flex items-center justify-center z-50"
+      class="fixed inset-0 bg-black/70 backdrop-blur-[4px] 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">
+      <div class="bg-bg-surface border border-border-subtle rounded shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-sm mx-4 p-6 animate-modal-enter">
+        <h2 class="text-[1rem] font-semibold text-text-primary mb-2">Delete Invoice</h2>
+        <p class="text-[0.75rem] 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"
+            class="px-4 py-2 border border-border-subtle text-text-secondary rounded hover:bg-bg-elevated transition-colors duration-150"
           >
             Cancel
           </button>
           <button
             @click="handleDelete"
-            class="px-4 py-2 bg-error text-white font-medium rounded-lg hover:opacity-90 transition-opacity"
+            class="px-4 py-2 border border-status-error text-status-error font-medium rounded hover:bg-status-error/10 transition-colors duration-150"
           >
             Delete
           </button>
@@ -338,12 +340,15 @@
 
 <script setup lang="ts">
 import { ref, reactive, onMounted } from 'vue'
-import { invoke } from '@tauri-apps/api/core'
+import { FileText } from 'lucide-vue-next'
 import { useInvoicesStore, type Invoice } from '../stores/invoices'
 import { useClientsStore } from '../stores/clients'
+import { useToastStore } from '../stores/toast'
+import { generateInvoicePdf } from '../utils/invoicePdf'
 
 const invoicesStore = useInvoicesStore()
 const clientsStore = useClientsStore()
+const toastStore = useToastStore()
 
 // View state
 const view = ref<'list' | 'create'>('list')
@@ -383,7 +388,6 @@ function formatDate(dateString: string): string {
 
 // 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
 }
 
@@ -421,7 +425,7 @@ async function handleDelete() {
 // Handle create
 async function handleCreate() {
   if (!createForm.client_id) {
-    alert('Please select a client')
+    toastStore.info('Please select a client')
     return
   }
 
@@ -447,14 +451,16 @@ async function handleCreate() {
   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.')
+// Export PDF using client-side jsPDF
+function exportPDF(invoice: Invoice) {
+  const client = clientsStore.clients.find(c => c.id === invoice.client_id)
+  if (!client) {
+    console.error('Client not found for invoice')
+    return
   }
+
+  const doc = generateInvoicePdf(invoice, client, [])
+  doc.save(`${invoice.invoice_number}.pdf`)
 }
 
 // Load data on mount