Loads campaigns in the index.

src/routes/_authenticated/campaigns.index.tsx

@@ -1,9 +1,37 @@
 import { createFileRoute } from "@tanstack/react-router";
+import { pb } from "@/lib/pocketbase";
+import type { Campaign } from "@/lib/types";
+import { Link } from "@tanstack/react-router";
 
 export const Route = createFileRoute("/_authenticated/campaigns/")({
+  loader: async () => {
+    const records = await pb.collection("campaigns").getFullList();
+    return { campaigns: records.map((rec: any) => ({ id: rec.id, name: rec.name })) as Campaign[] };
+  },
   component: RouteComponent,
 });
 
 function RouteComponent() {
-  return <div>Hello "/campaigns/"!</div>;
+  const { campaigns } = Route.useLoaderData();
+
+  if (!campaigns || campaigns.length === 0) return <div>No campaigns found.</div>;
+
+  return (
+    <div className="max-w-xl mx-auto py-8">
+      <h2 className="text-xl font-bold mb-4 text-slate-100">Your Campaigns</h2>
+      <ul className="space-y-2">
+        {campaigns.map((c) => (
+          <li key={c.id}>
+            <Link
+              to="/campaigns/$campaignId"
+              params={{ campaignId: c.id }}
+              className="block px-4 py-2 rounded bg-slate-800 hover:bg-violet-700 text-slate-100 transition-colors"
+            >
+              {c.name}
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
 }