Skip to main content

WPagesTemplates

Overview​

The WPagesTemplates are a set of layout components that provide standardized page structures for the WorkPayCore frontend application. These components offer consistent layouts, navigation patterns, and UI conventions across different pages.

Components​

WPPage​

A basic page layout component that provides a flexible container for page content with standardized spacing and layout structure.

WPTabbedPage​

An advanced page layout component that includes support for tabbed navigation, filters, and data tables with pagination.

WPPageContainer​

A modern page container component that provides a clean, structured layout with title, description, and action sections.

When to Use​

WPPage​

  • Use for simple page layouts without complex navigation
  • When you need a basic container with consistent spacing
  • For pages that don't require tabs or complex filtering

WPTabbedPage​

  • Use for complex pages with multiple data views
  • When you need tabbed navigation with filtering capabilities
  • For pages that display data tables with pagination
  • When you need tooltips and help text in page titles

WPPageContainer​

  • Use for modern, clean page layouts
  • When you need a consistent header structure with title, description, and actions
  • For pages that follow the updated design system patterns

API Documentation​

WPPage​

Props​

PropTypeRequiredDefaultDescription
childrenReactNode✓-Content to render inside the page
...otherPropsStackProps--Additional props passed to the root Stack component

Sub-components​

  • WPPage.BreadCrumb - Breadcrumb navigation
  • WPPage.Title - Page title with optional children
  • WPPage.Body - Main content area
  • WPPage.HeaderSection - Header section with flexible layout
  • WPPage.RightSection - Right-aligned section with spacer
  • WPPage.LeftSection - Left-aligned section with spacer
  • WPPage.Content - Generic content wrapper

WPTabbedPage​

Props​

PropTypeRequiredDefaultDescription
childrenReactNode-nullContent to render inside the page
noFooterboolean-falseWhether to hide the fixed footer
pageTitlestring--Main page title
titlestring--Title for tooltip badge
fontSizenumber-28Font size for the page title
descriptionstring--Description text for tooltip
hasToolTipboolean-falseWhether to show tooltip icon
asstring-'h1'HTML element type for title
colorstring-'charcoal'Color of the page title
defaultStatusstring--Default status for query params
...otherPropsStackProps--Additional props passed to the root Stack

Sub-components​

  • WPTabbedPage.BreadCrumb - Breadcrumb navigation
  • WPTabbedPage.Title - Page title with tooltip support
  • WPTabbedPage.Body - Main content area with tabs support
  • WPTabbedPage.HeaderSection - Header section for controls
  • WPTabbedPage.TabsNFilters - Tab navigation with filters
  • WPTabbedPage.TabList - Tab list component
  • WPTabbedPage.Filters - Filter components wrapper
  • WPTabbedPage.RightSection - Right-aligned section
  • WPTabbedPage.LeftSection - Left-aligned section
  • WPTabbedPage.Content - Tab content panels
  • WPTabbedPage.Table - Data table with multiple variants
  • WPTabbedPage.FixedFooter - Fixed footer component
  • WPTabbedPage.AddButton - Standardized add button
  • WPTabbedPage.IssueButton - Standardized issue button

WPPageContainer​

Props​

PropTypeRequiredDefaultDescription
childrenReactNode✓-Main content of the page
pageTitleReactNode--Page title (string or ReactNode)
pageDescriptionReactNode--Page description text
pageActionsReactNode--Action buttons or controls
BackButtonReactNode-nullBack button component
...restStackProps--Additional props passed to the root VStack

Sub-components​

  • WPPageContainer.Title - Standardized page title
  • WPPageContainer.Description - Standardized page description

TypeScript Interfaces​

WPPageContainer​

type WpPageContainerProps = StackProps & {
  children: React.ReactNode;
  pageTitle?: React.ReactNode;
  pageDescription?: React.ReactNode;
  pageActions?: React.ReactNode;
  BackButton?: React.ReactNode;
};

