From edfabb037aa594c49b641ab0981ed6dffdb9b81f Mon Sep 17 00:00:00 2001
From: jlightner <jlightner@users.noreply.github.com>
Date: Fri, 3 Apr 2026 01:59:49 +0000
Subject: [PATCH] =?UTF-8?q?feat:=20Built=20AdminTechniquePages=20page=20at?=
 =?UTF-8?q?=20/admin/techniques=20with=20table,=20e=E2=80=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- "frontend/src/pages/AdminTechniquePages.tsx"
- "frontend/src/api/public-client.ts"
- "frontend/src/App.tsx"
- "frontend/src/components/AdminDropdown.tsx"

GSD-Task: S06/T02
---
 frontend/src/App.tsx                       |   2 +
 frontend/src/api/public-client.ts          |  44 ++++
 frontend/src/components/AdminDropdown.tsx  |   8 +
 frontend/src/pages/AdminTechniquePages.tsx | 244 +++++++++++++++++++++
 frontend/tsconfig.app.tsbuildinfo          |   2 +-
 5 files changed, 299 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/pages/AdminTechniquePages.tsx

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 5ea450c..0c44003 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -9,6 +9,7 @@ import TopicsBrowse from "./pages/TopicsBrowse";
 import SubTopicPage from "./pages/SubTopicPage";
 import AdminReports from "./pages/AdminReports";
 import AdminPipeline from "./pages/AdminPipeline";
+import AdminTechniquePages from "./pages/AdminTechniquePages";
 import About from "./pages/About";
 import AdminDropdown from "./components/AdminDropdown";
 import AppFooter from "./components/AppFooter";
@@ -128,6 +129,7 @@ export default function App() {
           {/* Admin routes */}
           <Route path="/admin/reports" element={<AdminReports />} />
           <Route path="/admin/pipeline" element={<AdminPipeline />} />
+          <Route path="/admin/techniques" element={<AdminTechniquePages />} />
 
           {/* Info routes */}
           <Route path="/about" element={<About />} />
diff --git a/frontend/src/api/public-client.ts b/frontend/src/api/public-client.ts
index c5bf25c..2e436fd 100644
--- a/frontend/src/api/public-client.ts
+++ b/frontend/src/api/public-client.ts
@@ -739,3 +739,47 @@ export async function setDebugMode(enabled: boolean): Promise<DebugModeResponse>
     body: JSON.stringify({ debug_mode: enabled }),
   });
 }
+
+// ── Admin: Technique Pages ─────────────────────────────────────────────────
+
+export interface AdminTechniquePageItem {
+  id: string;
+  title: string;
+  slug: string;
+  creator_name: string;
+  creator_slug: string;
+  topic_category: string;
+  body_sections_format: string;
+  source_video_count: number;
+  version_count: number;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface AdminTechniquePageListResponse {
+  items: AdminTechniquePageItem[];
+  total: number;
+  offset: number;
+  limit: number;
+}
+
+export async function fetchAdminTechniquePages(
+  params: {
+    multi_source_only?: boolean;
+    creator?: string;
+    sort?: string;
+    offset?: number;
+    limit?: number;
+  } = {},
+): Promise<AdminTechniquePageListResponse> {
+  const qs = new URLSearchParams();
+  if (params.multi_source_only) qs.set("multi_source_only", "true");
+  if (params.creator) qs.set("creator", params.creator);
+  if (params.sort) qs.set("sort", params.sort);
+  if (params.offset !== undefined) qs.set("offset", String(params.offset));
+  if (params.limit !== undefined) qs.set("limit", String(params.limit));
+  const query = qs.toString();
+  return request<AdminTechniquePageListResponse>(
+    `${BASE}/admin/pipeline/technique-pages${query ? `?${query}` : ""}`,
+  );
+}
diff --git a/frontend/src/components/AdminDropdown.tsx b/frontend/src/components/AdminDropdown.tsx
index eb8d8c0..081c096 100644
--- a/frontend/src/components/AdminDropdown.tsx
+++ b/frontend/src/components/AdminDropdown.tsx
@@ -58,6 +58,14 @@ export default function AdminDropdown() {
           >
             Pipeline
           </Link>
+          <Link
+            to="/admin/techniques"
+            className="admin-dropdown__item"
+            role="menuitem"
+            onClick={() => setOpen(false)}
+          >
+            Techniques
+          </Link>
         </div>
       )}
     </div>
