feat(club-006): club admin: dashboard, members, movements and settings

project/apps/admin/src/app/(dashboard)/club/[id]/page.tsx

@@ -0,0 +1,175 @@
+'use client';
+import { useState, useEffect, useCallback } from 'react';
+import { useParams } from 'next/navigation';
+import Link from 'next/link';
+import { clubAdminApi } from '@/lib/api-client';
+
+const TX_LABELS: Record<string, string> = {
+  earn: 'Cashback',
+  redeem: 'Canje',
+  refund: 'Reembolso',
+  bonus: 'Bono',
+  adjustment: 'Ajuste',
+};
+
+const TX_COLORS: Record<string, string> = {
+  earn: 'text-green-700',
+  redeem: 'text-blue-700',
+  refund: 'text-orange-700',
+  bonus: 'text-purple-700',
+  adjustment: 'text-gray-700',
+};
+
+function formatPrice(cents: number) {
+  return `€${(cents / 100).toFixed(2)}`;
+}
+
+function formatDate(dateStr: string) {
+  return new Date(dateStr).toLocaleString('es-ES', {
+    day: 'numeric', month: 'short', year: 'numeric',
+    hour: '2-digit', minute: '2-digit',
+  });
+}
+
+interface MemberDetail {
+  id: string;
+  userId: string | null;
+  userEmail: string | null;
+  memberCode: string;
+  status: 'active' | 'blocked' | 'merged';
+  tierCode: string;
+  currentBalanceCents: number;
+  isAnonymous: boolean;
+  createdAt: string;
+  updatedAt: string;
+}
+
+interface Transaction {
+  id: string;
+  memberId: string;
+  saleId: string | null;
+  storeId: string | null;
+  type: string;
+  amountCents: number;
+  balanceDeltaCents: number;
+  createdAt: string;
+}
+
+export default function ClubMemberPage() {
+  const { id } = useParams<{ id: string }>();
+  const [member, setMember] = useState<MemberDetail | null>(null);
+  const [transactions, setTransactions] = useState<Transaction[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    setError('');
+    try {
+      const data = await clubAdminApi.getMemberMovements(id);
+      setMember(data.member as MemberDetail);
+      setTransactions(data.items as Transaction[]);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Error al cargar');
+    } finally {
+      setLoading(false);
+    }
+  }, [id]);
+
+  useEffect(() => { void load(); }, [load]);
+
+  if (loading) {
+    return (
+      <div className="p-8 text-center text-gray-400">
+        <div className="inline-block animate-spin h-5 w-5 border-2 border-gray-300 border-t-[#2D6A4F] rounded-full" />
+        <p className="mt-2 text-sm">Cargando...</p>
+      </div>
+    );
+  }
+
+  if (error || !member) {
+    return (
+      <div className="p-8 text-center">
+        <p className="text-red-600 text-sm mb-3">{error || 'Socio no encontrado'}</p>
+        <Link href="/club" className="text-sm text-[#2D6A4F] hover:underline">← Volver al Club</Link>
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-8">
+      <div className="mb-6">
+        <Link href="/club" className="text-sm text-[#2D6A4F] hover:underline mb-4 inline-block">← Club de Clientes</Link>
+        <div className="flex items-start justify-between">
+          <div>
+            <h1 className="text-2xl font-bold text-gray-900">{member.memberCode}</h1>
+            <p className="text-sm text-gray-500 mt-1">
+              {member.userEmail ?? 'Socio anónimo'}
+              {!member.userId && <span className="ml-2 text-xs bg-amber-100 text-amber-700 px-2 py-0.5 rounded">Sin cuenta</span>}
+            </p>
+          </div>
+          <div className="text-right">
+            <p className="text-3xl font-bold text-gray-900">{formatPrice(member.currentBalanceCents)}</p>
+            <p className="text-xs text-gray-500">Saldo actual</p>
+            <span className={`inline-block mt-1 px-2 py-0.5 rounded-full text-xs font-medium ${
+              member.status === 'active' ? 'bg-green-100 text-green-800' :
+              member.status === 'blocked' ? 'bg-red-100 text-red-800' :
+              'bg-gray-100 text-gray-600'
+            }`}>
+              {member.status}
+            </span>
+          </div>
+        </div>
+      </div>
+
+      {/* Meta */}
+      <div className="bg-white border border-gray-200 rounded-xl p-5 mb-6">
+        <h2 className="mb-4 text-lg font-semibold text-gray-900">Datos del socio</h2>
+        <div className="grid grid-cols-2 gap-4 text-sm">
+          <div><span className="text-gray-500">ID:</span> <span className="font-mono text-gray-700">{member.id}</span></div>
+          <div><span className="text-gray-500">Código:</span> <span className="font-mono text-gray-700">{member.memberCode}</span></div>
+          <div><span className="text-gray-500">Email:</span> <span className="text-gray-700">{member.userEmail ?? '—'}</span></div>
+          <div><span className="text-gray-500">User ID:</span> <span className="font-mono text-gray-700">{member.userId ?? '—'}</span></div>
+          <div><span className="text-gray-500">Alta:</span> <span className="text-gray-700">{formatDate(member.createdAt)}</span></div>
+          <div><span className="text-gray-500">Última actualización:</span> <span className="text-gray-700">{formatDate(member.updatedAt)}</span></div>
+        </div>
+      </div>
+
+      {/* Movements */}
+      <div className="bg-white border border-gray-200 rounded-xl overflow-hidden">
+        <div className="px-5 py-4 border-b border-gray-200">
+          <h2 className="text-lg font-semibold text-gray-900">Movimientos</h2>
+        </div>
+        {transactions.length === 0 ? (
+          <div className="p-12 text-center text-gray-400 text-sm">Sin movimientos</div>
+        ) : (
+          <table className="w-full">
+            <thead>
+              <tr className="bg-gray-50 border-b border-gray-200">
+                {['Fecha', 'Tipo', 'Importe', 'Delta'].map((h) => (
+                  <th key={h} className="text-left text-xs font-semibold text-gray-500 uppercase tracking-wide px-5 py-3">{h}</th>
+                ))}
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-gray-50">
+              {transactions.map((tx) => (
+                <tr key={tx.id} className="hover:bg-gray-50">
+                  <td className="px-5 py-3 text-sm text-gray-600">{formatDate(tx.createdAt)}</td>
+                  <td className="px-5 py-3">
+                    <span className={`text-sm font-medium ${TX_COLORS[tx.type] ?? 'text-gray-700'}`}>
+                      {TX_LABELS[tx.type] ?? tx.type}
+                    </span>
+                  </td>
+                  <td className="px-5 py-3 text-sm text-gray-700">{formatPrice(tx.amountCents)}</td>
+                  <td className={`px-5 py-3 text-sm font-bold ${tx.balanceDeltaCents >= 0 ? 'text-green-700' : 'text-red-700'}`}>
+                    {tx.balanceDeltaCents >= 0 ? '+' : ''}{formatPrice(tx.balanceDeltaCents)}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        )}
+      </div>
+    </div>
+  );
+}

project/apps/admin/src/app/(dashboard)/club/page.tsx

@@ -0,0 +1,204 @@
+'use client';
+import { useState, useEffect, useCallback } from 'react';
+import Link from 'next/link';
+import { clubAdminApi } from '@/lib/api-client';
+
+type MemberStatus = 'active' | 'blocked' | 'merged';
+
+const STATUS_LABELS: Record<MemberStatus, string> = {
+  active: 'Activo',
+  blocked: 'Bloqueado',
+  merged: 'Fusionado',
+};
+
+const STATUS_COLORS: Record<MemberStatus, string> = {
+  active: 'bg-green-100 text-green-800',
+  blocked: 'bg-red-100 text-red-800',
+  merged: 'bg-gray-100 text-gray-600',
+};
+
+function formatPrice(cents: number) {
+  return `€${(cents / 100).toFixed(2)}`;
+}
+
+function timeAgo(dateStr: string) {
+  const date = new Date(dateStr);
+  const now = new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
+  if (diffDays === 0) return 'Hoy';
+  if (diffDays === 1) return 'Ayer';
+  if (diffDays < 30) return `Hace ${diffDays} días`;
+  return date.toLocaleDateString('es-ES', { day: 'numeric', month: 'short' });
+}
+
+export default function ClubPage() {
+  const [members, setMembers] = useState<Array<{
+    id: string; userId: string | null; userEmail: string | null;
+    memberCode: string; status: MemberStatus; tierCode: string;
+    currentBalanceCents: number; createdAt: string;
+  }>>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+  const [search, setSearch] = useState('');
+  const [debouncedSearch, setDebouncedSearch] = useState('');
+  const [filterStatus, setFilterStatus] = useState('');
+  const [total, setTotal] = useState(0);
+  const [offset, setOffset] = useState(0);
+  const limit = 20;
+
+  useEffect(() => {
+    const t = setTimeout(() => setDebouncedSearch(search), 400);
+    return () => clearTimeout(t);
+  }, [search]);
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    setError('');
+    try {
+      const data = await clubAdminApi.listMembers({
+        q: debouncedSearch || undefined,
+        status: filterStatus || undefined,
+        limit,
+        offset,
+      });
+      setMembers(data.items as typeof members);
+      setTotal(data.total);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Error al cargar');
+    } finally {
+      setLoading(false);
+    }
+  }, [debouncedSearch, filterStatus, offset]);
+
+  useEffect(() => { void load(); }, [load]);
+
+  const totalPages = Math.ceil(total / limit);
+
+  return (
+    <div className="p-8">
+      {/* Header */}
+      <div className="mb-6 flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold text-gray-900">Club de Clientes</h1>
+          <p className="text-sm text-gray-500 mt-0.5">{total} socios</p>
+        </div>
+      </div>
+
+      {/* Filters */}
+      <div className="flex gap-3 mb-6 flex-wrap">
+        <div className="relative flex-1 max-w-xs">
+          <input
+            type="search"
+            placeholder="Buscar por código o email..."
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            className="w-full pl-9 pr-4 py-2.5 border border-gray-300 rounded-xl text-sm focus:ring-2 focus:ring-[#2D6A4F] focus:border-transparent outline-none"
+          />
+          <svg
+            className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400"
+            fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}
+          >
+            <circle cx="11" cy="11" r="8" /><path d="M21 21l-4.35-4.35" />
+          </svg>
+        </div>
+        <select
+          value={filterStatus}
+          onChange={(e) => { setFilterStatus(e.target.value); setOffset(0); }}
+          className="px-3 py-2.5 border border-gray-300 rounded-xl text-sm focus:ring-2 focus:ring-[#2D6A4F] focus:border-transparent outline-none bg-white"
+        >
+          <option value="">Todos los estados</option>
+          <option value="active">Activo</option>
+          <option value="blocked">Bloqueado</option>
+          <option value="merged">Fusionado</option>
+        </select>
+      </div>
+
+      {/* Table */}
+      <div className="bg-white border border-gray-200 rounded-xl overflow-hidden">
+        {loading ? (
+          <div className="text-center text-gray-400 py-12">
+            <div className="inline-block animate-spin h-5 w-5 border-2 border-gray-300 border-t-[#2D6A4F] rounded-full" />
+            <p className="mt-2 text-sm">Cargando...</p>
+          </div>
+        ) : error ? (
+          <div className="text-center py-12">
+            <p className="text-red-600 text-sm mb-3">{error}</p>
+            <button onClick={() => void load()} className="text-sm text-[#2D6A4F] hover:underline">
+              Reintentar
+            </button>
+          </div>
+        ) : members.length === 0 ? (
+          <div className="p-12 text-center">
+            <p className="text-4xl mb-3">🎫</p>
+            <p className="text-gray-500 text-sm">No hay socios del Club</p>
+          </div>
+        ) : (
+          <>
+            <table className="w-full">
+              <thead>
+                <tr className="bg-gray-50 border-b border-gray-200">
+                  {['Código', 'Email', 'Estado', 'Saldo', 'Alta'].map((h) => (
+                    <th key={h} className="text-left text-xs font-semibold text-gray-500 uppercase tracking-wide px-4 py-3">{h}</th>
+                  ))}
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-gray-50">
+                {members.map((m) => (
+                  <tr key={m.id} className="hover:bg-gray-50 transition-colors">
+                    <td className="px-4 py-3">
+                      <Link href={`/club/${m.id}`} className="text-sm font-mono text-[#2D6A4F] hover:underline">
+                        {m.memberCode}
+                      </Link>
+                    </td>
+                    <td className="px-4 py-3">
+                      <p className="text-sm text-gray-600">{m.userEmail ?? '—'}</p>
+                      {m.userEmail && <p className="text-xs text-gray-400">Anónimo vinculado</p>}
+                    </td>
+                    <td className="px-4 py-3">
+                      <span className={`inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-xs font-medium ${STATUS_COLORS[m.status]}`}>
+                        <span className="w-1.5 h-1.5 rounded-full bg-current" />
+                        {STATUS_LABELS[m.status]}
+                      </span>
+                    </td>
+                    <td className="px-4 py-3">
+                      <p className="text-sm font-bold text-gray-900">{formatPrice(m.currentBalanceCents)}</p>
+                    </td>
+                    <td className="px-4 py-3">
+                      <p className="text-sm text-gray-600">{timeAgo(m.createdAt)}</p>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+
+            {/* Pagination */}
+            {totalPages > 1 && (
+              <div className="flex items-center justify-between px-4 py-3 border-t border-gray-200">
+                <p className="text-xs text-gray-500">
+                  {offset + 1}–{Math.min(offset + limit, total)} de {total}
+                </p>
+                <div className="flex gap-1">
+                  <button
+                    onClick={() => setOffset(Math.max(0, offset - limit))}
+                    disabled={offset === 0}
+                    className="px-3 py-1 text-xs border border-gray-300 rounded-lg disabled:opacity-40 hover:bg-gray-50"
+                  >
+                    ← Anterior
+                  </button>
+                  <button
+                    onClick={() => setOffset(offset + limit)}
+                    disabled={offset + limit >= total}
+                    className="px-3 py-1 text-xs border border-gray-300 rounded-lg disabled:opacity-40 hover:bg-gray-50"
+                  >
+                    Siguiente →
+                  </button>
+                </div>
+              </div>
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  );
+}