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/assign-membership-dialog.tsx

@@ -0,0 +1,386 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Card, CardContent, CardHeader, CardTitle, CardFooter } from "@/components/ui/card";
+import { cn, formatCurrency, formatDate } from "@/lib/utils";
+
+interface Client {
+  id: string;
+  firstName: string;
+  lastName: string;
+  email: string | null;
+  phone: 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;
+}
+
+interface AssignMembershipDialogProps {
+  plans: MembershipPlan[];
+  onClose: () => void;
+  onAssign: (data: {
+    clientId: string;
+    planId: string;
+    startDate: string;
+    endDate: string;
+  }) => Promise<void>;
+  isLoading?: boolean;
+  preselectedClient?: Client;
+}
+
+const durationOptions = [
+  { value: 1, label: "1 mes" },
+  { value: 3, label: "3 meses" },
+  { value: 6, label: "6 meses" },
+  { value: 12, label: "12 meses" },
+];
+
+export function AssignMembershipDialog({
+  plans,
+  onClose,
+  onAssign,
+  isLoading = false,
+  preselectedClient,
+}: AssignMembershipDialogProps) {
+  const [searchQuery, setSearchQuery] = useState("");
+  const [clients, setClients] = useState<Client[]>([]);
+  const [selectedClient, setSelectedClient] = useState<Client | null>(preselectedClient || null);
+  const [loadingClients, setLoadingClients] = useState(false);
+  const [selectedPlanId, setSelectedPlanId] = useState<string>(plans[0]?.id || "");
+  const [startDate, setStartDate] = useState<string>(() => {
+    const today = new Date();
+    return today.toISOString().split("T")[0];
+  });
+  const [duration, setDuration] = useState<number>(1);
+  const [endDate, setEndDate] = useState<string>("");
+  const [error, setError] = useState<string | null>(null);
+
+  // Calculate end date based on start date and duration
+  useEffect(() => {
+    if (startDate && duration) {
+      const start = new Date(startDate);
+      start.setMonth(start.getMonth() + duration);
+      setEndDate(start.toISOString().split("T")[0]);
+    }
+  }, [startDate, duration]);
+
+  // Fetch clients based on search
+  const fetchClients = useCallback(async (search: string) => {
+    if (!search || search.trim().length < 2) {
+      setClients([]);
+      return;
+    }
+
+    setLoadingClients(true);
+    try {
+      const response = await fetch(
+        `/api/clients?search=${encodeURIComponent(search)}&limit=10`
+      );
+      if (!response.ok) {
+        throw new Error("Error al buscar clientes");
+      }
+      const data: ClientsResponse = await response.json();
+      setClients(data.data);
+    } catch (err) {
+      console.error("Error fetching clients:", err);
+      setClients([]);
+    } finally {
+      setLoadingClients(false);
+    }
+  }, []);
+
+  // Debounce client search
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      fetchClients(searchQuery);
+    }, 300);
+
+    return () => clearTimeout(timer);
+  }, [searchQuery, fetchClients]);
+
+  // Get selected plan details
+  const selectedPlan = plans.find(p => p.id === selectedPlanId);
+
+  const handleSubmit = async () => {
+    if (!selectedClient) {
+      setError("Selecciona un cliente");
+      return;
+    }
+    if (!selectedPlanId) {
+      setError("Selecciona un plan");
+      return;
+    }
+    if (!startDate || !endDate) {
+      setError("Selecciona las fechas");
+      return;
+    }
+
+    setError(null);
+    await onAssign({
+      clientId: selectedClient.id,
+      planId: selectedPlanId,
+      startDate: new Date(startDate).toISOString(),
+      endDate: new Date(endDate).toISOString(),
+    });
+  };
+
+  // Handle click outside to close
+  const handleOverlayClick = (e: React.MouseEvent) => {
+    if (e.target === e.currentTarget) {
+      onClose();
+    }
+  };
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4 overflow-y-auto"
+      onClick={handleOverlayClick}
+    >
+      <Card className="w-full max-w-lg max-h-[90vh] overflow-hidden flex flex-col my-8">
+        <CardHeader className="pb-4">
+          <div className="flex items-center justify-between">
+            <CardTitle className="text-lg">Asignar Membresia</CardTitle>
+            <button
+              onClick={onClose}
+              className="rounded-full p-1 hover:bg-primary-100 transition-colors"
+            >
+              <svg
+                className="h-5 w-5 text-primary-500"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M6 18L18 6M6 6l12 12"
+                />
+              </svg>
+            </button>
+          </div>
+        </CardHeader>
+
+        <CardContent className="flex-1 overflow-y-auto space-y-4">
+          {error && (
+            <div className="rounded-md bg-red-50 border border-red-200 p-3 text-sm text-red-700">
+              {error}
+            </div>
+          )}
+
+          {/* Client Selection */}
+          {!preselectedClient && (
+            <div className="space-y-2">
+              <label className="block text-sm font-medium text-primary-700">
+                Buscar Cliente *
+              </label>
+              <Input
+                type="text"
+                placeholder="Nombre, email o telefono..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                autoFocus
+              />
+
+              {/* Client search results */}
+              <div className="space-y-2 max-h-40 overflow-y-auto">
+                {loadingClients && (
+                  <div className="flex items-center justify-center py-4">
+                    <div className="h-5 w-5 animate-spin rounded-full border-2 border-primary-200 border-t-primary-600" />
+                  </div>
+                )}
+
+                {!loadingClients && searchQuery.length >= 2 && clients.length === 0 && (
+                  <p className="text-sm text-primary-500 text-center py-4">
+                    No se encontraron clientes.
+                  </p>
+                )}
+
+                {!loadingClients &&
+                  clients.map((client) => (
+                    <button
+                      key={client.id}
+                      type="button"
+                      onClick={() => setSelectedClient(client)}
+                      className={cn(
+                        "w-full rounded-md border p-3 text-left transition-all",
+                        "hover:border-primary-400 hover:bg-primary-50",
+                        selectedClient?.id === client.id
+                          ? "border-primary-500 bg-primary-50 ring-2 ring-primary-500"
+                          : "border-primary-200 bg-white"
+                      )}
+                    >
+                      <p className="font-medium text-primary-800">
+                        {client.firstName} {client.lastName}
+                      </p>
+                      <p className="text-xs text-primary-500">
+                        {client.email || client.phone || "Sin contacto"}
+                      </p>
+                    </button>
+                  ))}
+              </div>
+            </div>
+          )}
+
+          {/* Selected client summary */}
+          {selectedClient && (
+            <div className="rounded-md border border-accent-200 bg-accent-50 p-3">
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="text-xs font-medium text-accent-600">Cliente seleccionado:</p>
+                  <p className="font-medium text-accent-800">
+                    {selectedClient.firstName} {selectedClient.lastName}
+                  </p>
+                </div>
+                {!preselectedClient && (
+                  <button
+                    onClick={() => setSelectedClient(null)}
+                    className="text-accent-500 hover:text-accent-700"
+                  >
+                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                    </svg>
+                  </button>
+                )}
+              </div>
+            </div>
+          )}
+
+          {/* Plan Selection */}
+          <div>
+            <label className="block text-sm font-medium text-primary-700 mb-2">
+              Plan de Membresia *
+            </label>
+            <select
+              value={selectedPlanId}
+              onChange={(e) => setSelectedPlanId(e.target.value)}
+              className="flex h-10 w-full 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"
+            >
+              <option value="">Selecciona un plan</option>
+              {plans.map((plan) => (
+                <option key={plan.id} value={plan.id}>
+                  {plan.name} - {formatCurrency(Number(plan.price))}
+                </option>
+              ))}
+            </select>
+
+            {/* Selected plan details */}
+            {selectedPlan && (
+              <div className="mt-2 p-3 rounded-md bg-primary-50 border border-primary-100">
+                <div className="flex justify-between text-sm">
+                  <span className="text-primary-600">Precio:</span>
+                  <span className="font-medium text-primary-800">
+                    {formatCurrency(Number(selectedPlan.price))}
+                  </span>
+                </div>
+                {selectedPlan.courtHours && (
+                  <div className="flex justify-between text-sm mt-1">
+                    <span className="text-primary-600">Horas incluidas:</span>
+                    <span className="font-medium text-primary-800">
+                      {selectedPlan.courtHours}h
+                    </span>
+                  </div>
+                )}
+                {selectedPlan.discountPercent && Number(selectedPlan.discountPercent) > 0 && (
+                  <div className="flex justify-between text-sm mt-1">
+                    <span className="text-primary-600">Descuento:</span>
+                    <span className="font-medium text-primary-800">
+                      {Number(selectedPlan.discountPercent)}%
+                    </span>
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+
+          {/* Date Selection */}
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <label className="block text-sm font-medium text-primary-700 mb-1">
+                Fecha de Inicio
+              </label>
+              <Input
+                type="date"
+                value={startDate}
+                onChange={(e) => setStartDate(e.target.value)}
+                min={new Date().toISOString().split("T")[0]}
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-primary-700 mb-1">
+                Duracion
+              </label>
+              <select
+                value={duration}
+                onChange={(e) => setDuration(Number(e.target.value))}
+                className="flex h-10 w-full 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"
+              >
+                {durationOptions.map((option) => (
+                  <option key={option.value} value={option.value}>
+                    {option.label}
+                  </option>
+                ))}
+              </select>
+            </div>
+          </div>
+
+          {/* Calculated End Date */}
+          {endDate && (
+            <div className="rounded-md bg-primary-50 border border-primary-100 p-3">
+              <div className="flex items-center gap-2">
+                <svg className="w-5 h-5 text-primary-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                </svg>
+                <div>
+                  <p className="text-xs text-primary-500">La membresia expirara el:</p>
+                  <p className="font-medium text-primary-800">{formatDate(endDate)}</p>
+                </div>
+              </div>
+            </div>
+          )}
+        </CardContent>
+
+        <CardFooter className="border-t border-primary-200 bg-primary-50 pt-4">
+          <div className="flex w-full gap-3">
+            <Button variant="outline" onClick={onClose} className="flex-1">
+              Cancelar
+            </Button>
+            <Button
+              variant="accent"
+              onClick={handleSubmit}
+              disabled={!selectedClient || !selectedPlanId || isLoading}
+              className="flex-1"
+            >
+              {isLoading ? (
+                <span className="flex items-center gap-2">
+                  <div className="h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-white" />
+                  Asignando...
+                </span>
+              ) : (
+                "Asignar Membresia"
+              )}
+            </Button>
+          </div>
+        </CardFooter>
+      </Card>
+    </div>
+  );
+}

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>
+  );
+}

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>
+  );
+}

