feat: workspace global view, style: spreadsheet view revamp (#2273)

* chore: workspace view types, services and hooks added * style: spreadsheet view revamp and code refactor * feat: workspace view * fix: build fix * chore: sidebar workspace issues redirection updated
2023-09-26 19:56:59 +05:30 · 2023-09-26 19:56:59 +05:30 · 3a6d72e4b6
commit 3a6d72e4b6
parent a187e7765c
61 changed files with 4253 additions and 733 deletions
--- a/web/components/core/filters/filters-list.tsx
+++ b/web/components/core/filters/filters-list.tsx
@ -10,7 +10,14 @@ import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
 // helpers
 import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
 // types
-import { IIssueFilterOptions, IIssueLabels, IState, IUserLite, TStateGroups } from "types";
+import {
+  IIssueFilterOptions,
+  IIssueLabels,
+  IProject,
+  IState,
+  IUserLite,
+  TStateGroups,
+} from "types";
 // constants
 import { STATE_GROUP_COLORS } from "constants/state";

@ -20,7 +27,9 @@ type Props = {
  clearAllFilters: (...args: any) => void;
  labels: IIssueLabels[] | undefined;
  members: IUserLite[] | undefined;
-  states: IState[] | undefined;
+  states?: IState[] | undefined;
+  stateGroup?: string[] | undefined;
+  project?: IProject[] | undefined;
 };

 export const FiltersList: React.FC<Props> = ({
@ -30,6 +39,7 @@ export const FiltersList: React.FC<Props> = ({
  labels,
  members,
  states,
+  project,
 }) => {
  if (!filters) return <></>;

@ -155,6 +165,29 @@ export const FiltersList: React.FC<Props> = ({
                    : key === "assignees"
                    ? filters.assignees?.map((memberId: string) => {
                        const member = members?.find((m) => m.id === memberId);
+                        return (
+                          <div
+                            key={memberId}
+                            className="inline-flex items-center gap-x-1 rounded-full bg-custom-background-90 px-1"
+                          >
+                            <Avatar user={member} />
+                            <span>{member?.display_name}</span>
+                            <span
+                              className="cursor-pointer"
+                              onClick={() =>
+                                setFilters({
+                                  assignees: filters.assignees?.filter((p: any) => p !== memberId),
+                                })
+                              }
+                            >
+                              <XMarkIcon className="h-3 w-3" />
+                            </span>
+                          </div>
+                        );
+                      })
+                    : key === "subscriber"
+                    ? filters.subscriber?.map((memberId: string) => {
+                        const member = members?.find((m) => m.id === memberId);

                        return (
                          <div
@ -298,6 +331,30 @@ export const FiltersList: React.FC<Props> = ({
                          </div>
                        );
                      })
+                    : key === "project"
+                    ? filters.project?.map((projectId) => {
+                        const currentProject = project?.find((p) => p.id === projectId);
+                        console.log("currentProject", currentProject);
+                        console.log("currentProject", projectId);
+                        return (
+                          <p
+                            key={currentProject?.id}
+                            className="inline-flex items-center gap-x-1 rounded-full px-2 py-0.5 capitalize"
+                          >
+                            <span>{currentProject?.name}</span>
+                            <span
+                              className="cursor-pointer"
+                              onClick={() =>
+                                setFilters({
+                                  project: filters.project?.filter((p) => p !== projectId),
+                                })
+                              }
+                            >
+                              <XMarkIcon className="h-3 w-3" />
+                            </span>
+                          </p>
+                        );
+                      })
                    : (filters[key] as any)?.join(", ")}
                  <button
                    type="button"
--- a/web/components/core/views/all-views.tsx
+++ b/web/components/core/views/all-views.tsx
@ -12,6 +12,7 @@ import stateService from "services/state.service";
 // hooks
 import useUser from "hooks/use-user";
 import { useProjectMyMembership } from "contexts/project-member.context";
+import useSpreadsheetIssuesView from "hooks/use-spreadsheet-issues-view";
 // components
 import {
  AllLists,
@ -86,6 +87,8 @@ export const AllViews: React.FC<Props> = ({

  const { groupedIssues, isEmpty, displayFilters } = viewProps;

+  const { spreadsheetIssues, mutateIssues } = useSpreadsheetIssuesView();
+
  const { data: stateGroups } = useSWR(
    workspaceSlug && projectId ? STATES_LIST(projectId as string) : null,
    workspaceSlug
@ -174,6 +177,8 @@ export const AllViews: React.FC<Props> = ({
            ) : displayFilters?.layout === "spreadsheet" ? (
              <SpreadsheetView
                handleIssueAction={handleIssueAction}
+                spreadsheetIssues={spreadsheetIssues}
+                mutateIssues={mutateIssues}
                openIssuesListModal={cycleId || moduleId ? openIssuesListModal : null}
                disableUserActions={disableUserActions}
                user={user}
--- a/web/components/core/views/issues-view.tsx
+++ b/web/components/core/views/issues-view.tsx
@ -481,6 +481,7 @@ export const IssuesView: React.FC<Props> = ({
      <CreateUpdateViewModal
        isOpen={createViewModal !== null}
        handleClose={() => setCreateViewModal(null)}
+        viewType="project"
        preLoadedData={createViewModal}
        user={user}
      />
--- a/web/components/core/views/spreadsheet-view/assignee-column/assignee-column.tsx
+++ b/web/components/core/views/spreadsheet-view/assignee-column/assignee-column.tsx
@ -0,0 +1,72 @@
+import React from "react";
+
+import { useRouter } from "next/router";
+
+// components
+import { MembersSelect } from "components/project";
+// services
+import trackEventServices from "services/track-event.service";
+// types
+import { ICurrentUserResponse, IIssue, Properties } from "types";
+
+type Props = {
+  issue: IIssue;
+  projectId: string;
+  partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
+  properties: Properties;
+  user: ICurrentUserResponse | undefined;
+  isNotAllowed: boolean;
+};
+
+export const AssigneeColumn: React.FC<Props> = ({
+  issue,
+  projectId,
+  partialUpdateIssue,
+  properties,
+  user,
+  isNotAllowed,
+}) => {
+  const router = useRouter();
+
+  const { workspaceSlug } = router.query;
+
+  const handleAssigneeChange = (data: any) => {
+    const newData = issue.assignees ?? [];
+
+    if (newData.includes(data)) newData.splice(newData.indexOf(data), 1);
+    else newData.push(data);
+
+    partialUpdateIssue({ assignees_list: data }, issue);
+
+    trackEventServices.trackIssuePartialPropertyUpdateEvent(
+      {
+        workspaceSlug,
+        workspaceId: issue.workspace,
+        projectId: issue.project_detail.id,
+        projectIdentifier: issue.project_detail.identifier,
+        projectName: issue.project_detail.name,
+        issueId: issue.id,
+      },
+      "ISSUE_PROPERTY_UPDATE_ASSIGNEE",
+      user
+    );
+  };
+
+  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-200">
+        {properties.assignee && (
+          <MembersSelect
+            value={issue.assignees}
+            projectId={projectId}
+            onChange={handleAssigneeChange}
+            membersDetails={issue.assignee_details}
+            buttonClassName="!p-0 !rounded-none !shadow-none !border-0"
+            hideDropdownArrow
+            disabled={isNotAllowed}
+          />
+        )}
+      </span>
+    </div>
+  );
+};
--- a/web/components/core/views/spreadsheet-view/assignee-column/index.ts
+++ b/web/components/core/views/spreadsheet-view/assignee-column/index.ts
@ -0,0 +1,2 @@
+export * from "./spreadsheet-assignee-column";
+export * from "./assignee-column";
--- a/web/components/core/views/spreadsheet-view/assignee-column/spreadsheet-assignee-column.tsx
+++ b/web/components/core/views/spreadsheet-view/assignee-column/spreadsheet-assignee-column.tsx
@ -0,0 +1,62 @@
+import React from "react";
+
+// components
+import { AssigneeColumn } from "components/core";
+// hooks
+import useSubIssue from "hooks/use-sub-issue";
+// types
+import { ICurrentUserResponse, IIssue, Properties } from "types";
+
+type Props = {
+  issue: IIssue;
+  projectId: string;
+  partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
+  expandedIssues: string[];
+  properties: Properties;
+  user: ICurrentUserResponse | undefined;
+  isNotAllowed: boolean;
+};
+
+export const SpreadsheetAssigneeColumn: React.FC<Props> = ({
+  issue,
+  projectId,
+  partialUpdateIssue,
+  expandedIssues,
+  properties,
+  user,
+  isNotAllowed,
+}) => {
+  const isExpanded = expandedIssues.indexOf(issue.id) > -1;
+
+  const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
+
+  return (
+    <div>
+      <AssigneeColumn
+        issue={issue}
+        projectId={projectId}
+        properties={properties}
+        partialUpdateIssue={partialUpdateIssue}
+        user={user}
+        isNotAllowed={isNotAllowed}
+      />
+
+      {isExpanded &&
+        !isLoading &&
+        subIssues &&
+        subIssues.length > 0 &&
+        subIssues.map((subIssue: IIssue) => (
+          <SpreadsheetAssigneeColumn
+            key={subIssue.id}
+            issue={subIssue}
+            projectId={subIssue.project_detail.id}
+            partialUpdateIssue={partialUpdateIssue}
+            expandedIssues={expandedIssues}
+            properties={properties}
+            user={user}
+            isNotAllowed={isNotAllowed}
+          />
+        ))}
+    </div>
+  );
+};
--- a/web/components/core/views/spreadsheet-view/created-on-column/created-on-column.tsx
+++ b/web/components/core/views/spreadsheet-view/created-on-column/created-on-column.tsx
@ -0,0 +1,34 @@
+import React from "react";
+
+// types
+import { ICurrentUserResponse, IIssue, Properties } from "types";
+// helper
+import { renderLongDetailDateFormat } from "helpers/date-time.helper";
+
+type Props = {
+  issue: IIssue;
+  projectId: string;
+  partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
+  properties: Properties;
+  user: ICurrentUserResponse | undefined;
+  isNotAllowed: boolean;
+};
+
+export const CreatedOnColumn: React.FC<Props> = ({
+  issue,
+  projectId,
+  partialUpdateIssue,
+  properties,
+  user,
+  isNotAllowed,
+}) => (
+  <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-200">
+      {properties.created_on && (
+        <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>
+);
--- a/web/components/core/views/spreadsheet-view/created-on-column/index.ts
+++ b/web/components/core/views/spreadsheet-view/created-on-column/index.ts
@ -0,0 +1,2 @@
+export * from "./spreadsheet-created-on-column";
+export * from "./created-on-column";
--- a/web/components/core/views/spreadsheet-view/created-on-column/spreadsheet-created-on-column.tsx
+++ b/web/components/core/views/spreadsheet-view/created-on-column/spreadsheet-created-on-column.tsx
@ -0,0 +1,62 @@
+import React from "react";
+
+// components
+import { CreatedOnColumn } from "components/core";
+// hooks
+import useSubIssue from "hooks/use-sub-issue";
+// types
+import { ICurrentUserResponse, IIssue, Properties } from "types";
+
+type Props = {
+  issue: IIssue;
+  projectId: string;
+  partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
+  expandedIssues: string[];
+  properties: Properties;
+  user: ICurrentUserResponse | undefined;
+  isNotAllowed: boolean;
+};
+
+export const SpreadsheetCreatedOnColumn: React.FC<Props> = ({
+  issue,
+  projectId,
+  partialUpdateIssue,
+  expandedIssues,
+  properties,
+  user,
+  isNotAllowed,
+}) => {
+  const isExpanded = expandedIssues.indexOf(issue.id) > -1;
+
+  const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
+
+  return (
+    <div>
+      <CreatedOnColumn
+        issue={issue}
+        projectId={projectId}
+        properties={properties}
+        partialUpdateIssue={partialUpdateIssue}
+        user={user}
+        isNotAllowed={isNotAllowed}
+      />
+
+      {isExpanded &&
+        !isLoading &&
+        subIssues &&
+        subIssues.length > 0 &&
+        subIssues.map((subIssue: IIssue) => (
+          <SpreadsheetCreatedOnColumn
+            key={subIssue.id}
+            issue={subIssue}
+            projectId={subIssue.project_detail.id}
+            partialUpdateIssue={partialUpdateIssue}
+            expandedIssues={expandedIssues}
+            properties={properties}
+            user={user}
+            isNotAllowed={isNotAllowed}
+          />
+        ))}
+    </div>
+  );
+};
--- a/web/components/core/views/spreadsheet-view/due-date-column/due-date-column.tsx
+++ b/web/components/core/views/spreadsheet-view/due-date-column/due-date-column.tsx
@ -0,0 +1,38 @@
+import React from "react";
+
+// components
+import { ViewDueDateSelect } from "components/issues";
+// types
+import { ICurrentUserResponse, IIssue, Properties } from "types";
+
+type Props = {
+  issue: IIssue;
+  projectId: string;
+  partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
+  properties: Properties;
+  user: ICurrentUserResponse | undefined;
+  isNotAllowed: boolean;
+};
+
+export const DueDateColumn: React.FC<Props> = ({
+  issue,
+  projectId,
+  partialUpdateIssue,
+  properties,
+  user,
+  isNotAllowed,
+}) => (
+  <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-200">
+      {properties.due_date && (
+        <ViewDueDateSelect
+          issue={issue}
+          partialUpdateIssue={partialUpdateIssue}
+          noBorder
+          user={user}
+          isNotAllowed={isNotAllowed}
+        />
+      )}
+    </span>
+  </div>
+);
--- a/web/components/core/views/spreadsheet-view/due-date-column/index.ts
+++ b/web/components/core/views/spreadsheet-view/due-date-column/index.ts
@ -0,0 +1,2 @@
+export * from "./spreadsheet-due-date-column";
+export * from "./due-date-column";
--- a/web/components/core/views/spreadsheet-view/due-date-column/spreadsheet-due-date-column.tsx
+++ b/web/components/core/views/spreadsheet-view/due-date-column/spreadsheet-due-date-column.tsx
@ -0,0 +1,62 @@
+import React from "react";
+
+// components
+import { DueDateColumn } from "components/core";
+// hooks
+import useSubIssue from "hooks/use-sub-issue";
+// types
+import { ICurrentUserResponse, IIssue, Properties } from "types";
+
+type Props = {
+  issue: IIssue;
+  projectId: string;
+  partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
+  expandedIssues: string[];
+  properties: Properties;
+  user: ICurrentUserResponse | undefined;
+  isNotAllowed: boolean;
+};
+
+export const SpreadsheetDueDateColumn: React.FC<Props> = ({
+  issue,
+  projectId,
+  partialUpdateIssue,
+  expandedIssues,
+  properties,
+  user,
+  isNotAllowed,
+}) => {
+  const isExpanded = expandedIssues.indexOf(issue.id) > -1;
+
+  const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
+
+  return (
+    <div>
+      <DueDateColumn
+        issue={issue}
+        projectId={projectId}
+        properties={properties}
+        partialUpdateIssue={partialUpdateIssue}
+        user={user}
+        isNotAllowed={isNotAllowed}
+      />
+
+      {isExpanded &&
+        !isLoading &&
+        subIssues &&
+        subIssues.length > 0 &&
+        subIssues.map((subIssue: IIssue) => (
+          <SpreadsheetDueDateColumn
+            key={subIssue.id}
+            issue={subIssue}
+            projectId={subIssue.project_detail.id}
+            partialUpdateIssue={partialUpdateIssue}
+            expandedIssues={expandedIssues}
+            properties={properties}
+            user={user}
+            isNotAllowed={isNotAllowed}
+          />
+        ))}
+    </div>
+  );
+};
--- a/web/components/core/views/spreadsheet-view/estimate-column/estimate-column.tsx
+++ b/web/components/core/views/spreadsheet-view/estimate-column/estimate-column.tsx
@ -0,0 +1,38 @@
+import React from "react";
+
+// components
+import { ViewEstimateSelect } from "components/issues";
+// types
+import { ICurrentUserResponse, IIssue, Properties } from "types";
+
+type Props = {
+  issue: IIssue;
+  projectId: string;
+  partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
+  properties: Properties;
+  user: ICurrentUserResponse | undefined;
+  isNotAllowed: boolean;
+};
+
+export const EstimateColumn: React.FC<Props> = ({
+  issue,
+  projectId,
+  partialUpdateIssue,
+  properties,
+  user,
+  isNotAllowed,
+}) => (
+  <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-200">
+      {properties.estimate && (
+        <ViewEstimateSelect
+          issue={issue}
+          partialUpdateIssue={partialUpdateIssue}
+          position="left"
+          user={user}
+          isNotAllowed={isNotAllowed}
+        />
+      )}
+    </span>
+  </div>
+);
--- a/web/components/core/views/spreadsheet-view/estimate-column/index.ts
+++ b/web/components/core/views/spreadsheet-view/estimate-column/index.ts
@ -0,0 +1,2 @@
+export * from "./spreadsheet-estimate-column";
+export * from "./estimate-column";
--- a/web/components/core/views/spreadsheet-view/estimate-column/spreadsheet-estimate-column.tsx
+++ b/web/components/core/views/spreadsheet-view/estimate-column/spreadsheet-estimate-column.tsx
@ -0,0 +1,62 @@
+import React from "react";
+
+// components
+import { EstimateColumn } from "components/core";
+// hooks
+import useSubIssue from "hooks/use-sub-issue";
+// types
+import { ICurrentUserResponse, IIssue, Properties } from "types";
+
+type Props = {
+  issue: IIssue;
+  projectId: string;
+  partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
+  expandedIssues: string[];
+  properties: Properties;
+  user: ICurrentUserResponse | undefined;
+  isNotAllowed: boolean;
+};
+
+export const SpreadsheetEstimateColumn: React.FC<Props> = ({
+  issue,
+  projectId,
+  partialUpdateIssue,
+  expandedIssues,
+  properties,
+  user,
+  isNotAllowed,
+}) => {
+  const isExpanded = expandedIssues.indexOf(issue.id) > -1;
+
+  const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
+
+  return (
+    <div>
+      <EstimateColumn
+        issue={issue}
+        projectId={projectId}
+        properties={properties}
+        partialUpdateIssue={partialUpdateIssue}
+        user={user}
+        isNotAllowed={isNotAllowed}
+      />
+
+      {isExpanded &&
+        !isLoading &&
+        subIssues &&
+        subIssues.length > 0 &&
+        subIssues.map((subIssue: IIssue) => (
+          <SpreadsheetEstimateColumn
+            key={subIssue.id}
+            issue={subIssue}
+            projectId={subIssue.project_detail.id}
+            partialUpdateIssue={partialUpdateIssue}
+            expandedIssues={expandedIssues}
+            properties={properties}
+            user={user}
+            isNotAllowed={isNotAllowed}
+          />
+        ))}
+    </div>
+  );
+};
--- a/web/components/core/views/spreadsheet-view/index.ts
+++ b/web/components/core/views/spreadsheet-view/index.ts
@ -1,4 +1,14 @@
+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 "./start-date-column";
+export * from "./state-column";
+export * from "./updated-on-column";
 export * from "./spreadsheet-view";
-export * from "./single-issue";
+export * from "./issue-column/issue-column";
 export * from "./spreadsheet-columns";
-export * from "./spreadsheet-issues";
+export * from "./issue-column/spreadsheet-issue-column";
--- a/web/components/core/views/spreadsheet-view/issue-column/index.ts
+++ b/web/components/core/views/spreadsheet-view/issue-column/index.ts
@ -0,0 +1,2 @@
+export * from "./spreadsheet-issue-column";
+export * from "./issue-column";
--- a/web/components/core/views/spreadsheet-view/issue-column/issue-column.tsx
+++ b/web/components/core/views/spreadsheet-view/issue-column/issue-column.tsx
@ -0,0 +1,179 @@
+import React, { useState } from "react";
+
+import { useRouter } from "next/router";
+
+// components
+import { Popover2 } from "@blueprintjs/popover2";
+// icons
+import { Icon } from "components/ui";
+import {
+  EllipsisHorizontalIcon,
+  LinkIcon,
+  PencilIcon,
+  TrashIcon,
+} from "@heroicons/react/24/outline";
+// hooks
+import useToast from "hooks/use-toast";
+// types
+import { IIssue, Properties, UserAuth } from "types";
+// helper
+import { copyTextToClipboard } from "helpers/string.helper";
+
+type Props = {
+  issue: IIssue;
+  projectId: string;
+  expanded: boolean;
+  handleToggleExpand: (issueId: string) => void;
+  properties: Properties;
+  handleEditIssue: (issue: IIssue) => void;
+  handleDeleteIssue: (issue: IIssue) => void;
+  setCurrentProjectId: React.Dispatch<React.SetStateAction<string | null>>;
+  disableUserActions: boolean;
+  userAuth: UserAuth;
+  nestingLevel: number;
+};
+
+export const IssueColumn: React.FC<Props> = ({
+  issue,
+  projectId,
+  expanded,
+  handleToggleExpand,
+  properties,
+  handleEditIssue,
+  handleDeleteIssue,
+  setCurrentProjectId,
+  disableUserActions,
+  userAuth,
+  nestingLevel,
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const router = useRouter();
+
+  const { workspaceSlug } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const openPeekOverview = () => {
+    const { query } = router;
+    setCurrentProjectId(issue.project_detail.id);
+    router.push({
+      pathname: router.pathname,
+      query: { ...query, peekIssue: issue.id },
+    });
+  };
+
+  const handleCopyText = () => {
+    const originURL =
+      typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
+    copyTextToClipboard(
+      `${originURL}/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`
+    ).then(() => {
+      setToastAlert({
+        type: "success",
+        title: "Link Copied!",
+        message: "Issue link copied to clipboard.",
+      });
+    });
+  };
+
+  const paddingLeft = `${nestingLevel * 54}px`;
+
+  const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
+
+  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-200 ">
+      <div
+        className="flex gap-1.5 px-4 pr-0 py-2.5 items-center"
+        style={issue.parent ? { paddingLeft } : {}}
+      >
+        <div className="relative flex items-center cursor-pointer text-xs text-center hover:text-custom-text-100">
+          {properties.key && (
+            <span className="flex items-center justify-center font-medium opacity-100 group-hover:opacity-0">
+              {issue.project_detail?.identifier}-{issue.sequence_id}
+            </span>
+          )}
+          {!isNotAllowed && !disableUserActions && (
+            <div className="absolute top-0 left-2.5 opacity-0 group-hover:opacity-100">
+              <Popover2
+                isOpen={isOpen}
+                canEscapeKeyClose
+                onInteraction={(nextOpenState) => setIsOpen(nextOpenState)}
+                content={
+                  <div
+                    className={`flex flex-col gap-1.5 overflow-y-scroll whitespace-nowrap rounded-md border p-1 text-xs shadow-lg focus:outline-none max-h-44 min-w-full border-custom-border-200 bg-custom-background-90`}
+                  >
+                    <button
+                      type="button"
+                      className="hover:text-custom-text-200 w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80"
+                      onClick={() => {
+                        handleEditIssue(issue);
+                        setIsOpen(false);
+                      }}
+                    >
+                      <div className="flex items-center justify-start gap-2">
+                        <PencilIcon className="h-4 w-4" />
+                        <span>Edit issue</span>
+                      </div>
+                    </button>
+
+                    <button
+                      type="button"
+                      className="hover:text-custom-text-200 w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80"
+                      onClick={() => {
+                        handleDeleteIssue(issue);
+                        setIsOpen(false);
+                      }}
+                    >
+                      <div className="flex items-center justify-start gap-2">
+                        <TrashIcon className="h-4 w-4" />
+                        <span>Delete issue</span>
+                      </div>
+                    </button>
+
+                    <button
+                      type="button"
+                      className="hover:text-custom-text-200 w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80"
+                      onClick={() => {
+                        handleCopyText();
+                        setIsOpen(false);
+                      }}
+                    >
+                      <div className="flex items-center justify-start gap-2">
+                        <LinkIcon className="h-4 w-4" />
+                        <span>Copy issue link</span>
+                      </div>
+                    </button>
+                  </div>
+                }
+                placement="bottom-start"
+              >
+                <EllipsisHorizontalIcon className="h-5 w-5 text-custom-text-200" />
+              </Popover2>
+            </div>
+          )}
+        </div>
+
+        {issue.sub_issues_count > 0 && (
+          <div className="h-6 w-6 flex justify-center items-center">
+            <button
+              className="h-5 w-5 hover:bg-custom-background-90 hover:text-custom-text-100 rounded-sm cursor-pointer"
+              onClick={() => handleToggleExpand(issue.id)}
+            >
+              <Icon iconName="chevron_right" className={`${expanded ? "rotate-90" : ""}`} />
+            </button>
+          </div>
+        )}
+      </div>
+      <span className="flex items-center px-4 py-2.5 h-full  truncate flex-grow">
+        <button
+          type="button"
+          className="truncate text-custom-text-100 text-left cursor-pointer w-full text-[0.825rem]"
+          onClick={openPeekOverview}
+        >
+          {issue.name}
+        </button>
+      </span>
+    </div>
+  );
+};
--- a/web/components/core/views/spreadsheet-view/issue-column/spreadsheet-issue-column.tsx
+++ b/web/components/core/views/spreadsheet-view/issue-column/spreadsheet-issue-column.tsx
@ -1,36 +1,34 @@
-import React, { useState } from "react";
+import React from "react";

 // components
-import { SingleSpreadsheetIssue } from "components/core";
+import { IssueColumn } from "components/core";
 // hooks
 import useSubIssue from "hooks/use-sub-issue";
 // types
-import { ICurrentUserResponse, IIssue, Properties, UserAuth } from "types";
+import { IIssue, Properties, UserAuth } from "types";

 type Props = {
  issue: IIssue;
-  index: number;
+  projectId: string;
  expandedIssues: string[];
  setExpandedIssues: React.Dispatch<React.SetStateAction<string[]>>;
  properties: Properties;
  handleIssueAction: (issue: IIssue, action: "copy" | "delete" | "edit") => void;
-  gridTemplateColumns: string;
+  setCurrentProjectId: React.Dispatch<React.SetStateAction<string | null>>;
  disableUserActions: boolean;
-  user: ICurrentUserResponse | undefined;
  userAuth: UserAuth;
  nestingLevel?: number;
 };

-export const SpreadsheetIssues: React.FC<Props> = ({
-  index,
+export const SpreadsheetIssuesColumn: React.FC<Props> = ({
  issue,
+  projectId,
  expandedIssues,
  setExpandedIssues,
-  gridTemplateColumns,
  properties,
  handleIssueAction,
+  setCurrentProjectId,
  disableUserActions,
-  user,
  userAuth,
  nestingLevel = 0,
 }) => {
@ -49,22 +47,20 @@ export const SpreadsheetIssues: React.FC<Props> = ({

  const isExpanded = expandedIssues.indexOf(issue.id) > -1;

-  const { subIssues, isLoading } = useSubIssue(issue.id, isExpanded);
+  const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);

  return (
    <div>
-      <SingleSpreadsheetIssue
+      <IssueColumn
        issue={issue}
-        projectId={issue.project_detail.id}
-        index={index}
+        projectId={projectId}
        expanded={isExpanded}
        handleToggleExpand={handleToggleExpand}
-        gridTemplateColumns={gridTemplateColumns}
        properties={properties}
        handleEditIssue={() => handleIssueAction(issue, "edit")}
        handleDeleteIssue={() => handleIssueAction(issue, "delete")}
+        setCurrentProjectId={setCurrentProjectId}
        disableUserActions={disableUserActions}
-        user={user}
        userAuth={userAuth}
        nestingLevel={nestingLevel}
      />
@ -74,17 +70,16 @@ export const SpreadsheetIssues: React.FC<Props> = ({
        subIssues &&
        subIssues.length > 0 &&
        subIssues.map((subIssue: IIssue) => (
-          <SpreadsheetIssues
+          <SpreadsheetIssuesColumn
            key={subIssue.id}
            issue={subIssue}
-            index={index}
+            projectId={subIssue.project_detail.id}
            expandedIssues={expandedIssues}
            setExpandedIssues={setExpandedIssues}
-            gridTemplateColumns={gridTemplateColumns}
            properties={properties}
            handleIssueAction={handleIssueAction}
+            setCurrentProjectId={setCurrentProjectId}
            disableUserActions={disableUserActions}
-            user={user}
            userAuth={userAuth}
            nestingLevel={nestingLevel + 1}
          />
--- a/web/components/core/views/spreadsheet-view/label-column/index.ts
+++ b/web/components/core/views/spreadsheet-view/label-column/index.ts
@ -0,0 +1,2 @@
+export * from "./spreadsheet-label-column";
+export * from "./label-column";
--- a/web/components/core/views/spreadsheet-view/label-column/label-column.tsx
+++ b/web/components/core/views/spreadsheet-view/label-column/label-column.tsx
@ -0,0 +1,47 @@
+import React from "react";
+
+// components
+import { LabelSelect } from "components/project";
+// types
+import { ICurrentUserResponse, IIssue, Properties } from "types";
+
+type Props = {
+  issue: IIssue;
+  projectId: string;
+  partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
+  properties: Properties;
+  user: ICurrentUserResponse | undefined;
+  isNotAllowed: boolean;
+};
+
+export const LabelColumn: React.FC<Props> = ({
+  issue,
+  projectId,
+  partialUpdateIssue,
+  properties,
+  user,
+  isNotAllowed,
+}) => {
+  const handleLabelChange = (data: any) => {
+    partialUpdateIssue({ labels_list: data }, issue);
+  };
+
+  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-200">
+        {properties.labels && (
+          <LabelSelect
+            value={issue.labels}
+            projectId={projectId}
+            onChange={handleLabelChange}
+            labelsDetails={issue.label_details}
+            hideDropdownArrow
+            maxRender={1}
+            user={user}
+            disabled={isNotAllowed}
+          />
+        )}
+      </span>
+    </div>
+  );
+};
--- a/web/components/core/views/spreadsheet-view/label-column/spreadsheet-label-column.tsx
+++ b/web/components/core/views/spreadsheet-view/label-column/spreadsheet-label-column.tsx
@ -0,0 +1,62 @@
+import React from "react";
+
+// components
+import { LabelColumn } from "components/core";
+// hooks
+import useSubIssue from "hooks/use-sub-issue";
+// types
+import { ICurrentUserResponse, IIssue, Properties } from "types";
+
+type Props = {
+  issue: IIssue;
+  projectId: string;
+  partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
+  expandedIssues: string[];
+  properties: Properties;
+  user: ICurrentUserResponse | undefined;
+  isNotAllowed: boolean;
+};
+
+export const SpreadsheetLabelColumn: React.FC<Props> = ({
+  issue,
+  projectId,
+  partialUpdateIssue,
+  expandedIssues,
+  properties,
+  user,
+  isNotAllowed,
+}) => {
+  const isExpanded = expandedIssues.indexOf(issue.id) > -1;
+
+  const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
+
+  return (
+    <div>
+      <LabelColumn
+        issue={issue}
+        projectId={projectId}
+        properties={properties}
+        partialUpdateIssue={partialUpdateIssue}
+        user={user}
+        isNotAllowed={isNotAllowed}
+      />
+
+      {isExpanded &&
+        !isLoading &&
+        subIssues &&
+        subIssues.length > 0 &&
+        subIssues.map((subIssue: IIssue) => (
+          <SpreadsheetLabelColumn
+            key={subIssue.id}
+            issue={subIssue}
+            projectId={subIssue.project_detail.id}
+            partialUpdateIssue={partialUpdateIssue}
+            expandedIssues={expandedIssues}
+            properties={properties}
+            user={user}
+            isNotAllowed={isNotAllowed}
+          />
+        ))}
+    </div>
+  );
+};
--- a/web/components/core/views/spreadsheet-view/priority-column/index.ts
+++ b/web/components/core/views/spreadsheet-view/priority-column/index.ts
@ -0,0 +1,2 @@
+export * from "./spreadsheet-priority-column";
+export * from "./priority-column";
--- a/web/components/core/views/spreadsheet-view/priority-column/priority-column.tsx
+++ b/web/components/core/views/spreadsheet-view/priority-column/priority-column.tsx
@ -0,0 +1,64 @@
+import React from "react";
+
+import { useRouter } from "next/router";
+
+// components
+import { PrioritySelect } from "components/project";
+// services
+import trackEventServices from "services/track-event.service";
+// types
+import { ICurrentUserResponse, IIssue, Properties, TIssuePriorities } from "types";
+
+type Props = {
+  issue: IIssue;
+  projectId: string;
+  partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
+  properties: Properties;
+  user: ICurrentUserResponse | undefined;
+  isNotAllowed: boolean;
+};
+
+export const PriorityColumn: React.FC<Props> = ({
+  issue,
+  projectId,
+  partialUpdateIssue,
+  properties,
+  user,
+  isNotAllowed,
+}) => {
+  const router = useRouter();
+
+  const { workspaceSlug } = router.query;
+
+  const handlePriorityChange = (data: TIssuePriorities) => {
+    partialUpdateIssue({ priority: data }, issue);
+    trackEventServices.trackIssuePartialPropertyUpdateEvent(
+      {
+        workspaceSlug,
+        workspaceId: issue.workspace,
+        projectId: issue.project_detail.id,
+        projectIdentifier: issue.project_detail.identifier,
+        projectName: issue.project_detail.name,
+        issueId: issue.id,
+      },
+      "ISSUE_PROPERTY_UPDATE_PRIORITY",
+      user
+    );
+  };
+
+  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-200">
+        {properties.priority && (
+          <PrioritySelect
+            value={issue.priority}
+            onChange={handlePriorityChange}
+            buttonClassName="!p-0 !rounded-none !shadow-none !border-0"
+            hideDropdownArrow
+            disabled={isNotAllowed}
+          />
+        )}
+      </span>
+    </div>
+  );
+};
--- a/web/components/core/views/spreadsheet-view/priority-column/spreadsheet-priority-column.tsx
+++ b/web/components/core/views/spreadsheet-view/priority-column/spreadsheet-priority-column.tsx
@ -0,0 +1,62 @@
+import React from "react";
+
+// components
+import { PriorityColumn } from "components/core";
+// hooks
+import useSubIssue from "hooks/use-sub-issue";
+// types
+import { ICurrentUserResponse, IIssue, Properties } from "types";
+
+type Props = {
+  issue: IIssue;
+  projectId: string;
+  partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
+  expandedIssues: string[];
+  properties: Properties;
+  user: ICurrentUserResponse | undefined;
+  isNotAllowed: boolean;
+};
+
+export const SpreadsheetPriorityColumn: React.FC<Props> = ({
+  issue,
+  projectId,
+  partialUpdateIssue,
+  expandedIssues,
+  properties,
+  user,
+  isNotAllowed,
+}) => {
+  const isExpanded = expandedIssues.indexOf(issue.id) > -1;
+
+  const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
+
+  return (
+    <div>
+      <PriorityColumn
+        issue={issue}
+        projectId={projectId}
+        properties={properties}
+        partialUpdateIssue={partialUpdateIssue}
+        user={user}
+        isNotAllowed={isNotAllowed}
+      />
+
+      {isExpanded &&
+        !isLoading &&
+        subIssues &&
+        subIssues.length > 0 &&
+        subIssues.map((subIssue: IIssue) => (
+          <SpreadsheetPriorityColumn
+            key={subIssue.id}
+            issue={subIssue}
+            projectId={subIssue.project_detail.id}
+            partialUpdateIssue={partialUpdateIssue}
+            expandedIssues={expandedIssues}
+            properties={properties}
+            user={user}
+            isNotAllowed={isNotAllowed}
+          />
+        ))}
+    </div>
+  );
+};
--- a/web/components/core/views/spreadsheet-view/spreadsheet-view.tsx
+++ b/web/components/core/views/spreadsheet-view/spreadsheet-view.tsx
@ -1,23 +1,52 @@
-import React, { useState } from "react";
+import React, { useCallback, useState } from "react";

 // next
 import { useRouter } from "next/router";

+import { KeyedMutator, mutate } from "swr";
+
 // components
-import { SpreadsheetColumns, SpreadsheetIssues, ListInlineCreateIssueForm } from "components/core";
-import { CustomMenu, Spinner } from "components/ui";
+import {
+  SpreadsheetAssigneeColumn,
+  SpreadsheetCreatedOnColumn,
+  SpreadsheetDueDateColumn,
+  SpreadsheetEstimateColumn,
+  SpreadsheetIssuesColumn,
+  SpreadsheetLabelColumn,
+  SpreadsheetPriorityColumn,
+  SpreadsheetStartDateColumn,
+  SpreadsheetStateColumn,
+  SpreadsheetUpdatedOnColumn,
+} from "components/core";
+import { Spinner } from "components/ui";
 import { IssuePeekOverview } from "components/issues";
 // hooks
 import useIssuesProperties from "hooks/use-issue-properties";
-import useSpreadsheetIssuesView from "hooks/use-spreadsheet-issues-view";
 // types
-import { ICurrentUserResponse, IIssue, Properties, UserAuth } from "types";
-// constants
-import { SPREADSHEET_COLUMN } from "constants/spreadsheet";
+import { ICurrentUserResponse, IIssue, ISubIssueResponse, UserAuth } from "types";
+import useWorkspaceIssuesFilters from "hooks/use-worskpace-issue-filter";
+import {
+  CYCLE_DETAILS,
+  CYCLE_ISSUES_WITH_PARAMS,
+  MODULE_DETAILS,
+  MODULE_ISSUES_WITH_PARAMS,
+  PROJECT_ISSUES_LIST_WITH_PARAMS,
+  SUB_ISSUES,
+  VIEW_ISSUES,
+  WORKSPACE_VIEW_ISSUES,
+} from "constants/fetch-keys";
+import useSpreadsheetIssuesView from "hooks/use-spreadsheet-issues-view";
+import projectIssuesServices from "services/issues.service";
 // icon
-import { PlusIcon } from "@heroicons/react/24/outline";

 type Props = {
+  spreadsheetIssues: IIssue[];
+  mutateIssues: KeyedMutator<
+    | IIssue[]
+    | {
+        [key: string]: IIssue[];
+      }
+  >;
  handleIssueAction: (issue: IIssue, action: "copy" | "delete" | "edit") => void;
  openIssuesListModal?: (() => void) | null;
  disableUserActions: boolean;
@ -26,6 +55,8 @@ type Props = {
 };

 export const SpreadsheetView: React.FC<Props> = ({
+  spreadsheetIssues,
+  mutateIssues,
  handleIssueAction,
  openIssuesListModal,
  disableUserActions,
@ -33,126 +64,220 @@ export const SpreadsheetView: React.FC<Props> = ({
  userAuth,
 }) => {
  const [expandedIssues, setExpandedIssues] = useState<string[]>([]);
-  const [isInlineCreateIssueFormOpen, setIsInlineCreateIssueFormOpen] = useState(false);
+  const [currentProjectId, setCurrentProjectId] = useState<string | null>(null);

  const router = useRouter();
-  const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
-
-  const type = cycleId ? "cycle" : moduleId ? "module" : "issue";
-
-  const { spreadsheetIssues, mutateIssues } = useSpreadsheetIssuesView();
+  const { workspaceSlug, projectId, cycleId, moduleId, viewId, workspaceViewId } = router.query;

  const [properties] = useIssuesProperties(workspaceSlug as string, projectId as string);

-  const columnData = SPREADSHEET_COLUMN.map((column) => ({
-    ...column,
-    isActive: properties
-      ? column.propertyName === "labels"
-        ? properties[column.propertyName as keyof Properties]
-        : column.propertyName === "title"
-        ? true
-        : properties[column.propertyName as keyof Properties]
-      : false,
-  }));
+  const workspaceIssuesPath = [
+    {
+      params: {
+        sub_issue: false,
+      },
+      path: "workspace-views/all-issues",
+    },
+    {
+      params: {
+        assignees: user?.id ?? undefined,
+        sub_issue: false,
+      },
+      path: "workspace-views/assigned",
+    },
+    {
+      params: {
+        created_by: user?.id ?? undefined,
+        sub_issue: false,
+      },
+      path: "workspace-views/created",
+    },
+    {
+      params: {
+        subscriber: user?.id ?? undefined,
+        sub_issue: false,
+      },
+      path: "workspace-views/subscribed",
+    },
+  ];

-  const gridTemplateColumns = columnData
-    .filter((column) => column.isActive)
-    .map((column) => column.colSize)
-    .join(" ");
+  const currentWorkspaceIssuePath = workspaceIssuesPath.find((path) =>
+    router.pathname.includes(path.path)
+  );
+
+  const { params: workspaceViewParams } = useWorkspaceIssuesFilters(
+    workspaceSlug?.toString(),
+    workspaceViewId?.toString()
+  );
+
+  const { params } = useSpreadsheetIssuesView();
+
+  const partialUpdateIssue = useCallback(
+    (formData: Partial<IIssue>, issue: IIssue) => {
+      if (!workspaceSlug || !issue) return;
+
+      const fetchKey = cycleId
+        ? CYCLE_ISSUES_WITH_PARAMS(cycleId.toString(), params)
+        : moduleId
+        ? MODULE_ISSUES_WITH_PARAMS(moduleId.toString(), params)
+        : viewId
+        ? VIEW_ISSUES(viewId.toString(), params)
+        : workspaceViewId
+        ? WORKSPACE_VIEW_ISSUES(workspaceSlug.toString(), workspaceViewParams)
+        : currentWorkspaceIssuePath
+        ? WORKSPACE_VIEW_ISSUES(workspaceSlug.toString(), currentWorkspaceIssuePath?.params)
+        : PROJECT_ISSUES_LIST_WITH_PARAMS(issue.project_detail.id, params);
+
+      if (issue.parent)
+        mutate<ISubIssueResponse>(
+          SUB_ISSUES(issue.parent.toString()),
+          (prevData) => {
+            if (!prevData) return prevData;
+
+            return {
+              ...prevData,
+              sub_issues: (prevData.sub_issues ?? []).map((i) => {
+                if (i.id === issue.id) {
+                  return {
+                    ...i,
+                    ...formData,
+                  };
+                }
+                return i;
+              }),
+            };
+          },
+          false
+        );
+      else
+        mutate<IIssue[]>(
+          fetchKey,
+          (prevData) =>
+            (prevData ?? []).map((p) => {
+              if (p.id === issue.id) {
+                return {
+                  ...p,
+                  ...formData,
+                };
+              }
+              return p;
+            }),
+          false
+        );
+
+      projectIssuesServices
+        .patchIssue(
+          workspaceSlug as string,
+          issue.project_detail.id,
+          issue.id as string,
+          formData,
+          user
+        )
+        .then(() => {
+          if (issue.parent) {
+            mutate(SUB_ISSUES(issue.parent as string));
+          } else {
+            mutate(fetchKey);
+
+            if (cycleId) mutate(CYCLE_DETAILS(cycleId as string));
+            if (moduleId) mutate(MODULE_DETAILS(moduleId as string));
+          }
+        })
+        .catch((error) => {
+          console.log(error);
+        });
+    },
+    [
+      workspaceSlug,
+      cycleId,
+      moduleId,
+      viewId,
+      workspaceViewId,
+      currentWorkspaceIssuePath,
+      workspaceViewParams,
+      params,
+      user,
+    ]
+  );
+
+  const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
+
+  const renderColumn = (header: string, Component: React.ComponentType<any>) => (
+    <div className="relative flex flex-col h-max w-full bg-custom-background-100 rounded-sm">
+      <div className="flex items-center min-w-[9rem] px-4 py-2.5 text-sm font-medium z-[1] h-11 w-full sticky top-0 bg-custom-background-90 border border-l-0 border-custom-border-200">
+        {header}
+      </div>
+      <div className="h-full min-w-[9rem] w-full">
+        {spreadsheetIssues.map((issue: IIssue, index) => (
+          <Component
+            key={`${issue.id}_${index}`}
+            issue={issue}
+            projectId={issue.project_detail.id}
+            partialUpdateIssue={partialUpdateIssue}
+            expandedIssues={expandedIssues}
+            properties={properties}
+            user={user}
+            isNotAllowed={isNotAllowed}
+          />
+        ))}
+      </div>
+    </div>
+  );

  return (
    <>
      <IssuePeekOverview
        handleMutation={() => mutateIssues()}
-        projectId={projectId?.toString() ?? ""}
+        projectId={currentProjectId ?? ""}
        workspaceSlug={workspaceSlug?.toString() ?? ""}
        readOnly={disableUserActions}
      />
-      <div
-        className={`h-full rounded-lg text-custom-text-200 overflow-x-auto whitespace-nowrap bg-custom-background-100 ${
-          isInlineCreateIssueFormOpen ? "mb-24" : "mb-12"
-        }`}
-      >
-        <div className="sticky z-[2] top-0 border-b border-custom-border-200 bg-custom-background-90 w-full min-w-max">
-          <SpreadsheetColumns columnData={columnData} gridTemplateColumns={gridTemplateColumns} />
-        </div>
+      <div className="relative flex  h-full w-full rounded-lg text-custom-text-200 overflow-x-auto whitespace-nowrap bg-custom-background-100">
        {spreadsheetIssues ? (
-          <div className="flex flex-col h-full w-full bg-custom-background-100 rounded-sm">
-            {spreadsheetIssues.map((issue: IIssue, index) => (
-              <SpreadsheetIssues
-                key={`${issue.id}_${index}`}
-                index={index}
-                issue={issue}
-                expandedIssues={expandedIssues}
-                setExpandedIssues={setExpandedIssues}
-                gridTemplateColumns={gridTemplateColumns}
-                properties={properties}
-                handleIssueAction={handleIssueAction}
-                disableUserActions={disableUserActions}
-                user={user}
-                userAuth={userAuth}
-              />
-            ))}
-          </div>
+          <>
+            <div className="sticky left-0 w-[28rem] z-[2]">
+              <div className="relative flex flex-col h-max w-full bg-custom-background-100 rounded-sm z-[2]">
+                <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-200">
+                  <span className="flex items-center px-4 py-2.5 h-full w-20 flex-shrink-0">
+                    ID
+                  </span>
+                  <span className="flex items-center px-4 py-2.5 h-full w-full flex-grow">
+                    Issue
+                  </span>
+                </div>
+
+                {spreadsheetIssues.map((issue: IIssue, index) => (
+                  <SpreadsheetIssuesColumn
+                    key={`${issue.id}_${index}`}
+                    issue={issue}
+                    projectId={issue.project_detail.id}
+                    expandedIssues={expandedIssues}
+                    setExpandedIssues={setExpandedIssues}
+                    setCurrentProjectId={setCurrentProjectId}
+                    properties={properties}
+                    handleIssueAction={handleIssueAction}
+                    disableUserActions={disableUserActions}
+                    userAuth={userAuth}
+                  />
+                ))}
+              </div>
+            </div>
+            {renderColumn("State", SpreadsheetStateColumn)}
+            {renderColumn("Priority", SpreadsheetPriorityColumn)}
+            {renderColumn("Assignees", SpreadsheetAssigneeColumn)}
+            {renderColumn("Label", SpreadsheetLabelColumn)}
+            {renderColumn("Start Date", SpreadsheetStartDateColumn)}
+            {renderColumn("Due Date", SpreadsheetDueDateColumn)}
+            {renderColumn("Estimate", SpreadsheetEstimateColumn)}
+            {renderColumn("Created On", SpreadsheetCreatedOnColumn)}
+            {renderColumn("Updated On", SpreadsheetUpdatedOnColumn)}
+          </>
        ) : (
-          <Spinner />
+          <div className="flex flex-col justify-center items-center h-full w-full">
+            <Spinner />
+          </div>
        )}
      </div>
-
-      <div
-        className={`absolute bottom-0 left-0 z-10 group hover:rounded-sm bg-custom-background-100 hover:bg-custom-background-80 border-b border-custom-border-200 w-full min-w-max ${
-          isInlineCreateIssueFormOpen ? "pb-2" : ""
-        }`}
-      >
-        <ListInlineCreateIssueForm
-          isOpen={isInlineCreateIssueFormOpen}
-          handleClose={() => setIsInlineCreateIssueFormOpen(false)}
-          prePopulatedData={{
-            ...(cycleId && { cycle: cycleId.toString() }),
-            ...(moduleId && { module: moduleId.toString() }),
-          }}
-        />
-
-        {type === "issue"
-          ? !disableUserActions &&
-            !isInlineCreateIssueFormOpen && (
-              <button
-                className="flex gap-1.5 items-center pl-7 py-2.5 text-sm sticky left-0 z-[1] text-custom-text-200 border-custom-border-200 w-full"
-                onClick={() => setIsInlineCreateIssueFormOpen(true)}
-              >
-                <PlusIcon className="h-4 w-4" />
-                Add Issue
-              </button>
-            )
-          : !disableUserActions &&
-            !isInlineCreateIssueFormOpen && (
-              <CustomMenu
-                className="sticky left-0 z-[1] !w-full"
-                customButton={
-                  <button
-                    className="flex gap-1.5 items-center pl-7 py-2.5 text-sm sticky left-0 z-[1] text-custom-text-200 border-custom-border-200 w-full"
-                    type="button"
-                  >
-                    <PlusIcon className="h-4 w-4" />
-                    Add Issue
-                  </button>
-                }
-                position="left"
-                verticalPosition="top"
-                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>
    </>
  );
 };
--- a/web/components/core/views/spreadsheet-view/start-date-column/index.ts
+++ b/web/components/core/views/spreadsheet-view/start-date-column/index.ts
@ -0,0 +1,2 @@
+export * from "./spreadsheet-start-date-column";
+export * from "./start-date-column";
--- a/web/components/core/views/spreadsheet-view/start-date-column/spreadsheet-start-date-column.tsx
+++ b/web/components/core/views/spreadsheet-view/start-date-column/spreadsheet-start-date-column.tsx
@ -0,0 +1,62 @@
+import React from "react";
+
+// components
+import { StartDateColumn } from "components/core";
+// hooks
+import useSubIssue from "hooks/use-sub-issue";
+// types
+import { ICurrentUserResponse, IIssue, Properties } from "types";
+
+type Props = {
+  issue: IIssue;
+  projectId: string;
+  partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
+  expandedIssues: string[];
+  properties: Properties;
+  user: ICurrentUserResponse | undefined;
+  isNotAllowed: boolean;
+};
+
+export const SpreadsheetStartDateColumn: React.FC<Props> = ({
+  issue,
+  projectId,
+  partialUpdateIssue,
+  expandedIssues,
+  properties,
+  user,
+  isNotAllowed,
+}) => {
+  const isExpanded = expandedIssues.indexOf(issue.id) > -1;
+
+  const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
+
+  return (
+    <div>
+      <StartDateColumn
+        issue={issue}
+        projectId={projectId}
+        properties={properties}
+        partialUpdateIssue={partialUpdateIssue}
+        user={user}
+        isNotAllowed={isNotAllowed}
+      />
+
+      {isExpanded &&
+        !isLoading &&
+        subIssues &&
+        subIssues.length > 0 &&
+        subIssues.map((subIssue: IIssue) => (
+          <SpreadsheetStartDateColumn
+            key={subIssue.id}
+            issue={subIssue}
+            projectId={subIssue.project_detail.id}
+            partialUpdateIssue={partialUpdateIssue}
+            expandedIssues={expandedIssues}
+            properties={properties}
+            user={user}
+            isNotAllowed={isNotAllowed}
+          />
+        ))}
+    </div>
+  );
+};
--- a/web/components/core/views/spreadsheet-view/start-date-column/start-date-column.tsx
+++ b/web/components/core/views/spreadsheet-view/start-date-column/start-date-column.tsx
@ -0,0 +1,38 @@
+import React from "react";
+
+// components
+import { ViewStartDateSelect } from "components/issues";
+// types
+import { ICurrentUserResponse, IIssue, Properties } from "types";
+
+type Props = {
+  issue: IIssue;
+  projectId: string;
+  partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
+  properties: Properties;
+  user: ICurrentUserResponse | undefined;
+  isNotAllowed: boolean;
+};
+
+export const StartDateColumn: React.FC<Props> = ({
+  issue,
+  projectId,
+  partialUpdateIssue,
+  properties,
+  user,
+  isNotAllowed,
+}) => (
+  <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-200">
+      {properties.due_date && (
+        <ViewStartDateSelect
+          issue={issue}
+          partialUpdateIssue={partialUpdateIssue}
+          noBorder
+          user={user}
+          isNotAllowed={isNotAllowed}
+        />
+      )}
+    </span>
+  </div>
+);
--- a/web/components/core/views/spreadsheet-view/state-column/index.ts
+++ b/web/components/core/views/spreadsheet-view/state-column/index.ts
@ -0,0 +1,2 @@
+export * from "./spreadsheet-state-column";
+export * from "./state-column";
--- a/web/components/core/views/spreadsheet-view/state-column/spreadsheet-state-column.tsx
+++ b/web/components/core/views/spreadsheet-view/state-column/spreadsheet-state-column.tsx
@ -0,0 +1,62 @@
+import React from "react";
+
+// components
+import { StateColumn } from "components/core";
+// hooks
+import useSubIssue from "hooks/use-sub-issue";
+// types
+import { ICurrentUserResponse, IIssue, Properties } from "types";
+
+type Props = {
+  issue: IIssue;
+  projectId: string;
+  partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
+  expandedIssues: string[];
+  properties: Properties;
+  user: ICurrentUserResponse | undefined;
+  isNotAllowed: boolean;
+};
+
+export const SpreadsheetStateColumn: React.FC<Props> = ({
+  issue,
+  projectId,
+  partialUpdateIssue,
+  expandedIssues,
+  properties,
+  user,
+  isNotAllowed,
+}) => {
+  const isExpanded = expandedIssues.indexOf(issue.id) > -1;
+
+  const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
+
+  return (
+    <div>
+      <StateColumn
+        issue={issue}
+        projectId={projectId}
+        properties={properties}
+        partialUpdateIssue={partialUpdateIssue}
+        user={user}
+        isNotAllowed={isNotAllowed}
+      />
+
+      {isExpanded &&
+        !isLoading &&
+        subIssues &&
+        subIssues.length > 0 &&
+        subIssues.map((subIssue: IIssue) => (
+          <SpreadsheetStateColumn
+            key={subIssue.id}
+            issue={subIssue}
+            projectId={subIssue.project_detail.id}
+            partialUpdateIssue={partialUpdateIssue}
+            expandedIssues={expandedIssues}
+            properties={properties}
+            user={user}
+            isNotAllowed={isNotAllowed}
+          />
+        ))}
+    </div>
+  );
+};
--- a/web/components/core/views/spreadsheet-view/state-column/state-column.tsx
+++ b/web/components/core/views/spreadsheet-view/state-column/state-column.tsx
@ -0,0 +1,87 @@
+import React from "react";
+
+import { useRouter } from "next/router";
+
+// components
+import { StateSelect } from "components/states";
+// services
+import trackEventServices from "services/track-event.service";
+// types
+import { ICurrentUserResponse, IIssue, IState, Properties } from "types";
+
+type Props = {
+  issue: IIssue;
+  projectId: string;
+  partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
+  properties: Properties;
+  user: ICurrentUserResponse | undefined;
+  isNotAllowed: boolean;
+};
+
+export const StateColumn: React.FC<Props> = ({
+  issue,
+  projectId,
+  partialUpdateIssue,
+  properties,
+  user,
+  isNotAllowed,
+}) => {
+  const router = useRouter();
+
+  const { workspaceSlug } = router.query;
+
+  const handleStateChange = (data: string, states: IState[] | undefined) => {
+    const oldState = states?.find((s) => s.id === issue.state);
+    const newState = states?.find((s) => s.id === data);
+
+    partialUpdateIssue(
+      {
+        state: data,
+        state_detail: newState,
+      },
+      issue
+    );
+    trackEventServices.trackIssuePartialPropertyUpdateEvent(
+      {
+        workspaceSlug,
+        workspaceId: issue.workspace,
+        projectId: issue.project_detail.id,
+        projectIdentifier: issue.project_detail.identifier,
+        projectName: issue.project_detail.name,
+        issueId: issue.id,
+      },
+      "ISSUE_PROPERTY_UPDATE_STATE",
+      user
+    );
+    if (oldState?.group !== "completed" && newState?.group !== "completed") {
+      trackEventServices.trackIssueMarkedAsDoneEvent(
+        {
+          workspaceSlug: issue.workspace_detail.slug,
+          workspaceId: issue.workspace_detail.id,
+          projectId: issue.project_detail.id,
+          projectIdentifier: issue.project_detail.identifier,
+          projectName: issue.project_detail.name,
+          issueId: issue.id,
+        },
+        user
+      );
+    }
+  };
+
+  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-200">
+        {properties.state && (
+          <StateSelect
+            value={issue.state_detail}
+            projectId={projectId}
+            onChange={handleStateChange}
+            buttonClassName="!p-0 !rounded-none !shadow-none !border-0"
+            hideDropdownArrow
+            disabled={isNotAllowed}
+          />
+        )}
+      </span>
+    </div>
+  );
+};
--- a/web/components/core/views/spreadsheet-view/updated-on-column/index.ts
+++ b/web/components/core/views/spreadsheet-view/updated-on-column/index.ts
@ -0,0 +1,2 @@
+export * from "./spreadsheet-updated-on-column";
+export * from "./updated-on-column";
--- a/web/components/core/views/spreadsheet-view/updated-on-column/spreadsheet-updated-on-column.tsx
+++ b/web/components/core/views/spreadsheet-view/updated-on-column/spreadsheet-updated-on-column.tsx
@ -0,0 +1,62 @@
+import React from "react";
+
+// components
+import { UpdatedOnColumn } from "components/core";
+// hooks
+import useSubIssue from "hooks/use-sub-issue";
+// types
+import { ICurrentUserResponse, IIssue, Properties } from "types";
+
+type Props = {
+  issue: IIssue;
+  projectId: string;
+  partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
+  expandedIssues: string[];
+  properties: Properties;
+  user: ICurrentUserResponse | undefined;
+  isNotAllowed: boolean;
+};
+
+export const SpreadsheetUpdatedOnColumn: React.FC<Props> = ({
+  issue,
+  projectId,
+  partialUpdateIssue,
+  expandedIssues,
+  properties,
+  user,
+  isNotAllowed,
+}) => {
+  const isExpanded = expandedIssues.indexOf(issue.id) > -1;
+
+  const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
+
+  return (
+    <div>
+      <UpdatedOnColumn
+        issue={issue}
+        projectId={projectId}
+        properties={properties}
+        partialUpdateIssue={partialUpdateIssue}
+        user={user}
+        isNotAllowed={isNotAllowed}
+      />
+
+      {isExpanded &&
+        !isLoading &&
+        subIssues &&
+        subIssues.length > 0 &&
+        subIssues.map((subIssue: IIssue) => (
+          <SpreadsheetUpdatedOnColumn
+            key={subIssue.id}
+            issue={subIssue}
+            projectId={subIssue.project_detail.id}
+            partialUpdateIssue={partialUpdateIssue}
+            expandedIssues={expandedIssues}
+            properties={properties}
+            user={user}
+            isNotAllowed={isNotAllowed}
+          />
+        ))}
+    </div>
+  );
+};
--- a/web/components/core/views/spreadsheet-view/updated-on-column/updated-on-column.tsx
+++ b/web/components/core/views/spreadsheet-view/updated-on-column/updated-on-column.tsx
@ -0,0 +1,34 @@
+import React from "react";
+
+// types
+import { ICurrentUserResponse, IIssue, Properties } from "types";
+// helper
+import { renderLongDetailDateFormat } from "helpers/date-time.helper";
+
+type Props = {
+  issue: IIssue;
+  projectId: string;
+  partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
+  properties: Properties;
+  user: ICurrentUserResponse | undefined;
+  isNotAllowed: boolean;
+};
+
+export const UpdatedOnColumn: React.FC<Props> = ({
+  issue,
+  projectId,
+  partialUpdateIssue,
+  properties,
+  user,
+  isNotAllowed,
+}) => (
+  <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-200">
+      {properties.updated_on && (
+        <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>
+);