consultoria-as/app-padel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: translate memberships page and components to English

Browse Source 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Ivan
2026-03-01 21:24:48 +00:00
parent 13bd84a0b5
commit 407744d00f
3 changed files with 72 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
apps/web/app/(admin)/memberships/page.tsx
View File

@@ -68,10 +68,10 @@ interface MembershipsResponse {
} }
const statusFilters = [ const statusFilters = [
{ value: "", label: "Todos" }, { value: "", label: "All" },
{ value: "ACTIVE", label: "Activas" }, { value: "ACTIVE", label: "Active" },
{ value: "EXPIRED", label: "Expiradas" }, { value: "EXPIRED", label: "Expired" },
{ value: "CANCELLED", label: "Canceladas" }, { value: "CANCELLED", label: "Cancelled" },
]; ];
export default function MembershipsPage() { export default function MembershipsPage() {
@@ -104,12 +104,12 @@ export default function MembershipsPage() {
setLoadingPlans(true); setLoadingPlans(true);
try { try {
const response = await fetch("/api/membership-plans?includeInactive=true"); const response = await fetch("/api/membership-plans?includeInactive=true");
if (!response.ok) throw new Error("Error al cargar planes"); if (!response.ok) throw new Error("Error loading plans");
const data = await response.json(); const data = await response.json();
setPlans(data); setPlans(data);
} catch (err) { } catch (err) {
console.error("Error fetching plans:", err); console.error("Error fetching plans:", err);
setError(err instanceof Error ? err.message : "Error desconocido"); setError(err instanceof Error ? err.message : "Unknown error");
} finally { } finally {
setLoadingPlans(false); setLoadingPlans(false);
} }
@@ -125,7 +125,7 @@ export default function MembershipsPage() {
if (searchQuery) params.append("search", searchQuery); if (searchQuery) params.append("search", searchQuery);
const response = await fetch(`/api/memberships?${params.toString()}`); const response = await fetch(`/api/memberships?${params.toString()}`);
if (!response.ok) throw new Error("Error al cargar membresias"); if (!response.ok) throw new Error("Error loading memberships");
const data: MembershipsResponse = await response.json(); const data: MembershipsResponse = await response.json();
setMemberships(data.data); setMemberships(data.data);
@@ -138,7 +138,7 @@ export default function MembershipsPage() {
}); });
} catch (err) { } catch (err) {
console.error("Error fetching memberships:", err); console.error("Error fetching memberships:", err);
setError(err instanceof Error ? err.message : "Error desconocido"); setError(err instanceof Error ? err.message : "Unknown error");
} finally { } finally {
setLoadingMemberships(false); setLoadingMemberships(false);
} }
@@ -209,7 +209,7 @@ export default function MembershipsPage() {
if (!response.ok) { if (!response.ok) {
const errorData = await response.json(); const errorData = await response.json();
throw new Error(errorData.error || "Error al guardar plan"); throw new Error(errorData.error || "Error saving plan");
} }
setShowPlanForm(false); setShowPlanForm(false);
@@ -224,7 +224,7 @@ export default function MembershipsPage() {
// Handle plan deletion // Handle plan deletion
const handleDeletePlan = async (plan: MembershipPlan) => { const handleDeletePlan = async (plan: MembershipPlan) => {
if (!confirm(`¿Estas seguro de eliminar el plan "${plan.name}"? Esta accion lo desactivara.`)) { if (!confirm(`Are you sure you want to delete the plan "${plan.name}"? This action will deactivate it.`)) {
return; return;
} }
@@ -235,13 +235,13 @@ export default function MembershipsPage() {
if (!response.ok) { if (!response.ok) {
const errorData = await response.json(); const errorData = await response.json();
throw new Error(errorData.error || "Error al eliminar plan"); throw new Error(errorData.error || "Error deleting plan");
} }
await fetchPlans(); await fetchPlans();
} catch (err) { } catch (err) {
console.error("Error deleting plan:", err); console.error("Error deleting plan:", err);
setError(err instanceof Error ? err.message : "Error desconocido"); setError(err instanceof Error ? err.message : "Unknown error");
} }
}; };
@@ -262,7 +262,7 @@ export default function MembershipsPage() {
if (!response.ok) { if (!response.ok) {
const errorData = await response.json(); const errorData = await response.json();
throw new Error(errorData.error || "Error al asignar membresia"); throw new Error(errorData.error || "Error assigning membership");
} }
setShowAssignDialog(false); setShowAssignDialog(false);
@@ -295,19 +295,19 @@ export default function MembershipsPage() {
if (!response.ok) { if (!response.ok) {
const errorData = await response.json(); const errorData = await response.json();
throw new Error(errorData.error || "Error al renovar membresia"); throw new Error(errorData.error || "Error renewing membership");
} }
await Promise.all([fetchMemberships(), fetchPlans()]); await Promise.all([fetchMemberships(), fetchPlans()]);
} catch (err) { } catch (err) {
console.error("Error renewing membership:", err); console.error("Error renewing membership:", err);
setError(err instanceof Error ? err.message : "Error desconocido"); setError(err instanceof Error ? err.message : "Unknown error");
} }
}; };
// Handle membership cancellation // Handle membership cancellation
const handleCancelMembership = async (membership: Membership) => { const handleCancelMembership = async (membership: Membership) => {
if (!confirm(`¿Estas seguro de cancelar la membresia de ${membership.client.firstName} ${membership.client.lastName}?`)) { if (!confirm(`Are you sure you want to cancel the membership for ${membership.client.firstName} ${membership.client.lastName}?`)) {
return; return;
} }
@@ -318,13 +318,13 @@ export default function MembershipsPage() {
if (!response.ok) { if (!response.ok) {
const errorData = await response.json(); const errorData = await response.json();
throw new Error(errorData.error || "Error al cancelar membresia"); throw new Error(errorData.error || "Error cancelling membership");
} }
await Promise.all([fetchMemberships(), fetchPlans()]); await Promise.all([fetchMemberships(), fetchPlans()]);
} catch (err) { } catch (err) {
console.error("Error cancelling membership:", err); console.error("Error cancelling membership:", err);
setError(err instanceof Error ? err.message : "Error desconocido"); setError(err instanceof Error ? err.message : "Unknown error");
} }
}; };
@@ -336,9 +336,9 @@ export default function MembershipsPage() {
{/* Header */} {/* Header */}
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4"> <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
<div> <div>
<h1 className="text-2xl font-bold text-primary-800">Membresias</h1> <h1 className="text-2xl font-bold text-primary-800">Memberships</h1>
<p className="mt-1 text-primary-600"> <p className="mt-1 text-primary-600">
Gestiona planes y membresias de tus clientes Manage plans and memberships for your players
</p> </p>
</div> </div>
</div> </div>
@@ -374,7 +374,7 @@ export default function MembershipsPage() {
</svg> </svg>
</div> </div>
<div> <div>
<p className="text-sm text-primary-500">Membresias Activas</p> <p className="text-sm text-primary-500">Active Memberships</p>
<p className="text-2xl font-bold text-primary-800">{stats.totalActive}</p> <p className="text-2xl font-bold text-primary-800">{stats.totalActive}</p>
</div> </div>
</div> </div>
@@ -396,7 +396,7 @@ export default function MembershipsPage() {
</svg> </svg>
</div> </div>
<div> <div>
<p className="text-sm text-primary-500">Por Expirar</p> <p className="text-sm text-primary-500">Expiring Soon</p>
<p className="text-2xl font-bold text-primary-800">{stats.expiringSoon}</p> <p className="text-2xl font-bold text-primary-800">{stats.expiringSoon}</p>
</div> </div>
</div> </div>
@@ -412,7 +412,7 @@ export default function MembershipsPage() {
</svg> </svg>
</div> </div>
<div> <div>
<p className="text-sm text-primary-500">Planes Activos</p> <p className="text-sm text-primary-500">Active Plans</p>
<p className="text-2xl font-bold text-primary-800">{activePlans.length}</p> <p className="text-2xl font-bold text-primary-800">{activePlans.length}</p>
</div> </div>
</div> </div>
@@ -428,7 +428,7 @@ export default function MembershipsPage() {
</svg> </svg>
</div> </div>
<div> <div>
<p className="text-sm text-primary-500">Total Suscriptores</p> <p className="text-sm text-primary-500">Total Subscribers</p>
<p className="text-2xl font-bold text-primary-800"> <p className="text-2xl font-bold text-primary-800">
{plans.reduce((sum, p) => sum + p.subscriberCount, 0)} {plans.reduce((sum, p) => sum + p.subscriberCount, 0)}
</p> </p>
@@ -441,12 +441,12 @@ export default function MembershipsPage() {
{/* Plans Section */} {/* Plans Section */}
<section> <section>
<div className="flex items-center justify-between mb-4"> <div className="flex items-center justify-between mb-4">
<h2 className="text-xl font-semibold text-primary-800">Planes de Membresia</h2> <h2 className="text-xl font-semibold text-primary-800">Membership Plans</h2>
<Button onClick={() => setShowPlanForm(true)}> <Button onClick={() => setShowPlanForm(true)}>
<svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
</svg> </svg>
Nuevo Plan New Plan
</Button> </Button>
</div> </div>
@@ -454,7 +454,7 @@ export default function MembershipsPage() {
<div className="flex items-center justify-center py-12"> <div className="flex items-center justify-center py-12">
<div className="text-center"> <div className="text-center">
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto mb-2"></div> <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 planes...</p> <p className="text-primary-500">Loading plans...</p>
</div> </div>
</div> </div>
) : plans.length === 0 ? ( ) : plans.length === 0 ? (
@@ -468,10 +468,10 @@ export default function MembershipsPage() {
> >
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
</svg> </svg>
<p className="font-medium text-primary-600">No hay planes</p> <p className="font-medium text-primary-600">No plans</p>
<p className="text-sm text-primary-500 mt-1">Crea tu primer plan de membresia</p> <p className="text-sm text-primary-500 mt-1">Create your first membership plan</p>
<Button className="mt-4" onClick={() => setShowPlanForm(true)}> <Button className="mt-4" onClick={() => setShowPlanForm(true)}>
Crear Plan Create Plan
</Button> </Button>
</CardContent> </CardContent>
</Card> </Card>
@@ -496,12 +496,12 @@ export default function MembershipsPage() {
{/* Memberships Section */} {/* Memberships Section */}
<section> <section>
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-4"> <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-4">
<h2 className="text-xl font-semibold text-primary-800">Membresias</h2> <h2 className="text-xl font-semibold text-primary-800">Memberships</h2>
<Button variant="accent" onClick={() => setShowAssignDialog(true)}> <Button variant="accent" onClick={() => setShowAssignDialog(true)}>
<svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg className="w-5 h-5 mr-2" 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" /> <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> </svg>
Asignar Membresia Assign Membership
</Button> </Button>
</div> </div>
@@ -513,7 +513,7 @@ export default function MembershipsPage() {
<div className="flex-1"> <div className="flex-1">
<Input <Input
type="text" type="text"
placeholder="Buscar por nombre de cliente..." placeholder="Search by player name..."
value={searchQuery} value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)} onChange={(e) => setSearchQuery(e.target.value)}
className="w-full" className="w-full"
@@ -527,7 +527,7 @@ export default function MembershipsPage() {
onChange={(e) => setPlanFilter(e.target.value)} onChange={(e) => setPlanFilter(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" 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="">Todos los planes</option> <option value="">All plans</option>
{activePlans.map((plan) => ( {activePlans.map((plan) => (
<option key={plan.id} value={plan.id}> <option key={plan.id} value={plan.id}>
{plan.name} {plan.name}

22
apps/web/components/memberships/plan-card.tsx
View File

@@ -57,7 +57,7 @@ export function PlanCard({ plan, onEdit, onDelete, isAdmin = false }: PlanCardPr
? "bg-accent-100 text-accent-700" ? "bg-accent-100 text-accent-700"
: "bg-primary-100 text-primary-600" : "bg-primary-100 text-primary-600"
)}> )}>
{plan.subscriberCount} {plan.subscriberCount === 1 ? "suscriptor" : "suscriptores"} {plan.subscriberCount} {plan.subscriberCount === 1 ? "subscriber" : "subscribers"}
</span> </span>
</div> </div>
{plan.description && ( {plan.description && (
@@ -72,7 +72,7 @@ export function PlanCard({ plan, onEdit, onDelete, isAdmin = false }: PlanCardPr
{formatCurrency(price)} {formatCurrency(price)}
</div> </div>
<div className="text-sm text-primary-500"> <div className="text-sm text-primary-500">
/{plan.durationMonths} {plan.durationMonths === 1 ? "mes" : "meses"} /{plan.durationMonths} {plan.durationMonths === 1 ? "month" : "months"}
</div> </div>
</div> </div>
@@ -87,8 +87,8 @@ export function PlanCard({ plan, onEdit, onDelete, isAdmin = false }: PlanCardPr
</svg> </svg>
</div> </div>
<div> <div>
<p className="font-medium text-primary-800">{freeHours} horas gratis</p> <p className="font-medium text-primary-800">{freeHours} free hours</p>
<p className="text-xs text-primary-500">de cancha al mes</p> <p className="text-xs text-primary-500">of court time per month</p>
</div> </div>
</div> </div>
)} )}
@@ -102,8 +102,8 @@ export function PlanCard({ plan, onEdit, onDelete, isAdmin = false }: PlanCardPr
</svg> </svg>
</div> </div>
<div> <div>
<p className="font-medium text-primary-800">{discountPercent}% descuento</p> <p className="font-medium text-primary-800">{discountPercent}% discount</p>
<p className="text-xs text-primary-500">en reservas adicionales</p> <p className="text-xs text-primary-500">on additional bookings</p>
</div> </div>
</div> </div>
)} )}
@@ -117,8 +117,8 @@ export function PlanCard({ plan, onEdit, onDelete, isAdmin = false }: PlanCardPr
</svg> </svg>
</div> </div>
<div> <div>
<p className="font-medium text-primary-800">{storeDiscount}% descuento</p> <p className="font-medium text-primary-800">{storeDiscount}% discount</p>
<p className="text-xs text-primary-500">en tienda</p> <p className="text-xs text-primary-500">in store</p>
</div> </div>
</div> </div>
)} )}
@@ -126,7 +126,7 @@ export function PlanCard({ plan, onEdit, onDelete, isAdmin = false }: PlanCardPr
{/* Other Benefits */} {/* Other Benefits */}
{otherBenefits.length > 0 && ( {otherBenefits.length > 0 && (
<div className="pt-2 border-t border-primary-100"> <div className="pt-2 border-t border-primary-100">
<p className="text-xs font-medium text-primary-600 mb-2">Beneficios adicionales:</p> <p className="text-xs font-medium text-primary-600 mb-2">Additional benefits:</p>
<ul className="space-y-1"> <ul className="space-y-1">
{otherBenefits.map((benefit, index) => ( {otherBenefits.map((benefit, index) => (
<li key={index} className="flex items-start gap-2 text-sm text-primary-700"> <li key={index} className="flex items-start gap-2 text-sm text-primary-700">
@@ -153,7 +153,7 @@ export function PlanCard({ plan, onEdit, onDelete, isAdmin = false }: PlanCardPr
<svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <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" /> <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> </svg>
Editar Edit
</Button> </Button>
<Button <Button
variant="outline" variant="outline"
@@ -164,7 +164,7 @@ export function PlanCard({ plan, onEdit, onDelete, isAdmin = false }: PlanCardPr
<svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <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" /> <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> </svg>
Eliminar Delete
</Button> </Button>
</CardFooter> </CardFooter>
)} )}

54
apps/web/components/memberships/plan-form.tsx
View File

@@ -41,10 +41,10 @@ interface PlanFormProps {
} }
const durationOptions = [ const durationOptions = [
{ value: 1, label: "1 mes" }, { value: 1, label: "1 month" },
{ value: 3, label: "3 meses" }, { value: 3, label: "3 months" },
{ value: 6, label: "6 meses" }, { value: 6, label: "6 months" },
{ value: 12, label: "12 meses" }, { value: 12, label: "12 months" },
]; ];
export function PlanForm({ export function PlanForm({
@@ -107,19 +107,19 @@ export function PlanForm({
const newErrors: Record<string, string> = {}; const newErrors: Record<string, string> = {};
if (!formData.name.trim()) { if (!formData.name.trim()) {
newErrors.name = "El nombre es requerido"; newErrors.name = "Name is required";
} }
if (formData.price <= 0) { if (formData.price <= 0) {
newErrors.price = "El precio debe ser mayor a 0"; newErrors.price = "Price must be greater than 0";
} }
if (formData.bookingDiscount < 0 || formData.bookingDiscount > 100) { if (formData.bookingDiscount < 0 || formData.bookingDiscount > 100) {
newErrors.bookingDiscount = "El descuento debe estar entre 0 y 100"; newErrors.bookingDiscount = "Discount must be between 0 and 100";
} }
if (formData.storeDiscount < 0 || formData.storeDiscount > 100) { if (formData.storeDiscount < 0 || formData.storeDiscount > 100) {
newErrors.storeDiscount = "El descuento debe estar entre 0 y 100"; newErrors.storeDiscount = "Discount must be between 0 and 100";
} }
if (formData.freeHours < 0) { if (formData.freeHours < 0) {
newErrors.freeHours = "Las horas gratis no pueden ser negativas"; newErrors.freeHours = "Free hours cannot be negative";
} }
setErrors(newErrors); setErrors(newErrors);
@@ -137,20 +137,20 @@ export function PlanForm({
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit}>
<CardHeader> <CardHeader>
<CardTitle> <CardTitle>
{mode === "create" ? "Nuevo Plan de Membresia" : "Editar Plan"} {mode === "create" ? "New Membership Plan" : "Edit Plan"}
</CardTitle> </CardTitle>
</CardHeader> </CardHeader>
<CardContent className="space-y-4"> <CardContent className="space-y-4">
{/* Name */} {/* Name */}
<div> <div>
<label className="block text-sm font-medium text-primary-700 mb-1"> <label className="block text-sm font-medium text-primary-700 mb-1">
Nombre del Plan * Plan Name *
</label> </label>
<Input <Input
name="name" name="name"
value={formData.name} value={formData.name}
onChange={handleChange} onChange={handleChange}
placeholder="Ej: Plan Premium" placeholder="E.g.: Premium Plan"
className={errors.name ? "border-red-500" : ""} className={errors.name ? "border-red-500" : ""}
/> />
{errors.name && ( {errors.name && (
@@ -161,13 +161,13 @@ export function PlanForm({
{/* Description */} {/* Description */}
<div> <div>
<label className="block text-sm font-medium text-primary-700 mb-1"> <label className="block text-sm font-medium text-primary-700 mb-1">
Descripcion Description
</label> </label>
<textarea <textarea
name="description" name="description"
value={formData.description} value={formData.description}
onChange={handleChange} onChange={handleChange}
placeholder="Descripcion del plan..." placeholder="Plan description..."
rows={2} 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" 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"
/> />
@@ -177,7 +177,7 @@ export function PlanForm({
<div className="grid grid-cols-1 md:grid-cols-2 gap-4"> <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div> <div>
<label className="block text-sm font-medium text-primary-700 mb-1"> <label className="block text-sm font-medium text-primary-700 mb-1">
Precio * Price *
</label> </label>
<Input <Input
type="number" type="number"
@@ -194,7 +194,7 @@ export function PlanForm({
</div> </div>
<div> <div>
<label className="block text-sm font-medium text-primary-700 mb-1"> <label className="block text-sm font-medium text-primary-700 mb-1">
Duracion Duration
</label> </label>
<select <select
name="durationMonths" name="durationMonths"
@@ -213,12 +213,12 @@ export function PlanForm({
{/* Benefits Section */} {/* Benefits Section */}
<div className="border-t border-primary-200 pt-4 mt-4"> <div className="border-t border-primary-200 pt-4 mt-4">
<h4 className="text-sm font-semibold text-primary-800 mb-3">Beneficios</h4> <h4 className="text-sm font-semibold text-primary-800 mb-3">Benefits</h4>
{/* Free Hours */} {/* Free Hours */}
<div className="mb-4"> <div className="mb-4">
<label className="block text-sm font-medium text-primary-700 mb-1"> <label className="block text-sm font-medium text-primary-700 mb-1">
Horas Gratis de Cancha (por mes) Free Court Hours (per month)
</label> </label>
<Input <Input
type="number" type="number"
@@ -238,7 +238,7 @@ export function PlanForm({
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4"> <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
<div> <div>
<label className="block text-sm font-medium text-primary-700 mb-1"> <label className="block text-sm font-medium text-primary-700 mb-1">
Descuento en Reservas (%) Booking Discount (%)
</label> </label>
<Input <Input
type="number" type="number"
@@ -255,7 +255,7 @@ export function PlanForm({
</div> </div>
<div> <div>
<label className="block text-sm font-medium text-primary-700 mb-1"> <label className="block text-sm font-medium text-primary-700 mb-1">
Descuento en Tienda (%) Store Discount (%)
</label> </label>
<Input <Input
type="number" type="number"
@@ -275,36 +275,36 @@ export function PlanForm({
{/* Extra Benefits */} {/* Extra Benefits */}
<div> <div>
<label className="block text-sm font-medium text-primary-700 mb-1"> <label className="block text-sm font-medium text-primary-700 mb-1">
Beneficios Adicionales Additional Benefits
</label> </label>
<textarea <textarea
name="extraBenefits" name="extraBenefits"
value={formData.extraBenefits} value={formData.extraBenefits}
onChange={handleChange} onChange={handleChange}
placeholder="Un beneficio por linea&#10;Ej: Acceso a vestidores VIP&#10;Invitacion a eventos exclusivos" placeholder="One benefit per line&#10;E.g.: Access to VIP locker rooms&#10;Invitation to exclusive events"
rows={4} 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" 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"> <p className="text-xs text-primary-500 mt-1">
Escribe un beneficio por linea Write one benefit per line
</p> </p>
</div> </div>
</div> </div>
</CardContent> </CardContent>
<CardFooter className="flex justify-end gap-3 border-t border-primary-200 bg-primary-50 pt-4"> <CardFooter className="flex justify-end gap-3 border-t border-primary-200 bg-primary-50 pt-4">
<Button type="button" variant="outline" onClick={onCancel}> <Button type="button" variant="outline" onClick={onCancel}>
Cancelar Cancel
</Button> </Button>
<Button type="submit" disabled={isLoading}> <Button type="submit" disabled={isLoading}>
{isLoading ? ( {isLoading ? (
<span className="flex items-center gap-2"> <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" /> <div className="h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-white" />
Guardando... Saving...
</span> </span>
) : mode === "create" ? ( ) : mode === "create" ? (
"Crear Plan" "Create Plan"
) : ( ) : (
"Guardar Cambios" "Save Changes"
)} )}
</Button> </Button>
</CardFooter> </CardFooter>