chore: implemented assigned profiles issues and filters and updated workflow in list layout (#2462)

web/components/issues/issue-layouts/kanban/profile-issues-root.tsx

@@ -0,0 +1,85 @@
+import React from "react";
+// react beautiful dnd
+import { DragDropContext } from "@hello-pangea/dnd";
+// mobx
+import { observer } from "mobx-react-lite";
+// components
+import { KanBanSwimLanes } from "./swimlanes";
+import { KanBan } from "./default";
+// store
+import { useMobxStore } from "lib/mobx/store-provider";
+import { RootStore } from "store/root";
+
+export interface IProfileIssuesKanBanLayout {}
+
+export const ProfileIssuesKanBanLayout: React.FC = observer(() => {
+  const {
+    profileIssues: profileIssuesStore,
+    profileIssueFilters: profileIssueFiltersStore,
+    issueKanBanView: issueKanBanViewStore,
+  }: RootStore = useMobxStore();
+
+  const issues = profileIssuesStore?.getIssues;
+
+  const sub_group_by: string | null = profileIssueFiltersStore?.userDisplayFilters?.sub_group_by || null;
+
+  const group_by: string | null = profileIssueFiltersStore?.userDisplayFilters?.group_by || null;
+
+  const display_properties = profileIssueFiltersStore?.userDisplayProperties || null;
+
+  const currentKanBanView: "swimlanes" | "default" = profileIssueFiltersStore?.userDisplayFilters?.sub_group_by
+    ? "swimlanes"
+    : "default";
+
+  const onDragEnd = (result: any) => {
+    if (!result) return;
+
+    if (
+      result.destination &&
+      result.source &&
+      result.destination.droppableId === result.source.droppableId &&
+      result.destination.index === result.source.index
+    )
+      return;
+
+    currentKanBanView === "default"
+      ? issueKanBanViewStore?.handleDragDrop(result.source, result.destination)
+      : issueKanBanViewStore?.handleSwimlaneDragDrop(result.source, result.destination);
+  };
+
+  const updateIssue = (sub_group_by: string | null, group_by: string | null, issue: any) => {
+    profileIssuesStore.updateIssueStructure(group_by, sub_group_by, issue);
+  };
+
+  const handleKanBanToggle = (toggle: "groupByHeaderMinMax" | "subgroupByIssuesVisibility", value: string) => {
+    issueKanBanViewStore.handleKanBanToggle(toggle, value);
+  };
+
+  return (
+    <div className={`relative min-w-full w-max min-h-full h-max bg-custom-background-90 px-3`}>
+      <DragDropContext onDragEnd={onDragEnd}>
+        {currentKanBanView === "default" ? (
+          <KanBan
+            issues={issues}
+            sub_group_by={sub_group_by}
+            group_by={group_by}
+            handleIssues={updateIssue}
+            display_properties={display_properties}
+            kanBanToggle={issueKanBanViewStore?.kanBanToggle}
+            handleKanBanToggle={handleKanBanToggle}
+          />
+        ) : (
+          <KanBanSwimLanes
+            issues={issues}
+            sub_group_by={sub_group_by}
+            group_by={group_by}
+            handleIssues={updateIssue}
+            display_properties={display_properties}
+            kanBanToggle={issueKanBanViewStore?.kanBanToggle}
+            handleKanBanToggle={handleKanBanToggle}
+          />
+        )}
+      </DragDropContext>
+    </div>
+  );
+});

web/components/issues/issue-layouts/kanban/properties.tsx

@@ -8,7 +8,7 @@ import { IssuePropertyPriority } from "../properties/priority";
 import { IssuePropertyLabels } from "../properties/labels";
 import { IssuePropertyAssignee } from "../properties/assignee";
 import { IssuePropertyEstimates } from "../properties/estimates";
-import { IssuePropertyStartDate } from "../properties/date";
+import { IssuePropertyDate } from "../properties/date";
 import { Tooltip } from "@plane/ui";
 
 export interface IKanBanProperties {
@@ -129,7 +129,7 @@ export const KanBanProperties: React.FC<IKanBanProperties> = observer(
 
         {/* start date */}
         {display_properties && display_properties?.start_date && (
-          <IssuePropertyStartDate
+          <IssuePropertyDate
             value={issue?.start_date || null}
             onChange={(date: string) => handleStartDate(date)}
             disabled={false}
@@ -138,7 +138,7 @@ export const KanBanProperties: React.FC<IKanBanProperties> = observer(
 
         {/* target/due date */}
         {display_properties && display_properties?.due_date && (
-          <IssuePropertyStartDate
+          <IssuePropertyDate
             value={issue?.target_date || null}
             onChange={(date: string) => handleTargetDate(date)}
             disabled={false}

web/components/issues/issue-layouts/kanban/root.tsx

@@ -1,7 +1,5 @@
-import React from "react";
+import { FC } from "react";
-// react beautiful dnd
 import { DragDropContext } from "@hello-pangea/dnd";
-// mobx
 import { observer } from "mobx-react-lite";
 // components
 import { KanBanSwimLanes } from "./swimlanes";
@@ -9,11 +7,14 @@ import { KanBan } from "./default";
 // store
 import { useMobxStore } from "lib/mobx/store-provider";
 import { RootStore } from "store/root";
+// constants
+import { ISSUE_STATE_GROUPS, ISSUE_PRIORITIES } from "constants/issue";
 
 export interface IKanBanLayout {}
 
-export const KanBanLayout: React.FC = observer(() => {
+export const KanBanLayout: FC = observer(() => {
   const {
+    project: projectStore,
     issue: issueStore,
     issueFilter: issueFilterStore,
     issueKanBanView: issueKanBanViewStore,
@@ -55,6 +56,14 @@ export const KanBanLayout: React.FC = observer(() => {
     issueKanBanViewStore.handleKanBanToggle(toggle, value);
   };
 
+  const states = projectStore?.projectStates || null;
+  const priorities = ISSUE_PRIORITIES || null;
+  const labels = projectStore?.projectLabels || null;
+  const members = projectStore?.projectMembers || null;
+  const stateGroups = ISSUE_STATE_GROUPS || null;
+  const projects = projectStore?.projectStates || null;
+  const estimates = null;
+
   return (
     <div className={`relative min-w-full w-max min-h-full h-max bg-custom-background-90 px-3`}>
       <DragDropContext onDragEnd={onDragEnd}>
@@ -67,6 +76,13 @@ export const KanBanLayout: React.FC = observer(() => {
             display_properties={display_properties}
             kanBanToggle={issueKanBanViewStore?.kanBanToggle}
             handleKanBanToggle={handleKanBanToggle}
+            // states={states}
+            // stateGroups={stateGroups}
+            // priorities={priorities}
+            // labels={labels}
+            // members={members}
+            // projects={projects}
+            // estimates={estimates}
           />
         ) : (
           <KanBanSwimLanes
@@ -77,6 +93,13 @@ export const KanBanLayout: React.FC = observer(() => {
             display_properties={display_properties}
             kanBanToggle={issueKanBanViewStore?.kanBanToggle}
             handleKanBanToggle={handleKanBanToggle}
+            // states={states}
+            // stateGroups={stateGroups}
+            // priorities={priorities}
+            // labels={labels}
+            // members={members}
+            // projects={projects}
+            // estimates={estimates}
           />
         )}
       </DragDropContext>

web/components/issues/issue-layouts/list/block.tsx

@@ -1,41 +1,52 @@
+import { FC } from "react";
 // components
 import { KanBanProperties } from "./properties";
+// ui
+import { Tooltip } from "@plane/ui";
 
 interface IssueBlockProps {
   columnId: string;
   issues: any;
   handleIssues?: (group_by: string | null, issue: any) => void;
   display_properties: any;
+  states: any;
+  labels: any;
+  members: any;
+  priorities: any;
 }
 
-export const IssueBlock = ({ columnId, issues, handleIssues, display_properties }: IssueBlockProps) => (
+export const IssueBlock: FC<IssueBlockProps> = (props) => {
+  const { columnId, issues, handleIssues, display_properties, states, labels, members, priorities } = props;
+
+  return (
     <>
-    {issues && issues.length > 0 ? (
+      {issues &&
-      <>
+        issues?.length > 0 &&
-        {issues.map((issue: any, index: any) => (
+        issues.map((issue: any, index: any) => (
           <div
             key={index}
-            className={`text-sm p-3 shadow-custom-shadow-2xs transition-all bg-custom-background-100 flex items-center flex-wrap gap-3 border-b border-custom-border-200`}
+            className={`text-sm p-3 shadow-custom-shadow-2xs transition-all bg-custom-background-100 flex items-center gap-3 border-b border-custom-border-200`}
           >
             {display_properties && display_properties?.key && (
               <div className="flex-shrink-0 text-xs text-custom-text-300">ONE-{issue.sequence_id}</div>
             )}
+            <Tooltip tooltipHeading="Title" tooltipContent={issue.name}>
               <div className="line-clamp-1 text-sm font-medium text-custom-text-100">{issue.name}</div>
+            </Tooltip>
             <div className="ml-auto flex-shrink-0">
               <KanBanProperties
                 columnId={columnId}
                 issue={issue}
                 handleIssues={handleIssues}
                 display_properties={display_properties}
+                states={states}
+                labels={labels}
+                members={members}
+                priorities={priorities}
               />
             </div>
           </div>
         ))}
     </>
-    ) : (
-      <div className="absolute top-0 left-0 w-full h-full flex items-center justify-center">
-        No issues are available
-      </div>
-    )}
-  </>
   );
+};

web/components/issues/issue-layouts/list/cycle-root.tsx

@@ -1,16 +1,21 @@
 import React from "react";
-// mobx
 import { observer } from "mobx-react-lite";
 // components
 import { List } from "./default";
 // store
 import { useMobxStore } from "lib/mobx/store-provider";
 import { RootStore } from "store/root";
+// constants
+import { ISSUE_STATE_GROUPS, ISSUE_PRIORITIES } from "constants/issue";
 
 export interface ICycleListLayout {}
 
 export const CycleListLayout: React.FC = observer(() => {
-  const { issueFilter: issueFilterStore, cycleIssue: cycleIssueStore }: RootStore = useMobxStore();
+  const {
+    project: projectStore,
+    issueFilter: issueFilterStore,
+    cycleIssue: cycleIssueStore,
+  }: RootStore = useMobxStore();
 
   const issues = cycleIssueStore?.getIssues;
 
@@ -22,9 +27,29 @@ export const CycleListLayout: React.FC = observer(() => {
     cycleIssueStore.updateIssueStructure(group_by, null, issue);
   };
 
+  const states = projectStore?.projectStates || null;
+  const priorities = ISSUE_PRIORITIES || null;
+  const labels = projectStore?.projectLabels || null;
+  const members = projectStore?.projectMembers || null;
+  const stateGroups = ISSUE_STATE_GROUPS || null;
+  const projects = projectStore?.projectStates || null;
+  const estimates = null;
+
   return (
     <div className={`relative w-full h-full bg-custom-background-90`}>
-      <List issues={issues} group_by={group_by} handleIssues={updateIssue} display_properties={display_properties} />
+      <List
+        issues={issues}
+        group_by={group_by}
+        handleIssues={updateIssue}
+        display_properties={display_properties}
+        states={states}
+        stateGroups={stateGroups}
+        priorities={priorities}
+        labels={labels}
+        members={members}
+        projects={projects}
+        estimates={estimates}
+      />
     </div>
   );
 });

web/components/issues/issue-layouts/list/default.tsx

@@ -1,130 +1,256 @@
 import React from "react";
+import { observer } from "mobx-react-lite";
 // components
-import { KanBanGroupByHeaderRoot } from "./headers/group-by-root";
+import { ListGroupByHeaderRoot } from "./headers/group-by-root";
 import { IssueBlock } from "./block";
 // constants
-import { ISSUE_STATE_GROUPS, ISSUE_PRIORITIES, getValueFromObject } from "constants/issue";
+import { getValueFromObject } from "constants/issue";
-// mobx
-import { observer } from "mobx-react-lite";
-// mobx
-import { useMobxStore } from "lib/mobx/store-provider";
-import { RootStore } from "store/root";
 
-export interface IGroupByKanBan {
+export interface IGroupByList {
   issues: any;
   group_by: string | null;
   list: any;
   listKey: string;
   handleIssues?: (group_by: string | null, issue: any) => void;
   display_properties: any;
+  is_list?: boolean;
+  states: any;
+  labels: any;
+  members: any;
+  projects: any;
+  stateGroups: any;
+  priorities: any;
+  estimates: any;
 }
 
-const GroupByKanBan: React.FC<IGroupByKanBan> = observer(
+const GroupByList: React.FC<IGroupByList> = observer((props) => {
-  ({ issues, group_by, list, listKey, handleIssues, display_properties }) => (
+  const {
+    issues,
+    group_by,
+    list,
+    listKey,
+    handleIssues,
+    display_properties,
+    is_list = false,
+    states,
+    labels,
+    members,
+    projects,
+    stateGroups,
+    priorities,
+    estimates,
+  } = props;
+
+  return (
     <div className="relative w-full h-full">
       {list &&
         list.length > 0 &&
         list.map((_list: any) => (
-          <div className={`flex-shrink-0 flex flex-col`}>
+          <div key={getValueFromObject(_list, listKey) as string} className={`flex-shrink-0 flex flex-col`}>
-            <div className="flex-shrink-0 w-full bg-custom-background-90 py-1 sticky top-0 z-[2] px-3">
+            <div className="flex-shrink-0 w-full bg-custom-background-90 py-1 sticky top-0 z-[2] px-3 border-b border-custom-border-100">
-              <KanBanGroupByHeaderRoot
+              <ListGroupByHeaderRoot
                 column_id={getValueFromObject(_list, listKey) as string}
+                column_value={_list}
                 group_by={group_by}
-                issues_count={issues?.[getValueFromObject(_list, listKey) as string]?.length || 0}
+                issues_count={
+                  is_list ? issues?.length || 0 : issues?.[getValueFromObject(_list, listKey) as string]?.length || 0
+                }
               />
             </div>
             <div className={`w-full h-full relative transition-all`}>
               {issues && (
                 <IssueBlock
                   columnId={getValueFromObject(_list, listKey) as string}
-                  issues={issues[getValueFromObject(_list, listKey) as string]}
+                  issues={is_list ? issues : issues[getValueFromObject(_list, listKey) as string]}
                   handleIssues={handleIssues}
                   display_properties={display_properties}
+                  states={states}
+                  labels={labels}
+                  members={members}
+                  priorities={priorities}
                 />
               )}
             </div>
           </div>
         ))}
     </div>
-  )
   );
+});
 
-export interface IKanBan {
+export interface IList {
   issues: any;
   group_by: string | null;
   handleDragDrop?: (result: any) => void | undefined;
   handleIssues?: (group_by: string | null, issue: any) => void;
   display_properties: any;
+  states: any;
+  labels: any;
+  members: any;
+  projects: any;
+  stateGroups: any;
+  priorities: any;
+  estimates: any;
 }
 
-export const List: React.FC<IKanBan> = observer(({ issues, group_by, handleIssues, display_properties }) => {
+export const List: React.FC<IList> = observer((props) => {
-  const { project: projectStore }: RootStore = useMobxStore();
+  const {
+    issues,
+    group_by,
+    handleIssues,
+    display_properties,
+    states,
+    labels,
+    members,
+    projects,
+    stateGroups,
+    priorities,
+    estimates,
+  } = props;
 
   return (
     <div className="relative w-full h-full">
-      {group_by && group_by === "state" && (
+      {group_by === null && (
-        <GroupByKanBan
+        <GroupByList
           issues={issues}
           group_by={group_by}
-          list={projectStore?.projectStates}
+          list={[{ id: "null", title: "All Issues" }]}
           listKey={`id`}
           handleIssues={handleIssues}
           display_properties={display_properties}
+          is_list={true}
+          states={states}
+          labels={labels}
+          members={members}
+          projects={projects}
+          stateGroups={stateGroups}
+          priorities={priorities}
+          estimates={estimates}
         />
       )}
 
-      {group_by && group_by === "state_detail.group" && (
+      {group_by && group_by === "project" && projects && (
-        <GroupByKanBan
+        <GroupByList
           issues={issues}
           group_by={group_by}
-          list={ISSUE_STATE_GROUPS}
+          list={projects}
-          listKey={`key`}
-          handleIssues={handleIssues}
-          display_properties={display_properties}
-        />
-      )}
-
-      {group_by && group_by === "priority" && (
-        <GroupByKanBan
-          issues={issues}
-          group_by={group_by}
-          list={ISSUE_PRIORITIES}
-          listKey={`key`}
-          handleIssues={handleIssues}
-          display_properties={display_properties}
-        />
-      )}
-
-      {group_by && group_by === "labels" && (
-        <GroupByKanBan
-          issues={issues}
-          group_by={group_by}
-          list={projectStore?.projectLabels}
           listKey={`id`}
           handleIssues={handleIssues}
           display_properties={display_properties}
+          states={states}
+          labels={labels}
+          members={members}
+          projects={projects}
+          stateGroups={stateGroups}
+          priorities={priorities}
+          estimates={estimates}
         />
       )}
 
-      {group_by && group_by === "assignees" && (
+      {group_by && group_by === "state" && states && (
-        <GroupByKanBan
+        <GroupByList
           issues={issues}
           group_by={group_by}
-          list={projectStore?.projectMembers}
+          list={states}
-          listKey={`member.id`}
+          listKey={`id`}
           handleIssues={handleIssues}
           display_properties={display_properties}
+          states={states}
+          labels={labels}
+          members={members}
+          projects={projects}
+          stateGroups={stateGroups}
+          priorities={priorities}
+          estimates={estimates}
         />
       )}
 
-      {group_by && group_by === "created_by" && (
+      {group_by && group_by === "state_detail.group" && stateGroups && (
-        <GroupByKanBan
+        <GroupByList
           issues={issues}
           group_by={group_by}
-          list={projectStore?.projectMembers}
+          list={stateGroups}
+          listKey={`key`}
+          handleIssues={handleIssues}
+          display_properties={display_properties}
+          states={states}
+          labels={labels}
+          members={members}
+          projects={projects}
+          stateGroups={stateGroups}
+          priorities={priorities}
+          estimates={estimates}
+        />
+      )}
+
+      {group_by && group_by === "priority" && priorities && (
+        <GroupByList
+          issues={issues}
+          group_by={group_by}
+          list={priorities}
+          listKey={`key`}
+          handleIssues={handleIssues}
+          display_properties={display_properties}
+          states={states}
+          labels={labels}
+          members={members}
+          projects={projects}
+          stateGroups={stateGroups}
+          priorities={priorities}
+          estimates={estimates}
+        />
+      )}
+
+      {group_by && group_by === "labels" && labels && (
+        <GroupByList
+          issues={issues}
+          group_by={group_by}
+          list={labels}
+          listKey={`id`}
+          handleIssues={handleIssues}
+          display_properties={display_properties}
+          states={states}
+          labels={labels}
+          members={members}
+          projects={projects}
+          stateGroups={stateGroups}
+          priorities={priorities}
+          estimates={estimates}
+        />
+      )}
+
+      {group_by && group_by === "assignees" && members && (
+        <GroupByList
+          issues={issues}
+          group_by={group_by}
+          list={members}
           listKey={`member.id`}
           handleIssues={handleIssues}
           display_properties={display_properties}
+          states={states}
+          labels={labels}
+          members={members}
+          projects={projects}
+          stateGroups={stateGroups}
+          priorities={priorities}
+          estimates={estimates}
+        />
+      )}
+
+      {group_by && group_by === "created_by" && members && (
+        <GroupByList
+          issues={issues}
+          group_by={group_by}
+          list={members}
+          listKey={`member.id`}
+          handleIssues={handleIssues}
+          display_properties={display_properties}
+          states={states}
+          labels={labels}
+          members={members}
+          projects={projects}
+          stateGroups={stateGroups}
+          priorities={priorities}
+          estimates={estimates}
         />
       )}
     </div>

web/components/issues/issue-layouts/list/headers/assignee.tsx

@@ -1,23 +1,21 @@
-// mobx
+import { FC } from "react";
 import { observer } from "mobx-react-lite";
 // components
 import { HeaderGroupByCard } from "./group-by-card";
 import { Avatar } from "components/ui";
-// store
-import { useMobxStore } from "lib/mobx/store-provider";
-import { RootStore } from "store/root";
 
 export interface IAssigneesHeader {
   column_id: string;
+  column_value: any;
   issues_count: number;
 }
 
 export const Icon = ({ user }: any) => <Avatar user={user} height="22px" width="22px" fontSize="12px" />;
 
-export const AssigneesHeader: React.FC<IAssigneesHeader> = observer(({ column_id, issues_count }) => {
+export const AssigneesHeader: FC<IAssigneesHeader> = observer((props) => {
-  const { project: projectStore }: RootStore = useMobxStore();
+  const { column_id, column_value, issues_count } = props;
 
-  const assignee = (column_id && projectStore?.getProjectMemberByUserId(column_id)) ?? null;
+  const assignee = column_value ?? null;
 
   return (
     <>

web/components/issues/issue-layouts/list/headers/created-by.tsx

@@ -1,21 +1,19 @@
-// mobx
+import { FC } from "react";
 import { observer } from "mobx-react-lite";
 // components
 import { HeaderGroupByCard } from "./group-by-card";
 import { Icon } from "./assignee";
-// store
-import { useMobxStore } from "lib/mobx/store-provider";
-import { RootStore } from "store/root";
 
 export interface ICreatedByHeader {
   column_id: string;
+  column_value: any;
   issues_count: number;
 }
 
-export const CreatedByHeader: React.FC<ICreatedByHeader> = observer(({ column_id, issues_count }) => {
+export const CreatedByHeader: FC<ICreatedByHeader> = observer((props) => {
-  const { project: projectStore }: RootStore = useMobxStore();
+  const { column_id, column_value, issues_count } = props;
 
-  const createdBy = (column_id && projectStore?.getProjectMemberByUserId(column_id)) ?? null;
+  const createdBy = column_value ?? null;
 
   return (
     <>

web/components/issues/issue-layouts/list/headers/empty-group.tsx

@@ -0,0 +1,15 @@
+import { observer } from "mobx-react-lite";
+// components
+import { HeaderGroupByCard } from "./group-by-card";
+
+export interface IEmptyHeader {
+  column_id: string;
+  column_value: any;
+  issues_count: number;
+}
+
+export const EmptyHeader: React.FC<IEmptyHeader> = observer((props) => {
+  const { column_id, column_value, issues_count } = props;
+
+  return <HeaderGroupByCard title={column_value?.title || "All Issues"} count={issues_count} />;
+});

web/components/issues/issue-layouts/list/headers/group-by-card.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 // lucide icons
-import { Circle } from "lucide-react";
+import { CircleDashed } from "lucide-react";
 // mobx
 import { observer } from "mobx-react-lite";
 
@@ -20,7 +20,7 @@ export const HeaderGroupByCard = observer(({ icon, title, count }: IHeaderGroupB
       }`}
     >
       <div className="flex-shrink-0 w-[20px] h-[20px] rounded-sm overflow-hidden flex justify-center items-center">
-        {icon ? icon : <Circle width={14} strokeWidth={2} />}
+        {icon ? icon : <CircleDashed width={14} strokeWidth={2} />}
       </div>
 
       <div className={`flex items-center gap-1 ${verticalAlignPosition ? `flex-col` : `flex-row w-full`}`}>

web/components/issues/issue-layouts/list/headers/group-by-root.tsx

@@ -1,30 +1,52 @@
 // components
+import { EmptyHeader } from "./empty-group";
+import { ProjectHeader } from "./project";
 import { StateHeader } from "./state";
 import { StateGroupHeader } from "./state-group";
 import { AssigneesHeader } from "./assignee";
 import { PriorityHeader } from "./priority";
 import { LabelHeader } from "./label";
-import { CreatedByHeader } from "./created_by";
+import { CreatedByHeader } from "./created-by";
 // mobx
 import { observer } from "mobx-react-lite";
 
-export interface IKanBanGroupByHeaderRoot {
+export interface IListGroupByHeaderRoot {
   column_id: string;
+  column_value: any;
   group_by: string | null;
   issues_count: number;
 }
 
-export const KanBanGroupByHeaderRoot: React.FC<IKanBanGroupByHeaderRoot> = observer(
+export const ListGroupByHeaderRoot: React.FC<IListGroupByHeaderRoot> = observer((props) => {
-  ({ column_id, group_by, issues_count }) => (
+  const { column_id, column_value, group_by, issues_count } = props;
+
+  return (
     <>
-      {group_by && group_by === "state" && <StateHeader column_id={column_id} issues_count={issues_count} />}
+      {!group_by && group_by === null && (
-      {group_by && group_by === "state_detail.group" && (
+        <EmptyHeader column_id={column_id} column_value={column_value} issues_count={issues_count} />
-        <StateGroupHeader column_id={column_id} issues_count={issues_count} />
+      )}
+      {group_by && group_by === "project" && (
+        <ProjectHeader column_id={column_id} column_value={column_value} issues_count={issues_count} />
+      )}
+
+      {group_by && group_by === "state" && (
+        <StateHeader column_id={column_id} column_value={column_value} issues_count={issues_count} />
+      )}
+      {group_by && group_by === "state_detail.group" && (
+        <StateGroupHeader column_id={column_id} column_value={column_value} issues_count={issues_count} />
+      )}
+      {group_by && group_by === "priority" && (
+        <PriorityHeader column_id={column_id} column_value={column_value} issues_count={issues_count} />
+      )}
+      {group_by && group_by === "labels" && (
+        <LabelHeader column_id={column_id} column_value={column_value} issues_count={issues_count} />
+      )}
+      {group_by && group_by === "assignees" && (
+        <AssigneesHeader column_id={column_id} column_value={column_value} issues_count={issues_count} />
+      )}
+      {group_by && group_by === "created_by" && (
+        <CreatedByHeader column_id={column_id} column_value={column_value} issues_count={issues_count} />
       )}
-      {group_by && group_by === "priority" && <PriorityHeader column_id={column_id} issues_count={issues_count} />}
-      {group_by && group_by === "labels" && <LabelHeader column_id={column_id} issues_count={issues_count} />}
-      {group_by && group_by === "assignees" && <AssigneesHeader column_id={column_id} issues_count={issues_count} />}
-      {group_by && group_by === "created_by" && <CreatedByHeader column_id={column_id} issues_count={issues_count} />}
     </>
-  )
   );
+});

web/components/issues/issue-layouts/list/headers/label.tsx

@@ -1,13 +1,11 @@
-// mobx
+import { FC } from "react";
 import { observer } from "mobx-react-lite";
 // components
 import { HeaderGroupByCard } from "./group-by-card";
-// store
-import { useMobxStore } from "lib/mobx/store-provider";
-import { RootStore } from "store/root";
 
 export interface ILabelHeader {
   column_id: string;
+  column_value: any;
   issues_count: number;
 }
 
@@ -15,10 +13,20 @@ const Icon = ({ color }: any) => (
   <div className="w-[12px] h-[12px] rounded-full" style={{ backgroundColor: color ? color : "#666" }} />
 );
 
-export const LabelHeader: React.FC<ILabelHeader> = observer(({ column_id, issues_count }) => {
+export const LabelHeader: FC<ILabelHeader> = observer((props) => {
-  const { project: projectStore }: RootStore = useMobxStore();
+  const { column_id, column_value, issues_count } = props;
 
-  const label = (column_id && projectStore?.getProjectLabelById(column_id)) ?? null;
+  const label = column_value ?? null;
 
-  return <>{label && <HeaderGroupByCard icon={<Icon />} title={label?.name || ""} count={issues_count} />}</>;
+  return (
+    <>
+      {column_value && (
+        <HeaderGroupByCard
+          icon={<Icon color={label?.color || null} />}
+          title={column_value?.name || ""}
+          count={issues_count}
+        />
+      )}
+    </>
+  );
 });

web/components/issues/issue-layouts/list/headers/priority.tsx

@@ -1,14 +1,13 @@
-// mobx
+import { FC } from "react";
 import { observer } from "mobx-react-lite";
 // lucide icons
 import { AlertCircle, SignalHigh, SignalMedium, SignalLow, Ban } from "lucide-react";
 // components
 import { HeaderGroupByCard } from "./group-by-card";
-// constants
-import { issuePriorityByKey } from "constants/issue";
 
 export interface IPriorityHeader {
   column_id: string;
+  column_value: any;
   issues_count: number;
 }
 
@@ -38,8 +37,10 @@ const Icon = ({ priority }: any) => (
   </div>
 );
 
-export const PriorityHeader: React.FC<IPriorityHeader> = observer(({ column_id, issues_count }) => {
+export const PriorityHeader: FC<IPriorityHeader> = observer((props) => {
-  const priority = column_id && issuePriorityByKey(column_id);
+  const { column_id, column_value, issues_count } = props;
+
+  const priority = column_value ?? null;
 
   return (
     <>

web/components/issues/issue-layouts/list/headers/project.tsx

@@ -0,0 +1,28 @@
+import { FC } from "react";
+import { observer } from "mobx-react-lite";
+// components
+import { HeaderGroupByCard } from "./group-by-card";
+// emoji helper
+import { renderEmoji } from "helpers/emoji.helper";
+
+export interface IProjectHeader {
+  column_id: string;
+  column_value: any;
+  issues_count: number;
+}
+
+const Icon = ({ emoji }: any) => <div className="w-6 h-6">{renderEmoji(emoji)}</div>;
+
+export const ProjectHeader: FC<IProjectHeader> = observer((props) => {
+  const { column_id, column_value, issues_count } = props;
+
+  const project = column_value ?? null;
+
+  return (
+    <>
+      {project && (
+        <HeaderGroupByCard icon={<Icon emoji={project?.emoji} />} title={project?.name || ""} count={issues_count} />
+      )}
+    </>
+  );
+});

web/components/issues/issue-layouts/list/headers/state-group.tsx

@@ -1,13 +1,13 @@
-// mobx
+import { FC } from "react";
 import { observer } from "mobx-react-lite";
 // components
 import { HeaderGroupByCard } from "./group-by-card";
+// ui
 import { StateGroupIcon } from "@plane/ui";
-// constants
-import { issueStateGroupByKey } from "constants/issue";
 
 export interface IStateGroupHeader {
   column_id: string;
+  column_value: any;
   issues_count: number;
 }
 
@@ -17,8 +17,10 @@ export const Icon = ({ stateGroup, color }: { stateGroup: any; color?: any }) =>
   </div>
 );
 
-export const StateGroupHeader: React.FC<IStateGroupHeader> = observer(({ column_id, issues_count }) => {
+export const StateGroupHeader: FC<IStateGroupHeader> = observer((props) => {
-  const stateGroup = column_id && issueStateGroupByKey(column_id);
+  const { column_id, column_value, issues_count } = props;
+
+  const stateGroup = column_value ?? null;
 
   return (
     <>

web/components/issues/issue-layouts/list/headers/state.tsx

@@ -1,21 +1,19 @@
-// mobx
+import { FC } from "react";
 import { observer } from "mobx-react-lite";
 // components
 import { HeaderGroupByCard } from "./group-by-card";
 import { Icon } from "./state-group";
-// store
-import { useMobxStore } from "lib/mobx/store-provider";
-import { RootStore } from "store/root";
 
 export interface IStateHeader {
   column_id: string;
+  column_value: any;
   issues_count: number;
 }
 
-export const StateHeader: React.FC<IStateHeader> = observer(({ column_id, issues_count }) => {
+export const StateHeader: FC<IStateHeader> = observer((props) => {
-  const { project: projectStore }: RootStore = useMobxStore();
+  const { column_id, column_value, issues_count } = props;
 
-  const state = (column_id && projectStore?.getProjectStateById(column_id)) ?? null;
+  const state = column_value ?? null;
 
   return (
     <>

web/components/issues/issue-layouts/list/module-root.tsx

@@ -1,16 +1,21 @@
 import React from "react";
-// mobx
 import { observer } from "mobx-react-lite";
 // components
 import { List } from "./default";
 // store
 import { useMobxStore } from "lib/mobx/store-provider";
 import { RootStore } from "store/root";
+// constants
+import { ISSUE_STATE_GROUPS, ISSUE_PRIORITIES } from "constants/issue";
 
 export interface IModuleListLayout {}
 
 export const ModuleListLayout: React.FC = observer(() => {
-  const { issueFilter: issueFilterStore, moduleIssue: moduleIssueStore }: RootStore = useMobxStore();
+  const {
+    project: projectStore,
+    issueFilter: issueFilterStore,
+    moduleIssue: moduleIssueStore,
+  }: RootStore = useMobxStore();
 
   const issues = moduleIssueStore?.getIssues;
 
@@ -22,9 +27,29 @@ export const ModuleListLayout: React.FC = observer(() => {
     moduleIssueStore.updateIssueStructure(group_by, null, issue);
   };
 
+  const states = projectStore?.projectStates || null;
+  const priorities = ISSUE_PRIORITIES || null;
+  const labels = projectStore?.projectLabels || null;
+  const members = projectStore?.projectMembers || null;
+  const stateGroups = ISSUE_STATE_GROUPS || null;
+  const projects = projectStore?.projectStates || null;
+  const estimates = null;
+
   return (
     <div className={`relative w-full h-full bg-custom-background-90`}>
-      <List issues={issues} group_by={group_by} handleIssues={updateIssue} display_properties={display_properties} />
+      <List
+        issues={issues}
+        group_by={group_by}
+        handleIssues={updateIssue}
+        display_properties={display_properties}
+        states={states}
+        stateGroups={stateGroups}
+        priorities={priorities}
+        labels={labels}
+        members={members}
+        projects={projects}
+        estimates={estimates}
+      />
     </div>
   );
 });

web/components/issues/issue-layouts/list/profile-issues-root.tsx

@@ -0,0 +1,56 @@
+import { FC } from "react";
+import { observer } from "mobx-react-lite";
+// components
+import { List } from "./default";
+// store
+import { useMobxStore } from "lib/mobx/store-provider";
+import { RootStore } from "store/root";
+// constants
+import { ISSUE_STATE_GROUPS, ISSUE_PRIORITIES } from "constants/issue";
+
+export interface IProfileIssuesListLayout {}
+
+export const ProfileIssuesListLayout: FC = observer(() => {
+  const {
+    workspace: workspaceStore,
+    project: projectStore,
+    profileIssueFilters: profileIssueFiltersStore,
+    profileIssues: profileIssuesIssueStore,
+  }: RootStore = useMobxStore();
+
+  const issues = profileIssuesIssueStore?.getIssues;
+
+  const group_by: string | null = profileIssueFiltersStore?.userDisplayFilters?.group_by || null;
+
+  const display_properties = profileIssueFiltersStore?.userDisplayProperties || null;
+
+  const updateIssue = (group_by: string | null, issue: any) => {
+    profileIssuesIssueStore.updateIssueStructure(group_by, null, issue);
+  };
+
+  const states = projectStore?.projectStates || null;
+  const priorities = ISSUE_PRIORITIES || null;
+  const labels = workspaceStore.workspaceLabels || null;
+  const members = projectStore?.projectMembers || null;
+  const stateGroups = ISSUE_STATE_GROUPS || null;
+  const projects = projectStore?.workspaceProjects || null;
+  const estimates = null;
+
+  return (
+    <div className={`relative w-full h-full bg-custom-background-90`}>
+      <List
+        issues={issues}
+        group_by={group_by}
+        handleIssues={updateIssue}
+        display_properties={display_properties}
+        states={states}
+        stateGroups={stateGroups}
+        priorities={priorities}
+        labels={labels}
+        members={members}
+        projects={projects}
+        estimates={estimates}
+      />
+    </div>
+  );
+});

web/components/issues/issue-layouts/list/properties.tsx

@@ -1,6 +1,5 @@
-// mobx
+import { FC } from "react";
 import { observer } from "mobx-react-lite";
-// lucide icons
 import { Layers, Link, Paperclip } from "lucide-react";
 // components
 import { IssuePropertyState } from "../properties/state";
@@ -8,7 +7,8 @@ import { IssuePropertyPriority } from "../properties/priority";
 import { IssuePropertyLabels } from "../properties/labels";
 import { IssuePropertyAssignee } from "../properties/assignee";
 import { IssuePropertyEstimates } from "../properties/estimates";
-import { IssuePropertyStartDate } from "../properties/date";
+import { IssuePropertyDate } from "../properties/date";
+// ui
 import { Tooltip } from "@plane/ui";
 
 export interface IKanBanProperties {
@@ -16,10 +16,15 @@ export interface IKanBanProperties {
   issue: any;
   handleIssues?: (group_by: string | null, issue: any) => void;
   display_properties: any;
+  states: any;
+  labels: any;
+  members: any;
+  priorities: any;
 }
 
-export const KanBanProperties: React.FC<IKanBanProperties> = observer(
+export const KanBanProperties: FC<IKanBanProperties> = observer((props) => {
-  ({ columnId: group_id, issue, handleIssues, display_properties }) => {
+  const { columnId: group_id, issue, handleIssues, display_properties, states, labels, members, priorities } = props;
+
   const handleState = (id: string) => {
     if (handleIssues) handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, state: id });
   };
@@ -37,13 +42,11 @@ export const KanBanProperties: React.FC<IKanBanProperties> = observer(
   };
 
   const handleStartDate = (date: string) => {
-      if (handleIssues)
+    if (handleIssues) handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, start_date: date });
-        handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, start_date: date });
   };
 
   const handleTargetDate = (date: string) => {
-      if (handleIssues)
+    if (handleIssues) handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, target_date: date });
-        handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, target_date: date });
   };
 
   const handleEstimate = (id: string) => {
@@ -55,60 +58,66 @@ export const KanBanProperties: React.FC<IKanBanProperties> = observer(
     <div className="relative flex gap-2 overflow-x-auto whitespace-nowrap">
       {/* basic properties */}
       {/* state */}
-        {display_properties && display_properties?.state && (
+      {display_properties && display_properties?.state && states && (
         <IssuePropertyState
           value={issue?.state || null}
           dropdownArrow={false}
           onChange={(id: string) => handleState(id)}
           disabled={false}
+          list={states}
         />
       )}
 
       {/* priority */}
-        {display_properties && display_properties?.priority && (
+      {display_properties && display_properties?.priority && priorities && (
         <IssuePropertyPriority
           value={issue?.priority || null}
           dropdownArrow={false}
           onChange={(id: string) => handlePriority(id)}
           disabled={false}
+          list={priorities}
         />
       )}
 
       {/* label */}
-        {display_properties && display_properties?.labels && (
+      {display_properties && display_properties?.labels && labels && (
         <IssuePropertyLabels
           value={issue?.labels || null}
           dropdownArrow={false}
           onChange={(ids: string[]) => handleLabel(ids)}
           disabled={false}
+          list={labels}
         />
       )}
 
       {/* assignee */}
-        {display_properties && display_properties?.assignee && (
+      {display_properties && display_properties?.assignee && members && (
         <IssuePropertyAssignee
           value={issue?.assignees || null}
           dropdownArrow={false}
           onChange={(ids: string[]) => handleAssignee(ids)}
           disabled={false}
+          list={members}
         />
       )}
 
       {/* start date */}
       {display_properties && display_properties?.start_date && (
-          <IssuePropertyStartDate
+        <IssuePropertyDate
           value={issue?.start_date || null}
           onChange={(date: string) => handleStartDate(date)}
           disabled={false}
+          placeHolder={`Start date`}
         />
       )}
 
       {/* target/due date */}
       {display_properties && display_properties?.due_date && (
-          <IssuePropertyStartDate
+        <IssuePropertyDate
           value={issue?.target_date || null}
           onChange={(date: string) => handleTargetDate(date)}
           disabled={false}
+          placeHolder={`Target date`}
         />
       )}
 
@@ -162,5 +171,4 @@ export const KanBanProperties: React.FC<IKanBanProperties> = observer(
       )}
     </div>
   );
-  }
+});
-);

web/components/issues/issue-layouts/list/root.tsx

@@ -1,16 +1,16 @@
-import React from "react";
+import { FC } from "react";
-// mobx
 import { observer } from "mobx-react-lite";
 // components
 import { List } from "./default";
-// store
+// hooks
 import { useMobxStore } from "lib/mobx/store-provider";
+// types
 import { RootStore } from "store/root";
+// constants
+import { ISSUE_STATE_GROUPS, ISSUE_PRIORITIES } from "constants/issue";
 
-export interface IListLayout {}
+export const ListLayout: FC = observer(() => {
-
+  const { project: projectStore, issue: issueStore, issueFilter: issueFilterStore }: RootStore = useMobxStore();
-export const ListLayout: React.FC = observer(() => {
-  const { issue: issueStore, issueFilter: issueFilterStore }: RootStore = useMobxStore();
 
   const issues = issueStore?.getIssues;
 
@@ -22,9 +22,29 @@ export const ListLayout: React.FC = observer(() => {
     issueStore.updateIssueStructure(group_by, null, issue);
   };
 
+  const states = projectStore?.projectStates || null;
+  const priorities = ISSUE_PRIORITIES || null;
+  const labels = projectStore?.projectLabels || null;
+  const members = projectStore?.projectMembers || null;
+  const stateGroups = ISSUE_STATE_GROUPS || null;
+  const projects = projectStore?.projectStates || null;
+  const estimates = null;
+
   return (
     <div className={`relative w-full h-full bg-custom-background-90`}>
-      <List issues={issues} group_by={group_by} handleIssues={updateIssue} display_properties={display_properties} />
+      <List
+        issues={issues}
+        group_by={group_by}
+        handleIssues={updateIssue}
+        display_properties={display_properties}
+        states={states}
+        stateGroups={stateGroups}
+        priorities={priorities}
+        labels={labels}
+        members={members}
+        projects={projects}
+        estimates={estimates}
+      />
     </div>
   );
 });

web/components/issues/issue-layouts/list/view-root.tsx

@@ -1,16 +1,17 @@
 import React from "react";
-// mobx
 import { observer } from "mobx-react-lite";
 // components
 import { List } from "./default";
 // store
 import { useMobxStore } from "lib/mobx/store-provider";
 import { RootStore } from "store/root";
+// constants
+import { ISSUE_STATE_GROUPS, ISSUE_PRIORITIES } from "constants/issue";
 
 export interface IViewListLayout {}
 
 export const ViewListLayout: React.FC = observer(() => {
-  const { issue: issueStore, issueFilter: issueFilterStore }: RootStore = useMobxStore();
+  const { project: projectStore, issue: issueStore, issueFilter: issueFilterStore }: RootStore = useMobxStore();
 
   const issues = issueStore?.getIssues;
 
@@ -22,9 +23,29 @@ export const ViewListLayout: React.FC = observer(() => {
     issueStore.updateIssueStructure(group_by, null, issue);
   };
 
+  const states = projectStore?.projectStates || null;
+  const priorities = ISSUE_PRIORITIES || null;
+  const labels = projectStore?.projectLabels || null;
+  const members = projectStore?.projectMembers || null;
+  const stateGroups = ISSUE_STATE_GROUPS || null;
+  const projects = projectStore?.projectStates || null;
+  const estimates = null;
+
   return (
     <div className={`relative w-full h-full bg-custom-background-90`}>
-      <List issues={issues} group_by={group_by} handleIssues={updateIssue} display_properties={display_properties} />
+      <List
+        issues={issues}
+        group_by={group_by}
+        handleIssues={updateIssue}
+        display_properties={display_properties}
+        states={states}
+        stateGroups={stateGroups}
+        priorities={priorities}
+        labels={labels}
+        members={members}
+        projects={projects}
+        estimates={estimates}
+      />
     </div>
   );
 });

web/components/issues/issue-layouts/properties/assignee.tsx

@@ -1,17 +1,11 @@
-import React from "react";
+import { FC, useRef, useState } from "react";
-// headless ui
 import { Combobox } from "@headlessui/react";
-// lucide icons
 import { ChevronDown, Search, X, Check } from "lucide-react";
-// mobx
 import { observer } from "mobx-react-lite";
 // components
 import { Tooltip } from "@plane/ui";
 // hooks
 import useDynamicDropdownPosition from "hooks/use-dynamic-dropdown";
-// mobx
-import { useMobxStore } from "lib/mobx/store-provider";
-import { RootStore } from "store/root";
 
 interface IFiltersOption {
   id: string;
@@ -23,6 +17,7 @@ export interface IIssuePropertyAssignee {
   value?: any;
   onChange?: (id: any, data: any) => void;
   disabled?: boolean;
+  list?: any;
 
   className?: string;
   buttonClassName?: string;
@@ -30,29 +25,19 @@ export interface IIssuePropertyAssignee {
   dropdownArrow?: boolean;
 }
 
-export const IssuePropertyAssignee: React.FC<IIssuePropertyAssignee> = observer(
+export const IssuePropertyAssignee: FC<IIssuePropertyAssignee> = observer((props) => {
-  ({
+  const { value, onChange, disabled, list, className, buttonClassName, optionsClassName, dropdownArrow = true } = props;
-    value,
-    onChange,
-    disabled,
 
-    className,
+  const dropdownBtn = useRef<any>(null);
-    buttonClassName,
+  const dropdownOptions = useRef<any>(null);
-    optionsClassName,
-    dropdownArrow = true,
-  }) => {
-    const { project: projectStore }: RootStore = useMobxStore();
 
-    const dropdownBtn = React.useRef<any>(null);
+  const [isOpen, setIsOpen] = useState<boolean>(false);
-    const dropdownOptions = React.useRef<any>(null);
+  const [search, setSearch] = useState<string>("");
-
-    const [isOpen, setIsOpen] = React.useState<boolean>(false);
-    const [search, setSearch] = React.useState<string>("");
 
   const options: IFiltersOption[] | [] =
-      (projectStore?.projectMembers &&
+    (list &&
-        projectStore?.projectMembers?.length > 0 &&
+      list?.length > 0 &&
-        projectStore?.projectMembers.map((_member: any) => ({
+      list.map((_member: any) => ({
         id: _member?.member?.id,
         title: _member?.member?.display_name,
         avatar: _member?.member?.avatar && _member?.member?.avatar !== "" ? _member?.member?.avatar : null,
@@ -139,7 +124,7 @@ export const IssuePropertyAssignee: React.FC<IIssuePropertyAssignee> = observer(
                       tooltipContent={(selectedOption.map((_label: IFiltersOption) => _label.title) || []).join(", ")}
                     >
                       <div className="flex-shrink-0 flex justify-center items-center gap-1 text-xs">
-                          <div className="flex-shrink-0 w-[14px] h-[14px] rounded-sm flex justify-center items-center text-white capitalize relative overflow-hidden text-xs">
+                        <div className="flex-shrink-0 w-4 h-4 rounded-sm flex justify-center items-center text-white capitalize relative overflow-hidden text-xs">
                           {selectedOption[0] && selectedOption[0].avatar ? (
                             <img
                               src={selectedOption[0].avatar}
@@ -158,7 +143,9 @@ export const IssuePropertyAssignee: React.FC<IIssuePropertyAssignee> = observer(
                   )}
                 </>
               ) : (
-                  <div className="text-xs">Select option</div>
+                <Tooltip tooltipHeading={`Assignees`} tooltipContent={``}>
+                  <div className="text-xs">Select Assignees</div>
+                </Tooltip>
               )}
 
               {dropdownArrow && !disabled && (
@@ -220,7 +207,7 @@ export const IssuePropertyAssignee: React.FC<IIssuePropertyAssignee> = observer(
                               }
                             >
                               <div className="flex items-center gap-1 w-full px-1">
-                                  <div className="flex-shrink-0 w-4 h-4 rounded-sm flex justify-center items-center text-white capitalize relative overflow-hidden">
+                                <div className="flex-shrink-0 w-[18px] h-[18px] rounded-sm flex justify-center items-center text-white capitalize relative overflow-hidden">
                                   {option && option.avatar ? (
                                     <img
                                       src={option.avatar}
@@ -262,5 +249,4 @@ export const IssuePropertyAssignee: React.FC<IIssuePropertyAssignee> = observer(
       }}
     </Combobox>
   );
-  }
+});
-);

web/components/issues/issue-layouts/properties/date.tsx

@@ -14,13 +14,15 @@ import useDynamicDropdownPosition from "hooks/use-dynamic-dropdown";
 // helpers
 import { renderDateFormat } from "helpers/date-time.helper";
 
-export interface IIssuePropertyStartDate {
+export interface IIssuePropertyDate {
   value?: any;
   onChange?: (date: any) => void;
   disabled?: boolean;
+  placeHolder?: string;
 }
 
-export const IssuePropertyStartDate: React.FC<IIssuePropertyStartDate> = observer(({ value, onChange, disabled }) => {
+export const IssuePropertyDate: React.FC<IIssuePropertyDate> = observer(
+  ({ value, onChange, disabled, placeHolder }) => {
     const dropdownBtn = React.useRef<any>(null);
     const dropdownOptions = React.useRef<any>(null);
 
@@ -43,7 +45,7 @@ export const IssuePropertyStartDate: React.FC<IIssuePropertyStartDate> = observe
                   disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
                 }`}
               >
-              <Tooltip tooltipHeading={`Start Date`} tooltipContent={value}>
+                <Tooltip tooltipHeading={placeHolder ? placeHolder : `Select date`} tooltipContent={value}>
                   <div className="flex-shrink-0 overflow-hidden rounded-sm flex justify-center items-center">
                     <div className="flex-shrink-0 w-[16px] h-[16px] flex justify-center items-center">
                       <Calendar width={10} strokeWidth={2} />
@@ -61,7 +63,7 @@ export const IssuePropertyStartDate: React.FC<IIssuePropertyStartDate> = observe
                         </div>
                       </>
                     ) : (
-                    <div className="text-xs">Select date</div>
+                      <div className="text-xs">{placeHolder ? placeHolder : `Select date`}</div>
                     )}
                   </div>
                 </Tooltip>
@@ -93,4 +95,5 @@ export const IssuePropertyStartDate: React.FC<IIssuePropertyStartDate> = observe
         }}
       </Popover>
     );
-});
+  }
+);

web/components/issues/issue-layouts/properties/estimates.tsx

@@ -121,7 +121,9 @@ export const IssuePropertyEstimates: React.FC<IIssuePropertyEstimates> = observe
                     </div>
                   </Tooltip>
                 ) : (
-                  <div className="text-xs">Select option</div>
+                  <Tooltip tooltipHeading={`Estimates`} tooltipContent={``}>
+                    <div className="text-xs">Select Estimates</div>
+                  </Tooltip>
                 )}
 
                 {dropdownArrow && !disabled && (

web/components/issues/issue-layouts/properties/labels.tsx

@@ -1,17 +1,11 @@
-import React from "react";
+import { FC, useRef, useState } from "react";
-// headless ui
 import { Combobox } from "@headlessui/react";
-// lucide icons
 import { ChevronDown, Search, X, Check } from "lucide-react";
-// mobx
 import { observer } from "mobx-react-lite";
 // components
 import { Tooltip } from "@plane/ui";
 // hooks
 import useDynamicDropdownPosition from "hooks/use-dynamic-dropdown";
-// mobx
-import { useMobxStore } from "lib/mobx/store-provider";
-import { RootStore } from "store/root";
 
 interface IFiltersOption {
   id: string;
@@ -23,6 +17,7 @@ export interface IIssuePropertyLabels {
   value?: any;
   onChange?: (id: any, data: any) => void;
   disabled?: boolean;
+  list?: any;
 
   className?: string;
   buttonClassName?: string;
@@ -30,29 +25,29 @@ export interface IIssuePropertyLabels {
   dropdownArrow?: boolean;
 }
 
-export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer(
+export const IssuePropertyLabels: FC<IIssuePropertyLabels> = observer((props) => {
-  ({
+  const {
     value,
     onChange,
     disabled,
+    list,
 
     className,
     buttonClassName,
     optionsClassName,
     dropdownArrow = true,
-  }) => {
+  } = props;
-    const { project: projectStore }: RootStore = useMobxStore();
 
-    const dropdownBtn = React.useRef<any>(null);
+  const dropdownBtn = useRef<any>(null);
-    const dropdownOptions = React.useRef<any>(null);
+  const dropdownOptions = useRef<any>(null);
 
-    const [isOpen, setIsOpen] = React.useState<boolean>(false);
+  const [isOpen, setIsOpen] = useState<boolean>(false);
-    const [search, setSearch] = React.useState<string>("");
+  const [search, setSearch] = useState<string>("");
 
   const options: IFiltersOption[] | [] =
-      (projectStore?.projectLabels &&
+    (list &&
-        projectStore?.projectLabels?.length > 0 &&
+      list?.length > 0 &&
-        projectStore?.projectLabels.map((_label: any) => ({
+      list.map((_label: any) => ({
         id: _label?.id,
         title: _label?.name,
         color: _label?.color || null,
@@ -133,7 +128,9 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer(
                   )}
                 </>
               ) : (
-                  <div className="text-xs">Select option</div>
+                <Tooltip tooltipHeading={`Labels`} tooltipContent={``}>
+                  <div className="text-xs">Select Labels</div>
+                </Tooltip>
               )}
 
               {dropdownArrow && !disabled && (
@@ -230,5 +227,4 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer(
       }}
     </Combobox>
   );
-  }
+});
-);

web/components/issues/issue-layouts/properties/priority.tsx

@@ -1,16 +1,11 @@
-import React from "react";
+import { FC, useRef, useState } from "react";
-// headless ui
 import { Combobox } from "@headlessui/react";
-// lucide icons
 import { ChevronDown, Search, X, Check, AlertCircle, SignalHigh, SignalMedium, SignalLow, Ban } from "lucide-react";
-// mobx
 import { observer } from "mobx-react-lite";
 // components
 import { Tooltip } from "@plane/ui";
 // hooks
 import useDynamicDropdownPosition from "hooks/use-dynamic-dropdown";
-// constants
-import { ISSUE_PRIORITIES } from "constants/issue";
 
 interface IFiltersOption {
   id: string;
@@ -21,6 +16,7 @@ export interface IIssuePropertyPriority {
   value?: any;
   onChange?: (id: any, data: IFiltersOption) => void;
   disabled?: boolean;
+  list?: any;
 
   className?: string;
   buttonClassName?: string;
@@ -54,27 +50,29 @@ const Icon = ({ priority }: any) => (
   </div>
 );
 
-export const IssuePropertyPriority: React.FC<IIssuePropertyPriority> = observer(
+export const IssuePropertyPriority: FC<IIssuePropertyPriority> = observer((props) => {
-  ({
+  const {
     value,
     onChange,
     disabled,
+    list,
 
     className,
     buttonClassName,
     optionsClassName,
     dropdownArrow = true,
-  }) => {
+  } = props;
-    const dropdownBtn = React.useRef<any>(null);
-    const dropdownOptions = React.useRef<any>(null);
 
-    const [isOpen, setIsOpen] = React.useState<boolean>(false);
+  const dropdownBtn = useRef<any>(null);
-    const [search, setSearch] = React.useState<string>("");
+  const dropdownOptions = useRef<any>(null);
+
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [search, setSearch] = useState<string>("");
 
   const options: IFiltersOption[] | [] =
-      (ISSUE_PRIORITIES &&
+    (list &&
-        ISSUE_PRIORITIES?.length > 0 &&
+      list?.length > 0 &&
-        ISSUE_PRIORITIES.map((_priority: any) => ({
+      list.map((_priority: any) => ({
         id: _priority?.key,
         title: _priority?.title,
       }))) ||
@@ -130,7 +128,9 @@ export const IssuePropertyPriority: React.FC<IIssuePropertyPriority> = observer(
                   </div>
                 </Tooltip>
               ) : (
-                  <div className="text-xs">Select option</div>
+                <Tooltip tooltipHeading={`Priority`} tooltipContent={``}>
+                  <div className="text-xs">Select Priority</div>
+                </Tooltip>
               )}
 
               {dropdownArrow && !disabled && (
@@ -220,5 +220,4 @@ export const IssuePropertyPriority: React.FC<IIssuePropertyPriority> = observer(
       }}
     </Combobox>
   );
-  }
+});
-);

web/components/issues/issue-layouts/properties/state.tsx

@@ -1,17 +1,12 @@
-import React from "react";
+import { FC, useRef, useState } from "react";
-// headless ui
 import { Combobox } from "@headlessui/react";
-// lucide icons
 import { ChevronDown, Search, X, Check } from "lucide-react";
-// mobx
 import { observer } from "mobx-react-lite";
 // components
 import { Tooltip, StateGroupIcon } from "@plane/ui";
 // hooks
 import useDynamicDropdownPosition from "hooks/use-dynamic-dropdown";
-// mobx
+
-import { useMobxStore } from "lib/mobx/store-provider";
-import { RootStore } from "store/root";
 // types
 import { IState } from "types";
 
@@ -26,6 +21,7 @@ export interface IIssuePropertyState {
   value?: any;
   onChange?: (id: any, data: IFiltersOption) => void;
   disabled?: boolean;
+  list?: any;
 
   className?: string;
   buttonClassName?: string;
@@ -33,29 +29,29 @@ export interface IIssuePropertyState {
   dropdownArrow?: boolean;
 }
 
-export const IssuePropertyState: React.FC<IIssuePropertyState> = observer(
+export const IssuePropertyState: FC<IIssuePropertyState> = observer((props) => {
-  ({
+  const {
     value,
     onChange,
     disabled,
+    list,
 
     className,
     buttonClassName,
     optionsClassName,
     dropdownArrow = true,
-  }) => {
+  } = props;
-    const { project: projectStore }: RootStore = useMobxStore();
 
-    const dropdownBtn = React.useRef<any>(null);
+  const dropdownBtn = useRef<any>(null);
-    const dropdownOptions = React.useRef<any>(null);
+  const dropdownOptions = useRef<any>(null);
 
-    const [isOpen, setIsOpen] = React.useState<boolean>(false);
+  const [isOpen, setIsOpen] = useState<boolean>(false);
-    const [search, setSearch] = React.useState<string>("");
+  const [search, setSearch] = useState<string>("");
 
   const options: IFiltersOption[] | [] =
-      (projectStore?.projectStates &&
+    (list &&
-        projectStore?.projectStates?.length > 0 &&
+      list?.length > 0 &&
-        projectStore?.projectStates.map((_state: IState) => ({
+      list.map((_state: IState) => ({
         id: _state?.id,
         title: _state?.name,
         group: _state?.group,
@@ -118,7 +114,9 @@ export const IssuePropertyState: React.FC<IIssuePropertyState> = observer(
                   </div>
                 </Tooltip>
               ) : (
-                  <div className="text-xs">Select option</div>
+                <Tooltip tooltipHeading={`State`} tooltipContent={``}>
+                  <div className="text-xs">Select State</div>
+                </Tooltip>
               )}
 
               {dropdownArrow && !disabled && (
@@ -213,5 +211,4 @@ export const IssuePropertyState: React.FC<IIssuePropertyState> = observer(
       }}
     </Combobox>
   );
-  }
+});
-);

web/components/profile/index.ts

@@ -3,3 +3,5 @@ export * from "./navbar";
 export * from "./profile-issues-view-options";
 export * from "./profile-issues-view";
 export * from "./sidebar";
+
+export * from "./profile-issues-filter";

web/components/profile/navbar.tsx

@@ -4,7 +4,7 @@ import { useRouter } from "next/router";
 import Link from "next/link";
 
 // components
-import { ProfileIssuesViewOptions } from "components/profile";
+import { ProfileIssuesFilter } from "components/profile";
 // types
 import { UserAuth } from "types";
 
@@ -43,9 +43,7 @@ export const ProfileNavbar: React.FC<Props> = ({ memberRole }) => {
   const { workspaceSlug, userId } = router.query;
 
   const tabsList =
-    memberRole.isOwner || memberRole.isMember || memberRole.isViewer
+    memberRole.isOwner || memberRole.isMember || memberRole.isViewer ? [...viewerTabs, ...adminTabs] : viewerTabs;
-      ? [...viewerTabs, ...adminTabs]
-      : viewerTabs;
 
   return (
     <div className="sticky -top-0.5 z-[1] md:static px-4 sm:px-5 flex items-center justify-between gap-4 bg-custom-background-100 border-b border-custom-border-300">
@@ -64,7 +62,7 @@ export const ProfileNavbar: React.FC<Props> = ({ memberRole }) => {
           </Link>
         ))}
       </div>
-      <ProfileIssuesViewOptions />
+      <ProfileIssuesFilter />
     </div>
   );
 };

web/components/profile/profile-issues-filter.tsx

@@ -0,0 +1,70 @@
+import { observer } from "mobx-react-lite";
+// components
+import { DisplayFiltersSelection, FilterSelection, FiltersDropdown, LayoutSelection } from "components/issues";
+// hooks
+import { useMobxStore } from "lib/mobx/store-provider";
+import { RootStore } from "store/root";
+// constants
+import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
+
+export const ProfileIssuesFilter = observer(() => {
+  const { workspace: workspaceStore, profileIssueFilters: profileIssueFiltersStore }: RootStore = useMobxStore();
+
+  const handleLayoutChange = (_layout: string) =>
+    profileIssueFiltersStore.handleIssueFilters("userDisplayFilters", { layout: _layout });
+
+  const handleFilters = (key: any, value: any) => {
+    let updatesFilters: any = profileIssueFiltersStore?.userFilters;
+    updatesFilters = updatesFilters[key] || [];
+    if (updatesFilters && updatesFilters.length > 0 && updatesFilters.includes(value))
+      updatesFilters = updatesFilters.filter((item: any) => item !== value);
+    else updatesFilters.push(value);
+    profileIssueFiltersStore.handleIssueFilters("userFilters", { [key]: updatesFilters });
+  };
+
+  const handleDisplayFilters = (value: any) => profileIssueFiltersStore.handleIssueFilters("userDisplayFilters", value);
+
+  const handleDisplayProperties = (value: any) =>
+    profileIssueFiltersStore.handleIssueFilters("userDisplayProperties", value);
+
+  const states = undefined;
+  const labels = workspaceStore.workspaceLabels || undefined;
+  const members = undefined;
+
+  const activeLayout = profileIssueFiltersStore?.userDisplayFilters?.layout;
+
+  return (
+    <div className="relative flex items-center justify-end gap-2">
+      <LayoutSelection
+        layouts={["list", "kanban"]}
+        onChange={(layout) => handleLayoutChange(layout)}
+        selectedLayout={activeLayout}
+      />
+
+      <FiltersDropdown title="Filters">
+        <FilterSelection
+          filters={profileIssueFiltersStore.userFilters}
+          handleFiltersUpdate={handleFilters}
+          layoutDisplayFiltersOptions={
+            activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.profile_issues[activeLayout] : undefined
+          }
+          states={states}
+          labels={labels}
+          members={members}
+        />
+      </FiltersDropdown>
+
+      <FiltersDropdown title="View">
+        <DisplayFiltersSelection
+          displayFilters={profileIssueFiltersStore.userDisplayFilters}
+          displayProperties={profileIssueFiltersStore.userDisplayProperties}
+          handleDisplayFiltersUpdate={handleDisplayFilters}
+          handleDisplayPropertiesUpdate={handleDisplayProperties}
+          layoutDisplayFiltersOptions={
+            activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.profile_issues[activeLayout] : undefined
+          }
+        />
+      </FiltersDropdown>
+    </div>
+  );
+});

web/constants/issue.ts

@@ -220,6 +220,90 @@ export interface ILayoutDisplayFiltersOptions {
 export const ISSUE_DISPLAY_FILTERS_BY_LAYOUT: {
   [pageType: string]: { [layoutType: string]: ILayoutDisplayFiltersOptions };
 } = {
+  profile_issues: {
+    list: {
+      filters: ["priority", "state_group", "labels", "start_date", "target_date"],
+      display_properties: true,
+      display_filters: {
+        group_by: ["state_detail.group", "priority", "project", "labels", null],
+        order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "priority"],
+        type: [null, "active", "backlog"],
+      },
+      extra_options: {
+        access: true,
+        values: ["show_empty_groups"],
+      },
+    },
+    kanban: {
+      filters: ["priority", "state_group", "labels", "start_date", "target_date"],
+      display_properties: true,
+      display_filters: {
+        group_by: ["state_detail.group", "priority", "project", "labels", null],
+        order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "priority"],
+        type: [null, "active", "backlog"],
+      },
+      extra_options: {
+        access: true,
+        values: ["show_empty_groups"],
+      },
+    },
+  },
+  archived_issues: {
+    list: {
+      filters: ["priority", "state_group", "labels", "start_date", "target_date"],
+      display_properties: true,
+      display_filters: {
+        group_by: ["state_detail.group", "priority", "project", "labels", null],
+        order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "priority"],
+        type: [null, "active", "backlog"],
+      },
+      extra_options: {
+        access: true,
+        values: ["show_empty_groups"],
+      },
+    },
+    kanban: {
+      filters: ["priority", "state_group", "labels", "start_date", "target_date"],
+      display_properties: true,
+      display_filters: {
+        group_by: ["state_detail.group", "priority", "project", "labels", null],
+        order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "priority"],
+        type: [null, "active", "backlog"],
+      },
+      extra_options: {
+        access: true,
+        values: ["show_empty_groups"],
+      },
+    },
+  },
+  draft_issues: {
+    list: {
+      filters: ["priority", "state_group", "labels", "start_date", "target_date"],
+      display_properties: true,
+      display_filters: {
+        group_by: ["state_detail.group", "priority", "project", "labels", null],
+        order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "priority"],
+        type: [null, "active", "backlog"],
+      },
+      extra_options: {
+        access: true,
+        values: ["show_empty_groups"],
+      },
+    },
+    kanban: {
+      filters: ["priority", "state_group", "labels", "start_date", "target_date"],
+      display_properties: true,
+      display_filters: {
+        group_by: ["state_detail.group", "priority", "project", "labels", null],
+        order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "priority"],
+        type: [null, "active", "backlog"],
+      },
+      extra_options: {
+        access: true,
+        values: ["show_empty_groups"],
+      },
+    },
+  },
   my_issues: {
     spreadsheet: {
       filters: ["priority", "state_group", "labels", "assignees", "created_by", "project", "start_date", "target_date"],

web/helpers/issue.helper.ts

@@ -83,7 +83,7 @@ export const handleIssuesMutation: THandleIssuesMutation = (
 
 export const handleIssueQueryParamsByLayout = (
   layout: TIssueLayouts | undefined,
-  viewType: "my_issues" | "issues"
+  viewType: "my_issues" | "issues" | "profile_issues" | "archived_issues" | "draft_issues"
 ): TIssueParams[] | null => {
   const queryParams: TIssueParams[] = [];
 

web/pages/[workspaceSlug]/profile/[userId]/assigned.tsx

@@ -1,19 +1,66 @@
 import React from "react";
-
+import type { NextPage } from "next";
+import { useRouter } from "next/router";
+import useSWR from "swr";
+import { observer } from "mobx-react-lite";
 // contexts
 import { ProfileIssuesContextProvider } from "contexts/profile-issues-context";
+// layouts
 import { ProfileAuthWrapper } from "layouts/profile-layout";
 // components
-import { ProfileIssuesView } from "components/profile";
+import { ProfileIssuesListLayout } from "components/issues/issue-layouts/list/profile-issues-root";
-// types
+import { ProfileIssuesKanBanLayout } from "components/issues/issue-layouts/kanban/profile-issues-root";
-import type { NextPage } from "next";
+// hooks
+import { useMobxStore } from "lib/mobx/store-provider";
+import { RootStore } from "store/root";
 
-const ProfileAssignedIssues: NextPage = () => (
+// types
+
+const ProfileAssignedIssues: NextPage = observer(() => {
+  const {
+    workspace: workspaceStore,
+    project: projectStore,
+    profileIssueFilters: profileIssueFiltersStore,
+    profileIssues: profileIssuesStore,
+  }: RootStore = useMobxStore();
+
+  const router = useRouter();
+  const { workspaceSlug, userId } = router.query as {
+    workspaceSlug: string;
+    userId: string;
+  };
+
+  useSWR(`PROFILE_ISSUES_${workspaceSlug}_${userId}`, async () => {
+    if (workspaceSlug && userId) {
+      // workspace labels
+      workspaceStore.setWorkspaceSlug(workspaceSlug);
+      await workspaceStore.fetchWorkspaceLabels(workspaceSlug);
+      await projectStore.fetchProjects(workspaceSlug);
+
+      //profile issues
+      await profileIssuesStore.fetchIssues(workspaceSlug, userId, "assigned");
+    }
+  });
+
+  const activeLayout = profileIssueFiltersStore.userDisplayFilters.layout;
+
+  return (
     <ProfileIssuesContextProvider>
       <ProfileAuthWrapper>
-      <ProfileIssuesView />
+        {profileIssuesStore.loader ? (
+          <div>Loading...</div>
+        ) : (
+          <div className="w-full h-full relative overflow-auto -z-1">
+            {activeLayout === "list" ? (
+              <ProfileIssuesListLayout />
+            ) : activeLayout === "kanban" ? (
+              <ProfileIssuesKanBanLayout />
+            ) : null}
+          </div>
+        )}
       </ProfileAuthWrapper>
     </ProfileIssuesContextProvider>
   );
+});
 
 export default ProfileAssignedIssues;

web/store/archived-issues/index.ts

@@ -0,0 +1,2 @@
+export * from "./issue.store";
+export * from "./issue_filters.store";

web/store/archived-issues/issue.store.ts

@@ -0,0 +1,187 @@
+import { observable, action, computed, makeObservable, runInAction } from "mobx";
+// store
+import { RootStore } from "../root";
+// types
+import { IIssue } from "types";
+// services
+import { IssueService } from "services/issue";
+import { sortArrayByDate, sortArrayByPriority } from "constants/kanban-helpers";
+
+export type IIssueType = "grouped" | "groupWithSubGroups" | "ungrouped";
+export type IIssueGroupedStructure = { [group_id: string]: IIssue[] };
+export type IIssueGroupWithSubGroupsStructure = {
+  [group_id: string]: {
+    [sub_group_id: string]: IIssue[];
+  };
+};
+export type IIssueUnGroupedStructure = IIssue[];
+
+export interface IArchivedIssueStore {
+  loader: boolean;
+  error: any | null;
+  // issues
+  issues: {
+    [project_id: string]: {
+      grouped: IIssueGroupedStructure;
+      groupWithSubGroups: IIssueGroupWithSubGroupsStructure;
+      ungrouped: IIssueUnGroupedStructure;
+    };
+  };
+  // computed
+  getIssueType: IIssueType | null;
+  getIssues: IIssueGroupedStructure | IIssueGroupWithSubGroupsStructure | IIssueUnGroupedStructure | null;
+  // action
+  fetchIssues: (workspaceSlug: string, projectId: string) => Promise<any>;
+  updateIssueStructure: (group_id: string | null, sub_group_id: string | null, issue: IIssue) => void;
+}
+
+export class ArchivedIssueStore implements IArchivedIssueStore {
+  loader: boolean = false;
+  error: any | null = null;
+  issues: {
+    [project_id: string]: {
+      grouped: {
+        [group_id: string]: IIssue[];
+      };
+      groupWithSubGroups: {
+        [group_id: string]: {
+          [sub_group_id: string]: IIssue[];
+        };
+      };
+      ungrouped: IIssue[];
+    };
+  } = {};
+  // service
+  issueService;
+  rootStore;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // observable
+      loader: observable.ref,
+      error: observable.ref,
+      issues: observable.ref,
+      // computed
+      getIssueType: computed,
+      getIssues: computed,
+      // actions
+      fetchIssues: action,
+      updateIssueStructure: action,
+    });
+    this.rootStore = _rootStore;
+    this.issueService = new IssueService();
+  }
+
+  get getIssueType() {
+    const groupedLayouts = ["kanban", "list", "calendar"];
+    const ungroupedLayouts = ["spreadsheet", "gantt_chart"];
+
+    const issueLayout = this.rootStore?.issueFilter?.userDisplayFilters?.layout || null;
+    const issueSubGroup = this.rootStore?.issueFilter?.userDisplayFilters?.sub_group_by || null;
+    if (!issueLayout) return null;
+
+    const _issueState = groupedLayouts.includes(issueLayout)
+      ? issueSubGroup
+        ? "groupWithSubGroups"
+        : "grouped"
+      : ungroupedLayouts.includes(issueLayout)
+      ? "ungrouped"
+      : null;
+
+    return _issueState || null;
+  }
+
+  get getIssues() {
+    const projectId: string | null = this.rootStore?.project?.projectId;
+    const issueType = this.getIssueType;
+    if (!projectId || !issueType) return null;
+
+    return this.issues?.[projectId]?.[issueType] || null;
+  }
+
+  updateIssueStructure = async (group_id: string | null, sub_group_id: string | null, issue: IIssue) => {
+    const projectId: string | null = issue?.project;
+    const issueType = this.getIssueType;
+    if (!projectId || !issueType) return null;
+
+    let issues: IIssueGroupedStructure | IIssueGroupWithSubGroupsStructure | IIssueUnGroupedStructure | null =
+      this.getIssues;
+    if (!issues) return null;
+
+    if (issueType === "grouped" && group_id) {
+      issues = issues as IIssueGroupedStructure;
+      issues = {
+        ...issues,
+        [group_id]: issues[group_id].map((i: IIssue) => (i?.id === issue?.id ? { ...i, ...issue } : i)),
+      };
+    }
+    if (issueType === "groupWithSubGroups" && group_id && sub_group_id) {
+      issues = issues as IIssueGroupWithSubGroupsStructure;
+      issues = {
+        ...issues,
+        [sub_group_id]: {
+          ...issues[sub_group_id],
+          [group_id]: issues[sub_group_id][group_id].map((i: IIssue) => (i?.id === issue?.id ? { ...i, ...issue } : i)),
+        },
+      };
+    }
+    if (issueType === "ungrouped") {
+      issues = issues as IIssueUnGroupedStructure;
+      issues = issues.map((i: IIssue) => (i?.id === issue?.id ? { ...i, ...issue } : i));
+    }
+
+    const orderBy = this.rootStore?.issueFilter?.userDisplayFilters?.order_by || "";
+    if (orderBy === "-created_at") {
+      issues = sortArrayByDate(issues as any, "created_at");
+    }
+    if (orderBy === "-updated_at") {
+      issues = sortArrayByDate(issues as any, "updated_at");
+    }
+    if (orderBy === "start_date") {
+      issues = sortArrayByDate(issues as any, "updated_at");
+    }
+    if (orderBy === "priority") {
+      issues = sortArrayByPriority(issues as any, "priority");
+    }
+
+    runInAction(() => {
+      this.issues = { ...this.issues, [projectId]: { ...this.issues[projectId], [issueType]: issues } };
+    });
+  };
+
+  fetchIssues = async (workspaceSlug: string, projectId: string) => {
+    try {
+      this.loader = true;
+      this.error = null;
+
+      this.rootStore.workspace.setWorkspaceSlug(workspaceSlug);
+      this.rootStore.project.setProjectId(projectId);
+
+      const params = this.rootStore?.issueFilter?.appliedFilters;
+      const issueResponse = await this.issueService.getIssuesWithParams(workspaceSlug, projectId, params);
+
+      const issueType = this.getIssueType;
+      if (issueType != null) {
+        const _issues = {
+          ...this.issues,
+          [projectId]: {
+            ...this.issues[projectId],
+            [issueType]: issueResponse,
+          },
+        };
+        runInAction(() => {
+          this.issues = _issues;
+          this.loader = false;
+          this.error = null;
+        });
+      }
+
+      return issueResponse;
+    } catch (error) {
+      console.error("Error: Fetching error in issues", error);
+      this.loader = false;
+      this.error = error;
+      return error;
+    }
+  };
+}

web/store/archived-issues/issue_filters.store.ts

@@ -0,0 +1,109 @@
+import { observable, computed, makeObservable } from "mobx";
+// helpers
+import { handleIssueQueryParamsByLayout } from "helpers/issue.helper";
+// types
+import { RootStore } from "../root";
+import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TIssueParams } from "types";
+
+export interface IArchivedIssueFilterStore {
+  userDisplayProperties: IIssueDisplayProperties;
+  userDisplayFilters: IIssueDisplayFilterOptions;
+  userFilters: IIssueFilterOptions;
+
+  // computed
+  appliedFilters: TIssueParams[] | null;
+}
+
+export class ArchivedIssueFilterStore implements IArchivedIssueFilterStore {
+  // observables
+  userFilters: IIssueFilterOptions = {
+    priority: null,
+    state_group: null,
+    labels: null,
+    start_date: null,
+    target_date: null,
+    assignees: null,
+    created_by: null,
+    subscriber: null,
+  };
+  userDisplayFilters: IIssueDisplayFilterOptions = {
+    group_by: null,
+    order_by: "sort_order",
+    show_empty_groups: true,
+    type: null,
+    layout: "list",
+  };
+  userDisplayProperties: any = {
+    assignee: true,
+    start_date: true,
+    due_date: true,
+    labels: true,
+    key: true,
+    priority: true,
+    state: true,
+    sub_issue_count: true,
+    link: true,
+    attachment_count: true,
+    estimate: true,
+    created_on: true,
+    updated_on: true,
+  };
+
+  // root store
+  rootStore;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // observables
+      userFilters: observable.ref,
+      userDisplayFilters: observable.ref,
+      userDisplayProperties: observable.ref,
+
+      // computed
+      appliedFilters: computed,
+    });
+
+    this.rootStore = _rootStore;
+  }
+
+  computedFilter = (filters: any, filteredParams: any) => {
+    const computedFilters: any = {};
+    Object.keys(filters).map((key) => {
+      if (filters[key] != undefined && filteredParams.includes(key))
+        computedFilters[key] =
+          typeof filters[key] === "string" || typeof filters[key] === "boolean" ? filters[key] : filters[key].join(",");
+    });
+
+    return computedFilters;
+  };
+
+  get appliedFilters(): TIssueParams[] | null {
+    if (!this.userFilters || !this.userDisplayFilters) return null;
+
+    let filteredRouteParams: any = {
+      priority: this.userFilters?.priority || undefined,
+      state_group: this.userFilters?.state_group || undefined,
+      state: this.userFilters?.state || undefined,
+      assignees: this.userFilters?.assignees || undefined,
+      created_by: this.userFilters?.created_by || undefined,
+      labels: this.userFilters?.labels || undefined,
+      start_date: this.userFilters?.start_date || undefined,
+      target_date: this.userFilters?.target_date || undefined,
+      group_by: this.userDisplayFilters?.group_by || "state",
+      order_by: this.userDisplayFilters?.order_by || "-created_at",
+      sub_group_by: this.userDisplayFilters?.sub_group_by || undefined,
+      type: this.userDisplayFilters?.type || undefined,
+      sub_issue: this.userDisplayFilters?.sub_issue || true,
+      show_empty_groups: this.userDisplayFilters?.show_empty_groups || true,
+      start_target_date: this.userDisplayFilters?.start_target_date || true,
+    };
+
+    const filteredParams = handleIssueQueryParamsByLayout(this.userDisplayFilters.layout, "issues");
+    if (filteredParams) filteredRouteParams = this.computedFilter(filteredRouteParams, filteredParams);
+
+    if (this.userDisplayFilters.layout === "calendar") filteredRouteParams.group_by = "target_date";
+    if (this.userDisplayFilters.layout === "gantt_chart") filteredRouteParams.start_target_date = true;
+
+    return filteredRouteParams;
+  }
+}

web/store/draft-issues/index.ts

@@ -0,0 +1,2 @@
+export * from "./issue.store";
+export * from "./issue_filters.store";

web/store/draft-issues/issue.store.ts

@@ -0,0 +1,187 @@
+import { observable, action, computed, makeObservable, runInAction } from "mobx";
+// store
+import { RootStore } from "../root";
+// types
+import { IIssue } from "types";
+// services
+import { IssueService } from "services/issue";
+import { sortArrayByDate, sortArrayByPriority } from "constants/kanban-helpers";
+
+export type IIssueType = "grouped" | "groupWithSubGroups" | "ungrouped";
+export type IIssueGroupedStructure = { [group_id: string]: IIssue[] };
+export type IIssueGroupWithSubGroupsStructure = {
+  [group_id: string]: {
+    [sub_group_id: string]: IIssue[];
+  };
+};
+export type IIssueUnGroupedStructure = IIssue[];
+
+export interface IDraftIssueStore {
+  loader: boolean;
+  error: any | null;
+  // issues
+  issues: {
+    [project_id: string]: {
+      grouped: IIssueGroupedStructure;
+      groupWithSubGroups: IIssueGroupWithSubGroupsStructure;
+      ungrouped: IIssueUnGroupedStructure;
+    };
+  };
+  // computed
+  getIssueType: IIssueType | null;
+  getIssues: IIssueGroupedStructure | IIssueGroupWithSubGroupsStructure | IIssueUnGroupedStructure | null;
+  // action
+  fetchIssues: (workspaceSlug: string, projectId: string) => Promise<any>;
+  updateIssueStructure: (group_id: string | null, sub_group_id: string | null, issue: IIssue) => void;
+}
+
+export class DraftIssueStore implements IDraftIssueStore {
+  loader: boolean = false;
+  error: any | null = null;
+  issues: {
+    [project_id: string]: {
+      grouped: {
+        [group_id: string]: IIssue[];
+      };
+      groupWithSubGroups: {
+        [group_id: string]: {
+          [sub_group_id: string]: IIssue[];
+        };
+      };
+      ungrouped: IIssue[];
+    };
+  } = {};
+  // service
+  issueService;
+  rootStore;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // observable
+      loader: observable.ref,
+      error: observable.ref,
+      issues: observable.ref,
+      // computed
+      getIssueType: computed,
+      getIssues: computed,
+      // actions
+      fetchIssues: action,
+      updateIssueStructure: action,
+    });
+    this.rootStore = _rootStore;
+    this.issueService = new IssueService();
+  }
+
+  get getIssueType() {
+    const groupedLayouts = ["kanban", "list", "calendar"];
+    const ungroupedLayouts = ["spreadsheet", "gantt_chart"];
+
+    const issueLayout = this.rootStore?.issueFilter?.userDisplayFilters?.layout || null;
+    const issueSubGroup = this.rootStore?.issueFilter?.userDisplayFilters?.sub_group_by || null;
+    if (!issueLayout) return null;
+
+    const _issueState = groupedLayouts.includes(issueLayout)
+      ? issueSubGroup
+        ? "groupWithSubGroups"
+        : "grouped"
+      : ungroupedLayouts.includes(issueLayout)
+      ? "ungrouped"
+      : null;
+
+    return _issueState || null;
+  }
+
+  get getIssues() {
+    const projectId: string | null = this.rootStore?.project?.projectId;
+    const issueType = this.getIssueType;
+    if (!projectId || !issueType) return null;
+
+    return this.issues?.[projectId]?.[issueType] || null;
+  }
+
+  updateIssueStructure = async (group_id: string | null, sub_group_id: string | null, issue: IIssue) => {
+    const projectId: string | null = issue?.project;
+    const issueType = this.getIssueType;
+    if (!projectId || !issueType) return null;
+
+    let issues: IIssueGroupedStructure | IIssueGroupWithSubGroupsStructure | IIssueUnGroupedStructure | null =
+      this.getIssues;
+    if (!issues) return null;
+
+    if (issueType === "grouped" && group_id) {
+      issues = issues as IIssueGroupedStructure;
+      issues = {
+        ...issues,
+        [group_id]: issues[group_id].map((i: IIssue) => (i?.id === issue?.id ? { ...i, ...issue } : i)),
+      };
+    }
+    if (issueType === "groupWithSubGroups" && group_id && sub_group_id) {
+      issues = issues as IIssueGroupWithSubGroupsStructure;
+      issues = {
+        ...issues,
+        [sub_group_id]: {
+          ...issues[sub_group_id],
+          [group_id]: issues[sub_group_id][group_id].map((i: IIssue) => (i?.id === issue?.id ? { ...i, ...issue } : i)),
+        },
+      };
+    }
+    if (issueType === "ungrouped") {
+      issues = issues as IIssueUnGroupedStructure;
+      issues = issues.map((i: IIssue) => (i?.id === issue?.id ? { ...i, ...issue } : i));
+    }
+
+    const orderBy = this.rootStore?.issueFilter?.userDisplayFilters?.order_by || "";
+    if (orderBy === "-created_at") {
+      issues = sortArrayByDate(issues as any, "created_at");
+    }
+    if (orderBy === "-updated_at") {
+      issues = sortArrayByDate(issues as any, "updated_at");
+    }
+    if (orderBy === "start_date") {
+      issues = sortArrayByDate(issues as any, "updated_at");
+    }
+    if (orderBy === "priority") {
+      issues = sortArrayByPriority(issues as any, "priority");
+    }
+
+    runInAction(() => {
+      this.issues = { ...this.issues, [projectId]: { ...this.issues[projectId], [issueType]: issues } };
+    });
+  };
+
+  fetchIssues = async (workspaceSlug: string, projectId: string) => {
+    try {
+      this.loader = true;
+      this.error = null;
+
+      this.rootStore.workspace.setWorkspaceSlug(workspaceSlug);
+      this.rootStore.project.setProjectId(projectId);
+
+      const params = this.rootStore?.issueFilter?.appliedFilters;
+      const issueResponse = await this.issueService.getIssuesWithParams(workspaceSlug, projectId, params);
+
+      const issueType = this.getIssueType;
+      if (issueType != null) {
+        const _issues = {
+          ...this.issues,
+          [projectId]: {
+            ...this.issues[projectId],
+            [issueType]: issueResponse,
+          },
+        };
+        runInAction(() => {
+          this.issues = _issues;
+          this.loader = false;
+          this.error = null;
+        });
+      }
+
+      return issueResponse;
+    } catch (error) {
+      console.error("Error: Fetching error in issues", error);
+      this.loader = false;
+      this.error = error;
+      return error;
+    }
+  };
+}

web/store/draft-issues/issue_filters.store.ts

@@ -0,0 +1,109 @@
+import { observable, computed, makeObservable } from "mobx";
+// helpers
+import { handleIssueQueryParamsByLayout } from "helpers/issue.helper";
+// types
+import { RootStore } from "../root";
+import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TIssueParams } from "types";
+
+export interface IDraftIssueFilterStore {
+  userDisplayProperties: IIssueDisplayProperties;
+  userDisplayFilters: IIssueDisplayFilterOptions;
+  userFilters: IIssueFilterOptions;
+
+  // computed
+  appliedFilters: TIssueParams[] | null;
+}
+
+export class DraftIssueFilterStore implements IDraftIssueFilterStore {
+  // observables
+  userFilters: IIssueFilterOptions = {
+    priority: null,
+    state_group: null,
+    labels: null,
+    start_date: null,
+    target_date: null,
+    assignees: null,
+    created_by: null,
+    subscriber: null,
+  };
+  userDisplayFilters: IIssueDisplayFilterOptions = {
+    group_by: null,
+    order_by: "sort_order",
+    show_empty_groups: true,
+    type: null,
+    layout: "list",
+  };
+  userDisplayProperties: any = {
+    assignee: true,
+    start_date: true,
+    due_date: true,
+    labels: true,
+    key: true,
+    priority: true,
+    state: true,
+    sub_issue_count: true,
+    link: true,
+    attachment_count: true,
+    estimate: true,
+    created_on: true,
+    updated_on: true,
+  };
+
+  // root store
+  rootStore;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // observables
+      userFilters: observable.ref,
+      userDisplayFilters: observable.ref,
+      userDisplayProperties: observable.ref,
+
+      // computed
+      appliedFilters: computed,
+    });
+
+    this.rootStore = _rootStore;
+  }
+
+  computedFilter = (filters: any, filteredParams: any) => {
+    const computedFilters: any = {};
+    Object.keys(filters).map((key) => {
+      if (filters[key] != undefined && filteredParams.includes(key))
+        computedFilters[key] =
+          typeof filters[key] === "string" || typeof filters[key] === "boolean" ? filters[key] : filters[key].join(",");
+    });
+
+    return computedFilters;
+  };
+
+  get appliedFilters(): TIssueParams[] | null {
+    if (!this.userFilters || !this.userDisplayFilters) return null;
+
+    let filteredRouteParams: any = {
+      priority: this.userFilters?.priority || undefined,
+      state_group: this.userFilters?.state_group || undefined,
+      state: this.userFilters?.state || undefined,
+      assignees: this.userFilters?.assignees || undefined,
+      created_by: this.userFilters?.created_by || undefined,
+      labels: this.userFilters?.labels || undefined,
+      start_date: this.userFilters?.start_date || undefined,
+      target_date: this.userFilters?.target_date || undefined,
+      group_by: this.userDisplayFilters?.group_by || "state",
+      order_by: this.userDisplayFilters?.order_by || "-created_at",
+      sub_group_by: this.userDisplayFilters?.sub_group_by || undefined,
+      type: this.userDisplayFilters?.type || undefined,
+      sub_issue: this.userDisplayFilters?.sub_issue || true,
+      show_empty_groups: this.userDisplayFilters?.show_empty_groups || true,
+      start_target_date: this.userDisplayFilters?.start_target_date || true,
+    };
+
+    const filteredParams = handleIssueQueryParamsByLayout(this.userDisplayFilters.layout, "issues");
+    if (filteredParams) filteredRouteParams = this.computedFilter(filteredRouteParams, filteredParams);
+
+    if (this.userDisplayFilters.layout === "calendar") filteredRouteParams.group_by = "target_date";
+    if (this.userDisplayFilters.layout === "gantt_chart") filteredRouteParams.start_target_date = true;
+
+    return filteredRouteParams;
+  }
+}

web/store/profile-issues/index.ts

@@ -0,0 +1,2 @@
+export * from "./issue.store";
+export * from "./issue_filters.store";

web/store/profile-issues/issue.store.ts

@@ -0,0 +1,231 @@
+import { observable, action, computed, makeObservable, runInAction } from "mobx";
+// store
+import { RootStore } from "../root";
+// types
+import { IIssue } from "types";
+// services
+import { UserService } from "services/user.service";
+import { sortArrayByDate, sortArrayByPriority } from "constants/kanban-helpers";
+
+export type IIssueType = "grouped" | "groupWithSubGroups" | "ungrouped";
+export type IIssueGroupedStructure = { [group_id: string]: IIssue[] };
+export type IIssueGroupWithSubGroupsStructure = {
+  [group_id: string]: {
+    [sub_group_id: string]: IIssue[];
+  };
+};
+export type IIssueUnGroupedStructure = IIssue[];
+
+export interface IProfileIssueStore {
+  loader: boolean;
+  error: any | null;
+  userId: string | null;
+  currentProfileTab: "assigned" | "created" | "subscribed" | null;
+  issues: {
+    [workspace_slug: string]: {
+      [user_id: string]: {
+        grouped: IIssueGroupedStructure;
+        groupWithSubGroups: IIssueGroupWithSubGroupsStructure;
+        ungrouped: IIssueUnGroupedStructure;
+      };
+    };
+  };
+  // computed
+  getIssueType: IIssueType | null;
+  getIssues: IIssueGroupedStructure | IIssueGroupWithSubGroupsStructure | IIssueUnGroupedStructure | null;
+  // action
+  fetchIssues: (workspaceSlug: string, userId: string, type: "assigned" | "created" | "subscribed") => Promise<any>;
+  updateIssueStructure: (group_id: string | null, sub_group_id: string | null, issue: IIssue) => void;
+}
+
+export class ProfileIssueStore implements IProfileIssueStore {
+  loader: boolean = true;
+  error: any | null = null;
+  userId: string | null = null;
+  currentProfileTab: "assigned" | "created" | "subscribed" | null = null;
+  issues: {
+    [workspace_slug: string]: {
+      [user_id: string]: {
+        grouped: {
+          [group_id: string]: IIssue[];
+        };
+        groupWithSubGroups: {
+          [group_id: string]: {
+            [sub_group_id: string]: IIssue[];
+          };
+        };
+        ungrouped: IIssue[];
+      };
+    };
+  } = {};
+  // service
+  userService;
+  rootStore;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // observable
+      loader: observable.ref,
+      error: observable.ref,
+      currentProfileTab: observable.ref,
+      userId: observable.ref,
+      issues: observable.ref,
+      // computed
+      getIssueType: computed,
+      getIssues: computed,
+      // actions
+      fetchIssues: action,
+      updateIssueStructure: action,
+    });
+    this.rootStore = _rootStore;
+    this.userService = new UserService();
+  }
+
+  get getIssueType() {
+    const groupedLayouts = ["kanban", "list", "calendar"];
+    const ungroupedLayouts = ["spreadsheet", "gantt_chart"];
+
+    const issueLayout = this.rootStore?.profileIssueFilters?.userDisplayFilters?.layout || null;
+    const issueGroup = this.rootStore?.profileIssueFilters?.userDisplayFilters?.group_by || null;
+    const issueSubGroup = this.rootStore?.profileIssueFilters?.userDisplayFilters?.sub_group_by || null;
+    if (!issueLayout) return null;
+
+    const _issueState = groupedLayouts.includes(issueLayout)
+      ? issueGroup
+        ? issueSubGroup
+          ? "groupWithSubGroups"
+          : "grouped"
+        : "ungrouped"
+      : ungroupedLayouts.includes(issueLayout)
+      ? "ungrouped"
+      : null;
+
+    return _issueState || null;
+  }
+
+  get getIssues() {
+    const workspaceSlug: string | null = this.rootStore?.workspace?.workspaceSlug;
+    const userId: string | null = this.userId;
+    const issueType = this.getIssueType;
+    if (!workspaceSlug || !userId || !issueType) return null;
+
+    return this.issues?.[workspaceSlug]?.[userId]?.[issueType] || null;
+  }
+
+  updateIssueStructure = async (group_id: string | null, sub_group_id: string | null, issue: IIssue) => {
+    const workspaceSlug: string | null = this.rootStore?.workspace?.workspaceSlug;
+    const userId: string | null = this.userId;
+
+    const issueType = this.getIssueType;
+    if (!workspaceSlug || !userId || !issueType) return null;
+
+    let issues: IIssueGroupedStructure | IIssueGroupWithSubGroupsStructure | IIssueUnGroupedStructure | null =
+      this.getIssues;
+    if (!issues) return null;
+
+    if (issueType === "grouped" && group_id) {
+      issues = issues as IIssueGroupedStructure;
+      issues = {
+        ...issues,
+        [group_id]: issues[group_id].map((i: IIssue) => (i?.id === issue?.id ? { ...i, ...issue } : i)),
+      };
+    }
+
+    if (issueType === "groupWithSubGroups" && group_id && sub_group_id) {
+      issues = issues as IIssueGroupWithSubGroupsStructure;
+      issues = {
+        ...issues,
+        [sub_group_id]: {
+          ...issues[sub_group_id],
+          [group_id]: issues[sub_group_id][group_id].map((i: IIssue) => (i?.id === issue?.id ? { ...i, ...issue } : i)),
+        },
+      };
+    }
+    if (issueType === "ungrouped") {
+      issues = issues as IIssueUnGroupedStructure;
+      issues = issues.map((i: IIssue) => (i?.id === issue?.id ? { ...i, ...issue } : i));
+    }
+
+    const orderBy = this.rootStore?.profileIssueFilters?.userDisplayFilters?.order_by || "";
+    if (orderBy === "-created_at") {
+      issues = sortArrayByDate(issues as any, "created_at");
+    }
+    if (orderBy === "-updated_at") {
+      issues = sortArrayByDate(issues as any, "updated_at");
+    }
+    if (orderBy === "start_date") {
+      issues = sortArrayByDate(issues as any, "updated_at");
+    }
+    if (orderBy === "priority") {
+      issues = sortArrayByPriority(issues as any, "priority");
+    }
+
+    runInAction(() => {
+      this.issues = {
+        ...this.issues,
+        [workspaceSlug]: {
+          ...this.issues?.[workspaceSlug],
+          [userId]: {
+            ...this.issues?.[workspaceSlug]?.[userId],
+            [issueType]: issues,
+          },
+        },
+      };
+    });
+  };
+
+  fetchIssues = async (
+    workspaceSlug: string,
+    userId: string,
+    type: "assigned" | "created" | "subscribed" = "assigned"
+  ) => {
+    try {
+      this.loader = true;
+      this.error = null;
+
+      this.currentProfileTab = type;
+      this.userId = userId;
+
+      const issueType = this.getIssueType;
+
+      let params: any = this.rootStore?.profileIssueFilters?.appliedFilters;
+      params = {
+        ...params,
+        assignees: undefined,
+        created_by: undefined,
+        subscriber: undefined,
+      };
+      if (type === "assigned") params = params ? { ...params, assignees: userId } : { assignees: userId };
+      else if (type === "created") params = params ? { ...params, created_by: userId } : { created_by: userId };
+      else if (type === "subscribed") params = params ? { ...params, subscriber: userId } : { subscriber: userId };
+
+      const issueResponse = await this.userService.getUserProfileIssues(workspaceSlug, userId, params);
+
+      if (issueType != null) {
+        const _issues = {
+          ...this.issues,
+          [workspaceSlug]: {
+            ...this.issues?.[workspaceSlug],
+            [userId]: {
+              ...this.issues?.[workspaceSlug]?.[userId],
+              [issueType]: issueResponse,
+            },
+          },
+        };
+
+        runInAction(() => {
+          this.issues = _issues;
+          this.loader = false;
+          this.error = null;
+        });
+      }
+
+      return issueResponse;
+    } catch (error) {
+      console.error("Error: Fetching error in issues", error);
+      this.loader = false;
+      this.error = error;
+      return error;
+    }
+  };
+}

web/store/profile-issues/issue_filters.store.ts

@@ -0,0 +1,137 @@
+import { observable, computed, makeObservable, action, autorun, runInAction } from "mobx";
+// helpers
+import { handleIssueQueryParamsByLayout } from "helpers/issue.helper";
+// types
+import { RootStore } from "../root";
+import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TIssueParams } from "types";
+
+export interface IProfileIssueFilterStore {
+  userDisplayProperties: IIssueDisplayProperties;
+  userDisplayFilters: IIssueDisplayFilterOptions;
+  userFilters: IIssueFilterOptions;
+  // computed
+  appliedFilters: TIssueParams[] | null;
+  // action
+  handleIssueFilters: (type: "userFilters" | "userDisplayFilters" | "userDisplayProperties", params: any) => void;
+}
+
+export class ProfileIssueFilterStore implements IProfileIssueFilterStore {
+  // observables
+  userFilters: IIssueFilterOptions = {
+    priority: null,
+    state_group: null,
+    labels: null,
+    start_date: null,
+    target_date: null,
+  };
+  userDisplayFilters: IIssueDisplayFilterOptions = {
+    group_by: null,
+    order_by: "sort_order",
+    show_empty_groups: true,
+    type: null,
+    layout: "list",
+  };
+  userDisplayProperties: any = {
+    assignee: true,
+    start_date: true,
+    due_date: true,
+    labels: true,
+    key: true,
+    priority: true,
+    state: true,
+    sub_issue_count: true,
+    link: true,
+    attachment_count: true,
+    estimate: true,
+    created_on: true,
+    updated_on: true,
+  };
+  // root store
+  rootStore;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // observables
+      userFilters: observable.ref,
+      userDisplayFilters: observable.ref,
+      userDisplayProperties: observable.ref,
+      // computed
+      appliedFilters: computed,
+      // actions
+      handleIssueFilters: action,
+    });
+
+    this.rootStore = _rootStore;
+
+    autorun(() => {
+      if (this.userFilters || this.userDisplayFilters || this.userDisplayProperties) {
+        const workspaceSlug = this.rootStore.workspace.workspaceSlug;
+        const userId = this.rootStore.profileIssues?.userId;
+        if (workspaceSlug && userId && this.rootStore.profileIssues.currentProfileTab) {
+          console.log("autorun triggered");
+          this.rootStore.profileIssues.fetchIssues(
+            workspaceSlug,
+            userId,
+            this.rootStore.profileIssues.currentProfileTab
+          );
+        }
+      }
+    });
+  }
+
+  computedFilter = (filters: any, filteredParams: any) => {
+    const computedFilters: any = {};
+    Object.keys(filters).map((key) => {
+      if (filters[key] != undefined && filteredParams.includes(key))
+        computedFilters[key] =
+          typeof filters[key] === "string" || typeof filters[key] === "boolean" ? filters[key] : filters[key].join(",");
+    });
+
+    return computedFilters;
+  };
+
+  get appliedFilters(): TIssueParams[] | null {
+    if (!this.userFilters || !this.userDisplayFilters) return null;
+
+    let filteredRouteParams: any = {
+      priority: this.userFilters?.priority || undefined,
+      state_group: this.userFilters?.state_group || undefined,
+      labels: this.userFilters?.labels || undefined,
+      start_date: this.userFilters?.start_date || undefined,
+      target_date: this.userFilters?.target_date || undefined,
+      group_by: this.userDisplayFilters?.group_by || undefined,
+      order_by: this.userDisplayFilters?.order_by || "-created_at",
+      show_empty_groups: this.userDisplayFilters?.show_empty_groups || true,
+      type: this.userDisplayFilters?.type || undefined,
+      assignees: undefined,
+      created_by: undefined,
+      subscriber: undefined,
+    };
+
+    const filteredParams = handleIssueQueryParamsByLayout(this.userDisplayFilters.layout, "profile_issues");
+    if (filteredParams) filteredRouteParams = this.computedFilter(filteredRouteParams, filteredParams);
+
+    return filteredRouteParams;
+  }
+
+  handleIssueFilters = (type: "userFilters" | "userDisplayFilters" | "userDisplayProperties", params: any) => {
+    if (type === "userFilters") {
+      const updatedFilters = { ...this.userFilters, ...params };
+      runInAction(() => {
+        this.userFilters = updatedFilters;
+      });
+    }
+    if (type === "userDisplayFilters") {
+      const updatedFilters = { ...this.userDisplayFilters, ...params };
+      runInAction(() => {
+        this.userDisplayFilters = updatedFilters;
+      });
+    }
+    if (type === "userDisplayProperties") {
+      const updatedFilters = { ...this.userDisplayProperties, ...params };
+      runInAction(() => {
+        this.userDisplayProperties = updatedFilters;
+      });
+    }
+  };
+}

web/store/project/project.store.ts

@@ -31,6 +31,7 @@ export interface IProjectStore {
 
   // computed
   searchedProjects: IProject[];
+  workspaceProjects: IProject[];
   projectStatesByGroups: IStateResponse | null;
   projectStates: IState[] | null;
   projectLabels: IIssueLabels[] | null;
@@ -119,6 +120,7 @@ export class ProjectStore implements IProjectStore {
 
       // computed
       searchedProjects: computed,
+      workspaceProjects: computed,
       projectStatesByGroups: computed,
       projectStates: computed,
       projectLabels: computed,
@@ -176,6 +178,11 @@ export class ProjectStore implements IProjectStore {
         );
   }
 
+  get workspaceProjects() {
+    if (!this.rootStore.workspace.workspaceSlug) return [];
+    return this.projects?.[this.rootStore.workspace.workspaceSlug];
+  }
+
   get joinedProjects() {
     if (!this.rootStore.workspace.workspaceSlug) return [];
     return this.projects?.[this.rootStore.workspace.workspaceSlug]?.filter((p) => p.is_member);

web/store/root.ts

@@ -1,4 +1,3 @@
-// mobx lite
 import { enableStaticRendering } from "mobx-react-lite";
 // store imports
 import UserStore from "store/user.store";
@@ -53,6 +52,19 @@ import {
   IGlobalViewIssuesStore,
   IGlobalViewsStore,
 } from "store/global-view";
+import {
+  ProfileIssueStore,
+  IProfileIssueStore,
+  ProfileIssueFilterStore,
+  IProfileIssueFilterStore,
+} from "store/profile-issues";
+import {
+  ArchivedIssueStore,
+  IArchivedIssueStore,
+  ArchivedIssueFilterStore,
+  IArchivedIssueFilterStore,
+} from "store/archived-issues";
+import { DraftIssueStore, IDraftIssueStore, DraftIssueFilterStore, IDraftIssueFilterStore } from "store/draft-issues";
 import {
   IInboxFiltersStore,
   IInboxIssueDetailsStore,
@@ -102,6 +114,15 @@ export class RootStore {
   globalViewIssues: IGlobalViewIssuesStore;
   globalViewFilters: IGlobalViewFiltersStore;
 
+  profileIssues: IProfileIssueStore;
+  profileIssueFilters: IProfileIssueFilterStore;
+
+  archivedIssues: IArchivedIssueStore;
+  archivedIssueFilters: IArchivedIssueFilterStore;
+
+  draftIssues: IDraftIssueStore;
+  draftIssueFilters: IDraftIssueFilterStore;
+
   inbox: IInboxStore;
   inboxIssues: IInboxIssuesStore;
   inboxIssueDetails: IInboxIssueDetailsStore;
@@ -143,6 +164,15 @@ export class RootStore {
     this.globalViewIssues = new GlobalViewIssuesStore(this);
     this.globalViewFilters = new GlobalViewFiltersStore(this);
 
+    this.profileIssues = new ProfileIssueStore(this);
+    this.profileIssueFilters = new ProfileIssueFilterStore(this);
+
+    this.archivedIssues = new ArchivedIssueStore(this);
+    this.archivedIssueFilters = new ArchivedIssueFilterStore(this);
+
+    this.draftIssues = new DraftIssueStore(this);
+    this.draftIssueFilters = new DraftIssueFilterStore(this);
+
     this.inbox = new InboxStore(this);
     this.inboxIssues = new InboxIssuesStore(this);
     this.inboxIssueDetails = new InboxIssueDetailsStore(this);

yarn.lock

@@ -2835,7 +2835,7 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@18.2.0":
+"@types/react@*", "@types/react@18.0.15", "@types/react@18.0.28", "@types/react@18.2.0", "@types/react@^18.2.5":
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.0.tgz#15cda145354accfc09a18d2f2305f9fc099ada21"
   integrity sha512-0FLj93y5USLHdnhIhABk83rm8XEGA7kH3cr+YUlvxoUGp1xNt/DINUMvqPxLyOQMzLmZe8i4RTHbvb8MC7NmrA==
@@ -2844,33 +2844,6 @@
     "@types/scheduler" "*"
     csstype "^3.0.2"
 
-"@types/react@18.0.15":
-  version "18.0.15"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.15.tgz#d355644c26832dc27f3e6cbf0c4f4603fc4ab7fe"
-  integrity sha512-iz3BtLuIYH1uWdsv6wXYdhozhqj20oD4/Hk2DNXIn1kFsmp9x8d9QB6FnPhfkbhd2PgEONt9Q1x/ebkwjfFLow==
-  dependencies:
-    "@types/prop-types" "*"
-    "@types/scheduler" "*"
-    csstype "^3.0.2"
-
-"@types/react@18.0.28":
-  version "18.0.28"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.28.tgz#accaeb8b86f4908057ad629a26635fe641480065"
-  integrity sha512-RD0ivG1kEztNBdoAK7lekI9M+azSnitIn85h4iOiaLjaTrMjzslhaqCGaI4IyCJ1RljWiLCEu4jyrLLgqxBTew==
-  dependencies:
-    "@types/prop-types" "*"
-    "@types/scheduler" "*"
-    csstype "^3.0.2"
-
-"@types/react@^18.2.5":
-  version "18.2.28"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.28.tgz#86877465c0fcf751659a36c769ecedfcfacee332"
-  integrity sha512-ad4aa/RaaJS3hyGz0BGegdnSRXQBkd1CCYDCdNjBPg90UUpLgo+WlJqb9fMYUxtehmzF3PJaTWqRZjko6BRzBg==
-  dependencies:
-    "@types/prop-types" "*"
-    "@types/scheduler" "*"
-    csstype "^3.0.2"
-
 "@types/reactcss@*":
   version "1.2.6"
   resolved "https://registry.yarnpkg.com/@types/reactcss/-/reactcss-1.2.6.tgz#133c1e7e896f2726370d1d5a26bf06a30a038bcc"