From fbef08fe8e8877d7c48f656ad35997aaa7754e71 Mon Sep 17 00:00:00 2001
From: Ben Senescu <44480372+bensenescu@users.noreply.github.com>
Date: Tue, 9 Jun 2026 21:28:50 -0400
Subject: [PATCH] Remove unnecessary rank tracking details cards

---
 .../rank-tracking/RankTrackingOverview.tsx    | 284 +++++++-----------
 1 file changed, 101 insertions(+), 183 deletions(-)

diff --git a/src/client/features/rank-tracking/RankTrackingOverview.tsx b/src/client/features/rank-tracking/RankTrackingOverview.tsx
index 199087c..e13f7a1 100644
--- a/src/client/features/rank-tracking/RankTrackingOverview.tsx
+++ b/src/client/features/rank-tracking/RankTrackingOverview.tsx
@@ -12,7 +12,6 @@ import {
 import type { TooltipContentProps } from "recharts";
 import { getRankConfigTrend } from "@/serverFunctions/rank-tracking";
 import type { RankTrackingRow } from "@/types/schemas/rank-tracking";
-import { computeScorecards } from "./rankTrackingScorecards";
 import {
   formatDateTick,
   TrendRangeToggle,
@@ -45,11 +44,6 @@ export function RankTrackingOverview({
 }) {
   const [sinceDays, setSinceDays] = useState(730);
 
-  const scorecards = useMemo(
-    () => computeScorecards(rows, device),
-    [rows, device],
-  );
-
   const { data: trend, isLoading: trendLoading } = useQuery({
     queryKey: ["rankConfigTrend", projectId, configId, device, sinceDays],
     queryFn: () =>
@@ -74,153 +68,111 @@ export function RankTrackingOverview({
 
   return (
     <div className="px-4 pt-4 pb-4">
-      <div className="grid items-start gap-3 lg:grid-cols-2">
-        {/* All metrics in one card */}
-        <div className="rounded-lg border border-base-300 bg-base-100 p-4">
-          <div className="grid grid-cols-2 gap-x-4 gap-y-4 sm:grid-cols-3">
-            <Scorecard
-              label="Visibility"
-              value={
-                scorecards.visibility === null
-                  ? "-"
-                  : `${Math.round(scorecards.visibility)}%`
-              }
-              delta={scorecards.visibilityDelta}
-              hint="of click potential"
-            />
-            <Scorecard
-              label="Ranking"
-              value={String(scorecards.ranking)}
-              delta={scorecards.rankingDelta}
-              hint={`of ${rows.length} tracked`}
-            />
-            <Scorecard
-              label="In Top 3"
-              value={String(scorecards.top3)}
-              hint="of ranked keywords"
-            />
-            <Scorecard
-              label="In Top 10"
-              value={String(scorecards.top10)}
-              hint="includes Top 3"
-            />
-            <Scorecard
-              label="Improved / Declined"
-              value={`${scorecards.improved} / ${scorecards.declined}`}
-              hint="vs comparison period"
-            />
-          </div>
+      <div className="rounded-lg border border-base-300 p-3 space-y-2">
+        <div className="flex items-center justify-between gap-2">
+          <span className="text-sm font-medium">Position distribution</span>
+          <TrendRangeToggle value={sinceDays} onChange={setSinceDays} />
         </div>
 
-        {/* Position distribution */}
-        <div className="rounded-lg border border-base-300 p-3 space-y-2">
-          <div className="flex items-center justify-between gap-2">
-            <span className="text-sm font-medium">Position distribution</span>
-            <TrendRangeToggle value={sinceDays} onChange={setSinceDays} />
-          </div>
-
-          <div className="flex flex-wrap gap-x-3 gap-y-1">
-            {BUCKETS.map((b) => (
-              <span
-                key={b.key}
-                className="inline-flex items-center gap-1 text-[11px] text-base-content/60"
-              >
-                <span
-                  className="size-2 rounded-sm"
-                  style={{ backgroundColor: b.color }}
-                />
-                {b.label}
-              </span>
-            ))}
-          </div>
-
-          {trendLoading ? (
-            <div className="flex items-center justify-center p-8">
-              <Loader2 className="size-4 animate-spin text-base-content/50" />
-            </div>
-          ) : chartData.length <= 1 ? (
-            <div className="rounded-lg border border-dashed border-base-300 p-8 text-center text-xs text-base-content/60">
-              {chartData.length === 0
-                ? "No history yet — run a check to start tracking positions over time."
-                : "Only 1 check so far — the trend fills in after the next check."}
-            </div>
-          ) : (
-            <div
-              ref={containerRef}
-              className="w-full min-w-0"
-              style={{ height: 180 }}
+        <div className="flex flex-wrap gap-x-3 gap-y-1">
+          {BUCKETS.map((b) => (
+            <span
+              key={b.key}
+              className="inline-flex items-center gap-1 text-[11px] text-base-content/60"
             >
-              {width > 0 ? (
-                <AreaChart
-                  width={width}
-                  height={180}
-                  data={chartData}
-                  margin={{ top: 8, right: 8, bottom: 0, left: 0 }}
-                >
-                  <CartesianGrid
-                    strokeDasharray="3 3"
-                    stroke="currentColor"
-                    opacity={0.1}
-                    vertical={false}
-                  />
-                  <XAxis
-                    dataKey="checkedAt"
-                    type="number"
-                    scale="time"
-                    domain={["dataMin", "dataMax"]}
-                    tickFormatter={formatDateTick}
-                    tick={{ fontSize: 10, fill: "#888" }}
-                    tickLine={false}
-                    axisLine={false}
-                    minTickGap={32}
-                  />
-                  <YAxis
-                    allowDecimals={false}
-                    tick={{ fontSize: 10, fill: "#888" }}
-                    tickLine={false}
-                    axisLine={false}
-                    width={28}
-                  />
-                  <Tooltip
-                    content={(props: TooltipContentProps<number, string>) => {
-                      const { active, payload, label } = props;
-                      if (
-                        !active ||
-                        !payload?.length ||
-                        typeof label !== "number"
-                      ) {
-                        return null;
-                      }
-                      const byKey = new Map(
-                        payload.map((p: PayloadEntry) => [
-                          String(p.dataKey),
-                          typeof p.value === "number" ? p.value : 0,
-                        ]),
-                      );
-                      return (
-                        <DistributionTooltip label={label} byKey={byKey} />
-                      );
-                    }}
-                    cursor={{ stroke: "rgba(150,150,150,0.3)" }}
-                  />
-                  {BUCKETS.map((b) => (
-                    <Area
-                      key={b.key}
-                      type="monotone"
-                      dataKey={b.key}
-                      name={b.label}
-                      stackId="positions"
-                      stroke={b.color}
-                      fill={b.color}
-                      fillOpacity={0.7}
-                      isAnimationActive={false}
-                    />
-                  ))}
-                </AreaChart>
-              ) : null}
-            </div>
-          )}
+              <span
+                className="size-2 rounded-sm"
+                style={{ backgroundColor: b.color }}
+              />
+              {b.label}
+            </span>
+          ))}
         </div>
+
+        {trendLoading ? (
+          <div className="flex items-center justify-center p-8">
+            <Loader2 className="size-4 animate-spin text-base-content/50" />
+          </div>
+        ) : chartData.length <= 1 ? (
+          <div className="rounded-lg border border-dashed border-base-300 p-8 text-center text-xs text-base-content/60">
+            {chartData.length === 0
+              ? "No history yet — run a check to start tracking positions over time."
+              : "Only 1 check so far — the trend fills in after the next check."}
+          </div>
+        ) : (
+          <div
+            ref={containerRef}
+            className="w-full min-w-0"
+            style={{ height: 220 }}
+          >
+            {width > 0 ? (
+              <AreaChart
+                width={width}
+                height={220}
+                data={chartData}
+                margin={{ top: 8, right: 8, bottom: 0, left: 0 }}
+              >
+                <CartesianGrid
+                  strokeDasharray="3 3"
+                  stroke="currentColor"
+                  opacity={0.1}
+                  vertical={false}
+                />
+                <XAxis
+                  dataKey="checkedAt"
+                  type="number"
+                  scale="time"
+                  domain={["dataMin", "dataMax"]}
+                  tickFormatter={formatDateTick}
+                  tick={{ fontSize: 10, fill: "#888" }}
+                  tickLine={false}
+                  axisLine={false}
+                  minTickGap={32}
+                />
+                <YAxis
+                  allowDecimals={false}
+                  tick={{ fontSize: 10, fill: "#888" }}
+                  tickLine={false}
+                  axisLine={false}
+                  width={28}
+                />
+                <Tooltip
+                  content={(props: TooltipContentProps<number, string>) => {
+                    const { active, payload, label } = props;
+                    if (
+                      !active ||
+                      !payload?.length ||
+                      typeof label !== "number"
+                    ) {
+                      return null;
+                    }
+                    const byKey = new Map(
+                      payload.map((p: PayloadEntry) => [
+                        String(p.dataKey),
+                        typeof p.value === "number" ? p.value : 0,
+                      ]),
+                    );
+                    return <DistributionTooltip label={label} byKey={byKey} />;
+                  }}
+                  cursor={{ stroke: "rgba(150,150,150,0.3)" }}
+                />
+                {BUCKETS.map((b) => (
+                  <Area
+                    key={b.key}
+                    type="monotone"
+                    dataKey={b.key}
+                    name={b.label}
+                    stackId="positions"
+                    stroke={b.color}
+                    fill={b.color}
+                    fillOpacity={0.7}
+                    isAnimationActive={false}
+                  />
+                ))}
+              </AreaChart>
+            ) : null}
+          </div>
+        )}
       </div>
     </div>
   );
@@ -257,37 +209,3 @@ function DistributionTooltip({
     </div>
   );
 }
-
-function Scorecard({
-  label,
-  value,
-  delta,
-  hint,
-}: {
-  label: string;
-  value: string;
-  delta?: number | null;
-  hint?: string;
-}) {
-  return (
-    <div className="min-w-0">
-      <p className="text-xs text-base-content/55">{label}</p>
-      <div className="flex items-baseline gap-1.5">
-        <span className="text-xl font-semibold tabular-nums">{value}</span>
-        {delta != null && delta !== 0 && (
-          <span
-            className={`text-xs font-medium ${
-              delta > 0 ? "text-success" : "text-warning"
-            }`}
-          >
-            {delta > 0 ? "▲" : "▼"}{" "}
-            {Number.isInteger(delta)
-              ? Math.abs(delta)
-              : Math.abs(delta).toFixed(1)}
-          </span>
-        )}
-      </div>
-      {hint && <p className="text-[11px] text-base-content/45">{hint}</p>}
-    </div>
-  );
-}