kybernus 3.0.1 → 3.2.0

package/templates/ecommerce/apps/web/src/App.tsx

@@ -0,0 +1,133 @@
+import { useEffect } from 'react';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import { ThemeProvider } from './shared/theme/ThemeProvider';
+import { Layout } from './shared/components/Layout';
+import { ProtectedRoute } from './shared/components/ProtectedRoute';
+import { ErrorBoundary } from './shared/components/ErrorBoundary';
+import { NotFoundPage } from './shared/pages/NotFoundPage';
+import { useAuthStore } from './modules/auth/useAuthStore';
+
+// Auth
+import { LoginPage } from './modules/auth/pages/LoginPage';
+import { RegisterPage } from './modules/auth/pages/RegisterPage';
+import { ForgotPasswordPage } from './modules/auth/pages/ForgotPasswordPage';
+import { ResetPasswordPage } from './modules/auth/pages/ResetPasswordPage';
+
+// Catalog
+import { ProductListPage } from './modules/catalog/pages/ProductListPage';
+import { ProductDetailPage } from './modules/catalog/pages/ProductDetailPage';
+
+// Cart
+import { CartPage } from './modules/cart/pages/CartPage';
+
+// Checkout
+import { CheckoutPage } from './modules/checkout/pages/CheckoutPage';
+import { CheckoutSuccessPage } from './modules/checkout/pages/CheckoutSuccessPage';
+
+// Profile
+import { ProfilePage } from './modules/profile/pages/ProfilePage';
+
+// Orders
+import { OrderHistoryPage } from './modules/orders/pages/OrderHistoryPage';
+import { OrderDetailPage } from './modules/orders/pages/OrderDetailPage';
+
+// Admin
+import { DashboardPage } from './modules/admin/pages/DashboardPage';
+import { UsersAdminPage } from './modules/admin/pages/UsersAdminPage';
+import { ProductsAdminPage } from './modules/admin/pages/ProductsAdminPage';
+import { OrdersAdminPage } from './modules/admin/pages/OrdersAdminPage';
+import { CouponsAdminPage } from './modules/admin/pages/CouponsAdminPage';
+
+// Legal
+import { TermsOfServicePage } from './modules/legal/pages/TermsOfServicePage';
+import { PrivacyPolicyPage } from './modules/legal/pages/PrivacyPolicyPage';
+
+function AppRoutes() {
+  const init = useAuthStore((s) => s.init);
+
+  useEffect(() => {
+    void init();
+  }, [init]);
+
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route element={<Layout />}>
+          {/* Public */}
+          <Route index element={<ProductListPage />} />
+          <Route path="products/:slug" element={<ProductDetailPage />} />
+          <Route path="login" element={<LoginPage />} />
+          <Route path="register" element={<RegisterPage />} />
+          <Route path="forgot-password" element={<ForgotPasswordPage />} />
+          <Route path="reset-password" element={<ResetPasswordPage />} />
+
+          {/* Cart — accessible to all (authenticated or not) */}
+          <Route path="cart" element={<CartPage />} />
+
+          {/* Protected — any logged-in user */}
+          <Route
+            path="checkout"
+            element={<ProtectedRoute><CheckoutPage /></ProtectedRoute>}
+          />
+          <Route
+            path="checkout/success"
+            element={<ProtectedRoute><CheckoutSuccessPage /></ProtectedRoute>}
+          />
+          <Route
+            path="profile"
+            element={<ProtectedRoute><ProfilePage /></ProtectedRoute>}
+          />
+          <Route
+            path="orders"
+            element={<ProtectedRoute><OrderHistoryPage /></ProtectedRoute>}
+          />
+          <Route
+            path="orders/:id"
+            element={<ProtectedRoute><OrderDetailPage /></ProtectedRoute>}
+          />
+
+          {/* Protected — ADMIN only */}
+          <Route
+            path="admin"
+            element={<ProtectedRoute requiredRole="ADMIN"><DashboardPage /></ProtectedRoute>}
+          />
+          <Route
+            path="admin/users"
+            element={<ProtectedRoute requiredRole="ADMIN"><UsersAdminPage /></ProtectedRoute>}
+          />
+          <Route
+            path="admin/products"
+            element={<ProtectedRoute requiredRole="ADMIN"><ProductsAdminPage /></ProtectedRoute>}
+          />
+          <Route
+            path="admin/orders"
+            element={<ProtectedRoute requiredRole="ADMIN"><OrdersAdminPage /></ProtectedRoute>}
+          />
+          <Route
+            path="admin/coupons"
+            element={<ProtectedRoute requiredRole="ADMIN"><CouponsAdminPage /></ProtectedRoute>}
+          />
+
+          {/* Legal — public */}
+          <Route path="terms" element={<TermsOfServicePage />} />
+          <Route path="privacy" element={<PrivacyPolicyPage />} />
+        </Route>
+
+        {/* Fallback */}
+        <Route path="*" element={<NotFoundPage />} />
+      </Routes>
+    </BrowserRouter>
+  );
+}
+
+function App() {
+  return (
+    <ThemeProvider>
+      <ErrorBoundary>
+        <AppRoutes />
+      </ErrorBoundary>
+    </ThemeProvider>
+  );
+}
+
+export default App;

