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)/tasks/page.tsx

@@ -1,19 +1,40 @@
 "use client";
 
+import { useState, useEffect } from "react";
 import type { ReactElement } from "react";
 
 import { TaskList } from "@/components/tasks/TaskList";
 import { mockTasks } from "@/lib/api/tasks";
+import type { Task } from "@mosaic/shared";
 
 export default function TasksPage(): ReactElement {
-  // TODO: Replace with real API call when backend is ready
-  // const { data: tasks, isLoading } = useQuery({
-  //   queryKey: ["tasks"],
-  //   queryFn: fetchTasks,
-  // });
+  const [tasks, setTasks] = useState<Task[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
 
-  const tasks = mockTasks;
-  const isLoading = false;
+  useEffect(() => {
+    void loadTasks();
+  }, []);
+
+  async function loadTasks(): Promise<void> {
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      // TODO: Replace with real API call when backend is ready
+      // const data = await fetchTasks();
+      await new Promise((resolve) => setTimeout(resolve, 300));
+      setTasks(mockTasks);
+    } catch (err) {
+      setError(
+        err instanceof Error
+          ? err.message
+          : "We had trouble loading your tasks. Please try again when you're ready."
+      );
+    } finally {
+      setIsLoading(false);
+    }
+  }
 
   return (
     <main className="container mx-auto px-4 py-8">
@@ -21,7 +42,20 @@ export default function TasksPage(): ReactElement {
         <h1 className="text-3xl font-bold text-gray-900">Tasks</h1>
         <p className="text-gray-600 mt-2">Organize your work at your own pace</p>
       </div>
-      <TaskList tasks={tasks} isLoading={isLoading} />
+
+      {error !== null ? (
+        <div className="rounded-lg border border-amber-200 bg-amber-50 p-6 text-center">
+          <p className="text-amber-800">{error}</p>
+          <button
+            onClick={() => void loadTasks()}
+            className="mt-4 rounded-md bg-amber-600 px-4 py-2 text-sm font-medium text-white hover:bg-amber-700 transition-colors"
+          >
+            Try again
+          </button>
+        </div>
+      ) : (
+        <TaskList tasks={tasks} isLoading={isLoading} />
+      )}
     </main>
   );
 }