Initial commit

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

@@ -0,0 +1,91 @@
+'use client';
+
+import { use } from 'react';
+import Link from 'next/link';
+import { ArrowLeft, Loader2, KanbanSquare } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { useProject } from '@/lib/hooks/use-projects';
+
+interface ProjectDetailPageProps {
+  params: Promise<{ id: string }>;
+}
+
+export default function ProjectDetailPage({ params }: ProjectDetailPageProps) {
+  const { id } = use(params);
+  const { data: project, isLoading, error } = useProject(id);
+
+  if (isLoading) {
+    return (
+      <div className="flex h-[50vh] items-center justify-center">
+        <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+      </div>
+    );
+  }
+
+  if (error || !project) {
+    return (
+      <div className="flex h-[50vh] items-center justify-center">
+        <p className="text-sm text-muted-foreground">
+          Project not found or failed to load.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center gap-4">
+        <Link href="/projects">
+          <Button variant="ghost" size="icon">
+            <ArrowLeft className="h-4 w-4" />
+          </Button>
+        </Link>
+        <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'
+              }`}
+            >
+              {project.status}
+            </span>
+          </div>
+          <p className="text-muted-foreground">Key: {project.key}</p>
+        </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>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}