feat(frontend): Implement Project Detail Page with edit and archive functionality

Add complete project detail page with real-time updates via SignalR.

Changes:
- Updated project detail page with edit and archive buttons
- Created EditProjectDialog component for updating projects
- Created ArchiveProjectDialog component for archiving projects
- Integrated SignalR real-time updates (onProjectUpdated, onProjectArchived)
- Added SignalR connection status indicator
- Enhanced useProjectHub hook to support callback options
- Improved UI layout with two-column card grid
- Added toast notifications for user feedback

Features:
- View project details (name, description, status, timestamps)
- Edit project name and description
- Archive active projects
- Real-time updates when project is modified by other users
- Automatic redirect when project is archived

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

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

app/(dashboard)/projects/[id]/page.tsx

@@ -1,11 +1,19 @@
 'use client';
 
-import { use } from 'react';
+import { use, useState, useEffect } from 'react';
 import Link from 'next/link';
-import { ArrowLeft, Loader2, KanbanSquare } from 'lucide-react';
+import { useRouter } from 'next/navigation';
+import { ArrowLeft, Loader2, KanbanSquare, Pencil, Archive } from 'lucide-react';
+import { useQueryClient } from '@tanstack/react-query';
 import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { useProject } from '@/lib/hooks/use-projects';
+import { useProjectHub } from '@/lib/hooks/useProjectHub';
+import { EditProjectDialog } from '@/components/features/projects/EditProjectDialog';
+import { ArchiveProjectDialog } from '@/components/features/projects/ArchiveProjectDialog';
+import type { Project } from '@/types/project';
+import { toast } from 'sonner';
 
 interface ProjectDetailPageProps {
   params: Promise<{ id: string }>;
@@ -13,7 +21,29 @@ interface ProjectDetailPageProps {
 
 export default function ProjectDetailPage({ params }: ProjectDetailPageProps) {
   const { id } = use(params);
+  const router = useRouter();
+  const queryClient = useQueryClient();
   const { data: project, isLoading, error } = useProject(id);
+  const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
+  const [isArchiveDialogOpen, setIsArchiveDialogOpen] = useState(false);
+
+  // SignalR real-time updates
+  const { connectionState } = useProjectHub(id, {
+    onProjectUpdated: (updatedProject) => {
+      if (updatedProject.id === id) {
+        console.log('[ProjectDetail] Project updated via SignalR:', updatedProject);
+        queryClient.setQueryData(['projects', id], updatedProject);
+        toast.info('Project updated');
+      }
+    },
+    onProjectArchived: (data) => {
+      if (data.ProjectId === id) {
+        console.log('[ProjectDetail] Project archived via SignalR:', data);
+        toast.info('Project has been archived');
+        router.push('/projects');
+      }
+    },
+  });
 
   if (isLoading) {
     return (
@@ -44,48 +74,97 @@ export default function ProjectDetailPage({ params }: ProjectDetailPageProps) {
         <div className="flex-1">
           <div className="flex items-center gap-3">
             <h1 className="text-3xl font-bold tracking-tight">{project.name}</h1>
-            <span
-              className={`rounded-full px-2 py-1 text-xs font-medium ${
-                project.status === 'Active'
-                  ? 'bg-green-100 text-green-700'
-                  : 'bg-gray-100 text-gray-700'
-              }`}
-            >
+            <Badge variant={project.status === 'Active' ? 'default' : 'secondary'}>
               {project.status}
-            </span>
+            </Badge>
           </div>
-          <p className="text-muted-foreground">Key: {project.key}</p>
+          <p className="text-sm text-muted-foreground">Key: {project.key}</p>
+        </div>
+        <div className="flex gap-2">
+          <Link href={`/kanban/${project.id}`}>
+            <Button variant="outline">
+              <KanbanSquare className="mr-2 h-4 w-4" />
+              View Board
+            </Button>
+          </Link>
+          {project.status === 'Active' && (
+            <>
+              <Button variant="outline" onClick={() => setIsEditDialogOpen(true)}>
+                <Pencil className="mr-2 h-4 w-4" />
+                Edit
+              </Button>
+              <Button variant="destructive" onClick={() => setIsArchiveDialogOpen(true)}>
+                <Archive className="mr-2 h-4 w-4" />
+                Archive
+              </Button>
+            </>
+          )}
         </div>
-        <Link href={`/kanban/${project.id}`}>
-          <Button>
-            <KanbanSquare className="mr-2 h-4 w-4" />
-            View Board
-          </Button>
-        </Link>
       </div>
 
-      <Card>
-        <CardHeader>
-          <CardTitle>Project Details</CardTitle>
-          <CardDescription>Information about this project</CardDescription>
-        </CardHeader>
-        <CardContent className="space-y-4">
-          <div>
-            <h3 className="text-sm font-medium text-muted-foreground">Description</h3>
-            <p className="mt-1">{project.description || 'No description provided'}</p>
-          </div>
-          <div>
-            <h3 className="text-sm font-medium text-muted-foreground">Created</h3>
-            <p className="mt-1">{new Date(project.createdAt).toLocaleDateString()}</p>
-          </div>
-          {project.updatedAt && (
-            <div>
-              <h3 className="text-sm font-medium text-muted-foreground">Last Updated</h3>
-              <p className="mt-1">{new Date(project.updatedAt).toLocaleDateString()}</p>
+      <div className="grid gap-4 md:grid-cols-2">
+        <Card>
+          <CardHeader>
+            <CardTitle>Description</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <p className="text-sm">{project.description || 'No description provided'}</p>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Details</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-2">
+            <div className="flex justify-between text-sm">
+              <span className="text-muted-foreground">Created</span>
+              <span>{new Date(project.createdAt).toLocaleDateString()}</span>
             </div>
-          )}
-        </CardContent>
-      </Card>
+            {project.updatedAt && (
+              <div className="flex justify-between text-sm">
+                <span className="text-muted-foreground">Updated</span>
+                <span>{new Date(project.updatedAt).toLocaleDateString()}</span>
+              </div>
+            )}
+            <div className="flex justify-between text-sm">
+              <span className="text-muted-foreground">Status</span>
+              <Badge variant={project.status === 'Active' ? 'default' : 'secondary'}>
+                {project.status}
+              </Badge>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* SignalR Connection Status */}
+      <div className="flex items-center gap-2 text-xs text-muted-foreground">
+        <div
+          className={`h-2 w-2 rounded-full ${
+            connectionState === 'connected' ? 'bg-green-500' : 'bg-gray-400'
+          }`}
+        />
+        <span>
+          {connectionState === 'connected' ? 'Real-time updates enabled' : 'Connecting...'}
+        </span>
+      </div>
+
+      {/* Dialogs */}
+      {project && (
+        <>
+          <EditProjectDialog
+            project={project}
+            open={isEditDialogOpen}
+            onOpenChange={setIsEditDialogOpen}
+          />
+          <ArchiveProjectDialog
+            projectId={project.id}
+            projectName={project.name}
+            open={isArchiveDialogOpen}
+            onOpenChange={setIsArchiveDialogOpen}
+          />
+        </>
+      )}
     </div>
   );
 }