complia-gantt

Modern Gantt chart component for React projects with TypeScript support.

Features

• 🎨 Modern, clean design with gradient accents
• 📅 Multiple view modes (Day, Week, Month, Year)
• 🔍 Search and filter capabilities
• 📤 Export to PDF
• 🎯 Task dependencies visualization
• ⚡ Optimized performance with React hooks
• 🎭 Milestone highlighting
• 📱 Responsive design

Installation

npm install complia-gantt
# or
yarn add complia-gantt
# or
pnpm add complia-gantt

Usage

Simplified API (Recommended)

Pass the entire project object and let the component handle the transformation:

import { ModernGanttChart } from 'complia-gantt';

function MyProjectPage() {
  const project = {
    id: 'project-1',
    name: 'New Store Opening',
    address: '123 Main St',
    nodes: [...], // WhiteboardNode[]
    createdAt: new Date(),
    targetOpeningDate: new Date('2026-12-31'),
  };

  return (
    <ModernGanttChart
      project={project}
      onTaskClick={(taskId) => console.log('Task clicked:', taskId)}
    />
  );
}

Legacy API

For more control, you can pass individual props:

<ModernGanttChart
  milestones={milestones}
  projectStartDate={startDate}
  projectEndDate={endDate}
  projectName="My Project"
  projectAddress="123 Main St"
  onTaskClick={handleTaskClick}
  onValidateClick={handleValidateClick}
/>

API Reference

Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | project | ProjectInput | No | Complete project object (simplified API) | | milestones | ExtendedMilestone[] | No | Array of milestones (legacy API) | | projectStartDate | Date | No | Project start date | | projectEndDate | Date | No | Project end date | | projectName | string | No | Project name | | projectAddress | string | No | Project address | | projectId | string | No | Project ID | | onTaskClick | (id: string) => void | No | Callback when a task is clicked | | onValidateClick | (id: string) => void | No | Callback for validation action |

Types

interface ProjectInput {
  id?: string;
  name?: string;
  address?: string;
  nodes?: WhiteboardNode[];
  createdAt?: unknown; // Accepts Timestamp, Date, string
  targetOpeningDate?: unknown;
}

interface ExtendedMilestone extends Milestone {
  isMilestone?: boolean;
  requiresEvidence?: boolean;
  requiredDocumentsCount?: number;
}

Utilities

The package also exports useful utilities:

import {
  transformNodesToMilestones,
  toDate,
  calculateDeadlineInfo,
  type ExtendedMilestone
} from 'complia-gantt';

// Transform whiteboard nodes to milestones
const milestones = transformNodesToMilestones(nodes);

// Convert various date formats to Date
const date = toDate(firebaseTimestamp);

// Calculate deadline urgency
const deadlineInfo = calculateDeadlineInfo(dueDate, openingDate);

License

MIT

Repository

https://github.com/FSanguinetti/complia-workspace