interface DescriptionProps extends TextProps {
  children: React.ReactNode;
}

Usage Examples​

Basic WPPage Usage​

import { WPPage } from 'components/WPagesTemplates';

function MyPage() {
  return (
    <WPPage>
      <WPPage.Title title='My Page' />
      <WPPage.Body>
        <WPPage.Content>{/* Your page content */}</WPPage.Content>
      </WPPage.Body>
    </WPPage>
  );
}

WPTabbedPage with Tabs​

import { WPTabbedPage } from 'components/WPagesTemplates';

function MyTabbedPage() {
  const tabData = [
    {
      id: 1,
      title: 'Tab 1',
      children: <div>Content for tab 1</div>,
    },
    {
      id: 2,
      title: 'Tab 2',
      children: <div>Content for tab 2</div>,
    },
  ];

  return (
    <WPTabbedPage pageTitle='My Tabbed Page'>
      <WPTabbedPage.Body>
        <WPTabbedPage.TabsNFilters tabData={tabData} />
        <WPTabbedPage.Content tabData={tabData} />
      </WPTabbedPage.Body>
    </WPTabbedPage>
  );
}

WPTabbedPage with Table​

import { WPTabbedPage } from 'components/WPagesTemplates';

function DataPage() {
  const columns = [
    { Header: 'Name', accessor: 'name' },
    { Header: 'Email', accessor: 'email' },
  ];

  const data = [{ name: 'John Doe', email: 'john@example.com' }];

  return (
    <WPTabbedPage pageTitle='Data Table'>
      <WPTabbedPage.Body>
        <WPTabbedPage.Table
          customColumn={columns}
          tableData={data}
          isLoading={false}
          isBasic={true}
          noDataMsg='No data available'
        />
      </WPTabbedPage.Body>
    </WPTabbedPage>
  );
}

WPPageContainer Usage​

import WPPageContainer from 'components/WPagesTemplates/WPPageContainer';

function ModernPage() {
  return (
    <WPPageContainer
      pageTitle='Modern Page'
      pageDescription='This is a modern page layout'
      pageActions={&lt;Button&gt;Action Button</Button>}
    >
      {/* Your page content */}
    </WPPageContainer>
  );
}

Advanced WPTabbedPage with Filters​

import { WPTabbedPage } from 'components/WPagesTemplates';

function AdvancedPage() {
  const tabData = [
    {
      id: 1,
      title: 'All Items',
      children: <ItemsList />,
    },
  ];

  return (
    <WPTabbedPage pageTitle='Advanced Page'>
      <WPTabbedPage.Body>
        <WPTabbedPage.HeaderSection>
          <WPTabbedPage.TabsNFilters tabData={tabData}>
            <WPTabbedPage.LeftSection>
              <FilterComponent />
            </WPTabbedPage.LeftSection>
            <WPTabbedPage.RightSection>
              &lt;Button&gt;Add Item</Button>
            </WPTabbedPage.RightSection>
          </WPTabbedPage.TabsNFilters>
        </WPTabbedPage.HeaderSection>
        <WPTabbedPage.Content tabData={tabData} />
      </WPTabbedPage.Body>
    </WPTabbedPage>
  );
}

Integration Patterns​

With Breadcrumbs​

&lt;WPTabbedPage&gt;
  <WPTabbedPage.BreadCrumb>
    <HStack as={Link} to='/dashboard'>
      <ChevronLeftOutline color='#62A446' />
      &lt;Text&gt;Dashboard</Text>
    </HStack>
  </WPTabbedPage.BreadCrumb>
  <WPTabbedPage.Title title='Current Page' />
  {/* Rest of content */}
</WPTabbedPage>
&lt;WPTabbedPage&gt;
  <WPTabbedPage.Title
    title='Page Title'
    direction='row'
    justify='space-between'
  >
    <SettingsLink to='/settings' title='Page Settings' />
  </WPTabbedPage.Title>
  {/* Rest of content */}
