feat: redesign clients page as CRM with membership tracking

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

apps/web/app/(admin)/clients/page.tsx

@@ -1,14 +1,33 @@
 "use client";
 
-import { useState, useEffect, useCallback } from "react";
+import { useState, useEffect, useCallback, useMemo } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { Card, CardContent } from "@/components/ui/card";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { ClientTable } from "@/components/clients/client-table";
 import { ClientForm } from "@/components/clients/client-form";
 import { ClientDetailDialog } from "@/components/clients/client-detail-dialog";
 import { AssignMembershipDialog } from "@/components/memberships/assign-membership-dialog";
-import { StatCard, StatCardSkeleton } from "@/components/dashboard/stat-card";
+import { StatCardSkeleton } from "@/components/dashboard/stat-card";
+import { cn, formatDate } from "@/lib/utils";
+import {
+  Users,
+  CreditCard,
+  AlertTriangle,
+  UserX,
+  Search,
+  Eye,
+  Phone,
+  Mail,
+  Calendar,
+  Plus,
+  ChevronLeft,
+  ChevronRight,
+  X,
+} from "lucide-react";
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
 
 interface Client {
   id: string;
@@ -44,6 +63,7 @@ interface Client {
     totalSpent: number;
     balance: number;
   };
+  lastBookingDate?: string | null;
 }
 
 interface ClientsResponse {
@@ -65,23 +85,107 @@ interface MembershipPlan {
   discountPercent: number | string | null;
 }
 
-const membershipFilters = [
+// ---------------------------------------------------------------------------
-  { value: "", label: "All" },
+// Helpers
-  { value: "with", label: "With membership" },
+// ---------------------------------------------------------------------------
-  { value: "without", label: "Without membership" },
+
-];
+type MembershipStatus = "active" | "expiring" | "expired" | "none";
+
+function getMembershipStatus(client: Client): MembershipStatus {
+  const membership = client.memberships?.[0];
+  if (!membership) return "none";
+
+  if (membership.status !== "ACTIVE") {
+    // Check if it truly expired vs just inactive
+    const end = new Date(membership.endDate);
+    if (end < new Date()) return "expired";
+    return "none";
+  }
+
+  const end = new Date(membership.endDate);
+  const now = new Date();
+  if (end < now) return "expired";
+
+  const daysUntilExpiry = Math.ceil(
+    (end.getTime() - now.getTime()) / (1000 * 60 * 60 * 24)
+  );
+  if (daysUntilExpiry <= 30) return "expiring";
+
+  return "active";
+}
+
+function getStatusBadge(status: MembershipStatus) {
+  switch (status) {
+    case "active":
+      return {
+        label: "Active",
+        className: "bg-green-100 text-green-700 border-green-300",
+      };
+    case "expiring":
+      return {
+        label: "Expiring Soon",
+        className: "bg-amber-100 text-amber-700 border-amber-300",
+      };
+    case "expired":
+      return {
+        label: "Expired",
+        className: "bg-red-100 text-red-700 border-red-300",
+      };
+    case "none":
+    default:
+      return {
+        label: "None",
+        className: "bg-gray-100 text-gray-600 border-gray-200",
+      };
+  }
+}
+
+function getInitials(firstName: string, lastName: string) {
+  return `${firstName.charAt(0)}${lastName.charAt(0)}`.toUpperCase();
+}
+
+function formatShortDate(dateStr: string): string {
+  const d = new Date(dateStr);
+  return d.toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+  });
+}
+
+// ---------------------------------------------------------------------------
+// Filter options
+// ---------------------------------------------------------------------------
+
+const FILTER_OPTIONS = [
+  { value: "all", label: "All" },
+  { value: "active", label: "Active Members" },
+  { value: "expiring", label: "Expiring Soon" },
+  { value: "expired", label: "Expired" },
+  { value: "none", label: "No Membership" },
+] as const;
+
+type FilterValue = (typeof FILTER_OPTIONS)[number]["value"];
 
 const ITEMS_PER_PAGE = 10;
 
