t.volume)} />
),
},
{
accessorKey: "sources",
header: "Sources",
enableGlobalFilter: false,
cell: ({ row }) => (
{row.original.sources.join(", ")}
),
},
{
id: "updatedAt",
accessorFn: (k) => k.metrics[k.primarySource]?.updatedAt ?? "",
header: "MAJ",
enableGlobalFilter: false,
cell: ({ getValue }) => (
{getValue() as string}
),
},
];
```
- [ ] **Step 2: Type-check + commit**
Run: `bunx tsc --noEmit` (Expected: no errors)
```bash
git add src/components/keywords/columns.tsx
git commit -m "feat: keyword table columns (sparkline, faceted + range filters)"
```
---
## Task 9: Filters bar
**Files:**
- Create: `src/components/keywords/filters-bar.tsx`
Exposes search + faceted multi-selects (theme, status, intent) + numeric range popover (volume/KD). It is **controlled**: parent owns `globalFilter` and `columnFilters`.
- [ ] **Step 1: Write the component**
```tsx
// src/components/keywords/filters-bar.tsx
"use client";
import type { ColumnFiltersState } from "@tanstack/react-table";
import { Input } from "@/components/ui/input";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import {
KEYWORD_STATUSES,
KEYWORD_THEMES,
type Keyword,
} from "@/lib/keywords/types";
interface Props {
search: string;
onSearch: (v: string) => void;
columnFilters: ColumnFiltersState;
onColumnFilters: (next: ColumnFiltersState) => void;
}
// helper: set or clear a single-value facet stored as string[]
function setFacet(
filters: ColumnFiltersState,
id: string,
value: string,
): ColumnFiltersState {
const rest = filters.filter((f) => f.id !== id);
if (!value || value === "all") return rest;
return [...rest, { id, value: [value] }];
}
const facetValue = (filters: ColumnFiltersState, id: string): string =>
((filters.find((f) => f.id === id)?.value as string[]) ?? [])[0] ?? "all";
export function FiltersBar({
search,
onSearch,
columnFilters,
onColumnFilters,
}: Props) {
return (
onSearch(e.target.value)}
className="max-w-xs"
aria-label="Rechercher un mot-clé"
/>
);
}
```
> Range filters (volume/KD/CPC/growth) are wired via `numberRange` in columns. For the proto, ship the categorical facets above; a numeric-range popover can be added later without touching the column `filterFn`s (they already accept `[min,max]`). This keeps the first cut small per "petit bout par petit bout". If you add the popover now, push `{ id: "volume", value: [min, max] }` into `columnFilters`.
- [ ] **Step 2: Type-check + commit**
Run: `bunx tsc --noEmit` (Expected: no errors)
```bash
git add src/components/keywords/filters-bar.tsx
git commit -m "feat: keyword filters bar (search + faceted selects)"
```
---
## Task 10: Detail Sheet (multi-source, honest empty state)
**Files:**
- Create: `src/components/keywords/keyword-sheet.tsx`
- [ ] **Step 1: Write the component**
```tsx
// src/components/keywords/keyword-sheet.tsx
"use client";
import {
Sheet,
SheetContent,
SheetDescription,
SheetHeader,
SheetTitle,
} from "@/components/ui/sheet";
import { IntentBadges } from "./intent-badge";
import { Sparkline } from "./sparkline";
import { StatusBadge } from "./status-badge";
import {
KEYWORD_SOURCES,
KEYWORD_THEMES,
type Keyword,
} from "@/lib/keywords/types";
const THEME_LABEL = new Map(KEYWORD_THEMES.map((t) => [t.id, t.label]));
export function KeywordSheet({
keyword,
open,
onOpenChange,
}: {
keyword: Keyword | null;
open: boolean;
onOpenChange: (open: boolean) => void;
}) {
return (
{keyword ? (
<>
{keyword.term}
{THEME_LABEL.get(keyword.theme)} · {keyword.locale.lang}-
{keyword.locale.country}
Tendance (12 mois)
t.volume)}
width={420}
height={64}
/>
Métriques par source
{KEYWORD_SOURCES.map((src) => {
const m = keyword.metrics[src];
return (
{src}
{m ? (
- Volume
-
{m.volume.toLocaleString("fr-FR")}
- KD
- {m.kd}
- CPC
-
${m.cpc.toFixed(2)}
- Croissance
-
{m.growthPct > 0 ? "+" : ""}
{m.growthPct}%
) : (
Source non connectée — aucune donnée.
)}
);
})}
{keyword.serpFeatures?.length ? (
SERP features
{keyword.serpFeatures.join(", ")}
) : null}
) : null}
);
}
```
- [ ] **Step 2: Type-check + commit**
Run: `bunx tsc --noEmit` (Expected: no errors)
```bash
git add src/components/keywords/keyword-sheet.tsx
git commit -m "feat: keyword detail Sheet (multi-source, honest empty state)"
```
---
## Task 11: Bulk-actions bar
**Files:**
- Create: `src/components/keywords/bulk-actions-bar.tsx`
- [ ] **Step 1: Write the component**
```tsx
// src/components/keywords/bulk-actions-bar.tsx
"use client";
import { Button } from "@/components/ui/button";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { KEYWORD_STATUSES, type KeywordStatus } from "@/lib/keywords/types";
export function BulkActionsBar({
count,
onSetStatus,
onClear,
}: {
count: number;
onSetStatus: (status: KeywordStatus) => void;
onClear: () => void;
}) {
if (count === 0) return null;
return (
{count} sélectionné(s)
{KEYWORD_STATUSES.map((s) => (
onSetStatus(s)}>
{s}
))}
);
}
```
- [ ] **Step 2: Type-check + commit**
Run: `bunx tsc --noEmit` (Expected: no errors)
```bash
git add src/components/keywords/bulk-actions-bar.tsx
git commit -m "feat: keyword bulk-actions bar"
```
---
## Task 12: Reservoir container (assembles everything)
**Files:**
- Create: `src/components/keywords/reservoir.tsx`
- [ ] **Step 1: Write the container**
```tsx
// src/components/keywords/reservoir.tsx
"use client";
import type {
ColumnFiltersState,
RowSelectionState,
} from "@tanstack/react-table";
import { useEffect, useMemo, useState } from "react";
import { DataTable } from "@/components/ui/data-table";
import { Skeleton } from "@/components/ui/skeleton";
import { useActiveSite } from "@/lib/keywords/site-context";
import { getKeywordsForSite } from "@/lib/keywords/sites";
import type { Keyword, KeywordStatus } from "@/lib/keywords/types";
import { BulkActionsBar } from "./bulk-actions-bar";
import { columns } from "./columns";
import { FiltersBar } from "./filters-bar";
import { KeywordSheet } from "./keyword-sheet";
export function Reservoir() {
const { activeSiteId } = useActiveSite();
// mock "loading" so the future API swap has a seam
const [loading, setLoading] = useState(true);
const [rows, setRows] = useState([]);
useEffect(() => {
setLoading(true);
setRowSelection({});
const id = setTimeout(() => {
setRows(getKeywordsForSite(activeSiteId));
setLoading(false);
}, 200);
return () => clearTimeout(id);
}, [activeSiteId]);
const [search, setSearch] = useState("");
const [columnFilters, setColumnFilters] = useState([]);
const [rowSelection, setRowSelection] = useState({});
const [openKeyword, setOpenKeyword] = useState(null);
const selectedCount = Object.values(rowSelection).filter(Boolean).length;
// local mutation for bulk status change (mock; resets on site switch)
const data = useMemo(() => rows, [rows]);
function setStatusForSelected(status: KeywordStatus) {
setRows((prev) =>
prev.map((k) => (rowSelection[k.id] ? { ...k, status } : k)),
);
setRowSelection({});
}
if (loading) {
return (
);
}
return (
setRowSelection({})}
/>
k.id}
globalFilter={search}
columnFilters={columnFilters}
rowSelection={rowSelection}
onRowSelectionChange={setRowSelection}
onRowClick={(k) => setOpenKeyword(k)}
caption="Réservoir de mots-clés du site actif"
/>
!o && setOpenKeyword(null)}
/>
);
}
```
- [ ] **Step 2: Type-check + lint**
Run: `bun run lint && bunx tsc --noEmit`
Expected: no errors.
- [ ] **Step 3: Commit**
```bash
git add src/components/keywords/reservoir.tsx
git commit -m "feat: reservoir container (state, loading, bulk, sheet)"
```
---
## Task 13: Route + page
**Files:**
- Create: `src/app/(app)/keywords/reservoir/page.tsx`
- [ ] **Step 1: Write the page**
```tsx
// src/app/(app)/keywords/reservoir/page.tsx
import { DashboardHeader } from "@/components/dashboard-header";
import { Reservoir } from "@/components/keywords/reservoir";
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
export default function Page() {
return (
<>
Keywords
Reservoir
);
}
```
- [ ] **Step 2: Run the app and verify visually**
Run: `bun run dev`, open `http://localhost:3000/keywords/reservoir`.
Expected & verify each acceptance criterion:
- Table renders ~10 keywords with sparklines.
- Typing in search narrows rows; theme/status/intent selects narrow rows.
- Clicking a row opens the Sheet; ahrefs/gsc show "Source non connectée".
- Selecting rows shows the bulk bar; "Changer le statut" updates badges.
- Switching site in the sidebar team-switcher re-mocks the table (different keywords).
- Tab navigation reaches search, selects, checkboxes; focus rings visible.
- [ ] **Step 3: Commit**
```bash
git add "src/app/(app)/keywords/reservoir/page.tsx"
git commit -m "feat: /keywords/reservoir route"
```
---
## Task 14: Stub pages for the other keywords routes
**Files:**
- Create: `src/app/(app)/keywords/overview/page.tsx`
- Create: `src/app/(app)/keywords/recherche/page.tsx`
- Create: `src/app/(app)/keywords/planning/page.tsx`
- Create: `src/app/(app)/keywords/export-import/page.tsx`
So the sidebar sub-menu links navigate to an explicit "en construction" state instead of a 404.
- [ ] **Step 1: Write a shared stub (repeat for each, changing title)**
Example for `overview` (repeat identically for `recherche`, `planning`, `export-import`, changing the `BreadcrumbPage` text and the `title` string):
```tsx
// src/app/(app)/keywords/overview/page.tsx
import { DashboardHeader } from "@/components/dashboard-header";
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
export default function Page() {
return (
<>
Keywords
Overview
Page « Overview » — en construction.
);
}
```
The four stub pages map: `overview` → "Overview", `recherche` → "Recherche", `planning` → "Planning", `export-import` → "Import / Export".
- [ ] **Step 2: Verify nav**
Run: `bun run dev`; click each Keywords sub-menu link. Expected: each shows its "en construction" page (no 404).
- [ ] **Step 3: Commit**
```bash
git add "src/app/(app)/keywords/overview/page.tsx" "src/app/(app)/keywords/recherche/page.tsx" "src/app/(app)/keywords/planning/page.tsx" "src/app/(app)/keywords/export-import/page.tsx"
git commit -m "feat: stub pages for keywords overview/recherche/planning/export-import"
```
---
## Task 15: Final verification
- [ ] **Step 1: Full test suite**
Run: `bun test`
Expected: all pass (existing flight-check tests + new fixtures + sparkline tests).
- [ ] **Step 2: Lint + types + build**
Run: `bun run lint && bunx tsc --noEmit && bun run build`
Expected: clean lint, no type errors, successful production build (all `/keywords/*` routes compiled).
- [ ] **Step 3: Acceptance walkthrough**
Re-run the Task 13 Step 2 checklist end-to-end on the production build (`bun run start`). Confirm every acceptance box in the spec is satisfied.
---
## Self-Review (filled)
**Spec coverage:** types ✔ (T1) · fixtures multi-source/no-invent ✔ (T2) · 5 themes ✔ (T1 enum + T2 partition) · 3 sites + isolation ✔ (T3) · site context wiring ✔ (T4) · Keywords nav ✔ (T4) · generic DataTable ✔ (T5) · sparkline ✔ (T6) · badges ✔ (T7) · columns incl. all spec columns ✔ (T8) · filters (facets; ranges seam) ✔ (T9) · multi-source Sheet w/ honest empty ✔ (T10) · bulk bar ✔ (T11) · states skeleton/empty ✔ (T12, DataTable) · route + a11y ✔ (T13) · stub nav pages ✔ (T14). Range-filter UI is intentionally deferred to a follow-up (column `filterFn`s already accept ranges) — noted in spec "petit bout par petit bout".
**Placeholder scan:** Fixtures task intentionally requires CSV transcription (recipe + 2 worked rows + exact partition) — this is data entry from a real source, not an unspecified placeholder. No "TODO"/"add error handling" left.
**Type consistency:** `Keyword`, `KeywordStatus`, `KeywordTheme`, `SourceMetrics`, `getKeywordsForSite`, `useActiveSite`/`SiteProvider`, `sparklinePath` names are used identically across tasks. `columnFilters` facet values are `string[]` everywhere; range values `[min,max]` consumed by `numberRange`.