Authvaultix
    Dashboard
    • Overview
    • Dashboard
    • Pages
    • API
    • Dashboard
    Discord
    Github

    Dashboard

    Dashboard (UI Flow)#

    This section explains the Dashboard UI. It provides users with a single page where they can view their account status, applications overview, integration snippets, and quick actions.
    The goal of the dashboard is to allow users to instantly understand their account status and determine their next action.

    1) Alerts Section (Role-based Warnings)#

    At the top of the dashboard, alerts are displayed based on the user’s role.
    These alerts immediately inform the user if there are restrictions caused by subscription or permission issues.

    A) Manager / Reseller Alert (Owner Expired)#

    If the logged-in user has the role manager or reseller and the owner’s subscription is expired or invalid:
    • Alert Type: Danger (Red)
    • Message: “Service Suspended”
    • Impact: Managers and resellers cannot create new users or licenses
    The purpose is to clearly inform subordinates that the issue is not with their account, but with the owner’s subscription.

    B) Tester Alert (Subordinates Restricted)#

    If the user is on the Tester plan and has managers or resellers under their account:
    • Alert Type: Warning (Yellow)
    • Message: “Subordinate Accounts Restricted”
    • Impact: Managers and resellers remain restricted until the owner upgrades
    • Suggestion: Upgrade to Developer or Seller to restore access
    The purpose is to inform the owner that lower-tier plans limit the functionality of subordinate accounts.

    2) Welcome Banner (Profile Summary)#

    After the alerts section, a Welcome Banner card appears containing quick identity and subscription information for the user.
    • Profile Image: AuthVaultix logo
    • Welcome Text: “Welcome back, Username!”
    • Role Badge: Displays the current role (tester, developer, seller, manager, reseller, etc.)
    • Expiry: Expiry date with a color indicator ($expiry_color)

    Edit Profile Button#

    On desktop screens (md+), an Edit Profile button is visible which takes the user to the Account Settings page:
    • Link: win/app/?page=account-settings

    3) Stats Grid (Top 3 Summary Cards)#

    Below the welcome banner is a stats grid that contains three quick summary cards.

    Card 1 — Applications#

    • Title: Applications
    • Value: Total number of apps (count($applications))
    • Subtitle: Active Projects

    Card 2 — Current Plan#

    • Title: Current Plan
    • Value: Role name (capitalized)
    • Subscription Status: Paid / Free
    Paid roles: seller, developer, manager
    Free role: tester

    Card 3 — Subscription Expiry#

    • Title: Subscription Expiry
    • Value: Expiry display text
    • Status: Color indicator based on expiry status (green / amber / red)

    4) Integration Section (Code Snippets + Actions)#

    If a current_app is selected, a full-width Integration section appears on the dashboard.
    This section provides developers with ready-to-use code snippets to quickly start integrating the API.

    A) Integration Title#

    • Heading: Integration: Current App Name

    B) Language Tabs#

    Multiple language buttons are available (for example: C#, Python, etc.), which switch between different code snippets.
    • The active tab is highlighted
    • Clicking a tab updates the code preview area

    C) Code Preview#

    Each language snippet is displayed inside a <pre> block.
    The first tab’s code is visible by default, while others remain hidden using d-none.

    D) Action Bar Buttons#

    • Copy Credentials: Copies the code snippet from the currently selected tab to the clipboard
    • View Examples: Opens the GitHub or examples page (based on the tab URL)
    • Watch Tutorial: Opens a YouTube tutorial link (if available)
    The copy system includes a fallback method: if clipboard access is blocked, it attempts copying using a textarea method.

    5) Main Content Area#

    The main dashboard content is divided into a two-column layout:
    • Left: Applications table
    • Right: Quick Actions and promotional card

    6) Left Column — Your Applications Table#

    This card lists all user applications and allows the user to select an application.

    Table Columns#

    • Application (name + version / selected tag)
    • Secret Key (masked preview: first 12 characters + ...)
    • Status (Active / Paused badge)
    • Action (Select / Active button)

    Row Highlight#

    If a row matches the selected_app, it receives a subtle highlight.
    • Selected: “Selected” label is displayed
    • Button: “Active” disabled button
    If the application is not selected, the user can click the Select button to make it the current application.

    7) Right Column — Quick Actions#

    On the right side there is a compact Quick Actions card that contains fast navigation buttons.
    • Manage Users → Opens the users management page
    • Licenses → Opens the license/keys page
    The purpose is to allow frequently used pages to be opened with a single click.

    8) Dynamic Promo Card (Role-based)#

    Below Quick Actions there is a promo card that changes based on the user's role.
    This card encourages upgrades or the next step in the user's journey.

    Tester#

    • Title: Upgrade Pro!
    • Goal: Encourage upgrading to Developer or Seller

    Developer#

    • Title: Start Selling
    • Goal: Encourage upgrading to the Seller plan

    Seller#

    • Title: Elite Status
    • Goal: Confirm top-tier status and display benefits
    Clicking the promo card redirects the user to a predefined link (payment / Razorpay etc.).

    9) Tab Switching + Copy (JavaScript UI Behavior)#

    A) switchTab()#

    • Updates the active state of tabs
    • Displays the relevant code block
    • Updates the “View Examples” button URL

    B) copyCurrentCode()#

    • Reads the text from the current code block
    • If the Clipboard API is available → copies directly
    • Otherwise uses a fallback textarea copy method
    • On success the button temporarily shows “Copied!”

    10) Dashboard Benefits#

    • Instant overview: Role, expiry, and applications count visible at a glance
    • Fast setup: Integration snippets with copy credentials feature
    • Fast navigation: Quick access to frequently used pages
    • Role awareness: Alerts clearly show restrictions
    • App management: Applications can be selected and monitored directly from the dashboard
    Modified at 2026-03-04 16:15:25
    Built with