Initial commit: monorepo Naturcalabacera reservas (apps/api + apps/web + packages/shared)

apps/web/src/components/UserManagement.tsx

@@ -0,0 +1,337 @@
+import { useEffect, useState } from 'react';
+import { Loader2, Trash2, UserPlus, X, Check, AlertCircle, Shield, Eye, Users as UsersIcon } from 'lucide-react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { toast } from 'sonner';
+import { supabase } from '../lib/supabase';
+import type { UserRole } from '../types';
+
+interface UserProfileRow {
+  id: string;
+  email: string;
+  role: UserRole;
+  display_name: string | null;
+  created_at: string;
+}
+
+const ROLE_OPTIONS: { value: UserRole; label: string; description: string; icon: typeof Shield }[] = [
+  { value: 'admin', label: 'Admin', description: 'Acceso total y gestión de usuarios', icon: Shield },
+  { value: 'internal_staff', label: 'Staff', description: 'Gestión completa de reservas', icon: UsersIcon },
+  { value: 'external_availability_viewer', label: 'Viewer', description: 'Solo lee disponibilidad', icon: Eye },
+];
+
+const apiUrl = import.meta.env.VITE_API_URL;
+
+async function authFetch(path: string, init: RequestInit = {}): Promise<Response> {
+  const { data } = await supabase.auth.getSession();
+  const token = data.session?.access_token;
+  const headers = new Headers(init.headers);
+  headers.set('Content-Type', 'application/json');
+  if (token) headers.set('Authorization', `Bearer ${token}`);
+  return fetch(`${apiUrl}${path}`, { ...init, headers });
+}
+
+export function UserManagement() {
+  const [users, setUsers] = useState<UserProfileRow[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [inviteOpen, setInviteOpen] = useState(false);
+  const [savingId, setSavingId] = useState<string | null>(null);
+
+  const loadUsers = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await authFetch('/api/users');
+      if (!res.ok) {
+        const body = await res.json().catch(() => ({} as { error?: string }));
+        throw new Error(body?.error ?? `Error ${res.status}`);
+      }
+      const body = await res.json() as { users: UserProfileRow[] };
+      setUsers(body.users);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Error al cargar usuarios');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (!apiUrl) {
+      setError('VITE_API_URL no configurado. La gestión de usuarios necesita el API.');
+      setLoading(false);
+      return;
+    }
+    loadUsers();
+  }, []);
+
+  const handleRoleChange = async (userId: string, newRole: UserRole) => {
+    setSavingId(userId);
+    try {
+      const res = await authFetch(`/api/users/${userId}`, {
+        method: 'PATCH',
+        body: JSON.stringify({ role: newRole }),
+      });
+      if (!res.ok) {
+        const body = await res.json().catch(() => ({} as { error?: string }));
+        throw new Error(body?.error ?? 'Error al actualizar rol');
+      }
+      setUsers(prev => prev.map(u => u.id === userId ? { ...u, role: newRole } : u));
+      toast.success('Rol actualizado');
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : 'Error');
+    } finally {
+      setSavingId(null);
+    }
+  };
+
+  const handleDelete = async (user: UserProfileRow) => {
+    if (!confirm(`¿Eliminar a ${user.email}? Esta acción no se puede deshacer.`)) return;
+    setSavingId(user.id);
+    try {
+      const res = await authFetch(`/api/users/${user.id}`, { method: 'DELETE' });
+      if (!res.ok) {
+        const body = await res.json().catch(() => ({} as { error?: string }));
+        throw new Error(body?.error ?? 'Error al eliminar');
+      }
+      setUsers(prev => prev.filter(u => u.id !== user.id));
+      toast.success('Usuario eliminado');
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : 'Error');
+    } finally {
+      setSavingId(null);
+    }
+  };
+
+  return (
+    <div className="max-w-4xl mx-auto p-4 md:p-6">
+      <header className="mb-6 flex flex-col md:flex-row md:items-end justify-between gap-3">
+        <div>
+          <h1 className="text-3xl md:text-4xl font-black text-white tracking-tight mb-1">Usuarios</h1>
+          <p className="text-slate-400 text-sm">Gestiona accesos y roles del equipo.</p>
+        </div>
+        <button
+          type="button"
+          onClick={() => setInviteOpen(true)}
+          className="inline-flex items-center gap-2 px-5 py-3 bg-emerald-600 hover:bg-emerald-500 text-white font-bold rounded-2xl shadow-lg shadow-emerald-900/30 transition-all"
+        >
+          <UserPlus className="w-4 h-4" />
+          Invitar usuario
+        </button>
+      </header>
+
+      {error && (
+        <div className="mb-4 flex items-center gap-2 px-4 py-3 bg-red-950/40 border border-red-800 rounded-xl text-sm text-red-400">
+          <AlertCircle className="w-4 h-4" />
+          {error}
+        </div>
+      )}
+
+      {loading ? (
+        <div className="flex justify-center py-12">
+          <Loader2 className="w-6 h-6 text-slate-500 animate-spin" />
+        </div>
+      ) : (
+        <div className="bg-slate-800/40 border border-slate-700/50 rounded-2xl overflow-hidden">
+          <table className="w-full text-sm">
+            <thead>
+              <tr className="border-b border-slate-700/50 text-slate-400 uppercase text-xs tracking-wider">
+                <th className="px-4 py-3 text-left font-bold">Email / Nombre</th>
+                <th className="px-4 py-3 text-left font-bold">Rol</th>
+                <th className="px-4 py-3 text-left font-bold hidden md:table-cell">Creado</th>
+                <th className="px-4 py-3 text-right font-bold">Acciones</th>
+              </tr>
+            </thead>
+            <tbody>
+              {users.length === 0 ? (
+                <tr>
+                  <td colSpan={4} className="px-4 py-12 text-center text-slate-500">
+                    No hay usuarios registrados.
+                  </td>
+                </tr>
+              ) : users.map(user => (
+                <tr key={user.id} className="border-b border-slate-800/60 last:border-0 hover:bg-slate-800/30 transition-colors">
+                  <td className="px-4 py-3">
+                    <div className="font-semibold text-slate-100">{user.display_name ?? user.email}</div>
+                    {user.display_name && (
+                      <div className="text-xs text-slate-500">{user.email}</div>
+                    )}
+                  </td>
+                  <td className="px-4 py-3">
+                    <select
+                      value={user.role}
+                      disabled={savingId === user.id}
+                      onChange={e => handleRoleChange(user.id, e.target.value as UserRole)}
+                      className="bg-slate-700 border border-slate-600 rounded-lg px-3 py-1.5 text-slate-100 text-xs font-medium focus:outline-none focus:ring-2 focus:ring-emerald-500/40"
+                    >
+                      {ROLE_OPTIONS.map(opt => (
+                        <option key={opt.value} value={opt.value}>{opt.label}</option>
+                      ))}
+                    </select>
+                  </td>
+                  <td className="px-4 py-3 text-slate-400 text-xs hidden md:table-cell">
+                    {new Date(user.created_at).toLocaleDateString('es-ES')}
+                  </td>
+                  <td className="px-4 py-3 text-right">
+                    <button
+                      type="button"
+                      disabled={savingId === user.id}
+                      onClick={() => handleDelete(user)}
+                      className="inline-flex p-2 text-slate-500 hover:text-red-400 transition-colors"
+                      title="Eliminar"
+                    >
+                      {savingId === user.id ? <Loader2 className="w-4 h-4 animate-spin" /> : <Trash2 className="w-4 h-4" />}
+                    </button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+
+      <AnimatePresence>
+        {inviteOpen && (
+          <InviteModal
+            onClose={() => setInviteOpen(false)}
+            onInvited={(newUser) => {
+              setUsers(prev => [newUser, ...prev]);
+              setInviteOpen(false);
+              toast.success('Invitación enviada');
+            }}
+          />
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}
+
+interface InviteModalProps {
+  onClose: () => void;
+  onInvited: (u: UserProfileRow) => void;
+}
+
+function InviteModal({ onClose, onInvited }: InviteModalProps) {
+  const [email, setEmail] = useState('');
+  const [role, setRole] = useState<UserRole>('internal_staff');
+  const [displayName, setDisplayName] = useState('');
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setSubmitting(true);
+    setError(null);
+    try {
+      const res = await authFetch('/api/users/invite', {
+        method: 'POST',
+        body: JSON.stringify({ email, role, display_name: displayName || undefined }),
+      });
+      const body = await res.json().catch(() => ({} as { error?: string; user?: UserProfileRow }));
+      if (!res.ok) throw new Error(body?.error ?? 'Error al invitar');
+      if (body.user) onInvited(body.user);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Error');
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <>
+      <motion.div
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        exit={{ opacity: 0 }}
+        onClick={onClose}
+        className="fixed inset-0 bg-black/60 backdrop-blur-md z-40"
+      />
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        exit={{ opacity: 0, y: 20 }}
+        className="fixed inset-0 z-50 flex items-center justify-center p-4 pointer-events-none"
+      >
+        <form
+          onSubmit={handleSubmit}
+          className="bg-slate-900 border border-slate-700 rounded-3xl p-6 w-full max-w-md pointer-events-auto shadow-2xl space-y-4"
+        >
+          <div className="flex items-start justify-between mb-2">
+            <div>
+              <h2 className="text-2xl font-bold text-white">Invitar usuario</h2>
+              <p className="text-sm text-slate-400 mt-0.5">Recibirá un correo con magic link para acceder.</p>
+            </div>
+            <button type="button" onClick={onClose} className="p-2 hover:bg-slate-800 rounded-full transition-colors">
+              <X className="w-5 h-5 text-slate-400" />
+            </button>
+          </div>
+
+          <div>
+            <label className="block text-xs font-bold text-slate-400 mb-1.5 uppercase tracking-wider">Email</label>
+            <input
+              type="email"
+              required
+              value={email}
+              onChange={e => setEmail(e.target.value)}
+              placeholder="usuario@ejemplo.com"
+              className="w-full px-4 py-3 bg-slate-800 border border-slate-700 rounded-xl text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/40"
+            />
+          </div>
+
+          <div>
+            <label className="block text-xs font-bold text-slate-400 mb-1.5 uppercase tracking-wider">Nombre (opcional)</label>
+            <input
+              type="text"
+              value={displayName}
+              onChange={e => setDisplayName(e.target.value)}
+              placeholder="Nombre visible..."
+              className="w-full px-4 py-3 bg-slate-800 border border-slate-700 rounded-xl text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/40"
+            />
+          </div>
+
+          <div>
+            <label className="block text-xs font-bold text-slate-400 mb-2 uppercase tracking-wider">Rol</label>
+            <div className="space-y-2">
+              {ROLE_OPTIONS.map(opt => {
+                const Icon = opt.icon;
+                return (
+                  <label key={opt.value} className={`flex items-center gap-3 p-3 rounded-xl border cursor-pointer transition-all ${role === opt.value ? 'border-emerald-500 bg-emerald-900/20' : 'border-slate-700 bg-slate-800 hover:border-slate-600'}`}>
+                    <input
+                      type="radio"
+                      name="role"
+                      value={opt.value}
+                      checked={role === opt.value}
+                      onChange={() => setRole(opt.value)}
+                      className="sr-only"
+                    />
+                    <Icon className="w-5 h-5 text-emerald-400 flex-shrink-0" />
+                    <div className="flex-1">
+                      <div className="font-bold text-slate-100 text-sm">{opt.label}</div>
+                      <div className="text-xs text-slate-400">{opt.description}</div>
+                    </div>
+                    {role === opt.value && <Check className="w-4 h-4 text-emerald-400" />}
+                  </label>
+                );
+              })}
+            </div>
+          </div>
+
+          {error && (
+            <div className="flex items-center gap-2 px-4 py-3 bg-red-950/40 border border-red-800 rounded-xl text-sm text-red-400">
+              <AlertCircle className="w-4 h-4" />
+              {error}
+            </div>
+          )}
+
+          <button
+            type="submit"
+            disabled={submitting || !email}
+            className="w-full py-3 bg-emerald-600 hover:bg-emerald-500 disabled:opacity-50 text-white font-bold rounded-2xl flex items-center justify-center gap-2 transition-all"
+          >
+            {submitting ? <Loader2 className="w-4 h-4 animate-spin" /> : <UserPlus className="w-4 h-4" />}
+            Enviar invitación
+          </button>
+        </form>
+      </motion.div>
+    </>
+  );
+}