spine-framework-cortex 0.1.18 → 0.2.0

package/pages/operations/InstallFunnelPage.tsx

@@ -0,0 +1,410 @@
+import React, { useState, useEffect } from 'react'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@core/components/ui/card'
+import { Badge } from '@core/components/ui/badge'
+import { Button } from '@core/components/ui/button'
+import { Progress } from '@core/components/ui/progress'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@core/components/ui/tabs'
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@core/components/ui/table'
+import { useApi } from '@core/hooks/useApi'
+import { formatDistanceToNow } from 'date-fns'
+import { Download, TrendingUp, Users, Package } from 'lucide-react'
+
+interface InstallMetrics {
+  total_downloads: number
+  unique_installers: number
+  active_instances: number
+  conversion_funnel: {
+    downloads: number
+    installations: number
+    first_use: number
+    claimed: number
+  }
+  install_trends: Array<{
+    date: string
+    downloads: number
+    installations: number
+  }>
+  recent_installs: Array<{
+    id: string
+    serial: string
+    app_version: string
+    environment: string
+    first_seen_at: string
+    last_signal_at: string
+    claimed_by?: string
+    claimed_at?: string
+    account_name?: string
+  }>
+  top_versions: Array<{
+    version: string
+    count: number
+    percentage: number
+  }>
+}
+
+export default function InstallFunnelPage() {
+  const [metrics, setMetrics] = useState<InstallMetrics | null>(null)
+  const [loading, setLoading] = useState(true)
+  const { apiFetch } = useApi()
+
+  useEffect(() => {
+    loadMetrics()
+  }, [])
+
+  const loadMetrics = async () => {
+    try {
+      const data = await apiFetch('/admin/install-funnel/metrics')
+      setMetrics(data)
+    } catch (error) {
+      console.error('Failed to load install metrics:', error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const exportData = async () => {
+    try {
+      const response = await apiFetch('/admin/install-funnel/exportData')
+      
+      // Create download link
+      const blob = new Blob([JSON.stringify(response, null, 2)], { type: 'application/json' })
+      const url = window.URL.createObjectURL(blob)
+      const a = document.createElement('a')
+      a.href = url
+      a.download = `install-funnel-${new Date().toISOString().split('T')[0]}.json`
+      document.body.appendChild(a)
+      a.click()
+      window.URL.revokeObjectURL(url)
+      document.body.removeChild(a)
+    } catch (error) {
+      console.error('Failed to export data:', error)
+    }
+  }
+
+  if (loading) {
+    return <div className="p-6">Loading install funnel data...</div>
+  }
+
+  const conversionRates = metrics ? {
+    download_to_install: (metrics.conversion_funnel.installations / metrics.conversion_funnel.downloads * 100) || 0,
+    install_to_use: (metrics.conversion_funnel.first_use / metrics.conversion_funnel.installations * 100) || 0,
+    use_to_claim: (metrics.conversion_funnel.claimed / metrics.conversion_funnel.first_use * 100) || 0
+  } : { download_to_install: 0, install_to_use: 0, use_to_claim: 0 }
+
+  return (
+    <div className="p-6 space-y-6">
+      <div className="flex justify-between items-center">
+        <div>
+          <h1 className="text-3xl font-bold">Install Funnel</h1>
+          <p className="text-muted-foreground">
+            Track downloads, installations, and adoption metrics
+          </p>
+        </div>
+        <div className="flex space-x-2">
+          <Button variant="outline" onClick={exportData}>
+            <Download className="w-4 h-4 mr-2" />
+            Export Data
+          </Button>
+          <Button onClick={loadMetrics}>Refresh</Button>
+        </div>
+      </div>
+
+      {/* Key Metrics */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium flex items-center">
+              <Download className="w-4 h-4 mr-2" />
+              Total Downloads
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{metrics?.total_downloads || 0}</div>
+            <p className="text-xs text-muted-foreground">
+              All-time downloads
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium flex items-center">
+              <Users className="w-4 h-4 mr-2" />
+              Unique Installers
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{metrics?.unique_installers || 0}</div>
+            <p className="text-xs text-muted-foreground">
+              Distinct installations
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium flex items-center">
+              <Package className="w-4 h-4 mr-2" />
+              Active Instances
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{metrics?.active_instances || 0}</div>
+            <p className="text-xs text-muted-foreground">
+              Used in last 7 days
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium flex items-center">
+              <TrendingUp className="w-4 h-4 mr-2" />
+              Overall Conversion
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">
+              {conversionRates.download_to_install.toFixed(1)}%
+            </div>
+            <p className="text-xs text-muted-foreground">
+              Download → Install
+            </p>
+          </CardContent>
+        </Card>
+      </div>
+
+      <Tabs defaultValue="funnel" className="space-y-4">
+        <TabsList>
+          <TabsTrigger value="funnel">Conversion Funnel</TabsTrigger>
+          <TabsTrigger value="instances">Instance Details</TabsTrigger>
+          <TabsTrigger value="trends">Installation Trends</TabsTrigger>
+          <TabsTrigger value="versions">Version Analytics</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="funnel" className="space-y-4">
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+            <Card>
+              <CardHeader>
+                <CardTitle>Conversion Funnel</CardTitle>
+                <CardDescription>User progression from download to claim</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <div className="space-y-4">
+                  {metrics?.conversion_funnel && (
+                    <>
+                      <div className="space-y-2">
+                        <div className="flex justify-between">
+                          <span>Downloads</span>
+                          <span className="font-medium">{metrics.conversion_funnel.downloads}</span>
+                        </div>
+                        <Progress value={100} className="h-2" />
+                      </div>
+                      
+                      <div className="space-y-2">
+                        <div className="flex justify-between">
+                          <span>Installations</span>
+                          <span className="font-medium">{metrics.conversion_funnel.installations}</span>
+                        </div>
+                        <Progress value={conversionRates.download_to_install} className="h-2" />
+                        <p className="text-xs text-muted-foreground">
+                          {conversionRates.download_to_install.toFixed(1)}% conversion
+                        </p>
+                      </div>
+                      
+                      <div className="space-y-2">
+                        <div className="flex justify-between">
+                          <span>First Use</span>
+                          <span className="font-medium">{metrics.conversion_funnel.first_use}</span>
+                        </div>
+                        <Progress value={conversionRates.install_to_use} className="h-2" />
+                        <p className="text-xs text-muted-foreground">
+                          {conversionRates.install_to_use.toFixed(1)}% conversion
+                        </p>
+                      </div>
+                      
+                      <div className="space-y-2">
+                        <div className="flex justify-between">
+                          <span>Claimed</span>
+                          <span className="font-medium">{metrics.conversion_funnel.claimed}</span>
+                        </div>
+                        <Progress value={conversionRates.use_to_claim} className="h-2" />
+                        <p className="text-xs text-muted-foreground">
+                          {conversionRates.use_to_claim.toFixed(1)}% conversion
+                        </p>
+                      </div>
+                    </>
+                  )}
+                </div>
+              </CardContent>
+            </Card>
+
+            <Card>
+              <CardHeader>
+                <CardTitle>Conversion Insights</CardTitle>
+                <CardDescription>Key metrics and drop-off points</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <div className="space-y-4">
+                  <div className="flex justify-between items-center p-3 bg-blue-50 rounded-lg">
+                    <div>
+                      <div className="font-medium">Download to Install</div>
+                      <div className="text-sm text-muted-foreground">
+                        {conversionRates.download_to_install.toFixed(1)}% conversion
+                      </div>
+                    </div>
+                    <Badge variant={conversionRates.download_to_install > 50 ? 'default' : 'destructive'}>
+                      {conversionRates.download_to_install > 50 ? 'Good' : 'Needs Attention'}
+                    </Badge>
+                  </div>
+                  
+                  <div className="flex justify-between items-center p-3 bg-green-50 rounded-lg">
+                    <div>
+                      <div className="font-medium">Install to Use</div>
+                      <div className="text-sm text-muted-foreground">
+                        {conversionRates.install_to_use.toFixed(1)}% conversion
+                      </div>
+                    </div>
+                    <Badge variant={conversionRates.install_to_use > 70 ? 'default' : 'destructive'}>
+                      {conversionRates.install_to_use > 70 ? 'Good' : 'Needs Attention'}
+                    </Badge>
+                  </div>
+                  
+                  <div className="flex justify-between items-center p-3 bg-purple-50 rounded-lg">
+                    <div>
+                      <div className="font-medium">Use to Claim</div>
+                      <div className="text-sm text-muted-foreground">
+                        {conversionRates.use_to_claim.toFixed(1)}% conversion
+                      </div>
+                    </div>
+                    <Badge variant={conversionRates.use_to_claim > 30 ? 'default' : 'destructive'}>
+                      {conversionRates.use_to_claim > 30 ? 'Good' : 'Needs Attention'}
+                    </Badge>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+        </TabsContent>
+
+        <TabsContent value="instances" className="space-y-4">
+          <Card>
+            <CardHeader>
+              <CardTitle>Recent Installations</CardTitle>
+              <CardDescription>Latest instance installations and their status</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>Instance ID</TableHead>
+                    <TableHead>Version</TableHead>
+                    <TableHead>Environment</TableHead>
+                    <TableHead>First Seen</TableHead>
+                    <TableHead>Last Activity</TableHead>
+                    <TableHead>Status</TableHead>
+                    <TableHead>Owner</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {metrics?.recent_installs?.map((instance) => (
+                    <TableRow key={instance.id}>
+                      <TableCell>
+                        <code className="text-xs bg-muted px-1 py-0.5 rounded">
+                          {instance.serial.slice(0, 12)}...
+                        </code>
+                      </TableCell>
+                      <TableCell>
+                        <Badge variant="outline">{instance.app_version}</Badge>
+                      </TableCell>
+                      <TableCell>
+                        <Badge 
+                          variant={instance.environment === 'production' ? 'default' : 'secondary'}
+                        >
+                          {instance.environment}
+                        </Badge>
+                      </TableCell>
+                      <TableCell>
+                        <div className="text-sm">
+                          {formatDistanceToNow(new Date(instance.first_seen_at), { addSuffix: true })}
+                        </div>
+                      </TableCell>
+                      <TableCell>
+                        <div className="text-sm">
+                          {formatDistanceToNow(new Date(instance.last_signal_at), { addSuffix: true })}
+                        </div>
+                      </TableCell>
+                      <TableCell>
+                        <Badge variant={instance.claimed_by ? 'default' : 'secondary'}>
+                          {instance.claimed_by ? 'Claimed' : 'Unclaimed'}
+                        </Badge>
+                      </TableCell>
+                      <TableCell>
+                        {instance.account_name ? (
+                          <div>
+                            <div className="font-medium text-sm">{instance.account_name}</div>
+                            <div className="text-xs text-muted-foreground">{instance.claimed_by}</div>
+                          </div>
+                        ) : (
+                          <span className="text-sm text-muted-foreground">Unclaimed</span>
+                        )}
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="trends" className="space-y-4">
+          <Card>
+            <CardHeader>
+              <CardTitle>Installation Trends</CardTitle>
+              <CardDescription>Daily download and installation activity</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="text-center py-8 text-muted-foreground">
+                <TrendingUp className="w-12 h-12 mx-auto mb-4 opacity-50" />
+                <p>Chart visualization would be implemented here</p>
+                <p className="text-sm">Showing {metrics?.install_trends?.length || 0} days of data</p>
+              </div>
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="versions" className="space-y-4">
+          <Card>
+            <CardHeader>
+              <CardTitle>Version Distribution</CardTitle>
+              <CardDescription>Active instances by version</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-3">
+                {metrics?.top_versions?.map((version) => (
+                  <div key={version.version} className="space-y-1">
+                    <div className="flex justify-between items-center">
+                      <div className="flex items-center space-x-2">
+                        <Badge variant="outline">{version.version}</Badge>
+                        <span className="text-sm text-muted-foreground">
+                          {version.count} instances
+                        </span>
+                      </div>
+                      <span className="font-medium">{version.percentage.toFixed(1)}%</span>
+                    </div>
+                    <div className="w-full bg-secondary rounded-full h-2">
+                      <div
+                        className="bg-primary h-2 rounded-full"
+                        style={{ width: `${version.percentage}%` }}
+                      />
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </CardContent>
+          </Card>
+        </TabsContent>
+      </Tabs>
+    </div>
+  )
+}

package/pages/operations/OperationsDashboard.tsx

@@ -0,0 +1,275 @@
+import React, { useState, useEffect } from 'react'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@core/components/ui/card'
+import { Badge } from '@core/components/ui/badge'
+import { Button } from '@core/components/ui/button'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@core/components/ui/tabs'
+import { useApi } from '@core/hooks/useApi'
+import { formatDistanceToNow } from 'date-fns'
+
+interface SignalMetrics {
+  total_signals: number
+  signals_today: number
+  signals_this_week: number
+  conversion_rate: number
+  top_sources: Array<{ source: string; count: number }>
+  recent_signals: Array<{
+    id: string
+    action_type: string
+    source: string
+    stage: string
+    created_at: string
+    account_name?: string
+  }>
+}
+
+interface FunnelMetrics {
+  anonymous_visitors: number
+  identified_users: number
+  installed_instances: number
+  conversion_rates: {
+    anonymous_to_identified: number
+    identified_to_installed: number
+  }
+  stage_distribution: Array<{
+    stage: string
+    count: number
+    percentage: number
+  }>
+}
+
+export default function OperationsDashboard() {
+  const [signalMetrics, setSignalMetrics] = useState<SignalMetrics | null>(null)
+  const [funnelMetrics, setFunnelMetrics] = useState<FunnelMetrics | null>(null)
+  const [loading, setLoading] = useState(true)
+  const { apiFetch } = useApi()
+
+  useEffect(() => {
+    loadMetrics()
+  }, [])
+
+  const loadMetrics = async () => {
+    try {
+      const [signals, funnel] = await Promise.all([
+        apiFetch('/admin/signals/metrics'),
+        apiFetch('/admin/funnel/metrics')
+      ])
+      setSignalMetrics(signals)
+      setFunnelMetrics(funnel)
+    } catch (error) {
+      console.error('Failed to load metrics:', error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  if (loading) {
+    return <div className="p-6">Loading operations dashboard...</div>
+  }
+
+  return (
+    <div className="p-6 space-y-6">
+      <div className="flex justify-between items-center">
+        <div>
+          <h1 className="text-3xl font-bold">Operations Dashboard</h1>
+          <p className="text-muted-foreground">
+            Monitor signal tracking, funnel performance, and system health
+          </p>
+        </div>
+        <Button onClick={loadMetrics}>Refresh</Button>
+      </div>
+
+      {/* Key Metrics */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium">Total Signals</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{signalMetrics?.total_signals || 0}</div>
+            <p className="text-xs text-muted-foreground">
+              +{signalMetrics?.signals_today || 0} today
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium">Conversion Rate</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{(signalMetrics?.conversion_rate || 0).toFixed(1)}%</div>
+            <p className="text-xs text-muted-foreground">
+              Last 30 days
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium">Active Users</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{funnelMetrics?.identified_users || 0}</div>
+            <p className="text-xs text-muted-foreground">
+              Identified users
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium">Installations</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{funnelMetrics?.installed_instances || 0}</div>
+            <p className="text-xs text-muted-foreground">
+              Active instances
+            </p>
+          </CardContent>
+        </Card>
+      </div>
+
+      <Tabs defaultValue="signals" className="space-y-4">
+        <TabsList>
+          <TabsTrigger value="signals">Signal Analytics</TabsTrigger>
+          <TabsTrigger value="funnel">Funnel Performance</TabsTrigger>
+          <TabsTrigger value="health">System Health</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="signals" className="space-y-4">
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+            <Card>
+              <CardHeader>
+                <CardTitle>Top Signal Sources</CardTitle>
+                <CardDescription>Most active signal sources</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <div className="space-y-2">
+                  {signalMetrics?.top_sources?.map((source, index) => (
+                    <div key={source.source} className="flex justify-between items-center">
+                      <div className="flex items-center space-x-2">
+                        <Badge variant="outline">{index + 1}</Badge>
+                        <span className="capitalize">{source.source}</span>
+                      </div>
+                      <span className="font-medium">{source.count}</span>
+                    </div>
+                  ))}
+                </div>
+              </CardContent>
+            </Card>
+
+            <Card>
+              <CardHeader>
+                <CardTitle>Recent Signals</CardTitle>
+                <CardDescription>Latest signal activity</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <div className="space-y-2">
+                  {signalMetrics?.recent_signals?.slice(0, 10).map((signal) => (
+                    <div key={signal.id} className="flex justify-between items-center text-sm">
+                      <div>
+                        <span className="font-medium">{signal.action_type}</span>
+                        <div className="text-muted-foreground">
+                          {signal.account_name || 'Anonymous'} • {signal.source}
+                        </div>
+                      </div>
+                      <div className="text-right">
+                        <Badge variant="outline" className="text-xs">
+                          {signal.stage}
+                        </Badge>
+                        <div className="text-xs text-muted-foreground">
+                          {formatDistanceToNow(new Date(signal.created_at), { addSuffix: true })}
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+        </TabsContent>
+
+        <TabsContent value="funnel" className="space-y-4">
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+            <Card>
+              <CardHeader>
+                <CardTitle>Funnel Stages</CardTitle>
+                <CardDescription>User progression through funnel</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <div className="space-y-3">
+                  {funnelMetrics?.stage_distribution?.map((stage) => (
+                    <div key={stage.stage} className="space-y-1">
+                      <div className="flex justify-between text-sm">
+                        <span className="capitalize">{stage.stage}</span>
+                        <span>{stage.count} ({stage.percentage.toFixed(1)}%)</span>
+                      </div>
+                      <div className="w-full bg-secondary rounded-full h-2">
+                        <div
+                          className="bg-primary h-2 rounded-full"
+                          style={{ width: `${stage.percentage}%` }}
+                        />
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </CardContent>
+            </Card>
+
+            <Card>
+              <CardHeader>
+                <CardTitle>Conversion Rates</CardTitle>
+                <CardDescription>Stage-to-stage conversion</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <div className="space-y-4">
+                  <div className="text-center">
+                    <div className="text-2xl font-bold text-green-600">
+                      {(funnelMetrics?.conversion_rates.anonymous_to_identified || 0).toFixed(1)}%
+                    </div>
+                    <p className="text-sm text-muted-foreground">
+                      Anonymous → Identified
+                    </p>
+                  </div>
+                  <div className="text-center">
+                    <div className="text-2xl font-bold text-blue-600">
+                      {(funnelMetrics?.conversion_rates.identified_to_installed || 0).toFixed(1)}%
+                    </div>
+                    <p className="text-sm text-muted-foreground">
+                      Identified → Installed
+                    </p>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+        </TabsContent>
+
+        <TabsContent value="health" className="space-y-4">
+          <Card>
+            <CardHeader>
+              <CardTitle>System Health</CardTitle>
+              <CardDescription>Overall system status and performance</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div className="text-center">
+                  <div className="text-2xl font-bold text-green-600">Healthy</div>
+                  <p className="text-sm text-muted-foreground">Signal Processing</p>
+                </div>
+                <div className="text-center">
+                  <div className="text-2xl font-bold text-green-600">Operational</div>
+                  <p className="text-sm text-muted-foreground">Database</p>
+                </div>
+                <div className="text-center">
+                  <div className="text-2xl font-bold text-green-600">Normal</div>
+                  <p className="text-sm text-muted-foreground">API Response</p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </TabsContent>
+      </Tabs>
+    </div>
+  )
+}