perf(frontend): Optimize component rendering with React.memo and hooks - Sprint 3 Story 2

Add React.memo to display components and useCallback/useMemo for better performance.

Changes:
- Added React.memo to TaskCard component
- Added React.memo to StoryCard component
- Added React.memo to KanbanBoard component
- Added React.memo to KanbanColumn component
- Added useCallback to kanban page drag handlers (handleDragStart, handleDragEnd)
- Added useCallback to epics page handlers (handleDelete, getStatusColor, getPriorityColor)
- Added useMemo for expensive computations in dashboard page (stats, recentProjects sorting)
- Added useMemo for total tasks calculation in KanbanBoard
- Removed unused isConnected variable from kanban page

Performance improvements:
- Reduced unnecessary re-renders in Card components
- Optimized list rendering performance with memoized callbacks
- Improved filtering and sorting performance with useMemo
- Better React DevTools Profiler metrics

🤖 Generated with [Claude Code](https://claude.com/claude-code)

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

app/(dashboard)/dashboard/page.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import Link from 'next/link';
-import { useState } from 'react';
+import { useState, useMemo } from 'react';
 import { Plus, FolderKanban, Archive, TrendingUp, ArrowRight } from 'lucide-react';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
@@ -15,16 +15,19 @@ export default function DashboardPage() {
   const { data: projects, isLoading } = useProjects();
 
   // Calculate statistics
-  const stats = {
+  const stats = useMemo(() => ({
     totalProjects: projects?.length || 0,
     activeProjects: projects?.length || 0, // TODO: Add status field to Project model
     archivedProjects: 0, // TODO: Add status field to Project model
-  };
+  }), [projects]);
 
   // Get recent projects (sort by creation time, take first 5)
-  const recentProjects = projects
-    ?.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())
-    .slice(0, 5) || [];
+  const recentProjects = useMemo(() => {
+    return projects
+      ?.slice()
+      .sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())
+      .slice(0, 5) || [];
+  }, [projects]);
 
   return (
     <div className="space-y-8">