chore: peek overview for issue view and my issue view (#2172)

* chore: peak overview for issue view and my issue view * fix: profile issue peak overview mutation fix * chore: code refactor * fix: image prefix url fix
2023-09-13 19:33:58 +05:30 · 2023-09-13 19:33:58 +05:30 · 32d08570e7
commit 32d08570e7
parent 1b1ed37405
21 changed files with 417 additions and 217 deletions
--- a/space/components/accounts/sign-in.tsx
+++ b/space/components/accounts/sign-in.tsx
@ -13,7 +13,7 @@ import useToast from "hooks/use-toast";
 // components
 import { EmailPasswordForm, GithubLoginButton, GoogleLoginButton, EmailCodeForm } from "components/accounts";
 // images
-const imagePrefix = process.env.NEXT_PUBLIC_DEPLOY_WITH_NGINX ? "/spaces/" : "";
+const imagePrefix = process.env.NEXT_PUBLIC_DEPLOY_WITH_NGINX ? "/spaces" : "";

 export const SignInView = observer(() => {
  const { user: userStore } = useMobxStore();
--- a/space/pages/onboarding/index.tsx
+++ b/space/pages/onboarding/index.tsx
@ -5,7 +5,7 @@ import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import { OnBoardingForm } from "components/accounts/onboarding-form";

-const imagePrefix = process.env.NEXT_PUBLIC_DEPLOY_WITH_NGINX ? "/spaces/" : "";
+const imagePrefix = process.env.NEXT_PUBLIC_DEPLOY_WITH_NGINX ? "/spaces" : "";

 const OnBoardingPage = () => {
  const { user: userStore } = useMobxStore();
--- a/web/components/core/views/all-views.tsx
+++ b/web/components/core/views/all-views.tsx
@ -1,4 +1,4 @@
-import React, { useCallback } from "react";
+import React, { useCallback, useState } from "react";

 import { useRouter } from "next/router";

@ -77,6 +77,8 @@ export const AllViews: React.FC<Props> = ({
  const router = useRouter();
  const { workspaceSlug, projectId, cycleId, moduleId } = router.query;

+  const [myIssueProjectId, setMyIssueProjectId] = useState<string | null>(null);
+
  const { user } = useUser();
  const { memberRole } = useProjectMyMembership();

@ -90,6 +92,10 @@ export const AllViews: React.FC<Props> = ({
  );
  const states = getStatesList(stateGroups);

+  const handleMyIssueOpen = (issue: IIssue) => {
+    setMyIssueProjectId(issue.project);
+  };
+
  const handleTrashBox = useCallback(
    (isDragging: boolean) => {
      if (isDragging && !trashBox) setTrashBox(true);
@ -128,6 +134,8 @@ export const AllViews: React.FC<Props> = ({
                handleIssueAction={handleIssueAction}
                openIssuesListModal={cycleId || moduleId ? openIssuesListModal : null}
                removeIssue={removeIssue}
+                myIssueProjectId={myIssueProjectId}
+                handleMyIssueOpen={handleMyIssueOpen}
                disableUserActions={disableUserActions}
                disableAddIssueOption={disableAddIssueOption}
                user={user}
@ -143,6 +151,8 @@ export const AllViews: React.FC<Props> = ({
                handleIssueAction={handleIssueAction}
                handleTrashBox={handleTrashBox}
                openIssuesListModal={cycleId || moduleId ? openIssuesListModal : null}
+                myIssueProjectId={myIssueProjectId}
+                handleMyIssueOpen={handleMyIssueOpen}
                removeIssue={removeIssue}
                states={states}
                user={user}
@ -166,7 +176,9 @@ export const AllViews: React.FC<Props> = ({
                userAuth={memberRole}
              />
            ) : (
-              displayFilters?.layout === "gantt_chart" && <GanttChartView />
+              displayFilters?.layout === "gantt_chart" && (
+                <GanttChartView disableUserActions={disableUserActions} />
+              )
            )}
          </>
        ) : router.pathname.includes("archived-issues") ? (
--- a/web/components/core/views/board-view/all-boards.tsx
+++ b/web/components/core/views/board-view/all-boards.tsx
@ -1,5 +1,12 @@
+import { useRouter } from "next/router";
+
+//hook
+import useMyIssues from "hooks/my-issues/use-my-issues";
+import useIssuesView from "hooks/use-issues-view";
+import useProfileIssues from "hooks/use-profile-issues";
 // components
 import { SingleBoard } from "components/core/views/board-view/single-board";
+import { IssuePeekOverview } from "components/issues";
 // icons
 import { StateGroupIcon } from "components/icons";
 // helpers
@ -16,6 +23,8 @@ type Props = {
  handleTrashBox: (isDragging: boolean) => void;
  openIssuesListModal?: (() => void) | null;
  removeIssue: ((bridgeId: string, issueId: string) => void) | null;
+  myIssueProjectId?: string | null;
+  handleMyIssueOpen?: (issue: IIssue) => void;
  states: IState[] | undefined;
  user: ICurrentUserResponse | undefined;
  userAuth: UserAuth;
@ -30,16 +39,40 @@ export const AllBoards: React.FC<Props> = ({
  handleIssueAction,
  handleTrashBox,
  openIssuesListModal,
+  myIssueProjectId,
+  handleMyIssueOpen,
  removeIssue,
  states,
  user,
  userAuth,
  viewProps,
 }) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId, userId } = router.query;
+
+  const isProfileIssue =
+    router.pathname.includes("assigned") ||
+    router.pathname.includes("created") ||
+    router.pathname.includes("subscribed");
+
+  const isMyIssue = router.pathname.includes("my-issues");
+
+  const { mutateIssues } = useIssuesView();
+  const { mutateMyIssues } = useMyIssues(workspaceSlug?.toString());
+  const { mutateProfileIssues } = useProfileIssues(workspaceSlug?.toString(), userId?.toString());
+
  const { displayFilters, groupedIssues } = viewProps;

  return (
    <>
+      <IssuePeekOverview
+        handleMutation={() =>
+          isMyIssue ? mutateMyIssues() : isProfileIssue ? mutateProfileIssues() : mutateIssues()
+        }
+        projectId={myIssueProjectId ? myIssueProjectId : projectId?.toString() ?? ""}
+        workspaceSlug={workspaceSlug?.toString() ?? ""}
+        readOnly={disableUserActions}
+      />
      {groupedIssues ? (
        <div className="horizontal-scroll-enable flex h-full gap-x-4 p-8">
          {Object.keys(groupedIssues).map((singleGroup, index) => {
@ -63,6 +96,7 @@ export const AllBoards: React.FC<Props> = ({
                handleIssueAction={handleIssueAction}
                handleTrashBox={handleTrashBox}
                openIssuesListModal={openIssuesListModal ?? null}
+                handleMyIssueOpen={handleMyIssueOpen}
                removeIssue={removeIssue}
                user={user}
                userAuth={userAuth}
--- a/web/components/core/views/board-view/single-board.tsx
+++ b/web/components/core/views/board-view/single-board.tsx
@ -26,6 +26,7 @@ type Props = {
  handleIssueAction: (issue: IIssue, action: "copy" | "delete" | "edit") => void;
  handleTrashBox: (isDragging: boolean) => void;
  openIssuesListModal?: (() => void) | null;
+  handleMyIssueOpen?: (issue: IIssue) => void;
  removeIssue: ((bridgeId: string, issueId: string) => void) | null;
  user: ICurrentUserResponse | undefined;
  userAuth: UserAuth;
@ -42,6 +43,7 @@ export const SingleBoard: React.FC<Props> = ({
  handleIssueAction,
  handleTrashBox,
  openIssuesListModal,
+  handleMyIssueOpen,
  removeIssue,
  user,
  userAuth,
@ -50,7 +52,7 @@ export const SingleBoard: React.FC<Props> = ({
  // collapse/expand
  const [isCollapsed, setIsCollapsed] = useState(true);

-  const { displayFilters, groupedIssues, properties } = viewProps;
+  const { displayFilters, groupedIssues } = viewProps;

  const router = useRouter();
  const { cycleId, moduleId } = router.query;
@ -135,6 +137,7 @@ export const SingleBoard: React.FC<Props> = ({
                        makeIssueCopy={() => handleIssueAction(issue, "copy")}
                        handleDeleteIssue={() => handleIssueAction(issue, "delete")}
                        handleTrashBox={handleTrashBox}
+                        handleMyIssueOpen={handleMyIssueOpen}
                        removeIssue={() => {
                          if (removeIssue && issue.bridge_id)
                            removeIssue(issue.bridge_id, issue.id);
--- a/web/components/core/views/board-view/single-issue.tsx
+++ b/web/components/core/views/board-view/single-issue.tsx
@ -1,6 +1,5 @@
 import React, { useCallback, useEffect, useRef, useState } from "react";

-import Link from "next/link";
 import { useRouter } from "next/router";

 import { mutate } from "swr";
@ -58,6 +57,7 @@ type Props = {
  index: number;
  editIssue: () => void;
  makeIssueCopy: () => void;
+  handleMyIssueOpen?: (issue: IIssue) => void;
  removeIssue?: (() => void) | null;
  handleDeleteIssue: (issue: IIssue) => void;
  handleTrashBox: (isDragging: boolean) => void;
@ -75,6 +75,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
  index,
  editIssue,
  makeIssueCopy,
+  handleMyIssueOpen,
  removeIssue,
  groupTitle,
  handleDeleteIssue,
@ -187,6 +188,17 @@ export const SingleBoardIssue: React.FC<Props> = ({

  useOutsideClickDetector(actionSectionRef, () => setIsMenuActive(false));

+  const openPeekOverview = () => {
+    const { query } = router;
+
+    if (handleMyIssueOpen) handleMyIssueOpen(issue);
+
+    router.push({
+      pathname: router.pathname,
+      query: { ...query, peekIssue: issue.id },
+    });
+  };
+
  const isNotAllowed = userAuth.isGuest || userAuth.isViewer || disableUserActions;

  return (
@ -286,16 +298,22 @@ export const SingleBoardIssue: React.FC<Props> = ({
              )}
            </div>
          )}
-          <Link href={`/${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`}>
-            <a className="flex flex-col gap-1.5">
-              {properties.key && (
-                <div className="text-xs font-medium text-custom-text-200">
-                  {issue.project_detail.identifier}-{issue.sequence_id}
-                </div>
-              )}
-              <h5 className="text-sm break-words line-clamp-2">{issue.name}</h5>
-            </a>
-          </Link>
+
+          <div className="flex flex-col gap-1.5">
+            {properties.key && (
+              <div className="text-xs font-medium text-custom-text-200">
+                {issue.project_detail.identifier}-{issue.sequence_id}
+              </div>
+            )}
+            <button
+              type="button"
+              className="text-sm text-left break-words line-clamp-2"
+              onClick={openPeekOverview}
+            >
+              {issue.name}
+            </button>
+          </div>
+
          <div
            className={`flex items-center gap-2 text-xs ${
              isDropdownActive ? "" : "overflow-x-scroll"
--- a/web/components/core/views/calendar-view/calendar.tsx
+++ b/web/components/core/views/calendar-view/calendar.tsx
@ -12,6 +12,7 @@ import issuesService from "services/issues.service";
 import useCalendarIssuesView from "hooks/use-calendar-issues-view";
 // components
 import { SingleCalendarDate, CalendarHeader } from "components/core";
+import { IssuePeekOverview } from "components/issues";
 // ui
 import { Spinner } from "components/ui";
 // helpers
@ -60,7 +61,8 @@ export const CalendarView: React.FC<Props> = ({
  const router = useRouter();
  const { workspaceSlug, projectId, cycleId, moduleId, viewId } = router.query;

-  const { calendarIssues, params, displayFilters, setDisplayFilters } = useCalendarIssuesView();
+  const { calendarIssues, mutateIssues, params, displayFilters, setDisplayFilters } =
+    useCalendarIssuesView();

  const totalDate = eachDayOfInterval({
    start: calendarDates.startDate,
@ -170,75 +172,85 @@ export const CalendarView: React.FC<Props> = ({

  const isNotAllowed = userAuth.isGuest || userAuth.isViewer || disableUserActions;

-  return calendarIssues ? (
-    <div className="h-full overflow-y-auto">
-      <DragDropContext onDragEnd={onDragEnd}>
-        <div className="h-full rounded-lg p-8 text-custom-text-200">
-          <CalendarHeader
-            isMonthlyView={isMonthlyView}
-            setIsMonthlyView={setIsMonthlyView}
-            showWeekEnds={showWeekEnds}
-            setShowWeekEnds={setShowWeekEnds}
-            currentDate={currentDate}
-            setCurrentDate={setCurrentDate}
-            changeDateRange={changeDateRange}
-          />
+  return (
+    <>
+      <IssuePeekOverview
+        handleMutation={() => mutateIssues()}
+        projectId={projectId?.toString() ?? ""}
+        workspaceSlug={workspaceSlug?.toString() ?? ""}
+        readOnly={disableUserActions}
+      />
+      {calendarIssues ? (
+        <div className="h-full overflow-y-auto">
+          <DragDropContext onDragEnd={onDragEnd}>
+            <div className="h-full rounded-lg p-8 text-custom-text-200">
+              <CalendarHeader
+                isMonthlyView={isMonthlyView}
+                setIsMonthlyView={setIsMonthlyView}
+                showWeekEnds={showWeekEnds}
+                setShowWeekEnds={setShowWeekEnds}
+                currentDate={currentDate}
+                setCurrentDate={setCurrentDate}
+                changeDateRange={changeDateRange}
+              />

-          <div
-            className={`grid auto-rows-[minmax(36px,1fr)] rounded-lg ${
-              showWeekEnds ? "grid-cols-7" : "grid-cols-5"
-            }`}
-          >
-            {weeks.map((date, index) => (
              <div
-                key={index}
-                className={`flex  items-center justify-start gap-2 border-custom-border-200 bg-custom-background-90 p-1.5 text-base font-medium text-custom-text-200 ${
-                  !isMonthlyView
-                    ? showWeekEnds
-                      ? (index + 1) % 7 === 0
-                        ? ""
-                        : "border-r"
-                      : (index + 1) % 5 === 0
-                      ? ""
-                      : "border-r"
-                    : ""
+                className={`grid auto-rows-[minmax(36px,1fr)] rounded-lg ${
+                  showWeekEnds ? "grid-cols-7" : "grid-cols-5"
                }`}
              >
-                <span>
-                  {isMonthlyView
-                    ? formatDate(date, "eee").substring(0, 3)
-                    : formatDate(date, "eee")}
-                </span>
-                {!isMonthlyView && <span>{formatDate(date, "d")}</span>}
+                {weeks.map((date, index) => (
+                  <div
+                    key={index}
+                    className={`flex  items-center justify-start gap-2 border-custom-border-200 bg-custom-background-90 p-1.5 text-base font-medium text-custom-text-200 ${
+                      !isMonthlyView
+                        ? showWeekEnds
+                          ? (index + 1) % 7 === 0
+                            ? ""
+                            : "border-r"
+                          : (index + 1) % 5 === 0
+                          ? ""
+                          : "border-r"
+                        : ""
+                    }`}
+                  >
+                    <span>
+                      {isMonthlyView
+                        ? formatDate(date, "eee").substring(0, 3)
+                        : formatDate(date, "eee")}
+                    </span>
+                    {!isMonthlyView && <span>{formatDate(date, "d")}</span>}
+                  </div>
+                ))}
              </div>
-            ))}
-          </div>

-          <div
-            className={`grid h-full ${isMonthlyView ? "auto-rows-min" : ""} ${
-              showWeekEnds ? "grid-cols-7" : "grid-cols-5"
-            } `}
-          >
-            {currentViewDaysData.map((date, index) => (
-              <SingleCalendarDate
-                key={`${date}-${index}`}
-                index={index}
-                date={date}
-                handleIssueAction={handleIssueAction}
-                addIssueToDate={addIssueToDate}
-                isMonthlyView={isMonthlyView}
-                showWeekEnds={showWeekEnds}
-                user={user}
-                isNotAllowed={isNotAllowed}
-              />
-            ))}
-          </div>
+              <div
+                className={`grid h-full ${isMonthlyView ? "auto-rows-min" : ""} ${
+                  showWeekEnds ? "grid-cols-7" : "grid-cols-5"
+                } `}
+              >
+                {currentViewDaysData.map((date, index) => (
+                  <SingleCalendarDate
+                    key={`${date}-${index}`}
+                    index={index}
+                    date={date}
+                    handleIssueAction={handleIssueAction}
+                    addIssueToDate={addIssueToDate}
+                    isMonthlyView={isMonthlyView}
+                    showWeekEnds={showWeekEnds}
+                    user={user}
+                    isNotAllowed={isNotAllowed}
+                  />
+                ))}
+              </div>
+            </div>
+          </DragDropContext>
        </div>
-      </DragDropContext>
-    </div>
-  ) : (
-    <div className="flex h-full w-full items-center justify-center">
-      <Spinner />
-    </div>
+      ) : (
+        <div className="flex h-full w-full items-center justify-center">
+          <Spinner />
+        </div>
+      )}
+    </>
  );
 };
--- a/web/components/core/views/calendar-view/single-issue.tsx
+++ b/web/components/core/views/calendar-view/single-issue.tsx
@ -1,6 +1,5 @@
 import React, { useCallback } from "react";

-import Link from "next/link";
 import { useRouter } from "next/router";

 import { mutate } from "swr";
@ -158,6 +157,15 @@ export const SingleCalendarIssue: React.FC<Props> = ({
    ? Object.values(properties).some((value) => value === true)
    : false;

+  const openPeekOverview = () => {
+    const { query } = router;
+
+    router.push({
+      pathname: router.pathname,
+      query: { ...query, peekIssue: issue.id },
+    });
+  };
+
  return (
    <div
      key={index}
@ -193,23 +201,27 @@ export const SingleCalendarIssue: React.FC<Props> = ({
            </CustomMenu>
          </div>
        )}
-        <Link href={`/${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`}>
-          <a className="flex w-full cursor-pointer flex-col items-start justify-center gap-1.5">
-            {properties.key && (
-              <Tooltip
-                tooltipHeading="Issue ID"
-                tooltipContent={`${issue.project_detail?.identifier}-${issue.sequence_id}`}
-              >
-                <span className="flex-shrink-0 text-xs text-custom-text-200">
-                  {issue.project_detail?.identifier}-{issue.sequence_id}
-                </span>
-              </Tooltip>
-            )}
-            <Tooltip position="top-left" tooltipHeading="Title" tooltipContent={issue.name}>
-              <span className="text-xs text-custom-text-100">{truncateText(issue.name, 25)}</span>
+
+        <button
+          type="button"
+          className="flex w-full cursor-pointer flex-col items-start justify-center gap-1.5"
+          onClick={openPeekOverview}
+        >
+          {properties.key && (
+            <Tooltip
+              tooltipHeading="Issue ID"
+              tooltipContent={`${issue.project_detail?.identifier}-${issue.sequence_id}`}
+            >
+              <span className="flex-shrink-0 text-xs text-custom-text-200">
+                {issue.project_detail?.identifier}-{issue.sequence_id}
+              </span>
            </Tooltip>
-          </a>
-        </Link>
+          )}
+          <Tooltip position="top-left" tooltipHeading="Title" tooltipContent={issue.name}>
+            <span className="text-xs text-custom-text-100">{truncateText(issue.name, 25)}</span>
+          </Tooltip>
+        </button>
+
        {displayProperties && (
          <div className="relative mt-1.5 w-full flex flex-wrap items-center gap-2 text-xs">
            {properties.priority && (
--- a/web/components/core/views/gantt-chart-view/index.tsx
+++ b/web/components/core/views/gantt-chart-view/index.tsx
@ -6,20 +6,24 @@ import { IssueGanttChartView } from "components/issues";
 import { ModuleIssuesGanttChartView } from "components/modules";
 import { ViewIssuesGanttChartView } from "components/views";

-export const GanttChartView = () => {
+type Props = {
+  disableUserActions: boolean;
+};
+
+export const GanttChartView: React.FC<Props> = ({ disableUserActions }) => {
  const router = useRouter();
  const { cycleId, moduleId, viewId } = router.query;

  return (
    <>
      {cycleId ? (
-        <CycleIssuesGanttChartView />
+        <CycleIssuesGanttChartView disableUserActions={disableUserActions} />
      ) : moduleId ? (
-        <ModuleIssuesGanttChartView />
+        <ModuleIssuesGanttChartView disableUserActions={disableUserActions} />
      ) : viewId ? (
-        <ViewIssuesGanttChartView />
+        <ViewIssuesGanttChartView disableUserActions={disableUserActions} />
      ) : (
-        <IssueGanttChartView />
+        <IssueGanttChartView disableUserActions={disableUserActions} />
      )}
    </>
  );
--- a/web/components/core/views/issues-view.tsx
+++ b/web/components/core/views/issues-view.tsx
@ -19,7 +19,7 @@ import useIssuesProperties from "hooks/use-issue-properties";
 import useProjectMembers from "hooks/use-project-members";
 // components
 import { FiltersList, AllViews } from "components/core";
-import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
+import { CreateUpdateIssueModal, DeleteIssueModal, IssuePeekOverview } from "components/issues";
 import { CreateUpdateViewModal } from "components/views";
 // ui
 import { PrimaryButton, SecondaryButton } from "components/ui";
@ -462,6 +462,7 @@ export const IssuesView: React.FC<Props> = ({
        data={issueToDelete}
        user={user}
      />
+
      {areFiltersApplied && (
        <>
          <div className="flex items-center justify-between gap-2 px-5 pt-3 pb-0">
--- a/web/components/core/views/list-view/all-lists.tsx
+++ b/web/components/core/views/list-view/all-lists.tsx
@ -1,5 +1,12 @@
+import { useRouter } from "next/router";
+
+// hooks
+import useMyIssues from "hooks/my-issues/use-my-issues";
+import useIssuesView from "hooks/use-issues-view";
+import useProfileIssues from "hooks/use-profile-issues";
 // components
 import { SingleList } from "components/core/views/list-view/single-list";
+import { IssuePeekOverview } from "components/issues";
 // types
 import { ICurrentUserResponse, IIssue, IIssueViewProps, IState, UserAuth } from "types";

@ -9,6 +16,8 @@ type Props = {
  addIssueToGroup: (groupTitle: string) => void;
  handleIssueAction: (issue: IIssue, action: "copy" | "delete" | "edit") => void;
  openIssuesListModal?: (() => void) | null;
+  myIssueProjectId?: string | null;
+  handleMyIssueOpen?: (issue: IIssue) => void;
  removeIssue: ((bridgeId: string, issueId: string) => void) | null;
  disableUserActions: boolean;
  disableAddIssueOption?: boolean;
@ -23,16 +32,39 @@ export const AllLists: React.FC<Props> = ({
  disableUserActions,
  disableAddIssueOption = false,
  openIssuesListModal,
+  handleMyIssueOpen,
+  myIssueProjectId,
  removeIssue,
  states,
  user,
  userAuth,
  viewProps,
 }) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId, userId } = router.query;
+
+  const isProfileIssue =
+    router.pathname.includes("assigned") ||
+    router.pathname.includes("created") ||
+    router.pathname.includes("subscribed");
+
+  const isMyIssue = router.pathname.includes("my-issues");
+  const { mutateIssues } = useIssuesView();
+  const { mutateMyIssues } = useMyIssues(workspaceSlug?.toString());
+  const { mutateProfileIssues } = useProfileIssues(workspaceSlug?.toString(), userId?.toString());
+
  const { displayFilters, groupedIssues } = viewProps;

  return (
    <>
+      <IssuePeekOverview
+        handleMutation={() =>
+          isMyIssue ? mutateMyIssues() : isProfileIssue ? mutateProfileIssues() : mutateIssues()
+        }
+        projectId={myIssueProjectId ? myIssueProjectId : projectId?.toString() ?? ""}
+        workspaceSlug={workspaceSlug?.toString() ?? ""}
+        readOnly={disableUserActions}
+      />
      {groupedIssues && (
        <div className="h-full overflow-y-auto">
          {Object.keys(groupedIssues).map((singleGroup) => {
@ -51,6 +83,7 @@ export const AllLists: React.FC<Props> = ({
                currentState={currentState}
                addIssueToGroup={() => addIssueToGroup(singleGroup)}
                handleIssueAction={handleIssueAction}
+                handleMyIssueOpen={handleMyIssueOpen}
                openIssuesListModal={openIssuesListModal}
                removeIssue={removeIssue}
                disableUserActions={disableUserActions}
--- a/web/components/core/views/list-view/single-issue.tsx
+++ b/web/components/core/views/list-view/single-issue.tsx
@ -61,6 +61,7 @@ type Props = {
  makeIssueCopy: () => void;
  removeIssue?: (() => void) | null;
  handleDeleteIssue: (issue: IIssue) => void;
+  handleMyIssueOpen?: (issue: IIssue) => void;
  disableUserActions: boolean;
  user: ICurrentUserResponse | undefined;
  userAuth: UserAuth;
@ -76,6 +77,7 @@ export const SingleListIssue: React.FC<Props> = ({
  removeIssue,
  groupTitle,
  handleDeleteIssue,
+  handleMyIssueOpen,
  disableUserActions,
  user,
  userAuth,
@ -178,6 +180,16 @@ export const SingleListIssue: React.FC<Props> = ({
    ? `/${workspaceSlug}/projects/${issue.project}/archived-issues/${issue.id}`
    : `/${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`;

+  const openPeekOverview = (issue: IIssue) => {
+    const { query } = router;
+
+    if (handleMyIssueOpen) handleMyIssueOpen(issue);
+    router.push({
+      pathname: router.pathname,
+      query: { ...query, peekIssue: issue.id },
+    });
+  };
+
  const isNotAllowed =
    userAuth.isGuest || userAuth.isViewer || disableUserActions || isArchivedIssues;

@ -220,23 +232,27 @@ export const SingleListIssue: React.FC<Props> = ({
        }}
      >
        <div className="flex-grow cursor-pointer min-w-[200px] whitespace-nowrap overflow-hidden overflow-ellipsis">
-          <Link href={issuePath}>
-            <a className="group relative flex items-center gap-2">
-              {properties.key && (
-                <Tooltip
-                  tooltipHeading="Issue ID"
-                  tooltipContent={`${issue.project_detail?.identifier}-${issue.sequence_id}`}
-                >
-                  <span className="flex-shrink-0 text-xs text-custom-text-200">
-                    {issue.project_detail?.identifier}-{issue.sequence_id}
-                  </span>
-                </Tooltip>
-              )}
-              <Tooltip position="top-left" tooltipHeading="Title" tooltipContent={issue.name}>
-                <span className="truncate text-[0.825rem] text-custom-text-100">{issue.name}</span>
+          <div className="group relative flex items-center gap-2">
+            {properties.key && (
+              <Tooltip
+                tooltipHeading="Issue ID"
+                tooltipContent={`${issue.project_detail?.identifier}-${issue.sequence_id}`}
+              >
+                <span className="flex-shrink-0 text-xs text-custom-text-200">
+                  {issue.project_detail?.identifier}-{issue.sequence_id}
+                </span>
              </Tooltip>
-            </a>
-          </Link>
+            )}
+            <Tooltip position="top-left" tooltipHeading="Title" tooltipContent={issue.name}>
+              <button
+                type="button"
+                className="truncate text-[0.825rem] text-custom-text-100"
+                onClick={() => openPeekOverview(issue)}
+              >
+                {issue.name}
+              </button>
+            </Tooltip>
+          </div>
        </div>

        <div
--- a/web/components/core/views/list-view/single-list.tsx
+++ b/web/components/core/views/list-view/single-list.tsx
@ -41,6 +41,7 @@ type Props = {
  addIssueToGroup: () => void;
  handleIssueAction: (issue: IIssue, action: "copy" | "delete" | "edit") => void;
  openIssuesListModal?: (() => void) | null;
+  handleMyIssueOpen?: (issue: IIssue) => void;
  removeIssue: ((bridgeId: string, issueId: string) => void) | null;
  disableUserActions: boolean;
  disableAddIssueOption?: boolean;
@ -55,6 +56,7 @@ export const SingleList: React.FC<Props> = ({
  addIssueToGroup,
  handleIssueAction,
  openIssuesListModal,
+  handleMyIssueOpen,
  removeIssue,
  disableUserActions,
  disableAddIssueOption = false,
@ -251,6 +253,7 @@ export const SingleList: React.FC<Props> = ({
                      editIssue={() => handleIssueAction(issue, "edit")}
                      makeIssueCopy={() => handleIssueAction(issue, "copy")}
                      handleDeleteIssue={() => handleIssueAction(issue, "delete")}
+                      handleMyIssueOpen={handleMyIssueOpen}
                      removeIssue={() => {
                        if (removeIssue !== null && issue.bridge_id)
                          removeIssue(issue.bridge_id, issue.id);
--- a/web/components/cycles/gantt-chart/cycle-issues-layout.tsx
+++ b/web/components/cycles/gantt-chart/cycle-issues-layout.tsx
@ -8,11 +8,15 @@ import { updateGanttIssue } from "components/gantt-chart/hooks/block-update";
 import useProjectDetails from "hooks/use-project-details";
 // components
 import { GanttChartRoot, renderIssueBlocksStructure } from "components/gantt-chart";
-import { IssueGanttBlock, IssueGanttSidebarBlock } from "components/issues";
+import { IssueGanttBlock, IssueGanttSidebarBlock, IssuePeekOverview } from "components/issues";
 // types
 import { IIssue } from "types";

-export const CycleIssuesGanttChartView = () => {
+type Props = {
+  disableUserActions: boolean;
+};
+
+export const CycleIssuesGanttChartView: React.FC<Props> = ({ disableUserActions }) => {
  const router = useRouter();
  const { workspaceSlug, projectId, cycleId } = router.query;

@ -30,23 +34,31 @@ export const CycleIssuesGanttChartView = () => {
  const isAllowed = projectDetails?.member_role === 20 || projectDetails?.member_role === 15;

  return (
-    <div className="w-full h-full">
-      <GanttChartRoot
-        border={false}
-        title="Issues"
-        loaderTitle="Issues"
-        blocks={ganttIssues ? renderIssueBlocksStructure(ganttIssues as IIssue[]) : null}
-        blockUpdateHandler={(block, payload) =>
-          updateGanttIssue(block, payload, mutateGanttIssues, user, workspaceSlug?.toString())
-        }
-        SidebarBlockRender={IssueGanttSidebarBlock}
-        BlockRender={IssueGanttBlock}
-        enableBlockLeftResize={isAllowed}
-        enableBlockRightResize={isAllowed}
-        enableBlockMove={isAllowed}
-        enableReorder={displayFilters.order_by === "sort_order" && isAllowed}
-        bottomSpacing
+    <>
+      <IssuePeekOverview
+        handleMutation={() => mutateGanttIssues()}
+        projectId={projectId?.toString() ?? ""}
+        workspaceSlug={workspaceSlug?.toString() ?? ""}
+        readOnly={disableUserActions}
      />
-    </div>
+      <div className="w-full h-full">
+        <GanttChartRoot
+          border={false}
+          title="Issues"
+          loaderTitle="Issues"
+          blocks={ganttIssues ? renderIssueBlocksStructure(ganttIssues as IIssue[]) : null}
+          blockUpdateHandler={(block, payload) =>
+            updateGanttIssue(block, payload, mutateGanttIssues, user, workspaceSlug?.toString())
+          }
+          SidebarBlockRender={IssueGanttSidebarBlock}
+          BlockRender={IssueGanttBlock}
+          enableBlockLeftResize={isAllowed}
+          enableBlockRightResize={isAllowed}
+          enableBlockMove={isAllowed}
+          enableReorder={displayFilters.order_by === "sort_order" && isAllowed}
+          bottomSpacing
+        />
+      </div>
+    </>
  );
 };
--- a/web/components/issues/form.tsx
+++ b/web/components/issues/form.tsx
@ -23,14 +23,7 @@ import {
 import { CreateStateModal } from "components/states";
 import { CreateLabelModal } from "components/labels";
 // ui
-import {
-  CustomMenu,
-  Input,
-  Loader,
-  PrimaryButton,
-  SecondaryButton,
-  ToggleSwitch,
-} from "components/ui";
+import { CustomMenu, Input, PrimaryButton, SecondaryButton, ToggleSwitch } from "components/ui";
 import { TipTapEditor } from "components/tiptap";
 // icons
 import { SparklesIcon, XMarkIcon } from "@heroicons/react/24/outline";
--- a/web/components/issues/gantt-chart/blocks.tsx
+++ b/web/components/issues/gantt-chart/blocks.tsx
@ -11,13 +11,21 @@ import { IIssue } from "types";

 export const IssueGanttBlock = ({ data }: { data: IIssue }) => {
  const router = useRouter();
-  const { workspaceSlug } = router.query;
+
+  const openPeekOverview = () => {
+    const { query } = router;
+
+    router.push({
+      pathname: router.pathname,
+      query: { ...query, peekIssue: data.id },
+    });
+  };

  return (
    <div
      className="flex items-center relative h-full w-full rounded cursor-pointer"
      style={{ backgroundColor: data?.state_detail?.color }}
-      onClick={() => router.push(`/${workspaceSlug}/projects/${data?.project}/issues/${data?.id}`)}
+      onClick={openPeekOverview}
    >
      <div className="absolute top-0 left-0 h-full w-full bg-custom-background-100/50" />
      <Tooltip
@ -43,14 +51,22 @@ export const IssueGanttBlock = ({ data }: { data: IIssue }) => {
 // rendering issues on gantt sidebar
 export const IssueGanttSidebarBlock = ({ data }: { data: IIssue }) => {
  const router = useRouter();
-  const { workspaceSlug } = router.query;

  const duration = findTotalDaysInRange(data?.start_date ?? "", data?.target_date ?? "", true);

+  const openPeekOverview = () => {
+    const { query } = router;
+
+    router.push({
+      pathname: router.pathname,
+      query: { ...query, peekIssue: data.id },
+    });
+  };
+
  return (
    <div
      className="relative w-full flex items-center gap-2 h-full cursor-pointer"
-      onClick={() => router.push(`/${workspaceSlug}/projects/${data?.project}/issues/${data?.id}`)}
+      onClick={openPeekOverview}
    >
      <StateGroupIcon stateGroup={data?.state_detail?.group} color={data?.state_detail?.color} />
      <div className="text-xs text-custom-text-300 flex-shrink-0">
--- a/web/components/issues/gantt-chart/layout.tsx
+++ b/web/components/issues/gantt-chart/layout.tsx
@ -8,11 +8,15 @@ import { updateGanttIssue } from "components/gantt-chart/hooks/block-update";
 import useProjectDetails from "hooks/use-project-details";
 // components
 import { GanttChartRoot, renderIssueBlocksStructure } from "components/gantt-chart";
-import { IssueGanttBlock, IssueGanttSidebarBlock } from "components/issues";
+import { IssueGanttBlock, IssueGanttSidebarBlock, IssuePeekOverview } from "components/issues";
 // types
 import { IIssue } from "types";

-export const IssueGanttChartView = () => {
+type Props = {
+  disableUserActions: boolean;
+};
+
+export const IssueGanttChartView: React.FC<Props> = ({ disableUserActions }) => {
  const router = useRouter();
  const { workspaceSlug, projectId } = router.query;

@ -29,23 +33,31 @@ export const IssueGanttChartView = () => {
  const isAllowed = projectDetails?.member_role === 20 || projectDetails?.member_role === 15;

  return (
-    <div className="w-full h-full">
-      <GanttChartRoot
-        border={false}
-        title="Issues"
-        loaderTitle="Issues"
-        blocks={ganttIssues ? renderIssueBlocksStructure(ganttIssues as IIssue[]) : null}
-        blockUpdateHandler={(block, payload) =>
-          updateGanttIssue(block, payload, mutateGanttIssues, user, workspaceSlug?.toString())
-        }
-        BlockRender={IssueGanttBlock}
-        SidebarBlockRender={IssueGanttSidebarBlock}
-        enableBlockLeftResize={isAllowed}
-        enableBlockRightResize={isAllowed}
-        enableBlockMove={isAllowed}
-        enableReorder={displayFilters.order_by === "sort_order" && isAllowed}
-        bottomSpacing
+    <>
+      <IssuePeekOverview
+        handleMutation={() => mutateGanttIssues()}
+        projectId={projectId?.toString() ?? ""}
+        workspaceSlug={workspaceSlug?.toString() ?? ""}
+        readOnly={disableUserActions}
      />
-    </div>
+      <div className="w-full h-full">
+        <GanttChartRoot
+          border={false}
+          title="Issues"
+          loaderTitle="Issues"
+          blocks={ganttIssues ? renderIssueBlocksStructure(ganttIssues as IIssue[]) : null}
+          blockUpdateHandler={(block, payload) =>
+            updateGanttIssue(block, payload, mutateGanttIssues, user, workspaceSlug?.toString())
+          }
+          BlockRender={IssueGanttBlock}
+          SidebarBlockRender={IssueGanttSidebarBlock}
+          enableBlockLeftResize={isAllowed}
+          enableBlockRightResize={isAllowed}
+          enableBlockMove={isAllowed}
+          enableReorder={displayFilters.order_by === "sort_order" && isAllowed}
+          bottomSpacing
+        />
+      </div>
+    </>
  );
 };
--- a/web/components/issues/my-issues/my-issues-view.tsx
+++ b/web/components/issues/my-issues/my-issues-view.tsx
@ -57,7 +57,7 @@ export const MyIssuesView: React.FC<Props> = ({
  const { user } = useUserAuth();

  const { groupedIssues, mutateMyIssues, isEmpty, params } = useMyIssues(workspaceSlug?.toString());
-  const { filters, setFilters, displayFilters, setDisplayFilters, properties } = useMyIssuesFilters(
+  const { filters, setFilters, displayFilters, properties } = useMyIssuesFilters(
    workspaceSlug?.toString()
  );

--- a/web/components/modules/gantt-chart/module-issues-layout.tsx
+++ b/web/components/modules/gantt-chart/module-issues-layout.tsx
@ -1,5 +1,3 @@
-import { FC } from "react";
-
 import { useRouter } from "next/router";

 // hooks
@ -10,13 +8,13 @@ import { updateGanttIssue } from "components/gantt-chart/hooks/block-update";
 import useProjectDetails from "hooks/use-project-details";
 // components
 import { GanttChartRoot, renderIssueBlocksStructure } from "components/gantt-chart";
-import { IssueGanttBlock, IssueGanttSidebarBlock } from "components/issues";
+import { IssueGanttBlock, IssueGanttSidebarBlock, IssuePeekOverview } from "components/issues";
 // types
 import { IIssue } from "types";

-type Props = {};
+type Props = { disableUserActions: boolean };

-export const ModuleIssuesGanttChartView: FC<Props> = ({}) => {
+export const ModuleIssuesGanttChartView: React.FC<Props> = ({ disableUserActions }) => {
  const router = useRouter();
  const { workspaceSlug, projectId, moduleId } = router.query;

@ -34,23 +32,31 @@ export const ModuleIssuesGanttChartView: FC<Props> = ({}) => {
  const isAllowed = projectDetails?.member_role === 20 || projectDetails?.member_role === 15;

  return (
-    <div className="w-full h-full">
-      <GanttChartRoot
-        border={false}
-        title="Issues"
-        loaderTitle="Issues"
-        blocks={ganttIssues ? renderIssueBlocksStructure(ganttIssues as IIssue[]) : null}
-        blockUpdateHandler={(block, payload) =>
-          updateGanttIssue(block, payload, mutateGanttIssues, user, workspaceSlug?.toString())
-        }
-        SidebarBlockRender={IssueGanttSidebarBlock}
-        BlockRender={IssueGanttBlock}
-        enableBlockLeftResize={isAllowed}
-        enableBlockRightResize={isAllowed}
-        enableBlockMove={isAllowed}
-        enableReorder={displayFilters.order_by === "sort_order" && isAllowed}
-        bottomSpacing
+    <>
+      <IssuePeekOverview
+        handleMutation={() => mutateGanttIssues()}
+        projectId={projectId?.toString() ?? ""}
+        workspaceSlug={workspaceSlug?.toString() ?? ""}
+        readOnly={disableUserActions}
      />
-    </div>
+      <div className="w-full h-full">
+        <GanttChartRoot
+          border={false}
+          title="Issues"
+          loaderTitle="Issues"
+          blocks={ganttIssues ? renderIssueBlocksStructure(ganttIssues as IIssue[]) : null}
+          blockUpdateHandler={(block, payload) =>
+            updateGanttIssue(block, payload, mutateGanttIssues, user, workspaceSlug?.toString())
+          }
+          SidebarBlockRender={IssueGanttSidebarBlock}
+          BlockRender={IssueGanttBlock}
+          enableBlockLeftResize={isAllowed}
+          enableBlockRightResize={isAllowed}
+          enableBlockMove={isAllowed}
+          enableReorder={displayFilters.order_by === "sort_order" && isAllowed}
+          bottomSpacing
+        />
+      </div>
+    </>
  );
 };
--- a/web/components/views/gantt-chart.tsx
+++ b/web/components/views/gantt-chart.tsx
@ -1,5 +1,3 @@
-import { FC } from "react";
-
 import { useRouter } from "next/router";

 // hooks
@ -9,13 +7,13 @@ import { updateGanttIssue } from "components/gantt-chart/hooks/block-update";
 import useProjectDetails from "hooks/use-project-details";
 // components
 import { GanttChartRoot, renderIssueBlocksStructure } from "components/gantt-chart";
-import { IssueGanttBlock, IssueGanttSidebarBlock } from "components/issues";
+import { IssueGanttBlock, IssueGanttSidebarBlock, IssuePeekOverview } from "components/issues";
 // types
 import { IIssue } from "types";

-type Props = {};
+type Props = { disableUserActions: boolean };

-export const ViewIssuesGanttChartView: FC<Props> = ({}) => {
+export const ViewIssuesGanttChartView: React.FC<Props> = ({ disableUserActions }) => {
  const router = useRouter();
  const { workspaceSlug, projectId, viewId } = router.query;

@ -31,22 +29,30 @@ export const ViewIssuesGanttChartView: FC<Props> = ({}) => {
  const isAllowed = projectDetails?.member_role === 20 || projectDetails?.member_role === 15;

  return (
-    <div className="w-full h-full">
-      <GanttChartRoot
-        border={false}
-        title="Issues"
-        loaderTitle="Issues"
-        blocks={ganttIssues ? renderIssueBlocksStructure(ganttIssues as IIssue[]) : null}
-        blockUpdateHandler={(block, payload) =>
-          updateGanttIssue(block, payload, mutateGanttIssues, user, workspaceSlug?.toString())
-        }
-        SidebarBlockRender={IssueGanttSidebarBlock}
-        BlockRender={IssueGanttBlock}
-        enableBlockLeftResize={isAllowed}
-        enableBlockRightResize={isAllowed}
-        enableBlockMove={isAllowed}
-        enableReorder={isAllowed}
+    <>
+      <IssuePeekOverview
+        handleMutation={() => mutateGanttIssues()}
+        projectId={projectId?.toString() ?? ""}
+        workspaceSlug={workspaceSlug?.toString() ?? ""}
+        readOnly={disableUserActions}
      />
-    </div>
+      <div className="w-full h-full">
+        <GanttChartRoot
+          border={false}
+          title="Issues"
+          loaderTitle="Issues"
+          blocks={ganttIssues ? renderIssueBlocksStructure(ganttIssues as IIssue[]) : null}
+          blockUpdateHandler={(block, payload) =>
+            updateGanttIssue(block, payload, mutateGanttIssues, user, workspaceSlug?.toString())
+          }
+          SidebarBlockRender={IssueGanttSidebarBlock}
+          BlockRender={IssueGanttBlock}
+          enableBlockLeftResize={isAllowed}
+          enableBlockRightResize={isAllowed}
+          enableBlockMove={isAllowed}
+          enableReorder={isAllowed}
+        />
+      </div>
+    </>
  );
 };
--- a/web/hooks/use-calendar-issues-view.tsx
+++ b/web/hooks/use-calendar-issues-view.tsx
@ -44,7 +44,7 @@ const useCalendarIssuesView = () => {
    target_date: displayFilters?.calendar_date_range,
  };

-  const { data: projectCalendarIssues } = useSWR(
+  const { data: projectCalendarIssues, mutate: mutateProjectCalendarIssues } = useSWR(
    workspaceSlug && projectId
      ? PROJECT_ISSUES_LIST_WITH_PARAMS(projectId.toString(), params)
      : null,
@ -54,7 +54,7 @@ const useCalendarIssuesView = () => {
      : null
  );

-  const { data: cycleCalendarIssues } = useSWR(
+  const { data: cycleCalendarIssues, mutate: mutateCycleCalendarIssues } = useSWR(
    workspaceSlug && projectId && cycleId
      ? CYCLE_ISSUES_WITH_PARAMS(cycleId.toString(), params)
      : null,
@ -69,7 +69,7 @@ const useCalendarIssuesView = () => {
      : null
  );

-  const { data: moduleCalendarIssues } = useSWR(
+  const { data: moduleCalendarIssues, mutate: mutateModuleCalendarIssues } = useSWR(
    workspaceSlug && projectId && moduleId
      ? MODULE_ISSUES_WITH_PARAMS(moduleId.toString(), params)
      : null,
@ -84,7 +84,7 @@ const useCalendarIssuesView = () => {
      : null
  );

-  const { data: viewCalendarIssues } = useSWR(
+  const { data: viewCalendarIssues, mutate: mutateViewCalendarIssues } = useSWR(
    workspaceSlug && projectId && viewId && params ? VIEW_ISSUES(viewId.toString(), params) : null,
    workspaceSlug && projectId && viewId && params
      ? () =>
@ -104,6 +104,13 @@ const useCalendarIssuesView = () => {
    displayFilters,
    setDisplayFilters,
    calendarIssues: calendarIssues ?? [],
+    mutateIssues: cycleId
+      ? mutateCycleCalendarIssues
+      : moduleId
+      ? mutateModuleCalendarIssues
+      : viewId
+      ? mutateViewCalendarIssues
+      : mutateProjectCalendarIssues,
    filters,
    setFilters,
    params,