From 89e982d08979e39e264188b239fcdd4f78ae0ccd Mon Sep 17 00:00:00 2001
From: gurusainath <gurusainath007@gmail.com>
Date: Mon, 2 Oct 2023 12:12:02 +0530
Subject: [PATCH 1/4] chore: issue properties for state, priorit, labels and
 members

---
 .../issues/issue-layouts/kanban/block.tsx     |  10 +-
 .../issues/issue-layouts/kanban/default.tsx   | 163 ++++++-----
 .../issue-layouts/kanban/headers/priority.tsx |   1 +
 .../issue-layouts/kanban/properties.tsx       | 246 ++++++++++------
 .../issues/issue-layouts/kanban/root.tsx      |  11 +-
 .../issues/issue-layouts/kanban/swimlanes.tsx | 262 +++++++++---------
 .../issues/issue-layouts/properties/date.tsx  |   4 +
 .../properties/dropdown-template.tsx          | 177 ++++++++++++
 .../issue-layouts/properties/estimates.tsx    | 215 ++++++++++++++
 .../issue-layouts/properties/labels.tsx       | 228 +++++++++++++++
 .../issue-layouts/properties/member.tsx       | 215 ++++++++++++++
 .../issue-layouts/properties/priority.tsx     | 220 +++++++++++++++
 .../issues/issue-layouts/properties/state.tsx | 215 ++++++++++++++
 web/components/states/state-select.tsx        | 139 +++++-----
 web/store/issue.ts                            |  10 +-
 15 files changed, 1752 insertions(+), 364 deletions(-)
 create mode 100644 web/components/issues/issue-layouts/properties/date.tsx
 create mode 100644 web/components/issues/issue-layouts/properties/dropdown-template.tsx
 create mode 100644 web/components/issues/issue-layouts/properties/estimates.tsx
 create mode 100644 web/components/issues/issue-layouts/properties/labels.tsx
 create mode 100644 web/components/issues/issue-layouts/properties/member.tsx
 create mode 100644 web/components/issues/issue-layouts/properties/priority.tsx
 create mode 100644 web/components/issues/issue-layouts/properties/state.tsx

diff --git a/web/components/issues/issue-layouts/kanban/block.tsx b/web/components/issues/issue-layouts/kanban/block.tsx
index ad424df258f..2f23ec9c88a 100644
--- a/web/components/issues/issue-layouts/kanban/block.tsx
+++ b/web/components/issues/issue-layouts/kanban/block.tsx
@@ -8,9 +8,10 @@ interface IssueBlockProps {
   columnId: string;
   issues: any;
   isDragDisabled: boolean;
+  handleIssues?: (sub_group_by: string | null, group_by: string | null, issue: any) => void;
 }
 