diff --git a/frontend/src/pages/AdminTechniquePages.tsx b/frontend/src/pages/AdminTechniquePages.tsx
new file mode 100644
index 0000000..c5e8eaa
--- /dev/null
+++ b/frontend/src/pages/AdminTechniquePages.tsx
@@ -0,0 +1,244 @@
+/**
+ * Admin view for technique pages — list with source/version counts,
+ * expandable rows showing source videos, cross-links to pipeline admin.
+ */
+
+import React, { useCallback, useEffect, useState } from "react";
+import { Link } from "react-router-dom";
+import { useDocumentTitle } from "../hooks/useDocumentTitle";
+import {
+  fetchAdminTechniquePages,
+  fetchTechnique,
+  type AdminTechniquePageItem,
+  type SourceVideoSummary,
+} from "../api/public-client";
+
+// ── Helpers ──────────────────────────────────────────────────────────────────
+
+function formatDate(iso: string | null): string {
+  if (!iso) return "—";
+  return new Date(iso).toLocaleString(undefined, {
+    month: "short",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+}
+
+function formatBadge(format: string): string {
+  if (format === "v2_sections") return "v2";
+  if (format === "v1_markdown") return "v1";
+  return format;
+}
+
+// ── Main Component ───────────────────────────────────────────────────────────
+
+export default function AdminTechniquePages() {
+  useDocumentTitle("Admin — Technique Pages");
+
+  // List state
+  const [items, setItems] = useState<AdminTechniquePageItem[]>([]);
+  const [total, setTotal] = useState(0);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  // Filters
+  const [multiSourceOnly, setMultiSourceOnly] = useState(false);
+  const [creatorFilter, setCreatorFilter] = useState("");
+  const [sort, setSort] = useState("recent");
+
+  // Expand state
+  const [expandedSlug, setExpandedSlug] = useState<string | null>(null);
+  const [expandedVideos, setExpandedVideos] = useState<SourceVideoSummary[]>([]);
+  const [expandLoading, setExpandLoading] = useState(false);
+
+  // Fetch list
+  const fetchList = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const data = await fetchAdminTechniquePages({
+        multi_source_only: multiSourceOnly || undefined,
+        creator: creatorFilter || undefined,
+        sort,
+        limit: 100,
+      });
+      setItems(data.items);
+      setTotal(data.total);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setLoading(false);
+    }
+  }, [multiSourceOnly, creatorFilter, sort]);
+
+  useEffect(() => {
+    fetchList();
+  }, [fetchList]);
+
+  // Expand row — fetch technique detail for source videos
+  const handleExpand = useCallback(
+    async (slug: string) => {
+      if (expandedSlug === slug) {
+        setExpandedSlug(null);
+        return;
+      }
+      setExpandedSlug(slug);
+      setExpandLoading(true);
+      try {
+        const detail = await fetchTechnique(slug);
+        setExpandedVideos(detail.source_videos ?? []);
+      } catch {
+        setExpandedVideos([]);
+      } finally {
+        setExpandLoading(false);
+      }
+    },
+    [expandedSlug],
+  );
+
+  return (
+    <div className="admin-page">
+      <div className="admin-page__header">
+        <h1>Technique Pages</h1>
+        <span className="admin-page__count">{total} pages</span>
+      </div>
+
+      {/* Filter bar */}
+      <div className="admin-page__filters">
+        <label className="admin-page__checkbox">
+          <input
+            type="checkbox"
+            checked={multiSourceOnly}
+            onChange={(e) => setMultiSourceOnly(e.target.checked)}
+          />
+          Multi-source only
+        </label>
+        <input
+          type="text"
+          className="admin-page__search"
+          placeholder="Filter by creator…"
+          value={creatorFilter}
+          onChange={(e) => setCreatorFilter(e.target.value)}
+        />
+        <select
+          className="admin-page__select"
+          value={sort}
+          onChange={(e) => setSort(e.target.value)}
+        >
+          <option value="recent">Recent</option>
+          <option value="alpha">A–Z</option>
+          <option value="creator">By Creator</option>
+        </select>
+      </div>
+
+      {error && <div className="admin-page__error">{error}</div>}
+
+      {loading ? (
+        <div className="admin-page__loading">Loading…</div>
+      ) : items.length === 0 ? (
+        <div className="admin-page__empty">No technique pages found.</div>
+      ) : (
+        <div className="admin-page__table-wrap">
+          <table className="admin-page__table">
+            <thead>
+              <tr>
+                <th></th>
+                <th>Title</th>
+                <th>Creator</th>
+                <th>Category</th>
+                <th>Format</th>
+                <th>Sources</th>
+                <th>Versions</th>
+                <th>Updated</th>
+              </tr>
+            </thead>
+            <tbody>
+              {items.map((item) => (
+                <React.Fragment key={item.id}>
+                  <tr
+                    className={`admin-page__row${expandedSlug === item.slug ? " admin-page__row--expanded" : ""}`}
+                    onClick={() => handleExpand(item.slug)}
+                    style={{ cursor: "pointer" }}
+                  >
+                    <td className="admin-page__expand-toggle">
+                      {expandedSlug === item.slug ? "▾" : "▸"}
+                    </td>
+                    <td>
+                      <Link
+                        to={`/techniques/${item.slug}`}
+                        onClick={(e) => e.stopPropagation()}
+                        title="View public page"
+                      >
+                        {item.title}
+                      </Link>
+                    </td>
+                    <td>
+                      <Link
+                        to={`/creators/${item.creator_slug}`}
+                        onClick={(e) => e.stopPropagation()}
+                      >
+                        {item.creator_name}
+                      </Link>
+                    </td>
+                    <td>{item.topic_category}</td>
+                    <td>
+                      <span
+                        className={`pipeline-badge ${item.body_sections_format === "v2_sections" ? "pipeline-badge--success" : "pipeline-badge--pending"}`}
+                      >
+                        {formatBadge(item.body_sections_format)}
+                      </span>
+                    </td>
+                    <td>{item.source_video_count}</td>
+                    <td>{item.version_count}</td>
+                    <td>{formatDate(item.updated_at)}</td>
+                  </tr>
+                  {expandedSlug === item.slug && (
+                    <tr className="admin-page__detail-row">
+                      <td colSpan={8}>
+                        <div className="admin-page__detail-panel">
+                          <div className="admin-page__detail-links">
+                            <Link to={`/techniques/${item.slug}`}>
+                              View public page →
+                            </Link>
+                          </div>
+                          <h4>Source Videos</h4>
+                          {expandLoading ? (
+                            <p>Loading source videos…</p>
+                          ) : expandedVideos.length === 0 ? (
+                            <p className="admin-page__muted">
+                              No source videos linked.
+                            </p>
+                          ) : (
+                            <ul className="admin-page__source-list">
+                              {expandedVideos.map((v) => (
+                                <li key={v.id}>
+                                  <Link
+                                    to={`/admin/pipeline?video=${v.id}`}
+                                    title="View in pipeline admin"
+                                  >
+                                    {v.filename}
+                                  </Link>
+                                  {v.added_at && (
+                                    <span className="admin-page__muted">
+                                      {" "}
+                                      — added {formatDate(v.added_at)}
+                                    </span>
+                                  )}
+                                </li>
+                              ))}
+                            </ul>
+                          )}
+                        </div>
+                      </td>
+                    </tr>
+                  )}
+                </React.Fragment>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/frontend/tsconfig.app.tsbuildinfo b/frontend/tsconfig.app.tsbuildinfo
index 9d3e49a..6c151ce 100644
--- a/frontend/tsconfig.app.tsbuildinfo
+++ b/frontend/tsconfig.app.tsbuildinfo
@@ -1 +1 @@
-{"root":["./src/App.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/api/public-client.ts","./src/components/AdminDropdown.tsx","./src/components/AppFooter.tsx","./src/components/CategoryIcons.tsx","./src/components/CopyLinkButton.tsx","./src/components/CreatorAvatar.tsx","./src/components/ReportIssueModal.tsx","./src/components/SearchAutocomplete.tsx","./src/components/SortDropdown.tsx","./src/components/TableOfContents.tsx","./src/components/TagList.tsx","./src/hooks/useDocumentTitle.ts","./src/hooks/useSortPreference.ts","./src/pages/About.tsx","./src/pages/AdminPipeline.tsx","./src/pages/AdminReports.tsx","./src/pages/CreatorDetail.tsx","./src/pages/CreatorsBrowse.tsx","./src/pages/Home.tsx","./src/pages/SearchResults.tsx","./src/pages/SubTopicPage.tsx","./src/pages/TechniquePage.tsx","./src/pages/TopicsBrowse.tsx","./src/utils/catSlug.ts","./src/utils/citations.tsx"],"version":"5.6.3"}
\ No newline at end of file
+{"root":["./src/App.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/api/public-client.ts","./src/components/AdminDropdown.tsx","./src/components/AppFooter.tsx","./src/components/CategoryIcons.tsx","./src/components/CopyLinkButton.tsx","./src/components/CreatorAvatar.tsx","./src/components/ReportIssueModal.tsx","./src/components/SearchAutocomplete.tsx","./src/components/SortDropdown.tsx","./src/components/TableOfContents.tsx","./src/components/TagList.tsx","./src/hooks/useDocumentTitle.ts","./src/hooks/useSortPreference.ts","./src/pages/About.tsx","./src/pages/AdminPipeline.tsx","./src/pages/AdminReports.tsx","./src/pages/AdminTechniquePages.tsx","./src/pages/CreatorDetail.tsx","./src/pages/CreatorsBrowse.tsx","./src/pages/Home.tsx","./src/pages/SearchResults.tsx","./src/pages/SubTopicPage.tsx","./src/pages/TechniquePage.tsx","./src/pages/TopicsBrowse.tsx","./src/utils/catSlug.ts","./src/utils/citations.tsx"],"version":"5.6.3"}
\ No newline at end of file