@startsimpli/funnels 0.4.6 → 0.4.7

package/src/components/FunnelRunHistory/FunnelRunHistory.stories.tsx

@@ -26,17 +26,17 @@ const createMockApiClient = (runs: FunnelRun[]): FunnelApiClient => {
 // Sample runs
 const completedRun: FunnelRun = {
   id: 'run-1',
-  funnel_id: 'funnel-1',
+  funnelId: 'funnel-1',
   status: 'completed',
-  trigger_type: 'manual',
-  started_at: '2024-02-10T14:30:00Z',
-  completed_at: '2024-02-10T14:35:00Z',
-  duration_ms: 300000,
-  total_input: 1000,
-  total_matched: 235,
-  total_excluded: 765,
-  total_tagged: 235,
-  stage_stats: {
+  triggerType: 'manual',
+  startedAt: '2024-02-10T14:30:00Z',
+  completedAt: '2024-02-10T14:35:00Z',
+  durationMs: 300000,
+  totalInput: 1000,
+  totalMatched: 235,
+  totalExcluded: 765,
+  totalTagged: 235,
+  stageStats: {
     'stage-1': { input: 1000, matched: 450, excluded: 550 },
     'stage-2': { input: 450, matched: 300, excluded: 150 },
     'stage-3': { input: 300, matched: 235, excluded: 65 },
@@ -45,46 +45,46 @@ const completedRun: FunnelRun = {
 
 const runningRun: FunnelRun = {
   id: 'run-2',
-  funnel_id: 'funnel-1',
+  funnelId: 'funnel-1',
   status: 'running',
-  trigger_type: 'scheduled',
-  started_at: new Date().toISOString(),
-  total_input: 1000,
-  total_matched: 0,
-  total_excluded: 0,
-  total_tagged: 0,
-  stage_stats: {},
+  triggerType: 'scheduled',
+  startedAt: new Date().toISOString(),
+  totalInput: 1000,
+  totalMatched: 0,
+  totalExcluded: 0,
+  totalTagged: 0,
+  stageStats: {},
 };
 
 const failedRun: FunnelRun = {
   id: 'run-3',
-  funnel_id: 'funnel-1',
+  funnelId: 'funnel-1',
   status: 'failed',
-  trigger_type: 'manual',
-  started_at: '2024-02-10T12:00:00Z',
-  completed_at: '2024-02-10T12:01:30Z',
-  duration_ms: 90000,
-  total_input: 1000,
-  total_matched: 0,
-  total_excluded: 0,
-  total_tagged: 0,
+  triggerType: 'manual',
+  startedAt: '2024-02-10T12:00:00Z',
+  completedAt: '2024-02-10T12:01:30Z',
+  durationMs: 90000,
+  totalInput: 1000,
+  totalMatched: 0,
+  totalExcluded: 0,
+  totalTagged: 0,
   error: 'Database connection timeout',
-  stage_stats: {},
+  stageStats: {},
 };
 
 const cancelledRun: FunnelRun = {
   id: 'run-4',
-  funnel_id: 'funnel-1',
+  funnelId: 'funnel-1',
   status: 'cancelled',
-  trigger_type: 'api',
-  started_at: '2024-02-10T11:00:00Z',
-  completed_at: '2024-02-10T11:02:00Z',
-  duration_ms: 120000,
-  total_input: 500,
-  total_matched: 50,
-  total_excluded: 450,
-  total_tagged: 50,
-  stage_stats: {},
+  triggerType: 'api',
+  startedAt: '2024-02-10T11:00:00Z',
+  completedAt: '2024-02-10T11:02:00Z',
+  durationMs: 120000,
+  totalInput: 500,
+  totalMatched: 50,
+  totalExcluded: 450,
+  totalTagged: 50,
+  stageStats: {},
 };
 
 const meta: Meta<typeof FunnelRunHistory> = {
@@ -113,18 +113,18 @@ export const CompletedRuns: Story = {
       {
         ...completedRun,
         id: 'run-5',
-        started_at: '2024-02-09T14:30:00Z',
-        completed_at: '2024-02-09T14:32:00Z',
-        duration_ms: 120000,
-        total_matched: 180,
+        startedAt: '2024-02-09T14:30:00Z',
+        completedAt: '2024-02-09T14:32:00Z',
+        durationMs: 120000,
+        totalMatched: 180,
       },
       {
         ...completedRun,
         id: 'run-6',
-        started_at: '2024-02-08T10:00:00Z',
-        completed_at: '2024-02-08T10:05:00Z',
-        duration_ms: 300000,
-        total_matched: 300,
+        startedAt: '2024-02-08T10:00:00Z',
+        completedAt: '2024-02-08T10:05:00Z',
+        durationMs: 300000,
+        totalMatched: 300,
       },
     ]),
   },
@@ -142,8 +142,8 @@ export const MixedStatuses: Story = {
       {
         ...completedRun,
         id: 'run-7',
-        started_at: '2024-02-09T14:30:00Z',
-        completed_at: '2024-02-09T14:32:00Z',
+        startedAt: '2024-02-09T14:30:00Z',
+        completedAt: '2024-02-09T14:32:00Z',
       },
     ]),
   },
@@ -159,15 +159,15 @@ export const FailedRuns: Story = {
         ...failedRun,
         id: 'run-8',
         error: 'Timeout connecting to database',
-        started_at: '2024-02-09T14:30:00Z',
-        completed_at: '2024-02-09T14:31:00Z',
+        startedAt: '2024-02-09T14:30:00Z',
+        completedAt: '2024-02-09T14:31:00Z',
       },
       {
         ...failedRun,
         id: 'run-9',
         error: 'Invalid field reference: firm.invalid_field',
-        started_at: '2024-02-08T10:00:00Z',
-        completed_at: '2024-02-08T10:00:30Z',
+        startedAt: '2024-02-08T10:00:00Z',
+        completedAt: '2024-02-08T10:00:30Z',
       },
     ]),
   },
