Como adicionar busca, filtro por datas e exportação CSV ao dashboard no Google AI Studio

Na primeira parte, você montou um dashboard de barbearia fictícia no Build mode do Google AI Studio, conferiu os indicadores e aplicou um filtro por status. Agora vamos acrescentar três recursos usando os mesmos registros: busca por cliente ou serviço, intervalo de datas e exportação das linhas filtradas para CSV.

O exercício continua sem login, banco de dados ou informações reais. A busca e os filtros atuam sobre a lista fictícia que já está no projeto; o arquivo CSV é montado pelo navegador e baixado no computador de quem está testando.

A tabela, os indicadores e a exportação precisam usar a mesma lista filtrada, não três conjuntos de regras diferentes.

Abra o projeto anterior no Google AI Studio. Primeiro peça uma mudança pequena: adicione um campo de busca que procure no nome fictício e no serviço, além dos controles de data inicial e final. Mantenha o filtro de status que já existe. Como as datas do JSON estão no formato AAAA-MM-DD, a comparação de strings funciona em ordem cronológica para esse formato.

Continue o dashboard de agendamentos fictícios existente. Não recrie o projeto e não altere os dados.

Adicione um campo de busca que filtre por cliente ou serviço, mantendo o filtro de status que já existe. Inclua data inicial e data final opcionais no formato YYYY-MM-DD. Combine todos os critérios na mesma lista filtrada e use essa lista na tabela e nos indicadores que dependem dos resultados.

Mantenha as datas como ISO YYYY-MM-DD nos dados; mostre-as em português do Brasil na interface. Inclua botão para limpar todos os filtros e mensagem acessível quando nenhum registro corresponder. Preserve o layout e não adicione API, login, banco de dados ou dados reais. Antes de terminar, explique como testar combinações de busca, status e datas.

Teste uma palavra que exista em apenas um serviço, depois combine essa busca com um status e um intervalo que tenha pelo menos dois dias. Confira também o estado sem resultado e use Limpar filtros para voltar à tabela inteira. Se o dashboard calcula receita ou totais, confirme se a regra de negócio continua igual: filtrar linhas não deve mudar quais status entram na receita concluída.

O Google AI Studio cria e altera código a partir do prompt, mas você continua responsável por revisar a implementação. Abra a área de código, localize a função que prepara as linhas filtradas e veja se os três critérios são aplicados antes da tabela e dos cálculos.

Agora peça um botão Exportar CSV. A instrução principal é que ele receba a mesma lista já filtrada, inclua cabeçalhos claros e não faça uma nova consulta nem exporte registros escondidos pelos filtros. Para uma aplicação em português, o ponto e vírgula costuma facilitar a abertura em algumas configurações regionais do Excel; explique essa escolha e teste o arquivo no programa que você usa.

Adicione um botão “Exportar CSV” ao dashboard e use exatamente o array de registros que já foi filtrado por busca, status e intervalo de datas. Exporte somente as linhas visíveis, com cabeçalhos Cliente, Serviço, Data, Valor e Status.

Crie o arquivo no navegador usando Blob e URL.createObjectURL, sem enviar os dados a um serviço externo. Escape aspas e separadores para que valores não quebrem as colunas, use codificação UTF-8 com BOM para facilitar a leitura de acentos em planilhas e gere nome de arquivo neutro com a data do dia. Desabilite o botão ou mostre uma mensagem quando não houver linhas. Não altere os cálculos, os registros nem o restante do layout.

const colunas = [
  ['Cliente', 'cliente'],
  ['Serviço', 'servico'],
  ['Data', 'data'],
  ['Valor (R$)', 'valor'],
  ['Status', 'status'],
];

const escapar = (valor) =>
  `"${String(valor ?? '').replaceAll('"', '""')}"`;

function baixarCsv(registrosFiltrados) {
  if (registrosFiltrados.length === 0) return;

  const cabecalho = colunas.map(([titulo]) => escapar(titulo)).join(';');
  const linhas = registrosFiltrados.map((registro) =>
    colunas
      .map(([, chave]) => {
        const valor = registro[chave];
        const formatado = typeof valor === 'number'
          ? valor.toFixed(2).replace('.', ',')
          : valor;
        return escapar(formatado);
      })
      .join(';'),
  );

  const conteudo = ['\uFEFF', [cabecalho, ...linhas].join('\r\n')];
  const arquivo = new Blob(conteudo, { type: 'text/csv;charset=utf-8' });
  const url = URL.createObjectURL(arquivo);
  const link = document.createElement('a');
  link.href = url;
  link.download = 'agendamentos-ficticios.csv';
  link.click();
  setTimeout(() => URL.revokeObjectURL(url), 0);
}

Gere um CSV sem filtros e outro com uma busca e um intervalo ativos. Abra os dois arquivos e compare a quantidade de linhas com a tabela. Confira se acentos, valores decimais, aspas e títulos não se misturaram entre colunas. O exemplo acima usa ponto e vírgula e vírgula decimal; se seu programa de planilhas espera outro padrão, ajuste e teste explicitamente.

Se uma futura versão exportar texto digitado por usuários, faça uma revisão de segurança para evitar que conteúdo iniciado por sinais como igual ou arroba seja interpretado como fórmula por uma planilha. Neste tutorial, mantenha apenas os registros inventados do projeto.

• Busca por cliente encontra o registro esperado e ignora diferenças entre maiúsculas e minúsculas.
• Busca por serviço funciona combinada com status e datas.
• Data inicial e final são opcionais e incluem os limites escolhidos.
• O botão exporta só o resultado visível e fica indisponível sem resultados.
• O arquivo abre com os acentos e as colunas corretos na planilha escolhida.

O CSV é gerado no navegador a partir de dados que já estão no código; ele não é um relatório oficial e não sincroniza alterações. O protótipo continua sem persistência ou acesso controlado. Nunca troque os nomes fictícios por dados de clientes para publicar uma demonstração.

O Build mode do Google AI Studio permite construir e testar aplicações com instruções em linguagem natural. Para esta etapa, não é preciso publicar o app nem configurar uma chave da Gemini API: o objetivo é aprender filtros, leitura de estado e exportação local.