Initial commit

frontend/app/bills/[id]/page.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+import { use } from "react";
+import Link from "next/link";
+import { ArrowLeft, ExternalLink, User } from "lucide-react";
+import { useBill, useBillTrend } from "@/lib/hooks/useBills";
+import { AIBriefCard } from "@/components/bills/AIBriefCard";
+import { ActionTimeline } from "@/components/bills/ActionTimeline";
+import { TrendChart } from "@/components/bills/TrendChart";
+import { NewsPanel } from "@/components/bills/NewsPanel";
+import { FollowButton } from "@/components/shared/FollowButton";
+import { billLabel, formatDate, partyBadgeColor, cn } from "@/lib/utils";
+
+export default function BillDetailPage({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = use(params);
+  const billId = decodeURIComponent(id);
+
+  const { data: bill, isLoading } = useBill(billId);
+  const { data: trendData } = useBillTrend(billId, 30);
+
+  if (isLoading) {
+    return <div className="text-center py-20 text-muted-foreground">Loading bill...</div>;
+  }
+
+  if (!bill) {
+    return (
+      <div className="text-center py-20">
+        <p className="text-muted-foreground">Bill not found.</p>
+        <Link href="/bills" className="text-sm text-primary mt-2 inline-block">← Back to bills</Link>
+      </div>
+    );
+  }
+
+  const label = billLabel(bill.bill_type, bill.bill_number);
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex items-start justify-between gap-4">
+        <div className="flex-1">
+          <div className="flex items-center gap-3 mb-2">
+            <Link href="/bills" className="text-muted-foreground hover:text-foreground transition-colors">
+              <ArrowLeft className="w-4 h-4" />
+            </Link>
+            <span className="font-mono text-sm font-semibold text-muted-foreground bg-muted px-2 py-0.5 rounded">
+              {label}
+            </span>
+            <span className="text-sm text-muted-foreground">{bill.chamber}</span>
+            <span className="text-sm text-muted-foreground">119th Congress</span>
+          </div>
+          <h1 className="text-xl font-bold leading-snug">
+            {bill.short_title || bill.title || "Untitled Bill"}
+          </h1>
+          {bill.sponsor && (
+            <div className="flex items-center gap-2 mt-2 text-sm text-muted-foreground">
+              <User className="w-3.5 h-3.5" />
+              <Link href={`/members/${bill.sponsor.bioguide_id}`} className="hover:text-foreground transition-colors">
+                {bill.sponsor.name}
+              </Link>
+              {bill.sponsor.party && (
+                <span className={cn("px-1.5 py-0.5 rounded text-xs font-medium", partyBadgeColor(bill.sponsor.party))}>
+                  {bill.sponsor.party}
+                </span>
+              )}
+              {bill.sponsor.state && <span>{bill.sponsor.state}</span>}
+            </div>
+          )}
+          <p className="text-xs text-muted-foreground mt-1">
+            Introduced: {formatDate(bill.introduced_date)}
+            {bill.congress_url && (
+              <a href={bill.congress_url} target="_blank" rel="noopener noreferrer" className="ml-3 hover:text-primary transition-colors">
+                congress.gov <ExternalLink className="w-3 h-3 inline" />
+              </a>
+            )}
+          </p>
+        </div>
+        <FollowButton type="bill" value={bill.bill_id} />
+      </div>
+
+      {/* Content grid */}
+      <div className="grid grid-cols-3 gap-6">
+        <div className="col-span-2 space-y-6">
+          <AIBriefCard brief={bill.latest_brief} />
+          <ActionTimeline actions={bill.actions} />
+        </div>
+        <div className="space-y-4">
+          <TrendChart data={trendData} />
+          <NewsPanel articles={bill.news_articles} />
+        </div>
+      </div>
+    </div>
+  );
+}