From b3b79c51bbc1b1578396e30ceeaed5cbaa0b3a6d Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Wed, 18 Oct 2023 19:18:01 +0530
Subject: [PATCH] refactor: spreadsheet layout (#2478)

* refactor: spreadsheet column components

* refactor: spreadsheet layout components

* fix: unique key for each cell
---
 .../assignee-column/assignee-column.tsx       |  32 ----
 .../spreadsheet/assignee-column/index.ts      |   2 -
 .../assignee-column.tsx}                      |  15 +-
 .../columns-list.tsx}                         |   0
 .../created-on-column.tsx}                    |  10 +-
 .../due-date-column.tsx}                      |  13 +-
 .../estimate-column.tsx}                      |   8 +-
 .../spreadsheet/columns/index.ts              |  11 ++
 .../{issue-column => columns/issue}/index.ts  |   0
 .../issue}/issue-column.tsx                   |   2 +-
 .../issue}/spreadsheet-issue-column.tsx       |   0
 .../label-column.tsx}                         |  14 +-
 .../priority-column.tsx}                      |  10 +-
 .../start-date-column.tsx}                    |  13 +-
 .../state-column.tsx}                         |  14 +-
 .../updated-on-column.tsx}                    |  10 +-
 .../created-on-column/created-on-column.tsx   |  20 --
 .../spreadsheet/created-on-column/index.ts    |   2 -
 .../due-date-column/due-date-column.tsx       |  23 ---
 .../spreadsheet/due-date-column/index.ts      |   2 -
 .../estimate-column/estimate-column.tsx       |  23 ---
 .../spreadsheet/estimate-column/index.ts      |   2 -
 .../issues/issue-layouts/spreadsheet/index.ts |  13 +-
 .../spreadsheet/label-column/index.ts         |   2 -
 .../spreadsheet/label-column/label-column.tsx |  32 ----
 .../spreadsheet/priority-column/index.ts      |   2 -
 .../priority-column/priority-column.tsx       |  28 ---
 .../spreadsheet/spreadsheet-column.tsx        |  52 ++---
 .../spreadsheet/spreadsheet-view.tsx          | 181 +++++++++---------
 .../spreadsheet/start-date-column/index.ts    |   2 -
 .../start-date-column/start-date-column.tsx   |  22 ---
 .../spreadsheet/state-column/index.ts         |   2 -
 .../spreadsheet/state-column/state-column.tsx |  31 ---
 .../spreadsheet/updated-on-column/index.ts    |   2 -
 .../updated-on-column/updated-on-column.tsx   |  22 ---
 .../issues/view-select/start-date.tsx         |   2 +-
 web/styles/command-pallette.css               |   4 +-
 37 files changed, 190 insertions(+), 433 deletions(-)
 delete mode 100644 web/components/issues/issue-layouts/spreadsheet/assignee-column/assignee-column.tsx
 delete mode 100644 web/components/issues/issue-layouts/spreadsheet/assignee-column/index.ts
 rename web/components/issues/issue-layouts/spreadsheet/{assignee-column/spreadsheet-assignee-column.tsx => columns/assignee-column.tsx} (80%)
 rename web/components/issues/issue-layouts/spreadsheet/{spreadsheet-columns-list.tsx => columns/columns-list.tsx} (100%)
 rename web/components/issues/issue-layouts/spreadsheet/{created-on-column/spreadsheet-created-on-column.tsx => columns/created-on-column.tsx} (82%)
 rename web/components/issues/issue-layouts/spreadsheet/{due-date-column/spreadsheet-due-date-column.tsx => columns/due-date-column.tsx} (80%)
 rename web/components/issues/issue-layouts/spreadsheet/{estimate-column/spreadsheet-estimate-column.tsx => columns/estimate-column.tsx} (83%)
 create mode 100644 web/components/issues/issue-layouts/spreadsheet/columns/index.ts
 rename web/components/issues/issue-layouts/spreadsheet/{issue-column => columns/issue}/index.ts (100%)
 rename web/components/issues/issue-layouts/spreadsheet/{issue-column => columns/issue}/issue-column.tsx (99%)
 rename web/components/issues/issue-layouts/spreadsheet/{issue-column => columns/issue}/spreadsheet-issue-column.tsx (100%)
 rename web/components/issues/issue-layouts/spreadsheet/{label-column/spreadsheet-label-column.tsx => columns/label-column.tsx} (85%)
 rename web/components/issues/issue-layouts/spreadsheet/{priority-column/spreadsheet-priority-column.tsx => columns/priority-column.tsx} (76%)
 rename web/components/issues/issue-layouts/spreadsheet/{start-date-column/spreadsheet-start-date-column.tsx => columns/start-date-column.tsx} (80%)
 rename web/components/issues/issue-layouts/spreadsheet/{state-column/spreadsheet-state-column.tsx => columns/state-column.tsx} (83%)
 rename web/components/issues/issue-layouts/spreadsheet/{updated-on-column/spreadsheet-updated-on-column.tsx => columns/updated-on-column.tsx} (83%)
 delete mode 100644 web/components/issues/issue-layouts/spreadsheet/created-on-column/created-on-column.tsx
 delete mode 100644 web/components/issues/issue-layouts/spreadsheet/created-on-column/index.ts
 delete mode 100644 web/components/issues/issue-layouts/spreadsheet/due-date-column/due-date-column.tsx
 delete mode 100644 web/components/issues/issue-layouts/spreadsheet/due-date-column/index.ts
 delete mode 100644 web/components/issues/issue-layouts/spreadsheet/estimate-column/estimate-column.tsx
 delete mode 100644 web/components/issues/issue-layouts/spreadsheet/estimate-column/index.ts
 delete mode 100644 web/components/issues/issue-layouts/spreadsheet/label-column/index.ts
 delete mode 100644 web/components/issues/issue-layouts/spreadsheet/label-column/label-column.tsx
 delete mode 100644 web/components/issues/issue-layouts/spreadsheet/priority-column/index.ts
 delete mode 100644 web/components/issues/issue-layouts/spreadsheet/priority-column/priority-column.tsx
 delete mode 100644 web/components/issues/issue-layouts/spreadsheet/start-date-column/index.ts
 delete mode 100644 web/components/issues/issue-layouts/spreadsheet/start-date-column/start-date-column.tsx
 delete mode 100644 web/components/issues/issue-layouts/spreadsheet/state-column/index.ts
 delete mode 100644 web/components/issues/issue-layouts/spreadsheet/state-column/state-column.tsx
 delete mode 100644 web/components/issues/issue-layouts/spreadsheet/updated-on-column/index.ts
 delete mode 100644 web/components/issues/issue-layouts/spreadsheet/updated-on-column/updated-on-column.tsx

