proud-documentos

As a frontend developer, implement the LandingHero section for the Landing page. This section uses `@react-three/fiber` Canvas with `useFrame` and `useThree`, plus `@react-three/drei` components `RoundedBox`, `Text`, and `Float` for 3D document cards. The `DocumentCard` component uses `useRef`, `useState` for `hovered`, and reads a CSS custom property `--scroll` via `getComputedStyle` for scroll-driven parallax. Each card has gentle Y-rotation (paused on hover), sinusoidal vertical float, and emissive lerp on hover using `meshStandardMaterial` with `emissive: #00C853`. Cards display `title`, `category`, colored top bars, fake text lines, and a category label via `drei/Text`. The 2D overlay uses `motion` from framer-motion for hero headline and CTA entrance animations. Imports `../styles/LandingHero.css`, `three`, and react-three ecosystem.

As a frontend developer, implement the DocumentFlow section for the Landing page. This section integrates `gsap` with `ScrollTrigger` plugin (registered via `gsap.registerPlugin`) for scroll-driven animation orchestration alongside a `@react-three/fiber` Canvas. The 3D scene includes: `CentralHub` — an icosahedron wireframe mesh with orbiting torus ring and glow sphere, all animated via `useFrame` with scroll-progress-driven scale; `SourceNode` — positioned at `SOURCE_POSITIONS` (email: [-4,2,-3], upload: [0,3.5,-4], integration: [4,2,-3]); animated document meshes flying from source nodes to the central hub using `THREE.Vector3` path interpolation. The `DOCUMENTS` array (6 items: NF, Recibo, Contrato, Declaração, NF-e, Relatório) drives document card instances. Uses `useRef`, `useEffect`, `useMemo`, `useCallback`, and a `scrollProgress` ref shared across components. Imports `../styles/DocumentFlow.css`, `three`, `gsap/ScrollTrigger`.

As a frontend developer, implement the LandingFeatures section for the Landing page. This is a primarily static section using `motion` from framer-motion for staggered card entrance animations. It renders a `features` array of 6 items (Endereços de E-mail Exclusivos, Upload Arrastar e Soltar, Categorização Automática, Pronto para Integração, Painel Inteligente, and one more) each with inline SVG icons, a title, and description. Cards use viewport-triggered `whileInView` animations with `staggerChildren` for sequential reveal. No state hooks or API calls. Imports `../styles/LandingFeatures.css`.

As a frontend developer, implement the LandingBenefits section for the Landing page. This section combines `gsap` with `ScrollTrigger` and framer-motion `useScroll`/`useTransform` for scroll-linked parallax. It renders a `benefits` array of 3 items (Eficiência, Precisão, Crescimento) each with a `tag`, `title`, `desc`, `stats` array (two stat objects with `value` and `label`), and an `illustration` type string. Three custom SVG illustration components are defined: `AutomationIllustration` (conveyor belt with document cards, arrows, color labels), `AccuracyIllustration`, and `ScaleIllustration`. Uses `useEffect` and `useRef` for GSAP ScrollTrigger initialization, alternating left/right layout per benefit item. Imports `../styles/LandingBenefits.css`, `gsap/ScrollTrigger`.

As a frontend developer, implement the LandingIntegrations section for the Landing page. This section uses `useState` for `hoveredIndex` to drive per-card hover states. It renders an `integrations` array of 6 items (ContaAzul, Omie, Bluesoft, Domínio Sistemas, Questor, Receita Federal) each with `name`, `type`, `desc`, `color`, `bgColor`, and `iconPath` for inline SVG rendering. The background uses a `motion.div` with `animate` cycling through `gradientKeyframes` (4 gradient states) for a slow animated gradient shift. Individual integration cards use `AnimatePresence` and `motion` for hover-triggered detail panel expansion. Imports `../styles/LandingIntegrations.css`.

As a frontend developer, implement the LandingTrust section for the Landing page. This section uses `useInView` from framer-motion and `animate` (the imperative animation utility) for animated number counting on scroll entry. The `TRUST_BADGES` array (4 items: LGPD 100%, ISO 27001, 99.9% uptime, 24/7 support) each have `metricValue`, `metricSuffix`, `metricPrefix`, `decimals`, and an `icon` string mapped to one of four custom SVG icon components: `ShieldIcon`, `CertificateIcon`, `ServerIcon`, `HeadsetIcon`. The `TRUST_ITEMS` array (4 security bullet points) renders a trust checklist. Number counters animate from 0 to their target value when the section enters the viewport using `animate()` with a ref target. Uses `useState`, `useEffect`, `useRef`. Imports `../styles/LandingTrust.css`.

As a frontend developer, implement the LandingPricing section for the Landing page. This section uses `useState` for a monthly/annual billing toggle. The `pricingData` object has two keys (`monthly`, `annual`) each containing 3 plan objects (Starter R$49/R$39, Professional R$149/R$119 with `featured: true`, Enterprise R$399). Each plan has `name`, `tagline`, `price`, `currency`, `period`, `icon` string, `featured` boolean, `features` array, `ctaLabel`, and `ctaStyle`. Uses `AnimatePresence` and `motion` for animated plan card transitions when toggling billing period, with the Professional/featured card visually elevated. CTA buttons have distinct styles (`outline`, `primary`, `secondary`). Imports `../styles/LandingPricing.css`.

As a frontend developer, implement the LandingFAQ section for the Landing page. This section uses `useState` for tracking the open accordion item index, `useRef` for measuring content height, and `useEffect` for dynamic height calculation to enable smooth CSS height transitions. The `faqData` array contains 6 Q&A items covering: categorização automática, integrações disponíveis, segurança de dados, múltiplos clientes, teste gratuito (14 dias, sem cartão), and endereços de e-mail exclusivos. Each item expands/collapses using `AnimatePresence` and `motion` with height animation driven by `auto` or `0`. Clicking an open item closes it (accordion behavior). Imports `../styles/LandingFAQ.css`.

As a frontend developer, implement the LandingCTA section for the Landing page. This section features a magnetic CTA button with physics-based cursor attraction: `handleMouseMove` computes distance from button center and applies `magnetOffset` state (x/y) proportional to proximity (max 180px radius, 0.25 strength factor) via a `motion.button` `animate` prop. On click, `handleClick` spawns 16 particles in a radial burst pattern using `PARTICLE_COLORS` array (`#00C853`, `#FFD600`, `#1A73E8`, `#FF7043`, `#00E676`), then animates them outward with `gsap.timeline().fromTo()` targeting `.lc-particle` elements inside `particleFieldRef`. Uses `useInView` for section entrance animation, `useCallback` for memoized handlers, `useRef` for button and particle field refs, and `useState` for `magnetOffset`, `particles`, and `secondaryHover`. Imports `../styles/LandingCTA.css`, `gsap`.

As a frontend developer, implement the Footer section for the Landing page. This section uses `useState` for tracking which mobile accordion column is open and `useEffect` for detecting viewport width to toggle between desktop (all columns visible) and mobile (accordion) layouts. The `footerColumns` array has 4 columns (Produto, Empresa, Recursos, Legal) each with a `title` and `links` array. `ChevronIcon` rotates via CSS class `ftr-col-chevron--open` for accordion indicator. Social links render `LinkedInIcon`, `TwitterIcon`, `GitHubIcon` SVG components from the `socialLinks` array. `AnimatePresence` and `motion` handle mobile column content expand/collapse with height animation. Includes LGPD compliance copy and copyright line. Note: this component may already exist from a previous page — check before re-creating. Imports `../styles/Footer.css`.

As a frontend developer, implement the Navbar section for the Login page. This component may already exist from the Landing page (task 7f35dffb-77b4-479a-b2fa-1c7854cfbecb) — reuse or verify it renders correctly on the Login route. The Navbar uses framer-motion's useScroll and useTransform hooks for a scroll-progress underline indicator, AnimatePresence for the mobile drawer, and useState for mobileOpen toggle. The animated SVG logo draws four motion.path elements sequentially (document outline at 0.8s, fold corner at 0.5s+0.6s delay, document lines at 0.4s+0.9s delay, checkmark at 0.35s+1.2s delay) using pathLength animations. NAV_LINKS maps to Desktop anchor tags with hover underline effects and a mobile accordion drawer. Import from '../styles/Navbar.css'.

Implement FastAPI endpoints for client management: GET /api/clients (list, with pagination, search, status/type filter), POST /api/clients (create), GET /api/clients/{id}, PUT /api/clients/{id}, DELETE /api/clients/{id}. Each client has: id, name, email, type (pj/pf), status (ativo/inativo), unique_email_address (auto-generated subdomain for document ingestion), doc_count, last_upload, created_at. Alembic migration for clients table. ClientsPageHeader stats endpoint: GET /api/clients/stats (total, active_this_month, new_this_month, pending). Frontend sections that require this API: ClientsPageHeader (2152469c), ClientsTable (8153a3a2), ClientsFilterBar (394dec87), ClientsPagination (a1ac36b7), ClientsActionPanel (ad26f8e2), DashboardClientOverview (8b40a478), DashboardStatsCards (bddc99d6).

Implement FastAPI endpoints for user management (admin-only): GET /api/users (list with pagination, role/status filter, search), POST /api/users (invite/create), GET /api/users/{id}, PUT /api/users/{id} (update role/status), DELETE /api/users/{id}, POST /api/users/bulk/deactivate, POST /api/users/bulk/change-role. User model extends auth users table: role enum[admin,accountant,assistant], status (active/inactive/pending), last_login_at, invited_by. GET /api/users/stats. Role-based access control middleware — only admin can access /api/users endpoints. Alembic migration. Frontend sections: UsersTable (86ccdd6a), UsersPageHeader (36805281), UsersModal (4a70bae6), UsersBulkActions (85a35ddc), UsersPermissions (61343301).

