{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "gantt-resource-view",
  "framework": "react",
  "type": "registry:component",
  "component": "Gantt",
  "variant": "resource-view",
  "dependencies": [
    "@syncfusion/ej2-navigations",
    "@syncfusion/ej2-react-gantt"
  ],
  "description": "Gantt chart with resource rows and resource-unit allocations on parent tasks.",
  "meta": {
    "essentialStudioRelease": "2026 Volume 2 (v34.1.29)",
    "license": "commercial-or-community",
    "licenseNote": "The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md",
    "requiresLicenseKey": true,
    "requiresServerEndpoint": false,
    "platformIndex": "https://ai.syncfusion.com/react/llms.txt",
    "skillPack": "syncfusion/react-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/react/js/gantt-resource-view.md"
  },
  "files": [
    {
      "target": "src/components/gantt-resource-view/Gantt.jsx",
      "content": "import { useRef } from 'react';\nimport { GanttComponent, DayMarkers, Inject, Selection, Toolbar, Edit, Resize, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-gantt';\n\nlet resourcesData = [\n    {\n        TaskID: 1,\n        TaskName: 'Project initiation',\n        StartDate: new Date('03/29/2025'),\n        EndDate: new Date('04/21/2025'),\n        subtasks: [\n            {\n                TaskID: 2, TaskName: 'Identify site location', StartDate: new Date('03/29/2025'), Duration: 3,\n                Progress: 30, work: 10, resources: [{ resourceId: 1, resourceUnit: 50 }]\n            },\n            {\n                TaskID: 3, TaskName: 'Perform soil test', StartDate: new Date('03/29/2025'), Duration: 4,\n                resources: [{ resourceId: 2, resourceUnit: 70 }], Progress: 30, work: 20\n            },\n            {\n                TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('03/29/2025'), Duration: 4,\n                resources: [{ resourceId: 1, resourceUnit: 75 }], Predecessor: 2, Progress: 30, work: 10,\n            },\n        ]\n    },\n    {\n        TaskID: 5,\n        TaskName: 'Project estimation', StartDate: new Date('03/29/2025'), EndDate: new Date('04/21/2025'),\n        subtasks: [\n            {\n                TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('03/29/2025'),\n                Duration: 3, Progress: 30, resources: [{ resourceId: 2, resourceUnit: 70 }], Predecessor: '3FS+2', work: 30\n            },\n            {\n                TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/08/2025'), Duration: 12,\n                resources: [{ resourceId: 6, resourceUnit: 40 }], Progress: 30, work: 40\n            },\n            {\n                TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/03/2025'),\n                Duration: 10, resources: [{ resourceId: 5, resourceUnit: 75 }], Progress: 30, work: 60,\n            },\n            {\n                TaskID: 9, TaskName: 'Excavate for foundations', StartDate: new Date('04/01/2025'),\n                Duration: 4, Progress: 30, resources: [{ resourceId: 4, resourceUnit: 100 }], work: 32\n            },\n            {\n                TaskID: 10, TaskName: 'Install plumbing grounds', StartDate: new Date('04/08/2025'), Duration: 4,\n                Progress: 30, Predecessor: '9SS', resources: [{ resourceId: 3, resourceUnit: 100 }], work: 32\n            },\n            {\n                TaskID: 11, TaskName: 'Dig footer', StartDate: new Date('04/08/2025'),\n                Duration: 3, resources: [{ resourceId: 2, resourceUnit: 100 }], work: 24\n            },\n            {\n                TaskID: 12, TaskName: 'Electrical utilities', StartDate: new Date('04/03/2025'),\n                Duration: 4, Progress: 30, resources: [{ resourceId: 3, resourceUnit: 100 }], work: 32\n            }\n        ]\n    },\n    {\n        TaskID: 13, TaskName: 'Sign contract', StartDate: new Date('04/04/2025'), Duration: 2,\n        Progress: 30,\n    }\n];\n\nlet resourceCollection = [\n    { resourceId: 1, resourceName: 'Martin Tamer', resourceGroup: 'Planning Team' },\n    { resourceId: 2, resourceName: 'Rose Fuller', resourceGroup: 'Testing Team' },\n    { resourceId: 3, resourceName: 'Margaret Buchanan', resourceGroup: 'Approval Team' },\n    { resourceId: 4, resourceName: 'Fuller King', resourceGroup: 'Development Team' },\n    { resourceId: 5, resourceName: 'Davolio Fuller', resourceGroup: 'Approval Team' },\n    { resourceId: 6, resourceName: 'Van Jack', resourceGroup: 'Development Team' }\n];\n\nconst ResourceView = () => {\n    let ganttInstance = useRef(null);\n    const taskFields = {\n        id: 'TaskID',\n        name: 'TaskName',\n        startDate: 'StartDate',\n        endDate: 'EndDate',\n        duration: 'Duration',\n        progress: 'Progress',\n        dependency: 'Predecessor',\n        resourceInfo: 'resources',\n        work: 'work',\n        child: 'subtasks'\n    };\n    const taskType = \"FixedWork\";\n    const resourceFields = {\n        id: 'resourceId',\n        name: 'resourceName',\n        unit: 'resourceUnit',\n        group: 'resourceGroup'\n    };\n    const editSettings = {\n        allowAdding: true,\n        allowEditing: true,\n        allowDeleting: true,\n        allowTaskbarEditing: true,\n        showDeleteConfirmDialog: true\n    };\n    const toolbar = ['Add', 'Edit', 'Update', 'Delete', 'Cancel', 'ExpandAll', 'CollapseAll',\n        { text: 'Show/Hide Overallocation', tooltipText: 'Show/Hide Overallocation', id: 'showhidebar' }];\n    const splitterSettings = {\n        columnIndex: 3\n    };\n    const projectStartDate = new Date('03/26/2025');\n    const projectEndDate = new Date('05/18/2025');\n    const labelSettings = {\n        rightLabel: 'resources',\n        taskLabel: 'Progress'\n    };\n    const toolbarClick = (args) => {\n        if (args.item.id === 'showhidebar') {\n            ganttInstance.current.showOverAllocation = ganttInstance.current.showOverAllocation ? false : true;\n        }\n    };\n    return (<div className='control-pane'>\n      <div className='control-section'>\n        <GanttComponent id='ResourceView' dataSource={resourcesData} treeColumnIndex={1} viewType='ResourceView' allowSelection={true} allowResizing={true} highlightWeekends={true} toolbar={toolbar} toolbarClick={toolbarClick.bind(this)} editSettings={editSettings} projectStartDate={projectStartDate} projectEndDate={projectEndDate} resourceFields={resourceFields} taskFields={taskFields} taskType={taskType} labelSettings={labelSettings} splitterSettings={splitterSettings} height='650px' taskbarHeight={25} rowHeight={46} resources={resourceCollection} showOverAllocation={true} ref={ganttInstance}>\n          <ColumnsDirective>\n            <ColumnDirective field='TaskID' visible={false}></ColumnDirective>\n            <ColumnDirective field='TaskName' headerText='Name' width='250'></ColumnDirective>\n            <ColumnDirective field='work' headerText='Work'></ColumnDirective>\n            <ColumnDirective field='Progress'></ColumnDirective>\n            <ColumnDirective field='resourceGroup' headerText='Group'></ColumnDirective>\n            <ColumnDirective field='StartDate'></ColumnDirective>\n            <ColumnDirective field='Duration'></ColumnDirective>\n          </ColumnsDirective>\n          <Inject services={[Selection, DayMarkers, Toolbar, Edit, Resize]}/>\n        </GanttComponent>\n      </div>\n    </div>);\n};\nexport default ResourceView;"
    }
  ]
}