diff --git a/web/components/issues/issue-layouts/spreadsheet/assignee-column/assignee-column.tsx b/web/components/issues/issue-layouts/spreadsheet/assignee-column/assignee-column.tsx
deleted file mode 100644
index 53484b3f61..0000000000
--- a/web/components/issues/issue-layouts/spreadsheet/assignee-column/assignee-column.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from "react";
-// components
-import { MembersSelect } from "components/project";
-// types
-import { IIssue, IUserLite } from "types";
-
-type Props = {
-  issue: IIssue;
-  onChange: (members: string[]) => void;
-  members: IUserLite[] | undefined;
-  disabled: boolean;
-};
-
-export const AssigneeColumn: React.FC<Props> = (props) => {
-  const { issue, onChange, members, disabled } = props;
-
-  return (
-    <div className="flex items-center text-sm h-11 w-full bg-custom-background-100">
-      <span className="flex items-center px-4 py-2.5 h-full w-full flex-shrink-0 border-r border-b border-custom-border-100">
-        <MembersSelect
-          value={issue.assignees}
-          onChange={onChange}
-          members={members ?? []}
-          buttonClassName="!p-0 !rounded-none !shadow-none !border-0"
-          hideDropdownArrow
-          disabled={disabled}
-          multiple
-        />
-      </span>
-    </div>
-  );
-};
diff --git a/web/components/issues/issue-layouts/spreadsheet/assignee-column/index.ts b/web/components/issues/issue-layouts/spreadsheet/assignee-column/index.ts
deleted file mode 100644
index 8750550beb..0000000000
--- a/web/components/issues/issue-layouts/spreadsheet/assignee-column/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./spreadsheet-assignee-column";
-export * from "./assignee-column";
diff --git a/web/components/issues/issue-layouts/spreadsheet/assignee-column/spreadsheet-assignee-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/assignee-column.tsx
similarity index 80%
rename from web/components/issues/issue-layouts/spreadsheet/assignee-column/spreadsheet-assignee-column.tsx
rename to web/components/issues/issue-layouts/spreadsheet/columns/assignee-column.tsx
index f0f10880b2..f4878d1372 100644
--- a/web/components/issues/issue-layouts/spreadsheet/assignee-column/spreadsheet-assignee-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/assignee-column.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 
 // components
-import { AssigneeColumn } from "components/issues";
+import { MembersSelect } from "components/project";
 // hooks
 import useSubIssue from "hooks/use-sub-issue";
 // types
