first

2025-06-17 13:41:48 -03:00
commit af154c3f7f
197 changed files with 50658 additions and 0 deletions
--- a/.babelrc.js
+++ b/.babelrc.js
@@ -0,0 +1,8 @@
 // This Babel configuration is used only for Jest tests
 module.exports = {
  presets: [
    ['@babel/preset-env', { targets: { node: 'current' } }],
    '@babel/preset-typescript',
    ['@babel/preset-react', { runtime: 'automatic' }],
  ],
 }; 
--- a/.dockerignore
+++ b/.dockerignore
@@ -0,0 +1,26 @@
 # Dependências
 node_modules
 npm-debug.log
 yarn-debug.log
 yarn-error.log
 # Next.js
 .next
 out
 # Arquivos de desenvolvimento
 .git
 .gitignore
 .env.local
 .env.development.local
 .env.test.local
 .env.production.local
 # IDE
 .idea
 .vscode
 # Outros
 README.md
 *.md
 .DS_Store 
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,27 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 # dependencies
 /node_modules
 # next.js
 /.next/
 /out/
 # production
 /build
 # debug
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 .pnpm-debug.log*
 # env files
 .env*
 # vercel
 .vercel
 # typescript
 *.tsbuildinfo
 next-env.d.ts
--- a/.idea/conceito-335.iml
+++ b/.idea/conceito-335.iml
@@ -0,0 +1,12 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <module type="WEB_MODULE" version="4">
  <component name="NewModuleRootManager">
    <content url="file://$MODULE_DIR$">
      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
      <excludeFolder url="file://$MODULE_DIR$/temp" />
      <excludeFolder url="file://$MODULE_DIR$/tmp" />
    </content>
    <orderEntry type="inheritedJdk" />
    <orderEntry type="sourceFolder" forTests="false" />
  </component>
 </module>
--- a/.idea/modules.xml
+++ b/.idea/modules.xml
@@ -0,0 +1,8 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
  <component name="ProjectModuleManager">
    <modules>
      <module fileurl="file://$PROJECT_DIR$/.idea/conceito-335.iml" filepath="$PROJECT_DIR$/.idea/conceito-335.iml" />
    </modules>
  </component>
 </project>
--- a/.idea/vcs.xml
+++ b/.idea/vcs.xml
@@ -0,0 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
  <component name="VcsDirectoryMappings">
    <mapping directory="" vcs="Git" />
  </component>
 </project>
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -0,0 +1,114 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
  <component name="AutoImportSettings">
    <option name="autoReloadType" value="SELECTIVE" />
  </component>
  <component name="ChangeListManager">
    <list default="true" id="c3170dda-5ac5-478f-9665-66c5f59a70f5" name="Changes" comment="">
      <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
      <change beforePath="$PROJECT_DIR$/package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/package-lock.json" afterDir="false" />
      <change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
      <change beforePath="$PROJECT_DIR$/src/components/orders/OrderDetail.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/orders/OrderDetail.tsx" afterDir="false" />
      <change beforePath="$PROJECT_DIR$/src/components/orders/OrderInfoCard.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/orders/OrderInfoCard.tsx" afterDir="false" />
      <change beforePath="$PROJECT_DIR$/src/components/orders/OrderItemsTable.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/orders/OrderItemsTable.tsx" afterDir="false" />
      <change beforePath="$PROJECT_DIR$/src/components/orders/OrderRowExpandable.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/orders/OrderRowExpandable.tsx" afterDir="false" />
      <change beforePath="$PROJECT_DIR$/src/components/orders/OrdersTable.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/orders/OrdersTable.tsx" afterDir="false" />
      <change beforePath="$PROJECT_DIR$/src/components/types.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/types.ts" afterDir="false" />
      <change beforePath="$PROJECT_DIR$/src/constants/status-options.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/constants/status-options.ts" afterDir="false" />
    </list>
    <option name="SHOW_DIALOG" value="false" />
    <option name="HIGHLIGHT_CONFLICTS" value="true" />
    <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
    <option name="LAST_RESOLUTION" value="IGNORE" />
  </component>
  <component name="Git.Settings">
    <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
  </component>
  <component name="ProjectColorInfo">{
  &quot;associatedIndex&quot;: 8
 }</component>
  <component name="ProjectId" id="2w8VwZI8V1ZiF86I9ohOaePeoEH" />
  <component name="ProjectViewState">
    <option name="hideEmptyMiddlePackages" value="true" />
    <option name="showLibraryContents" value="true" />
  </component>
  <component name="PropertiesComponent">{
  &quot;keyToString&quot;: {
    &quot;ModuleVcsDetector.initialDetectionPerformed&quot;: &quot;true&quot;,
    &quot;RunOnceActivity.ShowReadmeOnStart&quot;: &quot;true&quot;,
    &quot;RunOnceActivity.git.unshallow&quot;: &quot;true&quot;,
    &quot;git-widget-placeholder&quot;: &quot;feature/react-data-grid-orders&quot;,
    &quot;ignore.virus.scanning.warn.message&quot;: &quot;true&quot;,
    &quot;js.debugger.nextJs.config.created.client&quot;: &quot;true&quot;,
    &quot;js.debugger.nextJs.config.created.server&quot;: &quot;true&quot;,
    &quot;junie.onboarding.icon.badge.shown&quot;: &quot;true&quot;,
    &quot;last_opened_file_path&quot;: &quot;C:/Users/Joelson/Desktop/conceito-335&quot;,
    &quot;node.js.detected.package.eslint&quot;: &quot;true&quot;,
    &quot;node.js.detected.package.tslint&quot;: &quot;true&quot;,
    &quot;node.js.selected.package.eslint&quot;: &quot;(autodetect)&quot;,
    &quot;node.js.selected.package.tslint&quot;: &quot;(autodetect)&quot;,
    &quot;nodejs_package_manager_path&quot;: &quot;npm&quot;,
    &quot;npm.Next.js: server-side.executor&quot;: &quot;Run&quot;,
    &quot;ts.external.directory.path&quot;: &quot;C:\\Users\\Joelson\\Desktop\\conceito-335\\node_modules\\typescript\\lib&quot;,
    &quot;vue.rearranger.settings.migration&quot;: &quot;true&quot;
  }
 }</component>
  <component name="RunManager" selected="npm.Next.js: server-side">
    <configuration name="Next.js: debug client-side" type="JavascriptDebugType" uri="http://localhost:3000/">
      <method v="2" />
    </configuration>
    <configuration name="Next.js: server-side" type="js.build_tools.npm">
      <package-json value="$PROJECT_DIR$/package.json" />
      <command value="run" />
      <scripts>
        <script value="dev" />
      </scripts>
      <node-interpreter value="project" />
      <envs />
      <method v="2" />
    </configuration>
  </component>
  <component name="SharedIndexes">
    <attachedChunks>
      <set>
        <option value="bundled-js-predefined-d6986cc7102b-f27c65a3e318-JavaScript-WS-251.23774.424" />
      </set>
    </attachedChunks>
  </component>
  <component name="TaskManager">
    <task active="true" id="Default" summary="Default task">
      <changelist id="c3170dda-5ac5-478f-9665-66c5f59a70f5" name="Changes" comment="" />
      <created>1745423427238</created>
      <option name="number" value="Default" />
      <option name="presentableId" value="Default" />
      <updated>1745423427238</updated>
      <workItem from="1745423428034" duration="1216000" />
      <workItem from="1745434488280" duration="2733000" />
      <workItem from="1745437286504" duration="90000" />
      <workItem from="1745437605646" duration="221000" />
      <workItem from="1745437861205" duration="5077000" />
      <workItem from="1745444505364" duration="11900000" />
      <workItem from="1745526495428" duration="121000" />
    </task>
    <servers />
  </component>
  <component name="TypeScriptGeneratedFilesManager">
    <option name="version" value="3" />
    <option name="exactExcludedFiles">
      <list>
        <option value="$PROJECT_DIR$/next.config.mjs" />
      </list>
    </option>
  </component>
  <component name="XDebuggerManager">
    <breakpoint-manager>
      <breakpoints>
        <line-breakpoint enabled="true" type="javascript">
          <url>file://$PROJECT_DIR$/src/components/types.ts</url>
          <line>164</line>
          <option name="timeStamp" value="1" />
        </line-breakpoint>
      </breakpoints>
    </breakpoint-manager>
  </component>
 </project>
--- a/.prettierrc
+++ b/.prettierrc
@@ -0,0 +1,12 @@
 {
    "semi": true,                    
    "singleQuote": true,           
    "trailingComma": "es5",     
    "printWidth": 100,             
    "tabWidth": 2,                  
    "useTabs": false,            
    "bracketSpacing": true,         
    "arrowParens": "always",       
    "endOfLine": "lf"            
  }
--- a/50
+++ b/50
@@ -0,0 +1,50 @@
 # Stage 1: Dependencies
 FROM node:20-alpine AS deps
 WORKDIR /app
 # Copiar arquivos de configuração
 COPY package.json package-lock.json ./
 # Instalar dependências
 RUN npm ci
 # Stage 2: Builder
 FROM node:20-alpine AS builder
 WORKDIR /app
 # Copiar dependências do stage anterior
 COPY --from=deps /app/node_modules ./node_modules
 COPY . .
 # Build da aplicação
 ENV NEXT_TELEMETRY_DISABLED 1
 RUN npm run build
 # Stage 3: Runner
 FROM node:20-alpine AS runner
 WORKDIR /app
 ENV NODE_ENV production
 ENV NEXT_TELEMETRY_DISABLED 1
 # Criar usuário não-root
 RUN addgroup --system --gid 1001 nodejs
 RUN adduser --system --uid 1001 nextjs
 # Copiar arquivos necessários do builder
 COPY --from=builder /app/public ./public
 COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
 COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
 # Mudar para usuário não-root
 USER nextjs
 # Expor porta
 EXPOSE 3000
 # Definir variáveis de ambiente
 ENV PORT 3000
 ENV HOSTNAME "0.0.0.0"
 # Comando para iniciar a aplicação
 CMD ["node", "server.js"] 
--- a/24
+++ b/24
@@ -0,0 +1,24 @@
 BSD 2-Clause License
 Copyright (c) 2025, JuruSysadmin
 Redistribution and use in source and binary forms, with or without
 modification, are permitted provided that the following conditions are met:
 1. Redistributions of source code must retain the above copyright notice, this
   list of conditions and the following disclaimer.
 2. Redistributions in binary form must reproduce the above copyright notice,
   this list of conditions and the following disclaimer in the documentation
   and/or other materials provided with the distribution.
 THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
 AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
 IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
 DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
 FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
 DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
 SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
 CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
 OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
 OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
--- a/README.md
+++ b/README.md
@@ -0,0 +1,163 @@
 Portalweb
 O código-fonte deste software é confidencial e não será fornecido.
 É estritamente proibido realizar engenharia reversa, descompilar ou desmontar o software.
 É proibido copiar, redistribuir ou sublicenciar este software sem autorização por escrito.
 A violação destes termos poderá resultar em responsabilização civil e criminal.
 ## Project Structure
 src/
 ├── app/                    # Diretório de app do Next.js 13+ (roteamento)
 ├── components/            # Componentes React
 │   ├── ui/               # Componentes de UI reutilizáveis
 │   ├── layout/           # Componentes de layout
 │   └── features/         # Componentes específicos de funcionalidades
 ├── hooks/                # Hooks personalizados do React
 │   ├── useNavigation.ts  # Hook para abstrair navegação da aplicação
 │   └── ...               # Outros hooks personalizados
 ├── utils/                # Funções utilitárias
 ├── types/                # Tipos e interfaces TypeScript
 ├── styles/               # Estilos globais e configuração de tema
 ├── lib/                  # Configurações de bibliotecas de terceiros
 ├── constants/            # Constantes da aplicação
 └── public/               # Arquivos estáticos
 ## Directory Details
 ### `/src/app`
 Contém a estrutura de diretório app do Next.js 13+
 Responsável pelo roteamento e componentes de página
 Inclui layout.tsx para layouts compartilhados
 Inclui page.tsx para a página inicial
 ### `/src/components`
 - **ui/**: Componentes de UI reutilizáveis (ex: Botão, Input, Card)
 - **layout/**: Componentes de layout (ex: Cabeçalho, Rodapé, Barra Lateral)
 - **features/**: Componentes específicos de funcionalidades, que podem não ser reutilizáveis
 ### `/src/hooks`
 - Hooks personalizados do React para lógica compartilhada
 - Exemplo: useTheme para gerenciamento de tema
 - **useNavigation**: Abstrai a lógica de navegação comum, fornecendo métodos como:
  - `goToHome()`: Navega para a página inicial
  - `goToLogin()`: Navega para a página de login
  - `goToOrdersFind()`: Navega para a busca de pedidos
  - `goToOrderDetail(id)`: Navega para o detalhe de um pedido
  - `goBack()`: Volta para a página anterior
  - `navigateTo(url)`: Navega para uma URL específica
 ### `/src/utils`
 -Funções utilitárias para operações comuns
 -Exemplo: format.ts para formatação de datas e moedas
 ### `/src/types`
 - Interfaces e tipos TypeScript
 - Tipos comuns usados em toda a aplicação
 ### `/src/constants`
 - Constantes globais da aplicação
 - Rotas, breakpoints e outros valores estáticos
 ### `/src/styles`
 - Estilos globais e configuração de tema
 - Configuração do Tailwind CSS (se estiver sendo utilizado)
 ### `/src/lib`
 - Configurações de bibliotecas de terceiros
 - Clientes de API e outras integrações externas
 ### `/public`
 Arquivos estáticos (imagens, fontes, etc.)
 Favicon e outros arquivos públicos
 ### Componentes
 Mantenha os componentes pequenos e com uma única responsabilidade
 Use TypeScript para segurança de tipos
 Siga o padrão de design atômico quando apropriado
 Defina corretamente os tipos de props e valores padrão
 ### Hooks
 Crie hooks personalizados para lógica reutilizável
 Mantenha os hooks focados em uma funcionalidade específica
 Tipifique corretamente os parâmetros e retornos com TypeScript
 ### Styling
 Use Tailwind CSS para estilização
 Siga uma convenção de nomes consistente
 Mantenha os estilos modulares e reutilizáveis
 ### TypeScript
 Utilize uma configuração estrita de TypeScript
 Defina interfaces apropriadas para todos os componentes e funções
 Use inferência de tipos sempre que possível
 ### Code Organization
 Mantenha arquivos relacionados próximos uns dos outros
 Use arquivos index.ts para importações mais limpas
 Siga o princípio do menor privilégio
 ## Getting Started
 1. Install dependencies:
 ```bash
 npm install
 ```
 2. Run the development server:
 ```bash
 npm run dev
 ```
 3. Build for production:
 ```bash
 npm run build
 ```
 ## Development Guidelines
 1. ### Criação de Componentes
 Crie os componentes no diretório apropriado
 Use TypeScript para segurança de tipos
 Adicione documentação apropriada
 2. ### Gerenciamento de Estado
 Use hooks do React para estado local
 Considere contextos para estado global
 Mantenha o estado o mais próximo possível de onde é usado
 3. ### Estilização
 Use classes do Tailwind CSS
 Mantenha os estilos consistentes entre os componentes
 Use variáveis CSS para valores de tema
--- a/components.json
+++ b/components.json
@@ -0,0 +1,21 @@
 {
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.ts",
    "css": "app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/src/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "iconLibrary": "lucide"
 }
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -0,0 +1,17 @@
 version: '3.8'
 services:
  web:
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - "3000:3000"
    environment:
      - NODE_ENV=production
    restart: unless-stopped
    healthcheck:
      test: ["CMD", "wget", "--no-verbose", "--tries=1", "--spider", "http://localhost:3000"]
      interval: 30s
      timeout: 10s
      retries: 3 
--- a/jest.config.js
+++ b/jest.config.js
@@ -0,0 +1,30 @@
 module.exports = {
  testEnvironment: 'jsdom',
  roots: ['<rootDir>/src'],
  testMatch: ['**/__tests__/**/*.ts?(x)', '**/?(*.)+(spec|test).ts?(x)'],
  transform: {
    '^.+\\.(js|jsx|ts|tsx)$': 'babel-jest',
  },
  moduleNameMapper: {
    '^@/src/(.*)$': '<rootDir>/src/$1',
    '\\.(css|less|sass|scss)$': 'identity-obj-proxy',
  },
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  collectCoverageFrom: [
    'src/**/*.{ts,tsx}',
    '!src/**/*.d.ts',
    '!src/pages/_app.tsx',
    '!src/pages/_document.tsx',
  ],
  coverageThreshold: {
    global: {
      branches: 70,
      functions: 70,
      lines: 70,
      statements: 70,
    },
  },
  transformIgnorePatterns: [
    '/node_modules/(?!(@testing-library|react-dom|next)/)'
  ]
 }; 
--- a/jest.setup.js
+++ b/jest.setup.js
@@ -0,0 +1,54 @@
 // Configuração para adicionar suporte a testes com React e hooks
 require('@testing-library/jest-dom');
 // Mock para evitar erros relacionados ao Next.js Image
 jest.mock('next/image', () => ({
  __esModule: true,
  default: (props) => {
    // eslint-disable-next-line jsx-a11y/alt-text
    return { type: 'img', props };
  },
 }));
 // Mock do localStorage e sessionStorage para testes
 class LocalStorageMock {
  constructor() {
    this.store = {};
  }
  clear() {
    this.store = {};
  }
  getItem(key) {
    return this.store[key] || null;
  }
  setItem(key, value) {
    this.store[key] = String(value);
  }
  removeItem(key) {
    delete this.store[key];
  }
 }
 global.localStorage = new LocalStorageMock();
 global.sessionStorage = new LocalStorageMock();
 // Mock global fetch
 global.fetch = jest.fn(() =>
  Promise.resolve({
    ok: true,
    json: () => Promise.resolve({}),
  })
 );
 // Suprimir warnings do console nos testes
 global.console = {
  ...console,
  // Uncomment to ignore specific console methods during tests
  // log: jest.fn(),
  error: jest.fn(),
  warn: jest.fn(),
 }; 
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -0,0 +1,17 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
  eslint: {
    ignoreDuringBuilds: true,
  },
  typescript: {
    ignoreBuildErrors: true,
  },
  images: {
    unoptimized: true,
  },
  experimental: {
    forceSwcTransforms: true,
  },
 }
 export default nextConfig
--- a/next.config.ts
+++ b/next.config.ts
@@ -0,0 +1,7 @@
 import type { NextConfig } from "next";
 const nextConfig: NextConfig = {
  /* config options here */
 };
 export default nextConfig;
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,131 @@
 {
  "name": "portal",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev --port 9603",
    "build": "next build",
    "start": "next start --port 9602",
    "lint": "next lint",
    "test": "jest src/tests/utils src/tests/components src/tests/api-helpers.test.ts",
    "test:all": "jest",
    "test:watch": "jest --watch",
    "test:coverage": "jest --coverage",
    "nginx-export": "next export"
  },
  "dependencies": {
    "@dnd-kit/core": "^6.3.1",
    "@dnd-kit/sortable": "^10.0.0",
    "@dnd-kit/utilities": "^3.2.2",
    "@emotion/react": "^11.14.0",
    "@emotion/styled": "^11.14.0",
    "@hookform/resolvers": "^3.9.1",
    "@material-tailwind/react": "^2.1.10",
    "@mui/material": "^7.0.2",
    "@radix-ui/react-accordion": "^1.2.2",
    "@radix-ui/react-alert-dialog": "^1.1.4",
    "@radix-ui/react-aspect-ratio": "^1.1.1",
    "@radix-ui/react-avatar": "^1.1.2",
    "@radix-ui/react-checkbox": "^1.1.3",
    "@radix-ui/react-collapsible": "^1.1.2",
    "@radix-ui/react-context-menu": "^2.2.4",
    "@radix-ui/react-dialog": "^1.1.4",
    "@radix-ui/react-dropdown-menu": "^2.1.4",
    "@radix-ui/react-hover-card": "^1.1.4",
    "@radix-ui/react-label": "^2.1.1",
    "@radix-ui/react-menubar": "^1.1.4",
    "@radix-ui/react-navigation-menu": "^1.2.3",
    "@radix-ui/react-popover": "^1.1.4",
    "@radix-ui/react-progress": "^1.1.1",
    "@radix-ui/react-radio-group": "^1.2.2",
    "@radix-ui/react-scroll-area": "^1.2.2",
    "@radix-ui/react-select": "^2.1.4",
    "@radix-ui/react-separator": "^1.1.1",
    "@radix-ui/react-slider": "^1.2.2",
    "@radix-ui/react-slot": "^1.1.1",
    "@radix-ui/react-switch": "^1.1.2",
    "@radix-ui/react-tabs": "^1.1.2",
    "@radix-ui/react-toast": "^1.2.4",
    "@radix-ui/react-toggle": "^1.1.1",
    "@radix-ui/react-toggle-group": "^1.1.1",
    "@radix-ui/react-tooltip": "^1.1.6",
    "@tanstack/react-query": "^5.74.11",
    "@tanstack/react-table": "^8.21.3",
    "@tanstack/react-virtual": "^3.13.6",
    "@types/crypto-js": "^4.2.2",
    "@types/nprogress": "^0.2.3",
    "@types/react-resizable": "^3.0.8",
    "@types/react-window": "^1.8.8",
    "@vercel/analytics": "^1.5.0",
    "@vercel/speed-insights": "^1.2.0",
    "ag-grid-community": "^33.2.4",
    "ag-grid-react": "^33.2.4",
    "antd": "^5.24.9",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cmdk": "1.0.4",
    "crypto-js": "^4.2.0",
    "date-fns": "^4.1.0",
    "embla-carousel-react": "8.5.1",
    "framer-motion": "^12.7.4",
    "i18next": "^25.0.1",
    "input-otp": "1.4.1",
    "lucide-react": "^0.454.0",
    "next": "^15.2.4",
    "next-themes": "^0.4.4",
    "nprogress": "^0.2.0",
    "qrcode.react": "^4.2.0",
    "react": "^19.1.0",
    "react-data-grid": "^7.0.0-beta.52",
    "react-day-picker": "8.10.1",
    "react-dnd": "^16.0.1",
    "react-dnd-html5-backend": "^16.0.1",
    "react-dom": "^19.1.0",
    "react-hook-form": "^7.54.1",
    "react-i18next": "^15.4.1",
    "react-icons": "^5.5.0",
    "react-resizable": "^3.0.5",
    "react-resizable-panels": "^2.1.7",
    "react-tsparticles": "^2.12.2",
    "react-window": "^1.8.11",
    "react-window-infinite-loader": "^1.0.10",
    "recharts": "2.15.0",
    "rxjs": "latest",
    "sonner": "^1.7.1",
    "tailwind-merge": "^2.5.5",
    "tailwindcss-animate": "^1.0.7",
    "tsparticles": "^3.8.1",
    "tsparticles-slim": "^2.12.0",
    "tw-animate-css": "^1.2.5",
    "vaul": "^0.9.6",
    "zod": "^3.24.3"
  },
  "devDependencies": {
    "@babel/core": "^7.27.1",
    "@babel/preset-env": "^7.27.2",
    "@babel/preset-react": "^7.27.1",
    "@babel/preset-typescript": "^7.27.1",
    "@tailwindcss/postcss": "^4.1.4",
    "@testing-library/cypress": "^10.0.3",
    "@testing-library/dom": "^10.4.0",
    "@testing-library/jest-dom": "^6.6.3",
    "@testing-library/react": "^14.3.1",
    "@testing-library/react-hooks": "^7.0.2",
    "@testing-library/user-event": "^14.6.1",
    "@types/jest": "^29.5.14",
    "@types/node": "^22",
    "@types/react": "^19.1.4",
    "@types/react-dom": "^19.1.5",
    "autoprefixer": "^10.4.21",
    "babel-jest": "^29.7.0",
    "cypress": "^14.3.3",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^29.7.0",
    "jest-environment-jsdom": "^29.7.0",
    "postcss": "^8.5.3",
    "tailwindcss": "^4.1.4",
    "ts-jest": "^29.3.2",
    "typescript": "^5",
    "vitest": "^3.1.2"
  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/postcss.config.mjs
+++ b/postcss.config.mjs
@@ -0,0 +1,8 @@
 /** @type {import('postcss-load-config').Config} */
 const config = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
 };
 export default config;
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/file.svg
+++ b/public/file.svg
@@ -0,0 +1 @@
 <svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>
--- a/public/globe.svg
+++ b/public/globe.svg
@@ -0,0 +1 @@
 <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
--- a/public/next.svg
+++ b/public/next.svg
@@ -0,0 +1 @@
 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
--- a/public/vercel.svg
+++ b/public/vercel.svg
@@ -0,0 +1 @@
 <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>
--- a/public/window.svg
+++ b/public/window.svg
@@ -0,0 +1 @@
 <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>
--- a/src/app/api/v1/auth/login/route.ts
+++ b/src/app/api/v1/auth/login/route.ts
@@ -0,0 +1,66 @@
 import { NextRequest, NextResponse } from 'next/server';
 // Função simples para gerar um token mock
 function generateMockToken() {
  return 'mock_token_' + 
    Math.random().toString(36).substring(2, 15) + 
    Math.random().toString(36).substring(2, 15) + 
    Date.now().toString(36);
 }
 export async function POST(request: NextRequest) {
  try {
    const body = await request.json();
    const { username, password } = body;
    // Validação simples
    if (!username || !password) {
      return NextResponse.json(
        { success: false, message: 'Usuário e senha são obrigatórios' },
        { status: 400 }
      );
    }
    // Simulação de credenciais - em produção isso estaria em um banco de dados
    const validCredentials = [
      { username: 'admin', password: 'admin', role: 'ADMIN' },
      { username: 'user', password: 'user', role: 'USER' },
      { username: 'test', password: 'test', role: 'USER' },
    ];
    const user = validCredentials.find(
      (u) => u.username === username && u.password === password
    );
    if (!user) {
      return NextResponse.json(
        { success: false, message: 'Credenciais inválidas' },
        { status: 401 }
      );
    }
    // Gerar um token mock simples
    const token = generateMockToken();
    // Simular a resposta do seu backend
    return NextResponse.json({
      id: `${Math.floor(Math.random() * 1000)}`,
      sellerId: '123',
      name: username,
      username: username,
      storeId: '1',
      email: `${username}@exemplo.com`,
      role: user.role,
      token: token,
    });
  } catch (error) {
    console.error('Erro na API de login:', error);
    return NextResponse.json(
      {
        success: false,
        message: error instanceof Error ? error.message : 'Erro desconhecido',
      },
      { status: 500 }
    );
  }
 } 
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -0,0 +1,59 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 221.2 83.2% 53.3%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 221.2 83.2% 53.3%;
    --radius: 0.5rem;
  }
  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 217.2 91.2% 59.8%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 224.3 76.3% 48%;
  }
 }
@layer base {
  * {
    border-color: hsl(var(--border));
  }
  body {
    @apply bg-background text-foreground;
  }
 }
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -0,0 +1,35 @@
 import React from "react";
 import type { Metadata } from "next/types";
 import { Inter } from "next/font/google";
 import "../styles/globals.css";
 import { ThemeProvider } from "@/src/components/theme-provider";
 const inter = Inter({ subsets: ["latin"] });
 export const metadata: Metadata = {
  title: "PORTAL WEB",
  description: "Portal web",
 };
 export default function RootLayout({
  children,
 }: Readonly<{
  children: React.ReactNode;
 }>) {
  return (
    <html lang="pt-BR" suppressHydrationWarning>
      <body className={`${inter.className} h-full`}>
          <ThemeProvider
            attribute="class"
            defaultTheme="light"
            enableSystem
            disableTransitionOnChange
          >
            <div className="flex h-screen">
              <main className="flex-1 overflow-auto">{children}</main>
            </div>
          </ThemeProvider>
      </body>
    </html>
  );
 }
