name: comercialrs-settings-debugging

description: Debugging Settings page tabs and conditional rendering in ComercialRS

category: browser-debugging

ComercialRS Settings Page - Debugging Conditional Tabs

Common Issue

The "Automações" tab in /settings only renders when !isPreSales:

`tsx

{!isPreSales && (

Automações

)}

`

If the user can't see the Automações tab, isPreSales is evaluating to true for their profile — even if their profiles.role shows "admin".

Debug Steps

1. Check profile role directly via Management API:

`bash

curl -s -X POST 'https://api.supabase.com/v1/projects/{ref}/database/query' \

-H 'Authorization: Bearer {pat}' \

-H 'Content-Type: application/json' \

-d '{"query": "SELECT profiles.id, profiles.user_id, profiles.role, auth.users.email FROM profiles JOIN auth.users ON profiles.user_id = auth.users.id;"}'

`

2. Check user_roles table for the user:

`bash

curl -s -X POST 'https://api.supabase.com/v1/projects/{ref}/database/query' \

-H 'Authorization: Bearer {pat}' \

-H 'Content-Type: application/json' \

-d '{"query": "SELECT * FROM user_roles WHERE user_id = '\''{user_id}'\'';"}'

`

3. In browser console, try clicking the tab directly:

`javascript

document.querySelector('[role="tab"][value="automations"]')?.click()

// or

document.querySelector('[role="tab"]:nth-of-type(5)')?.click()

`

Browser Tool Gotchas

• - browser_click times out on some interactive elements (tabs, switches) — try browser_console with direct JS click instead
• - browser_console returns null on failure — always follow with browser_snapshot to verify state change
• - browser_vision needs actual image attachment — file paths don't work, must paste/upload image directly in chat
• - browser_snapshot doesn't capture React-rendered content well — use browser_vision for visual confirmation of React UIs

Relevant Code Locations

• - Settings.tsx lines 307-318: Tab rendering logic
• - AdmGuard.tsx: Checks user_roles table (NOT profiles.role) for admin access