package/templates/ecommerce/apps/web/src/__mocks__/fileMock.ts

@@ -0,0 +1 @@
+export default 'test-file-stub';

package/templates/ecommerce/apps/web/src/__mocks__/styleMock.ts

@@ -0,0 +1 @@
+export default {};

package/templates/ecommerce/apps/web/src/index.css

@@ -0,0 +1,159 @@
+/* ── Global Reset & Base Styles ─────────────────────────────────────────── */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html,
+body,
+#root {
+  height: 100%;
+}
+
+body {
+  background-color: #f9fafb;
+  color: #111827;
+  font-family: 'Inter', system-ui, -apple-system, sans-serif;
+  font-size: 1rem;
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* ── Typography ─────────────────────────────────────────────────────────── */
+h1, h2, h3, h4, h5, h6 {
+  line-height: 1.25;
+  font-weight: 600;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+img {
+  display: block;
+  max-width: 100%;
+}
+
+button {
+  cursor: pointer;
+  font-family: inherit;
+  font-size: inherit;
+}
+
+/* ── Form Elements ───────────────────────────────────────────────────────── */
+input,
+textarea,
+select {
+  font-family: inherit;
+  font-size: 0.9375rem;
+  line-height: 1.5;
+  display: block;
+  width: 100%;
+  padding: 0.5625rem 0.75rem;
+  border: 1.5px solid #d1d5db;
+  border-radius: 0.5rem;
+  background: #ffffff;
+  color: #111827;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+  outline: none;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+input:focus,
+textarea:focus,
+select:focus {
+  border-color: #6366f1;
+  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
+}
+
+input::placeholder,
+textarea::placeholder {
+  color: #9ca3af;
+}
+
+select {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 0.65rem center;
+  padding-right: 2.25rem;
+}
+
+label {
+  display: block;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #374151;
+  margin-bottom: 0.375rem;
+}
+
+/* ── Buttons ────────────────────────────────────────────────────────────── */
+button[type="submit"] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  width: 100%;
+  padding: 0.625rem 1.25rem;
+  background: #6366f1;
+  color: #ffffff;
+  border: none;
+  border-radius: 0.5rem;
+  font-weight: 600;
+  font-size: 0.9375rem;
+  transition: background 0.15s ease, opacity 0.15s ease;
+  cursor: pointer;
+}
+
+button[type="submit"]:hover:not(:disabled) {
+  background: #4f46e5;
+}
+
+button[type="submit"]:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+/* ── Scrollbar (Webkit) ─────────────────────────────────────────────────── */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: #f1f5f9;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #cbd5e1;
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #94a3b8;
+}
+
+/* ── Layout responsive classes ──────────────────────────────────────────── */
+.site-nav {
+  padding: 0.875rem 2rem;
+}
+
+.site-main {
+  padding: 1.75rem 2rem;
+}
+
+@media (max-width: 640px) {
+  .site-nav {
+    padding: 0.625rem 1rem;
+    gap: 0.5rem;
+  }
+
+  .site-main {
+    padding: 1.25rem 1rem;
+  }
+}

package/templates/ecommerce/apps/web/src/main.tsx

@@ -0,0 +1,13 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import './index.css';
+import App from './App';
+
+const root = document.getElementById('root');
+if (!root) throw new Error('Root element not found');
+
+createRoot(root).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);

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

