[FIX] Gantt Chart

package.json

@@ -15,7 +15,10 @@
     "axios": "^1.7.9",
     "chart.js": "^4.4.7",
     "date-fns": "^4.1.0",
+    "dhtmlx-gantt": "^9.0.3",
     "formik": "^2.4.6",
+    "highcharts": "^12.0.2",
+    "highcharts-react-official": "^3.2.1",
     "jspdf": "^2.5.2",
     "jspdf-autotable": "^3.8.4",
     "moment": "^2.30.1",

src/components/Authentication/Login.jsx

@@ -27,7 +27,7 @@ const LoginSignup = () => {
         const user_id = response.data.user.id;
         const access_token = response.data.token;
         const { role } = response.data.user;
-        const chatUser = response.data.chat.user;
+        const chatUser = response.data.chat?.user;
         const project = response.data.user.project;
         dispatch(setLogin({ user_id, access_token, role, chatUser, project }));
 

src/components/ProjectOnboarding.jsx

@@ -4,12 +4,13 @@ import React, { useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
 import ProjectOutlay from './ProjectOutlay';
+
 // import ShowProjectOutlay from './ShowProjectOutlay';
 // import { setProject } from '../state/index';
 
 function ProjectForm() {
-  // const dispatch = useDispatch();
   const navigate = useNavigate();
+  // const dispatch = useDispatch();
   const { user_id } = useSelector((state) => state.auth);
   const initialValues = {
     projectTitle: '',
@@ -18,6 +19,7 @@ function ProjectForm() {
     principalImplementingAgency: {
       agencyName: '',
       projectInvestigatorName: '',
+      projectInvestigatorEmail: '',
     },
     projectInvestigators: [],
     subImplementingAgencies: [],
@@ -177,8 +179,11 @@ function ProjectForm() {
       fundingSource: formData.fundingSource,
       description: formData.description,
       principalImplementingAgency: {
-        principalImplementingAgency: formData.principalImplementingAgency,
-        principalInvestigator: formData.projectInvestigators,
+        principalImplementingAgency:
+          formData.principalImplementingAgency.agencyName,
+        principalInvestigatorName:
+          formData.projectInvestigators.projectInvestigatorName,
+        principalInvestigatorEmail: formData.projectinvestigationEmail,
       },
       subImplementingAgencies: formData.subImplementingAgencies,
       projectInvestigators: formData.subImplementingAgencies.investigatorEmail,

src/components/ProjectOutlay.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 
 const ProjectOutlay = ({ projectOutlay, agencyName, Title }) => {
-  const [numYears, setNumYears] = useState(3); // Default number of years
+  const [numYears, setNumYears] = useState(3);
   const [data, setData] = useState({
     'Capital Expenditure': {
       'Land Building': { totalCost: '', yearWise: Array(numYears).fill('') },

src/components/ganttchart.jsx

@@ -1,22 +1,53 @@
-import axios from 'axios';
 import React, { useState, useEffect } from 'react';
 import { Chart } from 'react-google-charts';
 
-const GanttChart = ({ id }) => {
-  const [taskjson, setTaskjson] = useState(null); // State to store the fetched task data
+const GanttChart = () => {
   const [chartData, setChartData] = useState([]); // State to store the chart data
 
   useEffect(() => {
-    // Fetch data from the API
+    const demoData = [
+      {
+        id: 1,
+        startDate: '2024-01-01T00:00:00Z',
+        description: 'Feasibility Study for Coal Block A',
+        deadline: '2024-06-30T23:59:59Z',
+      },
+      {
+        id: 2,
+        startDate: '2024-07-01T00:00:00Z',
+        description: 'Environmental Impact Assessment',
+        deadline: '2024-12-31T23:59:59Z',
+      },
+      {
+        id: 3,
+        startDate: '2025-01-01T00:00:00Z',
+        description: 'Land Acquisition and Approvals',
+        deadline: '2025-06-30T23:59:59Z',
+      },
+      {
+        id: 4,
+        startDate: '2025-07-01T00:00:00Z',
+        description: 'Equipment Procurement',
+        deadline: '2025-12-31T23:59:59Z',
+      },
+      {
+        id: 5,
+        startDate: '2026-01-01T00:00:00Z',
+        description: 'Initial Mining Operations',
+        deadline: '2026-12-31T23:59:59Z',
+      },
+    ];
+
+    // Transform tasks to the format required by the Gantt chart
     const transformTasksToChartData = (tasks) => {
       const header = [
-        'Task ID',
-        'Task Name',
-        'Start Date',
-        'End Date',
-        'Duration',
-        'Percent Complete',
-        'Dependencies',
+        'Task ID', // ID of the task
+        'Task Name', // Description of the task
+        'Start Date', // Start date of the task
+        'End Date', // Deadline of the task
+        'Duration', // Duration in days
+        'Percent Complete', // Progress completion percentage
+        'Dependencies', // Task dependencies (null for this case)
       ];
 
       const rows = tasks.map((task) => {
@@ -25,38 +56,24 @@ const GanttChart = ({ id }) => {
         const endDate = parseDate(transformedTask.endDate);
         return [
           transformedTask.id, // Task ID as a string
-          transformedTask.name, // Task Name
-          startDate, // Start Date
-          endDate, // End Date
+          transformedTask.name, // Task Name (description)
+          startDate, // Start Date (ISO format converted to Date object)
+          endDate, // End Date (ISO format converted to Date object)
           (endDate - startDate) / (1000 * 60 * 60 * 24), // Duration in days
           percentageComplete(startDate, endDate), // Percent Complete
-          transformedTask.dependencies, // Dependencies
+          transformedTask.dependencies, // Dependencies (null for now)
         ];
       });
 
       return [header, ...rows];
     };
-    const fetchData = async () => {
-      try {
-        const response = await axios.get(
-          `${process.env.REACT_APP_PROJECT_BASE_API}/api/projects/${id}/getMilestones`
-        );
-        const data = response.data.notification || {};
-        setTaskjson(data);
-
-        // Generate chart data after fetching
-        if (data.tasks) {
-          const formattedData = transformTasksToChartData(data.tasks);
-          setChartData(formattedData);
-        }
-      } catch (error) {
-        console.error('Error fetching data:', error);
-      }
-    };
 
-    fetchData();
-  }, [id]);
+    // Process the demo data
+    const formattedData = transformTasksToChartData(demoData);
+    setChartData(formattedData);
+  }, []);
 
+  // Calculate the percentage of completion for the Gantt task
   const percentageComplete = (startDate, endDate) => {
     const currentDate = Date.now();
     if (currentDate >= endDate.getTime()) return 100;
@@ -66,41 +83,41 @@ const GanttChart = ({ id }) => {
     );
   };
 
+  // Transform task data to the required Gantt format
   const transformDataToGanttJson = (task) => ({
     id: task.id, // Ensure Task ID is a string
     name: task.description, // Map description to name
-    startDate: task.startDate.split('T')[0], // Extract date from ISO format
-    endDate: task.deadline.split('T')[0], // Extract date from ISO format
-    dependencies: null, // Default dependencies to null
+    startDate: task.startDate.split('T')[0], // Extract date from ISO format (YYYY-MM-DD)
+    endDate: task.deadline.split('T')[0], // Extract date from ISO format (YYYY-MM-DD)
+    dependencies: null, // Default dependencies to null (none in this case)
   });
 
+  // Parse date from "YYYY-MM-DD" string format to JavaScript Date object
   const parseDate = (dateString) => {
     const [year, month, day] = dateString.split('-').map(Number);
     return new Date(year, month - 1, day); // Month is zero-based
   };
 
   const options = {
-    height: 400,
+    // height: 400,
     gantt: {
       criticalPathEnabled: true, // Highlight the critical path
       criticalPathStyle: {
         stroke: '#e64a19', // Red color for critical path
         strokeWidth: 2,
       },
+      innerGridTrack: { fill: '#f9f9f9' },
+      innerGridDarkTrack: { fill: '#dedede' },
     },
   };
 
-  if (!taskjson) {
-    return <div>Loading...</div>; // Show a loading state while fetching data
-  }
-
   return (
     <div>
-      <h1>Gantt Chart</h1>
+      <h1>Milestone</h1>
       <Chart
         chartType="Gantt"
         width="100%"
-        height="400px"
+        height="220px"
         data={chartData}
         options={options}
       />

src/pages/InvestigatorConsole.jsx

@@ -20,14 +20,18 @@ const InvestigatorConsole = () => {
         {/* Main Content */}
         <main className="flex-grow p-4 bg-white overflow-y-auto">
           {/* Timeline */}
-          <section className="mb-6">
-            <GanttChart id={project.id} />
-          </section>
+
+          <div className="mt-10 mx-4">
+            {' '}
+            <GanttChart id={project?.id} />
+          </div>
 
           {/* Schedule Table */}
-          <section>
+
+          <div className="mt-20">
             <ScheduleTable />
-          </section>
+          </div>
+
           <ChatList />
         </main>
       </div>