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

app/(dashboard)/dashboard/dashboard-client.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import { ProjectFilter } from './project-filter';
+
+interface SerializedProject {
+  id: string;
+  name: string;
+  description: string | null;
+  visibility: string;
+  updatedAt: string;
+  workspaceId: string | null;
+  workspaceName: string | null;
+  memberCount: number;
+  videoCount: number;
+}
+
+interface DashboardClientProps {
+  serializedProjects: SerializedProject[];
+  workspaces: { id: string; name: string }[];
+  totalPages: number;
+}
+
+export function DashboardClient({ serializedProjects, workspaces, totalPages }: DashboardClientProps) {
+  return (
+    <div className="px-6 lg:px-8 py-8 w-full">
+      <ProjectFilter
+        projects={serializedProjects}
+        workspaces={workspaces}
+        totalPages={totalPages}
+      />
+    </div>
+  );
+}

app/(dashboard)/dashboard/page.tsx

@@ -1,98 +1,110 @@
-import Link from 'next/link';
-import { Plus, FolderOpen, Clock, Users, Globe, Lock, UserPlus, Building2 } from 'lucide-react';
-import { Button } from '@/components/ui/button';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { Badge } from '@/components/ui/badge';
 import { auth } from '@/lib/auth';
 import { redirect } from 'next/navigation';
 import { db } from '@/lib/db';
-import { ProjectFilter } from './project-filter';
+import { Prisma } from '@prisma/client';
+import { DashboardClient } from './dashboard-client';
 