--- a/src/app/orders/SellerSearchInput.tsx
+++ b/src/app/orders/SellerSearchInput.tsx
@@ -0,0 +1,112 @@
 import { useState, useEffect } from "react";
 import { Input } from "@/src/components/ui/input";
 import { dataConsultApi } from "@/src/lib/api";
 interface Seller {
  id: number;
  name: string;
  code?: string;
 }
 interface SellerSearchInputProps {
  value: string;
  onChange: (value: string) => void;
  onSelect?: (seller: Seller) => void;
  label?: string;
  id?: string;
  placeholder?: string;
 }
 export function SellerSearchInput({
  value,
  onChange,
  onSelect,
  label = "Vendedor",
  id = "sellerSearch",
  placeholder = "Digite o nome do vendedor"
 }: SellerSearchInputProps) {
  const [suggestions, setSuggestions] = useState<Seller[]>([]);
  const [isFocused, setIsFocused] = useState(false);
  useEffect(() => {
    const loadSuggestions = async () => {
      if (!value || value.length < 2) return setSuggestions([]);
      try {
        const sellers = await dataConsultApi.getSellers();
        if (Array.isArray(sellers)) {
          // Filtrar vendedores que correspondem ao termo de busca (ignorando case)
          const filtered = sellers.filter((s: any) =>
            s.name.toLowerCase().includes(value.toLowerCase())
          ).map((s: any) => {
            // Extrair o código numérico do vendedor se estiver no formato XXX-NOME
            let code = "";
            if (s.name && s.name.includes("-")) {
              const parts = s.name.split("-");
              if (parts.length > 0 && parts[0].trim()) {
                const match = parts[0].trim().match(/\d+/);
                if (match) {
                  code = match[0];
                }
              }
            }
            return {
              ...s,
              code: code || ""
            };
          });
          setSuggestions(filtered);
        }
      } catch (err) {
        console.error("Erro ao buscar vendedores:", err);
      }
    };
    const debounce = setTimeout(loadSuggestions, 300);
    return () => clearTimeout(debounce);
  }, [value]);
  // Quando o usuário altera o texto na caixa de pesquisa
  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const newValue = e.target.value;
    onChange(newValue);
    // Se o usuário apagou tudo, limpar também as sugestões
    if (!newValue) {
      setSuggestions([]);
    }
  };
  return (
    <div className="relative">
      {label && <label htmlFor={id} className="block text-sm font-medium mb-1">{label}</label>}
      <Input
        id={id}
        placeholder={placeholder}
        value={value}
        onChange={handleInputChange}
        onFocus={() => setIsFocused(true)}
        onBlur={() => setTimeout(() => setIsFocused(false), 200)}
        autoComplete="off"
      />
      {isFocused && suggestions.length > 0 && (
        <ul className="absolute z-10 w-full bg-white border rounded shadow max-h-48 overflow-auto mt-1">
          {suggestions.map((seller) => (
            <li
              key={seller.id}
              onClick={() => {
                onChange(seller.name);
                onSelect?.(seller);
              }}
              className="cursor-pointer px-3 py-1 hover:bg-gray-100"
            >
              {seller.name}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
 }
--- a/src/app/orders/[id]/not-found.tsx
+++ b/src/app/orders/[id]/not-found.tsx
@@ -0,0 +1,16 @@
 import Link from "next/link";
 import { Button } from "../../../components/ui/button";
 export default function OrderNotFound() {
  return (
    <div className="flex flex-col items-center justify-center min-h-[70vh] p-4">
      <h1 className="text-3xl font-bold mb-4">Pedido não encontrado</h1>
      <p className="text-gray-600 mb-6">O pedido que você está procurando não existe ou foi removido.</p>
      <Link href="/orders/find" passHref>
        <Button>
          Voltar para lista de pedidos
        </Button>
      </Link>
    </div>
  );
 } 
--- a/src/app/orders/[id]/page.tsx
+++ b/src/app/orders/[id]/page.tsx
@@ -0,0 +1,104 @@
 'use client';
 import { use } from "react";
 import { OrderDetail } from "../../../components/orders/OrderDetail";
 import { Order, TimelineEvent, leadtime } from "../../../components/types";
 import { ordersApi } from "../../../lib/api";
 import { useEffect, useState } from "react";
 import { Loader2 } from "lucide-react";
 interface OrderPageProps {
  params: Promise<{ id: string }>;
 }
 // Função para mapear leadtime para TimelineEvent
 function mapLeadtimeToTimelineEvent(item: leadtime): TimelineEvent {
  return {
    id: `${item.orderId}-${item.descricaoEtapa || Math.random()}`,
    description: item.descricao || "",
    date: item.data || new Date().toISOString(),
    status: item.status || "default",
    icon: item.icon,
    color: item.color,
    user: item.nomeFuncionario
  };
 }
 /**
 * Página de detalhe do pedido com timeline
 */
 export default function OrderPage({ params }: OrderPageProps) {
  const { id } = use(params);
  const [order, setOrder] = useState<Order | null>(null);
  const [timelineEvents, setTimelineEvents] = useState<TimelineEvent[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  useEffect(() => {
    async function loadOrderData() {
      if (!id) {
        setError("ID do pedido não encontrado");
        setLoading(false);
        return;
      }
      setLoading(true);
      try {
        const response = await ordersApi.findOrders({ orderId: id });
        if (!response || !response.data || !Array.isArray(response.data) || response.data.length === 0) {
          setError("Pedido não encontrado");
          setLoading(false);
          return;
        }
        setOrder(response.data[0] as Order);
        try {
          const leadtimeResponse = await ordersApi.getLeadtime(id);
          // Converter leadtime para TimelineEvent
          const mappedEvents = leadtimeResponse.map(mapLeadtimeToTimelineEvent);
          setTimelineEvents(mappedEvents);
        } catch (timelineError) {
          console.error("Erro ao carregar timeline:", timelineError);
          setTimelineEvents([]);
        }
      } catch (orderError) {
        console.error("Erro ao carregar pedido:", orderError);
        setError("Erro ao carregar dados do pedido");
      } finally {
        setLoading(false);
      }
    }
    loadOrderData();
  }, [id]);
  if (loading) {
    return (
      <div className="w-full h-screen flex items-center justify-center">
        <div className="flex flex-col items-center">
          <Loader2 className="h-8 w-8 animate-spin text-primary" />
          <p className="mt-2 text-sm text-muted-foreground">Carregando detalhes do pedido...</p>
        </div>
      </div>
    );
  }
  if (error || !order) {
    return (
      <div className="w-full h-screen flex items-center justify-center">
        <div className="bg-white p-6 rounded-lg border shadow-sm max-w-md mx-auto text-center">
          <h2 className="text-xl font-semibold mb-2">Pedido não encontrado</h2>
          <p className="text-muted-foreground mb-4">{error || "Não foi possível encontrar o pedido solicitado."}</p>
          <a href="/orders/find" className="text-primary hover:underline">
            Voltar para busca de pedidos
          </a>
        </div>
      </div>
    );
  }
  return <OrderDetail order={order} timelineEvents={timelineEvents} />;
 }
--- a/src/app/orders/find/loading.tsx
+++ b/src/app/orders/find/loading.tsx
@@ -0,0 +1,3 @@
 export default function Loading() {
  return null
 }
--- a/src/app/orders/find/page.tsx
+++ b/src/app/orders/find/page.tsx
@@ -0,0 +1,432 @@
 "use client";
 import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
 } from "@/src/components/ui/card";
 import { Button } from "@/src/components/ui/button";
 import { Search, RefreshCw, ChevronUp, ChevronDown } from "lucide-react";
 import { OrdersTable } from "@/src/components/orders/OrdersTable";
 import { ErrorMessage } from "@/src/components/ui/error-message";
 import { useStores } from "@/src/hooks/useStores";
 import { useOrderSearch } from "@/src/hooks/useOrderSearch";
 import { FilterInput } from "@/src/components/orders/FilterInput";
 import { FilterSelect } from "@/src/components/orders/FilterSelect";
 import { STATUS_OPTIONS } from "@/src/constants/status-options";
 import { DELIVERY_STATUS_OPTIONS } from "@/src/constants/delivery-status-options";
 import { Spinner } from "@/src/components/ui/spinner";
 import { DateRangeFilter } from "@/src/components/orders/DateRangeFilter";
 import { MultiFilterSelect } from "@/src/components/orders/MultiFilterSelect";
 import { CustomerSearchInput } from "@/src/components/orders/CustomerSearchInput";
 import { useCallback, useState, useEffect } from "react";
 import { User, useAuthValidation } from "../../../hooks/useAuthValidation";
 import { SellerSearchInput } from "@/src/components/orders/SellerSearchInput";
 /**
 * Página de Consulta de Pedidos
 * Permite ao usuário pesquisar pedidos com base em vários filtros
 *
 * @returns Componente da página de consulta de pedidos
 */
 export default function FindOrdersPage() {
   const {
  user,
  isAuthenticated,
  isLoading: authLoading,
  error: authError,
  decodedToken,
 } = useAuthValidation({
  authServiceUrl: process.env.NEXT_PUBLIC_AUTH_SERVICE_URL!,
  token: "eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiIxMzg1IiwidXNlcm5hbWUiOiJKT0VMU09OLlIiLCJyb2xlIjpudWxsLCJpYXQiOjE3NDg4MjQzNDEsImV4cCI6MTc1MzIzMDc0MX0.H4nRp72NTEzHBKij67BgW4NO8Pot9AqPKlaynne694c",
  autoRedirect: false,
 });
  console.log("User:", user);
  console.log("Decoded Token:", decodedToken);
  console.log("Auth Loading:", authLoading);
  console.log("Auth Error:", authError);
  console.log("Is Authenticated:", isAuthenticated);
  const [isFiltersExpanded, setIsFiltersExpanded] = useState(true);
  const { storeOptions, loading: loadingStores, stores } = useStores(true);
  const [usePreloadClients, setUsePreloadClients] = useState(false);
  const [status, setStatus] = useState("");
  const [leadtime, setLeadtime] = useState("");
  const {
    orders,
    loading,
    dateError,
    hasSearched,
    selectedOrderId,
    orderItems,
    cutitens,
    loadingItems,
    itemsError,
    currentPage,
    totalPages,
    currentOrders,
    indexOfFirstOrder,
    indexOfLastOrder,
    searchParams,
    setSearchParams,
    handleSearch,
    handleRowClick,
    goToNextPage,
    goToPreviousPage,
    goToPage,
    loadMoreOrders,
    visibleOrdersCount,
    handleInputChange,
    handleCustomerId,
    handleCustomerFilter,
    handleCustomerSelect,
    handleMultiInputChange,
  } = useOrderSearch(8);
  /**
   * Limpa todos os filtros de pesquisa
   * @returns {void}
   */
  const handleClearFilters = useCallback(() => {
    setSearchParams({});
  }, [setSearchParams]);
  /**
   * Alterna o modo de pré-carregamento de clientes
   * Quando ativado, carrega clientes antecipadamente para melhorar o desempenho da busca
   * @returns {void}
   */
  const togglePreloadMode = useCallback(() => {
    setUsePreloadClients((prev) => !prev);
  }, []);
  return (
    <div className="space-y-1">
      <Card className="overflow-hidden">
        <CardHeader
          className="flex flex-row items-center justify-between space-y-0 py-1 px-4 white-slate-80 cursor-pointer"
          onClick={() => setIsFiltersExpanded(!isFiltersExpanded)}
        >
          <CardTitle className="text-lg font-bold">
            Consulta de Pedidos
          </CardTitle>
          <Button variant="ghost" size="sm" className="h-6 px-1">
            {isFiltersExpanded ? (
              <ChevronUp className="h-4 w-4" />
            ) : (
              <ChevronDown className="h-4 w-4" />
            )}
          </Button>
        </CardHeader>
        {isFiltersExpanded && (
          <CardContent className="p-0">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-x-2 gap-y-2 items-start p-2">
              <div className="flex flex-col space-y-4">
                <div className="filter-field">
                  <FilterSelect
                    id="codfilial"
                    label="Filial de Venda"
                    value={searchParams.codfilial}
                    onValueChange={(value) =>
                      handleInputChange("codfilial", value)
                    }
                    placeholder="Selecione a filial"
                    disabled={loadingStores}
                    options={storeOptions}
                    loading={loadingStores}
                    loadingText="Carregando filiais..."
                    className="w-full"
                    aria-label="Filial de Venda"
                  />
                </div>
                <div className="filter-field">
                  <CustomerSearchInput
                    id="customerSearch"
                    label="Cliente"
                    placeholder="Buscar por codigo, nome ou CPF/CNPJ"
                    value={
                      searchParams.name ||
                      searchParams.customerId ||
                      searchParams.document ||
                      ""
                    }
                    onChange={handleCustomerFilter}
                    onSelect={handleCustomerSelect}
                    selectedCustomer={searchParams.selectedCustomer || null}
                    preloadClients={usePreloadClients}
                    maxPreloadedClients={2000}
                    aria-label="Buscar Cliente"
                  />
                </div>
                <div className="flex gap-4">
                  <div className="filter-small-field">
                    <FilterInput
                      id="orderId"
                      label="Número do Pedido"
                      type="number"
                      placeholder="Número do pedido"
                      value={searchParams.orderId}
                      onChange={(value) => handleInputChange("orderId", value)}
                      className="w-full"
                      aria-label="Número do Pedido"
                    />
                  </div>
                  <div className="filter-small-field">
                    <FilterInput
                      id="invoiceNumber"
                      label="Nota Fiscal"
                      placeholder="Número da NF"
                      value={searchParams.invoiceNumber || ""}
                      onChange={(value) =>
                        handleInputChange("invoiceNumber", value)
                      }
                      className="w-full"
                      aria-label="Número da Nota Fiscal"
                    />
                  </div>
                  <div className="filter-small-field">
                    <FilterInput
                      id="shippimentId"
                      label=" Carregamento"
                      placeholder="Carregamento"
                      value={searchParams.shippimentId || ""}
                      onChange={(value) =>
                        handleInputChange("shippimentId", value)
                      }
                      className="w-full"
                      aria-label="Carregamento"
                    />
                  </div>
                </div>
                <div className="flex gap-4">
                  <div className="filter-small-field">
                    <MultiFilterSelect
                      id="orderType"
                      label="Tipo de Venda"
                      placeholder="Tipo de venda"
                      values={
                        searchParams.type
                          ? Array.isArray(searchParams.type)
                            ? searchParams.type
                            : [searchParams.type]
                          : []
                      }
                      onValuesChange={(values) =>
                        handleMultiInputChange("type", values)
                      }
                      options={[
                        { label: "TV1 - Retira Imediata", value: "1" },
                        { label: "TV7 - Faturamento", value: "7" },
                        { label: "TV8 - Entrega", value: "8" },
                        { label: "TV10 - Transferência", value: "10" },
                      ]}
                      className="w-full"
                      aria-label="Tipo de Venda"
                    />
                  </div>
                  <div className="filter-small-field">
                    <MultiFilterSelect
                      id="deliveryType"
                      label="Tipo de Entrega"
                      placeholder="Tipo de entrega"
                      values={
                        searchParams.deliveryType
                          ? Array.isArray(searchParams.deliveryType)
                            ? searchParams.deliveryType
                            : [searchParams.deliveryType]
                          : []
                      }
                      onValuesChange={(values) =>
                        handleMultiInputChange("deliveryType", values)
                      }
                      options={[
                        { label: "Retira Imediata", value: "RI" },
                        { label: "Entrega", value: "EN" },
                        { label: "Entrega Futura", value: "EF" },
                        { label: "Retira Posterior", value: "RP" },
                      ]}
                      className="w-full"
                      aria-label="Tipo de Entrega"
                    />
                  </div>
                  <div className="filter-small-field">
                    <MultiFilterSelect
                      id="status"
                      label="Situação"
                      values={
                        Array.isArray(searchParams.status)
                          ? searchParams.status
                          : searchParams.status
                            ? [searchParams.status]
                            : []
                      }
                      onValuesChange={(values) =>
                        handleMultiInputChange("status", values)
                      }
                      placeholder=" Situação"
                      options={STATUS_OPTIONS}
                      className="w-full"
                      aria-label="Situação do Pedido"
                    />
                  </div>
                </div>
              </div>
              <div className="flex flex-col space-y-4">
                <div className="filter-field">
                  <FilterSelect
                    id="stockId"
                    label="Filial de Estoque"
                    value={searchParams.stockId}
                    onValueChange={(value) =>
                      handleInputChange("stockId", value)
                    }
                    placeholder="Filial de estoque"
                    options={storeOptions}
                    loading={loadingStores}
                    loadingText="Carregando filiais..."
                    className="w-full"
                    aria-label="Filial de Estoque"
                  />
                </div>
                <div className="filter-field">
                  <SellerSearchInput
                    id="sellerSearch"
                    label="Nome do Vendedor"
                    placeholder="Buscar por nome ou código do vendedor"
                    value={searchParams.sellerName || ""}
                    onChange={(value) => handleInputChange("sellerName", value)}
                    onSelect={(seller) => {
                      if (seller) {
                        if (seller.code) {
                          handleInputChange("sellerId", seller.code);
                        } else {
                          handleInputChange("sellerId", seller.id.toString());
                        }
                        handleInputChange("sellerName", seller.name);
                      } else {
                        handleInputChange("sellerId", "");
                        handleInputChange("sellerName", "");
                      }
                    }}
                    selectedSeller={searchParams.sellerName ? {
                      id: parseInt(String(searchParams.sellerId || "0"), 10) || 0,
                      name: searchParams.sellerName,
                      code: (searchParams.sellerId || "").toString()
                    } : undefined}
                    aria-label="Buscar Vendedor"
                  />
                </div>
                <div className="filter-field">
                  <DateRangeFilter
                    startDateId="createDateIni"
                    endDateId="createDateEnd"
                    label="Período (Obrigatório)"
                    startValue={searchParams.createDateIni}
                    endValue={searchParams.createDateEnd}
                    onStartChange={(value) =>
                      handleInputChange("createDateIni", value)
                    }
                    onEndChange={(value) =>
                      handleInputChange("createDateEnd", value)
                    }
                    aria-label="Período"
                  />
                </div>
              </div>
              <div className="flex gap-4">
                <div className="flex flex-col space-y-4"></div>
              </div>
            </div>
            <div className="flex items-center justify-end gap-2 mx-4 pb-3">
              <Button
                variant="outline"
                size="sm"
                onClick={handleClearFilters}
                title="Limpar filtros"
                aria-label="Limpar todos os filtros de pesquisa"
                className="h-8"
              >
                <RefreshCw className="mr-2 h-4 w-4" />
                Limpar
              </Button>
              <Button
                variant={"blue"}
                onClick={handleSearch}
                disabled={loading}
                className="h-8 px-4"
                aria-label="Pesquisar pedidos com os filtros selecionados"
              >
                {loading ? (
                  <Spinner size="sm" />
                ) : (
                  <Search className="mr-2 h-4 w-4" />
                )}
                Pesquisar
              </Button>
            </div>
            {dateError && <ErrorMessage message={dateError} />}
          </CardContent>
        )}
      </Card>
      {loading ? (
        <Card className="overflow-hidden">
          <CardContent className="flex h-40 items-center justify-center p-4">
            <div className="flex flex-col items-center gap-2">
              <Spinner size="md" />
              <p className="text-sm text-muted-foreground">
                Buscando pedidos...
              </p>
            </div>
          </CardContent>
        </Card>
      ) : hasSearched ? (
        <Card className="overflow-hidden">
          <CardContent className="p-0">
            <OrdersTable
              orders={orders}
              currentOrders={currentOrders}
              selectedOrderId={selectedOrderId}
              orderItems={orderItems}
              cutitens={cutitens}
              loadingItems={loadingItems}
              itemsError={itemsError}
              handleRowClick={handleRowClick}
              currentPage={currentPage}
              totalPages={totalPages}
              indexOfFirstOrder={indexOfFirstOrder}
              indexOfLastOrder={indexOfLastOrder}
              goToPreviousPage={goToPreviousPage}
              goToNextPage={goToNextPage}
              goToPage={goToPage}
              loadMoreOrders={loadMoreOrders}
              visibleOrdersCount={visibleOrdersCount}
              stores={stores}
              transfers={[]}
              status={status}
              leadtime={leadtime}
            />
          </CardContent>
        </Card>
      ) : null}
    </div>
  );
 }
--- a/src/app/orders/loading.tsx
+++ b/src/app/orders/loading.tsx
@@ -0,0 +1,3 @@
 export default function Loading() {
  return null
 }
--- a/src/app/orders/not-found.tsx
+++ b/src/app/orders/not-found.tsx
@@ -0,0 +1,16 @@
 import Link from "next/link";
 import { Button } from "../../components/ui/button";
 export default function OrdersNotFound() {
  return (
    <div className="flex flex-col items-center justify-center min-h-[70vh] p-4">
      <h1 className="text-3xl font-bold mb-4">Pedido não encontrado</h1>
      <p className="text-gray-600 mb-6">O pedido que você está procurando não existe ou foi removido.</p>
      <Link href="/orders/find" passHref>
        <Button>
          Voltar para lista de pedidos
        </Button>
      </Link>
    </div>
  );
 } 
--- a/src/app/orders/page.tsx
+++ b/src/app/orders/page.tsx
@@ -0,0 +1,6 @@
 import { redirect } from "next/navigation";
 export default function OrdersPage() {
  redirect("/orders/find");
 } 
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -0,0 +1,15 @@
 "use client"
 export default function Home() {
  return (
      <div>
        <h1>Home</h1>
      </div>
  )
 }
--- a/src/components/forms/OrderSearchForm.tsx
+++ b/src/components/forms/OrderSearchForm.tsx
@@ -0,0 +1,208 @@
 "use client";
 import { OrderSearchParams, orderSearchParamsSchema } from "@/src/schemas";
 import { useZodForm } from "@/src/hooks";
 interface OrderSearchFormProps {
  onSearch: (params: OrderSearchParams) => void;
  isLoading?: boolean;
 }
 export function OrderSearchForm({ onSearch, isLoading = false }: OrderSearchFormProps) {
  const {
    values,
    errors,
    handleChange,
    handleSubmit,
    resetForm
  } = useZodForm(orderSearchParamsSchema, {}, onSearch);
  return (
    <form onSubmit={handleSubmit} className="space-y-5 bg-white p-5 rounded-lg shadow" aria-label="Formulário de busca de pedidos">
      <h2 className="text-lg font-semibold text-gray-700 mb-3 border-b pb-2">Busca de Pedidos</h2>
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-4 gap-y-5">
        {/* Número do Pedido */}
        <div className="space-y-1">
          <label htmlFor="orderId" className="text-sm font-medium text-gray-700">
            Número do Pedido
          </label>
          <input
            type="number"
            id="orderId"
            name="orderId"
            value={values.orderId || ""}
            onChange={handleChange}
            min="1"
            inputMode="numeric"
            className={`w-full rounded border p-2 text-sm ${
              errors.orderId ? "border-red-500" : "border-gray-300"
            }`}
            placeholder="Número do pedido"
          />
          {errors.orderId && (
            <p className="text-red-500 text-xs">{errors.orderId}</p>
          )}
        </div>
        {/* Cliente ID */}
        <div className="space-y-1">
          <label htmlFor="customerId" className="text-sm font-medium text-gray-700">
            ID do Cliente
          </label>
          <input
            type="number"
            id="customerId"
            name="customerId"
            value={values.customerId || ""}
            onChange={handleChange}
            min="1"
            inputMode="numeric"
            className={`w-full rounded border p-2 text-sm ${
              errors.customerId ? "border-red-500" : "border-gray-300"
            }`}
            placeholder="ID do cliente"
          />
          {errors.customerId && (
            <p className="text-red-500 text-xs">{errors.customerId}</p>
          )}
        </div>
        {/* Número da Nota Fiscal */}
        <div className="space-y-1">
          <label htmlFor="invoiceNumber" className="text-sm font-medium text-gray-700">
            Número da Nota Fiscal
          </label>
          <input
            type="text"
            id="invoiceNumber"
            name="invoiceNumber"
            value={values.invoiceNumber || ""}
            onChange={handleChange}
            className={`w-full rounded border p-2 text-sm ${
              errors.invoiceNumber ? "border-red-500" : "border-gray-300"
            }`}
            placeholder="Número da NF"
          />
          {errors.invoiceNumber && (
            <p className="text-red-500 text-xs">{errors.invoiceNumber}</p>
          )}
        </div>
        {/* Status */}
        <div className="space-y-1">
          <label htmlFor="status" className="text-sm font-medium text-gray-700">
            Status
          </label>
          <select
            id="status"
            name="status"
            value={values.status || ""}
            onChange={handleChange}
            className={`w-full rounded border p-2 text-sm ${
              errors.status ? "border-red-500" : "border-gray-300"
            }`}
          >
            <option value="">Selecione o status</option>
            <option value="Aberto">Aberto</option>
            <option value="Em Processamento">Em Processamento</option>
            <option value="Faturado">Faturado</option>
            <option value="Entregue">Entregue</option>
            <option value="Cancelado">Cancelado</option>
          </select>
          {errors.status && (
            <p className="text-red-500 text-xs">{errors.status}</p>
          )}
        </div>
        {/* Data Inicial */}
        <div className="space-y-1">
          <label htmlFor="createDateIni" className="text-sm font-medium text-gray-700">
            Data Inicial
          </label>
          <input
            type="date"
            id="createDateIni"
            name="createDateIni"
            value={values.createDateIni || ""}
            onChange={handleChange}
            max={values.createDateEnd || undefined}
            className={`w-full rounded border p-2 text-sm ${
              errors.createDateIni ? "border-red-500" : "border-gray-300"
            }`}
          />
          {errors.createDateIni && (
            <p className="text-red-500 text-xs">{errors.createDateIni}</p>
          )}
        </div>
        {/* Data Final */}
        <div className="space-y-1">
          <label htmlFor="createDateEnd" className="text-sm font-medium text-gray-700">
            Data Final
          </label>
          <input
            type="date"
            id="createDateEnd"
            name="createDateEnd"
            value={values.createDateEnd || ""}
            onChange={handleChange}
            min={values.createDateIni || undefined}
            className={`w-full rounded border p-2 text-sm ${
              errors.createDateEnd ? "border-red-500" : "border-gray-300"
            }`}
          />
          {errors.createDateEnd && (
            <p className="text-red-500 text-xs">{errors.createDateEnd}</p>
          )}
        </div>
        {/* Local de Entrega */}
        <div className="space-y-1">
          <label htmlFor="deliveryLocal" className="text-sm font-medium text-gray-700">
            Local de Entrega
          </label>
          <input
            type="text"
            id="deliveryLocal"
            name="deliveryLocal"
            value={values.deliveryLocal || ""}
            onChange={handleChange}
            className={`w-full rounded border p-2 text-sm ${
              errors.deliveryLocal ? "border-red-500" : "border-gray-300"
            }`}
            placeholder="Local de entrega"
          />
          {errors.deliveryLocal && (
            <p className="text-red-500 text-xs">{errors.deliveryLocal}</p>
          )}
        </div>
      </div>
      <div className="flex flex-col sm:flex-row items-center justify-between border-t pt-4 mt-2">
        <p className="text-xs text-gray-500 mb-3 sm:mb-0">Todos os campos são opcionais</p>
        <div className="flex justify-end space-x-3">
          <button
            type="button"
            onClick={resetForm}
            className="px-4 py-2 bg-gray-200 text-gray-700 rounded hover:bg-gray-300 transition-colors"
            disabled={isLoading}
          >
            Limpar
          </button>
          <button
            type="submit"
            disabled={isLoading}
            className={`px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700 transition-colors flex items-center justify-center min-w-[100px] ${
              isLoading ? "opacity-70 cursor-not-allowed" : ""
            }`}
            aria-busy={isLoading}
          >
            {isLoading ? "Buscando..." : "Buscar"}
          </button>
        </div>
      </div>
    </form>
  );
 } 
--- a/src/components/logo_juru.png
+++ b/src/components/logo_juru.png
--- a/src/components/orders/ColumnConfig/ColumnConfig.tsx
+++ b/src/components/orders/ColumnConfig/ColumnConfig.tsx
@@ -0,0 +1,75 @@
 import { Button } from "@/src/components/ui/button";
 import { Settings } from "lucide-react";
 import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
  DropdownMenuCheckboxItem,
 } from "@/src/components/ui/dropdown-menu";
 interface ColumnConfigProps {
  allColumns: string[];
  visibleColumns: string[];
  isColumnVisible: (column: string) => boolean;
  toggleColumn: (column: string) => void;
  selectAllColumns: () => void;
  unselectAllColumns: () => void;
 }
 export function ColumnConfig({
  allColumns,
  visibleColumns,
  isColumnVisible,
  toggleColumn,
  selectAllColumns,
  unselectAllColumns,
 }: ColumnConfigProps) {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button 
          variant="ghost" 
          size="sm"
          className="text-xs text-muted-foreground hover:text-foreground transition-colors"
        >
          <Settings className="h-3.5 w-3.5 mr-1" />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end" className="w-48">
        <div className="flex items-center justify-between px-2 py-1.5">
          <Button
            variant="ghost"
            size="sm"
            onClick={selectAllColumns}
            className="text-xs hover:text-foreground transition-colors px-2 h-7"
          >
            Todas
          </Button>
          <div className="h-4 w-px bg-border mx-1" />
          <Button
            variant="ghost"
            size="sm"
            onClick={unselectAllColumns}
            className="text-xs hover:text-foreground transition-colors px-2 h-7"
          >
            Nenhuma
          </Button>
        </div>
        <DropdownMenuSeparator />
        <div className="max-h-[300px] overflow-y-auto">
          {allColumns.map((column) => (
            <DropdownMenuCheckboxItem
              key={column}
              checked={isColumnVisible(column)}
              onCheckedChange={() => toggleColumn(column)}
              className="text-xs"
            >
              {column}
            </DropdownMenuCheckboxItem>
          ))}
        </div>
      </DropdownMenuContent>
    </DropdownMenu>
  );
 }
--- a/src/components/orders/ColumnConfig/ColumnConfigTrigger.tsx
+++ b/src/components/orders/ColumnConfig/ColumnConfigTrigger.tsx
@@ -0,0 +1,14 @@
 import { Settings } from "lucide-react";
 import { Button } from "@/src/components/ui/button";
 import { DropdownMenuTrigger } from "@/src/components/ui/dropdown-menu";
 export function ColumnConfigTrigger() {
  return (
    <DropdownMenuTrigger asChild>
      <Button variant="outline" size="sm" className="flex items-center gap-1">
        <Settings className="h-4 w-4" />
        <span>Configurar Colunas</span>
      </Button>
    </DropdownMenuTrigger>
  );
 }
--- a/src/components/orders/ColumnConfig/ColumnList.tsx
+++ b/src/components/orders/ColumnConfig/ColumnList.tsx
@@ -0,0 +1,26 @@
 import { ColumnVisibilityItem } from "./ColumnVisibilityItem";
 interface ColumnListProps {
  allColumns: string[];
  isColumnVisible: (column: string) => boolean;
  toggleColumn: (column: string) => void;
 }
 export function ColumnList({
  allColumns,
  isColumnVisible,
  toggleColumn,
 }: ColumnListProps) {
  return (
    <div className="max-h-[300px] overflow-y-auto">
      {allColumns.map((column) => (
        <ColumnVisibilityItem
          key={column}
          column={column}
          checked={isColumnVisible(column)}
          onToggle={toggleColumn}
        />
      ))}
    </div>
  );
 }
--- a/src/components/orders/ColumnConfig/ColumnToggleActions.tsx
+++ b/src/components/orders/ColumnConfig/ColumnToggleActions.tsx
@@ -0,0 +1,22 @@
 import { Button } from "@/src/components/ui/button";
 interface ColumnToggleActionsProps {
  onSelectAll: () => void;
  onUnselectAll: () => void;
 }
 export function ColumnToggleActions({
  onSelectAll,
  onUnselectAll,
 }: ColumnToggleActionsProps) {
  return (
    <div className="flex justify-between mb-2 border-b pb-2">
      <Button variant="ghost" size="sm" onClick={onSelectAll} className="text-xs h-7">
        Marcar Todas
      </Button>
      <Button variant="ghost" size="sm" onClick={onUnselectAll} className="text-xs h-7">
        Desmarcar Todas
      </Button>
    </div>
  );
 }
--- a/src/components/orders/ColumnConfig/ColumnVisibilityItem.tsx
+++ b/src/components/orders/ColumnConfig/ColumnVisibilityItem.tsx
@@ -0,0 +1,51 @@
 // src/components/ColumnConfig/ColumnVisibilityItem.tsx
 import { DropdownMenuCheckboxItem } from "@/src/components/ui/dropdown-menu";
 interface Props {
  column: string;
  checked: boolean;
  onToggle: (column: string) => void;
 }
 export function ColumnVisibilityItem({ column, checked, onToggle }: Props) {
  return (
    <DropdownMenuCheckboxItem
      key={column}
      checked={checked}
      onCheckedChange={() => onToggle(column)}
      className="flex items-center space-x-2 cursor-pointer py-1.5 hover:bg-gray-100 px-2 rounded"
    >
      <div className="flex items-center gap-2 text-sm">
        {checked ? (
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
            className="h-4 w-4 text-blue-600"
          >
            <rect width="16" height="16" x="4" y="4" rx="2" />
            <path d="m9 12 2 2 4-4" />
          </svg>
        ) : (
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
            className="h-4 w-4 text-gray-400"
          >
            <rect width="16" height="16" x="4" y="4" rx="2" />
          </svg>
        )}
        {column}
      </div>
    </DropdownMenuCheckboxItem>
  );
 }
--- a/src/components/orders/CustomerSearchInput.tsx
+++ b/src/components/orders/CustomerSearchInput.tsx
@@ -0,0 +1,694 @@
 "use client";
 import * as React from "react";
 import { Check, ChevronsUpDown, User, Loader2, CloudOff, DownloadCloud, X } from "lucide-react";
 import { cn } from "@/src/lib/utils";
 import { Button } from "@/src/components/ui/button";
 import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
 } from "@/src/components/ui/command";
 import {
  Popover,
  PopoverContent,
  PopoverTrigger,
 } from "@/src/components/ui/popover";
 import { clientesApi } from "@/src/lib/api";
 import { Cliente } from "@/src/components/types";
 import { Label } from "@/src/components/ui/label";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/src/components/ui/tooltip";
 import { Badge } from "@/src/components/ui/badge";
 import { useLocalStorage } from "../../hooks/useLocalStorage";
 interface CustomerSearchInputProps {
  id: string;
  label: string;
  placeholder: string;
  value: string;
  onChange: (value: string) => void;
  onSelect: (customer: Cliente | null) => void;
  selectedCustomer: Cliente | null;
  preloadClients?: boolean;
  maxPreloadedClients?: number;
  recentLimit?: number;
  disabled?: boolean;
 }
 // Função para normalizar texto para comparações (remover acentos, case insensitive)
 const normalizeText = (text: string): string => {
  return text
    ? text
        .toLowerCase()
        .normalize("NFD")
        .replace(/[\u0300-\u036f]/g, "")
    : "";
 };
 export function CustomerSearchInput({
  id,
  label,
  placeholder,
  value,
  onChange,
  onSelect,
  selectedCustomer,
  preloadClients = false,
  maxPreloadedClients = 10,
  recentLimit = 5,
  disabled = false,
 }: CustomerSearchInputProps) {
  const [open, setOpen] = React.useState(false);
  const [customers, setCustomers] = React.useState<Cliente[]>([]);
  const [allCustomers, setAllCustomers] = React.useState<Cliente[]>([]);
  const [isPreloaded, setIsPreloaded] = React.useState(false);
  const [preloadLoading, setPreloadLoading] = React.useState(false);
  const [preloadError, setPreloadError] = React.useState<string | null>(null);
  const [loading, setLoading] = React.useState(false);
  const [searchQuery, setSearchQuery] = React.useState("");
  const [debouncedQuery, setDebouncedQuery] = React.useState("");
  const [searchError, setSearchError] = React.useState<string | null>(null);
  const [useOfflineSearch, setUseOfflineSearch] = React.useState(false);
  const searchInputRef = React.useRef<HTMLInputElement>(null);
  const [recentCustomers, setRecentCustomers] = useLocalStorage<Cliente[]>(
    "recent-customers",
    []
  );
  // Memorized index for offline search
  const searchIndex = React.useMemo(() => {
    if (!allCustomers.length) return {};
    // Criar um índice para busca mais rápida
    const index: Record<string, Set<number>> = {};
    allCustomers.forEach((customer, idx) => {
      // Processar ID
      if (customer.id) {
        const idStr = customer.id.toString();
        for (let i = 1; i <= idStr.length; i++) {
          const partial = idStr.substring(0, i);
          if (!index[partial]) index[partial] = new Set();
          index[partial].add(idx);
        }
      }
      // Processar nome
      if (customer.name) {
        const normalizedName = normalizeText(customer.name);
        const words = normalizedName.split(/\s+/);
        // Indexar palavras completas
        words.forEach(word => {
          if (!index[word]) index[word] = new Set();
          index[word].add(idx);
        });
        // Indexar prefixos de palavras (até 4 letras)
        words.forEach(word => {
          for (let i = 1; i <= Math.min(word.length, 4); i++) {
            const prefix = word.substring(0, i);
            if (!index[prefix]) index[prefix] = new Set();
            index[prefix].add(idx);
          }
        });
      }
      // Processar documento
      if (customer.document) {
        const doc = customer.document.replace(/[^\w]/g, "");
        for (let i = 1; i <= doc.length; i++) {
          const partial = doc.substring(0, i);
          if (!index[partial]) index[partial] = new Set();
          index[partial].add(idx);
        }
      }
    });
    return index;
  }, [allCustomers]);
  const preloadAllCustomers = React.useCallback(async () => {
    try {
      setPreloadLoading(true);
      setPreloadError(null);
      const allClients = await clientesApi.getAllClientes(maxPreloadedClients);
      if (!allClients || allClients.length === 0) {
        throw new Error("Nenhum cliente retornado");
      }
      setAllCustomers(allClients || []);
      setIsPreloaded(true);
      setUseOfflineSearch(true);
      try {
        localStorage.setItem("cached-customers", JSON.stringify(allClients));
        localStorage.setItem("cached-customers-timestamp", Date.now().toString());
      } catch (storageError) {
        console.warn("Não foi possível armazenar clientes no cache:", storageError);
      }
    } catch (error) {
      console.error("Erro ao pré-carregar clientes:", error);
      setPreloadError("Falha ao carregar banco de clientes.");
      setUseOfflineSearch(false);
      // Tentar carregar do cache se disponível
      try {
        const cachedData = localStorage.getItem("cached-customers");
        if (cachedData) {
          const cachedClients = JSON.parse(cachedData);
          setAllCustomers(cachedClients);
          setIsPreloaded(true);
          setUseOfflineSearch(true);
          setPreloadError("Usando dados em cache. Falha na atualização online.");
        }
      } catch (cacheError) {
        console.warn("Erro ao carregar clientes do cache:", cacheError);
      }
    } finally {
      setPreloadLoading(false);
    }
  }, [maxPreloadedClients]);
  // Tentar carregar clientes do cache ao inicializar
  React.useEffect(() => {
    if (preloadClients && !isPreloaded) {
      try {
        const cachedData = localStorage.getItem("cached-customers");
        const timestamp = localStorage.getItem("cached-customers-timestamp");
        if (cachedData && timestamp) {
          const cachedTime = parseInt(timestamp, 10);
          const now = Date.now();
          const oneDay = 24 * 60 * 60 * 1000;
          // Só usar cache se for mais recente que 1 dia
          if (now - cachedTime < oneDay) {
            const cachedClients = JSON.parse(cachedData);
            setAllCustomers(cachedClients);
            setIsPreloaded(true);
            setUseOfflineSearch(true);
            // Ainda assim, atualizar em segundo plano
            preloadAllCustomers().catch(console.error);
            return;
          }
        }
        // Se não tiver cache ou for antigo, carregar normalmente
        preloadAllCustomers();
      } catch (error) {
        console.warn("Erro ao verificar cache:", error);
        preloadAllCustomers();
      }
    }
  }, [preloadClients, isPreloaded, preloadAllCustomers]);
  // Alternar entre modo online e offline de busca
  const toggleSearchMode = () => {
    if (!isPreloaded && !useOfflineSearch) {
      preloadAllCustomers();
    } else {
      setUseOfflineSearch(!useOfflineSearch);
      setSearchQuery("");
      setCustomers([]);
    }
  };
  // Busca local otimizada quando está usando modo offline
  const searchOffline = React.useCallback((query: string) => {
    if (!query || query.length < 2) {
      if (recentCustomers.length > 0) {
        setCustomers(recentCustomers.slice(0, recentLimit));
      } else {
        setCustomers([]);
      }
      return;
    }
    const normalizedQuery = normalizeText(query);
    const queryTerms = normalizedQuery.split(/\s+/).filter(term => term.length > 0);
    if (queryTerms.length === 0) {
      setCustomers([]);
      return;
    }
    // Usar o índice para encontrar matches potenciais
    let matchSets: Set<number>[] = [];
    queryTerms.forEach(term => {
      // Verificar se o termo existe no índice
      if (searchIndex[term]) {
        matchSets.push(searchIndex[term]);
      } else {
        // Procurar por termos parciais
        const matchingKeys = Object.keys(searchIndex).filter(key => key.includes(term));
        if (matchingKeys.length > 0) {
          const combinedSet = new Set<number>();
          matchingKeys.forEach(key => {
            searchIndex[key].forEach(idx => combinedSet.add(idx));
          });
          if (combinedSet.size > 0) {
            matchSets.push(combinedSet);
          }
        }
      }
    });
    if (matchSets.length === 0) {
      setCustomers([]);
      return;
    }
    // Intersecção de todos os conjuntos para encontrar registros que correspondam a todos os termos
    let resultIndexes: number[] = [];
    if (matchSets.length === 1) {
      resultIndexes = Array.from(matchSets[0]);
    } else {
      // Intersecção de conjuntos (AND lógico)
      const intersection = new Set(matchSets[0]);
      for (let i = 1; i < matchSets.length; i++) {
        const currentSet = matchSets[i];
        for (const idx of intersection) {
          if (!currentSet.has(idx)) {
            intersection.delete(idx);
          }
        }
      }
      resultIndexes = Array.from(intersection);
    }
    // Limitar a 100 resultados para melhor performance e remover duplicatas por ID
    const results = resultIndexes.slice(0, 150).map(idx => allCustomers[idx]);
    // Remover duplicatas (por ID)
    const uniqueResults = Array.from(
      new Map(results.map(item => [item.id, item])).values()
    ).slice(0, 100);
    setCustomers(uniqueResults);
  }, [allCustomers, searchIndex, recentCustomers, recentLimit]);
  // Debounce search query
  React.useEffect(() => {
    const timer = setTimeout(() => {
      setDebouncedQuery(searchQuery);
    }, 300);
    return () => clearTimeout(timer);
  }, [searchQuery]);
  // Search customers when debounced query changes
  React.useEffect(() => {
    if (useOfflineSearch) {
      searchOffline(debouncedQuery);
      return;
    }
    async function searchCustomers() {
      if (!debouncedQuery || debouncedQuery.length < 2) {
        if (recentCustomers.length > 0) {
          setCustomers(recentCustomers.slice(0, recentLimit));
        } else {
          setCustomers([]);
        }
        return;
      }
      try {
        setLoading(true);
        setSearchError(null);
        const results = await clientesApi.search(debouncedQuery);
        // Remover duplicatas (pode haver clientes com o mesmo ID nos resultados)
        const uniqueResults = results ? Array.from(
          new Map(results.map(item => [item.id, item])).values()
        ) : [];
        setCustomers(uniqueResults);
      } catch (error) {
        console.error("Erro ao buscar clientes:", error);
        setSearchError("Erro ao buscar clientes. Tente novamente.");
        // Fallback para busca offline se tiver clientes pré-carregados
        if (isPreloaded && allCustomers.length > 0) {
          setSearchError("Falha na busca online. Usando resultados locais.");
          searchOffline(debouncedQuery);
        } else {
          setCustomers([]);
        }
      } finally {
        setLoading(false);
      }
    }
    searchCustomers();
  }, [debouncedQuery, useOfflineSearch, searchOffline, recentCustomers, recentLimit, isPreloaded, allCustomers]);
  // Adicionar cliente selecionado aos recentes
  const addToRecentCustomers = (customer: Cliente) => {
    if (!customer) return;
    // Remover duplicatas e adicionar no início
    const updatedRecents = [
      customer,
      ...recentCustomers.filter(c => c.id !== customer.id)
    ].slice(0, 10); // Manter apenas os 10 mais recentes
    setRecentCustomers(updatedRecents);
  };
  // Selecionar um cliente
  const handleSelectCustomer = (customer: Cliente) => {
    onSelect(customer);
    addToRecentCustomers(customer);
    setOpen(false);
  };
  // Clear results and selection when input is cleared
  const handleClearSelection = () => {
    onSelect(null);
    onChange("");
    setSearchQuery("");
    setCustomers(recentCustomers.slice(0, recentLimit));
  };
  // Focus input when popover opens
  React.useEffect(() => {
    if (open && searchInputRef.current) {
      setTimeout(() => {
        searchInputRef.current?.focus();
      }, 100);
    }
  }, [open]);
  // Keyboard handler for the input
  const handleKeyDown = (e: React.KeyboardEvent) => {
    // Fechar com Escape
    if (e.key === "Escape") {
      setOpen(false);
    }
    // Limpar seleção com Delete ou Backspace quando input está vazio
    if ((e.key === "Delete" || e.key === "Backspace") && !searchQuery && selectedCustomer) {
      handleClearSelection();
    }
  };
  return (
    <div className="flex flex-col space-y-1">
      <div className="flex justify-between items-center">
        <Label 
          htmlFor={id} 
          className="text-xs font-medium"
        >
          {label}
          {selectedCustomer && (
            <Badge variant="outline" className="ml-2 text-xs py-0">
              ID: {selectedCustomer.id}
            </Badge>
          )}
        </Label>
        <div className="flex items-center space-x-1">
          {isPreloaded && (
            <TooltipProvider>
              <Tooltip>
                <TooltipTrigger asChild>
                  <Button
                    variant="ghost"
                    size="sm"
                    className="h-5 px-1 text-xs"
                    onClick={toggleSearchMode}
                    disabled={disabled}
                  >
                    {useOfflineSearch ? (
                      <CloudOff className="h-3 w-3 mr-1" />
                    ) : (
                      <DownloadCloud className="h-3 w-3 mr-1" />
                    )}
                    {useOfflineSearch ? "Online" : "Offline"}
                  </Button>
                </TooltipTrigger>
                <TooltipContent>
                  <p>{useOfflineSearch 
                    ? "Alternar para busca online (via)" 
                    : "Alternar para busca offline (dados pré-carregados)"}</p>
                </TooltipContent>
              </Tooltip>
            </TooltipProvider>
          )}
          {!isPreloaded && preloadClients && (
            <TooltipProvider>
              <Tooltip>
                <TooltipTrigger asChild>
                  <Button
                    variant="ghost"
                    size="sm"
                    className="h-5 px-1 text-xs"
                    onClick={preloadAllCustomers}
                    disabled={preloadLoading || disabled}
                  >
                    {preloadLoading ? (
                      <>
                        <Loader2 className="h-3 w-3 mr-1 animate-spin" />
                        <span className="sr-only">Carregando</span>
                      </>
                    ) : (
                      <>
                        <DownloadCloud className="h-3 w-3 mr-1" />
                        <span>Carregar</span>
                      </>
                    )}
                  </Button>
                </TooltipTrigger>
                <TooltipContent>
                  <p>Pré-carregar base de clientes para busca rápida offline</p>
                </TooltipContent>
              </Tooltip>
            </TooltipProvider>
          )}
        </div>
      </div>
      {preloadError && (
        <p className="text-xs text-amber-600 mt-0.5">{preloadError}</p>
      )}
      <div className="relative">
        <Popover open={open} onOpenChange={setOpen}>
          <PopoverTrigger asChild>
            <Button
              variant="outline"
              role="combobox"
              aria-expanded={open}
              aria-label="Selecione um cliente"
              disabled={disabled}
              className={cn(
                "w-full justify-between h-8 transition-all",
                selectedCustomer ? "pr-8" : "text-muted-foreground",
                disabled && "opacity-50 cursor-not-allowed"
              )}
            >
              {selectedCustomer ? (
                <div className="flex items-center gap-2 overflow-hidden">
                  <User className="h-4 w-4 shrink-0" />
                  <span className="truncate">
                    {selectedCustomer.name}
                    {selectedCustomer.document ? ` (${selectedCustomer.document})` : ""}
                  </span>
                </div>
              ) : (
                <span className="truncate">{placeholder}</span>
              )}
              <ChevronsUpDown className="ml-auto h-4 w-4 shrink-0 opacity-50" />
            </Button>
          </PopoverTrigger>
          {/* Botão de limpar seleção */}
          {selectedCustomer && !disabled && (
            <Button
              variant="ghost"
              size="sm"
              className="absolute right-0 top-0 h-full px-2 text-muted-foreground hover:text-foreground"
              onClick={handleClearSelection}
              aria-label="Limpar seleção"
            >
              <X className="h-4 w-4" />
            </Button>
          )}
          <PopoverContent 
            className="w-full p-0" 
            align="start"
            sideOffset={4}
            onEscapeKeyDown={() => setOpen(false)}
          >
            <Command
          filter={(value: string, search: string) => {
                // Use o filtro apenas para navegação com teclado, a filtragem real é feita pela API
                if (value.toLowerCase().includes(search.toLowerCase())) return 1;
                return 0;
              }}
              onKeyDown={handleKeyDown}
            >
              <div className="flex items-center border-b px-3">
                <CommandInput
                  ref={searchInputRef}
                  placeholder={placeholder}
                  value={searchQuery}
                  onValueChange={(value: string) => {
                    setSearchQuery(value);
                    onChange(value);
                  }}
                  className="h-9 flex-1"
                />
                {isPreloaded && (
                  <TooltipProvider>
                    <Tooltip>
                      <TooltipTrigger asChild>
                        <Button
                          variant="ghost"
                          size="sm"
                          className="h-7 w-7 p-0 ml-1"
                          onClick={toggleSearchMode}
                        >
                          {useOfflineSearch ? (
                            <CloudOff className="h-4 w-4" />
                          ) : (
                            <DownloadCloud className="h-4 w-4" />
                          )}
                        </Button>
                      </TooltipTrigger>
                      <TooltipContent side="right">
                        <p>{useOfflineSearch 
                          ? "Usando busca offline (local)" 
                          : "Usando busca online (API)"}</p>
                      </TooltipContent>
                    </Tooltip>
                  </TooltipProvider>
                )}
              </div>
              {searchError && (
                <p className="px-3 py-2 text-xs text-amber-600">{searchError}</p>
              )}
              {loading && (
                <div className="flex items-center justify-center py-6">
                  <Loader2 className="h-4 w-4 animate-spin" />
                  <span className="ml-2 text-sm">Buscando clientes...</span>
                </div>
              )}
              <CommandList>
                <CommandEmpty>
                  {searchQuery.length > 0 ? (
                    "Nenhum cliente encontrado."
                  ) : (
                    "Digite para buscar clientes."
                  )}
                </CommandEmpty>
                {/* Clientes recentes */}
                {!searchQuery && recentCustomers.length > 0 && (
                  <CommandGroup heading="Clientes recentes">
                    {recentCustomers.slice(0, recentLimit).map((customer) => (
                      <CommandItem
                        key={`recent-${customer.id}`}
                        value={`recent-${customer.id || ""} ${customer.name || ""} ${customer.document || ""}`}
                        onSelect={() => handleSelectCustomer(customer)}
                        className="flex items-center gap-2"
                      >
                        <User className="h-4 w-4 text-muted-foreground" />
                        <span>{customer.name}</span>
                        {customer.document && (
                          <span className="ml-1 text-sm text-muted-foreground">
                            ({customer.document})
                          </span>
                        )}
                        {selectedCustomer?.id === customer.id && (
                          <Check className="ml-auto h-4 w-4" />
                        )}
                      </CommandItem>
                    ))}
                  </CommandGroup>
                )}
                {/* Resultados da busca */}
                {customers.length > 0 && (
                  <CommandGroup 
                    heading={
                      searchQuery.length > 0 
                        ? `Resultados (${customers.length}${customers.length >= 100 ? '+' : ''})`
                        : "Clientes"
                    }
                  >
                    {customers
                      // Filtrar clientes que já estão nos recentes se não houver busca
                      .filter(customer => 
                        searchQuery.length > 0 || 
                        !recentCustomers.slice(0, recentLimit).some(rc => rc.id === customer.id)
                      )
                      .map((customer) => (
                        <CommandItem
                          key={customer.id}
                          value={`${customer.id || ""} ${customer.name || ""} ${customer.document || ""}`}
                          onSelect={() => handleSelectCustomer(customer)}
                          className="flex items-center gap-2"
                        >
                          <User className="h-4 w-4" />
                          <div className="flex flex-col">
                            <div className="flex items-center">
                              <span className="font-medium">{customer.name}</span>
                              {selectedCustomer?.id === customer.id && (
                                <Check className="ml-2 h-4 w-4 text-green-500" />
                              )}
                            </div>
                            <div className="flex text-xs text-muted-foreground">
                              <span className="mr-2">ID: {customer.id}</span>
                              {customer.document && (
                                <span>{customer.document}</span>
                              )}
                            </div>
                          </div>
                        </CommandItem>
                      ))}
                  </CommandGroup>
                )}
              </CommandList>
              {/* Rodapé com status */}
              <div className="p-2 text-xs text-center text-muted-foreground border-t flex justify-between items-center">
                <span>
                  {useOfflineSearch 
                    ? `Busca local - ${allCustomers.length} clientes` 
                    : ""}
                </span>
                {selectedCustomer && (
                  <Button
                    variant="ghost"
                    size="sm"
                    className="text-red-600 hover:text-red-700 hover:bg-red-50"
                    onClick={handleClearSelection}
                  >
                    Limpar seleção
                  </Button>
                )}
              </div>
            </Command>
          </PopoverContent>
        </Popover>
      </div>
    </div>
  );
 }
--- a/src/components/orders/DateRangeFilter.tsx
+++ b/src/components/orders/DateRangeFilter.tsx
@@ -0,0 +1,60 @@
 import { Input } from "@/src/components/ui/input";
 import { Label } from "@/src/components/ui/label";
 import { CalendarIcon } from "lucide-react";
 interface DateRangeFilterProps {
  startDateId: string;
  endDateId: string;
  label: string;
  startValue: string | undefined;
  endValue: string | undefined;
  onStartChange: (value: any) => void;
  onEndChange: (value: any) => void;
 }
 /**
 * Componente para filtros de intervalo de datas, exibindo data inicial e final em uma única linha
 */
 export function DateRangeFilter({
  startDateId,
  endDateId,
  label,
  startValue,
  endValue,
  onStartChange,
  onEndChange,
 }: DateRangeFilterProps) {
  return (
    <div className="flex flex-col space-y-1">
      {label && (
        <div className="flex items-center gap-1">
          <CalendarIcon className="h-3 w-3 text-muted-foreground" />
          <Label className="text-xs font-medium">{label}</Label>
        </div>
      )}
      <div className="flex items-center gap-2">
        <div className="flex-1">
          <Input
            id={startDateId}
            type="date"
            value={startValue || ""}
            onChange={(e) => onStartChange(e.target.value)}
            className="h-8 text-xs"
            placeholder="Data inicial"
          />
        </div>
        <span className="text-xs text-muted-foreground font-medium">até</span>
        <div className="flex-1">
          <Input
            id={endDateId}
            type="date"
            value={endValue || ""}
            onChange={(e) => onEndChange(e.target.value)}
            className="h-8 text-xs"
            placeholder="Data final"
          />
        </div>
      </div>
    </div>
  );
 } 
--- a/src/components/orders/FilterInput.tsx
+++ b/src/components/orders/FilterInput.tsx
@@ -0,0 +1,54 @@
 import { Input } from "@/src/components/ui/input";
 import { Label } from "@/src/components/ui/label";
 interface FilterInputProps {
  id: string;
  label: string;
  type?: string;
  placeholder: string;
  value: string | number | undefined;
  onChange: (value: any) => void;
  min?: string;
  className?: string;
  max?: string;
 }
 /**
 * Componente de input para filtros de pesquisa
 */
 export function FilterInput({
  id,
  label,
  type = "text",
  placeholder,
  value,
  onChange,
  min,
  max,
 }: FilterInputProps) {
  return (
    <div className="flex flex-col space-y-1">
      <div className="flex items-center gap-2 text-xs">
        <Label htmlFor={id} className="text-xs font-medium">
          {label}
        </Label>
      </div>
      <Input
        id={id}
        type={type}
        placeholder={placeholder}
        value={value || ""}
        onChange={(e) =>
          onChange(
            type === "number" && e.target.value
              ? Number(e.target.value)
              : e.target.value,
          )
        }
        min={min}
        max={max}
        className="h-8"
      />
    </div>
  );
 } 
--- a/src/components/orders/FilterSelect.tsx
+++ b/src/components/orders/FilterSelect.tsx
@@ -0,0 +1,126 @@
 import { Label } from "@/src/components/ui/label";
 import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
 } from "@/src/components/ui/select";
 import { useMemo } from "react";
 import { cn } from "@/src/lib/utils";
 interface FilterSelectProps {
  id: string;
  label: string;
  value: string | undefined;
  onValueChange: (value: string) => void;
  placeholder: string;
  disabled?: boolean;
  options: Array<{ value: string; label: string }>;
  loading?: boolean;
  loadingText?: string;
  className?: string;
 }
 /**
 * Componente de select para filtros de pesquisa
 * @param props FilterSelectProps - Propriedades do componente
 * @returns JSX.Element
 */
 export function FilterSelect({
  id,
  label,
  value,
  onValueChange,
  placeholder = "Selecione.....",
  disabled = false,
  options = [],
  loading = false,
  loadingText,
  className,
 }: FilterSelectProps) {
  // Garante que as opções sejam sempre um array válido e único
  const safeOptions = useMemo(() => {
    if (!Array.isArray(options)) return [];
    return options.filter(option => 
      option && 
      typeof option === 'object' && 
      'value' in option && 
      'label' in option &&
      typeof option.value === 'string' &&
      typeof option.label === 'string'
    );
  }, [options]);
  // Garante que o valor seja uma string válida e exista nas opções
  const selectedValue = useMemo(() => {
    try {
      const strValue = value?.toString();
      if (!strValue) return undefined;
      // Verifica se o valor existe nas opções
      const valueExists = safeOptions.some(opt => opt.value === strValue);
      return valueExists ? strValue : undefined;
    } catch (error) {
      console.warn(`FilterSelect: Error processing value: ${error}`);
      return undefined;
    }
  }, [value, safeOptions]);
  // Handler seguro para mudanças
  const handleValueChange = (newValue: string) => {
    try {
      if (typeof onValueChange === 'function') {
        onValueChange(newValue);
      }
    } catch (error) {
      console.error(`FilterSelect: Error in onValueChange: ${error}`);
    }
  };
  return (
    <div className="h-12 w-full">
      <div className="flex flex-col space-y-1 h-full w-full">
        <div className="flex items-center gap-2">
          <Label htmlFor={id} className="text-xs font-medium">
            {label || ""}
          </Label>
        </div>
        <Select
          defaultValue={selectedValue}
          onValueChange={handleValueChange}
          disabled={disabled || loading || safeOptions.length === 0}
        >
          <SelectTrigger
            id={id}
            className={cn(
              "flex h-15 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
              className
            )}
          >
            <SelectValue placeholder={placeholder} />
          </SelectTrigger>
          <SelectContent>
            {safeOptions.length === 0 ? (
              <SelectItem value="empty" disabled>
                Nenhuma opção disponível
              </SelectItem>
            ) : (
              safeOptions.map((option) => (
                <SelectItem 
                  key={`${id}-${option.value}`} 
                  value={option.value}
                >
                  {option.label}
                </SelectItem>
              ))
            )}
          </SelectContent>
        </Select>
        {loading && loadingText && (
          <p className="text-xs text-muted-foreground mt-0.5">{loadingText}</p>
        )}
      </div>
    </div>
  );
 } 
--- a/src/components/orders/InfoCard.tsx
+++ b/src/components/orders/InfoCard.tsx
@@ -0,0 +1,43 @@
 import React from "react";
 import { cn } from "@/src/lib/utils";
 /**
 * Componente InfoCard para exibir informações de forma consistente
 * Utilizado para mostrar dados de pedido, cliente, entrega, etc.
 */
 export function InfoCard({ 
  title, 
  value, 
  subtext, 
  icon, 
  className,
  customBadge
 }: { 
  title: string; 
  value: string | React.ReactNode; 
  subtext?: string;
  icon?: React.ReactNode;
  className?: string;
  customBadge?: React.ReactNode;
 }) {
  return (
    <div className="space-y-1">
      <div className="flex items-center gap-1">
        {icon}
        <h4 className="text-xs font-medium text-muted-foreground">{title}</h4>
      </div>
      <div>
        {customBadge || (
          <p className={cn("text-sm font-medium truncate", className)}>
            {value}
          </p>
        )}
        {subtext && (
          <p className="text-xs text-muted-foreground mt-0.5">
            {subtext}
          </p>
        )}
      </div>
    </div>
  );
 } 
--- a/src/components/orders/MultiFilterSelect.tsx
+++ b/src/components/orders/MultiFilterSelect.tsx
@@ -0,0 +1,187 @@
 import * as React from "react";
 import { Label } from "@/src/components/ui/label";
 import { X, ChevronDown, Check } from "lucide-react";
 import { Badge } from "@/src/components/ui/badge";
 import { cn } from "@/src/lib/utils";
 import { Button } from "@/src/components/ui/button";
 import { Checkbox } from "@/src/components/ui/checkbox";
 import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
 } from "@/src/components/ui/dropdown-menu";
 interface Option {
  value: string;
  label: string;
 }
 interface MultiFilterSelectProps {
  id: string;
  label: string;
  values: string[];
  onValuesChange: (values: string[]) => void;
  placeholder: string;
  disabled?: boolean;
  options: Option[];
  loading?: boolean;
  loadingText?: string;
  className?: string;
 }
 /**
 * Componente de select para filtros de pesquisa com suporte a múltipla seleção
 */
 export function MultiFilterSelect({
  id,
  label,
  values = [],
  onValuesChange,
  placeholder,
  disabled,
  options,
  loading,
  loadingText,
  className,
 }: MultiFilterSelectProps) {
  const [open, setOpen] = React.useState(false);
  const handleSelect = (value: string, e: React.MouseEvent) => {
    e.preventDefault();
    e.stopPropagation();
    const newValues = values.includes(value)
      ? values.filter((v) => v !== value)
      : [...values, value];
    onValuesChange(newValues);
  };
  const clearValues = (e: React.MouseEvent) => {
    e.preventDefault();
    e.stopPropagation();
    onValuesChange([]);
  };
  const selectedLabels = options
    .filter((option) => values.includes(option.value))
    .map((option) => option.label);
  return (
    <div className={cn("flex flex-col space-y-1", className)}>
      <div className="flex items-center gap-2">
        <Label htmlFor={id} className="text-xs font-medium">
          {label}
        </Label>
      </div>
      <DropdownMenu open={open} onOpenChange={setOpen}>
        <DropdownMenuTrigger asChild disabled={disabled}>
          <div
            id={id}
            className={cn(
              "flex h-8 items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
              className,
              { "cursor-not-allowed opacity-50": disabled }
            )}
          >
            <div className="flex flex-1 items-center gap-1 overflow-hidden">
              {values.length > 0 ? (
                <div className="flex flex-1 flex-nowrap gap-1 overflow-hidden">
                  {values.length === 1 ? (
                    <span className="truncate">{selectedLabels[0]}</span>
                  ) : (
                    <Badge variant="secondary" className="px-1.5 py-0 h-5 font-normal text-xs bg-blue-100 text-blue-800 hover:bg-blue-200">
                      {values.length} selecionados
                    </Badge>
                  )}
                </div>
              ) : (
                <span className="text-muted-foreground">{placeholder}</span>
              )}
            </div>
            <div className="flex shrink-0 items-center gap-1">
              {values.length > 0 && (
                <Button
                  type="button"
                  variant="ghost"
                  size="sm"
                  className="h-4 w-4 p-0 opacity-70 hover:opacity-100"
                  onClick={clearValues}
                >
                  <X className="h-3 w-3" />
                </Button>
              )}
              <ChevronDown className="h-4 w-4 opacity-50" />
            </div>
          </div>
        </DropdownMenuTrigger>
        <DropdownMenuContent className="w-[var(--radix-dropdown-menu-trigger-width)]" align="start">
          <DropdownMenuLabel className="flex items-center justify-between text-xs">
            <span>Selecione as opções</span>
            {values.length > 0 && (
              <Badge variant="secondary" className="px-1.5 py-0 h-10 text-xs bg-blue-50 text-blue-600 hover:bg-blue-100">
                {values.length} selecionados
              </Badge>
            )}
          </DropdownMenuLabel>
          <DropdownMenuSeparator />
          <DropdownMenuGroup className="max-h-[200px] overflow-y-auto">
            {options.map((option) => (
              <DropdownMenuItem
                key={option.value}
                className={cn(
                  "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground",
                  values.includes(option.value) && "bg-blue-50"
                )}
                onSelect={(e) => e.preventDefault()}
                onClick={(e) => handleSelect(option.value, e)}
              >
                <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
                  <Checkbox
                    id={`${id}-${option.value}`}
                    checked={values.includes(option.value)}
                    className={cn("h-4 w-4", values.includes(option.value) && "border-blue-500 bg-blue-500")}
                    onClick={(e) => e.stopPropagation()}
                  />
                </span>
                <span>{option.label}</span>
              </DropdownMenuItem>
            ))}
          </DropdownMenuGroup>
          <DropdownMenuSeparator />
          <div className="p-1 flex justify-between">
            <Button
              type="button"
              variant="ghost"
              size="sm"
              className="h-7 text-xs"
              onClick={clearValues}
            >
              Limpar
            </Button>
            <Button
              type="button"
              variant="outline"
              size="sm"
              className="h-7 text-xs bg-blue-50 text-blue-600 border-blue-200 hover:bg-blue-100"
              onClick={() => setOpen(false)}
            >
              <Check className="mr-1 h-3 w-3" />
              Confirmar
            </Button>
          </div>
        </DropdownMenuContent>
      </DropdownMenu>
      {loading && loadingText && (
        <p className="text-xs text-muted-foreground mt-0.5">{loadingText}</p>
      )}
    </div>
  );
 } 
