refactor: Migrate dashboard project listing to client components, adding URL-driven filtering, sorting, and pagination.

app/(dashboard)/workspaces/page.tsx

@@ -1,120 +1,65 @@
-import Link from 'next/link';
-import { Plus, Building2, Clock, FolderOpen, Users } from 'lucide-react';
-import { Button } from '@/components/ui/button';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { auth } from '@/lib/auth';
 import { redirect } from 'next/navigation';
 import { db } from '@/lib/db';
+import { WorkspacesClient } from './workspaces-client';
 
-function formatRelativeTime(date: Date): string {
-  const now = new Date();
-  const diffMs = now.getTime() - date.getTime();
-  const diffMins = Math.floor(diffMs / 60000);
-  const diffHours = Math.floor(diffMs / 3600000);
-  const diffDays = Math.floor(diffMs / 86400000);
-
-  if (diffMins < 1) return 'just now';
-  if (diffMins < 60) return `${diffMins}m ago`;
-  if (diffHours < 24) return `${diffHours}h ago`;
-  if (diffDays < 7) return `${diffDays}d ago`;
-  return date.toLocaleDateString();
-}
-
-export default async function WorkspacesPage() {
+export default async function WorkspacesPage({
+  searchParams,
+}: {
+  searchParams: Promise<{ page?: string }>
+}) {
   const session = await auth();
   if (!session?.user?.id) {
     redirect('/login');
   }
 
-  const workspaces = await db.workspace.findMany({
-    where: {
-      OR: [
-        { ownerId: session.user.id },
-        { members: { some: { userId: session.user.id } } },
-      ],
-    },
-    include: {
-      owner: { select: { id: true, name: true } },
-      _count: {
-        select: {
-          projects: true,
-          members: true,
+  const resolvedSearchParams = await searchParams;
+  const page = Number(resolvedSearchParams?.page) || 1;
+  const pageSize = 20;
+  const skip = (page - 1) * pageSize;
+
+  const [workspaces, totalWorkspaces] = await Promise.all([
+    db.workspace.findMany({
+      skip,
+      take: pageSize,
+      where: {
+        OR: [
+          { ownerId: session.user.id },
+          { members: { some: { userId: session.user.id } } },
+        ],
+      },
+      include: {
+        owner: { select: { id: true, name: true } },
+        _count: {
+          select: {
+            projects: true,
+            members: true,
+          },
         },
       },
-    },
-    orderBy: { updatedAt: 'desc' },
-  });
+      orderBy: { updatedAt: 'desc' },
+    }),
+    db.workspace.count({
+      where: {
+        OR: [
+          { ownerId: session.user.id },
+          { members: { some: { userId: session.user.id } } },
+        ],
+      }
+    })
+  ]);
+
+  const totalPages = Math.ceil(totalWorkspaces / pageSize);
+
+  const serializedWorkspaces = workspaces.map((w) => ({
+    id: w.id,
+    name: w.name,
+    description: w.description,
+    updatedAt: w.updatedAt.toISOString(),
+    _count: w._count
+  }));
 
   return (
-    <div className="px-6 lg:px-8 py-8 w-full">
-      {/* Header */}
-      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-8">
-        <div>
-          <h1 className="text-3xl font-bold tracking-tight">Workspaces</h1>
-          <p className="text-muted-foreground mt-1">
-            Manage your workspaces and their projects
-          </p>
-        </div>
-        <Button asChild className="w-full sm:w-auto">
-          <Link href="/workspaces/new">
-            <Plus className="h-4 w-4 mr-2" />
-            New Workspace
-          </Link>
-        </Button>
-      </div>
-
-      {/* Workspaces Grid */}
-      {workspaces.length > 0 ? (
-        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
-          {workspaces.map((workspace: typeof workspaces[number]) => (
-            <Link key={workspace.id} href={`/workspaces/${workspace.id}`}>
-              <Card className="h-full transition-colors hover:bg-accent/50 cursor-pointer">
-                <CardHeader>
-                  <CardTitle className="flex items-center gap-2">
-                    <Building2 className="h-5 w-5 text-primary" />
-                    {workspace.name}
-                  </CardTitle>
-                  <CardDescription className="line-clamp-2">
-                    {workspace.description || 'No description'}
-                  </CardDescription>
-                </CardHeader>
-                <CardContent>
-                  <div className="flex items-center gap-4 text-sm text-muted-foreground">
-                    <span className="flex items-center gap-1">
-                      <Clock className="h-3.5 w-3.5" />
-                      {formatRelativeTime(workspace.updatedAt)}
-                    </span>
-                    <span className="flex items-center gap-1">
-                      <FolderOpen className="h-3.5 w-3.5" />
-                      {workspace._count.projects} projects
-                    </span>
-                    <span className="flex items-center gap-1">
-                      <Users className="h-3.5 w-3.5" />
-                      {workspace._count.members + 1}
-                    </span>
-                  </div>
-                </CardContent>
-              </Card>
-            </Link>
-          ))}
-        </div>
-      ) : (
-        <Card className="border-dashed">
-          <CardContent className="flex flex-col items-center justify-center py-16">
-            <Building2 className="h-12 w-12 text-muted-foreground mb-4" />
-            <h3 className="text-lg font-medium mb-2">No workspaces yet</h3>
-            <p className="text-muted-foreground text-center mb-4">
-              Create a workspace to organize your projects and invite team members
-            </p>
-            <Button asChild>
-              <Link href="/workspaces/new">
-                <Plus className="h-4 w-4 mr-2" />
-                Create Workspace
-              </Link>
-            </Button>
-          </CardContent>
-        </Card>
-      )}
-    </div>
+    <WorkspacesClient workspaces={serializedWorkspaces} totalPages={totalPages} currentPage={page} />
   );
 }