tiagoandClaude Sonnet 5
323912748f
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>
95 lines
2.8 KiB
TypeScript
95 lines
2.8 KiB
TypeScript
'use client';
|
|
|
|
import * as React from 'react';
|
|
import Image from 'next/image';
|
|
|
|
import { AppShell } from '@/components/layout/app-shell';
|
|
import { UserFooter } from '@/components/layout/user-footer';
|
|
import { useAuth } from '@/lib/auth/auth-context';
|
|
import { TenantThemeProvider, useTenantTheme } from '@/lib/theme/theme-provider';
|
|
import { TENANT_NAV_ITEMS, TENANT_BOTTOM_HREFS, filterByRole } from '@/lib/layout/nav-items';
|
|
import type { UserRole } from '@/lib/auth/jwt';
|
|
|
|
const ROLE_LABELS: Record<UserRole, string> = {
|
|
tenant_admin: 'Administrador',
|
|
vendedor: 'Vendedor',
|
|
financeiro: 'Financeiro',
|
|
visualizador: 'Visualizador',
|
|
};
|
|
|
|
/** Logo/nome resolvidos do tema do tenant (Etapa 13); cai para a marca padrão sem tema. */
|
|
function TenantBrand({ collapsed = false }: { collapsed?: boolean }) {
|
|
const { theme } = useTenantTheme();
|
|
const name = theme?.nome ?? 'SeConectai Vendas';
|
|
|
|
return (
|
|
<>
|
|
{theme?.logoUrl ? (
|
|
<Image
|
|
src={theme.logoUrl}
|
|
alt={name}
|
|
width={36}
|
|
height={36}
|
|
className="size-9 shrink-0 rounded-lg object-contain"
|
|
/>
|
|
) : (
|
|
<span className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-primary text-sm font-bold text-primary-foreground">
|
|
{name.charAt(0).toUpperCase()}
|
|
</span>
|
|
)}
|
|
{!collapsed && <span className="truncate text-sm font-semibold text-neutral-950">{name}</span>}
|
|
</>
|
|
);
|
|
}
|
|
|
|
function TenantShellInner({
|
|
initialCollapsed,
|
|
children,
|
|
}: {
|
|
initialCollapsed: boolean;
|
|
children: React.ReactNode;
|
|
}) {
|
|
const { user, logout } = useAuth();
|
|
const handleLogout = React.useCallback(() => {
|
|
void logout();
|
|
}, [logout]);
|
|
|
|
const items = React.useMemo(() => filterByRole(TENANT_NAV_ITEMS, user?.role), [user?.role]);
|
|
const roleLabel = user?.role ? ROLE_LABELS[user.role] : 'Usuário';
|
|
|
|
return (
|
|
<AppShell
|
|
brand={<TenantBrand />}
|
|
brandCollapsed={<TenantBrand collapsed />}
|
|
items={items}
|
|
bottomHrefs={TENANT_BOTTOM_HREFS}
|
|
footer={<UserFooter label={roleLabel} onLogout={handleLogout} />}
|
|
footerCollapsed={<UserFooter label={roleLabel} compact onLogout={handleLogout} />}
|
|
initialCollapsed={initialCollapsed}
|
|
>
|
|
{children}
|
|
</AppShell>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Shell da área `/app`. Resolve o tema do tenant a partir do `tenant_id` do
|
|
* usuário autenticado (Etapa 13) e filtra os itens de menu por `role` — ex:
|
|
* "Equipe" só aparece para `tenant_admin` (Etapa 14, critério de aceite).
|
|
*/
|
|
export function TenantShell({
|
|
initialCollapsed,
|
|
children,
|
|
}: {
|
|
initialCollapsed: boolean;
|
|
children: React.ReactNode;
|
|
}) {
|
|
const { user } = useAuth();
|
|
|
|
return (
|
|
<TenantThemeProvider tenantId={user?.tenant_id ?? null}>
|
|
<TenantShellInner initialCollapsed={initialCollapsed}>{children}</TenantShellInner>
|
|
</TenantThemeProvider>
|
|
);
|
|
}
|