--- a/src/components/orders/OrderDetail.tsx
+++ b/src/components/orders/OrderDetail.tsx
@@ -0,0 +1,296 @@
 "use client";
 import { useEffect, useState } from "react";
 import { ArrowLeft } from "lucide-react";
 import { useNavigation } from "../../hooks";
 import { Button } from "../../components/ui/button";
 import { OrderInfoCard } from "./OrderInfoCard";
 import Timeline from "./OrderTimeline";
 import { QRCodeRastreamento } from "../../components/qr-code-rastreamento";
 import { ordersApi } from "../../lib/api";
 import { createSearchParams, buildUrl } from "../../utils/url-helpers";
 import {
  Order,
  OrderItem,
  OrderDelivery,
  cutitens,
  transfer,
  status,
  TimelineEvent,
  leadtime,
 } from "../types";
 /**
 * Interface que define a estrutura de um evento na timeline
 */
 export interface TimelineDisplayEvent {
  id: string;
  codigoFuncionario: string;
  description: string;
  date: string;
  status: string;
  icon: any;
  color: string;
 }
 interface OrderDetailProps {
  order: Order;
  timelineEvents: leadtime[];
 }
 export function mapTimelineEvents(events: leadtime[]): TimelineEvent[] {
  return events.map(event => ({
    id: event.descricaoEtapa,
    title: event.descricaoEtapa,
    description: event.descricao || "Status updated",
    date: event.data || new Date().toISOString(),
    status: event.descricaoEtapa,
    user: event.codigoFuncionario,
  }));
 }
 export function OrderDetail({ order, timelineEvents }: OrderDetailProps) {
  const { searchParams, navigateTo, goBack, goToOrdersFind } = useNavigation();
  const from = searchParams.get("from");
  const returnPath = searchParams.get("returnPath") || "/orders/find";
  const [orderItems, setOrderItems] = useState<OrderItem[]>([]);
  const [loadingItems, setLoadingItems] = useState(false);
  const [itemsError, setItemsError] = useState<string | null>(null);
  const [cutItems, setCutItems] = useState<cutitens[]>([]);
  const [transfers, setTransfers] = useState<transfer[]>([]);
  const [statusData, setStatusData] = useState<status[]>([]);
  const [orderDelivery, setOrderDelivery] = useState<OrderDelivery>({
    placeId: 0,
    placeName: "",
    street: "",
    addressNumber: "",
    bairro: "",
    city: "",
    state: "",
    addressComplement: "",
    cep: "",
    commentOrder1: "",
    commentOrder2: "",
    commentDelivery1: order.commentDelivery1 || "",
    commentDelivery2: "",
    commentDelivery3: "",
    commentDelivery4: "",
    shippimentId: 0,
    shippimentDate: new Date(),
    shippimentComment: "",
    place: order.deliveryLocal || "",
    driver: order.driver || "",
    car: order.carDescription || "",
    closeDate: new Date(),
    separatorName: "",
    confName: "",
    releaseDate: new Date(),
  });
  useEffect(() => {
    async function fetchOrderItems() {
      if (!order.orderId) return;
      setLoadingItems(true);
      setItemsError(null);
      try {
        const response = await ordersApi.getOrderItems(order.orderId);
        const items = Array.isArray(response?.data)
          ? response.data
          : Array.isArray(response)
          ? response
          : [];
        setOrderItems(items);
      } catch {
        setItemsError("Could not load order items.");
      } finally {
        setLoadingItems(false);
      }
    }
    fetchOrderItems();
  }, [order.orderId]);
  useEffect(() => {
    async function fetchDeliveryInfo() {
      if (!order.orderId) return;
      try {
        const response = await ordersApi.getOrderDelivery(order.orderId);
        const data = response?.data || response;
        setOrderDelivery(prev => ({
          ...prev,
          ...data,
          place: data.place || order.deliveryLocal || "",
          driver: data.driver || order.driver || "",
          car: data.car || order.carDescription || "",
        }));
      } catch {}
    }
    fetchDeliveryInfo();
  }, [order.orderId]);
  useEffect(() => {
    async function fetchCutItems() {
      if (!order.orderId) return;
      try {
        const response = await ordersApi.getCutItems(order.orderId);
        const items = Array.isArray(response?.data)
          ? response.data
          : Array.isArray(response)
          ? response
          : [];
        setCutItems(items);
      } catch {}
    }
    fetchCutItems();
  }, [order.orderId]);
  useEffect(() => {
    async function fetchTransfers() {
      if (!order.orderId) return;
      try {
        const id = parseInt(order.orderId);
        if (isNaN(id)) return;
        const response = await ordersApi.getTransfer(id);
        const items = Array.isArray(response?.data)
          ? response.data
          : Array.isArray(response)
          ? response
          : [];
        setTransfers(
          items.map(item => ({
            ...item,
            oldShipmentId: Number(item.oldShipmentId ?? 0),
            newShipmentId: Number(item.newShipmentId ?? 0),
          }))
        );
      } catch {}
    }
    fetchTransfers();
  }, [order.orderId]);
  useEffect(() => {
    async function fetchStatusData() {
      if (!order.orderId) return;
      try {
        const id = parseInt(order.orderId);
        if (isNaN(id)) return;
        const response = await ordersApi.getStatusOrder(id);
        const items = Array.isArray(response?.data)
          ? response.data
          : Array.isArray(response)
          ? response
          : [];
        setStatusData(items);
      } catch {}
    }
    fetchStatusData();
  }, [order.orderId]);
  const returnParams = createSearchParams(
    searchParams,
    ["from", "returnPath"],
    { origem: "detail", noRefresh: "true", preserveState: "true" }
  );
  const handleBack = () => {
    if (from === "lista") {
      const baseUrl = returnPath;
      const params: Record<string, string> = {};
      searchParams.forEach((value, key) => {
        params[key] = value;
      });
      const url = buildUrl(baseUrl, {
        ...params,
        origem: "detail",
        noRefresh: "true",
        preserveState: "true",
      });
      navigateTo(url);
    } else if (window.history.length > 2) {
      goBack();
    } else {
      goToOrdersFind();
    }
  };
  const orderWithDefaults = {
    ...order,
    paymentMethod: order.paymentMethod || "Not provided",
    paymentPlan: order.paymentPlan || "Not provided",
    paymentName: order.paymentName || "Not provided",
    driver: order.driver || "Not provided",
    carDescription: order.carDescription || "Not provided",
    deliveryLocal: order.deliveryLocal || "Not provided",
    deliveryType: order.deliveryType || "Not provided",
  };
  const store = {
    storeId: order.storeId,
    store: order.storeName,
  };
  return (
    <div className="pl-0 w-full">
      <div className="bg-white border-b p-1 sm:p-2 flex justify-between items-center">
        <div className="flex items-center gap-1 sm:gap-3">
          <Button variant="ghost" size="sm" onClick={handleBack} className="p-1 sm:p-2">
            <ArrowLeft className="h-4 w-4 sm:h-5 sm:w-5 text-muted-foreground" />
            <span className="ml-1 sm:ml-2 text-xs sm:text-sm hidden xs:inline">Voltar</span>
          </Button>
          <div>
            <h1 className="text-sm sm:text-lg font-semibold text-gray-800">
              Pedido {order.orderId}
            </h1>
            <p className="text-xs sm:text-sm text-muted-foreground hidden sm:block">
              Detalhes completos do pedido
            </p>
          </div>
        </div>
        <div className="flex justify-center p-2">
         <QRCodeRastreamento orderId={order.orderId} />        </div>
      </div>
      <div className="p-2 sm:p-6 space-y-4 sm:space-y-6 mx-auto">
        <div className="grid grid-cols-1 xl:grid-cols-4 gap-4 sm:gap-6">
          <div className="xl:col-span-3">
            <OrderInfoCard
              order={orderWithDefaults}
              delivery={orderDelivery}
              loja={store}
              orderItems={orderItems}
              cutitens={cutItems}
              transfers={transfers}
              status={statusData}
            />
          </div>
          <div className="hidden sm:block xl:col-span-1">
            <div className="bg-white border rounded-lg p-4 shadow-sm">
              <Timeline orderId={order.orderId} />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
 }
--- a/src/components/orders/OrderDetailModal.tsx
+++ b/src/components/orders/OrderDetailModal.tsx
@@ -0,0 +1,54 @@
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../../components/ui/dialog";
 import { Order } from "../types";
 import { formatCurrency, formatDateToDisplay } from "../../utils/format-helpers";
 interface OrderDetailModalProps {
  order: Order | null;
  isOpen: boolean;
  onClose: () => void;
 }
 export function OrderDetailModal({ order, isOpen, onClose }: OrderDetailModalProps) {
  if (!order) return null;
  return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="max-w-3xl">
        <DialogHeader>
          <DialogTitle>Order Details: {order.orderId}</DialogTitle>
        </DialogHeader>
        <div className="mt-4 space-y-4">
          <div className="grid grid-cols-2 gap-4">
            <div>
              <h3 className="text-sm font-medium text-gray-500">Customer</h3>
              <p className="text-sm">{order.clientName}</p>
            </div>
            <div>
              <h3 className="text-sm font-medium text-gray-500">Store</h3>
              <p className="text-sm">{order.storeName}</p>
            </div>
            <div>
              <h3 className="text-sm font-medium text-gray-500">Order Date</h3>
              <p className="text-sm">{formatDateToDisplay(order.createDate)}</p>
            </div>
            <div>
              <h3 className="text-sm font-medium text-gray-500">Status</h3>
              <p className="text-sm">{order.status}</p>
            </div>
            <div>
              <h3 className="text-sm font-medium text-gray-500">Total Value</h3>
              <p className="text-sm font-semibold text-emerald-600">
                {formatCurrency(order.totalValue)}
              </p>
            </div>
            <div>
              <h3 className="text-sm font-medium text-gray-500">Payment Status</h3>
              <p className="text-sm">{order.paymentStatus}</p>
            </div>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  );
 } 
--- a/src/components/orders/OrderInfoCard.tsx
+++ b/src/components/orders/OrderInfoCard.tsx
@@ -0,0 +1,342 @@
 "use client";
 import { useState, useEffect } from "react";
 import { Order, OrderDelivery, Store, OrderItem, cutitens, transfer, status, OrderDeliveryDto } from "../types";
 import { STATUS_COLORS, DELIVERY_TYPE_MAP } from "../../constants/status-options";
 import { ordersApi } from "../../lib/api";
 import { 
  Info, 
  Truck, 
  Scissors,
  ReceiptText,
  ArrowRightLeft,
  CreditCard as CheckoutIcon
 } from "lucide-react";
 import { 
  Card, 
  CardContent,
 } from "@/src/components/ui/card";
 import { 
  Tabs, 
  TabsList, 
  TabsTrigger, 
  TabsContent 
 } from "@/src/components/ui/tabs";
 import { cn } from "@/src/lib/utils";
 import { OrderItemsSection } from "./tabs/OrderItemsSection";
 import { InfoTab } from "./tabs/InfoTab";
 import { EntregaTab } from "./tabs/EntregaTab";
 import { CortesTab } from "./tabs/CortesTab";
 import { TransferenciaTab } from "./tabs/TransferenciaTab";
 import { TV8Tab } from "./tabs/TV8Tab";
 import { TabKey } from "./order-info-utils";
 import { CheckoutTab } from "./tabs/CheckoutTab";
 import { InfoCard } from "./InfoCard";
 interface OrderInfoCardProps {
  order: Order;
  delivery: OrderDelivery;
  loja: Store;
  orderItems?: OrderItem[];
  cutitens?: cutitens[];
  transfers?: transfer[];
  status?: status[];
  tv8Deliveries?: OrderDeliveryDto[];
 }
 // Função para obter a cor do status
 const getStatusColor = (status: string | undefined): string => {
  if (!status) return "bg-white-400";
  return STATUS_COLORS[status.toLowerCase()] || "bg-white-400";
 };
 // Status padrão para quando não vier status da API
 const STATUS_DEFAULT = "PENDENTE";
 /**
 * Normaliza o status para o formato padrão
 * Garante consistência na apresentação entre diferentes APIs
 */
 function normalizeStatus(status: string | null | undefined): string {
  if (!status) return STATUS_DEFAULT;
  // Converte para maiúsculo para padronização visual
  return status.toUpperCase();
 }
 /**
 * Mapeia o tipo de entrega para um status apropriado
 * Usado quando status não está disponível, mas podemos inferir pelo tipo
 */
 function getStatusFromDeliveryType(deliveryType: string | null | undefined): string | null {
  if (!deliveryType) return null;
  const type = deliveryType.toUpperCase();
  // Se for RP (Retirada na Praça), usamos isso como status
  if (type === 'RP') return 'RP';
  return null;
 }
 function getDeliveryTypeLabel(code: string | null | undefined): string {
  if (!code) return "-";
  return DELIVERY_TYPE_MAP[code] || code;
 }
 /**
 * Componente principal para exibição de informações detalhadas de um pedido
 * Possui múltiplas abas e seções
 */
 export function OrderInfoCard({ 
  order, 
  delivery, 
  loja, 
  orderItems = [], 
  cutitens = [], 
  transfers = [], 
  status = [], 
  tv8Deliveries: initialTv8Deliveries = [] 
 }: OrderInfoCardProps) {
  const [tv8Deliveries, setTv8Deliveries] = useState<OrderDeliveryDto[]>(initialTv8Deliveries);
  const [isLoadingTv8, setIsLoadingTv8] = useState(false);
  const [tv8Error, setTv8Error] = useState("");
  const rawComments = [
    delivery.commentOrder1,
    delivery.commentOrder2,
    delivery.commentDelivery1,
    delivery.commentDelivery2,
    delivery.commentDelivery3,
    delivery.commentDelivery4,
  ];
  const comments = rawComments.filter((c) => c?.trim());
  const hasComments = comments.length > 0;
  // Display flags and data preparation
  const isUsingDemoData = false; // We no longer use demo data
  const displayTV8Data = tv8Deliveries;
  // Dados de teste (fallback) para TV8 em caso de falha na API
  const testTV8Data: OrderDeliveryDto[] = [
    {
      storeId: 6,
      createDate: new Date(),
      orderId: Number(order.orderId) || 1,
      orderIdSale: null,
      deliveryDate: new Date(),
      customerId: 12345,
      customer: order.customerName || "Cliente Teste",
      deliveryType: "Entrega (EF)",
      quantityItens: 5,
      status: "Pendente",
      weight: 10.5,
      shipmentId: 7001,
      driverId: 101,
      driverName: "FRANCISCO ANDRÉ O DE SOUZA",
      carPlate: "AAA-0000",
      carIdentification: "Carro 001",
      observation: "Observação de teste",
      deliveryConfirmationDate: null
    }
  ];
  const loadTestData = () => {
    setTv8Deliveries(testTV8Data);
    setIsLoadingTv8(false);
    setTv8Error("");
  };
  useEffect(() => {
    async function fetchTv8Deliveries() {
      if (!order.orderId) return;
      setIsLoadingTv8(true);
      setTv8Error("");
      try {
        // Formatar orderID corretamente
        const formattedOrderId = order.orderId?.toString().trim();
        // Tentar dois endpoints diferentes
        let response;
        try {
          // Adiciona verificação de params opcionais para datas
          response = await ordersApi.getOrderDeliveries(formattedOrderId);
        } catch (err) {
          // Pequeno delay antes de tentar novamente
          await new Promise(resolve => setTimeout(resolve, 500));
          // Tentar URL alternativa diretamente
          try {
            const baseUrl = process.env.NEXT_PUBLIC_API_URL || "http://10.1.117.70:8888";
            const url = `${baseUrl}/api/v1/tv8/${formattedOrderId}`;
            response = await fetch(url)
              .then(res => {
                if (!res.ok) {
                  throw new Error(`Falha na requisição alternativa: ${res.status}`);
                }
                return res.json();
              });
          } catch (fetchErr: any) {
            throw new Error(`Falha nas duas tentativas: ${fetchErr.message}`);
          }
        }
        // Verificar se a resposta tem estrutura {success, data}
        if (response && typeof response === 'object' && 'success' in response && 'data' in response) {
          if (Array.isArray(response.data) && response.data.length > 0) {
            // Garantir que o status está definido em cada item
            const dataWithStatus = response.data.map((item: any) => {
              // Verificar se o status existe e é válido, caso contrário inferir do tipo de entrega
              const statusValue = item.status || getStatusFromDeliveryType(item.deliveryType) || STATUS_DEFAULT;
              return {
                ...item,
                status: normalizeStatus(statusValue)
              };
            });
            setTv8Deliveries(dataWithStatus);
          } else {
            setTv8Deliveries([]);
          }
        } else if (Array.isArray(response) && response.length > 0) {
          // Garantir que o status está definido em cada item
          const dataWithStatus = response.map((item: any) => {
            // Verificar se o status existe e é válido, caso contrário inferir do tipo de entrega
            const statusValue = item.status || getStatusFromDeliveryType(item.deliveryType) || STATUS_DEFAULT;
            return {
              ...item,
              status: normalizeStatus(statusValue)
            };
          });
          setTv8Deliveries(dataWithStatus);
        } else {
          setTv8Deliveries([]);
        }
      } catch (error) {
        setTv8Error("Falha ao carregar entregas TV8");
        setTv8Deliveries([]);
      } finally {
        setIsLoadingTv8(false);
      }
    }
    fetchTv8Deliveries();
  }, [order.orderId]);
  // Processo dos comentários do pedido
  const isValidComment = (comment: unknown): comment is string => {
    return Boolean(
        comment &&
        typeof comment === 'string' &&
        comment.trim() !== '' &&
        comment.trim().toLowerCase() !== 'null'
    );
 };
  const orderComments = [
    delivery.commentOrder1,
    delivery.commentOrder2
  ].filter(isValidComment);
  return (
    <div className="flex flex-col space-y-4">
      <Card>
        <Tabs defaultValue={TabKey.Info} className="w-full">
          <div className="border-b w-full">
            <TabsList className="flex w-full bg-transparent rounded-none p-0 h-auto justify-between">
              <TabsTrigger 
                value={TabKey.Info} 
                className="flex flex-1 flex-col items-center justify-center gap-1 p-4 m-0 rounded-none border-0 data-[state=active]:border-b-2 data-[state=active]:border-b-blue-500 bg-transparent data-[state=active]:bg-transparent"
              >
                <Info className="h-5 w-5" />
                <span className="text-xs">Informações</span>
              </TabsTrigger>
              <TabsTrigger 
                value={TabKey.Itens} 
                className="flex flex-1 flex-col items-center justify-center gap-1 p-4 m-0 rounded-none border-0 data-[state=active]:border-b-2 data-[state=active]:border-b-blue-500 bg-transparent data-[state=active]:bg-transparent"
              >
                <ReceiptText className="h-5 w-5" />
                <span className="text-xs">Itens</span>
              </TabsTrigger>
              <TabsTrigger 
                value={TabKey.Entrega} 
                className="flex flex-1 flex-col items-center justify-center gap-1 p-4 m-0 rounded-none border-0 data-[state=active]:border-b-2 data-[state=active]:border-b-blue-500 bg-transparent data-[state=active]:bg-transparent"
              >
                <Truck className="h-5 w-5" />
                <span className="text-xs">Entrega</span>
              </TabsTrigger>
              <TabsTrigger 
                value={TabKey.Cortes} 
                className="flex flex-1 flex-col items-center justify-center gap-1 p-4 m-0 rounded-none border-0 data-[state=active]:border-b-2 data-[state=active]:border-b-blue-500 bg-transparent data-[state=active]:bg-transparent"
              >
                <Scissors className="h-5 w-5" />
                <span className="text-xs">Cortes</span>
              </TabsTrigger>
              <TabsTrigger 
                value={TabKey.Transferencia} 
                className="flex flex-1 flex-col items-center justify-center gap-1 p-4 m-0 rounded-none border-0 data-[state=active]:border-b-2 data-[state=active]:border-b-blue-500 bg-transparent data-[state=active]:bg-transparent"
              >
                <ArrowRightLeft className="h-5 w-5" />
                <span className="text-xs">Transferência</span>
              </TabsTrigger>
              <TabsTrigger 
                value={TabKey.TV8} 
                className="flex flex-1 flex-col items-center justify-center gap-1 p-4 m-0 rounded-none border-0 data-[state=active]:border-b-2 data-[state=active]:border-b-blue-500 bg-transparent data-[state=active]:bg-transparent"
              >
                <Truck className="h-5 w-5 text-orange-500" />
                <span className="text-xs">TV8</span>
              </TabsTrigger>
              <TabsTrigger 
                value={TabKey.Checkout} 
                className="flex flex-1 flex-col items-center justify-center gap-1 p-4 m-0 rounded-none border-0 data-[state=active]:border-b-2 data-[state=active]:border-b-blue-500 bg-transparent data-[state=active]:bg-transparent"
              >
                <CheckoutIcon className="h-5 w-5" />
                <span className="text-xs">Acerto de caixa</span>
              </TabsTrigger>
            </TabsList>
          </div>
          <CardContent className="pt-4 pb-2 px-2 sm:px-6">
            <TabsContent value={TabKey.Info} className="mt-0">
              <InfoTab order={order} orderComments={orderComments} />
            </TabsContent>
            <TabsContent value={TabKey.Itens} className="mt-0">
              <OrderItemsSection orderItems={orderItems} />
            </TabsContent>
            <TabsContent value={TabKey.Entrega} className="mt-0">
              <EntregaTab order={order} delivery={delivery} />
            </TabsContent>
            <TabsContent value={TabKey.Cortes} className="mt-0">
              <CortesTab cutitens={cutitens} />
            </TabsContent>
            <TabsContent value={TabKey.Transferencia} className="mt-0">
              <TransferenciaTab transfers={transfers} />
            </TabsContent>
            <TabsContent value={TabKey.TV8} className="mt-0">
              <TV8Tab order={order} initialDeliveries={tv8Deliveries} />
            </TabsContent>
            <TabsContent value={TabKey.Checkout} className="mt-0">
              <CheckoutTab order={order} />
            </TabsContent>
          </CardContent>
        </Tabs>
      </Card>
    </div>
  );
 }
