> ## Documentation Index
> Fetch the complete documentation index at: https://docs.fixr.com.br/llms.txt
> Use this file to discover all available pages before exploring further.

# Telas e Componentes

> Descrição das telas mais importantes e dos componentes de interface usados.

A interface do Fixr foi cuidadosamente desenhada para garantir uma experiência intuitiva e eficiente para os usuários. A seguir, descrevemos algumas das telas mais importantes e os principais componentes de interface que ajudam a manter a consistência visual, baseando-se no sistema de design.

## Tela de Login

A tela de login do Fixr segue os princípios do sistema de design, com foco na simplicidade e clareza. Esta tela utiliza o azul da marca para destacar os elementos principais, como o botão de "Entrar", enquanto o fundo permanece em um tom neutro, variando entre o tema claro e escuro, que facilita o foco no formulário de autenticação.

<Frame>
  <img src="https://mintcdn.com/fixr/CjsYTFpJxZqxd5Uf/public/images/login_light.png?fit=max&auto=format&n=CjsYTFpJxZqxd5Uf&q=85&s=3b007dff060330d7a6da8c2ddf28f81e" alt="" width="2160" height="1350" data-path="public/images/login_light.png" />
</Frame>

<Frame caption="Variações entre o tema claro e escuro, destacando a interface limpa e o uso de cores primárias">
  <img src="https://mintcdn.com/fixr/CjsYTFpJxZqxd5Uf/public/images/login_dark.png?fit=max&auto=format&n=CjsYTFpJxZqxd5Uf&q=85&s=0777a5ae8f06fa657462e7f388edaa26" alt="" width="2160" height="1350" data-path="public/images/login_dark.png" />
</Frame>

## Componente de Acompanhamento de Status das Ordens de Serviço

O acompanhamento de status das ordens de serviço é uma parte central da interface do Fixr, proporcionando aos usuários uma visão clara do progresso de cada pedido. Esse componente é visualmente segmentado em quatro status principais, que ajudam a comunicar o estágio atual da ordem e facilitam a navegação e a organização.

* **Completa**: Exibida em verde, para ordens de serviço finalizadas.
* **Em Progresso**: Representada em azul, mostrando ordens que estão sendo trabalhadas.
* **Incompleta**: Exibida em um tom de azul claro, indicando ordens com pendências ou bloqueios.
* **Comentários dos Técnicos**: Um espaço dedicado para observações e atualizações importantes de cada ordem, permitindo que os técnicos forneçam detalhes adicionais para o cliente e equipe.

<Frame caption="Componente de status da &#x22;OS&#x22; com as diferentes etapas e comentários dos técnicos">
  <img src="https://mintcdn.com/fixr/CjsYTFpJxZqxd5Uf/public/images/os_steps_component.png?fit=max&auto=format&n=CjsYTFpJxZqxd5Uf&q=85&s=e0dba26711603190eecc2ca815d25ade" alt="" width="1293" height="1344" data-path="public/images/os_steps_component.png" />
</Frame>

***

<Card title="Veja o protótipo no Figma!" href="https://www.figma.com/design/IECYvToOBshaShNi7LtNwc/Fixr?node-id=16-185&t=6K7hhycmSNyXjswf-1" img="https://mintcdn.com/fixr/CjsYTFpJxZqxd5Uf/public/images/figma_preview.png?fit=max&auto=format&n=CjsYTFpJxZqxd5Uf&q=85&s=43343392762c80dc44c713e54bc5b021" width="1916" height="990" data-path="public/images/figma_preview.png">
  Acompanhe as alterações nas telas da aplicação, no sistema de design, nos wireframes e mais!
</Card>
