fix(CQ-WEB-10): Add loading/error states to pages with mock data

Convert tasks, calendar, and dashboard pages from synchronous mock data
to async loading pattern with useState/useEffect. Each page now shows a
loading state via child components while data loads, and displays a
PDA-friendly amber-styled message with a retry button if loading fails.

This prepares these pages for real API integration by establishing the
async data flow pattern. Child components (TaskList, Calendar, dashboard
widgets) already handled isLoading props — now the pages actually use them.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

apps/web/src/app/(authenticated)/calendar/page.test.tsx

@@ -0,0 +1,46 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen, waitFor } from "@testing-library/react";
+import CalendarPage from "./page";
+
+// Mock the Calendar component
+vi.mock("@/components/calendar/Calendar", () => ({
+  Calendar: ({
+    events,
+    isLoading,
+  }: {
+    events: unknown[];
+    isLoading: boolean;
+  }): React.JSX.Element => (
+    <div data-testid="calendar">{isLoading ? "Loading" : `${String(events.length)} events`}</div>
+  ),
+}));
+
+describe("CalendarPage", (): void => {
+  it("should render the page title", (): void => {
+    render(<CalendarPage />);
+    expect(screen.getByRole("heading", { level: 1 })).toHaveTextContent("Calendar");
+  });
+
+  it("should show loading state initially", (): void => {
+    render(<CalendarPage />);
+    expect(screen.getByTestId("calendar")).toHaveTextContent("Loading");
+  });
+
+  it("should render the Calendar with events after loading", async (): Promise<void> => {
+    render(<CalendarPage />);
+    await waitFor((): void => {
+      expect(screen.getByTestId("calendar")).toHaveTextContent("3 events");
+    });
+  });
+
+  it("should have proper layout structure", (): void => {
+    const { container } = render(<CalendarPage />);
+    const main = container.querySelector("main");
+    expect(main).toBeInTheDocument();
+  });
+
+  it("should render the subtitle text", (): void => {
+    render(<CalendarPage />);
+    expect(screen.getByText("View your schedule at a glance")).toBeInTheDocument();
+  });
+});