@@ -0,0 +1,134 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { MemoryRouter } from 'react-router-dom';
+import { CouponsAdminPage } from '../pages/CouponsAdminPage';
+
+const mockFetch = jest.fn();
+beforeAll(() => { global.fetch = mockFetch; });
+beforeEach(() => mockFetch.mockClear());
+
+function renderPage() {
+  return render(
+    <MemoryRouter>
+      <CouponsAdminPage />
+    </MemoryRouter>,
+  );
+}
+
+const coupons = [
+  {
+    id: 'coup-1',
+    code: 'PROMO10',
+    discountType: 'percent',
+    discountValue: 10,
+    minOrderValue: 0,
+    usageLimit: 100,
+    usageCount: 5,
+    expiresAt: null,
+  },
+  {
+    id: 'coup-2',
+    code: 'FIXED20',
+    discountType: 'fixed',
+    discountValue: 20,
+    minOrderValue: 50,
+    usageLimit: null,
+    usageCount: 0,
+    expiresAt: null,
+  },
+];
+
+describe('CouponsAdminPage', () => {
+  it('renderiza tabela com código, desconto e limite', async () => {
+    mockFetch.mockResolvedValueOnce({
+      ok: true,
+      json: async () => ({ items: coupons }),
+    } as Response);
+
+    renderPage();
+
+    await waitFor(() => {
+      expect(screen.getByText('PROMO10')).toBeInTheDocument();
+      expect(screen.getByText('FIXED20')).toBeInTheDocument();
+    });
+
+    expect(screen.getByText('10%')).toBeInTheDocument();
+    expect(screen.getByText('R$ 20,00')).toBeInTheDocument();
+  });
+
+  it('formulário de criação chama POST /api/admin/coupons', async () => {
+    mockFetch
+      .mockResolvedValueOnce({
+        ok: true,
+        json: async () => ({ items: [] }),
+      } as Response)
+      .mockResolvedValueOnce({
+        ok: true,
+        json: async () => ({
+          id: 'coup-new',
+          code: 'NEWCOUPON',
+          discountType: 'percent',
+          discountValue: 5,
+          minOrderValue: 0,
+          usageLimit: null,
+          usageCount: 0,
+          expiresAt: null,
+        }),
+      } as Response)
+      .mockResolvedValueOnce({
+        ok: true,
+        json: async () => ({ items: [] }),
+      } as Response);
+
+    renderPage();
+
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: /criar|novo/i })).toBeInTheDocument();
+    });
+
+    await userEvent.type(screen.getByLabelText(/código/i), 'NEWCOUPON');
+    await userEvent.type(screen.getByLabelText(/valor/i), '5');
+    await userEvent.click(screen.getByRole('button', { name: /criar|novo/i }));
+
+    await waitFor(() => {
+      const calls = mockFetch.mock.calls;
+      const postCall = calls.find(
+        (c) => typeof c[0] === 'string' && c[0].includes('/api/admin/coupons') && c[1]?.method === 'POST',
+      );
+      expect(postCall).toBeDefined();
+    });
+  });
+
+  it('botão deletar chama DELETE /api/admin/coupons/:id', async () => {
+    mockFetch
+      .mockResolvedValueOnce({
+        ok: true,
+        json: async () => ({ items: [coupons[0]] }),
+      } as Response)
+      .mockResolvedValueOnce({
+        ok: true,
+        json: async () => ({}),
+        status: 204,
+      } as unknown as Response)
+      .mockResolvedValueOnce({
+        ok: true,
+        json: async () => ({ items: [] }),
+      } as Response);
+
+    renderPage();
+
+    await waitFor(() => {
+      expect(screen.getByText('PROMO10')).toBeInTheDocument();
+    });
+
+    await userEvent.click(screen.getByRole('button', { name: /excluir|remover|deletar/i }));
+
+    await waitFor(() => {
+      const calls = mockFetch.mock.calls;
+      const deleteCall = calls.find(
+        (c) => typeof c[0] === 'string' && c[0].includes('/api/admin/coupons/coup-1') && c[1]?.method === 'DELETE',
+      );
+      expect(deleteCall).toBeDefined();
+    });
+  });
+});

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

