Great question! There are several UX approaches for handling viewer permissions. Let me show you both strategies - displaying a read-only message and disabling/hiding elements - so you can see which works better for your use case.

Key UX Strategies Demonstrated:

1. Clear Permission Indicator

• Role badge (Admin/Viewer) in the header
• Immediate visual feedback about user capabilities

2. Read-Only Message (Optional)

• Informative alert explaining the limitation
• Provides context and next steps (contact admin)
• Can be toggled on/off based on your preference

3. Disabled Form Elements

• Fields are visually disabled with gray background
• Cursor changes to "not-allowed"
• Maintains form structure while preventing interaction

4. Conditional Action Buttons

• Hide save/cancel buttons for viewers
• Show disabled delete button with explanation
• Prevents confusion about available actions

5. Contextual Messaging

• Different placeholder text based on role
• Adapted danger zone messaging for viewers

Recommendations:

Use the message approach when:

• Users might not understand why they can't edit
• You want to provide clear next steps
• The limitation is temporary or role-based

Hide/disable elements when:

• The interface is self-explanatory
• You want a cleaner, less cluttered view
• Users are familiar with permission systems

Best practice: Combine both approaches - use a subtle message and disable elements for the clearest user experience.

Perfect! Let me show you how the viewer permission concepts would apply to this financial dashboard. I'll recreate the FinFlow interface with both admin and viewer modes to demonstrate the different approaches.

Key Changes for Viewer Mode:

1. Header Actions

• Admin: Active "New Bill" button
• Viewer: Disabled button with lock icon

2. Add New Bill Card

• Admin: Interactive dashed border card with hover effects
• Viewer: Disabled card with lock icon and reduced opacity

3. Permission Badge

• Clear role indicator in the sidebar
• Visual distinction between Admin (shield) and Viewer (eye)

4. Empty State Messaging

• Admin: Encourages action ("Add Your First Bill")
• Viewer: Explains limitation and suggests contacting admin

5. Contextual Alerts

• Optional read-only message explaining viewer limitations
• Provides clear next steps for users

6. Visual Hierarchy

• Disabled elements use muted colors and lock icons
• Maintains layout consistency while clearly indicating restrictions

UX Benefits:

• Clear Communication: Users immediately understand their permission level
• Consistent Experience: Layout remains the same, only interactivity changes
• Guided Actions: Viewers know who to contact for changes
• Professional Appearance: Disabled state looks intentional, not broken

This approach works well for financial applications where data visibility is important but modification rights need to be carefully controlled.