+ );
+
+ // rendering issues on gantt card
+ const GanttBlockView = ({ data }: { data: IModule }) => (
+
+
s.value === data.status)?.color }}
+ />
+
+ {data?.name}
+
+
+ );
+
+ // handle gantt issue start date and target date
+ const handleUpdateDates = async (data: any) => {
+ const payload = {
+ id: data?.id,
+ start_date: data?.start_date,
+ target_date: data?.target_date,
+ };
+ };
+
+ const blockFormat = (blocks: any) =>
+ blocks && blocks.length > 0
+ ? blocks.map((_block: any) => {
+ if (_block?.start_date && _block.target_date) console.log("_block", _block);
+ return {
+ start_date: new Date(_block.created_at),
+ target_date: new Date(_block.updated_at),
+ data: _block,
+ };
+ })
+ : [];
+
+ return (
+
+ }
+ blockRender={(data: any) => }
+ />
+
+ );
+};
diff --git a/apps/app/components/views/gantt-chart.tsx b/apps/app/components/views/gantt-chart.tsx
new file mode 100644
index 000000000..dbe71fae0
--- /dev/null
+++ b/apps/app/components/views/gantt-chart.tsx
@@ -0,0 +1,81 @@
+import { FC } from "react";
+
+import { useRouter } from "next/router";
+
+// components
+import { GanttChartRoot } from "components/gantt-chart";
+// hooks
+import useGanttChartViewIssues from "hooks/gantt-chart/view-issues-view";
+
+type Props = {};
+
+export const ViewIssuesGanttChartView: FC
= ({}) => {
+ const router = useRouter();
+ const { workspaceSlug, projectId, viewId } = router.query;
+
+ const { ganttIssues, mutateGanttIssues } = useGanttChartViewIssues(
+ workspaceSlug as string,
+ projectId as string,
+ viewId as string
+ );
+
+ // rendering issues on gantt sidebar
+ const GanttSidebarBlockView = ({ data }: any) => (
+
+ );
+
+ // rendering issues on gantt card
+ const GanttBlockView = ({ data }: any) => (
+
+ );
+
+ // handle gantt issue start date and target date
+ const handleUpdateDates = async (data: any) => {
+ const payload = {
+ id: data?.id,
+ start_date: data?.start_date,
+ target_date: data?.target_date,
+ };
+
+ console.log("payload", payload);
+ };
+
+ const blockFormat = (blocks: any) =>
+ blocks && blocks.length > 0
+ ? blocks.map((_block: any) => {
+ if (_block?.start_date && _block.target_date) console.log("_block", _block);
+ return {
+ start_date: new Date(_block.created_at),
+ target_date: new Date(_block.updated_at),
+ data: _block,
+ };
+ })
+ : [];
+
+ return (
+
+ }
+ blockRender={(data: any) => }
+ />
+
+ );
+};
diff --git a/apps/app/components/views/index.ts b/apps/app/components/views/index.ts
index 7a6307e56..a68740368 100644
--- a/apps/app/components/views/index.ts
+++ b/apps/app/components/views/index.ts
@@ -1,5 +1,6 @@
export * from "./delete-view-modal";
export * from "./form";
+export * from "./gantt-chart";
export * from "./modal";
export * from "./select-filters";
-export * from "./single-view-item"
+export * from "./single-view-item";
diff --git a/apps/app/hooks/gantt-chart/cycle-issues-view.tsx b/apps/app/hooks/gantt-chart/cycle-issues-view.tsx
new file mode 100644
index 000000000..1782ca339
--- /dev/null
+++ b/apps/app/hooks/gantt-chart/cycle-issues-view.tsx
@@ -0,0 +1,32 @@
+import useSWR from "swr";
+
+// services
+import cyclesService from "services/cycles.service";
+// fetch-keys
+import { CYCLE_ISSUES_WITH_PARAMS } from "constants/fetch-keys";
+
+const useGanttChartCycleIssues = (
+ workspaceSlug: string | undefined,
+ projectId: string | undefined,
+ cycleId: string | undefined
+) => {
+ // all issues under the workspace and project
+ const { data: ganttIssues, mutate: mutateGanttIssues } = useSWR(
+ workspaceSlug && projectId && cycleId ? CYCLE_ISSUES_WITH_PARAMS(cycleId.toString()) : null,
+ workspaceSlug && projectId && cycleId
+ ? () =>
+ cyclesService.getCycleIssuesWithParams(
+ workspaceSlug.toString(),
+ projectId.toString(),
+ cycleId.toString()
+ )
+ : null
+ );
+
+ return {
+ ganttIssues,
+ mutateGanttIssues,
+ };
+};
+
+export default useGanttChartCycleIssues;
diff --git a/apps/app/hooks/gantt-chart/issue-view.tsx b/apps/app/hooks/gantt-chart/issue-view.tsx
new file mode 100644
index 000000000..bcdb0fca4
--- /dev/null
+++ b/apps/app/hooks/gantt-chart/issue-view.tsx
@@ -0,0 +1,23 @@
+import useSWR from "swr";
+
+// services
+import issuesService from "services/issues.service";
+// fetch-keys
+import { PROJECT_ISSUES_LIST_WITH_PARAMS } from "constants/fetch-keys";
+
+const useGanttChartIssues = (workspaceSlug: string | undefined, projectId: string | undefined) => {
+ // all issues under the workspace and project
+ const { data: ganttIssues, mutate: mutateGanttIssues } = useSWR(
+ workspaceSlug && projectId ? PROJECT_ISSUES_LIST_WITH_PARAMS(projectId) : null,
+ workspaceSlug && projectId
+ ? () => issuesService.getIssuesWithParams(workspaceSlug.toString(), projectId.toString())
+ : null
+ );
+
+ return {
+ ganttIssues,
+ mutateGanttIssues,
+ };
+};
+
+export default useGanttChartIssues;
diff --git a/apps/app/hooks/gantt-chart/module-issues-view.tsx b/apps/app/hooks/gantt-chart/module-issues-view.tsx
new file mode 100644
index 000000000..baf995944
--- /dev/null
+++ b/apps/app/hooks/gantt-chart/module-issues-view.tsx
@@ -0,0 +1,32 @@
+import useSWR from "swr";
+
+// services
+import modulesService from "services/modules.service";
+// fetch-keys
+import { MODULE_ISSUES_WITH_PARAMS } from "constants/fetch-keys";
+
+const useGanttChartModuleIssues = (
+ workspaceSlug: string | undefined,
+ projectId: string | undefined,
+ moduleId: string | undefined
+) => {
+ // all issues under the workspace and project
+ const { data: ganttIssues, mutate: mutateGanttIssues } = useSWR(
+ workspaceSlug && projectId && moduleId ? MODULE_ISSUES_WITH_PARAMS(moduleId.toString()) : null,
+ workspaceSlug && projectId && moduleId
+ ? () =>
+ modulesService.getModuleIssuesWithParams(
+ workspaceSlug.toString(),
+ projectId.toString(),
+ moduleId.toString()
+ )
+ : null
+ );
+
+ return {
+ ganttIssues,
+ mutateGanttIssues,
+ };
+};
+
+export default useGanttChartModuleIssues;
diff --git a/apps/app/hooks/gantt-chart/view-issues-view.tsx b/apps/app/hooks/gantt-chart/view-issues-view.tsx
new file mode 100644
index 000000000..7fc138570
--- /dev/null
+++ b/apps/app/hooks/gantt-chart/view-issues-view.tsx
@@ -0,0 +1,37 @@
+import useSWR from "swr";
+
+// services
+import issuesService from "services/issues.service";
+// hooks
+import useIssuesView from "hooks/use-issues-view";
+// fetch-keys
+import { VIEW_ISSUES } from "constants/fetch-keys";
+
+const useGanttChartViewIssues = (
+ workspaceSlug: string | undefined,
+ projectId: string | undefined,
+ viewId: string | undefined
+) => {
+ const { params } = useIssuesView();
+ const { order_by, group_by, ...viewGanttParams } = params;
+
+ // all issues under the view
+ const { data: ganttIssues, mutate: mutateGanttIssues } = useSWR(
+ workspaceSlug && projectId && viewId ? VIEW_ISSUES(viewId.toString(), viewGanttParams) : null,
+ workspaceSlug && projectId && viewId
+ ? () =>
+ issuesService.getIssuesWithParams(
+ workspaceSlug.toString(),
+ projectId.toString(),
+ viewGanttParams
+ )
+ : null
+ );
+
+ return {
+ ganttIssues,
+ mutateGanttIssues,
+ };
+};
+
+export default useGanttChartViewIssues;
diff --git a/apps/app/layouts/app-layout/app-header.tsx b/apps/app/layouts/app-layout/app-header.tsx
index fb533da93..95f998dec 100644
--- a/apps/app/layouts/app-layout/app-header.tsx
+++ b/apps/app/layouts/app-layout/app-header.tsx
@@ -9,7 +9,7 @@ type Props = {
};
const Header: React.FC = ({ breadcrumbs, left, right, setToggleSidebar }) => (
-
+