From 38f014bd77e53bf41eecd8e7f7441d7ec8f2928d Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Fri, 2 Feb 2024 13:31:57 +0530
Subject: [PATCH 1/5] chore: added tab change animation

---
 .../dashboard/widgets/assigned-issues.tsx     |  2 +-
 .../dashboard/widgets/created-issues.tsx      |  2 +-
 .../widgets/issue-panels/issues-list.tsx      |  9 +--
 .../widgets/issue-panels/tabs-list.tsx        | 64 +++++++++++++------
 4 files changed, 48 insertions(+), 29 deletions(-)

diff --git a/web/components/dashboard/widgets/assigned-issues.tsx b/web/components/dashboard/widgets/assigned-issues.tsx
index d4a27afc154..13993ddda6b 100644
--- a/web/components/dashboard/widgets/assigned-issues.tsx
+++ b/web/components/dashboard/widgets/assigned-issues.tsx
@@ -99,7 +99,7 @@ export const AssignedIssuesWidget: React.FC<WidgetProps> = observer((props) => {
         className="h-full flex flex-col"
       >
         <div className="px-6">
-          <TabsList />
+          <TabsList selectedTab={widgetDetails.widget_filters.tab ?? "upcoming"} />
         </div>
         <Tab.Panels as="div" className="h-full">
           {ISSUES_TABS_LIST.map((tab) => (
diff --git a/web/components/dashboard/widgets/created-issues.tsx b/web/components/dashboard/widgets/created-issues.tsx
index f5727f277df..3732303d81a 100644
--- a/web/components/dashboard/widgets/created-issues.tsx
+++ b/web/components/dashboard/widgets/created-issues.tsx
@@ -95,7 +95,7 @@ export const CreatedIssuesWidget: React.FC<WidgetProps> = observer((props) => {
         className="h-full flex flex-col"
       >
         <div className="px-6">
-          <TabsList />
+          <TabsList selectedTab={widgetDetails.widget_filters.tab ?? "upcoming"} />
         </div>
         <Tab.Panels as="div" className="h-full">
           {ISSUES_TABS_LIST.map((tab) => (
diff --git a/web/components/dashboard/widgets/issue-panels/issues-list.tsx b/web/components/dashboard/widgets/issue-panels/issues-list.tsx
index af2c11660bb..df8ee6d713a 100644
--- a/web/components/dashboard/widgets/issue-panels/issues-list.tsx
+++ b/web/components/dashboard/widgets/issue-panels/issues-list.tsx
@@ -14,7 +14,7 @@ import {
   IssueListItemProps,
 } from "components/dashboard/widgets";
 // ui
-import { Loader, getButtonStyling } from "@plane/ui";
+import { getButtonStyling } from "@plane/ui";
 // helpers
 import { cn } from "helpers/common.helper";
 import { getRedirectionFilters } from "helpers/dashboard.helper";
@@ -61,12 +61,7 @@ export const WidgetIssuesList: React.FC<WidgetIssuesListProps> = (props) => {
     <>
       <div className="h-full">
         {isLoading ? (
-          <Loader className="mt-7 mx-6 space-y-4">
-            <Loader.Item height="25px" />
-            <Loader.Item height="25px" />
-            <Loader.Item height="25px" />
-            <Loader.Item height="25px" />
-          </Loader>
+          <></>
         ) : issues.length > 0 ? (
           <>
             <div className="mt-7 mx-6 border-b-[0.5px] border-custom-border-200 grid grid-cols-6 gap-1 text-xs text-custom-text-300 pb-1">
diff --git a/web/components/dashboard/widgets/issue-panels/tabs-list.tsx b/web/components/dashboard/widgets/issue-panels/tabs-list.tsx
index 6ef6ec0eea5..03b70a37fa6 100644
--- a/web/components/dashboard/widgets/issue-panels/tabs-list.tsx
+++ b/web/components/dashboard/widgets/issue-panels/tabs-list.tsx
@@ -1,26 +1,50 @@
 import { Tab } from "@headlessui/react";
 // helpers
 import { cn } from "helpers/common.helper";
+// types
+import { TIssuesListTypes } from "@plane/types";
 // constants
 import { ISSUES_TABS_LIST } from "constants/dashboard";
 
-export const TabsList = () => (
-  <Tab.List
-    as="div"
-    className="border-[0.5px] border-custom-border-200 rounded grid grid-cols-3 bg-custom-background-80"
-  >
-    {ISSUES_TABS_LIST.map((tab) => (
-      <Tab
-        key={tab.key}
-        className={({ selected }) =>
-          cn("font-semibold text-xs rounded py-1.5 focus:outline-none", {
-            "bg-custom-background-100 text-custom-text-300 shadow-[2px_0_8px_rgba(167,169,174,0.15)]": selected,
-            "text-custom-text-400": !selected,
-          })
-        }
-      >
-        {tab.label}
-      </Tab>
-    ))}
-  </Tab.List>
-);
+type Props = {
+  selectedTab: TIssuesListTypes;
+};
+
+export const TabsList: React.FC<Props> = (props) => {
+  const { selectedTab } = props;
+  const selectedTabIndex = ISSUES_TABS_LIST.findIndex((tab) => tab.key === selectedTab);
+
+  return (
+    <Tab.List
+      as="div"
+      className="relative border-[0.5px] border-custom-border-200 rounded grid grid-cols-3 bg-custom-background-80"
+    >
+      <div
+        className={cn("absolute w-1/3 bg-custom-background-100 rounded transition-all duration-500 ease-in-out", {
+          "shadow-[2px_0_8px_rgba(167,169,174,0.15)]": [0, 1].includes(selectedTabIndex),
+          "shadow-[-2px_0_8px_rgba(167,169,174,0.15)]": [1, 2].includes(selectedTabIndex),
+        })}
+        style={{
+          height: "calc(100% - 1px)",
+          transform: `translateX(${selectedTabIndex * 100}%)`,
+        }}
+      />
+      {ISSUES_TABS_LIST.map((tab) => (
+        <Tab
+          key={tab.key}
+          className={({ selected }) =>
+            cn(
+              "relative z-[1] font-semibold text-xs rounded py-1.5 text-custom-text-400 focus:outline-none transition duration-500",
+              {
+                "text-custom-text-100": selected,
+                "hover:text-custom-text-300": !selected,
+              }
+            )
+          }
+        >
+          <span className="scale-110">{tab.label}</span>
+        </Tab>
+      ))}
+    </Tab.List>
+  );
+};

From 7b6189bbaa50d7c19c02c1a2c6a450cc61cd233f Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Fri, 2 Feb 2024 18:51:01 +0530
Subject: [PATCH 2/5] chore: widgets filtering logic updated

---
 apiserver/plane/app/views/dashboard.py        | 34 +++++++++
 packages/types/src/dashboard.d.ts             |  3 +-
 .../dashboard/widgets/assigned-issues.tsx     | 75 ++++++++++++-------
 .../dashboard/widgets/created-issues.tsx      | 73 +++++++++++-------
 .../widgets/issue-panels/issues-list.tsx      |  6 +-
 .../widgets/issue-panels/tabs-list.tsx        | 44 +++++++----
 .../dashboard/widgets/issues-by-priority.tsx  | 28 +++----
 .../widgets/issues-by-state-group.tsx         | 44 +++++------
 web/constants/dashboard.ts                    | 39 ++++++++--
 web/helpers/dashboard.helper.ts               |  6 +-
 10 files changed, 233 insertions(+), 119 deletions(-)

diff --git a/apiserver/plane/app/views/dashboard.py b/apiserver/plane/app/views/dashboard.py
index 47fae2c9ca1..1366a2886a9 100644
--- a/apiserver/plane/app/views/dashboard.py
+++ b/apiserver/plane/app/views/dashboard.py
@@ -145,6 +145,23 @@ def dashboard_assigned_issues(self, request, slug):
         )
     ).order_by("priority_order")
 
+    if issue_type == "pending":
+        pending_issues_count = assigned_issues.filter(
+            state__group__in=["backlog", "started", "unstarted"]
+        ).count()
+        pending_issues = assigned_issues.filter(
+            state__group__in=["backlog", "started", "unstarted"]
+        )[:5]
+        return Response(
+            {
+                "issues": IssueSerializer(
+                    pending_issues, many=True, expand=self.expand
+                ).data,
+                "count": pending_issues_count,
+            },
+            status=status.HTTP_200_OK,
+        )
+
     if issue_type == "completed":
         completed_issues_count = assigned_issues.filter(
             state__group__in=["completed"]
@@ -257,6 +274,23 @@ def dashboard_created_issues(self, request, slug):
         )
     ).order_by("priority_order")
 
+    if issue_type == "pending":
+        pending_issues_count = created_issues.filter(
+            state__group__in=["backlog", "started", "unstarted"]
+        ).count()
+        pending_issues = created_issues.filter(
+            state__group__in=["backlog", "started", "unstarted"]
+        )[:5]
+        return Response(
+            {
+                "issues": IssueSerializer(
+                    pending_issues, many=True, expand=self.expand
+                ).data,
+                "count": pending_issues_count,
+            },
+            status=status.HTTP_200_OK,
+        )
+
     if issue_type == "completed":
         completed_issues_count = created_issues.filter(
             state__group__in=["completed"]
diff --git a/packages/types/src/dashboard.d.ts b/packages/types/src/dashboard.d.ts
index 31751c0d06c..7cfa6aa8563 100644
--- a/packages/types/src/dashboard.d.ts
+++ b/packages/types/src/dashboard.d.ts
@@ -13,9 +13,10 @@ export type TWidgetKeys =
   | "recent_projects"
   | "recent_collaborators";
 
-export type TIssuesListTypes = "upcoming" | "overdue" | "completed";
+export type TIssuesListTypes = "pending" | "upcoming" | "overdue" | "completed";
 
 export type TDurationFilterOptions =
+  | "none"
   | "today"
   | "this_week"
   | "this_month"
diff --git a/web/components/dashboard/widgets/assigned-issues.tsx b/web/components/dashboard/widgets/assigned-issues.tsx
index 13993ddda6b..2c57f6176aa 100644
--- a/web/components/dashboard/widgets/assigned-issues.tsx
+++ b/web/components/dashboard/widgets/assigned-issues.tsx
@@ -17,7 +17,7 @@ import { getCustomDates, getRedirectionFilters } from "helpers/dashboard.helper"
 // types
 import { TAssignedIssuesWidgetFilters, TAssignedIssuesWidgetResponse } from "@plane/types";
 // constants
-import { ISSUES_TABS_LIST } from "constants/dashboard";
+import { FILTERED_ISSUES_TABS_LIST, UNFILTERED_ISSUES_TABS_LIST } from "constants/dashboard";
 
 const WIDGET_KEY = "assigned_issues";
 
@@ -41,68 +41,85 @@ export const AssignedIssuesWidget: React.FC<WidgetProps> = observer((props) => {
       filters,
     });
 
+    const filterDates = getCustomDates(filters.target_date ?? widgetDetails.widget_filters.target_date ?? "none");
     fetchWidgetStats(workspaceSlug, dashboardId, {
       widget_key: WIDGET_KEY,
-      issue_type: filters.tab ?? widgetDetails.widget_filters.tab ?? "upcoming",
-      target_date: getCustomDates(filters.target_date ?? widgetDetails.widget_filters.target_date ?? "this_week"),
+      issue_type: filters.tab ?? widgetDetails.widget_filters.tab ?? "pending",
+      ...(filterDates.trim() !== "" ? { target_date: filterDates } : {}),
       expand: "issue_relation",
     }).finally(() => setFetching(false));
   };
 
   useEffect(() => {
-    const filterDates = getCustomDates(widgetDetails?.widget_filters.target_date ?? "this_week");
+    const filterDates = getCustomDates(widgetDetails?.widget_filters.target_date ?? "none");
 
     fetchWidgetStats(workspaceSlug, dashboardId, {
       widget_key: WIDGET_KEY,
-      issue_type: widgetDetails?.widget_filters.tab ?? "upcoming",
-      target_date: filterDates,
+      issue_type: widgetDetails?.widget_filters.tab ?? "pending",
+      ...(filterDates.trim() !== "" ? { target_date: filterDates } : {}),
       expand: "issue_relation",
     });
+
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const filterParams = getRedirectionFilters(widgetDetails?.widget_filters.tab ?? "upcoming");
+  const filterParams = getRedirectionFilters(widgetDetails?.widget_filters.tab ?? "pending");
+  const tabsList =
+    widgetDetails?.widget_filters.target_date ?? "none" ? UNFILTERED_ISSUES_TABS_LIST : FILTERED_ISSUES_TABS_LIST;
 
   if (!widgetDetails || !widgetStats) return <WidgetLoader widgetKey={WIDGET_KEY} />;
 
   return (
     <div className="bg-custom-background-100 rounded-xl border-[0.5px] border-custom-border-200 w-full hover:shadow-custom-shadow-4xl duration-300 flex flex-col min-h-96">
-      <div className="flex items-start justify-between gap-2 p-6 pl-7">
-        <div>
-          <Link
-            href={`/${workspaceSlug}/workspace-views/assigned/${filterParams}`}
-            className="text-lg font-semibold text-custom-text-300 hover:underline"
-          >
-            Assigned to you
-          </Link>
-          <p className="mt-3 text-xs font-medium text-custom-text-300">
-            Filtered by{" "}
-            <span className="border-[0.5px] border-custom-border-300 rounded py-1 px-2 ml-0.5">Due date</span>
-          </p>
-        </div>
+      <div className="flex items-center justify-between gap-2 p-6 pl-7">
+        <Link
+          href={`/${workspaceSlug}/workspace-views/assigned/${filterParams}`}
+          className="text-lg font-semibold text-custom-text-300 hover:underline"
+        >
+          Assigned to you
+        </Link>
         <DurationFilterDropdown
-          value={widgetDetails.widget_filters.target_date ?? "this_week"}
-          onChange={(val) =>
+          value={widgetDetails.widget_filters.target_date ?? "none"}
+          onChange={(val) => {
+            if (val === widgetDetails.widget_filters.target_date) return;
+            let extraOptions: Partial<TAssignedIssuesWidgetFilters> = {};
+
+            // switch to pending tab if target date is changed to none
+            if (val === "none" && widgetDetails.widget_filters.tab !== "completed") extraOptions = { tab: "pending" };
+            // switch to upcoming tab if target date is changed to other than none
+            if (
+              val !== "none" &&
+              widgetDetails.widget_filters.target_date === "none" &&
+              widgetDetails.widget_filters.tab !== "completed"
+            )
+              extraOptions = { tab: "upcoming" };
+
             handleUpdateFilters({
               target_date: val,
-            })
-          }
+              ...extraOptions,
+            });
+          }}
         />
       </div>
       <Tab.Group
         as="div"
-        defaultIndex={ISSUES_TABS_LIST.findIndex((t) => t.key === widgetDetails.widget_filters.tab ?? "upcoming")}
+        // selectedIndex={selectedIndex}
+        defaultIndex={tabsList.findIndex((t) => t.key === widgetDetails.widget_filters.tab ?? "pending")}
         onChange={(i) => {
-          const selectedTab = ISSUES_TABS_LIST[i];
-          handleUpdateFilters({ tab: selectedTab.key ?? "upcoming" });
+          const selectedTab = tabsList[i];
+          handleUpdateFilters({ tab: selectedTab?.key ?? "pending" });
+          // setSelectedIndex(i);
         }}
         className="h-full flex flex-col"
       >
         <div className="px-6">
-          <TabsList selectedTab={widgetDetails.widget_filters.tab ?? "upcoming"} />
+          <TabsList
+            durationFilter={widgetDetails.widget_filters.target_date ?? "none"}
+            selectedTab={widgetDetails.widget_filters.tab ?? "pending"}
+          />
         </div>
         <Tab.Panels as="div" className="h-full">
-          {ISSUES_TABS_LIST.map((tab) => (
+          {tabsList.map((tab) => (
             <Tab.Panel key={tab.key} as="div" className="h-full flex flex-col">
               <WidgetIssuesList
                 issues={widgetStats.issues}
diff --git a/web/components/dashboard/widgets/created-issues.tsx b/web/components/dashboard/widgets/created-issues.tsx
index 3732303d81a..0ad02bd6900 100644
--- a/web/components/dashboard/widgets/created-issues.tsx
+++ b/web/components/dashboard/widgets/created-issues.tsx
@@ -17,7 +17,7 @@ import { getCustomDates, getRedirectionFilters } from "helpers/dashboard.helper"
 // types
 import { TCreatedIssuesWidgetFilters, TCreatedIssuesWidgetResponse } from "@plane/types";
 // constants
-import { ISSUES_TABS_LIST } from "constants/dashboard";
+import { FILTERED_ISSUES_TABS_LIST, UNFILTERED_ISSUES_TABS_LIST } from "constants/dashboard";
 
 const WIDGET_KEY = "created_issues";
 
@@ -41,64 +41,81 @@ export const CreatedIssuesWidget: React.FC<WidgetProps> = observer((props) => {
       filters,
     });
 
+    const filterDates = getCustomDates(filters.target_date ?? widgetDetails.widget_filters.target_date ?? "none");
     fetchWidgetStats(workspaceSlug, dashboardId, {
       widget_key: WIDGET_KEY,
-      issue_type: filters.tab ?? widgetDetails.widget_filters.tab ?? "upcoming",
-      target_date: getCustomDates(filters.target_date ?? widgetDetails.widget_filters.target_date ?? "this_week"),
+      issue_type: filters.tab ?? widgetDetails.widget_filters.tab ?? "pending",
+      ...(filterDates.trim() !== "" ? { target_date: filterDates } : {}),
     }).finally(() => setFetching(false));
   };
 
   useEffect(() => {
+    const filterDates = getCustomDates(widgetDetails?.widget_filters.target_date ?? "none");
+
     fetchWidgetStats(workspaceSlug, dashboardId, {
       widget_key: WIDGET_KEY,
-      issue_type: widgetDetails?.widget_filters.tab ?? "upcoming",
-      target_date: getCustomDates(widgetDetails?.widget_filters.target_date ?? "this_week"),
+      issue_type: widgetDetails?.widget_filters.tab ?? "pending",
+      ...(filterDates.trim() !== "" ? { target_date: filterDates } : {}),
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const filterParams = getRedirectionFilters(widgetDetails?.widget_filters.tab ?? "upcoming");
+  const filterParams = getRedirectionFilters(widgetDetails?.widget_filters.tab ?? "pending");
+  const tabsList =
+    (widgetDetails?.widget_filters.target_date ?? "none") === "none"
+      ? UNFILTERED_ISSUES_TABS_LIST
+      : FILTERED_ISSUES_TABS_LIST;
 
   if (!widgetDetails || !widgetStats) return <WidgetLoader widgetKey={WIDGET_KEY} />;
 
   return (
     <div className="bg-custom-background-100 rounded-xl border-[0.5px] border-custom-border-200 w-full hover:shadow-custom-shadow-4xl duration-300 flex flex-col min-h-96">
-      <div className="flex items-start justify-between gap-2 p-6 pl-7">
-        <div>
-          <Link
-            href={`/${workspaceSlug}/workspace-views/created/${filterParams}`}
-            className="text-lg font-semibold text-custom-text-300 hover:underline"
-          >
-            Created by you
-          </Link>
-          <p className="mt-3 text-xs font-medium text-custom-text-300">
-            Filtered by{" "}
-            <span className="border-[0.5px] border-custom-border-300 rounded py-1 px-2 ml-0.5">Due date</span>
-          </p>
-        </div>
+      <div className="flex items-center justify-between gap-2 p-6 pl-7">
+        <Link
+          href={`/${workspaceSlug}/workspace-views/created/${filterParams}`}
+          className="text-lg font-semibold text-custom-text-300 hover:underline"
+        >
+          Created by you
+        </Link>
         <DurationFilterDropdown
-          value={widgetDetails.widget_filters.target_date ?? "this_week"}
-          onChange={(val) =>
+          value={widgetDetails.widget_filters.target_date ?? "none"}
+          onChange={(val) => {
+            if (val === widgetDetails.widget_filters.target_date) return;
+            let extraOptions: Partial<TCreatedIssuesWidgetFilters> = {};
+
+            // switch to pending tab if target date is changed to none
+            if (val === "none" && widgetDetails.widget_filters.tab !== "completed") extraOptions = { tab: "pending" };
+            // switch to upcoming tab if target date is changed to other than none
+            if (
+              val !== "none" &&
+              widgetDetails.widget_filters.target_date === "none" &&
+              widgetDetails.widget_filters.tab !== "completed"
+            )
+              extraOptions = { tab: "upcoming" };
+
             handleUpdateFilters({
               target_date: val,
-            })
-          }
+              ...extraOptions,
+            });
+          }}
         />
       </div>
       <Tab.Group
         as="div"
-        defaultIndex={ISSUES_TABS_LIST.findIndex((t) => t.key === widgetDetails.widget_filters.tab ?? "upcoming")}
         onChange={(i) => {
-          const selectedTab = ISSUES_TABS_LIST[i];
-          handleUpdateFilters({ tab: selectedTab.key ?? "upcoming" });
+          const selectedTab = tabsList[i];
+          handleUpdateFilters({ tab: selectedTab.key ?? "pending" });
         }}
         className="h-full flex flex-col"
       >
         <div className="px-6">
-          <TabsList selectedTab={widgetDetails.widget_filters.tab ?? "upcoming"} />
+          <TabsList
+            durationFilter={widgetDetails.widget_filters.target_date ?? "none"}
+            selectedTab={widgetDetails.widget_filters.tab ?? "pending"}
+          />
         </div>
         <Tab.Panels as="div" className="h-full">
-          {ISSUES_TABS_LIST.map((tab) => (
+          {tabsList.map((tab) => (
             <Tab.Panel key={tab.key} as="div" className="h-full flex flex-col">
               <WidgetIssuesList
                 issues={widgetStats.issues}
diff --git a/web/components/dashboard/widgets/issue-panels/issues-list.tsx b/web/components/dashboard/widgets/issue-panels/issues-list.tsx
index df8ee6d713a..f79dcc657b9 100644
--- a/web/components/dashboard/widgets/issue-panels/issues-list.tsx
+++ b/web/components/dashboard/widgets/issue-panels/issues-list.tsx
@@ -41,16 +41,18 @@ export const WidgetIssuesList: React.FC<WidgetIssuesListProps> = (props) => {
   const filterParams = getRedirectionFilters(tab);
 
   const ISSUE_LIST_ITEM: {
-    [key in string]: {
+    [key: string]: {
       [key in TIssuesListTypes]: React.FC<IssueListItemProps>;
     };
   } = {
     assigned: {
+      pending: AssignedUpcomingIssueListItem,
       upcoming: AssignedUpcomingIssueListItem,
       overdue: AssignedOverdueIssueListItem,
       completed: AssignedCompletedIssueListItem,
     },
     created: {
+      pending: CreatedUpcomingIssueListItem,
       upcoming: CreatedUpcomingIssueListItem,
       overdue: CreatedOverdueIssueListItem,
       completed: CreatedCompletedIssueListItem,
@@ -76,7 +78,7 @@ export const WidgetIssuesList: React.FC<WidgetIssuesListProps> = (props) => {
                   {totalIssues}
                 </span>
               </h6>
-              {tab === "upcoming" && <h6 className="text-center">Due date</h6>}
+              {["upcoming", "pending"].includes(tab) && <h6 className="text-center">Due date</h6>}
               {tab === "overdue" && <h6 className="text-center">Due by</h6>}
               {type === "assigned" && tab !== "completed" && <h6 className="text-center">Blocked by</h6>}
               {type === "created" && <h6 className="text-center">Assigned to</h6>}
diff --git a/web/components/dashboard/widgets/issue-panels/tabs-list.tsx b/web/components/dashboard/widgets/issue-panels/tabs-list.tsx
index 03b70a37fa6..9f8f2bbd61a 100644
--- a/web/components/dashboard/widgets/issue-panels/tabs-list.tsx
+++ b/web/components/dashboard/widgets/issue-panels/tabs-list.tsx
@@ -2,42 +2,60 @@ import { Tab } from "@headlessui/react";
 // helpers
 import { cn } from "helpers/common.helper";
 // types
-import { TIssuesListTypes } from "@plane/types";
+import { TDurationFilterOptions, TIssuesListTypes } from "@plane/types";
 // constants
-import { ISSUES_TABS_LIST } from "constants/dashboard";
+import { FILTERED_ISSUES_TABS_LIST, UNFILTERED_ISSUES_TABS_LIST } from "constants/dashboard";
 
 type Props = {
+  durationFilter: TDurationFilterOptions;
   selectedTab: TIssuesListTypes;
 };
 
 export const TabsList: React.FC<Props> = (props) => {
-  const { selectedTab } = props;
-  const selectedTabIndex = ISSUES_TABS_LIST.findIndex((tab) => tab.key === selectedTab);
+  const { durationFilter, selectedTab } = props;
+
+  const tabsList = durationFilter === "none" ? UNFILTERED_ISSUES_TABS_LIST : FILTERED_ISSUES_TABS_LIST;
+  const selectedTabIndex = tabsList.findIndex((tab) => tab.key === (selectedTab ?? "pending"));
+
+  // console.log("tabsList", tabsList);
+  // console.log("activeTab", selectedTab);
+  // console.log("selectedTabIndex", selectedTabIndex);
 
   return (
     <Tab.List
       as="div"
-      className="relative border-[0.5px] border-custom-border-200 rounded grid grid-cols-3 bg-custom-background-80"
+      className="relative border-[0.5px] border-custom-border-200 rounded bg-custom-background-80 grid"
+      style={{
+        gridTemplateColumns: `repeat(${tabsList.length}, 1fr)`,
+      }}
     >
-      <div
-        className={cn("absolute w-1/3 bg-custom-background-100 rounded transition-all duration-500 ease-in-out", {
-          "shadow-[2px_0_8px_rgba(167,169,174,0.15)]": [0, 1].includes(selectedTabIndex),
-          "shadow-[-2px_0_8px_rgba(167,169,174,0.15)]": [1, 2].includes(selectedTabIndex),
+      {/* <div
+        className={cn("absolute bg-custom-background-100 rounded transition-all duration-500 ease-in-out", {
+          // right shadow
+          "shadow-[2px_0_8px_rgba(167,169,174,0.15)]": selectedTabIndex !== tabsList.length - 1,
+          // left shadow
+          "shadow-[-2px_0_8px_rgba(167,169,174,0.15)]": selectedTabIndex !== 0,
         })}
         style={{
           height: "calc(100% - 1px)",
+          width: `${100 / tabsList.length}%`,
           transform: `translateX(${selectedTabIndex * 100}%)`,
         }}
-      />
-      {ISSUES_TABS_LIST.map((tab) => (
+      /> */}
+      {tabsList.map((tab) => (
         <Tab
           key={tab.key}
           className={({ selected }) =>
             cn(
-              "relative z-[1] font-semibold text-xs rounded py-1.5 text-custom-text-400 focus:outline-none transition duration-500",
+              "relative z-[1] font-semibold text-xs rounded py-1.5 text-custom-text-400 focus:outline-none",
+              // "transition duration-500",
               {
-                "text-custom-text-100": selected,
+                "text-custom-text-100 bg-custom-background-100": selected,
                 "hover:text-custom-text-300": !selected,
+                // right shadow
+                "shadow-[2px_0_8px_rgba(167,169,174,0.15)]": selectedTabIndex !== tabsList.length - 1,
+                // left shadow
+                "shadow-[-2px_0_8px_rgba(167,169,174,0.15)]": selectedTabIndex !== 0,
               }
             )
           }
diff --git a/web/components/dashboard/widgets/issues-by-priority.tsx b/web/components/dashboard/widgets/issues-by-priority.tsx
index 45b71466d1f..97884bccc1f 100644
--- a/web/components/dashboard/widgets/issues-by-priority.tsx
+++ b/web/components/dashboard/widgets/issues-by-priority.tsx
@@ -84,16 +84,18 @@ export const IssuesByPriorityWidget: React.FC<WidgetProps> = observer((props) =>
       filters,
     });
 
+    const filterDates = getCustomDates(filters.target_date ?? widgetDetails.widget_filters.target_date ?? "none");
     fetchWidgetStats(workspaceSlug, dashboardId, {
       widget_key: WIDGET_KEY,
-      target_date: getCustomDates(filters.target_date ?? widgetDetails.widget_filters.target_date ?? "this_week"),
+      ...(filterDates.trim() !== "" ? { target_date: filterDates } : {}),
     });
   };
 
   useEffect(() => {
+    const filterDates = getCustomDates(widgetDetails?.widget_filters.target_date ?? "none");
     fetchWidgetStats(workspaceSlug, dashboardId, {
       widget_key: WIDGET_KEY,
-      target_date: getCustomDates(widgetDetails?.widget_filters.target_date ?? "this_week"),
+      ...(filterDates.trim() !== "" ? { target_date: filterDates } : {}),
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -129,21 +131,15 @@ export const IssuesByPriorityWidget: React.FC<WidgetProps> = observer((props) =>
 
   return (
     <div className="bg-custom-background-100 rounded-xl border-[0.5px] border-custom-border-200 w-full py-6 hover:shadow-custom-shadow-4xl duration-300 overflow-hidden min-h-96 flex flex-col">
-      <div className="flex items-start justify-between gap-2 pl-7 pr-6">
-        <div>
-          <Link
-            href={`/${workspaceSlug}/workspace-views/assigned`}
-            className="text-lg font-semibold text-custom-text-300 hover:underline"
-          >
-            Assigned by priority
-          </Link>
-          <p className="mt-3 text-xs font-medium text-custom-text-300">
-            Filtered by{" "}
-            <span className="border-[0.5px] border-custom-border-300 rounded py-1 px-2 ml-0.5">Due date</span>
-          </p>
-        </div>
+      <div className="flex items-center justify-between gap-2 pl-7 pr-6">
+        <Link
+          href={`/${workspaceSlug}/workspace-views/assigned`}
+          className="text-lg font-semibold text-custom-text-300 hover:underline"
+        >
+          Assigned by priority
+        </Link>
         <DurationFilterDropdown
-          value={widgetDetails.widget_filters.target_date ?? "this_week"}
+          value={widgetDetails.widget_filters.target_date ?? "none"}
           onChange={(val) =>
             handleUpdateFilters({
               target_date: val,
diff --git a/web/components/dashboard/widgets/issues-by-state-group.tsx b/web/components/dashboard/widgets/issues-by-state-group.tsx
index bd4171cfa2d..2f7f6ffae87 100644
--- a/web/components/dashboard/widgets/issues-by-state-group.tsx
+++ b/web/components/dashboard/widgets/issues-by-state-group.tsx
@@ -43,17 +43,19 @@ export const IssuesByStateGroupWidget: React.FC<WidgetProps> = observer((props)
       filters,
     });
 
+    const filterDates = getCustomDates(filters.target_date ?? widgetDetails.widget_filters.target_date ?? "none");
     fetchWidgetStats(workspaceSlug, dashboardId, {
       widget_key: WIDGET_KEY,
-      target_date: getCustomDates(filters.target_date ?? widgetDetails.widget_filters.target_date ?? "this_week"),
+      ...(filterDates.trim() !== "" ? { target_date: filterDates } : {}),
     });
   };
 
   // fetch widget stats
   useEffect(() => {
+    const filterDates = getCustomDates(widgetDetails?.widget_filters.target_date ?? "none");
     fetchWidgetStats(workspaceSlug, dashboardId, {
       widget_key: WIDGET_KEY,
-      target_date: getCustomDates(widgetDetails?.widget_filters.target_date ?? "this_week"),
+      ...(filterDates.trim() !== "" ? { target_date: filterDates } : {}),
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -72,14 +74,14 @@ export const IssuesByStateGroupWidget: React.FC<WidgetProps> = observer((props)
       startedCount > 0
         ? "started"
         : unStartedCount > 0
-          ? "unstarted"
-          : backlogCount > 0
-            ? "backlog"
-            : completedCount > 0
-              ? "completed"
-              : canceledCount > 0
-                ? "cancelled"
-                : null;
+        ? "unstarted"
+        : backlogCount > 0
+        ? "backlog"
+        : completedCount > 0
+        ? "completed"
+        : canceledCount > 0
+        ? "cancelled"
+        : null;
 
     setActiveStateGroup(stateGroup);
     setDefaultStateGroup(stateGroup);
@@ -128,21 +130,15 @@ export const IssuesByStateGroupWidget: React.FC<WidgetProps> = observer((props)
 
   return (
     <div className="bg-custom-background-100 rounded-xl border-[0.5px] border-custom-border-200 w-full py-6 hover:shadow-custom-shadow-4xl duration-300 overflow-hidden min-h-96 flex flex-col">
-      <div className="flex items-start justify-between gap-2 pl-7 pr-6">
-        <div>
-          <Link
-            href={`/${workspaceSlug}/workspace-views/assigned`}
-            className="text-lg font-semibold text-custom-text-300 hover:underline"
-          >
-            Assigned by state
-          </Link>
-          <p className="mt-3 text-xs font-medium text-custom-text-300">
-            Filtered by{" "}
-            <span className="border-[0.5px] border-custom-border-300 rounded py-1 px-2 ml-0.5">Due date</span>
-          </p>
-        </div>
+      <div className="flex items-center justify-between gap-2 pl-7 pr-6">
+        <Link
+          href={`/${workspaceSlug}/workspace-views/assigned`}
+          className="text-lg font-semibold text-custom-text-300 hover:underline"
+        >
+          Assigned by state
+        </Link>
         <DurationFilterDropdown
-          value={widgetDetails.widget_filters.target_date ?? "this_week"}
+          value={widgetDetails.widget_filters.target_date ?? "none"}
           onChange={(val) =>
             handleUpdateFilters({
               target_date: val,
diff --git a/web/constants/dashboard.ts b/web/constants/dashboard.ts
index d23480cfe5c..3f251ca7811 100644
--- a/web/constants/dashboard.ts
+++ b/web/constants/dashboard.ts
@@ -121,21 +121,25 @@ export const DURATION_FILTER_OPTIONS: {
   key: TDurationFilterOptions;
   label: string;
 }[] = [
+  {
+    key: "none",
+    label: "None",
+  },
   {
     key: "today",
-    label: "Today",
+    label: "Due today",
   },
   {
     key: "this_week",
-    label: "This week",
+    label: " Due this week",
   },
   {
     key: "this_month",
-    label: "This month",
+    label: "Due this month",
   },
   {
     key: "this_year",
-    label: "This year",
+    label: "Due this year",
   },
 ];
 
@@ -152,7 +156,7 @@ export const PROJECT_BACKGROUND_COLORS = [
 ];
 
 // assigned and created issues widgets tabs list
-export const ISSUES_TABS_LIST: {
+export const FILTERED_ISSUES_TABS_LIST: {
   key: TIssuesListTypes;
   label: string;
 }[] = [
@@ -170,7 +174,27 @@ export const ISSUES_TABS_LIST: {
   },
 ];
 
+// assigned and created issues widgets tabs list
+export const UNFILTERED_ISSUES_TABS_LIST: {
+  key: TIssuesListTypes;
+  label: string;
+}[] = [
+  {
+    key: "pending",
+    label: "Pending",
+  },
+  {
+    key: "completed",
+    label: "Marked completed",
+  },
+];
+
 export const ASSIGNED_ISSUES_EMPTY_STATES = {
+  pending: {
+    title: "Issues assigned to you that are pending\nwill show up here.",
+    darkImage: UpcomingIssuesDark,
+    lightImage: UpcomingIssuesLight,
+  },
   upcoming: {
     title: "Upcoming issues assigned to\nyou will show up here.",
     darkImage: UpcomingIssuesDark,
@@ -189,6 +213,11 @@ export const ASSIGNED_ISSUES_EMPTY_STATES = {
 };
 
 export const CREATED_ISSUES_EMPTY_STATES = {
+  pending: {
+    title: "Issues created by you that are pending\nwill show up here.",
+    darkImage: UpcomingIssuesDark,
+    lightImage: UpcomingIssuesLight,
+  },
   upcoming: {
     title: "Upcoming issues you created\nwill show up here.",
     darkImage: UpcomingIssuesDark,
diff --git a/web/helpers/dashboard.helper.ts b/web/helpers/dashboard.helper.ts
index 2a8ade4fa51..8003f15e32d 100644
--- a/web/helpers/dashboard.helper.ts
+++ b/web/helpers/dashboard.helper.ts
@@ -9,6 +9,8 @@ export const getCustomDates = (duration: TDurationFilterOptions): string => {
   let firstDay, lastDay;
 
   switch (duration) {
+    case "none":
+      return "";
     case "today":
       firstDay = renderFormattedPayloadDate(today);
       lastDay = renderFormattedPayloadDate(today);
@@ -32,7 +34,9 @@ export const getRedirectionFilters = (type: TIssuesListTypes): string => {
   const today = renderFormattedPayloadDate(new Date());
 
   const filterParams =
-    type === "upcoming"
+    type === "pending"
+      ? "?state_group=backlog,unstarted,started"
+      : type === "upcoming"
       ? `?target_date=${today};after`
       : type === "overdue"
       ? `?target_date=${today};before`

From b2a47989f4c0d0f99b7fddc65b376ef7978013ae Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Mon, 5 Feb 2024 12:30:25 +0530
Subject: [PATCH 3/5] refactor: issues list widget

---
 .../dashboard/widgets/assigned-issues.tsx     | 52 +++++++++----------
 .../dashboard/widgets/created-issues.tsx      | 51 +++++++++---------
 .../widgets/issue-panels/tabs-list.tsx        | 11 ++--
 3 files changed, 54 insertions(+), 60 deletions(-)

diff --git a/web/components/dashboard/widgets/assigned-issues.tsx b/web/components/dashboard/widgets/assigned-issues.tsx
index 2c57f6176aa..e2a54c05f6e 100644
--- a/web/components/dashboard/widgets/assigned-issues.tsx
+++ b/web/components/dashboard/widgets/assigned-issues.tsx
@@ -30,6 +30,8 @@ export const AssignedIssuesWidget: React.FC<WidgetProps> = observer((props) => {
   // derived values
   const widgetDetails = getWidgetDetails(workspaceSlug, dashboardId, WIDGET_KEY);
   const widgetStats = getWidgetStats<TAssignedIssuesWidgetResponse>(workspaceSlug, dashboardId, WIDGET_KEY);
+  const selectedTab = widgetDetails?.widget_filters.tab ?? "pending";
+  const selectedDurationFilter = widgetDetails?.widget_filters.target_date ?? "none";
 
   const handleUpdateFilters = async (filters: Partial<TAssignedIssuesWidgetFilters>) => {
     if (!widgetDetails) return;
@@ -41,21 +43,21 @@ export const AssignedIssuesWidget: React.FC<WidgetProps> = observer((props) => {
       filters,
     });
 
-    const filterDates = getCustomDates(filters.target_date ?? widgetDetails.widget_filters.target_date ?? "none");
+    const filterDates = getCustomDates(filters.target_date ?? selectedDurationFilter);
     fetchWidgetStats(workspaceSlug, dashboardId, {
       widget_key: WIDGET_KEY,
-      issue_type: filters.tab ?? widgetDetails.widget_filters.tab ?? "pending",
+      issue_type: filters.tab ?? selectedTab,
       ...(filterDates.trim() !== "" ? { target_date: filterDates } : {}),
       expand: "issue_relation",
     }).finally(() => setFetching(false));
   };
 
   useEffect(() => {
-    const filterDates = getCustomDates(widgetDetails?.widget_filters.target_date ?? "none");
+    const filterDates = getCustomDates(selectedDurationFilter);
 
     fetchWidgetStats(workspaceSlug, dashboardId, {
       widget_key: WIDGET_KEY,
-      issue_type: widgetDetails?.widget_filters.tab ?? "pending",
+      issue_type: selectedTab,
       ...(filterDates.trim() !== "" ? { target_date: filterDates } : {}),
       expand: "issue_relation",
     });
@@ -63,9 +65,8 @@ export const AssignedIssuesWidget: React.FC<WidgetProps> = observer((props) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const filterParams = getRedirectionFilters(widgetDetails?.widget_filters.tab ?? "pending");
-  const tabsList =
-    widgetDetails?.widget_filters.target_date ?? "none" ? UNFILTERED_ISSUES_TABS_LIST : FILTERED_ISSUES_TABS_LIST;
+  const filterParams = getRedirectionFilters(selectedTab);
+  const tabsList = selectedDurationFilter === "none" ? UNFILTERED_ISSUES_TABS_LIST : FILTERED_ISSUES_TABS_LIST;
 
   if (!widgetDetails || !widgetStats) return <WidgetLoader widgetKey={WIDGET_KEY} />;
 
@@ -79,44 +80,39 @@ export const AssignedIssuesWidget: React.FC<WidgetProps> = observer((props) => {
           Assigned to you
         </Link>
         <DurationFilterDropdown
-          value={widgetDetails.widget_filters.target_date ?? "none"}
+          value={selectedDurationFilter}
           onChange={(val) => {
-            if (val === widgetDetails.widget_filters.target_date) return;
-            let extraOptions: Partial<TAssignedIssuesWidgetFilters> = {};
+            if (val === selectedDurationFilter) return;
 
             // switch to pending tab if target date is changed to none
-            if (val === "none" && widgetDetails.widget_filters.tab !== "completed") extraOptions = { tab: "pending" };
+            if (val === "none" && selectedTab !== "completed") {
+              handleUpdateFilters({ target_date: val, tab: "pending" });
+              return;
+            }
             // switch to upcoming tab if target date is changed to other than none
-            if (
-              val !== "none" &&
-              widgetDetails.widget_filters.target_date === "none" &&
-              widgetDetails.widget_filters.tab !== "completed"
-            )
-              extraOptions = { tab: "upcoming" };
+            if (val !== "none" && selectedDurationFilter === "none" && selectedTab !== "completed") {
+              handleUpdateFilters({
+                target_date: val,
+                tab: "upcoming",
+              });
+              return;
+            }
 
-            handleUpdateFilters({
-              target_date: val,
-              ...extraOptions,
-            });
+            handleUpdateFilters({ target_date: val });
           }}
         />
       </div>
       <Tab.Group
         as="div"
-        // selectedIndex={selectedIndex}
-        defaultIndex={tabsList.findIndex((t) => t.key === widgetDetails.widget_filters.tab ?? "pending")}
+        selectedIndex={tabsList.findIndex((tab) => tab.key === selectedTab)}
         onChange={(i) => {
           const selectedTab = tabsList[i];
           handleUpdateFilters({ tab: selectedTab?.key ?? "pending" });
-          // setSelectedIndex(i);
         }}
         className="h-full flex flex-col"
       >
         <div className="px-6">
-          <TabsList
-            durationFilter={widgetDetails.widget_filters.target_date ?? "none"}
-            selectedTab={widgetDetails.widget_filters.tab ?? "pending"}
-          />
+          <TabsList durationFilter={selectedDurationFilter} selectedTab={selectedTab} />
         </div>
         <Tab.Panels as="div" className="h-full">
           {tabsList.map((tab) => (
diff --git a/web/components/dashboard/widgets/created-issues.tsx b/web/components/dashboard/widgets/created-issues.tsx
index 0ad02bd6900..dcdff6685a9 100644
--- a/web/components/dashboard/widgets/created-issues.tsx
+++ b/web/components/dashboard/widgets/created-issues.tsx
@@ -30,6 +30,8 @@ export const CreatedIssuesWidget: React.FC<WidgetProps> = observer((props) => {
   // derived values
   const widgetDetails = getWidgetDetails(workspaceSlug, dashboardId, WIDGET_KEY);
   const widgetStats = getWidgetStats<TCreatedIssuesWidgetResponse>(workspaceSlug, dashboardId, WIDGET_KEY);
+  const selectedTab = widgetDetails?.widget_filters.tab ?? "pending";
+  const selectedDurationFilter = widgetDetails?.widget_filters.target_date ?? "none";
 
   const handleUpdateFilters = async (filters: Partial<TCreatedIssuesWidgetFilters>) => {
     if (!widgetDetails) return;
@@ -41,30 +43,27 @@ export const CreatedIssuesWidget: React.FC<WidgetProps> = observer((props) => {
       filters,
     });
 
-    const filterDates = getCustomDates(filters.target_date ?? widgetDetails.widget_filters.target_date ?? "none");
+    const filterDates = getCustomDates(filters.target_date ?? selectedDurationFilter);
     fetchWidgetStats(workspaceSlug, dashboardId, {
       widget_key: WIDGET_KEY,
-      issue_type: filters.tab ?? widgetDetails.widget_filters.tab ?? "pending",
+      issue_type: filters.tab ?? selectedTab,
       ...(filterDates.trim() !== "" ? { target_date: filterDates } : {}),
     }).finally(() => setFetching(false));
   };
 
   useEffect(() => {
-    const filterDates = getCustomDates(widgetDetails?.widget_filters.target_date ?? "none");
+    const filterDates = getCustomDates(selectedDurationFilter);
 
     fetchWidgetStats(workspaceSlug, dashboardId, {
       widget_key: WIDGET_KEY,
-      issue_type: widgetDetails?.widget_filters.tab ?? "pending",
+      issue_type: selectedTab,
       ...(filterDates.trim() !== "" ? { target_date: filterDates } : {}),
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const filterParams = getRedirectionFilters(widgetDetails?.widget_filters.tab ?? "pending");
-  const tabsList =
-    (widgetDetails?.widget_filters.target_date ?? "none") === "none"
-      ? UNFILTERED_ISSUES_TABS_LIST
-      : FILTERED_ISSUES_TABS_LIST;
+  const filterParams = getRedirectionFilters(selectedTab);
+  const tabsList = selectedDurationFilter === "none" ? UNFILTERED_ISSUES_TABS_LIST : FILTERED_ISSUES_TABS_LIST;
 
   if (!widgetDetails || !widgetStats) return <WidgetLoader widgetKey={WIDGET_KEY} />;
 
@@ -78,30 +77,31 @@ export const CreatedIssuesWidget: React.FC<WidgetProps> = observer((props) => {
           Created by you
         </Link>
         <DurationFilterDropdown
-          value={widgetDetails.widget_filters.target_date ?? "none"}
+          value={selectedDurationFilter}
           onChange={(val) => {
-            if (val === widgetDetails.widget_filters.target_date) return;
-            let extraOptions: Partial<TCreatedIssuesWidgetFilters> = {};
+            if (val === selectedDurationFilter) return;
 
             // switch to pending tab if target date is changed to none
-            if (val === "none" && widgetDetails.widget_filters.tab !== "completed") extraOptions = { tab: "pending" };
+            if (val === "none" && selectedTab !== "completed") {
+              handleUpdateFilters({ target_date: val, tab: "pending" });
+              return;
+            }
             // switch to upcoming tab if target date is changed to other than none
-            if (
-              val !== "none" &&
-              widgetDetails.widget_filters.target_date === "none" &&
-              widgetDetails.widget_filters.tab !== "completed"
-            )
-              extraOptions = { tab: "upcoming" };
+            if (val !== "none" && selectedDurationFilter === "none" && selectedTab !== "completed") {
+              handleUpdateFilters({
+                target_date: val,
+                tab: "upcoming",
+              });
+              return;
+            }
 
-            handleUpdateFilters({
-              target_date: val,
-              ...extraOptions,
-            });
+            handleUpdateFilters({ target_date: val });
           }}
         />
       </div>
       <Tab.Group
         as="div"
+        selectedIndex={tabsList.findIndex((tab) => tab.key === selectedTab)}
         onChange={(i) => {
           const selectedTab = tabsList[i];
           handleUpdateFilters({ tab: selectedTab.key ?? "pending" });
@@ -109,10 +109,7 @@ export const CreatedIssuesWidget: React.FC<WidgetProps> = observer((props) => {
         className="h-full flex flex-col"
       >
         <div className="px-6">
-          <TabsList
-            durationFilter={widgetDetails.widget_filters.target_date ?? "none"}
-            selectedTab={widgetDetails.widget_filters.tab ?? "pending"}
-          />
+          <TabsList durationFilter={selectedDurationFilter} selectedTab={selectedTab} />
         </div>
         <Tab.Panels as="div" className="h-full">
           {tabsList.map((tab) => (
diff --git a/web/components/dashboard/widgets/issue-panels/tabs-list.tsx b/web/components/dashboard/widgets/issue-panels/tabs-list.tsx
index 9f8f2bbd61a..980b7e23abc 100644
--- a/web/components/dashboard/widgets/issue-panels/tabs-list.tsx
+++ b/web/components/dashboard/widgets/issue-panels/tabs-list.tsx
@@ -1,3 +1,4 @@
+import { observer } from "mobx-react";
 import { Tab } from "@headlessui/react";
 // helpers
 import { cn } from "helpers/common.helper";
@@ -11,15 +12,15 @@ type Props = {
   selectedTab: TIssuesListTypes;
 };
 
-export const TabsList: React.FC<Props> = (props) => {
+export const TabsList: React.FC<Props> = observer((props) => {
   const { durationFilter, selectedTab } = props;
 
   const tabsList = durationFilter === "none" ? UNFILTERED_ISSUES_TABS_LIST : FILTERED_ISSUES_TABS_LIST;
   const selectedTabIndex = tabsList.findIndex((tab) => tab.key === (selectedTab ?? "pending"));
 
-  // console.log("tabsList", tabsList);
-  // console.log("activeTab", selectedTab);
-  // console.log("selectedTabIndex", selectedTabIndex);
+  console.log("tabsList", tabsList);
+  console.log("activeTab", selectedTab);
+  console.log("selectedTabIndex", selectedTabIndex);
 
   return (
     <Tab.List
@@ -65,4 +66,4 @@ export const TabsList: React.FC<Props> = (props) => {
       ))}
     </Tab.List>
   );
-};
+});

From 66981b6094d46fdcb5283b250505c97b9abc1438 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Mon, 5 Feb 2024 12:46:31 +0530
Subject: [PATCH 4/5] fix: tab navigation transition

---
 .../widgets/issue-panels/tabs-list.tsx        | 34 ++++++++-----------
 1 file changed, 14 insertions(+), 20 deletions(-)

diff --git a/web/components/dashboard/widgets/issue-panels/tabs-list.tsx b/web/components/dashboard/widgets/issue-panels/tabs-list.tsx
index 980b7e23abc..9ce00a03c59 100644
--- a/web/components/dashboard/widgets/issue-panels/tabs-list.tsx
+++ b/web/components/dashboard/widgets/issue-panels/tabs-list.tsx
@@ -18,10 +18,6 @@ export const TabsList: React.FC<Props> = observer((props) => {
   const tabsList = durationFilter === "none" ? UNFILTERED_ISSUES_TABS_LIST : FILTERED_ISSUES_TABS_LIST;
   const selectedTabIndex = tabsList.findIndex((tab) => tab.key === (selectedTab ?? "pending"));
 
-  console.log("tabsList", tabsList);
-  console.log("activeTab", selectedTab);
-  console.log("selectedTabIndex", selectedTabIndex);
-
   return (
     <Tab.List
       as="div"
@@ -30,7 +26,7 @@ export const TabsList: React.FC<Props> = observer((props) => {
         gridTemplateColumns: `repeat(${tabsList.length}, 1fr)`,
       }}
     >
-      {/* <div
+      <div
         className={cn("absolute bg-custom-background-100 rounded transition-all duration-500 ease-in-out", {
           // right shadow
           "shadow-[2px_0_8px_rgba(167,169,174,0.15)]": selectedTabIndex !== tabsList.length - 1,
@@ -42,24 +38,22 @@ export const TabsList: React.FC<Props> = observer((props) => {
           width: `${100 / tabsList.length}%`,
           transform: `translateX(${selectedTabIndex * 100}%)`,
         }}
-      /> */}
+      />
       {tabsList.map((tab) => (
         <Tab
           key={tab.key}
-          className={({ selected }) =>
-            cn(
-              "relative z-[1] font-semibold text-xs rounded py-1.5 text-custom-text-400 focus:outline-none",
-              // "transition duration-500",
-              {
-                "text-custom-text-100 bg-custom-background-100": selected,
-                "hover:text-custom-text-300": !selected,
-                // right shadow
-                "shadow-[2px_0_8px_rgba(167,169,174,0.15)]": selectedTabIndex !== tabsList.length - 1,
-                // left shadow
-                "shadow-[-2px_0_8px_rgba(167,169,174,0.15)]": selectedTabIndex !== 0,
-              }
-            )
-          }
+          className={cn(
+            "relative z-[1] font-semibold text-xs rounded py-1.5 text-custom-text-400 focus:outline-none",
+            "transition duration-500",
+            {
+              "text-custom-text-100 bg-custom-background-100": selectedTab === tab.key,
+              "hover:text-custom-text-300": selectedTab !== tab.key,
+              // // right shadow
+              // "shadow-[2px_0_8px_rgba(167,169,174,0.15)]": selectedTabIndex !== tabsList.length - 1,
+              // // left shadow
+              // "shadow-[-2px_0_8px_rgba(167,169,174,0.15)]": selectedTabIndex !== 0,
+            }
+          )}
         >
           <span className="scale-110">{tab.label}</span>
         </Tab>

From 0c58c40d245de079ac611d894192ff4654e66463 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Mon, 5 Feb 2024 18:23:31 +0530
Subject: [PATCH 5/5] fix: extra top spacing on opening the peek overview

---
 .../page-views/workspace-dashboard.tsx        | 20 ++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/web/components/page-views/workspace-dashboard.tsx b/web/components/page-views/workspace-dashboard.tsx
index 3ae0b9e62a0..a66e843aea5 100644
--- a/web/components/page-views/workspace-dashboard.tsx
+++ b/web/components/page-views/workspace-dashboard.tsx
@@ -62,16 +62,18 @@ export const WorkspaceDashboardView = observer(() => {
       {homeDashboardId && joinedProjectIds ? (
         <>
           {joinedProjectIds.length > 0 ? (
-            <div className="space-y-7 p-7 bg-custom-background-90 h-full w-full flex flex-col overflow-y-auto">
+            <>
               <IssuePeekOverview />
-              {currentUser && <UserGreetingsView user={currentUser} />}
-              {currentUser && !currentUser.is_tour_completed && (
-                <div className="fixed left-0 top-0 z-20 grid h-full w-full place-items-center bg-custom-backdrop bg-opacity-50 transition-opacity">
-                  <TourRoot onComplete={handleTourCompleted} />
-                </div>
-              )}
-              <DashboardWidgets />
-            </div>
+              <div className="space-y-7 p-7 bg-custom-background-90 h-full w-full flex flex-col overflow-y-auto">
+                {currentUser && <UserGreetingsView user={currentUser} />}
+                {currentUser && !currentUser.is_tour_completed && (
+                  <div className="fixed left-0 top-0 z-20 grid h-full w-full place-items-center bg-custom-backdrop bg-opacity-50 transition-opacity">
+                    <TourRoot onComplete={handleTourCompleted} />
+                  </div>
+                )}
+                <DashboardWidgets />
+              </div>
+            </>
           ) : (
             <EmptyState
               image={emptyStateImage}