kybernus 3.0.1 → 3.2.0

package/templates/ecommerce/apps/web/src/modules/admin/__tests__/UsersAdminPage.test.tsx

@@ -0,0 +1,85 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { MemoryRouter } from 'react-router-dom';
+import { UsersAdminPage } from '../pages/UsersAdminPage';
+
+const mockFetch = jest.fn();
+beforeAll(() => { global.fetch = mockFetch; });
+beforeEach(() => mockFetch.mockClear());
+
+function renderPage() {
+  return render(
+    <MemoryRouter>
+      <UsersAdminPage />
+    </MemoryRouter>,
+  );
+}
+
+const users = [
+  { id: 'u1', name: 'Alice', email: 'alice@test.com', role: 'CUSTOMER', createdAt: '2026-01-01T00:00:00.000Z' },
+  { id: 'u2', name: 'Bob', email: 'bob@test.com', role: 'ADMIN', createdAt: '2026-01-02T00:00:00.000Z' },
+];
+
+describe('UsersAdminPage', () => {
+  it('renderiza lista de usuários com nome, email e role', async () => {
+    mockFetch.mockResolvedValue({
+      ok: true,
+      json: async () => ({ items: users, nextCursor: null }),
+    });
+    renderPage();
+    await waitFor(() =>
+      expect(screen.getByText('Alice')).toBeInTheDocument(),
+    );
+    expect(screen.getByText('alice@test.com')).toBeInTheDocument();
+    expect(screen.getByText('Bob')).toBeInTheDocument();
+    expect(screen.getAllByText('CUSTOMER').length).toBeGreaterThanOrEqual(1);
+  });
+
+  it('exibe mensagem de vazio quando não há usuários', async () => {
+    mockFetch.mockResolvedValue({
+      ok: true,
+      json: async () => ({ items: [], nextCursor: null }),
+    });
+    renderPage();
+    await waitFor(() =>
+      expect(screen.getByText(/nenhum usuário/i)).toBeInTheDocument(),
+    );
+  });
+
+  it('filtra por role ao selecionar no dropdown', async () => {
+    const user = userEvent.setup();
+    // First call returns all, second (after filter) returns only CUSTOMER
+    mockFetch
+      .mockResolvedValueOnce({
+        ok: true,
+        json: async () => ({ items: users, nextCursor: null }),
+      })
+      .mockResolvedValueOnce({
+        ok: true,
+        json: async () => ({
+          items: [users[0]],
+          nextCursor: null,
+        }),
+      });
+    renderPage();
+    await waitFor(() => expect(screen.getByText('Alice')).toBeInTheDocument());
+
+    const select = screen.getByRole('combobox');
+    await user.selectOptions(select, 'CUSTOMER');
+
+    await waitFor(() =>
+      expect(mockFetch).toHaveBeenCalledWith(
+        expect.stringContaining('role=CUSTOMER'),
+        expect.any(Object),
+      ),
+    );
+  });
+
+  it('exibe erro ao falhar requisição', async () => {
+    mockFetch.mockResolvedValue({ ok: false, status: 500 });
+    renderPage();
+    await waitFor(() =>
+      expect(screen.getByRole('alert')).toBeInTheDocument(),
+    );
+  });
+});

package/templates/ecommerce/apps/web/src/modules/admin/pages/CouponsAdminPage.tsx