--- a/src/components/orders/OrderItemsCard.tsx
+++ b/src/components/orders/OrderItemsCard.tsx
@@ -0,0 +1,188 @@
 import React, { memo } from "react";
 import { PackageOpen, Scissors, Info, ArrowRightLeft, History, Truck, CreditCard } from "lucide-react";
 import { Tabs, Card, Spin, Alert } from "antd";
 import type { TabsProps } from "antd";
 import { OrderItemsTable } from "./OrderItemsTable";
 import {
  OrderItem,
  cutitens,
  transfer,
  status,
  leadtime,
  OrderDeliveryDto,
  Store,
  Order,
  OrderDelivery,
 } from "@/src/components/types";
 import { CortesTab } from "./tabs/CortesTab";
 import { EntregaTab } from "./tabs/EntregaTab";
 import { InfoTab } from "./tabs/InfoTab";
 import { TransferenciaTab } from "./tabs/TransferenciaTab";
 import { StatusTab } from "./tabs/StatusTab";
 import { TV8Tab } from "./tabs/TV8Tab";
 import { CheckoutTab } from "./tabs/CheckoutTab";
 // Define um alias para o tipo de cada aba, garantindo que não seja `undefined`
 type TabItem = NonNullable<TabsProps["items"]>[number];
 interface OrderItemsCardProps {
  orderItems: OrderItem[];
  loadingItems: boolean;
  itemsError: string | null;
  cutitens?: cutitens[];
  order?: Order;
  delivery?: OrderDelivery;
  transfers?: transfer[];
  status?: status[];
  leadtime?: leadtime[];
  orderId?: string;
  tv8Deliveries?: OrderDeliveryDto[];
  stores?: Store[];
 }
 const OrderItemsCardComponent = ({
  orderItems,
  loadingItems,
  itemsError,
  cutitens = [],
  order,
  delivery,
  transfers = [],
  status = [],
  leadtime = [],
  orderId,
  tv8Deliveries = [],
  stores = [],
 }: OrderItemsCardProps) => {
  // abas fixas (sempre exibidas)
  const baseTabs: TabItem[] = [
    {
      key: "itens",
      label: (
        <span>
          <PackageOpen className="inline-block mr-1 w-4 h-4 text-blue-500" />
          Itens
        </span>
      ),
      children: loadingItems ? (
        <div className="py-4 text-center">
          <Spin size="small" />
        </div>
      ) : itemsError ? (
        <Alert type="error" message={itemsError} />
      ) : (
        <OrderItemsTable
          orderItems={orderItems}
          loadingItems={loadingItems}
          itemsError={itemsError}
        />
      ),
    },
    {
      key: "info",
      label: (
        <span>
          <Info className="inline-block mr-1 w-4 h-4 text-purple-500" />
          Informações
        </span>
      ),
      children: order ? (
        <InfoTab order={order} orderComments={[order.commentDelivery1]} />
      ) : (
        <Alert type="warning" message="Dados do pedido não disponíveis." />
      ),
    },
    {
      key: "timeline",
      label: (
        <span>
          <History className="inline-block mr-1 w-4 h-4 text-yellow-500" />
          Timeline
        </span>
      ),
      children: <StatusTab orderId={orderId} />,
    },
    {
      key: "cortes",
      label: (
        <span>
          <Scissors className="inline-block mr-1 w-4 h-4 text-red-500" />
          Cortes
        </span>
      ),
      children: <CortesTab cutitens={cutitens} />,
    },
    {
      key: "entrega",
      label: (
        <span>
          <Truck className="inline-block mr-1 w-4 h-4 text-green-600" />
          Entrega
        </span>
      ),
      children:
        order && delivery ? (
          <EntregaTab order={order} delivery={delivery} />
        ) : (
          <Alert type="warning" message="Dados de entrega não disponíveis." />
        ),
    },
    {
      key: "transferencia",
      label: (
        <span>
          <ArrowRightLeft className="inline-block mr-1 w-4 h-4 text-orange-500" />
          Transferência
        </span>
      ),
      children: <TransferenciaTab transfers={transfers} />,
    },
  ];
  // aba TV8, só se for TV7 - Faturamento
  const tv8Tab: TabItem = {
    key: "tv8",
    label: (
      <span>
        <Truck className="inline-block mr-1 w-4 h-4 text-orange-500" />
        TV8
      </span>
    ),
    children: order ? (
      <TV8Tab order={order} initialDeliveries={tv8Deliveries} stores={stores} />
    ) : (
      <Alert type="warning" message="Dados para TV8 não disponíveis." />
    ),
  };
  const checkoutTab: TabItem = {
    key: "checkout",
    label: (
      <span>
        <CreditCard className="inline-block mr-1 w-4 h-4 text-purple-600" />
        Acerto de caixa
      </span>
    ),
    children: order ? (
      <CheckoutTab order={order} />
    ) : (
      <Alert type="warning" message="Dados do pedido não disponíveis." />
    ),
  };
  const tabItems: TabItem[] = [
    ...baseTabs,
    ...(order?.orderType === "TV7 - Faturamento" ? [tv8Tab] : []),
    checkoutTab,
  ];
  return (
    <Card size="small" variant="outlined" style={{ marginTop: 0 }} styles={{ body: { padding: 12 } }}>
      <Tabs defaultActiveKey="itens" items={tabItems} tabBarStyle={{ marginBottom: 8 }} />
    </Card>
  );
 };
 export const OrderItemsCard = memo(OrderItemsCardComponent);
--- a/src/components/orders/OrderItemsTable.tsx
+++ b/src/components/orders/OrderItemsTable.tsx
@@ -0,0 +1,466 @@
 import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
 } from "@/src/components/ui/table";
 import { Button } from "@/src/components/ui/button";
 import { Eye, GripVertical } from "lucide-react";
 import { OrderItem } from "@/src/components/types";
 import { cellClass } from "@/src/constants/status-options";
 import { formatCurrency } from "@/src/utils/format";
 import { useState, useEffect, } from "react";
 import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuLabel,
  DropdownMenuTrigger,
  DropdownMenuCheckboxItem,
 } from "@/src/components/ui/dropdown-menu";
 interface Item {
  quantity: number | null | undefined;
 }
 const displayQuantity = (item?: Item) => {
  if (!item?.quantity && item?.quantity !== 0) {
    return "-";
  }
  return item.quantity >= 0 ? item.quantity.toString() : "0";
 };
 const ALL_COLUMNS = [
  "Código",
  "Descrição",
  "Embalagem",
  "Cor",
  "F. Estoque",
  "Tipo Entrega",
  "Quantidade",
  "Preço Unitário",
  "Preço Total",
  "Departamento",
  "Marca",
 ];
 interface OrderItemsTableProps {
  orderItems: OrderItem[];
  loadingItems: boolean;
  itemsError: string | null;
  onViewDetails?: (item: OrderItem) => void;
 }
 export function OrderItemsTable({
                                  orderItems,
                                  loadingItems,
                                  itemsError,
                                  onViewDetails,
                                }: OrderItemsTableProps) {
  // Carregar as colunas visíveis do localStorage na inicialização
  const initVisibleColumns = () => {
    try {
      const saved = localStorage.getItem('visibleOrderItemColumns');
      if (saved) {
        const parsed = JSON.parse(saved);
        if (Array.isArray(parsed) && parsed.length > 0) {
          return parsed;
        }
      }
    } catch (error) {
      console.error('Erro ao carregar configurações de colunas:', error);
    }
    return ALL_COLUMNS;
  };
  // Inicializar a ordem das colunas
  const initColumnOrder = () => {
    try {
      const saved = localStorage.getItem('orderItemColumnsOrder');
      if (saved) {
        const parsed = JSON.parse(saved);
        if (Array.isArray(parsed) && parsed.length > 0) {
          return parsed;
        }
      }
    } catch (error) {
      console.error('Erro ao carregar ordem das colunas:', error);
    }
    return ALL_COLUMNS;
  };
  // Estado para controlar quais colunas estão visíveis
  const [visibleColumns, setVisibleColumns] = useState<string[]>(initVisibleColumns);
  // Estado para controlar a ordem das colunas
  const [columnOrder, setColumnOrder] = useState<string[]>(initColumnOrder);
  // Estado para rastrear coluna sendo arrastada
  const [draggedColumn, setDraggedColumn] = useState<string | null>(null);
  // Salvar as colunas visíveis no localStorage sempre que elas mudarem
  useEffect(() => {
    try {
      localStorage.setItem('visibleOrderItemColumns', JSON.stringify(visibleColumns));
    } catch (error) {
      console.error('Erro ao salvar configurações de colunas:', error);
    }
  }, [visibleColumns]);
  // Salvar a ordem das colunas no localStorage
  useEffect(() => {
    try {
      localStorage.setItem('orderItemColumnsOrder', JSON.stringify(columnOrder));
    } catch (error) {
      console.error('Erro ao salvar ordem das colunas:', error);
    }
  }, [columnOrder]);
  // Função para alternar a visibilidade de uma coluna
  const toggleColumn = (column: string) => {
    setVisibleColumns((current) => {
      if (current.includes(column)) {
        return current.filter((c) => c !== column);
      } else {
        return [...current, column];
      }
    });
  };
  // Função para selecionar todas as colunas
  const selectAllColumns = () => {
    setVisibleColumns(ALL_COLUMNS);
  };
  // Função para desmarcar todas as colunas
  const unselectAllColumns = () => {
    // Mantém pelo menos uma coluna para garantir que a tabela não fique vazia
    setVisibleColumns(["Código"]);
  };
  // Função para verificar se uma coluna está visível
  const isColumnVisible = (column: string) => visibleColumns.includes(column);
  // Funções para drag & drop
  const handleDragStart = (e: React.DragEvent<HTMLDivElement>, column: string) => {
    setDraggedColumn(column);
    e.dataTransfer.effectAllowed = 'move';
    e.dataTransfer.setData('text/plain', column);
    // Adicionar um estilo visual para o elemento sendo arrastado
    if (e.currentTarget) {
      setTimeout(() => {
        if (e.currentTarget) {
          e.currentTarget.classList.add('opacity-50');
        }
      }, 0);
    }
  };
  const handleDragEnd = (e: React.DragEvent<HTMLDivElement>) => {
    setDraggedColumn(null);
    e.currentTarget.classList.remove('opacity-50');
  };
  const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
    e.preventDefault();
    e.dataTransfer.dropEffect = 'move';
  };
  const handleDrop = (e: React.DragEvent<HTMLDivElement>, targetColumn: string) => {
    e.preventDefault();
    if (!draggedColumn || draggedColumn === targetColumn) return;
    // Reordenar as colunas
    const newColumnOrder = [...columnOrder];
    const draggedIndex = newColumnOrder.indexOf(draggedColumn);
    const targetIndex = newColumnOrder.indexOf(targetColumn);
    if (draggedIndex !== -1 && targetIndex !== -1) {
      newColumnOrder.splice(draggedIndex, 1);
      newColumnOrder.splice(targetIndex, 0, draggedColumn);
      setColumnOrder(newColumnOrder);
    }
  };
  const getColumnClass = (title: string) => {
    const textRight = ["Preço Unitário", "Preço Total", "Quantidade"];
    const cellWidth: { [key: string]: string } = {
      "Código": "w-20",
      "Descrição": "w-56",
      "Embalagem": "w-24",
      "Cor": "w-20",
      "F. Estoque": "w-24",
      "Tipo Entrega": "w-28",
      "Quantidade": "w-24",
      "Preço Unitário": "w-24",
      "Preço Total": "w-24",
      "Departamento": "w-48",
      "Marca": "w-24",
    };
    let classes = "";
    // Não aplicar whitespace-nowrap para Departamento
    if (title !== "Departamento") {
      classes += "whitespace-nowrap ";
    }
    // Alinhar à direita
    if (textRight.includes(title)) {
      classes += "text-right ";
    }
    // Aplicar larguras
    if (cellWidth[title]) {
      classes += cellWidth[title] + " ";
    }
    return classes;
  };
  // Função para ordenar as colunas visíveis na ordem definida pelo usuário
  const getOrderedVisibleColumns = () => {
    // Primeiro, filtrar as colunas que são visíveis
    const visibleColumnSet = new Set(visibleColumns);
    // Depois, ordenar as colunas de acordo com a ordem definida pelo usuário
    return columnOrder.filter(column => visibleColumnSet.has(column));
  };
  // Resetar a ordem das colunas
  const resetColumnOrder = () => {
    setColumnOrder(ALL_COLUMNS);
  };
 const handleEvent = (e: React.SyntheticEvent) => {
  const element = e.currentTarget;
  if (element instanceof HTMLElement) {
    const timeoutId = setTimeout(() => {
      element.classList.add('opacity-50');
    }, 0);
    // Limpeza em caso de desmontagem
    return () => clearTimeout(timeoutId);
  }
 };
  if (loadingItems) {
    return <div className="py-4 text-center">Carregando itens...</div>;
  }
  if (itemsError) {
    return <div className="py-2 text-red-500">{itemsError}</div>;
  }
  if (orderItems.length === 0) {
    return <div className="py-2">Nenhum item encontrado para este pedido.</div>;
  }
  const orderedVisibleColumns = getOrderedVisibleColumns();
  return (
      <div className="rounded-md border-0">
        <div className="flex justify-end mb-2 gap-2">
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
            </DropdownMenuTrigger>
            <DropdownMenuContent className="w-56 p-2 bg-white shadow-lg border border-gray-200">
              <DropdownMenuLabel className="text-sm font-bold pb-2 mb-2 border-b border-gray-200">Visibilidade das Colunas</DropdownMenuLabel>
              <div className="flex justify-between mb-2 border-b pb-2">
                <Button
                    variant="ghost"
                    size="sm"
                    onClick={selectAllColumns}
                    className="text-xs h-7 hover:bg-gray-100"
                >
                  Marcar Todas
                </Button>
                <Button
                    variant="ghost"
                    size="sm"
                    onClick={unselectAllColumns}
                    className="text-xs h-7 hover:bg-gray-100"
                >
                  Desmarcar Todas
                </Button>
              </div>
              <div className="max-h-[300px] overflow-y-auto">
                {ALL_COLUMNS.map((column) => (
                    <DropdownMenuCheckboxItem
                        key={column}
                        checked={isColumnVisible(column)}
                        onCheckedChange={() => toggleColumn(column)}
                        className="flex items-center space-x-2 cursor-pointer py-1.5 hover:bg-gray-100 px-2 rounded"
                    >
                      <div className="flex items-center gap-2 text-sm">
                        {isColumnVisible(column) ? (
                            <svg
                                xmlns="http://www.w3.org/2000/svg"
                                viewBox="0 0 24 24"
                                fill="none"
                                stroke="currentColor"
                                strokeWidth="2"
                                strokeLinecap="round"
                                strokeLinejoin="round"
                                className="h-4 w-4 text-blue-600"
                            >
                              <rect width="16" height="16" x="4" y="4" rx="2" />
                              <path d="m9 12 2 2 4-4" />
                            </svg>
                        ) : (
                            <svg
                                xmlns="http://www.w3.org/2000/svg"
                                viewBox="0 0 24 24"
                                fill="none"
                                stroke="currentColor"
                                strokeWidth="2"
                                strokeLinecap="round"
                                strokeLinejoin="round"
                                className="h-4 w-4 text-gray-400"
                            >
                              <rect width="16" height="16" x="4" y="4" rx="2" />
                            </svg>
                        )}
                        {column}
                      </div>
                    </DropdownMenuCheckboxItem>
                ))}
              </div>
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
        <div className="border border-gray-300">
          <div className="overflow-x-auto">
            <div className="max-h-[600px] overflow-y-auto">
              <Table className="border-collapse border-gray-200">
                <TableHeader className="sticky top-0 z-10 bg-white border-b border-gray-200">
                  <TableRow className="hover:bg-transparent">
                    {orderedVisibleColumns.map((title, index, array) => (
                        <TableHead
                            key={index}
                            className={`text-xs font-medium text-gray-600 p-2 ${getColumnClass(title)} ${
                                index < array.length - 1 ? "border-r border-gray-200" : ""
                            } relative`}
                            draggable={true}
                            onDragStart={(e) => handleDragStart(e, title)}
                            onDragEnd={handleDragEnd}
                            onDragOver={handleDragOver}
                            onDrop={(e) => handleDrop(e, title)}
                        >
                          <div className="flex items-center">
                            <GripVertical className="h-3 w-3 mr-1 cursor-move text-gray-400" />
                            {title}
                          </div>
                        </TableHead>
                    ))}
                    {onViewDetails && (
                        <TableHead className="text-xs font-medium text-gray-600 p-2 w-16">
                          Ações
                        </TableHead>
                    )}
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {orderItems.map((item, index) => (
                      <TableRow
                          key={`${item.productId}-${index}`}
                          className="odd:bg-white even:bg-gray-50 hover:bg-gray-100"
                      >
                        {orderedVisibleColumns.map((columnName, colIndex) => {
                          switch (columnName) {
                            case "Código":
                              return (
                                  <TableCell key={colIndex} className={`${cellClass} border-r border-gray-200 p-2 text-xs`}>
                                    {item.productId ?? "-"}
                                  </TableCell>
                              );
                            case "Descrição":
                              return (
                                  <TableCell key={colIndex} className={`${cellClass} border-r border-gray-200 p-2 text-xs`}>
                                    {item.description ?? "-"}
                                  </TableCell>
                              );
                            case "Embalagem":
                              return (
                                  <TableCell key={colIndex} className={`${cellClass} border-r border-gray-200 p-2 text-xs`}>
                                    {item.pacth ?? "-"}
                                  </TableCell>
                              );
                            case "Cor":
                              return (
                                  <TableCell key={colIndex} className={`${cellClass} border-r border-gray-200 p-2 text-xs`}>
                                    {item.color ?? "-"}
                                  </TableCell>
                              );
                            case "F. Estoque":
                              return (
                                  <TableCell key={colIndex} className={`${cellClass} border-r border-gray-200 p-2 text-xs`}>
                                    {item.stockId ?? "-"}
                                  </TableCell>
                              );
                            case "Tipo Entrega":
                              return (
                                  <TableCell key={colIndex} className={`${cellClass} border-r border-gray-200 p-2 text-xs`}>
                                    {item.deliveryType ?? "-"}
                                  </TableCell>
                              );
                            case "Quantidade":
                              return (
                                  <TableCell key={colIndex} className={`${cellClass} border-r border-gray-200 p-2 text-right text-xs`}>
                                    {displayQuantity(item)}
                                  </TableCell>
                              );
                            case "Preço Unitário":
                              return (
                                  <TableCell key={colIndex} className={`${cellClass} border-r border-gray-200 p-2 text-right text-xs`}>
                                    {formatCurrency(item.salePrice)}
                                  </TableCell>
                              );
                            case "Preço Total":
                              return (
                                  <TableCell key={colIndex} className={`${cellClass} border-r border-gray-200 p-2 text-right text-xs`}>
                                    {item.total != null ? formatCurrency(item.total) : "-"}
                                  </TableCell>
                              );
                            case "Departamento":
                              return (
                                  <TableCell key={colIndex} className={`${cellClass} border-r border-gray-200 p-2 text-xs`}>
                                    <div className="break-words hyphens-auto w-full">
                                      {item.department ?? "-"}
                                    </div>
                                  </TableCell>
                              );
                            case "Marca":
                              return (
                                  <TableCell key={colIndex} className={`${cellClass} border-r border-gray-200 p-2 text-xs`}>
                                    {item.brand ?? "-"}
                                  </TableCell>
                              );
                            default:
                              return null;
                          }
                        })}
                        {onViewDetails && (
                            <TableCell className="p-2">
                              <Button
                                  variant="ghost"
                                  size="icon"
                                  onClick={() => onViewDetails(item)}
                                  title="Ver detalhes do item"
                                  className="h-7 w-7"
                              >
                                <Eye className="h-3.5 w-3.5" />
                              </Button>
                            </TableCell>
                        )}
                      </TableRow>
                  ))}
                </TableBody>
              </Table>
            </div>
          </div>
        </div>
      </div>
  );
 }
