feat: add Search panel to dashboard and enrich Search tab
Dashboard: compact Search Performance panel showing top 5 queries, clicks, impressions, and avg position alongside Campaigns. Search tab: clicks/impressions trend chart, top query position tracker cards, and new queries badge.
This commit is contained in:
Usman Baig
125
components/dashboard/SearchPerformance.tsx
Normal file
125
components/dashboard/SearchPerformance.tsx
Normal file
@@ -0,0 +1,125 @@
|
||||
'use client'
|
||||
|
||||
import Link from 'next/link'
|
||||
import { MagnifyingGlass, CaretUp, CaretDown } from '@phosphor-icons/react'
|
||||
import { useGSCStatus, useGSCOverview, useGSCTopQueries } from '@/lib/swr/dashboard'
|
||||
|
||||
interface SearchPerformanceProps {
|
||||
siteId: string
|
||||
dateRange: { start: string; end: string }
|
||||
}
|
||||
|
||||
function ChangeArrow({ current, previous, invert = false }: { current: number; previous: number; invert?: boolean }) {
|
||||
if (!previous || previous === 0) return null
|
||||
const improved = invert ? current < previous : current > previous
|
||||
const same = current === previous
|
||||
if (same) return null
|
||||
return improved ? (
|
||||
<CaretUp className="w-3 h-3 text-emerald-500" weight="fill" />
|
||||
) : (
|
||||
<CaretDown className="w-3 h-3 text-red-500" weight="fill" />
|
||||
)
|
||||
}
|
||||
|
||||
export default function SearchPerformance({ siteId, dateRange }: SearchPerformanceProps) {
|
||||
const { data: gscStatus } = useGSCStatus(siteId)
|
||||
const { data: overview, isLoading: overviewLoading } = useGSCOverview(siteId, dateRange.start, dateRange.end)
|
||||
const { data: queriesData, isLoading: queriesLoading } = useGSCTopQueries(siteId, dateRange.start, dateRange.end, 5, 0)
|
||||
|
||||
// Don't render if GSC is not connected
|
||||
if (!gscStatus?.connected) return null
|
||||
|
||||
const isLoading = overviewLoading || queriesLoading
|
||||
const queries = queriesData?.queries ?? []
|
||||
|
||||
return (
|
||||
<div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 h-full flex flex-col">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<MagnifyingGlass className="w-5 h-5 text-neutral-400 dark:text-neutral-500" weight="bold" />
|
||||
<h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
|
||||
Search
|
||||
</h3>
|
||||
</div>
|
||||
<Link
|
||||
href={`/sites/${siteId}/search`}
|
||||
className="text-xs font-medium text-neutral-400 dark:text-neutral-500 hover:text-brand-orange dark:hover:text-brand-orange transition-colors"
|
||||
>
|
||||
View all →
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{isLoading ? (
|
||||
/* Loading skeleton */
|
||||
<div className="flex-1 space-y-4">
|
||||
<div className="flex items-center gap-6">
|
||||
<div className="h-4 w-20 bg-neutral-100 dark:bg-neutral-800 rounded animate-pulse" />
|
||||
<div className="h-4 w-24 bg-neutral-100 dark:bg-neutral-800 rounded animate-pulse" />
|
||||
<div className="h-4 w-20 bg-neutral-100 dark:bg-neutral-800 rounded animate-pulse" />
|
||||
</div>
|
||||
<div className="space-y-2 mt-4">
|
||||
{Array.from({ length: 5 }).map((_, i) => (
|
||||
<div key={i} className="h-9 bg-neutral-100 dark:bg-neutral-800 rounded-lg animate-pulse" />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{/* Inline stats row */}
|
||||
<div className="flex items-center gap-5 mb-4">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className="text-xs text-neutral-500 dark:text-neutral-400">Clicks</span>
|
||||
<span className="text-sm font-semibold text-neutral-900 dark:text-white">
|
||||
{(overview?.total_clicks ?? 0).toLocaleString()}
|
||||
</span>
|
||||
<ChangeArrow current={overview?.total_clicks ?? 0} previous={overview?.prev_clicks ?? 0} />
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className="text-xs text-neutral-500 dark:text-neutral-400">Impressions</span>
|
||||
<span className="text-sm font-semibold text-neutral-900 dark:text-white">
|
||||
{(overview?.total_impressions ?? 0).toLocaleString()}
|
||||
</span>
|
||||
<ChangeArrow current={overview?.total_impressions ?? 0} previous={overview?.prev_impressions ?? 0} />
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className="text-xs text-neutral-500 dark:text-neutral-400">Avg Position</span>
|
||||
<span className="text-sm font-semibold text-neutral-900 dark:text-white">
|
||||
{(overview?.avg_position ?? 0).toFixed(1)}
|
||||
</span>
|
||||
<ChangeArrow current={overview?.avg_position ?? 0} previous={overview?.prev_avg_position ?? 0} invert />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Top 5 queries list */}
|
||||
<div className="space-y-1 flex-1">
|
||||
{queries.length > 0 ? (
|
||||
queries.map((q) => (
|
||||
<div
|
||||
key={q.query}
|
||||
className="flex items-center justify-between h-9 group hover:bg-neutral-50 dark:hover:bg-neutral-800/50 rounded-lg px-2 -mx-2 transition-colors"
|
||||
>
|
||||
<span className="text-sm text-neutral-900 dark:text-white truncate flex-1 min-w-0" title={q.query}>
|
||||
{q.query}
|
||||
</span>
|
||||
<div className="flex items-center gap-3 ml-4 shrink-0">
|
||||
<span className="text-sm font-semibold text-neutral-600 dark:text-neutral-400">
|
||||
{q.clicks.toLocaleString()}
|
||||
</span>
|
||||
<span className="text-xs text-neutral-400 dark:text-neutral-500 bg-neutral-100 dark:bg-neutral-800 px-1.5 py-0.5 rounded font-medium">
|
||||
{q.position.toFixed(1)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<div className="flex-1 flex items-center justify-center py-6">
|
||||
<p className="text-sm text-neutral-400 dark:text-neutral-500">No search data yet</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
189
components/search/ClicksImpressionsChart.tsx
Normal file
189
components/search/ClicksImpressionsChart.tsx
Normal file
@@ -0,0 +1,189 @@
|
||||
'use client'
|
||||
|
||||
import { useMemo } from 'react'
|
||||
import { useTheme } from '@ciphera-net/ui'
|
||||
import { Area, CartesianGrid, ComposedChart, Line, XAxis, YAxis } from 'recharts'
|
||||
import { ChartContainer, ChartTooltip, type ChartConfig } from '@/components/ui/line-charts-6'
|
||||
import { useGSCDailyTotals } from '@/lib/swr/dashboard'
|
||||
import { SkeletonLine } from '@/components/skeletons'
|
||||
import { formatDateShort } from '@/lib/utils/formatDate'
|
||||
|
||||
// ─── Config ─────────────────────────────────────────────────────
|
||||
|
||||
const chartConfig = {
|
||||
clicks: { label: 'Clicks', color: '#FD5E0F' },
|
||||
impressions: { label: 'Impressions', color: '#9CA3AF' },
|
||||
} satisfies ChartConfig
|
||||
|
||||
// ─── Custom Tooltip ─────────────────────────────────────────────
|
||||
|
||||
interface TooltipProps {
|
||||
active?: boolean
|
||||
payload?: Array<{ dataKey: string; value: number; color: string }>
|
||||
label?: string
|
||||
}
|
||||
|
||||
function CustomTooltip({ active, payload, label }: TooltipProps) {
|
||||
if (!active || !payload?.length) return null
|
||||
|
||||
const clicks = payload.find((p) => p.dataKey === 'clicks')
|
||||
const impressions = payload.find((p) => p.dataKey === 'impressions')
|
||||
|
||||
return (
|
||||
<div className="rounded-lg border border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-800 p-3 shadow-sm shadow-black/5 min-w-[140px]">
|
||||
<div className="text-xs text-neutral-500 dark:text-neutral-400 mb-1.5">{label}</div>
|
||||
{clicks && (
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<div className="size-1.5 rounded-full" style={{ backgroundColor: '#FD5E0F' }} />
|
||||
<span className="text-neutral-500 dark:text-neutral-400">Clicks:</span>
|
||||
<span className="font-semibold text-neutral-900 dark:text-white">{clicks.value.toLocaleString()}</span>
|
||||
</div>
|
||||
)}
|
||||
{impressions && (
|
||||
<div className="flex items-center gap-2 text-sm mt-1">
|
||||
<div className="size-1.5 rounded-full" style={{ backgroundColor: '#9CA3AF' }} />
|
||||
<span className="text-neutral-500 dark:text-neutral-400">Impressions:</span>
|
||||
<span className="font-semibold text-neutral-900 dark:text-white">{impressions.value.toLocaleString()}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ─── Component ──────────────────────────────────────────────────
|
||||
|
||||
interface ClicksImpressionsChartProps {
|
||||
siteId: string
|
||||
startDate: string
|
||||
endDate: string
|
||||
}
|
||||
|
||||
export default function ClicksImpressionsChart({ siteId, startDate, endDate }: ClicksImpressionsChartProps) {
|
||||
const { resolvedTheme } = useTheme()
|
||||
const { data, isLoading } = useGSCDailyTotals(siteId, startDate, endDate)
|
||||
|
||||
const chartData = useMemo(() => {
|
||||
if (!data?.daily_totals?.length) return []
|
||||
return data.daily_totals.map((item) => ({
|
||||
date: formatDateShort(new Date(item.date + 'T00:00:00')),
|
||||
clicks: item.clicks,
|
||||
impressions: item.impressions,
|
||||
}))
|
||||
}, [data])
|
||||
|
||||
// Loading skeleton
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="rounded-xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-4 mb-6">
|
||||
<SkeletonLine className="h-4 w-36 mb-3" />
|
||||
<SkeletonLine className="h-64 w-full rounded-lg" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// No data — don't render anything
|
||||
if (!chartData.length) return null
|
||||
|
||||
const gridStroke = resolvedTheme === 'dark' ? '#374151' : '#e5e7eb'
|
||||
|
||||
return (
|
||||
<div className="rounded-xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-4 mb-6">
|
||||
<p className="text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-3">
|
||||
Clicks & Impressions
|
||||
</p>
|
||||
<ChartContainer
|
||||
config={chartConfig}
|
||||
className="h-64 w-full [&_.recharts-curve.recharts-tooltip-cursor]:stroke-[initial]"
|
||||
>
|
||||
<ComposedChart
|
||||
data={chartData}
|
||||
margin={{ top: 8, right: 8, left: 0, bottom: 8 }}
|
||||
>
|
||||
<defs>
|
||||
<linearGradient id="clicksFill" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stopColor="#FD5E0F" stopOpacity={0.15} />
|
||||
<stop offset="100%" stopColor="#FD5E0F" stopOpacity={0.01} />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<CartesianGrid
|
||||
horizontal={true}
|
||||
vertical={false}
|
||||
stroke={gridStroke}
|
||||
strokeOpacity={0.7}
|
||||
/>
|
||||
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
axisLine={false}
|
||||
tickLine={false}
|
||||
tick={{ fontSize: 11, fill: 'var(--chart-axis)' }}
|
||||
tickMargin={8}
|
||||
minTickGap={32}
|
||||
/>
|
||||
|
||||
<YAxis
|
||||
yAxisId="left"
|
||||
axisLine={false}
|
||||
tickLine={false}
|
||||
tick={{ fontSize: 11, fill: 'var(--chart-axis)' }}
|
||||
tickMargin={8}
|
||||
tickCount={5}
|
||||
tickFormatter={(v: number) => v.toLocaleString()}
|
||||
/>
|
||||
|
||||
<YAxis
|
||||
yAxisId="right"
|
||||
orientation="right"
|
||||
axisLine={false}
|
||||
tickLine={false}
|
||||
tick={{ fontSize: 11, fill: 'var(--chart-axis)' }}
|
||||
tickMargin={8}
|
||||
tickCount={5}
|
||||
tickFormatter={(v: number) => v.toLocaleString()}
|
||||
/>
|
||||
|
||||
<ChartTooltip content={<CustomTooltip />} cursor={{ strokeDasharray: '3 3', stroke: '#9ca3af' }} />
|
||||
|
||||
<Area
|
||||
yAxisId="left"
|
||||
type="bump"
|
||||
dataKey="clicks"
|
||||
fill="url(#clicksFill)"
|
||||
stroke="none"
|
||||
/>
|
||||
<Line
|
||||
yAxisId="left"
|
||||
type="bump"
|
||||
dataKey="clicks"
|
||||
stroke="#FD5E0F"
|
||||
strokeWidth={2}
|
||||
dot={false}
|
||||
activeDot={{
|
||||
r: 5,
|
||||
fill: '#FD5E0F',
|
||||
stroke: 'white',
|
||||
strokeWidth: 2,
|
||||
}}
|
||||
/>
|
||||
|
||||
<Line
|
||||
yAxisId="right"
|
||||
type="bump"
|
||||
dataKey="impressions"
|
||||
stroke="#9CA3AF"
|
||||
strokeWidth={2}
|
||||
dot={false}
|
||||
strokeDasharray="4 3"
|
||||
activeDot={{
|
||||
r: 5,
|
||||
fill: '#9CA3AF',
|
||||
stroke: 'white',
|
||||
strokeWidth: 2,
|
||||
}}
|
||||
/>
|
||||
</ComposedChart>
|
||||
</ChartContainer>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user