Lobbying frontend enhancements (pagination, clickable entities, data fix)

components/db/lobbying.ts

@@ -276,19 +276,98 @@ export type BillRow = {
 async function fetchLobbyingBillSummaries(
   court: number
 ): Promise<Record<string, BillSummaryEntry>> {
-  const snap = await getDoc(
-    doc(firestore, LOBBYING_STATS_COLLECTION, `billSummaries_${court}`)
+  const snap = await getDocs(
+    collection(
+      firestore,
+      LOBBYING_STATS_COLLECTION,
+      `billSummaries_${court}`,
+      "bills"
+    )
   )
-  if (!snap.exists()) return {}
-  const raw = snap.data() as { data?: string }
-  if (!raw.data) return {}
-  return JSON.parse(raw.data) as Record<string, BillSummaryEntry>
+  const result: Record<string, BillSummaryEntry> = {}
+  snap.docs.forEach(d => {
+    result[d.id] = d.data() as BillSummaryEntry
+  })
+  return result
 }
 
 export function useLobbyingBillSummaries(court: number) {
   return useAsync(fetchLobbyingBillSummaries, [court])
 }
 
+// ── Client / firm summaries (precomputed server-side; see writer.py and
+// seedLobbyingStats.ts). Replaces client-side derivation over
+// useLobbyingAllRegistrants(), which only fetches the first 2,000 of
+// 25,000+ registrant docs and was silently showing an incomplete list. ────
+
+export type ClientSummaryFirm = {
+  entityName: string
+  entityNameNorm: string
+  compensation: number | null
+}
+
+export type ClientSummaryRow = {
+  clientName: string
+  clientNameNorm: string
+  totalCompensation: number | null
+  registrantCount: number
+  firms: ClientSummaryFirm[]
+}
+
+export type FirmSummaryRow = {
+  entityName: string
+  entityNameNorm: string
+  regType: string
+  years: number[]
+  clientCount: number
+}
+
+async function fetchClientSummaries(): Promise<ClientSummaryRow[]> {
+  const snap = await getDocs(
+    collection(
+      firestore,
+      LOBBYING_STATS_COLLECTION,
+      "clientSummaries",
+      "clients"
+    )
+  )
+  return snap.docs.map(d => d.data() as ClientSummaryRow)
+}
+
+async function fetchClientSummary(
+  clientNameNorm: string
+): Promise<ClientSummaryRow | undefined> {
+  const snap = await getDoc(
+    doc(
+      firestore,
+      LOBBYING_STATS_COLLECTION,
+      "clientSummaries",
+      "clients",
+      encodeURIComponent(clientNameNorm)
+    )
+  )
+  return snap.exists() ? (snap.data() as ClientSummaryRow) : undefined
+}
+
+async function fetchFirmSummaries(): Promise<FirmSummaryRow[]> {
+  const snap = await getDocs(
+    collection(firestore, LOBBYING_STATS_COLLECTION, "firmSummaries", "firms")
+  )
+  return snap.docs.map(d => d.data() as FirmSummaryRow)
+}
+
+export function useLobbyingClientSummaries() {
+  return useAsync(fetchClientSummaries, [])
+}
+
+export function useLobbyingClientSummary(clientNameNorm: string) {
+  return useAsync(fetchClientSummary, [clientNameNorm])
+}
+
+export function useLobbyingFirmSummaries() {
+  return useAsync(fetchFirmSummaries, [])
+}
+
 export function useLobbyingBillRows(courts: number[]) {
   const courtsKey = courts.join(",")
   return useAsync(

components/lobbying/LobbyingBillCard.tsx

@@ -2,9 +2,13 @@ import React from "react"
 import { useTranslation } from "next-i18next"
 import { useLobbyingFilingsForBill } from "components/db/lobbying"
 import { LobbyingFilingsTable } from "./LobbyingFilingsTable"
+import { LobbyingPaginationBar } from "./LobbyingPaginationBar"
+import { usePagination } from "./usePagination"
 import { MAPLE_COLORS } from "./chartTheme"
 import { normalizePosition } from "./LobbyingPositionChip"
 
+const PAGE_SIZE = 10
+
 interface LobbyingBillCardProps {
   court: number
   billId: string
@@ -22,6 +26,10 @@ export const LobbyingBillCard: React.FC<LobbyingBillCardProps> = ({
     status,
     error
   } = useLobbyingFilingsForBill(court, billId)
+  const { page, setPage, pageItems, totalPages, totalItems } = usePagination(
+    filings ?? [],
+    PAGE_SIZE
+  )
 
   if (status === "loading" || status === "not-requested") {
     return (
@@ -60,10 +68,10 @@ export const LobbyingBillCard: React.FC<LobbyingBillCardProps> = ({
   return (
     <div style={cardStyle} className={className}>
       <div style={headerStyle}>
-        <span style={titleStyle}>{t("lobbying:titles.overview")}</span>
-        <span style={countStyle}>
-          {t("lobbying:billCard.filingCount_other", { count: total })}
-        </span>
+        <span style={titleStyle}>{t("lobbying:billCard.title")}</span>
+        <a href={explorerHref} style={viewAllLinkStyle}>
+          {t("lobbying:billCard.viewAll")}
+        </a>
       </div>
 
       <PositionBar counts={counts} total={total} />
@@ -87,17 +95,21 @@ export const LobbyingBillCard: React.FC<LobbyingBillCardProps> = ({
       </div>
 
       <LobbyingFilingsTable
-        filings={filings}
+        filings={pageItems}
         showBill={false}
         showClient
         showFirm
         showAmount={false}
-        maxRows={5}
+        bordered
+      />
+      <LobbyingPaginationBar
+        page={page}
+        totalPages={totalPages}
+        totalItems={totalItems}
+        pageSize={PAGE_SIZE}
+        onPage={setPage}
+        itemLabel={t("lobbying:billCard.filingsLabel")}
       />
-
-      <a href={explorerHref} style={viewAllLinkStyle}>
-        {t("lobbying:billCard.viewAll")}
-      </a>
     </div>
   )
 }
@@ -211,11 +223,6 @@ const titleStyle: React.CSSProperties = {
   letterSpacing: "0.06em"
 }
 
-const countStyle: React.CSSProperties = {
-  fontSize: 12,
-  color: MAPLE_COLORS.textMuted
-}
-
 const barContainerStyle: React.CSSProperties = {
   display: "flex",
   height: 8,
@@ -245,10 +252,9 @@ const legendItemStyle: React.CSSProperties = {
 }
 
 const viewAllLinkStyle: React.CSSProperties = {
-  display: "block",
-  fontSize: 13,
+  fontSize: 12,
   fontWeight: 600,
   color: MAPLE_COLORS.primary,
   textDecoration: "none",
-  marginTop: "0.5rem"
+  whiteSpace: "nowrap"
 }

components/lobbying/LobbyingFilingsTable.tsx

@@ -14,6 +14,7 @@ interface LobbyingFilingsTableProps {
   showActivity?: boolean
   maxRows?: number
   onViewAll?: () => void
+  bordered?: boolean
 }
 
 export const LobbyingFilingsTable: React.FC<LobbyingFilingsTableProps> = ({
@@ -24,7 +25,8 @@ export const LobbyingFilingsTable: React.FC<LobbyingFilingsTableProps> = ({
   showAmount = true,
   showActivity = false,
   maxRows,
-  onViewAll
+  onViewAll,
+  bordered = false
 }) => {
   const { t } = useTranslation("lobbying")
   const rows = maxRows ? filings.slice(0, maxRows) : filings
@@ -39,7 +41,17 @@ export const LobbyingFilingsTable: React.FC<LobbyingFilingsTableProps> = ({
   }
 
   return (
-    <div>
+    <div
+      style={
+        bordered
+          ? {
+              border: "1px solid var(--bs-border-color)",
+              borderRadius: 6,
+              overflow: "hidden"
+            }
+          : undefined
+      }
+    >
       <Table hover responsive size="sm" style={tableStyle}>
         <thead>
           <tr style={theadRowStyle}>
@@ -71,8 +83,30 @@ export const LobbyingFilingsTable: React.FC<LobbyingFilingsTableProps> = ({
                   )}
                 </td>
               )}
-              {showClient && <td style={cellStyle}>{f.clientName}</td>}
-              {showFirm && <td style={cellStyle}>{f.entityName}</td>}
+              {showClient && (
+                <td style={cellStyle}>
+                  <a
+                    href={`/lobbying/clients/${encodeURIComponent(
+                      f.clientNameNorm
+                    )}`}
+                    style={{ color: MAPLE_COLORS.primary }}
+                  >
+                    {f.clientName}
+                  </a>
+                </td>
+              )}
+              {showFirm && (
+                <td style={cellStyle}>
+                  <a
+                    href={`/lobbying/firms/${encodeURIComponent(
+                      f.entityNameNorm
+                    )}`}
+                    style={{ color: MAPLE_COLORS.primary }}
+                  >
+                    {f.entityName}
+                  </a>
+                </td>
+              )}
               {showActivity && (
                 <td style={{ ...cellStyle, color: MAPLE_COLORS.textMuted }}>
                   {f.activityTitle || "—"}
@@ -116,8 +150,10 @@ export const LobbyingFilingsTable: React.FC<LobbyingFilingsTableProps> = ({
 
 const tableStyle: React.CSSProperties = {
   fontSize: 13,
-  color: MAPLE_COLORS.textBody
-}
+  color: MAPLE_COLORS.textBody,
+  "--bs-table-bg": "var(--bs-gray-100)",
+  "--bs-table-hover-bg": "rgba(15, 23, 42, 0.06)"
+} as React.CSSProperties
 
 const theadRowStyle: React.CSSProperties = {
   fontSize: 11,

components/lobbying/LobbyingPaginationBar.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useEffect, useState } from "react"
 import { useTranslation } from "next-i18next"
 import { MAPLE_COLORS } from "./chartTheme"
 
@@ -8,41 +8,72 @@ interface Props {
   totalItems: number
   pageSize: number
   onPage: (p: number) => void
+  itemLabel?: string
 }
 
 export function LobbyingPaginationBar({
   page,
   totalPages,
   totalItems,
   pageSize,
-  onPage
+  onPage,
+  itemLabel
 }: Props) {
   const { t } = useTranslation("lobbying")
+  const [pageInput, setPageInput] = useState(String(page))
+
+  // Keep the typed value in sync when the page changes externally (Prev/
+  // Next, or a filter change resetting to page 1) — but not while the user
+  // is actively typing a replacement value.
+  useEffect(() => {
+    setPageInput(String(page))
+  }, [page])
+
   if (totalPages <= 1) return null
   const start = (page - 1) * pageSize + 1
   const end = Math.min(page * pageSize, totalItems)
 
+  function commitPageInput() {
+    const parsed = parseInt(pageInput, 10)
+    if (Number.isNaN(parsed)) {
+      setPageInput(String(page))
+      return
+    }
+    const clamped = Math.min(Math.max(parsed, 1), totalPages)
+    setPageInput(String(clamped))
+    if (clamped !== page) onPage(clamped)
+  }
+
   return (
     <div style={wrapStyle}>
       <span style={{ color: MAPLE_COLORS.textMuted, fontSize: 13 }}>
         {start}–{end} of {totalItems}
+        {itemLabel ? ` ${itemLabel}` : ""}
       </span>
-      <div style={{ display: "flex", gap: "0.25rem" }}>
+      <div style={{ display: "flex", gap: "0.25rem", alignItems: "center" }}>
         <button
           onClick={() => onPage(page - 1)}
           disabled={page === 1}
           style={btnStyle(page === 1)}
         >
           {t("pagination.prev")}
         </button>
-        <span
-          style={{
-            ...btnStyle(false),
-            cursor: "default",
-            color: MAPLE_COLORS.textMuted
-          }}
-        >
-          {page} / {totalPages}
+        <span style={pageJumpStyle}>
+          <input
+            type="text"
+            inputMode="numeric"
+            value={pageInput}
+            onChange={e => setPageInput(e.target.value.replace(/[^0-9]/g, ""))}
+            onBlur={commitPageInput}
+            onKeyDown={e => {
+              if (e.key === "Enter") {
+                e.currentTarget.blur()
+              }
+            }}
+            aria-label={t("pagination.pageNumber")}
+            style={pageInputStyle}
+          />
+          <span style={{ color: MAPLE_COLORS.textMuted }}> / {totalPages}</span>
         </span>
         <button
           onClick={() => onPage(page + 1)}
@@ -75,3 +106,24 @@ const btnStyle = (disabled: boolean): React.CSSProperties => ({
   cursor: disabled ? "default" : "pointer",
   opacity: disabled ? 0.5 : 1
 })
+
+// Deliberately not button-shaped (no border/background) — this is an
+// editable field, not a static label, so it shouldn't visually compete with
+// the actual Prev/Next buttons on either side.
+const pageJumpStyle: React.CSSProperties = {
+  display: "flex",
+  alignItems: "center",
+  fontSize: 13,
+  padding: "0.3rem 0.35rem"
+}
+
+const pageInputStyle: React.CSSProperties = {
+  width: "2.2rem",
+  textAlign: "center",
+  border: "none",
+  borderBottom: `1px solid ${MAPLE_COLORS.borderDefault}`,
+  background: "transparent",
+  color: MAPLE_COLORS.textBody,
+  fontSize: 13,
+  padding: "0.1rem 0.2rem"
+}