feat: Implement core application structure with new dashboard, settings, and help pages, and enhance opportunities management with persistence and filtering.

2026-02-03 20:05:30 +00:00
parent 609b9da020
commit 885bbbf954
21 changed files with 1282 additions and 106 deletions
--- a/app/(app)/dashboard/page.tsx
+++ b/app/(app)/dashboard/page.tsx
@@ -0,0 +1,132 @@
+"use client"
+
+import { useQuery } from "convex/react"
+import { api } from "@/convex/_generated/api"
+import { useProject } from "@/components/project-context"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+
+export default function Page() {
+    const { selectedProjectId } = useProject()
+    const projects = useQuery(api.projects.getProjects)
+    const analysis = useQuery(
+        api.analyses.getLatestByProject,
+        selectedProjectId ? { projectId: selectedProjectId as any } : "skip"
+    )
+
+    const selectedProject = projects?.find((project) => project._id === selectedProjectId)
+    const isLoading = selectedProjectId && analysis === undefined
+
+    if (!selectedProjectId && projects && projects.length === 0) {
+        return (
+            <div className="flex flex-1 items-center justify-center p-10 text-center">
+                <div className="space-y-2">
+                    <h2 className="text-xl font-semibold">No projects yet</h2>
+                    <p className="text-muted-foreground">Complete onboarding to create your first project.</p>
+                </div>
+            </div>
+        )
+    }
+
+    if (isLoading) {
+        return (
+            <div className="flex flex-1 items-center justify-center p-10 text-center text-muted-foreground">
+                Loading analysis...
+            </div>
+        )
+    }
+
+    if (!analysis) {
+        return (
+            <div className="flex flex-1 items-center justify-center p-10 text-center">
+                <div className="space-y-2">
+                    <h2 className="text-xl font-semibold">No analysis yet</h2>
+                    <p className="text-muted-foreground">Run onboarding to analyze a product for this project.</p>
+                </div>
+            </div>
+        )
+    }
+
+    return (
+        <div className="flex flex-1 flex-col gap-6 p-4 lg:p-8">
+            <div className="space-y-2">
+                <div className="flex items-center gap-2">
+                    <h1 className="text-2xl font-semibold">{analysis.productName}</h1>
+                    {selectedProject?.name && (
+                        <Badge variant="outline">{selectedProject.name}</Badge>
+                    )}
+                </div>
+                <p className="text-muted-foreground">{analysis.tagline}</p>
+                <p className="max-w-3xl text-sm text-muted-foreground">{analysis.description}</p>
+            </div>
+
+            <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-5">
+                <Card>
+                    <CardHeader className="pb-2">
+                        <CardTitle className="text-sm">Features</CardTitle>
+                    </CardHeader>
+                    <CardContent className="text-2xl font-semibold">{analysis.features.length}</CardContent>
+                </Card>
+                <Card>
+                    <CardHeader className="pb-2">
+                        <CardTitle className="text-sm">Keywords</CardTitle>
+                    </CardHeader>
+                    <CardContent className="text-2xl font-semibold">{analysis.keywords.length}</CardContent>
+                </Card>
+                <Card>
+                    <CardHeader className="pb-2">
+                        <CardTitle className="text-sm">Personas</CardTitle>
+                    </CardHeader>
+                    <CardContent className="text-2xl font-semibold">{analysis.personas.length}</CardContent>
+                </Card>
+                <Card>
+                    <CardHeader className="pb-2">
+                        <CardTitle className="text-sm">Competitors</CardTitle>
+                    </CardHeader>
+                    <CardContent className="text-2xl font-semibold">{analysis.competitors.length}</CardContent>
+                </Card>
+                <Card>
+                    <CardHeader className="pb-2">
+                        <CardTitle className="text-sm">Use Cases</CardTitle>
+                    </CardHeader>
+                    <CardContent className="text-2xl font-semibold">{analysis.useCases.length}</CardContent>
+                </Card>
+            </div>
+
+            <div className="grid gap-4 lg:grid-cols-2">
+                <Card>
+                    <CardHeader>
+                        <CardTitle className="text-base">Top Features</CardTitle>
+                    </CardHeader>
+                    <CardContent className="space-y-2">
+                        {analysis.features.slice(0, 6).map((feature, index) => (
+                            <div key={`${feature.name}-${index}`} className="flex items-start gap-2">
+                                <span className="mt-1 h-2 w-2 rounded-full bg-primary" />
+                                <div>
+                                    <p className="text-sm font-medium">{feature.name}</p>
+                                    <p className="text-xs text-muted-foreground">{feature.description}</p>
+                                </div>
+                            </div>
+                        ))}
+                    </CardContent>
+                </Card>
+                <Card>
+                    <CardHeader>
+                        <CardTitle className="text-base">Top Problems Solved</CardTitle>
+                    </CardHeader>
+                    <CardContent className="space-y-2">
+                        {analysis.problemsSolved.slice(0, 6).map((problem, index) => (
+                            <div key={`${problem.problem}-${index}`} className="flex items-start gap-2">
+                                <span className="mt-1 h-2 w-2 rounded-full bg-primary" />
+                                <div>
+                                    <p className="text-sm font-medium">{problem.problem}</p>
+                                    <p className="text-xs text-muted-foreground">{problem.emotionalImpact}</p>
+                                </div>
+                            </div>
+                        ))}
+                    </CardContent>
+                </Card>
+            </div>
+        </div>
+    )
+}
--- a/app/(app)/help/page.tsx
+++ b/app/(app)/help/page.tsx
@@ -0,0 +1,54 @@
+"use client"
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+
+export default function HelpPage() {
+  return (
+    <div className="flex flex-1 flex-col gap-6 p-4 lg:p-8">
+      <div className="space-y-2">
+        <h1 className="text-2xl font-semibold">Help</h1>
+        <p className="text-muted-foreground">Tips for getting the most out of Sanati.</p>
+      </div>
+
+      <div className="grid gap-4 lg:grid-cols-2">
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">Quickstart</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-2 text-sm text-muted-foreground">
+            <p>1. Run onboarding with your product URL or manual details.</p>
+            <p>2. Open Opportunities and pick platforms + strategies.</p>
+            <p>3. Review matches, generate replies, and track status.</p>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">Outreach Tips</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-2 text-sm text-muted-foreground">
+            <p>Lead with empathy and context, not a hard pitch.</p>
+            <p>Reference the specific problem the post mentions.</p>
+            <p>Offer help or a quick walkthrough before asking for a call.</p>
+          </CardContent>
+        </Card>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">Common Issues</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-3 text-sm text-muted-foreground">
+          <div>
+            <p className="font-medium text-foreground">Scrape fails</p>
+            <p>Use manual input or try a different URL (homepage works best).</p>
+          </div>
+          <div>
+            <p className="font-medium text-foreground">Search returns few results</p>
+            <p>Enable Serper API key or broaden strategies in the search config.</p>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
--- a/app/(app)/layout.tsx
+++ b/app/(app)/layout.tsx
@@ -1,22 +1,27 @@
 'use client'

-import { Sidebar } from '@/components/sidebar'
-import { useSearchParams } from 'next/navigation'
+import { AppSidebar } from "@/components/app-sidebar"
+import {
+  SidebarInset,
+  SidebarProvider,
+} from "@/components/ui/sidebar"
+import { ProjectProvider } from "@/components/project-context"

 export default function AppLayout({
  children,
 }: {
  children: React.ReactNode
 }) {
-  const searchParams = useSearchParams()
-  const productName = searchParams.get('product') || undefined
-
  return (
-    <div className="flex h-screen bg-background">
-      <Sidebar productName={productName} />
-      <main className="flex-1 overflow-auto">
-        {children}
-      </main>
-    </div>
+    <SidebarProvider>
+      <ProjectProvider>
+        <AppSidebar />
+        <SidebarInset>
+          <div className="flex min-h-svh flex-1 flex-col bg-background">
+            {children}
+          </div>
+        </SidebarInset>
+      </ProjectProvider>
+    </SidebarProvider>
  )
 }
--- a/app/(app)/opportunities/page.tsx
+++ b/app/(app)/opportunities/page.tsx
@@ -1,12 +1,15 @@
 'use client'

-import { useEffect, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { useRouter } from 'next/navigation'
+import { useMutation, useQuery } from 'convex/react'
+import { api } from '@/convex/_generated/api'
 import { Button } from '@/components/ui/button'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
 import { Badge } from '@/components/ui/badge'
 import { Checkbox } from '@/components/ui/checkbox'
 import { Slider } from '@/components/ui/slider'
+import { Alert, AlertDescription } from '@/components/ui/alert'
 import { Separator } from '@/components/ui/separator'
 import { ScrollArea } from '@/components/ui/scroll-area'
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'
@@ -47,6 +50,7 @@ import {
  Eye,
  Copy
 } from 'lucide-react'
+import { useProject } from '@/components/project-context'
 import type { 
  EnhancedProductAnalysis, 
  Opportunity, 
@@ -66,6 +70,9 @@ const STRATEGY_INFO: Record<SearchStrategy, { name: string; description: string

 export default function OpportunitiesPage() {
  const router = useRouter()
+  const { selectedProjectId } = useProject()
+  const upsertOpportunities = useMutation(api.opportunities.upsertBatch)
+  const updateOpportunity = useMutation(api.opportunities.updateStatus)
  const [analysis, setAnalysis] = useState<EnhancedProductAnalysis | null>(null)
  const [platforms, setPlatforms] = useState<PlatformConfig[]>([])
  const [strategies, setStrategies] = useState<SearchStrategy[]>([
@@ -81,6 +88,54 @@ export default function OpportunitiesPage() {
  const [selectedOpportunity, setSelectedOpportunity] = useState<Opportunity | null>(null)
  const [replyText, setReplyText] = useState('')
  const [stats, setStats] = useState<any>(null)
+  const [searchError, setSearchError] = useState('')
+  const [statusFilter, setStatusFilter] = useState('all')
+  const [intentFilter, setIntentFilter] = useState('all')
+  const [minScore, setMinScore] = useState(0)
+  const [limit, setLimit] = useState(50)
+  const [statusInput, setStatusInput] = useState('new')
+  const [notesInput, setNotesInput] = useState('')
+  const [tagsInput, setTagsInput] = useState('')
+
+  const latestAnalysis = useQuery(
+    api.analyses.getLatestByProject,
+    selectedProjectId ? { projectId: selectedProjectId as any } : 'skip'
+  )
+
+  const savedOpportunities = useQuery(
+    api.opportunities.listByProject,
+    selectedProjectId
+      ? {
+          projectId: selectedProjectId as any,
+          status: statusFilter === 'all' ? undefined : statusFilter,
+          intent: intentFilter === 'all' ? undefined : intentFilter,
+          minScore: minScore > 0 ? minScore / 100 : undefined,
+          limit,
+        }
+      : 'skip'
+  )
+
+  const displayOpportunities = useMemo(() => {
+    if (!savedOpportunities || savedOpportunities.length === 0) return opportunities
+    return savedOpportunities.map((opp: any) => ({
+      id: opp._id,
+      title: opp.title,
+      url: opp.url,
+      snippet: opp.snippet,
+      platform: opp.platform,
+      source: opp.platform,
+      relevanceScore: opp.relevanceScore,
+      emotionalIntensity: 'low',
+      intent: opp.intent,
+      matchedKeywords: opp.matchedKeywords,
+      matchedProblems: opp.matchedProblems,
+      suggestedApproach: opp.suggestedApproach,
+      softPitch: opp.softPitch,
+      status: opp.status,
+      notes: opp.notes,
+      tags: opp.tags,
+    })) as Opportunity[]
+  }, [savedOpportunities, opportunities])

  useEffect(() => {
    const stored = localStorage.getItem('productAnalysis')
@@ -121,9 +176,11 @@ export default function OpportunitiesPage() {

  const executeSearch = async () => {
    if (!analysis) return
+    if (!selectedProjectId) return

    setIsSearching(true)
    setOpportunities([])
+    setSearchError('')
    
    try {
      const config = {
@@ -147,12 +204,34 @@ export default function OpportunitiesPage() {
      const data = await response.json()
      
      if (data.success) {
-        setOpportunities(data.data.opportunities)
+        const mapped = data.data.opportunities.map((opp: Opportunity) => ({
+          ...opp,
+          status: 'new',
+        }))
+        setOpportunities(mapped)
        setGeneratedQueries(data.data.queries)
        setStats(data.data.stats)
+
+        await upsertOpportunities({
+          projectId: selectedProjectId as any,
+          analysisId: latestAnalysis?._id,
+          opportunities: mapped.map((opp: Opportunity) => ({
+            url: opp.url,
+            platform: opp.platform,
+            title: opp.title,
+            snippet: opp.snippet,
+            relevanceScore: opp.relevanceScore,
+            intent: opp.intent,
+            suggestedApproach: opp.suggestedApproach,
+            matchedKeywords: opp.matchedKeywords,
+            matchedProblems: opp.matchedProblems,
+            softPitch: opp.softPitch,
+          })),
+        })
      }
-    } catch (error) {
+    } catch (error: any) {
      console.error('Search error:', error)
+      setSearchError(error?.message || 'Search failed. Please try again.')
    } finally {
      setIsSearching(false)
    }
@@ -174,6 +253,30 @@ export default function OpportunitiesPage() {
    }
  }

+  useEffect(() => {
+    if (selectedOpportunity) {
+      setStatusInput(selectedOpportunity.status || 'new')
+      setNotesInput(selectedOpportunity.notes || '')
+      setTagsInput(selectedOpportunity.tags?.join(', ') || '')
+    }
+  }, [selectedOpportunity])
+
+  const handleSaveOpportunity = async () => {
+    if (!selectedOpportunity?.id) return
+
+    const tags = tagsInput
+      .split(',')
+      .map((tag) => tag.trim())
+      .filter(Boolean)
+
+    await updateOpportunity({
+      id: selectedOpportunity.id as any,
+      status: statusInput,
+      notes: notesInput || undefined,
+      tags: tags.length > 0 ? tags : undefined,
+    })
+  }
+
  if (!analysis) return null

  return (
@@ -280,6 +383,11 @@ export default function OpportunitiesPage() {
              </div>
            )}
          </div>
+          {searchError && (
+            <Alert variant="destructive">
+              <AlertDescription>{searchError}</AlertDescription>
+            </Alert>
+          )}

          {/* Generated Queries */}
          {generatedQueries.length > 0 && (
@@ -307,20 +415,72 @@ export default function OpportunitiesPage() {
          )}

          {/* Results Table */}
-          {opportunities.length > 0 ? (
+          {displayOpportunities.length > 0 ? (
            <Card>
+              <div className="flex flex-wrap items-center gap-3 border-b border-border p-4">
+                <div className="flex items-center gap-2">
+                  <Label className="text-xs text-muted-foreground">Status</Label>
+                  <select
+                    value={statusFilter}
+                    onChange={(e) => setStatusFilter(e.target.value)}
+                    className="h-8 rounded-md border border-input bg-background px-2 text-xs"
+                  >
+                    <option value="all">All</option>
+                    <option value="new">New</option>
+                    <option value="viewed">Viewed</option>
+                    <option value="contacted">Contacted</option>
+                    <option value="responded">Responded</option>
+                    <option value="converted">Converted</option>
+                    <option value="ignored">Ignored</option>
+                  </select>
+                </div>
+                <div className="flex items-center gap-2">
+                  <Label className="text-xs text-muted-foreground">Intent</Label>
+                  <select
+                    value={intentFilter}
+                    onChange={(e) => setIntentFilter(e.target.value)}
+                    className="h-8 rounded-md border border-input bg-background px-2 text-xs"
+                  >
+                    <option value="all">All</option>
+                    <option value="frustrated">Frustrated</option>
+                    <option value="comparing">Comparing</option>
+                    <option value="learning">Learning</option>
+                    <option value="recommending">Recommending</option>
+                    <option value="looking">Looking</option>
+                  </select>
+                </div>
+                <div className="flex items-center gap-2">
+                  <Label className="text-xs text-muted-foreground">Min Score</Label>
+                  <input
+                    type="number"
+                    min={0}
+                    max={100}
+                    value={minScore}
+                    onChange={(e) => setMinScore(Number(e.target.value))}
+                    className="h-8 w-20 rounded-md border border-input bg-background px-2 text-xs"
+                  />
+                </div>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => setLimit((prev) => prev + 50)}
+                >
+                  Load more
+                </Button>
+              </div>
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Platform</TableHead>
                    <TableHead>Intent</TableHead>
                    <TableHead>Score</TableHead>
+                    <TableHead>Status</TableHead>
                    <TableHead className="w-1/2">Post</TableHead>
                    <TableHead>Actions</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
-                  {opportunities.slice(0, 50).map((opp) => (
+                  {displayOpportunities.slice(0, limit).map((opp) => (
                    <TableRow key={opp.id}>
                      <TableCell><Badge variant="outline">{opp.platform}</Badge></TableCell>
                      <TableCell>
@@ -334,6 +494,11 @@ export default function OpportunitiesPage() {
                          {Math.round(opp.relevanceScore * 100)}%
                        </Badge>
                      </TableCell>
+                      <TableCell>
+                        <Badge variant="secondary" className="capitalize">
+                          {opp.status || 'new'}
+                        </Badge>
+                      </TableCell>
                      <TableCell>
                        <p className="font-medium line-clamp-1">{opp.title}</p>
                        <p className="text-sm text-muted-foreground line-clamp-2">{opp.snippet}</p>
@@ -387,6 +552,43 @@ export default function OpportunitiesPage() {
              </DialogHeader>

              <div className="space-y-4">
+                <div className="grid gap-4 md:grid-cols-2">
+                  <div className="space-y-2">
+                    <Label>Status</Label>
+                    <select
+                      value={statusInput}
+                      onChange={(e) => setStatusInput(e.target.value)}
+                      className="h-10 w-full rounded-md border border-input bg-background px-3 text-sm"
+                    >
+                      <option value="new">New</option>
+                      <option value="viewed">Viewed</option>
+                      <option value="contacted">Contacted</option>
+                      <option value="responded">Responded</option>
+                      <option value="converted">Converted</option>
+                      <option value="ignored">Ignored</option>
+                    </select>
+                  </div>
+                  <div className="space-y-2">
+                    <Label>Tags (comma separated)</Label>
+                    <input
+                      value={tagsInput}
+                      onChange={(e) => setTagsInput(e.target.value)}
+                      className="h-10 w-full rounded-md border border-input bg-background px-3 text-sm"
+                      placeholder="reddit, high-intent"
+                    />
+                  </div>
+                </div>
+
+                <div className="space-y-2">
+                  <Label>Notes</Label>
+                  <Textarea
+                    value={notesInput}
+                    onChange={(e) => setNotesInput(e.target.value)}
+                    placeholder="Add notes about this lead..."
+                    rows={3}
+                  />
+                </div>
+
                {selectedOpportunity.matchedKeywords.length > 0 && (
                  <div>
                    <Label className="text-sm text-muted-foreground">Matched Keywords</Label>
@@ -425,8 +627,11 @@ export default function OpportunitiesPage() {
                <Button variant="outline" onClick={() => window.open(selectedOpportunity.url, '_blank')}>
                  <ExternalLink className="h-4 w-4 mr-2" /> View Post
                </Button>
-                <Button onClick={() => setSelectedOpportunity(null)}>
-                  <CheckCircle2 className="h-4 w-4 mr-2" /> Mark as Viewed
+                <Button onClick={async () => {
+                  await handleSaveOpportunity()
+                  setSelectedOpportunity(null)
+                }}>
+                  <CheckCircle2 className="h-4 w-4 mr-2" /> Save Updates
                </Button>
              </DialogFooter>
            </>
--- a/app/(app)/settings/page.tsx
+++ b/app/(app)/settings/page.tsx
@@ -0,0 +1,53 @@
+"use client"
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+
+export default function SettingsPage() {
+  return (
+    <div className="flex flex-1 flex-col gap-6 p-4 lg:p-8">
+      <div className="space-y-2">
+        <h1 className="text-2xl font-semibold">Settings</h1>
+        <p className="text-muted-foreground">Manage account details and API configuration.</p>
+      </div>
+
+      <div className="grid gap-4 lg:grid-cols-2">
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">Account</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-2 text-sm text-muted-foreground">
+            <p>Signed in with Convex Auth.</p>
+            <p>Profile management can be added here in a later phase.</p>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">API Keys</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-3 text-sm text-muted-foreground">
+            <div className="space-y-1">
+              <p className="font-medium text-foreground">OpenAI</p>
+              <p>Set `OPENAI_API_KEY` in your `.env` file.</p>
+            </div>
+            <div className="space-y-1">
+              <p className="font-medium text-foreground">Serper (optional)</p>
+              <p>Set `SERPER_API_KEY` in your `.env` file for more reliable search.</p>
+            </div>
+            <Badge variant="outline">Reload server after changes</Badge>
+          </CardContent>
+        </Card>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">Billing</CardTitle>
+        </CardHeader>
+        <CardContent className="text-sm text-muted-foreground">
+          Billing is not configured yet. Add Stripe or another provider when ready.
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
--- a/app/dashboard/layout.tsx
+++ b/app/dashboard/layout.tsx
@@ -1,49 +0,0 @@
-import { AppSidebar } from "@/components/app-sidebar"
-import {
-    SidebarInset,
-    SidebarProvider,
-    SidebarTrigger,
-} from "@/components/ui/sidebar"
-import { Separator } from "@/components/ui/separator"
-import {
-    Breadcrumb,
-    BreadcrumbItem,
-    BreadcrumbLink,
-    BreadcrumbList,
-    BreadcrumbPage,
-    BreadcrumbSeparator,
-} from "@/components/ui/breadcrumb"
-
-export default function DashboardLayout({
-    children,
-}: {
-    children: React.ReactNode
-}) {
-    return (
-        <SidebarProvider>
-            <AppSidebar />
-            <SidebarInset>
-                <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
-                    <SidebarTrigger className="-ml-1" />
-                    <Separator orientation="vertical" className="mr-2 h-4" />
-                    <Breadcrumb>
-                        <BreadcrumbList>
-                            <BreadcrumbItem className="hidden md:block">
-                                <BreadcrumbLink href="#">
-                                    Platform
-                                </BreadcrumbLink>
-                            </BreadcrumbItem>
-                            <BreadcrumbSeparator className="hidden md:block" />
-                            <BreadcrumbItem>
-                                <BreadcrumbPage>Dashboard</BreadcrumbPage>
-                            </BreadcrumbItem>
-                        </BreadcrumbList>
-                    </Breadcrumb>
-                </header>
-                <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
-                    {children}
-                </div>
-            </SidebarInset>
-        </SidebarProvider>
-    )
-}
--- a/app/dashboard/page.tsx
+++ b/app/dashboard/page.tsx
@@ -1,17 +0,0 @@
-export default function Page() {
-    return (
-        <div className="flex flex-1 flex-col gap-4 p-4 lg:p-8">
-            <div className="grid auto-rows-min gap-4 md:grid-cols-3">
-                <div className="aspect-video rounded-xl bg-muted/50" />
-                <div className="aspect-video rounded-xl bg-muted/50" />
-                <div className="aspect-video rounded-xl bg-muted/50" />
-            </div>
-            <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50" >
-                <div className="flex items-center justify-center h-full text-muted-foreground p-10 text-center">
-                    <h2 className="text-xl font-semibold">Your Leads will appear here</h2>
-                    <p>Select data sources in the sidebar to start finding opportunities dorked from the web.</p>
-                </div>
-            </div>
-        </div>
-    )
-}
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,14 +1,11 @@
 import type { Metadata } from 'next'
-import { Montserrat } from 'next/font/google'
+import { Inter } from 'next/font/google'
 import './globals.css'
 import ConvexClientProvider from './ConvexClientProvider'
 import { ConvexAuthNextjsServerProvider } from "@convex-dev/auth/nextjs/server";
 import { ThemeProvider } from "@/components/theme-provider";

-const montserrat = Montserrat({
-  subsets: ['latin'],
-  weight: ['300', '400', '500', '600', '700'],
-})
+const inter = Inter({ subsets: ['latin'] })

 export const metadata: Metadata = {
  title: 'Sanati - Find Product Opportunities',
@@ -23,7 +20,7 @@ export default function RootLayout({
  return (
    <ConvexAuthNextjsServerProvider>
      <html lang="en" suppressHydrationWarning>
-        <body className={montserrat.className}>
+        <body className={inter.className}>
          <ThemeProvider
            attribute="class"
            defaultTheme="dark"
--- a/app/onboarding/page.tsx
+++ b/app/onboarding/page.tsx
@@ -10,7 +10,9 @@ import { Label } from '@/components/ui/label'
 import { Skeleton } from '@/components/ui/skeleton'
 import { Alert, AlertDescription } from '@/components/ui/alert'
 import { ArrowRight, Globe, Loader2, Sparkles, AlertCircle, ArrowLeft } from 'lucide-react'
-import type { ProductAnalysis } from '@/lib/types'
+import type { EnhancedProductAnalysis, Keyword } from '@/lib/types'
+import { useMutation } from 'convex/react'
+import { api } from '@/convex/_generated/api'

 const examples = [
  { name: 'Notion', url: 'https://notion.so' },
@@ -21,6 +23,8 @@ const examples = [

 export default function OnboardingPage() {
  const router = useRouter()
+  const addDataSource = useMutation(api.dataSources.addDataSource)
+  const createAnalysis = useMutation(api.analyses.createAnalysis)
  const [url, setUrl] = useState('')
  const [loading, setLoading] = useState(false)
  const [progress, setProgress] = useState('')
@@ -32,6 +36,28 @@ export default function OnboardingPage() {
  const [manualDescription, setManualDescription] = useState('')
  const [manualFeatures, setManualFeatures] = useState('')

+  const persistAnalysis = async ({
+    analysis,
+    sourceUrl,
+    sourceName,
+  }: {
+    analysis: EnhancedProductAnalysis
+    sourceUrl: string
+    sourceName: string
+  }) => {
+    const { sourceId, projectId } = await addDataSource({
+      url: sourceUrl,
+      name: sourceName,
+      type: 'website',
+    })
+
+    await createAnalysis({
+      projectId,
+      dataSourceId: sourceId,
+      analysis,
+    })
+  }
+
  async function analyzeWebsite() {
    if (!url) return

@@ -68,6 +94,13 @@ export default function OnboardingPage() {
      localStorage.setItem('productAnalysis', JSON.stringify(data.data))
      localStorage.setItem('analysisStats', JSON.stringify(data.stats))

+      setProgress('Saving analysis...')
+      await persistAnalysis({
+        analysis: data.data,
+        sourceUrl: url,
+        sourceName: data.data.productName,
+      })
+
      setProgress('Redirecting to dashboard...')

      // Redirect to dashboard with product name in query
@@ -90,16 +123,45 @@ export default function OnboardingPage() {

    try {
      // Create a mock analysis from manual input
-      const manualAnalysis: ProductAnalysis = {
+      const manualFeaturesList = manualFeatures
+        .split('\n')
+        .map((feature) => feature.trim())
+        .filter(Boolean)
+
+      const keywordSeed = manualProductName
+        .toLowerCase()
+        .split(' ')
+        .filter(Boolean)
+
+      const manualKeywords: Keyword[] = keywordSeed.map((term) => ({
+        term,
+        type: 'product',
+        searchVolume: 'low',
+        intent: 'informational',
+        funnel: 'awareness',
+        emotionalIntensity: 'curious',
+      }))
+
+      const manualAnalysis: EnhancedProductAnalysis = {
        productName: manualProductName,
        tagline: manualDescription.split('.')[0],
        description: manualDescription,
-        features: manualFeatures.split('\n').filter(f => f.trim()),
+        category: '',
+        positioning: '',
+        features: manualFeaturesList.map((name) => ({
+          name,
+          description: '',
+          benefits: [],
+          useCases: [],
+        })),
        problemsSolved: [],
-        targetAudience: [],
-        valuePropositions: [],
-        keywords: manualProductName.toLowerCase().split(' '),
-        scrapedAt: new Date().toISOString()
+        personas: [],
+        keywords: manualKeywords,
+        useCases: [],
+        competitors: [],
+        dorkQueries: [],
+        scrapedAt: new Date().toISOString(),
+        analysisVersion: 'manual',
      }

      // Send to API to enhance with AI
@@ -136,6 +198,13 @@ export default function OnboardingPage() {
        dorkQueries: finalAnalysis.dorkQueries.length
      }))

+      setProgress('Saving analysis...')
+      await persistAnalysis({
+        analysis: finalAnalysis,
+        sourceUrl: 'manual-input',
+        sourceName: finalAnalysis.productName,
+      })
+
      // Redirect to dashboard
      const params = new URLSearchParams({ product: finalAnalysis.productName })
      router.push(`/dashboard?${params.toString()}`)