@@ -0,0 +1,65 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { DashboardPage } from '../pages/DashboardPage';
+
+const mockFetch = jest.fn();
+beforeAll(() => { global.fetch = mockFetch; });
+beforeEach(() => mockFetch.mockClear());
+
+function renderPage() {
+  return render(
+    <MemoryRouter>
+      <DashboardPage />
+    </MemoryRouter>,
+  );
+}
+
+const baseStats = {
+  totalRevenue: 1250.5,
+  totalOrders: 25,
+  totalCustomers: 10,
+  avgOrderValue: 125.05,
+};
+
+describe('DashboardPage', () => {
+  it('exibe estado de carregamento inicialmente', () => {
+    mockFetch.mockReturnValue(new Promise(() => {}));
+    renderPage();
+    expect(screen.getByText(/carregando/i)).toBeInTheDocument();
+  });
+
+  it('renderiza os KPIs: totalRevenue, totalOrders, totalCustomers, avgOrderValue', async () => {
+    mockFetch.mockResolvedValue({
+      ok: true,
+      json: async () => baseStats,
+    });
+    renderPage();
+    await waitFor(() =>
+      expect(screen.getByText('25')).toBeInTheDocument(),
+    );
+    expect(screen.getByText('10')).toBeInTheDocument();
+    // Revenue and avgOrderValue displayed as currency
+    expect(screen.getByText(/1\.250,50|1250,50|1250.50/)).toBeInTheDocument();
+  });
+
+  it('exibe títulos dos KPI cards', async () => {
+    mockFetch.mockResolvedValue({
+      ok: true,
+      json: async () => baseStats,
+    });
+    renderPage();
+    await waitFor(() =>
+      expect(screen.getByText(/receita/i)).toBeInTheDocument(),
+    );
+    expect(screen.getByText(/pedidos/i)).toBeInTheDocument();
+    expect(screen.getByText(/clientes/i)).toBeInTheDocument();
+  });
+
+  it('exibe erro ao falhar requisição', async () => {
+    mockFetch.mockResolvedValue({ ok: false, status: 403 });
+    renderPage();
+    await waitFor(() =>
+      expect(screen.getByRole('alert')).toBeInTheDocument(),
+    );
+  });
+});

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

@@ -0,0 +1,79 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { MemoryRouter } from 'react-router-dom';
+import { OrdersAdminPage } from '../pages/OrdersAdminPage';
+
+const mockFetch = jest.fn();
+beforeAll(() => { global.fetch = mockFetch; });
+beforeEach(() => mockFetch.mockClear());
+
+function renderPage() {
+  return render(
+    <MemoryRouter>
+      <OrdersAdminPage />
+    </MemoryRouter>,
+  );
+}
+
+const orders = [
+  {
+    id: 'ord-1',
+    userId: 'u1',
+    status: 'PAID',
+    total: 199.9,
+    trackingCode: null,
+    createdAt: new Date().toISOString(),
+    items: [],
+  },
+  {
+    id: 'ord-2',
+    userId: 'u2',
+    status: 'SHIPPED',
+    total: 89.5,
+    trackingCode: 'BR123456789',
+    createdAt: new Date().toISOString(),
+    items: [],
+  },
+];
+
+describe('OrdersAdminPage', () => {
+  it('renderiza lista de pedidos com status badge', async () => {
+    mockFetch.mockResolvedValue({
+      ok: true,
+      json: async () => ({ items: orders, nextCursor: null }),
+    });
+    renderPage();
+    await waitFor(() => expect(screen.getByText('ord-1')).toBeInTheDocument());
+    expect(screen.getByText('ord-2')).toBeInTheDocument();
+    expect(screen.getAllByText('PAID').length).toBeGreaterThanOrEqual(1);
+    expect(screen.getAllByText('SHIPPED').length).toBeGreaterThanOrEqual(1);
+  });
+
+  it('permite filtrar por status', async () => {
+    const user = userEvent.setup();
+    mockFetch.mockResolvedValue({
+      ok: true,
+      json: async () => ({ items: orders, nextCursor: null }),
+    });
+    renderPage();
+    await waitFor(() => expect(screen.getByText('ord-1')).toBeInTheDocument());
+
+    const select = screen.getByRole('combobox', { name: /filtrar|status/i });
+    expect(select).toBeInTheDocument();
+    await user.selectOptions(select, 'PAID');
+    expect(mockFetch).toHaveBeenCalledTimes(2);
+  });
+
+  it('exibe select para atualizar status de um pedido', async () => {
+    mockFetch.mockResolvedValue({
+      ok: true,
+      json: async () => ({ items: orders, nextCursor: null }),
+    });
+    renderPage();
+    await waitFor(() => expect(screen.getByText('ord-1')).toBeInTheDocument());
+
+    // Should have selects for updating order status (one per order)
+    const selects = screen.getAllByRole('combobox');
+    expect(selects.length).toBeGreaterThanOrEqual(2); // filter + at least one row select
+  });
+});

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

