Frontend completo (Etapas 11-18) e extensões de backend (Etapas 13 e 18)

Adiciona o frontend Next.js em frontend/ (setup, design system, autenticação/tema, layout/navegação, área master, área tenant completa: clientes, produtos, vendas, recebimentos, whatsapp, e-mail, alertas, equipe e perfil). Estende o backend de forma aditiva e autorizada: cookie httpOnly para refresh token (Etapa 13) e CRUD de equipe + edição de perfil do tenant (Etapa 18, módulo src/modules/equipe/ novo e PUT /tenant/perfil). Detalhes completos em Etapas/V2/*. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-08-16 09:41:13 -03:00
parent f9738e54da
commit 323912748f
179 changed files with 29312 additions and 22 deletions
@@ -0,0 +1,52 @@
+'use client';
+
+import * as React from 'react';
+import { Bell, Menu, Search } from 'lucide-react';
+
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+
+interface TopbarProps {
+  breadcrumb: React.ReactNode;
+  /** Logo compacta (só símbolo) exibida no lugar do breadcrumb no mobile. */
+  mobileBrand: React.ReactNode;
+  onMenuClick: () => void;
+}
+
+/**
+ * Topbar fixa no topo. Desktop: breadcrumb + busca rápida + notificações.
+ * Mobile (`<md`): logo símbolo + hambúrguer (abre o `Drawer`) + notificações
+ * — a busca funcional real fica para a Etapa 18/19, aqui só o componente.
+ */
+export function Topbar({ breadcrumb, mobileBrand, onMenuClick }: TopbarProps) {
+  return (
+    <header className="sticky top-0 z-20 flex h-16 items-center gap-3 border-b border-border bg-surface px-4 md:px-6">
+      <Button
+        type="button"
+        variant="ghost"
+        size="icon-sm"
+        className="md:hidden"
+        onClick={onMenuClick}
+        aria-label="Abrir menu"
+      >
+        <Menu className="size-5" />
+      </Button>
+
+      <div className="flex min-w-0 flex-1 items-center gap-3">
+        <div className="md:hidden">{mobileBrand}</div>
+        <div className="hidden min-w-0 md:block">{breadcrumb}</div>
+      </div>
+
+      <div className="hidden max-w-xs flex-1 items-center md:flex">
+        <div className="relative w-full">
+          <Search className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-neutral-500" />
+          <Input placeholder="Buscar clientes, vendas..." className="pl-9" aria-label="Busca rápida" />
+        </div>
+      </div>
+
+      <Button type="button" variant="ghost" size="icon-sm" aria-label="Notificações">
+        <Bell className="size-5" />
+      </Button>
+    </header>
+  );
+}