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;
-    {issues && issues.length > 0 ? (
+
-      <>
+  return (
-        {issues.map((issue: any, index: any) => (
+    <>
+      {issues &&
+        issues?.length > 0 &&
+        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>
             )}
-            <div className="line-clamp-1 text-sm font-medium text-custom-text-100">{issue.name}</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,151 +16,159 @@ 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 });
-    };
 
-    const handlePriority = (id: string) => {
+  const handleState = (id: string) => {
-      if (handleIssues) handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, priority: id });
+    if (handleIssues) handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, state: id });
-    };
+  };
 
-    const handleLabel = (ids: string[]) => {
+  const handlePriority = (id: string) => {
-      if (handleIssues) handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, labels: ids });
+    if (handleIssues) handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, priority: id });
-    };
+  };
 
-    const handleAssignee = (ids: string[]) => {
+  const handleLabel = (ids: string[]) => {
-      if (handleIssues) handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, assignees: ids });
+    if (handleIssues) handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, labels: ids });
-    };
+  };
 
-    const handleStartDate = (date: string) => {
+  const handleAssignee = (ids: string[]) => {
-      if (handleIssues)
+    if (handleIssues) handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, assignees: ids });
-        handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, start_date: date });
+  };
-    };
 
-    const handleTargetDate = (date: string) => {
+  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, target_date: date });
+  };
-    };
 
-    const handleEstimate = (id: string) => {
+  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, estimate_point: id });
+  };
-    };
 
-    return (
+  const handleEstimate = (id: string) => {
-      <div className="relative flex gap-2 overflow-x-auto whitespace-nowrap">
+    if (handleIssues)
-        {/* basic properties */}
+      handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, estimate_point: id });
-        {/* state */}
+  };
-        {display_properties && display_properties?.state && (
-          <IssuePropertyState
-            value={issue?.state || null}
-            dropdownArrow={false}
-            onChange={(id: string) => handleState(id)}
-            disabled={false}
-          />
-        )}
 
-        {/* priority */}
+  return (
-        {display_properties && display_properties?.priority && (
+    <div className="relative flex gap-2 overflow-x-auto whitespace-nowrap">
-          <IssuePropertyPriority
+      {/* basic properties */}
-            value={issue?.priority || null}
+      {/* state */}
-            dropdownArrow={false}
+      {display_properties && display_properties?.state && states && (
-            onChange={(id: string) => handlePriority(id)}
+        <IssuePropertyState
-            disabled={false}
+          value={issue?.state || null}
-          />
+          dropdownArrow={false}
-        )}
+          onChange={(id: string) => handleState(id)}
+          disabled={false}
+          list={states}
+        />
+      )}
 
-        {/* label */}
+      {/* priority */}
-        {display_properties && display_properties?.labels && (
+      {display_properties && display_properties?.priority && priorities && (
-          <IssuePropertyLabels
+        <IssuePropertyPriority
-            value={issue?.labels || null}
+          value={issue?.priority || null}
-            dropdownArrow={false}
+          dropdownArrow={false}
-            onChange={(ids: string[]) => handleLabel(ids)}
+          onChange={(id: string) => handlePriority(id)}
-            disabled={false}
+          disabled={false}
-          />
+          list={priorities}
-        )}
+        />
+      )}
 
-        {/* assignee */}
+      {/* label */}
-        {display_properties && display_properties?.assignee && (
+      {display_properties && display_properties?.labels && labels && (
-          <IssuePropertyAssignee
+        <IssuePropertyLabels
-            value={issue?.assignees || null}
+          value={issue?.labels || null}
-            dropdownArrow={false}
+          dropdownArrow={false}
-            onChange={(ids: string[]) => handleAssignee(ids)}
+          onChange={(ids: string[]) => handleLabel(ids)}
-            disabled={false}
+          disabled={false}
-          />
+          list={labels}
-        )}
+        />
+      )}
 
-        {/* start date */}
+      {/* assignee */}
-        {display_properties && display_properties?.start_date && (
+      {display_properties && display_properties?.assignee && members && (
-          <IssuePropertyStartDate
+        <IssuePropertyAssignee
-            value={issue?.start_date || null}
+          value={issue?.assignees || null}
-            onChange={(date: string) => handleStartDate(date)}
+          dropdownArrow={false}
-            disabled={false}
+          onChange={(ids: string[]) => handleAssignee(ids)}
-          />
+          disabled={false}
-        )}
+          list={members}
+        />
+      )}
 
-        {/* target/due date */}
+      {/* start date */}
-        {display_properties && display_properties?.due_date && (
+      {display_properties && display_properties?.start_date && (
-          <IssuePropertyStartDate
+        <IssuePropertyDate
-            value={issue?.target_date || null}
+          value={issue?.start_date || null}
-            onChange={(date: string) => handleTargetDate(date)}
+          onChange={(date: string) => handleStartDate(date)}
-            disabled={false}
+          disabled={false}
-          />
+          placeHolder={`Start date`}
-        )}
+        />
+      )}
 
-        {/* estimates */}
+      {/* target/due date */}
-        {display_properties && display_properties?.estimate && (
+      {display_properties && display_properties?.due_date && (
-          <IssuePropertyEstimates
+        <IssuePropertyDate
-            value={issue?.estimate_point?.toString() || null}
+          value={issue?.target_date || null}
-            dropdownArrow={false}
+          onChange={(date: string) => handleTargetDate(date)}
-            onChange={(id: string) => handleEstimate(id)}
+          disabled={false}
-            disabled={false}
+          placeHolder={`Target date`}
-            workspaceSlug={issue?.workspace_detail?.slug || null}
+        />
-            projectId={issue?.project_detail?.id || null}
+      )}
-          />
-        )}
 
-        {/* extra render properties */}
+      {/* estimates */}
-        {/* sub-issues */}
+      {display_properties && display_properties?.estimate && (
-        {display_properties && display_properties?.sub_issue_count && (
+        <IssuePropertyEstimates
-          <Tooltip tooltipHeading="Sub-issue" tooltipContent={`${issue.sub_issues_count}`}>
+          value={issue?.estimate_point?.toString() || null}
-            <div className="flex-shrink-0 border border-custom-border-300 min-w-[22px] h-[22px] overflow-hidden rounded-sm flex justify-center items-center cursor-pointer">
+          dropdownArrow={false}
-              <div className="flex-shrink-0  w-[16px] h-[16px] flex justify-center items-center">
+          onChange={(id: string) => handleEstimate(id)}
-                <Layers width={10} strokeWidth={2} />
+          disabled={false}
-              </div>
+          workspaceSlug={issue?.workspace_detail?.slug || null}
-              <div className="pl-0.5 pr-1 text-xs">{issue.sub_issues_count}</div>
+          projectId={issue?.project_detail?.id || null}
+        />
+      )}
+
+      {/* extra render properties */}
+      {/* sub-issues */}
+      {display_properties && display_properties?.sub_issue_count && (
+        <Tooltip tooltipHeading="Sub-issue" tooltipContent={`${issue.sub_issues_count}`}>
+          <div className="flex-shrink-0 border border-custom-border-300 min-w-[22px] h-[22px] overflow-hidden rounded-sm flex justify-center items-center cursor-pointer">
+            <div className="flex-shrink-0  w-[16px] h-[16px] flex justify-center items-center">
+              <Layers width={10} strokeWidth={2} />
             </div>
-          </Tooltip>
+            <div className="pl-0.5 pr-1 text-xs">{issue.sub_issues_count}</div>
-        )}
+          </div>
+        </Tooltip>
+      )}
 
-        {/* attachments */}
+      {/* attachments */}
-        {display_properties && display_properties?.attachment_count && (
+      {display_properties && display_properties?.attachment_count && (
-          <Tooltip tooltipHeading="Attachments" tooltipContent={`${issue.attachment_count}`}>
+        <Tooltip tooltipHeading="Attachments" tooltipContent={`${issue.attachment_count}`}>
-            <div className="flex-shrink-0 border border-custom-border-300 min-w-[22px] h-[22px] overflow-hidden rounded-sm flex justify-center items-center cursor-pointer">
+          <div className="flex-shrink-0 border border-custom-border-300 min-w-[22px] h-[22px] overflow-hidden rounded-sm flex justify-center items-center cursor-pointer">
-              <div className="flex-shrink-0 w-[16px] h-[16px] flex justify-center items-center">
+            <div className="flex-shrink-0 w-[16px] h-[16px] flex justify-center items-center">
-                <Paperclip width={10} strokeWidth={2} />
+              <Paperclip width={10} strokeWidth={2} />
-              </div>
-              <div className="pl-0.5 pr-1 text-xs">{issue.attachment_count}</div>
             </div>
-          </Tooltip>
+            <div className="pl-0.5 pr-1 text-xs">{issue.attachment_count}</div>
-        )}
+          </div>
+        </Tooltip>
+      )}
 
-        {/* link */}
+      {/* link */}
-        {display_properties && display_properties?.link && (
+      {display_properties && display_properties?.link && (
-          <Tooltip tooltipHeading="Links" tooltipContent={`${issue.link_count}`}>
+        <Tooltip tooltipHeading="Links" tooltipContent={`${issue.link_count}`}>
-            <div className="flex-shrink-0 border border-custom-border-300 min-w-[22px] h-[22px] overflow-hidden rounded-sm flex justify-center items-center cursor-pointer">
+          <div className="flex-shrink-0 border border-custom-border-300 min-w-[22px] h-[22px] overflow-hidden rounded-sm flex justify-center items-center cursor-pointer">
-              <div className="flex-shrink-0  w-[16px] h-[16px] flex justify-center items-center">
+            <div className="flex-shrink-0  w-[16px] h-[16px] flex justify-center items-center">
-                <Link width={10} strokeWidth={2} />
+              <Link width={10} strokeWidth={2} />
-              </div>
-              <div className="pl-0.5 pr-1 text-xs">{issue.link_count}</div>
             </div>
-          </Tooltip>
+            <div className="pl-0.5 pr-1 text-xs">{issue.link_count}</div>
-        )}
+          </div>
-      </div>
+        </Tooltip>
-    );
+      )}
-  }
+    </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,237 +25,228 @@ 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 options: IFiltersOption[] | [] =
-    const [search, setSearch] = React.useState<string>("");
+    (list &&
+      list?.length > 0 &&
+      list.map((_member: any) => ({
+        id: _member?.member?.id,
+        title: _member?.member?.display_name,
+        avatar: _member?.member?.avatar && _member?.member?.avatar !== "" ? _member?.member?.avatar : null,
+      }))) ||
+    [];
 
