Photonix UI - React Components, Templates & Figma Design System

AllocationMatrixWidget

A specialized widget for visualizing resource allocation across multiple projects and team members.

Preview

Usage

import { AllocationMatrixWidget } from '@photonix/ultimate';

const projects = [...];
const members = [...];
const allocations = [...];

<AllocationMatrixWidget
  title="Staffing Matrix"
  projects={projects}
  members={members}
  allocations={allocations}
/>

Component API

AllocationMatrixWidget

Prop	Type	Default	Description
title	`string`	`-`	Header title
subtitle	`string`	`-`	Header subtitle
projects	`MatrixProject[]`	`[]`	Array of project items
members	`MatrixMember[]`	`[]`	Array of member items
allocations	`MatrixAllocation[]`	`[]`	Array of allocation items
dateRange	`AllocationMatrixDateRange`	`-`	Optional date range used to filter or aggregate time-based allocations
loading	`boolean`	`false`	Loading state
headerExtraContent	`React.ReactNode`	`-`	Component to display in the header (e.g., custom filters)
footer	`React.ReactNode`	`-`	Content to display below the matrix
height	`string \| number`	`-`	Component height
onCellClick	`((memberId: string, projectId: string) => void)`	`-`	Click handler for a cell
appearance	`WidgetAppearance`	`'outlined'`	Widget appearance
padding	`string \| number`	`-`	Widget padding (default: 16px)
className	`string`	`-`	Custom class name
style	`React.CSSProperties`	`-`	Custom style

Variants

With Time Filter

Use dateRange together with allocations that include startDate and endDate to enable native time filtering.

With Time Filter

const [dateRange, setDateRange] = useState<DateRange | undefined>({
  start: new Date(2026, 0, 1),
  end: new Date(2026, 2, 31),
});

<AllocationMatrixWidget
  title="Resource Allocation"
  subtitle="Allocation filtered by selected date range"
  projects={projects}
  members={members}
  allocations={timedAllocations}
  dateRange={dateRange}
  headerExtraContent={
    <DateRangePicker
      variant="single"
      value={dateRange}
      onChange={setDateRange}
      labelStyle="outside"
      placeholder="Select range"
      showPresets
      fullWidth={false}
    />
  }
/>

Loading State

Displays a skeleton preview while data is being fetched.

Loading State

<AllocationMatrixWidget title="Allocation" projects={[]} members={[]} allocations={[]} loading />

With Footer

Display summary or additional info at the bottom.

With Footer

<AllocationMatrixWidget
  title="Resource Summary"
  projects={projects}
  members={members}
  allocations={allocations}
  footer="Last updated: 5 minutes ago"
/>

AllocationMatrixWidget

Preview

Resource Allocation

Component API

AllocationMatrixWidget

Variants

With Time Filter

Resource Allocation

Loading State

With Footer

Resource Summary

On this page