implemented task A14

Author: tanzilahmed0

frontend/src/app/dashboard/page.tsx

@@ -2,85 +2,44 @@
  * Dashboard Page
  * 
  * Protected dashboard page with modern shadcn/ui components and professional design.
+ * Integrated with Zustand project store for state management.
  */
 
 "use client";
 
-import React, { useState, useEffect } from 'react';
+import React, { useEffect } from 'react';
 import { useRouter } from 'next/navigation';
 import { ProtectedRoute } from '@/components/auth/ProtectedRoute';
 import { useAuth } from '@/components/auth/AuthProvider';
 import { BentoGrid } from '@/components/dashboard/bento-grid';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { Badge } from '@/components/ui/badge';
-import { api } from '@/lib/api';
 import { FolderIcon, CheckCircleIcon, ClockIcon, AlertCircleIcon, LogOutIcon } from 'lucide-react';
-import type { Project } from '../../../../shared/api-contract';
+import { useProjects, useProjectActions } from '@/lib/store/project';
 
 function DashboardContent() {
   const { user, logout } = useAuth();
   const router = useRouter();
-  const [projects, setProjects] = useState<Project[]>([]);
-  const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
+  const { projects, isLoading, error, total } = useProjects();
+  const { fetchProjects, clearError } = useProjectActions();
 
   useEffect(() => {
-    const fetchProjects = async () => {
-      try {
-        setIsLoading(true);
-        setError(null);
-        const response = await api.projects.getProjects();
-        
-        if (response.success && response.data) {
-          setProjects(response.data.items);
-        } else {
-          setError(response.error || 'Failed to fetch projects');
-        }
-      } catch (err) {
-        setError('Failed to fetch projects');
-        console.error('Project fetch error:', err);
-      } finally {
-        setIsLoading(false);
-      }
-    };
-
     if (user) {
       fetchProjects();
     }
-  }, [user]);
+  }, [user, fetchProjects]);
 
   const handleLogout = async () => {
     await logout();
   };
 
   const getProjectStats = () => {
-    const total = projects.length;
     const ready = projects.filter(p => p.status === 'ready').length;
     const processing = projects.filter(p => p.status === 'processing').length;
     return { total, ready, processing };
   };
 
-  const { total, ready, processing } = getProjectStats();
-
-  const fetchProjects = async () => {
-    try {
-      setIsLoading(true);
-      setError(null);
-      const response = await api.projects.getProjects();
-      
-      if (response.success && response.data) {
-        setProjects(response.data.items);
-      } else {
-        setError(response.error || 'Failed to fetch projects');
-      }
-    } catch (err) {
-      setError('Failed to fetch projects');
-      console.error('Project fetch error:', err);
-    } finally {
-      setIsLoading(false);
-    }
-  };
+  const { ready, processing } = getProjectStats();
 
   return (
     <div className="min-h-screen bg-background">
@@ -178,9 +137,14 @@ function DashboardContent() {
           {error && (
             <Card className="border-destructive">
               <CardContent className="p-4">
-                <div className="flex items-center space-x-2">
-                  <AlertCircleIcon className="h-4 w-4 text-destructive" />
-                  <p className="text-sm text-destructive">{error}</p>
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center space-x-2">
+                    <AlertCircleIcon className="h-4 w-4 text-destructive" />
+                    <p className="text-sm text-destructive">{error}</p>
+                  </div>
+                  <Button variant="outline" size="sm" onClick={clearError}>
+                    Dismiss
+                  </Button>
                 </div>
               </CardContent>
             </Card>