-    const options: IFiltersOption[] | [] =
+  useDynamicDropdownPosition(isOpen, () => setIsOpen(false), dropdownBtn, dropdownOptions);
-      (projectStore?.projectMembers &&
-        projectStore?.projectMembers?.length > 0 &&
-        projectStore?.projectMembers.map((_member: any) => ({
-          id: _member?.member?.id,
-          title: _member?.member?.display_name,
-          avatar: _member?.member?.avatar && _member?.member?.avatar !== "" ? _member?.member?.avatar : null,
-        }))) ||
-      [];
 
-    useDynamicDropdownPosition(isOpen, () => setIsOpen(false), dropdownBtn, dropdownOptions);
+  const selectedOption: IFiltersOption[] =
+    (value && value?.length > 0 && options.filter((_member: IFiltersOption) => value.includes(_member.id))) || [];
 
-    const selectedOption: IFiltersOption[] =
+  const filteredOptions: IFiltersOption[] =
-      (value && value?.length > 0 && options.filter((_member: IFiltersOption) => value.includes(_member.id))) || [];
+    search === ""
+      ? options && options.length > 0
+        ? options
+        : []
+      : options && options.length > 0
+      ? options.filter((_member: IFiltersOption) =>
+          _member.title.toLowerCase().replace(/\s+/g, "").includes(search.toLowerCase().replace(/\s+/g, ""))
+        )
+      : [];
 
-    const filteredOptions: IFiltersOption[] =
+  const assigneeRenderLength = 5;
-      search === ""
-        ? options && options.length > 0
-          ? options
-          : []
-        : options && options.length > 0
-        ? options.filter((_member: IFiltersOption) =>
-            _member.title.toLowerCase().replace(/\s+/g, "").includes(search.toLowerCase().replace(/\s+/g, ""))
-          )
-        : [];
 