@@ -182,7 +182,7 @@ export const RunningRuns: Story = {
       {
         ...runningRun,
         id: 'run-10',
-        started_at: new Date(Date.now() - 60000).toISOString(), // 1 minute ago
+        startedAt: new Date(Date.now() - 60000).toISOString(), // 1 minute ago
       },
     ]),
   },
@@ -204,10 +204,10 @@ export const LargeHistory: Story = {
       Array.from({ length: 50 }, (_, i) => ({
         ...completedRun,
         id: `run-${i}`,
-        started_at: new Date(Date.now() - i * 86400000).toISOString(), // i days ago
-        total_matched: 200 + Math.floor(Math.random() * 100),
-        duration_ms: 120000 + Math.floor(Math.random() * 180000),
-        trigger_type: i % 3 === 0 ? 'scheduled' : i % 3 === 1 ? 'manual' : 'api',
+        startedAt: new Date(Date.now() - i * 86400000).toISOString(), // i days ago
+        totalMatched: 200 + Math.floor(Math.random() * 100),
+        durationMs: 120000 + Math.floor(Math.random() * 180000),
+        triggerType: i % 3 === 0 ? 'scheduled' : i % 3 === 1 ? 'manual' : 'api',
       }))
     ),
   },
@@ -218,10 +218,10 @@ export const DifferentTriggers: Story = {
   args: {
     funnelId: 'funnel-1',
     apiClient: createMockApiClient([
-      { ...completedRun, id: 'run-11', trigger_type: 'manual' },
-      { ...completedRun, id: 'run-12', trigger_type: 'scheduled' },
-      { ...completedRun, id: 'run-13', trigger_type: 'api' },
-      { ...completedRun, id: 'run-14', trigger_type: 'webhook' },
+      { ...completedRun, id: 'run-11', triggerType: 'manual' },
+      { ...completedRun, id: 'run-12', triggerType: 'scheduled' },
+      { ...completedRun, id: 'run-13', triggerType: 'api' },
+      { ...completedRun, id: 'run-14', triggerType: 'webhook' },
     ]),
   },
 };
@@ -233,9 +233,9 @@ export const HighMatchRate: Story = {
     apiClient: createMockApiClient([
       {
         ...completedRun,
-        total_input: 1000,
-        total_matched: 950,
-        total_excluded: 50,
+        totalInput: 1000,
+        totalMatched: 950,
+        totalExcluded: 50,
       },
     ]),
   },
@@ -248,9 +248,9 @@ export const LowMatchRate: Story = {
     apiClient: createMockApiClient([
       {
         ...completedRun,
-        total_input: 10000,
-        total_matched: 12,
-        total_excluded: 9988,
+        totalInput: 10000,
+        totalMatched: 12,
+        totalExcluded: 9988,
       },
     ]),
   },
@@ -263,9 +263,9 @@ export const ZeroMatches: Story = {
     apiClient: createMockApiClient([
       {
         ...completedRun,
-        total_input: 1000,
-        total_matched: 0,
-        total_excluded: 1000,
+        totalInput: 1000,
+        totalMatched: 0,
+        totalExcluded: 1000,
       },
     ]),
   },

package/src/components/FunnelRunHistory/FunnelRunHistory.test.tsx

