feat: add settings and reports pages
- Add settings page with organization, sites, courts, and users tabs - Add reports page with revenue charts and statistics - Add users API endpoint - Add sites/[id] API endpoint for CRUD operations - Add tabs UI component - Fix sites API to return isActive field Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Ivan
812
apps/web/app/(admin)/settings/page.tsx
Normal file
812
apps/web/app/(admin)/settings/page.tsx
Normal file
@@ -0,0 +1,812 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import {
|
||||
Building2,
|
||||
MapPin,
|
||||
Users,
|
||||
Clock,
|
||||
DollarSign,
|
||||
Save,
|
||||
Plus,
|
||||
Pencil,
|
||||
Trash2,
|
||||
X,
|
||||
} from "lucide-react";
|
||||
|
||||
interface Site {
|
||||
id: string;
|
||||
name: string;
|
||||
address: string;
|
||||
phone: string | null;
|
||||
openTime: string;
|
||||
closeTime: string;
|
||||
isActive: boolean;
|
||||
}
|
||||
|
||||
interface Court {
|
||||
id: string;
|
||||
name: string;
|
||||
type: string;
|
||||
hourlyRate: number;
|
||||
peakHourlyRate: number | null;
|
||||
status: string;
|
||||
siteId: string;
|
||||
site?: { name: string };
|
||||
}
|
||||
|
||||
interface User {
|
||||
id: string;
|
||||
email: string;
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
role: string;
|
||||
isActive: boolean;
|
||||
site?: { name: string } | null;
|
||||
}
|
||||
|
||||
export default function SettingsPage() {
|
||||
const [activeTab, setActiveTab] = useState("organization");
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [message, setMessage] = useState<{ type: "success" | "error"; text: string } | null>(null);
|
||||
|
||||
// Organization state
|
||||
const [orgName, setOrgName] = useState("Padel Pro Demo");
|
||||
const [orgEmail, setOrgEmail] = useState("info@padelpro.com");
|
||||
const [orgPhone, setOrgPhone] = useState("+52 555 123 4567");
|
||||
const [currency, setCurrency] = useState("MXN");
|
||||
const [timezone, setTimezone] = useState("America/Mexico_City");
|
||||
|
||||
// Sites state
|
||||
const [sites, setSites] = useState<Site[]>([]);
|
||||
const [loadingSites, setLoadingSites] = useState(true);
|
||||
const [editingSite, setEditingSite] = useState<Site | null>(null);
|
||||
const [showSiteForm, setShowSiteForm] = useState(false);
|
||||
|
||||
// Courts state
|
||||
const [courts, setCourts] = useState<Court[]>([]);
|
||||
const [loadingCourts, setLoadingCourts] = useState(true);
|
||||
const [editingCourt, setEditingCourt] = useState<Court | null>(null);
|
||||
const [showCourtForm, setShowCourtForm] = useState(false);
|
||||
|
||||
// Users state
|
||||
const [users, setUsers] = useState<User[]>([]);
|
||||
const [loadingUsers, setLoadingUsers] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
fetchSites();
|
||||
fetchCourts();
|
||||
fetchUsers();
|
||||
}, []);
|
||||
|
||||
const fetchSites = async () => {
|
||||
try {
|
||||
const res = await fetch("/api/sites");
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
setSites(data.data || []);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error fetching sites:", error);
|
||||
} finally {
|
||||
setLoadingSites(false);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchCourts = async () => {
|
||||
try {
|
||||
const res = await fetch("/api/courts");
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
setCourts(data.data || []);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error fetching courts:", error);
|
||||
} finally {
|
||||
setLoadingCourts(false);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchUsers = async () => {
|
||||
try {
|
||||
const res = await fetch("/api/users");
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
setUsers(data.data || []);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error fetching users:", error);
|
||||
} finally {
|
||||
setLoadingUsers(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSaveOrganization = async () => {
|
||||
setLoading(true);
|
||||
// Simulate save
|
||||
await new Promise((resolve) => setTimeout(resolve, 500));
|
||||
setMessage({ type: "success", text: "Configuración guardada correctamente" });
|
||||
setLoading(false);
|
||||
setTimeout(() => setMessage(null), 3000);
|
||||
};
|
||||
|
||||
const handleSaveSite = async (site: Partial<Site>) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const method = editingSite ? "PUT" : "POST";
|
||||
const url = editingSite ? `/api/sites/${editingSite.id}` : "/api/sites";
|
||||
|
||||
const res = await fetch(url, {
|
||||
method,
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(site),
|
||||
});
|
||||
|
||||
if (res.ok) {
|
||||
setMessage({ type: "success", text: editingSite ? "Sede actualizada" : "Sede creada" });
|
||||
fetchSites();
|
||||
setShowSiteForm(false);
|
||||
setEditingSite(null);
|
||||
} else {
|
||||
setMessage({ type: "error", text: "Error al guardar la sede" });
|
||||
}
|
||||
} catch (error) {
|
||||
setMessage({ type: "error", text: "Error de conexión" });
|
||||
} finally {
|
||||
setLoading(false);
|
||||
setTimeout(() => setMessage(null), 3000);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSaveCourt = async (court: Partial<Court>) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const method = editingCourt ? "PUT" : "POST";
|
||||
const url = editingCourt ? `/api/courts/${editingCourt.id}` : "/api/courts";
|
||||
|
||||
const res = await fetch(url, {
|
||||
method,
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(court),
|
||||
});
|
||||
|
||||
if (res.ok) {
|
||||
setMessage({ type: "success", text: editingCourt ? "Cancha actualizada" : "Cancha creada" });
|
||||
fetchCourts();
|
||||
setShowCourtForm(false);
|
||||
setEditingCourt(null);
|
||||
} else {
|
||||
setMessage({ type: "error", text: "Error al guardar la cancha" });
|
||||
}
|
||||
} catch (error) {
|
||||
setMessage({ type: "error", text: "Error de conexión" });
|
||||
} finally {
|
||||
setLoading(false);
|
||||
setTimeout(() => setMessage(null), 3000);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteCourt = async (courtId: string) => {
|
||||
if (!confirm("¿Estás seguro de eliminar esta cancha?")) return;
|
||||
|
||||
try {
|
||||
const res = await fetch(`/api/courts/${courtId}`, { method: "DELETE" });
|
||||
if (res.ok) {
|
||||
setMessage({ type: "success", text: "Cancha eliminada" });
|
||||
fetchCourts();
|
||||
} else {
|
||||
setMessage({ type: "error", text: "Error al eliminar la cancha" });
|
||||
}
|
||||
} catch (error) {
|
||||
setMessage({ type: "error", text: "Error de conexión" });
|
||||
}
|
||||
setTimeout(() => setMessage(null), 3000);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Header */}
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-primary-800">Configuración</h1>
|
||||
<p className="text-primary-600">Administra la configuración del sistema</p>
|
||||
</div>
|
||||
|
||||
{/* Message */}
|
||||
{message && (
|
||||
<div
|
||||
className={`p-4 rounded-lg ${
|
||||
message.type === "success"
|
||||
? "bg-accent/10 text-accent-700 border border-accent/20"
|
||||
: "bg-red-50 text-red-700 border border-red-200"
|
||||
}`}
|
||||
>
|
||||
{message.text}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Tabs */}
|
||||
<Tabs value={activeTab} onValueChange={setActiveTab}>
|
||||
<TabsList className="grid w-full grid-cols-4 lg:w-auto lg:inline-grid">
|
||||
<TabsTrigger value="organization" className="gap-2">
|
||||
<Building2 className="h-4 w-4" />
|
||||
<span className="hidden sm:inline">Organización</span>
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="sites" className="gap-2">
|
||||
<MapPin className="h-4 w-4" />
|
||||
<span className="hidden sm:inline">Sedes</span>
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="courts" className="gap-2">
|
||||
<Clock className="h-4 w-4" />
|
||||
<span className="hidden sm:inline">Canchas</span>
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="users" className="gap-2">
|
||||
<Users className="h-4 w-4" />
|
||||
<span className="hidden sm:inline">Usuarios</span>
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
{/* Organization Tab */}
|
||||
<TabsContent value="organization" className="space-y-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Información de la Organización</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-primary-700 mb-1">
|
||||
Nombre de la organización
|
||||
</label>
|
||||
<Input
|
||||
value={orgName}
|
||||
onChange={(e) => setOrgName(e.target.value)}
|
||||
placeholder="Nombre"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-primary-700 mb-1">
|
||||
Email de contacto
|
||||
</label>
|
||||
<Input
|
||||
type="email"
|
||||
value={orgEmail}
|
||||
onChange={(e) => setOrgEmail(e.target.value)}
|
||||
placeholder="email@ejemplo.com"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-primary-700 mb-1">
|
||||
Teléfono
|
||||
</label>
|
||||
<Input
|
||||
value={orgPhone}
|
||||
onChange={(e) => setOrgPhone(e.target.value)}
|
||||
placeholder="+52 555 123 4567"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-primary-700 mb-1">
|
||||
Moneda
|
||||
</label>
|
||||
<select
|
||||
value={currency}
|
||||
onChange={(e) => setCurrency(e.target.value)}
|
||||
className="w-full rounded-lg border border-primary-200 bg-white px-3 py-2 text-sm focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
|
||||
>
|
||||
<option value="MXN">MXN - Peso Mexicano</option>
|
||||
<option value="USD">USD - Dólar</option>
|
||||
<option value="EUR">EUR - Euro</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-primary-700 mb-1">
|
||||
Zona horaria
|
||||
</label>
|
||||
<select
|
||||
value={timezone}
|
||||
onChange={(e) => setTimezone(e.target.value)}
|
||||
className="w-full rounded-lg border border-primary-200 bg-white px-3 py-2 text-sm focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
|
||||
>
|
||||
<option value="America/Mexico_City">Ciudad de México</option>
|
||||
<option value="America/Monterrey">Monterrey</option>
|
||||
<option value="America/Tijuana">Tijuana</option>
|
||||
<option value="America/Cancun">Cancún</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pt-4">
|
||||
<Button onClick={handleSaveOrganization} disabled={loading}>
|
||||
<Save className="h-4 w-4 mr-2" />
|
||||
{loading ? "Guardando..." : "Guardar cambios"}
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Configuración de Reservas</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-primary-700 mb-1">
|
||||
Duración por defecto (minutos)
|
||||
</label>
|
||||
<Input type="number" defaultValue={60} min={30} step={30} />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-primary-700 mb-1">
|
||||
Anticipación mínima (horas)
|
||||
</label>
|
||||
<Input type="number" defaultValue={2} min={0} />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-primary-700 mb-1">
|
||||
Anticipación máxima (días)
|
||||
</label>
|
||||
<Input type="number" defaultValue={14} min={1} />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-primary-700 mb-1">
|
||||
Horas para cancelar
|
||||
</label>
|
||||
<Input type="number" defaultValue={24} min={0} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pt-4">
|
||||
<Button onClick={handleSaveOrganization} disabled={loading}>
|
||||
<Save className="h-4 w-4 mr-2" />
|
||||
{loading ? "Guardando..." : "Guardar cambios"}
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
{/* Sites Tab */}
|
||||
<TabsContent value="sites" className="space-y-6">
|
||||
<div className="flex justify-between items-center">
|
||||
<h2 className="text-lg font-semibold text-primary-800">Sedes</h2>
|
||||
<Button onClick={() => { setEditingSite(null); setShowSiteForm(true); }}>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
Nueva Sede
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{loadingSites ? (
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
{[1, 2, 3].map((i) => (
|
||||
<Card key={i} className="animate-pulse">
|
||||
<CardContent className="p-6">
|
||||
<div className="h-6 bg-primary-100 rounded w-3/4 mb-2" />
|
||||
<div className="h-4 bg-primary-100 rounded w-full mb-2" />
|
||||
<div className="h-4 bg-primary-100 rounded w-1/2" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
{sites.map((site) => (
|
||||
<Card key={site.id} className="hover:shadow-md transition-shadow">
|
||||
<CardContent className="p-6">
|
||||
<div className="flex justify-between items-start mb-3">
|
||||
<h3 className="font-semibold text-primary-800">{site.name}</h3>
|
||||
<div className="flex gap-1">
|
||||
<button
|
||||
onClick={() => { setEditingSite(site); setShowSiteForm(true); }}
|
||||
className="p-1 text-primary-500 hover:text-primary-700"
|
||||
>
|
||||
<Pencil className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-sm text-primary-600 mb-2">{site.address}</p>
|
||||
<p className="text-sm text-primary-500">
|
||||
{site.openTime} - {site.closeTime}
|
||||
</p>
|
||||
{site.phone && (
|
||||
<p className="text-sm text-primary-500 mt-1">{site.phone}</p>
|
||||
)}
|
||||
<div className="mt-3">
|
||||
<span
|
||||
className={`inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ${
|
||||
site.isActive
|
||||
? "bg-accent/10 text-accent-700"
|
||||
: "bg-gray-100 text-gray-600"
|
||||
}`}
|
||||
>
|
||||
{site.isActive ? "Activa" : "Inactiva"}
|
||||
</span>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Site Form Modal */}
|
||||
{showSiteForm && (
|
||||
<SiteFormModal
|
||||
site={editingSite}
|
||||
onSave={handleSaveSite}
|
||||
onClose={() => { setShowSiteForm(false); setEditingSite(null); }}
|
||||
loading={loading}
|
||||
/>
|
||||
)}
|
||||
</TabsContent>
|
||||
|
||||
{/* Courts Tab */}
|
||||
<TabsContent value="courts" className="space-y-6">
|
||||
<div className="flex justify-between items-center">
|
||||
<h2 className="text-lg font-semibold text-primary-800">Canchas</h2>
|
||||
<Button onClick={() => { setEditingCourt(null); setShowCourtForm(true); }}>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
Nueva Cancha
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{loadingCourts ? (
|
||||
<div className="space-y-2">
|
||||
{[1, 2, 3].map((i) => (
|
||||
<div key={i} className="animate-pulse bg-white p-4 rounded-lg border">
|
||||
<div className="h-5 bg-primary-100 rounded w-1/4 mb-2" />
|
||||
<div className="h-4 bg-primary-100 rounded w-1/2" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<Card>
|
||||
<CardContent className="p-0">
|
||||
<table className="w-full">
|
||||
<thead className="bg-primary-50 border-b border-primary-100">
|
||||
<tr>
|
||||
<th className="text-left px-4 py-3 text-sm font-medium text-primary-700">Cancha</th>
|
||||
<th className="text-left px-4 py-3 text-sm font-medium text-primary-700">Sede</th>
|
||||
<th className="text-left px-4 py-3 text-sm font-medium text-primary-700">Tipo</th>
|
||||
<th className="text-left px-4 py-3 text-sm font-medium text-primary-700">Precio/hora</th>
|
||||
<th className="text-left px-4 py-3 text-sm font-medium text-primary-700">Estado</th>
|
||||
<th className="text-right px-4 py-3 text-sm font-medium text-primary-700">Acciones</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{courts.map((court) => (
|
||||
<tr key={court.id} className="border-b border-primary-50 hover:bg-primary-50/50">
|
||||
<td className="px-4 py-3 font-medium text-primary-800">{court.name}</td>
|
||||
<td className="px-4 py-3 text-primary-600">{court.site?.name || "-"}</td>
|
||||
<td className="px-4 py-3 text-primary-600 capitalize">{court.type}</td>
|
||||
<td className="px-4 py-3 text-primary-600">${court.hourlyRate}</td>
|
||||
<td className="px-4 py-3">
|
||||
<span
|
||||
className={`inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ${
|
||||
court.status === "active"
|
||||
? "bg-accent/10 text-accent-700"
|
||||
: court.status === "maintenance"
|
||||
? "bg-amber-100 text-amber-700"
|
||||
: "bg-gray-100 text-gray-600"
|
||||
}`}
|
||||
>
|
||||
{court.status === "active" ? "Activa" : court.status === "maintenance" ? "Mantenimiento" : "Inactiva"}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-3 text-right">
|
||||
<button
|
||||
onClick={() => { setEditingCourt(court); setShowCourtForm(true); }}
|
||||
className="p-1 text-primary-500 hover:text-primary-700 mr-1"
|
||||
>
|
||||
<Pencil className="h-4 w-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDeleteCourt(court.id)}
|
||||
className="p-1 text-red-500 hover:text-red-700"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Court Form Modal */}
|
||||
{showCourtForm && (
|
||||
<CourtFormModal
|
||||
court={editingCourt}
|
||||
sites={sites}
|
||||
onSave={handleSaveCourt}
|
||||
onClose={() => { setShowCourtForm(false); setEditingCourt(null); }}
|
||||
loading={loading}
|
||||
/>
|
||||
)}
|
||||
</TabsContent>
|
||||
|
||||
{/* Users Tab */}
|
||||
<TabsContent value="users" className="space-y-6">
|
||||
<div className="flex justify-between items-center">
|
||||
<h2 className="text-lg font-semibold text-primary-800">Usuarios</h2>
|
||||
<Button>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
Nuevo Usuario
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{loadingUsers ? (
|
||||
<div className="space-y-2">
|
||||
{[1, 2, 3].map((i) => (
|
||||
<div key={i} className="animate-pulse bg-white p-4 rounded-lg border">
|
||||
<div className="h-5 bg-primary-100 rounded w-1/4 mb-2" />
|
||||
<div className="h-4 bg-primary-100 rounded w-1/2" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<Card>
|
||||
<CardContent className="p-0">
|
||||
<table className="w-full">
|
||||
<thead className="bg-primary-50 border-b border-primary-100">
|
||||
<tr>
|
||||
<th className="text-left px-4 py-3 text-sm font-medium text-primary-700">Usuario</th>
|
||||
<th className="text-left px-4 py-3 text-sm font-medium text-primary-700">Email</th>
|
||||
<th className="text-left px-4 py-3 text-sm font-medium text-primary-700">Rol</th>
|
||||
<th className="text-left px-4 py-3 text-sm font-medium text-primary-700">Sede</th>
|
||||
<th className="text-left px-4 py-3 text-sm font-medium text-primary-700">Estado</th>
|
||||
<th className="text-right px-4 py-3 text-sm font-medium text-primary-700">Acciones</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{users.map((user) => (
|
||||
<tr key={user.id} className="border-b border-primary-50 hover:bg-primary-50/50">
|
||||
<td className="px-4 py-3 font-medium text-primary-800">
|
||||
{user.firstName} {user.lastName}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-primary-600">{user.email}</td>
|
||||
<td className="px-4 py-3">
|
||||
<span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-primary-100 text-primary-700">
|
||||
{user.role === "super_admin" ? "Super Admin" :
|
||||
user.role === "site_admin" ? "Admin Sede" :
|
||||
user.role === "staff" ? "Staff" : user.role}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-3 text-primary-600">{user.site?.name || "Todas"}</td>
|
||||
<td className="px-4 py-3">
|
||||
<span
|
||||
className={`inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ${
|
||||
user.isActive
|
||||
? "bg-accent/10 text-accent-700"
|
||||
: "bg-gray-100 text-gray-600"
|
||||
}`}
|
||||
>
|
||||
{user.isActive ? "Activo" : "Inactivo"}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-3 text-right">
|
||||
<button className="p-1 text-primary-500 hover:text-primary-700">
|
||||
<Pencil className="h-4 w-4" />
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Site Form Modal Component
|
||||
function SiteFormModal({
|
||||
site,
|
||||
onSave,
|
||||
onClose,
|
||||
loading,
|
||||
}: {
|
||||
site: Site | null;
|
||||
onSave: (site: Partial<Site>) => void;
|
||||
onClose: () => void;
|
||||
loading: boolean;
|
||||
}) {
|
||||
const [name, setName] = useState(site?.name || "");
|
||||
const [address, setAddress] = useState(site?.address || "");
|
||||
const [phone, setPhone] = useState(site?.phone || "");
|
||||
const [openTime, setOpenTime] = useState(site?.openTime || "08:00");
|
||||
const [closeTime, setCloseTime] = useState(site?.closeTime || "22:00");
|
||||
const [isActive, setIsActive] = useState(site?.isActive ?? true);
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
onSave({ name, address, phone, openTime, closeTime, isActive });
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
|
||||
<div className="bg-white rounded-xl shadow-xl w-full max-w-md mx-4">
|
||||
<div className="flex items-center justify-between p-4 border-b">
|
||||
<h3 className="text-lg font-semibold text-primary-800">
|
||||
{site ? "Editar Sede" : "Nueva Sede"}
|
||||
</h3>
|
||||
<button onClick={onClose} className="text-primary-500 hover:text-primary-700">
|
||||
<X className="h-5 w-5" />
|
||||
</button>
|
||||
</div>
|
||||
<form onSubmit={handleSubmit} className="p-4 space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-primary-700 mb-1">Nombre</label>
|
||||
<Input value={name} onChange={(e) => setName(e.target.value)} required />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-primary-700 mb-1">Dirección</label>
|
||||
<Input value={address} onChange={(e) => setAddress(e.target.value)} required />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-primary-700 mb-1">Teléfono</label>
|
||||
<Input value={phone} onChange={(e) => setPhone(e.target.value)} />
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-primary-700 mb-1">Hora apertura</label>
|
||||
<Input type="time" value={openTime} onChange={(e) => setOpenTime(e.target.value)} />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-primary-700 mb-1">Hora cierre</label>
|
||||
<Input type="time" value={closeTime} onChange={(e) => setCloseTime(e.target.value)} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="isActive"
|
||||
checked={isActive}
|
||||
onChange={(e) => setIsActive(e.target.checked)}
|
||||
className="rounded border-primary-300"
|
||||
/>
|
||||
<label htmlFor="isActive" className="text-sm text-primary-700">Sede activa</label>
|
||||
</div>
|
||||
<div className="flex gap-3 pt-4">
|
||||
<Button type="button" variant="outline" onClick={onClose} className="flex-1">
|
||||
Cancelar
|
||||
</Button>
|
||||
<Button type="submit" disabled={loading} className="flex-1">
|
||||
{loading ? "Guardando..." : "Guardar"}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Court Form Modal Component
|
||||
function CourtFormModal({
|
||||
court,
|
||||
sites,
|
||||
onSave,
|
||||
onClose,
|
||||
loading,
|
||||
}: {
|
||||
court: Court | null;
|
||||
sites: Site[];
|
||||
onSave: (court: Partial<Court>) => void;
|
||||
onClose: () => void;
|
||||
loading: boolean;
|
||||
}) {
|
||||
const [name, setName] = useState(court?.name || "");
|
||||
const [siteId, setSiteId] = useState(court?.siteId || sites[0]?.id || "");
|
||||
const [type, setType] = useState(court?.type || "indoor");
|
||||
const [hourlyRate, setHourlyRate] = useState(court?.hourlyRate?.toString() || "300");
|
||||
const [peakHourlyRate, setPeakHourlyRate] = useState(court?.peakHourlyRate?.toString() || "");
|
||||
const [status, setStatus] = useState(court?.status || "active");
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
onSave({
|
||||
name,
|
||||
siteId,
|
||||
type,
|
||||
hourlyRate: parseFloat(hourlyRate),
|
||||
peakHourlyRate: peakHourlyRate ? parseFloat(peakHourlyRate) : null,
|
||||
status,
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
|
||||
<div className="bg-white rounded-xl shadow-xl w-full max-w-md mx-4">
|
||||
<div className="flex items-center justify-between p-4 border-b">
|
||||
<h3 className="text-lg font-semibold text-primary-800">
|
||||
{court ? "Editar Cancha" : "Nueva Cancha"}
|
||||
</h3>
|
||||
<button onClick={onClose} className="text-primary-500 hover:text-primary-700">
|
||||
<X className="h-5 w-5" />
|
||||
</button>
|
||||
</div>
|
||||
<form onSubmit={handleSubmit} className="p-4 space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-primary-700 mb-1">Nombre</label>
|
||||
<Input value={name} onChange={(e) => setName(e.target.value)} placeholder="Cancha 1" required />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-primary-700 mb-1">Sede</label>
|
||||
<select
|
||||
value={siteId}
|
||||
onChange={(e) => setSiteId(e.target.value)}
|
||||
className="w-full rounded-lg border border-primary-200 bg-white px-3 py-2 text-sm"
|
||||
required
|
||||
>
|
||||
{sites.map((site) => (
|
||||
<option key={site.id} value={site.id}>{site.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-primary-700 mb-1">Tipo</label>
|
||||
<select
|
||||
value={type}
|
||||
onChange={(e) => setType(e.target.value)}
|
||||
className="w-full rounded-lg border border-primary-200 bg-white px-3 py-2 text-sm"
|
||||
>
|
||||
<option value="indoor">Indoor</option>
|
||||
<option value="outdoor">Outdoor</option>
|
||||
<option value="covered">Techada</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-primary-700 mb-1">Precio/hora</label>
|
||||
<Input
|
||||
type="number"
|
||||
value={hourlyRate}
|
||||
onChange={(e) => setHourlyRate(e.target.value)}
|
||||
min="0"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-primary-700 mb-1">Precio hora pico</label>
|
||||
<Input
|
||||
type="number"
|
||||
value={peakHourlyRate}
|
||||
onChange={(e) => setPeakHourlyRate(e.target.value)}
|
||||
min="0"
|
||||
placeholder="Opcional"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-primary-700 mb-1">Estado</label>
|
||||
<select
|
||||
value={status}
|
||||
onChange={(e) => setStatus(e.target.value)}
|
||||
className="w-full rounded-lg border border-primary-200 bg-white px-3 py-2 text-sm"
|
||||
>
|
||||
<option value="active">Activa</option>
|
||||
<option value="maintenance">Mantenimiento</option>
|
||||
<option value="inactive">Inactiva</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="flex gap-3 pt-4">
|
||||
<Button type="button" variant="outline" onClick={onClose} className="flex-1">
|
||||
Cancelar
|
||||
</Button>
|
||||
<Button type="submit" disabled={loading} className="flex-1">
|
||||
{loading ? "Guardando..." : "Guardar"}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user