feat(memberships): add membership management UI

- Add PlanCard component to display plan details with benefits
- Add PlanForm for creating/editing membership plans
- Add MembershipTable with status badges and actions
- Add AssignMembershipDialog for assigning memberships to clients
- Add memberships admin page with plans and memberships sections
- Include stats cards for active memberships and expiring soon
- Support renewal and cancellation workflows

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

apps/web/components/memberships/membership-table.tsx

@@ -0,0 +1,278 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { formatCurrency, formatDate, cn } from "@/lib/utils";
+
+interface Membership {
+  id: string;
+  startDate: string;
+  endDate: string;
+  status: "ACTIVE" | "EXPIRED" | "CANCELLED" | "SUSPENDED";
+  remainingHours: number | null;
+  autoRenew: boolean;
+  isExpiring?: boolean;
+  daysUntilExpiry?: number | null;
+  plan: {
+    id: string;
+    name: string;
+    price: number | string;
+    durationMonths: number;
+    courtHours: number | null;
+  };
+  client: {
+    id: string;
+    firstName: string;
+    lastName: string;
+    email: string | null;
+    phone: string | null;
+  };
+  benefitsSummary?: {
+    freeHours: number;
+    hoursRemaining: number;
+  };
+}
+
+interface MembershipTableProps {
+  memberships: Membership[];
+  onRenew?: (membership: Membership) => void;
+  onCancel?: (membership: Membership) => void;
+  onViewDetails?: (membership: Membership) => void;
+  isLoading?: boolean;
+}
+
+const statusConfig: Record<string, { label: string; className: string }> = {
+  ACTIVE: {
+    label: "Activa",
+    className: "bg-green-100 text-green-700 border-green-300",
+  },
+  EXPIRED: {
+    label: "Expirada",
+    className: "bg-red-100 text-red-700 border-red-300",
+  },
+  CANCELLED: {
+    label: "Cancelada",
+    className: "bg-gray-100 text-gray-700 border-gray-300",
+  },
+  SUSPENDED: {
+    label: "Suspendida",
+    className: "bg-yellow-100 text-yellow-700 border-yellow-300",
+  },
+};
+
+export function MembershipTable({
+  memberships,
+  onRenew,
+  onCancel,
+  onViewDetails,
+  isLoading = false,
+}: MembershipTableProps) {
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center py-12">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto mb-2"></div>
+          <p className="text-primary-500">Cargando membresias...</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (memberships.length === 0) {
+    return (
+      <div className="flex items-center justify-center py-12">
+        <div className="text-center text-primary-500">
+          <svg
+            className="w-12 h-12 mx-auto mb-3 text-primary-300"
+            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>
+          <p className="font-medium">No hay membresias</p>
+          <p className="text-sm mt-1">Asigna una membresia a un cliente para comenzar</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <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">
+              Cliente
+            </th>
+            <th className="px-4 py-3 text-left text-xs font-semibold text-primary-600 uppercase tracking-wider">
+              Plan
+            </th>
+            <th className="px-4 py-3 text-left text-xs font-semibold text-primary-600 uppercase tracking-wider">
+              Inicio
+            </th>
+            <th className="px-4 py-3 text-left text-xs font-semibold text-primary-600 uppercase tracking-wider">
+              Fin
+            </th>
+            <th className="px-4 py-3 text-left text-xs font-semibold text-primary-600 uppercase tracking-wider">
+              Horas Usadas
+            </th>
+            <th className="px-4 py-3 text-left text-xs font-semibold text-primary-600 uppercase tracking-wider">
+              Estado
+            </th>
+            <th className="px-4 py-3 text-right text-xs font-semibold text-primary-600 uppercase tracking-wider">
+              Acciones
+            </th>
+          </tr>
+        </thead>
+        <tbody className="divide-y divide-primary-100">
+          {memberships.map((membership) => {
+            const status = statusConfig[membership.status] || statusConfig.ACTIVE;
+            const hoursTotal = membership.plan.courtHours || membership.benefitsSummary?.freeHours || 0;
+            const hoursRemaining = membership.remainingHours ?? membership.benefitsSummary?.hoursRemaining ?? 0;
+            const hoursUsed = hoursTotal - hoursRemaining;
+
+            return (
+              <tr
+                key={membership.id}
+                className={cn(
+                  "hover:bg-primary-50 transition-colors",
+                  membership.isExpiring && membership.status === "ACTIVE" && "bg-yellow-50"
+                )}
+              >
+                {/* Client */}
+                <td className="px-4 py-4">
+                  <div>
+                    <p className="font-medium text-primary-800">
+                      {membership.client.firstName} {membership.client.lastName}
+                    </p>
+                    <p className="text-xs text-primary-500">
+                      {membership.client.email || membership.client.phone || "Sin contacto"}
+                    </p>
+                  </div>
+                </td>
+
+                {/* Plan */}
+                <td className="px-4 py-4">
+                  <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-primary-100 text-primary-700">
+                    {membership.plan.name}
+                  </span>
+                </td>
+
+                {/* Start Date */}
+                <td className="px-4 py-4 text-sm text-primary-600">
+                  {formatDate(membership.startDate)}
+                </td>
+
+                {/* End Date */}
+                <td className="px-4 py-4">
+                  <div>
+                    <p className="text-sm text-primary-600">
+                      {formatDate(membership.endDate)}
+                    </p>
+                    {membership.isExpiring && membership.status === "ACTIVE" && (
+                      <p className="text-xs text-yellow-600 font-medium flex items-center gap-1">
+                        <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
+                          <path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
+                        </svg>
+                        Expira en {membership.daysUntilExpiry} dias
+                      </p>
+                    )}
+                  </div>
+                </td>
+
+                {/* Hours Used */}
+                <td className="px-4 py-4">
+                  {hoursTotal > 0 ? (
+                    <div>
+                      <p className="text-sm text-primary-700">
+                        {hoursUsed} / {hoursTotal}h
+                      </p>
+                      <div className="mt-1 w-20 h-1.5 bg-primary-100 rounded-full overflow-hidden">
+                        <div
+                          className={cn(
+                            "h-full rounded-full",
+                            hoursUsed >= hoursTotal
+                              ? "bg-red-500"
+                              : hoursUsed >= hoursTotal * 0.75
+                              ? "bg-yellow-500"
+                              : "bg-accent-500"
+                          )}
+                          style={{ width: `${Math.min((hoursUsed / hoursTotal) * 100, 100)}%` }}
+                        />
+                      </div>
+                    </div>
+                  ) : (
+                    <span className="text-sm text-primary-400">-</span>
+                  )}
+                </td>
+
+                {/* Status */}
+                <td className="px-4 py-4">
+                  <span
+                    className={cn(
+                      "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium border",
+                      status.className
+                    )}
+                  >
+                    {status.label}
+                  </span>
+                </td>
+
+                {/* Actions */}
+                <td className="px-4 py-4 text-right">
+                  <div className="flex items-center justify-end gap-2">
+                    {membership.status === "ACTIVE" && (
+                      <>
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          onClick={() => onRenew?.(membership)}
+                          className="text-accent-600 hover:text-accent-700 hover:bg-accent-50"
+                        >
+                          <svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+                          </svg>
+                          Renovar
+                        </Button>
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          onClick={() => onCancel?.(membership)}
+                          className="text-red-600 hover:text-red-700 hover:bg-red-50"
+                        >
+                          <svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                          </svg>
+                          Cancelar
+                        </Button>
+                      </>
+                    )}
+                    {(membership.status === "EXPIRED" || membership.status === "CANCELLED") && (
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => onRenew?.(membership)}
+                        className="text-accent-600 hover:text-accent-700 hover:bg-accent-50"
+                      >
+                        <svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+                        </svg>
+                        Reactivar
+                      </Button>
+                    )}
+                  </div>
+                </td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </div>
+  );
+}