@@ -21,12 +21,15 @@ export const SpreadsheetAssigneeColumn: React.FC<Props> = ({ issue, members, onC
   const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
 
   return (
-    <div>
-      <AssigneeColumn
-        issue={issue}
-        members={members}
+    <>
+      <MembersSelect
+        value={issue.assignees}
         onChange={(data) => onChange({ assignees_list: data })}
+        members={members ?? []}
+        buttonClassName="!p-0 !rounded-none !shadow-none !border-0"
+        hideDropdownArrow
         disabled={disabled}
+        multiple
       />
 
       {isExpanded &&
@@ -43,6 +46,6 @@ export const SpreadsheetAssigneeColumn: React.FC<Props> = ({ issue, members, onC
             disabled={disabled}
           />
         ))}
-    </div>
+    </>
   );
 };
diff --git a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-columns-list.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/columns-list.tsx
similarity index 100%
rename from web/components/issues/issue-layouts/spreadsheet/spreadsheet-columns-list.tsx
rename to web/components/issues/issue-layouts/spreadsheet/columns/columns-list.tsx
diff --git a/web/components/issues/issue-layouts/spreadsheet/created-on-column/spreadsheet-created-on-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/created-on-column.tsx
similarity index 82%
rename from web/components/issues/issue-layouts/spreadsheet/created-on-column/spreadsheet-created-on-column.tsx
rename to web/components/issues/issue-layouts/spreadsheet/columns/created-on-column.tsx
index 5295a8648e..54a8ffee59 100644
--- a/web/components/issues/issue-layouts/spreadsheet/created-on-column/spreadsheet-created-on-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/created-on-column.tsx
@@ -1,9 +1,9 @@
 import React from "react";
 
-// components
-import { CreatedOnColumn } from "components/issues";
 // hooks
 import useSubIssue from "hooks/use-sub-issue";
+// helpers
+import { renderLongDetailDateFormat } from "helpers/date-time.helper";
 // types
 import { IIssue } from "types";
 
@@ -18,8 +18,8 @@ export const SpreadsheetCreatedOnColumn: React.FC<Props> = ({ issue, expandedIss
   const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
 
   return (
-    <div>
-      <CreatedOnColumn issue={issue} />
+    <>
+      {renderLongDetailDateFormat(issue.created_at)}
 
       {isExpanded &&
         !isLoading &&
@@ -28,6 +28,6 @@ export const SpreadsheetCreatedOnColumn: React.FC<Props> = ({ issue, expandedIss
         subIssues.map((subIssue: IIssue) => (
           <SpreadsheetCreatedOnColumn key={subIssue.id} issue={subIssue} expandedIssues={expandedIssues} />
         ))}
-    </div>
+    </>
   );
 };
diff --git a/web/components/issues/issue-layouts/spreadsheet/due-date-column/spreadsheet-due-date-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx
similarity index 80%
rename from web/components/issues/issue-layouts/spreadsheet/due-date-column/spreadsheet-due-date-column.tsx
rename to web/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx
index 0693ac455c..41bafeadcc 100644
--- a/web/components/issues/issue-layouts/spreadsheet/due-date-column/spreadsheet-due-date-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 
 // components
-import { DueDateColumn } from "components/issues";
+import { ViewDueDateSelect } from "components/issues";
 // hooks
 import useSubIssue from "hooks/use-sub-issue";
 // types
@@ -20,8 +20,13 @@ export const SpreadsheetDueDateColumn: React.FC<Props> = ({ issue, onChange, exp
   const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
 
   return (
-    <div>
-      <DueDateColumn issue={issue} onChange={(val) => onChange({ target_date: val })} disabled={disabled} />
+    <>
+      <ViewDueDateSelect
+        issue={issue}
+        onChange={(val) => onChange({ target_date: val })}
+        noBorder
+        disabled={disabled}
+      />
 
       {isExpanded &&
         !isLoading &&
@@ -36,6 +41,6 @@ export const SpreadsheetDueDateColumn: React.FC<Props> = ({ issue, onChange, exp
             disabled={disabled}
           />
         ))}
-    </div>
+    </>
   );
 };
diff --git a/web/components/issues/issue-layouts/spreadsheet/estimate-column/spreadsheet-estimate-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/estimate-column.tsx
similarity index 83%
rename from web/components/issues/issue-layouts/spreadsheet/estimate-column/spreadsheet-estimate-column.tsx
rename to web/components/issues/issue-layouts/spreadsheet/columns/estimate-column.tsx
index a8ae5beb48..156fb707f2 100644
--- a/web/components/issues/issue-layouts/spreadsheet/estimate-column/spreadsheet-estimate-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/estimate-column.tsx
@@ -1,5 +1,5 @@
 // components
-import { EstimateColumn } from "components/issues";
+import { ViewEstimateSelect } from "components/issues";
 // hooks
 import useSubIssue from "hooks/use-sub-issue";
 // types
@@ -20,8 +20,8 @@ export const SpreadsheetEstimateColumn: React.FC<Props> = (props) => {
   const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
 
   return (
-    <div>
-      <EstimateColumn issue={issue} onChange={(data) => onChange({ estimate_point: data })} disabled={disabled} />
+    <>
+      <ViewEstimateSelect issue={issue} onChange={(data) => onChange({ estimate_point: data })} disabled={disabled} />
 
       {isExpanded &&
         !isLoading &&
@@ -36,6 +36,6 @@ export const SpreadsheetEstimateColumn: React.FC<Props> = (props) => {
             disabled={disabled}
           />
         ))}
-    </div>
+    </>
   );
 };
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/index.ts b/web/components/issues/issue-layouts/spreadsheet/columns/index.ts
new file mode 100644
index 0000000000..a1c4959abe
--- /dev/null
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/index.ts
@@ -0,0 +1,11 @@
+export * from "./issue";
+export * from "./assignee-column";
+export * from "./columns-list";
+export * from "./created-on-column";
+export * from "./due-date-column";
+export * from "./estimate-column";
+export * from "./label-column";
+export * from "./priority-column";
+export * from "./start-date-column";
+export * from "./state-column";
+export * from "./updated-on-column";
diff --git a/web/components/issues/issue-layouts/spreadsheet/issue-column/index.ts b/web/components/issues/issue-layouts/spreadsheet/columns/issue/index.ts
similarity index 100%
rename from web/components/issues/issue-layouts/spreadsheet/issue-column/index.ts
rename to web/components/issues/issue-layouts/spreadsheet/columns/issue/index.ts
diff --git a/web/components/issues/issue-layouts/spreadsheet/issue-column/issue-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/issue/issue-column.tsx
similarity index 99%
rename from web/components/issues/issue-layouts/spreadsheet/issue-column/issue-column.tsx
rename to web/components/issues/issue-layouts/spreadsheet/columns/issue/issue-column.tsx
index 5b6da6871f..65547a805b 100644
--- a/web/components/issues/issue-layouts/spreadsheet/issue-column/issue-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/issue/issue-column.tsx
@@ -63,7 +63,7 @@ export const IssueColumn: React.FC<Props> = ({
   const paddingLeft = `${nestingLevel * 54}px`;
 
   return (
-    <div className="group flex items-center w-[28rem] text-sm h-11 sticky top-0 bg-custom-background-100 truncate border-b border-r border-custom-border-100">
+    <div className="group flex items-center w-[28rem] text-sm h-11 sticky top-0 bg-custom-background-100 truncate border-b border-custom-border-100">
       {properties.key && (
         <div
           className="flex gap-1.5 px-4 pr-0 py-2.5 items-center min-w-[96px]"
diff --git a/web/components/issues/issue-layouts/spreadsheet/issue-column/spreadsheet-issue-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/issue/spreadsheet-issue-column.tsx
similarity index 100%
rename from web/components/issues/issue-layouts/spreadsheet/issue-column/spreadsheet-issue-column.tsx
rename to web/components/issues/issue-layouts/spreadsheet/columns/issue/spreadsheet-issue-column.tsx
diff --git a/web/components/issues/issue-layouts/spreadsheet/label-column/spreadsheet-label-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/label-column.tsx
similarity index 85%
rename from web/components/issues/issue-layouts/spreadsheet/label-column/spreadsheet-label-column.tsx
rename to web/components/issues/issue-layouts/spreadsheet/columns/label-column.tsx
index 465326fcb4..d912cad9f9 100644
--- a/web/components/issues/issue-layouts/spreadsheet/label-column/spreadsheet-label-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/label-column.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 
 // components
-import { LabelColumn } from "components/issues";
+import { LabelSelect } from "components/project";
 // hooks
 import useSubIssue from "hooks/use-sub-issue";
 // types
@@ -23,11 +23,13 @@ export const SpreadsheetLabelColumn: React.FC<Props> = (props) => {
   const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
 
   return (
-    <div>
-      <LabelColumn
-        issue={issue}
+    <>
+      <LabelSelect
+        value={issue.labels}
         onChange={(data) => onChange({ labels_list: data })}
-        labels={labels}
+        labels={labels ?? []}
+        hideDropdownArrow
+        maxRender={1}
         disabled={disabled}
       />
 
@@ -45,6 +47,6 @@ export const SpreadsheetLabelColumn: React.FC<Props> = (props) => {
             disabled={disabled}
           />
         ))}
-    </div>
+    </>
   );
 };
diff --git a/web/components/issues/issue-layouts/spreadsheet/priority-column/spreadsheet-priority-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/priority-column.tsx
similarity index 76%
rename from web/components/issues/issue-layouts/spreadsheet/priority-column/spreadsheet-priority-column.tsx
rename to web/components/issues/issue-layouts/spreadsheet/columns/priority-column.tsx
index 1c12054f50..22ef2a0bd5 100644
--- a/web/components/issues/issue-layouts/spreadsheet/priority-column/spreadsheet-priority-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/priority-column.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 
 // components
-import { PriorityColumn } from "components/issues";
+import { PrioritySelect } from "components/project";
 // hooks
 import useSubIssue from "hooks/use-sub-issue";
 // types
@@ -21,7 +21,13 @@ export const SpreadsheetPriorityColumn: React.FC<Props> = ({ issue, onChange, ex
 
   return (
     <div>
-      <PriorityColumn issue={issue} onChange={(data) => onChange({ priority: data })} disabled={disabled} />
+      <PrioritySelect
+        value={issue.priority}
+        onChange={(data) => onChange({ priority: data })}
+        buttonClassName="!p-0 !rounded-none !shadow-none !border-0"
+        hideDropdownArrow
+        disabled={disabled}
+      />
 
       {isExpanded &&
         !isLoading &&
diff --git a/web/components/issues/issue-layouts/spreadsheet/start-date-column/spreadsheet-start-date-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/start-date-column.tsx
similarity index 80%
rename from web/components/issues/issue-layouts/spreadsheet/start-date-column/spreadsheet-start-date-column.tsx
rename to web/components/issues/issue-layouts/spreadsheet/columns/start-date-column.tsx
index 61087fa19d..cdacf4e72d 100644
--- a/web/components/issues/issue-layouts/spreadsheet/start-date-column/spreadsheet-start-date-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/start-date-column.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 
 // components
-import { StartDateColumn } from "components/issues";
+import { ViewStartDateSelect } from "components/issues";
 // hooks
 import useSubIssue from "hooks/use-sub-issue";
 // types
@@ -20,8 +20,13 @@ export const SpreadsheetStartDateColumn: React.FC<Props> = ({ issue, onChange, e
   const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
 
   return (
-    <div>
-      <StartDateColumn issue={issue} onChange={(val) => onChange({ start_date: val })} disabled={disabled} />
+    <>
+      <ViewStartDateSelect
+        issue={issue}
+        onChange={(val) => onChange({ start_date: val })}
+        noBorder
+        disabled={disabled}
+      />
 
       {isExpanded &&
         !isLoading &&
@@ -36,6 +41,6 @@ export const SpreadsheetStartDateColumn: React.FC<Props> = ({ issue, onChange, e
             disabled={disabled}
           />
         ))}
-    </div>
+    </>
   );
 };
diff --git a/web/components/issues/issue-layouts/spreadsheet/state-column/spreadsheet-state-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/state-column.tsx
similarity index 83%
rename from web/components/issues/issue-layouts/spreadsheet/state-column/spreadsheet-state-column.tsx
rename to web/components/issues/issue-layouts/spreadsheet/columns/state-column.tsx
index 8a30bbb8cf..7873ebe020 100644
--- a/web/components/issues/issue-layouts/spreadsheet/state-column/spreadsheet-state-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/state-column.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 
 // components
-import { StateColumn } from "components/issues";
+import { StateSelect } from "components/states";
 // hooks
 import useSubIssue from "hooks/use-sub-issue";
 // types
@@ -23,11 +23,13 @@ export const SpreadsheetStateColumn: React.FC<Props> = (props) => {
   const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
 
   return (
-    <div>
-      <StateColumn
-        issue={issue}
+    <>
+      <StateSelect
+        value={issue.state_detail}
         onChange={(data) => onChange({ state: data.id, state_detail: data })}
-        states={states}
+        stateGroups={states}
+        buttonClassName="!shadow-none !border-0"
+        hideDropdownArrow
         disabled={disabled}
       />
 
@@ -45,6 +47,6 @@ export const SpreadsheetStateColumn: React.FC<Props> = (props) => {
             disabled={disabled}
           />
         ))}
-    </div>
+    </>
   );
 };
diff --git a/web/components/issues/issue-layouts/spreadsheet/updated-on-column/spreadsheet-updated-on-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/updated-on-column.tsx
similarity index 83%
rename from web/components/issues/issue-layouts/spreadsheet/updated-on-column/spreadsheet-updated-on-column.tsx
rename to web/components/issues/issue-layouts/spreadsheet/columns/updated-on-column.tsx
index 4752ea088f..b2892f2a9c 100644
--- a/web/components/issues/issue-layouts/spreadsheet/updated-on-column/spreadsheet-updated-on-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/updated-on-column.tsx
@@ -1,9 +1,9 @@
 import React from "react";
 
-// components
-import { UpdatedOnColumn } from "components/issues";
 // hooks
 import useSubIssue from "hooks/use-sub-issue";
+// helpers
+import { renderLongDetailDateFormat } from "helpers/date-time.helper";
 // types
 import { IIssue } from "types";
 
@@ -20,8 +20,8 @@ export const SpreadsheetUpdatedOnColumn: React.FC<Props> = (props) => {
   const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
 
   return (
-    <div>
-      <UpdatedOnColumn issue={issue} />
+    <>
+      {renderLongDetailDateFormat(issue.updated_at)}
 
       {isExpanded &&
         !isLoading &&
@@ -30,6 +30,6 @@ export const SpreadsheetUpdatedOnColumn: React.FC<Props> = (props) => {
         subIssues.map((subIssue: IIssue) => (
           <SpreadsheetUpdatedOnColumn key={subIssue.id} issue={subIssue} expandedIssues={expandedIssues} />
         ))}
-    </div>
+    </>
   );
 };
diff --git a/web/components/issues/issue-layouts/spreadsheet/created-on-column/created-on-column.tsx b/web/components/issues/issue-layouts/spreadsheet/created-on-column/created-on-column.tsx
deleted file mode 100644
index fe648ac86e..0000000000
--- a/web/components/issues/issue-layouts/spreadsheet/created-on-column/created-on-column.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from "react";
-
-// types
-import { IIssue } from "types";
-// helper
-import { renderLongDetailDateFormat } from "helpers/date-time.helper";
-
-type Props = {
-  issue: IIssue;
-};
-
-export const CreatedOnColumn: React.FC<Props> = ({ issue }) => (
-  <div className="flex items-center text-sm h-11 w-full bg-custom-background-100">
-    <span className="flex items-center px-4 py-2.5 h-full w-full flex-shrink-0 border-r border-b border-custom-border-100">
-      <div className="flex items-center text-xs cursor-default text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-200">
-        {renderLongDetailDateFormat(issue.created_at)}
-      </div>
-    </span>
-  </div>
-);
diff --git a/web/components/issues/issue-layouts/spreadsheet/created-on-column/index.ts b/web/components/issues/issue-layouts/spreadsheet/created-on-column/index.ts
deleted file mode 100644
index 28781aa173..0000000000
--- a/web/components/issues/issue-layouts/spreadsheet/created-on-column/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./spreadsheet-created-on-column";
-export * from "./created-on-column";
diff --git a/web/components/issues/issue-layouts/spreadsheet/due-date-column/due-date-column.tsx b/web/components/issues/issue-layouts/spreadsheet/due-date-column/due-date-column.tsx
deleted file mode 100644
index 0caca7cd7d..0000000000
--- a/web/components/issues/issue-layouts/spreadsheet/due-date-column/due-date-column.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { FC } from "react";
-// components
-import { ViewDueDateSelect } from "components/issues";
-// types
-import { IIssue } from "types";
-
-type Props = {
-  issue: IIssue;
-  onChange: (date: string | null) => void;
-  disabled: boolean;
-};
-
-export const DueDateColumn: FC<Props> = (props) => {
-  const { issue, onChange, disabled } = props;
-
-  return (
-    <div className="flex items-center text-sm h-11 w-full bg-custom-background-100">
-      <span className="flex items-center px-4 py-2.5 h-full w-full flex-shrink-0 border-r border-b border-custom-border-100">
-        <ViewDueDateSelect issue={issue} onChange={onChange} noBorder disabled={disabled} />
-      </span>
-    </div>
-  );
-};
diff --git a/web/components/issues/issue-layouts/spreadsheet/due-date-column/index.ts b/web/components/issues/issue-layouts/spreadsheet/due-date-column/index.ts
deleted file mode 100644
index 64b4548775..0000000000
--- a/web/components/issues/issue-layouts/spreadsheet/due-date-column/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./spreadsheet-due-date-column";
-export * from "./due-date-column";
diff --git a/web/components/issues/issue-layouts/spreadsheet/estimate-column/estimate-column.tsx b/web/components/issues/issue-layouts/spreadsheet/estimate-column/estimate-column.tsx
deleted file mode 100644
index f030111350..0000000000
--- a/web/components/issues/issue-layouts/spreadsheet/estimate-column/estimate-column.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { FC } from "react";
-// components
-import { ViewEstimateSelect } from "components/issues";
-// types
-import { IIssue } from "types";
-
-type Props = {
-  issue: IIssue;
-  onChange: (data: number) => void;
-  disabled: boolean;
-};
-
-export const EstimateColumn: FC<Props> = (props) => {
-  const { issue, onChange, disabled } = props;
-
-  return (
-    <div className="flex items-center text-sm h-11 w-full bg-custom-background-100">
-      <span className="flex items-center px-4 py-2.5 h-full w-full flex-shrink-0 border-r border-b border-custom-border-100">
-        <ViewEstimateSelect issue={issue} onChange={onChange} disabled={disabled} />
-      </span>
-    </div>
-  );
-};
diff --git a/web/components/issues/issue-layouts/spreadsheet/estimate-column/index.ts b/web/components/issues/issue-layouts/spreadsheet/estimate-column/index.ts
deleted file mode 100644
index 31f07e6a79..0000000000
--- a/web/components/issues/issue-layouts/spreadsheet/estimate-column/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./spreadsheet-estimate-column";
-export * from "./estimate-column";
diff --git a/web/components/issues/issue-layouts/spreadsheet/index.ts b/web/components/issues/issue-layouts/spreadsheet/index.ts
index 7a804c6de3..64b02a7661 100644
--- a/web/components/issues/issue-layouts/spreadsheet/index.ts
+++ b/web/components/issues/issue-layouts/spreadsheet/index.ts
@@ -1,15 +1,4 @@
-export * from "./assignee-column";
-export * from "./created-on-column";
-export * from "./due-date-column";
-export * from "./estimate-column";
-export * from "./issue-column";
-export * from "./label-column";
-export * from "./priority-column";
+export * from "./columns";
 export * from "./roots";
-export * from "./start-date-column";
-export * from "./state-column";
-export * from "./updated-on-column";
-export * from "./issue-column";
 export * from "./spreadsheet-column";
-export * from "./spreadsheet-columns-list";
 export * from "./spreadsheet-view";
diff --git a/web/components/issues/issue-layouts/spreadsheet/label-column/index.ts b/web/components/issues/issue-layouts/spreadsheet/label-column/index.ts
deleted file mode 100644
index a1b69c1a9f..0000000000
--- a/web/components/issues/issue-layouts/spreadsheet/label-column/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./spreadsheet-label-column";
-export * from "./label-column";
diff --git a/web/components/issues/issue-layouts/spreadsheet/label-column/label-column.tsx b/web/components/issues/issue-layouts/spreadsheet/label-column/label-column.tsx
deleted file mode 100644
index 3d720da1b2..0000000000
--- a/web/components/issues/issue-layouts/spreadsheet/label-column/label-column.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from "react";
-
-// components
-import { LabelSelect } from "components/project";
-// types
-import { IIssue, IIssueLabels } from "types";
-
-type Props = {
-  issue: IIssue;
-  onChange: (data: string[]) => void;
-  labels: IIssueLabels[] | undefined;
-  disabled: boolean;
-};
-
-export const LabelColumn: React.FC<Props> = (props) => {
-  const { issue, onChange, labels, disabled } = props;
-
-  return (
-    <div className="flex items-center text-sm h-11 w-full bg-custom-background-100">
-      <span className="flex items-center px-4 py-2.5 h-full w-full flex-shrink-0 border-r border-b border-custom-border-100">
-        <LabelSelect
-          value={issue.labels}
-          onChange={onChange}
-          labels={labels ?? []}
-          hideDropdownArrow
-          maxRender={1}
-          disabled={disabled}
-        />
-      </span>
-    </div>
-  );
-};
diff --git a/web/components/issues/issue-layouts/spreadsheet/priority-column/index.ts b/web/components/issues/issue-layouts/spreadsheet/priority-column/index.ts
deleted file mode 100644
index fc542331e9..0000000000
--- a/web/components/issues/issue-layouts/spreadsheet/priority-column/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./spreadsheet-priority-column";
-export * from "./priority-column";
diff --git a/web/components/issues/issue-layouts/spreadsheet/priority-column/priority-column.tsx b/web/components/issues/issue-layouts/spreadsheet/priority-column/priority-column.tsx
deleted file mode 100644
index 21f2a59271..0000000000
--- a/web/components/issues/issue-layouts/spreadsheet/priority-column/priority-column.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-// components
-import { PrioritySelect } from "components/project";
-// types
-import { IIssue, TIssuePriorities } from "types";
-
-type Props = {
-  issue: IIssue;
-  onChange: (data: TIssuePriorities) => void;
-  disabled: boolean;
-};
-
-export const PriorityColumn: React.FC<Props> = (props) => {
-  const { issue, onChange, disabled } = props;
-
-  return (
-    <div className="flex items-center text-sm h-11 w-full bg-custom-background-100">
-      <span className="flex items-center px-4 py-2.5 h-full w-full flex-shrink-0 border-r border-b border-custom-border-100">
-        <PrioritySelect
-          value={issue.priority}
-          onChange={onChange}
-          buttonClassName="!p-0 !rounded-none !shadow-none !border-0"
-          hideDropdownArrow
-          disabled={disabled}
-        />
-      </span>
-    </div>
-  );
-};
diff --git a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-column.tsx b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-column.tsx
index d6f3474f38..994f1c212a 100644
--- a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-column.tsx
@@ -165,22 +165,22 @@ export const SpreadsheetColumn: React.FC<Props> = (props) => {
             )}
         </CustomMenu>
       </div>
+
       <div className="h-full min-w-[8rem] w-full">
-        {issues?.map((issue) => {
-          if (property === "state")
-            return (
+        {issues?.map((issue) => (
+          <div
+            key={`${property}-${issue.id}`}
+            className="h-11 flex items-center px-4 py-2.5 border-b-[0.5px] border-custom-border-200"
+          >
+            {property === "state" ? (
               <SpreadsheetStateColumn
-                key={`${property}-${issue.id}`}
                 disabled={disableUserActions}
                 expandedIssues={expandedIssues}
                 issue={issue}
                 onChange={(data: Partial<IIssue>) => handleUpdateIssue(issue, data)}
                 states={states}
               />
-            );
-
-          if (property === "priority")
-            return (
+            ) : property === "priority" ? (
               <SpreadsheetPriorityColumn
                 key={`${property}-${issue.id}`}
                 disabled={disableUserActions}
@@ -188,10 +188,7 @@ export const SpreadsheetColumn: React.FC<Props> = (props) => {
                 issue={issue}
                 onChange={(data: Partial<IIssue>) => handleUpdateIssue(issue, data)}
               />
-            );
-
-          if (property === "estimate")
-            return (
+            ) : property === "estimate" ? (
               <SpreadsheetEstimateColumn
                 key={`${property}-${issue.id}`}
                 disabled={disableUserActions}
@@ -199,9 +196,7 @@ export const SpreadsheetColumn: React.FC<Props> = (props) => {
                 issue={issue}
                 onChange={(data: Partial<IIssue>) => handleUpdateIssue(issue, data)}
               />
-            );
-          if (property === "assignee")
-            return (
+            ) : property === "assignee" ? (
               <SpreadsheetAssigneeColumn
                 key={`${property}-${issue.id}`}
                 disabled={disableUserActions}
@@ -210,9 +205,7 @@ export const SpreadsheetColumn: React.FC<Props> = (props) => {
                 members={members}
                 onChange={(data: Partial<IIssue>) => handleUpdateIssue(issue, data)}
               />
-            );
-          if (property === "labels")
-            return (
+            ) : property === "labels" ? (
               <SpreadsheetLabelColumn
                 key={`${property}-${issue.id}`}
                 disabled={disableUserActions}
@@ -221,9 +214,7 @@ export const SpreadsheetColumn: React.FC<Props> = (props) => {
                 labels={labels}
                 onChange={(data: Partial<IIssue>) => handleUpdateIssue(issue, data)}
               />
-            );
-          if (property === "start_date")
-            return (
+            ) : property === "start_date" ? (
               <SpreadsheetStartDateColumn
                 key={`${property}-${issue.id}`}
                 disabled={disableUserActions}
@@ -231,9 +222,7 @@ export const SpreadsheetColumn: React.FC<Props> = (props) => {
                 issue={issue}
                 onChange={(data: Partial<IIssue>) => handleUpdateIssue(issue, data)}
               />
-            );
-          if (property === "due_date")
-            return (
+            ) : property === "due_date" ? (
               <SpreadsheetDueDateColumn
                 key={`${property}-${issue.id}`}
                 disabled={disableUserActions}
@@ -241,26 +230,21 @@ export const SpreadsheetColumn: React.FC<Props> = (props) => {
                 issue={issue}
                 onChange={(data: Partial<IIssue>) => handleUpdateIssue(issue, data)}
               />
-            );
-          if (property === "created_on")
-            return (
+            ) : property === "created_on" ? (
               <SpreadsheetCreatedOnColumn
                 key={`${property}-${issue.id}`}
                 expandedIssues={expandedIssues}
                 issue={issue}
               />
-            );
-          if (property === "updated_on")
-            return (
+            ) : property === "updated_on" ? (
               <SpreadsheetUpdatedOnColumn
                 key={`${property}-${issue.id}`}
                 expandedIssues={expandedIssues}
                 issue={issue}
               />
-            );
-
-          return null;
-        })}
+            ) : null}
+          </div>
+        ))}
       </div>
     </div>
   );
diff --git a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
index a1e642bbc5..2be3a927e1 100644
--- a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
@@ -80,64 +80,66 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
   }, []);
 
   return (
-    <>
-      <div className="relative flex h-full w-full rounded-lg text-custom-text-200 overflow-x-auto whitespace-nowrap bg-custom-background-200">
-        <div className="h-full w-full flex flex-col">
-          <div ref={containerRef} className="flex max-h-full h-full overflow-y-auto">
-            {issues ? (
-              <>
-                <div className="sticky left-0 w-[28rem] z-[2]">
-                  <div
-                    className="relative flex flex-col h-max w-full bg-custom-background-100 z-[2]"
-                    style={{
-                      boxShadow: isScrolled ? "8px -9px 12px rgba(0, 0, 0, 0.05)" : "",
-                    }}
-                  >
-                    <div className="flex items-center text-sm font-medium z-[2] h-11 w-full sticky top-0 bg-custom-background-90 border border-l-0 border-custom-border-100">
-                      {displayProperties.key && (
-                        <span className="flex items-center px-4 py-2.5 h-full w-24 flex-shrink-0">ID</span>
-                      )}
-                      <span className="flex items-center px-4 py-2.5 h-full w-full flex-grow">Issue</span>
-                    </div>
-
-                    {issues.map((issue: IIssue, index) => (
-                      <SpreadsheetIssuesColumn
-                        key={`${issue.id}_${index}`}
-                        issue={issue}
-                        projectId={issue.project_detail.id}
-                        expandedIssues={expandedIssues}
-                        setExpandedIssues={setExpandedIssues}
-                        properties={displayProperties}
-                        handleIssueAction={handleIssueAction}
-                        disableUserActions={disableUserActions}
-                      />
-                    ))}
+    <div className="relative flex h-full w-full rounded-lg text-custom-text-200 overflow-x-auto whitespace-nowrap bg-custom-background-200">
+      <div className="h-full w-full flex flex-col">
+        <div
+          ref={containerRef}
+          className="flex max-h-full h-full overflow-y-auto divide-x-[0.5px] divide-custom-border-200"
+        >
+          {issues ? (
+            <>
+              <div className="sticky left-0 w-[28rem] z-[2]">
+                <div
+                  className="relative flex flex-col h-max w-full bg-custom-background-100 z-[2]"
+                  style={{
+                    boxShadow: isScrolled ? "8px -9px 12px rgba(0, 0, 0, 0.05)" : "",
+                  }}
+                >
+                  <div className="flex items-center text-sm font-medium z-[2] h-11 w-full sticky top-0 bg-custom-background-90 border border-l-0 border-custom-border-100">
+                    {displayProperties.key && (
+                      <span className="flex items-center px-4 py-2.5 h-full w-24 flex-shrink-0">ID</span>
+                    )}
+                    <span className="flex items-center px-4 py-2.5 h-full w-full flex-grow">Issue</span>
                   </div>
+
+                  {issues.map((issue: IIssue, index) => (
+                    <SpreadsheetIssuesColumn
+                      key={`${issue.id}_${index}`}
+                      issue={issue}
+                      projectId={issue.project_detail.id}
+                      expandedIssues={expandedIssues}
+                      setExpandedIssues={setExpandedIssues}
+                      properties={displayProperties}
+                      handleIssueAction={handleIssueAction}
+                      disableUserActions={disableUserActions}
+                    />
+                  ))}
                 </div>
-
-                <SpreadsheetColumnsList
-                  displayFilters={displayFilters}
-                  displayProperties={displayProperties}
-                  disableUserActions={disableUserActions}
-                  expandedIssues={expandedIssues}
-                  handleDisplayFilterUpdate={handleDisplayFilterUpdate}
-                  handleUpdateIssue={handleUpdateIssue}
-                  issues={issues}
-                  members={members}
-                  labels={labels}
-                  states={states}
-                />
-              </>
-            ) : (
-              <div className="grid place-items-center h-full w-full">
-                <Spinner />
               </div>
-            )}
-          </div>
 
-          <div className="border-t border-custom-border-100">
-            <div className="mb-3 z-50 sticky bottom-0 left-0">
-              {/* <ListInlineCreateIssueForm
+              <SpreadsheetColumnsList
+                displayFilters={displayFilters}
+                displayProperties={displayProperties}
+                disableUserActions={disableUserActions}
+                expandedIssues={expandedIssues}
+                handleDisplayFilterUpdate={handleDisplayFilterUpdate}
+                handleUpdateIssue={handleUpdateIssue}
+                issues={issues}
+                members={members}
+                labels={labels}
+                states={states}
+              />
+            </>
+          ) : (
+            <div className="grid place-items-center h-full w-full">
+              <Spinner />
+            </div>
+          )}
+        </div>
+
+        <div className="border-t border-custom-border-100">
+          <div className="mb-3 z-50 sticky bottom-0 left-0">
+            {/* <ListInlineCreateIssueForm
                 isOpen={isInlineCreateIssueFormOpen}
                 handleClose={() => setIsInlineCreateIssueFormOpen(false)}
                 prePopulatedData={{
@@ -145,44 +147,43 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
                   ...(moduleId && { module: moduleId.toString() }),
                 }}
               /> */}
-            </div>
-
-            {!disableUserActions &&
-              !isInlineCreateIssueFormOpen &&
-              (type === "issue" ? (
-                <button
-                  className="flex gap-1.5 items-center text-custom-primary-100 pl-4 py-2.5 text-sm sticky left-0 z-[1] w-full"
-                  onClick={() => setIsInlineCreateIssueFormOpen(true)}
-                >
-                  <PlusIcon className="h-4 w-4" />
-                  New Issue
-                </button>
-              ) : (
-                <CustomMenu
-                  className="sticky left-0 z-10"
-                  customButton={
-                    <button
-                      className="flex gap-1.5 items-center text-custom-primary-100 pl-4 py-2.5 text-sm sticky left-0 z-[1] border-custom-border-200 w-full"
-                      type="button"
-                    >
-                      <PlusIcon className="h-4 w-4" />
-                      New Issue
-                    </button>
-                  }
-                  optionsClassName="left-5 !w-36"
-                  noBorder
-                >
-                  <CustomMenu.MenuItem onClick={() => setIsInlineCreateIssueFormOpen(true)}>
-                    Create new
-                  </CustomMenu.MenuItem>
-                  {openIssuesListModal && (
-                    <CustomMenu.MenuItem onClick={openIssuesListModal}>Add an existing issue</CustomMenu.MenuItem>
-                  )}
-                </CustomMenu>
-              ))}
           </div>
+
+          {!disableUserActions &&
+            !isInlineCreateIssueFormOpen &&
+            (type === "issue" ? (
+              <button
+                className="flex gap-1.5 items-center text-custom-primary-100 pl-4 py-2.5 text-sm sticky left-0 z-[1] w-full"
+                onClick={() => setIsInlineCreateIssueFormOpen(true)}
+              >
+                <PlusIcon className="h-4 w-4" />
+                New Issue
+              </button>
+            ) : (
+              <CustomMenu
+                className="sticky left-0 z-10"
+                customButton={
+                  <button
+                    className="flex gap-1.5 items-center text-custom-primary-100 pl-4 py-2.5 text-sm sticky left-0 z-[1] border-custom-border-200 w-full"
+                    type="button"
+                  >
+                    <PlusIcon className="h-4 w-4" />
+                    New Issue
+                  </button>
+                }
+                optionsClassName="left-5 !w-36"
+                noBorder
+              >
+                <CustomMenu.MenuItem onClick={() => setIsInlineCreateIssueFormOpen(true)}>
+                  Create new
+                </CustomMenu.MenuItem>
+                {openIssuesListModal && (
+                  <CustomMenu.MenuItem onClick={openIssuesListModal}>Add an existing issue</CustomMenu.MenuItem>
+                )}
+              </CustomMenu>
+            ))}
         </div>
       </div>
-    </>
+    </div>
   );
 });
diff --git a/web/components/issues/issue-layouts/spreadsheet/start-date-column/index.ts b/web/components/issues/issue-layouts/spreadsheet/start-date-column/index.ts
deleted file mode 100644
index 94f2294987..0000000000
--- a/web/components/issues/issue-layouts/spreadsheet/start-date-column/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./spreadsheet-start-date-column";
-export * from "./start-date-column";
diff --git a/web/components/issues/issue-layouts/spreadsheet/start-date-column/start-date-column.tsx b/web/components/issues/issue-layouts/spreadsheet/start-date-column/start-date-column.tsx
deleted file mode 100644
index cdb33f909f..0000000000
--- a/web/components/issues/issue-layouts/spreadsheet/start-date-column/start-date-column.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from "react";
-// components
-import { ViewStartDateSelect } from "components/issues";
-// types
-import { IIssue } from "types";
-
-type Props = {
-  issue: IIssue;
-  onChange: (data: string | null) => void;
-  disabled: boolean;
-};
-
-export const StartDateColumn: React.FC<Props> = (props) => {
-  const { issue, onChange, disabled } = props;
-  return (
-    <div className="flex items-center text-sm h-11 w-full bg-custom-background-100">
-      <span className="flex items-center px-4 py-2.5 h-full w-full flex-shrink-0 border-r border-b border-custom-border-100">
-        <ViewStartDateSelect issue={issue} onChange={onChange} noBorder disabled={disabled} />
-      </span>
-    </div>
-  );
-};
diff --git a/web/components/issues/issue-layouts/spreadsheet/state-column/index.ts b/web/components/issues/issue-layouts/spreadsheet/state-column/index.ts
deleted file mode 100644
index f3cbef871d..0000000000
--- a/web/components/issues/issue-layouts/spreadsheet/state-column/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./spreadsheet-state-column";
-export * from "./state-column";
diff --git a/web/components/issues/issue-layouts/spreadsheet/state-column/state-column.tsx b/web/components/issues/issue-layouts/spreadsheet/state-column/state-column.tsx
deleted file mode 100644
index 3e290448bc..0000000000
--- a/web/components/issues/issue-layouts/spreadsheet/state-column/state-column.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import React from "react";
-// components
-import { StateSelect } from "components/states";
-// types
-import { IIssue, IState, IStateResponse } from "types";
-
-type Props = {
-  issue: IIssue;
-  onChange: (formData: IState) => void;
-  states: IStateResponse | undefined;
-  disabled: boolean;
-};
-
-export const StateColumn: React.FC<Props> = (props) => {
-  const { issue, onChange, states, disabled } = props;
-
-  return (
-    <div className="flex items-center text-sm h-11 w-full bg-custom-background-100">
-      <span className="flex items-center px-4 py-2.5 h-full w-full flex-shrink-0 border-r border-b border-custom-border-100">
-        <StateSelect
-          value={issue.state_detail}
-          onChange={onChange}
-          stateGroups={states}
-          buttonClassName="!shadow-none !border-0"
-          hideDropdownArrow
-          disabled={disabled}
-        />
-      </span>
-    </div>
-  );
-};
diff --git a/web/components/issues/issue-layouts/spreadsheet/updated-on-column/index.ts b/web/components/issues/issue-layouts/spreadsheet/updated-on-column/index.ts
deleted file mode 100644
index af1337a7f0..0000000000
--- a/web/components/issues/issue-layouts/spreadsheet/updated-on-column/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./spreadsheet-updated-on-column";
-export * from "./updated-on-column";
diff --git a/web/components/issues/issue-layouts/spreadsheet/updated-on-column/updated-on-column.tsx b/web/components/issues/issue-layouts/spreadsheet/updated-on-column/updated-on-column.tsx
deleted file mode 100644
index ed4c0294fd..0000000000
--- a/web/components/issues/issue-layouts/spreadsheet/updated-on-column/updated-on-column.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-// helpers
-import { renderLongDetailDateFormat } from "helpers/date-time.helper";
-// types
-import { IIssue } from "types";
-
-type Props = {
-  issue: IIssue;
-};
-
-export const UpdatedOnColumn: React.FC<Props> = (props) => {
-  const { issue } = props;
-
-  return (
-    <div className="flex items-center text-sm h-11 w-full bg-custom-background-100">
-      <span className="flex items-center px-4 py-2.5 h-full w-full flex-shrink-0 border-r border-b border-custom-border-100">
-        <div className="flex items-center text-xs cursor-default text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-200">
-          {renderLongDetailDateFormat(issue.updated_at)}
-        </div>
-      </span>
-    </div>
-  );
-};
diff --git a/web/components/issues/view-select/start-date.tsx b/web/components/issues/view-select/start-date.tsx
index 7fd61cb444..d70c0de469 100644
--- a/web/components/issues/view-select/start-date.tsx
+++ b/web/components/issues/view-select/start-date.tsx
@@ -39,7 +39,7 @@ export const ViewStartDateSelect: React.FC<Props> = ({
           placeholder="Start date"
           value={issue?.start_date}
           onChange={onChange}
-          className={`bg-transparent ${issue?.start_date ? "w-[6.5rem]" : "w-[5rem] text-center"}`}
+          className={`bg-inherit ${issue?.start_date ? "w-[6.5rem]" : "w-[5rem] text-center"}`}
           maxDate={maxDate ?? undefined}
           noBorder={noBorder}
           handleOnOpen={handleOnOpen}
diff --git a/web/styles/command-pallette.css b/web/styles/command-pallette.css
index 12cfe18ebe..83466e7b1e 100644
--- a/web/styles/command-pallette.css
+++ b/web/styles/command-pallette.css
@@ -9,13 +9,13 @@
 }
 
 [cmdk-item] {
-  display: flex;
+  /* display: flex;
   align-items: center;
   justify-content: space-between;
   border-radius: 0.375rem;
   padding: 0.5rem;
   font-size: 0.825rem;
-  line-height: 1.25rem;
+  line-height: 1.25rem; */
   cursor: pointer;
 }