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/plan-card.tsx

@@ -0,0 +1,173 @@
+"use client";
+
+import { Card, CardContent, CardHeader, CardTitle, CardFooter } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { formatCurrency, cn } from "@/lib/utils";
+
+interface MembershipPlan {
+  id: string;
+  name: string;
+  description: string | null;
+  price: number | string;
+  durationMonths: number;
+  courtHours: number | null;
+  discountPercent: number | string | null;
+  benefits: string[] | null;
+  isActive: boolean;
+  subscriberCount: number;
+  benefitsSummary?: {
+    freeHours: number;
+    bookingDiscount: number;
+    extraBenefits: string[];
+  };
+}
+
+interface PlanCardProps {
+  plan: MembershipPlan;
+  onEdit?: (plan: MembershipPlan) => void;
+  onDelete?: (plan: MembershipPlan) => void;
+  isAdmin?: boolean;
+}
+
+export function PlanCard({ plan, onEdit, onDelete, isAdmin = false }: PlanCardProps) {
+  const price = typeof plan.price === "string" ? parseFloat(plan.price) : plan.price;
+  const discountPercent = plan.benefitsSummary?.bookingDiscount ??
+    (plan.discountPercent ? Number(plan.discountPercent) : 0);
+  const freeHours = plan.benefitsSummary?.freeHours ?? plan.courtHours ?? 0;
+  const extraBenefits = plan.benefitsSummary?.extraBenefits ?? plan.benefits ?? [];
+
+  // Extract store discount from benefits array if present
+  const storeDiscountBenefit = extraBenefits.find(b => b.includes("store discount"));
+  const storeDiscount = storeDiscountBenefit
+    ? parseInt(storeDiscountBenefit.match(/(\d+)%/)?.[1] || "0", 10)
+    : 0;
+  const otherBenefits = extraBenefits.filter(b => !b.includes("store discount"));
+
+  return (
+    <Card className={cn(
+      "flex flex-col h-full transition-all hover:shadow-lg",
+      !plan.isActive && "opacity-60"
+    )}>
+      <CardHeader className="pb-2">
+        <div className="flex items-start justify-between gap-2">
+          <CardTitle className="text-lg">{plan.name}</CardTitle>
+          <span className={cn(
+            "px-2 py-1 text-xs font-medium rounded-full",
+            plan.subscriberCount > 0
+              ? "bg-accent-100 text-accent-700"
+              : "bg-primary-100 text-primary-600"
+          )}>
+            {plan.subscriberCount} {plan.subscriberCount === 1 ? "suscriptor" : "suscriptores"}
+          </span>
+        </div>
+        {plan.description && (
+          <p className="text-sm text-primary-500 mt-1">{plan.description}</p>
+        )}
+      </CardHeader>
+
+      <CardContent className="flex-1 space-y-4">
+        {/* Price */}
+        <div className="text-center py-3 border-y border-primary-100">
+          <div className="text-3xl font-bold text-primary-800">
+            {formatCurrency(price)}
+          </div>
+          <div className="text-sm text-primary-500">
+            /{plan.durationMonths} {plan.durationMonths === 1 ? "mes" : "meses"}
+          </div>
+        </div>
+
+        {/* Key Benefits */}
+        <div className="space-y-3">
+          {/* Free Hours */}
+          {freeHours > 0 && (
+            <div className="flex items-center gap-3">
+              <div className="flex-shrink-0 w-8 h-8 rounded-full bg-accent-100 flex items-center justify-center">
+                <svg className="w-4 h-4 text-accent-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+              </div>
+              <div>
+                <p className="font-medium text-primary-800">{freeHours} horas gratis</p>
+                <p className="text-xs text-primary-500">de cancha al mes</p>
+              </div>
+            </div>
+          )}
+
+          {/* Booking Discount */}
+          {discountPercent > 0 && (
+            <div className="flex items-center gap-3">
+              <div className="flex-shrink-0 w-8 h-8 rounded-full bg-green-100 flex items-center justify-center">
+                <svg className="w-4 h-4 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
+                </svg>
+              </div>
+              <div>
+                <p className="font-medium text-primary-800">{discountPercent}% descuento</p>
+                <p className="text-xs text-primary-500">en reservas adicionales</p>
+              </div>
+            </div>
+          )}
+
+          {/* Store Discount */}
+          {storeDiscount > 0 && (
+            <div className="flex items-center gap-3">
+              <div className="flex-shrink-0 w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center">
+                <svg className="w-4 h-4 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
+                </svg>
+              </div>
+              <div>
+                <p className="font-medium text-primary-800">{storeDiscount}% descuento</p>
+                <p className="text-xs text-primary-500">en tienda</p>
+              </div>
+            </div>
+          )}
+
+          {/* Other Benefits */}
+          {otherBenefits.length > 0 && (
+            <div className="pt-2 border-t border-primary-100">
+              <p className="text-xs font-medium text-primary-600 mb-2">Beneficios adicionales:</p>
+              <ul className="space-y-1">
+                {otherBenefits.map((benefit, index) => (
+                  <li key={index} className="flex items-start gap-2 text-sm text-primary-700">
+                    <svg className="w-4 h-4 text-accent-500 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                    </svg>
+                    <span>{benefit}</span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          )}
+        </div>
+      </CardContent>
+
+      {isAdmin && (
+        <CardFooter className="border-t border-primary-100 pt-4 gap-2">
+          <Button
+            variant="outline"
+            size="sm"
+            className="flex-1"
+            onClick={() => onEdit?.(plan)}
+          >
+            <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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+            </svg>
+            Editar
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            className="flex-1 text-red-600 hover:text-red-700 hover:bg-red-50"
+            onClick={() => onDelete?.(plan)}
+          >
+            <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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+            </svg>
+            Eliminar
+          </Button>
+        </CardFooter>
+      )}
+    </Card>
+  );
+}