--- a/src/components/orders/OrderTimeline.tsx
+++ b/src/components/orders/OrderTimeline.tsx
@@ -0,0 +1,326 @@
 "use client";
 import { useState, useEffect, useMemo } from "react";
 import {
  FilePlus,
  LoaderCircle,
  Boxes,
  PackageCheck,
  AlarmClockOff,
  Truck,
  Clock,
  AlertCircle,
  CheckCircle,
  type LucideIcon,
 } from "lucide-react";
 import { cn } from "../../lib/utils";
 import { Card, CardContent, CardHeader, CardTitle } from "../../components/ui/card";
 import { Badge } from "../../components/ui/badge";
 import { ordersApi } from "../../lib/api";
 /**
 * Represents a timeline event in an order's lifecycle
 */
 interface Leadtime {
  /** Description of the stage/step */
  etapas: string;
  /** Detailed description of the event */
  descricao: string;
  /** Date and time of the event */
  date: string;
  /** Employee ID who handled this step */
  codigoFuncionario: string;
  /** Employee name who handled this step */
  nomeFuncionario: string;
  /** Order number associated with this event */
  numeroPedido: string;
  /** Icon to display for this event */
  icon?: LucideIcon;
  /** Status label for this event */
  status?: string;
  /** Color theme for this event */
  color?: string;
 }
 /**
 * Props for the Timeline component
 */
 interface TimelineProps {
  /** Order ID to fetch timeline data for */
  orderId?: string;
  /** Optional CSS class name */
  className?: string;
 }
 /**
 * Configuration for different order status types
 */
 const statusConfig: Record<
  string,
  { icon: LucideIcon; color: string; status: string }
 > = {
  pedido: { icon: FilePlus, color: "text-blue-500", status: "" },
  processamento: { icon: LoaderCircle, color: "text-amber-500", status: "" },
  separacao: { icon: Boxes, color: "text-purple-500", status: "" },
  transporte: { icon: Truck, color: "text-orange-500", status: "" },
  entregue: { icon: PackageCheck, color: "text-green-500", status: "" },
  atrasado: { icon: AlarmClockOff, color: "text-red-500", status: "" },
  aguardando: { icon: Clock, color: "text-gray-500", status: "" },
  recebido: { icon: FilePlus, color: "text-blue-500", status: "" },
  confirmado: { icon: CheckCircle, color: "text-blue-500", status: "" },
  preparo: { icon: LoaderCircle, color: "text-amber-500", status: "" },
  enviado: { icon: Truck, color: "text-orange-500", status: "" },
  finalizado: { icon: PackageCheck, color: "text-green-500", status: "" },
 };
 /**
 * Keywords used to match description text to status types
 */
 const statusKeywords = {
  pedido: ['venda realizada', 'pedido', 'receb'],
  processamento: ['montagem carga', 'preparo', 'process', 'faturado'],
  separacao: ['inicio separação', 'início separação', 'separac', 'separaç', 'separado'],
  transporte: ['transporte', 'enviado'],
  entregue: ['entrega realizada', 'entreg', 'finaliz'],
  atrasado: ['atraso'],
 };
 /**
 * Determines the status configuration based on the event description
 * @param descricao - The description text to analyze
 * @returns The matching status configuration object
 */
 function getStatusConfig(descricao: string): { icon: LucideIcon; color: string; status: string } {
  const desc = descricao?.toLowerCase().trim() || "";
  for (const [status, keywords] of Object.entries(statusKeywords)) {
    if (keywords.some(keyword => desc.includes(keyword))) {
      return statusConfig[status as keyof typeof statusConfig] || statusConfig.aguardando;
    }
  }
  return statusConfig.aguardando;
 }
 /**
 * Formats a date string to localized date and time format
 * @param dateString - The date string to format
 * @returns Formatted date string in Brazilian format (DD/MM/YYYY HH:MM)
 */
 function formatDate(dateString: string): string {
  try {
    const date = new Date(dateString);
    if (isNaN(date.getTime())) return dateString;
    return new Intl.DateTimeFormat("pt-BR", {
      day: "2-digit",
      month: "2-digit",
      year: "numeric",
      hour: "2-digit",
      minute: "2-digit",
    }).format(date);
  } catch {
    return dateString;
  }
 }
 /**
 * Formats a date string to show only the time portion
 * @param dateString - The date string to format
 * @returns Formatted time string in Brazilian format (HH:MM)
 */
 function formatTimeOnly(dateString: string): string {
  try {
    const date = new Date(dateString);
    if (isNaN(date.getTime())) return "";
    return new Intl.DateTimeFormat("pt-BR", {
      hour: "2-digit",
      minute: "2-digit",
    }).format(date);
  } catch {
    return "";
  }
 }
 /**
 * Maps API data to the Leadtime interface with proper status configuration
 * @param apiData - Raw API data
 * @param defaultOrderId - Fallback order ID if not present in API data
 * @returns Array of processed Leadtime objects
 */
 function mapApiDataToLeadtimes(apiData: any[], defaultOrderId: string = ""): Leadtime[] {
  return apiData.map((item) => {
    const { icon, color, status } = getStatusConfig(item.descricaoEtapa || "");
    return {
      etapas: item.descricaoEtapa ?? "",
      descricao: item.descricaoEtapa ?? "Etapa não especificada",
      date: item.data ?? "",
      codigoFuncionario: item.codigoFuncionario?.toString() ?? "",
      nomeFuncionario: item.nomeFuncionario ?? "",
      numeroPedido: item.numeroPedido?.toString() ?? defaultOrderId,
      icon,
      status,
      color,
    };
  });
 }
 /**
 * Timeline component that displays the history of events for an order
 */
 export default function Timeline({ orderId = "", className }: TimelineProps) {
  const [leadtimes, setLeadtimes] = useState<Leadtime[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [apiData, setApiData] = useState<any[]>([]);
  // Fetch data when orderId changes
  useEffect(() => {
    const fetchLeadtimeData = async () => {
      if (!orderId) {
        setLoading(false);
        setError("Nenhum pedido selecionado.");
        setApiData([]);
        return;
      }
      try {
        setLoading(true);
        setError(null);
        const data = await ordersApi.getLeadtime(orderId);
        if (!data) throw new Error("Dados da API indisponíveis");
        setApiData(Array.isArray(data) ? data : []);
      } catch (err) {
        setError(`Erro ao buscar dados: ${err instanceof Error ? err.message : "Desconhecido"}`);
        setApiData([]);
      } finally {
        setLoading(false);
      }
    };
    fetchLeadtimeData();
  }, [orderId]);
  // Process API data with memoization to avoid unnecessary recalculations
  const processedLeadtimes = useMemo(() => {
    return apiData.length > 0 ? mapApiDataToLeadtimes(apiData, orderId) : [];
  }, [apiData, orderId]);
  // Update leadtimes state when processed data changes
  useEffect(() => {
    setLeadtimes(processedLeadtimes);
  }, [processedLeadtimes]);
  if (loading) {
    return (
      <Card className={cn("w-full shadow-md border-0", className)}>
        <CardContent className="p-2">
          <div className="flex justify-center items-center h-32">
            <div data-testid="loading-skeleton" className="animate-pulse flex flex-col space-y-2 w-full">
              {[1, 2, 3].map((i) => (
                <div key={i} className="flex space-x-2">
                  <div className="rounded-full bg-gray-200 dark:bg-gray-700 h-6 w-6" />
                  <div className="flex-1 space-y-1">
                    <div className="h-2 bg-gray-200 dark:bg-gray-700 rounded-full w-3/4" />
                    <div className="h-2 bg-gray-200 dark:bg-gray-700 rounded-full w-5/6" />
                  </div>
                </div>
              ))}
            </div>
          </div>
        </CardContent>
      </Card>
    );
  }
  if (error) {
    return (
      <Card className={cn("w-full shadow-md border-0", className)}>
        <CardContent className="p-2 flex flex-col items-center justify-center text-center">
          <AlertCircle className="h-8 w-8 text-red-500 mb-2 animate-pulse" />
          <h3 className="text-sm font-medium">Ocorreu um problema</h3>
          <p className="text-xs text-muted-foreground mt-1">
            Não foi possível carregar a linha do tempo do pedido.
          </p>
          <p className="text-xs text-red-600 mt-2">{error}</p>
        </CardContent>
      </Card>
    );
  }
  if (leadtimes.length === 0) {
    return (
      <Card className={cn("w-full shadow-md border-0", className)}>
        <CardContent className="p-2 flex flex-col items-center justify-center text-center h-32">
          <Boxes className="h-8 w-8 text-gray-400 mb-2" />
          <h3 className="text-sm font-medium">Nenhuma movimentação encontrada</h3>
          <p className="text-xs text-muted-foreground mt-1">
            Ainda não há etapas registradas para o pedido {orderId || "selecionado"}.
          </p>
        </CardContent>
      </Card>
    );
  }
  return (
    <Card className={cn("w-full shadow-md border-0 overflow-hidden", className)}>
      <CardHeader className="bg-gradient-to-r from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800 border-b p-2">
        <CardTitle className="text-sm font-bold flex items-center gap-1">
          <span className="inline-block w-1 h-4 bg-slate-700 dark:bg-slate-400 rounded-full"></span>
          Movimentação do Pedido: {leadtimes[0]?.numeroPedido || orderId}
        </CardTitle>
      </CardHeader>
      <CardContent className="p-2">
        <div className="space-y-3">
          {leadtimes.map((item, index) => {
            const IconComponent = item.icon || Clock;
            const dateFormatted = formatDate(item.date);
            const [datePart, timePart] = dateFormatted.split(' ');
            return (
              <div key={index} className="relative pl-5 transition-all duration-300 hover:translate-x-1">
                {index < leadtimes.length - 1 && (
                  <div className="absolute left-2 top-4 bottom-0 w-0.5 bg-gradient-to-b from-current to-gray-200 dark:to-gray-700" style={{ opacity: 0.5 }} />
                )}
                <div className={cn("absolute left-0 top-0 flex h-4 w-4 items-center justify-center rounded-full border-2 border-current shadow-sm transition-transform duration-300 hover:scale-105", item.color)}>
                  <IconComponent className="h-2 w-2" />
                </div>
                <div className="flex flex-col space-y-1 bg-white dark:bg-slate-900 rounded-lg p-2 shadow-sm hover:shadow-md transition-shadow duration-300">
                  <div className="flex items-start justify-between gap-1 flex-wrap">
                    <h3 className="text-xs font-semibold">{item.descricao}</h3>
                    <Badge variant="outline" className={cn(item.color, "font-medium text-[10px] px-1.5 py-0.5 whitespace-nowrap")}>
                      {item.status}
                    </Badge>
                  </div>
                  <div className="flex flex-col space-y-1 text-[10px] text-muted-foreground">
                    <div className="flex items-center">
                      <Clock className="h-2.5 w-2.5 mr-1 text-gray-400" />
                      <span className="whitespace-nowrap text-gray-500">{datePart}, {timePart}</span>
                    </div>
                    {item.nomeFuncionario && (
                      <div className="flex flex-col">
                        <div className="text-gray-500 mb-0.5 text-[10px]">Responsável:</div>
                        <div className="flex flex-col">
                          <span className="font-medium text-[10px] text-gray-700 dark:text-gray-300">{item.nomeFuncionario.toUpperCase()}</span>
                          {item.codigoFuncionario && (
                            <span className="text-amber-600 text-[9px]">
                              ({item.codigoFuncionario})
                            </span>
                          )}
                        </div>
                      </div>
                    )}
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </CardContent>
    </Card>
  );
 }
--- a/src/components/orders/OrdersTable.tsx
+++ b/src/components/orders/OrdersTable.tsx
@@ -0,0 +1,268 @@
 import { Table } from "@/src/components/ui/table";
 import { Button } from "@/src/components/ui/button";
 import { Order, OrderItem, Store, cutitens } from "@/src/components/types";
 import { useMemo, useCallback } from "react";
 import { ColumnConfig } from "./ColumnConfig/ColumnConfig";
 import { useOrderTableColumns } from "../../hooks/useOrderTableColumns";
 import { useKeyboardNavigation } from "../../hooks/useKeyboardNavigation";
 import { useStoreNameResolver } from "@/src/hooks/useStoreNameResolver";
 import { OrdersTableHeader } from "./OrdersTableHeader";
 import { OrdersTableBody } from "./OrdersTableBody";
 import { SelectedOrderItems } from "./SelectedOrderItems";
 import {  RefreshCw, ChevronLeft, ChevronRight } from "lucide-react";
 import { useOrderData } from "../../../src/hooks/useOrderData";
 import { useSort } from "@/src/hooks/useSort";
 export type ColumnKey = 
  | "Data"
  | "Data previsão de entrega"
  | "Agendamento"
  | "Filial"
  | "Pedido"
  | "Tipo Pedido"
  | "TV 7"
  | "Cliente"
  | "Vendedor"
  | "Situação"
  | "Rota"
  | "Valor"
  | "Peso(kg)"
  | "Carregamento"
  | "Cobrança"
  | "Trasportadora"
  | "Praça"
  | "Nota fiscal"
  | "Dt Faturamento"
 const ALL_COLUMNS: ColumnKey[] = [
  "Data", "Data previsão de entrega", "Agendamento", "Pedido", "Tipo Pedido", "Cliente", "Vendedor", "Filial", "Situação", "Rota", "Valor", "Peso(kg)", "Carregamento", "Cobrança", "Trasportadora", "Praça", "Nota fiscal", "Dt Faturamento", "TV 7"
 ];
 export interface OrdersTableProps {
  orders: Order[];
  currentOrders: Order[];
  selectedOrderId: string | null;
  orderItems: OrderItem[];
  cutitens?: cutitens[];
  loadingItems: boolean;
  itemsError: string | null;
  handleRowClick: (orderId: string) => void;
  currentPage: number;
  totalPages: number;
  indexOfFirstOrder: number;
  indexOfLastOrder: number;
  goToPreviousPage: () => void;
  goToNextPage: () => void;
  goToPage?: (page: number) => void;
  loadMoreOrders: () => void;
  visibleOrdersCount: number;
  stores: Store[];
  transfers: any[];
 }
 export function OrdersTable({
  orders,
  currentOrders,
  selectedOrderId,
  orderItems,
  cutitens = [],
  loadingItems,
  itemsError,
  handleRowClick,
  currentPage,
  totalPages,
  indexOfFirstOrder,
  indexOfLastOrder,
  goToPreviousPage,
  goToNextPage,
  goToPage,
  loadMoreOrders,
  visibleOrdersCount,
  stores,
  transfers,
 }: OrdersTableProps) {
  const { getStoreName } = useStoreNameResolver(stores);
  // Find the selected order based on selectedOrderId
  const selectedOrder = useMemo(() => 
    selectedOrderId ? orders.find(order => order.orderId === selectedOrderId) : undefined
  , [selectedOrderId, orders]);
  // Use custom hook for order-related data fetching
  const { 
    orderStatus, 
    orderLeadtime, 
    selectedDelivery, 
    tv8Deliveries 
  } = useOrderData(selectedOrderId, selectedOrder);
  // Define column accessors for sorting
  const columnAccessors = useMemo(() => ({
    "Data": (order: Order) => new Date(order.createDate || ""),
    "Pedido": (order: Order) => parseInt(order.orderId || "0", 10),
    "Valor": (order: Order) => parseFloat(String(order.totalValue || "0")),
    "Peso(kg)": (order: Order) => parseFloat(String(order.totalWeigth || "0")),
    "Dt Faturamento": (order: Order) => new Date(order.invoiceDate || ""),
    // Add other column accessors as needed
  }), []);
  // Use our custom sort hook
  const { sortedItems, sortConfig, handleSort } = useSort<Order>(
    currentOrders,
    columnAccessors
  );
  const {
    visibleColumns,
    columnOrder,
    getColumnClass,
    getOrderedVisibleColumns,
    resetColumnOrder,
    toggleColumn,
    selectAllColumns,
    unselectAllColumns,
    isColumnVisible,
    handleDragStart,
    handleDragEnd,
    handleDragOver,
    handleDrop,
  } = useOrderTableColumns(ALL_COLUMNS);
  const { tableRef } = useKeyboardNavigation({
    currentOrders,
    selectedOrderId,
    handleRowClick,
  });
  const orderedVisibleColumns = useMemo(() => {
    return getOrderedVisibleColumns();
  }, [visibleColumns, columnOrder, getOrderedVisibleColumns]);
  const columnConfigProps = useMemo(() => ({
    allColumns: ALL_COLUMNS,
    visibleColumns,
    isColumnVisible,
    toggleColumn,
    selectAllColumns,
    unselectAllColumns,
  }), [visibleColumns, isColumnVisible, toggleColumn, selectAllColumns, unselectAllColumns]);
  const renderHeaderControls = useCallback(() => (
    <div className="flex justify-end mb-2 gap-2">
      <Button
        variant="ghost"
        size="sm"
        onClick={resetColumnOrder}
        className="text-xs text-muted-foreground hover:text-foreground transition-colors"
      >
        <RefreshCw className="h-3.5 w-3.5 mr-1" />
      </Button>
      <div className="h-4 w-px bg-border mx-1" /> {/* Separator */}
      <ColumnConfig {...columnConfigProps} />
    </div>
  ), [resetColumnOrder, columnConfigProps]);
  const renderPagination = useCallback(() => (
    <div className="flex justify-between items-center px-4 py-1 border-t border-gray-200">
      <div className="text-sm text-muted-foreground">
        {orders.length > 0 
          ? `Mostrando ${indexOfFirstOrder + 1}-${indexOfLastOrder} de ${orders.length} pedidos`
          : "Nenhum pedido encontrado"
        }
      </div>
      <div className="flex items-center space-x-2">
        <Button 
          variant="outline" 
          size="sm" 
          onClick={goToPreviousPage}
          disabled={currentPage <= 1}
          className="h-8 w-8 p-0"
        >
          <span className="sr-only">Página anterior</span>
          <ChevronLeft className="h-4 w-4" />
        </Button>
        <span className="text-sm text-muted-foreground">
          Página {currentPage} de {totalPages}
        </span>
        <Button 
          variant="outline" 
          size="sm" 
          onClick={goToNextPage}
          disabled={currentPage >= totalPages}
          className="h-8 w-8 p-0"
        >
          <span className="sr-only">Próxima página</span>
          <ChevronRight className="h-4 w-4" />
        </Button>
      </div>
    </div>
  ), [orders.length, indexOfFirstOrder, indexOfLastOrder, currentPage, totalPages, goToPreviousPage, goToNextPage]);
  const renderOrdersTable = useCallback(() => (
    <div className="border border-gray-300">
      <div className="overflow-x-auto">
        <div className={`${orders.length <= 6 ? "max-h-fit" : "h-[400px]"} overflow-y-auto`}>
          <Table className="border-collapse border-gray-200">
            <OrdersTableHeader
              orderedVisibleColumns={orderedVisibleColumns}
              getColumnClass={getColumnClass}
              handleDragStart={handleDragStart}
              handleDragEnd={handleDragEnd}
              handleDragOver={handleDragOver}
              handleDrop={handleDrop}
              sortConfig={sortConfig}
              onSort={handleSort}
            />
            <OrdersTableBody
              orders={orders}
              currentOrders={sortedItems}
              selectedOrderId={selectedOrderId}
              visibleColumns={orderedVisibleColumns}
              getStoreName={getStoreName}
              handleRowClick={handleRowClick}
            />
          </Table>
        </div>
      </div>
      {renderPagination()}
    </div>
  ), [
    orders, 
    orderedVisibleColumns, 
    getColumnClass, 
    handleDragStart, 
    handleDragEnd, 
    handleDragOver, 
    handleDrop, 
    sortConfig, 
    handleSort, 
    sortedItems, 
    selectedOrderId, 
    getStoreName, 
    handleRowClick,
    renderPagination
  ]);
  return (
    <div className="rounded-md border-0" ref={tableRef} tabIndex={0}>
      {renderHeaderControls()}
      {renderOrdersTable()}
      <SelectedOrderItems
        selectedOrderId={selectedOrderId}
        orderItems={orderItems}
        loadingItems={loadingItems}
        itemsError={itemsError}
        cutitens={cutitens}
        order={selectedOrder}
        delivery={selectedDelivery}
        transfers={transfers}
        status={orderStatus}
        leadtime={orderLeadtime}
        tv8Deliveries={tv8Deliveries}
      />
    </div>
  );
 }
--- a/src/components/orders/OrdersTableBody.tsx
+++ b/src/components/orders/OrdersTableBody.tsx
@@ -0,0 +1,93 @@
 import React, { memo, useMemo } from "react";
 import {
  TableBody,
  TableCell,
  TableRow,
 } from "@/src/components/ui/table";
 import { OrderRowExpandable } from "./tabela-pedidos/components/OrderRowExpandable";
 import { Order } from "@/src/components/types";
 interface OrdersTableBodyProps {
  orders: Order[];
  currentOrders: Order[];
  selectedOrderId: string | null;
  visibleColumns: string[];
  getStoreName: (storeId?: string) => string;
  handleRowClick: (orderId: string) => void;
 }
 // Componente de linha vazia memoizado
 const EmptyRow = memo(({ colSpan }: { colSpan: number }) => (
  <TableRow>
    <TableCell colSpan={colSpan} className="h-24 text-center text-xs">
      Nenhum pedido encontrado com os filtros informados.
    </TableCell>
  </TableRow>
 ));
 // Componente de linha de pedido memoizado
 const OrderRow = memo(({ 
  order, 
  isSelected, 
  visibleColumns, 
  onSelect, 
  getStoreName 
 }: { 
  order: Order; 
  isSelected: boolean; 
  visibleColumns: string[];
  onSelect: (orderId: string) => void;
  getStoreName: (storeId?: string) => string;
 }) => {
  // Create a new order object with the store name only (without ID prefix)
  const orderWithStore = {
    ...order,
    store: getStoreName(order.storeId),
    storeId: order.storeId, // Preserve original storeId
  };
  return (
    <OrderRowExpandable
      key={order.orderId}
      order={orderWithStore}
      isSelected={isSelected}
      onSelect={onSelect}
      orderItems={[]}
      loadingItems={false}
      itemsError={null}
      visibleColumns={visibleColumns}
    />
  );
 });
 // Componente principal memoizado
 function OrdersTableBodyComponent({
  orders,
  currentOrders,
  selectedOrderId,
  visibleColumns,
  getStoreName,
  handleRowClick,
 }: OrdersTableBodyProps) {
  // Renderização condicional baseada na presença de orders, memoizada
  const content = useMemo(() => {
    if (orders.length === 0) {
      return <EmptyRow colSpan={visibleColumns.length} />;
    }
    return currentOrders.map((order) => (
      <OrderRow
        key={order.orderId}
        order={order}
        isSelected={selectedOrderId === order.orderId}
        visibleColumns={visibleColumns}
        onSelect={handleRowClick}
        getStoreName={getStoreName}
      />
    ));
  }, [orders.length, currentOrders, selectedOrderId, visibleColumns, getStoreName, handleRowClick]);
  return <TableBody>{content}</TableBody>;
 }
 export const OrdersTableBody = memo(OrdersTableBodyComponent); 
--- a/src/components/orders/OrdersTableHeader.tsx
+++ b/src/components/orders/OrdersTableHeader.tsx
@@ -0,0 +1,139 @@
 import React, { memo, useMemo } from "react";
 import {
  TableHead,
  TableHeader,
  TableRow,
 } from "@/src/components/ui/table";
 import { GripVertical, ArrowUpDown, ArrowUp, ArrowDown } from "lucide-react";
 import { SortConfig } from "@/src/hooks/useSort";
 interface OrdersTableHeaderProps {
  orderedVisibleColumns: string[];
  getColumnClass: (title: string) => string;
  handleDragStart: (e: React.DragEvent<HTMLDivElement>, column: string) => void;
  handleDragEnd: (e: React.DragEvent<HTMLDivElement>) => void;
  handleDragOver: (e: React.DragEvent<HTMLDivElement>) => void;
  handleDrop: (e: React.DragEvent<HTMLDivElement>, column: string) => void;
  sortConfig?: SortConfig<any> | null;
  onSort?: (column: string) => void;
 }
 // Componente de cabeçalho de coluna memoizado
 const ColumnHeader = memo(({
  title,
  index,
  totalColumns,
  getColumnClass,
  handleDragStart,
  handleDragEnd,
  handleDragOver,
  handleDrop,
  sortConfig,
  onSort,
 }: {
  title: string;
  index: number;
  totalColumns: number;
  getColumnClass: (title: string) => string;
  handleDragStart: (e: React.DragEvent<HTMLDivElement>, column: string) => void;
  handleDragEnd: (e: React.DragEvent<HTMLDivElement>) => void;
  handleDragOver: (e: React.DragEvent<HTMLDivElement>) => void;
  handleDrop: (e: React.DragEvent<HTMLDivElement>, column: string) => void;
  sortConfig?: SortConfig<any> | null;
  onSort?: (column: string) => void;
 }) => {
  // Determinar se esta coluna é ordenável
  const isSortable = ["Data", "Valor", "Peso(kg)", "Pedido", "Dt Faturamento"].includes(title);
  // Verificar se esta coluna está sendo ordenada
  const isSorted = sortConfig && sortConfig.key === title;
  // Renderizar o ícone de ordenação apropriado
  const renderSortIcon = () => {
    if (!isSortable) return null;
    if (!isSorted) {
      return <ArrowUpDown className="h-3 w-3 ml-1 text-gray-400" />;
    }
    return sortConfig?.direction === 'asc' 
      ? <ArrowUp className="h-3 w-3 ml-1 text-gray-600" />
      : <ArrowDown className="h-3 w-3 ml-1 text-gray-600" />;
  };
  // Handler para cliques na coluna para ordenação
  const handleSortClick = () => {
    if (isSortable && onSort) {
      onSort(title);
    }
  };
  return (
    <TableHead
      key={index}
      className={`text-xs font-medium text-gray-600 p-2 ${getColumnClass(title)} border-r border-gray-200 relative ${isSortable ? "cursor-pointer select-none" : ""}`}
      draggable={true}
      onDragStart={(e) => handleDragStart(e, title)}
      onDragEnd={handleDragEnd}
      onDragOver={handleDragOver}
      onDrop={(e) => handleDrop(e, title)}
      onClick={handleSortClick}
    >
      <div className="flex items-center">
        <GripVertical className="h-3 w-3 mr-1 cursor-move text-gray-400" />
        <span className="flex-1">{title}</span>
        {renderSortIcon()}
      </div>
    </TableHead>
  );
 });
 // Componente principal memoizado
 function OrdersTableHeaderComponent({
  orderedVisibleColumns,
  getColumnClass,
  handleDragStart,
  handleDragEnd,
  handleDragOver,
  handleDrop,
  sortConfig,
  onSort,
 }: OrdersTableHeaderProps) {
  // Memoizar os cabeçalhos para evitar recálculos desnecessários
  const columnHeaders = useMemo(() => {
    return orderedVisibleColumns.map((title, index) => (
      <ColumnHeader
        key={title + index}
        title={title}
        index={index}
        totalColumns={orderedVisibleColumns.length}
        getColumnClass={getColumnClass}
        handleDragStart={handleDragStart}
        handleDragEnd={handleDragEnd}
        handleDragOver={handleDragOver}
        handleDrop={handleDrop}
        sortConfig={sortConfig}
        onSort={onSort}
      />
    ));
  }, [
    orderedVisibleColumns,
    getColumnClass,
    handleDragStart,
    handleDragEnd,
    handleDragOver,
    handleDrop,
    sortConfig,
    onSort
  ]);
  return (
    <TableHeader className="sticky top-0 z-10 bg-white border-b border-gray-200">
      <TableRow className="hover:bg-transparent">
        {columnHeaders}
      </TableRow>
    </TableHeader>
  );
 }
 export const OrdersTableHeader = memo(OrdersTableHeaderComponent); 
--- a/src/components/orders/SelectedOrderItems.tsx
+++ b/src/components/orders/SelectedOrderItems.tsx
@@ -0,0 +1,55 @@
 import React, { memo } from "react";
 import { OrderItem, cutitens, Order, OrderDelivery, transfer, status, leadtime, OrderDeliveryDto, Store } from "@/src/components/types";
 import { OrderItemsCard } from "./OrderItemsCard";
 interface SelectedOrderItemsProps {
  selectedOrderId: string | null;
  orderItems: OrderItem[];
  loadingItems: boolean;
  itemsError: string | null;
  cutitens?: cutitens[];
  order?: Order;
  delivery?: OrderDelivery;
  transfers?: transfer[];
  status?: status[];
  leadtime?: leadtime[];
  tv8Deliveries?: OrderDeliveryDto[];
  stores?: Store[];
 }
 // Usando memo para evitar re-renderizações desnecessárias
 const SelectedOrderItemsComponent = ({
  selectedOrderId,
  orderItems,
  loadingItems,
  itemsError,
  cutitens = [],
  order,
  delivery,
  transfers = [],
  status = [],
  leadtime = [],
  tv8Deliveries = [],
  stores = [],
 }: SelectedOrderItemsProps) => {
  if (!selectedOrderId) return null;
  return (
    <OrderItemsCard 
      orderItems={orderItems}
      loadingItems={loadingItems}
      itemsError={itemsError}
      cutitens={cutitens}
      order={order}
      delivery={delivery}
      transfers={transfers}
      status={status}
      leadtime={leadtime}
      orderId={selectedOrderId || undefined}
      tv8Deliveries={tv8Deliveries}
      stores={stores}
    />
  );
 };
 export const SelectedOrderItems = memo(SelectedOrderItemsComponent); 
--- a/src/components/orders/SellerCombobox.tsx
+++ b/src/components/orders/SellerCombobox.tsx
@@ -0,0 +1,180 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { Label } from "@/src/components/ui/label";
 import { Input } from "@/src/components/ui/input";
 import { dataConsultApi } from "@/src/lib/api";
 import { Spinner } from "@/src/components/ui/spinner";
 import { Search } from "lucide-react";
 import { cn } from "@/src/lib/utils";
 interface Seller {
  id: number;
  name: string;
  code?: string;
 }
 interface SellerComboboxProps {
  id: string;
  label: string;
  value: string;
  onChange: (value: string) => void;
  onSelect?: (seller: Seller) => void;
  placeholder?: string;
  className?: string;
  disabled?: boolean;
 }
 export function SellerCombobox({
  id,
  label,
  value,
  onChange,
  onSelect,
  placeholder = "Buscar vendedor",
  className,
  disabled = false
 }: SellerComboboxProps) {
  const [isOpen, setIsOpen] = useState(false);
  const [sellers, setSellers] = useState<Seller[]>([]);
  const [filteredSellers, setFilteredSellers] = useState<Seller[]>([]);
  const [isLoading, setIsLoading] = useState(false);
  const [isFetched, setIsFetched] = useState(false);
  const comboboxRef = useRef<HTMLDivElement>(null);
  // Buscar vendedores
  useEffect(() => {
    const fetchSellers = async () => {
      if (isFetched) return;
      try {
        setIsLoading(true);
        const response = await dataConsultApi.getSellers();
        if (Array.isArray(response)) {
          const mappedSellers = response.map((seller: any) => {
            // Extrair o código numérico do vendedor
            let code = "";
            if (seller.name && seller.name.includes("-")) {
              const parts = seller.name.split("-");
              if (parts.length > 0 && parts[0].trim()) {
                const match = parts[0].trim().match(/\d+/);
                if (match) {
                  code = match[0];
                }
              }
            }
            return {
              id: seller.id,
              name: seller.name || "",
              code: code
            };
          });
          setSellers(mappedSellers);
          setIsFetched(true);
        }
      } catch (error) {
        console.error("Erro ao buscar vendedores:", error);
      } finally {
        setIsLoading(false);
      }
    };
    fetchSellers();
  }, [isFetched]);
  // Filtrar vendedores com base no valor digitado
  useEffect(() => {
    if (!value) {
      setFilteredSellers(sellers);
      return;
    }
    const lowercasedValue = value.toLowerCase();
    const filtered = sellers.filter(seller => 
      seller.name.toLowerCase().includes(lowercasedValue)
    );
    setFilteredSellers(filtered);
  }, [value, sellers]);
  // Fechar quando clicar fora do combobox
  useEffect(() => {
    function handleClickOutside(event: MouseEvent) {
      if (comboboxRef.current && !comboboxRef.current.contains(event.target as Node)) {
        setIsOpen(false);
      }
    }
    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, []);
  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const newValue = e.target.value;
    onChange(newValue);
    setIsOpen(true);
  };
  const handleSellerSelect = (seller: Seller) => {
    onChange(seller.name);
    if (onSelect) {
      onSelect(seller);
    }
    setIsOpen(false);
  };
  return (
    <div className={cn("relative w-full", className)} ref={comboboxRef}>
      <div className="flex flex-col space-y-1">
        {label && (
          <Label htmlFor={id} className="text-xs font-medium">
            {label}
          </Label>
        )}
        <div className="relative">
          <Input
            id={id}
            value={value}
            onChange={handleInputChange}
            onFocus={() => setIsOpen(true)}
            placeholder={placeholder}
            className="pr-8"
            disabled={disabled}
            autoComplete="off"
          />
          <div className="absolute right-2 top-1/2 transform -translate-y-1/2">
            {isLoading ? (
              <Spinner size="lg" />
            ) : (
              <Search className="h-4 w-4 text-gray-400" />
            )}
          </div>
        </div>
      </div>
      {isOpen && filteredSellers.length > 0 && (
        <ul className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
          {filteredSellers.map((seller) => (
            <li
              key={seller.id}
              onClick={() => handleSellerSelect(seller)}
              className="relative cursor-pointer select-none py-2 pl-3 pr-9 hover:bg-slate-100"
            >
              <div className="flex items-center">
                <span className="font-medium">{seller.name}</span>
              </div>
              {seller.code && (
                <span className="text-xs text-gray-500 ml-3">
                  RCA: {seller.code}
                </span>
              )}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
 } 
--- a/src/components/orders/SellerSearchInput.tsx
+++ b/src/components/orders/SellerSearchInput.tsx
@@ -0,0 +1,270 @@
 "use client";
 import * as React from "react";
 import { Check, ChevronsUpDown, User, Loader2, Search, X } from "lucide-react";
 import { cn } from "@/src/lib/utils";
 import { Button } from "@/src/components/ui/button";
 import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
 } from "@/src/components/ui/command";
 import {
  Popover,
  PopoverContent,
  PopoverTrigger,
 } from "@/src/components/ui/popover";
 import { dataConsultApi } from "@/src/lib/api";
 import { Label } from "@/src/components/ui/label";
 import { Badge } from "@/src/components/ui/badge";
 interface Seller {
  id: number;
  name: string;
  code?: string;
 }
 interface SellerSearchInputProps {
  id: string;
  label: string;
  placeholder: string;
  value: string;
  onChange: (value: string) => void;
  onSelect: (seller: Seller | null) => void;
  selectedSeller?: Seller | null;
  disabled?: boolean;
  "aria-label"?: string;
 }
 // Função para normalizar texto para comparações (remover acentos, case insensitive)
 const normalizeText = (text: string): string => {
  return text
    ? text
        .toLowerCase()
        .normalize("NFD")
        .replace(/[\u0300-\u036f]/g, "")
    : "";
 };
 export function SellerSearchInput({
  id,
  label,
  placeholder,
  value,
  onChange,
  onSelect,
  selectedSeller,
  disabled = false,
  "aria-label": ariaLabel,
 }: SellerSearchInputProps) {
  const [open, setOpen] = React.useState(false);
  const [sellers, setSellers] = React.useState<Seller[]>([]);
  const [loading, setLoading] = React.useState(false);
  const [searchQuery, setSearchQuery] = React.useState("");
  const [searchError, setSearchError] = React.useState<string | null>(null);
  const searchInputRef = React.useRef<HTMLInputElement>(null);
  // Carregar vendedores baseado na busca
  const searchSellers = React.useCallback(async (query: string) => {
    if (!query || query.length < 2) {
      setSellers([]);
      return;
    }
    try {
      setLoading(true);
      setSearchError(null);
      // Usar o novo método específico para busca por nome
      const sellersData = await dataConsultApi.searchSellers(query);
      if (sellersData.length > 0) {
        // Processar vendedores
        const mappedSellers = sellersData.map((seller: any) => {
          // Se o vendedor já é uma string, criar um objeto
          if (typeof seller === 'string') {
            return {
              id: 0,
              name: seller,
              code: ''
            };
          }
          // Extrair o código numérico do vendedor
          let code = "";
          const sellerName = seller.name || '';
          if (sellerName && sellerName.includes("-")) {
            const parts = sellerName.split("-");
            if (parts.length > 0 && parts[0].trim()) {
              const match = parts[0].trim().match(/\d+/);
              if (match) {
                code = match[0];
              }
            }
          }
          return {
            id: seller.id || 0,
            name: sellerName,
            code: code
          };
        });
        setSellers(mappedSellers.slice(0, 50)); // Limitar a 50 resultados para desempenho
      } else {
        setSearchError(`Nenhum vendedor encontrado para "${query}"`);
        setSellers([]);
      }
    } catch (error) {
      setSearchError("Erro ao buscar vendedores");
      setSellers([]);
    } finally {
      setLoading(false);
    }
  }, []);
  // Debounce para a busca
  React.useEffect(() => {
    const timer = setTimeout(() => {
      if (open && searchQuery.length >= 2) {
        searchSellers(searchQuery);
      }
    }, 300);
    return () => clearTimeout(timer);
  }, [searchQuery, searchSellers, open]);
  // Selecionar vendedor
  const handleSelectSeller = (seller: Seller) => {
    onSelect(seller);
    setOpen(false);
    setSearchQuery("");
  };
  // Limpar seleção
  const handleClearSelection = (e?: React.MouseEvent) => {
    if (e) {
      e.stopPropagation();
    }
    onSelect(null);
    onChange("");
    setSearchQuery("");
    setSellers([]);
  };
  // Quando o componente monta ou o valor muda
  React.useEffect(() => {
    // Se temos um value mas não temos selectedSeller, executar busca inicial
    if (value && !selectedSeller && !loading && !open) {
      searchSellers(value);
    }
  }, [value, selectedSeller, searchSellers, loading, open]);
  return (
    <div className="flex flex-col space-y-1">
      <div className="flex justify-between items-center">
        <Label 
          htmlFor={id} 
          className="text-xs font-medium"
        >
          {label}
          {selectedSeller && (
            <Badge variant="outline" className="ml-2 text-xs py-0">
              {selectedSeller.code ? `RCA: ${selectedSeller.code}` : `ID: ${selectedSeller.id}`}
            </Badge>
          )}
        </Label>
      </div>
      {searchError && (
        <p className="text-xs text-red-500 mt-0.5">{searchError}</p>
      )}
      <div className="relative">
        <Popover open={open} onOpenChange={setOpen}>
          <PopoverTrigger asChild>
            <Button
              variant="outline"
              role="combobox"
              aria-expanded={open}
              aria-label={ariaLabel || "Selecione um vendedor"}
              disabled={disabled}
              className={cn(
                "w-full justify-between h-8 transition-all",
                selectedSeller ? "pr-8" : "text-muted-foreground",
                disabled && "opacity-50 cursor-not-allowed"
              )}
            >
              {selectedSeller ? selectedSeller.name : placeholder}
              {selectedSeller ? null : (
                <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
              )}
            </Button>
          </PopoverTrigger>
          {selectedSeller && (
            <div 
              className="absolute right-0 top-0 h-full flex items-center pr-2"
              onClick={(e) => {
                e.stopPropagation();
                handleClearSelection();
              }}
            >
              <X className="h-4 w-4 cursor-pointer" />
              <span className="sr-only">Limpar seleção</span>
            </div>
          )}
          <PopoverContent className="min-w-[300px] p-0">
            <Command>
              <CommandInput
                ref={searchInputRef}
                placeholder="Buscar vendedor..."
                value={searchQuery}
                onValueChange={setSearchQuery}
                className="h-9"
              />
              {loading && (
                <div className="flex items-center justify-center py-6">
                  <Loader2 className="h-6 w-6 animate-spin text-gray-400" />
                </div>
              )}
              {!loading && (
                <>
                  <CommandEmpty>
                    {searchQuery.length >= 2
                      ? "Nenhum vendedor encontrado com esse nome"
                      : "Digite pelo menos 2 caracteres para buscar"}
                  </CommandEmpty>
                  {sellers.length > 0 && (
                    <CommandGroup heading="Vendedores">
                      <CommandList>
                        {sellers.map((seller) => (
                          <CommandItem
                            key={seller.id}
                            value={seller.name}
                            onSelect={() => handleSelectSeller(seller)}
                          >
                            <User className="mr-2 h-4 w-4" />
                            <span>{seller.name}</span>
                            {seller.code && (
                              <span className="ml-2 text-xs text-gray-500">
                                RCA: {seller.code}
                              </span>
                            )}
                          </CommandItem>
                        ))}
                      </CommandList>
                    </CommandGroup>
                  )}
                </>
              )}
            </Command>
          </PopoverContent>
        </Popover>
      </div>
    </div>
  );
 } 
--- a/src/components/orders/TV8DeliveriesSection.tsx
+++ b/src/components/orders/TV8DeliveriesSection.tsx
@@ -0,0 +1,313 @@
 import { useState, useEffect } from "react";
 import { Order, OrderDeliveryDto } from "../types";
 import { ordersApi } from "../../lib/api";
 import { formatDateToDisplay } from "../../utils/format-helpers";
 import { getDeliveryTypeLabel, getStatusColor, normalizeStatus, getStatusFromDeliveryType, STATUS_DEFAULT } from "./order-info-utils";
 import { 
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger
 } from "@/src/components/ui/accordion";
 import { Badge } from "@/src/components/ui/badge";
 import { Truck, Loader2 } from "lucide-react";
 interface TV8DeliveriesSectionProps {
  order: Order;
  initialDeliveries?: OrderDeliveryDto[];
 }
 /**
 * Função pura para buscar entregas do TV8 com retry e normalização de dados
 * @param orderId ID do pedido a ser consultado
 * @returns Array de entregas TV8 normalizadas ou um objeto de erro
 */
 export async function fetchAndNormalizeTV8Deliveries(orderId: string | number | undefined): Promise<{
  success: boolean;
  data: OrderDeliveryDto[];
  error?: string;
 }> {
  if (!orderId) {
    return { success: false, data: [], error: "ID do pedido não informado" };
  }
  try {
    // Formatar orderID corretamente
    const formattedOrderId = orderId.toString().trim();
    // Tentar dois endpoints diferentes
    let response;
    try {
      // Primeiro endpoint
      response = await ordersApi.getOrderDeliveries(formattedOrderId);
    } catch (err) {
      // Pequeno delay antes de tentar novamente
      await new Promise(resolve => setTimeout(resolve, 500));
      // Tentar URL alternativa diretamente
      try {
        const baseUrl = process.env.NEXT_PUBLIC_API_URL || "http://localhost:8888";
        const url = `${baseUrl}/api/v1/orders/${formattedOrderId}`;
        response = await fetch(url)
          .then(res => {
            if (!res.ok) {
              throw new Error(`Falha na requisição alternativa: ${res.status}`);
            }
            return res.json();
          });
      } catch (fetchErr: any) {
        console.error("Erro na requisição alternativa:", fetchErr);
        throw new Error(`Falha nas duas tentativas: ${fetchErr.message}`);
      }
    }
    // Função para normalizar um item de entrega
    const normalizeDeliveryItem = (item: any): OrderDeliveryDto => {
      const statusValue = item.status || getStatusFromDeliveryType(item.deliveryType) || STATUS_DEFAULT;
      return {
        ...item,
        status: normalizeStatus(statusValue)
      };
    };
    // Verificar formato da resposta e normalizar dados
    if (response && typeof response === 'object' && 'success' in response && 'data' in response) {
      if (Array.isArray(response.data) && response.data.length > 0) {
        // Garantir que o status está definido em cada item
        const normalizedData = response.data.map(normalizeDeliveryItem);
        return { success: true, data: normalizedData };
      }
    } else if (Array.isArray(response) && response.length > 0) {
      // Garantir que o status está definido em cada item
      const normalizedData = response.map(normalizeDeliveryItem);
      return { success: true, data: normalizedData };
    }
    // Se chegou aqui, não há dados
    return { success: true, data: [] };
  } catch (error: any) {
    console.error("Error fetching TV8 deliveries:", error);
    return { 
      success: false, 
      data: [], 
      error: error.message || "Falha ao carregar entregas TV8" 
    };
  }
 }
 /**
 * Componente para exibir a seção de entregas TV8
 * Faz requisição à API de TV8 e exibe os dados
 */
 export function TV8DeliveriesSection({ order, initialDeliveries = [] }: TV8DeliveriesSectionProps) {
  const [tv8Deliveries, setTv8Deliveries] = useState<OrderDeliveryDto[]>(initialDeliveries);
  const [isLoadingTv8, setIsLoadingTv8] = useState(false);
  const [tv8Error, setTv8Error] = useState("");
  // Dados de teste para TV8 em caso de falha na API
  const testTV8Data: OrderDeliveryDto[] = [
    {
      storeId: 6,
      createDate: new Date(),
      orderId: Number(order.orderId) || 1,
      orderIdSale: null,
      deliveryDate: new Date(),
      customerId: 12345,
      customer: order.customerName || "Cliente Teste",
      deliveryType: "Entrega (EF)",
      quantityItens: 5,
      status: "Pendente",
      weight: 10.5,
      shipmentId: 7001,
      driverId: 101,
      driverName: "FRANCISCO ANDRÉ O DE SOUZA",
      carPlate: "AAA-0000",
      carIdentification: "Carro 001",
      observation: "Observação de teste",
      deliveryConfirmationDate: null
    }
  ];
  const loadTestData = () => {
    setTv8Deliveries(testTV8Data);
    setIsLoadingTv8(false);
    setTv8Error("");
  };
  // Flag para controle de exibição
  const displayTV8Data = tv8Deliveries;
  useEffect(() => {
    async function loadTV8Deliveries() {
      if (!order.orderId) return;
      setIsLoadingTv8(true);
      setTv8Error("");
      const result = await fetchAndNormalizeTV8Deliveries(order.orderId);
      if (result.success) {
        setTv8Deliveries(result.data);
      } else {
        setTv8Error(result.error || "Falha ao carregar dados");
        setTv8Deliveries([]);
      }
      setIsLoadingTv8(false);
    }
    loadTV8Deliveries();
  }, [order.orderId]);
  return (
    <Accordion type="single" collapsible className="w-full">
      <AccordionItem value="tv8" className="border-0">
      <AccordionTrigger className="py-3 px-4 hover:no-underline">
  <div className="flex items-center">
    <Truck className="h-4 w-4 text-primary mr-2" />
    <h3 className="text-sm font-medium">TV8 - Entregas</h3>
    {isLoadingTv8 ? (
      <Badge variant="outline" className="ml-2 flex items-center gap-1">
        <Loader2 className="h-3 w-3 animate-spin" />
        <span>Carregando</span>
      </Badge>
    ) : tv8Error ? (
      <Badge variant="destructive" className="ml-2">
        Erro ao carregar
      </Badge>
    ) : (
      <Badge variant="outline" className="ml-2">
        {tv8Deliveries.length} {tv8Deliveries.length === 1 ? 'registro' : 'registros'}
      </Badge>
    )}
  </div>
 </AccordionTrigger>
        <AccordionContent className="px-2 sm:px-4 pb-4">
          <div className="overflow-x-auto -mx-2 sm:-mx-6">
            <div className="inline-block min-w-full align-middle">
              <div className="overflow-hidden">
                <table className="min-w-full divide-y divide-gray-200">
                  <thead>
                    <tr className="border-b bg-muted/50">
                      <th scope="col" className="p-2 whitespace-nowrap border-r border-gray-200 text-xs font-medium text-muted-foreground uppercase tracking-wider">Data</th>
                      <th scope="col" className="p-2 whitespace-nowrap border-r border-gray-200 text-xs font-medium text-muted-foreground uppercase tracking-wider">Filial</th>
                      <th scope="col" className="p-2 whitespace-nowrap border-r border-gray-200 text-xs font-medium text-muted-foreground uppercase tracking-wider">Pedido</th>
                      <th scope="col" className="p-2 whitespace-nowrap border-r border-gray-200 text-xs font-medium text-muted-foreground uppercase tracking-wider">Cliente</th>
                      <th scope="col" className="p-2 whitespace-nowrap border-r border-gray-200 text-xs font-medium text-muted-foreground uppercase tracking-wider">Status</th>
                      <th scope="col" className="p-2 whitespace-nowrap border-r border-gray-200 text-xs font-medium text-muted-foreground uppercase tracking-wider">Tipo Entrega</th>
                      <th scope="col" className="p-2 whitespace-nowrap border-r border-gray-200 text-xs font-medium text-muted-foreground uppercase tracking-wider">Data Entrega</th>
                      <th scope="col" className="p-2 whitespace-nowrap border-r border-gray-200 text-xs font-medium text-muted-foreground uppercase tracking-wider">Qtd Itens</th>
                      <th scope="col" className="p-2 whitespace-nowrap border-r border-gray-200 text-xs font-medium text-muted-foreground uppercase tracking-wider">Motorista</th>
                      <th scope="col" className="p-2 whitespace-nowrap border-r border-gray-200 text-xs font-medium text-muted-foreground uppercase tracking-wider">Veículo</th>
                      <th scope="col" className="p-2 whitespace-nowrap border-r border-gray-200 text-xs font-medium text-muted-foreground uppercase tracking-wider">Peso</th>
                      <th scope="col" className="p-2 whitespace-nowrap text-xs font-medium text-muted-foreground uppercase tracking-wider">Observação</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-gray-200">
                    {displayTV8Data.length > 0 ? (
                      displayTV8Data.map((item, index) => (
                        <tr key={`tv8-${index}`} className="hover:bg-muted/50 transition-colors odd:bg-white even:bg-gray-50">
                          <td className="p-2 whitespace-nowrap border-r border-gray-200 text-xs font-medium">{formatDateToDisplay(item.createDate)}</td>
                          <td className="p-2 whitespace-nowrap border-r border-gray-200 text-xs">{item.storeId}</td>
                          <td className="p-2 whitespace-nowrap border-r border-gray-200 text-xs">{item.orderId}</td>
                          <td className="p-2 whitespace-nowrap border-r border-gray-200 text-xs truncate max-w-64" title={item.customer}>{item.customer}</td>
                          <td className="p-2 whitespace-nowrap border-r border-gray-200 text-xs">
                            {item.status}
                          </td>
                          <td className="p-2 whitespace-nowrap border-r border-gray-200 text-xs">{getDeliveryTypeLabel(item.deliveryType)}</td>
                          <td className="p-2 whitespace-nowrap border-r border-gray-200 text-xs">{item.deliveryDate ? formatDateToDisplay(item.deliveryDate) : (item.deliveryConfirmationDate ? formatDateToDisplay(item.deliveryConfirmationDate) : "-")}</td>
                          <td className="p-2 whitespace-nowrap border-r border-gray-200 text-xs text-center">{item.quantityItens}</td>
                          <td className="p-2 whitespace-nowrap border-r border-gray-200 text-xs truncate max-w-64" title={item.driverName || "-"}>{item.driverName || "-"}</td>
                          <td className="p-2 whitespace-nowrap border-r border-gray-200 text-xs">{item.carIdentification || "-"}</td>
                          <td className="p-2 whitespace-nowrap border-r border-gray-200 text-xs text-right">{item.weight} kg</td>
                          <td className="p-2 whitespace-nowrap text-xs" title={item.observation || "-"}>{item.observation || "-"}</td>
                        </tr>
                      ))
                    ) : (
                      <tr>
                        <td colSpan={12} className="py-6 text-sm text-center text-muted-foreground italic">
                          <div className="flex flex-col items-center gap-2">
                            <Truck className="h-6 w-6 text-muted-foreground" />
                            Nenhum registro de TV8 disponível
                          </div>
                        </td>
                      </tr>
                    )}
                  </tbody>
                </table>
              </div>
              {/* Mobile view - Simplified list */}
              <div className="block md:hidden mt-4">
                {displayTV8Data.length > 0 ? (
                  <div className="space-y-3 px-1">
                    {displayTV8Data.map((item, index) => (
                      <div key={`tv8-mobile-${index}`} className="border rounded-md p-3 bg-white shadow-sm">
                        <div className="flex flex-wrap justify-between items-start gap-2 mb-3">
                          <div className="flex-1 min-w-0">
                            <Badge 
                              className={`${getStatusColor(normalizeStatus(item.status))} hover:${getStatusColor(normalizeStatus(item.status))} border-0 mb-2 font-semibold text-white px-2 py-0.5 inline-flex`}
                              variant="outline"
                            >
                              {normalizeStatus(item.status)}
                            </Badge>
                            <div className="text-xs font-medium truncate">{formatDateToDisplay(item.createDate)}</div>
                          </div>
                          <div className="text-xs font-medium text-right">
                            <div className="mb-1">Pedido: {item.orderId}</div>
                            <div>{item.quantityItens} {item.quantityItens === 1 ? 'item' : 'itens'}</div>
                          </div>
                        </div>
                        <div className="grid grid-cols-1 gap-2 text-xs">
                          <div className="flex items-center justify-between border-b border-gray-100 pb-1.5">
                            <span className="text-muted-foreground">Cliente:</span>
                            <span className="font-medium truncate max-w-[180px]">{item.customer}</span>
                          </div>
                          <div className="flex items-center justify-between border-b border-gray-100 pb-1.5">
                            <span className="text-muted-foreground">Motorista:</span>
                            <span className="font-medium truncate max-w-[180px]">{item.driverName || "Não informado"}</span>
                          </div>
                          <div className="flex items-center justify-between border-b border-gray-100 pb-1.5">
                            <span className="text-muted-foreground">Tipo:</span>
                            <span className="font-medium">{getDeliveryTypeLabel(item.deliveryType)}</span>
                          </div>
                          <div className="flex items-center justify-between">
                            <span className="text-muted-foreground">Peso:</span>
                            <span className="font-medium">{item.weight} kg</span>
                          </div>
                          {item.observation && (
                            <div className="mt-1 pt-1 border-t border-gray-100">
                              <div className="text-muted-foreground mb-1">Observação:</div>
                              <div className="bg-gray-50 p-1.5 rounded text-xs">{item.observation}</div>
                            </div>
                          )}
                        </div>
                      </div>
                    ))}
                  </div>
                ) : (
                  <div className="py-6 text-sm text-center text-muted-foreground italic">
                    <div className="flex flex-col items-center gap-2">
                      <Truck className="h-6 w-6 text-muted-foreground" />
                      Nenhum registro de TV8 disponível
                    </div>
                  </div>
                )}
              </div>
            </div>
          </div>
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  );
 } 
--- a/src/components/orders/order-info-utils.ts
+++ b/src/components/orders/order-info-utils.ts
@@ -0,0 +1,133 @@
 import { STATUS_COLORS, DELIVERY_TYPE_MAP } from "../../constants/status-options";
 import {
  Clock,
  FileText,
  Package,
  Truck,
  CheckCircle,
  AlertTriangle,
  XCircle,
  Clipboard,
  SplitSquareVertical,
  CheckSquare,
  Search,
  CreditCard,
 } from "lucide-react"
 import type { LucideIcon } from "lucide-react"
 // Status padrão para quando não vier status da API
 export const STATUS_DEFAULT = "PENDENTE";
 /**
 * Função para obter a cor do status
 */
 export const getStatusColor = (status: string | undefined): string => {
  if (!status) return "bg-white-400";
  return STATUS_COLORS[status.toLowerCase()] || "bg-white-400";
 };
 export const STATUS_ICONS: Record<string, LucideIcon> = {
  "Digitação pedido": Clipboard,
  "Montagem de carga": Package,
  "emissão do mapa": FileText,
  "início de separação": SplitSquareVertical,
  "fim de separação": CheckSquare,
  "início conferência": Search,
  "fim conferência": CheckCircle,
  faturamento: CreditCard,
  "entrega realizada": Truck,
  pendente: AlertTriangle,
  cancelado: XCircle,
  default: Clock,
 }
 /**
 * Normaliza o status para o formato padrão
 * Garante consistência na apresentação entre diferentes APIs
 */
 export function getStatusIcon(status: string): LucideIcon {
  if (!status) return Clock
  const normalizedStatus = normalizeStatus(status)
  return STATUS_ICONS[normalizedStatus] || STATUS_ICONS.default
 }
 /**
 * Normaliza o status para um formato padrão
 * @param status - Status a ser normalizado
 * @returns Status normalizado em maiúsculas ou "NÃO DEFINIDO" para valores inválidos
 */
 export function normalizeStatus(status: string | undefined | null): string {
  if (!status || status.trim() === "") {
    return "NÃO DEFINIDO";
  }
  return status.trim().toUpperCase();
 }
 /**
 * Mapeia o tipo de entrega para um status apropriado
 * Usado quando status não está disponível, mas podemos inferir pelo tipo
 */
 export function getStatusFromDeliveryType(deliveryType: string | null | undefined): string | null {
  if (!deliveryType) return null;
  const type = deliveryType.toUpperCase();
  // Se for RP (Retira posterior), usamos isso como status
  if (type === 'RP') return 'RP';
  return null;
 }
 /**
 * Retorna um label legível para o tipo de entrega com base no código
 */
 export function getDeliveryTypeLabel(code: string | null | undefined): string {
  if (!code) return "-";
  return DELIVERY_TYPE_MAP[code] || code;
 }
 /**
 * Formata o texto da movimentação de status
 * Adiciona descrições personalizadas para diferentes status
 */
 export function formatStatusMovement(status: string | null | undefined): string {
  if (!status) return STATUS_DEFAULT;
  const normalizedStatus = normalizeStatus(status);
  // Mapeamento de status para descrições mais amigáveis
  const movementDescriptions: Record<string, string> = {
    'PENDENTE': 'Pedido pendente',
    'LIBERADO': 'Pedido liberado para separação',
    'BLOQUEADO': 'Bloqueio de pedido',
    'MONTADO': 'Pedido montado/separado',
    'FATURADO': 'Pedido faturado',
    'CANCELADO': 'Pedido cancelado',
    'ENTREGUE': 'Pedido entregue',
    'EM SEPARAÇÃO': 'Separação iniciada',
    'EM TRANSPORTE': 'Pedido em transporte',
    'AGUARDANDO SEPARAÇÃO': 'Aguardando separação',
    'PENDENTE ESTOQUE': 'Pendente de estoque',
    'BLOQUEIO FINANCEIRO': 'Bloqueio financeiro',
    'ENTREGA': 'ENTREGA REALIZADA',
    'SEPARADO': 'Pedido separado'
  };
  return movementDescriptions[normalizedStatus] || normalizedStatus;
 }
 /**
 * Enum para as chaves de abas
 */
 export enum TabKey {
  Info = "info",
  Itens = "itens",
  Entrega = "entrega",
  Cortes = "Cortes",
  Transferencia = "transferencia",
  Status = "status",
  TV8 = "tv8",
  Checkout = "checkout"
 }
--- a/src/components/orders/tabela-pedidos/components/OrderRowExpandable.tsx
+++ b/src/components/orders/tabela-pedidos/components/OrderRowExpandable.tsx
@@ -0,0 +1,94 @@
 /**
 * @file OrderRowExpandable.tsx
 * @description Componente de linha expandível para exibição de pedidos na tabela, com renderização dinâmica de colunas e link para detalhes.
 */
 import React from "react";
 import { useSearchParams, usePathname } from "next/navigation";
 import { TableCell, TableRow } from "@/src/components/ui/table";
 import { createSearchParams, buildUrl } from "@/src/utils/url-helpers";
 import { Order, OrderItem } from "@/src/components/types";
 import { orderCellRenderers } from "./cell-renderers";
 import { columnClasses } from "../domain/column-classes";
 import { OrderColumn } from "../domain/order-columns";
 /**
 * Props para o componente OrderRowExpandable.
 *
 * @property {Order} order - Objeto do pedido que será exibido na linha.
 * @property {boolean} isSelected - Define se a linha está atualmente selecionada.
 * @property {(orderId: string) => void} onSelect - Função chamada ao clicar na linha, passando o ID do pedido.
 * @property {OrderItem[]} orderItems - Itens do pedido, usados em expansão (não utilizados diretamente aqui).
 * @property {boolean} loadingItems - Indica se os itens do pedido estão sendo carregados (não utilizados diretamente aqui).
 * @property {string | null} itemsError - Erro de carregamento de itens, se houver (não utilizado diretamente aqui).
 * @property {string[]} [visibleColumns] - Lista de colunas visíveis na tabela.
 */
 interface Props {
  order: Order;
  isSelected: boolean;
  onSelect: (orderId: string) => void;
  orderItems: OrderItem[];
  loadingItems: boolean;
  itemsError: string | null;
  visibleColumns?: string[];
 }
 /**
 * Componente responsável por renderizar uma linha da tabela de pedidos com colunas dinâmicas.
 * 
 * @param {Props} props - Propriedades do componente.
 * @returns {JSX.Element} Linha da tabela renderizada com base nas colunas visíveis.
 */
 export function OrderRowExpandable({
  order,
  isSelected,
  onSelect,
  visibleColumns = [],
 }: Props) {
  const searchParams = useSearchParams();
  const pathname = usePathname();
  // Parâmetros para retornar à tela atual após visualizar detalhes
  const detailParams = createSearchParams(searchParams, [], {
    from: "lista",
    returnPath: pathname,
  });
  // URL de detalhes do pedido
  const detailUrl = buildUrl(`/orders/${order.orderId}`, detailParams);
  /**
   * Subcomponente responsável por renderizar uma célula da tabela de acordo com a coluna especificada.
   *
   * @param {{ column: string }} props - Nome da coluna a ser renderizada.
   * @returns {JSX.Element | null} Célula renderizada ou `null` se a coluna não for reconhecida.
   */
  const OrderCell = ({ column }: { column: string }) => {
    const orderColumn = column as OrderColumn;
    const Renderer = orderCellRenderers[orderColumn];
    if (!Renderer) return null;
    return (
      <TableCell className={columnClasses[orderColumn]}>
        <Renderer order={order} detailUrl={detailUrl} />
      </TableCell>
    );
  };
  return (
    <TableRow
      className={`hover:bg-gray-100 text-xs ${isSelected ? "bg-blue-50" : "odd:bg-white even:bg-gray-50"}`}
      onClick={(e) => {
        // Permite seleção de texto, apenas aciona o clique se não estiver selecionando texto
        if (window.getSelection()?.toString()) {
          return;
        }
        onSelect(order.orderId);
      }}
    >
      {visibleColumns.map(column => (
        <OrderCell key={column} column={column} />
      ))}
    </TableRow>
  );
 }
--- a/src/components/orders/tabela-pedidos/components/cell-renderers.tsx
+++ b/src/components/orders/tabela-pedidos/components/cell-renderers.tsx
@@ -0,0 +1,92 @@
 /**
 * @file cell-renderers.tsx
 * @description Renderizadores personalizados para cada coluna de pedidos na tabela de pedidos.
 */
 import { OrderColumn } from "../domain/order-columns";
 import { formatDateSafe } from "@/src/utils/date-helpers";
 import { formatCurrency } from "@/src/utils/format-helpers";
 import { getOrderStatusClass } from "../domain/order-status";
 import { Button } from "@/src/components/ui/button";
 import { Order } from "../../../../components/types";
 import { Eye } from "lucide-react";
 import Link from "next/link";
 /**
 * Props utilizadas pelos renderizadores de célula da tabela de pedidos.
 * 
 * @property {Order} order - Objeto de pedido com os dados a serem renderizados.
 * @property {string} detailUrl - URL para a visualização detalhada do pedido.
 * @property {any[]} stores - Lista de lojas associadas ao pedido.
 */
 interface CellRenderProps {
  order: Order;
  detailUrl?: string;
  stores?: any[];
 }
 /**
 * Mapeia cada coluna da tabela de pedidos para um componente React responsável por renderizar seu conteúdo.
 * 
 * @type {Record<OrderColumn, React.FC<CellRenderProps>>}
 */
 export const orderCellRenderers: Record<OrderColumn, React.FC<CellRenderProps>> = {
  [OrderColumn.Date]: ({ order }) => <>{formatDateSafe(order.createDate)}</>,
  [OrderColumn.OrderId]: ({ order, detailUrl }) => (
    <div className="flex items-center justify-between w-full">
      <span className="text-sm">{order.orderId}</span>
      <Link href={`/orders/${order.orderId}`} passHref>
        <Button
          variant="ghost"
          size="icon"
          className="h-5 w-5 text-muted-foreground"
          onClick={(e) => e.stopPropagation()}
          title="Ver detalhes do pedido"
          aria-label="Ver detalhes do pedido"
        >
          <Eye className="h-4 w-4" />
        </Button>
      </Link>
    </div>
  ),
  [OrderColumn.Branch]: ({ order }) => {
    // If we have a store value, display it
    if (order.store) {
      // Just show the store name 
      return <>{order.store}</>;
    }
    // Fallback if we only have storeId
    return <>{order.storeId ? order.storeId : "Desconhecida"}</>;
  },
  [OrderColumn.OrderType]: ({ order }) => <>{order.orderType}</>,
  [OrderColumn.TV7]: ({ order }) => <>{order.orderSaleId}</>,
  [OrderColumn.Customer]: ({ order }) => <>{order.customerName}</>,
  [OrderColumn.Seller]: ({ order }) => <>{order.sellerName}</>,
  [OrderColumn.Status]: ({ order }) => (
    <div className={getOrderStatusClass(order.status)}>
      {order.status}
    </div>
  ),
  [OrderColumn.Route]: ({ order }) => (
    <div className={getOrderStatusClass(order.masterDeliveryLocal)}>
      {order.masterDeliveryLocal}
    </div>
  ),
  [OrderColumn.Value]: ({ order }) => <>{formatCurrency(order.amount || 0)}</>,
  [OrderColumn.Weight]: ({ order }) => <>{order.totalWeigth}</>,
  [OrderColumn.Shipment]: ({ order }) => <>{order.shipmentId}</>,
  [OrderColumn.Billing]: ({ order }) => <>{order.billingName}</>,
  [OrderColumn.Carrier]: ({ order }) => <>{order.carrier}</>,
  [OrderColumn.Place]: ({ order }) => <>{order.deliveryLocal}</>,
  [OrderColumn.Invoice]: ({ order }) => <>{order.invoiceNumber}</>,
  [OrderColumn.InvoiceDate]: ({ order }) => <>{formatDateSafe(order.invoiceDate)}</>,
  [OrderColumn.DeliveryDate]: ({ order }) => <>{order.deliveryDate ? formatDateSafe(order.deliveryDate) : "-"}</>,
  [OrderColumn.SchedulerDelivery]: ({ order }) => <>{order.schedulerDelivery || "-"}</>,
 };
--- a/src/components/orders/tabela-pedidos/domain/column-classes.ts
+++ b/src/components/orders/tabela-pedidos/domain/column-classes.ts
@@ -0,0 +1,24 @@
 // src/components/orders/column-classes.ts
 import { OrderColumn } from "./order-columns";
 export const columnClasses: Record<OrderColumn, string> = {
  [OrderColumn.Date]: "p-2 whitespace-nowrap border-r border-gray-200 text-xs",
  [OrderColumn.SchedulerDelivery]: "p-2 whitespace-nowrap border-r border-gray-200 text-xs",
  [OrderColumn.OrderId]: "font-medium p-2 whitespace-nowrap border-r border-gray-200 text-xs",
  [OrderColumn.Branch]: "p-2 whitespace-nowrap border-r border-gray-200 text-xs",
  [OrderColumn.OrderType]: "p-2 whitespace-nowrap border-r border-gray-200 text-xs",
  [OrderColumn.TV7]: "p-2 whitespace-nowrap border-r border-gray-200 text-xs",
  [OrderColumn.Customer]: "p-2 whitespace-nowrap max-w-xs truncate border-r border-gray-200 text-xs",
  [OrderColumn.Seller]: "p-2 whitespace-nowrap border-r border-gray-200 text-xs",
  [OrderColumn.Status]: "p-2 whitespace-nowrap border-r border-gray-200 text-xs",
  [OrderColumn.Route]: "p-2 whitespace-nowrap border-r border-gray-200 text-xs",
  [OrderColumn.Value]: "p-2 whitespace-nowrap text-right border-r border-gray-200 text-xs",
  [OrderColumn.Weight]: "p-2 whitespace-nowrap text-right border-r border-gray-200 text-xs",
  [OrderColumn.Shipment]: "p-2 whitespace-nowrap border-r border-gray-200 text-xs",
  [OrderColumn.Billing]: "p-2 whitespace-nowrap border-r border-gray-200 text-xs",
  [OrderColumn.Carrier]: "p-2 whitespace-nowrap border-r border-gray-200 text-xs",
  [OrderColumn.Place]: "p-2 whitespace-nowrap border-r border-gray-200 text-xs",
  [OrderColumn.Invoice]: "p-2 whitespace-nowrap border-r border-gray-200 text-xs",
  [OrderColumn.InvoiceDate]: "p-2 whitespace-nowrap border-r border-gray-200 text-xs",
  [OrderColumn.DeliveryDate]: "p-2 whitespace-nowrap border-r border-gray-200 text-xs",
 };
--- a/src/components/orders/tabela-pedidos/domain/order-columns.ts
+++ b/src/components/orders/tabela-pedidos/domain/order-columns.ts
@@ -0,0 +1,24 @@
 // src/components/orders/order-columns.ts
 export enum OrderColumn {
    Date = "Data",
    DeliveryDate = "Data previsão de entrega",
    SchedulerDelivery = "Agendamento",
    OrderId = "Pedido",
    Branch = "Filial",
    OrderType = "Tipo Pedido",
    TV7 = "TV 7",
    Customer = "Cliente",
    Seller = "Vendedor",
    Status = "Situação",
    Route = "Rota",
    Value = "Valor",
    Weight = "Peso(kg)",
    Shipment = "Carregamento",
    Billing = "Cobrança",
    Carrier = "Trasportadora",
    Place = "Praça",
    Invoice = "Nota fiscal",
    InvoiceDate = "Dt Faturamento"
  }
--- a/src/components/orders/tabela-pedidos/domain/order-status.ts
+++ b/src/components/orders/tabela-pedidos/domain/order-status.ts
@@ -0,0 +1,36 @@
 /**
 * Retorna a classe CSS apropriada para o status do pedido
 * @param status Status do pedido
 * @returns Classe CSS para estilização do status
 */
 export function getOrderStatusClass(status: string | undefined | null): string {
  if (!status) return "text-gray-500";
  const normalizedStatus = status.trim().toUpperCase();
  switch (normalizedStatus) {
    case "PENDENTE":
    case "AGUARDANDO":
    case "EM ANÁLISE":
      return "text-yellow-600";
    case "LIBERADO":
    case "EM SEPARAÇÃO":
    case "SEPARADO":
    case "MONTADO":
      return "text-blue-600";
    case "FATURADO":
    case "ENTREGUE":
    case "FINALIZADO":
      return "text-green-600";
    case "CANCELADO":
    case "BLOQUEADO":
    case "BLOQUEIO FINANCEIRO":
      return "text-red-600";
    default:
      return "text-gray-600";
  }
 } 
--- a/src/components/orders/tabs/CheckoutTab.tsx
+++ b/src/components/orders/tabs/CheckoutTab.tsx
@@ -0,0 +1,128 @@
 "use client";
 import { useState, useEffect } from "react";
 import { ordersApi } from "@/src/lib/api";
 import { Order, CheckoutData } from "@/src/components/types";
 import {
  Alert,
  AlertDescription,
  AlertTitle,
 } from "@/src/components/ui/alert";
 import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
 } from "@/src/components/ui/table";
 import { Loader2, AlertTriangle } from "lucide-react";
 import { formatDateToDisplay } from "@/src/utils/format-helpers";
 interface CheckoutTabProps {
  order: Order;
 }
 export function CheckoutTab({ order }: CheckoutTabProps) {
  const [checkoutData, setCheckoutData] = useState<CheckoutData | null>(null);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  useEffect(() => {
    if (!order.orderId) return;
    const fetchCheckoutData = async () => {
      setIsLoading(true);
      setError(null);
      try {
        const response = await ordersApi.findOrders({
          orderId: order.orderId.toString(),
          includeCheckout: true,
        });
        if (response.data && response.data.length > 0 && response.data[0].checkout) {
          setCheckoutData(response.data[0].checkout);
        } else {
          setCheckoutData(null);
        }
      } catch (err) {
        setError("Falha ao buscar informações de checkout.");
        console.error(err);
        setCheckoutData(null);
      } finally {
        setIsLoading(false);
      }
    };
    fetchCheckoutData();
  }, [order.orderId]);
  if (isLoading) {
    return (
      <div className="flex items-center justify-center p-4">
        <Loader2 className="h-6 w-6 animate-spin" />
        <span className="ml-2">Carregando informações de checkout...</span>
      </div>
    );
  }
  if (error) {
    return (
      <Alert variant="destructive">
        <AlertTriangle className="h-4 w-4" />
        <AlertTitle>Erro</AlertTitle>
        <AlertDescription>{error}</AlertDescription>
      </Alert>
    );
  }
  if (!checkoutData) {
    return (
      <div className="text-center text-muted-foreground p-4">
        Caixa não acertado
      </div>
    );
  }
  return (
    <div className="w-full">
      {/* Tabela no estilo da interface */}
      <div className="border rounded-lg overflow-hidden bg-white">
        <Table>
          <TableHeader>
            <TableRow className="bg-gray-50">
              <TableHead className="text-xs font-medium text-gray-600 px-4 py-3 border-r">
                Caixa
              </TableHead>
              <TableHead className="text-xs font-medium text-gray-600 px-4 py-3 border-r">
                Funcionário do Caixa
              </TableHead>
              <TableHead className="text-xs font-medium text-gray-600 px-4 py-3 border-r">
                Data de Fechamento
              </TableHead>
              <TableHead className="text-xs font-medium text-gray-600 px-4 py-3">
                Acerto Caixa
              </TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            <TableRow className="hover:bg-gray-50">
              <TableCell className="px-4 py-3 text-sm border-r font-medium">
                {checkoutData.CAIXA ?? "—"}
              </TableCell>
              <TableCell className="px-4 py-3 text-sm border-r">
                {checkoutData.NOME_FUNCIONARIO_CAIXA ?? "—"}
              </TableCell>
              <TableCell className="px-4 py-3 text-sm border-r">
                {checkoutData.DATA_FECHAMENTO ? formatDateToDisplay(checkoutData.DATA_FECHAMENTO) : "—"}
              </TableCell>
              <TableCell className="px-4 py-3 text-sm">
                {checkoutData.NOME_ACERTO_MOTORISTA ?? "—"}
              </TableCell>
            </TableRow>
          </TableBody>
        </Table>
      </div>
    </div>
  );
 }
--- a/src/components/orders/tabs/CortesTab.tsx
+++ b/src/components/orders/tabs/CortesTab.tsx
@@ -0,0 +1,342 @@
 import { Scissors, GripVertical } from "lucide-react";
 import { cutitens } from "../../types";
 import { useState, useEffect } from "react";
 import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
 } from "@/src/components/ui/table";
 import { Button } from "@/src/components/ui/button";
 import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuLabel,
  DropdownMenuTrigger,
  DropdownMenuCheckboxItem,
 } from "@/src/components/ui/dropdown-menu";
 const ALL_COLUMNS = [
  "Código",
  "Descrição",
  "Embalagem",
  "F. Estoque",
  "Qtde Vendida",
  "Qtde Corte",
 ];
 interface CortesTabProps {
  cutitens: cutitens[];
 }
 export function CortesTab({ cutitens = [] }: CortesTabProps) {
  // Carregar as colunas visíveis do localStorage na inicialização
  const initVisibleColumns = () => {
    try {
      const saved = localStorage.getItem('visibleCutItemColumns');
      if (saved) {
        const parsed = JSON.parse(saved);
        if (Array.isArray(parsed) && parsed.length > 0) {
          return parsed;
        }
      }
    } catch (error) {
      console.error('Erro ao carregar configurações de colunas:', error);
    }
    return ALL_COLUMNS;
  };
  // Inicializar a ordem das colunas
  const initColumnOrder = () => {
    try {
      const saved = localStorage.getItem('cutItemColumnsOrder');
      if (saved) {
        const parsed = JSON.parse(saved);
        if (Array.isArray(parsed) && parsed.length > 0) {
          return parsed;
        }
      }
    } catch (error) {
      console.error('Erro ao carregar ordem das colunas:', error);
    }
    return ALL_COLUMNS;
  };
  // Estado para controlar quais colunas estão visíveis
  const [visibleColumns, setVisibleColumns] = useState<string[]>(initVisibleColumns);
  // Estado para controlar a ordem das colunas
  const [columnOrder, setColumnOrder] = useState<string[]>(initColumnOrder);
  // Estado para rastrear coluna sendo arrastada
  const [draggedColumn, setDraggedColumn] = useState<string | null>(null);
  // Salvar as colunas visíveis no localStorage sempre que elas mudarem
  useEffect(() => {
    try {
      localStorage.setItem('visibleCutItemColumns', JSON.stringify(visibleColumns));
    } catch (error) {
      console.error('Erro ao salvar configurações de colunas:', error);
    }
  }, [visibleColumns]);
  // Salvar a ordem das colunas no localStorage
  useEffect(() => {
    try {
      localStorage.setItem('cutItemColumnsOrder', JSON.stringify(columnOrder));
    } catch (error) {
      console.error('Erro ao salvar ordem das colunas:', error);
    }
  }, [columnOrder]);
  // Função para alternar a visibilidade de uma coluna
  const toggleColumn = (column: string) => {
    setVisibleColumns((current) => {
      if (current.includes(column)) {
        return current.filter((c) => c !== column);
      } else {
        return [...current, column];
      }
    });
  };
  // Função para selecionar todas as colunas
  const selectAllColumns = () => {
    setVisibleColumns(ALL_COLUMNS);
  };
  // Função para desmarcar todas as colunas
  const unselectAllColumns = () => {
    // Mantém pelo menos uma coluna para garantir que a tabela não fique vazia
    setVisibleColumns(["Código"]);
  };
  // Função para verificar se uma coluna está visível
  const isColumnVisible = (column: string) => visibleColumns.includes(column);
  const handleDragStart = (e: React.DragEvent<HTMLDivElement>, column: string) => {
    setDraggedColumn(column);
    // captura o elemento _de verdade_ num let
    const dragEl = e.currentTarget;
    e.dataTransfer.effectAllowed = 'move';
    e.dataTransfer.setData('text/plain', column);
    // agora não depende mais do React.Event
    setTimeout(() => {
      dragEl.classList.add('opacity-50');
    }, 0);
  };
  const handleDragEnd = (e: React.DragEvent<HTMLDivElement>) => {
    // e.currentTarget aqui é síncrono, mas você pode usar dragEl se quiser simetria
    e.currentTarget.classList.remove('opacity-50');
    setDraggedColumn(null);
  };
  const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
    e.preventDefault();
    e.dataTransfer.dropEffect = 'move';
  };
  const handleDrop = (e: React.DragEvent<HTMLDivElement>, targetColumn: string) => {
    e.preventDefault();
    if (!draggedColumn || draggedColumn === targetColumn) return;
    // Reordenar as colunas
    const newColumnOrder = [...columnOrder];
    const draggedIndex = newColumnOrder.indexOf(draggedColumn);
    const targetIndex = newColumnOrder.indexOf(targetColumn);
    if (draggedIndex !== -1 && targetIndex !== -1) {
      newColumnOrder.splice(draggedIndex, 1);
      newColumnOrder.splice(targetIndex, 0, draggedColumn);
      setColumnOrder(newColumnOrder);
    }
  };
  const getColumnClass = (title: string) => {
    const textRight = ["Qtde Vendida", "Qtde Corte"];
    const cellWidth: { [key: string]: string } = {
      "Código": "w-20",
      "Descrição": "w-60",
      "Embalagem": "w-24",
      "F. Estoque": "w-24",
      "Qtde Vendida": "w-28",
      "Qtde Corte": "w-28",
    };
    let classes = "whitespace-nowrap ";
    // Alinhar à direita
    if (textRight.includes(title)) {
      classes += "text-right ";
    }
    // Aplicar larguras
    if (cellWidth[title]) {
      classes += cellWidth[title] + " ";
    }
    return classes;
  };
  // Função para ordenar as colunas visíveis na ordem definida pelo usuário
  const getOrderedVisibleColumns = () => {
    // Primeiro, filtrar as colunas que são visíveis
    const visibleColumnSet = new Set(visibleColumns);
    // Depois, ordenar as colunas de acordo com a ordem definida pelo usuário
    return columnOrder.filter(column => visibleColumnSet.has(column));
  };
  // Resetar a ordem das colunas
  const resetColumnOrder = () => {
    setColumnOrder(ALL_COLUMNS);
  };
  const orderedVisibleColumns = getOrderedVisibleColumns();
  return (
    <div className="rounded-md border-0 mt-0">
      <div className="flex justify-end mb-3 gap-1">
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
          </DropdownMenuTrigger>
          <DropdownMenuContent className="w-60 p-2.5 bg-white shadow-lg border border-gray-200">
            <DropdownMenuLabel className="text-sm font-bold pb-2.5 mb-2.5 border-b border-gray-200">Visibilidade das Colunas</DropdownMenuLabel>
            <div className="flex justify-between mb-2.5 border-b pb-2.5">
              <Button
                variant="ghost"
                size="sm"
                onClick={selectAllColumns}
                className="text-xs h-8 hover:bg-gray-100 px-3"
              >
                Marcar Todas
              </Button>
              <Button
                variant="ghost"
                size="sm"
                onClick={unselectAllColumns}
                className="text-xs h-8 hover:bg-gray-100 px-3"
              >
                Desmarcar Todas
              </Button>
            </div>
            <div className="max-h-[300px] overflow-y-auto py-1">
              {ALL_COLUMNS.map((column) => (
                <DropdownMenuCheckboxItem
                  key={column}
                  checked={isColumnVisible(column)}
                  onCheckedChange={() => toggleColumn(column)}
                  className="flex items-center space-x-2 cursor-pointer py-2 hover:bg-gray-100 px-3 rounded"
                >
                  <div className="flex items-center gap-2.5 text-sm">
                    {column}
                  </div>
                </DropdownMenuCheckboxItem>
              ))}
            </div>
          </DropdownMenuContent>
        </DropdownMenu>
      </div>
      {cutitens.length === 0 ? (
        <div className="flex flex-col items-center gap-3 py-8">
          <Scissors className="h-8 w-8 text-gray-400" />
          <span className="text-gray-400 italic">Nenhum item de corte disponível</span>
        </div>
      ) : (
        <div className="border border-gray-300 rounded-sm">
          <div className="overflow-x-auto">
            <div className="max-h-[400px] overflow-y-auto">
              <Table className="border-collapse border-gray-200">
                <TableHeader className="sticky top-0 z-10 bg-white border-b border-gray-200">
                  <TableRow className="hover:bg-transparent">
                    {orderedVisibleColumns.map((title, index, array) => (
                      <TableHead
                        key={index}
                        className={`text-xs font-medium text-gray-600 p-3 ${getColumnClass(title)} ${
                          index < array.length - 1 ? "border-r border-gray-200" : ""
                        } relative`}
                        draggable={true}
                        onDragStart={(e) => handleDragStart(e, title)}
                        onDragEnd={handleDragEnd}
                        onDragOver={handleDragOver}
                        onDrop={(e) => handleDrop(e, title)}
                      >
                        <div className="flex items-center">
                          <GripVertical className="h-3.5 w-3.5 mr-1.5 cursor-move text-gray-400" />
                          {title}
                        </div>
                      </TableHead>
                    ))}
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {cutitens.map((item, index) => (
                    <TableRow
                      key={`corte-${index}`}
                      className="odd:bg-white even:bg-gray-50 hover:bg-gray-100"
                    >
                      {orderedVisibleColumns.map((columnName, colIndex) => {
                        switch (columnName) {
                          case "Código":
                            return (
                              <TableCell key={colIndex} className="border-r border-gray-200 p-2.5 text-xs font-medium">
                                {item.productId ?? "-"}
                              </TableCell>
                            );
                          case "Descrição":
                            return (
                              <TableCell key={colIndex} className="border-r border-gray-200 p-2.5 text-xs" title={item.description}>
                                {item.description ?? "-"}
                              </TableCell>
                            );
                          case "Embalagem":
                            return (
                              <TableCell key={colIndex} className="border-r border-gray-200 p-2.5 text-xs">
                                {item.pacth ?? "-"}
                              </TableCell>
                            );
                          case "F. Estoque":
                            return (
                              <TableCell key={colIndex} className="border-r border-gray-200 p-2.5 text-xs">
                                {item.stockId ?? "-"}
                              </TableCell>
                            );
                          case "Qtde Vendida":
                            return (
                              <TableCell key={colIndex} className="border-r border-gray-200 p-2.5 text-right text-xs">
                                {item.saleQuantity ?? "-"}
                              </TableCell>
                            );
                          case "Qtde Corte":
                            return (
                              <TableCell key={colIndex} className="p-2.5 text-right text-xs">
                                {item.cutQuantity && item.cutQuantity > 0 ? (
                                  <span className="px-2.5 py-1.5 text-xs font-medium rounded-full bg-red-100 text-red-800">
                                    {item.cutQuantity}
                                  </span>
                                ) : (
                                  <span className="text-gray-400">-</span>
                                )}
                              </TableCell>
                            );
                          default:
                            return null;
                        }
                      })}
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </div>
          </div>
        </div>
      )}
    </div>
  );
 }
--- a/src/components/orders/tabs/EntregaTab.tsx
+++ b/src/components/orders/tabs/EntregaTab.tsx
@@ -0,0 +1,121 @@
 import { Order, OrderDelivery } from "../../types";
 import { InfoCard } from "../InfoCard";
 import { 
  Card, 
  CardHeader, 
  CardContent 
 } from "@/src/components/ui/card";
 import { 
  Info, 
  Truck, 
  User, 
  MapPin 
 } from "lucide-react";
 interface EntregaTabProps {
  order: Order;
  delivery: OrderDelivery;
 }
 /**
 * Componente para a aba de Entrega
 * Exibe dados relacionados à entrega e observações
 */
 export function EntregaTab({ order, delivery }: EntregaTabProps) {
  // Filtrar comentários válidos - apenas comentários de entrega
  const rawComments = [
    delivery.commentDelivery1,
    delivery.commentDelivery2,
    delivery.commentDelivery3,
    delivery.commentDelivery4,
  ];
  const comments = rawComments.filter((c) => c?.trim());
  const hasComments = comments.length > 0;
  return (
    <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
      <div className="space-y-4">
        <Card className="bg-muted/50">
          <CardHeader className="p-3">
            <div className="flex items-center gap-2">
              <Info className="h-4 w-4 text-muted-foreground" />
              <h4 className="text-sm font-medium">Observações de Entrega</h4>
            </div>
          </CardHeader>
          <CardContent className="p-1 pt-0">
            {hasComments ? (
                <div className="space-y-2">
                  {comments
                      .filter((c) => {
                        const trimmed = c.trim().toLowerCase();
                        return trimmed !== "null" && trimmed !== "";
                      })
                      .map((c, i) => {
                        const trimmed = c.trim();
                        return (
                            <div key={i} className="text-sm bg-white p-3 rounded-md border">
                              {trimmed}
                            </div>
                        );
                      })}
                </div>
            ) : (
              <p className="text-sm text-muted-foreground italic">
                Nenhuma observação de entrega disponível
              </p>
            )}
          </CardContent>
        </Card>
      </div>
      <div className="space-y-4">
        <Card className="bg-muted/50">
          <CardHeader className="p-3">
            <div className="flex items-center gap-2">
              <Truck className="h-4 w-4 text-muted-foreground" />
              <h4 className="text-sm font-medium">Informações de Entrega</h4>
            </div>
          </CardHeader>
          <CardContent className="p-3 pt-0 space-y-3">
            <div className="grid grid-cols-2 gap-2">
              <InfoCard
                title="Motorista"
                value={order.driver || "Não informado"}
                icon={<User className="h-4 w-4 text-muted-foreground" />}
              />
              <InfoCard
                title="Veículo"
                value={delivery.car || "Não informado"}
                icon={<Truck className="h-4 w-4 text-muted-foreground" />}
              />
            </div>
          </CardContent>
        </Card>
        <Card className="bg-muted/50">
          <CardHeader className="p-3">
            <div className="flex items-center gap-2">
              <MapPin className="h-4 w-4 text-muted-foreground" />
              <h4 className="text-sm font-medium">Endereço de Entrega</h4>
            </div>
          </CardHeader>
          <CardContent className="p-3 pt-0">
            <div className="space-y-1">
              <p className="text-sm font-medium">
                {delivery.street}, {delivery.addressNumber}
                {delivery.addressComplement &&
                  ` – ${delivery.addressComplement}`}
              </p>
              <p className="text-sm font-medium">
                BAIRRO: {delivery.bairro} <br />
                CIDADE: {delivery.city}-{delivery.state} <br />
                CEP: {delivery.cep}
              </p>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  );
 }
--- a/src/components/orders/tabs/InfoTab.tsx
+++ b/src/components/orders/tabs/InfoTab.tsx
@@ -0,0 +1,151 @@
 import { Order } from "../../types";
 import { formatCurrency, formatDateToDisplay } from "../../../utils/format-helpers";
 import { InfoCard } from "../InfoCard";
 import { Badge } from "@/src/components/ui/badge";
 import { getDeliveryTypeLabel, getStatusColor } from "../order-info-utils";
 import { QRCodeRastreamento } from "../../../components/qr-code-rastreamento";
 import { QrCode } from 'lucide-react';
 import { 
  User, 
  StoreIcon, 
  Calendar, 
  CreditCard, 
  Truck, 
  MapPin,
  MessageSquare,
  Clock,
 } from "lucide-react";
 import { Card, CardHeader, CardContent } from "@/src/components/ui/card";
 interface InfoTabProps {
  order: Order;
  orderComments?: (string | null | undefined)[];
 }
 /**
 * Componente para a aba de Informações do pedido
 * Exibe dados gerais como cliente, filial, datas, status, pagamento, etc.
 */
 export function InfoTab({ order, orderComments = [] }: InfoTabProps) {
  // Filtrar comentários válidos
  const validComments = orderComments
    .filter(c => typeof c === "string" && c?.trim() && c.trim().toLowerCase() !== "null");
  const hasComments = validComments.length > 0;
  const faturamentoTime =
    order.invoiceHour && order.invoiceMinute
      ? `${String(order.invoiceHour).padStart(2, "0")}:${String(
          order.invoiceMinute
        ).padStart(2, "0")}`
      : "-";
  return (
    <div className="space-y-6">
      <div className="grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-3 gap-4">
        <InfoCard 
          title="Cliente" 
          value={order.customerName} 
          icon={<User className="h-4 w-4 text-muted-foreground" />} 
        />
        <InfoCard 
          title="Filial" 
          value={order.storeId || "Não informada"} 
          icon={<StoreIcon className="h-4 w-4 text-muted-foreground" />} 
        />
        <InfoCard 
          title="Data de Criação" 
          value={formatDateToDisplay(order.createDate)}
          subtext={order.updateDate ? `Atualizado: ${formatDateToDisplay(order.updateDate)}` : undefined}
          icon={<Calendar className="h-4 w-4 text-muted-foreground" />} 
        />
        <InfoCard 
          title="Data Faturamento" 
          value={order.invoiceDate ? formatDateToDisplay(order.invoiceDate) : "-"}
          icon={<Calendar className="h-4 w-4 text-muted-foreground" />}
        />
        <InfoCard
          title="Hora Faturamento"
          value={faturamentoTime}
          icon={<Clock className="h-4 w-4 text-muted-foreground" />}
        />
        <InfoCard 
          title="Status" 
          value={order.status || "-"}
          customBadge={
            <Badge className={`${getStatusColor(order.status)} hover:${getStatusColor(order.status)}`}>
              {order.status}
            </Badge>
          }
        />
        <InfoCard 
          title="Pagamento" 
          value={order.paymentName || "-"} 
          icon={<CreditCard className="h-4 w-4 text-muted-foreground" />} 
        />
        <InfoCard 
          title="Cobrança" 
          value={order.billingName || "-"} 
        />
        <InfoCard 
          title="Valor Total" 
          value={formatCurrency(order.amount ?? 0)} 
          className="text-emerald-600 font-medium"
        />
        {/* Link Rastreamento abaixo de Valor Total */}
        {order.orderType == 'TV7 - Faturamento' ? (
        <InfoCard 
          title="Link de  Rastreamento" 
          value= {<QRCodeRastreamento orderId={order.orderId} /> }
        />) : null}
        <InfoCard 
          title="Tipo de Entrega" 
          value={getDeliveryTypeLabel(order.deliveryType)} 
          icon={<Truck className="h-4 w-4 text-muted-foreground" />} 
        />
        <InfoCard 
          title="Praça da Entrega" 
          value={order.deliveryLocal || "-"} 
          icon={<MapPin className="h-4 w-4 text-muted-foreground" />} 
        />
      </div>
      {/* Seção de comentários do pedido */}
      <Card className="bg-muted/50">
        <CardHeader className="p-3">
          <div className="flex items-center gap-2">
            <MessageSquare className="h-4 w-4 text-muted-foreground" />
            <h4 className="text-sm font-medium">Observações do Pedido</h4>
          </div>
        </CardHeader>
        <CardContent className="p-3 pt-0">
          {hasComments ? (
            <div className="space-y-2">
              {validComments.map((c, i) => (
                <div key={i} className="text-sm bg-white p-3 rounded-md border">
                  {c?.trim()}
                </div>
              ))}
            </div>
          ) : (
            <p className="text-sm text-muted-foreground italic py-2">
              Nenhuma observação do pedido disponível
            </p>
          )}
        </CardContent>
      </Card>
    </div>
  );
 }
--- a/src/components/orders/tabs/OrderItemsSection.tsx
+++ b/src/components/orders/tabs/OrderItemsSection.tsx
@@ -0,0 +1,51 @@
 import { OrderItem } from "../../types";
 import { formatCurrency } from "../../../utils/format-helpers";
 interface OrderItemsSectionProps {
  orderItems: OrderItem[];
 }
 /**
 * Componente para a seção de Itens do Pedido
 * Exibe lista de itens do pedido em uma tabela
 */
 export function OrderItemsSection({ orderItems = [] }: OrderItemsSectionProps) {
  return (
    <div className="w-full">
      {orderItems.length === 0 ? (
        <p className="text-sm text-muted-foreground py-4 text-center">
          Nenhum item encontrado para este pedido.
        </p>
      ) : (
        <div className="overflow-x-auto -mx-2 sm:-mx-6">
          <div className="inline-block min-w-full align-middle">
            <div className="overflow-hidden">
              <table className="min-w-full divide-y divide-gray-200">
                <thead>
                  <tr className="border-b bg-muted/50">
                    <th scope="col" className="p-2 whitespace-nowrap border-r border-gray-200 text-xs font-medium text-muted-foreground uppercase tracking-wider">Código</th>
                    <th scope="col" className="p-2 whitespace-nowrap border-r border-gray-200 text-xs font-medium text-muted-foreground uppercase tracking-wider">Descrição</th>
                    <th scope="col" className="p-2 whitespace-nowrap border-r border-gray-200 text-xs font-medium text-muted-foreground uppercase tracking-wider">Qtd</th>
                    <th scope="col" className="p-2 whitespace-nowrap border-r border-gray-200 text-xs font-medium text-muted-foreground uppercase tracking-wider text-right">Preço</th>
                    <th scope="col" className="p-2 whitespace-nowrap text-xs font-medium text-muted-foreground uppercase tracking-wider text-right">Total</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-gray-200">
                  {orderItems.map((item, index) => (
                    <tr key={`item-${index}`} className="hover:bg-muted/50 transition-colors odd:bg-white even:bg-gray-50">
                      <td className="p-2 whitespace-nowrap border-r border-gray-200 text-xs font-medium">{item.productId ?? "-"}</td>
                      <td className="p-2 whitespace-nowrap border-r border-gray-200 text-xs">{item.description ?? "-"}</td>
                      <td className="p-2 whitespace-nowrap border-r border-gray-200 text-xs text-center">{item.quantity ?? "-"}</td>
                      <td className="p-2 whitespace-nowrap border-r border-gray-200 text-xs text-right">{formatCurrency(item.salePrice ?? 0)}</td>
                      <td className="p-2 whitespace-nowrap text-xs text-right">{formatCurrency(item.total ?? 0)}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        </div>
      )}
    </div>
  );
 } 
--- a/src/components/orders/tabs/StatusTab.tsx
+++ b/src/components/orders/tabs/StatusTab.tsx
@@ -0,0 +1,18 @@
 import React from "react";
 import OrderTimeline from "../OrderTimeline";
 interface StatusTabProps {
  orderId?: string;
 }
 /**
 * Componente para a aba de Status
 * Utiliza o componente OrderTimeline para exibir a timeline de movimentação do pedido
 */
 export function StatusTab({ orderId }: StatusTabProps) {
  return (
    <div className="w-full px-0.5 py-1">
      <OrderTimeline orderId={orderId} className="max-w-full overflow-x-hidden" />
    </div>
  );
 }
--- a/src/components/orders/tabs/TV8Tab.tsx
+++ b/src/components/orders/tabs/TV8Tab.tsx
@@ -0,0 +1,359 @@
 import { useState, useEffect } from "react";
 import { Order, OrderDeliveryDto, Store } from "../../types";
 import { ordersApi } from "../../../lib/api";
 import { formatDateToDisplay } from "../../../utils/format-helpers";
 import { getDeliveryTypeLabel, getStatusColor, normalizeStatus, getStatusFromDeliveryType, STATUS_DEFAULT } from "../order-info-utils";
 import { Badge } from "@/src/components/ui/badge";
 import { Truck, Loader2, GripVertical, Eye } from "lucide-react";
 import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
 } from "@/src/components/ui/table";
 import { Button } from "@/src/components/ui/button";
 import Link from "next/link";
 import { useStoreNameResolver } from "@/src/hooks/useStoreNameResolver";
 interface TV8TabProps {
  order: Order;
  initialDeliveries?: OrderDeliveryDto[];
  stores?: Store[];
 }
 /**
 * Função pura para buscar entregas do TV8 com retry e normalização de dados
 * @param orderId ID do pedido a ser consultado
 * @returns Array de entregas TV8 normalizadas ou um objeto de erro
 */
 export async function fetchAndNormalizeTV8Deliveries(orderId: string | number | undefined): Promise<{
  success: boolean;
  data: OrderDeliveryDto[];
  error?: string;
 }> {
  if (!orderId) {
    return { success: false, data: [], error: "ID do pedido não informado" };
  }
  try {
    // Formatar orderID corretamente
    const formattedOrderId = orderId.toString().trim();
    // Tentar dois endpoints diferentes
    let response;
    try {
      // Primeiro endpoint
      response = await ordersApi.getOrderDeliveries(formattedOrderId);
    } catch (err) {
      // Pequeno delay antes de tentar novamente
      await new Promise(resolve => setTimeout(resolve, 500));
      // Tentar URL alternativa diretamente
      try {
        const baseUrl = process.env.NEXT_PUBLIC_API_URL || "http://localhost:8888";
        const url = `${baseUrl}/api/v1/orders/${formattedOrderId}`;
        response = await fetch(url)
          .then(res => {
            if (!res.ok) {
              throw new Error(`Falha na requisição alternativa: ${res.status}`);
            }
            return res.json();
          });
      } catch (fetchErr: any) {
        console.error("Erro na requisição alternativa:", fetchErr);
        throw new Error(`Falha nas duas tentativas: ${fetchErr.message}`);
      }
    }
    // Verificar formato da resposta e normalizar dados
    if (response && typeof response === 'object' && 'success' in response && 'data' in response) {
      if (Array.isArray(response.data) && response.data.length > 0) {
        // Apenas retorne os dados crus
        return { success: true, data: response.data };
      }
    } else if (Array.isArray(response) && response.length > 0) {
      // Apenas retorne os dados crus
      return { success: true, data: response };
    }
    // Se chegou aqui, não há dados
    return { success: true, data: [] };
  } catch (error: any) {
    console.error("Error fetching TV8 deliveries:", error);
    return { 
      success: false, 
      data: [], 
      error: error.message || "Falha ao carregar entregas TV8" 
    };
  }
 }
 /**
 * Componente para exibir a aba de entregas TV8
 * Faz requisição à API de TV8 e exibe os dados em formato de tabela
 */
 export function TV8Tab({ order, initialDeliveries = [], stores = [] }: TV8TabProps) {
  const [tv8Deliveries, setTv8Deliveries] = useState<OrderDeliveryDto[]>(initialDeliveries);
  const [isLoadingTv8, setIsLoadingTv8] = useState(false);
  const [tv8Error, setTv8Error] = useState("");
  const { getStoreName } = useStoreNameResolver(stores);
  const rawOrderStatus = order.status ?? STATUS_DEFAULT;
  const orderStatusKey = normalizeStatus(rawOrderStatus);
  const orderStatusColor = getStatusColor(orderStatusKey);
  // Flag para controle de exibição
  const displayTV8Data = tv8Deliveries;
  useEffect(() => {
    async function loadTV8Deliveries() {
      if (!order.orderId) return;
      setIsLoadingTv8(true);
      setTv8Error("");
      const result = await fetchAndNormalizeTV8Deliveries(order.orderId);
      if (result.success) {
        setTv8Deliveries(result.data);
      } else {
        setTv8Error(result.error || "Falha ao carregar dados");
        setTv8Deliveries([]);
      }
      setIsLoadingTv8(false);
    }
    loadTV8Deliveries();
  }, [order.orderId, order.schedulerDelivery]);
  const getColumnClass = (title: string) => {
    const textRight = ["Peso"];
    const cellWidth: { [key: string]: string } = {
      "Data": "w-28",
      "Filial": "w-16",
      "Pedido": "w-20",
      "Cliente": "w-56",
      "Status": "w-24",
      "Tipo Entrega": "w-28",
      "Data Entrega": "w-28",
      "Qtd Itens": "w-20",
      "Motorista": "w-48",
      "Veículo": "w-24",
      "Peso": "w-20",
      "Observação": "w-48",
    };
    let classes = "";
    if (title !== "Observação" && title !== "Cliente" && title !== "Motorista") {
      classes += "whitespace-nowrap ";
    }
    if (textRight.includes(title)) {
      classes += "text-right ";
    }
    if (cellWidth[title]) {
      classes += cellWidth[title] + " ";
    }
    // Adiciona borda divisória para todas as colunas, exceto a última
    if (title !== "Observação") {
      classes += "border-r border-gray-200 ";
    }
    return classes;
  };
  if (isLoadingTv8) {
    return <div className="py-4 text-center">
      <Loader2 className="h-6 w-6 animate-spin text-primary mx-auto mb-2" />
      <span className="text-sm">Carregando dados TV8...</span>
    </div>;
  }
  if (tv8Error) {
    return <div className="py-2 text-red-500 text-center">
      <p>Erro ao carregar dados TV8</p>
      <p className="text-sm">{tv8Error}</p>
    </div>;
  }
  if (displayTV8Data.length === 0) {
    return <div className="py-6 text-sm text-center text-muted-foreground italic">
      <div className="flex flex-col items-center gap-2">
        <Truck className="h-6 w-6 text-muted-foreground" />
        Nenhum registro de TV8 disponível
      </div>
    </div>;
  }
  const columns = [
    "Data", "Data previsão de entrega", "Filial", "Pedido", "Cliente", "Status", "Tipo Entrega", 
    "Data Entrega", "Qtd Itens", "Motorista", "Veículo", "Peso", "Observação"
  ];
  return (
    <div className="rounded-md border-0">
      <div className="border border-gray-300">
        <div className="overflow-x-auto">
          <div className="max-h-[600px] overflow-y-auto">
            <Table className="border-collapse border-gray-200">
              <TableHeader className="sticky top-0 z-10 bg-white border-b border-gray-200">
                <TableRow className="hover:bg-transparent">
                  {columns.map((title, index, array) => (
                    <TableHead
                      key={index}
                      className={`text-xs font-medium text-gray-600 p-2 ${getColumnClass(title)} ${
                        index < array.length - 1 ? "border-r border-gray-200" : ""
                      } relative`}
                    >
                      <div className="flex items-center">
                        <GripVertical className="h-3 w-3 mr-1 cursor-move text-gray-400" />
                        {title}
                      </div>
                    </TableHead>
                  ))}
                </TableRow>
              </TableHeader>
              <TableBody>
                {displayTV8Data.map((item, index) => (
                  <TableRow
                    key={`tv8-${index}`}
                    className="odd:bg-white even:bg-gray-50 hover:bg-gray-100"
                  >
                    <TableCell className={`border-r border-gray-200 p-2 text-xs ${getColumnClass("Data")}`}>
                      {formatDateToDisplay(item.createDate)}
                    </TableCell>
                    <TableCell className={`border-r border-gray-200 p-2 text-xs ${getColumnClass("Data previsão de entrega")}`}>
                      {item.deliveryDate ? formatDateToDisplay(item.deliveryDate) : "-"}
                    </TableCell>
                    <TableCell className={`border-r border-gray-200 p-2 text-xs ${getColumnClass("Filial")}`}>
                      {getStoreName(item.storeId?.toString()) || item.storeId}
                    </TableCell>
                    <TableCell className={`border-r border-gray-200 p-2 text-xs ${getColumnClass("Pedido")}`}>
                      <div className="flex items-center justify-between w-full">
                        <span>{item.orderId}</span>
                        <Link href={`/orders/${item.orderId}`} passHref>
                          <Button
                            variant="ghost"
                            size="icon"
                            className="h-5 w-5 text-muted-foreground"
                            onClick={(e) => e.stopPropagation()}
                            title="Ver detalhes do pedido"
                            aria-label="Ver detalhes do pedido"
                          >
                            <Eye className="h-4 w-4" />
                          </Button>
                        </Link>
                      </div>
                    </TableCell>
                    <TableCell className={`border-r border-gray-200 p-2 text-xs truncate ${getColumnClass("Cliente")}`} title={item.customer}>
                      {item.customer}
                    </TableCell>
                    <TableCell className={`border-r border-gray-200 p-2 text-xs ${getColumnClass("Status")}`}>
                      {item.status }
                    </TableCell>
                    <TableCell className={`border-r border-gray-200 p-2 text-xs ${getColumnClass("Tipo Entrega")}`}>
                      {getDeliveryTypeLabel(item.deliveryType)}
                    </TableCell>
                    <TableCell className={`border-r border-gray-200 p-2 text-xs ${getColumnClass("Data Entrega")}`}>
                      {item.deliveryDate ? formatDateToDisplay(item.deliveryDate) : (item.deliveryConfirmationDate ? formatDateToDisplay(item.deliveryConfirmationDate) : "-")}
                    </TableCell>
                    <TableCell className={`border-r border-gray-200 p-2 text-xs text-center ${getColumnClass("Qtd Itens")}`}>
                      {item.quantityItens}
                    </TableCell>
                    <TableCell className={`border-r border-gray-200 p-2 text-xs truncate ${getColumnClass("Motorista")}`} title={item.driverName || "-"}>
                      {item.driverName || "-"}
                    </TableCell>
                    <TableCell className={`border-r border-gray-200 p-2 text-xs ${getColumnClass("Veículo")}`}>
                      {item.carIdentification || "-"}
                    </TableCell>
                    <TableCell className={`border-r border-gray-200 p-2 text-xs text-right ${getColumnClass("Peso")}`}>
                      {item.weight} kg
                    </TableCell>
                    <TableCell className={`p-2 text-xs ${getColumnClass("Observação")}`} title={item.observation || "-"}>
                      {item.observation || "-"}
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </div>
        </div>
      </div>
      {/* Mobile view - Simplified list */}
      <div className="block md:hidden mt-4">
        {displayTV8Data.map((item, index) => (
          <div key={`tv8-mobile-${index}`} className="border rounded-md p-3 bg-white shadow-sm mb-3">
            <div className="flex flex-wrap justify-between items-start gap-2 mb-3">
              <div className="flex-1 min-w-0">
                <Badge 
                  className={`${getStatusColor(normalizeStatus(item.status))} hover:${getStatusColor(normalizeStatus(item.status))} border-0 mb-2 font-semibold text-white px-2 py-0.5 inline-flex`}
                  variant="outline"
                >
                  {normalizeStatus(item.status)}
                </Badge>
                <div className="text-xs font-medium truncate">{formatDateToDisplay(item.createDate)}</div>
              </div>
              <div className="text-xs font-medium text-right">
                <div className="mb-1 flex items-center justify-end gap-1">
                  Pedido: {item.orderId}
                  <Link href={`/orders/${item.orderId}`} passHref>
                    <Button
                      variant="ghost"
                      size="icon"
                      className="h-5 w-5 text-muted-foreground p-0"
                      onClick={(e) => e.stopPropagation()}
                      title="Ver detalhes do pedido"
                      aria-label="Ver detalhes do pedido"
                    >
                      <Eye className="h-3.5 w-3.5" />
                    </Button>
                  </Link>
                </div>
                <div>{item.quantityItens} {item.quantityItens === 1 ? 'item' : 'itens'}</div>
              </div>
            </div>
            <div className="grid grid-cols-1 gap-2 text-xs">
              <div className="flex items-center justify-between border-b border-gray-100 pb-1.5">
                <span className="text-muted-foreground">Cliente:</span>
                <span className="font-medium truncate max-w-[180px]">{item.customer}</span>
              </div>
              <div className="flex items-center justify-between border-b border-gray-100 pb-1.5">
                <span className="text-muted-foreground">Motorista:</span>
                <span className="font-medium truncate max-w-[180px]">{item.driverName || "Não informado"}</span>
              </div>
              <div className="flex items-center justify-between border-b border-gray-100 pb-1.5">
                <span className="text-muted-foreground">Tipo:</span>
                <span className="font-medium">{getDeliveryTypeLabel(item.deliveryType)}</span>
              </div>
              <div className="flex items-center justify-between">
                <span className="text-muted-foreground">Peso:</span>
                <span className="font-medium">{item.weight} kg</span>
              </div>
              {item.observation && (
                <div className="mt-1 pt-1 border-t border-gray-100">
                  <div className="text-muted-foreground mb-1">Observação:</div>
                  <div className="bg-gray-50 p-1.5 rounded text-xs">{item.observation}</div>
                </div>
              )}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
 } 
--- a/src/components/orders/tabs/TransferenciaTab.tsx
+++ b/src/components/orders/tabs/TransferenciaTab.tsx
@@ -0,0 +1,93 @@
 import { transfer } from "../../types";
 import { formatDateToDisplay } from "../../../utils/format-helpers";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/src/components/ui/table";
 interface TransferenciaTabProps {
  transfers: transfer[];
 }
 /**
 * Componente para a aba de Transferência
 * Exibe informações sobre transferências do pedido entre carregamentos
 */
 export function TransferenciaTab({ transfers = [] }: TransferenciaTabProps) {
  const cellClass = "whitespace-nowrap";
  return (
    <div className="border border-gray-300">
      <div className="overflow-x-auto">
        <div className="max-h-[600px] overflow-y-auto">
          <Table className="border-collapse border-gray-200">
            <TableHeader className="sticky top-0 z-10 bg-white border-b border-gray-200">
              <TableRow className="hover:bg-transparent">
                <TableHead className="text-xs font-medium text-gray-600 p-2 border-r border-gray-200">Data</TableHead>
                <TableHead className="text-xs font-medium text-gray-600 p-2 border-r border-gray-200">NF</TableHead>
                <TableHead className="text-xs font-medium text-gray-600 p-2 border-r border-gray-200">Trans.</TableHead>
                <TableHead className="text-xs font-medium text-gray-600 p-2 border-r border-gray-200">Carr.Ant</TableHead>
                <TableHead className="text-xs font-medium text-gray-600 p-2 border-r border-gray-200">Carr.Atual</TableHead>
                <TableHead className="text-xs font-medium text-gray-600 p-2 border-r border-gray-200">Motivo</TableHead>
                <TableHead className="text-xs font-medium text-gray-600 p-2 border-r border-gray-200">Obs.</TableHead>
                <TableHead className="text-xs font-medium text-gray-600 p-2 border-r border-gray-200">Resp.</TableHead>
                <TableHead className="text-xs font-medium text-gray-600 p-2">Rotina</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {transfers && transfers.length > 0 ? (
                transfers.map((item, index) => {
                  // Get ship IDs from either standard or alternative field names
                  const oldShipId = item.oldShipmentId ?? item.oldshipmentid ?? 0;
                  const newShipId = item.newShipmentId ?? item.newshipmentid ?? 0;
                  // Format for display
                  const oldShipmentIdText = oldShipId !== 0 ? String(oldShipId) : "-";
                  const newShipmentIdText = newShipId !== 0 ? String(newShipId) : "-";
                  return (
                    <TableRow
                      key={`transfer-${index}`}
                      className="odd:bg-white even:bg-gray-50 hover:bg-gray-100"
                    >
                      <TableCell className={`${cellClass} border-r border-gray-200 p-2 text-xs`}>
                        {formatDateToDisplay(item.transferDate)}
                      </TableCell>
                      <TableCell className={`${cellClass} border-r border-gray-200 p-2 text-xs`}>
                        {item.invoiceId}
                      </TableCell>
                      <TableCell className={`${cellClass} border-r border-gray-200 p-2 text-xs`}>
                        {item.transactionId}
                      </TableCell>
                      <TableCell className={`${cellClass} border-r border-gray-200 p-2 text-xs`}>
                        {oldShipmentIdText}
                      </TableCell>
                      <TableCell className={`${cellClass} border-r border-gray-200 p-2 text-xs`}>
                        {newShipmentIdText}
                      </TableCell>
                      <TableCell className={`border-r border-gray-200 p-2 text-xs`}>
                        {item.cause || "-"}
                      </TableCell>
                      <TableCell className={`border-r border-gray-200 p-2 text-xs max-w-[120px] truncate`}>
                        {item.transferText || "-"}
                      </TableCell>
                      <TableCell className={`${cellClass} border-r border-gray-200 p-2 text-xs`}>
                        {item.userName}
                      </TableCell>
                      <TableCell className={`${cellClass} p-2 text-xs`}>
                        {item.program}
                      </TableCell>
                    </TableRow>
                  );
                })
              ) : (
                <TableRow>
                  <TableCell colSpan={9} className="py-6 text-sm text-center text-gray-500 italic">
                    Nenhuma transferência disponível
                  </TableCell>
                </TableRow>
              )}
            </TableBody>
          </Table>
        </div>
      </div>
    </div>
  );
 } 
--- a/src/components/qr-code-rastreamento.tsx
+++ b/src/components/qr-code-rastreamento.tsx
@@ -0,0 +1,89 @@
 "use client"
 import { useState, useMemo } from "react"
 import md5 from "crypto-js/md5"
 import { Button } from "../components/ui/button"
 import { QrCode, Check, X } from "lucide-react"
 import { useToast } from "../hooks/use-toast"
 import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogFooter,
 } from "../components/ui/dialog"
 import { Input } from "../components/ui/input"
 interface QRCodeRastreamentoProps {
  orderId?: string | number
 }
 export function QRCodeRastreamento({ orderId }: QRCodeRastreamentoProps) {
  const [open, setOpen] = useState(false)
  const [copied, setCopied] = useState(false)
  const { toast } = useToast()
  const url = useMemo(() => {
    if (!orderId) return ""
    const hash = md5(String(orderId) + "@Juru2025$").toString().toUpperCase()
    return `https://rastreamento.jurunense.com/${hash}`
  }, [orderId])
  const handleCopy = async () => {
    try {
      await navigator.clipboard.writeText(url)
      setCopied(true)
      toast({
        title: "Link copiado!",
        description: "O link foi copiado para a área de transferência.",
      })
      setTimeout(() => setCopied(false), 2000)
    } catch {
      toast({
        title: "Erro ao copiar",
        description: "Não foi possível copiar o link.",
        variant: "destructive",
      })
    }
  }
  const handleOpen = () => {
    if (!orderId) {
      toast({
        title: "Erro",
        description: "Número do pedido não disponível.",
        variant: "destructive",
      })
      return
    }
    setOpen(true)
  }
  return (
    <>
      <Button
        variant="ghost"
        size="icon"
        className="rounded-full transition-all duration-200"
        onClick={handleOpen}
        title="Abrir link de rastreamento"
      >
        <QrCode className="h-10 w-10" />
        <span className="sr-only">Abrir link de rastreamento</span>
      </Button>
      <Dialog open={open} onOpenChange={setOpen}>
        <DialogContent className="sm:max-w-[500px]">
          <DialogHeader>
            <DialogTitle>Link de Rastreamento</DialogTitle>
          </DialogHeader>
          <div className="space-y-2">
            <Input readOnly value={url} />
          </div>
        </DialogContent>
      </Dialog>
    </>
  )
 }
--- a/src/components/sidebar.tsx
+++ b/src/components/sidebar.tsx
@@ -0,0 +1,178 @@
 "use client";
 import { cn } from "@/src/lib/utils";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { useState } from "react";
 import Image from "next/image";
 import logoJuru from "./logo_juru.png";
 import {
  Home,
  ShoppingCart,
  ChevronDown,
  ChevronRight,
  User,
  Settings,
  LogOut,
  ChevronsLeftRight,
 } from "lucide-react";
 import { AnimatePresence, motion } from "framer-motion";
 const routes = [
  {
    label: "Home",
    icon: Home,
    href: "/",
    color: "text-sky-400",
  },
    {
    label: "Pedidos",
    icon: ShoppingCart,
    href: "/orders",
    color: "text-pink-700",
    submenu: [{ label: "Buscar Pedidos", href: "/orders/find" }],
  },
 ];
 export default function Sidebar() {
  const pathname = usePathname();
  const [openDropdowns, setOpenDropdowns] = useState<Record<string, boolean>>(
    {}
  );
  const [isCollapsed, setIsCollapsed] = useState(false);
  const toggleDropdown = (href: string) => {
    setOpenDropdowns((prev) => ({
      ...prev,
      [href]: !prev[href],
    }));
  };
  const handleLogout = () => {
    console.log('Sidebar - iniciando logout');
  };
  return (
    <AnimatePresence>
      <motion.div
        className={cn(
          "flex h-full flex-col border-r bg-blue-950 text-gray-100 transition-all",
          isCollapsed ? "w-16" : "w-60"
        )}
      >
        <div className="flex h-24 items-center justify-between border-b border-blue-800 px-6 py-6">
          {!isCollapsed && (
            <Link href="/" className="flex items-center">
              <Image
                src={logoJuru}
                alt="Logo Juru"
                width={160}
                height={60}
                className="object-contain"
              />
            </Link>
          )}
          <button
            onClick={() => setIsCollapsed(!isCollapsed)}
            className="text-blue-300 hover:text-white"
          >
            <ChevronsLeftRight className="h-5 w-5" />
          </button>
        </div>
        <div className="flex-1 overflow-auto py-1">
          <nav className="grid items-start px-2 text-sm">
            {routes.map((route) => {
              const isActive = pathname === route.href && route.href !== "/";
              const isExpanded = openDropdowns[route.href];
              return (
                <div key={route.href} className="mb-1">
                  <motion.button
                    whileTap={{ scale: 0.97 }}
                    whileHover={{ scale: 1.01 }}
                    transition={{ type: "spring", stiffness: 300 }}
                    onClick={() => route.submenu && toggleDropdown(route.href)}
                    className={cn(
                      "group flex w-full items-center justify-between rounded-md px-3 py-3 text-left text-sm font-medium transition-all hover:bg-white-800 hover:text-white",
                      isActive
                        ? "bg-white-800 text-white shadow-md"
                        : "text-white-100"
                    )}
                  >
                    <span className="flex items-center">
                      <route.icon className={cn("mr-3 h-5 w-5", route.color)} />
                      {!isCollapsed && route.label}
                    </span>
                    {!isCollapsed &&
                      route.submenu &&
                      (isExpanded ? (
                        <ChevronDown className="h-4 w-4 text-blue-300" />
                      ) : (
                        <ChevronRight className="h-4 w-4 text-blue-300" />
                      ))}
                  </motion.button>
                  {!isCollapsed && route.submenu && (
                    <AnimatePresence initial={false}>
                      {isExpanded && (
                        <motion.div
                          initial={{ height: 0, opacity: 0 }}
                          animate={{ height: "auto", opacity: 1 }}
                          exit={{ height: 0, opacity: 0 }}
                          transition={{ duration: 0.2 }}
                          className="mt-1 space-y-1 rounded-md py-1 overflow-hidden"
                          >
                          {route.submenu.map((submenu) => (
                            <Link
                              key={submenu.href}
                              href={submenu.href}
                              className={cn(
                                "ml-8 block rounded-md py-2 pl-4 pr-3 text-sm font-medium transition-colors hover:bg-white-800 hover:text-white",
                                pathname === submenu.href
                                  ? "bg-white/10 backdrop-blur"
                                  : "text-white-200"
                              )}
                            >
                              {submenu.label}
                            </Link>
                          ))}
                        </motion.div>
                      )}
                    </AnimatePresence>
                  )}
                </div>
              );
            })}
          </nav>
        </div>
        <div className="border-t border-blue-800 p-4">
          <div className="flex items-center space-x-3 px-2 py-3">
            <User className="h-5 w-5 text-blue-300" />
            {!isCollapsed && (
              <div className="flex flex-col">
              </div>
            )}
          </div>
          {!isCollapsed && (
            <div className="mt-3 grid grid-cols-2 gap-2">
              <button className="flex items-center justify-center rounded-md bg-blue-800 p-2 text-xs hover:bg-blue-700">
                <Settings className="mr-1 h-4 w-4" />
                <span>Configurações</span>
              </button>
              <button 
                onClick={handleLogout}
                className="flex items-center justify-center rounded-md bg-blue-800 p-2 text-xs hover:bg-blue-700"
              >
                <LogOut className="mr-1 h-4 w-4" />
                <span>Sair</span>
              </button>
            </div>
          )}
        </div>
      </motion.div>
    </AnimatePresence>
  );
 }
--- a/src/components/theme-provider.tsx
+++ b/src/components/theme-provider.tsx
@@ -0,0 +1,11 @@
 'use client'
 import * as React from 'react'
 import {
  ThemeProvider as NextThemesProvider,
  type ThemeProviderProps,
 } from 'next-themes'
 export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
 }
--- a/src/components/types.ts
+++ b/src/components/types.ts
@@ -0,0 +1,352 @@
 import { LucideProps } from "lucide-react"
 import { JSX } from "react"
 export type LucideIcon = (props: LucideProps) => JSX.Element
 // Importações e exportações de constantes de data
 export * from '@/src/utils/date-helpers';
 // Tipo para eventos de timeline
 export interface TimelineEvent {
  id: string | number;
  title?: string;
  description: string;
  date: string | Date;
  status?: string;
  icon?: LucideIcon; 
  color?: string;
  user?: string;
 }
 export interface cutitens {
  productId: number;
  description: string;
  pacth: string;
  stockId: number;
  saleQuantity: number;
  cutQuantity: number;
  separedQuantity: number;
 }
 export interface transfer {
  orderId: number;
  transferDate: Date;
  invoiceId: number;
  transactionId: number;
  oldShipmentId: number;
  newShipmentId: number;
  transferText: string;
  cause: string;
  userName: string;
  program: string;
  oldshipmentid?: number;
  newshipmentid?: number;
 }
 export interface leadtime{
  descricaoEtapa: string;
  orderId: number;
  descricao: string;
  data: string;
  codigoFuncionario: string;
  nomeFuncionario: string;
  numeroPedido: string;
  icon?: LucideIcon;
  status?: string;
  color?: string;
 }
 export interface status {
  orderId: number;
  status: string;
  statusDate: Date;
  userName: string;
  comments: string;
 }
 export interface CustomerDto {
  id: string;
  name: string;
  document: string;
 }
 export interface Order {
  orderId: string;
  clientId: string;
  clientDocument: string;
  customer?: CustomerDto;
  shippimentId?: string;
  clientName: string;
  storeId: string;
  sellerId: string;
  stockId: string;
  storeName: string;
  store?: string; 
  createDate: string | Date;
  updateDate?: string | Date;
  status?: string;
  totalValue: number;
  invoiceHour?: string;
  invoiceMinute?: string;
  paymentMethod?: string;
  paymentStatus?: string;
  paymentPlan?: string;
  paymentName?: string;
  driver?: string;
  carDescription?: string;
  deliveryLocal?: string;
  deliveryType?: string;
  commentDelivery1?: string;
  billingId?: string;
  masterDeliveryLocal?: string;
  orderType?: string;
  orderSaleId?: string | number;
  customerName?: string;
  customerId?: string;
  sellerName?: string;
  amount?: number;
  totalWeigth?: number | string;
  shipmentId?: string | number;
  billingName?: string;
  invoiceNumber?: string;
  invoiceDate?: string | Date;
  shipmentDate?: string | Date;
  deliveryDate?: string | Date;
  schedulerDelivery?: string;
  deliveryBranch?: string;
  deliveryAddress?: string;
  customerContact?: string;
  observations?: string;
  carIdentification?: string;
  carrier?: string;
  checkout?: OrderCheckout;
 }
 export interface OrderItem {
  productId: number;
  description: string;
  pacth: string;
  color: string | null;
  stockId: number;
  quantity: number;
  salePrice: number;
  deliveryType: string;
  total: number;
  weight: number | null;
  department: string;
  brand: string;
  saleQuantity: number;
  cutQuantity: number;
  separedQuantity: number;
 }
 // Exportando o tipo ClientData
 export interface ClientData {
  name: string;
  email: string;
  phone: string;
  address: string;
  city: string;
  state: string;
  zipCode: string;
  cpfCnpj: string;
  createdAt: string;
  updatedAt: string;
  status: 'active' | 'inactive';
  type: 'individual' | 'company';
  creditLimit: number;
  lastPurchaseDate: string | null;
  totalPurchases: number;
 }
 export type OrderStatus = 
  | 'Aguardando pagamento'
  | 'Pagamento aprovado'
  | 'Em separação'
  | 'Em transporte'
  | 'Entregue'
  | 'Cancelado';
 export type PaymentStatus =
  | 'Pendente'
  | 'Aprovado'
  | 'Rejeitado'
  | 'Estornado'
  | 'Em análise';
  export type Customer = {
    id: string;
    name: string;
    document: string;
  };
  export interface LoginDto {
    username: string;
    password: string;
  }
  export interface LoginResponseDto {
    id: number;
    sellerId: number;
    name: string;
    username: string;
    storeId: string;
    email: string;
    token: string;
  }
  export interface Cliente {
    id?: string;
    name?: string;
    document?: string;
  }
 /**
 * Interface para parâmetros de pesquisa de pedidos
 * Define todos os campos possíveis usados no formulário de busca
 */
 export interface OrderSearchParams {
  /** ID do pedido */
  orderId?: string;
  /** Código da filial de venda */
  codfilial?: string;
  /** ID do cliente (mesma funcionalidade que customerId) */
  clientId?: string;
  /** ID do cliente */
  customerId?: string;
  /** ID do carregamento */
  shippimentId?: string;
  /** ID alternativo (compatibilidade) */
  id?: string;
  /** Código da filial de estoque */
  stockId?: string;
  /** Documento do cliente (CPF/CNPJ) */
  Document?: string;
  /** Nome do cliente para busca */
  name?: string;
  /** Tipo de venda (pode ser string única ou array) */
  type?: string | string[];
  /** Cliente selecionado pelo componente de busca */
  selectedCustomer?: Cliente | null;
  /** Data inicial para filtro */
  createDateIni?: string;
  /** Data final para filtro */
  createDateEnd?: string;
  /** Status do pedido */
  status?: string | string[];
  /** Local de entrega */
  deliveryLocal?: string;
  /** ID do vendedor */
  sellerId?: string | number;
  /** Documento do cliente (CPF/CNPJ) - duplicado para compatibilidade */
  document?: string;
  /** Número da nota fiscal */
  invoiceNumber?: string;
  /** Tipo de entrega */
  deliveryType?: string | string[];
  /** ID da nota fiscal (mapeado de invoiceNumber) */
  invoiceId?: string;
  /** Número da nota fiscal (NFe) */
  nfe?: string;
 }
 export interface CustomerSearchParams {
  id?: string;
  Document?: string;
  name?: string;
 }
 export interface dataConsult {
  id?: string;
  store?: string;
  storeId?: string;
  code?: string;
  name?: string;
  document?: string;
 }
 export interface Store {
  id?: string;
  store?: string;
  storeId?: string;
  code?: string;
  name?: string;
  description?: string;
  label?: string;
 }
 export interface OrderDelivery {
  placeId: number;
  placeName: string;
  street: string;
  addressNumber: string;
  bairro: string;
  city: string;
  state: string;
  addressComplement: string;
  cep: string;
  commentOrder1: string;
  commentOrder2: string;
  commentDelivery1: string;
  commentDelivery2: string;
  commentDelivery3: string;
  commentDelivery4: string;
  shippimentId: number;
  shippimentDate: Date;
  shippimentComment: string;
  place: string;
  driver: string;
  car: string;
  closeDate: Date;
  separatorName: string;
  confName: string;
  releaseDate: Date;
 }
 export interface CustomerSearchParams {
  id?: string;
  Document?: string;
  name?: string;
 }
 export interface OrderDeliveryDto {
  storeId: number;
  storeDescription?: string;
  createDate: Date;
  orderId: number;
  orderIdSale: number | null;
  customerId: number;
  customer: string;
  deliveryType: string | null;
  quantityItens: number;
  status: string;
  weight: number;
  shipmentId: number;
  driverId: number | null;
  driverName: string | null;
  carPlate: string | null;
  carIdentification: string | null;
  observation: string | null;
  deliveryConfirmationDate: Date | null;
  schedulerDelivery?: string;
  deliveryDate: Date | null;
 }
 export interface OrderCheckout {
  CAIXA: number;
  NOME_FUNCIONARIO_CAIXA: string;
  DATA_FECHAMENTO: string;
  NOME_ACERTO_MOTORISTA: string;
 }
 export interface CheckoutData {
  CAIXA: number;
  NOME_FUNCIONARIO_CAIXA: string;
  DATA_FECHAMENTO: string;
  NOME_ACERTO_MOTORISTA: string;
 }
--- a/src/components/ui/ApiErrorAlert.tsx
+++ b/src/components/ui/ApiErrorAlert.tsx
@@ -0,0 +1,27 @@
 import React from 'react';
 import { AlertCircle } from 'lucide-react';
 interface ApiErrorAlertProps {
  message: string;
  variant: 'unauthorized' | 'forbidden' | 'error';
 }
 export function ApiErrorAlert({ message, variant }: ApiErrorAlertProps) {
  const getVariantStyles = () => {
    switch (variant) {
      case 'unauthorized':
        return 'bg-yellow-50 text-yellow-800 border-yellow-200';
      case 'forbidden':
        return 'bg-red-50 text-red-800 border-red-200';
      default:
        return 'bg-gray-50 text-gray-800 border-gray-200';
    }
  };
  return (
    <div className={`flex items-center gap-3 p-4 rounded-lg border ${getVariantStyles()}`}>
      <AlertCircle className="w-5 h-5" />
      <p className="text-sm font-medium">{message}</p>
    </div>
  );
 } 
--- a/src/components/ui/StatusBadge.tsx
+++ b/src/components/ui/StatusBadge.tsx
@@ -0,0 +1,23 @@
 interface StatusBadgeProps {
    status?: string;
  }
  export function StatusBadge({ status }: StatusBadgeProps) {
    const statusClasses: Record<string, string> = {
      Liberado: "bg-green-100 text-green-800",
      Pendente: "bg-yellow-100 text-yellow-800",
      Bloqueado: "bg-red-100 text-red-800",
      Montado: "bg-blue-100 text-blue-800",
      Cancelado: "bg-red-100 text-red-800",
      Faturado: "bg-violet-100 text-violet-800",
    };
    const style = status && statusClasses[status] ? statusClasses[status] : "bg-gray-100 text-gray-700";
    return (
      <span className={`px-3 py-1 text-xs font-semibold rounded-full ${style}`}>
        {status}
      </span>
    );
  }
--- a/src/components/ui/accordion.tsx
+++ b/src/components/ui/accordion.tsx
@@ -0,0 +1,58 @@
 "use client"
 import * as React from "react"
 import * as AccordionPrimitive from "@radix-ui/react-accordion"
 import { ChevronDown } from "lucide-react"
 import { cn } from "@/src/lib/utils"
 const Accordion = AccordionPrimitive.Root
 const AccordionItem = React.forwardRef<
  React.ElementRef<typeof AccordionPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
 >(({ className, ...props }, ref) => (
  <AccordionPrimitive.Item
    ref={ref}
    className={cn("border-b", className)}
    {...props}
  />
 ))
 AccordionItem.displayName = "AccordionItem"
 const AccordionTrigger = React.forwardRef<
  React.ElementRef<typeof AccordionPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
 >(({ className, children, ...props }, ref) => (
  <AccordionPrimitive.Header className="flex">
    <AccordionPrimitive.Trigger
      ref={ref}
      className={cn(
        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
        className
      )}
      {...props}
    >
      {children}
      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
    </AccordionPrimitive.Trigger>
  </AccordionPrimitive.Header>
 ))
 AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
 const AccordionContent = React.forwardRef<
  React.ElementRef<typeof AccordionPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
 >(({ className, children, ...props }, ref) => (
  <AccordionPrimitive.Content
    ref={ref}
    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
    {...props}
  >
    <div className={cn("pb-4 pt-0", className)}>{children}</div>
  </AccordionPrimitive.Content>
 ))
 AccordionContent.displayName = AccordionPrimitive.Content.displayName
 export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
--- a/src/components/ui/alert-dialog.tsx
+++ b/src/components/ui/alert-dialog.tsx
@@ -0,0 +1,141 @@
 "use client"
 import * as React from "react"
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
 import { cn } from "@/src/lib/utils"
 import { buttonVariants } from "@/src/components/ui/button"
 const AlertDialog = AlertDialogPrimitive.Root
 const AlertDialogTrigger = AlertDialogPrimitive.Trigger
 const AlertDialogPortal = AlertDialogPrimitive.Portal
 const AlertDialogOverlay = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
 >(({ className, ...props }, ref) => (
  <AlertDialogPrimitive.Overlay
    className={cn(
      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
      className
    )}
    {...props}
    ref={ref}
  />
 ))
 AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
 const AlertDialogContent = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
 >(({ className, ...props }, ref) => (
  <AlertDialogPortal>
    <AlertDialogOverlay />
    <AlertDialogPrimitive.Content
      ref={ref}
      className={cn(
        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
        className
      )}
      {...props}
    />
  </AlertDialogPortal>
 ))
 AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
 const AlertDialogHeader = ({
  className,
  ...props
 }: React.HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn(
      "flex flex-col space-y-2 text-center sm:text-left",
      className
    )}
    {...props}
  />
 )
 AlertDialogHeader.displayName = "AlertDialogHeader"
 const AlertDialogFooter = ({
  className,
  ...props
 }: React.HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn(
      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
      className
    )}
    {...props}
  />
 )
 AlertDialogFooter.displayName = "AlertDialogFooter"
 const AlertDialogTitle = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Title>,
  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
 >(({ className, ...props }, ref) => (
  <AlertDialogPrimitive.Title
    ref={ref}
    className={cn("text-lg font-semibold", className)}
    {...props}
  />
 ))
 AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
 const AlertDialogDescription = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Description>,
  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
 >(({ className, ...props }, ref) => (
  <AlertDialogPrimitive.Description
    ref={ref}
    className={cn("text-sm text-muted-foreground", className)}
    {...props}
  />
 ))
 AlertDialogDescription.displayName =
  AlertDialogPrimitive.Description.displayName
 const AlertDialogAction = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Action>,
  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
 >(({ className, ...props }, ref) => (
  <AlertDialogPrimitive.Action
    ref={ref}
    className={cn(buttonVariants(), className)}
    {...props}
  />
 ))
 AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
 const AlertDialogCancel = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
 >(({ className, ...props }, ref) => (
  <AlertDialogPrimitive.Cancel
    ref={ref}
    className={cn(
      buttonVariants({ variant: "outline" }),
      "mt-2 sm:mt-0",
      className
    )}
    {...props}
  />
 ))
 AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
 export {
  AlertDialog,
  AlertDialogPortal,
  AlertDialogOverlay,
  AlertDialogTrigger,
  AlertDialogContent,
  AlertDialogHeader,
  AlertDialogFooter,
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogAction,
  AlertDialogCancel,
 }
--- a/src/components/ui/alert.tsx
+++ b/src/components/ui/alert.tsx
@@ -0,0 +1,59 @@
 import * as React from "react"
 import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/src/lib/utils"
 const alertVariants = cva(
  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
  {
    variants: {
      variant: {
        default: "bg-background text-foreground",
        destructive:
          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  }
 )
 const Alert = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
 >(({ className, variant, ...props }, ref) => (
  <div
    ref={ref}
    role="alert"
    className={cn(alertVariants({ variant }), className)}
    {...props}
  />
 ))
 Alert.displayName = "Alert"
 const AlertTitle = React.forwardRef<
  HTMLParagraphElement,
  React.HTMLAttributes<HTMLHeadingElement>
 >(({ className, ...props }, ref) => (
  <h5
    ref={ref}
    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
    {...props}
  />
 ))
 AlertTitle.displayName = "AlertTitle"
 const AlertDescription = React.forwardRef<
  HTMLParagraphElement,
  React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn("text-sm [&_p]:leading-relaxed", className)}
    {...props}
  />
 ))
 AlertDescription.displayName = "AlertDescription"
 export { Alert, AlertTitle, AlertDescription }
--- a/src/components/ui/aspect-ratio.tsx
+++ b/src/components/ui/aspect-ratio.tsx
@@ -0,0 +1,7 @@
 "use client"
 import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
 const AspectRatio = AspectRatioPrimitive.Root
 export { AspectRatio }
--- a/src/components/ui/avatar.tsx
+++ b/src/components/ui/avatar.tsx
@@ -0,0 +1,50 @@
 "use client"
 import * as React from "react"
 import * as AvatarPrimitive from "@radix-ui/react-avatar"
 import { cn } from "@/src/lib/utils"
 const Avatar = React.forwardRef<
  React.ElementRef<typeof AvatarPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
 >(({ className, ...props }, ref) => (
  <AvatarPrimitive.Root
    ref={ref}
    className={cn(
      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
      className
    )}
    {...props}
  />
 ))
 Avatar.displayName = AvatarPrimitive.Root.displayName
 const AvatarImage = React.forwardRef<
  React.ElementRef<typeof AvatarPrimitive.Image>,
  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
 >(({ className, ...props }, ref) => (
  <AvatarPrimitive.Image
    ref={ref}
    className={cn("aspect-square h-full w-full", className)}
    {...props}
  />
 ))
 AvatarImage.displayName = AvatarPrimitive.Image.displayName
 const AvatarFallback = React.forwardRef<
  React.ElementRef<typeof AvatarPrimitive.Fallback>,
  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
 >(({ className, ...props }, ref) => (
  <AvatarPrimitive.Fallback
    ref={ref}
    className={cn(
      "flex h-full w-full items-center justify-center rounded-full bg-muted",
      className
    )}
    {...props}
  />
 ))
 AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
 export { Avatar, AvatarImage, AvatarFallback }
--- a/src/components/ui/badge.tsx
+++ b/src/components/ui/badge.tsx
@@ -0,0 +1,36 @@
 import * as React from "react"
 import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/src/lib/utils"
 const badgeVariants = cva(
  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
  {
    variants: {
      variant: {
        default:
          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
        secondary:
          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
        destructive:
          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
        outline: "text-foreground",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  }
 )
 export interface BadgeProps
  extends React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof badgeVariants> {}
 function Badge({ className, variant, ...props }: BadgeProps) {
  return (
    <div className={cn(badgeVariants({ variant }), className)} {...props} />
  )
 }
 export { Badge, badgeVariants }
--- a/src/components/ui/breadcrumb.tsx
+++ b/src/components/ui/breadcrumb.tsx
@@ -0,0 +1,115 @@
 import * as React from "react"
 import { Slot } from "@radix-ui/react-slot"
 import { ChevronRight, MoreHorizontal } from "lucide-react"
 import { cn } from "@/src/lib/utils"
 const Breadcrumb = React.forwardRef<
  HTMLElement,
  React.ComponentPropsWithoutRef<"nav"> & {
    separator?: React.ReactNode
  }
 >(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />)
 Breadcrumb.displayName = "Breadcrumb"
 const BreadcrumbList = React.forwardRef<
  HTMLOListElement,
  React.ComponentPropsWithoutRef<"ol">
 >(({ className, ...props }, ref) => (
  <ol
    ref={ref}
    className={cn(
      "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
      className
    )}
    {...props}
  />
 ))
 BreadcrumbList.displayName = "BreadcrumbList"
 const BreadcrumbItem = React.forwardRef<
  HTMLLIElement,
  React.ComponentPropsWithoutRef<"li">
 >(({ className, ...props }, ref) => (
  <li
    ref={ref}
    className={cn("inline-flex items-center gap-1.5", className)}
    {...props}
  />
 ))
 BreadcrumbItem.displayName = "BreadcrumbItem"
 const BreadcrumbLink = React.forwardRef<
  HTMLAnchorElement,
  React.ComponentPropsWithoutRef<"a"> & {
    asChild?: boolean
  }
 >(({ asChild, className, ...props }, ref) => {
  const Comp = asChild ? Slot : "a"
  return (
    <Comp
      ref={ref}
      className={cn("transition-colors hover:text-foreground", className)}
      {...props}
    />
  )
 })
 BreadcrumbLink.displayName = "BreadcrumbLink"
 const BreadcrumbPage = React.forwardRef<
  HTMLSpanElement,
  React.ComponentPropsWithoutRef<"span">
 >(({ className, ...props }, ref) => (
  <span
    ref={ref}
    role="link"
    aria-disabled="true"
    aria-current="page"
    className={cn("font-normal text-foreground", className)}
    {...props}
  />
 ))
 BreadcrumbPage.displayName = "BreadcrumbPage"
 const BreadcrumbSeparator = ({
  children,
  className,
  ...props
 }: React.ComponentProps<"li">) => (
  <li
    role="presentation"
    aria-hidden="true"
    className={cn("[&>svg]:w-3.5 [&>svg]:h-3.5", className)}
    {...props}
  >
    {children ?? <ChevronRight />}
  </li>
 )
 BreadcrumbSeparator.displayName = "BreadcrumbSeparator"
 const BreadcrumbEllipsis = ({
  className,
  ...props
 }: React.ComponentProps<"span">) => (
  <span
    role="presentation"
    aria-hidden="true"
    className={cn("flex h-9 w-9 items-center justify-center", className)}
    {...props}
  >
    <MoreHorizontal className="h-4 w-4" />
    <span className="sr-only">More</span>
  </span>
 )
 BreadcrumbEllipsis.displayName = "BreadcrumbElipssis"
 export {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbPage,
  BreadcrumbSeparator,
  BreadcrumbEllipsis,
 }
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -0,0 +1,58 @@
 import * as React from "react"
 import { Slot } from "@radix-ui/react-slot"
 import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/src/lib/utils"
 const buttonVariants = cva(
  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/90",
        destructive:
          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
        outline:
          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
        secondary:
          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
        ghost: "hover:bg-accent hover:text-accent-foreground",
        link: "text-primary underline-offset-4 hover:underline",
        blue: "bg-blue-600 text-white hover:bg-blue-700",
      },
      size: {
        default: "h-10 px-4 py-2",
        sm: "h-9 rounded-md px-3",
        lg: "h-11 rounded-md px-8",
        icon: "h-10 w-10",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
 )
 export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {
  asChild?: boolean
 }
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, asChild = false, ...props }, ref) => {
    const Comp = asChild ? Slot : "button"
    return (
      <Comp
        className={cn(buttonVariants({ variant, size, className }))}
        ref={ref}
        {...props}
      />
    )
  }
 )
 Button.displayName = "Button"
 export { Button, buttonVariants }
--- a/src/components/ui/calendar.tsx
+++ b/src/components/ui/calendar.tsx
@@ -0,0 +1,66 @@
 "use client"
 import * as React from "react"
 import { ChevronLeft, ChevronRight } from "lucide-react"
 import { DayPicker } from "react-day-picker"
 import { cn } from "@/src/lib/utils"
 import { buttonVariants } from "@/src/components/ui/button"
 export type CalendarProps = React.ComponentProps<typeof DayPicker>
 function Calendar({
  className,
  classNames,
  showOutsideDays = true,
  ...props
 }: CalendarProps) {
  return (
    <DayPicker
      showOutsideDays={showOutsideDays}
      className={cn("p-3", className)}
      classNames={{
        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
        month: "space-y-4",
        caption: "flex justify-center pt-1 relative items-center",
        caption_label: "text-sm font-medium",
        nav: "space-x-1 flex items-center",
        nav_button: cn(
          buttonVariants({ variant: "outline" }),
          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
        ),
        nav_button_previous: "absolute left-1",
        nav_button_next: "absolute right-1",
        table: "w-full border-collapse space-y-1",
        head_row: "flex",
        head_cell:
          "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
        row: "flex w-full mt-2",
        cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
        day: cn(
          buttonVariants({ variant: "ghost" }),
          "h-9 w-9 p-0 font-normal aria-selected:opacity-100"
        ),
        day_range_end: "day-range-end",
        day_selected:
          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
        day_today: "bg-accent text-accent-foreground",
        day_outside:
          "day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground",
        day_disabled: "text-muted-foreground opacity-50",
        day_range_middle:
          "aria-selected:bg-accent aria-selected:text-accent-foreground",
        day_hidden: "invisible",
        ...classNames,
      }}
      components={{
        IconLeft: ({ ...props }) => <ChevronLeft className="h-4 w-4" />,
        IconRight: ({ ...props }) => <ChevronRight className="h-4 w-4" />,
      }}
      {...props}
    />
  )
 }
 Calendar.displayName = "Calendar"
 export { Calendar }
--- a/src/components/ui/card.tsx
+++ b/src/components/ui/card.tsx
@@ -0,0 +1,79 @@
 import * as React from "react"
 import { cn } from "@/src/lib/utils"
 const Card = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn(
      "rounded-lg border bg-card text-card-foreground shadow-sm",
      className
    )}
    {...props}
  />
 ))
 Card.displayName = "Card"
 const CardHeader = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn("flex flex-col space-y-1.5 p-6", className)}
    {...props}
  />
 ))
 CardHeader.displayName = "CardHeader"
 const CardTitle = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn(
      "text-2xl font-semibold leading-none tracking-tight",
      className
    )}
    {...props}
  />
 ))
 CardTitle.displayName = "CardTitle"
 const CardDescription = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn("text-sm text-muted-foreground", className)}
    {...props}
  />
 ))
 CardDescription.displayName = "CardDescription"
 const CardContent = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
 ))
 CardContent.displayName = "CardContent"
 const CardFooter = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn("flex items-center p-6 pt-0", className)}
    {...props}
  />
 ))
 CardFooter.displayName = "CardFooter"
 export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