apps/web/components/memberships/plan-form.tsx

@@ -0,0 +1,314 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Card, CardContent, CardHeader, CardTitle, CardFooter } from "@/components/ui/card";
+
+interface PlanFormData {
+  name: string;
+  description: string;
+  price: number;
+  durationMonths: number;
+  freeHours: number;
+  bookingDiscount: number;
+  storeDiscount: number;
+  extraBenefits: string;
+}
+
+interface MembershipPlan {
+  id: string;
+  name: string;
+  description: string | null;
+  price: number | string;
+  durationMonths: number;
+  courtHours: number | null;
+  discountPercent: number | string | null;
+  benefits: string[] | null;
+  benefitsSummary?: {
+    freeHours: number;
+    bookingDiscount: number;
+    extraBenefits: string[];
+  };
+}
+
+interface PlanFormProps {
+  initialData?: MembershipPlan;
+  onSubmit: (data: PlanFormData) => Promise<void>;
+  onCancel: () => void;
+  isLoading?: boolean;
+  mode?: "create" | "edit";
+}
+
+const durationOptions = [
+  { value: 1, label: "1 mes" },
+  { value: 3, label: "3 meses" },
+  { value: 6, label: "6 meses" },
+  { value: 12, label: "12 meses" },
+];
+
+export function PlanForm({
+  initialData,
+  onSubmit,
+  onCancel,
+  isLoading = false,
+  mode = "create",
+}: PlanFormProps) {
+  // Extract store discount from benefits if present
+  const extractStoreDiscount = (benefits: string[] | null): number => {
+    if (!benefits) return 0;
+    const storeDiscountBenefit = benefits.find(b => b.includes("store discount"));
+    if (storeDiscountBenefit) {
+      const match = storeDiscountBenefit.match(/(\d+)%/);
+      return match ? parseInt(match[1], 10) : 0;
+    }
+    return 0;
+  };
+
+  const getOtherBenefits = (benefits: string[] | null): string => {
+    if (!benefits) return "";
+    return benefits
+      .filter(b => !b.includes("store discount"))
+      .join("\n");
+  };
+
+  const [formData, setFormData] = useState<PlanFormData>({
+    name: initialData?.name || "",
+    description: initialData?.description || "",
+    price: initialData?.price ? Number(initialData.price) : 0,
+    durationMonths: initialData?.durationMonths || 1,
+    freeHours: initialData?.benefitsSummary?.freeHours ?? initialData?.courtHours ?? 0,
+    bookingDiscount: initialData?.benefitsSummary?.bookingDiscount ??
+      (initialData?.discountPercent ? Number(initialData.discountPercent) : 0),
+    storeDiscount: extractStoreDiscount(initialData?.benefits || null),
+    extraBenefits: getOtherBenefits(initialData?.benefitsSummary?.extraBenefits || initialData?.benefits || null),
+  });
+  const [errors, setErrors] = useState<Record<string, string>>({});
+
+  const handleChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>
+  ) => {
+    const { name, value, type } = e.target;
+    setFormData((prev) => ({
+      ...prev,
+      [name]: type === "number" ? parseFloat(value) || 0 : value,
+    }));
+    // Clear error when field is modified
+    if (errors[name]) {
+      setErrors((prev) => {
+        const newErrors = { ...prev };
+        delete newErrors[name];
+        return newErrors;
+      });
+    }
+  };
+
+  const validate = (): boolean => {
+    const newErrors: Record<string, string> = {};
+
+    if (!formData.name.trim()) {
+      newErrors.name = "El nombre es requerido";
+    }
+    if (formData.price <= 0) {
+      newErrors.price = "El precio debe ser mayor a 0";
+    }
+    if (formData.bookingDiscount < 0 || formData.bookingDiscount > 100) {
+      newErrors.bookingDiscount = "El descuento debe estar entre 0 y 100";
+    }
+    if (formData.storeDiscount < 0 || formData.storeDiscount > 100) {
+      newErrors.storeDiscount = "El descuento debe estar entre 0 y 100";
+    }
+    if (formData.freeHours < 0) {
+      newErrors.freeHours = "Las horas gratis no pueden ser negativas";
+    }
+
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!validate()) return;
+    await onSubmit(formData);
+  };
+
+  return (
+    <Card className="w-full max-w-2xl mx-auto">
+      <form onSubmit={handleSubmit}>
+        <CardHeader>
+          <CardTitle>
+            {mode === "create" ? "Nuevo Plan de Membresia" : "Editar Plan"}
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {/* Name */}
+          <div>
+            <label className="block text-sm font-medium text-primary-700 mb-1">
+              Nombre del Plan *
+            </label>
+            <Input
+              name="name"
+              value={formData.name}
+              onChange={handleChange}
+              placeholder="Ej: Plan Premium"
+              className={errors.name ? "border-red-500" : ""}
+            />
+            {errors.name && (
+              <p className="text-red-500 text-xs mt-1">{errors.name}</p>
+            )}
+          </div>
+
+          {/* Description */}
+          <div>
+            <label className="block text-sm font-medium text-primary-700 mb-1">
+              Descripcion
+            </label>
+            <textarea
+              name="description"
+              value={formData.description}
+              onChange={handleChange}
+              placeholder="Descripcion del plan..."
+              rows={2}
+              className="flex w-full rounded-md border border-primary-200 bg-white px-3 py-2 text-sm ring-offset-white placeholder:text-primary-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2"
+            />
+          </div>
+
+          {/* Price and Duration */}
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div>
+              <label className="block text-sm font-medium text-primary-700 mb-1">
+                Precio *
+              </label>
+              <Input
+                type="number"
+                name="price"
+                value={formData.price}
+                onChange={handleChange}
+                min={0}
+                step={50}
+                className={errors.price ? "border-red-500" : ""}
+              />
+              {errors.price && (
+                <p className="text-red-500 text-xs mt-1">{errors.price}</p>
+              )}
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-primary-700 mb-1">
+                Duracion
+              </label>
+              <select
+                name="durationMonths"
+                value={formData.durationMonths}
+                onChange={handleChange}
+                className="flex h-10 w-full 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"
+              >
+                {durationOptions.map((option) => (
+                  <option key={option.value} value={option.value}>
+                    {option.label}
+                  </option>
+                ))}
+              </select>
+            </div>
+          </div>
+
+          {/* Benefits Section */}
+          <div className="border-t border-primary-200 pt-4 mt-4">
+            <h4 className="text-sm font-semibold text-primary-800 mb-3">Beneficios</h4>
+
+            {/* Free Hours */}
+            <div className="mb-4">
+              <label className="block text-sm font-medium text-primary-700 mb-1">
+                Horas Gratis de Cancha (por mes)
+              </label>
+              <Input
+                type="number"
+                name="freeHours"
+                value={formData.freeHours}
+                onChange={handleChange}
+                min={0}
+                max={100}
+                className={errors.freeHours ? "border-red-500" : ""}
+              />
+              {errors.freeHours && (
+                <p className="text-red-500 text-xs mt-1">{errors.freeHours}</p>
+              )}
+            </div>
+
+            {/* Discounts */}
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
+              <div>
+                <label className="block text-sm font-medium text-primary-700 mb-1">
+                  Descuento en Reservas (%)
+                </label>
+                <Input
+                  type="number"
+                  name="bookingDiscount"
+                  value={formData.bookingDiscount}
+                  onChange={handleChange}
+                  min={0}
+                  max={100}
+                  className={errors.bookingDiscount ? "border-red-500" : ""}
+                />
+                {errors.bookingDiscount && (
+                  <p className="text-red-500 text-xs mt-1">{errors.bookingDiscount}</p>
+                )}
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-primary-700 mb-1">
+                  Descuento en Tienda (%)
+                </label>
+                <Input
+                  type="number"
+                  name="storeDiscount"
+                  value={formData.storeDiscount}
+                  onChange={handleChange}
+                  min={0}
+                  max={100}
+                  className={errors.storeDiscount ? "border-red-500" : ""}
+                />
+                {errors.storeDiscount && (
+                  <p className="text-red-500 text-xs mt-1">{errors.storeDiscount}</p>
+                )}
+              </div>
+            </div>
+
+            {/* Extra Benefits */}
+            <div>
+              <label className="block text-sm font-medium text-primary-700 mb-1">
+                Beneficios Adicionales
+              </label>
+              <textarea
+                name="extraBenefits"
+                value={formData.extraBenefits}
+                onChange={handleChange}
+                placeholder="Un beneficio por linea&#10;Ej: Acceso a vestidores VIP&#10;Invitacion a eventos exclusivos"
+                rows={4}
+                className="flex w-full rounded-md border border-primary-200 bg-white px-3 py-2 text-sm ring-offset-white placeholder:text-primary-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2"
+              />
+              <p className="text-xs text-primary-500 mt-1">
+                Escribe un beneficio por linea
+              </p>
+            </div>
+          </div>
+        </CardContent>
+        <CardFooter className="flex justify-end gap-3 border-t border-primary-200 bg-primary-50 pt-4">
+          <Button type="button" variant="outline" onClick={onCancel}>
+            Cancelar
+          </Button>
+          <Button type="submit" disabled={isLoading}>
+            {isLoading ? (
+              <span className="flex items-center gap-2">
+                <div className="h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-white" />
+                Guardando...
+              </span>
+            ) : mode === "create" ? (
+              "Crear Plan"
+            ) : (
+              "Guardar Cambios"
+            )}
+          </Button>
+        </CardFooter>
+      </form>
+    </Card>
+  );
+}