Implement FastAPI endpoints for third-party accounting software integrations: GET /api/integrations (list available + connected), POST /api/integrations/{slug}/connect (OAuth or API key flow), DELETE /api/integrations/{slug}/disconnect, POST /api/integrations/{slug}/sync (trigger manual sync), GET /api/integrations/{slug}/status, GET /api/integrations/sync-config, PUT /api/integrations/sync-config. Supported integrations: ContaAzul, Omie, Bluesoft, Domínio Sistemas, Questor, Sage, Bling, BOMGestão, Alterdata. Integration model: id, user_id, slug, display_name, status(connected/disconnected), last_sync_at, sync_frequency, credentials_encrypted. Alembic migration for integrations table. GET /api/integrations/services/status for IntegrationsStatus (6a91b90e) live health dashboard. Frontend: IntegrationsFeatured (316faeab), IntegrationsAPIAccess (6f27b2bf), IntegrationsSync (73e7d572), IntegrationSettings (96e81b23).

Implement FastAPI endpoints for user settings: GET /api/settings/profile, PUT /api/settings/profile (name, email, company, language, timezone), PUT /api/settings/security/password (current+new+confirm), GET /api/settings/security/sessions (active sessions list), DELETE /api/settings/security/sessions/{session_id} (revoke), PUT /api/settings/notifications (toggle preferences), GET /api/settings/notifications, PUT /api/settings/appearance (theme, text size). POST /api/settings/export-data (trigger account data export), POST /api/settings/cache/clear, DELETE /api/settings/account (account deletion with CONFIRM phrase + 2FA validation). Alembic migrations for user_sessions and user_preferences tables. Frontend: ProfileSettings (ec9dc3a6), AccountSecurity (799db3d3), NotificationPrefs (aeb1c749), AppearanceSettings (fd3dcc7b), DangerZone (2e8efd60).