@@ -0,0 +1,179 @@
+import { useEffect, useState } from 'react';
+import { apiFetch } from '../../../shared/lib/apiFetch';
+import { usePageTitle } from '../../../shared/hooks/usePageTitle';
+
+type DiscountType = 'percent' | 'fixed';
+
+interface Coupon {
+  id: string;
+  code: string;
+  discountType: DiscountType;
+  discountValue: number;
+  minOrderValue: number;
+  usageLimit: number | null;
+  usageCount: number;
+  expiresAt: string | null;
+}
+
+function formatDiscount(coupon: Coupon): string {
+  if (coupon.discountType === 'percent') return `${coupon.discountValue}%`;
+  return coupon.discountValue.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' });
+}
+
+export function CouponsAdminPage() {
+  usePageTitle('Cupons');
+  const [coupons, setCoupons] = useState<Coupon[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  // Form state
+  const [code, setCode] = useState('');
+  const [discountType, setDiscountType] = useState<DiscountType>('percent');
+  const [discountValue, setDiscountValue] = useState('');
+  const [usageLimit, setUsageLimit] = useState('');
+  const [submitting, setSubmitting] = useState(false);
+  const [formError, setFormError] = useState<string | null>(null);
+
+  function loadCoupons() {
+    setLoading(true);
+    apiFetch<{ items: Coupon[] }>('/api/admin/coupons')
+      .then((data) => {
+        setCoupons(data.items);
+        setLoading(false);
+      })
+      .catch(() => {
+        setError('Erro ao carregar cupons');
+        setLoading(false);
+      });
+  }
+
+  useEffect(() => {
+    loadCoupons();
+  }, []);
+
+  async function handleCreate(e: React.FormEvent) {
+    e.preventDefault();
+    setFormError(null);
+    setSubmitting(true);
+    try {
+      await apiFetch('/api/admin/coupons', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          code: code.toUpperCase(),
+          discountType,
+          discountValue: Number(discountValue),
+          minOrderValue: 0,
+          usageLimit: usageLimit ? Number(usageLimit) : null,
+          expiresAt: null,
+        }),
+      });
+      setCode('');
+      setDiscountValue('');
+      setUsageLimit('');
+      loadCoupons();
+    } catch {
+      setFormError('Erro ao criar cupom');
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  async function handleDelete(id: string) {
+    await apiFetch(`/api/admin/coupons/${id}`, { method: 'DELETE' });
+    loadCoupons();
+  }
+
+  return (
+    <main>
+      <h1>Cupons</h1>
+
+      <section aria-label="Novo cupom">
+        <h2>Novo Cupom</h2>
+        {formError && <p role="alert">{formError}</p>}
+        <form onSubmit={handleCreate}>
+          <label htmlFor="coupon-code">Código</label>
+          <input
+            id="coupon-code"
+            type="text"
+            value={code}
+            onChange={(e) => setCode(e.target.value)}
+            required
+          />
+
+          <label htmlFor="coupon-type">Tipo</label>
+          <select
+            id="coupon-type"
+            value={discountType}
+            onChange={(e) => setDiscountType(e.target.value as DiscountType)}
+          >
+            <option value="percent">Percentual</option>
+            <option value="fixed">Valor fixo</option>
+          </select>
+
+          <label htmlFor="coupon-value">Valor</label>
+          <input
+            id="coupon-value"
+            type="number"
+            min="0.01"
+            step="0.01"
+            value={discountValue}
+            onChange={(e) => setDiscountValue(e.target.value)}
+            required
+          />
+
+          <label htmlFor="coupon-limit">Limite de uso</label>
+          <input
+            id="coupon-limit"
+            type="number"
+            min="1"
+            value={usageLimit}
+            onChange={(e) => setUsageLimit(e.target.value)}
+            placeholder="Ilimitado"
+          />
+
+          <button type="submit" disabled={submitting}>
+            Criar Cupom
+          </button>
+        </form>
+      </section>
+
+      {loading && <p>Carregando...</p>}
+      {error && <p role="alert">{error}</p>}
+
+      {!loading && !error && (
+        <table>
+          <thead>
+            <tr>
+              <th>Código</th>
+              <th>Desconto</th>
+              <th>Limite</th>
+              <th>Uso</th>
+              <th>Validade</th>
+              <th>Ações</th>
+            </tr>
+          </thead>
+          <tbody>
+            {coupons.map((coupon) => (
+              <tr key={coupon.id}>
+                <td>{coupon.code}</td>
+                <td>{formatDiscount(coupon)}</td>
+                <td>{coupon.usageLimit ?? '∞'}</td>
+                <td>{coupon.usageCount}</td>
+                <td>{coupon.expiresAt ? new Date(coupon.expiresAt).toLocaleDateString('pt-BR') : '—'}</td>
+                <td>
+                  <button
+                    aria-label={`Excluir cupom ${coupon.code}`}
+                    onClick={() => handleDelete(coupon.id)}
+                  >
+                    Excluir
+                  </button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      )}
+    </main>
+  );
+}

package/templates/ecommerce/apps/web/src/modules/admin/pages/DashboardPage.tsx

@@ -0,0 +1,58 @@
+import { useEffect, useState } from 'react';
+import { apiFetch } from '../../../shared/lib/apiFetch';
+import { usePageTitle } from '../../../shared/hooks/usePageTitle';
+
+interface DashboardStats {
+  totalRevenue: number;
+  totalOrders: number;
+  totalCustomers: number;
+  avgOrderValue: number;
+}
+
+function formatBRL(value: number) {
+  return value.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' });
+}
+
+export function DashboardPage() {
+  usePageTitle('Dashboard');
+  const [stats, setStats] = useState<DashboardStats | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    apiFetch<DashboardStats>('/api/admin/dashboard/stats')
+      .then((data) => {
+        setStats(data);
+        setLoading(false);
+      })
+      .catch(() => {
+        setError('Erro ao carregar estatísticas');
+        setLoading(false);
+      });
+  }, []);
+
+  if (loading) return <p style={{ marginTop: '2rem', color: '#6b7280' }}>Carregando...</p>;
+  if (error || !stats) return <p role="alert" style={{ color: '#ef4444' }}>{error ?? 'Erro desconhecido'}</p>;
+
+  const statCards = [
+    { label: 'Receita Total', value: formatBRL(stats.totalRevenue), icon: '💰', color: '#10b981' },
+    { label: 'Total de Pedidos', value: String(stats.totalOrders), icon: '📦', color: '#6366f1' },
+    { label: 'Total de Clientes', value: String(stats.totalCustomers), icon: '👥', color: '#f59e0b' },
+    { label: 'Ticket Médio', value: formatBRL(stats.avgOrderValue), icon: '📊', color: '#3b82f6' },
+  ];
+
+  return (
+    <main>
+      <h1 style={{ marginBottom: '1.75rem' }}>Dashboard</h1>
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(210px, 1fr))', gap: '1.25rem' }}>
+        {statCards.map((card) => (
+          <div key={card.label} style={{ background: '#fff', border: '1px solid #e5e7eb', borderRadius: '0.875rem', padding: '1.25rem 1.5rem', boxShadow: '0 1px 3px rgba(0,0,0,0.06)' }}>
+            <div style={{ fontSize: '1.75rem', marginBottom: '0.5rem' }}>{card.icon}</div>
+            <p style={{ fontSize: '0.8rem', fontWeight: 500, color: '#6b7280', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: '0.375rem' }}>{card.label}</p>
+            <p style={{ fontSize: '1.5rem', fontWeight: 700, color: card.color }}>{card.value}</p>
+          </div>
+        ))}
+      </div>
+    </main>
+  );
+}