@@ -32,43 +32,43 @@ const createMockRun = (
 ): FunnelRun => {
   const stageStats: Record<string, StageStats> = {
     'stage-1': {
-      stage_id: 'stage-1',
-      stage_name: 'High ICP Score',
-      input_count: 1000,
-      matched_count: 500,
-      not_matched_count: 500,
-      excluded_count: 0,
-      tagged_count: 0,
-      continued_count: 500,
-      duration_ms: 1000,
+      stageId: 'stage-1',
+      stageName: 'High ICP Score',
+      inputCount: 1000,
+      matchedCount: 500,
+      notMatchedCount: 500,
+      excludedCount: 0,
+      taggedCount: 0,
+      continuedCount: 500,
+      durationMs: 1000,
     },
     'stage-2': {
-      stage_id: 'stage-2',
-      stage_name: 'Frontend Stack',
-      input_count: 500,
-      matched_count: 350,
-      not_matched_count: 150,
-      excluded_count: 0,
-      tagged_count: 0,
-      continued_count: 350,
-      duration_ms: 800,
+      stageId: 'stage-2',
+      stageName: 'Frontend Stack',
+      inputCount: 500,
+      matchedCount: 350,
+      notMatchedCount: 150,
+      excludedCount: 0,
+      taggedCount: 0,
+      continuedCount: 350,
+      durationMs: 800,
     },
   };
 
   return {
     id: 'run-123',
-    funnel_id: 'funnel-456',
+    funnelId: 'funnel-456',
     status: 'completed',
-    trigger_type: 'manual',
-    triggered_by: 'user-789',
-    started_at: new Date().toISOString(),
-    completed_at: new Date().toISOString(),
-    duration_ms: 2300,
-    total_input: 1000,
-    total_matched: 350,
-    total_excluded: 150,
-    total_tagged: 0,
-    stage_stats: stageStats,
+    triggerType: 'manual',
+    triggeredBy: 'user-789',
+    startedAt: new Date().toISOString(),
+    completedAt: new Date().toISOString(),
+    durationMs: 2300,
+    totalInput: 1000,
+    totalMatched: 350,
+    totalExcluded: 150,
+    totalTagged: 0,
+    stageStats: stageStats,
     ...overrides,
   };
 };
@@ -97,15 +97,15 @@ describe('FunnelRunHistory Component Logic', () => {
       await getFunnelRuns('funnel-456', {
         status: 'completed',
         page: 1,
-        page_size: 10,
-        ordering: '-started_at',
+        pageSize: 10,
+        ordering: '-startedAt',
       });
 
       expect(getFunnelRuns).toHaveBeenCalledWith('funnel-456', {
         status: 'completed',
         page: 1,
-        page_size: 10,
-        ordering: '-started_at',
+        pageSize: 10,
+        ordering: '-startedAt',
       });
     });
 
@@ -113,17 +113,17 @@ describe('FunnelRunHistory Component Logic', () => {
       const getFunnelRuns = mockApiClient.getFunnelRuns as any;
 
       await getFunnelRuns('funnel-456', {
-        trigger_type: 'scheduled',
+        triggerType: 'scheduled',
         page: 1,
-        page_size: 10,
-        ordering: '-started_at',
+        pageSize: 10,
+        ordering: '-startedAt',
       });
 
       expect(getFunnelRuns).toHaveBeenCalledWith('funnel-456', {
-        trigger_type: 'scheduled',
+        triggerType: 'scheduled',
         page: 1,
-        page_size: 10,
-        ordering: '-started_at',
+        pageSize: 10,
+        ordering: '-startedAt',
       });
     });
   });
@@ -134,12 +134,12 @@ describe('FunnelRunHistory Component Logic', () => {
       const runFunnel = mockApiClient.runFunnel as any;
 
       await runFunnel('funnel-456', {
-        trigger_type: 'manual',
+        triggerType: 'manual',
         metadata: { re_run_of: 'run-123' },
       });
 
       expect(runFunnel).toHaveBeenCalledWith('funnel-456', {
-        trigger_type: 'manual',
+        triggerType: 'manual',
         metadata: { re_run_of: 'run-123' },
       });
     });
