Add admin portal

2026-06-10 09:39:20 -03:00
parent c278c78e3d
commit c1c2f18471
50 changed files with 2713 additions and 69 deletions
--- a/apps/frontend/src/features/admin/admin-page.tsx
+++ b/apps/frontend/src/features/admin/admin-page.tsx
@@ -0,0 +1,130 @@
+import { apiClient } from '@/lib/api-client';
+import { useQuery } from '@tanstack/react-query';
+import { Link, useLocation } from '@tanstack/react-router';
+import { Building2, CalendarDays, Crosshair, Users } from 'lucide-react';
+import { AdminLayout } from './admin-layout';
+
+export function AdminPage() {
+  const location = useLocation();
+
+  const complexesQuery = useQuery({
+    queryKey: ['admin-complexes'],
+    queryFn: () => apiClient.admin.listComplexes(),
+  });
+
+  const usersQuery = useQuery({
+    queryKey: ['admin-users'],
+    queryFn: () => apiClient.admin.listUsers(),
+  });
+
+  const stats = {
+    totalComplexes: complexesQuery.data?.length ?? 0,
+    totalUsers: usersQuery.data?.length ?? 0,
+    totalCourts: complexesQuery.data?.reduce((sum, c) => sum + c.courtCount, 0) ?? 0,
+    totalBookings:
+      complexesQuery.data?.reduce((sum, c) => sum + Math.round(c.avgBookingsPerDay * 30), 0) ?? 0,
+  };
+
+  const cards = [
+    {
+      label: 'Complejos',
+      value: stats.totalComplexes,
+      icon: Building2,
+      color: 'text-blue-600',
+      bg: 'bg-blue-100 dark:bg-blue-900/30',
+    },
+    {
+      label: 'Usuarios',
+      value: stats.totalUsers,
+      icon: Users,
+      color: 'text-emerald-600',
+      bg: 'bg-emerald-100 dark:bg-emerald-900/30',
+    },
+    {
+      label: 'Canchas',
+      value: stats.totalCourts,
+      icon: Crosshair,
+      color: 'text-purple-600',
+      bg: 'bg-purple-100 dark:bg-purple-900/30',
+    },
+    {
+      label: 'Reservas (30d)',
+      value: stats.totalBookings.toLocaleString(),
+      icon: CalendarDays,
+      color: 'text-amber-600',
+      bg: 'bg-amber-100 dark:bg-amber-900/30',
+    },
+  ];
+
+  return (
+    <AdminLayout currentPath={location.pathname}>
+      <div className="mb-8">
+        <h1 className="text-2xl font-bold tracking-tight">Panel de Administración</h1>
+        <p className="mt-1 text-sm text-muted-foreground">
+          Gestioná complejos, planes y usuarios de Playzer.
+        </p>
+      </div>
+
+      <div className="mb-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+        {cards.map((card) => {
+          const Icon = card.icon;
+
+          return (
+            <div
+              key={card.label}
+              className="rounded-2xl border border-border/60 bg-card p-5 shadow-sm"
+            >
+              <div className="flex items-center gap-3">
+                <div className={`rounded-xl p-2.5 ${card.bg}`}>
+                  <Icon className={`size-5 ${card.color}`} />
+                </div>
+
+                <div>
+                  <p className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
+                    {card.label}
+                  </p>
+                  <p className="text-2xl font-bold">{card.value}</p>
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      <div className="mb-6">
+        <h2 className="mb-3 text-lg font-semibold">Acceso rápido</h2>
+
+        <div className="grid gap-3 sm:grid-cols-3">
+          <Link
+            to="/admin/complexes"
+            className="rounded-2xl border border-border/60 bg-card p-4 shadow-sm transition-colors hover:bg-accent"
+          >
+            <Building2 className="mb-2 size-5 text-blue-600" />
+            <p className="font-medium">Complejos</p>
+            <p className="text-xs text-muted-foreground">
+              {stats.totalComplexes} complejos registrados
+            </p>
+          </Link>
+
+          <Link
+            to="/admin/plans"
+            className="rounded-2xl border border-border/60 bg-card p-4 shadow-sm transition-colors hover:bg-accent"
+          >
+            <CalendarDays className="mb-2 size-5 text-emerald-600" />
+            <p className="font-medium">Planes</p>
+            <p className="text-xs text-muted-foreground">Administrar suscripciones</p>
+          </Link>
+
+          <Link
+            to="/admin/users"
+            className="rounded-2xl border border-border/60 bg-card p-4 shadow-sm transition-colors hover:bg-accent"
+          >
+            <Users className="mb-2 size-5 text-purple-600" />
+            <p className="font-medium">Usuarios</p>
+            <p className="text-xs text-muted-foreground">{stats.totalUsers} usuarios registrados</p>
+          </Link>
+        </div>
+      </div>
+    </AdminLayout>
+  );
+}