Implement role-based access control middleware for FastAPI. Define three permission roles — admin (full access), accountant (clients/documents/integrations/reports), assistant (documents upload + view assigned clients only). Create FastAPI dependencies: require_role(*roles) decorator/dependency, get_current_user dependency parsing JWT from Authorization header. Apply RBAC to all API routes: /api/users/* admin-only, /api/audit/* admin-only, /api/settings/account DELETE admin-only, /api/reports/export/* accountant+admin, /api/integrations/* accountant+admin. Return 403 Forbidden with Portuguese error messages on access denial. Unit tests for all role/route combinations. This cross-cutting concern is required by backend_auth_api, backend_users_api, backend_audit_api, and all other API tasks.

As a frontend developer, implement the LoginHero section for the Login page. The section renders a decorative background with lh-deco-grid, two absolutely positioned lh-deco-circle elements, and a main content block. Content includes an eyebrow pill with lh-eyebrow-dot, an h1 with a highlighted lh-headline-brand span ('proud-documentos'), a subheadline paragraph, and a trust badges row rendered from TRUST_BADGES array (ShieldIcon/lgpd, LockIcon/security, ActivityIcon/uptime). Each badge uses BEM modifier classes (lh-badge--lgpd, lh-badge--security, lh-badge--uptime). A lh-divider-hint with lh-divider-line and lh-divider-text provides a visual transition hint toward the login form. All three icon components are inline SVGs. Import from '../styles/LoginHero.css'.

As a frontend developer, implement the LoginFormSection for the Login page. This is the core interactive section with seven useState hooks: email, password, showPassword, rememberMe, isLoading, error, emailError, and passwordError. Inline SVG icons include EyeIcon, EyeOffIcon, LockIcon, ArrowRightIcon, and AlertIcon. The handleSubmit async function validates email via regex and password length >= 6, sets field-level error states, then calls POST /api/auth/login with JSON body {email, password}. On success it redirects to /Dashboard; on non-OK response it parses data.detail for the error message. The password field toggles visibility via showPassword state controlling EyeIcon/EyeOffIcon swap. A rememberMe checkbox and a 'Esqueceu a senha?' link are included. isLoading state disables the submit button and shows a spinner. Field error states apply error modifier CSS classes. Import from '../styles/LoginFormSection.css'.

As a frontend developer, implement the LoginSecurityCallout section for the Login page. The section renders a lsc-card containing a lsc-icon-wrap with an inline LockIcon SVG (includes a filled circle cx=12 cy=16 r=1 for the keyhole detail), a lsc-text-block with an h3 headline and description paragraph, and a lsc-badges row. The badges are rendered from the securityBadges array of three items ('Criptografia Ponta a Ponta', 'Conformidade LGPD', 'Auditoria Contínua'), each as a lsc-badge span containing a dot span with staggered animation delay classes: lsc-badge-dot, lsc-badge-dot--delayed, and lsc-badge-dot--delayed2. No state or interactivity — purely presentational. Import from '../styles/LoginSecurityCallout.css'.

As a frontend developer, implement the LoginAlternativeAuth section for the Login page. The section renders a laa-divider with two laa-divider-line elements flanking a laa-divider-label span ('OU'), a laa-buttons container with two laa-sso-btn anchor tags (Google SSO and Azure AD SSO), each containing an inline multi-path colored SVG icon (GoogleIcon using four colored paths for #4285F4, #34A853, #FBBC05, #EA4335; AzureIcon using two paths for #0078D4 and #50E6FF with opacity). Both SSO buttons currently link to /Login as placeholders. A laa-footer-note paragraph contains a 'Cadastre-se gratuitamente' anchor to /Register. No state or API calls — static SSO entry points. Import from '../styles/LoginAlternativeAuth.css'.

As a frontend developer, implement the Footer section for the Login page. This component may already exist from the Landing page (task 6c9d7d61-40ce-4823-a11b-ea2d0ccd2ca9) — reuse or verify it renders correctly on the Login route. The Footer uses framer-motion AnimatePresence and useState/useEffect hooks. It renders four footerColumns (Produto, Empresa, Recursos, Legal) each with collapsible mobile accordion behavior controlled by a ChevronIcon that rotates via ftr-col-chevron--open CSS class. Social links row renders LinkedInIcon, TwitterIcon, and GitHubIcon as inline SVGs. The footer bottom bar includes copyright text with a dynamic year via new Date().getFullYear() and a status indicator. Import from '../styles/Footer.css'.

As a frontend developer, implement the DashboardSidebar section for the Dashboard page. Build a role-aware collapsible sidebar using useState and useEffect hooks. The sidebar renders a navItems array containing 6 navigation items (Painel, Clientes, Documentos, Integrações, Relatórios, Configurações) each with inline SVG icons, href, label, badge (e.g. '12' for Documentos), and a roles array for RBAC filtering. Implement collapse/expand toggle with CSS transition, active route highlighting, and badge display logic. Import DashboardSidebar.css for styling. This is a shared layout component that may already exist if implemented for another authenticated page.

As a frontend developer, implement the DashboardTopBar section for the Dashboard page. Build a top navigation bar using useState, useEffect, and useRef hooks. Features include: a live clock/date display via the custom useDateTime hook (setInterval every 1000ms, formatted with formatTime and formatDate using 'pt-BR' locale), a controlled search input with searchValue state, a notifications dropdown (notifOpen state) populated from the NOTIFICATIONS array (5 items with id, text, time, read fields) with unread badge count, and a user menu dropdown (userMenuOpen state) with MENU_ITEMS array (3 items: Meu Perfil, Configurações, Ajuda & Suporte each with SVG icons and hrefs). Implement click-outside detection via useRef for closing dropdowns. Import DashboardTopBar.css.

Implement FastAPI endpoints for document management: POST /api/documents/upload (multipart, supports batch), GET /api/documents (list with pagination, filter by client/category/status/date range/search), GET /api/documents/{id}, PUT /api/documents/{id}/category (manual re-categorize), DELETE /api/documents/{id}, GET /api/documents/stats. Document model: id, client_id, filename, original_filename, file_type, size_bytes, category (nfe/nfse/boleto/extrato/recibo/contrato/folha/darf/balanco/outros), status (pendente/categorizado/sincronizado), source (email/upload/integration), sync_status, uploaded_at, updated_at. Alembic migration. Bulk actions: POST /api/documents/bulk/categorize, POST /api/documents/bulk/delete. Frontend sections: DocumentsTable (9d616195), DocumentsFilterBar (60318204), DocumentsBulkActions (6a98a930), DocumentsPagination (d685c733), DashboardRecentDocuments (b637772a).

Implement FastAPI audit trail endpoints: GET /api/audit/logs (paginated, filter by eventType/userRole/client/status/dateRange), GET /api/audit/logs/{id} (detail including requestPayload, responseStatus, responseMs, geoHint, browser, userAgent), POST /api/audit/export/csv, POST /api/audit/export/pdf, POST /api/audit/export/json. Audit log model: id, timestamp, user_id, user_name, user_role, event_type (Login/Document/User/Export/Settings/Client), action, client_id, ip_address, geo_hint, browser, user_agent, request_payload (JSON), response_status, response_ms, status (success/failed/pending). Middleware to auto-write audit entries for all state-changing API calls. GET /api/audit/stats (event count, alert count, LGPD conformidade). Alembic migration for audit_logs table. Frontend: AuditLogTable (57e11e54), AuditFiltersBar (e8559fdb), AuditDetailModal (2e9088b7), AuditExportPanel (facd65a9), AuditPageHeader (62f3e5a6), AuditPagination (0ecaabb7).

As a frontend developer, implement the DashboardWelcomeBanner section for the Dashboard page. Build a dismissible welcome banner using a single useState hook (dismissed state). When dismissed is true, the component returns null. The banner renders two decorative background accent divs (dwb-bg-accent, dwb-bg-accent-2) and an inner layout with: a greeting row showing the user's name ('João') and role badge ('Contador') with a status dot (dwb-role-badge-dot), a subtitle with the current date string, and a stats row with three dwb-stat-chip elements separated by dwb-stat-divider — displaying UsersIcon (3 clientes ativos), FileIcon (87 documentos), and AlertIcon with dwb-stat-pending class (24 pending items). A CloseIcon button sets dismissed to true. All icons are inline SVG components with dwb-stat-chip-icon className. Import DashboardWelcomeBanner.css.

As a frontend developer, implement the DashboardStatsCards section for the Dashboard page. Build a metrics card grid using useState and useEffect hooks. Render 4 metric cards from the metrics array: 'Total de Clientes' (148, blue variant, UsersIcon, trend +12 up), 'Documentos Este Mês' (2.340, orange variant, FileTextIcon, trend +18% up), 'Tempo Médio de Processamento' (1,4h, green variant, ClockIcon, trend -22% down-good, showProgress true with progressValue 72), and 'Status das Integrações' (5/5, yellow variant, ZapIcon, trend 100% neutral, showStatus true). Implement the TrendBadge sub-component that conditionally applies dsc-trend--up, dsc-trend--down, or dsc-trend--neutral CSS classes and renders directional arrows (▲/▼/●). Conditionally render a progress bar when showProgress is true and a status indicator when showStatus is true. All icons are inline SVG components. Import DashboardStatsCards.css.

As a frontend developer, implement the DashboardQuickActions section for the Dashboard page. Build a quick-action button grid using useState hook. The section header uses BoltIcon (polygon SVG). Render 8 action buttons each with a dedicated SVG icon component: UserPlusIcon (Novo Cliente), UploadIcon (Upload Documento), SyncIcon (Sincronizar Integrações), ChartIcon (Gerar Relatório), TagIcon (Categorizar Documentos), UsersIcon (Gerenciar Usuários), FolderIcon (Organizar Pastas), AuditIcon (Auditoria). Each button has a dqa-btn-icon class on its SVG and navigates to its respective href. Implement hover state styling via CSS classes. Import DashboardQuickActions.css.

As a frontend developer, implement the DashboardRecentDocuments section for the Dashboard page. Build a paginated document table/list using useState, useRef, and useEffect hooks. Render 10 documents from the DOCUMENTS array, each with: id, name, category, type (xml/pdf/xls/doc/img), client name, clientId, date, time, and status. Implement STATUS_CONFIG mapping for 4 statuses: pending (drd-badge--pending), reviewed (drd-badge--reviewed), categorized (drd-badge--categorized), needs-review (drd-badge--needs-review). Build a pagination system (PAGE_SIZE constant) with prev/next controls and page indicator. Implement per-row action menus (useRef for outside-click detection) with options like view, download, and categorize. Render file-type badges and client avatars with initials. Add filtering controls by status or type. Import DashboardRecentDocuments.css.

As a frontend developer, implement the DashboardClientOverview section for the Dashboard page. Build a client overview card grid using useState hook. Render 6 clients from the CLIENTS array, each with: id, name, type (Empresa Ltda./MEI/S.A./Microempresa/Startup/Produtor Rural), initials, avatarColor (hex: #1A73E8, #FF7043, #00C853, #9C27B0, #E91E63, #795548), docCount, lastUpload date and lastUploadSub relative string, categorized percentage, and status (active/pending/inactive). Each card renders a colored avatar with initials, a categorization progress bar (categorized % width), status badge, and three action icon buttons: EyeIcon (view), MailIcon (email), SyncIcon (sync). Render a section footer with ArrowRightIcon linking to /Clients. Import DashboardClientOverview.css.

As a frontend developer, implement the DashboardUpcomingTasks section for the Dashboard page. Build a weekly task planner using useState hook initialized with INITIAL_DAYS array (3 day groups: Segunda-feira/12 Mai, Terça-feira/13 Mai isToday=true, Quarta-feira/14 Mai). Each day group contains 2-3 tasks with fields: id, title, desc, priority (high/normal), type (Revisão/Integração/Follow-up/Prazo Legal/Categorização/Administrativo/Relatório), time, assignee (initials, name, colorIdx referencing ASSIGNEE_COLORS array of 6 hex colors), and completed boolean. Implement task toggle (completed state) per task. Render assignee avatars with dynamic background color from ASSIGNEE_COLORS[colorIdx]. Highlight today's day group (isToday). Show priority badges and task type chips. Import DashboardUpcomingTasks.css.

As a frontend developer, implement the DashboardNotifications section for the Dashboard page. Build a notification feed using useState hook initialized with INITIAL_NOTIFICATIONS array of 7 notifications. Each notification has: id, type (Categorização/E-mail Recebido/Sincronização/Usuário Convidado/Relatório/Alerta), message, timestamp, icon (emoji), iconClass (dn-icon-bubble--green/blue/purple/orange/yellow), unread boolean, actionLabel, and actionHref. Render BellIcon (path + path SVG) in the section header with an unread count badge. Implement mark-as-read per notification via CloseIcon (CloseIcon SVG 14x14) dismiss button that updates unread state. Render ClockIcon (circle + polyline) for timestamps. Display action links (actionLabel → actionHref) per notification. Show a 'mark all read' control. Import DashboardNotifications.css.

As a frontend developer, implement the Navbar section for the Clients page. This component may already exist from Landing, Login, or Dashboard pages — reuse or reference the existing Navbar component. It uses useState for mobileOpen toggle, useScroll and useTransform from framer-motion to animate a scroll-progress underline, and AnimatePresence for mobile menu transitions. The animated SVG logo draws 4 motion.path elements sequentially (document outline, fold corner, document lines, checkmark) with staggered pathLength animations (delays 0, 0.6, 0.9, 1.2s). NAV_LINKS array includes Painel, Clientes, Documentos, Integrações, Relatórios with their respective hrefs. Navbar CSS (6286 chars) includes nb-root, nb-inner, nb-logo-wrap, nb-logo-svg, nb-logo-text, nb-links, nb-link-item, nb-link classes.

As a frontend developer, implement the shared Navbar section for the Integrations page. This component (may already exist from Clients/Documents pages) uses React useState for mobileOpen toggle and Framer Motion's useScroll/useTransform for a scroll-progress underline animation. The animated SVG logo draws four motion.path elements sequentially (document outline, fold corner, document lines, check mark) using pathLength animations with staggered delays from 0.8s to 1.2s. NAV_LINKS array includes 5 routes: Painel, Clientes, Documentos, Integrações, Relatórios. Desktop nav renders links with animated underline; mobile nav uses AnimatePresence for slide-in drawer. Depends on Dashboard page task to establish cross-page chain.

As a frontend developer, implement the Navbar section for the Users page. This is the same Navbar component used across all pages — it may already exist from previous pages (Integrations, Reports). The component uses framer-motion for an animated SVG logo with sequential path draws (document outline, fold corner, document lines, checkmark), a useScroll hook with useTransform for a scroll-driven underline scaleX animation, and a mobileOpen useState toggle for the hamburger menu. NAV_LINKS includes Painel (/Dashboard), Clientes (/Clients), Documentos (/Documents), Integrações (/Integrations), Relatórios (/Reports). Includes AnimatePresence for mobile menu transitions. Verify the component renders correctly in the Users page context.

As a frontend developer, implement the Navbar section for the Settings page. This component uses framer-motion's useScroll and useTransform hooks to animate an underline based on scrollYProgress. The logo features a sequenced SVG path-draw animation (document outline, fold corner, document lines, check mark) using motion.path with staggered pathLength transitions (0.8s, 0.5s, 0.4s, 0.35s delays). NAV_LINKS array defines desktop navigation (Painel, Clientes, Documentos, Integrações, Relatórios). Mobile menu uses useState(false) and AnimatePresence for toggle. Import from '../styles/Navbar.css'. This Navbar component is shared across pages and may already exist from previous pages (Users, Reports, Integrations, etc.) — reuse if available.

Implement email ingestion service that receives documents sent to client-specific addresses (e.g. nome-cliente@docs.proud-documentos.com). Uses SMTP/IMAP polling or webhook (e.g. Mailgun/SendGrid inbound parse). On receipt: parse attachments (PDF, XLS, XLSX, DOC, DOCX, image formats), resolve client from recipient address, call auto-categorization rules engine, store document via Documents API. Expose POST /api/email/inbound webhook endpoint. Store email metadata (sender, subject, received_at) alongside document. Alembic migration for email_ingestion_log table. Referenced by LandingFeatures (21de0438) and DocumentsFlow3D (b6459dcf) as a document source.

Implement the auto-categorization rules engine as a FastAPI service module. Rules model: id, client_id (nullable for global rules), rule_type (filename_pattern/sender_email/file_extension/keyword), pattern (regex or string), target_category, priority, is_active. Endpoints: GET /api/rules, POST /api/rules, PUT /api/rules/{id}, DELETE /api/rules/{id}. Engine function apply_rules(document) -> category: evaluates rules in priority order, returns matched category or 'outros'. Called synchronously on upload and email ingest. Alembic migration for categorization_rules table. Seed data with 10 default global rules (e.g. filename contains 'NF' -> nfe, extension .xml -> nfe, sender contains 'sefaz' -> nfe). Referenced by LandingFeatures (21de0438), DocumentsFilterBar (60318204), NotificationPrefs (aeb1c749).

Implement FastAPI endpoints for reports and analytics: GET /api/reports/documents (filterable by client/category/date range/status, paginated), GET /api/reports/stats (KPI metrics: total processed, categories generated, accuracy rate, avg processing time), GET /api/reports/charts/category-bar (grouped bar data by document type), GET /api/reports/charts/distribution (donut slice data), GET /api/reports/charts/trend (monthly line chart data). Export endpoints: POST /api/reports/export/csv, POST /api/reports/export/pdf (returns file stream), POST /api/reports/export/email (schedules email delivery). Scheduling: GET /api/reports/schedules, POST /api/reports/schedules, PUT /api/reports/schedules/{id}, DELETE /api/reports/schedules/{id}. Alembic migration for report_schedules table. Frontend: ReportsInsights (1fd2bbc6), ReportsCharts (789b4393), ReportsDataTable (170d7121), ReportsFilter (c8098c0d), ReportsExport (42c5c30b), ReportsScheduling (5d688682).

Implement FastAPI endpoints for dashboard data aggregation: GET /api/dashboard/stats (total clients, documents this month, avg processing time, integrations status — used by DashboardStatsCards bddc99d6), GET /api/dashboard/recent-documents (last 10 docs with status, category, client — used by DashboardRecentDocuments b637772a), GET /api/dashboard/clients-overview (6 clients with categorized %, last upload, status — used by DashboardClientOverview 8b40a478), GET /api/dashboard/upcoming-tasks (weekly task planner grouped by day — used by DashboardUpcomingTasks 0cd1e780), GET /api/dashboard/notifications (unread notification feed — used by DashboardNotifications 2c9ead79 and DashboardTopBar f4dff72b). These are aggregation/read-only endpoints that combine data from clients, documents, and integrations tables. No new migrations needed.

Implement backend file storage service for document uploads. FastAPI endpoint POST /api/documents/upload accepts multipart/form-data with files[] array and client_id. Validates file types (PDF, XLS, XLSX, DOC, DOCX, JPG, PNG, XML) and size limits (max 50MB per file, 200MB per batch). Saves files to configured storage backend (local /uploads directory for dev, S3 for prod via boto3). Returns list of created document records with auto-categorization applied. Supports concurrent uploads (async handlers with asyncio). GET /api/documents/{id}/download returns file stream with correct Content-Type and Content-Disposition headers. Referenced by DocumentsUploadPrompt (4ea1317e) which simulates upload progress — wire to real endpoint. Alembic migration already covered by backend_db_migrations.

As a frontend developer, implement the ClientsPageHeader section for the Clients page. Uses useRef (innerRef, statsRef) and useEffect with GSAP context to orchestrate entrance animations: stagger reveal of .cph-breadcrumb (opacity/y -10, 0.4s), .cph-title-group (opacity/y 16, 0.5s, delay 0.1), .cph-actions (opacity/x 12, 0.45s, delay 0.2), and .cph-stat-item (stagger 0.07, delay 0.3). Also animates count-up for .cph-stat-value[data-count] elements using gsap.to on an obj.val over 1.0s. Stats array renders 4 stat cards: Total Clientes (248, primary), Ativos Este Mês (31, accent), Novos em Maio (12, accent), Pendentes (5, secondary). Includes PlusIcon and UploadIcon SVG components for action buttons. Decorative .cph-bg-accent and .cph-bg-accent2 blobs as aria-hidden divs. CSS (7038 chars) covers cph-root, cph-inner, cph-breadcrumb, cph-title-group, cph-actions, cph-stat-item, cph-stat-value classes.

As a frontend developer, implement the ClientsFilterBar section for the Clients page. Uses useState for search, status, and type filter state, and useCallback for handlers. Renders SearchIcon (circle+line), CloseIcon, FilterIcon, SortAlphaIcon, SortCalendarIcon, ArrowUpIcon, XSmallIcon, and TrashIcon SVG components. STATUS_LABELS map covers empty/ativo/inativo; TYPE_LABELS covers empty/pj/pf; SORT_OPTIONS array has nome (SortAlphaIcon) and criacao (SortCalendarIcon). Implements active filter chips with XSmallIcon dismiss buttons, a 'Limpar Filtros' button with TrashIcon that resets all state, and sort direction toggle via ArrowUpIcon. CSS (11897 chars) includes cfb-root, cfb-search-wrap, cfb-filter-group, cfb-sort-btn, cfb-chip, cfb-clear-btn classes.

As a frontend developer, implement the ClientsTable section for the Clients page. Uses useState to manage row-level action menus and selected rows. Renders a CLIENTS array of 7 mock records (CLI-0041 through CLI-0019) each with id, name, initials, avatarClass (ct-avatar--blue/green/orange/purple/teal/red/amber), email, docs count, lastUpload date, and status (Ativo/Inativo). Table columns include a checkbox column, client avatar+name+id, email, docs count, lastUpload, status badge, and actions column with EditIcon (pencil path), ViewIcon (eye/circle), DeleteIcon (trash polyline), and MoreIcon (3 circles) SVGs. SortIcon (ct-th-sort-icon class) appears on sortable column headers. CSS (8940 chars) covers ct-root, ct-table, ct-thead, ct-tbody, ct-tr, ct-td, ct-avatar, ct-avatar-- color modifiers, ct-status-badge, ct-actions-cell classes.

As a frontend developer, implement the ClientsEmptyState section for the Clients page. Renders a static empty-state section with aria-label 'Nenhum cliente encontrado'. Contains a .ces-icon-wrap with .ces-icon-bg and 3 floating accent dots (.ces-dot--1/2/3 as aria-hidden spans). The composite SVG (52x52 viewBox) combines a document body path (.ces-doc-path, stroke #1A73E8), a fold corner path (.ces-doc-path), a user circle head (.ces-user-path, stroke #00C853, r=5 at cx=26 cy=26), and a user shoulders arc (.ces-user-path). Below the icon: .ces-headline h2 ('Nenhum Cliente Encontrado'), .ces-description paragraph with onboarding copy, and a .ces-cta anchor to /Clients with a plus-circle SVG icon. CSS (4975 chars) covers ces-root, ces-container, ces-icon-wrap, ces-icon-bg, ces-dot, ces-icon-svg, ces-doc-path, ces-user-path, ces-headline, ces-description, ces-cta classes.

As a frontend developer, implement the ClientsPagination section for the Clients page. Uses useState for currentPage (default 1), itemsPerPage (default 25), and jumpValue (string). TOTAL_CLIENTS is 247, ITEMS_PER_PAGE_OPTIONS is [10, 25, 50]. Implements buildPageNumbers(currentPage, totalPages) that returns arrays with '...' ellipsis for large page sets (≤4 from start, ≥4 from end, or middle window). Renders ChevronLeftIcon and ChevronRightIcon SVG buttons for prev/next with cpg-btn--disabled class when at boundaries. Page number buttons render ellipsis as non-interactive spans. Includes an items-per-page select dropdown and a jump-to-page input with Enter key (handleJumpKeyDown) and button (handleJumpBtn) handlers that call goToPage with Math.max/min clamping. Info text shows startItem–endItem of TOTAL_CLIENTS. CSS (6007 chars) covers cpg-root, cpg-inner, cpg-info, cpg-controls, cpg-btn, cpg-btn--disabled, cpg-page-btn classes.

As a frontend developer, implement the ClientsActionPanel section for the Clients page. Uses useState for visible (default false) and collapsed (default false), with a useEffect that sets visible=true after a 120ms setTimeout to trigger CSS entrance animation. Renders a STATS array of 3 items: Total de Clientes (148, primary, users SVG), Clientes Ativos (112, accent, active-user+checkmark SVG), Documentos Pendentes (34, secondary, document+plus SVG). Panel has .cap-panel--visible class toggled on mount. Header includes .cap-panel-title 'Resumo Rápido', a .cap-panel-dot indicator, and a ChevronUpIcon toggle button with .cap-toggle-btn--collapsed class and aria-expanded. Stats wrapper uses .cap-stats-wrapper--collapsed to hide/show content. CSS (7181 chars) covers cap-root, cap-panel, cap-panel--visible, cap-panel-header, cap-panel-title, cap-panel-dot, cap-toggle-btn, cap-toggle-btn--collapsed, cap-stats-wrapper, cap-stats-wrapper--collapsed, cap-stats classes.

As a frontend developer, implement the ClientsOnboarding section for the Clients page. Uses useState for dismissing (false) and dismissed (false). handleClose sets dismissing=true then after 400ms sets dismissed=true; when dismissed=true the component returns null. Renders a .co-banner with .co-dismissing class applied during the exit transition, role='status' and aria-live='polite'. Contains: .co-icon-wrap with TipIcon SVG (info circle), .co-body with .co-headline h3 'Comece Aqui', .co-description paragraph with onboarding copy about adding first client and email assignment, and .co-actions row with .co-tutorial-link anchor to /Documents ('Ver Tutorial' + ArrowRightIcon) and .co-step-tag span (CheckCircleIcon + 'Passo 1 de 3: Cadastrar cliente'). Close button uses CloseIcon SVG with aria-label 'Fechar dica de boas-vindas'. CSS (3617 chars) covers co-root, co-banner, co-dismissing, co-icon-wrap, co-body, co-headline, co-description, co-actions, co-tutorial-link, co-step-tag, co-close-btn classes.

As a frontend developer, implement the ClientsQuickActions section for the Clients page. Uses useState for selectedCount (default 5), toast (null), and isVisible (true), plus useCallback for showToast (sets toast message then clears after 2800ms), handleExport (CSV export toast), handleBulkAssign (assign documents toast), handleDeactivate (deactivate clients toast), and handleClear (resets selectedCount to 0). DEMO_COUNTS array [0,1,5,12] drives a selector for previewing different selection states. Action buttons render ExportIcon (download arrow), AssignIcon (user+plus), DeactivateIcon (circle with diagonal), CheckIcon, UsersIcon, and CloseIcon SVGs. Toast notification appears/disappears with the toast state string. CSS (6764 chars) covers cqa-root, cqa-bar, cqa-count-selector, cqa-action-btn, cqa-toast classes.

As a frontend developer, implement the Footer section for the Clients page. This component may already exist from Landing, Login, or Dashboard pages — reuse or reference the existing Footer component. Uses useState and useEffect from React plus motion and AnimatePresence from framer-motion. Renders 4 footerColumns (Produto, Empresa, Recursos, Legal) each with title and links array. On mobile, columns are collapsible with ChevronIcon (ftr-col-chevron--open class toggle). Social links row includes LinkedInIcon, TwitterIcon, GitHubIcon SVGs linking to external URLs with aria-labels. Bottom bar includes copyright text and LGPD compliance note. CSS (4741 chars) covers ftr-root, ftr-inner, ftr-cols, ftr-col, ftr-col-chevron, ftr-col-chevron--open, ftr-col-links, ftr-social, ftr-bottom classes.

As a frontend developer, implement the Navbar section for the Documents page. This component (likely already exists from the Clients page — reuse or verify) renders a responsive navigation bar using Framer Motion's useScroll and useTransform hooks to drive a scroll-progress underline (scaleX from 0 to 1). Features an animated SVG logo with sequential pathLength draw animations (document outline at 0.8s, fold corner at 0.5s delay 0.6s, document lines at 0.4s delay 0.9s, checkmark at 0.35s delay 1.2s). Includes NAV_LINKS array with 5 routes (Painel, Clientes, Documentos, Integrações, Relatórios), mobile hamburger toggle via useState(mobileOpen), and AnimatePresence for mobile menu. Imports Navbar.css.

As a frontend developer, implement the IntegrationsHero section with GSAP-driven entrance animations and a Canvas decorative background. Uses useState for activeFilter (default 'all') and searchValue, plus seven useRefs (eyebrowRef, headlineRef, subRef, statsRef, searchRef, filtersRef, logosRef) for staggered GSAP timeline animations (power3.out, delays from 0.1s to 0.85s). The Canvas effect draws animated connection-line nodes using requestAnimationFrame on a DPR-aware canvas with resize listener. Renders FILTER_TAGS (6 tags: Todos/ERP/Contabilidade/Fiscal/Bancário/API with counts), a SearchIcon SVG input field, and INTEGRATION_LOGOS row (6 logos with brand colors). Cleanup via gsap.context revert and cancelAnimationFrame on unmount.

As a frontend developer, implement the IntegrationsAvailable section displaying a filterable grid of 9+ integration cards (ERP Brazil, Contazo, Bluesoft, Omie, TOTVS, NFe.io, Sage X3, Alterdata, Questor and more). Each card object includes id, name, desc, status ('connected'|'available'|'beta'), logo initials, logoClass for CSS color theming, tags array, category, and usersCount. Implement useState for active category filter and search, useRef for GSAP scroll-triggered card stagger animations (power2.out). Cards display status badges with color coding, tag pills, and user count. GSAP context used for entrance animation cleanup on unmount.

As a frontend developer, implement the IntegrationsFeatured section with a tabbed interface showing 3 featured integrations: ERP Popular, Sistema NF-e, and Bank Sync. Uses useState for activeTab (default 'erp') and GSAP for animated tab-content transitions. Each integration object has tabLabel, tabIconPath (SVG path string), visualClass for themed card background, brandName, brandTag, name, desc, a features array (5 bullet points each), and a stats array (3 metrics). The active tab panel renders a feature list with check icons and a stats row. GSAP animates content exit/enter on tab switch using opacity/y transforms. Tab bar renders SVG icons from tabIconPath strings.

As a frontend developer, implement the IntegrationsCategories section using both Framer Motion and GSAP. Renders CATEGORIES array (accounting, banking, and more) as a sidebar tab list with inline SVG icons; each category contains an integrations sub-array with name, desc, status ('active'|'available'|'coming'), tags, color, and emoji. Uses useState for activeCategory and AnimatePresence for animated panel transitions (Framer Motion). GSAP handles scroll-triggered stagger entrance of category tabs on mount via useRef and gsap.context. Integration cards within the active panel display status badges, colored backgrounds from the data, tag pills, and emoji identifiers. Cleanup via ctx.revert() on unmount.

As a frontend developer, implement the IntegrationsSync section — an advanced sync configuration panel. Uses useState for: activeFreq (sync frequency selector from FREQ_OPTIONS: realtime/hourly/daily), selectedConflictRule (from CONFLICT_RULES: remote/local/manual), fieldMappings state from FIELD_MAPPINGS array (5 field pairs, some unmapped), and expandedPanel for collapsible ADVANCED_PANELS (retry policy, sync log, and more). FREQ_OPTIONS render as selectable cards with iconType-based SVG icons and badge labels. FIELD_MAPPINGS renders a visual source→target mapper with mapped/unmapped indicators. CONFLICT_RULES render as radio-style selection cards. ADVANCED_PANELS use AnimatePresence for accordion expand/collapse with toggle and select controls driven by stateKey references. GSAP handles section entrance animations.

As a frontend developer, implement the IntegrationsAPIAccess section — the most complex section, with API key management, live event logs, OAuth app manager, code example viewer, and documentation links. Uses useState for: keyVisible (toggle between FULL_API_KEY and MASKED_API_KEY), logs (from INITIAL_LOGS — 6 entries with time/event/source/status), oauthApps (from OAUTH_APPS — 3 apps with enabled toggle), and activeDocTab. useRef targets GSAP entrance animations for the entire section. The code example viewer renders CODE_EXAMPLE token array with syntax highlighting by type (comment/keyword/string/prop/text/newline). INITIAL_LOGS renders a live-updating log list with color-coded status badges (success/pending/error). OAUTH_APPS renders toggle switches per app. DOC_LINKS (4 links with icon types: api/webhook/sdk/play) render as documentation quick-access cards. useCallback optimizes log polling simulation. GSAP animates section entrance with staggered panels. Cleanup via ctx.revert.

As a frontend developer, implement the IntegrationsSupport section with an accordion FAQ and a knowledge base links panel. Renders FAQ_ITEMS array (6 items with id/question/answer) as an accordion using useState for openFaqId — clicking a question expands its answer with CSS height transition and rotates the ChevronDownIcon SVG (className toggled to open state). Renders KB_LINKS array (5 links) as a quick-access list with HelpCircleIcon decorations. Uses useEffect with useRef for scroll-triggered CSS class addition (no GSAP in this section). ChevronDownIcon and HelpCircleIcon are inline SVG functional components.

As a frontend developer, implement the IntegrationsStatus section — a live service status dashboard. Renders SERVICES array (6 services: NF-e Sync, ERP Brazil Connect, Contazo API, Bluesof Connector, Email Ingest, Storage) with status ('operational'|'degraded'|'down'), uptime percentage, emoji icon, and description. Uses useState for syncing (refresh animation toggle) and GSAP for stagger entrance of service rows via useRef. Renders a 90-day uptime history bar chart using generateHistory() (deterministic random with forced degraded days at indices 83/87). STATUS_LABELS maps status keys to Portuguese labels. INCIDENTS array (2 incidents: 1 unresolved, 1 resolved) renders as an incident timeline with resolved/unresolved badges. RefreshIcon and CheckCircleIcon are inline SVG functional components. GSAP ctx.revert() cleanup on unmount.

As a frontend developer, implement the IntegrationsCTA section — a scroll-triggered call-to-action with GSAP ScrollTrigger. Registers ScrollTrigger plugin on module load. Uses four useRefs (rootRef, cardRef, statsRef, headlineRef, ctasRef) for a GSAP timeline triggered at 'top 82%' viewport with once:true. Animation sequence: statsRef fades in (0.55s), cardRef scales from 0.97 and fades (0.65s, power3.out), headlineRef and ctasRef stagger in. Renders FEATURES array (3 bullet points with CheckIcon SVG), STATS array (3 metrics: 40+ integrations, 99.9% uptime, 5 min to connect), primary CTA button with ArrowRightIcon, secondary button with PuzzleIcon, and a trust badge with LockIcon. Decorative background div uses CSS for gradient. ScrollTrigger.getAll().forEach(st => st.kill()) on cleanup.

As a frontend developer, implement the shared Footer section for the Integrations page (component may already exist from Clients/Documents pages). Uses useState for openColumn (mobile accordion) and useEffect for copyright year. Renders footerColumns array (4 columns: Produto/Empresa/Recursos/Legal, each with 4-5 href links). Mobile view uses AnimatePresence with ChevronIcon (className toggled via isOpen prop) for collapsible columns. socialLinks array renders 3 icons (LinkedInIcon, TwitterIcon, GitHubIcon as inline SVG components) as anchor tags. Bottom bar shows brand logo text, copyright, and social links row. Framer Motion used for mobile column expand/collapse animations.

As a frontend developer, implement the ReportsNavBar section for the Reports page. This reuses the shared Navbar component (may already exist from previous pages). The navbar uses framer-motion's useScroll and useTransform hooks to animate a scroll-progress underline via scrollYProgress → underlineScaleX transform. The animated SVG logo draws 4 motion.path elements sequentially: document outline (0.8s), fold corner (0.5s delay 0.6s), document lines (0.4s delay 0.9s), and a check mark in white (0.35s delay 1.2s) — all using pathLength 0→1. The NAV_LINKS array includes 5 routes: Painel, Clientes, Documentos, Integrações, Relatórios. Mobile menu uses useState(false) for mobileOpen and AnimatePresence for open/close transitions. Imports from '../styles/Navbar.css'.

As a frontend developer, implement the UsersPageHeader section for the Users page. This section uses three useState hooks: searchValue, roleFilter, and statusFilter. It renders a breadcrumb nav (Painel → Usuários), a top row with title 'Gerenciar Usuários', subtitle, and stat badges showing '24 usuários' / '19 ativos'. It includes two filter selects (ROLE_OPTIONS: Todos os perfis/Administrador/Contador/Assistente and STATUS_OPTIONS: Todos os status/Ativos/Inativos/Pendentes), a search input with SearchIcon and XIcon clear button, active filter chip row with per-chip clear and a 'clearAll' handler, and a CTA button to invite users. Decorative uph-bg-grid and uph-bg-glow divs provide visual background treatment via CSS.

As a frontend developer, implement the UsersTable section for the Users page. The component uses useState for sortField, sortDirection, selectedRows (Set), currentPage, and itemsPerPage. USERS_DATA contains 8 realistic Brazilian users (USR-001 through USR-008) with fields: id, name, email, role/roleLabel (admin/accountant/assistant), status (active/inactive), lastLoginDate/Time, initials, avatarClass (ut-avatar--blue/green/orange/purple/teal). The table renders sortable column headers with SortIcon (using useMemo for sorted/paginated data), per-row checkboxes with a select-all header checkbox, avatar initials circles, role badges, status badges, last-login display, and an actions column with EditIcon and TrashIcon buttons. Pagination controls show ITEMS_PER_PAGE_OPTIONS [5,8,10,20] selector and prev/next navigation. Includes a responsive card layout for mobile viewports.

As a frontend developer, implement the UsersModal section for the Users page. This is a complex modal form with useState hooks for: name, email, selectedRole, password, confirmPassword, showPassword, showConfirmPassword, errors (object), isSubmitting, and submitSuccess. Icon components include UserIcon, MailIcon, ShieldIcon, LockIcon, EyeIcon, EyeOffIcon, XIcon, PlusIcon, CheckIcon, ChevronDown. ROLES array has administrador/contador/assistente with badgeClass variants. The modal has a custom role selector dropdown (not a native select) that renders role badges, password fields with visibility toggles (showPassword/showConfirmPassword state), inline validation error messages via errors state, a loading/submitting state on the submit button, and a success confirmation view after submitSuccess. Uses useCallback for handlers. Modal backdrop click closes the modal. Renders as an overlay portal-style panel.

As a frontend developer, implement the UsersPermissions section for the Users page. The component uses useState for activeRole (default 'admin') and tooltip state, plus useEffect and useRef for tooltip positioning. FEATURES array has 7 items (dashboard, clients, documents, integrations, reports, settings, audit) each with per-role access levels: 'full', 'partial', or 'none', plus tip strings per role. ROLES has admin/accountant/assistant with badgeMod variants. Renders a role selector tab row (3 tabs), then a permissions grid/table showing each feature row with icon, name, desc, and access indicator icons: CheckIcon (full), HalfIcon (partial), LockIcon (none) — each with a tooltip on hover showing the tip string. The active role tab controls which column's access is highlighted. Responsive: collapses to a single-column view per selected role on mobile.

As a frontend developer, implement the UsersBulkActions section for the Users page. Uses framer-motion (motion, AnimatePresence) and gsap for animations. State hooks: selectedUsers (Set), roleDropdownOpen, confirmAction (null or action object), toastMessage. SAMPLE_USERS has 5 users with avatarColor and initials. ROLES has admin/accountant/assistant with color and bg style objects. Renders a user selection list with checkboxes, a bulk action toolbar that animates in (AnimatePresence) when selectedUsers.size > 0, showing count badge and three action buttons: TrashIcon (delete), ShieldIcon+ChevronDown (change role dropdown with AnimatePresence), UserXIcon (deactivate). The role dropdown renders ROLES as styled option buttons. A confirmation dialog (motion.div) appears for destructive actions. On confirm, a toast notification animates in using gsap. CheckCircleIcon and XIcon used in confirmation/toast UI.

As a frontend developer, implement the UsersAuditLog section for the Users page. Uses useState for activeFilter (action type), expandedLog (id or null), and currentPage. AUDIT_LOGS has 6+ entries with fields: id, date, time, admin (name/initials/color), actionType (login/permission/create/logout/delete), actionLabel, actionDetail, targetName, targetEmail, status (success/info/warning/error), statusLabel, ip, device, sessionId, location. Renders a filter tab row by actionType (All + each unique type). Each log row shows admin avatar, actionLabel+actionDetail, target user info, status badge, and a timestamp. Clicking a row expands an inline detail panel (expandedLog state) showing ip, device, sessionId, location in a grid. Includes pagination controls. Action type filter narrows visible logs. Status badges use color variants for success/info/warning/error.

As a frontend developer, implement the UsersEmptyState section for the Users page. Uses gsap for an entrance animation timeline coordinated across multiple refs: illustrationRef (scale from 0.7 + opacity), headlineRef (y+opacity), subtextRef (y+opacity), ctaRef (y+opacity), tipsRef.current.children (staggered opacity+y). The illustration renders decorative divs (ues-illustration-bg, ues-illustration-ring, ues-dot--1/2/3) and an inline SVG showing a user silhouette circle+path and a plus-icon overlay circle. Three tips array items render with colored dot indicators (ues-tip-dot--green/blue/orange): 'Defina permissões por papel', 'Convide contadores e assistentes', 'Controle acesso granular'. Includes a CTA button to add the first user. The gsap context is properly cleaned up on unmount via ctx.revert().

As a frontend developer, implement the Footer section for the Users page. This Footer component may already exist from previous pages (Integrations, Reports). Uses useState for expandedCol (mobile accordion) and useEffect for scroll position. footerColumns has 4 columns: Produto (5 links including /Documents, /Clients, /Integrations, /Reports, /Audit), Empresa (4 links), Recursos (4 links including /Login), Legal (4 links with LGPD compliance). ChevronIcon rotates based on isOpen prop. socialLinks renders LinkedIn, Twitter, GitHub using AnimatePresence and motion for hover effects. Mobile: accordion expand/collapse per column using expandedCol state. Desktop: all columns visible in a grid. Footer bottom bar shows copyright and social icons. Uses framer-motion AnimatePresence for column link reveal animations.

As a frontend developer, implement the SettingsSidebar section for the Settings page. This component renders a vertical navigation sidebar with 7 menu items: Perfil (UserIcon), Segurança da Conta (ShieldIcon), Notificações (BellIcon), Integrações (LinkIcon), Aparência (PaletteIcon), Zona de Perigo (AlertTriangleIcon), and a general SettingsGearIcon entry. Each icon is an inline SVG component defined within the file. The sidebar uses useState to track the active section and highlights the selected item. Import from '../styles/SettingsSidebar.css'. Coordinates with the main settings content area to drive section visibility.

As a frontend developer, implement the SettingsHeader section for the Settings page. This component renders a page header with a breadcrumb navigation (Painel > Configurações) using ChevronIcon SVG, a title row with SettingsIcon and h1 'Configurações', a descriptive paragraph about managing profile/security/notifications/integrations/appearance, and a meta row displaying two badges: 'Conta Ativa' (with animated dot indicator) and 'Plano Profissional' (with StarIcon SVG), plus a ClockIcon with last-updated timestamp. All icons are inline SVGs. Import from '../styles/SettingsHeader.css'.

As a frontend developer, implement the Footer section for the Settings page. This component uses framer-motion AnimatePresence and motion for column expand/collapse on mobile (useState per column tracking open state via ChevronIcon rotation). footerColumns array defines 4 columns: Produto (5 links to Documents, Clients, Integrations, Reports, Audit), Empresa (4 links), Recursos (4 links), Legal (4 links including Conformidade LGPD). socialLinks array renders LinkedIn, Twitter, GitHub with inline SVG icons. Footer includes logo, tagline, copyright notice, and newsletter/contact area. Uses useEffect for any responsive behavior. Import from '../styles/Footer.css'. This Footer component is shared across pages and may already exist from previous pages (Integrations, Reports, Users) — reuse if available.

As a frontend developer, implement the AuditNavbar section for the Audit page. Reuse the shared Navbar component (may already exist from previous pages). The navbar renders NAV_LINKS array with routes to Dashboard, Clients, Documents, Integrations, and Reports. Features include: animated SVG logo with sequential framer-motion pathLength draws (document outline at 0.8s, fold corner at 0.5s/delay 0.6s, document lines at 0.4s/delay 0.9s, check mark at 0.35s/delay 1.2s); desktop link list with hover underline animations; mobile hamburger toggle using useState(mobileOpen); AnimatePresence-driven mobile menu drawer; useScroll + useTransform scroll progress underline indicator. Imports Navbar.css. Chain page-level dependency from Clients page.

As a frontend developer, implement the DocumentsHero section for the Documents page. Renders a full-width hero with a parallax background layer (dh-bg-layer) containing a CSS grid, three animated blobs (dh-bg-blob--1/2/3), and three floating decorative document SVG icons (dh-deco-icon--tl/tr/br) with inline style translateY using a CSS variable --scroll. Uses Framer Motion containerVariants with staggerChildren: 0.08 and delayChildren: 0.1, lineVariants (opacity+y:24, cubic ease [0.22,1,0.36,1]), fadeUpVariants, badgeVariants (scale spring [0.34,1.56,0.64,1]), and underlineVariants (scaleX 0→1, delay 0.4s). Displays statsData array of 3 items (📁 10.000+ documentos, ⚡ 98% categorização, 🔒 100% LGPD). Imports DocumentsHero.css.

As a frontend developer, implement the DocumentsFlow3D section for the Documents page. A complex 3D canvas visualization using @react-three/fiber Canvas, THREE.js, Framer Motion, GSAP with ScrollTrigger plugin registered via gsap.registerPlugin(ScrollTrigger). Renders 6 DOCUMENTS (NF, Extrato, Recibo, Contrato, Balancete, DARF) as DocumentMesh sub-components inside the Canvas. Each mesh uses useFrame for per-frame lerp animation between SOURCE_POSITIONS (email: Vector3(-4.5,2,0), upload: Vector3(4.5,2,0), integration: Vector3(0,-3.5,0)) and HUB_POS origin based on scrollProgress. Uses posRef, colorRef, timeRef, glowRef, meshRef internal refs. ORBIT_OFFSETS array of 6 Vector3 positions for hub clustering. Outside Canvas: useState for selectedDoc and hoveredDoc, useRef for scroll progress, useCallback for event handlers. AnimatePresence for detail panel overlay. GSAP ScrollTrigger drives scrollProgress value. Imports DocumentsFlow3D.css.

As a frontend developer, implement the DocumentsFilterBar section for the Documents page. Features a rich filter UI with multiple useState hooks: search (text), category (from CATEGORIES array of 11 options including nfe, nfse, boleto, extrato, recibo, contrato, folha, darf, balanco, outros), status (from STATUSES: pendente, categorizado, sincronizado), dateFrom, dateTo, sortBy (date/name/category), and drawerOpen for mobile. Implements a two-state pattern with drawer-local state (dCategory, dStatus, dDateFrom, dDateTo, dSortBy) applied only on confirm. Uses AnimatePresence for drawer animation. Renders 4 SVG icon components: SearchIcon (circle+line), FilterIcon (polygon), ResetIcon (polyline+path), SortIcon (6 lines). useCallback for filter handlers. Desktop inline layout and mobile drawer toggle pattern. Imports DocumentsFilterBar.css.

As a frontend developer, implement the DocumentsUploadPrompt section for the Documents page. Full drag-and-drop upload zone with useState hooks: isDragging, uploadProgress (0-100), uploadStatus ('idle'|'uploading'|'success'|'error'), uploadedFiles array. useRef for fileInputRef, dragCounterRef (for nested drag enter/leave counting), progressTimerRef. FILE_TYPES array of 6 types (PDF, XLS, XLSX, DOC, DOCX, IMG) with MIME types. ACCEPT_TYPES joined string for input accept attribute. simulateUpload useCallback simulates progress via setInterval, maps File objects to {name, size, id} entries. formatBytes helper (B/KB/MB). Framer Motion badgeContainerVariants (staggerChildren:0.05) and badgeVariants (scale+rotate spring stiffness:400, damping:18) for file type badge animations. SVG icons: FileIcon, CheckIcon, MailIcon, UploadIcon. AnimatePresence for status state transitions. Imports DocumentsUploadPrompt.css.

As a frontend developer, implement the DocumentsIntegrationCTA section for the Documents page. Integration call-to-action section showcasing 6 PARTNERS: Omie (ERP Contábil, #1A73E8), Conta Azul (Gestão Financeira, #0288D1), Totvs Protheus (ERP Enterprise, #FF7043), Nibo (Contabilidade Online, #00C853), Alterdata (Sistemas Contábeis, #7B1FA2), Domínio (Thomson Reuters, #212121). ConnectorLines sub-component uses useRef/useEffect to calculate SVG line positions between partner cards relative to containerRef using getBoundingClientRect, draws animated motion.line elements with strokeDasharray/strokeDashoffset for draw-on animation. useEffect with 100ms setTimeout for initial line calculation and window resize listener cleanup. useState for lines array and animated boolean. Framer Motion motion.line with strokeDashoffset transition. containerRef and cardRefs pattern for DOM measurement. Imports DocumentsIntegrationCTA.css.

As a frontend developer, implement the Footer section for the Documents page. This component likely already exists from the Login and Clients pages — reuse or verify. Renders a multi-column footer with footerColumns array of 4 columns: Produto (5 links to /Documents, /Clients, /Integrations, /Reports, /Audit), Empresa (4 links), Recursos (4 links including /Login), Legal (4 links). Mobile accordion behavior with useState per column and ChevronIcon (animated ftr-col-chevron--open class). useEffect for responsive breakpoint detection. Social links: LinkedInIcon, TwitterIcon, GitHubIcon SVG components in socialLinks array. AnimatePresence for mobile column expand/collapse. Framer Motion for link hover states. Imports Footer.css.

As a frontend developer, implement the ReportsHero section for the Reports page. The section renders a decorative background layer (rh-deco-layer) containing: a CSS grid overlay (rh-deco-grid), 8 animated bar elements (rh-deco-bar--1 through --8), an SVG with two polylines in #1A73E8 and #00C853 representing chart trend lines, and a dot cluster of 15 rh-deco-dot divs. The content area includes a breadcrumb nav linking back to /Dashboard, a main header row with an h1 'Relatórios e Análises', a subheadline paragraph, and a rh-stats-row of 3 stat chips rendered from the stats array — each chip has a variant modifier class (default, 'accent' for 98.7% categorized, 'warn' for 3 pending exports) and a dot indicator. Imports from '../styles/ReportsHero.css'. No state or animation hooks needed — purely static/CSS-driven.

As a frontend developer, implement the ReportsFilter section for the Reports page. This is a complex interactive filter bar with multiple state hooks: dateFrom and dateTo (initialized to first-of-month and today via fmtDate helper), client dropdown (useState('')), selectedCats array for multi-select checkboxes, catOpen boolean for the category dropdown open state, mobileOpen for responsive collapsible panel, and appliedCount for active filter badge count. The component renders custom SVG icon components: CheckIcon (polyline checkmark), FilterIcon (polygon), SearchIcon (circle + line), XIcon (X lines, parametric size), and ChevronDown. CLIENTS array has 8 options; CATEGORIES array has 8 checkbox items rendered with custom rf-checkbox elements. Active category selections render as removable chips. A 'Limpar filtros' reset button clears all state. useRef and useEffect are used for click-outside detection to close the category dropdown. Imports from '../styles/ReportsFilter.css'.

As a frontend developer, implement the ReportsDataTable section for the Reports page. The table renders 15 hard-coded REPORTS_DATA rows with fields: id, name, ext (PDF/XML/XLSX/DOCX), category, date, client, and status. COLUMNS array defines 6 columns — name, category, date, client, status, and actions — with sortable flags and optional colClass modifiers (rdt-col-category, rdt-col-date). State hooks include sort key and direction managed via useState, with useMemo to derive sorted rows. Each row renders an extension badge (rdt-ext-badge), a status badge with variant class based on value ('Categorizado', 'Pendente', 'Revisão Necessária'), and an actions column with icon buttons. The table supports column header click-to-sort with ascending/descending indicators. Imports from '../styles/ReportsDataTable.css'.

As a frontend developer, implement the ReportsCharts section for the Reports page. This section integrates Chart.js via react-chartjs-2, registering: CategoryScale, LinearScale, BarElement, ArcElement, LineElement, PointElement, Tooltip, Legend, and Filler. Three chart instances are rendered: (1) a grouped Bar chart (categoryData) with 7 labels for document types, two datasets — 'Recebidos' (#1A73E8) and 'Categorizados' (#FF7043) — with borderRadius: 6, maxBarThickness: 28, and custom tooltip callbacks; (2) a Doughnut chart (donutData) with cutout: '68%', 4 slices in #00C853/#FFD600/#1A73E8/#FF7043, borderWidth: 3, hoverOffset: 8, and a custom legend panel (donutLegendItems) showing percentage and doc count per slice; (3) a Line chart (trendMonths) with Filler plugin for area fill. Charts use useRef and useState for responsive container sizing via useEffect. All charts have responsive: true, maintainAspectRatio: false with dark tooltip styling (backgroundColor: '#212121'). Imports from '../styles/ReportsCharts.css'.

As a frontend developer, implement the ReportsExport section for the Reports page. The section renders 3 export option cards from the EXPORT_OPTIONS array — CSV (variant: 'accent'), PDF (variant: 'primary'), and E-mail (variant: 'secondary'). Each card includes: a format badge, title, description text, a preview mini-table (2-row array rendered as table cells), and a CTA button with variant-based class (accent/primary/outline). SVG icon components rendered inline: DownloadIcon (path + polyline + line), FileTextIcon (path + polylines + lines), MailIcon (path + polyline), ClockIcon (circle + polyline), CheckIcon (polyline). The email card has a scheduleNote: true flag that renders an additional scheduling hint UI. State (useState) tracks per-card loading/success states for button feedback. Imports from '../styles/ReportsExport.css'.

As a frontend developer, implement the ReportsInsights section for the Reports page. This section uses GSAP for animated number counting and canvas-based sparklines. The METRICS array defines 4 KPI cards: 'Documentos Processados' (target: 14832, sparkColor: #1A73E8), 'Categorias Geradas' (target: 47, sparkColor: #FF7043), 'Precisão de Categorização' (target: 98.4%, sparkColor: #00C853), and 'Tempo Médio de Processamento' (target: 1.8s, sparkColor: #FFD600). Each metric has sparkData (12-point array), trendDir ('up'/'down'), and an inline SVG icon. The drawSparkline function uses canvas 2D context with devicePixelRatio scaling, computing min/max for normalization, drawing a bezier fill path (fillColor with 0.12 alpha) and a stroke line. GSAP animates the numeric counter from 0 to targetValue on mount via useRef and useCallback. useState tracks whether animation has fired. Imports from '../styles/ReportsInsights.css' and 'gsap'.

As a frontend developer, implement the ReportsScheduling section for the Reports page. This is the most complex section, managing INITIAL_SCHEDULES (5 schedule objects with id, name, type, frequency daily/weekly/monthly, recipients array, lastRun, nextRun, and status active/paused). State includes schedules list (useState), and a modal/drawer for creating/editing schedules. FREQ_LABELS maps frequency keys to badge labels and CSS classes (rsch-freq-badge--daily/weekly/monthly); FREQ_DOTS maps to dot color classes. SVG icon components: IconDocument (file path), IconPlus (cross lines), IconEdit (pencil path), IconPlay (circle + polygon). The schedule list renders each entry with: frequency badge, recipient count, last/next run dates, status indicator, and action buttons (edit, toggle pause/activate, delete). A stats summary row at top shows count by frequency using FREQ_DOTS dot styles. The 'Nova Agenda' button opens a create-schedule modal with form fields for name, type, frequency select, and recipients (comma-separated input). Imports from '../styles/ReportsScheduling.css'.

As a frontend developer, implement the Footer section for the Reports page. This reuses the shared Footer component (may already exist from Documents and Integrations pages). The footer renders 4 column groups (footerColumns array): Produto (5 links), Empresa (4 links), Recursos (4 links), Legal (4 links). Each column is collapsible on mobile via useState per-column open/close tracked with a ChevronIcon that rotates via the 'ftr-col-chevron--open' class modifier. Social links row renders 3 icon-only buttons: LinkedInIcon, TwitterIcon, GitHubIcon — each as inline SVG. AnimatePresence from framer-motion wraps the collapsible link lists with height animation. useEffect sets current year for the copyright line. A newsletter email input with submit button is included in the bottom bar. Imports from '../styles/Footer.css', framer-motion.

As a frontend developer, implement the ProfileSettings section for the Settings page. This component uses useState and useRef for form state management and useCallback for avatar upload handling. It renders: an avatar upload area with CameraIcon overlay triggered via hidden file input (useRef), full name field (UserIcon), email field (MailIcon), company/organization field (BuildingIcon), language selector with LANGUAGES array (pt-BR, pt-PT, en-US, es) using GlobeIcon, timezone selector with TIMEZONES array (10 Brazilian timezone options) using ClockIcon, and a save button with UploadIcon and CheckIcon success state. Form uses controlled inputs and inline SVG icon components. Import from '../styles/ProfileSettings.css'.

As a frontend developer, implement the AccountSecurity section for the Settings page. This is the most complex settings section featuring: (1) Password change form with three fields (current, new, confirm) each with EyeIcon toggle (useState per field) and a getPasswordStrength() function evaluating length, case, digits, and special chars returning 'weak'|'fair'|'good'|'strong' with STRENGTH_LABELS in Portuguese; (2) 2FA toggle section with ShieldIcon; (3) Active sessions list rendered from the SESSIONS array (4 mock sessions: current Chrome/Windows, Safari/iPhone, Firefox/macOS, Edge/Windows) each with MonitorIcon or SmartphoneIcon, IP, location, lastActive, and a revoke button (except current session). Uses multiple useState hooks for password visibility, strength display, and session management. Import from '../styles/AccountSecurity.css'.

As a frontend developer, implement the NotificationPrefs section for the Settings page. This component renders two subsections: (1) Notification toggles for NOTIFICATION_TOGGLES array (4 items: Novos Documentos, Categorização Concluída, Alertas de Integração, Atualizações do Sistema) each with inline SVG icon, iconClass for color theming, description, and a boolean toggle controlled via useState — defaultOn values pre-populate state; (2) Summary frequency selector using FREQ_OPTIONS array (Diário, Semanal, Nunca) each with inline SVG icon and desc, rendered as a radio-button-style card group with useState for selected frequency. Import from '../styles/NotificationPrefs.css'.

As a frontend developer, implement the IntegrationSettings section for the Settings page. This component renders an INTEGRATIONS array (5 items: Sage Contabilidade, Bling ERP, BOMGestão, NF-e/SEFAZ, Omie ERP) as integration cards. Each card displays: logoClass-colored avatar with logoText, name, description, connection status badge, syncFrequency with ClockIcon, lastSync time, and action buttons — connected integrations show RefreshIcon (sync now) and UnlinkIcon (disconnect) buttons; disconnected ones show LinkIcon (connect) and PlusIcon (add new). Uses useState to track connected/disconnected state per integration id. Import from '../styles/IntegrationSettings.css'. Note: focuses on quick-connect management within Settings, distinct from the full Integrations page.

As a frontend developer, implement the AppearanceSettings section for the Settings page. This component uses useState for selectedTheme ('light'|'dark'|'auto'), selectedTextSize ('small'|'normal'|'large'), and savedVisible (boolean toast). THEME_OPTIONS array (3 items) renders as clickable cards with previewClass for visual preview thumbnails and a CheckIcon on selected. TEXT_SIZE_OPTIONS array (3 items) renders cards with sizeClass-styled sample text, badge labels (A-, A, A+), and sample sentences. COLOR_SWATCHES array (6 items) displays read-only color circles (primary #1A73E8, secondary #FF7043, accent #00C853, highlight #FFD600, surface, text) with hex labels. handleApply() triggers savedVisible toast (auto-hides after 2500ms). handleReset() restores defaults. Import from '../styles/AppearanceSettings.css'.

As a frontend developer, implement the DangerZone section for the Settings page. This component manages three destructive actions: (1) Data export with exportFormat useState ('CSV') and handleExport() that creates a programmatic anchor download link; (2) Cache clear with clearingCache and cacheCleared useState — handleClearCache() simulates async delay (1200ms) then shows success state (auto-resets after 4000ms) using ZapIcon and CheckCircleIcon; (3) Account deletion with showDeleteModal useState controlling a modal that requires typing CONFIRM_PHRASE ('EXCLUIR MINHA CONTA') into confirmText state AND a 6-digit numeric twoFaCode — canDelete is only true when both isConfirmValid and isTwoFaValid are satisfied. Modal uses handleOpenDeleteModal(), handleCloseModal(). Uses WarningIcon, DownloadIcon, TrashIcon, ShieldIcon SVGs. Import from '../styles/DangerZone.css'.

As a frontend developer, implement the AuditPageHeader section for the Audit page. Renders a hero-style header with decorative background elements (aph-bg-grid, aph-glow-1, aph-glow-2 divs). Contains a breadcrumb nav linking back to /Dashboard. Features a title row with ShieldIcon SVG component and h1 with 'Trilha de Auditoria' text and accent span. Displays a subtitle paragraph about LGPD compliance monitoring. Renders STATS array as chip badges with colored dot indicators (green for 1.284 eventos, yellow for 3 alertas, blue for LGPD conformidade) using dotClass variants. DATE_RANGES array (Últimas 24h, 7d, 30d) rendered as toggle buttons with useState(activeDateRange) defaulting to 'last-7d'. Includes a SearchIcon hint element. Imports AuditPageHeader.css.

As a frontend developer, implement the AuditFiltersBar section for the Audit page. Manages FILTER_CONFIG array of 4 dropdown filters: eventType (8 options with colors), userRole (3 roles with colors), client (6 clients), and status (3 statuses with colors). Uses useState for active filter selections and open/close dropdown state, useRef for click-outside detection, and useEffect to close dropdowns on outside click. ChevronIcon component with conditional 'afb-open' class rotation. CheckIcon shown for selected items. Active filter pills rendered with CATEGORY_LABELS display names and XIcon (×) remove buttons. 'Limpar filtros' reset button clears all selections. Dropdown menus render colored dot indicators per option. Imports AuditFiltersBar.css.

As a frontend developer, implement the AuditExportPanel section for the Audit page. useState tracks exporting ('csv'|'pdf'|'json'|null) and toasts array of {id, type, message}. Module-level toastId counter increments for unique IDs. Three export format buttons with icon components: IconCSV (file + lines), IconPDF (file + PDF markup), IconJSON (angle bracket code icon). handleExport(format) uses useCallback, sets exporting state, simulates async export with 1.8s delay, then calls addToast(). addToast() pushes toast to array and auto-removes after 5000ms via setTimeout. removeToast() filters by id. IconAlert, IconCheck, IconX, IconInfo SVG components render in toast notifications. Disabled state on export buttons while exporting !== null. Imports AuditExportPanel.css.

As a frontend developer, implement the Footer section for the Audit page. Reuse the shared Footer component (may already exist from previous pages such as Reports, Users, Settings). footerColumns array defines 4 columns: Produto (5 links to Documents/Clients/Integrations/Reports/Audit), Empresa (4 links to Landing), Recursos (4 links including Login), Legal (4 LGPD/privacy links). ChevronIcon with conditional ftr-col-chevron--open class for mobile accordion. socialLinks array: LinkedInIcon, TwitterIcon, GitHubIcon SVG components with hrefs. Uses framer-motion AnimatePresence for accordion expand/collapse. useState for openColumn tracking mobile accordion state, useEffect for responsive breakpoint detection. Copyright line with current year. Imports Footer.css.

As a frontend developer, implement the DocumentsTable section for the Documents page. Renders a data table with 7 DOCUMENTS rows (DRE, IRPJ, Folha de Pagamento, NF Servicos, Contrato, SPED Fiscal, Balancete) each with fields: id, filename, category, status, uploadedDate, client, source (email/upload), rules array, syncStatus, size. Uses CATEGORY_CLASS map (Finance: dt-badge--finance, Tax: dt-badge--tax, Payroll: dt-badge--payroll, Invoices: dt-badge--invoices, Legal: dt-badge--legal, Compliance: dt-badge--compliance) and CATEGORY_LABEL map for localized display. STATUS_CONFIG maps Categorized/Pending/Synced to Portuguese labels and CSS classes. Uses useState for row selection (checkbox), expanded row detail panel with AnimatePresence. Framer Motion for row enter animations. Imports DocumentsTable.css.

As a frontend developer, implement the AuditLogTable section for the Audit page. Uses gsap for row entrance animations via useRef and useEffect/useCallback. AUDIT_DATA contains 11+ mock entries with fields: id (EVT-XXX), timestamp (ISO), user, userInitials, userColor (hex), action, eventType, client, status (success/failed/pending), ip, details. Table renders sortable columns with click handlers for timestamp, user, eventType, status. Each row shows: colored user avatar circle with initials, action text, eventType badge with color coding (Login blue, Document green, User teal, Export cyan, Settings purple, Client violet, Export), status badge (success=green, failed=red, pending=yellow), IP address, and a detail expand button. Rows animate in with GSAP staggered translateY + opacity. Imports AuditLogTable.css. Uses useState, useEffect, useRef, useCallback.

As a frontend developer, implement the DocumentsPagination section for the Documents page. Renders pagination controls with useState hooks: currentPage (init 1), direction (±1 for animation), perPage (init 20). Constants: TOTAL_PAGES=5, TOTAL_ITEMS=87, PER_PAGE_OPTIONS=[10,20,50]. Implements getPageNumbers(current, total) helper with ellipsis logic for >7 pages (showing ellipsis-start/ellipsis-end tokens). goToPage sets direction based on navigation direction. ChevronLeftIcon and ChevronRightIcon SVG components. numberVariants with spring animation (stiffness:380, damping:26) for page number enter/exit using custom direction parameter. AnimatePresence for animated page number transitions. Displays 'Mostrando X–Y de 87 documentos' info text. Imports DocumentsPagination.css.

As a frontend developer, implement the DocumentsBulkActions section for the Documents page. Floating bulk-action toolbar that appears conditionally when selectionCount > 0 (useState init: 3). Uses AnimatePresence for toolbar slide-in/out. Four action buttons with SVG icons: IconTag (categorize, opens category dropdown), IconDownload (download), IconMove (move to folder), IconTrash (delete, opens delete confirmation modal). CATEGORIES array of 6 items with color codes (Notas Fiscais #1A73E8, Recibos #00C853, Extratos #FF7043, Contratos #FFD600, Declarações #9C27B0, Guias #F44336). useState for showDropdown, showDeleteConfirm, actionFeedback. useRef for dropdownRef and deleteRef for outside-click detection via useEffect. springConfig object (stiffness:380, damping:30, mass:0.8). IconChevronUp and IconX SVG components. Imports DocumentsBulkActions.css.

As a frontend developer, implement the AuditPagination section for the Audit page. TOTAL_RECORDS is 2847 with PER_PAGE_OPTIONS [25, 50, 100]. useState tracks currentPage (default 1), perPage (default 25), and gotoValue string. Computed values: totalPages = ceil(2847/perPage), startRecord, endRecord formatted with pt-BR locale (toLocaleString). getPageNumbers() helper generates smart pagination array with ellipsis ('...') for large page counts — handles current page near start (≤4), near end (≥totalPages-3), and middle cases. Renders: ChevronsLeftIcon (first), ChevronLeftIcon (prev), numbered page buttons with active styling, ChevronRightIcon (next), ChevronsRightIcon (last). Per-page select dropdown triggers handlePerPageChange resetting to page 1. Goto form with handleGotoSubmit and handleGotoKeyDown (Enter). Imports AuditPagination.css.

As a frontend developer, implement the AuditDetailModal section for the Audit page. SAMPLE_ENTRY contains a detailed mock audit event with fields: id, timestamp, timestampFormatted, eventType, action (long text), userName, userId, clientName, ipAddress, geoHint, browser, userAgent, requestPayload (nested object with event/document_id/file_name/file_size_kb/category/client_id/auto_categorized/status), responseStatus (201), responseMs (312). formatPayload() serializes payload into syntax-highlighted line array. CodeLine component parses each line with regex to apply adm-code-key, adm-code-bool, adm-code-num, adm-code-str CSS classes. Modal uses useState for open/close and copy state, useEffect for Escape key listener, useCallback for handlers. CopyIcon and CloseIcon SVG components. Copy-to-clipboard copies JSON payload and shows success state. Backdrop click closes modal. Imports AuditDetailModal.css.