-    const assigneeRenderLength = 5;
+  return (
+    <Combobox
+      multiple={true}
+      as="div"
+      className={`${className}`}
+      value={selectedOption.map((_member: IFiltersOption) => _member.id) as string[]}
+      onChange={(data: string[]) => {
+        if (onChange && selectedOption) onChange(data, selectedOption);
+      }}
+      disabled={disabled}
+    >
+      {({ open }: { open: boolean }) => {
+        if (open) {
+          if (!isOpen) setIsOpen(true);
+        } else if (isOpen) setIsOpen(false);
 
-    return (
+        return (
-      <Combobox
+          <>
-        multiple={true}
+            <Combobox.Button
-        as="div"
+              ref={dropdownBtn}
-        className={`${className}`}
+              type="button"
-        value={selectedOption.map((_member: IFiltersOption) => _member.id) as string[]}
+              className={`flex items-center justify-between gap-1 px-1 py-0.5 rounded-sm shadow-sm border border-custom-border-300 duration-300 outline-none ${
-        onChange={(data: string[]) => {
+                disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
-          if (onChange && selectedOption) onChange(data, selectedOption);
+              } ${buttonClassName}`}
-        }}
+            >
-        disabled={disabled}
+              {selectedOption && selectedOption?.length > 0 ? (
-      >
+                <>
-        {({ open }: { open: boolean }) => {
+                  {selectedOption?.length > 1 ? (
-          if (open) {
+                    <Tooltip
-            if (!isOpen) setIsOpen(true);
+                      tooltipHeading={`Assignees`}
-          } else if (isOpen) setIsOpen(false);
+                      tooltipContent={(selectedOption.map((_label: IFiltersOption) => _label.title) || []).join(", ")}
-
+                    >
-          return (
+                      <div className="flex-shrink-0 flex justify-center items-center gap-1 pr-[8px]">
-            <>
+                        {selectedOption.slice(0, assigneeRenderLength).map((_assignee) => (
-              <Combobox.Button
+                          <div
-                ref={dropdownBtn}
+                            key={_assignee?.id}
-                type="button"
+                            className="flex-shrink-0 w-[16px] h-[16px] rounded-sm bg-gray-700 flex justify-center items-center text-white capitalize relative -mr-[8px] text-xs overflow-hidden border border-custom-border-300"
-                className={`flex items-center justify-between gap-1 px-1 py-0.5 rounded-sm shadow-sm border border-custom-border-300 duration-300 outline-none ${
+                          >
-                  disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
+                            {_assignee && _assignee.avatar ? (
-                } ${buttonClassName}`}
+                              <img
-              >
+                                src={_assignee.avatar}
-                {selectedOption && selectedOption?.length > 0 ? (
+                                className="absolute top-0 left-0 h-full w-full object-cover"
-                  <>
+                                alt={_assignee.title}
-                    {selectedOption?.length > 1 ? (
+                              />
-                      <Tooltip
+                            ) : (
-                        tooltipHeading={`Assignees`}
+                              _assignee.title[0]
-                        tooltipContent={(selectedOption.map((_label: IFiltersOption) => _label.title) || []).join(", ")}
+                            )}
-                      >
+                          </div>
-                        <div className="flex-shrink-0 flex justify-center items-center gap-1 pr-[8px]">
+                        ))}
-                          {selectedOption.slice(0, assigneeRenderLength).map((_assignee) => (
+                        {selectedOption.length > assigneeRenderLength && (
-                            <div
+                          <div className="flex-shrink-0 h-[16px] px-0.5 rounded-sm bg-gray-700 flex justify-center items-center text-white capitalize relative -mr-[8px] text-xs overflow-hidden border border-custom-border-300">
-                              key={_assignee?.id}
+                            +{selectedOption?.length - assigneeRenderLength}
-                              className="flex-shrink-0 w-[16px] h-[16px] rounded-sm bg-gray-700 flex justify-center items-center text-white capitalize relative -mr-[8px] text-xs overflow-hidden border border-custom-border-300"
+                          </div>
-                            >
+                        )}
-                              {_assignee && _assignee.avatar ? (
+                      </div>
-                                <img
+                    </Tooltip>
-                                  src={_assignee.avatar}
+                  ) : (
-                                  className="absolute top-0 left-0 h-full w-full object-cover"
+                    <Tooltip
-                                  alt={_assignee.title}
+                      tooltipHeading={`Assignees`}
-                                />
+                      tooltipContent={(selectedOption.map((_label: IFiltersOption) => _label.title) || []).join(", ")}
-                              ) : (
+                    >
-                                _assignee.title[0]
+                      <div className="flex-shrink-0 flex justify-center items-center gap-1 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">
-                            </div>
+                          {selectedOption[0] && selectedOption[0].avatar ? (
-                          ))}
+                            <img
-                          {selectedOption.length > assigneeRenderLength && (
+                              src={selectedOption[0].avatar}
-                            <div className="flex-shrink-0 h-[16px] px-0.5 rounded-sm bg-gray-700 flex justify-center items-center text-white capitalize relative -mr-[8px] text-xs overflow-hidden border border-custom-border-300">
+                              className="absolute top-0 left-0 h-full w-full object-cover"
-                              +{selectedOption?.length - assigneeRenderLength}
+                              alt={selectedOption[0].title}
+                            />
+                          ) : (
+                            <div className="w-full h-full bg-gray-700 flex justify-center items-center">
+                              {selectedOption[0].title[0]}
                             </div>
                           )}
                         </div>
-                      </Tooltip>
+                        <div className="line-clamp-1">{selectedOption[0].title}</div>
-                    ) : (
+                      </div>
-                      <Tooltip
+                    </Tooltip>
-                        tooltipHeading={`Assignees`}
+                  )}
-                        tooltipContent={(selectedOption.map((_label: IFiltersOption) => _label.title) || []).join(", ")}
+                </>
-                      >
+              ) : (
-                        <div className="flex-shrink-0 flex justify-center items-center gap-1 text-xs">
+                <Tooltip tooltipHeading={`Assignees`} tooltipContent={``}>
-                          <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="text-xs">Select Assignees</div>
-                            {selectedOption[0] && selectedOption[0].avatar ? (
+                </Tooltip>
-                              <img
+              )}
-                                src={selectedOption[0].avatar}
-                                className="absolute top-0 left-0 h-full w-full object-cover"
-                                alt={selectedOption[0].title}
-                              />
-                            ) : (
-                              <div className="w-full h-full bg-gray-700 flex justify-center items-center">
-                                {selectedOption[0].title[0]}
-                              </div>
-                            )}
-                          </div>
-                          <div className="line-clamp-1">{selectedOption[0].title}</div>
-                        </div>
-                      </Tooltip>
-                    )}
-                  </>
-                ) : (
-                  <div className="text-xs">Select option</div>
-                )}
 
-                {dropdownArrow && !disabled && (
+              {dropdownArrow && !disabled && (
-                  <div className="flex-shrink-0 w-[14px] h-[14px] flex justify-center items-center">
+                <div className="flex-shrink-0 w-[14px] h-[14px] flex justify-center items-center">
-                    <ChevronDown width={14} strokeWidth={2} />
+                  <ChevronDown width={14} strokeWidth={2} />
-                  </div>
+                </div>
-                )}
+              )}
-              </Combobox.Button>
+            </Combobox.Button>
 
-              <div className={`${open ? "fixed z-20 top-0 left-0 h-full w-full cursor-auto" : ""}`}>
+            <div className={`${open ? "fixed z-20 top-0 left-0 h-full w-full cursor-auto" : ""}`}>
-                <Combobox.Options
+              <Combobox.Options
-                  ref={dropdownOptions}
+                ref={dropdownOptions}
-                  className={`absolute z-10 border border-custom-border-300 p-2 rounded bg-custom-background-100 text-xs shadow-lg focus:outline-none whitespace-nowrap mt-1 space-y-1 ${optionsClassName}`}
+                className={`absolute z-10 border border-custom-border-300 p-2 rounded bg-custom-background-100 text-xs shadow-lg focus:outline-none whitespace-nowrap mt-1 space-y-1 ${optionsClassName}`}
-                >
+              >
-                  {options && options.length > 0 ? (
+                {options && options.length > 0 ? (
-                    <>
+                  <>
-                      <div className="flex w-full items-center justify-start rounded border border-custom-border-200 bg-custom-background-90 px-1">
+                    <div className="flex w-full items-center justify-start rounded border border-custom-border-200 bg-custom-background-90 px-1">
-                        <div className="flex-shrink-0 flex justify-center items-center w-[16px] h-[16px] rounded-sm">
+                      <div className="flex-shrink-0 flex justify-center items-center w-[16px] h-[16px] rounded-sm">
-                          <Search width={12} strokeWidth={2} />
+                        <Search width={12} strokeWidth={2} />
-                        </div>
-
-                        <div>
-                          <Combobox.Input
-                            className="w-full bg-transparent p-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
-                            value={search}
-                            onChange={(e) => setSearch(e.target.value)}
-                            placeholder="Search"
-                            displayValue={(assigned: any) => assigned?.name}
-                          />
-                        </div>
-
-                        {search && search.length > 0 && (
-                          <div
-                            onClick={() => setSearch("")}
-                            className="flex-shrink-0 flex justify-center items-center w-[16px] h-[16px] rounded-sm cursor-pointer hover:bg-custom-background-80"
-                          >
-                            <X width={12} strokeWidth={2} />
-                          </div>
-                        )}
                       </div>
 
-                      <div className={`space-y-0.5 max-h-48 overflow-y-scroll`}>
+                      <div>
-                        {filteredOptions ? (
+                        <Combobox.Input
-                          filteredOptions.length > 0 ? (
+                          className="w-full bg-transparent p-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
-                            filteredOptions.map((option) => (
+                          value={search}
-                              <Combobox.Option
+                          onChange={(e) => setSearch(e.target.value)}
-                                key={option.id}
+                          placeholder="Search"
-                                value={option.id}
+                          displayValue={(assigned: any) => assigned?.name}
-                                className={({ active }) =>
+                        />
-                                  `cursor-pointer select-none truncate rounded px-1 py-1.5 ${
+                      </div>
-                                    active || (value && value.length > 0 && value.includes(option?.id))
+
-                                      ? "bg-custom-background-80"
+                      {search && search.length > 0 && (
-                                      : ""
+                        <div
-                                  } ${
+                          onClick={() => setSearch("")}
-                                    value && value.length > 0 && value.includes(option?.id)
+                          className="flex-shrink-0 flex justify-center items-center w-[16px] h-[16px] rounded-sm cursor-pointer hover:bg-custom-background-80"
-                                      ? "text-custom-text-100"
+                        >
-                                      : "text-custom-text-200"
+                          <X width={12} strokeWidth={2} />
-                                  }`
+                        </div>
-                                }
+                      )}
-                              >
+                    </div>
-                                <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={`space-y-0.5 max-h-48 overflow-y-scroll`}>
-                                    {option && option.avatar ? (
+                      {filteredOptions ? (
-                                      <img
+                        filteredOptions.length > 0 ? (
-                                        src={option.avatar}
+                          filteredOptions.map((option) => (
-                                        className="absolute top-0 left-0 h-full w-full object-cover"
+                            <Combobox.Option
-                                        alt={option.title}
+                              key={option.id}
-                                      />
+                              value={option.id}
-                                    ) : (
+                              className={({ active }) =>
-                                      <div className="w-full h-full bg-gray-700 flex justify-center items-center">
+                                `cursor-pointer select-none truncate rounded px-1 py-1.5 ${
-                                        {option.title[0]}
+                                  active || (value && value.length > 0 && value.includes(option?.id))
-                                      </div>
+                                    ? "bg-custom-background-80"
-                                    )}
+                                    : ""
-                                  </div>
+                                } ${
-                                  <div className="line-clamp-1">{option.title}</div>
+                                  value && value.length > 0 && value.includes(option?.id)
-                                  {value && value.length > 0 && value.includes(option?.id) && (
+                                    ? "text-custom-text-100"
-                                    <div className="flex-shrink-0 ml-auto w-[13px] h-[13px] flex justify-center items-center">
+                                    : "text-custom-text-200"
-                                      <Check width={13} strokeWidth={2} />
+                                }`
+                              }
+                            >
+                              <div className="flex items-center gap-1 w-full px-1">
+                                <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}
+                                      className="absolute top-0 left-0 h-full w-full object-cover"
+                                      alt={option.title}
+                                    />
+                                  ) : (
+                                    <div className="w-full h-full bg-gray-700 flex justify-center items-center">
+                                      {option.title[0]}
                                     </div>
                                   )}
                                 </div>
-                              </Combobox.Option>
+                                <div className="line-clamp-1">{option.title}</div>
-                            ))
+                                {value && value.length > 0 && value.includes(option?.id) && (
-                          ) : (
+                                  <div className="flex-shrink-0 ml-auto w-[13px] h-[13px] flex justify-center items-center">
-                            <span className="flex items-center gap-2 p-1">
+                                    <Check width={13} strokeWidth={2} />
-                              <p className="text-left text-custom-text-200 ">No matching results</p>
+                                  </div>
-                            </span>
+                                )}
-                          )
+                              </div>
+                            </Combobox.Option>
+                          ))
                         ) : (
-                          <p className="text-center text-custom-text-200">Loading...</p>
+                          <span className="flex items-center gap-2 p-1">
-                        )}
+                            <p className="text-left text-custom-text-200 ">No matching results</p>
-                      </div>
+                          </span>
-                    </>
+                        )
-                  ) : (
+                      ) : (
-                    <p className="text-center text-custom-text-200">No options available.</p>
+                        <p className="text-center text-custom-text-200">Loading...</p>
-                  )}
+                      )}
-                </Combobox.Options>
+                    </div>
-              </div>
+                  </>
-            </>
+                ) : (
-          );
+                  <p className="text-center text-custom-text-200">No options available.</p>
-        }}
+                )}
-      </Combobox>
+              </Combobox.Options>
-    );
+            </div>
-  }
+          </>
-);
+        );
+      }}
+    </Combobox>
+  );
+});

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

