first change

Modules/PMS/resources/views/task/gantt/chart.blade.php

@@ -0,0 +1,120 @@
+@extends('layouts.app')
+@inject('employeeRepository', 'Modules\Employee\Repositories\EmployeeRepository')
+@push('css')
+  <link rel="stylesheet" type="text/css" href="{{ asset('assets/libs/dragula/dragula.min.css') }}" />
+@endpush
+@section('content')
+    <div class="container-fluid">
+
+        <x-dashboard.breadcumb :title="$title" />
+
+
+      @include('pms::task.gantt.filter')
+
+      <div class="card">
+        <div class="card-header">
+          <h4 class="card-title mb-0">Gantt Chart</h4>
+        </div>
+        <div class="card-body">
+          <div id="chart_div"></div>
+        </div>
+      </div>
+    </div>
+@endsection
+@push('js')
+  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
+  <script type="text/javascript">
+    google.charts.load('current', {
+      'packages': ['gantt']
+    });
+    google.charts.setOnLoadCallback(drawChart);
+
+    async function drawChart(formData) {
+
+      var data = new google.visualization.DataTable();
+      data.addColumn('string', 'Task ID');
+      data.addColumn('string', 'Task Name');
+      data.addColumn('string', 'Resource');
+      data.addColumn('date', 'Start Date');
+      data.addColumn('date', 'End Date');
+      data.addColumn('number', 'Duration');
+      data.addColumn('number', 'Percent Complete');
+      data.addColumn('string', 'Dependencies');
+
+      const fetchData = await getData(formData)
+
+      fetchData.data.forEach(element => {
+
+        const startDateParts = element.startDate.split('-');
+        const endDateParts = element.endDate.split('-');
+
+        const startDate = new Date(startDateParts[0], startDateParts[1] - 1, startDateParts[2]);
+        const endDate = new Date(endDateParts[0], endDateParts[1] - 1, endDateParts[2]);
+
+        data.addRow([
+          element.taskID.toString(),
+          element.taskName,
+          element.resource,
+          startDate,
+          endDate,
+          element.duration,
+          element.percentComplete,
+          element.dependencies
+        ]);
+      });
+
+      var options = {
+        height: 400,
+        responsive: true,
+        gantt: {
+          trackHeight: 30
+        }
+      };
+
+      var chart = new google.visualization.Gantt(document.getElementById('chart_div'));
+
+      chart.draw(data, options);
+    }
+
+    const getData = async (formData) => {
+      const queryString = new URLSearchParams(formData).toString();
+      return await fetch(`{{ route('task.getGantChartTask') }}?${queryString}`, {
+          headers: {
+            'Content-Type': 'application/json',
+            'Accept': 'application/json',
+            'url': '/task/get-gant-chart-ajax',
+            "X-CSRF-Token": document.querySelector('input[name=_token]').value
+          },
+        })
+        .then(response => {
+          if (!response.ok) {
+            throw new Error('Network response was not ok');
+          }
+          return response.json();
+        })
+        .then(data => {
+          return data;
+        })
+        .catch(error => {
+          console.error('There was a problem with the fetch operation:', error);
+        });
+    }
+
+    $('.ganttChartForm').on('submit', function(e) {
+      e.preventDefault();
+      formData = $(this).serialize();
+      drawChart(formData);
+    })
+
+    $('.btn-reset').on('click', function(e) {
+      e.preventDefault();
+      $('.ganttChartForm')[0].reset();
+      drawChart();
+    })
+
+
+    $(window).resize(function() {
+      drawChart();
+    });
+  </script>
+@endpush

Modules/PMS/resources/views/task/gantt/filter.blade.php

@@ -0,0 +1,45 @@
+<div class="card">
+  <div class="card-body">
+    <div class="row g-2">
+      <div class="col-sm-8">
+        {{ html()->form('GET')->route('task.getGantChartTask')->attributes(['class' => 'ganttChartForm'])->open() }}
+        <div class="row g-3">
+
+          <div class="col-sm-6">
+            <div class="">
+              {{ html()->text('date')->class('form-control')->value(request('date'))->placeholder('Date Range')->attributes([
+                      'id' => 'datepicker-range',
+                      'data-provider' => 'flatpickr',
+                      'data-date-format' => 'Y-m-d',
+                      'data-range-date' => 'true',
+                  ]) }}
+            </div>
+          </div>
+          <div class="col-sm-3">
+            <div>
+              {{ html()->select('project_id', $projectList)->placeholder('Select Project')->value(request('project_id'))->class('form-control select2') }}
+            </div>
+          </div>
+          <!--end col-->
+
+          <div class="col-sm-2">
+            <div class="d-flex flex-row gap-2">
+              <button type="submit" class="btn btn-primary">
+                <i class="ri-equalizer-fill me-2"></i>Filter</button>
+              <a href="javascript:void(0)" class="btn btn-danger btn-reset">
+                <i class="ri-bin-fill me-2"></i>Reset</a>
+            </div>
+          </div>
+
+          <!--end col-->
+        </div>
+        <!--end row-->
+        {{ html()->form()->close() }}
+
+      </div>
+      <!--end col-->
+
+    </div>
+    <!--end row-->
+  </div>
+</div>