@@ -210,19 +210,19 @@ describe('Run Status Scenarios', () => {
   it('should handle completed run', () => {
     const run = createMockRun({
       status: 'completed',
-      total_input: 1000,
-      total_matched: 235,
+      totalInput: 1000,
+      totalMatched: 235,
     });
 
     expect(run.status).toBe('completed');
-    expect(run.total_matched).toBe(235);
+    expect(run.totalMatched).toBe(235);
   });
 
   it('should handle failed run', () => {
     const run = createMockRun({
       status: 'failed',
       error: 'Database connection timeout',
-      total_matched: 0,
+      totalMatched: 0,
     });
 
     expect(run.status).toBe('failed');
@@ -232,19 +232,19 @@ describe('Run Status Scenarios', () => {
   it('should handle running run', () => {
     const run = createMockRun({
       status: 'running',
-      completed_at: undefined,
-      duration_ms: undefined,
+      completedAt: undefined,
+      durationMs: undefined,
     });
 
     expect(run.status).toBe('running');
-    expect(run.completed_at).toBeUndefined();
+    expect(run.completedAt).toBeUndefined();
   });
 
   it('should handle pending run', () => {
     const run = createMockRun({
       status: 'pending',
-      started_at: new Date().toISOString(),
-      completed_at: undefined,
+      startedAt: new Date().toISOString(),
+      completedAt: undefined,
     });
 
     expect(run.status).toBe('pending');
@@ -273,12 +273,12 @@ describe('Filter Scenarios', () => {
 
   it('should filter by manual trigger', () => {
     const runs = [
-      createMockRun({ id: '1', trigger_type: 'manual' }),
-      createMockRun({ id: '2', trigger_type: 'scheduled' }),
-      createMockRun({ id: '3', trigger_type: 'manual' }),
+      createMockRun({ id: '1', triggerType: 'manual' }),
+      createMockRun({ id: '2', triggerType: 'scheduled' }),
+      createMockRun({ id: '3', triggerType: 'manual' }),
     ];
 
-    const filtered = runs.filter((r) => r.trigger_type === 'manual');
+    const filtered = runs.filter((r) => r.triggerType === 'manual');
     expect(filtered).toHaveLength(2);
   });
 });
@@ -291,21 +291,21 @@ describe('Edge Cases', () => {
 
   it('should handle run with no stage stats', () => {
     const run = createMockRun({
-      stage_stats: {},
+      stageStats: {},
     });
 
-    const stageStatsArray = Object.values(run.stage_stats);
+    const stageStatsArray = Object.values(run.stageStats);
     expect(stageStatsArray).toHaveLength(0);
   });
 
   it('should handle run with zero match rate', () => {
     const run = createMockRun({
-      total_input: 1000,
-      total_matched: 0,
+      totalInput: 1000,
+      totalMatched: 0,
     });
 
-    const matchRate = run.total_input > 0
-      ? Math.round((run.total_matched / run.total_input) * 100)
+    const matchRate = run.totalInput > 0
+      ? Math.round((run.totalMatched / run.totalInput) * 100)
       : 0;
 
     expect(matchRate).toBe(0);
@@ -313,11 +313,11 @@ describe('Edge Cases', () => {
 
   it('should handle run with 100% match rate', () => {
     const run = createMockRun({
-      total_input: 1000,
-      total_matched: 1000,
+      totalInput: 1000,
+      totalMatched: 1000,
     });
 
-    const matchRate = Math.round((run.total_matched / run.total_input) * 100);
+    const matchRate = Math.round((run.totalMatched / run.totalInput) * 100);
     expect(matchRate).toBe(100);
   });
 });

package/src/components/FunnelRunHistory/FunnelRunHistory.tsx

@@ -61,12 +61,12 @@ export function FunnelRunHistory({
   const [selectedRun, setSelectedRun] = useState<FunnelRun | null>(null);
   const [filters, setFilters] = useState<RunFiltersType>({
     status: 'all',
-    trigger_type: 'all',
-    date_range: 'month',
+    triggerType: 'all',
+    dateRange: 'month',
   });
   const [pagination, setPagination] = useState<Pagination>({
     page: 1,
-    page_size: 10,
+    pageSize: 10,
     total: 0,
   });
   const [isRefreshing, setIsRefreshing] = useState(false);
@@ -77,16 +77,16 @@ export function FunnelRunHistory({
       setError(null);
       const params: any = {
         page: pagination.page,
-        page_size: pagination.page_size,
-        ordering: '-started_at', // Most recent first
+        pageSize: pagination.pageSize,
+        ordering: '-startedAt', // Most recent first
       };
 
       // Add filters
       if (filters.status && filters.status !== 'all') {
         params.status = filters.status;
       }
-      if (filters.trigger_type && filters.trigger_type !== 'all') {
-        params.trigger_type = filters.trigger_type;
+      if (filters.triggerType && filters.triggerType !== 'all') {
+        params.triggerType = filters.triggerType;
       }
 
       const response = await apiClient.getFunnelRuns(funnelId, params);
@@ -103,7 +103,7 @@ export function FunnelRunHistory({
       setIsLoading(false);
       setIsRefreshing(false);
     }
-  }, [funnelId, apiClient, pagination.page, pagination.page_size, filters]);
+  }, [funnelId, apiClient, pagination.page, pagination.pageSize, filters]);
 
   // Load runs on mount and when dependencies change
   useEffect(() => {
@@ -136,7 +136,7 @@ export function FunnelRunHistory({
   const handleReRun = async (run: FunnelRun) => {
     try {
       await apiClient.runFunnel(funnelId, {
-        trigger_type: 'manual',
+        triggerType: 'manual',
         metadata: { re_run_of: run.id },
       });
       // Refresh to show new run
@@ -168,7 +168,7 @@ export function FunnelRunHistory({
   };
 
   // Pagination
-  const totalPages = Math.ceil(pagination.total / pagination.page_size);
+  const totalPages = Math.ceil(pagination.total / pagination.pageSize);
   const canGoBack = pagination.page > 1;
   const canGoForward = pagination.page < totalPages;
 
@@ -184,9 +184,9 @@ export function FunnelRunHistory({
     }
   };
 
-  const startIndex = (pagination.page - 1) * pagination.page_size + 1;
+  const startIndex = (pagination.page - 1) * pagination.pageSize + 1;
   const endIndex = Math.min(
-    pagination.page * pagination.page_size,
+    pagination.page * pagination.pageSize,
     pagination.total
   );
 

package/src/components/FunnelRunHistory/RunDetailsModal.tsx

@@ -90,7 +90,7 @@ export function RunDetailsModal({
 
   if (!run) return null;
 
-  const stageStatsArray = Object.values(run.stage_stats);
+  const stageStatsArray = Object.values(run.stageStats);
 
   return (
     <div
@@ -139,21 +139,21 @@ export function RunDetailsModal({
               <div>
                 <div className="text-xs text-gray-600 mb-1">Duration</div>
                 <div className="text-sm font-medium text-gray-900">
-                  {formatDuration(run.duration_ms)}
+                  {formatDuration(run.durationMs)}
                 </div>
               </div>
               <div>
                 <div className="text-xs text-gray-600 mb-1">Started</div>
                 <div className="text-sm font-medium text-gray-900">
-                  <span title={formatFullTimestamp(run.started_at)}>
-                    {formatRelativeTime(run.started_at)}
+                  <span title={formatFullTimestamp(run.startedAt)}>
+                    {formatRelativeTime(run.startedAt)}
                   </span>
                 </div>
               </div>
               <div>
                 <div className="text-xs text-gray-600 mb-1">Triggered by</div>
                 <div className="text-sm font-medium text-gray-900">
-                  {run.triggered_by || 'System'} ({run.trigger_type})
+                  {run.triggeredBy || 'System'} ({run.triggerType})
                 </div>
               </div>
             </div>

package/src/components/FunnelRunHistory/RunFilters.tsx

@@ -39,15 +39,15 @@ export function RunFilters({
   const clearFilters = () => {
     onFiltersChange({
       status: 'all',
-      trigger_type: 'all',
-      date_range: 'month',
+      triggerType: 'all',
+      dateRange: 'month',
     });
   };
 
   const hasActiveFilters =
     filters.status !== 'all' ||
-    filters.trigger_type !== 'all' ||
-    filters.date_range !== 'month';
+    filters.triggerType !== 'all' ||
+    filters.dateRange !== 'month';
 
   return (
     <div
@@ -82,9 +82,9 @@ export function RunFilters({
         </label>
         <select
           id="trigger-filter"
-          value={filters.trigger_type || 'all'}
+          value={filters.triggerType || 'all'}
           onChange={(e) =>
-            updateFilter('trigger_type', e.target.value as TriggerType | 'all')
+            updateFilter('triggerType', e.target.value as TriggerType | 'all')
           }
           className="px-2 py-1 text-sm border border-gray-300 rounded-md bg-white focus:outline-none focus:ring-2 focus:ring-blue-500"
         >
@@ -103,8 +103,8 @@ export function RunFilters({
         </label>
         <select
           id="date-filter"
-          value={filters.date_range || 'month'}
-          onChange={(e) => updateFilter('date_range', e.target.value as any)}
+          value={filters.dateRange || 'month'}
+          onChange={(e) => updateFilter('dateRange', e.target.value as any)}
           className="px-2 py-1 text-sm border border-gray-300 rounded-md bg-white focus:outline-none focus:ring-2 focus:ring-blue-500"
         >
           <option value="all">All time</option>