This commit is contained in:
2026-02-04 01:05:00 +00:00
parent f9222627ef
commit d02d95e680
30 changed files with 2449 additions and 326 deletions

View File

@@ -36,20 +36,18 @@ import {
Search,
Loader2,
ExternalLink,
MessageSquare,
Twitter,
Globe,
Users,
HelpCircle,
Filter,
ChevronDown,
ChevronUp,
Settings,
Target,
Zap,
AlertCircle,
BarChart3,
CheckCircle2,
Eye,
Plus,
X,
Users,
Copy
} from 'lucide-react'
import { useProject } from '@/components/project-context'
@@ -90,6 +88,74 @@ const STRATEGY_GROUPS: { title: string; description: string; strategies: SearchS
},
]
function ChannelLogo({ id }: { id: string }) {
const common = "h-4 w-4 text-foreground"
const wrapper = "flex h-7 w-7 items-center justify-center rounded-md border border-border/60 bg-background"
const icons: Record<string, JSX.Element> = {
reddit: (
<svg viewBox="0 0 24 24" className={common} aria-hidden="true">
<path
fill="currentColor"
d="M14.87 2.5a.75.75 0 0 0-.85.62l-.52 3.24a9.49 9.49 0 0 0-3.86.03L7.7 5.1a.75.75 0 1 0-1.4.53l1.95 5.18A5.98 5.98 0 0 0 6 12.25c0 2.7 2.69 4.88 6 4.88s6-2.18 6-4.88a5.98 5.98 0 0 0-2.17-1.46l1.3-5.1a.75.75 0 1 0-1.46-.37l-1.26 4.94a9.6 9.6 0 0 0-2.32-.28c-.6 0-1.18.06-1.73.17l.35-2.18a.75.75 0 0 0-.62-.85l-.22-.03 4.04-.63a.75.75 0 0 0 .62-.85Z"
/>
<circle cx="9" cy="12.7" r="1.1" fill="currentColor" />
<circle cx="15" cy="12.7" r="1.1" fill="currentColor" />
<path fill="currentColor" d="M8.7 15.4a6 6 0 0 0 6.6 0 .6.6 0 0 0-.7-1 4.8 4.8 0 0 1-5.2 0 .6.6 0 0 0-.7 1Z" />
</svg>
),
twitter: (
<svg viewBox="0 0 24 24" className={common} aria-hidden="true">
<path
fill="currentColor"
d="M17.5 3h3.1l-6.8 7.8L21 21h-5.6l-4.4-5.7L5.9 21H2.8l7.3-8.4L3 3h5.7l4 5.3L17.5 3Zm-1 16h1.7L7.6 4.9H5.8L16.5 19Z"
/>
</svg>
),
hackernews: (
<svg viewBox="0 0 24 24" className={common} aria-hidden="true">
<path fill="currentColor" d="M4 3h16v18H4V3Zm3.2 4.2h2l2.8 4.7 2.8-4.7h2l-3.8 6v3.6h-1.8V13l-4-5.8Z" />
</svg>
),
indiehackers: (
<svg viewBox="0 0 24 24" className={common} aria-hidden="true">
<path fill="currentColor" d="M4 4h16v4H4V4Zm0 6h16v4H4v-4Zm0 6h16v4H4v-4Z" />
</svg>
),
quora: (
<svg viewBox="0 0 24 24" className={common} aria-hidden="true">
<path
fill="currentColor"
d="M12 3.5a8.5 8.5 0 1 0 5.7 14.8l2 2.2a.8.8 0 1 0 1.2-1.1l-2.1-2.3A8.5 8.5 0 0 0 12 3.5Zm0 1.8a6.7 6.7 0 1 1-4.7 11.4 6.7 6.7 0 0 1 4.7-11.4Z"
/>
</svg>
),
stackoverflow: (
<svg viewBox="0 0 24 24" className={common} aria-hidden="true">
<path
fill="currentColor"
d="M17.9 21H7.4v-5.6h1.8v3.8h6.9v-3.8H17.9V21Zm-7.6-6.2.3-1.8 6.9 1.1-.3 1.8-6.9-1.1Zm1-3.7.7-1.7 6.4 2.7-.7 1.7-6.4-2.7Zm2-3.4 1.1-1.4 5.5 4.2-1.1 1.4-5.5-4.2Zm3.2-3.3 1.4-1.1 4.1 5.6-1.4 1.1-4.1-5.6Z"
/>
</svg>
),
linkedin: (
<svg viewBox="0 0 24 24" className={common} aria-hidden="true">
<path
fill="currentColor"
d="M5.2 8.2H2.6V21h2.6V8.2Zm-.1-4.7a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3ZM21 13.2c0-3.1-1.6-4.6-4-4.6-1.8 0-2.6 1-3.1 1.7V8.2h-2.6c.1 1.3 0 12.8 0 12.8h2.6v-7.1c0-.4 0-.8.1-1.1.3-.8 1-1.6 2.1-1.6 1.5 0 2.1 1.2 2.1 2.9V21H21v-7.8Z"
/>
</svg>
),
}
const icon = icons[id]
return (
<div className={wrapper}>
{icon || <Globe className={common} />}
</div>
)
}
const GOAL_PRESETS: {
id: string
title: string
@@ -147,11 +213,15 @@ export default function OpportunitiesPage() {
const [lastSearchConfig, setLastSearchConfig] = useState<SearchConfig | null>(null)
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 [showAdvanced, setShowAdvanced] = useState(false)
const [showSourceDialog, setShowSourceDialog] = useState(false)
const [customSourceName, setCustomSourceName] = useState('')
const [customSourceSite, setCustomSourceSite] = useState('')
const [customSourceTemplate, setCustomSourceTemplate] = useState('{site} {term} {intent}')
const planLoadedRef = useRef<string | null>(null)
const defaultPlatformsRef = useRef<PlatformConfig[] | null>(null)
@@ -168,7 +238,6 @@ export default function OpportunitiesPage() {
projectId: selectedProjectId as any,
status: statusFilter === 'all' ? undefined : statusFilter,
intent: intentFilter === 'all' ? undefined : intentFilter,
minScore: minScore > 0 ? minScore / 100 : undefined,
limit,
}
: 'skip'
@@ -229,7 +298,7 @@ export default function OpportunitiesPage() {
})
.then(data => {
if (data) {
setPlatforms(data.platforms)
setPlatforms((prev) => (prev.length > 0 ? prev : data.platforms))
defaultPlatformsRef.current = data.platforms
}
})
@@ -254,7 +323,9 @@ export default function OpportunitiesPage() {
if (typeof parsed.goalPreset === 'string') {
setGoalPreset(parsed.goalPreset)
}
if (Array.isArray(parsed.platformIds)) {
if (Array.isArray(parsed.platforms)) {
setPlatforms(parsed.platforms)
} else if (Array.isArray(parsed.platformIds)) {
setPlatforms((prev) =>
prev.map((platform) => ({
...platform,
@@ -290,7 +361,7 @@ export default function OpportunitiesPage() {
goalPreset,
strategies,
maxQueries,
platformIds: platforms.filter((platform) => platform.enabled).map((platform) => platform.id),
platforms,
}
localStorage.setItem(key, JSON.stringify(payload))
}, [selectedProjectId, goalPreset, strategies, maxQueries, platforms])
@@ -307,6 +378,10 @@ export default function OpportunitiesPage() {
))
}
const removeCustomSource = (platformId: string) => {
setPlatforms(prev => prev.filter((platform) => platform.id !== platformId))
}
const toggleStrategy = (strategy: SearchStrategy) => {
setStrategies(prev =>
prev.includes(strategy)
@@ -323,6 +398,34 @@ export default function OpportunitiesPage() {
setMaxQueries(preset.maxQueries)
}
const addCustomSource = () => {
const name = customSourceName.trim()
const site = customSourceSite.trim().replace(/^https?:\/\//, '').replace(/\/.*$/, '')
if (!name || !site) return
const idSeed = `${name}-${site}`.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '')
const customId = `custom-${idSeed}-${Date.now().toString(36)}`
setPlatforms((prev) => [
...prev,
{
id: customId,
name,
icon: 'Globe',
enabled: true,
searchTemplate: customSourceTemplate.trim() || '{site} {term} {intent}',
rateLimit: 20,
site,
custom: true,
},
])
setCustomSourceName('')
setCustomSourceSite('')
setCustomSourceTemplate('{site} {term} {intent}')
setShowSourceDialog(false)
}
const executeSearch = async (overrideConfig?: SearchConfig) => {
if (!analysis) return
if (!selectedProjectId) return
@@ -452,55 +555,32 @@ export default function OpportunitiesPage() {
{/* Sidebar */}
<div className="w-96 border-r border-border bg-card flex flex-col">
<div className="p-4 border-b border-border space-y-1">
<h2 className="font-semibold flex items-center gap-2">
<Target className="h-5 w-5" />
Search Plan
</h2>
<div className="flex items-center justify-between">
<h2 className="font-semibold flex items-center gap-2">
<Target className="h-5 w-5" />
Search Setup
</h2>
<Button
variant="ghost"
size="icon"
onClick={() => setShowAdvanced(true)}
aria-label="Advanced settings"
>
<Settings className="h-4 w-4" />
</Button>
</div>
<p className="text-xs text-muted-foreground">
Pick a goal, tune channels, then run the scan.
Pick a goal, tune sources, then run the scan.
</p>
</div>
<ScrollArea className="flex-1 p-4 space-y-6">
{/* Goal presets */}
<div className="space-y-3">
<Label className="text-sm font-medium uppercase text-muted-foreground">Goal</Label>
<div className="grid gap-2">
{GOAL_PRESETS.map((preset) => (
<button
key={preset.id}
type="button"
onClick={() => applyGoalPreset(preset.id)}
className={`rounded-lg border px-3 py-2 text-left transition ${
goalPreset === preset.id
? "border-foreground/60 bg-muted/50"
: "border-border/60 hover:border-foreground/30 hover:bg-muted/40"
}`}
>
<div className="text-sm font-semibold">{preset.title}</div>
<div className="text-xs text-muted-foreground">{preset.description}</div>
</button>
))}
</div>
</div>
<Separator />
{/* Platforms */}
<div className="space-y-3">
<Label className="text-sm font-medium uppercase text-muted-foreground">Channels</Label>
<Label className="text-sm font-medium uppercase text-muted-foreground">Sources</Label>
<div className="grid gap-2">
{platforms.map(platform => {
const isEnabled = platform.enabled
const iconMap: Record<string, JSX.Element> = {
reddit: <MessageSquare className="h-4 w-4" />,
twitter: <Twitter className="h-4 w-4" />,
hackernews: <Zap className="h-4 w-4" />,
indiehackers: <Users className="h-4 w-4" />,
quora: <HelpCircle className="h-4 w-4" />,
stackoverflow: <Filter className="h-4 w-4" />,
linkedin: <Globe className="h-4 w-4" />
}
return (
<button
key={platform.id}
@@ -510,12 +590,10 @@ export default function OpportunitiesPage() {
isEnabled
? "border-foreground/50 bg-muted/50"
: "border-border/60 hover:border-foreground/30 hover:bg-muted/40"
}`}
}`}
>
<div className="flex items-center gap-2">
<div className="flex h-7 w-7 items-center justify-center rounded-md bg-background">
{iconMap[platform.id] || <Globe className="h-4 w-4" />}
</div>
<ChannelLogo id={platform.id} />
<div>
<div className="text-sm font-medium">{platform.name}</div>
<div className="text-xs text-muted-foreground">
@@ -523,50 +601,46 @@ export default function OpportunitiesPage() {
</div>
</div>
</div>
<Checkbox checked={isEnabled} />
<div className="flex items-center gap-2">
{platform.custom && (
<Button
type="button"
variant="ghost"
size="icon"
onClick={(event) => {
event.stopPropagation()
removeCustomSource(platform.id)
}}
className="h-7 w-7"
>
<X className="h-4 w-4" />
</Button>
)}
<Checkbox checked={isEnabled} />
</div>
</button>
)
})}
</div>
<Button
type="button"
variant="outline"
size="sm"
onClick={() => setShowSourceDialog(true)}
className="w-full"
>
<Plus className="mr-2 h-4 w-4" />
Add source
</Button>
</div>
<Separator />
{/* Strategies */}
<div className="space-y-4">
<Label className="text-sm font-medium uppercase text-muted-foreground">Signals</Label>
{STRATEGY_GROUPS.map((group) => (
<div key={group.title} className="space-y-2">
<div>
<div className="text-sm font-semibold">{group.title}</div>
<div className="text-xs text-muted-foreground">{group.description}</div>
</div>
<div className="space-y-2">
{group.strategies.map((strategy) => (
<div key={strategy} className="flex items-start gap-2 rounded-md border border-border/60 px-2 py-2">
<Checkbox
id={strategy}
checked={strategies.includes(strategy)}
onCheckedChange={() => toggleStrategy(strategy)}
/>
<div className="flex-1">
<Label htmlFor={strategy} className="cursor-pointer text-sm font-medium">
{STRATEGY_INFO[strategy].name}
</Label>
<p className="text-xs text-muted-foreground">{STRATEGY_INFO[strategy].description}</p>
</div>
</div>
))}
</div>
</div>
))}
</div>
</ScrollArea>
<Separator />
{/* Queries */}
<div className="p-4 border-t border-border space-y-2">
<div className="space-y-2">
<Label className="text-sm font-medium uppercase text-muted-foreground">Max Queries</Label>
<Label className="text-sm font-medium uppercase text-muted-foreground">Search Volume</Label>
<div className="space-y-2">
<div className="flex items-center justify-between">
<span className="text-xs text-muted-foreground">Max Queries</span>
@@ -584,9 +658,6 @@ export default function OpportunitiesPage() {
</div>
</div>
</div>
</ScrollArea>
<div className="p-4 border-t border-border space-y-2">
<Button
onClick={() => executeSearch()}
disabled={
@@ -596,17 +667,17 @@ export default function OpportunitiesPage() {
}
className="w-full"
>
{isSearching ? <><Loader2 className="mr-2 h-4 w-4 animate-spin" /> Searching...</> : <><Search className="mr-2 h-4 w-4" /> Find Opportunities</>}
{isSearching ? <><Loader2 className="mr-2 h-4 w-4 animate-spin" /> Searching...</> : <><Search className="mr-2 h-4 w-4" /> Run Search</>}
</Button>
<div className="flex flex-wrap gap-2 text-xs text-muted-foreground">
<span>{enabledPlatforms.length || 0} channels</span>
<span>{enabledPlatforms.length || 0} sources</span>
<span>·</span>
<span>{strategies.length} signals</span>
<span>{strategies.length} triggers</span>
<span>·</span>
<span>max {maxQueries} queries</span>
</div>
{platforms.filter(p => p.enabled).length === 0 && (
<p className="text-xs text-muted-foreground">Select at least one platform to search.</p>
<p className="text-xs text-muted-foreground">Select at least one source to search.</p>
)}
{selectedSourceIds.length === 0 && (
<p className="text-xs text-muted-foreground">Select data sources to build search context.</p>
@@ -614,13 +685,127 @@ export default function OpportunitiesPage() {
</div>
</div>
<Dialog open={showAdvanced} onOpenChange={setShowAdvanced}>
<DialogContent className="max-w-xl max-h-[80vh] overflow-hidden">
<DialogHeader>
<DialogTitle>Advanced settings</DialogTitle>
<DialogDescription>Fine-tune goals and triggers for this search.</DialogDescription>
</DialogHeader>
<ScrollArea className="max-h-[60vh] pr-4">
<div className="space-y-6">
<div className="space-y-3">
<Label className="text-sm font-medium uppercase text-muted-foreground">Search Goal</Label>
<div className="grid gap-2">
{GOAL_PRESETS.map((preset) => (
<button
key={preset.id}
type="button"
onClick={() => applyGoalPreset(preset.id)}
className={`rounded-lg border px-3 py-2 text-left transition ${
goalPreset === preset.id
? "border-foreground/60 bg-muted/50"
: "border-border/60 hover:border-foreground/30 hover:bg-muted/40"
}`}
>
<div className="text-sm font-semibold">{preset.title}</div>
<div className="text-xs text-muted-foreground">{preset.description}</div>
</button>
))}
</div>
</div>
<div className="space-y-4">
<Label className="text-sm font-medium uppercase text-muted-foreground">Triggers</Label>
{STRATEGY_GROUPS.map((group) => (
<div key={group.title} className="space-y-2">
<div>
<div className="text-sm font-semibold">{group.title}</div>
<div className="text-xs text-muted-foreground">{group.description}</div>
</div>
<div className="space-y-2">
{group.strategies.map((strategy) => (
<div key={strategy} className="flex items-start gap-2 rounded-md border border-border/60 px-2 py-2">
<Checkbox
id={strategy}
checked={strategies.includes(strategy)}
onCheckedChange={() => toggleStrategy(strategy)}
/>
<div className="flex-1">
<Label htmlFor={strategy} className="cursor-pointer text-sm font-medium">
{STRATEGY_INFO[strategy].name}
</Label>
<p className="text-xs text-muted-foreground">{STRATEGY_INFO[strategy].description}</p>
</div>
</div>
))}
</div>
</div>
))}
</div>
</div>
</ScrollArea>
</DialogContent>
</Dialog>
<Dialog open={showSourceDialog} onOpenChange={setShowSourceDialog}>
<DialogContent className="max-w-lg">
<DialogHeader>
<DialogTitle>Add source</DialogTitle>
<DialogDescription>Add a custom site to search.</DialogDescription>
</DialogHeader>
<div className="space-y-4">
<div className="space-y-2">
<Label htmlFor="custom-source-name">Source name</Label>
<input
id="custom-source-name"
value={customSourceName}
onChange={(event) => setCustomSourceName(event.target.value)}
className="h-10 w-full rounded-md border border-input bg-background px-3 text-sm"
placeholder="e.g. Product Hunt"
/>
</div>
<div className="space-y-2">
<Label htmlFor="custom-source-site">Website domain</Label>
<input
id="custom-source-site"
value={customSourceSite}
onChange={(event) => setCustomSourceSite(event.target.value)}
className="h-10 w-full rounded-md border border-input bg-background px-3 text-sm"
placeholder="producthunt.com"
/>
</div>
<div className="space-y-2">
<Label htmlFor="custom-source-template">Search template</Label>
<Textarea
id="custom-source-template"
value={customSourceTemplate}
onChange={(event) => setCustomSourceTemplate(event.target.value)}
rows={3}
placeholder="{site} {term} {intent}"
/>
<p className="text-xs text-muted-foreground">
Use &#123;site&#125;, &#123;term&#125;, and &#123;intent&#125;.
</p>
</div>
</div>
<DialogFooter>
<Button variant="ghost" onClick={() => setShowSourceDialog(false)}>
Cancel
</Button>
<Button onClick={addCustomSource} disabled={!customSourceName.trim() || !customSourceSite.trim()}>
Add source
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
{/* Main Content */}
<div className="flex-1 overflow-auto p-6">
<div className="max-w-4xl mx-auto space-y-6">
{/* Header */}
<div className="flex flex-wrap items-center justify-between gap-3">
<div>
<h1 className="text-2xl font-bold">Opportunity Finder</h1>
<h1 className="text-2xl font-bold">Search Results</h1>
<p className="text-muted-foreground">Discover potential customers for {analysis.productName}</p>
</div>
{stats && (
@@ -629,10 +814,6 @@ export default function OpportunitiesPage() {
<div className="font-semibold">{stats.opportunitiesFound}</div>
<div className="text-muted-foreground">Found</div>
</div>
<div className="text-center">
<div className="font-semibold text-green-400">{stats.highRelevance}</div>
<div className="text-muted-foreground">High Quality</div>
</div>
</div>
)}
</div>
@@ -643,7 +824,7 @@ export default function OpportunitiesPage() {
{latestJob && (latestJob.status === "running" || latestJob.status === "pending") && (
<Card>
<CardHeader>
<CardTitle className="text-sm">Search in progress</CardTitle>
<CardTitle className="text-sm">Search running</CardTitle>
<CardDescription>
Current job: {latestJob.status}
</CardDescription>
@@ -688,7 +869,7 @@ export default function OpportunitiesPage() {
{activeSources.length > 0 && (
<Card>
<CardHeader>
<CardTitle className="text-sm">Active Data Sources</CardTitle>
<CardTitle className="text-sm">Inputs in use</CardTitle>
<CardDescription>
Sources selected for this project will drive opportunity search.
</CardDescription>
@@ -734,7 +915,7 @@ export default function OpportunitiesPage() {
<CollapsibleTrigger asChild>
<CardHeader className="cursor-pointer">
<div className="flex items-center justify-between">
<CardTitle className="text-sm">Generated Queries ({generatedQueries.length})</CardTitle>
<CardTitle className="text-sm">Search Queries ({generatedQueries.length})</CardTitle>
{showQueries ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
</div>
</CardHeader>
@@ -757,7 +938,7 @@ export default function OpportunitiesPage() {
<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>
<Label className="text-xs text-muted-foreground">Lead Status</Label>
<select
value={statusFilter}
onChange={(e) => setStatusFilter(e.target.value)}
@@ -773,7 +954,7 @@ export default function OpportunitiesPage() {
</select>
</div>
<div className="flex items-center gap-2">
<Label className="text-xs text-muted-foreground">Intent</Label>
<Label className="text-xs text-muted-foreground">Buyer Intent</Label>
<select
value={intentFilter}
onChange={(e) => setIntentFilter(e.target.value)}
@@ -787,17 +968,6 @@ export default function OpportunitiesPage() {
<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"
@@ -809,10 +979,9 @@ export default function OpportunitiesPage() {
<Table>
<TableHeader>
<TableRow>
<TableHead>Platform</TableHead>
<TableHead>Intent</TableHead>
<TableHead>Score</TableHead>
<TableHead>Status</TableHead>
<TableHead>Source</TableHead>
<TableHead>Buyer Intent</TableHead>
<TableHead>Lead Status</TableHead>
<TableHead className="w-1/2">Post</TableHead>
<TableHead>Actions</TableHead>
</TableRow>
@@ -827,11 +996,6 @@ export default function OpportunitiesPage() {
<span className="capitalize text-sm">{opp.intent}</span>
</div>
</TableCell>
<TableCell>
<Badge className={opp.relevanceScore >= 0.8 ? 'bg-green-500/20 text-green-400' : opp.relevanceScore >= 0.6 ? 'bg-amber-500/20 text-amber-400' : 'bg-red-500/20 text-red-400'}>
{Math.round(opp.relevanceScore * 100)}%
</Badge>
</TableCell>
<TableCell>
<Badge variant="secondary" className="capitalize">
{opp.status || 'new'}
@@ -866,7 +1030,7 @@ export default function OpportunitiesPage() {
<Card className="p-12 text-center">
<Search className="mx-auto h-12 w-12 text-muted-foreground/50 mb-4" />
<h3 className="text-lg font-medium">Ready to Search</h3>
<p className="text-muted-foreground">Select platforms and strategies, then click Find Opportunities</p>
<p className="text-muted-foreground">Select sources and triggers, then click Run Search</p>
</Card>
)}
</div>
@@ -879,9 +1043,6 @@ export default function OpportunitiesPage() {
<>
<DialogHeader>
<div className="flex items-center gap-2">
<Badge className={selectedOpportunity.relevanceScore >= 0.8 ? 'bg-green-500/20 text-green-400' : selectedOpportunity.relevanceScore >= 0.6 ? 'bg-amber-500/20 text-amber-400' : 'bg-red-500/20 text-red-400'}>
{Math.round(selectedOpportunity.relevanceScore * 100)}% Match
</Badge>
<Badge variant="outline">{selectedOpportunity.platform}</Badge>
<Badge variant="secondary" className="capitalize">{selectedOpportunity.intent}</Badge>
</div>
@@ -892,7 +1053,7 @@ export default function OpportunitiesPage() {
<div className="space-y-4">
<div className="grid gap-4 md:grid-cols-2">
<div className="space-y-2">
<Label>Status</Label>
<Label>Lead Status</Label>
<select
value={statusInput}
onChange={(e) => setStatusInput(e.target.value)}
@@ -929,7 +1090,7 @@ export default function OpportunitiesPage() {
{selectedOpportunity.matchedKeywords.length > 0 && (
<div>
<Label className="text-sm text-muted-foreground">Matched Keywords</Label>
<Label className="text-sm text-muted-foreground">Keyword Matches</Label>
<div className="flex flex-wrap gap-2 mt-1">
{selectedOpportunity.matchedKeywords.map((kw, i) => (
<Badge key={i} variant="secondary">{kw}</Badge>
@@ -939,13 +1100,13 @@ export default function OpportunitiesPage() {
)}
<div className="bg-muted p-4 rounded-lg">
<Label className="text-sm text-muted-foreground">Suggested Approach</Label>
<Label className="text-sm text-muted-foreground">Suggested Outreach</Label>
<p className="text-sm mt-1">{selectedOpportunity.suggestedApproach}</p>
</div>
<div className="space-y-2">
<div className="flex items-center justify-between">
<Label>Generated Reply</Label>
<Label>Draft Reply</Label>
<div className="flex gap-2">
<Button variant="outline" size="sm" onClick={() => generateReply(selectedOpportunity)}>
<Zap className="h-3 w-3 mr-1" /> Generate