"use client"; import { useEffect, useState } from "react"; import type { ComponentType, CSSProperties, ReactNode } from "react"; import { AnimatePresence, motion } from "framer-motion"; import { Bell, Camera, ChevronDown, CreditCard, Heart, HelpCircle, Home, MapPinned, Menu, Package, PanelLeftClose, PanelLeftOpen, Pencil, Search, Settings2, Star, Store, UserCircle2 } from "lucide-react"; import Image from "next/image"; import ClientPortalLogoutButton from "@/components/ClientPortalLogoutButton"; import { getReadableTextColor } from "@/lib/color-contrast"; import { AvatarBadge, NavItem, PremiumCard, ProgressRing, SnapshotRow, StatusPill, formatDateTime, getInitials, hexToRgba, } from "@/components/client-portal/shared"; type ShellProps = { slug: string; storeName: string; logoUrl: string; primaryColor: string; customerName: string; client: { email?: string | null; phone?: string | null; portal_last_login_at?: string | null; avatar_url?: string | null; }; completion: number; totalSpent: number; latestOrder: { number: number; created_at: string; status: string; } | null; orders: Array<{ total_amount: number; }>; activeSection: string; sidebarOpen: boolean; searchQuery: string; navItems: NavItem[]; onOpenSection: (section: NavItem["id"]) => void; onToggleSidebar: (open: boolean) => void; onSearchChange: (value: string) => void; onAvatarClick?: () => void; contentLayout?: "default" | "integrated"; children: ReactNode; }; export function PortalShell({ slug, storeName, logoUrl, primaryColor, customerName, client, activeSection, sidebarOpen, searchQuery, navItems, onOpenSection, onToggleSidebar, onSearchChange, onAvatarClick, contentLayout = "default", children, }: ShellProps) { const [desktopSidebarCollapsed, setDesktopSidebarCollapsed] = useState(false); const isIntegratedLayout = contentLayout === "integrated"; const headerHeightClass = "h-[76px] lg:h-[92px]"; const headerOffsetClass = "pt-[76px] lg:pt-[92px]"; const sidebarTopClass = "top-[76px] lg:top-[92px]"; const desktopSidebarWidthClass = desktopSidebarCollapsed ? "w-[84px]" : "w-[236px]"; const desktopSidebarInsetClass = desktopSidebarCollapsed ? "lg:pl-[108px]" : "lg:pl-[268px]"; const shellStyle = { background: "linear-gradient(180deg, #fcfcfc 0%, #f8f8f8 100%)", }; const sidebarStyle = { background: "#ffffff", borderColor: "#ece7f2", boxShadow: "none", }; const brandPanelStyle = { backgroundColor: primaryColor, borderColor: hexToRgba(primaryColor, 0.18), }; useEffect(() => { if (!sidebarOpen) return; const previousOverflow = document.body.style.overflow; document.body.style.overflow = "hidden"; return () => { document.body.style.overflow = previousOverflow; }; }, [sidebarOpen]); return (
{logoUrl ? ( desktopSidebarCollapsed ? (
{storeName.slice(0, 1).toUpperCase()}
) : ( {storeName} ) ) : (
{desktopSidebarCollapsed ? storeName.slice(0, 1).toUpperCase() : storeName}
)}
{logoUrl ? ( {storeName} ) : (
{storeName}
)}
Sem novas notificações
{sidebarOpen ? ( <> onToggleSidebar(false)} />
{logoUrl ? ( {storeName} ) : (
{storeName}
)}
setDesktopSidebarCollapsed((current) => !current)} collapsed={false} mobile />
) : null}
{children}
); } function SidebarContent({ slug, primaryColor, customerName, client, navItems, activeSection, onOpenSection, onAvatarClick, onToggleCollapse, collapsed = false, mobile = false, }: { slug: string; primaryColor: string; customerName: string; client: { email?: string | null; phone?: string | null; portal_last_login_at?: string | null; avatar_url?: string | null; }; navItems: NavItem[]; activeSection: string; onOpenSection: (section: NavItem["id"]) => void; onAvatarClick?: () => void; onToggleCollapse?: () => void; collapsed?: boolean; mobile?: boolean; }) { const defaultIconById: Record> = { overview: Home, orders: Package, catalog: Store, favorites: Heart, reviews: Star, finance: CreditCard, addresses: MapPinned, account: UserCircle2, support: HelpCircle, settings: Settings2, }; const items = navItems.map((item) => ({ id: item.id, label: item.label, icon: item.icon || defaultIconById[item.id], })).filter((item) => item.id !== "finance" && item.id !== "settings"); const firstName = customerName.split(" ").filter(Boolean)[0] || "Cliente"; const navInteractiveStyle = { "--portal-nav-hover": hexToRgba(primaryColor, 0.08), "--portal-nav-color": primaryColor, } as CSSProperties; return (
{!collapsed && !mobile ? (
) : !mobile ? ( ) : null} {!collapsed ? (
{client.avatar_url ? ( {customerName} ) : (
{firstName.slice(0, 1).toUpperCase()}
)}
{firstName}
) : null}
{items.map((item) => { const active = activeSection === item.id; const Icon = item.icon; return ( ); })}
{!collapsed ? (
{firstName}
{client.email || "conta@ativa.com"}
{formatDateTime(client.portal_last_login_at)}
) : (
)}
); } export function AccountSnapshot({ customerName, client, primaryColor, completion, addressSummary, onAvatarChange, ordersCount, latestOrder, }: { customerName: string; client: { email?: string | null; phone?: string | null; portal_last_login_at?: string | null; avatar_url?: string | null; }; primaryColor: string; completion: number; addressSummary: string; onAvatarChange?: (file: File) => void; ordersCount: number; latestOrder: { number: number; created_at: string; status: string; } | null; }) { return (
{client.avatar_url ? ( {customerName} ) : (
{getInitials(customerName)}
)}
{ const file = event.target.files?.[0]; if (!file || !onAvatarChange) return; onAvatarChange(file); }} />
Perfil do cliente
{customerName}
{client.email || client.phone || "Cadastro ativo"}
= 80 ? "Cadastro completo" : "Faltam dados"} color={completion >= 80 ? primaryColor : "#b45309"} background={completion >= 80 ? hexToRgba(primaryColor, 0.08) : "#fffbeb"} />
); } function StatPanel({ label, value }: { label: string; value: string }) { return (
{label}
{value}
); }