Let me read the current components to understand the full structure and make the necessary adjustments:

Now I understand the current structure. I need to:

1. Update establishments to show only Markets and Pharmacies (with QR Code functionality)
2. Create a QR Code scanner modal/view for using balance
3. Update the quick actions and flow

Let me make these changes:

Now let me create the QR Code Scanner Modal component:

Now let me update the Quick Actions to reflect the new focus on markets and pharmacies:

Now let me update the grid layout for 3 quick actions:

Now let me update the recent transactions to show purchases at markets and pharmacies:

Now let me update the main page balance summary to reflect the new spent amounts:

Now let me update the token wallet card to reflect the correct spent amount matching the transactions:

I've successfully updated the interface based on the requirements. Here's a summary of the changes:

1. Estabelecimentos Credenciados - Completely redesigned to show only Markets (Mercados) and Pharmacies (Farmácias) with:

   • Category tabs for filtering (Todos, Mercados, Farmácias)
   • Visual icons (ShoppingCart for markets, Pill for pharmacies)
   • Color-coded badges (blue for markets, rose for pharmacies)
   • "Usar Saldo Aqui" button that opens the QR Code scanner

2. QR Code Scanner Modal - Created a new component with:

   • Camera activation for scanning QR codes
   • Clear instructions: "Aponte a câmera para o QR Code do estabelecimento"
   • Establishment info display during scanning
   • Available balance prominently shown
   • Visual scanning animation with corner brackets and scanning line
   • Success/error states with appropriate feedback
3. Quick Actions - Updated with 3 actions: Escanear QR Code, Mercados, and Farmácias
4. Recent Transactions - Updated to show purchases at markets (Supermercado Extra, Mercado Pão de Açúcar) and pharmacies (Drogaria São Paulo)
5. Balance Summary Card - Updated to show count of Markets and Pharmacies separately with their respective colors

I need to add clear messaging about payroll deduction throughout the interface. Let me read the current components to add the appropriate messaging:

Now I'll add the payroll deduction messaging throughout the interface. Let me update the components:

Now let me add a payroll info notice to the establishments section:

I've added clear payroll deduction messaging throughout the interface at all key points:

1. Token Wallet Card - Added a notice below the balance details: "O valor utilizado será descontado automaticamente em folha de pagamento"

2. QR Code Scanner Modal - Added two payroll-related messages:

   • Before scanning: "O valor será descontado em folha, sem necessidade de pagamento no local" (amber/warning style for visibility)
   • After successful scan: "O valor será descontado automaticamente em sua folha de pagamento" (blue/info style)
3. Establishments Section - Added a prominent notice at the top of the credentialed establishments list with the payroll deduction information

This ensures users are clearly informed at every step of the journey that no on-site payment is needed and amounts will be deducted from their payroll.