task: added side scroll tip for rebalance table, added limitations to transaction table in recent activity chart (dashbaord)

web/src/hooks/useDashboard.ts

@@ -55,6 +55,16 @@ export type DashboardResponse = {
     incomeCents: number;
     spendCents: number;
   }>;
+  trendWindow?: {
+    page: number;
+    months: number;
+    canGoNewer: boolean;
+    canGoOlder: boolean;
+    hasTransactionsOlderThanSixMonths: boolean;
+    startLabel: string;
+    endLabel: string;
+    label: string;
+  };
   upcomingPlans: Array<{ id: string; name: string; dueOn: string; remainingCents: number }>;
   savingsTargets: Array<{
     id: string;
@@ -79,10 +89,22 @@ export type DashboardResponse = {
   };
 };
 
-export function useDashboard(enabled = true) {
+export type DashboardQueryOptions = {
+  trendPage?: number;
+  trendMonths?: number;
+};
+
+export function useDashboard(enabled = true, options?: DashboardQueryOptions) {
+  const trendPage = Math.max(0, options?.trendPage ?? 0);
+  const trendMonths = Math.min(12, Math.max(1, options?.trendMonths ?? 6));
+
   return useQuery({
-    queryKey: ["dashboard"],
-    queryFn: () => apiGet<DashboardResponse>("/dashboard"),
+    queryKey: ["dashboard", trendPage, trendMonths],
+    queryFn: () =>
+      apiGet<DashboardResponse>("/dashboard", {
+        trendPage,
+        trendMonths,
+      }),
     staleTime: 10_000,
     enabled,
   });

web/src/pages/DashboardPage.tsx

@@ -22,8 +22,14 @@ import { isoToDateString, dateStringToUTCMidnight, getTodayInTimezone, getBrowse
 export default function DashboardPage() {
   const session = useAuthSession();
   const shouldLoadDashboard = !!session.data?.userId;
-  const { data, isLoading, isError, error, refetch } = useDashboard(
+  const trendMonths = 6;
+  const [trendPage, setTrendPage] = useState(0);
+  const { data, isLoading, isError, isFetching, error, refetch } = useDashboard(
     shouldLoadDashboard,
+    {
+      trendPage,
+      trendMonths,
+    }
   );
   const navigate = useNavigate();
   const { push } = useToast();
@@ -479,6 +485,12 @@ export default function DashboardPage() {
   const hasCategories = data.variableCategories.length > 0;
   const hasPlans = data.fixedPlans.length > 0;
   const hasTx = data.recentTransactions.length > 0;
+  const hasTransactionsOlderThanSixMonths =
+    data.trendWindow?.hasTransactionsOlderThanSixMonths ?? false;
+  const useTrendWindowPagination = hasTransactionsOlderThanSixMonths;
+  const trendWindowLabel = data.trendWindow?.label ?? "Last 6 months";
+  const canTrendNewer = data.trendWindow?.canGoNewer ?? trendPage > 0;
+  const canTrendOlder = data.trendWindow?.canGoOlder ?? true;
 
   const greetingName =
     data.user.displayName ||
@@ -887,12 +899,25 @@ export default function DashboardPage() {
           )}
 
           {activeTab === "trend" && (
-            <section className="grid gap-6 lg:grid-cols-2">
-              <MonthlyTrendChart data={data.monthlyTrend} />
-              <RecentTransactionsPanel
-                transactions={data.recentTransactions}
-                hasData={hasTx}
-              />
+            <section className="space-y-4">
+              {useTrendWindowPagination ? (
+                <TrendWindowControls
+                  label={trendWindowLabel}
+                  canGoOlder={canTrendOlder}
+                  canGoNewer={canTrendNewer}
+                  busy={isFetching}
+                  onOlder={() => setTrendPage((p) => p + 1)}
+                  onNewer={() => setTrendPage((p) => Math.max(0, p - 1))}
+                />
+              ) : null}
+              <section className="grid gap-6 lg:grid-cols-2">
+                <MonthlyTrendChart data={data.monthlyTrend} />
+                <RecentTransactionsPanel
+                  transactions={data.recentTransactions}
+                  hasData={hasTx}
+                  rangeLabel={useTrendWindowPagination ? trendWindowLabel : undefined}
+                />
+              </section>
             </section>
           )}
         </section>
@@ -1077,10 +1102,21 @@ export default function DashboardPage() {
         )}
         {activeTab === "trend" && (
           <section className="space-y-4">
+            {useTrendWindowPagination ? (
+              <TrendWindowControls
+                label={trendWindowLabel}
+                canGoOlder={canTrendOlder}
+                canGoNewer={canTrendNewer}
+                busy={isFetching}
+                onOlder={() => setTrendPage((p) => p + 1)}
+                onNewer={() => setTrendPage((p) => Math.max(0, p - 1))}
+              />
+            ) : null}
             <MonthlyTrendChart data={data.monthlyTrend} />
             <RecentTransactionsPanel
               transactions={data.recentTransactions}
               hasData={hasTx}
+              rangeLabel={useTrendWindowPagination ? trendWindowLabel : undefined}
             />
           </section>
         )}
@@ -1118,6 +1154,44 @@ function AnalyticsTabButton({
   );
 }
 
+function TrendWindowControls({
+  label,
+  canGoOlder,
+  canGoNewer,
+  busy,
+  onOlder,
+  onNewer,
+}: {
+  label: string;
+  canGoOlder: boolean;
+  canGoNewer: boolean;
+  busy: boolean;
+  onOlder: () => void;
+  onNewer: () => void;
+}) {
+  return (
+    <div className="row items-center gap-2 rounded-xl border px-3 py-2 bg-[--color-panel]">
+      <button
+        type="button"
+        className="btn"
+        onClick={onNewer}
+        disabled={!canGoNewer || busy}
+      >
+        ← Newer
+      </button>
+      <div className="text-sm muted ml-1">{label}</div>
+      <button
+        type="button"
+        className="btn ml-auto"
+        onClick={onOlder}
+        disabled={!canGoOlder || busy}
+      >
+        Older →
+      </button>
+    </div>
+  );
+}
+
 function UpcomingPlanAlerts({
   plans,
   userTimezone,
@@ -1128,18 +1202,18 @@ function UpcomingPlanAlerts({
   if (plans.length === 0) return null;
   return (
     <section className="rounded-xl border border-amber-300/70 bg-amber-50/70 p-4 space-y-3 dark:border-amber-500/40 dark:bg-amber-500/10">
-      <div className="flex items-center gap-2 text-sm font-semibold text-amber-900 dark:text-amber-100">
+      <div className="flex items-center gap-2 text-sm font-semibold text-amber-900 dark:text-amber-50">
         Upcoming plan alerts (next 14 days)
       </div>
       <ul className="space-y-2">
         {plans.map((plan) => (
           <li
             key={plan.id}
-            className="flex flex-col gap-2 rounded-lg bg-amber-100/60 px-3 py-2 text-sm text-amber-900 dark:bg-[--color-ink]/20 dark:text-[--color-text] sm:flex-row sm:items-center sm:justify-between"
+            className="flex flex-col gap-2 rounded-lg bg-amber-100/60 px-3 py-2 text-sm text-amber-900 dark:bg-amber-200/15 dark:text-amber-50 sm:flex-row sm:items-center sm:justify-between"
           >
             <div>
               <div className="font-medium text-amber-950 dark:text-white">{plan.name}</div>
-              <div className="text-xs muted">
+              <div className="text-xs text-amber-700 dark:text-amber-200">
                 Due{" "}
                 {formatDateInTimezone(plan.dueOn, userTimezone, {
                   month: "short",
@@ -1148,7 +1222,7 @@ function UpcomingPlanAlerts({
               </div>
             </div>
             <div className="text-right">
-              <div className="text-xs muted">Remaining</div>
+              <div className="text-xs text-amber-700 dark:text-amber-200">Remaining</div>
               <Money cents={plan.remainingCents} />
             </div>
           </li>
@@ -1203,14 +1277,20 @@ function SavingsGoalsPanel({
 function RecentTransactionsPanel({
   transactions,
   hasData,
+  rangeLabel,
 }: {
   transactions: DashboardResponse["recentTransactions"];
   hasData: boolean;
+  rangeLabel?: string;
 }) {
+  const title = rangeLabel ? "Transactions in window" : "Recent transactions";
+  const visibleTransactions = transactions.slice(0, 10);
+
   if (!hasData) {
     return (
       <div className="space-y-3">
-        <h2 className="font-semibold">Recent transactions</h2>
+        <h2 className="font-semibold">{title}</h2>
+        {rangeLabel ? <div className="text-xs muted">{rangeLabel}</div> : null}
         <EmptyState
           message="No transactions yet"
           actionLabel="Record one"
@@ -1221,7 +1301,8 @@ function RecentTransactionsPanel({
   }
   return (
     <div className="space-y-3">
-      <h2 className="font-semibold">Recent transactions</h2>
+      <h2 className="font-semibold">{title}</h2>
+      {rangeLabel ? <div className="text-xs muted">{rangeLabel}</div> : null}
       
       {/* Desktop table view */}
       <div className="hidden sm:block border rounded-xl overflow-x-auto">
@@ -1234,7 +1315,7 @@ function RecentTransactionsPanel({
             </tr>
           </thead>
           <tbody>
-            {transactions.map((tx) => (
+            {visibleTransactions.map((tx) => (
               <tr key={tx.id} className="border-t">
                 <td className="p-2">
                   {new Date(tx.occurredAt).toLocaleString()}
@@ -1253,7 +1334,7 @@ function RecentTransactionsPanel({
 
       {/* Mobile card view */}
       <div className="sm:hidden space-y-2">
-        {transactions.map((tx) => (
+        {visibleTransactions.map((tx) => (
           <div key={tx.id} className="border rounded-xl bg-[--color-panel] p-3">
             <div className="flex items-center justify-between">
               <div className="flex-1 min-w-0">
@@ -1276,6 +1357,11 @@ function RecentTransactionsPanel({
           </div>
         ))}
       </div>
+      <div>
+        <Link to="/records" className="btn text-sm">
+          View more
+        </Link>
+      </div>
     </div>
   );
 }

web/src/pages/settings/RebalancePage.tsx

@@ -1,9 +1,11 @@
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { rebalanceApi, type RebalanceCategory } from "../../api/rebalance";
 import CurrencyInput from "../../components/CurrencyInput";
 import { useToast } from "../../components/Toast";
 
+const REBALANCE_SCROLL_NUDGE_SEEN_KEY = "rebalance.scroll.nudge.v1";
+
 function sum(values: number[]) {
   return values.reduce((s, v) => s + (Number.isFinite(v) ? v : 0), 0);
 }
@@ -52,6 +54,8 @@ export default function RebalancePage() {
   const [adjustId, setAdjustId] = useState<string>("");
   const [adjustValue, setAdjustValue] = useState<string>("");
   const [confirmOpen, setConfirmOpen] = useState(false);
+  const tableScrollRef = useRef<HTMLDivElement | null>(null);
+  const [scrollCue, setScrollCue] = useState({ left: false, right: false });
 
   useEffect(() => {
     if (data?.categories) {
@@ -60,6 +64,66 @@ export default function RebalancePage() {
     }
   }, [data?.categories]);
 
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    if (window.localStorage.getItem(REBALANCE_SCROLL_NUDGE_SEEN_KEY) === "1") return;
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+    const el = tableScrollRef.current;
+    if (!el) return;
+
+    let backTimer: number | null = null;
+    const raf = window.requestAnimationFrame(() => {
+      const hasHorizontalOverflow = el.scrollWidth > el.clientWidth + 8;
+      if (!hasHorizontalOverflow) return;
+
+      const nudgeDistance = Math.min(64, Math.max(24, Math.round(el.clientWidth * 0.2)));
+      const startLeft = el.scrollLeft;
+      el.scrollTo({ left: startLeft + nudgeDistance, behavior: "smooth" });
+      backTimer = window.setTimeout(() => {
+        el.scrollTo({ left: startLeft, behavior: "smooth" });
+      }, 700);
+      window.localStorage.setItem(REBALANCE_SCROLL_NUDGE_SEEN_KEY, "1");
+    });
+
+    return () => {
+      window.cancelAnimationFrame(raf);
+      if (backTimer !== null) window.clearTimeout(backTimer);
+    };
+  }, [rows.length]);
+
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const el = tableScrollRef.current;
+    if (!el) return;
+
+    let rafId = 0;
+    const updateCue = () => {
+      const hasOverflow = el.scrollWidth > el.clientWidth + 8;
+      if (!hasOverflow) {
+        setScrollCue((prev) => (prev.left || prev.right ? { left: false, right: false } : prev));
+        return;
+      }
+      const left = el.scrollLeft > 4;
+      const right = el.scrollLeft + el.clientWidth < el.scrollWidth - 4;
+      setScrollCue((prev) => (prev.left === left && prev.right === right ? prev : { left, right }));
+    };
+
+    const handleScrollOrResize = () => {
+      if (rafId) window.cancelAnimationFrame(rafId);
+      rafId = window.requestAnimationFrame(updateCue);
+    };
+
+    updateCue();
+    el.addEventListener("scroll", handleScrollOrResize, { passive: true });
+    window.addEventListener("resize", handleScrollOrResize);
+
+    return () => {
+      if (rafId) window.cancelAnimationFrame(rafId);
+      el.removeEventListener("scroll", handleScrollOrResize);
+      window.removeEventListener("resize", handleScrollOrResize);
+    };
+  }, [rows.length]);
+
   const available = data?.availableCents ?? 0;
   const total = useMemo(() => sum(rows.map((r) => r.targetCents)), [rows]);
   const savingsTotal = useMemo(
@@ -259,40 +323,61 @@ export default function RebalancePage() {
           </button>
         </div>
 
-        <div className="overflow-auto rounded-2xl border border-[--color-border]/50 bg-[--color-panel]">
-          <table className="w-full text-sm">
-            <thead className="bg-[--color-surface]">
-              <tr className="text-left">
-                <th className="py-3 px-4 text-xs uppercase tracking-wide muted">Category</th>
-                <th className="py-3 px-4 text-xs uppercase tracking-wide muted">Current</th>
-                <th className="py-3 px-4 text-xs uppercase tracking-wide muted">Percent</th>
-                <th className="py-3 px-4 text-xs uppercase tracking-wide muted">Target</th>
-              </tr>
-            </thead>
-            <tbody>
-              {rows.map((row) => (
-                <tr key={row.id} className="border-t border-[--color-border]/30">
-                  <td className="py-3 px-4 font-medium flex items-center gap-2">
-                    {row.name}
-                    {row.isSavings ? <span className="badge badge-ghost">Savings</span> : null}
-                  </td>
-                  <td className="py-3 px-4 font-mono">${(row.balanceCents / 100).toFixed(2)}</td>
-                  <td className="py-3 px-4">{row.percent}%</td>
-                  <td className="py-3 px-4">
-                    <CurrencyInput
-                      className="input w-32"
-                      valueCents={row.targetCents}
-                      onChange={(cents) =>
-                        setRows((prev) =>
-                          prev.map((r) => (r.id === row.id ? { ...r, targetCents: cents } : r))
-                        )
-                      }
-                    />
-                  </td>
+        <div className="relative">
+          <div
+            ref={tableScrollRef}
+            className="overflow-auto rounded-2xl border border-[--color-border]/50 bg-[--color-panel]"
+          >
+            <table className="w-full text-sm">
+              <thead className="bg-[--color-surface]">
+                <tr className="text-left">
+                  <th className="py-3 px-4 text-xs uppercase tracking-wide muted">Category</th>
+                  <th className="py-3 px-4 text-xs uppercase tracking-wide muted">Current</th>
+                  <th className="py-3 px-4 text-xs uppercase tracking-wide muted">Percent</th>
+                  <th className="py-3 px-4 text-xs uppercase tracking-wide muted">Target</th>
                 </tr>
-              ))}
-            </tbody>
-          </table>
+              </thead>
+              <tbody>
+                {rows.map((row) => (
+                  <tr key={row.id} className="border-t border-[--color-border]/30">
+                    <td className="py-3 px-4 font-medium flex items-center gap-2">
+                      {row.name}
+                      {row.isSavings ? <span className="badge badge-ghost">Savings</span> : null}
+                    </td>
+                    <td className="py-3 px-4 font-mono">${(row.balanceCents / 100).toFixed(2)}</td>
+                    <td className="py-3 px-4">{row.percent}%</td>
+                    <td className="py-3 px-4">
+                      <CurrencyInput
+                        className="input w-32"
+                        valueCents={row.targetCents}
+                        onChange={(cents) =>
+                          setRows((prev) =>
+                            prev.map((r) => (r.id === row.id ? { ...r, targetCents: cents } : r))
+                          )
+                        }
+                      />
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+          {scrollCue.left && (
+            <div
+              className="pointer-events-none absolute inset-y-0 left-0 w-8 bg-gradient-to-r from-[--color-panel] to-transparent"
+              aria-hidden="true"
+            />
+          )}
+          {scrollCue.right && (
+            <div
+              className="pointer-events-none absolute inset-y-0 right-0 flex w-12 items-center justify-end bg-gradient-to-l from-[--color-panel] to-transparent pr-1"
+              aria-hidden="true"
+            >
+              <span className="rounded border border-[--color-border] bg-[--color-bg]/80 px-1.5 py-0.5 text-[11px] font-semibold text-[--color-muted]">
+                →
+              </span>
+            </div>
+          )}
         </div>
       </div>