chore: handled build issues

web/components/issue-layouts/display-filters/extra-options.tsx

@@ -23,9 +23,9 @@ export const FilterExtraOptions = observer(() => {
   const handleExtraOptionsSectionVisibility = (key: string) =>
     issueFilterStore?.issueView &&
     issueFilterStore?.issueLayout &&
-    issueFilterVisibilityData[
+    issueFilterVisibilityData[issueFilterStore?.issueView === "my_issues" ? "my_issues" : "issues"]?.extra_options?.[
-      issueFilterStore?.issueView === "my_issues" ? "my_issues" : "others"
+      issueFilterStore?.issueLayout
-    ]?.extra_options?.[issueFilterStore?.issueLayout].values?.includes(key);
+    ].values?.includes(key);
 
   return (
     <div>
@@ -43,11 +43,7 @@ export const FilterExtraOptions = observer(() => {
                 handleExtraOptionsSectionVisibility(_extraProperties?.key) && (
                   <FilterOption
                     key={_extraProperties?.key}
-                    isChecked={
+                    isChecked={issueFilterStore?.userFilters?.display_filters?.[_extraProperties?.key] ? true : false}
-                      issueFilterStore?.userFilters?.display_filters?.[_extraProperties?.key]
-                        ? true
-                        : false
-                    }
                     onClick={() =>
                       handleExtraOptions(
                         _extraProperties?.key,

web/components/issue-layouts/display-filters/group-by.tsx

@@ -32,11 +32,7 @@ export const FilterGroupBy = observer(() => {
             issueFilterStore?.issueRenderFilters?.group_by.map((_groupBy) => (
               <FilterOption
                 key={_groupBy?.key}
-                isChecked={
+                isChecked={issueFilterStore?.userFilters?.display_filters?.group_by === _groupBy?.key ? true : false}
-                  issueFilterStore?.userFilters?.display_filters?.group_by === _groupBy?.key
-                    ? true
-                    : false
-                }
                 onClick={() => handleGroupBy("group_by", _groupBy?.key)}
                 title={_groupBy.title}
                 multiple={false}

web/components/issue-layouts/display-filters/index.tsx

@@ -20,21 +20,22 @@ export const DisplayFiltersSelection = observer(() => {
   const handleDisplayPropertiesSectionVisibility =
     issueFilterStore?.issueView &&
     issueFilterStore?.issueLayout &&
-    issueFilterVisibilityData[issueFilterStore?.issueView === "my_issues" ? "my_issues" : "others"]
+    issueFilterVisibilityData[issueFilterStore?.issueView === "my_issues" ? "my_issues" : "issues"]
       ?.display_properties?.[issueFilterStore?.issueLayout];
 
   const handleDisplayFilterSectionVisibility = (section_key: string) =>
     issueFilterStore?.issueView &&
     issueFilterStore?.issueLayout &&
-    issueFilterVisibilityData[
+    issueFilterVisibilityData[issueFilterStore?.issueView === "my_issues" ? "my_issues" : "issues"]?.display_filters?.[
-      issueFilterStore?.issueView === "my_issues" ? "my_issues" : "others"
+      issueFilterStore?.issueLayout
-    ]?.display_filters?.[issueFilterStore?.issueLayout].includes(section_key);
+    ].includes(section_key);
 
   const handleExtraOptionsSectionVisibility =
     issueFilterStore?.issueView &&
     issueFilterStore?.issueLayout &&
-    issueFilterVisibilityData[issueFilterStore?.issueView === "my_issues" ? "my_issues" : "others"]
+    issueFilterVisibilityData[issueFilterStore?.issueView === "my_issues" ? "my_issues" : "issues"]?.extra_options?.[
-      ?.extra_options?.[issueFilterStore?.issueLayout].access;
+      issueFilterStore?.issueLayout
+    ].access;
 
   return (
     <div className="w-full h-full overflow-hidden select-none relative flex flex-col divide-y divide-custom-border-200">

web/components/issue-layouts/display-filters/issue-type.tsx

@@ -32,11 +32,7 @@ export const FilterIssueType = observer(() => {
             issueFilterStore?.issueRenderFilters?.issue_type.map((_issueType) => (
               <FilterOption
                 key={_issueType?.key}
-                isChecked={
+                isChecked={issueFilterStore?.userFilters?.display_filters?.type === _issueType?.key ? true : false}
-                  issueFilterStore?.userFilters?.display_filters?.type === _issueType?.key
-                    ? true
-                    : false
-                }
                 onClick={() => handleIssueType("type", _issueType?.key)}
                 title={_issueType.title}
                 multiple={false}

web/components/issue-layouts/display-filters/order-by.tsx

@@ -32,11 +32,7 @@ export const FilterOrderBy = observer(() => {
             issueFilterStore?.issueRenderFilters?.order_by.map((_orderBy) => (
               <FilterOption
                 key={_orderBy?.key}
-                isChecked={
+                isChecked={issueFilterStore?.userFilters?.display_filters?.order_by === _orderBy?.key ? true : false}
-                  issueFilterStore?.userFilters?.display_filters?.order_by === _orderBy?.key
-                    ? true
-                    : false
-                }
                 onClick={() => handleOrderBy("order_by", _orderBy?.key)}
                 title={_orderBy.title}
                 multiple={false}

web/components/issue-layouts/filters-preview/assignees.tsx

@@ -9,13 +9,7 @@ import { observer } from "mobx-react-lite";
 import { useMobxStore } from "lib/mobx/store-provider";
 import { RootStore } from "store/root";
 
-export const MemberIcons = ({
+export const MemberIcons = ({ display_name, avatar }: { display_name: string; avatar: string | null }) => (
-  display_name,
-  avatar,
-}: {
-  display_name: string;
-  avatar: string | null;
-}) => (
   <div className="flex-shrink-0 rounded-sm overflow-hidden w-[16px] h-[16px] flex justify-center items-center">
     {avatar ? (
       <img src={avatar} alt={display_name || ""} className="" />
@@ -49,9 +43,7 @@ export const FilterAssignees = observer(() => {
         <div className="border border-custom-border-200 bg-custom-background-80 rounded-full overflow-hidden flex items-center gap-2 px-2 py-1">
           <div className="flex-shrink-0">
             <FilterPreviewHeader
-              title={`Assignees (${
+              title={`Assignees (${issueFilterStore?.userFilters?.filters?.assignees?.length || 0})`}
-                issueFilterStore?.userFilters?.filters?.assignees?.length || 0
-              })`}
             />
           </div>
           <div className="relative flex items-center flex-wrap gap-2">
@@ -60,17 +52,10 @@ export const FilterAssignees = observer(() => {
               issueFilterStore?.projectMembers.map(
                 (_member) =>
                   issueFilterStore?.userFilters?.filters?.assignees != null &&
-                  issueFilterStore?.userFilters?.filters?.assignees.includes(
+                  issueFilterStore?.userFilters?.filters?.assignees.includes(_member?.member?.id) && (
-                    _member?.member?.id
-                  ) && (
                     <FilterPreviewContent
                       key={`assignees-${_member?.member?.id}`}
-                      icon={
+                      icon={<MemberIcons display_name={_member?.member.display_name} avatar={_member?.member.avatar} />}
-                        <MemberIcons
-                          display_name={_member?.member.display_name}
-                          avatar={_member?.member.avatar}
-                        />
-                      }
                       title={`${_member?.member?.display_name}`}
                       onClick={() => handleFilter("assignees", _member?.member?.id)}
                       className="border border-custom-border-100 bg-custom-background-100"

web/components/issue-layouts/filters-preview/created-by.tsx

@@ -32,9 +32,7 @@ export const FilterCreatedBy = observer(() => {
         <div className="border border-custom-border-200 bg-custom-background-80 rounded-full overflow-hidden flex items-center gap-2 px-2 py-1">
           <div className="flex-shrink-0">
             <FilterPreviewHeader
-              title={`Created By (${
+              title={`Created By (${issueFilterStore?.userFilters?.filters?.created_by?.length || 0})`}
-                issueFilterStore?.userFilters?.filters?.created_by?.length || 0
-              })`}
             />
           </div>
 
@@ -44,18 +42,11 @@ export const FilterCreatedBy = observer(() => {
               issueFilterStore?.projectMembers.map(
                 (_member) =>
                   issueFilterStore?.userFilters?.filters?.created_by != null &&
-                  issueFilterStore?.userFilters?.filters?.created_by.includes(
+                  issueFilterStore?.userFilters?.filters?.created_by.includes(_member?.member?.id) && (
-                    _member?.member?.id
-                  ) && (
                     <FilterPreviewContent
                       key={`create-by-${_member?.member?.id}`}
                       title={`${_member?.member?.display_name}`}
-                      icon={
+                      icon={<MemberIcons display_name={_member?.member.display_name} avatar={_member?.member.avatar} />}
-                        <MemberIcons
-                          display_name={_member?.member.display_name}
-                          avatar={_member?.member.avatar}
-                        />
-                      }
                       onClick={() => handleFilter("created_by", _member?.member?.id)}
                       className="border border-custom-border-100 bg-custom-background-100"
                     />

web/components/issue-layouts/filters-preview/helpers/content.tsx

@@ -8,13 +8,7 @@ interface IFilterPreviewContent {
   style?: any;
 }
 
-export const FilterPreviewContent = ({
+export const FilterPreviewContent = ({ icon, title, onClick, className, style }: IFilterPreviewContent) => (
-  icon,
-  title,
-  onClick,
-  className,
-  style,
-}: IFilterPreviewContent) => (
   <div
     className={`flex-shrink-0 flex items-center gap-1.5 rounded-full px-[8px] transition-all ${className}`}
     style={style ? style : {}}

web/components/issue-layouts/filters-preview/index copy.tsx

@@ -1,92 +0,0 @@
-import React from "react";
-// components
-import { FilterPriority } from "./priority";
-import { FilterState } from "./state";
-import { FilterStateGroup } from "./state-group";
-import { FilterAssignees } from "./assignees";
-import { FilterCreatedBy } from "./created-by";
-import { FilterLabels } from "./labels";
-import { FilterStartDate } from "./start-date";
-import { FilterTargetDate } from "./target-date";
-// mobx react lite
-import { observer } from "mobx-react-lite";
-// mobx store
-import { useMobxStore } from "lib/mobx/store-provider";
-import { RootStore } from "store/root";
-// default data
-import { issueFilterVisibilityData } from "store/issue-views/issue_data";
-
-export const FilterSelection = observer(() => {
-  const store: RootStore = useMobxStore();
-  const { issueFilters: issueFilterStore } = store;
-
-  const handleFilterSectionVisibility = (section_key: string) =>
-    issueFilterStore?.issueView &&
-    issueFilterStore?.issueLayout &&
-    issueFilterVisibilityData[
-      issueFilterStore?.issueView === "my_issues" ? "my_issues" : "others"
-    ]?.filters?.[issueFilterStore?.issueLayout]?.includes(section_key);
-
-  return (
-    <div className="w-full h-full overflow-hidden select-none relative flex flex-col divide-y divide-custom-border-200">
-      <div className="flex-shrink-0 p-2 text-sm ">Search container</div>
-      <div className="w-full h-full overflow-hidden overflow-y-auto relative pb-2 divide-y divide-custom-border-200">
-        {/* priority */}
-        {handleFilterSectionVisibility("priority") && (
-          <div className="pb-1 px-2">
-            <FilterPriority />
-          </div>
-        )}
-
-        {/* state group */}
-        {handleFilterSectionVisibility("state_group") && (
-          <div className="py-1 px-2">
-            <FilterStateGroup />
-          </div>
-        )}
-
-        {/* state */}
-        {handleFilterSectionVisibility("state") && (
-          <div className="py-1 px-2">
-            <FilterState />
-          </div>
-        )}
-
-        {/* assignees */}
-        {handleFilterSectionVisibility("assignees") && (
-          <div className="py-1 px-2">
-            <FilterAssignees />
-          </div>
-        )}
-
-        {/* created_by */}
-        {handleFilterSectionVisibility("created_by") && (
-          <div className="py-1 px-2">
-            <FilterCreatedBy />
-          </div>
-        )}
-
-        {/* labels */}
-        {handleFilterSectionVisibility("labels") && (
-          <div className="py-1 px-2">
-            <FilterLabels />
-          </div>
-        )}
-
-        {/* start_date */}
-        {handleFilterSectionVisibility("start_date") && (
-          <div className="py-1 px-2">
-            <FilterStartDate />
-          </div>
-        )}
-
-        {/* due_date */}
-        {handleFilterSectionVisibility("due_date") && (
-          <div className="pt-1 px-2">
-            <FilterTargetDate />
-          </div>
-        )}
-      </div>
-    </div>
-  );
-});

web/components/issue-layouts/filters-preview/index.tsx

@@ -23,9 +23,9 @@ export const FilterPreview = observer(() => {
   const handleFilterSectionVisibility = (section_key: string) =>
     issueFilterStore?.issueView &&
     issueFilterStore?.issueLayout &&
-    issueFilterVisibilityData[
+    issueFilterVisibilityData[issueFilterStore?.issueView === "my_issues" ? "my_issues" : "issues"]?.filters?.[
-      issueFilterStore?.issueView === "my_issues" ? "my_issues" : "others"
+      issueFilterStore?.issueLayout
-    ]?.filters?.[issueFilterStore?.issueLayout]?.includes(section_key);
+    ]?.includes(section_key);
 
   const validateFiltersAvailability =
     issueFilterStore?.userFilters?.filters != null &&

web/components/issue-layouts/filters-preview/labels.tsx

@@ -43,9 +43,7 @@ export const FilterLabels = observer(() => {
       {issueFilterStore?.userFilters?.filters?.labels != null && (
         <div className="border border-custom-border-200 bg-custom-background-80 rounded-full overflow-hidden flex items-center gap-2 px-2 py-1">
           <div className="flex-shrink-0">
-            <FilterPreviewHeader
+            <FilterPreviewHeader title={`Labels (${issueFilterStore?.userFilters?.filters?.labels?.length || 0})`} />
-              title={`Labels (${issueFilterStore?.userFilters?.filters?.labels?.length || 0})`}
-            />
           </div>
 
           <div className="relative flex items-center flex-wrap gap-2">

web/components/issue-layouts/filters-preview/state-group.tsx

@@ -18,53 +18,27 @@ import { RootStore } from "store/root";
 // constants
 import { STATE_GROUP_COLORS } from "constants/state";
 
-export const StateGroupIcons = ({
+export const StateGroupIcons = ({ stateGroup, color = null }: { stateGroup: string; color?: string | null }) => {
-  stateGroup,
-  color = null,
-}: {
-  stateGroup: string;
-  color?: string | null;
-}) => {
   if (stateGroup === "cancelled")
     return (
-      <StateGroupCancelledIcon
+      <StateGroupCancelledIcon width={"12px"} height={"12px"} color={color ? color : STATE_GROUP_COLORS[stateGroup]} />
-        width={"12px"}
-        height={"12px"}
-        color={color ? color : STATE_GROUP_COLORS[stateGroup]}
-      />
     );
   if (stateGroup === "completed")
     return (
-      <StateGroupCompletedIcon
+      <StateGroupCompletedIcon width={"12px"} height={"12px"} color={color ? color : STATE_GROUP_COLORS[stateGroup]} />
-        width={"12px"}
-        height={"12px"}
-        color={color ? color : STATE_GROUP_COLORS[stateGroup]}
-      />
     );
   if (stateGroup === "started")
     return (
-      <StateGroupStartedIcon
+      <StateGroupStartedIcon width={"12px"} height={"12px"} color={color ? color : STATE_GROUP_COLORS[stateGroup]} />
-        width={"12px"}
-        height={"12px"}
-        color={color ? color : STATE_GROUP_COLORS[stateGroup]}
-      />
     );
   if (stateGroup === "unstarted")
     return (
-      <StateGroupUnstartedIcon
+      <StateGroupUnstartedIcon width={"12px"} height={"12px"} color={color ? color : STATE_GROUP_COLORS[stateGroup]} />
-        width={"12px"}
-        height={"12px"}
-        color={color ? color : STATE_GROUP_COLORS[stateGroup]}
-      />
     );
   if (stateGroup === "backlog")
     return (
       <div className="flex-shrink-0 rounded-sm overflow-hidden w-[20px] h-[20px] flex justify-center items-center">
-        <StateGroupBacklogIcon
+        <StateGroupBacklogIcon width={"12px"} height={"12px"} color={color ? color : STATE_GROUP_COLORS[stateGroup]} />
-          width={"12px"}
-          height={"12px"}
-          color={color ? color : STATE_GROUP_COLORS[stateGroup]}
-        />
       </div>
     );
   return <></>;
@@ -125,9 +99,7 @@ export const FilterStateGroup = observer(() => {
         <div className="border border-custom-border-200 bg-custom-background-80 rounded-full overflow-hidden flex items-center gap-2 px-2 py-1">
           <div className="flex-shrink-0">
             <FilterPreviewHeader
-              title={`State Group (${
+              title={`State Group (${issueFilterStore?.userFilters?.filters?.state_group?.length || 0})`}
-                issueFilterStore?.userFilters?.filters?.state_group?.length || 0
-              })`}
             />
           </div>
           <div className="relative flex items-center flex-wrap gap-2">
@@ -136,9 +108,7 @@ export const FilterStateGroup = observer(() => {
               issueFilterStore?.issueRenderFilters?.state_group.map(
                 (_stateGroup) =>
                   issueFilterStore?.userFilters?.filters?.state_group != null &&
-                  issueFilterStore?.userFilters?.filters?.state_group.includes(
+                  issueFilterStore?.userFilters?.filters?.state_group.includes(_stateGroup?.key) && (
-                    _stateGroup?.key
-                  ) && (
                     <FilterPreviewContent
                       key={_stateGroup?.key}
                       icon={<StateGroupIcons stateGroup={_stateGroup.key} />}

web/components/issue-layouts/filters-preview/state.tsx

@@ -10,7 +10,7 @@ import { observer } from "mobx-react-lite";
 import { useMobxStore } from "lib/mobx/store-provider";
 import { RootStore } from "store/root";
 // store default data
-import { issueStateGroupKeys } from "store/issue-views/issue_data";
+import { stateGroups } from "store/issue-views/issue_data";
 
 export const FilterState = observer(() => {
   const store: RootStore = useMobxStore();
@@ -33,23 +33,21 @@ export const FilterState = observer(() => {
       {issueFilterStore?.userFilters?.filters?.state != null && (
         <div className="border border-custom-border-200 bg-custom-background-80 rounded-full overflow-hidden flex items-center gap-2 px-2 py-1">
           <div className="flex-shrink-0">
-            <FilterPreviewHeader
+            <FilterPreviewHeader title={`State (${issueFilterStore?.userFilters?.filters?.state?.length || 0})`} />
-              title={`State (${issueFilterStore?.userFilters?.filters?.state?.length || 0})`}
-            />
           </div>
           <div className="relative flex items-center flex-wrap gap-2">
-            {issueStateGroupKeys.map(
+            {stateGroups.map(
               (_stateGroup) =>
                 issueFilterStore?.projectStates &&
-                issueFilterStore?.projectStates[_stateGroup] &&
+                issueFilterStore?.projectStates[_stateGroup?.key] &&
-                issueFilterStore?.projectStates[_stateGroup].length > 0 &&
+                issueFilterStore?.projectStates[_stateGroup?.key].length > 0 &&
-                issueFilterStore?.projectStates[_stateGroup].map(
+                issueFilterStore?.projectStates[_stateGroup?.key].map(
                   (_state: any) =>
                     issueFilterStore?.userFilters?.filters?.state != null &&
                     issueFilterStore?.userFilters?.filters?.state.includes(_state?.id) && (
                       <FilterPreviewContent
                         key={_state?.id}
-                        icon={<StateGroupIcons stateGroup={_stateGroup} color={_state?.color} />}
+                        icon={<StateGroupIcons stateGroup={_stateGroup?.key} color={_state?.color} />}
                         title={_state?.name}
                         style={stateStyles(_state?.group, _state?.color)}
                         onClick={() => handleFilter("state", _state?.id)}

web/components/issue-layouts/filters/assignees.tsx

@@ -8,13 +8,7 @@ import { observer } from "mobx-react-lite";
 import { useMobxStore } from "lib/mobx/store-provider";
 import { RootStore } from "store/root";
 
-export const MemberIcons = ({
+export const MemberIcons = ({ display_name, avatar }: { display_name: string; avatar: string | null }) => (
-  display_name,
-  avatar,
-}: {
-  display_name: string;
-  avatar: string | null;
-}) => (
   <div className="flex-shrink-0 rounded-sm overflow-hidden w-[20px] h-[20px] flex justify-center items-center">
     {avatar ? (
       <img src={avatar} alt={display_name || ""} className="" />
@@ -64,12 +58,7 @@ export const FilterAssignees = observer(() => {
                     : false
                 }
                 onClick={() => handleFilter("assignees", _member?.member?.id)}
-                icon={
+                icon={<MemberIcons display_name={_member?.member.display_name} avatar={_member?.member.avatar} />}
-                  <MemberIcons
-                    display_name={_member?.member.display_name}
-                    avatar={_member?.member.avatar}
-                  />
-                }
                 title={`${_member?.member?.display_name} (${_member?.member?.first_name} ${_member?.member?.last_name})`}
               />
             ))}

web/components/issue-layouts/filters/created-by.tsx

@@ -47,12 +47,7 @@ export const FilterCreatedBy = observer(() => {
                     : false
                 }
                 onClick={() => handleFilter("created_by", _member?.member?.id)}
-                icon={
+                icon={<MemberIcons display_name={_member?.member.display_name} avatar={_member?.member.avatar} />}
-                  <MemberIcons
-                    display_name={_member?.member.display_name}
-                    avatar={_member?.member.avatar}
-                  />
-                }
                 title={`${_member?.member?.display_name} (${_member?.member?.first_name} ${_member?.member?.last_name})`}
               />
             ))}

web/components/issue-layouts/filters/index.tsx

@@ -23,7 +23,7 @@ export const FilterSelection = observer(() => {
   const handleFilterSectionVisibility = (section_key: string) =>
     issueFilterStore?.issueView &&
     issueFilterStore?.issueLayout &&
-    issueFilterVisibilityData[issueFilterStore?.issueView === "my_issues" ? "my_issues" : "others"]?.filters?.[
+    issueFilterVisibilityData[issueFilterStore?.issueView === "my_issues" ? "my_issues" : "issues"]?.filters?.[
       issueFilterStore?.issueLayout
     ]?.includes(section_key);
 

web/components/issue-layouts/filters/state-group.tsx

@@ -31,51 +31,31 @@ export const StateGroupIcons = ({
   if (stateGroup === "cancelled")
     return (
       <div className="flex-shrink-0 rounded-sm overflow-hidden w-[20px] h-[20px] flex justify-center items-center">
-        <StateGroupCancelledIcon
+        <StateGroupCancelledIcon width={width} height={height} color={color ? color : STATE_GROUP_COLORS[stateGroup]} />
-          width={width}
-          height={height}
-          color={color ? color : STATE_GROUP_COLORS[stateGroup]}
-        />
       </div>
     );
   if (stateGroup === "completed")
     return (
       <div className="flex-shrink-0 rounded-sm overflow-hidden w-[20px] h-[20px] flex justify-center items-center">
-        <StateGroupCompletedIcon
+        <StateGroupCompletedIcon width={width} height={height} color={color ? color : STATE_GROUP_COLORS[stateGroup]} />
-          width={width}
-          height={height}
-          color={color ? color : STATE_GROUP_COLORS[stateGroup]}
-        />
       </div>
     );
   if (stateGroup === "started")
     return (
       <div className="flex-shrink-0 rounded-sm overflow-hidden w-[20px] h-[20px] flex justify-center items-center">
-        <StateGroupStartedIcon
+        <StateGroupStartedIcon width={width} height={height} color={color ? color : STATE_GROUP_COLORS[stateGroup]} />
-          width={width}
-          height={height}
-          color={color ? color : STATE_GROUP_COLORS[stateGroup]}
-        />
       </div>
     );
   if (stateGroup === "unstarted")
     return (
       <div className="flex-shrink-0 rounded-sm overflow-hidden w-[20px] h-[20px] flex justify-center items-center">
-        <StateGroupUnstartedIcon
+        <StateGroupUnstartedIcon width={width} height={height} color={color ? color : STATE_GROUP_COLORS[stateGroup]} />
-          width={width}
-          height={height}
-          color={color ? color : STATE_GROUP_COLORS[stateGroup]}
-        />
       </div>
     );
   if (stateGroup === "backlog")
     return (
       <div className="flex-shrink-0 rounded-sm overflow-hidden w-[20px] h-[20px] flex justify-center items-center">
-        <StateGroupBacklogIcon
+        <StateGroupBacklogIcon width={width} height={height} color={color ? color : STATE_GROUP_COLORS[stateGroup]} />
-          width={width}
-          height={height}
-          color={color ? color : STATE_GROUP_COLORS[stateGroup]}
-        />
       </div>
     );
   return <></>;

web/components/issue-layouts/filters/state.tsx

@@ -9,7 +9,7 @@ import { observer } from "mobx-react-lite";
 import { useMobxStore } from "lib/mobx/store-provider";
 import { RootStore } from "store/root";
 // store default data
-import { issueStateGroupKeys } from "store/issue-views/issue_data";
+import { stateGroups } from "store/issue-views/issue_data";
 
 export const FilterState = observer(() => {
   const store: RootStore = useMobxStore();
@@ -28,8 +28,8 @@ export const FilterState = observer(() => {
     issueFilterStore.handleUserFilter("filters", key, _value);
   };
 
-  const countAllState = issueStateGroupKeys
+  const countAllState = stateGroups
-    .map((_stateGroup) => issueFilterStore?.projectStates?.[_stateGroup].length || 0)
+    .map((_stateGroup) => issueFilterStore?.projectStates?.[_stateGroup?.key].length || 0)
     .reduce((sum: number, currentValue: number) => sum + currentValue, 0);
 
   console.log("countAllState", countAllState);
@@ -43,12 +43,12 @@ export const FilterState = observer(() => {
       />
       {previewEnabled && (
         <div className="space-y-[2px] pt-1">
-          {issueStateGroupKeys.map(
+          {stateGroups.map(
             (_stateGroup) =>
               issueFilterStore?.projectStates &&
-              issueFilterStore?.projectStates[_stateGroup] &&
+              issueFilterStore?.projectStates[_stateGroup?.key] &&
-              issueFilterStore?.projectStates[_stateGroup].length > 0 &&
+              issueFilterStore?.projectStates[_stateGroup?.key].length > 0 &&
-              issueFilterStore?.projectStates[_stateGroup].map((_state: any) => (
+              issueFilterStore?.projectStates[_stateGroup?.key].map((_state: any) => (
                 <FilterOption
                   key={_state?.id}
                   isChecked={
@@ -58,7 +58,7 @@ export const FilterState = observer(() => {
                       : false
                   }
                   onClick={() => handleFilter("state", _state?.id)}
-                  icon={<StateGroupIcons stateGroup={_stateGroup} color={_state?.color} />}
+                  icon={<StateGroupIcons stateGroup={_stateGroup?.key} color={_state?.color} />}
                   title={_state?.name}
                 />
               ))

web/components/issue-layouts/helpers/dropdown.tsx

@@ -21,11 +21,7 @@ export const IssueDropdown = ({ children, title = "Dropdown" }: IIssueDropdown)
           >
             <div className="font-medium">{title}</div>
             <div className="w-[14px] h-[14px] flex justify-center items-center">
-              {open ? (
+              {open ? <ChevronUp width={14} strokeWidth={2} /> : <ChevronDown width={14} strokeWidth={2} />}
-                <ChevronUp width={14} strokeWidth={2} />
-              ) : (
-                <ChevronDown width={14} strokeWidth={2} />
-              )}
             </div>
           </Popover.Button>
           <Transition

web/components/issue-layouts/helpers/filter-header.tsx

@@ -8,11 +8,7 @@ interface IFilterHeader {
   handleIsPreviewEnabled: () => void;
 }
 
-export const FilterHeader = ({
+export const FilterHeader = ({ title, isPreviewEnabled, handleIsPreviewEnabled }: IFilterHeader) => (
-  title,
-  isPreviewEnabled,
-  handleIsPreviewEnabled,
-}: IFilterHeader) => (
   <div className="flex items-center justify-between gap-2 p-[6px] pb-1 bg-custom-background-100 sticky top-0">
     <div className="text-gray-500 text-xs text-custom-text-300 font-medium">{title}</div>
     <div

web/components/issue-layouts/helpers/filter-option.tsx

@@ -10,13 +10,7 @@ interface IFilterOption {
   onClick?: () => void;
 }
 
-export const FilterOption = ({
+export const FilterOption = ({ isChecked, icon, title, multiple = true, onClick }: IFilterOption) => (
-  isChecked,
-  icon,
-  title,
-  multiple = true,
-  onClick,
-}: IFilterOption) => (
   <div
     className="flex items-center gap-3 cursor-pointer rounded p-[6px] py-[5px] transition-all hover:bg-custom-border-100"
     onClick={onClick}

web/components/issue-layouts/layout-selection.tsx

@@ -44,9 +44,9 @@ export const LayoutSelection = observer(() => {
 
   const handleLayoutSectionVisibility = (layout_key: string) =>
     issueFilterStore?.issueView &&
-    issueFilterVisibilityData[
+    issueFilterVisibilityData[issueFilterStore?.issueView === "my_issues" ? "my_issues" : "issues"].layout.includes(
-      issueFilterStore?.issueView === "my_issues" ? "my_issues" : "others"
+      layout_key
-    ].layout.includes(layout_key);
+    );
 
   const handleLayoutSelection = (_layoutKey: string) => {
     issueFilterStore.handleUserFilter("display_filters", "layout", _layoutKey);
@@ -76,9 +76,7 @@ export const LayoutSelection = observer(() => {
             <div
               key={_layout?.key}
               className={`w-[28px] h-[22px] rounded flex justify-center items-center cursor-pointer transition-all hover:bg-custom-background-100 overflow-hidden group ${
-                issueFilterStore?.issueLayout == _layout?.key
+                issueFilterStore?.issueLayout == _layout?.key ? `bg-custom-background-100 shadow shadow-gray-200` : ``
-                  ? `bg-custom-background-100 shadow shadow-gray-200`
-                  : ``
               }}`}
               onClick={() => handleLayoutSelection(_layout?.key)}
             >

web/components/issue-layouts/list/group-header.tsx

@@ -11,30 +11,20 @@ export interface IIssueListGroupHeader {
 export const IssueListGroupHeader: FC<IIssueListGroupHeader> = (props) => {
   const { groupId, groupBy } = props;
 
-  const { issueView: issueViewStore, issueFilters: issueFilterStore }: RootStore = useMobxStore();
+  const { issueFilters: issueFilterStore }: RootStore = useMobxStore();
 
   return (
     <div>
       {groupBy === "state" && <>{issueFilterStore.getProjectStateById(groupId)?.name}</>}
       {groupBy === "state_detail.group" && <>{groupId}</>}
       {groupBy === "priority" && <>{groupId}</>}
-      {groupBy === "project" && (
+      {groupBy === "project" && <>{issueFilterStore.workspaceProjects?.find((p) => (p.id = groupId))}</>}
-        <>{issueFilterStore.workspaceProjects?.find((p) => (p.id = groupId))}</>
+      {groupBy === "labels" && <>{issueFilterStore.projectLabels?.find((p) => p.id === groupId)?.name || " None"}</>}
-      )}
-      {groupBy === "labels" && (
-        <>{issueFilterStore.projectLabels?.find((p) => p.id === groupId)?.name || " None"}</>
-      )}
       {groupBy === "assignees" && (
-        <>
+        <>{issueFilterStore.projectMembers?.find((p) => p?.member?.id === groupId)?.member?.display_name || " None"}</>
-          {issueFilterStore.projectMembers?.find((p) => p?.member?.id === groupId)?.member
-            ?.display_name || " None"}
-        </>
       )}
       {groupBy === "created_by" && (
-        <>
+        <>{issueFilterStore.projectMembers?.find((p) => p?.member?.id === groupId)?.member?.display_name || " None"}</>
-          {issueFilterStore.projectMembers?.find((p) => p?.member?.id === groupId)?.member
-            ?.display_name || " None"}
-        </>
       )}
     </div>
   );

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

@@ -4,17 +4,11 @@ import { IssueListItem } from "./item";
 import { observer } from "mobx-react-lite";
 
 export interface IIssueListView {
-  issues: IIssue[];
+  issues: IIssue[] | null;
   groupId: string;
 }
 
 export const IssueListView: FC<IIssueListView> = observer((props) => {
   const { issues = [], groupId } = props;
-  return (
+  return <div>{issues && issues.map((issue) => <IssueListItem issue={issue} groupId={groupId} />)}</div>;
-    <div>
-      {issues.map((issue) => (
-        <IssueListItem issue={issue} groupId={groupId} />
-      ))}
-    </div>
-  );
 });

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

@@ -20,7 +20,7 @@ export const IssueListViewRoot = observer(() => {
         <div>Loading...</div>
       ) : (
         <>
-          {Object.keys(issueViewStore?.getIssues).map((groupId) => (
+          {Object.keys(issueViewStore?.getIssues).map((groupId: any) => (
             <Disclosure key={groupId}>
               {({ open }) => (
                 <>
@@ -31,7 +31,10 @@ export const IssueListViewRoot = observer(() => {
                     />
                   </Disclosure.Button>
                   <Disclosure.Panel className="px-4 pt-4 pb-2">
-                    <IssueListView issues={issueViewStore?.getIssues?.[groupId]} groupId={groupId} />
+                    <IssueListView
+                      issues={(groupId && issueViewStore?.getIssues?.[groupId]) ?? null}
+                      groupId={groupId}
+                    />
                   </Disclosure.Panel>
                 </>
               )}

web/store/issue-views/Issues.ts

@@ -14,11 +14,11 @@ export interface IIssues {
 }
 
 export interface IIssuesLayout {
-  list: IIssues;
+  list: IIssues[];
-  kanban: IIssues;
+  kanban: IIssues[];
-  calendar: IIssues;
+  calendar: IIssues[];
-  spreadsheet: IIssues;
+  spreadsheet: IIssues[];
-  gantt_chart: IIssues;
+  gantt_chart: IIssues[];
 }
 
 export interface IIssueState {
@@ -143,14 +143,14 @@ class IssueViewStore implements IIssueViewStore {
     return null;
   }
 
-  updateIssues = (group_id: string | null, issue_id: string | null, data: any) => {
+  updateIssues = (group_id: any = null, issue_id: string | null, data: any) => {
     const currentWorkspaceId: string | null = this.rootStore.issueFilters.workspaceId;
     const currentProjectId: string | null = this.rootStore.issueFilters.projectId;
-    const currentModuleId: string | null = this.rootStore.issueFilters.moduleId;
+    // const currentModuleId: string | null = this.rootStore.issueFilters.moduleId;
-    const currentCycleId: string | null = this.rootStore.issueFilters.cycleId;
+    // const currentCycleId: string | null = this.rootStore.issueFilters.cycleId;
-    const currentViewId: string | null = this.rootStore.issueFilters.viewId;
+    // const currentViewId: string | null = this.rootStore.issueFilters.viewId;
     const currentView: TIssueViews | null = this.rootStore.issueFilters.issueView;
-    const currentLayout: TIssueLayouts | null | undefined = this.rootStore.issueFilters.issueLayout;
+    const currentLayout: TIssueLayouts | null = this.rootStore.issueFilters.issueLayout;
 
     if (!currentView || !currentWorkspaceId || !currentLayout || !issue_id) return null;
 
@@ -170,7 +170,7 @@ class IssueViewStore implements IIssueViewStore {
               },
             },
           },
-        };
+        } as any;
       } else {
         this.issues = {
           ...this.issues,
@@ -183,7 +183,7 @@ class IssueViewStore implements IIssueViewStore {
               ),
             },
           },
-        };
+        } as any;
       }
     }
 
@@ -210,7 +210,7 @@ class IssueViewStore implements IIssueViewStore {
               },
             },
           },
-        };
+        } as any;
       } else {
         this.issues = {
           ...this.issues,
@@ -229,7 +229,7 @@ class IssueViewStore implements IIssueViewStore {
               },
             },
           },
-        };
+        } as any;
       }
     }
   };

web/store/issue-views/issue_data.ts

@@ -1,4 +1,6 @@
 import { renderDateFormat } from "helpers/date-time.helper";
+// types
+import { TIssueLayouts, TIssueParams } from "./issue_filters";
 
 export type TStateGroup = "backlog" | "unstarted" | "started" | "completed" | "cancelled";
 
@@ -153,6 +155,83 @@ export const issueFilterVisibilityData: any = {
   },
 };
 
+export const handleIssueQueryParamsByLayout = (_layout: TIssueLayouts | undefined): TIssueParams[] | null => {
+  if (_layout === "list")
+    return [
+      "priority",
+      "state_group",
+      "state",
+      "assignees",
+      "created_by",
+      "labels",
+      "start_date",
+      "target_date",
+      "group_by",
+      "order_by",
+      "type",
+      "sub_issue",
+      "show_empty_groups",
+    ];
+  if (_layout === "kanban")
+    return [
+      "priority",
+      "state_group",
+      "state",
+      "assignees",
+      "created_by",
+      "labels",
+      "start_date",
+      "target_date",
+      "group_by",
+      "order_by",
+      "type",
+      "sub_issue",
+      "show_empty_groups",
+    ];
+  if (_layout === "calendar")
+    return [
+      "priority",
+      "state_group",
+      "state",
+      "assignees",
+      "created_by",
+      "labels",
+      "start_date",
+      "target_date",
+      "type",
+      "calendar_date_range",
+    ];
+  if (_layout === "spreadsheet")
+    return [
+      "priority",
+      "state_group",
+      "state",
+      "assignees",
+      "created_by",
+      "labels",
+      "start_date",
+      "target_date",
+      "type",
+      "sub_issue",
+    ];
+  if (_layout === "gantt_chart")
+    return [
+      "priority",
+      "state",
+      "assignees",
+      "created_by",
+      "labels",
+      "start_date",
+      "target_date",
+      "order_by",
+      "type",
+      "sub_issue",
+      "start_target_date",
+    ];
+
+  return null;
+};
+
 export const handleIssueParamsDateFormat = (key: string, start_date: any | null, target_date: any | null) => {
   if (key === "last_week")
     return `${renderDateFormat(new Date(new Date().getTime() - 7 * 24 * 60 * 60 * 1000))};after,${renderDateFormat(

web/store/issue-views/issue_detail.ts

@@ -143,7 +143,7 @@ class IssueViewDetailStore implements IIssueViewDetailStore {
         this.rootStore.issueFilters.issueView || "issues"
       );
       const issueResponse = await this.issueService.patchIssue(workspaceId, projectId, issueId, data, undefined);
-      const issueList = await this.issueService.getIssuesWithParams(workspaceId, projectId, filteredParams);
+      const issueList = (await this.issueService.getIssuesWithParams(workspaceId, projectId, filteredParams)) as any;
       console.log("issueList", issueList);
 
       if (issueResponse) {

web/store/issue-views/issue_filters.ts

@@ -1,4 +1,4 @@
-import { observable, action, computed, makeObservable, runInAction, autorun } from "mobx";
+import { observable, action, computed, makeObservable, runInAction } from "mobx";
 // types
 import { RootStore } from "../root";
 // services
@@ -11,20 +11,22 @@ import { ProjectCycleServices } from "services/cycles.service";
 import { ViewServices as ProjectViewServices } from "services/views.service";
 // default data
 import {
-  filtersPriority,
+  priorities,
-  filterStateGroup,
+  stateGroups,
-  filtersStartDate,
+  startDateOptions,
-  filtersDueDate,
+  dueDateOptions,
-  displayPropertyGroupBy,
+  groupByOptions,
-  displayPropertyOrderBy,
+  orderByOptions,
-  displayPropertyIssueType,
+  issueTypes,
   displayProperties,
   extraProperties,
+  handleIssueQueryParamsByLayout,
 } from "./issue_data";
-import { IIssueState } from "./Issues";
 
 export type TIssueViews = "my_issues" | "issues" | "modules" | "views" | "cycles";
+
 export type TIssueLayouts = "list" | "kanban" | "calendar" | "spreadsheet" | "gantt_chart";
+
 export type TIssueParams =
   | "priority"
   | "state_group"
@@ -149,7 +151,6 @@ export interface IIssueFilterStore {
   error: any | null;
 
   // current workspace and project id
-  myUserId: string | null;
   workspaceId: string | null;
   projectId: string | null;
   moduleId: string | null;
@@ -205,13 +206,13 @@ class IssueFilterStore implements IIssueFilterStore {
   issueView: TIssueViews | null = null;
 
   issueRenderFilters: IIssueRenderFilters = {
-    priority: filtersPriority,
+    priority: priorities,
-    state_group: filterStateGroup,
+    state_group: stateGroups,
-    start_date: filtersStartDate,
+    start_date: startDateOptions,
-    due_date: filtersDueDate,
+    due_date: dueDateOptions,
-    group_by: displayPropertyGroupBy,
+    group_by: groupByOptions,
-    order_by: displayPropertyOrderBy,
+    order_by: orderByOptions,
-    issue_type: displayPropertyIssueType,
+    issue_type: issueTypes,
     display_properties: displayProperties,
     extra_properties: extraProperties,
     workspace_properties: {},
@@ -235,7 +236,6 @@ class IssueFilterStore implements IIssueFilterStore {
       loader: observable,
       error: observable,
 
-      myUserId: observable,
       workspaceId: observable,
       projectId: observable,
       moduleId: observable,
@@ -311,6 +311,8 @@ class IssueFilterStore implements IIssueFilterStore {
         this.issueFilters?.[this.workspaceId]?.project_issue_properties?.[this.projectId]?.issues?.display_filters
           ?.layout || null
       );
+
+    return null;
   }
 
   get workspaceProjects() {
@@ -692,81 +694,8 @@ class IssueFilterStore implements IIssueFilterStore {
     // in spreadsheet sub issue is false for sure
     // in gantt start_target_date is true for sure
 
-    let filteredParams: TIssueParams[] = [];
+    const filteredParams: TIssueParams[] | null = handleIssueQueryParamsByLayout(_layout);
-    if (_layout === "list")
+    if (filteredParams) filteredRouteParams = this.computedFilter(filteredRouteParams, filteredParams);
-      filteredParams = [
-        "priority",
-        "state_group",
-        "state",
-        "assignees",
-        "created_by",
-        "labels",
-        "start_date",
-        "target_date",
-        "group_by",
-        "order_by",
-        "type",
-        "sub_issue",
-        "show_empty_groups",
-      ];
-    if (_layout === "kanban")
-      filteredParams = [
-        "priority",
-        "state_group",
-        "state",
-        "assignees",
-        "created_by",
-        "labels",
-        "start_date",
-        "target_date",
-        "group_by",
-        "order_by",
-        "type",
-        "sub_issue",
-        "show_empty_groups",
-      ];
-    if (_layout === "calendar")
-      filteredParams = [
-        "priority",
-        "state_group",
-        "state",
-        "assignees",
-        "created_by",
-        "labels",
-        "start_date",
-        "target_date",
-        "type",
-        "calendar_date_range",
-      ];
-    if (_layout === "spreadsheet")
-      filteredParams = [
-        "priority",
-        "state_group",
-        "state",
-        "assignees",
-        "created_by",
-        "labels",
-        "start_date",
-        "target_date",
-        "type",
-        "sub_issue",
-      ];
-    if (_layout === "gantt_chart")
-      filteredParams = [
-        "priority",
-        "state",
-        "assignees",
-        "created_by",
-        "labels",
-        "start_date",
-        "target_date",
-        "order_by",
-        "type",
-        "sub_issue",
-        "start_target_date",
-      ];
-
-    filteredRouteParams = this.computedFilter(filteredRouteParams, filteredParams);
 
     return filteredRouteParams;
   };
@@ -1054,10 +983,10 @@ class IssueFilterStore implements IIssueFilterStore {
       this.loader = true;
       this.error = null;
 
+      await this.rootStore.user.setCurrentUser();
       const issuesDisplayPropertiesResponse = await this.issueService.getIssueProperties(workspaceId, projectId);
 
       if (issuesDisplayPropertiesResponse) {
-        const _myUserId: string = issuesDisplayPropertiesResponse?.user;
         const _issuesDisplayPropertiesResponse: any = {
           ...this.issueFilters,
           [workspaceId]: {
@@ -1076,7 +1005,6 @@ class IssueFilterStore implements IIssueFilterStore {
         };
 
         runInAction(() => {
-          this.myUserId = _myUserId;
           this.issueFilters = _issuesDisplayPropertiesResponse;
           this.loader = false;
           this.error = null;
@@ -1103,7 +1031,7 @@ class IssueFilterStore implements IIssueFilterStore {
 
       const payload = {
         properties: data,
-        user: this.myUserId,
+        user: this.rootStore?.user?.currentUser?.id,
       };
       const issuesDisplayPropertiesResponse = await this.issueService.patchIssueProperties(
         workspaceId,

web/store/issue-views/project.ts

@@ -0,0 +1,21 @@
+import { action, computed, makeObservable } from "mobx";
+// types
+import { RootStore } from "../root";
+
+export interface IIssueProject {}
+
+class IssueProject implements IIssueProject {
+  // root store
+  rootStore;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // computed
+      // actions
+    });
+
+    this.rootStore = _rootStore;
+  }
+}
+
+export default IssueProject;

web/store/issue-views/workspace.ts

@@ -0,0 +1,21 @@
+import { action, computed, makeObservable } from "mobx";
+// types
+import { RootStore } from "../root";
+
+export interface IIssueWorkspace {}
+
+class IssueWorkspace implements IIssueWorkspace {
+  // root store
+  rootStore;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // computed
+      // actions
+    });
+
+    this.rootStore = _rootStore;
+  }
+}
+
+export default IssueWorkspace;

web/store/root.ts

@@ -7,6 +7,8 @@ import ProjectStore, { IProjectStore } from "./project";
 import ProjectPublishStore, { IProjectPublishStore } from "./project-publish";
 import IssuesStore from "./issues";
 // issues views and filters
+import IssueWorkspace from "./issue-views/workspace";
+import IssueProject from "./issue-views/project";
 import IssueFilterStore from "./issue-views/issue_filters";
 import IssueViewStore from "./issue-views/Issues";
 import IssueViewDetailStore from "./issue-views/issue_detail";
@@ -20,6 +22,9 @@ export class RootStore {
   project: IProjectStore;
   projectPublish: IProjectPublishStore;
   issues: IssuesStore;
+  // issues views and filters
+  issueWorkspace: IssueWorkspace;
+  issueProject: IssueProject;
   issueFilters: IssueFilterStore;
   issueView: IssueViewStore;
   issueDetail: IssueViewDetailStore;
@@ -31,6 +36,9 @@ export class RootStore {
     this.project = new ProjectStore(this);
     this.projectPublish = new ProjectPublishStore(this);
     this.issues = new IssuesStore(this);
+    // issues views and filters
+    this.issueWorkspace = new IssueWorkspace(this);
+    this.issueProject = new IssueProject(this);
     this.issueFilters = new IssueFilterStore(this);
     this.issueView = new IssueViewStore(this);
     this.issueDetail = new IssueViewDetailStore(this);