Shared UI Components

The Teirac Project Management platform uses a suite of shared UI components designed for high-density data visualization and consistent user experience. These components leverage the project's design tokens (defined in index.css) to maintain a professional, high-contrast interface.

Layout and Navigation

ProtectedRoute

The ProtectedRoute component is a high-order wrapper used to gate access to authenticated areas of the application. It checks for an active session via the AuthContext and redirects unauthenticated users to the /login page.

Usage:

<Route path="/dashboard" element={
  <ProtectedRoute>
    <DashboardPage />
  </ProtectedRoute>
} />

Data Visualization

KPICard

KPI Cards are utilized on the dashboard to provide high-level summaries of project health, such as SPI (Schedule Performance Index) and Budget utilization.

| Prop | Type | Description | | :--- | :--- | :--- | | title | string | The label for the metric (e.g., "AVG SPI"). | | value | string \| number | The primary metric to display. | | subtitle | string | Contextual information (e.g., "+0.02 from last month"). | | subtitleColor | string | The CSS color for the subtitle text. | | borderClass | string | Top stripe color class (blue, gold, green, red). |

Example:

<KPICard 
  title="Schedule Health" 
  value="0.98" 
  subtitle="On Track" 
  subtitleColor="var(--green)" 
  borderClass="green" 
/>

StatusBadge

A visual indicator for project and task statuses. It automatically maps status keys to specific icons and color schemes.

Supported Statuses:

• on-track: Green dot (●)
• at-risk: Orange triangle (▲)
• delayed: Red cross (✕)
• completed: Green check (✓)

ProgressBar

A compact visual representation of completion percentages, commonly used in the project list and task trackers.

<ProgressBar pct={75} color="var(--blue-accent)" />

User Feedback

Toast Notifications

Teirac uses a global toast system for providing non-intrusive feedback (e.g., "Profile updated successfully"). Toasts are managed via a hook-based provider and a singleton registration for use outside of React components.

Usage:

import { addToast } from '../components/Toast'

// Trigger a success message
addToast('Data imported successfully!', 'success');

// Trigger an error message
addToast('Failed to save changes.', 'error');

ConfirmModal

A standardized confirmation dialog for destructive actions like logging out or deleting data.

Props:

• message: The descriptive text explaining the consequences of the action.
• onConfirm: Callback function executed upon user confirmation.
• onCancel: Callback function to close the modal without action.

Data Management

TableModule

The TableModule is a powerful, reusable data grid used throughout the Project detail pages. It supports dynamic column definitions, inline row addition, and status-based color coding.

Configuration Example:

const columns = [
  { key: 'task', label: 'Activity Name' },
  { key: 'owner', label: 'Assignee' },
  { key: 'status', label: 'Status', opts: ['Pending', 'In Progress', 'Done'] }
];

<TableModule 
  table="project_tasks" 
  projectId={id} 
  userId={user.id} 
  cols={columns} 
/>

ImportModal

An internal utility component that facilitates bulk data entry via CSV uploads. It includes a mapping system (TABLE_MAP) that ensures uploaded data aligns with the Supabase schema for specific modules like "Budget," "Risk Tracking," or "RACI Matrix."

Key Features:

• CSV Parsing: Automatically handles comma-separated values and header mapping.
• Schema Validation: Validates that the uploaded columns match the required database fields.
• Bulk Upsert: Efficiently pushes multiple records to the database in a single transaction.