@@ -0,0 +1,84 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { MemoryRouter } from 'react-router-dom';
+import { ProductsAdminPage } from '../pages/ProductsAdminPage';
+
+const mockFetch = jest.fn();
+beforeAll(() => { global.fetch = mockFetch; });
+beforeEach(() => mockFetch.mockClear());
+
+function renderPage() {
+  return render(
+    <MemoryRouter>
+      <ProductsAdminPage />
+    </MemoryRouter>,
+  );
+}
+
+const products = [
+  {
+    id: 'p1',
+    name: 'Camiseta Básica',
+    slug: 'camiseta-basica',
+    price: 49.9,
+    images: [],
+    variants: [],
+    status: 'ACTIVE',
+    categoryId: 'cat1',
+    description: null,
+    createdAt: new Date().toISOString(),
+    updatedAt: new Date().toISOString(),
+  },
+  {
+    id: 'p2',
+    name: 'Tênis Runner',
+    slug: 'tenis-runner',
+    price: 299.9,
+    images: ['http://example.com/img.jpg'],
+    variants: [],
+    status: 'ACTIVE',
+    categoryId: 'cat2',
+    description: null,
+    createdAt: new Date().toISOString(),
+    updatedAt: new Date().toISOString(),
+  },
+];
+
+describe('ProductsAdminPage', () => {
+  it('renderiza lista de produtos com nome e preço', async () => {
+    mockFetch.mockResolvedValue({
+      ok: true,
+      json: async () => ({ items: products, nextCursor: null }),
+    });
+    renderPage();
+    await waitFor(() => expect(screen.getByText('Camiseta Básica')).toBeInTheDocument());
+    expect(screen.getByText('Tênis Runner')).toBeInTheDocument();
+    expect(screen.getByText(/49[,.]9/)).toBeInTheDocument();
+  });
+
+  it('exibe botão "Novo Produto"', async () => {
+    mockFetch.mockResolvedValue({
+      ok: true,
+      json: async () => ({ items: products, nextCursor: null }),
+    });
+    renderPage();
+    await waitFor(() => expect(screen.getByText(/novo produto/i)).toBeInTheDocument());
+  });
+
+  it('aceita upload de imagem via input file', async () => {
+    mockFetch.mockResolvedValue({
+      ok: true,
+      json: async () => ({ items: products, nextCursor: null }),
+    });
+    const user = userEvent.setup();
+    renderPage();
+    await waitFor(() => expect(screen.getByText('Camiseta Básica')).toBeInTheDocument());
+
+    const fileInput = document.querySelector('input[type="file"]') as HTMLInputElement;
+    expect(fileInput).not.toBeNull();
+
+    const file = new File(['img'], 'photo.jpg', { type: 'image/jpeg' });
+    await user.upload(fileInput, file);
+    expect(fileInput.files?.[0]).toBe(file);
+  });
+});