feat: Gantt chart (#1062)

* dev: Helpers

* dev: views

* dev: Chart views Month, Year and Day

* dev: Chart Workflow updates

* update: scroll functionality implementation

* update: data vaidation

* update: date renders and issue filter in the month view

* update: new date render month view

* update: scroll enabled left in chart

* update: Item render from the date it created.

* update: width implementation in chat view

* dev: chart render functionality in the gantt chart

* update: month view fix

* dev: chart render issues resolved

* update: fixed allchat views

* update: updated week view default values

* update: integrated chart view in issues

* update: grabble and sidebar logic impleemntation and integrated gantt in issues

* update: Preview gantt chart in month view

* fix: mutation in gantt chart after creating a new issue

* chore: cycles and modules list gantt chart

* update: Ui changes on gantt view

* fix: gantt chart height, chore: remove link from issue

---------

Co-authored-by: Aaryan Khandelwal <aaryankhandu123@gmail.com>

apps/app/components/cycles/cycles-view.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import dynamic from "next/dynamic";
 // headless ui
 import { Tab } from "@headlessui/react";
@@ -10,7 +10,7 @@ import {
   CompletedCyclesListProps,
   AllCyclesBoard,
   AllCyclesList,
-  CompletedCycles,
+  CyclesListGanttChartView,
 } from "components/cycles";
 // ui
 import { EmptyState, Loader } from "components/ui";
@@ -41,7 +41,7 @@ export const CyclesView: React.FC<Props> = ({
   draftCycles,
 }) => {
   const { storedValue: cycleTab, setValue: setCycleTab } = useLocalStorage("cycleTab", "All");
-  const { storedValue: cycleView, setValue: setCycleView } = useLocalStorage("cycleView", "list");
+  const { storedValue: cyclesView, setValue: setCyclesView } = useLocalStorage("cycleView", "list");
 
   const currentTabValue = (tab: string | null) => {
     switch (tab) {
@@ -73,8 +73,41 @@ export const CyclesView: React.FC<Props> = ({
   );
 
   return (
-    <div>
+    <>
+      <div className="flex gap-4 justify-between">
+        <h3 className="text-2xl font-semibold text-brand-base">Cycles</h3>
+        <div className="flex items-center gap-x-1">
+          <button
+            type="button"
+            className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-2 ${
+              cyclesView === "list" ? "bg-brand-surface-2" : ""
+            }`}
+            onClick={() => setCyclesView("list")}
+          >
+            <ListBulletIcon className="h-4 w-4 text-brand-secondary" />
+          </button>
+          <button
+            type="button"
+            className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-2 ${
+              cyclesView === "grid" ? "bg-brand-surface-2" : ""
+            }`}
+            onClick={() => setCyclesView("grid")}
+          >
+            <Squares2X2Icon className="h-4 w-4 text-brand-secondary" />
+          </button>
+          <button
+            type="button"
+            className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-2 ${
+              cyclesView === "gantt_chart" ? "bg-brand-surface-2" : ""
+            }`}
+            onClick={() => setCyclesView("gantt_chart")}
+          >
+            <ChartBarIcon className="h-4 w-4 text-brand-secondary" />
+          </button>
+        </div>
+      </div>
       <Tab.Group
+        as={React.Fragment}
         defaultIndex={currentTabValue(cycleTab)}
         onChange={(i) => {
           switch (i) {
@@ -94,59 +127,32 @@ export const CyclesView: React.FC<Props> = ({
           }
         }}
       >
-        {" "}
         <div className="flex justify-between">
           <Tab.List as="div" className="flex flex-wrap items-center justify-start gap-4 text-base">
-            {["All", "Active", "Upcoming", "Completed", "Drafts"].map((tab, index) => (
-              <Tab
-                key={index}
-                className={({ selected }) =>
-                  `rounded-3xl border px-6 py-1 outline-none ${
-                    selected
-                      ? "border-brand-accent bg-brand-accent text-white font-medium"
-                      : "border-brand-base bg-brand-base hover:bg-brand-surface-2"
-                  }`
-                }
-              >
-                {tab}
-              </Tab>
-            ))}
+            {["All", "Active", "Upcoming", "Completed", "Drafts"].map((tab, index) => {
+              if (cyclesView === "gantt_chart" && (tab === "Active" || tab === "Drafts"))
+                return null;
+
+              return (
+                <Tab
+                  key={index}
+                  className={({ selected }) =>
+                    `rounded-3xl border px-6 py-1 outline-none ${
+                      selected
+                        ? "border-brand-accent bg-brand-accent text-white font-medium"
+                        : "border-brand-base bg-brand-base hover:bg-brand-surface-2"
+                    }`
+                  }
+                >
+                  {tab}
+                </Tab>
+              );
+            })}
           </Tab.List>
-          {cycleTab !== "Active" && (
-            <div className="flex items-center gap-x-1">
-              <button
-                type="button"
-                className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 ${
-                  cycleView === "list" ? "bg-brand-surface-2" : ""
-                } hover:bg-brand-surface-2`}
-                onClick={() => setCycleView("list")}
-              >
-                <ListBulletIcon className="h-4 w-4 text-brand-secondary" />
-              </button>
-              <button
-                type="button"
-                className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 ${
-                  cycleView === "board" ? "bg-brand-surface-2" : ""
-                } hover:bg-brand-surface-2`}
-                onClick={() => setCycleView("board")}
-              >
-                <Squares2X2Icon className="h-4 w-4 text-brand-secondary" />
-              </button>
-              <button
-                type="button"
-                className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 ${
-                  cycleView === "gantt" ? "bg-brand-surface-2" : ""
-                } hover:bg-brand-surface-2`}
-                onClick={() => setCycleView("gantt")}
-              >
-                <ChartBarIcon className="h-4 w-4 text-brand-secondary" />
-              </button>
-            </div>
-          )}
         </div>
-        <Tab.Panels>
-          <Tab.Panel as="div" className="mt-7 space-y-5">
-            {cycleView === "list" && (
+        <Tab.Panels as={React.Fragment}>
+          <Tab.Panel as="div" className="mt-7 space-y-5 h-full overflow-y-auto">
+            {cyclesView === "list" && (
               <AllCyclesList
                 cycles={cyclesCompleteList}
                 setCreateUpdateCycleModal={setCreateUpdateCycleModal}
@@ -154,7 +160,7 @@ export const CyclesView: React.FC<Props> = ({
                 type="current"
               />
             )}
-            {cycleView === "board" && (
+            {cyclesView === "grid" && (
               <AllCyclesBoard
                 cycles={cyclesCompleteList}
                 setCreateUpdateCycleModal={setCreateUpdateCycleModal}
@@ -162,29 +168,26 @@ export const CyclesView: React.FC<Props> = ({
                 type="current"
               />
             )}
-            {cycleView === "gantt" && (
-              <EmptyState
-                type="cycle"
-                title="Create New Cycle"
-                description="Sprint more effectively with Cycles by confining your project to a fixed amount of time. Create new cycle now."
-                imgURL={emptyCycle}
-              />
+            {cyclesView === "gantt_chart" && (
+              <CyclesListGanttChartView cycles={cyclesCompleteList ?? []} />
             )}
           </Tab.Panel>
-          <Tab.Panel as="div" className="mt-7 space-y-5">
-            {currentAndUpcomingCycles?.current_cycle?.[0] ? (
-              <ActiveCycleDetails cycle={currentAndUpcomingCycles?.current_cycle?.[0]} />
-            ) : (
-              <EmptyState
-                type="cycle"
-                title="Create New Cycle"
-                description="Sprint more effectively with Cycles by confining your project to a fixed amount of time. Create new cycle now."
-                imgURL={emptyCycle}
-              />
-            )}
-          </Tab.Panel>
-          <Tab.Panel as="div" className="mt-7 space-y-5">
-            {cycleView === "list" && (
+          {cyclesView !== "gantt_chart" && (
+            <Tab.Panel as="div" className="mt-7 space-y-5">
+              {currentAndUpcomingCycles?.current_cycle?.[0] ? (
+                <ActiveCycleDetails cycle={currentAndUpcomingCycles?.current_cycle?.[0]} />
+              ) : (
+                <EmptyState
+                  type="cycle"
+                  title="Create New Cycle"
+                  description="Sprint more effectively with Cycles by confining your project to a fixed amount of time. Create new cycle now."
+                  imgURL={emptyCycle}
+                />
+              )}
+            </Tab.Panel>
+          )}
+          <Tab.Panel as="div" className="mt-7 space-y-5 h-full overflow-y-auto">
+            {cyclesView === "list" && (
               <AllCyclesList
                 cycles={currentAndUpcomingCycles?.upcoming_cycle}
                 setCreateUpdateCycleModal={setCreateUpdateCycleModal}
@@ -192,7 +195,7 @@ export const CyclesView: React.FC<Props> = ({
                 type="upcoming"
               />
             )}
-            {cycleView === "board" && (
+            {cyclesView === "board" && (
               <AllCyclesBoard
                 cycles={currentAndUpcomingCycles?.upcoming_cycle}
                 setCreateUpdateCycleModal={setCreateUpdateCycleModal}
@@ -200,50 +203,39 @@ export const CyclesView: React.FC<Props> = ({
                 type="upcoming"
               />
             )}
-            {cycleView === "gantt" && (
-              <EmptyState
-                type="cycle"
-                title="Create New Cycle"
-                description="Sprint more effectively with Cycles by confining your project to a fixed amount of time. Create new cycle now."
-                imgURL={emptyCycle}
-              />
+            {cyclesView === "gantt_chart" && (
+              <CyclesListGanttChartView cycles={currentAndUpcomingCycles?.upcoming_cycle ?? []} />
             )}
           </Tab.Panel>
           <Tab.Panel as="div" className="mt-7 space-y-5">
             <CompletedCycles
-              cycleView={cycleView ?? "list"}
+              cycleView={cyclesView ?? "list"}
               setCreateUpdateCycleModal={setCreateUpdateCycleModal}
               setSelectedCycle={setSelectedCycle}
             />
           </Tab.Panel>
-          <Tab.Panel as="div" className="mt-7 space-y-5">
-            {cycleView === "list" && (
-              <AllCyclesList
-                cycles={draftCycles?.draft_cycles}
-                setCreateUpdateCycleModal={setCreateUpdateCycleModal}
-                setSelectedCycle={setSelectedCycle}
-                type="draft"
-              />
-            )}
-            {cycleView === "board" && (
-              <AllCyclesBoard
-                cycles={draftCycles?.draft_cycles}
-                setCreateUpdateCycleModal={setCreateUpdateCycleModal}
-                setSelectedCycle={setSelectedCycle}
-                type="draft"
-              />
-            )}
-            {cycleView === "gantt" && (
-              <EmptyState
-                type="cycle"
-                title="Create New Cycle"
-                description="Sprint more effectively with Cycles by confining your project to a fixed amount of time. Create new cycle now."
-                imgURL={emptyCycle}
-              />
-            )}
-          </Tab.Panel>
+          {cyclesView !== "gantt_chart" && (
+            <Tab.Panel as="div" className="mt-7 space-y-5">
+              {cyclesView === "list" && (
+                <AllCyclesList
+                  cycles={draftCycles?.draft_cycles}
+                  setCreateUpdateCycleModal={setCreateUpdateCycleModal}
+                  setSelectedCycle={setSelectedCycle}
+                  type="draft"
+                />
+              )}
+              {cyclesView === "board" && (
+                <AllCyclesBoard
+                  cycles={draftCycles?.draft_cycles}
+                  setCreateUpdateCycleModal={setCreateUpdateCycleModal}
+                  setSelectedCycle={setSelectedCycle}
+                  type="draft"
+                />
+              )}
+            </Tab.Panel>
+          )}
         </Tab.Panels>
       </Tab.Group>
-    </div>
+    </>
   );
 };