--- a/src/components/ui/carousel.tsx
+++ b/src/components/ui/carousel.tsx
@@ -0,0 +1,262 @@
 "use client"
 import * as React from "react"
 import useEmblaCarousel, {
  type UseEmblaCarouselType,
 } from "embla-carousel-react"
 import { ArrowLeft, ArrowRight } from "lucide-react"
 import { cn } from "@/src/lib/utils"
 import { Button } from "@/src/components/ui/button"
 type CarouselApi = UseEmblaCarouselType[1]
 type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
 type CarouselOptions = UseCarouselParameters[0]
 type CarouselPlugin = UseCarouselParameters[1]
 type CarouselProps = {
  opts?: CarouselOptions
  plugins?: CarouselPlugin
  orientation?: "horizontal" | "vertical"
  setApi?: (api: CarouselApi) => void
 }
 type CarouselContextProps = {
  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
  api: ReturnType<typeof useEmblaCarousel>[1]
  scrollPrev: () => void
  scrollNext: () => void
  canScrollPrev: boolean
  canScrollNext: boolean
 } & CarouselProps
 const CarouselContext = React.createContext<CarouselContextProps | null>(null)
 function useCarousel() {
  const context = React.useContext(CarouselContext)
  if (!context) {
    throw new Error("useCarousel must be used within a <Carousel />")
  }
  return context
 }
 const Carousel = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement> & CarouselProps
 >(
  (
    {
      orientation = "horizontal",
      opts,
      setApi,
      plugins,
      className,
      children,
      ...props
    },
    ref
  ) => {
    const [carouselRef, api] = useEmblaCarousel(
      {
        ...opts,
        axis: orientation === "horizontal" ? "x" : "y",
      },
      plugins
    )
    const [canScrollPrev, setCanScrollPrev] = React.useState(false)
    const [canScrollNext, setCanScrollNext] = React.useState(false)
    const onSelect = React.useCallback((api: CarouselApi) => {
      if (!api) {
        return
      }
      setCanScrollPrev(api.canScrollPrev())
      setCanScrollNext(api.canScrollNext())
    }, [])
    const scrollPrev = React.useCallback(() => {
      api?.scrollPrev()
    }, [api])
    const scrollNext = React.useCallback(() => {
      api?.scrollNext()
    }, [api])
    const handleKeyDown = React.useCallback(
      (event: React.KeyboardEvent<HTMLDivElement>) => {
        if (event.key === "ArrowLeft") {
          event.preventDefault()
          scrollPrev()
        } else if (event.key === "ArrowRight") {
          event.preventDefault()
          scrollNext()
        }
      },
      [scrollPrev, scrollNext]
    )
    React.useEffect(() => {
      if (!api || !setApi) {
        return
      }
      setApi(api)
    }, [api, setApi])
    React.useEffect(() => {
      if (!api) {
        return
      }
      onSelect(api)
      api.on("reInit", onSelect)
      api.on("select", onSelect)
      return () => {
        api?.off("select", onSelect)
      }
    }, [api, onSelect])
    return (
      <CarouselContext.Provider
        value={{
          carouselRef,
          api: api,
          opts,
          orientation:
            orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
          scrollPrev,
          scrollNext,
          canScrollPrev,
          canScrollNext,
        }}
      >
        <div
          ref={ref}
          onKeyDownCapture={handleKeyDown}
          className={cn("relative", className)}
          role="region"
          aria-roledescription="carousel"
          {...props}
        >
          {children}
        </div>
      </CarouselContext.Provider>
    )
  }
 )
 Carousel.displayName = "Carousel"
 const CarouselContent = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => {
  const { carouselRef, orientation } = useCarousel()
  return (
    <div ref={carouselRef} className="overflow-hidden">
      <div
        ref={ref}
        className={cn(
          "flex",
          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
          className
        )}
        {...props}
      />
    </div>
  )
 })
 CarouselContent.displayName = "CarouselContent"
 const CarouselItem = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => {
  const { orientation } = useCarousel()
  return (
    <div
      ref={ref}
      role="group"
      aria-roledescription="slide"
      className={cn(
        "min-w-0 shrink-0 grow-0 basis-full",
        orientation === "horizontal" ? "pl-4" : "pt-4",
        className
      )}
      {...props}
    />
  )
 })
 CarouselItem.displayName = "CarouselItem"
 const CarouselPrevious = React.forwardRef<
  HTMLButtonElement,
  React.ComponentProps<typeof Button>
 >(({ className, variant = "outline", size = "icon", ...props }, ref) => {
  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
  return (
    <Button
      ref={ref}
      variant={variant}
      size={size}
      className={cn(
        "absolute  h-8 w-8 rounded-full",
        orientation === "horizontal"
          ? "-left-12 top-1/2 -translate-y-1/2"
          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
        className
      )}
      disabled={!canScrollPrev}
      onClick={scrollPrev}
      {...props}
    >
      <ArrowLeft className="h-4 w-4" />
      <span className="sr-only">Previous slide</span>
    </Button>
  )
 })
 CarouselPrevious.displayName = "CarouselPrevious"
 const CarouselNext = React.forwardRef<
  HTMLButtonElement,
  React.ComponentProps<typeof Button>
 >(({ className, variant = "outline", size = "icon", ...props }, ref) => {
  const { orientation, scrollNext, canScrollNext } = useCarousel()
  return (
    <Button
      ref={ref}
      variant={variant}
      size={size}
      className={cn(
        "absolute h-8 w-8 rounded-full",
        orientation === "horizontal"
          ? "-right-12 top-1/2 -translate-y-1/2"
          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
        className
      )}
      disabled={!canScrollNext}
      onClick={scrollNext}
      {...props}
    >
      <ArrowRight className="h-4 w-4" />
      <span className="sr-only">Next slide</span>
    </Button>
  )
 })
 CarouselNext.displayName = "CarouselNext"
 export {
  type CarouselApi,
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselPrevious,
  CarouselNext,
 }
