About

A frame that simulates the Skedulo Settings / Admin area with the top navigation bar, a collapsible sidebar for category navigation, and a main content area. The sidebar mirrors the real Skedulo Settings structure with collapsible accordion sections (Web app configuration, Data management, Scheduling, Mobile app configuration, Users & roles, Developer tools). Each section expands to reveal its child items. The active item is highlighted and the sections are interactive — clicking a section header toggles it open or closed. The frame includes the standard Skedulo top navigation bar and a search input in the sidebar. The content area on the right is where your prototype content goes.

Import

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

Usage Guidance

When to use

+Prototyping admin settings pages, configuration screens, or management interfaces.
+Designing features that live within the Skedulo Settings area.
+Evaluating how admin content works with the collapsible sidebar navigation pattern.
+Presenting admin designs with realistic application chrome.

When not to use

−For main application pages — use FullPageApplicationFrame instead.
−For side panel or detail drawer prototypes — use ContextPanelFrame instead.
−For modal dialogs — use ModalFrame instead.
−For isolated component prototypes — use PageBuilderCardFrame instead.

Code Samples

Default admin settings page

The standard admin frame with the default Skedulo Settings sidebar and General as the active item.

<AdminFrame activeItem="General">
  <div className="max-w-lg space-y-6">
    <h2 className="text-base font-semibold text-gray-900">General Settings</h2>
    <div>
      <label className="block text-sm font-medium text-gray-700 mb-1">Company Name</label>
      <input
        type="text"
        className="w-full border border-gray-300 rounded-md px-3 py-2 text-sm"
        defaultValue="Acme Services"
      />
    </div>
    <div>
      <label className="block text-sm font-medium text-gray-700 mb-1">Timezone</label>
      <select className="w-full border border-gray-300 rounded-md px-3 py-2 text-sm">
        <option>Australia/Sydney (UTC+11)</option>
      </select>
    </div>
  </div>
</AdminFrame>

Developer tools — API tokens

Admin frame showing the API tokens page within the Developer tools section.

<AdminFrame activeItem="API tokens">
  <div className="space-y-4">
    <div className="flex items-center justify-between">
      <h2 className="text-base font-semibold text-gray-900">API Tokens</h2>
      <button className="px-3 py-1.5 bg-blue-600 text-white text-sm rounded-md font-medium">
        Generate Token
      </button>
    </div>
    <table className="w-full text-sm">
      <thead>
        <tr className="border-b text-left text-gray-500">
          <th className="pb-2 font-medium">Name</th>
          <th className="pb-2 font-medium">Created</th>
          <th className="pb-2 font-medium">Last Used</th>
        </tr>
      </thead>
      <tbody>
        <tr className="border-b">
          <td className="py-2.5 font-medium text-gray-900">Production API</td>
          <td className="py-2.5 text-gray-500">2024-01-15</td>
          <td className="py-2.5 text-gray-500">2 hours ago</td>
        </tr>
      </tbody>
    </table>
  </div>
</AdminFrame>

Admin frame without top nav

The admin sidebar and content area without the top navigation bar, useful for focusing on the settings layout.

<AdminFrame activeItem="Users" showNav={false}>
  <div className="space-y-4">
    <h2 className="text-base font-semibold text-gray-900">Users</h2>
    <p className="text-sm text-gray-500">Manage user accounts and access.</p>
  </div>
</AdminFrame>

Custom sidebar sections

You can provide custom sections to adapt the sidebar for different admin areas.

<AdminFrame
  activeItem="Notifications"
  sections={[
    { label: "General", items: ["Profile", "Notifications", "Privacy"] },
    { label: "Billing", items: ["Plans", "Invoices", "Payment methods"] },
  ]}
>
  <div className="max-w-lg space-y-4">
    <h2 className="text-base font-semibold text-gray-900">Notification Preferences</h2>
    <p className="text-sm text-gray-500">Choose how you receive notifications.</p>
  </div>
</AdminFrame>

API Reference

Prop	Type	Default	Description
children*	React.ReactNode	—	The prototype content to render in the main content area on the right side of the sidebar.
activeItem	string	"General"	Which sidebar item to highlight as active. Must match one of the item labels in the sections array.
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 Skedulo navigation bar. Hide it to focus purely on the admin sidebar + content layout.
showSearch	boolean	true	Show or hide the search input in the sidebar.
sections	AdminNavSection[]	—	Custom sidebar sections. Each section has a label and an array of item strings. Defaults to the standard Skedulo Settings structure (Web app configuration, Data management, Scheduling, Mobile app configuration, Users & roles, Developer tools). Import the type: import type { AdminNavSection } from "@/components/frames/AdminFrame";