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,66 @@
+'use client';
+
+import * as React from 'react';
+import { PanelLeftClose, PanelLeftOpen } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+import { Separator } from '@/components/ui/separator';
+import { NavList } from '@/components/layout/nav-list';
+import type { NavItem } from '@/lib/layout/nav-items';
+
+interface SidebarProps {
+  brand: React.ReactNode;
+  brandCollapsed: React.ReactNode;
+  items: NavItem[];
+  footer: React.ReactNode;
+  footerCollapsed: React.ReactNode;
+  collapsed: boolean;
+  onToggleCollapsed: () => void;
+}
+
+/**
+ * Sidebar fixa (desktop, `md+`). Itens de menu e rodapé de usuário chegam
+ * via props — sem nada hardcoded — para ser reaproveitada entre o shell do
+ * master e o do tenant com conteúdo diferente (Etapa 14).
+ */
+export function Sidebar({
+  brand,
+  brandCollapsed,
+  items,
+  footer,
+  footerCollapsed,
+  collapsed,
+  onToggleCollapsed,
+}: SidebarProps) {
+  return (
+    <aside
+      className={cn(
+        'fixed inset-y-0 left-0 z-30 hidden flex-col border-r border-border bg-surface transition-[width] duration-150 md:flex',
+        collapsed ? 'w-16' : 'w-60',
+      )}
+    >
+      <div className={cn('flex h-16 shrink-0 items-center gap-2 overflow-hidden px-4', collapsed && 'justify-center px-2')}>
+        {collapsed ? brandCollapsed : brand}
+      </div>
+      <Separator />
+      <div className="min-h-0 flex-1 overflow-y-auto px-3 py-4">
+        <NavList items={items} collapsed={collapsed} />
+      </div>
+      <Separator />
+      <div className={cn('flex flex-col gap-2 p-3', collapsed && 'items-center')}>
+        {collapsed ? footerCollapsed : footer}
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon-sm"
+          onClick={onToggleCollapsed}
+          aria-label={collapsed ? 'Expandir menu' : 'Recolher menu'}
+          className={collapsed ? 'self-center' : 'self-end'}
+        >
+          {collapsed ? <PanelLeftOpen className="size-4" /> : <PanelLeftClose className="size-4" />}
+        </Button>
+      </div>
+    </aside>
+  );
+}