-export const IssueBlock = ({ sub_group_id, columnId, issues, isDragDisabled }: IssueBlockProps) => (
+export const IssueBlock = ({ sub_group_id, columnId, issues, isDragDisabled, handleIssues }: IssueBlockProps) => (
   <>
     {issues && issues.length > 0 ? (
       <>
@@ -37,7 +38,12 @@ export const IssueBlock = ({ sub_group_id, columnId, issues, isDragDisabled }: I
                   <div className="text-xs line-clamp-1 text-custom-text-300">ONE-{issue.sequence_id}</div>
                   <div className="line-clamp-2 h-[40px] text-sm font-medium text-custom-text-100">{issue.name}</div>
                   <div className="min-h-[22px]">
-                    <KanBanProperties />
+                    <KanBanProperties
+                      sub_group_id={sub_group_id}
+                      columnId={columnId}
+                      issue={issue}
+                      handleIssues={handleIssues}
+                    />
                   </div>
                 </div>
               </div>
diff --git a/web/components/issues/issue-layouts/kanban/default.tsx b/web/components/issues/issue-layouts/kanban/default.tsx
index 842550e4009..ec6a09addee 100644
--- a/web/components/issues/issue-layouts/kanban/default.tsx
+++ b/web/components/issues/issue-layouts/kanban/default.tsx
@@ -19,12 +19,12 @@ export interface IGroupByKanBan {
   sub_group_id: string;
   list: any;
   listKey: string;
-  handleIssues?: () => void;
   isDragDisabled: boolean;
+  handleIssues?: (sub_group_by: string | null, group_by: string | null, issue: any) => void;
 }
 
 const GroupByKanBan: React.FC<IGroupByKanBan> = observer(
-  ({ issues, sub_group_by, group_by, sub_group_id = "null", list, listKey, isDragDisabled }) => {
+  ({ issues, sub_group_by, group_by, sub_group_id = "null", list, listKey, isDragDisabled, handleIssues }) => {
     const { issueKanBanView: issueKanBanViewStore }: RootStore = useMobxStore();
 
     const verticalAlignPosition = (_list: any) =>
@@ -42,7 +42,7 @@ const GroupByKanBan: React.FC<IGroupByKanBan> = observer(
                     column_id={getValueFromObject(_list, listKey) as string}
                     sub_group_by={sub_group_by}
                     group_by={group_by}
-                    issues_count={issues?.[getValueFromObject(_list, listKey) as string].length || 0}
+                    issues_count={issues?.[getValueFromObject(_list, listKey) as string]?.length || 0}
                   />
                 </div>
               )}
@@ -64,6 +64,7 @@ const GroupByKanBan: React.FC<IGroupByKanBan> = observer(
                             columnId={getValueFromObject(_list, listKey) as string}
                             issues={issues[getValueFromObject(_list, listKey) as string]}
                             isDragDisabled={isDragDisabled}
+                            handleIssues={handleIssues}
                           />
                         ) : (
                           isDragDisabled && (
@@ -90,86 +91,94 @@ export interface IKanBan {
   sub_group_by: string | null;
   group_by: string | null;
   sub_group_id?: string;
-  handleIssues?: () => void;
   handleDragDrop?: (result: any) => void | undefined;
+  handleIssues?: (sub_group_by: string | null, group_by: string | null, issue: any) => void;
 }
 
-export const KanBan: React.FC<IKanBan> = observer(({ issues, sub_group_by, group_by, sub_group_id = "null" }) => {
-  const { project: projectStore, issueKanBanView: issueKanBanViewStore }: RootStore = useMobxStore();
+export const KanBan: React.FC<IKanBan> = observer(
+  ({ issues, sub_group_by, group_by, sub_group_id = "null", handleIssues }) => {
+    const { project: projectStore, issueKanBanView: issueKanBanViewStore }: RootStore = useMobxStore();
 
-  return (
-    <div className="relative w-full h-full">
-      {group_by && group_by === "state" && (
-        <GroupByKanBan
-          issues={issues}
-          group_by={group_by}
-          sub_group_by={sub_group_by}
-          sub_group_id={sub_group_id}
-          list={projectStore?.projectStates}
-          listKey={`id`}
-          isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
-        />
-      )}
+    return (
+      <div className="relative w-full h-full">
+        {group_by && group_by === "state" && (
+          <GroupByKanBan
+            issues={issues}
+            group_by={group_by}
+            sub_group_by={sub_group_by}
+            sub_group_id={sub_group_id}
+            list={projectStore?.projectStates}
+            listKey={`id`}
+            isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
+            handleIssues={handleIssues}
+          />
+        )}
 
-      {group_by && group_by === "state_detail.group" && (
-        <GroupByKanBan
-          issues={issues}
-          group_by={group_by}
-          sub_group_by={sub_group_by}
-          sub_group_id={sub_group_id}
-          list={ISSUE_STATE_GROUPS}
-          listKey={`key`}
-          isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
-        />
-      )}
+        {group_by && group_by === "state_detail.group" && (
+          <GroupByKanBan
+            issues={issues}
+            group_by={group_by}
+            sub_group_by={sub_group_by}
+            sub_group_id={sub_group_id}
+            list={ISSUE_STATE_GROUPS}
+            listKey={`key`}
+            isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
+            handleIssues={handleIssues}
+          />
+        )}
 
-      {group_by && group_by === "priority" && (
-        <GroupByKanBan
-          issues={issues}
-          group_by={group_by}
-          sub_group_by={sub_group_by}
-          sub_group_id={sub_group_id}
-          list={ISSUE_PRIORITIES}
-          listKey={`key`}
-          isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
-        />
-      )}
+        {group_by && group_by === "priority" && (
+          <GroupByKanBan
+            issues={issues}
+            group_by={group_by}
+            sub_group_by={sub_group_by}
+            sub_group_id={sub_group_id}
+            list={ISSUE_PRIORITIES}
+            listKey={`key`}
+            isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
+            handleIssues={handleIssues}
+          />
+        )}
 
-      {group_by && group_by === "labels" && (
-        <GroupByKanBan
-          issues={issues}
-          group_by={group_by}
-          sub_group_by={sub_group_by}
-          sub_group_id={sub_group_id}
-          list={projectStore?.projectLabels}
-          listKey={`id`}
-          isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
-        />
-      )}
+        {group_by && group_by === "labels" && (
+          <GroupByKanBan
+            issues={issues}
+            group_by={group_by}
+            sub_group_by={sub_group_by}
+            sub_group_id={sub_group_id}
+            list={projectStore?.projectLabels}
+            listKey={`id`}
+            isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
+            handleIssues={handleIssues}
+          />
+        )}
 
-      {group_by && group_by === "assignees" && (
-        <GroupByKanBan
-          issues={issues}
-          group_by={group_by}
-          sub_group_by={sub_group_by}
-          sub_group_id={sub_group_id}
-          list={projectStore?.projectMembers}
-          listKey={`member.id`}
-          isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
-        />
-      )}
+        {group_by && group_by === "assignees" && (
+          <GroupByKanBan
+            issues={issues}
+            group_by={group_by}
+            sub_group_by={sub_group_by}
+            sub_group_id={sub_group_id}
+            list={projectStore?.projectMembers}
+            listKey={`member.id`}
+            isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
+            handleIssues={handleIssues}
+          />
+        )}
 
-      {group_by && group_by === "created_by" && (
-        <GroupByKanBan
-          issues={issues}
-          group_by={group_by}
-          sub_group_by={sub_group_by}
-          sub_group_id={sub_group_id}
-          list={projectStore?.projectMembers}
-          listKey={`member.id`}
-          isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
-        />
-      )}
-    </div>
-  );
-});
+        {group_by && group_by === "created_by" && (
+          <GroupByKanBan
+            issues={issues}
+            group_by={group_by}
+            sub_group_by={sub_group_by}
+            sub_group_id={sub_group_id}
+            list={projectStore?.projectMembers}
+            listKey={`member.id`}
+            isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
+            handleIssues={handleIssues}
+          />
+        )}
+      </div>
+    );
+  }
+);
diff --git a/web/components/issues/issue-layouts/kanban/headers/priority.tsx b/web/components/issues/issue-layouts/kanban/headers/priority.tsx
index 38e4afbc4e5..91820530b01 100644
--- a/web/components/issues/issue-layouts/kanban/headers/priority.tsx
+++ b/web/components/issues/issue-layouts/kanban/headers/priority.tsx
@@ -8,6 +8,7 @@ import { HeaderSubGroupByCard } from "./sub-group-by-card";
 // constants
 import { issuePriorityByKey } from "constants/issue";
 
+
 export interface IPriorityHeader {
   column_id: string;
   sub_group_by: string | null;
diff --git a/web/components/issues/issue-layouts/kanban/properties.tsx b/web/components/issues/issue-layouts/kanban/properties.tsx
index b2a8ce8ff89..3ed19bc06da 100644
--- a/web/components/issues/issue-layouts/kanban/properties.tsx
+++ b/web/components/issues/issue-layouts/kanban/properties.tsx
@@ -1,91 +1,177 @@
+// mobx
+import { observer } from "mobx-react-lite";
 // lucide icons
-import { Circle } from "lucide-react";
-
-export const KanBanProperties = () => {
-  console.log("properties");
-  return (
-    <div className="relative flex gap-2 overflow-hidden overflow-x-auto whitespace-nowrap">
-      {/* basic properties */}
-      {/* state */}
-      <div className="flex-shrink-0 border border-custom-border-300 min-w-[22px] h-[22px] overflow-hidden rounded-sm flex justify-center items-center">
-        <div className="flex-shrink-0  w-[16px] h-[16px] flex justify-center items-center">
-          <Circle width={10} strokeWidth={2} />
-        </div>
-        <div className="pl-0.5 pr-1 text-xs">state</div>
-      </div>
+import { Circle, Layers, Link, Paperclip } from "lucide-react";
+// components
+import { IssuePropertyState } from "components/issues/issue-layouts/properties/state";
+import { IssuePropertyPriority } from "components/issues/issue-layouts/properties/priority";
+import { IssuePropertyLabels } from "components/issues/issue-layouts/properties/labels";
+import { IssuePropertyMember } from "components/issues/issue-layouts/properties/member";
+import { IssuePropertyEstimates } from "components/issues/issue-layouts/properties/estimates";
+import { Tooltip } from "components/ui";
 
-      {/* priority */}
-      <div className="flex-shrink-0 border border-custom-border-300 min-w-[22px] h-[22px] overflow-hidden rounded-sm flex justify-center items-center">
-        <div className="flex-shrink-0  w-[16px] h-[16px] flex justify-center items-center">
-          <Circle width={10} strokeWidth={2} />
-        </div>
-        <div className="pl-0.5 pr-1 text-xs">priority</div>
-      </div>
+export interface IKanBanProperties {
+  sub_group_id: string;
+  columnId: string;
+  issue: any;
+  handleIssues?: (sub_group_by: string | null, group_by: string | null, issue: any) => void;
+}
 
-      {/* label */}
-      <div className="flex-shrink-0 border border-custom-border-300 min-w-[22px] h-[22px] overflow-hidden rounded-sm flex justify-center items-center">
-        <div className="flex-shrink-0  w-[16px] h-[16px] flex justify-center items-center">
-          <Circle width={10} strokeWidth={2} />
-        </div>
-        <div className="pl-0.5 pr-1 text-xs">label</div>
-      </div>
+export const KanBanProperties: React.FC<IKanBanProperties> = observer(
+  ({ sub_group_id, columnId: group_id, issue, handleIssues }) => {
+    const handleState = (id: string) => {
+      if (handleIssues)
+        handleIssues(
+          !sub_group_id && sub_group_id === "null" ? null : sub_group_id,
+          !group_id && group_id === "null" ? null : group_id,
+          { ...issue, state: id }
+        );
+    };
 
-      {/* assignee */}
-      <div className="flex-shrink-0 border border-custom-border-300 min-w-[22px] h-[22px] overflow-hidden rounded-sm flex justify-center items-center">
-        <div className="flex-shrink-0  w-[16px] h-[16px] flex justify-center items-center">
-          <Circle width={10} strokeWidth={2} />
-        </div>
-        <div className="pl-0.5 pr-1 text-xs">assignee</div>
-      </div>
+    const handlePriority = (id: string) => {
+      if (handleIssues)
+        handleIssues(
+          !sub_group_id && sub_group_id === "null" ? null : sub_group_id,
+          !group_id && group_id === "null" ? null : group_id,
+          { ...issue, priority: id }
+        );
+    };
 
-      {/* start date */}
-      <div className="flex-shrink-0 border border-custom-border-300 min-w-[22px] h-[22px] overflow-hidden rounded-sm flex justify-center items-center">
-        <div className="flex-shrink-0  w-[16px] h-[16px] flex justify-center items-center">
-          <Circle width={10} strokeWidth={2} />
-        </div>
-        <div className="pl-0.5 pr-1 text-xs">start date</div>
-      </div>
+    const handleLabel = (id: string[]) => {
+      if (handleIssues)
+        handleIssues(
+          !sub_group_id && sub_group_id === "null" ? null : sub_group_id,
+          !group_id && group_id === "null" ? null : group_id,
+          { ...issue, labels: id }
+        );
+    };
 
-      {/* target/due date */}
-      <div className="flex-shrink-0 border border-custom-border-300 min-w-[22px] h-[22px] overflow-hidden rounded-sm flex justify-center items-center">
-        <div className="flex-shrink-0  w-[16px] h-[16px] flex justify-center items-center">
-          <Circle width={10} strokeWidth={2} />
-        </div>
-        <div className="pl-0.5 pr-1 text-xs">target/due date</div>
-      </div>
+    const handleAssignee = (id: string) => {
+      if (handleIssues)
+        handleIssues(
+          !sub_group_id && sub_group_id === "null" ? null : sub_group_id,
+          !group_id && group_id === "null" ? null : group_id,
+          { ...issue, state: id }
+        );
+    };
 
-      {/* extra render properties */}
-      {/* estimate */}
-      <div className="flex-shrink-0 border border-custom-border-300 min-w-[22px] h-[22px] overflow-hidden rounded-sm flex justify-center items-center">
-        <div className="flex-shrink-0 w-[16px] h-[16px] flex justify-center items-center">
-          <Circle width={10} strokeWidth={2} />
-        </div>
-        <div className="pl-0.5 pr-1 text-xs">0</div>
-      </div>
+    const handleStartDate = (id: string) => {
+      if (handleIssues)
+        handleIssues(
+          !sub_group_id && sub_group_id === "null" ? null : sub_group_id,
+          !group_id && group_id === "null" ? null : group_id,
+          { ...issue, state: id }
+        );
+    };
 
-      {/* sub-issues */}
-      <div className="flex-shrink-0 border border-custom-border-300 min-w-[22px] h-[22px] overflow-hidden rounded-sm flex justify-center items-center">
-        <div className="flex-shrink-0  w-[16px] h-[16px] flex justify-center items-center">
-          <Circle width={10} strokeWidth={2} />
-        </div>
-        <div className="pl-0.5 pr-1 text-xs">0</div>
-      </div>
+    const handleTargetDate = (id: string) => {
+      if (handleIssues)
+        handleIssues(
+          !sub_group_id && sub_group_id === "null" ? null : sub_group_id,
+          !group_id && group_id === "null" ? null : group_id,
+          { ...issue, state: id }
+        );
+    };
 
-      {/* attachments */}
-      <div className="flex-shrink-0 border border-custom-border-300 min-w-[22px] h-[22px] overflow-hidden rounded-sm flex justify-center items-center">
-        <div className="flex-shrink-0  w-[16px] h-[16px] flex justify-center items-center">
-          <Circle width={10} strokeWidth={2} />
-        </div>
-        <div className="pl-0.5 pr-1 text-xs">0</div>
-      </div>
+    const handleEstimates = (id: string) => {
+      if (handleIssues)
+        handleIssues(
+          !sub_group_id && sub_group_id === "null" ? null : sub_group_id,
+          !group_id && group_id === "null" ? null : group_id,
+          { ...issue, state: id }
+        );
+    };
+
+    return (
+      <div className="relative flex gap-2 overflow-hidden overflow-x-auto whitespace-nowrap">
+        {/* basic properties */}
+        {/* state */}
+        <IssuePropertyState
+          value={issue?.state || null}
+          dropdownArrow={false}
+          onChange={(id: string) => handleState(id)}
+          disabled={false}
+        />
+
+        {/* priority */}
+        <IssuePropertyPriority
+          value={issue?.priority || null}
+          dropdownArrow={false}
+          onChange={(id: string) => handlePriority(id)}
+          disabled={false}
+        />
+
+        {/* label */}
+        <IssuePropertyLabels
+          value={issue?.labels || null}
+          dropdownArrow={false}
+          onChange={(id: string[]) => handleLabel(id)}
+          disabled={false}
+        />
+
+        {/* assignee */}
+        {/* <IssuePropertyMember
+          value={issue?.assignees || null}
+          dropdownArrow={false}
+          onChange={(id: string) => handleAssignee(id)}
+          disabled={false}
+        /> */}
+
+        {/* start date */}
+        {/* <div className="flex-shrink-0 border border-custom-border-300 min-w-[22px] h-[22px] overflow-hidden rounded-sm flex justify-center items-center">
+          <div className="flex-shrink-0  w-[16px] h-[16px] flex justify-center items-center">
+            <Circle width={10} strokeWidth={2} />
+          </div>
+          <div className="pl-0.5 pr-1 text-xs">start date</div>
+        </div> */}
+
+        {/* target/due date */}
+        {/* <div className="flex-shrink-0 border border-custom-border-300 min-w-[22px] h-[22px] overflow-hidden rounded-sm flex justify-center items-center">
+          <div className="flex-shrink-0  w-[16px] h-[16px] flex justify-center items-center">
+            <Circle width={10} strokeWidth={2} />
+          </div>
+          <div className="pl-0.5 pr-1 text-xs">target/due date</div>
+        </div> */}
+
+        {/* estimates */}
+        {/* <IssuePropertyEstimates
+          value={issue?.state || null}
+          dropdownArrow={false}
+          onChange={(id: string) => handleEstimates(id)}
+          disabled={false}
+        /> */}
+
+        {/* extra render properties */}
+        {/* sub-issues */}
+        {/* <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>
+            <div className="pl-0.5 pr-1 text-xs">{issue.sub_issues_count}</div>
+          </div>
+        </Tooltip> */}
+
+        {/* attachments */}
+        {/* <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 w-[16px] h-[16px] flex justify-center items-center">
+              <Paperclip width={10} strokeWidth={2} />
+            </div>
+            <div className="pl-0.5 pr-1 text-xs">{issue.attachment_count}</div>
+          </div>
+        </Tooltip> */}
 
-      {/* link */}
-      <div className="flex-shrink-0 border border-custom-border-300 min-w-[22px] h-[22px] overflow-hidden rounded-sm flex justify-center items-center">
-        <div className="flex-shrink-0  w-[16px] h-[16px] flex justify-center items-center">
-          <Circle width={10} strokeWidth={2} />
-        </div>
-        <div className="pl-0.5 pr-1 text-xs">0</div>
+        {/* link */}
+        {/* <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  w-[16px] h-[16px] flex justify-center items-center">
+              <Link width={10} strokeWidth={2} />
+            </div>
+            <div className="pl-0.5 pr-1 text-xs">{issue.link_count}</div>
+          </div>
+        </Tooltip> */}
       </div>
-    </div>
-  );
-};
+    );
+  }
+);
diff --git a/web/components/issues/issue-layouts/kanban/root.tsx b/web/components/issues/issue-layouts/kanban/root.tsx
index 5701a297d49..23e870989dd 100644
--- a/web/components/issues/issue-layouts/kanban/root.tsx
+++ b/web/components/issues/issue-layouts/kanban/root.tsx
@@ -45,13 +45,20 @@ export const KanBanLayout: React.FC = observer(() => {
       : issueKanBanViewStore?.handleSwimlaneDragDrop(result.source, result.destination);
   };
 
+  const updateIssue = (sub_group_by: string | null, group_by: string | null, issue: any) => {
+    console.log("sub_group_by", sub_group_by);
+    console.log("group_by", group_by);
+    console.log("issue", issue);
+    issueStore.updateIssueStructure(group_by, sub_group_by, issue);
+  };
+
   return (
     <div className={`relative min-w-full w-max min-h-full h-max bg-custom-background-90`}>
       <DragDropContext onDragEnd={onDragEnd}>
         {currentKanBanView === "default" ? (
-          <KanBan issues={issues} sub_group_by={sub_group_by} group_by={group_by} />
+          <KanBan issues={issues} sub_group_by={sub_group_by} group_by={group_by} handleIssues={updateIssue} />
         ) : (
-          <KanBanSwimLanes issues={issues} sub_group_by={sub_group_by} group_by={group_by} />
+          <KanBanSwimLanes issues={issues} sub_group_by={sub_group_by} group_by={group_by} handleIssues={updateIssue} />
         )}
       </DragDropContext>
     </div>
diff --git a/web/components/issues/issue-layouts/kanban/swimlanes.tsx b/web/components/issues/issue-layouts/kanban/swimlanes.tsx
index 5579b33cd1c..4c72fa3b790 100644
--- a/web/components/issues/issue-layouts/kanban/swimlanes.tsx
+++ b/web/components/issues/issue-layouts/kanban/swimlanes.tsx
@@ -54,187 +54,199 @@ const SubGroupSwimlaneHeader: React.FC<ISubGroupSwimlaneHeader> = ({
 
 interface ISubGroupSwimlane extends ISubGroupSwimlaneHeader {
   issues: any;
+  handleIssues?: (sub_group_by: string | null, group_by: string | null, issue: any) => void;
 }
-const SubGroupSwimlane: React.FC<ISubGroupSwimlane> = observer(({ issues, sub_group_by, group_by, list, listKey }) => {
-  const { issueKanBanView: issueKanBanViewStore }: RootStore = useMobxStore();
-
-  const calculateIssueCount = (column_id: string) => {
-    let issueCount = 0;
-    issues?.[column_id] &&
-      Object.keys(issues?.[column_id])?.forEach((_list: any) => {
-        issueCount += issues?.[column_id]?.[_list]?.length || 0;
-      });
-    return issueCount;
-  };
-
-  return (
-    <div className="relative w-full min-h-full h-max">
-      {list &&
-        list.length > 0 &&
-        list.map((_list: any) => (
-          <div className="flex-shrink-0 flex flex-col">
-            <div className="sticky top-[50px] w-full z-[1] bg-custom-background-90 flex items-center py-1">
-              <div className="flex-shrink-0 sticky left-0 bg-custom-background-90 pr-2">
-                <KanBanSubGroupByHeaderRoot
-                  column_id={getValueFromObject(_list, listKey) as string}
-                  sub_group_by={sub_group_by}
-                  group_by={group_by}
-                  issues_count={calculateIssueCount(getValueFromObject(_list, listKey) as string)}
-                />
+const SubGroupSwimlane: React.FC<ISubGroupSwimlane> = observer(
+  ({ issues, sub_group_by, group_by, list, listKey, handleIssues }) => {
+    const { issueKanBanView: issueKanBanViewStore }: RootStore = useMobxStore();
+
+    const calculateIssueCount = (column_id: string) => {
+      let issueCount = 0;
+      issues?.[column_id] &&
+        Object.keys(issues?.[column_id])?.forEach((_list: any) => {
+          issueCount += issues?.[column_id]?.[_list]?.length || 0;
+        });
+      return issueCount;
+    };
+
+    return (
+      <div className="relative w-full min-h-full h-max">
+        {list &&
+          list.length > 0 &&
+          list.map((_list: any) => (
+            <div className="flex-shrink-0 flex flex-col">
+              <div className="sticky top-[50px] w-full z-[1] bg-custom-background-90 flex items-center py-1">
+                <div className="flex-shrink-0 sticky left-0 bg-custom-background-90 pr-2">
+                  <KanBanSubGroupByHeaderRoot
+                    column_id={getValueFromObject(_list, listKey) as string}
+                    sub_group_by={sub_group_by}
+                    group_by={group_by}
+                    issues_count={calculateIssueCount(getValueFromObject(_list, listKey) as string)}
+                  />
+                </div>
+                <div className="w-full border-b border-custom-border-400 border-dashed" />
               </div>
-              <div className="w-full border-b border-custom-border-400 border-dashed" />
+              {!issueKanBanViewStore.kanBanToggle?.subgroupByIssuesVisibility.includes(
+                getValueFromObject(_list, listKey) as string
+              ) && (
+                <div className="relative">
+                  <KanBan
+                    issues={issues?.[getValueFromObject(_list, listKey) as string]}
+                    sub_group_by={sub_group_by}
+                    group_by={group_by}
+                    sub_group_id={getValueFromObject(_list, listKey) as string}
+                    handleIssues={handleIssues}
+                  />
+                </div>
+              )}
             </div>
-            {!issueKanBanViewStore.kanBanToggle?.subgroupByIssuesVisibility.includes(
-              getValueFromObject(_list, listKey) as string
-            ) && (
-              <div className="relative">
-                <KanBan
-                  issues={issues?.[getValueFromObject(_list, listKey) as string]}
-                  sub_group_by={sub_group_by}
-                  group_by={group_by}
-                  sub_group_id={getValueFromObject(_list, listKey) as string}
-                />
-              </div>
-            )}
-          </div>
-        ))}
-    </div>
-  );
-});
+          ))}
+      </div>
+    );
+  }
+);
 
 export interface IKanBanSwimLanes {
   issues: any;
   sub_group_by: string | null;
   group_by: string | null;
-  handleIssues?: () => void;
+  handleIssues?: (sub_group_by: string | null, group_by: string | null, issue: any) => void;
 }
 
-export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer(({ issues, sub_group_by, group_by }) => {
-  const { project: projectStore }: RootStore = useMobxStore();
+export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer(
+  ({ issues, sub_group_by, group_by, handleIssues }) => {
+    const { project: projectStore }: RootStore = useMobxStore();
 
-  return (
-    <div className="relative">
-      <div className="sticky top-0 z-[2] bg-custom-background-90 h-[50px]">
-        {group_by && group_by === "state" && (
-          <SubGroupSwimlaneHeader
+    return (
+      <div className="relative">
+        <div className="sticky top-0 z-[2] bg-custom-background-90 h-[50px]">
+          {group_by && group_by === "state" && (
+            <SubGroupSwimlaneHeader
+              issues={issues}
+              sub_group_by={sub_group_by}
+              group_by={group_by}
+              list={projectStore?.projectStates}
+              listKey={`id`}
+            />
+          )}
+
+          {group_by && group_by === "state_detail.group" && (
+            <SubGroupSwimlaneHeader
+              issues={issues}
+              sub_group_by={sub_group_by}
+              group_by={group_by}
+              list={ISSUE_STATE_GROUPS}
+              listKey={`key`}
+            />
+          )}
+
+          {group_by && group_by === "priority" && (
+            <SubGroupSwimlaneHeader
+              issues={issues}
+              sub_group_by={sub_group_by}
+              group_by={group_by}
+              list={ISSUE_PRIORITIES}
+              listKey={`key`}
+            />
+          )}
+
+          {group_by && group_by === "labels" && (
+            <SubGroupSwimlaneHeader
+              issues={issues}
+              sub_group_by={sub_group_by}
+              group_by={group_by}
+              list={projectStore?.projectLabels}
+              listKey={`id`}
+            />
+          )}
+
+          {group_by && group_by === "assignees" && (
+            <SubGroupSwimlaneHeader
+              issues={issues}
+              sub_group_by={sub_group_by}
+              group_by={group_by}
+              list={projectStore?.projectMembers}
+              listKey={`member.id`}
+            />
+          )}
+
+          {group_by && group_by === "created_by" && (
+            <SubGroupSwimlaneHeader
+              issues={issues}
+              sub_group_by={sub_group_by}
+              group_by={group_by}
+              list={projectStore?.projectMembers}
+              listKey={`member.id`}
+            />
+          )}
+        </div>
+
+        {sub_group_by && sub_group_by === "state" && (
+          <SubGroupSwimlane
             issues={issues}
             sub_group_by={sub_group_by}
             group_by={group_by}
             list={projectStore?.projectStates}
             listKey={`id`}
+            handleIssues={handleIssues}
           />
         )}
 
-        {group_by && group_by === "state_detail.group" && (
-          <SubGroupSwimlaneHeader
+        {sub_group_by && sub_group_by === "state_detail.group" && (
+          <SubGroupSwimlane
             issues={issues}
             sub_group_by={sub_group_by}
             group_by={group_by}
             list={ISSUE_STATE_GROUPS}
             listKey={`key`}
+            handleIssues={handleIssues}
           />
         )}
 
-        {group_by && group_by === "priority" && (
-          <SubGroupSwimlaneHeader
+        {sub_group_by && sub_group_by === "priority" && (
+          <SubGroupSwimlane
             issues={issues}
             sub_group_by={sub_group_by}
             group_by={group_by}
             list={ISSUE_PRIORITIES}
             listKey={`key`}
+            handleIssues={handleIssues}
           />
         )}
 
-        {group_by && group_by === "labels" && (
-          <SubGroupSwimlaneHeader
+        {sub_group_by && sub_group_by === "labels" && (
+          <SubGroupSwimlane
             issues={issues}
             sub_group_by={sub_group_by}
             group_by={group_by}
             list={projectStore?.projectLabels}
             listKey={`id`}
+            handleIssues={handleIssues}
           />
         )}
 
-        {group_by && group_by === "assignees" && (
-          <SubGroupSwimlaneHeader
+        {sub_group_by && sub_group_by === "assignees" && (
+          <SubGroupSwimlane
             issues={issues}
             sub_group_by={sub_group_by}
             group_by={group_by}
             list={projectStore?.projectMembers}
             listKey={`member.id`}
+            handleIssues={handleIssues}
           />
         )}
 
-        {group_by && group_by === "created_by" && (
-          <SubGroupSwimlaneHeader
+        {sub_group_by && sub_group_by === "created_by" && (
+          <SubGroupSwimlane
             issues={issues}
             sub_group_by={sub_group_by}
             group_by={group_by}
             list={projectStore?.projectMembers}
             listKey={`member.id`}
+            handleIssues={handleIssues}
           />
         )}
       </div>
-
-      {sub_group_by && sub_group_by === "state" && (
-        <SubGroupSwimlane
-          issues={issues}
-          sub_group_by={sub_group_by}
-          group_by={group_by}
-          list={projectStore?.projectStates}
-          listKey={`id`}
-        />
-      )}
-
-      {sub_group_by && sub_group_by === "state_detail.group" && (
-        <SubGroupSwimlane
-          issues={issues}
-          sub_group_by={sub_group_by}
-          group_by={group_by}
-          list={ISSUE_STATE_GROUPS}
-          listKey={`key`}
-        />
-      )}
-
-      {sub_group_by && sub_group_by === "priority" && (
-        <SubGroupSwimlane
-          issues={issues}
-          sub_group_by={sub_group_by}
-          group_by={group_by}
-          list={ISSUE_PRIORITIES}
-          listKey={`key`}
-        />
-      )}
-
-      {sub_group_by && sub_group_by === "labels" && (
-        <SubGroupSwimlane
-          issues={issues}
-          sub_group_by={sub_group_by}
-          group_by={group_by}
-          list={projectStore?.projectLabels}
-          listKey={`id`}
-        />
-      )}
-
-      {sub_group_by && sub_group_by === "assignees" && (
-        <SubGroupSwimlane
-          issues={issues}
-          sub_group_by={sub_group_by}
-          group_by={group_by}
-          list={projectStore?.projectMembers}
-          listKey={`member.id`}
-        />
-      )}
-
-      {sub_group_by && sub_group_by === "created_by" && (
-        <SubGroupSwimlane
-          issues={issues}
-          sub_group_by={sub_group_by}
-          group_by={group_by}
-          list={projectStore?.projectMembers}
-          listKey={`member.id`}
-        />
-      )}
-    </div>
-  );
-});
+    );
+  }
+);
diff --git a/web/components/issues/issue-layouts/properties/date.tsx b/web/components/issues/issue-layouts/properties/date.tsx
new file mode 100644
index 00000000000..78678b37892
--- /dev/null
+++ b/web/components/issues/issue-layouts/properties/date.tsx
@@ -0,0 +1,4 @@
+export const IssuePropertyDate = () => {
+  console.log("");
+  return <div>IssuePropertyDate</div>;
+};
diff --git a/web/components/issues/issue-layouts/properties/dropdown-template.tsx b/web/components/issues/issue-layouts/properties/dropdown-template.tsx
new file mode 100644
index 00000000000..4afc04cb01d
--- /dev/null
+++ b/web/components/issues/issue-layouts/properties/dropdown-template.tsx
@@ -0,0 +1,177 @@
+import React from "react";
+// headless ui
+import { Combobox } from "@headlessui/react";
+// lucide icons
+import { ChevronDown, Search, X, Check } from "lucide-react";
+// hooks
+import useDynamicDropdownPosition from "hooks/use-dynamic-dropdown";
+
+interface IFiltersOption {
+  id: string;
+  title: string;
+}
+
+export interface IIssuePropertyState {
+  options: IFiltersOption[];
+  value?: any;
+  onChange?: (id: any, data: IFiltersOption) => void;
+  disabled?: boolean;
+
+  className?: string;
+  buttonClassName?: string;
+  optionsClassName?: string;
+  dropdownArrow?: boolean;
+
+  children?: any;
+}
+
+export const IssuePropertyState: React.FC<IIssuePropertyState> = ({
+  options,
+  value,
+  onChange,
+  disabled,
+
+  className,
+  buttonClassName,
+  optionsClassName,
+  dropdownArrow = true,
+
+  children,
+}) => {
+  const dropdownBtn = React.useRef<any>(null);
+  const dropdownOptions = React.useRef<any>(null);
+
+  const [isOpen, setIsOpen] = React.useState<boolean>(false);
+  const [search, setSearch] = React.useState<string>("");
+
+  useDynamicDropdownPosition(isOpen, () => setIsOpen(false), dropdownBtn, dropdownOptions);
+
+  const selectedOption: IFiltersOption | null | undefined =
+    (value && options.find((person: IFiltersOption) => person.id === value)) || null;
+
+  const filteredOptions: IFiltersOption[] =
+    search === ""
+      ? options && options.length > 0
+        ? options
+        : []
+      : options && options.length > 0
+      ? options.filter((person: IFiltersOption) =>
+          person.title.toLowerCase().replace(/\s+/g, "").includes(search.toLowerCase().replace(/\s+/g, ""))
+        )
+      : [];
+
+  const label = () => <div>Hello</div>;
+
+  return (
+    <Combobox
+      as="div"
+      className={`${className}`}
+      value={selectedOption && selectedOption.id}
+      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 (
+          <>
+            <Combobox.Button
+              ref={dropdownBtn}
+              type="button"
+              className={`flex items-center justify-between gap-1 w-full px-1 py-1 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}`}
+            >
+              {children ? (
+                children
+              ) : (
+                <div className="text-xs">{(selectedOption && selectedOption?.title) || "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>
+              )}
+            </Combobox.Button>
+
+            {options && options.length > 0 ? (
+              <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 min-w-48 max-w-60 whitespace-nowrap mt-1 space-y-1 ${optionsClassName}`}
+                >
+                  <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, 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 justify-between items-center gap-1 w-full px-1">
+                                <div className="line-clamp-1">{option.title}</div>
+                                {selected && (
+                                  <div className="flex-shrink-0 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>
+                </Combobox.Options>
+              </div>
+            ) : (
+              <p className="text-center text-custom-text-200">No options available.</p>
+            )}
+          </>
+        );
+      }}
+    </Combobox>
+  );
+};
diff --git a/web/components/issues/issue-layouts/properties/estimates.tsx b/web/components/issues/issue-layouts/properties/estimates.tsx
new file mode 100644
index 00000000000..13ce4542118
--- /dev/null
+++ b/web/components/issues/issue-layouts/properties/estimates.tsx
@@ -0,0 +1,215 @@
+import React 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 { StateGroupIcon } from "components/icons";
+// 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";
+
+interface IFiltersOption {
+  id: string;
+  title: string;
+  group: string;
+  color: string | null;
+}
+
+export interface IIssuePropertyEstimates {
+  value?: any;
+  onChange?: (id: any, data: IFiltersOption) => void;
+  disabled?: boolean;
+
+  className?: string;
+  buttonClassName?: string;
+  optionsClassName?: string;
+  dropdownArrow?: boolean;
+}
+
+export const IssuePropertyEstimates: React.FC<IIssuePropertyEstimates> = observer(
+  ({
+    value,
+    onChange,
+    disabled,
+
+    className,
+    buttonClassName,
+    optionsClassName,
+    dropdownArrow = true,
+  }) => {
+    const { project: projectStore }: RootStore = useMobxStore();
+
+    const dropdownBtn = React.useRef<any>(null);
+    const dropdownOptions = React.useRef<any>(null);
+
+    const [isOpen, setIsOpen] = React.useState<boolean>(false);
+    const [search, setSearch] = React.useState<string>("");
+
+    const options: IFiltersOption[] | [] =
+      (projectStore?.projectStates &&
+        projectStore?.projectStates?.length > 0 &&
+        projectStore?.projectStates.map((_state: IState) => ({
+          id: _state?.id,
+          title: _state?.name,
+          group: _state?.group,
+          color: _state?.color || null,
+        }))) ||
+      [];
+
+    useDynamicDropdownPosition(isOpen, () => setIsOpen(false), dropdownBtn, dropdownOptions);
+
+    const selectedOption: IFiltersOption | null | undefined =
+      (value && options.find((person: IFiltersOption) => person.id === value)) || null;
+
+    const filteredOptions: IFiltersOption[] =
+      search === ""
+        ? options && options.length > 0
+          ? options
+          : []
+        : options && options.length > 0
+        ? options.filter((person: IFiltersOption) =>
+            person.title.toLowerCase().replace(/\s+/g, "").includes(search.toLowerCase().replace(/\s+/g, ""))
+          )
+        : [];
+
+    return (
+      <Combobox
+        as="div"
+        className={`${className}`}
+        value={selectedOption && selectedOption.id}
+        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 (
+            <>
+              <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 ? (
+                  <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>
+                ) : (
+                  <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>
+                )}
+              </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, 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>
+                                )}
+                              </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>
+    );
+  }
+);
diff --git a/web/components/issues/issue-layouts/properties/labels.tsx b/web/components/issues/issue-layouts/properties/labels.tsx
new file mode 100644
index 00000000000..fc8bc706d00
--- /dev/null
+++ b/web/components/issues/issue-layouts/properties/labels.tsx
@@ -0,0 +1,228 @@
+import React 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";
+// 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;
+  title: string;
+  color: string | null;
+}
+
+export interface IIssuePropertyLabels {
+  value?: any;
+  onChange?: (id: any, data: IFiltersOption) => void;
+  disabled?: boolean;
+
+  className?: string;
+  buttonClassName?: string;
+  optionsClassName?: string;
+  dropdownArrow?: boolean;
+}
+
+export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer(
+  ({
+    value,
+    onChange,
+    disabled,
+
+    className,
+    buttonClassName,
+    optionsClassName,
+    dropdownArrow = true,
+  }) => {
+    const { project: projectStore }: RootStore = useMobxStore();
+
+    const dropdownBtn = React.useRef<any>(null);
+    const dropdownOptions = React.useRef<any>(null);
+
+    const [isOpen, setIsOpen] = React.useState<boolean>(false);
+    const [search, setSearch] = React.useState<string>("");
+
+    const options: IFiltersOption[] | [] =
+      (projectStore?.projectLabels &&
+        projectStore?.projectLabels?.length > 0 &&
+        projectStore?.projectLabels.map((_Label: any) => ({
+          id: _Label?.id,
+          title: _Label?.name,
+          color: _Label?.color || null,
+        }))) ||
+      [];
+
+    useDynamicDropdownPosition(isOpen, () => setIsOpen(false), dropdownBtn, dropdownOptions);
+
+    const selectedOption: IFiltersOption[] | null | undefined =
+      (value && value?.length > 0 && options.filter((person: IFiltersOption) => value.includes(person.id))) || null;
+
+    console.log("selectedOption", selectedOption);
+
+    const filteredOptions: IFiltersOption[] =
+      search === ""
+        ? options && options.length > 0
+          ? options
+          : []
+        : options && options.length > 0
+        ? options.filter((person: IFiltersOption) =>
+            person.title.toLowerCase().replace(/\s+/g, "").includes(search.toLowerCase().replace(/\s+/g, ""))
+          )
+        : [];
+
+    return (
+      <Combobox
+        as="div"
+        className={`${className}`}
+        onChange={(data: string) => {
+          console.log("data", data);
+          if (onChange && selectedOption) onChange(data, selectedOption);
+        }}
+        disabled={disabled}
+        multiple
+      >
+        {({ open }: { open: boolean }) => {
+          if (open) {
+            if (!isOpen) setIsOpen(true);
+          } else if (isOpen) setIsOpen(false);
+
+          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 && selectedOption?.length > 0 ? (
+                  <>
+                    {selectedOption?.length === 1 ? (
+                      <>
+                        <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>
+                      </>
+                    ) : (
+                      <>
+                        <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>
+                      </>
+                    )}
+                  </>
+                ) : (
+                  <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>
+                )}
+              </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>
+    );
+  }
+);
diff --git a/web/components/issues/issue-layouts/properties/member.tsx b/web/components/issues/issue-layouts/properties/member.tsx
new file mode 100644
index 00000000000..e0c79923126
--- /dev/null
+++ b/web/components/issues/issue-layouts/properties/member.tsx
@@ -0,0 +1,215 @@
+import React 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 { StateGroupIcon } from "components/icons";
+// 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";
+
+interface IFiltersOption {
+  id: string;
+  title: string;
+  group: string;
+  color: string | null;
+}
+
+export interface IIssuePropertyMember {
+  value?: any;
+  onChange?: (id: any, data: IFiltersOption) => void;
+  disabled?: boolean;
+
+  className?: string;
+  buttonClassName?: string;
+  optionsClassName?: string;
+  dropdownArrow?: boolean;
+}
+
+export const IssuePropertyMember: React.FC<IIssuePropertyMember> = observer(
+  ({
+    value,
+    onChange,
+    disabled,
+
+    className,
+    buttonClassName,
+    optionsClassName,
+    dropdownArrow = true,
+  }) => {
+    const { project: projectStore }: RootStore = useMobxStore();
+
+    const dropdownBtn = React.useRef<any>(null);
+    const dropdownOptions = React.useRef<any>(null);
+
+    const [isOpen, setIsOpen] = React.useState<boolean>(false);
+    const [search, setSearch] = React.useState<string>("");
+
+    const options: IFiltersOption[] | [] =
+      (projectStore?.projectStates &&
+        projectStore?.projectStates?.length > 0 &&
+        projectStore?.projectStates.map((_state: IState) => ({
+          id: _state?.id,
+          title: _state?.name,
+          group: _state?.group,
+          color: _state?.color || null,
+        }))) ||
+      [];
+
+    useDynamicDropdownPosition(isOpen, () => setIsOpen(false), dropdownBtn, dropdownOptions);
+
+    const selectedOption: IFiltersOption | null | undefined =
+      (value && options.find((person: IFiltersOption) => person.id === value)) || null;
+
+    const filteredOptions: IFiltersOption[] =
+      search === ""
+        ? options && options.length > 0
+          ? options
+          : []
+        : options && options.length > 0
+        ? options.filter((person: IFiltersOption) =>
+            person.title.toLowerCase().replace(/\s+/g, "").includes(search.toLowerCase().replace(/\s+/g, ""))
+          )
+        : [];
+
+    return (
+      <Combobox
+        as="div"
+        className={`${className}`}
+        value={selectedOption && selectedOption.id}
+        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 (
+            <>
+              <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 ? (
+                  <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>
+                ) : (
+                  <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>
+                )}
+              </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, 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>
+                                )}
+                              </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>
+    );
+  }
+);
diff --git a/web/components/issues/issue-layouts/properties/priority.tsx b/web/components/issues/issue-layouts/properties/priority.tsx
new file mode 100644
index 00000000000..7e100786a93
--- /dev/null
+++ b/web/components/issues/issue-layouts/properties/priority.tsx
@@ -0,0 +1,220 @@
+import React 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";
+// hooks
+import useDynamicDropdownPosition from "hooks/use-dynamic-dropdown";
+// constants
+import { ISSUE_PRIORITIES } from "constants/issue";
+
+interface IFiltersOption {
+  id: string;
+  title: string;
+}
+
+export interface IIssuePropertyPriority {
+  value?: any;
+  onChange?: (id: any, data: IFiltersOption) => void;
+  disabled?: boolean;
+
+  className?: string;
+  buttonClassName?: string;
+  optionsClassName?: string;
+  dropdownArrow?: boolean;
+}
+
+const Icon = ({ priority }: any) => (
+  <div className="w-full h-full">
+    {priority === "urgent" ? (
+      <div className="border border-red-500 bg-red-500 text-white w-full h-full overflow-hidden flex justify-center items-center rounded-sm">
+        <AlertCircle size={12} strokeWidth={2} />
+      </div>
+    ) : priority === "high" ? (
+      <div className="border border-red-500/20 bg-red-500/10 text-red-500 w-full h-full overflow-hidden flex justify-center items-center rounded-sm">
+        <SignalHigh size={12} strokeWidth={2} className="pl-[3px]" />
+      </div>
+    ) : priority === "medium" ? (
+      <div className="border border-orange-500/20 bg-orange-500/10 text-orange-500 w-full h-full overflow-hidden flex justify-center items-center rounded-sm">
+        <SignalMedium size={12} strokeWidth={2} className="pl-[3px]" />
+      </div>
+    ) : priority === "low" ? (
+      <div className="border border-green-500/20 bg-green-500/10 text-green-500 w-full h-full overflow-hidden flex justify-center items-center rounded-sm">
+        <SignalLow size={12} strokeWidth={2} className="pl-[3px]" />
+      </div>
+    ) : (
+      <div className="border border-custom-border-400/20 bg-custom-text-400/10 text-custom-text-400 w-full h-full overflow-hidden flex justify-center items-center rounded-sm">
+        <Ban size={12} strokeWidth={2} />
+      </div>
+    )}
+  </div>
+);
+
+export const IssuePropertyPriority: React.FC<IIssuePropertyPriority> = observer(
+  ({
+    value,
+    onChange,
+    disabled,
+
+    className,
+    buttonClassName,
+    optionsClassName,
+    dropdownArrow = true,
+  }) => {
+    const dropdownBtn = React.useRef<any>(null);
+    const dropdownOptions = React.useRef<any>(null);
+
+    const [isOpen, setIsOpen] = React.useState<boolean>(false);
+    const [search, setSearch] = React.useState<string>("");
+
+    const options: IFiltersOption[] | [] =
+      (ISSUE_PRIORITIES &&
+        ISSUE_PRIORITIES?.length > 0 &&
+        ISSUE_PRIORITIES.map((_priority: any) => ({
+          id: _priority?.key,
+          title: _priority?.title,
+        }))) ||
+      [];
+
+    useDynamicDropdownPosition(isOpen, () => setIsOpen(false), dropdownBtn, dropdownOptions);
+
+    const selectedOption: IFiltersOption | null | undefined =
+      (value && options.find((person: IFiltersOption) => person.id === value)) || null;
+
+    const filteredOptions: IFiltersOption[] =
+      search === ""
+        ? options && options.length > 0
+          ? options
+          : []
+        : options && options.length > 0
+        ? options.filter((person: IFiltersOption) =>
+            person.title.toLowerCase().replace(/\s+/g, "").includes(search.toLowerCase().replace(/\s+/g, ""))
+          )
+        : [];
+
+    return (
+      <Combobox
+        as="div"
+        className={`${className}`}
+        value={selectedOption && selectedOption.id}
+        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 (
+            <>
+              <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 ? (
+                  <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>
+                    <div className="pl-0.5 pr-1 text-xs">{selectedOption?.title}</div>
+                  </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>
+                )}
+              </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, 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>
+                                    {selected && (
+                                      <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>
+    );
+  }
+);
diff --git a/web/components/issues/issue-layouts/properties/state.tsx b/web/components/issues/issue-layouts/properties/state.tsx
new file mode 100644
index 00000000000..6ca4db55fac
--- /dev/null
+++ b/web/components/issues/issue-layouts/properties/state.tsx
@@ -0,0 +1,215 @@
+import React 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 { StateGroupIcon } from "components/icons";
+// 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";
+
+interface IFiltersOption {
+  id: string;
+  title: string;
+  group: string;
+  color: string | null;
+}
+
+export interface IIssuePropertyState {
+  value?: any;
+  onChange?: (id: any, data: IFiltersOption) => void;
+  disabled?: boolean;
+
+  className?: string;
+  buttonClassName?: string;
+  optionsClassName?: string;
+  dropdownArrow?: boolean;
+}
+
+export const IssuePropertyState: React.FC<IIssuePropertyState> = observer(
+  ({
+    value,
+    onChange,
+    disabled,
+
+    className,
+    buttonClassName,
+    optionsClassName,
+    dropdownArrow = true,
+  }) => {
+    const { project: projectStore }: RootStore = useMobxStore();
+
+    const dropdownBtn = React.useRef<any>(null);
+    const dropdownOptions = React.useRef<any>(null);
+
+    const [isOpen, setIsOpen] = React.useState<boolean>(false);
+    const [search, setSearch] = React.useState<string>("");
+
+    const options: IFiltersOption[] | [] =
+      (projectStore?.projectStates &&
+        projectStore?.projectStates?.length > 0 &&
+        projectStore?.projectStates.map((_state: IState) => ({
+          id: _state?.id,
+          title: _state?.name,
+          group: _state?.group,
+          color: _state?.color || null,
+        }))) ||
+      [];
+
+    useDynamicDropdownPosition(isOpen, () => setIsOpen(false), dropdownBtn, dropdownOptions);
+
+    const selectedOption: IFiltersOption | null | undefined =
+      (value && options.find((person: IFiltersOption) => person.id === value)) || null;
+
+    const filteredOptions: IFiltersOption[] =
+      search === ""
+        ? options && options.length > 0
+          ? options
+          : []
+        : options && options.length > 0
+        ? options.filter((person: IFiltersOption) =>
+            person.title.toLowerCase().replace(/\s+/g, "").includes(search.toLowerCase().replace(/\s+/g, ""))
+          )
+        : [];
+
+    return (
+      <Combobox
+        as="div"
+        className={`${className}`}
+        value={selectedOption && selectedOption.id}
+        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 (
+            <>
+              <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 ? (
+                  <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>
+                ) : (
+                  <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>
+                )}
+              </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, 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>
+                                )}
+                              </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>
+    );
+  }
+);
diff --git a/web/components/states/state-select.tsx b/web/components/states/state-select.tsx
index 22e4ef11511..02c2ea36513 100644
--- a/web/components/states/state-select.tsx
+++ b/web/components/states/state-select.tsx
@@ -87,83 +87,72 @@ export const StateSelect: React.FC<Props> = ({
   useDynamicDropdownPosition(isOpen, () => setIsOpen(false), dropdownBtn, dropdownOptions);
 
   return (
-    <Combobox
-      as="div"
-      className={`flex-shrink-0 text-left ${className}`}
-      value={value.id}
-      onChange={(data: string) => {
-        onChange(data, states);
-      }}
-      disabled={disabled}
-    >
-      {({ open }: { open: boolean }) => {
-        if (open) {
-          if (!isOpen) setIsOpen(true);
-          setFetchStates(true);
-        } else if (isOpen) setIsOpen(false);
-
-        return (
-          <>
-            <Combobox.Button
-              ref={dropdownBtn}
-              type="button"
-              className={`flex items-center justify-between gap-1 w-full text-xs px-2.5 py-1 rounded-md shadow-sm border border-custom-border-300 duration-300 focus:outline-none ${
-                disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
-              } ${buttonClassName}`}
-            >
-              {label}
-              {!hideDropdownArrow && !disabled && <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />}
+    <div className="fixed top-16 w-72">
+      <Combobox value={selected} onChange={setSelected}>
+        <div className="relative mt-1">
+          <div className="relative w-full cursor-default overflow-hidden rounded-lg bg-white text-left shadow-md focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-teal-300 sm:text-sm">
+            <Combobox.Input
+              className="w-full border-none py-2 pl-3 pr-10 text-sm leading-5 text-gray-900 focus:ring-0"
+              displayValue={(person) => person.name}
+              onChange={(event) => setQuery(event.target.value)}
+            />
+            <Combobox.Button className="absolute inset-y-0 right-0 flex items-center pr-2">
+              <ChevronUpDownIcon
+                className="h-5 w-5 text-gray-400"
+                aria-hidden="true"
+              />
             </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 px-2 py-2.5 rounded bg-custom-background-100 text-xs shadow-lg focus:outline-none w-48 whitespace-nowrap mt-1 ${optionsClassName}`}
-              >
-                <div className="flex w-full items-center justify-start rounded border border-custom-border-200 bg-custom-background-90 px-2">
-                  <MagnifyingGlassIcon className="h-3.5 w-3.5 text-custom-text-300" />
-                  <Combobox.Input
-                    className="w-full bg-transparent py-1 px-2 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
-                    value={query}
-                    onChange={(e) => setQuery(e.target.value)}
-                    placeholder="Search"
-                    displayValue={(assigned: any) => assigned?.name}
-                  />
+          </div>
+          <Transition
+            as={Fragment}
+            leave="transition ease-in duration-100"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+            afterLeave={() => setQuery('')}
+          >
+            <Combobox.Options className="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
+              {filteredPeople.length === 0 && query !== '' ? (
+                <div className="relative cursor-default select-none py-2 px-4 text-gray-700">
+                  Nothing found.
                 </div>
-                <div className={`mt-2 space-y-1 max-h-48 overflow-y-scroll`}>
-                  {filteredOptions ? (
-                    filteredOptions.length > 0 ? (
-                      filteredOptions.map((option) => (
-                        <Combobox.Option
-                          key={option.value}
-                          value={option.value}
-                          className={({ active, selected }) =>
-                            `flex items-center justify-between gap-2 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"}`
-                          }
+              ) : (
+                filteredPeople.map((person) => (
+                  <Combobox.Option
+                    key={person.id}
+                    className={({ active }) =>
+                      `relative cursor-default select-none py-2 pl-10 pr-4 ${
+                        active ? 'bg-teal-600 text-white' : 'text-gray-900'
+                      }`
+                    }
+                    value={person}
+                  >
+                    {({ selected, active }) => (
+                      <>
+                        <span
+                          className={`block truncate ${
+                            selected ? 'font-medium' : 'font-normal'
+                          }`}
                         >
-                          {({ selected }) => (
-                            <>
-                              {option.content}
-                              {selected && <CheckIcon className={`h-3.5 w-3.5`} />}
-                            </>
-                          )}
-                        </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>
-              </Combobox.Options>
-            </div>
-          </>
-        );
-      }}
-    </Combobox>
+                          {person.name}
+                        </span>
+                        {selected ? (
+                          <span
+                            className={`absolute inset-y-0 left-0 flex items-center pl-3 ${
+                              active ? 'text-white' : 'text-teal-600'
+                            }`}
+                          >
+                            <CheckIcon className="h-5 w-5" aria-hidden="true" />
+                          </span>
+                        ) : null}
+                      </>
+                    )}
+                  </Combobox.Option>
+                ))
+              )}
+            </Combobox.Options>
+          </Transition>
+        </div>
+      </Combobox>
+    </div>
   );
 };
diff --git a/web/store/issue.ts b/web/store/issue.ts
index a4374e8ad8c..3263756e025 100644
--- a/web/store/issue.ts
+++ b/web/store/issue.ts
@@ -99,6 +99,10 @@ class IssueStore implements IIssueStore {
   }
 
   updateIssueStructure = async (group_id: string | null, sub_group_id: string | null, issue: IIssue) => {
+    console.log("group_id", group_id);
+    console.log("sub_group_id", sub_group_id);
+    console.log("issue", issue);
+
     const projectId: string | null = issue?.project;
     const issueType: IIssueType | null = this.getIssueType;
     if (!projectId || !issueType) return null;
@@ -111,7 +115,7 @@ class IssueStore implements IIssueStore {
       issues = issues as IIssueGroupedStructure;
       issues = {
         ...issues,
-        [group_id]: issues[group_id].map((i: IIssue) => (i?.id === issue?.id ? issue : i)),
+        [group_id]: issues[group_id].map((i: IIssue) => (i?.id === issue?.id ? { ...i, ...issue } : i)),
       };
     }
     if (issueType === "groupWithSubGroups" && group_id && sub_group_id) {
@@ -120,13 +124,13 @@ class IssueStore implements IIssueStore {
         ...issues,
         [sub_group_id]: {
           ...issues[sub_group_id],
-          [group_id]: issues[sub_group_id][group_id].map((i: IIssue) => (i?.id === issue?.id ? issue : i)),
+          [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 ? issue : i));
+      issues = issues.map((i: IIssue) => (i?.id === issue?.id ? { ...i, ...issue } : i));
     }
 
     runInAction(() => {

From b2db238873226dee683b565278430762c979fa23 Mon Sep 17 00:00:00 2001
From: gurusainath <gurusainath007@gmail.com>
Date: Tue, 3 Oct 2023 16:08:16 +0530
Subject: [PATCH 2/4] feat: implemented assignee, labels properties

---
 web/components/core/views/all-views.tsx       |  26 +-
 .../issue-layouts/kanban/properties.tsx       |  30 +-
 .../issues/issue-layouts/kanban/root.tsx      |   3 -
 .../issue-layouts/properties/assignee.tsx     | 266 ++++++++++++++++++
 .../issue-layouts/properties/labels.tsx       |  42 +--
 .../issue-layouts/properties/member.tsx       | 215 --------------
 .../issue-layouts/properties/priority.tsx     |  20 +-
 .../issues/issue-layouts/properties/state.tsx |  29 +-
 web/components/ui/tooltip.tsx                 |  10 +-
 web/store/issue.ts                            |   4 -
 10 files changed, 350 insertions(+), 295 deletions(-)
 create mode 100644 web/components/issues/issue-layouts/properties/assignee.tsx
 delete mode 100644 web/components/issues/issue-layouts/properties/member.tsx

diff --git a/web/components/core/views/all-views.tsx b/web/components/core/views/all-views.tsx
index c5fcc7300c2..4ff3822a41d 100644
--- a/web/components/core/views/all-views.tsx
+++ b/web/components/core/views/all-views.tsx
@@ -19,17 +19,21 @@ export const AllViews: React.FC = observer(() => {
 
   const { issue: issueStore, project: projectStore, issueFilter: issueFilterStore } = useMobxStore();
 
-  useSWR(workspaceSlug && projectId ? `PROJECT_ISSUES` : null, async () => {
-    if (workspaceSlug && projectId) {
-      await issueFilterStore.fetchUserProjectFilters(workspaceSlug, projectId);
-
-      await projectStore.fetchProjectStates(workspaceSlug, projectId);
-      await projectStore.fetchProjectLabels(workspaceSlug, projectId);
-      await projectStore.fetchProjectMembers(workspaceSlug, projectId);
-
-      await issueStore.fetchIssues(workspaceSlug, projectId);
-    }
-  });
+  useSWR(
+    workspaceSlug && projectId ? `PROJECT_ISSUES` : null,
+    async () => {
+      if (workspaceSlug && projectId) {
+        await issueFilterStore.fetchUserProjectFilters(workspaceSlug, projectId);
+
+        await projectStore.fetchProjectStates(workspaceSlug, projectId);
+        await projectStore.fetchProjectLabels(workspaceSlug, projectId);
+        await projectStore.fetchProjectMembers(workspaceSlug, projectId);
+
+        await issueStore.fetchIssues(workspaceSlug, projectId);
+      }
+    },
+    { revalidateOnFocus: false }
+  );
 
   const activeLayout = issueFilterStore.userDisplayFilters.layout;
 
diff --git a/web/components/issues/issue-layouts/kanban/properties.tsx b/web/components/issues/issue-layouts/kanban/properties.tsx
index 3ed19bc06da..7d5ba76034b 100644
--- a/web/components/issues/issue-layouts/kanban/properties.tsx
+++ b/web/components/issues/issue-layouts/kanban/properties.tsx
@@ -6,7 +6,7 @@ import { Circle, Layers, Link, Paperclip } from "lucide-react";
 import { IssuePropertyState } from "components/issues/issue-layouts/properties/state";
 import { IssuePropertyPriority } from "components/issues/issue-layouts/properties/priority";
 import { IssuePropertyLabels } from "components/issues/issue-layouts/properties/labels";
-import { IssuePropertyMember } from "components/issues/issue-layouts/properties/member";
+import { IssuePropertyAssignee } from "components/issues/issue-layouts/properties/assignee";
 import { IssuePropertyEstimates } from "components/issues/issue-layouts/properties/estimates";
 import { Tooltip } from "components/ui";
 
@@ -37,21 +37,21 @@ export const KanBanProperties: React.FC<IKanBanProperties> = observer(
         );
     };
 
-    const handleLabel = (id: string[]) => {
+    const handleLabel = (ids: string[]) => {
       if (handleIssues)
         handleIssues(
           !sub_group_id && sub_group_id === "null" ? null : sub_group_id,
           !group_id && group_id === "null" ? null : group_id,
-          { ...issue, labels: id }
+          { ...issue, labels: ids }
         );
     };
 
-    const handleAssignee = (id: string) => {
+    const handleAssignee = (ids: string[]) => {
       if (handleIssues)
         handleIssues(
           !sub_group_id && sub_group_id === "null" ? null : sub_group_id,
           !group_id && group_id === "null" ? null : group_id,
-          { ...issue, state: id }
+          { ...issue, assignees: ids }
         );
     };
 
@@ -105,17 +105,17 @@ export const KanBanProperties: React.FC<IKanBanProperties> = observer(
         <IssuePropertyLabels
           value={issue?.labels || null}
           dropdownArrow={false}
-          onChange={(id: string[]) => handleLabel(id)}
+          onChange={(ids: string[]) => handleLabel(ids)}
           disabled={false}
         />
 
         {/* assignee */}
-        {/* <IssuePropertyMember
+        <IssuePropertyAssignee
           value={issue?.assignees || null}
           dropdownArrow={false}
-          onChange={(id: string) => handleAssignee(id)}
+          onChange={(ids: string[]) => handleAssignee(ids)}
           disabled={false}
-        /> */}
+        />
 
         {/* start date */}
         {/* <div className="flex-shrink-0 border border-custom-border-300 min-w-[22px] h-[22px] overflow-hidden rounded-sm flex justify-center items-center">
@@ -143,34 +143,34 @@ export const KanBanProperties: React.FC<IKanBanProperties> = observer(
 
         {/* extra render properties */}
         {/* sub-issues */}
-        {/* <Tooltip tooltipHeading="Sub-issue" tooltipContent={`${issue.sub_issues_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>
             <div className="pl-0.5 pr-1 text-xs">{issue.sub_issues_count}</div>
           </div>
-        </Tooltip> */}
+        </Tooltip>
 
         {/* attachments */}
-        {/* <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 w-[16px] h-[16px] flex justify-center items-center">
               <Paperclip width={10} strokeWidth={2} />
             </div>
             <div className="pl-0.5 pr-1 text-xs">{issue.attachment_count}</div>
           </div>
-        </Tooltip> */}
+        </Tooltip>
 
         {/* 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  w-[16px] h-[16px] flex justify-center items-center">
               <Link width={10} strokeWidth={2} />
             </div>
             <div className="pl-0.5 pr-1 text-xs">{issue.link_count}</div>
           </div>
-        </Tooltip> */}
+        </Tooltip>
       </div>
     );
   }
diff --git a/web/components/issues/issue-layouts/kanban/root.tsx b/web/components/issues/issue-layouts/kanban/root.tsx
index 23e870989dd..64399481cbb 100644
--- a/web/components/issues/issue-layouts/kanban/root.tsx
+++ b/web/components/issues/issue-layouts/kanban/root.tsx
@@ -46,9 +46,6 @@ export const KanBanLayout: React.FC = observer(() => {
   };
 
   const updateIssue = (sub_group_by: string | null, group_by: string | null, issue: any) => {
-    console.log("sub_group_by", sub_group_by);
-    console.log("group_by", group_by);
-    console.log("issue", issue);
     issueStore.updateIssueStructure(group_by, sub_group_by, issue);
   };
 
diff --git a/web/components/issues/issue-layouts/properties/assignee.tsx b/web/components/issues/issue-layouts/properties/assignee.tsx
new file mode 100644
index 00000000000..3f55b05b0c4
--- /dev/null
+++ b/web/components/issues/issue-layouts/properties/assignee.tsx
@@ -0,0 +1,266 @@
+import React 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 "components/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;
+  title: string;
+  avatar: string;
+}
+
+export interface IIssuePropertyAssignee {
+  value?: any;
+  onChange?: (id: any, data: any) => void;
+  disabled?: boolean;
+
+  className?: string;
+  buttonClassName?: string;
+  optionsClassName?: string;
+  dropdownArrow?: boolean;
+}
+
+export const IssuePropertyAssignee: React.FC<IIssuePropertyAssignee> = observer(
+  ({
+    value,
+    onChange,
+    disabled,
+
+    className,
+    buttonClassName,
+    optionsClassName,
+    dropdownArrow = true,
+  }) => {
+    const { project: projectStore }: RootStore = useMobxStore();
+
+    const dropdownBtn = React.useRef<any>(null);
+    const dropdownOptions = React.useRef<any>(null);
+
+    const [isOpen, setIsOpen] = React.useState<boolean>(false);
+    const [search, setSearch] = React.useState<string>("");
+
+    const options: IFiltersOption[] | [] =
+      (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 filteredOptions: IFiltersOption[] =
+      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 (
+            <>
+              <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 && selectedOption?.length > 0 ? (
+                  <>
+                    {selectedOption?.length > 1 ? (
+                      <Tooltip
+                        tooltipHeading={`Assignees`}
+                        tooltipContent={(selectedOption.map((_label: IFiltersOption) => _label.title) || []).join(", ")}
+                      >
+                        <div className="flex-shrink-0 flex justify-center items-center gap-1 pr-[8px]">
+                          {selectedOption.slice(0, assigneeRenderLength).map((_assignee) => (
+                            <div
+                              key={_assignee?.id}
+                              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-200"
+                            >
+                              {_assignee && _assignee.avatar ? (
+                                <img
+                                  src={_assignee.avatar}
+                                  className="absolute top-0 left-0 h-full w-full object-cover"
+                                  alt={_assignee.title}
+                                />
+                              ) : (
+                                _assignee.title[0]
+                              )}
+                            </div>
+                          ))}
+                          {selectedOption.length > assigneeRenderLength && (
+                            <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-200">
+                              +{selectedOption?.length - assigneeRenderLength}
+                            </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">
+                          <div className="flex-shrink-0 w-[14px] h-[14px] rounded-sm flex justify-center items-center text-white capitalize relative overflow-hidden text-xs">
+                            {selectedOption[0] && selectedOption[0].avatar ? (
+                              <img
+                                src={selectedOption[0].avatar}
+                                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 && (
+                  <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}`}
+                >
+                  {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-[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>
+                                  <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>
+    );
+  }
+);
diff --git a/web/components/issues/issue-layouts/properties/labels.tsx b/web/components/issues/issue-layouts/properties/labels.tsx
index fc8bc706d00..c1f60f9095b 100644
--- a/web/components/issues/issue-layouts/properties/labels.tsx
+++ b/web/components/issues/issue-layouts/properties/labels.tsx
@@ -5,6 +5,8 @@ import { Combobox } from "@headlessui/react";
 import { ChevronDown, Search, X, Check } from "lucide-react";
 // mobx
 import { observer } from "mobx-react-lite";
+// components
+import { Tooltip } from "components/ui";
 // hooks
 import useDynamicDropdownPosition from "hooks/use-dynamic-dropdown";
 // mobx
@@ -19,7 +21,7 @@ interface IFiltersOption {
 
 export interface IIssuePropertyLabels {
   value?: any;
-  onChange?: (id: any, data: IFiltersOption) => void;
+  onChange?: (id: any, data: any) => void;
   disabled?: boolean;
 
   className?: string;
@@ -50,19 +52,17 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer(
     const options: IFiltersOption[] | [] =
       (projectStore?.projectLabels &&
         projectStore?.projectLabels?.length > 0 &&
-        projectStore?.projectLabels.map((_Label: any) => ({
-          id: _Label?.id,
-          title: _Label?.name,
-          color: _Label?.color || null,
+        projectStore?.projectLabels.map((_label: any) => ({
+          id: _label?.id,
+          title: _label?.name,
+          color: _label?.color || null,
         }))) ||
       [];
 
     useDynamicDropdownPosition(isOpen, () => setIsOpen(false), dropdownBtn, dropdownOptions);
 
-    const selectedOption: IFiltersOption[] | null | undefined =
-      (value && value?.length > 0 && options.filter((person: IFiltersOption) => value.includes(person.id))) || null;
-
-    console.log("selectedOption", selectedOption);
+    const selectedOption: IFiltersOption[] =
+      (value && value?.length > 0 && options.filter((_label: IFiltersOption) => value.includes(_label.id))) || [];
 
     const filteredOptions: IFiltersOption[] =
       search === ""
@@ -70,21 +70,21 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer(
           ? options
           : []
         : options && options.length > 0
-        ? options.filter((person: IFiltersOption) =>
-            person.title.toLowerCase().replace(/\s+/g, "").includes(search.toLowerCase().replace(/\s+/g, ""))
+        ? options.filter((_label: IFiltersOption) =>
+            _label.title.toLowerCase().replace(/\s+/g, "").includes(search.toLowerCase().replace(/\s+/g, ""))
           )
         : [];
 
     return (
       <Combobox
+        multiple={true}
         as="div"
         className={`${className}`}
-        onChange={(data: string) => {
-          console.log("data", data);
+        value={selectedOption.map((_label: IFiltersOption) => _label.id) as string[]}
+        onChange={(data: string[]) => {
           if (onChange && selectedOption) onChange(data, selectedOption);
         }}
         disabled={disabled}
-        multiple
       >
         {({ open }: { open: boolean }) => {
           if (open) {
@@ -103,7 +103,10 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer(
                 {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"
@@ -113,9 +116,12 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer(
                           />
                           <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"
@@ -123,7 +129,7 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer(
                           />
                           <div className="pl-0.5 pr-1 text-xs">{selectedOption?.length} Labels</div>
                         </div>
-                      </>
+                      </Tooltip>
                     )}
                   </>
                 ) : (
diff --git a/web/components/issues/issue-layouts/properties/member.tsx b/web/components/issues/issue-layouts/properties/member.tsx
deleted file mode 100644
index e0c79923126..00000000000
--- a/web/components/issues/issue-layouts/properties/member.tsx
+++ /dev/null
@@ -1,215 +0,0 @@
-import React 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 { StateGroupIcon } from "components/icons";
-// 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";
-
-interface IFiltersOption {
-  id: string;
-  title: string;
-  group: string;
-  color: string | null;
-}
-
-export interface IIssuePropertyMember {
-  value?: any;
-  onChange?: (id: any, data: IFiltersOption) => void;
-  disabled?: boolean;
-
-  className?: string;
-  buttonClassName?: string;
-  optionsClassName?: string;
-  dropdownArrow?: boolean;
-}
-
-export const IssuePropertyMember: React.FC<IIssuePropertyMember> = observer(
-  ({
-    value,
-    onChange,
-    disabled,
-
-    className,
-    buttonClassName,
-    optionsClassName,
-    dropdownArrow = true,
-  }) => {
-    const { project: projectStore }: RootStore = useMobxStore();
-
-    const dropdownBtn = React.useRef<any>(null);
-    const dropdownOptions = React.useRef<any>(null);
-
-    const [isOpen, setIsOpen] = React.useState<boolean>(false);
-    const [search, setSearch] = React.useState<string>("");
-
-    const options: IFiltersOption[] | [] =
-      (projectStore?.projectStates &&
-        projectStore?.projectStates?.length > 0 &&
-        projectStore?.projectStates.map((_state: IState) => ({
-          id: _state?.id,
-          title: _state?.name,
-          group: _state?.group,
-          color: _state?.color || null,
-        }))) ||
-      [];
-
-    useDynamicDropdownPosition(isOpen, () => setIsOpen(false), dropdownBtn, dropdownOptions);
-
-    const selectedOption: IFiltersOption | null | undefined =
-      (value && options.find((person: IFiltersOption) => person.id === value)) || null;
-
-    const filteredOptions: IFiltersOption[] =
-      search === ""
-        ? options && options.length > 0
-          ? options
-          : []
-        : options && options.length > 0
-        ? options.filter((person: IFiltersOption) =>
-            person.title.toLowerCase().replace(/\s+/g, "").includes(search.toLowerCase().replace(/\s+/g, ""))
-          )
-        : [];
-
-    return (
-      <Combobox
-        as="div"
-        className={`${className}`}
-        value={selectedOption && selectedOption.id}
-        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 (
-            <>
-              <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 ? (
-                  <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>
-                ) : (
-                  <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>
-                )}
-              </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, 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>
-                                )}
-                              </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>
-    );
-  }
-);
diff --git a/web/components/issues/issue-layouts/properties/priority.tsx b/web/components/issues/issue-layouts/properties/priority.tsx
index 7e100786a93..a6776633aaf 100644
--- a/web/components/issues/issue-layouts/properties/priority.tsx
+++ b/web/components/issues/issue-layouts/properties/priority.tsx
@@ -5,6 +5,8 @@ import { Combobox } from "@headlessui/react";
 import { ChevronDown, Search, X, Check, AlertCircle, SignalHigh, SignalMedium, SignalLow, Ban } from "lucide-react";
 // mobx
 import { observer } from "mobx-react-lite";
+// components
+import { Tooltip } from "components/ui";
 // hooks
 import useDynamicDropdownPosition from "hooks/use-dynamic-dropdown";
 // constants
@@ -81,7 +83,7 @@ export const IssuePropertyPriority: React.FC<IIssuePropertyPriority> = observer(
     useDynamicDropdownPosition(isOpen, () => setIsOpen(false), dropdownBtn, dropdownOptions);
 
     const selectedOption: IFiltersOption | null | undefined =
-      (value && options.find((person: IFiltersOption) => person.id === value)) || null;
+      (value && options.find((_priority: IFiltersOption) => _priority.id === value)) || null;
 
     const filteredOptions: IFiltersOption[] =
       search === ""
@@ -89,8 +91,8 @@ export const IssuePropertyPriority: React.FC<IIssuePropertyPriority> = observer(
           ? options
           : []
         : options && options.length > 0
-        ? options.filter((person: IFiltersOption) =>
-            person.title.toLowerCase().replace(/\s+/g, "").includes(search.toLowerCase().replace(/\s+/g, ""))
+        ? options.filter((_priority: IFiltersOption) =>
+            _priority.title.toLowerCase().replace(/\s+/g, "").includes(search.toLowerCase().replace(/\s+/g, ""))
           )
         : [];
 
@@ -119,12 +121,14 @@ export const IssuePropertyPriority: React.FC<IIssuePropertyPriority> = observer(
                 } ${buttonClassName}`}
               >
                 {selectedOption ? (
-                  <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} />
+                  <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>
+                      <div className="pl-0.5 pr-1 text-xs">{selectedOption?.title}</div>
                     </div>
-                    <div className="pl-0.5 pr-1 text-xs">{selectedOption?.title}</div>
-                  </div>
+                  </Tooltip>
                 ) : (
                   <div className="text-xs">Select option</div>
                 )}
diff --git a/web/components/issues/issue-layouts/properties/state.tsx b/web/components/issues/issue-layouts/properties/state.tsx
index 6ca4db55fac..28ed1fe0ed5 100644
--- a/web/components/issues/issue-layouts/properties/state.tsx
+++ b/web/components/issues/issue-layouts/properties/state.tsx
@@ -6,6 +6,7 @@ import { ChevronDown, Search, X, Check } from "lucide-react";
 // mobx
 import { observer } from "mobx-react-lite";
 // components
+import { Tooltip } from "components/ui";
 import { StateGroupIcon } from "components/icons";
 // hooks
 import useDynamicDropdownPosition from "hooks/use-dynamic-dropdown";
@@ -66,7 +67,7 @@ export const IssuePropertyState: React.FC<IIssuePropertyState> = observer(
     useDynamicDropdownPosition(isOpen, () => setIsOpen(false), dropdownBtn, dropdownOptions);
 
     const selectedOption: IFiltersOption | null | undefined =
-      (value && options.find((person: IFiltersOption) => person.id === value)) || null;
+      (value && options.find((_state: IFiltersOption) => _state.id === value)) || null;
 
     const filteredOptions: IFiltersOption[] =
       search === ""
@@ -74,8 +75,8 @@ export const IssuePropertyState: React.FC<IIssuePropertyState> = observer(
           ? options
           : []
         : options && options.length > 0
-        ? options.filter((person: IFiltersOption) =>
-            person.title.toLowerCase().replace(/\s+/g, "").includes(search.toLowerCase().replace(/\s+/g, ""))
+        ? options.filter((_state: IFiltersOption) =>
+            _state.title.toLowerCase().replace(/\s+/g, "").includes(search.toLowerCase().replace(/\s+/g, ""))
           )
         : [];
 
@@ -104,17 +105,19 @@ export const IssuePropertyState: React.FC<IIssuePropertyState> = observer(
                 } ${buttonClassName}`}
               >
                 {selectedOption ? (
-                  <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"
-                      />
+                  <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>
-                    <div className="pl-0.5 pr-1 text-xs">{selectedOption?.title}</div>
-                  </div>
+                  </Tooltip>
                 ) : (
                   <div className="text-xs">Select option</div>
                 )}
diff --git a/web/components/ui/tooltip.tsx b/web/components/ui/tooltip.tsx
index 3a4c5d71fef..0f9163521a4 100644
--- a/web/components/ui/tooltip.tsx
+++ b/web/components/ui/tooltip.tsx
@@ -51,17 +51,11 @@ export const Tooltip: React.FC<Props> = ({
       content={
         <div
           className={`relative z-50 max-w-xs gap-1 rounded-md p-2 text-xs shadow-md ${
-            theme === "custom"
-              ? "bg-custom-background-100 text-custom-text-200"
-              : "bg-black text-gray-400"
+            theme === "custom" ? "bg-custom-background-100 text-custom-text-200" : "bg-black text-gray-400"
           } break-words overflow-hidden ${className}`}
         >
           {tooltipHeading && (
-            <h5
-              className={`font-medium ${
-                theme === "custom" ? "text-custom-text-100" : "text-white"
-              }`}
-            >
+            <h5 className={`font-medium ${theme === "custom" ? "text-custom-text-100" : "text-white"}`}>
               {tooltipHeading}
             </h5>
           )}
diff --git a/web/store/issue.ts b/web/store/issue.ts
index 3263756e025..8de03f0b15b 100644
--- a/web/store/issue.ts
+++ b/web/store/issue.ts
@@ -99,10 +99,6 @@ class IssueStore implements IIssueStore {
   }
 
   updateIssueStructure = async (group_id: string | null, sub_group_id: string | null, issue: IIssue) => {
-    console.log("group_id", group_id);
-    console.log("sub_group_id", sub_group_id);
-    console.log("issue", issue);
-
     const projectId: string | null = issue?.project;
     const issueType: IIssueType | null = this.getIssueType;
     if (!projectId || !issueType) return null;

From b5d3c01151bb0d0b08ba11a73ed2db0442ef59dc Mon Sep 17 00:00:00 2001
From: gurusainath <gurusainath007@gmail.com>
Date: Wed, 4 Oct 2023 12:39:17 +0530
Subject: [PATCH 3/4] fix: implemented estimates in project store and issue
 properties

---
 web/components/core/views/all-views.tsx       | 21 +++---
 .../issue-layouts/kanban/properties.tsx       | 22 ++++---
 .../issues/issue-layouts/kanban/root.tsx      |  2 +-
 .../issue-layouts/properties/assignee.tsx     |  4 +-
 .../issue-layouts/properties/estimates.tsx    | 64 +++++++++----------
 web/store/issue.ts                            |  2 +
 web/store/project.ts                          | 62 +++++++++++++++++-
 7 files changed, 120 insertions(+), 57 deletions(-)

diff --git a/web/components/core/views/all-views.tsx b/web/components/core/views/all-views.tsx
index 4ff3822a41d..2ce949b8f04 100644
--- a/web/components/core/views/all-views.tsx
+++ b/web/components/core/views/all-views.tsx
@@ -28,6 +28,7 @@ export const AllViews: React.FC = observer(() => {
         await projectStore.fetchProjectStates(workspaceSlug, projectId);
         await projectStore.fetchProjectLabels(workspaceSlug, projectId);
         await projectStore.fetchProjectMembers(workspaceSlug, projectId);
+        await projectStore.fetchProjectEstimates(workspaceSlug, projectId);
 
         await issueStore.fetchIssues(workspaceSlug, projectId);
       }
@@ -40,15 +41,17 @@ export const AllViews: React.FC = observer(() => {
   return (
     <div className="relative w-full h-full flex flex-col overflow-auto">
       <AppliedFiltersList />
-      {activeLayout === "kanban" ? (
-        <KanBanLayout />
-      ) : activeLayout === "calendar" ? (
-        <CalendarLayout />
-      ) : activeLayout === "gantt_chart" ? (
-        <GanttLayout />
-      ) : activeLayout === "spreadsheet" ? (
-        <SpreadsheetLayout />
-      ) : null}
+      <div className="w-full h-full">
+        {activeLayout === "kanban" ? (
+          <KanBanLayout />
+        ) : activeLayout === "calendar" ? (
+          <CalendarLayout />
+        ) : activeLayout === "gantt_chart" ? (
+          <GanttLayout />
+        ) : activeLayout === "spreadsheet" ? (
+          <SpreadsheetLayout />
+        ) : null}
+      </div>
     </div>
   );
 });
diff --git a/web/components/issues/issue-layouts/kanban/properties.tsx b/web/components/issues/issue-layouts/kanban/properties.tsx
index 7d5ba76034b..6b3d149f03c 100644
--- a/web/components/issues/issue-layouts/kanban/properties.tsx
+++ b/web/components/issues/issue-layouts/kanban/properties.tsx
@@ -73,12 +73,12 @@ export const KanBanProperties: React.FC<IKanBanProperties> = observer(
         );
     };
 
-    const handleEstimates = (id: string) => {
+    const handleEstimate = (id: string) => {
       if (handleIssues)
         handleIssues(
           !sub_group_id && sub_group_id === "null" ? null : sub_group_id,
           !group_id && group_id === "null" ? null : group_id,
-          { ...issue, state: id }
+          { ...issue, estimate_point: id }
         );
     };
 
@@ -118,28 +118,30 @@ export const KanBanProperties: React.FC<IKanBanProperties> = observer(
         />
 
         {/* start date */}
-        {/* <div className="flex-shrink-0 border border-custom-border-300 min-w-[22px] h-[22px] overflow-hidden rounded-sm flex justify-center items-center">
+        <div className="flex-shrink-0 border border-custom-border-300 min-w-[22px] h-[22px] overflow-hidden rounded-sm flex justify-center items-center">
           <div className="flex-shrink-0  w-[16px] h-[16px] flex justify-center items-center">
             <Circle width={10} strokeWidth={2} />
           </div>
           <div className="pl-0.5 pr-1 text-xs">start date</div>
-        </div> */}
+        </div>
 
         {/* target/due date */}
-        {/* <div className="flex-shrink-0 border border-custom-border-300 min-w-[22px] h-[22px] overflow-hidden rounded-sm flex justify-center items-center">
+        <div className="flex-shrink-0 border border-custom-border-300 min-w-[22px] h-[22px] overflow-hidden rounded-sm flex justify-center items-center">
           <div className="flex-shrink-0  w-[16px] h-[16px] flex justify-center items-center">
             <Circle width={10} strokeWidth={2} />
           </div>
           <div className="pl-0.5 pr-1 text-xs">target/due date</div>
-        </div> */}
+        </div>
 
         {/* estimates */}
-        {/* <IssuePropertyEstimates
-          value={issue?.state || null}
+        <IssuePropertyEstimates
+          value={issue?.estimate_point?.toString() || null}
           dropdownArrow={false}
-          onChange={(id: string) => handleEstimates(id)}
+          onChange={(id: string) => handleEstimate(id)}
           disabled={false}
-        /> */}
+          workspaceSlug={issue?.workspace_detail?.slug || null}
+          projectId={issue?.project_detail?.id || null}
+        />
 
         {/* extra render properties */}
         {/* sub-issues */}
diff --git a/web/components/issues/issue-layouts/kanban/root.tsx b/web/components/issues/issue-layouts/kanban/root.tsx
index 64399481cbb..1979e4e97e4 100644
--- a/web/components/issues/issue-layouts/kanban/root.tsx
+++ b/web/components/issues/issue-layouts/kanban/root.tsx
@@ -50,7 +50,7 @@ export const KanBanLayout: React.FC = observer(() => {
   };
 
   return (
-    <div className={`relative min-w-full w-max min-h-full h-max bg-custom-background-90`}>
+    <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} />
diff --git a/web/components/issues/issue-layouts/properties/assignee.tsx b/web/components/issues/issue-layouts/properties/assignee.tsx
index 3f55b05b0c4..26ec6f20457 100644
--- a/web/components/issues/issue-layouts/properties/assignee.tsx
+++ b/web/components/issues/issue-layouts/properties/assignee.tsx
@@ -113,7 +113,7 @@ export const IssuePropertyAssignee: React.FC<IIssuePropertyAssignee> = observer(
                           {selectedOption.slice(0, assigneeRenderLength).map((_assignee) => (
                             <div
                               key={_assignee?.id}
-                              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-200"
+                              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"
                             >
                               {_assignee && _assignee.avatar ? (
                                 <img
@@ -127,7 +127,7 @@ export const IssuePropertyAssignee: React.FC<IIssuePropertyAssignee> = observer(
                             </div>
                           ))}
                           {selectedOption.length > assigneeRenderLength && (
-                            <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-200">
+                            <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">
                               +{selectedOption?.length - assigneeRenderLength}
                             </div>
                           )}
diff --git a/web/components/issues/issue-layouts/properties/estimates.tsx b/web/components/issues/issue-layouts/properties/estimates.tsx
index 13ce4542118..4176cc40aa7 100644
--- a/web/components/issues/issue-layouts/properties/estimates.tsx
+++ b/web/components/issues/issue-layouts/properties/estimates.tsx
@@ -2,31 +2,29 @@ import React from "react";
 // headless ui
 import { Combobox } from "@headlessui/react";
 // lucide icons
-import { ChevronDown, Search, X, Check } from "lucide-react";
+import { ChevronDown, Search, X, Check, Triangle } from "lucide-react";
 // mobx
 import { observer } from "mobx-react-lite";
-// components
-import { StateGroupIcon } from "components/icons";
 // 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";
 
 interface IFiltersOption {
   id: string;
   title: string;
-  group: string;
-  color: string | null;
+  key: string;
 }
 
 export interface IIssuePropertyEstimates {
   value?: any;
-  onChange?: (id: any, data: IFiltersOption) => void;
+  onChange?: (id: any) => void;
   disabled?: boolean;
 
+  workspaceSlug?: string;
+  projectId?: string;
+
   className?: string;
   buttonClassName?: string;
   optionsClassName?: string;
@@ -39,6 +37,9 @@ export const IssuePropertyEstimates: React.FC<IIssuePropertyEstimates> = observe
     onChange,
     disabled,
 
+    workspaceSlug,
+    projectId,
+
     className,
     buttonClassName,
     optionsClassName,
@@ -52,21 +53,26 @@ export const IssuePropertyEstimates: React.FC<IIssuePropertyEstimates> = observe
     const [isOpen, setIsOpen] = React.useState<boolean>(false);
     const [search, setSearch] = React.useState<string>("");
 
+    const projectDetail =
+      (workspaceSlug && projectId && projectStore?.getProjectById(workspaceSlug, projectId)) || null;
+    const projectEstimateId = (projectDetail && projectDetail?.estimate) || null;
+    const estimates = (projectEstimateId && projectStore?.getProjectEstimateById(projectEstimateId)) || null;
+
     const options: IFiltersOption[] | [] =
-      (projectStore?.projectStates &&
-        projectStore?.projectStates?.length > 0 &&
-        projectStore?.projectStates.map((_state: IState) => ({
-          id: _state?.id,
-          title: _state?.name,
-          group: _state?.group,
-          color: _state?.color || null,
+      (estimates &&
+        estimates.points &&
+        estimates.points.length > 0 &&
+        estimates.points.map((_estimate) => ({
+          id: _estimate?.id,
+          title: _estimate?.value,
+          key: _estimate?.key.toString(),
         }))) ||
       [];
 
     useDynamicDropdownPosition(isOpen, () => setIsOpen(false), dropdownBtn, dropdownOptions);
 
     const selectedOption: IFiltersOption | null | undefined =
-      (value && options.find((person: IFiltersOption) => person.id === value)) || null;
+      (value && options.find((_estimate: IFiltersOption) => _estimate.key === value)) || null;
 
     const filteredOptions: IFiltersOption[] =
       search === ""
@@ -74,8 +80,8 @@ export const IssuePropertyEstimates: React.FC<IIssuePropertyEstimates> = observe
           ? options
           : []
         : options && options.length > 0
-        ? options.filter((person: IFiltersOption) =>
-            person.title.toLowerCase().replace(/\s+/g, "").includes(search.toLowerCase().replace(/\s+/g, ""))
+        ? options.filter((_estimate: IFiltersOption) =>
+            _estimate.title.toLowerCase().replace(/\s+/g, "").includes(search.toLowerCase().replace(/\s+/g, ""))
           )
         : [];
 
@@ -83,9 +89,9 @@ export const IssuePropertyEstimates: React.FC<IIssuePropertyEstimates> = observe
       <Combobox
         as="div"
         className={`${className}`}
-        value={selectedOption && selectedOption.id}
+        value={selectedOption && selectedOption.key}
         onChange={(data: string) => {
-          if (onChange && selectedOption) onChange(data, selectedOption);
+          if (onChange) onChange(data);
         }}
         disabled={disabled}
       >
@@ -106,12 +112,7 @@ export const IssuePropertyEstimates: React.FC<IIssuePropertyEstimates> = observe
                 {selectedOption ? (
                   <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"
-                      />
+                      <Triangle width={14} strokeWidth={2} />
                     </div>
                     <div className="pl-0.5 pr-1 text-xs">{selectedOption?.title}</div>
                   </div>
@@ -163,8 +164,8 @@ export const IssuePropertyEstimates: React.FC<IIssuePropertyEstimates> = observe
                           filteredOptions.length > 0 ? (
                             filteredOptions.map((option) => (
                               <Combobox.Option
-                                key={option.id}
-                                value={option.id}
+                                key={option.key}
+                                value={option.key}
                                 className={({ active, selected }) =>
                                   `cursor-pointer select-none truncate rounded px-1 py-1.5 ${
                                     active || selected ? "bg-custom-background-80" : ""
@@ -174,12 +175,7 @@ export const IssuePropertyEstimates: React.FC<IIssuePropertyEstimates> = observe
                                 {({ 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"
-                                      />
+                                      <Triangle width={14} strokeWidth={2} />
                                     </div>
                                     <div className="line-clamp-1">{option.title}</div>
                                     {selected && (
diff --git a/web/store/issue.ts b/web/store/issue.ts
index 8de03f0b15b..13ced147ec5 100644
--- a/web/store/issue.ts
+++ b/web/store/issue.ts
@@ -129,6 +129,8 @@ class IssueStore implements IIssueStore {
       issues = issues.map((i: IIssue) => (i?.id === issue?.id ? { ...i, ...issue } : i));
     }
 
+    // reorder issues based on the issue update
+
     runInAction(() => {
       this.issues = { ...this.issues, [projectId]: { ...this.issues[projectId], [issueType]: issues } };
     });
diff --git a/web/store/project.ts b/web/store/project.ts
index 75a3aab04db..057337c4fbb 100644
--- a/web/store/project.ts
+++ b/web/store/project.ts
@@ -1,11 +1,12 @@
 import { observable, action, computed, makeObservable, runInAction } from "mobx";
 // types
 import { RootStore } from "./root";
-import { IProject, IIssueLabels, IProjectMember, IStateResponse, IState } from "types";
+import { IProject, IIssueLabels, IProjectMember, IStateResponse, IState, IEstimate } from "types";
 // services
 import { ProjectService } from "services/project.service";
 import { IssueService } from "services/issue.service";
 import { ProjectStateServices } from "services/project_state.service";
+import { ProjectEstimateServices } from "services/project_estimates.service";
 import { CycleService } from "services/cycles.service";
 import { ModuleService } from "services/modules.service";
 import { ViewService } from "services/views.service";
@@ -30,6 +31,9 @@ export interface IProjectStore {
   members: {
     [projectId: string]: IProjectMember[] | null; // project_id: members
   } | null;
+  estimates: {
+    [projectId: string]: IEstimate[] | null; // project_id: members
+  } | null;
 
   // computed
   searchedProjects: IProject[];
@@ -37,6 +41,7 @@ export interface IProjectStore {
   projectStates: IState[] | null;
   projectLabels: IIssueLabels[] | null;
   projectMembers: IProjectMember[] | null;
+  projectEstimates: IEstimate[] | null;
 
   joinedProjects: IProject[];
   favoriteProjects: IProject[];
@@ -45,16 +50,19 @@ export interface IProjectStore {
   setProjectId: (projectId: string) => void;
   setSearchQuery: (query: string) => void;
 
+  getProjectById: (workspaceSlug: string, projectId: string) => IProject | null;
   getProjectStateById: (stateId: string) => IState | null;
   getProjectLabelById: (labelId: string) => IIssueLabels | null;
   getProjectMemberById: (memberId: string) => IProjectMember | null;
   getProjectMemberByUserId: (memberId: string) => IProjectMember | null;
+  getProjectEstimateById: (estimateId: string) => IEstimate | null;
 
   fetchProjects: (workspaceSlug: string) => Promise<void>;
   fetchProjectDetails: (workspaceSlug: string, projectId: string) => Promise<any>;
   fetchProjectStates: (workspaceSlug: string, projectId: string) => Promise<void>;
   fetchProjectLabels: (workspaceSlug: string, projectId: string) => Promise<void>;
   fetchProjectMembers: (workspaceSlug: string, projectId: string) => Promise<void>;
+  fetchProjectEstimates: (workspaceSlug: string, projectId: string) => Promise<void>;
 
   addProjectToFavorites: (workspaceSlug: string, projectId: string) => Promise<any>;
   removeProjectFromFavorites: (workspaceSlug: string, projectId: string) => Promise<any>;
@@ -88,6 +96,9 @@ class ProjectStore implements IProjectStore {
   members: {
     [key: string]: IProjectMember[]; // project_id: members
   } | null = {};
+  estimates: {
+    [key: string]: IEstimate[]; // project_id: estimates
+  } | null = {};
 
   // root store
   rootStore;
@@ -95,6 +106,7 @@ class ProjectStore implements IProjectStore {
   projectService;
   issueService;
   stateService;
+  estimateService;
 
   constructor(_rootStore: RootStore) {
     makeObservable(this, {
@@ -116,6 +128,7 @@ class ProjectStore implements IProjectStore {
       projectStates: computed,
       projectLabels: computed,
       projectMembers: computed,
+      projectEstimates: computed,
 
       joinedProjects: computed,
       favoriteProjects: computed,
@@ -126,6 +139,7 @@ class ProjectStore implements IProjectStore {
       fetchProjects: action,
       fetchProjectDetails: action,
 
+      getProjectById: action,
       getProjectStateById: action,
       getProjectLabelById: action,
       getProjectMemberById: action,
@@ -133,6 +147,7 @@ class ProjectStore implements IProjectStore {
       fetchProjectStates: action,
       fetchProjectLabels: action,
       fetchProjectMembers: action,
+      fetchProjectEstimates: action,
 
       addProjectToFavorites: action,
       removeProjectFromFavorites: action,
@@ -148,6 +163,7 @@ class ProjectStore implements IProjectStore {
     this.projectService = new ProjectService();
     this.issueService = new IssueService();
     this.stateService = new ProjectStateServices();
+    this.estimateService = new ProjectEstimateServices();
   }
 
   get searchedProjects() {
@@ -202,6 +218,11 @@ class ProjectStore implements IProjectStore {
     return this.members?.[this.projectId] || null;
   }
 
+  get projectEstimates() {
+    if (!this.projectId) return null;
+    return this.estimates?.[this.projectId] || null;
+  }
+
   // actions
   setProjectId = (projectSlug: string) => {
     this.projectId = projectSlug ?? null;
@@ -246,6 +267,14 @@ class ProjectStore implements IProjectStore {
     }
   };
 
+  getProjectById = (workspaceSlug: string, projectId: string) => {
+    if (!this.projectId) return null;
+    const projects = this.projects?.[workspaceSlug];
+    if (!projects) return null;
+    const projectInfo: IProject | null = projects.find((project) => project.id === projectId) || null;
+    return projectInfo;
+  };
+
   getProjectStateById = (stateId: string) => {
     if (!this.projectId) return null;
     const states = this.projectStates;
@@ -278,6 +307,14 @@ class ProjectStore implements IProjectStore {
     return memberInfo;
   };
 
+  getProjectEstimateById = (estimateId: string) => {
+    if (!this.projectId) return null;
+    const estimates = this.projectEstimates;
+    if (!estimates) return null;
+    const estimateInfo: IEstimate | null = estimates.find((estimate) => estimate.id === estimateId) || null;
+    return estimateInfo;
+  };
+
   fetchProjectStates = async (workspaceSlug: string, projectSlug: string) => {
     try {
       this.loader = true;
@@ -347,6 +384,29 @@ class ProjectStore implements IProjectStore {
     }
   };
 
+  fetchProjectEstimates = async (workspaceSlug: string, projectSlug: string) => {
+    try {
+      this.loader = true;
+      this.error = null;
+
+      const estimatesResponse = await this.estimateService.getEstimatesList(workspaceSlug, projectSlug);
+      const _estimates = {
+        ...this.estimates,
+        [projectSlug]: estimatesResponse,
+      };
+
+      runInAction(() => {
+        this.estimates = _estimates;
+        this.loader = false;
+        this.error = null;
+      });
+    } catch (error) {
+      console.error(error);
+      this.loader = false;
+      this.error = error;
+    }
+  };
+
   addProjectToFavorites = async (workspaceSlug: string, projectId: string) => {
     try {
       const response = await this.projectService.addProjectToFavorites(workspaceSlug, projectId);

From 0925122819b7925a647f4a625b7416890f9e098a Mon Sep 17 00:00:00 2001
From: gurusainath <gurusainath007@gmail.com>
Date: Wed, 4 Oct 2023 14:36:07 +0530
Subject: [PATCH 4/4] chore: staer_date and due_date and validation properties
 in kanban

---
 .../issues/issue-layouts/kanban/block.tsx     |  19 +-
 .../issues/issue-layouts/kanban/default.tsx   |  23 ++-
 .../issue-layouts/kanban/properties.tsx       | 180 ++++++++++--------
 .../issues/issue-layouts/kanban/root.tsx      |  18 +-
 .../issues/issue-layouts/kanban/swimlanes.tsx |  13 +-
 .../issues/issue-layouts/properties/date.tsx  | 100 +++++++++-
 .../issue-layouts/properties/estimates.tsx    |  14 +-
 7 files changed, 271 insertions(+), 96 deletions(-)

diff --git a/web/components/issues/issue-layouts/kanban/block.tsx b/web/components/issues/issue-layouts/kanban/block.tsx
index 2f23ec9c88a..c65680dc16b 100644
--- a/web/components/issues/issue-layouts/kanban/block.tsx
+++ b/web/components/issues/issue-layouts/kanban/block.tsx
@@ -9,9 +9,17 @@ interface IssueBlockProps {
   issues: any;
   isDragDisabled: boolean;
   handleIssues?: (sub_group_by: string | null, group_by: string | null, issue: any) => void;
+  display_properties: any;
 }
 
-export const IssueBlock = ({ sub_group_id, columnId, issues, isDragDisabled, handleIssues }: IssueBlockProps) => (
+export const IssueBlock = ({
+  sub_group_id,
+  columnId,
+  issues,
+  isDragDisabled,
+  handleIssues,
+  display_properties,
+}: IssueBlockProps) => (
   <>
     {issues && issues.length > 0 ? (
       <>
@@ -31,18 +39,21 @@ export const IssueBlock = ({ sub_group_id, columnId, issues, isDragDisabled, han
                 ref={provided.innerRef}
               >
                 <div
-                  className={`min-h-[106px] text-sm rounded p-2 px-3 shadow-custom-shadow-2xs space-y-[8px] border transition-all bg-custom-background-100 hover:cursor-grab ${
+                  className={`text-sm rounded p-2 px-3 shadow-custom-shadow-2xs space-y-[8px] border transition-all bg-custom-background-100 hover:cursor-grab ${
                     snapshot.isDragging ? `border-custom-primary-100` : `border-transparent`
                   }`}
                 >
-                  <div className="text-xs line-clamp-1 text-custom-text-300">ONE-{issue.sequence_id}</div>
+                  {display_properties && display_properties?.key && (
+                    <div className="text-xs line-clamp-1 text-custom-text-300">ONE-{issue.sequence_id}</div>
+                  )}
                   <div className="line-clamp-2 h-[40px] text-sm font-medium text-custom-text-100">{issue.name}</div>
-                  <div className="min-h-[22px]">
+                  <div>
                     <KanBanProperties
                       sub_group_id={sub_group_id}
                       columnId={columnId}
                       issue={issue}
                       handleIssues={handleIssues}
+                      display_properties={display_properties}
                     />
                   </div>
                 </div>
diff --git a/web/components/issues/issue-layouts/kanban/default.tsx b/web/components/issues/issue-layouts/kanban/default.tsx
index ec6a09addee..395e93ea8a9 100644
--- a/web/components/issues/issue-layouts/kanban/default.tsx
+++ b/web/components/issues/issue-layouts/kanban/default.tsx
@@ -21,10 +21,21 @@ export interface IGroupByKanBan {
   listKey: string;
   isDragDisabled: boolean;
   handleIssues?: (sub_group_by: string | null, group_by: string | null, issue: any) => void;
+  display_properties: any;
 }
 
 const GroupByKanBan: React.FC<IGroupByKanBan> = observer(
-  ({ issues, sub_group_by, group_by, sub_group_id = "null", list, listKey, isDragDisabled, handleIssues }) => {
+  ({
+    issues,
+    sub_group_by,
+    group_by,
+    sub_group_id = "null",
+    list,
+    listKey,
+    isDragDisabled,
+    handleIssues,
+    display_properties,
+  }) => {
     const { issueKanBanView: issueKanBanViewStore }: RootStore = useMobxStore();
 
     const verticalAlignPosition = (_list: any) =>
@@ -65,6 +76,7 @@ const GroupByKanBan: React.FC<IGroupByKanBan> = observer(
                             issues={issues[getValueFromObject(_list, listKey) as string]}
                             isDragDisabled={isDragDisabled}
                             handleIssues={handleIssues}
+                            display_properties={display_properties}
                           />
                         ) : (
                           isDragDisabled && (
@@ -93,10 +105,11 @@ export interface IKanBan {
   sub_group_id?: string;
   handleDragDrop?: (result: any) => void | undefined;
   handleIssues?: (sub_group_by: string | null, group_by: string | null, issue: any) => void;
+  display_properties: any;
 }
 
 export const KanBan: React.FC<IKanBan> = observer(
-  ({ issues, sub_group_by, group_by, sub_group_id = "null", handleIssues }) => {
+  ({ issues, sub_group_by, group_by, sub_group_id = "null", handleIssues, display_properties }) => {
     const { project: projectStore, issueKanBanView: issueKanBanViewStore }: RootStore = useMobxStore();
 
     return (
@@ -111,6 +124,7 @@ export const KanBan: React.FC<IKanBan> = observer(
             listKey={`id`}
             isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
             handleIssues={handleIssues}
+            display_properties={display_properties}
           />
         )}
 
@@ -124,6 +138,7 @@ export const KanBan: React.FC<IKanBan> = observer(
             listKey={`key`}
             isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
             handleIssues={handleIssues}
+            display_properties={display_properties}
           />
         )}
 
@@ -137,6 +152,7 @@ export const KanBan: React.FC<IKanBan> = observer(
             listKey={`key`}
             isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
             handleIssues={handleIssues}
+            display_properties={display_properties}
           />
         )}
 
@@ -150,6 +166,7 @@ export const KanBan: React.FC<IKanBan> = observer(
             listKey={`id`}
             isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
             handleIssues={handleIssues}
+            display_properties={display_properties}
           />
         )}
 
@@ -163,6 +180,7 @@ export const KanBan: React.FC<IKanBan> = observer(
             listKey={`member.id`}
             isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
             handleIssues={handleIssues}
+            display_properties={display_properties}
           />
         )}
 
@@ -176,6 +194,7 @@ export const KanBan: React.FC<IKanBan> = observer(
             listKey={`member.id`}
             isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
             handleIssues={handleIssues}
+            display_properties={display_properties}
           />
         )}
       </div>
diff --git a/web/components/issues/issue-layouts/kanban/properties.tsx b/web/components/issues/issue-layouts/kanban/properties.tsx
index 6b3d149f03c..03df73fcaf9 100644
--- a/web/components/issues/issue-layouts/kanban/properties.tsx
+++ b/web/components/issues/issue-layouts/kanban/properties.tsx
@@ -1,13 +1,14 @@
 // mobx
 import { observer } from "mobx-react-lite";
 // lucide icons
-import { Circle, Layers, Link, Paperclip } from "lucide-react";
+import { Layers, Link, Paperclip } from "lucide-react";
 // components
-import { IssuePropertyState } from "components/issues/issue-layouts/properties/state";
-import { IssuePropertyPriority } from "components/issues/issue-layouts/properties/priority";
-import { IssuePropertyLabels } from "components/issues/issue-layouts/properties/labels";
-import { IssuePropertyAssignee } from "components/issues/issue-layouts/properties/assignee";
-import { IssuePropertyEstimates } from "components/issues/issue-layouts/properties/estimates";
+import { IssuePropertyState } from "../properties/state";
+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 { Tooltip } from "components/ui";
 
 export interface IKanBanProperties {
@@ -15,10 +16,11 @@ export interface IKanBanProperties {
   columnId: string;
   issue: any;
   handleIssues?: (sub_group_by: string | null, group_by: string | null, issue: any) => void;
+  display_properties: any;
 }
 
 export const KanBanProperties: React.FC<IKanBanProperties> = observer(
-  ({ sub_group_id, columnId: group_id, issue, handleIssues }) => {
+  ({ sub_group_id, columnId: group_id, issue, handleIssues, display_properties }) => {
     const handleState = (id: string) => {
       if (handleIssues)
         handleIssues(
@@ -55,21 +57,21 @@ export const KanBanProperties: React.FC<IKanBanProperties> = observer(
         );
     };
 
-    const handleStartDate = (id: string) => {
+    const handleStartDate = (date: string) => {
       if (handleIssues)
         handleIssues(
           !sub_group_id && sub_group_id === "null" ? null : sub_group_id,
           !group_id && group_id === "null" ? null : group_id,
-          { ...issue, state: id }
+          { ...issue, start_date: date }
         );
     };
 
-    const handleTargetDate = (id: string) => {
+    const handleTargetDate = (date: string) => {
       if (handleIssues)
         handleIssues(
           !sub_group_id && sub_group_id === "null" ? null : sub_group_id,
           !group_id && group_id === "null" ? null : group_id,
-          { ...issue, state: id }
+          { ...issue, target_date: date }
         );
     };
 
@@ -83,97 +85,121 @@ export const KanBanProperties: React.FC<IKanBanProperties> = observer(
     };
 
     return (
-      <div className="relative flex gap-2 overflow-hidden overflow-x-auto whitespace-nowrap">
+      <div className="relative flex gap-2 overflow-x-auto whitespace-nowrap">
         {/* basic properties */}
         {/* state */}
-        <IssuePropertyState
-          value={issue?.state || null}
-          dropdownArrow={false}
-          onChange={(id: string) => handleState(id)}
-          disabled={false}
-        />
+        {display_properties && display_properties?.state && (
+          <IssuePropertyState
+            value={issue?.state || null}
+            dropdownArrow={false}
+            onChange={(id: string) => handleState(id)}
+            disabled={false}
+          />
+        )}
 
         {/* priority */}
-        <IssuePropertyPriority
-          value={issue?.priority || null}
-          dropdownArrow={false}
-          onChange={(id: string) => handlePriority(id)}
-          disabled={false}
-        />
+        {display_properties && display_properties?.priority && (
+          <IssuePropertyPriority
+            value={issue?.priority || null}
+            dropdownArrow={false}
+            onChange={(id: string) => handlePriority(id)}
+            disabled={false}
+          />
+        )}
 
         {/* label */}
-        <IssuePropertyLabels
-          value={issue?.labels || null}
-          dropdownArrow={false}
-          onChange={(ids: string[]) => handleLabel(ids)}
-          disabled={false}
-        />
+        {display_properties && display_properties?.labels && (
+          <IssuePropertyLabels
+            value={issue?.labels || null}
+            dropdownArrow={false}
+            onChange={(ids: string[]) => handleLabel(ids)}
+            disabled={false}
+          />
+        )}
 
         {/* assignee */}
-        <IssuePropertyAssignee
-          value={issue?.assignees || null}
-          dropdownArrow={false}
-          onChange={(ids: string[]) => handleAssignee(ids)}
-          disabled={false}
-        />
+        {display_properties && display_properties?.assignee && (
+          <IssuePropertyAssignee
+            value={issue?.assignees || null}
+            dropdownArrow={false}
+            onChange={(ids: string[]) => handleAssignee(ids)}
+            disabled={false}
+          />
+        )}
 
         {/* start date */}
-        <div className="flex-shrink-0 border border-custom-border-300 min-w-[22px] h-[22px] overflow-hidden rounded-sm flex justify-center items-center">
-          <div className="flex-shrink-0  w-[16px] h-[16px] flex justify-center items-center">
-            <Circle width={10} strokeWidth={2} />
-          </div>
-          <div className="pl-0.5 pr-1 text-xs">start date</div>
-        </div>
+        {display_properties && display_properties?.start_date && (
+          <IssuePropertyStartDate
+            value={issue?.start_date || null}
+            onChange={(date: string) => handleStartDate(date)}
+            disabled={false}
+          />
+        )}
 
         {/* target/due date */}
-        <div className="flex-shrink-0 border border-custom-border-300 min-w-[22px] h-[22px] overflow-hidden rounded-sm flex justify-center items-center">
-          <div className="flex-shrink-0  w-[16px] h-[16px] flex justify-center items-center">
-            <Circle width={10} strokeWidth={2} />
-          </div>
-          <div className="pl-0.5 pr-1 text-xs">target/due date</div>
-        </div>
+        {display_properties && display_properties?.due_date && (
+          <IssuePropertyStartDate
+            value={issue?.target_date || null}
+            onChange={(date: string) => handleTargetDate(date)}
+            disabled={false}
+          />
+        )}
 
         {/* estimates */}
-        <IssuePropertyEstimates
-          value={issue?.estimate_point?.toString() || null}
-          dropdownArrow={false}
-          onChange={(id: string) => handleEstimate(id)}
-          disabled={false}
-          workspaceSlug={issue?.workspace_detail?.slug || null}
-          projectId={issue?.project_detail?.id || null}
-        />
+        {display_properties && display_properties?.estimate && (
+          <IssuePropertyEstimates
+            value={issue?.estimate_point?.toString() || null}
+            dropdownArrow={false}
+            onChange={(id: string) => handleEstimate(id)}
+            disabled={false}
+            workspaceSlug={issue?.workspace_detail?.slug || null}
+            projectId={issue?.project_detail?.id || null}
+          />
+        )}
 
         {/* extra render properties */}
         {/* sub-issues */}
-        <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} />
+        {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>
+              <div className="pl-0.5 pr-1 text-xs">{issue.sub_issues_count}</div>
             </div>
-            <div className="pl-0.5 pr-1 text-xs">{issue.sub_issues_count}</div>
-          </div>
-        </Tooltip>
+          </Tooltip>
+        )}
 
         {/* attachments */}
-        <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 w-[16px] h-[16px] flex justify-center items-center">
-              <Paperclip width={10} strokeWidth={2} />
+        {display_properties && display_properties?.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 w-[16px] h-[16px] flex justify-center items-center">
+                <Paperclip width={10} strokeWidth={2} />
+              </div>
+              <div className="pl-0.5 pr-1 text-xs">{issue.attachment_count}</div>
             </div>
-            <div className="pl-0.5 pr-1 text-xs">{issue.attachment_count}</div>
-          </div>
-        </Tooltip>
+          </Tooltip>
+        )}
 
         {/* link */}
-        <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  w-[16px] h-[16px] flex justify-center items-center">
-              <Link width={10} strokeWidth={2} />
+        {display_properties && display_properties?.link && (
+          <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  w-[16px] h-[16px] flex justify-center items-center">
+                <Link width={10} strokeWidth={2} />
+              </div>
+              <div className="pl-0.5 pr-1 text-xs">{issue.link_count}</div>
             </div>
-            <div className="pl-0.5 pr-1 text-xs">{issue.link_count}</div>
-          </div>
-        </Tooltip>
+          </Tooltip>
+        )}
       </div>
     );
   }
 );
+
+created_on: true;
+updated_on: true;
+due_date: true;
+
+key: true;
diff --git a/web/components/issues/issue-layouts/kanban/root.tsx b/web/components/issues/issue-layouts/kanban/root.tsx
index 1979e4e97e4..4d72936c078 100644
--- a/web/components/issues/issue-layouts/kanban/root.tsx
+++ b/web/components/issues/issue-layouts/kanban/root.tsx
@@ -25,6 +25,8 @@ export const KanBanLayout: React.FC = observer(() => {
 
   const group_by: string | null = issueFilterStore?.userDisplayFilters?.group_by || null;
 
+  const display_properties = issueFilterStore?.userDisplayProperties || null;
+
   const currentKanBanView: "swimlanes" | "default" = issueFilterStore?.userDisplayFilters?.sub_group_by
     ? "swimlanes"
     : "default";
@@ -53,9 +55,21 @@ export const KanBanLayout: React.FC = observer(() => {
     <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} />
+          <KanBan
+            issues={issues}
+            sub_group_by={sub_group_by}
+            group_by={group_by}
+            handleIssues={updateIssue}
+            display_properties={display_properties}
+          />
         ) : (
-          <KanBanSwimLanes issues={issues} sub_group_by={sub_group_by} group_by={group_by} handleIssues={updateIssue} />
+          <KanBanSwimLanes
+            issues={issues}
+            sub_group_by={sub_group_by}
+            group_by={group_by}
+            handleIssues={updateIssue}
+            display_properties={display_properties}
+          />
         )}
       </DragDropContext>
     </div>
diff --git a/web/components/issues/issue-layouts/kanban/swimlanes.tsx b/web/components/issues/issue-layouts/kanban/swimlanes.tsx
index 4c72fa3b790..6f0dee695f3 100644
--- a/web/components/issues/issue-layouts/kanban/swimlanes.tsx
+++ b/web/components/issues/issue-layouts/kanban/swimlanes.tsx
@@ -55,9 +55,10 @@ const SubGroupSwimlaneHeader: React.FC<ISubGroupSwimlaneHeader> = ({
 interface ISubGroupSwimlane extends ISubGroupSwimlaneHeader {
   issues: any;
   handleIssues?: (sub_group_by: string | null, group_by: string | null, issue: any) => void;
+  display_properties: any;
 }
 const SubGroupSwimlane: React.FC<ISubGroupSwimlane> = observer(
-  ({ issues, sub_group_by, group_by, list, listKey, handleIssues }) => {
+  ({ issues, sub_group_by, group_by, list, listKey, handleIssues, display_properties }) => {
     const { issueKanBanView: issueKanBanViewStore }: RootStore = useMobxStore();
 
     const calculateIssueCount = (column_id: string) => {
@@ -96,6 +97,7 @@ const SubGroupSwimlane: React.FC<ISubGroupSwimlane> = observer(
                     group_by={group_by}
                     sub_group_id={getValueFromObject(_list, listKey) as string}
                     handleIssues={handleIssues}
+                    display_properties={display_properties}
                   />
                 </div>
               )}
@@ -111,10 +113,11 @@ export interface IKanBanSwimLanes {
   sub_group_by: string | null;
   group_by: string | null;
   handleIssues?: (sub_group_by: string | null, group_by: string | null, issue: any) => void;
+  display_properties: any;
 }
 
 export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer(
-  ({ issues, sub_group_by, group_by, handleIssues }) => {
+  ({ issues, sub_group_by, group_by, handleIssues, display_properties }) => {
     const { project: projectStore }: RootStore = useMobxStore();
 
     return (
@@ -189,6 +192,7 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer(
             list={projectStore?.projectStates}
             listKey={`id`}
             handleIssues={handleIssues}
+            display_properties={display_properties}
           />
         )}
 
@@ -200,6 +204,7 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer(
             list={ISSUE_STATE_GROUPS}
             listKey={`key`}
             handleIssues={handleIssues}
+            display_properties={display_properties}
           />
         )}
 
@@ -211,6 +216,7 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer(
             list={ISSUE_PRIORITIES}
             listKey={`key`}
             handleIssues={handleIssues}
+            display_properties={display_properties}
           />
         )}
 
@@ -222,6 +228,7 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer(
             list={projectStore?.projectLabels}
             listKey={`id`}
             handleIssues={handleIssues}
+            display_properties={display_properties}
           />
         )}
 
@@ -233,6 +240,7 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer(
             list={projectStore?.projectMembers}
             listKey={`member.id`}
             handleIssues={handleIssues}
+            display_properties={display_properties}
           />
         )}
 
@@ -244,6 +252,7 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer(
             list={projectStore?.projectMembers}
             listKey={`member.id`}
             handleIssues={handleIssues}
+            display_properties={display_properties}
           />
         )}
       </div>
diff --git a/web/components/issues/issue-layouts/properties/date.tsx b/web/components/issues/issue-layouts/properties/date.tsx
index 78678b37892..37853ced119 100644
--- a/web/components/issues/issue-layouts/properties/date.tsx
+++ b/web/components/issues/issue-layouts/properties/date.tsx
@@ -1,4 +1,96 @@
-export const IssuePropertyDate = () => {
-  console.log("");
-  return <div>IssuePropertyDate</div>;
-};
+import React from "react";
+// headless ui
+import { Popover } from "@headlessui/react";
+// lucide icons
+import { Calendar, X } from "lucide-react";
+// react date picker
+import DatePicker from "react-datepicker";
+// mobx
+import { observer } from "mobx-react-lite";
+// components
+import { Tooltip } from "components/ui";
+// hooks
+import useDynamicDropdownPosition from "hooks/use-dynamic-dropdown";
+// helpers
+import { renderDateFormat } from "helpers/date-time.helper";
+
+export interface IIssuePropertyStartDate {
+  value?: any;
+  onChange?: (date: any) => void;
+  disabled?: boolean;
+}
+
+export const IssuePropertyStartDate: React.FC<IIssuePropertyStartDate> = observer(({ value, onChange, disabled }) => {
+  const dropdownBtn = React.useRef<any>(null);
+  const dropdownOptions = React.useRef<any>(null);
+
+  const [isOpen, setIsOpen] = React.useState<boolean>(false);
+
+  useDynamicDropdownPosition(isOpen, () => setIsOpen(false), dropdownBtn, dropdownOptions);
+
+  return (
+    <Popover as="div" className="relative">
+      {({ open }) => {
+        if (open) {
+          if (!isOpen) setIsOpen(true);
+        } else if (isOpen) setIsOpen(false);
+
+        return (
+          <>
+            <Popover.Button
+              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 ${
+                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 }) => (
+                  <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>
+  );
+});
diff --git a/web/components/issues/issue-layouts/properties/estimates.tsx b/web/components/issues/issue-layouts/properties/estimates.tsx
index 4176cc40aa7..1647d1a1615 100644
--- a/web/components/issues/issue-layouts/properties/estimates.tsx
+++ b/web/components/issues/issue-layouts/properties/estimates.tsx
@@ -5,6 +5,8 @@ import { Combobox } from "@headlessui/react";
 import { ChevronDown, Search, X, Check, Triangle } from "lucide-react";
 // mobx
 import { observer } from "mobx-react-lite";
+// components
+import { Tooltip } from "components/ui";
 // hooks
 import useDynamicDropdownPosition from "hooks/use-dynamic-dropdown";
 // mobx
@@ -110,12 +112,14 @@ export const IssuePropertyEstimates: React.FC<IIssuePropertyEstimates> = observe
                 } ${buttonClassName}`}
               >
                 {selectedOption ? (
-                  <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">
-                      <Triangle width={14} strokeWidth={2} />
+                  <Tooltip tooltipHeading={`Estimates`} 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">
+                        <Triangle width={14} strokeWidth={2} />
+                      </div>
+                      <div className="pl-0.5 pr-1 text-xs">{selectedOption?.title}</div>
                     </div>
-                    <div className="pl-0.5 pr-1 text-xs">{selectedOption?.title}</div>
-                  </div>
+                  </Tooltip>
                 ) : (
                   <div className="text-xs">Select option</div>
                 )}