Skip to main content

Page Layouts

The frontend uses a layered layout system with three main components: PageContainer for page shells, ResponsiveGrid for grid layouts, and TWResponsiveCard for data display cards.

PageContainer​

Location: components/ux/PageContainer/

The root layout wrapper used across most pages. Provides:

  • Consistent padding and max-width constraints
  • Breadcrumb navigation
  • Configurable header, sidebar, and footer slots via PageBlockContext
  • View mode switching (grid / list / table)
  • Pagination integration

Block System​

PageContainer uses a slot-based architecture. Page body components register content into named slots without prop drilling:

// A child component registers sidebar content
const { setSidebar } = usePageBlock();
setSidebar(<FilterPanel />);

Available blocks:

  • GridBlock -- Grid view of cards
  • KanbanBlock -- Kanban board layout
  • PaginationBlock -- Pagination controls

Layout Hierarchy​

body          → h-dvh flex flex-col overflow-hidden
main content  → flex-1 min-h-0
PageContainer → handles internal scrolling

This flex-based overflow model prevents double-scrollbar issues.

ResponsiveGrid​

Location: components/ux/ResponsiveGrid/

A responsive grid that automatically adjusts column count based on viewport width. Used for card-based layouts like talent pools, job listings, and dashboard widgets.

TWResponsiveCard​

Location: components/ux/TWResponsiveCard/

A complex, configurable card system used for talent cards, candidate cards, job listings, and settings panels. It includes:

Architecture​

ResponsiveCard (main component)
├── blocks/
│   ├── header/   (banner, title, controls)
│   ├── body/     (profile, info, details, links)
│   └── footer/   (actions, metadata)
├── cardBuilder/  (declarative configuration)
│   ├── actions/  (action button configs)
│   ├── configs/  (card type templates)
│   └── sections/ (section builders)
├── controls/     (field visibility, selection)
├── renderers/    (block rendering engine)
│   └── blocks/   (block-specific renderers)
├── hooks/        (usePagination, etc.)
└── utils/        (utility functions)

Card Builder​

Cards are configured declaratively using a builder pattern:

  • configs/ contains card type templates (talent card, candidate card, job card, etc.)
  • sections/ define what data appears in each block (header, body, footer)
  • actions/ configure available action buttons per card type

Field Visibility​

Users can toggle which fields are visible on cards. Visibility preferences are stored per-user per-page in the Zustand pageStore (localStorage key aiqlick-page-store).

Row Layout​

ResponsiveRow.tsx provides a table-row variant of the card for list/table view modes.

KanbanBoard​

Location: components/ux/KanbanBoard.tsx + KanbanCard.tsx

Generic Kanban board with drag-and-drop columns. Used by the pipeline feature for candidate management.

  • KanbanBoard -- Container managing columns and drag events
  • KanbanCard -- Individual draggable card
  • KanbanJobCardAdapter -- Adapter for job-specific card rendering

QuickViewPanel​

Location: components/ux/QuickViewPanel.tsx

A slide-in side panel for previewing record details without navigating away from the list view. Used in candidate lists, talent pools, and job listings.

PageLayout​

Location: components/ux/PageLayout.tsx

A simpler layout container used for pages that don't need the full PageContainer system. Provides header and content areas.