901 lines
30 KiB
TypeScript
901 lines
30 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect, useCallback, useMemo } from "react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { ClientForm } from "@/components/clients/client-form";
|
|
import { ClientDetailDialog } from "@/components/clients/client-detail-dialog";
|
|
import { AssignMembershipDialog } from "@/components/memberships/assign-membership-dialog";
|
|
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;
|
|
firstName: string;
|
|
lastName: string;
|
|
email: string | null;
|
|
phone: string | null;
|
|
avatar?: string | null;
|
|
level: string | null;
|
|
notes: string | null;
|
|
isActive: boolean;
|
|
createdAt: string;
|
|
memberships?: Array<{
|
|
id: string;
|
|
status: string;
|
|
startDate: string;
|
|
endDate: string;
|
|
remainingHours: number | null;
|
|
plan: {
|
|
id: string;
|
|
name: string;
|
|
price: number | string;
|
|
durationMonths: number;
|
|
courtHours: number | null;
|
|
discountPercent: number | string | null;
|
|
};
|
|
}>;
|
|
_count?: {
|
|
bookings: number;
|
|
};
|
|
stats?: {
|
|
totalBookings: number;
|
|
totalSpent: number;
|
|
balance: number;
|
|
};
|
|
lastBookingDate?: string | null;
|
|
}
|
|
|
|
interface ClientsResponse {
|
|
data: Client[];
|
|
pagination: {
|
|
total: number;
|
|
limit: number;
|
|
offset: number;
|
|
hasMore: boolean;
|
|
};
|
|
}
|
|
|
|
interface MembershipPlan {
|
|
id: string;
|
|
name: string;
|
|
price: number | string;
|
|
durationMonths: number;
|
|
courtHours: number | null;
|
|
discountPercent: number | string | null;
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Helpers
|
|
// ---------------------------------------------------------------------------
|
|
|
|
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() {
|
|
// Data state
|
|
const [clients, setClients] = useState<Client[]>([]);
|
|
const [loadingClients, setLoadingClients] = useState(true);
|
|
const [searchQuery, setSearchQuery] = 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);
|
|
const [selectedClient, setSelectedClient] = useState<Client | null>(null);
|
|
const [showAssignMembership, setShowAssignMembership] = useState(false);
|
|
const [formLoading, setFormLoading] = useState(false);
|
|
|
|
// Membership plans for assignment dialog
|
|
const [membershipPlans, setMembershipPlans] = useState<MembershipPlan[]>([]);
|
|
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// 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 {
|
|
const params = new URLSearchParams();
|
|
if (searchQuery) params.append("search", searchQuery);
|
|
params.append("limit", ITEMS_PER_PAGE.toString());
|
|
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 clients");
|
|
|
|
const data: ClientsResponse = await response.json();
|
|
|
|
// Apply membership filter client-side
|
|
let filtered = data.data;
|
|
if (filterValue !== "all") {
|
|
filtered = data.data.filter(
|
|
(c) => getMembershipStatus(c) === filterValue
|
|
);
|
|
}
|
|
|
|
setClients(filtered);
|
|
setTotalClients(data.pagination.total);
|
|
} catch (err) {
|
|
console.error("Error fetching clients:", err);
|
|
setError(err instanceof Error ? err.message : "Unknown error");
|
|
} finally {
|
|
setLoadingClients(false);
|
|
}
|
|
}, [searchQuery, currentPage, filterValue]);
|
|
|
|
const fetchStats = useCallback(async () => {
|
|
setLoadingStats(true);
|
|
try {
|
|
const response = await fetch("/api/clients?limit=1000");
|
|
if (!response.ok) throw new Error("Error loading statistics");
|
|
const data: ClientsResponse = await response.json();
|
|
setAllClientsForStats(data.data);
|
|
} catch (err) {
|
|
console.error("Error fetching stats:", err);
|
|
} finally {
|
|
setLoadingStats(false);
|
|
}
|
|
}, []);
|
|
|
|
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
|
|
)
|
|
);
|
|
} catch (err) {
|
|
console.error("Error fetching membership plans:", err);
|
|
}
|
|
}, []);
|
|
|
|
const fetchClientDetails = async (clientId: string) => {
|
|
try {
|
|
const response = await fetch(`/api/clients/${clientId}`);
|
|
if (!response.ok) throw new Error("Error loading client details");
|
|
const data = await response.json();
|
|
setSelectedClient(data);
|
|
} catch (err) {
|
|
console.error("Error fetching client details:", err);
|
|
setError(err instanceof Error ? err.message : "Unknown error");
|
|
}
|
|
};
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Effects
|
|
// ---------------------------------------------------------------------------
|
|
|
|
useEffect(() => {
|
|
fetchClients();
|
|
fetchStats();
|
|
fetchMembershipPlans();
|
|
}, [fetchClients, fetchStats, fetchMembershipPlans]);
|
|
|
|
// Debounce search
|
|
const [debouncedSearch, setDebouncedSearch] = useState(searchQuery);
|
|
useEffect(() => {
|
|
const timer = setTimeout(() => {
|
|
setDebouncedSearch(searchQuery);
|
|
}, 300);
|
|
return () => clearTimeout(timer);
|
|
}, [searchQuery]);
|
|
|
|
useEffect(() => {
|
|
setCurrentPage(1);
|
|
}, [debouncedSearch, filterValue]);
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Handlers
|
|
// ---------------------------------------------------------------------------
|
|
|
|
const handleCreateClient = async (data: {
|
|
firstName: string;
|
|
lastName: string;
|
|
email: string;
|
|
phone: string;
|
|
avatar?: string;
|
|
}) => {
|
|
setFormLoading(true);
|
|
try {
|
|
const response = await fetch("/api/clients", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify(data),
|
|
});
|
|
if (!response.ok) {
|
|
const errorData = await response.json();
|
|
throw new Error(errorData.error || "Error creating client");
|
|
}
|
|
setShowCreateForm(false);
|
|
await Promise.all([fetchClients(), fetchStats()]);
|
|
} catch (err) {
|
|
throw err;
|
|
} finally {
|
|
setFormLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleUpdateClient = async (data: {
|
|
firstName: string;
|
|
lastName: string;
|
|
email: string;
|
|
phone: string;
|
|
avatar?: string;
|
|
}) => {
|
|
if (!editingClient) return;
|
|
setFormLoading(true);
|
|
try {
|
|
const response = await fetch(`/api/clients/${editingClient.id}`, {
|
|
method: "PUT",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify(data),
|
|
});
|
|
if (!response.ok) {
|
|
const errorData = await response.json();
|
|
throw new Error(errorData.error || "Error updating client");
|
|
}
|
|
setEditingClient(null);
|
|
await fetchClients();
|
|
if (selectedClient?.id === editingClient.id) {
|
|
await fetchClientDetails(editingClient.id);
|
|
}
|
|
} catch (err) {
|
|
throw err;
|
|
} finally {
|
|
setFormLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleDeleteClient = async (client: Client) => {
|
|
if (
|
|
!confirm(
|
|
`Are you sure you want to deactivate ${client.firstName} ${client.lastName}?`
|
|
)
|
|
) {
|
|
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 client");
|
|
}
|
|
await Promise.all([fetchClients(), fetchStats()]);
|
|
} catch (err) {
|
|
console.error("Error deleting client:", err);
|
|
setError(err instanceof Error ? err.message : "Unknown error");
|
|
}
|
|
};
|
|
|
|
const handleAssignMembership = async (data: {
|
|
clientId: string;
|
|
planId: string;
|
|
startDate: string;
|
|
endDate: string;
|
|
}) => {
|
|
setFormLoading(true);
|
|
try {
|
|
const response = await fetch("/api/memberships", {
|
|
method: "POST",
|
|
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()]);
|
|
if (selectedClient) {
|
|
await fetchClientDetails(selectedClient.id);
|
|
}
|
|
} catch (err) {
|
|
throw err;
|
|
} finally {
|
|
setFormLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleRowClick = (client: Client) => {
|
|
fetchClientDetails(client.id);
|
|
};
|
|
|
|
// 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">Clients</h1>
|
|
<p className="mt-1 text-primary-600">
|
|
Manage your club members and memberships
|
|
</p>
|
|
</div>
|
|
<Button onClick={() => setShowCreateForm(true)}>
|
|
<Plus className="w-5 h-5 mr-2" />
|
|
New Client
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Error Message */}
|
|
{error && (
|
|
<div className="rounded-md bg-red-50 border border-red-200 p-4">
|
|
<div className="flex items-center">
|
|
<AlertTriangle className="h-5 w-5 text-red-400" />
|
|
<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"
|
|
>
|
|
<X className="h-5 w-5" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Stats Row */}
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
{loadingStats ? (
|
|
<>
|
|
<StatCardSkeleton />
|
|
<StatCardSkeleton />
|
|
<StatCardSkeleton />
|
|
<StatCardSkeleton />
|
|
</>
|
|
) : (
|
|
<>
|
|
<CRMStatCard
|
|
title="Total Clients"
|
|
value={stats.total}
|
|
icon={<Users className="w-6 h-6" />}
|
|
iconBg="bg-primary-100"
|
|
iconColor="text-primary-600"
|
|
/>
|
|
<CRMStatCard
|
|
title="Active Memberships"
|
|
value={stats.activeMemberships}
|
|
icon={<CreditCard className="w-6 h-6" />}
|
|
iconBg="bg-green-100"
|
|
iconColor="text-green-600"
|
|
/>
|
|
<CRMStatCard
|
|
title="Expiring This Month"
|
|
value={stats.expiringThisMonth}
|
|
icon={<AlertTriangle className="w-6 h-6" />}
|
|
iconBg="bg-amber-100"
|
|
iconColor="text-amber-600"
|
|
/>
|
|
<CRMStatCard
|
|
title="No Membership"
|
|
value={stats.noMembership}
|
|
icon={<UserX className="w-6 h-6" />}
|
|
iconBg="bg-gray-100"
|
|
iconColor="text-gray-500"
|
|
/>
|
|
</>
|
|
)}
|
|
</div>
|
|
|
|
{/* Filters */}
|
|
<Card>
|
|
<CardContent className="pt-4">
|
|
<div className="flex flex-col sm:flex-row gap-4">
|
|
{/* Search */}
|
|
<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="pl-9 w-full"
|
|
/>
|
|
</div>
|
|
|
|
{/* Membership Filter Dropdown */}
|
|
<select
|
|
value={filterValue}
|
|
onChange={(e) => setFilterValue(e.target.value as FilterValue)}
|
|
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]"
|
|
>
|
|
{FILTER_OPTIONS.map((opt) => (
|
|
<option key={opt.value} value={opt.value}>
|
|
{opt.label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Clients Table */}
|
|
<Card>
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full">
|
|
<thead>
|
|
<tr className="border-b border-primary-200 bg-primary-50">
|
|
<th className="px-4 py-3 text-left text-xs font-semibold text-primary-600 uppercase tracking-wider">
|
|
Name
|
|
</th>
|
|
<th className="px-4 py-3 text-left text-xs font-semibold text-primary-600 uppercase tracking-wider">
|
|
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 */}
|
|
{showCreateForm && (
|
|
<ClientForm
|
|
onSubmit={handleCreateClient}
|
|
onCancel={() => setShowCreateForm(false)}
|
|
isLoading={formLoading}
|
|
mode="create"
|
|
/>
|
|
)}
|
|
|
|
{/* Edit Client Form Modal */}
|
|
{editingClient && (
|
|
<ClientForm
|
|
initialData={{
|
|
firstName: editingClient.firstName,
|
|
lastName: editingClient.lastName,
|
|
email: editingClient.email || "",
|
|
phone: editingClient.phone || "",
|
|
avatar: editingClient.avatar || "",
|
|
}}
|
|
onSubmit={handleUpdateClient}
|
|
onCancel={() => setEditingClient(null)}
|
|
isLoading={formLoading}
|
|
mode="edit"
|
|
/>
|
|
)}
|
|
|
|
{/* Client Detail Dialog */}
|
|
{selectedClient && !editingClient && (
|
|
<ClientDetailDialog
|
|
client={selectedClient}
|
|
onClose={() => setSelectedClient(null)}
|
|
onEdit={() => {
|
|
setEditingClient(selectedClient);
|
|
}}
|
|
onAssignMembership={() => {
|
|
setShowAssignMembership(true);
|
|
}}
|
|
/>
|
|
)}
|
|
|
|
{/* Assign Membership Dialog */}
|
|
{showAssignMembership && selectedClient && (
|
|
<AssignMembershipDialog
|
|
plans={membershipPlans}
|
|
preselectedClient={{
|
|
id: selectedClient.id,
|
|
firstName: selectedClient.firstName,
|
|
lastName: selectedClient.lastName,
|
|
email: selectedClient.email,
|
|
phone: selectedClient.phone,
|
|
}}
|
|
onClose={() => setShowAssignMembership(false)}
|
|
onAssign={handleAssignMembership}
|
|
isLoading={formLoading}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|