package/templates/ecommerce/apps/web/src/modules/admin/pages/OrdersAdminPage.tsx

@@ -0,0 +1,178 @@
+import { useEffect, useState } from 'react';
+import { apiFetch } from '../../../shared/lib/apiFetch';
+import { usePageTitle } from '../../../shared/hooks/usePageTitle';
+
+type OrderStatus = 'PENDING' | 'PAID' | 'SHIPPED' | 'DELIVERED' | 'CANCELLED';
+
+interface Order {
+  id: string;
+  userId: string;
+  status: OrderStatus;
+  total: number;
+  trackingCode: string | null;
+  createdAt: string;
+}
+
+const STATUS_OPTIONS: OrderStatus[] = ['PENDING', 'PAID', 'SHIPPED', 'DELIVERED', 'CANCELLED'];
+
+const STATUS_COLORS: Record<OrderStatus, { bg: string; color: string }> = {
+  PENDING:   { bg: '#fef3c7', color: '#92400e' },
+  PAID:      { bg: '#dbeafe', color: '#1e40af' },
+  SHIPPED:   { bg: '#ede9fe', color: '#5b21b6' },
+  DELIVERED: { bg: '#d1fae5', color: '#065f46' },
+  CANCELLED: { bg: '#fee2e2', color: '#991b1b' },
+};
+
+function formatBRL(value: number) {
+  return value.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' });
+}
+
+export function OrdersAdminPage() {
+  usePageTitle('Pedidos (Admin)');
+  const [orders, setOrders] = useState<Order[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [statusFilter, setStatusFilter] = useState<string>('');
+  const [updatingId, setUpdatingId] = useState<string | null>(null);
+
+  function loadOrders(status: string) {
+    setLoading(true);
+    setError(null);
+    const qs = status ? `?status=${status}` : '';
+    apiFetch<{ items: Order[]; nextCursor: string | null }>(`/api/admin/orders${qs}`)
+      .then((data) => {
+        setOrders(data.items);
+        setLoading(false);
+      })
+      .catch(() => {
+        setError('Erro ao carregar pedidos');
+        setLoading(false);
+      });
+  }
+
+  useEffect(() => {
+    loadOrders(statusFilter);
+  }, [statusFilter]);
+
+  async function handleStatusChange(orderId: string, newStatus: string) {
+    setUpdatingId(orderId);
+    try {
+      const token = localStorage.getItem('accessToken');
+      const res = await fetch(`/api/admin/orders/${orderId}/status`, {
+        method: 'PATCH',
+        headers: {
+          'Content-Type': 'application/json',
+          ...(token ? { Authorization: `Bearer ${token}` } : {}),
+        },
+        body: JSON.stringify({ status: newStatus }),
+      });
+      if (!res.ok) {
+        const body = (await res.json()) as { error?: string };
+        setError(body.error ?? 'Erro ao atualizar status');
+      } else {
+        loadOrders(statusFilter);
+      }
+    } catch {
+      setError('Erro ao atualizar status');
+    } finally {
+      setUpdatingId(null);
+    }
+  }
+
+  return (
+    <main>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1.5rem' }}>
+        <h1 style={{ margin: 0 }}>Pedidos</h1>
+        <label style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', fontSize: '0.875rem' }}>
+          <span>Filtrar por status:</span>
+          <select
+            aria-label="Filtrar por status"
+            value={statusFilter}
+            onChange={(e) => setStatusFilter(e.target.value)}
+            style={{ padding: '0.35rem 0.75rem', borderRadius: 6, border: '1px solid #d1d5db', fontSize: '0.875rem' }}
+          >
+            <option value="">Todos</option>
+            {STATUS_OPTIONS.map((s) => (
+              <option key={s} value={s}>{s}</option>
+            ))}
+          </select>
+        </label>
+      </div>
+
+      {error && (
+        <p role="alert" style={{ color: '#ef4444', marginBottom: '1rem' }}>{error}</p>
+      )}
+
+      {loading && <p style={{ color: '#6b7280' }}>Carregando...</p>}
+
+      {!loading && orders.length === 0 && (
+        <p style={{ color: '#6b7280' }}>Nenhum pedido encontrado.</p>
+      )}
+
+      {!loading && orders.length > 0 && (
+        <div style={{ overflowX: 'auto' }}>
+          <table style={{ width: '100%', borderCollapse: 'collapse', background: '#fff', borderRadius: '8px', overflow: 'hidden', boxShadow: '0 1px 3px rgba(0,0,0,0.07)' }}>
+            <thead>
+              <tr style={{ background: '#f9fafb', borderBottom: '1px solid #e5e7eb' }}>
+                <th style={thStyle}>ID</th>
+                <th style={thStyle}>Total</th>
+                <th style={thStyle}>Status</th>
+                <th style={thStyle}>Rastreio</th>
+                <th style={thStyle}>Data</th>
+                <th style={thStyle}>Atualizar</th>
+              </tr>
+            </thead>
+            <tbody>
+              {orders.map((order) => {
+                const colors = STATUS_COLORS[order.status] ?? { bg: '#f3f4f6', color: '#374151' };
+                return (
+                  <tr key={order.id} style={{ borderBottom: '1px solid #f3f4f6' }}>
+                    <td style={tdStyle}>{order.id}</td>
+                    <td style={tdStyle}>{formatBRL(order.total)}</td>
+                    <td style={tdStyle}>
+                      <span style={{ background: colors.bg, color: colors.color, padding: '2px 8px', borderRadius: 12, fontSize: '0.75rem', fontWeight: 600 }}>
+                        {order.status}
+                      </span>
+                    </td>
+                    <td style={tdStyle}>{order.trackingCode ?? '—'}</td>
+                    <td style={tdStyle}>{new Date(order.createdAt).toLocaleDateString('pt-BR')}</td>
+                    <td style={tdStyle}>
+                      <select
+                        aria-label={`Alterar pedido ${order.id}`}
+                        value={order.status}
+                        disabled={updatingId === order.id}
+                        onChange={(e) => void handleStatusChange(order.id, e.target.value)}
+                        style={{ padding: '0.25rem 0.5rem', borderRadius: 4, border: '1px solid #d1d5db', fontSize: '0.8rem' }}
+                      >
+                        {STATUS_OPTIONS.map((s) => (
+                          <option key={s} value={s}>{s}</option>
+                        ))}
+                      </select>
+                    </td>
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </main>
+  );
+}
+
+const thStyle: React.CSSProperties = {
+  textAlign: 'left',
+  padding: '0.75rem 1rem',
+  fontSize: '0.75rem',
+  fontWeight: 600,
+  color: '#6b7280',
+  textTransform: 'uppercase',
+  letterSpacing: '0.05em',
+};
+
+const tdStyle: React.CSSProperties = {
+  padding: '0.75rem 1rem',
+  fontSize: '0.875rem',
+  color: '#111827',
+  verticalAlign: 'middle',
+};