Project Detail Views

The Project Detail View provides a comprehensive, deep-dive interface for managing individual projects within the TEIRAC platform. Accessed by clicking a project from the Dashboard, this view centralizes performance metrics, schedule health, and modular management tables.

Project Header and Identity

The top section of the Project Detail View establishes the project's context. It displays:

• Project Identity: The project name, tagline, and a high-level overview.
• Dynamic Status Badges: Visual indicators (On Track, At Risk, Delayed, or Completed) that update based on project performance.
• Site Metadata: Geographic or zone-specific information (e.g., Site Zone) to help teams identify project locations.

Performance Metrics & KPIs

TEIRAC tracks real-time health through four primary performance indicators. These are visualized using progress bars and color-coded metrics:

| Metric | Description | | :--- | :--- | | Schedule Performance Index (SPI) | A measure of schedule efficiency. Values above 1.0 indicate the project is ahead of schedule. | | Budget Utilization | A comparison of budget_used vs. budget_total, visualized through a progress bar. | | Deliverables Progress | Tracks the completion percentage of physical or digital project milestones. | | Timeline Pct | Represents the elapsed time against the total project duration. |

Modular Data Tables

The core of the Project Detail View is its modular architecture. Depending on the project configuration, various "Modules" are available to track specific workstreams. Each module utilizes a standardized table interface for consistency.

Available Modules

The system supports a wide range of project management domains:

• Task Management: Task Lists, To-Do Lists, and Weekly Schedules.
• Financials: Budget items, Estimates, and Cost-Benefit analyses.
• Governance: RACI Matrices, Stakeholder registers, and Action Plans.
• Risk & Quality: Risk Tracking, Issue logs, Gap Analysis, and Punch Lists.
• Resources: Resource Plans and Timesheets.

Managing Table Data

Users can interact with project modules in real-time. The interface supports:

• Inline Row Creation: Add new data points (e.g., a new task or budget item) directly within the module view.
• Status & Priority Indicators: Fields like "Status" or "Priority" are automatically color-coded for instant visibility (e.g., "Critical" appears in red, while "Resolved" appears in green).
• Data Persistence: All changes are synced to the Supabase backend and associated with the unique projectId and the userId of the editor.

// Example: The internal data structure for a Project View
interface Project {
    id: string;
    name: string;
    spi: number;              // Schedule Performance Index
    budget_used: number;      // Current expenditure
    budget_total: number;     // Allocated funds
    status: string;           // 'on-track' | 'at-risk' | 'delayed' | 'completed'
    timeline_pct: number;     // % of project duration elapsed
}

Data Import and Export

To facilitate external reporting and bulk updates, the Project Detail View includes tools for:

• Excel Export: Generate .xlsx files of current project modules for offline review.
• CSV/Excel Import: Bulk upload data into specific modules (like Task Lists or Budgets) to avoid manual entry. The system maps incoming spreadsheet columns to the project’s database schema automatically.

Navigation and Layout

The view is wrapped in a protected Layout component, ensuring:

• Sidebar Integration: Quick navigation back to the Dashboard or Settings.
• User Context: View-level permissions based on the authenticated user's profile and department.
• Breadcrumb Navigation: Clear pathing for users to understand their position within the project hierarchy.