--- a/src/components/ui/chart.tsx
+++ b/src/components/ui/chart.tsx
@@ -0,0 +1,365 @@
 "use client"
 import * as React from "react"
 import * as RechartsPrimitive from "recharts"
 import { cn } from "@/src/lib/utils"
 // Format: { THEME_NAME: CSS_SELECTOR }
 const THEMES = { light: "", dark: ".dark" } as const
 export type ChartConfig = {
  [k in string]: {
    label?: React.ReactNode
    icon?: React.ComponentType
  } & (
    | { color?: string; theme?: never }
    | { color?: never; theme: Record<keyof typeof THEMES, string> }
  )
 }
 type ChartContextProps = {
  config: ChartConfig
 }
 const ChartContext = React.createContext<ChartContextProps | null>(null)
 function useChart() {
  const context = React.useContext(ChartContext)
  if (!context) {
    throw new Error("useChart must be used within a <ChartContainer />")
  }
  return context
 }
 const ChartContainer = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div"> & {
    config: ChartConfig
    children: React.ComponentProps<
      typeof RechartsPrimitive.ResponsiveContainer
    >["children"]
  }
 >(({ id, className, children, config, ...props }, ref) => {
  const uniqueId = React.useId()
  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`
  return (
    <ChartContext.Provider value={{ config }}>
      <div
        data-chart={chartId}
        ref={ref}
        className={cn(
          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
          className
        )}
        {...props}
      >
        <ChartStyle id={chartId} config={config} />
        <RechartsPrimitive.ResponsiveContainer>
          {children}
        </RechartsPrimitive.ResponsiveContainer>
      </div>
    </ChartContext.Provider>
  )
 })
 ChartContainer.displayName = "Chart"
 const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
  const colorConfig = Object.entries(config).filter(
    ([_, config]) => config.theme || config.color
  )
  if (!colorConfig.length) {
    return null
  }
  return (
    <style
      dangerouslySetInnerHTML={{
        __html: Object.entries(THEMES)
          .map(
            ([theme, prefix]) => `
 ${prefix} [data-chart=${id}] {
 ${colorConfig
  .map(([key, itemConfig]) => {
    const color =
      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
      itemConfig.color
    return color ? `  --color-${key}: ${color};` : null
  })
  .join("\n")}
 }
 `
          )
          .join("\n"),
      }}
    />
  )
 }
 const ChartTooltip = RechartsPrimitive.Tooltip
 const ChartTooltipContent = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
    React.ComponentProps<"div"> & {
      hideLabel?: boolean
      hideIndicator?: boolean
      indicator?: "line" | "dot" | "dashed"
      nameKey?: string
      labelKey?: string
    }
 >(
  (
    {
      active,
      payload,
      className,
      indicator = "dot",
      hideLabel = false,
      hideIndicator = false,
      label,
      labelFormatter,
      labelClassName,
      formatter,
      color,
      nameKey,
      labelKey,
    },
    ref
  ) => {
    const { config } = useChart()
    const tooltipLabel = React.useMemo(() => {
      if (hideLabel || !payload?.length) {
        return null
      }
      const [item] = payload
      const key = `${labelKey || item.dataKey || item.name || "value"}`
      const itemConfig = getPayloadConfigFromPayload(config, item, key)
      const value =
        !labelKey && typeof label === "string"
          ? config[label as keyof typeof config]?.label || label
          : itemConfig?.label
      if (labelFormatter) {
        return (
          <div className={cn("font-medium", labelClassName)}>
            {labelFormatter(value, payload)}
          </div>
        )
      }
      if (!value) {
        return null
      }
      return <div className={cn("font-medium", labelClassName)}>{value}</div>
    }, [
      label,
      labelFormatter,
      payload,
      hideLabel,
      labelClassName,
      config,
      labelKey,
    ])
    if (!active || !payload?.length) {
      return null
    }
    const nestLabel = payload.length === 1 && indicator !== "dot"
    return (
      <div
        ref={ref}
        className={cn(
          "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
          className
        )}
      >
        {!nestLabel ? tooltipLabel : null}
        <div className="grid gap-1.5">
          {payload.map((item, index) => {
            const key = `${nameKey || item.name || item.dataKey || "value"}`
            const itemConfig = getPayloadConfigFromPayload(config, item, key)
            const indicatorColor = color || item.payload.fill || item.color
            return (
              <div
                key={item.dataKey}
                className={cn(
                  "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
                  indicator === "dot" && "items-center"
                )}
              >
                {formatter && item?.value !== undefined && item.name ? (
                  formatter(item.value, item.name, item, index, item.payload)
                ) : (
                  <>
                    {itemConfig?.icon ? (
                      <itemConfig.icon />
                    ) : (
                      !hideIndicator && (
                        <div
                          className={cn(
                            "shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
                            {
                              "h-2.5 w-2.5": indicator === "dot",
                              "w-1": indicator === "line",
                              "w-0 border-[1.5px] border-dashed bg-transparent":
                                indicator === "dashed",
                              "my-0.5": nestLabel && indicator === "dashed",
                            }
                          )}
                          style={
                            {
                              "--color-bg": indicatorColor,
                              "--color-border": indicatorColor,
                            } as React.CSSProperties
                          }
                        />
                      )
                    )}
                    <div
                      className={cn(
                        "flex flex-1 justify-between leading-none",
                        nestLabel ? "items-end" : "items-center"
                      )}
                    >
                      <div className="grid gap-1.5">
                        {nestLabel ? tooltipLabel : null}
                        <span className="text-muted-foreground">
                          {itemConfig?.label || item.name}
                        </span>
                      </div>
                      {item.value && (
                        <span className="font-mono font-medium tabular-nums text-foreground">
                          {item.value.toLocaleString()}
                        </span>
                      )}
                    </div>
                  </>
                )}
              </div>
            )
          })}
        </div>
      </div>
    )
  }
 )
 ChartTooltipContent.displayName = "ChartTooltip"
 const ChartLegend = RechartsPrimitive.Legend
 const ChartLegendContent = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div"> &
    Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
      hideIcon?: boolean
      nameKey?: string
    }
 >(
  (
    { className, hideIcon = false, payload, verticalAlign = "bottom", nameKey },
    ref
  ) => {
    const { config } = useChart()
    if (!payload?.length) {
      return null
    }
    return (
      <div
        ref={ref}
        className={cn(
          "flex items-center justify-center gap-4",
          verticalAlign === "top" ? "pb-3" : "pt-3",
          className
        )}
      >
        {payload.map((item) => {
          const key = `${nameKey || item.dataKey || "value"}`
          const itemConfig = getPayloadConfigFromPayload(config, item, key)
          return (
            <div
              key={item.value}
              className={cn(
                "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
              )}
            >
              {itemConfig?.icon && !hideIcon ? (
                <itemConfig.icon />
              ) : (
                <div
                  className="h-2 w-2 shrink-0 rounded-[2px]"
                  style={{
                    backgroundColor: item.color,
                  }}
                />
              )}
              {itemConfig?.label}
            </div>
          )
        })}
      </div>
    )
  }
 )
 ChartLegendContent.displayName = "ChartLegend"
 // Helper to extract item config from a payload.
 function getPayloadConfigFromPayload(
  config: ChartConfig,
  payload: unknown,
  key: string
 ) {
  if (typeof payload !== "object" || payload === null) {
    return undefined
  }
  const payloadPayload =
    "payload" in payload &&
    typeof payload.payload === "object" &&
    payload.payload !== null
      ? payload.payload
      : undefined
  let configLabelKey: string = key
  if (
    key in payload &&
    typeof payload[key as keyof typeof payload] === "string"
  ) {
    configLabelKey = payload[key as keyof typeof payload] as string
  } else if (
    payloadPayload &&
    key in payloadPayload &&
    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
  ) {
    configLabelKey = payloadPayload[
      key as keyof typeof payloadPayload
    ] as string
  }
  return configLabelKey in config
    ? config[configLabelKey]
    : config[key as keyof typeof config]
 }
 export {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  ChartLegend,
  ChartLegendContent,
  ChartStyle,
 }
--- a/src/components/ui/checkbox.tsx
+++ b/src/components/ui/checkbox.tsx
@@ -0,0 +1,30 @@
 "use client"
 import * as React from "react"
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
 import { Check } from "lucide-react"
 import { cn } from "@/src/lib/utils"
 const Checkbox = React.forwardRef<
  React.ElementRef<typeof CheckboxPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
 >(({ className, ...props }, ref) => (
  <CheckboxPrimitive.Root
    ref={ref}
    className={cn(
      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
      className
    )}
    {...props}
  >
    <CheckboxPrimitive.Indicator
      className={cn("flex items-center justify-center text-current")}
    >
      <Check className="h-4 w-4" />
    </CheckboxPrimitive.Indicator>
  </CheckboxPrimitive.Root>
 ))
 Checkbox.displayName = CheckboxPrimitive.Root.displayName
 export { Checkbox }
--- a/src/components/ui/collapsible.tsx
+++ b/src/components/ui/collapsible.tsx
@@ -0,0 +1,11 @@
 "use client"
 import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
 const Collapsible = CollapsiblePrimitive.Root
 const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
 const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
 export { Collapsible, CollapsibleTrigger, CollapsibleContent }
--- a/src/components/ui/command.tsx
+++ b/src/components/ui/command.tsx
@@ -0,0 +1,153 @@
 "use client"
 import * as React from "react"
 import { type DialogProps } from "@radix-ui/react-dialog"
 import { Command as CommandPrimitive } from "cmdk"
 import { Search } from "lucide-react"
 import { cn } from "@/src/lib/utils"
 import { Dialog, DialogContent } from "@/src/components/ui/dialog"
 const Command = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive>,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
 >(({ className, ...props }, ref) => (
  <CommandPrimitive
    ref={ref}
    className={cn(
      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
      className
    )}
    {...props}
  />
 ))
 Command.displayName = CommandPrimitive.displayName
 const CommandDialog = ({ children, ...props }: DialogProps) => {
  return (
    <Dialog {...props}>
      <DialogContent className="overflow-hidden p-0 shadow-lg">
        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
          {children}
        </Command>
      </DialogContent>
    </Dialog>
  )
 }
 const CommandInput = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.Input>,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
 >(({ className, ...props }, ref) => (
  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
    <CommandPrimitive.Input
      ref={ref}
      className={cn(
        "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
        className
      )}
      {...props}
    />
  </div>
 ))
 CommandInput.displayName = CommandPrimitive.Input.displayName
 const CommandList = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.List>,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
 >(({ className, ...props }, ref) => (
  <CommandPrimitive.List
    ref={ref}
    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
    {...props}
  />
 ))
 CommandList.displayName = CommandPrimitive.List.displayName
 const CommandEmpty = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.Empty>,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
 >((props, ref) => (
  <CommandPrimitive.Empty
    ref={ref}
    className="py-6 text-center text-sm"
    {...props}
  />
 ))
 CommandEmpty.displayName = CommandPrimitive.Empty.displayName
 const CommandGroup = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.Group>,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
 >(({ className, ...props }, ref) => (
  <CommandPrimitive.Group
    ref={ref}
    className={cn(
      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
      className
    )}
    {...props}
  />
 ))
 CommandGroup.displayName = CommandPrimitive.Group.displayName
 const CommandSeparator = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.Separator>,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
 >(({ className, ...props }, ref) => (
  <CommandPrimitive.Separator
    ref={ref}
    className={cn("-mx-1 h-px bg-border", className)}
    {...props}
  />
 ))
 CommandSeparator.displayName = CommandPrimitive.Separator.displayName
 const CommandItem = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
 >(({ className, ...props }, ref) => (
  <CommandPrimitive.Item
    ref={ref}
    className={cn(
      "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
      className
    )}
    {...props}
  />
 ))
 CommandItem.displayName = CommandPrimitive.Item.displayName
 const CommandShortcut = ({
  className,
  ...props
 }: React.HTMLAttributes<HTMLSpanElement>) => {
  return (
    <span
      className={cn(
        "ml-auto text-xs tracking-widest text-muted-foreground",
        className
      )}
      {...props}
    />
  )
 }
 CommandShortcut.displayName = "CommandShortcut"
 export {
  Command,
  CommandDialog,
  CommandInput,
  CommandList,
  CommandEmpty,
  CommandGroup,
  CommandItem,
  CommandShortcut,
  CommandSeparator,
 }
--- a/Show More
+++ b/Show More
		`@@ -0,0 +1 @@`
							`<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>`
		`@@ -0,0 +1 @@`
							<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
		`@@ -0,0 +1 @@`
							<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
		`@@ -0,0 +1 @@`
							`<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>`