feat: cascade delete dialog for clients with dependency counts

src/views/Clients.vue

@@ -4,6 +4,7 @@
     <div class="flex items-center justify-between mb-6">
       <h1 class="text-[1.75rem] font-bold font-[family-name:var(--font-heading)] tracking-tight text-text-primary">Clients</h1>
       <button
+        data-tour-id="new-client"
         @click="openCreateDialog"
         class="px-3 py-1.5 bg-accent text-bg-base text-xs font-medium rounded-lg hover:bg-accent-hover transition-colors duration-150"
       >
@@ -18,7 +19,11 @@
         :key="client.id"
         class="group bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] card-hover cursor-pointer"
         :style="{ transitionDelay: `${index * 30}ms` }"
+        tabindex="0"
+        role="button"
         @click="openEditDialog(client)"
+        @keydown.enter="openEditDialog(client)"
+        @keydown.space.prevent="openEditDialog(client)"
       >
         <div class="p-4">
           <div class="flex items-start justify-between">
@@ -27,22 +32,22 @@
               <p v-if="client.company" class="text-xs text-text-secondary mt-0.5 truncate">{{ client.company }}</p>
               <p v-if="client.email" class="text-xs text-text-tertiary mt-0.5 truncate">{{ client.email }}</p>
             </div>
-            <div class="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity duration-100 shrink-0 ml-2">
+            <div class="flex items-center gap-1 opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 transition-opacity duration-100 shrink-0 ml-2">
               <button
                 @click.stop="openEditDialog(client)"
                 class="p-1.5 text-text-tertiary hover:text-text-secondary transition-colors duration-150"
-                title="Edit"
+                aria-label="Edit"
               >
-                <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">
+                <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" aria-hidden="true">
                   <path stroke-linecap="round" stroke-linejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                 </svg>
               </button>
               <button
                 @click.stop="confirmDelete(client)"
                 class="p-1.5 text-text-tertiary hover:text-status-error transition-colors duration-150"
-                title="Delete"
+                aria-label="Delete"
               >
-                <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">
+                <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" aria-hidden="true">
                   <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>
@@ -54,7 +59,7 @@
 
     <!-- Empty State -->
     <div v-else class="flex flex-col items-center justify-center py-16">
-      <Users class="w-12 h-12 text-text-tertiary animate-float" :stroke-width="1.5" />
+      <Users class="w-12 h-12 text-text-tertiary animate-float" :stroke-width="1.5" aria-hidden="true" />
       <p class="text-sm text-text-secondary mt-4">No clients yet</p>
       <p class="text-xs text-text-tertiary mt-2 max-w-xs text-center">Clients let you organize projects and generate invoices with billing details.</p>
       <button
@@ -72,89 +77,84 @@
       class="fixed inset-0 bg-black/70 backdrop-blur-[4px] flex items-center justify-center p-4 z-50"
       @click.self="tryCloseDialog"
     >
-      <div class="bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-md p-6 max-h-[calc(100vh-2rem)] overflow-y-auto">
+      <div class="bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-xl p-6 max-h-[calc(100vh-2rem)] overflow-y-auto" role="dialog" aria-modal="true" aria-labelledby="client-dialog-title">
-        <h2 class="text-[1.125rem] font-semibold font-[family-name:var(--font-heading)] text-text-primary mb-4">
+        <h2 id="client-dialog-title" class="text-[1.125rem] font-semibold font-[family-name:var(--font-heading)] text-text-primary mb-4">
           {{ editingClient ? 'Edit Client' : 'Create Client' }}
         </h2>
 
         <form @submit.prevent="handleSubmit" class="space-y-4">
-          <!-- Contact Info -->
+          <!-- Two-column layout: Contact | Billing -->
-          <div>
+          <div class="grid grid-cols-2 gap-6">
-            <label class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Name *</label>
+            <!-- Left column: Contact -->
-            <input
+            <div class="space-y-4">
-              v-model="formData.name"
-              type="text"
-              required
-              class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
-              placeholder="Client name"
-            />
-          </div>
-
-          <div>
-            <label class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Email</label>
-            <input
-              v-model="formData.email"
-              type="email"
-              class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
-              placeholder="client@example.com"
-            />
-          </div>
-
-          <div>
-            <label class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Phone</label>
-            <input
-              v-model="formData.phone"
-              type="tel"
-              class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
-              placeholder="+1 (555) 000-0000"
-            />
-          </div>
-
-          <div>
-            <label class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Address</label>
-            <textarea
-              v-model="formData.address"
-              rows="2"
-              class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible resize-none"
-              placeholder="Street, City, State, ZIP"
-            />
-          </div>
-
-          <!-- Billing Details (collapsible) -->
-          <div class="border-t border-border-subtle pt-4">
-            <button
-              type="button"
-              @click="billingOpen = !billingOpen"
-              class="flex items-center gap-2 text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] cursor-pointer hover:text-text-secondary transition-colors"
-            >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                class="h-3 w-3 transition-transform duration-150"
-                :class="{ 'rotate-90': billingOpen }"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-                stroke-width="2"
-              >
-                <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
-              </svg>
-              Billing Details
-            </button>
-
-            <div v-if="billingOpen" class="mt-3 space-y-4">
               <div>
