Phase 4: Webhooks, Backup/Restore UI, Onboarding/Tutorial

- Webhooks Backend: model, schema, service (HMAC-SHA256, httpx), routes, event bus dispatcher, migration 0042
- Webhooks Frontend: SettingsWebhooksPage (CRUD, test button, event multi-select), API client
- Backup/Restore Backend: model, schema, service (pg_dump/pg_restore), routes (admin-only), migration 0043
- Backup/Restore Frontend: SettingsBackupPage (create, list, restore dialog with RESTORE confirmation, auto-refresh)
- Onboarding: OnboardingTour (8 steps, custom CSS overlay), WelcomeDialog, onboardingStore (zustand + localStorage)
- Onboarding integrated into AppShell
- Routes: /settings/webhooks, /settings/backup registered
- Settings nav: Webhooks, Backup & Restore entries added
- Migration conflict fixed: 0042_webhooks → 0043_backups chain

frontend/src/store/onboardingStore.ts

@@ -0,0 +1,102 @@
+import { create } from 'zustand';
+
+/**
+ * Onboarding Store — manages the guided tour state for first-time users.
+ * Persists to localStorage so progress survives page reloads.
+ */
+
+const STORAGE_KEY = 'leocrm_onboarding';
+
+export interface OnboardingState {
+  isActive: boolean;
+  step: number;
+  completed: boolean;
+  skipped: boolean;
+  start: () => void;
+  next: () => void;
+  prev: () => void;
+  skip: () => void;
+  complete: () => void;
+  goToStep: (n: number) => void;
+  reset: () => void;
+}
+
+interface PersistedData {
+  step: number;
+  completed: boolean;
+  skipped: boolean;
+}
+
+function loadPersisted(): Partial<OnboardingState> {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (!raw) return {};
+    const data: PersistedData = JSON.parse(raw);
+    return {
+      step: data.step ?? 0,
+      completed: data.completed ?? false,
+      skipped: data.skipped ?? false,
+    };
+  } catch {
+    return {};
+  }
+}
+
+function persist(state: OnboardingState): void {
+  try {
+    const data: PersistedData = {
+      step: state.step,
+      completed: state.completed,
+      skipped: state.skipped,
+    };
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
+  } catch {
+    // localStorage may be unavailable in some contexts
+  }
+}
+
+const initial = loadPersisted();
+
+export const useOnboardingStore = create<OnboardingState>((set, get) => ({
+  isActive: false,
+  step: initial.step ?? 0,
+  completed: initial.completed ?? false,
+  skipped: initial.skipped ?? false,
+
+  start: () => {
+    set({ isActive: true, step: 0, completed: false, skipped: false });
+    persist(get());
+  },
+
+  next: () => {
+    const s = get();
+    set({ step: s.step + 1 });
+    persist(get());
+  },
+
+  prev: () => {
+    const s = get();
+    set({ step: Math.max(0, s.step - 1) });
+    persist(get());
+  },
+
+  skip: () => {
+    set({ isActive: false, skipped: true });
+    persist(get());
+  },
+
+  complete: () => {
+    set({ isActive: false, completed: true, step: 0 });
+    persist(get());
+  },
+
+  goToStep: (n: number) => {
+    set({ step: Math.max(0, n) });
+    persist(get());
+  },
+
+  reset: () => {
+    set({ isActive: false, step: 0, completed: false, skipped: false });
+    persist(get());
+  },
+}));