251208:0010 Backend & Frontend Debug

frontend/components/dashboard/pending-tasks.tsx

@@ -7,10 +7,28 @@ import { PendingTask } from "@/types/dashboard";
 import { AlertCircle, ArrowRight } from "lucide-react";
 
 interface PendingTasksProps {
-  tasks: PendingTask[];
+  tasks: PendingTask[] | undefined;
+  isLoading: boolean;
 }
 
-export function PendingTasks({ tasks }: PendingTasksProps) {
+export function PendingTasks({ tasks, isLoading }: PendingTasksProps) {
+  if (isLoading) {
+     return (
+        <Card className="h-full">
+            <CardHeader><CardTitle className="text-lg">Pending Tasks</CardTitle></CardHeader>
+            <CardContent>
+                <div className="space-y-3">
+                    {[...Array(3)].map((_, i) => (
+                         <div key={i} className="h-14 bg-muted animate-pulse rounded-md" />
+                    ))}
+                </div>
+            </CardContent>
+        </Card>
+     )
+  }
+
+  if (!tasks) tasks = [];
+
   return (
     <Card className="h-full">
       <CardHeader>

frontend/components/dashboard/recent-activity.tsx

@@ -8,10 +8,36 @@ import { ActivityLog } from "@/types/dashboard";
 import Link from "next/link";
 
 interface RecentActivityProps {
-  activities: ActivityLog[];
+  activities: ActivityLog[] | undefined;
+  isLoading: boolean;
 }
 
-export function RecentActivity({ activities }: RecentActivityProps) {
+export function RecentActivity({ activities, isLoading }: RecentActivityProps) {
+  if (isLoading) {
+     return (
+        <Card className="h-full">
+            <CardHeader><CardTitle className="text-lg">Recent Activity</CardTitle></CardHeader>
+            <CardContent>
+                <div className="space-y-6">
+                    {[...Array(3)].map((_, i) => (
+                         <div key={i} className="h-16 bg-muted animate-pulse rounded-md" />
+                    ))}
+                </div>
+            </CardContent>
+        </Card>
+     )
+  }
+
+  if (!activities || activities.length === 0) {
+      return (
+        <Card className="h-full">
+          <CardHeader><CardTitle className="text-lg">Recent Activity</CardTitle></CardHeader>
+           <CardContent className="text-muted-foreground text-sm text-center py-8">
+               No recent activity.
+           </CardContent>
+        </Card>
+      );
+  }
   return (
     <Card className="h-full">
       <CardHeader>

frontend/components/dashboard/stats-cards.tsx

@@ -4,11 +4,21 @@ import { Card } from "@/components/ui/card";
 import { FileText, Clipboard, CheckCircle, Clock } from "lucide-react";
 import { DashboardStats } from "@/types/dashboard";
 
-interface StatsCardsProps {
-  stats: DashboardStats;
+export interface StatsCardsProps {
+  stats: DashboardStats | undefined;
+  isLoading: boolean;
 }
 
-export function StatsCards({ stats }: StatsCardsProps) {
+export function StatsCards({ stats, isLoading }: StatsCardsProps) {
+  if (isLoading || !stats) {
+    return (
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+        {[...Array(4)].map((_, i) => (
+          <Card key={i} className="p-6 h-[100px] animate-pulse bg-muted" />
+        ))}
+      </div>
+    );
+  }
   const cards = [
     {
       title: "Total Correspondences",