-                <label class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Company</label>
+                <label for="client-name" class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Name *</label>
                 <input
+                  id="client-name"
+                  v-model="formData.name"
+                  type="text"
+                  required
+                  autocomplete="name"
+                  class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
+                  placeholder="Client name"
+                />
+              </div>
+
+              <div>
+                <label for="client-email" class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Email</label>
+                <input
+                  id="client-email"
+                  v-model="formData.email"
+                  type="email"
+                  autocomplete="email"
+                  class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
+                  placeholder="client@example.com"
+                />
+              </div>
+
+              <div>
+                <label for="client-phone" class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Phone</label>
+                <input
+                  id="client-phone"
+                  v-model="formData.phone"
+                  type="tel"
+                  autocomplete="tel"
+                  class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
+                  placeholder="+1 (555) 000-0000"
+                />
+              </div>
+
+              <div>
+                <label for="client-address" class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Address</label>
+                <textarea
+                  id="client-address"
+                  v-model="formData.address"
+                  rows="2"
+                  autocomplete="street-address"
+                  class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible resize-none"
+                  placeholder="Street, City, State, ZIP"
+                />
+              </div>
+            </div>
+
+            <!-- Right column: Billing -->
+            <div class="space-y-4">
+              <div>
+                <label for="client-company" class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Company</label>
+                <input
+                  id="client-company"
                   v-model="formData.company"
                   type="text"
+                  autocomplete="organization"
                   class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
                   placeholder="Business name for invoices"
                 />
               </div>
 
               <div>
-                <label class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Tax ID</label>
+                <label for="client-tax-id" class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Tax ID</label>
                 <input
+                  id="client-tax-id"
                   v-model="formData.tax_id"
                   type="text"
                   class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
@@ -163,8 +163,9 @@
               </div>
 
               <div>
-                <label class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Payment Terms</label>
+                <label for="client-payment-terms" class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Payment Terms</label>
                 <input
+                  id="client-payment-terms"
                   v-model="formData.payment_terms"
                   type="text"
                   class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
@@ -173,8 +174,9 @@
               </div>
 
               <div>
-                <label class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Notes</label>
+                <label for="client-notes" class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Notes</label>
                 <textarea
+                  id="client-notes"
                   v-model="formData.notes"
                   rows="2"
                   class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible resize-none"
@@ -205,35 +207,14 @@
     </div>
     </Transition>
 
-    <!-- Delete Confirmation Dialog -->
+    <AppCascadeDeleteDialog
-    <Transition name="modal">
+      :show="showCascadeDelete"
-    <div
+      entity-type="client"
-      v-if="showDeleteDialog"
+      :entity-name="deleteCandidate?.name || ''"
-      class="fixed inset-0 bg-black/70 backdrop-blur-[4px] flex items-center justify-center p-4 z-50"
+      :impacts="deleteImpacts"
-      @click.self="cancelDelete"
+      @confirm="executeDelete"
-    >
+      @cancel="showCascadeDelete = false"
-      <div class="bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-sm p-6">
+    />
-        <h2 class="text-[1.125rem] font-semibold font-[family-name:var(--font-heading)] text-text-primary mb-2">Delete Client</h2>
-        <p class="text-[0.75rem] text-text-secondary mb-6">
-          Are you sure you want to delete "{{ clientToDelete?.name }}"? This action cannot be undone.
-        </p>
-        <div class="flex justify-end gap-3">
-          <button
-            @click="cancelDelete"
-            class="px-4 py-2 border border-border-subtle text-text-secondary rounded-lg hover:bg-bg-elevated transition-colors duration-150"
-          >
-            Cancel
-          </button>
-          <button
-            @click="handleDelete"
-            class="px-4 py-2 border border-status-error text-status-error font-medium rounded-lg hover:bg-status-error/10 transition-colors duration-150"
-          >
-            Delete
-          </button>
-        </div>
-      </div>
-    </div>
-    </Transition>
 
     <AppDiscardDialog :show="showDiscardDialog" @cancel="cancelDiscard" @discard="confirmDiscard" />
   </div>
