From 180657fe33386c72b840c64cac2e1a646b006ab2 Mon Sep 17 00:00:00 2001
From: Ben Senescu <44480372+bensenescu@users.noreply.github.com>
Date: Sat, 4 Apr 2026 17:19:34 -0400
Subject: [PATCH] feat: add filtering and sorting to domain overview (#74)

* feat: add filtering and sorting to domain overview

Add numeric range filters (traffic, volume, CPC, KD/score, rank) and
text include/exclude filters to the domain overview page. Make CPC and
Score columns sortable. Filters persist across searches and auto-apply
to new results.

* fix: match domain filter panel layout to keyword research pattern

Restructure DomainResultsCard to use border-separated sections instead
of card-body gap layout. Filters button now sits in a toolbar row with
keyword count and search, matching the keyword research page's design.

* fix: make filter text inputs full-width so labels stack above

* fix: prettier formatting

* fix: extract domain filtering logic to fix lint errors

Move filterAndSortKeywords into domainFiltering.ts to bring
controllerInternals under 350 lines. Use explicit key array
in useDomainFilters to avoid unsafe type assertion.

* feat: add optional helpText tooltip to SortableHeader

Reuses HeaderHelpLabel from keywords components to show hover
tooltips on CPC and Score column headers.

* save
---
 .../features/domain/DomainOverviewPage.tsx    |  12 +-
 .../domain/components/DomainFilterPanel.tsx   | 167 ++++++++++++++
 .../domain/components/DomainKeywordsTable.tsx |  14 +-
 .../domain/components/DomainResultsCard.tsx   | 210 +++++++++---------
 .../domain/components/DomainSearchCard.tsx    |   2 +
 .../domain/components/SortableHeader.tsx      |  16 +-
 src/client/features/domain/domainFiltering.ts | 111 +++++++++
 .../domainOverviewControllerInternals.ts      |  48 ++--
 .../features/domain/hooks/useDomainFilters.ts |  40 ++++
 src/client/features/domain/types.ts           |  32 ++-
 .../domain/useDomainOverviewController.ts     |   8 +
 src/client/features/domain/utils.ts           |  16 +-
 src/client/hooks/useDomainSearchHistory.ts    |   2 +-
 src/types/schemas/domain.ts                   |   2 +-
 14 files changed, 538 insertions(+), 142 deletions(-)
 create mode 100644 src/client/features/domain/components/DomainFilterPanel.tsx
 create mode 100644 src/client/features/domain/domainFiltering.ts
 create mode 100644 src/client/features/domain/hooks/useDomainFilters.ts

diff --git a/src/client/features/domain/DomainOverviewPage.tsx b/src/client/features/domain/DomainOverviewPage.tsx
index e27bd2d..a4e632a 100644
--- a/src/client/features/domain/DomainOverviewPage.tsx
+++ b/src/client/features/domain/DomainOverviewPage.tsx
@@ -114,8 +114,18 @@ export function DomainOverviewPage({
               visibleKeywords={state.visibleKeywords}
               filteredKeywords={state.filteredKeywords}
               filteredPages={state.filteredPages}
+              showFilters={state.showFilters}
+              setShowFilters={state.setShowFilters}
+              filtersForm={state.filtersForm}
+              activeFilterCount={state.activeFilterCount}
+              resetFilters={state.resetFilters}
               onTabChange={(tab) => {
-                if (tab === "pages" && searchState.sort === "rank") {
+                if (
+                  tab === "pages" &&
+                  (searchState.sort === "rank" ||
+                    searchState.sort === "score" ||
+                    searchState.sort === "cpc")
+                ) {
                   state.applySort("traffic", getDefaultSortOrder("traffic"));
                 }
                 state.setSearchParams({ tab });
diff --git a/src/client/features/domain/components/DomainFilterPanel.tsx b/src/client/features/domain/components/DomainFilterPanel.tsx
new file mode 100644
index 0000000..7efebc1
--- /dev/null
+++ b/src/client/features/domain/components/DomainFilterPanel.tsx
@@ -0,0 +1,167 @@
+import { RotateCcw } from "lucide-react";
+import type { useDomainFilters } from "@/client/features/domain/hooks/useDomainFilters";
+import type { DomainFilterValues } from "@/client/features/domain/types";
+
+type FilterForm = ReturnType<typeof useDomainFilters>["filtersForm"];
+
+type Props = {
+  filtersForm: FilterForm;
+  activeFilterCount: number;
+  resetFilters: () => void;
+};
+
+export function DomainFilterPanel({
+  filtersForm,
+  activeFilterCount,
+  resetFilters,
+}: Props) {
+  return (
+    <div className="border-b border-base-300 bg-gradient-to-b from-base-100 to-base-200/30 px-4 py-3 space-y-3">
+      <div className="flex flex-wrap items-center justify-between gap-2">
+        <div className="flex items-center gap-2">
+          <p className="text-sm font-semibold">Refine table results</p>
+          {activeFilterCount > 0 ? (
+            <span className="badge badge-xs badge-primary border-0 text-primary-content">
+              {activeFilterCount} active
+            </span>
+          ) : null}
+        </div>
+        <button
+          className="btn btn-xs btn-ghost gap-1"
+          onClick={resetFilters}
+          disabled={activeFilterCount === 0}
+        >
+          <RotateCcw className="size-3" />
+          Clear all
+        </button>
+      </div>
+
+      <div className="grid grid-cols-1 gap-3 lg:grid-cols-2">
+        <FilterTextInput
+          form={filtersForm}
+          name="include"
+          label="Include Terms"
+          placeholder="audit, checker, template"
+        />
+        <FilterTextInput
+          form={filtersForm}
+          name="exclude"
+          label="Exclude Terms"
+          placeholder="jobs, salary, course"
+        />
+      </div>
+
+      <div className="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5">
+        <FilterRangeInputs
+          form={filtersForm}
+          title="Traffic"
+          minName="minTraffic"
+          maxName="maxTraffic"
+        />
+        <FilterRangeInputs
+          form={filtersForm}
+          title="Volume"
+          minName="minVol"
+          maxName="maxVol"
+        />
+        <FilterRangeInputs
+          form={filtersForm}
+          title="CPC (USD)"
+          minName="minCpc"
+          maxName="maxCpc"
+          step="0.01"
+        />
+        <FilterRangeInputs
+          form={filtersForm}
+          title="Score (KD)"
+          minName="minKd"
+          maxName="maxKd"
+        />
+        <FilterRangeInputs
+          form={filtersForm}
+          title="Rank"
+          minName="minRank"
+          maxName="maxRank"
+        />
+      </div>
+    </div>
+  );
+}
+
+function FilterTextInput({
+  form,
+  name,
+  label,
+  placeholder,
+}: {
+  form: FilterForm;
+  name: "include" | "exclude";
+  label: string;
+  placeholder: string;
+}) {
+  return (
+    <label className="form-control gap-1.5">
+      <span className="text-[11px] font-semibold uppercase tracking-wide text-base-content/60">
+        {label}
+      </span>
+      <form.Field name={name}>
+        {(field) => (
+          <input
+            className="input input-bordered input-sm w-full bg-base-100"
+            placeholder={placeholder}
+            value={field.state.value}
+            onChange={(event) => field.handleChange(event.target.value)}
+          />
+        )}
+      </form.Field>
+    </label>
+  );
+}
+
+function FilterRangeInputs({
+  form,
+  title,
+  minName,
+  maxName,
+  step,
+}: {
+  form: FilterForm;
+  title: string;
+  minName: keyof DomainFilterValues;
+  maxName: keyof DomainFilterValues;
+  step?: string;
+}) {
+  return (
+    <div className="rounded-lg border border-base-300 bg-base-100 p-2.5 space-y-2">
+      <p className="text-[11px] font-semibold uppercase tracking-wide text-base-content/60">
+        {title}
+      </p>
+      <div className="grid grid-cols-2 gap-2">
+        <form.Field name={minName}>
+          {(field) => (
+            <input
+              className="input input-bordered input-xs bg-base-100"
+              placeholder="Min"
+              type="number"
+              step={step}
+              value={field.state.value}
+              onChange={(event) => field.handleChange(event.target.value)}
+            />
+          )}
+        </form.Field>
+        <form.Field name={maxName}>
+          {(field) => (
+            <input
+              className="input input-bordered input-xs bg-base-100"
+              placeholder="Max"
+              type="number"
+              step={step}
+              value={field.state.value}
+              onChange={(event) => field.handleChange(event.target.value)}
+            />
+          )}
+        </form.Field>
+      </div>
+    </div>
+  );
+}
diff --git a/src/client/features/domain/components/DomainKeywordsTable.tsx b/src/client/features/domain/components/DomainKeywordsTable.tsx
index 6319674..b2478c3 100644
--- a/src/client/features/domain/components/DomainKeywordsTable.tsx
+++ b/src/client/features/domain/components/DomainKeywordsTable.tsx
@@ -1,4 +1,3 @@
-import { HeaderHelpLabel } from "@/client/features/keywords/components";
 import { DifficultyBadge } from "@/client/features/domain/components/DifficultyBadge";
 import { SortableHeader } from "@/client/features/domain/components/SortableHeader";
 import { formatFloat, formatNumber } from "@/client/features/domain/utils";
@@ -78,13 +77,22 @@ export function DomainKeywordsTable({
               />
             </th>
             <th>
-              <HeaderHelpLabel label="CPC" helpText="Cost per click in USD." />
+              <SortableHeader
+                label="CPC"
+                helpText="Cost per click in USD."
+                isActive={sortMode === "cpc"}
+                order={currentSortOrder}
+                onClick={() => onSortClick("cpc")}
+              />
             </th>
             <th>URL</th>
             <th>
-              <HeaderHelpLabel
+              <SortableHeader
                 label="Score"
                 helpText="Keyword difficulty score."
+                isActive={sortMode === "score"}
+                order={currentSortOrder}
+                onClick={() => onSortClick("score")}
               />
             </th>
           </tr>
diff --git a/src/client/features/domain/components/DomainResultsCard.tsx b/src/client/features/domain/components/DomainResultsCard.tsx
index 0cf63a8..ce89b36 100644
--- a/src/client/features/domain/components/DomainResultsCard.tsx
+++ b/src/client/features/domain/components/DomainResultsCard.tsx
@@ -1,3 +1,4 @@
+import { type Dispatch, type SetStateAction } from "react";
 import {
   ChevronDown,
   Copy,
@@ -5,10 +6,13 @@ import {
   FileSpreadsheet,
   Save,
   Search,
+  SlidersHorizontal,
 } from "lucide-react";
 import { toast } from "sonner";
+import { DomainFilterPanel } from "@/client/features/domain/components/DomainFilterPanel";
 import { DomainKeywordsTable } from "@/client/features/domain/components/DomainKeywordsTable";
 import { DomainPagesTable } from "@/client/features/domain/components/DomainPagesTable";
+import type { useDomainFilters } from "@/client/features/domain/hooks/useDomainFilters";
 import {
   downloadCsv,
   keywordsToCsv,
@@ -33,6 +37,11 @@ type Props = {
   visibleKeywords: string[];
   filteredKeywords: KeywordRow[];
   filteredPages: PageRow[];
+  showFilters: boolean;
+  setShowFilters: Dispatch<SetStateAction<boolean>>;
+  filtersForm: ReturnType<typeof useDomainFilters>["filtersForm"];
+  activeFilterCount: number;
+  resetFilters: () => void;
   onTabChange: (tab: DomainActiveTab) => void;
   onSearchChange: (value: string) => void;
   onSaveKeywords: () => void;
@@ -51,6 +60,11 @@ export function DomainResultsCard({
   visibleKeywords,
   filteredKeywords,
   filteredPages,
+  showFilters,
+  setShowFilters,
+  filtersForm,
+  activeFilterCount,
+  resetFilters,
   onTabChange,
   onSearchChange,
   onSaveKeywords,
@@ -78,28 +92,105 @@ export function DomainResultsCard({
   const isKeywordsTab = activeTab === "keywords";
 
   return (
-    <div className="card bg-base-100 border border-base-300">
-      <div className="card-body gap-3">
-        <DomainResultsCardHeader
-          activeTab={activeTab}
-          selectedKeywordsCount={selectedKeywords.size}
-          onTabChange={onTabChange}
-          onSaveKeywords={onSaveKeywords}
-          onCopy={handleCopy}
-          onDownload={handleDownload}
-        />
-
-        <div className="flex justify-end">
-          <label className="input input-bordered input-sm w-full max-w-xs flex items-center gap-2">
-            <Search className="size-4 text-base-content/60" />
-            <input
-              placeholder="Search in results"
-              value={pendingSearch}
-              onChange={(event) => onSearchChange(event.target.value)}
-            />
-          </label>
+    <div className="border border-base-300 rounded-xl bg-base-100 overflow-hidden">
+      <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-3 px-4 py-3 border-b border-base-300">
+        <div role="tablist" className="tabs tabs-box w-fit">
+          <button
+            role="tab"
+            className={`tab ${activeTab === "keywords" ? "tab-active" : ""}`}
+            onClick={() => onTabChange("keywords")}
+          >
+            Top Keywords
+          </button>
+          <button
+            role="tab"
+            className={`tab ${activeTab === "pages" ? "tab-active" : ""}`}
+            onClick={() => onTabChange("pages")}
+          >
+            Top Pages
+          </button>
         </div>
 
+        <div className="flex flex-wrap items-center gap-2">
+          {activeTab === "keywords" ? (
+            <button
+              className="btn btn-sm"
+              onClick={onSaveKeywords}
+              disabled={selectedKeywords.size === 0}
+            >
+              <Save className="size-4" /> Save Keywords
+            </button>
+          ) : null}
+          <div className="dropdown dropdown-end">
+            <div tabIndex={0} role="button" className="btn btn-sm gap-1">
+              <Download className="size-4" />
+              Export
+              <ChevronDown className="size-3 opacity-60" />
+            </div>
+            <ul
+              tabIndex={0}
+              className="dropdown-content z-10 menu p-2 shadow-lg bg-base-100 border border-base-300 rounded-box w-48"
+            >
+              <li>
+                <button onClick={handleCopy}>
+                  <Copy className="size-4" />
+                  Copy data
+                </button>
+              </li>
+              <li>
+                <button onClick={() => handleDownload("csv")}>
+                  <Download className="size-4" />
+                  Download CSV
+                </button>
+              </li>
+              <li>
+                <button onClick={() => handleDownload("xls")}>
+                  <FileSpreadsheet className="size-4" />
+                  Download Excel
+                </button>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+
+      <div className="flex items-center gap-2 px-4 py-2 border-b border-base-300">
+        <button
+          className={`btn btn-ghost btn-sm gap-1.5 ${showFilters ? "btn-active" : ""}`}
+          onClick={() => setShowFilters((prev) => !prev)}
+          title="Toggle filters"
+        >
+          <SlidersHorizontal className="size-3.5" />
+          Filters
+          {activeFilterCount > 0 ? (
+            <span className="badge badge-xs badge-primary border-0 text-primary-content">
+              {activeFilterCount}
+            </span>
+          ) : null}
+        </button>
+        <span className="text-sm text-base-content/60">
+          {filteredKeywords.length} keywords
+        </span>
+        <div className="flex-1" />
+        <label className="input input-bordered input-sm w-full max-w-xs flex items-center gap-2">
+          <Search className="size-4 text-base-content/60" />
+          <input
+            placeholder="Search in results"
+            value={pendingSearch}
+            onChange={(event) => onSearchChange(event.target.value)}
+          />
+        </label>
+      </div>
+
+      {showFilters ? (
+        <DomainFilterPanel
+          filtersForm={filtersForm}
+          activeFilterCount={activeFilterCount}
+          resetFilters={resetFilters}
+        />
+      ) : null}
+
+      <div className="p-4">
         {isKeywordsTab ? (
           <DomainKeywordsTable
             rows={filteredKeywords}
@@ -123,82 +214,3 @@ export function DomainResultsCard({
     </div>
   );
 }
-
-function DomainResultsCardHeader({
-  activeTab,
-  selectedKeywordsCount,
-  onTabChange,
-  onSaveKeywords,
-  onCopy,
-  onDownload,
-}: {
-  activeTab: DomainActiveTab;
-  selectedKeywordsCount: number;
-  onTabChange: (tab: DomainActiveTab) => void;
-  onSaveKeywords: () => void;
-  onCopy: () => Promise<void>;
-  onDownload: (extension: "csv" | "xls") => void;
-}) {
-  return (
-    <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-3">
-      <div role="tablist" className="tabs tabs-box w-fit">
-        <button
-          role="tab"
-          className={`tab ${activeTab === "keywords" ? "tab-active" : ""}`}
-          onClick={() => onTabChange("keywords")}
-        >
-          Top Keywords
-        </button>
-        <button
-          role="tab"
-          className={`tab ${activeTab === "pages" ? "tab-active" : ""}`}
-          onClick={() => onTabChange("pages")}
-        >
-          Top Pages
-        </button>
-      </div>
-
-      <div className="flex flex-wrap gap-2">
-        {activeTab === "keywords" ? (
-          <button
-            className="btn btn-sm"
-            onClick={onSaveKeywords}
-            disabled={selectedKeywordsCount === 0}
-          >
-            <Save className="size-4" /> Save Keywords
-          </button>
-        ) : null}
-        <div className="dropdown dropdown-end">
-          <div tabIndex={0} role="button" className="btn btn-sm gap-1">
-            <Download className="size-4" />
-            Export
-            <ChevronDown className="size-3 opacity-60" />
-          </div>
-          <ul
-            tabIndex={0}
-            className="dropdown-content z-10 menu p-2 shadow-lg bg-base-100 border border-base-300 rounded-box w-48"
-          >
-            <li>
-              <button onClick={onCopy}>
-                <Copy className="size-4" />
-                Copy data
-              </button>
-            </li>
-            <li>
-              <button onClick={() => onDownload("csv")}>
-                <Download className="size-4" />
-                Download CSV
-              </button>
-            </li>
-            <li>
-              <button onClick={() => onDownload("xls")}>
-                <FileSpreadsheet className="size-4" />
-                Download Excel
-              </button>
-            </li>
-          </ul>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/client/features/domain/components/DomainSearchCard.tsx b/src/client/features/domain/components/DomainSearchCard.tsx
index f816af7..1f7214a 100644
--- a/src/client/features/domain/components/DomainSearchCard.tsx
+++ b/src/client/features/domain/components/DomainSearchCard.tsx
@@ -62,6 +62,8 @@ export function DomainSearchCard({
                 <option value="rank">By Rank</option>
                 <option value="traffic">By Traffic</option>
                 <option value="volume">By Volume</option>
+                <option value="score">By Score</option>
+                <option value="cpc">By CPC</option>
               </select>
             )}
           </controlsForm.Field>
diff --git a/src/client/features/domain/components/SortableHeader.tsx b/src/client/features/domain/components/SortableHeader.tsx
index 3230c90..9add4e2 100644
--- a/src/client/features/domain/components/SortableHeader.tsx
+++ b/src/client/features/domain/components/SortableHeader.tsx
@@ -1,14 +1,22 @@
 import { ArrowDown, ArrowUp } from "lucide-react";
+import { HeaderHelpLabel } from "@/client/features/keywords/components";
 import type { SortOrder } from "@/client/features/domain/types";
 
 type Props = {
   label: string;
+  helpText?: string;
   isActive: boolean;
   order: SortOrder;
   onClick: () => void;
 };
 
-export function SortableHeader({ label, isActive, order, onClick }: Props) {
+export function SortableHeader({
+  label,
+  helpText,
+  isActive,
+  order,
+  onClick,
+}: Props) {
   return (
     <button
       type="button"
@@ -17,7 +25,11 @@ export function SortableHeader({ label, isActive, order, onClick }: Props) {
       aria-label={`Sort by ${label}`}
       aria-pressed={isActive}
     >
-      <span>{label}</span>
+      {helpText ? (
+        <HeaderHelpLabel label={label} helpText={helpText} />
+      ) : (
+        <span>{label}</span>
+      )}
       {isActive ? (
         order === "asc" ? (
           <ArrowUp className="size-3" />
diff --git a/src/client/features/domain/domainFiltering.ts b/src/client/features/domain/domainFiltering.ts
new file mode 100644
index 0000000..84a5370
--- /dev/null
+++ b/src/client/features/domain/domainFiltering.ts
@@ -0,0 +1,111 @@
+import { sortBy } from "remeda";
+import { sortableNullableNumber } from "@/client/features/domain/utils";
+import type {
+  DomainFilterValues,
+  DomainSortMode,
+  KeywordRow,
+  SortOrder,
+} from "@/client/features/domain/types";
+
+function parseTerms(value: string): string[] {
+  return value
+    .toLowerCase()
+    .split(/[,+]/)
+    .map((term) => term.trim())
+    .filter(Boolean);
+}
+
+function passesNumericFilter(
+  value: number | null | undefined,
+  min: string,
+  max: string,
+): boolean {
+  const v = value ?? 0;
+  if (min && v < Number(min)) return false;
+  if (max && v > Number(max)) return false;
+  return true;
+}
+
+export function filterAndSortKeywords(params: {
+  keywords: KeywordRow[];
+  pendingSearch: string;
+  filters: DomainFilterValues;
+  sortMode: DomainSortMode;
+  currentSortOrder: SortOrder;
+}): KeywordRow[] {
+  const { keywords, pendingSearch, filters, sortMode, currentSortOrder } =
+    params;
+  const includeTerms = parseTerms(filters.include);
+  const excludeTerms = parseTerms(filters.exclude);
+
+  const filtered = keywords.filter((row) => {
+    const haystack = `${row.keyword} ${row.relativeUrl ?? ""}`.toLowerCase();
+
+    if (
+      pendingSearch &&
+      !haystack.includes(pendingSearch.toLowerCase().trim())
+    ) {
+      return false;
+    }
+
+    if (
+      includeTerms.length > 0 &&
+      !includeTerms.every((term) => haystack.includes(term))
+    ) {
+      return false;
+    }
+    if (excludeTerms.some((term) => haystack.includes(term))) {
+      return false;
+    }
+
+    if (
+      !passesNumericFilter(row.traffic, filters.minTraffic, filters.maxTraffic)
+    )
+      return false;
+    if (!passesNumericFilter(row.searchVolume, filters.minVol, filters.maxVol))
+      return false;
+    if (!passesNumericFilter(row.cpc, filters.minCpc, filters.maxCpc))
+      return false;
+    if (
+      !passesNumericFilter(row.keywordDifficulty, filters.minKd, filters.maxKd)
+    )
+      return false;
+    if (!passesNumericFilter(row.position, filters.minRank, filters.maxRank))
+      return false;
+
+    return true;
+  });
+
+  if (sortMode === "traffic") {
+    return sortBy(filtered, [
+      (row) => sortableNullableNumber(row.traffic, currentSortOrder),
+      currentSortOrder,
+    ]);
+  }
+
+  if (sortMode === "volume") {
+    return sortBy(filtered, [
+      (row) => sortableNullableNumber(row.searchVolume, currentSortOrder),
+      currentSortOrder,
+    ]);
+  }
+
+  if (sortMode === "score") {
+    return sortBy(filtered, [
+      (row) => sortableNullableNumber(row.keywordDifficulty, currentSortOrder),
+      currentSortOrder,
+    ]);
+  }
+
+  if (sortMode === "cpc") {
+    return sortBy(filtered, [
+      (row) => sortableNullableNumber(row.cpc, currentSortOrder),
+      currentSortOrder,
+    ]);
+  }
+
+  return sortBy(filtered, [
+    (row) => sortableNullableNumber(row.position, currentSortOrder),
+    currentSortOrder,
+  ]);
+}
diff --git a/src/client/features/domain/domainOverviewControllerInternals.ts b/src/client/features/domain/domainOverviewControllerInternals.ts
index ab0c0cb..88fd16a 100644
--- a/src/client/features/domain/domainOverviewControllerInternals.ts
+++ b/src/client/features/domain/domainOverviewControllerInternals.ts
@@ -5,6 +5,7 @@ import { sortBy } from "remeda";
 import { toast } from "sonner";
 import { getDomainOverview } from "@/serverFunctions/domain";
 import { getStandardErrorMessage } from "@/client/lib/error-messages";
+import { filterAndSortKeywords } from "@/client/features/domain/domainFiltering";
 import {
   getDefaultSortOrder,
   normalizeDomainTarget,
@@ -17,6 +18,7 @@ import {
 } from "@/client/features/domain/utils";
 import type {
   DomainActiveTab,
+  DomainFilterValues,
   DomainOverviewData,
   DomainSortMode,
   SortOrder,
@@ -62,45 +64,29 @@ type ControlsFormLike = DomainControlsFormAccess;
 export function useOverviewDataState({
   overview,
   pendingSearch,
+  filters,
   sortMode,
   currentSortOrder,
   setSelectedKeywords,
 }: {
   overview: DomainOverviewData | null;
   pendingSearch: string;
+  filters: DomainFilterValues;
   sortMode: DomainSortMode;
   currentSortOrder: SortOrder;
   setSelectedKeywords: Dispatch<SetStateAction<Set<string>>>;
 }) {
-  const filteredKeywords = useMemo(() => {
-    const source = overview?.keywords ?? [];
-    const filtered = !pendingSearch
-      ? source
-      : source.filter((row) => {
-          const haystack =
-            `${row.keyword} ${row.relativeUrl ?? ""}`.toLowerCase();
-          return haystack.includes(pendingSearch.toLowerCase().trim());
-        });
-
-    if (sortMode === "traffic") {
-      return sortBy(filtered, [
-        (row) => sortableNullableNumber(row.traffic, currentSortOrder),
+  const filteredKeywords = useMemo(
+    () =>
+      filterAndSortKeywords({
+        keywords: overview?.keywords ?? [],
+        pendingSearch,
+        filters,
+        sortMode,
         currentSortOrder,
-      ]);
-    }
-
-    if (sortMode === "volume") {
-      return sortBy(filtered, [
-        (row) => sortableNullableNumber(row.searchVolume, currentSortOrder),
-        currentSortOrder,
-      ]);
-    }
-
-    return sortBy(filtered, [
-      (row) => sortableNullableNumber(row.position, currentSortOrder),
-      currentSortOrder,
-    ]);
-  }, [currentSortOrder, overview?.keywords, pendingSearch, sortMode]);
+      }),
+    [currentSortOrder, filters, overview?.keywords, pendingSearch, sortMode],
+  );
 
   const filteredPages = useMemo(() => {
     const source = overview?.pages ?? [];
@@ -141,10 +127,16 @@ export function useOverviewDataState({
     });
   }, [setSelectedKeywords, visibleKeywords]);
 
+  const activeFilterCount = useMemo(
+    () => Object.values(filters).filter((value) => value.trim() !== "").length,
+    [filters],
+  );
+
   return {
     filteredKeywords,
     filteredPages,
     visibleKeywords,
+    activeFilterCount,
     toggleKeywordSelection: (keyword: string) => {
       setSelectedKeywords((prev) => {
         const next = new Set(prev);
diff --git a/src/client/features/domain/hooks/useDomainFilters.ts b/src/client/features/domain/hooks/useDomainFilters.ts
new file mode 100644
index 0000000..3d189f5
--- /dev/null
+++ b/src/client/features/domain/hooks/useDomainFilters.ts
@@ -0,0 +1,40 @@
+import { useCallback } from "react";
+import { useForm, useStore } from "@tanstack/react-form";
+import {
+  EMPTY_DOMAIN_FILTERS,
+  type DomainFilterValues,
+} from "@/client/features/domain/types";
+
+export function useDomainFilters() {
+  const filtersForm = useForm({
+    defaultValues: EMPTY_DOMAIN_FILTERS,
+  });
+
+  const values = useStore(filtersForm.store, (s) => s.values);
+
+  const resetFilters = useCallback(() => {
+    const keys: Array<keyof DomainFilterValues> = [
+      "include",
+      "exclude",
+      "minTraffic",
+      "maxTraffic",
+      "minVol",
+      "maxVol",
+      "minCpc",
+      "maxCpc",
+      "minKd",
+      "maxKd",
+      "minRank",
+      "maxRank",
+    ];
+    for (const key of keys) {
+      filtersForm.setFieldValue(key, "");
+    }
+  }, [filtersForm]);
+
+  return {
+    filtersForm,
+    values,
+    resetFilters,
+  };
+}
diff --git a/src/client/features/domain/types.ts b/src/client/features/domain/types.ts
index 0192579..3cf3243 100644
--- a/src/client/features/domain/types.ts
+++ b/src/client/features/domain/types.ts
@@ -16,10 +16,40 @@ export type PageRow = {
   keywords: number | null;
 };
 
+export type DomainFilterValues = {
+  include: string;
+  exclude: string;
+  minTraffic: string;
+  maxTraffic: string;
+  minVol: string;
+  maxVol: string;
+  minCpc: string;
+  maxCpc: string;
+  minKd: string;
+  maxKd: string;
+  minRank: string;
+  maxRank: string;
+};
+
+export const EMPTY_DOMAIN_FILTERS: DomainFilterValues = {
+  include: "",
+  exclude: "",
+  minTraffic: "",
+  maxTraffic: "",
+  minVol: "",
+  maxVol: "",
+  minCpc: "",
+  maxCpc: "",
+  minKd: "",
+  maxKd: "",
+  minRank: "",
+  maxRank: "",
+};
+
 export type DomainControlsValues = {
   domain: string;
   subdomains: boolean;
-  sort: "rank" | "traffic" | "volume";
+  sort: "rank" | "traffic" | "volume" | "score" | "cpc";
 };
 
 export type DomainSortMode = DomainControlsValues["sort"];
diff --git a/src/client/features/domain/useDomainOverviewController.ts b/src/client/features/domain/useDomainOverviewController.ts
index d225f00..d7a1adb 100644
--- a/src/client/features/domain/useDomainOverviewController.ts
+++ b/src/client/features/domain/useDomainOverviewController.ts
@@ -24,6 +24,7 @@ import type {
 } from "@/client/features/domain/types";
 import { saveSelectedKeywords } from "@/client/features/domain/domainActions";
 import { useSaveKeywordsMutation } from "@/client/features/domain/mutations";
+import { useDomainFilters } from "@/client/features/domain/hooks/useDomainFilters";
 import {
   useDomainLookupMutation,
   useOverviewDataState,
@@ -109,6 +110,8 @@ export function useDomainOverviewController({
   const [selectedKeywords, setSelectedKeywords] = useState<Set<string>>(
     new Set(),
   );
+  const [showFilters, setShowFilters] = useState(false);
+  const domainFilters = useDomainFilters();
   const { history, isLoaded, addSearch, clearHistory, removeHistoryItem } =
     useDomainSearchHistory(projectId);
 
@@ -165,6 +168,7 @@ export function useDomainOverviewController({
   const dataState = useOverviewDataState({
     overview,
     pendingSearch,
+    filters: domainFilters.values,
     sortMode: searchState.sort,
     currentSortOrder,
     setSelectedKeywords,
@@ -211,6 +215,10 @@ export function useDomainOverviewController({
     selectedKeywords,
     currentSortOrder,
     setSearchParams,
+    showFilters,
+    setShowFilters,
+    filtersForm: domainFilters.filtersForm,
+    resetFilters: domainFilters.resetFilters,
     ...handlers,
     ...dataState,
   };
diff --git a/src/client/features/domain/utils.ts b/src/client/features/domain/utils.ts
index 2847846..ee04f6a 100644
--- a/src/client/features/domain/utils.ts
+++ b/src/client/features/domain/utils.ts
@@ -7,7 +7,13 @@ import type {
 import { buildCsv, downloadCsv as downloadCsvFile } from "@/client/lib/csv";
 
 export function toSortMode(value: string | null): DomainSortMode | undefined {
-  if (value === "rank" || value === "traffic" || value === "volume") {
+  if (
+    value === "rank" ||
+    value === "traffic" ||
+    value === "volume" ||
+    value === "score" ||
+    value === "cpc"
+  ) {
     return value;
   }
   return undefined;
@@ -50,11 +56,9 @@ export function sortableNullableNumber(
   return order === "asc" ? Number.POSITIVE_INFINITY : Number.NEGATIVE_INFINITY;
 }
 
-export function toPageSortMode(
-  sortMode: DomainSortMode,
-): Exclude<DomainSortMode, "rank"> {
-  if (sortMode === "rank") return "traffic";
-  return sortMode;
+export function toPageSortMode(sortMode: DomainSortMode): "traffic" | "volume" {
+  if (sortMode === "volume") return "volume";
+  return "traffic";
 }
 
 export function normalizeDomainTarget(input: string): string | null {
diff --git a/src/client/hooks/useDomainSearchHistory.ts b/src/client/hooks/useDomainSearchHistory.ts
index ce42fb8..2e67f0b 100644
--- a/src/client/hooks/useDomainSearchHistory.ts
+++ b/src/client/hooks/useDomainSearchHistory.ts
@@ -2,7 +2,7 @@ import { useState, useEffect, useCallback } from "react";
 import { z } from "zod";
 import { jsonCodec } from "@/shared/json";
 
-type DomainSortMode = "rank" | "traffic" | "volume";
+type DomainSortMode = "rank" | "traffic" | "volume" | "score" | "cpc";
 type DomainTab = "keywords" | "pages";
 
 export interface DomainSearchHistoryItem {
diff --git a/src/types/schemas/domain.ts b/src/types/schemas/domain.ts
index 179b726..8a62a39 100644
--- a/src/types/schemas/domain.ts
+++ b/src/types/schemas/domain.ts
@@ -16,7 +16,7 @@ export const domainOverviewSchema = z.object({
 /*  URL search params schema for /p/$projectId/domain                  */
 /* ------------------------------------------------------------------ */
 
-const domainSortModes = ["rank", "traffic", "volume"] as const;
+const domainSortModes = ["rank", "traffic", "volume", "score", "cpc"] as const;
 const domainSortOrders = ["asc", "desc"] as const;
 const domainTabs = ["keywords", "pages"] as const;