About

A frame that simulates the complete Skedulo web application layout — a top navigation bar with the standard Skedulo nav items, a page header area, and a main content area where your prototype renders. Use this frame when prototyping full-page experiences like list views, detail pages, dashboards, or any feature that occupies the main content area of the application. The top navigation bar includes standard Skedulo nav items (Schedule, Locations, Resources, Availability, Manage, Other) with an active state indicator, a search bar, create button, help and apps icons, and a user avatar. The page header supports a title, optional subtitle with avatar, optional tab bar, and optional action buttons. Use the visibility props (showNav, showHeader) and styling props (contentBg, contentPadding) to configure which sections of the frame chrome are visible — useful for prototyping content-only or embedded experiences.

Import

import { FullPageApplicationFrame } from "@/components/frames/FullPageApplicationFrame";

Usage Guidance

When to use

+Prototyping full-page experiences (list views, dashboards, detail pages).
+Evaluating how a new feature looks within the Skedulo product chrome.
+Presenting designs to stakeholders with realistic navigation context.

When not to use

−For isolated component prototypes — use PageBuilderCardFrame instead.
−For side panel or detail drawer prototypes — use ContextPanelFrame instead.
−For admin or settings pages — use AdminFrame instead.
−When the prototype needs to control its own navigation or app shell.

Code Samples

Detail page with tabs

A resource detail page with avatar, subtitle, tabs, and an Actions button.

<FullPageApplicationFrame
  activeNavItem="Resources"
  pageTitle="Jane Smith"
  pageSubtitle="Sydney"
  tabs={["Details", "Roles", "Locations", "History"]}
  headerActions={
    <button className="px-3 py-1.5 border border-gray-300 rounded-md text-sm text-gray-700">
      Actions ▾
    </button>
  }
>
  <div className="bg-white rounded-lg border p-6">
    <h3 className="font-semibold mb-4">Details</h3>
    {/* Your detail content here */}
  </div>
</FullPageApplicationFrame>

Full-bleed content (no padding, white bg)

A table layout with no content padding and white background — ideal for data-heavy views.

<FullPageApplicationFrame
  pageTitle="All Resources"
  contentBg="white"
  contentPadding={false}
>
  <table className="w-full text-sm">
    <thead>
      <tr className="border-b text-left">
        <th className="px-4 py-3 text-xs font-medium text-gray-500">Name</th>
        <th className="px-4 py-3 text-xs font-medium text-gray-500">Role</th>
      </tr>
    </thead>
    <tbody>{/* rows */}</tbody>
  </table>
</FullPageApplicationFrame>

Content only (no nav or header)

Just the content area — useful for embedded experiences or content-focused prototypes.

<FullPageApplicationFrame
  showNav={false}
  showHeader={false}
  contentBg="white"
>
  {/* Your full-bleed content here */}
</FullPageApplicationFrame>

API Reference

Prop	Type	Default	Description
children*	React.ReactNode	—	The prototype content to render in the main content area.
activeNavItem	string	none	Which top nav item to highlight as active. Options: "Schedule", "Locations", "Resources", "Availability", "Manage", "Other". No item is highlighted by default.
pageTitle	string	"Page Title"	Page title displayed in the page header below the navigation bar.
pageSubtitle	string	—	Optional subtitle shown below the title with a location pin icon. When provided, an avatar with the title's initials is also shown.
tabs	string[]	—	Optional tab names rendered as a tab bar below the page header. e.g. ["Details", "Roles", "Locations", "History"].
activeTab	string	—	Which tab to show as active. Defaults to the first tab if not specified.
headerActions	React.ReactNode	—	Optional content rendered on the right side of the page header, such as an Actions dropdown or primary button.
height	string	"1000px"	Height of the frame container. Use a fixed value for documentation previews, or "100vh" for full-screen prototypes.
showNav	boolean	true	Show or hide the top navigation bar. Set to false when prototyping content that doesn't need the full app chrome.
showHeader	boolean	true	Show or hide the page header section (title, subtitle, tabs, actions). Set to false for full-bleed content.
contentBg	"gray" \| "white"	"gray"	Background color of the content area. Use "white" for content that fills the area edge-to-edge without card containers.
contentPadding	boolean	true	Whether the content area has padding (p-6). Set to false for full-bleed layouts like tables or maps.