@@ -243,10 +224,15 @@
 import { ref, reactive, onMounted } from 'vue'
 import { Users } from 'lucide-vue-next'
 import AppDiscardDialog from '../components/AppDiscardDialog.vue'
+import AppCascadeDeleteDialog from '../components/AppCascadeDeleteDialog.vue'
+import { invoke } from '@tauri-apps/api/core'
+import { handleInvokeError } from '../utils/errorHandler'
 import { useClientsStore, type Client } from '../stores/clients'
+import { useToastStore } from '../stores/toast'
 import { useFormGuard } from '../utils/formGuard'
 
 const clientsStore = useClientsStore()
+const toastStore = useToastStore()
 
 const { showDiscardDialog, snapshot: snapshotForm, tryClose: tryCloseForm, confirmDiscard, cancelDiscard } = useFormGuard()
 
@@ -260,10 +246,10 @@ function tryCloseDialog() {
 
 // Dialog state
 const showDialog = ref(false)
-const showDeleteDialog = ref(false)
+const showCascadeDelete = ref(false)
+const deleteCandidate = ref<Client | null>(null)
+const deleteImpacts = ref<Array<{ label: string; count: number }>>([])
 const editingClient = ref<Client | null>(null)
-const clientToDelete = ref<Client | null>(null)
-const billingOpen = ref(false)
 
 // Form data
 const formData = reactive<Client>({
@@ -277,11 +263,6 @@ const formData = reactive<Client>({
   notes: undefined,
 })
 
-// Check if any billing field has data
-function hasBillingData(client: Client): boolean {
-  return !!(client.company || client.tax_id || client.payment_terms || client.notes)
-}
-
 // Open create dialog
 function openCreateDialog() {
   editingClient.value = null
@@ -293,7 +274,6 @@ function openCreateDialog() {
   formData.tax_id = undefined
   formData.payment_terms = undefined
   formData.notes = undefined
-  billingOpen.value = false
   snapshotForm(getFormData())
   showDialog.value = true
 }
@@ -310,7 +290,6 @@ function openEditDialog(client: Client) {
   formData.tax_id = client.tax_id
   formData.payment_terms = client.payment_terms
   formData.notes = client.notes
-  billingOpen.value = hasBillingData(client)
   snapshotForm(getFormData())
   showDialog.value = true
 }
@@ -331,24 +310,34 @@ async function handleSubmit() {
   closeDialog()
 }
 
-// Confirm delete
+// Confirm delete - fetch dependents and show cascade dialog
-function confirmDelete(client: Client) {
+async function confirmDelete(client: Client) {
-  clientToDelete.value = client
+  try {
-  showDeleteDialog.value = true
+    const deps = await invoke<{ projects: number; invoices: number; expenses: number }>('get_client_dependents', { clientId: client.id })
-}
+    const impacts: Array<{ label: string; count: number }> = []
-
+    if (deps.projects > 0) impacts.push({ label: 'Projects', count: deps.projects })
-// Cancel delete
+    if (deps.invoices > 0) impacts.push({ label: 'Invoices', count: deps.invoices })
-function cancelDelete() {
+    if (deps.expenses > 0) impacts.push({ label: 'Expenses', count: deps.expenses })
-  showDeleteDialog.value = false
+    deleteCandidate.value = client
-  clientToDelete.value = null
+    deleteImpacts.value = impacts
-}
+    showCascadeDelete.value = true
-
+  } catch (error) {
-// Handle delete
+    handleInvokeError(error, 'Failed to check client dependencies')
-async function handleDelete() {
+  }
-  if (clientToDelete.value?.id) {
+}
-    await clientsStore.deleteClient(clientToDelete.value.id)
+
+// Execute cascade delete
+async function executeDelete() {
+  if (!deleteCandidate.value?.id) return
+  try {
+    await clientsStore.deleteClient(deleteCandidate.value.id)
+    toastStore.success(`Client "${deleteCandidate.value.name}" deleted`)
+  } catch (error) {
+    handleInvokeError(error, 'Failed to delete client')
+  } finally {
+    showCascadeDelete.value = false
+    deleteCandidate.value = null
   }
-  cancelDelete()
 }
 
 // Load data on mount