Initial commit

app/(dashboard)/dashboard/page.tsx

@@ -0,0 +1,108 @@
+'use client';
+
+import Link from 'next/link';
+import { FolderKanban, Plus } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { useProjects } from '@/lib/hooks/use-projects';
+
+export default function DashboardPage() {
+  const { data: projects } = useProjects();
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-3xl font-bold tracking-tight">Dashboard</h1>
+        <p className="text-muted-foreground">
+          Welcome to ColaFlow - Your AI-powered project management system
+        </p>
+      </div>
+
+      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">Total Projects</CardTitle>
+            <FolderKanban className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{projects?.length || 0}</div>
+            <p className="text-xs text-muted-foreground">
+              Active projects in your workspace
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">Active Projects</CardTitle>
+            <FolderKanban className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">
+              {projects?.filter((p) => p.status === 'Active').length || 0}
+            </div>
+            <p className="text-xs text-muted-foreground">
+              Currently in progress
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">Quick Actions</CardTitle>
+            <Plus className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <Link href="/projects">
+              <Button className="w-full" variant="outline">
+                View All Projects
+              </Button>
+            </Link>
+          </CardContent>
+        </Card>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Recent Projects</CardTitle>
+          <CardDescription>
+            Your most recently updated projects
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          {projects && projects.length > 0 ? (
+            <div className="space-y-2">
+              {projects.slice(0, 5).map((project) => (
+                <Link
+                  key={project.id}
+                  href={`/projects/${project.id}`}
+                  className="block rounded-lg border p-3 transition-colors hover:bg-accent"
+                >
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <h3 className="font-medium">{project.name}</h3>
+                      <p className="text-sm text-muted-foreground">{project.key}</p>
+                    </div>
+                    <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>
+                </Link>
+              ))}
+            </div>
+          ) : (
+            <p className="text-sm text-muted-foreground">
+              No projects yet. Create your first project to get started.
+            </p>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

app/(dashboard)/kanban/[projectId]/page.tsx

@@ -0,0 +1,57 @@
+'use client';
+
+import { use } from 'react';
+import Link from 'next/link';
+import { ArrowLeft, Loader2 } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { KanbanBoard } from '@/components/features/kanban/KanbanBoard';
+import { useKanbanBoard } from '@/lib/hooks/use-kanban';
+
+interface KanbanPageProps {
+  params: Promise<{ projectId: string }>;
+}
+
+export default function KanbanPage({ params }: KanbanPageProps) {
+  const { projectId } = use(params);
+  const { data: board, isLoading, error } = useKanbanBoard(projectId);
+
+  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 || !board) {
+    return (
+      <div className="space-y-4">
+        <Link href="/projects">
+          <Button variant="ghost" size="icon">
+            <ArrowLeft className="h-4 w-4" />
+          </Button>
+        </Link>
+        <div className="flex h-[50vh] items-center justify-center">
+          <p className="text-sm text-muted-foreground">
+            Failed to load kanban board. Please try again later.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center gap-4">
+        <Link href={`/projects/${projectId}`}>
+          <Button variant="ghost" size="icon">
+            <ArrowLeft className="h-4 w-4" />
+          </Button>
+        </Link>
+        <h1 className="text-3xl font-bold tracking-tight">Kanban Board</h1>
+      </div>
+
+      <KanbanBoard board={board} />
+    </div>
+  );
+}

app/(dashboard)/layout.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import { Header } from '@/components/layout/Header';
+import { Sidebar } from '@/components/layout/Sidebar';
+import { useUIStore } from '@/stores/ui-store';
+
+export default function DashboardLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const sidebarOpen = useUIStore((state) => state.sidebarOpen);
+
+  return (
+    <div className="min-h-screen">
+      <Header />
+      <div className="flex">
+        <Sidebar />
+        <main
+          className={`flex-1 transition-all duration-200 ${
+            sidebarOpen ? 'ml-64' : 'ml-0'
+          }`}
+        >
+          <div className="p-6">{children}</div>
+        </main>
+      </div>
+    </div>
+  );
+}

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>
+  );
+}

app/(dashboard)/projects/page.tsx

@@ -0,0 +1,95 @@
+'use client';
+
+import { useState } from 'react';
+import Link from 'next/link';
+import { Plus, Loader2 } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { useProjects } from '@/lib/hooks/use-projects';
+import { CreateProjectDialog } from '@/components/features/projects/CreateProjectDialog';
+
+export default function ProjectsPage() {
+  const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
+  const { data: projects, isLoading, error } = useProjects();
+
+  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) {
+    return (
+      <div className="flex h-[50vh] items-center justify-center">
+        <p className="text-sm text-muted-foreground">
+          Failed to load projects. Please try again later.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-3xl font-bold tracking-tight">Projects</h1>
+          <p className="text-muted-foreground">
+            Manage your projects and track progress
+          </p>
+        </div>
+        <Button onClick={() => setIsCreateDialogOpen(true)}>
+          <Plus className="mr-2 h-4 w-4" />
+          New Project
+        </Button>
+      </div>
+
+      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+        {projects?.map((project) => (
+          <Link key={project.id} href={`/projects/${project.id}`}>
+            <Card className="transition-colors hover:bg-accent">
+              <CardHeader>
+                <div className="flex items-start justify-between">
+                  <div className="space-y-1">
+                    <CardTitle>{project.name}</CardTitle>
+                    <CardDescription>{project.key}</CardDescription>
+                  </div>
+                  <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>
+              </CardHeader>
+              <CardContent>
+                <p className="line-clamp-2 text-sm text-muted-foreground">
+                  {project.description}
+                </p>
+              </CardContent>
+            </Card>
+          </Link>
+        ))}
+
+        {!projects || projects.length === 0 ? (
+          <Card className="col-span-full">
+            <CardContent className="flex h-40 items-center justify-center">
+              <p className="text-sm text-muted-foreground">
+                No projects yet. Create your first project to get started.
+              </p>
+            </CardContent>
+          </Card>
+        ) : null}
+      </div>
+
+      <CreateProjectDialog
+        open={isCreateDialogOpen}
+        onOpenChange={setIsCreateDialogOpen}
+      />
+    </div>
+  );
+}