Add error handling to tasks page

app/tasks/page.tsx

@@ -234,8 +234,17 @@ function StatusBreakdownCard({ counts }: { counts: { open: number; inProgress: n
 }
 
 export default async function TasksOverviewPage() {
-  // Fetch all data in parallel
+  // Fetch all data in parallel with error handling
-  const [
+  let statusCounts = { open: 0, inProgress: 0, review: 0, done: 0, total: 0 };
+  let highPriorityCount = 0;
+  let overdueCount = 0;
+  let recentlyUpdated: Task[] = [];
+  let recentlyCompleted: Task[] = [];
+  let highPriorityOpen: Task[] = [];
+  let errorMessage: string | null = null;
+
+  try {
+    [
       statusCounts,
       highPriorityCount,
       overdueCount,
@@ -250,6 +259,10 @@ export default async function TasksOverviewPage() {
       fetchRecentlyCompletedTasks(5),
       fetchHighPriorityOpenTasks(5),
     ]);
+  } catch (error) {
+    console.error("Error fetching tasks:", error);
+    errorMessage = error instanceof Error ? error.message : "Failed to load tasks";
+  }
 
   return (
     <DashboardLayout>
@@ -278,6 +291,15 @@ export default async function TasksOverviewPage() {
           </Link>
         </div>
 
+        {/* Error Message */}
+        {errorMessage && (
+          <div className="bg-red-500/10 border border-red-500/30 rounded-lg p-4 text-red-400">
+            <p className="font-medium">Error loading tasks</p>
+            <p className="text-sm mt-1">{errorMessage}</p>
+            <p className="text-sm mt-2">Make sure you are logged into gantt-board and have access to the Supabase database.</p>
+          </div>
+        )}
+
         {/* Stats Section */}
         <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
           <StatCard