Pro Included Pages
Viewing latest docs.
Switch version: v3

Included Pages

While screenshots in this section are in dark mode, every page also has a light mode.

Public pages

Landing page

We have provided a clean, animated landing page with editable components to get you started. It is composed of a number of separate components defined in lib/components/landing_page.ex and supports light and dark mode.

Note that this page has some unique CSS and Javascript to help with animations. We use skypack to avoid a build system and prevent polluting our app.js - see the PetalPro.Components.LandingPage.javascript/1 function.

Over time we hope to build a comprehensive set of landing page components that you can mix and match.

Auth pages

All auth pages share a consistent design. These have come from mix phx.gen.auth but are styled with Tailwind and Petal Components:

  • Register page
  • Sign in page
  • Forgot password page

Protected pages

User dashboard page

Upon signing in users will see a dashboard page on the /app route. This uses the sidebar layout. By default this shows the organizations the user is in. However this can be modified to whatever you like in dashboard_live.ex.

User onboarding page

When a user signs in for the first time, they will be presented with an onboarding page. This is useful for either collecting more information about a user or displaying a guide to using your web application.

The way this is tracked is by looking at user.is_onboarded. Upon onboarding this field will be set to true and won’t be presented with this page again.

The redirect happens in a plug defined in the router:

elixir
defp onboard_new_users(conn, _opts) do
  if conn.assigns[:current_user] && !conn.assigns.current_user.is_onboarded do
    conn
    |> redirect(to: Routes.live_path(conn, PetalProWeb.UserOnboardingLive))
    |> halt()
  else
    conn
  end
end

You can pipe any set of routes through this plug like so:

elixir
scope "/", PetalProWeb do
  pipe_through [:browser, :onxboard_new_users]

  # routes go here
end

User settings pages

The user settings area contains several sub-pages for managing account details.

Edit profile

Where users can modify their profile. By default, it will just be the user’s name. You may add in other fields here over time like social profiles, avatar upload and user bio.

Change email

A user can submit an email change request here. This stores a user_token in the database that matches to a URL sent in a confirmation email. If the user clicks the confirmation email, the email will be changed.

Edit password

No further explanation needed.

Edit notifications

Users can subscribe or unsubscribe from notification types, and now (v4) toggle in-app and email delivery independently for each type. Security-critical notifications — such as password change alerts — are forced-on and cannot be disabled by the user.

By default a “Marketing notifications” type is included, which you can rename to something like “Product updates”. Add new notification types as your app grows (e.g. “Comment replies”, “Weekly digest”) and they’ll appear here automatically.

Your Data

Available at /app/users/your-data, this page covers GDPR compliance for your users:

  • Data export — downloads a JSON file containing all personal data associated with the account (profile, orgs, logs, notifications, etc.)
  • Account deletion — submits a deletion request that runs as a background Oban job, performing soft-delete and anonymization cascade across related records

When you add new user-associated schemas, update PetalPro.Accounts.GDPR to include them in export_user_data/1 and execute_data_deletion/1.

Feedback widget

A feedback button is available on every authenticated page. Users can submit text feedback without navigating away from what they’re doing. Submissions are stored and surfaced in the admin dashboard.

Organization pages

elixir
live "/org/new", NewOrgLive
live "/org/:org_slug", OrgDashboardLive
live "/org/:org_slug/edit", EditOrgLive
live "/org/:org_slug/team", OrgTeamLive, :index
live "/org/:org_slug/team/invite", OrgTeamLive, :invite
live "/org/:org_slug/team/memberships/:id/edit", OrgTeamLive, :edit_membership

We have provided a basic CRUD for organizations. This is useful if you’re building an app where people are part of any kind of organization (eg. a company or club). An organization member can be an admin or ordinary member. Members can invite new members. Admins can manage memberships. You can read more in the organizations documentation.

Admin pages

User management page

The admin user management page shows a list of your apps users. You can search users by name/email/ID and edit their fields.

Logs page

The admin logs page lets you view user activity. When a user does something on your platform a new log is created. It is up to you how many actions you want to log. By default the following actions are logged:

elixir
defmodule PetalPro.Logs.Log do
  ...

  @action_options [
    "update_profile",
    "register",
    "sign_in",
    "passwordless_pin_sent",
    "passwordless_pin_too_many_incorrect_attempts",
    "sign_out",
    "confirm_email",
    "request_new_email",
    "confirm_new_email",
    "delete_user",
    "orgs.create",
    "orgs.delete_member",
    "orgs.update_member",
    "orgs.create_invitation",
    "orgs.delete_invitation",
    "orgs.accept_invitation",
    "orgs.reject_invitation"
  ]

  ...
end

The logs page simply allows an admin user to browse these logs. There’s also an option to turn on “live logs”, where the logs table will update as users perform actions in real time.

Admin: Feedback

An admin dashboard for reviewing and managing user feedback submissions. Entries show the submitting user, timestamp, and feedback content. Admins can mark items as reviewed or delete them.

Admin: AI Chat

An AI chat interface powered by Jido. Admins can ask questions or issue commands in natural language — the AI dispatches to registered tools that can look up users, manage orgs, fetch stats, publish changelog entries, and more.

Tools live in PetalPro.Ai.Tools. To add a custom tool, implement the PetalPro.Ai.Tool behaviour and add the module to the registry.

Admin: MCP Server

An MCP (Model Context Protocol) endpoint at POST /api/mcp exposes the same admin tools to external AI clients via JSON-RPC 2.0. This means you can connect Claude Code or Claude Desktop directly to your running application.

Setup:

Set MCP_ADMIN_TOKEN in your environment, then add the server to .mcp.json:

json
{
  "mcpServers": {
    "my-app-dev": {
      "command": "npx",
      "args": ["-y", "mcp-remote", "http://localhost:4000/api/mcp"],
      "env": {
        "MCP_BEARER_TOKEN": "your-token-here"
      }
    }
  }
}

Once connected, your AI assistant can query and manage your app without leaving the editor.

Dev pages

Email templates

This page shows a list of all transactional emails. Allows developers to see what emails look like without having to continually send them.

Sent emails

A viewer for sent emails. This comes with Swoosh, the email sending library. We’ve just housed it in the dev section.

DB Schema Visualizer

An interactive Mermaid ER diagram of your database schema, grouped by domain. Tables are pan/zoom-able. Each node shows column names with PK/FK indicators. Useful for onboarding new team members and exploring how the pieces fit together.

Only available in the dev environment.

Route Tree

A hierarchical, collapsible tree view of all routes in the application, mirroring the URL path structure. Each node shows HTTP verb badges and a click-to-copy helper for the full path. Much easier to scan than mix phx.routes when the route table gets long.

Only available in the dev environment.