+// ---------------------------------------------------------------------------
+// Page Component
+// ---------------------------------------------------------------------------
+
 export default function ClientsPage() {
-  // Clients state
+  // Data state
   const [clients, setClients] = useState<Client[]>([]);
   const [loadingClients, setLoadingClients] = useState(true);
   const [searchQuery, setSearchQuery] = useState("");
-  const [membershipFilter, setMembershipFilter] = useState("");
+  const [filterValue, setFilterValue] = useState<FilterValue>("all");
   const [currentPage, setCurrentPage] = useState(1);
   const [totalClients, setTotalClients] = useState(0);
 
+  // Stats state
+  const [allClientsForStats, setAllClientsForStats] = useState<Client[]>([]);
+  const [loadingStats, setLoadingStats] = useState(true);
+
   // Modal state
   const [showCreateForm, setShowCreateForm] = useState(false);
   const [editingClient, setEditingClient] = useState<Client | null>(null);
@@ -89,20 +193,36 @@ export default function ClientsPage() {
   const [showAssignMembership, setShowAssignMembership] = useState(false);
   const [formLoading, setFormLoading] = useState(false);
 
-  // Stats state
-  const [stats, setStats] = useState({
-    totalClients: 0,
-    withMembership: 0,
-    newThisMonth: 0,
-  });
-  const [loadingStats, setLoadingStats] = useState(true);
-
   // Membership plans for assignment dialog
   const [membershipPlans, setMembershipPlans] = useState<MembershipPlan[]>([]);
 
   const [error, setError] = useState<string | null>(null);
 
-  // Fetch clients
+  // ---------------------------------------------------------------------------
+  // Derived stats
+  // ---------------------------------------------------------------------------
+
+  const stats = useMemo(() => {
+    const total = allClientsForStats.length;
+
+    let activeMemberships = 0;
+    let expiringThisMonth = 0;
+    let noMembership = 0;
+
+    for (const c of allClientsForStats) {
+      const status = getMembershipStatus(c);
+      if (status === "active") activeMemberships++;
+      if (status === "expiring") expiringThisMonth++;
+      if (status === "none") noMembership++;
+    }
+
+    return { total, activeMemberships, expiringThisMonth, noMembership };
+  }, [allClientsForStats]);
+
+  // ---------------------------------------------------------------------------
+  // Fetchers
+  // ---------------------------------------------------------------------------
+
   const fetchClients = useCallback(async () => {
     setLoadingClients(true);
     try {
@@ -112,29 +232,19 @@ export default function ClientsPage() {
       params.append("offset", ((currentPage - 1) * ITEMS_PER_PAGE).toString());
 
       const response = await fetch(`/api/clients?${params.toString()}`);
-      if (!response.ok) throw new Error("Error loading players");
+      if (!response.ok) throw new Error("Error loading clients");
 
       const data: ClientsResponse = await response.json();
 
-      // Filter by membership status client-side for simplicity
+      // Apply membership filter client-side
-      let filteredData = data.data;
+      let filtered = data.data;
-      if (membershipFilter === "with") {
+      if (filterValue !== "all") {
-        filteredData = data.data.filter(
+        filtered = data.data.filter(
-          (c) =>
+          (c) => getMembershipStatus(c) === filterValue
-            c.memberships &&
-            c.memberships.length > 0 &&
-            c.memberships[0].status === "ACTIVE"
-        );
-      } else if (membershipFilter === "without") {
-        filteredData = data.data.filter(
-          (c) =>
-            !c.memberships ||
-            c.memberships.length === 0 ||
-            c.memberships[0].status !== "ACTIVE"
         );
       }
 
-      setClients(filteredData);
+      setClients(filtered);
       setTotalClients(data.pagination.total);
     } catch (err) {
       console.error("Error fetching clients:", err);
@@ -142,39 +252,15 @@ export default function ClientsPage() {
     } finally {
       setLoadingClients(false);
     }
-  }, [searchQuery, currentPage, membershipFilter]);
+  }, [searchQuery, currentPage, filterValue]);
 
-  // Fetch stats
   const fetchStats = useCallback(async () => {
     setLoadingStats(true);
     try {
-      // Fetch all clients to calculate stats
       const response = await fetch("/api/clients?limit=1000");
       if (!response.ok) throw new Error("Error loading statistics");
-
       const data: ClientsResponse = await response.json();
-      const allClients = data.data;
+      setAllClientsForStats(data.data);
-
-      // Calculate stats
-      const now = new Date();
-      const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1);
-
-      const withMembership = allClients.filter(
-        (c) =>
-          c.memberships &&
-          c.memberships.length > 0 &&
-          c.memberships[0].status === "ACTIVE"
-      ).length;
-
-      const newThisMonth = allClients.filter(
-        (c) => new Date(c.createdAt) >= startOfMonth
-      ).length;
-
-      setStats({
-        totalClients: data.pagination.total,
-        withMembership,
-        newThisMonth,
-      });
     } catch (err) {
       console.error("Error fetching stats:", err);
     } finally {
@@ -182,23 +268,25 @@ export default function ClientsPage() {
     }
   }, []);
 
-  // Fetch membership plans
   const fetchMembershipPlans = useCallback(async () => {
     try {
       const response = await fetch("/api/membership-plans");
       if (!response.ok) throw new Error("Error loading plans");
       const data = await response.json();
-      setMembershipPlans(data.filter((p: MembershipPlan & { isActive?: boolean }) => p.isActive !== false));
+      setMembershipPlans(
+        data.filter(
+          (p: MembershipPlan & { isActive?: boolean }) => p.isActive !== false
+        )
+      );
     } catch (err) {
       console.error("Error fetching membership plans:", err);
     }
   }, []);
 
-  // Fetch client details
   const fetchClientDetails = async (clientId: string) => {
     try {
       const response = await fetch(`/api/clients/${clientId}`);
-      if (!response.ok) throw new Error("Error loading player details");
+      if (!response.ok) throw new Error("Error loading client details");
       const data = await response.json();
       setSelectedClient(data);
     } catch (err) {
@@ -207,6 +295,10 @@ export default function ClientsPage() {
     }
   };
 
+  // ---------------------------------------------------------------------------
+  // Effects
+  // ---------------------------------------------------------------------------
+
   useEffect(() => {
     fetchClients();
     fetchStats();
@@ -224,9 +316,12 @@ export default function ClientsPage() {
 
   useEffect(() => {
     setCurrentPage(1);
-  }, [debouncedSearch, membershipFilter]);
+  }, [debouncedSearch, filterValue]);
+
+  // ---------------------------------------------------------------------------
+  // Handlers
+  // ---------------------------------------------------------------------------
 
-  // Handle create client
   const handleCreateClient = async (data: {
     firstName: string;
     lastName: string;
@@ -241,12 +336,10 @@ export default function ClientsPage() {
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify(data),
       });
-
       if (!response.ok) {
         const errorData = await response.json();
-        throw new Error(errorData.error || "Error creating player");
+        throw new Error(errorData.error || "Error creating client");
       }
-
       setShowCreateForm(false);
       await Promise.all([fetchClients(), fetchStats()]);
     } catch (err) {
@@ -256,7 +349,6 @@ export default function ClientsPage() {
     }
   };
 
-  // Handle update client
   const handleUpdateClient = async (data: {
     firstName: string;
     lastName: string;
@@ -265,7 +357,6 @@ export default function ClientsPage() {
     avatar?: string;
   }) => {
     if (!editingClient) return;
-
     setFormLoading(true);
     try {
       const response = await fetch(`/api/clients/${editingClient.id}`, {
@@ -273,16 +364,12 @@ export default function ClientsPage() {
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify(data),
       });
-
       if (!response.ok) {
         const errorData = await response.json();
-        throw new Error(errorData.error || "Error updating player");
+        throw new Error(errorData.error || "Error updating client");
       }
-
       setEditingClient(null);
       await fetchClients();
-
-      // Update selected client if viewing details
       if (selectedClient?.id === editingClient.id) {
         await fetchClientDetails(editingClient.id);
       }
@@ -293,7 +380,6 @@ export default function ClientsPage() {
     }
   };
 
-  // Handle delete client
   const handleDeleteClient = async (client: Client) => {
     if (
       !confirm(
@@ -302,17 +388,14 @@ export default function ClientsPage() {
     ) {
       return;
     }
-
     try {
       const response = await fetch(`/api/clients/${client.id}`, {
         method: "DELETE",
       });
-
       if (!response.ok) {
         const errorData = await response.json();
-        throw new Error(errorData.error || "Error deactivating player");
+        throw new Error(errorData.error || "Error deactivating client");
       }
-
       await Promise.all([fetchClients(), fetchStats()]);
     } catch (err) {
       console.error("Error deleting client:", err);
@@ -320,7 +403,6 @@ export default function ClientsPage() {
     }
   };
 
-  // Handle assign membership
   const handleAssignMembership = async (data: {
     clientId: string;
     planId: string;
@@ -334,16 +416,12 @@ export default function ClientsPage() {
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify(data),
       });
-
       if (!response.ok) {
         const errorData = await response.json();
         throw new Error(errorData.error || "Error assigning membership");
       }
-
       setShowAssignMembership(false);
       await Promise.all([fetchClients(), fetchStats()]);
-
-      // Update selected client if viewing details
       if (selectedClient) {
         await fetchClientDetails(selectedClient.id);
       }
@@ -354,39 +432,112 @@ export default function ClientsPage() {
     }
   };
 
-  // Handle row click to view details
   const handleRowClick = (client: Client) => {
     fetchClientDetails(client.id);
   };
 
-  // Calculate pagination
+  // Pagination
   const totalPages = Math.ceil(totalClients / ITEMS_PER_PAGE);
 
+  // ---------------------------------------------------------------------------
+  // Render: Stat Card (inline for CRM style)
+  // ---------------------------------------------------------------------------
+
+  function CRMStatCard({
+    title,
+    value,
+    icon,
+    iconBg,
+    iconColor,
+  }: {
+    title: string;
+    value: number;
+    icon: React.ReactNode;
+    iconBg: string;
+    iconColor: string;
+  }) {
+    return (
+      <Card className="hover:shadow-md transition-shadow">
+        <CardContent className="p-5">
+          <div className="flex items-center gap-4">
+            <div
+              className={cn(
+                "flex-shrink-0 w-12 h-12 rounded-lg flex items-center justify-center",
+                iconBg,
+                iconColor
+              )}
+            >
+              {icon}
+            </div>
+            <div>
+              <p className="text-sm font-medium text-primary-500">{title}</p>
+              <p className="text-2xl font-bold text-primary-800">{value}</p>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  // ---------------------------------------------------------------------------
+  // Render: Table skeleton
+  // ---------------------------------------------------------------------------
+
+  function TableSkeleton() {
+    return (
+      <>
+        {[...Array(5)].map((_, i) => (
+          <tr key={i} className="animate-pulse">
+            <td className="px-4 py-4">
+              <div className="flex items-center gap-3">
+                <div className="h-9 w-9 rounded-full bg-primary-100" />
+                <div className="h-4 w-28 bg-primary-100 rounded" />
+              </div>
+            </td>
+            <td className="px-4 py-4">
+              <div className="space-y-1.5">
+                <div className="h-3 w-28 bg-primary-100 rounded" />
+                <div className="h-3 w-36 bg-primary-100 rounded" />
+              </div>
+            </td>
+            <td className="px-4 py-4">
+              <div className="h-4 w-20 bg-primary-100 rounded" />
+            </td>
+            <td className="px-4 py-4">
+              <div className="h-6 w-24 bg-primary-100 rounded-full" />
+            </td>
+            <td className="px-4 py-4">
+              <div className="h-4 w-24 bg-primary-100 rounded" />
+            </td>
+            <td className="px-4 py-4">
+              <div className="h-4 w-16 bg-primary-100 rounded" />
+            </td>
+            <td className="px-4 py-4">
+              <div className="h-8 w-16 bg-primary-100 rounded" />
+            </td>
+          </tr>
+        ))}
+      </>
+    );
+  }
+
+  // ---------------------------------------------------------------------------
+  // Render
+  // ---------------------------------------------------------------------------
+
   return (
     <div className="space-y-6">
       {/* Header */}
       <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
         <div>
-          <h1 className="text-2xl font-bold text-primary-800">Players</h1>
+          <h1 className="text-2xl font-bold text-primary-800">Clients</h1>
           <p className="mt-1 text-primary-600">
-            Manage your club's players
+            Manage your club members and memberships
           </p>
         </div>
         <Button onClick={() => setShowCreateForm(true)}>
-          <svg
+          <Plus className="w-5 h-5 mr-2" />
-            className="w-5 h-5 mr-2"
+          New Client
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth={2}
-              d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"
-            />
-          </svg>
-          New Player
         </Button>
       </div>
 
@@ -394,103 +545,56 @@ export default function ClientsPage() {
       {error && (
         <div className="rounded-md bg-red-50 border border-red-200 p-4">
           <div className="flex items-center">
-            <svg
+            <AlertTriangle className="h-5 w-5 text-red-400" />
-              className="h-5 w-5 text-red-400"
-              viewBox="0 0 20 20"
-              fill="currentColor"
-            >
-              <path
-                fillRule="evenodd"
-                d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
-                clipRule="evenodd"
-              />
-            </svg>
             <p className="ml-3 text-sm text-red-700">{error}</p>
             <button
               onClick={() => setError(null)}
               className="ml-auto text-red-500 hover:text-red-700"
             >
-              <svg className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+              <X className="h-5 w-5" />
-                <path
-                  fillRule="evenodd"
-                  d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
-                  clipRule="evenodd"
-                />
-              </svg>
             </button>
           </div>
         </div>
       )}
 
-      {/* Stats Cards */}
+      {/* Stats Row */}
-      <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
         {loadingStats ? (
           <>
             <StatCardSkeleton />
             <StatCardSkeleton />
             <StatCardSkeleton />
+            <StatCardSkeleton />
           </>
         ) : (
           <>
-            <StatCard
+            <CRMStatCard
-              title="Total Players"
+              title="Total Clients"
-              value={stats.totalClients}
+              value={stats.total}
-              color="primary"
+              icon={<Users className="w-6 h-6" />}
-              icon={
+              iconBg="bg-primary-100"
-                <svg
+              iconColor="text-primary-600"
-                  className="w-6 h-6"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
             />
-                </svg>
+            <CRMStatCard
-              }
+              title="Active Memberships"
+              value={stats.activeMemberships}
+              icon={<CreditCard className="w-6 h-6" />}
+              iconBg="bg-green-100"
+              iconColor="text-green-600"
             />
-            <StatCard
+            <CRMStatCard
-              title="With Membership"
+              title="Expiring This Month"
-              value={stats.withMembership}
+              value={stats.expiringThisMonth}
-              color="accent"
+              icon={<AlertTriangle className="w-6 h-6" />}
-              icon={
+              iconBg="bg-amber-100"
-                <svg
+              iconColor="text-amber-600"
-                  className="w-6 h-6"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M15 5v2m0 4v2m0 4v2M5 5a2 2 0 00-2 2v3a2 2 0 110 4v3a2 2 0 002 2h14a2 2 0 002-2v-3a2 2 0 110-4V7a2 2 0 00-2-2H5z"
             />
-                </svg>
+            <CRMStatCard
-              }
+              title="No Membership"
-            />
+              value={stats.noMembership}
-            <StatCard
+              icon={<UserX className="w-6 h-6" />}
-              title="New This Month"
+              iconBg="bg-gray-100"
-              value={stats.newThisMonth}
+              iconColor="text-gray-500"
-              color="green"
-              icon={
-                <svg
-                  className="w-6 h-6"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"
-                  />
-                </svg>
-              }
             />
           </>
         )}
@@ -501,46 +605,237 @@ export default function ClientsPage() {
         <CardContent className="pt-4">
           <div className="flex flex-col sm:flex-row gap-4">
             {/* Search */}
-            <div className="flex-1">
+            <div className="relative flex-1">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-primary-400" />
               <Input
                 type="text"
                 placeholder="Search by name, email or phone..."
                 value={searchQuery}
                 onChange={(e) => setSearchQuery(e.target.value)}
-                className="w-full"
+                className="pl-9 w-full"
               />
             </div>
 
-            {/* Membership Filter */}
+            {/* Membership Filter Dropdown */}
-            <div className="flex gap-2 overflow-x-auto pb-2 sm:pb-0">
+            <select
-              {membershipFilters.map((filter) => (
+              value={filterValue}
-                <Button
+              onChange={(e) => setFilterValue(e.target.value as FilterValue)}
-                  key={filter.value}
+              className="flex h-10 rounded-md border border-primary-200 bg-white px-3 py-2 text-sm ring-offset-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 min-w-[180px]"
-                  variant={membershipFilter === filter.value ? "default" : "outline"}
-                  size="sm"
-                  onClick={() => setMembershipFilter(filter.value)}
-                  className="whitespace-nowrap"
             >
-                  {filter.label}
+              {FILTER_OPTIONS.map((opt) => (
-                </Button>
+                <option key={opt.value} value={opt.value}>
+                  {opt.label}
+                </option>
               ))}
-            </div>
+            </select>
           </div>
         </CardContent>
       </Card>
 
       {/* Clients Table */}
       <Card>
-        <ClientTable
+        <div className="overflow-x-auto">
-          clients={clients}
+          <table className="w-full">
-          onRowClick={handleRowClick}
+            <thead>
-          onEdit={(client) => setEditingClient(client)}
+              <tr className="border-b border-primary-200 bg-primary-50">
-          onDelete={handleDeleteClient}
+                <th className="px-4 py-3 text-left text-xs font-semibold text-primary-600 uppercase tracking-wider">
-          isLoading={loadingClients}
+                  Name
-          currentPage={currentPage}
+                </th>
-          totalPages={totalPages}
+                <th className="px-4 py-3 text-left text-xs font-semibold text-primary-600 uppercase tracking-wider">
-          onPageChange={setCurrentPage}
+                  Contact
+                </th>
+                <th className="px-4 py-3 text-left text-xs font-semibold text-primary-600 uppercase tracking-wider">
+                  Membership
+                </th>
+                <th className="px-4 py-3 text-left text-xs font-semibold text-primary-600 uppercase tracking-wider">
+                  Status
+                </th>
+                <th className="px-4 py-3 text-left text-xs font-semibold text-primary-600 uppercase tracking-wider">
+                  Expires
+                </th>
+                <th className="px-4 py-3 text-left text-xs font-semibold text-primary-600 uppercase tracking-wider">
+                  Last Visit
+                </th>
+                <th className="px-4 py-3 text-right text-xs font-semibold text-primary-600 uppercase tracking-wider">
+                  Actions
+                </th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-primary-100">
+              {loadingClients ? (
+                <TableSkeleton />
+              ) : clients.length === 0 ? (
+                <tr>
+                  <td colSpan={7}>
+                    <div className="flex flex-col items-center justify-center py-16 text-primary-500">
+                      <Users className="w-12 h-12 mb-3 text-primary-300" />
+                      <p className="font-medium">No clients found</p>
+                      <p className="text-sm mt-1">
+                        {searchQuery || filterValue !== "all"
+                          ? "Try adjusting your search or filters"
+                          : "Add your first client to get started"}
+                      </p>
+                    </div>
+                  </td>
+                </tr>
+              ) : (
+                clients.map((client) => {
+                  const membership = client.memberships?.[0];
+                  const mStatus = getMembershipStatus(client);
+                  const badge = getStatusBadge(mStatus);
+
+                  // Determine last visit from lastBookingDate or fallback
+                  const lastVisit = client.lastBookingDate || null;
+
+                  return (
+                    <tr
+                      key={client.id}
+                      className="hover:bg-primary-50 transition-colors cursor-pointer"
+                      onClick={() => handleRowClick(client)}
+                    >
+                      {/* Name */}
+                      <td className="px-4 py-3">
+                        <div className="flex items-center gap-3">
+                          {client.avatar ? (
+                            <img
+                              src={client.avatar}
+                              alt={`${client.firstName} ${client.lastName}`}
+                              className="h-9 w-9 rounded-full object-cover flex-shrink-0"
                             />
+                          ) : (
+                            <div className="h-9 w-9 rounded-full bg-primary-100 flex items-center justify-center flex-shrink-0">
+                              <span className="text-sm font-semibold text-primary-600">
+                                {getInitials(client.firstName, client.lastName)}
+                              </span>
+                            </div>
+                          )}
+                          <span className="font-medium text-primary-800 whitespace-nowrap">
+                            {client.firstName} {client.lastName}
+                          </span>
+                        </div>
+                      </td>
+
+                      {/* Contact */}
+                      <td className="px-4 py-3">
+                        <div className="space-y-0.5">
+                          {client.phone && (
+                            <div className="flex items-center gap-1.5 text-sm text-primary-600">
+                              <Phone className="w-3.5 h-3.5 text-primary-400" />
+                              {client.phone}
+                            </div>
+                          )}
+                          {client.email && (
+                            <div className="flex items-center gap-1.5 text-sm text-primary-500">
+                              <Mail className="w-3.5 h-3.5 text-primary-400" />
+                              <span className="truncate max-w-[180px]">
+                                {client.email}
+                              </span>
+                            </div>
+                          )}
+                          {!client.phone && !client.email && (
+                            <span className="text-sm text-primary-400">
+                              —
+                            </span>
+                          )}
+                        </div>
+                      </td>
+
+                      {/* Membership Plan */}
+                      <td className="px-4 py-3 text-sm text-primary-700">
+                        {membership && membership.status === "ACTIVE"
+                          ? membership.plan.name
+                          : membership && mStatus === "expired"
+                          ? membership.plan.name
+                          : "None"}
+                      </td>
+
+                      {/* Status Badge */}
+                      <td className="px-4 py-3">
+                        <span
+                          className={cn(
+                            "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium border",
+                            badge.className
+                          )}
+                        >
+                          {badge.label}
+                        </span>
+                      </td>
+
+                      {/* Expires */}
+                      <td className="px-4 py-3 text-sm text-primary-600">
+                        {membership &&
+                        (membership.status === "ACTIVE" ||
+                          mStatus === "expired") ? (
+                          <div className="flex items-center gap-1.5">
+                            <Calendar className="w-3.5 h-3.5 text-primary-400" />
+                            {formatShortDate(membership.endDate)}
+                          </div>
+                        ) : (
+                          <span className="text-primary-400">—</span>
+                        )}
+                      </td>
+
+                      {/* Last Visit */}
+                      <td className="px-4 py-3 text-sm text-primary-600">
+                        {lastVisit ? (
+                          formatShortDate(lastVisit)
+                        ) : (
+                          <span className="text-primary-400">Never</span>
+                        )}
+                      </td>
+
+                      {/* Actions */}
+                      <td className="px-4 py-3 text-right">
+                        <div
+                          className="flex items-center justify-end gap-2"
+                          onClick={(e) => e.stopPropagation()}
+                        >
+                          <Button
+                            variant="outline"
+                            size="sm"
+                            onClick={() => handleRowClick(client)}
+                          >
+                            <Eye className="w-4 h-4 mr-1" />
+                            View
+                          </Button>
+                        </div>
+                      </td>
+                    </tr>
+                  );
+                })
+              )}
+            </tbody>
+          </table>
+        </div>
+
+        {/* Pagination */}
+        {totalPages > 1 && (
+          <div className="flex items-center justify-between px-4 py-3 border-t border-primary-200 bg-primary-50">
+            <div className="text-sm text-primary-600">
+              Page {currentPage} of {totalPages}
+            </div>
+            <div className="flex gap-2">
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => setCurrentPage(currentPage - 1)}
+                disabled={currentPage <= 1}
+              >
+                <ChevronLeft className="w-4 h-4 mr-1" />
+                Previous
+              </Button>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => setCurrentPage(currentPage + 1)}
+                disabled={currentPage >= totalPages}
+              >
+                Next
+                <ChevronRight className="w-4 h-4 ml-1" />
+              </Button>
+            </div>
+          </div>
+        )}
       </Card>
 
       {/* Create Client Form Modal */}