@@ -14,83 +14,86 @@ 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(
-  const dropdownBtn = React.useRef<any>(null);
+  ({ value, onChange, disabled, placeHolder }) => {
-  const dropdownOptions = React.useRef<any>(null);
+    const dropdownBtn = React.useRef<any>(null);
+    const dropdownOptions = React.useRef<any>(null);
 
-  const [isOpen, setIsOpen] = React.useState<boolean>(false);
+    const [isOpen, setIsOpen] = React.useState<boolean>(false);
 
-  useDynamicDropdownPosition(isOpen, () => setIsOpen(false), dropdownBtn, dropdownOptions);
+    useDynamicDropdownPosition(isOpen, () => setIsOpen(false), dropdownBtn, dropdownOptions);
 
-  return (
+    return (
-    <Popover as="div" className="relative">
+      <Popover as="div" className="relative">
-      {({ open }) => {
+        {({ open }) => {
-        if (open) {
+          if (open) {
-          if (!isOpen) setIsOpen(true);
+            if (!isOpen) setIsOpen(true);
-        } else if (isOpen) setIsOpen(false);
+          } else if (isOpen) setIsOpen(false);
 
-        return (
+          return (
-          <>
+            <>
-            <Popover.Button
+              <Popover.Button
-              ref={dropdownBtn}
+                ref={dropdownBtn}
-              className={`flex items-center justify-between gap-1 px-1 py-0.5 rounded-sm shadow-sm border border-custom-border-300 duration-300 outline-none ${
+                className={`flex items-center justify-between gap-1 px-1 py-0.5 rounded-sm shadow-sm border border-custom-border-300 duration-300 outline-none ${
-                disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
+                  disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
-              }`}
+                }`}
-            >
-              <Tooltip tooltipHeading={`Start 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} />
-                  </div>
-                  {value ? (
-                    <>
-                      <div className="px-1 text-xs">{value}</div>
-                      <div
-                        className="flex-shrink-0 w-[16px] h-[16px] flex justify-center items-center cursor-pointer"
-                        onClick={() => {
-                          if (onChange) onChange(null);
-                        }}
-                      >
-                        <X width={10} strokeWidth={2} />
-                      </div>
-                    </>
-                  ) : (
-                    <div className="text-xs">Select date</div>
-                  )}
-                </div>
-              </Tooltip>
-            </Popover.Button>
-
-            <div className={`${open ? "fixed z-20 top-0 left-0 h-full w-full cursor-auto" : ""}`}>
-              <Popover.Panel
-                ref={dropdownOptions}
-                className={`absolute z-10 rounded bg-custom-background-100 text-xs shadow-lg focus:outline-none whitespace-nowrap mt-1`}
               >
-                {({ close }) => (
+                <Tooltip tooltipHeading={placeHolder ? placeHolder : `Select date`} tooltipContent={value}>
-                  <DatePicker
+                  <div className="flex-shrink-0 overflow-hidden rounded-sm flex justify-center items-center">
-                    selected={value ? new Date(value) : new Date()}
+                    <div className="flex-shrink-0 w-[16px] h-[16px] flex justify-center items-center">
-                    onChange={(val: any) => {
+                      <Calendar width={10} strokeWidth={2} />
-                      if (onChange && val) {
+                    </div>
-                        onChange(renderDateFormat(val));
+                    {value ? (
-                        close();
+                      <>
-                      }
+                        <div className="px-1 text-xs">{value}</div>
-                    }}
+                        <div
-                    dateFormat="dd-MM-yyyy"
+                          className="flex-shrink-0 w-[16px] h-[16px] flex justify-center items-center cursor-pointer"
-                    calendarClassName="h-full"
+                          onClick={() => {
-                    inline
+                            if (onChange) onChange(null);
-                  />
+                          }}
-                )}
+                        >
-              </Popover.Panel>
+                          <X width={10} strokeWidth={2} />
-            </div>
+                        </div>
-          </>
+                      </>
-        );
+                    ) : (
-      }}
+                      <div className="text-xs">{placeHolder ? placeHolder : `Select date`}</div>
-    </Popover>
+                    )}
-  );
+                  </div>
-});
+                </Tooltip>
+              </Popover.Button>
+
+              <div className={`${open ? "fixed z-20 top-0 left-0 h-full w-full cursor-auto" : ""}`}>
+                <Popover.Panel
+                  ref={dropdownOptions}
+                  className={`absolute z-10 rounded bg-custom-background-100 text-xs shadow-lg focus:outline-none whitespace-nowrap mt-1`}
+                >
+                  {({ close }) => (
+                    <DatePicker
+                      selected={value ? new Date(value) : new Date()}
+                      onChange={(val: any) => {
+                        if (onChange && val) {
+                          onChange(renderDateFormat(val));
+                          close();
+                        }
+                      }}
+                      dateFormat="dd-MM-yyyy"
+                      calendarClassName="h-full"
+                      inline
+                    />
+                  )}
+                </Popover.Panel>
+              </div>
+            </>
+          );
+        }}
+      </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,205 +25,206 @@ 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[] | [] =
+  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,
+        id: _label?.id,
-          title: _label?.name,
+        title: _label?.name,
-          color: _label?.color || null,
+        color: _label?.color || null,
-        }))) ||
+      }))) ||
-      [];
+    [];
 
-    useDynamicDropdownPosition(isOpen, () => setIsOpen(false), dropdownBtn, dropdownOptions);
+  useDynamicDropdownPosition(isOpen, () => setIsOpen(false), dropdownBtn, dropdownOptions);
 
-    const selectedOption: IFiltersOption[] =
+  const selectedOption: IFiltersOption[] =
-      (value && value?.length > 0 && options.filter((_label: IFiltersOption) => value.includes(_label.id))) || [];
+    (value && value?.length > 0 && options.filter((_label: IFiltersOption) => value.includes(_label.id))) || [];
 
-    const filteredOptions: IFiltersOption[] =
+  const filteredOptions: IFiltersOption[] =
-      search === ""
+    search === ""
-        ? options && options.length > 0
+      ? options && options.length > 0
-          ? options
+        ? options
-          : []
+        : []
-        : options && options.length > 0
+      : options && options.length > 0
-        ? options.filter((_label: IFiltersOption) =>
+      ? options.filter((_label: IFiltersOption) =>
-            _label.title.toLowerCase().replace(/\s+/g, "").includes(search.toLowerCase().replace(/\s+/g, ""))
+          _label.title.toLowerCase().replace(/\s+/g, "").includes(search.toLowerCase().replace(/\s+/g, ""))
-          )
+        )
-        : [];
+      : [];
 
-    return (
+  return (
-      <Combobox
+    <Combobox
-        multiple={true}
+      multiple={true}
-        as="div"
+      as="div"
-        className={`${className}`}
+      className={`${className}`}
-        value={selectedOption.map((_label: IFiltersOption) => _label.id) as string[]}
+      value={selectedOption.map((_label: IFiltersOption) => _label.id) as string[]}
-        onChange={(data: string[]) => {
+      onChange={(data: string[]) => {
-          if (onChange && selectedOption) onChange(data, selectedOption);
+        if (onChange && selectedOption) onChange(data, selectedOption);
-        }}
+      }}
-        disabled={disabled}
+      disabled={disabled}
-      >
+    >
-        {({ open }: { open: boolean }) => {
+      {({ open }: { open: boolean }) => {
-          if (open) {
+        if (open) {
-            if (!isOpen) setIsOpen(true);
+          if (!isOpen) setIsOpen(true);
-          } else if (isOpen) setIsOpen(false);
+        } else if (isOpen) setIsOpen(false);
 
-          return (
+        return (
-            <>
+          <>
-              <Combobox.Button
+            <Combobox.Button
-                ref={dropdownBtn}
+              ref={dropdownBtn}
-                type="button"
+              type="button"
-                className={`flex items-center justify-between gap-1 px-1 py-0.5 rounded-sm shadow-sm border border-custom-border-300 duration-300 outline-none ${
+              className={`flex items-center justify-between gap-1 px-1 py-0.5 rounded-sm shadow-sm border border-custom-border-300 duration-300 outline-none ${
-                  disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
+                disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
-                } ${buttonClassName}`}
+              } ${buttonClassName}`}
+            >
+              {selectedOption && selectedOption?.length > 0 ? (
+                <>
+                  {selectedOption?.length === 1 ? (
+                    <Tooltip
+                      tooltipHeading={`Labels`}
+                      tooltipContent={(selectedOption.map((_label: IFiltersOption) => _label.title) || []).join(", ")}
+                    >
+                      <div className="flex-shrink-0 flex justify-center items-center gap-1">
+                        <div
+                          className="flex-shrink-0 w-[10px] h-[10px] rounded-full"
+                          style={{
+                            backgroundColor: selectedOption[0]?.color || "#444",
+                          }}
+                        />
+                        <div className="pl-0.5 pr-1 text-xs">{selectedOption[0]?.title}</div>
+                      </div>
+                    </Tooltip>
+                  ) : (
+                    <Tooltip
+                      tooltipHeading={`Labels`}
+                      tooltipContent={(selectedOption.map((_label: IFiltersOption) => _label.title) || []).join(", ")}
+                    >
+                      <div className="flex-shrink-0 flex justify-center items-center gap-1">
+                        <div
+                          className="flex-shrink-0 w-[10px] h-[10px] rounded-full"
+                          style={{ backgroundColor: "#444" }}
+                        />
+                        <div className="pl-0.5 pr-1 text-xs">{selectedOption?.length} Labels</div>
+                      </div>
+                    </Tooltip>
+                  )}
+                </>
+              ) : (
+                <Tooltip tooltipHeading={`Labels`} tooltipContent={``}>
+                  <div className="text-xs">Select Labels</div>
+                </Tooltip>
+              )}
+
+              {dropdownArrow && !disabled && (
+                <div className="flex-shrink-0 w-[14px] h-[14px] flex justify-center items-center">
+                  <ChevronDown width={14} strokeWidth={2} />
+                </div>
+              )}
+            </Combobox.Button>
+
+            <div className={`${open ? "fixed z-20 top-0 left-0 h-full w-full cursor-auto" : ""}`}>
+              <Combobox.Options
+                ref={dropdownOptions}
+                className={`absolute z-10 border border-custom-border-300 p-2 rounded bg-custom-background-100 text-xs shadow-lg focus:outline-none whitespace-nowrap mt-1 space-y-1 ${optionsClassName}`}
               >
-                {selectedOption && selectedOption?.length > 0 ? (
+                {options && options.length > 0 ? (
                   <>
-                    {selectedOption?.length === 1 ? (
+                    <div className="flex w-full items-center justify-start rounded border border-custom-border-200 bg-custom-background-90 px-1">
-                      <Tooltip
+                      <div className="flex-shrink-0 flex justify-center items-center w-[16px] h-[16px] rounded-sm">
-                        tooltipHeading={`Labels`}
+                        <Search width={12} strokeWidth={2} />
-                        tooltipContent={(selectedOption.map((_label: IFiltersOption) => _label.title) || []).join(", ")}
+                      </div>
-                      >
+
-                        <div className="flex-shrink-0 flex justify-center items-center gap-1">
+                      <div>
-                          <div
+                        <Combobox.Input
-                            className="flex-shrink-0 w-[10px] h-[10px] rounded-full"
+                          className="w-full bg-transparent p-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
-                            style={{
+                          value={search}
-                              backgroundColor: selectedOption[0]?.color || "#444",
+                          onChange={(e) => setSearch(e.target.value)}
-                            }}
+                          placeholder="Search"
-                          />
+                          displayValue={(assigned: any) => assigned?.name}
-                          <div className="pl-0.5 pr-1 text-xs">{selectedOption[0]?.title}</div>
+                        />
+                      </div>
+
+                      {search && search.length > 0 && (
+                        <div
+                          onClick={() => setSearch("")}
+                          className="flex-shrink-0 flex justify-center items-center w-[16px] h-[16px] rounded-sm cursor-pointer hover:bg-custom-background-80"
+                        >
+                          <X width={12} strokeWidth={2} />
                         </div>
-                      </Tooltip>
+                      )}
-                    ) : (
+                    </div>
-                      <Tooltip
+
-                        tooltipHeading={`Labels`}
+                    <div className={`space-y-0.5 max-h-48 overflow-y-scroll`}>
-                        tooltipContent={(selectedOption.map((_label: IFiltersOption) => _label.title) || []).join(", ")}
+                      {filteredOptions ? (
-                      >
+                        filteredOptions.length > 0 ? (
-                        <div className="flex-shrink-0 flex justify-center items-center gap-1">
+                          filteredOptions.map((option) => (
-                          <div
+                            <Combobox.Option
-                            className="flex-shrink-0 w-[10px] h-[10px] rounded-full"
+                              key={option.id}
-                            style={{ backgroundColor: "#444" }}
+                              value={option.id}
-                          />
+                              className={({ active }) =>
-                          <div className="pl-0.5 pr-1 text-xs">{selectedOption?.length} Labels</div>
+                                `cursor-pointer select-none truncate rounded px-1 py-1.5 ${
-                        </div>
+                                  active || (value && value.length > 0 && value.includes(option?.id))
-                      </Tooltip>
+                                    ? "bg-custom-background-80"
-                    )}
+                                    : ""
+                                } ${
+                                  value && value.length > 0 && value.includes(option?.id)
+                                    ? "text-custom-text-100"
+                                    : "text-custom-text-200"
+                                }`
+                              }
+                            >
+                              <div className="flex items-center gap-1 w-full px-1">
+                                <div
+                                  className="flex-shrink-0 w-[10px] h-[10px] rounded-full"
+                                  style={{
+                                    backgroundColor: option.color || "#444",
+                                  }}
+                                />
+                                <div className="line-clamp-1">{option.title}</div>
+                                {value && value.length > 0 && value.includes(option?.id) && (
+                                  <div className="flex-shrink-0 ml-auto w-[13px] h-[13px] flex justify-center items-center">
+                                    <Check width={13} strokeWidth={2} />
+                                  </div>
+                                )}
+                              </div>
+                            </Combobox.Option>
+                          ))
+                        ) : (
+                          <span className="flex items-center gap-2 p-1">
+                            <p className="text-left text-custom-text-200 ">No matching results</p>
+                          </span>
+                        )
+                      ) : (
+                        <p className="text-center text-custom-text-200">Loading...</p>
+                      )}
+                    </div>
                   </>
                 ) : (
-                  <div className="text-xs">Select option</div>
+                  <p className="text-center text-custom-text-200">No options available.</p>
                 )}
-
+              </Combobox.Options>
-                {dropdownArrow && !disabled && (
+            </div>
-                  <div className="flex-shrink-0 w-[14px] h-[14px] flex justify-center items-center">
+          </>
-                    <ChevronDown width={14} strokeWidth={2} />
+        );
-                  </div>
+      }}
-                )}
+    </Combobox>
-              </Combobox.Button>
+  );
-
+});
-              <div className={`${open ? "fixed z-20 top-0 left-0 h-full w-full cursor-auto" : ""}`}>
-                <Combobox.Options
-                  ref={dropdownOptions}
-                  className={`absolute z-10 border border-custom-border-300 p-2 rounded bg-custom-background-100 text-xs shadow-lg focus:outline-none whitespace-nowrap mt-1 space-y-1 ${optionsClassName}`}
-                >
-                  {options && options.length > 0 ? (
-                    <>
-                      <div className="flex w-full items-center justify-start rounded border border-custom-border-200 bg-custom-background-90 px-1">
-                        <div className="flex-shrink-0 flex justify-center items-center w-[16px] h-[16px] rounded-sm">
-                          <Search width={12} strokeWidth={2} />
-                        </div>
-
-                        <div>
-                          <Combobox.Input
-                            className="w-full bg-transparent p-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
-                            value={search}
-                            onChange={(e) => setSearch(e.target.value)}
-                            placeholder="Search"
-                            displayValue={(assigned: any) => assigned?.name}
-                          />
-                        </div>
-
-                        {search && search.length > 0 && (
-                          <div
-                            onClick={() => setSearch("")}
-                            className="flex-shrink-0 flex justify-center items-center w-[16px] h-[16px] rounded-sm cursor-pointer hover:bg-custom-background-80"
-                          >
-                            <X width={12} strokeWidth={2} />
-                          </div>
-                        )}
-                      </div>
-
-                      <div className={`space-y-0.5 max-h-48 overflow-y-scroll`}>
-                        {filteredOptions ? (
-                          filteredOptions.length > 0 ? (
-                            filteredOptions.map((option) => (
-                              <Combobox.Option
-                                key={option.id}
-                                value={option.id}
-                                className={({ active }) =>
-                                  `cursor-pointer select-none truncate rounded px-1 py-1.5 ${
-                                    active || (value && value.length > 0 && value.includes(option?.id))
-                                      ? "bg-custom-background-80"
-                                      : ""
-                                  } ${
-                                    value && value.length > 0 && value.includes(option?.id)
-                                      ? "text-custom-text-100"
-                                      : "text-custom-text-200"
-                                  }`
-                                }
-                              >
-                                <div className="flex items-center gap-1 w-full px-1">
-                                  <div
-                                    className="flex-shrink-0 w-[10px] h-[10px] rounded-full"
-                                    style={{
-                                      backgroundColor: option.color || "#444",
-                                    }}
-                                  />
-                                  <div className="line-clamp-1">{option.title}</div>
-                                  {value && value.length > 0 && value.includes(option?.id) && (
-                                    <div className="flex-shrink-0 ml-auto w-[13px] h-[13px] flex justify-center items-center">
-                                      <Check width={13} strokeWidth={2} />
-                                    </div>
-                                  )}
-                                </div>
-                              </Combobox.Option>
-                            ))
-                          ) : (
-                            <span className="flex items-center gap-2 p-1">
-                              <p className="text-left text-custom-text-200 ">No matching results</p>
-                            </span>
-                          )
-                        ) : (
-                          <p className="text-center text-custom-text-200">Loading...</p>
-                        )}
-                      </div>
-                    </>
-                  ) : (
-                    <p className="text-center text-custom-text-200">No options available.</p>
-                  )}
-                </Combobox.Options>
-              </div>
-            </>
-          );
-        }}
-      </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,171 +50,174 @@ 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 options: IFiltersOption[] | [] =
+  const [isOpen, setIsOpen] = useState<boolean>(false);
-      (ISSUE_PRIORITIES &&
+  const [search, setSearch] = useState<string>("");
-        ISSUE_PRIORITIES?.length > 0 &&
-        ISSUE_PRIORITIES.map((_priority: any) => ({
-          id: _priority?.key,
-          title: _priority?.title,
-        }))) ||
-      [];
 
-    useDynamicDropdownPosition(isOpen, () => setIsOpen(false), dropdownBtn, dropdownOptions);
+  const options: IFiltersOption[] | [] =
+    (list &&
+      list?.length > 0 &&
+      list.map((_priority: any) => ({
+        id: _priority?.key,
+        title: _priority?.title,
+      }))) ||
+    [];
 
-    const selectedOption: IFiltersOption | null | undefined =
+  useDynamicDropdownPosition(isOpen, () => setIsOpen(false), dropdownBtn, dropdownOptions);
-      (value && options.find((_priority: IFiltersOption) => _priority.id === value)) || null;
 
-    const filteredOptions: IFiltersOption[] =
+  const selectedOption: IFiltersOption | null | undefined =
-      search === ""
+    (value && options.find((_priority: IFiltersOption) => _priority.id === value)) || null;
-        ? options && options.length > 0
-          ? options
-          : []
-        : options && options.length > 0
-        ? options.filter((_priority: IFiltersOption) =>
-            _priority.title.toLowerCase().replace(/\s+/g, "").includes(search.toLowerCase().replace(/\s+/g, ""))
-          )
-        : [];
 
-    return (
+  const filteredOptions: IFiltersOption[] =
-      <Combobox
+    search === ""
-        as="div"
+      ? options && options.length > 0
-        className={`${className}`}
+        ? options
-        value={selectedOption && selectedOption.id}
+        : []
-        onChange={(data: string) => {
+      : options && options.length > 0
-          if (onChange && selectedOption) onChange(data, selectedOption);
+      ? options.filter((_priority: IFiltersOption) =>
-        }}
+          _priority.title.toLowerCase().replace(/\s+/g, "").includes(search.toLowerCase().replace(/\s+/g, ""))
-        disabled={disabled}
+        )
-      >
+      : [];
-        {({ open }: { open: boolean }) => {
-          if (open) {
-            if (!isOpen) setIsOpen(true);
-          } else if (isOpen) setIsOpen(false);
 
-          return (
+  return (
-            <>
+    <Combobox
-              <Combobox.Button
+      as="div"
-                ref={dropdownBtn}
+      className={`${className}`}
-                type="button"
+      value={selectedOption && selectedOption.id}
-                className={`flex items-center justify-between gap-1 px-1 py-0.5 rounded-sm shadow-sm border border-custom-border-300 duration-300 outline-none ${
+      onChange={(data: string) => {
-                  disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
+        if (onChange && selectedOption) onChange(data, selectedOption);
-                } ${buttonClassName}`}
+      }}
-              >
+      disabled={disabled}
-                {selectedOption ? (
+    >
-                  <Tooltip tooltipHeading={`Priority`} tooltipContent={selectedOption?.title}>
+      {({ open }: { open: boolean }) => {
-                    <div className="flex-shrink-0 flex justify-center items-center gap-1">
+        if (open) {
-                      <div className="flex-shrink-0 w-[16px] h-[16px] flex justify-center items-center">
+          if (!isOpen) setIsOpen(true);
-                        <Icon priority={selectedOption?.id} />
+        } else if (isOpen) setIsOpen(false);
-                      </div>
+
-                      <div className="pl-0.5 pr-1 text-xs">{selectedOption?.title}</div>
+        return (
+          <>
+            <Combobox.Button
+              ref={dropdownBtn}
+              type="button"
+              className={`flex items-center justify-between gap-1 px-1 py-0.5 rounded-sm shadow-sm border border-custom-border-300 duration-300 outline-none ${
+                disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
+              } ${buttonClassName}`}
+            >
+              {selectedOption ? (
+                <Tooltip tooltipHeading={`Priority`} tooltipContent={selectedOption?.title}>
+                  <div className="flex-shrink-0 flex justify-center items-center gap-1">
+                    <div className="flex-shrink-0 w-[16px] h-[16px] flex justify-center items-center">
+                      <Icon priority={selectedOption?.id} />
                     </div>
-                  </Tooltip>
+                    <div className="pl-0.5 pr-1 text-xs">{selectedOption?.title}</div>
-                ) : (
-                  <div className="text-xs">Select option</div>
-                )}
-
-                {dropdownArrow && !disabled && (
-                  <div className="flex-shrink-0 w-[14px] h-[14px] flex justify-center items-center">
-                    <ChevronDown width={14} strokeWidth={2} />
                   </div>
-                )}
+                </Tooltip>
-              </Combobox.Button>
+              ) : (
+                <Tooltip tooltipHeading={`Priority`} tooltipContent={``}>
+                  <div className="text-xs">Select Priority</div>
+                </Tooltip>
+              )}
 
-              <div className={`${open ? "fixed z-20 top-0 left-0 h-full w-full cursor-auto" : ""}`}>
+              {dropdownArrow && !disabled && (
-                <Combobox.Options
+                <div className="flex-shrink-0 w-[14px] h-[14px] flex justify-center items-center">
-                  ref={dropdownOptions}
+                  <ChevronDown width={14} strokeWidth={2} />
-                  className={`absolute z-10 border border-custom-border-300 p-2 rounded bg-custom-background-100 text-xs shadow-lg focus:outline-none whitespace-nowrap mt-1 space-y-1 ${optionsClassName}`}
+                </div>
-                >
+              )}
-                  {options && options.length > 0 ? (
+            </Combobox.Button>
-                    <>
-                      <div className="flex w-full items-center justify-start rounded border border-custom-border-200 bg-custom-background-90 px-1">
-                        <div className="flex-shrink-0 flex justify-center items-center w-[16px] h-[16px] rounded-sm">
-                          <Search width={12} strokeWidth={2} />
-                        </div>
 
-                        <div>
+            <div className={`${open ? "fixed z-20 top-0 left-0 h-full w-full cursor-auto" : ""}`}>
-                          <Combobox.Input
+              <Combobox.Options
-                            className="w-full bg-transparent p-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
+                ref={dropdownOptions}
-                            value={search}
+                className={`absolute z-10 border border-custom-border-300 p-2 rounded bg-custom-background-100 text-xs shadow-lg focus:outline-none whitespace-nowrap mt-1 space-y-1 ${optionsClassName}`}
-                            onChange={(e) => setSearch(e.target.value)}
+              >
-                            placeholder="Search"
+                {options && options.length > 0 ? (
-                            displayValue={(assigned: any) => assigned?.name}
+                  <>
-                          />
+                    <div className="flex w-full items-center justify-start rounded border border-custom-border-200 bg-custom-background-90 px-1">
-                        </div>
+                      <div className="flex-shrink-0 flex justify-center items-center w-[16px] h-[16px] rounded-sm">
-
+                        <Search width={12} strokeWidth={2} />
-                        {search && search.length > 0 && (
-                          <div
-                            onClick={() => setSearch("")}
-                            className="flex-shrink-0 flex justify-center items-center w-[16px] h-[16px] rounded-sm cursor-pointer hover:bg-custom-background-80"
-                          >
-                            <X width={12} strokeWidth={2} />
-                          </div>
-                        )}
                       </div>
 
-                      <div className={`space-y-0.5 max-h-48 overflow-y-scroll`}>
+                      <div>
-                        {filteredOptions ? (
+                        <Combobox.Input
-                          filteredOptions.length > 0 ? (
+                          className="w-full bg-transparent p-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
-                            filteredOptions.map((option) => (
+                          value={search}
-                              <Combobox.Option
+                          onChange={(e) => setSearch(e.target.value)}
-                                key={option.id}
+                          placeholder="Search"
-                                value={option.id}
+                          displayValue={(assigned: any) => assigned?.name}
-                                className={({ active, selected }) =>
+                        />
-                                  `cursor-pointer select-none truncate rounded px-1 py-1.5 ${
+                      </div>
-                                    active || selected ? "bg-custom-background-80" : ""
+
-                                  } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                      {search && search.length > 0 && (
-                                }
+                        <div
-                              >
+                          onClick={() => setSearch("")}
-                                {({ selected }) => (
+                          className="flex-shrink-0 flex justify-center items-center w-[16px] h-[16px] rounded-sm cursor-pointer hover:bg-custom-background-80"
-                                  <div className="flex items-center gap-1 w-full px-1">
+                        >
-                                    <div className="flex-shrink-0 w-[16px] h-[16px] flex justify-center items-center">
+                          <X width={12} strokeWidth={2} />
-                                      <Icon priority={option?.id} />
+                        </div>
-                                    </div>
+                      )}
-                                    <div className="line-clamp-1">{option.title}</div>
+                    </div>
-                                    {selected && (
+
-                                      <div className="flex-shrink-0 ml-auto w-[13px] h-[13px] flex justify-center items-center">
+                    <div className={`space-y-0.5 max-h-48 overflow-y-scroll`}>
-                                        <Check width={13} strokeWidth={2} />
+                      {filteredOptions ? (
-                                      </div>
+                        filteredOptions.length > 0 ? (
-                                    )}
+                          filteredOptions.map((option) => (
+                            <Combobox.Option
+                              key={option.id}
+                              value={option.id}
+                              className={({ active, selected }) =>
+                                `cursor-pointer select-none truncate rounded px-1 py-1.5 ${
+                                  active || selected ? "bg-custom-background-80" : ""
+                                } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                              }
+                            >
+                              {({ selected }) => (
+                                <div className="flex items-center gap-1 w-full px-1">
+                                  <div className="flex-shrink-0 w-[16px] h-[16px] flex justify-center items-center">
+                                    <Icon priority={option?.id} />
                                   </div>
-                                )}
+                                  <div className="line-clamp-1">{option.title}</div>
-                              </Combobox.Option>
+                                  {selected && (
-                            ))
+                                    <div className="flex-shrink-0 ml-auto w-[13px] h-[13px] flex justify-center items-center">
-                          ) : (
+                                      <Check width={13} strokeWidth={2} />
-                            <span className="flex items-center gap-2 p-1">
+                                    </div>
-                              <p className="text-left text-custom-text-200 ">No matching results</p>
+                                  )}
-                            </span>
+                                </div>
-                          )
+                              )}
+                            </Combobox.Option>
+                          ))
                         ) : (
-                          <p className="text-center text-custom-text-200">Loading...</p>
+                          <span className="flex items-center gap-2 p-1">
-                        )}
+                            <p className="text-left text-custom-text-200 ">No matching results</p>
-                      </div>
+                          </span>
-                    </>
+                        )
-                  ) : (
+                      ) : (
-                    <p className="text-center text-custom-text-200">No options available.</p>
+                        <p className="text-center text-custom-text-200">Loading...</p>
-                  )}
+                      )}
-                </Combobox.Options>
+                    </div>
-              </div>
+                  </>
-            </>
+                ) : (
-          );
+                  <p className="text-center text-custom-text-200">No options available.</p>
-        }}
+                )}
-      </Combobox>
+              </Combobox.Options>
-    );
+            </div>
-  }
+          </>
-);
+        );
+      }}
+    </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,185 +29,186 @@ 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[] | [] =
+  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,
+        id: _state?.id,
-          title: _state?.name,
+        title: _state?.name,
-          group: _state?.group,
+        group: _state?.group,
-          color: _state?.color || null,
+        color: _state?.color || null,
-        }))) ||
+      }))) ||
-      [];
+    [];
 
-    useDynamicDropdownPosition(isOpen, () => setIsOpen(false), dropdownBtn, dropdownOptions);
+  useDynamicDropdownPosition(isOpen, () => setIsOpen(false), dropdownBtn, dropdownOptions);
 
-    const selectedOption: IFiltersOption | null | undefined =
+  const selectedOption: IFiltersOption | null | undefined =
-      (value && options.find((_state: IFiltersOption) => _state.id === value)) || null;
+    (value && options.find((_state: IFiltersOption) => _state.id === value)) || null;
 
-    const filteredOptions: IFiltersOption[] =
+  const filteredOptions: IFiltersOption[] =
-      search === ""
+    search === ""
-        ? options && options.length > 0
+      ? options && options.length > 0
-          ? options
+        ? options
-          : []
+        : []
-        : options && options.length > 0
+      : options && options.length > 0
-        ? options.filter((_state: IFiltersOption) =>
+      ? options.filter((_state: IFiltersOption) =>
-            _state.title.toLowerCase().replace(/\s+/g, "").includes(search.toLowerCase().replace(/\s+/g, ""))
+          _state.title.toLowerCase().replace(/\s+/g, "").includes(search.toLowerCase().replace(/\s+/g, ""))
-          )
+        )
-        : [];
+      : [];
 
-    return (
+  return (
-      <Combobox
+    <Combobox
-        as="div"
+      as="div"
-        className={`${className}`}
+      className={`${className}`}
-        value={selectedOption && selectedOption.id}
+      value={selectedOption && selectedOption.id}
-        onChange={(data: string) => {
+      onChange={(data: string) => {
-          if (onChange && selectedOption) onChange(data, selectedOption);
+        if (onChange && selectedOption) onChange(data, selectedOption);
-        }}
+      }}
-        disabled={disabled}
+      disabled={disabled}
-      >
+    >
-        {({ open }: { open: boolean }) => {
+      {({ open }: { open: boolean }) => {
-          if (open) {
+        if (open) {
-            if (!isOpen) setIsOpen(true);
+          if (!isOpen) setIsOpen(true);
-          } else if (isOpen) setIsOpen(false);
+        } else if (isOpen) setIsOpen(false);
 
-          return (
+        return (
-            <>
+          <>
-              <Combobox.Button
+            <Combobox.Button
-                ref={dropdownBtn}
+              ref={dropdownBtn}
-                type="button"
+              type="button"
-                className={`flex items-center justify-between gap-1 px-1 py-0.5 rounded-sm shadow-sm border border-custom-border-300 duration-300 outline-none ${
+              className={`flex items-center justify-between gap-1 px-1 py-0.5 rounded-sm shadow-sm border border-custom-border-300 duration-300 outline-none ${
-                  disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
+                disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
-                } ${buttonClassName}`}
+              } ${buttonClassName}`}
+            >
+              {selectedOption ? (
+                <Tooltip tooltipHeading={`State`} tooltipContent={selectedOption?.title}>
+                  <div className="flex-shrink-0 flex justify-center items-center gap-1">
+                    <div className="flex-shrink-0 w-[12px] h-[12px] flex justify-center items-center">
+                      <StateGroupIcon
+                        stateGroup={selectedOption?.group as any}
+                        color={(selectedOption?.color || null) as any}
+                        width="12"
+                        height="12"
+                      />
+                    </div>
+                    <div className="pl-0.5 pr-1 text-xs">{selectedOption?.title}</div>
+                  </div>
+                </Tooltip>
+              ) : (
+                <Tooltip tooltipHeading={`State`} tooltipContent={``}>
+                  <div className="text-xs">Select State</div>
+                </Tooltip>
+              )}
+
+              {dropdownArrow && !disabled && (
+                <div className="flex-shrink-0 w-[14px] h-[14px] flex justify-center items-center">
+                  <ChevronDown width={14} strokeWidth={2} />
+                </div>
+              )}
+            </Combobox.Button>
+
+            <div className={`${open ? "fixed z-20 top-0 left-0 h-full w-full cursor-auto" : ""}`}>
+              <Combobox.Options
+                ref={dropdownOptions}
+                className={`absolute z-10 border border-custom-border-300 p-2 rounded bg-custom-background-100 text-xs shadow-lg focus:outline-none whitespace-nowrap mt-1 space-y-1 ${optionsClassName}`}
               >
-                {selectedOption ? (
+                {options && options.length > 0 ? (
-                  <Tooltip tooltipHeading={`State`} tooltipContent={selectedOption?.title}>
+                  <>
-                    <div className="flex-shrink-0 flex justify-center items-center gap-1">
+                    <div className="flex w-full items-center justify-start rounded border border-custom-border-200 bg-custom-background-90 px-1">
-                      <div className="flex-shrink-0 w-[12px] h-[12px] flex justify-center items-center">
+                      <div className="flex-shrink-0 flex justify-center items-center w-[16px] h-[16px] rounded-sm">
-                        <StateGroupIcon
+                        <Search width={12} strokeWidth={2} />
-                          stateGroup={selectedOption?.group as any}
+                      </div>
-                          color={(selectedOption?.color || null) as any}
+
-                          width="12"
+                      <div>
-                          height="12"
+                        <Combobox.Input
+                          className="w-full bg-transparent p-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
+                          value={search}
+                          onChange={(e) => setSearch(e.target.value)}
+                          placeholder="Search"
+                          displayValue={(assigned: any) => assigned?.name}
                         />
                       </div>
-                      <div className="pl-0.5 pr-1 text-xs">{selectedOption?.title}</div>
+
+                      {search && search.length > 0 && (
+                        <div
+                          onClick={() => setSearch("")}
+                          className="flex-shrink-0 flex justify-center items-center w-[16px] h-[16px] rounded-sm cursor-pointer hover:bg-custom-background-80"
+                        >
+                          <X width={12} strokeWidth={2} />
+                        </div>
+                      )}
                     </div>
-                  </Tooltip>
-                ) : (
-                  <div className="text-xs">Select option</div>
-                )}
 
-                {dropdownArrow && !disabled && (
+                    <div className={`space-y-0.5 max-h-48 overflow-y-scroll`}>
-                  <div className="flex-shrink-0 w-[14px] h-[14px] flex justify-center items-center">
+                      {filteredOptions ? (
-                    <ChevronDown width={14} strokeWidth={2} />
+                        filteredOptions.length > 0 ? (
-                  </div>
+                          filteredOptions.map((option) => (
-                )}
+                            <Combobox.Option
-              </Combobox.Button>
+                              key={option.id}
-
+                              value={option.id}
-              <div className={`${open ? "fixed z-20 top-0 left-0 h-full w-full cursor-auto" : ""}`}>
+                              className={({ active, selected }) =>
-                <Combobox.Options
+                                `cursor-pointer select-none truncate rounded px-1 py-1.5 ${
-                  ref={dropdownOptions}
+                                  active || selected ? "bg-custom-background-80" : ""
-                  className={`absolute z-10 border border-custom-border-300 p-2 rounded bg-custom-background-100 text-xs shadow-lg focus:outline-none whitespace-nowrap mt-1 space-y-1 ${optionsClassName}`}
+                                } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
-                >
+                              }
-                  {options && options.length > 0 ? (
+                            >
-                    <>
+                              {({ selected }) => (
-                      <div className="flex w-full items-center justify-start rounded border border-custom-border-200 bg-custom-background-90 px-1">
+                                <div className="flex items-center gap-1 w-full px-1">
-                        <div className="flex-shrink-0 flex justify-center items-center w-[16px] h-[16px] rounded-sm">
+                                  <div className="flex-shrink-0 w-[13px] h-[13px] flex justify-center items-center">
-                          <Search width={12} strokeWidth={2} />
+                                    <StateGroupIcon
-                        </div>
+                                      stateGroup={option?.group as any}
-
+                                      color={(option?.color || null) as any}
-                        <div>
+                                      width="13"
-                          <Combobox.Input
+                                      height="13"
-                            className="w-full bg-transparent p-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
+                                    />
-                            value={search}
-                            onChange={(e) => setSearch(e.target.value)}
-                            placeholder="Search"
-                            displayValue={(assigned: any) => assigned?.name}
-                          />
-                        </div>
-
-                        {search && search.length > 0 && (
-                          <div
-                            onClick={() => setSearch("")}
-                            className="flex-shrink-0 flex justify-center items-center w-[16px] h-[16px] rounded-sm cursor-pointer hover:bg-custom-background-80"
-                          >
-                            <X width={12} strokeWidth={2} />
-                          </div>
-                        )}
-                      </div>
-
-                      <div className={`space-y-0.5 max-h-48 overflow-y-scroll`}>
-                        {filteredOptions ? (
-                          filteredOptions.length > 0 ? (
-                            filteredOptions.map((option) => (
-                              <Combobox.Option
-                                key={option.id}
-                                value={option.id}
-                                className={({ active, selected }) =>
-                                  `cursor-pointer select-none truncate rounded px-1 py-1.5 ${
-                                    active || selected ? "bg-custom-background-80" : ""
-                                  } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
-                                }
-                              >
-                                {({ selected }) => (
-                                  <div className="flex items-center gap-1 w-full px-1">
-                                    <div className="flex-shrink-0 w-[13px] h-[13px] flex justify-center items-center">
-                                      <StateGroupIcon
-                                        stateGroup={option?.group as any}
-                                        color={(option?.color || null) as any}
-                                        width="13"
-                                        height="13"
-                                      />
-                                    </div>
-                                    <div className="line-clamp-1">{option.title}</div>
-                                    {selected && (
-                                      <div className="flex-shrink-0 ml-auto w-[13px] h-[13px] flex justify-center items-center">
-                                        <Check width={13} strokeWidth={2} />
-                                      </div>
-                                    )}
                                   </div>
-                                )}
+                                  <div className="line-clamp-1">{option.title}</div>
-                              </Combobox.Option>
+                                  {selected && (
-                            ))
+                                    <div className="flex-shrink-0 ml-auto w-[13px] h-[13px] flex justify-center items-center">
-                          ) : (
+                                      <Check width={13} strokeWidth={2} />
-                            <span className="flex items-center gap-2 p-1">
+                                    </div>
-                              <p className="text-left text-custom-text-200 ">No matching results</p>
+                                  )}
-                            </span>
+                                </div>
-                          )
+                              )}
+                            </Combobox.Option>
+                          ))
                         ) : (
-                          <p className="text-center text-custom-text-200">Loading...</p>
+                          <span className="flex items-center gap-2 p-1">
-                        )}
+                            <p className="text-left text-custom-text-200 ">No matching results</p>
-                      </div>
+                          </span>
-                    </>
+                        )
-                  ) : (
+                      ) : (
-                    <p className="text-center text-custom-text-200">No options available.</p>
+                        <p className="text-center text-custom-text-200">Loading...</p>
-                  )}
+                      )}
-                </Combobox.Options>
+                    </div>
-              </div>
+                  </>
-            </>
+                ) : (
-          );
+                  <p className="text-center text-custom-text-200">No options available.</p>
-        }}
+                )}
-      </Combobox>
+              </Combobox.Options>
-    );
+            </div>
-  }
+          </>
-);
+        );
+      }}
+    </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
-  <ProfileIssuesContextProvider>
+
-    <ProfileAuthWrapper>
+const ProfileAssignedIssues: NextPage = observer(() => {
-      <ProfileIssuesView />
+  const {
-    </ProfileAuthWrapper>
+    workspace: workspaceStore,
-  </ProfileIssuesContextProvider>
+    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>
+        {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"