Iremos desenvolver a centra de catalogo da Moriah moveis: Crie uma interface de Catálogo Inteligente para uma loja de móveis utilizando Next.js e Tailwind CSS. O objetivo é transformar tabelas bagunçadas de fornecedores em um painel de busca rápida.
A interface deve conter:
Dashboard Header: Com uma barra de busca centralizada e filtros por 'Fornecedor' e 'Categoria' (Sofás, Mesas, Cadeiras).
Product Grid: Cards de produtos contendo:
Foto do produto (placeholder).
Nome e Código (SKU) do fornecedor.
Preço de Custo vs. Preço de Venda (destacado).
Badge de status: 'Cadastrado no GestãoClick' (verde) ou 'Pendente' (amarelo).
Sidebar de Importação: Um componente lateral para 'Upload de Tabela' (Drag & Drop) com suporte para PDF e Excel.
Quick Action: Botão em cada card escrito 'Enviar para GestãoClick'.
Estilo Visual: Design limpo, moderno, focado em produtividade (estilo SaaS), utilizando tons de azul e cinza claro.
Agora vou ler os arquivos existentes e criar a interface do catálogo:
Agora vou criar a interface completa do catálogo. Primeiro, vou atualizar o tema e depois criar os componentes:
Agora vou criar a página principal do catálogo e atualizar o layout:
A interface do Catálogo Inteligente da Moriah Móveis está pronta! Criei uma interface completa e moderna com:
Dashboard Header:
Product Grid:
Sidebar de Importação:
Estilo Visual:
Gostei do layout, mas vamos refinar a experiência do usuário (UX) para torná-lo funcional:
Edição Rápida: Adicione a funcionalidade de editar o 'Preço de Venda' direto no card do produto, atualizando a 'Margem' em tempo real.
Feedback de Cadastro: Quando eu clicar em 'Enviar para GestãoClick', mostre um estado de 'Loading' no botão e depois mude o badge para 'Sucesso - Cadastrado'.
Logs de Importação: Na sidebar de 'Arquivos Importados', adicione uma barra de progresso real para o arquivo que está 'Processando'.
Responsividade: Garanta que a visualização em dispositivos móveis (celular) priorize a busca e a lista de itens, já que os vendedores usam muito o celular na loja
Vou ler os componentes atuais para fazer as melhorias de UX:
Agora vou ler o DashboardHeader e ProductGrid para garantir que entendo a estrutura completa antes de fazer as alterações:
Agora tenho uma visão completa do sistema. Vou fazer as melhorias de UX:
Agora preciso verificar se o componente Progress existe e se o Sheet esta disponível:
Preciso adicionar os componentes Progress e Sheet. Vou instalá-los com o shadcn CLI:
Run this command?
cd /vercel/share/v0-project && pnpm dlx shadcn@latest add progress sheet -y