-function formatRelativeTime(date: Date): string {
+export default async function DashboardPage({
-  const now = new Date();
+    searchParams,
-  const diffMs = now.getTime() - date.getTime();
+}: {
-  const diffMins = Math.floor(diffMs / 60000);
+    searchParams: Promise<{ ws?: string; sort?: string; page?: string }>
-  const diffHours = Math.floor(diffMs / 3600000);
+}) {
-  const diffDays = Math.floor(diffMs / 86400000);
+    const session = await auth();
-
+    if (!session?.user?.id) {
-  if (diffMins < 1) return 'just now';
+        redirect('/login');
-  if (diffMins < 60) return `${diffMins}m ago`;
-  if (diffHours < 24) return `${diffHours}h ago`;
-  if (diffDays < 7) return `${diffDays}d ago`;
-  return date.toLocaleDateString();
-}
-
-function VisibilityIcon({ visibility }: { visibility: string }) {
-  switch (visibility) {
-    case 'PUBLIC':
-      return <Globe className="h-3.5 w-3.5" />;
-    case 'INVITE':
-      return <UserPlus className="h-3.5 w-3.5" />;
-    default:
-      return <Lock className="h-3.5 w-3.5" />;
-  }
-}
-
-export default async function DashboardPage() {
-  const session = await auth();
-  if (!session?.user?.id) {
-    redirect('/login');
-  }
-
-  // Fetch projects where user is owner, member, or workspace member
-  const projects = await db.project.findMany({
-    where: {
-      OR: [
-        { ownerId: session.user.id },
-        { members: { some: { userId: session.user.id } } },
-        {
-          workspace: {
-            OR: [
-              { ownerId: session.user.id },
-              { members: { some: { userId: session.user.id } } },
-            ],
-          },
-        },
-      ],
-    },
-    include: {
-      workspace: {
-        select: { id: true, name: true },
-      },
-      _count: {
-        select: {
-          videos: true,
-          members: true,
-        },
-      },
-    },
-    orderBy: { updatedAt: 'desc' },
-  });
-
-  // Build unique workspace list for filter
-  const workspaceMap = new Map<string, string>();
-  for (const project of projects) {
-    if (project.workspace) {
-      workspaceMap.set(project.workspace.id, project.workspace.name);
     }
-  }
-  const workspaces = Array.from(workspaceMap, ([id, name]) => ({ id, name }));
 
-  const serializedProjects = projects.map((p: typeof projects[0]) => ({
+    const resolvedSearchParams = await searchParams;
-    id: p.id,
+    const { ws, sort, page: pageParam } = resolvedSearchParams || {};
-    name: p.name,
-    description: p.description,
-    visibility: p.visibility,
-    updatedAt: p.updatedAt.toISOString(),
-    workspaceId: p.workspace?.id ?? null,
-    workspaceName: p.workspace?.name ?? null,
-    memberCount: p._count.members + 1,
-    videoCount: p._count.videos,
-  }));
 
-  return (
+    const page = Number(pageParam) || 1;
-    <div className="px-6 lg:px-8 py-8 w-full">
+    const pageSize = 20;
-      <ProjectFilter projects={serializedProjects} workspaces={workspaces} />
+    const skip = (page - 1) * pageSize;
-    </div>
+    const orderByDirection = sort === 'asc' ? 'asc' : 'desc';
-  );
+
+    // Base permission where clause
+    const baseWhere: Prisma.ProjectWhereInput = {
+        OR: [
+            { ownerId: session.user.id },
+            { members: { some: { userId: session.user.id } } },
+            {
+                workspace: {
+                    OR: [
+                        { ownerId: session.user.id },
+                        { members: { some: { userId: session.user.id } } },
+                    ],
+                },
+            },
+        ],
+    };
+
+    // Build unique workspace list for filter (Needs an unbounded list of accessible workspaces)
+    const accessibleProjects = await db.project.findMany({
+        where: baseWhere,
+        select: {
+            workspace: {
+                select: { id: true, name: true }
+            }
+        },
+        distinct: ['workspaceId']
+    });
+
+    const workspaceMap = new Map<string, string>();
+    for (const project of accessibleProjects) {
+        if (project.workspace) {
+            workspaceMap.set(project.workspace.id, project.workspace.name);
+        }
+    }
+    const workspaces = Array.from(workspaceMap, ([id, name]) => ({ id, name }));
+
+    // Final query constraints
+    const queryWhere: Prisma.ProjectWhereInput = {
+        ...baseWhere,
+        ...(ws && ws !== 'all' ? { workspaceId: ws } : {})
+    };
+
+    const [projects, totalProjects] = await Promise.all([
+        db.project.findMany({
+            skip,
+            take: pageSize,
+            where: queryWhere,
+            include: {
+                workspace: {
+                    select: { id: true, name: true },
+                },
+                _count: {
+                    select: {
+                        videos: true,
+                        members: true,
+                    },
+                },
+            },
+            orderBy: { updatedAt: orderByDirection },
+        }),
+        db.project.count({
+            where: queryWhere
+        })
+    ]);
+
+    const totalPages = Math.ceil(totalProjects / pageSize);
+
+    const serializedProjects = projects.map((p) => ({
+        id: p.id,
+        name: p.name,
+        description: p.description,
+        visibility: p.visibility,
+        updatedAt: p.updatedAt.toISOString(),
+        workspaceId: p.workspace?.id ?? null,
+        workspaceName: p.workspace?.name ?? null,
+        memberCount: p._count.members + 1,
+        videoCount: p._count.videos,
+    }));
+
+    return (
+        <DashboardClient
+            serializedProjects={serializedProjects}
+            workspaces={workspaces}
+            totalPages={totalPages}
+        />
+    );
 }

app/(dashboard)/dashboard/project-filter.tsx

@@ -1,6 +1,7 @@
 'use client';
 
-import { useState, useMemo } from 'react';
+import { useCallback } from 'react';
+import { useRouter, usePathname, useSearchParams } from 'next/navigation';
 import Link from 'next/link';
 import { Plus, FolderOpen, Clock, Users, Globe, Lock, UserPlus, Building2, ArrowUp, ArrowDown } from 'lucide-react';
 import { Button } from '@/components/ui/button';
@@ -29,6 +30,7 @@ interface SerializedProject {
 interface ProjectFilterProps {
   projects: SerializedProject[];
   workspaces: { id: string; name: string }[];
+  totalPages: number;
 }
 
 function formatRelativeTime(dateStr: string): string {
@@ -59,25 +61,33 @@ function VisibilityIcon({ visibility }: { visibility: string }) {
 
 type SortOrder = 'desc' | 'asc';
 
-export function ProjectFilter({ projects, workspaces }: ProjectFilterProps) {
+export function ProjectFilter({ projects, workspaces, totalPages }: ProjectFilterProps) {
-  const [selectedWorkspace, setSelectedWorkspace] = useState<string>('all');
+  const router = useRouter();
-  const [sortOrder, setSortOrder] = useState<SortOrder>('desc');
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
 
-  const filtered = useMemo(() => {
+  const selectedWorkspace = searchParams.get('ws') || 'all';
-    let result =
+  const sortOrder = searchParams.get('sort') as SortOrder || 'desc';
-      selectedWorkspace === 'all'
+  const page = Number(searchParams.get('page')) || 1;
-        ? projects
-        : projects.filter((p) => p.workspaceId === selectedWorkspace);
 
-    // Sort by date
+  const createQueryString = useCallback(
-    result = [...result].sort((a, b) => {
+    (name: string, value: string) => {
-      const dateA = new Date(a.updatedAt).getTime();
+      const params = new URLSearchParams(searchParams.toString());
-      const dateB = new Date(b.updatedAt).getTime();
+      if (value === 'all' && name === 'ws') {
-      return sortOrder === 'desc' ? dateB - dateA : dateA - dateB;
+        params.delete(name);
-    });
+      } else {
+        params.set(name, value);
+      }
 
-    return result;
+      // Reset page when filter or sort changes
-  }, [projects, selectedWorkspace, sortOrder]);
+      if (name !== 'page') {
+        params.set('page', '1');
+      }
+
+      return params.toString();
+    },
+    [searchParams]
+  );
 
   return (
     <>
@@ -86,7 +96,12 @@ export function ProjectFilter({ projects, workspaces }: ProjectFilterProps) {
         <div className="flex flex-col sm:flex-row sm:items-center gap-4">
           <h1 className="text-3xl font-bold tracking-tight">Projects</h1>
           {workspaces.length > 0 && (
-            <Select value={selectedWorkspace} onValueChange={setSelectedWorkspace}>
+            <Select
+              value={selectedWorkspace}
+              onValueChange={(val) => {
+                router.push(`${pathname}?${createQueryString('ws', val)}`);
+              }}
+            >
               <SelectTrigger className="w-[200px]">
                 <SelectValue placeholder="All Workspaces" />
               </SelectTrigger>
@@ -105,7 +120,10 @@ export function ProjectFilter({ projects, workspaces }: ProjectFilterProps) {
           <Button
             variant="outline"
             size="sm"
-            onClick={() => setSortOrder(sortOrder === 'desc' ? 'asc' : 'desc')}
+            onClick={() => {
+              const newOrder = sortOrder === 'desc' ? 'asc' : 'desc';
+              router.push(`${pathname}?${createQueryString('sort', newOrder)}`);
+            }}
             className="flex items-center gap-2"
           >
             {sortOrder === 'desc' ? (
@@ -130,9 +148,9 @@ export function ProjectFilter({ projects, workspaces }: ProjectFilterProps) {
       </div>
 
       {/* Projects Grid */}
-      {filtered.length > 0 ? (
+      {projects.length > 0 ? (
         <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
-          {filtered.map((project) => (
+          {projects.map((project) => (
             <Link key={project.id} href={`/projects/${project.id}`}>
               <Card className="h-full transition-colors hover:bg-accent/50 cursor-pointer">
                 <CardHeader>
@@ -196,6 +214,41 @@ export function ProjectFilter({ projects, workspaces }: ProjectFilterProps) {
           </CardContent>
         </Card>
       )}
+
+      {/* Pagination */}
+      {totalPages > 1 && (
+        <div className="mt-8 flex items-center justify-end space-x-2">
+          <Button
+            variant="outline"
+            size="sm"
+            disabled={page <= 1}
+            onClick={() => {
+              if (page > 1) {
+                router.push(`${pathname}?${createQueryString('page', (page - 1).toString())}`);
+                router.refresh();
+              }
+            }}
+          >
+            Previous
+          </Button>
+          <span className="text-sm font-medium">
+            Page {page} of {totalPages}
+          </span>
+          <Button
+            variant="outline"
+            size="sm"
+            disabled={page >= totalPages}
+            onClick={() => {
+              if (page < totalPages) {
+                router.push(`${pathname}?${createQueryString('page', (page + 1).toString())}`);
+                router.refresh();
+              }
+            }}
+          >
+            Next
+          </Button>
+        </div>
+      )}
     </>
   );
 }

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

@@ -50,11 +50,17 @@ function formatRelativeTime(date: Date): string {
 
 interface ProjectPageProps {
   params: Promise<{ projectId: string }>;
+  searchParams: Promise<{ page?: string }>;
 }
 
-export default async function ProjectPage({ params }: ProjectPageProps) {
+export default async function ProjectPage({ params, searchParams }: ProjectPageProps) {
   const session = await auth();
   const { projectId } = await params;
+  const resolvedSearchParams = await searchParams;
+
+  const page = Number(resolvedSearchParams?.page) || 1;
+  const pageSize = 20;
+  const skip = (page - 1) * pageSize;
 
   // Fetch project with videos
   const project = await db.project.findUnique({
@@ -66,19 +72,6 @@ export default async function ProjectPage({ params }: ProjectPageProps) {
         where: { userId: session?.user?.id || '' },
         select: { role: true },
       },
-      videos: {
-        orderBy: { position: 'asc' },
-        include: {
-          versions: {
-            where: { isActive: true },
-            take: 1,
-            include: {
-              _count: { select: { comments: true } },
-            },
-          },
-          _count: { select: { versions: true } },
-        },
-      },
     },
   });
 
@@ -117,8 +110,33 @@ export default async function ProjectPage({ params }: ProjectPageProps) {
     redirect('/dashboard');
   }
 
+  // Fetch videos separately utilizing bounds
+  const [paginatedVideos, totalVideos] = await Promise.all([
+    db.video.findMany({
+      where: { projectId: project.id },
+      skip,
+      take: pageSize,
+      orderBy: { position: 'asc' },
+      include: {
+        versions: {
+          where: { isActive: true },
+          take: 1,
+          include: {
+            _count: { select: { comments: true } },
+          },
+        },
+        _count: { select: { versions: true } },
+      },
+    }),
+    db.video.count({
+      where: { projectId: project.id }
+    })
+  ]);
+
+  const totalPages = Math.ceil(totalVideos / pageSize);
+
   // Transform videos for VideoCard component
-  const videos = project.videos.map((video: typeof project.videos[0]) => {
+  const videos = paginatedVideos.map((video) => {
     const activeVersion = video.versions[0];
     return {
       id: video.id,
@@ -165,6 +183,8 @@ export default async function ProjectPage({ params }: ProjectPageProps) {
             canEdit={false}
             isOwner={false}
             workspaceRole={null}
+            totalPages={totalPages}
+            currentPage={page}
           />
         </div>
       </GuestGate>
@@ -190,6 +210,8 @@ export default async function ProjectPage({ params }: ProjectPageProps) {
         canEdit={canEdit}
         isOwner={isOwner}
         workspaceRole={workspaceRole}
+        totalPages={totalPages}
+        currentPage={page}
       />
     </div>
   );

app/(dashboard)/projects/[projectId]/project-content-client.tsx

@@ -1,6 +1,7 @@
 'use client';
 
-import { useState, useMemo } from 'react';
+import { useCallback } from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
 import Link from 'next/link';
 import {
   Plus,
@@ -46,6 +47,8 @@ interface ProjectContentClientProps {
   canEdit: boolean;
   isOwner: boolean;
   workspaceRole: string | null;
+  totalPages: number;
+  currentPage: number;
 }
 
 export function ProjectContentClient({
@@ -55,16 +58,32 @@ export function ProjectContentClient({
   canEdit,
   isOwner,
   workspaceRole,
+  totalPages,
+  currentPage
 }: ProjectContentClientProps) {
-  const [sortOrder, setSortOrder] = useState<SortOrder>('desc');
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const sortOrder = searchParams.get('sort') || 'desc';
 
-  const sortedVideos = useMemo(() => {
+  const createQueryString = useCallback(
-    return [...videos].sort((a, b) => {
+    (name: string, value: string) => {
-      const dateA = new Date(a.updatedAt).getTime();
+      const params = new URLSearchParams(searchParams.toString());
-      const dateB = new Date(b.updatedAt).getTime();
+      params.set(name, value);
-      return sortOrder === 'desc' ? dateB - dateA : dateA - dateB;
+
-    });
+      if (name !== 'page') {
-  }, [videos, sortOrder]);
+        params.set('page', '1');
+      }
+
+      return params.toString();
+    },
+    [searchParams]
+  );
+
+  const sortedVideos = [...videos].sort((a, b) => {
+    const dateA = new Date(a.updatedAt).getTime();
+    const dateB = new Date(b.updatedAt).getTime();
+    return sortOrder === 'desc' ? dateB - dateA : dateA - dateB;
+  });
 
   return (
     <>
@@ -100,7 +119,10 @@ export function ProjectContentClient({
           <Button
             variant="outline"
             size="sm"
-            onClick={() => setSortOrder(sortOrder === 'desc' ? 'asc' : 'desc')}
+            onClick={() => {
+              const newOrder = sortOrder === 'desc' ? 'asc' : 'desc';
+              router.push(`?${createQueryString('sort', newOrder)}`);
+            }}
             className="flex items-center gap-2"
           >
             {sortOrder === 'desc' ? (
@@ -174,6 +196,39 @@ export function ProjectContentClient({
           </CardContent>
         </Card>
       )}
+
+      {/* Pagination */}
+      {totalPages > 1 && (
+        <div className="mt-8 flex items-center justify-end space-x-2">
+          <Button
+            variant="outline"
+            size="sm"
+            disabled={currentPage <= 1}
+            asChild={currentPage > 1}
+          >
+            {currentPage > 1 ? (
+              <Link href={`?${createQueryString('page', (currentPage - 1).toString())}`}>Previous</Link>
+            ) : (
+              "Previous"
+            )}
+          </Button>
+          <span className="text-sm font-medium">
+            Page {currentPage} of {totalPages}
+          </span>
+          <Button
+            variant="outline"
+            size="sm"
+            disabled={currentPage >= totalPages}
+            asChild={currentPage < totalPages}
+          >
+            {currentPage < totalPages ? (
+              <Link href={`?${createQueryString('page', (currentPage + 1).toString())}`}>Next</Link>
+            ) : (
+              "Next"
+            )}
+          </Button>
+        </div>
+      )}
     </>
   );
 }

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 {
+export default async function WorkspacesPage({
-  const now = new Date();
+  searchParams,
-  const diffMs = now.getTime() - date.getTime();
+}: {
-  const diffMins = Math.floor(diffMs / 60000);
+  searchParams: Promise<{ page?: string }>
-  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() {
   const session = await auth();
   if (!session?.user?.id) {
     redirect('/login');
   }
 
-  const workspaces = await db.workspace.findMany({
+  const resolvedSearchParams = await searchParams;
-    where: {
+  const page = Number(resolvedSearchParams?.page) || 1;
-      OR: [
+  const pageSize = 20;
-        { ownerId: session.user.id },
+  const skip = (page - 1) * pageSize;
-        { members: { some: { userId: session.user.id } } },
+
-      ],
+  const [workspaces, totalWorkspaces] = await Promise.all([
-    },
+    db.workspace.findMany({
-    include: {
+      skip,
-      owner: { select: { id: true, name: true } },
+      take: pageSize,
-      _count: {
+      where: {
-        select: {
+        OR: [
-          projects: true,
+          { ownerId: session.user.id },
-          members: true,
+          { 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">
+    <WorkspacesClient workspaces={serializedWorkspaces} totalPages={totalPages} currentPage={page} />
-      {/* 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>
   );
 }

app/(dashboard)/workspaces/workspaces-client.tsx

@@ -0,0 +1,150 @@
+'use client';
+
+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 { useRouter } from 'next/navigation';
+
+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();
+}
+
+interface SerializedWorkspace {
+  id: string;
+  name: string;
+  description: string | null;
+  updatedAt: string;
+  _count: {
+    projects: number;
+    members: number;
+  };
+}
+
+interface WorkspacesClientProps {
+  workspaces: SerializedWorkspace[];
+  totalPages: number;
+  currentPage: number;
+}
+
+export function WorkspacesClient({ workspaces, totalPages, currentPage }: WorkspacesClientProps) {
+  const router = useRouter();
+
+  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) => (
+            <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(new Date(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>
+      )}
+
+      {/* Pagination */}
+      {totalPages > 1 && (
+        <div className="mt-8 flex items-center justify-end space-x-2">
+          <Button
+            variant="outline"
+            size="sm"
+            disabled={currentPage <= 1}
+            onClick={() => {
+              if (currentPage > 1) {
+                router.push(`/workspaces?page=${currentPage - 1}`);
+                router.refresh();
+              }
+            }}
+          >
+            Previous
+          </Button>
+          <span className="text-sm font-medium">
+            Page {currentPage} of {totalPages}
+          </span>
+          <Button
+            variant="outline"
+            size="sm"
+            disabled={currentPage >= totalPages}
+            onClick={() => {
+              if (currentPage < totalPages) {
+                router.push(`/workspaces?page=${currentPage + 1}`);
+                router.refresh();
+              }
+            }}
+          >
+            Next
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}