a
This commit is contained in:
@@ -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 {site}, {term}, and {intent}.
|
||||
</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
|
||||
|
||||
Reference in New Issue
Block a user