</WPTabbedPage>

With Tooltips​

<WPTabbedPage.Title
  title='Complex Feature'
  hasToolTip={true}
  description='This feature helps you manage complex workflows'
/>

Styling​

Theme Variables​

  • Uses theme.colors.charcoal for default text color
  • Uses theme.colors.green for accent colors
  • Uses theme.colors.skeletonBorder for borders
  • Responsive breakpoints: theme.breakpoints

Custom Styling​

<WPTabbedPage spacing={8} bg='white' p={4}>
  <WPTabbedPage.Title
    title='Custom Styled Page'
    color='blue.500'
    fontSize={32}
  />
</WPTabbedPage>

Accessibility​

ARIA Support​

  • Page titles use appropriate heading levels (h1, h2, h3)
  • Tooltips include aria-label attributes
  • Tab navigation follows WAI-ARIA guidelines
  • Tables include proper table headers and roles

Keyboard Navigation​

  • Tab key navigates through interactive elements
  • Enter/Space activates buttons and links
  • Arrow keys navigate between tabs
  • Escape key closes modals and tooltips

Screen Reader Support​

  • Semantic HTML structure with proper headings
  • Descriptive text for interactive elements
  • Table data is properly structured
  • Loading states announced to screen readers

Migration Notes​

From WPPage to WPTabbedPage​

// Old
&lt;WPPage&gt;
  <WPPage.Title title="Page" />
  <WPPage.Body>Content</WPPage.Body>
</WPPage>

// New
<WPTabbedPage pageTitle="Page">
  <WPTabbedPage.Body>Content</WPTabbedPage.Body>
</WPTabbedPage>

From WPTabbedPage to WPPageContainer​

// Old
<WPTabbedPage pageTitle="Page">
  <WPTabbedPage.Body>Content</WPTabbedPage.Body>
</WPTabbedPage>

// New
<WPPageContainer pageTitle="Page">
  Content
</WPPageContainer>

Best Practices​

  1. Choose the right component:

    • Use WPPageContainer for new pages following modern design patterns
    • Use WPTabbedPage for complex data views with tabs and filters
    • Use WPPage for simple layouts without complex navigation

  2. Consistent structure:

    • Always provide meaningful page titles
    • Use breadcrumbs for navigation hierarchy
    • Include loading states for async operations

  3. Accessibility:

    • Use semantic HTML structure
    • Provide descriptive labels for interactive elements
    • Test with screen readers

  4. Performance:

    • Use lazy loading for tab content
    • Implement proper pagination for large datasets
    • Use React.memo for expensive components

Common Patterns​

Settings Pages​

&lt;WPTabbedPage&gt;
  <WPTabbedPage.BreadCrumb>
    <BackButton />
  </WPTabbedPage.BreadCrumb>
  <WPTabbedPage.Title title='Settings' />
  <WPTabbedPage.Body>
    <TabsWrapper tabData={settingsTabs} />
  </WPTabbedPage.Body>
</WPTabbedPage>

Data Management Pages​

<WPTabbedPage pageTitle='Data Management'>
  <WPTabbedPage.Body>
    <WPTabbedPage.TabsNFilters tabData={dataTabs}>
      <WPTabbedPage.LeftSection>
        <FilterControls />
      </WPTabbedPage.LeftSection>
      <WPTabbedPage.RightSection>
        <ActionButtons />
      </WPTabbedPage.RightSection>
    </WPTabbedPage.TabsNFilters>
    <WPTabbedPage.Content tabData={dataTabs} />
  </WPTabbedPage.Body>
</WPTabbedPage>

Dashboard Pages​

<WPTabbedPage pageTitle='Dashboard'>
  <WPTabbedPage.Body>
    <Stack spacing={8}>
      <StatsCards />
      <ChartsSection />
      <RecentActivity />
    </Stack>
  </WPTabbedPage.Body>
</WPTabbedPage>