From df96d40cfa71f62df37b766e5884ef701fc67112 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Thu, 11 May 2023 02:15:39 +0530
Subject: [PATCH 01/81] fix: views issues mutation, sidebar link highlight
 (#1025)

* fix: views issues mutation, sidebar link highlight

* fix: show only specific states when type filter is set

* fix: delete comment mutation

* style: bulk delete issues modal

* fix: project settings features mutation
---
 .../core/board-view/single-board.tsx          |  2 +-
 .../core/bulk-delete-issues-modal.tsx         | 12 ++--
 .../{filter-list.tsx => filters-list.tsx}     |  0
 .../components/core/image-upload-modal.tsx    | 19 +++---
 apps/app/components/core/index.ts             |  2 +-
 .../components/core/list-view/single-list.tsx |  5 +-
 .../integration/jira/give-details.tsx         |  1 +
 apps/app/components/issues/activity.tsx       |  3 +
 apps/app/components/issues/sidebar.tsx        |  5 +-
 .../app/components/issues/sub-issues-list.tsx |  2 +-
 .../components/pages/single-page-block.tsx    |  8 +--
 apps/app/components/project/sidebar-list.tsx  |  4 +-
 apps/app/components/ui/custom-menu.tsx        | 12 ++--
 .../components/ui/custom-search-select.tsx    |  6 +-
 apps/app/components/ui/custom-select.tsx      |  4 ++
 apps/app/components/ui/empty-space.tsx        | 11 ++--
 .../app/components/workspace/sidebar-menu.tsx |  6 +-
 apps/app/constants/fetch-keys.ts              | 10 ++-
 apps/app/helpers/array.helper.ts              |  2 +
 apps/app/hooks/use-issues-view.tsx            | 33 +++++++++-
 apps/app/hooks/use-projects.tsx               |  8 ++-
 apps/app/layouts/settings-navbar.tsx          |  8 ++-
 .../projects/[projectId]/issues/[issueId].tsx |  2 +-
 .../projects/[projectId]/pages/[pageId].tsx   |  2 +-
 .../[projectId]/settings/features.tsx         | 62 ++++++++++++++-----
 .../projects/[projectId]/settings/index.tsx   |  2 +-
 .../projects/[projectId]/views/[viewId].tsx   |  2 +-
 .../projects/[projectId]/views/index.tsx      |  2 +-
 .../pages/[workspaceSlug]/projects/index.tsx  |  4 +-
 29 files changed, 165 insertions(+), 74 deletions(-)
 rename apps/app/components/core/{filter-list.tsx => filters-list.tsx} (100%)

diff --git a/apps/app/components/core/board-view/single-board.tsx b/apps/app/components/core/board-view/single-board.tsx
index 76226f0cf..5d33b15bf 100644
--- a/apps/app/components/core/board-view/single-board.tsx
+++ b/apps/app/components/core/board-view/single-board.tsx
@@ -167,7 +167,7 @@ export const SingleBoard: React.FC<Props> = ({
                           Add Issue
                         </button>
                       }
-                      optionsPosition="left"
+                      position="left"
                       noBorder
                     >
                       <CustomMenu.MenuItem onClick={addIssueToState}>
diff --git a/apps/app/components/core/bulk-delete-issues-modal.tsx b/apps/app/components/core/bulk-delete-issues-modal.tsx
index bd5e18e57..7fe2181f6 100644
--- a/apps/app/components/core/bulk-delete-issues-modal.tsx
+++ b/apps/app/components/core/bulk-delete-issues-modal.tsx
@@ -121,7 +121,7 @@ export const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen }) =>
             leaveFrom="opacity-100 scale-100"
             leaveTo="opacity-0 scale-95"
           >
-            <Dialog.Panel className="relative mx-auto max-w-2xl transform divide-y divide-gray-500 divide-opacity-10 rounded-xl bg-brand-surface-2 shadow-2xl ring-1 ring-black ring-opacity-5 transition-all">
+            <Dialog.Panel className="relative mx-auto max-w-2xl transform divide-y divide-gray-500 rounded-xl border border-brand-base bg-brand-base shadow-2xl transition-all">
               <form>
                 <Combobox
                   onChange={(val: string) => {
@@ -149,7 +149,7 @@ export const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen }) =>
 
                   <Combobox.Options
                     static
-                    className="max-h-80 scroll-py-2 divide-y divide-gray-500 divide-opacity-10 overflow-y-auto"
+                    className="max-h-80 scroll-py-2 divide-y divide-brand-base overflow-y-auto"
                   >
                     {filteredIssues.length > 0 ? (
                       <li className="p-2">
@@ -158,15 +158,15 @@ export const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen }) =>
                             Select issues to delete
                           </h2>
                         )}
-                        <ul className="text-sm text-gray-700">
+                        <ul className="text-sm text-brand-secondary">
                           {filteredIssues.map((issue) => (
                             <Combobox.Option
                               key={issue.id}
                               as="div"
                               value={issue.id}
-                              className={({ active }) =>
+                              className={({ active, selected }) =>
                                 `flex cursor-pointer select-none items-center justify-between rounded-md px-3 py-2 ${
-                                  active ? "bg-gray-900 bg-opacity-5 text-brand-base" : ""
+                                  active ? "bg-brand-surface-2 text-brand-base" : ""
                                 }`
                               }
                             >
@@ -182,7 +182,7 @@ export const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen }) =>
                                     backgroundColor: issue.state_detail.color,
                                   }}
                                 />
-                                <span className="flex-shrink-0 text-xs text-brand-secondary">
+                                <span className="flex-shrink-0 text-xs">
                                   {issue.project_detail.identifier}-{issue.sequence_id}
                                 </span>
                                 <span>{issue.name}</span>
diff --git a/apps/app/components/core/filter-list.tsx b/apps/app/components/core/filters-list.tsx
similarity index 100%
rename from apps/app/components/core/filter-list.tsx
rename to apps/app/components/core/filters-list.tsx
diff --git a/apps/app/components/core/image-upload-modal.tsx b/apps/app/components/core/image-upload-modal.tsx
index ba41f3efa..2ede6e8d7 100644
--- a/apps/app/components/core/image-upload-modal.tsx
+++ b/apps/app/components/core/image-upload-modal.tsx
@@ -110,7 +110,7 @@ export const ImageUploadModal: React.FC<Props> = ({
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-30 overflow-y-auto">
@@ -124,7 +124,7 @@ export const ImageUploadModal: React.FC<Props> = ({
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-brand-surface-2 px-5 py-8 text-left shadow-xl transition-all sm:w-full sm:max-w-xl sm:p-6">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-brand-base bg-brand-base px-5 py-8 text-left shadow-xl transition-all sm:w-full sm:max-w-xl sm:p-6">
                 <div className="space-y-5">
                   <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-brand-base">
                     Upload Image
@@ -133,9 +133,9 @@ export const ImageUploadModal: React.FC<Props> = ({
                     <div className="flex items-center gap-3">
                       <div
                         {...getRootProps()}
-                        className={`relative block h-80 w-full rounded-lg p-12 text-center focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 ${
+                        className={`relative grid h-80 w-full cursor-pointer place-items-center rounded-lg p-12 text-center focus:outline-none focus:ring-2 focus:ring-brand-accent focus:ring-offset-2 ${
                           (image === null && isDragActive) || !value
-                            ? "border-2 border-dashed border-brand-base hover:border-gray-400"
+                            ? "border-2 border-dashed border-brand-base hover:bg-brand-surface-1"
                             : ""
                         }`}
                       >
@@ -143,7 +143,7 @@ export const ImageUploadModal: React.FC<Props> = ({
                           <>
                             <button
                               type="button"
-                              className="absolute top-0 right-0 z-40 translate-x-1/2 -translate-y-1/2 rounded bg-brand-surface-1 px-2 py-0.5 text-xs font-medium text-gray-600"
+                              className="absolute top-0 right-0 z-40 translate-x-1/2 -translate-y-1/2 rounded bg-brand-surface-1 px-2 py-0.5 text-xs font-medium text-brand-secondary"
                             >
                               Edit
                             </button>
@@ -152,17 +152,18 @@ export const ImageUploadModal: React.FC<Props> = ({
                               objectFit="cover"
                               src={image ? URL.createObjectURL(image) : value ? value : ""}
                               alt="image"
+                              className="rounded-lg"
                             />
                           </>
                         ) : (
-                          <>
-                            <UserCircleIcon className="mx-auto h-16 w-16 text-gray-400" />
-                            <span className="mt-2 block text-sm font-medium text-brand-base">
+                          <div>
+                            <UserCircleIcon className="mx-auto h-16 w-16 text-brand-secondary" />
+                            <span className="mt-2 block text-sm font-medium text-brand-secondary">
                               {isDragActive
                                 ? "Drop image here to upload"
                                 : "Drag & drop image here"}
                             </span>
-                          </>
+                          </div>
                         )}
 
                         <input {...getInputProps()} type="text" />
diff --git a/apps/app/components/core/index.ts b/apps/app/components/core/index.ts
index eb547578c..3ce807f98 100644
--- a/apps/app/components/core/index.ts
+++ b/apps/app/components/core/index.ts
@@ -3,12 +3,12 @@ export * from "./list-view";
 export * from "./sidebar";
 export * from "./bulk-delete-issues-modal";
 export * from "./existing-issues-list-modal";
+export * from "./filters-list";
 export * from "./gpt-assistant-modal";
 export * from "./image-upload-modal";
 export * from "./issues-view-filter";
 export * from "./issues-view";
 export * from "./link-modal";
 export * from "./image-picker-popover";
-export * from "./filter-list";
 export * from "./feeds";
 export * from "./theme-switch";
diff --git a/apps/app/components/core/list-view/single-list.tsx b/apps/app/components/core/list-view/single-list.tsx
index abe82ed73..dd5ffb110 100644
--- a/apps/app/components/core/list-view/single-list.tsx
+++ b/apps/app/components/core/list-view/single-list.tsx
@@ -168,7 +168,7 @@ export const SingleList: React.FC<Props> = ({
                     <PlusIcon className="h-4 w-4" />
                   </div>
                 }
-                optionsPosition="right"
+                position="right"
                 noBorder
               >
                 <CustomMenu.MenuItem onClick={addIssueToState}>Create new</CustomMenu.MenuItem>
@@ -204,7 +204,8 @@ export const SingleList: React.FC<Props> = ({
                       makeIssueCopy={() => makeIssueCopy(issue)}
                       handleDeleteIssue={handleDeleteIssue}
                       removeIssue={() => {
-                        if (removeIssue !== null && issue.bridge_id) removeIssue(issue.bridge_id, issue.id);
+                        if (removeIssue !== null && issue.bridge_id)
+                          removeIssue(issue.bridge_id, issue.id);
                       }}
                       isCompleted={isCompleted}
                       userAuth={userAuth}
diff --git a/apps/app/components/integration/jira/give-details.tsx b/apps/app/components/integration/jira/give-details.tsx
index a47fc67fc..6a1c5b66f 100644
--- a/apps/app/components/integration/jira/give-details.tsx
+++ b/apps/app/components/integration/jira/give-details.tsx
@@ -143,6 +143,7 @@ export const JiraGetImportDetail: React.FC = () => {
                     )}
                   </span>
                 }
+                verticalPosition="top"
               >
                 {projects.length > 0 ? (
                   projects.map((project) => (
diff --git a/apps/app/components/issues/activity.tsx b/apps/app/components/issues/activity.tsx
index 87c3cf5b6..7a3aed4a6 100644
--- a/apps/app/components/issues/activity.tsx
+++ b/apps/app/components/issues/activity.tsx
@@ -152,6 +152,9 @@ export const IssueActivitySection: React.FC = () => {
 
   const handleCommentDelete = async (commentId: string) => {
     if (!workspaceSlug || !projectId || !issueId) return;
+
+    mutateIssueActivities((prevData) => prevData?.filter((p) => p.id !== commentId), false);
+
     await issuesService
       .deleteIssueComment(
         workspaceSlug as string,
diff --git a/apps/app/components/issues/sidebar.tsx b/apps/app/components/issues/sidebar.tsx
index 54cf69e1d..6688effa8 100644
--- a/apps/app/components/issues/sidebar.tsx
+++ b/apps/app/components/issues/sidebar.tsx
@@ -120,11 +120,11 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
   };
 
   const handleCycleChange = useCallback(
-    (cycleDetail: ICycle) => {
+    (cycleDetails: ICycle) => {
       if (!workspaceSlug || !projectId || !issueDetail) return;
 
       issuesService
-        .addIssueToCycle(workspaceSlug as string, projectId as string, cycleDetail.id, {
+        .addIssueToCycle(workspaceSlug as string, projectId as string, cycleDetails.id, {
           issues: [issueDetail.id],
         })
         .then((res) => {
@@ -361,6 +361,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                           target_date: val,
                         })
                       }
+                      className="bg-brand-surface-1"
                       disabled={isNotAllowed}
                     />
                   )}
diff --git a/apps/app/components/issues/sub-issues-list.tsx b/apps/app/components/issues/sub-issues-list.tsx
index 28372ca92..85f05a3c9 100644
--- a/apps/app/components/issues/sub-issues-list.tsx
+++ b/apps/app/components/issues/sub-issues-list.tsx
@@ -322,7 +322,7 @@ export const SubIssuesList: FC<Props> = ({ parentIssue }) => {
                 Add sub-issue
               </>
             }
-            optionsPosition="left"
+            position="left"
             noBorder
             noChevron
           >
diff --git a/apps/app/components/pages/single-page-block.tsx b/apps/app/components/pages/single-page-block.tsx
index ff3811f66..cdfbc84f9 100644
--- a/apps/app/components/pages/single-page-block.tsx
+++ b/apps/app/components/pages/single-page-block.tsx
@@ -322,7 +322,7 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index
                 )}
                 <button
                   type="button"
-                  className={`flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-brand-surface-2 ${
+                  className={`flex items-center gap-1 rounded bg-brand-surface-1 px-1.5 py-1 text-xs hover:bg-brand-surface-2 ${
                     iAmFeelingLucky ? "cursor-wait bg-brand-surface-2" : ""
                   }`}
                   onClick={handleAutoGenerateDescription}
@@ -338,7 +338,7 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index
                 </button>
                 <button
                   type="button"
-                  className="-mr-2 flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-brand-surface-2"
+                  className="-mr-2 flex items-center gap-1 rounded bg-brand-surface-1 px-1.5 py-1 text-xs hover:bg-brand-surface-2"
                   onClick={() => setGptAssistantModal((prevData) => !prevData)}
                 >
                   <SparklesIcon className="h-4 w-4" />
@@ -346,7 +346,7 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index
                 </button>
                 <button
                   type="button"
-                  className="-mr-2 flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-brand-surface-2"
+                  className="-mr-2 flex items-center gap-1 rounded bg-brand-surface-1 px-1.5 py-1 text-xs hover:bg-brand-surface-2"
                   onClick={() => setCreateBlockForm(true)}
                 >
                   <PencilIcon className="h-3.5 w-3.5" />
@@ -354,7 +354,7 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index
                 <CustomMenu
                   customButton={
                     <button
-                      className="flex w-full cursor-pointer items-center justify-between gap-1 rounded px-2.5 py-1 text-left text-xs duration-300 hover:bg-brand-surface-2"
+                      className="flex w-full cursor-pointer items-center justify-between gap-1 rounded bg-brand-surface-1 px-2.5 py-1 text-left text-xs duration-300 hover:bg-brand-surface-2"
                       onClick={() => setIsMenuActive(!isMenuActive)}
                     >
                       <BoltIcon className="h-4.5 w-3.5" />
diff --git a/apps/app/components/project/sidebar-list.tsx b/apps/app/components/project/sidebar-list.tsx
index 5cb5dcbd3..9d4b9f415 100644
--- a/apps/app/components/project/sidebar-list.tsx
+++ b/apps/app/components/project/sidebar-list.tsx
@@ -37,8 +37,8 @@ export const ProjectSidebarList: FC = () => {
   const { setToastAlert } = useToast();
 
   const { data: favoriteProjects } = useSWR(
-    workspaceSlug ? FAVORITE_PROJECTS_LIST(workspaceSlug as string) : null,
-    () => (workspaceSlug ? projectService.getFavoriteProjects(workspaceSlug as string) : null)
+    workspaceSlug ? FAVORITE_PROJECTS_LIST(workspaceSlug.toString()) : null,
+    () => (workspaceSlug ? projectService.getFavoriteProjects(workspaceSlug.toString()) : null)
   );
 
   const { data: projects } = useSWR(
diff --git a/apps/app/components/ui/custom-menu.tsx b/apps/app/components/ui/custom-menu.tsx
index 5bae6fe0f..debc9149e 100644
--- a/apps/app/components/ui/custom-menu.tsx
+++ b/apps/app/components/ui/custom-menu.tsx
@@ -17,7 +17,8 @@ type Props = {
   textAlignment?: "left" | "center" | "right";
   noBorder?: boolean;
   noChevron?: boolean;
-  optionsPosition?: "left" | "right";
+  position?: "left" | "right";
+  verticalPosition?: "top" | "bottom";
   customButton?: JSX.Element;
 };
 
@@ -40,7 +41,8 @@ const CustomMenu = ({
   textAlignment,
   noBorder = false,
   noChevron = false,
-  optionsPosition = "right",
+  position = "right",
+  verticalPosition = "bottom",
   customButton,
 }: Props) => (
   <Menu as="div" className={`relative w-min whitespace-nowrap text-left ${className}`}>
@@ -103,9 +105,9 @@ const CustomMenu = ({
           leaveTo="transform opacity-0 scale-95"
         >
           <Menu.Items
-            className={`absolute z-20 mt-1 overflow-y-scroll whitespace-nowrap rounded-md border border-brand-base bg-brand-surface-1 p-1 text-xs shadow-lg focus:outline-none ${
-              optionsPosition === "left" ? "left-0 origin-top-left" : "right-0 origin-top-right"
-            } ${
+            className={`absolute z-20 overflow-y-scroll whitespace-nowrap rounded-md border border-brand-base bg-brand-surface-1 p-1 text-xs shadow-lg focus:outline-none ${
+              position === "left" ? "left-0 origin-top-left" : "right-0 origin-top-right"
+            } ${verticalPosition === "top" ? "bottom-full mb-1" : "mt-1"} ${
               height === "sm"
                 ? "max-h-28"
                 : height === "md"
diff --git a/apps/app/components/ui/custom-search-select.tsx b/apps/app/components/ui/custom-search-select.tsx
index cafd96b03..5bf745a84 100644
--- a/apps/app/components/ui/custom-search-select.tsx
+++ b/apps/app/components/ui/custom-search-select.tsx
@@ -15,6 +15,7 @@ type CustomSearchSelectProps = {
   textAlignment?: "left" | "center" | "right";
   height?: "sm" | "md" | "rg" | "lg";
   position?: "right" | "left";
+  verticalPosition?: "top" | "bottom";
   noChevron?: boolean;
   customButton?: JSX.Element;
   optionsClassName?: string;
@@ -32,6 +33,7 @@ export const CustomSearchSelect = ({
   onChange,
   options,
   position = "left",
+  verticalPosition = "bottom",
   noChevron = false,
   customButton,
   optionsClassName = "",
@@ -99,7 +101,9 @@ export const CustomSearchSelect = ({
             <Combobox.Options
               className={`${optionsClassName} absolute min-w-[10rem] border border-brand-base p-2 ${
                 position === "right" ? "right-0" : "left-0"
-              } z-10 mt-1 origin-top-right rounded-md bg-brand-surface-1 text-xs shadow-lg focus:outline-none`}
+              } ${
+                verticalPosition === "top" ? "bottom-full mb-1" : "mt-1"
+              } z-10 origin-top-right rounded-md bg-brand-surface-1 text-xs shadow-lg focus:outline-none`}
             >
               <div className="flex w-full items-center justify-start rounded-sm border-[0.6px] border-brand-base bg-brand-surface-1 px-2">
                 <MagnifyingGlassIcon className="h-3 w-3 text-brand-secondary" />
diff --git a/apps/app/components/ui/custom-select.tsx b/apps/app/components/ui/custom-select.tsx
index 81f2e9b5a..10a43e461 100644
--- a/apps/app/components/ui/custom-select.tsx
+++ b/apps/app/components/ui/custom-select.tsx
@@ -13,6 +13,7 @@ type CustomSelectProps = {
   textAlignment?: "left" | "center" | "right";
   maxHeight?: "sm" | "rg" | "md" | "lg" | "none";
   position?: "right" | "left";
+  verticalPosition?: "top" | "bottom";
   width?: "auto" | string;
   input?: boolean;
   noChevron?: boolean;
@@ -30,6 +31,7 @@ const CustomSelect = ({
   onChange,
   maxHeight = "none",
   position = "left",
+  verticalPosition = "bottom",
   width = "auto",
   input = false,
   noChevron = false,
@@ -80,6 +82,8 @@ const CustomSelect = ({
       <Listbox.Options
         className={`${optionsClassName} absolute border border-brand-base ${
           position === "right" ? "right-0" : "left-0"
+        } ${
+          verticalPosition === "top" ? "bottom-full mb-1" : "mt-1"
         } z-10 mt-1 origin-top-right overflow-y-auto rounded-md bg-brand-surface-1 text-xs shadow-lg focus:outline-none ${
           width === "auto" ? "min-w-[8rem] whitespace-nowrap" : width
         } ${input ? "max-h-48" : ""} ${
diff --git a/apps/app/components/ui/empty-space.tsx b/apps/app/components/ui/empty-space.tsx
index 755085299..f853defb6 100644
--- a/apps/app/components/ui/empty-space.tsx
+++ b/apps/app/components/ui/empty-space.tsx
@@ -18,13 +18,16 @@ const EmptySpace: React.FC<EmptySpaceProps> = ({ title, description, children, I
     <div className="max-w-lg">
       {Icon ? (
         <div className="mb-4">
-          <Icon className="h-14 w-14 text-gray-400" />
+          <Icon className="h-14 w-14 text-brand-secondary" />
         </div>
       ) : null}
 
       <h2 className="text-lg font-medium text-brand-base">{title}</h2>
       <div className="mt-1 text-sm text-brand-secondary">{description}</div>
-      <ul role="list" className="mt-6 divide-y divide-gray-200 border-t border-brand-base border-b">
+      <ul
+        role="list"
+        className="mt-6 divide-y divide-brand-base border-t border-b border-brand-base"
+      >
         {children}
       </ul>
       {link ? (
@@ -57,7 +60,7 @@ const EmptySpaceItem: React.FC<EmptySpaceItemProps> = ({ title, description, Ico
         } space-x-3 py-4`}
       >
         <div className="flex-shrink-0">
-          <span className={`inline-flex h-10 w-10 items-center justify-center rounded-lg bg-brand-accent`}>
+          <span className="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-brand-accent">
             <Icon className="h-6 w-6 text-white" aria-hidden="true" />
           </span>
         </div>
@@ -67,7 +70,7 @@ const EmptySpaceItem: React.FC<EmptySpaceItemProps> = ({ title, description, Ico
         </div>
         <div className="flex-shrink-0 self-center">
           <ChevronRightIcon
-            className="h-5 w-5 text-gray-400 group-hover:text-brand-secondary"
+            className="h-5 w-5 text-brand-base group-hover:text-brand-secondary"
             aria-hidden="true"
           />
         </div>
diff --git a/apps/app/components/workspace/sidebar-menu.tsx b/apps/app/components/workspace/sidebar-menu.tsx
index 8e5bc65ab..8dc1252ad 100644
--- a/apps/app/components/workspace/sidebar-menu.tsx
+++ b/apps/app/components/workspace/sidebar-menu.tsx
@@ -43,9 +43,9 @@ export const WorkspaceSidebarMenu: React.FC = () => {
           <a
             className={`${
               (
-                link.name === "Dashboard"
-                  ? router.asPath === link.href
-                  : router.asPath.includes(link.href)
+                link.name === "Settings"
+                  ? router.asPath.includes(link.href)
+                  : router.asPath === link.href
               )
                 ? "bg-brand-surface-2 text-brand-base"
                 : "text-brand-secondary hover:bg-brand-surface-2 hover:text-brand-secondary focus:bg-brand-surface-2 focus:text-brand-secondary"
diff --git a/apps/app/constants/fetch-keys.ts b/apps/app/constants/fetch-keys.ts
index a4773e233..91cfc9ad3 100644
--- a/apps/app/constants/fetch-keys.ts
+++ b/apps/app/constants/fetch-keys.ts
@@ -106,13 +106,19 @@ export const MODULE_ISSUES_WITH_PARAMS = (moduleId: string, params?: any) => {
 
   const paramsKey = paramsToKey(params);
 
-  return `MODULE_ISSUES_WITH_PARAMS_${moduleId}_${paramsKey.toUpperCase()}`;
+  return `MODULE_ISSUES_WITH_PARAMS_${moduleId.toUpperCase()}_${paramsKey.toUpperCase()}`;
 };
 export const MODULE_DETAILS = (moduleId: string) => `MODULE_DETAILS_${moduleId.toUpperCase()}`;
 
 export const VIEWS_LIST = (projectId: string) => `VIEWS_LIST_${projectId.toUpperCase()}`;
-export const VIEW_ISSUES = (viewId: string) => `VIEW_ISSUES_${viewId.toUpperCase()}`;
 export const VIEW_DETAILS = (viewId: string) => `VIEW_DETAILS_${viewId.toUpperCase()}`;
+export const VIEW_ISSUES = (viewId: string, params: any) => {
+  if (!params) return `VIEW_ISSUES_${viewId.toUpperCase()}`;
+
+  const paramsKey = paramsToKey(params);
+
+  return `VIEW_ISSUES_${viewId.toUpperCase()}_${paramsKey.toUpperCase()}`;
+};
 
 // Issues
 export const ISSUE_DETAILS = (issueId: string) => `ISSUE_DETAILS_${issueId.toUpperCase()}`;
diff --git a/apps/app/helpers/array.helper.ts b/apps/app/helpers/array.helper.ts
index 1f9f021be..7984c6dfa 100644
--- a/apps/app/helpers/array.helper.ts
+++ b/apps/app/helpers/array.helper.ts
@@ -12,6 +12,8 @@ export const orderArrayBy = (
   key: string,
   ordering: "ascending" | "descending" = "ascending"
 ) => {
+  if (!array || !Array.isArray(array) || array.length === 0) return [];
+
   if (key[0] === "-") {
     ordering = "descending";
     key = key.slice(1);
diff --git a/apps/app/hooks/use-issues-view.tsx b/apps/app/hooks/use-issues-view.tsx
index 57b584db4..20935f5f8 100644
--- a/apps/app/hooks/use-issues-view.tsx
+++ b/apps/app/hooks/use-issues-view.tsx
@@ -21,6 +21,7 @@ import {
   MODULE_ISSUES_WITH_PARAMS,
   PROJECT_ISSUES_LIST_WITH_PARAMS,
   STATES_LIST,
+  VIEW_ISSUES,
 } from "constants/fetch-keys";
 
 const useIssuesView = () => {
@@ -40,7 +41,7 @@ const useIssuesView = () => {
   } = useContext(issueViewContext);
 
   const router = useRouter();
-  const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
+  const { workspaceSlug, projectId, cycleId, moduleId, viewId } = router.query;
 
   const params: any = {
     order_by: orderBy,
@@ -99,6 +100,14 @@ const useIssuesView = () => {
       : null
   );
 
+  const { data: viewIssues } = useSWR(
+    workspaceSlug && projectId && viewId && params ? VIEW_ISSUES(viewId.toString(), params) : null,
+    workspaceSlug && projectId && viewId && params
+      ? () =>
+          issuesService.getIssuesWithParams(workspaceSlug.toString(), projectId.toString(), params)
+      : null
+  );
+
   const { data: states } = useSWR(
     workspaceSlug && projectId ? STATES_LIST(projectId as string) : null,
     workspaceSlug && projectId
@@ -106,7 +115,17 @@ const useIssuesView = () => {
       : null
   );
   const statesList = getStatesList(states ?? {});
-  const stateIds = statesList.map((state) => state.id);
+  const activeStatesList = statesList.filter(
+    (state) => state.group === "started" || state.group === "unstarted"
+  );
+  const backlogStatesList = statesList.filter((state) => state.group === "backlog");
+
+  const stateIds =
+    filters && filters?.type === "active"
+      ? activeStatesList.map((state) => state.id)
+      : filters?.type === "backlog"
+      ? backlogStatesList.map((state) => state.id)
+      : statesList.map((state) => state.id);
 
   const emptyStatesObject: { [key: string]: [] } = {};
   for (let i = 0; i < stateIds.length; i++) {
@@ -118,7 +137,13 @@ const useIssuesView = () => {
         [key: string]: IIssue[];
       }
     | undefined = useMemo(() => {
-    const issuesToGroup = cycleId ? cycleIssues : moduleId ? moduleIssues : projectIssues;
+    const issuesToGroup = cycleId
+      ? cycleIssues
+      : moduleId
+      ? moduleIssues
+      : viewId
+      ? viewIssues
+      : projectIssues;
 
     if (Array.isArray(issuesToGroup)) return { allIssues: issuesToGroup };
     if (groupByProperty === "state")
@@ -129,9 +154,11 @@ const useIssuesView = () => {
     projectIssues,
     cycleIssues,
     moduleIssues,
+    viewIssues,
     groupByProperty,
     cycleId,
     moduleId,
+    viewId,
     emptyStatesObject,
   ]);
 
diff --git a/apps/app/hooks/use-projects.tsx b/apps/app/hooks/use-projects.tsx
index 6b4a8b413..247fc0db6 100644
--- a/apps/app/hooks/use-projects.tsx
+++ b/apps/app/hooks/use-projects.tsx
@@ -1,7 +1,11 @@
-import useSWR from "swr";
 import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
 // services
 import projectService from "services/project.service";
+// helpers
+import { orderArrayBy } from "helpers/array.helper";
 // fetch-keys
 import { PROJECTS_LIST } from "constants/fetch-keys";
 
@@ -20,7 +24,7 @@ const useProjects = () => {
     .filter((_item, index) => index < 3);
 
   return {
-    projects: projects || [],
+    projects: orderArrayBy(projects ?? [], "is_favorite", "descending") || [],
     recentProjects: recentProjects || [],
     mutateProjects,
   };
diff --git a/apps/app/layouts/settings-navbar.tsx b/apps/app/layouts/settings-navbar.tsx
index fb720acf8..2c9a5b2cc 100644
--- a/apps/app/layouts/settings-navbar.tsx
+++ b/apps/app/layouts/settings-navbar.tsx
@@ -30,7 +30,7 @@ const SettingsNavbar: React.FC<Props> = ({ profilePage = false }) => {
       href: `/${workspaceSlug}/settings/integrations`,
     },
     {
-      label: "Import/ Export",
+      label: "Import/Export",
       href: `/${workspaceSlug}/settings/import-export`,
     },
   ];
@@ -94,7 +94,11 @@ const SettingsNavbar: React.FC<Props> = ({ profilePage = false }) => {
           <a>
             <div
               className={`rounded-3xl border border-brand-base px-5 py-1.5 text-sm sm:px-7 sm:py-2 sm:text-base ${
-                router.asPath === link.href
+                (
+                  link.label === "Import/Export"
+                    ? router.asPath.includes(link.href)
+                    : router.asPath === link.href
+                )
                   ? "border-brand-accent bg-brand-accent text-white"
                   : "border-brand-base bg-brand-surface-2 hover:bg-brand-surface-1"
               }`}
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
index 1d73b2a75..15237617e 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
@@ -164,7 +164,7 @@ const IssueDetailsPage: NextPage = () => {
                     </a>
                   </Link>
 
-                  <CustomMenu ellipsis optionsPosition="left">
+                  <CustomMenu ellipsis position="left">
                     {siblingIssues && siblingIssues.length > 0 ? (
                       siblingIssues.map((issue: IIssue) => (
                         <CustomMenu.MenuItem key={issue.id}>
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
index fb82b7364..e6e37e068 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
@@ -563,7 +563,7 @@ const SinglePage: NextPage = () => {
           </div>
         </div>
       ) : (
-        <Loader>
+        <Loader className="p-8">
           <Loader.Item height="200px" />
         </Loader>
       )}
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
index 9df67612b..2c8390a97 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
@@ -18,10 +18,10 @@ import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 import { ContrastIcon, PeopleGroupIcon, ViewListIcon } from "components/icons";
 import { DocumentTextIcon } from "@heroicons/react/24/outline";
 // types
-import { IProject } from "types";
+import { IFavoriteProject, IProject } from "types";
 import type { NextPage } from "next";
 // fetch-keys
-import { PROJECTS_LIST, PROJECT_DETAILS } from "constants/fetch-keys";
+import { FAVORITE_PROJECTS_LIST, PROJECTS_LIST, PROJECT_DETAILS } from "constants/fetch-keys";
 import { SettingsHeader } from "components/project";
 
 const featuresList = [
@@ -84,16 +84,29 @@ const FeaturesSettings: NextPage = () => {
   );
 
   const handleSubmit = async (formData: Partial<IProject>) => {
-    if (!workspaceSlug || !projectId) return;
+    if (!workspaceSlug || !projectId || !projectDetails) return;
 
-    mutate<IProject>(
-      PROJECT_DETAILS(projectId as string),
-      (prevData) => ({ ...(prevData as IProject), ...formData }),
-      false
-    );
+    if (projectDetails.is_favorite)
+      mutate<IFavoriteProject[]>(
+        FAVORITE_PROJECTS_LIST(workspaceSlug.toString()),
+        (prevData) =>
+          prevData?.map((p) => {
+            if (p.project === projectId)
+              return {
+                ...p,
+                project_detail: {
+                  ...p.project_detail,
+                  ...formData,
+                },
+              };
+
+            return p;
+          }),
+        false
+      );
 
     mutate<IProject[]>(
-      PROJECTS_LIST(workspaceSlug as string),
+      PROJECTS_LIST(workspaceSlug.toString()),
       (prevData) =>
         prevData?.map((p) => {
           if (p.id === projectId)
@@ -107,19 +120,34 @@ const FeaturesSettings: NextPage = () => {
       false
     );
 
+    mutate<IProject>(
+      PROJECT_DETAILS(projectId as string),
+      (prevData) => ({ ...(prevData as IProject), ...formData }),
+      false
+    );
+
+    setToastAlert({
+      type: "success",
+      title: "Success!",
+      message: "Project feature updated successfully.",
+    });
+
     await projectService
       .updateProject(workspaceSlug as string, projectId as string, formData)
-      .then((res) => {
+      .then(() => {
+        mutate(
+          projectDetails.is_favorite
+            ? FAVORITE_PROJECTS_LIST(workspaceSlug.toString())
+            : PROJECTS_LIST(workspaceSlug.toString())
+        );
         mutate(PROJECT_DETAILS(projectId as string));
-        mutate(PROJECTS_LIST(workspaceSlug as string));
-        setToastAlert({
-          title: "Success!",
-          type: "success",
-          message: "Project features updated successfully.",
-        });
       })
       .catch((err) => {
-        console.error(err);
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Project feature could not be updated. Please try again.",
+        });
       });
   };
 
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
index 684465f8d..5535aa99a 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
@@ -229,7 +229,7 @@ const GeneralSettings: NextPage = () => {
             </div>
             <div className="col-span-12 sm:col-span-6">
               {watch("cover_image") ? (
-                <div className="h-32 w-full rounded border p-1">
+                <div className="h-32 w-full rounded border border-brand-base p-1">
                   <div className="relative h-full w-full rounded">
                     <Image
                       src={watch("cover_image")!}
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/views/[viewId].tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/views/[viewId].tsx
index bdde38aa3..080aa9011 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/views/[viewId].tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/views/[viewId].tsx
@@ -95,7 +95,7 @@ const SingleView: React.FC = () => {
                 document.dispatchEvent(e);
               }}
             >
-              <PlusIcon className="w-4 h-4" />
+              <PlusIcon className="h-4 w-4" />
               Add Issue
             </PrimaryButton>
           </div>
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx
index 79e72b85e..818046e6b 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx
@@ -119,7 +119,7 @@ const ProjectViews: NextPage = () => {
           />
         )
       ) : (
-        <Loader className="space-y-3">
+        <Loader className="space-y-3 p-8">
           <Loader.Item height="30px" />
           <Loader.Item height="30px" />
           <Loader.Item height="30px" />
diff --git a/apps/app/pages/[workspaceSlug]/projects/index.tsx b/apps/app/pages/[workspaceSlug]/projects/index.tsx
index a38c037e5..6b29d41c5 100644
--- a/apps/app/pages/[workspaceSlug]/projects/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/index.tsx
@@ -19,12 +19,12 @@ import { Loader, EmptyState, PrimaryButton } from "components/ui";
 import { Breadcrumbs, BreadcrumbItem } from "components/breadcrumbs";
 // icons
 import { PlusIcon } from "@heroicons/react/24/outline";
+// images
+import emptyProject from "public/empty-state/empty-project.svg";
 // types
 import type { NextPage } from "next";
 // fetch-keys
 import { PROJECT_MEMBERS } from "constants/fetch-keys";
-// image
-import emptyProject from "public/empty-state/empty-project.svg";
 
 const ProjectsPage: NextPage = () => {
   // router

From 4f2b1068529215ed4c16d3a476bbb3ac246eeeea Mon Sep 17 00:00:00 2001
From: Dakshesh Jain <65905942+dakshesh14@users.noreply.github.com>
Date: Thu, 11 May 2023 02:15:49 +0530
Subject: [PATCH 02/81] fix: rich text editor (#1008)

* fix: undo/redo, placeholder overlapping with text, horizontal cursor

refractor: removed a lot of state-management that was not required

* fix: forwarding ref to remirror for getting extra helper functions

* fix: icon type error

* fix: value type not supported error on page block

* style: spacing, and UX for add link

---------

Co-authored-by: Aaryan Khandelwal <aaryankhandu123@gmail.com>
---
 .../components/core/gpt-assistant-modal.tsx   |   12 +-
 apps/app/components/integration/jira/root.tsx |    4 +-
 .../components/issues/comment/add-comment.tsx |   14 +-
 .../issues/comment/comment-card.tsx           |   80 +-
 .../components/issues/description-form.tsx    |   70 +-
 apps/app/components/issues/form.tsx           |   18 +-
 .../pages/create-update-block-inline.tsx      |   78 +-
 .../app/components/rich-text-editor/index.tsx |  113 +-
 .../toolbar/float-tool-tip.tsx                |  330 +-
 apps/app/hooks/use-reload-confirmation.tsx    |   28 +
 apps/app/package.json                         |    2 +-
 apps/app/styles/editor.css                    |  431 +-
 apps/app/tailwind.config.js                   |   27 +
 yarn.lock                                     | 5476 ++++++++---------
 14 files changed, 3297 insertions(+), 3386 deletions(-)
 create mode 100644 apps/app/hooks/use-reload-confirmation.tsx

diff --git a/apps/app/components/core/gpt-assistant-modal.tsx b/apps/app/components/core/gpt-assistant-modal.tsx
index 653ea3e01..f30d33616 100644
--- a/apps/app/components/core/gpt-assistant-modal.tsx
+++ b/apps/app/components/core/gpt-assistant-modal.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useState, forwardRef, useRef } from "react";
 
 import { useRouter } from "next/router";
 import dynamic from "next/dynamic";
@@ -35,6 +35,14 @@ const RemirrorRichTextEditor = dynamic(() => import("components/rich-text-editor
   ssr: false,
 });
 
+import { IRemirrorRichTextEditor } from "components/rich-text-editor";
+
+const WrappedRemirrorRichTextEditor = forwardRef<IRemirrorRichTextEditor, IRemirrorRichTextEditor>(
+  (props, ref) => <RemirrorRichTextEditor {...props} forwardedRef={ref} />
+);
+
+WrappedRemirrorRichTextEditor.displayName = "WrappedRemirrorRichTextEditor";
+
 export const GptAssistantModal: React.FC<Props> = ({
   isOpen,
   handleClose,
@@ -125,7 +133,7 @@ export const GptAssistantModal: React.FC<Props> = ({
         isOpen ? "block" : "hidden"
       }`}
     >
-      {((content && content !== "") || htmlContent !== "<p></p>") && (
+      {((content && content !== "") || (htmlContent && htmlContent !== "<p></p>")) && (
         <div className="remirror-section text-sm">
           Content:
           <RemirrorRichTextEditor
diff --git a/apps/app/components/integration/jira/root.tsx b/apps/app/components/integration/jira/root.tsx
index 9179c576b..f328b7041 100644
--- a/apps/app/components/integration/jira/root.tsx
+++ b/apps/app/components/integration/jira/root.tsx
@@ -13,7 +13,7 @@ import { FormProvider, useForm } from "react-hook-form";
 
 // icons
 import { ArrowLeftIcon, ListBulletIcon } from "@heroicons/react/24/outline";
-import { CogIcon, CloudUploadIcon, UsersIcon, CheckIcon } from "components/icons";
+import { CogIcon, UsersIcon, CheckIcon } from "components/icons";
 
 // services
 import jiraImporterService from "services/integration/jira.service";
@@ -40,7 +40,7 @@ import { IJiraImporterForm } from "types";
 const integrationWorkflowData: Array<{
   title: string;
   key: TJiraIntegrationSteps;
-  icon: React.FC<React.SVGProps<SVGSVGElement>>;
+  icon: React.FC<React.SVGProps<SVGSVGElement> & React.RefAttributes<SVGSVGElement>>;
 }> = [
   {
     title: "Configure",
diff --git a/apps/app/components/issues/comment/add-comment.tsx b/apps/app/components/issues/comment/add-comment.tsx
index 8423b3003..b088be77a 100644
--- a/apps/app/components/issues/comment/add-comment.tsx
+++ b/apps/app/components/issues/comment/add-comment.tsx
@@ -26,6 +26,14 @@ const RemirrorRichTextEditor = dynamic(() => import("components/rich-text-editor
     </Loader>
   ),
 });
+import { IRemirrorRichTextEditor } from "components/rich-text-editor";
+
+const WrappedRemirrorRichTextEditor = React.forwardRef<
+  IRemirrorRichTextEditor,
+  IRemirrorRichTextEditor
+>((props, ref) => <RemirrorRichTextEditor {...props} forwardedRef={ref} />);
+
+WrappedRemirrorRichTextEditor.displayName = "WrappedRemirrorRichTextEditor";
 
 const defaultValues: Partial<IIssueComment> = {
   comment_json: "",
@@ -41,6 +49,8 @@ export const AddComment: React.FC = () => {
     reset,
   } = useForm<IIssueComment>({ defaultValues });
 
+  const editorRef = React.useRef<any>(null);
+
   const router = useRouter();
   const { workspaceSlug, projectId, issueId } = router.query;
 
@@ -61,6 +71,7 @@ export const AddComment: React.FC = () => {
       .then(() => {
         mutate(PROJECT_ISSUES_ACTIVITY(issueId as string));
         reset(defaultValues);
+        editorRef.current?.clearEditor();
       })
       .catch(() =>
         setToastAlert({
@@ -79,11 +90,12 @@ export const AddComment: React.FC = () => {
             name="comment_json"
             control={control}
             render={({ field: { value } }) => (
-              <RemirrorRichTextEditor
+              <WrappedRemirrorRichTextEditor
                 value={value}
                 onJSONChange={(jsonValue) => setValue("comment_json", jsonValue)}
                 onHTMLChange={(htmlValue) => setValue("comment_html", htmlValue)}
                 placeholder="Enter your comment..."
+                ref={editorRef}
               />
             )}
           />
diff --git a/apps/app/components/issues/comment/comment-card.tsx b/apps/app/components/issues/comment/comment-card.tsx
index 0d9aae830..e632e9ad3 100644
--- a/apps/app/components/issues/comment/comment-card.tsx
+++ b/apps/app/components/issues/comment/comment-card.tsx
@@ -18,6 +18,15 @@ import type { IIssueComment } from "types";
 
 const RemirrorRichTextEditor = dynamic(() => import("components/rich-text-editor"), { ssr: false });
 
+import { IRemirrorRichTextEditor } from "components/rich-text-editor";
+
+const WrappedRemirrorRichTextEditor = React.forwardRef<
+  IRemirrorRichTextEditor,
+  IRemirrorRichTextEditor
+>((props, ref) => <RemirrorRichTextEditor {...props} forwardedRef={ref} />);
+
+WrappedRemirrorRichTextEditor.displayName = "WrappedRemirrorRichTextEditor";
+
 type Props = {
   comment: IIssueComment;
   onSubmit: (comment: IIssueComment) => void;
@@ -27,6 +36,9 @@ type Props = {
 export const CommentCard: React.FC<Props> = ({ comment, onSubmit, handleCommentDeletion }) => {
   const { user } = useUser();
 
+  const editorRef = React.useRef<any>(null);
+  const showEditorRef = React.useRef<any>(null);
+
   const [isEditing, setIsEditing] = useState(false);
 
   const {
@@ -42,6 +54,10 @@ export const CommentCard: React.FC<Props> = ({ comment, onSubmit, handleCommentD
     if (isSubmitting) return;
     setIsEditing(false);
     onSubmit(formData);
+    console.log(formData);
+
+    editorRef.current?.setEditorValue(formData.comment_json);
+    showEditorRef.current?.setEditorValue(formData.comment_json);
   };
 
   useEffect(() => {
@@ -85,41 +101,45 @@ export const CommentCard: React.FC<Props> = ({ comment, onSubmit, handleCommentD
           </p>
         </div>
         <div className="issue-comments-section p-0">
-          {isEditing ? (
-            <form className="flex flex-col gap-2" onSubmit={handleSubmit(onEnter)}>
-              <RemirrorRichTextEditor
-                value={comment.comment_html}
-                onBlur={(jsonValue, htmlValue) => {
-                  setValue("comment_json", jsonValue);
-                  setValue("comment_html", htmlValue);
-                }}
-                placeholder="Enter Your comment..."
-              />
-              <div className="flex gap-1 self-end">
-                <button
-                  type="submit"
-                  disabled={isSubmitting}
-                  className="group rounded border border-green-500 bg-green-500/20 p-2 shadow-md duration-300 hover:bg-green-500"
-                >
-                  <CheckIcon className="h-3 w-3 text-green-500 duration-300 group-hover:text-white" />
-                </button>
-                <button
-                  type="button"
-                  className="group rounded border border-red-500 bg-red-500/20 p-2 shadow-md duration-300 hover:bg-red-500"
-                  onClick={() => setIsEditing(false)}
-                >
-                  <XMarkIcon className="h-3 w-3 text-red-500 duration-300 group-hover:text-white" />
-                </button>
-              </div>
-            </form>
-          ) : (
-            <RemirrorRichTextEditor
+          <form
+            className={`flex-col gap-2 ${isEditing ? "flex" : "hidden"}`}
+            onSubmit={handleSubmit(onEnter)}
+          >
+            <WrappedRemirrorRichTextEditor
+              value={comment.comment_html}
+              onBlur={(jsonValue, htmlValue) => {
+                setValue("comment_json", jsonValue);
+                setValue("comment_html", htmlValue);
+              }}
+              placeholder="Enter Your comment..."
+              ref={editorRef}
+            />
+            <div className="flex gap-1 self-end">
+              <button
+                type="submit"
+                disabled={isSubmitting}
+                className="group rounded border border-green-500 bg-green-500/20 p-2 shadow-md duration-300 hover:bg-green-500"
+              >
+                <CheckIcon className="h-3 w-3 text-green-500 duration-300 group-hover:text-white" />
+              </button>
+              <button
+                type="button"
+                className="group rounded border border-red-500 bg-red-500/20 p-2 shadow-md duration-300 hover:bg-red-500"
+                onClick={() => setIsEditing(false)}
+              >
+                <XMarkIcon className="h-3 w-3 text-red-500 duration-300 group-hover:text-white" />
+              </button>
+            </div>
+          </form>
+          <div className={`${isEditing ? "hidden" : ""}`}>
+            <WrappedRemirrorRichTextEditor
               value={comment.comment_html}
               editable={false}
               noBorder
               customClassName="text-xs border border-brand-base bg-brand-base"
+              ref={showEditorRef}
             />
-          )}
+          </div>
         </div>
       </div>
       {user?.id === comment.actor && (
diff --git a/apps/app/components/issues/description-form.tsx b/apps/app/components/issues/description-form.tsx
index b568fb016..679de126c 100644
--- a/apps/app/components/issues/description-form.tsx
+++ b/apps/app/components/issues/description-form.tsx
@@ -6,6 +6,8 @@ import dynamic from "next/dynamic";
 import { Controller, useForm } from "react-hook-form";
 // contexts
 import { useProjectMyMembership } from "contexts/project-member.context";
+// hooks
+import useReloadConfirmations from "hooks/use-reload-confirmation";
 // components
 import { Loader, TextArea } from "components/ui";
 const RemirrorRichTextEditor = dynamic(() => import("components/rich-text-editor"), {
@@ -36,6 +38,8 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({ issue, handleFormS
 
   const { memberRole } = useProjectMyMembership();
 
+  const { setShowAlert } = useReloadConfirmations();
+
   const {
     handleSubmit,
     watch,
@@ -82,7 +86,10 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({ issue, handleFormS
   useEffect(() => {
     if (!issue) return;
 
-    reset(issue);
+    reset({
+      ...issue,
+      description: issue.description,
+    });
   }, [issue, reset]);
 
   const isNotAllowed = memberRole.isGuest || memberRole.isViewer;
@@ -131,31 +138,42 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({ issue, handleFormS
       <Controller
         name="description"
         control={control}
-        render={({ field: { value } }) => (
-          <RemirrorRichTextEditor
-            value={
-              !value ||
-              value === "" ||
-              (typeof value === "object" && Object.keys(value).length === 0)
-                ? watch("description_html")
-                : value
-            }
-            onJSONChange={(jsonValue) => setValue("description", jsonValue)}
-            onHTMLChange={(htmlValue) => setValue("description_html", htmlValue)}
-            onBlur={() => {
-              setIsSubmitting(true);
-              handleSubmit(handleDescriptionFormSubmit)()
-                .then(() => {
-                  setIsSubmitting(false);
-                })
-                .catch(() => {
-                  setIsSubmitting(false);
-                });
-            }}
-            placeholder="Describe the issue..."
-            editable={!isNotAllowed}
-          />
-        )}
+        render={({ field: { value } }) => {
+          if (!value || !watch("description_html")) return <></>;
+
+          return (
+            <RemirrorRichTextEditor
+              value={
+                !value ||
+                value === "" ||
+                (typeof value === "object" && Object.keys(value).length === 0)
+                  ? watch("description_html")
+                  : value
+              }
+              onJSONChange={(jsonValue) => {
+                setShowAlert(true);
+                setValue("description", jsonValue);
+              }}
+              onHTMLChange={(htmlValue) => {
+                setShowAlert(true);
+                setValue("description_html", htmlValue);
+              }}
+              onBlur={() => {
+                setIsSubmitting(true);
+                handleSubmit(handleDescriptionFormSubmit)()
+                  .then(() => {
+                    setIsSubmitting(false);
+                    setShowAlert(false);
+                  })
+                  .catch(() => {
+                    setIsSubmitting(false);
+                  });
+              }}
+              placeholder="Describe the issue..."
+              editable={!isNotAllowed}
+            />
+          );
+        }}
       />
       <div
         className={`absolute -bottom-8 right-0 text-sm text-brand-secondary ${
diff --git a/apps/app/components/issues/form.tsx b/apps/app/components/issues/form.tsx
index 8d1db9e54..e6871dc36 100644
--- a/apps/app/components/issues/form.tsx
+++ b/apps/app/components/issues/form.tsx
@@ -53,7 +53,14 @@ const RemirrorRichTextEditor = dynamic(() => import("components/rich-text-editor
 const defaultValues: Partial<IIssue> = {
   project: "",
   name: "",
-  description: { type: "doc", content: [] },
+  description: {
+    type: "doc",
+    content: [
+      {
+        type: "paragraph",
+      },
+    ],
+  },
   description_html: "<p></p>",
   estimate_point: null,
   state: "",
@@ -132,7 +139,14 @@ export const IssueForm: FC<IssueFormProps> = ({
     reset({
       ...defaultValues,
       project: projectId,
-      description: "",
+      description: {
+        type: "doc",
+        content: [
+          {
+            type: "paragraph",
+          },
+        ],
+      },
       description_html: "<p></p>",
     });
   };
diff --git a/apps/app/components/pages/create-update-block-inline.tsx b/apps/app/components/pages/create-update-block-inline.tsx
index 832aa03df..26533d219 100644
--- a/apps/app/components/pages/create-update-block-inline.tsx
+++ b/apps/app/components/pages/create-update-block-inline.tsx
@@ -34,8 +34,8 @@ type Props = {
 
 const defaultValues = {
   name: "",
-  description: { type: "doc", content: [] },
-  description_html: "<p></p>",
+  description: null,
+  description_html: null,
 };
 
 const RemirrorRichTextEditor = dynamic(() => import("components/rich-text-editor"), {
@@ -46,6 +46,14 @@ const RemirrorRichTextEditor = dynamic(() => import("components/rich-text-editor
     </Loader>
   ),
 });
+import { IRemirrorRichTextEditor } from "components/rich-text-editor";
+
+const WrappedRemirrorRichTextEditor = React.forwardRef<
+  IRemirrorRichTextEditor,
+  IRemirrorRichTextEditor
+>((props, ref) => <RemirrorRichTextEditor {...props} forwardedRef={ref} />);
+
+WrappedRemirrorRichTextEditor.displayName = "WrappedRemirrorRichTextEditor";
 
 export const CreateUpdateBlockInline: React.FC<Props> = ({
   handleClose,
@@ -57,6 +65,8 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
   const [iAmFeelingLucky, setIAmFeelingLucky] = useState(false);
   const [gptAssistantModal, setGptAssistantModal] = useState(false);
 
+  const editorRef = React.useRef<any>(null);
+
   const router = useRouter();
   const { workspaceSlug, projectId, pageId } = router.query;
 
@@ -97,6 +107,7 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
             (prevData) => [...(prevData as IPageBlock[]), res],
             false
           );
+          editorRef.current?.clearEditor();
         })
         .catch(() => {
           setToastAlert({
@@ -135,6 +146,7 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
         })
         .then((res) => {
           mutate(PAGE_BLOCKS_LIST(pageId as string));
+          editorRef.current?.setEditorValue(res.description);
           if (data.issue && data.sync)
             issuesService
               .patchIssue(workspaceSlug as string, projectId as string, data.issue, {
@@ -200,8 +212,14 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
     reset({
       ...defaultValues,
       name: data.name,
-      description: data.description,
-      description_html: data.description_html,
+      description:
+        !data.description || data.description === ""
+          ? {
+              type: "doc",
+              content: [{ type: "paragraph" }],
+            }
+          : data.description,
+      description_html: data.description_html ?? "<p></p>",
     });
   }, [reset, data, focus, setFocus]);
 
@@ -254,21 +272,43 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
             <Controller
               name="description"
               control={control}
-              render={({ field: { value } }) => (
-                <RemirrorRichTextEditor
-                  value={
-                    !value || (typeof value === "object" && Object.keys(value).length === 0)
-                      ? watch("description_html")
-                      : value
-                  }
-                  onJSONChange={(jsonValue) => setValue("description", jsonValue)}
-                  onHTMLChange={(htmlValue) => setValue("description_html", htmlValue)}
-                  placeholder="Write something..."
-                  customClassName="text-sm"
-                  noBorder
-                  borderOnFocus={false}
-                />
-              )}
+              render={({ field: { value } }) => {
+                if (!data)
+                  return (
+                    <WrappedRemirrorRichTextEditor
+                      value={value}
+                      onJSONChange={(jsonValue) => setValue("description", jsonValue)}
+                      onHTMLChange={(htmlValue) => setValue("description_html", htmlValue)}
+                      placeholder="Write something..."
+                      customClassName="text-sm"
+                      noBorder
+                      borderOnFocus={false}
+                      ref={editorRef}
+                    />
+                  );
+                else if (!value || !watch("description_html"))
+                  return (
+                    <div className="h-32 w-full flex items-center justify-center text-brand-secondary text-sm" />
+                  );
+
+                return (
+                  <RemirrorRichTextEditor
+                    value={
+                      value && value !== "" && Object.keys(value).length > 0
+                        ? value
+                        : watch("description_html") && watch("description_html") !== ""
+                        ? watch("description_html")
+                        : { type: "doc", content: [{ type: "paragraph" }] }
+                    }
+                    onJSONChange={(jsonValue) => setValue("description", jsonValue)}
+                    onHTMLChange={(htmlValue) => setValue("description_html", htmlValue)}
+                    placeholder="Write something..."
+                    customClassName="text-sm"
+                    noBorder
+                    borderOnFocus={false}
+                  />
+                );
+              }}
             />
             <div className="m-2 mt-6 flex">
               <button
diff --git a/apps/app/components/rich-text-editor/index.tsx b/apps/app/components/rich-text-editor/index.tsx
index 59cbda720..874f7da47 100644
--- a/apps/app/components/rich-text-editor/index.tsx
+++ b/apps/app/components/rich-text-editor/index.tsx
@@ -1,5 +1,6 @@
-import { useCallback, FC, useState, useEffect } from "react";
+import { useCallback, useState, useImperativeHandle } from "react";
 import { useRouter } from "next/router";
+
 import { InvalidContentHandler } from "remirror";
 import {
   BoldExtension,
@@ -27,14 +28,14 @@ import {
   EditorComponent,
   OnChangeJSON,
   OnChangeHTML,
+  FloatingToolbar,
+  FloatingWrapper,
 } from "@remirror/react";
 import { TableExtension } from "@remirror/extension-react-tables";
 // tlds
 import tlds from "tlds";
 // services
 import fileService from "services/file.service";
-// ui
-import { Spinner } from "components/ui";
 // components
 import { CustomFloatingToolbar } from "./toolbar/float-tool-tip";
 import { MentionAutoComplete } from "./mention-autocomplete";
@@ -53,12 +54,10 @@ export interface IRemirrorRichTextEditor {
   gptOption?: boolean;
   noBorder?: boolean;
   borderOnFocus?: boolean;
+  forwardedRef?: any;
 }
 
-// eslint-disable-next-line no-duplicate-imports
-import { FloatingWrapper, FloatingToolbar } from "@remirror/react";
-
-const RemirrorRichTextEditor: FC<IRemirrorRichTextEditor> = (props) => {
+const RemirrorRichTextEditor: React.FC<IRemirrorRichTextEditor> = (props) => {
   const {
     placeholder,
     mentions = [],
@@ -73,11 +72,10 @@ const RemirrorRichTextEditor: FC<IRemirrorRichTextEditor> = (props) => {
     gptOption = false,
     noBorder = false,
     borderOnFocus = true,
+    forwardedRef,
   } = props;
 
-  const [imageLoader, setImageLoader] = useState(false);
-  const [jsonValue, setJsonValue] = useState<any>();
-  const [htmlValue, setHtmlValue] = useState<any>();
+  const [disableToolbar, setDisableToolbar] = useState(false);
 
   const router = useRouter();
   const { workspaceSlug } = router.query;
@@ -91,15 +89,11 @@ const RemirrorRichTextEditor: FC<IRemirrorRichTextEditor> = (props) => {
   );
 
   const uploadImageHandler = (value: any): any => {
-    setImageLoader(true);
-
     try {
       const formData = new FormData();
       formData.append("asset", value[0].file);
       formData.append("attributes", JSON.stringify({}));
 
-      setImageLoader(true);
-
       return [
         () =>
           new Promise(async (resolve, reject) => {
@@ -114,7 +108,6 @@ const RemirrorRichTextEditor: FC<IRemirrorRichTextEditor> = (props) => {
               width: "100%",
               src: imageUrl,
             });
-            setImageLoader(false);
           }),
       ];
     } catch {
@@ -136,15 +129,25 @@ const RemirrorRichTextEditor: FC<IRemirrorRichTextEditor> = (props) => {
       new CalloutExtension({ defaultType: "warn" }),
       new CodeBlockExtension(),
       new CodeExtension(),
-      new PlaceholderExtension({ placeholder: placeholder || "Enter text..." }),
+      new PlaceholderExtension({
+        placeholder: placeholder || "Enter text...",
+        emptyNodeClass: "empty-node",
+      }),
       new HistoryExtension(),
       new LinkExtension({
         autoLink: true,
         autoLinkAllowedTLDs: tlds,
+        selectTextOnClick: true,
+        defaultTarget: "_blank",
       }),
       new ImageExtension({
         enableResizing: true,
         uploadHandler: uploadImageHandler,
+        createPlaceholder() {
+          const div = document.createElement("div");
+          div.className = "w-full aspect-video bg-brand-surface-2 animate-pulse";
+          return div;
+        },
       }),
       new DropCursorExtension(),
       new StrikeExtension(),
@@ -156,38 +159,25 @@ const RemirrorRichTextEditor: FC<IRemirrorRichTextEditor> = (props) => {
       }),
       new TableExtension(),
     ],
-    content: !value || (typeof value === "object" && Object.keys(value).length === 0) ? "" : value,
+    content: value,
     selection: "start",
     stringHandler: "html",
     onError,
   });
 
-  const updateState = useCallback(
-    (value: any) => {
+  useImperativeHandle(forwardedRef, () => ({
+    clearEditor: () => {
+      manager.view.updateState(manager.createState({ content: "", selection: "start" }));
+    },
+    setEditorValue: (value: any) => {
       manager.view.updateState(
         manager.createState({
-          content:
-            !value || (typeof value === "object" && Object.keys(value).length === 0) ? "" : value,
-          selection: value === "" ? "start" : manager.view.state.selection,
+          content: value,
+          selection: "end",
         })
       );
     },
-    [manager]
-  );
-
-  useEffect(() => {
-    updateState(value);
-  }, [updateState, value]);
-
-  const handleJSONChange = (json: any) => {
-    setJsonValue(json);
-    onJSONChange(json);
-  };
-
-  const handleHTMLChange = (value: string) => {
-    setHtmlValue(value);
-    onHTMLChange(value);
-  };
+  }));
 
   return (
     <div className="relative">
@@ -195,50 +185,51 @@ const RemirrorRichTextEditor: FC<IRemirrorRichTextEditor> = (props) => {
         manager={manager}
         initialContent={state}
         classNames={[
-          `p-4 relative focus:outline-none rounded-md focus:border-brand-base ${
+          `p-3 relative focus:outline-none rounded-md focus:border-brand-base ${
             noBorder ? "" : "border border-brand-base"
           } ${
             borderOnFocus ? "focus:border border-brand-base" : "focus:border-0"
           } ${customClassName}`,
         ]}
         editable={editable}
-        onBlur={() => {
-          onBlur(jsonValue, htmlValue);
+        onBlur={(event) => {
+          const html = event.helpers.getHTML();
+          const json = event.helpers.getJSON();
+
+          setDisableToolbar(true);
+
+          onBlur(json, html);
         }}
+        onFocus={() => setDisableToolbar(false)}
       >
-        {(!value || value === "" || value?.content?.[0]?.content === undefined) &&
-          !(typeof value === "string" && value.includes("<")) &&
-          placeholder && (
-            <p className="pointer-events-none absolute top-4 left-4 text-sm text-brand-secondary">
-              {placeholder}
-            </p>
-          )}
-        <EditorComponent />
+        <div className="prose prose-brand max-w-full prose-p:my-1">
+          <EditorComponent />
+        </div>
 
-        {imageLoader && (
-          <div className="p-4">
-            <Spinner />
-          </div>
-        )}
-
-        {editable && (
+        {editable && !disableToolbar && (
           <FloatingWrapper
             positioner="always"
-            floatingLabel="Custom Floating Toolbar"
             renderOutsideEditor
+            floatingLabel="Custom Floating Toolbar"
           >
-            <FloatingToolbar className="z-[9999] overflow-hidden rounded">
-              <CustomFloatingToolbar gptOption={gptOption} editorState={state} />
+            <FloatingToolbar className="z-50 overflow-hidden rounded">
+              <CustomFloatingToolbar
+                gptOption={gptOption}
+                editorState={state}
+                setDisableToolbar={setDisableToolbar}
+              />
             </FloatingToolbar>
           </FloatingWrapper>
         )}
 
         <MentionAutoComplete mentions={mentions} tags={tags} />
-        {<OnChangeJSON onChange={handleJSONChange} />}
-        {<OnChangeHTML onChange={handleHTMLChange} />}
+        {<OnChangeJSON onChange={onJSONChange} />}
+        {<OnChangeHTML onChange={onHTMLChange} />}
       </Remirror>
     </div>
   );
 };
 
+RemirrorRichTextEditor.displayName = "RemirrorRichTextEditor";
+
 export default RemirrorRichTextEditor;
diff --git a/apps/app/components/rich-text-editor/toolbar/float-tool-tip.tsx b/apps/app/components/rich-text-editor/toolbar/float-tool-tip.tsx
index 731c7e8b4..e8e081370 100644
--- a/apps/app/components/rich-text-editor/toolbar/float-tool-tip.tsx
+++ b/apps/app/components/rich-text-editor/toolbar/float-tool-tip.tsx
@@ -1,3 +1,16 @@
+import React, {
+  ChangeEvent,
+  HTMLProps,
+  KeyboardEvent,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+
+import { createMarkPositioner, LinkExtension, ShortcutHandlerProps } from "remirror/extensions";
 // buttons
 import {
   ToggleBoldButton,
@@ -9,60 +22,295 @@ import {
   ToggleCodeButton,
   ToggleHeadingButton,
   useActive,
+  CommandButton,
+  useAttrs,
+  useChainedCommands,
+  useCurrentSelection,
+  useExtensionEvent,
+  useUpdateReason,
 } from "@remirror/react";
 import { EditorState } from "remirror";
 
 type Props = {
   gptOption?: boolean;
   editorState: Readonly<EditorState>;
+  setDisableToolbar: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
-export const CustomFloatingToolbar: React.FC<Props> = ({ gptOption, editorState }) => {
-  const active = useActive();
+const useLinkShortcut = () => {
+  const [linkShortcut, setLinkShortcut] = useState<ShortcutHandlerProps | undefined>();
+  const [isEditing, setIsEditing] = useState(false);
+
+  useExtensionEvent(
+    LinkExtension,
+    "onShortcut",
+    useCallback(
+      (props) => {
+        if (!isEditing) {
+          setIsEditing(true);
+        }
+
+        return setLinkShortcut(props);
+      },
+      [isEditing]
+    )
+  );
+
+  return { linkShortcut, isEditing, setIsEditing };
+};
+
+const useFloatingLinkState = () => {
+  const chain = useChainedCommands();
+  const { isEditing, linkShortcut, setIsEditing } = useLinkShortcut();
+  const { to, empty } = useCurrentSelection();
+
+  const url = (useAttrs().link()?.href as string) ?? "";
+  const [href, setHref] = useState<string>(url);
+
+  // A positioner which only shows for links.
+  const linkPositioner = useMemo(() => createMarkPositioner({ type: "link" }), []);
+
+  const onRemove = useCallback(() => chain.removeLink().focus().run(), [chain]);
+
+  const updateReason = useUpdateReason();
+
+  useLayoutEffect(() => {
+    if (!isEditing) {
+      return;
+    }
+
+    if (updateReason.doc || updateReason.selection) {
+      setIsEditing(false);
+    }
+  }, [isEditing, setIsEditing, updateReason.doc, updateReason.selection]);
+
+  useEffect(() => {
+    setHref(url);
+  }, [url]);
+
+  const submitHref = useCallback(() => {
+    setIsEditing(false);
+    const range = linkShortcut ?? undefined;
+
+    if (href === "") {
+      chain.removeLink();
+    } else {
+      chain.updateLink({ href, auto: false }, range);
+    }
+
+    chain.focus(range?.to ?? to).run();
+  }, [setIsEditing, linkShortcut, chain, href, to]);
+
+  const cancelHref = useCallback(() => {
+    setIsEditing(false);
+  }, [setIsEditing]);
+
+  const clickEdit = useCallback(() => {
+    if (empty) {
+      chain.selectLink();
+    }
+
+    setIsEditing(true);
+  }, [chain, empty, setIsEditing]);
+
+  return useMemo(
+    () => ({
+      href,
+      setHref,
+      linkShortcut,
+      linkPositioner,
+      isEditing,
+      setIsEditing,
+      clickEdit,
+      onRemove,
+      submitHref,
+      cancelHref,
+    }),
+    [
+      href,
+      linkShortcut,
+      linkPositioner,
+      isEditing,
+      clickEdit,
+      onRemove,
+      submitHref,
+      cancelHref,
+      setIsEditing,
+    ]
+  );
+};
+
+const DelayAutoFocusInput = ({
+  autoFocus,
+  setDisableToolbar,
+  ...rest
+}: HTMLProps<HTMLInputElement> & {
+  setDisableToolbar: React.Dispatch<React.SetStateAction<boolean>>;
+}) => {
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (!autoFocus) {
+      return;
+    }
+
+    setDisableToolbar(false);
+
+    const frame = window.requestAnimationFrame(() => {
+      inputRef.current?.focus();
+    });
+
+    return () => {
+      window.cancelAnimationFrame(frame);
+    };
+  }, [autoFocus, setDisableToolbar]);
+
+  useEffect(() => {
+    setDisableToolbar(false);
+  }, [setDisableToolbar]);
 
   return (
-    <div className="z-[99999] flex items-center gap-y-2 divide-x divide-brand-base rounded border border-brand-base bg-brand-surface-2 p-1 px-0.5 shadow-md">
-      <div className="flex items-center gap-x-1 px-2">
-        <ToggleHeadingButton
-          attrs={{
-            level: 1,
-          }}
-        />
-        <ToggleHeadingButton
-          attrs={{
-            level: 2,
-          }}
-        />
-        <ToggleHeadingButton
-          attrs={{
-            level: 3,
-          }}
-        />
-      </div>
-      <div className="flex items-center gap-x-1 px-2">
-        <ToggleBoldButton />
-        <ToggleItalicButton />
-        <ToggleUnderlineButton />
-        <ToggleStrikeButton />
-      </div>
-      <div className="flex items-center gap-x-1 px-2">
-        <ToggleOrderedListButton />
-        <ToggleBulletListButton />
-      </div>
-      {gptOption && (
+    <>
+      <label htmlFor="link-input" className="text-sm">
+        Add Link
+      </label>
+      <input
+        ref={inputRef}
+        {...rest}
+        onKeyDown={(e) => {
+          if (rest.onKeyDown) rest.onKeyDown(e);
+          setDisableToolbar(false);
+        }}
+        className={`${rest.className} mt-1`}
+        onFocus={() => {
+          setDisableToolbar(false);
+        }}
+        onBlur={() => {
+          setDisableToolbar(true);
+        }}
+      />
+    </>
+  );
+};
+
+export const CustomFloatingToolbar: React.FC<Props> = ({
+  gptOption,
+  editorState,
+  setDisableToolbar,
+}) => {
+  const { isEditing, setIsEditing, clickEdit, onRemove, submitHref, href, setHref, cancelHref } =
+    useFloatingLinkState();
+
+  const active = useActive();
+  const activeLink = active.link();
+
+  const handleClickEdit = useCallback(() => {
+    clickEdit();
+  }, [clickEdit]);
+
+  return (
+    <div className="z-[99999] flex flex-col items-center gap-y-2 divide-x divide-y divide-brand-base rounded border border-brand-base bg-brand-surface-2 p-1 px-0.5 shadow-md">
+      <div className="flex items-center gap-y-2 divide-x divide-brand-base">
         <div className="flex items-center gap-x-1 px-2">
-          <button
-            type="button"
-            className="rounded py-1 px-1.5 text-xs hover:bg-brand-surface-1"
-            onClick={() => console.log(editorState.selection.$anchor.nodeBefore)}
-          >
-            AI
-          </button>
+          <ToggleHeadingButton
+            attrs={{
+              level: 1,
+            }}
+          />
+          <ToggleHeadingButton
+            attrs={{
+              level: 2,
+            }}
+          />
+          <ToggleHeadingButton
+            attrs={{
+              level: 3,
+            }}
+          />
+        </div>
+        <div className="flex items-center gap-x-1 px-2">
+          <ToggleBoldButton />
+          <ToggleItalicButton />
+          <ToggleUnderlineButton />
+          <ToggleStrikeButton />
+        </div>
+        <div className="flex items-center gap-x-1 px-2">
+          <ToggleOrderedListButton />
+          <ToggleBulletListButton />
+        </div>
+        {gptOption && (
+          <div className="flex items-center gap-x-1 px-2">
+            <button
+              type="button"
+              className="rounded py-1 px-1.5 text-xs hover:bg-brand-surface-1"
+              onClick={() => console.log(editorState.selection.$anchor.nodeBefore)}
+            >
+              AI
+            </button>
+          </div>
+        )}
+        <div className="flex items-center gap-x-1 px-2">
+          <ToggleCodeButton />
+        </div>
+        {activeLink ? (
+          <div className="flex items-center gap-x-1 px-2">
+            <CommandButton
+              commandName="openLink"
+              onSelect={() => {
+                window.open(href, "_blank");
+              }}
+              icon="externalLinkFill"
+              enabled
+            />
+            <CommandButton
+              commandName="updateLink"
+              onSelect={handleClickEdit}
+              icon="pencilLine"
+              enabled
+            />
+            <CommandButton commandName="removeLink" onSelect={onRemove} icon="linkUnlink" enabled />
+          </div>
+        ) : (
+          <CommandButton
+            commandName="updateLink"
+            onSelect={() => {
+              if (isEditing) {
+                setIsEditing(false);
+              } else {
+                handleClickEdit();
+              }
+            }}
+            icon="link"
+            enabled
+            active={isEditing}
+          />
+        )}
+      </div>
+
+      {isEditing && (
+        <div className="p-2 w-full">
+          <DelayAutoFocusInput
+            autoFocus
+            placeholder="Paste your link here..."
+            id="link-input"
+            setDisableToolbar={setDisableToolbar}
+            className="w-full px-2 py-0.5"
+            onChange={(e: ChangeEvent<HTMLInputElement>) => setHref(e.target.value)}
+            value={href}
+            onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {
+              const { code } = e;
+
+              if (code === "Enter") {
+                submitHref();
+              }
+
+              if (code === "Escape") {
+                cancelHref();
+              }
+            }}
+          />
         </div>
       )}
-      <div className="flex items-center gap-x-1 px-2">
-        <ToggleCodeButton />
-      </div>
     </div>
   );
 };
diff --git a/apps/app/hooks/use-reload-confirmation.tsx b/apps/app/hooks/use-reload-confirmation.tsx
new file mode 100644
index 000000000..cdaff7365
--- /dev/null
+++ b/apps/app/hooks/use-reload-confirmation.tsx
@@ -0,0 +1,28 @@
+import { useCallback, useEffect, useState } from "react";
+
+const useReloadConfirmations = (message?: string) => {
+  const [showAlert, setShowAlert] = useState(false);
+
+  const handleBeforeUnload = useCallback(
+    (event: BeforeUnloadEvent) => {
+      event.preventDefault();
+      event.returnValue = "";
+      return message ?? "Are you sure you want to leave?";
+    },
+    [message]
+  );
+
+  useEffect(() => {
+    if (!showAlert) {
+      window.removeEventListener("beforeunload", handleBeforeUnload);
+      return;
+    }
+
+    window.addEventListener("beforeunload", handleBeforeUnload);
+    return () => window.removeEventListener("beforeunload", handleBeforeUnload);
+  }, [handleBeforeUnload, showAlert]);
+
+  return { setShowAlert };
+};
+
+export default useReloadConfirmations;
diff --git a/apps/app/package.json b/apps/app/package.json
index 187e356ff..1b41309f8 100644
--- a/apps/app/package.json
+++ b/apps/app/package.json
@@ -19,6 +19,7 @@
     "@remirror/pm": "^2.0.3",
     "@remirror/react": "^2.0.24",
     "@sentry/nextjs": "^7.36.0",
+    "@tailwindcss/typography": "^0.5.9",
     "@types/lodash.debounce": "^4.0.7",
     "@types/react-datepicker": "^4.8.0",
     "axios": "^1.1.3",
@@ -61,7 +62,6 @@
     "eslint-config-next": "12.2.2",
     "postcss": "^8.4.14",
     "prettier": "^2.8.7",
-    "prettier-plugin-tailwindcss": "^0.2.7",
     "tailwindcss": "^3.1.6",
     "tsconfig": "*",
     "typescript": "4.7.4"
diff --git a/apps/app/styles/editor.css b/apps/app/styles/editor.css
index c9d58dfaf..c177dad6c 100644
--- a/apps/app/styles/editor.css
+++ b/apps/app/styles/editor.css
@@ -1,205 +1,59 @@
-.ProseMirror {
-  position: relative;
+.empty-node::after {
+  content: attr(data-placeholder);
+  color: #ccc;
+  font-style: italic;
+
+  position: absolute;
+  pointer-events: none;
+  top: 15px;
+  margin-left: 1px;
+  z-index: -1;
 }
 
 .ProseMirror {
+  position: relative;
   word-wrap: break-word;
   white-space: pre-wrap;
-  white-space: break-spaces;
-  -webkit-font-variant-ligatures: none;
-  font-variant-ligatures: none;
-  font-feature-settings: "liga" 0; /* the above doesn't seem to work in Edge */
-}
-
-.ProseMirror pre {
-  white-space: pre-wrap;
-}
-
-.ProseMirror li {
-  position: relative;
-}
-
-.ProseMirror-hideselection *::selection {
-  background: transparent;
-}
-.ProseMirror-hideselection *::-moz-selection {
-  background: transparent;
-}
-.ProseMirror-hideselection {
-  caret-color: transparent;
-}
-
-.ProseMirror-selectednode {
-  outline: 2px solid #8cf;
-}
-
-/* Make sure li selections wrap around markers */
-
-li.ProseMirror-selectednode {
+  -moz-tab-size: 4;
+  tab-size: 4;
+  -webkit-user-select: text;
+  -moz-user-select: text;
+  -ms-user-select: text;
+  user-select: text;
   outline: none;
-}
-
-li.ProseMirror-selectednode:after {
-  content: "";
-  position: absolute;
-  left: -32px;
-  right: -2px;
-  top: -2px;
-  bottom: -2px;
-  border: 2px solid #8cf;
-  pointer-events: none;
-}
-
-/* Protect against generic img rules */
-
-img.ProseMirror-separator {
-  display: inline !important;
-  border: none !important;
-  margin: 0 !important;
-}
-.ProseMirror-textblock-dropdown {
-  min-width: 3em;
-}
-
-.ProseMirror-menu {
-  margin: 0 -4px;
-  line-height: 1;
-}
-
-.ProseMirror-tooltip .ProseMirror-menu {
-  width: -webkit-fit-content;
-  width: fit-content;
-  white-space: pre;
-}
-
-.ProseMirror-menuitem {
-  margin-right: 3px;
-  display: inline-block;
-}
-
-.ProseMirror-menuseparator {
-  border-right: 1px solid #ddd;
-  margin-right: 3px;
-}
-
-.ProseMirror-menu-dropdown,
-.ProseMirror-menu-dropdown-menu {
-  font-size: 90%;
-  white-space: nowrap;
-}
-
-.ProseMirror-menu-dropdown {
-  vertical-align: 1px;
-  cursor: pointer;
-  position: relative;
-  padding-right: 15px;
-}
-
-.ProseMirror-menu-dropdown-wrap {
-  padding: 1px 0 1px 4px;
-  display: inline-block;
-  position: relative;
-}
-
-.ProseMirror-menu-dropdown:after {
-  content: "";
-  border-left: 4px solid transparent;
-  border-right: 4px solid transparent;
-  border-top: 4px solid currentColor;
-  opacity: 0.6;
-  position: absolute;
-  right: 4px;
-  top: calc(50% - 2px);
-}
-
-.ProseMirror-menu-dropdown-menu,
-.ProseMirror-menu-submenu {
-  position: absolute;
-  background: white;
-  color: #666;
-  border: 1px solid #aaa;
-  padding: 2px;
-}
-
-.ProseMirror-menu-dropdown-menu {
-  z-index: 15;
-  min-width: 6em;
-}
-
-.ProseMirror-menu-dropdown-item {
-  cursor: pointer;
-  padding: 2px 8px 2px 4px;
-}
-
-.ProseMirror-menu-dropdown-item:hover {
-  background: #f2f2f2;
-}
-
-.ProseMirror-menu-submenu-wrap {
-  position: relative;
-  margin-right: -4px;
-}
-
-.ProseMirror-menu-submenu-label:after {
-  content: "";
-  border-top: 4px solid transparent;
-  border-bottom: 4px solid transparent;
-  border-left: 4px solid currentColor;
-  opacity: 0.6;
-  position: absolute;
-  right: 4px;
-  top: calc(50% - 4px);
-}
-
-.ProseMirror-menu-submenu {
-  display: none;
-  min-width: 4em;
-  left: 100%;
-  top: -3px;
-}
-
-.ProseMirror-menu-active {
-  background: #eee;
-  border-radius: 4px;
-}
-
-.ProseMirror-menu-disabled {
-  opacity: 0.3;
-}
-
-.ProseMirror-menu-submenu-wrap:hover .ProseMirror-menu-submenu,
-.ProseMirror-menu-submenu-wrap-active .ProseMirror-menu-submenu {
-  display: block;
-}
-
-.ProseMirror-menubar {
-  border-top-left-radius: inherit;
-  border-top-right-radius: inherit;
-  position: relative;
-  min-height: 1em;
-  color: #666;
-  padding: 1px 6px;
-  top: 0;
-  left: 0;
-  right: 0;
-  border-bottom: 1px solid silver;
-  background: white;
-  z-index: 10;
+  cursor: text;
+  line-height: 1.2;
+  font-family: inherit;
+  font-size: 14px;
+  color: inherit;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
-  overflow: visible;
+  appearance: textfield;
+  -webkit-appearance: textfield;
+  -moz-appearance: textfield;
 }
 
 .ProseMirror-icon {
   display: inline-block;
   line-height: 0.8;
-  vertical-align: -2px; /* Compensate for padding */
-  padding: 2px 8px;
+  vertical-align: -2px;
+  color: #666;
   cursor: pointer;
+  margin: 0 3px;
+  padding: 3px 8px;
+  border-radius: 3px;
+  border: 1px solid transparent;
+  transition: background 50ms ease-in-out;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 }
 
 .ProseMirror-menu-disabled.ProseMirror-icon {
+  opacity: 0.3;
   cursor: default;
+  pointer-events: none;
 }
 
 .ProseMirror-icon svg {
@@ -210,149 +64,6 @@ img.ProseMirror-separator {
 .ProseMirror-icon span {
   vertical-align: text-top;
 }
-.ProseMirror-gapcursor {
-  display: none;
-  pointer-events: none;
-  position: absolute;
-}
-
-.ProseMirror-gapcursor:after {
-  content: "";
-  display: block;
-  position: absolute;
-  top: -2px;
-  width: 20px;
-  border-top: 1px solid black;
-  animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;
-}
-
-@keyframes ProseMirror-cursor-blink {
-  to {
-    visibility: hidden;
-  }
-}
-
-.ProseMirror-focused .ProseMirror-gapcursor {
-  display: block;
-}
-/* Add space around the hr to make clicking it easier */
-
-.ProseMirror-example-setup-style hr {
-  padding: 2px 10px;
-  border: none;
-  margin: 1em 0;
-}
-
-.ProseMirror-example-setup-style hr:after {
-  content: "";
-  display: block;
-  height: 1px;
-  background-color: silver;
-  line-height: 2px;
-}
-
-.ProseMirror ul,
-.ProseMirror ol {
-  padding-left: 30px;
-}
-
-.ProseMirror blockquote {
-  padding-left: 1em;
-  border-left: 3px solid #eee;
-  margin-left: 0;
-  margin-right: 0;
-}
-
-.ProseMirror-example-setup-style img {
-  cursor: default;
-}
-
-.ProseMirror-prompt {
-  background: white;
-  padding: 5px 10px 5px 15px;
-  border: 1px solid silver;
-  position: fixed;
-  border-radius: 3px;
-  z-index: 11;
-  box-shadow: -0.5px 2px 5px rgba(0, 0, 0, 0.2);
-}
-
-.ProseMirror-prompt h5 {
-  margin: 0;
-  font-weight: normal;
-  font-size: 100%;
-  color: #444;
-}
-
-.ProseMirror-prompt input[type="text"],
-.ProseMirror-prompt textarea {
-  background: #eee;
-  border: none;
-  outline: none;
-}
-
-.ProseMirror-prompt input[type="text"] {
-  padding: 0 4px;
-}
-
-.ProseMirror-prompt-close {
-  position: absolute;
-  left: 2px;
-  top: 1px;
-  color: #666;
-  border: none;
-  background: transparent;
-  padding: 0;
-}
-
-.ProseMirror-prompt-close:after {
-  content: "✕";
-  font-size: 12px;
-}
-
-.ProseMirror-invalid {
-  background: #ffc;
-  border: 1px solid #cc7;
-  border-radius: 4px;
-  padding: 5px 10px;
-  position: absolute;
-  min-width: 10em;
-}
-
-.ProseMirror-prompt-buttons {
-  margin-top: 5px;
-  display: none;
-}
-#editor,
-.editor {
-  background: white;
-  color: black;
-  background-clip: padding-box;
-  border-radius: 4px;
-  border: 2px solid rgba(0, 0, 0, 0.2);
-  padding: 5px 0;
-  margin-bottom: 23px;
-}
-
-.ProseMirror p:first-child,
-.ProseMirror h1:first-child,
-.ProseMirror h2:first-child,
-.ProseMirror h3:first-child,
-.ProseMirror h4:first-child,
-.ProseMirror h5:first-child,
-.ProseMirror h6:first-child {
-  margin-top: 10px;
-}
-
-.ProseMirror {
-  padding: 8px 8px 4px 14px;
-  line-height: 1.2;
-  outline: none;
-}
-
-.ProseMirror p {
-  margin-bottom: 1em;
-}
 
 .remirror-editor-wrapper .remirror-editor {
   min-height: 150px;
@@ -371,76 +82,16 @@ img.ProseMirror-separator {
   padding-top: 8px;
 }
 
-/* heading styling */
-.remirror-editor-wrapper h1 {
-  font-size: 2rem;
-}
-
-.remirror-editor-wrapper h2 {
-  font-size: 1.5rem;
-}
-
-.remirror-editor-wrapper h3 {
-  font-size: 1.17rem;
-}
-/* end heading styling */
-
-/* list styling */
-.remirror-editor-wrapper ul {
-  list-style-type: disc;
-}
-
-.remirror-editor-wrapper ol {
-  list-style-type: decimal;
-}
-/* end list styling */
-
-/* table styling */
-.remirror-editor-wrapper table {
-  border-collapse: collapse;
-}
-
-.remirror-editor-wrapper table td {
-  border: 1px solid #000;
-}
-/* end table styling */
-
-/* link styling */
-.remirror-floating-popover {
-  z-index: 20 !important;
-}
-
-.remirror-floating-popover input {
-  font-size: 0.75rem;
-  border-radius: 5px;
-  padding: 5px;
-  border: 1px solid #a8a6a6;
-  box-shadow: 1px 1px 5px #c0bebe;
-  outline: none;
-}
-
-.remirror-editor-wrapper a {
-  color: blue;
-  text-decoration: underline;
-}
-/* end link styling */
-
-/* format buttons styling */
 .MuiButtonBase-root {
   border: none !important;
   border-radius: 0.25rem !important;
   padding: 0.25rem !important;
 }
 
-.MuiButtonBase-root:hover {
-  background-color: rgb(229 231 235);
-}
-
 .MuiButtonBase-root svg {
-  fill: #000 !important;
+  fill: rgb(var(--color-text-base)) !important;
 }
 
-.MuiButtonBase-root.Mui-selected {
-  background-color: rgb(229 231 235) !important;
+.MuiButtonBase-root.Mui-selected, .MuiButtonBase-root:hover {
+  background-color: rgb(var(--color-bg-base)) !important;
 }
-/* end format buttons styling */
diff --git a/apps/app/tailwind.config.js b/apps/app/tailwind.config.js
index 3e2a2da4b..cc9863e90 100644
--- a/apps/app/tailwind.config.js
+++ b/apps/app/tailwind.config.js
@@ -6,6 +6,10 @@ function withOpacity(variableName) {
   };
 }
 
+function convertToRGB(variableName) {
+  return `rgb(var(${variableName}))`;
+}
+
 module.exports = {
   darkMode: "class",
   content: ["./pages/**/*.tsx", "./components/**/*.tsx", "./layouts/**/*.tsx", "./ui/**/*.tsx"],
@@ -49,9 +53,32 @@ module.exports = {
           "100%": { right: "0" },
         },
       },
+      typography: ({ theme }) => ({
+        brand: {
+          css: {
+            "--tw-prose-body": `${convertToRGB("--color-text-base")}`,
+            "--tw-prose-p": `${convertToRGB("--color-text-base")}`,
+            "--tw-prose-headings": `${convertToRGB("--color-text-base")}`,
+            "--tw-prose-lead": `${convertToRGB("--color-text-base")}`,
+            "--tw-prose-links": `${convertToRGB("--color-accent")}`,
+            "--tw-prose-bold": `${convertToRGB("--color-text-base")}`,
+            "--tw-prose-counters": `${convertToRGB("--color-text-base")}`,
+            "--tw-prose-bullets": `${convertToRGB("--color-text-base")}`,
+            "--tw-prose-hr": `${convertToRGB("--color-text-base")}`,
+            "--tw-prose-quotes": `${convertToRGB("--color-text-base")}`,
+            "--tw-prose-quote-borders": `${convertToRGB("--color-border")}`,
+            "--tw-prose-code": `${convertToRGB("--color-text-base")}`,
+            "--tw-prose-pre-code": `${convertToRGB("--color-text-base")}`,
+            "--tw-prose-pre-bg": `${convertToRGB("--color-bg-base")}`,
+            "--tw-prose-th-borders": `${convertToRGB("--color-border")}`,
+            "--tw-prose-td-borders": `${convertToRGB("--color-border")}`,
+          },
+        },
+      }),
     },
     fontFamily: {
       custom: ["Inter", "sans-serif"],
     },
   },
+  plugins: [require("@tailwindcss/typography")],
 };
diff --git a/yarn.lock b/yarn.lock
index 65c491ddc..18aeae065 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,17 +2,22 @@
 # yarn lockfile v1
 
 
-"@ampproject/remapping@^2.1.0":
-  version "2.2.0"
-  resolved "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.0.tgz"
-  integrity sha512-qRmjj8nj9qmLTQXXmaR1cck3UXSRMPrbsLJAasZpF+t3riI71BXed5ebIOYwQntykeZuhjsdweEc9BxH5Jc26w==
+"@alloc/quick-lru@^5.2.0":
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/@alloc/quick-lru/-/quick-lru-5.2.0.tgz#7bf68b20c0a350f936915fcae06f58e32007ce30"
+  integrity sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==
+
+"@ampproject/remapping@^2.2.0":
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.2.1.tgz#99e8e11851128b8702cd57c33684f1d0f260b630"
+  integrity sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==
   dependencies:
-    "@jridgewell/gen-mapping" "^0.1.0"
+    "@jridgewell/gen-mapping" "^0.3.0"
     "@jridgewell/trace-mapping" "^0.3.9"
 
 "@apideck/better-ajv-errors@^0.3.1":
   version "0.3.6"
-  resolved "https://registry.npmjs.org/@apideck/better-ajv-errors/-/better-ajv-errors-0.3.6.tgz"
+  resolved "https://registry.yarnpkg.com/@apideck/better-ajv-errors/-/better-ajv-errors-0.3.6.tgz#957d4c28e886a64a8141f7522783be65733ff097"
   integrity sha512-P+ZygBLZtkp0qqOAJJVX4oX/sFo5JR3eBWwwuqHHhK0GIgQOKWrAfiAaWX0aArHkRWHMuggFEgAZNxVPwPZYaA==
   dependencies:
     json-schema "^0.4.0"
@@ -21,104 +26,106 @@
 
 "@babel/code-frame@7.12.11":
   version "7.12.11"
-  resolved "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.11.tgz"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.12.11.tgz#f4ad435aa263db935b8f10f2c552d23fb716a63f"
   integrity sha512-Zt1yodBx1UcyiePMSkWnU4hPqhwq7hGi2nFL1LeA3EUl+q2LQx16MISgJ0+z7dnmgvP9QtIleuETGOiOH1RcIw==
   dependencies:
     "@babel/highlight" "^7.10.4"
 
-"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.18.6.tgz"
-  integrity sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q==
+"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.18.6", "@babel/code-frame@^7.21.4":
+  version "7.21.4"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.21.4.tgz#d0fa9e4413aca81f2b23b9442797bda1826edb39"
+  integrity sha512-LYvhNKfwWSPpocw8GI7gpK2nq3HSDuEPC/uSYaALSJu9xjsalaaYFOq0Pwt5KmVqwEbZlDu81aLXwBOmD/Fv9g==
   dependencies:
     "@babel/highlight" "^7.18.6"
 
-"@babel/compat-data@^7.17.7", "@babel/compat-data@^7.20.1", "@babel/compat-data@^7.20.5":
-  version "7.20.14"
-  resolved "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.20.14.tgz"
-  integrity sha512-0YpKHD6ImkWMEINCyDAD0HLLUH/lPCefG8ld9it8DJB2wnApraKuhgYTvTY1z7UFIfBTGy5LwncZ+5HWWGbhFw==
+"@babel/compat-data@^7.17.7", "@babel/compat-data@^7.20.5", "@babel/compat-data@^7.21.5":
+  version "7.21.7"
+  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.21.7.tgz#61caffb60776e49a57ba61a88f02bedd8714f6bc"
+  integrity sha512-KYMqFYTaenzMK4yUtf4EW9wc4N9ef80FsbMtkwool5zpwl4YrT1SdWYSTRcT94KO4hannogdS+LxY7L+arP3gA==
 
-"@babel/core@^7.11.1":
-  version "7.20.12"
-  resolved "https://registry.npmjs.org/@babel/core/-/core-7.20.12.tgz"
-  integrity sha512-XsMfHovsUYHFMdrIHkZphTN/2Hzzi78R08NuHfDBehym2VsPDL6Zn/JAD/JQdnRvbSsbQc4mVaU1m6JgtTEElg==
+"@babel/core@^7.11.1", "@babel/core@^7.20.2":
+  version "7.21.8"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.21.8.tgz#2a8c7f0f53d60100ba4c32470ba0281c92aa9aa4"
+  integrity sha512-YeM22Sondbo523Sz0+CirSPnbj9bG3P0CdHcBZdqUuaeOaYEFbOLoGU7lebvGP6P5J/WE9wOn7u7C4J9HvS1xQ==
   dependencies:
-    "@ampproject/remapping" "^2.1.0"
-    "@babel/code-frame" "^7.18.6"
-    "@babel/generator" "^7.20.7"
-    "@babel/helper-compilation-targets" "^7.20.7"
-    "@babel/helper-module-transforms" "^7.20.11"
-    "@babel/helpers" "^7.20.7"
-    "@babel/parser" "^7.20.7"
+    "@ampproject/remapping" "^2.2.0"
+    "@babel/code-frame" "^7.21.4"
+    "@babel/generator" "^7.21.5"
+    "@babel/helper-compilation-targets" "^7.21.5"
+    "@babel/helper-module-transforms" "^7.21.5"
+    "@babel/helpers" "^7.21.5"
+    "@babel/parser" "^7.21.8"
     "@babel/template" "^7.20.7"
-    "@babel/traverse" "^7.20.12"
-    "@babel/types" "^7.20.7"
+    "@babel/traverse" "^7.21.5"
+    "@babel/types" "^7.21.5"
     convert-source-map "^1.7.0"
     debug "^4.1.0"
     gensync "^1.0.0-beta.2"
     json5 "^2.2.2"
     semver "^6.3.0"
 
-"@babel/generator@^7.20.7":
-  version "7.20.14"
-  resolved "https://registry.npmjs.org/@babel/generator/-/generator-7.20.14.tgz"
-  integrity sha512-AEmuXHdcD3A52HHXxaTmYlb8q/xMEhoRP67B3T4Oq7lbmSoqroMZzjnGj3+i1io3pdnF8iBYVu4Ilj+c4hBxYg==
+"@babel/generator@^7.20.4", "@babel/generator@^7.21.5":
+  version "7.21.5"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.21.5.tgz#c0c0e5449504c7b7de8236d99338c3e2a340745f"
+  integrity sha512-SrKK/sRv8GesIW1bDagf9cCG38IOMYZusoe1dfg0D8aiUe3Amvoj1QtjTPAWcfrZFvIwlleLb0gxzQidL9w14w==
   dependencies:
-    "@babel/types" "^7.20.7"
+    "@babel/types" "^7.21.5"
     "@jridgewell/gen-mapping" "^0.3.2"
+    "@jridgewell/trace-mapping" "^0.3.17"
     jsesc "^2.5.1"
 
 "@babel/helper-annotate-as-pure@^7.18.6":
   version "7.18.6"
-  resolved "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.18.6.tgz"
+  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.18.6.tgz#eaa49f6f80d5a33f9a5dd2276e6d6e451be0a6bb"
   integrity sha512-duORpUiYrEpzKIop6iNbjnwKLAKnJ47csTyRACyEmWj0QdUrm5aqNJGHSSEQSUAvNW0ojX0dOmK9dZduvkfeXA==
   dependencies:
     "@babel/types" "^7.18.6"
 
 "@babel/helper-builder-binary-assignment-operator-visitor@^7.18.6":
-  version "7.18.9"
-  resolved "https://registry.npmjs.org/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.18.9.tgz"
-  integrity sha512-yFQ0YCHoIqarl8BCRwBL8ulYUaZpz3bNsA7oFepAzee+8/+ImtADXNOmO5vJvsPff3qi+hvpkY/NYBTrBQgdNw==
+  version "7.21.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.21.5.tgz#817f73b6c59726ab39f6ba18c234268a519e5abb"
+  integrity sha512-uNrjKztPLkUk7bpCNC0jEKDJzzkvel/W+HguzbN8krA+LPfC1CEobJEvAvGka2A/M+ViOqXdcRL0GqPUJSjx9g==
   dependencies:
-    "@babel/helper-explode-assignable-expression" "^7.18.6"
-    "@babel/types" "^7.18.9"
+    "@babel/types" "^7.21.5"
 
-"@babel/helper-compilation-targets@^7.17.7", "@babel/helper-compilation-targets@^7.18.9", "@babel/helper-compilation-targets@^7.20.0", "@babel/helper-compilation-targets@^7.20.7":
-  version "7.20.7"
-  resolved "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.20.7.tgz"
-  integrity sha512-4tGORmfQcrc+bvrjb5y3dG9Mx1IOZjsHqQVUz7XCNHO+iTmqxWnVg3KRygjGmpRLJGdQSKuvFinbIb0CnZwHAQ==
+"@babel/helper-compilation-targets@^7.17.7", "@babel/helper-compilation-targets@^7.18.9", "@babel/helper-compilation-targets@^7.20.7", "@babel/helper-compilation-targets@^7.21.5":
+  version "7.21.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.21.5.tgz#631e6cc784c7b660417421349aac304c94115366"
+  integrity sha512-1RkbFGUKex4lvsB9yhIfWltJM5cZKUftB2eNajaDv3dCMEp49iBG0K14uH8NnX9IPux2+mK7JGEOB0jn48/J6w==
   dependencies:
-    "@babel/compat-data" "^7.20.5"
-    "@babel/helper-validator-option" "^7.18.6"
+    "@babel/compat-data" "^7.21.5"
+    "@babel/helper-validator-option" "^7.21.0"
     browserslist "^4.21.3"
     lru-cache "^5.1.1"
     semver "^6.3.0"
 
-"@babel/helper-create-class-features-plugin@^7.18.6", "@babel/helper-create-class-features-plugin@^7.20.5", "@babel/helper-create-class-features-plugin@^7.20.7":
-  version "7.20.12"
-  resolved "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.20.12.tgz"
-  integrity sha512-9OunRkbT0JQcednL0UFvbfXpAsUXiGjUk0a7sN8fUXX7Mue79cUSMjHGDRRi/Vz9vYlpIhLV5fMD5dKoMhhsNQ==
+"@babel/helper-create-class-features-plugin@^7.18.6", "@babel/helper-create-class-features-plugin@^7.21.0":
+  version "7.21.8"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.21.8.tgz#205b26330258625ef8869672ebca1e0dee5a0f02"
+  integrity sha512-+THiN8MqiH2AczyuZrnrKL6cAxFRRQDKW9h1YkBvbgKmAm6mwiacig1qT73DHIWMGo40GRnsEfN3LA+E6NtmSw==
   dependencies:
     "@babel/helper-annotate-as-pure" "^7.18.6"
-    "@babel/helper-environment-visitor" "^7.18.9"
-    "@babel/helper-function-name" "^7.19.0"
-    "@babel/helper-member-expression-to-functions" "^7.20.7"
+    "@babel/helper-environment-visitor" "^7.21.5"
+    "@babel/helper-function-name" "^7.21.0"
+    "@babel/helper-member-expression-to-functions" "^7.21.5"
     "@babel/helper-optimise-call-expression" "^7.18.6"
-    "@babel/helper-replace-supers" "^7.20.7"
+    "@babel/helper-replace-supers" "^7.21.5"
     "@babel/helper-skip-transparent-expression-wrappers" "^7.20.0"
     "@babel/helper-split-export-declaration" "^7.18.6"
+    semver "^6.3.0"
 
 "@babel/helper-create-regexp-features-plugin@^7.18.6", "@babel/helper-create-regexp-features-plugin@^7.20.5":
-  version "7.20.5"
-  resolved "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.20.5.tgz"
-  integrity sha512-m68B1lkg3XDGX5yCvGO0kPx3v9WIYLnzjKfPcQiwntEQa5ZeRkPmo2X/ISJc8qxWGfwUr+kvZAeEzAwLec2r2w==
+  version "7.21.8"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.21.8.tgz#a7886f61c2e29e21fd4aaeaf1e473deba6b571dc"
+  integrity sha512-zGuSdedkFtsFHGbexAvNuipg1hbtitDLo2XE8/uf6Y9sOQV1xsYX/2pNbtedp/X0eU1pIt+kGvaqHCowkRbS5g==
   dependencies:
     "@babel/helper-annotate-as-pure" "^7.18.6"
-    regexpu-core "^5.2.1"
+    regexpu-core "^5.3.1"
+    semver "^6.3.0"
 
 "@babel/helper-define-polyfill-provider@^0.3.3":
   version "0.3.3"
-  resolved "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.3.3.tgz"
+  resolved "https://registry.yarnpkg.com/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.3.3.tgz#8612e55be5d51f0cd1f36b4a5a83924e89884b7a"
   integrity sha512-z5aQKU4IzbqCC1XH0nAqfsFLMVSo22SBKUc0BxGrLkolTdPTructy0ToNnlO2zA4j9Q/7pjMZf0DSY+DSTYzww==
   dependencies:
     "@babel/helper-compilation-targets" "^7.17.7"
@@ -128,76 +135,69 @@
     resolve "^1.14.2"
     semver "^6.1.2"
 
-"@babel/helper-environment-visitor@^7.18.9":
-  version "7.18.9"
-  resolved "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.18.9.tgz"
-  integrity sha512-3r/aACDJ3fhQ/EVgFy0hpj8oHyHpQc+LPtJoY9SzTThAsStm4Ptegq92vqKoE3vD706ZVFWITnMnxucw+S9Ipg==
+"@babel/helper-environment-visitor@^7.18.9", "@babel/helper-environment-visitor@^7.21.5":
+  version "7.21.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.21.5.tgz#c769afefd41d171836f7cb63e295bedf689d48ba"
+  integrity sha512-IYl4gZ3ETsWocUWgsFZLM5i1BYx9SoemminVEXadgLBa9TdeorzgLKm8wWLA6J1N/kT3Kch8XIk1laNzYoHKvQ==
 
-"@babel/helper-explode-assignable-expression@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.npmjs.org/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.18.6.tgz"
-  integrity sha512-eyAYAsQmB80jNfg4baAtLeWAQHfHFiR483rzFK+BhETlGZaQC9bsfrugfXDCbRHLQbIA7U5NxhhOxN7p/dWIcg==
+"@babel/helper-function-name@^7.18.9", "@babel/helper-function-name@^7.19.0", "@babel/helper-function-name@^7.21.0":
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.21.0.tgz#d552829b10ea9f120969304023cd0645fa00b1b4"
+  integrity sha512-HfK1aMRanKHpxemaY2gqBmL04iAPOPRj7DxtNbiDOrJK+gdwkiNRVpCpUJYbUT+aZyemKN8brqTOxzCaG6ExRg==
   dependencies:
-    "@babel/types" "^7.18.6"
-
-"@babel/helper-function-name@^7.18.9", "@babel/helper-function-name@^7.19.0":
-  version "7.19.0"
-  resolved "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.19.0.tgz"
-  integrity sha512-WAwHBINyrpqywkUH0nTnNgI5ina5TFn85HKS0pbPDfxFfhyR/aNQEn4hGi1P1JyT//I0t4OgXUlofzWILRvS5w==
-  dependencies:
-    "@babel/template" "^7.18.10"
-    "@babel/types" "^7.19.0"
+    "@babel/template" "^7.20.7"
+    "@babel/types" "^7.21.0"
 
 "@babel/helper-hoist-variables@^7.18.6":
   version "7.18.6"
-  resolved "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.18.6.tgz"
+  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.18.6.tgz#d4d2c8fb4baeaa5c68b99cc8245c56554f926678"
   integrity sha512-UlJQPkFqFULIcyW5sbzgbkxn2FKRgwWiRexcuaR8RNJRy8+LLveqPjwZV/bwrLZCN0eUHD/x8D0heK1ozuoo6Q==
   dependencies:
     "@babel/types" "^7.18.6"
 
-"@babel/helper-member-expression-to-functions@^7.20.7":
-  version "7.20.7"
-  resolved "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.20.7.tgz"
-  integrity sha512-9J0CxJLq315fEdi4s7xK5TQaNYjZw+nDVpVqr1axNGKzdrdwYBD5b4uKv3n75aABG0rCCTK8Im8Ww7eYfMrZgw==
+"@babel/helper-member-expression-to-functions@^7.21.5":
+  version "7.21.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.21.5.tgz#3b1a009af932e586af77c1030fba9ee0bde396c0"
+  integrity sha512-nIcGfgwpH2u4n9GG1HpStW5Ogx7x7ekiFHbjjFRKXbn5zUvqO9ZgotCO4x1aNbKn/x/xOUaXEhyNHCwtFCpxWg==
   dependencies:
-    "@babel/types" "^7.20.7"
+    "@babel/types" "^7.21.5"
 
-"@babel/helper-module-imports@^7.10.4", "@babel/helper-module-imports@^7.16.7", "@babel/helper-module-imports@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.18.6.tgz"
-  integrity sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==
+"@babel/helper-module-imports@^7.10.4", "@babel/helper-module-imports@^7.16.7", "@babel/helper-module-imports@^7.18.6", "@babel/helper-module-imports@^7.21.4":
+  version "7.21.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.21.4.tgz#ac88b2f76093637489e718a90cec6cf8a9b029af"
+  integrity sha512-orajc5T2PsRYUN3ZryCEFeMDYwyw09c/pZeaQEZPH0MpKzSvn3e0uXsDBu3k03VI+9DBiRo+l22BfKTpKwa/Wg==
   dependencies:
-    "@babel/types" "^7.18.6"
+    "@babel/types" "^7.21.4"
 
-"@babel/helper-module-transforms@^7.18.6", "@babel/helper-module-transforms@^7.20.11":
-  version "7.20.11"
-  resolved "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.20.11.tgz"
-  integrity sha512-uRy78kN4psmji1s2QtbtcCSaj/LILFDp0f/ymhpQH5QY3nljUZCaNWz9X1dEj/8MBdBEFECs7yRhKn8i7NjZgg==
+"@babel/helper-module-transforms@^7.18.6", "@babel/helper-module-transforms@^7.20.11", "@babel/helper-module-transforms@^7.21.5":
+  version "7.21.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.21.5.tgz#d937c82e9af68d31ab49039136a222b17ac0b420"
+  integrity sha512-bI2Z9zBGY2q5yMHoBvJ2a9iX3ZOAzJPm7Q8Yz6YeoUjU/Cvhmi2G4QyTNyPBqqXSgTjUxRg3L0xV45HvkNWWBw==
   dependencies:
-    "@babel/helper-environment-visitor" "^7.18.9"
-    "@babel/helper-module-imports" "^7.18.6"
-    "@babel/helper-simple-access" "^7.20.2"
+    "@babel/helper-environment-visitor" "^7.21.5"
+    "@babel/helper-module-imports" "^7.21.4"
+    "@babel/helper-simple-access" "^7.21.5"
     "@babel/helper-split-export-declaration" "^7.18.6"
     "@babel/helper-validator-identifier" "^7.19.1"
     "@babel/template" "^7.20.7"
-    "@babel/traverse" "^7.20.10"
-    "@babel/types" "^7.20.7"
+    "@babel/traverse" "^7.21.5"
+    "@babel/types" "^7.21.5"
 
 "@babel/helper-optimise-call-expression@^7.18.6":
   version "7.18.6"
-  resolved "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.18.6.tgz"
+  resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.18.6.tgz#9369aa943ee7da47edab2cb4e838acf09d290ffe"
   integrity sha512-HP59oD9/fEHQkdcbgFCnbmgH5vIQTJbxh2yf+CdM89/glUNnuzr87Q8GIjGEnOktTROemO0Pe0iPAYbqZuOUiA==
   dependencies:
     "@babel/types" "^7.18.6"
 
-"@babel/helper-plugin-utils@^7.0.0", "@babel/helper-plugin-utils@^7.10.4", "@babel/helper-plugin-utils@^7.12.13", "@babel/helper-plugin-utils@^7.14.5", "@babel/helper-plugin-utils@^7.16.7", "@babel/helper-plugin-utils@^7.18.6", "@babel/helper-plugin-utils@^7.18.9", "@babel/helper-plugin-utils@^7.19.0", "@babel/helper-plugin-utils@^7.20.2", "@babel/helper-plugin-utils@^7.8.0", "@babel/helper-plugin-utils@^7.8.3":
-  version "7.20.2"
-  resolved "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.20.2.tgz"
-  integrity sha512-8RvlJG2mj4huQ4pZ+rU9lqKi9ZKiRmuvGuM2HlWmkmgOhbs6zEAw6IEiJ5cQqGbDzGZOhwuOQNtZMi/ENLjZoQ==
+"@babel/helper-plugin-utils@^7.0.0", "@babel/helper-plugin-utils@^7.10.4", "@babel/helper-plugin-utils@^7.12.13", "@babel/helper-plugin-utils@^7.14.5", "@babel/helper-plugin-utils@^7.16.7", "@babel/helper-plugin-utils@^7.18.6", "@babel/helper-plugin-utils@^7.18.9", "@babel/helper-plugin-utils@^7.19.0", "@babel/helper-plugin-utils@^7.20.2", "@babel/helper-plugin-utils@^7.21.5", "@babel/helper-plugin-utils@^7.8.0", "@babel/helper-plugin-utils@^7.8.3":
+  version "7.21.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.21.5.tgz#345f2377d05a720a4e5ecfa39cbf4474a4daed56"
+  integrity sha512-0WDaIlXKOX/3KfBK/dwP1oQGiPh6rjMkT7HIRv7i5RR2VUMwrx5ZL0dwBkKx7+SW1zwNdgjHd34IMk5ZjTeHVg==
 
 "@babel/helper-remap-async-to-generator@^7.18.9":
   version "7.18.9"
-  resolved "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.18.9.tgz"
+  resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.18.9.tgz#997458a0e3357080e54e1d79ec347f8a8cd28519"
   integrity sha512-dI7q50YKd8BAv3VEfgg7PS7yD3Rtbi2J1XMXaalXO0W0164hYLnh8zpjRS0mte9MfVp/tltvr/cfdXPvJr1opA==
   dependencies:
     "@babel/helper-annotate-as-pure" "^7.18.6"
@@ -205,57 +205,57 @@
     "@babel/helper-wrap-function" "^7.18.9"
     "@babel/types" "^7.18.9"
 
-"@babel/helper-replace-supers@^7.18.6", "@babel/helper-replace-supers@^7.20.7":
-  version "7.20.7"
-  resolved "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.20.7.tgz"
-  integrity sha512-vujDMtB6LVfNW13jhlCrp48QNslK6JXi7lQG736HVbHz/mbf4Dc7tIRh1Xf5C0rF7BP8iiSxGMCmY6Ci1ven3A==
+"@babel/helper-replace-supers@^7.18.6", "@babel/helper-replace-supers@^7.20.7", "@babel/helper-replace-supers@^7.21.5":
+  version "7.21.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.21.5.tgz#a6ad005ba1c7d9bc2973dfde05a1bba7065dde3c"
+  integrity sha512-/y7vBgsr9Idu4M6MprbOVUfH3vs7tsIfnVWv/Ml2xgwvyH6LTngdfbf5AdsKwkJy4zgy1X/kuNrEKvhhK28Yrg==
   dependencies:
-    "@babel/helper-environment-visitor" "^7.18.9"
-    "@babel/helper-member-expression-to-functions" "^7.20.7"
+    "@babel/helper-environment-visitor" "^7.21.5"
+    "@babel/helper-member-expression-to-functions" "^7.21.5"
     "@babel/helper-optimise-call-expression" "^7.18.6"
     "@babel/template" "^7.20.7"
-    "@babel/traverse" "^7.20.7"
-    "@babel/types" "^7.20.7"
+    "@babel/traverse" "^7.21.5"
+    "@babel/types" "^7.21.5"
 
-"@babel/helper-simple-access@^7.20.2":
-  version "7.20.2"
-  resolved "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.20.2.tgz"
-  integrity sha512-+0woI/WPq59IrqDYbVGfshjT5Dmk/nnbdpcF8SnMhhXObpTq2KNBdLFRFrkVdbDOyUmHBCxzm5FHV1rACIkIbA==
+"@babel/helper-simple-access@^7.21.5":
+  version "7.21.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.21.5.tgz#d697a7971a5c39eac32c7e63c0921c06c8a249ee"
+  integrity sha512-ENPDAMC1wAjR0uaCUwliBdiSl1KBJAVnMTzXqi64c2MG8MPR6ii4qf7bSXDqSFbr4W6W028/rf5ivoHop5/mkg==
   dependencies:
-    "@babel/types" "^7.20.2"
+    "@babel/types" "^7.21.5"
 
 "@babel/helper-skip-transparent-expression-wrappers@^7.20.0":
   version "7.20.0"
-  resolved "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.20.0.tgz"
+  resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.20.0.tgz#fbe4c52f60518cab8140d77101f0e63a8a230684"
   integrity sha512-5y1JYeNKfvnT8sZcK9DVRtpTbGiomYIHviSP3OQWmDPU3DeH4a1ZlT/N2lyQ5P8egjcRaT/Y9aNqUxK0WsnIIg==
   dependencies:
     "@babel/types" "^7.20.0"
 
 "@babel/helper-split-export-declaration@^7.18.6":
   version "7.18.6"
-  resolved "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.18.6.tgz"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.18.6.tgz#7367949bc75b20c6d5a5d4a97bba2824ae8ef075"
   integrity sha512-bde1etTx6ZyTmobl9LLMMQsaizFVZrquTEHOqKeQESMKo4PlObf+8+JA25ZsIpZhT/WEd39+vOdLXAFG/nELpA==
   dependencies:
     "@babel/types" "^7.18.6"
 
-"@babel/helper-string-parser@^7.19.4":
-  version "7.19.4"
-  resolved "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.19.4.tgz"
-  integrity sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==
+"@babel/helper-string-parser@^7.21.5":
+  version "7.21.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.21.5.tgz#2b3eea65443c6bdc31c22d037c65f6d323b6b2bd"
+  integrity sha512-5pTUx3hAJaZIdW99sJ6ZUUgWq/Y+Hja7TowEnLNMm1VivRgZQL3vpBY3qUACVsvw+yQU6+YgfBVmcbLaZtrA1w==
 
 "@babel/helper-validator-identifier@^7.18.6", "@babel/helper-validator-identifier@^7.19.1":
   version "7.19.1"
-  resolved "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz#7eea834cf32901ffdc1a7ee555e2f9c27e249ca2"
   integrity sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==
 
-"@babel/helper-validator-option@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.18.6.tgz"
-  integrity sha512-XO7gESt5ouv/LRJdrVjkShckw6STTaB7l9BrpBaAHDeF5YZT+01PCwmR0SJHnkW6i8OwW/EVWRShfi4j2x+KQw==
+"@babel/helper-validator-option@^7.21.0":
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.21.0.tgz#8224c7e13ace4bafdc4004da2cf064ef42673180"
+  integrity sha512-rmL/B8/f0mKS2baE9ZpyTcTavvEuWhTTW8amjzXNvYG4AwBsqTLikfXsEofsJEfKHf+HQVQbFOHy6o+4cnC/fQ==
 
 "@babel/helper-wrap-function@^7.18.9":
   version "7.20.5"
-  resolved "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.20.5.tgz"
+  resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.20.5.tgz#75e2d84d499a0ab3b31c33bcfe59d6b8a45f62e3"
   integrity sha512-bYMxIWK5mh+TgXGVqAtnu5Yn1un+v8DDZtqyzKRLUzrh70Eal2O3aZ7aPYiMADO4uKlkzOiRiZ6GX5q3qxvW9Q==
   dependencies:
     "@babel/helper-function-name" "^7.19.0"
@@ -263,48 +263,48 @@
     "@babel/traverse" "^7.20.5"
     "@babel/types" "^7.20.5"
 
-"@babel/helpers@^7.20.7":
-  version "7.20.13"
-  resolved "https://registry.npmjs.org/@babel/helpers/-/helpers-7.20.13.tgz"
-  integrity sha512-nzJ0DWCL3gB5RCXbUO3KIMMsBY2Eqbx8mBpKGE/02PgyRQFcPQLbkQ1vyy596mZLaP+dAfD+R4ckASzNVmW3jg==
+"@babel/helpers@^7.21.5":
+  version "7.21.5"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.21.5.tgz#5bac66e084d7a4d2d9696bdf0175a93f7fb63c08"
+  integrity sha512-BSY+JSlHxOmGsPTydUkPf1MdMQ3M81x5xGCOVgWM3G8XH77sJ292Y2oqcp0CbbgxhqBuI46iUz1tT7hqP7EfgA==
   dependencies:
     "@babel/template" "^7.20.7"
-    "@babel/traverse" "^7.20.13"
-    "@babel/types" "^7.20.7"
+    "@babel/traverse" "^7.21.5"
+    "@babel/types" "^7.21.5"
 
 "@babel/highlight@^7.10.4", "@babel/highlight@^7.18.6":
   version "7.18.6"
-  resolved "https://registry.npmjs.org/@babel/highlight/-/highlight-7.18.6.tgz"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.18.6.tgz#81158601e93e2563795adcbfbdf5d64be3f2ecdf"
   integrity sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g==
   dependencies:
     "@babel/helper-validator-identifier" "^7.18.6"
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
-"@babel/parser@^7.20.13", "@babel/parser@^7.20.7":
-  version "7.20.15"
-  resolved "https://registry.npmjs.org/@babel/parser/-/parser-7.20.15.tgz"
-  integrity sha512-DI4a1oZuf8wC+oAJA9RW6ga3Zbe8RZFt7kD9i4qAspz3I/yHet1VvC3DiSy/fsUvv5pvJuNPh0LPOdCcqinDPg==
+"@babel/parser@^7.20.7", "@babel/parser@^7.21.5", "@babel/parser@^7.21.8":
+  version "7.21.8"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.21.8.tgz#642af7d0333eab9c0ad70b14ac5e76dbde7bfdf8"
+  integrity sha512-6zavDGdzG3gUqAdWvlLFfk+36RilI+Pwyuuh7HItyeScCWP3k6i8vKclAQ0bM/0y/Kz/xiwvxhMv9MgTJP5gmA==
 
 "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.18.6":
   version "7.18.6"
-  resolved "https://registry.npmjs.org/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.18.6.tgz"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.18.6.tgz#da5b8f9a580acdfbe53494dba45ea389fb09a4d2"
   integrity sha512-Dgxsyg54Fx1d4Nge8UnvTrED63vrwOdPmyvPzlNN/boaliRP54pm3pGzZD1SJUwrBA+Cs/xdG8kXX6Mn/RfISQ==
   dependencies:
     "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@^7.18.9":
+"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@^7.20.7":
   version "7.20.7"
-  resolved "https://registry.npmjs.org/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.20.7.tgz"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.20.7.tgz#d9c85589258539a22a901033853101a6198d4ef1"
   integrity sha512-sbr9+wNE5aXMBBFBICk01tt7sBf2Oc9ikRFEcem/ZORup9IMUdNhW7/wVLEbbtlWOsEubJet46mHAL2C8+2jKQ==
   dependencies:
     "@babel/helper-plugin-utils" "^7.20.2"
     "@babel/helper-skip-transparent-expression-wrappers" "^7.20.0"
     "@babel/plugin-proposal-optional-chaining" "^7.20.7"
 
-"@babel/plugin-proposal-async-generator-functions@^7.20.1":
+"@babel/plugin-proposal-async-generator-functions@^7.20.7":
   version "7.20.7"
-  resolved "https://registry.npmjs.org/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.20.7.tgz"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.20.7.tgz#bfb7276d2d573cb67ba379984a2334e262ba5326"
   integrity sha512-xMbiLsn/8RK7Wq7VeVytytS2L6qE69bXPB10YCmMdDZbKF4okCqY74pI/jJQ/8U0b/F6NrT2+14b8/P9/3AMGA==
   dependencies:
     "@babel/helper-environment-visitor" "^7.18.9"
@@ -314,24 +314,24 @@
 
 "@babel/plugin-proposal-class-properties@^7.18.6":
   version "7.18.6"
-  resolved "https://registry.npmjs.org/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.18.6.tgz"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.18.6.tgz#b110f59741895f7ec21a6fff696ec46265c446a3"
   integrity sha512-cumfXOF0+nzZrrN8Rf0t7M+tF6sZc7vhQwYQck9q1/5w2OExlD+b4v4RpMJFaV1Z7WcDRgO6FqvxqxGlwo+RHQ==
   dependencies:
     "@babel/helper-create-class-features-plugin" "^7.18.6"
     "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-proposal-class-static-block@^7.18.6":
-  version "7.20.7"
-  resolved "https://registry.npmjs.org/@babel/plugin-proposal-class-static-block/-/plugin-proposal-class-static-block-7.20.7.tgz"
-  integrity sha512-AveGOoi9DAjUYYuUAG//Ig69GlazLnoyzMw68VCDux+c1tsnnH/OkYcpz/5xzMkEFC6UxjR5Gw1c+iY2wOGVeQ==
+"@babel/plugin-proposal-class-static-block@^7.21.0":
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-static-block/-/plugin-proposal-class-static-block-7.21.0.tgz#77bdd66fb7b605f3a61302d224bdfacf5547977d"
+  integrity sha512-XP5G9MWNUskFuP30IfFSEFB0Z6HzLIUcjYM4bYOPHXl7eiJ9HFv8tWj6TXTN5QODiEhDZAeI4hLok2iHFFV4hw==
   dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.20.7"
+    "@babel/helper-create-class-features-plugin" "^7.21.0"
     "@babel/helper-plugin-utils" "^7.20.2"
     "@babel/plugin-syntax-class-static-block" "^7.14.5"
 
 "@babel/plugin-proposal-dynamic-import@^7.18.6":
   version "7.18.6"
-  resolved "https://registry.npmjs.org/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.18.6.tgz"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.18.6.tgz#72bcf8d408799f547d759298c3c27c7e7faa4d94"
   integrity sha512-1auuwmK+Rz13SJj36R+jqFPMJWyKEDd7lLSdOj4oJK0UTgGueSAtkrCvz9ewmgyU/P941Rv2fQwZJN8s6QruXw==
   dependencies:
     "@babel/helper-plugin-utils" "^7.18.6"
@@ -339,7 +339,7 @@
 
 "@babel/plugin-proposal-export-namespace-from@^7.18.9":
   version "7.18.9"
-  resolved "https://registry.npmjs.org/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.18.9.tgz"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.18.9.tgz#5f7313ab348cdb19d590145f9247540e94761203"
   integrity sha512-k1NtHyOMvlDDFeb9G5PhUXuGj8m/wiwojgQVEhJ/fsVsMCpLyOP4h0uGEjYJKrRI+EVPlb5Jk+Gt9P97lOGwtA==
   dependencies:
     "@babel/helper-plugin-utils" "^7.18.9"
@@ -347,15 +347,15 @@
 
 "@babel/plugin-proposal-json-strings@^7.18.6":
   version "7.18.6"
-  resolved "https://registry.npmjs.org/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.18.6.tgz"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.18.6.tgz#7e8788c1811c393aff762817e7dbf1ebd0c05f0b"
   integrity sha512-lr1peyn9kOdbYc0xr0OdHTZ5FMqS6Di+H0Fz2I/JwMzGmzJETNeOFq2pBySw6X/KFL5EWDjlJuMsUGRFb8fQgQ==
   dependencies:
     "@babel/helper-plugin-utils" "^7.18.6"
     "@babel/plugin-syntax-json-strings" "^7.8.3"
 
-"@babel/plugin-proposal-logical-assignment-operators@^7.18.9":
+"@babel/plugin-proposal-logical-assignment-operators@^7.20.7":
   version "7.20.7"
-  resolved "https://registry.npmjs.org/@babel/plugin-proposal-logical-assignment-operators/-/plugin-proposal-logical-assignment-operators-7.20.7.tgz"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-logical-assignment-operators/-/plugin-proposal-logical-assignment-operators-7.20.7.tgz#dfbcaa8f7b4d37b51e8bfb46d94a5aea2bb89d83"
   integrity sha512-y7C7cZgpMIjWlKE5T7eJwp+tnRYM89HmRvWM5EQuB5BoHEONjmQ8lSNmBUwOyy/GFRsohJED51YBF79hE1djug==
   dependencies:
     "@babel/helper-plugin-utils" "^7.20.2"
@@ -363,7 +363,7 @@
 
 "@babel/plugin-proposal-nullish-coalescing-operator@^7.18.6":
   version "7.18.6"
-  resolved "https://registry.npmjs.org/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.18.6.tgz"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.18.6.tgz#fdd940a99a740e577d6c753ab6fbb43fdb9467e1"
   integrity sha512-wQxQzxYeJqHcfppzBDnm1yAY0jSRkUXR2z8RePZYrKwMKgMlE8+Z6LUno+bd6LvbGh8Gltvy74+9pIYkr+XkKA==
   dependencies:
     "@babel/helper-plugin-utils" "^7.18.6"
@@ -371,15 +371,15 @@
 
 "@babel/plugin-proposal-numeric-separator@^7.18.6":
   version "7.18.6"
-  resolved "https://registry.npmjs.org/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.18.6.tgz"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.18.6.tgz#899b14fbafe87f053d2c5ff05b36029c62e13c75"
   integrity sha512-ozlZFogPqoLm8WBr5Z8UckIoE4YQ5KESVcNudyXOR8uqIkliTEgJ3RoketfG6pmzLdeZF0H/wjE9/cCEitBl7Q==
   dependencies:
     "@babel/helper-plugin-utils" "^7.18.6"
     "@babel/plugin-syntax-numeric-separator" "^7.10.4"
 
-"@babel/plugin-proposal-object-rest-spread@^7.20.2":
+"@babel/plugin-proposal-object-rest-spread@^7.20.7":
   version "7.20.7"
-  resolved "https://registry.npmjs.org/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.20.7.tgz"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.20.7.tgz#aa662940ef425779c75534a5c41e9d936edc390a"
   integrity sha512-d2S98yCiLxDVmBmE8UjGcfPvNEUbA1U5q5WxaWFUGRzJSVAZqm5W6MbPct0jxnegUZ0niLeNX+IOzEs7wYg9Dg==
   dependencies:
     "@babel/compat-data" "^7.20.5"
@@ -390,16 +390,16 @@
 
 "@babel/plugin-proposal-optional-catch-binding@^7.18.6":
   version "7.18.6"
-  resolved "https://registry.npmjs.org/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.18.6.tgz"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.18.6.tgz#f9400d0e6a3ea93ba9ef70b09e72dd6da638a2cb"
   integrity sha512-Q40HEhs9DJQyaZfUjjn6vE8Cv4GmMHCYuMGIWUnlxH6400VGxOuwWsPt4FxXxJkC/5eOzgn0z21M9gMT4MOhbw==
   dependencies:
     "@babel/helper-plugin-utils" "^7.18.6"
     "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"
 
-"@babel/plugin-proposal-optional-chaining@^7.18.9", "@babel/plugin-proposal-optional-chaining@^7.20.7":
-  version "7.20.7"
-  resolved "https://registry.npmjs.org/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.20.7.tgz"
-  integrity sha512-T+A7b1kfjtRM51ssoOfS1+wbyCVqorfyZhT99TvxxLMirPShD8CzKMRepMlCBGM5RpHMbn8s+5MMHnPstJH6mQ==
+"@babel/plugin-proposal-optional-chaining@^7.20.7", "@babel/plugin-proposal-optional-chaining@^7.21.0":
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.21.0.tgz#886f5c8978deb7d30f678b2e24346b287234d3ea"
+  integrity sha512-p4zeefM72gpmEe2fkUr/OnOXpWEf8nAgk7ZYVqqfFiyIG7oFfVZcCrU64hWn5xp4tQ9LkV4bTIa5rD0KANpKNA==
   dependencies:
     "@babel/helper-plugin-utils" "^7.20.2"
     "@babel/helper-skip-transparent-expression-wrappers" "^7.20.0"
@@ -407,25 +407,25 @@
 
 "@babel/plugin-proposal-private-methods@^7.18.6":
   version "7.18.6"
-  resolved "https://registry.npmjs.org/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.18.6.tgz"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.18.6.tgz#5209de7d213457548a98436fa2882f52f4be6bea"
   integrity sha512-nutsvktDItsNn4rpGItSNV2sz1XwS+nfU0Rg8aCx3W3NOKVzdMjJRu0O5OkgDp3ZGICSTbgRpxZoWsxoKRvbeA==
   dependencies:
     "@babel/helper-create-class-features-plugin" "^7.18.6"
     "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-proposal-private-property-in-object@^7.18.6":
-  version "7.20.5"
-  resolved "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.20.5.tgz"
-  integrity sha512-Vq7b9dUA12ByzB4EjQTPo25sFhY+08pQDBSZRtUAkj7lb7jahaHR5igera16QZ+3my1nYR4dKsNdYj5IjPHilQ==
+"@babel/plugin-proposal-private-property-in-object@^7.21.0":
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0.tgz#19496bd9883dd83c23c7d7fc45dcd9ad02dfa1dc"
+  integrity sha512-ha4zfehbJjc5MmXBlHec1igel5TJXXLDDRbuJ4+XT2TJcyD9/V1919BA8gMvsdHcNMBy4WBUBiRb3nw/EQUtBw==
   dependencies:
     "@babel/helper-annotate-as-pure" "^7.18.6"
-    "@babel/helper-create-class-features-plugin" "^7.20.5"
+    "@babel/helper-create-class-features-plugin" "^7.21.0"
     "@babel/helper-plugin-utils" "^7.20.2"
     "@babel/plugin-syntax-private-property-in-object" "^7.14.5"
 
 "@babel/plugin-proposal-unicode-property-regex@^7.18.6", "@babel/plugin-proposal-unicode-property-regex@^7.4.4":
   version "7.18.6"
-  resolved "https://registry.npmjs.org/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.18.6.tgz"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.18.6.tgz#af613d2cd5e643643b65cded64207b15c85cb78e"
   integrity sha512-2BShG/d5yoZyXZfVePH91urL5wTG6ASZU9M4o03lKK8u8UW1y08OMttBSOADTcJrnPMpvDXRG3G8fyLh4ovs8w==
   dependencies:
     "@babel/helper-create-regexp-features-plugin" "^7.18.6"
@@ -433,126 +433,126 @@
 
 "@babel/plugin-syntax-async-generators@^7.8.4":
   version "7.8.4"
-  resolved "https://registry.npmjs.org/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz#a983fb1aeb2ec3f6ed042a210f640e90e786fe0d"
   integrity sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.0"
 
 "@babel/plugin-syntax-class-properties@^7.12.13":
   version "7.12.13"
-  resolved "https://registry.npmjs.org/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.12.13.tgz"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.12.13.tgz#b5c987274c4a3a82b89714796931a6b53544ae10"
   integrity sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==
   dependencies:
     "@babel/helper-plugin-utils" "^7.12.13"
 
 "@babel/plugin-syntax-class-static-block@^7.14.5":
   version "7.14.5"
-  resolved "https://registry.npmjs.org/@babel/plugin-syntax-class-static-block/-/plugin-syntax-class-static-block-7.14.5.tgz"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-class-static-block/-/plugin-syntax-class-static-block-7.14.5.tgz#195df89b146b4b78b3bf897fd7a257c84659d406"
   integrity sha512-b+YyPmr6ldyNnM6sqYeMWE+bgJcJpO6yS4QD7ymxgH34GBPNDM/THBh8iunyvKIZztiwLH4CJZ0RxTk9emgpjw==
   dependencies:
     "@babel/helper-plugin-utils" "^7.14.5"
 
 "@babel/plugin-syntax-dynamic-import@^7.8.3":
   version "7.8.3"
-  resolved "https://registry.npmjs.org/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.8.3.tgz"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.8.3.tgz#62bf98b2da3cd21d626154fc96ee5b3cb68eacb3"
   integrity sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.0"
 
 "@babel/plugin-syntax-export-namespace-from@^7.8.3":
   version "7.8.3"
-  resolved "https://registry.npmjs.org/@babel/plugin-syntax-export-namespace-from/-/plugin-syntax-export-namespace-from-7.8.3.tgz"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-export-namespace-from/-/plugin-syntax-export-namespace-from-7.8.3.tgz#028964a9ba80dbc094c915c487ad7c4e7a66465a"
   integrity sha512-MXf5laXo6c1IbEbegDmzGPwGNTsHZmEy6QGznu5Sh2UCWvueywb2ee+CCE4zQiZstxU9BMoQO9i6zUFSY0Kj0Q==
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.3"
 
 "@babel/plugin-syntax-import-assertions@^7.20.0":
   version "7.20.0"
-  resolved "https://registry.npmjs.org/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.20.0.tgz"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.20.0.tgz#bb50e0d4bea0957235390641209394e87bdb9cc4"
   integrity sha512-IUh1vakzNoWalR8ch/areW7qFopR2AEw03JlG7BbrDqmQ4X3q9uuipQwSGrUn7oGiemKjtSLDhNtQHzMHr1JdQ==
   dependencies:
     "@babel/helper-plugin-utils" "^7.19.0"
 
+"@babel/plugin-syntax-import-meta@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-import-meta/-/plugin-syntax-import-meta-7.10.4.tgz#ee601348c370fa334d2207be158777496521fd51"
+  integrity sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
 "@babel/plugin-syntax-json-strings@^7.8.3":
   version "7.8.3"
-  resolved "https://registry.npmjs.org/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.8.3.tgz"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.8.3.tgz#01ca21b668cd8218c9e640cb6dd88c5412b2c96a"
   integrity sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.0"
 
-"@babel/plugin-syntax-jsx@^7.17.12":
-  version "7.18.6"
-  resolved "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.18.6.tgz"
-  integrity sha512-6mmljtAedFGTWu2p/8WIORGwy+61PLgOMPOdazc7YoJ9ZCWUyFy3A6CpPkRKLKD1ToAesxX8KGEViAiLo9N+7Q==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
-
 "@babel/plugin-syntax-logical-assignment-operators@^7.10.4":
   version "7.10.4"
-  resolved "https://registry.npmjs.org/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz#ca91ef46303530448b906652bac2e9fe9941f699"
   integrity sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.4"
 
 "@babel/plugin-syntax-nullish-coalescing-operator@^7.8.3":
   version "7.8.3"
-  resolved "https://registry.npmjs.org/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz#167ed70368886081f74b5c36c65a88c03b66d1a9"
   integrity sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.0"
 
 "@babel/plugin-syntax-numeric-separator@^7.10.4":
   version "7.10.4"
-  resolved "https://registry.npmjs.org/@babel/plugin-syntax-numeric-separator/-/plugin-syntax-numeric-separator-7.10.4.tgz"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-numeric-separator/-/plugin-syntax-numeric-separator-7.10.4.tgz#b9b070b3e33570cd9fd07ba7fa91c0dd37b9af97"
   integrity sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.4"
 
 "@babel/plugin-syntax-object-rest-spread@^7.8.3":
   version "7.8.3"
-  resolved "https://registry.npmjs.org/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.8.3.tgz"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.8.3.tgz#60e225edcbd98a640332a2e72dd3e66f1af55871"
   integrity sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.0"
 
 "@babel/plugin-syntax-optional-catch-binding@^7.8.3":
   version "7.8.3"
-  resolved "https://registry.npmjs.org/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.8.3.tgz"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.8.3.tgz#6111a265bcfb020eb9efd0fdfd7d26402b9ed6c1"
   integrity sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.0"
 
 "@babel/plugin-syntax-optional-chaining@^7.8.3":
   version "7.8.3"
-  resolved "https://registry.npmjs.org/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.3.tgz"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.3.tgz#4f69c2ab95167e0180cd5336613f8c5788f7d48a"
   integrity sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.0"
 
 "@babel/plugin-syntax-private-property-in-object@^7.14.5":
   version "7.14.5"
-  resolved "https://registry.npmjs.org/@babel/plugin-syntax-private-property-in-object/-/plugin-syntax-private-property-in-object-7.14.5.tgz"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-private-property-in-object/-/plugin-syntax-private-property-in-object-7.14.5.tgz#0dc6671ec0ea22b6e94a1114f857970cd39de1ad"
   integrity sha512-0wVnp9dxJ72ZUJDV27ZfbSj6iHLoytYZmh3rFcxNnvsJF3ktkzLDZPy/mA17HGsaQT3/DQsWYX1f1QGWkCoVUg==
   dependencies:
     "@babel/helper-plugin-utils" "^7.14.5"
 
 "@babel/plugin-syntax-top-level-await@^7.14.5":
   version "7.14.5"
-  resolved "https://registry.npmjs.org/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.14.5.tgz"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.14.5.tgz#c1cfdadc35a646240001f06138247b741c34d94c"
   integrity sha512-hx++upLv5U1rgYfwe1xBQUhRmU41NEvpUvrp8jkrSCdvGSnM5/qdRMtylJ6PG5OFkBaHkbTAKTnd3/YyESRHFw==
   dependencies:
     "@babel/helper-plugin-utils" "^7.14.5"
 
-"@babel/plugin-transform-arrow-functions@^7.18.6":
-  version "7.20.7"
-  resolved "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.20.7.tgz"
-  integrity sha512-3poA5E7dzDomxj9WXWwuD6A5F3kc7VXwIJO+E+J8qtDtS+pXPAhrgEyh+9GBwBgPq1Z+bB+/JD60lp5jsN7JPQ==
+"@babel/plugin-transform-arrow-functions@^7.21.5":
+  version "7.21.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.21.5.tgz#9bb42a53de447936a57ba256fbf537fc312b6929"
+  integrity sha512-wb1mhwGOCaXHDTcsRYMKF9e5bbMgqwxtqa2Y1ifH96dXJPwbuLX9qHy3clhrxVqgMz7nyNXs8VkxdH8UBcjKqA==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/helper-plugin-utils" "^7.21.5"
 
-"@babel/plugin-transform-async-to-generator@^7.18.6":
+"@babel/plugin-transform-async-to-generator@^7.20.7":
   version "7.20.7"
-  resolved "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.20.7.tgz"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.20.7.tgz#dfee18623c8cb31deb796aa3ca84dda9cea94354"
   integrity sha512-Uo5gwHPT9vgnSXQxqGtpdufUiWp96gk7yiP4Mp5bm1QMkEmLXBO7PAGYbKoJ6DhAwiNkcHFBol/x5zZZkL/t0Q==
   dependencies:
     "@babel/helper-module-imports" "^7.18.6"
@@ -561,51 +561,51 @@
 
 "@babel/plugin-transform-block-scoped-functions@^7.18.6":
   version "7.18.6"
-  resolved "https://registry.npmjs.org/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.18.6.tgz"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.18.6.tgz#9187bf4ba302635b9d70d986ad70f038726216a8"
   integrity sha512-ExUcOqpPWnliRcPqves5HJcJOvHvIIWfuS4sroBUenPuMdmW+SMHDakmtS7qOo13sVppmUijqeTv7qqGsvURpQ==
   dependencies:
     "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-transform-block-scoping@^7.20.2":
-  version "7.20.15"
-  resolved "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.20.15.tgz"
-  integrity sha512-Vv4DMZ6MiNOhu/LdaZsT/bsLRxgL94d269Mv4R/9sp6+Mp++X/JqypZYypJXLlM4mlL352/Egzbzr98iABH1CA==
+"@babel/plugin-transform-block-scoping@^7.21.0":
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.21.0.tgz#e737b91037e5186ee16b76e7ae093358a5634f02"
+  integrity sha512-Mdrbunoh9SxwFZapeHVrwFmri16+oYotcZysSzhNIVDwIAb1UV+kvnxULSYq9J3/q5MDG+4X6w8QVgD1zhBXNQ==
   dependencies:
     "@babel/helper-plugin-utils" "^7.20.2"
 
-"@babel/plugin-transform-classes@^7.20.2":
-  version "7.20.7"
-  resolved "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.20.7.tgz"
-  integrity sha512-LWYbsiXTPKl+oBlXUGlwNlJZetXD5Am+CyBdqhPsDVjM9Jc8jwBJFrKhHf900Kfk2eZG1y9MAG3UNajol7A4VQ==
+"@babel/plugin-transform-classes@^7.21.0":
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.21.0.tgz#f469d0b07a4c5a7dbb21afad9e27e57b47031665"
+  integrity sha512-RZhbYTCEUAe6ntPehC4hlslPWosNHDox+vAs4On/mCLRLfoDVHf6hVEd7kuxr1RnHwJmxFfUM3cZiZRmPxJPXQ==
   dependencies:
     "@babel/helper-annotate-as-pure" "^7.18.6"
     "@babel/helper-compilation-targets" "^7.20.7"
     "@babel/helper-environment-visitor" "^7.18.9"
-    "@babel/helper-function-name" "^7.19.0"
+    "@babel/helper-function-name" "^7.21.0"
     "@babel/helper-optimise-call-expression" "^7.18.6"
     "@babel/helper-plugin-utils" "^7.20.2"
     "@babel/helper-replace-supers" "^7.20.7"
     "@babel/helper-split-export-declaration" "^7.18.6"
     globals "^11.1.0"
 
-"@babel/plugin-transform-computed-properties@^7.18.9":
-  version "7.20.7"
-  resolved "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.20.7.tgz"
-  integrity sha512-Lz7MvBK6DTjElHAmfu6bfANzKcxpyNPeYBGEafyA6E5HtRpjpZwU+u7Qrgz/2OR0z+5TvKYbPdphfSaAcZBrYQ==
+"@babel/plugin-transform-computed-properties@^7.21.5":
+  version "7.21.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.21.5.tgz#3a2d8bb771cd2ef1cd736435f6552fe502e11b44"
+  integrity sha512-TR653Ki3pAwxBxUe8srfF3e4Pe3FTA46uaNHYyQwIoM4oWKSoOZiDNyHJ0oIoDIUPSRQbQG7jzgVBX3FPVne1Q==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/helper-plugin-utils" "^7.21.5"
     "@babel/template" "^7.20.7"
 
-"@babel/plugin-transform-destructuring@^7.20.2":
-  version "7.20.7"
-  resolved "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.20.7.tgz"
-  integrity sha512-Xwg403sRrZb81IVB79ZPqNQME23yhugYVqgTxAhT99h485F4f+GMELFhhOsscDUB7HCswepKeCKLn/GZvUKoBA==
+"@babel/plugin-transform-destructuring@^7.21.3":
+  version "7.21.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.21.3.tgz#73b46d0fd11cd6ef57dea8a381b1215f4959d401"
+  integrity sha512-bp6hwMFzuiE4HqYEyoGJ/V2LeIWn+hLVKc4pnj++E5XQptwhtcGmSayM029d/j2X1bPKGTlsyPwAubuU22KhMA==
   dependencies:
     "@babel/helper-plugin-utils" "^7.20.2"
 
 "@babel/plugin-transform-dotall-regex@^7.18.6", "@babel/plugin-transform-dotall-regex@^7.4.4":
   version "7.18.6"
-  resolved "https://registry.npmjs.org/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.18.6.tgz"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.18.6.tgz#b286b3e7aae6c7b861e45bed0a2fafd6b1a4fef8"
   integrity sha512-6S3jpun1eEbAxq7TdjLotAsl4WpQI9DxfkycRcKrjhQYzU87qpXdknpBg/e+TdcMehqGnLFi7tnFUBR02Vq6wg==
   dependencies:
     "@babel/helper-create-regexp-features-plugin" "^7.18.6"
@@ -613,29 +613,29 @@
 
 "@babel/plugin-transform-duplicate-keys@^7.18.9":
   version "7.18.9"
-  resolved "https://registry.npmjs.org/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.18.9.tgz"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.18.9.tgz#687f15ee3cdad6d85191eb2a372c4528eaa0ae0e"
   integrity sha512-d2bmXCtZXYc59/0SanQKbiWINadaJXqtvIQIzd4+hNwkWBgyCd5F/2t1kXoUdvPMrxzPvhK6EMQRROxsue+mfw==
   dependencies:
     "@babel/helper-plugin-utils" "^7.18.9"
 
 "@babel/plugin-transform-exponentiation-operator@^7.18.6":
   version "7.18.6"
-  resolved "https://registry.npmjs.org/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.18.6.tgz"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.18.6.tgz#421c705f4521888c65e91fdd1af951bfefd4dacd"
   integrity sha512-wzEtc0+2c88FVR34aQmiz56dxEkxr2g8DQb/KfaFa1JYXOFVsbhvAonFN6PwVWj++fKmku8NP80plJ5Et4wqHw==
   dependencies:
     "@babel/helper-builder-binary-assignment-operator-visitor" "^7.18.6"
     "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-transform-for-of@^7.18.8":
-  version "7.18.8"
-  resolved "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.18.8.tgz"
-  integrity sha512-yEfTRnjuskWYo0k1mHUqrVWaZwrdq8AYbfrpqULOJOaucGSp4mNMVps+YtA8byoevxS/urwU75vyhQIxcCgiBQ==
+"@babel/plugin-transform-for-of@^7.21.5":
+  version "7.21.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.21.5.tgz#e890032b535f5a2e237a18535f56a9fdaa7b83fc"
+  integrity sha512-nYWpjKW/7j/I/mZkGVgHJXh4bA1sfdFnJoOXwJuj4m3Q2EraO/8ZyrkCau9P5tbHQk01RMSt6KYLCsW7730SXQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.21.5"
 
 "@babel/plugin-transform-function-name@^7.18.9":
   version "7.18.9"
-  resolved "https://registry.npmjs.org/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.18.9.tgz"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.18.9.tgz#cc354f8234e62968946c61a46d6365440fc764e0"
   integrity sha512-WvIBoRPaJQ5yVHzcnJFor7oS5Ls0PYixlTYE63lCj2RtdQEl15M68FXQlxnG6wdraJIXRdR7KI+hQ7q/9QjrCQ==
   dependencies:
     "@babel/helper-compilation-targets" "^7.18.9"
@@ -644,38 +644,38 @@
 
 "@babel/plugin-transform-literals@^7.18.9":
   version "7.18.9"
-  resolved "https://registry.npmjs.org/@babel/plugin-transform-literals/-/plugin-transform-literals-7.18.9.tgz"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-literals/-/plugin-transform-literals-7.18.9.tgz#72796fdbef80e56fba3c6a699d54f0de557444bc"
   integrity sha512-IFQDSRoTPnrAIrI5zoZv73IFeZu2dhu6irxQjY9rNjTT53VmKg9fenjvoiOWOkJ6mm4jKVPtdMzBY98Fp4Z4cg==
   dependencies:
     "@babel/helper-plugin-utils" "^7.18.9"
 
 "@babel/plugin-transform-member-expression-literals@^7.18.6":
   version "7.18.6"
-  resolved "https://registry.npmjs.org/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.18.6.tgz"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.18.6.tgz#ac9fdc1a118620ac49b7e7a5d2dc177a1bfee88e"
   integrity sha512-qSF1ihLGO3q+/g48k85tUjD033C29TNTVB2paCwZPVmOsjn9pClvYYrM2VeJpBY2bcNkuny0YUyTNRyRxJ54KA==
   dependencies:
     "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-transform-modules-amd@^7.19.6":
+"@babel/plugin-transform-modules-amd@^7.20.11":
   version "7.20.11"
-  resolved "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.20.11.tgz"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.20.11.tgz#3daccca8e4cc309f03c3a0c4b41dc4b26f55214a"
   integrity sha512-NuzCt5IIYOW0O30UvqktzHYR2ud5bOWbY0yaxWZ6G+aFzOMJvrs5YHNikrbdaT15+KNO31nPOy5Fim3ku6Zb5g==
   dependencies:
     "@babel/helper-module-transforms" "^7.20.11"
     "@babel/helper-plugin-utils" "^7.20.2"
 
-"@babel/plugin-transform-modules-commonjs@^7.19.6":
-  version "7.20.11"
-  resolved "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.20.11.tgz"
-  integrity sha512-S8e1f7WQ7cimJQ51JkAaDrEtohVEitXjgCGAS2N8S31Y42E+kWwfSz83LYz57QdBm7q9diARVqanIaH2oVgQnw==
+"@babel/plugin-transform-modules-commonjs@^7.19.6", "@babel/plugin-transform-modules-commonjs@^7.21.5":
+  version "7.21.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.21.5.tgz#d69fb947eed51af91de82e4708f676864e5e47bc"
+  integrity sha512-OVryBEgKUbtqMoB7eG2rs6UFexJi6Zj6FDXx+esBLPTCxCNxAY9o+8Di7IsUGJ+AVhp5ncK0fxWUBd0/1gPhrQ==
   dependencies:
-    "@babel/helper-module-transforms" "^7.20.11"
-    "@babel/helper-plugin-utils" "^7.20.2"
-    "@babel/helper-simple-access" "^7.20.2"
+    "@babel/helper-module-transforms" "^7.21.5"
+    "@babel/helper-plugin-utils" "^7.21.5"
+    "@babel/helper-simple-access" "^7.21.5"
 
-"@babel/plugin-transform-modules-systemjs@^7.19.6":
+"@babel/plugin-transform-modules-systemjs@^7.20.11":
   version "7.20.11"
-  resolved "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.20.11.tgz"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.20.11.tgz#467ec6bba6b6a50634eea61c9c232654d8a4696e"
   integrity sha512-vVu5g9BPQKSFEmvt2TA4Da5N+QVS66EX21d8uoOihC+OCpUoGvzVsXeqFdtAEfVa5BILAeFt+U7yVmLbQnAJmw==
   dependencies:
     "@babel/helper-hoist-variables" "^7.18.6"
@@ -685,15 +685,15 @@
 
 "@babel/plugin-transform-modules-umd@^7.18.6":
   version "7.18.6"
-  resolved "https://registry.npmjs.org/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.18.6.tgz"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.18.6.tgz#81d3832d6034b75b54e62821ba58f28ed0aab4b9"
   integrity sha512-dcegErExVeXcRqNtkRU/z8WlBLnvD4MRnHgNs3MytRO1Mn1sHRyhbcpYbVMGclAqOjdW+9cfkdZno9dFdfKLfQ==
   dependencies:
     "@babel/helper-module-transforms" "^7.18.6"
     "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-transform-named-capturing-groups-regex@^7.19.1":
+"@babel/plugin-transform-named-capturing-groups-regex@^7.20.5":
   version "7.20.5"
-  resolved "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.20.5.tgz"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.20.5.tgz#626298dd62ea51d452c3be58b285d23195ba69a8"
   integrity sha512-mOW4tTzi5iTLnw+78iEq3gr8Aoq4WNRGpmSlrogqaiCBoR1HFhpU4JkpQFOHfeYx3ReVIFWOQJS4aZBRvuZ6mA==
   dependencies:
     "@babel/helper-create-regexp-features-plugin" "^7.20.5"
@@ -701,58 +701,58 @@
 
 "@babel/plugin-transform-new-target@^7.18.6":
   version "7.18.6"
-  resolved "https://registry.npmjs.org/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.18.6.tgz"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.18.6.tgz#d128f376ae200477f37c4ddfcc722a8a1b3246a8"
   integrity sha512-DjwFA/9Iu3Z+vrAn+8pBUGcjhxKguSMlsFqeCKbhb9BAV756v0krzVK04CRDi/4aqmk8BsHb4a/gFcaA5joXRw==
   dependencies:
     "@babel/helper-plugin-utils" "^7.18.6"
 
 "@babel/plugin-transform-object-super@^7.18.6":
   version "7.18.6"
-  resolved "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.18.6.tgz"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.18.6.tgz#fb3c6ccdd15939b6ff7939944b51971ddc35912c"
   integrity sha512-uvGz6zk+pZoS1aTZrOvrbj6Pp/kK2mp45t2B+bTDre2UgsZZ8EZLSJtUg7m/no0zOJUWgFONpB7Zv9W2tSaFlA==
   dependencies:
     "@babel/helper-plugin-utils" "^7.18.6"
     "@babel/helper-replace-supers" "^7.18.6"
 
-"@babel/plugin-transform-parameters@^7.20.1", "@babel/plugin-transform-parameters@^7.20.7":
-  version "7.20.7"
-  resolved "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.20.7.tgz"
-  integrity sha512-WiWBIkeHKVOSYPO0pWkxGPfKeWrCJyD3NJ53+Lrp/QMSZbsVPovrVl2aWZ19D/LTVnaDv5Ap7GJ/B2CTOZdrfA==
+"@babel/plugin-transform-parameters@^7.20.7", "@babel/plugin-transform-parameters@^7.21.3":
+  version "7.21.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.21.3.tgz#18fc4e797cf6d6d972cb8c411dbe8a809fa157db"
+  integrity sha512-Wxc+TvppQG9xWFYatvCGPvZ6+SIUxQ2ZdiBP+PHYMIjnPXD+uThCshaz4NZOnODAtBjjcVQQ/3OKs9LW28purQ==
   dependencies:
     "@babel/helper-plugin-utils" "^7.20.2"
 
 "@babel/plugin-transform-property-literals@^7.18.6":
   version "7.18.6"
-  resolved "https://registry.npmjs.org/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.18.6.tgz"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.18.6.tgz#e22498903a483448e94e032e9bbb9c5ccbfc93a3"
   integrity sha512-cYcs6qlgafTud3PAzrrRNbQtfpQ8+y/+M5tKmksS9+M1ckbH6kzY8MrexEM9mcA6JDsukE19iIRvAyYl463sMg==
   dependencies:
     "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-transform-regenerator@^7.18.6":
-  version "7.20.5"
-  resolved "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.20.5.tgz"
-  integrity sha512-kW/oO7HPBtntbsahzQ0qSE3tFvkFwnbozz3NWFhLGqH75vLEg+sCGngLlhVkePlCs3Jv0dBBHDzCHxNiFAQKCQ==
+"@babel/plugin-transform-regenerator@^7.21.5":
+  version "7.21.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.21.5.tgz#576c62f9923f94bcb1c855adc53561fd7913724e"
+  integrity sha512-ZoYBKDb6LyMi5yCsByQ5jmXsHAQDDYeexT1Szvlmui+lADvfSecr5Dxd/PkrTC3pAD182Fcju1VQkB4oCp9M+w==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/helper-plugin-utils" "^7.21.5"
     regenerator-transform "^0.15.1"
 
 "@babel/plugin-transform-reserved-words@^7.18.6":
   version "7.18.6"
-  resolved "https://registry.npmjs.org/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.18.6.tgz"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.18.6.tgz#b1abd8ebf8edaa5f7fe6bbb8d2133d23b6a6f76a"
   integrity sha512-oX/4MyMoypzHjFrT1CdivfKZ+XvIPMFXwwxHp/r0Ddy2Vuomt4HDFGmft1TAY2yiTKiNSsh3kjBAzcM8kSdsjA==
   dependencies:
     "@babel/helper-plugin-utils" "^7.18.6"
 
 "@babel/plugin-transform-shorthand-properties@^7.18.6":
   version "7.18.6"
-  resolved "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.18.6.tgz"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.18.6.tgz#6d6df7983d67b195289be24909e3f12a8f664dc9"
   integrity sha512-eCLXXJqv8okzg86ywZJbRn19YJHU4XUa55oz2wbHhaQVn/MM+XhukiT7SYqp/7o00dg52Rj51Ny+Ecw4oyoygw==
   dependencies:
     "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-transform-spread@^7.19.0":
+"@babel/plugin-transform-spread@^7.20.7":
   version "7.20.7"
-  resolved "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.20.7.tgz"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.20.7.tgz#c2d83e0b99d3bf83e07b11995ee24bf7ca09401e"
   integrity sha512-ewBbHQ+1U/VnH1fxltbJqDeWBU1oNLG8Dj11uIv3xVf7nrQu0bPGe5Rf716r7K5Qz+SqtAOVswoVunoiBtGhxw==
   dependencies:
     "@babel/helper-plugin-utils" "^7.20.2"
@@ -760,65 +760,65 @@
 
 "@babel/plugin-transform-sticky-regex@^7.18.6":
   version "7.18.6"
-  resolved "https://registry.npmjs.org/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.18.6.tgz"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.18.6.tgz#c6706eb2b1524028e317720339583ad0f444adcc"
   integrity sha512-kfiDrDQ+PBsQDO85yj1icueWMfGfJFKN1KCkndygtu/C9+XUfydLC8Iv5UYJqRwy4zk8EcplRxEOeLyjq1gm6Q==
   dependencies:
     "@babel/helper-plugin-utils" "^7.18.6"
 
 "@babel/plugin-transform-template-literals@^7.18.9":
   version "7.18.9"
-  resolved "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.18.9.tgz"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.18.9.tgz#04ec6f10acdaa81846689d63fae117dd9c243a5e"
   integrity sha512-S8cOWfT82gTezpYOiVaGHrCbhlHgKhQt8XH5ES46P2XWmX92yisoZywf5km75wv5sYcXDUCLMmMxOLCtthDgMA==
   dependencies:
     "@babel/helper-plugin-utils" "^7.18.9"
 
 "@babel/plugin-transform-typeof-symbol@^7.18.9":
   version "7.18.9"
-  resolved "https://registry.npmjs.org/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.18.9.tgz"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.18.9.tgz#c8cea68263e45addcd6afc9091429f80925762c0"
   integrity sha512-SRfwTtF11G2aemAZWivL7PD+C9z52v9EvMqH9BuYbabyPuKUvSWks3oCg6041pT925L4zVFqaVBeECwsmlguEw==
   dependencies:
     "@babel/helper-plugin-utils" "^7.18.9"
 
-"@babel/plugin-transform-unicode-escapes@^7.18.10":
-  version "7.18.10"
-  resolved "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.18.10.tgz"
-  integrity sha512-kKAdAI+YzPgGY/ftStBFXTI1LZFju38rYThnfMykS+IXy8BVx+res7s2fxf1l8I35DV2T97ezo6+SGrXz6B3iQ==
+"@babel/plugin-transform-unicode-escapes@^7.21.5":
+  version "7.21.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.21.5.tgz#1e55ed6195259b0e9061d81f5ef45a9b009fb7f2"
+  integrity sha512-LYm/gTOwZqsYohlvFUe/8Tujz75LqqVC2w+2qPHLR+WyWHGCZPN1KBpJCJn+4Bk4gOkQy/IXKIge6az5MqwlOg==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.18.9"
+    "@babel/helper-plugin-utils" "^7.21.5"
 
 "@babel/plugin-transform-unicode-regex@^7.18.6":
   version "7.18.6"
-  resolved "https://registry.npmjs.org/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.18.6.tgz"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.18.6.tgz#194317225d8c201bbae103364ffe9e2cea36cdca"
   integrity sha512-gE7A6Lt7YLnNOL3Pb9BNeZvi+d8l7tcRrG4+pwJjK9hD2xX4mEvjlQW60G9EEmfXVYRPv9VRQcyegIVHCql/AA==
   dependencies:
     "@babel/helper-create-regexp-features-plugin" "^7.18.6"
     "@babel/helper-plugin-utils" "^7.18.6"
 
 "@babel/preset-env@^7.11.0":
-  version "7.20.2"
-  resolved "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.20.2.tgz"
-  integrity sha512-1G0efQEWR1EHkKvKHqbG+IN/QdgwfByUpM5V5QroDzGV2t3S/WXNQd693cHiHTlCFMpr9B6FkPFXDA2lQcKoDg==
+  version "7.21.5"
+  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.21.5.tgz#db2089d99efd2297716f018aeead815ac3decffb"
+  integrity sha512-wH00QnTTldTbf/IefEVyChtRdw5RJvODT/Vb4Vcxq1AZvtXj6T0YeX0cAcXhI6/BdGuiP3GcNIL4OQbI2DVNxg==
   dependencies:
-    "@babel/compat-data" "^7.20.1"
-    "@babel/helper-compilation-targets" "^7.20.0"
-    "@babel/helper-plugin-utils" "^7.20.2"
-    "@babel/helper-validator-option" "^7.18.6"
+    "@babel/compat-data" "^7.21.5"
+    "@babel/helper-compilation-targets" "^7.21.5"
+    "@babel/helper-plugin-utils" "^7.21.5"
+    "@babel/helper-validator-option" "^7.21.0"
     "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression" "^7.18.6"
-    "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining" "^7.18.9"
-    "@babel/plugin-proposal-async-generator-functions" "^7.20.1"
+    "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining" "^7.20.7"
+    "@babel/plugin-proposal-async-generator-functions" "^7.20.7"
     "@babel/plugin-proposal-class-properties" "^7.18.6"
-    "@babel/plugin-proposal-class-static-block" "^7.18.6"
+    "@babel/plugin-proposal-class-static-block" "^7.21.0"
     "@babel/plugin-proposal-dynamic-import" "^7.18.6"
     "@babel/plugin-proposal-export-namespace-from" "^7.18.9"
     "@babel/plugin-proposal-json-strings" "^7.18.6"
-    "@babel/plugin-proposal-logical-assignment-operators" "^7.18.9"
+    "@babel/plugin-proposal-logical-assignment-operators" "^7.20.7"
     "@babel/plugin-proposal-nullish-coalescing-operator" "^7.18.6"
     "@babel/plugin-proposal-numeric-separator" "^7.18.6"
-    "@babel/plugin-proposal-object-rest-spread" "^7.20.2"
+    "@babel/plugin-proposal-object-rest-spread" "^7.20.7"
     "@babel/plugin-proposal-optional-catch-binding" "^7.18.6"
-    "@babel/plugin-proposal-optional-chaining" "^7.18.9"
+    "@babel/plugin-proposal-optional-chaining" "^7.21.0"
     "@babel/plugin-proposal-private-methods" "^7.18.6"
-    "@babel/plugin-proposal-private-property-in-object" "^7.18.6"
+    "@babel/plugin-proposal-private-property-in-object" "^7.21.0"
     "@babel/plugin-proposal-unicode-property-regex" "^7.18.6"
     "@babel/plugin-syntax-async-generators" "^7.8.4"
     "@babel/plugin-syntax-class-properties" "^7.12.13"
@@ -826,6 +826,7 @@
     "@babel/plugin-syntax-dynamic-import" "^7.8.3"
     "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
     "@babel/plugin-syntax-import-assertions" "^7.20.0"
+    "@babel/plugin-syntax-import-meta" "^7.10.4"
     "@babel/plugin-syntax-json-strings" "^7.8.3"
     "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
     "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
@@ -835,40 +836,40 @@
     "@babel/plugin-syntax-optional-chaining" "^7.8.3"
     "@babel/plugin-syntax-private-property-in-object" "^7.14.5"
     "@babel/plugin-syntax-top-level-await" "^7.14.5"
-    "@babel/plugin-transform-arrow-functions" "^7.18.6"
-    "@babel/plugin-transform-async-to-generator" "^7.18.6"
+    "@babel/plugin-transform-arrow-functions" "^7.21.5"
+    "@babel/plugin-transform-async-to-generator" "^7.20.7"
     "@babel/plugin-transform-block-scoped-functions" "^7.18.6"
-    "@babel/plugin-transform-block-scoping" "^7.20.2"
-    "@babel/plugin-transform-classes" "^7.20.2"
-    "@babel/plugin-transform-computed-properties" "^7.18.9"
-    "@babel/plugin-transform-destructuring" "^7.20.2"
+    "@babel/plugin-transform-block-scoping" "^7.21.0"
+    "@babel/plugin-transform-classes" "^7.21.0"
+    "@babel/plugin-transform-computed-properties" "^7.21.5"
+    "@babel/plugin-transform-destructuring" "^7.21.3"
     "@babel/plugin-transform-dotall-regex" "^7.18.6"
     "@babel/plugin-transform-duplicate-keys" "^7.18.9"
     "@babel/plugin-transform-exponentiation-operator" "^7.18.6"
-    "@babel/plugin-transform-for-of" "^7.18.8"
+    "@babel/plugin-transform-for-of" "^7.21.5"
     "@babel/plugin-transform-function-name" "^7.18.9"
     "@babel/plugin-transform-literals" "^7.18.9"
     "@babel/plugin-transform-member-expression-literals" "^7.18.6"
-    "@babel/plugin-transform-modules-amd" "^7.19.6"
-    "@babel/plugin-transform-modules-commonjs" "^7.19.6"
-    "@babel/plugin-transform-modules-systemjs" "^7.19.6"
+    "@babel/plugin-transform-modules-amd" "^7.20.11"
+    "@babel/plugin-transform-modules-commonjs" "^7.21.5"
+    "@babel/plugin-transform-modules-systemjs" "^7.20.11"
     "@babel/plugin-transform-modules-umd" "^7.18.6"
-    "@babel/plugin-transform-named-capturing-groups-regex" "^7.19.1"
+    "@babel/plugin-transform-named-capturing-groups-regex" "^7.20.5"
     "@babel/plugin-transform-new-target" "^7.18.6"
     "@babel/plugin-transform-object-super" "^7.18.6"
-    "@babel/plugin-transform-parameters" "^7.20.1"
+    "@babel/plugin-transform-parameters" "^7.21.3"
     "@babel/plugin-transform-property-literals" "^7.18.6"
-    "@babel/plugin-transform-regenerator" "^7.18.6"
+    "@babel/plugin-transform-regenerator" "^7.21.5"
     "@babel/plugin-transform-reserved-words" "^7.18.6"
     "@babel/plugin-transform-shorthand-properties" "^7.18.6"
-    "@babel/plugin-transform-spread" "^7.19.0"
+    "@babel/plugin-transform-spread" "^7.20.7"
     "@babel/plugin-transform-sticky-regex" "^7.18.6"
     "@babel/plugin-transform-template-literals" "^7.18.9"
     "@babel/plugin-transform-typeof-symbol" "^7.18.9"
-    "@babel/plugin-transform-unicode-escapes" "^7.18.10"
+    "@babel/plugin-transform-unicode-escapes" "^7.21.5"
     "@babel/plugin-transform-unicode-regex" "^7.18.6"
     "@babel/preset-modules" "^0.1.5"
-    "@babel/types" "^7.20.2"
+    "@babel/types" "^7.21.5"
     babel-plugin-polyfill-corejs2 "^0.3.3"
     babel-plugin-polyfill-corejs3 "^0.6.0"
     babel-plugin-polyfill-regenerator "^0.4.1"
@@ -877,7 +878,7 @@
 
 "@babel/preset-modules@^0.1.5":
   version "0.1.5"
-  resolved "https://registry.npmjs.org/@babel/preset-modules/-/preset-modules-0.1.5.tgz"
+  resolved "https://registry.yarnpkg.com/@babel/preset-modules/-/preset-modules-0.1.5.tgz#ef939d6e7f268827e1841638dc6ff95515e115d9"
   integrity sha512-A57th6YRG7oR3cq/yt/Y84MvGgE0eJG2F1JLhKuyG+jFxEgrd/HAMJatiFtmOiZurz+0DkrvbheCLaV5f2JfjA==
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
@@ -886,59 +887,64 @@
     "@babel/types" "^7.4.4"
     esutils "^2.0.2"
 
-"@babel/runtime@^7.1.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.15.4", "@babel/runtime@^7.18.3", "@babel/runtime@^7.20.13", "@babel/runtime@^7.20.7", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
-  version "7.20.13"
-  resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.20.13.tgz"
-  integrity sha512-gt3PKXs0DBoL9xCvOIIZ2NEqAGZqHjAnmVbfQtB620V0uReIQutpel14KcneZuer7UioY8ALKZ7iocavvzTNFA==
+"@babel/regjsgen@^0.8.0":
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/@babel/regjsgen/-/regjsgen-0.8.0.tgz#f0ba69b075e1f05fb2825b7fad991e7adbb18310"
+  integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==
+
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.15.4", "@babel/runtime@^7.18.3", "@babel/runtime@^7.20.13", "@babel/runtime@^7.20.7", "@babel/runtime@^7.21.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
+  version "7.21.5"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.21.5.tgz#8492dddda9644ae3bda3b45eabe87382caee7200"
+  integrity sha512-8jI69toZqqcsnqGGqwGS4Qb1VwLOEp4hz+CXPywcvjs60u3B4Pom/U/7rm4W8tMOYEB+E9wgD0mW1l3r8qlI9Q==
   dependencies:
     regenerator-runtime "^0.13.11"
 
 "@babel/template@^7.18.10", "@babel/template@^7.20.7":
   version "7.20.7"
-  resolved "https://registry.npmjs.org/@babel/template/-/template-7.20.7.tgz"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.20.7.tgz#a15090c2839a83b02aa996c0b4994005841fd5a8"
   integrity sha512-8SegXApWe6VoNw0r9JHpSteLKTpTiLZ4rMlGIm9JQ18KiCtyQiAMEazujAHrUS5flrcqYZa75ukev3P6QmUwUw==
   dependencies:
     "@babel/code-frame" "^7.18.6"
     "@babel/parser" "^7.20.7"
     "@babel/types" "^7.20.7"
 
-"@babel/traverse@^7.20.10", "@babel/traverse@^7.20.12", "@babel/traverse@^7.20.13", "@babel/traverse@^7.20.5", "@babel/traverse@^7.20.7":
-  version "7.20.13"
-  resolved "https://registry.npmjs.org/@babel/traverse/-/traverse-7.20.13.tgz"
-  integrity sha512-kMJXfF0T6DIS9E8cgdLCSAL+cuCK+YEZHWiLK0SXpTo8YRj5lpJu3CDNKiIBCne4m9hhTIqUg6SYTAI39tAiVQ==
+"@babel/traverse@^7.20.1", "@babel/traverse@^7.20.5", "@babel/traverse@^7.21.5":
+  version "7.21.5"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.21.5.tgz#ad22361d352a5154b498299d523cf72998a4b133"
+  integrity sha512-AhQoI3YjWi6u/y/ntv7k48mcrCXmus0t79J9qPNlk/lAsFlCiJ047RmbfMOawySTHtywXhbXgpx/8nXMYd+oFw==
   dependencies:
-    "@babel/code-frame" "^7.18.6"
-    "@babel/generator" "^7.20.7"
-    "@babel/helper-environment-visitor" "^7.18.9"
-    "@babel/helper-function-name" "^7.19.0"
+    "@babel/code-frame" "^7.21.4"
+    "@babel/generator" "^7.21.5"
+    "@babel/helper-environment-visitor" "^7.21.5"
+    "@babel/helper-function-name" "^7.21.0"
     "@babel/helper-hoist-variables" "^7.18.6"
     "@babel/helper-split-export-declaration" "^7.18.6"
-    "@babel/parser" "^7.20.13"
-    "@babel/types" "^7.20.7"
+    "@babel/parser" "^7.21.5"
+    "@babel/types" "^7.21.5"
     debug "^4.1.0"
     globals "^11.1.0"
 
-"@babel/types@^7.18.6", "@babel/types@^7.18.9", "@babel/types@^7.19.0", "@babel/types@^7.20.0", "@babel/types@^7.20.2", "@babel/types@^7.20.5", "@babel/types@^7.20.7", "@babel/types@^7.4.4":
-  version "7.20.7"
-  resolved "https://registry.npmjs.org/@babel/types/-/types-7.20.7.tgz"
-  integrity sha512-69OnhBxSSgK0OzTJai4kyPDiKTIe3j+ctaHdIGVbRahTLAT7L3R9oeXHC2aVSuGYt3cVnoAMDmOCgJ2yaiLMvg==
+"@babel/types@^7.18.6", "@babel/types@^7.18.9", "@babel/types@^7.20.0", "@babel/types@^7.20.2", "@babel/types@^7.20.5", "@babel/types@^7.20.7", "@babel/types@^7.21.0", "@babel/types@^7.21.4", "@babel/types@^7.21.5", "@babel/types@^7.4.4":
+  version "7.21.5"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.21.5.tgz#18dfbd47c39d3904d5db3d3dc2cc80bedb60e5b6"
+  integrity sha512-m4AfNvVF2mVC/F7fDEdH2El3HzUg9It/XsCxZiOTTA3m3qYfcSVSbTfM6Q9xG+hYDniZssYhlXKKUMD5m8tF4Q==
   dependencies:
-    "@babel/helper-string-parser" "^7.19.4"
+    "@babel/helper-string-parser" "^7.21.5"
     "@babel/helper-validator-identifier" "^7.19.1"
     to-fast-properties "^2.0.0"
 
-"@blueprintjs/colors@^4.1.15":
-  version "4.1.15"
-  resolved "https://registry.npmjs.org/@blueprintjs/colors/-/colors-4.1.15.tgz"
-  integrity sha512-iOwfwE3tOXiM+dmwkdK7fY6dCGqg7yBLYAUHrmPUeYscrqZ8gJqUXAtDumuWMoLvm1SEz5SVIEfm16QnHd4efw==
+"@blueprintjs/colors@^4.1.22":
+  version "4.1.22"
+  resolved "https://registry.yarnpkg.com/@blueprintjs/colors/-/colors-4.1.22.tgz#033cbf03705100d5114d54161c225eec5cfeacfb"
+  integrity sha512-qcC7nWW9TTSS7aDxE5gbo9vrxo+IOpC6/Kzpi0rdOBYFDd02PppCdnCCjGYw1/IopSsZ9EWqDLmD7zuy0H+WEA==
 
-"@blueprintjs/core@^4.16.3":
-  version "4.16.3"
-  resolved "https://registry.npmjs.org/@blueprintjs/core/-/core-4.16.3.tgz"
-  integrity sha512-XFqcuwG9QBP/6LxegzDBv7PlTY8LdPM53nfJ8nRcUMcHmHoZ8HyYA9f40lMbiUTg4yAFz50Yw8Fc8uAja267ag==
+"@blueprintjs/core@^4.16.3", "@blueprintjs/core@^4.18.0":
+  version "4.18.0"
+  resolved "https://registry.yarnpkg.com/@blueprintjs/core/-/core-4.18.0.tgz#4e7ffe1f7d2490212b814fe2b34724c832dbbed3"
+  integrity sha512-BZk+wglL5KGcZC9/ziJWT6TH7frjW469O6FPSN1thFdzKYj6XATpfTSP0g0L90UW6r8yskCcUOo1Faw3jRoFTA==
   dependencies:
-    "@blueprintjs/colors" "^4.1.15"
-    "@blueprintjs/icons" "^4.13.2"
+    "@blueprintjs/colors" "^4.1.22"
+    "@blueprintjs/icons" "^4.15.0"
     "@juggle/resize-observer" "^3.4.0"
     "@types/dom4" "^2.0.2"
     classnames "^2.3.1"
@@ -947,37 +953,36 @@
     popper.js "^1.16.1"
     react-popper "^1.3.11"
     react-transition-group "^4.4.5"
-    tslib "~2.3.1"
+    tslib "~2.5.0"
 
-"@blueprintjs/icons@^4.13.2":
-  version "4.13.2"
-  resolved "https://registry.npmjs.org/@blueprintjs/icons/-/icons-4.13.2.tgz"
-  integrity sha512-BxDSkpF2YCyGwcl2Ke4JX+UdQP++s/PKYeYt7SmllZaIXY/sEws3fgop9EfN0kfKGofv9k1VwU/F4uGNRJz/5A==
+"@blueprintjs/icons@^4.15.0":
+  version "4.15.0"
+  resolved "https://registry.yarnpkg.com/@blueprintjs/icons/-/icons-4.15.0.tgz#f7e26f19c882a96f611f0874d1e159f7b55bdd91"
+  integrity sha512-h8+y4iXjpHsLE/7NU9GNhxnPyiYXgJPyJ/NmushtmcVrFn9tT5HlEc1+5bmxqv4osROQLyWJ9U5gDKu1rF72Ag==
   dependencies:
     change-case "^4.1.2"
     classnames "^2.3.1"
-    tslib "~2.3.1"
+    tslib "~2.5.0"
 
 "@blueprintjs/popover2@^1.13.3":
-  version "1.13.3"
-  resolved "https://registry.npmjs.org/@blueprintjs/popover2/-/popover2-1.13.3.tgz"
-  integrity sha512-FJ1QamBHRf45rIU3iDbGRnSAOM7SCI+I9DjBCWQlmjNa8fCJXOPd7mmLuolhlNfI9kdgRs0+6RgCifonIJ9BTg==
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/@blueprintjs/popover2/-/popover2-1.14.1.tgz#f56c7c21c0cf6304bfd4d4b2cc32d75ef472561f"
+  integrity sha512-/KU4qb4BTny4JKUt4OOl9y2L5NJd7PRCL5Ti58ctCG3bOa6y/hh3vgQWq7jhSGz+dVGxowGMtvEjvaj1rZKSew==
   dependencies:
-    "@blueprintjs/core" "^4.16.3"
+    "@blueprintjs/core" "^4.18.0"
     "@juggle/resize-observer" "^3.4.0"
-    "@popperjs/core" "^2.11.6"
+    "@popperjs/core" "^2.11.7"
     classnames "^2.3.1"
     dom4 "^2.1.5"
     react-popper "^2.3.0"
-    tslib "~2.3.1"
+    tslib "~2.5.0"
 
-"@emotion/babel-plugin@^11.10.5":
-  version "11.10.5"
-  resolved "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.10.5.tgz"
-  integrity sha512-xE7/hyLHJac7D2Ve9dKroBBZqBT7WuPQmWcq7HSGb84sUuP4mlOWoB8dvVfD9yk5DHkU1m6RW7xSoDtnQHNQeA==
+"@emotion/babel-plugin@^11.10.8":
+  version "11.10.8"
+  resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.10.8.tgz#bae325c902937665d00684038fd5294223ef9e1d"
+  integrity sha512-gxNky50AJL3AlkbjvTARiwAqei6/tNUxDZPSKd+3jqWVM3AmdVTTdpjHorR/an/M0VJqdsuq5oGcFH+rjtyujQ==
   dependencies:
     "@babel/helper-module-imports" "^7.16.7"
-    "@babel/plugin-syntax-jsx" "^7.17.12"
     "@babel/runtime" "^7.18.3"
     "@emotion/hash" "^0.9.0"
     "@emotion/memoize" "^0.8.0"
@@ -987,55 +992,55 @@
     escape-string-regexp "^4.0.0"
     find-root "^1.1.0"
     source-map "^0.5.7"
-    stylis "4.1.3"
+    stylis "4.1.4"
 
-"@emotion/cache@^11.10.5":
-  version "11.10.5"
-  resolved "https://registry.npmjs.org/@emotion/cache/-/cache-11.10.5.tgz"
-  integrity sha512-dGYHWyzTdmK+f2+EnIGBpkz1lKc4Zbj2KHd4cX3Wi8/OWr5pKslNjc3yABKH4adRGCvSX4VDC0i04mrrq0aiRA==
+"@emotion/cache@^11.10.8":
+  version "11.10.8"
+  resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.10.8.tgz#3b39b4761bea0ae2f4f07f0a425eec8b6977c03e"
+  integrity sha512-5fyqGHi51LU95o7qQ/vD1jyvC4uCY5GcBT+UgP4LHdpO9jPDlXqhrRr9/wCKmfoAvh5G/F7aOh4MwQa+8uEqhA==
   dependencies:
     "@emotion/memoize" "^0.8.0"
     "@emotion/sheet" "^1.2.1"
     "@emotion/utils" "^1.2.0"
     "@emotion/weak-memoize" "^0.3.0"
-    stylis "4.1.3"
+    stylis "4.1.4"
 
-"@emotion/css@^11.1.3":
-  version "11.10.5"
-  resolved "https://registry.npmjs.org/@emotion/css/-/css-11.10.5.tgz"
-  integrity sha512-maJy0wG82hWsiwfJpc3WrYsyVwUbdu+sdIseKUB+/OLjB8zgc3tqkT6eO0Yt0AhIkJwGGnmMY/xmQwEAgQ4JHA==
+"@emotion/css@^11.10.6":
+  version "11.10.8"
+  resolved "https://registry.yarnpkg.com/@emotion/css/-/css-11.10.8.tgz#9dec9996ad9a1cc28ec8d26b1b27ab0b8f6fb053"
+  integrity sha512-i9k0HKUKz5KuZbzVpMpcg1OZWDG+Ete9wIa6OT4sOaxE64PG8S8H8H6sVYHvkCmAgcO+hbxT1XMr5pz/jTranQ==
   dependencies:
-    "@emotion/babel-plugin" "^11.10.5"
-    "@emotion/cache" "^11.10.5"
+    "@emotion/babel-plugin" "^11.10.8"
+    "@emotion/cache" "^11.10.8"
     "@emotion/serialize" "^1.1.1"
     "@emotion/sheet" "^1.2.1"
     "@emotion/utils" "^1.2.0"
 
 "@emotion/hash@^0.9.0":
   version "0.9.0"
-  resolved "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.0.tgz"
+  resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.0.tgz#c5153d50401ee3c027a57a177bc269b16d889cb7"
   integrity sha512-14FtKiHhy2QoPIzdTcvh//8OyBlknNs2nXRwIhG904opCby3l+9Xaf/wuPvICBF0rc1ZCNBd3nKe9cd2mecVkQ==
 
 "@emotion/is-prop-valid@^1.2.0":
   version "1.2.0"
-  resolved "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.0.tgz"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.2.0.tgz#7f2d35c97891669f7e276eb71c83376a5dc44c83"
   integrity sha512-3aDpDprjM0AwaxGE09bOPkNxHpBd+kA6jty3RnaEXdweX1DF1U3VQpPYb0g1IStAuK7SVQ1cy+bNBBKp4W3Fjg==
   dependencies:
     "@emotion/memoize" "^0.8.0"
 
 "@emotion/memoize@^0.8.0":
   version "0.8.0"
-  resolved "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.0.tgz"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.0.tgz#f580f9beb67176fa57aae70b08ed510e1b18980f"
   integrity sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA==
 
-"@emotion/react@^11.9.0":
-  version "11.10.5"
-  resolved "https://registry.npmjs.org/@emotion/react/-/react-11.10.5.tgz"
-  integrity sha512-TZs6235tCJ/7iF6/rvTaOH4oxQg2gMAcdHemjwLKIjKz4rRuYe1HJ2TQJKnAcRAfOUDdU8XoDadCe1rl72iv8A==
+"@emotion/react@^11.10.6":
+  version "11.10.8"
+  resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.10.8.tgz#02e274ecb45e03ab9d7a8eb9f0f0c064613eaf7b"
+  integrity sha512-ZfGfiABtJ1P1OXqOBsW08EgCDp5fK6C5I8hUJauc/VcJBGSzqAirMnFslhFWnZJ/w5HxPI36XbvMV0l4KZHl+w==
   dependencies:
     "@babel/runtime" "^7.18.3"
-    "@emotion/babel-plugin" "^11.10.5"
-    "@emotion/cache" "^11.10.5"
+    "@emotion/babel-plugin" "^11.10.8"
+    "@emotion/cache" "^11.10.8"
     "@emotion/serialize" "^1.1.1"
     "@emotion/use-insertion-effect-with-fallbacks" "^1.0.0"
     "@emotion/utils" "^1.2.0"
@@ -1044,7 +1049,7 @@
 
 "@emotion/serialize@^1.1.1":
   version "1.1.1"
-  resolved "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.1.tgz"
+  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.1.1.tgz#0595701b1902feded8a96d293b26be3f5c1a5cf0"
   integrity sha512-Zl/0LFggN7+L1liljxXdsVSVlg6E/Z/olVWpfxUTxOAmi8NU7YoeWeLfi1RmnB2TATHoaWwIBRoL+FvAJiTUQA==
   dependencies:
     "@emotion/hash" "^0.9.0"
@@ -1055,16 +1060,16 @@
 
 "@emotion/sheet@^1.2.1":
   version "1.2.1"
-  resolved "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.1.tgz"
+  resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.2.1.tgz#0767e0305230e894897cadb6c8df2c51e61a6c2c"
   integrity sha512-zxRBwl93sHMsOj4zs+OslQKg/uhF38MB+OMKoCrVuS0nyTkqnau+BM3WGEoOptg9Oz45T/aIGs1qbVAsEFo3nA==
 
-"@emotion/styled@^11.3.0":
-  version "11.10.5"
-  resolved "https://registry.npmjs.org/@emotion/styled/-/styled-11.10.5.tgz"
-  integrity sha512-8EP6dD7dMkdku2foLoruPCNkRevzdcBaY6q0l0OsbyJK+x8D9HWjX27ARiSIKNF634hY9Zdoedh8bJCiva8yZw==
+"@emotion/styled@^11.10.6":
+  version "11.10.8"
+  resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-11.10.8.tgz#a3fd68efd90bd7e8a06b82b95adec643d386fa69"
+  integrity sha512-gow0lF4Uw/QEdX2REMhI8v6wLOabPKJ+4HKNF0xdJ2DJdznN6fxaXpQOx6sNkyBhSUL558Rmcu1Lq/MYlVo4vw==
   dependencies:
     "@babel/runtime" "^7.18.3"
-    "@emotion/babel-plugin" "^11.10.5"
+    "@emotion/babel-plugin" "^11.10.8"
     "@emotion/is-prop-valid" "^1.2.0"
     "@emotion/serialize" "^1.1.1"
     "@emotion/use-insertion-effect-with-fallbacks" "^1.0.0"
@@ -1072,27 +1077,39 @@
 
 "@emotion/unitless@^0.8.0":
   version "0.8.0"
-  resolved "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.0.tgz"
+  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.8.0.tgz#a4a36e9cbdc6903737cd20d38033241e1b8833db"
   integrity sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw==
 
 "@emotion/use-insertion-effect-with-fallbacks@^1.0.0":
   version "1.0.0"
-  resolved "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.0.tgz"
+  resolved "https://registry.yarnpkg.com/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.0.tgz#ffadaec35dbb7885bd54de3fa267ab2f860294df"
   integrity sha512-1eEgUGmkaljiBnRMTdksDV1W4kUnmwgp7X9G8B++9GYwl1lUdqSndSriIrTJ0N7LQaoauY9JJ2yhiOYK5+NI4A==
 
 "@emotion/utils@^1.2.0":
   version "1.2.0"
-  resolved "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.0.tgz"
+  resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.2.0.tgz#9716eaccbc6b5ded2ea5a90d65562609aab0f561"
   integrity sha512-sn3WH53Kzpw8oQ5mgMmIzzyAaH2ZqFEbozVVBSYp538E06OSE6ytOp7pRAjNQR+Q/orwqdQYJSe2m3hCOeznkw==
 
 "@emotion/weak-memoize@^0.3.0":
   version "0.3.0"
-  resolved "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.0.tgz"
+  resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.3.0.tgz#ea89004119dc42db2e1dba0f97d553f7372f6fcb"
   integrity sha512-AHPmaAx+RYfZz0eYu6Gviiagpmiyw98ySSlQvCUhVGDRtDFe4DBS0x1bSjdF3gqUDYOczB+yYvBTtEylYSdRhg==
 
+"@eslint-community/eslint-utils@^4.2.0":
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz#a23514e8fb9af1269d5f7788aa556798d61c6b59"
+  integrity sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==
+  dependencies:
+    eslint-visitor-keys "^3.3.0"
+
+"@eslint-community/regexpp@^4.4.0":
+  version "4.5.1"
+  resolved "https://registry.yarnpkg.com/@eslint-community/regexpp/-/regexpp-4.5.1.tgz#cdd35dce4fa1a89a4fd42b1599eb35b3af408884"
+  integrity sha512-Z5ba73P98O1KUYCCJTUeVpja9RcGoMdncZ6T49FCUl2lN38JtCJ+3WgIDBv0AuY4WChU5PmtJmOCTlN6FZTFKQ==
+
 "@eslint/eslintrc@^0.4.3":
   version "0.4.3"
-  resolved "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.3.tgz"
+  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.4.3.tgz#9e42981ef035beb3dd49add17acb96e8ff6f394c"
   integrity sha512-J6KFFz5QCYUJq3pf0mjEcCJVERbzv71PUIDczuh9JkwGEzced6CO5ADLHB1rbf/+oPBtoPfMYNOpGDzCANlbXw==
   dependencies:
     ajv "^6.12.4"
@@ -1105,14 +1122,14 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
-"@eslint/eslintrc@^1.4.1":
-  version "1.4.1"
-  resolved "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.4.1.tgz"
-  integrity sha512-XXrH9Uarn0stsyldqDYq8r++mROmWRI1xKMXa640Bb//SY1+ECYX6VzT6Lcx5frD0V30XieqJ0oX9I2Xj5aoMA==
+"@eslint/eslintrc@^2.0.2":
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-2.0.2.tgz#01575e38707add677cf73ca1589abba8da899a02"
+  integrity sha512-3W4f5tDUra+pA+FzgugqL2pRimUTDJWKr7BINqOpkZrC0uYI0NIc0/JFgBROCU07HR6GieA5m3/rsPIhDmCXTQ==
   dependencies:
     ajv "^6.12.4"
     debug "^4.3.2"
-    espree "^9.4.0"
+    espree "^9.5.1"
     globals "^13.19.0"
     ignore "^5.2.0"
     import-fresh "^3.2.1"
@@ -1120,21 +1137,26 @@
     minimatch "^3.1.2"
     strip-json-comments "^3.1.1"
 
+"@eslint/js@8.39.0":
+  version "8.39.0"
+  resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.39.0.tgz#58b536bcc843f4cd1e02a7e6171da5c040f4d44b"
+  integrity sha512-kf9RB0Fg7NZfap83B3QOqOGg9QmD9yBudqQXzzOtn3i4y7ZUXe5ONeW34Gwi+TxhH4mvj72R1Zc300KUMa9Bng==
+
 "@headlessui/react@^1.7.3":
-  version "1.7.10"
-  resolved "https://registry.npmjs.org/@headlessui/react/-/react-1.7.10.tgz"
-  integrity sha512-1m66h/5eayTEZVT2PI13/2PG3EVC7a9XalmUtVSC8X76pcyKYMuyX1XAL2RUtCr8WhoMa/KrDEyoeU5v+kSQOw==
+  version "1.7.14"
+  resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.7.14.tgz#75f19552c535113640fe8a3a40e71474f49e89c9"
+  integrity sha512-znzdq9PG8rkwcu9oQ2FwIy0ZFtP9Z7ycS+BAqJ3R5EIqC/0bJGvhT7193rFf+45i9nnPsYvCQVW4V/bB9Xc+gA==
   dependencies:
     client-only "^0.0.1"
 
 "@heroicons/react@^2.0.12":
-  version "2.0.14"
-  resolved "https://registry.npmjs.org/@heroicons/react/-/react-2.0.14.tgz"
-  integrity sha512-eFL4if6L7woL1fUvk/jjXx4z9NxVESHHrQnEd2qKVelTFTIr/3VLGWdPb0biia9ZVe26P0JSs/xmOlRNur3SrQ==
+  version "2.0.17"
+  resolved "https://registry.yarnpkg.com/@heroicons/react/-/react-2.0.17.tgz#42a8086bc434ceefc03592f20c4e81b11e915cf8"
+  integrity sha512-90GMZktkA53YbNzHp6asVEDevUQCMtxWH+2UK2S8OpnLEu7qckTJPhNxNQG52xIR1WFTwFqtH6bt7a60ZNcLLA==
 
 "@humanwhocodes/config-array@^0.11.8":
   version "0.11.8"
-  resolved "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.8.tgz"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.8.tgz#03595ac2075a4dc0f191cc2131de14fbd7d410b9"
   integrity sha512-UybHIJzJnR5Qc/MsD9Kr+RpO2h+/P1GhOwdiLPXK5TWk5sgTdu88bTD9UP+CKbPPh5Rni1u0GjAdYQLemG8g+g==
   dependencies:
     "@humanwhocodes/object-schema" "^1.2.1"
@@ -1143,7 +1165,7 @@
 
 "@humanwhocodes/config-array@^0.5.0":
   version "0.5.0"
-  resolved "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.5.0.tgz"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.5.0.tgz#1407967d4c6eecd7388f83acf1eaf4d0c6e58ef9"
   integrity sha512-FagtKFz74XrTl7y6HCzQpwDfXP0yhxe9lHLD1UZxjvZIcbyRz8zTFF/yYNfSfzU414eDwZ1SrO0Qvtyf+wFMQg==
   dependencies:
     "@humanwhocodes/object-schema" "^1.2.0"
@@ -1152,17 +1174,17 @@
 
 "@humanwhocodes/module-importer@^1.0.1":
   version "1.0.1"
-  resolved "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz#af5b2691a22b44be847b0ca81641c5fb6ad0172c"
   integrity sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==
 
 "@humanwhocodes/object-schema@^1.2.0", "@humanwhocodes/object-schema@^1.2.1":
   version "1.2.1"
-  resolved "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45"
   integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==
 
 "@hypnosphi/create-react-context@^0.3.1":
   version "0.3.1"
-  resolved "https://registry.npmjs.org/@hypnosphi/create-react-context/-/create-react-context-0.3.1.tgz"
+  resolved "https://registry.yarnpkg.com/@hypnosphi/create-react-context/-/create-react-context-0.3.1.tgz#f8bfebdc7665f5d426cba3753e0e9c7d3154d7c6"
   integrity sha512-V1klUed202XahrWJLLOT3EXNeCpFHCcJntdFGI15ntCwau+jfT386w7OFTMaCqOgXUH1fa0w/I1oZs+i/Rfr0A==
   dependencies:
     gud "^1.0.0"
@@ -1170,7 +1192,7 @@
 
 "@icons/material@^0.2.4":
   version "0.2.4"
-  resolved "https://registry.npmjs.org/@icons/material/-/material-0.2.4.tgz"
+  resolved "https://registry.yarnpkg.com/@icons/material/-/material-0.2.4.tgz#e90c9f71768b3736e76d7dd6783fc6c2afa88bc8"
   integrity sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw==
 
 "@jitsu/nextjs@^3.1.5":
@@ -1186,18 +1208,10 @@
   resolved "https://registry.yarnpkg.com/@jitsu/sdk-js/-/sdk-js-3.1.5.tgz#3d0d92ccc01b621cbe67484c6e246d5ff8721de8"
   integrity sha512-e7P8uvGBNwWCC864MItcYSv0IT2+nwYiX8QXZ0lfyG8hutEXXX9Yt2/+MynXuGxMIoIrJ+j0bWVu20k9rrhxSg==
 
-"@jridgewell/gen-mapping@^0.1.0":
-  version "0.1.1"
-  resolved "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz"
-  integrity sha512-sQXCasFk+U8lWYEe66WxRDOE9PjVz4vSM51fTu3Hw+ClTpUSQb718772vH3pyS5pShp6lvQM7SxgIDXXXmOX7w==
-  dependencies:
-    "@jridgewell/set-array" "^1.0.0"
-    "@jridgewell/sourcemap-codec" "^1.4.10"
-
 "@jridgewell/gen-mapping@^0.3.0", "@jridgewell/gen-mapping@^0.3.2":
-  version "0.3.2"
-  resolved "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz"
-  integrity sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz#7e02e6eb5df901aaedb08514203b096614024098"
+  integrity sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==
   dependencies:
     "@jridgewell/set-array" "^1.0.1"
     "@jridgewell/sourcemap-codec" "^1.4.10"
@@ -1205,147 +1219,187 @@
 
 "@jridgewell/resolve-uri@3.1.0":
   version "3.1.0"
-  resolved "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz"
+  resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz#2203b118c157721addfe69d47b70465463066d78"
   integrity sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==
 
-"@jridgewell/set-array@^1.0.0", "@jridgewell/set-array@^1.0.1":
+"@jridgewell/set-array@^1.0.1":
   version "1.1.2"
-  resolved "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz"
+  resolved "https://registry.yarnpkg.com/@jridgewell/set-array/-/set-array-1.1.2.tgz#7c6cf998d6d20b914c0a55a91ae928ff25965e72"
   integrity sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==
 
 "@jridgewell/source-map@^0.3.2":
-  version "0.3.2"
-  resolved "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.2.tgz"
-  integrity sha512-m7O9o2uR8k2ObDysZYzdfhb08VuEml5oWGiosa1VdaPZ/A6QyPkAJuwN0Q1lhULOf6B7MtQmHENS743hWtCrgw==
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/@jridgewell/source-map/-/source-map-0.3.3.tgz#8108265659d4c33e72ffe14e33d6cc5eb59f2fda"
+  integrity sha512-b+fsZXeLYi9fEULmfBrhxn4IrPlINf8fiNarzTof004v3lFdntdwa9PF7vFJqm3mg7s+ScJMxXaE3Acp1irZcg==
   dependencies:
     "@jridgewell/gen-mapping" "^0.3.0"
     "@jridgewell/trace-mapping" "^0.3.9"
 
-"@jridgewell/sourcemap-codec@1.4.14", "@jridgewell/sourcemap-codec@^1.4.10", "@jridgewell/sourcemap-codec@^1.4.13":
+"@jridgewell/sourcemap-codec@1.4.14":
   version "1.4.14"
-  resolved "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz"
+  resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz#add4c98d341472a289190b424efbdb096991bb24"
   integrity sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==
 
-"@jridgewell/trace-mapping@^0.3.14", "@jridgewell/trace-mapping@^0.3.9":
-  version "0.3.17"
-  resolved "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.17.tgz"
-  integrity sha512-MCNzAp77qzKca9+W/+I0+sEpaUnZoeasnghNeVc41VZCEKaCH73Vq3BZZ/SzWIgrqE4H4ceI+p+b6C0mHf9T4g==
+"@jridgewell/sourcemap-codec@^1.4.10", "@jridgewell/sourcemap-codec@^1.4.13":
+  version "1.4.15"
+  resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz#d7c6e6755c78567a951e04ab52ef0fd26de59f32"
+  integrity sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==
+
+"@jridgewell/trace-mapping@^0.3.17", "@jridgewell/trace-mapping@^0.3.9":
+  version "0.3.18"
+  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.18.tgz#25783b2086daf6ff1dcb53c9249ae480e4dd4cd6"
+  integrity sha512-w+niJYzMHdd7USdiH2U6869nqhD2nbfZXND5Yp93qIbEmnDNk7PD48o+YchRVpzMU7M6jVCbenTR7PA1FLQ9pA==
   dependencies:
     "@jridgewell/resolve-uri" "3.1.0"
     "@jridgewell/sourcemap-codec" "1.4.14"
 
 "@juggle/resize-observer@^3.4.0":
   version "3.4.0"
-  resolved "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.4.0.tgz"
+  resolved "https://registry.yarnpkg.com/@juggle/resize-observer/-/resize-observer-3.4.0.tgz#08d6c5e20cf7e4cc02fd181c4b0c225cd31dbb60"
   integrity sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==
 
-"@linaria/core@3.0.0-beta.13":
-  version "3.0.0-beta.13"
-  resolved "https://registry.npmjs.org/@linaria/core/-/core-3.0.0-beta.13.tgz"
-  integrity sha512-3zEi5plBCOsEzUneRVuQb+2SAx3qaC1dj0FfFAI6zIJQoDWu0dlSwKijMRack7oO9tUWrchfj3OkKQAd1LBdVg==
+"@linaria/core@4.2.9":
+  version "4.2.9"
+  resolved "https://registry.yarnpkg.com/@linaria/core/-/core-4.2.9.tgz#4917bde18d064a29cff4fd86aa99621f953a2a2c"
+  integrity sha512-ELcu37VNVOT/PU0L6WDIN+aLzNFyJrqoBYT0CucGOCAmODbojUMCv8oJYRbWzA3N34w1t199dN4UFdfRWFG2rg==
+  dependencies:
+    "@linaria/logger" "^4.0.0"
+    "@linaria/tags" "^4.3.4"
+    "@linaria/utils" "^4.3.3"
 
-"@lingui/core@^3.14.0":
-  version "3.17.1"
-  resolved "https://registry.npmjs.org/@lingui/core/-/core-3.17.1.tgz"
-  integrity sha512-IUR+07aWFDQB8LkMFRM1UWTOj2spPNHukqX+9i9vPDpbPTiNjUO68aHqAXfpnMu/kUJBZJtN6V37wlJi8dc0oQ==
+"@linaria/logger@^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@linaria/logger/-/logger-4.0.0.tgz#6f73eb3cc11d548967a7caf2e7997439e46fca0d"
+  integrity sha512-YnBq0JlDWMEkTOK+tMo5yEVR0f5V//6qMLToGcLhTyM9g9i+IDFn51Z+5q2hLk7RdG4NBPgbcCXYi2w4RKsPeg==
+  dependencies:
+    debug "^4.1.1"
+    picocolors "^1.0.0"
+
+"@linaria/tags@^4.3.4":
+  version "4.3.4"
+  resolved "https://registry.yarnpkg.com/@linaria/tags/-/tags-4.3.4.tgz#3c98108e4b48b8413662b4c62c2b2abdebacaca4"
+  integrity sha512-W8zaLKtC4YFCwkZ9DMu2enCiD/zGyYmFSTzEvJP7ZycdftMizoOrWNOyF9kITyjGdq+jZvAXJz0BZDT6axgIRg==
+  dependencies:
+    "@babel/generator" "^7.20.4"
+    "@linaria/logger" "^4.0.0"
+    "@linaria/utils" "^4.3.3"
+
+"@linaria/utils@^4.3.3":
+  version "4.3.3"
+  resolved "https://registry.yarnpkg.com/@linaria/utils/-/utils-4.3.3.tgz#9f66ae41187e8a2f2cc3471b44935128ebd1dab3"
+  integrity sha512-xSe/tod9A44aIMbtds9fWLNe2TT080lLdRSaoqX+UHsBWqClkrw5cXEt3lm8Vr4hZiXT2r/1AldjuHb9YbUlMg==
+  dependencies:
+    "@babel/core" "^7.20.2"
+    "@babel/plugin-proposal-export-namespace-from" "^7.18.9"
+    "@babel/plugin-syntax-dynamic-import" "^7.8.3"
+    "@babel/plugin-transform-modules-commonjs" "^7.19.6"
+    "@babel/traverse" "^7.20.1"
+    "@babel/types" "^7.20.2"
+    "@linaria/logger" "^4.0.0"
+    babel-merge "^3.0.0"
+
+"@lingui/core@^3.17.2":
+  version "3.17.2"
+  resolved "https://registry.yarnpkg.com/@lingui/core/-/core-3.17.2.tgz#275aa19520477910ddf41a838ef91a8204bea7eb"
+  integrity sha512-YOd068NanznN8lLQqOKPlAY0ill3rrgmiAvPRKuYkrxzJMIHqlIFO/2Kcc/RH5vClOmLfg+wgR4rsHK/kLKelQ==
   dependencies:
     "@babel/runtime" "^7.20.13"
     "@messageformat/parser" "^5.0.0"
     make-plural "^6.2.2"
 
-"@lingui/detect-locale@^3.14.0":
-  version "3.17.1"
-  resolved "https://registry.npmjs.org/@lingui/detect-locale/-/detect-locale-3.17.1.tgz"
-  integrity sha512-3101jgqTtGaSYCLGnz8HxlVP+p3V6V0bE5iOlBFr0wylcii6+FgPGId26JIbAkx4ozraVcR455DMt/urDMAMEQ==
+"@lingui/detect-locale@^3.17.2":
+  version "3.17.2"
+  resolved "https://registry.yarnpkg.com/@lingui/detect-locale/-/detect-locale-3.17.2.tgz#9d7c2839f9ddd061261aaa479b908f06fe7e63f7"
+  integrity sha512-rqyO16lj05WRfBuppo++mPzB1fQBFDhGqEFz5X97CbWXYp6AadOIkrm+pbn114Y2Yumy9QI7Cm4Ptbfk7CXO3Q==
 
 "@messageformat/parser@^5.0.0":
   version "5.0.0"
-  resolved "https://registry.npmjs.org/@messageformat/parser/-/parser-5.0.0.tgz"
+  resolved "https://registry.yarnpkg.com/@messageformat/parser/-/parser-5.0.0.tgz#5737e69d7d4a469998b527710f1891174fc1b262"
   integrity sha512-WiDKhi8F0zQaFU8cXgqq69eYFarCnTVxKcvhAONufKf0oUxbqLMW6JX6rV4Hqh+BEQWGyKKKHY4g1XA6bCLylA==
   dependencies:
     moo "^0.5.1"
 
-"@mui/base@5.0.0-alpha.117":
-  version "5.0.0-alpha.117"
-  resolved "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.117.tgz"
-  integrity sha512-3GlRSZdSrvDQ4k03dSV2rM+97JbNWimFOqGsE7n7Mi8WuBSYCgnPe56bQp3E5cShOrTn11dGH8FRCmVMcCEXqQ==
+"@mui/base@5.0.0-alpha.128":
+  version "5.0.0-alpha.128"
+  resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-alpha.128.tgz#8ce4beb971ac989df0b1d3b2bd3e9274dbfa604f"
+  integrity sha512-wub3wxNN+hUp8hzilMlXX3sZrPo75vsy1cXEQpqdTfIFlE9HprP1jlulFiPg5tfPst2OKmygXr2hhmgvAKRrzQ==
   dependencies:
-    "@babel/runtime" "^7.20.7"
+    "@babel/runtime" "^7.21.0"
     "@emotion/is-prop-valid" "^1.2.0"
-    "@mui/types" "^7.2.3"
-    "@mui/utils" "^5.11.7"
-    "@popperjs/core" "^2.11.6"
+    "@mui/types" "^7.2.4"
+    "@mui/utils" "^5.12.3"
+    "@popperjs/core" "^2.11.7"
     clsx "^1.2.1"
     prop-types "^15.8.1"
     react-is "^18.2.0"
 
-"@mui/core-downloads-tracker@^5.11.8":
-  version "5.11.8"
-  resolved "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.11.8.tgz"
-  integrity sha512-n/uJRIwZAaJaROaOA4VzycxDo27cusnrRzfycnAkAP5gBndwOJQ1CXjd1Y7hJe5eorj/ukixC7IZD+qCClMCMg==
+"@mui/core-downloads-tracker@^5.12.3":
+  version "5.12.3"
+  resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.12.3.tgz#3dffe62dccc065ddd7338e97d7be4b917004287e"
+  integrity sha512-yiJZ+knaknPHuRKhRk4L6XiwppwkAahVal3LuYpvBH7GkA2g+D9WLEXOEnNYtVFUggyKf6fWGLGnx0iqzkU5YA==
 
-"@mui/material@^5.8.5":
-  version "5.11.8"
-  resolved "https://registry.npmjs.org/@mui/material/-/material-5.11.8.tgz"
-  integrity sha512-MpIVmtj9VJBhPHvPWoMkfCPpmVGXT4q43PtCJsdKIdc7W9/nG3Kpqw2oWyw+UxG5xG7eLhmfRFGPKvj4/WopEQ==
+"@mui/material@^5.12.1":
+  version "5.12.3"
+  resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.12.3.tgz#398c1b123fb065763558bc1f9fc47d1f8cb87d0c"
+  integrity sha512-xNmKlrEN4HsTaKFNLZfc7ie7CXx2YqEeO//hsXZx2p3MGtDdeMr2sV3jC4hsFs57RhQlF79weY7uVvC8xSuVbg==
   dependencies:
-    "@babel/runtime" "^7.20.7"
-    "@mui/base" "5.0.0-alpha.117"
-    "@mui/core-downloads-tracker" "^5.11.8"
-    "@mui/system" "^5.11.8"
-    "@mui/types" "^7.2.3"
-    "@mui/utils" "^5.11.7"
+    "@babel/runtime" "^7.21.0"
+    "@mui/base" "5.0.0-alpha.128"
+    "@mui/core-downloads-tracker" "^5.12.3"
+    "@mui/system" "^5.12.3"
+    "@mui/types" "^7.2.4"
+    "@mui/utils" "^5.12.3"
     "@types/react-transition-group" "^4.4.5"
     clsx "^1.2.1"
-    csstype "^3.1.1"
+    csstype "^3.1.2"
     prop-types "^15.8.1"
     react-is "^18.2.0"
     react-transition-group "^4.4.5"
 
-"@mui/private-theming@^5.11.7":
-  version "5.11.7"
-  resolved "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.11.7.tgz"
-  integrity sha512-XzRTSZdc8bhuUdjablTNv3kFkZ/XIMlKkOqqJCU0G8W3tWGXpau2DXkafPd1ddjPhF9zF3qLKNGgKCChYItjgA==
+"@mui/private-theming@^5.12.3":
+  version "5.12.3"
+  resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.12.3.tgz#f5e4704e25d9d91b906561cae573cda8f3801e10"
+  integrity sha512-o1e7Z1Bp27n4x2iUHhegV4/Jp6H3T6iBKHJdLivS5GbwsuAE/5l4SnZ+7+K+e5u9TuhwcAKZLkjvqzkDe8zqfA==
   dependencies:
-    "@babel/runtime" "^7.20.7"
-    "@mui/utils" "^5.11.7"
+    "@babel/runtime" "^7.21.0"
+    "@mui/utils" "^5.12.3"
     prop-types "^15.8.1"
 
-"@mui/styled-engine@^5.11.8":
-  version "5.11.8"
-  resolved "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.11.8.tgz"
-  integrity sha512-iSpZp9AoeictsDi5xAQ4PGXu7mKtQyzMl7ZaWpHIGMFpsNnfY3NQNg+wkj/gpsAZ+Zg+IIyD+t+ig71Kr9fa0w==
+"@mui/styled-engine@^5.12.3":
+  version "5.12.3"
+  resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.12.3.tgz#3307643d52c81947a624cdd0437536cc8109c4f0"
+  integrity sha512-AhZtiRyT8Bjr7fufxE/mLS+QJ3LxwX1kghIcM2B2dvJzSSg9rnIuXDXM959QfUVIM3C8U4x3mgVoPFMQJvc4/g==
   dependencies:
-    "@babel/runtime" "^7.20.7"
-    "@emotion/cache" "^11.10.5"
-    csstype "^3.1.1"
+    "@babel/runtime" "^7.21.0"
+    "@emotion/cache" "^11.10.8"
+    csstype "^3.1.2"
     prop-types "^15.8.1"
 
-"@mui/system@^5.11.8":
-  version "5.11.8"
-  resolved "https://registry.npmjs.org/@mui/system/-/system-5.11.8.tgz"
-  integrity sha512-zhroUcxAw2x/dISBJKhGbD70DOYCwMFRo7o/LUYTiUfQkfmLhRfEf1bopWgY9nYstn7QOxOq9fA3aR3pHrUTbw==
+"@mui/system@^5.12.3":
+  version "5.12.3"
+  resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.12.3.tgz#306b3cdffa3046067640219c1e5dd7e3dae38ff9"
+  integrity sha512-JB/6sypHqeJCqwldWeQ1MKkijH829EcZAKKizxbU2MJdxGG5KSwZvTBa5D9qiJUA1hJFYYupjiuy9ZdJt6rV6w==
   dependencies:
-    "@babel/runtime" "^7.20.7"
-    "@mui/private-theming" "^5.11.7"
-    "@mui/styled-engine" "^5.11.8"
-    "@mui/types" "^7.2.3"
-    "@mui/utils" "^5.11.7"
+    "@babel/runtime" "^7.21.0"
+    "@mui/private-theming" "^5.12.3"
+    "@mui/styled-engine" "^5.12.3"
+    "@mui/types" "^7.2.4"
+    "@mui/utils" "^5.12.3"
     clsx "^1.2.1"
-    csstype "^3.1.1"
+    csstype "^3.1.2"
     prop-types "^15.8.1"
 
-"@mui/types@^7.2.3":
-  version "7.2.3"
-  resolved "https://registry.npmjs.org/@mui/types/-/types-7.2.3.tgz"
-  integrity sha512-tZ+CQggbe9Ol7e/Fs5RcKwg/woU+o8DCtOnccX6KmbBc7YrfqMYEYuaIcXHuhpT880QwNkZZ3wQwvtlDFA2yOw==
+"@mui/types@^7.2.4":
+  version "7.2.4"
+  resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.2.4.tgz#b6fade19323b754c5c6de679a38f068fd50b9328"
+  integrity sha512-LBcwa8rN84bKF+f5sDyku42w1NTxaPgPyYKODsh01U1fVstTClbUoSA96oyRBnSNyEiAVjKm6Gwx9vjR+xyqHA==
 
-"@mui/utils@^5.11.7":
-  version "5.11.7"
-  resolved "https://registry.npmjs.org/@mui/utils/-/utils-5.11.7.tgz"
-  integrity sha512-8uyNDeVHZA804Ego20Erv8TpxlbqTe/EbhTI2H1UYr4/RiIbBprat8W4Qqr2UQIsC/b3DLz+0RQ6R/E5BxEcLA==
+"@mui/utils@^5.12.3":
+  version "5.12.3"
+  resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.12.3.tgz#3fa3570dac7ec66bb9cc84ab7c16ab6e1b7200f2"
+  integrity sha512-D/Z4Ub3MRl7HiUccid7sQYclTr24TqUAQFFlxHQF8FR177BrCTQ0JJZom7EqYjZCdXhwnSkOj2ph685MSKNtIA==
   dependencies:
-    "@babel/runtime" "^7.20.7"
+    "@babel/runtime" "^7.21.0"
     "@types/prop-types" "^15.7.5"
     "@types/react-is" "^16.7.1 || ^17.0.0"
     prop-types "^15.8.1"
@@ -1353,19 +1407,19 @@
 
 "@next/env@12.3.2":
   version "12.3.2"
-  resolved "https://registry.npmjs.org/@next/env/-/env-12.3.2.tgz"
+  resolved "https://registry.yarnpkg.com/@next/env/-/env-12.3.2.tgz#fb819366771f5721e9438ca3a42ad18684f0949b"
   integrity sha512-upwtMaHxlv/udAWGq0kE+rg8huwmcxQPsKZFhS1R5iVO323mvxEBe1YrSXe1awLbg9sTIuEHbgxjLLt7JbeuAQ==
 
 "@next/eslint-plugin-next@12.2.2":
   version "12.2.2"
-  resolved "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-12.2.2.tgz"
+  resolved "https://registry.yarnpkg.com/@next/eslint-plugin-next/-/eslint-plugin-next-12.2.2.tgz#b4a22c06b6454068b54cc44502168d90fbb29a6d"
   integrity sha512-XOi0WzJhGH3Lk51SkSu9eZxF+IY1ZZhWcJTIGBycAbWU877IQa6+6KxMATWCOs7c+bmp6Sd8KywXJaDRxzu0JA==
   dependencies:
     glob "7.1.7"
 
 "@next/eslint-plugin-next@13.0.0":
   version "13.0.0"
-  resolved "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-13.0.0.tgz"
+  resolved "https://registry.yarnpkg.com/@next/eslint-plugin-next/-/eslint-plugin-next-13.0.0.tgz#cf3d799b21671554c1f5889c01d2513afb9973cd"
   integrity sha512-z+gnX4Zizatqatc6f4CQrcC9oN8Us3Vrq/OLyc98h7K/eWctrnV91zFZodmJHUjx0cITY8uYM7LXD7IdYkg3kg==
   dependencies:
     glob "7.1.7"
@@ -1382,7 +1436,7 @@
 
 "@next/swc-darwin-arm64@12.3.2":
   version "12.3.2"
-  resolved "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-12.3.2.tgz"
+  resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-12.3.2.tgz#97c532d35c66ce6b6941ae24b5b8b267b9b0d0d8"
   integrity sha512-PTUfe1ZrwjsiuTmr3bOM9lsoy5DCmfYsLOUF9ZVhtbi5MNJVmUTy4VZ06GfrvnCO5hGCr48z3vpFE9QZ0qLcPw==
 
 "@next/swc-darwin-x64@12.3.2":
@@ -1437,7 +1491,7 @@
 
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
-  resolved "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
   integrity sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==
   dependencies:
     "@nodelib/fs.stat" "2.0.5"
@@ -1445,12 +1499,12 @@
 
 "@nodelib/fs.stat@2.0.5", "@nodelib/fs.stat@^2.0.2":
   version "2.0.5"
-  resolved "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz#5bd262af94e9d25bd1e71b05deed44876a222e8b"
   integrity sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==
 
 "@nodelib/fs.walk@^1.2.3", "@nodelib/fs.walk@^1.2.8":
   version "1.2.8"
-  resolved "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz#e95737e8bb6746ddedf69c556953494f196fe69a"
   integrity sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==
   dependencies:
     "@nodelib/fs.scandir" "2.1.5"
@@ -1458,15 +1512,15 @@
 
 "@ocavue/svgmoji-cjs@^0.1.1":
   version "0.1.1"
-  resolved "https://registry.npmjs.org/@ocavue/svgmoji-cjs/-/svgmoji-cjs-0.1.1.tgz"
+  resolved "https://registry.yarnpkg.com/@ocavue/svgmoji-cjs/-/svgmoji-cjs-0.1.1.tgz#7240e6860c907187e4cd95b39858507384e4025f"
   integrity sha512-tCP6ggbtgIL4hPM5goVFSjL51jH/BLl/yBLy98wAV9a2L/Sn9iS3abfprPeQw6/nan5lLaz4Vz8ZP37LKh+xfQ==
   dependencies:
     svgmoji "^3.2.0"
 
-"@popperjs/core@^2.11.6", "@popperjs/core@^2.9.2":
-  version "2.11.6"
-  resolved "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz"
-  integrity sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==
+"@popperjs/core@^2.11.7", "@popperjs/core@^2.9.2":
+  version "2.11.7"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.7.tgz#ccab5c8f7dc557a52ca3288c10075c9ccd37fff7"
+  integrity sha512-Cr4OjIkipTtcXKjAsm8agyleBuDHvxzeBoa1v543lbv1YaIwQjESsVcmjiWiPEbC1FIeHOG/Op9kdCmAmiS3Kw==
 
 "@radix-ui/primitive@1.0.0":
   version "1.0.0"
@@ -1610,894 +1664,900 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
-"@reach/auto-id@^0.16.0":
-  version "0.16.0"
-  resolved "https://registry.npmjs.org/@reach/auto-id/-/auto-id-0.16.0.tgz"
-  integrity sha512-5ssbeP5bCkM39uVsfQCwBBL+KT8YColdnMN5/Eto6Rj7929ql95R3HZUOkKIvj7mgPtEb60BLQxd1P3o6cjbmg==
-  dependencies:
-    "@reach/utils" "0.16.0"
-    tslib "^2.3.0"
-
-"@reach/utils@0.16.0":
-  version "0.16.0"
-  resolved "https://registry.npmjs.org/@reach/utils/-/utils-0.16.0.tgz"
-  integrity sha512-PCggBet3qaQmwFNcmQ/GqHSefadAFyNCUekq9RrWoaU9hh/S4iaFgf2MBMdM47eQj5i/Bk0Mm07cP/XPFlkN+Q==
-  dependencies:
-    tiny-warning "^1.0.3"
-    tslib "^2.3.0"
-
-"@remirror/core-constants@^2.0.0":
-  version "2.0.0"
-  resolved "https://registry.npmjs.org/@remirror/core-constants/-/core-constants-2.0.0.tgz"
-  integrity sha512-vpePPMecHJllBqCWXl6+FIcZqS+tRUM2kSCCKFeEo1H3XUEv3ocijBIPhnlSAa7g6maX+12ATTgxrOsLpWVr2g==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-
-"@remirror/core-helpers@^2.0.1":
+"@remirror/core-constants@^2.0.1":
   version "2.0.1"
-  resolved "https://registry.npmjs.org/@remirror/core-helpers/-/core-helpers-2.0.1.tgz"
-  integrity sha512-s8M1pn33aBUhduvD1QR02uUQMegnFkGaTr4c1iBzxTTyg0rbQstzuQ7Q8TkL6n64JtgCdJS9jLz2dONb2meBKQ==
+  resolved "https://registry.yarnpkg.com/@remirror/core-constants/-/core-constants-2.0.1.tgz#19b4ae221880762cd98452f44288fcc66baaec0f"
+  integrity sha512-ZR4aihtnnT9lMbhh5DEbsriJRlukRXmLZe7HmM+6ufJNNUDoazc75UX26xbgQlNUqgAqMcUdGFAnPc1JwgAdLQ==
   dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@linaria/core" "3.0.0-beta.13"
-    "@remirror/core-constants" "^2.0.0"
-    "@remirror/types" "^1.0.0"
+    "@babel/runtime" "^7.21.0"
+
+"@remirror/core-helpers@^2.0.2", "@remirror/core-helpers@^2.0.3":
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/@remirror/core-helpers/-/core-helpers-2.0.3.tgz#fa4a0224a612016b9f16052ed0c5d817c69daa39"
+  integrity sha512-LqIPF4stGG69l9qu/FFicv9d9B+YaItzgDMC5A0CEvDQfKkGD3BfabLmfpnuWbsc06oKGdTduilgWcALLZoYLg==
+  dependencies:
+    "@babel/runtime" "^7.21.0"
+    "@linaria/core" "4.2.9"
+    "@remirror/core-constants" "^2.0.1"
+    "@remirror/types" "^1.0.1"
     "@types/object.omit" "^3.0.0"
-    "@types/object.pick" "^1.3.1"
+    "@types/object.pick" "^1.3.2"
     "@types/throttle-debounce" "^2.1.0"
     case-anything "^2.1.10"
     dash-get "^1.0.2"
-    deepmerge "^4.2.2"
+    deepmerge "^4.3.1"
     fast-deep-equal "^3.1.3"
     make-error "^1.3.6"
     object.omit "^3.0.0"
     object.pick "^1.3.0"
     throttle-debounce "^3.0.1"
 
-"@remirror/core-types@^2.0.3":
-  version "2.0.3"
-  resolved "https://registry.npmjs.org/@remirror/core-types/-/core-types-2.0.3.tgz"
-  integrity sha512-EQiPwm1r5oV3mZ/yn981qfCqWg1g2i2bHP8vEfIZ24fJqn1VwbjZHZ604N6JmeaL8XrUGBt6YDxNokqaTxWdzw==
+"@remirror/core-types@^2.0.5":
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/@remirror/core-types/-/core-types-2.0.5.tgz#f6a5c56a555b57a9b88b2e8c2b7edba8bcc1042a"
+  integrity sha512-K4pd23sQnBGjdzow7qvdkDfTM8klUxBgdOvo2qBOmd0XsjrtIy7t41CcBR3B5lQM9GsCA2J+XeMUN2bxyJFyEg==
   dependencies:
-    "@remirror/core-constants" "^2.0.0"
-    "@remirror/types" "^1.0.0"
+    "@remirror/core-constants" "^2.0.1"
+    "@remirror/types" "^1.0.1"
 
-"@remirror/core-utils@^2.0.10":
-  version "2.0.10"
-  resolved "https://registry.npmjs.org/@remirror/core-utils/-/core-utils-2.0.10.tgz"
-  integrity sha512-2al7k5bqAZ0gdIxqAR/blL2ztXMsDtY+qnM12DqJ0nosVz4sfnxx9uM/gGkde/7vMt5vsuhxezlQSo69NsANkw==
+"@remirror/core-utils@^2.0.12":
+  version "2.0.12"
+  resolved "https://registry.yarnpkg.com/@remirror/core-utils/-/core-utils-2.0.12.tgz#78472ceb7f98dba616816cff998300be6ac87d30"
+  integrity sha512-FR7w0sp/Wanelj5/Ahoea6ZpRA0AsmgcKNOxH6QOpohMYD4N061M8cdG8w6uUsZ9+3ZIndqrOSJBzoOF5KKLDg==
   dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@remirror/core-constants" "^2.0.0"
-    "@remirror/core-helpers" "^2.0.1"
-    "@remirror/core-types" "^2.0.3"
-    "@remirror/messages" "^2.0.2"
+    "@babel/runtime" "^7.21.0"
+    "@remirror/core-constants" "^2.0.1"
+    "@remirror/core-helpers" "^2.0.2"
+    "@remirror/core-types" "^2.0.5"
+    "@remirror/messages" "^2.0.3"
     "@types/min-document" "^2.19.0"
     css-in-js-utils "^3.1.0"
     get-dom-document "^0.1.3"
     min-document "^2.19.0"
     parenthesis "^3.1.8"
 
-"@remirror/core@^2.0.11":
-  version "2.0.11"
-  resolved "https://registry.npmjs.org/@remirror/core/-/core-2.0.11.tgz"
-  integrity sha512-tGiy/9AWk70UEZD+exqlInKeq5cYBVudS1mcdS78U03Fj93psu46SxubVxWBrS3LvZuUdYGqziLXsZikhFk86A==
+"@remirror/core@^2.0.11", "@remirror/core@^2.0.13", "@remirror/core@^2.0.15", "@remirror/core@^2.0.16":
+  version "2.0.16"
+  resolved "https://registry.yarnpkg.com/@remirror/core/-/core-2.0.16.tgz#11a185f28e6b071c814728b662cd8330e90218b0"
+  integrity sha512-9GNNBibTukak4/G1Pr1yknFLMmaZNsghwsSeZq7d2s2DuNePCSisfD815sUsHmWkZJh256vc5JTvMf+AnL8Ncg==
   dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@linaria/core" "3.0.0-beta.13"
-    "@remirror/core-constants" "^2.0.0"
-    "@remirror/core-helpers" "^2.0.1"
-    "@remirror/core-types" "^2.0.3"
-    "@remirror/core-utils" "^2.0.10"
-    "@remirror/i18n" "^2.0.2"
-    "@remirror/icons" "^2.0.1"
-    "@remirror/messages" "^2.0.2"
+    "@babel/runtime" "^7.21.0"
+    "@linaria/core" "4.2.9"
+    "@remirror/core-constants" "^2.0.1"
+    "@remirror/core-helpers" "^2.0.3"
+    "@remirror/core-types" "^2.0.5"
+    "@remirror/core-utils" "^2.0.12"
+    "@remirror/i18n" "^2.0.3"
+    "@remirror/icons" "^2.0.2"
+    "@remirror/messages" "^2.0.4"
     nanoevents "^5.1.13"
     tiny-warning "^1.0.3"
 
-"@remirror/dom@^2.0.14":
-  version "2.0.14"
-  resolved "https://registry.npmjs.org/@remirror/dom/-/dom-2.0.14.tgz"
-  integrity sha512-i1mM7zX8jxGsDNMpQEzHM/s78m7mQnCfzpV6XVgP9wGwie4X8OBErtXL1Z0iPbAXIM+I1PKT+ps8kJtRz5dAtQ==
+"@remirror/dom@^2.0.16":
+  version "2.0.16"
+  resolved "https://registry.yarnpkg.com/@remirror/dom/-/dom-2.0.16.tgz#2823b4d92f057213d01cff927b7a0308fdeb2819"
+  integrity sha512-DxjEFgQc24O93WN/YL7nHUanER/a1FIGQGRgsFoN9Px2t+Op39i2PZ0hm1ZE7ivp9/gE7obaMbgsXnjEJ8RX+A==
   dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@remirror/core" "^2.0.11"
-    "@remirror/preset-core" "^2.0.14"
+    "@babel/runtime" "^7.21.0"
+    "@remirror/core" "^2.0.13"
+    "@remirror/preset-core" "^2.0.16"
 
-"@remirror/extension-annotation@^2.0.14":
-  version "2.0.14"
-  resolved "https://registry.npmjs.org/@remirror/extension-annotation/-/extension-annotation-2.0.14.tgz"
-  integrity sha512-m8csRAJgnfONl4XGkDALf6Ihm9SSQyG10nVSCFNqiFeH1JPOrtqi3Z1Rl/aFq4vG28jwOxCvz2ugFmxomd6UXA==
+"@remirror/extension-annotation@^2.0.16":
+  version "2.0.16"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-annotation/-/extension-annotation-2.0.16.tgz#b720526be83155b9878721bc223b3f3135e49b60"
+  integrity sha512-jtLfWaNWQFfsE3lguQbYds4W3HJGLM0Ezrsc1q1w17EQxr5aJnjA2tNMjZL+6IdFzqEjuxd7Y9aRln3rU4WbnA==
   dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@remirror/core" "^2.0.11"
-    "@remirror/extension-positioner" "^2.1.6"
-    "@remirror/messages" "^2.0.2"
+    "@babel/runtime" "^7.21.0"
+    "@remirror/core" "^2.0.13"
+    "@remirror/extension-positioner" "^2.1.8"
+    "@remirror/messages" "^2.0.3"
 
-"@remirror/extension-bidi@^2.0.11":
-  version "2.0.11"
-  resolved "https://registry.npmjs.org/@remirror/extension-bidi/-/extension-bidi-2.0.11.tgz"
-  integrity sha512-LQyKWLcDBLVLogQxK7xa+waLO+Q5jJ+EKIgvt+o8nP6VnQNSNM63fsWsn4adnqR9MoRLuniYBioKgsjQJ94fTA==
+"@remirror/extension-bidi@^2.0.13":
+  version "2.0.13"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-bidi/-/extension-bidi-2.0.13.tgz#c723f6ca57d48ee4483d813b3d9f7c365dd784bb"
+  integrity sha512-vn07Y5m90IZtIpOaLk0aMbbh5i5mJiBIvLBDpCJ/gcvpwkt3IN65JoUV4iPU8MqFvoEs6Uh0VsHjWhiH7K4f6g==
   dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@remirror/core" "^2.0.11"
-    "@remirror/messages" "^2.0.2"
+    "@babel/runtime" "^7.21.0"
+    "@remirror/core" "^2.0.13"
+    "@remirror/messages" "^2.0.3"
     "@types/direction" "^1.0.0"
     direction "^1.0.4"
 
-"@remirror/extension-blockquote@^2.0.12":
-  version "2.0.12"
-  resolved "https://registry.npmjs.org/@remirror/extension-blockquote/-/extension-blockquote-2.0.12.tgz"
-  integrity sha512-7oLnetXl3xHOMkwEUr4DPPlSc/4d4FISq+ON/u9vrHbV4hxZ3chYIwOoalAZilL2vIkaHg7Hx1cQsbRYIeNkKA==
+"@remirror/extension-blockquote@^2.0.14":
+  version "2.0.14"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-blockquote/-/extension-blockquote-2.0.14.tgz#6a125f047ecc733df31941f40f6b1c662fcfdca9"
+  integrity sha512-jWko6/spZ49OvZVZVFUSPhOIZR8VY9aUFiMKJQfclkL3fESJPSPshkm6rANrnY24sk7VKfpXgpwCSqmJVJ8EiA==
   dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@remirror/core" "^2.0.11"
-    "@remirror/messages" "^2.0.2"
-    "@remirror/theme" "^2.0.5"
+    "@babel/runtime" "^7.21.0"
+    "@remirror/core" "^2.0.13"
+    "@remirror/messages" "^2.0.3"
+    "@remirror/theme" "^2.0.7"
 
-"@remirror/extension-bold@^2.0.11":
-  version "2.0.11"
-  resolved "https://registry.npmjs.org/@remirror/extension-bold/-/extension-bold-2.0.11.tgz"
-  integrity sha512-gOGM7uiJalAaFVCbjBayYwCWqfHXtSftksj7Oi1e95iZJNvPMRlcJ59BVVCCBC6npA3PTG0h7ejKH34sJwnJ2w==
+"@remirror/extension-bold@^2.0.13":
+  version "2.0.13"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-bold/-/extension-bold-2.0.13.tgz#4d38f75768f75323241236f089c6f87a4b92267b"
+  integrity sha512-b4yaQcU0m/tXxUVAlDSHcm3Z4dVnWKXfUmlpP8QDjISQ0F0vloRWSK2U9yvcldhmnTNJ/il0kn9PmJeoRbqkeA==
   dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@remirror/core" "^2.0.11"
-    "@remirror/messages" "^2.0.2"
+    "@babel/runtime" "^7.21.0"
+    "@remirror/core" "^2.0.13"
+    "@remirror/messages" "^2.0.3"
 
-"@remirror/extension-callout@^2.0.12":
-  version "2.0.12"
-  resolved "https://registry.npmjs.org/@remirror/extension-callout/-/extension-callout-2.0.12.tgz"
-  integrity sha512-irI7n5uASUpn/oG8YMdDb6ceoeSwVmWX8dEZAi7KseNYniF+t7SL4DUVhuGKdDXBNawcVQ0R6dHu9BlB7KKgxg==
+"@remirror/extension-callout@^2.0.14":
+  version "2.0.14"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-callout/-/extension-callout-2.0.14.tgz#077ee61255d804db4da8731ec056dc7279b1534b"
+  integrity sha512-7caMC6nHkspxonmmjxSh2Twdu3pUcXYkI2i5bcqwwMct+MOpr86Lnh0Di3ABSSwWzDBKvHYDhRBS+Hr5omaK8g==
   dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@remirror/core" "^2.0.11"
-    "@remirror/messages" "^2.0.2"
-    "@remirror/theme" "^2.0.5"
+    "@babel/runtime" "^7.21.0"
+    "@remirror/core" "^2.0.13"
+    "@remirror/messages" "^2.0.3"
+    "@remirror/theme" "^2.0.7"
 
-"@remirror/extension-code-block@^2.0.12":
-  version "2.0.12"
-  resolved "https://registry.npmjs.org/@remirror/extension-code-block/-/extension-code-block-2.0.12.tgz"
-  integrity sha512-EqM2BeBL4OriDadzqAKaso9uKEr0ssNyFGkuwfIHxPKMtvxxcQKLuL837cLUx1uWBTS/DfqaKUTCzfnyo14YyA==
+"@remirror/extension-code-block@^2.0.14":
+  version "2.0.14"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-code-block/-/extension-code-block-2.0.14.tgz#542ff6d6c76ef61fb7ca8f7aac70efd620523491"
+  integrity sha512-nYcP5Zci4CSsS7sNbp+NNnxTI8FjHmW5iCaf51qsXS+FDUzHrXaARyNcNcV2nHq952r5dMGWOv+zr0PaUX9d0A==
   dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@remirror/core" "^2.0.11"
-    "@remirror/messages" "^2.0.2"
-    "@remirror/theme" "^2.0.5"
+    "@babel/runtime" "^7.21.0"
+    "@remirror/core" "^2.0.13"
+    "@remirror/messages" "^2.0.3"
+    "@remirror/theme" "^2.0.7"
     "@types/refractor" "^3.0.2"
-    refractor "^3.3.1"
+    refractor "^3.6.0"
 
-"@remirror/extension-code@^2.0.11":
-  version "2.0.11"
-  resolved "https://registry.npmjs.org/@remirror/extension-code/-/extension-code-2.0.11.tgz"
-  integrity sha512-AS0thwuxNySfPRTYx2lFOF0xAMzafYkLfdQcB2BlqfYMZzQ1T9EDaWbfSR62RxmVeMNXUtQ/K8yfzsd1OVlMAA==
+"@remirror/extension-code@^2.0.13":
+  version "2.0.13"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-code/-/extension-code-2.0.13.tgz#065cd7fdf02838bdcca1fe997e133ac4691537be"
+  integrity sha512-uf4mkIHcw5RIscw1YcOMwikMMu+x5cqUkFdo5jjA3cssirh/87xDQJAeXLB4weN/ZNexbaJ2tSslWpMFrNBW8A==
   dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@remirror/core" "^2.0.11"
-    "@remirror/messages" "^2.0.2"
+    "@babel/runtime" "^7.21.0"
+    "@remirror/core" "^2.0.13"
+    "@remirror/messages" "^2.0.3"
 
-"@remirror/extension-codemirror5@^2.0.11":
-  version "2.0.11"
-  resolved "https://registry.npmjs.org/@remirror/extension-codemirror5/-/extension-codemirror5-2.0.11.tgz"
-  integrity sha512-b0GxUDHhYbQ3vDXzanr7EhBZSb9dwRE7xsO0RAI96H6XJstrm6BxExAlx7NXEKWlfdFmxhiLjDxJqZ0ep3rlbg==
+"@remirror/extension-codemirror5@^2.0.13":
+  version "2.0.13"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-codemirror5/-/extension-codemirror5-2.0.13.tgz#f592adf23b8e0570a490972aed057719dd9476e9"
+  integrity sha512-9p9kYtBJLIC7kIQJOCa+xIg3IdaH2gb9OBDRo1AmjDAN68f8x2Ta8VAJD/h+wYhdSS96Q+4LMUBzxgZwssRDpw==
   dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@remirror/core" "^2.0.11"
-    "@remirror/messages" "^2.0.2"
+    "@babel/runtime" "^7.21.0"
+    "@remirror/core" "^2.0.13"
+    "@remirror/messages" "^2.0.3"
 
-"@remirror/extension-collaboration@^2.0.11":
-  version "2.0.11"
-  resolved "https://registry.npmjs.org/@remirror/extension-collaboration/-/extension-collaboration-2.0.11.tgz"
-  integrity sha512-ygWojXf3AwHTZu/1TTS7zpJFfygN879tqWouRsfeExnO4vd1e/+VYHcfrfN1SCF2U+rZE/ITzhqfEVpWSStc5g==
+"@remirror/extension-collaboration@^2.0.13":
+  version "2.0.13"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-collaboration/-/extension-collaboration-2.0.13.tgz#a066ab32fc69773640904773246a0e889ebb7888"
+  integrity sha512-sqkUjsPYQnuBIbyMW/FsSkQSyQ9GbQcawrigcCOxwlQp3f1snzKzfEcGRMPrUAG06UfDRedoGv/HVb+K4uIiIw==
   dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@remirror/core" "^2.0.11"
-    "@remirror/messages" "^2.0.2"
+    "@babel/runtime" "^7.21.0"
+    "@remirror/core" "^2.0.13"
+    "@remirror/messages" "^2.0.3"
 
-"@remirror/extension-columns@^2.0.11":
-  version "2.0.11"
-  resolved "https://registry.npmjs.org/@remirror/extension-columns/-/extension-columns-2.0.11.tgz"
-  integrity sha512-98tFKRClwVZQTA8Re4/9GC1UFeaSfQWBj6f10Na6F/P7e9Kn5FXOEHYlsZANuXE0gyyP2jGb+x3ilRP2XHjlPQ==
+"@remirror/extension-columns@^2.0.13":
+  version "2.0.13"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-columns/-/extension-columns-2.0.13.tgz#8a86af6dfc2d1d1b392347e7d36728fc4de40e18"
+  integrity sha512-6g8u0Pw/bHysbakpdGHdQpKkEQjm/5A3V73++Hd88J5gc+ijazEV8nSkJrZ1TaBFr+9OBvLe6L1rmYxdeSCv0Q==
   dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@remirror/core" "^2.0.11"
-    "@remirror/messages" "^2.0.2"
+    "@babel/runtime" "^7.21.0"
+    "@remirror/core" "^2.0.13"
+    "@remirror/messages" "^2.0.3"
 
-"@remirror/extension-diff@^2.0.11":
-  version "2.0.11"
-  resolved "https://registry.npmjs.org/@remirror/extension-diff/-/extension-diff-2.0.11.tgz"
-  integrity sha512-BICyPphPccbA/i34PQrpDufA3+0da97MNAcJ+shAhuwwoMNmT7URLXa2r1/np/jbSPih3V3bjxAgeKSV43jPew==
+"@remirror/extension-diff@^2.0.13":
+  version "2.0.13"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-diff/-/extension-diff-2.0.13.tgz#8540cd935aefc2ba25d9d75702ffd80149962524"
+  integrity sha512-6IxewTYkiFTOqEB7W3uZHBCS6pTw76qJVceWziFnSzwlf0JPqs80C4y6BLOdC6rIa3nB9USSlDkf8y1HDubVZw==
   dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@remirror/core" "^2.0.11"
-    "@remirror/messages" "^2.0.2"
+    "@babel/runtime" "^7.21.0"
+    "@remirror/core" "^2.0.13"
+    "@remirror/messages" "^2.0.3"
 
-"@remirror/extension-doc@^2.1.3":
-  version "2.1.3"
-  resolved "https://registry.npmjs.org/@remirror/extension-doc/-/extension-doc-2.1.3.tgz"
-  integrity sha512-vA197s8v77AtXHKUTq+tzT53rdsziXG1AB3FoL8Cq4GFCHkTIRc3+WJdEJkF/xhcYuf0OPfwWE67FynwLXfliQ==
+"@remirror/extension-doc@^2.1.5":
+  version "2.1.5"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-doc/-/extension-doc-2.1.5.tgz#ddc2f2c6c381f9113c52b1e74fccf5551d4305fe"
+  integrity sha512-LwXEVWytMUKldjniQ9Xet1kQ97aIubmh8ECK0I3mp7wwxx8Uotg1oYHRruWZHDBK9zH/H2yLaRWrQPF/FOYjmw==
   dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@remirror/core" "^2.0.11"
-    "@remirror/messages" "^2.0.2"
+    "@babel/runtime" "^7.21.0"
+    "@remirror/core" "^2.0.13"
+    "@remirror/messages" "^2.0.3"
 
-"@remirror/extension-drop-cursor@^2.0.11":
-  version "2.0.11"
-  resolved "https://registry.npmjs.org/@remirror/extension-drop-cursor/-/extension-drop-cursor-2.0.11.tgz"
-  integrity sha512-ocqOuRQcXaRvY/vsftlG3d4nEGUes34GYwQ7LjZVz1rtA8PPRBgwlqA16JRLywXtzJW4NM2HmTamAilAlh4LVQ==
+"@remirror/extension-drop-cursor@^2.0.13":
+  version "2.0.13"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-drop-cursor/-/extension-drop-cursor-2.0.13.tgz#2209bf41f86a2f730df27c16ef203dcd005daaa2"
+  integrity sha512-To6YtaBZ4v4XWaoD1oMd/EGsKMw2plLizZHrH70q7voP5rJjjzQ1O0Z8N/qgeM6Ai7ZM1O8PAozUW1OpqQQJJA==
   dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@remirror/core" "^2.0.11"
-    "@remirror/messages" "^2.0.2"
+    "@babel/runtime" "^7.21.0"
+    "@remirror/core" "^2.0.13"
+    "@remirror/messages" "^2.0.3"
 
-"@remirror/extension-embed@^2.0.11":
-  version "2.0.11"
-  resolved "https://registry.npmjs.org/@remirror/extension-embed/-/extension-embed-2.0.11.tgz"
-  integrity sha512-ku/QyV8o7Oq9oV5ZQx39X7GzLfqcfJzI12+wzOXRbEKNFxfhhlBB8ui3y3f9I4DEDVlAX+xYnUj3jSOmqT7ZNQ==
+"@remirror/extension-embed@^2.0.13":
+  version "2.0.13"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-embed/-/extension-embed-2.0.13.tgz#8a8a9d066ed4b0036d243670a40418788899745f"
+  integrity sha512-a6+9/7J31/XRCv5onmDWZx+BJb9hpeHec6EjXfOWbmyC2f42AnUcia+FjUKGNcT75pYnlXCRQyQUiCE2gRB/+A==
   dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@remirror/core" "^2.0.11"
-    "@remirror/messages" "^2.0.2"
+    "@babel/runtime" "^7.21.0"
+    "@remirror/core" "^2.0.13"
+    "@remirror/messages" "^2.0.3"
     "@types/querystringify" "^2.0.0"
-    prosemirror-resizable-view "^2.0.10"
+    prosemirror-resizable-view "^2.0.12"
     querystringify "^2.2.0"
 
-"@remirror/extension-emoji@^2.0.15":
-  version "2.0.15"
-  resolved "https://registry.npmjs.org/@remirror/extension-emoji/-/extension-emoji-2.0.15.tgz"
-  integrity sha512-DdcNw3HFxNGvYEOjBx0fEkhCqc/puR+koLEvtsyuzuOHBysVU2xQgTYUVbh7XNFRseNNUOeTnRK0dH/5YgzJ/g==
+"@remirror/extension-emoji@^2.0.17":
+  version "2.0.17"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-emoji/-/extension-emoji-2.0.17.tgz#48ad559ec119a8288187291e4d9974ba58ac6c03"
+  integrity sha512-JFAx2/xDf0Pg7lUn4/HneU/Rq3alXa5uwdVXcAiCF7jqiryO/qdgH0qQ7DIiL9lvBvfpBvJYXTeuScnofvDkvw==
   dependencies:
-    "@babel/runtime" "^7.13.10"
+    "@babel/runtime" "^7.21.0"
     "@ocavue/svgmoji-cjs" "^0.1.1"
-    "@remirror/core" "^2.0.11"
-    "@remirror/messages" "^2.0.2"
-    "@remirror/theme" "^2.0.5"
-    emojibase "^6.0.0"
-    emojibase-data "^6.1.0"
-    emojibase-regex "^6.0.0"
+    "@remirror/core" "^2.0.13"
+    "@remirror/messages" "^2.0.3"
+    "@remirror/theme" "^2.0.7"
+    emojibase "^6.1.0"
+    emojibase-data "^6.2.0"
+    emojibase-regex "^6.0.1"
     escape-string-regexp "^4.0.0"
     svgmoji "^3.2.0"
 
-"@remirror/extension-entity-reference@^2.2.4":
-  version "2.2.4"
-  resolved "https://registry.npmjs.org/@remirror/extension-entity-reference/-/extension-entity-reference-2.2.4.tgz"
-  integrity sha512-AzK2rNmIPVVfv13ShwokNEy5MOstM2pmmZmimeeUM/T/GNGcXH7KICc3YPdoguPQKvpLKuz4ULEiwgrx6IPMRA==
+"@remirror/extension-entity-reference@^2.2.6":
+  version "2.2.6"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-entity-reference/-/extension-entity-reference-2.2.6.tgz#b9c96edbb2ca99280ae9683693db18e6f257a563"
+  integrity sha512-rhmGchMv5jxaaLAvj3gPRjPxzAP8b0QzKToxGDBxQJkNRpLzik3h5Z3JDg3EdMa3fg75X1/+9UFdS1g/LDlJhQ==
   dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@remirror/core" "^2.0.11"
-    "@remirror/extension-events" "^2.1.12"
-    "@remirror/extension-positioner" "^2.1.6"
+    "@babel/runtime" "^7.21.0"
+    "@remirror/core" "^2.0.13"
+    "@remirror/extension-events" "^2.1.14"
+    "@remirror/extension-positioner" "^2.1.8"
 
-"@remirror/extension-epic-mode@^2.0.11":
-  version "2.0.11"
-  resolved "https://registry.npmjs.org/@remirror/extension-epic-mode/-/extension-epic-mode-2.0.11.tgz"
-  integrity sha512-MZ6WM2WbaHVGr8bklHS8grzGqiByvEo4zWaMRVqX7jlFG+s6KC6WVN1Bjl1AF+ERhEz0YThnI0mJgz3fDwRAbA==
+"@remirror/extension-epic-mode@^2.0.13":
+  version "2.0.13"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-epic-mode/-/extension-epic-mode-2.0.13.tgz#2ec5fe99a7b04240103f09987504d7a035d40790"
+  integrity sha512-KDHF0Uyr0RevWtp1ca4VOL+4iD6SXlPpEbRKz7Mlg5Fnl9IGTEsraHwg9OthoTN1Kc8fzYMzOxv6qwyTsvMuVw==
   dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@remirror/core" "^2.0.11"
-    "@remirror/messages" "^2.0.2"
+    "@babel/runtime" "^7.21.0"
+    "@remirror/core" "^2.0.13"
+    "@remirror/messages" "^2.0.3"
 
-"@remirror/extension-events@^2.1.12":
-  version "2.1.12"
-  resolved "https://registry.npmjs.org/@remirror/extension-events/-/extension-events-2.1.12.tgz"
-  integrity sha512-Um3woEj7dt2bRTsu9xRzxLkcGwOubwoTiKD/g7O8b5O35dZ1amnTE8pXZES7d1oXMWteq0DNI1jw+CPi/weARg==
+"@remirror/extension-events@^2.1.14", "@remirror/extension-events@^2.1.15":
+  version "2.1.15"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-events/-/extension-events-2.1.15.tgz#0ea363c25dd66397a46226ee7d3b6a8f826d4e47"
+  integrity sha512-oljIgcH3Z98ew17L3nzMVJZHFcBcUzZeV5j4QGeFQTSkLjyUXFQESiZ/0PW0XvkS9NMFxBXGv35TbONNU2XNgA==
   dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@remirror/core" "^2.0.11"
-    "@remirror/messages" "^2.0.2"
+    "@babel/runtime" "^7.21.0"
+    "@remirror/core" "^2.0.15"
+    "@remirror/messages" "^2.0.4"
 
-"@remirror/extension-find@^0.1.4":
-  version "0.1.4"
-  resolved "https://registry.npmjs.org/@remirror/extension-find/-/extension-find-0.1.4.tgz"
-  integrity sha512-IM9aIifOrEHkXI4hnsuy3eiMKIkgvsabbYQmYYUSL6D+EAaB1q8sqjnaIQJOg5KTA0LfzDHh1sYXbjBT4emklg==
+"@remirror/extension-find@^0.1.6":
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-find/-/extension-find-0.1.6.tgz#efdb5b6ca28aa0e517b031c2f3817425bbdeb6af"
+  integrity sha512-WWcA6B4HXUU6kj4SP3OxKByFk07JQj99qQOw8nTFSTZ1AtUD4N2T/D5kSK2Uzmkreh/lCI5VJvTFwVEjft+3qg==
   dependencies:
-    "@remirror/core" "^2.0.11"
+    "@remirror/core" "^2.0.13"
     "@types/string.prototype.matchall" "^4.0.1"
     escape-string-regexp "^4.0.0"
-    string.prototype.matchall "^4.0.7"
+    string.prototype.matchall "^4.0.8"
 
-"@remirror/extension-font-family@^2.0.11":
-  version "2.0.11"
-  resolved "https://registry.npmjs.org/@remirror/extension-font-family/-/extension-font-family-2.0.11.tgz"
-  integrity sha512-M5nj2huOkuSlVhejiLFG8XPSjxbFHPlRPoo4YXw2WS7KynwDka8MNOxzvn5cORmn07Bmh/uILpPQYziXY6dTjA==
+"@remirror/extension-font-family@^2.0.13":
+  version "2.0.13"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-font-family/-/extension-font-family-2.0.13.tgz#4b52be3f111ec72ae79c2debe490ebb5b60ce5a7"
+  integrity sha512-sGq1ChvxlwlfKnrYlKtlynG8/vbQhYznf3FlrMHycpzZTn4DW16SOlJMZlYD/bPbCFIY/5T6ZSOdUVeDOv6zoQ==
   dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@remirror/core" "^2.0.11"
-    "@remirror/messages" "^2.0.2"
+    "@babel/runtime" "^7.21.0"
+    "@remirror/core" "^2.0.13"
+    "@remirror/messages" "^2.0.3"
 
-"@remirror/extension-font-size@^2.0.11":
-  version "2.0.11"
-  resolved "https://registry.npmjs.org/@remirror/extension-font-size/-/extension-font-size-2.0.11.tgz"
-  integrity sha512-TJThL38Pl5aGjIb0NmNa8LBfv/QzH2b2Rvb3G4qHxYplxlCVfIUc1FazudmEI5OTjFMqBs+8MzTxdYzuerPZ3w==
+"@remirror/extension-font-size@^2.0.13":
+  version "2.0.13"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-font-size/-/extension-font-size-2.0.13.tgz#9b667538238588ff0347d7f0f5ab36765b29a91b"
+  integrity sha512-j7wXaOrIVdj4PapC7g4yqpPVULUqCIiUOqt2lwKVXFbET/sXMD2RujR8zSng+VFTLFQyem53jHOkJmD+B5QJKw==
   dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@remirror/core" "^2.0.11"
-    "@remirror/messages" "^2.0.2"
+    "@babel/runtime" "^7.21.0"
+    "@remirror/core" "^2.0.13"
+    "@remirror/messages" "^2.0.3"
     round "^2.0.1"
 
-"@remirror/extension-gap-cursor@^2.0.11":
-  version "2.0.11"
-  resolved "https://registry.npmjs.org/@remirror/extension-gap-cursor/-/extension-gap-cursor-2.0.11.tgz"
-  integrity sha512-2wiPNIP4uw4Ziu9pAgWoJVcI9Xmw4deZYXdXdBcwtwLdT0AyuyOwe9PO2jic+NTPQyWr2ulfw2HjuL85bT4AYw==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@remirror/core" "^2.0.11"
-    "@remirror/messages" "^2.0.2"
-
-"@remirror/extension-hard-break@^2.0.11":
-  version "2.0.11"
-  resolved "https://registry.npmjs.org/@remirror/extension-hard-break/-/extension-hard-break-2.0.11.tgz"
-  integrity sha512-/cVTP8PzAyb6SivmnreVIKHfeTekpYni3wzl5qeDtfVy2474ArH4jsBnYt/vgq3LmbrFrqVG9MFs38rXnoZAng==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@remirror/core" "^2.0.11"
-    "@remirror/messages" "^2.0.2"
-
-"@remirror/extension-heading@^2.0.11":
-  version "2.0.11"
-  resolved "https://registry.npmjs.org/@remirror/extension-heading/-/extension-heading-2.0.11.tgz"
-  integrity sha512-n/XGBRJ1Dx3zf/Jr7irP++oYALbgMvI2mNbNYxlg8CJJRMwJbdPe4Y9+3fZcmg8vnIIqcWmbFNq1Zhxgh3wRfQ==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@remirror/core" "^2.0.11"
-    "@remirror/messages" "^2.0.2"
-
-"@remirror/extension-history@^2.0.11":
-  version "2.0.11"
-  resolved "https://registry.npmjs.org/@remirror/extension-history/-/extension-history-2.0.11.tgz"
-  integrity sha512-rC3X2L3ydhzv17VbVHOYFqgmN8cv7Cp4G2E6PIpgdoI8Qe9kPZsBEekVUrEvQix1V6qVXt6MnWndiBVHrGseEw==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@remirror/core" "^2.0.11"
-    "@remirror/messages" "^2.0.2"
-
-"@remirror/extension-horizontal-rule@^2.0.11":
-  version "2.0.11"
-  resolved "https://registry.npmjs.org/@remirror/extension-horizontal-rule/-/extension-horizontal-rule-2.0.11.tgz"
-  integrity sha512-F1b6eUq5dMD6aci9GWahPJuT8SAcIRVeuNG7ctCE4al+KFzVz2y4ln65sfP4pq/8lXi/u6RJ2tD77qr3CxTIBA==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@remirror/core" "^2.0.11"
-    "@remirror/messages" "^2.0.2"
-
-"@remirror/extension-image@^2.1.7":
-  version "2.1.7"
-  resolved "https://registry.npmjs.org/@remirror/extension-image/-/extension-image-2.1.7.tgz"
-  integrity sha512-10JP7vs+W1eb1Jz8vIU8GLxpGE/YfISOQRILweFEpccE8nuPNwqFh+dlsRrBH7jPjPNaQvOzkpH+0L8DwqQ+Tw==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@remirror/core" "^2.0.11"
-    "@remirror/messages" "^2.0.2"
-    "@remirror/theme" "^2.0.5"
-    prosemirror-resizable-view "^2.0.10"
-
-"@remirror/extension-italic@^2.0.11":
-  version "2.0.11"
-  resolved "https://registry.npmjs.org/@remirror/extension-italic/-/extension-italic-2.0.11.tgz"
-  integrity sha512-XQrWElBT2isa49KXvD3lFp63KGxUNghmZ2vV+DHEy0aAzFQV0Ny8HUR9bgN/TJiMHlohrBrgfYQWmRwnzMWacg==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@remirror/core" "^2.0.11"
-    "@remirror/messages" "^2.0.2"
-
-"@remirror/extension-link@^2.0.13":
+"@remirror/extension-gap-cursor@^2.0.13":
   version "2.0.13"
-  resolved "https://registry.npmjs.org/@remirror/extension-link/-/extension-link-2.0.13.tgz"
-  integrity sha512-ID/aJMX3Lfnl8vMo3PwxCHFN5o9GsmD5S5IdjXvP4zjqgyHy/vOd6wbuWAH84TT7yBfhhh8KzonwjHC2pGg4DA==
+  resolved "https://registry.yarnpkg.com/@remirror/extension-gap-cursor/-/extension-gap-cursor-2.0.13.tgz#ac0ee4907f04fc3c853c864cdf0c10ce8d6dc6d8"
+  integrity sha512-oaLrh/6cRhAdEksDNmrEcqnVixRjzARDr+cq2jJfPdVG0316xgNi7CkTnWJJCWSqQ4D6lrriMY5pQO3Qwlv5Kg==
   dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@remirror/core" "^2.0.11"
-    "@remirror/extension-events" "^2.1.12"
-    "@remirror/messages" "^2.0.2"
+    "@babel/runtime" "^7.21.0"
+    "@remirror/core" "^2.0.13"
+    "@remirror/messages" "^2.0.3"
+
+"@remirror/extension-hard-break@^2.0.13":
+  version "2.0.13"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-hard-break/-/extension-hard-break-2.0.13.tgz#e3ee9e15837f655beadb17f1a7d4dd0094fa09ba"
+  integrity sha512-86T5bWl7O6feaXYIUylAuzq6lbpWhF6cM7CY7IW5c9+l8qpUMSktylfgAVAajjAtIfIB+g83m0D2AjL5VXksvg==
+  dependencies:
+    "@babel/runtime" "^7.21.0"
+    "@remirror/core" "^2.0.13"
+    "@remirror/messages" "^2.0.3"
+
+"@remirror/extension-heading@^2.0.13":
+  version "2.0.13"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-heading/-/extension-heading-2.0.13.tgz#4b5dc10ad1e206ed48e641a8cf614b421f2dc2b1"
+  integrity sha512-2+CoQxAq4Gkcst1g+H4RXoAYY6XFj8qlbfkSCyjs30Q6JJvtlErODW0jILVRksH7ftfq0ueHCxeuLoseBGiQjw==
+  dependencies:
+    "@babel/runtime" "^7.21.0"
+    "@remirror/core" "^2.0.13"
+    "@remirror/messages" "^2.0.3"
+
+"@remirror/extension-history@^2.0.13":
+  version "2.0.13"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-history/-/extension-history-2.0.13.tgz#1bb1883b598fe5f7b9fd594795025afd76481435"
+  integrity sha512-LjW60KVpniRawttyhrWxM6ieE8sTYprqpCdMRbc7RuxBhdHaxlcQJGAjJvnBM7078qV/55S616P620YGYaBU4w==
+  dependencies:
+    "@babel/runtime" "^7.21.0"
+    "@remirror/core" "^2.0.13"
+    "@remirror/messages" "^2.0.3"
+
+"@remirror/extension-horizontal-rule@^2.0.13":
+  version "2.0.13"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-horizontal-rule/-/extension-horizontal-rule-2.0.13.tgz#76554e58b60841a4bac8e957a316bf4d238bc782"
+  integrity sha512-CV1lIWZ0n8btANKIP4xiUzTFbWRhOiBfdncePZvoRSYTa4UwfAQ6KapUVkcUHEL20UtDkDX8fGpF6kjtEGRCCQ==
+  dependencies:
+    "@babel/runtime" "^7.21.0"
+    "@remirror/core" "^2.0.13"
+    "@remirror/messages" "^2.0.3"
+
+"@remirror/extension-image@^2.1.9":
+  version "2.1.9"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-image/-/extension-image-2.1.9.tgz#a0d2bb736365f1eca962be77146cdb57e3442962"
+  integrity sha512-4vmMc2Qzh5dsYGrW7i7Or3ExmnyMjbbQJGismuOYnAakO4vrYHxQ6LwSldnSbKKI55NggxR7F5H6F1lgwQKnbA==
+  dependencies:
+    "@babel/runtime" "^7.21.0"
+    "@remirror/core" "^2.0.13"
+    "@remirror/messages" "^2.0.3"
+    "@remirror/theme" "^2.0.7"
+    prosemirror-resizable-view "^2.0.12"
+
+"@remirror/extension-italic@^2.0.13":
+  version "2.0.13"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-italic/-/extension-italic-2.0.13.tgz#089d80673d35372cd61148a0be3acd6dd4b4a609"
+  integrity sha512-DZ7BoIxQqwTWoTYgc7GpK+SCBKfDoJjh4xKQIrC/45tcK+WdPaaxNRhdtGUzwOhHL2psYT6HtDOyN/DpO5hjWQ==
+  dependencies:
+    "@babel/runtime" "^7.21.0"
+    "@remirror/core" "^2.0.13"
+    "@remirror/messages" "^2.0.3"
+
+"@remirror/extension-link@^2.0.15":
+  version "2.0.15"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-link/-/extension-link-2.0.15.tgz#e7c7321cac76ff1dbd6cc2eee0de1f02a8a6da5e"
+  integrity sha512-8SF84qMiVgcXXIGWCml4dpKYtqxo+bZAsdaPVtaB3NasbcDJdi+IsXRJUOz8KJq2FOMA+iwrU1qhIayPWHxMrg==
+  dependencies:
+    "@babel/runtime" "^7.21.0"
+    "@remirror/core" "^2.0.13"
+    "@remirror/extension-events" "^2.1.14"
+    "@remirror/messages" "^2.0.3"
     extract-domain "2.2.1"
 
-"@remirror/extension-list@^2.0.14":
-  version "2.0.14"
-  resolved "https://registry.npmjs.org/@remirror/extension-list/-/extension-list-2.0.14.tgz"
-  integrity sha512-eBnxrHzJby/B18xR1d8NIg4+aYV6HUN/by5R0MPG3dxVc3l1cfR7X3vd/RRG54FPpnuLfycGwSCOicJjvXSh/A==
+"@remirror/extension-list@^2.0.16":
+  version "2.0.16"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-list/-/extension-list-2.0.16.tgz#ea0bd0aac797e25f2ab1e10408249ed073672dbb"
+  integrity sha512-nqRvlQotHubZxpWxwdt+3FyV6AmEifx5aytKtz0i/jub9cM8AUKHqkRrsQchvw1Y5jaSAjHJr3J7I2sLBiH78w==
   dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@remirror/core" "^2.0.11"
-    "@remirror/extension-events" "^2.1.12"
-    "@remirror/messages" "^2.0.2"
-    "@remirror/theme" "^2.0.5"
+    "@babel/runtime" "^7.21.0"
+    "@remirror/core" "^2.0.13"
+    "@remirror/extension-events" "^2.1.14"
+    "@remirror/messages" "^2.0.3"
+    "@remirror/theme" "^2.0.7"
 
-"@remirror/extension-markdown@^2.0.11":
-  version "2.0.11"
-  resolved "https://registry.npmjs.org/@remirror/extension-markdown/-/extension-markdown-2.0.11.tgz"
-  integrity sha512-6dSV/EvYcnnN3/EYjmhx+5g8tS5Ht1biFyBDSc+sSjpX7+lV466zjFyVbimTsQF+MLy8fQKq2KOphKfBmpVmIA==
+"@remirror/extension-markdown@^2.0.13":
+  version "2.0.13"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-markdown/-/extension-markdown-2.0.13.tgz#4d40f68a70d6281a675c078e3389a8ea0d11870e"
+  integrity sha512-f++5Sc9yfUFlt6YHPXId+KuzfK0gQSWYY67Vv4oz2pzP92AINKa+YULpySCxkKKj1gqvpkFlmDAUIsG5AGA+Aw==
   dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@remirror/core" "^2.0.11"
-    "@remirror/messages" "^2.0.2"
-    "@types/marked" "^4.0.2"
+    "@babel/runtime" "^7.21.0"
+    "@remirror/core" "^2.0.13"
+    "@remirror/messages" "^2.0.3"
+    "@types/marked" "^4.0.8"
     "@types/turndown" "^5.0.1"
-    marked "^4.0.12"
-    turndown "^7.1.1"
+    marked "^4.3.0"
+    turndown "^7.1.2"
     turndown-plugin-gfm "^1.0.2"
 
-"@remirror/extension-mention-atom@^2.0.14":
-  version "2.0.14"
-  resolved "https://registry.npmjs.org/@remirror/extension-mention-atom/-/extension-mention-atom-2.0.14.tgz"
-  integrity sha512-RFQtaZa77l51in2zc7Gvrzt+HzRld5H6dpzejtwpK6huVzunYWbAMjeqOgCc5JbjvibgPoBc6dVL/fsB+6egog==
+"@remirror/extension-mention-atom@^2.0.16":
+  version "2.0.16"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-mention-atom/-/extension-mention-atom-2.0.16.tgz#8996c06186644526ea7f703236eedfa0155f904b"
+  integrity sha512-w8uA+EaVGlj53bQp/xWReSnWb762/EH8GfWfaRFyCRFwjL8V4FVac/jzEL6Z1ZCGJv77dmRJBGMhbQoyO/bDWA==
   dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@remirror/core" "^2.0.11"
-    "@remirror/extension-events" "^2.1.12"
-    "@remirror/messages" "^2.0.2"
-    "@remirror/theme" "^2.0.5"
+    "@babel/runtime" "^7.21.0"
+    "@remirror/core" "^2.0.13"
+    "@remirror/extension-events" "^2.1.14"
+    "@remirror/messages" "^2.0.3"
+    "@remirror/theme" "^2.0.7"
 
-"@remirror/extension-mention@^2.0.13":
+"@remirror/extension-mention@^2.0.15":
+  version "2.0.15"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-mention/-/extension-mention-2.0.15.tgz#1bfe713db515c1ce62720ced36b112875780bf67"
+  integrity sha512-6w+859yva48+Kg6ELIoj9+MHKljdKuXdSKU3X7USZNNiH+qb2zxdL3AHw0ifMC9ltzC3zg/ePYM5mE9SYPBt3w==
+  dependencies:
+    "@babel/runtime" "^7.21.0"
+    "@remirror/core" "^2.0.13"
+    "@remirror/extension-events" "^2.1.14"
+    "@remirror/messages" "^2.0.3"
+    escape-string-regexp "^4.0.0"
+
+"@remirror/extension-node-formatting@^2.0.13":
   version "2.0.13"
-  resolved "https://registry.npmjs.org/@remirror/extension-mention/-/extension-mention-2.0.13.tgz"
-  integrity sha512-xEFRWDuJtDieud/cSQDGR8Bemmf7S0G6AeMM1+hfl9j8sg+J+ngnfPU95Qot7rrn6X9kV9v8CwaXzWhgStASoQ==
+  resolved "https://registry.yarnpkg.com/@remirror/extension-node-formatting/-/extension-node-formatting-2.0.13.tgz#fc1b58ee4e441084e934e2c8ded82e5964deee20"
+  integrity sha512-yL1Jk1Qjs2VmruGltV++D4QenmpDdAiOa4KQvRx0cgTvIuQ/rxQBV19IXkAj+rTzYfZmtI6W1DdScVY9bqCZ9w==
   dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@remirror/core" "^2.0.11"
-    "@remirror/extension-events" "^2.1.12"
-    "@remirror/messages" "^2.0.2"
-    escape-string-regexp "^4.0.0"
+    "@babel/runtime" "^7.21.0"
+    "@remirror/core" "^2.0.13"
+    "@remirror/messages" "^2.0.3"
 
-"@remirror/extension-node-formatting@^2.0.11":
-  version "2.0.11"
-  resolved "https://registry.npmjs.org/@remirror/extension-node-formatting/-/extension-node-formatting-2.0.11.tgz"
-  integrity sha512-oLL9o16pO1M+OHiwKkFabBASDo3cwTlpMfv3fQA5rHH+WcjHlN3lkZSjTV1xmaBwYh5wWXGDYkQiybtaq4FHuA==
+"@remirror/extension-paragraph@^2.0.13":
+  version "2.0.13"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-paragraph/-/extension-paragraph-2.0.13.tgz#eac5767364ff2abf4f8bc1e9b3e2cd80b6cb536a"
+  integrity sha512-/iEYz6Sn/RLqTefa/vjjyfhMQAGcpNQY7hdW0rSox+IiwDKeeY+uR2TCi3hs/D9IMzNERZXMKD5Wk8ver1kYCg==
   dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@remirror/core" "^2.0.11"
-    "@remirror/messages" "^2.0.2"
+    "@babel/runtime" "^7.21.0"
+    "@remirror/core" "^2.0.13"
+    "@remirror/messages" "^2.0.3"
 
-"@remirror/extension-paragraph@^2.0.11":
-  version "2.0.11"
-  resolved "https://registry.npmjs.org/@remirror/extension-paragraph/-/extension-paragraph-2.0.11.tgz"
-  integrity sha512-1dxGrOwqlF1bWQxyxux1KDHNQJcuUicw70s2Hl5KOCwYD4ZcGxiJPxd/ppPvO9oByHbBcTm63PtIHuu1b/qmeA==
+"@remirror/extension-placeholder@^2.0.14":
+  version "2.0.14"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-placeholder/-/extension-placeholder-2.0.14.tgz#3d9e8b1a48d0b1c6f3fe931703f86f2c75d3153d"
+  integrity sha512-YyrDs1Plyrpy5N6ehG3QOZNxpsQpDdI34yFQst+g2t/amnY6ScCnAJJ4GE666P4xnPF2V9gY0478Re09JmJ1KQ==
   dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@remirror/core" "^2.0.11"
-    "@remirror/messages" "^2.0.2"
+    "@babel/runtime" "^7.21.0"
+    "@remirror/core" "^2.0.13"
+    "@remirror/messages" "^2.0.3"
+    "@remirror/theme" "^2.0.7"
 
-"@remirror/extension-placeholder@^2.0.12":
-  version "2.0.12"
-  resolved "https://registry.npmjs.org/@remirror/extension-placeholder/-/extension-placeholder-2.0.12.tgz"
-  integrity sha512-QulBgeGa99u7mPMJp740X+6doYowRJt05wU8rPhxfNKvUxDA5kJ9gAFKL4W/p9iruj3vg0Wdwwwon59u9SOQ7g==
+"@remirror/extension-positioner@^2.1.8":
+  version "2.1.8"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-positioner/-/extension-positioner-2.1.8.tgz#2aa14df658dc0cb8892ac7f424226cb09c6b5063"
+  integrity sha512-7svqCFayauNSFCXejvitFqkTUhxk74FCCoWNI2S4p8m0y80TzJDVrASjc2m8/kZALjVeIE4Byg1gE58zj3r9SA==
   dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@remirror/core" "^2.0.11"
-    "@remirror/messages" "^2.0.2"
-    "@remirror/theme" "^2.0.5"
-
-"@remirror/extension-positioner@^2.1.6":
-  version "2.1.6"
-  resolved "https://registry.npmjs.org/@remirror/extension-positioner/-/extension-positioner-2.1.6.tgz"
-  integrity sha512-ocX5ASmUb2alJ+XJrUxLkeKX7rFznvXsWZhTYaYrP7UgsSlDdSUuiE8urYLcl635MIyb9ahBjL4U9XMjASWBeQ==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@remirror/core" "^2.0.11"
-    "@remirror/extension-events" "^2.1.12"
-    "@remirror/messages" "^2.0.2"
-    "@remirror/theme" "^2.0.5"
+    "@babel/runtime" "^7.21.0"
+    "@remirror/core" "^2.0.13"
+    "@remirror/extension-events" "^2.1.14"
+    "@remirror/messages" "^2.0.3"
+    "@remirror/theme" "^2.0.7"
     nanoevents "^5.1.13"
 
-"@remirror/extension-react-component@^2.0.11":
-  version "2.0.11"
-  resolved "https://registry.npmjs.org/@remirror/extension-react-component/-/extension-react-component-2.0.11.tgz"
-  integrity sha512-wH3oLQfX4dyugRXeqOZMlTFu/iMlTMg39bKQqZFHxiVjfZoNHSffhDfpPpiV8epXiKar9YW8kqhSLePodU15Mg==
+"@remirror/extension-react-component@^2.0.13":
+  version "2.0.13"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-react-component/-/extension-react-component-2.0.13.tgz#8c64a661112632c1f680a4a9a289adbb90b0dee4"
+  integrity sha512-xKzfgrmhncUQXkTjGqlYUxjG/QmxWjtEzpXRpND3YYULTPcxlVK4dNXtPvk0aczD6cvZVZohOeRSl8ESSLSo6A==
   dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@remirror/core" "^2.0.11"
-    "@remirror/messages" "^2.0.2"
+    "@babel/runtime" "^7.21.0"
+    "@remirror/core" "^2.0.13"
+    "@remirror/messages" "^2.0.3"
     nanoevents "^5.1.13"
 
-"@remirror/extension-react-tables@^2.2.11", "@remirror/extension-react-tables@^2.2.12":
-  version "2.2.12"
-  resolved "https://registry.npmjs.org/@remirror/extension-react-tables/-/extension-react-tables-2.2.12.tgz"
-  integrity sha512-33wCcKFhH12tlrC7NOjkAtBzbrga5agw6KqX+FkwcBul6j+hqkPNo4eKoGKe91JKMDHOvEGWuckiVgybLKomjw==
+"@remirror/extension-react-tables@^2.2.11", "@remirror/extension-react-tables@^2.2.15":
+  version "2.2.15"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-react-tables/-/extension-react-tables-2.2.15.tgz#015976306314b5b06c8fcdef0e2c16fb7985c43b"
+  integrity sha512-AX772cBXp6y16PROeoauA3d2dlnV54cMr+KwUeyoL1DvRtCGPh623AGq1YeypWQLg5R9SQ+JL//zlbvePBMhmA==
   dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@emotion/css" "^11.1.3"
-    "@linaria/core" "3.0.0-beta.13"
-    "@remirror/core" "^2.0.11"
-    "@remirror/core-utils" "^2.0.10"
-    "@remirror/extension-positioner" "^2.1.6"
-    "@remirror/extension-tables" "^2.2.8"
-    "@remirror/icons" "^2.0.1"
-    "@remirror/messages" "^2.0.2"
-    "@remirror/preset-core" "^2.0.14"
-    "@remirror/react-components" "^2.1.9"
-    "@remirror/react-core" "^2.0.15"
-    "@remirror/react-hooks" "^2.0.19"
-    "@remirror/theme" "^2.0.5"
-    jsx-dom-cjs "^8.0.0"
+    "@babel/runtime" "^7.21.0"
+    "@emotion/css" "^11.10.6"
+    "@linaria/core" "4.2.9"
+    "@remirror/core" "^2.0.13"
+    "@remirror/core-utils" "^2.0.12"
+    "@remirror/extension-positioner" "^2.1.8"
+    "@remirror/extension-tables" "^2.2.10"
+    "@remirror/icons" "^2.0.2"
+    "@remirror/messages" "^2.0.3"
+    "@remirror/preset-core" "^2.0.16"
+    "@remirror/react-components" "^2.1.12"
+    "@remirror/react-core" "^2.0.17"
+    "@remirror/react-hooks" "^2.0.22"
+    "@remirror/theme" "^2.0.7"
+    jsx-dom-cjs "^8.0.5"
 
-"@remirror/extension-search@^2.0.12":
-  version "2.0.12"
-  resolved "https://registry.npmjs.org/@remirror/extension-search/-/extension-search-2.0.12.tgz"
-  integrity sha512-ldGtB1Y//JQgrvTBNtlpY4yhsAyrq4VJFkuJITnzYApQ9s/Tei+QMYFlpFf9W/0do7AJ9UeN+mBudzmmTu1MrA==
+"@remirror/extension-search@^2.0.14":
+  version "2.0.14"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-search/-/extension-search-2.0.14.tgz#a8b5429411041a437e1f92b12cb21e220f15819c"
+  integrity sha512-PZrf20bqr8n+E1kgeb6uQJG5ZeD8nHTzzICZRe01ltwmO4vqnWMXr7Tm5Z6Byh+ZqwLbMWkIeUzoaV7RdBQ94Q==
   dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@remirror/core" "^2.0.11"
-    "@remirror/messages" "^2.0.2"
+    "@babel/runtime" "^7.21.0"
+    "@remirror/core" "^2.0.13"
+    "@remirror/messages" "^2.0.3"
     escape-string-regexp "^4.0.0"
 
-"@remirror/extension-shortcuts@^2.0.11":
-  version "2.0.11"
-  resolved "https://registry.npmjs.org/@remirror/extension-shortcuts/-/extension-shortcuts-2.0.11.tgz"
-  integrity sha512-2FmZaT042qsQgit2ynudINeRTZzak56ro+DDJEff8E6L6maxnrivKui6ZqeuR4rFGNci7earbF3h42pINWFgjg==
+"@remirror/extension-shortcuts@^2.0.13":
+  version "2.0.13"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-shortcuts/-/extension-shortcuts-2.0.13.tgz#eeeda18a5ebf842d3efb74acf688cac7bb78a976"
+  integrity sha512-LHHn7lnbicL9CQet9w9Aayw25SqsA5s9ysGWO9R9DbrYKJWWL1EijvZ3rz+N6nlb9/ItFWA6eNSSUSausnv+iA==
   dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@remirror/core" "^2.0.11"
+    "@babel/runtime" "^7.21.0"
+    "@remirror/core" "^2.0.13"
 
-"@remirror/extension-strike@^2.0.11":
-  version "2.0.11"
-  resolved "https://registry.npmjs.org/@remirror/extension-strike/-/extension-strike-2.0.11.tgz"
-  integrity sha512-9W3SF7KKMKw206laqInXDM2W0y44Pk5otBGc3dyoVItdD2flFj548YHwrqwnEGzGUmF1gDZDu7q3cLMKeTlGKA==
+"@remirror/extension-strike@^2.0.13":
+  version "2.0.13"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-strike/-/extension-strike-2.0.13.tgz#0bd65d983cc250b5ae21030b82ce5593ede74ae8"
+  integrity sha512-42aEM12xux3RoxTZHJ6OBPpHux96btiMC7btPz7lJ/mqcAtVvIP3RHb8D01esU7KEpqIaI6H6n2WKc/JmvCdMQ==
   dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@remirror/core" "^2.0.11"
-    "@remirror/messages" "^2.0.2"
+    "@babel/runtime" "^7.21.0"
+    "@remirror/core" "^2.0.13"
+    "@remirror/messages" "^2.0.3"
 
-"@remirror/extension-sub@^2.0.11":
-  version "2.0.11"
-  resolved "https://registry.npmjs.org/@remirror/extension-sub/-/extension-sub-2.0.11.tgz"
-  integrity sha512-iu/qkCv9zUhziX/lcTnOKtKBFx/pVDJjyhEMY4hrFYP/F0JuQ6ujiroCDlvycBUpYCyyRdYFtM3510kHszm8nQ==
+"@remirror/extension-sub@^2.0.13":
+  version "2.0.13"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-sub/-/extension-sub-2.0.13.tgz#718e9890b9c78c870f0d106a505d4e86d83c640d"
+  integrity sha512-eeEdHBWynyoU6YXc6Xt+n93nK2JJ0ry2TGqr8nzomssm2gddASPJKXFoPELuwME/iqzz64SxU/RcI7BRc/lbdw==
   dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@remirror/core" "^2.0.11"
-    "@remirror/messages" "^2.0.2"
+    "@babel/runtime" "^7.21.0"
+    "@remirror/core" "^2.0.13"
+    "@remirror/messages" "^2.0.3"
 
-"@remirror/extension-sup@^2.0.11":
-  version "2.0.11"
-  resolved "https://registry.npmjs.org/@remirror/extension-sup/-/extension-sup-2.0.11.tgz"
-  integrity sha512-7l8XVJDM8VIs+Gkna3Rzpb4ROBo5JxRFDjessJS0blxXTlfkdeaRDnogPPJ+4qtBtooCfzAEg86SIEBlF3o2iQ==
+"@remirror/extension-sup@^2.0.13":
+  version "2.0.13"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-sup/-/extension-sup-2.0.13.tgz#8f3a8bafcca1925ec5bbf5cf336fd10db292cdc1"
+  integrity sha512-8Pz+K8aSlxVCeqk9ZSX+JiSBNeCau8EbGkfTg1wAatq1jCrNhFHOHoazYOqA+nJjYP7/c5hiCoPYLpyXweIX3w==
   dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@remirror/core" "^2.0.11"
-    "@remirror/messages" "^2.0.2"
+    "@babel/runtime" "^7.21.0"
+    "@remirror/core" "^2.0.13"
+    "@remirror/messages" "^2.0.3"
 
-"@remirror/extension-tables@^2.2.8":
-  version "2.2.8"
-  resolved "https://registry.npmjs.org/@remirror/extension-tables/-/extension-tables-2.2.8.tgz"
-  integrity sha512-zhdR1B0rlwWc1zsu3krLTQUf0n5J5ucgdmcWw/J14d1EeGm95rM3BGBIW3V2xOgoFLbEHwovubwkQejXA7aHQQ==
+"@remirror/extension-tables@^2.2.10":
+  version "2.2.10"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-tables/-/extension-tables-2.2.10.tgz#8de6180136bfc4862b4744d0096c6119e8778e1e"
+  integrity sha512-5NYC7C5YuaLVmrh8w9ifJSZ6UlsX0BrdJjQSgySbahuK+gRb6E1acoQL4hGZMJHz52CwBFQpmAinDZdw9s68qQ==
   dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@remirror/core" "^2.0.11"
-    "@remirror/extension-positioner" "^2.1.6"
-    "@remirror/messages" "^2.0.2"
-    "@remirror/theme" "^2.0.5"
+    "@babel/runtime" "^7.21.0"
+    "@remirror/core" "^2.0.13"
+    "@remirror/extension-positioner" "^2.1.8"
+    "@remirror/messages" "^2.0.3"
+    "@remirror/theme" "^2.0.7"
 
-"@remirror/extension-text-case@^2.0.11":
-  version "2.0.11"
-  resolved "https://registry.npmjs.org/@remirror/extension-text-case/-/extension-text-case-2.0.11.tgz"
-  integrity sha512-dyqM9am/Ldf9AgcoJwYlT3YuZoX+oAgSmGMkjmWfu8deSxPbdGhXLOUVkhfupmz+ONskTG/jdzaz6wpak+ipmA==
+"@remirror/extension-text-case@^2.0.13":
+  version "2.0.13"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-text-case/-/extension-text-case-2.0.13.tgz#d3bd5923f48befe7fe9f5d275ed7301c3b88e7d3"
+  integrity sha512-sC0VoHUf2DHKAznn6+19eJTc2z8H6diz49MGodOtnGU9eCYbkKa1aoVB1ZMQndLAIQJ6kR9ElEOMvk4bpu++UA==
   dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@remirror/core" "^2.0.11"
-    "@remirror/messages" "^2.0.2"
+    "@babel/runtime" "^7.21.0"
+    "@remirror/core" "^2.0.13"
+    "@remirror/messages" "^2.0.3"
 
-"@remirror/extension-text-color@^2.0.12":
-  version "2.0.12"
-  resolved "https://registry.npmjs.org/@remirror/extension-text-color/-/extension-text-color-2.0.12.tgz"
-  integrity sha512-r35o1GSuidZ8Li5vUheiIJas4rLmjSoGHrZMQw4G6PifkdEcJyC2rYSCepHM/iISEW8N8lvq4tRizqzhB82WlA==
+"@remirror/extension-text-color@^2.0.14":
+  version "2.0.14"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-text-color/-/extension-text-color-2.0.14.tgz#647f20cb934c42e8f7db66fc57880755fe700eab"
+  integrity sha512-YSHMXwrvNg3gZ2KXX2nm5cqsHGSvGr8LvWgvqwLs5n8etZZ3NJyJT+yWbRfWf4cHQuBqIPoyH85XpUyzQVbNhw==
   dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@remirror/core" "^2.0.11"
-    "@remirror/i18n" "^2.0.2"
-    "@remirror/messages" "^2.0.2"
-    "@remirror/theme" "^2.0.5"
-    color2k "^2.0.0"
+    "@babel/runtime" "^7.21.0"
+    "@remirror/core" "^2.0.13"
+    "@remirror/i18n" "^2.0.3"
+    "@remirror/messages" "^2.0.3"
+    "@remirror/theme" "^2.0.7"
+    color2k "^2.0.2"
 
-"@remirror/extension-text-highlight@^2.0.12":
-  version "2.0.12"
-  resolved "https://registry.npmjs.org/@remirror/extension-text-highlight/-/extension-text-highlight-2.0.12.tgz"
-  integrity sha512-7vyHC/Dwr4LqYBhN+luYJFYtTzzbAQCLpsxQCngHSOGB0Jv/yKF3nSe9kJl1pXR4txHSCoKZGz9TJ/v1Hj/FMw==
+"@remirror/extension-text-highlight@^2.0.14":
+  version "2.0.14"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-text-highlight/-/extension-text-highlight-2.0.14.tgz#b3c36646fa9a200676a93078f31f57e48dc7dd7d"
+  integrity sha512-stZ58DDD9jJYHUbSVeJ/r61Ywp7Zt7OtdJFeeD6fjWE6gs/SwQ7MCpIMD9GpFuwOgXsRu6FlOUPllzocpsga6Q==
   dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@remirror/core" "^2.0.11"
-    "@remirror/extension-text-color" "^2.0.12"
-    "@remirror/messages" "^2.0.2"
+    "@babel/runtime" "^7.21.0"
+    "@remirror/core" "^2.0.13"
+    "@remirror/extension-text-color" "^2.0.14"
+    "@remirror/messages" "^2.0.3"
 
-"@remirror/extension-text@^2.0.11":
-  version "2.0.11"
-  resolved "https://registry.npmjs.org/@remirror/extension-text/-/extension-text-2.0.11.tgz"
-  integrity sha512-Jf9vAUMAHy05cNtuDHe4YrcLwWoHdaBH6WdHdZgBG2XSbU5wGPUYbmIepvCaSUuoW/k19uP9LOAKeOTpF+1KgQ==
+"@remirror/extension-text@^2.0.13":
+  version "2.0.13"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-text/-/extension-text-2.0.13.tgz#98c6ddeb09910e113b3964009df6baf6fa2bb062"
+  integrity sha512-0lGw8zz3OZzRY5zGrI1gXJIfuv23Yf3IdK3507oqE0oVAnP61vPB5WMaYv3EtGez9g3RoXO8S0bIJJ3syzdILg==
   dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@remirror/core" "^2.0.11"
-    "@remirror/messages" "^2.0.2"
+    "@babel/runtime" "^7.21.0"
+    "@remirror/core" "^2.0.13"
+    "@remirror/messages" "^2.0.3"
 
-"@remirror/extension-trailing-node@^2.0.11":
-  version "2.0.11"
-  resolved "https://registry.npmjs.org/@remirror/extension-trailing-node/-/extension-trailing-node-2.0.11.tgz"
-  integrity sha512-OiGMNZeKY05J8s9SW02HzmJTWU1WfPSIq4pO7e1nmntTnK3d8Qj6m4iIxXn7MWP6FYbipiUEVCaK9bTU7a5KGQ==
+"@remirror/extension-trailing-node@^2.0.13":
+  version "2.0.13"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-trailing-node/-/extension-trailing-node-2.0.13.tgz#283fa1cf778430fc9074c4133d1ec714ec4daeb4"
+  integrity sha512-DCeovi8yJ8HzTHZ/8bIxalm7aSjngN2B+DazGb5b6iLPFiEi00zucsw81bnVkHMa8DKDeH7WVbe13wZI+tn+KA==
   dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@remirror/core" "^2.0.11"
-    "@remirror/messages" "^2.0.2"
+    "@babel/runtime" "^7.21.0"
+    "@remirror/core" "^2.0.13"
+    "@remirror/messages" "^2.0.3"
 
-"@remirror/extension-underline@^2.0.11":
-  version "2.0.11"
-  resolved "https://registry.npmjs.org/@remirror/extension-underline/-/extension-underline-2.0.11.tgz"
-  integrity sha512-XQX8arw6x/V3xy4ZmXj0Kn3OSjGpR4MF8qG4QtASkQYoArDTMb23GOwGgGkt0IxFBwTjXx4pqopREaAGAg+b+g==
+"@remirror/extension-underline@^2.0.13":
+  version "2.0.13"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-underline/-/extension-underline-2.0.13.tgz#7b4cae752290a5c1bee21300e4a3a7f35bd9a39c"
+  integrity sha512-wrNDSqNvwqtZBiz0nOEQaWOEthxOtBVwkuTku83Sh7ftK6rNWJXtHKNKGUAFW6A9FXxvvqrnr8+n0DSgYdIAMA==
   dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@remirror/core" "^2.0.11"
-    "@remirror/messages" "^2.0.2"
+    "@babel/runtime" "^7.21.0"
+    "@remirror/core" "^2.0.13"
+    "@remirror/messages" "^2.0.3"
 
-"@remirror/extension-whitespace@^2.0.11":
-  version "2.0.11"
-  resolved "https://registry.npmjs.org/@remirror/extension-whitespace/-/extension-whitespace-2.0.11.tgz"
-  integrity sha512-tMzsYCNASW+ACpLfh5P5mteuEb/QilPsx4Ot2NUfG/T88dFZJhtx8TX5c1L64S+ugpISoyXI6fjNi0MPEYyx6g==
+"@remirror/extension-whitespace@^2.0.13":
+  version "2.0.13"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-whitespace/-/extension-whitespace-2.0.13.tgz#a71b077f4ce7dca737371855626d2acf2c2066cd"
+  integrity sha512-daRoiH2/xZWrz8tzV14rfG8Catd0ThPJdWgoQ0en3QxcwYsTOP1+DXE1ZwUdP/uukuHg6DMAvgMvsWwJMtVx9A==
   dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@remirror/core" "^2.0.11"
-    "@remirror/messages" "^2.0.2"
+    "@babel/runtime" "^7.21.0"
+    "@remirror/core" "^2.0.13"
+    "@remirror/messages" "^2.0.3"
 
-"@remirror/extension-yjs@^3.0.11":
-  version "3.0.11"
-  resolved "https://registry.npmjs.org/@remirror/extension-yjs/-/extension-yjs-3.0.11.tgz"
-  integrity sha512-s64VKb/rXv7hDB6kRQXAwzbBmhWePReevIRGpxxro2vv8Bqz1YjuDDEtvLnRhGrYyLSB52aH8flbkR2+GF0QHA==
+"@remirror/extension-yjs@^3.0.14":
+  version "3.0.14"
+  resolved "https://registry.yarnpkg.com/@remirror/extension-yjs/-/extension-yjs-3.0.14.tgz#97992714ff483a4d6bf9c509fb0abdd78c9f0d3d"
+  integrity sha512-25o8OgeS+eKWiml2DngJeMwVbUbWoPcvCS42SUkTdYU1OZVTOLlNwjidMqiBwjRR48ePmrfN21dprWmqr9eAQA==
   dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@remirror/core" "^2.0.11"
-    "@remirror/messages" "^2.0.2"
+    "@babel/runtime" "^7.21.0"
+    "@remirror/core" "^2.0.13"
+    "@remirror/messages" "^2.0.3"
+    prosemirror-model "^1.19.0"
+    prosemirror-state "^1.4.2"
+    prosemirror-view "^1.30.2"
     y-prosemirror "^1.0.19"
     y-protocols "^1.0.5"
 
-"@remirror/i18n@^2.0.2":
-  version "2.0.2"
-  resolved "https://registry.npmjs.org/@remirror/i18n/-/i18n-2.0.2.tgz"
-  integrity sha512-NYKGdMf3DGILMHKZfOrmiGW8XlhQ7w4edkenjQfa5FPTyvZTbQzKT0urxeoF9B1Pfu7VR6yiZZLp4yRMIiGqvw==
+"@remirror/i18n@^2.0.3":
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/@remirror/i18n/-/i18n-2.0.3.tgz#8ab0cb18b64773cdb52b2def2f3816980d7feab3"
+  integrity sha512-jRMYW8aZIopZpwJBl6bPNdD4UcOknnnf8ysa1Kdl9v2a8bQAtCcljC+CJIVe7asV09FJ3LokmSFM3ozrQZAY9Q==
   dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@lingui/core" "^3.14.0"
-    "@lingui/detect-locale" "^3.14.0"
-    "@remirror/core-helpers" "^2.0.1"
-    make-plural "^6.2.1"
+    "@babel/runtime" "^7.21.0"
+    "@lingui/core" "^3.17.2"
+    "@lingui/detect-locale" "^3.17.2"
+    "@remirror/core-helpers" "^2.0.2"
+    make-plural "^6.2.2"
 
-"@remirror/icons@^2.0.1":
-  version "2.0.1"
-  resolved "https://registry.npmjs.org/@remirror/icons/-/icons-2.0.1.tgz"
-  integrity sha512-dk+F9c38seXFnJLfPNDXKCUonUAg53LFxhpBXNkZfPxmf6bVqv2p3L5QhwEvbYmvOgdY0w4BM1Po1NYHUJfATg==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@remirror/core-helpers" "^2.0.1"
-
-"@remirror/messages@^2.0.2":
+"@remirror/icons@^2.0.2":
   version "2.0.2"
-  resolved "https://registry.npmjs.org/@remirror/messages/-/messages-2.0.2.tgz"
-  integrity sha512-Cf78RL2OXQCWkiO0QgV+1FCpmDwjoVctZ/ZAXT2RgBBmNKQHauPBZaG0Z3Cpb9I0vdz3xIaaEghwVS0cJNWtYA==
+  resolved "https://registry.yarnpkg.com/@remirror/icons/-/icons-2.0.2.tgz#a1222dd6afbacfd2ac184859ba3590335b357b85"
+  integrity sha512-RuuwUuJtUWNZgIQV9JlHzZ+McNP2dIfn/KhZkXuhULCn/pIku12jDJl4GgODyLvrG1lpbkCBOcRFQIAcNl++4A==
   dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@lingui/core" "^3.14.0"
-    "@remirror/core-helpers" "^2.0.1"
+    "@babel/runtime" "^7.21.0"
+    "@remirror/core-helpers" "^2.0.2"
+
+"@remirror/messages@^2.0.3", "@remirror/messages@^2.0.4":
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/@remirror/messages/-/messages-2.0.4.tgz#b577a6d7ff78c39e1e670e685aa13139364e34e0"
+  integrity sha512-sTrn4zsf8Y2YCfa96CDk3NNla6viOWiUcyoUDsawl3mKkVJN0P+gZ3InheftwDbW/Q8YhfhBBF1Ov5kL/HbfWA==
+  dependencies:
+    "@babel/runtime" "^7.21.0"
+    "@lingui/core" "^3.17.2"
+    "@remirror/core-helpers" "^2.0.2"
 
 "@remirror/pm@^2.0.3":
-  version "2.0.3"
-  resolved "https://registry.npmjs.org/@remirror/pm/-/pm-2.0.3.tgz"
-  integrity sha512-LaXc7nCq1sqIasYK2kp9uSV8yUKEFP9N48HTPMguhWh8bzZXxbvoJ1VuDfyq0x4bR3OyiGJD2CDVDzQLgD+gRA==
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/@remirror/pm/-/pm-2.0.5.tgz#021aca4726e41ef3540a3e18d1a689aea90a4c76"
+  integrity sha512-HINTVqfxpn1xMJem+PM7ZfaOEz0iMFZQIVbMvXsDxIc27QeXan5yy21XBAft+A1GaX6372lj4rcALalfiT0o+Q==
   dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@remirror/core-constants" "^2.0.0"
-    "@remirror/core-helpers" "^2.0.1"
+    "@babel/runtime" "^7.21.0"
+    "@remirror/core-constants" "^2.0.1"
+    "@remirror/core-helpers" "^2.0.2"
     prosemirror-collab "^1.3.0"
-    prosemirror-commands "^1.5.0"
-    prosemirror-dropcursor "^1.6.1"
+    prosemirror-commands "^1.5.1"
+    prosemirror-dropcursor "^1.8.0"
     prosemirror-gapcursor "^1.3.1"
     prosemirror-history "^1.3.0"
     prosemirror-inputrules "^1.2.0"
-    prosemirror-keymap "^1.2.0"
-    prosemirror-model "^1.18.3"
-    prosemirror-paste-rules "^2.0.3"
+    prosemirror-keymap "^1.2.1"
+    prosemirror-model "^1.19.0"
+    prosemirror-paste-rules "^2.0.5"
     prosemirror-schema-list "^1.2.2"
     prosemirror-state "^1.4.2"
-    prosemirror-suggest "^2.0.3"
-    prosemirror-tables "^1.3.0"
-    prosemirror-trailing-node "^2.0.3"
-    prosemirror-transform "^1.7.0"
-    prosemirror-view "^1.29.1"
+    prosemirror-suggest "^2.0.4"
+    prosemirror-tables "^1.3.2"
+    prosemirror-trailing-node "^2.0.4"
+    prosemirror-transform "^1.7.1"
+    prosemirror-view "^1.30.2"
 
-"@remirror/preset-core@^2.0.14":
+"@remirror/preset-core@^2.0.16":
+  version "2.0.16"
+  resolved "https://registry.yarnpkg.com/@remirror/preset-core/-/preset-core-2.0.16.tgz#3194a7786850e9a6a1069da85183d727f49f1637"
+  integrity sha512-Qg5kDJIoSqSCtqwuT/+xq1pXf5XHonnqE4oRL5Z7Tu9RRmQ6evMhdc6CqehP5xwI+52g7q9CCRQYyNAtAhS3LQ==
+  dependencies:
+    "@babel/runtime" "^7.21.0"
+    "@remirror/core" "^2.0.13"
+    "@remirror/extension-doc" "^2.1.5"
+    "@remirror/extension-events" "^2.1.14"
+    "@remirror/extension-gap-cursor" "^2.0.13"
+    "@remirror/extension-history" "^2.0.13"
+    "@remirror/extension-paragraph" "^2.0.13"
+    "@remirror/extension-positioner" "^2.1.8"
+    "@remirror/extension-text" "^2.0.13"
+
+"@remirror/preset-formatting@^2.0.14":
   version "2.0.14"
-  resolved "https://registry.npmjs.org/@remirror/preset-core/-/preset-core-2.0.14.tgz"
-  integrity sha512-iXbA1nlyXw8ca4gIblMAqoG4K6J+N/+z1pUlkk2EuukF0Xg5iXc1gbK+z1jfHtxQxoBVScVDiJKkSb7Fc3UGPw==
+  resolved "https://registry.yarnpkg.com/@remirror/preset-formatting/-/preset-formatting-2.0.14.tgz#4c2939954a3ec733038e44f69029b3228e18ba2a"
+  integrity sha512-Dn8AITrTycEsO3kmR3kiWE8tCjWQUmK4vvyE/aGTyvHQHsDt1KhK6X42os7D+ePxeRf4OkhaZJhdpVmujmCCUw==
   dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@remirror/core" "^2.0.11"
-    "@remirror/extension-doc" "^2.1.3"
-    "@remirror/extension-events" "^2.1.12"
-    "@remirror/extension-gap-cursor" "^2.0.11"
-    "@remirror/extension-history" "^2.0.11"
-    "@remirror/extension-paragraph" "^2.0.11"
-    "@remirror/extension-positioner" "^2.1.6"
-    "@remirror/extension-text" "^2.0.11"
+    "@babel/runtime" "^7.21.0"
+    "@remirror/core" "^2.0.13"
+    "@remirror/extension-bold" "^2.0.13"
+    "@remirror/extension-columns" "^2.0.13"
+    "@remirror/extension-font-size" "^2.0.13"
+    "@remirror/extension-heading" "^2.0.13"
+    "@remirror/extension-italic" "^2.0.13"
+    "@remirror/extension-node-formatting" "^2.0.13"
+    "@remirror/extension-strike" "^2.0.13"
+    "@remirror/extension-sub" "^2.0.13"
+    "@remirror/extension-sup" "^2.0.13"
+    "@remirror/extension-text-case" "^2.0.13"
+    "@remirror/extension-text-color" "^2.0.14"
+    "@remirror/extension-text-highlight" "^2.0.14"
+    "@remirror/extension-underline" "^2.0.13"
+    "@remirror/extension-whitespace" "^2.0.13"
 
-"@remirror/preset-formatting@^2.0.12":
-  version "2.0.12"
-  resolved "https://registry.npmjs.org/@remirror/preset-formatting/-/preset-formatting-2.0.12.tgz"
-  integrity sha512-bHs9KHBt01fy8UMJlKaX/k4OH6YAUMoVZot/unPgGNl9CmEf8nMIjj9DMTscWTqc4xkewanwxEGKLeBOhllk4Q==
+"@remirror/preset-react@^2.0.14":
+  version "2.0.14"
+  resolved "https://registry.yarnpkg.com/@remirror/preset-react/-/preset-react-2.0.14.tgz#58eec4853e6582dec37d4d8df81b0b0d15885e3b"
+  integrity sha512-brsNceisHfXbBqmuCFEj8bBlc3Ggnz8uGynS5bHDzfFP7EZgsOjIaHu6BpkifX/3qaJlzPSj3p1keoUgeqt6Zg==
   dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@remirror/core" "^2.0.11"
-    "@remirror/extension-bold" "^2.0.11"
-    "@remirror/extension-columns" "^2.0.11"
-    "@remirror/extension-font-size" "^2.0.11"
-    "@remirror/extension-heading" "^2.0.11"
-    "@remirror/extension-italic" "^2.0.11"
-    "@remirror/extension-node-formatting" "^2.0.11"
-    "@remirror/extension-strike" "^2.0.11"
-    "@remirror/extension-sub" "^2.0.11"
-    "@remirror/extension-sup" "^2.0.11"
-    "@remirror/extension-text-case" "^2.0.11"
-    "@remirror/extension-text-color" "^2.0.12"
-    "@remirror/extension-text-highlight" "^2.0.12"
-    "@remirror/extension-underline" "^2.0.11"
-    "@remirror/extension-whitespace" "^2.0.11"
+    "@babel/runtime" "^7.21.0"
+    "@remirror/core" "^2.0.13"
+    "@remirror/extension-placeholder" "^2.0.14"
+    "@remirror/extension-react-component" "^2.0.13"
+    "@remirror/react-utils" "^2.0.5"
 
-"@remirror/preset-react@^2.0.12":
-  version "2.0.12"
-  resolved "https://registry.npmjs.org/@remirror/preset-react/-/preset-react-2.0.12.tgz"
-  integrity sha512-90+5HFsd1Ao3nf+6Qytg54uBuP0xaF7npkCdircRjNaPTnJiZ9+nkcJswXGF25zv2V+tGNn9nwVvuubFeFllwQ==
+"@remirror/preset-wysiwyg@^2.0.19":
+  version "2.0.19"
+  resolved "https://registry.yarnpkg.com/@remirror/preset-wysiwyg/-/preset-wysiwyg-2.0.19.tgz#58e7050a29ba2cf2b35177c1e1916615ea8d67e4"
+  integrity sha512-yYDfHy3WJzBmYkTd1R8WgY0xND4ZhSOQSmWWxYcCb9QJOWqeX/LREk6Ac+FV2Ygc+aoRGx5HI2R6POehe1fb5g==
   dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@remirror/core" "^2.0.11"
-    "@remirror/extension-placeholder" "^2.0.12"
-    "@remirror/extension-react-component" "^2.0.11"
-    "@remirror/react-utils" "^2.0.3"
+    "@babel/runtime" "^7.21.0"
+    "@remirror/core" "^2.0.13"
+    "@remirror/extension-bidi" "^2.0.13"
+    "@remirror/extension-blockquote" "^2.0.14"
+    "@remirror/extension-bold" "^2.0.13"
+    "@remirror/extension-code" "^2.0.13"
+    "@remirror/extension-code-block" "^2.0.14"
+    "@remirror/extension-drop-cursor" "^2.0.13"
+    "@remirror/extension-embed" "^2.0.13"
+    "@remirror/extension-gap-cursor" "^2.0.13"
+    "@remirror/extension-hard-break" "^2.0.13"
+    "@remirror/extension-heading" "^2.0.13"
+    "@remirror/extension-horizontal-rule" "^2.0.13"
+    "@remirror/extension-image" "^2.1.9"
+    "@remirror/extension-italic" "^2.0.13"
+    "@remirror/extension-link" "^2.0.15"
+    "@remirror/extension-list" "^2.0.16"
+    "@remirror/extension-search" "^2.0.14"
+    "@remirror/extension-shortcuts" "^2.0.13"
+    "@remirror/extension-strike" "^2.0.13"
+    "@remirror/extension-trailing-node" "^2.0.13"
+    "@remirror/extension-underline" "^2.0.13"
+    "@remirror/preset-core" "^2.0.16"
 
-"@remirror/preset-wysiwyg@^2.0.17":
-  version "2.0.17"
-  resolved "https://registry.npmjs.org/@remirror/preset-wysiwyg/-/preset-wysiwyg-2.0.17.tgz"
-  integrity sha512-bKsfWRD/+mqBpbA+92q6+DrrTXdXZFGxQo3KlxM7MVOzqbXNYoK/d5rVQFf3ab09tewX6NDGQfimoHwILBdSiw==
+"@remirror/react-components@^2.1.12":
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/@remirror/react-components/-/react-components-2.1.12.tgz#c5377a7efe816418630a5e197b848804825a82b4"
+  integrity sha512-9EG+fMEcrDuDnANx95WRUEXCnGI5i80eCQ7k0w7z+ISWUXrXrmgHQ3mFsE6wlMOV13CaDgIxEwq7/hA11pWGIg==
   dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@remirror/core" "^2.0.11"
-    "@remirror/extension-bidi" "^2.0.11"
-    "@remirror/extension-blockquote" "^2.0.12"
-    "@remirror/extension-bold" "^2.0.11"
-    "@remirror/extension-code" "^2.0.11"
-    "@remirror/extension-code-block" "^2.0.12"
-    "@remirror/extension-drop-cursor" "^2.0.11"
-    "@remirror/extension-embed" "^2.0.11"
-    "@remirror/extension-gap-cursor" "^2.0.11"
-    "@remirror/extension-hard-break" "^2.0.11"
-    "@remirror/extension-heading" "^2.0.11"
-    "@remirror/extension-horizontal-rule" "^2.0.11"
-    "@remirror/extension-image" "^2.1.7"
-    "@remirror/extension-italic" "^2.0.11"
-    "@remirror/extension-link" "^2.0.13"
-    "@remirror/extension-list" "^2.0.14"
-    "@remirror/extension-search" "^2.0.12"
-    "@remirror/extension-shortcuts" "^2.0.11"
-    "@remirror/extension-strike" "^2.0.11"
-    "@remirror/extension-trailing-node" "^2.0.11"
-    "@remirror/extension-underline" "^2.0.11"
-    "@remirror/preset-core" "^2.0.14"
-
-"@remirror/react-components@^2.1.9":
-  version "2.1.9"
-  resolved "https://registry.npmjs.org/@remirror/react-components/-/react-components-2.1.9.tgz"
-  integrity sha512-x/1Vmcju4t8OKjPe5uUkIPCjURs8C4wu3OB71VdQZzBaOlKjqYyatggG3j9bfStmhKYLtEr1CVw7Q/T8lY8gfQ==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@emotion/react" "^11.9.0"
-    "@emotion/styled" "^11.3.0"
-    "@lingui/core" "^3.14.0"
-    "@mui/material" "^5.8.5"
-    "@popperjs/core" "^2.9.2"
-    "@remirror/core" "^2.0.11"
-    "@remirror/extension-find" "^0.1.4"
-    "@remirror/extension-positioner" "^2.1.6"
-    "@remirror/extension-text-color" "^2.0.12"
-    "@remirror/i18n" "^2.0.2"
-    "@remirror/icons" "^2.0.1"
-    "@remirror/messages" "^2.0.2"
-    "@remirror/react-core" "^2.0.15"
-    "@remirror/react-hooks" "^2.0.19"
-    "@remirror/react-utils" "^2.0.3"
-    "@remirror/theme" "^2.0.5"
+    "@babel/runtime" "^7.21.0"
+    "@emotion/react" "^11.10.6"
+    "@emotion/styled" "^11.10.6"
+    "@lingui/core" "^3.17.2"
+    "@mui/material" "^5.12.1"
+    "@popperjs/core" "^2.11.7"
+    "@remirror/core" "^2.0.13"
+    "@remirror/extension-blockquote" "^2.0.14"
+    "@remirror/extension-bold" "^2.0.13"
+    "@remirror/extension-callout" "^2.0.14"
+    "@remirror/extension-code" "^2.0.13"
+    "@remirror/extension-code-block" "^2.0.14"
+    "@remirror/extension-columns" "^2.0.13"
+    "@remirror/extension-find" "^0.1.6"
+    "@remirror/extension-font-size" "^2.0.13"
+    "@remirror/extension-heading" "^2.0.13"
+    "@remirror/extension-history" "^2.0.13"
+    "@remirror/extension-horizontal-rule" "^2.0.13"
+    "@remirror/extension-italic" "^2.0.13"
+    "@remirror/extension-list" "^2.0.16"
+    "@remirror/extension-node-formatting" "^2.0.13"
+    "@remirror/extension-positioner" "^2.1.8"
+    "@remirror/extension-strike" "^2.0.13"
+    "@remirror/extension-sub" "^2.0.13"
+    "@remirror/extension-sup" "^2.0.13"
+    "@remirror/extension-tables" "^2.2.10"
+    "@remirror/extension-text-color" "^2.0.14"
+    "@remirror/extension-underline" "^2.0.13"
+    "@remirror/extension-whitespace" "^2.0.13"
+    "@remirror/i18n" "^2.0.3"
+    "@remirror/icons" "^2.0.2"
+    "@remirror/messages" "^2.0.3"
+    "@remirror/react-core" "^2.0.17"
+    "@remirror/react-hooks" "^2.0.22"
+    "@remirror/react-utils" "^2.0.5"
+    "@remirror/theme" "^2.0.7"
     "@seznam/compose-react-refs" "^1.0.6"
     "@types/react-color" "^3.0.6"
-    create-context-state "^2.0.0"
-    match-sorter "^6.3.0"
-    multishift "^2.0.5"
+    create-context-state "^2.0.1"
+    match-sorter "^6.3.1"
+    multishift "^2.0.8"
     react-color "^2.19.3"
 
-"@remirror/react-core@^2.0.15":
-  version "2.0.15"
-  resolved "https://registry.npmjs.org/@remirror/react-core/-/react-core-2.0.15.tgz"
-  integrity sha512-qsxYwfQsiie4lh7FIr6csplwHfGcmTSIOJMJNyi01gPdwkacnrelZ84nUbVpNoMABOu/ygKX0CQUNTGvr3f9LA==
+"@remirror/react-core@^2.0.17":
+  version "2.0.17"
+  resolved "https://registry.yarnpkg.com/@remirror/react-core/-/react-core-2.0.17.tgz#5604f327e0335bdd3678dd67016e90cb24eed865"
+  integrity sha512-kRK7MPJgZ/xhwAiYS0MkRZM10PwHXFK8cOxB1EwjU7AIYmK1P431ygPst6ojjtuCPdsEnPiIYY+fDxi43ot8LQ==
   dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@remirror/core" "^2.0.11"
-    "@remirror/extension-positioner" "^2.1.6"
-    "@remirror/extension-react-component" "^2.0.11"
-    "@remirror/i18n" "^2.0.2"
-    "@remirror/preset-core" "^2.0.14"
-    "@remirror/preset-react" "^2.0.12"
-    "@remirror/react-renderer" "^2.0.11"
-    "@remirror/react-utils" "^2.0.3"
-    "@remirror/theme" "^2.0.5"
+    "@babel/runtime" "^7.21.0"
+    "@remirror/core" "^2.0.13"
+    "@remirror/extension-positioner" "^2.1.8"
+    "@remirror/extension-react-component" "^2.0.13"
+    "@remirror/i18n" "^2.0.3"
+    "@remirror/preset-core" "^2.0.16"
+    "@remirror/preset-react" "^2.0.14"
+    "@remirror/react-renderer" "^2.0.13"
+    "@remirror/react-utils" "^2.0.5"
+    "@remirror/theme" "^2.0.7"
     "@seznam/compose-react-refs" "^1.0.6"
-    create-context-state "^2.0.0"
+    create-context-state "^2.0.1"
     fast-deep-equal "^3.1.3"
     resize-observer-polyfill "^1.5.1"
     tiny-warning "^1.0.3"
 
-"@remirror/react-hooks@^2.0.19":
-  version "2.0.19"
-  resolved "https://registry.npmjs.org/@remirror/react-hooks/-/react-hooks-2.0.19.tgz"
-  integrity sha512-FG9yz6GYnVKKMe/I5iO4b6JNkYdZkA3v9VL5j4efPh5D8dKaB5Y3KlOwgGQBlu7iVO3nZuvWCCJr4S/wH7L+8A==
+"@remirror/react-hooks@^2.0.22":
+  version "2.0.22"
+  resolved "https://registry.yarnpkg.com/@remirror/react-hooks/-/react-hooks-2.0.22.tgz#781530954e0233314fc33d7b7711c747e47981c6"
+  integrity sha512-xr52aqE4/gqgZeefBm+4UhINLEzzhRPbmOfPpBEDHLRWyODoi6I/Rh9klM83JNH8S9nv2Sb8C/sP9C3vDgBQqg==
   dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@remirror/core" "^2.0.11"
-    "@remirror/extension-emoji" "^2.0.15"
-    "@remirror/extension-events" "^2.1.12"
-    "@remirror/extension-history" "^2.0.11"
-    "@remirror/extension-mention" "^2.0.13"
-    "@remirror/extension-mention-atom" "^2.0.14"
-    "@remirror/extension-positioner" "^2.1.6"
-    "@remirror/i18n" "^2.0.2"
-    "@remirror/react-core" "^2.0.15"
-    "@remirror/react-utils" "^2.0.3"
-    multishift "^2.0.5"
-    use-isomorphic-layout-effect "^1.1.1"
-    use-previous "^1.1.0"
+    "@babel/runtime" "^7.21.0"
+    "@remirror/core" "^2.0.13"
+    "@remirror/extension-emoji" "^2.0.17"
+    "@remirror/extension-events" "^2.1.14"
+    "@remirror/extension-history" "^2.0.13"
+    "@remirror/extension-mention" "^2.0.15"
+    "@remirror/extension-mention-atom" "^2.0.16"
+    "@remirror/extension-positioner" "^2.1.8"
+    "@remirror/i18n" "^2.0.3"
+    "@remirror/react-core" "^2.0.17"
+    "@remirror/react-utils" "^2.0.5"
+    multishift "^2.0.8"
+    use-isomorphic-layout-effect "^1.1.2"
+    use-previous "^1.2.0"
 
-"@remirror/react-renderer@^2.0.11":
-  version "2.0.11"
-  resolved "https://registry.npmjs.org/@remirror/react-renderer/-/react-renderer-2.0.11.tgz"
-  integrity sha512-yi0dK+T1zMK/BlCyaobz39m8cXmzDBIDp6vDYQBvhtQjtq3csIIqrB3s7ErxvD4LuBBLf3k9aQp3QliJlZWmqQ==
+"@remirror/react-renderer@^2.0.13":
+  version "2.0.13"
+  resolved "https://registry.yarnpkg.com/@remirror/react-renderer/-/react-renderer-2.0.13.tgz#2af76c30629c1c9782c7118984e103ae3a8baf2b"
+  integrity sha512-72K/+j+6H1QPPXzQJT3DxY4I+Anc9W5XvqEyPE2GQST4Q6W1Lib10Rvdh/hxcC0TuPEa+Nam2DkRWBxSSsIATw==
   dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@remirror/core" "^2.0.11"
+    "@babel/runtime" "^7.21.0"
+    "@remirror/core" "^2.0.13"
 
-"@remirror/react-utils@^2.0.3":
-  version "2.0.3"
-  resolved "https://registry.npmjs.org/@remirror/react-utils/-/react-utils-2.0.3.tgz"
-  integrity sha512-ZOoyFWNa8rF9sAbcoQWHd9Kf0XaDrKV1P4K/I0CsIN1eQE9BcZ5QGZPJaB2LaVPwSL2hnUBohsCnsRcJu/BK9w==
+"@remirror/react-utils@^2.0.5":
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/@remirror/react-utils/-/react-utils-2.0.5.tgz#18826b0d45b984792b7c94b3503435bf49c4ddf5"
+  integrity sha512-Bhor99hP6jQixvL5ksPEBJs2Q8AStYZIoIOJi6R0x9sA2b7N5oWNZt+sQmjlQg3wSolEOEA8JCTk0Ap45hDhTg==
   dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@remirror/core-constants" "^2.0.0"
-    "@remirror/core-helpers" "^2.0.1"
-    "@remirror/core-types" "^2.0.3"
+    "@babel/runtime" "^7.21.0"
+    "@remirror/core-constants" "^2.0.1"
+    "@remirror/core-helpers" "^2.0.2"
+    "@remirror/core-types" "^2.0.5"
 
 "@remirror/react@^2.0.24":
-  version "2.0.25"
-  resolved "https://registry.npmjs.org/@remirror/react/-/react-2.0.25.tgz"
-  integrity sha512-MzjcALxCM4AjQpd3AQch0pp8scpQJy3vONTGwkXGMbiRL1Je3uXhsF7EcfDAKCIfnxGpEXJp5+6NOT8SX+3Eug==
+  version "2.0.28"
+  resolved "https://registry.yarnpkg.com/@remirror/react/-/react-2.0.28.tgz#eead6267021228dc918c214a344a6bdb088178a6"
+  integrity sha512-SKsFU/K8pg0eXPd6Jk5HBktgn0ClmsuoFQ68Igo2lSXAUlbcTuDnHgZVMjrZLpZgrMkvjlDv2xJme2mZ2L2x5g==
   dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@remirror/extension-placeholder" "^2.0.12"
-    "@remirror/extension-positioner" "^2.1.6"
-    "@remirror/extension-react-component" "^2.0.11"
-    "@remirror/extension-react-tables" "^2.2.12"
-    "@remirror/preset-react" "^2.0.12"
-    "@remirror/react-components" "^2.1.9"
-    "@remirror/react-core" "^2.0.15"
-    "@remirror/react-hooks" "^2.0.19"
-    "@remirror/react-renderer" "^2.0.11"
-    "@remirror/react-utils" "^2.0.3"
+    "@babel/runtime" "^7.21.0"
+    "@remirror/extension-placeholder" "^2.0.14"
+    "@remirror/extension-positioner" "^2.1.8"
+    "@remirror/extension-react-component" "^2.0.13"
+    "@remirror/extension-react-tables" "^2.2.15"
+    "@remirror/preset-react" "^2.0.14"
+    "@remirror/react-components" "^2.1.12"
+    "@remirror/react-core" "^2.0.17"
+    "@remirror/react-hooks" "^2.0.22"
+    "@remirror/react-renderer" "^2.0.13"
+    "@remirror/react-utils" "^2.0.5"
 
-"@remirror/theme@^2.0.5":
-  version "2.0.5"
-  resolved "https://registry.npmjs.org/@remirror/theme/-/theme-2.0.5.tgz"
-  integrity sha512-gmLTheOuYR8///EiLxN7U9sx70YeoLPemvvHGonUSTdlWWqkVC/LStPBR+6rPUw0U6or1f8YkeVnLrDGSQ05ZA==
+"@remirror/theme@^2.0.7", "@remirror/theme@^2.0.8":
+  version "2.0.8"
+  resolved "https://registry.yarnpkg.com/@remirror/theme/-/theme-2.0.8.tgz#30970584bd811a1f446d116f217b3539646c4faa"
+  integrity sha512-uK8TOcZvri1kFOndRfm3o9npNdd0xlJFIaGkSWADAB81ES/nsa+0CN5xTpZPxyLKTRc86FTbIb+zarffKP5M6Q==
   dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@linaria/core" "3.0.0-beta.13"
-    "@remirror/core-types" "^2.0.3"
-    color2k "^2.0.0"
-    csstype "^3.0.7"
+    "@babel/runtime" "^7.21.0"
+    "@linaria/core" "4.2.9"
+    "@remirror/core-types" "^2.0.5"
+    color2k "^2.0.2"
+    csstype "^3.1.2"
 
-"@remirror/types@^1.0.0":
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/@remirror/types/-/types-1.0.0.tgz"
-  integrity sha512-7HQbW7k8VxrAtfzs9FxwO6XSDabn8tSFDi1wwzShOnU+cvaYpfxu0ygyTk3TpXsag1hgFKY3ZIlAfB4WVz2LkQ==
+"@remirror/types@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@remirror/types/-/types-1.0.1.tgz#768502497a0fbbc23338a1586b893f729310cf70"
+  integrity sha512-VlZQxwGnt1jtQ18D6JqdIF+uFZo525WEqrfp9BOc3COPpK4+AWCgdnAWL+ho6imWcoINlGjR/+3b6y5C1vBVEA==
   dependencies:
-    type-fest "^2.0.0"
+    type-fest "^2.19.0"
 
 "@rollup/plugin-babel@^5.2.0":
   version "5.3.1"
-  resolved "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz"
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz#04bc0608f4aa4b2e4b1aebf284344d0f68fda283"
   integrity sha512-WFfdLWU/xVWKeRQnKmIAQULUI7Il0gZnBIH/ZFO069wYIfPu+8zrfp/KMW0atmELoRDq8FbiP3VCss9MhCut7Q==
   dependencies:
     "@babel/helper-module-imports" "^7.10.4"
@@ -2505,7 +2565,7 @@
 
 "@rollup/plugin-commonjs@24.0.0":
   version "24.0.0"
-  resolved "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-24.0.0.tgz"
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-commonjs/-/plugin-commonjs-24.0.0.tgz#fb7cf4a6029f07ec42b25daa535c75b05a43f75c"
   integrity sha512-0w0wyykzdyRRPHOb0cQt14mIBLujfAv6GgP6g8nvg/iBxEm112t3YPPq+Buqe2+imvElTka+bjNlJ/gB56TD8g==
   dependencies:
     "@rollup/pluginutils" "^5.0.1"
@@ -2517,7 +2577,7 @@
 
 "@rollup/plugin-node-resolve@^11.2.1":
   version "11.2.1"
-  resolved "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-11.2.1.tgz"
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-node-resolve/-/plugin-node-resolve-11.2.1.tgz#82aa59397a29cd4e13248b106e6a4a1880362a60"
   integrity sha512-yc2n43jcqVyGE2sqV5/YCmocy9ArjVAP/BeXyTtADTBBX6V0e5UMqwO8CdQ0kzjb6zu5P1qMzsScCMRvE9OlVg==
   dependencies:
     "@rollup/pluginutils" "^3.1.0"
@@ -2529,7 +2589,7 @@
 
 "@rollup/plugin-replace@^2.4.1":
   version "2.4.2"
-  resolved "https://registry.npmjs.org/@rollup/plugin-replace/-/plugin-replace-2.4.2.tgz"
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-replace/-/plugin-replace-2.4.2.tgz#a2d539314fbc77c244858faa523012825068510a"
   integrity sha512-IGcu+cydlUMZ5En85jxHH4qj2hta/11BHq95iHEyb2sbgiN0eCdzvUcHw5gt9pBL5lTi4JDYJ1acCoMGpTvEZg==
   dependencies:
     "@rollup/pluginutils" "^3.1.0"
@@ -2537,7 +2597,7 @@
 
 "@rollup/pluginutils@^3.1.0":
   version "3.1.0"
-  resolved "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-3.1.0.tgz"
+  resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-3.1.0.tgz#706b4524ee6dc8b103b3c995533e5ad680c02b9b"
   integrity sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==
   dependencies:
     "@types/estree" "0.0.39"
@@ -2546,7 +2606,7 @@
 
 "@rollup/pluginutils@^5.0.1":
   version "5.0.2"
-  resolved "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.0.2.tgz"
+  resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-5.0.2.tgz#012b8f53c71e4f6f9cb317e311df1404f56e7a33"
   integrity sha512-pTd9rIsP92h+B6wWwFbW8RkZv4hiR/xKsqre4SIuAOaOEQRxi0lqLke9k2/7WegC85GgUs9pjmOjCUi3In4vwA==
   dependencies:
     "@types/estree" "^1.0.0"
@@ -2555,129 +2615,130 @@
 
 "@rushstack/eslint-patch@^1.1.3":
   version "1.2.0"
-  resolved "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.2.0.tgz"
+  resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.2.0.tgz#8be36a1f66f3265389e90b5f9c9962146758f728"
   integrity sha512-sXo/qW2/pAcmT43VoRKOJbDOfV3cYpq3szSVfIThQXNt+E4DfKj361vaAt3c88U5tPUxzEswam7GW48PJqtKAg==
 
-"@sentry/browser@7.36.0":
-  version "7.36.0"
-  resolved "https://registry.npmjs.org/@sentry/browser/-/browser-7.36.0.tgz"
-  integrity sha512-Mu0OpisCZFICBGxVXdHWjUDgSvuQKjnO9acNcXR1+68IU08iX+cU6f2kq6VzI4mW/pNieI20FDFbx9KA0YZ4+A==
+"@sentry-internal/tracing@7.50.0":
+  version "7.50.0"
+  resolved "https://registry.yarnpkg.com/@sentry-internal/tracing/-/tracing-7.50.0.tgz#74454af99a03d81762993835d2687c881e14f41e"
+  integrity sha512-4TQ4vN0aMBWsUXfJWk2xbe4x7fKfwCXgXKTtHC/ocwwKM+0EefV5Iw9YFG8IrIQN4vMtuRzktqcs9q0/Sbv7tg==
   dependencies:
-    "@sentry/core" "7.36.0"
-    "@sentry/replay" "7.36.0"
-    "@sentry/types" "7.36.0"
-    "@sentry/utils" "7.36.0"
+    "@sentry/core" "7.50.0"
+    "@sentry/types" "7.50.0"
+    "@sentry/utils" "7.50.0"
+    tslib "^1.9.3"
+
+"@sentry/browser@7.50.0":
+  version "7.50.0"
+  resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-7.50.0.tgz#16c995c336322c8aec65570f90f50288678004ec"
+  integrity sha512-a+UYbP89+SAvW47/p9wxEi9eWlyp/SkYl52OCdZNXnplQY4kQIOVyiaIs5nnCxIxZgXKrhAX4eo1E9ykleFuNQ==
+  dependencies:
+    "@sentry-internal/tracing" "7.50.0"
+    "@sentry/core" "7.50.0"
+    "@sentry/replay" "7.50.0"
+    "@sentry/types" "7.50.0"
+    "@sentry/utils" "7.50.0"
     tslib "^1.9.3"
 
 "@sentry/cli@^1.74.6":
-  version "1.74.6"
-  resolved "https://registry.npmjs.org/@sentry/cli/-/cli-1.74.6.tgz"
-  integrity sha512-pJ7JJgozyjKZSTjOGi86chIngZMLUlYt2HOog+OJn+WGvqEkVymu8m462j1DiXAnex9NspB4zLLNuZ/R6rTQHg==
+  version "1.75.2"
+  resolved "https://registry.yarnpkg.com/@sentry/cli/-/cli-1.75.2.tgz#2c38647b38300e52c9839612d42b7c23f8d6455b"
+  integrity sha512-CG0CKH4VCKWzEaegouWfCLQt9SFN+AieFESCatJ7zSuJmzF05ywpMusjxqRul6lMwfUhRKjGKOzcRJ1jLsfTBw==
   dependencies:
     https-proxy-agent "^5.0.0"
     mkdirp "^0.5.5"
     node-fetch "^2.6.7"
-    npmlog "^4.1.2"
     progress "^2.0.3"
     proxy-from-env "^1.1.0"
     which "^2.0.2"
 
-"@sentry/core@7.36.0":
-  version "7.36.0"
-  resolved "https://registry.npmjs.org/@sentry/core/-/core-7.36.0.tgz"
-  integrity sha512-lq1MlcMhvm7QIwUOknFeufkg4M6QREY3s61y6pm1o+o3vSqB7Hz0D19xlyEpP62qMn8OyuttVKOVK1UfGc2EyQ==
+"@sentry/core@7.50.0":
+  version "7.50.0"
+  resolved "https://registry.yarnpkg.com/@sentry/core/-/core-7.50.0.tgz#88bc9cbfc0cb429a28489ece6f0be7a7006436c4"
+  integrity sha512-6oD1a3fYs4aiNK7tuJSd88LHjYJAetd7ZK/AfJniU7zWKj4jxIYfO8nhm0qdnhEDs81RcweVDmPhWm3Kwrzzsg==
   dependencies:
-    "@sentry/types" "7.36.0"
-    "@sentry/utils" "7.36.0"
+    "@sentry/types" "7.50.0"
+    "@sentry/utils" "7.50.0"
     tslib "^1.9.3"
 
-"@sentry/integrations@7.36.0":
-  version "7.36.0"
-  resolved "https://registry.npmjs.org/@sentry/integrations/-/integrations-7.36.0.tgz"
-  integrity sha512-wrRoUqdeGi64NNimGVk8U8DBiXamxTYPBux0/faFDyau8EJyQFcv8zOyB78Za4W2Ss3ZXNaE/WtFF8UxalHzBQ==
+"@sentry/integrations@7.50.0":
+  version "7.50.0"
+  resolved "https://registry.yarnpkg.com/@sentry/integrations/-/integrations-7.50.0.tgz#82616f34ddba3c1f3e17b54900dfa7d8e0a0c537"
+  integrity sha512-HUmPN2sHNx37m+lOWIoCILHimILdI0Df9nGmWA13fIhny8mxJ6Dbazyis11AW4/lrZ1a6F1SQ2epLEq7ZesiRw==
   dependencies:
-    "@sentry/types" "7.36.0"
-    "@sentry/utils" "7.36.0"
+    "@sentry/types" "7.50.0"
+    "@sentry/utils" "7.50.0"
     localforage "^1.8.1"
     tslib "^1.9.3"
 
 "@sentry/nextjs@^7.36.0":
-  version "7.36.0"
-  resolved "https://registry.npmjs.org/@sentry/nextjs/-/nextjs-7.36.0.tgz"
-  integrity sha512-7IUwBjCjo3rWuvEG16D1wKb0D+aMyCU920VGCAQVZaqTZAgrgAKfpTa1Sk0fmDxYglW1EBI9QM+WEnOa9RleLw==
+  version "7.50.0"
+  resolved "https://registry.yarnpkg.com/@sentry/nextjs/-/nextjs-7.50.0.tgz#b9e7727c8f974644bb84a01f40a0adedb44ec416"
+  integrity sha512-4/utwzYIZmjJ/QyYlez1H8PxrNThYBY7MdqzL7XM+Nj432mlyWEDHKYri1FM2GX3HSM4l9lLrpExTkDNVO6dBQ==
   dependencies:
     "@rollup/plugin-commonjs" "24.0.0"
-    "@sentry/core" "7.36.0"
-    "@sentry/integrations" "7.36.0"
-    "@sentry/node" "7.36.0"
-    "@sentry/react" "7.36.0"
-    "@sentry/tracing" "7.36.0"
-    "@sentry/types" "7.36.0"
-    "@sentry/utils" "7.36.0"
+    "@sentry/core" "7.50.0"
+    "@sentry/integrations" "7.50.0"
+    "@sentry/node" "7.50.0"
+    "@sentry/react" "7.50.0"
+    "@sentry/types" "7.50.0"
+    "@sentry/utils" "7.50.0"
     "@sentry/webpack-plugin" "1.20.0"
     chalk "3.0.0"
     rollup "2.78.0"
+    stacktrace-parser "^0.1.10"
     tslib "^1.9.3"
 
-"@sentry/node@7.36.0":
-  version "7.36.0"
-  resolved "https://registry.npmjs.org/@sentry/node/-/node-7.36.0.tgz"
-  integrity sha512-nAHAY+Rbn5OlTpNX/i6wYrmw3hT/BtwPZ/vNU52cKgw7CpeE1UrCeFjnPn18rQPB7lIh7x0vNvoaPrfemRzpSQ==
+"@sentry/node@7.50.0":
+  version "7.50.0"
+  resolved "https://registry.yarnpkg.com/@sentry/node/-/node-7.50.0.tgz#d6adab136d87f7dca614ea0d77944f902fa45626"
+  integrity sha512-11UJBKoQFMp7f8sbzeO2gENsKIUkVCNBTzuPRib7l2K1HMjSfacXmwwma7ZEs0mc3ofIZ1UYuyONAXmI1lK9cQ==
   dependencies:
-    "@sentry/core" "7.36.0"
-    "@sentry/types" "7.36.0"
-    "@sentry/utils" "7.36.0"
+    "@sentry-internal/tracing" "7.50.0"
+    "@sentry/core" "7.50.0"
+    "@sentry/types" "7.50.0"
+    "@sentry/utils" "7.50.0"
     cookie "^0.4.1"
     https-proxy-agent "^5.0.0"
     lru_map "^0.3.3"
     tslib "^1.9.3"
 
-"@sentry/react@7.36.0":
-  version "7.36.0"
-  resolved "https://registry.npmjs.org/@sentry/react/-/react-7.36.0.tgz"
-  integrity sha512-ttrRqbgeqvkV3DwkDRZC/V8OEnBKGpQf4dKpG8oMlfdVbMTINzrxYUgkhi9xAkxkH9O+vj3Md8L3Rdqw/SDwKQ==
+"@sentry/react@7.50.0":
+  version "7.50.0"
+  resolved "https://registry.yarnpkg.com/@sentry/react/-/react-7.50.0.tgz#ed85405518539905a34e5cf89baef719569ef4c0"
+  integrity sha512-V/KfIhwLezefnRz0y9pGJn5x0RBL8Q1347LowcOZWoNiDoaaLI9hRBTqJGyvCstG5NNhsLTKMM3UDk0WNXflPg==
   dependencies:
-    "@sentry/browser" "7.36.0"
-    "@sentry/types" "7.36.0"
-    "@sentry/utils" "7.36.0"
+    "@sentry/browser" "7.50.0"
+    "@sentry/types" "7.50.0"
+    "@sentry/utils" "7.50.0"
     hoist-non-react-statics "^3.3.2"
     tslib "^1.9.3"
 
-"@sentry/replay@7.36.0":
-  version "7.36.0"
-  resolved "https://registry.npmjs.org/@sentry/replay/-/replay-7.36.0.tgz"
-  integrity sha512-wNbME74/2GtkqdDXz7NaStyfPWVLjYmN9TFWvu6E9sNl9pkDDvii/Qc8F6ps1wa7bozkKcWRHgNvYiGCxUBHcg==
+"@sentry/replay@7.50.0":
+  version "7.50.0"
+  resolved "https://registry.yarnpkg.com/@sentry/replay/-/replay-7.50.0.tgz#dd29f063492d91e708629ff8dd95a59d4b7180f1"
+  integrity sha512-EYRk+DTZ5luwfkiCaDpBC3YBKIEdkReTUNZtWDVUytSVjsCnttkAipx/y6bxy3HN+rSXungMd3XKQT5RNMRUNA==
   dependencies:
-    "@sentry/core" "7.36.0"
-    "@sentry/types" "7.36.0"
-    "@sentry/utils" "7.36.0"
+    "@sentry/core" "7.50.0"
+    "@sentry/types" "7.50.0"
+    "@sentry/utils" "7.50.0"
 
-"@sentry/tracing@7.36.0":
-  version "7.36.0"
-  resolved "https://registry.npmjs.org/@sentry/tracing/-/tracing-7.36.0.tgz"
-  integrity sha512-5R5mfWMDncOcTMmmyYMjgus1vZJzIFw4LHaSbrX7e1IRNT/6vFyNeVxATa2ePXb9mI3XHo5f2p7YrnreAtaSXw==
+"@sentry/types@7.50.0":
+  version "7.50.0"
+  resolved "https://registry.yarnpkg.com/@sentry/types/-/types-7.50.0.tgz#52a035cad83a80ca26fa53c09eb1241250c3df3e"
+  integrity sha512-Zo9vyI98QNeYT0K0y57Rb4JRWDaPEgmp+QkQ4CRQZFUTWetO5fvPZ4Gb/R7TW16LajuHZlbJBHmvmNj2pkL2kw==
+
+"@sentry/utils@7.50.0":
+  version "7.50.0"
+  resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-7.50.0.tgz#2b93a48024651436e95b7c8e2066aee7c2234d57"
+  integrity sha512-iyPwwC6fwJsiPhH27ZbIiSsY5RaccHBqADS2zEjgKYhmP4P9WGgHRDrvLEnkOjqQyKNb6c0yfmv83n0uxYnolw==
   dependencies:
-    "@sentry/core" "7.36.0"
-    "@sentry/types" "7.36.0"
-    "@sentry/utils" "7.36.0"
-    tslib "^1.9.3"
-
-"@sentry/types@7.36.0":
-  version "7.36.0"
-  resolved "https://registry.npmjs.org/@sentry/types/-/types-7.36.0.tgz"
-  integrity sha512-uvfwUn3okAWSZ948D/xqBrkc3Sn6TeHUgi3+p/dTTNGAXXskzavgfgQ4rSW7f3YD4LL+boZojpoIARVLodMGuA==
-
-"@sentry/utils@7.36.0":
-  version "7.36.0"
-  resolved "https://registry.npmjs.org/@sentry/utils/-/utils-7.36.0.tgz"
-  integrity sha512-mgDi5X5Bm0sydCzXpnyKD/sD98yc2qnKXyRdNX4HRRwruhC/P53LT0hGhZXsyqsB/l8OAMl0zWXJLg0xONQsEw==
-  dependencies:
-    "@sentry/types" "7.36.0"
+    "@sentry/types" "7.50.0"
     tslib "^1.9.3"
 
 "@sentry/webpack-plugin@1.20.0":
   version "1.20.0"
-  resolved "https://registry.npmjs.org/@sentry/webpack-plugin/-/webpack-plugin-1.20.0.tgz"
+  resolved "https://registry.yarnpkg.com/@sentry/webpack-plugin/-/webpack-plugin-1.20.0.tgz#e7add76122708fb6b4ee7951294b521019720e58"
   integrity sha512-Ssj1mJVFsfU6vMCOM2d+h+KQR7QHSfeIP16t4l20Uq/neqWXZUQ2yvQfe4S3BjdbJXz/X4Rw8Hfy1Sd0ocunYw==
   dependencies:
     "@sentry/cli" "^1.74.6"
@@ -2685,12 +2746,12 @@
 
 "@seznam/compose-react-refs@^1.0.6":
   version "1.0.6"
-  resolved "https://registry.npmjs.org/@seznam/compose-react-refs/-/compose-react-refs-1.0.6.tgz"
+  resolved "https://registry.yarnpkg.com/@seznam/compose-react-refs/-/compose-react-refs-1.0.6.tgz#6ec4e70bdd6e32f8e70b4100f27267cf306bd8df"
   integrity sha512-izzOXQfeQLonzrIQb8u6LQ8dk+ymz3WXTIXjvOlTXHq6sbzROg3NWU+9TTAOpEoK9Bth24/6F/XrfHJ5yR5n6Q==
 
 "@surma/rollup-plugin-off-main-thread@^2.2.3":
   version "2.2.3"
-  resolved "https://registry.npmjs.org/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-2.2.3.tgz"
+  resolved "https://registry.yarnpkg.com/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-2.2.3.tgz#ee34985952ca21558ab0d952f00298ad2190c053"
   integrity sha512-lR8q/9W7hZpMWweNiAKU7NQerBnzQQLvi8qnTDU/fxItPhtZVMbPV3lbCwjhIlNBe9Bbr5V+KHshvWmVSG9cxQ==
   dependencies:
     ejs "^3.1.6"
@@ -2700,7 +2761,7 @@
 
 "@svgmoji/blob@^3.2.0":
   version "3.2.0"
-  resolved "https://registry.npmjs.org/@svgmoji/blob/-/blob-3.2.0.tgz"
+  resolved "https://registry.yarnpkg.com/@svgmoji/blob/-/blob-3.2.0.tgz#62a0ab1ba22a0d27f23cb38aacf6d4fb13123dfb"
   integrity sha512-N96WOrH9GxPSPZ/FuvZl6T9Rh54stAEuUcBppIRFh9/WwkU7Hczrjabw4uunwxFLX5TgR+rHlKJl3/jaTnXJrQ==
   dependencies:
     "@babel/runtime" "^7.12.5"
@@ -2708,7 +2769,7 @@
 
 "@svgmoji/core@^3.2.0":
   version "3.2.0"
-  resolved "https://registry.npmjs.org/@svgmoji/core/-/core-3.2.0.tgz"
+  resolved "https://registry.yarnpkg.com/@svgmoji/core/-/core-3.2.0.tgz#792326078ded3446747691d633278010f322f460"
   integrity sha512-QsD78Op3S/5kUVsa5ierr4Wu/xwAdYuMI3Zmc/Y2ekYBEMGEUY8QxilXQRSAQ4ku4PnNV4xlB9e7xhD5hy113A==
   dependencies:
     "@babel/runtime" "^7.12.5"
@@ -2720,7 +2781,7 @@
 
 "@svgmoji/noto@^3.2.0":
   version "3.2.0"
-  resolved "https://registry.npmjs.org/@svgmoji/noto/-/noto-3.2.0.tgz"
+  resolved "https://registry.yarnpkg.com/@svgmoji/noto/-/noto-3.2.0.tgz#ff99dc95f2d098050d9d19696d019fe22677760b"
   integrity sha512-JgtNciB06hMDI1Pb1N2IgLh44XRMZUUNwBANzjY5jXTPqOCu1A1VA35ENvUsRhEUZOm8I+hbdAEHkwMVqxLeIQ==
   dependencies:
     "@babel/runtime" "^7.12.5"
@@ -2728,7 +2789,7 @@
 
 "@svgmoji/openmoji@^3.2.0":
   version "3.2.0"
-  resolved "https://registry.npmjs.org/@svgmoji/openmoji/-/openmoji-3.2.0.tgz"
+  resolved "https://registry.yarnpkg.com/@svgmoji/openmoji/-/openmoji-3.2.0.tgz#776fece19f8c253206182cb65685c864ba9bebd2"
   integrity sha512-USHbG+O80HfmdoNAHbOnlO+2gppXJfHFWKSRFj53Th4aimWEx4/9MB3cFbC3KZ1NOqXaLBq9jDaw4vFuGDVTUQ==
   dependencies:
     "@babel/runtime" "^7.12.5"
@@ -2736,7 +2797,7 @@
 
 "@svgmoji/twemoji@^3.2.0":
   version "3.2.0"
-  resolved "https://registry.npmjs.org/@svgmoji/twemoji/-/twemoji-3.2.0.tgz"
+  resolved "https://registry.yarnpkg.com/@svgmoji/twemoji/-/twemoji-3.2.0.tgz#0a12df9f5b30af457b4a1779051de470a15c1b00"
   integrity sha512-6xqZgh9viFDKf5wvrxw56ImCR3Ni84IqwK45lxojOe1Gc1Mni1GpPfr4gb7WHDKjumfx+K7BHSvX0KXt3Nr3CQ==
   dependencies:
     "@babel/runtime" "^7.12.5"
@@ -2744,14 +2805,24 @@
 
 "@swc/helpers@0.4.11":
   version "0.4.11"
-  resolved "https://registry.npmjs.org/@swc/helpers/-/helpers-0.4.11.tgz"
+  resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.4.11.tgz#db23a376761b3d31c26502122f349a21b592c8de"
   integrity sha512-rEUrBSGIoSFuYxwBYtlUFMlE2CwGhmW+w9355/5oduSw8e5h2+Tj4UrAGNNgP9915++wj5vkQo0UuOBqOAq4nw==
   dependencies:
     tslib "^2.4.0"
 
-"@types/codemirror@^5.60.2":
+"@tailwindcss/typography@^0.5.9":
+  version "0.5.9"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/typography/-/typography-0.5.9.tgz#027e4b0674929daaf7c921c900beee80dbad93e8"
+  integrity sha512-t8Sg3DyynFysV9f4JDOVISGsjazNb48AeIYQwcL+Bsq5uf4RYL75C1giZ43KISjeDGBaTN3Kxh7Xj/vRSMJUUg==
+  dependencies:
+    lodash.castarray "^4.4.0"
+    lodash.isplainobject "^4.0.6"
+    lodash.merge "^4.6.2"
+    postcss-selector-parser "6.0.10"
+
+"@types/codemirror@^5.60.7":
   version "5.60.7"
-  resolved "https://registry.npmjs.org/@types/codemirror/-/codemirror-5.60.7.tgz"
+  resolved "https://registry.yarnpkg.com/@types/codemirror/-/codemirror-5.60.7.tgz#efbb78e5e79f90c6762c2127c02096648e600808"
   integrity sha512-QXIC+RPzt/1BGSuD6iFn6UMC9TDp+9hkOANYNPVsjjrDdzKphfRkwQDKGp2YaC54Yhz0g6P5uYTCCibZZEiMAA==
   dependencies:
     "@types/tern" "*"
@@ -2816,27 +2887,27 @@
 
 "@types/direction@^1.0.0":
   version "1.0.0"
-  resolved "https://registry.npmjs.org/@types/direction/-/direction-1.0.0.tgz"
+  resolved "https://registry.yarnpkg.com/@types/direction/-/direction-1.0.0.tgz#6a0962feade8502f9e986e87abe1130b611b13be"
   integrity sha512-et1wmqXm/5smJ8lTJfBnwD12/2Y7eVJLKbuaRT0h2xaKAoo1h8Dz2Io22GObDLFwxY1ddXRTLH3Gq5v44Fl/2w==
 
 "@types/dom4@^2.0.2":
   version "2.0.2"
-  resolved "https://registry.npmjs.org/@types/dom4/-/dom4-2.0.2.tgz"
+  resolved "https://registry.yarnpkg.com/@types/dom4/-/dom4-2.0.2.tgz#6495303f049689ce936ed328a3e5ede9c51408ee"
   integrity sha512-Rt4IC1T7xkCWa0OG1oSsPa0iqnxlDeQqKXZAHrQGLb7wFGncWm85MaxKUjAGejOrUynOgWlFi4c6S6IyJwoK4g==
 
 "@types/estree@*", "@types/estree@^1.0.0":
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/@types/estree/-/estree-1.0.0.tgz"
-  integrity sha512-WulqXMDUTYAXCjZnk6JtIHPigp55cVtDgDrO2gHRwhyJto21+1zbVCtOYB2L1F9w4qCQ0rOGWBnBe0FNTiEJIQ==
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.1.tgz#aa22750962f3bf0e79d753d3cc067f010c95f194"
+  integrity sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA==
 
 "@types/estree@0.0.39":
   version "0.0.39"
-  resolved "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz"
+  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.39.tgz#e177e699ee1b8c22d23174caaa7422644389509f"
   integrity sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==
 
 "@types/glob@^7.1.1":
   version "7.2.0"
-  resolved "https://registry.npmjs.org/@types/glob/-/glob-7.2.0.tgz"
+  resolved "https://registry.yarnpkg.com/@types/glob/-/glob-7.2.0.tgz#bc1b5bf3aa92f25bd5dd39f35c57361bdce5b2eb"
   integrity sha512-ZUxbzKl0IfJILTS6t7ip5fQQM/J3TJYubDm3nMbgubNNYS62eXeUpoLUC8/7fJNiFYHTrGPQn7hspDUzIHX3UA==
   dependencies:
     "@types/minimatch" "*"
@@ -2844,55 +2915,50 @@
 
 "@types/hast@^2.0.0":
   version "2.3.4"
-  resolved "https://registry.npmjs.org/@types/hast/-/hast-2.3.4.tgz"
+  resolved "https://registry.yarnpkg.com/@types/hast/-/hast-2.3.4.tgz#8aa5ef92c117d20d974a82bdfb6a648b08c0bafc"
   integrity sha512-wLEm0QvaoawEDoTRwzTXp4b4jpwiJDvR5KMnFnVodm3scufTlBOWRD6N1OBf9TZMhjlNsSfcO5V+7AF4+Vy+9g==
   dependencies:
     "@types/unist" "*"
 
 "@types/hoist-non-react-statics@^3.3.0":
   version "3.3.1"
-  resolved "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz"
+  resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
   integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==
   dependencies:
     "@types/react" "*"
     hoist-non-react-statics "^3.3.0"
 
-"@types/js-cookie@^2.2.6":
-  version "2.2.7"
-  resolved "https://registry.npmjs.org/@types/js-cookie/-/js-cookie-2.2.7.tgz"
-  integrity sha512-aLkWa0C0vO5b4Sr798E26QgOkss68Un0bLjs7u9qxzPT5CG+8DuNTffWES58YzJs3hrVAOs1wonycqEBqNJubA==
-
 "@types/js-cookie@^3.0.2":
-  version "3.0.2"
-  resolved "https://registry.npmjs.org/@types/js-cookie/-/js-cookie-3.0.2.tgz"
-  integrity sha512-6+0ekgfusHftJNYpihfkMu8BWdeHs9EOJuGcSofErjstGPfPGEu9yTu4t460lTzzAMl2cM5zngQJqPMHbbnvYA==
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@types/js-cookie/-/js-cookie-3.0.3.tgz#d6bfbbdd0c187354ca555213d1962f6d0691ff4e"
+  integrity sha512-Xe7IImK09HP1sv2M/aI+48a20VX+TdRJucfq4vfRVy6nWN8PYPOEnlMRSgxJAgYQIXJVL8dZ4/ilAM7dWNaOww==
 
 "@types/json-schema@^7.0.5", "@types/json-schema@^7.0.8", "@types/json-schema@^7.0.9":
   version "7.0.11"
-  resolved "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz"
+  resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.11.tgz#d421b6c527a3037f7c84433fd2c4229e016863d3"
   integrity sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==
 
 "@types/json5@^0.0.29":
   version "0.0.29"
-  resolved "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz"
+  resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
   integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==
 
 "@types/lodash.debounce@^4.0.7":
   version "4.0.7"
-  resolved "https://registry.npmjs.org/@types/lodash.debounce/-/lodash.debounce-4.0.7.tgz"
+  resolved "https://registry.yarnpkg.com/@types/lodash.debounce/-/lodash.debounce-4.0.7.tgz#0285879defb7cdb156ae633cecd62d5680eded9f"
   integrity sha512-X1T4wMZ+gT000M2/91SYj0d/7JfeNZ9PeeOldSNoE/lunLeQXKvkmIumI29IaKMotU/ln/McOIvgzZcQ/3TrSA==
   dependencies:
     "@types/lodash" "*"
 
 "@types/lodash@*":
-  version "4.14.191"
-  resolved "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.191.tgz"
-  integrity sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ==
+  version "4.14.194"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.194.tgz#b71eb6f7a0ff11bff59fc987134a093029258a76"
+  integrity sha512-r22s9tAS7imvBt2lyHC9B8AGwWnXaYb1tY09oyLkXDs4vArpYJzw09nj8MLx5VfciBPGIb+ZwG0ssYnEPJxn/g==
 
-"@types/marked@^4.0.2":
-  version "4.0.8"
-  resolved "https://registry.npmjs.org/@types/marked/-/marked-4.0.8.tgz"
-  integrity sha512-HVNzMT5QlWCOdeuBsgXP8EZzKUf0+AXzN+sLmjvaB3ZlLqO+e4u0uXrdw9ub69wBKFs+c6/pA4r9sy6cCDvImw==
+"@types/marked@^4.0.8":
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/@types/marked/-/marked-4.3.0.tgz#5cd14a190b0a4d212781cfee7093f611ec74a111"
+  integrity sha512-zK4gSFMjgslsv5Lyvr3O1yCjgmnE4pr8jbG8qVn4QglMwtpvPCf4YT2Wma7Nk95OxUUJI8Z+kzdXohbM7mVpGw==
 
 "@types/mdast@^3.0.0":
   version "3.0.11"
@@ -2903,12 +2969,12 @@
 
 "@types/min-document@^2.19.0":
   version "2.19.0"
-  resolved "https://registry.npmjs.org/@types/min-document/-/min-document-2.19.0.tgz"
+  resolved "https://registry.yarnpkg.com/@types/min-document/-/min-document-2.19.0.tgz#4f9919e789917c00de967a2c38fa8d234cbcd7d6"
   integrity sha512-lsYeSW1zfNqHTL1RuaOgfAhoiOWV1RAQDKT0BZ26z4Faz8llVIj1r1ablUo5QY6yzHMketuvu4+N0sv0eZpXTg==
 
 "@types/minimatch@*":
   version "5.1.2"
-  resolved "https://registry.npmjs.org/@types/minimatch/-/minimatch-5.1.2.tgz"
+  resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-5.1.2.tgz#07508b45797cb81ec3f273011b054cd0755eddca"
   integrity sha512-K0VQKziLUWkVKiRVrx4a40iPaxTUefQmjtkQofBkYRcoaaL/8rhwDWww9qWbrgicNOgnpIsMxyNIUM4+n6dUIA==
 
 "@types/ms@*":
@@ -2917,13 +2983,13 @@
   integrity sha512-iiUgKzV9AuaEkZqkOLDIvlQiL6ltuZd9tGcW3gwpnX8JbuiuhFlEGmmFXEXkN50Cvq7Os88IY2v0dkDqXYWVgA==
 
 "@types/node@*":
-  version "18.13.0"
-  resolved "https://registry.npmjs.org/@types/node/-/node-18.13.0.tgz"
-  integrity sha512-gC3TazRzGoOnoKAhUx+Q0t8S9Tzs74z7m0ipwGpSqQrleP14hKxP4/JUeEQcD3W1/aIpnWl8pHowI7WokuZpXg==
+  version "18.16.3"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-18.16.3.tgz#6bda7819aae6ea0b386ebc5b24bdf602f1b42b01"
+  integrity sha512-OPs5WnnT1xkCBiuQrZA4+YAV4HEJejmHneyraIaxsbev5yCEr6KMwINNFP9wQeFIw8FWcoTqF3vQsa5CDaI+8Q==
 
 "@types/node@18.0.6":
   version "18.0.6"
-  resolved "https://registry.npmjs.org/@types/node/-/node-18.0.6.tgz"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-18.0.6.tgz#0ba49ac517ad69abe7a1508bc9b3a5483df9d5d7"
   integrity sha512-/xUq6H2aQm261exT6iZTMifUySEt4GR5KX8eYyY+C4MSNPqSh9oNIP7tz2GLKTlFaiBbgZNxffoR3CVRG+cljw==
 
 "@types/nprogress@^0.2.0":
@@ -2933,53 +2999,53 @@
 
 "@types/object.omit@^3.0.0":
   version "3.0.0"
-  resolved "https://registry.npmjs.org/@types/object.omit/-/object.omit-3.0.0.tgz"
+  resolved "https://registry.yarnpkg.com/@types/object.omit/-/object.omit-3.0.0.tgz#0d31e1208eac8fe2ad5c9499a1016a8273bbfafc"
   integrity sha512-I27IoPpH250TUzc9FzXd0P1BV/BMJuzqD3jOz98ehf9dQqGkxlq+hO1bIqZGWqCg5bVOy0g4AUVJtnxe0klDmw==
 
-"@types/object.pick@^1.3.1":
+"@types/object.pick@^1.3.2":
   version "1.3.2"
-  resolved "https://registry.npmjs.org/@types/object.pick/-/object.pick-1.3.2.tgz"
+  resolved "https://registry.yarnpkg.com/@types/object.pick/-/object.pick-1.3.2.tgz#9eb28118240ad8f658b9c9c6caf35359fdb37150"
   integrity sha512-sn7L+qQ6RLPdXRoiaE7bZ/Ek+o4uICma/lBFPyJEKDTPTBP1W8u0c4baj3EiS4DiqLs+Hk+KUGvMVJtAw3ePJg==
 
 "@types/parse-json@^4.0.0":
   version "4.0.0"
-  resolved "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz"
+  resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
   integrity sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==
 
 "@types/prismjs@*":
   version "1.26.0"
-  resolved "https://registry.npmjs.org/@types/prismjs/-/prismjs-1.26.0.tgz"
+  resolved "https://registry.yarnpkg.com/@types/prismjs/-/prismjs-1.26.0.tgz#a1c3809b0ad61c62cac6d4e0c56d610c910b7654"
   integrity sha512-ZTaqn/qSqUuAq1YwvOFQfVW1AR/oQJlLSZVustdjwI+GZ8kr0MSHBj0tsXPW1EqHubx50gtBEjbPGsdZwQwCjQ==
 
 "@types/prop-types@*", "@types/prop-types@^15.0.0", "@types/prop-types@^15.7.5":
   version "15.7.5"
-  resolved "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz"
+  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf"
   integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==
 
 "@types/querystringify@^2.0.0":
   version "2.0.0"
-  resolved "https://registry.npmjs.org/@types/querystringify/-/querystringify-2.0.0.tgz"
+  resolved "https://registry.yarnpkg.com/@types/querystringify/-/querystringify-2.0.0.tgz#d1eab3214ee2b57c3bd7eba0ab94b231028522fb"
   integrity sha512-9WgEGTevECrXJC2LSWPqiPYWq8BRmeaOyZn47js/3V6UF0PWtcVfvvR43YjeO8BzBsthTz98jMczujOwTw+WYg==
 
 "@types/react-beautiful-dnd@^13.1.2":
-  version "13.1.3"
-  resolved "https://registry.npmjs.org/@types/react-beautiful-dnd/-/react-beautiful-dnd-13.1.3.tgz"
-  integrity sha512-BNdmvONKtsrZq3AGrujECQrIn8cDT+fZsxBLXuX3YWY/nHfZinUFx4W88eS0rkcXzuLbXpKOsu/1WCMPMLEpPg==
+  version "13.1.4"
+  resolved "https://registry.yarnpkg.com/@types/react-beautiful-dnd/-/react-beautiful-dnd-13.1.4.tgz#bcec72da719c18c0d8b4a7cb00e7fb443211d6d7"
+  integrity sha512-4bIBdzOr0aavN+88q3C7Pgz+xkb7tz3whORYrmSj77wfVEMfiWiooIwVWFR7KM2e+uGTe5BVrXqSfb0aHeflJA==
   dependencies:
     "@types/react" "*"
 
 "@types/react-color@^3.0.6":
   version "3.0.6"
-  resolved "https://registry.npmjs.org/@types/react-color/-/react-color-3.0.6.tgz"
+  resolved "https://registry.yarnpkg.com/@types/react-color/-/react-color-3.0.6.tgz#602fed023802b2424e7cd6ff3594ccd3d5055f9a"
   integrity sha512-OzPIO5AyRmLA7PlOyISlgabpYUa3En74LP8mTMa0veCA719SvYQov4WLMsHvCgXP+L+KI9yGhYnqZafVGG0P4w==
   dependencies:
     "@types/react" "*"
     "@types/reactcss" "*"
 
 "@types/react-datepicker@^4.8.0":
-  version "4.8.0"
-  resolved "https://registry.npmjs.org/@types/react-datepicker/-/react-datepicker-4.8.0.tgz"
-  integrity sha512-20uzZsIf4moPAjjHDfPvH8UaOHZBxrkiQZoLS3wgKq8Xhp+95gdercLEdoA7/I8nR9R5Jz2qQkdMIM+Lq4AS1A==
+  version "4.11.2"
+  resolved "https://registry.yarnpkg.com/@types/react-datepicker/-/react-datepicker-4.11.2.tgz#44abfc6379faa58d28eb5730a058d6a389d40eac"
+  integrity sha512-ELYyX3lb3K1WltqdlF1hbnaDGgzlF6PIR5T4W38cSEcfrQDIrPE+Ioq5pwRe/KEJ+ihHMjvTVZQkwJx0pWMNHQ==
   dependencies:
     "@popperjs/core" "^2.9.2"
     "@types/react" "*"
@@ -2988,28 +3054,28 @@
 
 "@types/react-dom@18.0.6":
   version "18.0.6"
-  resolved "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.6.tgz"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.0.6.tgz#36652900024842b74607a17786b6662dd1e103a1"
   integrity sha512-/5OFZgfIPSwy+YuIBP/FgJnQnsxhZhjjrnxudMddeblOouIodEQ75X14Rr4wGSG/bknL+Omy9iWlLo1u/9GzAA==
   dependencies:
     "@types/react" "*"
 
 "@types/react-dom@^18.0.6":
-  version "18.0.10"
-  resolved "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.10.tgz"
-  integrity sha512-E42GW/JA4Qv15wQdqJq8DL4JhNpB3prJgjgapN3qJT9K2zO5IIAQh4VXvCEDupoqAwnz0cY4RlXeC/ajX5SFHg==
+  version "18.2.3"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.2.3.tgz#2fe492bb0e67047b7b43e18166d8f50d44e0525e"
+  integrity sha512-hxXEXWxFJXbY0LMj/T69mznqOZJXNtQMqVxIiirVAZnnpeYiD4zt+lPsgcr/cfWg2VLsxZ1y26vigG03prYB+Q==
   dependencies:
     "@types/react" "*"
 
 "@types/react-is@^16.7.1 || ^17.0.0":
-  version "17.0.3"
-  resolved "https://registry.npmjs.org/@types/react-is/-/react-is-17.0.3.tgz"
-  integrity sha512-aBTIWg1emtu95bLTLx0cpkxwGW3ueZv71nE2YFBpL8k/z5czEW8yYpOo8Dp+UUAFAtKwNaOsh/ioSeQnWlZcfw==
+  version "17.0.4"
+  resolved "https://registry.yarnpkg.com/@types/react-is/-/react-is-17.0.4.tgz#3cccd02851f7f7a75b21d6e922da26bc7f8f44ad"
+  integrity sha512-FLzd0K9pnaEvKz4D1vYxK9JmgQPiGk1lu23o1kqGsLeT0iPbRSF7b76+S5T9fD8aRa0B8bY7I/3DebEj+1ysBA==
   dependencies:
-    "@types/react" "*"
+    "@types/react" "^17"
 
 "@types/react-redux@^7.1.20":
   version "7.1.25"
-  resolved "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.25.tgz"
+  resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.25.tgz#de841631205b24f9dfb4967dd4a7901e048f9a88"
   integrity sha512-bAGh4e+w5D8dajd6InASVIyCo4pZLJ66oLb80F9OBLO1gKESbZcRCJpTT6uLXX+HAB57zw1WTdwJdAsewuTweg==
   dependencies:
     "@types/hoist-non-react-statics" "^3.3.0"
@@ -3019,24 +3085,33 @@
 
 "@types/react-transition-group@^4.4.5":
   version "4.4.5"
-  resolved "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.5.tgz"
+  resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.5.tgz#aae20dcf773c5aa275d5b9f7cdbca638abc5e416"
   integrity sha512-juKD/eiSM3/xZYzjuzH6ZwpP+/lejltmiS3QEzV/vmb/Q8+HfDmxu+Baga8UEMGBqV88Nbg4l2hY/K2DkyaLLA==
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@18.0.15":
+"@types/react@*", "@types/react@^18.0.17":
+  version "18.2.3"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.3.tgz#509ad6c4c77378e686f9bb6e0f8756936392f0e8"
+  integrity sha512-myU58XyFvSCcF9stRlhYnPbHZu9md7VZNsLukY6D68JHzIHLvqxvutD5luAJLnrUKMswvAgGwdSlEUKKSD+9Fw==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
+"@types/react@18.0.15":
   version "18.0.15"
-  resolved "https://registry.npmjs.org/@types/react/-/react-18.0.15.tgz"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.15.tgz#d355644c26832dc27f3e6cbf0c4f4603fc4ab7fe"
   integrity sha512-iz3BtLuIYH1uWdsv6wXYdhozhqj20oD4/Hk2DNXIn1kFsmp9x8d9QB6FnPhfkbhd2PgEONt9Q1x/ebkwjfFLow==
   dependencies:
     "@types/prop-types" "*"
     "@types/scheduler" "*"
     csstype "^3.0.2"
 
-"@types/react@^18.0.17":
-  version "18.0.27"
-  resolved "https://registry.npmjs.org/@types/react/-/react-18.0.27.tgz"
-  integrity sha512-3vtRKHgVxu3Jp9t718R9BuzoD4NcQ8YJ5XRzsSKxNDiDonD2MXIT1TmSkenxuCycZJoQT5d2vE8LwWJxBC1gmA==
+"@types/react@^17":
+  version "17.0.58"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.58.tgz#c8bbc82114e5c29001548ebe8ed6c4ba4d3c9fb0"
+  integrity sha512-c1GzVY97P0fGxwGxhYq989j4XwlcHQoto6wQISOC2v6wm3h0PORRWJFHlkRjfGsiG3y1609WdQ+J+tKxvrEd6A==
   dependencies:
     "@types/prop-types" "*"
     "@types/scheduler" "*"
@@ -3044,214 +3119,195 @@
 
 "@types/reactcss@*":
   version "1.2.6"
-  resolved "https://registry.npmjs.org/@types/reactcss/-/reactcss-1.2.6.tgz"
+  resolved "https://registry.yarnpkg.com/@types/reactcss/-/reactcss-1.2.6.tgz#133c1e7e896f2726370d1d5a26bf06a30a038bcc"
   integrity sha512-qaIzpCuXNWomGR1Xq8SCFTtF4v8V27Y6f+b9+bzHiv087MylI/nTCqqdChNeWS7tslgROmYB7yeiruWX7WnqNg==
   dependencies:
     "@types/react" "*"
 
 "@types/refractor@^3.0.2":
   version "3.0.2"
-  resolved "https://registry.npmjs.org/@types/refractor/-/refractor-3.0.2.tgz"
+  resolved "https://registry.yarnpkg.com/@types/refractor/-/refractor-3.0.2.tgz#2d42128d59f78f84d2c799ffc5ab5cadbcba2d82"
   integrity sha512-2HMXuwGuOqzUG+KUTm9GDJCHl0LCBKsB5cg28ujEmVi/0qgTb6jOmkVSO5K48qXksyl2Fr3C0Q2VrgD4zbwyXg==
   dependencies:
     "@types/prismjs" "*"
 
 "@types/resolve@1.17.1":
   version "1.17.1"
-  resolved "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz"
+  resolved "https://registry.yarnpkg.com/@types/resolve/-/resolve-1.17.1.tgz#3afd6ad8967c77e4376c598a82ddd58f46ec45d6"
   integrity sha512-yy7HuzQhj0dhGpD8RLXSZWEkLsV9ibvxvi6EiJ3bkqLAO1RGo0WbkWQiwpRlSFymTJRz0d3k5LM3kkx8ArDbLw==
   dependencies:
     "@types/node" "*"
 
 "@types/scheduler@*":
-  version "0.16.2"
-  resolved "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz"
-  integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==
+  version "0.16.3"
+  resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.3.tgz#cef09e3ec9af1d63d2a6cc5b383a737e24e6dcf5"
+  integrity sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==
 
 "@types/semver@^7.3.12":
   version "7.3.13"
-  resolved "https://registry.npmjs.org/@types/semver/-/semver-7.3.13.tgz"
+  resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.3.13.tgz#da4bfd73f49bd541d28920ab0e2bf0ee80f71c91"
   integrity sha512-21cFJr9z3g5dW8B0CVI9g2O9beqaThGQ6ZFBqHfwhzLDKUxaqTIy3vnfah/UPkfOiF2pLq+tGz+W8RyCskuslw==
 
 "@types/string.prototype.matchall@^4.0.1":
   version "4.0.1"
-  resolved "https://registry.npmjs.org/@types/string.prototype.matchall/-/string.prototype.matchall-4.0.1.tgz"
+  resolved "https://registry.yarnpkg.com/@types/string.prototype.matchall/-/string.prototype.matchall-4.0.1.tgz#f418c53cf4b95f152b870e43c41fa3825caea942"
   integrity sha512-jVQQq9YbEcLwWejeHs4CMVZkereuGPgflaOH/BGqHOYT45f3LV0Ah2Cmc0Cby/DZ9qhIp2V3lqPTHnLXlK7VLQ==
 
 "@types/tern@*":
   version "0.23.4"
-  resolved "https://registry.npmjs.org/@types/tern/-/tern-0.23.4.tgz"
+  resolved "https://registry.yarnpkg.com/@types/tern/-/tern-0.23.4.tgz#03926eb13dbeaf3ae0d390caf706b2643a0127fb"
   integrity sha512-JAUw1iXGO1qaWwEOzxTKJZ/5JxVeON9kvGZ/osgZaJImBnyjyn0cjovPsf6FNLmyGY8Vw9DoXZCMlfMkMwHRWg==
   dependencies:
     "@types/estree" "*"
 
 "@types/throttle-debounce@^2.1.0":
   version "2.1.0"
-  resolved "https://registry.npmjs.org/@types/throttle-debounce/-/throttle-debounce-2.1.0.tgz"
+  resolved "https://registry.yarnpkg.com/@types/throttle-debounce/-/throttle-debounce-2.1.0.tgz#1c3df624bfc4b62f992d3012b84c56d41eab3776"
   integrity sha512-5eQEtSCoESnh2FsiLTxE121IiE60hnMqcb435fShf4bpLRjEu1Eoekht23y6zXS9Ts3l+Szu3TARnTsA0GkOkQ==
 
 "@types/trusted-types@^2.0.2":
-  version "2.0.2"
-  resolved "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.2.tgz"
-  integrity sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/@types/trusted-types/-/trusted-types-2.0.3.tgz#a136f83b0758698df454e328759dbd3d44555311"
+  integrity sha512-NfQ4gyz38SL8sDNrSixxU2Os1a5xcdFxipAFxYEuLUlvU2uDwS4NUpsImcf1//SlWItCVMMLiylsxbmNMToV/g==
 
 "@types/turndown@^5.0.1":
   version "5.0.1"
-  resolved "https://registry.npmjs.org/@types/turndown/-/turndown-5.0.1.tgz"
+  resolved "https://registry.yarnpkg.com/@types/turndown/-/turndown-5.0.1.tgz#fcda7b02cda4c9d445be1440036df20f335b9387"
   integrity sha512-N8Ad4e3oJxh9n9BiZx9cbe/0M3kqDpOTm2wzj13wdDUxDPjfjloWIJaquZzWE1cYTAHpjOH3rcTnXQdpEfS/SQ==
 
 "@types/unist@*", "@types/unist@^2.0.0":
   version "2.0.6"
-  resolved "https://registry.npmjs.org/@types/unist/-/unist-2.0.6.tgz"
+  resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.6.tgz#250a7b16c3b91f672a24552ec64678eeb1d3a08d"
   integrity sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==
 
 "@types/uuid@^8.3.4":
   version "8.3.4"
-  resolved "https://registry.npmjs.org/@types/uuid/-/uuid-8.3.4.tgz"
+  resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-8.3.4.tgz#bd86a43617df0594787d38b735f55c805becf1bc"
   integrity sha512-c/I8ZRb51j+pYGAu5CrFMRxqZ2ke4y2grEBO5AUjgSkSk+qT2Ea+OdWElz/OiMf5MNpn2b17kuVBwZLQJXzihw==
 
 "@typescript-eslint/eslint-plugin@^5.48.2", "@typescript-eslint/eslint-plugin@^5.51.0":
-  version "5.51.0"
-  resolved "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.51.0.tgz"
-  integrity sha512-wcAwhEWm1RgNd7dxD/o+nnLW8oH+6RK1OGnmbmkj/GGoDPV1WWMVP0FXYQBivKHdwM1pwii3bt//RC62EriIUQ==
+  version "5.59.2"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.59.2.tgz#684a2ce7182f3b4dac342eef7caa1c2bae476abd"
+  integrity sha512-yVrXupeHjRxLDcPKL10sGQ/QlVrA8J5IYOEWVqk0lJaSZP7X5DfnP7Ns3cc74/blmbipQ1htFNVGsHX6wsYm0A==
   dependencies:
-    "@typescript-eslint/scope-manager" "5.51.0"
-    "@typescript-eslint/type-utils" "5.51.0"
-    "@typescript-eslint/utils" "5.51.0"
+    "@eslint-community/regexpp" "^4.4.0"
+    "@typescript-eslint/scope-manager" "5.59.2"
+    "@typescript-eslint/type-utils" "5.59.2"
+    "@typescript-eslint/utils" "5.59.2"
     debug "^4.3.4"
     grapheme-splitter "^1.0.4"
     ignore "^5.2.0"
     natural-compare-lite "^1.4.0"
-    regexpp "^3.2.0"
     semver "^7.3.7"
     tsutils "^3.21.0"
 
 "@typescript-eslint/parser@^5.21.0", "@typescript-eslint/parser@^5.48.2":
-  version "5.51.0"
-  resolved "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.51.0.tgz"
-  integrity sha512-fEV0R9gGmfpDeRzJXn+fGQKcl0inIeYobmmUWijZh9zA7bxJ8clPhV9up2ZQzATxAiFAECqPQyMDB4o4B81AaA==
+  version "5.59.2"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-5.59.2.tgz#c2c443247901d95865b9f77332d9eee7c55655e8"
+  integrity sha512-uq0sKyw6ao1iFOZZGk9F8Nro/8+gfB5ezl1cA06SrqbgJAt0SRoFhb9pXaHvkrxUpZaoLxt8KlovHNk8Gp6/HQ==
   dependencies:
-    "@typescript-eslint/scope-manager" "5.51.0"
-    "@typescript-eslint/types" "5.51.0"
-    "@typescript-eslint/typescript-estree" "5.51.0"
+    "@typescript-eslint/scope-manager" "5.59.2"
+    "@typescript-eslint/types" "5.59.2"
+    "@typescript-eslint/typescript-estree" "5.59.2"
     debug "^4.3.4"
 
-"@typescript-eslint/scope-manager@5.51.0":
-  version "5.51.0"
-  resolved "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.51.0.tgz"
-  integrity sha512-gNpxRdlx5qw3yaHA0SFuTjW4rxeYhpHxt491PEcKF8Z6zpq0kMhe0Tolxt0qjlojS+/wArSDlj/LtE69xUJphQ==
+"@typescript-eslint/scope-manager@5.59.2":
+  version "5.59.2"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.59.2.tgz#f699fe936ee4e2c996d14f0fdd3a7da5ba7b9a4c"
+  integrity sha512-dB1v7ROySwQWKqQ8rEWcdbTsFjh2G0vn8KUyvTXdPoyzSL6lLGkiXEV5CvpJsEe9xIdKV+8Zqb7wif2issoOFA==
   dependencies:
-    "@typescript-eslint/types" "5.51.0"
-    "@typescript-eslint/visitor-keys" "5.51.0"
+    "@typescript-eslint/types" "5.59.2"
+    "@typescript-eslint/visitor-keys" "5.59.2"
 
-"@typescript-eslint/type-utils@5.51.0":
-  version "5.51.0"
-  resolved "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.51.0.tgz"
-  integrity sha512-QHC5KKyfV8sNSyHqfNa0UbTbJ6caB8uhcx2hYcWVvJAZYJRBo5HyyZfzMdRx8nvS+GyMg56fugMzzWnojREuQQ==
+"@typescript-eslint/type-utils@5.59.2":
+  version "5.59.2"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-5.59.2.tgz#0729c237503604cd9a7084b5af04c496c9a4cdcf"
+  integrity sha512-b1LS2phBOsEy/T381bxkkywfQXkV1dWda/z0PhnIy3bC5+rQWQDS7fk9CSpcXBccPY27Z6vBEuaPBCKCgYezyQ==
   dependencies:
-    "@typescript-eslint/typescript-estree" "5.51.0"
-    "@typescript-eslint/utils" "5.51.0"
+    "@typescript-eslint/typescript-estree" "5.59.2"
+    "@typescript-eslint/utils" "5.59.2"
     debug "^4.3.4"
     tsutils "^3.21.0"
 
-"@typescript-eslint/types@5.51.0":
-  version "5.51.0"
-  resolved "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.51.0.tgz"
-  integrity sha512-SqOn0ANn/v6hFn0kjvLwiDi4AzR++CBZz0NV5AnusT2/3y32jdc0G4woXPWHCumWtUXZKPAS27/9vziSsC9jnw==
+"@typescript-eslint/types@5.59.2":
+  version "5.59.2"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.59.2.tgz#b511d2b9847fe277c5cb002a2318bd329ef4f655"
+  integrity sha512-LbJ/HqoVs2XTGq5shkiKaNTuVv5tTejdHgfdjqRUGdYhjW1crm/M7og2jhVskMt8/4wS3T1+PfFvL1K3wqYj4w==
 
-"@typescript-eslint/typescript-estree@5.51.0":
-  version "5.51.0"
-  resolved "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.51.0.tgz"
-  integrity sha512-TSkNupHvNRkoH9FMA3w7TazVFcBPveAAmb7Sz+kArY6sLT86PA5Vx80cKlYmd8m3Ha2SwofM1KwraF24lM9FvA==
+"@typescript-eslint/typescript-estree@5.59.2":
+  version "5.59.2"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.59.2.tgz#6e2fabd3ba01db5d69df44e0b654c0b051fe9936"
+  integrity sha512-+j4SmbwVmZsQ9jEyBMgpuBD0rKwi9RxRpjX71Brr73RsYnEr3Lt5QZ624Bxphp8HUkSKfqGnPJp1kA5nl0Sh7Q==
   dependencies:
-    "@typescript-eslint/types" "5.51.0"
-    "@typescript-eslint/visitor-keys" "5.51.0"
+    "@typescript-eslint/types" "5.59.2"
+    "@typescript-eslint/visitor-keys" "5.59.2"
     debug "^4.3.4"
     globby "^11.1.0"
     is-glob "^4.0.3"
     semver "^7.3.7"
     tsutils "^3.21.0"
 
-"@typescript-eslint/utils@5.51.0":
-  version "5.51.0"
-  resolved "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.51.0.tgz"
-  integrity sha512-76qs+5KWcaatmwtwsDJvBk4H76RJQBFe+Gext0EfJdC3Vd2kpY2Pf//OHHzHp84Ciw0/rYoGTDnIAr3uWhhJYw==
+"@typescript-eslint/utils@5.59.2":
+  version "5.59.2"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.59.2.tgz#0c45178124d10cc986115885688db6abc37939f4"
+  integrity sha512-kSuF6/77TZzyGPhGO4uVp+f0SBoYxCDf+lW3GKhtKru/L8k/Hd7NFQxyWUeY7Z/KGB2C6Fe3yf2vVi4V9TsCSQ==
   dependencies:
+    "@eslint-community/eslint-utils" "^4.2.0"
     "@types/json-schema" "^7.0.9"
     "@types/semver" "^7.3.12"
-    "@typescript-eslint/scope-manager" "5.51.0"
-    "@typescript-eslint/types" "5.51.0"
-    "@typescript-eslint/typescript-estree" "5.51.0"
+    "@typescript-eslint/scope-manager" "5.59.2"
+    "@typescript-eslint/types" "5.59.2"
+    "@typescript-eslint/typescript-estree" "5.59.2"
     eslint-scope "^5.1.1"
-    eslint-utils "^3.0.0"
     semver "^7.3.7"
 
-"@typescript-eslint/visitor-keys@5.51.0":
-  version "5.51.0"
-  resolved "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.51.0.tgz"
-  integrity sha512-Oh2+eTdjHjOFjKA27sxESlA87YPSOJafGCR0md5oeMdh1ZcCfAGCIOL216uTBAkAIptvLIfKQhl7lHxMJet4GQ==
+"@typescript-eslint/visitor-keys@5.59.2":
+  version "5.59.2"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.59.2.tgz#37a419dc2723a3eacbf722512b86d6caf7d3b750"
+  integrity sha512-EEpsO8m3RASrKAHI9jpavNv9NlEUebV4qmF1OWxSTtKSFBpC1NCmWazDQHFivRf0O1DV11BA645yrLEVQ0/Lig==
   dependencies:
-    "@typescript-eslint/types" "5.51.0"
+    "@typescript-eslint/types" "5.59.2"
     eslint-visitor-keys "^3.3.0"
 
-"@xobotyi/scrollbar-width@^1.9.5":
-  version "1.9.5"
-  resolved "https://registry.npmjs.org/@xobotyi/scrollbar-width/-/scrollbar-width-1.9.5.tgz"
-  integrity sha512-N8tkAACJx2ww8vFMneJmaAgmjAG1tnVBZJRLRcx061tmsLRZHSEZSLuGWnwPtunsSLvSqXQ2wfp7Mgqg1I+2dQ==
-
-a11y-status@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.npmjs.org/a11y-status/-/a11y-status-2.0.0.tgz"
-  integrity sha512-Iy+OM+mJJHL0z3AT4O3EMlXqcT7FA96vSukndOM6SFKC4+q+KuO6juSN9Avwhn6s1P3oABZiljOdr5pF+0r9VA==
+a11y-status@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/a11y-status/-/a11y-status-2.0.1.tgz#a7883105910b9e3cd09ea90e5acf8404dc01b47e"
+  integrity sha512-VcW0aF3xb5wYFDYEfK7u41HBIU/bCE9zWl4zG+RhW1g0jGgTdS3h4ulVjVs7/2+KbGMpZvafP7wf/CDs/duNtA==
   dependencies:
-    "@babel/runtime" "^7.13.10"
+    "@babel/runtime" "^7.21.0"
     "@types/throttle-debounce" "^2.1.0"
     throttle-debounce "^3.0.1"
 
 acorn-jsx@^5.3.1, acorn-jsx@^5.3.2:
   version "5.3.2"
-  resolved "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz"
+  resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
   integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
 
-acorn-node@^1.8.2:
-  version "1.8.2"
-  resolved "https://registry.npmjs.org/acorn-node/-/acorn-node-1.8.2.tgz"
-  integrity sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==
-  dependencies:
-    acorn "^7.0.0"
-    acorn-walk "^7.0.0"
-    xtend "^4.0.2"
-
-acorn-walk@^7.0.0:
-  version "7.2.0"
-  resolved "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz"
-  integrity sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==
-
-acorn@^7.0.0, acorn@^7.4.0:
+acorn@^7.4.0:
   version "7.4.1"
-  resolved "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa"
   integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
 
 acorn@^8.5.0, acorn@^8.8.0:
   version "8.8.2"
-  resolved "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.8.2.tgz#1b2f25db02af965399b9776b0c2c391276d37c4a"
   integrity sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==
 
 agent-base@6:
   version "6.0.2"
-  resolved "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz"
+  resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-6.0.2.tgz#49fff58577cfee3f37176feab4c22e00f86d7f77"
   integrity sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==
   dependencies:
     debug "4"
 
 ajv-keywords@^3.5.2:
   version "3.5.2"
-  resolved "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz"
+  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.5.2.tgz#31f29da5ab6e00d1c2d329acf7b5929614d5014d"
   integrity sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==
 
 ajv@^6.10.0, ajv@^6.12.4, ajv@^6.12.5:
   version "6.12.6"
-  resolved "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4"
   integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
   dependencies:
     fast-deep-equal "^3.1.1"
@@ -3261,7 +3317,7 @@ ajv@^6.10.0, ajv@^6.12.4, ajv@^6.12.5:
 
 ajv@^8.0.1, ajv@^8.6.0:
   version "8.12.0"
-  resolved "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-8.12.0.tgz#d1a0527323e22f53562c567c00991577dfbe19d1"
   integrity sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==
   dependencies:
     fast-deep-equal "^3.1.1"
@@ -3271,69 +3327,56 @@ ajv@^8.0.1, ajv@^8.6.0:
 
 ansi-colors@^4.1.1:
   version "4.1.3"
-  resolved "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz"
+  resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-4.1.3.tgz#37611340eb2243e70cc604cad35d63270d48781b"
   integrity sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==
 
-ansi-regex@^2.0.0:
-  version "2.1.1"
-  resolved "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz"
-  integrity sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==
-
 ansi-regex@^5.0.1:
   version "5.0.1"
-  resolved "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304"
   integrity sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==
 
 ansi-styles@^3.2.1:
   version "3.2.1"
-  resolved "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
   integrity sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==
   dependencies:
     color-convert "^1.9.0"
 
 ansi-styles@^4.0.0, ansi-styles@^4.1.0:
   version "4.3.0"
-  resolved "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-4.3.0.tgz#edd803628ae71c04c85ae7a0906edad34b648937"
   integrity sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==
   dependencies:
     color-convert "^2.0.1"
 
+any-promise@^1.0.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/any-promise/-/any-promise-1.3.0.tgz#abc6afeedcea52e809cdc0376aed3ce39635d17f"
+  integrity sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==
+
 anymatch@~3.1.2:
   version "3.1.3"
-  resolved "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.3.tgz#790c58b19ba1720a84205b57c618d5ad8524973e"
   integrity sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==
   dependencies:
     normalize-path "^3.0.0"
     picomatch "^2.0.4"
 
-aproba@^1.0.3:
-  version "1.2.0"
-  resolved "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz"
-  integrity sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==
-
-are-we-there-yet@~1.1.2:
-  version "1.1.7"
-  resolved "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.7.tgz"
-  integrity sha512-nxwy40TuMiUGqMyRHgCSWZ9FM4VAoRP4xUYSTv5ImRog+h9yISPbVH7H8fASCIzYn9wlEv4zvFL7uKDMCFQm3g==
-  dependencies:
-    delegates "^1.0.0"
-    readable-stream "^2.0.6"
-
 arg@^5.0.2:
   version "5.0.2"
-  resolved "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz"
+  resolved "https://registry.yarnpkg.com/arg/-/arg-5.0.2.tgz#c81433cc427c92c4dcf4865142dbca6f15acd59c"
   integrity sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==
 
 argparse@^1.0.7:
   version "1.0.10"
-  resolved "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz"
+  resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
   integrity sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==
   dependencies:
     sprintf-js "~1.0.2"
 
 argparse@^2.0.1:
   version "2.0.1"
-  resolved "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz"
+  resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
   integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
 
 aria-hidden@^1.1.1:
@@ -3345,14 +3388,22 @@ aria-hidden@^1.1.1:
 
 aria-query@^5.1.3:
   version "5.1.3"
-  resolved "https://registry.npmjs.org/aria-query/-/aria-query-5.1.3.tgz"
+  resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.1.3.tgz#19db27cd101152773631396f7a95a3b58c22c35e"
   integrity sha512-R5iJ5lkuHybztUfuOAznmboyjWq8O6sqNqtK7CLOqdydi54VNbORp49mb14KbWgG1QD3JFO9hJdZ+y4KutfdOQ==
   dependencies:
     deep-equal "^2.0.5"
 
+array-buffer-byte-length@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/array-buffer-byte-length/-/array-buffer-byte-length-1.0.0.tgz#fabe8bc193fea865f317fe7807085ee0dee5aead"
+  integrity sha512-LPuwb2P+NrQw3XhxGc36+XSvuBPopovXYTR9Ew++Du9Yb/bx5AzBfrIsBoj0EZUifjQU+sHL21sseZ3jerWO/A==
+  dependencies:
+    call-bind "^1.0.2"
+    is-array-buffer "^3.0.1"
+
 array-includes@^3.1.5, array-includes@^3.1.6:
   version "3.1.6"
-  resolved "https://registry.npmjs.org/array-includes/-/array-includes-3.1.6.tgz"
+  resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.1.6.tgz#9e9e720e194f198266ba9e18c29e6a9b0e4b225f"
   integrity sha512-sgTbLvL6cNnw24FnbaDyjmvddQ2ML8arZsgaJhoABMoplz/4QRhtrYS+alr1BUM1Bwp6dhx8vVCBSLG+StwOFw==
   dependencies:
     call-bind "^1.0.2"
@@ -3363,24 +3414,24 @@ array-includes@^3.1.5, array-includes@^3.1.6:
 
 array-union@^1.0.1:
   version "1.0.2"
-  resolved "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz"
+  resolved "https://registry.yarnpkg.com/array-union/-/array-union-1.0.2.tgz#9a34410e4f4e3da23dea375be5be70f24778ec39"
   integrity sha512-Dxr6QJj/RdU/hCaBjOfxW+q6lyuVE6JFWIrAUpuOOhoJJoQ99cUn3igRaHVB5P9WrgFVN0FfArM3x0cueOU8ng==
   dependencies:
     array-uniq "^1.0.1"
 
 array-union@^2.1.0:
   version "2.1.0"
-  resolved "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz"
+  resolved "https://registry.yarnpkg.com/array-union/-/array-union-2.1.0.tgz#b798420adbeb1de828d84acd8a2e23d3efe85e8d"
   integrity sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==
 
 array-uniq@^1.0.1:
   version "1.0.3"
-  resolved "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.3.tgz"
+  resolved "https://registry.yarnpkg.com/array-uniq/-/array-uniq-1.0.3.tgz#af6ac877a25cc7f74e058894753858dfdb24fdb6"
   integrity sha512-MNha4BWQ6JbwhFhj03YK552f7cb3AzoE8SzeljgChvL1dl3IcvggXVz1DilzySZkCja+CXuZbdW7yATchWn8/Q==
 
 array.prototype.flat@^1.3.1:
   version "1.3.1"
-  resolved "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.1.tgz"
+  resolved "https://registry.yarnpkg.com/array.prototype.flat/-/array.prototype.flat-1.3.1.tgz#ffc6576a7ca3efc2f46a143b9d1dda9b4b3cf5e2"
   integrity sha512-roTU0KWIOmJ4DRLmwKd19Otg0/mT3qPNt0Qb3GWW8iObuZXxrjB/pzn0R3hqpRSWg4HCwqx+0vwOnWnvlOyeIA==
   dependencies:
     call-bind "^1.0.2"
@@ -3390,7 +3441,7 @@ array.prototype.flat@^1.3.1:
 
 array.prototype.flatmap@^1.3.0, array.prototype.flatmap@^1.3.1:
   version "1.3.1"
-  resolved "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.1.tgz"
+  resolved "https://registry.yarnpkg.com/array.prototype.flatmap/-/array.prototype.flatmap-1.3.1.tgz#1aae7903c2100433cb8261cd4ed310aab5c4a183"
   integrity sha512-8UGn9O1FDVvMNB0UlLv4voxRMze7+FpHyF5mSMRjWHUMlpoDViniy05870VlxhfgTnLbpuwTzvD76MTtWxB/mQ==
   dependencies:
     call-bind "^1.0.2"
@@ -3400,7 +3451,7 @@ array.prototype.flatmap@^1.3.0, array.prototype.flatmap@^1.3.1:
 
 array.prototype.tosorted@^1.1.1:
   version "1.1.1"
-  resolved "https://registry.npmjs.org/array.prototype.tosorted/-/array.prototype.tosorted-1.1.1.tgz"
+  resolved "https://registry.yarnpkg.com/array.prototype.tosorted/-/array.prototype.tosorted-1.1.1.tgz#ccf44738aa2b5ac56578ffda97c03fd3e23dd532"
   integrity sha512-pZYPXPRl2PqWcsUs6LOMn+1f1532nEoPTYowBtqLwAW+W8vSVhkIGnmOX1t/UQjD6YGI0vcD2B1U7ZFGQH9jnQ==
   dependencies:
     call-bind "^1.0.2"
@@ -3411,41 +3462,41 @@ array.prototype.tosorted@^1.1.1:
 
 ast-types-flow@^0.0.7:
   version "0.0.7"
-  resolved "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.7.tgz"
+  resolved "https://registry.yarnpkg.com/ast-types-flow/-/ast-types-flow-0.0.7.tgz#f70b735c6bca1a5c9c22d982c3e39e7feba3bdad"
   integrity sha512-eBvWn1lvIApYMhzQMsu9ciLfkBY499mFZlNqG+/9WR7PVlroQw0vG30cOQQbaKz3sCEc44TAOu2ykzqXSNnwag==
 
 astral-regex@^2.0.0:
   version "2.0.0"
-  resolved "https://registry.npmjs.org/astral-regex/-/astral-regex-2.0.0.tgz"
+  resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-2.0.0.tgz#483143c567aeed4785759c0865786dc77d7d2e31"
   integrity sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==
 
 async@^3.2.3:
   version "3.2.4"
-  resolved "https://registry.npmjs.org/async/-/async-3.2.4.tgz"
+  resolved "https://registry.yarnpkg.com/async/-/async-3.2.4.tgz#2d22e00f8cddeb5fde5dd33522b56d1cf569a81c"
   integrity sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ==
 
 asynckit@^0.4.0:
   version "0.4.0"
-  resolved "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz"
+  resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
   integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==
 
 at-least-node@^1.0.0:
   version "1.0.0"
-  resolved "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz"
+  resolved "https://registry.yarnpkg.com/at-least-node/-/at-least-node-1.0.0.tgz#602cd4b46e844ad4effc92a8011a3c46e0238dc2"
   integrity sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==
 
 attr-accept@^2.2.2:
   version "2.2.2"
-  resolved "https://registry.npmjs.org/attr-accept/-/attr-accept-2.2.2.tgz"
+  resolved "https://registry.yarnpkg.com/attr-accept/-/attr-accept-2.2.2.tgz#646613809660110749e92f2c10833b70968d929b"
   integrity sha512-7prDjvt9HmqiZ0cl5CRjtS84sEyhsHP2coDkaZKRKVfCDo9s7iw7ChVmar78Gu9pC4SoR/28wFu/G5JJhTnqEg==
 
 autoprefixer@^10.4.7:
-  version "10.4.13"
-  resolved "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.13.tgz"
-  integrity sha512-49vKpMqcZYsJjwotvt4+h/BCjJVnhGwcLpDt5xkcaOG3eLrG/HUYLagrihYsQ+qrIBgIzX1Rw7a6L8I/ZA1Atg==
+  version "10.4.14"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.14.tgz#e28d49902f8e759dd25b153264e862df2705f79d"
+  integrity sha512-FQzyfOsTlwVzjHxKEqRIAdJx9niO6VCBCoEwax/VLSoQF29ggECcPuBqUMZ+u8jCZOPSy8b8/8KnuFbp0SaFZQ==
   dependencies:
-    browserslist "^4.21.4"
-    caniuse-lite "^1.0.30001426"
+    browserslist "^4.21.5"
+    caniuse-lite "^1.0.30001464"
     fraction.js "^4.2.0"
     normalize-range "^0.1.2"
     picocolors "^1.0.0"
@@ -3453,18 +3504,18 @@ autoprefixer@^10.4.7:
 
 available-typed-arrays@^1.0.5:
   version "1.0.5"
-  resolved "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz"
+  resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz#92f95616501069d07d10edb2fc37d3e1c65123b7"
   integrity sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==
 
 axe-core@^4.6.2:
-  version "4.6.3"
-  resolved "https://registry.npmjs.org/axe-core/-/axe-core-4.6.3.tgz"
-  integrity sha512-/BQzOX780JhsxDnPpH4ZiyrJAzcd8AfzFPkv+89veFSr1rcMjuq2JDCwypKaPeB6ljHp9KjXhPpjgCvQlWYuqg==
+  version "4.7.0"
+  resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.7.0.tgz#34ba5a48a8b564f67e103f0aa5768d76e15bbbbf"
+  integrity sha512-M0JtH+hlOL5pLQwHOLNYZaXuhqmvS8oExsqB1SBYgA4Dk7u/xx+YdGHXaK5pyUfed5mYXdlYiphWq3G8cRi5JQ==
 
 axios@^1.1.3:
-  version "1.3.2"
-  resolved "https://registry.npmjs.org/axios/-/axios-1.3.2.tgz"
-  integrity sha512-1M3O703bYqYuPhbHeya5bnhpYVsDDRyQSabNja04mZtboLNSuZ4YrltestrLXfHgmzua4TpUqRiVKbiQuo2epw==
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-1.4.0.tgz#38a7bf1224cd308de271146038b551d725f0be1f"
+  integrity sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA==
   dependencies:
     follow-redirects "^1.15.0"
     form-data "^4.0.0"
@@ -3472,14 +3523,14 @@ axios@^1.1.3:
 
 axobject-query@^3.1.1:
   version "3.1.1"
-  resolved "https://registry.npmjs.org/axobject-query/-/axobject-query-3.1.1.tgz"
+  resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-3.1.1.tgz#3b6e5c6d4e43ca7ba51c5babf99d22a9c68485e1"
   integrity sha512-goKlv8DZrK9hUh975fnHzhNIO4jUnFCfv/dszV5VwUGDFjI6vQ2VwoyjYjYNEbBE8AH87TduWP5uyDR1D+Iteg==
   dependencies:
     deep-equal "^2.0.5"
 
 babel-loader@^8.2.5:
   version "8.3.0"
-  resolved "https://registry.npmjs.org/babel-loader/-/babel-loader-8.3.0.tgz"
+  resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.3.0.tgz#124936e841ba4fe8176786d6ff28add1f134d6a8"
   integrity sha512-H8SvsMF+m9t15HNLMipppzkC+Y2Yq+v3SonZyU70RBL/h1gxPkH08Ot8pEE9Z4Kd+czyWJClmFS8qzIP9OZ04Q==
   dependencies:
     find-cache-dir "^3.3.1"
@@ -3487,9 +3538,17 @@ babel-loader@^8.2.5:
     make-dir "^3.1.0"
     schema-utils "^2.6.5"
 
+babel-merge@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/babel-merge/-/babel-merge-3.0.0.tgz#9bd368d48116dab18b8f3e8022835479d80f3b50"
+  integrity sha512-eBOBtHnzt9xvnjpYNI5HmaPp/b2vMveE5XggzqHnQeHJ8mFIBrBv6WZEVIj5jJ2uwTItkqKo9gWzEEcBxEq0yw==
+  dependencies:
+    deepmerge "^2.2.1"
+    object.omit "^3.0.0"
+
 babel-plugin-macros@^3.1.0:
   version "3.1.0"
-  resolved "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz"
+  resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz#9ef6dc74deb934b4db344dc973ee851d148c50c1"
   integrity sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==
   dependencies:
     "@babel/runtime" "^7.12.5"
@@ -3498,7 +3557,7 @@ babel-plugin-macros@^3.1.0:
 
 babel-plugin-polyfill-corejs2@^0.3.3:
   version "0.3.3"
-  resolved "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.3.3.tgz"
+  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.3.3.tgz#5d1bd3836d0a19e1b84bbf2d9640ccb6f951c122"
   integrity sha512-8hOdmFYFSZhqg2C/JgLUQ+t52o5nirNwaWM2B9LWteozwIvM14VSwdsCAUET10qT+kmySAlseadmfeeSWFCy+Q==
   dependencies:
     "@babel/compat-data" "^7.17.7"
@@ -3507,7 +3566,7 @@ babel-plugin-polyfill-corejs2@^0.3.3:
 
 babel-plugin-polyfill-corejs3@^0.6.0:
   version "0.6.0"
-  resolved "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.6.0.tgz"
+  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.6.0.tgz#56ad88237137eade485a71b52f72dbed57c6230a"
   integrity sha512-+eHqR6OPcBhJOGgsIar7xoAB1GcSwVUA3XjAd7HJNzOXT4wv6/H7KIdA/Nc60cvUlDbKApmqNvD1B1bzOt4nyA==
   dependencies:
     "@babel/helper-define-polyfill-provider" "^0.3.3"
@@ -3515,7 +3574,7 @@ babel-plugin-polyfill-corejs3@^0.6.0:
 
 babel-plugin-polyfill-regenerator@^0.4.1:
   version "0.4.1"
-  resolved "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.4.1.tgz"
+  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.4.1.tgz#390f91c38d90473592ed43351e801a9d3e0fd747"
   integrity sha512-NtQGmyQDXjQqQ+IzRkBVwEOz9lQ4zxAQZgoAYEtU9dJjnl1Oc98qnN7jcp+bE7O7aYzVpavXE3/VKXNzUbh7aw==
   dependencies:
     "@babel/helper-define-polyfill-provider" "^0.3.3"
@@ -3527,22 +3586,22 @@ bail@^2.0.0:
 
 balanced-match@^1.0.0:
   version "1.0.2"
-  resolved "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz"
+  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
   integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
 
 big.js@^5.2.2:
   version "5.2.2"
-  resolved "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz"
+  resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328"
   integrity sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==
 
 binary-extensions@^2.0.0:
   version "2.2.0"
-  resolved "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz"
+  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"
   integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==
 
 brace-expansion@^1.1.7:
   version "1.1.11"
-  resolved "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz"
+  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
   integrity sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==
   dependencies:
     balanced-match "^1.0.0"
@@ -3550,21 +3609,21 @@ brace-expansion@^1.1.7:
 
 brace-expansion@^2.0.1:
   version "2.0.1"
-  resolved "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz"
+  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-2.0.1.tgz#1edc459e0f0c548486ecf9fc99f2221364b9a0ae"
   integrity sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==
   dependencies:
     balanced-match "^1.0.0"
 
 braces@^3.0.2, braces@~3.0.2:
   version "3.0.2"
-  resolved "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
   integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
   dependencies:
     fill-range "^7.0.1"
 
-browserslist@^4.21.3, browserslist@^4.21.4:
+browserslist@^4.21.3, browserslist@^4.21.5:
   version "4.21.5"
-  resolved "https://registry.npmjs.org/browserslist/-/browserslist-4.21.5.tgz"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.21.5.tgz#75c5dae60063ee641f977e00edd3cfb2fb7af6a7"
   integrity sha512-tUkiguQGW7S3IhB7N+c2MV/HZPSCPAAiYBZXLsBhFB/PCy6ZKKsZrmBayHV9fdGV/ARIfJ14NkxKzRDjvp7L6w==
   dependencies:
     caniuse-lite "^1.0.30001449"
@@ -3574,17 +3633,17 @@ browserslist@^4.21.3, browserslist@^4.21.4:
 
 buffer-from@^1.0.0:
   version "1.1.2"
-  resolved "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz"
+  resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.2.tgz#2b146a6fd72e80b4f55d255f35ed59a3a9a41bd5"
   integrity sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==
 
 builtin-modules@^3.1.0:
   version "3.3.0"
-  resolved "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.3.0.tgz"
+  resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-3.3.0.tgz#cae62812b89801e9656336e46223e030386be7b6"
   integrity sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw==
 
 call-bind@^1.0.0, call-bind@^1.0.2:
   version "1.0.2"
-  resolved "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz"
+  resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.2.tgz#b1d4e89e688119c3c9a903ad30abb2f6a919be3c"
   integrity sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==
   dependencies:
     function-bind "^1.1.1"
@@ -3592,12 +3651,12 @@ call-bind@^1.0.0, call-bind@^1.0.2:
 
 callsites@^3.0.0:
   version "3.1.0"
-  resolved "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz"
+  resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
   integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
 
 camel-case@^4.1.2:
   version "4.1.2"
-  resolved "https://registry.npmjs.org/camel-case/-/camel-case-4.1.2.tgz"
+  resolved "https://registry.yarnpkg.com/camel-case/-/camel-case-4.1.2.tgz#9728072a954f805228225a6deea6b38461e1bd5a"
   integrity sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==
   dependencies:
     pascal-case "^3.1.2"
@@ -3605,17 +3664,17 @@ camel-case@^4.1.2:
 
 camelcase-css@^2.0.1:
   version "2.0.1"
-  resolved "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz"
+  resolved "https://registry.yarnpkg.com/camelcase-css/-/camelcase-css-2.0.1.tgz#ee978f6947914cc30c6b44741b6ed1df7f043fd5"
   integrity sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==
 
-caniuse-lite@^1.0.30001406, caniuse-lite@^1.0.30001426, caniuse-lite@^1.0.30001449:
-  version "1.0.30001451"
-  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001451.tgz"
-  integrity sha512-XY7UbUpGRatZzoRft//5xOa69/1iGJRBlrieH6QYrkKLIFn3m7OVEJ81dSrKoy2BnKsdbX5cLrOispZNYo9v2w==
+caniuse-lite@^1.0.30001406, caniuse-lite@^1.0.30001449, caniuse-lite@^1.0.30001464:
+  version "1.0.30001482"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001482.tgz#8b3fad73dc35b2674a5c96df2d4f9f1c561435de"
+  integrity sha512-F1ZInsg53cegyjroxLNW9DmrEQ1SuGRTO1QlpA0o2/6OpQ0gFeDRoq1yFmnr8Sakn9qwwt9DmbxHB6w167OSuQ==
 
 capital-case@^1.0.4:
   version "1.0.4"
-  resolved "https://registry.npmjs.org/capital-case/-/capital-case-1.0.4.tgz"
+  resolved "https://registry.yarnpkg.com/capital-case/-/capital-case-1.0.4.tgz#9d130292353c9249f6b00fa5852bee38a717e669"
   integrity sha512-ds37W8CytHgwnhGGTi88pcPyR15qoNkOpYwmMMfnWqqWgESapLqvDx6huFjQ5vqWSn2Z06173XNA7LtMOeUh1A==
   dependencies:
     no-case "^3.0.4"
@@ -3624,12 +3683,12 @@ capital-case@^1.0.4:
 
 case-anything@^2.1.10:
   version "2.1.10"
-  resolved "https://registry.npmjs.org/case-anything/-/case-anything-2.1.10.tgz"
+  resolved "https://registry.yarnpkg.com/case-anything/-/case-anything-2.1.10.tgz#d18a6ca968d54ec3421df71e3e190f3bced23410"
   integrity sha512-JczJwVrCP0jPKh05McyVsuOg6AYosrB9XWZKbQzXeDAm2ClE/PJE/BcrrQrVyGYH7Jg8V/LDupmyL4kFlVsVFQ==
 
 chalk@3.0.0:
   version "3.0.0"
-  resolved "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-3.0.0.tgz#3f73c2bf526591f574cc492c51e2456349f844e4"
   integrity sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==
   dependencies:
     ansi-styles "^4.1.0"
@@ -3637,7 +3696,7 @@ chalk@3.0.0:
 
 chalk@^2.0.0:
   version "2.4.2"
-  resolved "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
   integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
   dependencies:
     ansi-styles "^3.2.1"
@@ -3646,7 +3705,7 @@ chalk@^2.0.0:
 
 chalk@^4.0.0, chalk@^4.0.2:
   version "4.1.2"
-  resolved "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
   integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
   dependencies:
     ansi-styles "^4.1.0"
@@ -3654,7 +3713,7 @@ chalk@^4.0.0, chalk@^4.0.2:
 
 change-case@^4.1.2:
   version "4.1.2"
-  resolved "https://registry.npmjs.org/change-case/-/change-case-4.1.2.tgz"
+  resolved "https://registry.yarnpkg.com/change-case/-/change-case-4.1.2.tgz#fedfc5f136045e2398c0410ee441f95704641e12"
   integrity sha512-bSxY2ws9OtviILG1EiY5K7NNxkqg/JnRnFxLtKQ96JaviiIxi7djMrSd0ECT9AC+lttClmYwKw53BWpOMblo7A==
   dependencies:
     camel-case "^4.1.2"
@@ -3672,12 +3731,12 @@ change-case@^4.1.2:
 
 character-entities-legacy@^1.0.0:
   version "1.1.4"
-  resolved "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-1.1.4.tgz"
+  resolved "https://registry.yarnpkg.com/character-entities-legacy/-/character-entities-legacy-1.1.4.tgz#94bc1845dce70a5bb9d2ecc748725661293d8fc1"
   integrity sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA==
 
 character-entities@^1.0.0:
   version "1.2.4"
-  resolved "https://registry.npmjs.org/character-entities/-/character-entities-1.2.4.tgz"
+  resolved "https://registry.yarnpkg.com/character-entities/-/character-entities-1.2.4.tgz#e12c3939b7eaf4e5b15e7ad4c5e28e1d48c5b16b"
   integrity sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw==
 
 character-entities@^2.0.0:
@@ -3687,12 +3746,12 @@ character-entities@^2.0.0:
 
 character-reference-invalid@^1.0.0:
   version "1.1.4"
-  resolved "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-1.1.4.tgz"
+  resolved "https://registry.yarnpkg.com/character-reference-invalid/-/character-reference-invalid-1.1.4.tgz#083329cda0eae272ab3dbbf37e9a382c13af1560"
   integrity sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==
 
 chokidar@^3.5.3:
   version "3.5.3"
-  resolved "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"
   integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==
   dependencies:
     anymatch "~3.1.2"
@@ -3707,24 +3766,24 @@ chokidar@^3.5.3:
 
 classnames@^2.2.5, classnames@^2.2.6, classnames@^2.3.1, classnames@^2.3.2:
   version "2.3.2"
-  resolved "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.2.tgz#351d813bf0137fcc6a76a16b88208d2560a0d924"
   integrity sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==
 
 clean-webpack-plugin@^4.0.0:
   version "4.0.0"
-  resolved "https://registry.npmjs.org/clean-webpack-plugin/-/clean-webpack-plugin-4.0.0.tgz"
+  resolved "https://registry.yarnpkg.com/clean-webpack-plugin/-/clean-webpack-plugin-4.0.0.tgz#72947d4403d452f38ed61a9ff0ada8122aacd729"
   integrity sha512-WuWE1nyTNAyW5T7oNyys2EN0cfP2fdRxhxnIQWiAp0bMabPdHhoGxM8A6YL2GhqwgrPnnaemVE7nv5XJ2Fhh2w==
   dependencies:
     del "^4.1.1"
 
 client-only@^0.0.1:
   version "0.0.1"
-  resolved "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz"
+  resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1"
   integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==
 
 clsx@^1.2.1:
   version "1.2.1"
-  resolved "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
   integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
 
 cmdk@^0.2.0:
@@ -3735,55 +3794,50 @@ cmdk@^0.2.0:
     "@radix-ui/react-dialog" "1.0.0"
     command-score "0.1.2"
 
-code-point-at@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz"
-  integrity sha512-RpAVKQA5T63xEj6/giIbUEtZwJ4UFIc3ZtvEkiaUERylqe8xb5IvqcgOurZLahv93CLKfxcw5YI+DZcUBRyLXA==
-
-codemirror@^5.62.0:
-  version "5.65.11"
-  resolved "https://registry.npmjs.org/codemirror/-/codemirror-5.65.11.tgz"
-  integrity sha512-Gp62g2eKSCHYt10axmGhKq3WoJSvVpvhXmowNq7pZdRVowwtvBR/hi2LSP5srtctKkRT33T6/n8Kv1UGp7JW4A==
+codemirror@^5.65.12:
+  version "5.65.13"
+  resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.65.13.tgz#c098a6f409db8b5a7c5722788bd9fa3bb2367f2e"
+  integrity sha512-SVWEzKXmbHmTQQWaz03Shrh4nybG0wXx2MEu3FO4ezbPW8IbnZEd5iGHGEffSUaitKYa3i+pHpBsSvw8sPHtzg==
 
 color-convert@^1.9.0:
   version "1.9.3"
-  resolved "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
   integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
   dependencies:
     color-name "1.1.3"
 
 color-convert@^2.0.1:
   version "2.0.1"
-  resolved "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3"
   integrity sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==
   dependencies:
     color-name "~1.1.4"
 
 color-name@1.1.3:
   version "1.1.3"
-  resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
   integrity sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==
 
-color-name@^1.1.4, color-name@~1.1.4:
+color-name@~1.1.4:
   version "1.1.4"
-  resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
-color2k@^2.0.0:
+color2k@^2.0.2:
   version "2.0.2"
-  resolved "https://registry.npmjs.org/color2k/-/color2k-2.0.2.tgz"
+  resolved "https://registry.yarnpkg.com/color2k/-/color2k-2.0.2.tgz#ac2b4aea11c822a6bcb70c768b5a289f4fffcebb"
   integrity sha512-kJhwH5nAwb34tmyuqq/lgjEKzlFXn1U99NlnB6Ws4qVaERcRUYeYP1cBw6BJ4vxaWStAUEef4WMr7WjOCnBt8w==
 
 combined-stream@^1.0.8:
   version "1.0.8"
-  resolved "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz"
+  resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
   integrity sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==
   dependencies:
     delayed-stream "~1.0.0"
 
 comma-separated-tokens@^1.0.0:
   version "1.0.8"
-  resolved "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-1.0.8.tgz"
+  resolved "https://registry.yarnpkg.com/comma-separated-tokens/-/comma-separated-tokens-1.0.8.tgz#632b80b6117867a158f1080ad498b2fbe7e3f5ea"
   integrity sha512-GHuDRO12Sypu2cV70d1dkA2EUmXHgntrzbpvOB+Qy+49ypNfGgFQIC2fhhXbnyrJRynDCAARsT7Ou0M6hirpfw==
 
 comma-separated-tokens@^2.0.0:
@@ -3798,37 +3852,37 @@ command-score@0.1.2:
 
 commander@^2.20.0:
   version "2.20.3"
-  resolved "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
   integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
 
+commander@^4.0.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.1.tgz#9fd602bd936294e9e9ef46a3f4d6964044b18068"
+  integrity sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==
+
 common-tags@^1.8.0:
   version "1.8.2"
-  resolved "https://registry.npmjs.org/common-tags/-/common-tags-1.8.2.tgz"
+  resolved "https://registry.yarnpkg.com/common-tags/-/common-tags-1.8.2.tgz#94ebb3c076d26032745fd54face7f688ef5ac9c6"
   integrity sha512-gk/Z852D2Wtb//0I+kRFNKKE9dIIVirjoqPoA1wJU+XePVXZfGeBpk45+A1rKO4Q43prqWBNY/MiIeRLbPWUaA==
 
 commondir@^1.0.1:
   version "1.0.1"
-  resolved "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz"
+  resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
   integrity sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==
 
-compute-scroll-into-view@^1.0.17:
+compute-scroll-into-view@^1.0.20:
   version "1.0.20"
-  resolved "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-1.0.20.tgz"
+  resolved "https://registry.yarnpkg.com/compute-scroll-into-view/-/compute-scroll-into-view-1.0.20.tgz#1768b5522d1172754f5d0c9b02de3af6be506a43"
   integrity sha512-UCB0ioiyj8CRjtrvaceBLqqhZCVP+1B8+NWQhmdsm0VXOJtobBCf1dBQmebCCo34qZmUwZfIH2MZLqNHazrfjg==
 
 concat-map@0.0.1:
   version "0.0.1"
-  resolved "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz"
+  resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
   integrity sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==
 
-console-control-strings@^1.0.0, console-control-strings@~1.1.0:
-  version "1.1.0"
-  resolved "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz"
-  integrity sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ==
-
 constant-case@^3.0.4:
   version "3.0.4"
-  resolved "https://registry.npmjs.org/constant-case/-/constant-case-3.0.4.tgz"
+  resolved "https://registry.yarnpkg.com/constant-case/-/constant-case-3.0.4.tgz#3b84a9aeaf4cf31ec45e6bf5de91bdfb0589faf1"
   integrity sha512-I2hSBi7Vvs7BEuJDr5dDHfzb/Ruj3FyvFyh7KLilAjNQw3Be+xgqUBA2W6scVEcL0hL1dwPRtIqEPVUCKkSsyQ==
   dependencies:
     no-case "^3.0.4"
@@ -3837,12 +3891,12 @@ constant-case@^3.0.4:
 
 convert-source-map@^1.5.0, convert-source-map@^1.7.0:
   version "1.9.0"
-  resolved "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.9.0.tgz#7faae62353fb4213366d0ca98358d22e8368b05f"
   integrity sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==
 
 cookie@^0.4.1:
   version "0.4.2"
-  resolved "https://registry.npmjs.org/cookie/-/cookie-0.4.2.tgz"
+  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.4.2.tgz#0e41f24de5ecf317947c82fc789e06a884824432"
   integrity sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==
 
 cookie@^0.5.0:
@@ -3850,28 +3904,16 @@ cookie@^0.5.0:
   resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.5.0.tgz#d1f5d71adec6558c58f389987c366aa47e994f8b"
   integrity sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==
 
-copy-to-clipboard@^3.3.1:
-  version "3.3.3"
-  resolved "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.3.tgz"
-  integrity sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==
-  dependencies:
-    toggle-selection "^1.0.6"
-
 core-js-compat@^3.25.1:
-  version "3.27.2"
-  resolved "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.27.2.tgz"
-  integrity sha512-welaYuF7ZtbYKGrIy7y3eb40d37rG1FvzEOfe7hSLd2iD6duMDqUhRfSvCGyC46HhR6Y8JXXdZ2lnRUMkPBpvg==
+  version "3.30.1"
+  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.30.1.tgz#961541e22db9c27fc48bfc13a3cafa8734171dfe"
+  integrity sha512-d690npR7MC6P0gq4npTl5n2VQeNAmUrJ90n+MHiKS7W2+xno4o3F5GDEuylSdi6EJ3VssibSGXOa1r3YXD3Mhw==
   dependencies:
-    browserslist "^4.21.4"
-
-core-util-is@~1.0.0:
-  version "1.0.3"
-  resolved "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz"
-  integrity sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==
+    browserslist "^4.21.5"
 
 cosmiconfig@^7.0.0:
   version "7.1.0"
-  resolved "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-7.1.0.tgz#1443b9afa596b670082ea46cbd8f6a62b84635f6"
   integrity sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==
   dependencies:
     "@types/parse-json" "^4.0.0"
@@ -3880,16 +3922,16 @@ cosmiconfig@^7.0.0:
     path-type "^4.0.0"
     yaml "^1.10.0"
 
-create-context-state@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.npmjs.org/create-context-state/-/create-context-state-2.0.0.tgz"
-  integrity sha512-lJsJ9XTsFLQpeXQkowyT3v2vWdxsYWoUCntUjdUCBzLqhTeGSkuCP4SrBUmkKaDDCzxJEDlmqM4HH2KD+YXVHQ==
+create-context-state@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/create-context-state/-/create-context-state-2.0.1.tgz#039e4584317631b2f2873d8f8e0fb4d759de153a"
+  integrity sha512-cHu6WHxDP6R8x4TBzrr/fNulpM5JKZa2XX/gszbnEHBpwy0/6y+/QUwAiSaAqu59YM2wJENgG0TNC6X9tr5NDQ==
   dependencies:
-    "@babel/runtime" "^7.13.10"
+    "@babel/runtime" "^7.21.0"
 
 cross-spawn@^7.0.2:
   version "7.0.3"
-  resolved "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
   integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==
   dependencies:
     path-key "^3.1.0"
@@ -3898,31 +3940,23 @@ cross-spawn@^7.0.2:
 
 crypto-random-string@^2.0.0:
   version "2.0.0"
-  resolved "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-2.0.0.tgz"
+  resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-2.0.0.tgz#ef2a7a966ec11083388369baa02ebead229b30d5"
   integrity sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==
 
 css-box-model@^1.2.0:
   version "1.2.1"
-  resolved "https://registry.npmjs.org/css-box-model/-/css-box-model-1.2.1.tgz"
+  resolved "https://registry.yarnpkg.com/css-box-model/-/css-box-model-1.2.1.tgz#59951d3b81fd6b2074a62d49444415b0d2b4d7c1"
   integrity sha512-a7Vr4Q/kd/aw96bnJG332W9V9LkJO69JRcaCYDUqjp6/z0w6VcZjgAcTbgFxEPfBgdnAwlh3iwu+hLopa+flJw==
   dependencies:
     tiny-invariant "^1.0.6"
 
 css-in-js-utils@^3.1.0:
   version "3.1.0"
-  resolved "https://registry.npmjs.org/css-in-js-utils/-/css-in-js-utils-3.1.0.tgz"
+  resolved "https://registry.yarnpkg.com/css-in-js-utils/-/css-in-js-utils-3.1.0.tgz#640ae6a33646d401fc720c54fc61c42cd76ae2bb"
   integrity sha512-fJAcud6B3rRu+KHYk+Bwf+WFL2MDCJJ1XG9x137tJQ0xYxor7XziQtuGFbWNdqrvF4Tk26O3H73nfVqXt/fW1A==
   dependencies:
     hyphenate-style-name "^1.0.3"
 
-css-tree@^1.1.2:
-  version "1.1.3"
-  resolved "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz"
-  integrity sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==
-  dependencies:
-    mdn-data "2.0.14"
-    source-map "^0.6.1"
-
 css-unit-converter@^1.1.1:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/css-unit-converter/-/css-unit-converter-1.1.2.tgz#4c77f5a1954e6dbff60695ecb214e3270436ab21"
@@ -3930,18 +3964,18 @@ css-unit-converter@^1.1.1:
 
 cssesc@^3.0.0:
   version "3.0.0"
-  resolved "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz"
+  resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
   integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
 
-csstype@^3.0.2, csstype@^3.0.6, csstype@^3.0.7, csstype@^3.1.0, csstype@^3.1.1:
-  version "3.1.1"
-  resolved "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz"
-  integrity sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==
+csstype@^3.0.2, csstype@^3.1.1, csstype@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b"
+  integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==
 
 "d3-array@2 - 3", "d3-array@2.10.0 - 3", d3-array@^3.1.6:
-  version "3.2.2"
-  resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-3.2.2.tgz#f8ac4705c5b06914a7e0025bbf8d5f1513f6a86e"
-  integrity sha512-yEEyEAbDrF8C6Ob2myOBLjwBLck1Z89jMGFee0oPsn95GqjerpaOA4ch+vc2l0FNFFwMD5N7OCSEN5eAlsUbgQ==
+  version "3.2.3"
+  resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-3.2.3.tgz#39f1f4954e4a09ff69ac597c2d61906b04e84740"
+  integrity sha512-JRHwbQQ84XuAESWhvIPaUV4/1UYTBOLiOPGWqgFDHZS1D5QN9c57FbH3QpEnQMYiOXNzKUQyGTZf+EVO7RT5TQ==
   dependencies:
     internmap "1 - 2"
 
@@ -4011,29 +4045,31 @@ d3-timer@^3.0.1:
 
 damerau-levenshtein@^1.0.8:
   version "1.0.8"
-  resolved "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz"
+  resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz#b43d286ccbd36bc5b2f7ed41caf2d0aba1f8a6e7"
   integrity sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==
 
 dash-get@^1.0.2:
   version "1.0.2"
-  resolved "https://registry.npmjs.org/dash-get/-/dash-get-1.0.2.tgz"
+  resolved "https://registry.yarnpkg.com/dash-get/-/dash-get-1.0.2.tgz#4c9e9ad5ef04c4bf9d3c9a451f6f7997298dcc7c"
   integrity sha512-4FbVrHDwfOASx7uQVxeiCTo7ggSdYZbqs8lH+WU6ViypPlDbe9y6IP5VVUDQBv9DcnyaiPT5XT0UWHgJ64zLeQ==
 
 date-fns@^2.0.1, date-fns@^2.24.0:
-  version "2.29.3"
-  resolved "https://registry.npmjs.org/date-fns/-/date-fns-2.29.3.tgz"
-  integrity sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA==
+  version "2.30.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.30.0.tgz#f367e644839ff57894ec6ac480de40cae4b0f4d0"
+  integrity sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==
+  dependencies:
+    "@babel/runtime" "^7.21.0"
 
 debug@4, debug@^4.0.0, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@^4.3.2, debug@^4.3.4:
   version "4.3.4"
-  resolved "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
   integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
   dependencies:
     ms "2.1.2"
 
 debug@^3.2.7:
   version "3.2.7"
-  resolved "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.7.tgz#72580b7e9145fb39b6676f9c5e5fb100b934179a"
   integrity sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==
   dependencies:
     ms "^2.1.1"
@@ -4052,7 +4088,7 @@ decode-named-character-reference@^1.0.0:
 
 deep-equal@^1.1.1:
   version "1.1.1"
-  resolved "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.1.tgz"
+  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.1.1.tgz#b5c98c942ceffaf7cb051e24e1434a25a2e6076a"
   integrity sha512-yd9c5AdiqVcR+JjcwUQb9DkhJc8ngNr0MahEBGvDiJw8puWab2yZlh+nkasOnZP+EGTAP6rRp2JzJhJZzvNF8g==
   dependencies:
     is-arguments "^1.0.4"
@@ -4063,15 +4099,16 @@ deep-equal@^1.1.1:
     regexp.prototype.flags "^1.2.0"
 
 deep-equal@^2.0.5:
-  version "2.2.0"
-  resolved "https://registry.npmjs.org/deep-equal/-/deep-equal-2.2.0.tgz"
-  integrity sha512-RdpzE0Hv4lhowpIUKKMJfeH6C1pXdtT1/it80ubgWqwI3qpuxUBpC1S4hnHg+zjnuOoDkzUtUCEEkG+XG5l3Mw==
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-2.2.1.tgz#c72ab22f3a7d3503a4ca87dde976fe9978816739"
+  integrity sha512-lKdkdV6EOGoVn65XaOsPdH4rMxTZOnmFyuIkMjM1i5HHCbfjC97dawgTAy0deYNfuqUqW+Q5VrVaQYtUpSd6yQ==
   dependencies:
+    array-buffer-byte-length "^1.0.0"
     call-bind "^1.0.2"
-    es-get-iterator "^1.1.2"
-    get-intrinsic "^1.1.3"
+    es-get-iterator "^1.1.3"
+    get-intrinsic "^1.2.0"
     is-arguments "^1.1.1"
-    is-array-buffer "^3.0.1"
+    is-array-buffer "^3.0.2"
     is-date-object "^1.0.5"
     is-regex "^1.1.4"
     is-shared-array-buffer "^1.0.2"
@@ -4079,7 +4116,7 @@ deep-equal@^2.0.5:
     object-is "^1.1.5"
     object-keys "^1.1.1"
     object.assign "^4.1.4"
-    regexp.prototype.flags "^1.4.3"
+    regexp.prototype.flags "^1.5.0"
     side-channel "^1.0.4"
     which-boxed-primitive "^1.0.2"
     which-collection "^1.0.1"
@@ -4087,30 +4124,30 @@ deep-equal@^2.0.5:
 
 deep-is@^0.1.3:
   version "0.1.4"
-  resolved "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz"
+  resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831"
   integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==
 
-deepmerge@^4.2.2:
-  version "4.3.0"
-  resolved "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.0.tgz"
-  integrity sha512-z2wJZXrmeHdvYJp/Ux55wIjqo81G5Bp4c+oELTW+7ar6SogWHajt5a9gO3s3IDaGSAXjDk0vlQKN3rms8ab3og==
+deepmerge@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-2.2.1.tgz#5d3ff22a01c00f645405a2fbc17d0778a1801170"
+  integrity sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==
 
-define-properties@^1.1.3, define-properties@^1.1.4:
-  version "1.1.4"
-  resolved "https://registry.npmjs.org/define-properties/-/define-properties-1.1.4.tgz"
-  integrity sha512-uckOqKcfaVvtBdsVkdPv3XjveQJsNQqmhXgRi8uhvWWuPYZCNlzT8qAyblUgNoXdHdjMTzAqeGjAoli8f+bzPA==
+deepmerge@^4.2.2, deepmerge@^4.3.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.3.1.tgz#44b5f2147cd3b00d4b56137685966f26fd25dd4a"
+  integrity sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==
+
+define-properties@^1.1.3, define-properties@^1.1.4, define-properties@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.2.0.tgz#52988570670c9eacedd8064f4a990f2405849bd5"
+  integrity sha512-xvqAVKGfT1+UAvPwKTVw/njhdQ8ZhXK4lI0bCIuCMrp2up9nPnaDftrLtmpTazqd1o+UY4zgzU+avtMbDP+ldA==
   dependencies:
     has-property-descriptors "^1.0.0"
     object-keys "^1.1.1"
 
-defined@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.npmjs.org/defined/-/defined-1.0.1.tgz"
-  integrity sha512-hsBd2qSVCRE+5PmNdHt1uzyrFu5d3RwmFDKzyNZMFq/EwDNJF7Ee5+D5oEKF0hU6LhtoUF1macFvOe4AskQC1Q==
-
 del@^4.1.1:
   version "4.1.1"
-  resolved "https://registry.npmjs.org/del/-/del-4.1.1.tgz"
+  resolved "https://registry.yarnpkg.com/del/-/del-4.1.1.tgz#9e8f117222ea44a31ff3a156c049b99052a9f0b4"
   integrity sha512-QwGuEUouP2kVwQenAsOof5Fv8K9t3D8Ca8NxcXKrIpEHjTXK5J2nXLdP+ALI1cgv8wj7KuwBhTwBkOZSJKM5XQ==
   dependencies:
     "@types/glob" "^7.1.1"
@@ -4123,14 +4160,9 @@ del@^4.1.1:
 
 delayed-stream@~1.0.0:
   version "1.0.0"
-  resolved "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz"
+  resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
   integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==
 
-delegates@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz"
-  integrity sha512-bd2L678uiWATM6m5Z1VzNCErI3jiGzt6HGY8OVICs40JQq/HALfbyNJmp0UDakEY4pMMaN0Ly5om/B1VI/+xfQ==
-
 dequal@^2.0.0:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/dequal/-/dequal-2.0.3.tgz#2644214f1997d39ed0ee0ece72335490a7ac67be"
@@ -4141,18 +4173,9 @@ detect-node-es@^1.1.0:
   resolved "https://registry.yarnpkg.com/detect-node-es/-/detect-node-es-1.1.0.tgz#163acdf643330caa0b4cd7c21e7ee7755d6fa493"
   integrity sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==
 
-detective@^5.2.1:
-  version "5.2.1"
-  resolved "https://registry.npmjs.org/detective/-/detective-5.2.1.tgz"
-  integrity sha512-v9XE1zRnz1wRtgurGu0Bs8uHKFSTdteYZNbIPFVhUZ39L/S79ppMpdmVOZAnoz1jfEFodc48n6MX483Xo3t1yw==
-  dependencies:
-    acorn-node "^1.8.2"
-    defined "^1.0.0"
-    minimist "^1.2.6"
-
 didyoumean@^1.2.2:
   version "1.2.2"
-  resolved "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz"
+  resolved "https://registry.yarnpkg.com/didyoumean/-/didyoumean-1.2.2.tgz#989346ffe9e839b4555ecf5666edea0d3e8ad037"
   integrity sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==
 
 diff@^5.0.0:
@@ -4162,31 +4185,31 @@ diff@^5.0.0:
 
 dir-glob@^3.0.1:
   version "3.0.1"
-  resolved "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz"
+  resolved "https://registry.yarnpkg.com/dir-glob/-/dir-glob-3.0.1.tgz#56dbf73d992a4a93ba1584f4534063fd2e41717f"
   integrity sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==
   dependencies:
     path-type "^4.0.0"
 
 direction@^1.0.4:
   version "1.0.4"
-  resolved "https://registry.npmjs.org/direction/-/direction-1.0.4.tgz"
+  resolved "https://registry.yarnpkg.com/direction/-/direction-1.0.4.tgz#2b86fb686967e987088caf8b89059370d4837442"
   integrity sha512-GYqKi1aH7PJXxdhTeZBFrg8vUBeKXi+cNprXsC1kpJcbcVnV9wBsrOu1cQEdG0WeQwlfHiy3XvnKfIrJ2R0NzQ==
 
 dlv@^1.1.3:
   version "1.1.3"
-  resolved "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz"
+  resolved "https://registry.yarnpkg.com/dlv/-/dlv-1.1.3.tgz#5c198a8a11453596e751494d49874bc7732f2e79"
   integrity sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==
 
 doctrine@^2.1.0:
   version "2.1.0"
-  resolved "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz"
+  resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-2.1.0.tgz#5cd01fc101621b42c4cd7f5d1a66243716d3f39d"
   integrity sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==
   dependencies:
     esutils "^2.0.2"
 
 doctrine@^3.0.0:
   version "3.0.0"
-  resolved "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz"
+  resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-3.0.0.tgz#addebead72a6574db783639dc87a121773973961"
   integrity sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==
   dependencies:
     esutils "^2.0.2"
@@ -4200,7 +4223,7 @@ dom-helpers@^3.4.0:
 
 dom-helpers@^5.0.1:
   version "5.2.1"
-  resolved "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz"
+  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902"
   integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==
   dependencies:
     "@babel/runtime" "^7.8.7"
@@ -4208,22 +4231,22 @@ dom-helpers@^5.0.1:
 
 dom-walk@^0.1.0:
   version "0.1.2"
-  resolved "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.2.tgz"
+  resolved "https://registry.yarnpkg.com/dom-walk/-/dom-walk-0.1.2.tgz#0c548bef048f4d1f2a97249002236060daa3fd84"
   integrity sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w==
 
 dom4@^2.1.5:
   version "2.1.6"
-  resolved "https://registry.npmjs.org/dom4/-/dom4-2.1.6.tgz"
+  resolved "https://registry.yarnpkg.com/dom4/-/dom4-2.1.6.tgz#c90df07134aa0dbd81ed4d6ba1237b36fc164770"
   integrity sha512-JkCVGnN4ofKGbjf5Uvc8mmxaATIErKQKSgACdBXpsQ3fY6DlIpAyWfiBSrGkttATssbDCp3psiAKWXk5gmjycA==
 
 domino@^2.1.6:
   version "2.1.6"
-  resolved "https://registry.npmjs.org/domino/-/domino-2.1.6.tgz"
+  resolved "https://registry.yarnpkg.com/domino/-/domino-2.1.6.tgz#fe4ace4310526e5e7b9d12c7de01b7f485a57ffe"
   integrity sha512-3VdM/SXBZX2omc9JF9nOPCtDaYQ67BGp5CoLpIQlO2KCAPETs8TcDHacF26jXadGbvUteZzRTeos2fhID5+ucQ==
 
 dot-case@^3.0.4:
   version "3.0.4"
-  resolved "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz"
+  resolved "https://registry.yarnpkg.com/dot-case/-/dot-case-3.0.4.tgz#9b2b670d00a431667a8a75ba29cd1b98809ce751"
   integrity sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==
   dependencies:
     no-case "^3.0.4"
@@ -4235,90 +4258,83 @@ dotenv@^16.0.3:
   integrity sha512-7GO6HghkA5fYG9TYnNxi14/7K9f5occMlp3zXAuSxn7CKCxt9xbNWG7yF8hTCSUchlfWSe3uLmlPfigevRItzQ==
 
 ejs@^3.1.6:
-  version "3.1.8"
-  resolved "https://registry.npmjs.org/ejs/-/ejs-3.1.8.tgz"
-  integrity sha512-/sXZeMlhS0ArkfX2Aw780gJzXSMPnKjtspYZv+f3NiKLlubezAHDU5+9xz6gd3/NhG3txQCo6xlglmTS+oTGEQ==
+  version "3.1.9"
+  resolved "https://registry.yarnpkg.com/ejs/-/ejs-3.1.9.tgz#03c9e8777fe12686a9effcef22303ca3d8eeb361"
+  integrity sha512-rC+QVNMJWv+MtPgkt0y+0rVEIdbtxVADApW9JXrUVlzHetgcyczP/E7DJmWJ4fJCZF2cPcBk0laWO9ZHMG3DmQ==
   dependencies:
     jake "^10.8.5"
 
 electron-to-chromium@^1.4.284:
-  version "1.4.289"
-  resolved "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.289.tgz"
-  integrity sha512-relLdMfPBxqGCxy7Gyfm1HcbRPcFUJdlgnCPVgQ23sr1TvUrRJz0/QPoGP0+x41wOVSTN/Wi3w6YDgHiHJGOzg==
+  version "1.4.382"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.382.tgz#87e659b0f0d5f7b19759038871bac0a327191f82"
+  integrity sha512-czMavlW52VIPgutbVL9JnZIZuFijzsG1ww/1z2Otu1r1q+9Qe2bTsH3My3sZarlvwyqHM6+mnZfEnt2Vr4dsIg==
 
 emoji-regex@^8.0.0:
   version "8.0.0"
-  resolved "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz"
+  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
   integrity sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==
 
 emoji-regex@^9.2.2:
   version "9.2.2"
-  resolved "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz"
+  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-9.2.2.tgz#840c8803b0d8047f4ff0cf963176b32d4ef3ed72"
   integrity sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==
 
-emojibase-data@^6.1.0:
+emojibase-data@^6.2.0:
   version "6.2.0"
-  resolved "https://registry.npmjs.org/emojibase-data/-/emojibase-data-6.2.0.tgz"
+  resolved "https://registry.yarnpkg.com/emojibase-data/-/emojibase-data-6.2.0.tgz#db6c75c36905284fa623f4aa5f468d2be6ed364a"
   integrity sha512-SWKaXD2QeQs06IE7qfJftsI5924Dqzp+V9xaa5RzZIEWhmlrG6Jt2iKwfgOPHu+5S8MEtOI7GdpKsXj46chXOw==
 
 emojibase-regex@^5.1.1:
   version "5.1.3"
-  resolved "https://registry.npmjs.org/emojibase-regex/-/emojibase-regex-5.1.3.tgz"
+  resolved "https://registry.yarnpkg.com/emojibase-regex/-/emojibase-regex-5.1.3.tgz#f0ef621ed6ec624becd2326f999fd4ea01b94554"
   integrity sha512-gT8T9LxLA8VJdI+8KQtyykB9qKzd7WuUL3M2yw6y9tplFeufOUANg3UKVaKUvkMcRNvZsSElWhxcJrx8WPE12g==
 
-emojibase-regex@^6.0.0:
+emojibase-regex@^6.0.1:
   version "6.0.1"
-  resolved "https://registry.npmjs.org/emojibase-regex/-/emojibase-regex-6.0.1.tgz"
+  resolved "https://registry.yarnpkg.com/emojibase-regex/-/emojibase-regex-6.0.1.tgz#dc0b33d05c02f045ea44795d453698b205d41f0f"
   integrity sha512-Mj1UT6IIk4j91yMFE0QetpUYcmsr5ZDkkOIMSGafhIgC086mBMaCh2Keaykx8YEllmV7hmx5zdANDzCYBYAVDw==
 
 emojibase@^5.1.0:
   version "5.2.0"
-  resolved "https://registry.npmjs.org/emojibase/-/emojibase-5.2.0.tgz"
+  resolved "https://registry.yarnpkg.com/emojibase/-/emojibase-5.2.0.tgz#3b53899f9a9f8aae1280db446c83ce28f1d286d5"
   integrity sha512-5T02oTJaWpScAtYbukKVc8vQ1367MyfVtFHUMoOVZ9/r1kFcbYqjSktD56TICBAeyW9uc1t+7qQuXEtntM6p5A==
 
-emojibase@^6.0.0:
+emojibase@^6.1.0:
   version "6.1.0"
-  resolved "https://registry.npmjs.org/emojibase/-/emojibase-6.1.0.tgz"
+  resolved "https://registry.yarnpkg.com/emojibase/-/emojibase-6.1.0.tgz#c3bc281e998a0e06398416090c23bac8c5ed3ee8"
   integrity sha512-1GkKJPXP6tVkYJHOBSJHoGOr/6uaDxZ9xJ6H7m6PfdGXTmQgbALHLWaVRY4Gi/qf5x/gT/NUXLPuSHYLqtLtrQ==
 
 emojis-list@^3.0.0:
   version "3.0.0"
-  resolved "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz"
+  resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78"
   integrity sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==
 
 enquirer@^2.3.5:
   version "2.3.6"
-  resolved "https://registry.npmjs.org/enquirer/-/enquirer-2.3.6.tgz"
+  resolved "https://registry.yarnpkg.com/enquirer/-/enquirer-2.3.6.tgz#2a7fe5dd634a1e4125a975ec994ff5456dc3734d"
   integrity sha512-yjNnPr315/FjS4zIsUxYguYUPP2e1NK4d7E7ZOLiyYCcbFBiTMyID+2wvm2w6+pZ/odMA7cRkjhsPbltwBOrLg==
   dependencies:
     ansi-colors "^4.1.1"
 
 error-ex@^1.3.1:
   version "1.3.2"
-  resolved "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz"
+  resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf"
   integrity sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==
   dependencies:
     is-arrayish "^0.2.1"
 
-error-stack-parser@^2.0.6:
-  version "2.1.4"
-  resolved "https://registry.npmjs.org/error-stack-parser/-/error-stack-parser-2.1.4.tgz"
-  integrity sha512-Sk5V6wVazPhq5MhpO+AUxJn5x7XSXGl1R93Vn7i+zS15KDVxQijejNCrz8340/2bgLBjR9GtEG8ZVKONDjcqGQ==
-  dependencies:
-    stackframe "^1.3.4"
-
 es-abstract@^1.19.0, es-abstract@^1.20.4:
-  version "1.21.1"
-  resolved "https://registry.npmjs.org/es-abstract/-/es-abstract-1.21.1.tgz"
-  integrity sha512-QudMsPOz86xYz/1dG1OuGBKOELjCh99IIWHLzy5znUB6j8xG2yMA7bfTV86VSqKF+Y/H08vQPR+9jyXpuC6hfg==
+  version "1.21.2"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.21.2.tgz#a56b9695322c8a185dc25975aa3b8ec31d0e7eff"
+  integrity sha512-y/B5POM2iBnIxCiernH1G7rC9qQoM77lLIMQLuob0zhp8C56Po81+2Nj0WFKnd0pNReDTnkYryc+zhOzpEIROg==
   dependencies:
+    array-buffer-byte-length "^1.0.0"
     available-typed-arrays "^1.0.5"
     call-bind "^1.0.2"
     es-set-tostringtag "^2.0.1"
     es-to-primitive "^1.2.1"
-    function-bind "^1.1.1"
     function.prototype.name "^1.1.5"
-    get-intrinsic "^1.1.3"
+    get-intrinsic "^1.2.0"
     get-symbol-description "^1.0.0"
     globalthis "^1.0.3"
     gopd "^1.0.1"
@@ -4326,8 +4342,8 @@ es-abstract@^1.19.0, es-abstract@^1.20.4:
     has-property-descriptors "^1.0.0"
     has-proto "^1.0.1"
     has-symbols "^1.0.3"
-    internal-slot "^1.0.4"
-    is-array-buffer "^3.0.1"
+    internal-slot "^1.0.5"
+    is-array-buffer "^3.0.2"
     is-callable "^1.2.7"
     is-negative-zero "^2.0.2"
     is-regex "^1.1.4"
@@ -4335,20 +4351,21 @@ es-abstract@^1.19.0, es-abstract@^1.20.4:
     is-string "^1.0.7"
     is-typed-array "^1.1.10"
     is-weakref "^1.0.2"
-    object-inspect "^1.12.2"
+    object-inspect "^1.12.3"
     object-keys "^1.1.1"
     object.assign "^4.1.4"
     regexp.prototype.flags "^1.4.3"
     safe-regex-test "^1.0.0"
+    string.prototype.trim "^1.2.7"
     string.prototype.trimend "^1.0.6"
     string.prototype.trimstart "^1.0.6"
     typed-array-length "^1.0.4"
     unbox-primitive "^1.0.2"
     which-typed-array "^1.1.9"
 
-es-get-iterator@^1.1.2:
+es-get-iterator@^1.1.3:
   version "1.1.3"
-  resolved "https://registry.npmjs.org/es-get-iterator/-/es-get-iterator-1.1.3.tgz"
+  resolved "https://registry.yarnpkg.com/es-get-iterator/-/es-get-iterator-1.1.3.tgz#3ef87523c5d464d41084b2c3c9c214f1199763d6"
   integrity sha512-sPZmqHBe6JIiTfN5q2pEi//TwxmAFHwj/XEuYjTuse78i8KxaqMTTzxPoFKuzRpDpTJ+0NAbpfenkmH2rePtuw==
   dependencies:
     call-bind "^1.0.2"
@@ -4363,7 +4380,7 @@ es-get-iterator@^1.1.2:
 
 es-set-tostringtag@^2.0.1:
   version "2.0.1"
-  resolved "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.1.tgz"
+  resolved "https://registry.yarnpkg.com/es-set-tostringtag/-/es-set-tostringtag-2.0.1.tgz#338d502f6f674301d710b80c8592de8a15f09cd8"
   integrity sha512-g3OMbtlwY3QewlqAiMLI47KywjWZoEytKr8pf6iTC8uJq5bIAH52Z9pnQ8pVL6whrCto53JZDuUIsifGeLorTg==
   dependencies:
     get-intrinsic "^1.1.3"
@@ -4372,14 +4389,14 @@ es-set-tostringtag@^2.0.1:
 
 es-shim-unscopables@^1.0.0:
   version "1.0.0"
-  resolved "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.0.0.tgz"
+  resolved "https://registry.yarnpkg.com/es-shim-unscopables/-/es-shim-unscopables-1.0.0.tgz#702e632193201e3edf8713635d083d378e510241"
   integrity sha512-Jm6GPcCdC30eMLbZ2x8z2WuRwAws3zTBBKuusffYVUrNj/GVSUAZ+xKMaUpfNDR5IbyNA5LJbaecoUVbmUcB1w==
   dependencies:
     has "^1.0.3"
 
 es-to-primitive@^1.2.1:
   version "1.2.1"
-  resolved "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz"
+  resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.2.1.tgz#e55cd4c9cdc188bcefb03b366c736323fc5c898a"
   integrity sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==
   dependencies:
     is-callable "^1.1.4"
@@ -4388,22 +4405,22 @@ es-to-primitive@^1.2.1:
 
 escalade@^3.1.1:
   version "3.1.1"
-  resolved "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz"
+  resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40"
   integrity sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==
 
 escape-string-regexp@^1.0.5:
   version "1.0.5"
-  resolved "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz"
+  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
   integrity sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==
 
 escape-string-regexp@^4.0.0:
   version "4.0.0"
-  resolved "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz"
+  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz#14ba83a5d373e3d311e5afca29cf5bfad965bf34"
   integrity sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==
 
 eslint-config-next@12.2.2:
   version "12.2.2"
-  resolved "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-12.2.2.tgz"
+  resolved "https://registry.yarnpkg.com/eslint-config-next/-/eslint-config-next-12.2.2.tgz#4bb996026e118071849bc4011283a160ad5bde46"
   integrity sha512-oJhWBLC4wDYYUFv/5APbjHUFd0QRFCojMdj/QnMoOEktmeTvwnnoA8F8uaXs0fQgsaTK0tbUxBRv9/Y4/rpxOA==
   dependencies:
     "@next/eslint-plugin-next" "12.2.2"
@@ -4418,7 +4435,7 @@ eslint-config-next@12.2.2:
 
 eslint-config-next@13.0.0:
   version "13.0.0"
-  resolved "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-13.0.0.tgz"
+  resolved "https://registry.yarnpkg.com/eslint-config-next/-/eslint-config-next-13.0.0.tgz#d533ee1dbd6576fd3759ba4db4d5a6c4e039c242"
   integrity sha512-y2nqWS2tycWySdVhb+rhp6CuDmDazGySqkzzQZf3UTyfHyC7og1m5m/AtMFwCo5mtvDqvw1BENin52kV9733lg==
   dependencies:
     "@next/eslint-plugin-next" "13.0.0"
@@ -4432,20 +4449,20 @@ eslint-config-next@13.0.0:
     eslint-plugin-react-hooks "^4.5.0"
 
 eslint-config-prettier@^8.3.0:
-  version "8.6.0"
-  resolved "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.6.0.tgz"
-  integrity sha512-bAF0eLpLVqP5oEVUFKpMA+NnRFICwn9X8B5jrR9FcqnYBuPbqWEjTEspPWMj5ye6czoSLDweCzSo3Ko7gGrZaA==
+  version "8.8.0"
+  resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-8.8.0.tgz#bfda738d412adc917fd7b038857110efe98c9348"
+  integrity sha512-wLbQiFre3tdGgpDv67NQKnJuTlcUVYHas3k+DZCc2U2BadthoEY4B7hLPvAxaqdyOGCzuLfii2fqGph10va7oA==
 
 eslint-config-turbo@latest:
-  version "0.0.8"
-  resolved "https://registry.npmjs.org/eslint-config-turbo/-/eslint-config-turbo-0.0.8.tgz"
-  integrity sha512-ijj6uv0QX2kWahg3OYnTK1/q4MueXsqY2uE4MP9yeUA5CzVhL7GU+biKlv1BfMMqPltixHUcpZoW4yyNLCnMiw==
+  version "1.9.3"
+  resolved "https://registry.yarnpkg.com/eslint-config-turbo/-/eslint-config-turbo-1.9.3.tgz#17299666393d5060d4b894c1e869fc8ef6e3dd8f"
+  integrity sha512-QG6jxFQkrGSpQqlFKefPdtgUfr20EbU0s4tGGIuGFOcPuJEdsY6VYZpZUxNJvmMcTGqPgMyOPjAFBKhy/DPHLA==
   dependencies:
-    eslint-plugin-turbo "0.0.8"
+    eslint-plugin-turbo "1.9.3"
 
 eslint-import-resolver-node@^0.3.6, eslint-import-resolver-node@^0.3.7:
   version "0.3.7"
-  resolved "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.7.tgz"
+  resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.7.tgz#83b375187d412324a1963d84fa664377a23eb4d7"
   integrity sha512-gozW2blMLJCeFpBwugLTGyvVjNoeo1knonXAcatC6bjPBZitotxdWf7Gimr25N4c0AAOo4eOUfaG82IJPDpqCA==
   dependencies:
     debug "^3.2.7"
@@ -4454,7 +4471,7 @@ eslint-import-resolver-node@^0.3.6, eslint-import-resolver-node@^0.3.7:
 
 eslint-import-resolver-typescript@^2.7.1:
   version "2.7.1"
-  resolved "https://registry.npmjs.org/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-2.7.1.tgz"
+  resolved "https://registry.yarnpkg.com/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-2.7.1.tgz#a90a4a1c80da8d632df25994c4c5fdcdd02b8751"
   integrity sha512-00UbgGwV8bSgUv34igBDbTOtKhqoRMy9bFjNehT40bXg6585PNIct8HhXZ0SybqB9rWtXj9crcku8ndDn/gIqQ==
   dependencies:
     debug "^4.3.4"
@@ -4464,15 +4481,15 @@ eslint-import-resolver-typescript@^2.7.1:
     tsconfig-paths "^3.14.1"
 
 eslint-module-utils@^2.7.4:
-  version "2.7.4"
-  resolved "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.7.4.tgz"
-  integrity sha512-j4GT+rqzCoRKHwURX7pddtIPGySnX9Si/cgMI5ztrcqOPtk5dDEeZ34CQVPphnqkJytlc97Vuk05Um2mJ3gEQA==
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.8.0.tgz#e439fee65fc33f6bba630ff621efc38ec0375c49"
+  integrity sha512-aWajIYfsqCKRDgUfjEXNN/JlrzauMuSEy5sbd7WXbtW3EH6A6MpwEh42c7qD+MqQo9QMJ6fWLAeIJynx0g6OAw==
   dependencies:
     debug "^3.2.7"
 
 eslint-plugin-import@^2.26.0:
   version "2.27.5"
-  resolved "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.27.5.tgz"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.27.5.tgz#876a6d03f52608a3e5bb439c2550588e51dd6c65"
   integrity sha512-LmEt3GVofgiGuiE+ORpnvP+kAm3h6MLZJ4Q5HCyHADofsb4VzXFsRiWj3c0OFiV+3DWFh0qg3v9gcPlfc3zRow==
   dependencies:
     array-includes "^3.1.6"
@@ -4493,7 +4510,7 @@ eslint-plugin-import@^2.26.0:
 
 eslint-plugin-jsx-a11y@^6.5.1:
   version "6.7.1"
-  resolved "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.7.1.tgz"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.7.1.tgz#fca5e02d115f48c9a597a6894d5bcec2f7a76976"
   integrity sha512-63Bog4iIethyo8smBklORknVjB0T2dwB8Mr/hIC+fBS0uyHdYYpzM/Ed+YC8VxTjlXHEWFOdmgwcDn1U2L9VCA==
   dependencies:
     "@babel/runtime" "^7.20.7"
@@ -4515,12 +4532,12 @@ eslint-plugin-jsx-a11y@^6.5.1:
 
 eslint-plugin-react-hooks@^4.5.0:
   version "4.6.0"
-  resolved "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.0.tgz"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.0.tgz#4c3e697ad95b77e93f8646aaa1630c1ba607edd3"
   integrity sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==
 
 eslint-plugin-react@7.31.8:
   version "7.31.8"
-  resolved "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.31.8.tgz"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.31.8.tgz#3a4f80c10be1bcbc8197be9e8b641b2a3ef219bf"
   integrity sha512-5lBTZmgQmARLLSYiwI71tiGVTLUuqXantZM6vlSY39OaDSV0M7+32K5DnLkmFrwTe+Ksz0ffuLUC91RUviVZfw==
   dependencies:
     array-includes "^3.1.5"
@@ -4540,7 +4557,7 @@ eslint-plugin-react@7.31.8:
 
 eslint-plugin-react@^7.29.4, eslint-plugin-react@^7.31.7:
   version "7.32.2"
-  resolved "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.32.2.tgz"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.32.2.tgz#e71f21c7c265ebce01bcbc9d0955170c55571f10"
   integrity sha512-t2fBMa+XzonrrNkyVirzKlvn5RXzzPwRHtMvLAtVZrt8oxgnTQaYbU6SXTOO1mwQgp1y5+toMSKInnzGr0Knqg==
   dependencies:
     array-includes "^3.1.6"
@@ -4559,59 +4576,52 @@ eslint-plugin-react@^7.29.4, eslint-plugin-react@^7.31.7:
     semver "^6.3.0"
     string.prototype.matchall "^4.0.8"
 
-eslint-plugin-turbo@0.0.8:
-  version "0.0.8"
-  resolved "https://registry.npmjs.org/eslint-plugin-turbo/-/eslint-plugin-turbo-0.0.8.tgz"
-  integrity sha512-pExSCmjWw/KFKb3/0PVqxiWb30FbcwDEf6kKv3alvNBSVEzDHalyAGHc9klbLSG+nFmbkfNE3Ky/UHDryCqt8g==
+eslint-plugin-turbo@1.9.3:
+  version "1.9.3"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-turbo/-/eslint-plugin-turbo-1.9.3.tgz#b2c21d849bf4a395e92fcc7705bb612af6fbe6e8"
+  integrity sha512-ZsRtksdzk3v+z5/I/K4E50E4lfZ7oYmLX395gkrUMBz4/spJlYbr+GC8hP9oVNLj9s5Pvnm9rLv/zoj5PVYaVw==
 
 eslint-scope@^5.1.1:
   version "5.1.1"
-  resolved "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz"
+  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-5.1.1.tgz#e786e59a66cb92b3f6c1fb0d508aab174848f48c"
   integrity sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==
   dependencies:
     esrecurse "^4.3.0"
     estraverse "^4.1.1"
 
-eslint-scope@^7.1.1:
-  version "7.1.1"
-  resolved "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.1.1.tgz"
-  integrity sha512-QKQM/UXpIiHcLqJ5AOyIW7XZmzjkzQXYE54n1++wb0u9V/abW3l9uQnxX8Z5Xd18xyKIMTUAyQ0k1e8pz6LUrw==
+eslint-scope@^7.2.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-7.2.0.tgz#f21ebdafda02352f103634b96dd47d9f81ca117b"
+  integrity sha512-DYj5deGlHBfMt15J7rdtyKNq/Nqlv5KfU4iodrQ019XESsRnwXH9KAE0y3cwtUHDo2ob7CypAnCqefh6vioWRw==
   dependencies:
     esrecurse "^4.3.0"
     estraverse "^5.2.0"
 
 eslint-utils@^2.1.0:
   version "2.1.0"
-  resolved "https://registry.npmjs.org/eslint-utils/-/eslint-utils-2.1.0.tgz"
+  resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-2.1.0.tgz#d2de5e03424e707dc10c74068ddedae708741b27"
   integrity sha512-w94dQYoauyvlDc43XnGB8lU3Zt713vNChgt4EWwhXAP2XkBvndfxF0AgIqKOOasjPIPzj9JqgwkwbCYD0/V3Zg==
   dependencies:
     eslint-visitor-keys "^1.1.0"
 
-eslint-utils@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.npmjs.org/eslint-utils/-/eslint-utils-3.0.0.tgz"
-  integrity sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==
-  dependencies:
-    eslint-visitor-keys "^2.0.0"
-
 eslint-visitor-keys@^1.1.0, eslint-visitor-keys@^1.3.0:
   version "1.3.0"
-  resolved "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz#30ebd1ef7c2fdff01c3a4f151044af25fab0523e"
   integrity sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==
 
 eslint-visitor-keys@^2.0.0:
   version "2.1.0"
-  resolved "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz#f65328259305927392c938ed44eb0a5c9b2bd303"
   integrity sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==
 
-eslint-visitor-keys@^3.3.0:
-  version "3.3.0"
-  resolved "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.3.0.tgz"
-  integrity sha512-mQ+suqKJVyeuwGYHAdjMFqjCyfl8+Ldnxuyp3ldiMBFKkvytrXUZWaiPCEav8qDHKty44bD+qV1IP4T+w+xXRA==
+eslint-visitor-keys@^3.3.0, eslint-visitor-keys@^3.4.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.4.0.tgz#c7f0f956124ce677047ddbc192a68f999454dedc"
+  integrity sha512-HPpKPUBQcAsZOsHAFwTtIKcYlCje62XB7SEAcxjtmW6TD1WVpkS6i6/hOVtTZIl4zGj/mBqpFVGvaDneik+VoQ==
 
 eslint@^7.23.0, eslint@^7.32.0:
   version "7.32.0"
-  resolved "https://registry.npmjs.org/eslint/-/eslint-7.32.0.tgz"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-7.32.0.tgz#c6d328a14be3fb08c8d1d21e12c02fdb7a2a812d"
   integrity sha512-VHZ8gX+EDfz+97jGcgyGCyRia/dPOd6Xh9yPv8Bl1+SoaIwD+a/vlrOmGRUyOYu7MwUhc7CxqeaDZU13S4+EpA==
   dependencies:
     "@babel/code-frame" "7.12.11"
@@ -4656,11 +4666,14 @@ eslint@^7.23.0, eslint@^7.32.0:
     v8-compile-cache "^2.0.3"
 
 eslint@^8.31.0:
-  version "8.33.0"
-  resolved "https://registry.npmjs.org/eslint/-/eslint-8.33.0.tgz"
-  integrity sha512-WjOpFQgKK8VrCnAtl8We0SUOy/oVZ5NHykyMiagV1M9r8IFpIJX7DduK6n1mpfhlG7T1NLWm2SuD8QB7KFySaA==
+  version "8.39.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.39.0.tgz#7fd20a295ef92d43809e914b70c39fd5a23cf3f1"
+  integrity sha512-mwiok6cy7KTW7rBpo05k6+p4YVZByLNjAZ/ACB9DRCu4YDRwjXI01tWHp6KAUWelsBetTxKK/2sHB0vdS8Z2Og==
   dependencies:
-    "@eslint/eslintrc" "^1.4.1"
+    "@eslint-community/eslint-utils" "^4.2.0"
+    "@eslint-community/regexpp" "^4.4.0"
+    "@eslint/eslintrc" "^2.0.2"
+    "@eslint/js" "8.39.0"
     "@humanwhocodes/config-array" "^0.11.8"
     "@humanwhocodes/module-importer" "^1.0.1"
     "@nodelib/fs.walk" "^1.2.8"
@@ -4670,11 +4683,10 @@ eslint@^8.31.0:
     debug "^4.3.2"
     doctrine "^3.0.0"
     escape-string-regexp "^4.0.0"
-    eslint-scope "^7.1.1"
-    eslint-utils "^3.0.0"
-    eslint-visitor-keys "^3.3.0"
-    espree "^9.4.0"
-    esquery "^1.4.0"
+    eslint-scope "^7.2.0"
+    eslint-visitor-keys "^3.4.0"
+    espree "^9.5.1"
+    esquery "^1.4.2"
     esutils "^2.0.2"
     fast-deep-equal "^3.1.3"
     file-entry-cache "^6.0.1"
@@ -4695,71 +4707,70 @@ eslint@^8.31.0:
     minimatch "^3.1.2"
     natural-compare "^1.4.0"
     optionator "^0.9.1"
-    regexpp "^3.2.0"
     strip-ansi "^6.0.1"
     strip-json-comments "^3.1.0"
     text-table "^0.2.0"
 
 espree@^7.3.0, espree@^7.3.1:
   version "7.3.1"
-  resolved "https://registry.npmjs.org/espree/-/espree-7.3.1.tgz"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-7.3.1.tgz#f2df330b752c6f55019f8bd89b7660039c1bbbb6"
   integrity sha512-v3JCNCE64umkFpmkFGqzVKsOT0tN1Zr+ueqLZfpV1Ob8e+CEgPWa+OxCoGH3tnhimMKIaBm4m/vaRpJ/krRz2g==
   dependencies:
     acorn "^7.4.0"
     acorn-jsx "^5.3.1"
     eslint-visitor-keys "^1.3.0"
 
-espree@^9.4.0:
-  version "9.4.1"
-  resolved "https://registry.npmjs.org/espree/-/espree-9.4.1.tgz"
-  integrity sha512-XwctdmTO6SIvCzd9810yyNzIrOrqNYV9Koizx4C/mRhf9uq0o4yHoCEU/670pOxOL/MSraektvSAji79kX90Vg==
+espree@^9.5.1:
+  version "9.5.1"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-9.5.1.tgz#4f26a4d5f18905bf4f2e0bd99002aab807e96dd4"
+  integrity sha512-5yxtHSZXRSW5pvv3hAlXM5+/Oswi1AUFqBmbibKb5s6bp3rGIDkyXU6xCoyuuLhijr4SFwPrXRoZjz0AZDN9tg==
   dependencies:
     acorn "^8.8.0"
     acorn-jsx "^5.3.2"
-    eslint-visitor-keys "^3.3.0"
+    eslint-visitor-keys "^3.4.0"
 
 esprima@^4.0.0:
   version "4.0.1"
-  resolved "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz"
+  resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
   integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==
 
-esquery@^1.4.0:
-  version "1.4.0"
-  resolved "https://registry.npmjs.org/esquery/-/esquery-1.4.0.tgz"
-  integrity sha512-cCDispWt5vHHtwMY2YrAQ4ibFkAL8RbH5YGBnZBc90MolvvfkkQcJro/aZiAQUlQ3qgrYS6D6v8Gc5G5CQsc9w==
+esquery@^1.4.0, esquery@^1.4.2:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.5.0.tgz#6ce17738de8577694edd7361c57182ac8cb0db0b"
+  integrity sha512-YQLXUplAwJgCydQ78IMJywZCceoqk1oH01OERdSAJc/7U2AylwjhSCLDEtqwg811idIS/9fIU5GjG73IgjKMVg==
   dependencies:
     estraverse "^5.1.0"
 
 esrecurse@^4.3.0:
   version "4.3.0"
-  resolved "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz"
+  resolved "https://registry.yarnpkg.com/esrecurse/-/esrecurse-4.3.0.tgz#7ad7964d679abb28bee72cec63758b1c5d2c9921"
   integrity sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==
   dependencies:
     estraverse "^5.2.0"
 
 estraverse@^4.1.1:
   version "4.3.0"
-  resolved "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz"
+  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.3.0.tgz#398ad3f3c5a24948be7725e83d11a7de28cdbd1d"
   integrity sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==
 
 estraverse@^5.1.0, estraverse@^5.2.0, estraverse@^5.3.0:
   version "5.3.0"
-  resolved "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz"
+  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-5.3.0.tgz#2eea5290702f26ab8fe5370370ff86c965d21123"
   integrity sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==
 
 estree-walker@^1.0.1:
   version "1.0.1"
-  resolved "https://registry.npmjs.org/estree-walker/-/estree-walker-1.0.1.tgz"
+  resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-1.0.1.tgz#31bc5d612c96b704106b477e6dd5d8aa138cb700"
   integrity sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg==
 
 estree-walker@^2.0.2:
   version "2.0.2"
-  resolved "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz"
+  resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-2.0.2.tgz#52f010178c2a4c117a7757cfe942adb7d2da4cac"
   integrity sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==
 
 esutils@^2.0.2:
   version "2.0.3"
-  resolved "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz"
+  resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
   integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==
 
 eventemitter3@^4.0.1:
@@ -4774,12 +4785,12 @@ extend@^3.0.0:
 
 extract-domain@2.2.1:
   version "2.2.1"
-  resolved "https://registry.npmjs.org/extract-domain/-/extract-domain-2.2.1.tgz"
+  resolved "https://registry.yarnpkg.com/extract-domain/-/extract-domain-2.2.1.tgz#1deeae633a5cbf05ae2fd7b3ff87cb98cbc4cb5b"
   integrity sha512-lOq1adCJha0tFFBci4quxC4XLa6+Rs2WgAwTo9qbO9OsElvJmGgCvOzmHo/yg5CiqeP4+sHjkXYGkrCcIEprMg==
 
 fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   version "3.1.3"
-  resolved "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz"
+  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
 fast-equals@^4.0.3:
@@ -4789,7 +4800,7 @@ fast-equals@^4.0.3:
 
 fast-glob@^3.2.12, fast-glob@^3.2.9:
   version "3.2.12"
-  resolved "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz"
+  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.12.tgz#7f39ec99c2e6ab030337142da9e0c18f37afae80"
   integrity sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==
   dependencies:
     "@nodelib/fs.stat" "^2.0.2"
@@ -4800,67 +4811,52 @@ fast-glob@^3.2.12, fast-glob@^3.2.9:
 
 fast-json-stable-stringify@^2.0.0, fast-json-stable-stringify@^2.1.0:
   version "2.1.0"
-  resolved "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz"
+  resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633"
   integrity sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==
 
 fast-levenshtein@^2.0.6:
   version "2.0.6"
-  resolved "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz"
+  resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
   integrity sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==
 
-fast-loops@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.npmjs.org/fast-loops/-/fast-loops-1.1.3.tgz"
-  integrity sha512-8EZzEP0eKkEEVX+drtd9mtuQ+/QrlfW/5MlwcwK5Nds6EkZ/tRzEexkzUY2mIssnAyVLT+TKHuRXmFNNXYUd6g==
-
-fast-shallow-equal@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/fast-shallow-equal/-/fast-shallow-equal-1.0.0.tgz"
-  integrity sha512-HPtaa38cPgWvaCFmRNhlc6NG7pv6NUHqjPgVAkWGoB9mQMwYB27/K0CvOM5Czy+qpT3e8XJ6Q4aPAnzpNpzNaw==
-
-fastest-stable-stringify@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.npmjs.org/fastest-stable-stringify/-/fastest-stable-stringify-2.0.2.tgz"
-  integrity sha512-bijHueCGd0LqqNK9b5oCMHc0MluJAx0cwqASgbWMvkO01lCYgIhacVRLcaDz3QnyYIRNJRDwMb41VuT6pHJ91Q==
-
 fastq@^1.6.0:
   version "1.15.0"
-  resolved "https://registry.npmjs.org/fastq/-/fastq-1.15.0.tgz"
+  resolved "https://registry.yarnpkg.com/fastq/-/fastq-1.15.0.tgz#d04d07c6a2a68fe4599fea8d2e103a937fae6b3a"
   integrity sha512-wBrocU2LCXXa+lWBt8RoIRD89Fi8OdABODa/kEnyeyjS5aZO5/GNvI5sEINADqP/h8M29UHTHUb53sUu5Ihqdw==
   dependencies:
     reusify "^1.0.4"
 
 file-entry-cache@^6.0.1:
   version "6.0.1"
-  resolved "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz"
+  resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-6.0.1.tgz#211b2dd9659cb0394b073e7323ac3c933d522027"
   integrity sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==
   dependencies:
     flat-cache "^3.0.4"
 
 file-selector@^0.6.0:
   version "0.6.0"
-  resolved "https://registry.npmjs.org/file-selector/-/file-selector-0.6.0.tgz"
+  resolved "https://registry.yarnpkg.com/file-selector/-/file-selector-0.6.0.tgz#fa0a8d9007b829504db4d07dd4de0310b65287dc"
   integrity sha512-QlZ5yJC0VxHxQQsQhXvBaC7VRJ2uaxTf+Tfpu4Z/OcVQJVpZO+DGU0rkoVW5ce2SccxugvpBJoMvUs59iILYdw==
   dependencies:
     tslib "^2.4.0"
 
 filelist@^1.0.1:
   version "1.0.4"
-  resolved "https://registry.npmjs.org/filelist/-/filelist-1.0.4.tgz"
+  resolved "https://registry.yarnpkg.com/filelist/-/filelist-1.0.4.tgz#f78978a1e944775ff9e62e744424f215e58352b5"
   integrity sha512-w1cEuf3S+DrLCQL7ET6kz+gmlJdbq9J7yXCSjK/OZCPA+qEN1WyF4ZAf0YYJa4/shHJra2t/d/r8SV4Ji+x+8Q==
   dependencies:
     minimatch "^5.0.1"
 
 fill-range@^7.0.1:
   version "7.0.1"
-  resolved "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40"
   integrity sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==
   dependencies:
     to-regex-range "^5.0.1"
 
 find-cache-dir@^3.3.1:
   version "3.3.2"
-  resolved "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.2.tgz"
+  resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-3.3.2.tgz#b30c5b6eff0730731aea9bbd9dbecbd80256d64b"
   integrity sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==
   dependencies:
     commondir "^1.0.1"
@@ -4869,12 +4865,12 @@ find-cache-dir@^3.3.1:
 
 find-root@^1.1.0:
   version "1.1.0"
-  resolved "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz"
+  resolved "https://registry.yarnpkg.com/find-root/-/find-root-1.1.0.tgz#abcfc8ba76f708c42a97b3d685b7e9450bfb9ce4"
   integrity sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==
 
 find-up@^4.0.0:
   version "4.1.0"
-  resolved "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-4.1.0.tgz#97afe7d6cdc0bc5928584b7c8d7b16e8a9aa5d19"
   integrity sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==
   dependencies:
     locate-path "^5.0.0"
@@ -4882,7 +4878,7 @@ find-up@^4.0.0:
 
 find-up@^5.0.0:
   version "5.0.0"
-  resolved "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-5.0.0.tgz#4c92819ecb7083561e4f4a240a86be5198f536fc"
   integrity sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==
   dependencies:
     locate-path "^6.0.0"
@@ -4890,7 +4886,7 @@ find-up@^5.0.0:
 
 flat-cache@^3.0.4:
   version "3.0.4"
-  resolved "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz"
+  resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-3.0.4.tgz#61b0338302b2fe9f957dcc32fc2a87f1c3048b11"
   integrity sha512-dm9s5Pw7Jc0GvMYbshN6zchCA9RgQlzzEZX3vylR9IqFfS8XciblUXOKfW6SiuJ0e13eDYZoZV5wdrev7P3Nwg==
   dependencies:
     flatted "^3.1.0"
@@ -4898,24 +4894,24 @@ flat-cache@^3.0.4:
 
 flatted@^3.1.0:
   version "3.2.7"
-  resolved "https://registry.npmjs.org/flatted/-/flatted-3.2.7.tgz"
+  resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.2.7.tgz#609f39207cb614b89d0765b477cb2d437fbf9787"
   integrity sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==
 
 follow-redirects@^1.15.0:
   version "1.15.2"
-  resolved "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.2.tgz#b460864144ba63f2681096f274c4e57026da2c13"
   integrity sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==
 
 for-each@^0.3.3:
   version "0.3.3"
-  resolved "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz"
+  resolved "https://registry.yarnpkg.com/for-each/-/for-each-0.3.3.tgz#69b447e88a0a5d32c3e7084f3f1710034b21376e"
   integrity sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==
   dependencies:
     is-callable "^1.1.3"
 
 form-data@^4.0.0:
   version "4.0.0"
-  resolved "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452"
   integrity sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==
   dependencies:
     asynckit "^0.4.0"
@@ -4924,12 +4920,12 @@ form-data@^4.0.0:
 
 fraction.js@^4.2.0:
   version "4.2.0"
-  resolved "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz"
+  resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.2.0.tgz#448e5109a313a3527f5a3ab2119ec4cf0e0e2950"
   integrity sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==
 
 fs-extra@^9.0.1:
   version "9.1.0"
-  resolved "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-9.1.0.tgz#5954460c764a8da2094ba3554bf839e6b9a7c86d"
   integrity sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==
   dependencies:
     at-least-node "^1.0.0"
@@ -4939,22 +4935,22 @@ fs-extra@^9.0.1:
 
 fs.realpath@^1.0.0:
   version "1.0.0"
-  resolved "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz"
+  resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
   integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
 
 fsevents@~2.3.2:
   version "2.3.2"
-  resolved "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
   integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
 
 function-bind@^1.1.1:
   version "1.1.1"
-  resolved "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz"
+  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
   integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
 
 function.prototype.name@^1.1.5:
   version "1.1.5"
-  resolved "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.5.tgz"
+  resolved "https://registry.yarnpkg.com/function.prototype.name/-/function.prototype.name-1.1.5.tgz#cce0505fe1ffb80503e6f9e46cc64e46a12a9621"
   integrity sha512-uN7m/BzVKQnCUF/iW8jYea67v++2u7m5UgENbHRtdDVclOUP+FMPlCNdmk0h/ysGyo2tavMJEDqJAkJdRa1vMA==
   dependencies:
     call-bind "^1.0.2"
@@ -4964,41 +4960,27 @@ function.prototype.name@^1.1.5:
 
 functional-red-black-tree@^1.0.1:
   version "1.0.1"
-  resolved "https://registry.npmjs.org/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz"
+  resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327"
   integrity sha512-dsKNQNdj6xA3T+QlADDA7mOSlX0qiMINjn0cgr+eGHGsbSHzTabcIogz2+p/iqP1Xs6EP/sS2SbqH+brGTbq0g==
 
-functions-have-names@^1.2.2:
+functions-have-names@^1.2.2, functions-have-names@^1.2.3:
   version "1.2.3"
-  resolved "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz"
+  resolved "https://registry.yarnpkg.com/functions-have-names/-/functions-have-names-1.2.3.tgz#0404fe4ee2ba2f607f0e0ec3c80bae994133b834"
   integrity sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==
 
-gauge@~2.7.3:
-  version "2.7.4"
-  resolved "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz"
-  integrity sha512-14x4kjc6lkD3ltw589k0NrPD6cCNTD6CWoVUNpB85+DrtONoZn+Rug6xZU5RvSC4+TZPxA5AnBibQYAvZn41Hg==
-  dependencies:
-    aproba "^1.0.3"
-    console-control-strings "^1.0.0"
-    has-unicode "^2.0.0"
-    object-assign "^4.1.0"
-    signal-exit "^3.0.0"
-    string-width "^1.0.1"
-    strip-ansi "^3.0.1"
-    wide-align "^1.1.0"
-
 gensync@^1.0.0-beta.2:
   version "1.0.0-beta.2"
-  resolved "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz"
+  resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0"
   integrity sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==
 
 get-dom-document@^0.1.3:
   version "0.1.3"
-  resolved "https://registry.npmjs.org/get-dom-document/-/get-dom-document-0.1.3.tgz"
+  resolved "https://registry.yarnpkg.com/get-dom-document/-/get-dom-document-0.1.3.tgz#d0188090e43d38dd146c467ac6e3e1f2ace7af52"
   integrity sha512-bZ0O00gSQgMo+wz7gU6kbbWCPh4dfDsL9ZOmVhA8TOXszl5GV56TpTuW1/Qq/QctgpjK56yyvB1vBO+wzz8Szw==
 
-get-intrinsic@^1.0.2, get-intrinsic@^1.1.1, get-intrinsic@^1.1.3:
+get-intrinsic@^1.0.2, get-intrinsic@^1.1.1, get-intrinsic@^1.1.3, get-intrinsic@^1.2.0:
   version "1.2.0"
-  resolved "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.0.tgz"
+  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.2.0.tgz#7ad1dc0535f3a2904bba075772763e5051f6d05f"
   integrity sha512-L049y6nFOuom5wGyRc3/gdTLO94dySVKRACj1RmJZBQXlbTMhtNIgkWkUHq+jYmZvKf14EW1EoJnnjbmoHij0Q==
   dependencies:
     function-bind "^1.1.1"
@@ -5012,12 +4994,12 @@ get-nonce@^1.0.0:
 
 get-own-enumerable-property-symbols@^3.0.0:
   version "3.0.2"
-  resolved "https://registry.npmjs.org/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.2.tgz"
+  resolved "https://registry.yarnpkg.com/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.2.tgz#b5fde77f22cbe35f390b4e089922c50bce6ef664"
   integrity sha512-I0UBV/XOz1XkIJHEUDMZAbzCThU/H8DxmSfmdGcKPnVhu2VfFqr34jr9777IyaTYvxjedWhqVIilEDsCdP5G6g==
 
 get-symbol-description@^1.0.0:
   version "1.0.0"
-  resolved "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.0.0.tgz"
+  resolved "https://registry.yarnpkg.com/get-symbol-description/-/get-symbol-description-1.0.0.tgz#7fdb81c900101fbd564dd5f1a30af5aadc1e58d6"
   integrity sha512-2EmdH1YvIQiZpltCNgkuiUnyukzxM/R6NDJX31Ke3BG1Nq5b0S2PhX59UKi9vZpPDQVdqn+1IcaAwnzTT5vCjw==
   dependencies:
     call-bind "^1.0.2"
@@ -5025,21 +5007,33 @@ get-symbol-description@^1.0.0:
 
 glob-parent@^5.1.2, glob-parent@~5.1.2:
   version "5.1.2"
-  resolved "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
   integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
   dependencies:
     is-glob "^4.0.1"
 
 glob-parent@^6.0.2:
   version "6.0.2"
-  resolved "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-6.0.2.tgz#6d237d99083950c79290f24c7642a3de9a28f9e3"
   integrity sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==
   dependencies:
     is-glob "^4.0.3"
 
+glob@7.1.6:
+  version "7.1.6"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
+  integrity sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.0.4"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
 glob@7.1.7:
   version "7.1.7"
-  resolved "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.7.tgz#3b193e9233f01d42d0b3f78294bbeeb418f94a90"
   integrity sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==
   dependencies:
     fs.realpath "^1.0.0"
@@ -5051,7 +5045,7 @@ glob@7.1.7:
 
 glob@^7.0.3, glob@^7.1.3, glob@^7.1.6, glob@^7.2.0:
   version "7.2.3"
-  resolved "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.3.tgz#b8df0fb802bbfa8e89bd1d938b4e16578ed44f2b"
   integrity sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==
   dependencies:
     fs.realpath "^1.0.0"
@@ -5063,7 +5057,7 @@ glob@^7.0.3, glob@^7.1.3, glob@^7.1.6, glob@^7.2.0:
 
 glob@^8.0.3:
   version "8.1.0"
-  resolved "https://registry.npmjs.org/glob/-/glob-8.1.0.tgz"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-8.1.0.tgz#d388f656593ef708ee3e34640fdfb99a9fd1c33e"
   integrity sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==
   dependencies:
     fs.realpath "^1.0.0"
@@ -5074,26 +5068,26 @@ glob@^8.0.3:
 
 globals@^11.1.0:
   version "11.12.0"
-  resolved "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e"
   integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==
 
 globals@^13.19.0, globals@^13.6.0, globals@^13.9.0:
   version "13.20.0"
-  resolved "https://registry.npmjs.org/globals/-/globals-13.20.0.tgz"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-13.20.0.tgz#ea276a1e508ffd4f1612888f9d1bad1e2717bf82"
   integrity sha512-Qg5QtVkCy/kv3FUSlu4ukeZDVf9ee0iXLAUYX13gbR17bnejFTzr4iS9bY7kwCf1NztRNm1t91fjOiyx4CSwPQ==
   dependencies:
     type-fest "^0.20.2"
 
 globalthis@^1.0.3:
   version "1.0.3"
-  resolved "https://registry.npmjs.org/globalthis/-/globalthis-1.0.3.tgz"
+  resolved "https://registry.yarnpkg.com/globalthis/-/globalthis-1.0.3.tgz#5852882a52b80dc301b0660273e1ed082f0b6ccf"
   integrity sha512-sFdI5LyBiNTHjRd7cGPWapiHWMOXKyuBNX/cWJ3NfzrZQVa8GI/8cofCl74AOVqq9W5kNmguTIzJ/1s2gyI9wA==
   dependencies:
     define-properties "^1.1.3"
 
 globby@^11.0.4, globby@^11.1.0:
   version "11.1.0"
-  resolved "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-11.1.0.tgz#bd4be98bb042f83d796f7e3811991fbe82a0d34b"
   integrity sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==
   dependencies:
     array-union "^2.1.0"
@@ -5105,7 +5099,7 @@ globby@^11.0.4, globby@^11.1.0:
 
 globby@^6.1.0:
   version "6.1.0"
-  resolved "https://registry.npmjs.org/globby/-/globby-6.1.0.tgz"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-6.1.0.tgz#f5a6d70e8395e21c858fb0489d64df02424d506c"
   integrity sha512-KVbFv2TQtbzCoxAnfD6JcHZTYCzyliEaaeM/gH8qQdkKr5s0OP9scEgvdcngyk7AVdY6YVW/TJHd+lQ/Df3Daw==
   dependencies:
     array-union "^1.0.1"
@@ -5116,80 +5110,75 @@ globby@^6.1.0:
 
 gopd@^1.0.1:
   version "1.0.1"
-  resolved "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz"
+  resolved "https://registry.yarnpkg.com/gopd/-/gopd-1.0.1.tgz#29ff76de69dac7489b7c0918a5788e56477c332c"
   integrity sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==
   dependencies:
     get-intrinsic "^1.1.3"
 
 graceful-fs@^4.1.6, graceful-fs@^4.2.0:
-  version "4.2.10"
-  resolved "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz"
-  integrity sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==
+  version "4.2.11"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.11.tgz#4183e4e8bf08bb6e05bbb2f7d2e0c8f712ca40e3"
+  integrity sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==
 
 grapheme-splitter@^1.0.4:
   version "1.0.4"
-  resolved "https://registry.npmjs.org/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz"
+  resolved "https://registry.yarnpkg.com/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz#9cf3a665c6247479896834af35cf1dbb4400767e"
   integrity sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==
 
 gud@^1.0.0:
   version "1.0.0"
-  resolved "https://registry.npmjs.org/gud/-/gud-1.0.0.tgz"
+  resolved "https://registry.yarnpkg.com/gud/-/gud-1.0.0.tgz#a489581b17e6a70beca9abe3ae57de7a499852c0"
   integrity sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw==
 
 has-bigints@^1.0.1, has-bigints@^1.0.2:
   version "1.0.2"
-  resolved "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz"
+  resolved "https://registry.yarnpkg.com/has-bigints/-/has-bigints-1.0.2.tgz#0871bd3e3d51626f6ca0966668ba35d5602d6eaa"
   integrity sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==
 
 has-flag@^3.0.0:
   version "3.0.0"
-  resolved "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
   integrity sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==
 
 has-flag@^4.0.0:
   version "4.0.0"
-  resolved "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
   integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
 
 has-property-descriptors@^1.0.0:
   version "1.0.0"
-  resolved "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz"
+  resolved "https://registry.yarnpkg.com/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz#610708600606d36961ed04c196193b6a607fa861"
   integrity sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==
   dependencies:
     get-intrinsic "^1.1.1"
 
 has-proto@^1.0.1:
   version "1.0.1"
-  resolved "https://registry.npmjs.org/has-proto/-/has-proto-1.0.1.tgz"
+  resolved "https://registry.yarnpkg.com/has-proto/-/has-proto-1.0.1.tgz#1885c1305538958aff469fef37937c22795408e0"
   integrity sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==
 
 has-symbols@^1.0.2, has-symbols@^1.0.3:
   version "1.0.3"
-  resolved "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz"
+  resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.3.tgz#bb7b2c4349251dce87b125f7bdf874aa7c8b39f8"
   integrity sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==
 
 has-tostringtag@^1.0.0:
   version "1.0.0"
-  resolved "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.0.tgz"
+  resolved "https://registry.yarnpkg.com/has-tostringtag/-/has-tostringtag-1.0.0.tgz#7e133818a7d394734f941e73c3d3f9291e658b25"
   integrity sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==
   dependencies:
     has-symbols "^1.0.2"
 
-has-unicode@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz"
-  integrity sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ==
-
 has@^1.0.3:
   version "1.0.3"
-  resolved "https://registry.npmjs.org/has/-/has-1.0.3.tgz"
+  resolved "https://registry.yarnpkg.com/has/-/has-1.0.3.tgz#722d7cbfc1f6aa8241f16dd814e011e1f41e8796"
   integrity sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==
   dependencies:
     function-bind "^1.1.1"
 
 hast-util-parse-selector@^2.0.0:
   version "2.2.5"
-  resolved "https://registry.npmjs.org/hast-util-parse-selector/-/hast-util-parse-selector-2.2.5.tgz"
+  resolved "https://registry.yarnpkg.com/hast-util-parse-selector/-/hast-util-parse-selector-2.2.5.tgz#d57c23f4da16ae3c63b3b6ca4616683313499c3a"
   integrity sha512-7j6mrk/qqkSehsM92wQjdIgWM2/BW61u/53G6xmC8i1OmEdKLHbk419QKQUjz6LglWsfqoiHmyMRkP1BGjecNQ==
 
 hast-util-whitespace@^2.0.0:
@@ -5199,7 +5188,7 @@ hast-util-whitespace@^2.0.0:
 
 hastscript@^6.0.0:
   version "6.0.0"
-  resolved "https://registry.npmjs.org/hastscript/-/hastscript-6.0.0.tgz"
+  resolved "https://registry.yarnpkg.com/hastscript/-/hastscript-6.0.0.tgz#e8768d7eac56c3fdeac8a92830d58e811e5bf640"
   integrity sha512-nDM6bvd7lIqDUiYEiu5Sl/+6ReP0BMk/2f4U/Rooccxkj0P5nm+acM5PrGJ/t5I8qPGiqZSE6hVAwZEdZIvP4w==
   dependencies:
     "@types/hast" "^2.0.0"
@@ -5210,7 +5199,7 @@ hastscript@^6.0.0:
 
 header-case@^2.0.4:
   version "2.0.4"
-  resolved "https://registry.npmjs.org/header-case/-/header-case-2.0.4.tgz"
+  resolved "https://registry.yarnpkg.com/header-case/-/header-case-2.0.4.tgz#5a42e63b55177349cf405beb8d775acabb92c063"
   integrity sha512-H/vuk5TEEVZwrR0lp2zed9OCo1uAILMlx0JEMgC26rzyJJ3N1v6XkwHHXJQdR2doSjcGPM6OKPYoJgf0plJ11Q==
   dependencies:
     capital-case "^1.0.4"
@@ -5218,14 +5207,14 @@ header-case@^2.0.4:
 
 hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2:
   version "3.3.2"
-  resolved "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
   dependencies:
     react-is "^16.7.0"
 
 https-proxy-agent@^5.0.0:
   version "5.0.1"
-  resolved "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz"
+  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz#c59ef224a04fe8b754f3db0063a25ea30d0005d6"
   integrity sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==
   dependencies:
     agent-base "6"
@@ -5233,39 +5222,39 @@ https-proxy-agent@^5.0.0:
 
 hyphenate-style-name@^1.0.3:
   version "1.0.4"
-  resolved "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz"
+  resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz#691879af8e220aea5750e8827db4ef62a54e361d"
   integrity sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==
 
 idb-keyval@^5.0.2:
   version "5.1.5"
-  resolved "https://registry.npmjs.org/idb-keyval/-/idb-keyval-5.1.5.tgz"
+  resolved "https://registry.yarnpkg.com/idb-keyval/-/idb-keyval-5.1.5.tgz#be11174bac0cb756dba4cc86fb36b6cd63f5ce6d"
   integrity sha512-J1utxYWQokYjy01LvDQ7WmiAtZCGUSkVi9EIBfUSyLOr/BesnMIxNGASTh9A1LzeISSjSqEPsfFdTss7EE7ofQ==
   dependencies:
     safari-14-idb-fix "^1.0.6"
 
 idb@^7.0.1:
   version "7.1.1"
-  resolved "https://registry.npmjs.org/idb/-/idb-7.1.1.tgz"
+  resolved "https://registry.yarnpkg.com/idb/-/idb-7.1.1.tgz#d910ded866d32c7ced9befc5bfdf36f572ced72b"
   integrity sha512-gchesWBzyvGHRO9W8tzUWFDycow5gwjvFKfyV9FF32Y7F50yZMp7mP+T2mJIWFx49zicqyC4uefHM17o6xKIVQ==
 
 ignore@^4.0.6:
   version "4.0.6"
-  resolved "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc"
   integrity sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==
 
 ignore@^5.2.0:
   version "5.2.4"
-  resolved "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.4.tgz#a291c0c6178ff1b960befe47fcdec301674a6324"
   integrity sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==
 
 immediate@~3.0.5:
   version "3.0.6"
-  resolved "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz"
+  resolved "https://registry.yarnpkg.com/immediate/-/immediate-3.0.6.tgz#9db1dbd0faf8de6fbe0f5dd5e56bb606280de69b"
   integrity sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==
 
 import-fresh@^3.0.0, import-fresh@^3.2.1:
   version "3.3.0"
-  resolved "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz"
+  resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
   integrity sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==
   dependencies:
     parent-module "^1.0.0"
@@ -5273,20 +5262,20 @@ import-fresh@^3.0.0, import-fresh@^3.2.1:
 
 imurmurhash@^0.1.4:
   version "0.1.4"
-  resolved "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz"
+  resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
   integrity sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==
 
 inflight@^1.0.4:
   version "1.0.6"
-  resolved "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz"
+  resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
   integrity sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==
   dependencies:
     once "^1.3.0"
     wrappy "1"
 
-inherits@2, inherits@~2.0.3:
+inherits@2:
   version "2.0.4"
-  resolved "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
 
 inline-style-parser@0.1.1:
@@ -5294,20 +5283,12 @@ inline-style-parser@0.1.1:
   resolved "https://registry.yarnpkg.com/inline-style-parser/-/inline-style-parser-0.1.1.tgz#ec8a3b429274e9c0a1f1c4ffa9453a7fef72cea1"
   integrity sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q==
 
-inline-style-prefixer@^6.0.0:
-  version "6.0.4"
-  resolved "https://registry.npmjs.org/inline-style-prefixer/-/inline-style-prefixer-6.0.4.tgz"
-  integrity sha512-FwXmZC2zbeeS7NzGjJ6pAiqRhXR0ugUShSNb6GApMl6da0/XGc4MOJsoWAywia52EEWbXNSy0pzkwz/+Y+swSg==
+internal-slot@^1.0.3, internal-slot@^1.0.4, internal-slot@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.0.5.tgz#f2a2ee21f668f8627a4667f309dc0f4fb6674986"
+  integrity sha512-Y+R5hJrzs52QCG2laLn4udYVnxsfny9CpOhNhUvk/SSSVyF6T27FzRbF0sroPidSu3X8oEAkOn2K804mjpt6UQ==
   dependencies:
-    css-in-js-utils "^3.1.0"
-    fast-loops "^1.1.3"
-
-internal-slot@^1.0.3, internal-slot@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.4.tgz"
-  integrity sha512-tA8URYccNzMo94s5MQZgH8NB/XTa6HsOo0MLfXTKKEnHVVdegzaQoFZ7Jp44bdvLvY2waT5dc+j5ICEswhi7UQ==
-  dependencies:
-    get-intrinsic "^1.1.3"
+    get-intrinsic "^1.2.0"
     has "^1.0.3"
     side-channel "^1.0.4"
 
@@ -5325,12 +5306,12 @@ invariant@^2.2.4:
 
 is-alphabetical@^1.0.0:
   version "1.0.4"
-  resolved "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-1.0.4.tgz"
+  resolved "https://registry.yarnpkg.com/is-alphabetical/-/is-alphabetical-1.0.4.tgz#9e7d6b94916be22153745d184c298cbf986a686d"
   integrity sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg==
 
 is-alphanumerical@^1.0.0:
   version "1.0.4"
-  resolved "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-1.0.4.tgz"
+  resolved "https://registry.yarnpkg.com/is-alphanumerical/-/is-alphanumerical-1.0.4.tgz#7eb9a2431f855f6b1ef1a78e326df515696c4dbf"
   integrity sha512-UzoZUr+XfVz3t3v4KyGEniVL9BDRoQtY7tOyrRybkVNjDFWyo1yhXNGrrBTQxp3ib9BLAWs7k2YKBQsFRkZG9A==
   dependencies:
     is-alphabetical "^1.0.0"
@@ -5338,43 +5319,43 @@ is-alphanumerical@^1.0.0:
 
 is-arguments@^1.0.4, is-arguments@^1.1.1:
   version "1.1.1"
-  resolved "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz"
+  resolved "https://registry.yarnpkg.com/is-arguments/-/is-arguments-1.1.1.tgz#15b3f88fda01f2a97fec84ca761a560f123efa9b"
   integrity sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==
   dependencies:
     call-bind "^1.0.2"
     has-tostringtag "^1.0.0"
 
-is-array-buffer@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.1.tgz"
-  integrity sha512-ASfLknmY8Xa2XtB4wmbz13Wu202baeA18cJBCeCy0wXUHZF0IPyVEXqKEcd+t2fNSLLL1vC6k7lxZEojNbISXQ==
+is-array-buffer@^3.0.1, is-array-buffer@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/is-array-buffer/-/is-array-buffer-3.0.2.tgz#f2653ced8412081638ecb0ebbd0c41c6e0aecbbe"
+  integrity sha512-y+FyyR/w8vfIRq4eQcM1EYgSTnmHXPqaF+IgzgraytCFq5Xh8lllDVmAZolPJiZttZLeFSINPYMaEJ7/vWUa1w==
   dependencies:
     call-bind "^1.0.2"
-    get-intrinsic "^1.1.3"
+    get-intrinsic "^1.2.0"
     is-typed-array "^1.1.10"
 
 is-arrayish@^0.2.1:
   version "0.2.1"
-  resolved "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz"
+  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
   integrity sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==
 
 is-bigint@^1.0.1:
   version "1.0.4"
-  resolved "https://registry.npmjs.org/is-bigint/-/is-bigint-1.0.4.tgz"
+  resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.0.4.tgz#08147a1875bc2b32005d41ccd8291dffc6691df3"
   integrity sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==
   dependencies:
     has-bigints "^1.0.1"
 
 is-binary-path@~2.1.0:
   version "2.1.0"
-  resolved "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz"
+  resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
   integrity sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==
   dependencies:
     binary-extensions "^2.0.0"
 
 is-boolean-object@^1.1.0:
   version "1.1.2"
-  resolved "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.2.tgz"
+  resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.1.2.tgz#5c6dc200246dd9321ae4b885a114bb1f75f63719"
   integrity sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==
   dependencies:
     call-bind "^1.0.2"
@@ -5387,137 +5368,130 @@ is-buffer@^2.0.0:
 
 is-callable@^1.1.3, is-callable@^1.1.4, is-callable@^1.2.7:
   version "1.2.7"
-  resolved "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz"
+  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.7.tgz#3bc2a85ea742d9e36205dcacdd72ca1fdc51b055"
   integrity sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==
 
 is-core-module@^2.11.0, is-core-module@^2.9.0:
-  version "2.11.0"
-  resolved "https://registry.npmjs.org/is-core-module/-/is-core-module-2.11.0.tgz"
-  integrity sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw==
+  version "2.12.0"
+  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.12.0.tgz#36ad62f6f73c8253fd6472517a12483cf03e7ec4"
+  integrity sha512-RECHCBCd/viahWmwj6enj19sKbHfJrddi/6cBDsNTKbNq0f7VeaUkBo60BqzvPqo/W54ChS62Z5qyun7cfOMqQ==
   dependencies:
     has "^1.0.3"
 
 is-date-object@^1.0.1, is-date-object@^1.0.5:
   version "1.0.5"
-  resolved "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.5.tgz"
+  resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.5.tgz#0841d5536e724c25597bf6ea62e1bd38298df31f"
   integrity sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==
   dependencies:
     has-tostringtag "^1.0.0"
 
 is-decimal@^1.0.0:
   version "1.0.4"
-  resolved "https://registry.npmjs.org/is-decimal/-/is-decimal-1.0.4.tgz"
+  resolved "https://registry.yarnpkg.com/is-decimal/-/is-decimal-1.0.4.tgz#65a3a5958a1c5b63a706e1b333d7cd9f630d3fa5"
   integrity sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw==
 
 is-extendable@^1.0.0:
   version "1.0.1"
-  resolved "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz"
+  resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-1.0.1.tgz#a7470f9e426733d81bd81e1155264e3a3507cab4"
   integrity sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==
   dependencies:
     is-plain-object "^2.0.4"
 
 is-extglob@^2.1.1:
   version "2.1.1"
-  resolved "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz"
+  resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
   integrity sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==
 
 is-finite@^1.0.0:
   version "1.1.0"
-  resolved "https://registry.npmjs.org/is-finite/-/is-finite-1.1.0.tgz"
+  resolved "https://registry.yarnpkg.com/is-finite/-/is-finite-1.1.0.tgz#904135c77fb42c0641d6aa1bcdbc4daa8da082f3"
   integrity sha512-cdyMtqX/BOqqNBBiKlIVkytNHm49MtMlYyn1zxzvJKWmFMlGzm+ry5BBfYyeY9YmNKbRSo/o7OX9w9ale0wg3w==
 
 is-finite@~1.0.1:
   version "1.0.2"
-  resolved "https://registry.npmjs.org/is-finite/-/is-finite-1.0.2.tgz"
+  resolved "https://registry.yarnpkg.com/is-finite/-/is-finite-1.0.2.tgz#cc6677695602be550ef11e8b4aa6305342b6d0aa"
   integrity sha512-e+gU0KGrlbqjEcV80SAqg4g7PQYOm3/IrdwAJ+kPwHqGhLKhtuTJGGxGtrsc8RXlHt2A8Vlnv+79Vq2B1GQasg==
   dependencies:
     number-is-nan "^1.0.0"
 
-is-fullwidth-code-point@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz"
-  integrity sha512-1pqUqRjkhPJ9miNq9SwMfdvi6lBJcd6eFxvfaivQhaH3SgisfiuudvFntdKOmxuee/77l+FPjKrQjWvmPjWrRw==
-  dependencies:
-    number-is-nan "^1.0.0"
-
 is-fullwidth-code-point@^3.0.0:
   version "3.0.0"
-  resolved "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz"
+  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d"
   integrity sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==
 
 is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3, is-glob@~4.0.1:
   version "4.0.3"
-  resolved "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz"
+  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.3.tgz#64f61e42cbbb2eec2071a9dac0b28ba1e65d5084"
   integrity sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==
   dependencies:
     is-extglob "^2.1.1"
 
 is-hexadecimal@^1.0.0:
   version "1.0.4"
-  resolved "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-1.0.4.tgz"
+  resolved "https://registry.yarnpkg.com/is-hexadecimal/-/is-hexadecimal-1.0.4.tgz#cc35c97588da4bd49a8eedd6bc4082d44dcb23a7"
   integrity sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==
 
 is-integer@~1.0.4:
   version "1.0.7"
-  resolved "https://registry.npmjs.org/is-integer/-/is-integer-1.0.7.tgz"
+  resolved "https://registry.yarnpkg.com/is-integer/-/is-integer-1.0.7.tgz#6bde81aacddf78b659b6629d629cadc51a886d5c"
   integrity sha512-RPQc/s9yBHSvpi+hs9dYiJ2cuFeU6x3TyyIp8O2H6SKEltIvJOzRj9ToyvcStDvPR/pS4rxgr1oBFajQjZ2Szg==
   dependencies:
     is-finite "^1.0.0"
 
 is-map@^2.0.1, is-map@^2.0.2:
   version "2.0.2"
-  resolved "https://registry.npmjs.org/is-map/-/is-map-2.0.2.tgz"
+  resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.2.tgz#00922db8c9bf73e81b7a335827bc2a43f2b91127"
   integrity sha512-cOZFQQozTha1f4MxLFzlgKYPTyj26picdZTx82hbc/Xf4K/tZOOXSCkMvU4pKioRXGDLJRn0GM7Upe7kR721yg==
 
 is-module@^1.0.0:
   version "1.0.0"
-  resolved "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz"
+  resolved "https://registry.yarnpkg.com/is-module/-/is-module-1.0.0.tgz#3258fb69f78c14d5b815d664336b4cffb6441591"
   integrity sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g==
 
 is-negative-zero@^2.0.2:
   version "2.0.2"
-  resolved "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.2.tgz"
+  resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.2.tgz#7bf6f03a28003b8b3965de3ac26f664d765f3150"
   integrity sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==
 
 is-number-object@^1.0.4:
   version "1.0.7"
-  resolved "https://registry.npmjs.org/is-number-object/-/is-number-object-1.0.7.tgz"
+  resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.0.7.tgz#59d50ada4c45251784e9904f5246c742f07a42fc"
   integrity sha512-k1U0IRzLMo7ZlYIfzRu23Oh6MiIFasgpb9X76eqfFZAqwH44UI4KTBvBYIZ1dSL9ZzChTB9ShHfLkR4pdW5krQ==
   dependencies:
     has-tostringtag "^1.0.0"
 
 is-number@^7.0.0:
   version "7.0.0"
-  resolved "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz"
+  resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
   integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
 
 is-obj@^1.0.1:
   version "1.0.1"
-  resolved "https://registry.npmjs.org/is-obj/-/is-obj-1.0.1.tgz"
+  resolved "https://registry.yarnpkg.com/is-obj/-/is-obj-1.0.1.tgz#3e4729ac1f5fde025cd7d83a896dab9f4f67db0f"
   integrity sha512-l4RyHgRqGN4Y3+9JHVrNqO+tN0rV5My76uW5/nuO4K1b6vw5G8d/cmFjP9tRfEsdhZNt0IFdZuK/c2Vr4Nb+Qg==
 
 is-path-cwd@^2.0.0:
   version "2.2.0"
-  resolved "https://registry.npmjs.org/is-path-cwd/-/is-path-cwd-2.2.0.tgz"
+  resolved "https://registry.yarnpkg.com/is-path-cwd/-/is-path-cwd-2.2.0.tgz#67d43b82664a7b5191fd9119127eb300048a9fdb"
   integrity sha512-w942bTcih8fdJPJmQHFzkS76NEP8Kzzvmw92cXsazb8intwLqPibPPdXf4ANdKV3rYMuuQYGIWtvz9JilB3NFQ==
 
 is-path-in-cwd@^2.0.0:
   version "2.1.0"
-  resolved "https://registry.npmjs.org/is-path-in-cwd/-/is-path-in-cwd-2.1.0.tgz"
+  resolved "https://registry.yarnpkg.com/is-path-in-cwd/-/is-path-in-cwd-2.1.0.tgz#bfe2dca26c69f397265a4009963602935a053acb"
   integrity sha512-rNocXHgipO+rvnP6dk3zI20RpOtrAM/kzbB258Uw5BWr3TpXi861yzjo16Dn4hUox07iw5AyeMLHWsujkjzvRQ==
   dependencies:
     is-path-inside "^2.1.0"
 
 is-path-inside@^2.1.0:
   version "2.1.0"
-  resolved "https://registry.npmjs.org/is-path-inside/-/is-path-inside-2.1.0.tgz"
+  resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-2.1.0.tgz#7c9810587d659a40d27bcdb4d5616eab059494b2"
   integrity sha512-wiyhTzfDWsvwAW53OBWF5zuvaOGlZ6PwYxAbPVDhpm+gM09xKQGjBq/8uYN12aDvMxnAnq3dxTyoSoRNmg5YFg==
   dependencies:
     path-is-inside "^1.0.2"
 
 is-path-inside@^3.0.3:
   version "3.0.3"
-  resolved "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz"
+  resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-3.0.3.tgz#d231362e53a07ff2b0e0ea7fed049161ffd16283"
   integrity sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==
 
 is-plain-obj@^4.0.0:
@@ -5527,21 +5501,21 @@ is-plain-obj@^4.0.0:
 
 is-plain-object@^2.0.4:
   version "2.0.4"
-  resolved "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz"
+  resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-2.0.4.tgz#2c163b3fafb1b606d9d17928f05c2a1c38e07677"
   integrity sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==
   dependencies:
     isobject "^3.0.1"
 
 is-reference@1.2.1:
   version "1.2.1"
-  resolved "https://registry.npmjs.org/is-reference/-/is-reference-1.2.1.tgz"
+  resolved "https://registry.yarnpkg.com/is-reference/-/is-reference-1.2.1.tgz#8b2dac0b371f4bc994fdeaba9eb542d03002d0b7"
   integrity sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==
   dependencies:
     "@types/estree" "*"
 
 is-regex@^1.0.4, is-regex@^1.1.4:
   version "1.1.4"
-  resolved "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz"
+  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.4.tgz#eef5663cd59fa4c0ae339505323df6854bb15958"
   integrity sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==
   dependencies:
     call-bind "^1.0.2"
@@ -5549,43 +5523,43 @@ is-regex@^1.0.4, is-regex@^1.1.4:
 
 is-regexp@^1.0.0:
   version "1.0.0"
-  resolved "https://registry.npmjs.org/is-regexp/-/is-regexp-1.0.0.tgz"
+  resolved "https://registry.yarnpkg.com/is-regexp/-/is-regexp-1.0.0.tgz#fd2d883545c46bac5a633e7b9a09e87fa2cb5069"
   integrity sha512-7zjFAPO4/gwyQAAgRRmqeEeyIICSdmCqa3tsVHMdBzaXXRiqopZL4Cyghg/XulGWrtABTpbnYYzzIRffLkP4oA==
 
 is-set@^2.0.1, is-set@^2.0.2:
   version "2.0.2"
-  resolved "https://registry.npmjs.org/is-set/-/is-set-2.0.2.tgz"
+  resolved "https://registry.yarnpkg.com/is-set/-/is-set-2.0.2.tgz#90755fa4c2562dc1c5d4024760d6119b94ca18ec"
   integrity sha512-+2cnTEZeY5z/iXGbLhPrOAaK/Mau5k5eXq9j14CpRTftq0pAJu2MwVRSZhyZWBzx3o6X795Lz6Bpb6R0GKf37g==
 
 is-shared-array-buffer@^1.0.2:
   version "1.0.2"
-  resolved "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.2.tgz"
+  resolved "https://registry.yarnpkg.com/is-shared-array-buffer/-/is-shared-array-buffer-1.0.2.tgz#8f259c573b60b6a32d4058a1a07430c0a7344c79"
   integrity sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA==
   dependencies:
     call-bind "^1.0.2"
 
 is-stream@^2.0.0:
   version "2.0.1"
-  resolved "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz"
+  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-2.0.1.tgz#fac1e3d53b97ad5a9d0ae9cef2389f5810a5c077"
   integrity sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==
 
 is-string@^1.0.5, is-string@^1.0.7:
   version "1.0.7"
-  resolved "https://registry.npmjs.org/is-string/-/is-string-1.0.7.tgz"
+  resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.7.tgz#0dd12bf2006f255bb58f695110eff7491eebc0fd"
   integrity sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==
   dependencies:
     has-tostringtag "^1.0.0"
 
 is-symbol@^1.0.2, is-symbol@^1.0.3:
   version "1.0.4"
-  resolved "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.4.tgz"
+  resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.4.tgz#a6dac93b635b063ca6872236de88910a57af139c"
   integrity sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==
   dependencies:
     has-symbols "^1.0.2"
 
 is-typed-array@^1.1.10, is-typed-array@^1.1.9:
   version "1.1.10"
-  resolved "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.10.tgz"
+  resolved "https://registry.yarnpkg.com/is-typed-array/-/is-typed-array-1.1.10.tgz#36a5b5cb4189b575d1a3e4b08536bfb485801e3f"
   integrity sha512-PJqgEHiWZvMpaFZ3uTc8kHPM4+4ADTlDniuQL7cU/UDA0Ql7F70yGfHph3cLNe+c9toaigv+DFzTJKhc2CtO6A==
   dependencies:
     available-typed-arrays "^1.0.5"
@@ -5596,19 +5570,19 @@ is-typed-array@^1.1.10, is-typed-array@^1.1.9:
 
 is-weakmap@^2.0.1:
   version "2.0.1"
-  resolved "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.1.tgz"
+  resolved "https://registry.yarnpkg.com/is-weakmap/-/is-weakmap-2.0.1.tgz#5008b59bdc43b698201d18f62b37b2ca243e8cf2"
   integrity sha512-NSBR4kH5oVj1Uwvv970ruUkCV7O1mzgVFO4/rev2cLRda9Tm9HrL70ZPut4rOHgY0FNrUu9BCbXA2sdQ+x0chA==
 
 is-weakref@^1.0.2:
   version "1.0.2"
-  resolved "https://registry.npmjs.org/is-weakref/-/is-weakref-1.0.2.tgz"
+  resolved "https://registry.yarnpkg.com/is-weakref/-/is-weakref-1.0.2.tgz#9529f383a9338205e89765e0392efc2f100f06f2"
   integrity sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==
   dependencies:
     call-bind "^1.0.2"
 
 is-weakset@^2.0.1:
   version "2.0.2"
-  resolved "https://registry.npmjs.org/is-weakset/-/is-weakset-2.0.2.tgz"
+  resolved "https://registry.yarnpkg.com/is-weakset/-/is-weakset-2.0.2.tgz#4569d67a747a1ce5a994dfd4ef6dcea76e7c0a1d"
   integrity sha512-t2yVvttHkQktwnNNmBQ98AhENLdPUTDTE21uPqAQ0ARwQfGeQKRVS0NNurH7bTf7RrvcVn1OOge45CnBeHCSmg==
   dependencies:
     call-bind "^1.0.2"
@@ -5616,32 +5590,27 @@ is-weakset@^2.0.1:
 
 isarray@^2.0.5:
   version "2.0.5"
-  resolved "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723"
   integrity sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==
 
-isarray@~1.0.0:
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz"
-  integrity sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==
-
 isexe@^2.0.0:
   version "2.0.0"
-  resolved "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz"
+  resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
   integrity sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==
 
 isobject@^3.0.1:
   version "3.0.1"
-  resolved "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz"
+  resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
   integrity sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==
 
 isomorphic.js@^0.2.4:
   version "0.2.5"
-  resolved "https://registry.npmjs.org/isomorphic.js/-/isomorphic.js-0.2.5.tgz"
+  resolved "https://registry.yarnpkg.com/isomorphic.js/-/isomorphic.js-0.2.5.tgz#13eecf36f2dba53e85d355e11bf9d4208c6f7f88"
   integrity sha512-PIeMbHqMt4DnUP3MA/Flc0HElYjMXArsw1qwJZcm9sqR8mq3l8NYizFMty0pWwE/tzIGH3EKK5+jes5mAr85yw==
 
 jake@^10.8.5:
   version "10.8.5"
-  resolved "https://registry.npmjs.org/jake/-/jake-10.8.5.tgz"
+  resolved "https://registry.yarnpkg.com/jake/-/jake-10.8.5.tgz#f2183d2c59382cb274226034543b9c03b8164c46"
   integrity sha512-sVpxYeuAhWt0OTWITwT98oyV0GsXyMlXCF+3L1SuafBVUIr/uILGRB+NqwkzhgXKvoJpDIpQvqkUALgdmQsQxw==
   dependencies:
     async "^3.2.3"
@@ -5651,7 +5620,7 @@ jake@^10.8.5:
 
 jest-worker@^26.2.1:
   version "26.6.2"
-  resolved "https://registry.npmjs.org/jest-worker/-/jest-worker-26.6.2.tgz"
+  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-26.6.2.tgz#7f72cbc4d643c365e27b9fd775f9d0eaa9c7a8ed"
   integrity sha512-KWYVV1c4i+jbMpaBC+U++4Va0cp8OisU185o73T1vo99hqi7w8tSJfUXYswwqqrjzwxa6KpRK54WhPvwf5w6PQ==
   dependencies:
     "@types/node" "*"
@@ -5660,36 +5629,36 @@ jest-worker@^26.2.1:
 
 jest-worker@^27.4.5:
   version "27.5.1"
-  resolved "https://registry.npmjs.org/jest-worker/-/jest-worker-27.5.1.tgz"
+  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-27.5.1.tgz#8d146f0900e8973b106b6f73cc1e9a8cb86f8db0"
   integrity sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==
   dependencies:
     "@types/node" "*"
     merge-stream "^2.0.0"
     supports-color "^8.0.0"
 
-js-cookie@^2.2.1:
-  version "2.2.1"
-  resolved "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.1.tgz"
-  integrity sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ==
+jiti@^1.18.2:
+  version "1.18.2"
+  resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.18.2.tgz#80c3ef3d486ebf2450d9335122b32d121f2a83cd"
+  integrity sha512-QAdOptna2NYiSSpv0O/BwoHBSmz4YhpzJHyi+fnMRTXFjp7B8i/YG5Z8IfusxB1ufjcD2Sre1F3R+nX3fvy7gg==
 
 js-cookie@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.1.tgz"
-  integrity sha512-+0rgsUXZu4ncpPxRL+lNEptWMOWl9etvPHc/koSRp6MPwpRYAhmk0dUG00J4bxVV3r9uUzfo24wW0knS07SKSw==
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-3.0.5.tgz#0b7e2fd0c01552c58ba86e0841f94dc2557dcdbc"
+  integrity sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==
 
 js-sdsl@^4.1.4:
-  version "4.3.0"
-  resolved "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.3.0.tgz"
-  integrity sha512-mifzlm2+5nZ+lEcLJMoBK0/IH/bDg8XnJfd/Wq6IP+xoCjLZsTOnV2QpxlVbX9bMnkl5PdEjNtBJ9Cj1NjifhQ==
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/js-sdsl/-/js-sdsl-4.4.0.tgz#8b437dbe642daa95760400b602378ed8ffea8430"
+  integrity sha512-FfVSdx6pJ41Oa+CF7RDaFmTnCaFhua+SNYQX74riGOpl96x+2jQCqEfQ2bnXu/5DPCqlRuiqyvTJM0Qjz26IVg==
 
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
   version "4.0.0"
-  resolved "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz"
+  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
   integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
 
 js-yaml@^3.13.1:
   version "3.14.1"
-  resolved "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.14.1.tgz#dae812fdb3825fa306609a8717383c50c36a0537"
   integrity sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==
   dependencies:
     argparse "^1.0.7"
@@ -5697,61 +5666,61 @@ js-yaml@^3.13.1:
 
 js-yaml@^4.1.0:
   version "4.1.0"
-  resolved "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-4.1.0.tgz#c1fb65f8f5017901cdd2c951864ba18458a10602"
   integrity sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==
   dependencies:
     argparse "^2.0.1"
 
 jsesc@^2.5.1:
   version "2.5.2"
-  resolved "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz"
+  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-2.5.2.tgz#80564d2e483dacf6e8ef209650a67df3f0c283a4"
   integrity sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==
 
 jsesc@~0.5.0:
   version "0.5.0"
-  resolved "https://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz"
+  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-0.5.0.tgz#e7dee66e35d6fc16f710fe91d5cf69f70f08911d"
   integrity sha512-uZz5UnB7u4T9LvwmFqXii7pZSouaRPorGs5who1Ip7VO0wxanFvBL7GkM6dTHlgX+jhBApRetaWpnDabOeTcnA==
 
 json-parse-even-better-errors@^2.3.0:
   version "2.3.1"
-  resolved "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz"
+  resolved "https://registry.yarnpkg.com/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz#7c47805a94319928e05777405dc12e1f7a4ee02d"
   integrity sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==
 
 json-schema-traverse@^0.4.1:
   version "0.4.1"
-  resolved "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz"
+  resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz#69f6a87d9513ab8bb8fe63bdb0979c448e684660"
   integrity sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==
 
 json-schema-traverse@^1.0.0:
   version "1.0.0"
-  resolved "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz"
+  resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz#ae7bcb3656ab77a73ba5c49bf654f38e6b6860e2"
   integrity sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==
 
 json-schema@^0.4.0:
   version "0.4.0"
-  resolved "https://registry.npmjs.org/json-schema/-/json-schema-0.4.0.tgz"
+  resolved "https://registry.yarnpkg.com/json-schema/-/json-schema-0.4.0.tgz#f7de4cf6efab838ebaeb3236474cbba5a1930ab5"
   integrity sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA==
 
 json-stable-stringify-without-jsonify@^1.0.1:
   version "1.0.1"
-  resolved "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz"
+  resolved "https://registry.yarnpkg.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651"
   integrity sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==
 
-json5@^1.0.1:
+json5@^1.0.2:
   version "1.0.2"
-  resolved "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.2.tgz#63d98d60f21b313b77c4d6da18bfa69d80e1d593"
   integrity sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==
   dependencies:
     minimist "^1.2.0"
 
 json5@^2.1.2, json5@^2.2.0, json5@^2.2.2:
   version "2.2.3"
-  resolved "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
   integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
 
 jsonfile@^6.0.1:
   version "6.1.0"
-  resolved "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz"
+  resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-6.1.0.tgz#bc55b2634793c679ec6403094eb13698a6ec0aae"
   integrity sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==
   dependencies:
     universalify "^2.0.0"
@@ -5760,23 +5729,23 @@ jsonfile@^6.0.1:
 
 jsonpointer@^5.0.0:
   version "5.0.1"
-  resolved "https://registry.npmjs.org/jsonpointer/-/jsonpointer-5.0.1.tgz"
+  resolved "https://registry.yarnpkg.com/jsonpointer/-/jsonpointer-5.0.1.tgz#2110e0af0900fd37467b5907ecd13a7884a1b559"
   integrity sha512-p/nXbhSEcu3pZRdkW1OfJhpsVtW1gd4Wa1fnQc9YLiTfAjn0312eMKimbdIQzuZl9aa9xUGaRlP9T/CJE/ditQ==
 
 "jsx-ast-utils@^2.4.1 || ^3.0.0", jsx-ast-utils@^3.3.3:
   version "3.3.3"
-  resolved "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.3.tgz"
+  resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-3.3.3.tgz#76b3e6e6cece5c69d49a5792c3d01bd1a0cdc7ea"
   integrity sha512-fYQHZTZ8jSfmWZ0iyzfwiU4WDX4HpHbMCZ3gPlWYiCl3BoeOTsqKBqnTVfH2rYT7eP5c3sVbeSPHnnJOaTrWiw==
   dependencies:
     array-includes "^3.1.5"
     object.assign "^4.1.3"
 
-jsx-dom-cjs@^8.0.0:
-  version "8.0.4"
-  resolved "https://registry.npmjs.org/jsx-dom-cjs/-/jsx-dom-cjs-8.0.4.tgz"
-  integrity sha512-MY7LS5GdYRnjTCym2WppfL52BCdKII0/BNL7zGC0zzIw2F3WobdM5BW9VQEkzCXXWL05zVGCtwdlMn3NcfHVKg==
+jsx-dom-cjs@^8.0.5:
+  version "8.0.5"
+  resolved "https://registry.yarnpkg.com/jsx-dom-cjs/-/jsx-dom-cjs-8.0.5.tgz#353c2cabab7d2f90c0ed05520113006204b97d8f"
+  integrity sha512-VwoUYxTyZlP8SO5F0NPXbHZLFMkYE8bQgwArpq10vE8dYGga0OwVQqSUZgIUCxaZOScVJXTNn94rBy4+vqLyYA==
   dependencies:
-    csstype "^3.1.0"
+    csstype "^3.1.1"
 
 kleur@^4.0.3:
   version "4.1.5"
@@ -5785,56 +5754,56 @@ kleur@^4.0.3:
 
 language-subtag-registry@~0.3.2:
   version "0.3.22"
-  resolved "https://registry.npmjs.org/language-subtag-registry/-/language-subtag-registry-0.3.22.tgz"
+  resolved "https://registry.yarnpkg.com/language-subtag-registry/-/language-subtag-registry-0.3.22.tgz#2e1500861b2e457eba7e7ae86877cbd08fa1fd1d"
   integrity sha512-tN0MCzyWnoz/4nHS6uxdlFWoUZT7ABptwKPQ52Ea7URk6vll88bWBVhodtnlfEuCcKWNGoc+uGbw1cwa9IKh/w==
 
 language-tags@=1.0.5:
   version "1.0.5"
-  resolved "https://registry.npmjs.org/language-tags/-/language-tags-1.0.5.tgz"
+  resolved "https://registry.yarnpkg.com/language-tags/-/language-tags-1.0.5.tgz#d321dbc4da30ba8bf3024e040fa5c14661f9193a"
   integrity sha512-qJhlO9cGXi6hBGKoxEG/sKZDAHD5Hnu9Hs4WbOY3pCWXDhw0N8x1NenNzm2EnNLkLkk7J2SdxAkDSbb6ftT+UQ==
   dependencies:
     language-subtag-registry "~0.3.2"
 
 leven@^3.1.0:
   version "3.1.0"
-  resolved "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz"
+  resolved "https://registry.yarnpkg.com/leven/-/leven-3.1.0.tgz#77891de834064cccba82ae7842bb6b14a13ed7f2"
   integrity sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==
 
 levn@^0.4.1:
   version "0.4.1"
-  resolved "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz"
+  resolved "https://registry.yarnpkg.com/levn/-/levn-0.4.1.tgz#ae4562c007473b932a6200d403268dd2fffc6ade"
   integrity sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==
   dependencies:
     prelude-ls "^1.2.1"
     type-check "~0.4.0"
 
-lib0@^0.2.42, lib0@^0.2.49:
-  version "0.2.62"
-  resolved "https://registry.npmjs.org/lib0/-/lib0-0.2.62.tgz"
-  integrity sha512-DY0G8AaQloUvpiss7EpAo/t4R82b9m/AydbQRNAa9Khssn9oGDJnSN8Q1qQ8u82Wog4iaT1O8yM+DfhzGCrrpQ==
+lib0@^0.2.42, lib0@^0.2.74:
+  version "0.2.74"
+  resolved "https://registry.yarnpkg.com/lib0/-/lib0-0.2.74.tgz#7a4cc816a0420e76de85009423c8ab63655ff817"
+  integrity sha512-roj9i46/JwG5ik5KNTkxP2IytlnrssAkD/OhlAVtE+GqectrdkfR+pttszVLrOzMDeXNs1MPt6yo66MUolWSiA==
   dependencies:
     isomorphic.js "^0.2.4"
 
 lie@3.1.1:
   version "3.1.1"
-  resolved "https://registry.npmjs.org/lie/-/lie-3.1.1.tgz"
+  resolved "https://registry.yarnpkg.com/lie/-/lie-3.1.1.tgz#9a436b2cc7746ca59de7a41fa469b3efb76bd87e"
   integrity sha512-RiNhHysUjhrDQntfYSfY4MU24coXXdEOgw9WGcKHNeEwffDYbF//u87M1EWaMGzuFoSbqW0C9C6lEEhDOAswfw==
   dependencies:
     immediate "~3.0.5"
 
-lilconfig@^2.0.5, lilconfig@^2.0.6:
-  version "2.0.6"
-  resolved "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.6.tgz"
-  integrity sha512-9JROoBW7pobfsx+Sq2JsASvCo6Pfo6WWoUW79HuB1BCoBXD4PLWJPqDF6fNj67pqBYTbAHkE57M1kS/+L1neOg==
+lilconfig@^2.0.5, lilconfig@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.1.0.tgz#78e23ac89ebb7e1bfbf25b18043de756548e7f52"
+  integrity sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==
 
 lines-and-columns@^1.1.6:
   version "1.2.4"
-  resolved "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz"
+  resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
   integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
 
 loader-utils@^2.0.0:
   version "2.0.4"
-  resolved "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-2.0.4.tgz#8b5cb38b5c34a9a018ee1fc0e6a066d1dfcc528c"
   integrity sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==
   dependencies:
     big.js "^5.2.2"
@@ -5843,127 +5812,137 @@ loader-utils@^2.0.0:
 
 localforage@^1.8.1:
   version "1.10.0"
-  resolved "https://registry.npmjs.org/localforage/-/localforage-1.10.0.tgz"
+  resolved "https://registry.yarnpkg.com/localforage/-/localforage-1.10.0.tgz#5c465dc5f62b2807c3a84c0c6a1b1b3212781dd4"
   integrity sha512-14/H1aX7hzBBmmh7sGPd+AOMkkIrHM3Z1PAyGgZigA1H1p5O5ANnMyWzvpAETtG68/dC4pC0ncy3+PPGzXZHPg==
   dependencies:
     lie "3.1.1"
 
 locate-path@^5.0.0:
   version "5.0.0"
-  resolved "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz"
+  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-5.0.0.tgz#1afba396afd676a6d42504d0a67a3a7eb9f62aa0"
   integrity sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==
   dependencies:
     p-locate "^4.1.0"
 
 locate-path@^6.0.0:
   version "6.0.0"
-  resolved "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz"
+  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-6.0.0.tgz#55321eb309febbc59c4801d931a72452a681d286"
   integrity sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==
   dependencies:
     p-locate "^5.0.0"
 
 lodash-es@^4.17.15:
   version "4.17.21"
-  resolved "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz"
+  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
   integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
 
+lodash.castarray@^4.4.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/lodash.castarray/-/lodash.castarray-4.4.0.tgz#c02513515e309daddd4c24c60cfddcf5976d9115"
+  integrity sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==
+
 lodash.debounce@^4.0.8:
   version "4.0.8"
-  resolved "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz"
+  resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
   integrity sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==
 
+lodash.isplainobject@^4.0.6:
+  version "4.0.6"
+  resolved "https://registry.yarnpkg.com/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz#7c526a52d89b45c45cc690b88163be0497f550cb"
+  integrity sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==
+
 lodash.merge@^4.6.2:
   version "4.6.2"
-  resolved "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz"
+  resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
   integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
 
 lodash.sortby@^4.7.0:
   version "4.7.0"
-  resolved "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz"
+  resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
   integrity sha512-HDWXG8isMntAyRF5vZ7xKuEvOhT4AhlRt/3czTSjvGUxjYCBVRQY48ViDHyfYz9VIoBkW4TMGQNapx+l3RUwdA==
 
 lodash.truncate@^4.4.2:
   version "4.4.2"
-  resolved "https://registry.npmjs.org/lodash.truncate/-/lodash.truncate-4.4.2.tgz"
+  resolved "https://registry.yarnpkg.com/lodash.truncate/-/lodash.truncate-4.4.2.tgz#5a350da0b1113b837ecfffd5812cbe58d6eae193"
   integrity sha512-jttmRe7bRse52OsWIMDLaXxWqRAmtIUccAQ3garviCqJjafXOfNMO0yMfNpdD6zbGaTU0P5Nz7e7gAT6cKmJRw==
 
 lodash@^4.0.1, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21:
   version "4.17.21"
-  resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
 loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
   version "1.4.0"
-  resolved "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz"
+  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
   dependencies:
     js-tokens "^3.0.0 || ^4.0.0"
 
 lower-case@^2.0.2:
   version "2.0.2"
-  resolved "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz"
+  resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-2.0.2.tgz#6fa237c63dbdc4a82ca0fd882e4722dc5e634e28"
   integrity sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==
   dependencies:
     tslib "^2.0.3"
 
 lru-cache@^5.1.1:
   version "5.1.1"
-  resolved "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-5.1.1.tgz#1da27e6710271947695daf6848e847f01d84b920"
   integrity sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==
   dependencies:
     yallist "^3.0.2"
 
 lru-cache@^6.0.0:
   version "6.0.0"
-  resolved "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-6.0.0.tgz#6d6fe6570ebd96aaf90fcad1dafa3b2566db3a94"
   integrity sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==
   dependencies:
     yallist "^4.0.0"
 
 lru_map@^0.3.3:
   version "0.3.3"
-  resolved "https://registry.npmjs.org/lru_map/-/lru_map-0.3.3.tgz"
+  resolved "https://registry.yarnpkg.com/lru_map/-/lru_map-0.3.3.tgz#b5c8351b9464cbd750335a79650a0ec0e56118dd"
   integrity sha512-Pn9cox5CsMYngeDbmChANltQl+5pi6XmTrraMSzhPmMBbmgcxmqWry0U3PGapCU1yB4/LqCcom7qhHZiF/jGfQ==
 
 magic-string@^0.25.0, magic-string@^0.25.7:
   version "0.25.9"
-  resolved "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.9.tgz#de7f9faf91ef8a1c91d02c2e5314c8277dbcdd1c"
   integrity sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==
   dependencies:
     sourcemap-codec "^1.4.8"
 
 magic-string@^0.27.0:
   version "0.27.0"
-  resolved "https://registry.npmjs.org/magic-string/-/magic-string-0.27.0.tgz"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.27.0.tgz#e4a3413b4bab6d98d2becffd48b4a257effdbbf3"
   integrity sha512-8UnnX2PeRAPZuN12svgR9j7M1uWMovg/CEnIwIG0LFkXSJJe4PdfUGiTGl8V9bsBHFUtfVINcSyYxd7q+kx9fA==
   dependencies:
     "@jridgewell/sourcemap-codec" "^1.4.13"
 
 make-dir@^3.0.2, make-dir@^3.1.0:
   version "3.1.0"
-  resolved "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz"
+  resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-3.1.0.tgz#415e967046b3a7f1d185277d84aa58203726a13f"
   integrity sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==
   dependencies:
     semver "^6.0.0"
 
 make-error@^1.3.6:
   version "1.3.6"
-  resolved "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz"
+  resolved "https://registry.yarnpkg.com/make-error/-/make-error-1.3.6.tgz#2eb2e37ea9b67c4891f684a1394799af484cf7a2"
   integrity sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==
 
-make-plural@^6.2.1, make-plural@^6.2.2:
+make-plural@^6.2.2:
   version "6.2.2"
-  resolved "https://registry.npmjs.org/make-plural/-/make-plural-6.2.2.tgz"
+  resolved "https://registry.yarnpkg.com/make-plural/-/make-plural-6.2.2.tgz#beb5fd751355e72660eeb2218bb98eec92853c6c"
   integrity sha512-8iTuFioatnTTmb/YJjywkVIHLjcwkFD9Ms0JpxjEm9Mo8eQYkh1z+55dwv4yc1jQ8ftVBxWQbihvZL1DfzGGWA==
 
-marked@^4.0.12:
-  version "4.2.12"
-  resolved "https://registry.npmjs.org/marked/-/marked-4.2.12.tgz"
-  integrity sha512-yr8hSKa3Fv4D3jdZmtMMPghgVt6TWbk86WQaWhDloQjRSQhMMYCAro7jP7VDJrjjdV8pxVxMssXS8B8Y5DZ5aw==
+marked@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/marked/-/marked-4.3.0.tgz#796362821b019f734054582038b116481b456cf3"
+  integrity sha512-PRsaiG84bK+AMvxziE/lCFss8juXjNaWzVbN5tXAm4XjeaS9NAHhop+PjQxz2A9h8Q4M/xGmzP8vqNwy6JeK0A==
 
-match-sorter@^6.2.0, match-sorter@^6.3.0:
+match-sorter@^6.2.0, match-sorter@^6.3.1:
   version "6.3.1"
-  resolved "https://registry.npmjs.org/match-sorter/-/match-sorter-6.3.1.tgz"
+  resolved "https://registry.yarnpkg.com/match-sorter/-/match-sorter-6.3.1.tgz#98cc37fda756093424ddf3cbc62bfe9c75b92bda"
   integrity sha512-mxybbo3pPNuA+ZuCUhm5bwNkXrJTbsk5VWbR5wiwz/GC6LIiegBGn2w3O08UG/jdbYLinw51fSQ5xNU1U3MgBw==
   dependencies:
     "@babel/runtime" "^7.12.5"
@@ -5971,7 +5950,7 @@ match-sorter@^6.2.0, match-sorter@^6.3.0:
 
 material-colors@^1.2.1:
   version "1.2.6"
-  resolved "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz"
+  resolved "https://registry.yarnpkg.com/material-colors/-/material-colors-1.2.6.tgz#6d1958871126992ceecc72f4bcc4d8f010865f46"
   integrity sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg==
 
 mdast-util-definitions@^5.0.0:
@@ -6022,24 +6001,19 @@ mdast-util-to-string@^3.1.0:
   dependencies:
     "@types/mdast" "^3.0.0"
 
-mdn-data@2.0.14:
-  version "2.0.14"
-  resolved "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz"
-  integrity sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==
-
 memoize-one@^5.1.1:
   version "5.2.1"
-  resolved "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz"
+  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e"
   integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==
 
 merge-stream@^2.0.0:
   version "2.0.0"
-  resolved "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz"
+  resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
   integrity sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==
 
 merge2@^1.3.0, merge2@^1.4.1:
   version "1.4.1"
-  resolved "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz"
+  resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
   integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
 
 micromark-core-commonmark@^1.0.1:
@@ -6239,7 +6213,7 @@ micromark@^3.0.0:
 
 micromatch@^4.0.4, micromatch@^4.0.5:
   version "4.0.5"
-  resolved "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.5.tgz#bc8999a7cbbf77cdc89f132f6e467051b49090c6"
   integrity sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==
   dependencies:
     braces "^3.0.2"
@@ -6247,52 +6221,52 @@ micromatch@^4.0.4, micromatch@^4.0.5:
 
 mime-db@1.52.0:
   version "1.52.0"
-  resolved "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70"
   integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==
 
 mime-types@^2.1.12:
   version "2.1.35"
-  resolved "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a"
   integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
   dependencies:
     mime-db "1.52.0"
 
 min-document@^2.19.0:
   version "2.19.0"
-  resolved "https://registry.npmjs.org/min-document/-/min-document-2.19.0.tgz"
+  resolved "https://registry.yarnpkg.com/min-document/-/min-document-2.19.0.tgz#7bd282e3f5842ed295bb748cdd9f1ffa2c824685"
   integrity sha512-9Wy1B3m3f66bPPmU5hdA4DR4PB2OfDU/+GS3yAB7IQozE3tqXaVv2zOjgla7MEGSRv95+ILmOuvhLkOK6wJtCQ==
   dependencies:
     dom-walk "^0.1.0"
 
 minimatch@^3.0.4, minimatch@^3.0.5, minimatch@^3.1.1, minimatch@^3.1.2:
   version "3.1.2"
-  resolved "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"
   integrity sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==
   dependencies:
     brace-expansion "^1.1.7"
 
 minimatch@^5.0.1:
   version "5.1.6"
-  resolved "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-5.1.6.tgz#1cfcb8cf5522ea69952cd2af95ae09477f122a96"
   integrity sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==
   dependencies:
     brace-expansion "^2.0.1"
 
 minimist@^1.2.0, minimist@^1.2.6:
-  version "1.2.7"
-  resolved "https://registry.npmjs.org/minimist/-/minimist-1.2.7.tgz"
-  integrity sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==
+  version "1.2.8"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.8.tgz#c1a464e7693302e082a075cee0c057741ac4772c"
+  integrity sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==
 
 mkdirp@^0.5.5:
   version "0.5.6"
-  resolved "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz"
+  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.6.tgz#7def03d2432dcae4ba1d611445c48396062255f6"
   integrity sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==
   dependencies:
     minimist "^1.2.6"
 
 moo@^0.5.1:
   version "0.5.2"
-  resolved "https://registry.npmjs.org/moo/-/moo-0.5.2.tgz"
+  resolved "https://registry.yarnpkg.com/moo/-/moo-0.5.2.tgz#f9fe82473bc7c184b0d32e2215d3f6e67278733c"
   integrity sha512-iSAJLHYKnX41mKcJKjqvnAN9sf0LMDTXDEvFv+ffuRR9a1MIuXLjMNL6EsnDHSkKLTWNqQQ5uo61P4EbU4NU+Q==
 
 mri@^1.1.0:
@@ -6302,67 +6276,60 @@ mri@^1.1.0:
 
 ms@2.1.2:
   version "2.1.2"
-  resolved "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
   integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
 
 ms@^2.1.1:
   version "2.1.3"
-  resolved "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
   integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
 
-multishift@^2.0.5:
-  version "2.0.5"
-  resolved "https://registry.npmjs.org/multishift/-/multishift-2.0.5.tgz"
-  integrity sha512-4af6gvIdP7etKx/zY1k/CGG5vjBPUB4LDfvILuAFA3nnZkj29WcaxXm4cm4CYFcM3vVaVF06csNMpP77tiJwBw==
+multishift@^2.0.8:
+  version "2.0.8"
+  resolved "https://registry.yarnpkg.com/multishift/-/multishift-2.0.8.tgz#157e5c578e6ed66b0dee6811de75e7daefca44d0"
+  integrity sha512-J0W3pSc1CJ52avBUlMMicMMOxfBnHFDpX2rYzWjo1bjwZBx2UaEcOHm+Ntgr30mQxkoD25uZY53g9Ho/0cKZyA==
   dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@reach/auto-id" "^0.16.0"
-    "@remirror/core-helpers" "^2.0.1"
-    "@remirror/core-types" "^2.0.3"
+    "@babel/runtime" "^7.21.0"
+    "@remirror/core-helpers" "^2.0.2"
+    "@remirror/core-types" "^2.0.5"
     "@seznam/compose-react-refs" "^1.0.6"
-    a11y-status "^2.0.0"
-    compute-scroll-into-view "^1.0.17"
-    react-use "^17.3.2"
+    a11y-status "^2.0.1"
+    compute-scroll-into-view "^1.0.20"
     tiny-warning "^1.0.3"
-    w3c-keyname "^2.2.4"
+    w3c-keyname "^2.2.6"
 
-nano-css@^5.3.1:
-  version "5.3.5"
-  resolved "https://registry.npmjs.org/nano-css/-/nano-css-5.3.5.tgz"
-  integrity sha512-vSB9X12bbNu4ALBu7nigJgRViZ6ja3OU7CeuiV1zMIbXOdmkLahgtPmh3GBOlDxbKY0CitqlPdOReGlBLSp+yg==
+mz@^2.7.0:
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/mz/-/mz-2.7.0.tgz#95008057a56cafadc2bc63dde7f9ff6955948e32"
+  integrity sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==
   dependencies:
-    css-tree "^1.1.2"
-    csstype "^3.0.6"
-    fastest-stable-stringify "^2.0.2"
-    inline-style-prefixer "^6.0.0"
-    rtl-css-js "^1.14.0"
-    sourcemap-codec "^1.4.8"
-    stacktrace-js "^2.0.2"
-    stylis "^4.0.6"
+    any-promise "^1.0.0"
+    object-assign "^4.0.1"
+    thenify-all "^1.0.0"
 
 nanoevents@^5.1.13:
   version "5.1.13"
-  resolved "https://registry.npmjs.org/nanoevents/-/nanoevents-5.1.13.tgz"
+  resolved "https://registry.yarnpkg.com/nanoevents/-/nanoevents-5.1.13.tgz#0e49c30acbcf847c10f29f1d1e7147c0f88fa3d1"
   integrity sha512-JFAeG9fp0QZnRoESHjkbVFbZ9BkOXkkagUVwZVo/pkSX+Fq1VKlY+5og/8X9CYc6C7vje/CV+bwJ5M2X0+IY9Q==
 
-nanoid@^3.3.4:
-  version "3.3.4"
-  resolved "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz"
-  integrity sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==
+nanoid@^3.3.4, nanoid@^3.3.6:
+  version "3.3.6"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.6.tgz#443380c856d6e9f9824267d960b4236ad583ea4c"
+  integrity sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==
 
 natural-compare-lite@^1.4.0:
   version "1.4.0"
-  resolved "https://registry.npmjs.org/natural-compare-lite/-/natural-compare-lite-1.4.0.tgz"
+  resolved "https://registry.yarnpkg.com/natural-compare-lite/-/natural-compare-lite-1.4.0.tgz#17b09581988979fddafe0201e931ba933c96cbb4"
   integrity sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==
 
 natural-compare@^1.4.0:
   version "1.4.0"
-  resolved "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz"
+  resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
   integrity sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==
 
 next-pwa@^5.6.0:
   version "5.6.0"
-  resolved "https://registry.npmjs.org/next-pwa/-/next-pwa-5.6.0.tgz"
+  resolved "https://registry.yarnpkg.com/next-pwa/-/next-pwa-5.6.0.tgz#f7b1960c4fdd7be4253eb9b41b612ac773392bf4"
   integrity sha512-XV8g8C6B7UmViXU8askMEYhWwQ4qc/XqJGnexbLV68hzKaGHZDMtHsm2TNxFcbR7+ypVuth/wwpiIlMwpRJJ5A==
   dependencies:
     babel-loader "^8.2.5"
@@ -6379,7 +6346,7 @@ next-themes@^0.2.1:
 
 next@12.3.2:
   version "12.3.2"
-  resolved "https://registry.npmjs.org/next/-/next-12.3.2.tgz"
+  resolved "https://registry.yarnpkg.com/next/-/next-12.3.2.tgz#3a3356a8d752726128825a8bdf17f2a3b3f861cf"
   integrity sha512-orzvvebCwOqaz1eA5ZA0R5dbKxqtJyw7yeig7kDspu6p8OrplfyelzpvMHcDTKscv/l0nn/0l0v3mSsE8w4k7A==
   dependencies:
     "@next/env" "12.3.2"
@@ -6405,7 +6372,7 @@ next@12.3.2:
 
 no-case@^3.0.4:
   version "3.0.4"
-  resolved "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz"
+  resolved "https://registry.yarnpkg.com/no-case/-/no-case-3.0.4.tgz#d361fd5c9800f558551a8369fc0dcd4662b6124d"
   integrity sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==
   dependencies:
     lower-case "^2.0.2"
@@ -6413,41 +6380,31 @@ no-case@^3.0.4:
 
 node-fetch@^2.6.7:
   version "2.6.9"
-  resolved "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.9.tgz"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.9.tgz#7c7f744b5cc6eb5fd404e0c7a9fec630a55657e6"
   integrity sha512-DJm/CJkZkRjKKj4Zi4BsKVZh3ValV5IR5s7LVZnW+6YMh0W1BfNA8XSs6DLMGYlId5F3KnA70uu2qepcR08Qqg==
   dependencies:
     whatwg-url "^5.0.0"
 
 node-releases@^2.0.8:
   version "2.0.10"
-  resolved "https://registry.npmjs.org/node-releases/-/node-releases-2.0.10.tgz"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.10.tgz#c311ebae3b6a148c89b1813fd7c4d3c024ef537f"
   integrity sha512-5GFldHPXVG/YZmFzJvKK2zDSzPKhEp0+ZR5SVaoSag9fsL5YgHbUHDfnG5494ISANDcK4KwPXAx2xqVEydmd7w==
 
 normalize-path@^3.0.0, normalize-path@~3.0.0:
   version "3.0.0"
-  resolved "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz"
+  resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
   integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
 
 normalize-range@^0.1.2:
   version "0.1.2"
-  resolved "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz"
+  resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942"
   integrity sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==
 
 normalize.css@^8.0.1:
   version "8.0.1"
-  resolved "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz"
+  resolved "https://registry.yarnpkg.com/normalize.css/-/normalize.css-8.0.1.tgz#9b98a208738b9cc2634caacbc42d131c97487bf3"
   integrity sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==
 
-npmlog@^4.1.2:
-  version "4.1.2"
-  resolved "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz"
-  integrity sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==
-  dependencies:
-    are-we-there-yet "~1.1.2"
-    console-control-strings "~1.1.0"
-    gauge "~2.7.3"
-    set-blocking "~2.0.0"
-
 nprogress@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/nprogress/-/nprogress-0.2.0.tgz#cb8f34c53213d895723fcbab907e9422adbcafb1"
@@ -6455,27 +6412,27 @@ nprogress@^0.2.0:
 
 number-is-nan@^1.0.0:
   version "1.0.1"
-  resolved "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz"
+  resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"
   integrity sha512-4jbtZXNAsfZbAHiiqjLPBiCl16dES1zI4Hpzzxw61Tk+loF+sBDBKx1ICKKKwIqQ7M0mFn1TmkN7euSncWgHiQ==
 
-object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
+object-assign@^4.0.1, object-assign@^4.1.1:
   version "4.1.1"
-  resolved "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz"
+  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
   integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==
 
 object-hash@^3.0.0:
   version "3.0.0"
-  resolved "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz"
+  resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-3.0.0.tgz#73f97f753e7baffc0e2cc9d6e079079744ac82e9"
   integrity sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==
 
-object-inspect@^1.12.2, object-inspect@^1.9.0:
+object-inspect@^1.12.3, object-inspect@^1.9.0:
   version "1.12.3"
-  resolved "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.3.tgz"
+  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.12.3.tgz#ba62dffd67ee256c8c086dfae69e016cd1f198b9"
   integrity sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==
 
 object-is@^1.0.1, object-is@^1.1.5:
   version "1.1.5"
-  resolved "https://registry.npmjs.org/object-is/-/object-is-1.1.5.tgz"
+  resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.5.tgz#b9deeaa5fc7f1846a0faecdceec138e5778f53ac"
   integrity sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw==
   dependencies:
     call-bind "^1.0.2"
@@ -6483,12 +6440,12 @@ object-is@^1.0.1, object-is@^1.1.5:
 
 object-keys@^1.1.1:
   version "1.1.1"
-  resolved "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz"
+  resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
   integrity sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==
 
 object.assign@^4.1.3, object.assign@^4.1.4:
   version "4.1.4"
-  resolved "https://registry.npmjs.org/object.assign/-/object.assign-4.1.4.tgz"
+  resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.4.tgz#9673c7c7c351ab8c4d0b516f4343ebf4dfb7799f"
   integrity sha512-1mxKf0e58bvyjSCtKYY4sRe9itRk3PJpquJOjeIkz885CczcI4IvJJDLPS72oowuSh+pBxUFROpX+TU++hxhZQ==
   dependencies:
     call-bind "^1.0.2"
@@ -6498,7 +6455,7 @@ object.assign@^4.1.3, object.assign@^4.1.4:
 
 object.entries@^1.1.5, object.entries@^1.1.6:
   version "1.1.6"
-  resolved "https://registry.npmjs.org/object.entries/-/object.entries-1.1.6.tgz"
+  resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.1.6.tgz#9737d0e5b8291edd340a3e3264bb8a3b00d5fa23"
   integrity sha512-leTPzo4Zvg3pmbQ3rDK69Rl8GQvIqMWubrkxONG9/ojtFE2rD9fjMKfSI5BxW3osRH1m6VdzmqK8oAY9aT4x5w==
   dependencies:
     call-bind "^1.0.2"
@@ -6507,7 +6464,7 @@ object.entries@^1.1.5, object.entries@^1.1.6:
 
 object.fromentries@^2.0.5, object.fromentries@^2.0.6:
   version "2.0.6"
-  resolved "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.6.tgz"
+  resolved "https://registry.yarnpkg.com/object.fromentries/-/object.fromentries-2.0.6.tgz#cdb04da08c539cffa912dcd368b886e0904bfa73"
   integrity sha512-VciD13dswC4j1Xt5394WR4MzmAQmlgN72phd/riNp9vtD7tp4QQWJ0R4wvclXcafgcYK8veHRed2W6XeGBvcfg==
   dependencies:
     call-bind "^1.0.2"
@@ -6516,7 +6473,7 @@ object.fromentries@^2.0.5, object.fromentries@^2.0.6:
 
 object.hasown@^1.1.1, object.hasown@^1.1.2:
   version "1.1.2"
-  resolved "https://registry.npmjs.org/object.hasown/-/object.hasown-1.1.2.tgz"
+  resolved "https://registry.yarnpkg.com/object.hasown/-/object.hasown-1.1.2.tgz#f919e21fad4eb38a57bc6345b3afd496515c3f92"
   integrity sha512-B5UIT3J1W+WuWIU55h0mjlwaqxiE5vYENJXIXZ4VFe05pNYrkKuK0U/6aFcb0pKywYJh7IhfoqUfKVmrJJHZHw==
   dependencies:
     define-properties "^1.1.4"
@@ -6524,21 +6481,21 @@ object.hasown@^1.1.1, object.hasown@^1.1.2:
 
 object.omit@^3.0.0:
   version "3.0.0"
-  resolved "https://registry.npmjs.org/object.omit/-/object.omit-3.0.0.tgz"
+  resolved "https://registry.yarnpkg.com/object.omit/-/object.omit-3.0.0.tgz#0e3edc2fce2ba54df5577ff529f6d97bd8a522af"
   integrity sha512-EO+BCv6LJfu+gBIF3ggLicFebFLN5zqzz/WWJlMFfkMyGth+oBkhxzDl0wx2W4GkLzuQs/FsSkXZb2IMWQqmBQ==
   dependencies:
     is-extendable "^1.0.0"
 
 object.pick@^1.3.0:
   version "1.3.0"
-  resolved "https://registry.npmjs.org/object.pick/-/object.pick-1.3.0.tgz"
+  resolved "https://registry.yarnpkg.com/object.pick/-/object.pick-1.3.0.tgz#87a10ac4c1694bd2e1cbf53591a66141fb5dd747"
   integrity sha512-tqa/UMy/CCoYmj+H5qc07qvSL9dqcs/WZENZ1JbtWBlATP+iVOe778gE6MSijnyCnORzDuX6hU+LA4SZ09YjFQ==
   dependencies:
     isobject "^3.0.1"
 
 object.values@^1.1.5, object.values@^1.1.6:
   version "1.1.6"
-  resolved "https://registry.npmjs.org/object.values/-/object.values-1.1.6.tgz"
+  resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.1.6.tgz#4abbaa71eba47d63589d402856f908243eea9b1d"
   integrity sha512-FVVTkD1vENCsAcwNs9k6jea2uHC/X0+JcjG8YA60FN5CMaJmG95wT9jek/xX9nornqGRrBkKtzuAu2wuHpKqvw==
   dependencies:
     call-bind "^1.0.2"
@@ -6547,14 +6504,14 @@ object.values@^1.1.5, object.values@^1.1.6:
 
 once@^1.3.0:
   version "1.4.0"
-  resolved "https://registry.npmjs.org/once/-/once-1.4.0.tgz"
+  resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
   integrity sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==
   dependencies:
     wrappy "1"
 
 optionator@^0.9.1:
   version "0.9.1"
-  resolved "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz"
+  resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.9.1.tgz#4f236a6373dae0566a6d43e1326674f50c291499"
   integrity sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==
   dependencies:
     deep-is "^0.1.3"
@@ -6566,50 +6523,50 @@ optionator@^0.9.1:
 
 orderedmap@^2.0.0:
   version "2.1.0"
-  resolved "https://registry.npmjs.org/orderedmap/-/orderedmap-2.1.0.tgz"
+  resolved "https://registry.yarnpkg.com/orderedmap/-/orderedmap-2.1.0.tgz#819457082fa3a06abd316d83a281a1ca467437cd"
   integrity sha512-/pIFexOm6S70EPdznemIz3BQZoJ4VTFrhqzu0ACBqBgeLsLxq8e6Jim63ImIfwW/zAD1AlXpRMlOv3aghmo4dA==
 
 p-limit@^2.2.0:
   version "2.3.0"
-  resolved "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz"
+  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-2.3.0.tgz#3dd33c647a214fdfffd835933eb086da0dc21db1"
   integrity sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==
   dependencies:
     p-try "^2.0.0"
 
 p-limit@^3.0.2:
   version "3.1.0"
-  resolved "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz"
+  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-3.1.0.tgz#e1daccbe78d0d1388ca18c64fea38e3e57e3706b"
   integrity sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==
   dependencies:
     yocto-queue "^0.1.0"
 
 p-locate@^4.1.0:
   version "4.1.0"
-  resolved "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz"
+  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-4.1.0.tgz#a3428bb7088b3a60292f66919278b7c297ad4f07"
   integrity sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==
   dependencies:
     p-limit "^2.2.0"
 
 p-locate@^5.0.0:
   version "5.0.0"
-  resolved "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz"
+  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-5.0.0.tgz#83c8315c6785005e3bd021839411c9e110e6d834"
   integrity sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==
   dependencies:
     p-limit "^3.0.2"
 
 p-map@^2.0.0:
   version "2.1.0"
-  resolved "https://registry.npmjs.org/p-map/-/p-map-2.1.0.tgz"
+  resolved "https://registry.yarnpkg.com/p-map/-/p-map-2.1.0.tgz#310928feef9c9ecc65b68b17693018a665cea175"
   integrity sha512-y3b8Kpd8OAN444hxfBbFfj1FY/RjtTd8tzYwhUqNYXx0fXx2iX4maP4Qr6qhIKbQXI02wTLAda4fYUbDagTUFw==
 
 p-try@^2.0.0:
   version "2.2.0"
-  resolved "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz"
+  resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6"
   integrity sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==
 
 param-case@^3.0.4:
   version "3.0.4"
-  resolved "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz"
+  resolved "https://registry.yarnpkg.com/param-case/-/param-case-3.0.4.tgz#7d17fe4aa12bde34d4a77d91acfb6219caad01c5"
   integrity sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==
   dependencies:
     dot-case "^3.0.4"
@@ -6617,19 +6574,19 @@ param-case@^3.0.4:
 
 parent-module@^1.0.0:
   version "1.0.1"
-  resolved "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz"
+  resolved "https://registry.yarnpkg.com/parent-module/-/parent-module-1.0.1.tgz#691d2709e78c79fae3a156622452d00762caaaa2"
   integrity sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==
   dependencies:
     callsites "^3.0.0"
 
 parenthesis@^3.1.8:
   version "3.1.8"
-  resolved "https://registry.npmjs.org/parenthesis/-/parenthesis-3.1.8.tgz"
+  resolved "https://registry.yarnpkg.com/parenthesis/-/parenthesis-3.1.8.tgz#3457fccb8f05db27572b841dad9d2630b912f125"
   integrity sha512-KF/U8tk54BgQewkJPvB4s/US3VQY68BRDpH638+7O/n58TpnwiwnOtGIOsT2/i+M78s61BBpeC83STB88d8sqw==
 
 parse-entities@^2.0.0:
   version "2.0.0"
-  resolved "https://registry.npmjs.org/parse-entities/-/parse-entities-2.0.0.tgz"
+  resolved "https://registry.yarnpkg.com/parse-entities/-/parse-entities-2.0.0.tgz#53c6eb5b9314a1f4ec99fa0fdf7ce01ecda0cbe8"
   integrity sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==
   dependencies:
     character-entities "^1.0.0"
@@ -6641,12 +6598,12 @@ parse-entities@^2.0.0:
 
 parse-exponential@~1.0.1:
   version "1.0.1"
-  resolved "https://registry.npmjs.org/parse-exponential/-/parse-exponential-1.0.1.tgz"
+  resolved "https://registry.yarnpkg.com/parse-exponential/-/parse-exponential-1.0.1.tgz#ddf8181c454a9a4b131765381efa43f5c1c61019"
   integrity sha512-QUa7PaOc7O6ei3hb0NmADJGrDYLbPBdcSKFUBGfwlMdHsrg8LOsliPEkpP0qHSKQOyzyyxCB00fxJKcP75Gl7w==
 
 parse-json@^5.0.0:
   version "5.2.0"
-  resolved "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz"
+  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-5.2.0.tgz#c76fc66dee54231c962b22bcc8a72cf2f99753cd"
   integrity sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==
   dependencies:
     "@babel/code-frame" "^7.0.0"
@@ -6656,7 +6613,7 @@ parse-json@^5.0.0:
 
 pascal-case@^3.1.2:
   version "3.1.2"
-  resolved "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.2.tgz"
+  resolved "https://registry.yarnpkg.com/pascal-case/-/pascal-case-3.1.2.tgz#b48e0ef2b98e205e7c1dae747d0b1508237660eb"
   integrity sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==
   dependencies:
     no-case "^3.0.4"
@@ -6664,7 +6621,7 @@ pascal-case@^3.1.2:
 
 path-case@^3.0.4:
   version "3.0.4"
-  resolved "https://registry.npmjs.org/path-case/-/path-case-3.0.4.tgz"
+  resolved "https://registry.yarnpkg.com/path-case/-/path-case-3.0.4.tgz#9168645334eb942658375c56f80b4c0cb5f82c6f"
   integrity sha512-qO4qCFjXqVTrcbPt/hQfhTQ+VhFsqNKOPtytgNKkKxSoEp3XPUQ8ObFuePylOIok5gjn69ry8XiULxCwot3Wfg==
   dependencies:
     dot-case "^3.0.4"
@@ -6672,113 +6629,126 @@ path-case@^3.0.4:
 
 path-exists@^4.0.0:
   version "4.0.0"
-  resolved "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz"
+  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-4.0.0.tgz#513bdbe2d3b95d7762e8c1137efa195c6c61b5b3"
   integrity sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==
 
 path-is-absolute@^1.0.0:
   version "1.0.1"
-  resolved "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz"
+  resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
   integrity sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==
 
 path-is-inside@^1.0.2:
   version "1.0.2"
-  resolved "https://registry.npmjs.org/path-is-inside/-/path-is-inside-1.0.2.tgz"
+  resolved "https://registry.yarnpkg.com/path-is-inside/-/path-is-inside-1.0.2.tgz#365417dede44430d1c11af61027facf074bdfc53"
   integrity sha512-DUWJr3+ULp4zXmol/SZkFf3JGsS9/SIv+Y3Rt93/UjPpDpklB5f1er4O3POIbUuUJ3FXgqte2Q7SrU6zAqwk8w==
 
 path-key@^3.1.0:
   version "3.1.1"
-  resolved "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz"
+  resolved "https://registry.yarnpkg.com/path-key/-/path-key-3.1.1.tgz#581f6ade658cbba65a0d3380de7753295054f375"
   integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==
 
 path-parse@^1.0.7:
   version "1.0.7"
-  resolved "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz"
+  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
   integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
 
 path-type@^4.0.0:
   version "4.0.0"
-  resolved "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz"
+  resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
   integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
 
 picocolors@^1.0.0:
   version "1.0.0"
-  resolved "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz"
+  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
   integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
 
 picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.2, picomatch@^2.3.1:
   version "2.3.1"
-  resolved "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz"
+  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
   integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
 
 pify@^2.0.0, pify@^2.3.0:
   version "2.3.0"
-  resolved "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz"
+  resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
   integrity sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==
 
 pify@^4.0.1:
   version "4.0.1"
-  resolved "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz"
+  resolved "https://registry.yarnpkg.com/pify/-/pify-4.0.1.tgz#4b2cd25c50d598735c50292224fd8c6df41e3231"
   integrity sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==
 
 pinkie-promise@^2.0.0:
   version "2.0.1"
-  resolved "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-2.0.1.tgz"
+  resolved "https://registry.yarnpkg.com/pinkie-promise/-/pinkie-promise-2.0.1.tgz#2135d6dfa7a358c069ac9b178776288228450ffa"
   integrity sha512-0Gni6D4UcLTbv9c57DfxDGdr41XfgUjqWZu492f0cIGr16zDU06BWP/RAEvOuo7CQ0CNjHaLlM59YJJFm3NWlw==
   dependencies:
     pinkie "^2.0.0"
 
 pinkie@^2.0.0:
   version "2.0.4"
-  resolved "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz"
+  resolved "https://registry.yarnpkg.com/pinkie/-/pinkie-2.0.4.tgz#72556b80cfa0d48a974e80e77248e80ed4f7f870"
   integrity sha512-MnUuEycAemtSaeFSjXKW/aroV7akBbY+Sv+RkyqFjgAe73F+MR0TBWKBRDkmfWq/HiFmdavfZ1G7h4SPZXaCSg==
 
+pirates@^4.0.1:
+  version "4.0.5"
+  resolved "https://registry.yarnpkg.com/pirates/-/pirates-4.0.5.tgz#feec352ea5c3268fb23a37c702ab1699f35a5f3b"
+  integrity sha512-8V9+HQPupnaXMA23c5hvl69zXvTwTzyAYasnkb0Tts4XvO4CliqONMOnvlq26rkhLC3nWDFBJf73LU1e1VZLaQ==
+
 pkg-dir@^4.1.0:
   version "4.2.0"
-  resolved "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz"
+  resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-4.2.0.tgz#f099133df7ede422e81d1d8448270eeb3e4261f3"
   integrity sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==
   dependencies:
     find-up "^4.0.0"
 
 popper.js@^1.14.4, popper.js@^1.16.1:
   version "1.16.1"
-  resolved "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz"
+  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b"
   integrity sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==
 
-postcss-import@^14.1.0:
-  version "14.1.0"
-  resolved "https://registry.npmjs.org/postcss-import/-/postcss-import-14.1.0.tgz"
-  integrity sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==
+postcss-import@^15.1.0:
+  version "15.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-15.1.0.tgz#41c64ed8cc0e23735a9698b3249ffdbf704adc70"
+  integrity sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==
   dependencies:
     postcss-value-parser "^4.0.0"
     read-cache "^1.0.0"
     resolve "^1.1.7"
 
-postcss-js@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.0.tgz"
-  integrity sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==
+postcss-js@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-js/-/postcss-js-4.0.1.tgz#61598186f3703bab052f1c4f7d805f3991bee9d2"
+  integrity sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==
   dependencies:
     camelcase-css "^2.0.1"
 
-postcss-load-config@^3.1.4:
-  version "3.1.4"
-  resolved "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.4.tgz"
-  integrity sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==
+postcss-load-config@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-4.0.1.tgz#152383f481c2758274404e4962743191d73875bd"
+  integrity sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==
   dependencies:
     lilconfig "^2.0.5"
-    yaml "^1.10.2"
+    yaml "^2.1.1"
 
-postcss-nested@6.0.0:
-  version "6.0.0"
-  resolved "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.0.tgz"
-  integrity sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w==
+postcss-nested@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-6.0.1.tgz#f83dc9846ca16d2f4fa864f16e9d9f7d0961662c"
+  integrity sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==
   dependencies:
-    postcss-selector-parser "^6.0.10"
+    postcss-selector-parser "^6.0.11"
 
-postcss-selector-parser@^6.0.10:
-  version "6.0.11"
-  resolved "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.11.tgz"
-  integrity sha512-zbARubNdogI9j7WY4nQJBiNqQf3sLS3wCP4WfOidu+p28LofJqDH1tcXypGrcmMHhDk2t9wGhCsYe/+szLTy1g==
+postcss-selector-parser@6.0.10:
+  version "6.0.10"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz#79b61e2c0d1bfc2602d549e11d0876256f8df88d"
+  integrity sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==
+  dependencies:
+    cssesc "^3.0.0"
+    util-deprecate "^1.0.2"
+
+postcss-selector-parser@^6.0.11:
+  version "6.0.12"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.12.tgz#2efae5ffab3c8bfb2b7fbf0c426e3bca616c4abb"
+  integrity sha512-NdxGCAZdRrwVI1sy59+Wzrh+pMMHxapGnpfenDVlMEXoOcvt4pGE0JLK9YY2F5dLxcFYA/YbVQKhcGU+FtSYQg==
   dependencies:
     cssesc "^3.0.0"
     util-deprecate "^1.0.2"
@@ -6790,30 +6760,30 @@ postcss-value-parser@^3.3.0:
 
 postcss-value-parser@^4.0.0, postcss-value-parser@^4.2.0:
   version "4.2.0"
-  resolved "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz"
+  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
 
 postcss@8.4.14:
   version "8.4.14"
-  resolved "https://registry.npmjs.org/postcss/-/postcss-8.4.14.tgz"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.14.tgz#ee9274d5622b4858c1007a74d76e42e56fd21caf"
   integrity sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==
   dependencies:
     nanoid "^3.3.4"
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
-postcss@^8.4.14, postcss@^8.4.18:
-  version "8.4.21"
-  resolved "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz"
-  integrity sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==
+postcss@^8.4.14, postcss@^8.4.23:
+  version "8.4.23"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.23.tgz#df0aee9ac7c5e53e1075c24a3613496f9e6552ab"
+  integrity sha512-bQ3qMcpF6A/YjR55xtoTr0jGOlnPOKAIMdOWiv0EIT6HVPEaJiJB4NLljSbiHoC2RX7DN5Uvjtpbg1NPdwv1oA==
   dependencies:
-    nanoid "^3.3.4"
+    nanoid "^3.3.6"
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
 precision@~1.0.0:
   version "1.0.1"
-  resolved "https://registry.npmjs.org/precision/-/precision-1.0.1.tgz"
+  resolved "https://registry.yarnpkg.com/precision/-/precision-1.0.1.tgz#5cf489b9d4a114700d300479cb8b9d85a502cfe8"
   integrity sha512-cBMxnM2nzEF1xx75NhhOaKjsDNt92WUZv17t/p3wrvCfA+2RL0twbgfvXvgDbxxsfUUb5C5he5tla8Xa2ny1Ew==
   dependencies:
     is-finite "~1.0.1"
@@ -6821,47 +6791,32 @@ precision@~1.0.0:
 
 prelude-ls@^1.2.1:
   version "1.2.1"
-  resolved "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz"
+  resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
   integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
 
-prettier-plugin-tailwindcss@^0.2.7:
-  version "0.2.7"
-  resolved "https://registry.yarnpkg.com/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.2.7.tgz#2314d728cce9c9699ced41a01253eb48b4218da5"
-  integrity sha512-jQopIOgjLpX+y8HeD56XZw7onupRTC0cw7eKKUimI7vhjkPF5/1ltW5LyqaPtSyc8HvEpvNZsvvsGFa2qpa59w==
-
-prettier@^2.8.7:
-  version "2.8.7"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.7.tgz#bb79fc8729308549d28fe3a98fce73d2c0656450"
-  integrity sha512-yPngTo3aXUUmyuTjeTUT75txrf+aMh9FiD7q9ZE/i6r0bPb22g4FsE6Y338PQX1bmfy08i9QQCB7/rcUAVntfw==
-
-prettier@latest:
-  version "2.8.4"
-  resolved "https://registry.npmjs.org/prettier/-/prettier-2.8.4.tgz"
-  integrity sha512-vIS4Rlc2FNh0BySk3Wkd6xmwxB0FpOndW5fisM5H8hsZSxU2VWVB5CWIkIjWvrHjIhxk2g3bfMKM87zNTrZddw==
+prettier@^2.8.7, prettier@latest:
+  version "2.8.8"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.8.tgz#e8c5d7e98a4305ffe3de2e1fc4aca1a71c28b1da"
+  integrity sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==
 
 pretty-bytes@^5.3.0, pretty-bytes@^5.4.1:
   version "5.6.0"
-  resolved "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz"
+  resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.6.0.tgz#356256f643804773c82f64723fe78c92c62beaeb"
   integrity sha512-FFw039TmrBqFK8ma/7OL3sDz/VytdtJr044/QUJtH0wK9lb9jLq9tJyIxUwtQJHwar2BqtiA4iCWSwo9JLkzFg==
 
 prismjs@~1.27.0:
   version "1.27.0"
-  resolved "https://registry.npmjs.org/prismjs/-/prismjs-1.27.0.tgz"
+  resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.27.0.tgz#bb6ee3138a0b438a3653dd4d6ce0cc6510a45057"
   integrity sha512-t13BGPUlFDR7wRB5kQDG4jjl7XeuH6jbJGt11JHPL96qwsEHNX2+68tFXqc1/k+/jALsbSWJKUOT/hcYAZ5LkA==
 
-process-nextick-args@~2.0.0:
-  version "2.0.1"
-  resolved "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz"
-  integrity sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==
-
 progress@^2.0.0, progress@^2.0.3:
   version "2.0.3"
-  resolved "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz"
+  resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
   integrity sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==
 
 prop-types@^15.0.0, prop-types@^15.5.10, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
-  resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
   dependencies:
     loose-envify "^1.4.0"
@@ -6870,7 +6825,7 @@ prop-types@^15.0.0, prop-types@^15.5.10, prop-types@^15.6.1, prop-types@^15.6.2,
 
 property-information@^5.0.0:
   version "5.6.0"
-  resolved "https://registry.npmjs.org/property-information/-/property-information-5.6.0.tgz"
+  resolved "https://registry.yarnpkg.com/property-information/-/property-information-5.6.0.tgz#61675545fb23002f245c6540ec46077d4da3ed69"
   integrity sha512-YUHSPk+A30YPv+0Qf8i9Mbfe/C0hdPXk1s1jPVToV8pk8BQtpw10ct89Eo7OWkutrwqvT0eicAxlOg3dOAu8JA==
   dependencies:
     xtend "^4.0.0"
@@ -6882,24 +6837,24 @@ property-information@^6.0.0:
 
 prosemirror-collab@^1.3.0:
   version "1.3.0"
-  resolved "https://registry.npmjs.org/prosemirror-collab/-/prosemirror-collab-1.3.0.tgz"
+  resolved "https://registry.yarnpkg.com/prosemirror-collab/-/prosemirror-collab-1.3.0.tgz#601d33473bf72e6c43041a54b860c84c60b37769"
   integrity sha512-+S/IJ69G2cUu2IM5b3PBekuxs94HO1CxJIWOFrLQXUaUDKL/JfBx+QcH31ldBlBXyDEUl+k3Vltfi1E1MKp2mA==
   dependencies:
     prosemirror-state "^1.0.0"
 
-prosemirror-commands@^1.5.0:
-  version "1.5.0"
-  resolved "https://registry.npmjs.org/prosemirror-commands/-/prosemirror-commands-1.5.0.tgz"
-  integrity sha512-zL0Fxbj3fh71GPNHn5YdYgYGX2aU2XLecZYk2ekEF0oOD259HcXtM+96VjPVi5o3h4sGUdDfEEhGiREXW6U+4A==
+prosemirror-commands@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/prosemirror-commands/-/prosemirror-commands-1.5.1.tgz#89ddfa14e144dcc7fb0938aa0e2568c7fdde306f"
+  integrity sha512-ga1ga/RkbzxfAvb6iEXYmrEpekn5NCwTb8w1dr/gmhSoaGcQ0VPuCzOn5qDEpC45ql2oDkKoKQbRxLJwKLpMTQ==
   dependencies:
     prosemirror-model "^1.0.0"
     prosemirror-state "^1.0.0"
     prosemirror-transform "^1.0.0"
 
-prosemirror-dropcursor@^1.6.1:
-  version "1.7.0"
-  resolved "https://registry.npmjs.org/prosemirror-dropcursor/-/prosemirror-dropcursor-1.7.0.tgz"
-  integrity sha512-vzab/iPd3CjWILFv6WJz4+BlOwCywOcAGhvY5G/66OYPcaZehN8IVbGtHCV3oyhXk2yAA67nwMv/oNMvBV9k1A==
+prosemirror-dropcursor@^1.8.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/prosemirror-dropcursor/-/prosemirror-dropcursor-1.8.0.tgz#7bfa11925e0da41d1db869954fe51e1aa55158e4"
+  integrity sha512-TZMitR8nlp9Xh42pDYGcWopCoFPmJduoyGJ7FjYM2/7gZKnfD41TIaZN5Q1cQjm6Fm/P5vk/DpVYFhS8kDdigw==
   dependencies:
     prosemirror-state "^1.0.0"
     prosemirror-transform "^1.1.0"
@@ -6907,7 +6862,7 @@ prosemirror-dropcursor@^1.6.1:
 
 prosemirror-gapcursor@^1.3.1:
   version "1.3.1"
-  resolved "https://registry.npmjs.org/prosemirror-gapcursor/-/prosemirror-gapcursor-1.3.1.tgz"
+  resolved "https://registry.yarnpkg.com/prosemirror-gapcursor/-/prosemirror-gapcursor-1.3.1.tgz#8cfd874592e4504d63720e14ed680c7866e64554"
   integrity sha512-GKTeE7ZoMsx5uVfc51/ouwMFPq0o8YrZ7Hx4jTF4EeGbXxBveUV8CGv46mSHuBBeXGmvu50guoV2kSnOeZZnUA==
   dependencies:
     prosemirror-keymap "^1.0.0"
@@ -6916,61 +6871,62 @@ prosemirror-gapcursor@^1.3.1:
     prosemirror-view "^1.0.0"
 
 prosemirror-history@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.npmjs.org/prosemirror-history/-/prosemirror-history-1.3.0.tgz"
-  integrity sha512-qo/9Wn4B/Bq89/YD+eNWFbAytu6dmIM85EhID+fz9Jcl9+DfGEo8TTSrRhP15+fFEoaPqpHSxlvSzSEbmlxlUA==
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/prosemirror-history/-/prosemirror-history-1.3.1.tgz#d0dba9ed1cc2bce55a45ce9c7c8224e641f276b8"
+  integrity sha512-YMV/IWBZ+LZSfaNcBbPcaQUiAiJRYFyJW2aapuNzL8nhIRsI7fIO0ykJFSe802+mWeoTsVJ1jxvRWPYqaUqljQ==
   dependencies:
     prosemirror-state "^1.2.2"
     prosemirror-transform "^1.0.0"
+    prosemirror-view "^1.31.0"
     rope-sequence "^1.3.0"
 
 prosemirror-inputrules@^1.2.0:
   version "1.2.0"
-  resolved "https://registry.npmjs.org/prosemirror-inputrules/-/prosemirror-inputrules-1.2.0.tgz"
+  resolved "https://registry.yarnpkg.com/prosemirror-inputrules/-/prosemirror-inputrules-1.2.0.tgz#476dde2dc244050b3aca00cf58a82adfad6749e7"
   integrity sha512-eAW/M/NTSSzpCOxfR8Abw6OagdG0MiDAiWHQMQveIsZtoKVYzm0AflSPq/ymqJd56/Su1YPbwy9lM13wgHOFmQ==
   dependencies:
     prosemirror-state "^1.0.0"
     prosemirror-transform "^1.0.0"
 
-prosemirror-keymap@^1.0.0, prosemirror-keymap@^1.1.2, prosemirror-keymap@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.npmjs.org/prosemirror-keymap/-/prosemirror-keymap-1.2.0.tgz"
-  integrity sha512-TdSfu+YyLDd54ufN/ZeD1VtBRYpgZnTPnnbY+4R08DDgs84KrIPEPbJL8t1Lm2dkljFx6xeBE26YWH3aIzkPKg==
+prosemirror-keymap@^1.0.0, prosemirror-keymap@^1.1.2, prosemirror-keymap@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/prosemirror-keymap/-/prosemirror-keymap-1.2.1.tgz#3839e7db66cecddae7451f4246e73bdd8489be1d"
+  integrity sha512-kVK6WGC+83LZwuSJnuCb9PsADQnFZllt94qPP3Rx/vLcOUV65+IbBeH2nS5cFggPyEVJhGkGrgYFRrG250WhHQ==
   dependencies:
     prosemirror-state "^1.0.0"
     w3c-keyname "^2.2.0"
 
-prosemirror-model@^1.0.0, prosemirror-model@^1.16.0, prosemirror-model@^1.18.3, prosemirror-model@^1.8.1:
+prosemirror-model@^1.0.0, prosemirror-model@^1.16.0, prosemirror-model@^1.19.0, prosemirror-model@^1.8.1:
   version "1.19.0"
-  resolved "https://registry.npmjs.org/prosemirror-model/-/prosemirror-model-1.19.0.tgz"
+  resolved "https://registry.yarnpkg.com/prosemirror-model/-/prosemirror-model-1.19.0.tgz#d7ad9a65ada0bb12196f64fe0dd4fc392c841c29"
   integrity sha512-/CvFGJnwc41EJSfDkQLly1cAJJJmBpZwwUJtwZPTjY2RqZJfM8HVbCreOY/jti8wTRbVyjagcylyGoeJH/g/3w==
   dependencies:
     orderedmap "^2.0.0"
 
-prosemirror-paste-rules@^2.0.3:
-  version "2.0.3"
-  resolved "https://registry.npmjs.org/prosemirror-paste-rules/-/prosemirror-paste-rules-2.0.3.tgz"
-  integrity sha512-LN2aI19pHHVh0YdC9ZLkZ4zs/7emD9oDReRPXL02yab/7RRhKynllIvIKs96lSc3XiYQPJPIxUgUpetNX3NwBQ==
+prosemirror-paste-rules@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/prosemirror-paste-rules/-/prosemirror-paste-rules-2.0.5.tgz#5d7434ba2326135474b444d270802ee81eadf76c"
+  integrity sha512-nsEQjmydD54NlIIPsLgS5uEtgU0KwdDft8bTuBgCU2x5KFwAF8WGLEWZXQ7OaX8M5YINMiWVRqgN9eHA2alFOQ==
   dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@remirror/core-constants" "^2.0.0"
-    "@remirror/core-helpers" "^2.0.1"
+    "@babel/runtime" "^7.21.0"
+    "@remirror/core-constants" "^2.0.1"
+    "@remirror/core-helpers" "^2.0.2"
     escape-string-regexp "^4.0.0"
 
-prosemirror-resizable-view@^2.0.10:
-  version "2.0.10"
-  resolved "https://registry.npmjs.org/prosemirror-resizable-view/-/prosemirror-resizable-view-2.0.10.tgz"
-  integrity sha512-1ZWQi6euFPk9kWteFefUBxKUJgMZzgPAjqkQa/AjI/dCMR3y9cYu1C6RMKob4x1+oUwwOmSumldUgkBTSvqpQA==
+prosemirror-resizable-view@^2.0.12:
+  version "2.0.12"
+  resolved "https://registry.yarnpkg.com/prosemirror-resizable-view/-/prosemirror-resizable-view-2.0.12.tgz#b8a2037d2d523dbf61505dd40ec592c3ceb1d733"
+  integrity sha512-Du+VyKmN6e4RrgWcpja5oo6uekDywU+EVeogYpreqZsELpvVzH/tpCDzlI47mvk7ky50eyYK8jxb5vSHR/mEsA==
   dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@remirror/core-helpers" "^2.0.1"
-    "@remirror/core-utils" "^2.0.10"
-    prosemirror-model "^1.18.3"
-    prosemirror-view "^1.29.1"
+    "@babel/runtime" "^7.21.0"
+    "@remirror/core-helpers" "^2.0.2"
+    "@remirror/core-utils" "^2.0.12"
+    prosemirror-model "^1.19.0"
+    prosemirror-view "^1.30.2"
 
 prosemirror-schema-list@^1.2.2:
   version "1.2.2"
-  resolved "https://registry.npmjs.org/prosemirror-schema-list/-/prosemirror-schema-list-1.2.2.tgz"
+  resolved "https://registry.yarnpkg.com/prosemirror-schema-list/-/prosemirror-schema-list-1.2.2.tgz#bafda37b72367d39accdcaf6ddf8fb654a16e8e5"
   integrity sha512-rd0pqSDp86p0MUMKG903g3I9VmElFkQpkZ2iOd3EOVg1vo5Cst51rAsoE+5IPy0LPXq64eGcCYlW1+JPNxOj2w==
   dependencies:
     prosemirror-model "^1.0.0"
@@ -6979,27 +6935,27 @@ prosemirror-schema-list@^1.2.2:
 
 prosemirror-state@^1.0.0, prosemirror-state@^1.2.2, prosemirror-state@^1.3.1, prosemirror-state@^1.4.2:
   version "1.4.2"
-  resolved "https://registry.npmjs.org/prosemirror-state/-/prosemirror-state-1.4.2.tgz"
+  resolved "https://registry.yarnpkg.com/prosemirror-state/-/prosemirror-state-1.4.2.tgz#f93bd8a33a4454efab917ba9b738259d828db7e5"
   integrity sha512-puuzLD2mz/oTdfgd8msFbe0A42j5eNudKAAPDB0+QJRw8cO1ygjLmhLrg9RvDpf87Dkd6D4t93qdef00KKNacQ==
   dependencies:
     prosemirror-model "^1.0.0"
     prosemirror-transform "^1.0.0"
     prosemirror-view "^1.27.0"
 
-prosemirror-suggest@^2.0.3:
-  version "2.0.3"
-  resolved "https://registry.npmjs.org/prosemirror-suggest/-/prosemirror-suggest-2.0.3.tgz"
-  integrity sha512-GIglNie+M982LwoYKLiKCQfdBr3nk/A7WtM7EtETZReExudKRXvuAI9Xe6Q/ulbyQy+4qVT4mBw7Z1Ziye2SMQ==
+prosemirror-suggest@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/prosemirror-suggest/-/prosemirror-suggest-2.0.4.tgz#17d38f389792a893aaf7729d9fb6a5f5c03bdb71"
+  integrity sha512-1jaOSjlhyJwiNY8CexLIV+LsNDO9Juw6mIMjFfg7iB0rG0jn4sNeA8nvKef6OrhZAYiHrHfMuDAp4UNpFh4XFw==
   dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@remirror/core-constants" "^2.0.0"
-    "@remirror/core-helpers" "^2.0.1"
-    "@remirror/types" "^1.0.0"
+    "@babel/runtime" "^7.21.0"
+    "@remirror/core-constants" "^2.0.1"
+    "@remirror/core-helpers" "^2.0.2"
+    "@remirror/types" "^1.0.1"
     escape-string-regexp "^4.0.0"
 
-prosemirror-tables@^1.3.0:
+prosemirror-tables@^1.3.2:
   version "1.3.2"
-  resolved "https://registry.npmjs.org/prosemirror-tables/-/prosemirror-tables-1.3.2.tgz"
+  resolved "https://registry.yarnpkg.com/prosemirror-tables/-/prosemirror-tables-1.3.2.tgz#ca208c6a55d510af14b652d23e800e00ba6bebd4"
   integrity sha512-/9JTeN6s58Zq66HXaxP6uf8PAmc7XXKZFPlOGVtLvxEd6xBP6WtzaJB9wBjiGUzwbdhdMEy7V62yuHqk/3VrnQ==
   dependencies:
     prosemirror-keymap "^1.1.2"
@@ -7008,27 +6964,27 @@ prosemirror-tables@^1.3.0:
     prosemirror-transform "^1.2.1"
     prosemirror-view "^1.13.3"
 
-prosemirror-trailing-node@^2.0.3:
-  version "2.0.3"
-  resolved "https://registry.npmjs.org/prosemirror-trailing-node/-/prosemirror-trailing-node-2.0.3.tgz"
-  integrity sha512-lGrjMrn97KWkjQSW/FjdvnhJmqFACmQIyr6lKYApvHitDnKsCoZz6XzrHB7RZYHni/0NxQmZ01p/2vyK2SkvaA==
+prosemirror-trailing-node@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/prosemirror-trailing-node/-/prosemirror-trailing-node-2.0.4.tgz#60febdeb947550ee93a224f2e56dbd5cb2cdd607"
+  integrity sha512-0Yl9w7IdHkaCdqR+NE3FOucePME4OmiGcybnF1iasarEILP5U8+4xTnl53yafULjmwcg1SrSG65Hg7Zk2H2v3g==
   dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@remirror/core-constants" "^2.0.0"
-    "@remirror/core-helpers" "^2.0.1"
+    "@babel/runtime" "^7.21.0"
+    "@remirror/core-constants" "^2.0.1"
+    "@remirror/core-helpers" "^2.0.2"
     escape-string-regexp "^4.0.0"
 
-prosemirror-transform@^1.0.0, prosemirror-transform@^1.1.0, prosemirror-transform@^1.2.1, prosemirror-transform@^1.7.0:
+prosemirror-transform@^1.0.0, prosemirror-transform@^1.1.0, prosemirror-transform@^1.2.1, prosemirror-transform@^1.7.1:
   version "1.7.1"
-  resolved "https://registry.npmjs.org/prosemirror-transform/-/prosemirror-transform-1.7.1.tgz"
+  resolved "https://registry.yarnpkg.com/prosemirror-transform/-/prosemirror-transform-1.7.1.tgz#b516e818c3add0bdf960f4ca8ccb9d057a3ba21b"
   integrity sha512-VteoifAfpt46z0yEt6Fc73A5OID9t/y2QIeR5MgxEwTuitadEunD/V0c9jQW8ziT8pbFM54uTzRLJ/nLuQjMxg==
   dependencies:
     prosemirror-model "^1.0.0"
 
-prosemirror-view@^1.0.0, prosemirror-view@^1.1.0, prosemirror-view@^1.13.3, prosemirror-view@^1.27.0, prosemirror-view@^1.29.1:
-  version "1.30.1"
-  resolved "https://registry.npmjs.org/prosemirror-view/-/prosemirror-view-1.30.1.tgz"
-  integrity sha512-pZUfr7lICJkEY7XwzldAKrkflZDeIvnbfuu2RIS01N5NwJmR/dfZzDzJRzhb3SM2QtT/bM8b4Nnib8X3MGpAhA==
+prosemirror-view@^1.0.0, prosemirror-view@^1.1.0, prosemirror-view@^1.13.3, prosemirror-view@^1.27.0, prosemirror-view@^1.30.2, prosemirror-view@^1.31.0:
+  version "1.31.1"
+  resolved "https://registry.yarnpkg.com/prosemirror-view/-/prosemirror-view-1.31.1.tgz#706611f134018a4dd832110911bdd908e3af92c1"
+  integrity sha512-9NKJdXnGV4+1qFRi16XFZxpnx6zNok9MEj/HElkqUJ1HtOyKOICffKxqoXUUCAdHrrP+yMDvdXc6wT7GGWBL3A==
   dependencies:
     prosemirror-model "^1.16.0"
     prosemirror-state "^1.0.0"
@@ -7036,44 +6992,39 @@ prosemirror-view@^1.0.0, prosemirror-view@^1.1.0, prosemirror-view@^1.13.3, pros
 
 proxy-from-env@^1.1.0:
   version "1.1.0"
-  resolved "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz"
+  resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2"
   integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==
 
 punycode@^2.1.0:
   version "2.3.0"
-  resolved "https://registry.npmjs.org/punycode/-/punycode-2.3.0.tgz"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.3.0.tgz#f67fa67c94da8f4d0cfff981aee4118064199b8f"
   integrity sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==
 
 querystringify@^2.2.0:
   version "2.2.0"
-  resolved "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz"
+  resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.2.0.tgz#3345941b4153cb9d082d8eee4cda2016a9aef7f6"
   integrity sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==
 
 queue-microtask@^1.2.2:
   version "1.2.3"
-  resolved "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz"
+  resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
   integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
 
-quick-lru@^5.1.1:
-  version "5.1.1"
-  resolved "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz"
-  integrity sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==
-
 raf-schd@^4.0.2:
   version "4.0.3"
-  resolved "https://registry.npmjs.org/raf-schd/-/raf-schd-4.0.3.tgz"
+  resolved "https://registry.yarnpkg.com/raf-schd/-/raf-schd-4.0.3.tgz#5d6c34ef46f8b2a0e880a8fcdb743efc5bfdbc1a"
   integrity sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ==
 
 randombytes@^2.1.0:
   version "2.1.0"
-  resolved "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz"
+  resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a"
   integrity sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==
   dependencies:
     safe-buffer "^5.1.0"
 
 react-beautiful-dnd@^13.1.1:
   version "13.1.1"
-  resolved "https://registry.npmjs.org/react-beautiful-dnd/-/react-beautiful-dnd-13.1.1.tgz"
+  resolved "https://registry.yarnpkg.com/react-beautiful-dnd/-/react-beautiful-dnd-13.1.1.tgz#b0f3087a5840920abf8bb2325f1ffa46d8c4d0a2"
   integrity sha512-0Lvs4tq2VcrEjEgDXHjT98r+63drkKEgqyxdA7qD3mvKwga6a5SscbdLPO2IExotU1jW8L0Ksdl0Cj2AF67nPQ==
   dependencies:
     "@babel/runtime" "^7.9.2"
@@ -7086,7 +7037,7 @@ react-beautiful-dnd@^13.1.1:
 
 react-color@^2.19.3:
   version "2.19.3"
-  resolved "https://registry.npmjs.org/react-color/-/react-color-2.19.3.tgz"
+  resolved "https://registry.yarnpkg.com/react-color/-/react-color-2.19.3.tgz#ec6c6b4568312a3c6a18420ab0472e146aa5683d"
   integrity sha512-LEeGE/ZzNLIsFWa1TMe8y5VYqr7bibneWmvJwm1pCn/eNmrabWDh659JSPn9BuaMpEfU83WTOJfnCcjDZwNQTA==
   dependencies:
     "@icons/material" "^0.2.4"
@@ -7098,9 +7049,9 @@ react-color@^2.19.3:
     tinycolor2 "^1.4.1"
 
 react-datepicker@^4.8.0:
-  version "4.10.0"
-  resolved "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.10.0.tgz"
-  integrity sha512-6IfBCZyWj54ZZGLmEZJ9c4Yph0s9MVfEGDC2evOvf9AmVz+RRcfP2Czqad88Ff9wREbcbqa4dk7IFYeXF1d3Ag==
+  version "4.11.0"
+  resolved "https://registry.yarnpkg.com/react-datepicker/-/react-datepicker-4.11.0.tgz#40e73b4729a284ed206fdb322b8e84eb566e11a3"
+  integrity sha512-50n93o7mQwBEhg05tbopjFKgs8qgi8VBCAOMC4VqrKut72eAjESc/wXS/k5hRtnP0oe2FCGw7MJuIwh37wuXOw==
   dependencies:
     "@popperjs/core" "^2.9.2"
     classnames "^2.2.6"
@@ -7111,7 +7062,7 @@ react-datepicker@^4.8.0:
 
 react-dom@18.2.0:
   version "18.2.0"
-  resolved "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
   integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
   dependencies:
     loose-envify "^1.1.0"
@@ -7119,7 +7070,7 @@ react-dom@18.2.0:
 
 react-dropzone@^14.2.3:
   version "14.2.3"
-  resolved "https://registry.npmjs.org/react-dropzone/-/react-dropzone-14.2.3.tgz"
+  resolved "https://registry.yarnpkg.com/react-dropzone/-/react-dropzone-14.2.3.tgz#0acab68308fda2d54d1273a1e626264e13d4e84b"
   integrity sha512-O3om8I+PkFKbxCukfIR3QAGftYXDZfOE2N1mr/7qebQJHs7U+/RSL/9xomJNpRg9kM5h9soQSdf0Gc7OHF5Fug==
   dependencies:
     attr-accept "^2.2.2"
@@ -7127,28 +7078,28 @@ react-dropzone@^14.2.3:
     prop-types "^15.8.1"
 
 react-fast-compare@^3.0.1:
-  version "3.2.0"
-  resolved "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz"
-  integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.1.tgz#53933d9e14f364281d6cba24bfed7a4afb808b5f"
+  integrity sha512-xTYf9zFim2pEif/Fw16dBiXpe0hoy5PxcD8+OwBnTtNLfIm3g6WxhKNurY+6OmdH1u6Ta/W/Vl6vjbYP1MFnDg==
 
 react-hook-form@^7.38.0:
-  version "7.43.1"
-  resolved "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.43.1.tgz"
-  integrity sha512-+s3+s8LLytRMriwwuSqeLStVjRXFGxgjjx2jED7Z+wz1J/88vpxieRQGvJVvzrzVxshZ0BRuocFERb779m2kNg==
+  version "7.43.9"
+  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.43.9.tgz#84b56ac2f38f8e946c6032ccb760e13a1037c66d"
+  integrity sha512-AUDN3Pz2NSeoxQ7Hs6OhQhDr6gtF9YRuutGDwPQqhSUAHJSgGl2VeY3qN19MG0SucpjgDiuMJ4iC5T5uB+eaNQ==
 
 react-is@^16.10.2, react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
-  resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
 react-is@^17.0.2:
   version "17.0.2"
-  resolved "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
 react-is@^18.0.0, react-is@^18.2.0:
   version "18.2.0"
-  resolved "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
   integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
 
 react-lifecycles-compat@^3.0.4:
@@ -7178,13 +7129,13 @@ react-markdown@^8.0.7:
     vfile "^5.0.0"
 
 react-onclickoutside@^6.12.2:
-  version "6.12.2"
-  resolved "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.12.2.tgz"
-  integrity sha512-NMXGa223OnsrGVp5dJHkuKxQ4czdLmXSp5jSV9OqiCky9LOpPATn3vLldc+q5fK3gKbEHvr7J1u0yhBh/xYkpA==
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/react-onclickoutside/-/react-onclickoutside-6.13.0.tgz#e165ea4e5157f3da94f4376a3ab3e22a565f4ffc"
+  integrity sha512-ty8So6tcUpIb+ZE+1HAhbLROvAIJYyJe/1vRrrcmW+jLsaM+/powDRqxzo6hSh9CuRZGSL1Q8mvcF5WRD93a0A==
 
 react-popper@^1.3.11:
   version "1.3.11"
-  resolved "https://registry.npmjs.org/react-popper/-/react-popper-1.3.11.tgz"
+  resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-1.3.11.tgz#a2cc3f0a67b75b66cfa62d2c409f9dd1fcc71ffd"
   integrity sha512-VSA/bS+pSndSF2fiasHK/PTEEAyOpX60+H5EPAjoArr8JGm+oihu4UbrqcEBpQibJxBVCpYyjAX7abJ+7DoYVg==
   dependencies:
     "@babel/runtime" "^7.1.2"
@@ -7197,7 +7148,7 @@ react-popper@^1.3.11:
 
 react-popper@^2.2.5, react-popper@^2.3.0:
   version "2.3.0"
-  resolved "https://registry.npmjs.org/react-popper/-/react-popper-2.3.0.tgz"
+  resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-2.3.0.tgz#17891c620e1320dce318bad9fede46a5f71c70ba"
   integrity sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==
   dependencies:
     react-fast-compare "^3.0.1"
@@ -7205,7 +7156,7 @@ react-popper@^2.2.5, react-popper@^2.3.0:
 
 react-redux@^7.2.0:
   version "7.2.9"
-  resolved "https://registry.npmjs.org/react-redux/-/react-redux-7.2.9.tgz"
+  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.9.tgz#09488fbb9416a4efe3735b7235055442b042481d"
   integrity sha512-Gx4L3uM182jEEayZfRbI/G11ZpYdNAnBs70lFVMNdHJI76XYtR+7m0MN+eAs7UHBPhWXcnFPaS+9owSCJQHNpQ==
   dependencies:
     "@babel/runtime" "^7.15.4"
@@ -7234,14 +7185,14 @@ react-remove-scroll@2.5.4:
     use-callback-ref "^1.3.0"
     use-sidecar "^1.1.2"
 
-react-resize-detector@^7.1.2:
-  version "7.1.2"
-  resolved "https://registry.yarnpkg.com/react-resize-detector/-/react-resize-detector-7.1.2.tgz#8ef975dd8c3d56f9a5160ac382ef7136dcd2d86c"
-  integrity sha512-zXnPJ2m8+6oq9Nn8zsep/orts9vQv3elrpA+R8XTcW7DVVUJ9vwDwMXaBtykAYjMnkCIaOoK9vObyR7ZgFNlOw==
+react-resize-detector@^8.0.4:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/react-resize-detector/-/react-resize-detector-8.1.0.tgz#1c7817db8bc886e2dbd3fbe3b26ea8e56be0524a"
+  integrity sha512-S7szxlaIuiy5UqLhLL1KY3aoyGHbZzsTpYal9eYMwCyKqoqoVLCmIgAgNyIM1FhnP2KyBygASJxdhejrzjMb+w==
   dependencies:
     lodash "^4.17.21"
 
-react-smooth@^2.0.1:
+react-smooth@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/react-smooth/-/react-smooth-2.0.2.tgz#0ef24213628cb13bf4305194a050e1db4302a3a1"
   integrity sha512-pgqSp1q8rAGtF1bXQE0m3CHGLNfZZh5oA5o1tsPLXRHnKtkujMIJ8Ws5nO1mTySZf1c4vgwlEk+pHi3Ln6eYLw==
@@ -7270,7 +7221,7 @@ react-transition-group@2.9.0:
 
 react-transition-group@^4.4.5:
   version "4.4.5"
-  resolved "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz"
+  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"
   integrity sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==
   dependencies:
     "@babel/runtime" "^7.5.5"
@@ -7278,68 +7229,30 @@ react-transition-group@^4.4.5:
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
 
-react-universal-interface@^0.6.2:
-  version "0.6.2"
-  resolved "https://registry.npmjs.org/react-universal-interface/-/react-universal-interface-0.6.2.tgz"
-  integrity sha512-dg8yXdcQmvgR13RIlZbTRQOoUrDciFVoSBZILwjE2LFISxZZ8loVJKAkuzswl5js8BHda79bIb2b84ehU8IjXw==
-
-react-use@^17.3.2:
-  version "17.4.0"
-  resolved "https://registry.npmjs.org/react-use/-/react-use-17.4.0.tgz"
-  integrity sha512-TgbNTCA33Wl7xzIJegn1HndB4qTS9u03QUwyNycUnXaweZkE4Kq2SB+Yoxx8qbshkZGYBDvUXbXWRUmQDcZZ/Q==
-  dependencies:
-    "@types/js-cookie" "^2.2.6"
-    "@xobotyi/scrollbar-width" "^1.9.5"
-    copy-to-clipboard "^3.3.1"
-    fast-deep-equal "^3.1.3"
-    fast-shallow-equal "^1.0.0"
-    js-cookie "^2.2.1"
-    nano-css "^5.3.1"
-    react-universal-interface "^0.6.2"
-    resize-observer-polyfill "^1.5.1"
-    screenfull "^5.1.0"
-    set-harmonic-interval "^1.0.1"
-    throttle-debounce "^3.0.1"
-    ts-easing "^0.2.0"
-    tslib "^2.1.0"
-
 react@18.2.0, react@^18.2.0:
   version "18.2.0"
-  resolved "https://registry.npmjs.org/react/-/react-18.2.0.tgz"
+  resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
   integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
   dependencies:
     loose-envify "^1.1.0"
 
 reactcss@^1.2.0:
   version "1.2.3"
-  resolved "https://registry.npmjs.org/reactcss/-/reactcss-1.2.3.tgz"
+  resolved "https://registry.yarnpkg.com/reactcss/-/reactcss-1.2.3.tgz#c00013875e557b1cf0dfd9a368a1c3dab3b548dd"
   integrity sha512-KiwVUcFu1RErkI97ywr8nvx8dNOpT03rbnma0SSalTYjkrPYaEajR4a/MRt6DZ46K6arDRbWMNHF+xH7G7n/8A==
   dependencies:
     lodash "^4.0.1"
 
 read-cache@^1.0.0:
   version "1.0.0"
-  resolved "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz"
+  resolved "https://registry.yarnpkg.com/read-cache/-/read-cache-1.0.0.tgz#e664ef31161166c9751cdbe8dbcf86b5fb58f774"
   integrity sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==
   dependencies:
     pify "^2.3.0"
 
-readable-stream@^2.0.6:
-  version "2.3.7"
-  resolved "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz"
-  integrity sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==
-  dependencies:
-    core-util-is "~1.0.0"
-    inherits "~2.0.3"
-    isarray "~1.0.0"
-    process-nextick-args "~2.0.0"
-    safe-buffer "~5.1.1"
-    string_decoder "~1.1.1"
-    util-deprecate "~1.0.1"
-
 readdirp@~3.6.0:
   version "3.6.0"
-  resolved "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz"
+  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7"
   integrity sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==
   dependencies:
     picomatch "^2.2.1"
@@ -7352,16 +7265,16 @@ recharts-scale@^0.4.4:
     decimal.js-light "^2.4.1"
 
 recharts@^2.3.2:
-  version "2.4.3"
-  resolved "https://registry.yarnpkg.com/recharts/-/recharts-2.4.3.tgz#23b7cd988423449b04a826baa057675b833789b1"
-  integrity sha512-/hkRHTQShEOKDYd2OlKLIvGA0X9v/XVO/mNeRoDHg0lgFRL2KbGzeqVnStI3mMfORUZ6Hak4JbQ+uDiin1Foqg==
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/recharts/-/recharts-2.5.0.tgz#34452852509099502690f9d2a72bde1d4cd65648"
+  integrity sha512-0EQYz3iA18r1Uq8VqGZ4dABW52AKBnio37kJgnztIqprELJXpOEsa0SzkqU1vjAhpCXCv52Dx1hiL9119xsqsQ==
   dependencies:
     classnames "^2.2.5"
     eventemitter3 "^4.0.1"
     lodash "^4.17.19"
     react-is "^16.10.2"
-    react-resize-detector "^7.1.2"
-    react-smooth "^2.0.1"
+    react-resize-detector "^8.0.4"
+    react-smooth "^2.0.2"
     recharts-scale "^0.4.4"
     reduce-css-calc "^2.1.8"
     victory-vendor "^36.6.8"
@@ -7376,14 +7289,14 @@ reduce-css-calc@^2.1.8:
 
 redux@^4.0.0, redux@^4.0.4:
   version "4.2.1"
-  resolved "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz"
+  resolved "https://registry.yarnpkg.com/redux/-/redux-4.2.1.tgz#c08f4306826c49b5e9dc901dee0452ea8fce6197"
   integrity sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==
   dependencies:
     "@babel/runtime" "^7.9.2"
 
-refractor@^3.3.1:
+refractor@^3.6.0:
   version "3.6.0"
-  resolved "https://registry.npmjs.org/refractor/-/refractor-3.6.0.tgz"
+  resolved "https://registry.yarnpkg.com/refractor/-/refractor-3.6.0.tgz#ac318f5a0715ead790fcfb0c71f4dd83d977935a"
   integrity sha512-MY9W41IOWxxk31o+YvFCNyNzdkc9M20NoZK5vq6jkv4I/uh2zkWcfudj0Q1fovjUQJrNewS9NMzeTtqPf+n5EA==
   dependencies:
     hastscript "^6.0.0"
@@ -7392,62 +7305,57 @@ refractor@^3.3.1:
 
 regenerate-unicode-properties@^10.1.0:
   version "10.1.0"
-  resolved "https://registry.npmjs.org/regenerate-unicode-properties/-/regenerate-unicode-properties-10.1.0.tgz"
+  resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-10.1.0.tgz#7c3192cab6dd24e21cb4461e5ddd7dd24fa8374c"
   integrity sha512-d1VudCLoIGitcU/hEg2QqvyGZQmdC0Lf8BqdOMXGFSvJP4bNV1+XqbPQeHHLD51Jh4QJJ225dlIFvY4Ly6MXmQ==
   dependencies:
     regenerate "^1.4.2"
 
 regenerate@^1.4.2:
   version "1.4.2"
-  resolved "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz"
+  resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.2.tgz#b9346d8827e8f5a32f7ba29637d398b69014848a"
   integrity sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==
 
 regenerator-runtime@^0.13.11:
   version "0.13.11"
-  resolved "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9"
   integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==
 
 regenerator-transform@^0.15.1:
   version "0.15.1"
-  resolved "https://registry.npmjs.org/regenerator-transform/-/regenerator-transform-0.15.1.tgz"
+  resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.15.1.tgz#f6c4e99fc1b4591f780db2586328e4d9a9d8dc56"
   integrity sha512-knzmNAcuyxV+gQCufkYcvOqX/qIIfHLv0u5x79kRxuGojfYVky1f15TzZEu2Avte8QGepvUNTnLskf8E6X6Vyg==
   dependencies:
     "@babel/runtime" "^7.8.4"
 
-regexp.prototype.flags@^1.2.0, regexp.prototype.flags@^1.4.3:
-  version "1.4.3"
-  resolved "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.4.3.tgz"
-  integrity sha512-fjggEOO3slI6Wvgjwflkc4NFRCTZAu5CnNfBd5qOMYhWdn67nJBBu34/TkD++eeFmd8C9r9jfXJ27+nSiRkSUA==
+regexp.prototype.flags@^1.2.0, regexp.prototype.flags@^1.4.3, regexp.prototype.flags@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.5.0.tgz#fe7ce25e7e4cca8db37b6634c8a2c7009199b9cb"
+  integrity sha512-0SutC3pNudRKgquxGoRGIz946MZVHqbNfPjBdxeOhBrdgDKlRoXmYLQN9xRbrR09ZXWeGAdPuif7egofn6v5LA==
   dependencies:
     call-bind "^1.0.2"
-    define-properties "^1.1.3"
-    functions-have-names "^1.2.2"
+    define-properties "^1.2.0"
+    functions-have-names "^1.2.3"
 
-regexpp@^3.1.0, regexpp@^3.2.0:
+regexpp@^3.1.0:
   version "3.2.0"
-  resolved "https://registry.npmjs.org/regexpp/-/regexpp-3.2.0.tgz"
+  resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-3.2.0.tgz#0425a2768d8f23bad70ca4b90461fa2f1213e1b2"
   integrity sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==
 
-regexpu-core@^5.2.1:
-  version "5.2.2"
-  resolved "https://registry.npmjs.org/regexpu-core/-/regexpu-core-5.2.2.tgz"
-  integrity sha512-T0+1Zp2wjF/juXMrMxHxidqGYn8U4R+zleSJhX9tQ1PUsS8a9UtYfbsF9LdiVgNX3kiX8RNaKM42nfSgvFJjmw==
+regexpu-core@^5.3.1:
+  version "5.3.2"
+  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-5.3.2.tgz#11a2b06884f3527aec3e93dbbf4a3b958a95546b"
+  integrity sha512-RAM5FlZz+Lhmo7db9L298p2vHP5ZywrVXmVXpmAD9GuL5MPH6t9ROw1iA/wfHkQ76Qe7AaPF0nGuim96/IrQMQ==
   dependencies:
+    "@babel/regjsgen" "^0.8.0"
     regenerate "^1.4.2"
     regenerate-unicode-properties "^10.1.0"
-    regjsgen "^0.7.1"
     regjsparser "^0.9.1"
     unicode-match-property-ecmascript "^2.0.0"
     unicode-match-property-value-ecmascript "^2.1.0"
 
-regjsgen@^0.7.1:
-  version "0.7.1"
-  resolved "https://registry.npmjs.org/regjsgen/-/regjsgen-0.7.1.tgz"
-  integrity sha512-RAt+8H2ZEzHeYWxZ3H2z6tF18zyyOnlcdaafLrm21Bguj7uZy6ULibiAFdXEtKQY4Sy7wDTwDiOazasMLc4KPA==
-
 regjsparser@^0.9.1:
   version "0.9.1"
-  resolved "https://registry.npmjs.org/regjsparser/-/regjsparser-0.9.1.tgz"
+  resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.9.1.tgz#272d05aa10c7c1f67095b1ff0addae8442fc5709"
   integrity sha512-dQUtn90WanSNl+7mQKcXAgZxvUe7Z0SqXlgzv0za4LwiUhyzBC58yQO3liFoUgu8GiJVInAhJjkj1N0EtQ5nkQ==
   dependencies:
     jsesc "~0.5.0"
@@ -7472,110 +7380,110 @@ remark-rehype@^10.0.0:
     unified "^10.0.0"
 
 remirror@^2.0.23:
-  version "2.0.24"
-  resolved "https://registry.npmjs.org/remirror/-/remirror-2.0.24.tgz"
-  integrity sha512-wS91h4rsIiq8rYvGJzO5mc/hGsgzjsWyW0Yq6Ngp/SfQLtbxiFOPLzMpesHCCib23rkuG8WrnjdroyF36NLYgg==
+  version "2.0.31"
+  resolved "https://registry.yarnpkg.com/remirror/-/remirror-2.0.31.tgz#81bbfafd2b13f749b5c1d1b36cc6711c4aef98b7"
+  integrity sha512-ayIwEDLcgYOFstK4KgI85+5s7oGj7fHq815iL6hFpVnaCaxbmGs3dcdHi+C1e/fcdeDYSprap7Yq2/mppGnSjQ==
   dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@remirror/core" "^2.0.11"
-    "@remirror/core-constants" "^2.0.0"
-    "@remirror/core-helpers" "^2.0.1"
-    "@remirror/core-types" "^2.0.3"
-    "@remirror/core-utils" "^2.0.10"
-    "@remirror/dom" "^2.0.14"
-    "@remirror/extension-annotation" "^2.0.14"
-    "@remirror/extension-bidi" "^2.0.11"
-    "@remirror/extension-blockquote" "^2.0.12"
-    "@remirror/extension-bold" "^2.0.11"
-    "@remirror/extension-callout" "^2.0.12"
-    "@remirror/extension-code" "^2.0.11"
-    "@remirror/extension-code-block" "^2.0.12"
-    "@remirror/extension-codemirror5" "^2.0.11"
-    "@remirror/extension-collaboration" "^2.0.11"
-    "@remirror/extension-columns" "^2.0.11"
-    "@remirror/extension-diff" "^2.0.11"
-    "@remirror/extension-doc" "^2.1.3"
-    "@remirror/extension-drop-cursor" "^2.0.11"
-    "@remirror/extension-embed" "^2.0.11"
-    "@remirror/extension-emoji" "^2.0.15"
-    "@remirror/extension-entity-reference" "^2.2.4"
-    "@remirror/extension-epic-mode" "^2.0.11"
-    "@remirror/extension-events" "^2.1.12"
-    "@remirror/extension-font-family" "^2.0.11"
-    "@remirror/extension-font-size" "^2.0.11"
-    "@remirror/extension-gap-cursor" "^2.0.11"
-    "@remirror/extension-hard-break" "^2.0.11"
-    "@remirror/extension-heading" "^2.0.11"
-    "@remirror/extension-history" "^2.0.11"
-    "@remirror/extension-horizontal-rule" "^2.0.11"
-    "@remirror/extension-image" "^2.1.7"
-    "@remirror/extension-italic" "^2.0.11"
-    "@remirror/extension-link" "^2.0.13"
-    "@remirror/extension-list" "^2.0.14"
-    "@remirror/extension-markdown" "^2.0.11"
-    "@remirror/extension-mention" "^2.0.13"
-    "@remirror/extension-mention-atom" "^2.0.14"
-    "@remirror/extension-node-formatting" "^2.0.11"
-    "@remirror/extension-paragraph" "^2.0.11"
-    "@remirror/extension-placeholder" "^2.0.12"
-    "@remirror/extension-positioner" "^2.1.6"
-    "@remirror/extension-search" "^2.0.12"
-    "@remirror/extension-shortcuts" "^2.0.11"
-    "@remirror/extension-strike" "^2.0.11"
-    "@remirror/extension-sub" "^2.0.11"
-    "@remirror/extension-sup" "^2.0.11"
-    "@remirror/extension-tables" "^2.2.8"
-    "@remirror/extension-text" "^2.0.11"
-    "@remirror/extension-text-case" "^2.0.11"
-    "@remirror/extension-text-color" "^2.0.12"
-    "@remirror/extension-text-highlight" "^2.0.12"
-    "@remirror/extension-trailing-node" "^2.0.11"
-    "@remirror/extension-underline" "^2.0.11"
-    "@remirror/extension-whitespace" "^2.0.11"
-    "@remirror/extension-yjs" "^3.0.11"
-    "@remirror/icons" "^2.0.1"
-    "@remirror/preset-core" "^2.0.14"
-    "@remirror/preset-formatting" "^2.0.12"
-    "@remirror/preset-wysiwyg" "^2.0.17"
-    "@remirror/theme" "^2.0.5"
-    "@types/codemirror" "^5.60.2"
+    "@babel/runtime" "^7.21.0"
+    "@remirror/core" "^2.0.16"
+    "@remirror/core-constants" "^2.0.1"
+    "@remirror/core-helpers" "^2.0.3"
+    "@remirror/core-types" "^2.0.5"
+    "@remirror/core-utils" "^2.0.12"
+    "@remirror/dom" "^2.0.16"
+    "@remirror/extension-annotation" "^2.0.16"
+    "@remirror/extension-bidi" "^2.0.13"
+    "@remirror/extension-blockquote" "^2.0.14"
+    "@remirror/extension-bold" "^2.0.13"
+    "@remirror/extension-callout" "^2.0.14"
+    "@remirror/extension-code" "^2.0.13"
+    "@remirror/extension-code-block" "^2.0.14"
+    "@remirror/extension-codemirror5" "^2.0.13"
+    "@remirror/extension-collaboration" "^2.0.13"
+    "@remirror/extension-columns" "^2.0.13"
+    "@remirror/extension-diff" "^2.0.13"
+    "@remirror/extension-doc" "^2.1.5"
+    "@remirror/extension-drop-cursor" "^2.0.13"
+    "@remirror/extension-embed" "^2.0.13"
+    "@remirror/extension-emoji" "^2.0.17"
+    "@remirror/extension-entity-reference" "^2.2.6"
+    "@remirror/extension-epic-mode" "^2.0.13"
+    "@remirror/extension-events" "^2.1.15"
+    "@remirror/extension-font-family" "^2.0.13"
+    "@remirror/extension-font-size" "^2.0.13"
+    "@remirror/extension-gap-cursor" "^2.0.13"
+    "@remirror/extension-hard-break" "^2.0.13"
+    "@remirror/extension-heading" "^2.0.13"
+    "@remirror/extension-history" "^2.0.13"
+    "@remirror/extension-horizontal-rule" "^2.0.13"
+    "@remirror/extension-image" "^2.1.9"
+    "@remirror/extension-italic" "^2.0.13"
+    "@remirror/extension-link" "^2.0.15"
+    "@remirror/extension-list" "^2.0.16"
+    "@remirror/extension-markdown" "^2.0.13"
+    "@remirror/extension-mention" "^2.0.15"
+    "@remirror/extension-mention-atom" "^2.0.16"
+    "@remirror/extension-node-formatting" "^2.0.13"
+    "@remirror/extension-paragraph" "^2.0.13"
+    "@remirror/extension-placeholder" "^2.0.14"
+    "@remirror/extension-positioner" "^2.1.8"
+    "@remirror/extension-search" "^2.0.14"
+    "@remirror/extension-shortcuts" "^2.0.13"
+    "@remirror/extension-strike" "^2.0.13"
+    "@remirror/extension-sub" "^2.0.13"
+    "@remirror/extension-sup" "^2.0.13"
+    "@remirror/extension-tables" "^2.2.10"
+    "@remirror/extension-text" "^2.0.13"
+    "@remirror/extension-text-case" "^2.0.13"
+    "@remirror/extension-text-color" "^2.0.14"
+    "@remirror/extension-text-highlight" "^2.0.14"
+    "@remirror/extension-trailing-node" "^2.0.13"
+    "@remirror/extension-underline" "^2.0.13"
+    "@remirror/extension-whitespace" "^2.0.13"
+    "@remirror/extension-yjs" "^3.0.14"
+    "@remirror/icons" "^2.0.2"
+    "@remirror/preset-core" "^2.0.16"
+    "@remirror/preset-formatting" "^2.0.14"
+    "@remirror/preset-wysiwyg" "^2.0.19"
+    "@remirror/theme" "^2.0.8"
+    "@types/codemirror" "^5.60.7"
     "@types/refractor" "^3.0.2"
-    codemirror "^5.62.0"
-    refractor "^3.3.1"
-    yjs "^13.5.23"
+    codemirror "^5.65.12"
+    refractor "^3.6.0"
+    yjs "^13.6.0"
 
 remove-accents@0.4.2:
   version "0.4.2"
-  resolved "https://registry.npmjs.org/remove-accents/-/remove-accents-0.4.2.tgz"
+  resolved "https://registry.yarnpkg.com/remove-accents/-/remove-accents-0.4.2.tgz#0a43d3aaae1e80db919e07ae254b285d9e1c7bb5"
   integrity sha512-7pXIJqJOq5tFgG1A2Zxti3Ht8jJF337m4sowbuHsW30ZnkQFnDzy9qBNhgzX8ZLW4+UBcXiiR7SwR6pokHsxiA==
 
 require-from-string@^2.0.2:
   version "2.0.2"
-  resolved "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz"
+  resolved "https://registry.yarnpkg.com/require-from-string/-/require-from-string-2.0.2.tgz#89a7fdd938261267318eafe14f9c32e598c36909"
   integrity sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==
 
 resize-observer-polyfill@^1.5.1:
   version "1.5.1"
-  resolved "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz"
+  resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
   integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
 
 resolve-from@^4.0.0:
   version "4.0.0"
-  resolved "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz"
+  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
   integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==
 
-resolve@^1.1.7, resolve@^1.14.2, resolve@^1.19.0, resolve@^1.22.0, resolve@^1.22.1:
-  version "1.22.1"
-  resolved "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz"
-  integrity sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==
+resolve@^1.1.7, resolve@^1.14.2, resolve@^1.19.0, resolve@^1.22.0, resolve@^1.22.1, resolve@^1.22.2:
+  version "1.22.2"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.2.tgz#0ed0943d4e301867955766c9f3e1ae6d01c6845f"
+  integrity sha512-Sb+mjNHOULsBv818T40qSPeRiuWLyaGMa5ewydRLFimneixmVy2zdivRl+AF6jaYPC8ERxGDmFSiqui6SfPd+g==
   dependencies:
-    is-core-module "^2.9.0"
+    is-core-module "^2.11.0"
     path-parse "^1.0.7"
     supports-preserve-symlinks-flag "^1.0.0"
 
 resolve@^2.0.0-next.3, resolve@^2.0.0-next.4:
   version "2.0.0-next.4"
-  resolved "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.4.tgz"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-2.0.0-next.4.tgz#3d37a113d6429f496ec4752d2a2e58efb1fd4660"
   integrity sha512-iMDbmAWtfU+MHpxt/I5iWI7cY6YVEZUQ3MBgPQ++XD1PELuJHIl82xBmObyP2KyQmkNB2dsqF7seoQQiAn5yDQ==
   dependencies:
     is-core-module "^2.9.0"
@@ -7584,26 +7492,26 @@ resolve@^2.0.0-next.3, resolve@^2.0.0-next.4:
 
 reusify@^1.0.4:
   version "1.0.4"
-  resolved "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz"
+  resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
   integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==
 
 rimraf@^2.6.3:
   version "2.7.1"
-  resolved "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec"
   integrity sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==
   dependencies:
     glob "^7.1.3"
 
 rimraf@^3.0.2:
   version "3.0.2"
-  resolved "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
   integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==
   dependencies:
     glob "^7.1.3"
 
 rollup-plugin-terser@^7.0.0:
   version "7.0.2"
-  resolved "https://registry.npmjs.org/rollup-plugin-terser/-/rollup-plugin-terser-7.0.2.tgz"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-terser/-/rollup-plugin-terser-7.0.2.tgz#e8fbba4869981b2dc35ae7e8a502d5c6c04d324d"
   integrity sha512-w3iIaU4OxcF52UUXiZNsNeuXIMDvFrr+ZXK6bFZ0Q60qyVfq4uLptoS4bbq3paG3x216eQllFZX7zt6TIImguQ==
   dependencies:
     "@babel/code-frame" "^7.10.4"
@@ -7613,26 +7521,26 @@ rollup-plugin-terser@^7.0.0:
 
 rollup@2.78.0:
   version "2.78.0"
-  resolved "https://registry.npmjs.org/rollup/-/rollup-2.78.0.tgz"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.78.0.tgz#00995deae70c0f712ea79ad904d5f6b033209d9e"
   integrity sha512-4+YfbQC9QEVvKTanHhIAFVUFSRsezvQF8vFOJwtGfb9Bb+r014S+qryr9PSmw8x6sMnPkmFBGAvIFVQxvJxjtg==
   optionalDependencies:
     fsevents "~2.3.2"
 
 rollup@^2.43.1:
   version "2.79.1"
-  resolved "https://registry.npmjs.org/rollup/-/rollup-2.79.1.tgz"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.79.1.tgz#bedee8faef7c9f93a2647ac0108748f497f081c7"
   integrity sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==
   optionalDependencies:
     fsevents "~2.3.2"
 
 rope-sequence@^1.3.0:
   version "1.3.3"
-  resolved "https://registry.npmjs.org/rope-sequence/-/rope-sequence-1.3.3.tgz"
+  resolved "https://registry.yarnpkg.com/rope-sequence/-/rope-sequence-1.3.3.tgz#3f67fc106288b84b71532b4a5fd9d4881e4457f0"
   integrity sha512-85aZYCxweiD5J8yTEbw+E6A27zSnLPNDL0WfPdw3YYodq7WjnTKo0q4dtyQ2gz23iPT8Q9CUyJtAaUNcTxRf5Q==
 
 round-precision@~1.0.0:
   version "1.0.0"
-  resolved "https://registry.npmjs.org/round-precision/-/round-precision-1.0.0.tgz"
+  resolved "https://registry.yarnpkg.com/round-precision/-/round-precision-1.0.0.tgz#f5a2beb7ed59e6fe85312fbf553769102ea8f64f"
   integrity sha512-L2a0XDSNeaaBTEGmzuENMK4T8c0HqKYeS3pCDurW4MRPo8O6LeCLqVPWUt5+xW9rrEcG9QaYrAFcApEFXKziyw==
   dependencies:
     is-finite "~1.0.1"
@@ -7640,22 +7548,15 @@ round-precision@~1.0.0:
 
 round@^2.0.1:
   version "2.0.1"
-  resolved "https://registry.npmjs.org/round/-/round-2.0.1.tgz"
+  resolved "https://registry.yarnpkg.com/round/-/round-2.0.1.tgz#ec1bbb87cb1cab9ff2c81b7c43c84a5d1ed97e65"
   integrity sha512-wzT6PF3wNEd2PCLTBQxteheeSwViBrD89E1XZjl4sj505C4LwTpqOQSNXLEROHDQw35NoylYbMxoUhgf2hb4qw==
   dependencies:
     precision "~1.0.0"
     round-precision "~1.0.0"
 
-rtl-css-js@^1.14.0:
-  version "1.16.1"
-  resolved "https://registry.npmjs.org/rtl-css-js/-/rtl-css-js-1.16.1.tgz"
-  integrity sha512-lRQgou1mu19e+Ya0LsTvKrVJ5TYUbqCVPAiImX3UfLTenarvPUl1QFdvu5Z3PYmHT9RCcwIfbjRQBntExyj3Zg==
-  dependencies:
-    "@babel/runtime" "^7.1.2"
-
 run-parallel@^1.1.9:
   version "1.2.0"
-  resolved "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz"
+  resolved "https://registry.yarnpkg.com/run-parallel/-/run-parallel-1.2.0.tgz#66d1368da7bdf921eb9d95bd1a9229e7f21a43ee"
   integrity sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==
   dependencies:
     queue-microtask "^1.2.2"
@@ -7669,22 +7570,17 @@ sade@^1.7.3:
 
 safari-14-idb-fix@^1.0.6:
   version "1.0.6"
-  resolved "https://registry.npmjs.org/safari-14-idb-fix/-/safari-14-idb-fix-1.0.6.tgz"
+  resolved "https://registry.yarnpkg.com/safari-14-idb-fix/-/safari-14-idb-fix-1.0.6.tgz#cbaabc33a4500c44b5c432d6c525b0ed9b68bb65"
   integrity sha512-oTEQOdMwRX+uCtWCKT1nx2gAeSdpr8elg/2gcaKUH00SJU2xWESfkx11nmXwTRHy7xfQoj1o4TTQvdmuBosTnA==
 
 safe-buffer@^5.1.0:
   version "5.2.1"
-  resolved "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
   integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
 
-safe-buffer@~5.1.0, safe-buffer@~5.1.1:
-  version "5.1.2"
-  resolved "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz"
-  integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
-
 safe-regex-test@^1.0.0:
   version "1.0.0"
-  resolved "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.0.0.tgz"
+  resolved "https://registry.yarnpkg.com/safe-regex-test/-/safe-regex-test-1.0.0.tgz#793b874d524eb3640d1873aad03596db2d4f2295"
   integrity sha512-JBUUzyOgEwXQY1NuPtvcj/qcBDbDmEvWufhlnXZIm75DEHp+afM1r1ujJpJsV/gSM4t59tpDyPi1sd6ZaPFfsA==
   dependencies:
     call-bind "^1.0.2"
@@ -7693,14 +7589,14 @@ safe-regex-test@^1.0.0:
 
 scheduler@^0.23.0:
   version "0.23.0"
-  resolved "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.0.tgz#ba8041afc3d30eb206a487b6b384002e4e61fdfe"
   integrity sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==
   dependencies:
     loose-envify "^1.1.0"
 
 schema-utils@^2.6.5:
   version "2.7.1"
-  resolved "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.1.tgz"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.7.1.tgz#1ca4f32d1b24c590c203b8e7a50bf0ea4cd394d7"
   integrity sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==
   dependencies:
     "@types/json-schema" "^7.0.5"
@@ -7708,34 +7604,29 @@ schema-utils@^2.6.5:
     ajv-keywords "^3.5.2"
 
 schema-utils@^3.1.1:
-  version "3.1.1"
-  resolved "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz"
-  integrity sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-3.1.2.tgz#36c10abca6f7577aeae136c804b0c741edeadc99"
+  integrity sha512-pvjEHOgWc9OWA/f/DE3ohBWTD6EleVLf7iFUkoSwAxttdBhB9QUebQgxER2kWueOvRJXPHNnyrvvh9eZINB8Eg==
   dependencies:
     "@types/json-schema" "^7.0.8"
     ajv "^6.12.5"
     ajv-keywords "^3.5.2"
 
-screenfull@^5.1.0:
-  version "5.2.0"
-  resolved "https://registry.npmjs.org/screenfull/-/screenfull-5.2.0.tgz"
-  integrity sha512-9BakfsO2aUQN2K9Fdbj87RJIEZ82Q9IGim7FqM5OsebfoFC6ZHXgDq/KvniuLTPdeM8wY2o6Dj3WQ7KeQCj3cA==
-
 semver@^6.0.0, semver@^6.1.1, semver@^6.1.2, semver@^6.3.0:
   version "6.3.0"
-  resolved "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
   integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
 
 semver@^7.2.1, semver@^7.3.7:
-  version "7.3.8"
-  resolved "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz"
-  integrity sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==
+  version "7.5.0"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.5.0.tgz#ed8c5dc8efb6c629c88b23d41dc9bf40c1d96cd0"
+  integrity sha512-+XC0AD/R7Q2mPSRuy2Id0+CGTZ98+8f+KvwirxOKIEyid+XSx6HbC63p+O4IndTHuX5Z+JxQ0TghCkO5Cg/2HA==
   dependencies:
     lru-cache "^6.0.0"
 
 sentence-case@^3.0.4:
   version "3.0.4"
-  resolved "https://registry.npmjs.org/sentence-case/-/sentence-case-3.0.4.tgz"
+  resolved "https://registry.yarnpkg.com/sentence-case/-/sentence-case-3.0.4.tgz#3645a7b8c117c787fde8702056225bb62a45131f"
   integrity sha512-8LS0JInaQMCRoQ7YUytAo/xUu5W2XnQxV2HI/6uM6U7CITS1RqPElr30V6uIqyMKM9lJGRVFy5/4CuzcixNYSg==
   dependencies:
     no-case "^3.0.4"
@@ -7744,62 +7635,47 @@ sentence-case@^3.0.4:
 
 serialize-javascript@^4.0.0:
   version "4.0.0"
-  resolved "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-4.0.0.tgz"
+  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-4.0.0.tgz#b525e1238489a5ecfc42afacc3fe99e666f4b1aa"
   integrity sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw==
   dependencies:
     randombytes "^2.1.0"
 
-serialize-javascript@^6.0.0:
+serialize-javascript@^6.0.1:
   version "6.0.1"
-  resolved "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.1.tgz"
+  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-6.0.1.tgz#b206efb27c3da0b0ab6b52f48d170b7996458e5c"
   integrity sha512-owoXEFjWRllis8/M1Q+Cw5k8ZH40e3zhp/ovX+Xr/vi1qj6QesbyXXViFbpNvWvPNAD62SutwEXavefrLJWj7w==
   dependencies:
     randombytes "^2.1.0"
 
-set-blocking@~2.0.0:
-  version "2.0.0"
-  resolved "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz"
-  integrity sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==
-
-set-harmonic-interval@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.npmjs.org/set-harmonic-interval/-/set-harmonic-interval-1.0.1.tgz"
-  integrity sha512-AhICkFV84tBP1aWqPwLZqFvAwqEoVA9kxNMniGEUvzOlm4vLmOFLiTT3UZ6bziJTy4bOVpzWGTfSCbmaayGx8g==
-
 shebang-command@^2.0.0:
   version "2.0.0"
-  resolved "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz"
+  resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea"
   integrity sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==
   dependencies:
     shebang-regex "^3.0.0"
 
 shebang-regex@^3.0.0:
   version "3.0.0"
-  resolved "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz"
+  resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172"
   integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
 
 side-channel@^1.0.4:
   version "1.0.4"
-  resolved "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz"
+  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.4.tgz#efce5c8fdc104ee751b25c58d4290011fa5ea2cf"
   integrity sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==
   dependencies:
     call-bind "^1.0.0"
     get-intrinsic "^1.0.2"
     object-inspect "^1.9.0"
 
-signal-exit@^3.0.0:
-  version "3.0.7"
-  resolved "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz"
-  integrity sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==
-
 slash@^3.0.0:
   version "3.0.0"
-  resolved "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz"
+  resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
   integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==
 
 slice-ansi@^4.0.0:
   version "4.0.0"
-  resolved "https://registry.npmjs.org/slice-ansi/-/slice-ansi-4.0.0.tgz"
+  resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-4.0.0.tgz#500e8dd0fd55b05815086255b3195adf2a45fe6b"
   integrity sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==
   dependencies:
     ansi-styles "^4.0.0"
@@ -7808,7 +7684,7 @@ slice-ansi@^4.0.0:
 
 snake-case@^3.0.4:
   version "3.0.4"
-  resolved "https://registry.npmjs.org/snake-case/-/snake-case-3.0.4.tgz"
+  resolved "https://registry.yarnpkg.com/snake-case/-/snake-case-3.0.4.tgz#4f2bbd568e9935abdfd593f34c691dadb49c452c"
   integrity sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==
   dependencies:
     dot-case "^3.0.4"
@@ -7816,52 +7692,47 @@ snake-case@^3.0.4:
 
 source-list-map@^2.0.0:
   version "2.0.1"
-  resolved "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz"
+  resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34"
   integrity sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw==
 
 source-map-js@^1.0.2:
   version "1.0.2"
-  resolved "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz"
+  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
   integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
 
 source-map-support@~0.5.20:
   version "0.5.21"
-  resolved "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.21.tgz#04fe7c7f9e1ed2d662233c28cb2b35b9f63f6e4f"
   integrity sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==
   dependencies:
     buffer-from "^1.0.0"
     source-map "^0.6.0"
 
-source-map@0.5.6:
-  version "0.5.6"
-  resolved "https://registry.npmjs.org/source-map/-/source-map-0.5.6.tgz"
-  integrity sha512-MjZkVp0NHr5+TPihLcadqnlVoGIoWo4IBHptutGh9wI3ttUYvCG26HkSuDi+K6lsZ25syXJXcctwgyVCt//xqA==
-
 source-map@^0.5.7:
   version "0.5.7"
-  resolved "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
   integrity sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==
 
-source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1:
+source-map@^0.6.0, source-map@~0.6.1:
   version "0.6.1"
-  resolved "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
 
 source-map@^0.8.0-beta.0:
   version "0.8.0-beta.0"
-  resolved "https://registry.npmjs.org/source-map/-/source-map-0.8.0-beta.0.tgz"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.8.0-beta.0.tgz#d4c1bb42c3f7ee925f005927ba10709e0d1d1f11"
   integrity sha512-2ymg6oRBpebeZi9UUNsgQ89bhx01TcTkmNTGnNO88imTmbSgy4nfujrgVEFKWpMTEGA11EDkTt7mqObTPdigIA==
   dependencies:
     whatwg-url "^7.0.0"
 
 sourcemap-codec@^1.4.8:
   version "1.4.8"
-  resolved "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz"
+  resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4"
   integrity sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==
 
 space-separated-tokens@^1.0.0:
   version "1.1.5"
-  resolved "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-1.1.5.tgz"
+  resolved "https://registry.yarnpkg.com/space-separated-tokens/-/space-separated-tokens-1.1.5.tgz#85f32c3d10d9682007e917414ddc5c26d1aa6899"
   integrity sha512-q/JSVd1Lptzhf5bkYm4ob4iWPjx0KiRe3sRFBNrVqbJkFaBm5vbbowy1mymoPNLRa52+oadOhJ+K49wsSeSjTA==
 
 space-separated-tokens@^2.0.0:
@@ -7871,57 +7742,26 @@ space-separated-tokens@^2.0.0:
 
 sprintf-js@~1.0.2:
   version "1.0.3"
-  resolved "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz"
+  resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
   integrity sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==
 
-stack-generator@^2.0.5:
-  version "2.0.10"
-  resolved "https://registry.npmjs.org/stack-generator/-/stack-generator-2.0.10.tgz"
-  integrity sha512-mwnua/hkqM6pF4k8SnmZ2zfETsRUpWXREfA/goT8SLCV4iOFa4bzOX2nDipWAZFPTjLvQB82f5yaodMVhK0yJQ==
+stacktrace-parser@^0.1.10:
+  version "0.1.10"
+  resolved "https://registry.yarnpkg.com/stacktrace-parser/-/stacktrace-parser-0.1.10.tgz#29fb0cae4e0d0b85155879402857a1639eb6051a"
+  integrity sha512-KJP1OCML99+8fhOHxwwzyWrlUuVX5GQ0ZpJTd1DFXhdkrvg1szxfHhawXUZ3g9TkXORQd4/WG68jMlQZ2p8wlg==
   dependencies:
-    stackframe "^1.3.4"
-
-stackframe@^1.3.4:
-  version "1.3.4"
-  resolved "https://registry.npmjs.org/stackframe/-/stackframe-1.3.4.tgz"
-  integrity sha512-oeVtt7eWQS+Na6F//S4kJ2K2VbRlS9D43mAlMyVpVWovy9o+jfgH8O9agzANzaiLjclA0oYzUXEM4PurhSUChw==
-
-stacktrace-gps@^3.0.4:
-  version "3.1.2"
-  resolved "https://registry.npmjs.org/stacktrace-gps/-/stacktrace-gps-3.1.2.tgz"
-  integrity sha512-GcUgbO4Jsqqg6RxfyTHFiPxdPqF+3LFmQhm7MgCuYQOYuWyqxo5pwRPz5d/u6/WYJdEnWfK4r+jGbyD8TSggXQ==
-  dependencies:
-    source-map "0.5.6"
-    stackframe "^1.3.4"
-
-stacktrace-js@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.npmjs.org/stacktrace-js/-/stacktrace-js-2.0.2.tgz"
-  integrity sha512-Je5vBeY4S1r/RnLydLl0TBTi3F2qdfWmYsGvtfZgEI+SCprPppaIhQf5nGcal4gI4cGpCV/duLcAzT1np6sQqg==
-  dependencies:
-    error-stack-parser "^2.0.6"
-    stack-generator "^2.0.5"
-    stacktrace-gps "^3.0.4"
+    type-fest "^0.7.1"
 
 stop-iteration-iterator@^1.0.0:
   version "1.0.0"
-  resolved "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.0.0.tgz"
+  resolved "https://registry.yarnpkg.com/stop-iteration-iterator/-/stop-iteration-iterator-1.0.0.tgz#6a60be0b4ee757d1ed5254858ec66b10c49285e4"
   integrity sha512-iCGQj+0l0HOdZ2AEeBADlsRC+vsnDsZsbdSiH1yNSjcfKM7fdpCMfqAL/dwF5BLiw/XhRft/Wax6zQbhq2BcjQ==
   dependencies:
     internal-slot "^1.0.4"
 
-string-width@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz"
-  integrity sha512-0XsVpQLnVCXHJfyEs8tC0zpTVIr5PKKsQtkT29IwupnPTjtPmQ3xT/4yCREF9hYkV/3M3kzcUTSAZT6a6h81tw==
-  dependencies:
-    code-point-at "^1.0.0"
-    is-fullwidth-code-point "^1.0.0"
-    strip-ansi "^3.0.0"
-
-"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.2.3:
+string-width@^4.2.3:
   version "4.2.3"
-  resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
   dependencies:
     emoji-regex "^8.0.0"
@@ -7930,7 +7770,7 @@ string-width@^1.0.1:
 
 string.prototype.matchall@^4.0.6, string.prototype.matchall@^4.0.7, string.prototype.matchall@^4.0.8:
   version "4.0.8"
-  resolved "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.8.tgz"
+  resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-4.0.8.tgz#3bf85722021816dcd1bf38bb714915887ca79fd3"
   integrity sha512-6zOCOcJ+RJAQshcTvXPHoxoQGONa3e/Lqx90wUA+wEzX78sg5Bo+1tQo4N0pohS0erG9qtCqJDjNCQBjeWVxyg==
   dependencies:
     call-bind "^1.0.2"
@@ -7942,9 +7782,18 @@ string.prototype.matchall@^4.0.6, string.prototype.matchall@^4.0.7, string.proto
     regexp.prototype.flags "^1.4.3"
     side-channel "^1.0.4"
 
+string.prototype.trim@^1.2.7:
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/string.prototype.trim/-/string.prototype.trim-1.2.7.tgz#a68352740859f6893f14ce3ef1bb3037f7a90533"
+  integrity sha512-p6TmeT1T3411M8Cgg9wBTMRtY2q9+PNy9EV1i2lIXUN/btt763oIfxwN3RR8VU6wHX8j/1CFy0L+YuThm6bgOg==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.4"
+    es-abstract "^1.20.4"
+
 string.prototype.trimend@^1.0.6:
   version "1.0.6"
-  resolved "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.6.tgz"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.6.tgz#c4a27fa026d979d79c04f17397f250a462944533"
   integrity sha512-JySq+4mrPf9EsDBEDYMOb/lM7XQLulwg5R/m1r0PXEFqrV0qHvl58sdTilSXtKOflCsK2E8jxf+GKC0T07RWwQ==
   dependencies:
     call-bind "^1.0.2"
@@ -7953,56 +7802,42 @@ string.prototype.trimend@^1.0.6:
 
 string.prototype.trimstart@^1.0.6:
   version "1.0.6"
-  resolved "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.6.tgz"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.6.tgz#e90ab66aa8e4007d92ef591bbf3cd422c56bdcf4"
   integrity sha512-omqjMDaY92pbn5HOX7f9IccLA+U1tA9GvtU4JrodiXFfYB7jPzzHpRzpglLAjtUV6bB557zwClJezTqnAiYnQA==
   dependencies:
     call-bind "^1.0.2"
     define-properties "^1.1.4"
     es-abstract "^1.20.4"
 
-string_decoder@~1.1.1:
-  version "1.1.1"
-  resolved "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz"
-  integrity sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==
-  dependencies:
-    safe-buffer "~5.1.0"
-
 stringify-object@^3.3.0:
   version "3.3.0"
-  resolved "https://registry.npmjs.org/stringify-object/-/stringify-object-3.3.0.tgz"
+  resolved "https://registry.yarnpkg.com/stringify-object/-/stringify-object-3.3.0.tgz#703065aefca19300d3ce88af4f5b3956d7556629"
   integrity sha512-rHqiFh1elqCQ9WPLIC8I0Q/g/wj5J1eMkyoiD6eoQApWHP0FtlK7rqnhmabL5VUY9JQCcqwwvlOaSuutekgyrw==
   dependencies:
     get-own-enumerable-property-symbols "^3.0.0"
     is-obj "^1.0.1"
     is-regexp "^1.0.0"
 
-strip-ansi@^3.0.0, strip-ansi@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz"
-  integrity sha512-VhumSSbBqDTP8p2ZLKj40UjBCV4+v8bUSEpUb4KjRgWk9pbqGF4REFj6KEagidb2f/M6AzC0EmFyDNGaw9OCzg==
-  dependencies:
-    ansi-regex "^2.0.0"
-
 strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
-  resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
   dependencies:
     ansi-regex "^5.0.1"
 
 strip-bom@^3.0.0:
   version "3.0.0"
-  resolved "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz"
+  resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3"
   integrity sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==
 
 strip-comments@^2.0.1:
   version "2.0.1"
-  resolved "https://registry.npmjs.org/strip-comments/-/strip-comments-2.0.1.tgz"
+  resolved "https://registry.yarnpkg.com/strip-comments/-/strip-comments-2.0.1.tgz#4ad11c3fbcac177a67a40ac224ca339ca1c1ba9b"
   integrity sha512-ZprKx+bBLXv067WTCALv8SSz5l2+XhpYCsVtSqlMnkAXMWDq+/ekVbl1ghqP9rUHTzv6sm/DwCOiYutU/yp1fw==
 
 strip-json-comments@^3.1.0, strip-json-comments@^3.1.1:
   version "3.1.1"
-  resolved "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz"
+  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
   integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
 
 style-to-object@^0.4.0:
@@ -8014,43 +7849,56 @@ style-to-object@^0.4.0:
 
 styled-jsx@5.0.7:
   version "5.0.7"
-  resolved "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.0.7.tgz"
+  resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-5.0.7.tgz#be44afc53771b983769ac654d355ca8d019dff48"
   integrity sha512-b3sUzamS086YLRuvnaDigdAewz1/EFYlHpYBP5mZovKEdQQOIIYq8lApylub3HHZ6xFjV051kkGU7cudJmrXEA==
 
-stylis@4.1.3, stylis@^4.0.6:
-  version "4.1.3"
-  resolved "https://registry.npmjs.org/stylis/-/stylis-4.1.3.tgz"
-  integrity sha512-GP6WDNWf+o403jrEp9c5jibKavrtLW+/qYGhFxFrG8maXhwTBI7gLLhiBb0o7uFccWN+EOS9aMO6cGHWAO07OA==
+stylis@4.1.4:
+  version "4.1.4"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.1.4.tgz#9cb60e7153d8ac6d02d773552bf51c7a0344535b"
+  integrity sha512-USf5pszRYwuE6hg9by0OkKChkQYEXfkeTtm0xKw+jqQhwyjCVLdYyMBK7R+n7dhzsblAWJnGxju4vxq5eH20GQ==
+
+sucrase@^3.32.0:
+  version "3.32.0"
+  resolved "https://registry.yarnpkg.com/sucrase/-/sucrase-3.32.0.tgz#c4a95e0f1e18b6847127258a75cf360bc568d4a7"
+  integrity sha512-ydQOU34rpSyj2TGyz4D2p8rbktIOZ8QY9s+DGLvFU1i5pWJE8vkpruCjGCMHsdXwnD7JDcS+noSwM/a7zyNFDQ==
+  dependencies:
+    "@jridgewell/gen-mapping" "^0.3.2"
+    commander "^4.0.0"
+    glob "7.1.6"
+    lines-and-columns "^1.1.6"
+    mz "^2.7.0"
+    pirates "^4.0.1"
+    ts-interface-checker "^0.1.9"
 
 supports-color@^5.3.0:
   version "5.5.0"
-  resolved "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
   integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
   dependencies:
     has-flag "^3.0.0"
 
 supports-color@^7.0.0, supports-color@^7.1.0:
   version "7.2.0"
-  resolved "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.2.0.tgz#1b7dcdcb32b8138801b3e478ba6a51caa89648da"
   integrity sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==
   dependencies:
     has-flag "^4.0.0"
 
 supports-color@^8.0.0:
   version "8.1.1"
-  resolved "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-8.1.1.tgz#cd6fc17e28500cff56c1b86c0a7fd4a54a73005c"
   integrity sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==
   dependencies:
     has-flag "^4.0.0"
 
 supports-preserve-symlinks-flag@^1.0.0:
   version "1.0.0"
-  resolved "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz"
+  resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
   integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
 
 svgmoji@^3.2.0:
   version "3.2.0"
-  resolved "https://registry.npmjs.org/svgmoji/-/svgmoji-3.2.0.tgz"
+  resolved "https://registry.yarnpkg.com/svgmoji/-/svgmoji-3.2.0.tgz#2214f4930e76e82c33bae23139c85b3973610b32"
   integrity sha512-tjmdQhIju2ZQ81FLBlPngg1aWMOhQjP9ErXb2ROikM0aBGA/hqI0/DN/5J0sDsXzJPHmODpSFhWfiSsUieU3bA==
   dependencies:
     "@babel/runtime" "^7.12.5"
@@ -8062,12 +7910,12 @@ svgmoji@^3.2.0:
 
 swr@^1.3.0:
   version "1.3.0"
-  resolved "https://registry.npmjs.org/swr/-/swr-1.3.0.tgz"
+  resolved "https://registry.yarnpkg.com/swr/-/swr-1.3.0.tgz#c6531866a35b4db37b38b72c45a63171faf9f4e8"
   integrity sha512-dkghQrOl2ORX9HYrMDtPa7LTVHJjCTeZoB1dqTbnnEDlSvN8JEKpYIYurDfvbQFUUS8Cg8PceFVZNkW0KNNYPw==
 
 table@^6.0.9:
   version "6.8.1"
-  resolved "https://registry.npmjs.org/table/-/table-6.8.1.tgz"
+  resolved "https://registry.yarnpkg.com/table/-/table-6.8.1.tgz#ea2b71359fe03b017a5fbc296204471158080bdf"
   integrity sha512-Y4X9zqrCftUhMeH2EptSSERdVKt/nEdijTOacGD/97EKjhQ/Qs8RTlEGABSJNNN8lac9kheH+af7yAkEWlgneA==
   dependencies:
     ajv "^8.0.1"
@@ -8077,42 +7925,42 @@ table@^6.0.9:
     strip-ansi "^6.0.1"
 
 tailwindcss@^3.1.6:
-  version "3.2.4"
-  resolved "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.2.4.tgz"
-  integrity sha512-AhwtHCKMtR71JgeYDaswmZXhPcW9iuI9Sp2LvZPo9upDZ7231ZJ7eA9RaURbhpXGVlrjX4cFNlB4ieTetEb7hQ==
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.3.2.tgz#2f9e35d715fdf0bbf674d90147a0684d7054a2d3"
+  integrity sha512-9jPkMiIBXvPc2KywkraqsUfbfj+dHDb+JPWtSJa9MLFdrPyazI7q6WX2sUrm7R9eVR7qqv3Pas7EvQFzxKnI6w==
   dependencies:
+    "@alloc/quick-lru" "^5.2.0"
     arg "^5.0.2"
     chokidar "^3.5.3"
-    color-name "^1.1.4"
-    detective "^5.2.1"
     didyoumean "^1.2.2"
     dlv "^1.1.3"
     fast-glob "^3.2.12"
     glob-parent "^6.0.2"
     is-glob "^4.0.3"
-    lilconfig "^2.0.6"
+    jiti "^1.18.2"
+    lilconfig "^2.1.0"
     micromatch "^4.0.5"
     normalize-path "^3.0.0"
     object-hash "^3.0.0"
     picocolors "^1.0.0"
-    postcss "^8.4.18"
-    postcss-import "^14.1.0"
-    postcss-js "^4.0.0"
-    postcss-load-config "^3.1.4"
-    postcss-nested "6.0.0"
-    postcss-selector-parser "^6.0.10"
+    postcss "^8.4.23"
+    postcss-import "^15.1.0"
+    postcss-js "^4.0.1"
+    postcss-load-config "^4.0.1"
+    postcss-nested "^6.0.1"
+    postcss-selector-parser "^6.0.11"
     postcss-value-parser "^4.2.0"
-    quick-lru "^5.1.1"
-    resolve "^1.22.1"
+    resolve "^1.22.2"
+    sucrase "^3.32.0"
 
 temp-dir@^2.0.0:
   version "2.0.0"
-  resolved "https://registry.npmjs.org/temp-dir/-/temp-dir-2.0.0.tgz"
+  resolved "https://registry.yarnpkg.com/temp-dir/-/temp-dir-2.0.0.tgz#bde92b05bdfeb1516e804c9c00ad45177f31321e"
   integrity sha512-aoBAniQmmwtcKp/7BzsH8Cxzv8OL736p7v1ihGb5e9DJ9kTwGWHrQrVB5+lfVDzfGrdRzXch+ig7LHaY1JTOrg==
 
 tempy@^0.6.0:
   version "0.6.0"
-  resolved "https://registry.npmjs.org/tempy/-/tempy-0.6.0.tgz"
+  resolved "https://registry.yarnpkg.com/tempy/-/tempy-0.6.0.tgz#65e2c35abc06f1124a97f387b08303442bde59f3"
   integrity sha512-G13vtMYPT/J8A4X2SjdtBTphZlrp1gKv6hZiOjw14RCWg6GbHuQBGtjlx75xLbYV/wEc0D7G5K4rxKP/cXk8Bw==
   dependencies:
     is-stream "^2.0.0"
@@ -8121,20 +7969,20 @@ tempy@^0.6.0:
     unique-string "^2.0.0"
 
 terser-webpack-plugin@^5.3.3:
-  version "5.3.6"
-  resolved "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.6.tgz"
-  integrity sha512-kfLFk+PoLUQIbLmB1+PZDMRSZS99Mp+/MHqDNmMA6tOItzRt+Npe3E+fsMs5mfcM0wCtrrdU387UnV+vnSffXQ==
+  version "5.3.7"
+  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-5.3.7.tgz#ef760632d24991760f339fe9290deb936ad1ffc7"
+  integrity sha512-AfKwIktyP7Cu50xNjXF/6Qb5lBNzYaWpU6YfoX3uZicTx0zTy0stDDCsvjDapKsSDvOeWo5MEq4TmdBy2cNoHw==
   dependencies:
-    "@jridgewell/trace-mapping" "^0.3.14"
+    "@jridgewell/trace-mapping" "^0.3.17"
     jest-worker "^27.4.5"
     schema-utils "^3.1.1"
-    serialize-javascript "^6.0.0"
-    terser "^5.14.1"
+    serialize-javascript "^6.0.1"
+    terser "^5.16.5"
 
-terser@^5.0.0, terser@^5.14.1:
-  version "5.16.3"
-  resolved "https://registry.npmjs.org/terser/-/terser-5.16.3.tgz"
-  integrity sha512-v8wWLaS/xt3nE9dgKEWhNUFP6q4kngO5B8eYFUuebsu7Dw/UNAnpUod6UHo04jSSkv8TzKHjZDSd7EXdDQAl8Q==
+terser@^5.0.0, terser@^5.16.5:
+  version "5.17.1"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-5.17.1.tgz#948f10830454761e2eeedc6debe45c532c83fd69"
+  integrity sha512-hVl35zClmpisy6oaoKALOpS0rDYLxRFLHhRuDlEGTKey9qHjS1w9GMORjuwIMt70Wan4lwsLYyWDVnWgF+KUEw==
   dependencies:
     "@jridgewell/source-map" "^0.3.2"
     acorn "^8.5.0"
@@ -8143,27 +7991,41 @@ terser@^5.0.0, terser@^5.14.1:
 
 text-table@^0.2.0:
   version "0.2.0"
-  resolved "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz"
+  resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
   integrity sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==
 
+thenify-all@^1.0.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/thenify-all/-/thenify-all-1.6.0.tgz#1a1918d402d8fc3f98fbf234db0bcc8cc10e9726"
+  integrity sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==
+  dependencies:
+    thenify ">= 3.1.0 < 4"
+
+"thenify@>= 3.1.0 < 4":
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/thenify/-/thenify-3.3.1.tgz#8932e686a4066038a016dd9e2ca46add9838a95f"
+  integrity sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==
+  dependencies:
+    any-promise "^1.0.0"
+
 throttle-debounce@^3.0.1:
   version "3.0.1"
-  resolved "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-3.0.1.tgz"
+  resolved "https://registry.yarnpkg.com/throttle-debounce/-/throttle-debounce-3.0.1.tgz#32f94d84dfa894f786c9a1f290e7a645b6a19abb"
   integrity sha512-dTEWWNu6JmeVXY0ZYoPuH5cRIwc0MeGbJwah9KUNYSJwommQpCzTySTpEe8Gs1J23aeWEuAobe4Ag7EHVt/LOg==
 
 tiny-invariant@^1.0.6:
   version "1.3.1"
-  resolved "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.1.tgz"
+  resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.3.1.tgz#8560808c916ef02ecfd55e66090df23a4b7aa642"
   integrity sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw==
 
 tiny-warning@^1.0.3:
   version "1.0.3"
-  resolved "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz"
+  resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
   integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
 
 tinycolor2@^1.4.1:
   version "1.6.0"
-  resolved "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.6.0.tgz"
+  resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.6.0.tgz#f98007460169b0263b97072c5ae92484ce02d09e"
   integrity sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==
 
 tlds@^1.238.0:
@@ -8173,31 +8035,26 @@ tlds@^1.238.0:
 
 to-fast-properties@^2.0.0:
   version "2.0.0"
-  resolved "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz"
+  resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
   integrity sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==
 
 to-regex-range@^5.0.1:
   version "5.0.1"
-  resolved "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz"
+  resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
   integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==
   dependencies:
     is-number "^7.0.0"
 
-toggle-selection@^1.0.6:
-  version "1.0.6"
-  resolved "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz"
-  integrity sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ==
-
 tr46@^1.0.1:
   version "1.0.1"
-  resolved "https://registry.npmjs.org/tr46/-/tr46-1.0.1.tgz"
+  resolved "https://registry.yarnpkg.com/tr46/-/tr46-1.0.1.tgz#a8b13fd6bfd2489519674ccde55ba3693b706d09"
   integrity sha512-dTpowEjclQ7Kgx5SdBkqRzVhERQXov8/l9Ft9dVM9fmg0W0KQSVaXX9T4i6twCPNtYiZM53lpSSUAwJbFPOHxA==
   dependencies:
     punycode "^2.1.0"
 
 tr46@~0.0.3:
   version "0.0.3"
-  resolved "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz"
+  resolved "https://registry.yarnpkg.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a"
   integrity sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==
 
 trim-lines@^3.0.0:
@@ -8210,127 +8067,127 @@ trough@^2.0.0:
   resolved "https://registry.yarnpkg.com/trough/-/trough-2.1.0.tgz#0f7b511a4fde65a46f18477ab38849b22c554876"
   integrity sha512-AqTiAOLcj85xS7vQ8QkAV41hPDIJ71XJB4RCUrzo/1GM2CQwhkJGaf9Hgr7BOugMRpgGUrqRg/DrBDl4H40+8g==
 
-ts-easing@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.npmjs.org/ts-easing/-/ts-easing-0.2.0.tgz"
-  integrity sha512-Z86EW+fFFh/IFB1fqQ3/+7Zpf9t2ebOAxNI/V6Wo7r5gqiqtxmgTlQ1qbqQcjLKYeSHPTsEmvlJUDg/EuL0uHQ==
+ts-interface-checker@^0.1.9:
+  version "0.1.13"
+  resolved "https://registry.yarnpkg.com/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz#784fd3d679722bc103b1b4b8030bcddb5db2a699"
+  integrity sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==
 
 tsconfig-paths@^3.14.1:
-  version "3.14.1"
-  resolved "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.14.1.tgz"
-  integrity sha512-fxDhWnFSLt3VuTwtvJt5fpwxBHg5AdKWMsgcPOOIilyjymcYVZoCQF8fvFRezCNfblEXmi+PcM1eYHeOAgXCOQ==
+  version "3.14.2"
+  resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.14.2.tgz#6e32f1f79412decd261f92d633a9dc1cfa99f088"
+  integrity sha512-o/9iXgCYc5L/JxCHPe3Hvh8Q/2xm5Z+p18PESBU6Ff33695QnCHBEjcytY2q19ua7Mbl/DavtBOLq+oG0RCL+g==
   dependencies:
     "@types/json5" "^0.0.29"
-    json5 "^1.0.1"
+    json5 "^1.0.2"
     minimist "^1.2.6"
     strip-bom "^3.0.0"
 
 tslib@^1.8.1, tslib@^1.9.3:
   version "1.14.1"
-  resolved "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
-tslib@^2.0.0, tslib@^2.0.3, tslib@^2.1.0, tslib@^2.3.0, tslib@^2.4.0:
+tslib@^2.0.0, tslib@^2.0.3, tslib@^2.1.0, tslib@^2.4.0, tslib@~2.5.0:
   version "2.5.0"
-  resolved "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.5.0.tgz#42bfed86f5787aeb41d031866c8f402429e0fddf"
   integrity sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==
 
-tslib@~2.3.1:
-  version "2.3.1"
-  resolved "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz"
-  integrity sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==
-
 tsutils@^3.21.0:
   version "3.21.0"
-  resolved "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz"
+  resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.21.0.tgz#b48717d394cea6c1e096983eed58e9d61715b623"
   integrity sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==
   dependencies:
     tslib "^1.8.1"
 
-turbo-darwin-64@1.8.2:
-  version "1.8.2"
-  resolved "https://registry.yarnpkg.com/turbo-darwin-64/-/turbo-darwin-64-1.8.2.tgz#14c52e97d128c63fd3c7b2f15963123f02b9aa0e"
-  integrity sha512-j77U0uOeppENexFsIvvzExADSqMBEeCHnm+6LSNQfaajHSrbUVSTsuD6ZMYHamT6bslc+ZZm21jdecWkwZFBbw==
+turbo-darwin-64@1.9.3:
+  version "1.9.3"
+  resolved "https://registry.yarnpkg.com/turbo-darwin-64/-/turbo-darwin-64-1.9.3.tgz#29470b902a1418dae8a88b2620caf917b27480bc"
+  integrity sha512-0dFc2cWXl82kRE4Z+QqPHhbEFEpUZho1msHXHWbz5+PqLxn8FY0lEVOHkq5tgKNNEd5KnGyj33gC/bHhpZOk5g==
 
-turbo-darwin-arm64@1.8.2:
-  version "1.8.2"
-  resolved "https://registry.npmjs.org/turbo-darwin-arm64/-/turbo-darwin-arm64-1.8.2.tgz"
-  integrity sha512-1NoAvjlwt2wycsAFJouauy9epn9DptSMy6BoGqxJVc4jiibsLepp9qYc4f1/ln0zjd3FR1IvhGOiBfdpqMN7hg==
+turbo-darwin-arm64@1.9.3:
+  version "1.9.3"
+  resolved "https://registry.yarnpkg.com/turbo-darwin-arm64/-/turbo-darwin-arm64-1.9.3.tgz#0eb404d6101ba69eab8522b16260a4eb50885e6c"
+  integrity sha512-1cYbjqLBA2zYE1nbf/qVnEkrHa4PkJJbLo7hnuMuGM0bPzh4+AnTNe98gELhqI1mkTWBu/XAEeF5u6dgz0jLNA==
 
-turbo-linux-64@1.8.2:
-  version "1.8.2"
-  resolved "https://registry.yarnpkg.com/turbo-linux-64/-/turbo-linux-64-1.8.2.tgz#02442a48104db83c1e53409c85744fdeacbded56"
-  integrity sha512-TcT3CRYnBYA46kLGGbGC2jDyCEAvMgVpUdpIZGTmod48EKpZaEfVgTkpa4GJde8W68yRFogPZjPVL3yJHFpXSA==
+turbo-linux-64@1.9.3:
+  version "1.9.3"
+  resolved "https://registry.yarnpkg.com/turbo-linux-64/-/turbo-linux-64-1.9.3.tgz#dbce8fd50edee1319f17800ee38e7c4749ab0cb0"
+  integrity sha512-UuBPFefawEwpuxh5pM9Jqq3q4C8M0vYxVYlB3qea/nHQ80pxYq7ZcaLGEpb10SGnr3oMUUs1zZvkXWDNKCJb8Q==
 
-turbo-linux-arm64@1.8.2:
-  version "1.8.2"
-  resolved "https://registry.yarnpkg.com/turbo-linux-arm64/-/turbo-linux-arm64-1.8.2.tgz#890ad0691671cb252e756dcd56295895f61d369a"
-  integrity sha512-Mb9+KBy4YJzPMZ6WGoMzMVZ6EtueCSvOvgmNpVFgkwbtabfBuaBOvN+irtg4RRSWvJQTDTziLABieocEEXZImQ==
+turbo-linux-arm64@1.9.3:
+  version "1.9.3"
+  resolved "https://registry.yarnpkg.com/turbo-linux-arm64/-/turbo-linux-arm64-1.9.3.tgz#636b77fde17c7a5cdef8a20616ff57f08c785345"
+  integrity sha512-vUrNGa3hyDtRh9W0MkO+l1dzP8Co2gKnOVmlJQW0hdpOlWlIh22nHNGGlICg+xFa2f9j4PbQlWTsc22c019s8Q==
 
-turbo-windows-64@1.8.2:
-  version "1.8.2"
-  resolved "https://registry.yarnpkg.com/turbo-windows-64/-/turbo-windows-64-1.8.2.tgz#a57b902cdccdb69d1efa18772bee9e277e079583"
-  integrity sha512-/+R5ikRrw2w2w38JtNPubGLIQHgUC70m783DI9aPgaM5c8P5D/Y0k6HgjuC/uXgiaz2h3R7p7YWlr+2/E0bqyA==
+turbo-windows-64@1.9.3:
+  version "1.9.3"
+  resolved "https://registry.yarnpkg.com/turbo-windows-64/-/turbo-windows-64-1.9.3.tgz#c65625c222456161b0b4d000ec7f50e372332825"
+  integrity sha512-0BZ7YaHs6r+K4ksqWus1GKK3W45DuDqlmfjm/yuUbTEVc8szmMCs12vugU2Zi5GdrdJSYfoKfEJ/PeegSLIQGQ==
 
-turbo-windows-arm64@1.8.2:
-  version "1.8.2"
-  resolved "https://registry.yarnpkg.com/turbo-windows-arm64/-/turbo-windows-arm64-1.8.2.tgz#0f976a2c6b8a46447fc277d5a9f7d8615792bdde"
-  integrity sha512-s07viz5nXSx4kyiksuPM4FGLRkoaGMaw0BpwFjdRQsl1p+WclUN1IPdokVPKOmFpu5pNCVYlG/raP/mXAEzDCg==
+turbo-windows-arm64@1.9.3:
+  version "1.9.3"
+  resolved "https://registry.yarnpkg.com/turbo-windows-arm64/-/turbo-windows-arm64-1.9.3.tgz#86e105692ad6ba935eff0284522bdf7728a2e517"
+  integrity sha512-QJUYLSsxdXOsR1TquiOmLdAgtYcQ/RuSRpScGvnZb1hY0oLc7JWU0llkYB81wVtWs469y8H9O0cxbKwCZGR4RQ==
 
 turbo@latest:
-  version "1.8.2"
-  resolved "https://registry.yarnpkg.com/turbo/-/turbo-1.8.2.tgz#869e674a524cde4f449ae4458f4651818e2ffe00"
-  integrity sha512-G/uJx6bZK5RwTWHsRN/MP0MvXFznmCaL3MQXdSf+OG/q0o8GE7+yivyyWEplWI1Asc8AEN909A/wlIkoz2FKTg==
+  version "1.9.3"
+  resolved "https://registry.yarnpkg.com/turbo/-/turbo-1.9.3.tgz#911012624f647f98d9788a08e25b98e38cdd48b2"
+  integrity sha512-ID7mxmaLUPKG/hVkp+h0VuucB1U99RPCJD9cEuSEOdIPoSIuomcIClEJtKamUsdPLhLCud+BvapBNnhgh58Nzw==
   optionalDependencies:
-    turbo-darwin-64 "1.8.2"
-    turbo-darwin-arm64 "1.8.2"
-    turbo-linux-64 "1.8.2"
-    turbo-linux-arm64 "1.8.2"
-    turbo-windows-64 "1.8.2"
-    turbo-windows-arm64 "1.8.2"
+    turbo-darwin-64 "1.9.3"
+    turbo-darwin-arm64 "1.9.3"
+    turbo-linux-64 "1.9.3"
+    turbo-linux-arm64 "1.9.3"
+    turbo-windows-64 "1.9.3"
+    turbo-windows-arm64 "1.9.3"
 
 turndown-plugin-gfm@^1.0.2:
   version "1.0.2"
-  resolved "https://registry.npmjs.org/turndown-plugin-gfm/-/turndown-plugin-gfm-1.0.2.tgz"
+  resolved "https://registry.yarnpkg.com/turndown-plugin-gfm/-/turndown-plugin-gfm-1.0.2.tgz#6f8678a361f35220b2bdf5619e6049add75bf1c7"
   integrity sha512-vwz9tfvF7XN/jE0dGoBei3FXWuvll78ohzCZQuOb+ZjWrs3a0XhQVomJEb2Qh4VHTPNRO4GPZh0V7VRbiWwkRg==
 
-turndown@^7.1.1:
-  version "7.1.1"
-  resolved "https://registry.npmjs.org/turndown/-/turndown-7.1.1.tgz"
-  integrity sha512-BEkXaWH7Wh7e9bd2QumhfAXk5g34+6QUmmWx+0q6ThaVOLuLUqsnkq35HQ5SBHSaxjSfSM7US5o4lhJNH7B9MA==
+turndown@^7.1.2:
+  version "7.1.2"
+  resolved "https://registry.yarnpkg.com/turndown/-/turndown-7.1.2.tgz#7feb838c78f14241e79ed92a416e0d213e044a29"
+  integrity sha512-ntI9R7fcUKjqBP6QU8rBK2Ehyt8LAzt3UBT9JR9tgo6GtuKvyUzpayWmeMKJw1DPdXzktvtIT8m2mVXz+bL/Qg==
   dependencies:
     domino "^2.1.6"
 
 type-check@^0.4.0, type-check@~0.4.0:
   version "0.4.0"
-  resolved "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz"
+  resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.4.0.tgz#07b8203bfa7056c0657050e3ccd2c37730bab8f1"
   integrity sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==
   dependencies:
     prelude-ls "^1.2.1"
 
 type-fest@^0.16.0:
   version "0.16.0"
-  resolved "https://registry.npmjs.org/type-fest/-/type-fest-0.16.0.tgz"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.16.0.tgz#3240b891a78b0deae910dbeb86553e552a148860"
   integrity sha512-eaBzG6MxNzEn9kiwvtre90cXaNLkmadMWa1zQMs3XORCXNbsH/OewwbxC5ia9dCxIxnTAsSxXJaa/p5y8DlvJg==
 
 type-fest@^0.20.2:
   version "0.20.2"
-  resolved "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.20.2.tgz#1bf207f4b28f91583666cb5fbd327887301cd5f4"
   integrity sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==
 
+type-fest@^0.7.1:
+  version "0.7.1"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.7.1.tgz#8dda65feaf03ed78f0a3f9678f1869147f7c5c48"
+  integrity sha512-Ne2YiiGN8bmrmJJEuTWTLJR32nh/JdL1+PSicowtNb0WFpn59GK8/lfD61bVtzguz7b3PBt74nxpv/Pw5po5Rg==
+
 type-fest@^1.2.0:
   version "1.4.0"
-  resolved "https://registry.npmjs.org/type-fest/-/type-fest-1.4.0.tgz"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-1.4.0.tgz#e9fb813fe3bf1744ec359d55d1affefa76f14be1"
   integrity sha512-yGSza74xk0UG8k+pLh5oeoYirvIiWo5t0/o3zHHAO2tRDiZcxWP7fywNlXhqb6/r6sWvwi+RsyQMWhVLe4BVuA==
 
-type-fest@^2.0.0:
+type-fest@^2.19.0:
   version "2.19.0"
-  resolved "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-2.19.0.tgz#88068015bb33036a598b952e55e9311a60fd3a9b"
   integrity sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==
 
 typed-array-length@^1.0.4:
   version "1.0.4"
-  resolved "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.4.tgz"
+  resolved "https://registry.yarnpkg.com/typed-array-length/-/typed-array-length-1.0.4.tgz#89d83785e5c4098bec72e08b319651f0eac9c1bb"
   integrity sha512-KjZypGq+I/H7HI5HlOoGHkWUUGq+Q0TPhQurLbyrVrvnKTBgzLhIJ7j6J/XTQOi0d1RjyZ0wdas8bKs2p0x3Ng==
   dependencies:
     call-bind "^1.0.2"
@@ -8339,22 +8196,22 @@ typed-array-length@^1.0.4:
 
 typed-styles@^0.0.7:
   version "0.0.7"
-  resolved "https://registry.npmjs.org/typed-styles/-/typed-styles-0.0.7.tgz"
+  resolved "https://registry.yarnpkg.com/typed-styles/-/typed-styles-0.0.7.tgz#93392a008794c4595119ff62dde6809dbc40a3d9"
   integrity sha512-pzP0PWoZUhsECYjABgCGQlRGL1n7tOHsgwYv3oIiEpJwGhFTuty/YNeduxQYzXXa3Ge5BdT6sHYIQYpl4uJ+5Q==
 
 typescript@4.7.4:
   version "4.7.4"
-  resolved "https://registry.npmjs.org/typescript/-/typescript-4.7.4.tgz"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.7.4.tgz#1a88596d1cf47d59507a1bcdfb5b9dfe4d488235"
   integrity sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ==
 
-typescript@^4.7.4, typescript@^4.8.4:
+typescript@^4.7.4:
   version "4.9.5"
-  resolved "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.9.5.tgz#095979f9bcc0d09da324d58d03ce8f8374cbe65a"
   integrity sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==
 
 unbox-primitive@^1.0.2:
   version "1.0.2"
-  resolved "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz"
+  resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.0.2.tgz#29032021057d5e6cdbd08c5129c226dff8ed6f9e"
   integrity sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==
   dependencies:
     call-bind "^1.0.2"
@@ -8364,12 +8221,12 @@ unbox-primitive@^1.0.2:
 
 unicode-canonical-property-names-ecmascript@^2.0.0:
   version "2.0.0"
-  resolved "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz"
+  resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz#301acdc525631670d39f6146e0e77ff6bbdebddc"
   integrity sha512-yY5PpDlfVIU5+y/BSCxAJRBIS1Zc2dDG3Ujq+sR0U+JjUevW2JhocOF+soROYDSaAezOzOKuyyixhD6mBknSmQ==
 
 unicode-match-property-ecmascript@^2.0.0:
   version "2.0.0"
-  resolved "https://registry.npmjs.org/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-2.0.0.tgz"
+  resolved "https://registry.yarnpkg.com/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-2.0.0.tgz#54fd16e0ecb167cf04cf1f756bdcc92eba7976c3"
   integrity sha512-5kaZCrbp5mmbz5ulBkDkbY0SsPOjKqVS35VpL9ulMPfSl0J0Xsm+9Evphv9CoIZFwre7aJoa94AY6seMKGVN5Q==
   dependencies:
     unicode-canonical-property-names-ecmascript "^2.0.0"
@@ -8377,12 +8234,12 @@ unicode-match-property-ecmascript@^2.0.0:
 
 unicode-match-property-value-ecmascript@^2.1.0:
   version "2.1.0"
-  resolved "https://registry.npmjs.org/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.1.0.tgz"
+  resolved "https://registry.yarnpkg.com/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.1.0.tgz#cb5fffdcd16a05124f5a4b0bf7c3770208acbbe0"
   integrity sha512-qxkjQt6qjg/mYscYMC0XKRn3Rh0wFPlfxB0xkt9CfyTvpX1Ra0+rAmdX2QyAobptSEvuy4RtpPRui6XkV+8wjA==
 
 unicode-property-aliases-ecmascript@^2.0.0:
   version "2.1.0"
-  resolved "https://registry.npmjs.org/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.1.0.tgz"
+  resolved "https://registry.yarnpkg.com/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.1.0.tgz#43d41e3be698bd493ef911077c9b131f827e8ccd"
   integrity sha512-6t3foTQI9qne+OZoVQB/8x8rk2k1eVy1gRXhV3oFQ5T6R1dqQ1xtin3XqSlx3+ATBkliTaR/hHyJBm+LVPNM8w==
 
 unified@^10.0.0:
@@ -8400,7 +8257,7 @@ unified@^10.0.0:
 
 unique-string@^2.0.0:
   version "2.0.0"
-  resolved "https://registry.npmjs.org/unique-string/-/unique-string-2.0.0.tgz"
+  resolved "https://registry.yarnpkg.com/unique-string/-/unique-string-2.0.0.tgz#39c6451f81afb2749de2b233e3f7c5e8843bd89d"
   integrity sha512-uNaeirEPvpZWSgzwsPGtU2zVSTrn/8L5q/IexZmH0eH6SA73CmAA5U4GwORTxQAZs95TAXLNqeLoPPNO5gZfWg==
   dependencies:
     crypto-random-string "^2.0.0"
@@ -8450,39 +8307,39 @@ unist-util-visit@^4.0.0:
 
 universalify@^2.0.0:
   version "2.0.0"
-  resolved "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz"
+  resolved "https://registry.yarnpkg.com/universalify/-/universalify-2.0.0.tgz#75a4984efedc4b08975c5aeb73f530d02df25717"
   integrity sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==
 
 upath@^1.2.0:
   version "1.2.0"
-  resolved "https://registry.npmjs.org/upath/-/upath-1.2.0.tgz"
+  resolved "https://registry.yarnpkg.com/upath/-/upath-1.2.0.tgz#8f66dbcd55a883acdae4408af8b035a5044c1894"
   integrity sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==
 
 update-browserslist-db@^1.0.10:
-  version "1.0.10"
-  resolved "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.10.tgz"
-  integrity sha512-OztqDenkfFkbSG+tRxBeAnCVPckDBcvibKd35yDONx6OU8N7sqgwc7rCbkJ/WcYtVRZ4ba68d6byhC21GFh7sQ==
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.0.11.tgz#9a2a641ad2907ae7b3616506f4b977851db5b940"
+  integrity sha512-dCwEFf0/oT85M1fHBg4F0jtLwJrutGoHSQXCh7u4o2t1drG+c0a9Flnqww6XUKSfQMPpJBRjU8d4RXB09qtvaA==
   dependencies:
     escalade "^3.1.1"
     picocolors "^1.0.0"
 
 upper-case-first@^2.0.2:
   version "2.0.2"
-  resolved "https://registry.npmjs.org/upper-case-first/-/upper-case-first-2.0.2.tgz"
+  resolved "https://registry.yarnpkg.com/upper-case-first/-/upper-case-first-2.0.2.tgz#992c3273f882abd19d1e02894cc147117f844324"
   integrity sha512-514ppYHBaKwfJRK/pNC6c/OxfGa0obSnAl106u97Ed0I625Nin96KAjttZF6ZL3e1XLtphxnqrOi9iWgm+u+bg==
   dependencies:
     tslib "^2.0.3"
 
 upper-case@^2.0.2:
   version "2.0.2"
-  resolved "https://registry.npmjs.org/upper-case/-/upper-case-2.0.2.tgz"
+  resolved "https://registry.yarnpkg.com/upper-case/-/upper-case-2.0.2.tgz#d89810823faab1df1549b7d97a76f8662bae6f7a"
   integrity sha512-KgdgDGJt2TpuwBUIjgG6lzw2GWFRCW9Qkfkiv0DxqHHLYJHmtmdUIKcZd8rHgFSjopVTlw6ggzCm1b8MFQwikg==
   dependencies:
     tslib "^2.0.3"
 
 uri-js@^4.2.2:
   version "4.4.1"
-  resolved "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz"
+  resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.4.1.tgz#9b1a52595225859e55f669d928f88c6c57f2a77e"
   integrity sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==
   dependencies:
     punycode "^2.1.0"
@@ -8494,19 +8351,19 @@ use-callback-ref@^1.3.0:
   dependencies:
     tslib "^2.0.0"
 
-use-isomorphic-layout-effect@^1.1.0, use-isomorphic-layout-effect@^1.1.1:
+use-isomorphic-layout-effect@^1.1.0, use-isomorphic-layout-effect@^1.1.2:
   version "1.1.2"
-  resolved "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz"
+  resolved "https://registry.yarnpkg.com/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz#497cefb13d863d687b08477d9e5a164ad8c1a6fb"
   integrity sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==
 
 use-memo-one@^1.1.1:
   version "1.1.3"
-  resolved "https://registry.npmjs.org/use-memo-one/-/use-memo-one-1.1.3.tgz"
+  resolved "https://registry.yarnpkg.com/use-memo-one/-/use-memo-one-1.1.3.tgz#2fd2e43a2169eabc7496960ace8c79efef975e99"
   integrity sha512-g66/K7ZQGYrI6dy8GLpVcMsBp4s17xNkYJVSMvTEevGy3nDxHOfE6z8BVE22+5G5x7t3+bhzrlTDB7ObrEE0cQ==
 
-use-previous@^1.1.0:
+use-previous@^1.2.0:
   version "1.2.0"
-  resolved "https://registry.npmjs.org/use-previous/-/use-previous-1.2.0.tgz"
+  resolved "https://registry.yarnpkg.com/use-previous/-/use-previous-1.2.0.tgz#df7f0c6d5dc7c9e81650eb29c36575306a6898c0"
   integrity sha512-tK7Ne779nqTKGeh0rsFvxnQcEqePFRYlM0rfmNy9JH+h+2ndja7P0017nda0Q1gkqfcOD//pKZbDyyLIUH2s+Q==
   dependencies:
     use-isomorphic-layout-effect "^1.1.0"
@@ -8521,17 +8378,17 @@ use-sidecar@^1.1.2:
 
 use-sync-external-store@1.2.0:
   version "1.2.0"
-  resolved "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz"
+  resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
   integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
 
-util-deprecate@^1.0.2, util-deprecate@~1.0.1:
+util-deprecate@^1.0.2:
   version "1.0.2"
-  resolved "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz"
+  resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
   integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==
 
 uuid@^9.0.0:
   version "9.0.0"
-  resolved "https://registry.npmjs.org/uuid/-/uuid-9.0.0.tgz"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-9.0.0.tgz#592f550650024a38ceb0c562f2f6aa435761efb5"
   integrity sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg==
 
 uvu@^0.5.0:
@@ -8546,7 +8403,7 @@ uvu@^0.5.0:
 
 v8-compile-cache@^2.0.3:
   version "2.3.0"
-  resolved "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz"
+  resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz#2de19618c66dc247dcfb6f99338035d8245a2cee"
   integrity sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==
 
 vfile-message@^3.0.0:
@@ -8568,9 +8425,9 @@ vfile@^5.0.0:
     vfile-message "^3.0.0"
 
 victory-vendor@^36.6.8:
-  version "36.6.8"
-  resolved "https://registry.yarnpkg.com/victory-vendor/-/victory-vendor-36.6.8.tgz#5a1c555ca99a39fdb66a6c959c8426eb834893a2"
-  integrity sha512-H3kyQ+2zgjMPvbPqAl7Vwm2FD5dU7/4bCTQakFQnpIsfDljeOMDojRsrmJfwh4oAlNnWhpAf+mbAoLh8u7dwyQ==
+  version "36.6.10"
+  resolved "https://registry.yarnpkg.com/victory-vendor/-/victory-vendor-36.6.10.tgz#e7e3646deaf0e850bc60dffdad6d7a4abee40632"
+  integrity sha512-7YqYGtsA4mByokBhCjk+ewwPhUfzhR1I3Da6/ZsZUv/31ceT77RKoaqrxRq5Ki+9we4uzf7+A+7aG2sfYhm7nA==
   dependencies:
     "@types/d3-array" "^3.0.3"
     "@types/d3-ease" "^3.0.0"
@@ -8587,31 +8444,31 @@ victory-vendor@^36.6.8:
     d3-time "^3.0.0"
     d3-timer "^3.0.1"
 
-w3c-keyname@^2.2.0, w3c-keyname@^2.2.4:
+w3c-keyname@^2.2.0, w3c-keyname@^2.2.6:
   version "2.2.6"
-  resolved "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.6.tgz"
+  resolved "https://registry.yarnpkg.com/w3c-keyname/-/w3c-keyname-2.2.6.tgz#8412046116bc16c5d73d4e612053ea10a189c85f"
   integrity sha512-f+fciywl1SJEniZHD6H+kUO8gOnwIr7f4ijKA6+ZvJFjeGi1r4PDLl53Ayud9O/rk64RqgoQine0feoeOU0kXg==
 
 warning@^4.0.2, warning@^4.0.3:
   version "4.0.3"
-  resolved "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz"
+  resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
   integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==
   dependencies:
     loose-envify "^1.0.0"
 
 webidl-conversions@^3.0.0:
   version "3.0.1"
-  resolved "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz"
+  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz#24534275e2a7bc6be7bc86611cc16ae0a5654871"
   integrity sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==
 
 webidl-conversions@^4.0.2:
   version "4.0.2"
-  resolved "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-4.0.2.tgz"
+  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.2.tgz#a855980b1f0b6b359ba1d5d9fb39ae941faa63ad"
   integrity sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==
 
 webpack-sources@^1.4.3:
   version "1.4.3"
-  resolved "https://registry.npmjs.org/webpack-sources/-/webpack-sources-1.4.3.tgz"
+  resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.4.3.tgz#eedd8ec0b928fbf1cbfe994e22d2d890f330a933"
   integrity sha512-lgTS3Xhv1lCOKo7SA5TjKXMjpSM4sBjNV5+q2bqesbSPs5FjGmU6jjtBSkX9b4qW87vDIsCIlUPOEhbZrMdjeQ==
   dependencies:
     source-list-map "^2.0.0"
@@ -8619,12 +8476,12 @@ webpack-sources@^1.4.3:
 
 "webpack-sources@^2.0.0 || ^3.0.0":
   version "3.2.3"
-  resolved "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz"
+  resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-3.2.3.tgz#2d4daab8451fd4b240cc27055ff6a0c2ccea0cde"
   integrity sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==
 
 whatwg-url@^5.0.0:
   version "5.0.0"
-  resolved "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz"
+  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-5.0.0.tgz#966454e8765462e37644d3626f6742ce8b70965d"
   integrity sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==
   dependencies:
     tr46 "~0.0.3"
@@ -8632,7 +8489,7 @@ whatwg-url@^5.0.0:
 
 whatwg-url@^7.0.0:
   version "7.1.0"
-  resolved "https://registry.npmjs.org/whatwg-url/-/whatwg-url-7.1.0.tgz"
+  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-7.1.0.tgz#c2c492f1eca612988efd3d2266be1b9fc6170d06"
   integrity sha512-WUu7Rg1DroM7oQvGWfOiAK21n74Gg+T4elXEQYkOhtyLeWiJFoOGLXPKI/9gzIie9CtwVLm8wtw6YJdKyxSjeg==
   dependencies:
     lodash.sortby "^4.7.0"
@@ -8641,7 +8498,7 @@ whatwg-url@^7.0.0:
 
 which-boxed-primitive@^1.0.2:
   version "1.0.2"
-  resolved "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz"
+  resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz#13757bc89b209b049fe5d86430e21cf40a89a8e6"
   integrity sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==
   dependencies:
     is-bigint "^1.0.1"
@@ -8652,7 +8509,7 @@ which-boxed-primitive@^1.0.2:
 
 which-collection@^1.0.1:
   version "1.0.1"
-  resolved "https://registry.npmjs.org/which-collection/-/which-collection-1.0.1.tgz"
+  resolved "https://registry.yarnpkg.com/which-collection/-/which-collection-1.0.1.tgz#70eab71ebbbd2aefaf32f917082fc62cdcb70906"
   integrity sha512-W8xeTUwaln8i3K/cY1nGXzdnVZlidBcagyNFtBdD5kxnb4TvGKR7FfSIS3mYpwWS1QUCutfKz8IY8RjftB0+1A==
   dependencies:
     is-map "^2.0.1"
@@ -8662,7 +8519,7 @@ which-collection@^1.0.1:
 
 which-typed-array@^1.1.9:
   version "1.1.9"
-  resolved "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.9.tgz"
+  resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.9.tgz#307cf898025848cf995e795e8423c7f337efbde6"
   integrity sha512-w9c4xkx6mPidwp7180ckYWfMmvxpjlZuIudNtDf4N/tTAUB8VJbX25qZoAsrtGuYNnGw3pa0AXgbGKRB8/EceA==
   dependencies:
     available-typed-arrays "^1.0.5"
@@ -8674,26 +8531,19 @@ which-typed-array@^1.1.9:
 
 which@^2.0.1, which@^2.0.2:
   version "2.0.2"
-  resolved "https://registry.npmjs.org/which/-/which-2.0.2.tgz"
+  resolved "https://registry.yarnpkg.com/which/-/which-2.0.2.tgz#7c6a8dd0a636a0327e10b59c9286eee93f3f51b1"
   integrity sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==
   dependencies:
     isexe "^2.0.0"
 
-wide-align@^1.1.0:
-  version "1.1.5"
-  resolved "https://registry.npmjs.org/wide-align/-/wide-align-1.1.5.tgz"
-  integrity sha512-eDMORYaPNZ4sQIuuYPDHdQvf4gyCF9rEEV/yPxGfwPkRodwEgiMUUXTx/dex+Me0wxx53S+NgUHaP7y3MGlDmg==
-  dependencies:
-    string-width "^1.0.2 || 2 || 3 || 4"
-
 word-wrap@^1.2.3:
   version "1.2.3"
-  resolved "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz"
+  resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.3.tgz#610636f6b1f703891bd34771ccb17fb93b47079c"
   integrity sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==
 
 workbox-background-sync@6.5.4:
   version "6.5.4"
-  resolved "https://registry.npmjs.org/workbox-background-sync/-/workbox-background-sync-6.5.4.tgz"
+  resolved "https://registry.yarnpkg.com/workbox-background-sync/-/workbox-background-sync-6.5.4.tgz#3141afba3cc8aa2ae14c24d0f6811374ba8ff6a9"
   integrity sha512-0r4INQZMyPky/lj4Ou98qxcThrETucOde+7mRGJl13MPJugQNKeZQOdIJe/1AchOP23cTqHcN/YVpD6r8E6I8g==
   dependencies:
     idb "^7.0.1"
@@ -8701,14 +8551,14 @@ workbox-background-sync@6.5.4:
 
 workbox-broadcast-update@6.5.4:
   version "6.5.4"
-  resolved "https://registry.npmjs.org/workbox-broadcast-update/-/workbox-broadcast-update-6.5.4.tgz"
+  resolved "https://registry.yarnpkg.com/workbox-broadcast-update/-/workbox-broadcast-update-6.5.4.tgz#8441cff5417cd41f384ba7633ca960a7ffe40f66"
   integrity sha512-I/lBERoH1u3zyBosnpPEtcAVe5lwykx9Yg1k6f8/BGEPGaMMgZrwVrqL1uA9QZ1NGGFoyE6t9i7lBjOlDhFEEw==
   dependencies:
     workbox-core "6.5.4"
 
 workbox-build@6.5.4:
   version "6.5.4"
-  resolved "https://registry.npmjs.org/workbox-build/-/workbox-build-6.5.4.tgz"
+  resolved "https://registry.yarnpkg.com/workbox-build/-/workbox-build-6.5.4.tgz#7d06d31eb28a878817e1c991c05c5b93409f0389"
   integrity sha512-kgRevLXEYvUW9WS4XoziYqZ8Q9j/2ziJYEtTrjdz5/L/cTUa2XfyMP2i7c3p34lgqJ03+mTiz13SdFef2POwbA==
   dependencies:
     "@apideck/better-ajv-errors" "^0.3.1"
@@ -8751,19 +8601,19 @@ workbox-build@6.5.4:
 
 workbox-cacheable-response@6.5.4:
   version "6.5.4"
-  resolved "https://registry.npmjs.org/workbox-cacheable-response/-/workbox-cacheable-response-6.5.4.tgz"
+  resolved "https://registry.yarnpkg.com/workbox-cacheable-response/-/workbox-cacheable-response-6.5.4.tgz#a5c6ec0c6e2b6f037379198d4ef07d098f7cf137"
   integrity sha512-DCR9uD0Fqj8oB2TSWQEm1hbFs/85hXXoayVwFKLVuIuxwJaihBsLsp4y7J9bvZbqtPJ1KlCkmYVGQKrBU4KAug==
   dependencies:
     workbox-core "6.5.4"
 
 workbox-core@6.5.4:
   version "6.5.4"
-  resolved "https://registry.npmjs.org/workbox-core/-/workbox-core-6.5.4.tgz"
+  resolved "https://registry.yarnpkg.com/workbox-core/-/workbox-core-6.5.4.tgz#df48bf44cd58bb1d1726c49b883fb1dffa24c9ba"
   integrity sha512-OXYb+m9wZm8GrORlV2vBbE5EC1FKu71GGp0H4rjmxmF4/HLbMCoTFws87M3dFwgpmg0v00K++PImpNQ6J5NQ6Q==
 
 workbox-expiration@6.5.4:
   version "6.5.4"
-  resolved "https://registry.npmjs.org/workbox-expiration/-/workbox-expiration-6.5.4.tgz"
+  resolved "https://registry.yarnpkg.com/workbox-expiration/-/workbox-expiration-6.5.4.tgz#501056f81e87e1d296c76570bb483ce5e29b4539"
   integrity sha512-jUP5qPOpH1nXtjGGh1fRBa1wJL2QlIb5mGpct3NzepjGG2uFFBn4iiEBiI9GUmfAFR2ApuRhDydjcRmYXddiEQ==
   dependencies:
     idb "^7.0.1"
@@ -8771,7 +8621,7 @@ workbox-expiration@6.5.4:
 
 workbox-google-analytics@6.5.4:
   version "6.5.4"
-  resolved "https://registry.npmjs.org/workbox-google-analytics/-/workbox-google-analytics-6.5.4.tgz"
+  resolved "https://registry.yarnpkg.com/workbox-google-analytics/-/workbox-google-analytics-6.5.4.tgz#c74327f80dfa4c1954cbba93cd7ea640fe7ece7d"
   integrity sha512-8AU1WuaXsD49249Wq0B2zn4a/vvFfHkpcFfqAFHNHwln3jK9QUYmzdkKXGIZl9wyKNP+RRX30vcgcyWMcZ9VAg==
   dependencies:
     workbox-background-sync "6.5.4"
@@ -8781,14 +8631,14 @@ workbox-google-analytics@6.5.4:
 
 workbox-navigation-preload@6.5.4:
   version "6.5.4"
-  resolved "https://registry.npmjs.org/workbox-navigation-preload/-/workbox-navigation-preload-6.5.4.tgz"
+  resolved "https://registry.yarnpkg.com/workbox-navigation-preload/-/workbox-navigation-preload-6.5.4.tgz#ede56dd5f6fc9e860a7e45b2c1a8f87c1c793212"
   integrity sha512-IIwf80eO3cr8h6XSQJF+Hxj26rg2RPFVUmJLUlM0+A2GzB4HFbQyKkrgD5y2d84g2IbJzP4B4j5dPBRzamHrng==
   dependencies:
     workbox-core "6.5.4"
 
 workbox-precaching@6.5.4:
   version "6.5.4"
-  resolved "https://registry.npmjs.org/workbox-precaching/-/workbox-precaching-6.5.4.tgz"
+  resolved "https://registry.yarnpkg.com/workbox-precaching/-/workbox-precaching-6.5.4.tgz#740e3561df92c6726ab5f7471e6aac89582cab72"
   integrity sha512-hSMezMsW6btKnxHB4bFy2Qfwey/8SYdGWvVIKFaUm8vJ4E53JAY+U2JwLTRD8wbLWoP6OVUdFlXsTdKu9yoLTg==
   dependencies:
     workbox-core "6.5.4"
@@ -8797,14 +8647,14 @@ workbox-precaching@6.5.4:
 
 workbox-range-requests@6.5.4:
   version "6.5.4"
-  resolved "https://registry.npmjs.org/workbox-range-requests/-/workbox-range-requests-6.5.4.tgz"
+  resolved "https://registry.yarnpkg.com/workbox-range-requests/-/workbox-range-requests-6.5.4.tgz#86b3d482e090433dab38d36ae031b2bb0bd74399"
   integrity sha512-Je2qR1NXCFC8xVJ/Lux6saH6IrQGhMpDrPXWZWWS8n/RD+WZfKa6dSZwU+/QksfEadJEr/NfY+aP/CXFFK5JFg==
   dependencies:
     workbox-core "6.5.4"
 
 workbox-recipes@6.5.4:
   version "6.5.4"
-  resolved "https://registry.npmjs.org/workbox-recipes/-/workbox-recipes-6.5.4.tgz"
+  resolved "https://registry.yarnpkg.com/workbox-recipes/-/workbox-recipes-6.5.4.tgz#cca809ee63b98b158b2702dcfb741b5cc3e24acb"
   integrity sha512-QZNO8Ez708NNwzLNEXTG4QYSKQ1ochzEtRLGaq+mr2PyoEIC1xFW7MrWxrONUxBFOByksds9Z4//lKAX8tHyUA==
   dependencies:
     workbox-cacheable-response "6.5.4"
@@ -8816,21 +8666,21 @@ workbox-recipes@6.5.4:
 
 workbox-routing@6.5.4:
   version "6.5.4"
-  resolved "https://registry.npmjs.org/workbox-routing/-/workbox-routing-6.5.4.tgz"
+  resolved "https://registry.yarnpkg.com/workbox-routing/-/workbox-routing-6.5.4.tgz#6a7fbbd23f4ac801038d9a0298bc907ee26fe3da"
   integrity sha512-apQswLsbrrOsBUWtr9Lf80F+P1sHnQdYodRo32SjiByYi36IDyL2r7BH1lJtFX8fwNHDa1QOVY74WKLLS6o5Pg==
   dependencies:
     workbox-core "6.5.4"
 
 workbox-strategies@6.5.4:
   version "6.5.4"
-  resolved "https://registry.npmjs.org/workbox-strategies/-/workbox-strategies-6.5.4.tgz"
+  resolved "https://registry.yarnpkg.com/workbox-strategies/-/workbox-strategies-6.5.4.tgz#4edda035b3c010fc7f6152918370699334cd204d"
   integrity sha512-DEtsxhx0LIYWkJBTQolRxG4EI0setTJkqR4m7r4YpBdxtWJH1Mbg01Cj8ZjNOO8etqfA3IZaOPHUxCs8cBsKLw==
   dependencies:
     workbox-core "6.5.4"
 
 workbox-streams@6.5.4:
   version "6.5.4"
-  resolved "https://registry.npmjs.org/workbox-streams/-/workbox-streams-6.5.4.tgz"
+  resolved "https://registry.yarnpkg.com/workbox-streams/-/workbox-streams-6.5.4.tgz#1cb3c168a6101df7b5269d0353c19e36668d7d69"
   integrity sha512-FXKVh87d2RFXkliAIheBojBELIPnWbQdyDvsH3t74Cwhg0fDheL1T8BqSM86hZvC0ZESLsznSYWw+Va+KVbUzg==
   dependencies:
     workbox-core "6.5.4"
@@ -8838,12 +8688,12 @@ workbox-streams@6.5.4:
 
 workbox-sw@6.5.4:
   version "6.5.4"
-  resolved "https://registry.npmjs.org/workbox-sw/-/workbox-sw-6.5.4.tgz"
+  resolved "https://registry.yarnpkg.com/workbox-sw/-/workbox-sw-6.5.4.tgz#d93e9c67924dd153a61367a4656ff4d2ae2ed736"
   integrity sha512-vo2RQo7DILVRoH5LjGqw3nphavEjK4Qk+FenXeUsknKn14eCNedHOXWbmnvP4ipKhlE35pvJ4yl4YYf6YsJArA==
 
 workbox-webpack-plugin@^6.5.4:
   version "6.5.4"
-  resolved "https://registry.npmjs.org/workbox-webpack-plugin/-/workbox-webpack-plugin-6.5.4.tgz"
+  resolved "https://registry.yarnpkg.com/workbox-webpack-plugin/-/workbox-webpack-plugin-6.5.4.tgz#baf2d3f4b8f435f3469887cf4fba2b7fac3d0fd7"
   integrity sha512-LmWm/zoaahe0EGmMTrSLUi+BjyR3cdGEfU3fS6PN1zKFYbqAKuQ+Oy/27e4VSXsyIwAw8+QDfk1XHNGtZu9nQg==
   dependencies:
     fast-json-stable-stringify "^2.1.0"
@@ -8854,7 +8704,7 @@ workbox-webpack-plugin@^6.5.4:
 
 workbox-window@6.5.4, workbox-window@^6.5.4:
   version "6.5.4"
-  resolved "https://registry.npmjs.org/workbox-window/-/workbox-window-6.5.4.tgz"
+  resolved "https://registry.yarnpkg.com/workbox-window/-/workbox-window-6.5.4.tgz#d991bc0a94dff3c2dbb6b84558cff155ca878e91"
   integrity sha512-HnLZJDwYBE+hpG25AQBO8RUWBJRaCsI9ksQJEp3aCOFCaG5kqaToAYXFRAHxzRluM2cQbGzdQF5rjKPWPA1fug==
   dependencies:
     "@types/trusted-types" "^2.0.2"
@@ -8862,52 +8712,56 @@ workbox-window@6.5.4, workbox-window@^6.5.4:
 
 wrappy@1:
   version "1.0.2"
-  resolved "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz"
+  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
   integrity sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==
 
-xtend@^4.0.0, xtend@^4.0.2:
+xtend@^4.0.0:
   version "4.0.2"
-  resolved "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz"
+  resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
   integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==
 
 y-prosemirror@^1.0.19:
-  version "1.2.0"
-  resolved "https://registry.npmjs.org/y-prosemirror/-/y-prosemirror-1.2.0.tgz"
-  integrity sha512-t3uxuX4HIkb1GNt8jV+dplRbNH2OmQD/BNeCCbjLD3Mq0o6JEXxHedv58ZIPFDE6ma24jljlL+u8pGvN6B37XQ==
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/y-prosemirror/-/y-prosemirror-1.2.1.tgz#a8b5c50b8fd445e556dfa831f295765f4ca022bd"
+  integrity sha512-czMBfB1eL2awqmOSxQM8cS/fsUOGE6fjvyPLInrh4crPxFiw67wDpwIW+EGBYKRa04sYbS0ScGj7ZgvWuDrmBQ==
   dependencies:
     lib0 "^0.2.42"
-    typescript "^4.8.4"
 
 y-protocols@^1.0.5:
   version "1.0.5"
-  resolved "https://registry.npmjs.org/y-protocols/-/y-protocols-1.0.5.tgz"
+  resolved "https://registry.yarnpkg.com/y-protocols/-/y-protocols-1.0.5.tgz#91d574250060b29fcac8f8eb5e276fbad594245e"
   integrity sha512-Wil92b7cGk712lRHDqS4T90IczF6RkcvCwAD0A2OPg+adKmOe+nOiT/N2hvpQIWS3zfjmtL4CPaH5sIW1Hkm/A==
   dependencies:
     lib0 "^0.2.42"
 
 yallist@^3.0.2:
   version "3.1.1"
-  resolved "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz"
+  resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd"
   integrity sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==
 
 yallist@^4.0.0:
   version "4.0.0"
-  resolved "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz"
+  resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"
   integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
 
-yaml@^1.10.0, yaml@^1.10.2:
+yaml@^1.10.0:
   version "1.10.2"
-  resolved "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz"
+  resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b"
   integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
 
-yjs@^13.5.23:
-  version "13.5.45"
-  resolved "https://registry.npmjs.org/yjs/-/yjs-13.5.45.tgz"
-  integrity sha512-9VUNDvb9oJHdYSMdzIpdM/agVm+EEFKRN+843CFqQuq5bo/BP3EAaxofRG9jQut3sqtGQT4A9YdQvOeeAjU6aA==
+yaml@^2.1.1:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.2.2.tgz#ec551ef37326e6d42872dad1970300f8eb83a073"
+  integrity sha512-CBKFWExMn46Foo4cldiChEzn7S7SRV+wqiluAb6xmueD/fGyRHIhX8m14vVGgeFWjN540nKCNVj6P21eQjgTuA==
+
+yjs@^13.6.0:
+  version "13.6.0"
+  resolved "https://registry.yarnpkg.com/yjs/-/yjs-13.6.0.tgz#3ede38b3c57653c302fd63d7294e63892514fb0a"
+  integrity sha512-tFZtuQV6XamtDa9SfZhUsxchUcTBWe7fzpo1UWZDLXGejTZ5t9MCswGYzyvq7+BDzfEc9oX54QEbzI/4NyS6+g==
   dependencies:
-    lib0 "^0.2.49"
+    lib0 "^0.2.74"
 
 yocto-queue@^0.1.0:
   version "0.1.0"
-  resolved "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz"
+  resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
   integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==

From c7deb00f2ab2f580e6627f10516fa7e4bf45985a Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Thu, 11 May 2023 02:27:14 +0530
Subject: [PATCH 03/81] feat: calendar view display properties (#1024)

* fix: calendar mutation fix, chore: calendar type added

* feat: calendar view display property added

* feat: calendar header, single date and single issue component added, chore: code refactor

* chore: partialupdateissue function updated

* fix: dropdown overflow fix, style: issue card styling

* fix: calendar weekly view row height fix

* feat: calendar issue card ellipsis added, fix: edit and delete mutation fix

* style: plus icon , add issue button padding and onhover effect fix

* style: calendar issue card

* style: weekly view height
---
 .../core/board-view/single-issue.tsx          |  17 +-
 .../core/calendar-view/calendar-header.tsx    | 217 +++++++++
 .../core/calendar-view/calendar.tsx           | 438 ++++--------------
 .../components/core/calendar-view/index.ts    |   5 +-
 .../core/calendar-view/single-date.tsx        | 107 +++++
 .../core/calendar-view/single-issue.tsx       | 262 +++++++++++
 apps/app/components/core/index.ts             |   1 +
 .../components/core/issues-view-filter.tsx    |  45 +-
 apps/app/components/core/issues-view.tsx      |  11 +-
 .../core/list-view/single-issue.tsx           |  17 +-
 .../components/issues/delete-issue-modal.tsx  |  26 +-
 apps/app/components/issues/modal.tsx          |  36 +-
 .../components/issues/my-issues-list-item.tsx |   8 +-
 .../issues/view-select/assignee.tsx           |   4 +-
 .../issues/view-select/due-date.tsx           |  15 +-
 .../issues/view-select/estimate.tsx           |   4 +-
 .../issues/view-select/priority.tsx           |   4 +-
 .../components/issues/view-select/state.tsx   |  15 +-
 apps/app/types/calendar.ts                    |   4 +
 apps/app/types/index.d.ts                     |   3 +-
 20 files changed, 803 insertions(+), 436 deletions(-)
 create mode 100644 apps/app/components/core/calendar-view/calendar-header.tsx
 create mode 100644 apps/app/components/core/calendar-view/single-date.tsx
 create mode 100644 apps/app/components/core/calendar-view/single-issue.tsx
 create mode 100644 apps/app/types/calendar.ts

diff --git a/apps/app/components/core/board-view/single-issue.tsx b/apps/app/components/core/board-view/single-issue.tsx
index e82b9897c..926f0e81a 100644
--- a/apps/app/components/core/board-view/single-issue.tsx
+++ b/apps/app/components/core/board-view/single-issue.tsx
@@ -98,7 +98,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
   const { setToastAlert } = useToast();
 
   const partialUpdateIssue = useCallback(
-    (formData: Partial<IIssue>) => {
+    (formData: Partial<IIssue>, issueId: string) => {
       if (!workspaceSlug || !projectId) return;
 
       if (cycleId)
@@ -164,7 +164,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
       }
 
       issuesService
-        .patchIssue(workspaceSlug as string, projectId as string, issue.id, formData)
+        .patchIssue(workspaceSlug as string, projectId as string, issueId, formData)
         .then(() => {
           if (cycleId) {
             mutate(CYCLE_ISSUES_WITH_PARAMS(cycleId as string, params));
@@ -178,18 +178,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
           console.log(error);
         });
     },
-    [
-      workspaceSlug,
-      projectId,
-      cycleId,
-      moduleId,
-      issue,
-      groupTitle,
-      index,
-      selectedGroup,
-      orderBy,
-      params,
-    ]
+    [workspaceSlug, projectId, cycleId, moduleId, groupTitle, index, selectedGroup, orderBy, params]
   );
 
   const getStyle = (
diff --git a/apps/app/components/core/calendar-view/calendar-header.tsx b/apps/app/components/core/calendar-view/calendar-header.tsx
new file mode 100644
index 000000000..b25dffb90
--- /dev/null
+++ b/apps/app/components/core/calendar-view/calendar-header.tsx
@@ -0,0 +1,217 @@
+import { Popover, Transition } from "@headlessui/react";
+import {
+  addMonths,
+  addSevenDaysToDate,
+  formatDate,
+  getCurrentWeekEndDate,
+  getCurrentWeekStartDate,
+  isSameMonth,
+  isSameYear,
+  lastDayOfWeek,
+  startOfWeek,
+  subtract7DaysToDate,
+  subtractMonths,
+  updateDateWithMonth,
+  updateDateWithYear,
+} from "helpers/calendar.helper";
+import React from "react";
+import { monthOptions, yearOptions } from "constants/calendar";
+
+import { ICalendarRange } from "types";
+import {
+  CheckIcon,
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+} from "@heroicons/react/24/outline";
+import { CustomMenu, ToggleSwitch } from "components/ui";
+
+type Props = {
+  isMonthlyView: boolean;
+  setIsMonthlyView: React.Dispatch<React.SetStateAction<boolean>>;
+  currentDate: Date;
+  setCurrentDate: React.Dispatch<React.SetStateAction<Date>>;
+  setCalendarDateRange: React.Dispatch<React.SetStateAction<ICalendarRange>>;
+  showWeekEnds: boolean;
+  setShowWeekEnds: React.Dispatch<React.SetStateAction<boolean>>;
+};
+
+export const CalendarHeader: React.FC<Props> = ({
+  setIsMonthlyView,
+  isMonthlyView,
+  currentDate,
+  setCurrentDate,
+  setCalendarDateRange,
+  showWeekEnds,
+  setShowWeekEnds,
+}) => {
+  const updateDate = (date: Date) => {
+    setCurrentDate(date);
+
+    setCalendarDateRange({
+      startDate: startOfWeek(date),
+      endDate: lastDayOfWeek(date),
+    });
+  };
+  return (
+    <div className="mb-4 flex items-center justify-between">
+      <div className="relative flex h-full w-full items-center justify-start gap-2 text-sm ">
+        <Popover className="flex h-full items-center justify-start rounded-lg">
+          {({ open }) => (
+            <>
+              <Popover.Button className={`group flex h-full items-start gap-1 text-brand-base`}>
+                <div className="flex  items-center   justify-center gap-2 text-2xl font-semibold">
+                  <span>{formatDate(currentDate, "Month")}</span>{" "}
+                  <span>{formatDate(currentDate, "yyyy")}</span>
+                </div>
+              </Popover.Button>
+
+              <Transition
+                as={React.Fragment}
+                enter="transition ease-out duration-200"
+                enterFrom="opacity-0 translate-y-1"
+                enterTo="opacity-100 translate-y-0"
+                leave="transition ease-in duration-150"
+                leaveFrom="opacity-100 translate-y-0"
+                leaveTo="opacity-0 translate-y-1"
+              >
+                <Popover.Panel className="absolute top-10 left-0 z-20 flex w-full max-w-xs transform flex-col overflow-hidden rounded-[10px] bg-brand-surface-2 shadow-lg">
+                  <div className="flex items-center justify-center gap-5 px-2 py-2 text-sm">
+                    {yearOptions.map((year) => (
+                      <button
+                        onClick={() => updateDate(updateDateWithYear(year.label, currentDate))}
+                        className={` ${
+                          isSameYear(year.value, currentDate)
+                            ? "text-sm font-medium text-brand-base"
+                            : "text-xs text-brand-secondary "
+                        } hover:text-sm hover:font-medium hover:text-brand-base`}
+                      >
+                        {year.label}
+                      </button>
+                    ))}
+                  </div>
+                  <div className="grid grid-cols-4  border-t border-brand-base px-2">
+                    {monthOptions.map((month) => (
+                      <button
+                        onClick={() => updateDate(updateDateWithMonth(month.value, currentDate))}
+                        className={`px-2 py-2 text-xs text-brand-secondary hover:font-medium hover:text-brand-base ${
+                          isSameMonth(month.value, currentDate) ? "font-medium text-brand-base" : ""
+                        }`}
+                      >
+                        {month.label}
+                      </button>
+                    ))}
+                  </div>
+                </Popover.Panel>
+              </Transition>
+            </>
+          )}
+        </Popover>
+
+        <div className="flex items-center gap-2">
+          <button
+            className="cursor-pointer"
+            onClick={() => {
+              if (isMonthlyView) {
+                updateDate(subtractMonths(currentDate, 1));
+              } else {
+                setCurrentDate(subtract7DaysToDate(currentDate));
+                setCalendarDateRange({
+                  startDate: getCurrentWeekStartDate(subtract7DaysToDate(currentDate)),
+                  endDate: getCurrentWeekEndDate(subtract7DaysToDate(currentDate)),
+                });
+              }
+            }}
+          >
+            <ChevronLeftIcon className="h-4 w-4" />
+          </button>
+          <button
+            className="cursor-pointer"
+            onClick={() => {
+              if (isMonthlyView) {
+                updateDate(addMonths(currentDate, 1));
+              } else {
+                setCurrentDate(addSevenDaysToDate(currentDate));
+                setCalendarDateRange({
+                  startDate: getCurrentWeekStartDate(addSevenDaysToDate(currentDate)),
+                  endDate: getCurrentWeekEndDate(addSevenDaysToDate(currentDate)),
+                });
+              }
+            }}
+          >
+            <ChevronRightIcon className="h-4 w-4" />
+          </button>
+        </div>
+      </div>
+
+      <div className="flex w-full items-center justify-end gap-2">
+        <button
+          className="group flex cursor-pointer items-center gap-2 rounded-md border border-brand-base px-3 py-1 text-sm hover:bg-brand-surface-2 hover:text-brand-base focus:outline-none"
+          onClick={() => {
+            if (isMonthlyView) {
+              updateDate(new Date());
+            } else {
+              setCurrentDate(new Date());
+              setCalendarDateRange({
+                startDate: getCurrentWeekStartDate(new Date()),
+                endDate: getCurrentWeekEndDate(new Date()),
+              });
+            }
+          }}
+        >
+          Today
+        </button>
+
+        <CustomMenu
+          customButton={
+            <div className="group flex cursor-pointer items-center gap-2 rounded-md border border-brand-base px-3 py-1 text-sm hover:bg-brand-surface-2 hover:text-brand-base focus:outline-none ">
+              {isMonthlyView ? "Monthly" : "Weekly"}
+              <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
+            </div>
+          }
+        >
+          <CustomMenu.MenuItem
+            onClick={() => {
+              setIsMonthlyView(true);
+              setCalendarDateRange({
+                startDate: startOfWeek(currentDate),
+                endDate: lastDayOfWeek(currentDate),
+              });
+            }}
+            className="w-52 text-sm text-brand-secondary"
+          >
+            <div className="flex w-full max-w-[260px] items-center justify-between gap-2">
+              <span className="flex items-center gap-2">Monthly View</span>
+              <CheckIcon
+                className={`h-4 w-4 flex-shrink-0 ${isMonthlyView ? "opacity-100" : "opacity-0"}`}
+              />
+            </div>
+          </CustomMenu.MenuItem>
+          <CustomMenu.MenuItem
+            onClick={() => {
+              setIsMonthlyView(false);
+              setCalendarDateRange({
+                startDate: getCurrentWeekStartDate(currentDate),
+                endDate: getCurrentWeekEndDate(currentDate),
+              });
+            }}
+            className="w-52 text-sm text-brand-secondary"
+          >
+            <div className="flex w-full items-center justify-between gap-2">
+              <span className="flex items-center gap-2">Weekly View</span>
+              <CheckIcon
+                className={`h-4 w-4 flex-shrink-0 ${isMonthlyView ? "opacity-0" : "opacity-100"}`}
+              />
+            </div>
+          </CustomMenu.MenuItem>
+          <div className="mt-1 flex w-52 items-center justify-between border-t border-brand-base py-2 px-1  text-sm text-brand-secondary">
+            <h4>Show weekends</h4>
+            <ToggleSwitch value={showWeekEnds} onChange={() => setShowWeekEnds(!showWeekEnds)} />
+          </div>
+        </CustomMenu>
+      </div>
+    </div>
+  );
+};
+
+export default CalendarHeader;
diff --git a/apps/app/components/core/calendar-view/calendar.tsx b/apps/app/components/core/calendar-view/calendar.tsx
index 9dfdac64e..bf32237d1 100644
--- a/apps/app/components/core/calendar-view/calendar.tsx
+++ b/apps/app/components/core/calendar-view/calendar.tsx
@@ -1,8 +1,27 @@
 import React, { useState } from "react";
+
+// swr
 import useSWR, { mutate } from "swr";
-import Link from "next/link";
+
 import { useRouter } from "next/router";
 
+// ui
+import { DragDropContext, Draggable, DropResult } from "react-beautiful-dnd";
+import { SingleCalendarDate, CalendarHeader } from "components/core";
+
+import { Spinner } from "components/ui";
+// hooks
+import useIssuesView from "hooks/use-issues-view";
+// services
+import issuesService from "services/issues.service";
+import cyclesService from "services/cycles.service";
+import modulesService from "services/modules.service";
+// fetch key
+import {
+  CYCLE_CALENDAR_ISSUES,
+  MODULE_CALENDAR_ISSUES,
+  PROJECT_CALENDAR_ISSUES,
+} from "constants/fetch-keys";
 // helper
 import { renderDateFormat } from "helpers/date-time.helper";
 import {
@@ -11,62 +30,28 @@ import {
   eachDayOfInterval,
   weekDayInterval,
   formatDate,
-  getCurrentWeekStartDate,
-  getCurrentWeekEndDate,
-  subtractMonths,
-  addMonths,
-  updateDateWithYear,
-  updateDateWithMonth,
-  isSameMonth,
-  isSameYear,
-  subtract7DaysToDate,
-  addSevenDaysToDate,
 } from "helpers/calendar.helper";
-// ui
-import { Popover, Transition } from "@headlessui/react";
-import { DragDropContext, Draggable, DropResult } from "react-beautiful-dnd";
-import StrictModeDroppable from "components/dnd/StrictModeDroppable";
-import { CustomMenu, Spinner, ToggleSwitch } from "components/ui";
-// icon
-import {
-  CheckIcon,
-  ChevronDownIcon,
-  ChevronLeftIcon,
-  ChevronRightIcon,
-  PlusIcon,
-} from "@heroicons/react/24/outline";
-// hooks
-import useIssuesView from "hooks/use-issues-view";
-// services
-import issuesService from "services/issues.service";
-import cyclesService from "services/cycles.service";
-// fetch key
-import {
-  CYCLE_CALENDAR_ISSUES,
-  MODULE_CALENDAR_ISSUES,
-  PROJECT_CALENDAR_ISSUES,
-} from "constants/fetch-keys";
 // type
-import { IIssue } from "types";
-// constant
-import { monthOptions, yearOptions } from "constants/calendar";
-import modulesService from "services/modules.service";
-import { getStateGroupIcon } from "components/icons";
+import { ICalendarRange, IIssue, UserAuth } from "types";
 
 type Props = {
+  handleEditIssue: (issue: IIssue) => void;
+  handleDeleteIssue: (issue: IIssue) => void;
   addIssueToDate: (date: string) => void;
+  isCompleted: boolean;
+  userAuth: UserAuth;
 };
 
-interface ICalendarRange {
-  startDate: Date;
-  endDate: Date;
-}
-
-export const CalendarView: React.FC<Props> = ({ addIssueToDate }) => {
+export const CalendarView: React.FC<Props> = ({
+  handleEditIssue,
+  handleDeleteIssue,
+  addIssueToDate,
+  isCompleted = false,
+  userAuth,
+}) => {
   const [showWeekEnds, setShowWeekEnds] = useState(false);
   const [currentDate, setCurrentDate] = useState(new Date());
   const [isMonthlyView, setIsMonthlyView] = useState(true);
-  const [showAllIssues, setShowAllIssues] = useState(false);
 
   const router = useRouter();
   const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
@@ -78,12 +63,6 @@ export const CalendarView: React.FC<Props> = ({ addIssueToDate }) => {
     endDate: lastDayOfWeek(currentDate),
   });
 
-  const targetDateFilter = {
-    target_date: `${renderDateFormat(calendarDateRange.startDate)};after,${renderDateFormat(
-      calendarDateRange.endDate
-    )};before`,
-  };
-
   const { data: projectCalendarIssues } = useSWR(
     workspaceSlug && projectId ? PROJECT_CALENDAR_ISSUES(projectId as string) : null,
     workspaceSlug && projectId
@@ -218,304 +197,73 @@ export const CalendarView: React.FC<Props> = ({ addIssueToDate }) => {
     });
   };
 
-  const updateDate = (date: Date) => {
-    setCurrentDate(date);
-
-    setCalendarDateRange({
-      startDate: startOfWeek(date),
-      endDate: lastDayOfWeek(date),
-    });
-  };
+  const isNotAllowed = userAuth.isGuest || userAuth.isViewer || isCompleted;
 
   return calendarIssues ? (
-    <DragDropContext onDragEnd={onDragEnd}>
-      <div className="-m-2 h-full overflow-y-auto rounded-lg p-8 text-brand-secondary">
-        <div className="mb-4 flex items-center justify-between">
-          <div className="relative flex h-full w-full items-center justify-start gap-2 text-sm ">
-            <Popover className="flex h-full items-center justify-start rounded-lg">
-              {({ open }) => (
-                <>
-                  <Popover.Button className={`group flex h-full items-start gap-1 text-brand-base`}>
-                    <div className="flex  items-center   justify-center gap-2 text-2xl font-semibold">
-                      <span>{formatDate(currentDate, "Month")}</span>{" "}
-                      <span>{formatDate(currentDate, "yyyy")}</span>
-                    </div>
-                  </Popover.Button>
+    <div className="mb-4 h-full">
+      <DragDropContext onDragEnd={onDragEnd}>
+        <div className="-m-2 h-full rounded-lg p-8 text-brand-secondary">
+          <CalendarHeader
+            isMonthlyView={isMonthlyView}
+            setIsMonthlyView={setIsMonthlyView}
+            showWeekEnds={showWeekEnds}
+            setShowWeekEnds={setShowWeekEnds}
+            currentDate={currentDate}
+            setCurrentDate={setCurrentDate}
+            setCalendarDateRange={setCalendarDateRange}
+          />
 
-                  <Transition
-                    as={React.Fragment}
-                    enter="transition ease-out duration-200"
-                    enterFrom="opacity-0 translate-y-1"
-                    enterTo="opacity-100 translate-y-0"
-                    leave="transition ease-in duration-150"
-                    leaveFrom="opacity-100 translate-y-0"
-                    leaveTo="opacity-0 translate-y-1"
-                  >
-                    <Popover.Panel className="absolute top-10 left-0 z-20 flex w-full max-w-xs transform flex-col overflow-hidden rounded-[10px] bg-brand-surface-2 shadow-lg">
-                      <div className="flex items-center justify-center gap-5 px-2 py-2 text-sm">
-                        {yearOptions.map((year) => (
-                          <button
-                            onClick={() => updateDate(updateDateWithYear(year.label, currentDate))}
-                            className={` ${
-                              isSameYear(year.value, currentDate)
-                                ? "text-sm font-medium text-brand-base"
-                                : "text-xs text-brand-secondary "
-                            } hover:text-sm hover:font-medium hover:text-brand-base`}
-                          >
-                            {year.label}
-                          </button>
-                        ))}
-                      </div>
-                      <div className="grid grid-cols-4  border-t border-brand-base px-2">
-                        {monthOptions.map((month) => (
-                          <button
-                            onClick={() =>
-                              updateDate(updateDateWithMonth(month.value, currentDate))
-                            }
-                            className={`px-2 py-2 text-xs text-brand-secondary hover:font-medium hover:text-brand-base ${
-                              isSameMonth(month.value, currentDate)
-                                ? "font-medium text-brand-base"
-                                : ""
-                            }`}
-                          >
-                            {month.label}
-                          </button>
-                        ))}
-                      </div>
-                    </Popover.Panel>
-                  </Transition>
-                </>
-              )}
-            </Popover>
-
-            <div className="flex items-center gap-2">
-              <button
-                className="cursor-pointer"
-                onClick={() => {
-                  if (isMonthlyView) {
-                    updateDate(subtractMonths(currentDate, 1));
-                  } else {
-                    setCurrentDate(subtract7DaysToDate(currentDate));
-                    setCalendarDateRange({
-                      startDate: getCurrentWeekStartDate(subtract7DaysToDate(currentDate)),
-                      endDate: getCurrentWeekEndDate(subtract7DaysToDate(currentDate)),
-                    });
-                  }
-                }}
-              >
-                <ChevronLeftIcon className="h-4 w-4" />
-              </button>
-              <button
-                className="cursor-pointer"
-                onClick={() => {
-                  if (isMonthlyView) {
-                    updateDate(addMonths(currentDate, 1));
-                  } else {
-                    setCurrentDate(addSevenDaysToDate(currentDate));
-                    setCalendarDateRange({
-                      startDate: getCurrentWeekStartDate(addSevenDaysToDate(currentDate)),
-                      endDate: getCurrentWeekEndDate(addSevenDaysToDate(currentDate)),
-                    });
-                  }
-                }}
-              >
-                <ChevronRightIcon className="h-4 w-4" />
-              </button>
-            </div>
-          </div>
-
-          <div className="flex w-full items-center justify-end gap-2">
-            <button
-              className="group flex cursor-pointer items-center gap-2 rounded-md border border-brand-base px-3 py-1 text-sm hover:bg-brand-surface-2 hover:text-brand-base focus:outline-none"
-              onClick={() => {
-                if (isMonthlyView) {
-                  updateDate(new Date());
-                } else {
-                  setCurrentDate(new Date());
-                  setCalendarDateRange({
-                    startDate: getCurrentWeekStartDate(new Date()),
-                    endDate: getCurrentWeekEndDate(new Date()),
-                  });
-                }
-              }}
-            >
-              Today
-            </button>
-
-            <CustomMenu
-              customButton={
-                <div className="group flex cursor-pointer items-center gap-2 rounded-md border border-brand-base px-3 py-1 text-sm hover:bg-brand-surface-2 hover:text-brand-base focus:outline-none ">
-                  {isMonthlyView ? "Monthly" : "Weekly"}
-                  <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
-                </div>
-              }
-            >
-              <CustomMenu.MenuItem
-                onClick={() => {
-                  setIsMonthlyView(true);
-                  setCalendarDateRange({
-                    startDate: startOfWeek(currentDate),
-                    endDate: lastDayOfWeek(currentDate),
-                  });
-                }}
-                className="w-52 text-sm text-brand-secondary"
-              >
-                <div className="flex w-full max-w-[260px] items-center justify-between gap-2">
-                  <span className="flex items-center gap-2">Monthly View</span>
-                  <CheckIcon
-                    className={`h-4 w-4 flex-shrink-0 ${
-                      isMonthlyView ? "opacity-100" : "opacity-0"
-                    }`}
-                  />
-                </div>
-              </CustomMenu.MenuItem>
-              <CustomMenu.MenuItem
-                onClick={() => {
-                  setIsMonthlyView(false);
-                  setCalendarDateRange({
-                    startDate: getCurrentWeekStartDate(currentDate),
-                    endDate: getCurrentWeekEndDate(currentDate),
-                  });
-                }}
-                className="w-52 text-sm text-brand-secondary"
-              >
-                <div className="flex w-full items-center justify-between gap-2">
-                  <span className="flex items-center gap-2">Weekly View</span>
-                  <CheckIcon
-                    className={`h-4 w-4 flex-shrink-0 ${
-                      isMonthlyView ? "opacity-0" : "opacity-100"
-                    }`}
-                  />
-                </div>
-              </CustomMenu.MenuItem>
-              <div className="mt-1 flex w-52 items-center justify-between border-t border-brand-base py-2 px-1  text-sm text-brand-secondary">
-                <h4>Show weekends</h4>
-                <ToggleSwitch
-                  value={showWeekEnds}
-                  onChange={() => setShowWeekEnds(!showWeekEnds)}
-                />
-              </div>
-            </CustomMenu>
-          </div>
-        </div>
-
-        <div
-          className={`grid auto-rows-[minmax(36px,1fr)] rounded-lg ${
-            showWeekEnds ? "grid-cols-7" : "grid-cols-5"
-          }`}
-        >
-          {weeks.map((date, index) => (
-            <div
-              key={index}
-              className={`flex  items-center justify-start gap-2 border-brand-base bg-brand-surface-1 p-1.5 text-base font-medium text-brand-secondary ${
-                !isMonthlyView
-                  ? showWeekEnds
-                    ? (index + 1) % 7 === 0
-                      ? ""
-                      : "border-r"
-                    : (index + 1) % 5 === 0
-                    ? ""
-                    : "border-r"
-                  : ""
-              }`}
-            >
-              <span>
-                {isMonthlyView ? formatDate(date, "eee").substring(0, 3) : formatDate(date, "eee")}
-              </span>
-              {!isMonthlyView && <span>{formatDate(date, "d")}</span>}
-            </div>
-          ))}
-        </div>
-
-        <div
-          className={`grid h-full auto-rows-[minmax(150px,1fr)] ${
-            showWeekEnds ? "grid-cols-7" : "grid-cols-5"
-          } `}
-        >
-          {currentViewDaysData.map((date, index) => {
-            const totalIssues = date.issues.length;
-
-            return (
-              <StrictModeDroppable droppableId={date.date}>
-                {(provided) => (
-                  <div
-                    key={index}
-                    ref={provided.innerRef}
-                    {...provided.droppableProps}
-                    className={`group relative flex flex-col gap-1.5 border-t border-brand-base p-2.5 text-left text-sm font-medium hover:bg-brand-surface-1 ${
-                      showWeekEnds
-                        ? (index + 1) % 7 === 0
-                          ? ""
-                          : "border-r"
-                        : (index + 1) % 5 === 0
+          <div
+            className={`grid auto-rows-[minmax(36px,1fr)] rounded-lg ${
+              showWeekEnds ? "grid-cols-7" : "grid-cols-5"
+            }`}
+          >
+            {weeks.map((date, index) => (
+              <div
+                key={index}
+                className={`flex  items-center justify-start gap-2 border-brand-base bg-brand-surface-1 p-1.5 text-base font-medium text-brand-secondary ${
+                  !isMonthlyView
+                    ? showWeekEnds
+                      ? (index + 1) % 7 === 0
                         ? ""
                         : "border-r"
-                    }`}
-                  >
-                    {isMonthlyView && <span>{formatDate(new Date(date.date), "d")}</span>}
-                    {totalIssues > 0 &&
-                      date.issues
-                        .slice(0, showAllIssues ? totalIssues : 4)
-                        .map((issue: IIssue, index) => (
-                          <Draggable draggableId={issue.id} index={index}>
-                            {(provided, snapshot) => (
-                              <div
-                                key={index}
-                                ref={provided.innerRef}
-                                {...provided.draggableProps}
-                                {...provided.dragHandleProps}
-                                className={`w-full cursor-pointer truncate rounded border border-brand-base px-1.5 py-1 text-xs duration-300 hover:cursor-move hover:bg-brand-surface-2 ${
-                                  snapshot.isDragging ? "bg-brand-surface-2 shadow-lg" : ""
-                                }`}
-                              >
-                                <Link
-                                  href={`/${workspaceSlug}/projects/${issue?.project_detail.id}/issues/${issue.id}`}
-                                >
-                                  <a className="flex w-full items-center gap-2">
-                                    {getStateGroupIcon(
-                                      issue.state_detail.group,
-                                      "12",
-                                      "12",
-                                      issue.state_detail.color
-                                    )}
-                                    {issue.name}
-                                  </a>
-                                </Link>
-                              </div>
-                            )}
-                          </Draggable>
-                        ))}
-                    {totalIssues > 4 && (
-                      <button
-                        type="button"
-                        className="w-min whitespace-nowrap rounded-md border border-brand-base bg-brand-surface-2 px-1.5 py-1 text-xs"
-                        onClick={() => setShowAllIssues((prevData) => !prevData)}
-                      >
-                        {showAllIssues ? "Hide" : totalIssues - 4 + " more"}
-                      </button>
-                    )}
-                    <div
-                      className={`absolute ${
-                        isMonthlyView ? "bottom-2" : "top-2"
-                      } right-2 flex items-center justify-center rounded-md bg-brand-surface-2 p-1 text-xs text-brand-secondary opacity-0 group-hover:opacity-100`}
-                    >
-                      <button
-                        className="flex items-center justify-center gap-1 text-center"
-                        onClick={() => addIssueToDate(date.date)}
-                      >
-                        <PlusIcon className="h-3 w-3 text-brand-secondary" />
-                        Add issue
-                      </button>
-                    </div>
-                    {provided.placeholder}
-                  </div>
-                )}
-              </StrictModeDroppable>
-            );
-          })}
+                      : (index + 1) % 5 === 0
+                      ? ""
+                      : "border-r"
+                    : ""
+                }`}
+              >
+                <span>
+                  {isMonthlyView
+                    ? formatDate(date, "eee").substring(0, 3)
+                    : formatDate(date, "eee")}
+                </span>
+                {!isMonthlyView && <span>{formatDate(date, "d")}</span>}
+              </div>
+            ))}
+          </div>
+
+          <div
+            className={`grid h-full ${isMonthlyView ? "auto-rows-min" : ""} ${
+              showWeekEnds ? "grid-cols-7" : "grid-cols-5"
+            } `}
+          >
+            {currentViewDaysData.map((date, index) => (
+              <SingleCalendarDate
+                index={index}
+                date={date}
+                handleEditIssue={handleEditIssue}
+                handleDeleteIssue={handleDeleteIssue}
+                addIssueToDate={addIssueToDate}
+                isMonthlyView={isMonthlyView}
+                showWeekEnds={showWeekEnds}
+                isNotAllowed={isNotAllowed}
+              />
+            ))}
+          </div>
         </div>
-      </div>
-    </DragDropContext>
+      </DragDropContext>
+    </div>
   ) : (
     <div className="flex h-full w-full items-center justify-center">
       <Spinner />
diff --git a/apps/app/components/core/calendar-view/index.ts b/apps/app/components/core/calendar-view/index.ts
index 55608c7e8..e3591e7b7 100644
--- a/apps/app/components/core/calendar-view/index.ts
+++ b/apps/app/components/core/calendar-view/index.ts
@@ -1 +1,4 @@
-export * from "./calendar"
\ No newline at end of file
+export * from "./calendar";
+export * from "./single-date";
+export * from "./single-issue";
+export * from "./calendar-header";
diff --git a/apps/app/components/core/calendar-view/single-date.tsx b/apps/app/components/core/calendar-view/single-date.tsx
new file mode 100644
index 000000000..fd552188c
--- /dev/null
+++ b/apps/app/components/core/calendar-view/single-date.tsx
@@ -0,0 +1,107 @@
+import React, { useState } from "react";
+
+// react-beautiful-dnd
+import { Draggable } from "react-beautiful-dnd";
+// component
+import StrictModeDroppable from "components/dnd/StrictModeDroppable";
+import { SingleCalendarIssue } from "./single-issue";
+// icons
+import { PlusSmallIcon } from "@heroicons/react/24/outline";
+// helper
+import { formatDate } from "helpers/calendar.helper";
+// types
+import { IIssue } from "types";
+
+type Props = {
+  handleEditIssue: (issue: IIssue) => void;
+  handleDeleteIssue: (issue: IIssue) => void;
+  index: number;
+  date: {
+    date: string;
+    issues: IIssue[];
+  };
+  addIssueToDate: (date: string) => void;
+  isMonthlyView: boolean;
+  showWeekEnds: boolean;
+  isNotAllowed: boolean;
+};
+
+export const SingleCalendarDate: React.FC<Props> = ({
+  handleEditIssue,
+  handleDeleteIssue,
+  date,
+  index,
+  addIssueToDate,
+  isMonthlyView,
+  showWeekEnds,
+  isNotAllowed,
+}) => {
+  const [showAllIssues, setShowAllIssues] = useState(false);
+
+  const totalIssues = date.issues.length;
+
+  return (
+    <StrictModeDroppable droppableId={date.date}>
+      {(provided) => (
+        <div
+          key={index}
+          ref={provided.innerRef}
+          {...provided.droppableProps}
+          className={`group relative flex min-h-[150px] flex-col gap-1.5 border-t border-brand-base p-2.5 text-left text-sm font-medium hover:bg-brand-surface-1 ${
+            isMonthlyView ? "" : "pt-9"
+          } ${
+            showWeekEnds
+              ? (index + 1) % 7 === 0
+                ? ""
+                : "border-r"
+              : (index + 1) % 5 === 0
+              ? ""
+              : "border-r"
+          }`}
+        >
+          {isMonthlyView && <span>{formatDate(new Date(date.date), "d")}</span>}
+          {totalIssues > 0 &&
+            date.issues.slice(0, showAllIssues ? totalIssues : 4).map((issue: IIssue, index) => (
+              <Draggable key={issue.id} draggableId={issue.id} index={index}>
+                {(provided, snapshot) => (
+                  <SingleCalendarIssue
+                    key={index}
+                    index={index}
+                    provided={provided}
+                    snapshot={snapshot}
+                    issue={issue}
+                    handleEditIssue={handleEditIssue}
+                    handleDeleteIssue={handleDeleteIssue}
+                    isNotAllowed={isNotAllowed}
+                  />
+                )}
+              </Draggable>
+            ))}
+          {totalIssues > 4 && (
+            <button
+              type="button"
+              className="w-min whitespace-nowrap rounded-md border border-brand-base bg-brand-surface-2 px-1.5 py-1 text-xs"
+              onClick={() => setShowAllIssues((prevData) => !prevData)}
+            >
+              {showAllIssues ? "Hide" : totalIssues - 4 + " more"}
+            </button>
+          )}
+
+          <div
+            className={`absolute top-2 right-2 flex items-center justify-center rounded-md bg-brand-surface-2 p-1 text-xs text-brand-secondary opacity-0 group-hover:opacity-100`}
+          >
+            <button
+              className="flex items-center justify-center gap-1 text-center"
+              onClick={() => addIssueToDate(date.date)}
+            >
+              <PlusSmallIcon className="h-4 w-4 text-brand-secondary" />
+              Add issue
+            </button>
+          </div>
+
+          {provided.placeholder}
+        </div>
+      )}
+    </StrictModeDroppable>
+  );
+};
diff --git a/apps/app/components/core/calendar-view/single-issue.tsx b/apps/app/components/core/calendar-view/single-issue.tsx
new file mode 100644
index 000000000..c9f8ecf57
--- /dev/null
+++ b/apps/app/components/core/calendar-view/single-issue.tsx
@@ -0,0 +1,262 @@
+import React, { useCallback } from "react";
+
+import Link from "next/link";
+import { useRouter } from "next/router";
+
+import { mutate } from "swr";
+
+// react-beautiful-dnd
+import { DraggableProvided, DraggableStateSnapshot } from "react-beautiful-dnd";
+// services
+import issuesService from "services/issues.service";
+// hooks
+import useIssuesProperties from "hooks/use-issue-properties";
+import useToast from "hooks/use-toast";
+// components
+import { CustomMenu, Tooltip } from "components/ui";
+import {
+  ViewAssigneeSelect,
+  ViewDueDateSelect,
+  ViewEstimateSelect,
+  ViewPrioritySelect,
+  ViewStateSelect,
+} from "components/issues";
+// icons
+import { LinkIcon, PaperClipIcon, PencilIcon, TrashIcon } from "@heroicons/react/24/outline";
+// helper
+import { copyTextToClipboard, truncateText } from "helpers/string.helper";
+// type
+import { IIssue } from "types";
+// fetch-keys
+import {
+  CYCLE_CALENDAR_ISSUES,
+  MODULE_CALENDAR_ISSUES,
+  PROJECT_CALENDAR_ISSUES,
+} from "constants/fetch-keys";
+
+type Props = {
+  handleEditIssue: (issue: IIssue) => void;
+  handleDeleteIssue: (issue: IIssue) => void;
+  index: number;
+  provided: DraggableProvided;
+  snapshot: DraggableStateSnapshot;
+  issue: IIssue;
+  isNotAllowed: boolean;
+};
+
+export const SingleCalendarIssue: React.FC<Props> = ({
+  handleEditIssue,
+  handleDeleteIssue,
+  index,
+  provided,
+  snapshot,
+  issue,
+  isNotAllowed,
+}) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const [properties] = useIssuesProperties(workspaceSlug as string, projectId as string);
+
+  const partialUpdateIssue = useCallback(
+    (formData: Partial<IIssue>, issueId: string) => {
+      if (!workspaceSlug || !projectId) return;
+
+      const fetchKey = cycleId
+        ? CYCLE_CALENDAR_ISSUES(projectId as string, cycleId as string)
+        : moduleId
+        ? MODULE_CALENDAR_ISSUES(projectId as string, moduleId as string)
+        : PROJECT_CALENDAR_ISSUES(projectId as string);
+
+      mutate<IIssue[]>(
+        fetchKey,
+        (prevData) =>
+          (prevData ?? []).map((p) => {
+            if (p.id === issueId)
+              return {
+                ...p,
+                formData,
+              };
+            return p;
+          }),
+        false
+      );
+
+      issuesService
+        .patchIssue(workspaceSlug as string, projectId as string, issueId as string, formData)
+        .then(() => {
+          mutate<IIssue[]>(fetchKey);
+        })
+        .catch((error) => {
+          console.log(error);
+        });
+    },
+    [workspaceSlug, projectId, cycleId, moduleId]
+  );
+
+  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 displayProperties = properties
+    ? Object.values(properties).some((value) => value === true)
+    : false;
+
+  return (
+    <div
+      key={index}
+      ref={provided.innerRef}
+      {...provided.draggableProps}
+      {...provided.dragHandleProps}
+      className={`w-full cursor-pointer rounded border border-brand-base px-1.5 py-1.5 text-xs duration-300 hover:cursor-move hover:bg-brand-surface-2 ${
+        snapshot.isDragging ? "bg-brand-surface-2 shadow-lg" : ""
+      }`}
+    >
+      <div className="group/card relative flex w-full flex-col items-start justify-center gap-1.5 text-xs sm:w-auto ">
+        {!isNotAllowed && (
+          <div className="z-1 absolute top-1.5 right-1.5 opacity-0 group-hover/card:opacity-100">
+            <CustomMenu width="auto" ellipsis>
+              <CustomMenu.MenuItem onClick={() => handleEditIssue(issue)}>
+                <div className="flex items-center justify-start gap-2">
+                  <PencilIcon className="h-4 w-4" />
+                  <span>Edit issue</span>
+                </div>
+              </CustomMenu.MenuItem>
+              <CustomMenu.MenuItem onClick={() => handleDeleteIssue(issue)}>
+                <div className="flex items-center justify-start gap-2">
+                  <TrashIcon className="h-4 w-4" />
+                  <span>Delete issue</span>
+                </div>
+              </CustomMenu.MenuItem>
+              <CustomMenu.MenuItem onClick={handleCopyText}>
+                <div className="flex items-center justify-start gap-2">
+                  <LinkIcon className="h-4 w-4" />
+                  <span>Copy issue Link</span>
+                </div>
+              </CustomMenu.MenuItem>
+            </CustomMenu>
+          </div>
+        )}
+        <Link href={`/${workspaceSlug}/projects/${issue?.project_detail.id}/issues/${issue.id}`}>
+          <a className="flex w-full cursor-pointer flex-col items-start justify-center gap-1.5">
+            {properties.key && (
+              <Tooltip
+                tooltipHeading="Issue ID"
+                tooltipContent={`${issue.project_detail?.identifier}-${issue.sequence_id}`}
+              >
+                <span className="flex-shrink-0 text-xs text-brand-secondary">
+                  {issue.project_detail?.identifier}-{issue.sequence_id}
+                </span>
+              </Tooltip>
+            )}
+            <Tooltip position="top-left" tooltipHeading="Title" tooltipContent={issue.name}>
+              <span className="text-xs text-brand-base">{truncateText(issue.name, 25)}</span>
+            </Tooltip>
+          </a>
+        </Link>
+        {displayProperties && (
+          <div className="relative mt-1.5 flex flex-wrap items-center gap-2 text-xs">
+            {properties.priority && (
+              <ViewPrioritySelect
+                issue={issue}
+                partialUpdateIssue={partialUpdateIssue}
+                position="left"
+                isNotAllowed={isNotAllowed}
+              />
+            )}
+            {properties.state && (
+              <ViewStateSelect
+                issue={issue}
+                partialUpdateIssue={partialUpdateIssue}
+                position="left"
+                isNotAllowed={isNotAllowed}
+              />
+            )}
+
+            {properties.due_date && (
+              <ViewDueDateSelect
+                issue={issue}
+                partialUpdateIssue={partialUpdateIssue}
+                isNotAllowed={isNotAllowed}
+              />
+            )}
+            {properties.sub_issue_count && (
+              <div className="flex items-center gap-1 rounded-md border border-brand-base px-2 py-1 text-xs text-brand-secondary shadow-sm">
+                {issue.sub_issues_count} {issue.sub_issues_count === 1 ? "sub-issue" : "sub-issues"}
+              </div>
+            )}
+            {properties.labels && issue.label_details.length > 0 ? (
+              <div className="flex flex-wrap gap-1">
+                {issue.label_details.map((label) => (
+                  <span
+                    key={label.id}
+                    className="group flex items-center gap-1 rounded-2xl border border-brand-base px-2 py-0.5 text-xs text-brand-secondary"
+                  >
+                    <span
+                      className="h-1.5 w-1.5  rounded-full"
+                      style={{
+                        backgroundColor: label?.color && label.color !== "" ? label.color : "#000",
+                      }}
+                    />
+                    {label.name}
+                  </span>
+                ))}
+              </div>
+            ) : (
+              ""
+            )}
+            {properties.assignee && (
+              <ViewAssigneeSelect
+                issue={issue}
+                partialUpdateIssue={partialUpdateIssue}
+                position="left"
+                isNotAllowed={isNotAllowed}
+              />
+            )}
+            {properties.estimate && (
+              <ViewEstimateSelect
+                issue={issue}
+                partialUpdateIssue={partialUpdateIssue}
+                position="left"
+                isNotAllowed={isNotAllowed}
+              />
+            )}
+
+            {properties.link && (
+              <div className="flex cursor-default items-center rounded-md border border-brand-base px-2.5 py-1 text-xs shadow-sm">
+                <Tooltip tooltipHeading="Links" tooltipContent={`${issue.link_count}`}>
+                  <div className="flex items-center gap-1 text-brand-secondary">
+                    <LinkIcon className="h-3.5 w-3.5" />
+                    {issue.link_count}
+                  </div>
+                </Tooltip>
+              </div>
+            )}
+            {properties.attachment_count && (
+              <div className="flex cursor-default items-center rounded-md border border-brand-base px-2.5 py-1 text-xs shadow-sm">
+                <Tooltip tooltipHeading="Attachments" tooltipContent={`${issue.attachment_count}`}>
+                  <div className="flex items-center gap-1 text-brand-secondary">
+                    <PaperClipIcon className="h-3.5 w-3.5 -rotate-45" />
+                    {issue.attachment_count}
+                  </div>
+                </Tooltip>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
diff --git a/apps/app/components/core/index.ts b/apps/app/components/core/index.ts
index 3ce807f98..f9c0cebdf 100644
--- a/apps/app/components/core/index.ts
+++ b/apps/app/components/core/index.ts
@@ -1,4 +1,5 @@
 export * from "./board-view";
+export * from "./calendar-view";
 export * from "./list-view";
 export * from "./sidebar";
 export * from "./bulk-delete-issues-modal";
diff --git a/apps/app/components/core/issues-view-filter.tsx b/apps/app/components/core/issues-view-filter.tsx
index 6868cf7b0..5910d85fa 100644
--- a/apps/app/components/core/issues-view-filter.tsx
+++ b/apps/app/components/core/issues-view-filter.tsx
@@ -233,31 +233,30 @@ export const IssuesFilterView: React.FC = () => {
                       </>
                     )}
                   </div>
-                  {issueView !== "calendar" && (
-                    <div className="space-y-2 py-3">
-                      <h4 className="text-sm text-brand-secondary">Display Properties</h4>
-                      <div className="flex flex-wrap items-center gap-2">
-                        {Object.keys(properties).map((key) => {
-                          if (key === "estimate" && !isEstimateActive) return null;
 
-                          return (
-                            <button
-                              key={key}
-                              type="button"
-                              className={`rounded border px-2 py-1 text-xs capitalize ${
-                                properties[key as keyof Properties]
-                                  ? "border-brand-accent bg-brand-accent text-white"
-                                  : "border-brand-base"
-                              }`}
-                              onClick={() => setProperties(key as keyof Properties)}
-                            >
-                              {key === "key" ? "ID" : replaceUnderscoreIfSnakeCase(key)}
-                            </button>
-                          );
-                        })}
-                      </div>
+                  <div className="space-y-2 py-3">
+                    <h4 className="text-sm text-brand-secondary">Display Properties</h4>
+                    <div className="flex flex-wrap items-center gap-2">
+                      {Object.keys(properties).map((key) => {
+                        if (key === "estimate" && !isEstimateActive) return null;
+
+                        return (
+                          <button
+                            key={key}
+                            type="button"
+                            className={`rounded border px-2 py-1 text-xs capitalize ${
+                              properties[key as keyof Properties]
+                                ? "border-brand-accent bg-brand-accent text-white"
+                                : "border-brand-base"
+                            }`}
+                            onClick={() => setProperties(key as keyof Properties)}
+                          >
+                            {key === "key" ? "ID" : replaceUnderscoreIfSnakeCase(key)}
+                          </button>
+                        );
+                      })}
                     </div>
-                  )}
+                  </div>
                 </div>
               </Popover.Panel>
             </Transition>
diff --git a/apps/app/components/core/issues-view.tsx b/apps/app/components/core/issues-view.tsx
index 9baa0318d..0557603f8 100644
--- a/apps/app/components/core/issues-view.tsx
+++ b/apps/app/components/core/issues-view.tsx
@@ -17,14 +17,13 @@ import { useProjectMyMembership } from "contexts/project-member.context";
 import useToast from "hooks/use-toast";
 import useIssuesView from "hooks/use-issues-view";
 // components
-import { AllLists, AllBoards, FilterList } from "components/core";
+import { AllLists, AllBoards, FilterList, CalendarView } from "components/core";
 import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
 import StrictModeDroppable from "components/dnd/StrictModeDroppable";
 import { CreateUpdateViewModal } from "components/views";
 import { TransferIssues, TransferIssuesModal } from "components/cycles";
 // ui
 import { EmptySpace, EmptySpaceItem, EmptyState, PrimaryButton, Spinner } from "components/ui";
-import { CalendarView } from "./calendar-view";
 // icons
 import {
   ListBulletIcon,
@@ -533,7 +532,13 @@ export const IssuesView: React.FC<Props> = ({
                   userAuth={memberRole}
                 />
               ) : (
-                <CalendarView addIssueToDate={addIssueToDate} />
+                <CalendarView
+                  handleEditIssue={handleEditIssue}
+                  handleDeleteIssue={handleDeleteIssue}
+                  addIssueToDate={addIssueToDate}
+                  isCompleted={isCompleted}
+                  userAuth={memberRole}
+                />
               )}
             </>
           ) : type === "issue" ? (
diff --git a/apps/app/components/core/list-view/single-issue.tsx b/apps/app/components/core/list-view/single-issue.tsx
index dbcb87451..49e11ca2f 100644
--- a/apps/app/components/core/list-view/single-issue.tsx
+++ b/apps/app/components/core/list-view/single-issue.tsx
@@ -84,7 +84,7 @@ export const SingleListIssue: React.FC<Props> = ({
   const { groupByProperty: selectedGroup, orderBy, params } = useIssueView();
 
   const partialUpdateIssue = useCallback(
-    (formData: Partial<IIssue>) => {
+    (formData: Partial<IIssue>, issueId: string) => {
       if (!workspaceSlug || !projectId) return;
 
       if (cycleId)
@@ -140,7 +140,7 @@ export const SingleListIssue: React.FC<Props> = ({
       );
 
       issuesService
-        .patchIssue(workspaceSlug as string, projectId as string, issue.id, formData)
+        .patchIssue(workspaceSlug as string, projectId as string, issueId, formData)
         .then(() => {
           if (cycleId) {
             mutate(CYCLE_ISSUES_WITH_PARAMS(cycleId as string, params));
@@ -151,18 +151,7 @@ export const SingleListIssue: React.FC<Props> = ({
           } else mutate(PROJECT_ISSUES_LIST_WITH_PARAMS(projectId as string, params));
         });
     },
-    [
-      workspaceSlug,
-      projectId,
-      cycleId,
-      moduleId,
-      issue,
-      groupTitle,
-      index,
-      selectedGroup,
-      orderBy,
-      params,
-    ]
+    [workspaceSlug, projectId, cycleId, moduleId, groupTitle, index, selectedGroup, orderBy, params]
   );
 
   const handleCopyText = () => {
diff --git a/apps/app/components/issues/delete-issue-modal.tsx b/apps/app/components/issues/delete-issue-modal.tsx
index 903022584..5350ce21f 100644
--- a/apps/app/components/issues/delete-issue-modal.tsx
+++ b/apps/app/components/issues/delete-issue-modal.tsx
@@ -10,6 +10,7 @@ import { Dialog, Transition } from "@headlessui/react";
 import issueServices from "services/issues.service";
 // hooks
 import useToast from "hooks/use-toast";
+import useIssuesView from "hooks/use-issues-view";
 // icons
 import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 // ui
@@ -18,14 +19,13 @@ import { SecondaryButton, DangerButton } from "components/ui";
 import type { CycleIssueResponse, IIssue, ModuleIssueResponse } from "types";
 // fetch-keys
 import {
-  CYCLE_ISSUES,
+  CYCLE_CALENDAR_ISSUES,
   CYCLE_ISSUES_WITH_PARAMS,
-  MODULE_ISSUES,
+  MODULE_CALENDAR_ISSUES,
   MODULE_ISSUES_WITH_PARAMS,
+  PROJECT_CALENDAR_ISSUES,
   PROJECT_ISSUES_LIST_WITH_PARAMS,
-  USER_ISSUE,
 } from "constants/fetch-keys";
-import useIssuesView from "hooks/use-issues-view";
 
 type Props = {
   isOpen: boolean;
@@ -39,7 +39,7 @@ export const DeleteIssueModal: React.FC<Props> = ({ isOpen, handleClose, data })
   const router = useRouter();
   const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
 
-  const { params } = useIssuesView();
+  const { issueView, params } = useIssuesView();
 
   const { setToastAlert } = useToast();
 
@@ -59,9 +59,19 @@ export const DeleteIssueModal: React.FC<Props> = ({ isOpen, handleClose, data })
     await issueServices
       .deleteIssue(workspaceSlug as string, projectId as string, data.id)
       .then(() => {
-        if (cycleId) mutate(CYCLE_ISSUES_WITH_PARAMS(cycleId as string, params));
-        else if (moduleId) mutate(MODULE_ISSUES_WITH_PARAMS(moduleId as string, params));
-        else mutate(PROJECT_ISSUES_LIST_WITH_PARAMS(projectId as string, params));
+        if (issueView === "calendar") {
+          const calendarFetchKey = cycleId
+            ? CYCLE_CALENDAR_ISSUES(projectId as string, cycleId as string)
+            : moduleId
+            ? MODULE_CALENDAR_ISSUES(projectId as string, moduleId as string)
+            : PROJECT_CALENDAR_ISSUES(projectId as string);
+
+          mutate<IIssue[]>(calendarFetchKey);
+        } else {
+          if (cycleId) mutate(CYCLE_ISSUES_WITH_PARAMS(cycleId as string, params));
+          else if (moduleId) mutate(MODULE_ISSUES_WITH_PARAMS(moduleId as string, params));
+          else mutate(PROJECT_ISSUES_LIST_WITH_PARAMS(projectId as string, params));
+        }
 
         handleClose();
         setToastAlert({
diff --git a/apps/app/components/issues/modal.tsx b/apps/app/components/issues/modal.tsx
index b2eb45e28..f8a39eda9 100644
--- a/apps/app/components/issues/modal.tsx
+++ b/apps/app/components/issues/modal.tsx
@@ -31,6 +31,9 @@ import {
   MODULE_ISSUES_WITH_PARAMS,
   CYCLE_DETAILS,
   MODULE_DETAILS,
+  PROJECT_CALENDAR_ISSUES,
+  CYCLE_CALENDAR_ISSUES,
+  MODULE_CALENDAR_ISSUES,
 } from "constants/fetch-keys";
 
 export interface IssuesModalProps {
@@ -55,7 +58,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
   const router = useRouter();
   const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
 
-  const { params } = useIssuesView();
+  const { issueView, params } = useIssuesView();
 
   if (cycleId) prePopulateData = { ...prePopulateData, cycle: cycleId as string };
   if (moduleId) prePopulateData = { ...prePopulateData, module: moduleId as string };
@@ -134,6 +137,14 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
         if (payload.cycle && payload.cycle !== "") addIssueToCycle(res.id, payload.cycle);
         if (payload.module && payload.module !== "") addIssueToModule(res.id, payload.module);
 
+        const calendarFetchKey = cycleId
+          ? CYCLE_CALENDAR_ISSUES(projectId as string, cycleId as string)
+          : moduleId
+          ? MODULE_CALENDAR_ISSUES(projectId as string, moduleId as string)
+          : PROJECT_CALENDAR_ISSUES(projectId as string);
+
+        mutate<IIssue[]>(calendarFetchKey);
+
         if (!createMore) handleClose();
 
         setToastAlert({
@@ -162,14 +173,29 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
         if (isUpdatingSingleIssue) {
           mutate<IIssue>(PROJECT_ISSUES_DETAILS, (prevData) => ({ ...prevData, ...res }), false);
         } else {
-          mutate<IIssue[]>(
-            PROJECT_ISSUES_LIST_WITH_PARAMS(activeProject ?? "", params),
-            (prevData) =>
+          if (issueView === "calendar") {
+            const calendarFetchKey = cycleId
+              ? CYCLE_CALENDAR_ISSUES(projectId as string, cycleId as string)
+              : moduleId
+              ? MODULE_CALENDAR_ISSUES(projectId as string, moduleId as string)
+              : PROJECT_CALENDAR_ISSUES(projectId as string);
+
+            mutate<IIssue[]>(calendarFetchKey, (prevData) =>
               (prevData ?? []).map((i) => {
                 if (i.id === res.id) return { ...i, ...res };
                 return i;
               })
-          );
+            );
+          } else {
+            mutate<IIssue[]>(
+              PROJECT_ISSUES_LIST_WITH_PARAMS(activeProject ?? "", params),
+              (prevData) =>
+                (prevData ?? []).map((i) => {
+                  if (i.id === res.id) return { ...i, ...res };
+                  return i;
+                })
+            );
+          }
         }
 
         if (payload.cycle && payload.cycle !== "") addIssueToCycle(res.id, payload.cycle);
diff --git a/apps/app/components/issues/my-issues-list-item.tsx b/apps/app/components/issues/my-issues-list-item.tsx
index 369cfc6e2..fc8e5c28f 100644
--- a/apps/app/components/issues/my-issues-list-item.tsx
+++ b/apps/app/components/issues/my-issues-list-item.tsx
@@ -39,14 +39,14 @@ export const MyIssuesListItem: React.FC<Props> = ({ issue, properties, projectId
   const { setToastAlert } = useToast();
 
   const partialUpdateIssue = useCallback(
-    (formData: Partial<IIssue>) => {
+    (formData: Partial<IIssue>, issueId: string) => {
       if (!workspaceSlug) return;
 
       mutate<IIssue[]>(
         USER_ISSUE(workspaceSlug as string),
         (prevData) =>
           prevData?.map((p) => {
-            if (p.id === issue.id) return { ...p, ...formData };
+            if (p.id === issueId) return { ...p, ...formData };
 
             return p;
           }),
@@ -54,7 +54,7 @@ export const MyIssuesListItem: React.FC<Props> = ({ issue, properties, projectId
       );
 
       issuesService
-        .patchIssue(workspaceSlug as string, projectId as string, issue.id, formData)
+        .patchIssue(workspaceSlug as string, projectId as string, issueId, formData)
         .then((res) => {
           mutate(USER_ISSUE(workspaceSlug as string));
         })
@@ -62,7 +62,7 @@ export const MyIssuesListItem: React.FC<Props> = ({ issue, properties, projectId
           console.log(error);
         });
     },
-    [workspaceSlug, projectId, issue]
+    [workspaceSlug, projectId]
   );
 
   const handleCopyText = () => {
diff --git a/apps/app/components/issues/view-select/assignee.tsx b/apps/app/components/issues/view-select/assignee.tsx
index 188543185..483f003e3 100644
--- a/apps/app/components/issues/view-select/assignee.tsx
+++ b/apps/app/components/issues/view-select/assignee.tsx
@@ -18,7 +18,7 @@ import { PROJECT_MEMBERS } from "constants/fetch-keys";
 
 type Props = {
   issue: IIssue;
-  partialUpdateIssue: (formData: Partial<IIssue>) => void;
+  partialUpdateIssue: (formData: Partial<IIssue>, issueId: string) => void;
   position?: "left" | "right";
   selfPositioned?: boolean;
   tooltipPosition?: "left" | "right";
@@ -71,7 +71,7 @@ export const ViewAssigneeSelect: React.FC<Props> = ({
         if (newData.includes(data)) newData.splice(newData.indexOf(data), 1);
         else newData.push(data);
 
-        partialUpdateIssue({ assignees_list: data });
+        partialUpdateIssue({ assignees_list: data }, issue.id);
 
         trackEventServices.trackIssuePartialPropertyUpdateEvent(
           {
diff --git a/apps/app/components/issues/view-select/due-date.tsx b/apps/app/components/issues/view-select/due-date.tsx
index d3f16c5b4..0aa2ea816 100644
--- a/apps/app/components/issues/view-select/due-date.tsx
+++ b/apps/app/components/issues/view-select/due-date.tsx
@@ -11,7 +11,7 @@ import { IIssue } from "types";
 
 type Props = {
   issue: IIssue;
-  partialUpdateIssue: (formData: Partial<IIssue>) => void;
+  partialUpdateIssue: (formData: Partial<IIssue>, issueId: string) => void;
   isNotAllowed: boolean;
 };
 
@@ -34,11 +34,14 @@ export const ViewDueDateSelect: React.FC<Props> = ({ issue, partialUpdateIssue,
           placeholder="Due date"
           value={issue?.target_date}
           onChange={(val) => {
-            partialUpdateIssue({
-              target_date: val,
-              priority: issue.priority,
-              state: issue.state,
-            });
+            partialUpdateIssue(
+              {
+                target_date: val,
+                priority: issue.priority,
+                state: issue.state,
+              },
+              issue.id
+            );
             trackEventServices.trackIssuePartialPropertyUpdateEvent(
               {
                 workspaceSlug,
diff --git a/apps/app/components/issues/view-select/estimate.tsx b/apps/app/components/issues/view-select/estimate.tsx
index 737896c4f..586f930bc 100644
--- a/apps/app/components/issues/view-select/estimate.tsx
+++ b/apps/app/components/issues/view-select/estimate.tsx
@@ -15,7 +15,7 @@ import { IIssue } from "types";
 
 type Props = {
   issue: IIssue;
-  partialUpdateIssue: (formData: Partial<IIssue>) => void;
+  partialUpdateIssue: (formData: Partial<IIssue>, issueId: string) => void;
   position?: "left" | "right";
   selfPositioned?: boolean;
   isNotAllowed: boolean;
@@ -41,7 +41,7 @@ export const ViewEstimateSelect: React.FC<Props> = ({
     <CustomSelect
       value={issue.estimate_point}
       onChange={(val: number) => {
-        partialUpdateIssue({ estimate_point: val });
+        partialUpdateIssue({ estimate_point: val }, issue.id);
         trackEventServices.trackIssuePartialPropertyUpdateEvent(
           {
             workspaceSlug,
diff --git a/apps/app/components/issues/view-select/priority.tsx b/apps/app/components/issues/view-select/priority.tsx
index eb20f7040..aa9a5306e 100644
--- a/apps/app/components/issues/view-select/priority.tsx
+++ b/apps/app/components/issues/view-select/priority.tsx
@@ -15,7 +15,7 @@ import trackEventServices from "services/track-event.service";
 
 type Props = {
   issue: IIssue;
-  partialUpdateIssue: (formData: Partial<IIssue>) => void;
+  partialUpdateIssue: (formData: Partial<IIssue>, issueId: string) => void;
   position?: "left" | "right";
   selfPositioned?: boolean;
   isNotAllowed: boolean;
@@ -35,7 +35,7 @@ export const ViewPrioritySelect: React.FC<Props> = ({
     <CustomSelect
       value={issue.priority}
       onChange={(data: string) => {
-        partialUpdateIssue({ priority: data });
+        partialUpdateIssue({ priority: data }, issue.id);
         trackEventServices.trackIssuePartialPropertyUpdateEvent(
           {
             workspaceSlug,
diff --git a/apps/app/components/issues/view-select/state.tsx b/apps/app/components/issues/view-select/state.tsx
index 222b8085d..68a99ac72 100644
--- a/apps/app/components/issues/view-select/state.tsx
+++ b/apps/app/components/issues/view-select/state.tsx
@@ -19,7 +19,7 @@ import { STATES_LIST } from "constants/fetch-keys";
 
 type Props = {
   issue: IIssue;
-  partialUpdateIssue: (formData: Partial<IIssue>) => void;
+  partialUpdateIssue: (formData: Partial<IIssue>, issueId: string) => void;
   position?: "left" | "right";
   selfPositioned?: boolean;
   isNotAllowed: boolean;
@@ -60,11 +60,14 @@ export const ViewStateSelect: React.FC<Props> = ({
     <CustomSearchSelect
       value={issue.state}
       onChange={(data: string) => {
-        partialUpdateIssue({
-          state: data,
-          priority: issue.priority,
-          target_date: issue.target_date,
-        });
+        partialUpdateIssue(
+          {
+            state: data,
+            priority: issue.priority,
+            target_date: issue.target_date,
+          },
+          issue.id
+        );
         trackEventServices.trackIssuePartialPropertyUpdateEvent(
           {
             workspaceSlug,
diff --git a/apps/app/types/calendar.ts b/apps/app/types/calendar.ts
new file mode 100644
index 000000000..cb27e2d10
--- /dev/null
+++ b/apps/app/types/calendar.ts
@@ -0,0 +1,4 @@
+export interface ICalendarRange {
+  startDate: Date;
+  endDate: Date;
+}
diff --git a/apps/app/types/index.d.ts b/apps/app/types/index.d.ts
index 259cb1d41..0a161932e 100644
--- a/apps/app/types/index.d.ts
+++ b/apps/app/types/index.d.ts
@@ -10,8 +10,9 @@ export * from "./views";
 export * from "./integration";
 export * from "./pages";
 export * from "./ai";
-export * from "./estimate"
+export * from "./estimate";
 export * from "./importer";
+export * from "./calendar";
 
 export type NestedKeyOf<ObjectType extends object> = {
   [Key in keyof ObjectType & (string | number)]: ObjectType[Key] extends object

From 88d3fa549a35c9e8d73d5feb42dabd380bdb75db Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Thu, 11 May 2023 02:27:27 +0530
Subject: [PATCH 04/81] style: page block hover effect (#1017)

---
 apps/app/components/pages/create-update-block-inline.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/app/components/pages/create-update-block-inline.tsx b/apps/app/components/pages/create-update-block-inline.tsx
index 26533d219..ce96deedb 100644
--- a/apps/app/components/pages/create-update-block-inline.tsx
+++ b/apps/app/components/pages/create-update-block-inline.tsx
@@ -313,7 +313,7 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
             <div className="m-2 mt-6 flex">
               <button
                 type="button"
-                className={`flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-brand-surface-1 ${
+                className={`flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-brand-surface-2 ${
                   iAmFeelingLucky ? "cursor-wait bg-brand-surface-1" : ""
                 }`}
                 onClick={handleAutoGenerateDescription}
@@ -330,7 +330,7 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
 
               <button
                 type="button"
-                className="ml-2 flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-brand-surface-1"
+                className="ml-2 flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-brand-surface-2"
                 onClick={() => setGptAssistantModal(true)}
               >
                 <SparklesIcon className="h-4 w-4" />

From 083562b24cf026d4084e4c77174e922e1bb65c5d Mon Sep 17 00:00:00 2001
From: Dakshesh Jain <65905942+dakshesh14@users.noreply.github.com>
Date: Thu, 11 May 2023 13:41:16 +0530
Subject: [PATCH 05/81] fix: placeholder and ai response not getting appended
 in textarea (#1031)

---
 .../components/core/gpt-assistant-modal.tsx   |  9 +++++++-
 .../components/issues/description-form.tsx    | 18 ++-------------
 apps/app/components/issues/form.tsx           | 23 +++++++++++++++----
 apps/app/styles/editor.css                    |  7 +++---
 4 files changed, 32 insertions(+), 25 deletions(-)

diff --git a/apps/app/components/core/gpt-assistant-modal.tsx b/apps/app/components/core/gpt-assistant-modal.tsx
index f30d33616..90c558717 100644
--- a/apps/app/components/core/gpt-assistant-modal.tsx
+++ b/apps/app/components/core/gpt-assistant-modal.tsx
@@ -60,6 +60,8 @@ export const GptAssistantModal: React.FC<Props> = ({
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
+  const editorRef = useRef<any>(null);
+
   const { setToastAlert } = useToast();
 
   const {
@@ -127,6 +129,10 @@ export const GptAssistantModal: React.FC<Props> = ({
     if (isOpen) setFocus("task");
   }, [isOpen, setFocus]);
 
+  useEffect(() => {
+    editorRef.current?.setEditorValue(htmlContent ?? `<p>${content}</p>`);
+  }, [htmlContent, editorRef, content]);
+
   return (
     <div
       className={`absolute ${inset} z-20 w-full space-y-4 rounded-[10px] border border-brand-base bg-brand-base p-4 shadow ${
@@ -136,12 +142,13 @@ export const GptAssistantModal: React.FC<Props> = ({
       {((content && content !== "") || (htmlContent && htmlContent !== "<p></p>")) && (
         <div className="remirror-section text-sm">
           Content:
-          <RemirrorRichTextEditor
+          <WrappedRemirrorRichTextEditor
             value={htmlContent ?? <p>{content}</p>}
             customClassName="-m-3"
             noBorder
             borderOnFocus={false}
             editable={false}
+            ref={editorRef}
           />
         </div>
       )}
diff --git a/apps/app/components/issues/description-form.tsx b/apps/app/components/issues/description-form.tsx
index 679de126c..2a61e85a6 100644
--- a/apps/app/components/issues/description-form.tsx
+++ b/apps/app/components/issues/description-form.tsx
@@ -69,26 +69,12 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({ issue, handleFormS
     [handleFormSubmit]
   );
 
-  // useEffect(() => {
-  //   const alertUser = (e: BeforeUnloadEvent) => {
-  //     e.preventDefault();
-  //     e.returnValue = "";
-  //     return "Are you sure you want to leave?";
-  //   };
-
-  //   window.addEventListener("beforeunload", alertUser);
-  //   return () => {
-  //     window.removeEventListener("beforeunload", alertUser);
-  //   };
-  // }, [isSubmitting]);
-
   // reset form values
   useEffect(() => {
     if (!issue) return;
 
     reset({
       ...issue,
-      description: issue.description,
     });
   }, [issue, reset]);
 
@@ -139,7 +125,7 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({ issue, handleFormS
         name="description"
         control={control}
         render={({ field: { value } }) => {
-          if (!value || !watch("description_html")) return <></>;
+          if (!value && !watch("description_html")) return <></>;
 
           return (
             <RemirrorRichTextEditor
@@ -169,7 +155,7 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({ issue, handleFormS
                     setIsSubmitting(false);
                   });
               }}
-              placeholder="Describe the issue..."
+              placeholder="Description"
               editable={!isNotAllowed}
             />
           );
diff --git a/apps/app/components/issues/form.tsx b/apps/app/components/issues/form.tsx
index e6871dc36..ddda21ef4 100644
--- a/apps/app/components/issues/form.tsx
+++ b/apps/app/components/issues/form.tsx
@@ -1,4 +1,4 @@
-import { ChangeEvent, FC, useState, useEffect } from "react";
+import React, { ChangeEvent, FC, useState, useEffect, useRef } from "react";
 
 import Link from "next/link";
 import dynamic from "next/dynamic";
@@ -50,6 +50,15 @@ const RemirrorRichTextEditor = dynamic(() => import("components/rich-text-editor
   ),
 });
 
+import { IRemirrorRichTextEditor } from "components/rich-text-editor";
+
+const WrappedRemirrorRichTextEditor = React.forwardRef<
+  IRemirrorRichTextEditor,
+  IRemirrorRichTextEditor
+>((props, ref) => <RemirrorRichTextEditor {...props} forwardedRef={ref} />);
+
+WrappedRemirrorRichTextEditor.displayName = "WrappedRemirrorRichTextEditor";
+
 const defaultValues: Partial<IIssue> = {
   project: "",
   name: "",
@@ -105,6 +114,8 @@ export const IssueForm: FC<IssueFormProps> = ({
   const [gptAssistantModal, setGptAssistantModal] = useState(false);
   const [iAmFeelingLucky, setIAmFeelingLucky] = useState(false);
 
+  const editorRef = useRef<any>(null);
+
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
@@ -346,7 +357,7 @@ export const IssueForm: FC<IssueFormProps> = ({
                   name="description"
                   control={control}
                   render={({ field: { value } }) => (
-                    <RemirrorRichTextEditor
+                    <WrappedRemirrorRichTextEditor
                       value={
                         !value || (typeof value === "object" && Object.keys(value).length === 0)
                           ? watch("description_html")
@@ -354,7 +365,8 @@ export const IssueForm: FC<IssueFormProps> = ({
                       }
                       onJSONChange={(jsonValue) => setValue("description", jsonValue)}
                       onHTMLChange={(htmlValue) => setValue("description_html", htmlValue)}
-                      placeholder="Describe the issue..."
+                      placeholder="Description"
+                      ref={editorRef}
                     />
                   )}
                 />
@@ -368,7 +380,10 @@ export const IssueForm: FC<IssueFormProps> = ({
                   inset="top-2 left-0"
                   content=""
                   htmlContent={watch("description_html")}
-                  onResponse={handleAiAssistance}
+                  onResponse={(response) => {
+                    handleAiAssistance(response);
+                    editorRef.current?.setEditorValue(`${watch("description_html")}`);
+                  }}
                   projectId={projectId}
                 />
               </div>
diff --git a/apps/app/styles/editor.css b/apps/app/styles/editor.css
index c177dad6c..418ed9d1d 100644
--- a/apps/app/styles/editor.css
+++ b/apps/app/styles/editor.css
@@ -1,13 +1,11 @@
 .empty-node::after {
   content: attr(data-placeholder);
-  color: #ccc;
-  font-style: italic;
+  color: #9ca3af;
 
   position: absolute;
   pointer-events: none;
   top: 15px;
   margin-left: 1px;
-  z-index: -1;
 }
 
 .ProseMirror {
@@ -92,6 +90,7 @@
   fill: rgb(var(--color-text-base)) !important;
 }
 
-.MuiButtonBase-root.Mui-selected, .MuiButtonBase-root:hover {
+.MuiButtonBase-root.Mui-selected,
+.MuiButtonBase-root:hover {
   background-color: rgb(var(--color-bg-base)) !important;
 }

From fb165d080e043985dec6c89fd0a5e7460fc5b476 Mon Sep 17 00:00:00 2001
From: pablohashescobar <118773738+pablohashescobar@users.noreply.github.com>
Date: Thu, 11 May 2023 16:56:48 +0530
Subject: [PATCH 06/81] feat: estimate points data in cycles list endpoint
 (#1015)

* feat: estimate points data in cycles list endpoint

* dev: prefetch for assignees

* dev: update sum for estimate points
---
 apiserver/plane/api/serializers/cycle.py |   5 +-
 apiserver/plane/api/views/cycle.py       | 101 +++++++++++++++++++----
 2 files changed, 91 insertions(+), 15 deletions(-)

diff --git a/apiserver/plane/api/serializers/cycle.py b/apiserver/plane/api/serializers/cycle.py
index d6d281357..5c1c68fb8 100644
--- a/apiserver/plane/api/serializers/cycle.py
+++ b/apiserver/plane/api/serializers/cycle.py
@@ -19,7 +19,10 @@ class CycleSerializer(BaseSerializer):
     started_issues = serializers.IntegerField(read_only=True)
     unstarted_issues = serializers.IntegerField(read_only=True)
     backlog_issues = serializers.IntegerField(read_only=True)
-    assignees = serializers.SerializerMethodField()
+    assignees = serializers.SerializerMethodField(read_only=True)
+    total_estimates = serializers.IntegerField(read_only=True)
+    completed_estimates = serializers.IntegerField(read_only=True)
+    started_estimates = serializers.IntegerField(read_only=True)
 
     workspace_detail = WorkspaceLiteSerializer(read_only=True, source="workspace")
     project_detail = ProjectLiteSerializer(read_only=True, source="project")
diff --git a/apiserver/plane/api/views/cycle.py b/apiserver/plane/api/views/cycle.py
index f61a93487..ee85f22e1 100644
--- a/apiserver/plane/api/views/cycle.py
+++ b/apiserver/plane/api/views/cycle.py
@@ -3,7 +3,7 @@ import json
 
 # Django imports
 from django.db import IntegrityError
-from django.db.models import OuterRef, Func, F, Q, Exists, OuterRef, Count, Prefetch
+from django.db.models import OuterRef, Func, F, Q, Exists, OuterRef, Count, Prefetch, Sum
 from django.core import serializers
 from django.utils import timezone
 from django.utils.decorators import method_decorator
@@ -24,13 +24,13 @@ from plane.api.serializers import (
 )
 from plane.api.permissions import ProjectEntityPermission
 from plane.db.models import (
+    User,
     Cycle,
     CycleIssue,
     Issue,
     CycleFavorite,
     IssueLink,
     IssueAttachment,
-    User,
 )
 from plane.bgtasks.issue_activites_task import issue_activity
 from plane.utils.grouper import group_results
@@ -119,6 +119,25 @@ class CycleViewSet(BaseViewSet):
                     filter=Q(issue_cycle__issue__state__group="backlog"),
                 )
             )
+            .annotate(total_estimates=Sum("issue_cycle__issue__estimate_point"))
+            .annotate(
+                completed_estimates=Sum(
+                    "issue_cycle__issue__estimate_point",
+                    filter=Q(issue_cycle__issue__state__group="completed"),
+                )
+            )
+            .annotate(
+                started_estimates=Sum(
+                    "issue_cycle__issue__estimate_point",
+                    filter=Q(issue_cycle__issue__state__group="started"),
+                )
+            )
+            .prefetch_related(
+                Prefetch(
+                    "issue_cycle__issue__assignees",
+                    queryset=User.objects.only("avatar", "first_name", "id").distinct(),
+                )
+            )
             .order_by("-is_favorite", "name")
             .distinct()
         )
@@ -414,11 +433,10 @@ class CycleDateCheckEndpoint(BaseAPIView):
         try:
             start_date = request.data.get("start_date", False)
             end_date = request.data.get("end_date", False)
-            cycle_id = request.data.get("cycle_id", False)
 
             if not start_date or not end_date:
                 return Response(
-                    {"error": "Start date and end date are required"},
+                    {"error": "Start date and end date both are required"},
                     status=status.HTTP_400_BAD_REQUEST,
                 )
 
@@ -430,11 +448,6 @@ class CycleDateCheckEndpoint(BaseAPIView):
                 project_id=project_id,
             )
 
-            if cycle_id:
-                cycles = cycles.filter(
-                    ~Q(pk=cycle_id),
-                )
-
             if cycles.exists():
                 return Response(
                     {
@@ -508,10 +521,25 @@ class CurrentUpcomingCyclesEndpoint(BaseAPIView):
                         filter=Q(issue_cycle__issue__state__group="backlog"),
                     )
                 )
+                .annotate(total_estimates=Sum("issue_cycle__issue__estimate_point"))
+                .annotate(
+                    completed_estimates=Sum(
+                        "issue_cycle__issue__estimate_point",
+                        filter=Q(issue_cycle__issue__state__group="completed"),
+                    )
+                )
+                .annotate(
+                    started_estimates=Sum(
+                        "issue_cycle__issue__estimate_point",
+                        filter=Q(issue_cycle__issue__state__group="started"),
+                    )
+                )
                 .prefetch_related(
                     Prefetch(
                         "issue_cycle__issue__assignees",
-                        queryset=User.objects.only("avatar", "first_name", "id").distinct(),
+                        queryset=User.objects.only(
+                            "avatar", "first_name", "id"
+                        ).distinct(),
                     )
                 )
                 .order_by("name", "-is_favorite")
@@ -558,10 +586,25 @@ class CurrentUpcomingCyclesEndpoint(BaseAPIView):
                         filter=Q(issue_cycle__issue__state__group="backlog"),
                     )
                 )
+                .annotate(total_estimates=Sum("issue_cycle__issue__estimate_point"))
+                .annotate(
+                    completed_estimates=Sum(
+                        "issue_cycle__issue__estimate_point",
+                        filter=Q(issue_cycle__issue__state__group="completed"),
+                    )
+                )
+                .annotate(
+                    started_estimates=Sum(
+                        "issue_cycle__issue__estimate_point",
+                        filter=Q(issue_cycle__issue__state__group="started"),
+                    )
+                )
                 .prefetch_related(
                     Prefetch(
                         "issue_cycle__issue__assignees",
-                        queryset=User.objects.only("avatar", "first_name", "id").distinct(),
+                        queryset=User.objects.only(
+                            "avatar", "first_name", "id"
+                        ).distinct(),
                     )
                 )
                 .order_by("name", "-is_favorite")
@@ -576,7 +619,7 @@ class CurrentUpcomingCyclesEndpoint(BaseAPIView):
             )
 
         except Exception as e:
-            print(e)
+            capture_exception(e)
             return Response(
                 {"error": "Something went wrong please try again later"},
                 status=status.HTTP_400_BAD_REQUEST,
@@ -637,10 +680,25 @@ class CompletedCyclesEndpoint(BaseAPIView):
                         filter=Q(issue_cycle__issue__state__group="backlog"),
                     )
                 )
+                .annotate(total_estimates=Sum("issue_cycle__issue__estimate_point"))
+                .annotate(
+                    completed_estimates=Sum(
+                        "issue_cycle__issue__estimate_point",
+                        filter=Q(issue_cycle__issue__state__group="completed"),
+                    )
+                )
+                .annotate(
+                    started_estimates=Sum(
+                        "issue_cycle__issue__estimate_point",
+                        filter=Q(issue_cycle__issue__state__group="started"),
+                    )
+                )
                 .prefetch_related(
                     Prefetch(
                         "issue_cycle__issue__assignees",
-                        queryset=User.objects.only("avatar", "first_name", "id").distinct(),
+                        queryset=User.objects.only(
+                            "avatar", "first_name", "id"
+                        ).distinct(),
                     )
                 )
                 .order_by("name", "-is_favorite")
@@ -718,10 +776,25 @@ class DraftCyclesEndpoint(BaseAPIView):
                         filter=Q(issue_cycle__issue__state__group="backlog"),
                     )
                 )
+                .annotate(total_estimates=Sum("issue_cycle__issue__estimate_point"))
+                .annotate(
+                    completed_estimates=Sum(
+                        "issue_cycle__issue__estimate_point",
+                        filter=Q(issue_cycle__issue__state__group="completed"),
+                    )
+                )
+                .annotate(
+                    started_estimates=Sum(
+                        "issue_cycle__issue__estimate_point",
+                        filter=Q(issue_cycle__issue__state__group="started"),
+                    )
+                )
                 .prefetch_related(
                     Prefetch(
                         "issue_cycle__issue__assignees",
-                        queryset=User.objects.only("avatar", "first_name", "id").distinct(),
+                        queryset=User.objects.only(
+                            "avatar", "first_name", "id"
+                        ).distinct(),
                     )
                 )
                 .order_by("name", "-is_favorite")

From abaa65b4b7aeeeafeabd46c87b3f9784acf97e61 Mon Sep 17 00:00:00 2001
From: pablohashescobar <118773738+pablohashescobar@users.noreply.github.com>
Date: Thu, 11 May 2023 16:57:03 +0530
Subject: [PATCH 07/81] feat: analytics (#1018)

* dev: initialize plane analytics

* dev: plane analytics endpoint

* dev: update endpoint to give data with segments as well

* dev: analytics with count and effort paramters

* feat: analytics endpoints

* feat: saved analytics

* dev: remove print logs

* dev: rename x_axis to dimension in response

* dev: remove color queries

* dev: update query for None values

* feat: analytics export

* dev: update code structure send color when state or label and fix none count

* dev: uncomment try catch block

* dev: fix segment keyerror

* dev: default analytics endpoint

* dev: fix segmented results

* dev: default analytics endpoint and colors for segment

* dev: total issues and open issues by state

* dev: segment colors

* dev: fix total issue annotate

* dev: effort segmentation

* dev: total estimates and open estimates

* fix: effort when not segmented

* dev: send avatar for default analytics
---
 apiserver/plane/api/serializers/__init__.py   |   2 +
 apiserver/plane/api/serializers/analytic.py   |  30 ++
 apiserver/plane/api/urls.py                   |  41 +++
 apiserver/plane/api/views/__init__.py         |   8 +
 apiserver/plane/api/views/analytic.py         | 308 ++++++++++++++++++
 apiserver/plane/api/views/view.py             |   4 -
 .../plane/bgtasks/analytic_plot_export.py     | 138 ++++++++
 .../plane/bgtasks/issue_activites_task.py     |   1 -
 apiserver/plane/db/models/__init__.py         |   2 +
 apiserver/plane/db/models/analytic.py         |  25 ++
 apiserver/plane/utils/analytics_plot.py       |  57 ++++
 apiserver/plane/utils/issue_filters.py        |  36 ++
 .../templates/emails/exports/analytics.html   |   4 +
 13 files changed, 651 insertions(+), 5 deletions(-)
 create mode 100644 apiserver/plane/api/serializers/analytic.py
 create mode 100644 apiserver/plane/api/views/analytic.py
 create mode 100644 apiserver/plane/bgtasks/analytic_plot_export.py
 create mode 100644 apiserver/plane/db/models/analytic.py
 create mode 100644 apiserver/plane/utils/analytics_plot.py
 create mode 100644 apiserver/templates/emails/exports/analytics.html

diff --git a/apiserver/plane/api/serializers/__init__.py b/apiserver/plane/api/serializers/__init__.py
index 79014c53d..505a9978d 100644
--- a/apiserver/plane/api/serializers/__init__.py
+++ b/apiserver/plane/api/serializers/__init__.py
@@ -70,3 +70,5 @@ from .importer import ImporterSerializer
 from .page import PageSerializer, PageBlockSerializer, PageFavoriteSerializer
 
 from .estimate import EstimateSerializer, EstimatePointSerializer, EstimateReadSerializer
+
+from .analytic import AnalyticViewSerializer
diff --git a/apiserver/plane/api/serializers/analytic.py b/apiserver/plane/api/serializers/analytic.py
new file mode 100644
index 000000000..5f35e1117
--- /dev/null
+++ b/apiserver/plane/api/serializers/analytic.py
@@ -0,0 +1,30 @@
+from .base import BaseSerializer
+from plane.db.models import AnalyticView
+from plane.utils.issue_filters import issue_filters
+
+
+class AnalyticViewSerializer(BaseSerializer):
+    class Meta:
+        model = AnalyticView
+        fields = "__all__"
+        read_only_fields = [
+            "workspace",
+            "query",
+        ]
+
+    def create(self, validated_data):
+        query_params = validated_data.get("query_dict", {})
+        if bool(query_params):
+            validated_data["query"] = issue_filters(query_params, "POST")
+        else:
+            validated_data["query"] = dict()
+        return AnalyticView.objects.create(**validated_data)
+
+    def update(self, instance, validated_data):
+        query_params = validated_data.get("query_data", {})
+        if bool(query_params):
+            validated_data["query"] = issue_filters(query_params, "POST")
+        else:
+            validated_data["query"] = dict()
+        validated_data["query"] = issue_filters(query_params, "PATCH")
+        return super().update(instance, validated_data)
diff --git a/apiserver/plane/api/urls.py b/apiserver/plane/api/urls.py
index a88744b4a..cf9ac92cf 100644
--- a/apiserver/plane/api/urls.py
+++ b/apiserver/plane/api/urls.py
@@ -148,6 +148,13 @@ from plane.api.views import (
     # Release Notes
     ReleaseNotesEndpoint,
     ## End Release Notes
+    # Analytics
+    AnalyticsEndpoint,
+    AnalyticViewViewset,
+    SavedAnalyticEndpoint,
+    ExportAnalyticsEndpoint,
+    DefaultAnalyticsEndpoint,
+    ## End Analytics
 )
 
 
@@ -1285,4 +1292,38 @@ urlpatterns = [
         name="release-notes",
     ),
     ## End Release Notes
+    # Analytics
+    path(
+        "workspaces/<str:slug>/analytics/",
+        AnalyticsEndpoint.as_view(),
+        name="plane-analytics",
+    ),
+    path(
+        "workspaces/<str:slug>/analytic-view/",
+        AnalyticViewViewset.as_view({"get": "list", "post": "create"}),
+        name="analytic-view",
+    ),
+    path(
+        "workspaces/<str:slug>/analytic-view/<uuid:pk>/",
+        AnalyticViewViewset.as_view(
+            {"get": "retrieve", "patch": "partial_update", "delete": "destroy"}
+        ),
+        name="analytic-view",
+    ),
+    path(
+        "workspaces/<str:slug>/saved-analytic-view/<uuid:analytic_id>/",
+        SavedAnalyticEndpoint.as_view(),
+        name="saved-analytic-view",
+    ),
+    path(
+        "workspaces/<str:slug>/export-analytics/",
+        ExportAnalyticsEndpoint.as_view(),
+        name="export-analytics",
+    ),
+    path(
+        "workspaces/<str:slug>/default-analytics/",
+        DefaultAnalyticsEndpoint.as_view(),
+        name="default-analytics",
+    ),
+    ## End Analytics
 ]
diff --git a/apiserver/plane/api/views/__init__.py b/apiserver/plane/api/views/__init__.py
index 536fd83bf..65554f529 100644
--- a/apiserver/plane/api/views/__init__.py
+++ b/apiserver/plane/api/views/__init__.py
@@ -140,3 +140,11 @@ from .estimate import (
 
 
 from .release import ReleaseNotesEndpoint
+
+from .analytic import (
+    AnalyticsEndpoint,
+    AnalyticViewViewset,
+    SavedAnalyticEndpoint,
+    ExportAnalyticsEndpoint,
+    DefaultAnalyticsEndpoint,
+)
diff --git a/apiserver/plane/api/views/analytic.py b/apiserver/plane/api/views/analytic.py
new file mode 100644
index 000000000..d22eb35e8
--- /dev/null
+++ b/apiserver/plane/api/views/analytic.py
@@ -0,0 +1,308 @@
+# Django imports
+from django.db.models import (
+    Q,
+    Count,
+    Sum,
+    Value,
+    Case,
+    When,
+    FloatField,
+    Subquery,
+    OuterRef,
+    F,
+    ExpressionWrapper,
+)
+from django.db.models.functions import ExtractMonth
+
+# Third party imports
+from rest_framework import status
+from rest_framework.response import Response
+from sentry_sdk import capture_exception
+
+# Module imports
+from plane.api.views import BaseAPIView, BaseViewSet
+from plane.api.permissions import WorkSpaceAdminPermission
+from plane.db.models import Issue, AnalyticView, Workspace, State, Label
+from plane.api.serializers import AnalyticViewSerializer
+from plane.utils.analytics_plot import build_graph_plot
+from plane.bgtasks.analytic_plot_export import analytic_export_task
+
+
+class AnalyticsEndpoint(BaseAPIView):
+    permission_classes = [
+        WorkSpaceAdminPermission,
+    ]
+
+    def get(self, request, slug):
+        try:
+            x_axis = request.GET.get("x_axis", False)
+            y_axis = request.GET.get("y_axis", False)
+
+            if not x_axis or not y_axis:
+                return Response(
+                    {"error": "x-axis and y-axis dimensions are required"},
+                    status=status.HTTP_400_BAD_REQUEST,
+                )
+
+            project_ids = request.GET.getlist("project")
+            cycle_ids = request.GET.getlist("cycle")
+            module_ids = request.GET.getlist("module")
+
+            segment = request.GET.get("segment", False)
+
+            queryset = Issue.objects.filter(workspace__slug=slug)
+            if project_ids:
+                queryset = queryset.filter(project_id__in=project_ids)
+            if cycle_ids:
+                queryset = queryset.filter(issue_cycle__cycle_id__in=cycle_ids)
+            if module_ids:
+                queryset = queryset.filter(issue_module__module_id__in=module_ids)
+
+            total_issues = queryset.count()
+            distribution = build_graph_plot(
+                queryset=queryset, x_axis=x_axis, y_axis=y_axis, segment=segment
+            )
+
+            colors = dict()
+            if x_axis in ["state__name", "state__group"] or segment in [
+                "state__name",
+                "state__group",
+            ]:
+                if x_axis in ["state__name", "state__group"]:
+                    key = "name" if x_axis == "state__name" else "group"
+                else:
+                    key = "name" if segment == "state__name" else "group"
+
+                colors = (
+                    State.objects.filter(
+                        workspace__slug=slug, project_id__in=project_ids
+                    ).values(key, "color")
+                    if project_ids
+                    else State.objects.filter(workspace__slug=slug).values(key, "color")
+                )
+
+            if x_axis in ["labels__name"] or segment in ["labels__name"]:
+                colors = (
+                    Label.objects.filter(
+                        workspace__slug=slug, project_id__in=project_ids
+                    ).values("name", "color")
+                    if project_ids
+                    else Label.objects.filter(workspace__slug=slug).values(
+                        "name", "color"
+                    )
+                )
+
+            return Response(
+                {
+                    "total": total_issues,
+                    "distribution": distribution,
+                    "extras": {"colors": colors},
+                },
+                status=status.HTTP_200_OK,
+            )
+
+        except Exception as e:
+            capture_exception(e)
+            return Response(
+                {"error": "Something went wrong please try again later"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
+
+
+class AnalyticViewViewset(BaseViewSet):
+    permission_classes = [
+        WorkSpaceAdminPermission,
+    ]
+    model = AnalyticView
+    serializer_class = AnalyticViewSerializer
+
+    def perform_create(self, serializer):
+        workspace = Workspace.objects.get(slug=self.kwargs.get("slug"))
+        serializer.save(workspace_id=workspace.id)
+
+    def get_queryset(self):
+        return self.filter_queryset(
+            super().get_queryset().filter(workspace__slug=self.kwargs.get("slug"))
+        )
+
+
+class SavedAnalyticEndpoint(BaseAPIView):
+    permission_classes = [
+        WorkSpaceAdminPermission,
+    ]
+
+    def get(self, request, slug, analytic_id):
+        try:
+            analytic_view = AnalyticView.objects.get(
+                pk=analytic_id, workspace__slug=slug
+            )
+
+            filter = analytic_view.query
+            queryset = Issue.objects.filter(**filter)
+
+            x_axis = analytic_view.query_dict.get("x_axis", False)
+            y_axis = analytic_view.query_dict.get("y_axis", False)
+
+            if not x_axis or not y_axis:
+                return Response(
+                    {"error": "x-axis and y-axis dimensions are required"},
+                    status=status.HTTP_400_BAD_REQUEST,
+                )
+
+            segment = request.GET.get("segment", False)
+            distribution = build_graph_plot(
+                queryset=queryset, x_axis=x_axis, y_axis=y_axis, segment=segment
+            )
+            total_issues = queryset.count()
+            return Response(
+                {"total": total_issues, "distribution": distribution},
+                status=status.HTTP_200_OK,
+            )
+
+        except AnalyticView.DoesNotExist:
+            return Response(
+                {"error": "Analytic View Does not exist"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
+        except Exception as e:
+            capture_exception(e)
+            return Response(
+                {"error": "Something went wrong please try again later"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
+
+
+class ExportAnalyticsEndpoint(BaseAPIView):
+    permission_classes = [
+        WorkSpaceAdminPermission,
+    ]
+
+    def post(self, request, slug):
+        try:
+            x_axis = request.data.get("x_axis", False)
+            y_axis = request.data.get("y_axis", False)
+
+            if not x_axis or not y_axis:
+                return Response(
+                    {"error": "x-axis and y-axis dimensions are required"},
+                    status=status.HTTP_400_BAD_REQUEST,
+                )
+
+            analytic_export_task.delay(
+                email=request.user.email, data=request.data, slug=slug
+            )
+
+            return Response(
+                {
+                    "message": f"Once the export is ready it will be emailed to you at {str(request.user.email)}"
+                },
+                status=status.HTTP_200_OK,
+            )
+        except Exception as e:
+            capture_exception(e)
+            return Response(
+                {"error": "Something went wrong please try again later"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
+
+
+class DefaultAnalyticsEndpoint(BaseAPIView):
+    permission_classes = [
+        WorkSpaceAdminPermission,
+    ]
+
+    def get(self, request, slug):
+        try:
+            queryset = Issue.objects.filter(workspace__slug=slug)
+
+            project_ids = request.GET.getlist("project")
+            cycle_ids = request.GET.getlist("cycle")
+            module_ids = request.GET.getlist("module")
+
+            if project_ids:
+                queryset = queryset.filter(project_id__in=project_ids)
+            if cycle_ids:
+                queryset = queryset.filter(issue_cycle__cycle_id__in=cycle_ids)
+            if module_ids:
+                queryset = queryset.filter(issue_module__module_id__in=module_ids)
+
+            total_issues = queryset.count()
+
+            total_issues_classified = (
+                queryset.annotate(state_group=F("state__group"))
+                .values("state_group")
+                .annotate(state_count=Count("state_group"))
+                .order_by("state_group")
+            )
+
+            open_issues = queryset.filter(
+                state__group__in=["backlog", "unstarted", "started"]
+            ).count()
+
+            open_issues_classified = (
+                queryset.filter(state__group__in=["backlog", "unstarted", "started"])
+                .annotate(state_group=F("state__group"))
+                .values("state_group")
+                .annotate(state_count=Count("state_group"))
+                .order_by("state_group")
+            )
+
+            issue_completed_month_wise = (
+                queryset.filter(completed_at__isnull=False)
+                .annotate(month=ExtractMonth("completed_at"))
+                .values("month")
+                .annotate(count=Count("*"))
+                .order_by("month")
+            )
+            most_issue_created_user = (
+                queryset.filter(created_by__isnull=False)
+                .values("assignees__email", "assignees__avatar")
+                .annotate(count=Count("id"))
+                .order_by("-count")
+            )[:5]
+
+            most_issue_closed_user = (
+                queryset.filter(completed_at__isnull=False, assignees__isnull=False)
+                .values("assignees__email", "assignees__avatar")
+                .annotate(count=Count("id"))
+                .order_by("-count")
+            )[:5]
+
+            pending_issue_user = (
+                queryset.filter(completed_at__isnull=True)
+                .values("assignees__email", "assignees__avatar")
+                .annotate(count=Count("id"))
+                .order_by("-count")
+            )
+
+            open_estimate_sum = (
+                Issue.objects.filter(
+                    state__group__in=["backlog", "unstarted", "started"]
+                ).aggregate(open_estimate_sum=Sum("estimate_point"))
+            )["open_estimate_sum"]
+            total_estimate_sum = Issue.objects.aggregate(
+                total_estimate_sum=Sum("estimate_point")
+            )["total_estimate_sum"]
+
+            return Response(
+                {
+                    "total_issues": total_issues,
+                    "total_issues_classified": total_issues_classified,
+                    "open_issues": open_issues,
+                    "open_issues_classified": open_issues_classified,
+                    "issue_completed_month_wise": issue_completed_month_wise,
+                    "most_issue_created_user": most_issue_created_user,
+                    "most_issue_closed_user": most_issue_closed_user,
+                    "pending_issue_user": pending_issue_user,
+                    "open_estimate_sum": open_estimate_sum,
+                    "total_estimate_sum": total_estimate_sum,
+                },
+                status=status.HTTP_200_OK,
+            )
+
+        except Exception as e:
+            capture_exception(e)
+            return Response(
+                {"error": "Something went wrong please try again later"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
diff --git a/apiserver/plane/api/views/view.py b/apiserver/plane/api/views/view.py
index b4e300dcb..1b6fb42cc 100644
--- a/apiserver/plane/api/views/view.py
+++ b/apiserver/plane/api/views/view.py
@@ -18,10 +18,6 @@ from plane.api.permissions import ProjectEntityPermission
 from plane.db.models import (
     IssueView,
     Issue,
-    IssueBlocker,
-    IssueLink,
-    CycleIssue,
-    ModuleIssue,
     IssueViewFavorite,
 )
 from plane.utils.issue_filters import issue_filters
diff --git a/apiserver/plane/bgtasks/analytic_plot_export.py b/apiserver/plane/bgtasks/analytic_plot_export.py
new file mode 100644
index 000000000..f34f28c62
--- /dev/null
+++ b/apiserver/plane/bgtasks/analytic_plot_export.py
@@ -0,0 +1,138 @@
+# Python imports
+import csv
+import io
+
+# Django imports
+from django.core.mail import EmailMultiAlternatives
+from django.template.loader import render_to_string
+from django.utils.html import strip_tags
+from django.conf import settings
+
+# Third party imports
+from celery import shared_task
+from sentry_sdk import capture_exception
+
+# Module imports
+from plane.db.models import Issue
+from plane.utils.analytics_plot import build_graph_plot
+from plane.utils.issue_filters import issue_filters
+
+row_mapping = {
+    "state__name": "State",
+    "state__group": "State Group",
+    "labels__name": "Label",
+    "assignees__email": "Assignee Email",
+    "start_date": "Start Date",
+    "target_date": "Due Date",
+    "completed_at": "Completed At",
+    "created_at": "Created At",
+    "issue_count": "Issue Count",
+    "effort": "Effort",
+}
+
+
+@shared_task
+def analytic_export_task(email, data, slug):
+    try:
+        filters = issue_filters(data, "POST")
+        queryset = Issue.objects.filter(**filters, workspace__slug=slug)
+
+        x_axis = data.get("x_axis", False)
+        y_axis = data.get("y_axis", False)
+        segment = data.get("segment", False)
+
+        distribution = build_graph_plot(
+            queryset=queryset, x_axis=x_axis, y_axis=y_axis, segment=segment
+        )
+
+        key = "count" if y_axis == "issue_count" else "effort"
+
+        if segment:
+            row_zero = [
+                row_mapping.get(x_axis, "X-Axis"),
+            ]
+            segment_zero = []
+            for item in distribution:
+                current_dict = distribution.get(item)
+                for current in current_dict:
+                    segment_zero.append(current.get("segment"))
+
+            segment_zero = list(set(segment_zero))
+            row_zero = row_zero + segment_zero
+
+            rows = []
+            for item in distribution:
+                generated_row = []
+                data = distribution.get(item)
+                for segment in segment_zero[1:]:
+                    value = [x for x in data if x.get("segment") == segment]
+                    if len(value):
+                        generated_row.append(value[0].get(key))
+                    else:
+                        generated_row.append("")
+
+                rows.append(tuple(generated_row))
+
+            rows = [tuple(row_zero)] + rows
+            csv_buffer = io.StringIO()
+            writer = csv.writer(csv_buffer, delimiter=",", quoting=csv.QUOTE_ALL)
+
+            # Write CSV data to the buffer
+            for row in rows:
+                writer.writerow(row)
+
+            subject = "Your Export is ready"
+
+            html_content = render_to_string("emails/exports/analytics.html", {})
+
+            text_content = strip_tags(html_content)
+
+            msg = EmailMultiAlternatives(
+                subject, text_content, settings.EMAIL_FROM, [email]
+            )
+            msg.attach(f"{slug}-analytics.csv", csv_buffer.read())
+            msg.send(fail_silently=False)
+
+        else:
+            row_zero = [
+                row_mapping.get(x_axis, "X-Axis"),
+                row_mapping.get(y_axis, "Y-Axis"),
+            ]
+            rows = []
+            for item in distribution:
+                rows.append(
+                    tuple(
+                        [
+                            item,
+                            distribution.get(item)[0].get("count")
+                            if y_axis == "issue_count"
+                            else distribution.get(item)[0].get("effort"),
+                        ]
+                    )
+                )
+
+            rows = [tuple(row_zero)] + rows
+            csv_buffer = io.StringIO()
+            writer = csv.writer(csv_buffer, delimiter=",", quoting=csv.QUOTE_ALL)
+
+            # Write CSV data to the buffer
+            for row in rows:
+                writer.writerow(row)
+
+            subject = "Your Export is ready"
+
+            html_content = render_to_string("emails/exports/analytics.html", {})
+
+            text_content = strip_tags(html_content)
+
+            msg = EmailMultiAlternatives(
+                subject, text_content, settings.EMAIL_FROM, [email]
+            )
+            msg.attach(f"{slug}-analytics.csv", csv_buffer.read())
+            msg.send(fail_silently=False)
+
+
+    except Exception as e:
+        print(e)
+        capture_exception(e)
+        return
diff --git a/apiserver/plane/bgtasks/issue_activites_task.py b/apiserver/plane/bgtasks/issue_activites_task.py
index c749d9c15..417fe2324 100644
--- a/apiserver/plane/bgtasks/issue_activites_task.py
+++ b/apiserver/plane/bgtasks/issue_activites_task.py
@@ -136,7 +136,6 @@ def track_priority(
                     comment=f"{actor.email} updated the priority to {requested_data.get('priority')}",
                 )
             )
-    print(issue_activities)
 
 
 # Track chnages in state of the issue
diff --git a/apiserver/plane/db/models/__init__.py b/apiserver/plane/db/models/__init__.py
index e32d768e0..53b501716 100644
--- a/apiserver/plane/db/models/__init__.py
+++ b/apiserver/plane/db/models/__init__.py
@@ -67,3 +67,5 @@ from .importer import Importer
 from .page import Page, PageBlock, PageFavorite, PageLabel
 
 from .estimate import Estimate, EstimatePoint
+
+from .analytic import AnalyticView
\ No newline at end of file
diff --git a/apiserver/plane/db/models/analytic.py b/apiserver/plane/db/models/analytic.py
new file mode 100644
index 000000000..d097051af
--- /dev/null
+++ b/apiserver/plane/db/models/analytic.py
@@ -0,0 +1,25 @@
+# Django models
+from django.db import models
+from django.conf import settings
+
+from .base import BaseModel
+
+
+class AnalyticView(BaseModel):
+    workspace = models.ForeignKey(
+        "db.Workspace", related_name="analytics", on_delete=models.CASCADE
+    )
+    name = models.CharField(max_length=255)
+    description = models.TextField(blank=True)
+    query = models.JSONField()
+    query_dict = models.JSONField(default=dict)
+
+    class Meta:
+        verbose_name = "Analytic"
+        verbose_name_plural = "Analytics"
+        db_table = "analytic_views"
+        ordering = ("-created_at",)
+
+    def __str__(self):
+        """Return name of the analytic view"""
+        return f"{self.name} <{self.workspace.name}>"
diff --git a/apiserver/plane/utils/analytics_plot.py b/apiserver/plane/utils/analytics_plot.py
new file mode 100644
index 000000000..408b41d4b
--- /dev/null
+++ b/apiserver/plane/utils/analytics_plot.py
@@ -0,0 +1,57 @@
+# Python imports
+from itertools import groupby
+
+# Django import
+from django.db import models
+from django.db.models import Count, DateField, F, Sum, Value, Case, When, Q
+from django.db.models.functions import Cast, Concat, Coalesce
+
+
+def build_graph_plot(queryset, x_axis, y_axis, segment=None):
+    if x_axis in ["created_at", "completed_at"]:
+        queryset = queryset.annotate(dimension=Cast(x_axis, DateField()))
+        x_axis = "dimension"
+    else:
+        queryset = queryset.annotate(dimension=F(x_axis))
+        x_axis = "dimension"
+
+    if x_axis in ["created_at", "start_date", "target_date", "completed_at"]:
+        queryset = queryset.exclude(x_axis__is_null=True)
+
+    queryset = queryset.values(x_axis)
+
+    # Group queryset by x_axis field
+
+    if y_axis == "issue_count":
+        queryset = (
+            queryset.annotate(
+                is_null=Case(
+                    When(dimension__isnull=True, then=Value("None")),
+                    default=Value("not_null"),
+                    output_field=models.CharField(max_length=8),
+                ),
+                dimension_ex=Coalesce("dimension", Value("null")),
+            )
+            .values("dimension")
+        )
+        if segment:
+            queryset = queryset.annotate(segment=F(segment)).values("dimension", "segment")
+        else:
+            queryset = queryset.values("dimension")
+
+        queryset = queryset.annotate(count=Count("*")).order_by("dimension")
+
+
+    if y_axis == "effort":
+        queryset = queryset.annotate(effort=Sum("estimate_point")).order_by(x_axis)
+        if segment:
+            queryset = queryset.annotate(segment=F(segment)).values("dimension", "segment", "effort")
+        else:
+            queryset = queryset.values("dimension", "effort")
+
+    result_values = list(queryset)
+    grouped_data = {}
+    for date, items in groupby(result_values, key=lambda x: x[str("dimension")]):
+        grouped_data[str(date)] = list(items)
+
+    return grouped_data
diff --git a/apiserver/plane/utils/issue_filters.py b/apiserver/plane/utils/issue_filters.py
index 8b62da722..c9328ecf1 100644
--- a/apiserver/plane/utils/issue_filters.py
+++ b/apiserver/plane/utils/issue_filters.py
@@ -198,6 +198,39 @@ def filter_issue_state_type(params, filter, method):
     return filter
 
 
+def filter_project(params, filter, method):
+    if method == "GET":
+        projects = params.get("project").split(",")
+        if len(projects) and "" not in projects:
+            filter["project__in"] = projects
+    else:
+        if params.get("project", None) and len(params.get("project")):
+            filter["project__in"] = params.get("project")
+    return filter
+
+
+def filter_cycle(params, filter, method):
+    if method == "GET":
+        cycles = params.get("cycle").split(",")
+        if len(cycles) and "" not in cycles:
+            filter["cycle__in"] = cycles
+    else:
+        if params.get("cycle", None) and len(params.get("cycle")):
+            filter["issue_cycle__cycle_id__in"] = params.get("cycle")
+    return filter
+
+
+def filter_module(params, filter, method):
+    if method == "GET":
+        modules = params.get("module").split(",")
+        if len(modules) and "" not in modules:
+            filter["module__in"] = modules
+    else:
+        if params.get("module", None) and len(params.get("module")):
+            filter["issue_module__module_id__in"] = params.get("module")
+    return filter
+
+
 def issue_filters(query_params, method):
     filter = dict()
 
@@ -216,6 +249,9 @@ def issue_filters(query_params, method):
         "target_date": filter_target_date,
         "completed_at": filter_completed_at,
         "type": filter_issue_state_type,
+        "project": filter_project,
+        "cycle": filter_cycle,
+        "module": filter_module,
     }
 
     for key, value in ISSUE_FILTER.items():
diff --git a/apiserver/templates/emails/exports/analytics.html b/apiserver/templates/emails/exports/analytics.html
new file mode 100644
index 000000000..248c5513c
--- /dev/null
+++ b/apiserver/templates/emails/exports/analytics.html
@@ -0,0 +1,4 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html>
+    Your Export is ready
+</html>

From a1d7a4ea552f860e6e6fbfd98b592a93a9d56418 Mon Sep 17 00:00:00 2001
From: pablohashescobar <118773738+pablohashescobar@users.noreply.github.com>
Date: Thu, 11 May 2023 16:58:35 +0530
Subject: [PATCH 08/81] fix: created by null for bulk operations (#1026)

---
 apiserver/plane/api/views/importer.py    | 9 ++-------
 apiserver/plane/api/views/project.py     | 4 ++++
 apiserver/plane/api/views/workspace.py   | 3 ++-
 apiserver/plane/bgtasks/importer_task.py | 7 ++++++-
 4 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/apiserver/plane/api/views/importer.py b/apiserver/plane/api/views/importer.py
index b9a7fe0c5..2e0f1cec0 100644
--- a/apiserver/plane/api/views/importer.py
+++ b/apiserver/plane/api/views/importer.py
@@ -363,6 +363,7 @@ class BulkImportIssuesEndpoint(BaseAPIView):
                         start_date=issue_data.get("start_date", None),
                         target_date=issue_data.get("target_date", None),
                         priority=issue_data.get("priority", None),
+                        created_by=request.user,
                     )
                 )
 
@@ -400,7 +401,6 @@ class BulkImportIssuesEndpoint(BaseAPIView):
                         project_id=project_id,
                         workspace_id=project.workspace_id,
                         created_by=request.user,
-                        updated_by=request.user,
                     )
                     for label_id in labels_list
                 ]
@@ -420,7 +420,6 @@ class BulkImportIssuesEndpoint(BaseAPIView):
                         project_id=project_id,
                         workspace_id=project.workspace_id,
                         created_by=request.user,
-                        updated_by=request.user,
                     )
                     for assignee_id in assignees_list
                 ]
@@ -439,6 +438,7 @@ class BulkImportIssuesEndpoint(BaseAPIView):
                         workspace_id=project.workspace_id,
                         comment=f"{request.user.email} importer the issue from {service}",
                         verb="created",
+                        created_by=request.user,
                     )
                     for issue in issues
                 ],
@@ -457,7 +457,6 @@ class BulkImportIssuesEndpoint(BaseAPIView):
                         project_id=project_id,
                         workspace_id=project.workspace_id,
                         created_by=request.user,
-                        updated_by=request.user,
                     )
                     for comment in comments_list
                 ]
@@ -474,7 +473,6 @@ class BulkImportIssuesEndpoint(BaseAPIView):
                         project_id=project_id,
                         workspace_id=project.workspace_id,
                         created_by=request.user,
-                        updated_by=request.user,
                     )
                     for issue, issue_data in zip(issues, issues_data)
                 ]
@@ -512,7 +510,6 @@ class BulkImportModulesEndpoint(BaseAPIView):
                         project_id=project_id,
                         workspace_id=project.workspace_id,
                         created_by=request.user,
-                        updated_by=request.user,
                     )
                     for module in modules_data
                 ],
@@ -536,7 +533,6 @@ class BulkImportModulesEndpoint(BaseAPIView):
                             project_id=project_id,
                             workspace_id=project.workspace_id,
                             created_by=request.user,
-                            updated_by=request.user,
                         )
                         for module, module_data in zip(modules, modules_data)
                     ],
@@ -554,7 +550,6 @@ class BulkImportModulesEndpoint(BaseAPIView):
                             project_id=project_id,
                             workspace_id=project.workspace_id,
                             created_by=request.user,
-                            updated_by=request.user,
                         )
                         for issue in module_issues_list
                     ]
diff --git a/apiserver/plane/api/views/project.py b/apiserver/plane/api/views/project.py
index 869bd15c9..3851e31c1 100644
--- a/apiserver/plane/api/views/project.py
+++ b/apiserver/plane/api/views/project.py
@@ -161,6 +161,7 @@ class ProjectViewSet(BaseViewSet):
                             workspace=serializer.instance.workspace,
                             group=state["group"],
                             default=state.get("default", False),
+                            created_by=request.user,
                         )
                         for state in states
                     ]
@@ -344,6 +345,7 @@ class UserProjectInvitationsViewset(BaseViewSet):
                         workspace=invitation.project.workspace,
                         member=request.user,
                         role=invitation.role,
+                        created_by=request.user,
                     )
                     for invitation in project_invitations
                 ]
@@ -465,6 +467,7 @@ class AddTeamToProjectEndpoint(BaseAPIView):
                         project_id=project_id,
                         member_id=member,
                         workspace=workspace,
+                        created_by=request.user,
                     )
                 )
 
@@ -612,6 +615,7 @@ class ProjectJoinEndpoint(BaseAPIView):
                         if workspace_role >= 15
                         else (15 if workspace_role == 10 else workspace_role),
                         workspace=workspace,
+                        created_by=request.user,
                     )
                     for project_id in project_ids
                 ],
diff --git a/apiserver/plane/api/views/workspace.py b/apiserver/plane/api/views/workspace.py
index 8a2791e3b..7f47c5baf 100644
--- a/apiserver/plane/api/views/workspace.py
+++ b/apiserver/plane/api/views/workspace.py
@@ -223,6 +223,7 @@ class InviteWorkspaceEndpoint(BaseAPIView):
                                 algorithm="HS256",
                             ),
                             role=email.get("role", 10),
+                            created_by=request.user,
                         )
                     )
                 except ValidationError:
@@ -381,6 +382,7 @@ class UserWorkspaceInvitationsEndpoint(BaseViewSet):
                         workspace=invitation.workspace,
                         member=request.user,
                         role=invitation.role,
+                        created_by=request.user,
                     )
                     for invitation in workspace_invitations
                 ],
@@ -783,4 +785,3 @@ class WorkspaceThemeViewSet(BaseViewSet):
                 {"error": "Something went wrong please try again later"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
-
diff --git a/apiserver/plane/bgtasks/importer_task.py b/apiserver/plane/bgtasks/importer_task.py
index 291b71be3..27410966f 100644
--- a/apiserver/plane/bgtasks/importer_task.py
+++ b/apiserver/plane/bgtasks/importer_task.py
@@ -78,7 +78,11 @@ def service_importer(service, importer_id):
             # Add new users to Workspace and project automatically
             WorkspaceMember.objects.bulk_create(
                 [
-                    WorkspaceMember(member=user, workspace_id=importer.workspace_id)
+                    WorkspaceMember(
+                        member=user,
+                        workspace_id=importer.workspace_id,
+                        created_by=importer.created_by,
+                    )
                     for user in workspace_users
                 ],
                 batch_size=100,
@@ -91,6 +95,7 @@ def service_importer(service, importer_id):
                         project_id=importer.project_id,
                         workspace_id=importer.workspace_id,
                         member=user,
+                        created_by=importer.created_by,
                     )
                     for user in workspace_users
                 ],

From 34f4580b94b47eff38055b36ae22b6b301994047 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Thu, 11 May 2023 17:01:58 +0530
Subject: [PATCH 09/81] style: issue due date selector width fix (#1033)

---
 apps/app/components/issues/view-select/due-date.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/app/components/issues/view-select/due-date.tsx b/apps/app/components/issues/view-select/due-date.tsx
index 0aa2ea816..60fa8c718 100644
--- a/apps/app/components/issues/view-select/due-date.tsx
+++ b/apps/app/components/issues/view-select/due-date.tsx
@@ -22,7 +22,7 @@ export const ViewDueDateSelect: React.FC<Props> = ({ issue, partialUpdateIssue,
   return (
     <Tooltip tooltipHeading="Due Date" tooltipContent={issue.target_date ?? "N/A"}>
       <div
-        className={`group relative ${
+        className={`group relative max-w-[6.5rem] ${
           issue.target_date === null
             ? ""
             : issue.target_date < new Date().toISOString()

From a0553722c9c40091a34933c5c1944193e16c8c14 Mon Sep 17 00:00:00 2001
From: Dakshesh Jain <65905942+dakshesh14@users.noreply.github.com>
Date: Thu, 11 May 2023 17:02:20 +0530
Subject: [PATCH 10/81] fix: settings editor state according to ai response
 (#1032)

* fix: placeholder and ai response not getting appended in textarea

* fix: settings editor state according to ai response
---
 apps/app/components/issues/form.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/app/components/issues/form.tsx b/apps/app/components/issues/form.tsx
index ddda21ef4..8d9c03463 100644
--- a/apps/app/components/issues/form.tsx
+++ b/apps/app/components/issues/form.tsx
@@ -167,6 +167,7 @@ export const IssueForm: FC<IssueFormProps> = ({
 
     setValue("description", {});
     setValue("description_html", `${watch("description_html")}<p>${response}</p>`);
+    editorRef.current?.setEditorValue(`${watch("description_html")}`);
   };
 
   const handleAutoGenerateDescription = async () => {
@@ -382,7 +383,6 @@ export const IssueForm: FC<IssueFormProps> = ({
                   htmlContent={watch("description_html")}
                   onResponse={(response) => {
                     handleAiAssistance(response);
-                    editorRef.current?.setEditorValue(`${watch("description_html")}`);
                   }}
                   projectId={projectId}
                 />

From d7928f853d08f9957c90fe58f5b183c662bc346c Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Thu, 11 May 2023 17:11:04 +0530
Subject: [PATCH 11/81] chore: global graph components (#1014)

* chore: global bar graph component

* chore: global pie graph component

* chore: global line graph component

* chore: removed unnecessary file

* chore: refactored global chart components to accept all props

* chore: global calendar graph component added

* chore: global scatter plot graph component
---
 apps/app/components/ui/graphs/bar-graph.tsx   |  35 ++
 .../components/ui/graphs/calendar-graph.tsx   |  34 ++
 apps/app/components/ui/graphs/index.ts        |   5 +
 apps/app/components/ui/graphs/line-graph.tsx  |  23 ++
 apps/app/components/ui/graphs/pie-graph.tsx   |  23 ++
 .../ui/graphs/scatter-plot-graph.tsx          |  19 ++
 apps/app/components/ui/graphs/types.d.ts      |   8 +
 apps/app/components/ui/index.ts               |   1 +
 apps/app/constants/graph.ts                   |  33 ++
 apps/app/package.json                         |   7 +
 yarn.lock                                     | 304 ++++++++++++++++++
 11 files changed, 492 insertions(+)
 create mode 100644 apps/app/components/ui/graphs/bar-graph.tsx
 create mode 100644 apps/app/components/ui/graphs/calendar-graph.tsx
 create mode 100644 apps/app/components/ui/graphs/index.ts
 create mode 100644 apps/app/components/ui/graphs/line-graph.tsx
 create mode 100644 apps/app/components/ui/graphs/pie-graph.tsx
 create mode 100644 apps/app/components/ui/graphs/scatter-plot-graph.tsx
 create mode 100644 apps/app/components/ui/graphs/types.d.ts
 create mode 100644 apps/app/constants/graph.ts

diff --git a/apps/app/components/ui/graphs/bar-graph.tsx b/apps/app/components/ui/graphs/bar-graph.tsx
new file mode 100644
index 000000000..c89312959
--- /dev/null
+++ b/apps/app/components/ui/graphs/bar-graph.tsx
@@ -0,0 +1,35 @@
+// nivo
+import { ResponsiveBar, BarSvgProps } from "@nivo/bar";
+// types
+import { TGraph } from "./types";
+// constants
+import { CHARTS_THEME, DEFAULT_MARGIN } from "constants/graph";
+
+type Props = {
+  indexBy: string;
+  keys: string[];
+};
+
+export const BarGraph: React.FC<Props & TGraph & Omit<BarSvgProps<any>, "height" | "width">> = ({
+  indexBy,
+  keys,
+  padding = 0.3,
+  height = "400px",
+  width = "100%",
+  margin,
+  theme,
+  ...rest
+}) => (
+  <div style={{ height, width }}>
+    <ResponsiveBar
+      indexBy={indexBy}
+      keys={keys}
+      margin={margin ?? DEFAULT_MARGIN}
+      padding={padding}
+      labelTextColor={{ from: "color", modifiers: [["darker", 1.6]] }}
+      theme={theme ?? CHARTS_THEME}
+      animate={true}
+      {...rest}
+    />
+  </div>
+);
diff --git a/apps/app/components/ui/graphs/calendar-graph.tsx b/apps/app/components/ui/graphs/calendar-graph.tsx
new file mode 100644
index 000000000..94c5782ec
--- /dev/null
+++ b/apps/app/components/ui/graphs/calendar-graph.tsx
@@ -0,0 +1,34 @@
+// nivo
+import { ResponsiveCalendar, CalendarSvgProps } from "@nivo/calendar";
+// types
+import { TGraph } from "./types";
+// constants
+import { CHARTS_THEME, DEFAULT_MARGIN } from "constants/graph";
+
+export const CalendarGraph: React.FC<TGraph & Omit<CalendarSvgProps, "height" | "width">> = ({
+  height = "400px",
+  width = "100%",
+  margin,
+  theme,
+  ...rest
+}) => (
+  <div style={{ height, width }}>
+    <ResponsiveCalendar
+      margin={margin ?? DEFAULT_MARGIN}
+      colors={
+        rest.colors ?? [
+          "rgba(var(--color-accent), 0.2)",
+          "rgba(var(--color-accent), 0.4)",
+          "rgba(var(--color-accent), 0.8)",
+          "rgba(var(--color-accent), 1)",
+        ]
+      }
+      emptyColor={rest.emptyColor ?? "rgb(var(--color-bg-surface-2))"}
+      dayBorderColor={rest.dayBorderColor ?? "transparent"}
+      daySpacing={rest.daySpacing ?? 5}
+      monthBorderColor={rest.monthBorderColor ?? "rgb(var(--color-bg-base))"}
+      theme={theme ?? CHARTS_THEME}
+      {...rest}
+    />
+  </div>
+);
diff --git a/apps/app/components/ui/graphs/index.ts b/apps/app/components/ui/graphs/index.ts
new file mode 100644
index 000000000..984bb642c
--- /dev/null
+++ b/apps/app/components/ui/graphs/index.ts
@@ -0,0 +1,5 @@
+export * from "./bar-graph";
+export * from "./calendar-graph";
+export * from "./line-graph";
+export * from "./pie-graph";
+export * from "./scatter-plot-graph";
diff --git a/apps/app/components/ui/graphs/line-graph.tsx b/apps/app/components/ui/graphs/line-graph.tsx
new file mode 100644
index 000000000..bf2f5ac41
--- /dev/null
+++ b/apps/app/components/ui/graphs/line-graph.tsx
@@ -0,0 +1,23 @@
+// nivo
+import { ResponsiveLine, LineSvgProps } from "@nivo/line";
+// types
+import { TGraph } from "./types";
+// constants
+import { CHARTS_THEME, DEFAULT_MARGIN } from "constants/graph";
+
+export const LineGraph: React.FC<TGraph & LineSvgProps> = ({
+  height = "400px",
+  width = "100%",
+  margin,
+  theme,
+  ...rest
+}) => (
+  <div style={{ height, width }}>
+    <ResponsiveLine
+      margin={margin ?? DEFAULT_MARGIN}
+      theme={theme ?? CHARTS_THEME}
+      animate={true}
+      {...rest}
+    />
+  </div>
+);
diff --git a/apps/app/components/ui/graphs/pie-graph.tsx b/apps/app/components/ui/graphs/pie-graph.tsx
new file mode 100644
index 000000000..39ab9a9e0
--- /dev/null
+++ b/apps/app/components/ui/graphs/pie-graph.tsx
@@ -0,0 +1,23 @@
+// nivo
+import { PieSvgProps, ResponsivePie } from "@nivo/pie";
+// types
+import { TGraph } from "./types";
+// constants
+import { CHARTS_THEME, DEFAULT_MARGIN } from "constants/graph";
+
+export const PieGraph: React.FC<TGraph & Omit<PieSvgProps<any>, "height" | "width">> = ({
+  height = "400px",
+  width = "100%",
+  margin,
+  theme,
+  ...rest
+}) => (
+  <div style={{ height, width }}>
+    <ResponsivePie
+      margin={margin ?? DEFAULT_MARGIN}
+      theme={theme ?? CHARTS_THEME}
+      animate={true}
+      {...rest}
+    />
+  </div>
+);
diff --git a/apps/app/components/ui/graphs/scatter-plot-graph.tsx b/apps/app/components/ui/graphs/scatter-plot-graph.tsx
new file mode 100644
index 000000000..3c51c3c78
--- /dev/null
+++ b/apps/app/components/ui/graphs/scatter-plot-graph.tsx
@@ -0,0 +1,19 @@
+// nivo
+import { ResponsiveScatterPlot, ScatterPlotSvgProps } from "@nivo/scatterplot";
+// types
+import { TGraph } from "./types";
+// constants
+import { CHARTS_THEME, DEFAULT_MARGIN } from "constants/graph";
+
+export const ScatterPlotGraph: React.FC<
+  TGraph & Omit<ScatterPlotSvgProps<any>, "height" | "width">
+> = ({ height = "400px", width = "100%", margin, theme, ...rest }) => (
+  <div style={{ height, width }}>
+    <ResponsiveScatterPlot
+      margin={margin ?? DEFAULT_MARGIN}
+      animate={true}
+      theme={theme ?? CHARTS_THEME}
+      {...rest}
+    />
+  </div>
+);
diff --git a/apps/app/components/ui/graphs/types.d.ts b/apps/app/components/ui/graphs/types.d.ts
new file mode 100644
index 000000000..c8646405c
--- /dev/null
+++ b/apps/app/components/ui/graphs/types.d.ts
@@ -0,0 +1,8 @@
+import { Theme, Margin } from "@nivo/core";
+
+export type TGraph = {
+  height?: string;
+  width?: string;
+  margin?: Partial<Margin>;
+  theme?: Theme;
+};
diff --git a/apps/app/components/ui/index.ts b/apps/app/components/ui/index.ts
index 3f50d1a21..4557badd4 100644
--- a/apps/app/components/ui/index.ts
+++ b/apps/app/components/ui/index.ts
@@ -1,4 +1,5 @@
 export * from "./buttons";
+export * from "./graphs";
 export * from "./input";
 export * from "./text-area";
 export * from "./avatar";
diff --git a/apps/app/constants/graph.ts b/apps/app/constants/graph.ts
new file mode 100644
index 000000000..43a244413
--- /dev/null
+++ b/apps/app/constants/graph.ts
@@ -0,0 +1,33 @@
+import { Theme } from "@nivo/core";
+
+export const CHARTS_THEME: Theme = {
+  background: "rgb(var(--color-bg-base))",
+  textColor: "rgb(var(--color-text-base))",
+  axis: {
+    domain: {
+      line: {
+        stroke: "rgb(var(--color-text-base))",
+        strokeWidth: 0.5,
+      },
+    },
+  },
+  tooltip: {
+    container: {
+      background: "rgb(var(--color-bg-surface-2))",
+      color: "rgb(var(--color-text-secondary))",
+      fontSize: "0.8rem",
+    },
+  },
+  grid: {
+    line: {
+      stroke: "rgb(var(--color-border))",
+    },
+  },
+};
+
+export const DEFAULT_MARGIN = {
+  top: 50,
+  right: 50,
+  bottom: 50,
+  left: 50,
+};
diff --git a/apps/app/package.json b/apps/app/package.json
index 1b41309f8..af90cf99a 100644
--- a/apps/app/package.json
+++ b/apps/app/package.json
@@ -14,6 +14,13 @@
     "@headlessui/react": "^1.7.3",
     "@heroicons/react": "^2.0.12",
     "@jitsu/nextjs": "^3.1.5",
+    "@nivo/bar": "0.80.0",
+    "@nivo/calendar": "0.80.0",
+    "@nivo/core": "0.80.0",
+    "@nivo/legends": "0.80.0",
+    "@nivo/line": "0.80.0",
+    "@nivo/pie": "0.80.0",
+    "@nivo/scatterplot": "0.80.0",
     "@remirror/core": "^2.0.11",
     "@remirror/extension-react-tables": "^2.2.11",
     "@remirror/pm": "^2.0.3",
diff --git a/yarn.lock b/yarn.lock
index 18aeae065..d8a63fe19 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1489,6 +1489,168 @@
   resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-12.3.2.tgz#45beb4b9d28e6dd6abf63cab1c5b92dc84323a6b"
   integrity sha512-tpQJYUH+TzPMIsdVl9fH8uDg47iwiNjKY+8e9da3dXqlkztKzjSw0OwSADoqh3KrifplXeKSta+BBGLdBqg3sg==
 
+"@nivo/annotations@0.80.0":
+  version "0.80.0"
+  resolved "https://registry.yarnpkg.com/@nivo/annotations/-/annotations-0.80.0.tgz#127e4801fff7370dcfb9acfe1e335781dd65cfd5"
+  integrity sha512-bC9z0CLjU07LULTMWsqpjovRtHxP7n8oJjqBQBLmHOGB4IfiLbrryBfu9+aEZH3VN2jXHhdpWUz+HxeZzOzsLg==
+  dependencies:
+    "@nivo/colors" "0.80.0"
+    "@react-spring/web" "9.4.5"
+    lodash "^4.17.21"
+
+"@nivo/arcs@0.80.0":
+  version "0.80.0"
+  resolved "https://registry.yarnpkg.com/@nivo/arcs/-/arcs-0.80.0.tgz#87b8308403e245bdc4486cd7f61d2477c5830cd2"
+  integrity sha512-g5m/wM36Ey45J3hrVDBPMw1Z6GOgIRwgb5zTh7TFoPuhRBZEDQLmctk8XYOm0xOMVCzsm6WkU5wlSQUeBY6IHQ==
+  dependencies:
+    "@nivo/colors" "0.80.0"
+    "@react-spring/web" "9.4.5"
+    d3-shape "^1.3.5"
+
+"@nivo/axes@0.80.0":
+  version "0.80.0"
+  resolved "https://registry.yarnpkg.com/@nivo/axes/-/axes-0.80.0.tgz#22788855ddc45bb6a619dcd03d62d4bd8c0fc35f"
+  integrity sha512-AsUyaSHGwQVSEK8QXpsn8X+poZxvakLMYW7crKY1xTGPNw+SU4SSBohPVumm2jMH3fTSLNxLhAjWo71GBJXfdA==
+  dependencies:
+    "@nivo/scales" "0.80.0"
+    "@react-spring/web" "9.4.5"
+    d3-format "^1.4.4"
+    d3-time-format "^3.0.0"
+
+"@nivo/bar@0.80.0":
+  version "0.80.0"
+  resolved "https://registry.yarnpkg.com/@nivo/bar/-/bar-0.80.0.tgz#6518449aeb068f2ffe263822e44898f3f427d482"
+  integrity sha512-woE/S12Sp+RKQeOHtp302WXfy5usj73cV/gjP95PzJxMv+Rn01i1Uwys3BILzc9h4+OxYuWTFqLADAySAmi7qQ==
+  dependencies:
+    "@nivo/annotations" "0.80.0"
+    "@nivo/axes" "0.80.0"
+    "@nivo/colors" "0.80.0"
+    "@nivo/legends" "0.80.0"
+    "@nivo/scales" "0.80.0"
+    "@nivo/tooltip" "0.80.0"
+    "@react-spring/web" "9.4.5"
+    d3-scale "^3.2.3"
+    d3-shape "^1.3.5"
+    lodash "^4.17.21"
+
+"@nivo/calendar@0.80.0":
+  version "0.80.0"
+  resolved "https://registry.yarnpkg.com/@nivo/calendar/-/calendar-0.80.0.tgz#3339ae45297813f4e8bcdc6ad54151a70e824f56"
+  integrity sha512-UfBnfzdQs9tZz/APH8DqYnGBraqovyUr6S5zxKI0T+LX5RV9p7uEcz1mBIlbvwFudMWuuXBB6Jc7pqmwnn2ZpQ==
+  dependencies:
+    "@nivo/legends" "0.80.0"
+    "@nivo/tooltip" "0.80.0"
+    d3-scale "^3.2.3"
+    d3-time "^1.0.10"
+    d3-time-format "^3.0.0"
+    lodash "^4.17.21"
+
+"@nivo/colors@0.80.0":
+  version "0.80.0"
+  resolved "https://registry.yarnpkg.com/@nivo/colors/-/colors-0.80.0.tgz#5b70b4979df246d9d0d69fb638bba9764dd88b52"
+  integrity sha512-T695Zr411FU4RPo7WDINOAn8f79DPP10SFJmDdEqELE+cbzYVTpXqLGZ7JMv88ko7EOf9qxLQgcBqY69rp9tHQ==
+  dependencies:
+    d3-color "^2.0.0"
+    d3-scale "^3.2.3"
+    d3-scale-chromatic "^2.0.0"
+    lodash "^4.17.21"
+
+"@nivo/core@0.80.0":
+  version "0.80.0"
+  resolved "https://registry.yarnpkg.com/@nivo/core/-/core-0.80.0.tgz#d180cb2622158eb7bc5f984131ff07984f12297e"
+  integrity sha512-6caih0RavXdWWSfde+rC2pk17WrX9YQlqK26BrxIdXzv3Ydzlh5SkrC7dR2TEvMGBhunzVeLOfiC2DWT1S8CFg==
+  dependencies:
+    "@nivo/recompose" "0.80.0"
+    "@react-spring/web" "9.4.5"
+    d3-color "^2.0.0"
+    d3-format "^1.4.4"
+    d3-interpolate "^2.0.1"
+    d3-scale "^3.2.3"
+    d3-scale-chromatic "^2.0.0"
+    d3-shape "^1.3.5"
+    d3-time-format "^3.0.0"
+    lodash "^4.17.21"
+
+"@nivo/legends@0.80.0":
+  version "0.80.0"
+  resolved "https://registry.yarnpkg.com/@nivo/legends/-/legends-0.80.0.tgz#49edc54000075b4df055f86794a8c32810269d06"
+  integrity sha512-h0IUIPGygpbKIZZZWIxkkxOw4SO0rqPrqDrykjaoQz4CvL4HtLIUS3YRA4akKOVNZfS5agmImjzvIe0s3RvqlQ==
+
+"@nivo/line@0.80.0":
+  version "0.80.0"
+  resolved "https://registry.yarnpkg.com/@nivo/line/-/line-0.80.0.tgz#ba541b0fcfd53b3a7ce865feb43c993b7cf4a7d4"
+  integrity sha512-6UAD/y74qq3DDRnVb+QUPvXYojxMtwXMipGSNvCGk8omv1QZNTaUrbV+eQacvn9yh//a0yZcWipnpq0tGJyJCA==
+  dependencies:
+    "@nivo/annotations" "0.80.0"
+    "@nivo/axes" "0.80.0"
+    "@nivo/colors" "0.80.0"
+    "@nivo/legends" "0.80.0"
+    "@nivo/scales" "0.80.0"
+    "@nivo/tooltip" "0.80.0"
+    "@nivo/voronoi" "0.80.0"
+    "@react-spring/web" "9.4.5"
+    d3-shape "^1.3.5"
+
+"@nivo/pie@0.80.0":
+  version "0.80.0"
+  resolved "https://registry.yarnpkg.com/@nivo/pie/-/pie-0.80.0.tgz#04b35839bf5a2b661fa4e5b677ae76b3c028471e"
+  integrity sha512-Zj2PtozUg5wizxdI/2o13YzwnBwf8lLrgc8vH7ucsgOu5nj6oLLpGTuNd3CBmRJHFGIGNT39bP63lKnB3P6qOQ==
+  dependencies:
+    "@nivo/arcs" "0.80.0"
+    "@nivo/colors" "0.80.0"
+    "@nivo/legends" "0.80.0"
+    "@nivo/tooltip" "0.80.0"
+    d3-shape "^1.3.5"
+
+"@nivo/recompose@0.80.0":
+  version "0.80.0"
+  resolved "https://registry.yarnpkg.com/@nivo/recompose/-/recompose-0.80.0.tgz#572048aed793321a0bada1fd176b72df5a25282e"
+  integrity sha512-iL3g7j3nJGD9+mRDbwNwt/IXDXH6E29mhShY1I7SP91xrfusZV9pSFf4EzyYgruNJk/2iqMuaqn+e+TVFra44A==
+  dependencies:
+    react-lifecycles-compat "^3.0.4"
+
+"@nivo/scales@0.80.0":
+  version "0.80.0"
+  resolved "https://registry.yarnpkg.com/@nivo/scales/-/scales-0.80.0.tgz#39313fb97c8ae9633c2aa1e17adb57cb851e8a50"
+  integrity sha512-4y2pQdCg+f3n4TKXC2tYuq71veZM+xPRQbOTgGYJpuBvMc7pQsXF9T5z7ryeIG9hkpXkrlyjecU6XcAG7tLSNg==
+  dependencies:
+    d3-scale "^3.2.3"
+    d3-time "^1.0.11"
+    d3-time-format "^3.0.0"
+    lodash "^4.17.21"
+
+"@nivo/scatterplot@0.80.0":
+  version "0.80.0"
+  resolved "https://registry.yarnpkg.com/@nivo/scatterplot/-/scatterplot-0.80.0.tgz#71e951b7941855633139735bc1b1771e3b07fb19"
+  integrity sha512-IoJZDKKysHrF1psGq9CN7Gp9K4kn5oHc4iB46ebyfV3Dq1MmuRdgUsVUb/O+7DIBaA7u9/DoX1pRt36r19BAHw==
+  dependencies:
+    "@nivo/annotations" "0.80.0"
+    "@nivo/axes" "0.80.0"
+    "@nivo/colors" "0.80.0"
+    "@nivo/legends" "0.80.0"
+    "@nivo/scales" "0.80.0"
+    "@nivo/tooltip" "0.80.0"
+    "@nivo/voronoi" "0.80.0"
+    "@react-spring/web" "9.4.5"
+    d3-scale "^3.2.3"
+    d3-shape "^1.3.5"
+    lodash "^4.17.21"
+
+"@nivo/tooltip@0.80.0":
+  version "0.80.0"
+  resolved "https://registry.yarnpkg.com/@nivo/tooltip/-/tooltip-0.80.0.tgz#07ebef47eb708a0612bd6297d5ad156bbec19d34"
+  integrity sha512-qGmrreRwnCsYjn/LAuwBtxBn/tvG8y+rwgd4gkANLBAoXd3bzJyvmkSe+QJPhUG64bq57ibDK+lO2pC48a3/fw==
+  dependencies:
+    "@react-spring/web" "9.4.5"
+
+"@nivo/voronoi@0.80.0":
+  version "0.80.0"
+  resolved "https://registry.yarnpkg.com/@nivo/voronoi/-/voronoi-0.80.0.tgz#59cc7ed253dc1a5bbcf614a5ac37d2468d561599"
+  integrity sha512-zaJV3I3cRu1gHpsXCIEvp6GGlGY8P7D9CwAVCjYDGrz3W/+GKN0kA7qGyHTC97zVxJtfefxSPlP/GtOdxac+qw==
+  dependencies:
+    d3-delaunay "^5.3.0"
+    d3-scale "^3.2.3"
+
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
@@ -1664,6 +1826,52 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@react-spring/animated@~9.4.5":
+  version "9.4.5"
+  resolved "https://registry.yarnpkg.com/@react-spring/animated/-/animated-9.4.5.tgz#dd9921c716a4f4a3ed29491e0c0c9f8ca0eb1a54"
+  integrity sha512-KWqrtvJSMx6Fj9nMJkhTwM9r6LIriExDRV6YHZV9HKQsaolUFppgkOXpC+rsL1JEtEvKv6EkLLmSqHTnuYjiIA==
+  dependencies:
+    "@react-spring/shared" "~9.4.5"
+    "@react-spring/types" "~9.4.5"
+
+"@react-spring/core@~9.4.5":
+  version "9.4.5"
+  resolved "https://registry.yarnpkg.com/@react-spring/core/-/core-9.4.5.tgz#4616e1adc18dd10f5731f100ebdbe9518b89ba3c"
+  integrity sha512-83u3FzfQmGMJFwZLAJSwF24/ZJctwUkWtyPD7KYtNagrFeQKUH1I05ZuhmCmqW+2w1KDW1SFWQ43RawqfXKiiQ==
+  dependencies:
+    "@react-spring/animated" "~9.4.5"
+    "@react-spring/rafz" "~9.4.5"
+    "@react-spring/shared" "~9.4.5"
+    "@react-spring/types" "~9.4.5"
+
+"@react-spring/rafz@~9.4.5":
+  version "9.4.5"
+  resolved "https://registry.yarnpkg.com/@react-spring/rafz/-/rafz-9.4.5.tgz#84f809f287f2a66bbfbc66195db340482f886bd7"
+  integrity sha512-swGsutMwvnoyTRxvqhfJBtGM8Ipx6ks0RkIpNX9F/U7XmyPvBMGd3GgX/mqxZUpdlsuI1zr/jiYw+GXZxAlLcQ==
+
+"@react-spring/shared@~9.4.5":
+  version "9.4.5"
+  resolved "https://registry.yarnpkg.com/@react-spring/shared/-/shared-9.4.5.tgz#4c3ad817bca547984fb1539204d752a412a6d829"
+  integrity sha512-JhMh3nFKsqyag0KM5IIM8BQANGscTdd0mMv3BXsUiMZrcjQTskyfnv5qxEeGWbJGGar52qr5kHuBHtCjQOzniA==
+  dependencies:
+    "@react-spring/rafz" "~9.4.5"
+    "@react-spring/types" "~9.4.5"
+
+"@react-spring/types@~9.4.5":
+  version "9.4.5"
+  resolved "https://registry.yarnpkg.com/@react-spring/types/-/types-9.4.5.tgz#9c71e5ff866b5484a7ef3db822bf6c10e77bdd8c"
+  integrity sha512-mpRIamoHwql0ogxEUh9yr4TP0xU5CWyZxVQeccGkHHF8kPMErtDXJlxyo0lj+telRF35XNihtPTWoflqtyARmg==
+
+"@react-spring/web@9.4.5":
+  version "9.4.5"
+  resolved "https://registry.yarnpkg.com/@react-spring/web/-/web-9.4.5.tgz#b92f05b87cdc0963a59ee149e677dcaff09f680e"
+  integrity sha512-NGAkOtKmOzDEctL7MzRlQGv24sRce++0xAY7KlcxmeVkR7LRSGkoXHaIfm9ObzxPMcPHQYQhf3+X9jepIFNHQA==
+  dependencies:
+    "@react-spring/animated" "~9.4.5"
+    "@react-spring/core" "~9.4.5"
+    "@react-spring/shared" "~9.4.5"
+    "@react-spring/types" "~9.4.5"
+
 "@remirror/core-constants@^2.0.1":
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/@remirror/core-constants/-/core-constants-2.0.1.tgz#19b4ae221880762cd98452f44288fcc66baaec0f"
@@ -3972,6 +4180,13 @@ csstype@^3.0.2, csstype@^3.1.1, csstype@^3.1.2:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b"
   integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==
 
+d3-array@2, d3-array@^2.3.0:
+  version "2.12.1"
+  resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-2.12.1.tgz#e20b41aafcdffdf5d50928004ececf815a465e81"
+  integrity sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==
+  dependencies:
+    internmap "^1.0.0"
+
 "d3-array@2 - 3", "d3-array@2.10.0 - 3", d3-array@^3.1.6:
   version "3.2.3"
   resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-3.2.3.tgz#39f1f4954e4a09ff69ac597c2d61906b04e84740"
@@ -3979,21 +4194,50 @@ csstype@^3.0.2, csstype@^3.1.1, csstype@^3.1.2:
   dependencies:
     internmap "1 - 2"
 
+"d3-color@1 - 2", d3-color@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-2.0.0.tgz#8d625cab42ed9b8f601a1760a389f7ea9189d62e"
+  integrity sha512-SPXi0TSKPD4g9tw0NMZFnR95XVgUZiBH+uUTqQuDu1OsE2zomHU7ho0FISciaPvosimixwHFl3WHLGabv6dDgQ==
+
 "d3-color@1 - 3":
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-3.1.0.tgz#395b2833dfac71507f12ac2f7af23bf819de24e2"
   integrity sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==
 
+d3-delaunay@^5.3.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/d3-delaunay/-/d3-delaunay-5.3.0.tgz#b47f05c38f854a4e7b3cea80e0bb12e57398772d"
+  integrity sha512-amALSrOllWVLaHTnDLHwMIiz0d1bBu9gZXd1FiLfXf8sHcX9jrcj81TVZOqD4UX7MgBZZ07c8GxzEgBpJqc74w==
+  dependencies:
+    delaunator "4"
+
 d3-ease@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/d3-ease/-/d3-ease-3.0.1.tgz#9658ac38a2140d59d346160f1f6c30fda0bd12f4"
   integrity sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==
 
+"d3-format@1 - 2":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/d3-format/-/d3-format-2.0.0.tgz#a10bcc0f986c372b729ba447382413aabf5b0767"
+  integrity sha512-Ab3S6XuE/Q+flY96HXT0jOXcM4EAClYFnRGY5zsjRGNy6qCYrQsMffs7cV5Q9xejb35zxW5hf/guKw34kvIKsA==
+
 "d3-format@1 - 3":
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/d3-format/-/d3-format-3.1.0.tgz#9260e23a28ea5cb109e93b21a06e24e2ebd55641"
   integrity sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==
 
+d3-format@^1.4.4:
+  version "1.4.5"
+  resolved "https://registry.yarnpkg.com/d3-format/-/d3-format-1.4.5.tgz#374f2ba1320e3717eb74a9356c67daee17a7edb4"
+  integrity sha512-J0piedu6Z8iB6TbIGfZgDzfXxUFN3qQRMofy2oPdXzQibYGqPB/9iMcxr/TGalU+2RsyDO+U4f33id8tbnSRMQ==
+
+"d3-interpolate@1 - 2", "d3-interpolate@1.2.0 - 2", d3-interpolate@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/d3-interpolate/-/d3-interpolate-2.0.1.tgz#98be499cfb8a3b94d4ff616900501a64abc91163"
+  integrity sha512-c5UhwwTs/yybcmTpAVqwSFl6vrQ8JZJoT5F7xNFK9pymv5C0Ymcc9/LIJHtYIggg/yS9YHw8i8O8tgb9pupjeQ==
+  dependencies:
+    d3-color "1 - 2"
+
 "d3-interpolate@1.2.0 - 3", d3-interpolate@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/d3-interpolate/-/d3-interpolate-3.0.1.tgz#3c47aa5b32c5b3dfb56ef3fd4342078a632b400d"
@@ -4001,11 +4245,35 @@ d3-ease@^3.0.1:
   dependencies:
     d3-color "1 - 3"
 
+d3-path@1:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/d3-path/-/d3-path-1.0.9.tgz#48c050bb1fe8c262493a8caf5524e3e9591701cf"
+  integrity sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg==
+
 d3-path@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/d3-path/-/d3-path-3.1.0.tgz#22df939032fb5a71ae8b1800d61ddb7851c42526"
   integrity sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==
 
+d3-scale-chromatic@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/d3-scale-chromatic/-/d3-scale-chromatic-2.0.0.tgz#c13f3af86685ff91323dc2f0ebd2dabbd72d8bab"
+  integrity sha512-LLqy7dJSL8yDy7NRmf6xSlsFZ6zYvJ4BcWFE4zBrOPnQERv9zj24ohnXKRbyi9YHnYV+HN1oEO3iFK971/gkzA==
+  dependencies:
+    d3-color "1 - 2"
+    d3-interpolate "1 - 2"
+
+d3-scale@^3.2.3:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/d3-scale/-/d3-scale-3.3.0.tgz#28c600b29f47e5b9cd2df9749c206727966203f3"
+  integrity sha512-1JGp44NQCt5d1g+Yy+GeOnZP7xHo0ii8zsQp6PGzd+C1/dl0KGsp9A7Mxwp+1D1o4unbTTxVdU/ZOIEBoeZPbQ==
+  dependencies:
+    d3-array "^2.3.0"
+    d3-format "1 - 2"
+    d3-interpolate "1.2.0 - 2"
+    d3-time "^2.1.1"
+    d3-time-format "2 - 3"
+
 d3-scale@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/d3-scale/-/d3-scale-4.0.2.tgz#82b38e8e8ff7080764f8dcec77bd4be393689396"
@@ -4017,6 +4285,13 @@ d3-scale@^4.0.2:
     d3-time "2.1.1 - 3"
     d3-time-format "2 - 4"
 
+d3-shape@^1.3.5:
+  version "1.3.7"
+  resolved "https://registry.yarnpkg.com/d3-shape/-/d3-shape-1.3.7.tgz#df63801be07bc986bc54f63789b4fe502992b5d7"
+  integrity sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==
+  dependencies:
+    d3-path "1"
+
 d3-shape@^3.1.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/d3-shape/-/d3-shape-3.2.0.tgz#a1a839cbd9ba45f28674c69d7f855bcf91dfc6a5"
@@ -4024,6 +4299,13 @@ d3-shape@^3.1.0:
   dependencies:
     d3-path "^3.1.0"
 
+"d3-time-format@2 - 3", d3-time-format@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/d3-time-format/-/d3-time-format-3.0.0.tgz#df8056c83659e01f20ac5da5fdeae7c08d5f1bb6"
+  integrity sha512-UXJh6EKsHBTjopVqZBhFysQcoXSv/5yLONZvkQ5Kk3qbwiUYkdX17Xa1PT6U1ZWXGGfB1ey5L8dKMlFq2DO0Ag==
+  dependencies:
+    d3-time "1 - 2"
+
 "d3-time-format@2 - 4":
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/d3-time-format/-/d3-time-format-4.1.0.tgz#7ab5257a5041d11ecb4fe70a5c7d16a195bb408a"
@@ -4031,6 +4313,13 @@ d3-shape@^3.1.0:
   dependencies:
     d3-time "1 - 3"
 
+"d3-time@1 - 2", d3-time@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/d3-time/-/d3-time-2.1.1.tgz#e9d8a8a88691f4548e68ca085e5ff956724a6682"
+  integrity sha512-/eIQe/eR4kCQwq7yxi7z4c6qEXf2IYGcjoWB5OOQy4Tq9Uv39/947qlDcN2TLkiTzQWzvnsuYPB9TrWaNfipKQ==
+  dependencies:
+    d3-array "2"
+
 "d3-time@1 - 3", "d3-time@2.1.1 - 3", d3-time@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/d3-time/-/d3-time-3.1.0.tgz#9310db56e992e3c0175e1ef385e545e48a9bb5c7"
@@ -4038,6 +4327,11 @@ d3-shape@^3.1.0:
   dependencies:
     d3-array "2 - 3"
 
+d3-time@^1.0.10, d3-time@^1.0.11:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/d3-time/-/d3-time-1.1.0.tgz#b1e19d307dae9c900b7e5b25ffc5dcc249a8a0f1"
+  integrity sha512-Xh0isrZ5rPYYdqhAVk8VLnMEidhz5aP7htAADH6MfzgmmicPkTo8LhkLxci61/lCB7n7UmE3bN0leRt+qvkLxA==
+
 d3-timer@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/d3-timer/-/d3-timer-3.0.1.tgz#6284d2a2708285b1abb7e201eda4380af35e63b0"
@@ -4158,6 +4452,11 @@ del@^4.1.1:
     pify "^4.0.1"
     rimraf "^2.6.3"
 
+delaunator@4:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/delaunator/-/delaunator-4.0.1.tgz#3d779687f57919a7a418f8ab947d3bddb6846957"
+  integrity sha512-WNPWi1IRKZfCt/qIDMfERkDp93+iZEmOxN2yy4Jg+Xhv8SLk2UTqqbe1sfiipn0and9QrE914/ihdx82Y/Giag==
+
 delayed-stream@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
@@ -5297,6 +5596,11 @@ internal-slot@^1.0.3, internal-slot@^1.0.4, internal-slot@^1.0.5:
   resolved "https://registry.yarnpkg.com/internmap/-/internmap-2.0.3.tgz#6685f23755e43c524e251d29cbc97248e3061009"
   integrity sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==
 
+internmap@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/internmap/-/internmap-1.0.1.tgz#0017cc8a3b99605f0302f2b198d272e015e5df95"
+  integrity sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw==
+
 invariant@^2.2.4:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"

From 1a534a3c191b465fe1a81145e04b68bd84de3db5 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Thu, 11 May 2023 17:38:46 +0530
Subject: [PATCH 12/81] feat: plane analytics (#1029)

* chore: global bar graph component

* chore: global pie graph component

* chore: global line graph component

* chore: removed unnecessary file

* chore: refactored global chart components to accept all props

* chore: function to convert response to chart data

* chore: global calendar graph component added

* chore: global scatter plot graph component

* feat: analytics boilerplate created

* chore: null value for segment and project

* chore: clean up file

* chore: change project query param key

* chore: export, refresh buttons, analytics table

* fix: analytics fetch key error

* chore: show only integer values in the y-axis

* chore: custom x-axis tick values and bar colors

* refactor: divide analytics page into granular components

* chore: convert analytics page to modal, save analytics modal

* fix: build error

* fix: modal overflow issues, analytics loading screen

* chore: custom tooltip, refactor: graphs folder structure

* refactor: folder structure, chore: x-axis tick values for larger data

* chore: code cleanup

* chore: remove unnecessary files

* fix: refresh analytics button on error

* feat: scope and demand analytics

* refactor: scope and demand and custom analytics folder structure

* fix: dynamic import type

* chore: minor updates

* feat: project, cycle and module level analytics

* style: project analytics modal

* fix: merge conflicts
---
 .../create-update-analytics-modal.tsx         | 158 ++++++++++++
 .../custom-analytics/custom-analytics.tsx     | 148 +++++++++++
 .../custom-analytics/graph/custom-tooltip.tsx |  34 +++
 .../custom-analytics/graph/index.tsx          | 102 ++++++++
 .../analytics/custom-analytics/index.ts       |   5 +
 .../analytics/custom-analytics/sidebar.tsx    | 232 ++++++++++++++++++
 .../analytics/custom-analytics/table.tsx      | 116 +++++++++
 apps/app/components/analytics/index.ts        |   4 +
 .../components/analytics/project-modal.tsx    |  93 +++++++
 .../analytics/scope-and-demand/demand.tsx     |  63 +++++
 .../analytics/scope-and-demand/index.ts       |   3 +
 .../scope-and-demand/scope-and-demand.tsx     |  67 +++++
 .../analytics/scope-and-demand/scope.tsx      |  98 ++++++++
 .../components/analytics/workspace-modal.tsx  |  70 ++++++
 .../core/calendar-view/calendar-header.tsx    |  10 +-
 .../components/core/calendar-view/index.ts    |   2 +-
 apps/app/components/core/feeds.tsx            |   2 +-
 .../app/components/cycles/transfer-issues.tsx |   2 +-
 apps/app/components/integration/jira/root.tsx |   2 +-
 apps/app/components/ui/custom-menu.tsx        |   2 +-
 apps/app/components/ui/graphs/bar-graph.tsx   |  13 +-
 .../components/ui/graphs/calendar-graph.tsx   |   4 +-
 apps/app/components/ui/graphs/line-graph.tsx  |   4 +-
 apps/app/components/ui/graphs/pie-graph.tsx   |   4 +-
 .../ui/graphs/scatter-plot-graph.tsx          |   4 +-
 .../components/ui/product-updates-modal.tsx   |   6 +-
 .../components/workspace/sidebar-dropdown.tsx |   2 +-
 .../app/components/workspace/sidebar-menu.tsx | 149 +++++++----
 apps/app/constants/analytics.ts               | 146 +++++++++++
 apps/app/constants/calendar.ts                |  28 +--
 apps/app/constants/fetch-keys.ts              |  12 +-
 apps/app/constants/graph.ts                   |   8 +-
 apps/app/helpers/array.helper.ts              |   5 +
 apps/app/layouts/app-layout/app-sidebar.tsx   |  14 +-
 apps/app/layouts/app-layout/index.tsx         | 166 -------------
 .../project-authorization-wrapper.tsx         |  19 +-
 .../workspace-authorization-wrapper.tsx       |  24 +-
 apps/app/pages/[workspaceSlug]/index.tsx      |   5 +-
 .../projects/[projectId]/cycles/[cycleId].tsx |  19 +-
 .../projects/[projectId]/issues/index.tsx     |  15 +-
 .../[projectId]/modules/[moduleId].tsx        |  12 +-
 .../projects/[projectId]/modules/index.tsx    |   2 +-
 apps/app/services/analytics.service.ts        |  59 +++++
 apps/app/types/analytics.d.ts                 |  83 +++++++
 apps/app/types/index.d.ts                     |   1 +
 45 files changed, 1730 insertions(+), 287 deletions(-)
 create mode 100644 apps/app/components/analytics/custom-analytics/create-update-analytics-modal.tsx
 create mode 100644 apps/app/components/analytics/custom-analytics/custom-analytics.tsx
 create mode 100644 apps/app/components/analytics/custom-analytics/graph/custom-tooltip.tsx
 create mode 100644 apps/app/components/analytics/custom-analytics/graph/index.tsx
 create mode 100644 apps/app/components/analytics/custom-analytics/index.ts
 create mode 100644 apps/app/components/analytics/custom-analytics/sidebar.tsx
 create mode 100644 apps/app/components/analytics/custom-analytics/table.tsx
 create mode 100644 apps/app/components/analytics/index.ts
 create mode 100644 apps/app/components/analytics/project-modal.tsx
 create mode 100644 apps/app/components/analytics/scope-and-demand/demand.tsx
 create mode 100644 apps/app/components/analytics/scope-and-demand/index.ts
 create mode 100644 apps/app/components/analytics/scope-and-demand/scope-and-demand.tsx
 create mode 100644 apps/app/components/analytics/scope-and-demand/scope.tsx
 create mode 100644 apps/app/components/analytics/workspace-modal.tsx
 create mode 100644 apps/app/constants/analytics.ts
 delete mode 100644 apps/app/layouts/app-layout/index.tsx
 create mode 100644 apps/app/services/analytics.service.ts
 create mode 100644 apps/app/types/analytics.d.ts

diff --git a/apps/app/components/analytics/custom-analytics/create-update-analytics-modal.tsx b/apps/app/components/analytics/custom-analytics/create-update-analytics-modal.tsx
new file mode 100644
index 000000000..625a2a4c7
--- /dev/null
+++ b/apps/app/components/analytics/custom-analytics/create-update-analytics-modal.tsx
@@ -0,0 +1,158 @@
+import React from "react";
+
+import { useRouter } from "next/router";
+
+// react-hook-form
+import { useForm } from "react-hook-form";
+// headless ui
+import { Dialog, Transition } from "@headlessui/react";
+// services
+import analyticsService from "services/analytics.service";
+// hooks
+import useToast from "hooks/use-toast";
+// ui
+import { Input, PrimaryButton, SecondaryButton, TextArea } from "components/ui";
+// types
+import { IAnalyticsParams, ISaveAnalyticsFormData } from "types";
+
+// types
+type Props = {
+  isOpen: boolean;
+  handleClose: () => void;
+  params?: IAnalyticsParams;
+};
+
+type FormValues = {
+  name: string;
+  description: string;
+};
+
+const defaultValues: FormValues = {
+  name: "",
+  description: "",
+};
+
+export const CreateUpdateAnalyticsModal: React.FC<Props> = ({ isOpen, handleClose, params }) => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const {
+    register,
+    formState: { errors, isSubmitting },
+    handleSubmit,
+    reset,
+  } = useForm<FormValues>({
+    defaultValues,
+  });
+
+  const onClose = () => {
+    handleClose();
+    reset(defaultValues);
+  };
+
+  const onSubmit = async (formData: FormValues) => {
+    if (!workspaceSlug) return;
+
+    const payload: ISaveAnalyticsFormData = {
+      name: formData.name,
+      description: formData.description,
+      query_dict: {
+        x_axis: "priority",
+        y_axis: "issue_count",
+        ...params,
+        project: params?.project ? [params.project] : [],
+      },
+    };
+
+    await analyticsService
+      .saveAnalytics(workspaceSlug.toString(), payload)
+      .then(() => {
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "Analytics saved successfully.",
+        });
+        onClose();
+      })
+      .catch(() =>
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Analytics could not be saved. Please try again.",
+        })
+      );
+  };
+
+  return (
+    <Transition.Root show={isOpen} as={React.Fragment}>
+      <Dialog as="div" className="relative z-30" onClose={onClose}>
+        <Transition.Child
+          as={React.Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-10 overflow-y-auto">
+          <div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
+            <Transition.Child
+              as={React.Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel className="relative transform rounded-lg border border-brand-base bg-brand-base px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
+                <form onSubmit={handleSubmit(onSubmit)}>
+                  <div>
+                    <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-brand-base">
+                      Save Analytics
+                    </Dialog.Title>
+                    <div className="mt-5">
+                      <Input
+                        type="text"
+                        id="name"
+                        name="name"
+                        placeholder="Title"
+                        autoComplete="off"
+                        error={errors.name}
+                        register={register}
+                        width="full"
+                        validations={{
+                          required: "Title is required",
+                        }}
+                      />
+                      <TextArea
+                        id="description"
+                        name="description"
+                        placeholder="Description"
+                        className="mt-3 h-32 resize-none text-sm"
+                        error={errors.description}
+                        register={register}
+                      />
+                    </div>
+                  </div>
+                  <div className="mt-5 flex justify-end gap-2">
+                    <SecondaryButton onClick={onClose}>Cancel</SecondaryButton>
+                    <PrimaryButton type="submit" loading={isSubmitting}>
+                      {isSubmitting ? "Saving..." : "Save Analytics"}
+                    </PrimaryButton>
+                  </div>
+                </form>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};
diff --git a/apps/app/components/analytics/custom-analytics/custom-analytics.tsx b/apps/app/components/analytics/custom-analytics/custom-analytics.tsx
new file mode 100644
index 000000000..7f393aa4c
--- /dev/null
+++ b/apps/app/components/analytics/custom-analytics/custom-analytics.tsx
@@ -0,0 +1,148 @@
+import { useState } from "react";
+
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// react-hook-form
+import { useForm } from "react-hook-form";
+// services
+import analyticsService from "services/analytics.service";
+// components
+import {
+  AnalyticsGraph,
+  AnalyticsSidebar,
+  AnalyticsTable,
+  CreateUpdateAnalyticsModal,
+} from "components/analytics";
+// ui
+import { Loader, PrimaryButton } from "components/ui";
+// types
+import { convertResponseToBarGraphData } from "constants/analytics";
+// types
+import { IAnalyticsParams } from "types";
+// fetch-keys
+import { ANALYTICS } from "constants/fetch-keys";
+
+const defaultValues: IAnalyticsParams = {
+  x_axis: "priority",
+  y_axis: "issue_count",
+  segment: null,
+  project: null,
+};
+
+type Props = {
+  isProjectLevel?: boolean;
+  fullScreen?: boolean;
+};
+
+export const CustomAnalytics: React.FC<Props> = ({ isProjectLevel = false, fullScreen = true }) => {
+  const [saveAnalyticsModal, setSaveAnalyticsModal] = useState(false);
+
+  const router = useRouter();
+  const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
+
+  const { control, watch, setValue } = useForm<IAnalyticsParams>({ defaultValues });
+
+  const params: IAnalyticsParams = {
+    x_axis: watch("x_axis"),
+    y_axis: watch("y_axis"),
+    segment: watch("segment"),
+    project: isProjectLevel ? projectId?.toString() : watch("project"),
+    cycle: isProjectLevel && cycleId ? cycleId.toString() : null,
+    module: isProjectLevel && moduleId ? moduleId.toString() : null,
+  };
+
+  const {
+    data: analytics,
+    error: analyticsError,
+    mutate: mutateAnalytics,
+  } = useSWR(
+    workspaceSlug ? ANALYTICS(workspaceSlug.toString(), params) : null,
+    workspaceSlug ? () => analyticsService.getAnalytics(workspaceSlug.toString(), params) : null
+  );
+
+  const yAxisKey = params.y_axis === "issue_count" ? "count" : "effort";
+  const barGraphData = convertResponseToBarGraphData(
+    analytics?.distribution,
+    watch("segment") ? true : false,
+    watch("y_axis")
+  );
+
+  return (
+    <>
+      <CreateUpdateAnalyticsModal
+        isOpen={saveAnalyticsModal}
+        handleClose={() => setSaveAnalyticsModal(false)}
+        params={params}
+      />
+      <div
+        className={`overflow-y-auto ${
+          fullScreen ? "grid grid-cols-4 h-full" : "flex flex-col-reverse"
+        }`}
+      >
+        <div className="col-span-3">
+          {!analyticsError ? (
+            analytics ? (
+              analytics.total > 0 ? (
+                <>
+                  <AnalyticsGraph
+                    analytics={analytics}
+                    barGraphData={barGraphData}
+                    params={params}
+                    yAxisKey={yAxisKey}
+                    fullScreen={fullScreen}
+                  />
+                  <AnalyticsTable
+                    analytics={analytics}
+                    barGraphData={barGraphData}
+                    params={params}
+                    yAxisKey={yAxisKey}
+                  />
+                </>
+              ) : (
+                <div className="grid h-full place-items-center p-5">
+                  <div className="space-y-4 text-brand-secondary">
+                    <p className="text-sm">
+                      No matching issues found. Try changing the parameters.
+                    </p>
+                  </div>
+                </div>
+              )
+            ) : (
+              <Loader className="space-y-6 p-5">
+                <Loader.Item height="300px" />
+                <Loader className="space-y-4">
+                  <Loader.Item height="30px" />
+                  <Loader.Item height="30px" />
+                  <Loader.Item height="30px" />
+                  <Loader.Item height="30px" />
+                </Loader>
+              </Loader>
+            )
+          ) : (
+            <div className="grid h-full place-items-center p-5">
+              <div className="space-y-4 text-brand-secondary">
+                <p className="text-sm">There was some error in fetching the data.</p>
+                <div className="flex items-center justify-center gap-2">
+                  <PrimaryButton onClick={mutateAnalytics}>Refresh</PrimaryButton>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+        <div className={fullScreen ? "h-full" : ""}>
+          <AnalyticsSidebar
+            analytics={analytics}
+            params={params}
+            control={control}
+            setValue={setValue}
+            setSaveAnalyticsModal={setSaveAnalyticsModal}
+            fullScreen={fullScreen}
+            isProjectLevel={isProjectLevel}
+          />
+        </div>
+      </div>
+    </>
+  );
+};
diff --git a/apps/app/components/analytics/custom-analytics/graph/custom-tooltip.tsx b/apps/app/components/analytics/custom-analytics/graph/custom-tooltip.tsx
new file mode 100644
index 000000000..5ec1d7215
--- /dev/null
+++ b/apps/app/components/analytics/custom-analytics/graph/custom-tooltip.tsx
@@ -0,0 +1,34 @@
+// nivo
+import { BarTooltipProps } from "@nivo/bar";
+// types
+import { IAnalyticsParams } from "types";
+
+type Props = {
+  datum: BarTooltipProps<any>;
+  params: IAnalyticsParams;
+};
+
+export const CustomTooltip: React.FC<Props> = ({ datum, params }) => (
+  <div className="flex items-center gap-2 rounded-md border border-brand-base bg-brand-base p-2 text-xs">
+    <span
+      className="h-3 w-3 rounded"
+      style={{
+        backgroundColor: datum.color,
+      }}
+    />
+    <span
+      className={`font-medium text-brand-secondary ${
+        params.segment
+          ? params.segment === "priority" || params.segment === "state__group"
+            ? "capitalize"
+            : ""
+          : params.x_axis === "priority" || params.x_axis === "state__group"
+          ? "capitalize"
+          : ""
+      }`}
+    >
+      {params.segment ? datum.id : datum.id === "count" ? "Issue count" : "Effort"}:
+    </span>
+    <span>{datum.value}</span>
+  </div>
+);
diff --git a/apps/app/components/analytics/custom-analytics/graph/index.tsx b/apps/app/components/analytics/custom-analytics/graph/index.tsx
new file mode 100644
index 000000000..0616b0853
--- /dev/null
+++ b/apps/app/components/analytics/custom-analytics/graph/index.tsx
@@ -0,0 +1,102 @@
+// nivo
+import { BarDatum } from "@nivo/bar";
+// components
+import { CustomTooltip } from "./custom-tooltip";
+// ui
+import { BarGraph } from "components/ui";
+// helpers
+import { findStringWithMostCharacters } from "helpers/array.helper";
+// types
+import { IAnalyticsParams, IAnalyticsResponse } from "types";
+// constants
+import { generateBarColor } from "constants/analytics";
+
+type Props = {
+  analytics: IAnalyticsResponse;
+  barGraphData: {
+    data: BarDatum[];
+    xAxisKeys: string[];
+  };
+  params: IAnalyticsParams;
+  yAxisKey: "effort" | "count";
+  fullScreen: boolean;
+};
+
+export const AnalyticsGraph: React.FC<Props> = ({
+  analytics,
+  barGraphData,
+  params,
+  yAxisKey,
+  fullScreen,
+}) => {
+  const generateYAxisTickValues = () => {
+    if (!analytics) return [];
+
+    let data: number[] = [];
+
+    if (params.segment)
+      // find the total no of issues in each segment
+      data = Object.keys(analytics.distribution).map((segment) => {
+        let totalSegmentIssues = 0;
+
+        analytics.distribution[segment].map((s) => {
+          totalSegmentIssues += s[yAxisKey] as number;
+        });
+
+        return totalSegmentIssues;
+      });
+    else data = barGraphData.data.map((d) => d[yAxisKey] as number);
+
+    const minValue = 0;
+    const maxValue = Math.max(...data);
+
+    const valueRange = maxValue - minValue;
+
+    let tickInterval = 1;
+    if (valueRange > 10) tickInterval = 2;
+    if (valueRange > 50) tickInterval = 5;
+    if (valueRange > 100) tickInterval = 10;
+    if (valueRange > 200) tickInterval = 50;
+    if (valueRange > 300) tickInterval = (Math.ceil(valueRange / 100) * 100) / 10;
+
+    const tickValues = [];
+    let tickValue = minValue;
+    while (tickValue <= maxValue) {
+      tickValues.push(tickValue);
+      tickValue += tickInterval;
+    }
+
+    if (!tickValues.includes(maxValue)) tickValues.push(maxValue);
+
+    return tickValues;
+  };
+
+  const longestXAxisLabel = findStringWithMostCharacters(barGraphData.data.map((d) => `${d.name}`));
+
+  return (
+    <BarGraph
+      data={barGraphData.data}
+      indexBy="name"
+      keys={barGraphData.xAxisKeys}
+      axisLeft={{
+        tickSize: 0,
+        tickPadding: 10,
+        tickValues: generateYAxisTickValues(),
+      }}
+      colors={(datum) =>
+        generateBarColor(
+          params.segment ? `${datum.id}` : `${datum.indexValue}`,
+          analytics,
+          params,
+          params.segment ? "segment" : "x_axis"
+        )
+      }
+      tooltip={(datum) => <CustomTooltip datum={datum} params={params} />}
+      height={fullScreen ? "400px" : "300px"}
+      margin={{ right: 20, bottom: longestXAxisLabel.length * 5 + 20 }}
+      theme={{
+        axis: {},
+      }}
+    />
+  );
+};
diff --git a/apps/app/components/analytics/custom-analytics/index.ts b/apps/app/components/analytics/custom-analytics/index.ts
new file mode 100644
index 000000000..11670a494
--- /dev/null
+++ b/apps/app/components/analytics/custom-analytics/index.ts
@@ -0,0 +1,5 @@
+export * from "./graph";
+export * from "./create-update-analytics-modal";
+export * from "./custom-analytics";
+export * from "./sidebar";
+export * from "./table";
diff --git a/apps/app/components/analytics/custom-analytics/sidebar.tsx b/apps/app/components/analytics/custom-analytics/sidebar.tsx
new file mode 100644
index 000000000..9c0964021
--- /dev/null
+++ b/apps/app/components/analytics/custom-analytics/sidebar.tsx
@@ -0,0 +1,232 @@
+import { useRouter } from "next/router";
+
+import { mutate } from "swr";
+
+// react-hook-form
+import { Control, Controller, UseFormSetValue } from "react-hook-form";
+// services
+import analyticsService from "services/analytics.service";
+// hooks
+import useProjects from "hooks/use-projects";
+import useToast from "hooks/use-toast";
+// ui
+import { CustomMenu, CustomSelect, PrimaryButton } from "components/ui";
+// icons
+import { ArrowPathIcon, ArrowUpTrayIcon } from "@heroicons/react/24/outline";
+// types
+import { IAnalyticsParams, IAnalyticsResponse, IExportAnalyticsFormData } from "types";
+// fetch-keys
+import { ANALYTICS } from "constants/fetch-keys";
+// constants
+import { ANALYTICS_X_AXIS_VALUES, ANALYTICS_Y_AXIS_VALUES } from "constants/analytics";
+
+type Props = {
+  analytics: IAnalyticsResponse | undefined;
+  params: IAnalyticsParams;
+  control: Control<IAnalyticsParams, any>;
+  setValue: UseFormSetValue<IAnalyticsParams>;
+  setSaveAnalyticsModal: React.Dispatch<React.SetStateAction<boolean>>;
+  fullScreen: boolean;
+  isProjectLevel?: boolean;
+};
+
+export const AnalyticsSidebar: React.FC<Props> = ({
+  analytics,
+  params,
+  control,
+  setValue,
+  setSaveAnalyticsModal,
+  fullScreen,
+  isProjectLevel = false,
+}) => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { projects } = useProjects();
+
+  const { setToastAlert } = useToast();
+
+  const exportAnalytics = () => {
+    if (!workspaceSlug) return;
+
+    const data: IExportAnalyticsFormData = {
+      x_axis: params.x_axis,
+      y_axis: params.y_axis,
+    };
+
+    if (params.segment) data.segment = params.segment;
+    if (params.project) data.project = [params.project];
+
+    analyticsService
+      .exportAnalytics(workspaceSlug.toString(), data)
+      .then((res) =>
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: res.message,
+        })
+      )
+      .catch(() =>
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "There was some error in exporting the analytics. Please try again.",
+        })
+      );
+  };
+
+  return (
+    <div
+      className={`gap-4 p-5 ${
+        fullScreen ? "border-l border-brand-base bg-brand-sidebar h-full" : ""
+      }`}
+    >
+      <div className={`sticky top-5 ${fullScreen ? "space-y-4" : "space-y-2"}`}>
+        <div className="flex items-center justify-between gap-2 flex-shrink-0">
+          <h5 className="text-lg font-medium">
+            {analytics?.total ?? 0}{" "}
+            <span className="text-xs font-normal text-brand-secondary">issues</span>
+          </h5>
+          <CustomMenu ellipsis>
+            <CustomMenu.MenuItem
+              onClick={() => {
+                if (!workspaceSlug) return;
+
+                mutate(ANALYTICS(workspaceSlug.toString(), params));
+              }}
+            >
+              <div className="flex items-center gap-2">
+                <ArrowPathIcon className="h-3 w-3" />
+                Refresh
+              </div>
+            </CustomMenu.MenuItem>
+            <CustomMenu.MenuItem onClick={exportAnalytics}>
+              <div className="flex items-center gap-2">
+                <ArrowUpTrayIcon className="h-3 w-3" />
+                Export analytics as CSV
+              </div>
+            </CustomMenu.MenuItem>
+          </CustomMenu>
+        </div>
+        <div className={`${fullScreen ? "space-y-4" : "grid items-center gap-4 grid-cols-3"}`}>
+          {isProjectLevel === false && (
+            <div>
+              <h6 className="text-xs text-brand-secondary">Project</h6>
+              <Controller
+                name="project"
+                control={control}
+                render={({ field: { value, onChange } }) => (
+                  <CustomSelect
+                    value={value}
+                    label={projects.find((p) => p.id === value)?.name ?? "All projects"}
+                    onChange={onChange}
+                    width="w-full"
+                    maxHeight="lg"
+                  >
+                    <CustomSelect.Option value={null}>All projects</CustomSelect.Option>
+                    {projects.map((project) => (
+                      <CustomSelect.Option key={project.id} value={project.id}>
+                        {project.name}
+                      </CustomSelect.Option>
+                    ))}
+                  </CustomSelect>
+                )}
+              />
+            </div>
+          )}
+          <div>
+            <h6 className="text-xs text-brand-secondary">Measure (y-axis)</h6>
+            <Controller
+              name="y_axis"
+              control={control}
+              render={({ field: { value, onChange } }) => (
+                <CustomSelect
+                  value={value}
+                  label={
+                    <span>
+                      {ANALYTICS_Y_AXIS_VALUES.find((v) => v.value === value)?.label ?? "None"}
+                    </span>
+                  }
+                  onChange={onChange}
+                  width="w-full"
+                >
+                  {ANALYTICS_Y_AXIS_VALUES.map((item) => (
+                    <CustomSelect.Option key={item.value} value={item.value}>
+                      {item.label}
+                    </CustomSelect.Option>
+                  ))}
+                </CustomSelect>
+              )}
+            />
+          </div>
+          <div>
+            <h6 className="text-xs text-brand-secondary">Dimension (x-axis)</h6>
+            <Controller
+              name="x_axis"
+              control={control}
+              render={({ field: { value, onChange } }) => (
+                <CustomSelect
+                  value={value}
+                  label={
+                    <span>{ANALYTICS_X_AXIS_VALUES.find((v) => v.value === value)?.label}</span>
+                  }
+                  onChange={(val: string) => {
+                    if (params.segment === val) setValue("segment", null);
+
+                    onChange(val);
+                  }}
+                  width="w-full"
+                  maxHeight="lg"
+                >
+                  {ANALYTICS_X_AXIS_VALUES.map((item) => (
+                    <CustomSelect.Option key={item.value} value={item.value}>
+                      {item.label}
+                    </CustomSelect.Option>
+                  ))}
+                </CustomSelect>
+              )}
+            />
+          </div>
+          <div>
+            <h6 className="text-xs text-brand-secondary">Segment</h6>
+            <Controller
+              name="segment"
+              control={control}
+              render={({ field: { value, onChange } }) => (
+                <CustomSelect
+                  value={value}
+                  label={
+                    <span>
+                      {ANALYTICS_X_AXIS_VALUES.find((v) => v.value === value)?.label ?? (
+                        <span className="text-brand-secondary">No value</span>
+                      )}
+                    </span>
+                  }
+                  onChange={onChange}
+                  width="w-full"
+                  maxHeight="lg"
+                >
+                  <CustomSelect.Option value={null}>No value</CustomSelect.Option>
+                  {ANALYTICS_X_AXIS_VALUES.map((item) => {
+                    if (params.x_axis === item.value) return null;
+
+                    return (
+                      <CustomSelect.Option key={item.value} value={item.value}>
+                        {item.label}
+                      </CustomSelect.Option>
+                    );
+                  })}
+                </CustomSelect>
+              )}
+            />
+          </div>
+        </div>
+        {/* <div className="flex items-center justify-end gap-2">
+          <PrimaryButton className="py-1" onClick={() => setSaveAnalyticsModal(true)}>
+            Save analytics
+          </PrimaryButton>
+        </div> */}
+      </div>
+    </div>
+  );
+};
diff --git a/apps/app/components/analytics/custom-analytics/table.tsx b/apps/app/components/analytics/custom-analytics/table.tsx
new file mode 100644
index 000000000..a6ec1cb89
--- /dev/null
+++ b/apps/app/components/analytics/custom-analytics/table.tsx
@@ -0,0 +1,116 @@
+// nivo
+import { BarDatum } from "@nivo/bar";
+// icons
+import { getPriorityIcon } from "components/icons";
+// helpers
+import { addSpaceIfCamelCase } from "helpers/string.helper";
+// types
+import { IAnalyticsParams, IAnalyticsResponse } from "types";
+// constants
+import {
+  ANALYTICS_X_AXIS_VALUES,
+  ANALYTICS_Y_AXIS_VALUES,
+  generateBarColor,
+} from "constants/analytics";
+
+type Props = {
+  analytics: IAnalyticsResponse;
+  barGraphData: {
+    data: BarDatum[];
+    xAxisKeys: string[];
+  };
+  params: IAnalyticsParams;
+  yAxisKey: "effort" | "count";
+};
+
+export const AnalyticsTable: React.FC<Props> = ({ analytics, barGraphData, params, yAxisKey }) => (
+  <div className="flow-root">
+    <div className="overflow-x-auto">
+      <div className="inline-block min-w-full align-middle">
+        <table className="min-w-full divide-y divide-brand-base whitespace-nowrap border-y border-brand-base">
+          <thead className="bg-brand-base">
+            <tr className="divide-x divide-brand-base text-sm text-brand-base">
+              <th scope="col" className="py-3 px-2.5 text-left font-medium">
+                {ANALYTICS_X_AXIS_VALUES.find((v) => v.value === params.x_axis)?.label}
+              </th>
+              {params.segment ? (
+                barGraphData.xAxisKeys.map((key) => (
+                  <th
+                    key={`segment-${key}`}
+                    scope="col"
+                    className={`px-2.5 py-3 text-left font-medium ${
+                      params.segment === "priority" || params.segment === "state__group"
+                        ? "capitalize"
+                        : ""
+                    }`}
+                  >
+                    <div className="flex items-center gap-2">
+                      {params.segment === "priority" ? (
+                        getPriorityIcon(key)
+                      ) : (
+                        <span
+                          className="h-3 w-3 flex-shrink-0 rounded"
+                          style={{
+                            backgroundColor: generateBarColor(key, analytics, params, "segment"),
+                          }}
+                        />
+                      )}
+                      {key}
+                    </div>
+                  </th>
+                ))
+              ) : (
+                <th scope="col" className="py-3 px-2.5 text-left font-medium sm:pr-0">
+                  {ANALYTICS_Y_AXIS_VALUES.find((v) => v.value === params.y_axis)?.label}
+                </th>
+              )}
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-brand-base">
+            {barGraphData.data.map((item, index) => (
+              <tr
+                key={`table-row-${index}`}
+                className="divide-x divide-brand-base text-xs text-brand-secondary"
+              >
+                <td
+                  className={`flex items-center gap-2 whitespace-nowrap py-2 px-2.5 font-medium ${
+                    params.x_axis === "priority" ? "capitalize" : ""
+                  }`}
+                >
+                  {params.x_axis === "priority" ? (
+                    getPriorityIcon(`${item.name}`)
+                  ) : (
+                    <span
+                      className="h-3 w-3 rounded"
+                      style={{
+                        backgroundColor: generateBarColor(
+                          `${item.name}`,
+                          analytics,
+                          params,
+                          "x_axis"
+                        ),
+                      }}
+                    />
+                  )}
+                  {addSpaceIfCamelCase(`${item.name}`)}
+                </td>
+                {params.segment ? (
+                  barGraphData.xAxisKeys.map((key, index) => (
+                    <td
+                      key={`segment-value-${index}`}
+                      className="whitespace-nowrap py-2 px-2.5 sm:pr-0"
+                    >
+                      {item[key] ?? 0}
+                    </td>
+                  ))
+                ) : (
+                  <td className="whitespace-nowrap py-2 px-2.5 sm:pr-0">{item[yAxisKey]}</td>
+                )}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+);
diff --git a/apps/app/components/analytics/index.ts b/apps/app/components/analytics/index.ts
new file mode 100644
index 000000000..5ebcfae0d
--- /dev/null
+++ b/apps/app/components/analytics/index.ts
@@ -0,0 +1,4 @@
+export * from "./custom-analytics";
+export * from "./scope-and-demand";
+export * from "./project-modal";
+export * from "./workspace-modal";
diff --git a/apps/app/components/analytics/project-modal.tsx b/apps/app/components/analytics/project-modal.tsx
new file mode 100644
index 000000000..ca185c43e
--- /dev/null
+++ b/apps/app/components/analytics/project-modal.tsx
@@ -0,0 +1,93 @@
+import React, { Fragment, useState } from "react";
+
+// headless ui
+import { Tab } from "@headlessui/react";
+// components
+import { CustomAnalytics, ScopeAndDemand } from "components/analytics";
+// icons
+import {
+  ArrowsPointingInIcon,
+  ArrowsPointingOutIcon,
+  XMarkIcon,
+} from "@heroicons/react/24/outline";
+
+type Props = {
+  isOpen: boolean;
+  onClose: () => void;
+};
+
+const tabsList = ["Scope and Demand", "Custom Analytics"];
+
+export const AnalyticsProjectModal: React.FC<Props> = ({ isOpen, onClose }) => {
+  const [fullScreen, setFullScreen] = useState(false);
+
+  const handleClose = () => {
+    onClose();
+  };
+
+  return (
+    <div
+      className={`absolute top-0 z-30 h-full bg-brand-surface-1 ${
+        fullScreen ? "p-2 w-full" : "w-1/2"
+      } ${isOpen ? "right-0" : "-right-full"} duration-300 transition-all`}
+    >
+      <div
+        className={`flex h-full flex-col overflow-hidden border-brand-base bg-brand-surface-1 text-left ${
+          fullScreen ? "rounded-lg border" : "border-l"
+        }`}
+      >
+        <div
+          className={`flex items-center justify-between gap-2 border-b border-b-brand-base bg-brand-sidebar p-3 text-sm ${
+            fullScreen ? "" : "py-[1.3rem]"
+          }`}
+        >
+          <h3>Project Analytics</h3>
+          <div className="flex items-center gap-2">
+            <button
+              type="button"
+              className="grid place-items-center p-1 text-brand-secondary hover:text-brand-base"
+              onClick={() => setFullScreen((prevData) => !prevData)}
+            >
+              {fullScreen ? (
+                <ArrowsPointingInIcon className="h-4 w-4" />
+              ) : (
+                <ArrowsPointingOutIcon className="h-3 w-3" />
+              )}
+            </button>
+            <button
+              type="button"
+              className="grid place-items-center p-1 text-brand-secondary hover:text-brand-base"
+              onClick={handleClose}
+            >
+              <XMarkIcon className="h-4 w-4" />
+            </button>
+          </div>
+        </div>
+        <Tab.Group as={Fragment}>
+          <Tab.List className="space-x-2 border-b border-brand-base px-5 py-3">
+            {tabsList.map((tab) => (
+              <Tab
+                key={tab}
+                className={({ selected }) =>
+                  `rounded-3xl border border-brand-base px-4 py-2 text-xs hover:bg-brand-base ${
+                    selected ? "bg-brand-base" : ""
+                  }`
+                }
+              >
+                {tab}
+              </Tab>
+            ))}
+          </Tab.List>
+          <Tab.Panels as={Fragment}>
+            <Tab.Panel as={Fragment}>
+              <ScopeAndDemand fullScreen={fullScreen} />
+            </Tab.Panel>
+            <Tab.Panel as={Fragment}>
+              <CustomAnalytics fullScreen={fullScreen} isProjectLevel />
+            </Tab.Panel>
+          </Tab.Panels>
+        </Tab.Group>
+      </div>
+    </div>
+  );
+};
diff --git a/apps/app/components/analytics/scope-and-demand/demand.tsx b/apps/app/components/analytics/scope-and-demand/demand.tsx
new file mode 100644
index 000000000..6f100416a
--- /dev/null
+++ b/apps/app/components/analytics/scope-and-demand/demand.tsx
@@ -0,0 +1,63 @@
+// icons
+import { PlayIcon } from "@heroicons/react/24/outline";
+// types
+import { IDefaultAnalyticsResponse } from "types";
+// constants
+import { STATE_GROUP_COLORS } from "constants/state";
+
+type Props = {
+  defaultAnalytics: IDefaultAnalyticsResponse;
+};
+
+export const AnalyticsDemand: React.FC<Props> = ({ defaultAnalytics }) => (
+  <div className="space-y-3 self-start rounded-[10px] border border-brand-base p-3">
+    <h5 className="text-xs text-red-500">DEMAND</h5>
+    <div>
+      <h4 className="text-brand-bas text-base font-medium">Total open tasks</h4>
+      <h3 className="mt-1 text-xl font-semibold">{defaultAnalytics.open_issues}</h3>
+    </div>
+    <div className="space-y-6">
+      {defaultAnalytics.open_issues_classified.map((group) => {
+        const percentage = ((group.state_count / defaultAnalytics.total_issues) * 100).toFixed(0);
+
+        return (
+          <div key={group.state_group} className="space-y-2">
+            <div className="flex items-center justify-between gap-2 text-xs">
+              <div className="flex items-center gap-1">
+                <span
+                  className="h-2 w-2 rounded-full"
+                  style={{
+                    backgroundColor: STATE_GROUP_COLORS[group.state_group],
+                  }}
+                />
+                <h6 className="capitalize">{group.state_group}</h6>
+                <span className="ml-1 rounded-3xl bg-brand-surface-2 px-2 py-0.5 text-[0.65rem] text-brand-secondary">
+                  {group.state_count}
+                </span>
+              </div>
+              <p className="text-brand-secondary">{percentage}%</p>
+            </div>
+            <div className="bar relative h-1 w-full rounded bg-brand-base">
+              <div
+                className="absolute top-0 left-0 h-1 rounded duration-300"
+                style={{
+                  width: `${percentage}%`,
+                  backgroundColor: STATE_GROUP_COLORS[group.state_group],
+                }}
+              />
+            </div>
+          </div>
+        );
+      })}
+    </div>
+    <div className="!mt-6 flex w-min items-center gap-2 whitespace-nowrap rounded-md border border-brand-base bg-brand-base p-2 text-xs">
+      <p className="flex items-center gap-1 text-brand-secondary">
+        <PlayIcon className="h-4 w-4 -rotate-90" aria-hidden="true" />
+        <span>Estimate Demand:</span>
+      </p>
+      <p className="font-medium">
+        {defaultAnalytics.open_estimate_sum}/{defaultAnalytics.total_estimate_sum}
+      </p>
+    </div>
+  </div>
+);
diff --git a/apps/app/components/analytics/scope-and-demand/index.ts b/apps/app/components/analytics/scope-and-demand/index.ts
new file mode 100644
index 000000000..fe18eb0f6
--- /dev/null
+++ b/apps/app/components/analytics/scope-and-demand/index.ts
@@ -0,0 +1,3 @@
+export * from "./demand";
+export * from "./scope-and-demand";
+export * from "./scope";
diff --git a/apps/app/components/analytics/scope-and-demand/scope-and-demand.tsx b/apps/app/components/analytics/scope-and-demand/scope-and-demand.tsx
new file mode 100644
index 000000000..1f98672e0
--- /dev/null
+++ b/apps/app/components/analytics/scope-and-demand/scope-and-demand.tsx
@@ -0,0 +1,67 @@
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// services
+import analyticsService from "services/analytics.service";
+// components
+import { AnalyticsDemand, AnalyticsScope } from "components/analytics";
+// ui
+import { Loader, PrimaryButton } from "components/ui";
+// fetch-keys
+import { DEFAULT_ANALYTICS } from "constants/fetch-keys";
+
+type Props = {
+  fullScreen?: boolean;
+};
+
+export const ScopeAndDemand: React.FC<Props> = ({ fullScreen = true }) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
+
+  const params = {
+    project: projectId ? projectId.toString() : null,
+    cycle: cycleId ? cycleId.toString() : null,
+    module: moduleId ? moduleId.toString() : null,
+  };
+
+  const {
+    data: defaultAnalytics,
+    error: defaultAnalyticsError,
+    mutate: mutateDefaultAnalytics,
+  } = useSWR(
+    workspaceSlug ? DEFAULT_ANALYTICS(workspaceSlug.toString(), params) : null,
+    workspaceSlug
+      ? () => analyticsService.getDefaultAnalytics(workspaceSlug.toString(), params)
+      : null
+  );
+
+  return (
+    <>
+      {!defaultAnalyticsError ? (
+        defaultAnalytics ? (
+          <div className="h-full overflow-y-auto p-5 text-sm">
+            <div className={`grid grid-cols-1 gap-5 ${fullScreen ? "lg:grid-cols-2" : ""}`}>
+              <AnalyticsDemand defaultAnalytics={defaultAnalytics} />
+              <AnalyticsScope defaultAnalytics={defaultAnalytics} />
+            </div>
+          </div>
+        ) : (
+          <Loader className="grid grid-cols-1 gap-5 p-5 lg:grid-cols-2">
+            <Loader.Item height="300px" />
+            <Loader.Item height="300px" />
+          </Loader>
+        )
+      ) : (
+        <div className="grid h-full place-items-center p-5">
+          <div className="space-y-4 text-brand-secondary">
+            <p className="text-sm">There was some error in fetching the data.</p>
+            <div className="flex items-center justify-center gap-2">
+              <PrimaryButton onClick={mutateDefaultAnalytics}>Refresh</PrimaryButton>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
diff --git a/apps/app/components/analytics/scope-and-demand/scope.tsx b/apps/app/components/analytics/scope-and-demand/scope.tsx
new file mode 100644
index 000000000..a808b83f9
--- /dev/null
+++ b/apps/app/components/analytics/scope-and-demand/scope.tsx
@@ -0,0 +1,98 @@
+// ui
+import { BarGraph, LineGraph } from "components/ui";
+// types
+import { IDefaultAnalyticsResponse } from "types";
+// constants
+import { MONTHS_LIST } from "constants/calendar";
+
+type Props = {
+  defaultAnalytics: IDefaultAnalyticsResponse;
+};
+
+export const AnalyticsScope: React.FC<Props> = ({ defaultAnalytics }) => {
+  const currentMonth = new Date().getMonth();
+  const startMonth = Math.floor(currentMonth / 3) * 3 + 1;
+  const quarterMonthsList = [startMonth, startMonth + 1, startMonth + 2];
+
+  return (
+    <div className="rounded-[10px] border border-brand-base">
+      <h5 className="p-3 text-xs text-green-500">SCOPE</h5>
+      <div className="divide-y divide-brand-base">
+        <div>
+          <h6 className="px-3 text-base font-medium">Pending issues</h6>
+          <BarGraph
+            data={defaultAnalytics.pending_issue_user}
+            indexBy="assignees__email"
+            keys={["count"]}
+            height="250px"
+            colors={() => `#f97316`}
+            tooltip={(datum) => (
+              <div className="rounded-md border border-brand-base bg-brand-base p-2 text-xs">
+                <span className="font-medium text-brand-secondary">
+                  Issue count- {datum.indexValue ?? "No assignee"}:{" "}
+                </span>
+                {datum.value}
+              </div>
+            )}
+            axisBottom={{
+              tickValues: [],
+            }}
+            margin={{ top: 20 }}
+          />
+        </div>
+        <div className="grid grid-cols-1 divide-y divide-brand-base sm:grid-cols-2 sm:divide-x">
+          <div className="p-3">
+            <h6 className="text-base font-medium">Most issues created</h6>
+            <div className="mt-3 space-y-3">
+              {defaultAnalytics.most_issue_created_user.map((user) => (
+                <div
+                  key={user.assignees__email}
+                  className="flex items-start justify-between gap-4 text-xs"
+                >
+                  <span className="break-all text-brand-secondary">{user.assignees__email}</span>
+                  <span className="flex-shrink-0">{user.count}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+          <div className="p-3">
+            <h6 className="text-base font-medium">Most issues closed</h6>
+            <div className="mt-3 space-y-3">
+              {defaultAnalytics.most_issue_closed_user.map((user) => (
+                <div
+                  key={user.assignees__email}
+                  className="flex items-start justify-between gap-4 text-xs"
+                >
+                  <span className="break-all text-brand-secondary">{user.assignees__email}</span>
+                  <span className="flex-shrink-0">{user.count}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+        <div className="py-3">
+          <h1 className="px-3 text-base font-medium">Issues closed in a year</h1>
+          <LineGraph
+            data={[
+              {
+                id: "issues_closed",
+                color: "rgb(var(--color-accent))",
+                data: quarterMonthsList.map((month) => ({
+                  x: MONTHS_LIST.find((m) => m.value === month)?.label.substring(0, 3),
+                  y:
+                    defaultAnalytics.issue_completed_month_wise.find((data) => data.month === month)
+                      ?.count || 0,
+                })),
+              },
+            ]}
+            height="300px"
+            colors={(datum) => datum.color}
+            curve="monotoneX"
+            margin={{ top: 20 }}
+            enableArea
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/apps/app/components/analytics/workspace-modal.tsx b/apps/app/components/analytics/workspace-modal.tsx
new file mode 100644
index 000000000..2ceb0388e
--- /dev/null
+++ b/apps/app/components/analytics/workspace-modal.tsx
@@ -0,0 +1,70 @@
+import React, { Fragment } from "react";
+
+// headless ui
+import { Tab } from "@headlessui/react";
+// components
+import { CustomAnalytics, ScopeAndDemand } from "components/analytics";
+// icons
+import { XMarkIcon } from "@heroicons/react/24/outline";
+
+type Props = {
+  isOpen: boolean;
+  onClose: () => void;
+};
+
+const tabsList = ["Scope and Demand", "Custom Analytics"];
+
+export const AnalyticsWorkspaceModal: React.FC<Props> = ({ isOpen, onClose }) => {
+  const handleClose = () => {
+    onClose();
+  };
+
+  return (
+    <>
+      <div
+        className={`absolute z-20 h-full w-full bg-brand-surface-1 p-2 ${
+          isOpen ? "block" : "hidden"
+        }`}
+      >
+        <div className="flex h-full flex-col overflow-hidden rounded-lg border border-brand-base bg-brand-surface-1 text-left">
+          <div className="flex items-center justify-between gap-2 border-b border-b-brand-base bg-brand-sidebar p-3 text-sm">
+            <h3>Workspace Analytics</h3>
+            <div>
+              <button
+                type="button"
+                className="grid place-items-center p-1 text-brand-secondary hover:text-brand-base"
+                onClick={handleClose}
+              >
+                <XMarkIcon className="h-4 w-4" />
+              </button>
+            </div>
+          </div>
+          <Tab.Group as={Fragment}>
+            <Tab.List className="space-x-2 border-b border-brand-base px-5 py-3">
+              {tabsList.map((tab) => (
+                <Tab
+                  key={tab}
+                  className={({ selected }) =>
+                    `rounded-3xl border border-brand-base px-4 py-2 text-xs hover:bg-brand-base ${
+                      selected ? "bg-brand-base" : ""
+                    }`
+                  }
+                >
+                  {tab}
+                </Tab>
+              ))}
+            </Tab.List>
+            <Tab.Panels as={Fragment}>
+              <Tab.Panel as={Fragment}>
+                <ScopeAndDemand />
+              </Tab.Panel>
+              <Tab.Panel as={Fragment}>
+                <CustomAnalytics />
+              </Tab.Panel>
+            </Tab.Panels>
+          </Tab.Group>
+        </div>
+      </div>
+    </>
+  );
+};
diff --git a/apps/app/components/core/calendar-view/calendar-header.tsx b/apps/app/components/core/calendar-view/calendar-header.tsx
index b25dffb90..c8dd5e708 100644
--- a/apps/app/components/core/calendar-view/calendar-header.tsx
+++ b/apps/app/components/core/calendar-view/calendar-header.tsx
@@ -15,7 +15,7 @@ import {
   updateDateWithYear,
 } from "helpers/calendar.helper";
 import React from "react";
-import { monthOptions, yearOptions } from "constants/calendar";
+import { MONTHS_LIST, YEARS_LIST } from "constants/calendar";
 
 import { ICalendarRange } from "types";
 import {
@@ -77,7 +77,7 @@ export const CalendarHeader: React.FC<Props> = ({
               >
                 <Popover.Panel className="absolute top-10 left-0 z-20 flex w-full max-w-xs transform flex-col overflow-hidden rounded-[10px] bg-brand-surface-2 shadow-lg">
                   <div className="flex items-center justify-center gap-5 px-2 py-2 text-sm">
-                    {yearOptions.map((year) => (
+                    {YEARS_LIST.map((year) => (
                       <button
                         onClick={() => updateDate(updateDateWithYear(year.label, currentDate))}
                         className={` ${
@@ -91,11 +91,11 @@ export const CalendarHeader: React.FC<Props> = ({
                     ))}
                   </div>
                   <div className="grid grid-cols-4  border-t border-brand-base px-2">
-                    {monthOptions.map((month) => (
+                    {MONTHS_LIST.map((month) => (
                       <button
-                        onClick={() => updateDate(updateDateWithMonth(month.value, currentDate))}
+                        onClick={() => updateDate(updateDateWithMonth(`${month.value}`, currentDate))}
                         className={`px-2 py-2 text-xs text-brand-secondary hover:font-medium hover:text-brand-base ${
-                          isSameMonth(month.value, currentDate) ? "font-medium text-brand-base" : ""
+                          isSameMonth(`${month.value}`, currentDate) ? "font-medium text-brand-base" : ""
                         }`}
                       >
                         {month.label}
diff --git a/apps/app/components/core/calendar-view/index.ts b/apps/app/components/core/calendar-view/index.ts
index e3591e7b7..625ff1fb4 100644
--- a/apps/app/components/core/calendar-view/index.ts
+++ b/apps/app/components/core/calendar-view/index.ts
@@ -1,4 +1,4 @@
+export * from "./calendar-header";
 export * from "./calendar";
 export * from "./single-date";
 export * from "./single-issue";
-export * from "./calendar-header";
diff --git a/apps/app/components/core/feeds.tsx b/apps/app/components/core/feeds.tsx
index b5cb0bb78..bd0e4c6bf 100644
--- a/apps/app/components/core/feeds.tsx
+++ b/apps/app/components/core/feeds.tsx
@@ -79,7 +79,7 @@ const activityDetails: {
   },
   estimate_point: {
     message: "set the estimate point to",
-    icon: <PlayIcon className="h-3 w-3 -rotate-90 text-gray-500" aria-hidden="true" />,
+    icon: <PlayIcon className="h-3 w-3 -rotate-90 text-brand-secondary" aria-hidden="true" />,
   },
   target_date: {
     message: "set the due date to",
diff --git a/apps/app/components/cycles/transfer-issues.tsx b/apps/app/components/cycles/transfer-issues.tsx
index 77b1f59f1..5febdffcc 100644
--- a/apps/app/components/cycles/transfer-issues.tsx
+++ b/apps/app/components/cycles/transfer-issues.tsx
@@ -37,7 +37,7 @@ export const TransferIssues: React.FC<Props> = ({ handleClick }) => {
     ? cycleDetails.backlog_issues + cycleDetails.unstarted_issues + cycleDetails.started_issues
     : 0;
   return (
-    <div className="-mt-2 mb-4 flex items-center justify-between">
+    <div className="-mt-2 mb-4 flex items-center justify-between px-8 pt-6">
       <div className="flex items-center gap-2 text-sm text-brand-secondary">
         <ExclamationIcon height={14} width={14} className="fill-current text-brand-secondary" />
         <span>Completed cycles are not editable.</span>
diff --git a/apps/app/components/integration/jira/root.tsx b/apps/app/components/integration/jira/root.tsx
index f328b7041..6ec39a36a 100644
--- a/apps/app/components/integration/jira/root.tsx
+++ b/apps/app/components/integration/jira/root.tsx
@@ -40,7 +40,7 @@ import { IJiraImporterForm } from "types";
 const integrationWorkflowData: Array<{
   title: string;
   key: TJiraIntegrationSteps;
-  icon: React.FC<React.SVGProps<SVGSVGElement> & React.RefAttributes<SVGSVGElement>>;
+  icon: any;
 }> = [
   {
     title: "Configure",
diff --git a/apps/app/components/ui/custom-menu.tsx b/apps/app/components/ui/custom-menu.tsx
index debc9149e..dac7927b1 100644
--- a/apps/app/components/ui/custom-menu.tsx
+++ b/apps/app/components/ui/custom-menu.tsx
@@ -55,7 +55,7 @@ const CustomMenu = ({
             {ellipsis || verticalEllipsis ? (
               <Menu.Button
                 type="button"
-                className="relative grid place-items-center rounded p-1 hover:bg-brand-surface-2 focus:outline-none"
+                className="relative grid place-items-center rounded p-1 text-brand-secondary hover:bg-brand-surface-2 hover:text-brand-base focus:outline-none"
               >
                 <EllipsisHorizontalIcon
                   className={`h-4 w-4 ${verticalEllipsis ? "rotate-90" : ""}`}
diff --git a/apps/app/components/ui/graphs/bar-graph.tsx b/apps/app/components/ui/graphs/bar-graph.tsx
index c89312959..1d2b45330 100644
--- a/apps/app/components/ui/graphs/bar-graph.tsx
+++ b/apps/app/components/ui/graphs/bar-graph.tsx
@@ -13,7 +13,6 @@ type Props = {
 export const BarGraph: React.FC<Props & TGraph & Omit<BarSvgProps<any>, "height" | "width">> = ({
   indexBy,
   keys,
-  padding = 0.3,
   height = "400px",
   width = "100%",
   margin,
@@ -24,11 +23,17 @@ export const BarGraph: React.FC<Props & TGraph & Omit<BarSvgProps<any>, "height"
     <ResponsiveBar
       indexBy={indexBy}
       keys={keys}
-      margin={margin ?? DEFAULT_MARGIN}
-      padding={padding}
+      margin={{ ...DEFAULT_MARGIN, ...(margin ?? {}) }}
+      padding={rest.padding ?? rest.data.length > 7 ? 0.8 : 0.9}
+      axisBottom={{
+        tickSize: 0,
+        tickPadding: 10,
+        tickRotation: rest.data.length > 7 ? -45 : 0,
+      }}
       labelTextColor={{ from: "color", modifiers: [["darker", 1.6]] }}
-      theme={theme ?? CHARTS_THEME}
+      theme={{ ...CHARTS_THEME, ...(theme ?? {}) }}
       animate={true}
+      enableLabel={rest.enableLabel ?? false}
       {...rest}
     />
   </div>
diff --git a/apps/app/components/ui/graphs/calendar-graph.tsx b/apps/app/components/ui/graphs/calendar-graph.tsx
index 94c5782ec..940eacc70 100644
--- a/apps/app/components/ui/graphs/calendar-graph.tsx
+++ b/apps/app/components/ui/graphs/calendar-graph.tsx
@@ -14,7 +14,7 @@ export const CalendarGraph: React.FC<TGraph & Omit<CalendarSvgProps, "height" |
 }) => (
   <div style={{ height, width }}>
     <ResponsiveCalendar
-      margin={margin ?? DEFAULT_MARGIN}
+      margin={{ ...DEFAULT_MARGIN, ...(margin ?? {}) }}
       colors={
         rest.colors ?? [
           "rgba(var(--color-accent), 0.2)",
@@ -27,7 +27,7 @@ export const CalendarGraph: React.FC<TGraph & Omit<CalendarSvgProps, "height" |
       dayBorderColor={rest.dayBorderColor ?? "transparent"}
       daySpacing={rest.daySpacing ?? 5}
       monthBorderColor={rest.monthBorderColor ?? "rgb(var(--color-bg-base))"}
-      theme={theme ?? CHARTS_THEME}
+      theme={{ ...CHARTS_THEME, ...(theme ?? {}) }}
       {...rest}
     />
   </div>
diff --git a/apps/app/components/ui/graphs/line-graph.tsx b/apps/app/components/ui/graphs/line-graph.tsx
index bf2f5ac41..1e133b7aa 100644
--- a/apps/app/components/ui/graphs/line-graph.tsx
+++ b/apps/app/components/ui/graphs/line-graph.tsx
@@ -14,8 +14,8 @@ export const LineGraph: React.FC<TGraph & LineSvgProps> = ({
 }) => (
   <div style={{ height, width }}>
     <ResponsiveLine
-      margin={margin ?? DEFAULT_MARGIN}
-      theme={theme ?? CHARTS_THEME}
+      margin={{ ...DEFAULT_MARGIN, ...(margin ?? {}) }}
+      theme={{ ...CHARTS_THEME, ...(theme ?? {}) }}
       animate={true}
       {...rest}
     />
diff --git a/apps/app/components/ui/graphs/pie-graph.tsx b/apps/app/components/ui/graphs/pie-graph.tsx
index 39ab9a9e0..6f60afe2f 100644
--- a/apps/app/components/ui/graphs/pie-graph.tsx
+++ b/apps/app/components/ui/graphs/pie-graph.tsx
@@ -14,8 +14,8 @@ export const PieGraph: React.FC<TGraph & Omit<PieSvgProps<any>, "height" | "widt
 }) => (
   <div style={{ height, width }}>
     <ResponsivePie
-      margin={margin ?? DEFAULT_MARGIN}
-      theme={theme ?? CHARTS_THEME}
+      margin={{ ...DEFAULT_MARGIN, ...(margin ?? {}) }}
+      theme={{ ...CHARTS_THEME, ...(theme ?? {}) }}
       animate={true}
       {...rest}
     />
diff --git a/apps/app/components/ui/graphs/scatter-plot-graph.tsx b/apps/app/components/ui/graphs/scatter-plot-graph.tsx
index 3c51c3c78..99f42d958 100644
--- a/apps/app/components/ui/graphs/scatter-plot-graph.tsx
+++ b/apps/app/components/ui/graphs/scatter-plot-graph.tsx
@@ -10,9 +10,9 @@ export const ScatterPlotGraph: React.FC<
 > = ({ height = "400px", width = "100%", margin, theme, ...rest }) => (
   <div style={{ height, width }}>
     <ResponsiveScatterPlot
-      margin={margin ?? DEFAULT_MARGIN}
+      margin={{ ...DEFAULT_MARGIN, ...(margin ?? {}) }}
       animate={true}
-      theme={theme ?? CHARTS_THEME}
+      theme={{ ...CHARTS_THEME, ...(theme ?? {}) }}
       {...rest}
     />
   </div>
diff --git a/apps/app/components/ui/product-updates-modal.tsx b/apps/app/components/ui/product-updates-modal.tsx
index 24214b488..54dba586f 100644
--- a/apps/app/components/ui/product-updates-modal.tsx
+++ b/apps/app/components/ui/product-updates-modal.tsx
@@ -64,8 +64,8 @@ export const ProductUpdatesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
                         </span>
                       </Dialog.Title>
                       {updates && updates.length > 0 ? (
-                        updates.map((item, index: number) => (
-                          <>
+                        updates.map((item, index) => (
+                          <React.Fragment key={item.id}>
                             <div className="flex items-center gap-3 text-xs text-brand-secondary">
                               <span className="flex items-center rounded-full border border-brand-base bg-brand-surface-1 px-3 py-1.5 text-xs">
                                 {item.tag_name}
@@ -78,7 +78,7 @@ export const ProductUpdatesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
                               )}
                             </div>
                             <MarkdownRenderer markdown={item.body} />
-                          </>
+                          </React.Fragment>
                         ))
                       ) : (
                         <div className="flex h-full w-full items-center justify-center">
diff --git a/apps/app/components/workspace/sidebar-dropdown.tsx b/apps/app/components/workspace/sidebar-dropdown.tsx
index b1e23a12f..e4d3db7c5 100644
--- a/apps/app/components/workspace/sidebar-dropdown.tsx
+++ b/apps/app/components/workspace/sidebar-dropdown.tsx
@@ -133,7 +133,7 @@ export const WorkspaceSidebarDropdown = () => {
           leaveTo="transform opacity-0 scale-95"
         >
           <Menu.Items
-            className="fixed left-2 z-20 mt-1  flex w-full max-w-[17rem] origin-top-left flex-col rounded-md
+            className="fixed left-2 z-20 mt-1 flex w-full max-w-[17rem] origin-top-left flex-col rounded-md
           border border-brand-base bg-brand-surface-2 shadow-lg focus:outline-none"
           >
             <div className="flex flex-col items-start justify-start gap-3 p-3">
diff --git a/apps/app/components/workspace/sidebar-menu.tsx b/apps/app/components/workspace/sidebar-menu.tsx
index 8dc1252ad..a7ecacc32 100644
--- a/apps/app/components/workspace/sidebar-menu.tsx
+++ b/apps/app/components/workspace/sidebar-menu.tsx
@@ -1,70 +1,113 @@
 import React from "react";
+
 import { useRouter } from "next/router";
 import Link from "next/link";
-// icons
-import { GridViewIcon, AssignmentClipboardIcon, TickMarkIcon, SettingIcon } from "components/icons";
+
 // hooks
 import useTheme from "hooks/use-theme";
+// icons
+import { GridViewIcon, AssignmentClipboardIcon, TickMarkIcon, SettingIcon } from "components/icons";
+import { ChartBarIcon } from "@heroicons/react/24/outline";
 
-const workspaceLinks = (workspaceSlug: string) => [
-  {
-    icon: GridViewIcon,
-    name: "Dashboard",
-    href: `/${workspaceSlug}`,
-  },
-  {
-    icon: AssignmentClipboardIcon,
-    name: "Projects",
-    href: `/${workspaceSlug}/projects`,
-  },
-  {
-    icon: TickMarkIcon,
-    name: "My Issues",
-    href: `/${workspaceSlug}/me/my-issues`,
-  },
-  {
-    icon: SettingIcon,
-    name: "Settings",
-    href: `/${workspaceSlug}/settings`,
-  },
-];
+type Props = {
+  isAnalyticsModalOpen: boolean;
+  setAnalyticsModal: React.Dispatch<React.SetStateAction<boolean>>;
+};
 
-export const WorkspaceSidebarMenu: React.FC = () => {
-  // router
+export const WorkspaceSidebarMenu: React.FC<Props> = ({
+  isAnalyticsModalOpen,
+  setAnalyticsModal,
+}) => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
+
   // theme context
   const { collapsed: sidebarCollapse } = useTheme();
 
+  const workspaceLinks = (workspaceSlug: string) => [
+    {
+      icon: GridViewIcon,
+      name: "Dashboard",
+      href: `/${workspaceSlug}`,
+    },
+    {
+      icon: ChartBarIcon,
+      name: "Analytics",
+      highlight: isAnalyticsModalOpen,
+      onClick: () => setAnalyticsModal((prevData) => !prevData),
+    },
+    {
+      icon: AssignmentClipboardIcon,
+      name: "Projects",
+      href: `/${workspaceSlug}/projects`,
+    },
+    {
+      icon: TickMarkIcon,
+      name: "My Issues",
+      href: `/${workspaceSlug}/me/my-issues`,
+    },
+    {
+      icon: SettingIcon,
+      name: "Settings",
+      href: `/${workspaceSlug}/settings`,
+    },
+  ];
+
   return (
     <div className="flex w-full flex-col items-start justify-start gap-2 px-3 py-1">
-      {workspaceLinks(workspaceSlug as string).map((link, index) => (
-        <Link key={index} href={link.href}>
-          <a
-            className={`${
-              (
-                link.name === "Settings"
-                  ? router.asPath.includes(link.href)
-                  : router.asPath === link.href
-              )
-                ? "bg-brand-surface-2 text-brand-base"
-                : "text-brand-secondary hover:bg-brand-surface-2 hover:text-brand-secondary focus:bg-brand-surface-2 focus:text-brand-secondary"
-            } group flex w-full items-center gap-3 rounded-md p-2 text-sm font-medium outline-none ${
-              sidebarCollapse ? "justify-center" : ""
-            }`}
-          >
-            <span className="grid h-5 w-5 flex-shrink-0 place-items-center">
-              <link.icon
-                className="text-brand-secondary"
-                aria-hidden="true"
-                height="20"
-                width="20"
-              />
-            </span>
-            {!sidebarCollapse && link.name}
-          </a>
-        </Link>
-      ))}
+      {workspaceLinks(workspaceSlug as string).map((link, index) => {
+        if (link.href)
+          return (
+            <Link key={index} href={link.href}>
+              <a
+                className={`${
+                  (
+                    link.name === "Settings"
+                      ? router.asPath.includes(link.href)
+                      : router.asPath === link.href
+                  )
+                    ? "bg-brand-surface-2 text-brand-base"
+                    : "text-brand-secondary hover:bg-brand-surface-2 focus:bg-brand-surface-2"
+                } group flex w-full items-center gap-3 rounded-md p-2 text-sm font-medium outline-none ${
+                  sidebarCollapse ? "justify-center" : ""
+                }`}
+              >
+                <span className="grid h-5 w-5 flex-shrink-0 place-items-center">
+                  <link.icon
+                    className="text-brand-secondary"
+                    aria-hidden="true"
+                    height="20"
+                    width="20"
+                  />
+                </span>
+                {!sidebarCollapse && link.name}
+              </a>
+            </Link>
+          );
+        else
+          return (
+            <button
+              key={index}
+              type="button"
+              className={`group flex w-full items-center gap-3 rounded-md p-2 text-sm font-medium text-brand-secondary outline-none hover:bg-brand-surface-2 ${
+                sidebarCollapse ? "justify-center" : ""
+              } ${link.highlight ? "bg-brand-surface-2 text-brand-base" : ""}`}
+              onClick={() => {
+                if (link.onClick) link.onClick();
+              }}
+            >
+              <span className="grid h-5 w-5 flex-shrink-0 place-items-center">
+                <link.icon
+                  className="text-brand-secondary"
+                  aria-hidden="true"
+                  height="20"
+                  width="20"
+                />
+              </span>
+              {!sidebarCollapse && link.name}
+            </button>
+          );
+      })}
     </div>
   );
 };
diff --git a/apps/app/constants/analytics.ts b/apps/app/constants/analytics.ts
new file mode 100644
index 000000000..15b3f7b38
--- /dev/null
+++ b/apps/app/constants/analytics.ts
@@ -0,0 +1,146 @@
+// nivo
+import { BarDatum, ComputedDatum } from "@nivo/bar";
+// types
+import {
+  IAnalyticsData,
+  IAnalyticsParams,
+  IAnalyticsResponse,
+  TXAxisValues,
+  TYAxisValues,
+} from "types";
+import { STATE_GROUP_COLORS } from "./state";
+
+export const ANALYTICS_X_AXIS_VALUES: { value: TXAxisValues; label: string }[] = [
+  {
+    value: "state__name",
+    label: "State Name",
+  },
+  {
+    value: "state__group",
+    label: "State Group",
+  },
+  {
+    value: "priority",
+    label: "Priority",
+  },
+  {
+    value: "labels__name",
+    label: "Label",
+  },
+  {
+    value: "assignees__email",
+    label: "Assignee",
+  },
+  {
+    value: "estimate_point",
+    label: "Estimate",
+  },
+  {
+    value: "issue_cycle__cycle__name",
+    label: "Cycle",
+  },
+  {
+    value: "issue_module__module__name",
+    label: "Module",
+  },
+  {
+    value: "completed_at",
+    label: "Completed date",
+  },
+  {
+    value: "target_date",
+    label: "Due date",
+  },
+  {
+    value: "start_date",
+    label: "Start Date",
+  },
+  {
+    value: "created_at",
+    label: "Created date",
+  },
+];
+
+export const ANALYTICS_Y_AXIS_VALUES: { value: TYAxisValues; label: string }[] = [
+  {
+    value: "issue_count",
+    label: "Issue Count",
+  },
+  {
+    value: "effort",
+    label: "Effort",
+  },
+];
+
+export const convertResponseToBarGraphData = (
+  response: IAnalyticsData | undefined,
+  segmented: boolean,
+  yAxis: TYAxisValues
+): { data: BarDatum[]; xAxisKeys: string[] } => {
+  if (!response || !(typeof response === "object") || Object.keys(response).length === 0)
+    return { data: [], xAxisKeys: [] };
+
+  const data: BarDatum[] = [];
+
+  let xAxisKeys: string[] = [];
+  const yAxisKey = yAxis === "issue_count" ? "count" : "effort";
+
+  Object.keys(response).forEach((key) => {
+    const segments: { [key: string]: number } = {};
+
+    if (segmented) {
+      response[key].map((item: any) => {
+        segments[item.segment ?? "None"] = item[yAxisKey] ?? 0;
+
+        // store the segment in the xAxisKeys array
+        if (!xAxisKeys.includes(item.segment ?? "None")) xAxisKeys.push(item.segment ?? "None");
+      });
+
+      data.push({
+        name: key,
+        ...segments,
+      });
+    } else {
+      xAxisKeys = [yAxisKey];
+
+      const item = response[key][0];
+
+      data.push({
+        name: item.dimension ?? "None",
+        [yAxisKey]: item[yAxisKey] ?? 0,
+      });
+    }
+  });
+
+  return { data, xAxisKeys };
+};
+
+export const generateBarColor = (
+  value: string,
+  analytics: IAnalyticsResponse,
+  params: IAnalyticsParams,
+  type: "x_axis" | "segment"
+): string => {
+  let color: string | undefined = "rgb(var(--color-accent))";
+
+  if (!analytics) return color;
+
+  if (params[type] === "state__name" || params[type] === "labels__name")
+    color = analytics?.extras?.colors.find((c) => c.name === value)?.color;
+
+  if (params[type] === "state__group") color = STATE_GROUP_COLORS[value];
+
+  if (params[type] === "priority")
+    color =
+      value === "urgent"
+        ? "#ef4444"
+        : value === "high"
+        ? "#f97316"
+        : value === "medium"
+        ? "#eab308"
+        : value === "low"
+        ? "#22c55e"
+        : "#ced4da";
+
+  return color ?? "rgb(var(--color-accent))";
+};
diff --git a/apps/app/constants/calendar.ts b/apps/app/constants/calendar.ts
index 9b25acec0..5f1f74254 100644
--- a/apps/app/constants/calendar.ts
+++ b/apps/app/constants/calendar.ts
@@ -1,19 +1,19 @@
-export const monthOptions = [
-  { value: "1", label: "January" },
-  { value: "2", label: "February" },
-  { value: "3", label: "March" },
-  { value: "4", label: "April" },
-  { value: "5", label: "May" },
-  { value: "6", label: "June" },
-  { value: "7", label: "July" },
-  { value: "8", label: "August" },
-  { value: "9", label: "September" },
-  { value: "10", label: "October" },
-  { value: "11", label: "November" },
-  { value: "12", label: "December" },
+export const MONTHS_LIST = [
+  { value: 1, label: "January" },
+  { value: 2, label: "February" },
+  { value: 3, label: "March" },
+  { value: 4, label: "April" },
+  { value: 5, label: "May" },
+  { value: 6, label: "June" },
+  { value: 7, label: "July" },
+  { value: 8, label: "August" },
+  { value: 9, label: "September" },
+  { value: 10, label: "October" },
+  { value: 11, label: "November" },
+  { value: 12, label: "December" },
 ];
 
-export const yearOptions = [
+export const YEARS_LIST = [
   { value: "2021", label: "2021" },
   { value: "2022", label: "2022" },
   { value: "2023", label: "2023" },
diff --git a/apps/app/constants/fetch-keys.ts b/apps/app/constants/fetch-keys.ts
index 91cfc9ad3..2b511851f 100644
--- a/apps/app/constants/fetch-keys.ts
+++ b/apps/app/constants/fetch-keys.ts
@@ -1,4 +1,4 @@
-import { IJiraMetadata } from "types";
+import { IAnalyticsParams, IJiraMetadata } from "types";
 
 const paramsToKey = (params: any) => {
   const { state, priority, assignees, created_by, labels } = params;
@@ -173,3 +173,13 @@ export const PAGE_BLOCK_DETAILS = (pageId: string) => `PAGE_BLOCK_DETAILS_${page
 export const ESTIMATES_LIST = (projectId: string) => `ESTIMATES_LIST_${projectId.toUpperCase()}`;
 export const ESTIMATE_DETAILS = (estimateId: string) =>
   `ESTIMATE_DETAILS_${estimateId.toUpperCase()}`;
+
+// analytics
+export const ANALYTICS = (workspaceSlug: string, params: IAnalyticsParams) =>
+  `ANALYTICS${workspaceSlug.toUpperCase()}_${params.x_axis}_${params.y_axis}_${params.segment}_${
+    params.project
+  }`;
+export const DEFAULT_ANALYTICS = (workspaceSlug: string, params?: Partial<IAnalyticsParams>) =>
+  `DEFAULT_ANALYTICS_${workspaceSlug.toUpperCase()}_${params?.project}_${params?.cycle}_${
+    params?.module
+  }`;
diff --git a/apps/app/constants/graph.ts b/apps/app/constants/graph.ts
index 43a244413..6c2f20a3e 100644
--- a/apps/app/constants/graph.ts
+++ b/apps/app/constants/graph.ts
@@ -1,12 +1,13 @@
+// nivo
 import { Theme } from "@nivo/core";
 
 export const CHARTS_THEME: Theme = {
-  background: "rgb(var(--color-bg-base))",
-  textColor: "rgb(var(--color-text-base))",
+  background: "rgb(var(--color-bg-surface-1))",
+  textColor: "rgb(var(--color-text-secondary))",
   axis: {
     domain: {
       line: {
-        stroke: "rgb(var(--color-text-base))",
+        stroke: "rgb(var(--color-border))",
         strokeWidth: 0.5,
       },
     },
@@ -16,6 +17,7 @@ export const CHARTS_THEME: Theme = {
       background: "rgb(var(--color-bg-surface-2))",
       color: "rgb(var(--color-text-secondary))",
       fontSize: "0.8rem",
+      border: "1px solid rgb(var(--color-border))",
     },
   },
   grid: {
diff --git a/apps/app/helpers/array.helper.ts b/apps/app/helpers/array.helper.ts
index 7984c6dfa..3cd326be7 100644
--- a/apps/app/helpers/array.helper.ts
+++ b/apps/app/helpers/array.helper.ts
@@ -35,3 +35,8 @@ export const orderArrayBy = (
 };
 
 export const checkDuplicates = (array: any[]) => new Set(array).size !== array.length;
+
+export const findStringWithMostCharacters = (strings: string[]) =>
+  strings.reduce((longestString, currentString) =>
+    currentString.length > longestString.length ? currentString : longestString
+  );
diff --git a/apps/app/layouts/app-layout/app-sidebar.tsx b/apps/app/layouts/app-layout/app-sidebar.tsx
index ccdc29ad3..fc05adf78 100644
--- a/apps/app/layouts/app-layout/app-sidebar.tsx
+++ b/apps/app/layouts/app-layout/app-sidebar.tsx
@@ -11,9 +11,16 @@ import { ProjectSidebarList } from "components/project";
 export interface SidebarProps {
   toggleSidebar: boolean;
   setToggleSidebar: React.Dispatch<React.SetStateAction<boolean>>;
+  isAnalyticsModalOpen: boolean;
+  setAnalyticsModal: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
-const Sidebar: React.FC<SidebarProps> = ({ toggleSidebar, setToggleSidebar }) => {
+const Sidebar: React.FC<SidebarProps> = ({
+  toggleSidebar,
+  setToggleSidebar,
+  isAnalyticsModalOpen,
+  setAnalyticsModal,
+}) => {
   // theme
   const { collapsed: sidebarCollapse } = useTheme();
 
@@ -27,7 +34,10 @@ const Sidebar: React.FC<SidebarProps> = ({ toggleSidebar, setToggleSidebar }) =>
     >
       <div className="flex h-full flex-1 flex-col">
         <WorkspaceSidebarDropdown />
-        <WorkspaceSidebarMenu />
+        <WorkspaceSidebarMenu
+          isAnalyticsModalOpen={isAnalyticsModalOpen}
+          setAnalyticsModal={setAnalyticsModal}
+        />
         <ProjectSidebarList />
         <WorkspaceHelpSection setSidebarActive={setToggleSidebar} />
       </div>
diff --git a/apps/app/layouts/app-layout/index.tsx b/apps/app/layouts/app-layout/index.tsx
deleted file mode 100644
index 230683ed0..000000000
--- a/apps/app/layouts/app-layout/index.tsx
+++ /dev/null
@@ -1,166 +0,0 @@
-import React, { FC, useState, useEffect } from "react";
-
-import { useRouter } from "next/router";
-import Link from "next/link";
-
-import useSWR from "swr";
-
-// services
-import projectService from "services/project.service";
-// ui
-import { PrimaryButton, Spinner } from "components/ui";
-// icon
-import { LayerDiagonalIcon } from "components/icons";
-// components
-import { NotAuthorizedView, JoinProject } from "components/auth-screens";
-import { CommandPalette } from "components/command-palette";
-// local components
-import Container from "layouts/container";
-import AppSidebar from "layouts/app-layout/app-sidebar";
-import AppHeader from "layouts/app-layout/app-header";
-// types
-import { UserAuth } from "types";
-// fetch-keys
-import { PROJECT_MEMBERS } from "constants/fetch-keys";
-import SettingsNavbar from "layouts/settings-navbar";
-
-type Meta = {
-  title?: string | null;
-  description?: string | null;
-  image?: string | null;
-  url?: string | null;
-};
-
-type AppLayoutProps = {
-  meta?: Meta;
-  children: React.ReactNode;
-  noPadding?: boolean;
-  bg?: "primary" | "secondary";
-  noHeader?: boolean;
-  breadcrumbs?: JSX.Element;
-  left?: JSX.Element;
-  right?: JSX.Element;
-  settingsLayout?: boolean;
-  profilePage?: boolean;
-  memberType?: UserAuth;
-};
-
-const AppLayout: FC<AppLayoutProps> = ({
-  meta,
-  children,
-  noPadding = false,
-  bg = "primary",
-  noHeader = false,
-  breadcrumbs,
-  left,
-  right,
-  settingsLayout = false,
-  profilePage = false,
-  memberType,
-}) => {
-  // states
-  const [toggleSidebar, setToggleSidebar] = useState(false);
-
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
-  const { data: projectMembers, mutate: projectMembersMutate } = useSWR(
-    workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () => projectService.projectMembers(workspaceSlug as string, projectId as string)
-      : null,
-    {
-      shouldRetryOnError: false,
-    }
-  );
-  // flags
-  const isMember =
-    !projectId ||
-    memberType?.isOwner ||
-    memberType?.isMember ||
-    memberType?.isViewer ||
-    memberType?.isGuest;
-
-  return (
-    <Container meta={meta}>
-      <CommandPalette />
-      <div className="flex h-screen w-full overflow-x-hidden">
-        <AppSidebar toggleSidebar={toggleSidebar} setToggleSidebar={setToggleSidebar} />
-        {settingsLayout && (memberType?.isGuest || memberType?.isViewer) ? (
-          <NotAuthorizedView
-            actionButton={
-              (memberType?.isViewer || memberType?.isGuest) && projectId ? (
-                <Link href={`/${workspaceSlug}/projects/${projectId}/issues`}>
-                  <PrimaryButton className="flex items-center gap-1">
-                    <LayerDiagonalIcon height={16} width={16} color="white" /> Go to Issues
-                  </PrimaryButton>
-                </Link>
-              ) : (
-                (memberType?.isViewer || memberType?.isGuest) &&
-                workspaceSlug && (
-                  <Link href={`/${workspaceSlug}`}>
-                    <PrimaryButton className="flex items-center gap-1">
-                      <LayerDiagonalIcon height={16} width={16} color="white" /> Go to workspace
-                    </PrimaryButton>
-                  </Link>
-                )
-              )
-            }
-            type="project"
-          />
-        ) : (
-          <main className="flex h-screen w-full min-w-0 flex-col overflow-y-auto">
-            {!noHeader && (
-              <AppHeader
-                breadcrumbs={breadcrumbs}
-                left={left}
-                right={right}
-                setToggleSidebar={setToggleSidebar}
-              />
-            )}
-            {projectId && !projectMembers ? (
-              <div className="flex h-full w-full items-center justify-center">
-                <Spinner />
-              </div>
-            ) : isMember ? (
-              <div
-                className={`flex w-full flex-grow flex-col ${
-                  noPadding ? "" : settingsLayout ? "p-8 lg:px-28" : "p-8"
-                } ${
-                  bg === "primary"
-                    ? "bg-brand-base"
-                    : bg === "secondary"
-                    ? "bg-brand-base"
-                    : "bg-brand-base"
-                }`}
-              >
-                {settingsLayout && (
-                  <div className="mb-12 space-y-6">
-                    <div>
-                      <h3 className="text-3xl font-semibold text-brand-base">
-                        {profilePage ? "Profile" : projectId ? "Project" : "Workspace"} Settings
-                      </h3>
-                      <p className="mt-1 text-brand-secondary">
-                        {profilePage
-                          ? "This information will be visible to only you."
-                          : projectId
-                          ? "This information will be displayed to every member of the project."
-                          : "This information will be displayed to every member of the workspace."}
-                      </p>
-                    </div>
-                    <SettingsNavbar profilePage={profilePage} />
-                  </div>
-                )}
-                {children}
-              </div>
-            ) : (
-              <JoinProject />
-            )}
-          </main>
-        )}
-      </div>
-    </Container>
-  );
-};
-
-export default AppLayout;
diff --git a/apps/app/layouts/auth-layout/project-authorization-wrapper.tsx b/apps/app/layouts/auth-layout/project-authorization-wrapper.tsx
index 61da09887..969cace9a 100644
--- a/apps/app/layouts/auth-layout/project-authorization-wrapper.tsx
+++ b/apps/app/layouts/auth-layout/project-authorization-wrapper.tsx
@@ -13,6 +13,7 @@ import AppHeader from "layouts/app-layout/app-header";
 import AppSidebar from "layouts/app-layout/app-sidebar";
 // components
 import { NotAuthorizedView, JoinProject } from "components/auth-screens";
+import { AnalyticsWorkspaceModal } from "components/analytics";
 import { CommandPalette } from "components/command-palette";
 // ui
 import { PrimaryButton, Spinner } from "components/ui";
@@ -52,6 +53,7 @@ const ProjectAuthorizationWrapped: React.FC<Props> = ({
   right,
 }) => {
   const [toggleSidebar, setToggleSidebar] = useState(false);
+  const [analyticsModal, setAnalyticsModal] = useState(false);
 
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
@@ -66,7 +68,12 @@ const ProjectAuthorizationWrapped: React.FC<Props> = ({
     <Container meta={meta}>
       <CommandPalette />
       <div className="relative flex h-screen w-full overflow-hidden">
-        <AppSidebar toggleSidebar={toggleSidebar} setToggleSidebar={setToggleSidebar} />
+        <AppSidebar
+          toggleSidebar={toggleSidebar}
+          setToggleSidebar={setToggleSidebar}
+          isAnalyticsModalOpen={analyticsModal}
+          setAnalyticsModal={setAnalyticsModal}
+        />
 
         {loading ? (
           <div className="grid h-full w-full place-items-center p-4">
@@ -114,6 +121,12 @@ const ProjectAuthorizationWrapped: React.FC<Props> = ({
                 : "bg-brand-base"
             }`}
           >
+            {analyticsModal && (
+              <AnalyticsWorkspaceModal
+                isOpen={analyticsModal}
+                onClose={() => setAnalyticsModal(false)}
+              />
+            )}
             {!noHeader && (
               <AppHeader
                 breadcrumbs={breadcrumbs}
@@ -123,9 +136,7 @@ const ProjectAuthorizationWrapped: React.FC<Props> = ({
               />
             )}
             <div className="h-full w-full overflow-hidden">
-              <div className="relative h-full w-full overflow-x-hidden overflow-y-scroll">
-                {children}
-              </div>
+              <div className="h-full w-full overflow-x-hidden overflow-y-scroll">{children}</div>
             </div>
           </main>
         )}
diff --git a/apps/app/layouts/auth-layout/workspace-authorization-wrapper.tsx b/apps/app/layouts/auth-layout/workspace-authorization-wrapper.tsx
index 90dcbcf13..5029131cb 100644
--- a/apps/app/layouts/auth-layout/workspace-authorization-wrapper.tsx
+++ b/apps/app/layouts/auth-layout/workspace-authorization-wrapper.tsx
@@ -11,10 +11,10 @@ import workspaceServices from "services/workspace.service";
 import Container from "layouts/container";
 import AppSidebar from "layouts/app-layout/app-sidebar";
 import AppHeader from "layouts/app-layout/app-header";
-import SettingsNavbar from "layouts/settings-navbar";
 import { UserAuthorizationLayout } from "./user-authorization-wrapper";
 // components
 import { NotAuthorizedView, NotAWorkspaceMember } from "components/auth-screens";
+import { AnalyticsWorkspaceModal } from "components/analytics";
 import { CommandPalette } from "components/command-palette";
 // icons
 import { PrimaryButton, Spinner } from "components/ui";
@@ -49,19 +49,14 @@ export const WorkspaceAuthorizationLayout: React.FC<Props> = ({
   right,
 }) => {
   const [toggleSidebar, setToggleSidebar] = useState(false);
+  const [analyticsModal, setAnalyticsModal] = useState(false);
 
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
   const { data: workspaceMemberMe, error } = useSWR(
     workspaceSlug ? WORKSPACE_MEMBERS_ME(workspaceSlug as string) : null,
-    workspaceSlug ? () => workspaceServices.workspaceMemberMe(workspaceSlug.toString()) : null,
-    {
-      onErrorRetry(err, key, config, revalidate, revalidateOpts) {
-        if (err.status === 401 || err.status === 403) return;
-        revalidateOpts.retryCount = 5;
-      },
-    }
+    workspaceSlug ? () => workspaceServices.workspaceMemberMe(workspaceSlug.toString()) : null
   );
 
   if (!workspaceMemberMe && !error)
@@ -98,7 +93,12 @@ export const WorkspaceAuthorizationLayout: React.FC<Props> = ({
       <Container meta={meta}>
         <CommandPalette />
         <div className="relative flex h-screen w-full overflow-hidden">
-          <AppSidebar toggleSidebar={toggleSidebar} setToggleSidebar={setToggleSidebar} />
+          <AppSidebar
+            toggleSidebar={toggleSidebar}
+            setToggleSidebar={setToggleSidebar}
+            isAnalyticsModalOpen={analyticsModal}
+            setAnalyticsModal={setAnalyticsModal}
+          />
           {settingsLayout && (memberType?.isGuest || memberType?.isViewer) ? (
             <NotAuthorizedView
               actionButton={
@@ -122,6 +122,12 @@ export const WorkspaceAuthorizationLayout: React.FC<Props> = ({
                   : "bg-brand-base"
               }`}
             >
+              {analyticsModal && (
+                <AnalyticsWorkspaceModal
+                  isOpen={analyticsModal}
+                  onClose={() => setAnalyticsModal(false)}
+                />
+              )}
               {!noHeader && (
                 <AppHeader
                   breadcrumbs={breadcrumbs}
diff --git a/apps/app/pages/[workspaceSlug]/index.tsx b/apps/app/pages/[workspaceSlug]/index.tsx
index fd3ca88d3..6d8f3f9ed 100644
--- a/apps/app/pages/[workspaceSlug]/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/index.tsx
@@ -47,10 +47,7 @@ const WorkspacePage: NextPage = () => {
       />
       <div className="p-8">
         <div className="flex flex-col gap-8">
-          <div
-            className="text-brand-muted-1 flex flex-col justify-between gap-x-2 gap-y-6 rounded-lg bg-brand-base px-8 py-6 md:flex-row md:items-center md:py-3"
-            // style={{ background: "linear-gradient(90deg, #8e2de2 0%, #4a00e0 100%)" }}
-          >
+          <div className="text-brand-muted-1 flex flex-col justify-between gap-x-2 gap-y-6 rounded-lg border border-brand-base bg-brand-base px-8 py-6 md:flex-row md:items-center md:py-3">
             <p className="font-semibold">
               Plane is open source, support us by starring us on GitHub.
             </p>
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
index ad9c231da..ed838c189 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
@@ -19,8 +19,10 @@ import cycleServices from "services/cycles.service";
 import projectService from "services/project.service";
 // hooks
 import useToast from "hooks/use-toast";
+// components
+import { AnalyticsProjectModal } from "components/analytics";
 // ui
-import { CustomMenu } from "components/ui";
+import { CustomMenu, SecondaryButton } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // helpers
 import { truncateText } from "helpers/string.helper";
@@ -37,6 +39,7 @@ import {
 const SingleCycle: React.FC = () => {
   const [cycleIssuesListModal, setCycleIssuesListModal] = useState(false);
   const [cycleSidebar, setCycleSidebar] = useState(true);
+  const [analyticsModal, setAnalyticsModal] = useState(false);
 
   const router = useRouter();
   const { workspaceSlug, projectId, cycleId } = router.query;
@@ -148,6 +151,13 @@ const SingleCycle: React.FC = () => {
             className={`flex items-center gap-2 ${cycleSidebar ? "mr-[24rem]" : ""} duration-300`}
           >
             <IssuesFilterView />
+            <SecondaryButton
+              onClick={() => setAnalyticsModal(true)}
+              className="!py-1.5 font-normal rounded-md text-brand-secondary"
+              outline
+            >
+              Analytics
+            </SecondaryButton>
             <button
               type="button"
               className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-1 ${
@@ -160,7 +170,12 @@ const SingleCycle: React.FC = () => {
           </div>
         }
       >
-        <div className={`h-full ${cycleSidebar ? "mr-[24rem]" : ""} duration-300`}>
+        <AnalyticsProjectModal isOpen={analyticsModal} onClose={() => setAnalyticsModal(false)} />
+        <div
+          className={`h-full ${cycleSidebar ? "mr-[24rem]" : ""} ${
+            analyticsModal ? "mr-[50%]" : ""
+          } duration-300`}
+        >
           <IssuesView
             type="cycle"
             openIssuesListModal={openIssuesListModal}
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/index.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/index.tsx
index fb5ffbc6b..e48cd1f90 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/index.tsx
@@ -1,3 +1,5 @@
+import { useState } from "react";
+
 import { useRouter } from "next/router";
 
 import useSWR from "swr";
@@ -12,8 +14,9 @@ import { IssueViewContextProvider } from "contexts/issue-view.context";
 import { truncateText } from "helpers/string.helper";
 // components
 import { IssuesFilterView, IssuesView } from "components/core";
+import { AnalyticsProjectModal } from "components/analytics";
 // ui
-import { PrimaryButton } from "components/ui";
+import { PrimaryButton, SecondaryButton } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
 import { PlusIcon } from "@heroicons/react/24/outline";
@@ -23,6 +26,8 @@ import type { NextPage } from "next";
 import { PROJECT_DETAILS } from "constants/fetch-keys";
 
 const ProjectIssues: NextPage = () => {
+  const [analyticsModal, setAnalyticsModal] = useState(false);
+
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
@@ -47,6 +52,13 @@ const ProjectIssues: NextPage = () => {
         right={
           <div className="flex items-center gap-2">
             <IssuesFilterView />
+            <SecondaryButton
+              onClick={() => setAnalyticsModal(true)}
+              className="!py-1.5 rounded-md font-normal text-brand-secondary"
+              outline
+            >
+              Analytics
+            </SecondaryButton>
             <PrimaryButton
               className="flex items-center gap-2"
               onClick={() => {
@@ -60,6 +72,7 @@ const ProjectIssues: NextPage = () => {
           </div>
         }
       >
+        <AnalyticsProjectModal isOpen={analyticsModal} onClose={() => setAnalyticsModal(false)} />
         <IssuesView />
       </ProjectAuthorizationWrapper>
     </IssueViewContextProvider>
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx
index 6473aa2a7..d3ef97bd8 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx
@@ -24,8 +24,9 @@ import { IssueViewContextProvider } from "contexts/issue-view.context";
 // components
 import { ExistingIssuesListModal, IssuesFilterView, IssuesView } from "components/core";
 import { ModuleDetailsSidebar } from "components/modules";
+import { AnalyticsProjectModal } from "components/analytics";
 // ui
-import { CustomMenu, EmptySpace, EmptySpaceItem, Spinner } from "components/ui";
+import { CustomMenu, EmptySpace, EmptySpaceItem, SecondaryButton, Spinner } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // helpers
 import { truncateText } from "helpers/string.helper";
@@ -43,6 +44,7 @@ import {
 const SingleModule: React.FC = () => {
   const [moduleIssuesListModal, setModuleIssuesListModal] = useState(false);
   const [moduleSidebar, setModuleSidebar] = useState(true);
+  const [analyticsModal, setAnalyticsModal] = useState(false);
 
   const router = useRouter();
   const { workspaceSlug, projectId, moduleId } = router.query;
@@ -152,6 +154,13 @@ const SingleModule: React.FC = () => {
             className={`flex items-center gap-2 ${moduleSidebar ? "mr-[24rem]" : ""} duration-300`}
           >
             <IssuesFilterView />
+            <SecondaryButton
+              onClick={() => setAnalyticsModal(true)}
+              className="!py-1.5 font-normal rounded-md text-brand-secondary"
+              outline
+            >
+              Analytics
+            </SecondaryButton>
             <button
               type="button"
               className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-1 ${
@@ -164,6 +173,7 @@ const SingleModule: React.FC = () => {
           </div>
         }
       >
+        <AnalyticsProjectModal isOpen={analyticsModal} onClose={() => setAnalyticsModal(false)} />
         {moduleIssues ? (
           moduleIssues.length > 0 ? (
             <div className={`h-full ${moduleSidebar ? "mr-[24rem]" : ""} duration-300`}>
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx
index 4d6f4288b..98579b6ca 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx
@@ -113,7 +113,7 @@ const ProjectModules: NextPage = () => {
           />
         )
       ) : (
-        <Loader className="grid grid-cols-3 gap-4">
+        <Loader className="grid grid-cols-3 gap-4 p-8">
           <Loader.Item height="100px" />
           <Loader.Item height="100px" />
           <Loader.Item height="100px" />
diff --git a/apps/app/services/analytics.service.ts b/apps/app/services/analytics.service.ts
new file mode 100644
index 000000000..7cdb5860c
--- /dev/null
+++ b/apps/app/services/analytics.service.ts
@@ -0,0 +1,59 @@
+// services
+import APIService from "services/api.service";
+// types
+import {
+  IAnalyticsParams,
+  IAnalyticsResponse,
+  IDefaultAnalyticsResponse,
+  IExportAnalyticsFormData,
+  ISaveAnalyticsFormData,
+} from "types";
+
+const { NEXT_PUBLIC_API_BASE_URL } = process.env;
+
+class AnalyticsServices extends APIService {
+  constructor() {
+    super(NEXT_PUBLIC_API_BASE_URL || "http://localhost:8000");
+  }
+
+  async getAnalytics(workspaceSlug: string, params: IAnalyticsParams): Promise<IAnalyticsResponse> {
+    return this.get(`/api/workspaces/${workspaceSlug}/analytics/`, {
+      params,
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getDefaultAnalytics(
+    workspaceSlug: string,
+    params?: Partial<IAnalyticsParams>
+  ): Promise<IDefaultAnalyticsResponse> {
+    return this.get(`/api/workspaces/${workspaceSlug}/default-analytics/`, {
+      params,
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async saveAnalytics(workspaceSlug: string, data: ISaveAnalyticsFormData): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/analytic-view/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async exportAnalytics(workspaceSlug: string, data: IExportAnalyticsFormData): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/export-analytics/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
+
+export default new AnalyticsServices();
diff --git a/apps/app/types/analytics.d.ts b/apps/app/types/analytics.d.ts
new file mode 100644
index 000000000..c02f85cf7
--- /dev/null
+++ b/apps/app/types/analytics.d.ts
@@ -0,0 +1,83 @@
+export interface IAnalyticsResponse {
+  total: number;
+  distribution: IAnalyticsData;
+  extras: {
+    colors: IAnalyticsExtra[];
+  };
+}
+
+export interface IAnalyticsData {
+  [key: string]: {
+    dimension: string | null;
+    segment?: string;
+    count?: number;
+    effort?: number | null;
+  }[];
+}
+
+export interface IAnalyticsExtra {
+  name: string;
+  color: string;
+}
+
+export type TXAxisValues =
+  | "state__name"
+  | "state__group"
+  | "labels__name"
+  | "assignees__email"
+  | "estimate_point"
+  | "issue_cycle__cycle__name"
+  | "issue_module__module__name"
+  | "priority"
+  | "start_date"
+  | "target_date"
+  | "created_at"
+  | "completed_at";
+
+export type TYAxisValues = "issue_count" | "effort";
+
+export interface IAnalyticsParams {
+  x_axis: TXAxisValues;
+  y_axis: TYAxisValues;
+  segment?: TXAxisValues | null;
+  project?: string | null;
+  cycle?: string | null;
+  module?: string | null;
+}
+
+export interface ISaveAnalyticsFormData {
+  name: string;
+  description: string;
+  query_dict: IExportAnalyticsFormData;
+}
+export interface IExportAnalyticsFormData {
+  x_axis: TXAxisValues;
+  y_axis: TYAxisValues;
+  segment?: TXAxisValues | null;
+  project?: string[];
+}
+
+export interface IDefaultAnalyticsResponse {
+  issue_completed_month_wise: { month: number; count: number }[];
+  most_issue_closed_user: {
+    assignees__avatar: string | null;
+    assignees__email: string;
+    count: number;
+  }[];
+  most_issue_created_user: {
+    assignees__avatar: string | null;
+    assignees__email: string;
+    count: number;
+  }[];
+  open_estimate_sum: number;
+  open_issues: number;
+  open_issues_classified: { state_group: string; state_count: number }[];
+  pending_issue_user: {
+    assignees__avatar: string | null;
+    assignees__email: string;
+    count: number;
+  }[];
+  total_estimate_sum: number;
+  total_issues: number;
+  total_issues_classified: { state_group: string; state_count: number }[];
+}
diff --git a/apps/app/types/index.d.ts b/apps/app/types/index.d.ts
index 0a161932e..d00dd6d49 100644
--- a/apps/app/types/index.d.ts
+++ b/apps/app/types/index.d.ts
@@ -12,6 +12,7 @@ export * from "./pages";
 export * from "./ai";
 export * from "./estimate";
 export * from "./importer";
+export * from "./analytics";
 export * from "./calendar";
 
 export type NestedKeyOf<ObjectType extends object> = {

From 44d49b55004d1b486a45f7414b103e50bf053f9b Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Thu, 11 May 2023 18:03:37 +0530
Subject: [PATCH 13/81] style: page detail  (#1030)

* style: page detail header styling

* style: page detail ui

* style: page block, create block styling
---
 apps/app/components/pages/create-block.tsx    | 113 ++++
 .../pages/create-update-block-inline.tsx      |   8 +-
 apps/app/components/pages/index.ts            |   1 +
 .../components/pages/single-page-block.tsx    |  45 +-
 .../projects/[projectId]/pages/[pageId].tsx   | 504 +++++++++---------
 5 files changed, 386 insertions(+), 285 deletions(-)
 create mode 100644 apps/app/components/pages/create-block.tsx

diff --git a/apps/app/components/pages/create-block.tsx b/apps/app/components/pages/create-block.tsx
new file mode 100644
index 000000000..d8b54a4f8
--- /dev/null
+++ b/apps/app/components/pages/create-block.tsx
@@ -0,0 +1,113 @@
+import React, { KeyboardEventHandler, useCallback, useEffect, useState } from "react";
+
+import { useRouter } from "next/router";
+
+import { mutate } from "swr";
+
+import { PaperAirplaneIcon } from "@heroicons/react/24/outline";
+
+// react-hook-form
+import { useForm } from "react-hook-form";
+// services
+import pagesService from "services/pages.service";
+
+// hooks
+import useToast from "hooks/use-toast";
+// ui
+import { TextArea } from "components/ui";
+// types
+import { IPageBlock } from "types";
+// fetch-keys
+import { PAGE_BLOCKS_LIST } from "constants/fetch-keys";
+
+const defaultValues = {
+  name: "",
+};
+
+export const CreateBlock = () => {
+  const [blockTitle, setBlockTitle] = useState("");
+
+  const router = useRouter();
+  const { workspaceSlug, projectId, pageId } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const {
+    handleSubmit,
+    register,
+    control,
+    watch,
+    setValue,
+    setFocus,
+    reset,
+    formState: { isSubmitting },
+  } = useForm<IPageBlock>({
+    defaultValues,
+  });
+
+  const createPageBlock = async () => {
+    if (!workspaceSlug || !projectId || !pageId) return;
+
+    await pagesService
+      .createPageBlock(workspaceSlug as string, projectId as string, pageId as string, {
+        name: watch("name"),
+      })
+      .then((res) => {
+        mutate<IPageBlock[]>(
+          PAGE_BLOCKS_LIST(pageId as string),
+          (prevData) => [...(prevData as IPageBlock[]), res],
+          false
+        );
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Page could not be created. Please try again.",
+        });
+      });
+
+    reset();
+  };
+
+  const handleKeyDown = (e: any) => {
+    const keyCombination =
+      ((e.ctrlKey || e.metaKey) && e.key === "Enter") || (e.shiftKey && e.key === "Enter");
+
+    if (e.key === "Enter" && !keyCombination) {
+      if (watch("name") && watch("name") !== "") {
+        e.preventDefault();
+        createPageBlock();
+        reset();
+      }
+    }
+  };
+
+  return (
+    <div className="relative">
+      <form
+        className="flex flex-col items-center justify-between rounded border-2 border-brand-base p-2"
+        onSubmit={handleSubmit(createPageBlock)}
+      >
+        <div className="flex min-h-[75px] w-full">
+          <TextArea
+            id="name"
+            name="name"
+            placeholder="Title"
+            register={register}
+            className="min-h-10 block max-h-24 w-full resize-none overflow-hidden border-none bg-transparent px-1 py-1 text-sm font-medium"
+            role="textbox"
+            onKeyDown={handleKeyDown}
+            maxLength={255}
+          />
+        </div>
+
+        <div className="flex w-full items-center justify-end gap-2 p-1">
+          <button type="submit">
+            <PaperAirplaneIcon className="h-5 w-5 text-brand-base" />
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+};
diff --git a/apps/app/components/pages/create-update-block-inline.tsx b/apps/app/components/pages/create-update-block-inline.tsx
index ce96deedb..d62486388 100644
--- a/apps/app/components/pages/create-update-block-inline.tsx
+++ b/apps/app/components/pages/create-update-block-inline.tsx
@@ -18,7 +18,7 @@ import useToast from "hooks/use-toast";
 // components
 import { GptAssistantModal } from "components/core";
 // ui
-import { Input, Loader, PrimaryButton, SecondaryButton } from "components/ui";
+import { Loader, PrimaryButton, SecondaryButton, TextArea } from "components/ui";
 // types
 import { IPageBlock } from "types";
 // fetch-keys
@@ -253,17 +253,17 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
   return (
     <div className="relative">
       <form
-        className="divide-y divide-brand-base rounded-[10px] border border-brand-base shadow"
+        className="divide-y divide-brand-base rounded border border-brand-base shadow"
         onSubmit={data ? handleSubmit(updatePageBlock) : handleSubmit(createPageBlock)}
       >
         <div className="pt-2">
           <div className="flex justify-between">
-            <Input
+            <TextArea
               id="name"
               name="name"
               placeholder="Title"
               register={register}
-              className="min-h-10 block w-full resize-none overflow-hidden border-none bg-transparent py-1 text-lg font-medium"
+              className="min-h-10 font medium block w-full resize-none overflow-hidden border-none bg-transparent py-1 text-base"
               autoComplete="off"
               maxLength={255}
             />
diff --git a/apps/app/components/pages/index.ts b/apps/app/components/pages/index.ts
index ce2692162..3d34ea8d5 100644
--- a/apps/app/components/pages/index.ts
+++ b/apps/app/components/pages/index.ts
@@ -7,3 +7,4 @@ export * from "./pages-view";
 export * from "./single-page-block";
 export * from "./single-page-detailed-item";
 export * from "./single-page-list-item";
+export * from "./create-block";
diff --git a/apps/app/components/pages/single-page-block.tsx b/apps/app/components/pages/single-page-block.tsx
index cdfbc84f9..94d8679e2 100644
--- a/apps/app/components/pages/single-page-block.tsx
+++ b/apps/app/components/pages/single-page-block.tsx
@@ -20,7 +20,7 @@ import useOutsideClickDetector from "hooks/use-outside-click-detector";
 import { GptAssistantModal } from "components/core";
 import { CreateUpdateBlockInline } from "components/pages";
 // ui
-import { CustomMenu } from "components/ui";
+import { CustomMenu, TextArea } from "components/ui";
 // icons
 import { LayerDiagonalIcon } from "components/icons";
 import { ArrowPathIcon, LinkIcon } from "@heroicons/react/20/solid";
@@ -274,12 +274,7 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index
       {(provided, snapshot) => (
         <>
           {createBlockForm ? (
-            <div
-              className="mb-4 pt-4"
-              ref={provided.innerRef}
-              {...provided.draggableProps}
-              {...provided.dragHandleProps}
-            >
+            <div ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
               <CreateUpdateBlockInline
                 handleAiAssistance={handleAiAssistance}
                 handleClose={() => setCreateBlockForm(false)}
@@ -290,15 +285,15 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index
             </div>
           ) : (
             <div
-              className={`group relative text-brand-secondary ${
-                snapshot.isDragging ? "rounded-[10px] bg-brand-surface-2 p-6 shadow" : ""
+              className={`group relative w-full rounded bg-brand-surface-2 text-brand-secondary ${
+                snapshot.isDragging ? "bg-brand-base p-4 shadow" : ""
               }`}
               ref={provided.innerRef}
               {...provided.draggableProps}
             >
               <button
                 type="button"
-                className="absolute top-4 -left-4 hidden rounded p-0.5 hover:bg-brand-surface-2 group-hover:!flex"
+                className="absolute top-4 -left-0 hidden rounded p-0.5 hover:bg-brand-surface-2 group-hover:!flex"
                 {...provided.dragHandleProps}
               >
                 <EllipsisVerticalIcon className="h-[18px]" />
@@ -306,12 +301,12 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index
               </button>
               <div
                 ref={actionSectionRef}
-                className={`absolute top-4 right-0 hidden items-center gap-2 pl-4 group-hover:!flex ${
+                className={`absolute top-4 right-2 hidden items-center gap-2 bg-brand-surface-2 pl-4 group-hover:!flex ${
                   isMenuActive ? "!flex" : ""
                 }`}
               >
                 {block.issue && block.sync && (
-                  <div className="flex flex-shrink-0 cursor-default items-center gap-1 rounded bg-brand-surface-2 py-1 px-1.5 text-xs">
+                  <div className="flex flex-shrink-0 cursor-default items-center gap-1 rounded py-1 px-1.5 text-xs">
                     {isSyncing ? (
                       <ArrowPathIcon className="h-3 w-3 animate-spin" />
                     ) : (
@@ -322,8 +317,8 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index
                 )}
                 <button
                   type="button"
-                  className={`flex items-center gap-1 rounded bg-brand-surface-1 px-1.5 py-1 text-xs hover:bg-brand-surface-2 ${
-                    iAmFeelingLucky ? "cursor-wait bg-brand-surface-2" : ""
+                  className={`flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-brand-surface-1 ${
+                    iAmFeelingLucky ? "cursor-wait" : ""
                   }`}
                   onClick={handleAutoGenerateDescription}
                   disabled={iAmFeelingLucky}
@@ -338,7 +333,7 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index
                 </button>
                 <button
                   type="button"
-                  className="-mr-2 flex items-center gap-1 rounded bg-brand-surface-1 px-1.5 py-1 text-xs hover:bg-brand-surface-2"
+                  className="-mr-2 flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-brand-surface-1"
                   onClick={() => setGptAssistantModal((prevData) => !prevData)}
                 >
                   <SparklesIcon className="h-4 w-4" />
@@ -346,7 +341,7 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index
                 </button>
                 <button
                   type="button"
-                  className="-mr-2 flex items-center gap-1 rounded bg-brand-surface-1 px-1.5 py-1 text-xs hover:bg-brand-surface-2"
+                  className="-mr-2 flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-brand-surface-1"
                   onClick={() => setCreateBlockForm(true)}
                 >
                   <PencilIcon className="h-3.5 w-3.5" />
@@ -354,7 +349,7 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index
                 <CustomMenu
                   customButton={
                     <button
-                      className="flex w-full cursor-pointer items-center justify-between gap-1 rounded bg-brand-surface-1 px-2.5 py-1 text-left text-xs duration-300 hover:bg-brand-surface-2"
+                      className="flex w-full cursor-pointer items-center justify-between gap-1 rounded px-2.5 py-1 text-left text-xs duration-300 hover:bg-brand-surface-1"
                       onClick={() => setIsMenuActive(!isMenuActive)}
                     >
                       <BoltIcon className="h-4.5 w-3.5" />
@@ -392,16 +387,12 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index
                   </CustomMenu.MenuItem>
                 </CustomMenu>
               </div>
-              <div
-                className={`flex items-start gap-2 ${
-                  snapshot.isDragging ? "" : "border-brand-base py-4 [&:not(:last-child)]:border-b"
-                }`}
-              >
+              <div className={`flex items-start gap-2 px-3 ${snapshot.isDragging ? "" : "py-4"}`}>
                 <div
                   className="w-full cursor-pointer overflow-hidden break-all px-4"
                   onClick={() => setCreateBlockForm(true)}
                 >
-                  <div className="flex">
+                  <div className="flex items-center">
                     {block.issue && (
                       <div className="mr-1.5 flex">
                         <Link
@@ -414,9 +405,11 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index
                         </Link>
                       </div>
                     )}
-                    <h3 className="max-w-[1000px] overflow-hidden text-sm text-brand-base">
-                      {block.name}
-                    </h3>
+                    <TextArea
+                      name="blockName"
+                      value={block.name}
+                      className="min-h-5 block w-full resize-none overflow-hidden border-none bg-transparent px-0 py-0 text-sm text-brand-base"
+                    />
                   </div>
                   {block?.description_stripped.length > 0 && (
                     <p className="mt-3 h-5 truncate text-sm font-normal text-brand-secondary">
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
index e6e37e068..30e65a7a0 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
@@ -25,6 +25,7 @@ import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
 // components
 import { CreateUpdateBlockInline, SinglePageBlock } from "components/pages";
 import { CreateLabelModal } from "components/labels";
+import { CreateBlock } from "components/pages/create-block";
 // ui
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 import { CustomSearchSelect, Loader, PrimaryButton, TextArea, Tooltip } from "components/ui";
@@ -287,18 +288,6 @@ const SinglePage: NextPage = () => {
     });
   }, [reset, pageDetails]);
 
-  useEffect(() => {
-    const openCreateBlockForm = (e: KeyboardEvent) => {
-      if (e.shiftKey && e.key === "Enter") handleNewBlock();
-    };
-
-    window.addEventListener("keydown", openCreateBlockForm);
-
-    return () => {
-      window.removeEventListener("keydown", openCreateBlockForm);
-    };
-  }, [handleNewBlock, createBlockForm]);
-
   return (
     <ProjectAuthorizationWrapper
       meta={{
@@ -312,254 +301,259 @@ const SinglePage: NextPage = () => {
       }
     >
       {pageDetails ? (
-        <div className="space-y-4 p-4">
-          <div className="flex items-center justify-between gap-2 px-3">
-            <button
-              type="button"
-              className="flex items-center gap-2 text-sm text-brand-secondary"
-              onClick={() => router.back()}
-            >
-              <ArrowLeftIcon className="h-4 w-4" />
-              Back
-            </button>
-            <div className="flex flex-wrap gap-1">
-              {pageDetails.labels.length > 0 ? (
-                <>
-                  {pageDetails.labels.map((labelId) => {
-                    const label = labels?.find((label) => label.id === labelId);
-
-                    if (!label) return;
-
-                    return (
-                      <div
-                        key={label.id}
-                        className="group flex cursor-pointer items-center gap-1 rounded-2xl border border-brand-base px-2 py-0.5 text-xs hover:border-red-500 hover:bg-red-50"
-                        onClick={() => {
-                          const updatedLabels = pageDetails.labels.filter((l) => l !== labelId);
-                          partialUpdatePage({ labels_list: updatedLabels });
-                        }}
-                        style={{
-                          backgroundColor: `${
-                            label?.color && label.color !== "" ? label.color : "#000000"
-                          }20`,
-                        }}
-                      >
-                        <span
-                          className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
-                          style={{
-                            backgroundColor:
-                              label?.color && label.color !== "" ? label.color : "#000000",
-                          }}
-                        />
-                        {label.name}
-                        <XMarkIcon className="h-2.5 w-2.5 group-hover:text-red-500" />
-                      </div>
-                    );
-                  })}
-                  <CustomSearchSelect
-                    customButton={
-                      <button
-                        type="button"
-                        className="flex items-center gap-1 rounded-md bg-brand-surface-2 p-1.5 text-xs"
-                      >
-                        <PlusIcon className="h-3.5 w-3.5" />
-                      </button>
-                    }
-                    value={pageDetails.labels}
-                    onChange={(val: string[]) => partialUpdatePage({ labels_list: val })}
-                    options={options}
-                    multiple
-                    noChevron
-                  />
-                </>
-              ) : (
-                <CustomSearchSelect
-                  customButton={
-                    <button
-                      type="button"
-                      className="flex items-center gap-1 rounded-md bg-brand-surface-2 px-3 py-1.5 text-xs"
-                    >
-                      <PlusIcon className="h-3 w-3" />
-                      Add label
-                    </button>
-                  }
-                  value={pageDetails.labels}
-                  onChange={(val: string[]) => partialUpdatePage({ labels_list: val })}
-                  footerOption={
-                    <button
-                      type="button"
-                      className="flex w-full select-none items-center rounded py-2 px-1 hover:bg-brand-surface-2"
-                      onClick={() => {
-                        setLabelModal(true);
-                      }}
-                    >
-                      <span className="flex items-center justify-start gap-1 text-brand-secondary">
-                        <PlusIcon className="h-4 w-4" aria-hidden="true" />
-                        <span>Create New Label</span>
-                      </span>
-                    </button>
-                  }
-                  options={options}
-                  multiple
-                  noChevron
-                />
-              )}
-            </div>
-            <div className="flex items-center gap-6 text-brand-secondary">
-              <Tooltip
-                tooltipContent={`Last updated at ${renderShortTime(
-                  pageDetails.updated_at
-                )} on ${renderShortDate(pageDetails.updated_at)}`}
-              >
-                <p className="text-sm">{renderShortTime(pageDetails.updated_at)}</p>
-              </Tooltip>
-              <button className="flex items-center gap-2" onClick={handleCopyText}>
-                <LinkIcon className="h-4 w-4" />
-              </button>
-              <div className="flex-shrink-0">
-                <Popover className="relative grid place-items-center">
-                  {({ open }) => (
-                    <>
-                      <Popover.Button
-                        type="button"
-                        className={`group inline-flex items-center outline-none ${
-                          open ? "text-brand-base" : "text-brand-secondary"
-                        }`}
-                      >
-                        {watch("color") && watch("color") !== "" ? (
-                          <span
-                            className="h-4 w-4 rounded"
-                            style={{
-                              backgroundColor: watch("color") ?? "black",
-                            }}
-                          />
-                        ) : (
-                          <ColorPalletteIcon height={16} width={16} />
-                        )}
-                      </Popover.Button>
-
-                      <Transition
-                        as={React.Fragment}
-                        enter="transition ease-out duration-200"
-                        enterFrom="opacity-0 translate-y-1"
-                        enterTo="opacity-100 translate-y-0"
-                        leave="transition ease-in duration-150"
-                        leaveFrom="opacity-100 translate-y-0"
-                        leaveTo="opacity-0 translate-y-1"
-                      >
-                        <Popover.Panel className="absolute top-full right-0 z-20 mt-1 max-w-xs px-2 sm:px-0">
-                          <TwitterPicker
-                            color={pageDetails.color}
-                            onChange={(val) => partialUpdatePage({ color: val.hex })}
-                          />
-                        </Popover.Panel>
-                      </Transition>
-                    </>
-                  )}
-                </Popover>
-              </div>
-              {pageDetails.created_by === user?.id && (
-                <Tooltip
-                  tooltipContent={`${
-                    pageDetails.access
-                      ? "This page is only visible to you."
-                      : "This page can be viewed by anyone in the project."
-                  }`}
-                  theme="dark"
-                >
-                  {pageDetails.access ? (
-                    <button onClick={() => partialUpdatePage({ access: 0 })} className="z-10">
-                      <LockClosedIcon className="h-4 w-4" />
-                    </button>
-                  ) : (
-                    <button
-                      onClick={() => partialUpdatePage({ access: 1 })}
-                      type="button"
-                      className="z-10"
-                    >
-                      <LockOpenIcon className="h-4 w-4" />
-                    </button>
-                  )}
-                </Tooltip>
-              )}
-              {pageDetails.is_favorite ? (
-                <button onClick={handleRemoveFromFavorites} className="z-10">
-                  <StarIcon className="h-4 w-4 text-orange-400" fill="#f6ad55" />
-                </button>
-              ) : (
-                <button onClick={handleAddToFavorites} type="button" className="z-10">
-                  <StarIcon className="h-4 w-4" />
-                </button>
-              )}
-            </div>
-          </div>
-          <div className="px-4 pt-6">
-            <TextArea
-              id="name"
-              name="name"
-              placeholder="Page Title"
-              value={watch("name")}
-              onBlur={handleSubmit(updatePage)}
-              onChange={(e) => setValue("name", e.target.value)}
-              required={true}
-              className="min-h-10 block w-full resize-none overflow-hidden rounded border-none bg-transparent px-3 py-2 text-2xl font-semibold outline-none ring-0 placeholder:text-[#858E96]"
-              role="textbox"
-            />
-          </div>
-          <div className="px-7">
-            {pageBlocks ? (
-              <>
-                <DragDropContext onDragEnd={handleOnDragEnd}>
-                  {pageBlocks.length !== 0 && (
-                    <StrictModeDroppable droppableId="blocks-list">
-                      {(provided) => (
-                        <div ref={provided.innerRef} {...provided.droppableProps}>
-                          {pageBlocks.map((block, index) => (
-                            <SinglePageBlock
-                              key={block.id}
-                              block={block}
-                              projectDetails={projectDetails}
-                              index={index}
-                            />
-                          ))}
-                          {provided.placeholder}
-                        </div>
-                      )}
-                    </StrictModeDroppable>
-                  )}
-                </DragDropContext>
-                {!createBlockForm && (
+        <div className="flex h-full flex-col justify-between space-y-4 overflow-hidden p-4">
+          <div className="h-full w-full overflow-y-auto">
+            <div className="flex items-center justify-between gap-2">
+              <div className="flex w-full flex-col gap-2">
+                <div className="flex w-full items-center gap-2">
                   <button
                     type="button"
-                    className="mt-4 flex items-center gap-1 rounded-full bg-brand-base px-2 py-1 pr-2.5 text-xs hover:bg-brand-surface-2"
-                    onClick={handleNewBlock}
+                    className="flex items-center gap-2 text-sm text-brand-secondary"
+                    onClick={() => router.back()}
                   >
-                    <PlusIcon className="h-3 w-3" />
-                    Add new block
+                    <ArrowLeftIcon className="h-4 w-4" />
                   </button>
-                )}
-                {createBlockForm && (
-                  <div className="mt-4" ref={scrollToRef}>
-                    <CreateUpdateBlockInline
-                      handleClose={() => setCreateBlockForm(false)}
-                      focus="name"
-                    />
-                  </div>
-                )}
-                {labelModal && typeof projectId === "string" && (
-                  <CreateLabelModal
-                    isOpen={labelModal}
-                    handleClose={() => setLabelModal(false)}
-                    projectId={projectId}
+
+                  <TextArea
+                    id="name"
+                    name="name"
+                    placeholder="Page Title"
+                    value={watch("name")}
+                    onBlur={handleSubmit(updatePage)}
+                    onChange={(e) => setValue("name", e.target.value)}
+                    required={true}
+                    className="min-h-10 block w-full resize-none overflow-hidden rounded border-none bg-transparent px-3 py-2 text-xl font-semibold outline-none ring-0 placeholder:text-[#858E96]"
+                    role="textbox"
                   />
-                )}
-              </>
-            ) : (
-              <Loader>
-                <Loader.Item height="150px" />
-                <Loader.Item height="150px" />
-              </Loader>
-            )}
+                </div>
+
+                <div className="flex w-full flex-wrap gap-1">
+                  {pageDetails.labels.length > 0 ? (
+                    <>
+                      {pageDetails.labels.map((labelId) => {
+                        const label = labels?.find((label) => label.id === labelId);
+
+                        if (!label) return;
+
+                        return (
+                          <div
+                            key={label.id}
+                            className="group flex cursor-pointer items-center gap-1 rounded-2xl border border-brand-base px-2 py-0.5 text-xs hover:border-red-500 hover:bg-red-50"
+                            onClick={() => {
+                              const updatedLabels = pageDetails.labels.filter((l) => l !== labelId);
+                              partialUpdatePage({ labels_list: updatedLabels });
+                            }}
+                            style={{
+                              backgroundColor: `${
+                                label?.color && label.color !== "" ? label.color : "#000000"
+                              }20`,
+                            }}
+                          >
+                            <span
+                              className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
+                              style={{
+                                backgroundColor:
+                                  label?.color && label.color !== "" ? label.color : "#000000",
+                              }}
+                            />
+                            {label.name}
+                            <XMarkIcon className="h-2.5 w-2.5 group-hover:text-red-500" />
+                          </div>
+                        );
+                      })}
+                      <CustomSearchSelect
+                        customButton={
+                          <button
+                            type="button"
+                            className="flex items-center gap-1 rounded-sm bg-brand-surface-2 p-1.5 text-xs"
+                          >
+                            <PlusIcon className="h-3.5 w-3.5" />
+                          </button>
+                        }
+                        value={pageDetails.labels}
+                        onChange={(val: string[]) => partialUpdatePage({ labels_list: val })}
+                        options={options}
+                        multiple
+                        noChevron
+                      />
+                    </>
+                  ) : (
+                    <CustomSearchSelect
+                      customButton={
+                        <button
+                          type="button"
+                          className="flex items-center gap-1 rounded-sm bg-brand-surface-2 px-3 py-1.5 text-xs"
+                        >
+                          <PlusIcon className="h-3 w-3" />
+                          Add label
+                        </button>
+                      }
+                      value={pageDetails.labels}
+                      onChange={(val: string[]) => partialUpdatePage({ labels_list: val })}
+                      footerOption={
+                        <button
+                          type="button"
+                          className="flex w-full select-none items-center rounded py-2 px-1 hover:bg-brand-surface-2"
+                          onClick={() => {
+                            setLabelModal(true);
+                          }}
+                        >
+                          <span className="flex items-center justify-start gap-1 text-brand-secondary">
+                            <PlusIcon className="h-4 w-4" aria-hidden="true" />
+                            <span>Create New Label</span>
+                          </span>
+                        </button>
+                      }
+                      options={options}
+                      multiple
+                      noChevron
+                    />
+                  )}
+                </div>
+              </div>
+              <div className="flex items-center">
+                <div className="flex items-center gap-6 text-brand-secondary">
+                  <Tooltip
+                    tooltipContent={`Last updated at ${renderShortTime(
+                      pageDetails.updated_at
+                    )} on ${renderShortDate(pageDetails.updated_at)}`}
+                  >
+                    <p className="text-sm">{renderShortTime(pageDetails.updated_at)}</p>
+                  </Tooltip>
+                  <button className="flex items-center gap-2" onClick={handleCopyText}>
+                    <LinkIcon className="h-4 w-4" />
+                  </button>
+                  <div className="flex-shrink-0">
+                    <Popover className="relative grid place-items-center">
+                      {({ open }) => (
+                        <>
+                          <Popover.Button
+                            type="button"
+                            className={`group inline-flex items-center outline-none ${
+                              open ? "text-brand-base" : "text-brand-secondary"
+                            }`}
+                          >
+                            {watch("color") && watch("color") !== "" ? (
+                              <span
+                                className="h-4 w-4 rounded"
+                                style={{
+                                  backgroundColor: watch("color") ?? "black",
+                                }}
+                              />
+                            ) : (
+                              <ColorPalletteIcon height={16} width={16} />
+                            )}
+                          </Popover.Button>
+
+                          <Transition
+                            as={React.Fragment}
+                            enter="transition ease-out duration-200"
+                            enterFrom="opacity-0 translate-y-1"
+                            enterTo="opacity-100 translate-y-0"
+                            leave="transition ease-in duration-150"
+                            leaveFrom="opacity-100 translate-y-0"
+                            leaveTo="opacity-0 translate-y-1"
+                          >
+                            <Popover.Panel className="absolute top-full right-0 z-20 mt-1 max-w-xs px-2 sm:px-0">
+                              <TwitterPicker
+                                color={pageDetails.color}
+                                onChange={(val) => partialUpdatePage({ color: val.hex })}
+                              />
+                            </Popover.Panel>
+                          </Transition>
+                        </>
+                      )}
+                    </Popover>
+                  </div>
+                  {pageDetails.created_by === user?.id && (
+                    <Tooltip
+                      tooltipContent={`${
+                        pageDetails.access
+                          ? "This page is only visible to you."
+                          : "This page can be viewed by anyone in the project."
+                      }`}
+                      theme="dark"
+                    >
+                      {pageDetails.access ? (
+                        <button onClick={() => partialUpdatePage({ access: 0 })} className="z-10">
+                          <LockClosedIcon className="h-4 w-4" />
+                        </button>
+                      ) : (
+                        <button
+                          onClick={() => partialUpdatePage({ access: 1 })}
+                          type="button"
+                          className="z-10"
+                        >
+                          <LockOpenIcon className="h-4 w-4" />
+                        </button>
+                      )}
+                    </Tooltip>
+                  )}
+                  {pageDetails.is_favorite ? (
+                    <button onClick={handleRemoveFromFavorites} className="z-10">
+                      <StarIcon className="h-4 w-4 text-orange-400" fill="#f6ad55" />
+                    </button>
+                  ) : (
+                    <button onClick={handleAddToFavorites} type="button" className="z-10">
+                      <StarIcon className="h-4 w-4" />
+                    </button>
+                  )}
+                </div>
+              </div>
+            </div>
+
+            <div className="mt-4 h-full w-full">
+              {pageBlocks ? (
+                <>
+                  <DragDropContext onDragEnd={handleOnDragEnd}>
+                    {pageBlocks.length !== 0 && (
+                      <StrictModeDroppable droppableId="blocks-list">
+                        {(provided) => (
+                          <div
+                            className="flex w-full flex-col gap-2"
+                            ref={provided.innerRef}
+                            {...provided.droppableProps}
+                          >
+                            {pageBlocks.map((block, index) => (
+                              <SinglePageBlock
+                                key={block.id}
+                                block={block}
+                                projectDetails={projectDetails}
+                                index={index}
+                              />
+                            ))}
+                            {provided.placeholder}
+                          </div>
+                        )}
+                      </StrictModeDroppable>
+                    )}
+                  </DragDropContext>
+                  {createBlockForm && (
+                    <div className="mt-4" ref={scrollToRef}>
+                      <CreateUpdateBlockInline
+                        handleClose={() => setCreateBlockForm(false)}
+                        focus="name"
+                      />
+                    </div>
+                  )}
+                  {labelModal && typeof projectId === "string" && (
+                    <CreateLabelModal
+                      isOpen={labelModal}
+                      handleClose={() => setLabelModal(false)}
+                      projectId={projectId}
+                    />
+                  )}
+                </>
+              ) : (
+                <Loader>
+                  <Loader.Item height="150px" />
+                  <Loader.Item height="150px" />
+                </Loader>
+              )}
+            </div>
+          </div>
+          <div>
+            <CreateBlock />
           </div>
         </div>
       ) : (

From 1329145173b82e342bf83b2540e6a1eaf12f91a2 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Thu, 11 May 2023 18:40:17 +0530
Subject: [PATCH 14/81] feat: custom theming (#1028)

* chore: custom theme types and constants

* feat: custom theming

* feat: preferences tab added in profile settings

* feat: remove unneccessary file

* feat:theme apply on page load

* fix: theme switch dropdown fix

* feat: color picker input, theme icon added, chore: code refactor

* style: color picker icon added

* fix: mutation fix

* fix: palette sequence fix

* chore: default custom theme palette updated

* style: join project and not authorized page theming

* fix: merge conflict

* fix: build fix and preferences tab layout fix
---
 .../auth-screens/not-authorized-view.tsx      |   6 +-
 .../auth-screens/project/join-project.tsx     |   4 +-
 .../components/core/color-picker-input.tsx    | 121 ++++++++
 .../app/components/core/custom-theme-form.tsx | 267 ------------------
 .../components/core/custom-theme-modal.tsx    |  65 -----
 .../components/core/custom-theme-selector.tsx | 198 +++++++++++++
 apps/app/components/core/index.ts             |   2 +
 apps/app/components/core/theme-switch.tsx     |  99 ++++++-
 .../components/icons/color-picker-icon.tsx    |  16 ++
 apps/app/components/icons/index.ts            |   1 +
 apps/app/constants/themes.ts                  |  43 ++-
 apps/app/contexts/theme.context.tsx           |  14 +
 apps/app/layouts/settings-navbar.tsx          |   4 +
 .../[workspaceSlug]/me/profile/index.tsx      |  13 +-
 .../me/profile/preferences.tsx                |  81 ++++++
 apps/app/types/users.d.ts                     |  14 +
 16 files changed, 575 insertions(+), 373 deletions(-)
 create mode 100644 apps/app/components/core/color-picker-input.tsx
 delete mode 100644 apps/app/components/core/custom-theme-form.tsx
 delete mode 100644 apps/app/components/core/custom-theme-modal.tsx
 create mode 100644 apps/app/components/core/custom-theme-selector.tsx
 create mode 100644 apps/app/components/icons/color-picker-icon.tsx
 create mode 100644 apps/app/pages/[workspaceSlug]/me/profile/preferences.tsx

diff --git a/apps/app/components/auth-screens/not-authorized-view.tsx b/apps/app/components/auth-screens/not-authorized-view.tsx
index 0ae730b5b..dc1db8a21 100644
--- a/apps/app/components/auth-screens/not-authorized-view.tsx
+++ b/apps/app/components/auth-screens/not-authorized-view.tsx
@@ -27,7 +27,7 @@ export const NotAuthorizedView: React.FC<Props> = ({ actionButton, type }) => {
         description: "You are not authorized to view this page",
       }}
     >
-      <div className="flex h-full w-full flex-col items-center justify-center gap-y-5 text-center">
+      <div className="flex h-full w-full flex-col items-center justify-center gap-y-5 bg-brand-surface-1 text-center">
         <div className="h-44 w-72">
           <Image
             src={type === "project" ? ProjectNotAuthorizedImg : WorkspaceNotAuthorizedImg}
@@ -36,7 +36,9 @@ export const NotAuthorizedView: React.FC<Props> = ({ actionButton, type }) => {
             alt="ProjectSettingImg"
           />
         </div>
-        <h1 className="text-xl font-medium">Oops! You are not authorized to view this page</h1>
+        <h1 className="text-xl font-medium text-brand-base">
+          Oops! You are not authorized to view this page
+        </h1>
 
         <div className="w-full max-w-md text-base text-brand-secondary">
           {user ? (
diff --git a/apps/app/components/auth-screens/project/join-project.tsx b/apps/app/components/auth-screens/project/join-project.tsx
index 098469114..06ae1c240 100644
--- a/apps/app/components/auth-screens/project/join-project.tsx
+++ b/apps/app/components/auth-screens/project/join-project.tsx
@@ -41,11 +41,11 @@ export const JoinProject: React.FC = () => {
   };
 
   return (
-    <div className="flex h-full w-full flex-col items-center justify-center gap-y-5 text-center">
+    <div className="flex h-full w-full flex-col items-center justify-center gap-y-5 bg-brand-surface-1 text-center">
       <div className="h-44 w-72">
         <Image src={JoinProjectImg} height="176" width="288" alt="JoinProject" />
       </div>
-      <h1 className="text-xl font-medium">You are not a member of this project</h1>
+      <h1 className="text-xl font-medium text-brand-base">You are not a member of this project</h1>
 
       <div className="w-full max-w-md text-base text-brand-secondary">
         <p className="mx-auto w-full text-sm md:w-3/4">
diff --git a/apps/app/components/core/color-picker-input.tsx b/apps/app/components/core/color-picker-input.tsx
new file mode 100644
index 000000000..28b6c4e2c
--- /dev/null
+++ b/apps/app/components/core/color-picker-input.tsx
@@ -0,0 +1,121 @@
+import React from "react";
+
+// react-form
+import {
+  FieldError,
+  FieldErrorsImpl,
+  Merge,
+  UseFormRegister,
+  UseFormSetValue,
+  UseFormWatch,
+} from "react-hook-form";
+// react-color
+import { ColorResult, SketchPicker } from "react-color";
+// component
+import { Popover, Transition } from "@headlessui/react";
+import { Input } from "components/ui";
+// icons
+import { ColorPickerIcon } from "components/icons";
+
+type Props = {
+  name: string;
+  watch: UseFormWatch<any>;
+  setValue: UseFormSetValue<any>;
+  error: FieldError | Merge<FieldError, FieldErrorsImpl<any>> | undefined;
+  register: UseFormRegister<any>;
+};
+
+export const ColorPickerInput: React.FC<Props> = ({ name, watch, setValue, error, register }) => {
+  const handleColorChange = (newColor: ColorResult) => {
+    const { hex } = newColor;
+    setValue(name, hex);
+  };
+
+  const getColorText = (colorName: string) => {
+    switch (colorName) {
+      case "accent":
+        return "Accent";
+      case "bgBase":
+        return "Background";
+      case "bgSurface1":
+        return "Background surface 1";
+      case "bgSurface2":
+        return "Background surface 2";
+      case "border":
+        return "Border";
+      case "sidebar":
+        return "Sidebar";
+      case "textBase":
+        return "Text primary";
+      case "textSecondary":
+        return "Text secondary";
+      default:
+        return "Color";
+    }
+  };
+
+  return (
+    <div className="relative ">
+      <Input
+        id={name}
+        name={name}
+        type="name"
+        placeholder="#FFFFFF"
+        autoComplete="off"
+        error={error}
+        value={watch(name)}
+        register={register}
+        validations={{
+          required: `${getColorText(name)} color is required`,
+          pattern: {
+            value: /^#(?:[0-9a-fA-F]{3}){1,2}$/g,
+            message: `${getColorText(name)} color should be hex format`,
+          },
+        }}
+      />
+      <div className="absolute right-4 top-2.5">
+        <Popover className="relative grid place-items-center">
+          {({ open }) => (
+            <>
+              <Popover.Button
+                type="button"
+                className={`group inline-flex items-center outline-none ${
+                  open ? "text-brand-base" : "text-brand-secondary"
+                }`}
+              >
+                {watch(name) && watch(name) !== "" ? (
+                  <span
+                    className="h-4 w-4 rounded border border-brand-base"
+                    style={{
+                      backgroundColor: `${watch(name)}`,
+                    }}
+                  />
+                ) : (
+                  <ColorPickerIcon
+                    height={14}
+                    width={14}
+                    className="fill-current text-brand-base"
+                  />
+                )}
+              </Popover.Button>
+
+              <Transition
+                as={React.Fragment}
+                enter="transition ease-out duration-200"
+                enterFrom="opacity-0 translate-y-1"
+                enterTo="opacity-100 translate-y-0"
+                leave="transition ease-in duration-150"
+                leaveFrom="opacity-100 translate-y-0"
+                leaveTo="opacity-0 translate-y-1"
+              >
+                <Popover.Panel className="absolute bottom-8 right-0 z-20 mt-1 max-w-xs px-2 sm:px-0">
+                  <SketchPicker color={watch(name)} onChange={handleColorChange} />
+                </Popover.Panel>
+              </Transition>
+            </>
+          )}
+        </Popover>
+      </div>
+    </div>
+  );
+};
diff --git a/apps/app/components/core/custom-theme-form.tsx b/apps/app/components/core/custom-theme-form.tsx
deleted file mode 100644
index ed1009468..000000000
--- a/apps/app/components/core/custom-theme-form.tsx
+++ /dev/null
@@ -1,267 +0,0 @@
-import { useEffect, useState } from "react";
-
-// react-hook-form
-import { useForm } from "react-hook-form";
-// ui
-import { Input, PrimaryButton, SecondaryButton } from "components/ui";
-
-const defaultValues = {
-  palette: "",
-};
-
-export const ThemeForm: React.FC<any> = ({ handleFormSubmit, handleClose, status, data }) => {
-  const {
-    register,
-    formState: { errors, isSubmitting },
-    handleSubmit,
-    reset,
-  } = useForm<any>({
-    defaultValues,
-  });
-  const [darkPalette, setDarkPalette] = useState(false);
-
-  const handleUpdateTheme = async (formData: any) => {
-    await handleFormSubmit({ ...formData, darkPalette });
-
-    reset({
-      ...defaultValues,
-    });
-  };
-
-  useEffect(() => {
-    reset({
-      ...defaultValues,
-      ...data,
-    });
-  }, [data, reset]);
-
-  // --color-bg-base: 25, 27, 27;
-  //   --color-bg-surface-1: 31, 32, 35;
-  //   --color-bg-surface-2: 39, 42, 45;
-
-  //   --color-border: 46, 50, 52;
-  //   --color-bg-sidebar: 19, 20, 22;
-  //   --color-accent: 60, 133, 217;
-
-  //   --color-text-base: 255, 255, 255;
-  //   --color-text-secondary: 142, 148, 146;
-
-  return (
-    <form onSubmit={handleSubmit(handleUpdateTheme)}>
-      <div className="space-y-5">
-        <h3 className="text-lg font-medium leading-6 text-brand-base">Customize your theme</h3>
-        <div className="space-y-4">
-          <div className="mt-6 grid grid-cols-1 gap-x-6 gap-y-4 sm:grid-cols-6">
-            <div className="sm:col-span-2">
-              <Input
-                id="bgBase"
-                label="Background"
-                name="bgBase"
-                type="name"
-                placeholder="#FFFFFF"
-                autoComplete="off"
-                error={errors.bgBase}
-                register={register}
-                validations={{
-                  required: "Background color is required",
-                  pattern: {
-                    value: /^#(?:[0-9a-fA-F]{3}){1,2}$/g,
-                    message: "Background color should be hex format",
-                  },
-                }}
-              />
-            </div>
-            <div className="sm:col-span-2">
-              <Input
-                id="bgSurface1"
-                label="Background surface 1"
-                name="bgSurface1"
-                type="name"
-                placeholder="#FFFFFF"
-                autoComplete="off"
-                error={errors.bgSurface1}
-                register={register}
-                validations={{
-                  required: "Background surface 1 color is required",
-                  pattern: {
-                    value: /^#(?:[0-9a-fA-F]{3}){1,2}$/g,
-                    message: "Background surface 1 color should be hex format",
-                  },
-                }}
-              />
-            </div>
-            <div className="sm:col-span-2">
-              <Input
-                id="bgSurface2"
-                label="Background surface 2"
-                name="bgSurface1"
-                type="name"
-                placeholder="#FFFFFF"
-                autoComplete="off"
-                error={errors.bgSurface1}
-                register={register}
-                validations={{
-                  required: "Background surface 2 color is required",
-                  pattern: {
-                    value: /^#(?:[0-9a-fA-F]{3}){1,2}$/g,
-                    message: "Background surface 2 color should be hex format",
-                  },
-                }}
-              />
-            </div>
-
-            <div className="sm:col-span-2">
-              <Input
-                id="border"
-                label="Border"
-                name="border"
-                type="name"
-                placeholder="#FFFFFF"
-                autoComplete="off"
-                error={errors.border}
-                register={register}
-                validations={{
-                  required: "Border color is required",
-                  pattern: {
-                    value: /^#(?:[0-9a-fA-F]{3}){1,2}$/g,
-                    message: "Border color should be hex format",
-                  },
-                }}
-              />
-            </div>
-            <div className="sm:col-span-2">
-              <Input
-                id="sidebar"
-                label="Sidebar"
-                name="sidebar"
-                type="name"
-                placeholder="#FFFFFF"
-                autoComplete="off"
-                error={errors.sidebar}
-                register={register}
-                validations={{
-                  required: "Sidebar color is required",
-                  pattern: {
-                    value: /^#(?:[0-9a-fA-F]{3}){1,2}$/g,
-                    message: "Sidebar color should be hex format",
-                  },
-                }}
-              />
-            </div>
-            <div className="sm:col-span-2">
-              <Input
-                id="accent"
-                label="Accent"
-                name="accent"
-                type="name"
-                placeholder="#FFFFFF"
-                autoComplete="off"
-                error={errors.accent}
-                register={register}
-                validations={{
-                  required: "Accent color is required",
-                  pattern: {
-                    value: /^#(?:[0-9a-fA-F]{3}){1,2}$/g,
-                    message: "Accent color should be hex format",
-                  },
-                }}
-              />
-            </div>
-            <div className="sm:col-span-3">
-              <Input
-                id="textBase"
-                label="Text primary"
-                name="textBase"
-                type="name"
-                placeholder="#FFFFFF"
-                autoComplete="off"
-                error={errors.textBase}
-                register={register}
-                validations={{
-                  required: "Text primary color is required",
-                  pattern: {
-                    value: /^#(?:[0-9a-fA-F]{3}){1,2}$/g,
-                    message: "Text primary color should be hex format",
-                  },
-                }}
-              />
-            </div>
-            <div className="sm:col-span-3">
-              <Input
-                id="textSecondary"
-                label="Text secondary"
-                name="textSecondary"
-                type="name"
-                placeholder="#FFFFFF"
-                autoComplete="off"
-                error={errors.textSecondary}
-                register={register}
-                validations={{
-                  required: "Text secondary color is required",
-                  pattern: {
-                    value: /^#(?:[0-9a-fA-F]{3}){1,2}$/g,
-                    message: "Text secondary color should be hex format",
-                  },
-                }}
-              />
-            </div>
-          </div>
-
-          <div>
-            <Input
-              id="palette"
-              label="All colors"
-              name="palette"
-              type="name"
-              placeholder="Enter comma separated hex colors"
-              autoComplete="off"
-              error={errors.palette}
-              register={register}
-              validations={{
-                required: "Color values is required",
-                pattern: {
-                  value: /^(#(?:[0-9a-fA-F]{3}){1,2},){7}#(?:[0-9a-fA-F]{3}){1,2}$/g,
-                  message: "Color values should be hex format, separated by commas",
-                },
-              }}
-            />
-          </div>
-          <div
-            className="flex cursor-pointer items-center gap-1"
-            onClick={() => setDarkPalette((prevData) => !prevData)}
-          >
-            <span className="text-xs">Dark palette</span>
-            <button
-              type="button"
-              className={`pointer-events-none relative inline-flex h-4 w-7 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent ${
-                darkPalette ? "bg-brand-accent" : "bg-gray-300"
-              } transition-colors duration-300 ease-in-out focus:outline-none`}
-              role="switch"
-              aria-checked="false"
-            >
-              <span className="sr-only">Dark palette</span>
-              <span
-                aria-hidden="true"
-                className={`pointer-events-none inline-block h-3 w-3 ${
-                  darkPalette ? "translate-x-3" : "translate-x-0"
-                } transform rounded-full bg-brand-surface-2 shadow ring-0 transition duration-300 ease-in-out`}
-              />
-            </button>
-          </div>
-        </div>
-      </div>
-      <div className="mt-5 flex justify-end gap-2">
-        <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-        <PrimaryButton type="submit" loading={isSubmitting}>
-          {status
-            ? isSubmitting
-              ? "Updating Theme..."
-              : "Update Theme"
-            : isSubmitting
-            ? "Creating Theme..."
-            : "Set Theme"}
-        </PrimaryButton>
-      </div>
-    </form>
-  );
-};
diff --git a/apps/app/components/core/custom-theme-modal.tsx b/apps/app/components/core/custom-theme-modal.tsx
deleted file mode 100644
index d46d17d28..000000000
--- a/apps/app/components/core/custom-theme-modal.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import React from "react";
-
-// headless ui
-import { Dialog, Transition } from "@headlessui/react";
-// components
-import { ThemeForm } from "./custom-theme-form";
-// helpers
-import { applyTheme } from "helpers/theme.helper";
-// fetch-keys
-
-type Props = {
-  isOpen: boolean;
-  handleClose: () => void;
-};
-
-export const CustomThemeModal: React.FC<Props> = ({ isOpen, handleClose }) => {
-  const onClose = () => {
-    handleClose();
-  };
-
-  const handleFormSubmit = async (formData: any) => {
-    applyTheme(formData.palette, formData.darkPalette);
-    onClose();
-  };
-
-  return (
-    <Transition.Root show={isOpen} as={React.Fragment}>
-      <Dialog as="div" className="relative z-20" onClose={handleClose}>
-        <Transition.Child
-          as={React.Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
-        </Transition.Child>
-
-        <div className="fixed inset-0 z-20 overflow-y-auto">
-          <div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
-            <Transition.Child
-              as={React.Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            >
-              <Dialog.Panel className="relative transform rounded-lg bg-brand-surface-1 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
-                <ThemeForm
-                  handleClose={handleClose}
-                  handleFormSubmit={handleFormSubmit}
-                  status={false}
-                />
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
-  );
-};
diff --git a/apps/app/components/core/custom-theme-selector.tsx b/apps/app/components/core/custom-theme-selector.tsx
new file mode 100644
index 000000000..59aed8b2b
--- /dev/null
+++ b/apps/app/components/core/custom-theme-selector.tsx
@@ -0,0 +1,198 @@
+import React, { useEffect, useState } from "react";
+
+import { useTheme } from "next-themes";
+
+import { useForm } from "react-hook-form";
+
+// hooks
+import useUser from "hooks/use-user";
+// ui
+import { PrimaryButton } from "components/ui";
+import { ColorPickerInput } from "components/core";
+// services
+import userService from "services/user.service";
+// helper
+import { applyTheme } from "helpers/theme.helper";
+// types
+import { ICustomTheme } from "types";
+
+type Props = {
+  preLoadedData?: Partial<ICustomTheme> | null;
+};
+
+export const CustomThemeSelector: React.FC<Props> = ({ preLoadedData }) => {
+  const [darkPalette, setDarkPalette] = useState(false);
+
+  const defaultValues = {
+    accent: preLoadedData?.accent ?? "#FE5050",
+    bgBase: preLoadedData?.bgBase ?? "#FFF7F7",
+    bgSurface1: preLoadedData?.bgSurface1 ?? "#FFE0E0",
+    bgSurface2: preLoadedData?.bgSurface2 ?? "#FFF7F7",
+    border: preLoadedData?.border ?? "#FFC9C9",
+    darkPalette: preLoadedData?.darkPalette ?? false,
+    palette: preLoadedData?.palette ?? "",
+    sidebar: preLoadedData?.sidebar ?? "#FFFFFF",
+    textBase: preLoadedData?.textBase ?? "#430000",
+    textSecondary: preLoadedData?.textSecondary ?? "#323232",
+  };
+
+  const {
+    register,
+    formState: { errors, isSubmitting },
+    handleSubmit,
+    watch,
+    setValue,
+    reset,
+  } = useForm<any>({
+    defaultValues,
+  });
+
+  const { setTheme } = useTheme();
+  const { mutateUser } = useUser();
+
+  const handleFormSubmit = async (formData: any) => {
+    await userService
+      .updateUser({
+        theme: {
+          accent: formData.accent,
+          bgBase: formData.bgBase,
+          bgSurface1: formData.bgSurface1,
+          bgSurface2: formData.bgSurface2,
+          border: formData.border,
+          darkPalette: darkPalette,
+          palette: `${formData.bgBase},${formData.bgSurface1},${formData.bgSurface2},${formData.border},${formData.sidebar},${formData.accent},${formData.textBase},${formData.textSecondary}`,
+          sidebar: formData.sidebar,
+          textBase: formData.textBase,
+          textSecondary: formData.textSecondary,
+        },
+      })
+      .then((res) => {
+        mutateUser((prevData) => {
+          if (!prevData) return prevData;
+          return { ...prevData, user: res };
+        }, false);
+        applyTheme(formData.palette, darkPalette);
+        setTheme("custom");
+      })
+      .catch((err) => console.log(err));
+  };
+
+  const handleUpdateTheme = async (formData: any) => {
+    await handleFormSubmit({ ...formData, darkPalette });
+
+    reset({
+      ...defaultValues,
+    });
+  };
+
+  useEffect(() => {
+    reset({
+      ...defaultValues,
+      ...preLoadedData,
+    });
+  }, [preLoadedData, reset]);
+
+  return (
+    <form onSubmit={handleSubmit(handleUpdateTheme)}>
+      <div className="space-y-5">
+        <h3 className="text-lg font-semibold text-brand-base">Customize your theme</h3>
+        <div className="space-y-4">
+          <div className="grid grid-cols-1 gap-x-6 gap-y-4 sm:grid-cols-3">
+            <div className="flex flex-col items-start gap-2">
+              <h3 className="text-left text-base text-brand-secondary">Background</h3>
+              <ColorPickerInput
+                name="bgBase"
+                error={errors.bgBase}
+                watch={watch}
+                setValue={setValue}
+                register={register}
+              />
+            </div>
+
+            <div className="flex flex-col items-start gap-2">
+              <h3 className="text-left text-base text-brand-secondary">Background surface 1</h3>
+              <ColorPickerInput
+                name="bgSurface1"
+                error={errors.bgSurface1}
+                watch={watch}
+                setValue={setValue}
+                register={register}
+              />
+            </div>
+
+            <div className="flex flex-col items-start gap-2">
+              <h3 className="text-left text-base text-brand-secondary">Background surface 2</h3>
+              <ColorPickerInput
+                name="bgSurface2"
+                error={errors.bgSurface2}
+                watch={watch}
+                setValue={setValue}
+                register={register}
+              />
+            </div>
+
+            <div className="flex flex-col items-start gap-2">
+              <h3 className="text-left text-base text-brand-secondary">Border</h3>
+              <ColorPickerInput
+                name="border"
+                error={errors.border}
+                watch={watch}
+                setValue={setValue}
+                register={register}
+              />
+            </div>
+
+            <div className="flex flex-col items-start gap-2">
+              <h3 className="text-left text-base text-brand-secondary">Sidebar</h3>
+              <ColorPickerInput
+                name="sidebar"
+                error={errors.sidebar}
+                watch={watch}
+                setValue={setValue}
+                register={register}
+              />
+            </div>
+
+            <div className="flex flex-col items-start gap-2">
+              <h3 className="text-left text-base text-brand-secondary">Accent</h3>
+              <ColorPickerInput
+                name="accent"
+                error={errors.accent}
+                watch={watch}
+                setValue={setValue}
+                register={register}
+              />
+            </div>
+
+            <div className="flex flex-col items-start gap-2">
+              <h3 className="text-left text-base text-brand-secondary">Text primary</h3>
+              <ColorPickerInput
+                name="textBase"
+                error={errors.textBase}
+                watch={watch}
+                setValue={setValue}
+                register={register}
+              />
+            </div>
+
+            <div className="flex flex-col items-start gap-2">
+              <h3 className="text-left text-base text-brand-secondary">Text secondary</h3>
+              <ColorPickerInput
+                name="textSecondary"
+                error={errors.textSecondary}
+                watch={watch}
+                setValue={setValue}
+                register={register}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="mt-5 flex justify-end gap-2">
+        <PrimaryButton type="submit" loading={isSubmitting}>
+          {isSubmitting ? "Creating Theme..." : "Set Theme"}
+        </PrimaryButton>
+      </div>
+    </form>
+  );
+};
diff --git a/apps/app/components/core/index.ts b/apps/app/components/core/index.ts
index f9c0cebdf..01d87495f 100644
--- a/apps/app/components/core/index.ts
+++ b/apps/app/components/core/index.ts
@@ -13,3 +13,5 @@ export * from "./link-modal";
 export * from "./image-picker-popover";
 export * from "./feeds";
 export * from "./theme-switch";
+export * from "./custom-theme-selector";
+export * from "./color-picker-input";
diff --git a/apps/app/components/core/theme-switch.tsx b/apps/app/components/core/theme-switch.tsx
index f93b1998e..e38375c2e 100644
--- a/apps/app/components/core/theme-switch.tsx
+++ b/apps/app/components/core/theme-switch.tsx
@@ -1,12 +1,30 @@
-import { useState, useEffect, ChangeEvent } from "react";
-import { useTheme } from "next-themes";
-import { THEMES_OBJ } from "constants/themes";
-import { CustomSelect } from "components/ui";
-import { CustomThemeModal } from "./custom-theme-modal";
+import { useState, useEffect, Dispatch, SetStateAction } from "react";
 
-export const ThemeSwitch = () => {
+import { useTheme } from "next-themes";
+
+// constants
+import { THEMES_OBJ } from "constants/themes";
+// ui
+import { CustomSelect } from "components/ui";
+// helper
+import { applyTheme } from "helpers/theme.helper";
+// types
+import { ICustomTheme, IUser } from "types";
+
+type Props = {
+  user: IUser | undefined;
+  setPreLoadedData: Dispatch<SetStateAction<ICustomTheme | null>>;
+  customThemeSelectorOptions: boolean;
+  setCustomThemeSelectorOptions: Dispatch<SetStateAction<boolean>>;
+};
+
+export const ThemeSwitch: React.FC<Props> = ({
+  user,
+  setPreLoadedData,
+  customThemeSelectorOptions,
+  setCustomThemeSelectorOptions,
+}) => {
   const [mounted, setMounted] = useState(false);
-  const [customThemeModal, setCustomThemeModal] = useState(false);
   const { theme, setTheme } = useTheme();
 
   // useEffect only runs on the client, so now we can safely show the UI
@@ -18,15 +36,49 @@ export const ThemeSwitch = () => {
     return null;
   }
 
+  const currentThemeObj = THEMES_OBJ.find((t) => t.value === theme);
+
   return (
     <>
       <CustomSelect
         value={theme}
-        label={theme ? THEMES_OBJ.find((t) => t.value === theme)?.label : "Select your theme"}
+        label={
+          currentThemeObj ? (
+            <div className="flex items-center gap-2">
+              <div
+                className="border-1 relative flex h-4 w-4 rotate-45 transform items-center justify-center rounded-full border"
+                style={{
+                  borderColor: currentThemeObj.icon.border,
+                }}
+              >
+                <div
+                  className="h-full w-1/2 rounded-l-full"
+                  style={{
+                    background: currentThemeObj.icon.color1,
+                  }}
+                />
+                <div
+                  className="h-full w-1/2 rounded-r-full border-l"
+                  style={{
+                    borderLeftColor: currentThemeObj.icon.border,
+                    background: currentThemeObj.icon.color2,
+                  }}
+                />
+              </div>
+              {currentThemeObj.label}
+            </div>
+          ) : (
+            "Select your theme"
+          )
+        }
         onChange={({ value, type }: { value: string; type: string }) => {
           if (value === "custom") {
-            if (!customThemeModal) setCustomThemeModal(true);
+            if (user?.theme.palette) {
+              setPreLoadedData(user.theme);
+            }
+            if (!customThemeSelectorOptions) setCustomThemeSelectorOptions(true);
           } else {
+            if (customThemeSelectorOptions) setCustomThemeSelectorOptions(false);
             const cssVars = [
               "--color-bg-base",
               "--color-bg-surface-1",
@@ -41,20 +93,41 @@ export const ThemeSwitch = () => {
             ];
             cssVars.forEach((cssVar) => document.documentElement.style.removeProperty(cssVar));
           }
-          document.documentElement.style.setProperty("color-scheme", type);
           setTheme(value);
+          document.documentElement.style.setProperty("color-scheme", type);
         }}
         input
         width="w-full"
         position="right"
       >
-        {THEMES_OBJ.map(({ value, label, type }) => (
+        {THEMES_OBJ.map(({ value, label, type, icon }) => (
           <CustomSelect.Option key={value} value={{ value, type }}>
-            {label}
+            <div className="flex items-center gap-2">
+              <div
+                className="border-1 relative flex h-4 w-4 rotate-45 transform items-center justify-center rounded-full border"
+                style={{
+                  borderColor: icon.border,
+                }}
+              >
+                <div
+                  className="h-full w-1/2 rounded-l-full"
+                  style={{
+                    background: icon.color1,
+                  }}
+                />
+                <div
+                  className="h-full w-1/2 rounded-r-full border-l"
+                  style={{
+                    borderLeftColor: icon.border,
+                    background: icon.color2,
+                  }}
+                />
+              </div>
+              {label}
+            </div>
           </CustomSelect.Option>
         ))}
       </CustomSelect>
-      {/* <CustomThemeModal isOpen={customThemeModal} handleClose={() => setCustomThemeModal(false)} /> */}
     </>
   );
 };
diff --git a/apps/app/components/icons/color-picker-icon.tsx b/apps/app/components/icons/color-picker-icon.tsx
new file mode 100644
index 000000000..f6ec3ad27
--- /dev/null
+++ b/apps/app/components/icons/color-picker-icon.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const ColorPickerIcon: React.FC<Props> = ({ width = 14, height = 14, className }) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    viewBox="0 0 14 14"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M0.8125 13.7508C0.65 13.7508 0.515625 13.6977 0.409375 13.5914C0.303125 13.4852 0.25 13.3508 0.25 13.1883V10.8258C0.25 10.7508 0.2625 10.682 0.2875 10.6195C0.3125 10.557 0.35625 10.4945 0.41875 10.432L7.31875 3.53203L6.34375 2.55703C6.24375 2.45703 6.19688 2.32891 6.20312 2.17266C6.20938 2.01641 6.2625 1.88828 6.3625 1.78828C6.4625 1.68828 6.59063 1.63828 6.74688 1.63828C6.90313 1.63828 7.03125 1.68828 7.13125 1.78828L8.4625 3.13828L11.125 0.475781C11.2625 0.338281 11.4094 0.269531 11.5656 0.269531C11.7219 0.269531 11.8688 0.338281 12.0063 0.475781L13.525 1.99453C13.6625 2.13203 13.7313 2.27891 13.7313 2.43516C13.7313 2.59141 13.6625 2.73828 13.525 2.87578L10.8625 5.53828L12.2125 6.88828C12.3125 6.98828 12.3625 7.11328 12.3625 7.26328C12.3625 7.41328 12.3125 7.53828 12.2125 7.63828C12.1125 7.73828 11.9844 7.78828 11.8281 7.78828C11.6719 7.78828 11.5438 7.73828 11.4438 7.63828L10.4688 6.68203L3.56875 13.582C3.50625 13.6445 3.44375 13.6883 3.38125 13.7133C3.31875 13.7383 3.25 13.7508 3.175 13.7508H0.8125ZM1.375 12.6258H3.00625L9.6625 5.96953L8.03125 4.33828L1.375 10.9945V12.6258ZM10.0563 4.75078L12.3813 2.42578L11.575 1.61953L9.25 3.94453L10.0563 4.75078Z" />
+  </svg>
+);
diff --git a/apps/app/components/icons/index.ts b/apps/app/components/icons/index.ts
index 7722c4948..b802121d5 100644
--- a/apps/app/components/icons/index.ts
+++ b/apps/app/components/icons/index.ts
@@ -74,3 +74,4 @@ export * from "./default-file-icon";
 export * from "./video-file-icon";
 export * from "./audio-file-icon";
 export * from "./command-icon";
+export * from "./color-picker-icon";
diff --git a/apps/app/constants/themes.ts b/apps/app/constants/themes.ts
index 8ac745b82..edc517b78 100644
--- a/apps/app/constants/themes.ts
+++ b/apps/app/constants/themes.ts
@@ -1,35 +1,54 @@
-export const THEMES = [
-  "light",
-  "dark",
-  "light-contrast",
-  "dark-contrast",
-  // "custom"
-];
+export const THEMES = ["light", "dark", "light-contrast", "dark-contrast", "custom"];
 
 export const THEMES_OBJ = [
   {
     value: "light",
     label: "Light",
     type: "light",
+    icon: {
+      border: "#DEE2E6",
+      color1: "#FAFAFA",
+      color2: "#3F76FF",
+    },
   },
   {
     value: "dark",
     label: "Dark",
     type: "dark",
+    icon: {
+      border: "#2E3234",
+      color1: "#191B1B",
+      color2: "#3C85D9",
+    },
   },
   {
     value: "light-contrast",
     label: "Light High Contrast",
     type: "light",
+    icon: {
+      border: "#000000",
+      color1: "#FFFFFF",
+      color2: "#3F76FF",
+    },
   },
   {
     value: "dark-contrast",
     label: "Dark High Contrast",
     type: "dark",
+    icon: {
+      border: "#FFFFFF",
+      color1: "#030303",
+      color2: "#3A8BE9",
+    },
+  },
+  {
+    value: "custom",
+    label: "Custom",
+    type: "light",
+    icon: {
+      border: "#FFC9C9",
+      color1: "#FFF7F7",
+      color2: "#FF5151",
+    },
   },
-  // {
-  //   value: "custom",
-  //   label: "Custom",
-  //   type: "light",
-  // },
 ];
diff --git a/apps/app/contexts/theme.context.tsx b/apps/app/contexts/theme.context.tsx
index c51cdca1a..318f04095 100644
--- a/apps/app/contexts/theme.context.tsx
+++ b/apps/app/contexts/theme.context.tsx
@@ -4,10 +4,14 @@ import { useRouter } from "next/router";
 import useSWR from "swr";
 // components
 import ToastAlert from "components/toast-alert";
+// hooks
+import useUser from "hooks/use-user";
 // services
 import projectService from "services/project.service";
 // fetch-keys
 import { USER_PROJECT_VIEW } from "constants/fetch-keys";
+// helper
+import { applyTheme } from "helpers/theme.helper";
 // constants
 
 export const themeContext = createContext<ContextType>({} as ContextType);
@@ -61,6 +65,7 @@ export const reducer: ReducerFunctionType = (state, action) => {
 
 export const ThemeContextProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   const [state, dispatch] = useReducer(reducer, initialState);
+  const { user } = useUser();
 
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
@@ -85,6 +90,15 @@ export const ThemeContextProvider: React.FC<{ children: React.ReactNode }> = ({
     });
   }, [myViewProps]);
 
+  useEffect(() => {
+    const theme = localStorage.getItem("theme");
+    if (theme && theme === "custom") {
+      if (user && user.theme.palette) {
+        applyTheme(user.theme.palette, user.theme.darkPalette);
+      }
+    }
+  }, [user]);
+
   return (
     <themeContext.Provider
       value={{
diff --git a/apps/app/layouts/settings-navbar.tsx b/apps/app/layouts/settings-navbar.tsx
index 2c9a5b2cc..1e03a76e3 100644
--- a/apps/app/layouts/settings-navbar.tsx
+++ b/apps/app/layouts/settings-navbar.tsx
@@ -85,6 +85,10 @@ const SettingsNavbar: React.FC<Props> = ({ profilePage = false }) => {
       label: "Activity",
       href: `/${workspaceSlug}/me/profile/activity`,
     },
+    {
+      label: "Preferences",
+      href: `/${workspaceSlug}/me/profile/preferences`,
+    },
   ];
 
   return (
diff --git a/apps/app/pages/[workspaceSlug]/me/profile/index.tsx b/apps/app/pages/[workspaceSlug]/me/profile/index.tsx
index 5fbf3ef2a..b6c3d36b9 100644
--- a/apps/app/pages/[workspaceSlug]/me/profile/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/me/profile/index.tsx
@@ -13,7 +13,7 @@ import useToast from "hooks/use-toast";
 // layouts
 import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
 // components
-import { ImageUploadModal, ThemeSwitch } from "components/core";
+import { ImageUploadModal } from "components/core";
 // ui
 import { CustomSelect, DangerButton, Input, SecondaryButton, Spinner } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
@@ -280,17 +280,6 @@ const Profile: NextPage = () => {
                 />
               </div>
             </div>
-            <div className="grid grid-cols-12 gap-4 sm:gap-16">
-              <div className="col-span-12 sm:col-span-6">
-                <h4 className="text-lg font-semibold text-brand-base">Theme</h4>
-                <p className="text-sm text-brand-secondary">
-                  Select or customize your interface color scheme.
-                </p>
-              </div>
-              <div className="col-span-12 sm:col-span-6">
-                <ThemeSwitch />
-              </div>
-            </div>
             <div className="sm:text-right">
               <SecondaryButton onClick={handleSubmit(onSubmit)} loading={isSubmitting}>
                 {isSubmitting ? "Updating..." : "Update profile"}
diff --git a/apps/app/pages/[workspaceSlug]/me/profile/preferences.tsx b/apps/app/pages/[workspaceSlug]/me/profile/preferences.tsx
new file mode 100644
index 000000000..5ea79014d
--- /dev/null
+++ b/apps/app/pages/[workspaceSlug]/me/profile/preferences.tsx
@@ -0,0 +1,81 @@
+import { useEffect, useState } from "react";
+import { useTheme } from "next-themes";
+
+// hooks
+import useUser from "hooks/use-user";
+// layouts
+import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
+import SettingsNavbar from "layouts/settings-navbar";
+// components
+import { CustomThemeSelector, ThemeSwitch } from "components/core";
+// ui
+import { Spinner } from "components/ui";
+import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
+// types
+import { ICustomTheme } from "types";
+
+const ProfilePreferences = () => {
+  const { user: myProfile } = useUser();
+  const { theme } = useTheme();
+  const [customThemeSelectorOptions, setCustomThemeSelectorOptions] = useState(false);
+  const [preLoadedData, setPreLoadedData] = useState<ICustomTheme | null>(null);
+
+  useEffect(() => {
+    if (theme === "custom") {
+      if (myProfile?.theme.palette) setPreLoadedData(myProfile.theme);
+      if (!customThemeSelectorOptions) setCustomThemeSelectorOptions(true);
+    }
+  }, [myProfile, theme]);
+
+  return (
+    <WorkspaceAuthorizationLayout
+      meta={{
+        title: "Plane - My Profile",
+      }}
+      breadcrumbs={
+        <Breadcrumbs>
+          <BreadcrumbItem title="My Profile Preferences" />
+        </Breadcrumbs>
+      }
+    >
+      {myProfile ? (
+        <div className="px-24 py-8">
+          <div className="mb-12 space-y-6">
+            <div>
+              <h3 className="text-3xl font-semibold">Profile Settings</h3>
+              <p className="mt-1 text-brand-secondary">
+                This information will be visible to only you.
+              </p>
+            </div>
+            <SettingsNavbar profilePage />
+          </div>
+          <div className="space-y-8 sm:space-y-12">
+            <div className="grid grid-cols-12 gap-4 sm:gap-16">
+              <div className="col-span-12 sm:col-span-6">
+                <h4 className="text-lg font-semibold text-brand-base">Theme</h4>
+                <p className="text-sm text-brand-secondary">
+                  Select or customize your interface color scheme.
+                </p>
+              </div>
+              <div className="col-span-12 sm:col-span-6">
+                <ThemeSwitch
+                  user={myProfile}
+                  setPreLoadedData={setPreLoadedData}
+                  customThemeSelectorOptions={customThemeSelectorOptions}
+                  setCustomThemeSelectorOptions={setCustomThemeSelectorOptions}
+                />
+              </div>
+            </div>
+            {customThemeSelectorOptions && <CustomThemeSelector preLoadedData={preLoadedData} />}
+          </div>
+        </div>
+      ) : (
+        <div className="grid h-full w-full place-items-center px-4 sm:px-0">
+          <Spinner />
+        </div>
+      )}
+    </WorkspaceAuthorizationLayout>
+  );
+};
+
+export default ProfilePreferences;
diff --git a/apps/app/types/users.d.ts b/apps/app/types/users.d.ts
index 2d90c8b57..eb7f5c742 100644
--- a/apps/app/types/users.d.ts
+++ b/apps/app/types/users.d.ts
@@ -18,6 +18,7 @@ export interface IUser {
   is_onboarded: boolean;
   token: string;
   role: string;
+  theme: ICustomTheme;
 
   my_issues_prop?: {
     properties: Properties;
@@ -27,6 +28,19 @@ export interface IUser {
   [...rest: string]: any;
 }
 
+export interface ICustomTheme {
+  accent: string;
+  bgBase: string;
+  bgSurface1: string;
+  bgSurface2: string;
+  border: string;
+  darkPalette: boolean;
+  palette: string;
+  sidebar: string;
+  textBase: string;
+  textSecondary: string;
+}
+
 export interface ICurrentUserResponse {
   assigned_issues: number;
   user: IUser;

From 9cb3794dde15bc69bf9896cd0c49923ff87b40ae Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Thu, 11 May 2023 18:41:13 +0530
Subject: [PATCH 15/81] fix: page block padding fix (#1034)

---
 apps/app/components/pages/create-block.tsx      | 3 ++-
 apps/app/components/pages/single-page-block.tsx | 3 ++-
 apps/app/components/ui/text-area/index.tsx      | 5 ++++-
 apps/app/components/ui/text-area/types.d.ts     | 1 +
 4 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/apps/app/components/pages/create-block.tsx b/apps/app/components/pages/create-block.tsx
index d8b54a4f8..59bb81898 100644
--- a/apps/app/components/pages/create-block.tsx
+++ b/apps/app/components/pages/create-block.tsx
@@ -95,10 +95,11 @@ export const CreateBlock = () => {
             name="name"
             placeholder="Title"
             register={register}
-            className="min-h-10 block max-h-24 w-full resize-none overflow-hidden border-none bg-transparent px-1 py-1 text-sm font-medium"
+            className="min-h-[20px] block max-h-24 w-full resize-none overflow-hidden border-none bg-transparent px-1 py-1 text-sm font-medium"
             role="textbox"
             onKeyDown={handleKeyDown}
             maxLength={255}
+            noPadding
           />
         </div>
 
diff --git a/apps/app/components/pages/single-page-block.tsx b/apps/app/components/pages/single-page-block.tsx
index 94d8679e2..85451375d 100644
--- a/apps/app/components/pages/single-page-block.tsx
+++ b/apps/app/components/pages/single-page-block.tsx
@@ -408,7 +408,8 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index
                     <TextArea
                       name="blockName"
                       value={block.name}
-                      className="min-h-5 block w-full resize-none overflow-hidden border-none bg-transparent px-0 py-0 text-sm text-brand-base"
+                      className="min-h-[20px] block w-full resize-none overflow-hidden border-none bg-transparent text-sm text-brand-base"
+                      noPadding
                     />
                   </div>
                   {block?.description_stripped.length > 0 && (
diff --git a/apps/app/components/ui/text-area/index.tsx b/apps/app/components/ui/text-area/index.tsx
index be4938699..84251b2d4 100644
--- a/apps/app/components/ui/text-area/index.tsx
+++ b/apps/app/components/ui/text-area/index.tsx
@@ -32,6 +32,7 @@ export const TextArea: React.FC<Props> = ({
   disabled,
   error,
   validations,
+  noPadding = false,
   onChange,
   ...rest
 }) => {
@@ -65,7 +66,9 @@ export const TextArea: React.FC<Props> = ({
           onChange && onChange(e);
           setTextareaValue(e.target.value);
         }}
-        className={`no-scrollbar w-full bg-transparent px-3 py-2 outline-none ${
+        className={`no-scrollbar w-full bg-transparent ${
+          noPadding ? "" : "px-3 py-2"
+        } outline-none ${
           mode === "primary"
             ? "rounded-md border border-brand-base"
             : mode === "transparent"
diff --git a/apps/app/components/ui/text-area/types.d.ts b/apps/app/components/ui/text-area/types.d.ts
index 2a6022a56..27d031dee 100644
--- a/apps/app/components/ui/text-area/types.d.ts
+++ b/apps/app/components/ui/text-area/types.d.ts
@@ -9,4 +9,5 @@ export interface Props extends React.ComponentPropsWithoutRef<"textarea"> {
   mode?: "primary" | "transparent" | "secondary" | "disabled";
   validations?: RegisterOptions;
   error?: FieldError | Merge<FieldError, FieldErrorsImpl<any>>;
+  noPadding?: boolean;
 }

From f2a68874f1590d5f58340894cc06f7ac0e65edd7 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Thu, 11 May 2023 20:25:08 +0530
Subject: [PATCH 16/81] chore(deps): bump django in /apiserver/requirements
 (#1036)

Bumps [django](https://github.com/django/django) from 3.2.18 to 3.2.19.
- [Commits](https://github.com/django/django/compare/3.2.18...3.2.19)

---
updated-dependencies:
- dependency-name: django
  dependency-type: direct:production
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 apiserver/requirements/base.txt | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apiserver/requirements/base.txt b/apiserver/requirements/base.txt
index e3e58450c..2bc109968 100644
--- a/apiserver/requirements/base.txt
+++ b/apiserver/requirements/base.txt
@@ -1,6 +1,6 @@
 # base requirements
 
-Django==3.2.18
+Django==3.2.19
 django-braces==1.15.0
 django-taggit==3.1.0
 psycopg2==2.9.5

From 6e9235e5fee3349cc1e0adac4124ed59e404833f Mon Sep 17 00:00:00 2001
From: pablohashescobar <118773738+pablohashescobar@users.noreply.github.com>
Date: Thu, 11 May 2023 20:53:54 +0530
Subject: [PATCH 17/81] fix: analytic query params (#1035)

* fix: query params for analytics

* fix: default analytics filters
---
 apiserver/plane/api/views/analytic.py | 35 +++++++--------------------
 1 file changed, 9 insertions(+), 26 deletions(-)

diff --git a/apiserver/plane/api/views/analytic.py b/apiserver/plane/api/views/analytic.py
index d22eb35e8..56cb08727 100644
--- a/apiserver/plane/api/views/analytic.py
+++ b/apiserver/plane/api/views/analytic.py
@@ -26,6 +26,7 @@ from plane.db.models import Issue, AnalyticView, Workspace, State, Label
 from plane.api.serializers import AnalyticViewSerializer
 from plane.utils.analytics_plot import build_graph_plot
 from plane.bgtasks.analytic_plot_export import analytic_export_task
+from plane.utils.issue_filters import issue_filters
 
 
 class AnalyticsEndpoint(BaseAPIView):
@@ -44,19 +45,10 @@ class AnalyticsEndpoint(BaseAPIView):
                     status=status.HTTP_400_BAD_REQUEST,
                 )
 
-            project_ids = request.GET.getlist("project")
-            cycle_ids = request.GET.getlist("cycle")
-            module_ids = request.GET.getlist("module")
-
             segment = request.GET.get("segment", False)
+            filters = issue_filters(request.GET, "GET")
 
-            queryset = Issue.objects.filter(workspace__slug=slug)
-            if project_ids:
-                queryset = queryset.filter(project_id__in=project_ids)
-            if cycle_ids:
-                queryset = queryset.filter(issue_cycle__cycle_id__in=cycle_ids)
-            if module_ids:
-                queryset = queryset.filter(issue_module__module_id__in=module_ids)
+            queryset = Issue.objects.filter(workspace__slug=slug, **filters)
 
             total_issues = queryset.count()
             distribution = build_graph_plot(
@@ -75,18 +67,18 @@ class AnalyticsEndpoint(BaseAPIView):
 
                 colors = (
                     State.objects.filter(
-                        workspace__slug=slug, project_id__in=project_ids
+                        workspace__slug=slug, project_id__in=filters.get("project__in")
                     ).values(key, "color")
-                    if project_ids
+                    if filters.get("project__in", False)
                     else State.objects.filter(workspace__slug=slug).values(key, "color")
                 )
 
             if x_axis in ["labels__name"] or segment in ["labels__name"]:
                 colors = (
                     Label.objects.filter(
-                        workspace__slug=slug, project_id__in=project_ids
+                        workspace__slug=slug, project_id__in=filters.get("project__in")
                     ).values("name", "color")
-                    if project_ids
+                    if filters.get("project__in", False)
                     else Label.objects.filter(workspace__slug=slug).values(
                         "name", "color"
                     )
@@ -213,18 +205,9 @@ class DefaultAnalyticsEndpoint(BaseAPIView):
 
     def get(self, request, slug):
         try:
-            queryset = Issue.objects.filter(workspace__slug=slug)
+            filters = issue_filters(request.GET, "GET")
 
-            project_ids = request.GET.getlist("project")
-            cycle_ids = request.GET.getlist("cycle")
-            module_ids = request.GET.getlist("module")
-
-            if project_ids:
-                queryset = queryset.filter(project_id__in=project_ids)
-            if cycle_ids:
-                queryset = queryset.filter(issue_cycle__cycle_id__in=cycle_ids)
-            if module_ids:
-                queryset = queryset.filter(issue_module__module_id__in=module_ids)
+            queryset = Issue.objects.filter(workspace__slug=slug, **filters)
 
             total_issues = queryset.count()
 

From 6a7894811368e025277ce4c5ac392347e0f60924 Mon Sep 17 00:00:00 2001
From: pablohashescobar <118773738+pablohashescobar@users.noreply.github.com>
Date: Fri, 12 May 2023 12:22:42 +0530
Subject: [PATCH 18/81] fix: analytics (#1037)

* fix: most issue created by user keys

* fix: cycle and module filters for GET method
---
 apiserver/plane/api/views/analytic.py  | 12 ++----------
 apiserver/plane/utils/issue_filters.py |  4 ++--
 2 files changed, 4 insertions(+), 12 deletions(-)

diff --git a/apiserver/plane/api/views/analytic.py b/apiserver/plane/api/views/analytic.py
index 56cb08727..e054678fe 100644
--- a/apiserver/plane/api/views/analytic.py
+++ b/apiserver/plane/api/views/analytic.py
@@ -1,16 +1,8 @@
 # Django imports
 from django.db.models import (
-    Q,
     Count,
     Sum,
-    Value,
-    Case,
-    When,
-    FloatField,
-    Subquery,
-    OuterRef,
     F,
-    ExpressionWrapper,
 )
 from django.db.models.functions import ExtractMonth
 
@@ -238,8 +230,8 @@ class DefaultAnalyticsEndpoint(BaseAPIView):
                 .order_by("month")
             )
             most_issue_created_user = (
-                queryset.filter(created_by__isnull=False)
-                .values("assignees__email", "assignees__avatar")
+                queryset.exclude(created_by=None)
+                .values("created_by__email", "created_by__avatar")
                 .annotate(count=Count("id"))
                 .order_by("-count")
             )[:5]
diff --git a/apiserver/plane/utils/issue_filters.py b/apiserver/plane/utils/issue_filters.py
index c9328ecf1..944906f92 100644
--- a/apiserver/plane/utils/issue_filters.py
+++ b/apiserver/plane/utils/issue_filters.py
@@ -213,7 +213,7 @@ def filter_cycle(params, filter, method):
     if method == "GET":
         cycles = params.get("cycle").split(",")
         if len(cycles) and "" not in cycles:
-            filter["cycle__in"] = cycles
+            filter["issue_cycle__cycle_id__in"] = cycles
     else:
         if params.get("cycle", None) and len(params.get("cycle")):
             filter["issue_cycle__cycle_id__in"] = params.get("cycle")
@@ -224,7 +224,7 @@ def filter_module(params, filter, method):
     if method == "GET":
         modules = params.get("module").split(",")
         if len(modules) and "" not in modules:
-            filter["module__in"] = modules
+            filter["issue_module__module_id__in"] = modules
     else:
         if params.get("module", None) and len(params.get("module")):
             filter["issue_module__module_id__in"] = params.get("module")

From bf865f399fa1d209f18137295897e94594d7878b Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Fri, 12 May 2023 12:41:31 +0530
Subject: [PATCH 19/81] fix: kanban board horizontal scroll (#1038)

* fix: kanban board horizontal scroll

* chore: droppable placeholder position
---
 .../core/board-view/single-board.tsx          | 90 ++++++++++---------
 1 file changed, 46 insertions(+), 44 deletions(-)

diff --git a/apps/app/components/core/board-view/single-board.tsx b/apps/app/components/core/board-view/single-board.tsx
index 5d33b15bf..d0fe1834a 100644
--- a/apps/app/components/core/board-view/single-board.tsx
+++ b/apps/app/components/core/board-view/single-board.tsx
@@ -66,45 +66,45 @@ export const SingleBoard: React.FC<Props> = ({
   }, [currentState]);
 
   return (
-    <div className={`h-full flex-shrink-0 ${!isCollapsed ? "" : "w-96"}`}>
-      <div className={`${!isCollapsed ? "" : "flex h-full flex-col space-y-3"}`}>
-        <BoardHeader
-          addIssueToState={addIssueToState}
-          currentState={currentState}
-          groupTitle={groupTitle}
-          isCollapsed={isCollapsed}
-          setIsCollapsed={setIsCollapsed}
-          isCompleted={isCompleted}
-        />
-        {isCollapsed && (
-          <StrictModeDroppable key={groupTitle} droppableId={groupTitle}>
-            {(provided, snapshot) => (
-              <div
-                className={`relative h-full overflow-y-auto p-1  ${
-                  snapshot.isDraggingOver ? "bg-brand-base/20" : ""
-                } ${!isCollapsed ? "hidden" : "block"}`}
-                ref={provided.innerRef}
-                {...provided.droppableProps}
-              >
-                {orderBy !== "sort_order" && (
-                  <>
-                    <div
-                      className={`absolute ${
-                        snapshot.isDraggingOver ? "block" : "hidden"
-                      } pointer-events-none top-0 left-0 z-[99] h-full w-full bg-brand-surface-1 opacity-50`}
-                    />
-                    <div
-                      className={`absolute ${
-                        snapshot.isDraggingOver ? "block" : "hidden"
-                      } pointer-events-none top-1/2 left-1/2 z-[99] -translate-y-1/2 -translate-x-1/2 whitespace-nowrap rounded bg-brand-base p-2 text-xs`}
-                    >
-                      This board is ordered by{" "}
-                      {replaceUnderscoreIfSnakeCase(
-                        orderBy ? (orderBy[0] === "-" ? orderBy.slice(1) : orderBy) : "created_at"
-                      )}
-                    </div>
-                  </>
-                )}
+    <div className={`flex-shrink-0 ${!isCollapsed ? "" : "flex h-full flex-col w-96"}`}>
+      <BoardHeader
+        addIssueToState={addIssueToState}
+        currentState={currentState}
+        groupTitle={groupTitle}
+        isCollapsed={isCollapsed}
+        setIsCollapsed={setIsCollapsed}
+        isCompleted={isCompleted}
+      />
+      {isCollapsed && (
+        <StrictModeDroppable key={groupTitle} droppableId={groupTitle}>
+          {(provided, snapshot) => (
+            <div
+              className={`relative h-full ${
+                orderBy !== "sort_order" && snapshot.isDraggingOver ? "bg-brand-base/20" : ""
+              } ${!isCollapsed ? "hidden" : "flex flex-col"}`}
+              ref={provided.innerRef}
+              {...provided.droppableProps}
+            >
+              {orderBy !== "sort_order" && (
+                <>
+                  <div
+                    className={`absolute ${
+                      snapshot.isDraggingOver ? "block" : "hidden"
+                    } pointer-events-none top-0 left-0 z-[99] h-full w-full bg-brand-surface-1 opacity-50`}
+                  />
+                  <div
+                    className={`absolute ${
+                      snapshot.isDraggingOver ? "block" : "hidden"
+                    } pointer-events-none top-1/2 left-1/2 z-[99] -translate-y-1/2 -translate-x-1/2 whitespace-nowrap rounded bg-brand-base p-2 text-xs`}
+                  >
+                    This board is ordered by{" "}
+                    {replaceUnderscoreIfSnakeCase(
+                      orderBy ? (orderBy[0] === "-" ? orderBy.slice(1) : orderBy) : "created_at"
+                    )}
+                  </div>
+                </>
+              )}
+              <div className="overflow-y-auto pt-3">
                 {groupedByIssues?.[groupTitle].map((issue, index) => (
                   <Draggable
                     key={issue.id}
@@ -146,10 +146,12 @@ export const SingleBoard: React.FC<Props> = ({
                 >
                   {provided.placeholder}
                 </span>
+              </div>
+              <div>
                 {type === "issue" ? (
                   <button
                     type="button"
-                    className="flex items-center gap-2 font-medium text-brand-accent outline-none"
+                    className="flex items-center gap-2 font-medium text-brand-accent outline-none p-1"
                     onClick={addIssueToState}
                   >
                     <PlusIcon className="h-4 w-4" />
@@ -182,10 +184,10 @@ export const SingleBoard: React.FC<Props> = ({
                   )
                 )}
               </div>
-            )}
-          </StrictModeDroppable>
-        )}
-      </div>
+            </div>
+          )}
+        </StrictModeDroppable>
+      )}
     </div>
   );
 };

From 512b8c104d63527f2a525bdb79c12684cbd875f7 Mon Sep 17 00:00:00 2001
From: vamsi <vamsi.kurama@gmail.com>
Date: Fri, 12 May 2023 17:02:34 +0530
Subject: [PATCH 20/81] dev: analytics migrations

---
 .../plane/db/migrations/0031_analyticview.py  | 37 +++++++++++++++++++
 1 file changed, 37 insertions(+)
 create mode 100644 apiserver/plane/db/migrations/0031_analyticview.py

diff --git a/apiserver/plane/db/migrations/0031_analyticview.py b/apiserver/plane/db/migrations/0031_analyticview.py
new file mode 100644
index 000000000..7e02b78b2
--- /dev/null
+++ b/apiserver/plane/db/migrations/0031_analyticview.py
@@ -0,0 +1,37 @@
+# Generated by Django 3.2.18 on 2023-05-12 11:31
+
+from django.conf import settings
+from django.db import migrations, models
+import django.db.models.deletion
+import uuid
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('db', '0030_alter_estimatepoint_unique_together'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='AnalyticView',
+            fields=[
+                ('created_at', models.DateTimeField(auto_now_add=True, verbose_name='Created At')),
+                ('updated_at', models.DateTimeField(auto_now=True, verbose_name='Last Modified At')),
+                ('id', models.UUIDField(db_index=True, default=uuid.uuid4, editable=False, primary_key=True, serialize=False, unique=True)),
+                ('name', models.CharField(max_length=255)),
+                ('description', models.TextField(blank=True)),
+                ('query', models.JSONField()),
+                ('query_dict', models.JSONField(default=dict)),
+                ('created_by', models.ForeignKey(null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='analyticview_created_by', to=settings.AUTH_USER_MODEL, verbose_name='Created By')),
+                ('updated_by', models.ForeignKey(null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='analyticview_updated_by', to=settings.AUTH_USER_MODEL, verbose_name='Last Modified By')),
+                ('workspace', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='analytics', to='db.workspace')),
+            ],
+            options={
+                'verbose_name': 'Analytic',
+                'verbose_name_plural': 'Analytics',
+                'db_table': 'analytic_views',
+                'ordering': ('-created_at',),
+            },
+        ),
+    ]

From 37bb183bf072025b79ec44fc28a0c43b874900f8 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Mon, 15 May 2023 11:22:06 +0530
Subject: [PATCH 21/81] chore: update analytics x-axis, tooltip and table
 heading values (#1040)

* chore: global bar graph component

* chore: global pie graph component

* chore: global line graph component

* chore: removed unnecessary file

* chore: refactored global chart components to accept all props

* chore: function to convert response to chart data

* chore: global calendar graph component added

* chore: global scatter plot graph component

* feat: analytics boilerplate created

* chore: null value for segment and project

* chore: clean up file

* chore: change project query param key

* chore: export, refresh buttons, analytics table

* fix: analytics fetch key error

* chore: show only integer values in the y-axis

* chore: custom x-axis tick values and bar colors

* refactor: divide analytics page into granular components

* chore: convert analytics page to modal, save analytics modal

* fix: build error

* fix: modal overflow issues, analytics loading screen

* chore: custom tooltip, refactor: graphs folder structure

* refactor: folder structure, chore: x-axis tick values for larger data

* chore: code cleanup

* chore: remove unnecessary files

* fix: refresh analytics button on error

* feat: scope and demand analytics

* refactor: scope and demand and custom analytics folder structure

* fix: dynamic import type

* chore: minor updates

* feat: project, cycle and module level analytics

* style: project analytics modal

* fix: merge conflicts

* style: new scope and demand ui, user avatars in bar graph

* fix: default analytics types

* chore: new values when dimensioned by date

* chore: update table and tooltip content when dimensioned or segmented by dates
---
 .../custom-analytics/custom-analytics.tsx     |  12 +-
 .../custom-analytics/graph/custom-tooltip.tsx |  58 ++++---
 .../custom-analytics/graph/index.tsx          |  31 +---
 .../analytics/custom-analytics/table.tsx      |  15 +-
 .../components/analytics/project-modal.tsx    |   4 +-
 .../analytics/scope-and-demand/demand.tsx     |   4 +-
 .../analytics/scope-and-demand/index.ts       |   2 +
 .../scope-and-demand/leaderboard.tsx          |  41 +++++
 .../scope-and-demand/scope-and-demand.tsx     |  51 +++++--
 .../analytics/scope-and-demand/scope.tsx      | 141 +++++++-----------
 .../scope-and-demand/year-wise-issues.tsx     |  47 ++++++
 .../components/analytics/workspace-modal.tsx  |   4 +-
 apps/app/components/ui/graphs/bar-graph.tsx   |  11 ++
 apps/app/components/ui/graphs/line-graph.tsx  |  16 +-
 apps/app/constants/analytics.ts               |  98 ++----------
 apps/app/helpers/analytics.helper.ts          |  91 +++++++++++
 apps/app/helpers/graph.helper.ts              |  24 +++
 apps/app/types/analytics.d.ts                 |  22 ++-
 18 files changed, 401 insertions(+), 271 deletions(-)
 create mode 100644 apps/app/components/analytics/scope-and-demand/leaderboard.tsx
 create mode 100644 apps/app/components/analytics/scope-and-demand/year-wise-issues.tsx
 create mode 100644 apps/app/helpers/analytics.helper.ts
 create mode 100644 apps/app/helpers/graph.helper.ts

diff --git a/apps/app/components/analytics/custom-analytics/custom-analytics.tsx b/apps/app/components/analytics/custom-analytics/custom-analytics.tsx
index 7f393aa4c..d1ec7392c 100644
--- a/apps/app/components/analytics/custom-analytics/custom-analytics.tsx
+++ b/apps/app/components/analytics/custom-analytics/custom-analytics.tsx
@@ -17,8 +17,8 @@ import {
 } from "components/analytics";
 // ui
 import { Loader, PrimaryButton } from "components/ui";
-// types
-import { convertResponseToBarGraphData } from "constants/analytics";
+// helpers
+import { convertResponseToBarGraphData } from "helpers/analytics.helper";
 // types
 import { IAnalyticsParams } from "types";
 // fetch-keys
@@ -63,11 +63,7 @@ export const CustomAnalytics: React.FC<Props> = ({ isProjectLevel = false, fullS
   );
 
   const yAxisKey = params.y_axis === "issue_count" ? "count" : "effort";
-  const barGraphData = convertResponseToBarGraphData(
-    analytics?.distribution,
-    watch("segment") ? true : false,
-    watch("y_axis")
-  );
+  const barGraphData = convertResponseToBarGraphData(analytics?.distribution, params);
 
   return (
     <>
@@ -125,7 +121,7 @@ export const CustomAnalytics: React.FC<Props> = ({ isProjectLevel = false, fullS
               <div className="space-y-4 text-brand-secondary">
                 <p className="text-sm">There was some error in fetching the data.</p>
                 <div className="flex items-center justify-center gap-2">
-                  <PrimaryButton onClick={mutateAnalytics}>Refresh</PrimaryButton>
+                  <PrimaryButton onClick={() => mutateAnalytics()}>Refresh</PrimaryButton>
                 </div>
               </div>
             </div>
diff --git a/apps/app/components/analytics/custom-analytics/graph/custom-tooltip.tsx b/apps/app/components/analytics/custom-analytics/graph/custom-tooltip.tsx
index 5ec1d7215..9d392c214 100644
--- a/apps/app/components/analytics/custom-analytics/graph/custom-tooltip.tsx
+++ b/apps/app/components/analytics/custom-analytics/graph/custom-tooltip.tsx
@@ -1,5 +1,7 @@
 // nivo
 import { BarTooltipProps } from "@nivo/bar";
+import { DATE_KEYS } from "constants/analytics";
+import { renderMonthAndYear } from "helpers/analytics.helper";
 // types
 import { IAnalyticsParams } from "types";
 
@@ -8,27 +10,39 @@ type Props = {
   params: IAnalyticsParams;
 };
 
-export const CustomTooltip: React.FC<Props> = ({ datum, params }) => (
-  <div className="flex items-center gap-2 rounded-md border border-brand-base bg-brand-base p-2 text-xs">
-    <span
-      className="h-3 w-3 rounded"
-      style={{
-        backgroundColor: datum.color,
-      }}
-    />
-    <span
-      className={`font-medium text-brand-secondary ${
-        params.segment
-          ? params.segment === "priority" || params.segment === "state__group"
+export const CustomTooltip: React.FC<Props> = ({ datum, params }) => {
+  let tooltipValue: string | number = "";
+
+  if (params.segment) {
+    if (DATE_KEYS.includes(params.segment)) tooltipValue = renderMonthAndYear(datum.id);
+    else tooltipValue = datum.id;
+  } else {
+    if (DATE_KEYS.includes(params.x_axis)) tooltipValue = datum.indexValue;
+    else tooltipValue = datum.id === "count" ? "Issue count" : "Effort";
+  }
+
+  return (
+    <div className="flex items-center gap-2 rounded-md border border-brand-base bg-brand-base p-2 text-xs">
+      <span
+        className="h-3 w-3 rounded"
+        style={{
+          backgroundColor: datum.color,
+        }}
+      />
+      <span
+        className={`font-medium text-brand-secondary ${
+          params.segment
+            ? params.segment === "priority" || params.segment === "state__group"
+              ? "capitalize"
+              : ""
+            : params.x_axis === "priority" || params.x_axis === "state__group"
             ? "capitalize"
             : ""
-          : params.x_axis === "priority" || params.x_axis === "state__group"
-          ? "capitalize"
-          : ""
-      }`}
-    >
-      {params.segment ? datum.id : datum.id === "count" ? "Issue count" : "Effort"}:
-    </span>
-    <span>{datum.value}</span>
-  </div>
-);
+        }`}
+      >
+        {tooltipValue}:
+      </span>
+      <span>{datum.value}</span>
+    </div>
+  );
+};
diff --git a/apps/app/components/analytics/custom-analytics/graph/index.tsx b/apps/app/components/analytics/custom-analytics/graph/index.tsx
index 0616b0853..12d5803e7 100644
--- a/apps/app/components/analytics/custom-analytics/graph/index.tsx
+++ b/apps/app/components/analytics/custom-analytics/graph/index.tsx
@@ -6,10 +6,10 @@ import { CustomTooltip } from "./custom-tooltip";
 import { BarGraph } from "components/ui";
 // helpers
 import { findStringWithMostCharacters } from "helpers/array.helper";
+import { generateBarColor } from "helpers/analytics.helper";
 // types
 import { IAnalyticsParams, IAnalyticsResponse } from "types";
 // constants
-import { generateBarColor } from "constants/analytics";
 
 type Props = {
   analytics: IAnalyticsResponse;
@@ -47,28 +47,7 @@ export const AnalyticsGraph: React.FC<Props> = ({
       });
     else data = barGraphData.data.map((d) => d[yAxisKey] as number);
 
-    const minValue = 0;
-    const maxValue = Math.max(...data);
-
-    const valueRange = maxValue - minValue;
-
-    let tickInterval = 1;
-    if (valueRange > 10) tickInterval = 2;
-    if (valueRange > 50) tickInterval = 5;
-    if (valueRange > 100) tickInterval = 10;
-    if (valueRange > 200) tickInterval = 50;
-    if (valueRange > 300) tickInterval = (Math.ceil(valueRange / 100) * 100) / 10;
-
-    const tickValues = [];
-    let tickValue = minValue;
-    while (tickValue <= maxValue) {
-      tickValues.push(tickValue);
-      tickValue += tickInterval;
-    }
-
-    if (!tickValues.includes(maxValue)) tickValues.push(maxValue);
-
-    return tickValues;
+    return data;
   };
 
   const longestXAxisLabel = findStringWithMostCharacters(barGraphData.data.map((d) => `${d.name}`));
@@ -78,11 +57,6 @@ export const AnalyticsGraph: React.FC<Props> = ({
       data={barGraphData.data}
       indexBy="name"
       keys={barGraphData.xAxisKeys}
-      axisLeft={{
-        tickSize: 0,
-        tickPadding: 10,
-        tickValues: generateYAxisTickValues(),
-      }}
       colors={(datum) =>
         generateBarColor(
           params.segment ? `${datum.id}` : `${datum.indexValue}`,
@@ -91,6 +65,7 @@ export const AnalyticsGraph: React.FC<Props> = ({
           params.segment ? "segment" : "x_axis"
         )
       }
+      customYAxisTickValues={generateYAxisTickValues()}
       tooltip={(datum) => <CustomTooltip datum={datum} params={params} />}
       height={fullScreen ? "400px" : "300px"}
       margin={{ right: 20, bottom: longestXAxisLabel.length * 5 + 20 }}
diff --git a/apps/app/components/analytics/custom-analytics/table.tsx b/apps/app/components/analytics/custom-analytics/table.tsx
index a6ec1cb89..73be59538 100644
--- a/apps/app/components/analytics/custom-analytics/table.tsx
+++ b/apps/app/components/analytics/custom-analytics/table.tsx
@@ -4,14 +4,13 @@ import { BarDatum } from "@nivo/bar";
 import { getPriorityIcon } from "components/icons";
 // helpers
 import { addSpaceIfCamelCase } from "helpers/string.helper";
+// helpers
+import { generateBarColor, renderMonthAndYear } from "helpers/analytics.helper";
 // types
 import { IAnalyticsParams, IAnalyticsResponse } from "types";
 // constants
-import {
-  ANALYTICS_X_AXIS_VALUES,
-  ANALYTICS_Y_AXIS_VALUES,
-  generateBarColor,
-} from "constants/analytics";
+import { ANALYTICS_X_AXIS_VALUES, ANALYTICS_Y_AXIS_VALUES, DATE_KEYS } from "constants/analytics";
+import { MONTHS_LIST } from "constants/calendar";
 
 type Props = {
   analytics: IAnalyticsResponse;
@@ -55,7 +54,7 @@ export const AnalyticsTable: React.FC<Props> = ({ analytics, barGraphData, param
                           }}
                         />
                       )}
-                      {key}
+                      {DATE_KEYS.includes(params.segment ?? "") ? renderMonthAndYear(key) : key}
                     </div>
                   </th>
                 ))
@@ -74,7 +73,9 @@ export const AnalyticsTable: React.FC<Props> = ({ analytics, barGraphData, param
               >
                 <td
                   className={`flex items-center gap-2 whitespace-nowrap py-2 px-2.5 font-medium ${
-                    params.x_axis === "priority" ? "capitalize" : ""
+                    params.x_axis === "priority" || params.x_axis === "state__group"
+                      ? "capitalize"
+                      : ""
                   }`}
                 >
                   {params.x_axis === "priority" ? (
diff --git a/apps/app/components/analytics/project-modal.tsx b/apps/app/components/analytics/project-modal.tsx
index ca185c43e..7e3e5efeb 100644
--- a/apps/app/components/analytics/project-modal.tsx
+++ b/apps/app/components/analytics/project-modal.tsx
@@ -38,7 +38,7 @@ export const AnalyticsProjectModal: React.FC<Props> = ({ isOpen, onClose }) => {
       >
         <div
           className={`flex items-center justify-between gap-2 border-b border-b-brand-base bg-brand-sidebar p-3 text-sm ${
-            fullScreen ? "" : "py-[1.3rem]"
+            fullScreen ? "" : "py-[1.275rem]"
           }`}
         >
           <h3>Project Analytics</h3>
@@ -80,7 +80,7 @@ export const AnalyticsProjectModal: React.FC<Props> = ({ isOpen, onClose }) => {
           </Tab.List>
           <Tab.Panels as={Fragment}>
             <Tab.Panel as={Fragment}>
-              <ScopeAndDemand fullScreen={fullScreen} />
+              <ScopeAndDemand fullScreen={fullScreen} isProjectLevel />
             </Tab.Panel>
             <Tab.Panel as={Fragment}>
               <CustomAnalytics fullScreen={fullScreen} isProjectLevel />
diff --git a/apps/app/components/analytics/scope-and-demand/demand.tsx b/apps/app/components/analytics/scope-and-demand/demand.tsx
index 6f100416a..784b3fcb4 100644
--- a/apps/app/components/analytics/scope-and-demand/demand.tsx
+++ b/apps/app/components/analytics/scope-and-demand/demand.tsx
@@ -10,14 +10,14 @@ type Props = {
 };
 
 export const AnalyticsDemand: React.FC<Props> = ({ defaultAnalytics }) => (
-  <div className="space-y-3 self-start rounded-[10px] border border-brand-base p-3">
+  <div className="space-y-3 rounded-[10px] border border-brand-base p-3">
     <h5 className="text-xs text-red-500">DEMAND</h5>
     <div>
       <h4 className="text-brand-bas text-base font-medium">Total open tasks</h4>
       <h3 className="mt-1 text-xl font-semibold">{defaultAnalytics.open_issues}</h3>
     </div>
     <div className="space-y-6">
-      {defaultAnalytics.open_issues_classified.map((group) => {
+      {defaultAnalytics?.open_issues_classified.map((group) => {
         const percentage = ((group.state_count / defaultAnalytics.total_issues) * 100).toFixed(0);
 
         return (
diff --git a/apps/app/components/analytics/scope-and-demand/index.ts b/apps/app/components/analytics/scope-and-demand/index.ts
index fe18eb0f6..ae756a961 100644
--- a/apps/app/components/analytics/scope-and-demand/index.ts
+++ b/apps/app/components/analytics/scope-and-demand/index.ts
@@ -1,3 +1,5 @@
 export * from "./demand";
+export * from "./leaderboard";
 export * from "./scope-and-demand";
 export * from "./scope";
+export * from "./year-wise-issues";
diff --git a/apps/app/components/analytics/scope-and-demand/leaderboard.tsx b/apps/app/components/analytics/scope-and-demand/leaderboard.tsx
new file mode 100644
index 000000000..978e29399
--- /dev/null
+++ b/apps/app/components/analytics/scope-and-demand/leaderboard.tsx
@@ -0,0 +1,41 @@
+import Image from "next/image";
+
+type Props = {
+  users: {
+    avatar: string | null;
+    email: string | null;
+    count: number;
+  }[];
+  title: string;
+};
+
+export const AnalyticsLeaderboard: React.FC<Props> = ({ users, title }) => (
+  <div className="p-3 border border-brand-base rounded-[10px]">
+    <h6 className="text-base font-medium">{title}</h6>
+    <div className="mt-3 space-y-3">
+      {users.map((user) => (
+        <div key={user.email} className="flex items-start justify-between gap-4 text-xs">
+          <div className="flex items-center gap-2">
+            {user && user.avatar && user.avatar !== "" ? (
+              <div className="rounded-full h-4 w-4 flex-shrink-0">
+                <Image
+                  src={user.avatar}
+                  height="100%"
+                  width="100%"
+                  className="rounded-full"
+                  alt={user.email ?? "No assignee"}
+                />
+              </div>
+            ) : (
+              <div className="grid place-items-center flex-shrink-0 rounded-full bg-gray-700 text-[11px] capitalize text-white h-4 w-4">
+                {(user.email ?? "No assignee").charAt(0)}
+              </div>
+            )}
+            <span className="break-all text-brand-secondary">{user.email ?? "No assignee"}</span>
+          </div>
+          <span className="flex-shrink-0">{user.count}</span>
+        </div>
+      ))}
+    </div>
+  </div>
+);
diff --git a/apps/app/components/analytics/scope-and-demand/scope-and-demand.tsx b/apps/app/components/analytics/scope-and-demand/scope-and-demand.tsx
index 1f98672e0..424836a89 100644
--- a/apps/app/components/analytics/scope-and-demand/scope-and-demand.tsx
+++ b/apps/app/components/analytics/scope-and-demand/scope-and-demand.tsx
@@ -5,7 +5,12 @@ import useSWR from "swr";
 // services
 import analyticsService from "services/analytics.service";
 // components
-import { AnalyticsDemand, AnalyticsScope } from "components/analytics";
+import {
+  AnalyticsDemand,
+  AnalyticsLeaderboard,
+  AnalyticsScope,
+  AnalyticsYearWiseIssues,
+} from "components/analytics";
 // ui
 import { Loader, PrimaryButton } from "components/ui";
 // fetch-keys
@@ -13,17 +18,20 @@ import { DEFAULT_ANALYTICS } from "constants/fetch-keys";
 
 type Props = {
   fullScreen?: boolean;
+  isProjectLevel?: boolean;
 };
 
-export const ScopeAndDemand: React.FC<Props> = ({ fullScreen = true }) => {
+export const ScopeAndDemand: React.FC<Props> = ({ fullScreen = true, isProjectLevel = true }) => {
   const router = useRouter();
   const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
 
-  const params = {
-    project: projectId ? projectId.toString() : null,
-    cycle: cycleId ? cycleId.toString() : null,
-    module: moduleId ? moduleId.toString() : null,
-  };
+  const params = isProjectLevel
+    ? {
+        project: projectId ? projectId.toString() : null,
+        cycle: cycleId ? cycleId.toString() : null,
+        module: moduleId ? moduleId.toString() : null,
+      }
+    : undefined;
 
   const {
     data: defaultAnalytics,
@@ -41,15 +49,36 @@ export const ScopeAndDemand: React.FC<Props> = ({ fullScreen = true }) => {
       {!defaultAnalyticsError ? (
         defaultAnalytics ? (
           <div className="h-full overflow-y-auto p-5 text-sm">
-            <div className={`grid grid-cols-1 gap-5 ${fullScreen ? "lg:grid-cols-2" : ""}`}>
+            <div className={`grid grid-cols-1 gap-5 ${fullScreen ? "md:grid-cols-2" : ""}`}>
               <AnalyticsDemand defaultAnalytics={defaultAnalytics} />
               <AnalyticsScope defaultAnalytics={defaultAnalytics} />
+              <AnalyticsLeaderboard
+                users={defaultAnalytics.most_issue_created_user.map((user) => ({
+                  avatar: user.created_by__avatar,
+                  email: user.created_by__email,
+                  count: user.count,
+                }))}
+                title="Most issues created"
+              />
+              <AnalyticsLeaderboard
+                users={defaultAnalytics.most_issue_closed_user.map((user) => ({
+                  avatar: user.assignees__avatar,
+                  email: user.assignees__email,
+                  count: user.count,
+                }))}
+                title="Most issues closed"
+              />
+              <div className={fullScreen ? "md:col-span-2" : ""}>
+                <AnalyticsYearWiseIssues defaultAnalytics={defaultAnalytics} />
+              </div>
             </div>
           </div>
         ) : (
           <Loader className="grid grid-cols-1 gap-5 p-5 lg:grid-cols-2">
-            <Loader.Item height="300px" />
-            <Loader.Item height="300px" />
+            <Loader.Item height="250px" />
+            <Loader.Item height="250px" />
+            <Loader.Item height="250px" />
+            <Loader.Item height="250px" />
           </Loader>
         )
       ) : (
@@ -57,7 +86,7 @@ export const ScopeAndDemand: React.FC<Props> = ({ fullScreen = true }) => {
           <div className="space-y-4 text-brand-secondary">
             <p className="text-sm">There was some error in fetching the data.</p>
             <div className="flex items-center justify-center gap-2">
-              <PrimaryButton onClick={mutateDefaultAnalytics}>Refresh</PrimaryButton>
+              <PrimaryButton onClick={() => mutateDefaultAnalytics()}>Refresh</PrimaryButton>
             </div>
           </div>
         </div>
diff --git a/apps/app/components/analytics/scope-and-demand/scope.tsx b/apps/app/components/analytics/scope-and-demand/scope.tsx
index a808b83f9..60a50fa12 100644
--- a/apps/app/components/analytics/scope-and-demand/scope.tsx
+++ b/apps/app/components/analytics/scope-and-demand/scope.tsx
@@ -1,98 +1,65 @@
 // ui
-import { BarGraph, LineGraph } from "components/ui";
+import { BarGraph } from "components/ui";
 // types
 import { IDefaultAnalyticsResponse } from "types";
-// constants
-import { MONTHS_LIST } from "constants/calendar";
 
 type Props = {
   defaultAnalytics: IDefaultAnalyticsResponse;
 };
 
-export const AnalyticsScope: React.FC<Props> = ({ defaultAnalytics }) => {
-  const currentMonth = new Date().getMonth();
-  const startMonth = Math.floor(currentMonth / 3) * 3 + 1;
-  const quarterMonthsList = [startMonth, startMonth + 1, startMonth + 2];
+export const AnalyticsScope: React.FC<Props> = ({ defaultAnalytics }) => (
+  <div className="rounded-[10px] border border-brand-base">
+    <h5 className="p-3 text-xs text-green-500">SCOPE</h5>
+    <div className="divide-y divide-brand-base">
+      <div>
+        <h6 className="px-3 text-base font-medium">Pending issues</h6>
+        <BarGraph
+          data={defaultAnalytics.pending_issue_user}
+          indexBy="assignees__email"
+          keys={["count"]}
+          height="250px"
+          colors={() => `#f97316`}
+          customYAxisTickValues={defaultAnalytics.pending_issue_user.map((d) => d.count)}
+          tooltip={(datum) => (
+            <div className="rounded-md border border-brand-base bg-brand-base p-2 text-xs">
+              <span className="font-medium text-brand-secondary">
+                Issue count- {datum.indexValue ?? "No assignee"}:{" "}
+              </span>
+              {datum.value}
+            </div>
+          )}
+          axisBottom={{
+            renderTick: (datum) => {
+              const avatar =
+                defaultAnalytics.pending_issue_user[datum.tickIndex].assignees__avatar ?? "";
 
-  return (
-    <div className="rounded-[10px] border border-brand-base">
-      <h5 className="p-3 text-xs text-green-500">SCOPE</h5>
-      <div className="divide-y divide-brand-base">
-        <div>
-          <h6 className="px-3 text-base font-medium">Pending issues</h6>
-          <BarGraph
-            data={defaultAnalytics.pending_issue_user}
-            indexBy="assignees__email"
-            keys={["count"]}
-            height="250px"
-            colors={() => `#f97316`}
-            tooltip={(datum) => (
-              <div className="rounded-md border border-brand-base bg-brand-base p-2 text-xs">
-                <span className="font-medium text-brand-secondary">
-                  Issue count- {datum.indexValue ?? "No assignee"}:{" "}
-                </span>
-                {datum.value}
-              </div>
-            )}
-            axisBottom={{
-              tickValues: [],
-            }}
-            margin={{ top: 20 }}
-          />
-        </div>
-        <div className="grid grid-cols-1 divide-y divide-brand-base sm:grid-cols-2 sm:divide-x">
-          <div className="p-3">
-            <h6 className="text-base font-medium">Most issues created</h6>
-            <div className="mt-3 space-y-3">
-              {defaultAnalytics.most_issue_created_user.map((user) => (
-                <div
-                  key={user.assignees__email}
-                  className="flex items-start justify-between gap-4 text-xs"
-                >
-                  <span className="break-all text-brand-secondary">{user.assignees__email}</span>
-                  <span className="flex-shrink-0">{user.count}</span>
-                </div>
-              ))}
-            </div>
-          </div>
-          <div className="p-3">
-            <h6 className="text-base font-medium">Most issues closed</h6>
-            <div className="mt-3 space-y-3">
-              {defaultAnalytics.most_issue_closed_user.map((user) => (
-                <div
-                  key={user.assignees__email}
-                  className="flex items-start justify-between gap-4 text-xs"
-                >
-                  <span className="break-all text-brand-secondary">{user.assignees__email}</span>
-                  <span className="flex-shrink-0">{user.count}</span>
-                </div>
-              ))}
-            </div>
-          </div>
-        </div>
-        <div className="py-3">
-          <h1 className="px-3 text-base font-medium">Issues closed in a year</h1>
-          <LineGraph
-            data={[
-              {
-                id: "issues_closed",
-                color: "rgb(var(--color-accent))",
-                data: quarterMonthsList.map((month) => ({
-                  x: MONTHS_LIST.find((m) => m.value === month)?.label.substring(0, 3),
-                  y:
-                    defaultAnalytics.issue_completed_month_wise.find((data) => data.month === month)
-                      ?.count || 0,
-                })),
-              },
-            ]}
-            height="300px"
-            colors={(datum) => datum.color}
-            curve="monotoneX"
-            margin={{ top: 20 }}
-            enableArea
-          />
-        </div>
+              if (avatar && avatar !== "")
+                return (
+                  <g transform={`translate(${datum.x},${datum.y})`}>
+                    <image
+                      x={-8}
+                      y={10}
+                      width={16}
+                      height={16}
+                      xlinkHref={avatar}
+                      style={{ clipPath: "circle(50%)" }}
+                    />
+                  </g>
+                );
+              else
+                return (
+                  <g transform={`translate(${datum.x},${datum.y})`}>
+                    <circle cy={18} r={8} fill="#374151" />
+                    <text x={0} y={21} textAnchor="middle" fontSize={9} fill="#ffffff">
+                      {(`${datum.value}` ?? "No assignee").toUpperCase().charAt(0)}
+                    </text>
+                  </g>
+                );
+            },
+          }}
+          margin={{ top: 20 }}
+        />
       </div>
     </div>
-  );
-};
+  </div>
+);
diff --git a/apps/app/components/analytics/scope-and-demand/year-wise-issues.tsx b/apps/app/components/analytics/scope-and-demand/year-wise-issues.tsx
new file mode 100644
index 000000000..e9721bd2f
--- /dev/null
+++ b/apps/app/components/analytics/scope-and-demand/year-wise-issues.tsx
@@ -0,0 +1,47 @@
+// ui
+import { LineGraph } from "components/ui";
+// types
+import { IDefaultAnalyticsResponse } from "types";
+// constants
+import { MONTHS_LIST } from "constants/calendar";
+
+type Props = {
+  defaultAnalytics: IDefaultAnalyticsResponse;
+};
+
+export const AnalyticsYearWiseIssues: React.FC<Props> = ({ defaultAnalytics }) => {
+  const currentMonth = new Date().getMonth();
+  const startMonth = Math.floor(currentMonth / 3) * 3 + 1;
+  const quarterMonthsList = [startMonth, startMonth + 1, startMonth + 2];
+
+  return (
+    <div className="py-3 border border-brand-base rounded-[10px]">
+      <h1 className="px-3 text-base font-medium">Issues closed in a year</h1>
+      <LineGraph
+        data={[
+          {
+            id: "issues_closed",
+            color: "rgb(var(--color-accent))",
+            data: MONTHS_LIST.map((month) => ({
+              x: month.label.substring(0, 3),
+              y:
+                defaultAnalytics.issue_completed_month_wise.find(
+                  (data) => data.month === month.value
+                )?.count || 0,
+            })),
+          },
+        ]}
+        customYAxisTickValues={defaultAnalytics.issue_completed_month_wise.map((data) => {
+          if (quarterMonthsList.includes(data.month)) return data.count;
+
+          return 0;
+        })}
+        height="300px"
+        colors={(datum) => datum.color}
+        curve="monotoneX"
+        margin={{ top: 20 }}
+        enableArea
+      />
+    </div>
+  );
+};
diff --git a/apps/app/components/analytics/workspace-modal.tsx b/apps/app/components/analytics/workspace-modal.tsx
index 2ceb0388e..fc0632421 100644
--- a/apps/app/components/analytics/workspace-modal.tsx
+++ b/apps/app/components/analytics/workspace-modal.tsx
@@ -22,7 +22,7 @@ export const AnalyticsWorkspaceModal: React.FC<Props> = ({ isOpen, onClose }) =>
   return (
     <>
       <div
-        className={`absolute z-20 h-full w-full bg-brand-surface-1 p-2 ${
+        className={`absolute z-40 h-full w-full bg-brand-surface-1 p-2 ${
           isOpen ? "block" : "hidden"
         }`}
       >
@@ -56,7 +56,7 @@ export const AnalyticsWorkspaceModal: React.FC<Props> = ({ isOpen, onClose }) =>
             </Tab.List>
             <Tab.Panels as={Fragment}>
               <Tab.Panel as={Fragment}>
-                <ScopeAndDemand />
+                <ScopeAndDemand isProjectLevel={false} />
               </Tab.Panel>
               <Tab.Panel as={Fragment}>
                 <CustomAnalytics />
diff --git a/apps/app/components/ui/graphs/bar-graph.tsx b/apps/app/components/ui/graphs/bar-graph.tsx
index 1d2b45330..ae4154f36 100644
--- a/apps/app/components/ui/graphs/bar-graph.tsx
+++ b/apps/app/components/ui/graphs/bar-graph.tsx
@@ -1,5 +1,7 @@
 // nivo
 import { ResponsiveBar, BarSvgProps } from "@nivo/bar";
+// helpers
+import { generateYAxisTickValues } from "helpers/graph.helper";
 // types
 import { TGraph } from "./types";
 // constants
@@ -8,11 +10,13 @@ import { CHARTS_THEME, DEFAULT_MARGIN } from "constants/graph";
 type Props = {
   indexBy: string;
   keys: string[];
+  customYAxisTickValues?: number[];
 };
 
 export const BarGraph: React.FC<Props & TGraph & Omit<BarSvgProps<any>, "height" | "width">> = ({
   indexBy,
   keys,
+  customYAxisTickValues,
   height = "400px",
   width = "100%",
   margin,
@@ -25,6 +29,13 @@ export const BarGraph: React.FC<Props & TGraph & Omit<BarSvgProps<any>, "height"
       keys={keys}
       margin={{ ...DEFAULT_MARGIN, ...(margin ?? {}) }}
       padding={rest.padding ?? rest.data.length > 7 ? 0.8 : 0.9}
+      axisLeft={{
+        tickSize: 0,
+        tickPadding: 10,
+        tickValues: customYAxisTickValues
+          ? generateYAxisTickValues(customYAxisTickValues)
+          : undefined,
+      }}
       axisBottom={{
         tickSize: 0,
         tickPadding: 10,
diff --git a/apps/app/components/ui/graphs/line-graph.tsx b/apps/app/components/ui/graphs/line-graph.tsx
index 1e133b7aa..fb082e5fc 100644
--- a/apps/app/components/ui/graphs/line-graph.tsx
+++ b/apps/app/components/ui/graphs/line-graph.tsx
@@ -1,11 +1,18 @@
 // nivo
 import { ResponsiveLine, LineSvgProps } from "@nivo/line";
+// helpers
+import { generateYAxisTickValues } from "helpers/graph.helper";
 // types
 import { TGraph } from "./types";
 // constants
 import { CHARTS_THEME, DEFAULT_MARGIN } from "constants/graph";
 
-export const LineGraph: React.FC<TGraph & LineSvgProps> = ({
+type Props = {
+  customYAxisTickValues?: number[];
+};
+
+export const LineGraph: React.FC<Props & TGraph & LineSvgProps> = ({
+  customYAxisTickValues,
   height = "400px",
   width = "100%",
   margin,
@@ -15,6 +22,13 @@ export const LineGraph: React.FC<TGraph & LineSvgProps> = ({
   <div style={{ height, width }}>
     <ResponsiveLine
       margin={{ ...DEFAULT_MARGIN, ...(margin ?? {}) }}
+      axisLeft={{
+        tickSize: 0,
+        tickPadding: 10,
+        tickValues: customYAxisTickValues
+          ? generateYAxisTickValues(customYAxisTickValues)
+          : undefined,
+      }}
       theme={{ ...CHARTS_THEME, ...(theme ?? {}) }}
       animate={true}
       {...rest}
diff --git a/apps/app/constants/analytics.ts b/apps/app/constants/analytics.ts
index 15b3f7b38..97310c741 100644
--- a/apps/app/constants/analytics.ts
+++ b/apps/app/constants/analytics.ts
@@ -1,23 +1,14 @@
-// nivo
-import { BarDatum, ComputedDatum } from "@nivo/bar";
 // types
-import {
-  IAnalyticsData,
-  IAnalyticsParams,
-  IAnalyticsResponse,
-  TXAxisValues,
-  TYAxisValues,
-} from "types";
-import { STATE_GROUP_COLORS } from "./state";
+import { TXAxisValues, TYAxisValues } from "types";
 
 export const ANALYTICS_X_AXIS_VALUES: { value: TXAxisValues; label: string }[] = [
   {
     value: "state__name",
-    label: "State Name",
+    label: "State name",
   },
   {
     value: "state__group",
-    label: "State Group",
+    label: "State group",
   },
   {
     value: "priority",
@@ -33,7 +24,7 @@ export const ANALYTICS_X_AXIS_VALUES: { value: TXAxisValues; label: string }[] =
   },
   {
     value: "estimate_point",
-    label: "Estimate",
+    label: "Estimate point",
   },
   {
     value: "issue_cycle__cycle__name",
@@ -51,10 +42,10 @@ export const ANALYTICS_X_AXIS_VALUES: { value: TXAxisValues; label: string }[] =
     value: "target_date",
     label: "Due date",
   },
-  {
-    value: "start_date",
-    label: "Start Date",
-  },
+  // {
+  //   value: "start_date",
+  //   label: "Start date",
+  // },
   {
     value: "created_at",
     label: "Created date",
@@ -72,75 +63,4 @@ export const ANALYTICS_Y_AXIS_VALUES: { value: TYAxisValues; label: string }[] =
   },
 ];
 
-export const convertResponseToBarGraphData = (
-  response: IAnalyticsData | undefined,
-  segmented: boolean,
-  yAxis: TYAxisValues
-): { data: BarDatum[]; xAxisKeys: string[] } => {
-  if (!response || !(typeof response === "object") || Object.keys(response).length === 0)
-    return { data: [], xAxisKeys: [] };
-
-  const data: BarDatum[] = [];
-
-  let xAxisKeys: string[] = [];
-  const yAxisKey = yAxis === "issue_count" ? "count" : "effort";
-
-  Object.keys(response).forEach((key) => {
-    const segments: { [key: string]: number } = {};
-
-    if (segmented) {
-      response[key].map((item: any) => {
-        segments[item.segment ?? "None"] = item[yAxisKey] ?? 0;
-
-        // store the segment in the xAxisKeys array
-        if (!xAxisKeys.includes(item.segment ?? "None")) xAxisKeys.push(item.segment ?? "None");
-      });
-
-      data.push({
-        name: key,
-        ...segments,
-      });
-    } else {
-      xAxisKeys = [yAxisKey];
-
-      const item = response[key][0];
-
-      data.push({
-        name: item.dimension ?? "None",
-        [yAxisKey]: item[yAxisKey] ?? 0,
-      });
-    }
-  });
-
-  return { data, xAxisKeys };
-};
-
-export const generateBarColor = (
-  value: string,
-  analytics: IAnalyticsResponse,
-  params: IAnalyticsParams,
-  type: "x_axis" | "segment"
-): string => {
-  let color: string | undefined = "rgb(var(--color-accent))";
-
-  if (!analytics) return color;
-
-  if (params[type] === "state__name" || params[type] === "labels__name")
-    color = analytics?.extras?.colors.find((c) => c.name === value)?.color;
-
-  if (params[type] === "state__group") color = STATE_GROUP_COLORS[value];
-
-  if (params[type] === "priority")
-    color =
-      value === "urgent"
-        ? "#ef4444"
-        : value === "high"
-        ? "#f97316"
-        : value === "medium"
-        ? "#eab308"
-        : value === "low"
-        ? "#22c55e"
-        : "#ced4da";
-
-  return color ?? "rgb(var(--color-accent))";
-};
+export const DATE_KEYS = ["completed_at", "target_date", "start_date", "created_at"];
diff --git a/apps/app/helpers/analytics.helper.ts b/apps/app/helpers/analytics.helper.ts
new file mode 100644
index 000000000..b81d71d51
--- /dev/null
+++ b/apps/app/helpers/analytics.helper.ts
@@ -0,0 +1,91 @@
+// nivo
+import { BarDatum } from "@nivo/bar";
+// types
+import { IAnalyticsData, IAnalyticsParams, IAnalyticsResponse } from "types";
+// constants
+import { STATE_GROUP_COLORS } from "constants/state";
+import { MONTHS_LIST } from "constants/calendar";
+import { DATE_KEYS } from "constants/analytics";
+
+export const convertResponseToBarGraphData = (
+  response: IAnalyticsData | undefined,
+  params: IAnalyticsParams
+): { data: BarDatum[]; xAxisKeys: string[] } => {
+  if (!response || !(typeof response === "object") || Object.keys(response).length === 0)
+    return { data: [], xAxisKeys: [] };
+
+  const data: BarDatum[] = [];
+
+  let xAxisKeys: string[] = [];
+  const yAxisKey = params.y_axis === "issue_count" ? "count" : "effort";
+
+  Object.keys(response).forEach((key) => {
+    const segments: { [key: string]: number } = {};
+
+    if (params.segment) {
+      response[key].map((item: any) => {
+        segments[item.segment ?? "None"] = item[yAxisKey] ?? 0;
+
+        // store the segment in the xAxisKeys array
+        if (!xAxisKeys.includes(item.segment ?? "None")) xAxisKeys.push(item.segment ?? "None");
+      });
+
+      data.push({
+        name: DATE_KEYS.includes(params.x_axis) ? renderMonthAndYear(key) : key,
+        ...segments,
+      });
+    } else {
+      xAxisKeys = [yAxisKey];
+
+      const item = response[key][0];
+
+      data.push({
+        name: DATE_KEYS.includes(params.x_axis)
+          ? renderMonthAndYear(item.dimension)
+          : item.dimension ?? "None",
+        [yAxisKey]: item[yAxisKey] ?? 0,
+      });
+    }
+  });
+
+  return { data, xAxisKeys };
+};
+
+export const generateBarColor = (
+  value: string,
+  analytics: IAnalyticsResponse,
+  params: IAnalyticsParams,
+  type: "x_axis" | "segment"
+): string => {
+  let color: string | undefined = "rgb(var(--color-accent))";
+
+  if (!analytics) return color;
+
+  if (params[type] === "state__name" || params[type] === "labels__name")
+    color = analytics?.extras?.colors.find((c) => c.name === value)?.color;
+
+  if (params[type] === "state__group") color = STATE_GROUP_COLORS[value];
+
+  if (params[type] === "priority")
+    color =
+      value === "urgent"
+        ? "#ef4444"
+        : value === "high"
+        ? "#f97316"
+        : value === "medium"
+        ? "#eab308"
+        : value === "low"
+        ? "#22c55e"
+        : "#ced4da";
+
+  return color ?? "rgb(var(--color-accent))";
+};
+
+export const renderMonthAndYear = (date: string | number | null): string => {
+  if (!date || date === "") return "";
+
+  return (
+    (MONTHS_LIST.find((m) => `${m.value}` === `${date}`.split("-")[1])?.label.substring(0, 3) ??
+      "None") + ` ${date}`.split("-")[0] ?? ""
+  );
+};
diff --git a/apps/app/helpers/graph.helper.ts b/apps/app/helpers/graph.helper.ts
new file mode 100644
index 000000000..3cc79518b
--- /dev/null
+++ b/apps/app/helpers/graph.helper.ts
@@ -0,0 +1,24 @@
+export const generateYAxisTickValues = (data: number[]) => {
+  if (!data || !Array.isArray(data) || data.length === 0) return [];
+
+  const minValue = 0;
+  const maxValue = Math.max(...data);
+
+  const valueRange = maxValue - minValue;
+
+  let tickInterval = 1;
+
+  if (valueRange < 10) tickInterval = 1;
+  else if (valueRange < 20) tickInterval = 2;
+  else if (valueRange < 50) tickInterval = 5;
+  else tickInterval = (Math.ceil(valueRange / 100) * 100) / 10;
+
+  const tickValues: number[] = [];
+  let tickValue = minValue;
+  while (tickValue <= maxValue) {
+    tickValues.push(tickValue);
+    tickValue += tickInterval;
+  }
+
+  return tickValues;
+};
diff --git a/apps/app/types/analytics.d.ts b/apps/app/types/analytics.d.ts
index c02f85cf7..8501c34a5 100644
--- a/apps/app/types/analytics.d.ts
+++ b/apps/app/types/analytics.d.ts
@@ -57,26 +57,24 @@ export interface IExportAnalyticsFormData {
   project?: string[];
 }
 
+export interface IDefaultAnalyticsUser {
+  assignees__avatar: string | null;
+  assignees__email: string;
+  count: number;
+}
+
 export interface IDefaultAnalyticsResponse {
   issue_completed_month_wise: { month: number; count: number }[];
-  most_issue_closed_user: {
-    assignees__avatar: string | null;
-    assignees__email: string;
-    count: number;
-  }[];
+  most_issue_closed_user: IDefaultAnalyticsUser[];
   most_issue_created_user: {
-    assignees__avatar: string | null;
-    assignees__email: string;
+    created_by__avatar: string | null;
+    created_by__email: string;
     count: number;
   }[];
   open_estimate_sum: number;
   open_issues: number;
   open_issues_classified: { state_group: string; state_count: number }[];
-  pending_issue_user: {
-    assignees__avatar: string | null;
-    assignees__email: string;
-    count: number;
-  }[];
+  pending_issue_user: IDefaultAnalyticsUser[];
   total_estimate_sum: number;
   total_issues: number;
   total_issues_classified: { state_group: string; state_count: number }[];

From dbbd9add99313b97175f5715919a531489483e53 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Mon, 15 May 2023 11:32:50 +0530
Subject: [PATCH 22/81] fix: ui and bug fix (#1043)

* style: calendar border added

* fix: calendar issue ellipsis position fix

* fix: help section overflow fix

* fix: module card date overflow fix

* style: page detail padding and position fix

* fix: cycle and module sidebar fix
---
 apps/app/components/core/calendar-view/single-issue.tsx     | 4 ++--
 apps/app/components/cycles/sidebar.tsx                      | 4 ++--
 apps/app/components/modules/sidebar.tsx                     | 4 ++--
 apps/app/components/modules/single-module-card.tsx          | 2 +-
 apps/app/components/pages/single-page-block.tsx             | 4 ++--
 apps/app/layouts/app-layout/app-sidebar.tsx                 | 2 +-
 .../projects/[projectId]/cycles/[cycleId].tsx               | 4 +---
 .../projects/[projectId]/modules/[moduleId].tsx             | 4 +---
 .../[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx | 5 +++--
 apps/app/styles/react-datepicker.css                        | 6 +++++-
 10 files changed, 20 insertions(+), 19 deletions(-)

diff --git a/apps/app/components/core/calendar-view/single-issue.tsx b/apps/app/components/core/calendar-view/single-issue.tsx
index c9f8ecf57..dc56d6126 100644
--- a/apps/app/components/core/calendar-view/single-issue.tsx
+++ b/apps/app/components/core/calendar-view/single-issue.tsx
@@ -120,11 +120,11 @@ export const SingleCalendarIssue: React.FC<Props> = ({
       ref={provided.innerRef}
       {...provided.draggableProps}
       {...provided.dragHandleProps}
-      className={`w-full cursor-pointer rounded border border-brand-base px-1.5 py-1.5 text-xs duration-300 hover:cursor-move hover:bg-brand-surface-2 ${
+      className={`w-full relative cursor-pointer rounded border border-brand-base px-1.5 py-1.5 text-xs duration-300 hover:cursor-move hover:bg-brand-surface-2 ${
         snapshot.isDragging ? "bg-brand-surface-2 shadow-lg" : ""
       }`}
     >
-      <div className="group/card relative flex w-full flex-col items-start justify-center gap-1.5 text-xs sm:w-auto ">
+      <div className="group/card flex w-full flex-col items-start justify-center gap-1.5 text-xs sm:w-auto ">
         {!isNotAllowed && (
           <div className="z-1 absolute top-1.5 right-1.5 opacity-0 group-hover/card:opacity-100">
             <CustomMenu width="auto" ellipsis>
diff --git a/apps/app/components/cycles/sidebar.tsx b/apps/app/components/cycles/sidebar.tsx
index 91e592e7d..86c8132b0 100644
--- a/apps/app/components/cycles/sidebar.tsx
+++ b/apps/app/components/cycles/sidebar.tsx
@@ -133,9 +133,9 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
     <>
       <DeleteCycleModal isOpen={cycleDeleteModal} setIsOpen={setCycleDeleteModal} data={cycle} />
       <div
-        className={`fixed top-0 ${
+        className={`fixed top-[66px] ${
           isOpen ? "right-0" : "-right-[24rem]"
-        } z-20 h-full w-[24rem] overflow-y-auto border-l border-brand-base bg-brand-sidebar py-5 duration-300`}
+        } h-full w-[24rem] overflow-y-auto border-l border-brand-base bg-brand-sidebar py-5 duration-300`}
       >
         {cycle ? (
           <>
diff --git a/apps/app/components/modules/sidebar.tsx b/apps/app/components/modules/sidebar.tsx
index e5a932608..502675bef 100644
--- a/apps/app/components/modules/sidebar.tsx
+++ b/apps/app/components/modules/sidebar.tsx
@@ -183,9 +183,9 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen,
         data={module}
       />
       <div
-        className={`fixed top-0 ${
+        className={`fixed top-[66px] ${
           isOpen ? "right-0" : "-right-[24rem]"
-        } z-20 h-full w-[24rem] overflow-y-auto border-l border-brand-base bg-brand-sidebar py-5 duration-300`}
+        } h-full w-[24rem] overflow-y-auto border-l border-brand-base bg-brand-sidebar py-5 duration-300`}
       >
         {module ? (
           <>
diff --git a/apps/app/components/modules/single-module-card.tsx b/apps/app/components/modules/single-module-card.tsx
index c4a580db5..c8fc25c46 100644
--- a/apps/app/components/modules/single-module-card.tsx
+++ b/apps/app/components/modules/single-module-card.tsx
@@ -179,7 +179,7 @@ export const SingleModuleCard: React.FC<Props> = ({ module, handleEditModule })
                 </CustomMenu>
               </div>
             </div>
-            <div className="grid grid-cols-2 gap-4 text-brand-secondary">
+            <div className="grid grid-cols-2 gap-2 text-brand-secondary">
               <div className="flex items-start gap-1">
                 <CalendarDaysIcon className="h-4 w-4" />
                 <span>Start:</span>
diff --git a/apps/app/components/pages/single-page-block.tsx b/apps/app/components/pages/single-page-block.tsx
index 85451375d..42f0e5523 100644
--- a/apps/app/components/pages/single-page-block.tsx
+++ b/apps/app/components/pages/single-page-block.tsx
@@ -293,11 +293,11 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index
             >
               <button
                 type="button"
-                className="absolute top-4 -left-0 hidden rounded p-0.5 hover:bg-brand-surface-2 group-hover:!flex"
+                className="absolute top-4 -left-0 hidden rounded p-0.5 group-hover:!flex"
                 {...provided.dragHandleProps}
               >
                 <EllipsisVerticalIcon className="h-[18px]" />
-                <EllipsisVerticalIcon className="-ml-3 h-[18px]" />
+                <EllipsisVerticalIcon className="-ml-2.5 h-[18px]" />
               </button>
               <div
                 ref={actionSectionRef}
diff --git a/apps/app/layouts/app-layout/app-sidebar.tsx b/apps/app/layouts/app-layout/app-sidebar.tsx
index fc05adf78..b704392a5 100644
--- a/apps/app/layouts/app-layout/app-sidebar.tsx
+++ b/apps/app/layouts/app-layout/app-sidebar.tsx
@@ -26,7 +26,7 @@ const Sidebar: React.FC<SidebarProps> = ({
 
   return (
     <div
-      className={`z-20 h-full flex-shrink-0 border-r border-brand-base ${
+      className={`z-30 h-full flex-shrink-0 border-r border-brand-base ${
         sidebarCollapse ? "" : "w-auto md:w-[17rem]"
       } fixed inset-y-0 top-0 ${
         toggleSidebar ? "left-0" : "-left-full md:left-0"
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
index ed838c189..4425014ac 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
@@ -147,9 +147,7 @@ const SingleCycle: React.FC = () => {
           </CustomMenu>
         }
         right={
-          <div
-            className={`flex items-center gap-2 ${cycleSidebar ? "mr-[24rem]" : ""} duration-300`}
-          >
+          <div className={`flex items-center gap-2 duration-300`}>
             <IssuesFilterView />
             <SecondaryButton
               onClick={() => setAnalyticsModal(true)}
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx
index d3ef97bd8..41e566d90 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx
@@ -150,9 +150,7 @@ const SingleModule: React.FC = () => {
           </CustomMenu>
         }
         right={
-          <div
-            className={`flex items-center gap-2 ${moduleSidebar ? "mr-[24rem]" : ""} duration-300`}
-          >
+          <div className={`flex items-center gap-2 duration-300`}>
             <IssuesFilterView />
             <SecondaryButton
               onClick={() => setAnalyticsModal(true)}
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
index 30e65a7a0..d1c33763d 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
@@ -303,7 +303,7 @@ const SinglePage: NextPage = () => {
       {pageDetails ? (
         <div className="flex h-full flex-col justify-between space-y-4 overflow-hidden p-4">
           <div className="h-full w-full overflow-y-auto">
-            <div className="flex items-center justify-between gap-2">
+            <div className="flex items-start justify-between gap-2">
               <div className="flex w-full flex-col gap-2">
                 <div className="flex w-full items-center gap-2">
                   <button
@@ -324,6 +324,7 @@ const SinglePage: NextPage = () => {
                     required={true}
                     className="min-h-10 block w-full resize-none overflow-hidden rounded border-none bg-transparent px-3 py-2 text-xl font-semibold outline-none ring-0 placeholder:text-[#858E96]"
                     role="textbox"
+                    noPadding
                   />
                 </div>
 
@@ -502,7 +503,7 @@ const SinglePage: NextPage = () => {
               </div>
             </div>
 
-            <div className="mt-4 h-full w-full">
+            <div className="mt-5 h-full w-full">
               {pageBlocks ? (
                 <>
                   <DragDropContext onDragEnd={handleOnDragEnd}>
diff --git a/apps/app/styles/react-datepicker.css b/apps/app/styles/react-datepicker.css
index 3c5f9a5ca..ed866f36d 100644
--- a/apps/app/styles/react-datepicker.css
+++ b/apps/app/styles/react-datepicker.css
@@ -23,8 +23,8 @@
 
 .react-datepicker {
   font-family: "Inter" !important;
-  border: none !important;
   background-color: rgba(var(--color-bg-base)) !important;
+  border: 1px solid rgba(var(--color-border)) !important;
 }
 
 .react-datepicker__month-container {
@@ -116,3 +116,7 @@
   background-color: #216ba5 !important;
   color: white !important;
 }
+
+.react-datepicker__day--in-range {
+  color: white !important;
+}

From 290318603dc0cce52ef60032ef5c7d0819e7e9cc Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Mon, 15 May 2023 11:35:07 +0530
Subject: [PATCH 23/81] fix: calendar view mutation (#1042)

---
 .../core/calendar-view/calendar-header.tsx    |  79 ++++-----
 .../core/calendar-view/calendar.tsx           | 158 +++++++-----------
 .../core/calendar-view/single-issue.tsx       |  33 ++--
 .../components/issues/delete-issue-modal.tsx  |  26 +--
 apps/app/components/issues/modal.tsx          |  55 ++----
 apps/app/constants/fetch-keys.ts              |  13 +-
 apps/app/contexts/issue-view.context.tsx      |  50 ++++++
 apps/app/hooks/use-calendar-issues-view.tsx   | 124 ++++++++++++++
 apps/app/hooks/use-issues-view.tsx            |   4 +
 apps/app/types/issues.d.ts                    |   1 -
 apps/app/types/projects.d.ts                  |   1 +
 11 files changed, 337 insertions(+), 207 deletions(-)
 create mode 100644 apps/app/hooks/use-calendar-issues-view.tsx

diff --git a/apps/app/components/core/calendar-view/calendar-header.tsx b/apps/app/components/core/calendar-view/calendar-header.tsx
index c8dd5e708..aab25506b 100644
--- a/apps/app/components/core/calendar-view/calendar-header.tsx
+++ b/apps/app/components/core/calendar-view/calendar-header.tsx
@@ -1,4 +1,17 @@
+import React from "react";
+
+// headless ui
 import { Popover, Transition } from "@headlessui/react";
+// ui
+import { CustomMenu, ToggleSwitch } from "components/ui";
+// icons
+import {
+  CheckIcon,
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+} from "@heroicons/react/24/outline";
+// helpers
 import {
   addMonths,
   addSevenDaysToDate,
@@ -14,26 +27,17 @@ import {
   updateDateWithMonth,
   updateDateWithYear,
 } from "helpers/calendar.helper";
-import React from "react";
+// constants
 import { MONTHS_LIST, YEARS_LIST } from "constants/calendar";
 
-import { ICalendarRange } from "types";
-import {
-  CheckIcon,
-  ChevronDownIcon,
-  ChevronLeftIcon,
-  ChevronRightIcon,
-} from "@heroicons/react/24/outline";
-import { CustomMenu, ToggleSwitch } from "components/ui";
-
 type Props = {
   isMonthlyView: boolean;
   setIsMonthlyView: React.Dispatch<React.SetStateAction<boolean>>;
   currentDate: Date;
   setCurrentDate: React.Dispatch<React.SetStateAction<Date>>;
-  setCalendarDateRange: React.Dispatch<React.SetStateAction<ICalendarRange>>;
   showWeekEnds: boolean;
   setShowWeekEnds: React.Dispatch<React.SetStateAction<boolean>>;
+  changeDateRange: (startDate: Date, endDate: Date) => void;
 };
 
 export const CalendarHeader: React.FC<Props> = ({
@@ -41,18 +45,16 @@ export const CalendarHeader: React.FC<Props> = ({
   isMonthlyView,
   currentDate,
   setCurrentDate,
-  setCalendarDateRange,
   showWeekEnds,
   setShowWeekEnds,
+  changeDateRange,
 }) => {
   const updateDate = (date: Date) => {
     setCurrentDate(date);
 
-    setCalendarDateRange({
-      startDate: startOfWeek(date),
-      endDate: lastDayOfWeek(date),
-    });
+    changeDateRange(startOfWeek(date), lastDayOfWeek(date));
   };
+
   return (
     <div className="mb-4 flex items-center justify-between">
       <div className="relative flex h-full w-full items-center justify-start gap-2 text-sm ">
@@ -93,9 +95,13 @@ export const CalendarHeader: React.FC<Props> = ({
                   <div className="grid grid-cols-4  border-t border-brand-base px-2">
                     {MONTHS_LIST.map((month) => (
                       <button
-                        onClick={() => updateDate(updateDateWithMonth(`${month.value}`, currentDate))}
+                        onClick={() =>
+                          updateDate(updateDateWithMonth(`${month.value}`, currentDate))
+                        }
                         className={`px-2 py-2 text-xs text-brand-secondary hover:font-medium hover:text-brand-base ${
-                          isSameMonth(`${month.value}`, currentDate) ? "font-medium text-brand-base" : ""
+                          isSameMonth(`${month.value}`, currentDate)
+                            ? "font-medium text-brand-base"
+                            : ""
                         }`}
                       >
                         {month.label}
@@ -116,10 +122,10 @@ export const CalendarHeader: React.FC<Props> = ({
                 updateDate(subtractMonths(currentDate, 1));
               } else {
                 setCurrentDate(subtract7DaysToDate(currentDate));
-                setCalendarDateRange({
-                  startDate: getCurrentWeekStartDate(subtract7DaysToDate(currentDate)),
-                  endDate: getCurrentWeekEndDate(subtract7DaysToDate(currentDate)),
-                });
+                changeDateRange(
+                  getCurrentWeekStartDate(subtract7DaysToDate(currentDate)),
+                  getCurrentWeekEndDate(subtract7DaysToDate(currentDate))
+                );
               }
             }}
           >
@@ -132,10 +138,10 @@ export const CalendarHeader: React.FC<Props> = ({
                 updateDate(addMonths(currentDate, 1));
               } else {
                 setCurrentDate(addSevenDaysToDate(currentDate));
-                setCalendarDateRange({
-                  startDate: getCurrentWeekStartDate(addSevenDaysToDate(currentDate)),
-                  endDate: getCurrentWeekEndDate(addSevenDaysToDate(currentDate)),
-                });
+                changeDateRange(
+                  getCurrentWeekStartDate(addSevenDaysToDate(currentDate)),
+                  getCurrentWeekEndDate(addSevenDaysToDate(currentDate))
+                );
               }
             }}
           >
@@ -152,10 +158,10 @@ export const CalendarHeader: React.FC<Props> = ({
               updateDate(new Date());
             } else {
               setCurrentDate(new Date());
-              setCalendarDateRange({
-                startDate: getCurrentWeekStartDate(new Date()),
-                endDate: getCurrentWeekEndDate(new Date()),
-              });
+              changeDateRange(
+                getCurrentWeekStartDate(new Date()),
+                getCurrentWeekEndDate(new Date())
+              );
             }
           }}
         >
@@ -173,10 +179,7 @@ export const CalendarHeader: React.FC<Props> = ({
           <CustomMenu.MenuItem
             onClick={() => {
               setIsMonthlyView(true);
-              setCalendarDateRange({
-                startDate: startOfWeek(currentDate),
-                endDate: lastDayOfWeek(currentDate),
-              });
+              changeDateRange(startOfWeek(currentDate), lastDayOfWeek(currentDate));
             }}
             className="w-52 text-sm text-brand-secondary"
           >
@@ -190,10 +193,10 @@ export const CalendarHeader: React.FC<Props> = ({
           <CustomMenu.MenuItem
             onClick={() => {
               setIsMonthlyView(false);
-              setCalendarDateRange({
-                startDate: getCurrentWeekStartDate(currentDate),
-                endDate: getCurrentWeekEndDate(currentDate),
-              });
+              changeDateRange(
+                getCurrentWeekStartDate(currentDate),
+                getCurrentWeekEndDate(currentDate)
+              );
             }}
             className="w-52 text-sm text-brand-secondary"
           >
diff --git a/apps/app/components/core/calendar-view/calendar.tsx b/apps/app/components/core/calendar-view/calendar.tsx
index bf32237d1..4af3d0cf4 100644
--- a/apps/app/components/core/calendar-view/calendar.tsx
+++ b/apps/app/components/core/calendar-view/calendar.tsx
@@ -1,28 +1,20 @@
-import React, { useState } from "react";
-
-// swr
-import useSWR, { mutate } from "swr";
+import React, { useEffect, useState } from "react";
 
 import { useRouter } from "next/router";
 
-// ui
-import { DragDropContext, Draggable, DropResult } from "react-beautiful-dnd";
-import { SingleCalendarDate, CalendarHeader } from "components/core";
+import { mutate } from "swr";
 
-import { Spinner } from "components/ui";
-// hooks
-import useIssuesView from "hooks/use-issues-view";
+// react-beautiful-dnd
+import { DragDropContext, DropResult } from "react-beautiful-dnd";
 // services
 import issuesService from "services/issues.service";
-import cyclesService from "services/cycles.service";
-import modulesService from "services/modules.service";
-// fetch key
-import {
-  CYCLE_CALENDAR_ISSUES,
-  MODULE_CALENDAR_ISSUES,
-  PROJECT_CALENDAR_ISSUES,
-} from "constants/fetch-keys";
-// helper
+// hooks
+import useCalendarIssuesView from "hooks/use-calendar-issues-view";
+// components
+import { SingleCalendarDate, CalendarHeader } from "components/core";
+// ui
+import { Spinner } from "components/ui";
+// helpers
 import { renderDateFormat } from "helpers/date-time.helper";
 import {
   startOfWeek,
@@ -31,8 +23,15 @@ import {
   weekDayInterval,
   formatDate,
 } from "helpers/calendar.helper";
-// type
+// types
 import { ICalendarRange, IIssue, UserAuth } from "types";
+// fetch-keys
+import {
+  CYCLE_ISSUES_WITH_PARAMS,
+  MODULE_ISSUES_WITH_PARAMS,
+  PROJECT_ISSUES_LIST_WITH_PARAMS,
+  VIEW_ISSUES,
+} from "constants/fetch-keys";
 
 type Props = {
   handleEditIssue: (issue: IIssue) => void;
@@ -53,93 +52,31 @@ export const CalendarView: React.FC<Props> = ({
   const [currentDate, setCurrentDate] = useState(new Date());
   const [isMonthlyView, setIsMonthlyView] = useState(true);
 
-  const router = useRouter();
-  const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
-
-  const { params } = useIssuesView();
-
-  const [calendarDateRange, setCalendarDateRange] = useState<ICalendarRange>({
+  const [calendarDates, setCalendarDates] = useState<ICalendarRange>({
     startDate: startOfWeek(currentDate),
     endDate: lastDayOfWeek(currentDate),
   });
 
-  const { data: projectCalendarIssues } = useSWR(
-    workspaceSlug && projectId ? PROJECT_CALENDAR_ISSUES(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () =>
-          issuesService.getIssuesWithParams(workspaceSlug as string, projectId as string, {
-            ...params,
-            target_date: `${renderDateFormat(calendarDateRange.startDate)};after,${renderDateFormat(
-              calendarDateRange.endDate
-            )};before`,
-            group_by: null,
-          })
-      : null
-  );
+  const router = useRouter();
+  const { workspaceSlug, projectId, cycleId, moduleId, viewId } = router.query;
 
-  const { data: cycleCalendarIssues } = useSWR(
-    workspaceSlug && projectId && cycleId
-      ? CYCLE_CALENDAR_ISSUES(projectId as string, cycleId as string)
-      : null,
-    workspaceSlug && projectId && cycleId
-      ? () =>
-          cyclesService.getCycleIssuesWithParams(
-            workspaceSlug as string,
-            projectId as string,
-            cycleId as string,
-            {
-              ...params,
-              target_date: `${renderDateFormat(
-                calendarDateRange.startDate
-              )};after,${renderDateFormat(calendarDateRange.endDate)};before`,
-              group_by: null,
-            }
-          )
-      : null
-  );
-
-  const { data: moduleCalendarIssues } = useSWR(
-    workspaceSlug && projectId && moduleId
-      ? MODULE_CALENDAR_ISSUES(projectId as string, moduleId as string)
-      : null,
-    workspaceSlug && projectId && moduleId
-      ? () =>
-          modulesService.getModuleIssuesWithParams(
-            workspaceSlug as string,
-            projectId as string,
-            moduleId as string,
-            {
-              ...params,
-              target_date: `${renderDateFormat(
-                calendarDateRange.startDate
-              )};after,${renderDateFormat(calendarDateRange.endDate)};before`,
-              group_by: null,
-            }
-          )
-      : null
-  );
+  const { calendarIssues, params, setCalendarDateRange } = useCalendarIssuesView();
 
   const totalDate = eachDayOfInterval({
-    start: calendarDateRange.startDate,
-    end: calendarDateRange.endDate,
+    start: calendarDates.startDate,
+    end: calendarDates.endDate,
   });
 
   const onlyWeekDays = weekDayInterval({
-    start: calendarDateRange.startDate,
-    end: calendarDateRange.endDate,
+    start: calendarDates.startDate,
+    end: calendarDates.endDate,
   });
 
   const currentViewDays = showWeekEnds ? totalDate : onlyWeekDays;
 
-  const calendarIssues = cycleId
-    ? (cycleCalendarIssues as IIssue[])
-    : moduleId
-    ? (moduleCalendarIssues as IIssue[])
-    : (projectCalendarIssues as IIssue[]);
-
   const currentViewDaysData = currentViewDays.map((date: Date) => {
     const filterIssue =
-      calendarIssues && calendarIssues.length > 0
+      calendarIssues.length > 0
         ? calendarIssues.filter(
             (issue) =>
               issue.target_date && renderDateFormat(issue.target_date) === renderDateFormat(date)
@@ -170,13 +107,16 @@ export const CalendarView: React.FC<Props> = ({
     const { source, destination, draggableId } = result;
 
     if (!destination || !workspaceSlug || !projectId) return;
+
     if (source.droppableId === destination.droppableId) return;
 
     const fetchKey = cycleId
-      ? CYCLE_CALENDAR_ISSUES(projectId as string, cycleId as string)
+      ? CYCLE_ISSUES_WITH_PARAMS(cycleId.toString(), params)
       : moduleId
-      ? MODULE_CALENDAR_ISSUES(projectId as string, moduleId as string)
-      : PROJECT_CALENDAR_ISSUES(projectId as string);
+      ? MODULE_ISSUES_WITH_PARAMS(moduleId.toString(), params)
+      : viewId
+      ? VIEW_ISSUES(viewId.toString(), params)
+      : PROJECT_ISSUES_LIST_WITH_PARAMS(projectId.toString(), params);
 
     mutate<IIssue[]>(
       fetchKey,
@@ -187,16 +127,38 @@ export const CalendarView: React.FC<Props> = ({
               ...p,
               target_date: destination.droppableId,
             };
+
           return p;
         }),
       false
     );
 
-    issuesService.patchIssue(workspaceSlug as string, projectId as string, draggableId, {
-      target_date: destination?.droppableId,
-    });
+    issuesService
+      .patchIssue(workspaceSlug as string, projectId as string, draggableId, {
+        target_date: destination?.droppableId,
+      })
+      .then(() => mutate(fetchKey));
   };
 
+  const changeDateRange = (startDate: Date, endDate: Date) => {
+    setCalendarDates({
+      startDate,
+      endDate,
+    });
+
+    setCalendarDateRange(
+      `${renderDateFormat(startDate)};after,${renderDateFormat(endDate)};before`
+    );
+  };
+
+  useEffect(() => {
+    setCalendarDateRange(
+      `${renderDateFormat(startOfWeek(currentDate))};after,${renderDateFormat(
+        lastDayOfWeek(currentDate)
+      )};before`
+    );
+  }, [currentDate]);
+
   const isNotAllowed = userAuth.isGuest || userAuth.isViewer || isCompleted;
 
   return calendarIssues ? (
@@ -210,7 +172,7 @@ export const CalendarView: React.FC<Props> = ({
             setShowWeekEnds={setShowWeekEnds}
             currentDate={currentDate}
             setCurrentDate={setCurrentDate}
-            setCalendarDateRange={setCalendarDateRange}
+            changeDateRange={changeDateRange}
           />
 
           <div
diff --git a/apps/app/components/core/calendar-view/single-issue.tsx b/apps/app/components/core/calendar-view/single-issue.tsx
index dc56d6126..fd07fda42 100644
--- a/apps/app/components/core/calendar-view/single-issue.tsx
+++ b/apps/app/components/core/calendar-view/single-issue.tsx
@@ -10,6 +10,7 @@ import { DraggableProvided, DraggableStateSnapshot } from "react-beautiful-dnd";
 // services
 import issuesService from "services/issues.service";
 // hooks
+import useCalendarIssuesView from "hooks/use-calendar-issues-view";
 import useIssuesProperties from "hooks/use-issue-properties";
 import useToast from "hooks/use-toast";
 // components
@@ -29,9 +30,10 @@ import { copyTextToClipboard, truncateText } from "helpers/string.helper";
 import { IIssue } from "types";
 // fetch-keys
 import {
-  CYCLE_CALENDAR_ISSUES,
-  MODULE_CALENDAR_ISSUES,
-  PROJECT_CALENDAR_ISSUES,
+  CYCLE_ISSUES_WITH_PARAMS,
+  MODULE_ISSUES_WITH_PARAMS,
+  PROJECT_ISSUES_LIST_WITH_PARAMS,
+  VIEW_ISSUES,
 } from "constants/fetch-keys";
 
 type Props = {
@@ -54,10 +56,12 @@ export const SingleCalendarIssue: React.FC<Props> = ({
   isNotAllowed,
 }) => {
   const router = useRouter();
-  const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
+  const { workspaceSlug, projectId, cycleId, moduleId, viewId } = router.query;
 
   const { setToastAlert } = useToast();
 
+  const { params } = useCalendarIssuesView();
+
   const [properties] = useIssuesProperties(workspaceSlug as string, projectId as string);
 
   const partialUpdateIssue = useCallback(
@@ -65,20 +69,25 @@ export const SingleCalendarIssue: React.FC<Props> = ({
       if (!workspaceSlug || !projectId) return;
 
       const fetchKey = cycleId
-        ? CYCLE_CALENDAR_ISSUES(projectId as string, cycleId as string)
+        ? CYCLE_ISSUES_WITH_PARAMS(cycleId.toString(), params)
         : moduleId
-        ? MODULE_CALENDAR_ISSUES(projectId as string, moduleId as string)
-        : PROJECT_CALENDAR_ISSUES(projectId as string);
+        ? MODULE_ISSUES_WITH_PARAMS(moduleId.toString(), params)
+        : viewId
+        ? VIEW_ISSUES(viewId.toString(), params)
+        : PROJECT_ISSUES_LIST_WITH_PARAMS(projectId.toString(), params);
 
       mutate<IIssue[]>(
         fetchKey,
         (prevData) =>
           (prevData ?? []).map((p) => {
-            if (p.id === issueId)
+            if (p.id === issueId) {
               return {
                 ...p,
-                formData,
+                ...formData,
+                assignees: formData?.assignees_list ?? p.assignees,
               };
+            }
+
             return p;
           }),
         false
@@ -87,13 +96,13 @@ export const SingleCalendarIssue: React.FC<Props> = ({
       issuesService
         .patchIssue(workspaceSlug as string, projectId as string, issueId as string, formData)
         .then(() => {
-          mutate<IIssue[]>(fetchKey);
+          mutate(fetchKey);
         })
         .catch((error) => {
           console.log(error);
         });
     },
-    [workspaceSlug, projectId, cycleId, moduleId]
+    [workspaceSlug, projectId, cycleId, moduleId, params]
   );
 
   const handleCopyText = () => {
@@ -205,7 +214,7 @@ export const SingleCalendarIssue: React.FC<Props> = ({
                     className="group flex items-center gap-1 rounded-2xl border border-brand-base px-2 py-0.5 text-xs text-brand-secondary"
                   >
                     <span
-                      className="h-1.5 w-1.5  rounded-full"
+                      className="h-1.5 w-1.5 rounded-full"
                       style={{
                         backgroundColor: label?.color && label.color !== "" ? label.color : "#000",
                       }}
diff --git a/apps/app/components/issues/delete-issue-modal.tsx b/apps/app/components/issues/delete-issue-modal.tsx
index 5350ce21f..5f4d0c2b2 100644
--- a/apps/app/components/issues/delete-issue-modal.tsx
+++ b/apps/app/components/issues/delete-issue-modal.tsx
@@ -9,22 +9,21 @@ import { Dialog, Transition } from "@headlessui/react";
 // services
 import issueServices from "services/issues.service";
 // hooks
-import useToast from "hooks/use-toast";
 import useIssuesView from "hooks/use-issues-view";
+import useCalendarIssuesView from "hooks/use-calendar-issues-view";
+import useToast from "hooks/use-toast";
 // icons
 import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 // ui
 import { SecondaryButton, DangerButton } from "components/ui";
 // types
-import type { CycleIssueResponse, IIssue, ModuleIssueResponse } from "types";
+import type { IIssue } from "types";
 // fetch-keys
 import {
-  CYCLE_CALENDAR_ISSUES,
   CYCLE_ISSUES_WITH_PARAMS,
-  MODULE_CALENDAR_ISSUES,
   MODULE_ISSUES_WITH_PARAMS,
-  PROJECT_CALENDAR_ISSUES,
   PROJECT_ISSUES_LIST_WITH_PARAMS,
+  VIEW_ISSUES,
 } from "constants/fetch-keys";
 
 type Props = {
@@ -37,9 +36,10 @@ export const DeleteIssueModal: React.FC<Props> = ({ isOpen, handleClose, data })
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
 
   const router = useRouter();
-  const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
+  const { workspaceSlug, projectId, cycleId, moduleId, viewId } = router.query;
 
   const { issueView, params } = useIssuesView();
+  const { params: calendarParams } = useCalendarIssuesView();
 
   const { setToastAlert } = useToast();
 
@@ -61,12 +61,18 @@ export const DeleteIssueModal: React.FC<Props> = ({ isOpen, handleClose, data })
       .then(() => {
         if (issueView === "calendar") {
           const calendarFetchKey = cycleId
-            ? CYCLE_CALENDAR_ISSUES(projectId as string, cycleId as string)
+            ? CYCLE_ISSUES_WITH_PARAMS(cycleId.toString(), calendarParams)
             : moduleId
-            ? MODULE_CALENDAR_ISSUES(projectId as string, moduleId as string)
-            : PROJECT_CALENDAR_ISSUES(projectId as string);
+            ? MODULE_ISSUES_WITH_PARAMS(moduleId.toString(), calendarParams)
+            : viewId
+            ? VIEW_ISSUES(viewId.toString(), calendarParams)
+            : PROJECT_ISSUES_LIST_WITH_PARAMS(projectId.toString(), calendarParams);
 
-          mutate<IIssue[]>(calendarFetchKey);
+          mutate<IIssue[]>(
+            calendarFetchKey,
+            (prevData) => (prevData ?? []).filter((p) => p.id !== data.id),
+            false
+          );
         } else {
           if (cycleId) mutate(CYCLE_ISSUES_WITH_PARAMS(cycleId as string, params));
           else if (moduleId) mutate(MODULE_ISSUES_WITH_PARAMS(moduleId as string, params));
diff --git a/apps/app/components/issues/modal.tsx b/apps/app/components/issues/modal.tsx
index f8a39eda9..eae935479 100644
--- a/apps/app/components/issues/modal.tsx
+++ b/apps/app/components/issues/modal.tsx
@@ -12,14 +12,14 @@ import modulesService from "services/modules.service";
 import issuesService from "services/issues.service";
 // hooks
 import useUser from "hooks/use-user";
+import useIssuesView from "hooks/use-issues-view";
+import useCalendarIssuesView from "hooks/use-calendar-issues-view";
 import useToast from "hooks/use-toast";
 // components
 import { IssueForm } from "components/issues";
-// hooks
-import useIssuesView from "hooks/use-issues-view";
 // types
 import type { IIssue } from "types";
-// fetch keys
+// fetch-keys
 import {
   PROJECT_ISSUES_DETAILS,
   PROJECT_ISSUES_LIST,
@@ -31,9 +31,7 @@ import {
   MODULE_ISSUES_WITH_PARAMS,
   CYCLE_DETAILS,
   MODULE_DETAILS,
-  PROJECT_CALENDAR_ISSUES,
-  CYCLE_CALENDAR_ISSUES,
-  MODULE_CALENDAR_ISSUES,
+  VIEW_ISSUES,
 } from "constants/fetch-keys";
 
 export interface IssuesModalProps {
@@ -56,9 +54,10 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
   const [activeProject, setActiveProject] = useState<string | null>(null);
 
   const router = useRouter();
-  const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
+  const { workspaceSlug, projectId, cycleId, moduleId, viewId } = router.query;
 
   const { issueView, params } = useIssuesView();
+  const { params: calendarParams } = useCalendarIssuesView();
 
   if (cycleId) prePopulateData = { ...prePopulateData, cycle: cycleId as string };
   if (moduleId) prePopulateData = { ...prePopulateData, module: moduleId as string };
@@ -128,23 +127,24 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
       });
   };
 
+  const calendarFetchKey = cycleId
+    ? CYCLE_ISSUES_WITH_PARAMS(cycleId.toString(), calendarParams)
+    : moduleId
+    ? MODULE_ISSUES_WITH_PARAMS(moduleId.toString(), calendarParams)
+    : viewId
+    ? VIEW_ISSUES(viewId.toString(), calendarParams)
+    : PROJECT_ISSUES_LIST_WITH_PARAMS(projectId?.toString() ?? "", calendarParams);
+
   const createIssue = async (payload: Partial<IIssue>) => {
     await issuesService
       .createIssues(workspaceSlug as string, activeProject ?? "", payload)
       .then((res) => {
         mutate(PROJECT_ISSUES_LIST_WITH_PARAMS(activeProject ?? "", params));
+        if (issueView === "calendar") mutate(calendarFetchKey);
 
         if (payload.cycle && payload.cycle !== "") addIssueToCycle(res.id, payload.cycle);
         if (payload.module && payload.module !== "") addIssueToModule(res.id, payload.module);
 
-        const calendarFetchKey = cycleId
-          ? CYCLE_CALENDAR_ISSUES(projectId as string, cycleId as string)
-          : moduleId
-          ? MODULE_CALENDAR_ISSUES(projectId as string, moduleId as string)
-          : PROJECT_CALENDAR_ISSUES(projectId as string);
-
-        mutate<IIssue[]>(calendarFetchKey);
-
         if (!createMore) handleClose();
 
         setToastAlert({
@@ -173,29 +173,8 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
         if (isUpdatingSingleIssue) {
           mutate<IIssue>(PROJECT_ISSUES_DETAILS, (prevData) => ({ ...prevData, ...res }), false);
         } else {
-          if (issueView === "calendar") {
-            const calendarFetchKey = cycleId
-              ? CYCLE_CALENDAR_ISSUES(projectId as string, cycleId as string)
-              : moduleId
-              ? MODULE_CALENDAR_ISSUES(projectId as string, moduleId as string)
-              : PROJECT_CALENDAR_ISSUES(projectId as string);
-
-            mutate<IIssue[]>(calendarFetchKey, (prevData) =>
-              (prevData ?? []).map((i) => {
-                if (i.id === res.id) return { ...i, ...res };
-                return i;
-              })
-            );
-          } else {
-            mutate<IIssue[]>(
-              PROJECT_ISSUES_LIST_WITH_PARAMS(activeProject ?? "", params),
-              (prevData) =>
-                (prevData ?? []).map((i) => {
-                  if (i.id === res.id) return { ...i, ...res };
-                  return i;
-                })
-            );
-          }
+          if (issueView === "calendar") mutate(calendarFetchKey);
+          else mutate(PROJECT_ISSUES_LIST_WITH_PARAMS(activeProject ?? "", params));
         }
 
         if (payload.cycle && payload.cycle !== "") addIssueToCycle(res.id, payload.cycle);
diff --git a/apps/app/constants/fetch-keys.ts b/apps/app/constants/fetch-keys.ts
index 2b511851f..202b87dc1 100644
--- a/apps/app/constants/fetch-keys.ts
+++ b/apps/app/constants/fetch-keys.ts
@@ -1,13 +1,14 @@
 import { IAnalyticsParams, IJiraMetadata } from "types";
 
 const paramsToKey = (params: any) => {
-  const { state, priority, assignees, created_by, labels } = params;
+  const { state, priority, assignees, created_by, labels, target_date } = params;
 
   let stateKey = state ? state.split(",") : [];
   let priorityKey = priority ? priority.split(",") : [];
   let assigneesKey = assignees ? assignees.split(",") : [];
   let createdByKey = created_by ? created_by.split(",") : [];
   let labelsKey = labels ? labels.split(",") : [];
+  const targetDateKey = target_date ?? "";
   const type = params.type ? params.type.toUpperCase() : "NULL";
   const groupBy = params.group_by ? params.group_by.toUpperCase() : "NULL";
   const orderBy = params.order_by ? params.order_by.toUpperCase() : "NULL";
@@ -19,7 +20,7 @@ const paramsToKey = (params: any) => {
   createdByKey = createdByKey.sort().join("_");
   labelsKey = labelsKey.sort().join("_");
 
-  return `${stateKey}_${priorityKey}_${assigneesKey}_${createdByKey}_${type}_${groupBy}_${orderBy}_${labelsKey}`;
+  return `${stateKey}_${priorityKey}_${assigneesKey}_${createdByKey}_${type}_${groupBy}_${orderBy}_${labelsKey}_${targetDateKey}`;
 };
 
 export const CURRENT_USER = "CURRENT_USER";
@@ -148,14 +149,6 @@ export const GITHUB_REPOSITORY_INFO = (workspaceSlug: string, repoName: string)
 export const SLACK_CHANNEL_INFO = (workspaceSlug: string, projectId: string) =>
   `SLACK_CHANNEL_INFO_${workspaceSlug.toString().toUpperCase()}_${projectId.toUpperCase()}`;
 
-// Calendar
-export const PROJECT_CALENDAR_ISSUES = (projectId: string) =>
-  `CALENDAR_ISSUES_${projectId.toUpperCase()}`;
-export const CYCLE_CALENDAR_ISSUES = (projectId: string, cycleId: string) =>
-  `CALENDAR_ISSUES_${projectId.toUpperCase()}_${cycleId.toUpperCase()}`;
-export const MODULE_CALENDAR_ISSUES = (projectId: string, moduleId: string) =>
-  `CALENDAR_ISSUES_${projectId.toUpperCase()}_${moduleId.toUpperCase()}`;
-
 // Pages
 export const RECENT_PAGES_LIST = (projectId: string) =>
   `RECENT_PAGES_LIST_${projectId.toUpperCase()}`;
diff --git a/apps/app/contexts/issue-view.context.tsx b/apps/app/contexts/issue-view.context.tsx
index 9d9135362..ce24f5048 100644
--- a/apps/app/contexts/issue-view.context.tsx
+++ b/apps/app/contexts/issue-view.context.tsx
@@ -34,6 +34,7 @@ type IssueViewProps = {
   groupByProperty: TIssueGroupByOptions;
   orderBy: TIssueOrderByOptions;
   showEmptyGroups: boolean;
+  calendarDateRange: string;
   filters: IIssueFilterOptions;
 };
 
@@ -43,6 +44,7 @@ type ReducerActionType = {
     | "SET_ISSUE_VIEW"
     | "SET_ORDER_BY_PROPERTY"
     | "SET_SHOW_EMPTY_STATES"
+    | "SET_CALENDAR_DATE_RANGE"
     | "SET_FILTERS"
     | "SET_GROUP_BY_PROPERTY"
     | "RESET_TO_DEFAULT";
@@ -53,6 +55,7 @@ type ContextType = IssueViewProps & {
   setGroupByProperty: (property: TIssueGroupByOptions) => void;
   setOrderBy: (property: TIssueOrderByOptions) => void;
   setShowEmptyGroups: (property: boolean) => void;
+  setCalendarDateRange: (property: string) => void;
   setFilters: (filters: Partial<IIssueFilterOptions>, saveToServer?: boolean) => void;
   resetFilterToDefault: () => void;
   setNewFilterDefaultView: () => void;
@@ -64,6 +67,7 @@ type StateType = {
   groupByProperty: TIssueGroupByOptions;
   orderBy: TIssueOrderByOptions;
   showEmptyGroups: boolean;
+  calendarDateRange: string;
   filters: IIssueFilterOptions;
 };
 type ReducerFunctionType = (state: StateType, action: ReducerActionType) => StateType;
@@ -73,6 +77,7 @@ export const initialState: StateType = {
   groupByProperty: null,
   orderBy: "-created_at",
   showEmptyGroups: true,
+  calendarDateRange: "",
   filters: {
     type: null,
     priority: null,
@@ -144,6 +149,18 @@ export const reducer: ReducerFunctionType = (state, action) => {
       };
     }
 
+    case "SET_CALENDAR_DATE_RANGE": {
+      const newState = {
+        ...state,
+        calendarDateRange: payload?.calendarDateRange || "",
+      };
+
+      return {
+        ...state,
+        ...newState,
+      };
+    }
+
     case "SET_FILTERS": {
       const newState = {
         ...state,
@@ -410,6 +427,37 @@ export const IssueViewContextProvider: React.FC<{ children: React.ReactNode }> =
     [projectId, workspaceSlug, state, mutateMyViewProps]
   );
 
+  const setCalendarDateRange = useCallback(
+    (value: string) => {
+      dispatch({
+        type: "SET_CALENDAR_DATE_RANGE",
+        payload: {
+          calendarDateRange: value,
+        },
+      });
+
+      if (!workspaceSlug || !projectId) return;
+
+      mutateMyViewProps((prevData) => {
+        if (!prevData) return prevData;
+
+        return {
+          ...prevData,
+          view_props: {
+            ...state,
+            calendarDateRange: value,
+          },
+        };
+      }, false);
+
+      saveDataToServer(workspaceSlug as string, projectId as string, {
+        ...state,
+        calendarDateRange: value,
+      });
+    },
+    [projectId, workspaceSlug, state, mutateMyViewProps]
+  );
+
   const setFilters = useCallback(
     (property: Partial<IIssueFilterOptions>, saveToServer = true) => {
       Object.keys(property).forEach((key) => {
@@ -577,6 +625,8 @@ export const IssueViewContextProvider: React.FC<{ children: React.ReactNode }> =
         setGroupByProperty,
         orderBy: state.orderBy,
         showEmptyGroups: state.showEmptyGroups,
+        calendarDateRange: state.calendarDateRange,
+        setCalendarDateRange,
         setOrderBy,
         setShowEmptyGroups,
         filters: state.filters,
diff --git a/apps/app/hooks/use-calendar-issues-view.tsx b/apps/app/hooks/use-calendar-issues-view.tsx
new file mode 100644
index 000000000..41cf00cb7
--- /dev/null
+++ b/apps/app/hooks/use-calendar-issues-view.tsx
@@ -0,0 +1,124 @@
+import { useContext } from "react";
+
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// contexts
+import { issueViewContext } from "contexts/issue-view.context";
+// services
+import issuesService from "services/issues.service";
+import cyclesService from "services/cycles.service";
+import modulesService from "services/modules.service";
+// types
+import { IIssue } from "types";
+// fetch-keys
+import {
+  CYCLE_ISSUES_WITH_PARAMS,
+  MODULE_ISSUES_WITH_PARAMS,
+  PROJECT_ISSUES_LIST_WITH_PARAMS,
+  VIEW_ISSUES,
+} from "constants/fetch-keys";
+
+const useCalendarIssuesView = () => {
+  const {
+    issueView,
+    calendarDateRange,
+    setCalendarDateRange,
+    filters,
+    setFilters,
+    resetFilterToDefault,
+    setNewFilterDefaultView,
+    setIssueView,
+  } = useContext(issueViewContext);
+
+  const router = useRouter();
+  const { workspaceSlug, projectId, cycleId, moduleId, viewId } = router.query;
+
+  const params: any = {
+    assignees: filters?.assignees ? filters?.assignees.join(",") : undefined,
+    state: filters?.state ? filters?.state.join(",") : undefined,
+    priority: filters?.priority ? filters?.priority.join(",") : undefined,
+    type: filters?.type ? filters?.type : undefined,
+    labels: filters?.labels ? filters?.labels.join(",") : undefined,
+    issue__assignees__id: filters?.issue__assignees__id
+      ? filters?.issue__assignees__id.join(",")
+      : undefined,
+    issue__labels__id: filters?.issue__labels__id
+      ? filters?.issue__labels__id.join(",")
+      : undefined,
+    created_by: filters?.created_by ? filters?.created_by.join(",") : undefined,
+    target_date: calendarDateRange,
+  };
+
+  const { data: projectCalendarIssues } = useSWR(
+    workspaceSlug && projectId
+      ? PROJECT_ISSUES_LIST_WITH_PARAMS(projectId.toString(), params)
+      : null,
+    workspaceSlug && projectId
+      ? () =>
+          issuesService.getIssuesWithParams(workspaceSlug.toString(), projectId.toString(), params)
+      : null
+  );
+
+  const { data: cycleCalendarIssues } = useSWR(
+    workspaceSlug && projectId && cycleId
+      ? CYCLE_ISSUES_WITH_PARAMS(cycleId.toString(), params)
+      : null,
+    workspaceSlug && projectId && cycleId
+      ? () =>
+          cyclesService.getCycleIssuesWithParams(
+            workspaceSlug.toString(),
+            projectId.toString(),
+            cycleId.toString(),
+            params
+          )
+      : null
+  );
+
+  const { data: moduleCalendarIssues } = useSWR(
+    workspaceSlug && projectId && moduleId
+      ? MODULE_ISSUES_WITH_PARAMS(moduleId.toString(), params)
+      : null,
+    workspaceSlug && projectId && moduleId
+      ? () =>
+          modulesService.getModuleIssuesWithParams(
+            workspaceSlug.toString(),
+            projectId.toString(),
+            moduleId.toString(),
+            params
+          )
+      : null
+  );
+
+  const { data: viewCalendarIssues } = useSWR(
+    workspaceSlug && projectId && viewId && params ? VIEW_ISSUES(viewId.toString(), params) : null,
+    workspaceSlug && projectId && viewId && params
+      ? () =>
+          issuesService.getIssuesWithParams(workspaceSlug.toString(), projectId.toString(), params)
+      : null
+  );
+
+  const calendarIssues = cycleId
+    ? (cycleCalendarIssues as IIssue[])
+    : moduleId
+    ? (moduleCalendarIssues as IIssue[])
+    : viewId
+    ? (viewCalendarIssues as IIssue[])
+    : (projectCalendarIssues as IIssue[]);
+
+  return {
+    issueView,
+    calendarIssues: calendarIssues ?? [],
+    calendarDateRange,
+    setCalendarDateRange,
+    filters,
+    setFilters,
+    params,
+    resetFilterToDefault,
+    setNewFilterDefaultView,
+    setIssueView,
+  } as const;
+};
+
+export default useCalendarIssuesView;
diff --git a/apps/app/hooks/use-issues-view.tsx b/apps/app/hooks/use-issues-view.tsx
index 20935f5f8..406c1d025 100644
--- a/apps/app/hooks/use-issues-view.tsx
+++ b/apps/app/hooks/use-issues-view.tsx
@@ -33,6 +33,8 @@ const useIssuesView = () => {
     setOrderBy,
     showEmptyGroups,
     setShowEmptyGroups,
+    calendarDateRange,
+    setCalendarDateRange,
     filters,
     setFilters,
     resetFilterToDefault,
@@ -175,6 +177,8 @@ const useIssuesView = () => {
     setOrderBy,
     showEmptyGroups,
     setShowEmptyGroups,
+    calendarDateRange,
+    setCalendarDateRange,
     filters,
     setFilters,
     params,
diff --git a/apps/app/types/issues.d.ts b/apps/app/types/issues.d.ts
index c693790da..51cdf348e 100644
--- a/apps/app/types/issues.d.ts
+++ b/apps/app/types/issues.d.ts
@@ -273,7 +273,6 @@ export interface IIssueViewOptions {
   group_by: TIssueGroupByOptions;
   order_by: TIssueOrderByOptions;
   filters: IIssueFilterOptions;
-  target_date: string;
 }
 
 export interface IIssueAttachment {
diff --git a/apps/app/types/projects.d.ts b/apps/app/types/projects.d.ts
index 792403a6f..3fbf37678 100644
--- a/apps/app/types/projects.d.ts
+++ b/apps/app/types/projects.d.ts
@@ -55,6 +55,7 @@ type ProjectViewTheme = {
   issueView: TIssueViewOptions;
   groupByProperty: TIssueGroupByOptions;
   orderBy: TIssueOrderByOptions;
+  calendarDateRange: string;
   filters: IIssueFilterOptions;
 };
 

From 9fdc56db0fc6c91211f20299844d2f291a0b07e5 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Mon, 15 May 2023 11:35:19 +0530
Subject: [PATCH 24/81] chore: user cannot update their own role (#1041)

---
 .../projects/[projectId]/settings/control.tsx |  6 ++--
 .../[projectId]/settings/estimates.tsx        |  4 +--
 .../[projectId]/settings/features.tsx         |  5 +--
 .../projects/[projectId]/settings/index.tsx   |  2 +-
 .../[projectId]/settings/integrations.tsx     |  2 +-
 .../projects/[projectId]/settings/labels.tsx  |  4 +--
 .../projects/[projectId]/settings/members.tsx | 20 ++++++-----
 .../projects/[projectId]/settings/states.tsx  |  4 +--
 .../[workspaceSlug]/settings/billing.tsx      |  2 +-
 .../settings/import-export.tsx                |  2 +-
 .../pages/[workspaceSlug]/settings/index.tsx  |  2 +-
 .../[workspaceSlug]/settings/integrations.tsx |  2 +-
 .../[workspaceSlug]/settings/members.tsx      | 36 +++++++++++--------
 apps/app/types/projects.d.ts                  |  1 +
 apps/app/types/workspace.d.ts                 |  2 +-
 15 files changed, 55 insertions(+), 39 deletions(-)

diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/control.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/control.tsx
index 8cf0403ed..fc699aeab 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/control.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/control.tsx
@@ -5,6 +5,7 @@ import Image from "next/image";
 
 import useSWR, { mutate } from "swr";
 
+// react-hook-form
 import { Controller, useForm } from "react-hook-form";
 // layouts
 import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
@@ -12,6 +13,8 @@ import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
 import projectService from "services/project.service";
 // hooks
 import useToast from "hooks/use-toast";
+// components
+import { SettingsHeader } from "components/project";
 // ui
 import { CustomSelect, Loader, SecondaryButton } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
@@ -20,7 +23,6 @@ import { IProject, IWorkspace } from "types";
 import type { NextPage } from "next";
 // fetch-keys
 import { PROJECTS_LIST, PROJECT_DETAILS, PROJECT_MEMBERS } from "constants/fetch-keys";
-import { SettingsHeader } from "components/project";
 
 const defaultValues: Partial<IProject> = {
   project_lead: null,
@@ -104,7 +106,7 @@ const ControlSettings: NextPage = () => {
         </Breadcrumbs>
       }
     >
-      <form onSubmit={handleSubmit(onSubmit)} className="px-24 py-8">
+      <form onSubmit={handleSubmit(onSubmit)} className="p-8 lg:px-24">
         <SettingsHeader />
         <div className="space-y-8 sm:space-y-12">
           <div className="grid grid-cols-12 items-start gap-4 sm:gap-16">
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx
index f4192528c..4051d09bf 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx
@@ -13,6 +13,7 @@ import useProjectDetails from "hooks/use-project-details";
 import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
 // components
 import { CreateUpdateEstimateModal, SingleEstimate } from "components/estimates";
+import { SettingsHeader } from "components/project";
 //hooks
 import useToast from "hooks/use-toast";
 // ui
@@ -27,7 +28,6 @@ import { IEstimate, IProject } from "types";
 import type { NextPage } from "next";
 // fetch-keys
 import { ESTIMATES_LIST, PROJECT_DETAILS } from "constants/fetch-keys";
-import { SettingsHeader } from "components/project";
 
 const EstimatesSettings: NextPage = () => {
   const [estimateFormOpen, setEstimateFormOpen] = useState(false);
@@ -118,7 +118,7 @@ const EstimatesSettings: NextPage = () => {
           </Breadcrumbs>
         }
       >
-        <div className="px-24 py-8">
+        <div className="p-8 lg:px-24">
           <SettingsHeader />
           <section className="flex items-center justify-between">
             <h3 className="text-2xl font-semibold">Estimates</h3>
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
index 2c8390a97..ee7a91fe9 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
@@ -11,6 +11,8 @@ import trackEventServices, { MiscellaneousEventType } from "services/track-event
 import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
 // hooks
 import useToast from "hooks/use-toast";
+// components
+import { SettingsHeader } from "components/project";
 // ui
 import { SecondaryButton, ToggleSwitch } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
@@ -22,7 +24,6 @@ import { IFavoriteProject, IProject } from "types";
 import type { NextPage } from "next";
 // fetch-keys
 import { FAVORITE_PROJECTS_LIST, PROJECTS_LIST, PROJECT_DETAILS } from "constants/fetch-keys";
-import { SettingsHeader } from "components/project";
 
 const featuresList = [
   {
@@ -163,7 +164,7 @@ const FeaturesSettings: NextPage = () => {
         </Breadcrumbs>
       }
     >
-      <div className="px-24 py-8">
+      <div className="p-8 lg:px-24">
         <SettingsHeader />
         <section className="space-y-8">
           <h3 className="text-2xl font-semibold">Features</h3>
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
index 5535aa99a..4cd1bc42e 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
@@ -151,7 +151,7 @@ const GeneralSettings: NextPage = () => {
           router.push(`/${workspaceSlug}/projects`);
         }}
       />
-      <form onSubmit={handleSubmit(onSubmit)} className="py-8 px-24">
+      <form onSubmit={handleSubmit(onSubmit)} className="p-8 lg:px-24">
         <SettingsHeader />
         <div className="space-y-8 sm:space-y-12">
           <div className="grid grid-cols-12 items-start gap-4 sm:gap-16">
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/integrations.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/integrations.tsx
index 5f5077a0e..53540e87a 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/integrations.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/integrations.tsx
@@ -54,7 +54,7 @@ const ProjectIntegrations: NextPage = () => {
         </Breadcrumbs>
       }
     >
-      <div className="px-24 py-8">
+      <div className="p-8 lg:px-24">
         <SettingsHeader />
         {workspaceIntegrations ? (
           workspaceIntegrations.length > 0 ? (
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx
index ef88e4912..b0c98c9dc 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx
@@ -16,6 +16,7 @@ import {
   SingleLabel,
   SingleLabelGroup,
 } from "components/labels";
+import { SettingsHeader } from "components/project";
 // ui
 import { Loader, PrimaryButton } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
@@ -26,7 +27,6 @@ import { IIssueLabels } from "types";
 import type { NextPage } from "next";
 // fetch-keys
 import { PROJECT_DETAILS, PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
-import { SettingsHeader } from "components/project";
 
 const LabelsSettings: NextPage = () => {
   // create/edit label form
@@ -102,7 +102,7 @@ const LabelsSettings: NextPage = () => {
           </Breadcrumbs>
         }
       >
-        <div className="px-24 py-8">
+        <div className="p-8 lg:px-24">
           <SettingsHeader />
           <section className="grid grid-cols-12 gap-10">
             <div className="col-span-12 sm:col-span-5">
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
index 88d03e538..6f1ecb38e 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
@@ -11,11 +11,13 @@ import workspaceService from "services/workspace.service";
 // hooks
 import useToast from "hooks/use-toast";
 import useProjectDetails from "hooks/use-project-details";
+import useUser from "hooks/use-user";
 // layouts
 import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
 // components
 import ConfirmProjectMemberRemove from "components/project/confirm-project-member-remove";
 import SendProjectInvitationModal from "components/project/send-project-invitation-modal";
+import { SettingsHeader } from "components/project";
 // ui
 import { CustomMenu, CustomSelect, Loader } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
@@ -27,7 +29,6 @@ import type { NextPage } from "next";
 import { PROJECT_INVITATIONS, PROJECT_MEMBERS, WORKSPACE_DETAILS } from "constants/fetch-keys";
 // constants
 import { ROLE } from "constants/workspace";
-import { SettingsHeader } from "components/project";
 
 const MembersSettings: NextPage = () => {
   const [inviteModal, setInviteModal] = useState(false);
@@ -36,17 +37,17 @@ const MembersSettings: NextPage = () => {
 
   const { setToastAlert } = useToast();
 
-  const {
-    query: { workspaceSlug, projectId },
-  } = useRouter();
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { user } = useUser();
+  const { projectDetails } = useProjectDetails();
 
   const { data: activeWorkspace } = useSWR(
     workspaceSlug ? WORKSPACE_DETAILS(workspaceSlug as string) : null,
     () => (workspaceSlug ? workspaceService.getWorkspace(workspaceSlug as string) : null)
   );
 
-  const { projectDetails } = useProjectDetails();
-
   const { data: projectMembers, mutate: mutateMembers } = useSWR(
     workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null,
     workspaceSlug && projectId
@@ -62,8 +63,9 @@ const MembersSettings: NextPage = () => {
   );
 
   const members = [
-    ...(projectMembers?.map((item: any) => ({
+    ...(projectMembers?.map((item) => ({
       id: item.id,
+      memberId: item.member?.id,
       avatar: item.member?.avatar,
       first_name: item.member?.first_name,
       last_name: item.member?.last_name,
@@ -74,6 +76,7 @@ const MembersSettings: NextPage = () => {
     })) || []),
     ...(projectInvitations?.map((item: any) => ({
       id: item.id,
+      memberId: item.id,
       avatar: item.avatar ?? "",
       first_name: item.first_name ?? item.email,
       last_name: item.last_name ?? "",
@@ -142,7 +145,7 @@ const MembersSettings: NextPage = () => {
           </Breadcrumbs>
         }
       >
-        <div className="px-24 py-8">
+        <div className="p-8 lg:px-24">
           <SettingsHeader />
           <section className="space-y-8">
             <div className="flex items-end justify-between gap-4">
@@ -231,6 +234,7 @@ const MembersSettings: NextPage = () => {
                                 });
                             }}
                             position="right"
+                            disabled={member.memberId === user?.id}
                           >
                             {Object.keys(ROLE).map((key) => (
                               <CustomSelect.Option key={key} value={key}>
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx
index 39d83616d..77e821835 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx
@@ -17,6 +17,7 @@ import {
   SingleState,
   StateGroup,
 } from "components/states";
+import { SettingsHeader } from "components/project";
 // ui
 import { Loader } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
@@ -28,7 +29,6 @@ import { getStatesList, orderStateGroups } from "helpers/state.helper";
 import type { NextPage } from "next";
 // fetch-keys
 import { STATES_LIST } from "constants/fetch-keys";
-import { SettingsHeader } from "components/project";
 
 const StatesSettings: NextPage = () => {
   const [activeGroup, setActiveGroup] = useState<StateGroup>(null);
@@ -67,7 +67,7 @@ const StatesSettings: NextPage = () => {
           </Breadcrumbs>
         }
       >
-        <div className="px-24 py-8">
+        <div className="p-8 lg:px-24">
           <SettingsHeader />
           <div className="grid grid-cols-12 gap-10">
             <div className="col-span-12 sm:col-span-5">
diff --git a/apps/app/pages/[workspaceSlug]/settings/billing.tsx b/apps/app/pages/[workspaceSlug]/settings/billing.tsx
index 0e5cc69f4..02b23cce5 100644
--- a/apps/app/pages/[workspaceSlug]/settings/billing.tsx
+++ b/apps/app/pages/[workspaceSlug]/settings/billing.tsx
@@ -39,7 +39,7 @@ const BillingSettings: NextPage = () => {
         </Breadcrumbs>
       }
     >
-      <div className="px-24 py-8">
+      <div className="p-8 lg:px-24">
         <SettingsHeader />
         <section className="space-y-8">
           <div>
diff --git a/apps/app/pages/[workspaceSlug]/settings/import-export.tsx b/apps/app/pages/[workspaceSlug]/settings/import-export.tsx
index 821ceee7a..c5473b30a 100644
--- a/apps/app/pages/[workspaceSlug]/settings/import-export.tsx
+++ b/apps/app/pages/[workspaceSlug]/settings/import-export.tsx
@@ -23,7 +23,7 @@ const ImportExport: NextPage = () => {
         </Breadcrumbs>
       }
     >
-      <div className="px-24 py-8">
+      <div className="p-8 lg:px-24">
         <SettingsHeader />
         <IntegrationGuide />
       </div>
diff --git a/apps/app/pages/[workspaceSlug]/settings/index.tsx b/apps/app/pages/[workspaceSlug]/settings/index.tsx
index 045e9a893..1edd5ace9 100644
--- a/apps/app/pages/[workspaceSlug]/settings/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/settings/index.tsx
@@ -173,7 +173,7 @@ const WorkspaceSettings: NextPage = () => {
         }}
         data={activeWorkspace ?? null}
       />
-      <div className="px-24 py-8">
+      <div className="p-8 lg:px-24">
         <SettingsHeader />
         {activeWorkspace ? (
           <div className="space-y-8 sm:space-y-12">
diff --git a/apps/app/pages/[workspaceSlug]/settings/integrations.tsx b/apps/app/pages/[workspaceSlug]/settings/integrations.tsx
index de3aa1533..3a613e9bc 100644
--- a/apps/app/pages/[workspaceSlug]/settings/integrations.tsx
+++ b/apps/app/pages/[workspaceSlug]/settings/integrations.tsx
@@ -47,7 +47,7 @@ const WorkspaceIntegrations: NextPage = () => {
         </Breadcrumbs>
       }
     >
-      <div className="px-24 py-8">
+      <div className="p-8 lg:px-24">
         <SettingsHeader />
         <section className="space-y-8">
           <div className="flex flex-col items-start gap-3">
diff --git a/apps/app/pages/[workspaceSlug]/settings/members.tsx b/apps/app/pages/[workspaceSlug]/settings/members.tsx
index 05ae6249d..c703139b8 100644
--- a/apps/app/pages/[workspaceSlug]/settings/members.tsx
+++ b/apps/app/pages/[workspaceSlug]/settings/members.tsx
@@ -5,10 +5,11 @@ import { useRouter } from "next/router";
 
 import useSWR from "swr";
 
-// hooks
-import useToast from "hooks/use-toast";
 // services
 import workspaceService from "services/workspace.service";
+// hooks
+import useToast from "hooks/use-toast";
+import useUser from "hooks/use-user";
 // layouts
 import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
 import { SettingsHeader } from "components/workspace";
@@ -37,24 +38,27 @@ const MembersSettings: NextPage = () => {
 
   const { setToastAlert } = useToast();
 
+  const { user } = useUser();
+
   const { data: activeWorkspace } = useSWR(
-    workspaceSlug ? WORKSPACE_DETAILS(workspaceSlug as string) : null,
-    () => (workspaceSlug ? workspaceService.getWorkspace(workspaceSlug as string) : null)
+    workspaceSlug ? WORKSPACE_DETAILS(workspaceSlug.toString()) : null,
+    () => (workspaceSlug ? workspaceService.getWorkspace(workspaceSlug.toString()) : null)
   );
 
-  const { data: workspaceMembers, mutate: mutateMembers } = useSWR<any[]>(
-    workspaceSlug ? WORKSPACE_MEMBERS(workspaceSlug as string) : null,
-    workspaceSlug ? () => workspaceService.workspaceMembers(workspaceSlug as string) : null
+  const { data: workspaceMembers, mutate: mutateMembers } = useSWR(
+    workspaceSlug ? WORKSPACE_MEMBERS(workspaceSlug.toString()) : null,
+    workspaceSlug ? () => workspaceService.workspaceMembers(workspaceSlug.toString()) : null
   );
 
-  const { data: workspaceInvitations, mutate: mutateInvitations } = useSWR<any[]>(
+  const { data: workspaceInvitations, mutate: mutateInvitations } = useSWR(
     workspaceSlug ? WORKSPACE_INVITATIONS : null,
-    workspaceSlug ? () => workspaceService.workspaceInvitations(workspaceSlug as string) : null
+    workspaceSlug ? () => workspaceService.workspaceInvitations(workspaceSlug.toString()) : null
   );
 
   const members = [
     ...(workspaceMembers?.map((item) => ({
       id: item.id,
+      memberId: item.member?.id,
       avatar: item.member?.avatar,
       first_name: item.member?.first_name,
       last_name: item.member?.last_name,
@@ -65,9 +69,10 @@ const MembersSettings: NextPage = () => {
     })) || []),
     ...(workspaceInvitations?.map((item) => ({
       id: item.id,
-      avatar: item.avatar ?? "",
-      first_name: item.first_name ?? item.email,
-      last_name: item.last_name ?? "",
+      memberId: item.id,
+      avatar: "",
+      first_name: item.email,
+      last_name: "",
       email: item.email,
       role: item.role,
       status: item.accepted,
@@ -138,7 +143,7 @@ const MembersSettings: NextPage = () => {
           </Breadcrumbs>
         }
       >
-        <div className="px-24 py-8">
+        <div className="p-8 lg:px-24">
           <SettingsHeader />
           <section className="space-y-8">
             <div className="flex items-end justify-between gap-4">
@@ -197,8 +202,10 @@ const MembersSettings: NextPage = () => {
                             label={ROLE[member.role as keyof typeof ROLE]}
                             value={member.role}
                             onChange={(value: any) => {
+                              if (!workspaceSlug) return;
+
                               workspaceService
-                                .updateWorkspaceMember(activeWorkspace?.slug as string, member.id, {
+                                .updateWorkspaceMember(workspaceSlug?.toString(), member.id, {
                                   role: value,
                                 })
                                 .then(() => {
@@ -224,6 +231,7 @@ const MembersSettings: NextPage = () => {
                                 });
                             }}
                             position="right"
+                            disabled={member.memberId === user?.id}
                           >
                             {Object.keys(ROLE).map((key) => (
                               <CustomSelect.Option key={key} value={key}>
diff --git a/apps/app/types/projects.d.ts b/apps/app/types/projects.d.ts
index 3fbf37678..e3d04e642 100644
--- a/apps/app/types/projects.d.ts
+++ b/apps/app/types/projects.d.ts
@@ -60,6 +60,7 @@ type ProjectViewTheme = {
 };
 
 export interface IProjectMember {
+  id: string;
   member: IUserLite;
   project: IProject;
   workspace: IWorkspace;
diff --git a/apps/app/types/workspace.d.ts b/apps/app/types/workspace.d.ts
index 91948af46..fbb54d759 100644
--- a/apps/app/types/workspace.d.ts
+++ b/apps/app/types/workspace.d.ts
@@ -23,9 +23,9 @@ export interface IWorkspaceLite {
 }
 
 export interface IWorkspaceMemberInvitation {
+  accepted: boolean;
   readonly id: string;
   email: string;
-  accepted: boolean;
   token: string;
   message: string;
   responded_at: Date;

From 63075a6a0d01d2f10e755765e053bae23d8ce0a1 Mon Sep 17 00:00:00 2001
From: pablohashescobar <118773738+pablohashescobar@users.noreply.github.com>
Date: Mon, 15 May 2023 11:37:07 +0530
Subject: [PATCH 25/81] fix: analytics export and send month and year when
 dimension in date (#1039)

* fix: send month and year when dimension in date

* fix: export csv email

* fix: export for segment and fix segment for date values
---
 .../plane/bgtasks/analytic_plot_export.py     | 24 ++++++----
 apiserver/plane/utils/analytics_plot.py       | 46 +++++++++++--------
 2 files changed, 44 insertions(+), 26 deletions(-)

diff --git a/apiserver/plane/bgtasks/analytic_plot_export.py b/apiserver/plane/bgtasks/analytic_plot_export.py
index f34f28c62..ca8ee1ab6 100644
--- a/apiserver/plane/bgtasks/analytic_plot_export.py
+++ b/apiserver/plane/bgtasks/analytic_plot_export.py
@@ -27,6 +27,7 @@ row_mapping = {
     "completed_at": "Completed At",
     "created_at": "Created At",
     "issue_count": "Issue Count",
+    "priority": "Priority",
     "effort": "Effort",
 }
 
@@ -48,9 +49,6 @@ def analytic_export_task(email, data, slug):
         key = "count" if y_axis == "issue_count" else "effort"
 
         if segment:
-            row_zero = [
-                row_mapping.get(x_axis, "X-Axis"),
-            ]
             segment_zero = []
             for item in distribution:
                 current_dict = distribution.get(item)
@@ -58,18 +56,28 @@ def analytic_export_task(email, data, slug):
                     segment_zero.append(current.get("segment"))
 
             segment_zero = list(set(segment_zero))
-            row_zero = row_zero + segment_zero
+            row_zero = (
+                [
+                    row_mapping.get(x_axis, "X-Axis"),
+                ]
+                + [
+                    row_mapping.get(y_axis, "Y-Axis"),
+                ]
+                + segment_zero
+            )
 
             rows = []
             for item in distribution:
-                generated_row = []
+                generated_row = [
+                    item,
+                ]
                 data = distribution.get(item)
                 for segment in segment_zero[1:]:
                     value = [x for x in data if x.get("segment") == segment]
                     if len(value):
                         generated_row.append(value[0].get(key))
                     else:
-                        generated_row.append("")
+                        generated_row.append("0")
 
                 rows.append(tuple(generated_row))
 
@@ -86,7 +94,7 @@ def analytic_export_task(email, data, slug):
             html_content = render_to_string("emails/exports/analytics.html", {})
 
             text_content = strip_tags(html_content)
-
+            csv_buffer.seek(0)
             msg = EmailMultiAlternatives(
                 subject, text_content, settings.EMAIL_FROM, [email]
             )
@@ -125,13 +133,13 @@ def analytic_export_task(email, data, slug):
 
             text_content = strip_tags(html_content)
 
+            csv_buffer.seek(0)
             msg = EmailMultiAlternatives(
                 subject, text_content, settings.EMAIL_FROM, [email]
             )
             msg.attach(f"{slug}-analytics.csv", csv_buffer.read())
             msg.send(fail_silently=False)
 
-
     except Exception as e:
         print(e)
         capture_exception(e)
diff --git a/apiserver/plane/utils/analytics_plot.py b/apiserver/plane/utils/analytics_plot.py
index 408b41d4b..838f535ff 100644
--- a/apiserver/plane/utils/analytics_plot.py
+++ b/apiserver/plane/utils/analytics_plot.py
@@ -3,13 +3,16 @@ from itertools import groupby
 
 # Django import
 from django.db import models
-from django.db.models import Count, DateField, F, Sum, Value, Case, When, Q
-from django.db.models.functions import Cast, Concat, Coalesce
+from django.db.models import Count, F, Sum, Value, Case, When, CharField
+from django.db.models.functions import Coalesce, ExtractMonth, ExtractYear, Concat
 
 
 def build_graph_plot(queryset, x_axis, y_axis, segment=None):
-    if x_axis in ["created_at", "completed_at"]:
-        queryset = queryset.annotate(dimension=Cast(x_axis, DateField()))
+    if x_axis in ["created_at", "start_date", "target_date", "completed_at"]:
+        year = ExtractYear(x_axis)
+        month = ExtractMonth(x_axis)
+        dimension = Concat(year, Value("-"), month, output_field=CharField())
+        queryset = queryset.annotate(dimension=dimension)
         x_axis = "dimension"
     else:
         queryset = queryset.annotate(dimension=F(x_axis))
@@ -18,34 +21,41 @@ def build_graph_plot(queryset, x_axis, y_axis, segment=None):
     if x_axis in ["created_at", "start_date", "target_date", "completed_at"]:
         queryset = queryset.exclude(x_axis__is_null=True)
 
+    if segment in ["created_at", "start_date", "target_date", "completed_at"]:
+        year = ExtractYear(segment)
+        month = ExtractMonth(segment)
+        dimension = Concat(year, Value("-"), month, output_field=CharField())
+        queryset = queryset.annotate(segmented=dimension)
+        segment = "segmented"
+
     queryset = queryset.values(x_axis)
 
     # Group queryset by x_axis field
 
     if y_axis == "issue_count":
-        queryset = (
-            queryset.annotate(
-                is_null=Case(
-                    When(dimension__isnull=True, then=Value("None")),
-                    default=Value("not_null"),
-                    output_field=models.CharField(max_length=8),
-                ),
-                dimension_ex=Coalesce("dimension", Value("null")),
-            )
-            .values("dimension")
-        )
+        queryset = queryset.annotate(
+            is_null=Case(
+                When(dimension__isnull=True, then=Value("None")),
+                default=Value("not_null"),
+                output_field=models.CharField(max_length=8),
+            ),
+            dimension_ex=Coalesce("dimension", Value("null")),
+        ).values("dimension")
         if segment:
-            queryset = queryset.annotate(segment=F(segment)).values("dimension", "segment")
+            queryset = queryset.annotate(segment=F(segment)).values(
+                "dimension", "segment"
+            )
         else:
             queryset = queryset.values("dimension")
 
         queryset = queryset.annotate(count=Count("*")).order_by("dimension")
 
-
     if y_axis == "effort":
         queryset = queryset.annotate(effort=Sum("estimate_point")).order_by(x_axis)
         if segment:
-            queryset = queryset.annotate(segment=F(segment)).values("dimension", "segment", "effort")
+            queryset = queryset.annotate(segment=F(segment)).values(
+                "dimension", "segment", "effort"
+            )
         else:
             queryset = queryset.values("dimension", "effort")
 

From d28bc41fbdf8f6ad544d8cf9ef403b5ccc5ee95f Mon Sep 17 00:00:00 2001
From: pablohashescobar <118773738+pablohashescobar@users.noreply.github.com>
Date: Mon, 15 May 2023 19:37:17 +0530
Subject: [PATCH 26/81] chore: project members, cycles and modules count
 (#1051)

---
 apiserver/plane/api/serializers/project.py |  3 +++
 apiserver/plane/api/views/project.py       | 24 +++++++++++++++++++++-
 2 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/apiserver/plane/api/serializers/project.py b/apiserver/plane/api/serializers/project.py
index bf06b3fa2..0a8ad1cf8 100644
--- a/apiserver/plane/api/serializers/project.py
+++ b/apiserver/plane/api/serializers/project.py
@@ -82,6 +82,9 @@ class ProjectDetailSerializer(BaseSerializer):
     default_assignee = UserLiteSerializer(read_only=True)
     project_lead = UserLiteSerializer(read_only=True)
     is_favorite = serializers.BooleanField(read_only=True)
+    total_members = serializers.IntegerField(read_only=True)
+    total_cycles = serializers.IntegerField(read_only=True)
+    total_modules = serializers.IntegerField(read_only=True)
 
     class Meta:
         model = Project
diff --git a/apiserver/plane/api/views/project.py b/apiserver/plane/api/views/project.py
index 3851e31c1..e9b1520fe 100644
--- a/apiserver/plane/api/views/project.py
+++ b/apiserver/plane/api/views/project.py
@@ -5,7 +5,7 @@ from datetime import datetime
 # Django imports
 from django.core.exceptions import ValidationError
 from django.db import IntegrityError
-from django.db.models import Q, Exists, OuterRef
+from django.db.models import Q, Exists, OuterRef, Func, F
 from django.core.validators import validate_email
 from django.conf import settings
 
@@ -46,6 +46,8 @@ from plane.db.models import (
     ProjectMemberInvite,
     User,
     ProjectIdentifier,
+    Cycle,
+    Module,
 )
 from plane.bgtasks.project_invitation_task import project_invitation
 
@@ -92,6 +94,26 @@ class ProjectViewSet(BaseViewSet):
                 self.get_queryset()
                 .annotate(is_favorite=Exists(subquery))
                 .order_by("-is_favorite", "name")
+                .annotate(
+                    total_members=ProjectMember.objects.filter(
+                        project_id=OuterRef("id")
+                    )
+                    .order_by()
+                    .annotate(count=Func(F("id"), function="Count"))
+                    .values("count")
+                )
+                .annotate(
+                    total_cycles=Cycle.objects.filter(project_id=OuterRef("id"))
+                    .order_by()
+                    .annotate(count=Func(F("id"), function="Count"))
+                    .values("count")
+                )
+                .annotate(
+                    total_modules=Module.objects.filter(project_id=OuterRef("id"))
+                    .order_by()
+                    .annotate(count=Func(F("id"), function="Count"))
+                    .values("count")
+                )
             )
             return Response(ProjectDetailSerializer(projects, many=True).data)
         except Exception as e:

From 7b52fb885d55dfce830f04f906e84646efd87a5e Mon Sep 17 00:00:00 2001
From: pablohashescobar <118773738+pablohashescobar@users.noreply.github.com>
Date: Mon, 15 May 2023 19:37:40 +0530
Subject: [PATCH 27/81] remove: onboarding emails (#1050)

* remove: user onboarding mail

* remove: welcome emails
---
 apiserver/plane/bgtasks/importer_task.py      |   4 +-
 apiserver/plane/bgtasks/user_welcome_task.py  |  25 +-
 apiserver/plane/db/models/user.py             |  22 +-
 .../emails/auth/user_welcome_email.html       | 481 ------------------
 4 files changed, 4 insertions(+), 528 deletions(-)
 delete mode 100644 apiserver/templates/emails/auth/user_welcome_email.html

diff --git a/apiserver/plane/bgtasks/importer_task.py b/apiserver/plane/bgtasks/importer_task.py
index 27410966f..85ac1c89b 100644
--- a/apiserver/plane/bgtasks/importer_task.py
+++ b/apiserver/plane/bgtasks/importer_task.py
@@ -27,7 +27,7 @@ from plane.db.models import (
     User,
 )
 from .workspace_invitation_task import workspace_invitation
-from plane.bgtasks.user_welcome_task import send_welcome_email
+from plane.bgtasks.user_welcome_task import send_welcome_slack
 
 
 @shared_task
@@ -58,7 +58,7 @@ def service_importer(service, importer_id):
             )
 
             [
-                send_welcome_email.delay(
+                send_welcome_slack.delay(
                     str(user.id),
                     True,
                     f"{user.email} was imported to Plane from {service}",
diff --git a/apiserver/plane/bgtasks/user_welcome_task.py b/apiserver/plane/bgtasks/user_welcome_task.py
index c042d0a0b..bea2ee33d 100644
--- a/apiserver/plane/bgtasks/user_welcome_task.py
+++ b/apiserver/plane/bgtasks/user_welcome_task.py
@@ -1,8 +1,5 @@
 # Django imports
 from django.conf import settings
-from django.core.mail import EmailMultiAlternatives
-from django.template.loader import render_to_string
-from django.utils.html import strip_tags
 
 # Third party imports
 from celery import shared_task
@@ -15,31 +12,11 @@ from plane.db.models import User
 
 
 @shared_task
-def send_welcome_email(user_id, created, message):
+def send_welcome_slack(user_id, created, message):
     try:
         instance = User.objects.get(pk=user_id)
 
         if created and not instance.is_bot:
-            first_name = instance.first_name.capitalize()
-            to_email = instance.email
-            from_email_string = settings.EMAIL_FROM
-
-            subject = f"Welcome to Plane ✈️!"
-
-            context = {"first_name": first_name, "email": instance.email}
-
-            html_content = render_to_string(
-                "emails/auth/user_welcome_email.html", context
-            )
-
-            text_content = strip_tags(html_content)
-
-            msg = EmailMultiAlternatives(
-                subject, text_content, from_email_string, [to_email]
-            )
-            msg.attach_alternative(html_content, "text/html")
-            msg.send()
-
             # Send message on slack as well
             if settings.SLACK_BOT_TOKEN:
                 client = WebClient(token=settings.SLACK_BOT_TOKEN)
diff --git a/apiserver/plane/db/models/user.py b/apiserver/plane/db/models/user.py
index 5a4f487c1..b0ab72159 100644
--- a/apiserver/plane/db/models/user.py
+++ b/apiserver/plane/db/models/user.py
@@ -104,29 +104,9 @@ class User(AbstractBaseUser, PermissionsMixin):
 
 
 @receiver(post_save, sender=User)
-def send_welcome_email(sender, instance, created, **kwargs):
+def send_welcome_slack(sender, instance, created, **kwargs):
     try:
         if created and not instance.is_bot:
-            first_name = instance.first_name.capitalize()
-            to_email = instance.email
-            from_email_string = settings.EMAIL_FROM
-
-            subject = f"Welcome to Plane ✈️!"
-
-            context = {"first_name": first_name, "email": instance.email}
-
-            html_content = render_to_string(
-                "emails/auth/user_welcome_email.html", context
-            )
-
-            text_content = strip_tags(html_content)
-
-            msg = EmailMultiAlternatives(
-                subject, text_content, from_email_string, [to_email]
-            )
-            msg.attach_alternative(html_content, "text/html")
-            msg.send()
-
             # Send message on slack as well
             if settings.SLACK_BOT_TOKEN:
                 client = WebClient(token=settings.SLACK_BOT_TOKEN)
diff --git a/apiserver/templates/emails/auth/user_welcome_email.html b/apiserver/templates/emails/auth/user_welcome_email.html
deleted file mode 100644
index af4e60d99..000000000
--- a/apiserver/templates/emails/auth/user_welcome_email.html
+++ /dev/null
@@ -1,481 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
-   <head>
-      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-      <meta http-equiv="X-UA-Compatible" content="IE=edge">
-      <meta name="format-detection" content="telephone=no">
-      <meta name="viewport" content="width=device-width, initial-scale=1.0">
-      <title>Welcome to Plane ✈️!</title>
-      <style type="text/css" emogrify="no">#outlook a { padding:0; } .ExternalClass { width:100%; } .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: 100%; } table td { border-collapse: collapse; mso-line-height-rule: exactly; } .editable.image { font-size: 0 !important; line-height: 0 !important; } .nl2go_preheader { display: none !important; mso-hide:all !important; mso-line-height-rule: exactly; visibility: hidden !important; line-height: 0px !important; font-size: 0px !important; } body { width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0; } img { outline:none; text-decoration:none; -ms-interpolation-mode: bicubic; } a img { border:none; } table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; } th { font-weight: normal; text-align: left; } *[class="gmail-fix"] { display: none !important; } </style>
-      <style type="text/css" emogrify="no"> @media (max-width: 600px) { .gmx-killpill { content: ' \03D1';} } </style>
-      <style type="text/css" emogrify="no">@media (max-width: 600px) { .gmx-killpill { content: ' \03D1';} .r0-c { box-sizing: border-box !important; text-align: center !important; valign: top !important; width: 320px !important } .r1-o { border-style: solid !important; margin: 0 auto 0 auto !important; width: 320px !important } .r2-i { background-color: #ffffff !important } .r3-c { box-sizing: border-box !important; text-align: center !important; valign: top !important; width: 100% !important } .r4-o { border-style: solid !important; margin: 0 auto 0 auto !important; width: 100% !important } .r5-i { background-color: #f8f9fa !important; padding-bottom: 20px !important; padding-left: 10px !important; padding-right: 10px !important; padding-top: 20px !important } .r6-c { box-sizing: border-box !important; display: block !important; valign: top !important; width: 100% !important } .r7-o { border-style: solid !important; width: 100% !important } .r8-i { padding-left: 0px !important; padding-right: 0px !important } .r9-i { padding-bottom: 15px !important; padding-top: 15px !important } .r10-c { box-sizing: border-box !important; text-align: left !important; valign: top !important; width: 100% !important } .r11-o { border-style: solid !important; margin: 0 auto 0 0 !important; width: 100% !important } .r12-i { padding-left: 20px !important; padding-right: 20px !important; padding-top: 0px !important; text-align: left !important } .r13-i { padding-bottom: 15px !important; padding-left: 20px !important; padding-right: 20px !important; padding-top: 15px !important; text-align: left !important } .r14-o { border-style: solid !important; margin: 0 auto 0 auto !important; margin-bottom: 15px !important; margin-top: 15px !important; width: 100% !important } .r15-i { text-align: center !important } .r16-r { background-color: #ffffff !important; border-color: #3f76ff !important; border-radius: 4px !important; border-width: 1px !important; box-sizing: border-box; height: initial !important; padding-bottom: 7px !important; padding-left: 5px !important; padding-right: 5px !important; padding-top: 7px !important; text-align: center !important; width: 100% !important } .r17-r { background-color: #ffffff !important; border-color: #000000 !important; border-radius: 4px !important; border-width: 1px !important; box-sizing: border-box; height: initial !important; padding-bottom: 7px !important; padding-left: 5px !important; padding-right: 5px !important; padding-top: 7px !important; text-align: center !important; width: 100% !important } .r18-i { background-color: #eff2f7 !important; padding-bottom: 20px !important; padding-left: 15px !important; padding-right: 15px !important; padding-top: 20px !important } .r19-i { color: #3b3f44 !important; padding-bottom: 0px !important; padding-top: 0px !important; text-align: center !important } .r20-c { box-sizing: border-box !important; text-align: center !important; width: 100% !important } .r21-c { box-sizing: border-box !important; width: 100% !important } .r22-i { font-size: 0px !important; padding-bottom: 15px !important; padding-left: 65px !important; padding-right: 65px !important; padding-top: 15px !important } .r23-c { box-sizing: border-box !important; width: 32px !important } .r24-o { border-style: solid !important; margin-right: 8px !important; width: 32px !important } .r25-i { padding-bottom: 5px !important; padding-top: 5px !important } .r26-o { border-style: solid !important; margin-right: 0px !important; width: 32px !important } .r27-i { color: #3b3f44 !important; padding-bottom: 15px !important; padding-top: 15px !important; text-align: center !important } .r28-i { padding-bottom: 15px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important } .r29-c { box-sizing: border-box !important; text-align: center !important; valign: top !important; width: 129px !important } .r30-o { border-style: solid !important; margin: 0 auto 0 auto !important; width: 129px !important } body { -webkit-text-size-adjust: none } .nl2go-responsive-hide { display: none } .nl2go-body-table { min-width: unset !important } .mobshow { height: auto !important; overflow: visible !important; max-height: unset !important; visibility: visible !important; border: none !important } .resp-table { display: inline-table !important } .magic-resp { display: table-cell !important } } </style>
-      <!--[if !mso]><!-->
-      <style type="text/css" emogrify="no">@import url("https://fonts.googleapis.com/css2?family=Bitter&family=Roboto"); </style>
-      <!--<![endif]-->
-      <style type="text/css">p, h1, h2, h3, h4, ol, ul { margin: 0; } a, a:link { color: #0092ff; text-decoration: underline } .nl2go-default-textstyle { color: #3b3f44; font-family: arial,helvetica,sans-serif; font-size: 16px; line-height: 1.5 } .default-button { border-radius: 4px; color: #ffffff; font-family: arial,helvetica,sans-serif; font-size: 16px; font-style: normal; font-weight: bold; line-height: 1.15; text-decoration: none; width: 50% } .default-heading1 { color: #1F2D3D; font-family: arial,helvetica,sans-serif; font-size: 36px } .default-heading2 { color: #1F2D3D; font-family: arial,helvetica,sans-serif; font-size: 32px } .default-heading3 { color: #1F2D3D; font-family: arial,helvetica,sans-serif; font-size: 24px } .default-heading4 { color: #1F2D3D; font-family: arial,helvetica,sans-serif; font-size: 18px } a[x-apple-data-detectors] { color: inherit !important; text-decoration: inherit !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important; } .no-show-for-you { border: none; display: none; float: none; font-size: 0; height: 0; line-height: 0; max-height: 0; mso-hide: all; overflow: hidden; table-layout: fixed; visibility: hidden; width: 0; } </style>
-      <!--[if mso]>
-      <xml>
-         <o:OfficeDocumentSettings>
-            <o:AllowPNG/>
-            <o:PixelsPerInch>96</o:PixelsPerInch>
-         </o:OfficeDocumentSettings>
-      </xml>
-      <![endif]-->
-      <style type="text/css">a:link{color: #0092ff; text-decoration: underline;}</style>
-   </head>
-   <body bgcolor="#ffffff" text="#3b3f44" link="#0092ff" yahoo="fix" style="background-color: #ffffff; padding-bottom: 0px; padding-top: 0px;">
-      <table cellspacing="0" cellpadding="0" border="0" role="presentation" class="nl2go-body-table" width="100%" style="background-color: #ffffff; width: 100%;">
-         <tr>
-            <td align="center" class="r0-c">
-               <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="600" class="r1-o" style="table-layout: fixed; width: 600px;">
-                  <tr>
-                     <td valign="top" class="r2-i" style="background-color: #ffffff;">
-                        <table width="100%" cellspacing="0" cellpadding="0" border="0" role="presentation">
-                           <tr>
-                              <td class="r3-c" align="center">
-                                 <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" class="r4-o" style="table-layout: fixed; width: 100%;">
-                                    <!-- -->
-                                    <tr class="nl2go-responsive-hide">
-                                       <td height="20" style="font-size: 20px; line-height: 20px; background-color: #f8f9fa;">­</td>
-                                    </tr>
-                                    <tr>
-                                       <td class="r5-i" style="background-color: #f8f9fa;">
-                                          <table width="100%" cellspacing="0" cellpadding="0" border="0" role="presentation">
-                                             <tr>
-                                                <th width="100%" valign="top" class="r6-c" style="font-weight: normal;">
-                                                   <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" class="r7-o" style="table-layout: fixed; width: 100%;">
-                                                      <!-- -->
-                                                      <tr>
-                                                         <td valign="top" class="r8-i">
-                                                            <table width="100%" cellspacing="0" cellpadding="0" border="0" role="presentation">
-                                                               <tr>
-                                                                  <td class="r3-c" align="center">
-                                                                     <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="120" class="r4-o" style="table-layout: fixed; width: 120px;">
-                                                                        <tr class="nl2go-responsive-hide">
-                                                                           <td height="15" style="font-size: 15px; line-height: 15px;">­</td>
-                                                                        </tr>
-                                                                        <tr>
-                                                                           <td class="r9-i" style="font-size: 0px; line-height: 0px;"> <img src="https://ik.imagekit.io/w2okwbtu2/Plane_Logo_pIhtbyIoa.png?ik-sdk-version=javascript-1.4.3&updatedAt=1670873447444" width="120" border="0" class="" style="display: block; width: 100%;"></td>
-                                                                        </tr>
-                                                                        <tr class="nl2go-responsive-hide">
-                                                                           <td height="15" style="font-size: 15px; line-height: 15px;">­</td>
-                                                                        </tr>
-                                                                     </table>
-                                                                  </td>
-                                                               </tr>
-                                                               <tr>
-                                                                  <td class="r10-c" align="left">
-                                                                     <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" class="r11-o" style="table-layout: fixed; width: 100%;">
-                                                                        <tr>
-                                                                           <td class="nl2go-responsive-hide" width="20" style="font-size: 0px; line-height: 1px;">­ </td>
-                                                                           <td align="left" valign="top" class="r12-i nl2go-default-textstyle" style="color: #3b3f44; font-family: arial,helvetica,sans-serif; font-size: 16px; line-height: 1.5; text-align: left;">
-                                                                              <div>
-                                                                                 <h3 class="default-heading3" style="margin: 0; color: #1f2d3d; font-family: arial,helvetica,sans-serif; font-size: 24px;">Welcome to Plane!</h3>
-                                                                              </div>
-                                                                           </td>
-                                                                           <td class="nl2go-responsive-hide" width="20" style="font-size: 0px; line-height: 1px;">­ </td>
-                                                                        </tr>
-                                                                     </table>
-                                                                  </td>
-                                                               </tr>
-                                                               <tr>
-                                                                  <td class="r10-c" align="left">
-                                                                     <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" class="r11-o" style="table-layout: fixed; width: 100%;">
-                                                                        <tr class="nl2go-responsive-hide">
-                                                                           <td height="15" width="20" style="font-size: 15px; line-height: 15px;">­ </td>
-                                                                           <td height="15" style="font-size: 15px; line-height: 15px;">­</td>
-                                                                           <td height="15" width="20" style="font-size: 15px; line-height: 15px;">­ </td>
-                                                                        </tr>
-                                                                        <tr>
-                                                                           <td class="nl2go-responsive-hide" width="20" style="font-size: 0px; line-height: 1px;">­ </td>
-                                                                           <td align="left" valign="top" class="r13-i nl2go-default-textstyle" style="color: #3b3f44; font-family: arial,helvetica,sans-serif; font-size: 16px; line-height: 1.5; text-align: left;">
-                                                                              <div>
-                                                                                 <p style="margin: 0;">We're thrilled you're here. We know this is the beginning of a long and exciting<br>journey, and we want to be there every step of the way.</p>
-                                                                              </div>
-                                                                           </td>
-                                                                           <td class="nl2go-responsive-hide" width="20" style="font-size: 0px; line-height: 1px;">­ </td>
-                                                                        </tr>
-                                                                        <tr class="nl2go-responsive-hide">
-                                                                           <td height="15" width="20" style="font-size: 15px; line-height: 15px;">­ </td>
-                                                                           <td height="15" style="font-size: 15px; line-height: 15px;">­</td>
-                                                                           <td height="15" width="20" style="font-size: 15px; line-height: 15px;">­ </td>
-                                                                        </tr>
-                                                                     </table>
-                                                                  </td>
-                                                               </tr>
-                                                               <tr>
-                                                                  <td class="r10-c" align="left">
-                                                                     <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" class="r11-o" style="table-layout: fixed; width: 100%;">
-                                                                        <tr class="nl2go-responsive-hide">
-                                                                           <td height="15" width="20" style="font-size: 15px; line-height: 15px;">­ </td>
-                                                                           <td height="15" style="font-size: 15px; line-height: 15px;">­</td>
-                                                                           <td height="15" width="20" style="font-size: 15px; line-height: 15px;">­ </td>
-                                                                        </tr>
-                                                                        <tr>
-                                                                           <td class="nl2go-responsive-hide" width="20" style="font-size: 0px; line-height: 1px;">­ </td>
-                                                                           <td align="left" valign="top" class="r13-i nl2go-default-textstyle" style="color: #3b3f44; font-family: arial,helvetica,sans-serif; font-size: 16px; line-height: 1.5; text-align: left;">
-                                                                              <div>
-                                                                                 <p style="margin: 0;"><strong>Plane is an open-source issue planning and tracking tool</strong> that allows teams to collaborate on projects and prioritize tasks. With Plane, you can easily create and assign issues, set deadlines, and track progress.</p>
-                                                                              </div>
-                                                                           </td>
-                                                                           <td class="nl2go-responsive-hide" width="20" style="font-size: 0px; line-height: 1px;">­ </td>
-                                                                        </tr>
-                                                                        <tr class="nl2go-responsive-hide">
-                                                                           <td height="15" width="20" style="font-size: 15px; line-height: 15px;">­ </td>
-                                                                           <td height="15" style="font-size: 15px; line-height: 15px;">­</td>
-                                                                           <td height="15" width="20" style="font-size: 15px; line-height: 15px;">­ </td>
-                                                                        </tr>
-                                                                     </table>
-                                                                  </td>
-                                                               </tr>
-                                                               <tr>
-                                                                  <td class="r10-c" align="left">
-                                                                     <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" class="r11-o" style="table-layout: fixed; width: 100%;">
-                                                                        <tr class="nl2go-responsive-hide">
-                                                                           <td height="15" width="20" style="font-size: 15px; line-height: 15px;">­ </td>
-                                                                           <td height="15" style="font-size: 15px; line-height: 15px;">­</td>
-                                                                           <td height="15" width="20" style="font-size: 15px; line-height: 15px;">­ </td>
-                                                                        </tr>
-                                                                        <tr>
-                                                                           <td class="nl2go-responsive-hide" width="20" style="font-size: 0px; line-height: 1px;">­ </td>
-                                                                           <td align="left" valign="top" class="r13-i nl2go-default-textstyle" style="color: #3b3f44; font-family: arial,helvetica,sans-serif; font-size: 16px; line-height: 1.5; text-align: left;">
-                                                                              <div>
-                                                                                 <p style="margin: 0;">We have put together some resources to help you get started. Please find them below:</p>
-                                                                                 <p style="margin: 0;"> </p>
-                                                                                 <ul style="margin: 0; margin-top:20px;">
-                                                                                    <li><a href="https://docs.plane.so/quick-start" target="_blank" style="color: #0092ff; text-decoration: underline;">Getting started with Plane</a></li>
-                                                                                    <li><a href="https://plane.so/changelog" target="_blank" style="color: #0092ff; text-decoration: underline;">Plane Changelog</a></li>
-                                                                                 </ul>
-                                                                              </div>
-                                                                           </td>
-                                                                           <td class="nl2go-responsive-hide" width="20" style="font-size: 0px; line-height: 1px;">­ </td>
-                                                                        </tr>
-                                                                        <tr class="nl2go-responsive-hide">
-                                                                           <td height="15" width="20" style="font-size: 15px; line-height: 15px;">­ </td>
-                                                                           <td height="15" style="font-size: 15px; line-height: 15px;">­</td>
-                                                                           <td height="15" width="20" style="font-size: 15px; line-height: 15px;">­ </td>
-                                                                        </tr>
-                                                                     </table>
-                                                                  </td>
-                                                               </tr>
-                                                               <tr>
-                                                                  <td class="r3-c" align="center">
-                                                                     <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="300" class="r14-o" style="table-layout: fixed; width: 300px;">
-                                                                        <tr class="nl2go-responsive-hide">
-                                                                           <td height="15" style="font-size: 15px; line-height: 15px;">­</td>
-                                                                        </tr>
-                                                                        <tr>
-                                                                           <td height="18" align="center" valign="top" class="r15-i nl2go-default-textstyle" style="color: #3b3f44; font-family: arial,helvetica,sans-serif; font-size: 16px; line-height: 1.5;">
-                                                                              <!--[if mso]> 
-                                                                              <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://app.plane.so/" style="v-text-anchor:middle; height: 33px; width: 301px;" arcsize="12%" fillcolor="#ffffff" strokecolor="#3f76ff" strokeweight="1px" data-btn="1">
-                                                                                 <w:anchorlock/>
-                                                                                 <div style="display:none;">
-                                                                                    <center class="default-button">
-                                                                                       <p><span style="color:#3F76FF;font-size:14px;">Open Plane</span></p>
-                                                                                    </center>
-                                                                                 </div>
-                                                                              </v:roundrect>
-                                                                              <![endif]-->  <!--[if !mso]><!-- --> 
-                                                                              <a href="https://app.plane.so/" class="r16-r default-button" target="_blank" data-btn="1" style="font-style: normal; font-weight: bold; line-height: 1.15; text-decoration: none; border-style: solid; word-wrap: break-word; display: inline-block; -webkit-text-size-adjust: none; mso-hide: all; background-color: #ffffff; border-color: #3f76ff; border-radius: 4px; border-width: 1px; color: #ffffff; font-family: arial,helvetica,sans-serif; font-size: 16px; height: 18px; padding-bottom: 7px; padding-left: 5px; padding-right: 5px; padding-top: 7px; width: 288px;">
-                                                                                 <p style="margin: 0;"><span style="color: #3F76FF; font-size: 14px;">Open Plane</span></p>
-                                                                              </a>
-                                                                              <!--<![endif]--> 
-                                                                           </td>
-                                                                        </tr>
-                                                                        <tr class="nl2go-responsive-hide">
-                                                                           <td height="15" style="font-size: 15px; line-height: 15px;">­</td>
-                                                                        </tr>
-                                                                     </table>
-                                                                  </td>
-                                                               </tr>
-                                                               <tr>
-                                                                  <td class="r10-c" align="left">
-                                                                     <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" class="r11-o" style="table-layout: fixed; width: 100%;">
-                                                                        <tr class="nl2go-responsive-hide">
-                                                                           <td height="15" width="20" style="font-size: 15px; line-height: 15px;">­ </td>
-                                                                           <td height="15" style="font-size: 15px; line-height: 15px;">­</td>
-                                                                           <td height="15" width="20" style="font-size: 15px; line-height: 15px;">­ </td>
-                                                                        </tr>
-                                                                        <tr>
-                                                                           <td class="nl2go-responsive-hide" width="20" style="font-size: 0px; line-height: 1px;">­ </td>
-                                                                           <td align="left" valign="top" class="r13-i nl2go-default-textstyle" style="color: #3b3f44; font-family: arial,helvetica,sans-serif; font-size: 16px; line-height: 1.5; text-align: left;">
-                                                                              <div>
-                                                                                 <p style="margin: 0;">Also, if you like Plane, please consider starring us on GitHub. This helps us to grow our community and make Plane even better.</p>
-                                                                              </div>
-                                                                           </td>
-                                                                           <td class="nl2go-responsive-hide" width="20" style="font-size: 0px; line-height: 1px;">­ </td>
-                                                                        </tr>
-                                                                        <tr class="nl2go-responsive-hide">
-                                                                           <td height="15" width="20" style="font-size: 15px; line-height: 15px;">­ </td>
-                                                                           <td height="15" style="font-size: 15px; line-height: 15px;">­</td>
-                                                                           <td height="15" width="20" style="font-size: 15px; line-height: 15px;">­ </td>
-                                                                        </tr>
-                                                                     </table>
-                                                                  </td>
-                                                               </tr>
-                                                               <tr>
-                                                                  <td class="r3-c" align="center">
-                                                                     <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="300" class="r14-o" style="table-layout: fixed; width: 300px;">
-                                                                        <tr class="nl2go-responsive-hide">
-                                                                           <td height="15" style="font-size: 15px; line-height: 15px;">­</td>
-                                                                        </tr>
-                                                                        <tr>
-                                                                           <td height="18" align="center" valign="top" class="r15-i nl2go-default-textstyle" style="color: #3b3f44; font-family: arial,helvetica,sans-serif; font-size: 16px; line-height: 1.5;">
-                                                                              <!--[if mso]> 
-                                                                              <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://github.com/makeplane/plane" style="v-text-anchor:middle; height: 33px; width: 301px;" arcsize="12%" fillcolor="#ffffff" strokecolor="#000000" strokeweight="1px" data-btn="2">
-                                                                                 <w:anchorlock/>
-                                                                                 <div style="display:none;">
-                                                                                    <center class="default-button">
-                                                                                       <p><span style="color:#000000;font-size:14px;">⭐ Star us on GitHub</span></p>
-                                                                                    </center>
-                                                                                 </div>
-                                                                              </v:roundrect>
-                                                                              <![endif]-->  <!--[if !mso]><!-- --> 
-                                                                              <a href="https://github.com/makeplane/plane" class="r17-r default-button" target="_blank" data-btn="2" style="font-style: normal; font-weight: bold; line-height: 1.15; text-decoration: none; border-style: solid; word-wrap: break-word; display: inline-block; -webkit-text-size-adjust: none; mso-hide: all; background-color: #ffffff; border-color: #000000; border-radius: 4px; border-width: 1px; color: #ffffff; font-family: arial,helvetica,sans-serif; font-size: 16px; height: 18px; padding-bottom: 7px; padding-left: 5px; padding-right: 5px; padding-top: 7px; width: 288px;">
-                                                                                 <p style="margin: 0;"><span style="color: #000000; font-size: 14px;">⭐ Star us on GitHub</span></p>
-                                                                              </a>
-                                                                              <!--<![endif]--> 
-                                                                           </td>
-                                                                        </tr>
-                                                                        <tr class="nl2go-responsive-hide">
-                                                                           <td height="15" style="font-size: 15px; line-height: 15px;">­</td>
-                                                                        </tr>
-                                                                     </table>
-                                                                  </td>
-                                                               </tr>
-                                                               <tr>
-                                                                  <td class="r10-c" align="left">
-                                                                     <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" class="r11-o" style="table-layout: fixed; width: 100%;">
-                                                                        <tr class="nl2go-responsive-hide">
-                                                                           <td height="15" width="20" style="font-size: 15px; line-height: 15px;">­ </td>
-                                                                           <td height="15" style="font-size: 15px; line-height: 15px;">­</td>
-                                                                           <td height="15" width="20" style="font-size: 15px; line-height: 15px;">­ </td>
-                                                                        </tr>
-                                                                        <tr>
-                                                                           <td class="nl2go-responsive-hide" width="20" style="font-size: 0px; line-height: 1px;">­ </td>
-                                                                           <td align="left" valign="top" class="r13-i nl2go-default-textstyle" style="color: #3b3f44; font-family: arial,helvetica,sans-serif; font-size: 16px; line-height: 1.5; text-align: left;">
-                                                                              <div>
-                                                                                 <p style="margin: 0;"><span style="font-size: 12px;">Note: Plane is still in its early days, not everything will be perfect yet, and hiccups may happen. Please let us know of any suggestions, ideas, or bugs that you encounter on our </span><a href="https://discord.gg/A92xrEGCge" target="_blank" style="color: #0092ff; text-decoration: underline;"><span style="font-size: 12px;">Discord</span></a><span style="font-size: 12px;"> or </span><a href="https://github.com/makeplane/plane" target="_blank" style="color: #0092ff; text-decoration: underline;"><span style="font-size: 12px;">GitHub</span></a><span style="font-size: 12px;">, and we will use your feedback to improve on our upcoming releases.</span></p>
-                                                                              </div>
-                                                                           </td>
-                                                                           <td class="nl2go-responsive-hide" width="20" style="font-size: 0px; line-height: 1px;">­ </td>
-                                                                        </tr>
-                                                                        <tr class="nl2go-responsive-hide">
-                                                                           <td height="15" width="20" style="font-size: 15px; line-height: 15px;">­ </td>
-                                                                           <td height="15" style="font-size: 15px; line-height: 15px;">­</td>
-                                                                           <td height="15" width="20" style="font-size: 15px; line-height: 15px;">­ </td>
-                                                                        </tr>
-                                                                     </table>
-                                                                  </td>
-                                                               </tr>
-                                                            </table>
-                                                         </td>
-                                                      </tr>
-                                                   </table>
-                                                </th>
-                                             </tr>
-                                          </table>
-                                       </td>
-                                    </tr>
-                                    <tr class="nl2go-responsive-hide">
-                                       <td height="20" style="font-size: 20px; line-height: 20px; background-color: #f8f9fa;">­</td>
-                                    </tr>
-                                 </table>
-                              </td>
-                           </tr>
-                           <tr>
-                              <td class="r3-c" align="center">
-                                 <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" class="r4-o" style="table-layout: fixed; width: 100%;">
-                                    <!-- -->
-                                    <tr class="nl2go-responsive-hide">
-                                       <td height="20" style="font-size: 20px; line-height: 20px; background-color: #eff2f7;">­</td>
-                                    </tr>
-                                    <tr>
-                                       <td class="r18-i" style="background-color: #eff2f7;">
-                                          <table width="100%" cellspacing="0" cellpadding="0" border="0" role="presentation">
-                                             <tr>
-                                                <th width="100%" valign="top" class="r6-c" style="font-weight: normal;">
-                                                   <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" class="r7-o" style="table-layout: fixed; width: 100%;">
-                                                      <!-- -->
-                                                      <tr>
-                                                         <td class="nl2go-responsive-hide" width="15" style="font-size: 0px; line-height: 1px;">­ </td>
-                                                         <td valign="top" class="r8-i">
-                                                            <table width="100%" cellspacing="0" cellpadding="0" border="0" role="presentation">
-                                                               <tr>
-                                                                  <td class="r3-c" align="center">
-                                                                     <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="57" class="r4-o" style="table-layout: fixed; width: 57px;">
-                                                                        <tr class="nl2go-responsive-hide">
-                                                                           <td height="15" style="font-size: 15px; line-height: 15px;">­</td>
-                                                                        </tr>
-                                                                        <tr>
-                                                                           <td class="r9-i" style="font-size: 0px; line-height: 0px;"> <img src="https://ik.imagekit.io/w2okwbtu2/115727700_n9t8rrnwT.png?ik-sdk-version=javascript-1.4.3&updatedAt=1670872429989" width="57" border="0" class="" style="display: block; width: 100%;"></td>
-                                                                        </tr>
-                                                                        <tr class="nl2go-responsive-hide">
-                                                                           <td height="15" style="font-size: 15px; line-height: 15px;">­</td>
-                                                                        </tr>
-                                                                     </table>
-                                                                  </td>
-                                                               </tr>
-                                                               <tr>
-                                                                  <td class="r10-c" align="left">
-                                                                     <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" class="r11-o" style="table-layout: fixed; width: 100%;">
-                                                                        <tr>
-                                                                           <td align="center" valign="top" class="r19-i nl2go-default-textstyle" style="font-family: arial,helvetica,sans-serif; color: #3b3f44; font-size: 18px; line-height: 1.5; text-align: center;">
-                                                                              <div>
-                                                                                 <p style="margin: 0; font-size: 14px;">Proudly made on <strong>Planet Earth  🌍</strong>.</p>
-                                                                              </div>
-                                                                           </td>
-                                                                        </tr>
-                                                                     </table>
-                                                                  </td>
-                                                               </tr>
-                                                               <tr>
-                                                                  <td class="r20-c" align="center">
-                                                                     <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="570" class="r4-o" style="table-layout: fixed; width: 570px;">
-                                                                        <!-- -->
-                                                                        <tr>
-                                                                           <td valign="top" class="">
-                                                                              <table width="100%" cellspacing="0" cellpadding="0" border="0" role="presentation">
-                                                                                 <tr>
-                                                                                    <td class="r21-c" style="display: inline-block;">
-                                                                                       <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="570" class="r7-o" style="table-layout: fixed; width: 570px;">
-                                                                                          <!-- -->
-                                                                                          <tr class="nl2go-responsive-hide">
-                                                                                             <td height="15" width="209" style="font-size: 15px; line-height: 15px;">­ </td>
-                                                                                             <td height="15" style="font-size: 15px; line-height: 15px;">­</td>
-                                                                                             <td height="15" width="209" style="font-size: 15px; line-height: 15px;">­ </td>
-                                                                                          </tr>
-                                                                                          <tr>
-                                                                                             <td class="nl2go-responsive-hide" width="209" style="font-size: 0px; line-height: 1px;">­ </td>
-                                                                                             <td class="r22-i">
-                                                                                                <table width="100%" cellspacing="0" cellpadding="0" border="0" role="presentation">
-                                                                                                   <tr>
-                                                                                                      <th width="40" valign="" class="r23-c mobshow resp-table" style="font-weight: normal;">
-                                                                                                         <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" class="r24-o" style="table-layout: fixed; width: 100%;">
-                                                                                                            <!-- -->
-                                                                                                            <tr class="nl2go-responsive-hide">
-                                                                                                               <td height="5" style="font-size: 5px; line-height: 5px;">­</td>
-                                                                                                               <td height="5" width="8" style="font-size: 5px; line-height: 5px;">­ </td>
-                                                                                                            </tr>
-                                                                                                            <tr>
-                                                                                                               <td class="r25-i" style="font-size: 0px; line-height: 0px;"> <a href="https://github.com/makeplane/plane" target="_blank" style="color: #0092ff; text-decoration: underline;"> <img src="https://sendinblue-templates.s3.eu-west-3.amazonaws.com/icons/rounded_colored/github_32px.png" width="32" border="0" class="" style="display: block; width: 100%;"></a> </td>
-                                                                                                               <td class="nl2go-responsive-hide" width="8" style="font-size: 0px; line-height: 1px;">­ </td>
-                                                                                                            </tr>
-                                                                                                            <tr class="nl2go-responsive-hide">
-                                                                                                               <td height="5" style="font-size: 5px; line-height: 5px;">­</td>
-                                                                                                               <td height="5" width="8" style="font-size: 5px; line-height: 5px;">­ </td>
-                                                                                                            </tr>
-                                                                                                         </table>
-                                                                                                      </th>
-                                                                                                      <th width="40" valign="" class="r23-c mobshow resp-table" style="font-weight: normal;">
-                                                                                                         <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" class="r24-o" style="table-layout: fixed; width: 100%;">
-                                                                                                            <!-- -->
-                                                                                                            <tr class="nl2go-responsive-hide">
-                                                                                                               <td height="5" style="font-size: 5px; line-height: 5px;">­</td>
-                                                                                                               <td height="5" width="8" style="font-size: 5px; line-height: 5px;">­ </td>
-                                                                                                            </tr>
-                                                                                                            <tr>
-                                                                                                               <td class="r25-i" style="font-size: 0px; line-height: 0px;"> <a href="https://discord.gg/A92xrEGCge" target="_blank" style="color: #0092ff; text-decoration: underline;"> <img src="https://sendinblue-templates.s3.eu-west-3.amazonaws.com/icons/rounded_colored/discord_32px.png" width="32" border="0" class="" style="display: block; width: 100%;"></a> </td>
-                                                                                                               <td class="nl2go-responsive-hide" width="8" style="font-size: 0px; line-height: 1px;">­ </td>
-                                                                                                            </tr>
-                                                                                                            <tr class="nl2go-responsive-hide">
-                                                                                                               <td height="5" style="font-size: 5px; line-height: 5px;">­</td>
-                                                                                                               <td height="5" width="8" style="font-size: 5px; line-height: 5px;">­ </td>
-                                                                                                            </tr>
-                                                                                                         </table>
-                                                                                                      </th>
-                                                                                                      <th width="40" valign="" class="r23-c mobshow resp-table" style="font-weight: normal;">
-                                                                                                         <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" class="r24-o" style="table-layout: fixed; width: 100%;">
-                                                                                                            <!-- -->
-                                                                                                            <tr class="nl2go-responsive-hide">
-                                                                                                               <td height="5" style="font-size: 5px; line-height: 5px;">­</td>
-                                                                                                               <td height="5" width="8" style="font-size: 5px; line-height: 5px;">­ </td>
-                                                                                                            </tr>
-                                                                                                            <tr>
-                                                                                                               <td class="r25-i" style="font-size: 0px; line-height: 0px;"> <a href="https://twitter.com/planepowers" target="_blank" style="color: #0092ff; text-decoration: underline;"> <img src="https://sendinblue-templates.s3.eu-west-3.amazonaws.com/icons/rounded_colored/twitter_32px.png" width="32" border="0" class="" style="display: block; width: 100%;"></a> </td>
-                                                                                                               <td class="nl2go-responsive-hide" width="8" style="font-size: 0px; line-height: 1px;">­ </td>
-                                                                                                            </tr>
-                                                                                                            <tr class="nl2go-responsive-hide">
-                                                                                                               <td height="5" style="font-size: 5px; line-height: 5px;">­</td>
-                                                                                                               <td height="5" width="8" style="font-size: 5px; line-height: 5px;">­ </td>
-                                                                                                            </tr>
-                                                                                                         </table>
-                                                                                                      </th>
-                                                                                                      <th width="32" valign="" class="r23-c mobshow resp-table" style="font-weight: normal;">
-                                                                                                         <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" class="r26-o" style="table-layout: fixed; width: 100%;">
-                                                                                                            <!-- -->
-                                                                                                            <tr class="nl2go-responsive-hide">
-                                                                                                               <td height="5" style="font-size: 5px; line-height: 5px;">­</td>
-                                                                                                            </tr>
-                                                                                                            <tr>
-                                                                                                               <td class="r25-i" style="font-size: 0px; line-height: 0px;"> <a href="https://www.linkedin.com/company/planepowers/" target="_blank" style="color: #0092ff; text-decoration: underline;"> <img src="https://sendinblue-templates.s3.eu-west-3.amazonaws.com/icons/rounded_colored/linkedin_32px.png" width="32" border="0" class="" style="display: block; width: 100%;"></a> </td>
-                                                                                                            </tr>
-                                                                                                            <tr class="nl2go-responsive-hide">
-                                                                                                               <td height="5" style="font-size: 5px; line-height: 5px;">­</td>
-                                                                                                            </tr>
-                                                                                                         </table>
-                                                                                                      </th>
-                                                                                                   </tr>
-                                                                                                </table>
-                                                                                             </td>
-                                                                                             <td class="nl2go-responsive-hide" width="209" style="font-size: 0px; line-height: 1px;">­ </td>
-                                                                                          </tr>
-                                                                                          <tr class="nl2go-responsive-hide">
-                                                                                             <td height="15" width="209" style="font-size: 15px; line-height: 15px;">­ </td>
-                                                                                             <td height="15" style="font-size: 15px; line-height: 15px;">­</td>
-                                                                                             <td height="15" width="209" style="font-size: 15px; line-height: 15px;">­ </td>
-                                                                                          </tr>
-                                                                                       </table>
-                                                                                    </td>
-                                                                                 </tr>
-                                                                              </table>
-                                                                           </td>
-                                                                        </tr>
-                                                                     </table>
-                                                                  </td>
-                                                               </tr>
-                                                               <tr>
-                                                                  <td class="r10-c" align="left">
-                                                                     <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" class="r11-o" style="table-layout: fixed; width: 100%;">
-                                                                        <tr class="nl2go-responsive-hide">
-                                                                           <td height="15" style="font-size: 15px; line-height: 15px;">­</td>
-                                                                        </tr>
-                                                                        <tr>
-                                                                           <td align="center" valign="top" class="r27-i nl2go-default-textstyle" style="font-family: arial,helvetica,sans-serif; color: #3b3f44; font-size: 18px; line-height: 1.5; text-align: center;">
-                                                                              <div>
-                                                                                 <p style="margin: 0; font-size: 14px;"><a href="{{ mirror }}" style="color: #0092ff; text-decoration: underline;">View in browser</a> | <a href="{{ unsubscribe }}" style="color: #0092ff; text-decoration: underline;">Unsubscribe</a></p>
-                                                                              </div>
-                                                                           </td>
-                                                                        </tr>
-                                                                        <tr class="nl2go-responsive-hide">
-                                                                           <td height="15" style="font-size: 15px; line-height: 15px;">­</td>
-                                                                        </tr>
-                                                                     </table>
-                                                                  </td>
-                                                               </tr>
-                                                            </table>
-                                                         </td>
-                                                         <td class="nl2go-responsive-hide" width="15" style="font-size: 0px; line-height: 1px;">­ </td>
-                                                      </tr>
-                                                   </table>
-                                                </th>
-                                             </tr>
-                                          </table>
-                                       </td>
-                                    </tr>
-                                    <tr class="nl2go-responsive-hide">
-                                       <td height="20" style="font-size: 20px; line-height: 20px; background-color: #eff2f7;">­</td>
-                                    </tr>
-                                 </table>
-                              </td>
-                           </tr>
-                        </table>
-                     </td>
-                  </tr>
-               </table>
-            </td>
-         </tr>
-      </table>
-   </body>
-</html>
\ No newline at end of file

From 8d6082183ef8003a53665512ab1effcc78a1433b Mon Sep 17 00:00:00 2001
From: pablohashescobar <118773738+pablohashescobar@users.noreply.github.com>
Date: Mon, 15 May 2023 19:38:08 +0530
Subject: [PATCH 28/81] chore: return assignee avatars when x axis in
 assignee_email (#1049)

---
 apiserver/plane/api/views/analytic.py | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/apiserver/plane/api/views/analytic.py b/apiserver/plane/api/views/analytic.py
index e054678fe..bd9ea69bf 100644
--- a/apiserver/plane/api/views/analytic.py
+++ b/apiserver/plane/api/views/analytic.py
@@ -76,11 +76,17 @@ class AnalyticsEndpoint(BaseAPIView):
                     )
                 )
 
+            assignee_avatars = {}
+            if x_axis in ["assignees__email"]:
+                assignee_avatars = Issue.objects.filter(
+                    workspace__slug=slug, **filters
+                ).values("assignees__avatar")
+
             return Response(
                 {
                     "total": total_issues,
                     "distribution": distribution,
-                    "extras": {"colors": colors},
+                    "extras": {"colors": colors, "assignee_avatars": assignee_avatars},
                 },
                 status=status.HTTP_200_OK,
             )

From abe021071c6b1d195a081b02ffa1e33ade606ec6 Mon Sep 17 00:00:00 2001
From: pablohashescobar <118773738+pablohashescobar@users.noreply.github.com>
Date: Mon, 15 May 2023 19:38:37 +0530
Subject: [PATCH 29/81] fix: workspace and project member update (#1046)

---
 apiserver/plane/api/urls.py            |  2 --
 apiserver/plane/api/views/project.py   | 35 ++++++++++++++++++++++++
 apiserver/plane/api/views/workspace.py | 37 ++++++++++++++++++++++++++
 3 files changed, 72 insertions(+), 2 deletions(-)

diff --git a/apiserver/plane/api/urls.py b/apiserver/plane/api/urls.py
index cf9ac92cf..93af9d762 100644
--- a/apiserver/plane/api/urls.py
+++ b/apiserver/plane/api/urls.py
@@ -315,7 +315,6 @@ urlpatterns = [
         "workspaces/<str:slug>/members/<uuid:pk>/",
         WorkSpaceMemberViewSet.as_view(
             {
-                "put": "update",
                 "patch": "partial_update",
                 "delete": "destroy",
                 "get": "retrieve",
@@ -425,7 +424,6 @@ urlpatterns = [
         ProjectMemberViewSet.as_view(
             {
                 "get": "retrieve",
-                "put": "update",
                 "patch": "partial_update",
                 "delete": "destroy",
             }
diff --git a/apiserver/plane/api/views/project.py b/apiserver/plane/api/views/project.py
index e9b1520fe..f6c4ed87d 100644
--- a/apiserver/plane/api/views/project.py
+++ b/apiserver/plane/api/views/project.py
@@ -409,6 +409,41 @@ class ProjectMemberViewSet(BaseViewSet):
             .select_related("workspace", "workspace__owner")
         )
 
+    def partial_update(self, request, slug, project_id, pk):
+        try:
+            project_member = ProjectMember.objects.get(pk=pk, workspace__slug=slug, project_id=project_id)
+            if request.user.id == project_member.member_id:
+                return Response(
+                    {"error": "You cannot update your own role"},
+                    status=status.HTTP_400_BAD_REQUEST,
+                )
+
+            if request.data.get("role", 10) > project_member.role:
+                return Response(
+                    {
+                        "error": "You cannot update a role that is higher than your own role"
+                    },
+                    status=status.HTTP_400_BAD_REQUEST,
+                )
+
+            serializer = ProjectMemberSerializer(
+                project_member, data=request.data, partial=True
+            )
+
+            if serializer.is_valid():
+                serializer.save()
+                return Response(serializer.data, status=status.HTTP_200_OK)
+            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+        except ProjectMember.DoesNotExist:
+            return Response(
+                {"error": "Project Member does not exist"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
+        except Exception as e:
+            capture_exception(e)
+            return Response({"error": "Something went wrong please try again later"}, status=status.HTTP_400_BAD_REQUEST)
+
+
 
 class AddMemberToProjectEndpoint(BaseAPIView):
     permission_classes = [
diff --git a/apiserver/plane/api/views/workspace.py b/apiserver/plane/api/views/workspace.py
index 7f47c5baf..dcb8941a1 100644
--- a/apiserver/plane/api/views/workspace.py
+++ b/apiserver/plane/api/views/workspace.py
@@ -423,6 +423,43 @@ class WorkSpaceMemberViewSet(BaseViewSet):
             .select_related("member")
         )
 
+    def partial_update(self, request, slug, pk):
+        try:
+            workspace_member = WorkspaceMember.objects.get(pk=pk, workspace__slug=slug)
+            if request.user.id == workspace_member.member_id:
+                return Response(
+                    {"error": "You cannot update your own role"},
+                    status=status.HTTP_400_BAD_REQUEST,
+                )
+
+            if request.data.get("role", 10) > workspace_member.role:
+                return Response(
+                    {
+                        "error": "You cannot update a role that is higher than your own role"
+                    },
+                    status=status.HTTP_400_BAD_REQUEST,
+                )
+
+            serializer = WorkSpaceMemberSerializer(
+                workspace_member, data=request.data, partial=True
+            )
+
+            if serializer.is_valid():
+                serializer.save()
+                return Response(serializer.data, status=status.HTTP_200_OK)
+            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+        except WorkspaceMember.DoesNotExist:
+            return Response(
+                {"error": "Workspace Member does not exist"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
+        except Exception as e:
+            capture_exception(e)
+            return Response(
+                {"error": "Something went wrong please try again later"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
+
 
 class TeamMemberViewSet(BaseViewSet):
     serializer_class = TeamSerializer

From 8c707cc5449333080d7979aef4d84dee706df2b8 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Mon, 15 May 2023 23:58:41 +0530
Subject: [PATCH 30/81] fix: lower role user cannot update higher role user
 (#1048)

* fix: user role update

* chore: update project member update service type
---
 .../components/emoji-icon-picker/index.tsx    |  3 +-
 apps/app/components/icons/target-icon.tsx     |  2 +-
 .../workspace/single-invitation.tsx           |  2 +-
 .../projects/[projectId]/settings/members.tsx | 56 ++++++++++++-------
 .../[workspaceSlug]/settings/members.tsx      | 56 +++++++++++--------
 apps/app/public/empty-state/empty-cycle.svg   |  4 +-
 apps/app/public/empty-state/empty-issue.svg   |  8 +--
 apps/app/public/empty-state/empty-module.svg  |  4 +-
 apps/app/public/empty-state/empty-view.svg    | 32 +++++------
 apps/app/public/onboarding/issue.svg          |  2 +-
 apps/app/services/project.service.ts          |  2 +-
 apps/app/services/workspace.service.ts        |  2 +-
 12 files changed, 101 insertions(+), 72 deletions(-)

diff --git a/apps/app/components/emoji-icon-picker/index.tsx b/apps/app/components/emoji-icon-picker/index.tsx
index 592d7bb01..e52335e47 100644
--- a/apps/app/components/emoji-icon-picker/index.tsx
+++ b/apps/app/components/emoji-icon-picker/index.tsx
@@ -99,9 +99,9 @@ const EmojiIconPicker: React.FC<Props> = ({
                       <div className="grid grid-cols-8 gap-2">
                         {recentEmojis.map((emoji) => (
                           <button
+                            key={emoji}
                             type="button"
                             className="flex h-4 w-4 select-none items-center justify-between text-sm"
-                            key={emoji}
                             onClick={() => {
                               onChange(emoji);
                               setIsOpen(false);
@@ -147,6 +147,7 @@ const EmojiIconPicker: React.FC<Props> = ({
                           "#000000",
                         ].map((curCol) => (
                           <span
+                            key={curCol}
                             className="h-4 w-4 cursor-pointer rounded-full"
                             style={{ backgroundColor: curCol }}
                             onClick={() => setActiveColor(curCol)}
diff --git a/apps/app/components/icons/target-icon.tsx b/apps/app/components/icons/target-icon.tsx
index e27c21d7a..71bc44230 100644
--- a/apps/app/components/icons/target-icon.tsx
+++ b/apps/app/components/icons/target-icon.tsx
@@ -19,7 +19,7 @@ export const TargetIcon: React.FC<Props> = ({
     <circle cx="9" cy="9" r="5.4375" stroke={color} strokeLinecap="round" />
     <path
       fill={color}
-      stroke-width="0.5"
+      strokeWidth="0.5"
       d="M17.6033 7.51926C18.1597 9.22867 18.1241 11.0757 17.5021 12.7624C16.8802 14.4491 15.7083 15.8771 14.1753 16.8161C12.6424 17.7551 10.8378 18.1504 9.05269 17.9382C7.26757 17.7259 5.60599 16.9185 4.33594 15.6463C3.0659 14.374 2.26145 12.711 2.05235 10.9255C1.84325 9.14002 2.24169 7.33614 3.18341 5.80485C4.12512 4.27355 5.5552 3.10411 7.24298 2.48516C8.93076 1.86621 10.7778 1.83384 12.4863 2.39326L11.4383 3.44026C11.3803 3.49726 11.3283 3.56026 11.2803 3.62526C9.91235 3.34916 8.49189 3.52063 7.22898 4.11431C5.96606 4.70799 4.92774 5.69235 4.26757 6.92182C3.6074 8.15128 3.36045 9.56057 3.56322 10.9413C3.76599 12.3219 4.40773 13.6007 5.39353 14.5884C6.37933 15.5762 7.65683 16.2204 9.03712 16.4259C10.4174 16.6314 11.8272 16.3872 13.0579 15.7295C14.2887 15.0717 15.2751 14.0353 15.8713 12.7736C16.4674 11.5118 16.6417 10.0917 16.3683 8.72326C16.4367 8.67472 16.5009 8.62053 16.5603 8.56126L17.6023 7.51926H17.6033ZM14.8983 9.00026C15.1129 10.0534 14.9826 11.1477 14.5264 12.1209C14.0703 13.0942 13.3127 13.8945 12.3659 14.4033C11.4191 14.9121 10.3336 15.1022 9.27028 14.9456C8.20695 14.7889 7.22239 14.2938 6.46258 13.5336C5.70276 12.7734 5.20814 11.7886 5.05203 10.7252C4.89593 9.66176 5.08665 8.57635 5.59593 7.62984C6.10521 6.68334 6.90593 5.92615 7.87938 5.4705C8.85284 5.01486 9.94721 4.88503 11.0003 5.10026V6.64626C10.2539 6.42346 9.45458 6.45598 8.7288 6.73866C8.00302 7.02135 7.39227 7.53806 6.99325 8.20697C6.59423 8.87589 6.42973 9.65879 6.52581 10.4317C6.62188 11.2047 6.97304 11.9235 7.52368 12.4744C8.07432 13.0252 8.79298 13.3767 9.56588 13.4731C10.3388 13.5695 11.1218 13.4053 11.7908 13.0066C12.4599 12.6079 12.9769 11.9973 13.2599 11.2717C13.5429 10.546 13.5757 9.7467 13.3533 9.00026H14.8983ZM9.99826 11.5003C10.2283 11.5004 10.4553 11.4476 10.6617 11.346C10.868 11.2443 11.0483 11.0966 11.1884 10.9142C11.3286 10.7318 11.4249 10.5196 11.47 10.294C11.515 10.0684 11.5076 9.83551 11.4483 9.61326L13.0303 8.03026L13.0603 8.00026H15.5003C15.566 8.00038 15.631 7.98754 15.6918 7.96249C15.7525 7.93744 15.8077 7.90066 15.8543 7.85426L17.8543 5.85426C17.9244 5.78433 17.9721 5.69516 17.9915 5.59805C18.0109 5.50094 18.001 5.40027 17.963 5.3088C17.9251 5.21732 17.8609 5.13917 17.7785 5.08424C17.6961 5.02931 17.5993 5.00008 17.5003 5.00026H15.0003V2.50026C15.0002 2.40144 14.9709 2.30485 14.9161 2.22268C14.8612 2.1405 14.7832 2.07643 14.6919 2.03855C14.6006 2.00068 14.5002 1.99069 14.4033 2.00986C14.3063 2.02903 14.2172 2.0765 14.1473 2.14626L12.1473 4.14626C12.1007 4.1927 12.0637 4.24787 12.0385 4.30861C12.0133 4.36936 12.0003 4.43448 12.0003 4.50026V6.94026C11.99 6.94998 11.98 6.95998 11.9703 6.97026L10.3883 8.55026C10.1658 8.49057 9.93264 8.48287 9.70675 8.52775C9.48086 8.57263 9.26833 8.66889 9.0856 8.80908C8.90288 8.94926 8.75486 9.12961 8.65302 9.33617C8.55117 9.54273 8.49821 9.76996 8.49826 10.0003C8.49826 10.3981 8.65629 10.7796 8.9376 11.0609C9.2189 11.3422 9.60043 11.5003 9.99826 11.5003Z"
     />
   </svg>
diff --git a/apps/app/components/workspace/single-invitation.tsx b/apps/app/components/workspace/single-invitation.tsx
index b9807c1d0..e9092c11d 100644
--- a/apps/app/components/workspace/single-invitation.tsx
+++ b/apps/app/components/workspace/single-invitation.tsx
@@ -38,7 +38,7 @@ const SingleInvitation: React.FC<Props> = ({
                   alt={invitation.workspace.name}
                 />
               ) : (
-                <span className="flex h-full w-full items-center justify-center rounded bg-gray-500 p-4 uppercase text-white">
+                <span className="flex h-full w-full items-center justify-center rounded bg-gray-700 p-4 uppercase text-white">
                   {invitation.workspace.name.charAt(0)}
                 </span>
               )}
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
index 6f1ecb38e..118e547e5 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
@@ -87,6 +87,8 @@ const MembersSettings: NextPage = () => {
     })) || []),
   ];
 
+  const currentUser = projectMembers?.find((item) => item.member.id === user?.id);
+
   return (
     <>
       <ConfirmProjectMemberRemove
@@ -206,6 +208,14 @@ const MembersSettings: NextPage = () => {
                             onChange={(value: 5 | 10 | 15 | 20 | undefined) => {
                               if (!activeWorkspace || !projectDetails) return;
 
+                              mutateMembers(
+                                (prevData: any) =>
+                                  prevData.map((m: any) =>
+                                    m.id === member.id ? { ...m, role: value } : m
+                                  ),
+                                false
+                              );
+
                               projectService
                                 .updateProjectMember(
                                   activeWorkspace.slug,
@@ -215,32 +225,38 @@ const MembersSettings: NextPage = () => {
                                     role: value,
                                   }
                                 )
-                                .then((res) => {
+                                .catch(() => {
                                   setToastAlert({
-                                    type: "success",
-                                    message: "Member role updated successfully.",
-                                    title: "Success",
+                                    type: "error",
+                                    title: "Error!",
+                                    message:
+                                      "An error occurred while updating member role. Please try again.",
                                   });
-                                  mutateMembers(
-                                    (prevData: any) =>
-                                      prevData.map((m: any) =>
-                                        m.id === member.id ? { ...m, ...res, role: value } : m
-                                      ),
-                                    false
-                                  );
-                                })
-                                .catch((err) => {
-                                  console.log(err);
                                 });
                             }}
                             position="right"
-                            disabled={member.memberId === user?.id}
+                            disabled={
+                              member.memberId === user?.id ||
+                              !member.member ||
+                              (currentUser &&
+                                currentUser.role !== 20 &&
+                                currentUser.role < member.role)
+                            }
                           >
-                            {Object.keys(ROLE).map((key) => (
-                              <CustomSelect.Option key={key} value={key}>
-                                <>{ROLE[parseInt(key) as keyof typeof ROLE]}</>
-                              </CustomSelect.Option>
-                            ))}
+                            {Object.keys(ROLE).map((key) => {
+                              if (
+                                currentUser &&
+                                currentUser.role !== 20 &&
+                                currentUser.role < parseInt(key)
+                              )
+                                return null;
+
+                              return (
+                                <CustomSelect.Option key={key} value={key}>
+                                  <>{ROLE[parseInt(key) as keyof typeof ROLE]}</>
+                                </CustomSelect.Option>
+                              );
+                            })}
                           </CustomSelect>
                           <CustomMenu ellipsis>
                             <CustomMenu.MenuItem
diff --git a/apps/app/pages/[workspaceSlug]/settings/members.tsx b/apps/app/pages/[workspaceSlug]/settings/members.tsx
index c703139b8..fd1ec43cc 100644
--- a/apps/app/pages/[workspaceSlug]/settings/members.tsx
+++ b/apps/app/pages/[workspaceSlug]/settings/members.tsx
@@ -80,6 +80,8 @@ const MembersSettings: NextPage = () => {
     })) || []),
   ];
 
+  const currentUser = workspaceMembers?.find((item) => item.member?.id === user?.id);
+
   return (
     <>
       <ConfirmWorkspaceMemberRemove
@@ -204,40 +206,50 @@ const MembersSettings: NextPage = () => {
                             onChange={(value: any) => {
                               if (!workspaceSlug) return;
 
+                              mutateMembers(
+                                (prevData) =>
+                                  prevData?.map((m) =>
+                                    m.id === member.id ? { ...m, role: value } : m
+                                  ),
+                                false
+                              );
+
                               workspaceService
                                 .updateWorkspaceMember(workspaceSlug?.toString(), member.id, {
                                   role: value,
                                 })
-                                .then(() => {
-                                  mutateMembers(
-                                    (prevData) =>
-                                      prevData?.map((m) =>
-                                        m.id === member.id ? { ...m, role: value } : m
-                                      ),
-                                    false
-                                  );
-                                  setToastAlert({
-                                    title: "Success",
-                                    type: "success",
-                                    message: "Member role updated successfully.",
-                                  });
-                                })
                                 .catch(() => {
                                   setToastAlert({
-                                    title: "Error",
                                     type: "error",
-                                    message: "An error occurred while updating member role.",
+                                    title: "Error!",
+                                    message:
+                                      "An error occurred while updating member role. Please try again.",
                                   });
                                 });
                             }}
                             position="right"
-                            disabled={member.memberId === user?.id}
+                            disabled={
+                              member.memberId === currentUser?.member.id ||
+                              !member.status ||
+                              (currentUser &&
+                                currentUser.role !== 20 &&
+                                currentUser.role < member.role)
+                            }
                           >
-                            {Object.keys(ROLE).map((key) => (
-                              <CustomSelect.Option key={key} value={key}>
-                                <>{ROLE[parseInt(key) as keyof typeof ROLE]}</>
-                              </CustomSelect.Option>
-                            ))}
+                            {Object.keys(ROLE).map((key) => {
+                              if (
+                                currentUser &&
+                                currentUser.role !== 20 &&
+                                currentUser.role < parseInt(key)
+                              )
+                                return null;
+
+                              return (
+                                <CustomSelect.Option key={key} value={key}>
+                                  <>{ROLE[parseInt(key) as keyof typeof ROLE]}</>
+                                </CustomSelect.Option>
+                              );
+                            })}
                           </CustomSelect>
                           <CustomMenu ellipsis>
                             <CustomMenu.MenuItem
diff --git a/apps/app/public/empty-state/empty-cycle.svg b/apps/app/public/empty-state/empty-cycle.svg
index 47bed04d5..b82fbab84 100644
--- a/apps/app/public/empty-state/empty-cycle.svg
+++ b/apps/app/public/empty-state/empty-cycle.svg
@@ -3,7 +3,7 @@
 <rect x="26" y="3" width="260" height="87" rx="6.16937" fill="white"/>
 </g>
 <path d="M26 63H285.731V83.3589C285.731 86.7662 282.968 89.5283 279.561 89.5283H32.1694C28.7621 89.5283 26 86.7662 26 83.3589V63Z" fill="#FAFAFA"/>
-<path d="M26 63H285.731" stroke="#E2E2E2" stroke-width="0.616937"/>
+<path d="M26 63H285.731" stroke="#E2E2E2" strokeWidth="0.616937"/>
 <path d="M45.6429 21.334C45.5998 20.9308 45.4183 20.6169 45.0982 20.3922C44.7812 20.1676 44.3688 20.0552 43.861 20.0552C43.504 20.0552 43.1977 20.1091 42.9423 20.2168C42.6868 20.3245 42.4914 20.4707 42.356 20.6554C42.2206 20.84 42.1513 21.0508 42.1483 21.2878C42.1483 21.4848 42.1929 21.6556 42.2821 21.8002C42.3745 21.9449 42.4991 22.068 42.6561 22.1696C42.813 22.2681 42.9869 22.3511 43.1777 22.4189C43.3685 22.4866 43.5609 22.5435 43.7548 22.5897L44.6412 22.8113C44.9982 22.8944 45.3413 23.0067 45.6706 23.1483C46.003 23.2898 46.3 23.4683 46.5616 23.6838C46.8263 23.8992 47.0356 24.1593 47.1895 24.464C47.3433 24.7686 47.4203 25.1257 47.4203 25.535C47.4203 26.089 47.2787 26.5768 46.9956 26.9984C46.7124 27.417 46.3031 27.7447 45.7676 27.9817C45.2351 28.2156 44.5904 28.3326 43.8333 28.3326C43.0977 28.3326 42.4591 28.2187 41.9174 27.9909C41.3788 27.7632 40.9572 27.4308 40.6525 26.9938C40.3509 26.5568 40.1878 26.0243 40.1632 25.3965H41.8482C41.8728 25.7258 41.9744 25.9997 42.1529 26.2182C42.3314 26.4367 42.5637 26.5998 42.85 26.7076C43.1393 26.8153 43.4624 26.8691 43.8194 26.8691C44.1918 26.8691 44.5181 26.8137 44.7981 26.7029C45.0813 26.5891 45.3029 26.4321 45.4629 26.2321C45.6229 26.0289 45.7045 25.792 45.7076 25.5211C45.7045 25.2749 45.6322 25.0718 45.4906 24.9118C45.349 24.7486 45.1505 24.6132 44.8951 24.5055C44.6427 24.3947 44.3472 24.2962 44.0087 24.21L42.9331 23.9331C42.1544 23.733 41.5389 23.4299 41.0865 23.0236C40.6371 22.6143 40.4125 22.0711 40.4125 21.394C40.4125 20.8369 40.5633 20.3491 40.8649 19.9306C41.1696 19.512 41.5835 19.1873 42.1067 18.9565C42.6299 18.7226 43.2224 18.6056 43.8841 18.6056C44.555 18.6056 45.1428 18.7226 45.6475 18.9565C46.1554 19.1873 46.5539 19.5089 46.8432 19.9213C47.1325 20.3307 47.2818 20.8016 47.291 21.334H45.6429ZM50.5445 18.7349V28.1895H48.8733V18.7349H50.5445ZM54.3034 28.3326C53.8541 28.3326 53.4494 28.2525 53.0893 28.0925C52.7323 27.9294 52.4492 27.6893 52.2399 27.3723C52.0337 27.0553 51.9306 26.6645 51.9306 26.1998C51.9306 25.7997 52.0044 25.4688 52.1522 25.2072C52.2999 24.9456 52.5015 24.7363 52.7569 24.5794C53.0124 24.4224 53.3001 24.3039 53.6202 24.2239C53.9434 24.1408 54.2773 24.0808 54.622 24.0439C55.0375 24.0008 55.3745 23.9623 55.633 23.9284C55.8915 23.8915 56.0792 23.8361 56.1962 23.7623C56.3162 23.6853 56.3762 23.5668 56.3762 23.4068V23.3791C56.3762 23.0313 56.2731 22.762 56.0669 22.5712C55.8607 22.3804 55.5637 22.285 55.176 22.285C54.7666 22.285 54.4419 22.3742 54.2019 22.5527C53.9649 22.7312 53.8049 22.9421 53.7218 23.1852L52.1614 22.9636C52.2845 22.5327 52.4876 22.1726 52.7708 21.8833C53.0539 21.591 53.4002 21.3725 53.8095 21.2278C54.2188 21.0801 54.6712 21.0062 55.1667 21.0062C55.5083 21.0062 55.8484 21.0462 56.187 21.1262C56.5255 21.2063 56.8348 21.3386 57.1149 21.5233C57.3949 21.7048 57.6196 21.9526 57.7889 22.2665C57.9612 22.5804 58.0474 22.9728 58.0474 23.4437V28.1895H56.4409V27.2154H56.3855C56.2839 27.4123 56.1408 27.597 55.9561 27.7694C55.7746 27.9386 55.5453 28.0756 55.2683 28.1802C54.9944 28.2818 54.6728 28.3326 54.3034 28.3326ZM54.7374 27.1046C55.0729 27.1046 55.3637 27.0384 55.6099 26.9061C55.8561 26.7707 56.0454 26.5922 56.1777 26.3706C56.3132 26.149 56.3809 25.9074 56.3809 25.6458V24.8102C56.3285 24.8533 56.2393 24.8933 56.1131 24.9302C55.99 24.9672 55.8515 24.9995 55.6976 25.0272C55.5437 25.0549 55.3914 25.0795 55.2406 25.101C55.0898 25.1226 54.959 25.141 54.8482 25.1564C54.5989 25.1903 54.3758 25.2457 54.1788 25.3226C53.9818 25.3996 53.8264 25.5073 53.7125 25.6458C53.5987 25.7812 53.5417 25.9566 53.5417 26.1721C53.5417 26.4798 53.6541 26.7122 53.8787 26.8691C54.1034 27.0261 54.3896 27.1046 54.7374 27.1046ZM62.8208 28.3279C62.113 28.3279 61.5051 28.1725 60.9973 27.8617C60.4926 27.5508 60.1033 27.1215 59.8294 26.5737C59.5585 26.0228 59.4231 25.3888 59.4231 24.6717C59.4231 23.9515 59.5616 23.316 59.8386 22.7651C60.1156 22.2111 60.5065 21.7802 61.0112 21.4725C61.519 21.1616 62.1191 21.0062 62.8116 21.0062C63.3871 21.0062 63.8965 21.1124 64.3397 21.3248C64.7859 21.534 65.1414 21.831 65.4061 22.2157C65.6708 22.5974 65.8216 23.0436 65.8585 23.5545H64.2612C64.1966 23.2129 64.0427 22.9282 63.7995 22.7005C63.5595 22.4696 63.2379 22.3542 62.8347 22.3542C62.4931 22.3542 62.193 22.4466 61.9345 22.6312C61.676 22.8128 61.4744 23.0744 61.3297 23.416C61.1882 23.7576 61.1174 24.167 61.1174 24.644C61.1174 25.1272 61.1882 25.5427 61.3297 25.8904C61.4713 26.2351 61.6698 26.5014 61.9252 26.6891C62.1838 26.8738 62.4869 26.9661 62.8347 26.9661C63.0809 26.9661 63.301 26.9199 63.4949 26.8276C63.6918 26.7322 63.8565 26.5952 63.9888 26.4167C64.1212 26.2382 64.2119 26.0212 64.2612 25.7658H65.8585C65.8185 26.2675 65.6708 26.7122 65.4153 27.1C65.1599 27.4847 64.8121 27.7863 64.372 28.0048C63.9319 28.2202 63.4148 28.3279 62.8208 28.3279ZM68.7542 25.9643L68.7496 23.9469H69.0173L71.5656 21.0985H73.5184L70.3838 24.5886H70.0376L68.7542 25.9643ZM67.2307 28.1895V18.7349H68.9019V28.1895H67.2307ZM71.681 28.1895L69.3728 24.9625L70.4992 23.7853L73.68 28.1895H71.681ZM79.6433 18.7349V28.1895H77.9306V18.7349H79.6433ZM83.0953 24.0346V28.1895H81.4241V21.0985H83.0214V22.3034H83.1045C83.2676 21.9064 83.5277 21.591 83.8847 21.3571C84.2448 21.1232 84.6895 21.0062 85.2188 21.0062C85.7082 21.0062 86.1344 21.1109 86.4976 21.3201C86.8638 21.5294 87.147 21.8326 87.347 22.2296C87.5502 22.6266 87.6502 23.1083 87.6471 23.6745V28.1895H85.9759V23.9331C85.9759 23.4591 85.8528 23.0882 85.6066 22.8205C85.3635 22.5527 85.0265 22.4189 84.5956 22.4189C84.3032 22.4189 84.0432 22.4835 83.8154 22.6127C83.5908 22.7389 83.4138 22.9221 83.2845 23.1621C83.1584 23.4022 83.0953 23.693 83.0953 24.0346ZM92.8868 21.0985V22.3912H88.8105V21.0985H92.8868ZM89.8169 19.3997H91.488V26.0566C91.488 26.2813 91.5219 26.4537 91.5896 26.5737C91.6604 26.6906 91.7527 26.7707 91.8666 26.8137C91.9804 26.8568 92.1066 26.8784 92.2451 26.8784C92.3498 26.8784 92.4452 26.8707 92.5313 26.8553C92.6206 26.8399 92.6883 26.8261 92.7345 26.8137L93.0161 28.1202C92.9268 28.151 92.7991 28.1848 92.6329 28.2218C92.4698 28.2587 92.2697 28.2802 92.0328 28.2864C91.6142 28.2987 91.2372 28.2356 90.9017 28.0971C90.5663 27.9556 90.3 27.737 90.1031 27.4416C89.9092 27.1461 89.8138 26.7768 89.8169 26.3336V19.3997ZM97.3475 28.3279C96.6365 28.3279 96.0225 28.1802 95.5055 27.8848C94.9915 27.5862 94.5961 27.1646 94.3191 26.6199C94.0421 26.072 93.9036 25.4273 93.9036 24.6855C93.9036 23.9561 94.0421 23.316 94.3191 22.7651C94.5991 22.2111 94.99 21.7802 95.4917 21.4725C95.9933 21.1616 96.5827 21.0062 97.2598 21.0062C97.6968 21.0062 98.1092 21.077 98.497 21.2186C98.8878 21.3571 99.2325 21.5725 99.5311 21.8649C99.8327 22.1573 100.07 22.5297 100.242 22.9821C100.414 23.4314 100.501 23.9669 100.501 24.5886V25.101H94.6884V23.9746H98.8986C98.8955 23.6545 98.8263 23.3699 98.6909 23.1206C98.5555 22.8682 98.3662 22.6697 98.123 22.525C97.883 22.3804 97.6029 22.3081 97.2828 22.3081C96.9412 22.3081 96.6412 22.3912 96.3826 22.5574C96.1241 22.7205 95.9225 22.9359 95.7779 23.2037C95.6363 23.4683 95.564 23.7592 95.5609 24.0762V25.0595C95.5609 25.4719 95.6363 25.8258 95.7871 26.1213C95.9379 26.4136 96.1487 26.6383 96.4196 26.7953C96.6904 26.9492 97.0074 27.0261 97.3706 27.0261C97.6137 27.0261 97.8337 26.9922 98.0307 26.9245C98.2277 26.8538 98.3985 26.7507 98.5431 26.6152C98.6878 26.4798 98.7971 26.3121 98.8709 26.112L100.431 26.2875C100.333 26.6999 100.145 27.06 99.8681 27.3677C99.5942 27.6724 99.2433 27.9094 98.8155 28.0787C98.3877 28.2449 97.8984 28.3279 97.3475 28.3279ZM104.998 30.9963C104.398 30.9963 103.882 30.9147 103.452 30.7516C103.021 30.5916 102.675 30.3761 102.413 30.1053C102.151 29.8345 101.97 29.5344 101.868 29.2051L103.373 28.8404C103.441 28.9789 103.539 29.1158 103.669 29.2512C103.798 29.3897 103.972 29.5036 104.19 29.5929C104.412 29.6852 104.69 29.7314 105.026 29.7314C105.5 29.7314 105.892 29.6159 106.203 29.3851C106.514 29.1574 106.669 28.7819 106.669 28.2587V26.9153H106.586C106.5 27.0877 106.374 27.2646 106.208 27.4462C106.045 27.6278 105.828 27.7801 105.557 27.9032C105.289 28.0263 104.952 28.0879 104.546 28.0879C104.001 28.0879 103.507 27.9602 103.064 27.7047C102.624 27.4462 102.273 27.0615 102.011 26.5506C101.753 26.0366 101.623 25.3934 101.623 24.6209C101.623 23.8423 101.753 23.1852 102.011 22.6497C102.273 22.1111 102.625 21.7033 103.068 21.4263C103.512 21.1462 104.006 21.0062 104.55 21.0062C104.966 21.0062 105.307 21.077 105.575 21.2186C105.846 21.3571 106.061 21.5248 106.222 21.7218C106.382 21.9157 106.503 22.0988 106.586 22.2711H106.679V21.0985H108.327V28.3049C108.327 28.9112 108.182 29.4128 107.893 29.8098C107.603 30.2069 107.208 30.5038 106.706 30.7008C106.205 30.8978 105.635 30.9963 104.998 30.9963ZM105.012 26.7768C105.366 26.7768 105.668 26.6906 105.917 26.5183C106.166 26.3459 106.355 26.0982 106.485 25.775C106.614 25.4519 106.679 25.0641 106.679 24.6117C106.679 24.1654 106.614 23.7746 106.485 23.4391C106.358 23.1036 106.171 22.8436 105.921 22.6589C105.675 22.4712 105.372 22.3773 105.012 22.3773C104.64 22.3773 104.329 22.4743 104.079 22.6681C103.83 22.862 103.642 23.1283 103.516 23.4668C103.39 23.8023 103.327 24.1839 103.327 24.6117C103.327 25.0456 103.39 25.4257 103.516 25.752C103.646 26.0751 103.835 26.3275 104.084 26.5091C104.336 26.6876 104.646 26.7768 105.012 26.7768ZM110.039 28.1895V21.0985H111.66V22.2804H111.734C111.863 21.871 112.084 21.5556 112.398 21.334C112.715 21.1093 113.077 20.997 113.483 20.997C113.576 20.997 113.679 21.0016 113.793 21.0108C113.909 21.017 114.006 21.0278 114.083 21.0431V22.5804C114.013 22.5558 113.9 22.5343 113.746 22.5158C113.596 22.4943 113.449 22.4835 113.308 22.4835C113.003 22.4835 112.729 22.5497 112.486 22.682C112.246 22.8113 112.057 22.9913 111.918 23.2221C111.78 23.4529 111.71 23.7192 111.71 24.0208V28.1895H110.039ZM117.107 28.3326C116.658 28.3326 116.253 28.2525 115.893 28.0925C115.536 27.9294 115.253 27.6893 115.044 27.3723C114.837 27.0553 114.734 26.6645 114.734 26.1998C114.734 25.7997 114.808 25.4688 114.956 25.2072C115.104 24.9456 115.305 24.7363 115.561 24.5794C115.816 24.4224 116.104 24.3039 116.424 24.2239C116.747 24.1408 117.081 24.0808 117.426 24.0439C117.841 24.0008 118.178 23.9623 118.437 23.9284C118.695 23.8915 118.883 23.8361 119 23.7623C119.12 23.6853 119.18 23.5668 119.18 23.4068V23.3791C119.18 23.0313 119.077 22.762 118.871 22.5712C118.664 22.3804 118.367 22.285 117.98 22.285C117.57 22.285 117.246 22.3742 117.006 22.5527C116.769 22.7312 116.609 22.9421 116.525 23.1852L114.965 22.9636C115.088 22.5327 115.291 22.1726 115.574 21.8833C115.858 21.591 116.204 21.3725 116.613 21.2278C117.023 21.0801 117.475 21.0062 117.97 21.0062C118.312 21.0062 118.652 21.0462 118.991 21.1262C119.329 21.2063 119.639 21.3386 119.919 21.5233C120.199 21.7048 120.423 21.9526 120.593 22.2665C120.765 22.5804 120.851 22.9728 120.851 23.4437V28.1895H119.245V27.2154H119.189C119.088 27.4123 118.945 27.597 118.76 27.7694C118.578 27.9386 118.349 28.0756 118.072 28.1802C117.798 28.2818 117.476 28.3326 117.107 28.3326ZM117.541 27.1046C117.877 27.1046 118.167 27.0384 118.414 26.9061C118.66 26.7707 118.849 26.5922 118.981 26.3706C119.117 26.149 119.185 25.9074 119.185 25.6458V24.8102C119.132 24.8533 119.043 24.8933 118.917 24.9302C118.794 24.9672 118.655 24.9995 118.501 25.0272C118.347 25.0549 118.195 25.0795 118.044 25.101C117.893 25.1226 117.763 25.141 117.652 25.1564C117.403 25.1903 117.179 25.2457 116.983 25.3226C116.786 25.3996 116.63 25.5073 116.516 25.6458C116.402 25.7812 116.345 25.9566 116.345 26.1721C116.345 26.4798 116.458 26.7122 116.682 26.8691C116.907 27.0261 117.193 27.1046 117.541 27.1046ZM126.072 21.0985V22.3912H121.996V21.0985H126.072ZM123.002 19.3997H124.674V26.0566C124.674 26.2813 124.707 26.4537 124.775 26.5737C124.846 26.6906 124.938 26.7707 125.052 26.8137C125.166 26.8568 125.292 26.8784 125.431 26.8784C125.535 26.8784 125.631 26.8707 125.717 26.8553C125.806 26.8399 125.874 26.8261 125.92 26.8137L126.202 28.1202C126.112 28.151 125.985 28.1848 125.818 28.2218C125.655 28.2587 125.455 28.2802 125.218 28.2864C124.8 28.2987 124.423 28.2356 124.087 28.0971C123.752 27.9556 123.486 27.737 123.289 27.4416C123.095 27.1461 122.999 26.7768 123.002 26.3336V19.3997ZM127.47 28.1895V21.0985H129.141V28.1895H127.47ZM128.31 20.0922C128.046 20.0922 127.818 20.0044 127.627 19.829C127.436 19.6505 127.341 19.4366 127.341 19.1873C127.341 18.935 127.436 18.7211 127.627 18.5456C127.818 18.3671 128.046 18.2779 128.31 18.2779C128.578 18.2779 128.806 18.3671 128.993 18.5456C129.184 18.7211 129.28 18.935 129.28 19.1873C129.28 19.4366 129.184 19.6505 128.993 19.829C128.806 20.0044 128.578 20.0922 128.31 20.0922ZM133.953 28.3279C133.26 28.3279 132.66 28.1756 132.152 27.8709C131.644 27.5662 131.251 27.14 130.97 26.5922C130.693 26.0443 130.555 25.4042 130.555 24.6717C130.555 23.9392 130.693 23.2975 130.97 22.7466C131.251 22.1957 131.644 21.7679 132.152 21.4632C132.66 21.1586 133.26 21.0062 133.953 21.0062C134.645 21.0062 135.245 21.1586 135.753 21.4632C136.261 21.7679 136.653 22.1957 136.93 22.7466C137.21 23.2975 137.35 23.9392 137.35 24.6717C137.35 25.4042 137.21 26.0443 136.93 26.5922C136.653 27.14 136.261 27.5662 135.753 27.8709C135.245 28.1756 134.645 28.3279 133.953 28.3279ZM133.962 26.9892C134.337 26.9892 134.651 26.8861 134.904 26.6799C135.156 26.4706 135.344 26.1905 135.467 25.8397C135.593 25.4888 135.656 25.098 135.656 24.6671C135.656 24.2331 135.593 23.8407 135.467 23.4899C135.344 23.1359 135.156 22.8543 134.904 22.6451C134.651 22.4358 134.337 22.3311 133.962 22.3311C133.577 22.3311 133.257 22.4358 133.002 22.6451C132.749 22.8543 132.56 23.1359 132.434 23.4899C132.311 23.8407 132.249 24.2331 132.249 24.6671C132.249 25.098 132.311 25.4888 132.434 25.8397C132.56 26.1905 132.749 26.4706 133.002 26.6799C133.257 26.8861 133.577 26.9892 133.962 26.9892ZM140.44 24.0346V28.1895H138.769V21.0985H140.366V22.3034H140.449C140.612 21.9064 140.872 21.591 141.229 21.3571C141.589 21.1232 142.034 21.0062 142.564 21.0062C143.053 21.0062 143.479 21.1109 143.842 21.3201C144.209 21.5294 144.492 21.8326 144.692 22.2296C144.895 22.6266 144.995 23.1083 144.992 23.6745V28.1895H143.321V23.9331C143.321 23.4591 143.198 23.0882 142.951 22.8205C142.708 22.5527 142.371 22.4189 141.94 22.4189C141.648 22.4189 141.388 22.4835 141.16 22.6127C140.935 22.7389 140.759 22.9221 140.629 23.1621C140.503 23.4022 140.44 23.693 140.44 24.0346ZM152.295 22.9728L150.772 23.139C150.729 22.9851 150.653 22.8405 150.545 22.7051C150.441 22.5697 150.299 22.4604 150.121 22.3773C149.942 22.2942 149.724 22.2527 149.465 22.2527C149.117 22.2527 148.825 22.3281 148.588 22.4789C148.354 22.6297 148.239 22.8251 148.242 23.0652C148.239 23.2714 148.314 23.4391 148.468 23.5684C148.625 23.6976 148.884 23.8038 149.244 23.8869L150.453 24.1454C151.124 24.2901 151.623 24.5194 151.949 24.8333C152.278 25.1472 152.444 25.5581 152.447 26.0659C152.444 26.5121 152.314 26.9061 152.055 27.2477C151.8 27.5862 151.444 27.8509 150.989 28.0417C150.533 28.2325 150.01 28.3279 149.419 28.3279C148.551 28.3279 147.853 28.1464 147.323 27.7832C146.794 27.417 146.478 26.9076 146.377 26.2551L148.006 26.0982C148.08 26.4183 148.237 26.6599 148.477 26.823C148.717 26.9861 149.03 27.0676 149.414 27.0676C149.811 27.0676 150.13 26.9861 150.37 26.823C150.613 26.6599 150.735 26.4583 150.735 26.2182C150.735 26.0151 150.656 25.8474 150.499 25.715C150.345 25.5827 150.105 25.4811 149.779 25.4103L148.57 25.1564C147.889 25.0149 147.386 24.7763 147.06 24.4409C146.734 24.1023 146.572 23.6745 146.575 23.1575C146.572 22.7205 146.691 22.3419 146.931 22.0218C147.174 21.6987 147.511 21.4494 147.942 21.274C148.376 21.0955 148.876 21.0062 149.442 21.0062C150.273 21.0062 150.927 21.1832 151.404 21.5371C151.884 21.891 152.181 22.3696 152.295 22.9728Z" fill="black"/>
 <path d="M39.5732 76.5747C39.5732 75.8932 40.1257 75.3408 40.8071 75.3408H82.8896V77.8086H40.8071C40.1257 77.8086 39.5732 77.2561 39.5732 76.5747V76.5747Z" fill="#DEE2E6"/>
 <rect x="84.4092" y="75.3408" width="29.6375" height="2.46775" fill="#26B5CE"/>
@@ -16,7 +16,7 @@
 <rect x="3" y="26" width="260" height="87" rx="6.16937" fill="white"/>
 </g>
 <path d="M3 86H262.731V106.359C262.731 109.766 259.968 112.528 256.561 112.528H9.16936C5.76211 112.528 3 109.766 3 106.359V86Z" fill="#FAFAFA"/>
-<path d="M3 86H262.731" stroke="#E2E2E2" stroke-width="0.616937"/>
+<path d="M3 86H262.731" stroke="#E2E2E2" strokeWidth="0.616937"/>
 <path d="M23.8386 44.7541C23.7617 44.5048 23.6555 44.2817 23.5201 44.0847C23.3877 43.8846 23.2277 43.7138 23.04 43.5723C22.8553 43.4307 22.6429 43.3245 22.4029 43.2537C22.1628 43.1799 21.9012 43.1429 21.6181 43.1429C21.1103 43.1429 20.6578 43.2707 20.2608 43.5261C19.8638 43.7815 19.5514 44.157 19.3237 44.6525C19.099 45.1449 18.9867 45.7451 18.9867 46.4529C18.9867 47.167 19.099 47.7717 19.3237 48.2672C19.5484 48.7627 19.8607 49.1397 20.2608 49.3983C20.6609 49.6537 21.1257 49.7814 21.655 49.7814C22.1351 49.7814 22.5506 49.6891 22.9015 49.5044C23.2554 49.3198 23.5278 49.0582 23.7186 48.7196C23.9094 48.378 24.0048 47.9779 24.0048 47.5194L24.3926 47.5794H21.8258V46.2406H25.6621V47.3762C25.6621 48.1857 25.4898 48.8858 25.1451 49.4767C24.8004 50.0676 24.3264 50.5231 23.7232 50.8432C23.12 51.1602 22.4275 51.3187 21.6458 51.3187C20.7748 51.3187 20.01 51.1233 19.3514 50.7324C18.6958 50.3385 18.1834 49.7799 17.8141 49.0566C17.4479 48.3303 17.2647 47.4686 17.2647 46.4714C17.2647 45.7082 17.3725 45.0265 17.5879 44.4263C17.8064 43.8262 18.1111 43.3168 18.502 42.8983C18.8928 42.4766 19.3514 42.1565 19.8777 41.938C20.4039 41.7164 20.9764 41.6056 21.595 41.6056C22.1182 41.6056 22.606 41.6826 23.0584 41.8365C23.5108 41.9873 23.9125 42.2027 24.2633 42.4828C24.6172 42.7628 24.9081 43.0952 25.1358 43.4799C25.3636 43.8646 25.5128 44.2894 25.5836 44.7541H23.8386ZM27.6887 51.1895V44.0985H29.3599V51.1895H27.6887ZM28.5289 43.0922C28.2643 43.0922 28.0365 43.0044 27.8457 42.829C27.6549 42.6505 27.5595 42.4366 27.5595 42.1873C27.5595 41.935 27.6549 41.7211 27.8457 41.5456C28.0365 41.3671 28.2643 41.2779 28.5289 41.2779C28.7967 41.2779 29.0244 41.3671 29.2122 41.5456C29.403 41.7211 29.4984 41.935 29.4984 42.1873C29.4984 42.4366 29.403 42.6505 29.2122 42.829C29.0244 43.0044 28.7967 43.0922 28.5289 43.0922ZM34.6192 44.0985V45.3912H30.5429V44.0985H34.6192ZM31.5493 42.3997H33.2204V49.0566C33.2204 49.2813 33.2543 49.4537 33.322 49.5737C33.3928 49.6906 33.4851 49.7707 33.599 49.8137C33.7129 49.8568 33.839 49.8784 33.9775 49.8784C34.0822 49.8784 34.1776 49.8707 34.2638 49.8553C34.353 49.8399 34.4207 49.8261 34.4669 49.8137L34.7485 51.1202C34.6592 51.151 34.5315 51.1848 34.3653 51.2218C34.2022 51.2587 34.0022 51.2802 33.7652 51.2864C33.3466 51.2987 32.9696 51.2356 32.6341 51.0971C32.2987 50.9556 32.0325 50.737 31.8355 50.4416C31.6416 50.1461 31.5462 49.7768 31.5493 49.3336V42.3997ZM37.8404 47.0346V51.1895H36.1692V41.7349H37.8034V45.3034H37.8865C38.0527 44.9033 38.3097 44.5879 38.6575 44.3571C39.0083 44.1232 39.4546 44.0062 39.9963 44.0062C40.4887 44.0062 40.918 44.1093 41.2843 44.3155C41.6505 44.5217 41.9337 44.8233 42.1337 45.2203C42.3368 45.6174 42.4384 46.1021 42.4384 46.6745V51.1895H40.7672V46.9331C40.7672 46.456 40.6441 46.0852 40.3979 45.8205C40.1548 45.5527 39.8132 45.4189 39.373 45.4189C39.0776 45.4189 38.8129 45.4835 38.579 45.6127C38.3482 45.7389 38.1666 45.9221 38.0343 46.1621C37.905 46.4022 37.8404 46.693 37.8404 47.0346ZM48.6614 48.2072V44.0985H50.3326V51.1895H48.7122V49.9292H48.6383C48.4783 50.3262 48.2151 50.6509 47.8489 50.9032C47.4857 51.1556 47.0379 51.2818 46.5055 51.2818C46.0408 51.2818 45.6299 51.1787 45.2729 50.9725C44.919 50.7632 44.642 50.46 44.4419 50.063C44.2419 49.6629 44.1419 49.1797 44.1419 48.6135V44.0985H45.813V48.3549C45.813 48.8043 45.9361 49.1613 46.1824 49.426C46.4286 49.6906 46.7517 49.823 47.1518 49.823C47.398 49.823 47.6365 49.763 47.8674 49.6429C48.0982 49.5229 48.2875 49.3444 48.4352 49.1074C48.586 48.8674 48.6614 48.5673 48.6614 48.2072ZM52.1249 51.1895V41.7349H53.7961V45.2711H53.8653C53.9515 45.0988 54.0731 44.9157 54.23 44.7218C54.387 44.5248 54.5993 44.3571 54.8671 44.2186C55.1349 44.077 55.4765 44.0062 55.892 44.0062C56.4398 44.0062 56.9337 44.1462 57.3738 44.4263C57.817 44.7033 58.1679 45.1142 58.4264 45.6589C58.688 46.2006 58.8188 46.8654 58.8188 47.6532C58.8188 48.4319 58.6911 49.0936 58.4356 49.6383C58.1802 50.1831 57.8324 50.5985 57.3923 50.8848C56.9522 51.171 56.4536 51.3141 55.8966 51.3141C55.4903 51.3141 55.1533 51.2464 54.8856 51.111C54.6178 50.9756 54.4024 50.8124 54.2393 50.6216C54.0792 50.4277 53.9546 50.2446 53.8653 50.0723H53.7684V51.1895H52.1249ZM53.7638 47.644C53.7638 48.1026 53.8284 48.5042 53.9577 48.8489C54.09 49.1936 54.2793 49.4629 54.5255 49.6568C54.7748 49.8476 55.0764 49.943 55.4303 49.943C55.7996 49.943 56.1089 49.8445 56.3582 49.6475C56.6075 49.4475 56.7952 49.1751 56.9214 48.8304C57.0507 48.4827 57.1153 48.0872 57.1153 47.644C57.1153 47.2039 57.0522 46.813 56.926 46.4714C56.7999 46.1298 56.6121 45.862 56.3628 45.6681C56.1135 45.4743 55.8027 45.3773 55.4303 45.3773C55.0733 45.3773 54.7702 45.4712 54.5209 45.6589C54.2716 45.8466 54.0823 46.1098 53.953 46.4483C53.8269 46.7869 53.7638 47.1854 53.7638 47.644ZM65.2507 41.7349V51.1895H63.538V41.7349H65.2507ZM68.7027 47.0346V51.1895H67.0315V44.0985H68.6288V45.3034H68.7119C68.875 44.9064 69.1351 44.591 69.4921 44.3571C69.8522 44.1232 70.2969 44.0062 70.8263 44.0062C71.3156 44.0062 71.7419 44.1109 72.105 44.3201C72.4713 44.5294 72.7544 44.8326 72.9545 45.2296C73.1576 45.6266 73.2576 46.1083 73.2545 46.6745V51.1895H71.5834V46.9331C71.5834 46.4591 71.4603 46.0882 71.214 45.8205C70.9709 45.5527 70.6339 45.4189 70.203 45.4189C69.9107 45.4189 69.6506 45.4835 69.4229 45.6127C69.1982 45.7389 69.0212 45.9221 68.892 46.1621C68.7658 46.4022 68.7027 46.693 68.7027 47.0346ZM78.4942 44.0985V45.3912H74.4179V44.0985H78.4942ZM75.4243 42.3997H77.0954V49.0566C77.0954 49.2813 77.1293 49.4537 77.197 49.5737C77.2678 49.6906 77.3601 49.7707 77.474 49.8137C77.5879 49.8568 77.714 49.8784 77.8525 49.8784C77.9572 49.8784 78.0526 49.8707 78.1388 49.8553C78.228 49.8399 78.2957 49.8261 78.3419 49.8137L78.6235 51.1202C78.5342 51.151 78.4065 51.1848 78.2403 51.2218C78.0772 51.2587 77.8772 51.2802 77.6402 51.2864C77.2216 51.2987 76.8446 51.2356 76.5091 51.0971C76.1737 50.9556 75.9075 50.737 75.7105 50.4416C75.5166 50.1461 75.4212 49.7768 75.4243 49.3336V42.3997ZM82.9549 51.3279C82.244 51.3279 81.63 51.1802 81.1129 50.8848C80.599 50.5862 80.2035 50.1646 79.9265 49.6199C79.6495 49.072 79.511 48.4273 79.511 47.6855C79.511 46.9561 79.6495 46.316 79.9265 45.7651C80.2066 45.2111 80.5974 44.7802 81.0991 44.4725C81.6007 44.1616 82.1901 44.0062 82.8672 44.0062C83.3042 44.0062 83.7166 44.077 84.1044 44.2186C84.4953 44.3571 84.84 44.5725 85.1385 44.8649C85.4401 45.1573 85.6771 45.5297 85.8494 45.9821C86.0218 46.4314 86.108 46.9669 86.108 47.5886V48.101H80.2958V46.9746H84.506C84.503 46.6545 84.4337 46.3699 84.2983 46.1206C84.1629 45.8682 83.9736 45.6697 83.7305 45.525C83.4904 45.3804 83.2103 45.3081 82.8903 45.3081C82.5487 45.3081 82.2486 45.3912 81.9901 45.5574C81.7315 45.7205 81.5299 45.9359 81.3853 46.2037C81.2437 46.4683 81.1714 46.7592 81.1683 47.0762V48.0595C81.1683 48.4719 81.2437 48.8258 81.3945 49.1213C81.5453 49.4136 81.7562 49.6383 82.027 49.7953C82.2978 49.9492 82.6148 50.0261 82.978 50.0261C83.2211 50.0261 83.4412 49.9922 83.6381 49.9245C83.8351 49.8538 84.0059 49.7507 84.1506 49.6152C84.2952 49.4798 84.4045 49.3121 84.4783 49.112L86.0387 49.2875C85.9402 49.6999 85.7525 50.06 85.4755 50.3677C85.2016 50.6724 84.8507 50.9094 84.4229 51.0787C83.9951 51.2449 83.5058 51.3279 82.9549 51.3279ZM90.6056 53.9963C90.0054 53.9963 89.4899 53.9147 89.059 53.7516C88.6282 53.5916 88.2819 53.3761 88.0203 53.1053C87.7587 52.8345 87.5771 52.5344 87.4756 52.2051L88.9806 51.8404C89.0483 51.9789 89.1468 52.1158 89.276 52.2512C89.4053 52.3897 89.5792 52.5036 89.7977 52.5929C90.0193 52.6852 90.2978 52.7314 90.6333 52.7314C91.1072 52.7314 91.4996 52.6159 91.8105 52.3851C92.1213 52.1574 92.2767 51.7819 92.2767 51.2587V49.9153H92.1936C92.1075 50.0877 91.9813 50.2646 91.8151 50.4462C91.652 50.6278 91.435 50.7801 91.1642 50.9032C90.8964 51.0263 90.5594 51.0879 90.1531 51.0879C89.6084 51.0879 89.1144 50.9602 88.6713 50.7047C88.2311 50.4462 87.8803 50.0615 87.6187 49.5506C87.3602 49.0366 87.2309 48.3934 87.2309 47.6209C87.2309 46.8423 87.3602 46.1852 87.6187 45.6497C87.8803 45.1111 88.2327 44.7033 88.6759 44.4263C89.1191 44.1462 89.613 44.0062 90.1578 44.0062C90.5732 44.0062 90.9149 44.077 91.1826 44.2186C91.4535 44.3571 91.6689 44.5248 91.8289 44.7218C91.989 44.9157 92.1105 45.0988 92.1936 45.2711H92.286V44.0985H93.934V51.3049C93.934 51.9112 93.7894 52.4128 93.5001 52.8098C93.2108 53.2069 92.8153 53.5038 92.3137 53.7008C91.812 53.8978 91.2426 53.9963 90.6056 53.9963ZM90.6194 49.7768C90.9733 49.7768 91.2749 49.6906 91.5242 49.5183C91.7735 49.3459 91.9628 49.0982 92.0921 48.775C92.2213 48.4519 92.286 48.0641 92.286 47.6117C92.286 47.1654 92.2213 46.7746 92.0921 46.4391C91.9659 46.1036 91.7781 45.8436 91.5289 45.6589C91.2826 45.4712 90.9795 45.3773 90.6194 45.3773C90.247 45.3773 89.9362 45.4743 89.6869 45.6681C89.4376 45.862 89.2499 46.1283 89.1237 46.4668C88.9975 46.8023 88.9344 47.1839 88.9344 47.6117C88.9344 48.0456 88.9975 48.4257 89.1237 48.752C89.2529 49.0751 89.4422 49.3275 89.6915 49.5091C89.9439 49.6876 90.2532 49.7768 90.6194 49.7768ZM95.6468 51.1895V44.0985H97.2671V45.2804H97.341C97.4703 44.871 97.6919 44.5556 98.0058 44.334C98.3228 44.1093 98.6844 43.997 99.0906 43.997C99.183 43.997 99.2861 44.0016 99.3999 44.0108C99.5169 44.017 99.6138 44.0278 99.6908 44.0431V45.5804C99.62 45.5558 99.5077 45.5343 99.3538 45.5158C99.203 45.4943 99.0568 45.4835 98.9152 45.4835C98.6105 45.4835 98.3366 45.5497 98.0935 45.682C97.8534 45.8113 97.6642 45.9913 97.5257 46.2221C97.3872 46.4529 97.3179 46.7192 97.3179 47.0208V51.1895H95.6468ZM102.715 51.3326C102.265 51.3326 101.861 51.2525 101.5 51.0925C101.143 50.9294 100.86 50.6893 100.651 50.3723C100.445 50.0553 100.342 49.6645 100.342 49.1998C100.342 48.7997 100.416 48.4688 100.563 48.2072C100.711 47.9456 100.913 47.7363 101.168 47.5794C101.424 47.4224 101.711 47.3039 102.031 47.2239C102.354 47.1408 102.688 47.0808 103.033 47.0439C103.449 47.0008 103.786 46.9623 104.044 46.9284C104.303 46.8915 104.49 46.8361 104.607 46.7623C104.727 46.6853 104.787 46.5668 104.787 46.4068V46.3791C104.787 46.0313 104.684 45.762 104.478 45.5712C104.272 45.3804 103.975 45.285 103.587 45.285C103.178 45.285 102.853 45.3742 102.613 45.5527C102.376 45.7312 102.216 45.9421 102.133 46.1852L100.573 45.9636C100.696 45.5327 100.899 45.1726 101.182 44.8833C101.465 44.591 101.811 44.3725 102.221 44.2278C102.63 44.0801 103.082 44.0062 103.578 44.0062C103.919 44.0062 104.26 44.0462 104.598 44.1262C104.937 44.2063 105.246 44.3386 105.526 44.5233C105.806 44.7048 106.031 44.9526 106.2 45.2665C106.372 45.5804 106.459 45.9728 106.459 46.4437V51.1895H104.852V50.2154H104.797C104.695 50.4123 104.552 50.597 104.367 50.7694C104.186 50.9386 103.956 51.0756 103.679 51.1802C103.406 51.2818 103.084 51.3326 102.715 51.3326ZM103.149 50.1046C103.484 50.1046 103.775 50.0384 104.021 49.9061C104.267 49.7707 104.457 49.5922 104.589 49.3706C104.724 49.149 104.792 48.9074 104.792 48.6458V47.8102C104.74 47.8533 104.65 47.8933 104.524 47.9302C104.401 47.9672 104.263 47.9995 104.109 48.0272C103.955 48.0549 103.803 48.0795 103.652 48.101C103.501 48.1226 103.37 48.141 103.259 48.1564C103.01 48.1903 102.787 48.2457 102.59 48.3226C102.393 48.3996 102.238 48.5073 102.124 48.6458C102.01 48.7812 101.953 48.9566 101.953 49.1721C101.953 49.4798 102.065 49.7122 102.29 49.8691C102.515 50.0261 102.801 50.1046 103.149 50.1046ZM111.68 44.0985V45.3912H107.603V44.0985H111.68ZM108.61 42.3997H110.281V49.0566C110.281 49.2813 110.315 49.4537 110.383 49.5737C110.453 49.6906 110.546 49.7707 110.66 49.8137C110.773 49.8568 110.9 49.8784 111.038 49.8784C111.143 49.8784 111.238 49.8707 111.324 49.8553C111.414 49.8399 111.481 49.8261 111.527 49.8137L111.809 51.1202C111.72 51.151 111.592 51.1848 111.426 51.2218C111.263 51.2587 111.063 51.2802 110.826 51.2864C110.407 51.2987 110.03 51.2356 109.695 51.0971C109.359 50.9556 109.093 50.737 108.896 50.4416C108.702 50.1461 108.607 49.7768 108.61 49.3336V42.3997ZM113.077 51.1895V44.0985H114.749V51.1895H113.077ZM113.918 43.0922C113.653 43.0922 113.425 43.0044 113.234 42.829C113.044 42.6505 112.948 42.4366 112.948 42.1873C112.948 41.935 113.044 41.7211 113.234 41.5456C113.425 41.3671 113.653 41.2779 113.918 41.2779C114.185 41.2779 114.413 41.3671 114.601 41.5456C114.792 41.7211 114.887 41.935 114.887 42.1873C114.887 42.4366 114.792 42.6505 114.601 42.829C114.413 43.0044 114.185 43.0922 113.918 43.0922ZM119.56 51.3279C118.868 51.3279 118.267 51.1756 117.76 50.8709C117.252 50.5662 116.858 50.14 116.578 49.5922C116.301 49.0443 116.162 48.4042 116.162 47.6717C116.162 46.9392 116.301 46.2975 116.578 45.7466C116.858 45.1957 117.252 44.7679 117.76 44.4632C118.267 44.1586 118.868 44.0062 119.56 44.0062C120.253 44.0062 120.853 44.1586 121.361 44.4632C121.868 44.7679 122.261 45.1957 122.538 45.7466C122.818 46.2975 122.958 46.9392 122.958 47.6717C122.958 48.4042 122.818 49.0443 122.538 49.5922C122.261 50.14 121.868 50.5662 121.361 50.8709C120.853 51.1756 120.253 51.3279 119.56 51.3279ZM119.569 49.9892C119.945 49.9892 120.259 49.8861 120.511 49.6799C120.763 49.4706 120.951 49.1905 121.074 48.8397C121.2 48.4888 121.264 48.098 121.264 47.6671C121.264 47.2331 121.2 46.8407 121.074 46.4899C120.951 46.1359 120.763 45.8543 120.511 45.6451C120.259 45.4358 119.945 45.3311 119.569 45.3311C119.185 45.3311 118.865 45.4358 118.609 45.6451C118.357 45.8543 118.167 46.1359 118.041 46.4899C117.918 46.8407 117.857 47.2331 117.857 47.6671C117.857 48.098 117.918 48.4888 118.041 48.8397C118.167 49.1905 118.357 49.4706 118.609 49.6799C118.865 49.8861 119.185 49.9892 119.569 49.9892ZM126.047 47.0346V51.1895H124.376V44.0985H125.974V45.3034H126.057C126.22 44.9064 126.48 44.591 126.837 44.3571C127.197 44.1232 127.642 44.0062 128.171 44.0062C128.66 44.0062 129.087 44.1109 129.45 44.3201C129.816 44.5294 130.099 44.8326 130.299 45.2296C130.502 45.6266 130.602 46.1083 130.599 46.6745V51.1895H128.928V46.9331C128.928 46.4591 128.805 46.0882 128.559 45.8205C128.316 45.5527 127.979 45.4189 127.548 45.4189C127.255 45.4189 126.995 45.4835 126.768 45.6127C126.543 45.7389 126.366 45.9221 126.237 46.1621C126.11 46.4022 126.047 46.693 126.047 47.0346ZM137.903 45.9728L136.379 46.139C136.336 45.9851 136.261 45.8405 136.153 45.7051C136.048 45.5697 135.907 45.4604 135.728 45.3773C135.55 45.2942 135.331 45.2527 135.073 45.2527C134.725 45.2527 134.432 45.3281 134.195 45.4789C133.962 45.6297 133.846 45.8251 133.849 46.0652C133.846 46.2714 133.922 46.4391 134.075 46.5684C134.232 46.6976 134.491 46.8038 134.851 46.8869L136.061 47.1454C136.731 47.2901 137.23 47.5194 137.556 47.8333C137.886 48.1472 138.052 48.5581 138.055 49.0659C138.052 49.5121 137.921 49.9061 137.662 50.2477C137.407 50.5862 137.052 50.8509 136.596 51.0417C136.141 51.2325 135.617 51.3279 135.026 51.3279C134.159 51.3279 133.46 51.1464 132.931 50.7832C132.401 50.417 132.086 49.9076 131.984 49.2551L133.614 49.0982C133.688 49.4183 133.845 49.6599 134.085 49.823C134.325 49.9861 134.637 50.0676 135.022 50.0676C135.419 50.0676 135.737 49.9861 135.977 49.823C136.221 49.6599 136.342 49.4583 136.342 49.2182C136.342 49.0151 136.264 48.8474 136.107 48.715C135.953 48.5827 135.713 48.4811 135.387 48.4103L134.177 48.1564C133.497 48.0149 132.994 47.7763 132.667 47.4409C132.341 47.1023 132.18 46.6745 132.183 46.1575C132.18 45.7205 132.298 45.3419 132.538 45.0218C132.781 44.6987 133.118 44.4494 133.549 44.274C133.983 44.0955 134.483 44.0062 135.05 44.0062C135.881 44.0062 136.535 44.1832 137.012 44.5371C137.492 44.891 137.789 45.3696 137.903 45.9728Z" fill="black"/>
 <path d="M16.5732 99.5747C16.5732 98.8932 17.1257 98.3408 17.8071 98.3408H59.8896V100.809H17.8071C17.1257 100.809 16.5732 100.256 16.5732 99.5747V99.5747Z" fill="#DEE2E6"/>
 <rect x="61.4092" y="98.3408" width="29.6375" height="2.46775" fill="#26B5CE"/>
diff --git a/apps/app/public/empty-state/empty-issue.svg b/apps/app/public/empty-state/empty-issue.svg
index bb5f3e270..2e9df2768 100644
--- a/apps/app/public/empty-state/empty-issue.svg
+++ b/apps/app/public/empty-state/empty-issue.svg
@@ -8,8 +8,8 @@
 <circle cx="103.434" cy="68.4443" r="4.51262" fill="#8CC1FF"/>
 <circle cx="95.3115" cy="68.4444" r="4.96388" fill="white"/>
 <circle cx="95.3117" cy="68.4443" r="4.51262" fill="#2C435F"/>
-<rect x="59.238" y="60.1787" width="23.984" height="16.3369" rx="2.60695" fill="white" stroke="#DEE2E6" stroke-width="0.347594"/>
-<circle cx="70.8824" cy="68.3478" r="4.86631" stroke="#FCBE1D" stroke-width="0.695187" stroke-linecap="round" stroke-dasharray="0 13.9 0 6.95"/>
+<rect x="59.238" y="60.1787" width="23.984" height="16.3369" rx="2.60695" fill="white" stroke="#DEE2E6" strokeWidth="0.347594"/>
+<circle cx="70.8824" cy="68.3478" r="4.86631" stroke="#FCBE1D" strokeWidth="0.695187" stroke-linecap="round" stroke-dasharray="0 13.9 0 6.95"/>
 <path d="M73.2007 65.3557C72.5321 64.8376 71.7093 64.5583 70.8634 64.5625C70.0176 64.5668 69.1975 64.8542 68.5341 65.379L70.8823 68.3474L73.2007 65.3557Z" fill="#FCBE1D"/>
 <path d="M68.5576 71.3396C69.2262 71.8578 70.049 72.137 70.8949 72.1328C71.7407 72.1285 72.5608 71.8411 73.2242 71.3163L70.876 68.3479L68.5576 71.3396Z" fill="#FCBE1D"/>
 <rect x="36.8181" y="60.0049" width="16.6845" height="16.6845" rx="2.78075" fill="#FFEDD5"/>
@@ -27,8 +27,8 @@
 <circle cx="81.434" cy="92.4443" r="4.51262" fill="#8CC1FF"/>
 <circle cx="73.3115" cy="92.4444" r="4.96388" fill="white"/>
 <circle cx="73.3117" cy="92.4443" r="4.51262" fill="#2C435F"/>
-<rect x="37.238" y="84.1787" width="23.984" height="16.3369" rx="2.60695" fill="white" stroke="#DEE2E6" stroke-width="0.347594"/>
-<circle cx="48.8824" cy="92.3478" r="4.86631" stroke="#FCBE1D" stroke-width="0.695187" stroke-linecap="round" stroke-dasharray="0 13.9 0 6.95"/>
+<rect x="37.238" y="84.1787" width="23.984" height="16.3369" rx="2.60695" fill="white" stroke="#DEE2E6" strokeWidth="0.347594"/>
+<circle cx="48.8824" cy="92.3478" r="4.86631" stroke="#FCBE1D" strokeWidth="0.695187" stroke-linecap="round" stroke-dasharray="0 13.9 0 6.95"/>
 <path d="M51.2007 89.3557C50.5321 88.8376 49.7093 88.5583 48.8634 88.5625C48.0176 88.5668 47.1975 88.8542 46.5341 89.379L48.8823 92.3474L51.2007 89.3557Z" fill="#FCBE1D"/>
 <path d="M46.5576 95.3396C47.2262 95.8578 48.049 96.137 48.8949 96.1328C49.7407 96.1285 50.5608 95.8411 51.2242 95.3163L48.876 92.3479L46.5576 95.3396Z" fill="#FCBE1D"/>
 <rect x="14.8181" y="84.0049" width="16.6845" height="16.6845" rx="2.78075" fill="#FFEDD5"/>
diff --git a/apps/app/public/empty-state/empty-module.svg b/apps/app/public/empty-state/empty-module.svg
index 2b5d09c00..efe3b454f 100644
--- a/apps/app/public/empty-state/empty-module.svg
+++ b/apps/app/public/empty-state/empty-module.svg
@@ -3,7 +3,7 @@
 <rect x="26" y="3" width="260" height="87" rx="6.16937" fill="white"/>
 </g>
 <path d="M26 63H285.731V83.3589C285.731 86.7662 282.968 89.5283 279.561 89.5283H32.1694C28.7621 89.5283 26 86.7662 26 83.3589V63Z" fill="#FAFAFA"/>
-<path d="M26 63H285.731" stroke="#E2E2E2" stroke-width="0.616937"/>
+<path d="M26 63H285.731" stroke="#E2E2E2" strokeWidth="0.616937"/>
 <path d="M41.7186 28.1895H39.8904L43.2189 18.7349H45.3333L48.6664 28.1895H46.8382L44.313 20.6738H44.2392L41.7186 28.1895ZM41.7786 24.4824H46.7644V25.8581H41.7786V24.4824ZM51.6244 18.7349V28.1895H49.9117V18.7349H51.6244ZM58.4164 18.7349V28.1895H56.7036V18.7349H58.4164ZM61.8683 24.0346V28.1895H60.1972V21.0985H61.7945V22.3034H61.8776C62.0407 21.9064 62.3007 21.591 62.6577 21.3571C63.0178 21.1232 63.4626 21.0062 63.9919 21.0062C64.4813 21.0062 64.9075 21.1109 65.2707 21.3201C65.6369 21.5294 65.9201 21.8326 66.1201 22.2296C66.3232 22.6266 66.4233 23.1083 66.4202 23.6745V28.1895H64.749V23.9331C64.749 23.4591 64.6259 23.0882 64.3797 22.8205C64.1366 22.5527 63.7996 22.4189 63.3687 22.4189C63.0763 22.4189 62.8162 22.4835 62.5885 22.6127C62.3638 22.7389 62.1869 22.9221 62.0576 23.1621C61.9314 23.4022 61.8683 23.693 61.8683 24.0346ZM71.6599 21.0985V22.3912H67.5835V21.0985H71.6599ZM68.5899 19.3997H70.2611V26.0566C70.2611 26.2813 70.2949 26.4537 70.3626 26.5737C70.4334 26.6906 70.5258 26.7707 70.6396 26.8137C70.7535 26.8568 70.8797 26.8784 71.0182 26.8784C71.1228 26.8784 71.2182 26.8707 71.3044 26.8553C71.3937 26.8399 71.4614 26.8261 71.5075 26.8137L71.7891 28.1202C71.6999 28.151 71.5722 28.1848 71.406 28.2218C71.2429 28.2587 71.0428 28.2802 70.8058 28.2864C70.3873 28.2987 70.0103 28.2356 69.6748 28.0971C69.3393 27.9556 69.0731 27.737 68.8761 27.4416C68.6823 27.1461 68.5868 26.7768 68.5899 26.3336V19.3997ZM76.1205 28.3279C75.4096 28.3279 74.7956 28.1802 74.2786 27.8848C73.7646 27.5862 73.3691 27.1646 73.0921 26.6199C72.8152 26.072 72.6767 25.4273 72.6767 24.6855C72.6767 23.9561 72.8152 23.316 73.0921 22.7651C73.3722 22.2111 73.7631 21.7802 74.2647 21.4725C74.7664 21.1616 75.3558 21.0062 76.0328 21.0062C76.4699 21.0062 76.8823 21.077 77.2701 21.2186C77.6609 21.3571 78.0056 21.5725 78.3041 21.8649C78.6058 22.1573 78.8427 22.5297 79.0151 22.9821C79.1874 23.4314 79.2736 23.9669 79.2736 24.5886V25.101H73.4615V23.9746H77.6717C77.6686 23.6545 77.5994 23.3699 77.4639 23.1206C77.3285 22.8682 77.1393 22.6697 76.8961 22.525C76.6561 22.3804 76.376 22.3081 76.0559 22.3081C75.7143 22.3081 75.4142 22.3912 75.1557 22.5574C74.8972 22.7205 74.6956 22.9359 74.5509 23.2037C74.4094 23.4683 74.3371 23.7592 74.334 24.0762V25.0595C74.334 25.4719 74.4094 25.8258 74.5602 26.1213C74.711 26.4136 74.9218 26.6383 75.1926 26.7953C75.4635 26.9492 75.7805 27.0261 76.1436 27.0261C76.3868 27.0261 76.6068 26.9922 76.8038 26.9245C77.0008 26.8538 77.1716 26.7507 77.3162 26.6152C77.4609 26.4798 77.5701 26.3121 77.644 26.112L79.2044 26.2875C79.1059 26.6999 78.9181 27.06 78.6411 27.3677C78.3672 27.6724 78.0164 27.9094 77.5886 28.0787C77.1608 28.2449 76.6714 28.3279 76.1205 28.3279ZM83.7712 30.9963C83.1711 30.9963 82.6556 30.9147 82.2247 30.7516C81.7938 30.5916 81.4476 30.3761 81.186 30.1053C80.9244 29.8345 80.7428 29.5344 80.6412 29.2051L82.1462 28.8404C82.2139 28.9789 82.3124 29.1158 82.4417 29.2512C82.5709 29.3897 82.7448 29.5036 82.9633 29.5929C83.1849 29.6852 83.4634 29.7314 83.7989 29.7314C84.2729 29.7314 84.6653 29.6159 84.9761 29.3851C85.287 29.1574 85.4424 28.7819 85.4424 28.2587V26.9153H85.3593C85.2731 27.0877 85.1469 27.2646 84.9807 27.4462C84.8176 27.6278 84.6006 27.7801 84.3298 27.9032C84.062 28.0263 83.725 28.0879 83.3188 28.0879C82.774 28.0879 82.2801 27.9602 81.8369 27.7047C81.3968 27.4462 81.0459 27.0615 80.7843 26.5506C80.5258 26.0366 80.3966 25.3934 80.3966 24.6209C80.3966 23.8423 80.5258 23.1852 80.7843 22.6497C81.0459 22.1111 81.3983 21.7033 81.8415 21.4263C82.2847 21.1462 82.7787 21.0062 83.3234 21.0062C83.7389 21.0062 84.0805 21.077 84.3483 21.2186C84.6191 21.3571 84.8345 21.5248 84.9946 21.7218C85.1546 21.9157 85.2762 22.0988 85.3593 22.2711H85.4516V21.0985H87.0997V28.3049C87.0997 28.9112 86.955 29.4128 86.6657 29.8098C86.3764 30.2069 85.981 30.5038 85.4793 30.7008C84.9776 30.8978 84.4083 30.9963 83.7712 30.9963ZM83.7851 26.7768C84.139 26.7768 84.4406 26.6906 84.6899 26.5183C84.9392 26.3459 85.1285 26.0982 85.2577 25.775C85.387 25.4519 85.4516 25.0641 85.4516 24.6117C85.4516 24.1654 85.387 23.7746 85.2577 23.4391C85.1315 23.1036 84.9438 22.8436 84.6945 22.6589C84.4483 22.4712 84.1451 22.3773 83.7851 22.3773C83.4127 22.3773 83.1018 22.4743 82.8525 22.6681C82.6032 22.862 82.4155 23.1283 82.2893 23.4668C82.1631 23.8023 82.1 24.1839 82.1 24.6117C82.1 25.0456 82.1631 25.4257 82.2893 25.752C82.4186 26.0751 82.6079 26.3275 82.8571 26.5091C83.1095 26.6876 83.4188 26.7768 83.7851 26.7768ZM88.8124 28.1895V21.0985H90.4328V22.2804H90.5066C90.6359 21.871 90.8575 21.5556 91.1714 21.334C91.4884 21.1093 91.85 20.997 92.2563 20.997C92.3486 20.997 92.4517 21.0016 92.5656 21.0108C92.6825 21.017 92.7795 21.0278 92.8564 21.0431V22.5804C92.7856 22.5558 92.6733 22.5343 92.5194 22.5158C92.3686 22.4943 92.2224 22.4835 92.0809 22.4835C91.7762 22.4835 91.5023 22.5497 91.2591 22.682C91.0191 22.8113 90.8298 22.9913 90.6913 23.2221C90.5528 23.4529 90.4836 23.7192 90.4836 24.0208V28.1895H88.8124ZM95.8802 28.3326C95.4309 28.3326 95.0262 28.2525 94.6661 28.0925C94.3091 27.9294 94.0259 27.6893 93.8167 27.3723C93.6105 27.0553 93.5074 26.6645 93.5074 26.1998C93.5074 25.7997 93.5812 25.4688 93.7289 25.2072C93.8767 24.9456 94.0783 24.7363 94.3337 24.5794C94.5892 24.4224 94.8769 24.3039 95.197 24.2239C95.5201 24.1408 95.8541 24.0808 96.1988 24.0439C96.6142 24.0008 96.9512 23.9623 97.2098 23.9284C97.4683 23.8915 97.656 23.8361 97.773 23.7623C97.893 23.6853 97.953 23.5668 97.953 23.4068V23.3791C97.953 23.0313 97.8499 22.762 97.6437 22.5712C97.4375 22.3804 97.1405 22.285 96.7527 22.285C96.3434 22.285 96.0187 22.3742 95.7787 22.5527C95.5417 22.7312 95.3816 22.9421 95.2986 23.1852L93.7382 22.9636C93.8613 22.5327 94.0644 22.1726 94.3476 21.8833C94.6307 21.591 94.9769 21.3725 95.3863 21.2278C95.7956 21.0801 96.248 21.0062 96.7435 21.0062C97.0851 21.0062 97.4252 21.0462 97.7637 21.1262C98.1023 21.2063 98.4116 21.3386 98.6917 21.5233C98.9717 21.7048 99.1964 21.9526 99.3657 22.2665C99.538 22.5804 99.6242 22.9728 99.6242 23.4437V28.1895H98.0177V27.2154H97.9623C97.8607 27.4123 97.7176 27.597 97.5329 27.7694C97.3513 27.9386 97.1221 28.0756 96.8451 28.1802C96.5712 28.2818 96.2495 28.3326 95.8802 28.3326ZM96.3142 27.1046C96.6496 27.1046 96.9405 27.0384 97.1867 26.9061C97.4329 26.7707 97.6222 26.5922 97.7545 26.3706C97.8899 26.149 97.9576 25.9074 97.9576 25.6458V24.8102C97.9053 24.8533 97.8161 24.8933 97.6899 24.9302C97.5668 24.9672 97.4283 24.9995 97.2744 25.0272C97.1205 25.0549 96.9682 25.0795 96.8174 25.101C96.6666 25.1226 96.5358 25.141 96.425 25.1564C96.1757 25.1903 95.9526 25.2457 95.7556 25.3226C95.5586 25.3996 95.4032 25.5073 95.2893 25.6458C95.1754 25.7812 95.1185 25.9566 95.1185 26.1721C95.1185 26.4798 95.2308 26.7122 95.4555 26.8691C95.6802 27.0261 95.9664 27.1046 96.3142 27.1046ZM104.845 21.0985V22.3912H100.769V21.0985H104.845ZM101.775 19.3997H103.447V26.0566C103.447 26.2813 103.48 26.4537 103.548 26.5737C103.619 26.6906 103.711 26.7707 103.825 26.8137C103.939 26.8568 104.065 26.8784 104.204 26.8784C104.308 26.8784 104.404 26.8707 104.49 26.8553C104.579 26.8399 104.647 26.8261 104.693 26.8137L104.975 28.1202C104.885 28.151 104.758 28.1848 104.592 28.2218C104.428 28.2587 104.228 28.2802 103.991 28.2864C103.573 28.2987 103.196 28.2356 102.86 28.0971C102.525 27.9556 102.259 27.737 102.062 27.4416C101.868 27.1461 101.772 26.7768 101.775 26.3336V19.3997ZM106.243 28.1895V21.0985H107.914V28.1895H106.243ZM107.083 20.0922C106.819 20.0922 106.591 20.0044 106.4 19.829C106.209 19.6505 106.114 19.4366 106.114 19.1873C106.114 18.935 106.209 18.7211 106.4 18.5456C106.591 18.3671 106.819 18.2779 107.083 18.2779C107.351 18.2779 107.579 18.3671 107.767 18.5456C107.957 18.7211 108.053 18.935 108.053 19.1873C108.053 19.4366 107.957 19.6505 107.767 19.829C107.579 20.0044 107.351 20.0922 107.083 20.0922ZM112.726 28.3279C112.033 28.3279 111.433 28.1756 110.925 27.8709C110.418 27.5662 110.024 27.14 109.744 26.5922C109.467 26.0443 109.328 25.4042 109.328 24.6717C109.328 23.9392 109.467 23.2975 109.744 22.7466C110.024 22.1957 110.418 21.7679 110.925 21.4632C111.433 21.1586 112.033 21.0062 112.726 21.0062C113.418 21.0062 114.018 21.1586 114.526 21.4632C115.034 21.7679 115.426 22.1957 115.703 22.7466C115.983 23.2975 116.123 23.9392 116.123 24.6717C116.123 25.4042 115.983 26.0443 115.703 26.5922C115.426 27.14 115.034 27.5662 114.526 27.8709C114.018 28.1756 113.418 28.3279 112.726 28.3279ZM112.735 26.9892C113.11 26.9892 113.424 26.8861 113.677 26.6799C113.929 26.4706 114.117 26.1905 114.24 25.8397C114.366 25.4888 114.429 25.098 114.429 24.6671C114.429 24.2331 114.366 23.8407 114.24 23.4899C114.117 23.1359 113.929 22.8543 113.677 22.6451C113.424 22.4358 113.11 22.3311 112.735 22.3311C112.35 22.3311 112.03 22.4358 111.775 22.6451C111.522 22.8543 111.333 23.1359 111.207 23.4899C111.084 23.8407 111.022 24.2331 111.022 24.6671C111.022 25.098 111.084 25.4888 111.207 25.8397C111.333 26.1905 111.522 26.4706 111.775 26.6799C112.03 26.8861 112.35 26.9892 112.735 26.9892ZM119.213 24.0346V28.1895H117.542V21.0985H119.139V22.3034H119.222C119.385 21.9064 119.645 21.591 120.002 21.3571C120.363 21.1232 120.807 21.0062 121.337 21.0062C121.826 21.0062 122.252 21.1109 122.615 21.3201C122.982 21.5294 123.265 21.8326 123.465 22.2296C123.668 22.6266 123.768 23.1083 123.765 23.6745V28.1895H122.094V23.9331C122.094 23.4591 121.971 23.0882 121.724 22.8205C121.481 22.5527 121.144 22.4189 120.713 22.4189C120.421 22.4189 120.161 22.4835 119.933 22.6127C119.709 22.7389 119.532 22.9221 119.402 23.1621C119.276 23.4022 119.213 23.693 119.213 24.0346ZM131.068 22.9728L129.545 23.139C129.502 22.9851 129.426 22.8405 129.319 22.7051C129.214 22.5697 129.072 22.4604 128.894 22.3773C128.715 22.2942 128.497 22.2527 128.238 22.2527C127.89 22.2527 127.598 22.3281 127.361 22.4789C127.127 22.6297 127.012 22.8251 127.015 23.0652C127.012 23.2714 127.087 23.4391 127.241 23.5684C127.398 23.6976 127.657 23.8038 128.017 23.8869L129.226 24.1454C129.897 24.2901 130.396 24.5194 130.722 24.8333C131.051 25.1472 131.217 25.5581 131.221 26.0659C131.217 26.5121 131.087 26.9061 130.828 27.2477C130.573 27.5862 130.217 27.8509 129.762 28.0417C129.306 28.2325 128.783 28.3279 128.192 28.3279C127.324 28.3279 126.626 28.1464 126.096 27.7832C125.567 27.417 125.251 26.9076 125.15 26.2551L126.779 26.0982C126.853 26.4183 127.01 26.6599 127.25 26.823C127.49 26.9861 127.803 27.0676 128.187 27.0676C128.585 27.0676 128.903 26.9861 129.143 26.823C129.386 26.6599 129.508 26.4583 129.508 26.2182C129.508 26.0151 129.429 25.8474 129.272 25.715C129.118 25.5827 128.878 25.4811 128.552 25.4103L127.343 25.1564C126.663 25.0149 126.159 24.7763 125.833 24.4409C125.507 24.1023 125.345 23.6745 125.348 23.1575C125.345 22.7205 125.464 22.3419 125.704 22.0218C125.947 21.6987 126.284 21.4494 126.715 21.274C127.149 21.0955 127.649 21.0062 128.215 21.0062C129.046 21.0062 129.7 21.1832 130.177 21.5371C130.657 21.891 130.954 22.3696 131.068 22.9728Z" fill="black"/>
 <path d="M39.5732 76.5747C39.5732 75.8932 40.1257 75.3408 40.8071 75.3408H82.8896V77.8086H40.8071C40.1257 77.8086 39.5732 77.2561 39.5732 76.5747Z" fill="#DEE2E6"/>
 <rect x="84.4091" y="75.3408" width="29.6375" height="2.46775" fill="#26B5CE"/>
@@ -16,7 +16,7 @@
 <rect x="3" y="26" width="260" height="87" rx="6.16937" fill="white"/>
 </g>
 <path d="M3 86H262.731V106.359C262.731 109.766 259.968 112.528 256.561 112.528H9.16936C5.76211 112.528 3 109.766 3 106.359V86Z" fill="#FAFAFA"/>
-<path d="M3 86H262.731" stroke="#E2E2E2" stroke-width="0.616937"/>
+<path d="M3 86H262.731" stroke="#E2E2E2" strokeWidth="0.616937"/>
 <path d="M25.5971 44.9249H23.8706C23.8213 44.6417 23.7305 44.3909 23.5982 44.1724C23.4658 43.9508 23.3012 43.7631 23.1042 43.6092C22.9072 43.4553 22.6826 43.3399 22.4302 43.263C22.1809 43.1829 21.9116 43.1429 21.6223 43.1429C21.1084 43.1429 20.6529 43.2722 20.2558 43.5307C19.8588 43.7862 19.548 44.1616 19.3233 44.6571C19.0987 45.1496 18.9863 45.7512 18.9863 46.4622C18.9863 47.1854 19.0987 47.7948 19.3233 48.2903C19.5511 48.7827 19.8619 49.1551 20.2558 49.4075C20.6529 49.6568 21.1068 49.7814 21.6177 49.7814C21.9009 49.7814 22.1655 49.7445 22.4117 49.6706C22.661 49.5937 22.8842 49.4814 23.0811 49.3336C23.2812 49.1859 23.4489 49.0043 23.5843 48.7889C23.7228 48.5734 23.8182 48.3272 23.8706 48.0502L25.5971 48.0595C25.5325 48.5088 25.3924 48.9305 25.177 49.3244C24.9647 49.7183 24.6861 50.0661 24.3414 50.3677C23.9967 50.6663 23.5936 50.9002 23.1319 51.0694C22.6703 51.2356 22.1578 51.3187 21.5946 51.3187C20.7637 51.3187 20.0219 51.1264 19.3695 50.7417C18.717 50.3569 18.2031 49.8014 17.8276 49.0751C17.4521 48.3488 17.2644 47.4778 17.2644 46.4622C17.2644 45.4435 17.4536 44.5725 17.8322 43.8493C18.2107 43.1229 18.7263 42.5674 19.3787 42.1827C20.0312 41.798 20.7698 41.6056 21.5946 41.6056C22.1209 41.6056 22.6103 41.6795 23.0627 41.8272C23.5151 41.975 23.9183 42.1919 24.2722 42.4782C24.6261 42.7613 24.917 43.1091 25.1447 43.5215C25.3755 43.9308 25.5263 44.3986 25.5971 44.9249ZM32.3037 44.334C32.2606 43.9308 32.079 43.6169 31.759 43.3922C31.442 43.1676 31.0296 43.0552 30.5217 43.0552C30.1647 43.0552 29.8585 43.1091 29.6031 43.2168C29.3476 43.3245 29.1522 43.4707 29.0168 43.6554C28.8814 43.84 28.8121 44.0508 28.809 44.2878C28.809 44.4848 28.8537 44.6556 28.9429 44.8002C29.0352 44.9449 29.1599 45.068 29.3168 45.1696C29.4738 45.2681 29.6477 45.3511 29.8385 45.4189C30.0293 45.4866 30.2217 45.5435 30.4156 45.5897L31.3019 45.8113C31.6589 45.8944 32.0021 46.0067 32.3314 46.1483C32.6638 46.2898 32.9608 46.4683 33.2224 46.6838C33.4871 46.8992 33.6963 47.1593 33.8502 47.464C34.0041 47.7686 34.081 48.1257 34.081 48.535C34.081 49.089 33.9395 49.5768 33.6563 49.9984C33.3732 50.417 32.9639 50.7447 32.4283 50.9817C31.8959 51.2156 31.2511 51.3326 30.494 51.3326C29.7585 51.3326 29.1199 51.2187 28.5782 50.9909C28.0396 50.7632 27.618 50.4308 27.3133 49.9938C27.0117 49.5568 26.8486 49.0243 26.8239 48.3965H28.509C28.5336 48.7258 28.6351 48.9997 28.8136 49.2182C28.9921 49.4367 29.2245 49.5998 29.5107 49.7076C29.8 49.8153 30.1232 49.8691 30.4802 49.8691C30.8526 49.8691 31.1788 49.8137 31.4589 49.7029C31.742 49.5891 31.9636 49.4321 32.1237 49.2321C32.2837 49.0289 32.3653 48.792 32.3683 48.5211C32.3653 48.2749 32.2929 48.0718 32.1514 47.9118C32.0098 47.7486 31.8113 47.6132 31.5558 47.5055C31.3035 47.3947 31.008 47.2962 30.6695 47.21L29.5938 46.9331C28.8152 46.733 28.1997 46.4299 27.7472 46.0236C27.2979 45.6143 27.0732 45.0711 27.0732 44.394C27.0732 43.8369 27.224 43.3491 27.5256 42.9306C27.8303 42.512 28.2443 42.1873 28.7675 41.9565C29.2907 41.7226 29.8831 41.6056 30.5448 41.6056C31.2158 41.6056 31.8036 41.7226 32.3083 41.9565C32.8161 42.1873 33.2147 42.5089 33.504 42.9213C33.7933 43.3307 33.9425 43.8016 33.9518 44.334H32.3037ZM36.8729 41.7349L39.3334 49.1767H39.4304L41.8864 41.7349H43.7699L40.4368 51.1895H38.3224L34.994 41.7349H36.8729ZM49.9525 41.7349V51.1895H48.2398V41.7349H49.9525ZM51.7333 51.1895V44.0985H53.3306V45.3034H53.4137C53.5614 44.8972 53.8061 44.5802 54.1477 44.3525C54.4893 44.1216 54.8971 44.0062 55.3711 44.0062C55.8512 44.0062 56.2559 44.1232 56.5852 44.3571C56.9176 44.5879 57.1515 44.9033 57.2869 45.3034H57.3608C57.5177 44.9095 57.7824 44.5956 58.1548 44.3617C58.5303 44.1247 58.975 44.0062 59.489 44.0062C60.1414 44.0062 60.6739 44.2124 61.0863 44.6248C61.4987 45.0372 61.7049 45.6389 61.7049 46.4299V51.1895H60.0291V46.6884C60.0291 46.2483 59.9122 45.9267 59.6783 45.7235C59.4444 45.5173 59.1581 45.4142 58.8196 45.4142C58.4164 45.4142 58.101 45.5404 57.8732 45.7928C57.6485 46.0421 57.5362 46.3668 57.5362 46.7669V51.1895H55.8974V46.6191C55.8974 46.2529 55.7866 45.9605 55.565 45.742C55.3465 45.5235 55.0602 45.4142 54.7063 45.4142C54.4663 45.4142 54.2477 45.4758 54.0508 45.5989C53.8538 45.7189 53.6968 45.8897 53.5799 46.1113C53.4629 46.3298 53.4045 46.5853 53.4045 46.8777V51.1895H51.7333ZM63.4003 53.8485V44.0985H65.0438V45.2711H65.1407C65.2269 45.0988 65.3484 44.9157 65.5054 44.7218C65.6624 44.5248 65.8747 44.3571 66.1425 44.2186C66.4102 44.077 66.7519 44.0062 67.1673 44.0062C67.7152 44.0062 68.2091 44.1462 68.6492 44.4263C69.0924 44.7033 69.4433 45.1142 69.7018 45.6589C69.9634 46.2006 70.0942 46.8654 70.0942 47.6532C70.0942 48.4319 69.9665 49.0936 69.711 49.6383C69.4556 50.1831 69.1078 50.5985 68.6677 50.8848C68.2276 51.171 67.729 51.3141 67.172 51.3141C66.7657 51.3141 66.4287 51.2464 66.1609 51.111C65.8932 50.9756 65.6778 50.8124 65.5146 50.6216C65.3546 50.4277 65.23 50.2446 65.1407 50.0723H65.0715V53.8485H63.4003ZM65.0391 47.644C65.0391 48.1026 65.1038 48.5042 65.233 48.8489C65.3654 49.1936 65.5546 49.4629 65.8009 49.6568C66.0501 49.8476 66.3518 49.943 66.7057 49.943C67.075 49.943 67.3843 49.8445 67.6336 49.6475C67.8829 49.4475 68.0706 49.1751 68.1968 48.8304C68.3261 48.4827 68.3907 48.0872 68.3907 47.644C68.3907 47.2039 68.3276 46.813 68.2014 46.4714C68.0752 46.1298 67.8875 45.862 67.6382 45.6681C67.3889 45.4743 67.0781 45.3773 66.7057 45.3773C66.3487 45.3773 66.0455 45.4712 65.7962 45.6589C65.547 45.8466 65.3577 46.1098 65.2284 46.4483C65.1022 46.7869 65.0391 47.1854 65.0391 47.644ZM74.6183 51.3279C73.9259 51.3279 73.3257 51.1756 72.8179 50.8709C72.3101 50.5662 71.9162 50.14 71.6361 49.5922C71.3591 49.0443 71.2206 48.4042 71.2206 47.6717C71.2206 46.9392 71.3591 46.2975 71.6361 45.7466C71.9162 45.1957 72.3101 44.7679 72.8179 44.4632C73.3257 44.1586 73.9259 44.0062 74.6183 44.0062C75.3108 44.0062 75.9109 44.1586 76.4188 44.4632C76.9266 44.7679 77.319 45.1957 77.596 45.7466C77.876 46.2975 78.0161 46.9392 78.0161 47.6717C78.0161 48.4042 77.876 49.0443 77.596 49.5922C77.319 50.14 76.9266 50.5662 76.4188 50.8709C75.9109 51.1756 75.3108 51.3279 74.6183 51.3279ZM74.6276 49.9892C75.003 49.9892 75.317 49.8861 75.5693 49.6799C75.8217 49.4706 76.0094 49.1905 76.1325 48.8397C76.2587 48.4888 76.3218 48.098 76.3218 47.6671C76.3218 47.2331 76.2587 46.8407 76.1325 46.4899C76.0094 46.1359 75.8217 45.8543 75.5693 45.6451C75.317 45.4358 75.003 45.3311 74.6276 45.3311C74.2429 45.3311 73.9228 45.4358 73.6673 45.6451C73.415 45.8543 73.2257 46.1359 73.0995 46.4899C72.9764 46.8407 72.9149 47.2331 72.9149 47.6671C72.9149 48.098 72.9764 48.4888 73.0995 48.8397C73.2257 49.1905 73.415 49.4706 73.6673 49.6799C73.9228 49.8861 74.2429 49.9892 74.6276 49.9892ZM79.4345 51.1895V44.0985H81.0549V45.2804H81.1287C81.258 44.871 81.4796 44.5556 81.7935 44.334C82.1105 44.1093 82.4721 43.997 82.8784 43.997C82.9707 43.997 83.0738 44.0016 83.1877 44.0108C83.3046 44.017 83.4016 44.0278 83.4785 44.0431V45.5804C83.4077 45.5558 83.2954 45.5343 83.1415 45.5158C82.9907 45.4943 82.8445 45.4835 82.7029 45.4835C82.3982 45.4835 82.1243 45.5497 81.8812 45.682C81.6411 45.8113 81.4519 45.9913 81.3134 46.2221C81.1749 46.4529 81.1056 46.7192 81.1056 47.0208V51.1895H79.4345ZM88.5105 44.0985V45.3912H84.4341V44.0985H88.5105ZM85.4405 42.3997H87.1117V49.0566C87.1117 49.2813 87.1455 49.4537 87.2132 49.5737C87.284 49.6906 87.3764 49.7707 87.4902 49.8137C87.6041 49.8568 87.7303 49.8784 87.8688 49.8784C87.9734 49.8784 88.0688 49.8707 88.155 49.8553C88.2442 49.8399 88.312 49.8261 88.3581 49.8137L88.6397 51.1202C88.5505 51.151 88.4228 51.1848 88.2566 51.2218C88.0934 51.2587 87.8934 51.2802 87.6564 51.2864C87.2379 51.2987 86.8608 51.2356 86.5254 51.0971C86.1899 50.9556 85.9237 50.737 85.7267 50.4416C85.5328 50.1461 85.4374 49.7768 85.4405 49.3336V42.3997ZM92.9711 51.3279C92.2602 51.3279 91.6462 51.1802 91.1292 50.8848C90.6152 50.5862 90.2197 50.1646 89.9427 49.6199C89.6657 49.072 89.5272 48.4273 89.5272 47.6855C89.5272 46.9561 89.6657 46.316 89.9427 45.7651C90.2228 45.2111 90.6137 44.7802 91.1153 44.4725C91.617 44.1616 92.2063 44.0062 92.8834 44.0062C93.3204 44.0062 93.7329 44.077 94.1206 44.2186C94.5115 44.3571 94.8562 44.5725 95.1547 44.8649C95.4563 45.1573 95.6933 45.5297 95.8657 45.9821C96.038 46.4314 96.1242 46.9669 96.1242 47.5886V48.101H90.312V46.9746H94.5223C94.5192 46.6545 94.4499 46.3699 94.3145 46.1206C94.1791 45.8682 93.9898 45.6697 93.7467 45.525C93.5066 45.3804 93.2266 45.3081 92.9065 45.3081C92.5649 45.3081 92.2648 45.3912 92.0063 45.5574C91.7478 45.7205 91.5462 45.9359 91.4015 46.2037C91.26 46.4683 91.1876 46.7592 91.1846 47.0762V48.0595C91.1846 48.4719 91.26 48.8258 91.4108 49.1213C91.5616 49.4136 91.7724 49.6383 92.0432 49.7953C92.3141 49.9492 92.6311 50.0261 92.9942 50.0261C93.2374 50.0261 93.4574 49.9922 93.6544 49.9245C93.8513 49.8538 94.0222 49.7507 94.1668 49.6152C94.3115 49.4798 94.4207 49.3121 94.4946 49.112L96.0549 49.2875C95.9565 49.6999 95.7687 50.06 95.4917 50.3677C95.2178 50.6724 94.867 50.9094 94.4392 51.0787C94.0114 51.2449 93.522 51.3279 92.9711 51.3279ZM97.538 51.1895V44.0985H99.1584V45.2804H99.2322C99.3615 44.871 99.5831 44.5556 99.897 44.334C100.214 44.1093 100.576 43.997 100.982 43.997C101.074 43.997 101.177 44.0016 101.291 44.0108C101.408 44.017 101.505 44.0278 101.582 44.0431V45.5804C101.511 45.5558 101.399 45.5343 101.245 45.5158C101.094 45.4943 100.948 45.4835 100.806 45.4835C100.502 45.4835 100.228 45.5497 99.9847 45.682C99.7447 45.8113 99.5554 45.9913 99.4169 46.2221C99.2784 46.4529 99.2092 46.7192 99.2092 47.0208V51.1895H97.538Z" fill="black"/>
 <path d="M16.5732 99.5747C16.5732 98.8932 17.1257 98.3408 17.8071 98.3408H59.8896V100.809H17.8071C17.1257 100.809 16.5732 100.256 16.5732 99.5747Z" fill="#DEE2E6"/>
 <rect x="61.4091" y="98.3408" width="29.6375" height="2.46775" fill="#26B5CE"/>
diff --git a/apps/app/public/empty-state/empty-view.svg b/apps/app/public/empty-state/empty-view.svg
index afa1c4f8e..dc209919a 100644
--- a/apps/app/public/empty-state/empty-view.svg
+++ b/apps/app/public/empty-state/empty-view.svg
@@ -4,27 +4,27 @@
 <path d="M36.676 17.6708H35.8188C35.7682 17.4243 35.6794 17.2077 35.5527 17.021C35.4283 16.8344 35.2762 16.6777 35.0965 16.551C34.9191 16.422 34.7221 16.3252 34.5055 16.2607C34.2889 16.1962 34.0631 16.1639 33.8281 16.1639C33.3995 16.1639 33.0113 16.2722 32.6633 16.4888C32.3177 16.7054 32.0424 17.0245 31.8373 17.4461C31.6346 17.8678 31.5332 18.3851 31.5332 18.998C31.5332 19.6109 31.6346 20.1281 31.8373 20.5498C32.0424 20.9715 32.3177 21.2906 32.6633 21.5072C33.0113 21.7238 33.3995 21.832 33.8281 21.832C34.0631 21.832 34.2889 21.7998 34.5055 21.7353C34.7221 21.6708 34.9191 21.5751 35.0965 21.4484C35.2762 21.3194 35.4283 21.1615 35.5527 20.9749C35.6794 20.786 35.7682 20.5694 35.8188 20.3252H36.676C36.6115 20.6869 36.494 21.0106 36.3234 21.2963C36.1529 21.582 35.941 21.8251 35.6875 22.0256C35.4341 22.2237 35.1495 22.3747 34.8338 22.4784C34.5205 22.582 34.1852 22.6339 33.8281 22.6339C33.2244 22.6339 32.6875 22.4864 32.2175 22.1915C31.7475 21.8966 31.3776 21.4772 31.1081 20.9334C30.8385 20.3897 30.7037 19.7445 30.7037 18.998C30.7037 18.2514 30.8385 17.6063 31.1081 17.0625C31.3776 16.5187 31.7475 16.0994 32.2175 15.8045C32.6875 15.5095 33.2244 15.3621 33.8281 15.3621C34.1852 15.3621 34.5205 15.4139 34.8338 15.5176C35.1495 15.6213 35.4341 15.7734 35.6875 15.9738C35.941 16.172 36.1529 16.4139 36.3234 16.6996C36.494 16.983 36.6115 17.3067 36.676 17.6708ZM40.1071 22.6477C39.6278 22.6477 39.2073 22.5337 38.8456 22.3055C38.4862 22.0774 38.2051 21.7583 38.0023 21.3482C37.8018 20.938 37.7016 20.4588 37.7016 19.9104C37.7016 19.3574 37.8018 18.8747 38.0023 18.4623C38.2051 18.0498 38.4862 17.7296 38.8456 17.5014C39.2073 17.2733 39.6278 17.1593 40.1071 17.1593C40.5864 17.1593 41.0057 17.2733 41.3652 17.5014C41.7269 17.7296 42.008 18.0498 42.2085 18.4623C42.4112 18.8747 42.5126 19.3574 42.5126 19.9104C42.5126 20.4588 42.4112 20.938 42.2085 21.3482C42.008 21.7583 41.7269 22.0774 41.3652 22.3055C41.0057 22.5337 40.5864 22.6477 40.1071 22.6477ZM40.1071 21.915C40.4712 21.915 40.7707 21.8217 41.0057 21.635C41.2407 21.4484 41.4147 21.203 41.5276 20.8989C41.6405 20.5947 41.697 20.2652 41.697 19.9104C41.697 19.5556 41.6405 19.2249 41.5276 18.9185C41.4147 18.612 41.2407 18.3643 41.0057 18.1754C40.7707 17.9865 40.4712 17.892 40.1071 17.892C39.7431 17.892 39.4435 17.9865 39.2085 18.1754C38.9735 18.3643 38.7995 18.612 38.6866 18.9185C38.5737 19.2249 38.5173 19.5556 38.5173 19.9104C38.5173 20.2652 38.5737 20.5947 38.6866 20.8989C38.7995 21.203 38.9735 21.4484 39.2085 21.635C39.4435 21.8217 39.7431 21.915 40.1071 21.915ZM43.7577 22.5371V17.2284H44.5457V18.0579H44.6148C44.7254 17.7745 44.904 17.5544 45.1505 17.3978C45.3971 17.2388 45.6932 17.1593 46.0388 17.1593C46.389 17.1593 46.6805 17.2388 46.9132 17.3978C47.1482 17.5544 47.3314 17.7745 47.4627 18.0579H47.518C47.654 17.7837 47.8579 17.566 48.1298 17.4047C48.4017 17.2411 48.7277 17.1593 49.1079 17.1593C49.5825 17.1593 49.9708 17.3079 50.2726 17.6051C50.5745 17.9001 50.7254 18.3597 50.7254 18.9841V22.5371H49.9097V18.9841C49.9097 18.5924 49.8026 18.3125 49.5883 18.1443C49.374 17.9761 49.1217 17.892 48.8314 17.892C48.4581 17.892 48.1689 18.0049 47.9639 18.2307C47.7588 18.4542 47.6563 18.7376 47.6563 19.0809V22.5371H46.8268V18.9012C46.8268 18.5994 46.7289 18.3563 46.533 18.1719C46.3372 17.9853 46.0849 17.892 45.7761 17.892C45.5641 17.892 45.366 17.9484 45.1817 18.0613C44.9996 18.1743 44.8522 18.3309 44.7393 18.5314C44.6287 18.7295 44.5734 18.9588 44.5734 19.2192V22.5371H43.7577ZM52.2167 24.5279V17.2284H53.0047V18.0717H53.1015C53.1614 17.9796 53.2444 17.862 53.3503 17.7192C53.4586 17.574 53.613 17.445 53.8135 17.3321C54.0162 17.2169 54.2904 17.1593 54.636 17.1593C55.083 17.1593 55.4771 17.271 55.8181 17.4945C56.1591 17.718 56.4252 18.0349 56.6164 18.445C56.8077 18.8551 56.9033 19.339 56.9033 19.8966C56.9033 20.4588 56.8077 20.9461 56.6164 21.3585C56.4252 21.7687 56.1602 22.0867 55.8215 22.3125C55.4828 22.536 55.0923 22.6477 54.6499 22.6477C54.3089 22.6477 54.0358 22.5913 53.8308 22.4784C53.6257 22.3631 53.4679 22.233 53.3573 22.0878C53.2467 21.9403 53.1614 21.8182 53.1015 21.7214H53.0324V24.5279H52.2167ZM53.0186 19.8828C53.0186 20.2837 53.0773 20.6374 53.1948 20.9438C53.3123 21.248 53.484 21.4864 53.7098 21.6592C53.9356 21.8297 54.2121 21.915 54.5393 21.915C54.8803 21.915 55.1648 21.8251 55.393 21.6454C55.6234 21.4634 55.7962 21.2192 55.9114 20.9127C56.0289 20.6039 56.0876 20.2606 56.0876 19.8828C56.0876 19.5095 56.03 19.1731 55.9148 18.8736C55.8019 18.5717 55.6303 18.3332 55.3999 18.1581C55.1718 17.9807 54.8849 17.892 54.5393 17.892C54.2075 17.892 53.9287 17.9761 53.7029 18.1443C53.4771 18.3102 53.3066 18.5429 53.1914 18.8424C53.0762 19.1397 53.0186 19.4864 53.0186 19.8828ZM58.9632 15.4588V22.5371H58.1475V15.4588H58.9632ZM62.6829 22.6477C62.1714 22.6477 61.7302 22.5348 61.3592 22.309C60.9905 22.0809 60.706 21.7629 60.5055 21.3551C60.3074 20.945 60.2083 20.468 60.2083 19.9242C60.2083 19.3805 60.3074 18.9012 60.5055 18.4865C60.706 18.0694 60.9848 17.7445 61.3419 17.5118C61.7014 17.2768 62.1207 17.1593 62.6 17.1593C62.8765 17.1593 63.1495 17.2054 63.4191 17.2975C63.6887 17.3897 63.9341 17.5395 64.1552 17.7468C64.3764 17.9519 64.5527 18.2238 64.684 18.5625C64.8154 18.9012 64.881 19.3182 64.881 19.8136V20.1593H60.7889V19.4542H64.0516C64.0516 19.1547 63.9917 18.8874 63.8718 18.6524C63.7543 18.4173 63.5861 18.2319 63.3672 18.0959C63.1506 17.96 62.8949 17.892 62.6 17.892C62.2751 17.892 61.994 17.9726 61.7567 18.1339C61.5216 18.2929 61.3408 18.5003 61.214 18.756C61.0873 19.0118 61.0239 19.286 61.0239 19.5786V20.0487C61.0239 20.4496 61.0931 20.7894 61.2313 21.0682C61.3719 21.3447 61.5666 21.5556 61.8154 21.7007C62.0643 21.8436 62.3534 21.915 62.6829 21.915C62.8972 21.915 63.0907 21.885 63.2636 21.8251C63.4387 21.7629 63.5896 21.6708 63.7163 21.5486C63.843 21.4242 63.941 21.2698 64.0101 21.0855L64.7981 21.3067C64.7151 21.574 64.5758 21.809 64.3799 22.0118C64.184 22.2122 63.9421 22.3689 63.6541 22.4818C63.3661 22.5924 63.0424 22.6477 62.6829 22.6477ZM68.4306 17.2284V17.9196H65.6794V17.2284H68.4306ZM66.4813 15.9565H67.2969V21.0164C67.2969 21.2468 67.3303 21.4196 67.3972 21.5348C67.4663 21.6477 67.5538 21.7238 67.6598 21.7629C67.7681 21.7998 67.8822 21.8182 68.002 21.8182C68.0918 21.8182 68.1656 21.8136 68.2232 21.8044C68.2808 21.7929 68.3269 21.7837 68.3614 21.7767L68.5273 22.5095C68.472 22.5302 68.3948 22.5509 68.2958 22.5717C68.1967 22.5947 68.0711 22.6062 67.919 22.6062C67.6886 22.6062 67.4628 22.5567 67.2416 22.4576C67.0227 22.3585 66.8407 22.2076 66.6955 22.0049C66.5527 21.8021 66.4813 21.5463 66.4813 21.2376V15.9565ZM71.8263 22.6477C71.3147 22.6477 70.8735 22.5348 70.5025 22.309C70.1339 22.0809 69.8493 21.7629 69.6489 21.3551C69.4507 20.945 69.3516 20.468 69.3516 19.9242C69.3516 19.3805 69.4507 18.9012 69.6489 18.4865C69.8493 18.0694 70.1281 17.7445 70.4853 17.5118C70.8447 17.2768 71.264 17.1593 71.7433 17.1593C72.0198 17.1593 72.2928 17.2054 72.5624 17.2975C72.832 17.3897 73.0774 17.5395 73.2986 17.7468C73.5198 17.9519 73.6961 18.2238 73.8274 18.5625C73.9587 18.9012 74.0244 19.3182 74.0244 19.8136V20.1593H69.9323V19.4542H73.1949C73.1949 19.1547 73.135 18.8874 73.0152 18.6524C72.8977 18.4173 72.7295 18.2319 72.5106 18.0959C72.294 17.96 72.0382 17.892 71.7433 17.892C71.4184 17.892 71.1373 17.9726 70.9 18.1339C70.665 18.2929 70.4841 18.5003 70.3574 18.756C70.2306 19.0118 70.1673 19.286 70.1673 19.5786V20.0487C70.1673 20.4496 70.2364 20.7894 70.3747 21.0682C70.5152 21.3447 70.7099 21.5556 70.9588 21.7007C71.2076 21.8436 71.4968 21.915 71.8263 21.915C72.0405 21.915 72.2341 21.885 72.4069 21.8251C72.582 21.7629 72.7329 21.6708 72.8597 21.5486C72.9864 21.4242 73.0843 21.2698 73.1534 21.0855L73.9414 21.3067C73.8585 21.574 73.7191 21.809 73.5232 22.0118C73.3274 22.2122 73.0855 22.3689 72.7974 22.4818C72.5094 22.5924 72.1857 22.6477 71.8263 22.6477ZM77.2697 22.6477C76.8274 22.6477 76.4368 22.536 76.0981 22.3125C75.7594 22.0867 75.4944 21.7687 75.3032 21.3585C75.1119 20.9461 75.0163 20.4588 75.0163 19.8966C75.0163 19.339 75.1119 18.8551 75.3032 18.445C75.4944 18.0349 75.7605 17.718 76.1016 17.4945C76.4426 17.271 76.8366 17.1593 77.2836 17.1593C77.6292 17.1593 77.9022 17.2169 78.1027 17.3321C78.3055 17.445 78.4598 17.574 78.5658 17.7192C78.6741 17.862 78.7582 17.9796 78.8181 18.0717H78.8872V15.4588H79.7029V22.5371H78.9149V21.7214H78.8181C78.7582 21.8182 78.673 21.9403 78.5624 22.0878C78.4518 22.233 78.2939 22.3631 78.0889 22.4784C77.8838 22.5913 77.6108 22.6477 77.2697 22.6477ZM77.3803 21.915C77.7075 21.915 77.984 21.8297 78.2098 21.6592C78.4356 21.4864 78.6073 21.248 78.7248 20.9438C78.8423 20.6374 78.9011 20.2837 78.9011 19.8828C78.9011 19.4864 78.8435 19.1397 78.7283 18.8424C78.6131 18.5429 78.4425 18.3102 78.2167 18.1443C77.9909 17.9761 77.7121 17.892 77.3803 17.892C77.0347 17.892 76.7467 17.9807 76.5163 18.1581C76.2882 18.3332 76.1165 18.5717 76.0013 18.8736C75.8884 19.1731 75.832 19.5095 75.832 19.8828C75.832 20.2606 75.8896 20.6039 76.0048 20.9127C76.1223 21.2192 76.2951 21.4634 76.5232 21.6454C76.7536 21.8251 77.0393 21.915 77.3803 21.915ZM88.803 15.4588H89.6602V20.1454C89.6602 20.6293 89.5461 21.0613 89.318 21.4415C89.0922 21.8194 88.7731 22.1178 88.3606 22.3367C87.9482 22.5532 87.4643 22.6615 86.9091 22.6615C86.3538 22.6615 85.8699 22.5532 85.4575 22.3367C85.045 22.1178 84.7247 21.8194 84.4966 21.4415C84.2708 21.0613 84.1579 20.6293 84.1579 20.1454V15.4588H85.0151V20.0763C85.0151 20.4219 85.0911 20.7295 85.2432 20.9991C85.3952 21.2664 85.6118 21.4772 85.8929 21.6316C86.1763 21.7837 86.515 21.8597 86.9091 21.8597C87.3031 21.8597 87.6418 21.7837 87.9252 21.6316C88.2086 21.4772 88.4252 21.2664 88.5749 20.9991C88.727 20.7295 88.803 20.4219 88.803 20.0763V15.4588ZM91.2613 22.5371V17.2284H92.0493V18.0302H92.1046C92.2013 17.7676 92.3764 17.5544 92.6299 17.3908C92.8834 17.2273 93.1691 17.1455 93.487 17.1455C93.5469 17.1455 93.6218 17.1466 93.7117 17.1489C93.8016 17.1512 93.8695 17.1547 93.9156 17.1593V17.9888C93.888 17.9819 93.8246 17.9715 93.7255 17.9577C93.6287 17.9415 93.5262 17.9335 93.4179 17.9335C93.1599 17.9335 92.9294 17.9876 92.7267 18.0959C92.5262 18.2019 92.3672 18.3494 92.2497 18.5383C92.1345 18.7249 92.0769 18.9381 92.0769 19.1777V22.5371H91.2613ZM96.8637 24.6385C96.4697 24.6385 96.131 24.5878 95.8476 24.4864C95.5642 24.3873 95.328 24.256 95.1391 24.0924C94.9525 23.9311 94.8038 23.7583 94.6932 23.574L95.343 23.1177C95.4167 23.2145 95.5101 23.3251 95.623 23.4495C95.7359 23.5763 95.8902 23.6857 96.0861 23.7779C96.2842 23.8723 96.5435 23.9196 96.8637 23.9196C97.2923 23.9196 97.646 23.8159 97.9248 23.6085C98.2036 23.4012 98.343 23.0763 98.343 22.6339V21.5556H98.2739C98.2139 21.6523 98.1287 21.7721 98.0181 21.915C97.9098 22.0555 97.7531 22.1811 97.5481 22.2917C97.3453 22.4 97.0711 22.4542 96.7255 22.4542C96.2969 22.4542 95.9121 22.3528 95.5711 22.15C95.2324 21.9473 94.964 21.6523 94.7658 21.2652C94.57 20.8781 94.472 20.4081 94.472 19.8551C94.472 19.3113 94.5677 18.8378 94.7589 18.4346C94.9502 18.0291 95.2163 17.7157 95.5573 17.4945C95.8983 17.271 96.2923 17.1593 96.7393 17.1593C97.0849 17.1593 97.3591 17.2169 97.5619 17.3321C97.7669 17.445 97.9236 17.574 98.0319 17.7192C98.1425 17.862 98.2278 17.9796 98.2877 18.0717H98.3706V17.2284H99.1586V22.6892C99.1586 23.1454 99.055 23.5164 98.8476 23.8021C98.6425 24.0901 98.366 24.3009 98.0181 24.4346C97.6725 24.5705 97.2877 24.6385 96.8637 24.6385ZM96.8361 21.7214C97.1633 21.7214 97.4398 21.6466 97.6656 21.4968C97.8914 21.347 98.063 21.1316 98.1805 20.8505C98.298 20.5694 98.3568 20.233 98.3568 19.8413C98.3568 19.4588 98.2992 19.1212 98.184 18.8286C98.0688 18.536 97.8983 18.3067 97.6725 18.1408C97.4467 17.9749 97.1679 17.892 96.8361 17.892C96.4905 17.892 96.2024 17.9796 95.972 18.1547C95.7439 18.3298 95.5723 18.5648 95.4571 18.8597C95.3442 19.1547 95.2877 19.4818 95.2877 19.8413C95.2877 20.2099 95.3453 20.536 95.4605 20.8194C95.578 21.1005 95.7508 21.3217 95.9789 21.483C96.2094 21.642 96.4951 21.7214 96.8361 21.7214ZM102.877 22.6477C102.366 22.6477 101.925 22.5348 101.554 22.309C101.185 22.0809 100.901 21.7629 100.7 21.3551C100.502 20.945 100.403 20.468 100.403 19.9242C100.403 19.3805 100.502 18.9012 100.7 18.4865C100.901 18.0694 101.179 17.7445 101.536 17.5118C101.896 17.2768 102.315 17.1593 102.795 17.1593C103.071 17.1593 103.344 17.2054 103.614 17.2975C103.883 17.3897 104.129 17.5395 104.35 17.7468C104.571 17.9519 104.747 18.2238 104.879 18.5625C105.01 18.9012 105.076 19.3182 105.076 19.8136V20.1593H100.984V19.4542H104.246C104.246 19.1547 104.186 18.8874 104.066 18.6524C103.949 18.4173 103.781 18.2319 103.562 18.0959C103.345 17.96 103.089 17.892 102.795 17.892C102.47 17.892 102.189 17.9726 101.951 18.1339C101.716 18.2929 101.535 18.5003 101.409 18.756C101.282 19.0118 101.219 19.286 101.219 19.5786V20.0487C101.219 20.4496 101.288 20.7894 101.426 21.0682C101.566 21.3447 101.761 21.5556 102.01 21.7007C102.259 21.8436 102.548 21.915 102.877 21.915C103.092 21.915 103.285 21.885 103.458 21.8251C103.633 21.7629 103.784 21.6708 103.911 21.5486C104.038 21.4242 104.136 21.2698 104.205 21.0855L104.993 21.3067C104.91 21.574 104.77 21.809 104.574 22.0118C104.379 22.2122 104.137 22.3689 103.849 22.4818C103.561 22.5924 103.237 22.6477 102.877 22.6477ZM107.132 19.3436V22.5371H106.316V17.2284H107.104V18.0579H107.174C107.298 17.7883 107.487 17.5717 107.74 17.4081C107.994 17.2422 108.321 17.1593 108.722 17.1593C109.081 17.1593 109.396 17.233 109.665 17.3805C109.935 17.5256 110.145 17.7468 110.294 18.0441C110.444 18.339 110.519 18.7123 110.519 19.1639V22.5371H109.703V19.2192C109.703 18.8021 109.595 18.4772 109.379 18.2445C109.162 18.0095 108.865 17.892 108.487 17.892C108.227 17.892 107.994 17.9484 107.789 18.0613C107.586 18.1743 107.426 18.339 107.308 18.5556C107.191 18.7722 107.132 19.0348 107.132 19.3436ZM114.318 17.2284V17.9196H111.567V17.2284H114.318ZM112.369 15.9565H113.185V21.0164C113.185 21.2468 113.218 21.4196 113.285 21.5348C113.354 21.6477 113.442 21.7238 113.548 21.7629C113.656 21.7998 113.77 21.8182 113.89 21.8182C113.98 21.8182 114.053 21.8136 114.111 21.8044C114.169 21.7929 114.215 21.7837 114.249 21.7767L114.415 22.5095C114.36 22.5302 114.283 22.5509 114.184 22.5717C114.084 22.5947 113.959 22.6062 113.807 22.6062C113.576 22.6062 113.351 22.5567 113.129 22.4576C112.911 22.3585 112.728 22.2076 112.583 22.0049C112.44 21.8021 112.369 21.5463 112.369 21.2376V15.9565ZM119.25 15.4588V22.5371H118.393V15.4588H119.25ZM124.619 18.4173L123.886 18.6247C123.84 18.5026 123.772 18.3839 123.682 18.2687C123.594 18.1512 123.475 18.0544 123.323 17.9784C123.17 17.9024 122.976 17.8643 122.738 17.8643C122.414 17.8643 122.143 17.9392 121.926 18.089C121.712 18.2365 121.605 18.4242 121.605 18.6524C121.605 18.8551 121.679 19.0153 121.826 19.1328C121.973 19.2503 122.204 19.3482 122.517 19.4265L123.305 19.6201C123.78 19.7353 124.134 19.9116 124.366 20.1489C124.599 20.3839 124.715 20.6869 124.715 21.0579C124.715 21.362 124.628 21.6339 124.453 21.8735C124.28 22.1132 124.038 22.3021 123.727 22.4403C123.416 22.5786 123.054 22.6477 122.642 22.6477C122.1 22.6477 121.652 22.5302 121.297 22.2952C120.942 22.0602 120.718 21.7168 120.623 21.2652L121.397 21.0717C121.471 21.3574 121.611 21.5717 121.816 21.7145C122.023 21.8574 122.294 21.9288 122.628 21.9288C123.008 21.9288 123.31 21.8482 123.533 21.6869C123.759 21.5233 123.872 21.3274 123.872 21.0993C123.872 20.915 123.808 20.7606 123.679 20.6362C123.55 20.5095 123.351 20.415 123.084 20.3528L122.199 20.1454C121.713 20.0302 121.356 19.8517 121.128 19.6097C120.902 19.3655 120.789 19.0602 120.789 18.6938C120.789 18.3943 120.873 18.1293 121.041 17.8989C121.212 17.6685 121.444 17.4876 121.736 17.3563C122.031 17.225 122.365 17.1593 122.738 17.1593C123.264 17.1593 123.676 17.2745 123.976 17.5049C124.278 17.7353 124.492 18.0395 124.619 18.4173ZM129.704 18.4173L128.971 18.6247C128.925 18.5026 128.857 18.3839 128.767 18.2687C128.679 18.1512 128.56 18.0544 128.407 17.9784C128.255 17.9024 128.061 17.8643 127.823 17.8643C127.498 17.8643 127.228 17.9392 127.011 18.089C126.797 18.2365 126.69 18.4242 126.69 18.6524C126.69 18.8551 126.763 19.0153 126.911 19.1328C127.058 19.2503 127.289 19.3482 127.602 19.4265L128.39 19.6201C128.865 19.7353 129.219 19.9116 129.451 20.1489C129.684 20.3839 129.8 20.6869 129.8 21.0579C129.8 21.362 129.713 21.6339 129.538 21.8735C129.365 22.1132 129.123 22.3021 128.812 22.4403C128.501 22.5786 128.139 22.6477 127.727 22.6477C127.185 22.6477 126.737 22.5302 126.382 22.2952C126.027 22.0602 125.803 21.7168 125.708 21.2652L126.482 21.0717C126.556 21.3574 126.696 21.5717 126.901 21.7145C127.108 21.8574 127.379 21.9288 127.713 21.9288C128.093 21.9288 128.395 21.8482 128.618 21.6869C128.844 21.5233 128.957 21.3274 128.957 21.0993C128.957 20.915 128.892 20.7606 128.763 20.6362C128.634 20.5095 128.436 20.415 128.169 20.3528L127.284 20.1454C126.798 20.0302 126.441 19.8517 126.213 19.6097C125.987 19.3655 125.874 19.0602 125.874 18.6938C125.874 18.3943 125.958 18.1293 126.126 17.8989C126.297 17.6685 126.528 17.4876 126.821 17.3563C127.116 17.225 127.45 17.1593 127.823 17.1593C128.349 17.1593 128.761 17.2745 129.061 17.5049C129.363 17.7353 129.577 18.0395 129.704 18.4173ZM134.374 20.3666V17.2284H135.189V22.5371H134.374V21.6385H134.318C134.194 21.9081 134 22.1373 133.738 22.3263C133.475 22.5129 133.143 22.6062 132.742 22.6062C132.411 22.6062 132.116 22.5337 131.858 22.3885C131.6 22.241 131.397 22.0198 131.249 21.7249C131.102 21.4277 131.028 21.0533 131.028 20.6016V17.2284H131.844V20.5463C131.844 20.9334 131.952 21.2422 132.169 21.4726C132.388 21.703 132.666 21.8182 133.005 21.8182C133.208 21.8182 133.414 21.7664 133.624 21.6627C133.836 21.559 134.013 21.4 134.156 21.1857C134.301 20.9715 134.374 20.6984 134.374 20.3666ZM138.909 22.6477C138.398 22.6477 137.956 22.5348 137.585 22.309C137.217 22.0809 136.932 21.7629 136.732 21.3551C136.534 20.945 136.434 20.468 136.434 19.9242C136.434 19.3805 136.534 18.9012 136.732 18.4865C136.932 18.0694 137.211 17.7445 137.568 17.5118C137.928 17.2768 138.347 17.1593 138.826 17.1593C139.103 17.1593 139.376 17.2054 139.645 17.2975C139.915 17.3897 140.16 17.5395 140.381 17.7468C140.603 17.9519 140.779 18.2238 140.91 18.5625C141.042 18.9012 141.107 19.3182 141.107 19.8136V20.1593H137.015V19.4542H140.278C140.278 19.1547 140.218 18.8874 140.098 18.6524C139.981 18.4173 139.812 18.2319 139.593 18.0959C139.377 17.96 139.121 17.892 138.826 17.892C138.501 17.892 138.22 17.9726 137.983 18.1339C137.748 18.2929 137.567 18.5003 137.44 18.756C137.313 19.0118 137.25 19.286 137.25 19.5786V20.0487C137.25 20.4496 137.319 20.7894 137.457 21.0682C137.598 21.3447 137.793 21.5556 138.042 21.7007C138.29 21.8436 138.58 21.915 138.909 21.915C139.123 21.915 139.317 21.885 139.49 21.8251C139.665 21.7629 139.816 21.6708 139.942 21.5486C140.069 21.4242 140.167 21.2698 140.236 21.0855L141.024 21.3067C140.941 21.574 140.802 21.809 140.606 22.0118C140.41 22.2122 140.168 22.3689 139.88 22.4818C139.592 22.5924 139.269 22.6477 138.909 22.6477ZM146.108 18.4173L145.376 18.6247C145.33 18.5026 145.262 18.3839 145.172 18.2687C145.084 18.1512 144.964 18.0544 144.812 17.9784C144.66 17.9024 144.465 17.8643 144.228 17.8643C143.903 17.8643 143.633 17.9392 143.416 18.089C143.202 18.2365 143.095 18.4242 143.095 18.6524C143.095 18.8551 143.168 19.0153 143.316 19.1328C143.463 19.2503 143.694 19.3482 144.007 19.4265L144.795 19.6201C145.27 19.7353 145.623 19.9116 145.856 20.1489C146.089 20.3839 146.205 20.6869 146.205 21.0579C146.205 21.362 146.118 21.6339 145.942 21.8735C145.77 22.1132 145.528 22.3021 145.217 22.4403C144.906 22.5786 144.544 22.6477 144.131 22.6477C143.59 22.6477 143.142 22.5302 142.787 22.2952C142.432 22.0602 142.207 21.7168 142.113 21.2652L142.887 21.0717C142.961 21.3574 143.1 21.5717 143.305 21.7145C143.513 21.8574 143.783 21.9288 144.118 21.9288C144.498 21.9288 144.8 21.8482 145.023 21.6869C145.249 21.5233 145.362 21.3274 145.362 21.0993C145.362 20.915 145.297 20.7606 145.168 20.6362C145.039 20.5095 144.841 20.415 144.574 20.3528L143.689 20.1454C143.203 20.0302 142.846 19.8517 142.618 19.6097C142.392 19.3655 142.279 19.0602 142.279 18.6938C142.279 18.3943 142.363 18.1293 142.531 17.8989C142.702 17.6685 142.933 17.4876 143.226 17.3563C143.521 17.225 143.855 17.1593 144.228 17.1593C144.754 17.1593 145.166 17.2745 145.465 17.5049C145.767 17.7353 145.982 18.0395 146.108 18.4173Z" fill="#858E96"/>
 <rect x="30.1926" y="31.6926" width="88.9918" height="10.7869" rx="1.34836" fill="white"/>
 <circle cx="82.3717" cy="37.279" r="2.93521" fill="white"/>
-<circle cx="82.3722" cy="37.2784" r="2.64169" stroke="#FCBE1D" stroke-width="0.293521" stroke-linecap="round" stroke-dasharray="0 5.87 0 2.94"/>
+<circle cx="82.3722" cy="37.2784" r="2.64169" stroke="#FCBE1D" strokeWidth="0.293521" stroke-linecap="round" stroke-dasharray="0 5.87 0 2.94"/>
 <path d="M83.6306 35.6552C83.2676 35.3739 82.8209 35.2223 82.3618 35.2246C81.9026 35.2269 81.4574 35.383 81.0973 35.6678L82.372 37.2793L83.6306 35.6552Z" fill="#FCBE1D"/>
 <path d="M81.1106 38.9015C81.4736 39.1827 81.9203 39.3343 82.3794 39.332C82.8386 39.3297 83.2838 39.1737 83.6439 38.8888L82.3692 37.2774L81.1106 38.9015Z" fill="#FCBE1D"/>
 <circle cx="79.1432" cy="37.279" r="2.93521" fill="white"/>
-<circle cx="79.1427" cy="37.2784" r="2.64169" stroke="#858E96" stroke-width="0.293521" stroke-linecap="round" stroke-dasharray="0 5.87 0 2.94"/>
+<circle cx="79.1427" cy="37.2784" r="2.64169" stroke="#858E96" strokeWidth="0.293521" stroke-linecap="round" stroke-dasharray="0 5.87 0 2.94"/>
 <circle cx="75.9137" cy="37.279" r="2.93521" fill="white"/>
-<circle cx="75.9132" cy="37.2784" r="2.64169" stroke="#ACB5BD" stroke-width="0.293521" stroke-linecap="round" stroke-dasharray="1.17 1.17"/>
+<circle cx="75.9132" cy="37.2784" r="2.64169" stroke="#ACB5BD" strokeWidth="0.293521" stroke-linecap="round" stroke-dasharray="1.17 1.17"/>
 <path d="M113.397 37.5148L112.217 38.6946C112.183 38.7283 112.144 38.7452 112.099 38.7452C112.054 38.7452 112.015 38.7283 111.981 38.6946C111.948 38.6609 111.931 38.6216 111.931 38.5766C111.931 38.5317 111.948 38.4924 111.981 38.4587L113.161 37.2788L111.981 36.099C111.948 36.0653 111.931 36.026 111.931 35.981C111.931 35.9361 111.948 35.8968 111.981 35.8631C112.015 35.8294 112.054 35.8125 112.099 35.8125C112.144 35.8125 112.183 35.8294 112.217 35.8631L113.397 37.0429L114.577 35.8631C114.611 35.8294 114.65 35.8125 114.695 35.8125C114.74 35.8125 114.779 35.8294 114.813 35.8631C114.846 35.8968 114.863 35.9361 114.863 35.981C114.863 36.026 114.846 36.0653 114.813 36.099L113.633 37.2788L114.813 38.4587C114.846 38.4924 114.863 38.5317 114.863 38.5766C114.863 38.6216 114.846 38.6609 114.813 38.6946C114.779 38.7283 114.74 38.7452 114.695 38.7452C114.65 38.7452 114.611 38.7283 114.577 38.6946L113.397 37.5148Z" fill="black"/>
 <rect x="34" y="35.5" width="36" height="4" rx="2" fill="#DEE2E6"/>
 <rect x="88" y="35.5" width="20" height="4" rx="2" fill="#ACB5BD"/>
-<rect x="30.1926" y="31.6926" width="88.9918" height="10.7869" rx="1.34836" stroke="#DEE2E6" stroke-width="0.385246"/>
+<rect x="30.1926" y="31.6926" width="88.9918" height="10.7869" rx="1.34836" stroke="#DEE2E6" strokeWidth="0.385246"/>
 <rect x="122.193" y="46.6926" width="73.6148" height="10.6148" rx="1.34836" fill="white"/>
 <path d="M190.397 52.5148L189.217 53.6946C189.183 53.7283 189.144 53.7452 189.099 53.7452C189.054 53.7452 189.015 53.7283 188.981 53.6946C188.948 53.6609 188.931 53.6216 188.931 53.5766C188.931 53.5317 188.948 53.4924 188.981 53.4587L190.161 52.2788L188.981 51.099C188.948 51.0653 188.931 51.026 188.931 50.981C188.931 50.9361 188.948 50.8968 188.981 50.8631C189.015 50.8294 189.054 50.8125 189.099 50.8125C189.144 50.8125 189.183 50.8294 189.217 50.8631L190.397 52.0429L191.577 50.8631C191.611 50.8294 191.65 50.8125 191.695 50.8125C191.74 50.8125 191.779 50.8294 191.813 50.8631C191.846 50.8968 191.863 50.9361 191.863 50.981C191.863 51.026 191.846 51.0653 191.813 51.099L190.633 52.2788L191.813 53.4587C191.846 53.4924 191.863 53.5317 191.863 53.5766C191.863 53.6216 191.846 53.6609 191.813 53.6946C191.779 53.7283 191.74 53.7452 191.695 53.7452C191.65 53.7452 191.611 53.7283 191.577 53.6946L190.397 52.5148Z" fill="black"/>
 <rect x="126" y="50.5" width="36" height="4" rx="2" fill="#DEE2E6"/>
 <rect x="165" y="50.5" width="20" height="4" rx="2" fill="#ACB5BD"/>
-<rect x="122.193" y="46.6926" width="73.6148" height="10.6148" rx="1.34836" stroke="#DEE2E6" stroke-width="0.385246"/>
+<rect x="122.193" y="46.6926" width="73.6148" height="10.6148" rx="1.34836" stroke="#DEE2E6" strokeWidth="0.385246"/>
 <rect x="214.193" y="31.6926" width="73.6148" height="10.6148" rx="1.34836" fill="white"/>
 <path d="M282.397 37.5148L281.217 38.6946C281.183 38.7283 281.144 38.7452 281.099 38.7452C281.054 38.7452 281.015 38.7283 280.981 38.6946C280.948 38.6609 280.931 38.6216 280.931 38.5766C280.931 38.5317 280.948 38.4924 280.981 38.4587L282.161 37.2788L280.981 36.099C280.948 36.0653 280.931 36.026 280.931 35.981C280.931 35.9361 280.948 35.8968 280.981 35.8631C281.015 35.8294 281.054 35.8125 281.099 35.8125C281.144 35.8125 281.183 35.8294 281.217 35.8631L282.397 37.0429L283.577 35.8631C283.611 35.8294 283.65 35.8125 283.695 35.8125C283.74 35.8125 283.779 35.8294 283.813 35.8631C283.846 35.8968 283.863 35.9361 283.863 35.981C283.863 36.026 283.846 36.0653 283.813 36.099L282.633 37.2788L283.813 38.4587C283.846 38.4924 283.863 38.5317 283.863 38.5766C283.863 38.6216 283.846 38.6609 283.813 38.6946C283.779 38.7283 283.74 38.7452 283.695 38.7452C283.65 38.7452 283.611 38.7283 283.577 38.6946L282.397 37.5148Z" fill="black"/>
 <rect x="218" y="35.5" width="24" height="4" rx="2" fill="#DEE2E6"/>
 <rect x="245" y="35.5" width="32" height="4" rx="2" fill="#ACB5BD"/>
-<rect x="214.193" y="31.6926" width="73.6148" height="10.6148" rx="1.34836" stroke="#DEE2E6" stroke-width="0.385246"/>
+<rect x="214.193" y="31.6926" width="73.6148" height="10.6148" rx="1.34836" stroke="#DEE2E6" strokeWidth="0.385246"/>
 <rect x="122.193" y="31.6926" width="88.6148" height="10.6148" rx="1.34836" fill="white"/>
 <circle cx="173.397" cy="37.2785" r="2.9308" fill="white"/>
 <circle cx="173.386" cy="37.2691" r="2.62849" fill="url(#pattern0)"/>
@@ -38,7 +38,7 @@
 <path d="M205.697 37.5148L204.517 38.6946C204.483 38.7283 204.444 38.7452 204.399 38.7452C204.354 38.7452 204.315 38.7283 204.281 38.6946C204.247 38.6609 204.23 38.6216 204.23 38.5766C204.23 38.5317 204.247 38.4924 204.281 38.4587L205.461 37.2788L204.281 36.099C204.247 36.0653 204.23 36.026 204.23 35.981C204.23 35.9361 204.247 35.8968 204.281 35.8631C204.315 35.8294 204.354 35.8125 204.399 35.8125C204.444 35.8125 204.483 35.8294 204.517 35.8631L205.697 37.0429L206.877 35.8631C206.91 35.8294 206.95 35.8125 206.995 35.8125C207.04 35.8125 207.079 35.8294 207.113 35.8631C207.146 35.8968 207.163 35.9361 207.163 35.981C207.163 36.026 207.146 36.0653 207.113 36.099L205.933 37.2788L207.113 38.4587C207.146 38.4924 207.163 38.5317 207.163 38.5766C207.163 38.6216 207.146 38.6609 207.113 38.6946C207.079 38.7283 207.04 38.7452 206.995 38.7452C206.95 38.7452 206.91 38.7283 206.877 38.6946L205.697 37.5148Z" fill="#858E96"/>
 <rect x="125" y="35.5" width="36" height="4" rx="2" fill="#DEE2E6"/>
 <rect x="179" y="35.5" width="20" height="4" rx="2" fill="#ACB5BD"/>
-<rect x="122.193" y="31.6926" width="88.6148" height="10.6148" rx="1.34836" stroke="#DEE2E6" stroke-width="0.385246"/>
+<rect x="122.193" y="31.6926" width="88.6148" height="10.6148" rx="1.34836" stroke="#DEE2E6" strokeWidth="0.385246"/>
 <rect x="30.1926" y="46.6926" width="88.6148" height="10.6148" rx="1.34836" fill="white"/>
 <path d="M113.697 52.5148L112.517 53.6946C112.483 53.7283 112.444 53.7452 112.399 53.7452C112.354 53.7452 112.315 53.7283 112.281 53.6946C112.247 53.6609 112.23 53.6216 112.23 53.5766C112.23 53.5317 112.247 53.4924 112.281 53.4587L113.461 52.2788L112.281 51.099C112.247 51.0653 112.23 51.026 112.23 50.981C112.23 50.9361 112.247 50.8968 112.281 50.8631C112.315 50.8294 112.354 50.8125 112.399 50.8125C112.444 50.8125 112.483 50.8294 112.517 50.8631L113.697 52.0429L114.877 50.8631C114.91 50.8294 114.95 50.8125 114.995 50.8125C115.04 50.8125 115.079 50.8294 115.113 50.8631C115.146 50.8968 115.163 50.9361 115.163 50.981C115.163 51.026 115.146 51.0653 115.113 51.099L113.933 52.2788L115.113 53.4587C115.146 53.4924 115.163 53.5317 115.163 53.5766C115.163 53.6216 115.146 53.6609 115.113 53.6946C115.079 53.7283 115.04 53.7452 114.995 53.7452C114.95 53.7452 114.91 53.7283 114.877 53.6946L113.697 52.5148Z" fill="#858E96"/>
 <rect x="33" y="50.5" width="36" height="4" rx="2" fill="#DEE2E6"/>
@@ -49,34 +49,34 @@
 <circle cx="77.9996" cy="52.3532" r="2.5934" fill="#096E8D"/>
 <circle cx="74.8527" cy="52.3527" r="2.85274" fill="white"/>
 <circle cx="74.8532" cy="52.3532" r="2.5934" fill="#FF6B00"/>
-<rect x="30.1926" y="46.6926" width="88.6148" height="10.6148" rx="1.34836" stroke="#DEE2E6" stroke-width="0.385246"/>
+<rect x="30.1926" y="46.6926" width="88.6148" height="10.6148" rx="1.34836" stroke="#DEE2E6" strokeWidth="0.385246"/>
 </g>
 <g filter="url(#filter1_d_2884_60024)">
 <rect x="3" y="21.5" width="279" height="65" rx="5.5615" fill="white"/>
 <path d="M15.2705 40.5371H14.3719L16.9709 33.4588H17.8557L20.4548 40.5371H19.5562L17.441 34.5786H17.3857L15.2705 40.5371ZM15.6023 37.7722H19.2244V38.5325H15.6023V37.7722ZM23.6034 40.6477C23.1057 40.6477 22.6771 40.5302 22.3177 40.2952C21.9582 40.0602 21.6817 39.7364 21.4882 39.324C21.2946 38.9115 21.1979 38.4404 21.1979 37.9104C21.1979 37.3712 21.2969 36.8954 21.4951 36.483C21.6956 36.0683 21.9743 35.7445 22.3315 35.5118C22.6909 35.2768 23.1103 35.1593 23.5895 35.1593C23.9628 35.1593 24.2992 35.2284 24.5987 35.3667C24.8983 35.5049 25.1437 35.6984 25.3349 35.9473C25.5262 36.1961 25.6448 36.4865 25.6909 36.8183H24.8752C24.813 36.5763 24.6748 36.362 24.4605 36.1754C24.2485 35.9865 23.9628 35.892 23.6034 35.892C23.2854 35.892 23.0066 35.9749 22.767 36.1408C22.5296 36.3044 22.3442 36.536 22.2105 36.8355C22.0792 37.1328 22.0135 37.4818 22.0135 37.8828C22.0135 38.2929 22.078 38.65 22.2071 38.9542C22.3384 39.2583 22.5227 39.4945 22.7601 39.6627C22.9997 39.8309 23.2808 39.915 23.6034 39.915C23.8153 39.915 24.0077 39.8781 24.1805 39.8044C24.3534 39.7307 24.4997 39.6247 24.6195 39.4864C24.7393 39.3482 24.8246 39.1823 24.8752 38.9887H25.6909C25.6448 39.3021 25.5308 39.5844 25.3487 39.8355C25.169 40.0843 24.9305 40.2825 24.6333 40.43C24.3384 40.5751 23.9951 40.6477 23.6034 40.6477ZM29.192 35.2284V35.9196H26.4409V35.2284H29.192ZM27.2427 33.9565H28.0584V39.0164C28.0584 39.2468 28.0918 39.4196 28.1586 39.5348C28.2277 39.6477 28.3153 39.7238 28.4213 39.7629C28.5296 39.7998 28.6436 39.8182 28.7635 39.8182C28.8533 39.8182 28.927 39.8136 28.9846 39.8044C29.0422 39.7929 29.0883 39.7837 29.1229 39.7767L29.2888 40.5095C29.2335 40.5302 29.1563 40.5509 29.0572 40.5717C28.9581 40.5947 28.8326 40.6062 28.6805 40.6062C28.4501 40.6062 28.2243 40.5567 28.0031 40.4576C27.7842 40.3585 27.6022 40.2076 27.457 40.0049C27.3142 39.8021 27.2427 39.5463 27.2427 39.2376V33.9565ZM30.419 40.5371V35.2284H31.2346V40.5371H30.419ZM30.8337 34.3436C30.6747 34.3436 30.5376 34.2895 30.4224 34.1812C30.3095 34.0729 30.2531 33.9427 30.2531 33.7906C30.2531 33.6386 30.3095 33.5084 30.4224 33.4001C30.5376 33.2918 30.6747 33.2376 30.8337 33.2376C30.9927 33.2376 31.1286 33.2918 31.2415 33.4001C31.3567 33.5084 31.4143 33.6386 31.4143 33.7906C31.4143 33.9427 31.3567 34.0729 31.2415 34.1812C31.1286 34.2895 30.9927 34.3436 30.8337 34.3436ZM37.0695 35.2284L35.1064 40.5371H34.2769L32.3138 35.2284H33.1986L34.664 39.4588H34.7193L36.1847 35.2284H37.0695ZM40.1818 40.6477C39.6703 40.6477 39.2291 40.5348 38.8581 40.309C38.4894 40.0809 38.2049 39.7629 38.0044 39.3551C37.8063 38.945 37.7072 38.468 37.7072 37.9242C37.7072 37.3805 37.8063 36.9012 38.0044 36.4865C38.2049 36.0694 38.4837 35.7445 38.8408 35.5118C39.2003 35.2768 39.6196 35.1593 40.0989 35.1593C40.3754 35.1593 40.6484 35.2054 40.918 35.2975C41.1876 35.3897 41.433 35.5395 41.6542 35.7468C41.8754 35.9519 42.0516 36.2238 42.183 36.5625C42.3143 36.9012 42.38 37.3182 42.38 37.8136V38.1593H38.2878V37.4542H41.5505C41.5505 37.1547 41.4906 36.8874 41.3708 36.6524C41.2532 36.4173 41.085 36.2319 40.8662 36.0959C40.6496 35.96 40.3938 35.892 40.0989 35.892C39.774 35.892 39.4929 35.9726 39.2556 36.1339C39.0205 36.2929 38.8397 36.5003 38.7129 36.756C38.5862 37.0118 38.5229 37.286 38.5229 37.5786V38.0487C38.5229 38.4496 38.592 38.7894 38.7302 39.0682C38.8708 39.3447 39.0655 39.5556 39.3143 39.7007C39.5632 39.8436 39.8523 39.915 40.1818 39.915C40.3961 39.915 40.5897 39.885 40.7625 39.8251C40.9376 39.7629 41.0885 39.6708 41.2152 39.5486C41.342 39.4242 41.4399 39.2698 41.509 39.0855L42.297 39.3067C42.2141 39.574 42.0747 39.809 41.8788 40.0118C41.683 40.2122 41.441 40.3689 41.153 40.4818C40.865 40.5924 40.5413 40.6477 40.1818 40.6477ZM46.4686 40.5371V33.4588H47.3258V36.6109H51.0999V33.4588H51.9571V40.5371H51.0999V37.3712H47.3258V40.5371H46.4686ZM53.5625 40.5371V35.2284H54.3781V40.5371H53.5625ZM53.9772 34.3436C53.8182 34.3436 53.6811 34.2895 53.5659 34.1812C53.453 34.0729 53.3966 33.9427 53.3966 33.7906C53.3966 33.6386 53.453 33.5084 53.5659 33.4001C53.6811 33.2918 53.8182 33.2376 53.9772 33.2376C54.1362 33.2376 54.2721 33.2918 54.385 33.4001C54.5002 33.5084 54.5578 33.6386 54.5578 33.7906C54.5578 33.9427 54.5002 34.0729 54.385 34.1812C54.2721 34.2895 54.1362 34.3436 53.9772 34.3436ZM58.0149 42.6385C57.6209 42.6385 57.2822 42.5878 56.9988 42.4864C56.7154 42.3873 56.4792 42.256 56.2902 42.0924C56.1036 41.9311 55.955 41.7583 55.8444 41.574L56.4942 41.1177C56.5679 41.2145 56.6612 41.3251 56.7741 41.4495C56.887 41.5763 57.0414 41.6857 57.2372 41.7779C57.4354 41.8723 57.6946 41.9196 58.0149 41.9196C58.4435 41.9196 58.7971 41.8159 59.0759 41.6085C59.3547 41.4012 59.4941 41.0763 59.4941 40.6339V39.5556H59.425C59.3651 39.6523 59.2798 39.7721 59.1692 39.915C59.061 40.0555 58.9043 40.1811 58.6992 40.2917C58.4964 40.4 58.2223 40.4542 57.8766 40.4542C57.4481 40.4542 57.0633 40.3528 56.7223 40.15C56.3836 39.9473 56.1151 39.6523 55.917 39.2652C55.7211 38.8781 55.6232 38.4081 55.6232 37.8551C55.6232 37.3113 55.7188 36.8378 55.9101 36.4346C56.1013 36.0291 56.3674 35.7157 56.7084 35.4945C57.0495 35.271 57.4435 35.1593 57.8905 35.1593C58.2361 35.1593 58.5103 35.2169 58.713 35.3321C58.9181 35.445 59.0748 35.574 59.1831 35.7192C59.2937 35.862 59.3789 35.9796 59.4388 36.0717H59.5218V35.2284H60.3098V40.6892C60.3098 41.1454 60.2061 41.5164 59.9987 41.8021C59.7937 42.0901 59.5172 42.3009 59.1692 42.4346C58.8236 42.5705 58.4388 42.6385 58.0149 42.6385ZM57.9872 39.7214C58.3144 39.7214 58.5909 39.6466 58.8167 39.4968C59.0425 39.347 59.2142 39.1316 59.3317 38.8505C59.4492 38.5694 59.508 38.233 59.508 37.8413C59.508 37.4588 59.4504 37.1212 59.3351 36.8286C59.2199 36.536 59.0494 36.3067 58.8236 36.1408C58.5978 35.9749 58.319 35.892 57.9872 35.892C57.6416 35.892 57.3536 35.9796 57.1232 36.1547C56.8951 36.3298 56.7234 36.5648 56.6082 36.8597C56.4953 37.1547 56.4389 37.4818 56.4389 37.8413C56.4389 38.2099 56.4965 38.536 56.6117 38.8194C56.7292 39.1005 56.902 39.3217 57.1301 39.483C57.3605 39.642 57.6462 39.7214 57.9872 39.7214ZM62.6185 37.3436V40.5371H61.8029V33.4588H62.6185V36.0579H62.6876C62.8121 35.7837 62.9987 35.566 63.2475 35.4047C63.4987 35.2411 63.8328 35.1593 64.2498 35.1593C64.6116 35.1593 64.9284 35.2319 65.2003 35.377C65.4722 35.5199 65.683 35.7399 65.8328 36.0372C65.9848 36.3321 66.0609 36.7077 66.0609 37.1639V40.5371H65.2452V37.2192C65.2452 36.7975 65.1358 36.4715 64.9169 36.2411C64.7003 36.0084 64.3996 35.892 64.0148 35.892C63.7475 35.892 63.5079 35.9484 63.2959 36.0613C63.0863 36.1743 62.9204 36.339 62.7982 36.5556C62.6784 36.7722 62.6185 37.0348 62.6185 37.3436ZM70.401 40.5371V33.4588H72.7927C73.348 33.4588 73.8019 33.5591 74.1544 33.7595C74.5092 33.9577 74.7719 34.2261 74.9424 34.5648C75.1129 34.9035 75.1982 35.2814 75.1982 35.6984C75.1982 36.1155 75.1129 36.4945 74.9424 36.8355C74.7742 37.1765 74.5138 37.4484 74.1613 37.6512C73.8088 37.8517 73.3572 37.9519 72.8065 37.9519H71.0922V37.1915H72.7788C73.159 37.1915 73.4643 37.1259 73.6947 36.9945C73.9251 36.8632 74.0922 36.6858 74.1959 36.4623C74.3019 36.2365 74.3549 35.9819 74.3549 35.6984C74.3549 35.415 74.3019 35.1616 74.1959 34.9381C74.0922 34.7146 73.924 34.5395 73.6913 34.4127C73.4586 34.2837 73.1498 34.2192 72.765 34.2192H71.2581V40.5371H70.401ZM76.4683 40.5371V35.2284H77.2563V36.0302H77.3116C77.4084 35.7676 77.5835 35.5544 77.837 35.3908C78.0904 35.2273 78.3761 35.1455 78.6941 35.1455C78.754 35.1455 78.8289 35.1466 78.9188 35.1489C79.0086 35.1512 79.0766 35.1547 79.1227 35.1593V35.9888C79.095 35.9819 79.0317 35.9715 78.9326 35.9577C78.8358 35.9415 78.7333 35.9335 78.625 35.9335C78.3669 35.9335 78.1365 35.9876 77.9337 36.0959C77.7333 36.2019 77.5743 36.3494 77.4568 36.5383C77.3416 36.7249 77.284 36.9381 77.284 37.1777V40.5371H76.4683ZM80.0895 40.5371V35.2284H80.9052V40.5371H80.0895ZM80.5043 34.3436C80.3453 34.3436 80.2082 34.2895 80.093 34.1812C79.9801 34.0729 79.9236 33.9427 79.9236 33.7906C79.9236 33.6386 79.9801 33.5084 80.093 33.4001C80.2082 33.2918 80.3453 33.2376 80.5043 33.2376C80.6633 33.2376 80.7992 33.2918 80.9121 33.4001C81.0273 33.5084 81.0849 33.6386 81.0849 33.7906C81.0849 33.9427 81.0273 34.0729 80.9121 34.1812C80.7992 34.2895 80.6633 34.3436 80.5043 34.3436ZM84.5558 40.6477C84.0765 40.6477 83.656 40.5337 83.2943 40.3055C82.9348 40.0774 82.6537 39.7583 82.451 39.3482C82.2505 38.938 82.1503 38.4588 82.1503 37.9104C82.1503 37.3574 82.2505 36.8747 82.451 36.4623C82.6537 36.0498 82.9348 35.7296 83.2943 35.5014C83.656 35.2733 84.0765 35.1593 84.5558 35.1593C85.0351 35.1593 85.4544 35.2733 85.8139 35.5014C86.1756 35.7296 86.4567 36.0498 86.6572 36.4623C86.8599 36.8747 86.9613 37.3574 86.9613 37.9104C86.9613 38.4588 86.8599 38.938 86.6572 39.3482C86.4567 39.7583 86.1756 40.0774 85.8139 40.3055C85.4544 40.5337 85.0351 40.6477 84.5558 40.6477ZM84.5558 39.915C84.9199 39.915 85.2194 39.8217 85.4544 39.635C85.6894 39.4484 85.8634 39.203 85.9763 38.8989C86.0892 38.5947 86.1456 38.2652 86.1456 37.9104C86.1456 37.5556 86.0892 37.2249 85.9763 36.9185C85.8634 36.612 85.6894 36.3643 85.4544 36.1754C85.2194 35.9865 84.9199 35.892 84.5558 35.892C84.1917 35.892 83.8922 35.9865 83.6572 36.1754C83.4222 36.3643 83.2482 36.612 83.1353 36.9185C83.0224 37.2249 82.966 37.5556 82.966 37.9104C82.966 38.2652 83.0224 38.5947 83.1353 38.8989C83.2482 39.203 83.4222 39.4484 83.6572 39.635C83.8922 39.8217 84.1917 39.915 84.5558 39.915ZM88.2064 40.5371V35.2284H88.9944V36.0302H89.0497C89.1465 35.7676 89.3216 35.5544 89.575 35.3908C89.8285 35.2273 90.1142 35.1455 90.4322 35.1455C90.4921 35.1455 90.567 35.1466 90.6568 35.1489C90.7467 35.1512 90.8147 35.1547 90.8607 35.1593V35.9888C90.8331 35.9819 90.7697 35.9715 90.6707 35.9577C90.5739 35.9415 90.4714 35.9335 90.3631 35.9335C90.105 35.9335 89.8746 35.9876 89.6718 36.0959C89.4714 36.2019 89.3124 36.3494 89.1949 36.5383C89.0797 36.7249 89.0221 36.9381 89.0221 37.1777V40.5371H88.2064ZM91.8276 40.5371V35.2284H92.6433V40.5371H91.8276ZM92.2424 34.3436C92.0834 34.3436 91.9463 34.2895 91.8311 34.1812C91.7182 34.0729 91.6617 33.9427 91.6617 33.7906C91.6617 33.6386 91.7182 33.5084 91.8311 33.4001C91.9463 33.2918 92.0834 33.2376 92.2424 33.2376C92.4013 33.2376 92.5373 33.2918 92.6502 33.4001C92.7654 33.5084 92.823 33.6386 92.823 33.7906C92.823 33.9427 92.7654 34.0729 92.6502 34.1812C92.5373 34.2895 92.4013 34.3436 92.2424 34.3436ZM96.4459 35.2284V35.9196H93.6948V35.2284H96.4459ZM94.4967 33.9565H95.3123V39.0164C95.3123 39.2468 95.3457 39.4196 95.4125 39.5348C95.4817 39.6477 95.5692 39.7238 95.6752 39.7629C95.7835 39.7998 95.8976 39.8182 96.0174 39.8182C96.1072 39.8182 96.181 39.8136 96.2386 39.8044C96.2962 39.7929 96.3423 39.7837 96.3768 39.7767L96.5427 40.5095C96.4874 40.5302 96.4102 40.5509 96.3112 40.5717C96.2121 40.5947 96.0865 40.6062 95.9344 40.6062C95.704 40.6062 95.4782 40.5567 95.257 40.4576C95.0381 40.3585 94.8561 40.2076 94.7109 40.0049C94.5681 39.8021 94.4967 39.5463 94.4967 39.2376V33.9565ZM98.1982 42.5279C98.06 42.5279 97.9367 42.5164 97.8284 42.4933C97.7201 42.4726 97.6452 42.4518 97.6038 42.4311L97.8111 41.7122C98.0093 41.7629 98.1844 41.7813 98.3365 41.7675C98.4885 41.7537 98.6233 41.6857 98.7409 41.5636C98.8607 41.4438 98.9701 41.2491 99.0692 40.9795L99.2213 40.5648L97.2581 35.2284H98.1429L99.6084 39.4588H99.6637L101.129 35.2284H102.014L99.7604 41.3113C99.659 41.5855 99.5335 41.8124 99.3837 41.9922C99.2339 42.1742 99.06 42.309 98.8618 42.3965C98.666 42.4841 98.4448 42.5279 98.1982 42.5279ZM106.795 33.4588V40.5371H105.938V33.4588H106.795ZM112.164 36.4173L111.431 36.6247C111.385 36.5026 111.317 36.3839 111.227 36.2687C111.14 36.1512 111.02 36.0544 110.868 35.9784C110.716 35.9024 110.521 35.8643 110.284 35.8643C109.959 35.8643 109.688 35.9392 109.471 36.089C109.257 36.2365 109.15 36.4242 109.15 36.6524C109.15 36.8551 109.224 37.0153 109.371 37.1328C109.519 37.2503 109.749 37.3482 110.062 37.4265L110.85 37.6201C111.325 37.7353 111.679 37.9116 111.912 38.1489C112.144 38.3839 112.261 38.6869 112.261 39.0579C112.261 39.362 112.173 39.6339 111.998 39.8735C111.825 40.1132 111.583 40.3021 111.272 40.4403C110.961 40.5786 110.599 40.6477 110.187 40.6477C109.645 40.6477 109.197 40.5302 108.842 40.2952C108.488 40.0602 108.263 39.7168 108.168 39.2652L108.943 39.0717C109.016 39.3574 109.156 39.5717 109.361 39.7145C109.568 39.8574 109.839 39.9288 110.173 39.9288C110.553 39.9288 110.855 39.8482 111.079 39.6869C111.304 39.5233 111.417 39.3274 111.417 39.0993C111.417 38.915 111.353 38.7606 111.224 38.6362C111.095 38.5095 110.897 38.415 110.629 38.3528L109.744 38.1454C109.258 38.0302 108.901 37.8517 108.673 37.6097C108.447 37.3655 108.334 37.0602 108.334 36.6938C108.334 36.3943 108.418 36.1293 108.587 35.8989C108.757 35.6685 108.989 35.4876 109.281 35.3563C109.576 35.225 109.91 35.1593 110.284 35.1593C110.809 35.1593 111.221 35.2745 111.521 35.5049C111.823 35.7353 112.037 36.0395 112.164 36.4173ZM117.249 36.4173L116.516 36.6247C116.47 36.5026 116.402 36.3839 116.312 36.2687C116.225 36.1512 116.105 36.0544 115.953 35.9784C115.801 35.9024 115.606 35.8643 115.369 35.8643C115.044 35.8643 114.773 35.9392 114.556 36.089C114.342 36.2365 114.235 36.4242 114.235 36.6524C114.235 36.8551 114.309 37.0153 114.456 37.1328C114.604 37.2503 114.834 37.3482 115.147 37.4265L115.935 37.6201C116.41 37.7353 116.764 37.9116 116.996 38.1489C117.229 38.3839 117.345 38.6869 117.345 39.0579C117.345 39.362 117.258 39.6339 117.083 39.8735C116.91 40.1132 116.668 40.3021 116.357 40.4403C116.046 40.5786 115.684 40.6477 115.272 40.6477C114.73 40.6477 114.282 40.5302 113.927 40.2952C113.572 40.0602 113.348 39.7168 113.253 39.2652L114.028 39.0717C114.101 39.3574 114.241 39.5717 114.446 39.7145C114.653 39.8574 114.924 39.9288 115.258 39.9288C115.638 39.9288 115.94 39.8482 116.163 39.6869C116.389 39.5233 116.502 39.3274 116.502 39.0993C116.502 38.915 116.438 38.7606 116.309 38.6362C116.18 38.5095 115.981 38.415 115.714 38.3528L114.829 38.1454C114.343 38.0302 113.986 37.8517 113.758 37.6097C113.532 37.3655 113.419 37.0602 113.419 36.6938C113.419 36.3943 113.503 36.1293 113.672 35.8989C113.842 35.6685 114.074 35.4876 114.366 35.3563C114.661 35.225 114.995 35.1593 115.369 35.1593C115.894 35.1593 116.306 35.2745 116.606 35.5049C116.908 35.7353 117.122 36.0395 117.249 36.4173ZM121.919 38.3666V35.2284H122.735V40.5371H121.919V39.6385H121.864C121.739 39.9081 121.546 40.1373 121.283 40.3263C121.02 40.5129 120.688 40.6062 120.288 40.6062C119.956 40.6062 119.661 40.5337 119.403 40.3885C119.145 40.241 118.942 40.0198 118.795 39.7249C118.647 39.4277 118.573 39.0533 118.573 38.6016V35.2284H119.389V38.5463C119.389 38.9334 119.497 39.2422 119.714 39.4726C119.933 39.703 120.212 39.8182 120.55 39.8182C120.753 39.8182 120.959 39.7664 121.169 39.6627C121.381 39.559 121.558 39.4 121.701 39.1857C121.846 38.9715 121.919 38.6984 121.919 38.3666ZM126.454 40.6477C125.943 40.6477 125.502 40.5348 125.131 40.309C124.762 40.0809 124.477 39.7629 124.277 39.3551C124.079 38.945 123.98 38.468 123.98 37.9242C123.98 37.3805 124.079 36.9012 124.277 36.4865C124.477 36.0694 124.756 35.7445 125.113 35.5118C125.473 35.2768 125.892 35.1593 126.371 35.1593C126.648 35.1593 126.921 35.2054 127.19 35.2975C127.46 35.3897 127.705 35.5395 127.927 35.7468C128.148 35.9519 128.324 36.2238 128.455 36.5625C128.587 36.9012 128.652 37.3182 128.652 37.8136V38.1593H124.56V37.4542H127.823C127.823 37.1547 127.763 36.8874 127.643 36.6524C127.526 36.4173 127.358 36.2319 127.139 36.0959C126.922 35.96 126.666 35.892 126.371 35.892C126.046 35.892 125.765 35.9726 125.528 36.1339C125.293 36.2929 125.112 36.5003 124.985 36.756C124.859 37.0118 124.795 37.286 124.795 37.5786V38.0487C124.795 38.4496 124.864 38.7894 125.003 39.0682C125.143 39.3447 125.338 39.5556 125.587 39.7007C125.836 39.8436 126.125 39.915 126.454 39.915C126.669 39.915 126.862 39.885 127.035 39.8251C127.21 39.7629 127.361 39.6708 127.488 39.5486C127.614 39.4242 127.712 39.2698 127.781 39.0855L128.569 39.3067C128.487 39.574 128.347 39.809 128.151 40.0118C127.955 40.2122 127.713 40.3689 127.425 40.4818C127.137 40.5924 126.814 40.6477 126.454 40.6477ZM133.654 36.4173L132.921 36.6247C132.875 36.5026 132.807 36.3839 132.717 36.2687C132.629 36.1512 132.51 36.0544 132.357 35.9784C132.205 35.9024 132.011 35.8643 131.773 35.8643C131.448 35.8643 131.178 35.9392 130.961 36.089C130.747 36.2365 130.64 36.4242 130.64 36.6524C130.64 36.8551 130.713 37.0153 130.861 37.1328C131.008 37.2503 131.239 37.3482 131.552 37.4265L132.34 37.6201C132.815 37.7353 133.169 37.9116 133.401 38.1489C133.634 38.3839 133.75 38.6869 133.75 39.0579C133.75 39.362 133.663 39.6339 133.488 39.8735C133.315 40.1132 133.073 40.3021 132.762 40.4403C132.451 40.5786 132.089 40.6477 131.677 40.6477C131.135 40.6477 130.687 40.5302 130.332 40.2952C129.977 40.0602 129.753 39.7168 129.658 39.2652L130.432 39.0717C130.506 39.3574 130.645 39.5717 130.851 39.7145C131.058 39.8574 131.329 39.9288 131.663 39.9288C132.043 39.9288 132.345 39.8482 132.568 39.6869C132.794 39.5233 132.907 39.3274 132.907 39.0993C132.907 38.915 132.842 38.7606 132.713 38.6362C132.584 38.5095 132.386 38.415 132.119 38.3528L131.234 38.1454C130.748 38.0302 130.391 37.8517 130.163 37.6097C129.937 37.3655 129.824 37.0602 129.824 36.6938C129.824 36.3943 129.908 36.1293 130.076 35.8989C130.247 35.6685 130.478 35.4876 130.771 35.3563C131.066 35.225 131.4 35.1593 131.773 35.1593C132.299 35.1593 132.711 35.2745 133.011 35.5049C133.313 35.7353 133.527 36.0395 133.654 36.4173Z" fill="#858E96"/>
 <rect x="14.1926" y="49.6926" width="88.9918" height="10.7869" rx="1.34836" fill="white"/>
 <circle cx="66.3717" cy="55.279" r="2.93521" fill="white"/>
-<circle cx="66.3722" cy="55.2784" r="2.64169" stroke="#FCBE1D" stroke-width="0.293521" stroke-linecap="round" stroke-dasharray="0 5.87 0 2.94"/>
+<circle cx="66.3722" cy="55.2784" r="2.64169" stroke="#FCBE1D" strokeWidth="0.293521" stroke-linecap="round" stroke-dasharray="0 5.87 0 2.94"/>
 <path d="M67.6306 53.6552C67.2676 53.3739 66.8209 53.2223 66.3618 53.2246C65.9026 53.2269 65.4574 53.383 65.0973 53.6678L66.372 55.2793L67.6306 53.6552Z" fill="#FCBE1D"/>
 <path d="M65.1106 56.9015C65.4736 57.1827 65.9203 57.3343 66.3794 57.332C66.8386 57.3297 67.2838 57.1737 67.6439 56.8888L66.3692 55.2774L65.1106 56.9015Z" fill="#FCBE1D"/>
 <circle cx="63.1432" cy="55.279" r="2.93521" fill="white"/>
-<circle cx="63.1427" cy="55.2784" r="2.64169" stroke="#858E96" stroke-width="0.293521" stroke-linecap="round" stroke-dasharray="0 5.87 0 2.94"/>
+<circle cx="63.1427" cy="55.2784" r="2.64169" stroke="#858E96" strokeWidth="0.293521" stroke-linecap="round" stroke-dasharray="0 5.87 0 2.94"/>
 <circle cx="59.9137" cy="55.279" r="2.93521" fill="white"/>
-<circle cx="59.9132" cy="55.2784" r="2.64169" stroke="#ACB5BD" stroke-width="0.293521" stroke-linecap="round" stroke-dasharray="1.17 1.17"/>
+<circle cx="59.9132" cy="55.2784" r="2.64169" stroke="#ACB5BD" strokeWidth="0.293521" stroke-linecap="round" stroke-dasharray="1.17 1.17"/>
 <path d="M97.397 55.5148L96.2172 56.6946C96.1835 56.7283 96.1442 56.7452 96.0992 56.7452C96.0543 56.7452 96.0149 56.7283 95.9812 56.6946C95.9475 56.6609 95.9307 56.6216 95.9307 56.5766C95.9307 56.5317 95.9475 56.4924 95.9812 56.4587L97.161 55.2788L95.9812 54.099C95.9475 54.0653 95.9307 54.026 95.9307 53.981C95.9307 53.9361 95.9475 53.8968 95.9812 53.8631C96.0149 53.8294 96.0543 53.8125 96.0992 53.8125C96.1442 53.8125 96.1835 53.8294 96.2172 53.8631L97.397 55.0429L98.5768 53.8631C98.6105 53.8294 98.6499 53.8125 98.6948 53.8125C98.7397 53.8125 98.7791 53.8294 98.8128 53.8631C98.8465 53.8968 98.8633 53.9361 98.8633 53.981C98.8633 54.026 98.8465 54.0653 98.8128 54.099L97.633 55.2788L98.8128 56.4587C98.8465 56.4924 98.8633 56.5317 98.8633 56.5766C98.8633 56.6216 98.8465 56.6609 98.8128 56.6946C98.7791 56.7283 98.7397 56.7452 98.6948 56.7452C98.6499 56.7452 98.6105 56.7283 98.5768 56.6946L97.397 55.5148Z" fill="black"/>
 <rect x="18" y="53.5" width="36" height="4" rx="2" fill="#DEE2E6"/>
 <rect x="72" y="53.5" width="20" height="4" rx="2" fill="#ACB5BD"/>
-<rect x="14.1926" y="49.6926" width="88.9918" height="10.7869" rx="1.34836" stroke="#DEE2E6" stroke-width="0.385246"/>
+<rect x="14.1926" y="49.6926" width="88.9918" height="10.7869" rx="1.34836" stroke="#DEE2E6" strokeWidth="0.385246"/>
 <rect x="106.193" y="64.6926" width="73.6148" height="10.6148" rx="1.34836" fill="white"/>
 <path d="M174.397 70.5148L173.217 71.6946C173.183 71.7283 173.144 71.7452 173.099 71.7452C173.054 71.7452 173.015 71.7283 172.981 71.6946C172.948 71.6609 172.931 71.6216 172.931 71.5766C172.931 71.5317 172.948 71.4924 172.981 71.4587L174.161 70.2788L172.981 69.099C172.948 69.0653 172.931 69.026 172.931 68.981C172.931 68.9361 172.948 68.8968 172.981 68.8631C173.015 68.8294 173.054 68.8125 173.099 68.8125C173.144 68.8125 173.183 68.8294 173.217 68.8631L174.397 70.0429L175.577 68.8631C175.611 68.8294 175.65 68.8125 175.695 68.8125C175.74 68.8125 175.779 68.8294 175.813 68.8631C175.846 68.8968 175.863 68.9361 175.863 68.981C175.863 69.026 175.846 69.0653 175.813 69.099L174.633 70.2788L175.813 71.4587C175.846 71.4924 175.863 71.5317 175.863 71.5766C175.863 71.6216 175.846 71.6609 175.813 71.6946C175.779 71.7283 175.74 71.7452 175.695 71.7452C175.65 71.7452 175.611 71.7283 175.577 71.6946L174.397 70.5148Z" fill="black"/>
 <rect x="110" y="68.5" width="36" height="4" rx="2" fill="#DEE2E6"/>
 <rect x="149" y="68.5" width="20" height="4" rx="2" fill="#ACB5BD"/>
-<rect x="106.193" y="64.6926" width="73.6148" height="10.6148" rx="1.34836" stroke="#DEE2E6" stroke-width="0.385246"/>
+<rect x="106.193" y="64.6926" width="73.6148" height="10.6148" rx="1.34836" stroke="#DEE2E6" strokeWidth="0.385246"/>
 <rect x="198.193" y="49.6926" width="73.6148" height="10.6148" rx="1.34836" fill="white"/>
 <path d="M266.397 55.5148L265.217 56.6946C265.183 56.7283 265.144 56.7452 265.099 56.7452C265.054 56.7452 265.015 56.7283 264.981 56.6946C264.948 56.6609 264.931 56.6216 264.931 56.5766C264.931 56.5317 264.948 56.4924 264.981 56.4587L266.161 55.2788L264.981 54.099C264.948 54.0653 264.931 54.026 264.931 53.981C264.931 53.9361 264.948 53.8968 264.981 53.8631C265.015 53.8294 265.054 53.8125 265.099 53.8125C265.144 53.8125 265.183 53.8294 265.217 53.8631L266.397 55.0429L267.577 53.8631C267.611 53.8294 267.65 53.8125 267.695 53.8125C267.74 53.8125 267.779 53.8294 267.813 53.8631C267.846 53.8968 267.863 53.9361 267.863 53.981C267.863 54.026 267.846 54.0653 267.813 54.099L266.633 55.2788L267.813 56.4587C267.846 56.4924 267.863 56.5317 267.863 56.5766C267.863 56.6216 267.846 56.6609 267.813 56.6946C267.779 56.7283 267.74 56.7452 267.695 56.7452C267.65 56.7452 267.611 56.7283 267.577 56.6946L266.397 55.5148Z" fill="black"/>
 <rect x="202" y="53.5" width="24" height="4" rx="2" fill="#DEE2E6"/>
 <rect x="229" y="53.5" width="32" height="4" rx="2" fill="#ACB5BD"/>
-<rect x="198.193" y="49.6926" width="73.6148" height="10.6148" rx="1.34836" stroke="#DEE2E6" stroke-width="0.385246"/>
+<rect x="198.193" y="49.6926" width="73.6148" height="10.6148" rx="1.34836" stroke="#DEE2E6" strokeWidth="0.385246"/>
 <rect x="106.193" y="49.6926" width="88.6148" height="10.6148" rx="1.34836" fill="white"/>
 <circle cx="157.397" cy="55.2785" r="2.9308" fill="white"/>
 <circle cx="157.386" cy="55.2691" r="2.62849" fill="url(#pattern3)"/>
@@ -90,7 +90,7 @@
 <path d="M189.697 55.5148L188.517 56.6946C188.483 56.7283 188.444 56.7452 188.399 56.7452C188.354 56.7452 188.315 56.7283 188.281 56.6946C188.247 56.6609 188.23 56.6216 188.23 56.5766C188.23 56.5317 188.247 56.4924 188.281 56.4587L189.461 55.2788L188.281 54.099C188.247 54.0653 188.23 54.026 188.23 53.981C188.23 53.9361 188.247 53.8968 188.281 53.8631C188.315 53.8294 188.354 53.8125 188.399 53.8125C188.444 53.8125 188.483 53.8294 188.517 53.8631L189.697 55.0429L190.877 53.8631C190.91 53.8294 190.95 53.8125 190.995 53.8125C191.04 53.8125 191.079 53.8294 191.113 53.8631C191.146 53.8968 191.163 53.9361 191.163 53.981C191.163 54.026 191.146 54.0653 191.113 54.099L189.933 55.2788L191.113 56.4587C191.146 56.4924 191.163 56.5317 191.163 56.5766C191.163 56.6216 191.146 56.6609 191.113 56.6946C191.079 56.7283 191.04 56.7452 190.995 56.7452C190.95 56.7452 190.91 56.7283 190.877 56.6946L189.697 55.5148Z" fill="#858E96"/>
 <rect x="109" y="53.5" width="36" height="4" rx="2" fill="#DEE2E6"/>
 <rect x="163" y="53.5" width="20" height="4" rx="2" fill="#ACB5BD"/>
-<rect x="106.193" y="49.6926" width="88.6148" height="10.6148" rx="1.34836" stroke="#DEE2E6" stroke-width="0.385246"/>
+<rect x="106.193" y="49.6926" width="88.6148" height="10.6148" rx="1.34836" stroke="#DEE2E6" strokeWidth="0.385246"/>
 <rect x="14.1926" y="64.6926" width="88.6148" height="10.6148" rx="1.34836" fill="white"/>
 <path d="M97.6968 70.5148L96.517 71.6946C96.4833 71.7283 96.444 71.7452 96.399 71.7452C96.3541 71.7452 96.3147 71.7283 96.281 71.6946C96.2473 71.6609 96.2305 71.6216 96.2305 71.5766C96.2305 71.5317 96.2473 71.4924 96.281 71.4587L97.4608 70.2788L96.281 69.099C96.2473 69.0653 96.2305 69.026 96.2305 68.981C96.2305 68.9361 96.2473 68.8968 96.281 68.8631C96.3147 68.8294 96.3541 68.8125 96.399 68.8125C96.444 68.8125 96.4833 68.8294 96.517 68.8631L97.6968 70.0429L98.8766 68.8631C98.9103 68.8294 98.9497 68.8125 98.9946 68.8125C99.0396 68.8125 99.0789 68.8294 99.1126 68.8631C99.1463 68.8968 99.1632 68.9361 99.1632 68.981C99.1632 69.026 99.1463 69.0653 99.1126 69.099L97.9328 70.2788L99.1126 71.4587C99.1463 71.4924 99.1632 71.5317 99.1632 71.5766C99.1632 71.6216 99.1463 71.6609 99.1126 71.6946C99.0789 71.7283 99.0396 71.7452 98.9946 71.7452C98.9497 71.7452 98.9103 71.7283 98.8766 71.6946L97.6968 70.5148Z" fill="#858E96"/>
 <rect x="17" y="68.5" width="36" height="4" rx="2" fill="#DEE2E6"/>
@@ -101,7 +101,7 @@
 <circle cx="61.9996" cy="70.3532" r="2.5934" fill="#096E8D"/>
 <circle cx="58.8527" cy="70.3527" r="2.85274" fill="white"/>
 <circle cx="58.8532" cy="70.3532" r="2.5934" fill="#FF6B00"/>
-<rect x="14.1926" y="64.6926" width="88.6148" height="10.6148" rx="1.34836" stroke="#DEE2E6" stroke-width="0.385246"/>
+<rect x="14.1926" y="64.6926" width="88.6148" height="10.6148" rx="1.34836" stroke="#DEE2E6" strokeWidth="0.385246"/>
 </g>
 <defs>
 <filter id="filter0_d_2884_60024" x="16.2193" y="0.719251" width="284.561" height="70.5615" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
diff --git a/apps/app/public/onboarding/issue.svg b/apps/app/public/onboarding/issue.svg
index e6d0fa0f6..1501e07d5 100644
--- a/apps/app/public/onboarding/issue.svg
+++ b/apps/app/public/onboarding/issue.svg
@@ -11,7 +11,7 @@
 <circle cx="174.957" cy="155.839" r="8.12271" fill="#8CC1FF"/>
 <circle cx="160.336" cy="155.839" r="8.93498" fill="white"/>
 <circle cx="160.336" cy="155.839" r="8.12271" fill="#2C435F"/>
-<rect x="71.6288" y="140.96" width="69.4492" height="29.4064" rx="4.69251" fill="white" stroke="#DEE2E6" stroke-width="0.625668"/>
+<rect x="71.6288" y="140.96" width="69.4492" height="29.4064" rx="4.69251" fill="white" stroke="#DEE2E6" strokeWidth="0.625668"/>
 <circle cx="82.5987" cy="155.037" r="3.75401" fill="#F7AE59"/>
 <path d="M92.0831 150.29V149.117H100.274V150.29H96.8396V160.038H95.5172V150.29H92.0831ZM104.284 160.208C103.544 160.208 102.895 160.032 102.337 159.68C101.783 159.328 101.349 158.836 101.036 158.203C100.727 157.57 100.572 156.831 100.572 155.985C100.572 155.132 100.727 154.387 101.036 153.751C101.349 153.114 101.783 152.62 102.337 152.268C102.895 151.916 103.544 151.74 104.284 151.74C105.023 151.74 105.67 151.916 106.225 152.268C106.783 152.62 107.216 153.114 107.526 153.751C107.839 154.387 107.995 155.132 107.995 155.985C107.995 156.831 107.839 157.57 107.526 158.203C107.216 158.836 106.783 159.328 106.225 159.68C105.67 160.032 105.023 160.208 104.284 160.208ZM104.284 159.078C104.845 159.078 105.307 158.934 105.67 158.646C106.033 158.358 106.301 157.979 106.475 157.51C106.649 157.041 106.737 156.532 106.737 155.985C106.737 155.438 106.649 154.927 106.475 154.455C106.301 153.982 106.033 153.6 105.67 153.308C105.307 153.017 104.845 152.871 104.284 152.871C103.722 152.871 103.26 153.017 102.897 153.308C102.535 153.6 102.266 153.982 102.092 154.455C101.918 154.927 101.831 155.438 101.831 155.985C101.831 156.532 101.918 157.041 102.092 157.51C102.266 157.979 102.535 158.358 102.897 158.646C103.26 158.934 103.722 159.078 104.284 159.078ZM117.232 160.208C116.55 160.208 115.947 160.036 115.424 159.691C114.902 159.343 114.493 158.852 114.198 158.219C113.903 157.583 113.755 156.831 113.755 155.964C113.755 155.103 113.903 154.357 114.198 153.724C114.493 153.091 114.904 152.602 115.43 152.258C115.956 151.913 116.564 151.74 117.253 151.74C117.787 151.74 118.208 151.829 118.517 152.007C118.83 152.181 119.068 152.38 119.232 152.604C119.399 152.825 119.529 153.006 119.621 153.148H119.728V149.117H120.986V160.038H119.77V158.779H119.621C119.529 158.928 119.397 159.117 119.226 159.344C119.056 159.568 118.812 159.769 118.496 159.947C118.179 160.121 117.758 160.208 117.232 160.208ZM117.403 159.078C117.907 159.078 118.334 158.946 118.682 158.683C119.031 158.417 119.296 158.049 119.477 157.579C119.658 157.107 119.749 156.561 119.749 155.942C119.749 155.331 119.66 154.796 119.482 154.337C119.305 153.875 119.042 153.516 118.693 153.26C118.345 153.001 117.915 152.871 117.403 152.871C116.869 152.871 116.425 153.008 116.07 153.281C115.718 153.552 115.453 153.92 115.275 154.385C115.101 154.847 115.014 155.366 115.014 155.942C115.014 156.525 115.103 157.055 115.28 157.531C115.462 158.004 115.728 158.381 116.08 158.662C116.436 158.939 116.877 159.078 117.403 159.078ZM126.793 160.208C126.054 160.208 125.405 160.032 124.847 159.68C124.292 159.328 123.858 158.836 123.546 158.203C123.236 157.57 123.082 156.831 123.082 155.985C123.082 155.132 123.236 154.387 123.546 153.751C123.858 153.114 124.292 152.62 124.847 152.268C125.405 151.916 126.054 151.74 126.793 151.74C127.532 151.74 128.179 151.916 128.734 152.268C129.292 152.62 129.726 153.114 130.035 153.751C130.348 154.387 130.504 155.132 130.504 155.985C130.504 156.831 130.348 157.57 130.035 158.203C129.726 158.836 129.292 159.328 128.734 159.68C128.179 160.032 127.532 160.208 126.793 160.208ZM126.793 159.078C127.355 159.078 127.817 158.934 128.179 158.646C128.542 158.358 128.81 157.979 128.985 157.51C129.159 157.041 129.246 156.532 129.246 155.985C129.246 155.438 129.159 154.927 128.985 154.455C128.81 153.982 128.542 153.6 128.179 153.308C127.817 153.017 127.355 152.871 126.793 152.871C126.231 152.871 125.769 153.017 125.407 153.308C125.044 153.6 124.776 153.982 124.601 154.455C124.427 154.927 124.34 155.438 124.34 155.985C124.34 156.532 124.427 157.041 124.601 157.51C124.776 157.979 125.044 158.358 125.407 158.646C125.769 158.934 126.231 159.078 126.793 159.078Z" fill="#495057"/>
 <rect x="31.2729" y="140.647" width="30.0321" height="30.0321" rx="5.00535" fill="#FFEDD5"/>
diff --git a/apps/app/services/project.service.ts b/apps/app/services/project.service.ts
index f7daf5674..1443fee69 100644
--- a/apps/app/services/project.service.ts
+++ b/apps/app/services/project.service.ts
@@ -158,7 +158,7 @@ class ProjectServices extends APIService {
     memberId: string,
     data: Partial<IProjectMember>
   ): Promise<IProjectMember> {
-    return this.put(
+    return this.patch(
       `/api/workspaces/${workspaceSlug}/projects/${projectId}/members/${memberId}/`,
       data
     )
diff --git a/apps/app/services/workspace.service.ts b/apps/app/services/workspace.service.ts
index 7fe1ec198..9fb7d61ce 100644
--- a/apps/app/services/workspace.service.ts
+++ b/apps/app/services/workspace.service.ts
@@ -147,7 +147,7 @@ class WorkspaceService extends APIService {
     memberId: string,
     data: Partial<IWorkspaceMember>
   ): Promise<IWorkspaceMember> {
-    return this.put(`/api/workspaces/${workspaceSlug}/members/${memberId}/`, data)
+    return this.patch(`/api/workspaces/${workspaceSlug}/members/${memberId}/`, data)
       .then((response) => response?.data)
       .catch((error) => {
         throw error?.response?.data;

From c6d78b5e6a6980971a927bbd8afb83cf0ad8051b Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Tue, 16 May 2023 10:41:37 +0530
Subject: [PATCH 31/81] style: new custom analytics ui (#1055)

---
 .../create-update-analytics-modal.tsx         |   2 +-
 .../custom-analytics/custom-analytics.tsx     | 206 +++++-----
 .../custom-analytics/graph/custom-tooltip.tsx |   4 +-
 .../custom-analytics/graph/index.tsx          |   3 +-
 .../analytics/custom-analytics/index.ts       |   1 +
 .../analytics/custom-analytics/select-bar.tsx |  80 ++++
 .../analytics/custom-analytics/sidebar.tsx    | 372 ++++++++++--------
 .../analytics/custom-analytics/table.tsx      |   5 +-
 apps/app/components/analytics/index.ts        |   2 +-
 .../components/analytics/project-modal.tsx    |  59 ++-
 .../analytics/scope-and-demand/demand.tsx     |   2 +-
 .../scope-and-demand/leaderboard.tsx          |  15 +-
 .../scope-and-demand/scope-and-demand.tsx     |  13 +-
 .../analytics/scope-and-demand/scope.tsx      |   8 +-
 .../scope-and-demand/year-wise-issues.tsx     |   3 +
 apps/app/components/analytics/select/index.ts |   4 +
 .../components/analytics/select/project.tsx   |  38 ++
 .../components/analytics/select/segment.tsx   |  39 ++
 .../components/analytics/select/x-axis.tsx    |  27 ++
 .../components/analytics/select/y-axis.tsx    |  26 ++
 .../components/analytics/workspace-modal.tsx  |  70 ----
 apps/app/components/icons/priority-icon.tsx   |   2 +
 .../app/components/workspace/sidebar-menu.tsx |  95 ++---
 apps/app/constants/analytics.ts               |   4 +-
 apps/app/constants/fetch-keys.ts              |  12 +-
 apps/app/helpers/analytics.helper.ts          |  22 +-
 apps/app/layouts/app-layout/app-sidebar.tsx   |  14 +-
 .../project-authorization-wrapper.tsx         |  17 +-
 .../workspace-authorization-wrapper.tsx       |  15 +-
 apps/app/pages/[workspaceSlug]/analytics.tsx  | 108 +++++
 apps/app/services/analytics.service.ts        |  10 +-
 apps/app/types/analytics.d.ts                 |  12 +-
 apps/app/types/projects.d.ts                  |   3 +
 33 files changed, 797 insertions(+), 496 deletions(-)
 create mode 100644 apps/app/components/analytics/custom-analytics/select-bar.tsx
 create mode 100644 apps/app/components/analytics/select/index.ts
 create mode 100644 apps/app/components/analytics/select/project.tsx
 create mode 100644 apps/app/components/analytics/select/segment.tsx
 create mode 100644 apps/app/components/analytics/select/x-axis.tsx
 create mode 100644 apps/app/components/analytics/select/y-axis.tsx
 delete mode 100644 apps/app/components/analytics/workspace-modal.tsx
 create mode 100644 apps/app/pages/[workspaceSlug]/analytics.tsx

diff --git a/apps/app/components/analytics/custom-analytics/create-update-analytics-modal.tsx b/apps/app/components/analytics/custom-analytics/create-update-analytics-modal.tsx
index 625a2a4c7..afaaf1b98 100644
--- a/apps/app/components/analytics/custom-analytics/create-update-analytics-modal.tsx
+++ b/apps/app/components/analytics/custom-analytics/create-update-analytics-modal.tsx
@@ -62,7 +62,7 @@ export const CreateUpdateAnalyticsModal: React.FC<Props> = ({ isOpen, handleClos
         x_axis: "priority",
         y_axis: "issue_count",
         ...params,
-        project: params?.project ? [params.project] : [],
+        project: params?.project ?? [],
       },
     };
 
diff --git a/apps/app/components/analytics/custom-analytics/custom-analytics.tsx b/apps/app/components/analytics/custom-analytics/custom-analytics.tsx
index d1ec7392c..f9be7d1dd 100644
--- a/apps/app/components/analytics/custom-analytics/custom-analytics.tsx
+++ b/apps/app/components/analytics/custom-analytics/custom-analytics.tsx
@@ -1,144 +1,130 @@
-import { useState } from "react";
-
 import { useRouter } from "next/router";
 
-import useSWR from "swr";
+import { mutate } from "swr";
 
 // react-hook-form
-import { useForm } from "react-hook-form";
-// services
-import analyticsService from "services/analytics.service";
+import { Control, UseFormSetValue } from "react-hook-form";
+// hooks
+import useProjects from "hooks/use-projects";
 // components
 import {
   AnalyticsGraph,
+  AnalyticsSelectBar,
   AnalyticsSidebar,
   AnalyticsTable,
-  CreateUpdateAnalyticsModal,
 } from "components/analytics";
 // ui
 import { Loader, PrimaryButton } from "components/ui";
 // helpers
 import { convertResponseToBarGraphData } from "helpers/analytics.helper";
 // types
-import { IAnalyticsParams } from "types";
+import { IAnalyticsParams, IAnalyticsResponse } from "types";
 // fetch-keys
 import { ANALYTICS } from "constants/fetch-keys";
 
-const defaultValues: IAnalyticsParams = {
-  x_axis: "priority",
-  y_axis: "issue_count",
-  segment: null,
-  project: null,
-};
-
 type Props = {
-  isProjectLevel?: boolean;
-  fullScreen?: boolean;
+  analytics: IAnalyticsResponse | undefined;
+  analyticsError: any;
+  params: IAnalyticsParams;
+  control: Control<IAnalyticsParams, any>;
+  setValue: UseFormSetValue<IAnalyticsParams>;
+  fullScreen: boolean;
 };
 
-export const CustomAnalytics: React.FC<Props> = ({ isProjectLevel = false, fullScreen = true }) => {
-  const [saveAnalyticsModal, setSaveAnalyticsModal] = useState(false);
-
+export const CustomAnalytics: React.FC<Props> = ({
+  analytics,
+  analyticsError,
+  params,
+  control,
+  setValue,
+  fullScreen,
+}) => {
   const router = useRouter();
-  const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
+  const { workspaceSlug, projectId } = router.query;
 
-  const { control, watch, setValue } = useForm<IAnalyticsParams>({ defaultValues });
+  const isProjectLevel = projectId ? true : false;
 
-  const params: IAnalyticsParams = {
-    x_axis: watch("x_axis"),
-    y_axis: watch("y_axis"),
-    segment: watch("segment"),
-    project: isProjectLevel ? projectId?.toString() : watch("project"),
-    cycle: isProjectLevel && cycleId ? cycleId.toString() : null,
-    module: isProjectLevel && moduleId ? moduleId.toString() : null,
-  };
-
-  const {
-    data: analytics,
-    error: analyticsError,
-    mutate: mutateAnalytics,
-  } = useSWR(
-    workspaceSlug ? ANALYTICS(workspaceSlug.toString(), params) : null,
-    workspaceSlug ? () => analyticsService.getAnalytics(workspaceSlug.toString(), params) : null
-  );
-
-  const yAxisKey = params.y_axis === "issue_count" ? "count" : "effort";
+  const yAxisKey = params.y_axis === "issue_count" ? "count" : "estimate";
   const barGraphData = convertResponseToBarGraphData(analytics?.distribution, params);
 
+  const { projects } = useProjects();
+
   return (
-    <>
-      <CreateUpdateAnalyticsModal
-        isOpen={saveAnalyticsModal}
-        handleClose={() => setSaveAnalyticsModal(false)}
-        params={params}
-      />
-      <div
-        className={`overflow-y-auto ${
-          fullScreen ? "grid grid-cols-4 h-full" : "flex flex-col-reverse"
-        }`}
-      >
-        <div className="col-span-3">
-          {!analyticsError ? (
-            analytics ? (
-              analytics.total > 0 ? (
-                <>
-                  <AnalyticsGraph
-                    analytics={analytics}
-                    barGraphData={barGraphData}
-                    params={params}
-                    yAxisKey={yAxisKey}
-                    fullScreen={fullScreen}
-                  />
-                  <AnalyticsTable
-                    analytics={analytics}
-                    barGraphData={barGraphData}
-                    params={params}
-                    yAxisKey={yAxisKey}
-                  />
-                </>
-              ) : (
-                <div className="grid h-full place-items-center p-5">
-                  <div className="space-y-4 text-brand-secondary">
-                    <p className="text-sm">
-                      No matching issues found. Try changing the parameters.
-                    </p>
-                  </div>
-                </div>
-              )
+    <div
+      className={`overflow-hidden flex flex-col-reverse ${
+        fullScreen ? "md:grid md:grid-cols-4 md:h-full" : ""
+      }`}
+    >
+      <div className="col-span-3 flex flex-col h-full overflow-hidden">
+        <AnalyticsSelectBar
+          control={control}
+          setValue={setValue}
+          projects={projects}
+          params={params}
+          fullScreen={fullScreen}
+          isProjectLevel={isProjectLevel}
+        />
+        {!analyticsError ? (
+          analytics ? (
+            analytics.total > 0 ? (
+              <div className="h-full overflow-y-auto">
+                <AnalyticsGraph
+                  analytics={analytics}
+                  barGraphData={barGraphData}
+                  params={params}
+                  yAxisKey={yAxisKey}
+                  fullScreen={fullScreen}
+                />
+                <AnalyticsTable
+                  analytics={analytics}
+                  barGraphData={barGraphData}
+                  params={params}
+                  yAxisKey={yAxisKey}
+                />
+              </div>
             ) : (
-              <Loader className="space-y-6 p-5">
-                <Loader.Item height="300px" />
-                <Loader className="space-y-4">
-                  <Loader.Item height="30px" />
-                  <Loader.Item height="30px" />
-                  <Loader.Item height="30px" />
-                  <Loader.Item height="30px" />
-                </Loader>
-              </Loader>
-            )
-          ) : (
-            <div className="grid h-full place-items-center p-5">
-              <div className="space-y-4 text-brand-secondary">
-                <p className="text-sm">There was some error in fetching the data.</p>
-                <div className="flex items-center justify-center gap-2">
-                  <PrimaryButton onClick={() => mutateAnalytics()}>Refresh</PrimaryButton>
+              <div className="grid h-full place-items-center p-5">
+                <div className="space-y-4 text-brand-secondary">
+                  <p className="text-sm">No matching issues found. Try changing the parameters.</p>
                 </div>
               </div>
+            )
+          ) : (
+            <Loader className="space-y-6 p-5">
+              <Loader.Item height="300px" />
+              <Loader className="space-y-4">
+                <Loader.Item height="30px" />
+                <Loader.Item height="30px" />
+                <Loader.Item height="30px" />
+                <Loader.Item height="30px" />
+              </Loader>
+            </Loader>
+          )
+        ) : (
+          <div className="grid h-full place-items-center p-5">
+            <div className="space-y-4 text-brand-secondary">
+              <p className="text-sm">There was some error in fetching the data.</p>
+              <div className="flex items-center justify-center gap-2">
+                <PrimaryButton
+                  onClick={() => {
+                    if (!workspaceSlug) return;
+
+                    mutate(ANALYTICS(workspaceSlug.toString(), params));
+                  }}
+                >
+                  Refresh
+                </PrimaryButton>
+              </div>
             </div>
-          )}
-        </div>
-        <div className={fullScreen ? "h-full" : ""}>
-          <AnalyticsSidebar
-            analytics={analytics}
-            params={params}
-            control={control}
-            setValue={setValue}
-            setSaveAnalyticsModal={setSaveAnalyticsModal}
-            fullScreen={fullScreen}
-            isProjectLevel={isProjectLevel}
-          />
-        </div>
+          </div>
+        )}
       </div>
-    </>
+      <AnalyticsSidebar
+        analytics={analytics}
+        params={params}
+        fullScreen={fullScreen}
+        isProjectLevel={isProjectLevel}
+      />
+    </div>
   );
 };
diff --git a/apps/app/components/analytics/custom-analytics/graph/custom-tooltip.tsx b/apps/app/components/analytics/custom-analytics/graph/custom-tooltip.tsx
index 9d392c214..d288ae3a9 100644
--- a/apps/app/components/analytics/custom-analytics/graph/custom-tooltip.tsx
+++ b/apps/app/components/analytics/custom-analytics/graph/custom-tooltip.tsx
@@ -18,11 +18,11 @@ export const CustomTooltip: React.FC<Props> = ({ datum, params }) => {
     else tooltipValue = datum.id;
   } else {
     if (DATE_KEYS.includes(params.x_axis)) tooltipValue = datum.indexValue;
-    else tooltipValue = datum.id === "count" ? "Issue count" : "Effort";
+    else tooltipValue = datum.id === "count" ? "Issue count" : "Estimate";
   }
 
   return (
-    <div className="flex items-center gap-2 rounded-md border border-brand-base bg-brand-base p-2 text-xs">
+    <div className="flex items-center gap-2 rounded-md border border-brand-base bg-brand-surface-2 p-2 text-xs">
       <span
         className="h-3 w-3 rounded"
         style={{
diff --git a/apps/app/components/analytics/custom-analytics/graph/index.tsx b/apps/app/components/analytics/custom-analytics/graph/index.tsx
index 12d5803e7..419294c30 100644
--- a/apps/app/components/analytics/custom-analytics/graph/index.tsx
+++ b/apps/app/components/analytics/custom-analytics/graph/index.tsx
@@ -18,7 +18,7 @@ type Props = {
     xAxisKeys: string[];
   };
   params: IAnalyticsParams;
-  yAxisKey: "effort" | "count";
+  yAxisKey: "count" | "estimate";
   fullScreen: boolean;
 };
 
@@ -70,6 +70,7 @@ export const AnalyticsGraph: React.FC<Props> = ({
       height={fullScreen ? "400px" : "300px"}
       margin={{ right: 20, bottom: longestXAxisLabel.length * 5 + 20 }}
       theme={{
+        background: "rgb(var(--color-bg-base))",
         axis: {},
       }}
     />
diff --git a/apps/app/components/analytics/custom-analytics/index.ts b/apps/app/components/analytics/custom-analytics/index.ts
index 11670a494..ecdb29b74 100644
--- a/apps/app/components/analytics/custom-analytics/index.ts
+++ b/apps/app/components/analytics/custom-analytics/index.ts
@@ -1,5 +1,6 @@
 export * from "./graph";
 export * from "./create-update-analytics-modal";
 export * from "./custom-analytics";
+export * from "./select-bar";
 export * from "./sidebar";
 export * from "./table";
diff --git a/apps/app/components/analytics/custom-analytics/select-bar.tsx b/apps/app/components/analytics/custom-analytics/select-bar.tsx
new file mode 100644
index 000000000..5f667b035
--- /dev/null
+++ b/apps/app/components/analytics/custom-analytics/select-bar.tsx
@@ -0,0 +1,80 @@
+// react-hook-form
+import { Control, Controller, UseFormSetValue } from "react-hook-form";
+// components
+import { SelectProject, SelectSegment, SelectXAxis, SelectYAxis } from "components/analytics";
+// types
+import { IAnalyticsParams, IProject } from "types";
+
+type Props = {
+  control: Control<IAnalyticsParams, any>;
+  setValue: UseFormSetValue<IAnalyticsParams>;
+  projects: IProject[];
+  params: IAnalyticsParams;
+  fullScreen: boolean;
+  isProjectLevel: boolean;
+};
+
+export const AnalyticsSelectBar: React.FC<Props> = ({
+  control,
+  setValue,
+  projects,
+  params,
+  fullScreen,
+  isProjectLevel,
+}) => (
+  <div
+    className={`grid items-center gap-4 p-5 pb-0.5 ${
+      isProjectLevel ? "grid-cols-3" : "grid-cols-2"
+    } ${fullScreen ? "lg:grid-cols-4" : ""}`}
+  >
+    {!isProjectLevel && (
+      <div>
+        <h6 className="text-xs text-brand-secondary">Project</h6>
+        <Controller
+          name="project"
+          control={control}
+          render={({ field: { value, onChange } }) => (
+            <SelectProject value={value} onChange={onChange} projects={projects} />
+          )}
+        />
+      </div>
+    )}
+    <div>
+      <h6 className="text-xs text-brand-secondary">Measure (y-axis)</h6>
+      <Controller
+        name="y_axis"
+        control={control}
+        render={({ field: { value, onChange } }) => (
+          <SelectYAxis value={value} onChange={onChange} />
+        )}
+      />
+    </div>
+    <div>
+      <h6 className="text-xs text-brand-secondary">Dimension (x-axis)</h6>
+      <Controller
+        name="x_axis"
+        control={control}
+        render={({ field: { value, onChange } }) => (
+          <SelectXAxis
+            value={value}
+            onChange={(val: string) => {
+              if (params.segment === val) setValue("segment", null);
+
+              onChange(val);
+            }}
+          />
+        )}
+      />
+    </div>
+    <div>
+      <h6 className="text-xs text-brand-secondary">Group</h6>
+      <Controller
+        name="segment"
+        control={control}
+        render={({ field: { value, onChange } }) => (
+          <SelectSegment value={value} onChange={onChange} params={params} />
+        )}
+      />
+    </div>
+  </div>
+);
diff --git a/apps/app/components/analytics/custom-analytics/sidebar.tsx b/apps/app/components/analytics/custom-analytics/sidebar.tsx
index 9c0964021..e0b88b23b 100644
--- a/apps/app/components/analytics/custom-analytics/sidebar.tsx
+++ b/apps/app/components/analytics/custom-analytics/sidebar.tsx
@@ -1,51 +1,82 @@
 import { useRouter } from "next/router";
 
-import { mutate } from "swr";
+import useSWR, { mutate } from "swr";
 
-// react-hook-form
-import { Control, Controller, UseFormSetValue } from "react-hook-form";
 // services
 import analyticsService from "services/analytics.service";
+import projectService from "services/project.service";
+import cyclesService from "services/cycles.service";
+import modulesService from "services/modules.service";
 // hooks
 import useProjects from "hooks/use-projects";
 import useToast from "hooks/use-toast";
 // ui
-import { CustomMenu, CustomSelect, PrimaryButton } from "components/ui";
+import { PrimaryButton, SecondaryButton } from "components/ui";
 // icons
-import { ArrowPathIcon, ArrowUpTrayIcon } from "@heroicons/react/24/outline";
+import { ArrowDownTrayIcon, ArrowPathIcon, UserGroupIcon } from "@heroicons/react/24/outline";
+import { ContrastIcon, LayerDiagonalIcon } from "components/icons";
+// helpers
+import { renderShortDate } from "helpers/date-time.helper";
 // types
-import { IAnalyticsParams, IAnalyticsResponse, IExportAnalyticsFormData } from "types";
+import { IAnalyticsParams, IAnalyticsResponse, IExportAnalyticsFormData, IProject } from "types";
 // fetch-keys
-import { ANALYTICS } from "constants/fetch-keys";
+import { ANALYTICS, CYCLE_DETAILS, MODULE_DETAILS, PROJECT_DETAILS } from "constants/fetch-keys";
 // constants
-import { ANALYTICS_X_AXIS_VALUES, ANALYTICS_Y_AXIS_VALUES } from "constants/analytics";
+import { NETWORK_CHOICES } from "constants/project";
 
 type Props = {
   analytics: IAnalyticsResponse | undefined;
   params: IAnalyticsParams;
-  control: Control<IAnalyticsParams, any>;
-  setValue: UseFormSetValue<IAnalyticsParams>;
-  setSaveAnalyticsModal: React.Dispatch<React.SetStateAction<boolean>>;
   fullScreen: boolean;
-  isProjectLevel?: boolean;
+  isProjectLevel: boolean;
 };
 
 export const AnalyticsSidebar: React.FC<Props> = ({
   analytics,
   params,
-  control,
-  setValue,
-  setSaveAnalyticsModal,
   fullScreen,
   isProjectLevel = false,
 }) => {
   const router = useRouter();
-  const { workspaceSlug } = router.query;
+  const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
 
   const { projects } = useProjects();
 
   const { setToastAlert } = useToast();
 
+  const { data: projectDetails } = useSWR(
+    workspaceSlug && projectId && !(cycleId || moduleId)
+      ? PROJECT_DETAILS(projectId.toString())
+      : null,
+    workspaceSlug && projectId && !(cycleId || moduleId)
+      ? () => projectService.getProject(workspaceSlug.toString(), projectId.toString())
+      : null
+  );
+
+  const { data: cycleDetails } = useSWR(
+    workspaceSlug && projectId && cycleId ? CYCLE_DETAILS(cycleId.toString()) : null,
+    workspaceSlug && projectId && cycleId
+      ? () =>
+          cyclesService.getCycleDetails(
+            workspaceSlug.toString(),
+            projectId.toString(),
+            cycleId.toString()
+          )
+      : null
+  );
+
+  const { data: moduleDetails } = useSWR(
+    workspaceSlug && projectId && moduleId ? MODULE_DETAILS(moduleId.toString()) : null,
+    workspaceSlug && projectId && moduleId
+      ? () =>
+          modulesService.getModuleDetails(
+            workspaceSlug.toString(),
+            projectId.toString(),
+            moduleId.toString()
+          )
+      : null
+  );
+
   const exportAnalytics = () => {
     if (!workspaceSlug) return;
 
@@ -55,7 +86,7 @@ export const AnalyticsSidebar: React.FC<Props> = ({
     };
 
     if (params.segment) data.segment = params.segment;
-    if (params.project) data.project = [params.project];
+    if (params.project) data.project = params.project;
 
     analyticsService
       .exportAnalytics(workspaceSlug.toString(), data)
@@ -77,155 +108,180 @@ export const AnalyticsSidebar: React.FC<Props> = ({
 
   return (
     <div
-      className={`gap-4 p-5 ${
-        fullScreen ? "border-l border-brand-base bg-brand-sidebar h-full" : ""
+      className={`p-5 pb-0 flex flex-col space-y-2 md:space-y-4 overflow-hidden ${
+        fullScreen
+          ? "pb-5 border-l border-brand-base md:h-full md:pb-5 md:border-l md:border-brand-base"
+          : ""
       }`}
     >
-      <div className={`sticky top-5 ${fullScreen ? "space-y-4" : "space-y-2"}`}>
-        <div className="flex items-center justify-between gap-2 flex-shrink-0">
-          <h5 className="text-lg font-medium">
-            {analytics?.total ?? 0}{" "}
-            <span className="text-xs font-normal text-brand-secondary">issues</span>
-          </h5>
-          <CustomMenu ellipsis>
-            <CustomMenu.MenuItem
-              onClick={() => {
-                if (!workspaceSlug) return;
-
-                mutate(ANALYTICS(workspaceSlug.toString(), params));
-              }}
-            >
-              <div className="flex items-center gap-2">
-                <ArrowPathIcon className="h-3 w-3" />
-                Refresh
-              </div>
-            </CustomMenu.MenuItem>
-            <CustomMenu.MenuItem onClick={exportAnalytics}>
-              <div className="flex items-center gap-2">
-                <ArrowUpTrayIcon className="h-3 w-3" />
-                Export analytics as CSV
-              </div>
-            </CustomMenu.MenuItem>
-          </CustomMenu>
+      <div className="flex items-center gap-2 flex-wrap">
+        <div className="flex items-center gap-1 bg-brand-surface-2 rounded-md px-3 py-1 text-brand-secondary text-xs">
+          <LayerDiagonalIcon height={14} width={14} />
+          {analytics ? analytics.total : "..."} Issues
         </div>
-        <div className={`${fullScreen ? "space-y-4" : "grid items-center gap-4 grid-cols-3"}`}>
-          {isProjectLevel === false && (
-            <div>
-              <h6 className="text-xs text-brand-secondary">Project</h6>
-              <Controller
-                name="project"
-                control={control}
-                render={({ field: { value, onChange } }) => (
-                  <CustomSelect
-                    value={value}
-                    label={projects.find((p) => p.id === value)?.name ?? "All projects"}
-                    onChange={onChange}
-                    width="w-full"
-                    maxHeight="lg"
-                  >
-                    <CustomSelect.Option value={null}>All projects</CustomSelect.Option>
-                    {projects.map((project) => (
-                      <CustomSelect.Option key={project.id} value={project.id}>
-                        {project.name}
-                      </CustomSelect.Option>
-                    ))}
-                  </CustomSelect>
-                )}
-              />
-            </div>
-          )}
-          <div>
-            <h6 className="text-xs text-brand-secondary">Measure (y-axis)</h6>
-            <Controller
-              name="y_axis"
-              control={control}
-              render={({ field: { value, onChange } }) => (
-                <CustomSelect
-                  value={value}
-                  label={
-                    <span>
-                      {ANALYTICS_Y_AXIS_VALUES.find((v) => v.value === value)?.label ?? "None"}
-                    </span>
-                  }
-                  onChange={onChange}
-                  width="w-full"
-                >
-                  {ANALYTICS_Y_AXIS_VALUES.map((item) => (
-                    <CustomSelect.Option key={item.value} value={item.value}>
-                      {item.label}
-                    </CustomSelect.Option>
-                  ))}
-                </CustomSelect>
-              )}
-            />
-          </div>
-          <div>
-            <h6 className="text-xs text-brand-secondary">Dimension (x-axis)</h6>
-            <Controller
-              name="x_axis"
-              control={control}
-              render={({ field: { value, onChange } }) => (
-                <CustomSelect
-                  value={value}
-                  label={
-                    <span>{ANALYTICS_X_AXIS_VALUES.find((v) => v.value === value)?.label}</span>
-                  }
-                  onChange={(val: string) => {
-                    if (params.segment === val) setValue("segment", null);
-
-                    onChange(val);
-                  }}
-                  width="w-full"
-                  maxHeight="lg"
-                >
-                  {ANALYTICS_X_AXIS_VALUES.map((item) => (
-                    <CustomSelect.Option key={item.value} value={item.value}>
-                      {item.label}
-                    </CustomSelect.Option>
-                  ))}
-                </CustomSelect>
-              )}
-            />
-          </div>
-          <div>
-            <h6 className="text-xs text-brand-secondary">Segment</h6>
-            <Controller
-              name="segment"
-              control={control}
-              render={({ field: { value, onChange } }) => (
-                <CustomSelect
-                  value={value}
-                  label={
-                    <span>
-                      {ANALYTICS_X_AXIS_VALUES.find((v) => v.value === value)?.label ?? (
-                        <span className="text-brand-secondary">No value</span>
-                      )}
-                    </span>
-                  }
-                  onChange={onChange}
-                  width="w-full"
-                  maxHeight="lg"
-                >
-                  <CustomSelect.Option value={null}>No value</CustomSelect.Option>
-                  {ANALYTICS_X_AXIS_VALUES.map((item) => {
-                    if (params.x_axis === item.value) return null;
+      </div>
+      <div className="h-full overflow-hidden">
+        {fullScreen ? (
+          <>
+            {!isProjectLevel && params.project && params.project.length > 0 && (
+              <div className="hidden h-full overflow-hidden md:flex md:flex-col">
+                <h4 className="font-medium">Selected Projects</h4>
+                <div className="space-y-6 mt-4 h-full overflow-y-auto">
+                  {params.project.map((projectId) => {
+                    const project: IProject = projects.find((p) => p.id === projectId);
 
                     return (
-                      <CustomSelect.Option key={item.value} value={item.value}>
-                        {item.label}
-                      </CustomSelect.Option>
+                      <div key={project.id}>
+                        <h5 className="text-sm flex items-center gap-1">
+                          {project.icon ? (
+                            <span className="grid h-6 w-6 flex-shrink-0 place-items-center">
+                              {String.fromCodePoint(parseInt(project.icon))}
+                            </span>
+                          ) : (
+                            <span className="grid h-8 w-8 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                              {project?.name.charAt(0)}
+                            </span>
+                          )}
+                          <span className="break-all">{project.name}</span>
+                        </h5>
+                        <div className="mt-4 space-y-3 pl-2">
+                          <div className="flex items-center justify-between gap-2 text-xs">
+                            <div className="flex items-center gap-2">
+                              <UserGroupIcon className="h-4 w-4 text-brand-secondary" />
+                              <h6>Total members</h6>
+                            </div>
+                            <span className="text-brand-secondary">{project.total_members}</span>
+                          </div>
+                          <div className="flex items-center justify-between gap-2 text-xs">
+                            <div className="flex items-center gap-2">
+                              <ContrastIcon height={16} width={16} />
+                              <h6>Total cycles</h6>
+                            </div>
+                            <span className="text-brand-secondary">{project.total_cycles}</span>
+                          </div>
+                          <div className="flex items-center justify-between gap-2 text-xs">
+                            <div className="flex items-center gap-2">
+                              <UserGroupIcon className="h-4 w-4 text-brand-secondary" />
+                              <h6>Total modules</h6>
+                            </div>
+                            <span className="text-brand-secondary">{project.total_modules}</span>
+                          </div>
+                        </div>
+                      </div>
                     );
                   })}
-                </CustomSelect>
-              )}
-            />
+                </div>
+              </div>
+            )}
+            {projectId ? (
+              cycleId && cycleDetails ? (
+                <div className="hidden md:block h-full overflow-y-auto">
+                  <h4 className="font-medium break-all">{cycleDetails.name}</h4>
+                  <div className="space-y-4 mt-4">
+                    <div className="flex items-center gap-2 text-xs">
+                      <h6 className="text-brand-secondary">Lead</h6>
+                      <span>
+                        {cycleDetails.owned_by?.first_name} {cycleDetails.owned_by?.last_name}
+                      </span>
+                    </div>
+                    <div className="flex items-center gap-2 text-xs">
+                      <h6 className="text-brand-secondary">Start Date</h6>
+                      <span>
+                        {cycleDetails.start_date && cycleDetails.start_date !== ""
+                          ? renderShortDate(cycleDetails.start_date)
+                          : "No start date"}
+                      </span>
+                    </div>
+                    <div className="flex items-center gap-2 text-xs">
+                      <h6 className="text-brand-secondary">Target Date</h6>
+                      <span>
+                        {cycleDetails.end_date && cycleDetails.end_date !== ""
+                          ? renderShortDate(cycleDetails.end_date)
+                          : "No end date"}
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              ) : moduleId && moduleDetails ? (
+                <div className="hidden md:block h-full overflow-y-auto">
+                  <h4 className="font-medium break-all">{moduleDetails.name}</h4>
+                  <div className="space-y-4 mt-4">
+                    <div className="flex items-center gap-2 text-xs">
+                      <h6 className="text-brand-secondary">Lead</h6>
+                      <span>
+                        {moduleDetails.lead_detail?.first_name}{" "}
+                        {moduleDetails.lead_detail?.last_name}
+                      </span>
+                    </div>
+                    <div className="flex items-center gap-2 text-xs">
+                      <h6 className="text-brand-secondary">Start Date</h6>
+                      <span>
+                        {moduleDetails.start_date && moduleDetails.start_date !== ""
+                          ? renderShortDate(moduleDetails.start_date)
+                          : "No start date"}
+                      </span>
+                    </div>
+                    <div className="flex items-center gap-2 text-xs">
+                      <h6 className="text-brand-secondary">Target Date</h6>
+                      <span>
+                        {moduleDetails.target_date && moduleDetails.target_date !== ""
+                          ? renderShortDate(moduleDetails.target_date)
+                          : "No end date"}
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              ) : (
+                <div className="hidden md:flex md:flex-col h-full overflow-y-auto">
+                  <div className="flex items-center gap-1">
+                    {projectDetails?.icon ? (
+                      <span className="grid h-6 w-6 flex-shrink-0 place-items-center">
+                        {String.fromCodePoint(parseInt(projectDetails.icon))}
+                      </span>
+                    ) : (
+                      <span className="grid h-8 w-8 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                        {projectDetails?.name.charAt(0)}
+                      </span>
+                    )}
+                    <h4 className="font-medium break-all">{projectDetails?.name}</h4>
+                  </div>
+                  <div className="space-y-4 mt-4">
+                    <div className="flex items-center gap-2 text-xs">
+                      <h6 className="text-brand-secondary">Network</h6>
+                      <span>
+                        {
+                          NETWORK_CHOICES[
+                            `${projectDetails?.network}` as keyof typeof NETWORK_CHOICES
+                          ]
+                        }
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              )
+            ) : null}
+          </>
+        ) : null}
+      </div>
+      <div className="flex items-center gap-2 flex-wrap justify-self-end">
+        <SecondaryButton
+          onClick={() => {
+            if (!workspaceSlug) return;
+
+            mutate(ANALYTICS(workspaceSlug.toString(), params));
+          }}
+        >
+          <div className="flex items-center gap-2 -my-1">
+            <ArrowPathIcon className="h-3.5 w-3.5" />
+            Refresh
           </div>
-        </div>
-        {/* <div className="flex items-center justify-end gap-2">
-          <PrimaryButton className="py-1" onClick={() => setSaveAnalyticsModal(true)}>
-            Save analytics
-          </PrimaryButton>
-        </div> */}
+        </SecondaryButton>
+        <PrimaryButton onClick={exportAnalytics}>
+          <div className="flex items-center gap-2 -my-1">
+            <ArrowDownTrayIcon className="h-3.5 w-3.5" />
+            Export as CSV
+          </div>
+        </PrimaryButton>
       </div>
     </div>
   );
diff --git a/apps/app/components/analytics/custom-analytics/table.tsx b/apps/app/components/analytics/custom-analytics/table.tsx
index 73be59538..900f3c692 100644
--- a/apps/app/components/analytics/custom-analytics/table.tsx
+++ b/apps/app/components/analytics/custom-analytics/table.tsx
@@ -10,7 +10,6 @@ import { generateBarColor, renderMonthAndYear } from "helpers/analytics.helper";
 import { IAnalyticsParams, IAnalyticsResponse } from "types";
 // constants
 import { ANALYTICS_X_AXIS_VALUES, ANALYTICS_Y_AXIS_VALUES, DATE_KEYS } from "constants/analytics";
-import { MONTHS_LIST } from "constants/calendar";
 
 type Props = {
   analytics: IAnalyticsResponse;
@@ -19,7 +18,7 @@ type Props = {
     xAxisKeys: string[];
   };
   params: IAnalyticsParams;
-  yAxisKey: "effort" | "count";
+  yAxisKey: "count" | "estimate";
 };
 
 export const AnalyticsTable: React.FC<Props> = ({ analytics, barGraphData, params, yAxisKey }) => (
@@ -27,7 +26,7 @@ export const AnalyticsTable: React.FC<Props> = ({ analytics, barGraphData, param
     <div className="overflow-x-auto">
       <div className="inline-block min-w-full align-middle">
         <table className="min-w-full divide-y divide-brand-base whitespace-nowrap border-y border-brand-base">
-          <thead className="bg-brand-base">
+          <thead className="bg-brand-surface-2">
             <tr className="divide-x divide-brand-base text-sm text-brand-base">
               <th scope="col" className="py-3 px-2.5 text-left font-medium">
                 {ANALYTICS_X_AXIS_VALUES.find((v) => v.value === params.x_axis)?.label}
diff --git a/apps/app/components/analytics/index.ts b/apps/app/components/analytics/index.ts
index 5ebcfae0d..ec0fd5dc1 100644
--- a/apps/app/components/analytics/index.ts
+++ b/apps/app/components/analytics/index.ts
@@ -1,4 +1,4 @@
 export * from "./custom-analytics";
 export * from "./scope-and-demand";
+export * from "./select";
 export * from "./project-modal";
-export * from "./workspace-modal";
diff --git a/apps/app/components/analytics/project-modal.tsx b/apps/app/components/analytics/project-modal.tsx
index 7e3e5efeb..293d4e891 100644
--- a/apps/app/components/analytics/project-modal.tsx
+++ b/apps/app/components/analytics/project-modal.tsx
@@ -1,7 +1,15 @@
 import React, { Fragment, useState } from "react";
 
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// react-hook-form
+import { useForm } from "react-hook-form";
 // headless ui
 import { Tab } from "@headlessui/react";
+// services
+import analyticsService from "services/analytics.service";
 // components
 import { CustomAnalytics, ScopeAndDemand } from "components/analytics";
 // icons
@@ -10,17 +18,47 @@ import {
   ArrowsPointingOutIcon,
   XMarkIcon,
 } from "@heroicons/react/24/outline";
+// types
+import { IAnalyticsParams } from "types";
+// fetch-keys
+import { ANALYTICS } from "constants/fetch-keys";
 
 type Props = {
   isOpen: boolean;
   onClose: () => void;
 };
 
+const defaultValues: IAnalyticsParams = {
+  x_axis: "priority",
+  y_axis: "issue_count",
+  segment: null,
+  project: null,
+};
+
 const tabsList = ["Scope and Demand", "Custom Analytics"];
 
 export const AnalyticsProjectModal: React.FC<Props> = ({ isOpen, onClose }) => {
   const [fullScreen, setFullScreen] = useState(false);
 
+  const router = useRouter();
+  const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
+
+  const { control, watch, setValue } = useForm<IAnalyticsParams>({ defaultValues });
+
+  const params: IAnalyticsParams = {
+    x_axis: watch("x_axis"),
+    y_axis: watch("y_axis"),
+    segment: watch("segment"),
+    project: projectId ? [projectId.toString()] : watch("project"),
+    cycle: cycleId ? cycleId.toString() : null,
+    module: moduleId ? moduleId.toString() : null,
+  };
+
+  const { data: analytics, error: analyticsError } = useSWR(
+    workspaceSlug ? ANALYTICS(workspaceSlug.toString(), params) : null,
+    workspaceSlug ? () => analyticsService.getAnalytics(workspaceSlug.toString(), params) : null
+  );
+
   const handleClose = () => {
     onClose();
   };
@@ -32,12 +70,12 @@ export const AnalyticsProjectModal: React.FC<Props> = ({ isOpen, onClose }) => {
       } ${isOpen ? "right-0" : "-right-full"} duration-300 transition-all`}
     >
       <div
-        className={`flex h-full flex-col overflow-hidden border-brand-base bg-brand-surface-1 text-left ${
+        className={`flex h-full flex-col overflow-hidden border-brand-base bg-brand-base text-left ${
           fullScreen ? "rounded-lg border" : "border-l"
         }`}
       >
         <div
-          className={`flex items-center justify-between gap-2 border-b border-b-brand-base bg-brand-sidebar p-3 text-sm ${
+          className={`flex items-center justify-between gap-2 border-b border-b-brand-base bg-brand-base p-3 text-sm ${
             fullScreen ? "" : "py-[1.275rem]"
           }`}
         >
@@ -64,13 +102,13 @@ export const AnalyticsProjectModal: React.FC<Props> = ({ isOpen, onClose }) => {
           </div>
         </div>
         <Tab.Group as={Fragment}>
-          <Tab.List className="space-x-2 border-b border-brand-base px-5 py-3">
+          <Tab.List as="div" className="space-x-2 border-b border-brand-base px-5 py-3">
             {tabsList.map((tab) => (
               <Tab
                 key={tab}
                 className={({ selected }) =>
-                  `rounded-3xl border border-brand-base px-4 py-2 text-xs hover:bg-brand-base ${
-                    selected ? "bg-brand-base" : ""
+                  `rounded-3xl border border-brand-base px-4 py-2 text-xs hover:bg-brand-surface-2 ${
+                    selected ? "bg-brand-surface-2" : ""
                   }`
                 }
               >
@@ -80,10 +118,17 @@ export const AnalyticsProjectModal: React.FC<Props> = ({ isOpen, onClose }) => {
           </Tab.List>
           <Tab.Panels as={Fragment}>
             <Tab.Panel as={Fragment}>
-              <ScopeAndDemand fullScreen={fullScreen} isProjectLevel />
+              <ScopeAndDemand fullScreen={fullScreen} />
             </Tab.Panel>
             <Tab.Panel as={Fragment}>
-              <CustomAnalytics fullScreen={fullScreen} isProjectLevel />
+              <CustomAnalytics
+                analytics={analytics}
+                analyticsError={analyticsError}
+                params={params}
+                control={control}
+                setValue={setValue}
+                fullScreen={fullScreen}
+              />
             </Tab.Panel>
           </Tab.Panels>
         </Tab.Group>
diff --git a/apps/app/components/analytics/scope-and-demand/demand.tsx b/apps/app/components/analytics/scope-and-demand/demand.tsx
index 784b3fcb4..1ab750c93 100644
--- a/apps/app/components/analytics/scope-and-demand/demand.tsx
+++ b/apps/app/components/analytics/scope-and-demand/demand.tsx
@@ -50,7 +50,7 @@ export const AnalyticsDemand: React.FC<Props> = ({ defaultAnalytics }) => (
         );
       })}
     </div>
-    <div className="!mt-6 flex w-min items-center gap-2 whitespace-nowrap rounded-md border border-brand-base bg-brand-base p-2 text-xs">
+    <div className="!mt-6 flex w-min items-center gap-2 whitespace-nowrap rounded-md border border-brand-base bg-brand-surface-2 p-2 text-xs">
       <p className="flex items-center gap-1 text-brand-secondary">
         <PlayIcon className="h-4 w-4 -rotate-90" aria-hidden="true" />
         <span>Estimate Demand:</span>
diff --git a/apps/app/components/analytics/scope-and-demand/leaderboard.tsx b/apps/app/components/analytics/scope-and-demand/leaderboard.tsx
index 978e29399..eb9ae8086 100644
--- a/apps/app/components/analytics/scope-and-demand/leaderboard.tsx
+++ b/apps/app/components/analytics/scope-and-demand/leaderboard.tsx
@@ -3,7 +3,8 @@ import Image from "next/image";
 type Props = {
   users: {
     avatar: string | null;
-    email: string | null;
+    firstName: string;
+    lastName: string;
     count: number;
   }[];
   title: string;
@@ -13,8 +14,8 @@ export const AnalyticsLeaderboard: React.FC<Props> = ({ users, title }) => (
   <div className="p-3 border border-brand-base rounded-[10px]">
     <h6 className="text-base font-medium">{title}</h6>
     <div className="mt-3 space-y-3">
-      {users.map((user) => (
-        <div key={user.email} className="flex items-start justify-between gap-4 text-xs">
+      {users.map((user, index) => (
+        <div key={`user-${index}`} className="flex items-start justify-between gap-4 text-xs">
           <div className="flex items-center gap-2">
             {user && user.avatar && user.avatar !== "" ? (
               <div className="rounded-full h-4 w-4 flex-shrink-0">
@@ -23,15 +24,17 @@ export const AnalyticsLeaderboard: React.FC<Props> = ({ users, title }) => (
                   height="100%"
                   width="100%"
                   className="rounded-full"
-                  alt={user.email ?? "No assignee"}
+                  alt={user.firstName + " " + user.lastName}
                 />
               </div>
             ) : (
               <div className="grid place-items-center flex-shrink-0 rounded-full bg-gray-700 text-[11px] capitalize text-white h-4 w-4">
-                {(user.email ?? "No assignee").charAt(0)}
+                {user.firstName !== "" ? user.firstName[0] : "?"}
               </div>
             )}
-            <span className="break-all text-brand-secondary">{user.email ?? "No assignee"}</span>
+            <span className="break-all text-brand-secondary">
+              {user.firstName !== "" ? `${user.firstName} ${user.lastName}` : "No assignee"}
+            </span>
           </div>
           <span className="flex-shrink-0">{user.count}</span>
         </div>
diff --git a/apps/app/components/analytics/scope-and-demand/scope-and-demand.tsx b/apps/app/components/analytics/scope-and-demand/scope-and-demand.tsx
index 424836a89..ee0ee4019 100644
--- a/apps/app/components/analytics/scope-and-demand/scope-and-demand.tsx
+++ b/apps/app/components/analytics/scope-and-demand/scope-and-demand.tsx
@@ -18,16 +18,17 @@ import { DEFAULT_ANALYTICS } from "constants/fetch-keys";
 
 type Props = {
   fullScreen?: boolean;
-  isProjectLevel?: boolean;
 };
 
-export const ScopeAndDemand: React.FC<Props> = ({ fullScreen = true, isProjectLevel = true }) => {
+export const ScopeAndDemand: React.FC<Props> = ({ fullScreen = true }) => {
   const router = useRouter();
   const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
 
+  const isProjectLevel = projectId ? true : false;
+
   const params = isProjectLevel
     ? {
-        project: projectId ? projectId.toString() : null,
+        project: projectId ? [projectId.toString()] : null,
         cycle: cycleId ? cycleId.toString() : null,
         module: moduleId ? moduleId.toString() : null,
       }
@@ -55,7 +56,8 @@ export const ScopeAndDemand: React.FC<Props> = ({ fullScreen = true, isProjectLe
               <AnalyticsLeaderboard
                 users={defaultAnalytics.most_issue_created_user.map((user) => ({
                   avatar: user.created_by__avatar,
-                  email: user.created_by__email,
+                  firstName: user.created_by__first_name,
+                  lastName: user.created_by__last_name,
                   count: user.count,
                 }))}
                 title="Most issues created"
@@ -63,7 +65,8 @@ export const ScopeAndDemand: React.FC<Props> = ({ fullScreen = true, isProjectLe
               <AnalyticsLeaderboard
                 users={defaultAnalytics.most_issue_closed_user.map((user) => ({
                   avatar: user.assignees__avatar,
-                  email: user.assignees__email,
+                  firstName: user.assignees__first_name,
+                  lastName: user.assignees__last_name,
                   count: user.count,
                 }))}
                 title="Most issues closed"
diff --git a/apps/app/components/analytics/scope-and-demand/scope.tsx b/apps/app/components/analytics/scope-and-demand/scope.tsx
index 60a50fa12..93ea71091 100644
--- a/apps/app/components/analytics/scope-and-demand/scope.tsx
+++ b/apps/app/components/analytics/scope-and-demand/scope.tsx
@@ -21,7 +21,7 @@ export const AnalyticsScope: React.FC<Props> = ({ defaultAnalytics }) => (
           colors={() => `#f97316`}
           customYAxisTickValues={defaultAnalytics.pending_issue_user.map((d) => d.count)}
           tooltip={(datum) => (
-            <div className="rounded-md border border-brand-base bg-brand-base p-2 text-xs">
+            <div className="rounded-md border border-brand-base bg-brand-surface-2 p-2 text-xs">
               <span className="font-medium text-brand-secondary">
                 Issue count- {datum.indexValue ?? "No assignee"}:{" "}
               </span>
@@ -51,13 +51,17 @@ export const AnalyticsScope: React.FC<Props> = ({ defaultAnalytics }) => (
                   <g transform={`translate(${datum.x},${datum.y})`}>
                     <circle cy={18} r={8} fill="#374151" />
                     <text x={0} y={21} textAnchor="middle" fontSize={9} fill="#ffffff">
-                      {(`${datum.value}` ?? "No assignee").toUpperCase().charAt(0)}
+                      {datum.value ? `${datum.value}`.toUpperCase()[0] : "?"}
                     </text>
                   </g>
                 );
             },
           }}
           margin={{ top: 20 }}
+          theme={{
+            background: "rgb(var(--color-bg-base))",
+            axis: {},
+          }}
         />
       </div>
     </div>
diff --git a/apps/app/components/analytics/scope-and-demand/year-wise-issues.tsx b/apps/app/components/analytics/scope-and-demand/year-wise-issues.tsx
index e9721bd2f..e8f03e736 100644
--- a/apps/app/components/analytics/scope-and-demand/year-wise-issues.tsx
+++ b/apps/app/components/analytics/scope-and-demand/year-wise-issues.tsx
@@ -40,6 +40,9 @@ export const AnalyticsYearWiseIssues: React.FC<Props> = ({ defaultAnalytics }) =
         colors={(datum) => datum.color}
         curve="monotoneX"
         margin={{ top: 20 }}
+        theme={{
+          background: "rgb(var(--color-bg-base))",
+        }}
         enableArea
       />
     </div>
diff --git a/apps/app/components/analytics/select/index.ts b/apps/app/components/analytics/select/index.ts
new file mode 100644
index 000000000..0c89bd2ad
--- /dev/null
+++ b/apps/app/components/analytics/select/index.ts
@@ -0,0 +1,4 @@
+export * from "./project";
+export * from "./segment";
+export * from "./x-axis";
+export * from "./y-axis";
diff --git a/apps/app/components/analytics/select/project.tsx b/apps/app/components/analytics/select/project.tsx
new file mode 100644
index 000000000..bfb975d11
--- /dev/null
+++ b/apps/app/components/analytics/select/project.tsx
@@ -0,0 +1,38 @@
+// ui
+import { CustomSearchSelect } from "components/ui";
+// types
+import { IProject } from "types";
+
+type Props = {
+  value: string[] | null | undefined;
+  onChange: (val: string[] | null) => void;
+  projects: IProject[];
+};
+
+export const SelectProject: React.FC<Props> = ({ value, onChange, projects }) => {
+  const options = projects?.map((project) => ({
+    value: project.id,
+    query: project.name + project.identifier,
+    content: <>{project.name}</>,
+  }));
+
+  return (
+    <CustomSearchSelect
+      value={value ?? []}
+      onChange={(val: string[]) => onChange(val)}
+      options={options}
+      label={
+        value && value.length > 0
+          ? projects
+              .filter((p) => value.includes(p.id))
+              .map((p) => p.identifier)
+              .join(", ")
+          : "All projects"
+      }
+      optionsClassName="min-w-full"
+      position="right"
+      noChevron
+      multiple
+    />
+  );
+};
diff --git a/apps/app/components/analytics/select/segment.tsx b/apps/app/components/analytics/select/segment.tsx
new file mode 100644
index 000000000..4358cdfa1
--- /dev/null
+++ b/apps/app/components/analytics/select/segment.tsx
@@ -0,0 +1,39 @@
+// ui
+import { CustomSelect } from "components/ui";
+// types
+import { IAnalyticsParams, TXAxisValues } from "types";
+// constants
+import { ANALYTICS_X_AXIS_VALUES } from "constants/analytics";
+
+type Props = {
+  value: TXAxisValues | null | undefined;
+  onChange: () => void;
+  params: IAnalyticsParams;
+};
+
+export const SelectSegment: React.FC<Props> = ({ value, onChange, params }) => (
+  <CustomSelect
+    value={value}
+    label={
+      <span>
+        {ANALYTICS_X_AXIS_VALUES.find((v) => v.value === value)?.label ?? (
+          <span className="text-brand-secondary">No value</span>
+        )}
+      </span>
+    }
+    onChange={onChange}
+    width="w-full"
+    maxHeight="lg"
+  >
+    <CustomSelect.Option value={null}>No value</CustomSelect.Option>
+    {ANALYTICS_X_AXIS_VALUES.map((item) => {
+      if (params.x_axis === item.value) return null;
+
+      return (
+        <CustomSelect.Option key={item.value} value={item.value}>
+          {item.label}
+        </CustomSelect.Option>
+      );
+    })}
+  </CustomSelect>
+);
diff --git a/apps/app/components/analytics/select/x-axis.tsx b/apps/app/components/analytics/select/x-axis.tsx
new file mode 100644
index 000000000..a284ae807
--- /dev/null
+++ b/apps/app/components/analytics/select/x-axis.tsx
@@ -0,0 +1,27 @@
+// ui
+import { CustomSelect } from "components/ui";
+// types
+import { IAnalyticsParams, TXAxisValues, TYAxisValues } from "types";
+// constants
+import { ANALYTICS_X_AXIS_VALUES, ANALYTICS_Y_AXIS_VALUES } from "constants/analytics";
+
+type Props = {
+  value: TXAxisValues;
+  onChange: (val: string) => void;
+};
+
+export const SelectXAxis: React.FC<Props> = ({ value, onChange }) => (
+  <CustomSelect
+    value={value}
+    label={<span>{ANALYTICS_X_AXIS_VALUES.find((v) => v.value === value)?.label}</span>}
+    onChange={onChange}
+    width="w-full"
+    maxHeight="lg"
+  >
+    {ANALYTICS_X_AXIS_VALUES.map((item) => (
+      <CustomSelect.Option key={item.value} value={item.value}>
+        {item.label}
+      </CustomSelect.Option>
+    ))}
+  </CustomSelect>
+);
diff --git a/apps/app/components/analytics/select/y-axis.tsx b/apps/app/components/analytics/select/y-axis.tsx
new file mode 100644
index 000000000..248852620
--- /dev/null
+++ b/apps/app/components/analytics/select/y-axis.tsx
@@ -0,0 +1,26 @@
+// ui
+import { CustomSelect } from "components/ui";
+// types
+import { IAnalyticsParams, TYAxisValues } from "types";
+// constants
+import { ANALYTICS_Y_AXIS_VALUES } from "constants/analytics";
+
+type Props = {
+  value: TYAxisValues;
+  onChange: () => void;
+};
+
+export const SelectYAxis: React.FC<Props> = ({ value, onChange }) => (
+  <CustomSelect
+    value={value}
+    label={<span>{ANALYTICS_Y_AXIS_VALUES.find((v) => v.value === value)?.label ?? "None"}</span>}
+    onChange={onChange}
+    width="w-full"
+  >
+    {ANALYTICS_Y_AXIS_VALUES.map((item) => (
+      <CustomSelect.Option key={item.value} value={item.value}>
+        {item.label}
+      </CustomSelect.Option>
+    ))}
+  </CustomSelect>
+);
diff --git a/apps/app/components/analytics/workspace-modal.tsx b/apps/app/components/analytics/workspace-modal.tsx
deleted file mode 100644
index fc0632421..000000000
--- a/apps/app/components/analytics/workspace-modal.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import React, { Fragment } from "react";
-
-// headless ui
-import { Tab } from "@headlessui/react";
-// components
-import { CustomAnalytics, ScopeAndDemand } from "components/analytics";
-// icons
-import { XMarkIcon } from "@heroicons/react/24/outline";
-
-type Props = {
-  isOpen: boolean;
-  onClose: () => void;
-};
-
-const tabsList = ["Scope and Demand", "Custom Analytics"];
-
-export const AnalyticsWorkspaceModal: React.FC<Props> = ({ isOpen, onClose }) => {
-  const handleClose = () => {
-    onClose();
-  };
-
-  return (
-    <>
-      <div
-        className={`absolute z-40 h-full w-full bg-brand-surface-1 p-2 ${
-          isOpen ? "block" : "hidden"
-        }`}
-      >
-        <div className="flex h-full flex-col overflow-hidden rounded-lg border border-brand-base bg-brand-surface-1 text-left">
-          <div className="flex items-center justify-between gap-2 border-b border-b-brand-base bg-brand-sidebar p-3 text-sm">
-            <h3>Workspace Analytics</h3>
-            <div>
-              <button
-                type="button"
-                className="grid place-items-center p-1 text-brand-secondary hover:text-brand-base"
-                onClick={handleClose}
-              >
-                <XMarkIcon className="h-4 w-4" />
-              </button>
-            </div>
-          </div>
-          <Tab.Group as={Fragment}>
-            <Tab.List className="space-x-2 border-b border-brand-base px-5 py-3">
-              {tabsList.map((tab) => (
-                <Tab
-                  key={tab}
-                  className={({ selected }) =>
-                    `rounded-3xl border border-brand-base px-4 py-2 text-xs hover:bg-brand-base ${
-                      selected ? "bg-brand-base" : ""
-                    }`
-                  }
-                >
-                  {tab}
-                </Tab>
-              ))}
-            </Tab.List>
-            <Tab.Panels as={Fragment}>
-              <Tab.Panel as={Fragment}>
-                <ScopeAndDemand isProjectLevel={false} />
-              </Tab.Panel>
-              <Tab.Panel as={Fragment}>
-                <CustomAnalytics />
-              </Tab.Panel>
-            </Tab.Panels>
-          </Tab.Group>
-        </div>
-      </div>
-    </>
-  );
-};
diff --git a/apps/app/components/icons/priority-icon.tsx b/apps/app/components/icons/priority-icon.tsx
index 0a888f802..58212ca5a 100644
--- a/apps/app/components/icons/priority-icon.tsx
+++ b/apps/app/components/icons/priority-icon.tsx
@@ -1,6 +1,8 @@
 export const getPriorityIcon = (priority: string | null, className?: string) => {
   if (!className || className === "") className = "text-xs flex items-center";
 
+  priority = priority?.toLowerCase() ?? null;
+
   switch (priority) {
     case "urgent":
       return <span className={`material-symbols-rounded ${className}`}>error</span>;
diff --git a/apps/app/components/workspace/sidebar-menu.tsx b/apps/app/components/workspace/sidebar-menu.tsx
index a7ecacc32..d163173fa 100644
--- a/apps/app/components/workspace/sidebar-menu.tsx
+++ b/apps/app/components/workspace/sidebar-menu.tsx
@@ -6,18 +6,10 @@ import Link from "next/link";
 // hooks
 import useTheme from "hooks/use-theme";
 // icons
-import { GridViewIcon, AssignmentClipboardIcon, TickMarkIcon, SettingIcon } from "components/icons";
 import { ChartBarIcon } from "@heroicons/react/24/outline";
+import { GridViewIcon, AssignmentClipboardIcon, TickMarkIcon, SettingIcon } from "components/icons";
 
-type Props = {
-  isAnalyticsModalOpen: boolean;
-  setAnalyticsModal: React.Dispatch<React.SetStateAction<boolean>>;
-};
-
-export const WorkspaceSidebarMenu: React.FC<Props> = ({
-  isAnalyticsModalOpen,
-  setAnalyticsModal,
-}) => {
+export const WorkspaceSidebarMenu = () => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
@@ -33,8 +25,7 @@ export const WorkspaceSidebarMenu: React.FC<Props> = ({
     {
       icon: ChartBarIcon,
       name: "Analytics",
-      highlight: isAnalyticsModalOpen,
-      onClick: () => setAnalyticsModal((prevData) => !prevData),
+      href: `/${workspaceSlug}/analytics`,
     },
     {
       icon: AssignmentClipboardIcon,
@@ -55,59 +46,33 @@ export const WorkspaceSidebarMenu: React.FC<Props> = ({
 
   return (
     <div className="flex w-full flex-col items-start justify-start gap-2 px-3 py-1">
-      {workspaceLinks(workspaceSlug as string).map((link, index) => {
-        if (link.href)
-          return (
-            <Link key={index} href={link.href}>
-              <a
-                className={`${
-                  (
-                    link.name === "Settings"
-                      ? router.asPath.includes(link.href)
-                      : router.asPath === link.href
-                  )
-                    ? "bg-brand-surface-2 text-brand-base"
-                    : "text-brand-secondary hover:bg-brand-surface-2 focus:bg-brand-surface-2"
-                } group flex w-full items-center gap-3 rounded-md p-2 text-sm font-medium outline-none ${
-                  sidebarCollapse ? "justify-center" : ""
-                }`}
-              >
-                <span className="grid h-5 w-5 flex-shrink-0 place-items-center">
-                  <link.icon
-                    className="text-brand-secondary"
-                    aria-hidden="true"
-                    height="20"
-                    width="20"
-                  />
-                </span>
-                {!sidebarCollapse && link.name}
-              </a>
-            </Link>
-          );
-        else
-          return (
-            <button
-              key={index}
-              type="button"
-              className={`group flex w-full items-center gap-3 rounded-md p-2 text-sm font-medium text-brand-secondary outline-none hover:bg-brand-surface-2 ${
-                sidebarCollapse ? "justify-center" : ""
-              } ${link.highlight ? "bg-brand-surface-2 text-brand-base" : ""}`}
-              onClick={() => {
-                if (link.onClick) link.onClick();
-              }}
-            >
-              <span className="grid h-5 w-5 flex-shrink-0 place-items-center">
-                <link.icon
-                  className="text-brand-secondary"
-                  aria-hidden="true"
-                  height="20"
-                  width="20"
-                />
-              </span>
-              {!sidebarCollapse && link.name}
-            </button>
-          );
-      })}
+      {workspaceLinks(workspaceSlug as string).map((link, index) => (
+        <Link key={index} href={link.href}>
+          <a
+            className={`${
+              (
+                link.name === "Settings"
+                  ? router.asPath.includes(link.href)
+                  : router.asPath === link.href
+              )
+                ? "bg-brand-surface-2 text-brand-base"
+                : "text-brand-secondary hover:bg-brand-surface-2 focus:bg-brand-surface-2"
+            } group flex w-full items-center gap-3 rounded-md p-2 text-sm font-medium outline-none ${
+              sidebarCollapse ? "justify-center" : ""
+            }`}
+          >
+            <span className="grid h-5 w-5 flex-shrink-0 place-items-center">
+              <link.icon
+                className="text-brand-secondary"
+                aria-hidden="true"
+                height="20"
+                width="20"
+              />
+            </span>
+            {!sidebarCollapse && link.name}
+          </a>
+        </Link>
+      ))}
     </div>
   );
 };
diff --git a/apps/app/constants/analytics.ts b/apps/app/constants/analytics.ts
index 97310c741..486a4e760 100644
--- a/apps/app/constants/analytics.ts
+++ b/apps/app/constants/analytics.ts
@@ -58,8 +58,8 @@ export const ANALYTICS_Y_AXIS_VALUES: { value: TYAxisValues; label: string }[] =
     label: "Issue Count",
   },
   {
-    value: "effort",
-    label: "Effort",
+    value: "estimate",
+    label: "Estimate",
   },
 ];
 
diff --git a/apps/app/constants/fetch-keys.ts b/apps/app/constants/fetch-keys.ts
index 202b87dc1..044dad38b 100644
--- a/apps/app/constants/fetch-keys.ts
+++ b/apps/app/constants/fetch-keys.ts
@@ -169,10 +169,10 @@ export const ESTIMATE_DETAILS = (estimateId: string) =>
 
 // analytics
 export const ANALYTICS = (workspaceSlug: string, params: IAnalyticsParams) =>
-  `ANALYTICS${workspaceSlug.toUpperCase()}_${params.x_axis}_${params.y_axis}_${params.segment}_${
-    params.project
-  }`;
+  `ANALYTICS${workspaceSlug.toUpperCase()}_${params.x_axis}_${params.y_axis}_${
+    params.segment
+  }_${params.project?.toString()}`;
 export const DEFAULT_ANALYTICS = (workspaceSlug: string, params?: Partial<IAnalyticsParams>) =>
-  `DEFAULT_ANALYTICS_${workspaceSlug.toUpperCase()}_${params?.project}_${params?.cycle}_${
-    params?.module
-  }`;
+  `DEFAULT_ANALYTICS_${workspaceSlug.toUpperCase()}_${params?.project?.toString()}_${
+    params?.cycle
+  }_${params?.module}`;
diff --git a/apps/app/helpers/analytics.helper.ts b/apps/app/helpers/analytics.helper.ts
index b81d71d51..1caecde0d 100644
--- a/apps/app/helpers/analytics.helper.ts
+++ b/apps/app/helpers/analytics.helper.ts
@@ -1,5 +1,7 @@
 // nivo
 import { BarDatum } from "@nivo/bar";
+// helpers
+import { capitalizeFirstLetter } from "helpers/string.helper";
 // types
 import { IAnalyticsData, IAnalyticsParams, IAnalyticsResponse } from "types";
 // constants
@@ -17,7 +19,7 @@ export const convertResponseToBarGraphData = (
   const data: BarDatum[] = [];
 
   let xAxisKeys: string[] = [];
-  const yAxisKey = params.y_axis === "issue_count" ? "count" : "effort";
+  const yAxisKey = params.y_axis === "issue_count" ? "count" : "estimate";
 
   Object.keys(response).forEach((key) => {
     const segments: { [key: string]: number } = {};
@@ -31,7 +33,11 @@ export const convertResponseToBarGraphData = (
       });
 
       data.push({
-        name: DATE_KEYS.includes(params.x_axis) ? renderMonthAndYear(key) : key,
+        name: DATE_KEYS.includes(params.x_axis)
+          ? renderMonthAndYear(key)
+          : params.x_axis === "priority" || params.x_axis === "state__group"
+          ? capitalizeFirstLetter(key)
+          : key,
         ...segments,
       });
     } else {
@@ -42,6 +48,8 @@ export const convertResponseToBarGraphData = (
       data.push({
         name: DATE_KEYS.includes(params.x_axis)
           ? renderMonthAndYear(item.dimension)
+          : params.x_axis === "priority" || params.x_axis === "state__group"
+          ? capitalizeFirstLetter(item.dimension ?? "None")
           : item.dimension ?? "None",
         [yAxisKey]: item[yAxisKey] ?? 0,
       });
@@ -64,17 +72,17 @@ export const generateBarColor = (
   if (params[type] === "state__name" || params[type] === "labels__name")
     color = analytics?.extras?.colors.find((c) => c.name === value)?.color;
 
-  if (params[type] === "state__group") color = STATE_GROUP_COLORS[value];
+  if (params[type] === "state__group") color = STATE_GROUP_COLORS[value.toLowerCase()];
 
   if (params[type] === "priority")
     color =
-      value === "urgent"
+      value === "Urgent"
         ? "#ef4444"
-        : value === "high"
+        : value === "High"
         ? "#f97316"
-        : value === "medium"
+        : value === "Medium"
         ? "#eab308"
-        : value === "low"
+        : value === "Low"
         ? "#22c55e"
         : "#ced4da";
 
diff --git a/apps/app/layouts/app-layout/app-sidebar.tsx b/apps/app/layouts/app-layout/app-sidebar.tsx
index b704392a5..a24c4e2d0 100644
--- a/apps/app/layouts/app-layout/app-sidebar.tsx
+++ b/apps/app/layouts/app-layout/app-sidebar.tsx
@@ -11,16 +11,9 @@ import { ProjectSidebarList } from "components/project";
 export interface SidebarProps {
   toggleSidebar: boolean;
   setToggleSidebar: React.Dispatch<React.SetStateAction<boolean>>;
-  isAnalyticsModalOpen: boolean;
-  setAnalyticsModal: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
-const Sidebar: React.FC<SidebarProps> = ({
-  toggleSidebar,
-  setToggleSidebar,
-  isAnalyticsModalOpen,
-  setAnalyticsModal,
-}) => {
+const Sidebar: React.FC<SidebarProps> = ({ toggleSidebar, setToggleSidebar }) => {
   // theme
   const { collapsed: sidebarCollapse } = useTheme();
 
@@ -34,10 +27,7 @@ const Sidebar: React.FC<SidebarProps> = ({
     >
       <div className="flex h-full flex-1 flex-col">
         <WorkspaceSidebarDropdown />
-        <WorkspaceSidebarMenu
-          isAnalyticsModalOpen={isAnalyticsModalOpen}
-          setAnalyticsModal={setAnalyticsModal}
-        />
+        <WorkspaceSidebarMenu />
         <ProjectSidebarList />
         <WorkspaceHelpSection setSidebarActive={setToggleSidebar} />
       </div>
diff --git a/apps/app/layouts/auth-layout/project-authorization-wrapper.tsx b/apps/app/layouts/auth-layout/project-authorization-wrapper.tsx
index 969cace9a..eec8a8f2e 100644
--- a/apps/app/layouts/auth-layout/project-authorization-wrapper.tsx
+++ b/apps/app/layouts/auth-layout/project-authorization-wrapper.tsx
@@ -13,7 +13,6 @@ import AppHeader from "layouts/app-layout/app-header";
 import AppSidebar from "layouts/app-layout/app-sidebar";
 // components
 import { NotAuthorizedView, JoinProject } from "components/auth-screens";
-import { AnalyticsWorkspaceModal } from "components/analytics";
 import { CommandPalette } from "components/command-palette";
 // ui
 import { PrimaryButton, Spinner } from "components/ui";
@@ -53,13 +52,10 @@ const ProjectAuthorizationWrapped: React.FC<Props> = ({
   right,
 }) => {
   const [toggleSidebar, setToggleSidebar] = useState(false);
-  const [analyticsModal, setAnalyticsModal] = useState(false);
 
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
-  const { issueView } = useIssuesView();
-
   const { loading, error, memberRole: memberType } = useProjectMyMembership();
 
   const settingsLayout = router.pathname.includes("/settings");
@@ -68,12 +64,7 @@ const ProjectAuthorizationWrapped: React.FC<Props> = ({
     <Container meta={meta}>
       <CommandPalette />
       <div className="relative flex h-screen w-full overflow-hidden">
-        <AppSidebar
-          toggleSidebar={toggleSidebar}
-          setToggleSidebar={setToggleSidebar}
-          isAnalyticsModalOpen={analyticsModal}
-          setAnalyticsModal={setAnalyticsModal}
-        />
+        <AppSidebar toggleSidebar={toggleSidebar} setToggleSidebar={setToggleSidebar} />
 
         {loading ? (
           <div className="grid h-full w-full place-items-center p-4">
@@ -121,12 +112,6 @@ const ProjectAuthorizationWrapped: React.FC<Props> = ({
                 : "bg-brand-base"
             }`}
           >
-            {analyticsModal && (
-              <AnalyticsWorkspaceModal
-                isOpen={analyticsModal}
-                onClose={() => setAnalyticsModal(false)}
-              />
-            )}
             {!noHeader && (
               <AppHeader
                 breadcrumbs={breadcrumbs}
diff --git a/apps/app/layouts/auth-layout/workspace-authorization-wrapper.tsx b/apps/app/layouts/auth-layout/workspace-authorization-wrapper.tsx
index 5029131cb..4bc5156b7 100644
--- a/apps/app/layouts/auth-layout/workspace-authorization-wrapper.tsx
+++ b/apps/app/layouts/auth-layout/workspace-authorization-wrapper.tsx
@@ -14,7 +14,6 @@ import AppHeader from "layouts/app-layout/app-header";
 import { UserAuthorizationLayout } from "./user-authorization-wrapper";
 // components
 import { NotAuthorizedView, NotAWorkspaceMember } from "components/auth-screens";
-import { AnalyticsWorkspaceModal } from "components/analytics";
 import { CommandPalette } from "components/command-palette";
 // icons
 import { PrimaryButton, Spinner } from "components/ui";
@@ -49,7 +48,6 @@ export const WorkspaceAuthorizationLayout: React.FC<Props> = ({
   right,
 }) => {
   const [toggleSidebar, setToggleSidebar] = useState(false);
-  const [analyticsModal, setAnalyticsModal] = useState(false);
 
   const router = useRouter();
   const { workspaceSlug } = router.query;
@@ -93,12 +91,7 @@ export const WorkspaceAuthorizationLayout: React.FC<Props> = ({
       <Container meta={meta}>
         <CommandPalette />
         <div className="relative flex h-screen w-full overflow-hidden">
-          <AppSidebar
-            toggleSidebar={toggleSidebar}
-            setToggleSidebar={setToggleSidebar}
-            isAnalyticsModalOpen={analyticsModal}
-            setAnalyticsModal={setAnalyticsModal}
-          />
+          <AppSidebar toggleSidebar={toggleSidebar} setToggleSidebar={setToggleSidebar} />
           {settingsLayout && (memberType?.isGuest || memberType?.isViewer) ? (
             <NotAuthorizedView
               actionButton={
@@ -122,12 +115,6 @@ export const WorkspaceAuthorizationLayout: React.FC<Props> = ({
                   : "bg-brand-base"
               }`}
             >
-              {analyticsModal && (
-                <AnalyticsWorkspaceModal
-                  isOpen={analyticsModal}
-                  onClose={() => setAnalyticsModal(false)}
-                />
-              )}
               {!noHeader && (
                 <AppHeader
                   breadcrumbs={breadcrumbs}
diff --git a/apps/app/pages/[workspaceSlug]/analytics.tsx b/apps/app/pages/[workspaceSlug]/analytics.tsx
new file mode 100644
index 000000000..b32399448
--- /dev/null
+++ b/apps/app/pages/[workspaceSlug]/analytics.tsx
@@ -0,0 +1,108 @@
+import React, { Fragment } from "react";
+
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// react-hook-form
+import { useForm } from "react-hook-form";
+// headless ui
+import { Tab } from "@headlessui/react";
+// services
+import analyticsService from "services/analytics.service";
+// layouts
+import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
+// components
+import { CustomAnalytics, ScopeAndDemand } from "components/analytics";
+// ui
+import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
+// types
+import { IAnalyticsParams } from "types";
+// fetch-keys
+import { ANALYTICS } from "constants/fetch-keys";
+
+const defaultValues: IAnalyticsParams = {
+  x_axis: "priority",
+  y_axis: "issue_count",
+  segment: null,
+  project: null,
+};
+
+const tabsList = ["Scope and Demand", "Custom Analytics"];
+
+const Analytics = () => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { control, watch, setValue } = useForm<IAnalyticsParams>({ defaultValues });
+
+  const params: IAnalyticsParams = {
+    x_axis: watch("x_axis"),
+    y_axis: watch("y_axis"),
+    segment: watch("segment"),
+    project: watch("project"),
+  };
+
+  const { data: analytics, error: analyticsError } = useSWR(
+    workspaceSlug ? ANALYTICS(workspaceSlug.toString(), params) : null,
+    workspaceSlug ? () => analyticsService.getAnalytics(workspaceSlug.toString(), params) : null
+  );
+
+  return (
+    <WorkspaceAuthorizationLayout
+      breadcrumbs={
+        <Breadcrumbs>
+          <BreadcrumbItem title="Workspace Analytics" />
+        </Breadcrumbs>
+      }
+      // right={
+      //   <PrimaryButton
+      //     className="flex items-center gap-2"
+      //     onClick={() => {
+      //       const e = new KeyboardEvent("keydown", { key: "p" });
+      //       document.dispatchEvent(e);
+      //     }}
+      //   >
+      //     <PlusIcon className="h-4 w-4" />
+      //     Save Analytics
+      //   </PrimaryButton>
+      // }
+    >
+      <div className="h-full flex flex-col overflow-hidden bg-brand-base">
+        <Tab.Group as={Fragment}>
+          <Tab.List as="div" className="space-x-2 border-b border-brand-base px-5 py-3">
+            {tabsList.map((tab) => (
+              <Tab
+                key={tab}
+                className={({ selected }) =>
+                  `rounded-3xl border border-brand-base px-4 py-2 text-xs hover:bg-brand-surface-2 ${
+                    selected ? "bg-brand-surface-2" : ""
+                  }`
+                }
+              >
+                {tab}
+              </Tab>
+            ))}
+          </Tab.List>
+          <Tab.Panels as={Fragment}>
+            <Tab.Panel as={Fragment}>
+              <ScopeAndDemand fullScreen />
+            </Tab.Panel>
+            <Tab.Panel as={Fragment}>
+              <CustomAnalytics
+                analytics={analytics}
+                analyticsError={analyticsError}
+                params={params}
+                control={control}
+                setValue={setValue}
+                fullScreen
+              />
+            </Tab.Panel>
+          </Tab.Panels>
+        </Tab.Group>
+      </div>
+    </WorkspaceAuthorizationLayout>
+  );
+};
+
+export default Analytics;
diff --git a/apps/app/services/analytics.service.ts b/apps/app/services/analytics.service.ts
index 7cdb5860c..0b38f8c57 100644
--- a/apps/app/services/analytics.service.ts
+++ b/apps/app/services/analytics.service.ts
@@ -18,7 +18,10 @@ class AnalyticsServices extends APIService {
 
   async getAnalytics(workspaceSlug: string, params: IAnalyticsParams): Promise<IAnalyticsResponse> {
     return this.get(`/api/workspaces/${workspaceSlug}/analytics/`, {
-      params,
+      params: {
+        ...params,
+        project: params?.project ? params.project.toString() : null,
+      },
     })
       .then((response) => response?.data)
       .catch((error) => {
@@ -31,7 +34,10 @@ class AnalyticsServices extends APIService {
     params?: Partial<IAnalyticsParams>
   ): Promise<IDefaultAnalyticsResponse> {
     return this.get(`/api/workspaces/${workspaceSlug}/default-analytics/`, {
-      params,
+      params: {
+        ...params,
+        project: params?.project ? params.project.toString() : null,
+      },
     })
       .then((response) => response?.data)
       .catch((error) => {
diff --git a/apps/app/types/analytics.d.ts b/apps/app/types/analytics.d.ts
index 8501c34a5..eb5d75e58 100644
--- a/apps/app/types/analytics.d.ts
+++ b/apps/app/types/analytics.d.ts
@@ -11,7 +11,7 @@ export interface IAnalyticsData {
     dimension: string | null;
     segment?: string;
     count?: number;
-    effort?: number | null;
+    estimate?: number | null;
   }[];
 }
 
@@ -34,13 +34,13 @@ export type TXAxisValues =
   | "created_at"
   | "completed_at";
 
-export type TYAxisValues = "issue_count" | "effort";
+export type TYAxisValues = "issue_count" | "estimate";
 
 export interface IAnalyticsParams {
   x_axis: TXAxisValues;
   y_axis: TYAxisValues;
   segment?: TXAxisValues | null;
-  project?: string | null;
+  project?: string[] | null;
   cycle?: string | null;
   module?: string | null;
 }
@@ -59,7 +59,8 @@ export interface IExportAnalyticsFormData {
 
 export interface IDefaultAnalyticsUser {
   assignees__avatar: string | null;
-  assignees__email: string;
+  assignees__first_name: string;
+  assignees__last_name: string;
   count: number;
 }
 
@@ -68,7 +69,8 @@ export interface IDefaultAnalyticsResponse {
   most_issue_closed_user: IDefaultAnalyticsUser[];
   most_issue_created_user: {
     created_by__avatar: string | null;
-    created_by__email: string;
+    created_by__first_name: string;
+    created_by__last_name: string;
     count: number;
   }[];
   open_estimate_sum: number;
diff --git a/apps/app/types/projects.d.ts b/apps/app/types/projects.d.ts
index e3d04e642..11c76ab61 100644
--- a/apps/app/types/projects.d.ts
+++ b/apps/app/types/projects.d.ts
@@ -27,6 +27,9 @@ export interface IProject {
   network: number;
   project_lead: IUser | string | null;
   slug: string;
+  total_cycles: number;
+  total_members: number;
+  total_modules: number;
   updated_at: Date;
   updated_by: string;
   workspace: IWorkspace | string;

From 84a0f6f77efe634f97636b72c07d34c2996b9e05 Mon Sep 17 00:00:00 2001
From: pablohashescobar <118773738+pablohashescobar@users.noreply.github.com>
Date: Tue, 16 May 2023 10:50:14 +0530
Subject: [PATCH 32/81] chore: rename effort to estimate (#1053)

---
 apiserver/plane/bgtasks/analytic_plot_export.py | 6 +++---
 apiserver/plane/utils/analytics_plot.py         | 8 ++++----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/apiserver/plane/bgtasks/analytic_plot_export.py b/apiserver/plane/bgtasks/analytic_plot_export.py
index ca8ee1ab6..67df70792 100644
--- a/apiserver/plane/bgtasks/analytic_plot_export.py
+++ b/apiserver/plane/bgtasks/analytic_plot_export.py
@@ -28,7 +28,7 @@ row_mapping = {
     "created_at": "Created At",
     "issue_count": "Issue Count",
     "priority": "Priority",
-    "effort": "Effort",
+    "estimate": "Estimate",
 }
 
 
@@ -46,7 +46,7 @@ def analytic_export_task(email, data, slug):
             queryset=queryset, x_axis=x_axis, y_axis=y_axis, segment=segment
         )
 
-        key = "count" if y_axis == "issue_count" else "effort"
+        key = "count" if y_axis == "issue_count" else "estimate"
 
         if segment:
             segment_zero = []
@@ -114,7 +114,7 @@ def analytic_export_task(email, data, slug):
                             item,
                             distribution.get(item)[0].get("count")
                             if y_axis == "issue_count"
-                            else distribution.get(item)[0].get("effort"),
+                            else distribution.get(item)[0].get("estimate"),
                         ]
                     )
                 )
diff --git a/apiserver/plane/utils/analytics_plot.py b/apiserver/plane/utils/analytics_plot.py
index 838f535ff..7106769a6 100644
--- a/apiserver/plane/utils/analytics_plot.py
+++ b/apiserver/plane/utils/analytics_plot.py
@@ -50,14 +50,14 @@ def build_graph_plot(queryset, x_axis, y_axis, segment=None):
 
         queryset = queryset.annotate(count=Count("*")).order_by("dimension")
 
-    if y_axis == "effort":
-        queryset = queryset.annotate(effort=Sum("estimate_point")).order_by(x_axis)
+    if y_axis == "estimate":
+        queryset = queryset.annotate(estimate=Sum("estimate_point")).order_by(x_axis)
         if segment:
             queryset = queryset.annotate(segment=F(segment)).values(
-                "dimension", "segment", "effort"
+                "dimension", "segment", "estimate"
             )
         else:
-            queryset = queryset.values("dimension", "effort")
+            queryset = queryset.values("dimension", "estimate")
 
     result_values = list(queryset)
     grouped_data = {}

From c060f7db30b90751e352bee30725766248b99254 Mon Sep 17 00:00:00 2001
From: pablohashescobar <118773738+pablohashescobar@users.noreply.github.com>
Date: Tue, 16 May 2023 10:50:26 +0530
Subject: [PATCH 33/81] chore: user first name and last name for default
 analytics (#1054)

---
 apiserver/plane/api/views/analytic.py | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apiserver/plane/api/views/analytic.py b/apiserver/plane/api/views/analytic.py
index bd9ea69bf..2edb24637 100644
--- a/apiserver/plane/api/views/analytic.py
+++ b/apiserver/plane/api/views/analytic.py
@@ -237,21 +237,21 @@ class DefaultAnalyticsEndpoint(BaseAPIView):
             )
             most_issue_created_user = (
                 queryset.exclude(created_by=None)
-                .values("created_by__email", "created_by__avatar")
+                .values("created_by__first_name", "created_by__last_name", "created_by__avatar")
                 .annotate(count=Count("id"))
                 .order_by("-count")
             )[:5]
 
             most_issue_closed_user = (
                 queryset.filter(completed_at__isnull=False, assignees__isnull=False)
-                .values("assignees__email", "assignees__avatar")
+                .values("assignees__first_name", "assignees__last_name", "assignees__avatar")
                 .annotate(count=Count("id"))
                 .order_by("-count")
             )[:5]
 
             pending_issue_user = (
                 queryset.filter(completed_at__isnull=True)
-                .values("assignees__email", "assignees__avatar")
+                .values("assignees__first_name", "assignees__last_name", "assignees__avatar")
                 .annotate(count=Count("id"))
                 .order_by("-count")
             )

From d575e8ec6b148cc0efa41d4768745b6c747cdc2b Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Tue, 16 May 2023 15:11:40 +0530
Subject: [PATCH 34/81] chore: x-axis tick values for assignees (#1060)

* style: new custom analytics ui

* fix: x-axis assignee tick values

* chore: assignee names in the custom analytics table
---
 .../custom-analytics/graph/index.tsx          |  45 ++++-
 .../analytics/custom-analytics/select-bar.tsx |   4 +-
 .../analytics/custom-analytics/sidebar.tsx    |   8 +-
 .../analytics/custom-analytics/table.tsx      | 189 ++++++++++--------
 .../analytics/scope-and-demand/demand.tsx     |   2 +-
 .../scope-and-demand/leaderboard.tsx          |   7 +-
 .../scope-and-demand/scope-and-demand.tsx     |   2 +
 .../components/analytics/select/project.tsx   |   1 -
 .../components/analytics/select/segment.tsx   |  59 +++---
 .../components/analytics/select/x-axis.tsx    |  46 +++--
 .../components/analytics/select/y-axis.tsx    |   2 +-
 apps/app/types/analytics.d.ts                 |   8 +
 12 files changed, 233 insertions(+), 140 deletions(-)

diff --git a/apps/app/components/analytics/custom-analytics/graph/index.tsx b/apps/app/components/analytics/custom-analytics/graph/index.tsx
index 419294c30..6ae28f02b 100644
--- a/apps/app/components/analytics/custom-analytics/graph/index.tsx
+++ b/apps/app/components/analytics/custom-analytics/graph/index.tsx
@@ -68,7 +68,50 @@ export const AnalyticsGraph: React.FC<Props> = ({
       customYAxisTickValues={generateYAxisTickValues()}
       tooltip={(datum) => <CustomTooltip datum={datum} params={params} />}
       height={fullScreen ? "400px" : "300px"}
-      margin={{ right: 20, bottom: longestXAxisLabel.length * 5 + 20 }}
+      margin={{
+        right: 20,
+        bottom: params.x_axis === "assignees__email" ? 50 : longestXAxisLabel.length * 5 + 20,
+      }}
+      axisBottom={{
+        tickSize: 0,
+        tickPadding: 10,
+        tickRotation: barGraphData.data.length > 7 ? -45 : 0,
+        renderTick:
+          params.x_axis === "assignees__email"
+            ? (datum) => {
+                const avatar = analytics.extras.assignee_details?.find(
+                  (a) => a.assignees__email === datum.value
+                )?.assignees__avatar;
+
+                console.log(avatar);
+
+                if (avatar && avatar !== "")
+                  return (
+                    <g transform={`translate(${datum.x},${datum.y})`}>
+                      <image
+                        x={-8}
+                        y={10}
+                        width={16}
+                        height={16}
+                        xlinkHref={avatar}
+                        style={{ clipPath: "circle(50%)" }}
+                      />
+                    </g>
+                  );
+                else
+                  return (
+                    <g transform={`translate(${datum.x},${datum.y})`}>
+                      <circle cy={18} r={8} fill="#374151" />
+                      <text x={0} y={21} textAnchor="middle" fontSize={9} fill="#ffffff">
+                        {datum.value && datum.value !== "None"
+                          ? `${datum.value}`.toUpperCase()[0]
+                          : "?"}
+                      </text>
+                    </g>
+                  );
+              }
+            : undefined,
+      }}
       theme={{
         background: "rgb(var(--color-bg-base))",
         axis: {},
diff --git a/apps/app/components/analytics/custom-analytics/select-bar.tsx b/apps/app/components/analytics/custom-analytics/select-bar.tsx
index 5f667b035..7286a9cf8 100644
--- a/apps/app/components/analytics/custom-analytics/select-bar.tsx
+++ b/apps/app/components/analytics/custom-analytics/select-bar.tsx
@@ -23,9 +23,9 @@ export const AnalyticsSelectBar: React.FC<Props> = ({
   isProjectLevel,
 }) => (
   <div
-    className={`grid items-center gap-4 p-5 pb-0.5 ${
+    className={`grid items-center gap-4 px-5 py-2.5 ${
       isProjectLevel ? "grid-cols-3" : "grid-cols-2"
-    } ${fullScreen ? "lg:grid-cols-4" : ""}`}
+    } ${fullScreen ? "lg:grid-cols-4 md:py-5" : ""}`}
   >
     {!isProjectLevel && (
       <div>
diff --git a/apps/app/components/analytics/custom-analytics/sidebar.tsx b/apps/app/components/analytics/custom-analytics/sidebar.tsx
index e0b88b23b..6d92424a0 100644
--- a/apps/app/components/analytics/custom-analytics/sidebar.tsx
+++ b/apps/app/components/analytics/custom-analytics/sidebar.tsx
@@ -108,9 +108,9 @@ export const AnalyticsSidebar: React.FC<Props> = ({
 
   return (
     <div
-      className={`p-5 pb-0 flex flex-col space-y-2 md:space-y-4 overflow-hidden ${
+      className={`p-5 pb-0 flex flex-col space-y-2 ${
         fullScreen
-          ? "pb-5 border-l border-brand-base md:h-full md:pb-5 md:border-l md:border-brand-base"
+          ? "pb-5 border-l border-brand-base md:h-full md:pb-5 md:border-l md:border-brand-base md:space-y-4 overflow-hidden"
           : ""
       }`}
     >
@@ -176,7 +176,7 @@ export const AnalyticsSidebar: React.FC<Props> = ({
             {projectId ? (
               cycleId && cycleDetails ? (
                 <div className="hidden md:block h-full overflow-y-auto">
-                  <h4 className="font-medium break-all">{cycleDetails.name}</h4>
+                  <h4 className="font-medium break-all">Analytics for {cycleDetails.name}</h4>
                   <div className="space-y-4 mt-4">
                     <div className="flex items-center gap-2 text-xs">
                       <h6 className="text-brand-secondary">Lead</h6>
@@ -204,7 +204,7 @@ export const AnalyticsSidebar: React.FC<Props> = ({
                 </div>
               ) : moduleId && moduleDetails ? (
                 <div className="hidden md:block h-full overflow-y-auto">
-                  <h4 className="font-medium break-all">{moduleDetails.name}</h4>
+                  <h4 className="font-medium break-all">Analytics for {moduleDetails.name}</h4>
                   <div className="space-y-4 mt-4">
                     <div className="flex items-center gap-2 text-xs">
                       <h6 className="text-brand-secondary">Lead</h6>
diff --git a/apps/app/components/analytics/custom-analytics/table.tsx b/apps/app/components/analytics/custom-analytics/table.tsx
index 900f3c692..df3953b35 100644
--- a/apps/app/components/analytics/custom-analytics/table.tsx
+++ b/apps/app/components/analytics/custom-analytics/table.tsx
@@ -21,96 +21,115 @@ type Props = {
   yAxisKey: "count" | "estimate";
 };
 
-export const AnalyticsTable: React.FC<Props> = ({ analytics, barGraphData, params, yAxisKey }) => (
-  <div className="flow-root">
-    <div className="overflow-x-auto">
-      <div className="inline-block min-w-full align-middle">
-        <table className="min-w-full divide-y divide-brand-base whitespace-nowrap border-y border-brand-base">
-          <thead className="bg-brand-surface-2">
-            <tr className="divide-x divide-brand-base text-sm text-brand-base">
-              <th scope="col" className="py-3 px-2.5 text-left font-medium">
-                {ANALYTICS_X_AXIS_VALUES.find((v) => v.value === params.x_axis)?.label}
-              </th>
-              {params.segment ? (
-                barGraphData.xAxisKeys.map((key) => (
-                  <th
-                    key={`segment-${key}`}
-                    scope="col"
-                    className={`px-2.5 py-3 text-left font-medium ${
-                      params.segment === "priority" || params.segment === "state__group"
+export const AnalyticsTable: React.FC<Props> = ({ analytics, barGraphData, params, yAxisKey }) => {
+  const renderAssigneeName = (email: string): string => {
+    const assignee = analytics.extras.assignee_details.find((a) => a.assignees__email === email);
+
+    if (!assignee) return "No assignee";
+
+    if (assignee.assignees__first_name !== "")
+      return assignee.assignees__first_name + " " + assignee.assignees__last_name;
+
+    return email;
+  };
+
+  return (
+    <div className="flow-root">
+      <div className="overflow-x-auto">
+        <div className="inline-block min-w-full align-middle">
+          <table className="min-w-full divide-y divide-brand-base whitespace-nowrap border-y border-brand-base">
+            <thead className="bg-brand-surface-2">
+              <tr className="divide-x divide-brand-base text-sm text-brand-base">
+                <th scope="col" className="py-3 px-2.5 text-left font-medium">
+                  {ANALYTICS_X_AXIS_VALUES.find((v) => v.value === params.x_axis)?.label}
+                </th>
+                {params.segment ? (
+                  barGraphData.xAxisKeys.map((key) => (
+                    <th
+                      key={`segment-${key}`}
+                      scope="col"
+                      className={`px-2.5 py-3 text-left font-medium ${
+                        params.segment === "priority" || params.segment === "state__group"
+                          ? "capitalize"
+                          : ""
+                      }`}
+                    >
+                      <div className="flex items-center gap-2">
+                        {params.segment === "priority" ? (
+                          getPriorityIcon(key)
+                        ) : (
+                          <span
+                            className="h-3 w-3 flex-shrink-0 rounded"
+                            style={{
+                              backgroundColor: generateBarColor(key, analytics, params, "segment"),
+                            }}
+                          />
+                        )}
+                        {DATE_KEYS.includes(params.segment ?? "")
+                          ? renderMonthAndYear(key)
+                          : params.segment === "assignees__email"
+                          ? renderAssigneeName(key)
+                          : key}
+                      </div>
+                    </th>
+                  ))
+                ) : (
+                  <th scope="col" className="py-3 px-2.5 text-left font-medium sm:pr-0">
+                    {ANALYTICS_Y_AXIS_VALUES.find((v) => v.value === params.y_axis)?.label}
+                  </th>
+                )}
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-brand-base">
+              {barGraphData.data.map((item, index) => (
+                <tr
+                  key={`table-row-${index}`}
+                  className="divide-x divide-brand-base text-xs text-brand-secondary"
+                >
+                  <td
+                    className={`flex items-center gap-2 whitespace-nowrap py-2 px-2.5 font-medium ${
+                      params.x_axis === "priority" || params.x_axis === "state__group"
                         ? "capitalize"
                         : ""
                     }`}
                   >
-                    <div className="flex items-center gap-2">
-                      {params.segment === "priority" ? (
-                        getPriorityIcon(key)
-                      ) : (
-                        <span
-                          className="h-3 w-3 flex-shrink-0 rounded"
-                          style={{
-                            backgroundColor: generateBarColor(key, analytics, params, "segment"),
-                          }}
-                        />
-                      )}
-                      {DATE_KEYS.includes(params.segment ?? "") ? renderMonthAndYear(key) : key}
-                    </div>
-                  </th>
-                ))
-              ) : (
-                <th scope="col" className="py-3 px-2.5 text-left font-medium sm:pr-0">
-                  {ANALYTICS_Y_AXIS_VALUES.find((v) => v.value === params.y_axis)?.label}
-                </th>
-              )}
-            </tr>
-          </thead>
-          <tbody className="divide-y divide-brand-base">
-            {barGraphData.data.map((item, index) => (
-              <tr
-                key={`table-row-${index}`}
-                className="divide-x divide-brand-base text-xs text-brand-secondary"
-              >
-                <td
-                  className={`flex items-center gap-2 whitespace-nowrap py-2 px-2.5 font-medium ${
-                    params.x_axis === "priority" || params.x_axis === "state__group"
-                      ? "capitalize"
-                      : ""
-                  }`}
-                >
-                  {params.x_axis === "priority" ? (
-                    getPriorityIcon(`${item.name}`)
+                    {params.x_axis === "priority" ? (
+                      getPriorityIcon(`${item.name}`)
+                    ) : (
+                      <span
+                        className="h-3 w-3 rounded"
+                        style={{
+                          backgroundColor: generateBarColor(
+                            `${item.name}`,
+                            analytics,
+                            params,
+                            "x_axis"
+                          ),
+                        }}
+                      />
+                    )}
+                    {params.x_axis === "assignees__email"
+                      ? renderAssigneeName(`${item.name}`)
+                      : addSpaceIfCamelCase(`${item.name}`)}
+                  </td>
+                  {params.segment ? (
+                    barGraphData.xAxisKeys.map((key, index) => (
+                      <td
+                        key={`segment-value-${index}`}
+                        className="whitespace-nowrap py-2 px-2.5 sm:pr-0"
+                      >
+                        {item[key] ?? 0}
+                      </td>
+                    ))
                   ) : (
-                    <span
-                      className="h-3 w-3 rounded"
-                      style={{
-                        backgroundColor: generateBarColor(
-                          `${item.name}`,
-                          analytics,
-                          params,
-                          "x_axis"
-                        ),
-                      }}
-                    />
+                    <td className="whitespace-nowrap py-2 px-2.5 sm:pr-0">{item[yAxisKey]}</td>
                   )}
-                  {addSpaceIfCamelCase(`${item.name}`)}
-                </td>
-                {params.segment ? (
-                  barGraphData.xAxisKeys.map((key, index) => (
-                    <td
-                      key={`segment-value-${index}`}
-                      className="whitespace-nowrap py-2 px-2.5 sm:pr-0"
-                    >
-                      {item[key] ?? 0}
-                    </td>
-                  ))
-                ) : (
-                  <td className="whitespace-nowrap py-2 px-2.5 sm:pr-0">{item[yAxisKey]}</td>
-                )}
-              </tr>
-            ))}
-          </tbody>
-        </table>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
       </div>
     </div>
-  </div>
-);
+  );
+};
diff --git a/apps/app/components/analytics/scope-and-demand/demand.tsx b/apps/app/components/analytics/scope-and-demand/demand.tsx
index 1ab750c93..4a454b564 100644
--- a/apps/app/components/analytics/scope-and-demand/demand.tsx
+++ b/apps/app/components/analytics/scope-and-demand/demand.tsx
@@ -37,7 +37,7 @@ export const AnalyticsDemand: React.FC<Props> = ({ defaultAnalytics }) => (
               </div>
               <p className="text-brand-secondary">{percentage}%</p>
             </div>
-            <div className="bar relative h-1 w-full rounded bg-brand-base">
+            <div className="bar relative h-1 w-full rounded bg-brand-surface-2">
               <div
                 className="absolute top-0 left-0 h-1 rounded duration-300"
                 style={{
diff --git a/apps/app/components/analytics/scope-and-demand/leaderboard.tsx b/apps/app/components/analytics/scope-and-demand/leaderboard.tsx
index eb9ae8086..21a278709 100644
--- a/apps/app/components/analytics/scope-and-demand/leaderboard.tsx
+++ b/apps/app/components/analytics/scope-and-demand/leaderboard.tsx
@@ -3,6 +3,7 @@ import Image from "next/image";
 type Props = {
   users: {
     avatar: string | null;
+    email: string | null;
     firstName: string;
     lastName: string;
     count: number;
@@ -14,8 +15,8 @@ export const AnalyticsLeaderboard: React.FC<Props> = ({ users, title }) => (
   <div className="p-3 border border-brand-base rounded-[10px]">
     <h6 className="text-base font-medium">{title}</h6>
     <div className="mt-3 space-y-3">
-      {users.map((user, index) => (
-        <div key={`user-${index}`} className="flex items-start justify-between gap-4 text-xs">
+      {users.map((user) => (
+        <div key={user.email ?? "None"} className="flex items-start justify-between gap-4 text-xs">
           <div className="flex items-center gap-2">
             {user && user.avatar && user.avatar !== "" ? (
               <div className="rounded-full h-4 w-4 flex-shrink-0">
@@ -24,7 +25,7 @@ export const AnalyticsLeaderboard: React.FC<Props> = ({ users, title }) => (
                   height="100%"
                   width="100%"
                   className="rounded-full"
-                  alt={user.firstName + " " + user.lastName}
+                  alt={user.email ?? "None"}
                 />
               </div>
             ) : (
diff --git a/apps/app/components/analytics/scope-and-demand/scope-and-demand.tsx b/apps/app/components/analytics/scope-and-demand/scope-and-demand.tsx
index ee0ee4019..6549f58b4 100644
--- a/apps/app/components/analytics/scope-and-demand/scope-and-demand.tsx
+++ b/apps/app/components/analytics/scope-and-demand/scope-and-demand.tsx
@@ -56,6 +56,7 @@ export const ScopeAndDemand: React.FC<Props> = ({ fullScreen = true }) => {
               <AnalyticsLeaderboard
                 users={defaultAnalytics.most_issue_created_user.map((user) => ({
                   avatar: user.created_by__avatar,
+                  email: user.created_by__email,
                   firstName: user.created_by__first_name,
                   lastName: user.created_by__last_name,
                   count: user.count,
@@ -65,6 +66,7 @@ export const ScopeAndDemand: React.FC<Props> = ({ fullScreen = true }) => {
               <AnalyticsLeaderboard
                 users={defaultAnalytics.most_issue_closed_user.map((user) => ({
                   avatar: user.assignees__avatar,
+                  email: user.assignees__email,
                   firstName: user.assignees__first_name,
                   lastName: user.assignees__last_name,
                   count: user.count,
diff --git a/apps/app/components/analytics/select/project.tsx b/apps/app/components/analytics/select/project.tsx
index bfb975d11..efee62ba6 100644
--- a/apps/app/components/analytics/select/project.tsx
+++ b/apps/app/components/analytics/select/project.tsx
@@ -30,7 +30,6 @@ export const SelectProject: React.FC<Props> = ({ value, onChange, projects }) =>
           : "All projects"
       }
       optionsClassName="min-w-full"
-      position="right"
       noChevron
       multiple
     />
diff --git a/apps/app/components/analytics/select/segment.tsx b/apps/app/components/analytics/select/segment.tsx
index 4358cdfa1..ef6a2fe51 100644
--- a/apps/app/components/analytics/select/segment.tsx
+++ b/apps/app/components/analytics/select/segment.tsx
@@ -1,3 +1,5 @@
+import { useRouter } from "next/router";
+
 // ui
 import { CustomSelect } from "components/ui";
 // types
@@ -11,29 +13,36 @@ type Props = {
   params: IAnalyticsParams;
 };
 
-export const SelectSegment: React.FC<Props> = ({ value, onChange, params }) => (
-  <CustomSelect
-    value={value}
-    label={
-      <span>
-        {ANALYTICS_X_AXIS_VALUES.find((v) => v.value === value)?.label ?? (
-          <span className="text-brand-secondary">No value</span>
-        )}
-      </span>
-    }
-    onChange={onChange}
-    width="w-full"
-    maxHeight="lg"
-  >
-    <CustomSelect.Option value={null}>No value</CustomSelect.Option>
-    {ANALYTICS_X_AXIS_VALUES.map((item) => {
-      if (params.x_axis === item.value) return null;
+export const SelectSegment: React.FC<Props> = ({ value, onChange, params }) => {
+  const router = useRouter();
+  const { cycleId, moduleId } = router.query;
 
-      return (
-        <CustomSelect.Option key={item.value} value={item.value}>
-          {item.label}
-        </CustomSelect.Option>
-      );
-    })}
-  </CustomSelect>
-);
+  return (
+    <CustomSelect
+      value={value}
+      label={
+        <span>
+          {ANALYTICS_X_AXIS_VALUES.find((v) => v.value === value)?.label ?? (
+            <span className="text-brand-secondary">No value</span>
+          )}
+        </span>
+      }
+      onChange={onChange}
+      width="w-full"
+      maxHeight="lg"
+    >
+      <CustomSelect.Option value={null}>No value</CustomSelect.Option>
+      {ANALYTICS_X_AXIS_VALUES.map((item) => {
+        if (params.x_axis === item.value) return null;
+        if (cycleId && item.value === "issue_cycle__cycle__name") return null;
+        if (moduleId && item.value === "issue_module__module__name") return null;
+
+        return (
+          <CustomSelect.Option key={item.value} value={item.value}>
+            {item.label}
+          </CustomSelect.Option>
+        );
+      })}
+    </CustomSelect>
+  );
+};
diff --git a/apps/app/components/analytics/select/x-axis.tsx b/apps/app/components/analytics/select/x-axis.tsx
index a284ae807..a403cad39 100644
--- a/apps/app/components/analytics/select/x-axis.tsx
+++ b/apps/app/components/analytics/select/x-axis.tsx
@@ -1,27 +1,39 @@
+import { useRouter } from "next/router";
+
 // ui
 import { CustomSelect } from "components/ui";
 // types
-import { IAnalyticsParams, TXAxisValues, TYAxisValues } from "types";
+import { TXAxisValues } from "types";
 // constants
-import { ANALYTICS_X_AXIS_VALUES, ANALYTICS_Y_AXIS_VALUES } from "constants/analytics";
+import { ANALYTICS_X_AXIS_VALUES } from "constants/analytics";
 
 type Props = {
   value: TXAxisValues;
   onChange: (val: string) => void;
 };
 
-export const SelectXAxis: React.FC<Props> = ({ value, onChange }) => (
-  <CustomSelect
-    value={value}
-    label={<span>{ANALYTICS_X_AXIS_VALUES.find((v) => v.value === value)?.label}</span>}
-    onChange={onChange}
-    width="w-full"
-    maxHeight="lg"
-  >
-    {ANALYTICS_X_AXIS_VALUES.map((item) => (
-      <CustomSelect.Option key={item.value} value={item.value}>
-        {item.label}
-      </CustomSelect.Option>
-    ))}
-  </CustomSelect>
-);
+export const SelectXAxis: React.FC<Props> = ({ value, onChange }) => {
+  const router = useRouter();
+  const { cycleId, moduleId } = router.query;
+
+  return (
+    <CustomSelect
+      value={value}
+      label={<span>{ANALYTICS_X_AXIS_VALUES.find((v) => v.value === value)?.label}</span>}
+      onChange={onChange}
+      width="w-full"
+      maxHeight="lg"
+    >
+      {ANALYTICS_X_AXIS_VALUES.map((item) => {
+        if (cycleId && item.value === "issue_cycle__cycle__name") return null;
+        if (moduleId && item.value === "issue_module__module__name") return null;
+
+        return (
+          <CustomSelect.Option key={item.value} value={item.value}>
+            {item.label}
+          </CustomSelect.Option>
+        );
+      })}
+    </CustomSelect>
+  );
+};
diff --git a/apps/app/components/analytics/select/y-axis.tsx b/apps/app/components/analytics/select/y-axis.tsx
index 248852620..ef22332bd 100644
--- a/apps/app/components/analytics/select/y-axis.tsx
+++ b/apps/app/components/analytics/select/y-axis.tsx
@@ -1,7 +1,7 @@
 // ui
 import { CustomSelect } from "components/ui";
 // types
-import { IAnalyticsParams, TYAxisValues } from "types";
+import { TYAxisValues } from "types";
 // constants
 import { ANALYTICS_Y_AXIS_VALUES } from "constants/analytics";
 
diff --git a/apps/app/types/analytics.d.ts b/apps/app/types/analytics.d.ts
index eb5d75e58..67bc0cd10 100644
--- a/apps/app/types/analytics.d.ts
+++ b/apps/app/types/analytics.d.ts
@@ -3,6 +3,12 @@ export interface IAnalyticsResponse {
   distribution: IAnalyticsData;
   extras: {
     colors: IAnalyticsExtra[];
+    assignee_details: {
+      assignees__avatar: string | null;
+      assignees__email: string;
+      assignees__first_name: string;
+      assignees__last_name: string;
+    }[];
   };
 }
 
@@ -59,6 +65,7 @@ export interface IExportAnalyticsFormData {
 
 export interface IDefaultAnalyticsUser {
   assignees__avatar: string | null;
+  assignees__email: string | null;
   assignees__first_name: string;
   assignees__last_name: string;
   count: number;
@@ -69,6 +76,7 @@ export interface IDefaultAnalyticsResponse {
   most_issue_closed_user: IDefaultAnalyticsUser[];
   most_issue_created_user: {
     created_by__avatar: string | null;
+    created_by__email: string | null;
     created_by__first_name: string;
     created_by__last_name: string;
     count: number;

From e696a3741c6a1e2569d52748372483da2a155e24 Mon Sep 17 00:00:00 2001
From: pablohashescobar <118773738+pablohashescobar@users.noreply.github.com>
Date: Wed, 17 May 2023 00:45:59 +0530
Subject: [PATCH 35/81] chore: analytics data ordering (#1059)

---
 apiserver/plane/utils/analytics_plot.py | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/apiserver/plane/utils/analytics_plot.py b/apiserver/plane/utils/analytics_plot.py
index 7106769a6..10b0a799d 100644
--- a/apiserver/plane/utils/analytics_plot.py
+++ b/apiserver/plane/utils/analytics_plot.py
@@ -8,6 +8,9 @@ from django.db.models.functions import Coalesce, ExtractMonth, ExtractYear, Conc
 
 
 def build_graph_plot(queryset, x_axis, y_axis, segment=None):
+
+    temp_axis = x_axis
+
     if x_axis in ["created_at", "start_date", "target_date", "completed_at"]:
         year = ExtractYear(x_axis)
         month = ExtractMonth(x_axis)
@@ -61,7 +64,13 @@ def build_graph_plot(queryset, x_axis, y_axis, segment=None):
 
     result_values = list(queryset)
     grouped_data = {}
-    for date, items in groupby(result_values, key=lambda x: x[str("dimension")]):
-        grouped_data[str(date)] = list(items)
+    for key, items in groupby(result_values, key=lambda x: x[str("dimension")]):
+        grouped_data[str(key)] = list(items)
 
-    return grouped_data
+    sorted_data = grouped_data
+    if temp_axis == "priority":
+        order = ["low", "medium", "high", "urgent", "None"]
+        sorted_data = {key: grouped_data[key] for key in order if key in grouped_data}
+    else:
+        sorted_data = dict(sorted(grouped_data.items(), key=lambda x: (x[0] is "None", x[0])))
+    return sorted_data

From d99f85ce059d50d5db4d6c385828d0a328a622db Mon Sep 17 00:00:00 2001
From: pablohashescobar <118773738+pablohashescobar@users.noreply.github.com>
Date: Wed, 17 May 2023 00:46:20 +0530
Subject: [PATCH 36/81] chore: analytics assignee email for default analytics
 (#1057)

---
 apiserver/plane/api/views/analytic.py | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apiserver/plane/api/views/analytic.py b/apiserver/plane/api/views/analytic.py
index 2edb24637..1691f3af6 100644
--- a/apiserver/plane/api/views/analytic.py
+++ b/apiserver/plane/api/views/analytic.py
@@ -237,21 +237,21 @@ class DefaultAnalyticsEndpoint(BaseAPIView):
             )
             most_issue_created_user = (
                 queryset.exclude(created_by=None)
-                .values("created_by__first_name", "created_by__last_name", "created_by__avatar")
+                .values("created_by__first_name", "created_by__last_name", "created_by__avatar", "created_by__email")
                 .annotate(count=Count("id"))
                 .order_by("-count")
             )[:5]
 
             most_issue_closed_user = (
                 queryset.filter(completed_at__isnull=False, assignees__isnull=False)
-                .values("assignees__first_name", "assignees__last_name", "assignees__avatar")
+                .values("assignees__first_name", "assignees__last_name", "assignees__avatar", "assignees__email")
                 .annotate(count=Count("id"))
                 .order_by("-count")
             )[:5]
 
             pending_issue_user = (
                 queryset.filter(completed_at__isnull=True)
-                .values("assignees__first_name", "assignees__last_name", "assignees__avatar")
+                .values("assignees__first_name", "assignees__last_name", "assignees__avatar", "assignees__email")
                 .annotate(count=Count("id"))
                 .order_by("-count")
             )

From c49b0d61518165b8789922303e144d7eb0574288 Mon Sep 17 00:00:00 2001
From: pablohashescobar <118773738+pablohashescobar@users.noreply.github.com>
Date: Wed, 17 May 2023 00:46:41 +0530
Subject: [PATCH 37/81] fix: issue assignee multiple values (#1056)

* fix: issue assignee multiple values

* chore: return first name and last name

* dev: keys update and also send data when segmented
---
 apiserver/plane/api/views/analytic.py | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/apiserver/plane/api/views/analytic.py b/apiserver/plane/api/views/analytic.py
index 1691f3af6..28ffceab7 100644
--- a/apiserver/plane/api/views/analytic.py
+++ b/apiserver/plane/api/views/analytic.py
@@ -76,17 +76,21 @@ class AnalyticsEndpoint(BaseAPIView):
                     )
                 )
 
-            assignee_avatars = {}
-            if x_axis in ["assignees__email"]:
-                assignee_avatars = Issue.objects.filter(
-                    workspace__slug=slug, **filters
-                ).values("assignees__avatar")
+            assignee_details = {}
+            if x_axis in ["assignees__email"] or segment in ["assignees__email"]:
+                assignee_details = (
+                    Issue.objects.filter(workspace__slug=slug, **filters, assignees__avatar__isnull=False)
+                    .order_by("assignees__id")
+                    .distinct("assignees__id")
+                    .values("assignees__avatar", "assignees__email", "assignees__first_name", "assignees__last_name")
+                )
+
 
             return Response(
                 {
                     "total": total_issues,
                     "distribution": distribution,
-                    "extras": {"colors": colors, "assignee_avatars": assignee_avatars},
+                    "extras": {"colors": colors, "assignee_details": assignee_details},
                 },
                 status=status.HTTP_200_OK,
             )

From 559b0cc9c8eaa92f0a92e6ccddd4441cf8931401 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Wed, 17 May 2023 12:58:01 +0530
Subject: [PATCH 38/81] style: cycle new ui (#1052)

* style: cycles new ui

* chore: added progress bar for the high priority issues

* fix: build fix

* style: active cycle details, theming , padding and layout

* style: cycle list and card styling

* style: cycle card

* fix: tooltip text overflow

* fix: cycle mutation fix

* style: cycle list and card view improvement, chore: code refactor

* feat: view cycle button

* style: cycle list and board view improvement

* style: responsiveness added

* feat: active cycle stats component, chore: code refactor

* fix: active cycle divider fix, style: stats font color

* fix: tooltip fix

---------

Co-authored-by: kunal_17 <kunalvish17360@gmail.com>
---
 .../core/sidebar/progress-chart.tsx           |   8 +-
 .../core/sidebar/sidebar-progress-stats.tsx   |  46 +-
 .../core/sidebar/single-progress-stats.tsx    |   2 +-
 .../cycles/active-cycle-details.tsx           | 602 ++++++++++++++++++
 .../components/cycles/active-cycle-stats.tsx  | 182 ++++++
 .../{cycles-list.tsx => all-cycles-board.tsx} |   2 +-
 .../app/components/cycles/all-cycles-list.tsx |  86 +++
 ...d-cycles-list.tsx => completed-cycles.tsx} |  48 +-
 apps/app/components/cycles/cycles-view.tsx    | 207 ++++++
 .../components/cycles/delete-cycle-modal.tsx  |   9 +
 apps/app/components/cycles/index.ts           |  11 +-
 apps/app/components/cycles/modal.tsx          |   3 +
 .../components/cycles/single-cycle-card.tsx   | 250 ++++++--
 .../components/cycles/single-cycle-list.tsx   | 510 +++++++++++++++
 .../app/components/icons/alarm-clock-icon.tsx |  22 +
 apps/app/components/icons/index.ts            |   3 +
 .../components/icons/person-running-icon.tsx  |  19 +
 .../icons/triangle-exclamation-icon.tsx       |  20 +
 .../ui/linear-progress-indicator.tsx          |  13 +-
 apps/app/components/ui/tooltip.tsx            |  15 +-
 .../projects/[projectId]/cycles/index.tsx     | 148 +----
 apps/app/types/cycles.d.ts                    |   2 +
 22 files changed, 1980 insertions(+), 228 deletions(-)
 create mode 100644 apps/app/components/cycles/active-cycle-details.tsx
 create mode 100644 apps/app/components/cycles/active-cycle-stats.tsx
 rename apps/app/components/cycles/{cycles-list.tsx => all-cycles-board.tsx} (97%)
 create mode 100644 apps/app/components/cycles/all-cycles-list.tsx
 rename apps/app/components/cycles/{completed-cycles-list.tsx => completed-cycles.tsx} (66%)
 create mode 100644 apps/app/components/cycles/cycles-view.tsx
 create mode 100644 apps/app/components/cycles/single-cycle-list.tsx
 create mode 100644 apps/app/components/icons/alarm-clock-icon.tsx
 create mode 100644 apps/app/components/icons/person-running-icon.tsx
 create mode 100644 apps/app/components/icons/triangle-exclamation-icon.tsx

diff --git a/apps/app/components/core/sidebar/progress-chart.tsx b/apps/app/components/core/sidebar/progress-chart.tsx
index f8454650e..9006b58fc 100644
--- a/apps/app/components/core/sidebar/progress-chart.tsx
+++ b/apps/app/components/core/sidebar/progress-chart.tsx
@@ -12,9 +12,11 @@ type Props = {
   issues: IIssue[];
   start: string;
   end: string;
+  width?: number;
+  height?: number;
 };
 
-const ProgressChart: React.FC<Props> = ({ issues, start, end }) => {
+const ProgressChart: React.FC<Props> = ({ issues, start, end, width = 360, height = 160  }) => {
   const startDate = new Date(start);
   const endDate = new Date(end);
   const getChartData = () => {
@@ -51,8 +53,8 @@ const ProgressChart: React.FC<Props> = ({ issues, start, end }) => {
   return (
     <div className="absolute -left-4  flex h-full w-full  items-center justify-center text-xs">
       <AreaChart
-        width={360}
-        height={160}
+        width={width}
+        height={height}
         data={ChartData}
         margin={{
           top: 12,
diff --git a/apps/app/components/core/sidebar/sidebar-progress-stats.tsx b/apps/app/components/core/sidebar/sidebar-progress-stats.tsx
index 3ddf24fe4..140a49aab 100644
--- a/apps/app/components/core/sidebar/sidebar-progress-stats.tsx
+++ b/apps/app/components/core/sidebar/sidebar-progress-stats.tsx
@@ -29,6 +29,8 @@ type Props = {
   issues: IIssue[];
   module?: IModule;
   userAuth?: UserAuth;
+  roundedTab?: boolean;
+  noBackground?: boolean;
 };
 
 const stateGroupColours: {
@@ -46,6 +48,8 @@ export const SidebarProgressStats: React.FC<Props> = ({
   issues,
   module,
   userAuth,
+  roundedTab,
+  noBackground,
 }) => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
@@ -100,12 +104,16 @@ export const SidebarProgressStats: React.FC<Props> = ({
     >
       <Tab.List
         as="div"
-        className={`flex w-full items-center justify-between rounded-md bg-brand-surface-1 px-1 py-1.5 
+        className={`flex w-full items-center gap-2 justify-between rounded-md ${
+          noBackground ? "" : "bg-brand-surface-1"
+        } px-1 py-1.5 
         ${module ? "text-xs" : "text-sm"} `}
       >
         <Tab
           className={({ selected }) =>
-            `w-full rounded px-3 py-1 text-brand-base  ${
+            `w-full  ${
+              roundedTab ? "rounded-3xl border border-brand-base" : "rounded"
+            } px-3 py-1 text-brand-base ${
               selected ? " bg-brand-accent text-white" : "  hover:bg-brand-surface-2"
             }`
           }
@@ -114,7 +122,9 @@ export const SidebarProgressStats: React.FC<Props> = ({
         </Tab>
         <Tab
           className={({ selected }) =>
-            `w-full rounded px-3 py-1 text-brand-base ${
+            `w-full ${
+              roundedTab ? "rounded-3xl border border-brand-base" : "rounded"
+            } px-3 py-1 text-brand-base ${
               selected ? " bg-brand-accent text-white" : " hover:bg-brand-surface-2"
             }`
           }
@@ -123,7 +133,9 @@ export const SidebarProgressStats: React.FC<Props> = ({
         </Tab>
         <Tab
           className={({ selected }) =>
-            `w-full rounded px-3 py-1  text-brand-base ${
+            `w-full ${
+              roundedTab ? "rounded-3xl border border-brand-base" : "rounded"
+            } px-3 py-1  text-brand-base ${
               selected ? " bg-brand-accent text-white" : " hover:bg-brand-surface-2"
             }`
           }
@@ -131,10 +143,10 @@ export const SidebarProgressStats: React.FC<Props> = ({
           States
         </Tab>
       </Tab.List>
-      <Tab.Panels className="flex w-full items-center justify-between pt-1">
+      <Tab.Panels className="flex w-full items-center justify-between pt-1 text-brand-secondary">
         <Tab.Panel as="div" className="flex w-full flex-col text-xs">
           {members?.map((member, index) => {
-            const totalArray = issues?.filter((i) => i.assignees?.includes(member.member.id));
+            const totalArray = issues?.filter((i) => i?.assignees?.includes(member.member.id));
             const completeArray = totalArray?.filter((i) => i.state_detail.group === "completed");
 
             if (totalArray.length > 0) {
@@ -150,19 +162,19 @@ export const SidebarProgressStats: React.FC<Props> = ({
                   completed={completeArray.length}
                   total={totalArray.length}
                   onClick={() => {
-                    if (filters.assignees?.includes(member.member.id))
+                    if (filters?.assignees?.includes(member.member.id))
                       setFilters({
-                        assignees: filters.assignees?.filter((a) => a !== member.member.id),
+                        assignees: filters?.assignees?.filter((a) => a !== member.member.id),
                       });
                     else
                       setFilters({ assignees: [...(filters?.assignees ?? []), member.member.id] });
                   }}
-                  selected={filters.assignees?.includes(member.member.id)}
+                  selected={filters?.assignees?.includes(member.member.id)}
                 />
               );
             }
           })}
-          {issues?.filter((i) => i.assignees?.length === 0).length > 0 ? (
+          {issues?.filter((i) => i?.assignees?.length === 0).length > 0 ? (
             <SingleProgressStats
               title={
                 <>
@@ -180,10 +192,10 @@ export const SidebarProgressStats: React.FC<Props> = ({
               }
               completed={
                 issues?.filter(
-                  (i) => i.state_detail.group === "completed" && i.assignees?.length === 0
+                  (i) => i?.state_detail.group === "completed" && i.assignees?.length === 0
                 ).length
               }
-              total={issues?.filter((i) => i.assignees?.length === 0).length}
+              total={issues?.filter((i) => i?.assignees?.length === 0).length}
             />
           ) : (
             ""
@@ -191,8 +203,8 @@ export const SidebarProgressStats: React.FC<Props> = ({
         </Tab.Panel>
         <Tab.Panel as="div" className="w-full space-y-1">
           {issueLabels?.map((label, index) => {
-            const totalArray = issues?.filter((i) => i.labels?.includes(label.id));
-            const completeArray = totalArray?.filter((i) => i.state_detail.group === "completed");
+            const totalArray = issues?.filter((i) => i?.labels?.includes(label.id));
+            const completeArray = totalArray?.filter((i) => i?.state_detail.group === "completed");
 
             if (totalArray.length > 0) {
               return (
@@ -207,7 +219,7 @@ export const SidebarProgressStats: React.FC<Props> = ({
                             label.color && label.color !== "" ? label.color : "#000000",
                         }}
                       />
-                      <span className="text-xs capitalize">{label.name}</span>
+                      <span className="text-xs capitalize">{label?.name}</span>
                     </div>
                   }
                   completed={completeArray.length}
@@ -215,11 +227,11 @@ export const SidebarProgressStats: React.FC<Props> = ({
                   onClick={() => {
                     if (filters.labels?.includes(label.id))
                       setFilters({
-                        labels: filters.labels?.filter((l) => l !== label.id),
+                        labels: filters?.labels?.filter((l) => l !== label.id),
                       });
                     else setFilters({ labels: [...(filters?.labels ?? []), label.id] });
                   }}
-                  selected={filters.labels?.includes(label.id)}
+                  selected={filters?.labels?.includes(label.id)}
                 />
               );
             }
diff --git a/apps/app/components/core/sidebar/single-progress-stats.tsx b/apps/app/components/core/sidebar/single-progress-stats.tsx
index 3e672ce8b..b2cea68c1 100644
--- a/apps/app/components/core/sidebar/single-progress-stats.tsx
+++ b/apps/app/components/core/sidebar/single-progress-stats.tsx
@@ -18,7 +18,7 @@ export const SingleProgressStats: React.FC<TSingleProgressStatsProps> = ({
   selected = false,
 }) => (
   <div
-    className={`flex w-full items-center justify-between rounded p-2 text-xs ${
+    className={`flex w-full items-center gap-4 justify-between rounded-sm p-1 text-xs ${
       onClick ? "cursor-pointer hover:bg-brand-surface-1" : ""
     } ${selected ? "bg-brand-surface-1" : ""}`}
     onClick={onClick}
diff --git a/apps/app/components/cycles/active-cycle-details.tsx b/apps/app/components/cycles/active-cycle-details.tsx
new file mode 100644
index 000000000..403c10578
--- /dev/null
+++ b/apps/app/components/cycles/active-cycle-details.tsx
@@ -0,0 +1,602 @@
+import React from "react";
+
+import Link from "next/link";
+import Image from "next/image";
+import { useRouter } from "next/router";
+
+import useSWR, { mutate } from "swr";
+
+// services
+import cyclesService from "services/cycles.service";
+// hooks
+import useToast from "hooks/use-toast";
+// ui
+import { LinearProgressIndicator, Tooltip } from "components/ui";
+import { AssigneesList } from "components/ui/avatar";
+import { SingleProgressStats } from "components/core";
+// components
+import ProgressChart from "components/core/sidebar/progress-chart";
+import { ActiveCycleProgressStats } from "components/cycles";
+
+// icons
+import { CalendarDaysIcon } from "@heroicons/react/20/solid";
+import { getPriorityIcon } from "components/icons/priority-icon";
+import {
+  TargetIcon,
+  ContrastIcon,
+  PersonRunningIcon,
+  ArrowRightIcon,
+  TriangleExclamationIcon,
+  AlarmClockIcon,
+  LayerDiagonalIcon,
+  CompletedStateIcon,
+} from "components/icons";
+import { StarIcon } from "@heroicons/react/24/outline";
+// helpers
+import {
+  getDateRangeStatus,
+  renderShortDateWithYearFormat,
+  findHowManyDaysLeft,
+} from "helpers/date-time.helper";
+import { truncateText } from "helpers/string.helper";
+// types
+import {
+  CompletedCyclesResponse,
+  CurrentAndUpcomingCyclesResponse,
+  DraftCyclesResponse,
+  ICycle,
+  IIssue,
+} from "types";
+// fetch-keys
+import {
+  CYCLE_COMPLETE_LIST,
+  CYCLE_CURRENT_AND_UPCOMING_LIST,
+  CYCLE_DRAFT_LIST,
+  CYCLE_ISSUES,
+} from "constants/fetch-keys";
+
+type TSingleStatProps = {
+  cycle: ICycle;
+  isCompleted?: boolean;
+};
+
+const stateGroups = [
+  {
+    key: "backlog_issues",
+    title: "Backlog",
+    color: "#dee2e6",
+  },
+  {
+    key: "unstarted_issues",
+    title: "Unstarted",
+    color: "#26b5ce",
+  },
+  {
+    key: "started_issues",
+    title: "Started",
+    color: "#f7ae59",
+  },
+  {
+    key: "cancelled_issues",
+    title: "Cancelled",
+    color: "#d687ff",
+  },
+  {
+    key: "completed_issues",
+    title: "Completed",
+    color: "#09a953",
+  },
+];
+
+export const ActiveCycleDetails: React.FC<TSingleStatProps> = ({ cycle, isCompleted = false }) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const endDate = new Date(cycle.end_date ?? "");
+  const startDate = new Date(cycle.start_date ?? "");
+
+  const groupedIssues: any = {
+    backlog: cycle.backlog_issues,
+    unstarted: cycle.unstarted_issues,
+    started: cycle.started_issues,
+    completed: cycle.completed_issues,
+    cancelled: cycle.cancelled_issues,
+  };
+
+  const cycleStatus = getDateRangeStatus(cycle.start_date, cycle.end_date);
+
+  const handleAddToFavorites = () => {
+    if (!workspaceSlug || !projectId || !cycle) return;
+
+    switch (cycleStatus) {
+      case "current":
+      case "upcoming":
+        mutate<CurrentAndUpcomingCyclesResponse>(
+          CYCLE_CURRENT_AND_UPCOMING_LIST(projectId as string),
+          (prevData) => ({
+            current_cycle: (prevData?.current_cycle ?? []).map((c) => ({
+              ...c,
+              is_favorite: c.id === cycle.id ? true : c.is_favorite,
+            })),
+            upcoming_cycle: (prevData?.upcoming_cycle ?? []).map((c) => ({
+              ...c,
+              is_favorite: c.id === cycle.id ? true : c.is_favorite,
+            })),
+          }),
+          false
+        );
+        break;
+      case "completed":
+        mutate<CompletedCyclesResponse>(
+          CYCLE_COMPLETE_LIST(projectId as string),
+          (prevData) => ({
+            completed_cycles: (prevData?.completed_cycles ?? []).map((c) => ({
+              ...c,
+              is_favorite: c.id === cycle.id ? true : c.is_favorite,
+            })),
+          }),
+          false
+        );
+        break;
+      case "draft":
+        mutate<DraftCyclesResponse>(
+          CYCLE_DRAFT_LIST(projectId as string),
+          (prevData) => ({
+            draft_cycles: (prevData?.draft_cycles ?? []).map((c) => ({
+              ...c,
+              is_favorite: c.id === cycle.id ? true : c.is_favorite,
+            })),
+          }),
+          false
+        );
+        break;
+    }
+
+    cyclesService
+      .addCycleToFavorites(workspaceSlug as string, projectId as string, {
+        cycle: cycle.id,
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Couldn't add the cycle to favorites. Please try again.",
+        });
+      });
+  };
+
+  const handleRemoveFromFavorites = () => {
+    if (!workspaceSlug || !projectId || !cycle) return;
+
+    switch (cycleStatus) {
+      case "current":
+      case "upcoming":
+        mutate<CurrentAndUpcomingCyclesResponse>(
+          CYCLE_CURRENT_AND_UPCOMING_LIST(projectId as string),
+          (prevData) => ({
+            current_cycle: (prevData?.current_cycle ?? []).map((c) => ({
+              ...c,
+              is_favorite: c.id === cycle.id ? false : c.is_favorite,
+            })),
+            upcoming_cycle: (prevData?.upcoming_cycle ?? []).map((c) => ({
+              ...c,
+              is_favorite: c.id === cycle.id ? false : c.is_favorite,
+            })),
+          }),
+          false
+        );
+        break;
+      case "completed":
+        mutate<CompletedCyclesResponse>(
+          CYCLE_COMPLETE_LIST(projectId as string),
+          (prevData) => ({
+            completed_cycles: (prevData?.completed_cycles ?? []).map((c) => ({
+              ...c,
+              is_favorite: c.id === cycle.id ? false : c.is_favorite,
+            })),
+          }),
+          false
+        );
+        break;
+      case "draft":
+        mutate<DraftCyclesResponse>(
+          CYCLE_DRAFT_LIST(projectId as string),
+          (prevData) => ({
+            draft_cycles: (prevData?.draft_cycles ?? []).map((c) => ({
+              ...c,
+              is_favorite: c.id === cycle.id ? false : c.is_favorite,
+            })),
+          }),
+          false
+        );
+        break;
+    }
+
+    cyclesService
+      .removeCycleFromFavorites(workspaceSlug as string, projectId as string, cycle.id)
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Couldn't remove the cycle from favorites. Please try again.",
+        });
+      });
+  };
+
+  const { data: issues } = useSWR<IIssue[]>(
+    workspaceSlug && projectId && cycle.id ? CYCLE_ISSUES(cycle.id as string) : null,
+    workspaceSlug && projectId && cycle.id
+      ? () =>
+          cyclesService.getCycleIssues(
+            workspaceSlug as string,
+            projectId as string,
+            cycle.id as string
+          )
+      : null
+  );
+
+  const progressIndicatorData = stateGroups.map((group, index) => ({
+    id: index,
+    name: group.title,
+    value:
+      cycle.total_issues > 0
+        ? ((cycle[group.key as keyof ICycle] as number) / cycle.total_issues) * 100
+        : 0,
+    color: group.color,
+  }));
+
+  return (
+    <div className="grid-row-2 grid rounded-[10px] shadow divide-y bg-brand-base border border-brand-base">
+      <div className="grid grid-cols-1 divide-y border-brand-base lg:divide-y-0 lg:divide-x lg:grid-cols-3">
+        <div className="flex flex-col text-xs">
+          <a className="w-full">
+            <div className="flex h-full flex-col gap-5 rounded-b-[10px] p-4">
+              <div className="flex items-center justify-between gap-1">
+                <span className="flex items-center gap-1">
+                  <ContrastIcon
+                    className="h-5 w-5"
+                    color={`${
+                      cycleStatus === "current"
+                        ? "#09A953"
+                        : cycleStatus === "upcoming"
+                        ? "#F7AE59"
+                        : cycleStatus === "completed"
+                        ? "#3F76FF"
+                        : cycleStatus === "draft"
+                        ? "#858E96"
+                        : ""
+                    }`}
+                  />
+                  <Tooltip tooltipContent={cycle.name} position="top-left">
+                    <h3 className="break-all text-lg font-semibold">
+                      {truncateText(cycle.name, 70)}
+                    </h3>
+                  </Tooltip>
+                </span>
+                <span className="flex items-center gap-1 capitalize">
+                  <span
+                    className={`rounded-full px-1.5 py-0.5
+                    ${
+                      cycleStatus === "current"
+                        ? "bg-green-600/5 text-green-600"
+                        : cycleStatus === "upcoming"
+                        ? "bg-orange-300/5 text-orange-300"
+                        : cycleStatus === "completed"
+                        ? "bg-blue-500/5 text-blue-500"
+                        : cycleStatus === "draft"
+                        ? "bg-neutral-400/5 text-neutral-400"
+                        : ""
+                    }`}
+                  >
+                    {cycleStatus === "current" ? (
+                      <span className="flex gap-1">
+                        <PersonRunningIcon className="h-4 w-4" />
+                        {findHowManyDaysLeft(cycle.end_date ?? new Date())} Days Left
+                      </span>
+                    ) : cycleStatus === "upcoming" ? (
+                      <span className="flex gap-1">
+                        <AlarmClockIcon className="h-4 w-4" />
+                        {findHowManyDaysLeft(cycle.start_date ?? new Date())} Days Left
+                      </span>
+                    ) : cycleStatus === "completed" ? (
+                      <span className="flex gap-1">
+                        {cycle.total_issues - cycle.completed_issues > 0 && (
+                          <Tooltip
+                            tooltipContent={`${
+                              cycle.total_issues - cycle.completed_issues
+                            } more pending ${
+                              cycle.total_issues - cycle.completed_issues === 1 ? "issue" : "issues"
+                            }`}
+                          >
+                            <span>
+                              <TriangleExclamationIcon className="h-3.5 w-3.5 fill-current" />
+                            </span>
+                          </Tooltip>
+                        )}{" "}
+                        Completed
+                      </span>
+                    ) : (
+                      cycleStatus
+                    )}
+                  </span>
+                  {cycle.is_favorite ? (
+                    <button
+                      onClick={(e) => {
+                        e.preventDefault();
+                        handleRemoveFromFavorites();
+                      }}
+                    >
+                      <StarIcon className="h-4 w-4 text-orange-400" fill="#f6ad55" />
+                    </button>
+                  ) : (
+                    <button
+                      onClick={(e) => {
+                        e.preventDefault();
+                        handleAddToFavorites();
+                      }}
+                    >
+                      <StarIcon className="h-4 w-4 " color="#858E96" />
+                    </button>
+                  )}
+                </span>
+              </div>
+
+              <div className="flex items-center justify-start gap-5 text-brand-secondary">
+                <div className="flex items-start gap-1">
+                  <CalendarDaysIcon className="h-4 w-4" />
+                  <span>{renderShortDateWithYearFormat(startDate)}</span>
+                </div>
+                <ArrowRightIcon className="h-4 w-4 text-brand-secondary" />
+                <div className="flex items-start gap-1">
+                  <TargetIcon className="h-4 w-4" />
+                  <span>{renderShortDateWithYearFormat(endDate)}</span>
+                </div>
+              </div>
+
+              <div className="flex items-center gap-4">
+                <div className="flex items-center gap-2.5 text-brand-secondary">
+                  {cycle.owned_by.avatar && cycle.owned_by.avatar !== "" ? (
+                    <Image
+                      src={cycle.owned_by.avatar}
+                      height={16}
+                      width={16}
+                      className="rounded-full"
+                      alt={cycle.owned_by.first_name}
+                    />
+                  ) : (
+                    <span className="bg-brand-secondary flex h-5 w-5 items-center justify-center rounded-full bg-brand-base  capitalize">
+                      {cycle.owned_by.first_name.charAt(0)}
+                    </span>
+                  )}
+                  <span className="text-brand-secondary">{cycle.owned_by.first_name}</span>
+                </div>
+
+                {cycle.assignees.length > 0 && (
+                  <div className="flex items-center gap-1 text-brand-secondary">
+                    <AssigneesList users={cycle.assignees} length={4} />
+                  </div>
+                )}
+              </div>
+
+              <div className="flex items-center gap-4 text-brand-secondary">
+                <div className="flex gap-2">
+                  <LayerDiagonalIcon className="h-4 w-4 flex-shrink-0" />
+                  {cycle.total_issues} issues
+                </div>
+                <div className="flex gap-2">
+                  <CompletedStateIcon width={16} height={16} color="#438AF3" />
+                  {cycle.completed_issues} issues
+                </div>
+              </div>
+
+              <Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`}>
+                <a className="bg-brand-accent text-white px-4 rounded-md py-2 text-center text-sm font-medium w-full hover:bg-brand-accent/90">
+                  View Cycle
+                </a>
+              </Link>
+            </div>
+          </a>
+        </div>
+        <div className="grid col-span-2 grid-cols-1 divide-y border-brand-base md:divide-y-0 md:divide-x md:grid-cols-2">
+          <div className="flex h-full flex-col border-brand-base">
+            <div className="flex h-full w-full flex-col text-brand-secondary p-4">
+              <div className="flex w-full items-center gap-2 py-1">
+                <span>Progress</span>
+                <LinearProgressIndicator data={progressIndicatorData} />
+              </div>
+              <div className="flex flex-col mt-2 gap-1 items-center">
+                {Object.keys(groupedIssues).map((group, index) => (
+                  <SingleProgressStats
+                    key={index}
+                    title={
+                      <div className="flex items-center gap-2">
+                        <span
+                          className="block h-3 w-3 rounded-full "
+                          style={{
+                            backgroundColor: stateGroups[index].color,
+                          }}
+                        />
+                        <span className="text-xs capitalize">{group}</span>
+                      </div>
+                    }
+                    completed={groupedIssues[group]}
+                    total={cycle.total_issues}
+                  />
+                ))}
+              </div>
+            </div>
+          </div>
+          <div className="border-brand-base p-4">
+            <ActiveCycleProgressStats issues={issues ?? []} />
+          </div>
+        </div>
+      </div>
+      <div className="grid grid-cols-1 divide-y border-brand-base lg:divide-y-0 lg:divide-x lg:grid-cols-2">
+        <div className="flex flex-col justify-between p-4">
+          <div>
+            <div className="text-brand-primary mb-2">High Priority Issues</div>
+
+            <div className="mb-2 flex max-h-[240px] min-h-[240px] flex-col gap-2.5 overflow-y-scroll rounded-md">
+              {issues
+                ?.filter((issue) => issue.priority === "urgent" || issue.priority === "high")
+                .map((issue) => (
+                  <div
+                    key={issue.id}
+                    className="flex flex-wrap rounded-md items-center justify-between gap-2 border border-brand-base bg-brand-surface-1 px-3 py-1.5"
+                  >
+                    <div className="flex flex-col gap-1">
+                      <div>
+                        <Tooltip
+                          tooltipHeading="Issue ID"
+                          tooltipContent={`${issue.project_detail?.identifier}-${issue.sequence_id}`}
+                        >
+                          <span className="flex-shrink-0 text-xs text-brand-secondary">
+                            {issue.project_detail?.identifier}-{issue.sequence_id}
+                          </span>
+                        </Tooltip>
+                      </div>
+                      <Tooltip
+                        position="top-left"
+                        tooltipHeading="Title"
+                        tooltipContent={issue.name}
+                      >
+                        <span className="text-[0.825rem] text-brand-base">
+                          {truncateText(issue.name, 30)}
+                        </span>
+                      </Tooltip>
+                    </div>
+
+                    <div className="flex items-center gap-1.5">
+                      <div
+                        className={`grid h-6 w-6 place-items-center items-center rounded border shadow-sm ${
+                          issue.priority === "urgent"
+                            ? "border-red-500/20 bg-red-500/20 text-red-500"
+                            : issue.priority === "high"
+                            ? "border-orange-500/20 bg-orange-500/20 text-orange-500"
+                            : issue.priority === "medium"
+                            ? "border-yellow-500/20 bg-yellow-500/20 text-yellow-500"
+                            : issue.priority === "low"
+                            ? "border-green-500/20 bg-green-500/20 text-green-500"
+                            : "border-brand-base"
+                        }`}
+                      >
+                        {getPriorityIcon(issue.priority, "text-sm")}
+                      </div>
+                      {issue.label_details.length > 0 ? (
+                        <div className="flex flex-wrap gap-1">
+                          {issue.label_details.map((label) => (
+                            <span
+                              key={label.id}
+                              className="group flex items-center gap-1 rounded-2xl border border-brand-base px-2 py-0.5 text-xs text-brand-secondary"
+                            >
+                              <span
+                                className="h-1.5 w-1.5  rounded-full"
+                                style={{
+                                  backgroundColor:
+                                    label?.color && label.color !== "" ? label.color : "#000",
+                                }}
+                              />
+                              {label.name}
+                            </span>
+                          ))}
+                        </div>
+                      ) : (
+                        ""
+                      )}
+                      <div className={`flex items-center gap-2 text-brand-secondary`}>
+                        {issue.assignees &&
+                        issue.assignees.length > 0 &&
+                        Array.isArray(issue.assignees) ? (
+                          <div className="-my-0.5 flex items-center justify-center gap-2">
+                            <AssigneesList
+                              userIds={issue.assignees}
+                              length={3}
+                              showLength={false}
+                            />
+                          </div>
+                        ) : (
+                          ""
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                ))}
+            </div>
+          </div>
+
+          <div className="flex items-center justify-between gap-2">
+            <div className="h-1 w-full rounded-full bg-brand-surface-2">
+              <div
+                className="h-1 rounded-full bg-green-600"
+                style={{
+                  width:
+                    issues &&
+                    `${
+                      (issues?.filter(
+                        (issue) =>
+                          issue?.state_detail?.group === "completed" &&
+                          (issue?.priority === "urgent" || issue?.priority === "high")
+                      )?.length /
+                        issues?.filter(
+                          (issue) => issue?.priority === "urgent" || issue?.priority === "high"
+                        )?.length) *
+                        100 ?? 0
+                    }%`,
+                }}
+              />
+            </div>
+            <div className="w-16 text-end text-xs text-brand-secondary">
+              {
+                issues?.filter(
+                  (issue) =>
+                    issue?.state_detail?.group === "completed" &&
+                    (issue?.priority === "urgent" || issue?.priority === "high")
+                )?.length
+              }{" "}
+              of{" "}
+              {
+                issues?.filter(
+                  (issue) => issue?.priority === "urgent" || issue?.priority === "high"
+                )?.length
+              }
+            </div>
+          </div>
+        </div>
+        <div className="flex flex-col justify-between border-brand-base p-4">
+          <div className="flex items-start justify-between gap-4 py-1.5 text-xs">
+            <div className="flex items-center gap-3 text-brand-base">
+              <div className="flex items-center justify-center gap-1">
+                <span className="h-2.5 w-2.5 rounded-full bg-[#A9BBD0]" />
+                <span>Ideal</span>
+              </div>
+              <div className="flex items-center justify-center gap-1">
+                <span className="h-2.5 w-2.5 rounded-full bg-[#4C8FFF]" />
+                <span>Current</span>
+              </div>
+            </div>
+            <div className="flex items-center gap-1">
+              <span>
+                <LayerDiagonalIcon className="h-5 w-5 flex-shrink-0 text-brand-secondary" />
+              </span>
+              <span>
+                Pending Issues -{" "}
+                {cycle.total_issues - (cycle.completed_issues + cycle.cancelled_issues)}
+              </span>
+            </div>
+          </div>
+          <div className="relative h-64">
+            <ProgressChart
+              issues={issues ?? []}
+              start={cycle?.start_date ?? ""}
+              end={cycle?.end_date ?? ""}
+              width={475}
+              height={256}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/apps/app/components/cycles/active-cycle-stats.tsx b/apps/app/components/cycles/active-cycle-stats.tsx
new file mode 100644
index 000000000..2a8be9575
--- /dev/null
+++ b/apps/app/components/cycles/active-cycle-stats.tsx
@@ -0,0 +1,182 @@
+import React from "react";
+
+import Image from "next/image";
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// headless ui
+import { Tab } from "@headlessui/react";
+// services
+import issuesServices from "services/issues.service";
+import projectService from "services/project.service";
+// hooks
+import useLocalStorage from "hooks/use-local-storage";
+// components
+import { SingleProgressStats } from "components/core";
+// ui
+import { Avatar } from "components/ui";
+// icons
+import User from "public/user.png";
+// types
+import { IIssue, IIssueLabels } from "types";
+// fetch-keys
+import { PROJECT_ISSUE_LABELS, PROJECT_MEMBERS } from "constants/fetch-keys";
+// types
+type Props = {
+  issues: IIssue[];
+};
+
+export const ActiveCycleProgressStats: React.FC<Props> = ({ issues }) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { storedValue: tab, setValue: setTab } = useLocalStorage("activeCycleTab", "Assignees");
+
+  const { data: issueLabels } = useSWR<IIssueLabels[]>(
+    workspaceSlug && projectId ? PROJECT_ISSUE_LABELS(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => issuesServices.getIssueLabels(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const { data: members } = useSWR(
+    workspaceSlug && projectId ? PROJECT_MEMBERS(workspaceSlug as string) : null,
+    workspaceSlug && projectId
+      ? () => projectService.projectMembers(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const currentValue = (tab: string | null) => {
+    switch (tab) {
+      case "Assignees":
+        return 0;
+      case "Labels":
+        return 1;
+
+      default:
+        return 0;
+    }
+  };
+  return (
+    <Tab.Group
+      defaultIndex={currentValue(tab)}
+      onChange={(i) => {
+        switch (i) {
+          case 0:
+            return setTab("Assignees");
+          case 1:
+            return setTab("Labels");
+
+          default:
+            return setTab("Assignees");
+        }
+      }}
+    >
+      <Tab.List as="div" className="flex flex-wrap items-center justify-start gap-4 text-sm">
+        <Tab
+          className={({ selected }) =>
+            `px-3 py-1 text-brand-base rounded-3xl border border-brand-base ${
+              selected ? " bg-brand-accent text-white" : "  hover:bg-brand-surface-2"
+            }`
+          }
+        >
+          Assignees
+        </Tab>
+        <Tab
+          className={({ selected }) =>
+            `px-3 py-1 text-brand-base rounded-3xl border border-brand-base ${
+              selected ? " bg-brand-accent text-white" : "  hover:bg-brand-surface-2"
+            }`
+          }
+        >
+          Labels
+        </Tab>
+      </Tab.List>
+      <Tab.Panels className="flex w-full">
+        <Tab.Panel
+          as="div"
+          className="flex flex-col w-full mt-2 gap-1 items-center text-brand-secondary"
+        >
+          {members?.map((member, index) => {
+            const totalArray = issues?.filter((i) => i?.assignees?.includes(member.member.id));
+            const completeArray = totalArray?.filter((i) => i.state_detail.group === "completed");
+
+            if (totalArray.length > 0) {
+              return (
+                <SingleProgressStats
+                  key={index}
+                  title={
+                    <div className="flex items-center gap-2">
+                      <Avatar user={member.member} />
+                      <span>{member.member.first_name}</span>
+                    </div>
+                  }
+                  completed={completeArray.length}
+                  total={totalArray.length}
+                />
+              );
+            }
+          })}
+          {issues?.filter((i) => i?.assignees?.length === 0).length > 0 ? (
+            <SingleProgressStats
+              title={
+                <div className="flex items-center gap-2">
+                  <div className="h-5 w-5 rounded-full border-2 border-white bg-brand-surface-2">
+                    <Image
+                      src={User}
+                      height="100%"
+                      width="100%"
+                      className="rounded-full"
+                      alt="User"
+                    />
+                  </div>
+                  <span>No assignee</span>
+                </div>
+              }
+              completed={
+                issues?.filter(
+                  (i) => i?.state_detail.group === "completed" && i.assignees?.length === 0
+                ).length
+              }
+              total={issues?.filter((i) => i?.assignees?.length === 0).length}
+            />
+          ) : (
+            ""
+          )}
+        </Tab.Panel>
+        <Tab.Panel
+          as="div"
+          className="flex flex-col w-full mt-2 gap-1 items-center text-brand-secondary"
+        >
+          {issueLabels?.map((label, index) => {
+            const totalArray = issues?.filter((i) => i?.labels?.includes(label.id));
+            const completeArray = totalArray?.filter((i) => i?.state_detail.group === "completed");
+
+            if (totalArray.length > 0) {
+              return (
+                <SingleProgressStats
+                  key={index}
+                  title={
+                    <div className="flex items-center gap-2">
+                      <span
+                        className="block h-3 w-3 rounded-full"
+                        style={{
+                          backgroundColor:
+                            label.color && label.color !== "" ? label.color : "#000000",
+                        }}
+                      />
+                      <span className="text-xs capitalize">{label?.name}</span>
+                    </div>
+                  }
+                  completed={completeArray.length}
+                  total={totalArray.length}
+                />
+              );
+            }
+          })}
+        </Tab.Panel>
+      </Tab.Panels>
+    </Tab.Group>
+  );
+};
diff --git a/apps/app/components/cycles/cycles-list.tsx b/apps/app/components/cycles/all-cycles-board.tsx
similarity index 97%
rename from apps/app/components/cycles/cycles-list.tsx
rename to apps/app/components/cycles/all-cycles-board.tsx
index f8d607dbe..3aad828fd 100644
--- a/apps/app/components/cycles/cycles-list.tsx
+++ b/apps/app/components/cycles/all-cycles-board.tsx
@@ -17,7 +17,7 @@ type TCycleStatsViewProps = {
   type: "current" | "upcoming" | "draft";
 };
 
-export const CyclesList: React.FC<TCycleStatsViewProps> = ({
+export const AllCyclesBoard: React.FC<TCycleStatsViewProps> = ({
   cycles,
   setCreateUpdateCycleModal,
   setSelectedCycle,
diff --git a/apps/app/components/cycles/all-cycles-list.tsx b/apps/app/components/cycles/all-cycles-list.tsx
new file mode 100644
index 000000000..1230a1b9d
--- /dev/null
+++ b/apps/app/components/cycles/all-cycles-list.tsx
@@ -0,0 +1,86 @@
+import { useState } from "react";
+
+// components
+import { DeleteCycleModal, SingleCycleList } from "components/cycles";
+import { EmptyState, Loader } from "components/ui";
+// image
+import emptyCycle from "public/empty-state/empty-cycle.svg";
+// icon
+import { XMarkIcon } from "@heroicons/react/24/outline";
+// types
+import { ICycle, SelectCycleType } from "types";
+
+type TCycleStatsViewProps = {
+  cycles: ICycle[] | undefined;
+  setCreateUpdateCycleModal: React.Dispatch<React.SetStateAction<boolean>>;
+  setSelectedCycle: React.Dispatch<React.SetStateAction<SelectCycleType>>;
+  type: "current" | "upcoming" | "draft";
+};
+
+export const AllCyclesList: React.FC<TCycleStatsViewProps> = ({
+  cycles,
+  setCreateUpdateCycleModal,
+  setSelectedCycle,
+  type,
+}) => {
+  const [cycleDeleteModal, setCycleDeleteModal] = useState(false);
+  const [selectedCycleForDelete, setSelectedCycleForDelete] = useState<SelectCycleType>();
+
+  const handleDeleteCycle = (cycle: ICycle) => {
+    setSelectedCycleForDelete({ ...cycle, actionType: "delete" });
+    setCycleDeleteModal(true);
+  };
+
+  const handleEditCycle = (cycle: ICycle) => {
+    setSelectedCycle({ ...cycle, actionType: "edit" });
+    setCreateUpdateCycleModal(true);
+  };
+
+  return (
+    <>
+      <DeleteCycleModal
+        isOpen={
+          cycleDeleteModal &&
+          !!selectedCycleForDelete &&
+          selectedCycleForDelete.actionType === "delete"
+        }
+        setIsOpen={setCycleDeleteModal}
+        data={selectedCycleForDelete}
+      />
+      {cycles ? (
+        cycles.length > 0 ? (
+          <div>
+            {cycles.map((cycle) => (
+              <div className="hover:bg-brand-surface-2">
+                <div className="flex flex-col border-brand-base">
+                  <SingleCycleList
+                    key={cycle.id}
+                    cycle={cycle}
+                    handleDeleteCycle={() => handleDeleteCycle(cycle)}
+                    handleEditCycle={() => handleEditCycle(cycle)}
+                  />
+                </div>
+              </div>
+            ))}
+          </div>
+        ) : type === "current" ? (
+          <div className="flex w-full items-center justify-start rounded-[10px] bg-brand-surface-2 px-6 py-4">
+            <h3 className="text-base font-medium text-brand-base ">No current cycle is present.</h3>
+          </div>
+        ) : (
+          <EmptyState
+            type="cycle"
+            title="Create New Cycle"
+            description="Sprint more effectively with Cycles by confining your project
+          to a fixed amount of time. Create new cycle now."
+            imgURL={emptyCycle}
+          />
+        )
+      ) : (
+        <Loader className="grid grid-cols-1 gap-9 md:grid-cols-2 lg:grid-cols-3">
+          <Loader.Item height="200px" />
+        </Loader>
+      )}
+    </>
+  );
+};
diff --git a/apps/app/components/cycles/completed-cycles-list.tsx b/apps/app/components/cycles/completed-cycles.tsx
similarity index 66%
rename from apps/app/components/cycles/completed-cycles-list.tsx
rename to apps/app/components/cycles/completed-cycles.tsx
index 6729ceeeb..761eb8f3a 100644
--- a/apps/app/components/cycles/completed-cycles-list.tsx
+++ b/apps/app/components/cycles/completed-cycles.tsx
@@ -7,9 +7,9 @@ import useSWR from "swr";
 // services
 import cyclesService from "services/cycles.service";
 // components
-import { DeleteCycleModal, SingleCycleCard } from "components/cycles";
+import { DeleteCycleModal, SingleCycleCard, SingleCycleList } from "components/cycles";
 // icons
-import { CompletedCycleIcon, ExclamationIcon } from "components/icons";
+import { ExclamationIcon } from "components/icons";
 // types
 import { ICycle, SelectCycleType } from "types";
 // fetch-keys
@@ -19,11 +19,13 @@ import { EmptyState, Loader } from "components/ui";
 import emptyCycle from "public/empty-state/empty-cycle.svg";
 
 export interface CompletedCyclesListProps {
+  cycleView: string;
   setCreateUpdateCycleModal: React.Dispatch<React.SetStateAction<boolean>>;
   setSelectedCycle: React.Dispatch<React.SetStateAction<SelectCycleType>>;
 }
 
-export const CompletedCyclesList: React.FC<CompletedCyclesListProps> = ({
+export const CompletedCycles: React.FC<CompletedCyclesListProps> = ({
+  cycleView,
   setCreateUpdateCycleModal,
   setSelectedCycle,
 }) => {
@@ -72,17 +74,35 @@ export const CompletedCyclesList: React.FC<CompletedCyclesListProps> = ({
               />
               <span>Completed cycles are not editable.</span>
             </div>
-            <div className="grid grid-cols-1 gap-9 md:grid-cols-2 lg:grid-cols-3">
-              {completedCycles.completed_cycles.map((cycle) => (
-                <SingleCycleCard
-                  key={cycle.id}
-                  cycle={cycle}
-                  handleDeleteCycle={() => handleDeleteCycle(cycle)}
-                  handleEditCycle={() => handleEditCycle(cycle)}
-                  isCompleted
-                />
-              ))}
-            </div>
+            {cycleView === "list" ? (
+              <div>
+                {completedCycles.completed_cycles.map((cycle) => (
+                  <div className="hover:bg-brand-surface-2">
+                    <div className="flex flex-col border-brand-base">
+                      <SingleCycleList
+                        key={cycle.id}
+                        cycle={cycle}
+                        handleDeleteCycle={() => handleDeleteCycle(cycle)}
+                        handleEditCycle={() => handleEditCycle(cycle)}
+                        isCompleted
+                      />
+                    </div>
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <div className="grid grid-cols-1 gap-9 md:grid-cols-2 lg:grid-cols-3">
+                {completedCycles.completed_cycles.map((cycle) => (
+                  <SingleCycleCard
+                    key={cycle.id}
+                    cycle={cycle}
+                    handleDeleteCycle={() => handleDeleteCycle(cycle)}
+                    handleEditCycle={() => handleEditCycle(cycle)}
+                    isCompleted
+                  />
+                ))}
+              </div>
+            )}
           </div>
         ) : (
           <EmptyState
diff --git a/apps/app/components/cycles/cycles-view.tsx b/apps/app/components/cycles/cycles-view.tsx
new file mode 100644
index 000000000..821e181e7
--- /dev/null
+++ b/apps/app/components/cycles/cycles-view.tsx
@@ -0,0 +1,207 @@
+import React from "react";
+import dynamic from "next/dynamic";
+// headless ui
+import { Tab } from "@headlessui/react";
+// hooks
+import useLocalStorage from "hooks/use-local-storage";
+// components
+import {
+  ActiveCycleDetails,
+  CompletedCyclesListProps,
+  AllCyclesBoard,
+  AllCyclesList,
+  CompletedCycles,
+} from "components/cycles";
+// ui
+import { Loader } from "components/ui";
+// icons
+import { ListBulletIcon, Squares2X2Icon } from "@heroicons/react/24/outline";
+// types
+import {
+  SelectCycleType,
+  ICycle,
+  CurrentAndUpcomingCyclesResponse,
+  DraftCyclesResponse,
+} from "types";
+
+type Props = {
+  cycleView: string;
+  setCycleView: React.Dispatch<React.SetStateAction<string>>;
+  setSelectedCycle: React.Dispatch<React.SetStateAction<SelectCycleType>>;
+  setCreateUpdateCycleModal: React.Dispatch<React.SetStateAction<boolean>>;
+  cyclesCompleteList: ICycle[] | undefined;
+  currentAndUpcomingCycles: CurrentAndUpcomingCyclesResponse | undefined;
+  draftCycles: DraftCyclesResponse | undefined;
+};
+
+export const CyclesView: React.FC<Props> = ({
+  cycleView,
+  setCycleView,
+  setSelectedCycle,
+  setCreateUpdateCycleModal,
+  cyclesCompleteList,
+  currentAndUpcomingCycles,
+  draftCycles,
+}) => {
+  const { storedValue: cycleTab, setValue: setCycleTab } = useLocalStorage("cycleTab", "All");
+
+  const currentTabValue = (tab: string | null) => {
+    switch (tab) {
+      case "All":
+        return 0;
+      case "Active":
+        return 1;
+      case "Upcoming":
+        return 2;
+      case "Completed":
+        return 3;
+      case "Drafts":
+        return 4;
+      default:
+        return 0;
+    }
+  };
+
+  const CompletedCycles = dynamic<CompletedCyclesListProps>(
+    () => import("components/cycles").then((a) => a.CompletedCycles),
+    {
+      ssr: false,
+      loading: () => (
+        <Loader className="mb-5">
+          <Loader.Item height="12rem" width="100%" />
+        </Loader>
+      ),
+    }
+  );
+
+  return (
+    <div>
+      <Tab.Group
+        defaultIndex={currentTabValue(cycleTab)}
+        onChange={(i) => {
+          switch (i) {
+            case 0:
+              return setCycleTab("All");
+            case 1:
+              return setCycleTab("Active");
+            case 2:
+              return setCycleTab("Upcoming");
+            case 3:
+              return setCycleTab("Completed");
+            case 4:
+              return setCycleTab("Drafts");
+
+            default:
+              return setCycleTab("All");
+          }
+        }}
+      >
+        {" "}
+        <div className="flex justify-between">
+          <Tab.List as="div" className="flex flex-wrap items-center justify-start gap-4 text-base">
+            {["All", "Active", "Upcoming", "Completed", "Drafts"].map((tab, index) => (
+              <Tab
+                key={index}
+                className={({ selected }) =>
+                  `rounded-3xl border px-6 py-1 outline-none ${
+                    selected
+                      ? "border-brand-accent bg-brand-accent text-white font-medium"
+                      : "border-brand-base bg-brand-base hover:bg-brand-surface-2"
+                  }`
+                }
+              >
+                {tab}
+              </Tab>
+            ))}
+          </Tab.List>
+          {cycleTab !== "Active" && (
+            <div className="flex items-center gap-x-1">
+              <button
+                type="button"
+                className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-2`}
+                onClick={() => setCycleView("list")}
+              >
+                <ListBulletIcon className="h-4 w-4 text-brand-secondary" />
+              </button>
+              <button
+                type="button"
+                className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-2`}
+                onClick={() => setCycleView("board")}
+              >
+                <Squares2X2Icon className="h-4 w-4 text-brand-secondary" />
+              </button>
+            </div>
+          )}
+        </div>
+        <Tab.Panels>
+          <Tab.Panel as="div" className="mt-7 space-y-5">
+            {cycleView === "list" && (
+              <AllCyclesList
+                cycles={cyclesCompleteList}
+                setCreateUpdateCycleModal={setCreateUpdateCycleModal}
+                setSelectedCycle={setSelectedCycle}
+                type="current"
+              />
+            )}
+            {cycleView === "board" && (
+              <AllCyclesBoard
+                cycles={cyclesCompleteList}
+                setCreateUpdateCycleModal={setCreateUpdateCycleModal}
+                setSelectedCycle={setSelectedCycle}
+                type="current"
+              />
+            )}
+          </Tab.Panel>
+          <Tab.Panel as="div" className="mt-7 space-y-5">
+            {currentAndUpcomingCycles?.current_cycle?.[0] && (
+              <ActiveCycleDetails cycle={currentAndUpcomingCycles?.current_cycle?.[0]} />
+            )}
+          </Tab.Panel>
+          <Tab.Panel as="div" className="mt-7 space-y-5">
+            {cycleView === "list" && (
+              <AllCyclesList
+                cycles={currentAndUpcomingCycles?.upcoming_cycle}
+                setCreateUpdateCycleModal={setCreateUpdateCycleModal}
+                setSelectedCycle={setSelectedCycle}
+                type="upcoming"
+              />
+            )}
+            {cycleView === "board" && (
+              <AllCyclesBoard
+                cycles={currentAndUpcomingCycles?.upcoming_cycle}
+                setCreateUpdateCycleModal={setCreateUpdateCycleModal}
+                setSelectedCycle={setSelectedCycle}
+                type="upcoming"
+              />
+            )}
+          </Tab.Panel>
+          <Tab.Panel as="div" className="mt-7 space-y-5">
+            <CompletedCycles
+              cycleView={cycleView}
+              setCreateUpdateCycleModal={setCreateUpdateCycleModal}
+              setSelectedCycle={setSelectedCycle}
+            />
+          </Tab.Panel>
+          <Tab.Panel as="div" className="mt-7 space-y-5">
+            {cycleView === "list" && (
+              <AllCyclesList
+                cycles={draftCycles?.draft_cycles}
+                setCreateUpdateCycleModal={setCreateUpdateCycleModal}
+                setSelectedCycle={setSelectedCycle}
+                type="draft"
+              />
+            )}
+            {cycleView === "board" && (
+              <AllCyclesBoard
+                cycles={draftCycles?.draft_cycles}
+                setCreateUpdateCycleModal={setCreateUpdateCycleModal}
+                setSelectedCycle={setSelectedCycle}
+                type="draft"
+              />
+            )}
+          </Tab.Panel>
+        </Tab.Panels>
+      </Tab.Group>
+    </div>
+  );
+};
diff --git a/apps/app/components/cycles/delete-cycle-modal.tsx b/apps/app/components/cycles/delete-cycle-modal.tsx
index 58b670f3a..136a9b847 100644
--- a/apps/app/components/cycles/delete-cycle-modal.tsx
+++ b/apps/app/components/cycles/delete-cycle-modal.tsx
@@ -29,6 +29,7 @@ type TConfirmCycleDeletionProps = {
 import {
   CYCLE_COMPLETE_LIST,
   CYCLE_CURRENT_AND_UPCOMING_LIST,
+  CYCLE_DETAILS,
   CYCLE_DRAFT_LIST,
   CYCLE_LIST,
 } from "constants/fetch-keys";
@@ -114,6 +115,14 @@ export const DeleteCycleModal: React.FC<TConfirmCycleDeletionProps> = ({
               false
             );
         }
+        mutate(
+          CYCLE_DETAILS(projectId as string),
+          (prevData: any) => {
+            if (!prevData) return;
+            return prevData.filter((cycle: any) => cycle.id !== data?.id);
+          },
+          false
+        );
         handleClose();
 
         setToastAlert({
diff --git a/apps/app/components/cycles/index.ts b/apps/app/components/cycles/index.ts
index 558801598..73fa92d88 100644
--- a/apps/app/components/cycles/index.ts
+++ b/apps/app/components/cycles/index.ts
@@ -1,11 +1,16 @@
-export * from "./completed-cycles-list";
-export * from "./cycles-list";
+export * from "./active-cycle-details";
+export * from "./cycles-view";
+export * from "./completed-cycles";
+export * from "./all-cycles-board";
+export * from "./all-cycles-list";
 export * from "./delete-cycle-modal";
 export * from "./form";
 export * from "./modal";
 export * from "./select";
 export * from "./sidebar";
+export * from "./single-cycle-list";
 export * from "./single-cycle-card";
 export * from "./empty-cycle";
 export * from "./transfer-issues-modal";
-export * from "./transfer-issues";
\ No newline at end of file
+export * from "./transfer-issues";
+export * from "./active-cycle-stats";
diff --git a/apps/app/components/cycles/modal.tsx b/apps/app/components/cycles/modal.tsx
index 968c6f46e..f96c680ca 100644
--- a/apps/app/components/cycles/modal.tsx
+++ b/apps/app/components/cycles/modal.tsx
@@ -20,6 +20,7 @@ import type { ICycle } from "types";
 import {
   CYCLE_COMPLETE_LIST,
   CYCLE_CURRENT_AND_UPCOMING_LIST,
+  CYCLE_DETAILS,
   CYCLE_DRAFT_LIST,
   CYCLE_INCOMPLETE_LIST,
 } from "constants/fetch-keys";
@@ -58,6 +59,7 @@ export const CreateUpdateCycleModal: React.FC<CycleModalProps> = ({
             mutate(CYCLE_DRAFT_LIST(projectId as string));
         }
         mutate(CYCLE_INCOMPLETE_LIST(projectId as string));
+        mutate(CYCLE_DETAILS(projectId as string));
         handleClose();
 
         setToastAlert({
@@ -92,6 +94,7 @@ export const CreateUpdateCycleModal: React.FC<CycleModalProps> = ({
           default:
             mutate(CYCLE_DRAFT_LIST(projectId as string));
         }
+        mutate(CYCLE_DETAILS(projectId as string));
         if (
           getDateRangeStatus(data?.start_date, data?.end_date) !=
           getDateRangeStatus(res.start_date, res.end_date)
diff --git a/apps/app/components/cycles/single-cycle-card.tsx b/apps/app/components/cycles/single-cycle-card.tsx
index a5e75b3f3..8021ebdfe 100644
--- a/apps/app/components/cycles/single-cycle-card.tsx
+++ b/apps/app/components/cycles/single-cycle-card.tsx
@@ -13,9 +13,19 @@ import useToast from "hooks/use-toast";
 // ui
 import { CustomMenu, LinearProgressIndicator, Tooltip } from "components/ui";
 import { Disclosure, Transition } from "@headlessui/react";
+import { AssigneesList, Avatar } from "components/ui/avatar";
+import { SingleProgressStats } from "components/core";
+
 // icons
-import { CalendarDaysIcon } from "@heroicons/react/20/solid";
-import { TargetIcon } from "components/icons";
+import { CalendarDaysIcon, ExclamationCircleIcon } from "@heroicons/react/20/solid";
+import {
+  TargetIcon,
+  ContrastIcon,
+  PersonRunningIcon,
+  ArrowRightIcon,
+  TriangleExclamationIcon,
+  AlarmClockIcon,
+} from "components/icons";
 import {
   ChevronDownIcon,
   LinkIcon,
@@ -24,7 +34,11 @@ import {
   TrashIcon,
 } from "@heroicons/react/24/outline";
 // helpers
-import { getDateRangeStatus, renderShortDateWithYearFormat } from "helpers/date-time.helper";
+import {
+  getDateRangeStatus,
+  renderShortDateWithYearFormat,
+  findHowManyDaysLeft,
+} from "helpers/date-time.helper";
 import { copyTextToClipboard, truncateText } from "helpers/string.helper";
 // types
 import {
@@ -86,14 +100,13 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = ({
 
   const { setToastAlert } = useToast();
 
+  const cycleStatus = getDateRangeStatus(cycle.start_date, cycle.end_date);
   const endDate = new Date(cycle.end_date ?? "");
   const startDate = new Date(cycle.start_date ?? "");
 
   const handleAddToFavorites = () => {
     if (!workspaceSlug || !projectId || !cycle) return;
 
-    const cycleStatus = getDateRangeStatus(cycle.start_date, cycle.end_date);
-
     switch (cycleStatus) {
       case "current":
       case "upcoming":
@@ -154,8 +167,6 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = ({
   const handleRemoveFromFavorites = () => {
     if (!workspaceSlug || !projectId || !cycle) return;
 
-    const cycleStatus = getDateRangeStatus(cycle.start_date, cycle.end_date);
-
     switch (cycleStatus) {
       case "current":
       case "upcoming":
@@ -236,69 +247,158 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = ({
     color: group.color,
   }));
 
+  const groupedIssues: any = {
+    backlog: cycle.backlog_issues,
+    unstarted: cycle.unstarted_issues,
+    started: cycle.started_issues,
+    completed: cycle.completed_issues,
+    cancelled: cycle.cancelled_issues,
+  };
+
   return (
     <div>
-      <div className="flex flex-col rounded-[10px] bg-brand-base text-xs shadow">
+      <div className="flex flex-col rounded-[10px] bg-brand-base border border-brand-base text-xs shadow">
         <Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`}>
           <a className="w-full">
             <div className="flex h-full flex-col gap-4 rounded-b-[10px] p-4">
-              <div className="flex items-start justify-between gap-1">
-                <Tooltip tooltipContent={cycle.name} position="top-left">
-                  <h3 className="break-all text-lg font-semibold">
-                    {truncateText(cycle.name, 75)}
-                  </h3>
-                </Tooltip>
-                {cycle.is_favorite ? (
-                  <button
-                    onClick={(e) => {
-                      e.preventDefault();
-                      handleRemoveFromFavorites();
-                    }}
+              <div className="flex items-center justify-between gap-1">
+                <span className="flex items-center gap-1">
+                  <ContrastIcon
+                    className="h-5 w-5"
+                    color={`${
+                      cycleStatus === "current"
+                        ? "#09A953"
+                        : cycleStatus === "upcoming"
+                        ? "#F7AE59"
+                        : cycleStatus === "completed"
+                        ? "#3F76FF"
+                        : cycleStatus === "draft"
+                        ? "#858E96"
+                        : ""
+                    }`}
+                  />
+                  <Tooltip tooltipContent={cycle.name} className="break-all" position="top-left">
+                    <h3 className="break-all text-lg font-semibold">
+                      {truncateText(cycle.name, 15)}
+                    </h3>
+                  </Tooltip>
+                </span>
+                <span className="flex items-center gap-1 capitalize">
+                  <span
+                    className={`rounded-full px-1.5 py-0.5
+                    ${
+                      cycleStatus === "current"
+                        ? "bg-green-600/5 text-green-600"
+                        : cycleStatus === "upcoming"
+                        ? "bg-orange-300/5 text-orange-300"
+                        : cycleStatus === "completed"
+                        ? "bg-blue-500/5 text-blue-500"
+                        : cycleStatus === "draft"
+                        ? "bg-neutral-400/5 text-neutral-400"
+                        : ""
+                    }`}
                   >
-                    <StarIcon className="h-4 w-4 text-orange-400" fill="#f6ad55" />
-                  </button>
-                ) : (
-                  <button
-                    onClick={(e) => {
-                      e.preventDefault();
-                      handleAddToFavorites();
-                    }}
-                  >
-                    <StarIcon className="h-4 w-4 " color="#858E96" />
-                  </button>
+                    {cycleStatus === "current" ? (
+                      <span className="flex gap-1">
+                        <PersonRunningIcon className="h-4 w-4" />
+                        {findHowManyDaysLeft(cycle.end_date ?? new Date())} Days Left
+                      </span>
+                    ) : cycleStatus === "upcoming" ? (
+                      <span className="flex gap-1">
+                        <AlarmClockIcon className="h-4 w-4" />
+                        {findHowManyDaysLeft(cycle.start_date ?? new Date())} Days Left
+                      </span>
+                    ) : cycleStatus === "completed" ? (
+                      <span className="flex gap-1">
+                        {cycle.total_issues - cycle.completed_issues > 0 && (
+                          <Tooltip
+                            tooltipContent={`${
+                              cycle.total_issues - cycle.completed_issues
+                            } more pending ${
+                              cycle.total_issues - cycle.completed_issues === 1 ? "issue" : "issues"
+                            }`}
+                          >
+                            <span>
+                              <TriangleExclamationIcon className="h-3.5 w-3.5 fill-current" />
+                            </span>
+                          </Tooltip>
+                        )}{" "}
+                        Completed
+                      </span>
+                    ) : (
+                      cycleStatus
+                    )}
+                  </span>
+                  {cycle.is_favorite ? (
+                    <button
+                      onClick={(e) => {
+                        e.preventDefault();
+                        handleRemoveFromFavorites();
+                      }}
+                    >
+                      <StarIcon className="h-4 w-4 text-orange-400" fill="#f6ad55" />
+                    </button>
+                  ) : (
+                    <button
+                      onClick={(e) => {
+                        e.preventDefault();
+                        handleAddToFavorites();
+                      }}
+                    >
+                      <StarIcon className="h-4 w-4 " color="#858E96" />
+                    </button>
+                  )}
+                </span>
+              </div>
+              <div className="flex h-4 items-center justify-start gap-5 text-brand-secondary">
+                {cycleStatus !== "draft" && (
+                  <>
+                    <div className="flex items-start gap-1">
+                      <CalendarDaysIcon className="h-4 w-4" />
+                      <span>{renderShortDateWithYearFormat(startDate)}</span>
+                    </div>
+                    <ArrowRightIcon className="h-4 w-4" />
+                    <div className="flex items-start gap-1">
+                      <TargetIcon className="h-4 w-4" />
+                      <span>{renderShortDateWithYearFormat(endDate)}</span>
+                    </div>
+                  </>
                 )}
               </div>
 
-              <div className="flex items-center justify-start gap-5 text-brand-secondary">
-                <div className="flex items-start gap-1 ">
-                  <CalendarDaysIcon className="h-4 w-4" />
-                  <span>Start :</span>
-                  <span>{renderShortDateWithYearFormat(startDate)}</span>
+              <div className="flex justify-between items-end">
+                <div className="flex flex-col gap-2 text-xs text-brand-secondary">
+                  <div className="flex items-center gap-2">
+                    <div className="w-16">Creator:</div>
+                    <div className="flex items-center gap-2.5 text-brand-secondary">
+                      {cycle.owned_by.avatar && cycle.owned_by.avatar !== "" ? (
+                        <Image
+                          src={cycle.owned_by.avatar}
+                          height={16}
+                          width={16}
+                          className="rounded-full"
+                          alt={cycle.owned_by.first_name}
+                        />
+                      ) : (
+                        <span className="bg-brand-secondary flex h-5 w-5 items-center justify-center rounded-full bg-orange-300 capitalize  text-white">
+                          {cycle.owned_by.first_name.charAt(0)}
+                        </span>
+                      )}
+                      <span className="text-brand-secondary">{cycle.owned_by.first_name}</span>
+                    </div>
+                  </div>
+                  <div className="flex h-5 items-center gap-2">
+                    <div className="w-16">Members:</div>
+                    {cycle.assignees.length > 0 ? (
+                      <div className="flex items-center gap-1 text-brand-secondary">
+                        <AssigneesList users={cycle.assignees} length={4} />
+                      </div>
+                    ) : (
+                      "No members"
+                    )}
+                  </div>
                 </div>
-                <div className="flex items-start gap-1 ">
-                  <TargetIcon className="h-4 w-4" />
-                  <span>End :</span>
-                  <span>{renderShortDateWithYearFormat(endDate)}</span>
-                </div>
-              </div>
 
-              <div className="mt-4 flex items-center justify-between text-brand-secondary">
-                <div className="flex items-center gap-2.5">
-                  {cycle.owned_by.avatar && cycle.owned_by.avatar !== "" ? (
-                    <Image
-                      src={cycle.owned_by.avatar}
-                      height={16}
-                      width={16}
-                      className="rounded-full"
-                      alt={cycle.owned_by.first_name}
-                    />
-                  ) : (
-                    <span className="bg-brand-secondary flex h-5 w-5 items-center justify-center rounded-full capitalize">
-                      {cycle.owned_by.first_name.charAt(0)}
-                    </span>
-                  )}
-                  <span>{cycle.owned_by.first_name}</span>
-                </div>
                 <div className="flex items-center">
                   {!isCompleted && (
                     <button
@@ -306,7 +406,7 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = ({
                         e.preventDefault();
                         handleEditCycle();
                       }}
-                      className="flex cursor-pointer items-center rounded p-1 duration-300 hover:bg-brand-surface-1"
+                      className="flex cursor-pointer items-center rounded p-1 text-brand-secondary duration-300 hover:bg-brand-surface-1"
                     >
                       <span>
                         <PencilIcon className="h-4 w-4" />
@@ -356,7 +456,35 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = ({
               >
                 <div className="flex w-full items-center gap-2 px-4 py-1">
                   <span>Progress</span>
-                  <LinearProgressIndicator data={progressIndicatorData} />
+                  <Tooltip
+                    tooltipContent={
+                      <div className="flex w-56 flex-col">
+                        {Object.keys(groupedIssues).map((group, index) => (
+                          <SingleProgressStats
+                            key={index}
+                            title={
+                              <div className="flex items-center gap-2">
+                                <span
+                                  className="block h-3 w-3 rounded-full "
+                                  style={{
+                                    backgroundColor: stateGroups[index].color,
+                                  }}
+                                />
+                                <span className="text-xs capitalize">{group}</span>
+                              </div>
+                            }
+                            completed={groupedIssues[group]}
+                            total={cycle.total_issues}
+                          />
+                        ))}
+                      </div>
+                    }
+                    position="bottom"
+                  >
+                    <div className="flex w-full items-center">
+                      <LinearProgressIndicator data={progressIndicatorData} noTooltip={true} />
+                    </div>
+                  </Tooltip>
                   <Disclosure.Button>
                     <span className="p-1">
                       <ChevronDownIcon
diff --git a/apps/app/components/cycles/single-cycle-list.tsx b/apps/app/components/cycles/single-cycle-list.tsx
new file mode 100644
index 000000000..b3b27005e
--- /dev/null
+++ b/apps/app/components/cycles/single-cycle-list.tsx
@@ -0,0 +1,510 @@
+import React, { useEffect, useState } from "react";
+
+import Link from "next/link";
+import Image from "next/image";
+import { useRouter } from "next/router";
+
+import { mutate } from "swr";
+
+// services
+import cyclesService from "services/cycles.service";
+// hooks
+import useToast from "hooks/use-toast";
+// ui
+import { CustomMenu, LinearProgressIndicator, Tooltip } from "components/ui";
+
+// icons
+import { CalendarDaysIcon, ExclamationCircleIcon } from "@heroicons/react/20/solid";
+import {
+  TargetIcon,
+  ContrastIcon,
+  PersonRunningIcon,
+  ArrowRightIcon,
+  TriangleExclamationIcon,
+  AlarmClockIcon,
+} from "components/icons";
+import { LinkIcon, PencilIcon, StarIcon, TrashIcon } from "@heroicons/react/24/outline";
+// helpers
+import {
+  getDateRangeStatus,
+  renderShortDateWithYearFormat,
+  findHowManyDaysLeft,
+} from "helpers/date-time.helper";
+import { copyTextToClipboard, truncateText } from "helpers/string.helper";
+// types
+import {
+  CompletedCyclesResponse,
+  CurrentAndUpcomingCyclesResponse,
+  DraftCyclesResponse,
+  ICycle,
+} from "types";
+// fetch-keys
+import {
+  CYCLE_COMPLETE_LIST,
+  CYCLE_CURRENT_AND_UPCOMING_LIST,
+  CYCLE_DRAFT_LIST,
+} from "constants/fetch-keys";
+import { type } from "os";
+
+type TSingleStatProps = {
+  cycle: ICycle;
+  handleEditCycle: () => void;
+  handleDeleteCycle: () => void;
+  isCompleted?: boolean;
+};
+
+const stateGroups = [
+  {
+    key: "backlog_issues",
+    title: "Backlog",
+    color: "#dee2e6",
+  },
+  {
+    key: "unstarted_issues",
+    title: "Unstarted",
+    color: "#26b5ce",
+  },
+  {
+    key: "started_issues",
+    title: "Started",
+    color: "#f7ae59",
+  },
+  {
+    key: "cancelled_issues",
+    title: "Cancelled",
+    color: "#d687ff",
+  },
+  {
+    key: "completed_issues",
+    title: "Completed",
+    color: "#09a953",
+  },
+];
+
+type progress = {
+  progress: number;
+};
+
+function RadialProgressBar({ progress }: progress) {
+  const [circumference, setCircumference] = useState(0);
+
+  useEffect(() => {
+    const radius = 40;
+    const circumference = 2 * Math.PI * radius;
+    setCircumference(circumference);
+  }, []);
+
+  const progressOffset = ((100 - progress) / 100) * circumference;
+
+  return (
+    <div className="relative h-4 w-4">
+      <svg className="absolute top-0 left-0" viewBox="0 0 100 100">
+        <circle
+          className={"stroke-current opacity-10"}
+          cx="50"
+          cy="50"
+          r="40"
+          strokeWidth="12"
+          fill="none"
+          strokeDasharray={`${circumference} ${circumference}`}
+        />
+        <circle
+          className={`stroke-current`}
+          cx="50"
+          cy="50"
+          r="40"
+          strokeWidth="12"
+          fill="none"
+          strokeDasharray={`${circumference} ${circumference}`}
+          strokeDashoffset={progressOffset}
+          transform="rotate(-90 50 50)"
+        />
+      </svg>
+    </div>
+  );
+}
+export const SingleCycleList: React.FC<TSingleStatProps> = ({
+  cycle,
+  handleEditCycle,
+  handleDeleteCycle,
+  isCompleted = false,
+}) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const cycleStatus = getDateRangeStatus(cycle.start_date, cycle.end_date);
+  const endDate = new Date(cycle.end_date ?? "");
+  const startDate = new Date(cycle.start_date ?? "");
+
+  const handleAddToFavorites = () => {
+    if (!workspaceSlug || !projectId || !cycle) return;
+
+    switch (cycleStatus) {
+      case "current":
+      case "upcoming":
+        mutate<CurrentAndUpcomingCyclesResponse>(
+          CYCLE_CURRENT_AND_UPCOMING_LIST(projectId as string),
+          (prevData) => ({
+            current_cycle: (prevData?.current_cycle ?? []).map((c) => ({
+              ...c,
+              is_favorite: c.id === cycle.id ? true : c.is_favorite,
+            })),
+            upcoming_cycle: (prevData?.upcoming_cycle ?? []).map((c) => ({
+              ...c,
+              is_favorite: c.id === cycle.id ? true : c.is_favorite,
+            })),
+          }),
+          false
+        );
+        break;
+      case "completed":
+        mutate<CompletedCyclesResponse>(
+          CYCLE_COMPLETE_LIST(projectId as string),
+          (prevData) => ({
+            completed_cycles: (prevData?.completed_cycles ?? []).map((c) => ({
+              ...c,
+              is_favorite: c.id === cycle.id ? true : c.is_favorite,
+            })),
+          }),
+          false
+        );
+        break;
+      case "draft":
+        mutate<DraftCyclesResponse>(
+          CYCLE_DRAFT_LIST(projectId as string),
+          (prevData) => ({
+            draft_cycles: (prevData?.draft_cycles ?? []).map((c) => ({
+              ...c,
+              is_favorite: c.id === cycle.id ? true : c.is_favorite,
+            })),
+          }),
+          false
+        );
+        break;
+    }
+
+    cyclesService
+      .addCycleToFavorites(workspaceSlug as string, projectId as string, {
+        cycle: cycle.id,
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Couldn't add the cycle to favorites. Please try again.",
+        });
+      });
+  };
+
+  const handleRemoveFromFavorites = () => {
+    if (!workspaceSlug || !projectId || !cycle) return;
+
+    switch (cycleStatus) {
+      case "current":
+      case "upcoming":
+        mutate<CurrentAndUpcomingCyclesResponse>(
+          CYCLE_CURRENT_AND_UPCOMING_LIST(projectId as string),
+          (prevData) => ({
+            current_cycle: (prevData?.current_cycle ?? []).map((c) => ({
+              ...c,
+              is_favorite: c.id === cycle.id ? false : c.is_favorite,
+            })),
+            upcoming_cycle: (prevData?.upcoming_cycle ?? []).map((c) => ({
+              ...c,
+              is_favorite: c.id === cycle.id ? false : c.is_favorite,
+            })),
+          }),
+          false
+        );
+        break;
+      case "completed":
+        mutate<CompletedCyclesResponse>(
+          CYCLE_COMPLETE_LIST(projectId as string),
+          (prevData) => ({
+            completed_cycles: (prevData?.completed_cycles ?? []).map((c) => ({
+              ...c,
+              is_favorite: c.id === cycle.id ? false : c.is_favorite,
+            })),
+          }),
+          false
+        );
+        break;
+      case "draft":
+        mutate<DraftCyclesResponse>(
+          CYCLE_DRAFT_LIST(projectId as string),
+          (prevData) => ({
+            draft_cycles: (prevData?.draft_cycles ?? []).map((c) => ({
+              ...c,
+              is_favorite: c.id === cycle.id ? false : c.is_favorite,
+            })),
+          }),
+          false
+        );
+        break;
+    }
+
+    cyclesService
+      .removeCycleFromFavorites(workspaceSlug as string, projectId as string, cycle.id)
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Couldn't remove the cycle from favorites. Please try again.",
+        });
+      });
+  };
+
+  const handleCopyText = () => {
+    const originURL =
+      typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
+
+    copyTextToClipboard(
+      `${originURL}/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`
+    ).then(() => {
+      setToastAlert({
+        type: "success",
+        title: "Link Copied!",
+        message: "Cycle link copied to clipboard.",
+      });
+    });
+  };
+
+  const progressIndicatorData = stateGroups.map((group, index) => ({
+    id: index,
+    name: group.title,
+    value:
+      cycle.total_issues > 0
+        ? ((cycle[group.key as keyof ICycle] as number) / cycle.total_issues) * 100
+        : 0,
+    color: group.color,
+  }));
+
+  return (
+    <div>
+      <div className="flex flex-col border-b border-brand-base text-xs  hover:bg-brand-surface-2">
+        <Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`}>
+          <a className="w-full">
+            <div className="flex h-full flex-col gap-4 rounded-b-[10px] p-4">
+              <div className="flex items-center justify-between gap-1">
+                <span className="flex items-start gap-2">
+                  <ContrastIcon
+                    className="mt-1 h-5 w-5"
+                    color={`${
+                      cycleStatus === "current"
+                        ? "#09A953"
+                        : cycleStatus === "upcoming"
+                        ? "#F7AE59"
+                        : cycleStatus === "completed"
+                        ? "#3F76FF"
+                        : cycleStatus === "draft"
+                        ? "#858E96"
+                        : ""
+                    }`}
+                  />
+                  <div>
+                    <Tooltip tooltipContent={cycle.name} className="break-all" position="top-left">
+                      <h3 className="break-all text-base font-semibold">
+                        {truncateText(cycle.name, 70)}
+                      </h3>
+                    </Tooltip>
+                    <p className="mt-2 text-brand-secondary">{cycle.description}</p>
+                  </div>
+                </span>
+                <span className="flex items-center gap-4 capitalize">
+                  <span
+                    className={`rounded-full px-1.5 py-0.5
+                    ${
+                      cycleStatus === "current"
+                        ? "bg-green-600/5 text-green-600"
+                        : cycleStatus === "upcoming"
+                        ? "bg-orange-300/5 text-orange-300"
+                        : cycleStatus === "completed"
+                        ? "bg-blue-500/5 text-blue-500"
+                        : cycleStatus === "draft"
+                        ? "bg-neutral-400/5 text-neutral-400"
+                        : ""
+                    }`}
+                  >
+                    {cycleStatus === "current" ? (
+                      <span className="flex gap-1">
+                        <PersonRunningIcon className="h-4 w-4" />
+                        {findHowManyDaysLeft(cycle.end_date ?? new Date())} Days Left
+                      </span>
+                    ) : cycleStatus === "upcoming" ? (
+                      <span className="flex gap-1">
+                        <AlarmClockIcon className="h-4 w-4" />
+                        {findHowManyDaysLeft(cycle.start_date ?? new Date())} Days Left
+                      </span>
+                    ) : cycleStatus === "completed" ? (
+                      <span className="flex items-center gap-1">
+                        {cycle.total_issues - cycle.completed_issues > 0 && (
+                          <Tooltip
+                            tooltipContent={`${
+                              cycle.total_issues - cycle.completed_issues
+                            } more pending ${
+                              cycle.total_issues - cycle.completed_issues === 1 ? "issue" : "issues"
+                            }`}
+                          >
+                            <span>
+                              <TriangleExclamationIcon className="h-3.5 w-3.5 fill-current" />
+                            </span>
+                          </Tooltip>
+                        )}{" "}
+                        Completed
+                      </span>
+                    ) : (
+                      cycleStatus
+                    )}
+                  </span>
+
+                  {cycleStatus !== "draft" && (
+                    <div className="flex items-center justify-start gap-2 text-brand-secondary">
+                      <div className="flex items-start gap-1 ">
+                        <CalendarDaysIcon className="h-4 w-4" />
+                        <span>{renderShortDateWithYearFormat(startDate)}</span>
+                      </div>
+                      <ArrowRightIcon className="h-4 w-4" />
+                      <div className="flex items-start gap-1 ">
+                        <TargetIcon className="h-4 w-4" />
+                        <span>{renderShortDateWithYearFormat(endDate)}</span>
+                      </div>
+                    </div>
+                  )}
+
+                  <div className="flex items-center gap-2.5 text-brand-secondary">
+                    {cycle.owned_by.avatar && cycle.owned_by.avatar !== "" ? (
+                      <Image
+                        src={cycle.owned_by.avatar}
+                        height={16}
+                        width={16}
+                        className="rounded-full"
+                        alt={cycle.owned_by.first_name}
+                      />
+                    ) : (
+                      <span className="bg-brand-secondary flex h-5 w-5 items-center justify-center rounded-full bg-orange-300 capitalize  text-white">
+                        {cycle.owned_by.first_name.charAt(0)}
+                      </span>
+                    )}
+                  </div>
+                  <Tooltip
+                    position="top-right"
+                    tooltipContent={
+                      <div className="flex w-80 items-center gap-2 px-4 py-1">
+                        <span>Progress</span>
+                        <LinearProgressIndicator data={progressIndicatorData} />
+                      </div>
+                    }
+                  >
+                    <span
+                      className={`rounded-md px-1.5 py-1
+                    ${
+                      cycleStatus === "current"
+                        ? "border border-green-600 bg-green-600/5 text-green-600"
+                        : cycleStatus === "upcoming"
+                        ? "border border-orange-300 bg-orange-300/5 text-orange-300"
+                        : cycleStatus === "completed"
+                        ? "border border-blue-500 bg-blue-500/5 text-blue-500"
+                        : cycleStatus === "draft"
+                        ? "border border-neutral-400 bg-neutral-400/5 text-neutral-400"
+                        : ""
+                    }`}
+                    >
+                      {cycleStatus === "current" ? (
+                        <span className="flex gap-1">
+                          <RadialProgressBar
+                            progress={(cycle.completed_issues / cycle.total_issues) * 100}
+                          />
+                          <span>
+                            {Math.floor((cycle.completed_issues / cycle.total_issues) * 100)} %
+                          </span>
+                        </span>
+                      ) : cycleStatus === "upcoming" ? (
+                        <span className="flex gap-1">
+                          <RadialProgressBar progress={100} /> Yet to start
+                        </span>
+                      ) : cycleStatus === "completed" ? (
+                        <span className="flex gap-1">
+                          <RadialProgressBar progress={100} />
+                          <span>{100} %</span>
+                        </span>
+                      ) : (
+                        <span className="flex gap-1">
+                          <RadialProgressBar
+                            progress={(cycle.total_issues / cycle.completed_issues) * 100}
+                          />
+                          {cycleStatus}
+                        </span>
+                      )}
+                    </span>
+                  </Tooltip>
+                  {cycle.is_favorite ? (
+                    <button
+                      onClick={(e) => {
+                        e.preventDefault();
+                        handleRemoveFromFavorites();
+                      }}
+                    >
+                      <StarIcon className="h-4 w-4 text-orange-400" fill="#f6ad55" />
+                    </button>
+                  ) : (
+                    <button
+                      onClick={(e) => {
+                        e.preventDefault();
+                        handleAddToFavorites();
+                      }}
+                    >
+                      <StarIcon className="h-4 w-4 " color="#858E96" />
+                    </button>
+                  )}
+                  <div className="flex items-center">
+                    <CustomMenu width="auto" verticalEllipsis>
+                      {!isCompleted && (
+                        <CustomMenu.MenuItem
+                          onClick={(e) => {
+                            e.preventDefault();
+                            handleEditCycle();
+                          }}
+                        >
+                          <span className="flex items-center justify-start gap-2">
+                            <PencilIcon className="h-4 w-4" />
+                            <span>Edit Cycle</span>
+                          </span>
+                        </CustomMenu.MenuItem>
+                      )}
+                      {!isCompleted && (
+                        <CustomMenu.MenuItem
+                          onClick={(e) => {
+                            e.preventDefault();
+                            handleDeleteCycle();
+                          }}
+                        >
+                          <span className="flex items-center justify-start gap-2">
+                            <TrashIcon className="h-4 w-4" />
+                            <span>Delete cycle</span>
+                          </span>
+                        </CustomMenu.MenuItem>
+                      )}
+                      <CustomMenu.MenuItem
+                        onClick={(e) => {
+                          e.preventDefault();
+                          handleCopyText();
+                        }}
+                      >
+                        <span className="flex items-center justify-start gap-2">
+                          <LinkIcon className="h-4 w-4" />
+                          <span>Copy cycle link</span>
+                        </span>
+                      </CustomMenu.MenuItem>
+                    </CustomMenu>
+                  </div>
+                </span>
+              </div>
+            </div>
+          </a>
+        </Link>
+      </div>
+    </div>
+  );
+};
diff --git a/apps/app/components/icons/alarm-clock-icon.tsx b/apps/app/components/icons/alarm-clock-icon.tsx
new file mode 100644
index 000000000..598d2733c
--- /dev/null
+++ b/apps/app/components/icons/alarm-clock-icon.tsx
@@ -0,0 +1,22 @@
+import type { Props } from "./types";
+
+export const AlarmClockIcon: React.FC<Props> = ({
+  width = "24",
+  height = "24",
+  color = "#858E96",
+  className,
+}) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    viewBox="0 0 18 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M8.98125 15.4609C8.05625 15.4609 7.18437 15.2859 6.36562 14.9359C5.54687 14.5859 4.83437 14.1078 4.22812 13.5016C3.62187 12.8953 3.14062 12.1828 2.78437 11.3641C2.42812 10.5453 2.25 9.66886 2.25 8.73469C2.25 7.80053 2.42812 6.92553 2.78437 6.10969C3.14062 5.29386 3.62187 4.57969 4.22812 3.96719C4.83437 3.35469 5.54687 2.87344 6.36562 2.52344C7.18437 2.17344 8.05625 1.99844 8.98125 1.99844C9.90625 1.99844 10.7781 2.17344 11.5969 2.52344C12.4156 2.87344 13.1312 3.35469 13.7437 3.96719C14.3562 4.57969 14.8375 5.29386 15.1875 6.10969C15.5375 6.92553 15.7125 7.80053 15.7125 8.73469C15.7125 9.66886 15.5375 10.5453 15.1875 11.3641C14.8375 12.1828 14.3562 12.8953 13.7437 13.5016C13.1312 14.1078 12.4156 14.5859 11.5969 14.9359C10.7781 15.2859 9.90625 15.4609 8.98125 15.4609ZM11.25 11.7859L12.0375 10.9984L9.6 8.56094V4.99844H8.475V9.01094L11.25 11.7859ZM4.0125 0.742188L4.8 1.52969L1.725 4.49219L0.9375 3.70469L4.0125 0.742188ZM13.95 0.742188L17.025 3.70469L16.2375 4.49219L13.1625 1.52969L13.95 0.742188ZM8.98206 14.3359C10.544 14.3359 11.8687 13.7919 12.9562 12.7039C14.0437 11.6158 14.5875 10.2908 14.5875 8.72888C14.5875 7.16692 14.0435 5.84219 12.9554 4.75469C11.8674 3.66719 10.5424 3.12344 8.98044 3.12344C7.41848 3.12344 6.09375 3.66746 5.00625 4.75549C3.91875 5.84353 3.375 7.16853 3.375 8.73049C3.375 10.2925 3.91902 11.6172 5.00706 12.7047C6.09509 13.7922 7.42009 14.3359 8.98206 14.3359Z"
+      fill="#F7AE59"
+    />
+  </svg>
+);
diff --git a/apps/app/components/icons/index.ts b/apps/app/components/icons/index.ts
index b802121d5..968a14a93 100644
--- a/apps/app/components/icons/index.ts
+++ b/apps/app/components/icons/index.ts
@@ -1,3 +1,4 @@
+export * from "./alarm-clock-icon";
 export * from "./attachment-icon";
 export * from "./backlog-state-icon";
 export * from "./blocked-icon";
@@ -26,6 +27,7 @@ export * from "./lock-icon";
 export * from "./menu-icon";
 export * from "./pencil-scribble-icon";
 export * from "./plus-icon";
+export * from "./person-running-icon";
 export * from "./priority-icon";
 export * from "./question-mark-circle-icon";
 export * from "./setting-icon";
@@ -70,6 +72,7 @@ export * from "./png-file-icon";
 export * from "./jpg-file-icon";
 export * from "./svg-file-icon";
 export * from "./txt-file-icon";
+export * from "./triangle-exclamation-icon";
 export * from "./default-file-icon";
 export * from "./video-file-icon";
 export * from "./audio-file-icon";
diff --git a/apps/app/components/icons/person-running-icon.tsx b/apps/app/components/icons/person-running-icon.tsx
new file mode 100644
index 000000000..48c3a95e9
--- /dev/null
+++ b/apps/app/components/icons/person-running-icon.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const PersonRunningIcon: React.FC<Props> = ({ width = "24", height = "24", className }) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    viewBox="0 0 18 12"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M4.05 12L3.2625 11.2125L10.9125 3.5625H8.25V5.0625H7.125V2.4375H11.3063C11.4813 2.4375 11.65 2.46875 11.8125 2.53125C11.975 2.59375 12.1188 2.6875 12.2438 2.8125L14.4938 5.04375C14.8563 5.40625 15.275 5.68125 15.75 5.86875C16.225 6.05625 16.725 6.1625 17.25 6.1875V7.3125C16.6 7.2875 15.975 7.16563 15.375 6.94688C14.775 6.72813 14.25 6.3875 13.8 5.925L12.9375 5.0625L10.8 7.2L12.4125 8.8125L7.8375 11.4563L7.275 10.4813L10.575 8.56875L9.0375 7.03125L4.05 12ZM2.25 6.75V5.625H6V6.75H2.25ZM0.75 4.3125V3.1875H4.5V4.3125H0.75ZM14.8125 2.8125C14.45 2.8125 14.1406 2.68438 13.8844 2.42813C13.6281 2.17188 13.5 1.8625 13.5 1.5C13.5 1.1375 13.6281 0.828125 13.8844 0.571875C14.1406 0.315625 14.45 0.1875 14.8125 0.1875C15.175 0.1875 15.4844 0.315625 15.7406 0.571875C15.9969 0.828125 16.125 1.1375 16.125 1.5C16.125 1.8625 15.9969 2.17188 15.7406 2.42813C15.4844 2.68438 15.175 2.8125 14.8125 2.8125ZM2.25 1.875V0.75H6V1.875H2.25Z"
+      fill="#09A953"
+    />
+  </svg>
+);
diff --git a/apps/app/components/icons/triangle-exclamation-icon.tsx b/apps/app/components/icons/triangle-exclamation-icon.tsx
new file mode 100644
index 000000000..acf986021
--- /dev/null
+++ b/apps/app/components/icons/triangle-exclamation-icon.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const TriangleExclamationIcon: React.FC<Props> = ({
+  width = "24",
+  height = "24",
+  className,
+}) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    viewBox="0 0 16 14"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M0.7254 13.75C0.6129 13.75 0.515075 13.7242 0.431925 13.6727C0.348775 13.6211 0.2841 13.5531 0.2379 13.4688C0.185813 13.3863 0.157169 13.2969 0.151969 13.2006C0.146757 13.1044 0.1754 13.0063 0.2379 12.9063L7.5129 0.34375C7.5754 0.24375 7.64728 0.171875 7.72853 0.128125C7.80978 0.084375 7.9004 0.0625 8.0004 0.0625C8.1004 0.0625 8.19103 0.084375 8.27228 0.128125C8.35353 0.171875 8.4254 0.24375 8.4879 0.34375L15.7629 12.9063C15.8254 13.0063 15.854 13.1044 15.8488 13.2006C15.8436 13.2969 15.815 13.3863 15.7629 13.4688C15.7167 13.5531 15.652 13.6211 15.5689 13.6727C15.4857 13.7242 15.3879 13.75 15.2754 13.75H0.7254ZM1.7004 12.625H14.3004L8.0004 1.75L1.7004 12.625ZM8.07868 11.5563C8.23899 11.5563 8.37228 11.502 8.47853 11.3936C8.58478 11.2851 8.6379 11.1508 8.6379 10.9905C8.6379 10.8302 8.58368 10.6969 8.47524 10.5906C8.36679 10.4844 8.23242 10.4313 8.07212 10.4313C7.91181 10.4313 7.77853 10.4855 7.67228 10.5939C7.56603 10.7024 7.5129 10.8367 7.5129 10.997C7.5129 11.1573 7.56712 11.2906 7.67556 11.3969C7.78401 11.5031 7.91838 11.5563 8.07868 11.5563ZM8.07868 9.475C8.23899 9.475 8.37228 9.42109 8.47853 9.31328C8.58478 9.20547 8.6379 9.07188 8.6379 8.9125V5.8375C8.6379 5.67813 8.58368 5.54453 8.47524 5.43672C8.36679 5.32891 8.23242 5.275 8.07212 5.275C7.91181 5.275 7.77853 5.32891 7.67228 5.43672C7.56603 5.54453 7.5129 5.67813 7.5129 5.8375V8.9125C7.5129 9.07188 7.56712 9.20547 7.67556 9.31328C7.78401 9.42109 7.91838 9.475 8.07868 9.475Z" />
+  </svg>
+);
diff --git a/apps/app/components/ui/linear-progress-indicator.tsx b/apps/app/components/ui/linear-progress-indicator.tsx
index 74152ab82..986741bc6 100644
--- a/apps/app/components/ui/linear-progress-indicator.tsx
+++ b/apps/app/components/ui/linear-progress-indicator.tsx
@@ -3,9 +3,10 @@ import { Tooltip } from "./tooltip";
 
 type Props = {
   data: any;
+  noTooltip?: boolean
 };
 
-export const LinearProgressIndicator: React.FC<Props> = ({ data }) => {
+export const LinearProgressIndicator: React.FC<Props> = ({ data, noTooltip=false }) => {
   const total = data.reduce((acc: any, cur: any) => acc + cur.value, 0);
   let progress = 0;
 
@@ -16,8 +17,8 @@ export const LinearProgressIndicator: React.FC<Props> = ({ data }) => {
       backgroundColor: item.color,
     };
     progress += item.value;
-
-    return (
+    if (noTooltip) return <div style={style} />
+    else return (
       <Tooltip key={item.id} tooltipContent={`${item.name} ${Math.round(item.value)}%`}>
         <div style={style} />
       </Tooltip>
@@ -26,7 +27,11 @@ export const LinearProgressIndicator: React.FC<Props> = ({ data }) => {
 
   return (
     <div className="flex h-1 w-full items-center justify-between gap-1">
-      {total === 0 ? " - 0%" : <div className="flex h-full w-full gap-1">{bars}</div>}
+      {total === 0 ? (
+        <div className="flex h-full w-full gap-1 bg-neutral-500">{bars}</div>
+      ) : (
+        <div className="flex h-full w-full gap-1">{bars}</div>
+      )}
     </div>
   );
 };
diff --git a/apps/app/components/ui/tooltip.tsx b/apps/app/components/ui/tooltip.tsx
index 0fb5a0352..76f4b9762 100644
--- a/apps/app/components/ui/tooltip.tsx
+++ b/apps/app/components/ui/tooltip.tsx
@@ -4,7 +4,8 @@ import { Tooltip2 } from "@blueprintjs/popover2";
 
 type Props = {
   tooltipHeading?: string;
-  tooltipContent: string;
+  tooltipContent: string | JSX.Element;
+  triangle?: boolean;
   position?:
     | "top"
     | "right"
@@ -35,17 +36,23 @@ export const Tooltip: React.FC<Props> = ({
   disabled = false,
   className = "",
   theme = "light",
+  triangle,
 }) => (
   <Tooltip2
     disabled={disabled}
     content={
       <div
-        className={`${className} flex max-w-[600px] flex-col items-start justify-center gap-1 rounded-md p-2 text-left text-xs shadow-md ${
-          theme === "light" ? "bg-brand-surface-2 text-brand-muted-1" : "bg-black text-white"
+        className={`${className} relative flex max-w-[600px] flex-col items-start justify-center gap-1 rounded-md p-2 text-left text-xs shadow-md ${
+          theme === "light" ? "text-brand-muted-1 bg-brand-surface-2" : "bg-black text-white"
         }`}
       >
+        <div
+          className={`absolute inset-0 left-1/2 -top-1 h-3 w-3 rotate-45 bg-brand-surface-2 ${
+            theme === "light" ? "text-brand-muted-1 bg-brand-surface-2" : "bg-black text-white"
+          }`}
+        />
         {tooltipHeading && <h5 className="font-medium">{tooltipHeading}</h5>}
-        <p>{tooltipContent}</p>
+        {tooltipContent}
       </div>
     }
     position={position}
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
index cf4b8b109..824de13ff 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
@@ -1,23 +1,18 @@
 import React, { useEffect, useState } from "react";
 
 import { useRouter } from "next/router";
-import dynamic from "next/dynamic";
 
 import useSWR from "swr";
-
-// headless ui
-import { Tab } from "@headlessui/react";
 // hooks
-import useLocalStorage from "hooks/use-local-storage";
 // services
 import cycleService from "services/cycles.service";
 import projectService from "services/project.service";
 // layouts
 import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
 // components
-import { CompletedCyclesListProps, CreateUpdateCycleModal, CyclesList } from "components/cycles";
+import { CreateUpdateCycleModal, CyclesView } from "components/cycles";
 // ui
-import { Loader, PrimaryButton } from "components/ui";
+import { PrimaryButton } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
 import { PlusIcon } from "@heroicons/react/24/outline";
@@ -29,25 +24,13 @@ import {
   CYCLE_CURRENT_AND_UPCOMING_LIST,
   CYCLE_DRAFT_LIST,
   PROJECT_DETAILS,
+  CYCLE_DETAILS,
 } from "constants/fetch-keys";
 
-const CompletedCyclesList = dynamic<CompletedCyclesListProps>(
-  () => import("components/cycles").then((a) => a.CompletedCyclesList),
-  {
-    ssr: false,
-    loading: () => (
-      <Loader className="mb-5">
-        <Loader.Item height="12rem" width="100%" />
-      </Loader>
-    ),
-  }
-);
-
 const ProjectCycles: NextPage = () => {
   const [selectedCycle, setSelectedCycle] = useState<SelectCycleType>();
   const [createUpdateCycleModal, setCreateUpdateCycleModal] = useState(false);
-
-  const { storedValue: cycleTab, setValue: setCycleTab } = useLocalStorage("cycleTab", "Upcoming");
+  const [cycleView, setCycleView] = useState<string>("list");
 
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
@@ -73,6 +56,13 @@ const ProjectCycles: NextPage = () => {
       : null
   );
 
+  const { data: cyclesCompleteList } = useSWR(
+    workspaceSlug && projectId ? CYCLE_DETAILS(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => cycleService.getCycles(workspaceSlug as string, projectId as string)
+      : null
+  );
+
   useEffect(() => {
     if (createUpdateCycleModal) return;
     const timer = setTimeout(() => {
@@ -83,13 +73,16 @@ const ProjectCycles: NextPage = () => {
 
   const currentTabValue = (tab: string | null) => {
     switch (tab) {
-      case "Upcoming":
+      case "All":
         return 0;
-      case "Completed":
+      case "Active":
         return 1;
-      case "Drafts":
+      case "Upcoming":
         return 2;
-
+      case "Completed":
+        return 3;
+      case "Drafts":
+        return 4;
       default:
         return 0;
     }
@@ -126,101 +119,16 @@ const ProjectCycles: NextPage = () => {
       />
       <div className="space-y-8 p-8">
         <div className="flex flex-col gap-5">
-          {currentAndUpcomingCycles && currentAndUpcomingCycles.current_cycle.length > 0 && (
-            <h3 className="text-3xl font-semibold text-brand-base">Current Cycle</h3>
-          )}
-          <div className="space-y-5">
-            <CyclesList
-              cycles={currentAndUpcomingCycles?.current_cycle}
-              setCreateUpdateCycleModal={setCreateUpdateCycleModal}
-              setSelectedCycle={setSelectedCycle}
-              type="current"
-            />
-          </div>
-        </div>
-        <div className="flex flex-col gap-5">
-          <h3 className="text-3xl font-semibold text-brand-base">Other Cycles</h3>
-          <div>
-            <Tab.Group
-              defaultIndex={currentTabValue(cycleTab)}
-              onChange={(i) => {
-                switch (i) {
-                  case 0:
-                    return setCycleTab("Upcoming");
-                  case 1:
-                    return setCycleTab("Completed");
-                  case 2:
-                    return setCycleTab("Drafts");
-
-                  default:
-                    return setCycleTab("Upcoming");
-                }
-              }}
-            >
-              <Tab.List
-                as="div"
-                className="flex items-center justify-start gap-4 text-base font-medium"
-              >
-                <Tab
-                  className={({ selected }) =>
-                    `rounded-3xl border px-5 py-1.5 text-sm outline-none sm:px-7 sm:py-2 sm:text-base ${
-                      selected
-                        ? "border-brand-accent bg-brand-accent text-white"
-                        : "border-brand-base bg-brand-surface-2 hover:bg-brand-surface-1"
-                    }`
-                  }
-                >
-                  Upcoming
-                </Tab>
-                <Tab
-                  className={({ selected }) =>
-                    `rounded-3xl border px-5 py-1.5 text-sm outline-none sm:px-7 sm:py-2 sm:text-base ${
-                      selected
-                        ? "border-brand-accent bg-brand-accent text-white"
-                        : "border-brand-base bg-brand-surface-2 hover:bg-brand-surface-1"
-                    }`
-                  }
-                >
-                  Completed
-                </Tab>
-                <Tab
-                  className={({ selected }) =>
-                    `rounded-3xl border px-5 py-1.5 text-sm outline-none sm:px-7 sm:py-2 sm:text-base ${
-                      selected
-                        ? "border-brand-accent bg-brand-accent text-white"
-                        : "border-brand-base bg-brand-surface-2 hover:bg-brand-surface-1"
-                    }`
-                  }
-                >
-                  Drafts
-                </Tab>
-              </Tab.List>
-              <Tab.Panels>
-                <Tab.Panel as="div" className="mt-8 space-y-5">
-                  <CyclesList
-                    cycles={currentAndUpcomingCycles?.upcoming_cycle}
-                    setCreateUpdateCycleModal={setCreateUpdateCycleModal}
-                    setSelectedCycle={setSelectedCycle}
-                    type="upcoming"
-                  />
-                </Tab.Panel>
-                <Tab.Panel as="div" className="mt-8 space-y-5">
-                  <CompletedCyclesList
-                    setCreateUpdateCycleModal={setCreateUpdateCycleModal}
-                    setSelectedCycle={setSelectedCycle}
-                  />
-                </Tab.Panel>
-                <Tab.Panel as="div" className="mt-8 space-y-5">
-                  <CyclesList
-                    cycles={draftCycles?.draft_cycles}
-                    setCreateUpdateCycleModal={setCreateUpdateCycleModal}
-                    setSelectedCycle={setSelectedCycle}
-                    type="draft"
-                  />
-                </Tab.Panel>
-              </Tab.Panels>
-            </Tab.Group>
-          </div>
+          <h3 className="text-2xl font-semibold text-brand-base">Cycles</h3>
+          <CyclesView
+            cycleView={cycleView}
+            setCycleView={setCycleView}
+            setSelectedCycle={setSelectedCycle}
+            setCreateUpdateCycleModal={setCreateUpdateCycleModal}
+            cyclesCompleteList={cyclesCompleteList}
+            currentAndUpcomingCycles={currentAndUpcomingCycles}
+            draftCycles={draftCycles}
+          />
         </div>
       </div>
     </ProjectAuthorizationWrapper>
diff --git a/apps/app/types/cycles.d.ts b/apps/app/types/cycles.d.ts
index 760ba03d5..ee4b2cef6 100644
--- a/apps/app/types/cycles.d.ts
+++ b/apps/app/types/cycles.d.ts
@@ -6,6 +6,7 @@ import type {
   IWorkspace,
   IWorkspaceLite,
   IIssueFilterOptions,
+  IUserLite,
 } from "types";
 
 export interface ICycle {
@@ -29,6 +30,7 @@ export interface ICycle {
   unstarted_issues: number;
   updated_at: Date;
   updated_by: string;
+  assignees: IUserLite[];
   view_props: {
     filters: IIssueFilterOptions;
   };

From 3427652c22c79866e07bc61521ba4494866119a4 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Wed, 17 May 2023 13:25:58 +0530
Subject: [PATCH 39/81]  chore: update analytics sidebar and header content,
 fix: trash box positioning (#1065)

* fix: labels dropdown on issue details page theming

* style: trash box styling and positioning

* chore: empty state for scope and demand analytics, show assignee name in scope graph tooltip

* chore: empty state for analytics

* chore: modify analytics sidebar and header
---
 .../analytics/custom-analytics/sidebar.tsx    |  30 ++++-
 .../components/analytics/project-modal.tsx    |  52 ++++++--
 .../scope-and-demand/leaderboard.tsx          |  59 +++++----
 .../analytics/scope-and-demand/scope.tsx      | 114 ++++++++++--------
 .../scope-and-demand/year-wise-issues.tsx     |  58 ++++-----
 apps/app/components/core/issues-view.tsx      |  51 ++++----
 .../components/issues/attachment-upload.tsx   |   6 +-
 apps/app/components/issues/sidebar.tsx        |  14 +--
 8 files changed, 232 insertions(+), 152 deletions(-)

diff --git a/apps/app/components/analytics/custom-analytics/sidebar.tsx b/apps/app/components/analytics/custom-analytics/sidebar.tsx
index 6d92424a0..5988e654d 100644
--- a/apps/app/components/analytics/custom-analytics/sidebar.tsx
+++ b/apps/app/components/analytics/custom-analytics/sidebar.tsx
@@ -13,7 +13,12 @@ import useToast from "hooks/use-toast";
 // ui
 import { PrimaryButton, SecondaryButton } from "components/ui";
 // icons
-import { ArrowDownTrayIcon, ArrowPathIcon, UserGroupIcon } from "@heroicons/react/24/outline";
+import {
+  ArrowDownTrayIcon,
+  ArrowPathIcon,
+  CalendarDaysIcon,
+  UserGroupIcon,
+} from "@heroicons/react/24/outline";
 import { ContrastIcon, LayerDiagonalIcon } from "components/icons";
 // helpers
 import { renderShortDate } from "helpers/date-time.helper";
@@ -106,11 +111,14 @@ export const AnalyticsSidebar: React.FC<Props> = ({
       );
   };
 
+  const selectedProjects =
+    params.project && params.project.length > 0 ? params.project : projects.map((p) => p.id);
+
   return (
     <div
-      className={`p-5 pb-0 flex flex-col space-y-2 ${
+      className={`px-5 py-2.5 flex items-center justify-between space-y-2 ${
         fullScreen
-          ? "pb-5 border-l border-brand-base md:h-full md:pb-5 md:border-l md:border-brand-base md:space-y-4 overflow-hidden"
+          ? "border-l border-brand-base md:h-full md:border-l md:border-brand-base md:space-y-4 overflow-hidden md:flex-col md:items-start md:py-5"
           : ""
       }`}
     >
@@ -119,15 +127,27 @@ export const AnalyticsSidebar: React.FC<Props> = ({
           <LayerDiagonalIcon height={14} width={14} />
           {analytics ? analytics.total : "..."} Issues
         </div>
+        {isProjectLevel && (
+          <div className="flex items-center gap-1 bg-brand-surface-2 rounded-md px-3 py-1 text-brand-secondary text-xs">
+            <CalendarDaysIcon className="h-3.5 w-3.5" />
+            {renderShortDate(
+              (cycleId
+                ? cycleDetails?.created_at
+                : moduleId
+                ? moduleDetails?.created_at
+                : projectDetails?.created_at) ?? ""
+            )}
+          </div>
+        )}
       </div>
       <div className="h-full overflow-hidden">
         {fullScreen ? (
           <>
-            {!isProjectLevel && params.project && params.project.length > 0 && (
+            {!isProjectLevel && selectedProjects && selectedProjects.length > 0 && (
               <div className="hidden h-full overflow-hidden md:flex md:flex-col">
                 <h4 className="font-medium">Selected Projects</h4>
                 <div className="space-y-6 mt-4 h-full overflow-y-auto">
-                  {params.project.map((projectId) => {
+                  {selectedProjects.map((projectId) => {
                     const project: IProject = projects.find((p) => p.id === projectId);
 
                     return (
diff --git a/apps/app/components/analytics/project-modal.tsx b/apps/app/components/analytics/project-modal.tsx
index 293d4e891..c2072642c 100644
--- a/apps/app/components/analytics/project-modal.tsx
+++ b/apps/app/components/analytics/project-modal.tsx
@@ -10,6 +10,9 @@ import { useForm } from "react-hook-form";
 import { Tab } from "@headlessui/react";
 // services
 import analyticsService from "services/analytics.service";
+import projectService from "services/project.service";
+import cyclesService from "services/cycles.service";
+import modulesService from "services/modules.service";
 // components
 import { CustomAnalytics, ScopeAndDemand } from "components/analytics";
 // icons
@@ -21,7 +24,7 @@ import {
 // types
 import { IAnalyticsParams } from "types";
 // fetch-keys
-import { ANALYTICS } from "constants/fetch-keys";
+import { ANALYTICS, CYCLE_DETAILS, MODULE_DETAILS, PROJECT_DETAILS } from "constants/fetch-keys";
 
 type Props = {
   isOpen: boolean;
@@ -59,6 +62,39 @@ export const AnalyticsProjectModal: React.FC<Props> = ({ isOpen, onClose }) => {
     workspaceSlug ? () => analyticsService.getAnalytics(workspaceSlug.toString(), params) : null
   );
 
+  const { data: projectDetails } = useSWR(
+    workspaceSlug && projectId && !(cycleId || moduleId)
+      ? PROJECT_DETAILS(projectId.toString())
+      : null,
+    workspaceSlug && projectId && !(cycleId || moduleId)
+      ? () => projectService.getProject(workspaceSlug.toString(), projectId.toString())
+      : null
+  );
+
+  const { data: cycleDetails } = useSWR(
+    workspaceSlug && projectId && cycleId ? CYCLE_DETAILS(cycleId.toString()) : null,
+    workspaceSlug && projectId && cycleId
+      ? () =>
+          cyclesService.getCycleDetails(
+            workspaceSlug.toString(),
+            projectId.toString(),
+            cycleId.toString()
+          )
+      : null
+  );
+
+  const { data: moduleDetails } = useSWR(
+    workspaceSlug && projectId && moduleId ? MODULE_DETAILS(moduleId.toString()) : null,
+    workspaceSlug && projectId && moduleId
+      ? () =>
+          modulesService.getModuleDetails(
+            workspaceSlug.toString(),
+            projectId.toString(),
+            moduleId.toString()
+          )
+      : null
+  );
+
   const handleClose = () => {
     onClose();
   };
@@ -74,12 +110,11 @@ export const AnalyticsProjectModal: React.FC<Props> = ({ isOpen, onClose }) => {
           fullScreen ? "rounded-lg border" : "border-l"
         }`}
       >
-        <div
-          className={`flex items-center justify-between gap-2 border-b border-b-brand-base bg-brand-base p-3 text-sm ${
-            fullScreen ? "" : "py-[1.275rem]"
-          }`}
-        >
-          <h3>Project Analytics</h3>
+        <div className="flex items-center justify-between gap-4 bg-brand-base px-5 py-4 text-sm">
+          <h3 className="break-all">
+            Analytics for{" "}
+            {cycleId ? cycleDetails?.name : moduleId ? moduleDetails?.name : projectDetails?.name}
+          </h3>
           <div className="flex items-center gap-2">
             <button
               type="button"
@@ -102,7 +137,7 @@ export const AnalyticsProjectModal: React.FC<Props> = ({ isOpen, onClose }) => {
           </div>
         </div>
         <Tab.Group as={Fragment}>
-          <Tab.List as="div" className="space-x-2 border-b border-brand-base px-5 py-3">
+          <Tab.List as="div" className="space-x-2 border-b border-brand-base p-5 pt-0">
             {tabsList.map((tab) => (
               <Tab
                 key={tab}
@@ -116,6 +151,7 @@ export const AnalyticsProjectModal: React.FC<Props> = ({ isOpen, onClose }) => {
               </Tab>
             ))}
           </Tab.List>
+          {/* <h4 className="p-5 pb-0">Analytics for</h4> */}
           <Tab.Panels as={Fragment}>
             <Tab.Panel as={Fragment}>
               <ScopeAndDemand fullScreen={fullScreen} />
diff --git a/apps/app/components/analytics/scope-and-demand/leaderboard.tsx b/apps/app/components/analytics/scope-and-demand/leaderboard.tsx
index 21a278709..9e28d0f3e 100644
--- a/apps/app/components/analytics/scope-and-demand/leaderboard.tsx
+++ b/apps/app/components/analytics/scope-and-demand/leaderboard.tsx
@@ -14,32 +14,39 @@ type Props = {
 export const AnalyticsLeaderboard: React.FC<Props> = ({ users, title }) => (
   <div className="p-3 border border-brand-base rounded-[10px]">
     <h6 className="text-base font-medium">{title}</h6>
-    <div className="mt-3 space-y-3">
-      {users.map((user) => (
-        <div key={user.email ?? "None"} className="flex items-start justify-between gap-4 text-xs">
-          <div className="flex items-center gap-2">
-            {user && user.avatar && user.avatar !== "" ? (
-              <div className="rounded-full h-4 w-4 flex-shrink-0">
-                <Image
-                  src={user.avatar}
-                  height="100%"
-                  width="100%"
-                  className="rounded-full"
-                  alt={user.email ?? "None"}
-                />
-              </div>
-            ) : (
-              <div className="grid place-items-center flex-shrink-0 rounded-full bg-gray-700 text-[11px] capitalize text-white h-4 w-4">
-                {user.firstName !== "" ? user.firstName[0] : "?"}
-              </div>
-            )}
-            <span className="break-all text-brand-secondary">
-              {user.firstName !== "" ? `${user.firstName} ${user.lastName}` : "No assignee"}
-            </span>
+    {users.length > 0 ? (
+      <div className="mt-3 space-y-3">
+        {users.map((user) => (
+          <div
+            key={user.email ?? "None"}
+            className="flex items-start justify-between gap-4 text-xs"
+          >
+            <div className="flex items-center gap-2">
+              {user && user.avatar && user.avatar !== "" ? (
+                <div className="rounded-full h-4 w-4 flex-shrink-0">
+                  <Image
+                    src={user.avatar}
+                    height="100%"
+                    width="100%"
+                    className="rounded-full"
+                    alt={user.email ?? "None"}
+                  />
+                </div>
+              ) : (
+                <div className="grid place-items-center flex-shrink-0 rounded-full bg-gray-700 text-[11px] capitalize text-white h-4 w-4">
+                  {user.firstName !== "" ? user.firstName[0] : "?"}
+                </div>
+              )}
+              <span className="break-all text-brand-secondary">
+                {user.firstName !== "" ? `${user.firstName} ${user.lastName}` : "No assignee"}
+              </span>
+            </div>
+            <span className="flex-shrink-0">{user.count}</span>
           </div>
-          <span className="flex-shrink-0">{user.count}</span>
-        </div>
-      ))}
-    </div>
+        ))}
+      </div>
+    ) : (
+      <div className="text-brand-secondary text-center text-sm py-8">No matching data found.</div>
+    )}
   </div>
 );
diff --git a/apps/app/components/analytics/scope-and-demand/scope.tsx b/apps/app/components/analytics/scope-and-demand/scope.tsx
index 93ea71091..6697b775b 100644
--- a/apps/app/components/analytics/scope-and-demand/scope.tsx
+++ b/apps/app/components/analytics/scope-and-demand/scope.tsx
@@ -13,56 +13,72 @@ export const AnalyticsScope: React.FC<Props> = ({ defaultAnalytics }) => (
     <div className="divide-y divide-brand-base">
       <div>
         <h6 className="px-3 text-base font-medium">Pending issues</h6>
-        <BarGraph
-          data={defaultAnalytics.pending_issue_user}
-          indexBy="assignees__email"
-          keys={["count"]}
-          height="250px"
-          colors={() => `#f97316`}
-          customYAxisTickValues={defaultAnalytics.pending_issue_user.map((d) => d.count)}
-          tooltip={(datum) => (
-            <div className="rounded-md border border-brand-base bg-brand-surface-2 p-2 text-xs">
-              <span className="font-medium text-brand-secondary">
-                Issue count- {datum.indexValue ?? "No assignee"}:{" "}
-              </span>
-              {datum.value}
-            </div>
-          )}
-          axisBottom={{
-            renderTick: (datum) => {
-              const avatar =
-                defaultAnalytics.pending_issue_user[datum.tickIndex].assignees__avatar ?? "";
+        {defaultAnalytics.pending_issue_user.length > 0 ? (
+          <BarGraph
+            data={defaultAnalytics.pending_issue_user}
+            indexBy="assignees__email"
+            keys={["count"]}
+            height="250px"
+            colors={() => `#f97316`}
+            customYAxisTickValues={defaultAnalytics.pending_issue_user.map((d) => d.count)}
+            tooltip={(datum) => {
+              const assignee = defaultAnalytics.pending_issue_user.find(
+                (a) => a.assignees__email === `${datum.indexValue}`
+              );
 
-              if (avatar && avatar !== "")
-                return (
-                  <g transform={`translate(${datum.x},${datum.y})`}>
-                    <image
-                      x={-8}
-                      y={10}
-                      width={16}
-                      height={16}
-                      xlinkHref={avatar}
-                      style={{ clipPath: "circle(50%)" }}
-                    />
-                  </g>
-                );
-              else
-                return (
-                  <g transform={`translate(${datum.x},${datum.y})`}>
-                    <circle cy={18} r={8} fill="#374151" />
-                    <text x={0} y={21} textAnchor="middle" fontSize={9} fill="#ffffff">
-                      {datum.value ? `${datum.value}`.toUpperCase()[0] : "?"}
-                    </text>
-                  </g>
-                );
-            },
-          }}
-          margin={{ top: 20 }}
-          theme={{
-            background: "rgb(var(--color-bg-base))",
-            axis: {},
-          }}
-        />
+              return (
+                <div className="rounded-md border border-brand-base bg-brand-surface-2 p-2 text-xs">
+                  <span className="font-medium text-brand-secondary">
+                    Issue count-{" "}
+                    {assignee
+                      ? assignee.assignees__first_name + " " + assignee.assignees__last_name
+                      : "No assignee"}
+                    :{" "}
+                  </span>
+                  {datum.value}
+                </div>
+              );
+            }}
+            axisBottom={{
+              renderTick: (datum) => {
+                const avatar =
+                  defaultAnalytics.pending_issue_user[datum.tickIndex].assignees__avatar ?? "";
+
+                if (avatar && avatar !== "")
+                  return (
+                    <g transform={`translate(${datum.x},${datum.y})`}>
+                      <image
+                        x={-8}
+                        y={10}
+                        width={16}
+                        height={16}
+                        xlinkHref={avatar}
+                        style={{ clipPath: "circle(50%)" }}
+                      />
+                    </g>
+                  );
+                else
+                  return (
+                    <g transform={`translate(${datum.x},${datum.y})`}>
+                      <circle cy={18} r={8} fill="#374151" />
+                      <text x={0} y={21} textAnchor="middle" fontSize={9} fill="#ffffff">
+                        {datum.value ? `${datum.value}`.toUpperCase()[0] : "?"}
+                      </text>
+                    </g>
+                  );
+              },
+            }}
+            margin={{ top: 20 }}
+            theme={{
+              background: "rgb(var(--color-bg-base))",
+              axis: {},
+            }}
+          />
+        ) : (
+          <div className="text-brand-secondary text-center text-sm py-8">
+            No matching data found.
+          </div>
+        )}
       </div>
     </div>
   </div>
diff --git a/apps/app/components/analytics/scope-and-demand/year-wise-issues.tsx b/apps/app/components/analytics/scope-and-demand/year-wise-issues.tsx
index e8f03e736..863eb664b 100644
--- a/apps/app/components/analytics/scope-and-demand/year-wise-issues.tsx
+++ b/apps/app/components/analytics/scope-and-demand/year-wise-issues.tsx
@@ -17,34 +17,38 @@ export const AnalyticsYearWiseIssues: React.FC<Props> = ({ defaultAnalytics }) =
   return (
     <div className="py-3 border border-brand-base rounded-[10px]">
       <h1 className="px-3 text-base font-medium">Issues closed in a year</h1>
-      <LineGraph
-        data={[
-          {
-            id: "issues_closed",
-            color: "rgb(var(--color-accent))",
-            data: MONTHS_LIST.map((month) => ({
-              x: month.label.substring(0, 3),
-              y:
-                defaultAnalytics.issue_completed_month_wise.find(
-                  (data) => data.month === month.value
-                )?.count || 0,
-            })),
-          },
-        ]}
-        customYAxisTickValues={defaultAnalytics.issue_completed_month_wise.map((data) => {
-          if (quarterMonthsList.includes(data.month)) return data.count;
+      {defaultAnalytics.issue_completed_month_wise.length > 0 ? (
+        <LineGraph
+          data={[
+            {
+              id: "issues_closed",
+              color: "rgb(var(--color-accent))",
+              data: MONTHS_LIST.map((month) => ({
+                x: month.label.substring(0, 3),
+                y:
+                  defaultAnalytics.issue_completed_month_wise.find(
+                    (data) => data.month === month.value
+                  )?.count || 0,
+              })),
+            },
+          ]}
+          customYAxisTickValues={defaultAnalytics.issue_completed_month_wise.map((data) => {
+            if (quarterMonthsList.includes(data.month)) return data.count;
 
-          return 0;
-        })}
-        height="300px"
-        colors={(datum) => datum.color}
-        curve="monotoneX"
-        margin={{ top: 20 }}
-        theme={{
-          background: "rgb(var(--color-bg-base))",
-        }}
-        enableArea
-      />
+            return 0;
+          })}
+          height="300px"
+          colors={(datum) => datum.color}
+          curve="monotoneX"
+          margin={{ top: 20 }}
+          theme={{
+            background: "rgb(var(--color-bg-base))",
+          }}
+          enableArea
+        />
+      ) : (
+        <div className="text-brand-secondary text-center text-sm py-8">No matching data found.</div>
+      )}
     </div>
   );
 };
diff --git a/apps/app/components/core/issues-view.tsx b/apps/app/components/core/issues-view.tsx
index 0557603f8..0afd54237 100644
--- a/apps/app/components/core/issues-view.tsx
+++ b/apps/app/components/core/issues-view.tsx
@@ -6,6 +6,7 @@ import useSWR, { mutate } from "swr";
 
 // react-beautiful-dnd
 import { DragDropContext, DropResult } from "react-beautiful-dnd";
+import StrictModeDroppable from "components/dnd/StrictModeDroppable";
 // services
 import issuesService from "services/issues.service";
 import stateService from "services/state.service";
@@ -19,7 +20,6 @@ import useIssuesView from "hooks/use-issues-view";
 // components
 import { AllLists, AllBoards, FilterList, CalendarView } from "components/core";
 import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
-import StrictModeDroppable from "components/dnd/StrictModeDroppable";
 import { CreateUpdateViewModal } from "components/views";
 import { TransferIssues, TransferIssuesModal } from "components/cycles";
 // ui
@@ -47,7 +47,6 @@ import {
   PROJECT_ISSUES_LIST_WITH_PARAMS,
   STATES_LIST,
 } from "constants/fetch-keys";
-// image
 
 type Props = {
   type?: "issue" | "cycle" | "module";
@@ -445,27 +444,25 @@ export const IssuesView: React.FC<Props> = ({
         <>
           <div className="flex items-center justify-between gap-2 px-5 pt-3 pb-0">
             <FilterList filters={filters} setFilters={setFilters} />
-            {areFiltersApplied && (
-              <PrimaryButton
-                onClick={() => {
-                  if (viewId) {
-                    setFilters({}, true);
-                    setToastAlert({
-                      title: "View updated",
-                      message: "Your view has been updated",
-                      type: "success",
-                    });
-                  } else
-                    setCreateViewModal({
-                      query: filters,
-                    });
-                }}
-                className="flex items-center gap-2 text-sm"
-              >
-                {!viewId && <PlusIcon className="h-4 w-4" />}
-                {viewId ? "Update" : "Save"} view
-              </PrimaryButton>
-            )}
+            <PrimaryButton
+              onClick={() => {
+                if (viewId) {
+                  setFilters({}, true);
+                  setToastAlert({
+                    title: "View updated",
+                    message: "Your view has been updated",
+                    type: "success",
+                  });
+                } else
+                  setCreateViewModal({
+                    query: filters,
+                  });
+              }}
+              className="flex items-center gap-2 text-sm"
+            >
+              {!viewId && <PlusIcon className="h-4 w-4" />}
+              {viewId ? "Update" : "Save"} view
+            </PrimaryButton>
           </div>
           {<div className="mt-3 border-t border-brand-base" />}
         </>
@@ -477,14 +474,14 @@ export const IssuesView: React.FC<Props> = ({
             <div
               className={`${
                 trashBox ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0"
-              } fixed top-9 right-9 z-30 flex h-28 w-96 flex-col items-center justify-center gap-2 rounded border-2 border-red-500/20 bg-red-500/20 p-3 text-xs font-medium italic text-red-500 ${
-                snapshot.isDraggingOver ? "bg-red-500/100 text-white" : ""
-              } duration-200`}
+              } fixed top-4 left-1/2 -translate-x-1/2 z-40 w-72 flex items-center justify-center gap-2 rounded border-2 border-red-500/20 bg-brand-base px-3 py-5 text-xs font-medium italic text-red-500 ${
+                snapshot.isDraggingOver ? "bg-red-500 blur-2xl opacity-70" : ""
+              } transition duration-300`}
               ref={provided.innerRef}
               {...provided.droppableProps}
             >
               <TrashIcon className="h-4 w-4" />
-              Drop issue here to delete
+              Drop here to delete the issue.
             </div>
           )}
         </StrictModeDroppable>
diff --git a/apps/app/components/issues/attachment-upload.tsx b/apps/app/components/issues/attachment-upload.tsx
index 7ad8d1d35..7e5184ce8 100644
--- a/apps/app/components/issues/attachment-upload.tsx
+++ b/apps/app/components/issues/attachment-upload.tsx
@@ -74,7 +74,7 @@ export const IssueAttachmentUpload = () => {
     onDrop,
     maxSize: maxFileSize,
     multiple: false,
-    disabled: isLoading
+    disabled: isLoading,
   });
 
   const fileError =
@@ -85,8 +85,8 @@ export const IssueAttachmentUpload = () => {
   return (
     <div
       {...getRootProps()}
-      className={`flex items-center justify-center h-[60px] cursor-pointer border-2 border-dashed border-theme text-blue-500 bg-blue-500/5 text-xs rounded-md px-4 ${
-        isDragActive ? "bg-theme/10" : ""
+      className={`flex items-center justify-center h-[60px] cursor-pointer border-2 border-dashed text-brand-accent bg-brand-accent/5 text-xs rounded-md px-4 ${
+        isDragActive ? "bg-brand-accent/10 border-brand-accent" : "border-brand-base"
       } ${isDragReject ? "bg-red-100" : ""}`}
     >
       <input {...getInputProps()} />
diff --git a/apps/app/components/issues/sidebar.tsx b/apps/app/components/issues/sidebar.tsx
index 6688effa8..869dda5c1 100644
--- a/apps/app/components/issues/sidebar.tsx
+++ b/apps/app/components/issues/sidebar.tsx
@@ -450,7 +450,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                             leaveFrom="opacity-100"
                             leaveTo="opacity-0"
                           >
-                            <Listbox.Options className="absolute right-0 z-10 mt-1 max-h-28 w-40 overflow-auto rounded-md bg-brand-surface-2 py-1 text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+                            <Listbox.Options className="absolute right-0 z-10 mt-1 max-h-28 w-40 overflow-auto rounded-md bg-brand-surface-2 py-1 text-xs shadow-lg border border-brand-base focus:outline-none">
                               <div className="py-1">
                                 {issueLabels ? (
                                   issueLabels.length > 0 ? (
@@ -468,8 +468,8 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                                                 `${
                                                   active || selected ? "bg-brand-surface-1" : ""
                                                 } ${
-                                                  selected ? "font-medium" : ""
-                                                } flex cursor-pointer select-none items-center gap-2 truncate p-2 text-brand-base`
+                                                  selected ? "" : "text-brand-secondary"
+                                                } flex cursor-pointer select-none items-center gap-2 truncate p-2`
                                               }
                                               value={label.id}
                                             >
@@ -489,7 +489,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                                         return (
                                           <div className="border-y border-brand-base bg-brand-surface-1">
                                             <div className="flex select-none items-center gap-2 truncate p-2 font-medium text-brand-base">
-                                              <RectangleGroupIcon className="h-3 w-3" />{" "}
+                                              <RectangleGroupIcon className="h-3 w-3" />
                                               {label.name}
                                             </div>
                                             <div>
@@ -497,9 +497,9 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                                                 <Listbox.Option
                                                   key={child.id}
                                                   className={({ active, selected }) =>
-                                                    `${active || selected ? "bg-indigo-50" : ""} ${
-                                                      selected ? "font-medium" : ""
-                                                    } flex cursor-pointer select-none items-center gap-2 truncate p-2 text-brand-base`
+                                                    `${active || selected ? "bg-brand-base" : ""} ${
+                                                      selected ? "" : "text-brand-secondary"
+                                                    } flex cursor-pointer select-none items-center gap-2 truncate p-2`
                                                   }
                                                   value={child.id}
                                                 >

From ab695a309f60df6619cc1963afaf5188a61403a2 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Wed, 17 May 2023 14:57:58 +0530
Subject: [PATCH 40/81] fix: layout padding, tabs size and page heading font
 sizes (#1067)

---
 apps/app/components/core/calendar-view/calendar-header.tsx | 4 ++--
 apps/app/components/core/calendar-view/calendar.tsx        | 4 ++--
 apps/app/components/project/settings-header.tsx            | 6 +++---
 apps/app/components/workspace/settings-header.tsx          | 6 +++---
 apps/app/layouts/settings-navbar.tsx                       | 4 ++--
 .../[workspaceSlug]/projects/[projectId]/modules/index.tsx | 3 +--
 .../[workspaceSlug]/projects/[projectId]/pages/index.tsx   | 7 ++++---
 .../projects/[projectId]/settings/control.tsx              | 2 +-
 .../projects/[projectId]/settings/estimates.tsx            | 4 ++--
 .../projects/[projectId]/settings/features.tsx             | 4 ++--
 .../projects/[projectId]/settings/index.tsx                | 2 +-
 .../projects/[projectId]/settings/integrations.tsx         | 2 +-
 .../projects/[projectId]/settings/labels.tsx               | 2 +-
 .../projects/[projectId]/settings/members.tsx              | 4 ++--
 .../projects/[projectId]/settings/states.tsx               | 2 +-
 .../[workspaceSlug]/projects/[projectId]/views/index.tsx   | 2 +-
 apps/app/pages/[workspaceSlug]/settings/billing.tsx        | 4 ++--
 apps/app/pages/[workspaceSlug]/settings/import-export.tsx  | 2 +-
 apps/app/pages/[workspaceSlug]/settings/index.tsx          | 2 +-
 apps/app/pages/[workspaceSlug]/settings/integrations.tsx   | 4 ++--
 apps/app/pages/[workspaceSlug]/settings/members.tsx        | 4 ++--
 21 files changed, 37 insertions(+), 37 deletions(-)

diff --git a/apps/app/components/core/calendar-view/calendar-header.tsx b/apps/app/components/core/calendar-view/calendar-header.tsx
index aab25506b..23c11d254 100644
--- a/apps/app/components/core/calendar-view/calendar-header.tsx
+++ b/apps/app/components/core/calendar-view/calendar-header.tsx
@@ -61,8 +61,8 @@ export const CalendarHeader: React.FC<Props> = ({
         <Popover className="flex h-full items-center justify-start rounded-lg">
           {({ open }) => (
             <>
-              <Popover.Button className={`group flex h-full items-start gap-1 text-brand-base`}>
-                <div className="flex  items-center   justify-center gap-2 text-2xl font-semibold">
+              <Popover.Button>
+                <div className="flex items-center justify-center gap-2 text-2xl font-semibold text-brand-base">
                   <span>{formatDate(currentDate, "Month")}</span>{" "}
                   <span>{formatDate(currentDate, "yyyy")}</span>
                 </div>
diff --git a/apps/app/components/core/calendar-view/calendar.tsx b/apps/app/components/core/calendar-view/calendar.tsx
index 4af3d0cf4..ce453f898 100644
--- a/apps/app/components/core/calendar-view/calendar.tsx
+++ b/apps/app/components/core/calendar-view/calendar.tsx
@@ -162,9 +162,9 @@ export const CalendarView: React.FC<Props> = ({
   const isNotAllowed = userAuth.isGuest || userAuth.isViewer || isCompleted;
 
   return calendarIssues ? (
-    <div className="mb-4 h-full">
+    <div className="h-full">
       <DragDropContext onDragEnd={onDragEnd}>
-        <div className="-m-2 h-full rounded-lg p-8 text-brand-secondary">
+        <div className="h-full rounded-lg p-8 text-brand-secondary">
           <CalendarHeader
             isMonthlyView={isMonthlyView}
             setIsMonthlyView={setIsMonthlyView}
diff --git a/apps/app/components/project/settings-header.tsx b/apps/app/components/project/settings-header.tsx
index c0de3f4c0..0aff5350c 100644
--- a/apps/app/components/project/settings-header.tsx
+++ b/apps/app/components/project/settings-header.tsx
@@ -1,10 +1,10 @@
 import SettingsNavbar from "layouts/settings-navbar";
 
 export const SettingsHeader = () => (
-  <div className="mb-12 space-y-6">
+  <div className="mb-8 space-y-6">
     <div>
-      <h3 className="text-3xl font-semibold">Project Settings</h3>
-      <p className="mt-1 text-brand-secondary">
+      <h3 className="text-2xl font-semibold">Project Settings</h3>
+      <p className="mt-1 text-sm text-brand-secondary">
         This information will be displayed to every member of the project.
       </p>
     </div>
diff --git a/apps/app/components/workspace/settings-header.tsx b/apps/app/components/workspace/settings-header.tsx
index dd560edcd..89a3690f5 100644
--- a/apps/app/components/workspace/settings-header.tsx
+++ b/apps/app/components/workspace/settings-header.tsx
@@ -1,10 +1,10 @@
 import SettingsNavbar from "layouts/settings-navbar";
 
 export const SettingsHeader = () => (
-  <div className="mb-12 space-y-6">
+  <div className="mb-8 space-y-6">
     <div>
-      <h3 className="text-3xl font-semibold">Workspace Settings</h3>
-      <p className="mt-1 text-brand-secondary">
+      <h3 className="text-2xl font-semibold">Workspace Settings</h3>
+      <p className="mt-1 text-sm text-brand-secondary">
         This information will be displayed to every member of the workspace.
       </p>
     </div>
diff --git a/apps/app/layouts/settings-navbar.tsx b/apps/app/layouts/settings-navbar.tsx
index 1e03a76e3..5c06026ea 100644
--- a/apps/app/layouts/settings-navbar.tsx
+++ b/apps/app/layouts/settings-navbar.tsx
@@ -97,14 +97,14 @@ const SettingsNavbar: React.FC<Props> = ({ profilePage = false }) => {
         <Link key={link.href} href={link.href}>
           <a>
             <div
-              className={`rounded-3xl border border-brand-base px-5 py-1.5 text-sm sm:px-7 sm:py-2 sm:text-base ${
+              className={`rounded-full border px-5 py-1.5 text-sm outline-none ${
                 (
                   link.label === "Import/Export"
                     ? router.asPath.includes(link.href)
                     : router.asPath === link.href
                 )
                   ? "border-brand-accent bg-brand-accent text-white"
-                  : "border-brand-base bg-brand-surface-2 hover:bg-brand-surface-1"
+                  : "border-brand-base bg-brand-base hover:bg-brand-surface-1"
               }`}
             >
               {link.label}
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx
index 98579b6ca..dc823c929 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx
@@ -91,8 +91,7 @@ const ProjectModules: NextPage = () => {
         modules.length > 0 ? (
           <div className="space-y-5 p-8">
             <div className="flex flex-col gap-5">
-              <h3 className="text-3xl font-semibold text-brand-base">Modules</h3>
-
+              <h3 className="text-2xl font-semibold text-brand-base">Modules</h3>
               <div className="grid grid-cols-1 gap-9 sm:grid-cols-2 lg:grid-cols-3">
                 {modules.map((module) => (
                   <SingleModuleCard
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
index 0ef706cbb..874057e06 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
@@ -195,8 +195,9 @@ const ProjectPages: NextPage = () => {
           </PrimaryButton>
         }
       >
-        <div className="space-y-4 p-8">
-          <form
+        <div className="space-y-5 p-8">
+          <h3 className="text-2xl font-semibold text-brand-base">Pages</h3>
+          {/* <form
             onSubmit={handleSubmit(createPage)}
             className="relative mb-12 flex items-center justify-between gap-2 rounded-[6px] border border-brand-base p-2 shadow"
           >
@@ -212,7 +213,7 @@ const ProjectPages: NextPage = () => {
                 {isSubmitting ? "Creating..." : "Create"}
               </PrimaryButton>
             )}
-          </form>
+          </form> */}
           <div>
             <Tab.Group
               defaultIndex={currentTabValue(pageTab)}
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/control.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/control.tsx
index fc699aeab..1f529b143 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/control.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/control.tsx
@@ -106,7 +106,7 @@ const ControlSettings: NextPage = () => {
         </Breadcrumbs>
       }
     >
-      <form onSubmit={handleSubmit(onSubmit)} className="p-8 lg:px-24">
+      <form onSubmit={handleSubmit(onSubmit)} className="p-8">
         <SettingsHeader />
         <div className="space-y-8 sm:space-y-12">
           <div className="grid grid-cols-12 items-start gap-4 sm:gap-16">
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx
index 4051d09bf..3f3c0331f 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx
@@ -118,7 +118,7 @@ const EstimatesSettings: NextPage = () => {
           </Breadcrumbs>
         }
       >
-        <div className="p-8 lg:px-24">
+        <div className="p-8">
           <SettingsHeader />
           <section className="flex items-center justify-between">
             <h3 className="text-2xl font-semibold">Estimates</h3>
@@ -142,7 +142,7 @@ const EstimatesSettings: NextPage = () => {
           </section>
           {estimatesList ? (
             estimatesList.length > 0 ? (
-              <section className="mt-4 divide-y divide-brand-base rounded-xl border border-brand-base bg-brand-base px-6">
+              <section className="mt-5 divide-y divide-brand-base rounded-xl border border-brand-base bg-brand-base px-6">
                 {estimatesList.map((estimate) => (
                   <SingleEstimate
                     key={estimate.id}
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
index ee7a91fe9..9f8d06b3a 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
@@ -164,9 +164,9 @@ const FeaturesSettings: NextPage = () => {
         </Breadcrumbs>
       }
     >
-      <div className="p-8 lg:px-24">
+      <div className="p-8">
         <SettingsHeader />
-        <section className="space-y-8">
+        <section className="space-y-5">
           <h3 className="text-2xl font-semibold">Features</h3>
           <div className="space-y-5">
             {featuresList.map((feature) => (
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
index 4cd1bc42e..d0b7f288e 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
@@ -151,7 +151,7 @@ const GeneralSettings: NextPage = () => {
           router.push(`/${workspaceSlug}/projects`);
         }}
       />
-      <form onSubmit={handleSubmit(onSubmit)} className="p-8 lg:px-24">
+      <form onSubmit={handleSubmit(onSubmit)} className="p-8">
         <SettingsHeader />
         <div className="space-y-8 sm:space-y-12">
           <div className="grid grid-cols-12 items-start gap-4 sm:gap-16">
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/integrations.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/integrations.tsx
index 53540e87a..0c2fc687e 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/integrations.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/integrations.tsx
@@ -54,7 +54,7 @@ const ProjectIntegrations: NextPage = () => {
         </Breadcrumbs>
       }
     >
-      <div className="p-8 lg:px-24">
+      <div className="p-8">
         <SettingsHeader />
         {workspaceIntegrations ? (
           workspaceIntegrations.length > 0 ? (
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx
index b0c98c9dc..7f1f47ddf 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx
@@ -102,7 +102,7 @@ const LabelsSettings: NextPage = () => {
           </Breadcrumbs>
         }
       >
-        <div className="p-8 lg:px-24">
+        <div className="p-8">
           <SettingsHeader />
           <section className="grid grid-cols-12 gap-10">
             <div className="col-span-12 sm:col-span-5">
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
index 118e547e5..ce9110aad 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
@@ -147,9 +147,9 @@ const MembersSettings: NextPage = () => {
           </Breadcrumbs>
         }
       >
-        <div className="p-8 lg:px-24">
+        <div className="p-8">
           <SettingsHeader />
-          <section className="space-y-8">
+          <section className="space-y-5">
             <div className="flex items-end justify-between gap-4">
               <h3 className="text-2xl font-semibold">Members</h3>
               <button
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx
index 77e821835..ac586f382 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx
@@ -67,7 +67,7 @@ const StatesSettings: NextPage = () => {
           </Breadcrumbs>
         }
       >
-        <div className="p-8 lg:px-24">
+        <div className="p-8">
           <SettingsHeader />
           <div className="grid grid-cols-12 gap-10">
             <div className="col-span-12 sm:col-span-5">
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx
index 818046e6b..c796525f6 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx
@@ -98,7 +98,7 @@ const ProjectViews: NextPage = () => {
       {views ? (
         views.length > 0 ? (
           <div className="space-y-5 p-8">
-            <h3 className="text-3xl font-semibold text-brand-base">Views</h3>
+            <h3 className="text-2xl font-semibold text-brand-base">Views</h3>
             <div className="divide-y divide-brand-base rounded-[10px] border border-brand-base">
               {views.map((view) => (
                 <SingleViewItem
diff --git a/apps/app/pages/[workspaceSlug]/settings/billing.tsx b/apps/app/pages/[workspaceSlug]/settings/billing.tsx
index 02b23cce5..76b66529e 100644
--- a/apps/app/pages/[workspaceSlug]/settings/billing.tsx
+++ b/apps/app/pages/[workspaceSlug]/settings/billing.tsx
@@ -39,11 +39,11 @@ const BillingSettings: NextPage = () => {
         </Breadcrumbs>
       }
     >
-      <div className="p-8 lg:px-24">
+      <div className="p-8">
         <SettingsHeader />
         <section className="space-y-8">
           <div>
-            <h3 className="text-3xl font-bold leading-6">Billing & Plans</h3>
+            <h3 className="text-2xl font-semibold leading-6">Billing & Plans</h3>
             <p className="mt-4 text-sm text-brand-secondary">[Free launch preview] plan Pro</p>
           </div>
           <div className="space-y-8 md:w-2/3">
diff --git a/apps/app/pages/[workspaceSlug]/settings/import-export.tsx b/apps/app/pages/[workspaceSlug]/settings/import-export.tsx
index c5473b30a..2384d6e46 100644
--- a/apps/app/pages/[workspaceSlug]/settings/import-export.tsx
+++ b/apps/app/pages/[workspaceSlug]/settings/import-export.tsx
@@ -23,7 +23,7 @@ const ImportExport: NextPage = () => {
         </Breadcrumbs>
       }
     >
-      <div className="p-8 lg:px-24">
+      <div className="p-8">
         <SettingsHeader />
         <IntegrationGuide />
       </div>
diff --git a/apps/app/pages/[workspaceSlug]/settings/index.tsx b/apps/app/pages/[workspaceSlug]/settings/index.tsx
index 1edd5ace9..8ebf74aa3 100644
--- a/apps/app/pages/[workspaceSlug]/settings/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/settings/index.tsx
@@ -173,7 +173,7 @@ const WorkspaceSettings: NextPage = () => {
         }}
         data={activeWorkspace ?? null}
       />
-      <div className="p-8 lg:px-24">
+      <div className="p-8">
         <SettingsHeader />
         {activeWorkspace ? (
           <div className="space-y-8 sm:space-y-12">
diff --git a/apps/app/pages/[workspaceSlug]/settings/integrations.tsx b/apps/app/pages/[workspaceSlug]/settings/integrations.tsx
index 3a613e9bc..1aa5f19af 100644
--- a/apps/app/pages/[workspaceSlug]/settings/integrations.tsx
+++ b/apps/app/pages/[workspaceSlug]/settings/integrations.tsx
@@ -47,9 +47,9 @@ const WorkspaceIntegrations: NextPage = () => {
         </Breadcrumbs>
       }
     >
-      <div className="p-8 lg:px-24">
+      <div className="p-8">
         <SettingsHeader />
-        <section className="space-y-8">
+        <section className="space-y-5">
           <div className="flex flex-col items-start gap-3">
             <h3 className="text-2xl font-semibold">Integrations</h3>
             <div className="flex items-center gap-3 rounded-[10px] border border-brand-accent/75 bg-brand-accent/5 p-4 text-sm text-brand-base">
diff --git a/apps/app/pages/[workspaceSlug]/settings/members.tsx b/apps/app/pages/[workspaceSlug]/settings/members.tsx
index fd1ec43cc..4e6e4f579 100644
--- a/apps/app/pages/[workspaceSlug]/settings/members.tsx
+++ b/apps/app/pages/[workspaceSlug]/settings/members.tsx
@@ -145,9 +145,9 @@ const MembersSettings: NextPage = () => {
           </Breadcrumbs>
         }
       >
-        <div className="p-8 lg:px-24">
+        <div className="p-8">
           <SettingsHeader />
-          <section className="space-y-8">
+          <section className="space-y-5">
             <div className="flex items-end justify-between gap-4">
               <h3 className="text-2xl font-semibold">Members</h3>
               <button

From 27626fb16ffabef9573527cae2b66e75f5f31e44 Mon Sep 17 00:00:00 2001
From: pablohashescobar <118773738+pablohashescobar@users.noreply.github.com>
Date: Wed, 17 May 2023 14:58:45 +0530
Subject: [PATCH 41/81] fix: default analytic estimate points and sorting for
 custom analytics (#1066)

---
 apiserver/plane/api/views/analytic.py   | 6 ++++--
 apiserver/plane/utils/analytics_plot.py | 2 +-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/apiserver/plane/api/views/analytic.py b/apiserver/plane/api/views/analytic.py
index 28ffceab7..56ca12bae 100644
--- a/apiserver/plane/api/views/analytic.py
+++ b/apiserver/plane/api/views/analytic.py
@@ -261,11 +261,13 @@ class DefaultAnalyticsEndpoint(BaseAPIView):
             )
 
             open_estimate_sum = (
-                Issue.objects.filter(
+                queryset.filter(
                     state__group__in=["backlog", "unstarted", "started"]
                 ).aggregate(open_estimate_sum=Sum("estimate_point"))
             )["open_estimate_sum"]
-            total_estimate_sum = Issue.objects.aggregate(
+            print(open_estimate_sum)
+            
+            total_estimate_sum = queryset.aggregate(
                 total_estimate_sum=Sum("estimate_point")
             )["total_estimate_sum"]
 
diff --git a/apiserver/plane/utils/analytics_plot.py b/apiserver/plane/utils/analytics_plot.py
index 10b0a799d..161f6497e 100644
--- a/apiserver/plane/utils/analytics_plot.py
+++ b/apiserver/plane/utils/analytics_plot.py
@@ -72,5 +72,5 @@ def build_graph_plot(queryset, x_axis, y_axis, segment=None):
         order = ["low", "medium", "high", "urgent", "None"]
         sorted_data = {key: grouped_data[key] for key in order if key in grouped_data}
     else:
-        sorted_data = dict(sorted(grouped_data.items(), key=lambda x: (x[0] is "None", x[0])))
+        sorted_data = dict(sorted(grouped_data.items(), key=lambda x: (x[0] == "None", x[0])))
     return sorted_data

From d41250c1cea06c1236890955a757d37cefbe97b9 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Wed, 17 May 2023 16:04:56 +0530
Subject: [PATCH 42/81] chore: delete label confirmation modal (#1069)

* fix: negative days displayed on upcoming issues on dashboard

* chore: show completed and cancelled states by default

* chore: delete label confirmation modal
---
 .../analytics/scope-and-demand/scope.tsx      |   1 -
 .../core/board-view/single-board.tsx          |   7 +-
 .../components/labels/delete-label-modal.tsx  | 132 ++++++++++++++++++
 apps/app/components/labels/index.ts           |   1 +
 .../components/labels/single-label-group.tsx  |   6 +-
 apps/app/components/labels/single-label.tsx   |   4 +-
 apps/app/components/workspace/issues-list.tsx |  11 +-
 .../projects/[projectId]/settings/labels.tsx  |  24 ++--
 8 files changed, 157 insertions(+), 29 deletions(-)
 create mode 100644 apps/app/components/labels/delete-label-modal.tsx

diff --git a/apps/app/components/analytics/scope-and-demand/scope.tsx b/apps/app/components/analytics/scope-and-demand/scope.tsx
index 6697b775b..f7cf53be5 100644
--- a/apps/app/components/analytics/scope-and-demand/scope.tsx
+++ b/apps/app/components/analytics/scope-and-demand/scope.tsx
@@ -29,7 +29,6 @@ export const AnalyticsScope: React.FC<Props> = ({ defaultAnalytics }) => (
               return (
                 <div className="rounded-md border border-brand-base bg-brand-surface-2 p-2 text-xs">
                   <span className="font-medium text-brand-secondary">
-                    Issue count-{" "}
                     {assignee
                       ? assignee.assignees__first_name + " " + assignee.assignees__last_name
                       : "No assignee"}
diff --git a/apps/app/components/core/board-view/single-board.tsx b/apps/app/components/core/board-view/single-board.tsx
index d0fe1834a..0ebc77d5b 100644
--- a/apps/app/components/core/board-view/single-board.tsx
+++ b/apps/app/components/core/board-view/single-board.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState } from "react";
 
 import { useRouter } from "next/router";
 
@@ -60,11 +60,6 @@ export const SingleBoard: React.FC<Props> = ({
 
   const isNotAllowed = userAuth.isGuest || userAuth.isViewer || isCompleted;
 
-  useEffect(() => {
-    if (currentState?.group === "completed" || currentState?.group === "cancelled")
-      setIsCollapsed(false);
-  }, [currentState]);
-
   return (
     <div className={`flex-shrink-0 ${!isCollapsed ? "" : "flex h-full flex-col w-96"}`}>
       <BoardHeader
diff --git a/apps/app/components/labels/delete-label-modal.tsx b/apps/app/components/labels/delete-label-modal.tsx
new file mode 100644
index 000000000..772c9d064
--- /dev/null
+++ b/apps/app/components/labels/delete-label-modal.tsx
@@ -0,0 +1,132 @@
+import React, { useState } from "react";
+
+import { useRouter } from "next/router";
+
+import { mutate } from "swr";
+
+// headless ui
+import { Dialog, Transition } from "@headlessui/react";
+// icons
+import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
+// services
+import issuesService from "services/issues.service";
+// hooks
+import useToast from "hooks/use-toast";
+// ui
+import { DangerButton, SecondaryButton } from "components/ui";
+// types
+import type { IIssueLabels } from "types";
+// fetch-keys
+import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
+
+type Props = {
+  isOpen: boolean;
+  onClose: () => void;
+  data: IIssueLabels | null;
+};
+
+export const DeleteLabelModal: React.FC<Props> = ({ isOpen, onClose, data }) => {
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const handleClose = () => {
+    onClose();
+    setIsDeleteLoading(false);
+  };
+
+  const handleDeletion = async () => {
+    if (!workspaceSlug || !projectId || !data) return;
+
+    setIsDeleteLoading(true);
+
+    mutate<IIssueLabels[]>(
+      PROJECT_ISSUE_LABELS(projectId.toString()),
+      (prevData) => (prevData ?? []).filter((p) => p.id !== data.id),
+      false
+    );
+
+    await issuesService
+      .deleteIssueLabel(workspaceSlug.toString(), projectId.toString(), data.id)
+      .then(() => handleClose())
+      .catch(() => {
+        setIsDeleteLoading(false);
+
+        mutate(PROJECT_ISSUE_LABELS(projectId.toString()));
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Label could not be deleted. Please try again.",
+        });
+      });
+  };
+
+  return (
+    <Transition.Root show={isOpen} as={React.Fragment}>
+      <Dialog as="div" className="relative z-20" onClose={handleClose}>
+        <Transition.Child
+          as={React.Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-20 overflow-y-auto">
+          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+            <Transition.Child
+              as={React.Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-brand-base border border-brand-base text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
+                <div className="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+                  <div className="sm:flex sm:items-start">
+                    <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
+                      <ExclamationTriangleIcon
+                        className="h-6 w-6 text-red-600"
+                        aria-hidden="true"
+                      />
+                    </div>
+                    <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+                      <Dialog.Title
+                        as="h3"
+                        className="text-lg font-medium leading-6 text-brand-base"
+                      >
+                        Delete Label
+                      </Dialog.Title>
+                      <div className="mt-2">
+                        <p className="text-sm text-brand-secondary">
+                          Are you sure you want to delete label-{" "}
+                          <span className="font-medium text-brand-base">{data?.name}</span>? The
+                          label will be removed from all the issues.
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div className="flex justify-end gap-2 p-4 sm:px-6">
+                  <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
+                  <DangerButton onClick={handleDeletion} loading={isDeleteLoading}>
+                    {isDeleteLoading ? "Deleting..." : "Delete"}
+                  </DangerButton>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};
diff --git a/apps/app/components/labels/index.ts b/apps/app/components/labels/index.ts
index db02d29f0..0c0629d92 100644
--- a/apps/app/components/labels/index.ts
+++ b/apps/app/components/labels/index.ts
@@ -1,5 +1,6 @@
 export * from "./create-label-modal";
 export * from "./create-update-label-inline";
+export * from "./delete-label-modal";
 export * from "./labels-list-modal";
 export * from "./single-label-group";
 export * from "./single-label";
diff --git a/apps/app/components/labels/single-label-group.tsx b/apps/app/components/labels/single-label-group.tsx
index 196914cbc..00837a05c 100644
--- a/apps/app/components/labels/single-label-group.tsx
+++ b/apps/app/components/labels/single-label-group.tsx
@@ -29,7 +29,7 @@ type Props = {
   labelChildren: IIssueLabels[];
   addLabelToGroup: (parentLabel: IIssueLabels) => void;
   editLabel: (label: IIssueLabels) => void;
-  handleLabelDelete: (labelId: string) => void;
+  handleLabelDelete: () => void;
 };
 
 export const SingleLabelGroup: React.FC<Props> = ({
@@ -94,7 +94,7 @@ export const SingleLabelGroup: React.FC<Props> = ({
                     <span>Edit label</span>
                   </span>
                 </CustomMenu.MenuItem>
-                <CustomMenu.MenuItem onClick={() => handleLabelDelete(label.id)}>
+                <CustomMenu.MenuItem onClick={handleLabelDelete}>
                   <span className="flex items-center justify-start gap-2">
                     <TrashIcon className="h-4 w-4" />
                     <span>Delete label</span>
@@ -150,7 +150,7 @@ export const SingleLabelGroup: React.FC<Props> = ({
                             <span>Edit label</span>
                           </span>
                         </CustomMenu.MenuItem>
-                        <CustomMenu.MenuItem onClick={() => handleLabelDelete(child.id)}>
+                        <CustomMenu.MenuItem onClick={handleLabelDelete}>
                           <span className="flex items-center justify-start gap-2">
                             <TrashIcon className="h-4 w-4" />
                             <span>Delete label</span>
diff --git a/apps/app/components/labels/single-label.tsx b/apps/app/components/labels/single-label.tsx
index 131deb509..58e6d2932 100644
--- a/apps/app/components/labels/single-label.tsx
+++ b/apps/app/components/labels/single-label.tsx
@@ -11,7 +11,7 @@ type Props = {
   label: IIssueLabels;
   addLabelToGroup: (parentLabel: IIssueLabels) => void;
   editLabel: (label: IIssueLabels) => void;
-  handleLabelDelete: (labelId: string) => void;
+  handleLabelDelete: () => void;
 };
 
 export const SingleLabel: React.FC<Props> = ({
@@ -44,7 +44,7 @@ export const SingleLabel: React.FC<Props> = ({
             <span>Edit label</span>
           </span>
         </CustomMenu.MenuItem>
-        <CustomMenu.MenuItem onClick={() => handleLabelDelete(label.id)}>
+        <CustomMenu.MenuItem onClick={handleLabelDelete}>
           <span className="flex items-center justify-start gap-2">
             <TrashIcon className="h-4 w-4" />
             <span>Delete label</span>
diff --git a/apps/app/components/workspace/issues-list.tsx b/apps/app/components/workspace/issues-list.tsx
index 9cf7b4295..cfae13687 100644
--- a/apps/app/components/workspace/issues-list.tsx
+++ b/apps/app/components/workspace/issues-list.tsx
@@ -23,11 +23,12 @@ export const IssuesList: React.FC<Props> = ({ issues, type }) => {
   const getDateDifference = (date: Date) => {
     const today = new Date();
 
-    let diffDays = 0;
-    if (type === "overdue") {
-      const diffTime = Math.abs(today.valueOf() - date.valueOf());
-      diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
-    } else return date.getDate() - today.getDate();
+    let diffTime = 0;
+
+    if (type === "overdue") diffTime = Math.abs(today.valueOf() - date.valueOf());
+    else diffTime = Math.abs(date.valueOf() - today.valueOf());
+
+    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
 
     return diffDays;
   };
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx
index 7f1f47ddf..eea76527a 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx
@@ -12,6 +12,7 @@ import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
 // components
 import {
   CreateUpdateLabelInline,
+  DeleteLabelModal,
   LabelsListModal,
   SingleLabel,
   SingleLabelGroup,
@@ -40,6 +41,9 @@ const LabelsSettings: NextPage = () => {
   const [labelsListModal, setLabelsListModal] = useState(false);
   const [parentLabel, setParentLabel] = useState<IIssueLabels | undefined>(undefined);
 
+  // delete label
+  const [selectDeleteLabel, setSelectDeleteLabel] = useState<IIssueLabels | null>(null);
+
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
@@ -52,7 +56,7 @@ const LabelsSettings: NextPage = () => {
       : null
   );
 
-  const { data: issueLabels, mutate } = useSWR<IIssueLabels[]>(
+  const { data: issueLabels } = useSWR(
     workspaceSlug && projectId ? PROJECT_ISSUE_LABELS(projectId as string) : null,
     workspaceSlug && projectId
       ? () => issuesService.getIssueLabels(workspaceSlug as string, projectId as string)
@@ -75,15 +79,6 @@ const LabelsSettings: NextPage = () => {
     setLabelToUpdate(label);
   };
 
-  const handleLabelDelete = (labelId: string) => {
-    if (workspaceSlug && projectDetails) {
-      mutate((prevData) => prevData?.filter((p) => p.id !== labelId), false);
-      issuesService
-        .deleteIssueLabel(workspaceSlug as string, projectDetails.id, labelId)
-        .catch((e) => console.log(e));
-    }
-  };
-
   return (
     <>
       <LabelsListModal
@@ -91,6 +86,11 @@ const LabelsSettings: NextPage = () => {
         handleClose={() => setLabelsListModal(false)}
         parent={parentLabel}
       />
+      <DeleteLabelModal
+        isOpen={!!selectDeleteLabel}
+        data={selectDeleteLabel ?? null}
+        onClose={() => setSelectDeleteLabel(null)}
+      />
       <ProjectAuthorizationWrapper
         breadcrumbs={
           <Breadcrumbs>
@@ -143,7 +143,7 @@ const LabelsSettings: NextPage = () => {
                                 behavior: "smooth",
                               });
                             }}
-                            handleLabelDelete={handleLabelDelete}
+                            handleLabelDelete={() => setSelectDeleteLabel(label)}
                           />
                         );
                     } else
@@ -159,7 +159,7 @@ const LabelsSettings: NextPage = () => {
                               behavior: "smooth",
                             });
                           }}
-                          handleLabelDelete={handleLabelDelete}
+                          handleLabelDelete={() => setSelectDeleteLabel(label)}
                         />
                       );
                   })

From c3d520aefda98492296eb897d56ae8471a1c5056 Mon Sep 17 00:00:00 2001
From: pablohashescobar <118773738+pablohashescobar@users.noreply.github.com>
Date: Wed, 17 May 2023 18:32:10 +0530
Subject: [PATCH 43/81] fix: analytics segmented export (#1068)

* fix: analytics segmented export

* dev: fix none type

* fix: analytic export y axis count
---
 apiserver/plane/bgtasks/analytic_plot_export.py | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/apiserver/plane/bgtasks/analytic_plot_export.py b/apiserver/plane/bgtasks/analytic_plot_export.py
index 67df70792..ad4b76d5f 100644
--- a/apiserver/plane/bgtasks/analytic_plot_export.py
+++ b/apiserver/plane/bgtasks/analytic_plot_export.py
@@ -65,20 +65,22 @@ def analytic_export_task(email, data, slug):
                 ]
                 + segment_zero
             )
-
             rows = []
             for item in distribution:
                 generated_row = [
                     item,
                 ]
+
                 data = distribution.get(item)
-                for segment in segment_zero[1:]:
+                # Add y axis values
+                generated_row.append(sum(obj.get(key) for obj in data if obj.get(key, None) is not None))
+
+                for segment in segment_zero:
                     value = [x for x in data if x.get("segment") == segment]
                     if len(value):
                         generated_row.append(value[0].get(key))
                     else:
                         generated_row.append("0")
-
                 rows.append(tuple(generated_row))
 
             rows = [tuple(row_zero)] + rows
@@ -114,7 +116,7 @@ def analytic_export_task(email, data, slug):
                             item,
                             distribution.get(item)[0].get("count")
                             if y_axis == "issue_count"
-                            else distribution.get(item)[0].get("estimate"),
+                            else distribution.get(item)[0].get("estimate  "),
                         ]
                     )
                 )

From 5916d6e7499aa0235234d25a9c3130022c283379 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Thu, 18 May 2023 19:07:01 +0530
Subject: [PATCH 44/81] fix: bug and ui fix (#1073)

* fix: cycle and module sidebar scroll

* style: date picker theming

* style: workspace slug spacing

* fix: app sidebar z-index

* fix: favorite cycle mutation

* fix: cycle modal on error close

* feat: cycle view context

* style: active cycle stats scroll

* fix: active cycle favorite mutation

* feat: import export banner

* feat: cycle sidebar date picker logic updated

* fix: NaN in progress percentage fix

* fix: tooltip fix

* style: empty state for active cycle

* style: cycle badge width fix , all cycle empty state fix and cycle icon size fix
---
 .../core/sidebar/single-progress-stats.tsx    |   7 +-
 .../cycles/active-cycle-details.tsx           |  63 +++--
 .../components/cycles/all-cycles-board.tsx    |   2 +-
 .../app/components/cycles/all-cycles-list.tsx |   2 +-
 apps/app/components/cycles/cycles-view.tsx    |  19 +-
 apps/app/components/cycles/modal.tsx          |  13 +-
 apps/app/components/cycles/sidebar.tsx        | 260 +++++++++++++-----
 .../components/cycles/single-cycle-card.tsx   |  55 ++--
 .../components/cycles/single-cycle-list.tsx   |  19 ++
 apps/app/components/modules/sidebar.tsx       |   2 +-
 apps/app/components/ui/index.ts               |   2 +
 .../integration-and-import-export-banner.tsx  |  19 ++
 apps/app/components/ui/range-datepicker.tsx   |  65 +++++
 apps/app/components/ui/tooltip.tsx            |   5 -
 .../workspace/create-workspace-form.tsx       |   2 +-
 apps/app/layouts/app-layout/app-sidebar.tsx   |   2 +-
 .../projects/[projectId]/cycles/index.tsx     |   3 -
 .../[projectId]/settings/integrations.tsx     |  24 +-
 .../settings/import-export.tsx                |   4 +-
 .../[workspaceSlug]/settings/integrations.tsx |  16 +-
 apps/app/styles/react-datepicker.css          |  11 +-
 21 files changed, 436 insertions(+), 159 deletions(-)
 create mode 100644 apps/app/components/ui/integration-and-import-export-banner.tsx
 create mode 100644 apps/app/components/ui/range-datepicker.tsx

diff --git a/apps/app/components/core/sidebar/single-progress-stats.tsx b/apps/app/components/core/sidebar/single-progress-stats.tsx
index b2cea68c1..d8236de9b 100644
--- a/apps/app/components/core/sidebar/single-progress-stats.tsx
+++ b/apps/app/components/core/sidebar/single-progress-stats.tsx
@@ -29,7 +29,12 @@ export const SingleProgressStats: React.FC<TSingleProgressStatsProps> = ({
         <span className="h-4 w-4 ">
           <ProgressBar value={completed} maxValue={total} />
         </span>
-        <span className="w-8 text-right">{Math.floor((completed / total) * 100)}%</span>
+        <span className="w-8 text-right">
+          {isNaN(Math.floor((completed / total) * 100))
+            ? "0"
+            : Math.floor((completed / total) * 100)}
+          %
+        </span>
       </div>
       <span>of</span>
       <span>{total}</span>
diff --git a/apps/app/components/cycles/active-cycle-details.tsx b/apps/app/components/cycles/active-cycle-details.tsx
index 403c10578..7bb357709 100644
--- a/apps/app/components/cycles/active-cycle-details.tsx
+++ b/apps/app/components/cycles/active-cycle-details.tsx
@@ -51,6 +51,7 @@ import {
 import {
   CYCLE_COMPLETE_LIST,
   CYCLE_CURRENT_AND_UPCOMING_LIST,
+  CYCLE_DETAILS,
   CYCLE_DRAFT_LIST,
   CYCLE_ISSUES,
 } from "constants/fetch-keys";
@@ -153,6 +154,15 @@ export const ActiveCycleDetails: React.FC<TSingleStatProps> = ({ cycle, isComple
         );
         break;
     }
+    mutate(
+      CYCLE_DETAILS(projectId as string),
+      (prevData: any) =>
+        (prevData ?? []).map((c: any) => ({
+          ...c,
+          is_favorite: c.id === cycle.id ? true : c.is_favorite,
+        })),
+      false
+    );
 
     cyclesService
       .addCycleToFavorites(workspaceSlug as string, projectId as string, {
@@ -213,6 +223,15 @@ export const ActiveCycleDetails: React.FC<TSingleStatProps> = ({ cycle, isComple
         );
         break;
     }
+    mutate(
+      CYCLE_DETAILS(projectId as string),
+      (prevData: any) =>
+        (prevData ?? []).map((c: any) => ({
+          ...c,
+          is_favorite: c.id === cycle.id ? false : c.is_favorite,
+        })),
+      false
+    );
 
     cyclesService
       .removeCycleFromFavorites(workspaceSlug as string, projectId as string, cycle.id)
@@ -251,24 +270,26 @@ export const ActiveCycleDetails: React.FC<TSingleStatProps> = ({ cycle, isComple
     <div className="grid-row-2 grid rounded-[10px] shadow divide-y bg-brand-base border border-brand-base">
       <div className="grid grid-cols-1 divide-y border-brand-base lg:divide-y-0 lg:divide-x lg:grid-cols-3">
         <div className="flex flex-col text-xs">
-          <a className="w-full">
-            <div className="flex h-full flex-col gap-5 rounded-b-[10px] p-4">
+          <a className="h-full w-full">
+            <div className="flex h-60 flex-col gap-5 justify-between rounded-b-[10px] p-4">
               <div className="flex items-center justify-between gap-1">
                 <span className="flex items-center gap-1">
-                  <ContrastIcon
-                    className="h-5 w-5"
-                    color={`${
-                      cycleStatus === "current"
-                        ? "#09A953"
-                        : cycleStatus === "upcoming"
-                        ? "#F7AE59"
-                        : cycleStatus === "completed"
-                        ? "#3F76FF"
-                        : cycleStatus === "draft"
-                        ? "#858E96"
-                        : ""
-                    }`}
-                  />
+                  <span className="h-5 w-5">
+                    <ContrastIcon
+                      className="h-5 w-5"
+                      color={`${
+                        cycleStatus === "current"
+                          ? "#09A953"
+                          : cycleStatus === "upcoming"
+                          ? "#F7AE59"
+                          : cycleStatus === "completed"
+                          ? "#3F76FF"
+                          : cycleStatus === "draft"
+                          ? "#858E96"
+                          : ""
+                      }`}
+                    />
+                  </span>
                   <Tooltip tooltipContent={cycle.name} position="top-left">
                     <h3 className="break-all text-lg font-semibold">
                       {truncateText(cycle.name, 70)}
@@ -291,17 +312,17 @@ export const ActiveCycleDetails: React.FC<TSingleStatProps> = ({ cycle, isComple
                     }`}
                   >
                     {cycleStatus === "current" ? (
-                      <span className="flex gap-1">
+                      <span className="flex gap-1 whitespace-nowrap">
                         <PersonRunningIcon className="h-4 w-4" />
                         {findHowManyDaysLeft(cycle.end_date ?? new Date())} Days Left
                       </span>
                     ) : cycleStatus === "upcoming" ? (
-                      <span className="flex gap-1">
+                      <span className="flex gap-1 whitespace-nowrap">
                         <AlarmClockIcon className="h-4 w-4" />
                         {findHowManyDaysLeft(cycle.start_date ?? new Date())} Days Left
                       </span>
                     ) : cycleStatus === "completed" ? (
-                      <span className="flex gap-1">
+                      <span className="flex gap-1 whitespace-nowrap">
                         {cycle.total_issues - cycle.completed_issues > 0 && (
                           <Tooltip
                             tooltipContent={`${
@@ -400,7 +421,7 @@ export const ActiveCycleDetails: React.FC<TSingleStatProps> = ({ cycle, isComple
           </a>
         </div>
         <div className="grid col-span-2 grid-cols-1 divide-y border-brand-base md:divide-y-0 md:divide-x md:grid-cols-2">
-          <div className="flex h-full flex-col border-brand-base">
+          <div className="flex h-60 flex-col border-brand-base">
             <div className="flex h-full w-full flex-col text-brand-secondary p-4">
               <div className="flex w-full items-center gap-2 py-1">
                 <span>Progress</span>
@@ -428,7 +449,7 @@ export const ActiveCycleDetails: React.FC<TSingleStatProps> = ({ cycle, isComple
               </div>
             </div>
           </div>
-          <div className="border-brand-base p-4">
+          <div className="border-brand-base h-60 overflow-y-auto p-4">
             <ActiveCycleProgressStats issues={issues ?? []} />
           </div>
         </div>
diff --git a/apps/app/components/cycles/all-cycles-board.tsx b/apps/app/components/cycles/all-cycles-board.tsx
index 3aad828fd..259251fe6 100644
--- a/apps/app/components/cycles/all-cycles-board.tsx
+++ b/apps/app/components/cycles/all-cycles-board.tsx
@@ -61,7 +61,7 @@ export const AllCyclesBoard: React.FC<TCycleStatsViewProps> = ({
           </div>
         ) : type === "current" ? (
           <div className="flex w-full items-center justify-start rounded-[10px] bg-brand-surface-2 px-6 py-4">
-            <h3 className="text-base font-medium text-brand-base ">No current cycle is present.</h3>
+            <h3 className="text-base font-medium text-brand-base ">No cycle is present.</h3>
           </div>
         ) : (
           <EmptyState
diff --git a/apps/app/components/cycles/all-cycles-list.tsx b/apps/app/components/cycles/all-cycles-list.tsx
index 1230a1b9d..502e13e8e 100644
--- a/apps/app/components/cycles/all-cycles-list.tsx
+++ b/apps/app/components/cycles/all-cycles-list.tsx
@@ -65,7 +65,7 @@ export const AllCyclesList: React.FC<TCycleStatsViewProps> = ({
           </div>
         ) : type === "current" ? (
           <div className="flex w-full items-center justify-start rounded-[10px] bg-brand-surface-2 px-6 py-4">
-            <h3 className="text-base font-medium text-brand-base ">No current cycle is present.</h3>
+            <h3 className="text-base font-medium text-brand-base ">No cycle is present.</h3>
           </div>
         ) : (
           <EmptyState
diff --git a/apps/app/components/cycles/cycles-view.tsx b/apps/app/components/cycles/cycles-view.tsx
index 821e181e7..ac4c19e27 100644
--- a/apps/app/components/cycles/cycles-view.tsx
+++ b/apps/app/components/cycles/cycles-view.tsx
@@ -13,9 +13,10 @@ import {
   CompletedCycles,
 } from "components/cycles";
 // ui
-import { Loader } from "components/ui";
+import { EmptyState, Loader } from "components/ui";
 // icons
 import { ListBulletIcon, Squares2X2Icon } from "@heroicons/react/24/outline";
+import emptyCycle from "public/empty-state/empty-cycle.svg";
 // types
 import {
   SelectCycleType,
@@ -25,8 +26,6 @@ import {
 } from "types";
 
 type Props = {
-  cycleView: string;
-  setCycleView: React.Dispatch<React.SetStateAction<string>>;
   setSelectedCycle: React.Dispatch<React.SetStateAction<SelectCycleType>>;
   setCreateUpdateCycleModal: React.Dispatch<React.SetStateAction<boolean>>;
   cyclesCompleteList: ICycle[] | undefined;
@@ -35,8 +34,6 @@ type Props = {
 };
 
 export const CyclesView: React.FC<Props> = ({
-  cycleView,
-  setCycleView,
   setSelectedCycle,
   setCreateUpdateCycleModal,
   cyclesCompleteList,
@@ -44,6 +41,7 @@ export const CyclesView: React.FC<Props> = ({
   draftCycles,
 }) => {
   const { storedValue: cycleTab, setValue: setCycleTab } = useLocalStorage("cycleTab", "All");
+  const { storedValue: cycleView, setValue: setCycleView } = useLocalStorage("cycleView", "list");
 
   const currentTabValue = (tab: string | null) => {
     switch (tab) {
@@ -153,8 +151,15 @@ export const CyclesView: React.FC<Props> = ({
             )}
           </Tab.Panel>
           <Tab.Panel as="div" className="mt-7 space-y-5">
-            {currentAndUpcomingCycles?.current_cycle?.[0] && (
+            {currentAndUpcomingCycles?.current_cycle?.[0] ? (
               <ActiveCycleDetails cycle={currentAndUpcomingCycles?.current_cycle?.[0]} />
+            ) : (
+              <EmptyState
+                type="cycle"
+                title="Create New Cycle"
+                description="Sprint more effectively with Cycles by confining your project to a fixed amount of time. Create new cycle now."
+                imgURL={emptyCycle}
+              />
             )}
           </Tab.Panel>
           <Tab.Panel as="div" className="mt-7 space-y-5">
@@ -177,7 +182,7 @@ export const CyclesView: React.FC<Props> = ({
           </Tab.Panel>
           <Tab.Panel as="div" className="mt-7 space-y-5">
             <CompletedCycles
-              cycleView={cycleView}
+              cycleView={cycleView ?? "list"}
               setCreateUpdateCycleModal={setCreateUpdateCycleModal}
               setSelectedCycle={setSelectedCycle}
             />
diff --git a/apps/app/components/cycles/modal.tsx b/apps/app/components/cycles/modal.tsx
index f96c680ca..b3baacd65 100644
--- a/apps/app/components/cycles/modal.tsx
+++ b/apps/app/components/cycles/modal.tsx
@@ -160,14 +160,10 @@ export const CreateUpdateCycleModal: React.FC<CycleModalProps> = ({
           title: "Error!",
           message: "Unable to create cycle in past date. Please enter a valid date.",
         });
+        handleClose();
         return;
       }
 
-      const isDateValid = await dateChecker({
-        start_date: payload.start_date,
-        end_date: payload.end_date,
-      });
-
       if (data?.start_date && data?.end_date) {
         const isDateValidForExistingCycle = await dateChecker({
           start_date: payload.start_date,
@@ -185,10 +181,16 @@ export const CreateUpdateCycleModal: React.FC<CycleModalProps> = ({
             message:
               "You have a cycle already on the given dates, if you want to create your draft cycle you can do that by removing dates",
           });
+          handleClose();
           return;
         }
       }
 
+      const isDateValid = await dateChecker({
+        start_date: payload.start_date,
+        end_date: payload.end_date,
+      });
+
       if (isDateValid) {
         if (data) {
           await updateCycle(data.id, payload);
@@ -202,6 +204,7 @@ export const CreateUpdateCycleModal: React.FC<CycleModalProps> = ({
           message:
             "You have a cycle already on the given dates, if you want to create your draft cycle you can do that by removing dates",
         });
+        handleClose();
       }
     } else {
       if (data) {
diff --git a/apps/app/components/cycles/sidebar.tsx b/apps/app/components/cycles/sidebar.tsx
index 86c8132b0..494383fc4 100644
--- a/apps/app/components/cycles/sidebar.tsx
+++ b/apps/app/components/cycles/sidebar.tsx
@@ -8,7 +8,6 @@ import useSWR, { mutate } from "swr";
 // react-hook-form
 import { useForm } from "react-hook-form";
 import { Disclosure, Popover, Transition } from "@headlessui/react";
-import DatePicker from "react-datepicker";
 // icons
 import {
   CalendarDaysIcon,
@@ -21,7 +20,7 @@ import {
   LinkIcon,
 } from "@heroicons/react/24/outline";
 // ui
-import { CustomMenu, Loader, ProgressBar } from "components/ui";
+import { CustomMenu, CustomRangeDatePicker, Loader, ProgressBar } from "components/ui";
 // hooks
 import useToast from "hooks/use-toast";
 // services
@@ -34,7 +33,11 @@ import { DeleteCycleModal } from "components/cycles";
 import { ExclamationIcon } from "components/icons";
 // helpers
 import { capitalizeFirstLetter, copyTextToClipboard } from "helpers/string.helper";
-import { isDateRangeValid, renderDateFormat, renderShortDate } from "helpers/date-time.helper";
+import {
+  isDateGreaterThanToday,
+  renderDateFormat,
+  renderShortDate,
+} from "helpers/date-time.helper";
 // types
 import { ICycle, IIssue } from "types";
 // fetch-keys
@@ -77,7 +80,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
       : null
   );
 
-  const { reset, watch } = useForm({
+  const { setValue, reset, watch } = useForm({
     defaultValues,
   });
 
@@ -122,6 +125,166 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
       });
   }, [cycle, reset]);
 
+  const dateChecker = async (payload: any) => {
+    try {
+      const res = await cyclesService.cycleDateCheck(
+        workspaceSlug as string,
+        projectId as string,
+        payload
+      );
+      return res.status;
+    } catch (err) {
+      return false;
+    }
+  };
+
+  const handleStartDateChange = async (date: string) => {
+    setValue("start_date", date);
+    if (
+      watch("start_date") &&
+      watch("end_date") &&
+      watch("start_date") !== "" &&
+      watch("end_date") &&
+      watch("start_date") !== ""
+    ) {
+      if (!isDateGreaterThanToday(`${watch("end_date")}`)) {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Unable to create cycle in past date. Please enter a valid date.",
+        });
+        return;
+      }
+
+      if (cycle?.start_date && cycle?.end_date) {
+        const isDateValidForExistingCycle = await dateChecker({
+          start_date: `${watch("start_date")}`,
+          end_date: `${watch("end_date")}`,
+          cycle_id: cycle.id,
+        });
+
+        if (isDateValidForExistingCycle) {
+          await submitChanges({
+            start_date: renderDateFormat(`${watch("start_date")}`),
+            end_date: renderDateFormat(`${watch("end_date")}`),
+          });
+          setToastAlert({
+            type: "success",
+            title: "Success!",
+            message: "Cycle updated successfully.",
+          });
+          return;
+        } else {
+          setToastAlert({
+            type: "error",
+            title: "Error!",
+            message:
+              "You have a cycle already on the given dates, if you want to create your draft cycle you can do that by removing dates",
+          });
+          return;
+        }
+      }
+
+      const isDateValid = await dateChecker({
+        start_date: `${watch("start_date")}`,
+        end_date: `${watch("end_date")}`,
+      });
+
+      if (isDateValid) {
+        submitChanges({
+          start_date: renderDateFormat(`${watch("start_date")}`),
+          end_date: renderDateFormat(`${watch("end_date")}`),
+        });
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "Cycle updated successfully.",
+        });
+      } else {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message:
+            "You have a cycle already on the given dates, if you want to create your draft cycle you can do that by removing dates",
+        });
+      }
+    }
+  };
+
+  const handleEndDateChange = async (date: string) => {
+    setValue("end_date", date);
+
+    if (
+      watch("start_date") &&
+      watch("end_date") &&
+      watch("start_date") !== "" &&
+      watch("end_date") &&
+      watch("start_date") !== ""
+    ) {
+      if (!isDateGreaterThanToday(`${watch("end_date")}`)) {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Unable to create cycle in past date. Please enter a valid date.",
+        });
+        return;
+      }
+
+      if (cycle?.start_date && cycle?.end_date) {
+        const isDateValidForExistingCycle = await dateChecker({
+          start_date: `${watch("start_date")}`,
+          end_date: `${watch("end_date")}`,
+          cycle_id: cycle.id,
+        });
+
+        if (isDateValidForExistingCycle) {
+          await submitChanges({
+            start_date: renderDateFormat(`${watch("start_date")}`),
+            end_date: renderDateFormat(`${watch("end_date")}`),
+          });
+          setToastAlert({
+            type: "success",
+            title: "Success!",
+            message: "Cycle updated successfully.",
+          });
+          return;
+        } else {
+          setToastAlert({
+            type: "error",
+            title: "Error!",
+            message:
+              "You have a cycle already on the given dates, if you want to create your draft cycle you can do that by removing dates",
+          });
+          return;
+        }
+      }
+
+      const isDateValid = await dateChecker({
+        start_date: `${watch("start_date")}`,
+        end_date: `${watch("end_date")}`,
+      });
+
+      if (isDateValid) {
+        submitChanges({
+          start_date: renderDateFormat(`${watch("start_date")}`),
+          end_date: renderDateFormat(`${watch("end_date")}`),
+        });
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "Cycle updated successfully.",
+        });
+      } else {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message:
+            "You have a cycle already on the given dates, if you want to create your draft cycle you can do that by removing dates",
+        });
+      }
+    }
+  };
+
   const isStartValid = new Date(`${cycle?.start_date}`) <= new Date();
   const isEndValid = new Date(`${cycle?.end_date}`) >= new Date(`${cycle?.start_date}`);
 
@@ -135,7 +298,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
       <div
         className={`fixed top-[66px] ${
           isOpen ? "right-0" : "-right-[24rem]"
-        } h-full w-[24rem] overflow-y-auto border-l border-brand-base bg-brand-sidebar py-5 duration-300`}
+        } h-full w-[24rem] overflow-y-auto border-l border-brand-base bg-brand-sidebar pt-5 pb-10 duration-300`}
       >
         {cycle ? (
           <>
@@ -158,7 +321,12 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
                         >
                           <CalendarDaysIcon className="h-3 w-3" />
                           <span>
-                            {renderShortDate(new Date(`${cycle?.start_date}`), "Start date")}
+                            {renderShortDate(
+                              new Date(
+                                `${watch("start_date") ? watch("start_date") : cycle?.start_date}`
+                              ),
+                              "Start date"
+                            )}
                           </span>
                         </Popover.Button>
 
@@ -172,36 +340,17 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
                           leaveTo="opacity-0 translate-y-1"
                         >
                           <Popover.Panel className="absolute top-10 -right-5 z-20  transform overflow-hidden">
-                            <DatePicker
-                              selected={
-                                watch("start_date")
-                                  ? new Date(`${watch("start_date")}`)
-                                  : new Date()
-                              }
-                              onChange={(date) => {
-                                if (date && watch("end_date")) {
-                                  if (
-                                    isDateRangeValid(renderDateFormat(date), `${watch("end_date")}`)
-                                  ) {
-                                    submitChanges({
-                                      start_date: renderDateFormat(date),
-                                    });
-                                  } else {
-                                    setToastAlert({
-                                      type: "error",
-                                      title: "Error!",
-                                      message:
-                                        "The date you have entered is invalid. Please check and enter a valid date.",
-                                    });
-                                  }
+                            <CustomRangeDatePicker
+                              value={watch("start_date") ? watch("start_date") : cycle?.start_date}
+                              onChange={(val) => {
+                                if (val) {
+                                  handleStartDateChange(val);
                                 }
                               }}
-                              selectsStart
-                              startDate={new Date(`${watch("start_date")}`)}
-                              endDate={new Date(`${watch("end_date")}`)}
+                              startDate={watch("start_date") ? `${watch("start_date")}` : null}
+                              endDate={watch("end_date") ? `${watch("end_date")}` : null}
                               maxDate={new Date(`${watch("end_date")}`)}
-                              shouldCloseOnSelect
-                              inline
+                              selectsStart
                             />
                           </Popover.Panel>
                         </Transition>
@@ -222,7 +371,14 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
                         >
                           <CalendarDaysIcon className="h-3 w-3" />
 
-                          <span>{renderShortDate(new Date(`${cycle?.end_date}`), "End date")}</span>
+                          <span>
+                            {renderShortDate(
+                              new Date(
+                                `${watch("end_date") ? watch("end_date") : cycle?.end_date}`
+                              ),
+                              "End date"
+                            )}
+                          </span>
                         </Popover.Button>
 
                         <Transition
@@ -235,37 +391,17 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
                           leaveTo="opacity-0 translate-y-1"
                         >
                           <Popover.Panel className="absolute top-10 -right-5 z-20 transform overflow-hidden">
-                            <DatePicker
-                              selected={
-                                watch("end_date") ? new Date(`${watch("end_date")}`) : new Date()
-                              }
-                              onChange={(date) => {
-                                if (watch("start_date") && date) {
-                                  if (
-                                    isDateRangeValid(
-                                      `${watch("start_date")}`,
-                                      renderDateFormat(date)
-                                    )
-                                  ) {
-                                    submitChanges({
-                                      end_date: renderDateFormat(date),
-                                    });
-                                  } else {
-                                    setToastAlert({
-                                      type: "error",
-                                      title: "Error!",
-                                      message:
-                                        "The date you have entered is invalid. Please check and enter a valid date.",
-                                    });
-                                  }
+                            <CustomRangeDatePicker
+                              value={watch("end_date") ? watch("end_date") : cycle?.end_date}
+                              onChange={(val) => {
+                                if (val) {
+                                  handleEndDateChange(val);
                                 }
                               }}
-                              selectsEnd
-                              startDate={new Date(`${watch("start_date")}`)}
-                              endDate={new Date(`${watch("end_date")}`)}
+                              startDate={watch("start_date") ? `${watch("start_date")}` : null}
+                              endDate={watch("end_date") ? `${watch("end_date")}` : null}
                               minDate={new Date(`${watch("start_date")}`)}
-                              shouldCloseOnSelect
-                              inline
+                              selectsEnd
                             />
                           </Popover.Panel>
                         </Transition>
diff --git a/apps/app/components/cycles/single-cycle-card.tsx b/apps/app/components/cycles/single-cycle-card.tsx
index 8021ebdfe..a5f6e8110 100644
--- a/apps/app/components/cycles/single-cycle-card.tsx
+++ b/apps/app/components/cycles/single-cycle-card.tsx
@@ -51,6 +51,7 @@ import {
 import {
   CYCLE_COMPLETE_LIST,
   CYCLE_CURRENT_AND_UPCOMING_LIST,
+  CYCLE_DETAILS,
   CYCLE_DRAFT_LIST,
 } from "constants/fetch-keys";
 
@@ -150,6 +151,15 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = ({
         );
         break;
     }
+    mutate(
+      CYCLE_DETAILS(projectId as string),
+      (prevData: any) =>
+        (prevData ?? []).map((c: any) => ({
+          ...c,
+          is_favorite: c.id === cycle.id ? true : c.is_favorite,
+        })),
+      false
+    );
 
     cyclesService
       .addCycleToFavorites(workspaceSlug as string, projectId as string, {
@@ -210,6 +220,15 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = ({
         );
         break;
     }
+    mutate(
+      CYCLE_DETAILS(projectId as string),
+      (prevData: any) =>
+        (prevData ?? []).map((c: any) => ({
+          ...c,
+          is_favorite: c.id === cycle.id ? false : c.is_favorite,
+        })),
+      false
+    );
 
     cyclesService
       .removeCycleFromFavorites(workspaceSlug as string, projectId as string, cycle.id)
@@ -263,20 +282,22 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = ({
             <div className="flex h-full flex-col gap-4 rounded-b-[10px] p-4">
               <div className="flex items-center justify-between gap-1">
                 <span className="flex items-center gap-1">
-                  <ContrastIcon
-                    className="h-5 w-5"
-                    color={`${
-                      cycleStatus === "current"
-                        ? "#09A953"
-                        : cycleStatus === "upcoming"
-                        ? "#F7AE59"
-                        : cycleStatus === "completed"
-                        ? "#3F76FF"
-                        : cycleStatus === "draft"
-                        ? "#858E96"
-                        : ""
-                    }`}
-                  />
+                  <span className="h-5 w-5">
+                    <ContrastIcon
+                      className="h-5 w-5"
+                      color={`${
+                        cycleStatus === "current"
+                          ? "#09A953"
+                          : cycleStatus === "upcoming"
+                          ? "#F7AE59"
+                          : cycleStatus === "completed"
+                          ? "#3F76FF"
+                          : cycleStatus === "draft"
+                          ? "#858E96"
+                          : ""
+                      }`}
+                    />
+                  </span>
                   <Tooltip tooltipContent={cycle.name} className="break-all" position="top-left">
                     <h3 className="break-all text-lg font-semibold">
                       {truncateText(cycle.name, 15)}
@@ -299,17 +320,17 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = ({
                     }`}
                   >
                     {cycleStatus === "current" ? (
-                      <span className="flex gap-1">
+                      <span className="flex gap-1 whitespace-nowrap">
                         <PersonRunningIcon className="h-4 w-4" />
                         {findHowManyDaysLeft(cycle.end_date ?? new Date())} Days Left
                       </span>
                     ) : cycleStatus === "upcoming" ? (
-                      <span className="flex gap-1">
+                      <span className="flex gap-1 whitespace-nowrap">
                         <AlarmClockIcon className="h-4 w-4" />
                         {findHowManyDaysLeft(cycle.start_date ?? new Date())} Days Left
                       </span>
                     ) : cycleStatus === "completed" ? (
-                      <span className="flex gap-1">
+                      <span className="flex gap-1 whitespace-nowrap">
                         {cycle.total_issues - cycle.completed_issues > 0 && (
                           <Tooltip
                             tooltipContent={`${
diff --git a/apps/app/components/cycles/single-cycle-list.tsx b/apps/app/components/cycles/single-cycle-list.tsx
index b3b27005e..a8976292e 100644
--- a/apps/app/components/cycles/single-cycle-list.tsx
+++ b/apps/app/components/cycles/single-cycle-list.tsx
@@ -42,6 +42,7 @@ import {
 import {
   CYCLE_COMPLETE_LIST,
   CYCLE_CURRENT_AND_UPCOMING_LIST,
+  CYCLE_DETAILS,
   CYCLE_DRAFT_LIST,
 } from "constants/fetch-keys";
 import { type } from "os";
@@ -184,6 +185,15 @@ export const SingleCycleList: React.FC<TSingleStatProps> = ({
         );
         break;
     }
+    mutate(
+      CYCLE_DETAILS(projectId as string),
+      (prevData: any) =>
+        (prevData ?? []).map((c: any) => ({
+          ...c,
+          is_favorite: c.id === cycle.id ? true : c.is_favorite,
+        })),
+      false
+    );
 
     cyclesService
       .addCycleToFavorites(workspaceSlug as string, projectId as string, {
@@ -244,6 +254,15 @@ export const SingleCycleList: React.FC<TSingleStatProps> = ({
         );
         break;
     }
+    mutate(
+      CYCLE_DETAILS(projectId as string),
+      (prevData: any) =>
+        (prevData ?? []).map((c: any) => ({
+          ...c,
+          is_favorite: c.id === cycle.id ? false : c.is_favorite,
+        })),
+      false
+    );
 
     cyclesService
       .removeCycleFromFavorites(workspaceSlug as string, projectId as string, cycle.id)
diff --git a/apps/app/components/modules/sidebar.tsx b/apps/app/components/modules/sidebar.tsx
index 502675bef..c1b4674b7 100644
--- a/apps/app/components/modules/sidebar.tsx
+++ b/apps/app/components/modules/sidebar.tsx
@@ -185,7 +185,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen,
       <div
         className={`fixed top-[66px] ${
           isOpen ? "right-0" : "-right-[24rem]"
-        } h-full w-[24rem] overflow-y-auto border-l border-brand-base bg-brand-sidebar py-5 duration-300`}
+        } h-full w-[24rem] overflow-y-auto border-l border-brand-base bg-brand-sidebar pt-5 pb-10 duration-300`}
       >
         {module ? (
           <>
diff --git a/apps/app/components/ui/index.ts b/apps/app/components/ui/index.ts
index 4557badd4..476f0af3e 100644
--- a/apps/app/components/ui/index.ts
+++ b/apps/app/components/ui/index.ts
@@ -23,3 +23,5 @@ export * from "./tooltip";
 export * from "./toggle-switch";
 export * from "./markdown-to-component";
 export * from "./product-updates-modal";
+export * from "./integration-and-import-export-banner";
+export * from "./range-datepicker";
diff --git a/apps/app/components/ui/integration-and-import-export-banner.tsx b/apps/app/components/ui/integration-and-import-export-banner.tsx
new file mode 100644
index 000000000..19bbc353d
--- /dev/null
+++ b/apps/app/components/ui/integration-and-import-export-banner.tsx
@@ -0,0 +1,19 @@
+import { ExclamationIcon } from "components/icons";
+
+type Props = {
+  bannerName: string;
+};
+
+export const IntegrationAndImportExportBanner: React.FC<Props> = ({ bannerName }) => (
+  <div className="flex flex-col items-start gap-3">
+    <h3 className="text-2xl font-semibold">{bannerName}</h3>
+    <div className="flex items-center gap-3 rounded-[10px] border border-brand-accent/75 bg-brand-accent/5 p-4 text-sm text-brand-base">
+      <ExclamationIcon height={24} width={24} className="fill-current text-brand-base" />
+      <p className="leading-5">
+        Integrations and importers are only available on the cloud version. We plan to open-source
+        our SDKs in the near future so that the community can request or contribute integrations as
+        needed.
+      </p>
+    </div>
+  </div>
+);
diff --git a/apps/app/components/ui/range-datepicker.tsx b/apps/app/components/ui/range-datepicker.tsx
new file mode 100644
index 000000000..0dfda41ec
--- /dev/null
+++ b/apps/app/components/ui/range-datepicker.tsx
@@ -0,0 +1,65 @@
+// react-datepicker
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+// helpers
+import { renderDateFormat } from "helpers/date-time.helper";
+
+type Props = {
+  renderAs?: "input" | "button";
+  value: Date | string | null | undefined;
+  onChange: (val: string | null) => void;
+  error?: boolean;
+  className?: string;
+  isClearable?: boolean;
+  disabled?: boolean;
+  startDate: string | null;
+  endDate: string | null;
+  selectsStart?: boolean;
+  selectsEnd?: boolean;
+  minDate?: Date | null | undefined;
+  maxDate?: Date | null | undefined;
+};
+
+export const CustomRangeDatePicker: React.FC<Props> = ({
+  renderAs = "button",
+  value,
+  onChange,
+  error = false,
+  className = "",
+  disabled = false,
+  startDate,
+  endDate,
+  selectsStart = false,
+  selectsEnd = false,
+  minDate = null,
+  maxDate = null,
+}) => (
+  <DatePicker
+    selected={value ? new Date(value) : null}
+    onChange={(val) => {
+      if (!val) onChange(null);
+      else onChange(renderDateFormat(val));
+    }}
+    className={`${
+      renderAs === "input"
+        ? "block px-3 py-2 text-sm focus:outline-none"
+        : renderAs === "button"
+        ? `px-3 py-1 text-xs shadow-sm ${
+            disabled ? "" : "hover:bg-brand-surface-2"
+          } duration-300 focus:border-brand-accent focus:outline-none focus:ring-1 focus:ring-brand-accent`
+        : ""
+    } ${error ? "border-red-500 bg-red-100" : ""} ${
+      disabled ? "cursor-not-allowed" : "cursor-pointer"
+    } w-full rounded-md border border-brand-base bg-transparent caret-transparent ${className}`}
+    dateFormat="dd-MM-yyyy"
+    disabled={disabled}
+    selectsStart={selectsStart}
+    selectsEnd={selectsEnd}
+    startDate={startDate ? new Date(startDate) : new Date()}
+    endDate={endDate ? new Date(endDate) : new Date()}
+    minDate={minDate}
+    maxDate={maxDate}
+    shouldCloseOnSelect
+    inline
+  />
+);
diff --git a/apps/app/components/ui/tooltip.tsx b/apps/app/components/ui/tooltip.tsx
index 76f4b9762..11504facd 100644
--- a/apps/app/components/ui/tooltip.tsx
+++ b/apps/app/components/ui/tooltip.tsx
@@ -46,11 +46,6 @@ export const Tooltip: React.FC<Props> = ({
           theme === "light" ? "text-brand-muted-1 bg-brand-surface-2" : "bg-black text-white"
         }`}
       >
-        <div
-          className={`absolute inset-0 left-1/2 -top-1 h-3 w-3 rotate-45 bg-brand-surface-2 ${
-            theme === "light" ? "text-brand-muted-1 bg-brand-surface-2" : "bg-black text-white"
-          }`}
-        />
         {tooltipHeading && <h5 className="font-medium">{tooltipHeading}</h5>}
         {tooltipContent}
       </div>
diff --git a/apps/app/components/workspace/create-workspace-form.tsx b/apps/app/components/workspace/create-workspace-form.tsx
index 620e06c7d..0b2b7d984 100644
--- a/apps/app/components/workspace/create-workspace-form.tsx
+++ b/apps/app/components/workspace/create-workspace-form.tsx
@@ -137,7 +137,7 @@ export const CreateWorkspaceForm: React.FC<Props> = ({
                   autoComplete="off"
                   name="slug"
                   register={register}
-                  className="block w-full rounded-md bg-transparent py-2 px-0 text-sm"
+                  className="block w-full rounded-md bg-transparent py-2 !px-0 text-sm"
                   validations={{
                     required: "Workspace URL is required",
                   }}
diff --git a/apps/app/layouts/app-layout/app-sidebar.tsx b/apps/app/layouts/app-layout/app-sidebar.tsx
index a24c4e2d0..ccdc29ad3 100644
--- a/apps/app/layouts/app-layout/app-sidebar.tsx
+++ b/apps/app/layouts/app-layout/app-sidebar.tsx
@@ -19,7 +19,7 @@ const Sidebar: React.FC<SidebarProps> = ({ toggleSidebar, setToggleSidebar }) =>
 
   return (
     <div
-      className={`z-30 h-full flex-shrink-0 border-r border-brand-base ${
+      className={`z-20 h-full flex-shrink-0 border-r border-brand-base ${
         sidebarCollapse ? "" : "w-auto md:w-[17rem]"
       } fixed inset-y-0 top-0 ${
         toggleSidebar ? "left-0" : "-left-full md:left-0"
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
index 824de13ff..ff70bcdcb 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
@@ -30,7 +30,6 @@ import {
 const ProjectCycles: NextPage = () => {
   const [selectedCycle, setSelectedCycle] = useState<SelectCycleType>();
   const [createUpdateCycleModal, setCreateUpdateCycleModal] = useState(false);
-  const [cycleView, setCycleView] = useState<string>("list");
 
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
@@ -121,8 +120,6 @@ const ProjectCycles: NextPage = () => {
         <div className="flex flex-col gap-5">
           <h3 className="text-2xl font-semibold text-brand-base">Cycles</h3>
           <CyclesView
-            cycleView={cycleView}
-            setCycleView={setCycleView}
             setSelectedCycle={setSelectedCycle}
             setCreateUpdateCycleModal={setCreateUpdateCycleModal}
             cyclesCompleteList={cyclesCompleteList}
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/integrations.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/integrations.tsx
index 0c2fc687e..d2acc3a5f 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/integrations.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/integrations.tsx
@@ -12,11 +12,15 @@ import projectService from "services/project.service";
 // components
 import { SettingsHeader, SingleIntegration } from "components/project";
 // ui
-import { EmptySpace, EmptySpaceItem, Loader } from "components/ui";
+import {
+  EmptySpace,
+  EmptySpaceItem,
+  IntegrationAndImportExportBanner,
+  Loader,
+} from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
 import { PlusIcon, PuzzlePieceIcon } from "@heroicons/react/24/outline";
-import { ExclamationIcon } from "components/icons";
 // types
 import { IProject } from "types";
 import type { NextPage } from "next";
@@ -59,21 +63,7 @@ const ProjectIntegrations: NextPage = () => {
         {workspaceIntegrations ? (
           workspaceIntegrations.length > 0 ? (
             <section className="space-y-8">
-              <div className="flex flex-col items-start gap-3">
-                <h3 className="text-2xl font-semibold">Integrations</h3>
-                <div className="flex items-center gap-3 rounded-[10px] border border-brand-accent/75 bg-brand-accent/5 p-4 text-sm text-brand-base">
-                  <ExclamationIcon
-                    height={24}
-                    width={24}
-                    className="fill-current text-brand-base"
-                  />
-                  <p className="leading-5">
-                    Integrations and importers are only available on the cloud version. We plan to
-                    open-source our SDKs in the near future so that the community can request or
-                    contribute integrations as needed.
-                  </p>
-                </div>
-              </div>
+              <IntegrationAndImportExportBanner bannerName="Integrations" />
               <div className="space-y-5">
                 {workspaceIntegrations.map((integration) => (
                   <SingleIntegration
diff --git a/apps/app/pages/[workspaceSlug]/settings/import-export.tsx b/apps/app/pages/[workspaceSlug]/settings/import-export.tsx
index 2384d6e46..efd72af24 100644
--- a/apps/app/pages/[workspaceSlug]/settings/import-export.tsx
+++ b/apps/app/pages/[workspaceSlug]/settings/import-export.tsx
@@ -9,6 +9,7 @@ import IntegrationGuide from "components/integration/guide";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // types
 import type { NextPage } from "next";
+import { IntegrationAndImportExportBanner } from "components/ui";
 
 const ImportExport: NextPage = () => {
   const router = useRouter();
@@ -23,8 +24,9 @@ const ImportExport: NextPage = () => {
         </Breadcrumbs>
       }
     >
-      <div className="p-8">
+      <div className="p-8 space-y-4">
         <SettingsHeader />
+        <IntegrationAndImportExportBanner bannerName="Import/ Export" />
         <IntegrationGuide />
       </div>
     </WorkspaceAuthorizationLayout>
diff --git a/apps/app/pages/[workspaceSlug]/settings/integrations.tsx b/apps/app/pages/[workspaceSlug]/settings/integrations.tsx
index 1aa5f19af..b94057bea 100644
--- a/apps/app/pages/[workspaceSlug]/settings/integrations.tsx
+++ b/apps/app/pages/[workspaceSlug]/settings/integrations.tsx
@@ -13,10 +13,8 @@ import { SettingsHeader } from "components/workspace";
 // components
 import { SingleIntegrationCard } from "components/integration";
 // ui
-import { Loader } from "components/ui";
+import { IntegrationAndImportExportBanner, Loader } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
-// icons
-import { ExclamationIcon } from "components/icons";
 // types
 import type { NextPage } from "next";
 // fetch-keys
@@ -50,17 +48,7 @@ const WorkspaceIntegrations: NextPage = () => {
       <div className="p-8">
         <SettingsHeader />
         <section className="space-y-5">
-          <div className="flex flex-col items-start gap-3">
-            <h3 className="text-2xl font-semibold">Integrations</h3>
-            <div className="flex items-center gap-3 rounded-[10px] border border-brand-accent/75 bg-brand-accent/5 p-4 text-sm text-brand-base">
-              <ExclamationIcon height={24} width={24} className="fill-current text-brand-base" />
-              <p className="leading-5">
-                Integrations and importers are only available on the cloud version. We plan to
-                open-source our SDKs in the near future so that the community can request or
-                contribute integrations as needed.
-              </p>
-            </div>
-          </div>
+          <IntegrationAndImportExportBanner bannerName="Integrations" />
           <div className="space-y-5">
             {appIntegrations ? (
               appIntegrations.map((integration) => (
diff --git a/apps/app/styles/react-datepicker.css b/apps/app/styles/react-datepicker.css
index ed866f36d..ecf5bb9fb 100644
--- a/apps/app/styles/react-datepicker.css
+++ b/apps/app/styles/react-datepicker.css
@@ -117,6 +117,15 @@
   color: white !important;
 }
 
-.react-datepicker__day--in-range {
+.react-datepicker__day--in-range-start,
+.react-datepicker__day--in-range-end {
+  background-color: rgba(var(--color-bg-accent)) !important;
+  color: white !important;
+}
+
+.react-datepicker__day--in-range:not(.react-datepicker__day--in-range-start):not(
+    .react-datepicker__day--in-range-end
+  ) {
+  background-color: rgba(var(--color-accent)) !important;
   color: white !important;
 }

From 09cffd5498f4b634447c56000d8bc0609e198063 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Thu, 18 May 2023 19:07:24 +0530
Subject: [PATCH 45/81] fix: analytics colors when segmented by cycle, module,
 dates, and assignees (#1072)

* fix: show unique colors when segmented

* chore: modify random color generator function

* chore: modify random color generator function
---
 .../custom-analytics/graph/index.tsx          |  2 --
 .../components/analytics/select/project.tsx   |  8 +++++--
 .../components/ui/custom-search-select.tsx    |  5 ++++-
 apps/app/components/ui/custom-select.tsx      |  1 +
 apps/app/helpers/analytics.helper.ts          | 20 ++++++++++-------
 apps/app/helpers/string.helper.ts             | 22 +++++++++++++++++++
 6 files changed, 45 insertions(+), 13 deletions(-)

diff --git a/apps/app/components/analytics/custom-analytics/graph/index.tsx b/apps/app/components/analytics/custom-analytics/graph/index.tsx
index 6ae28f02b..057d76022 100644
--- a/apps/app/components/analytics/custom-analytics/graph/index.tsx
+++ b/apps/app/components/analytics/custom-analytics/graph/index.tsx
@@ -83,8 +83,6 @@ export const AnalyticsGraph: React.FC<Props> = ({
                   (a) => a.assignees__email === datum.value
                 )?.assignees__avatar;
 
-                console.log(avatar);
-
                 if (avatar && avatar !== "")
                   return (
                     <g transform={`translate(${datum.x},${datum.y})`}>
diff --git a/apps/app/components/analytics/select/project.tsx b/apps/app/components/analytics/select/project.tsx
index efee62ba6..0cc88aa3b 100644
--- a/apps/app/components/analytics/select/project.tsx
+++ b/apps/app/components/analytics/select/project.tsx
@@ -13,7 +13,12 @@ export const SelectProject: React.FC<Props> = ({ value, onChange, projects }) =>
   const options = projects?.map((project) => ({
     value: project.id,
     query: project.name + project.identifier,
-    content: <>{project.name}</>,
+    content: (
+      <div className="flex items-center gap-2">
+        <span className="text-brand-secondary text-[0.65rem]">{project.identifier}</span>
+        {project.name}
+      </div>
+    ),
   }));
 
   return (
@@ -30,7 +35,6 @@ export const SelectProject: React.FC<Props> = ({ value, onChange, projects }) =>
           : "All projects"
       }
       optionsClassName="min-w-full"
-      noChevron
       multiple
     />
   );
diff --git a/apps/app/components/ui/custom-search-select.tsx b/apps/app/components/ui/custom-search-select.tsx
index 5bf745a84..ebe1dfb45 100644
--- a/apps/app/components/ui/custom-search-select.tsx
+++ b/apps/app/components/ui/custom-search-select.tsx
@@ -1,8 +1,11 @@
 import React, { useState } from "react";
+
 // headless ui
 import { Combobox, Transition } from "@headlessui/react";
 // icons
-import { CheckIcon, ChevronDownIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
+import { ChevronDownIcon } from "@heroicons/react/20/solid";
+import { CheckIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
+
 type CustomSearchSelectProps = {
   value: any;
   onChange: any;
diff --git a/apps/app/components/ui/custom-select.tsx b/apps/app/components/ui/custom-select.tsx
index 10a43e461..86196a63e 100644
--- a/apps/app/components/ui/custom-select.tsx
+++ b/apps/app/components/ui/custom-select.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+
 // headless ui
 import { Listbox, Transition } from "@headlessui/react";
 // icons
diff --git a/apps/app/helpers/analytics.helper.ts b/apps/app/helpers/analytics.helper.ts
index 1caecde0d..f0c7864b5 100644
--- a/apps/app/helpers/analytics.helper.ts
+++ b/apps/app/helpers/analytics.helper.ts
@@ -1,7 +1,7 @@
 // nivo
 import { BarDatum } from "@nivo/bar";
 // helpers
-import { capitalizeFirstLetter } from "helpers/string.helper";
+import { capitalizeFirstLetter, generateRandomColor } from "helpers/string.helper";
 // types
 import { IAnalyticsData, IAnalyticsParams, IAnalyticsResponse } from "types";
 // constants
@@ -65,7 +65,8 @@ export const generateBarColor = (
   params: IAnalyticsParams,
   type: "x_axis" | "segment"
 ): string => {
-  let color: string | undefined = "rgb(var(--color-accent))";
+  let color: string | undefined = generateRandomColor(value);
+  console.log(value);
 
   if (!analytics) return color;
 
@@ -74,19 +75,22 @@ export const generateBarColor = (
 
   if (params[type] === "state__group") color = STATE_GROUP_COLORS[value.toLowerCase()];
 
-  if (params[type] === "priority")
+  if (params[type] === "priority") {
+    const priority = value.toLowerCase();
+
     color =
-      value === "Urgent"
+      priority === "urgent"
         ? "#ef4444"
-        : value === "High"
+        : priority === "high"
         ? "#f97316"
-        : value === "Medium"
+        : priority === "medium"
         ? "#eab308"
-        : value === "Low"
+        : priority === "low"
         ? "#22c55e"
         : "#ced4da";
+  }
 
-  return color ?? "rgb(var(--color-accent))";
+  return color ?? generateRandomColor(value);
 };
 
 export const renderMonthAndYear = (date: string | number | null): string => {
diff --git a/apps/app/helpers/string.helper.ts b/apps/app/helpers/string.helper.ts
index ebb88f4df..1cdebf0bb 100644
--- a/apps/app/helpers/string.helper.ts
+++ b/apps/app/helpers/string.helper.ts
@@ -87,3 +87,25 @@ export const cosineSimilarity = (a: string, b: string) => {
 
   return dotProduct / Math.sqrt(magnitudeA * magnitudeB);
 };
+
+export const generateRandomColor = (string: string): string => {
+  if (!string) return "var(--color-accent)";
+
+  string = `${string}`;
+
+  const uniqueId = string.length.toString() + string; // Unique identifier based on string length
+  const combinedString = uniqueId + string;
+
+  const hash = Array.from(combinedString).reduce((acc, char) => {
+    const charCode = char.charCodeAt(0);
+    return (acc << 5) - acc + charCode;
+  }, 0);
+
+  const hue = hash % 360;
+  const saturation = 70; // Higher saturation for pastel colors
+  const lightness = 60; // Mid-range lightness for pastel colors
+
+  const randomColor = `hsl(${hue}, ${saturation}%, ${lightness}%)`;
+
+  return randomColor;
+};

From bb79c9de965fc5ae6ea5ef51053e7776e6f5626a Mon Sep 17 00:00:00 2001
From: pablohashescobar <118773738+pablohashescobar@users.noreply.github.com>
Date: Fri, 19 May 2023 12:36:12 +0530
Subject: [PATCH 46/81] chore: start date for issues (#1075)

---
 apiserver/back_migration.py        | 16 +++++++++++++++-
 apiserver/plane/db/models/issue.py | 20 ++++++++++++--------
 2 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/apiserver/back_migration.py b/apiserver/back_migration.py
index 0f272755f..c04ee7771 100644
--- a/apiserver/back_migration.py
+++ b/apiserver/back_migration.py
@@ -204,7 +204,21 @@ def update_integration_verified():
         Integration.objects.bulk_update(
             updated_integrations, ["verified"], batch_size=10
         )
-        print("Sucess")
+        print("Success")
+    except Exception as e:
+        print(e)
+        print("Failed")
+
+
+def update_start_date():
+    try:
+        issues = Issue.objects.filter(state__group__in=["started", "completed"])
+        updated_issues = []
+        for issue in issues:
+            issue.start_date = issue.created_at.date()
+            updated_issues.append(issue)
+        Issue.objects.bulk_update(updated_issues, ["start_date"], batch_size=500)
+        print("Success")
     except Exception as e:
         print(e)
         print("Failed")
diff --git a/apiserver/plane/db/models/issue.py b/apiserver/plane/db/models/issue.py
index fed946a61..6e264566d 100644
--- a/apiserver/plane/db/models/issue.py
+++ b/apiserver/plane/db/models/issue.py
@@ -85,8 +85,13 @@ class Issue(ProjectBaseModel):
                 ).first()
                 # if there is no default state assign any random state
                 if default_state is None:
-                    self.state = State.objects.filter(project=self.project).first()
+                    random_state = State.objects.filter(project=self.project).first()
+                    self.state = random_state
+                    if random_state.group == "started":
+                        self.start_date = timezone.now().date()
                 else:
+                    if default_state.group == "started":
+                        self.start_date = timezone.now().date()
                     self.state = default_state
             except ImportError:
                 pass
@@ -94,18 +99,15 @@ class Issue(ProjectBaseModel):
             try:
                 from plane.db.models import State, PageBlock
 
-                # Get the completed states of the project
-                completed_states = State.objects.filter(
-                    group="completed", project=self.project
-                ).values_list("pk", flat=True)
                 # Check if the current issue state and completed state id are same
-                if self.state.id in completed_states:
+                if self.state.group == "completed":
                     self.completed_at = timezone.now()
                     # check if there are any page blocks
                     PageBlock.objects.filter(issue_id=self.id).filter().update(
                         completed_at=timezone.now()
                     )
-
+                elif self.state.group == "started":
+                    self.start_date = timezone.now().date()
                 else:
                     PageBlock.objects.filter(issue_id=self.id).filter().update(
                         completed_at=None
@@ -116,7 +118,6 @@ class Issue(ProjectBaseModel):
                 pass
         if self._state.adding:
             # Get the maximum display_id value from the database
-
             last_id = IssueSequence.objects.filter(project=self.project).aggregate(
                 largest=models.Max("sequence")
             )["largest"]
@@ -131,6 +132,9 @@ class Issue(ProjectBaseModel):
             if largest_sort_order is not None:
                 self.sort_order = largest_sort_order + 10000
 
+            # If adding it to started state
+            if self.state.group == "started":
+                self.start_date = timezone.now().date()
         # Strip the html tags using html parser
         self.description_stripped = (
             None

From 06618006c2ba1aaf41b708b85d05fcec25d3e3a9 Mon Sep 17 00:00:00 2001
From: pablohashescobar <118773738+pablohashescobar@users.noreply.github.com>
Date: Fri, 19 May 2023 13:00:38 +0530
Subject: [PATCH 47/81] fix: cycle date check endpoint (#1074)

---
 apiserver/plane/api/views/cycle.py | 28 ++++++++++++++++++++--------
 1 file changed, 20 insertions(+), 8 deletions(-)

diff --git a/apiserver/plane/api/views/cycle.py b/apiserver/plane/api/views/cycle.py
index ee85f22e1..b12b49b2f 100644
--- a/apiserver/plane/api/views/cycle.py
+++ b/apiserver/plane/api/views/cycle.py
@@ -3,7 +3,17 @@ import json
 
 # Django imports
 from django.db import IntegrityError
-from django.db.models import OuterRef, Func, F, Q, Exists, OuterRef, Count, Prefetch, Sum
+from django.db.models import (
+    OuterRef,
+    Func,
+    F,
+    Q,
+    Exists,
+    OuterRef,
+    Count,
+    Prefetch,
+    Sum,
+)
 from django.core import serializers
 from django.utils import timezone
 from django.utils.decorators import method_decorator
@@ -433,7 +443,7 @@ class CycleDateCheckEndpoint(BaseAPIView):
         try:
             start_date = request.data.get("start_date", False)
             end_date = request.data.get("end_date", False)
-
+            cycle_id = request.data.get("cycle_id")
             if not start_date or not end_date:
                 return Response(
                     {"error": "Start date and end date both are required"},
@@ -441,12 +451,14 @@ class CycleDateCheckEndpoint(BaseAPIView):
                 )
 
             cycles = Cycle.objects.filter(
-                Q(start_date__lte=start_date, end_date__gte=start_date)
-                | Q(start_date__lte=end_date, end_date__gte=end_date)
-                | Q(start_date__gte=start_date, end_date__lte=end_date),
-                workspace__slug=slug,
-                project_id=project_id,
-            )
+                Q(workspace__slug=slug)
+                & Q(project_id=project_id)
+                & (
+                    Q(start_date__lte=start_date, end_date__gte=start_date)
+                    | Q(start_date__lte=end_date, end_date__gte=end_date)
+                    | Q(start_date__gte=start_date, end_date__lte=end_date)
+                )
+            ).exclude(pk=cycle_id)
 
             if cycles.exists():
                 return Response(

From 4ce5a450d9f8d0669b577844d7b3ed394f1d8420 Mon Sep 17 00:00:00 2001
From: Dakshesh Jain <65905942+dakshesh14@users.noreply.github.com>
Date: Fri, 19 May 2023 15:13:33 +0530
Subject: [PATCH 48/81] fix: pages 'I'm feeling lucky' not working (#1058)

---
 .../components/pages/create-update-block-inline.tsx   | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/apps/app/components/pages/create-update-block-inline.tsx b/apps/app/components/pages/create-update-block-inline.tsx
index d62486388..163c97792 100644
--- a/apps/app/components/pages/create-update-block-inline.tsx
+++ b/apps/app/components/pages/create-update-block-inline.tsx
@@ -146,7 +146,7 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
         })
         .then((res) => {
           mutate(PAGE_BLOCKS_LIST(pageId as string));
-          editorRef.current?.setEditorValue(res.description);
+          editorRef.current?.setEditorValue(res.description_html);
           if (data.issue && data.sync)
             issuesService
               .patchIssue(workspaceSlug as string, projectId as string, data.issue, {
@@ -184,6 +184,7 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
         else {
           setValue("description", {});
           setValue("description_html", `${watch("description_html") ?? ""}<p>${res.response}</p>`);
+          editorRef.current?.setEditorValue(watch("description_html") ?? "");
         }
       })
       .catch((err) => {
@@ -276,7 +277,10 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
                 if (!data)
                   return (
                     <WrappedRemirrorRichTextEditor
-                      value={value}
+                      value={{
+                        type: "doc",
+                        content: [{ type: "paragraph" }],
+                      }}
                       onJSONChange={(jsonValue) => setValue("description", jsonValue)}
                       onHTMLChange={(htmlValue) => setValue("description_html", htmlValue)}
                       placeholder="Write something..."
@@ -292,7 +296,7 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
                   );
 
                 return (
-                  <RemirrorRichTextEditor
+                  <WrappedRemirrorRichTextEditor
                     value={
                       value && value !== "" && Object.keys(value).length > 0
                         ? value
@@ -306,6 +310,7 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
                     customClassName="text-sm"
                     noBorder
                     borderOnFocus={false}
+                    ref={editorRef}
                   />
                 );
               }}

From 6da4247400c25cc1f3ea87dac7c657f4648634a2 Mon Sep 17 00:00:00 2001
From: Dakshesh Jain <65905942+dakshesh14@users.noreply.github.com>
Date: Fri, 19 May 2023 15:13:55 +0530
Subject: [PATCH 49/81] fix: Application Error on issues list page (#1064)

* fix: Application Error on issues list page

* fix: can't read property of undefined at renderTick
---
 .../custom-analytics/graph/index.tsx          |  2 +-
 .../scope-and-demand/scope-and-demand.tsx     | 24 +++++++++----------
 .../analytics/scope-and-demand/scope.tsx      |  2 +-
 3 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/apps/app/components/analytics/custom-analytics/graph/index.tsx b/apps/app/components/analytics/custom-analytics/graph/index.tsx
index 057d76022..42bf5f702 100644
--- a/apps/app/components/analytics/custom-analytics/graph/index.tsx
+++ b/apps/app/components/analytics/custom-analytics/graph/index.tsx
@@ -80,7 +80,7 @@ export const AnalyticsGraph: React.FC<Props> = ({
           params.x_axis === "assignees__email"
             ? (datum) => {
                 const avatar = analytics.extras.assignee_details?.find(
-                  (a) => a.assignees__email === datum.value
+                  (a) => a?.assignees__email === datum?.value
                 )?.assignees__avatar;
 
                 if (avatar && avatar !== "")
diff --git a/apps/app/components/analytics/scope-and-demand/scope-and-demand.tsx b/apps/app/components/analytics/scope-and-demand/scope-and-demand.tsx
index 6549f58b4..d5bf10bc2 100644
--- a/apps/app/components/analytics/scope-and-demand/scope-and-demand.tsx
+++ b/apps/app/components/analytics/scope-and-demand/scope-and-demand.tsx
@@ -54,22 +54,22 @@ export const ScopeAndDemand: React.FC<Props> = ({ fullScreen = true }) => {
               <AnalyticsDemand defaultAnalytics={defaultAnalytics} />
               <AnalyticsScope defaultAnalytics={defaultAnalytics} />
               <AnalyticsLeaderboard
-                users={defaultAnalytics.most_issue_created_user.map((user) => ({
-                  avatar: user.created_by__avatar,
-                  email: user.created_by__email,
-                  firstName: user.created_by__first_name,
-                  lastName: user.created_by__last_name,
-                  count: user.count,
+                users={defaultAnalytics.most_issue_created_user?.map((user) => ({
+                  avatar: user?.created_by__avatar,
+                  email: user?.created_by__email,
+                  firstName: user?.created_by__first_name,
+                  lastName: user?.created_by__last_name,
+                  count: user?.count,
                 }))}
                 title="Most issues created"
               />
               <AnalyticsLeaderboard
-                users={defaultAnalytics.most_issue_closed_user.map((user) => ({
-                  avatar: user.assignees__avatar,
-                  email: user.assignees__email,
-                  firstName: user.assignees__first_name,
-                  lastName: user.assignees__last_name,
-                  count: user.count,
+                users={defaultAnalytics.most_issue_closed_user?.map((user) => ({
+                  avatar: user?.assignees__avatar,
+                  email: user?.assignees__email,
+                  firstName: user?.assignees__first_name,
+                  lastName: user?.assignees__last_name,
+                  count: user?.count,
                 }))}
                 title="Most issues closed"
               />
diff --git a/apps/app/components/analytics/scope-and-demand/scope.tsx b/apps/app/components/analytics/scope-and-demand/scope.tsx
index f7cf53be5..b0a422ed4 100644
--- a/apps/app/components/analytics/scope-and-demand/scope.tsx
+++ b/apps/app/components/analytics/scope-and-demand/scope.tsx
@@ -41,7 +41,7 @@ export const AnalyticsScope: React.FC<Props> = ({ defaultAnalytics }) => (
             axisBottom={{
               renderTick: (datum) => {
                 const avatar =
-                  defaultAnalytics.pending_issue_user[datum.tickIndex].assignees__avatar ?? "";
+                  defaultAnalytics.pending_issue_user[datum.tickIndex]?.assignees__avatar ?? "";
 
                 if (avatar && avatar !== "")
                   return (

From ae1eb9527a20575bcba98760c45cdd8a7ac3f98d Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Fri, 19 May 2023 15:22:09 +0530
Subject: [PATCH 50/81] style: ui improvement (#1077)

* style: assignee, sub-issue and due date display properties styling

* style: cycle view  indicator added
---
 .../core/board-view/single-issue.tsx          | 16 ++++--
 .../core/calendar-view/single-issue.tsx       | 17 +++---
 .../core/list-view/single-issue.tsx           | 22 +++++---
 apps/app/components/cycles/cycles-view.tsx    |  8 ++-
 .../components/issues/my-issues-list-item.tsx | 52 +++++++++++--------
 .../issues/view-select/assignee.tsx           |  4 +-
 apps/app/styles/react-datepicker.css          |  5 ++
 7 files changed, 78 insertions(+), 46 deletions(-)

diff --git a/apps/app/components/core/board-view/single-issue.tsx b/apps/app/components/core/board-view/single-issue.tsx
index 926f0e81a..6da636efb 100644
--- a/apps/app/components/core/board-view/single-issue.tsx
+++ b/apps/app/components/core/board-view/single-issue.tsx
@@ -37,6 +37,7 @@ import {
   ArrowTopRightOnSquareIcon,
   PaperClipIcon,
 } from "@heroicons/react/24/outline";
+import { LayerDiagonalIcon } from "components/icons";
 // helpers
 import { handleIssuesMutation } from "constants/issue";
 import { copyTextToClipboard, truncateText } from "helpers/string.helper";
@@ -337,11 +338,6 @@ export const SingleBoardIssue: React.FC<Props> = ({
                 isNotAllowed={isNotAllowed}
               />
             )}
-            {properties.sub_issue_count && (
-              <div className="flex flex-shrink-0 items-center gap-1 rounded-md border border-brand-base px-2 py-1 text-xs text-brand-secondary shadow-sm">
-                {issue.sub_issues_count} {issue.sub_issues_count === 1 ? "sub-issue" : "sub-issues"}
-              </div>
-            )}
             {properties.labels && issue.label_details.length > 0 && (
               <div className="flex flex-wrap gap-1">
                 {issue.label_details.map((label) => (
@@ -377,6 +373,16 @@ export const SingleBoardIssue: React.FC<Props> = ({
                 selfPositioned
               />
             )}
+            {properties.sub_issue_count && (
+              <div className="flex cursor-default items-center rounded-md border border-brand-base px-2.5 py-1 text-xs shadow-sm">
+                <Tooltip tooltipHeading="Sub-issue" tooltipContent={`${issue.sub_issues_count}`}>
+                  <div className="flex items-center gap-1 text-brand-secondary">
+                    <LayerDiagonalIcon className="h-3.5 w-3.5" />
+                    {issue.sub_issues_count}
+                  </div>
+                </Tooltip>
+              </div>
+            )}
             {properties.link && (
               <div className="flex cursor-default items-center rounded-md border border-brand-base px-2.5 py-1 text-xs shadow-sm">
                 <Tooltip tooltipHeading="Link" tooltipContent={`${issue.link_count}`}>
diff --git a/apps/app/components/core/calendar-view/single-issue.tsx b/apps/app/components/core/calendar-view/single-issue.tsx
index fd07fda42..9102f7338 100644
--- a/apps/app/components/core/calendar-view/single-issue.tsx
+++ b/apps/app/components/core/calendar-view/single-issue.tsx
@@ -24,6 +24,7 @@ import {
 } from "components/issues";
 // icons
 import { LinkIcon, PaperClipIcon, PencilIcon, TrashIcon } from "@heroicons/react/24/outline";
+import { LayerDiagonalIcon } from "components/icons";
 // helper
 import { copyTextToClipboard, truncateText } from "helpers/string.helper";
 // type
@@ -201,11 +202,6 @@ export const SingleCalendarIssue: React.FC<Props> = ({
                 isNotAllowed={isNotAllowed}
               />
             )}
-            {properties.sub_issue_count && (
-              <div className="flex items-center gap-1 rounded-md border border-brand-base px-2 py-1 text-xs text-brand-secondary shadow-sm">
-                {issue.sub_issues_count} {issue.sub_issues_count === 1 ? "sub-issue" : "sub-issues"}
-              </div>
-            )}
             {properties.labels && issue.label_details.length > 0 ? (
               <div className="flex flex-wrap gap-1">
                 {issue.label_details.map((label) => (
@@ -242,7 +238,16 @@ export const SingleCalendarIssue: React.FC<Props> = ({
                 isNotAllowed={isNotAllowed}
               />
             )}
-
+            {properties.sub_issue_count && (
+              <div className="flex cursor-default items-center rounded-md border border-brand-base px-2.5 py-1 text-xs shadow-sm">
+                <Tooltip tooltipHeading="Sub-issue" tooltipContent={`${issue.sub_issues_count}`}>
+                  <div className="flex items-center gap-1 text-brand-secondary">
+                    <LayerDiagonalIcon className="h-3.5 w-3.5" />
+                    {issue.sub_issues_count}
+                  </div>
+                </Tooltip>
+              </div>
+            )}
             {properties.link && (
               <div className="flex cursor-default items-center rounded-md border border-brand-base px-2.5 py-1 text-xs shadow-sm">
                 <Tooltip tooltipHeading="Links" tooltipContent={`${issue.link_count}`}>
diff --git a/apps/app/components/core/list-view/single-issue.tsx b/apps/app/components/core/list-view/single-issue.tsx
index 49e11ca2f..6f6a5ab4f 100644
--- a/apps/app/components/core/list-view/single-issue.tsx
+++ b/apps/app/components/core/list-view/single-issue.tsx
@@ -31,6 +31,7 @@ import {
   ArrowTopRightOnSquareIcon,
   PaperClipIcon,
 } from "@heroicons/react/24/outline";
+import { LayerDiagonalIcon } from "components/icons";
 // helpers
 import { copyTextToClipboard, truncateText } from "helpers/string.helper";
 import { handleIssuesMutation } from "constants/issue";
@@ -205,7 +206,7 @@ export const SingleListIssue: React.FC<Props> = ({
         </a>
       </ContextMenu>
       <div
-        className="flex flex-wrap items-center justify-between gap-2 border-b border-brand-base bg-brand-base last:border-b-0"
+        className="flex flex-wrap items-center justify-between px-4 py-2.5 gap-2 border-b border-brand-base bg-brand-base last:border-b-0"
         onContextMenu={(e) => {
           e.preventDefault();
           setContextMenu(true);
@@ -213,7 +214,7 @@ export const SingleListIssue: React.FC<Props> = ({
         }}
       >
         <Link href={`/${workspaceSlug}/projects/${issue?.project_detail?.id}/issues/${issue.id}`}>
-          <div className="flex-grow cursor-pointer px-4 pt-2.5 md:py-2.5">
+          <div className="flex-grow cursor-pointer">
             <a className="group relative flex items-center gap-2">
               {properties.key && (
                 <Tooltip
@@ -234,7 +235,7 @@ export const SingleListIssue: React.FC<Props> = ({
           </div>
         </Link>
 
-        <div className="flex w-full flex-shrink flex-wrap items-center gap-2 px-4 pb-2.5 text-xs sm:w-auto md:px-0 md:py-2.5 md:pr-4">
+        <div className="flex w-full flex-shrink flex-wrap items-center gap-2 text-xs sm:w-auto">
           {properties.priority && (
             <ViewPrioritySelect
               issue={issue}
@@ -258,11 +259,6 @@ export const SingleListIssue: React.FC<Props> = ({
               isNotAllowed={isNotAllowed}
             />
           )}
-          {properties.sub_issue_count && (
-            <div className="flex items-center gap-1 rounded-md border border-brand-base px-2 py-1 text-xs text-brand-secondary shadow-sm">
-              {issue.sub_issues_count} {issue.sub_issues_count === 1 ? "sub-issue" : "sub-issues"}
-            </div>
-          )}
           {properties.labels && issue.label_details.length > 0 ? (
             <div className="flex flex-wrap gap-1">
               {issue.label_details.map((label) => (
@@ -299,6 +295,16 @@ export const SingleListIssue: React.FC<Props> = ({
               isNotAllowed={isNotAllowed}
             />
           )}
+          {properties.sub_issue_count && (
+            <div className="flex cursor-default items-center rounded-md border border-brand-base px-2.5 py-1 text-xs shadow-sm">
+              <Tooltip tooltipHeading="Sub-issue" tooltipContent={`${issue.sub_issues_count}`}>
+                <div className="flex items-center gap-1 text-brand-secondary">
+                  <LayerDiagonalIcon className="h-3.5 w-3.5" />
+                  {issue.sub_issues_count}
+                </div>
+              </Tooltip>
+            </div>
+          )}
           {properties.link && (
             <div className="flex cursor-default items-center rounded-md border border-brand-base px-2.5 py-1 text-xs shadow-sm">
               <Tooltip tooltipHeading="Links" tooltipContent={`${issue.link_count}`}>
diff --git a/apps/app/components/cycles/cycles-view.tsx b/apps/app/components/cycles/cycles-view.tsx
index ac4c19e27..35677364d 100644
--- a/apps/app/components/cycles/cycles-view.tsx
+++ b/apps/app/components/cycles/cycles-view.tsx
@@ -116,14 +116,18 @@ export const CyclesView: React.FC<Props> = ({
             <div className="flex items-center gap-x-1">
               <button
                 type="button"
-                className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-2`}
+                className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 ${
+                  cycleView === "list" ? "bg-brand-surface-2" : ""
+                } hover:bg-brand-surface-2`}
                 onClick={() => setCycleView("list")}
               >
                 <ListBulletIcon className="h-4 w-4 text-brand-secondary" />
               </button>
               <button
                 type="button"
-                className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-2`}
+                className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 ${
+                  cycleView === "board" ? "bg-brand-surface-2" : ""
+                } hover:bg-brand-surface-2`}
                 onClick={() => setCycleView("board")}
               >
                 <Squares2X2Icon className="h-4 w-4 text-brand-secondary" />
diff --git a/apps/app/components/issues/my-issues-list-item.tsx b/apps/app/components/issues/my-issues-list-item.tsx
index fc8e5c28f..06cd6f87f 100644
--- a/apps/app/components/issues/my-issues-list-item.tsx
+++ b/apps/app/components/issues/my-issues-list-item.tsx
@@ -17,6 +17,7 @@ import {
 } from "components/issues/view-select";
 // icon
 import { LinkIcon, PaperClipIcon } from "@heroicons/react/24/outline";
+import { LayerDiagonalIcon } from "components/icons";
 // ui
 import { AssigneesList } from "components/ui/avatar";
 import { CustomMenu, Tooltip } from "components/ui";
@@ -126,11 +127,6 @@ export const MyIssuesListItem: React.FC<Props> = ({ issue, properties, projectId
               isNotAllowed={isNotAllowed}
             />
           )}
-          {properties.sub_issue_count && (
-            <div className="flex items-center gap-1 rounded-md border border-brand-base px-2 py-1 text-xs text-brand-secondary shadow-sm">
-              {issue?.sub_issues_count} {issue?.sub_issues_count === 1 ? "sub-issue" : "sub-issues"}
-            </div>
-          )}
           {properties.labels && issue.label_details.length > 0 ? (
             <div className="flex flex-wrap gap-1">
               {issue.label_details.map((label) => (
@@ -152,23 +148,35 @@ export const MyIssuesListItem: React.FC<Props> = ({ issue, properties, projectId
             ""
           )}
           {properties.assignee && (
-            <Tooltip
-              position="top-right"
-              tooltipHeading="Assignees"
-              tooltipContent={
-                issue.assignee_details.length > 0
-                  ? issue.assignee_details
-                      .map((assignee) =>
-                        assignee?.first_name !== "" ? assignee?.first_name : assignee?.email
-                      )
-                      .join(", ")
-                  : "No Assignee"
-              }
-            >
-              <div className="flex items-center gap-1">
-                <AssigneesList userIds={issue.assignees ?? []} />
-              </div>
-            </Tooltip>
+            <div className="flex cursor-default items-center rounded-md border border-brand-base px-2 py-1 text-xs shadow-sm">
+              <Tooltip
+                position="top-right"
+                tooltipHeading="Assignees"
+                tooltipContent={
+                  issue.assignee_details.length > 0
+                    ? issue.assignee_details
+                        .map((assignee) =>
+                          assignee?.first_name !== "" ? assignee?.first_name : assignee?.email
+                        )
+                        .join(", ")
+                    : "No Assignee"
+                }
+              >
+                <div className="flex h-4 items-center gap-1">
+                  <AssigneesList userIds={issue.assignees ?? []} />
+                </div>
+              </Tooltip>
+            </div>
+          )}
+          {properties.sub_issue_count && (
+            <div className="flex cursor-default items-center rounded-md border border-brand-base px-2.5 py-1 text-xs shadow-sm">
+              <Tooltip tooltipHeading="Sub-issue" tooltipContent={`${issue.sub_issues_count}`}>
+                <div className="flex items-center gap-1 text-brand-secondary">
+                  <LayerDiagonalIcon className="h-3.5 w-3.5" />
+                  {issue.sub_issues_count}
+                </div>
+              </Tooltip>
+            </div>
           )}
           {properties.link && (
             <div className="flex cursor-default items-center rounded-md border border-brand-base px-2 py-1 text-xs shadow-sm">
diff --git a/apps/app/components/issues/view-select/assignee.tsx b/apps/app/components/issues/view-select/assignee.tsx
index 483f003e3..e5c0eec37 100644
--- a/apps/app/components/issues/view-select/assignee.tsx
+++ b/apps/app/components/issues/view-select/assignee.tsx
@@ -107,13 +107,11 @@ export const ViewAssigneeSelect: React.FC<Props> = ({
           >
             {issue.assignees && issue.assignees.length > 0 && Array.isArray(issue.assignees) ? (
               <div className="-my-0.5 flex items-center justify-center gap-2">
-                <AssigneesList userIds={issue.assignees} length={3} showLength={false} />
-                <span className="text-brand-secondary">{issue.assignees.length} Assignees</span>
+                <AssigneesList userIds={issue.assignees} length={5} showLength={true} />
               </div>
             ) : (
               <div className="flex items-center justify-center gap-2">
                 <UserGroupIcon className="h-4 w-4 text-brand-secondary" />
-                <span className="text-brand-secondary">Assignee</span>
               </div>
             )}
           </div>
diff --git a/apps/app/styles/react-datepicker.css b/apps/app/styles/react-datepicker.css
index ecf5bb9fb..59ce4d9d9 100644
--- a/apps/app/styles/react-datepicker.css
+++ b/apps/app/styles/react-datepicker.css
@@ -21,6 +21,11 @@
   background-color: rgba(var(--color-bg-base)) !important;
 }
 
+.react-datepicker-wrapper,
+.react-datepicker__input-container {
+  border-radius: 0.375rem;
+}
+
 .react-datepicker {
   font-family: "Inter" !important;
   background-color: rgba(var(--color-bg-base)) !important;

From e3a114cd69b5c9aa4c9e00c167dd234c1dd6c3f6 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Fri, 19 May 2023 16:15:06 +0530
Subject: [PATCH 51/81] fix: module and cycle create issue in calendar view
 mutation fix (#1079)

---
 apps/app/components/issues/modal.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/app/components/issues/modal.tsx b/apps/app/components/issues/modal.tsx
index eae935479..acda96a84 100644
--- a/apps/app/components/issues/modal.tsx
+++ b/apps/app/components/issues/modal.tsx
@@ -138,12 +138,12 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
   const createIssue = async (payload: Partial<IIssue>) => {
     await issuesService
       .createIssues(workspaceSlug as string, activeProject ?? "", payload)
-      .then((res) => {
+      .then(async (res) => {
         mutate(PROJECT_ISSUES_LIST_WITH_PARAMS(activeProject ?? "", params));
-        if (issueView === "calendar") mutate(calendarFetchKey);
+        if (payload.cycle && payload.cycle !== "") await addIssueToCycle(res.id, payload.cycle);
+        if (payload.module && payload.module !== "") await addIssueToModule(res.id, payload.module);
 
-        if (payload.cycle && payload.cycle !== "") addIssueToCycle(res.id, payload.cycle);
-        if (payload.module && payload.module !== "") addIssueToModule(res.id, payload.module);
+        if (issueView === "calendar") mutate(calendarFetchKey);
 
         if (!createMore) handleClose();
 

From 7f5fdb9589c77dcb5e27c53f9891cf2015d435be Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Fri, 19 May 2023 16:35:51 +0530
Subject: [PATCH 52/81] fix: icon picker not working (#1080)

* fix: icon picker not working

* fix: project icon in analytics sidebar
---
 .../analytics/custom-analytics/sidebar.tsx    | 34 +++++++++---
 .../components/emoji-icon-picker/index.tsx    | 14 ++---
 .../components/emoji-icon-picker/types.d.ts   | 10 +++-
 .../project/create-project-modal.tsx          | 43 +++++++++++----
 .../project/single-project-card.tsx           | 13 +++--
 .../project/single-sidebar-project.tsx        | 13 ++++-
 apps/app/helpers/analytics.helper.ts          |  1 -
 .../projects/[projectId]/settings/control.tsx | 27 +++++-----
 .../projects/[projectId]/settings/index.tsx   | 53 +++++++++++++------
 apps/app/types/projects.d.ts                  | 21 ++++++--
 10 files changed, 158 insertions(+), 71 deletions(-)

diff --git a/apps/app/components/analytics/custom-analytics/sidebar.tsx b/apps/app/components/analytics/custom-analytics/sidebar.tsx
index 5988e654d..26eb66d12 100644
--- a/apps/app/components/analytics/custom-analytics/sidebar.tsx
+++ b/apps/app/components/analytics/custom-analytics/sidebar.tsx
@@ -153,12 +153,21 @@ export const AnalyticsSidebar: React.FC<Props> = ({
                     return (
                       <div key={project.id}>
                         <h5 className="text-sm flex items-center gap-1">
-                          {project.icon ? (
+                          {project.emoji ? (
                             <span className="grid h-6 w-6 flex-shrink-0 place-items-center">
-                              {String.fromCodePoint(parseInt(project.icon))}
+                              {String.fromCodePoint(parseInt(project.emoji))}
                             </span>
+                          ) : project.icon_prop ? (
+                            <div className="h-6 w-6 grid place-items-center flex-shrink-0">
+                              <span
+                                style={{ color: project.icon_prop.color }}
+                                className="material-symbols-rounded text-lg"
+                              >
+                                {project.icon_prop.name}
+                              </span>
+                            </div>
                           ) : (
-                            <span className="grid h-8 w-8 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                            <span className="grid h-6 w-6 mr-1 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
                               {project?.name.charAt(0)}
                             </span>
                           )}
@@ -254,12 +263,21 @@ export const AnalyticsSidebar: React.FC<Props> = ({
               ) : (
                 <div className="hidden md:flex md:flex-col h-full overflow-y-auto">
                   <div className="flex items-center gap-1">
-                    {projectDetails?.icon ? (
-                      <span className="grid h-6 w-6 flex-shrink-0 place-items-center">
-                        {String.fromCodePoint(parseInt(projectDetails.icon))}
-                      </span>
+                    {projectDetails?.emoji ? (
+                      <div className="grid h-6 w-6 flex-shrink-0 place-items-center">
+                        {String.fromCodePoint(parseInt(projectDetails.emoji))}
+                      </div>
+                    ) : projectDetails?.icon_prop ? (
+                      <div className="h-6 w-6 grid place-items-center flex-shrink-0">
+                        <span
+                          style={{ color: projectDetails.icon_prop.color }}
+                          className="material-symbols-rounded text-lg"
+                        >
+                          {projectDetails.icon_prop.name}
+                        </span>
+                      </div>
                     ) : (
-                      <span className="grid h-8 w-8 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                      <span className="grid h-6 w-6 mr-1 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
                         {projectDetails?.name.charAt(0)}
                       </span>
                     )}
diff --git a/apps/app/components/emoji-icon-picker/index.tsx b/apps/app/components/emoji-icon-picker/index.tsx
index e52335e47..f8f8e54e9 100644
--- a/apps/app/components/emoji-icon-picker/index.tsx
+++ b/apps/app/components/emoji-icon-picker/index.tsx
@@ -25,13 +25,7 @@ const tabOptions = [
   },
 ];
 
-const EmojiIconPicker: React.FC<Props> = ({
-  label,
-  value,
-  onChange,
-  onIconColorChange,
-  onIconsClick,
-}) => {
+const EmojiIconPicker: React.FC<Props> = ({ label, value, onChange, onIconColorChange }) => {
   const ref = useRef<HTMLDivElement>(null);
 
   const [isOpen, setIsOpen] = useState(false);
@@ -181,13 +175,13 @@ const EmojiIconPicker: React.FC<Props> = ({
                     </div>
                     <hr className="mb-1 h-[1px] w-full border-brand-base" />
                     <div className="mt-1 ml-1 grid grid-cols-8 gap-x-2 gap-y-3">
-                      {icons.material_rounded.map((icon) => (
+                      {icons.material_rounded.map((icon, index) => (
                         <button
+                          key={`${icon.name}-${index}`}
                           type="button"
                           className="mb-1 flex h-4 w-4 select-none items-center text-lg"
-                          key={icon.name}
                           onClick={() => {
-                            if (onIconsClick) onIconsClick(icon.name);
+                            onChange({ name: icon.name, color: activeColor });
                             setIsOpen(false);
                           }}
                         >
diff --git a/apps/app/components/emoji-icon-picker/types.d.ts b/apps/app/components/emoji-icon-picker/types.d.ts
index 0162640f5..c01dc2c2b 100644
--- a/apps/app/components/emoji-icon-picker/types.d.ts
+++ b/apps/app/components/emoji-icon-picker/types.d.ts
@@ -1,7 +1,13 @@
 export type Props = {
   label: string | React.ReactNode;
   value: any;
-  onChange: (data: any) => void;
-  onIconsClick?: (data: any) => void;
+  onChange: (
+    data:
+      | string
+      | {
+          name: string;
+          color: string;
+        }
+  ) => void;
   onIconColorChange?: (data: any) => void;
 };
diff --git a/apps/app/components/project/create-project-modal.tsx b/apps/app/components/project/create-project-modal.tsx
index 94b088133..c731c12f0 100644
--- a/apps/app/components/project/create-project-modal.tsx
+++ b/apps/app/components/project/create-project-modal.tsx
@@ -40,7 +40,7 @@ const defaultValues: Partial<IProject> = {
   identifier: "",
   description: "",
   network: 2,
-  icon: getRandomEmoji(),
+  emoji_and_icon: getRandomEmoji(),
   cover_image:
     "https://images.unsplash.com/photo-1575116464504-9e7652fddcb3?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwyODUyNTV8MHwxfHNlYXJjaHwxOHx8cGxhbmV8ZW58MHx8fHwxNjgxNDY4NTY5&ixlib=rb-4.0.3&q=80&w=1080",
 };
@@ -113,8 +113,14 @@ export const CreateProjectModal: React.FC<Props> = (props) => {
 
   const onSubmit = async (formData: IProject) => {
     if (!workspaceSlug) return;
+
+    const { emoji_and_icon, ...payload } = formData;
+
+    if (typeof formData.emoji_and_icon === "object") payload.icon_prop = formData.emoji_and_icon;
+    else payload.emoji = formData.emoji_and_icon;
+
     await projectServices
-      .createProject(workspaceSlug as string, formData)
+      .createProject(workspaceSlug as string, payload)
       .then((res) => {
         mutate<IProject[]>(
           PROJECTS_LIST(workspaceSlug as string),
@@ -164,7 +170,7 @@ export const CreateProjectModal: React.FC<Props> = (props) => {
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-20 overflow-y-auto">
@@ -213,12 +219,31 @@ export const CreateProjectModal: React.FC<Props> = (props) => {
                   <div className="mt-5 space-y-4 px-4 py-3">
                     <div className="flex items-center gap-x-2">
                       <div>
-                        <EmojiIconPicker
-                          label={String.fromCodePoint(parseInt(watch("icon")))}
-                          onChange={(emoji) => {
-                            setValue("icon", emoji);
-                          }}
-                          value={watch("icon")}
+                        <Controller
+                          name="emoji_and_icon"
+                          control={control}
+                          render={({ field: { value, onChange } }) => (
+                            <EmojiIconPicker
+                              label={
+                                value ? (
+                                  typeof value === "object" ? (
+                                    <span
+                                      style={{ color: value.color }}
+                                      className="material-symbols-rounded text-lg"
+                                    >
+                                      {value.name}
+                                    </span>
+                                  ) : (
+                                    String.fromCodePoint(parseInt(value))
+                                  )
+                                ) : (
+                                  "Icon"
+                                )
+                              }
+                              onChange={onChange}
+                              value={value}
+                            />
+                          )}
                         />
                       </div>
 
diff --git a/apps/app/components/project/single-project-card.tsx b/apps/app/components/project/single-project-card.tsx
index c9e26f04e..c2844212d 100644
--- a/apps/app/components/project/single-project-card.tsx
+++ b/apps/app/components/project/single-project-card.tsx
@@ -185,11 +185,18 @@ export const SingleProjectCard: React.FC<ProjectCardProps> = ({
               <a>
                 <div className="flex items-center gap-1">
                   <h3 className="text-1.5xl font-medium text-brand-base">{project.name}</h3>
-                  {project.icon && (
+                  {project.emoji ? (
                     <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
-                      {String.fromCodePoint(parseInt(project.icon))}
+                      {String.fromCodePoint(parseInt(project.emoji))}
                     </span>
-                  )}
+                  ) : project.icon_prop ? (
+                    <span
+                      style={{ color: project.icon_prop.color }}
+                      className="material-symbols-rounded text-lg"
+                    >
+                      {project.icon_prop.name}
+                    </span>
+                  ) : null}
                 </div>
                 <p className="mt-3.5 mb-7 break-all">
                   {truncateText(project.description ?? "", 100)}
diff --git a/apps/app/components/project/single-sidebar-project.tsx b/apps/app/components/project/single-sidebar-project.tsx
index 4ff2b2cd3..9c73986a6 100644
--- a/apps/app/components/project/single-sidebar-project.tsx
+++ b/apps/app/components/project/single-sidebar-project.tsx
@@ -90,10 +90,19 @@ export const SingleSidebarProject: React.FC<Props> = ({
               }`}
             >
               <div className="flex items-center gap-x-2">
-                {project.icon ? (
+                {project.emoji ? (
                   <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
-                    {String.fromCodePoint(parseInt(project.icon))}
+                    {String.fromCodePoint(parseInt(project.emoji))}
                   </span>
+                ) : project.icon_prop ? (
+                  <div className="h-7 w-7 grid place-items-center">
+                    <span
+                      style={{ color: project.icon_prop.color }}
+                      className="material-symbols-rounded text-lg"
+                    >
+                      {project.icon_prop.name}
+                    </span>
+                  </div>
                 ) : (
                   <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
                     {project?.name.charAt(0)}
diff --git a/apps/app/helpers/analytics.helper.ts b/apps/app/helpers/analytics.helper.ts
index f0c7864b5..efc781794 100644
--- a/apps/app/helpers/analytics.helper.ts
+++ b/apps/app/helpers/analytics.helper.ts
@@ -66,7 +66,6 @@ export const generateBarColor = (
   type: "x_axis" | "segment"
 ): string => {
   let color: string | undefined = generateRandomColor(value);
-  console.log(value);
 
   if (!analytics) return color;
 
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/control.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/control.tsx
index 1f529b143..932b9e323 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/control.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/control.tsx
@@ -56,27 +56,14 @@ const ControlSettings: NextPage = () => {
     formState: { isSubmitting },
   } = useForm<IProject>({ defaultValues });
 
-  useEffect(() => {
-    if (projectDetails)
-      reset({
-        ...projectDetails,
-        default_assignee: projectDetails.default_assignee?.id ?? projectDetails.default_assignee,
-        project_lead: projectDetails.project_lead?.id ?? projectDetails.project_lead,
-        workspace: (projectDetails.workspace as IWorkspace).id,
-      });
-  }, [projectDetails, reset]);
-
   const onSubmit = async (formData: IProject) => {
     if (!workspaceSlug || !projectId) return;
+
     const payload: Partial<IProject> = {
-      name: formData.name,
-      network: formData.network,
-      identifier: formData.identifier,
-      description: formData.description,
       default_assignee: formData.default_assignee,
       project_lead: formData.project_lead,
-      icon: formData.icon,
     };
+
     await projectService
       .updateProject(workspaceSlug as string, projectId as string, payload)
       .then((res) => {
@@ -94,6 +81,16 @@ const ControlSettings: NextPage = () => {
       });
   };
 
+  useEffect(() => {
+    if (projectDetails)
+      reset({
+        ...projectDetails,
+        default_assignee: projectDetails.default_assignee?.id ?? projectDetails.default_assignee,
+        project_lead: projectDetails.project_lead?.id ?? projectDetails.project_lead,
+        workspace: (projectDetails.workspace as IWorkspace).id,
+      });
+  }, [projectDetails, reset]);
+
   return (
     <ProjectAuthorizationWrapper
       breadcrumbs={
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
index d0b7f288e..5210c9ebe 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
@@ -74,8 +74,7 @@ const GeneralSettings: NextPage = () => {
     if (projectDetails)
       reset({
         ...projectDetails,
-        default_assignee: projectDetails.default_assignee?.id,
-        project_lead: projectDetails.project_lead?.id,
+        emoji_and_icon: projectDetails.emoji ?? projectDetails.icon_prop,
         workspace: (projectDetails.workspace as IWorkspace).id,
       });
   }, [projectDetails, reset]);
@@ -115,12 +114,17 @@ const GeneralSettings: NextPage = () => {
       network: formData.network,
       identifier: formData.identifier,
       description: formData.description,
-      default_assignee: formData.default_assignee,
-      project_lead: formData.project_lead,
-      icon: formData.icon,
       cover_image: formData.cover_image,
     };
 
+    if (typeof formData.emoji_and_icon === "object") {
+      payload.emoji = null;
+      payload.icon_prop = formData.emoji_and_icon;
+    } else {
+      payload.emoji = formData.emoji_and_icon;
+      payload.icon_prop = null;
+    }
+
     if (projectDetails.identifier !== formData.identifier)
       await projectService
         .checkProjectIdentifierAvailability(workspaceSlug as string, payload.identifier ?? "")
@@ -163,17 +167,34 @@ const GeneralSettings: NextPage = () => {
             </div>
             <div className="col-span-12 flex gap-2 sm:col-span-6">
               {projectDetails ? (
-                <Controller
-                  control={control}
-                  name="icon"
-                  render={({ field: { value, onChange } }) => (
-                    <EmojiIconPicker
-                      label={value ? String.fromCodePoint(parseInt(value)) : "Icon"}
-                      value={value}
-                      onChange={onChange}
-                    />
-                  )}
-                />
+                <div className="h-7 w-7 grid place-items-center">
+                  <Controller
+                    control={control}
+                    name="emoji_and_icon"
+                    render={({ field: { value, onChange } }) => (
+                      <EmojiIconPicker
+                        label={
+                          value ? (
+                            typeof value === "object" ? (
+                              <span
+                                style={{ color: value.color }}
+                                className="material-symbols-rounded text-lg"
+                              >
+                                {value.name}
+                              </span>
+                            ) : (
+                              String.fromCodePoint(parseInt(value))
+                            )
+                          ) : (
+                            "Icon"
+                          )
+                        }
+                        value={value}
+                        onChange={onChange}
+                      />
+                    )}
+                  />
+                </div>
               ) : (
                 <Loader>
                   <Loader.Item height="46px" width="46px" />
diff --git a/apps/app/types/projects.d.ts b/apps/app/types/projects.d.ts
index 11c76ab61..60195f850 100644
--- a/apps/app/types/projects.d.ts
+++ b/apps/app/types/projects.d.ts
@@ -9,22 +9,33 @@ import type {
 } from "./";
 
 export interface IProject {
-  cover_image: string | null;
   created_at: Date;
   created_by: string;
+  cover_image: string | null;
   cycle_view: boolean;
-  issue_views_view: boolean;
-  module_view: boolean;
-  page_view: boolean;
   default_assignee: IUser | string | null;
   description: string;
+  emoji: string | null;
+  emoji_and_icon:
+    | string
+    | {
+        name: string;
+        color: string;
+      }
+    | null;
   estimate: string | null;
-  icon: string;
+  icon_prop: {
+    name: string;
+    color: string;
+  } | null;
   id: string;
   identifier: string;
   is_favorite: boolean;
+  issue_views_view: boolean;
+  module_view: boolean;
   name: string;
   network: number;
+  page_view: boolean;
   project_lead: IUser | string | null;
   slug: string;
   total_cycles: number;

From e162c88f03a84a5a4b09b64f643d8ee6a607d10a Mon Sep 17 00:00:00 2001
From: pablohashescobar <118773738+pablohashescobar@users.noreply.github.com>
Date: Fri, 19 May 2023 16:46:56 +0530
Subject: [PATCH 53/81] dev: project emoji and icons (#1076)

---
 apiserver/plane/db/models/project.py | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/apiserver/plane/db/models/project.py b/apiserver/plane/db/models/project.py
index 04435cadf..41b1ac654 100644
--- a/apiserver/plane/db/models/project.py
+++ b/apiserver/plane/db/models/project.py
@@ -63,7 +63,8 @@ class Project(BaseModel):
         null=True,
         blank=True,
     )
-    icon = models.CharField(max_length=255, null=True, blank=True)
+    emoji = models.CharField(max_length=255, null=True, blank=True)
+    icon_prop = models.JSONField(null=True)
     module_view = models.BooleanField(default=True)
     cycle_view = models.BooleanField(default=True)
     issue_views_view = models.BooleanField(default=True)

From f2c8bdba34306bdf9c41e8c4df7a798fe5c79575 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Fri, 19 May 2023 17:08:32 +0530
Subject: [PATCH 54/81] fix: assignee name in analytics tooltip (#1081)

---
 .../custom-analytics/graph/custom-tooltip.tsx     | 15 ++++++++++++---
 .../analytics/custom-analytics/graph/index.tsx    |  2 +-
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/apps/app/components/analytics/custom-analytics/graph/custom-tooltip.tsx b/apps/app/components/analytics/custom-analytics/graph/custom-tooltip.tsx
index d288ae3a9..7fd0c1396 100644
--- a/apps/app/components/analytics/custom-analytics/graph/custom-tooltip.tsx
+++ b/apps/app/components/analytics/custom-analytics/graph/custom-tooltip.tsx
@@ -3,19 +3,28 @@ import { BarTooltipProps } from "@nivo/bar";
 import { DATE_KEYS } from "constants/analytics";
 import { renderMonthAndYear } from "helpers/analytics.helper";
 // types
-import { IAnalyticsParams } from "types";
+import { IAnalyticsParams, IAnalyticsResponse } from "types";
 
 type Props = {
   datum: BarTooltipProps<any>;
+  analytics: IAnalyticsResponse;
   params: IAnalyticsParams;
 };
 
-export const CustomTooltip: React.FC<Props> = ({ datum, params }) => {
+export const CustomTooltip: React.FC<Props> = ({ datum, analytics, params }) => {
   let tooltipValue: string | number = "";
 
   if (params.segment) {
     if (DATE_KEYS.includes(params.segment)) tooltipValue = renderMonthAndYear(datum.id);
-    else tooltipValue = datum.id;
+    else if (params.segment === "assignees__email") {
+      const assignee = analytics.extras.assignee_details.find(
+        (a) => a.assignees__email === datum.id
+      );
+
+      if (assignee)
+        tooltipValue = assignee.assignees__first_name + " " + assignee.assignees__last_name;
+      else tooltipValue = "No assignees";
+    } else tooltipValue = datum.id;
   } else {
     if (DATE_KEYS.includes(params.x_axis)) tooltipValue = datum.indexValue;
     else tooltipValue = datum.id === "count" ? "Issue count" : "Estimate";
diff --git a/apps/app/components/analytics/custom-analytics/graph/index.tsx b/apps/app/components/analytics/custom-analytics/graph/index.tsx
index 42bf5f702..cce93204c 100644
--- a/apps/app/components/analytics/custom-analytics/graph/index.tsx
+++ b/apps/app/components/analytics/custom-analytics/graph/index.tsx
@@ -66,7 +66,7 @@ export const AnalyticsGraph: React.FC<Props> = ({
         )
       }
       customYAxisTickValues={generateYAxisTickValues()}
-      tooltip={(datum) => <CustomTooltip datum={datum} params={params} />}
+      tooltip={(datum) => <CustomTooltip datum={datum} analytics={analytics} params={params} />}
       height={fullScreen ? "400px" : "300px"}
       margin={{
         right: 20,

From 186b5b55000d39b9a4e34430cea49e54c7b3a56b Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Fri, 19 May 2023 18:08:47 +0530
Subject: [PATCH 55/81] feat: cycle gantt view option added (#1083)

---
 .../components/cycles/completed-cycles.tsx    | 13 +++++--
 apps/app/components/cycles/cycles-view.tsx    | 35 ++++++++++++++++++-
 2 files changed, 45 insertions(+), 3 deletions(-)

diff --git a/apps/app/components/cycles/completed-cycles.tsx b/apps/app/components/cycles/completed-cycles.tsx
index 761eb8f3a..738b6c5fb 100644
--- a/apps/app/components/cycles/completed-cycles.tsx
+++ b/apps/app/components/cycles/completed-cycles.tsx
@@ -74,7 +74,7 @@ export const CompletedCycles: React.FC<CompletedCyclesListProps> = ({
               />
               <span>Completed cycles are not editable.</span>
             </div>
-            {cycleView === "list" ? (
+            {cycleView === "list" && (
               <div>
                 {completedCycles.completed_cycles.map((cycle) => (
                   <div className="hover:bg-brand-surface-2">
@@ -90,7 +90,8 @@ export const CompletedCycles: React.FC<CompletedCyclesListProps> = ({
                   </div>
                 ))}
               </div>
-            ) : (
+            )}
+            {cycleView === "board" && (
               <div className="grid grid-cols-1 gap-9 md:grid-cols-2 lg:grid-cols-3">
                 {completedCycles.completed_cycles.map((cycle) => (
                   <SingleCycleCard
@@ -103,6 +104,14 @@ export const CompletedCycles: React.FC<CompletedCyclesListProps> = ({
                 ))}
               </div>
             )}
+            {cycleView === "gantt" && (
+              <EmptyState
+                type="cycle"
+                title="Create New Cycle"
+                description="Sprint more effectively with Cycles by confining your project to a fixed amount of time. Create new cycle now."
+                imgURL={emptyCycle}
+              />
+            )}
           </div>
         ) : (
           <EmptyState
diff --git a/apps/app/components/cycles/cycles-view.tsx b/apps/app/components/cycles/cycles-view.tsx
index 35677364d..da5ba6aee 100644
--- a/apps/app/components/cycles/cycles-view.tsx
+++ b/apps/app/components/cycles/cycles-view.tsx
@@ -15,7 +15,7 @@ import {
 // ui
 import { EmptyState, Loader } from "components/ui";
 // icons
-import { ListBulletIcon, Squares2X2Icon } from "@heroicons/react/24/outline";
+import { ChartBarIcon, ListBulletIcon, Squares2X2Icon } from "@heroicons/react/24/outline";
 import emptyCycle from "public/empty-state/empty-cycle.svg";
 // types
 import {
@@ -132,6 +132,15 @@ export const CyclesView: React.FC<Props> = ({
               >
                 <Squares2X2Icon className="h-4 w-4 text-brand-secondary" />
               </button>
+              <button
+                type="button"
+                className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 ${
+                  cycleView === "gantt" ? "bg-brand-surface-2" : ""
+                } hover:bg-brand-surface-2`}
+                onClick={() => setCycleView("gantt")}
+              >
+                <ChartBarIcon className="h-4 w-4 text-brand-secondary" />
+              </button>
             </div>
           )}
         </div>
@@ -153,6 +162,14 @@ export const CyclesView: React.FC<Props> = ({
                 type="current"
               />
             )}
+            {cycleView === "gantt" && (
+              <EmptyState
+                type="cycle"
+                title="Create New Cycle"
+                description="Sprint more effectively with Cycles by confining your project to a fixed amount of time. Create new cycle now."
+                imgURL={emptyCycle}
+              />
+            )}
           </Tab.Panel>
           <Tab.Panel as="div" className="mt-7 space-y-5">
             {currentAndUpcomingCycles?.current_cycle?.[0] ? (
@@ -183,6 +200,14 @@ export const CyclesView: React.FC<Props> = ({
                 type="upcoming"
               />
             )}
+            {cycleView === "gantt" && (
+              <EmptyState
+                type="cycle"
+                title="Create New Cycle"
+                description="Sprint more effectively with Cycles by confining your project to a fixed amount of time. Create new cycle now."
+                imgURL={emptyCycle}
+              />
+            )}
           </Tab.Panel>
           <Tab.Panel as="div" className="mt-7 space-y-5">
             <CompletedCycles
@@ -208,6 +233,14 @@ export const CyclesView: React.FC<Props> = ({
                 type="draft"
               />
             )}
+            {cycleView === "gantt" && (
+              <EmptyState
+                type="cycle"
+                title="Create New Cycle"
+                description="Sprint more effectively with Cycles by confining your project to a fixed amount of time. Create new cycle now."
+                imgURL={emptyCycle}
+              />
+            )}
           </Tab.Panel>
         </Tab.Panels>
       </Tab.Group>

From 8e9afd459a01eb3fabc680917821411bb15539a8 Mon Sep 17 00:00:00 2001
From: Dakshesh Jain <65905942+dakshesh14@users.noreply.github.com>
Date: Fri, 19 May 2023 19:11:56 +0530
Subject: [PATCH 56/81] fix: create issue state not clearing on create more
 (#1082)

---
 apps/app/components/issues/form.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/app/components/issues/form.tsx b/apps/app/components/issues/form.tsx
index 8d9c03463..f09e5aedd 100644
--- a/apps/app/components/issues/form.tsx
+++ b/apps/app/components/issues/form.tsx
@@ -160,6 +160,7 @@ export const IssueForm: FC<IssueFormProps> = ({
       },
       description_html: "<p></p>",
     });
+    editorRef?.current?.clearEditor();
   };
 
   const handleAiAssistance = async (response: string) => {

From 406f02737fdb9d7b36b7474235e62ec0e496f9f9 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Fri, 19 May 2023 19:12:15 +0530
Subject: [PATCH 57/81] feat: kanban board issue menu context (#1084)

---
 .../core/board-view/single-issue.tsx          | 28 +++++++++++++++++--
 1 file changed, 25 insertions(+), 3 deletions(-)

diff --git a/apps/app/components/core/board-view/single-issue.tsx b/apps/app/components/core/board-view/single-issue.tsx
index 6da636efb..7f8a89aa2 100644
--- a/apps/app/components/core/board-view/single-issue.tsx
+++ b/apps/app/components/core/board-view/single-issue.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 
 import Link from "next/link";
 import { useRouter } from "next/router";
@@ -17,6 +17,7 @@ import issuesService from "services/issues.service";
 // hooks
 import useIssuesView from "hooks/use-issues-view";
 import useToast from "hooks/use-toast";
+import useOutsideClickDetector from "hooks/use-outside-click-detector";
 // components
 import {
   ViewAssigneeSelect,
@@ -36,6 +37,7 @@ import {
   XMarkIcon,
   ArrowTopRightOnSquareIcon,
   PaperClipIcon,
+  EllipsisHorizontalIcon,
 } from "@heroicons/react/24/outline";
 import { LayerDiagonalIcon } from "components/icons";
 // helpers
@@ -90,6 +92,9 @@ export const SingleBoardIssue: React.FC<Props> = ({
   // context menu
   const [contextMenu, setContextMenu] = useState(false);
   const [contextMenuPosition, setContextMenuPosition] = useState({ x: 0, y: 0 });
+  const [isMenuActive, setIsMenuActive] = useState(false);
+
+  const actionSectionRef = useRef<HTMLDivElement | null>(null);
 
   const { orderBy, params } = useIssuesView();
 
@@ -207,6 +212,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
         title: "Link Copied!",
         message: "Issue link copied to clipboard.",
       });
+      setIsMenuActive(false);
     });
   };
 
@@ -214,6 +220,8 @@ export const SingleBoardIssue: React.FC<Props> = ({
     if (snapshot.isDragging) handleTrashBox(snapshot.isDragging);
   }, [snapshot, handleTrashBox]);
 
+  useOutsideClickDetector(actionSectionRef, () => setIsMenuActive(false));
+
   const isNotAllowed = userAuth.isGuest || userAuth.isViewer || isCompleted;
 
   return (
@@ -266,9 +274,23 @@ export const SingleBoardIssue: React.FC<Props> = ({
       >
         <div className="group/card relative select-none p-3.5">
           {!isNotAllowed && (
-            <div className="z-1 absolute top-1.5 right-1.5 opacity-0 group-hover/card:opacity-100">
+            <div
+              ref={actionSectionRef}
+              className={`z-1 absolute top-1.5 right-1.5 hidden group-hover/card:!flex ${
+                isMenuActive ? "!flex" : ""
+              }`}
+            >
               {type && !isNotAllowed && (
-                <CustomMenu width="auto" ellipsis>
+                <CustomMenu
+                  customButton={
+                    <button
+                      className="flex w-full cursor-pointer items-center justify-between gap-1 rounded p-1 text-left text-xs duration-300 hover:bg-brand-surface-2"
+                      onClick={() => setIsMenuActive(!isMenuActive)}
+                    >
+                      <EllipsisHorizontalIcon className="h-4 w-4" />
+                    </button>
+                  }
+                >
                   <CustomMenu.MenuItem onClick={editIssue}>
                     <div className="flex items-center justify-start gap-2">
                       <PencilIcon className="h-4 w-4" />

From ddeafc069575ac48c4c99e86a2f9ea49a8b541f1 Mon Sep 17 00:00:00 2001
From: Dakshesh Jain <65905942+dakshesh14@users.noreply.github.com>
Date: Fri, 19 May 2023 19:12:24 +0530
Subject: [PATCH 58/81] fix: inconsistency for create label, select label
 getting closed on select (#1085)

---
 .../components/labels/create-label-modal.tsx  |  9 +--
 .../labels/create-update-label-inline.tsx     | 14 +++-
 .../projects/[projectId]/pages/[pageId].tsx   | 78 ++++++++-----------
 3 files changed, 46 insertions(+), 55 deletions(-)

diff --git a/apps/app/components/labels/create-label-modal.tsx b/apps/app/components/labels/create-label-modal.tsx
index c186cbd7c..3f1b4d647 100644
--- a/apps/app/components/labels/create-label-modal.tsx
+++ b/apps/app/components/labels/create-label-modal.tsx
@@ -30,7 +30,7 @@ type Props = {
 
 const defaultValues: Partial<IState> = {
   name: "",
-  color: "#000000",
+  color: "#858E96",
 };
 
 export const CreateLabelModal: React.FC<Props> = ({ isOpen, projectId, handleClose }) => {
@@ -44,7 +44,6 @@ export const CreateLabelModal: React.FC<Props> = ({ isOpen, projectId, handleClo
     watch,
     control,
     reset,
-    setError,
   } = useForm<IIssueLabels>({
     defaultValues,
   });
@@ -109,13 +108,13 @@ export const CreateLabelModal: React.FC<Props> = ({ isOpen, projectId, handleClo
                         {({ open, close }) => (
                           <>
                             <Popover.Button
-                              className={`group inline-flex items-center rounded-sm bg-brand-surface-2 text-base font-medium hover:text-brand-base focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 ${
+                              className={`group inline-flex items-center rounded-sm py-2 text-base font-medium hover:text-brand-base focus:outline-none ${
                                 open ? "text-brand-base" : "text-brand-secondary"
                               }`}
                             >
                               {watch("color") && watch("color") !== "" && (
                                 <span
-                                  className="ml-2 h-4 w-4 rounded"
+                                  className="ml-2 h-5 w-5 rounded"
                                   style={{
                                     backgroundColor: watch("color") ?? "black",
                                   }}
@@ -161,7 +160,7 @@ export const CreateLabelModal: React.FC<Props> = ({ isOpen, projectId, handleClo
                         type="text"
                         id="name"
                         name="name"
-                        placeholder="Enter name"
+                        placeholder="Label title"
                         autoComplete="off"
                         error={errors.name}
                         register={register}
diff --git a/apps/app/components/labels/create-update-label-inline.tsx b/apps/app/components/labels/create-update-label-inline.tsx
index 6fe2d2495..7010d564e 100644
--- a/apps/app/components/labels/create-update-label-inline.tsx
+++ b/apps/app/components/labels/create-update-label-inline.tsx
@@ -14,6 +14,8 @@ import { Popover, Transition } from "@headlessui/react";
 import issuesService from "services/issues.service";
 // ui
 import { Input, PrimaryButton, SecondaryButton } from "components/ui";
+// icons
+import { ChevronDownIcon } from "@heroicons/react/24/outline";
 // types
 import { IIssueLabels } from "types";
 // fetch-keys
@@ -28,7 +30,7 @@ type Props = {
 
 const defaultValues: Partial<IIssueLabels> = {
   name: "",
-  color: "#ff0000",
+  color: "#858E96",
 };
 
 type Ref = HTMLDivElement;
@@ -113,7 +115,7 @@ export const CreateUpdateLabelInline = forwardRef<Ref, Props>(function CreateUpd
       }`}
       ref={ref}
     >
-      <div className="h-8 w-8 flex-shrink-0">
+      <div className="flex-shrink-0">
         <Popover className="relative z-10 flex h-full w-full items-center justify-center">
           {({ open }) => (
             <>
@@ -128,6 +130,12 @@ export const CreateUpdateLabelInline = forwardRef<Ref, Props>(function CreateUpd
                     backgroundColor: watch("color"),
                   }}
                 />
+                <ChevronDownIcon
+                  className={`ml-2 h-5 w-5 group-hover:text-brand-secondary ${
+                    open ? "text-gray-600" : "text-gray-400"
+                  }`}
+                  aria-hidden="true"
+                />
               </Popover.Button>
 
               <Transition
@@ -153,7 +161,7 @@ export const CreateUpdateLabelInline = forwardRef<Ref, Props>(function CreateUpd
           )}
         </Popover>
       </div>
-      <div className="flex w-full flex-col justify-center">
+      <div className="flex flex-1 flex-col justify-center">
         <Input
           type="text"
           id="labelName"
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
index d1c33763d..03b56ce41 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
@@ -329,7 +329,7 @@ const SinglePage: NextPage = () => {
                 </div>
 
                 <div className="flex w-full flex-wrap gap-1">
-                  {pageDetails.labels.length > 0 ? (
+                  {pageDetails.labels.length > 0 && (
                     <>
                       {pageDetails.labels.map((labelId) => {
                         const label = labels?.find((label) => label.id === labelId);
@@ -362,54 +362,38 @@ const SinglePage: NextPage = () => {
                           </div>
                         );
                       })}
-                      <CustomSearchSelect
-                        customButton={
-                          <button
-                            type="button"
-                            className="flex items-center gap-1 rounded-sm bg-brand-surface-2 p-1.5 text-xs"
-                          >
-                            <PlusIcon className="h-3.5 w-3.5" />
-                          </button>
-                        }
-                        value={pageDetails.labels}
-                        onChange={(val: string[]) => partialUpdatePage({ labels_list: val })}
-                        options={options}
-                        multiple
-                        noChevron
-                      />
                     </>
-                  ) : (
-                    <CustomSearchSelect
-                      customButton={
-                        <button
-                          type="button"
-                          className="flex items-center gap-1 rounded-sm bg-brand-surface-2 px-3 py-1.5 text-xs"
-                        >
-                          <PlusIcon className="h-3 w-3" />
-                          Add label
-                        </button>
-                      }
-                      value={pageDetails.labels}
-                      onChange={(val: string[]) => partialUpdatePage({ labels_list: val })}
-                      footerOption={
-                        <button
-                          type="button"
-                          className="flex w-full select-none items-center rounded py-2 px-1 hover:bg-brand-surface-2"
-                          onClick={() => {
-                            setLabelModal(true);
-                          }}
-                        >
-                          <span className="flex items-center justify-start gap-1 text-brand-secondary">
-                            <PlusIcon className="h-4 w-4" aria-hidden="true" />
-                            <span>Create New Label</span>
-                          </span>
-                        </button>
-                      }
-                      options={options}
-                      multiple
-                      noChevron
-                    />
                   )}
+                  <CustomSearchSelect
+                    customButton={
+                      <button
+                        type="button"
+                        className="flex items-center gap-1 rounded-sm bg-brand-surface-2 p-1.5 text-xs"
+                      >
+                        <PlusIcon className="h-3.5 w-3.5" />
+                        {pageDetails.labels.length <= 0 && <span>Add Label</span>}
+                      </button>
+                    }
+                    value={pageDetails.labels}
+                    footerOption={
+                      <button
+                        type="button"
+                        className="flex w-full select-none items-center rounded py-2 px-1 hover:bg-brand-surface-2"
+                        onClick={() => {
+                          setLabelModal(true);
+                        }}
+                      >
+                        <span className="flex items-center justify-start gap-1 text-brand-secondary">
+                          <PlusIcon className="h-4 w-4" aria-hidden="true" />
+                          <span>Create New Label</span>
+                        </span>
+                      </button>
+                    }
+                    onChange={(val: string[]) => partialUpdatePage({ labels_list: val })}
+                    options={options}
+                    multiple
+                    noChevron
+                  />
                 </div>
               </div>
               <div className="flex items-center">

From 2e4f936dfa78261286218cf33c5958e64e97287b Mon Sep 17 00:00:00 2001
From: Dakshesh Jain <65905942+dakshesh14@users.noreply.github.com>
Date: Fri, 19 May 2023 19:12:34 +0530
Subject: [PATCH 59/81] fix: ai response not comming for page (#1087)

---
 apps/app/components/pages/create-update-block-inline.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/app/components/pages/create-update-block-inline.tsx b/apps/app/components/pages/create-update-block-inline.tsx
index 163c97792..336c04edd 100644
--- a/apps/app/components/pages/create-update-block-inline.tsx
+++ b/apps/app/components/pages/create-update-block-inline.tsx
@@ -369,6 +369,7 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
           else {
             setValue("description", {});
             setValue("description_html", `${watch("description_html")}<p>${response}</p>`);
+            editorRef.current?.setEditorValue(watch("description_html") ?? "");
           }
         }}
         projectId={projectId?.toString() ?? ""}

From b1f26f322f92852391bdb633911fa094c30d3ca5 Mon Sep 17 00:00:00 2001
From: Dakshesh Jain <65905942+dakshesh14@users.noreply.github.com>
Date: Fri, 19 May 2023 19:46:09 +0530
Subject: [PATCH 60/81] style: added theme in color picker (#1088)

---
 .../core/board-view/single-board.tsx          |  2 +-
 .../projects/[projectId]/pages/[pageId].tsx   | 27 +++++++++++++++++++
 2 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/apps/app/components/core/board-view/single-board.tsx b/apps/app/components/core/board-view/single-board.tsx
index 0ebc77d5b..b50b978ce 100644
--- a/apps/app/components/core/board-view/single-board.tsx
+++ b/apps/app/components/core/board-view/single-board.tsx
@@ -99,7 +99,7 @@ export const SingleBoard: React.FC<Props> = ({
                   </div>
                 </>
               )}
-              <div className="overflow-y-auto pt-3">
+              <div className="pt-3">
                 {groupedByIssues?.[groupTitle].map((issue, index) => (
                   <Draggable
                     key={issue.id}
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
index 03b56ce41..d70559d3f 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
@@ -442,6 +442,33 @@ const SinglePage: NextPage = () => {
                             <Popover.Panel className="absolute top-full right-0 z-20 mt-1 max-w-xs px-2 sm:px-0">
                               <TwitterPicker
                                 color={pageDetails.color}
+                                styles={{
+                                  default: {
+                                    card: {
+                                      backgroundColor: `rgba(var(--color-bg-surface-2))`,
+                                    },
+                                    triangle: {
+                                      position: "absolute",
+                                      borderColor:
+                                        "transparent transparent rgba(var(--color-bg-surface-2)) transparent",
+                                    },
+                                    input: {
+                                      border: "none",
+                                      height: "1.85rem",
+                                      fontSize: "0.875rem",
+                                      paddingLeft: "0.25rem",
+                                      color: `rgba(var(--color-text-secondary))`,
+                                      boxShadow: "none",
+                                      backgroundColor: `rgba(var(--color-bg-surface-1))`,
+                                      borderLeft: `1px solid rgba(var(--color-bg-surface-2))`,
+                                    },
+                                    hash: {
+                                      color: `rgba(var(--color-text-secondary))`,
+                                      boxShadow: "none",
+                                      backgroundColor: `rgba(var(--color-bg-surface-1))`,
+                                    },
+                                  },
+                                }}
                                 onChange={(val) => partialUpdatePage({ color: val.hex })}
                               />
                             </Popover.Panel>

From ab273f6be3cde57f7cbd183ce47d38b6df64b13a Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Fri, 19 May 2023 20:00:09 +0530
Subject: [PATCH 61/81] fix: sidebar dropdown fix, feat: assignee name updated
 (#1089)

* fix: issue sidebar cycle and module dropdown width fix

* feat: issue sidebar, issue card and issue modal assignee full name added
---
 apps/app/components/issues/select/assignee.tsx         | 8 +++++---
 apps/app/components/issues/sidebar-select/assignee.tsx | 8 +++++---
 apps/app/components/issues/sidebar-select/cycle.tsx    | 4 ++--
 apps/app/components/issues/sidebar-select/module.tsx   | 6 ++----
 apps/app/components/issues/view-select/assignee.tsx    | 8 +++++---
 5 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/apps/app/components/issues/select/assignee.tsx b/apps/app/components/issues/select/assignee.tsx
index 5c1d7c1b4..1fead864e 100644
--- a/apps/app/components/issues/select/assignee.tsx
+++ b/apps/app/components/issues/select/assignee.tsx
@@ -41,9 +41,11 @@ export const IssueAssigneeSelect: React.FC<Props> = ({ projectId, value = [], on
       content: (
         <div className="flex items-center gap-2">
           <Avatar user={member.member} />
-          {member.member.first_name && member.member.first_name !== ""
-            ? member.member.first_name
-            : member.member.email}
+          {`${
+            member.member.first_name && member.member.first_name !== ""
+              ? member.member.first_name
+              : member.member.email
+          } ${member.member.last_name ?? ""}`}
         </div>
       ),
     })) ?? [];
diff --git a/apps/app/components/issues/sidebar-select/assignee.tsx b/apps/app/components/issues/sidebar-select/assignee.tsx
index b229ef4e4..18934ea52 100644
--- a/apps/app/components/issues/sidebar-select/assignee.tsx
+++ b/apps/app/components/issues/sidebar-select/assignee.tsx
@@ -45,9 +45,11 @@ export const SidebarAssigneeSelect: React.FC<Props> = ({ value, onChange, userAu
       content: (
         <div className="flex items-center gap-2">
           <Avatar user={member.member} />
-          {member.member.first_name && member.member.first_name !== ""
-            ? member.member.first_name
-            : member.member.email}
+          {`${
+            member.member.first_name && member.member.first_name !== ""
+              ? member.member.first_name
+              : member.member.email
+          } ${member.member.last_name ?? ""}`}
         </div>
       ),
     })) ?? [];
diff --git a/apps/app/components/issues/sidebar-select/cycle.tsx b/apps/app/components/issues/sidebar-select/cycle.tsx
index 7db9cd906..3396dde27 100644
--- a/apps/app/components/issues/sidebar-select/cycle.tsx
+++ b/apps/app/components/issues/sidebar-select/cycle.tsx
@@ -84,7 +84,7 @@ export const SidebarCycleSelect: React.FC<Props> = ({
               ? removeIssueFromCycle(issueCycle?.id ?? "", issueCycle?.cycle ?? "")
               : handleCycleChange(incompleteCycles?.find((c) => c.id === value) as ICycle);
           }}
-          width="w-full"
+          width="auto"
           position="right"
           maxHeight="rg"
           disabled={isNotAllowed}
@@ -95,7 +95,7 @@ export const SidebarCycleSelect: React.FC<Props> = ({
                 {incompleteCycles.map((option) => (
                   <CustomSelect.Option key={option.id} value={option.id}>
                     <Tooltip position="left-bottom" tooltipContent={option.name}>
-                      <span className="w-full truncate ">{truncateText(option.name, 15)}</span>
+                      <span className="w-full truncate">{truncateText(option.name, 25)}</span>
                     </Tooltip>
                   </CustomSelect.Option>
                 ))}
diff --git a/apps/app/components/issues/sidebar-select/module.tsx b/apps/app/components/issues/sidebar-select/module.tsx
index d1b0f999b..7f08bc92c 100644
--- a/apps/app/components/issues/sidebar-select/module.tsx
+++ b/apps/app/components/issues/sidebar-select/module.tsx
@@ -88,7 +88,7 @@ export const SidebarModuleSelect: React.FC<Props> = ({
               ? removeIssueFromModule(issueModule?.id ?? "", issueModule?.module ?? "")
               : handleModuleChange(modules?.find((m) => m.id === value) as IModule);
           }}
-          width="w-full"
+          width="auto"
           position="right"
           maxHeight="rg"
           disabled={isNotAllowed}
@@ -99,9 +99,7 @@ export const SidebarModuleSelect: React.FC<Props> = ({
                 {modules.map((option) => (
                   <CustomSelect.Option key={option.id} value={option.id}>
                     <Tooltip position="left-bottom" tooltipContent={option.name}>
-                      <span className="w-full max-w-[125px] truncate">
-                        {truncateText(option.name, 15)}
-                      </span>
+                      <span className="w-full truncate">{truncateText(option.name, 25)}</span>
                     </Tooltip>
                   </CustomSelect.Option>
                 ))}
diff --git a/apps/app/components/issues/view-select/assignee.tsx b/apps/app/components/issues/view-select/assignee.tsx
index e5c0eec37..69726f9c5 100644
--- a/apps/app/components/issues/view-select/assignee.tsx
+++ b/apps/app/components/issues/view-select/assignee.tsx
@@ -55,9 +55,11 @@ export const ViewAssigneeSelect: React.FC<Props> = ({
       content: (
         <div className="flex items-center gap-2">
           <Avatar user={member.member} />
-          {member.member.first_name && member.member.first_name !== ""
-            ? member.member.first_name
-            : member.member.email}
+          {`${
+            member.member.first_name && member.member.first_name !== ""
+              ? member.member.first_name
+              : member.member.email
+          } ${member.member.last_name ?? ""}`}
         </div>
       ),
     })) ?? [];

From d9642eee8283de9c75ed86ee04a856b7895b954d Mon Sep 17 00:00:00 2001
From: Dakshesh Jain <65905942+dakshesh14@users.noreply.github.com>
Date: Fri, 19 May 2023 20:33:35 +0530
Subject: [PATCH 62/81] fix: ai response not coming when using 'AI' button
 (#1091)

* fix: ai response not comming for page

* fix: ai response not coming when using 'AI' button
---
 apps/app/components/pages/create-update-block-inline.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/apps/app/components/pages/create-update-block-inline.tsx b/apps/app/components/pages/create-update-block-inline.tsx
index 336c04edd..528c83f9e 100644
--- a/apps/app/components/pages/create-update-block-inline.tsx
+++ b/apps/app/components/pages/create-update-block-inline.tsx
@@ -365,10 +365,15 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
         content={watch("description_html")}
         htmlContent={watch("description_html")}
         onResponse={(response) => {
-          if (data && handleAiAssistance) handleAiAssistance(response);
-          else {
+          if (data && handleAiAssistance) {
+            handleAiAssistance(response);
+            editorRef.current?.setEditorValue(
+              `${watch("description_html")}<p>${response}</p>` ?? ""
+            );
+          } else {
             setValue("description", {});
             setValue("description_html", `${watch("description_html")}<p>${response}</p>`);
+
             editorRef.current?.setEditorValue(watch("description_html") ?? "");
           }
         }}

From 8cbe6c4b36047b47fae39587d0d2bf77803997df Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Sat, 20 May 2023 03:07:00 +0530
Subject: [PATCH 63/81] fix: show only filtered states when state filter is
 selected (#1093)

---
 apps/app/hooks/use-issues-view.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/apps/app/hooks/use-issues-view.tsx b/apps/app/hooks/use-issues-view.tsx
index 406c1d025..0e27ed049 100644
--- a/apps/app/hooks/use-issues-view.tsx
+++ b/apps/app/hooks/use-issues-view.tsx
@@ -129,9 +129,12 @@ const useIssuesView = () => {
       ? backlogStatesList.map((state) => state.id)
       : statesList.map((state) => state.id);
 
+  const filteredStateIds =
+    filters && filters?.state ? stateIds.filter((s) => filters.state?.includes(s)) : stateIds;
+
   const emptyStatesObject: { [key: string]: [] } = {};
-  for (let i = 0; i < stateIds.length; i++) {
-    emptyStatesObject[stateIds[i]] = [];
+  for (let i = 0; i < filteredStateIds.length; i++) {
+    emptyStatesObject[filteredStateIds[i]] = [];
   }
 
   const groupedByIssues:

From 1fed5f78464e789e471f35b5fda2a94f92fcb5cf Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Sat, 20 May 2023 03:08:23 +0530
Subject: [PATCH 64/81] style: active cycle stats tab sticky (#1092)

---
 apps/app/components/cycles/active-cycle-details.tsx |  2 +-
 apps/app/components/cycles/active-cycle-stats.tsx   | 11 +++++++----
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/apps/app/components/cycles/active-cycle-details.tsx b/apps/app/components/cycles/active-cycle-details.tsx
index 7bb357709..65c2e8b1b 100644
--- a/apps/app/components/cycles/active-cycle-details.tsx
+++ b/apps/app/components/cycles/active-cycle-details.tsx
@@ -449,7 +449,7 @@ export const ActiveCycleDetails: React.FC<TSingleStatProps> = ({ cycle, isComple
               </div>
             </div>
           </div>
-          <div className="border-brand-base h-60 overflow-y-auto p-4">
+          <div className="border-brand-base h-60 overflow-y-scroll">
             <ActiveCycleProgressStats issues={issues ?? []} />
           </div>
         </div>
diff --git a/apps/app/components/cycles/active-cycle-stats.tsx b/apps/app/components/cycles/active-cycle-stats.tsx
index 2a8be9575..0ef85e4b3 100644
--- a/apps/app/components/cycles/active-cycle-stats.tsx
+++ b/apps/app/components/cycles/active-cycle-stats.tsx
@@ -73,7 +73,10 @@ export const ActiveCycleProgressStats: React.FC<Props> = ({ issues }) => {
         }
       }}
     >
-      <Tab.List as="div" className="flex flex-wrap items-center justify-start gap-4 text-sm">
+      <Tab.List
+        as="div"
+        className="flex sticky top-0 z-10 bg-brand-base w-full px-4 pt-4 pb-1 flex-wrap items-center justify-start gap-4 text-sm"
+      >
         <Tab
           className={({ selected }) =>
             `px-3 py-1 text-brand-base rounded-3xl border border-brand-base ${
@@ -93,10 +96,10 @@ export const ActiveCycleProgressStats: React.FC<Props> = ({ issues }) => {
           Labels
         </Tab>
       </Tab.List>
-      <Tab.Panels className="flex w-full">
+      <Tab.Panels className="flex w-full px-4 pb-4">
         <Tab.Panel
           as="div"
-          className="flex flex-col w-full mt-2 gap-1 items-center text-brand-secondary"
+          className="flex flex-col w-full mt-2 gap-1 overflow-y-scroll items-center text-brand-secondary"
         >
           {members?.map((member, index) => {
             const totalArray = issues?.filter((i) => i?.assignees?.includes(member.member.id));
@@ -147,7 +150,7 @@ export const ActiveCycleProgressStats: React.FC<Props> = ({ issues }) => {
         </Tab.Panel>
         <Tab.Panel
           as="div"
-          className="flex flex-col w-full mt-2 gap-1 items-center text-brand-secondary"
+          className="flex flex-col w-full mt-2 gap-1 overflow-y-scroll items-center text-brand-secondary"
         >
           {issueLabels?.map((label, index) => {
             const totalArray = issues?.filter((i) => i?.labels?.includes(label.id));

From 012486df11a8a90ccdf64217650d7f7028b5faf5 Mon Sep 17 00:00:00 2001
From: pablohashescobar <118773738+pablohashescobar@users.noreply.github.com>
Date: Sat, 20 May 2023 16:00:02 +0530
Subject: [PATCH 65/81] chore: assignee names in analytics export (#1086)

* chore: assignee names in analytics export

* chore: update key as assignee name
---
 .../plane/bgtasks/analytic_plot_export.py     | 38 ++++++++++++++++---
 1 file changed, 32 insertions(+), 6 deletions(-)

diff --git a/apiserver/plane/bgtasks/analytic_plot_export.py b/apiserver/plane/bgtasks/analytic_plot_export.py
index ad4b76d5f..7f276be82 100644
--- a/apiserver/plane/bgtasks/analytic_plot_export.py
+++ b/apiserver/plane/bgtasks/analytic_plot_export.py
@@ -21,7 +21,7 @@ row_mapping = {
     "state__name": "State",
     "state__group": "State Group",
     "labels__name": "Label",
-    "assignees__email": "Assignee Email",
+    "assignees__email": "Assignee Name",
     "start_date": "Start Date",
     "target_date": "Due Date",
     "completed_at": "Completed At",
@@ -48,6 +48,17 @@ def analytic_export_task(email, data, slug):
 
         key = "count" if y_axis == "issue_count" else "estimate"
 
+        segmented = segment
+
+        assignee_details = {}
+        if x_axis in ["assignees__email"] or segment in ["assignees__email"]:
+            assignee_details = (
+                Issue.objects.filter(workspace__slug=slug, **filters, assignees__avatar__isnull=False)
+                .order_by("assignees__id")
+                .distinct("assignees__id")
+                .values("assignees__avatar", "assignees__email", "assignees__first_name", "assignees__last_name")
+            )
+
         if segment:
             segment_zero = []
             for item in distribution:
@@ -81,8 +92,21 @@ def analytic_export_task(email, data, slug):
                         generated_row.append(value[0].get(key))
                     else:
                         generated_row.append("0")
+                # x-axis replacement for names
+                if x_axis in ["assignees__email"]:
+                    assignee = [user for user in assignee_details if str(user.get("assignees__email")) == str(item)]
+                    if len(assignee):
+                        generated_row[0] = str(assignee[0].get("assignees__first_name")) + " " + str(assignee[0].get("assignees__last_name"))
                 rows.append(tuple(generated_row))
 
+            # If segment is ["assignees__email"] then replace segment_zero rows with first and last names
+            if segmented in ["assignees__email"]:
+                for index, segm in enumerate(row_zero[2:]):
+                    # find the name of the user
+                    assignee = [user for user in assignee_details if str(user.get("assignees__email")) == str(segm)]
+                    if len(assignee):
+                        row_zero[index] = str(assignee[0].get("assignees__first_name")) + " " + str(assignee[0].get("assignees__last_name"))
+
             rows = [tuple(row_zero)] + rows
             csv_buffer = io.StringIO()
             writer = csv.writer(csv_buffer, delimiter=",", quoting=csv.QUOTE_ALL)
@@ -110,17 +134,19 @@ def analytic_export_task(email, data, slug):
             ]
             rows = []
             for item in distribution:
-                rows.append(
-                    tuple(
-                        [
+                row =  [
                             item,
                             distribution.get(item)[0].get("count")
                             if y_axis == "issue_count"
                             else distribution.get(item)[0].get("estimate  "),
                         ]
-                    )
-                )
+                # x-axis replacement to names
+                if x_axis in ["assignees__email"]:
+                    assignee = [user for user in assignee_details if str(user.get("assignees__email")) == str(item)]
+                    if len(assignee):
+                        row[0] = str(assignee[0].get("assignees__first_name")) + " " + str(assignee[0].get("assignees__last_name"))
 
+                rows.append(tuple(row))
             rows = [tuple(row_zero)] + rows
             csv_buffer = io.StringIO()
             writer = csv.writer(csv_buffer, delimiter=",", quoting=csv.QUOTE_ALL)

From 9ccc35d181017faf0fdf1d85e0848bc00ccce719 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Sat, 20 May 2023 16:00:41 +0530
Subject: [PATCH 66/81] fix: make custom search select handle undefined options
 (#1094)

* fix: make search select handle undefined options

* fix: kanban y-scroll
---
 .../analytics/custom-analytics/sidebar.tsx    | 11 ++++--
 .../core/board-view/single-board.tsx          |  2 +-
 .../integration/github/import-data.tsx        | 13 ++++---
 .../integration/github/single-user-select.tsx | 35 ++++++++---------
 .../integration/jira/import-users.tsx         | 35 ++++++++---------
 .../app/components/issues/select/assignee.tsx | 39 +++++++++----------
 .../issues/sidebar-select/assignee.tsx        | 39 +++++++++----------
 .../issues/view-select/assignee.tsx           | 39 +++++++++----------
 apps/app/components/modules/select/lead.tsx   | 33 ++++++++--------
 .../app/components/modules/select/members.tsx | 33 ++++++++--------
 .../modules/sidebar-select/select-lead.tsx    | 33 ++++++++--------
 .../modules/sidebar-select/select-members.tsx | 33 ++++++++--------
 .../components/ui/custom-search-select.tsx    | 12 +++---
 apps/app/helpers/string.helper.ts             |  2 +-
 14 files changed, 179 insertions(+), 180 deletions(-)

diff --git a/apps/app/components/analytics/custom-analytics/sidebar.tsx b/apps/app/components/analytics/custom-analytics/sidebar.tsx
index 26eb66d12..e9a9d5d7f 100644
--- a/apps/app/components/analytics/custom-analytics/sidebar.tsx
+++ b/apps/app/components/analytics/custom-analytics/sidebar.tsx
@@ -152,7 +152,7 @@ export const AnalyticsSidebar: React.FC<Props> = ({
 
                     return (
                       <div key={project.id}>
-                        <h5 className="text-sm flex items-center gap-1">
+                        <div className="text-sm flex items-center gap-1">
                           {project.emoji ? (
                             <span className="grid h-6 w-6 flex-shrink-0 place-items-center">
                               {String.fromCodePoint(parseInt(project.emoji))}
@@ -171,8 +171,13 @@ export const AnalyticsSidebar: React.FC<Props> = ({
                               {project?.name.charAt(0)}
                             </span>
                           )}
-                          <span className="break-all">{project.name}</span>
-                        </h5>
+                          <h5 className="break-all">
+                            {project.name}
+                            <span className="text-brand-secondary text-xs ml-1">
+                              ({project.identifier})
+                            </span>
+                          </h5>
+                        </div>
                         <div className="mt-4 space-y-3 pl-2">
                           <div className="flex items-center justify-between gap-2 text-xs">
                             <div className="flex items-center gap-2">
diff --git a/apps/app/components/core/board-view/single-board.tsx b/apps/app/components/core/board-view/single-board.tsx
index b50b978ce..a4f869cb3 100644
--- a/apps/app/components/core/board-view/single-board.tsx
+++ b/apps/app/components/core/board-view/single-board.tsx
@@ -99,7 +99,7 @@ export const SingleBoard: React.FC<Props> = ({
                   </div>
                 </>
               )}
-              <div className="pt-3">
+              <div className="pt-3 overflow-y-auto">
                 {groupedByIssues?.[groupTitle].map((issue, index) => (
                   <Draggable
                     key={issue.id}
diff --git a/apps/app/components/integration/github/import-data.tsx b/apps/app/components/integration/github/import-data.tsx
index a0bbfa6a5..6babaf2e7 100644
--- a/apps/app/components/integration/github/import-data.tsx
+++ b/apps/app/components/integration/github/import-data.tsx
@@ -23,12 +23,13 @@ type Props = {
 export const GithubImportData: FC<Props> = ({ handleStepChange, integration, control, watch }) => {
   const { projects } = useProjects();
 
-  const options =
-    projects.map((project) => ({
-      value: project.id,
-      query: project.name,
-      content: <p>{truncateText(project.name, 25)}</p>,
-    })) ?? [];
+  const options = projects
+    ? projects.map((project) => ({
+        value: project.id,
+        query: project.name,
+        content: <p>{truncateText(project.name, 25)}</p>,
+      }))
+    : undefined;
 
   return (
     <div className="mt-6">
diff --git a/apps/app/components/integration/github/single-user-select.tsx b/apps/app/components/integration/github/single-user-select.tsx
index 14f913bff..53fbce476 100644
--- a/apps/app/components/integration/github/single-user-select.tsx
+++ b/apps/app/components/integration/github/single-user-select.tsx
@@ -44,24 +44,23 @@ export const SingleUserSelect: React.FC<Props> = ({ collaborator, index, users,
     workspaceSlug ? () => workspaceService.workspaceMembers(workspaceSlug.toString()) : null
   );
 
-  const options =
-    members?.map((member) => ({
-      value: member.member.email,
-      query:
-        (member.member.first_name && member.member.first_name !== ""
-          ? member.member.first_name
-          : member.member.email) +
-          " " +
-          member.member.last_name ?? "",
-      content: (
-        <div className="flex items-center gap-2">
-          <Avatar user={member.member} />
-          {member.member.first_name && member.member.first_name !== ""
-            ? member.member.first_name + "(" + member.member.email + ")"
-            : member.member.email}
-        </div>
-      ),
-    })) ?? [];
+  const options = members?.map((member) => ({
+    value: member.member.email,
+    query:
+      (member.member.first_name && member.member.first_name !== ""
+        ? member.member.first_name
+        : member.member.email) +
+        " " +
+        member.member.last_name ?? "",
+    content: (
+      <div className="flex items-center gap-2">
+        <Avatar user={member.member} />
+        {member.member.first_name && member.member.first_name !== ""
+          ? member.member.first_name + "(" + member.member.email + ")"
+          : member.member.email}
+      </div>
+    ),
+  }));
 
   return (
     <div className="grid grid-cols-3 items-center gap-2 rounded-md bg-brand-surface-2 px-2 py-3">
diff --git a/apps/app/components/integration/jira/import-users.tsx b/apps/app/components/integration/jira/import-users.tsx
index da14f7d15..80c0c4c9b 100644
--- a/apps/app/components/integration/jira/import-users.tsx
+++ b/apps/app/components/integration/jira/import-users.tsx
@@ -32,24 +32,23 @@ export const JiraImportUsers: FC = () => {
 
   const { workspaceMembers: members } = useWorkspaceMembers(workspaceSlug?.toString());
 
-  const options =
-    members?.map((member) => ({
-      value: member.member.email,
-      query:
-        (member.member.first_name && member.member.first_name !== ""
-          ? member.member.first_name
-          : member.member.email) +
-          " " +
-          member.member.last_name ?? "",
-      content: (
-        <div className="flex items-center gap-2">
-          <Avatar user={member.member} />
-          {member.member.first_name && member.member.first_name !== ""
-            ? member.member.first_name + " (" + member.member.email + ")"
-            : member.member.email}
-        </div>
-      ),
-    })) ?? [];
+  const options = members?.map((member) => ({
+    value: member.member.email,
+    query:
+      (member.member.first_name && member.member.first_name !== ""
+        ? member.member.first_name
+        : member.member.email) +
+        " " +
+        member.member.last_name ?? "",
+    content: (
+      <div className="flex items-center gap-2">
+        <Avatar user={member.member} />
+        {member.member.first_name && member.member.first_name !== ""
+          ? member.member.first_name + " (" + member.member.email + ")"
+          : member.member.email}
+      </div>
+    ),
+  }));
 
   return (
     <div className="h-full w-full space-y-10 divide-y-2 divide-brand-base overflow-y-auto">
diff --git a/apps/app/components/issues/select/assignee.tsx b/apps/app/components/issues/select/assignee.tsx
index 1fead864e..2e1844a69 100644
--- a/apps/app/components/issues/select/assignee.tsx
+++ b/apps/app/components/issues/select/assignee.tsx
@@ -29,26 +29,25 @@ export const IssueAssigneeSelect: React.FC<Props> = ({ projectId, value = [], on
       : null
   );
 
-  const options =
-    members?.map((member) => ({
-      value: member.member.id,
-      query:
-        (member.member.first_name && member.member.first_name !== ""
-          ? member.member.first_name
-          : member.member.email) +
-          " " +
-          member.member.last_name ?? "",
-      content: (
-        <div className="flex items-center gap-2">
-          <Avatar user={member.member} />
-          {`${
-            member.member.first_name && member.member.first_name !== ""
-              ? member.member.first_name
-              : member.member.email
-          } ${member.member.last_name ?? ""}`}
-        </div>
-      ),
-    })) ?? [];
+  const options = members?.map((member) => ({
+    value: member.member.id,
+    query:
+      (member.member.first_name && member.member.first_name !== ""
+        ? member.member.first_name
+        : member.member.email) +
+        " " +
+        member.member.last_name ?? "",
+    content: (
+      <div className="flex items-center gap-2">
+        <Avatar user={member.member} />
+        {`${
+          member.member.first_name && member.member.first_name !== ""
+            ? member.member.first_name
+            : member.member.email
+        } ${member.member.last_name ?? ""}`}
+      </div>
+    ),
+  }));
 
   return (
     <CustomSearchSelect
diff --git a/apps/app/components/issues/sidebar-select/assignee.tsx b/apps/app/components/issues/sidebar-select/assignee.tsx
index 18934ea52..6fcd04eb8 100644
--- a/apps/app/components/issues/sidebar-select/assignee.tsx
+++ b/apps/app/components/issues/sidebar-select/assignee.tsx
@@ -33,26 +33,25 @@ export const SidebarAssigneeSelect: React.FC<Props> = ({ value, onChange, userAu
       : null
   );
 
-  const options =
-    members?.map((member) => ({
-      value: member.member.id,
-      query:
-        (member.member.first_name && member.member.first_name !== ""
-          ? member.member.first_name
-          : member.member.email) +
-          " " +
-          member.member.last_name ?? "",
-      content: (
-        <div className="flex items-center gap-2">
-          <Avatar user={member.member} />
-          {`${
-            member.member.first_name && member.member.first_name !== ""
-              ? member.member.first_name
-              : member.member.email
-          } ${member.member.last_name ?? ""}`}
-        </div>
-      ),
-    })) ?? [];
+  const options = members?.map((member) => ({
+    value: member.member.id,
+    query:
+      (member.member.first_name && member.member.first_name !== ""
+        ? member.member.first_name
+        : member.member.email) +
+        " " +
+        member.member.last_name ?? "",
+    content: (
+      <div className="flex items-center gap-2">
+        <Avatar user={member.member} />
+        {`${
+          member.member.first_name && member.member.first_name !== ""
+            ? member.member.first_name
+            : member.member.email
+        } ${member.member.last_name ?? ""}`}
+      </div>
+    ),
+  }));
 
   const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
 
diff --git a/apps/app/components/issues/view-select/assignee.tsx b/apps/app/components/issues/view-select/assignee.tsx
index 69726f9c5..48149c24f 100644
--- a/apps/app/components/issues/view-select/assignee.tsx
+++ b/apps/app/components/issues/view-select/assignee.tsx
@@ -43,26 +43,25 @@ export const ViewAssigneeSelect: React.FC<Props> = ({
       : null
   );
 
-  const options =
-    members?.map((member) => ({
-      value: member.member.id,
-      query:
-        (member.member.first_name && member.member.first_name !== ""
-          ? member.member.first_name
-          : member.member.email) +
-          " " +
-          member.member.last_name ?? "",
-      content: (
-        <div className="flex items-center gap-2">
-          <Avatar user={member.member} />
-          {`${
-            member.member.first_name && member.member.first_name !== ""
-              ? member.member.first_name
-              : member.member.email
-          } ${member.member.last_name ?? ""}`}
-        </div>
-      ),
-    })) ?? [];
+  const options = members?.map((member) => ({
+    value: member.member.id,
+    query:
+      (member.member.first_name && member.member.first_name !== ""
+        ? member.member.first_name
+        : member.member.email) +
+        " " +
+        member.member.last_name ?? "",
+    content: (
+      <div className="flex items-center gap-2">
+        <Avatar user={member.member} />
+        {`${
+          member.member.first_name && member.member.first_name !== ""
+            ? member.member.first_name
+            : member.member.email
+        } ${member.member.last_name ?? ""}`}
+      </div>
+    ),
+  }));
 
   return (
     <CustomSearchSelect
diff --git a/apps/app/components/modules/select/lead.tsx b/apps/app/components/modules/select/lead.tsx
index aaa6980f6..be7052df0 100644
--- a/apps/app/components/modules/select/lead.tsx
+++ b/apps/app/components/modules/select/lead.tsx
@@ -30,24 +30,23 @@ export const ModuleLeadSelect: React.FC<Props> = ({ value, onChange }) => {
       : null
   );
 
-  const options =
-    members?.map((member) => ({
-      value: member.member.id,
-      query:
-        (member.member.first_name && member.member.first_name !== ""
+  const options = members?.map((member) => ({
+    value: member.member.id,
+    query:
+      (member.member.first_name && member.member.first_name !== ""
+        ? member.member.first_name
+        : member.member.email) +
+        " " +
+        member.member.last_name ?? "",
+    content: (
+      <div className="flex items-center gap-2">
+        <Avatar user={member.member} />
+        {member.member.first_name && member.member.first_name !== ""
           ? member.member.first_name
-          : member.member.email) +
-          " " +
-          member.member.last_name ?? "",
-      content: (
-        <div className="flex items-center gap-2">
-          <Avatar user={member.member} />
-          {member.member.first_name && member.member.first_name !== ""
-            ? member.member.first_name
-            : member.member.email}
-        </div>
-      ),
-    })) ?? [];
+          : member.member.email}
+      </div>
+    ),
+  }));
 
   const selectedOption = members?.find((m) => m.member.id === value)?.member;
 
diff --git a/apps/app/components/modules/select/members.tsx b/apps/app/components/modules/select/members.tsx
index 8d407f36a..c95331202 100644
--- a/apps/app/components/modules/select/members.tsx
+++ b/apps/app/components/modules/select/members.tsx
@@ -28,24 +28,23 @@ export const ModuleMembersSelect: React.FC<Props> = ({ value, onChange }) => {
       ? () => projectServices.projectMembers(workspaceSlug as string, projectId as string)
       : null
   );
-  const options =
-    members?.map((member) => ({
-      value: member.member.id,
-      query:
-        (member.member.first_name && member.member.first_name !== ""
+  const options = members?.map((member) => ({
+    value: member.member.id,
+    query:
+      (member.member.first_name && member.member.first_name !== ""
+        ? member.member.first_name
+        : member.member.email) +
+        " " +
+        member.member.last_name ?? "",
+    content: (
+      <div className="flex items-center gap-2">
+        <Avatar user={member.member} />
+        {member.member.first_name && member.member.first_name !== ""
           ? member.member.first_name
-          : member.member.email) +
-          " " +
-          member.member.last_name ?? "",
-      content: (
-        <div className="flex items-center gap-2">
-          <Avatar user={member.member} />
-          {member.member.first_name && member.member.first_name !== ""
-            ? member.member.first_name
-            : member.member.email}
-        </div>
-      ),
-    })) ?? [];
+          : member.member.email}
+      </div>
+    ),
+  }));
 
   return (
     <CustomSearchSelect
diff --git a/apps/app/components/modules/sidebar-select/select-lead.tsx b/apps/app/components/modules/sidebar-select/select-lead.tsx
index cea3627f1..937a0d6df 100644
--- a/apps/app/components/modules/sidebar-select/select-lead.tsx
+++ b/apps/app/components/modules/sidebar-select/select-lead.tsx
@@ -31,24 +31,23 @@ export const SidebarLeadSelect: React.FC<Props> = ({ value, onChange }) => {
       : null
   );
 
-  const options =
-    members?.map((member) => ({
-      value: member.member.id,
-      query:
-        (member.member.first_name && member.member.first_name !== ""
+  const options = members?.map((member) => ({
+    value: member.member.id,
+    query:
+      (member.member.first_name && member.member.first_name !== ""
+        ? member.member.first_name
+        : member.member.email) +
+        " " +
+        member.member.last_name ?? "",
+    content: (
+      <div className="flex items-center gap-2">
+        <Avatar user={member.member} />
+        {member.member.first_name && member.member.first_name !== ""
           ? member.member.first_name
-          : member.member.email) +
-          " " +
-          member.member.last_name ?? "",
-      content: (
-        <div className="flex items-center gap-2">
-          <Avatar user={member.member} />
-          {member.member.first_name && member.member.first_name !== ""
-            ? member.member.first_name
-            : member.member.email}
-        </div>
-      ),
-    })) ?? [];
+          : member.member.email}
+      </div>
+    ),
+  }));
 
   const selectedOption = members?.find((m) => m.member.id === value)?.member;
 
diff --git a/apps/app/components/modules/sidebar-select/select-members.tsx b/apps/app/components/modules/sidebar-select/select-members.tsx
index 2f024913f..2481aaeed 100644
--- a/apps/app/components/modules/sidebar-select/select-members.tsx
+++ b/apps/app/components/modules/sidebar-select/select-members.tsx
@@ -29,24 +29,23 @@ export const SidebarMembersSelect: React.FC<Props> = ({ value, onChange }) => {
       : null
   );
 
-  const options =
-    members?.map((member) => ({
-      value: member.member.id,
-      query:
-        (member.member.first_name && member.member.first_name !== ""
+  const options = members?.map((member) => ({
+    value: member.member.id,
+    query:
+      (member.member.first_name && member.member.first_name !== ""
+        ? member.member.first_name
+        : member.member.email) +
+        " " +
+        member.member.last_name ?? "",
+    content: (
+      <div className="flex items-center gap-2">
+        <Avatar user={member.member} />
+        {member.member.first_name && member.member.first_name !== ""
           ? member.member.first_name
-          : member.member.email) +
-          " " +
-          member.member.last_name ?? "",
-      content: (
-        <div className="flex items-center gap-2">
-          <Avatar user={member.member} />
-          {member.member.first_name && member.member.first_name !== ""
-            ? member.member.first_name
-            : member.member.email}
-        </div>
-      ),
-    })) ?? [];
+          : member.member.email}
+      </div>
+    ),
+  }));
 
   return (
     <div className="flex items-center justify-start gap-1">
diff --git a/apps/app/components/ui/custom-search-select.tsx b/apps/app/components/ui/custom-search-select.tsx
index ebe1dfb45..ef0943377 100644
--- a/apps/app/components/ui/custom-search-select.tsx
+++ b/apps/app/components/ui/custom-search-select.tsx
@@ -9,11 +9,13 @@ import { CheckIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
 type CustomSearchSelectProps = {
   value: any;
   onChange: any;
-  options: {
-    value: any;
-    query: string;
-    content: JSX.Element;
-  }[];
+  options:
+    | {
+        value: any;
+        query: string;
+        content: JSX.Element;
+      }[]
+    | undefined;
   label?: string | JSX.Element;
   textAlignment?: "left" | "center" | "right";
   height?: "sm" | "md" | "rg" | "lg";
diff --git a/apps/app/helpers/string.helper.ts b/apps/app/helpers/string.helper.ts
index 1cdebf0bb..a13f149fc 100644
--- a/apps/app/helpers/string.helper.ts
+++ b/apps/app/helpers/string.helper.ts
@@ -89,7 +89,7 @@ export const cosineSimilarity = (a: string, b: string) => {
 };
 
 export const generateRandomColor = (string: string): string => {
-  if (!string) return "var(--color-accent)";
+  if (!string) return "rgb(var(--color-accent))";
 
   string = `${string}`;
 

From e1e9a5ed96efddb049bbbc1f5163324ff8ab1397 Mon Sep 17 00:00:00 2001
From: guru_sainath <gurusainath007@gmail.com>
Date: Sat, 20 May 2023 17:30:15 +0530
Subject: [PATCH 67/81] feat: Gantt chart (#1062)

* dev: Helpers

* dev: views

* dev: Chart views Month, Year and Day

* dev: Chart Workflow updates

* update: scroll functionality implementation

* update: data vaidation

* update: date renders and issue filter in the month view

* update: new date render month view

* update: scroll enabled left in chart

* update: Item render from the date it created.

* update: width implementation in chat view

* dev: chart render functionality in the gantt chart

* update: month view fix

* dev: chart render issues resolved

* update: fixed allchat views

* update: updated week view default values

* update: integrated chart view in issues

* update: grabble and sidebar logic impleemntation and integrated gantt in issues

* update: Preview gantt chart in month view

* fix: mutation in gantt chart after creating a new issue

* chore: cycles and modules list gantt chart

* update: Ui changes on gantt view

* fix: gantt chart height, chore: remove link from issue

---------

Co-authored-by: Aaryan Khandelwal <aaryankhandu123@gmail.com>
---
 .../core/gantt-chart-view/index.tsx           |  26 ++
 apps/app/components/core/index.ts             |   1 +
 .../components/core/issues-view-filter.tsx    |  10 +
 apps/app/components/core/issues-view.tsx      |  10 +-
 .../cycles/cycles-list-gantt-chart.tsx        |  67 ++++
 apps/app/components/cycles/cycles-view.tsx    | 214 ++++++------
 apps/app/components/cycles/gantt-chart.tsx    |  81 +++++
 apps/app/components/cycles/index.ts           |   2 +
 .../components/gantt-chart/blocks/index.tsx   |  81 +++++
 .../components/gantt-chart/chart/bi-week.tsx  |  56 +++
 apps/app/components/gantt-chart/chart/day.tsx |  56 +++
 .../components/gantt-chart/chart/hours.tsx    |  56 +++
 .../components/gantt-chart/chart/index.tsx    | 322 ++++++++++++++++++
 .../components/gantt-chart/chart/month.tsx    |  56 +++
 .../components/gantt-chart/chart/quarter.tsx  |  50 +++
 .../app/components/gantt-chart/chart/week.tsx |  56 +++
 .../app/components/gantt-chart/chart/year.tsx |  50 +++
 .../components/gantt-chart/contexts/index.tsx |  48 +++
 apps/app/components/gantt-chart/data/index.ts | 144 ++++++++
 .../gantt-chart/helpers/draggable.tsx         | 138 ++++++++
 .../components/gantt-chart/hooks/index.tsx    |  15 +
 apps/app/components/gantt-chart/index.ts      |   1 +
 apps/app/components/gantt-chart/root.tsx      |  34 ++
 .../app/components/gantt-chart/types/index.ts |  43 +++
 .../gantt-chart/views/bi-week-view.ts         | 163 +++++++++
 .../components/gantt-chart/views/day-view.ts  | 186 ++++++++++
 .../components/gantt-chart/views/helpers.ts   |  93 +++++
 .../gantt-chart/views/hours-view.ts           | 186 ++++++++++
 .../app/components/gantt-chart/views/index.ts |   7 +
 .../gantt-chart/views/month-view.ts           | 199 +++++++++++
 .../gantt-chart/views/quater-view.ts          | 117 +++++++
 .../components/gantt-chart/views/week-view.ts | 163 +++++++++
 .../components/gantt-chart/views/year-view.ts | 116 +++++++
 apps/app/components/issues/gantt-chart.tsx    |  81 +++++
 apps/app/components/issues/modal.tsx          |  12 +
 apps/app/components/modules/gantt-chart.tsx   |  81 +++++
 apps/app/components/modules/index.ts          |   2 +
 .../modules/modules-list-gantt-chart.tsx      |  74 ++++
 apps/app/components/views/gantt-chart.tsx     |  81 +++++
 apps/app/components/views/index.ts            |   3 +-
 .../hooks/gantt-chart/cycle-issues-view.tsx   |  32 ++
 apps/app/hooks/gantt-chart/issue-view.tsx     |  23 ++
 .../hooks/gantt-chart/module-issues-view.tsx  |  32 ++
 .../hooks/gantt-chart/view-issues-view.tsx    |  37 ++
 apps/app/layouts/app-layout/app-header.tsx    |   2 +-
 .../projects/[projectId]/cycles/index.tsx     |  19 +-
 .../projects/[projectId]/modules/index.tsx    |  55 ++-
 apps/app/styles/globals.css                   |   8 +
 apps/app/types/issues.d.ts                    |   2 +-
 49 files changed, 3251 insertions(+), 140 deletions(-)
 create mode 100644 apps/app/components/core/gantt-chart-view/index.tsx
 create mode 100644 apps/app/components/cycles/cycles-list-gantt-chart.tsx
 create mode 100644 apps/app/components/cycles/gantt-chart.tsx
 create mode 100644 apps/app/components/gantt-chart/blocks/index.tsx
 create mode 100644 apps/app/components/gantt-chart/chart/bi-week.tsx
 create mode 100644 apps/app/components/gantt-chart/chart/day.tsx
 create mode 100644 apps/app/components/gantt-chart/chart/hours.tsx
 create mode 100644 apps/app/components/gantt-chart/chart/index.tsx
 create mode 100644 apps/app/components/gantt-chart/chart/month.tsx
 create mode 100644 apps/app/components/gantt-chart/chart/quarter.tsx
 create mode 100644 apps/app/components/gantt-chart/chart/week.tsx
 create mode 100644 apps/app/components/gantt-chart/chart/year.tsx
 create mode 100644 apps/app/components/gantt-chart/contexts/index.tsx
 create mode 100644 apps/app/components/gantt-chart/data/index.ts
 create mode 100644 apps/app/components/gantt-chart/helpers/draggable.tsx
 create mode 100644 apps/app/components/gantt-chart/hooks/index.tsx
 create mode 100644 apps/app/components/gantt-chart/index.ts
 create mode 100644 apps/app/components/gantt-chart/root.tsx
 create mode 100644 apps/app/components/gantt-chart/types/index.ts
 create mode 100644 apps/app/components/gantt-chart/views/bi-week-view.ts
 create mode 100644 apps/app/components/gantt-chart/views/day-view.ts
 create mode 100644 apps/app/components/gantt-chart/views/helpers.ts
 create mode 100644 apps/app/components/gantt-chart/views/hours-view.ts
 create mode 100644 apps/app/components/gantt-chart/views/index.ts
 create mode 100644 apps/app/components/gantt-chart/views/month-view.ts
 create mode 100644 apps/app/components/gantt-chart/views/quater-view.ts
 create mode 100644 apps/app/components/gantt-chart/views/week-view.ts
 create mode 100644 apps/app/components/gantt-chart/views/year-view.ts
 create mode 100644 apps/app/components/issues/gantt-chart.tsx
 create mode 100644 apps/app/components/modules/gantt-chart.tsx
 create mode 100644 apps/app/components/modules/modules-list-gantt-chart.tsx
 create mode 100644 apps/app/components/views/gantt-chart.tsx
 create mode 100644 apps/app/hooks/gantt-chart/cycle-issues-view.tsx
 create mode 100644 apps/app/hooks/gantt-chart/issue-view.tsx
 create mode 100644 apps/app/hooks/gantt-chart/module-issues-view.tsx
 create mode 100644 apps/app/hooks/gantt-chart/view-issues-view.tsx

diff --git a/apps/app/components/core/gantt-chart-view/index.tsx b/apps/app/components/core/gantt-chart-view/index.tsx
new file mode 100644
index 000000000..ca07e3d7a
--- /dev/null
+++ b/apps/app/components/core/gantt-chart-view/index.tsx
@@ -0,0 +1,26 @@
+import { useRouter } from "next/router";
+
+// components
+import { CycleIssuesGanttChartView } from "components/cycles";
+import { IssueGanttChartView } from "components/issues/gantt-chart";
+import { ModuleIssuesGanttChartView } from "components/modules";
+import { ViewIssuesGanttChartView } from "components/views";
+
+export const GanttChartView = () => {
+  const router = useRouter();
+  const { cycleId, moduleId, viewId } = router.query;
+
+  return (
+    <>
+      {cycleId ? (
+        <CycleIssuesGanttChartView />
+      ) : moduleId ? (
+        <ModuleIssuesGanttChartView />
+      ) : viewId ? (
+        <ViewIssuesGanttChartView />
+      ) : (
+        <IssueGanttChartView />
+      )}
+    </>
+  );
+};
diff --git a/apps/app/components/core/index.ts b/apps/app/components/core/index.ts
index 01d87495f..e3e187d60 100644
--- a/apps/app/components/core/index.ts
+++ b/apps/app/components/core/index.ts
@@ -1,5 +1,6 @@
 export * from "./board-view";
 export * from "./calendar-view";
+export * from "./gantt-chart-view";
 export * from "./list-view";
 export * from "./sidebar";
 export * from "./bulk-delete-issues-modal";
diff --git a/apps/app/components/core/issues-view-filter.tsx b/apps/app/components/core/issues-view-filter.tsx
index 5910d85fa..64c6f8cfe 100644
--- a/apps/app/components/core/issues-view-filter.tsx
+++ b/apps/app/components/core/issues-view-filter.tsx
@@ -17,6 +17,7 @@ import {
   ListBulletIcon,
   Squares2X2Icon,
   CalendarDaysIcon,
+  ChartBarIcon,
 } from "@heroicons/react/24/outline";
 // helpers
 import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
@@ -82,6 +83,15 @@ export const IssuesFilterView: React.FC = () => {
         >
           <CalendarDaysIcon className="h-4 w-4 text-brand-secondary" />
         </button>
+        <button
+          type="button"
+          className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-2 ${
+            issueView === "gantt_chart" ? "bg-brand-surface-2" : ""
+          }`}
+          onClick={() => setIssueView("gantt_chart")}
+        >
+          <ChartBarIcon className="h-4 w-4 text-brand-secondary" />
+        </button>
       </div>
       <SelectFilters
         filters={filters}
diff --git a/apps/app/components/core/issues-view.tsx b/apps/app/components/core/issues-view.tsx
index 0afd54237..cc0672843 100644
--- a/apps/app/components/core/issues-view.tsx
+++ b/apps/app/components/core/issues-view.tsx
@@ -18,10 +18,11 @@ import { useProjectMyMembership } from "contexts/project-member.context";
 import useToast from "hooks/use-toast";
 import useIssuesView from "hooks/use-issues-view";
 // components
-import { AllLists, AllBoards, FilterList, CalendarView } from "components/core";
+import { AllLists, AllBoards, FilterList, CalendarView, GanttChartView } from "components/core";
 import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
 import { CreateUpdateViewModal } from "components/views";
-import { TransferIssues, TransferIssuesModal } from "components/cycles";
+import { CycleIssuesGanttChartView, TransferIssues, TransferIssuesModal } from "components/cycles";
+import { IssueGanttChartView } from "components/issues/gantt-chart";
 // ui
 import { EmptySpace, EmptySpaceItem, EmptyState, PrimaryButton, Spinner } from "components/ui";
 // icons
@@ -47,6 +48,7 @@ import {
   PROJECT_ISSUES_LIST_WITH_PARAMS,
   STATES_LIST,
 } from "constants/fetch-keys";
+import { ModuleIssuesGanttChartView } from "components/modules";
 
 type Props = {
   type?: "issue" | "cycle" | "module";
@@ -528,7 +530,7 @@ export const IssuesView: React.FC<Props> = ({
                   isCompleted={isCompleted}
                   userAuth={memberRole}
                 />
-              ) : (
+              ) : issueView === "calendar" ? (
                 <CalendarView
                   handleEditIssue={handleEditIssue}
                   handleDeleteIssue={handleDeleteIssue}
@@ -536,6 +538,8 @@ export const IssuesView: React.FC<Props> = ({
                   isCompleted={isCompleted}
                   userAuth={memberRole}
                 />
+              ) : (
+                issueView === "gantt_chart" && <GanttChartView />
               )}
             </>
           ) : type === "issue" ? (
diff --git a/apps/app/components/cycles/cycles-list-gantt-chart.tsx b/apps/app/components/cycles/cycles-list-gantt-chart.tsx
new file mode 100644
index 000000000..2b783f4e2
--- /dev/null
+++ b/apps/app/components/cycles/cycles-list-gantt-chart.tsx
@@ -0,0 +1,67 @@
+import { FC } from "react";
+
+// components
+import { GanttChartRoot } from "components/gantt-chart";
+// types
+import { ICycle } from "types";
+
+type Props = {
+  cycles: ICycle[];
+};
+
+export const CyclesListGanttChartView: FC<Props> = ({ cycles }) => {
+  // rendering issues on gantt sidebar
+  const GanttSidebarBlockView = ({ data }: any) => (
+    <div className="relative flex w-full h-full items-center p-1 overflow-hidden gap-1">
+      <div
+        className="rounded-sm flex-shrink-0 w-[10px] h-[10px] flex justify-center items-center"
+        style={{ backgroundColor: "#858e96" }}
+      />
+      <div className="text-brand-base text-sm">{data?.name}</div>
+    </div>
+  );
+
+  // rendering issues on gantt card
+  const GanttBlockView = ({ data }: { data: ICycle }) => (
+    <div className="relative flex w-full h-full overflow-hidden">
+      <div className="flex-shrink-0 w-[4px] h-auto" style={{ backgroundColor: "#858e96" }} />
+      <div className="inline-block text-brand-base text-sm whitespace-nowrap py-[4px] px-1.5">
+        {data?.name}
+      </div>
+    </div>
+  );
+
+  // handle gantt issue start date and target date
+  const handleUpdateDates = async (data: any) => {
+    const payload = {
+      id: data?.id,
+      start_date: data?.start_date,
+      target_date: data?.target_date,
+    };
+  };
+
+  const blockFormat = (blocks: any) =>
+    blocks && blocks.length > 0
+      ? blocks.map((_block: any) => {
+          if (_block?.start_date && _block.target_date) console.log("_block", _block);
+          return {
+            start_date: new Date(_block.created_at),
+            target_date: new Date(_block.updated_at),
+            data: _block,
+          };
+        })
+      : [];
+
+  return (
+    <div className="w-full h-full overflow-y-auto">
+      <GanttChartRoot
+        title={"Cycles"}
+        loaderTitle="Cycles"
+        blocks={cycles ? blockFormat(cycles) : null}
+        blockUpdateHandler={handleUpdateDates}
+        sidebarBlockRender={(data: any) => <GanttSidebarBlockView data={data} />}
+        blockRender={(data: any) => <GanttBlockView data={data} />}
+      />
+    </div>
+  );
+};
diff --git a/apps/app/components/cycles/cycles-view.tsx b/apps/app/components/cycles/cycles-view.tsx
index da5ba6aee..9f7ad3922 100644
--- a/apps/app/components/cycles/cycles-view.tsx
+++ b/apps/app/components/cycles/cycles-view.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import dynamic from "next/dynamic";
 // headless ui
 import { Tab } from "@headlessui/react";
@@ -10,7 +10,7 @@ import {
   CompletedCyclesListProps,
   AllCyclesBoard,
   AllCyclesList,
-  CompletedCycles,
+  CyclesListGanttChartView,
 } from "components/cycles";
 // ui
 import { EmptyState, Loader } from "components/ui";
@@ -41,7 +41,7 @@ export const CyclesView: React.FC<Props> = ({
   draftCycles,
 }) => {
   const { storedValue: cycleTab, setValue: setCycleTab } = useLocalStorage("cycleTab", "All");
-  const { storedValue: cycleView, setValue: setCycleView } = useLocalStorage("cycleView", "list");
+  const { storedValue: cyclesView, setValue: setCyclesView } = useLocalStorage("cycleView", "list");
 
   const currentTabValue = (tab: string | null) => {
     switch (tab) {
@@ -73,8 +73,41 @@ export const CyclesView: React.FC<Props> = ({
   );
 
   return (
-    <div>
+    <>
+      <div className="flex gap-4 justify-between">
+        <h3 className="text-2xl font-semibold text-brand-base">Cycles</h3>
+        <div className="flex items-center gap-x-1">
+          <button
+            type="button"
+            className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-2 ${
+              cyclesView === "list" ? "bg-brand-surface-2" : ""
+            }`}
+            onClick={() => setCyclesView("list")}
+          >
+            <ListBulletIcon className="h-4 w-4 text-brand-secondary" />
+          </button>
+          <button
+            type="button"
+            className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-2 ${
+              cyclesView === "grid" ? "bg-brand-surface-2" : ""
+            }`}
+            onClick={() => setCyclesView("grid")}
+          >
+            <Squares2X2Icon className="h-4 w-4 text-brand-secondary" />
+          </button>
+          <button
+            type="button"
+            className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-2 ${
+              cyclesView === "gantt_chart" ? "bg-brand-surface-2" : ""
+            }`}
+            onClick={() => setCyclesView("gantt_chart")}
+          >
+            <ChartBarIcon className="h-4 w-4 text-brand-secondary" />
+          </button>
+        </div>
+      </div>
       <Tab.Group
+        as={React.Fragment}
         defaultIndex={currentTabValue(cycleTab)}
         onChange={(i) => {
           switch (i) {
@@ -94,59 +127,32 @@ export const CyclesView: React.FC<Props> = ({
           }
         }}
       >
-        {" "}
         <div className="flex justify-between">
           <Tab.List as="div" className="flex flex-wrap items-center justify-start gap-4 text-base">
-            {["All", "Active", "Upcoming", "Completed", "Drafts"].map((tab, index) => (
-              <Tab
-                key={index}
-                className={({ selected }) =>
-                  `rounded-3xl border px-6 py-1 outline-none ${
-                    selected
-                      ? "border-brand-accent bg-brand-accent text-white font-medium"
-                      : "border-brand-base bg-brand-base hover:bg-brand-surface-2"
-                  }`
-                }
-              >
-                {tab}
-              </Tab>
-            ))}
+            {["All", "Active", "Upcoming", "Completed", "Drafts"].map((tab, index) => {
+              if (cyclesView === "gantt_chart" && (tab === "Active" || tab === "Drafts"))
+                return null;
+
+              return (
+                <Tab
+                  key={index}
+                  className={({ selected }) =>
+                    `rounded-3xl border px-6 py-1 outline-none ${
+                      selected
+                        ? "border-brand-accent bg-brand-accent text-white font-medium"
+                        : "border-brand-base bg-brand-base hover:bg-brand-surface-2"
+                    }`
+                  }
+                >
+                  {tab}
+                </Tab>
+              );
+            })}
           </Tab.List>
-          {cycleTab !== "Active" && (
-            <div className="flex items-center gap-x-1">
-              <button
-                type="button"
-                className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 ${
-                  cycleView === "list" ? "bg-brand-surface-2" : ""
-                } hover:bg-brand-surface-2`}
-                onClick={() => setCycleView("list")}
-              >
-                <ListBulletIcon className="h-4 w-4 text-brand-secondary" />
-              </button>
-              <button
-                type="button"
-                className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 ${
-                  cycleView === "board" ? "bg-brand-surface-2" : ""
-                } hover:bg-brand-surface-2`}
-                onClick={() => setCycleView("board")}
-              >
-                <Squares2X2Icon className="h-4 w-4 text-brand-secondary" />
-              </button>
-              <button
-                type="button"
-                className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 ${
-                  cycleView === "gantt" ? "bg-brand-surface-2" : ""
-                } hover:bg-brand-surface-2`}
-                onClick={() => setCycleView("gantt")}
-              >
-                <ChartBarIcon className="h-4 w-4 text-brand-secondary" />
-              </button>
-            </div>
-          )}
         </div>
-        <Tab.Panels>
-          <Tab.Panel as="div" className="mt-7 space-y-5">
-            {cycleView === "list" && (
+        <Tab.Panels as={React.Fragment}>
+          <Tab.Panel as="div" className="mt-7 space-y-5 h-full overflow-y-auto">
+            {cyclesView === "list" && (
               <AllCyclesList
                 cycles={cyclesCompleteList}
                 setCreateUpdateCycleModal={setCreateUpdateCycleModal}
@@ -154,7 +160,7 @@ export const CyclesView: React.FC<Props> = ({
                 type="current"
               />
             )}
-            {cycleView === "board" && (
+            {cyclesView === "grid" && (
               <AllCyclesBoard
                 cycles={cyclesCompleteList}
                 setCreateUpdateCycleModal={setCreateUpdateCycleModal}
@@ -162,29 +168,26 @@ export const CyclesView: React.FC<Props> = ({
                 type="current"
               />
             )}
-            {cycleView === "gantt" && (
-              <EmptyState
-                type="cycle"
-                title="Create New Cycle"
-                description="Sprint more effectively with Cycles by confining your project to a fixed amount of time. Create new cycle now."
-                imgURL={emptyCycle}
-              />
+            {cyclesView === "gantt_chart" && (
+              <CyclesListGanttChartView cycles={cyclesCompleteList ?? []} />
             )}
           </Tab.Panel>
-          <Tab.Panel as="div" className="mt-7 space-y-5">
-            {currentAndUpcomingCycles?.current_cycle?.[0] ? (
-              <ActiveCycleDetails cycle={currentAndUpcomingCycles?.current_cycle?.[0]} />
-            ) : (
-              <EmptyState
-                type="cycle"
-                title="Create New Cycle"
-                description="Sprint more effectively with Cycles by confining your project to a fixed amount of time. Create new cycle now."
-                imgURL={emptyCycle}
-              />
-            )}
-          </Tab.Panel>
-          <Tab.Panel as="div" className="mt-7 space-y-5">
-            {cycleView === "list" && (
+          {cyclesView !== "gantt_chart" && (
+            <Tab.Panel as="div" className="mt-7 space-y-5">
+              {currentAndUpcomingCycles?.current_cycle?.[0] ? (
+                <ActiveCycleDetails cycle={currentAndUpcomingCycles?.current_cycle?.[0]} />
+              ) : (
+                <EmptyState
+                  type="cycle"
+                  title="Create New Cycle"
+                  description="Sprint more effectively with Cycles by confining your project to a fixed amount of time. Create new cycle now."
+                  imgURL={emptyCycle}
+                />
+              )}
+            </Tab.Panel>
+          )}
+          <Tab.Panel as="div" className="mt-7 space-y-5 h-full overflow-y-auto">
+            {cyclesView === "list" && (
               <AllCyclesList
                 cycles={currentAndUpcomingCycles?.upcoming_cycle}
                 setCreateUpdateCycleModal={setCreateUpdateCycleModal}
@@ -192,7 +195,7 @@ export const CyclesView: React.FC<Props> = ({
                 type="upcoming"
               />
             )}
-            {cycleView === "board" && (
+            {cyclesView === "board" && (
               <AllCyclesBoard
                 cycles={currentAndUpcomingCycles?.upcoming_cycle}
                 setCreateUpdateCycleModal={setCreateUpdateCycleModal}
@@ -200,50 +203,39 @@ export const CyclesView: React.FC<Props> = ({
                 type="upcoming"
               />
             )}
-            {cycleView === "gantt" && (
-              <EmptyState
-                type="cycle"
-                title="Create New Cycle"
-                description="Sprint more effectively with Cycles by confining your project to a fixed amount of time. Create new cycle now."
-                imgURL={emptyCycle}
-              />
+            {cyclesView === "gantt_chart" && (
+              <CyclesListGanttChartView cycles={currentAndUpcomingCycles?.upcoming_cycle ?? []} />
             )}
           </Tab.Panel>
           <Tab.Panel as="div" className="mt-7 space-y-5">
             <CompletedCycles
-              cycleView={cycleView ?? "list"}
+              cycleView={cyclesView ?? "list"}
               setCreateUpdateCycleModal={setCreateUpdateCycleModal}
               setSelectedCycle={setSelectedCycle}
             />
           </Tab.Panel>
-          <Tab.Panel as="div" className="mt-7 space-y-5">
-            {cycleView === "list" && (
-              <AllCyclesList
-                cycles={draftCycles?.draft_cycles}
-                setCreateUpdateCycleModal={setCreateUpdateCycleModal}
-                setSelectedCycle={setSelectedCycle}
-                type="draft"
-              />
-            )}
-            {cycleView === "board" && (
-              <AllCyclesBoard
-                cycles={draftCycles?.draft_cycles}
-                setCreateUpdateCycleModal={setCreateUpdateCycleModal}
-                setSelectedCycle={setSelectedCycle}
-                type="draft"
-              />
-            )}
-            {cycleView === "gantt" && (
-              <EmptyState
-                type="cycle"
-                title="Create New Cycle"
-                description="Sprint more effectively with Cycles by confining your project to a fixed amount of time. Create new cycle now."
-                imgURL={emptyCycle}
-              />
-            )}
-          </Tab.Panel>
+          {cyclesView !== "gantt_chart" && (
+            <Tab.Panel as="div" className="mt-7 space-y-5">
+              {cyclesView === "list" && (
+                <AllCyclesList
+                  cycles={draftCycles?.draft_cycles}
+                  setCreateUpdateCycleModal={setCreateUpdateCycleModal}
+                  setSelectedCycle={setSelectedCycle}
+                  type="draft"
+                />
+              )}
+              {cyclesView === "board" && (
+                <AllCyclesBoard
+                  cycles={draftCycles?.draft_cycles}
+                  setCreateUpdateCycleModal={setCreateUpdateCycleModal}
+                  setSelectedCycle={setSelectedCycle}
+                  type="draft"
+                />
+              )}
+            </Tab.Panel>
+          )}
         </Tab.Panels>
       </Tab.Group>
-    </div>
+    </>
   );
 };
diff --git a/apps/app/components/cycles/gantt-chart.tsx b/apps/app/components/cycles/gantt-chart.tsx
new file mode 100644
index 000000000..d38ad727b
--- /dev/null
+++ b/apps/app/components/cycles/gantt-chart.tsx
@@ -0,0 +1,81 @@
+import { FC } from "react";
+
+import { useRouter } from "next/router";
+
+// components
+import { GanttChartRoot } from "components/gantt-chart";
+// hooks
+import useGanttChartCycleIssues from "hooks/gantt-chart/cycle-issues-view";
+
+type Props = {};
+
+export const CycleIssuesGanttChartView: FC<Props> = ({}) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId, cycleId } = router.query;
+
+  const { ganttIssues, mutateGanttIssues } = useGanttChartCycleIssues(
+    workspaceSlug as string,
+    projectId as string,
+    cycleId as string
+  );
+
+  // rendering issues on gantt sidebar
+  const GanttSidebarBlockView = ({ data }: any) => (
+    <div className="relative flex w-full h-full items-center p-1 overflow-hidden gap-1">
+      <div
+        className="rounded-sm flex-shrink-0 w-[10px] h-[10px] flex justify-center items-center"
+        style={{ backgroundColor: data?.state_detail?.color || "#858e96" }}
+      />
+      <div className="text-brand-base text-sm">{data?.name}</div>
+    </div>
+  );
+
+  // rendering issues on gantt card
+  const GanttBlockView = ({ data }: any) => (
+    <div className="relative flex w-full h-full overflow-hidden">
+      <div
+        className="flex-shrink-0 w-[4px] h-auto"
+        style={{ backgroundColor: data?.state_detail?.color || "#858e96" }}
+      />
+      <div className="inline-block text-brand-base text-sm whitespace-nowrap py-[4px] px-1.5">
+        {data?.name}
+      </div>
+    </div>
+  );
+
+  // handle gantt issue start date and target date
+  const handleUpdateDates = async (data: any) => {
+    const payload = {
+      id: data?.id,
+      start_date: data?.start_date,
+      target_date: data?.target_date,
+    };
+
+    console.log("payload", payload);
+  };
+
+  const blockFormat = (blocks: any) =>
+    blocks && blocks.length > 0
+      ? blocks.map((_block: any) => {
+          if (_block?.start_date && _block.target_date) console.log("_block", _block);
+          return {
+            start_date: new Date(_block.created_at),
+            target_date: new Date(_block.updated_at),
+            data: _block,
+          };
+        })
+      : [];
+
+  return (
+    <div className="w-full h-full p-3">
+      <GanttChartRoot
+        title="Cycles"
+        loaderTitle="Cycles"
+        blocks={ganttIssues ? blockFormat(ganttIssues) : null}
+        blockUpdateHandler={handleUpdateDates}
+        sidebarBlockRender={(data: any) => <GanttSidebarBlockView data={data} />}
+        blockRender={(data: any) => <GanttBlockView data={data} />}
+      />
+    </div>
+  );
+};
diff --git a/apps/app/components/cycles/index.ts b/apps/app/components/cycles/index.ts
index 73fa92d88..3151529c5 100644
--- a/apps/app/components/cycles/index.ts
+++ b/apps/app/components/cycles/index.ts
@@ -1,10 +1,12 @@
 export * from "./active-cycle-details";
 export * from "./cycles-view";
 export * from "./completed-cycles";
+export * from "./cycles-list-gantt-chart";
 export * from "./all-cycles-board";
 export * from "./all-cycles-list";
 export * from "./delete-cycle-modal";
 export * from "./form";
+export * from "./gantt-chart";
 export * from "./modal";
 export * from "./select";
 export * from "./sidebar";
diff --git a/apps/app/components/gantt-chart/blocks/index.tsx b/apps/app/components/gantt-chart/blocks/index.tsx
new file mode 100644
index 000000000..24ee4d39e
--- /dev/null
+++ b/apps/app/components/gantt-chart/blocks/index.tsx
@@ -0,0 +1,81 @@
+import { FC, useEffect, useState } from "react";
+// helpers
+import { ChartDraggable } from "../helpers/draggable";
+// data
+import { datePreview } from "../data";
+
+export const GanttChartBlocks: FC<{
+  itemsContainerWidth: number;
+  blocks: null | any[];
+  sidebarBlockRender: FC;
+  blockRender: FC;
+}> = ({ itemsContainerWidth, blocks, sidebarBlockRender, blockRender }) => {
+  const handleChartBlockPosition = (block: any) => {
+    // setChartBlocks((prevData: any) =>
+    //   prevData.map((_block: any) => (_block?.data?.id == block?.data?.id ? block : _block))
+    // );
+  };
+
+  return (
+    <div
+      className="relative z-10 mt-[58px] h-full w-[4000px] divide-x divide-gray-300 overflow-hidden overflow-y-auto bg-[#999] bg-opacity-5"
+      style={{ width: `${itemsContainerWidth}px` }}
+    >
+      <div className="w-full divide-y divide-brand-base">
+        {blocks &&
+          blocks.length > 0 &&
+          blocks.map((block: any, _idx: number) => (
+            <>
+              {block.start_date && block.target_date && (
+                <ChartDraggable
+                  className="relative flex h-[36.5px] items-center"
+                  key={`blocks-${_idx}`}
+                  block={block}
+                  handleBlock={handleChartBlockPosition}
+                >
+                  <div
+                    className="relative group inline-flex cursor-pointer items-center font-medium transition-all"
+                    style={{ marginLeft: `${block?.position?.marginLeft}px` }}
+                  >
+                    <div className="flex-shrink-0 relative w-0 h-0 flex items-center invisible group-hover:visible whitespace-nowrap">
+                      <div className="absolute right-0 mr-[5px] rounded-sm bg-brand-surface-1 px-2 py-0.5 text-xs font-medium">
+                        {block?.start_date ? datePreview(block?.start_date, true) : "-"}
+                      </div>
+                    </div>
+
+                    <div
+                      className="rounded-sm shadow-sm bg-brand-base overflow-hidden relative flex items-center"
+                      style={{
+                        width: `${block?.position?.width}px`,
+                      }}
+                    >
+                      <div className="w-full h-full relative overflow-hidden">
+                        {blockRender({ ...block?.data })}
+                      </div>
+                    </div>
+
+                    <div className="flex-shrink-0 relative w-0 h-0 flex items-center invisible group-hover:visible whitespace-nowrap">
+                      <div className="absolute left-0 ml-[5px] mr-[5px] rounded-sm bg-brand-surface-1 px-2 py-0.5 text-xs font-medium">
+                        {block?.target_date ? datePreview(block?.target_date, true) : "-"}
+                      </div>
+                    </div>
+                  </div>
+                </ChartDraggable>
+              )}
+            </>
+          ))}
+      </div>
+
+      {/* sidebar */}
+      {/* <div className="fixed top-0 bottom-0 w-[300px] flex-shrink-0 divide-y divide-brand-base border-r border-brand-base overflow-y-auto">
+        {blocks &&
+          blocks.length > 0 &&
+          blocks.map((block: any, _idx: number) => (
+            <div className="relative h-[36.5px] bg-brand-base" key={`sidebar-blocks-${_idx}`}>
+              {sidebarBlockRender(block?.data)}
+            </div>
+          ))}
+      </div> */}
+    </div>
+  );
+};
diff --git a/apps/app/components/gantt-chart/chart/bi-week.tsx b/apps/app/components/gantt-chart/chart/bi-week.tsx
new file mode 100644
index 000000000..489bc3eb6
--- /dev/null
+++ b/apps/app/components/gantt-chart/chart/bi-week.tsx
@@ -0,0 +1,56 @@
+import { FC } from "react";
+// context
+import { useChart } from "../hooks";
+
+export const BiWeekChartView: FC<any> = () => {
+  const { currentView, currentViewData, renderView, dispatch, allViews } = useChart();
+
+  return (
+    <>
+      <div className="absolute flex h-full flex-grow divide-x divide-brand-base">
+        {renderView &&
+          renderView.length > 0 &&
+          renderView.map((_itemRoot: any, _idxRoot: any) => (
+            <div key={`title-${_idxRoot}`} className="relative flex flex-col">
+              <div className="relative border-b border-brand-base">
+                <div className="sticky left-0 inline-flex whitespace-nowrap px-2 py-1 text-sm font-medium capitalize">
+                  {_itemRoot?.title}
+                </div>
+              </div>
+
+              <div className="flex h-full w-full divide-x divide-brand-base">
+                {_itemRoot.children &&
+                  _itemRoot.children.length > 0 &&
+                  _itemRoot.children.map((_item: any, _idx: any) => (
+                    <div
+                      key={`sub-title-${_idxRoot}-${_idx}`}
+                      className="relative flex h-full flex-col overflow-hidden whitespace-nowrap"
+                      style={{ width: `${currentViewData.data.width}px` }}
+                    >
+                      <div
+                        className={`flex-shrink-0 border-b py-1 text-center text-sm capitalize font-medium ${
+                          _item?.today ? `text-red-500 border-red-500` : `border-brand-base`
+                        }`}
+                      >
+                        <div>{_item.title}</div>
+                      </div>
+                      <div
+                        className={`relative h-full w-full flex-1 flex justify-center ${
+                          ["sat", "sun"].includes(_item?.dayData?.shortTitle || "")
+                            ? `bg-brand-surface-2`
+                            : ``
+                        }`}
+                      >
+                        {_item?.today && (
+                          <div className="absolute top-0 bottom-0 border border-red-500"> </div>
+                        )}
+                      </div>
+                    </div>
+                  ))}
+              </div>
+            </div>
+          ))}
+      </div>
+    </>
+  );
+};
diff --git a/apps/app/components/gantt-chart/chart/day.tsx b/apps/app/components/gantt-chart/chart/day.tsx
new file mode 100644
index 000000000..1ad1649b6
--- /dev/null
+++ b/apps/app/components/gantt-chart/chart/day.tsx
@@ -0,0 +1,56 @@
+import { FC } from "react";
+// context
+import { useChart } from "../hooks";
+
+export const DayChartView: FC<any> = () => {
+  const { currentView, currentViewData, renderView, dispatch, allViews } = useChart();
+
+  return (
+    <>
+      <div className="absolute flex h-full flex-grow divide-x divide-brand-base">
+        {renderView &&
+          renderView.length > 0 &&
+          renderView.map((_itemRoot: any, _idxRoot: any) => (
+            <div key={`title-${_idxRoot}`} className="relative flex flex-col">
+              <div className="relative border-b border-brand-base">
+                <div className="sticky left-0 inline-flex whitespace-nowrap px-2 py-1 text-sm font-medium capitalize">
+                  {_itemRoot?.title}
+                </div>
+              </div>
+
+              <div className="flex h-full w-full divide-x divide-brand-base">
+                {_itemRoot.children &&
+                  _itemRoot.children.length > 0 &&
+                  _itemRoot.children.map((_item: any, _idx: any) => (
+                    <div
+                      key={`sub-title-${_idxRoot}-${_idx}`}
+                      className="relative flex h-full flex-col overflow-hidden whitespace-nowrap"
+                      style={{ width: `${currentViewData.data.width}px` }}
+                    >
+                      <div
+                        className={`flex-shrink-0 border-b py-1 text-center text-sm capitalize font-medium ${
+                          _item?.today ? `text-red-500 border-red-500` : `border-brand-base`
+                        }`}
+                      >
+                        <div>{_item.title}</div>
+                      </div>
+                      <div
+                        className={`relative h-full w-full flex-1 flex justify-center ${
+                          ["sat", "sun"].includes(_item?.dayData?.shortTitle || "")
+                            ? `bg-gray-100`
+                            : ``
+                        }`}
+                      >
+                        {_item?.today && (
+                          <div className="absolute top-0 bottom-0 border border-red-500"> </div>
+                        )}
+                      </div>
+                    </div>
+                  ))}
+              </div>
+            </div>
+          ))}
+      </div>
+    </>
+  );
+};
diff --git a/apps/app/components/gantt-chart/chart/hours.tsx b/apps/app/components/gantt-chart/chart/hours.tsx
new file mode 100644
index 000000000..02b2d15b1
--- /dev/null
+++ b/apps/app/components/gantt-chart/chart/hours.tsx
@@ -0,0 +1,56 @@
+import { FC } from "react";
+// context
+import { useChart } from "../hooks";
+
+export const HourChartView: FC<any> = () => {
+  const { currentView, currentViewData, renderView, dispatch, allViews } = useChart();
+
+  return (
+    <>
+      <div className="absolute flex h-full flex-grow divide-x divide-brand-base">
+        {renderView &&
+          renderView.length > 0 &&
+          renderView.map((_itemRoot: any, _idxRoot: any) => (
+            <div key={`title-${_idxRoot}`} className="relative flex flex-col">
+              <div className="relative border-b border-brand-base">
+                <div className="sticky left-0 inline-flex whitespace-nowrap px-2 py-1 text-sm font-medium capitalize">
+                  {_itemRoot?.title}
+                </div>
+              </div>
+
+              <div className="flex h-full w-full divide-x divide-brand-base">
+                {_itemRoot.children &&
+                  _itemRoot.children.length > 0 &&
+                  _itemRoot.children.map((_item: any, _idx: any) => (
+                    <div
+                      key={`sub-title-${_idxRoot}-${_idx}`}
+                      className="relative flex h-full flex-col overflow-hidden whitespace-nowrap"
+                      style={{ width: `${currentViewData.data.width}px` }}
+                    >
+                      <div
+                        className={`flex-shrink-0 border-b py-1 text-center text-sm capitalize font-medium ${
+                          _item?.today ? `text-red-500 border-red-500` : `border-brand-base`
+                        }`}
+                      >
+                        <div>{_item.title}</div>
+                      </div>
+                      <div
+                        className={`relative h-full w-full flex-1 flex justify-center ${
+                          ["sat", "sun"].includes(_item?.dayData?.shortTitle || "")
+                            ? `bg-gray-100`
+                            : ``
+                        }`}
+                      >
+                        {_item?.today && (
+                          <div className="absolute top-0 bottom-0 border border-red-500"> </div>
+                        )}
+                      </div>
+                    </div>
+                  ))}
+              </div>
+            </div>
+          ))}
+      </div>
+    </>
+  );
+};
diff --git a/apps/app/components/gantt-chart/chart/index.tsx b/apps/app/components/gantt-chart/chart/index.tsx
new file mode 100644
index 000000000..a1b80ef84
--- /dev/null
+++ b/apps/app/components/gantt-chart/chart/index.tsx
@@ -0,0 +1,322 @@
+import { FC, useEffect, useState } from "react";
+// icons
+import {
+  Bars4Icon,
+  XMarkIcon,
+  ArrowsPointingInIcon,
+  ArrowsPointingOutIcon,
+} from "@heroicons/react/20/solid";
+// components
+import { GanttChartBlocks } from "../blocks";
+// import { HourChartView } from "./hours";
+// import { DayChartView } from "./day";
+// import { WeekChartView } from "./week";
+// import { BiWeekChartView } from "./bi-week";
+import { MonthChartView } from "./month";
+// import { QuarterChartView } from "./quarter";
+// import { YearChartView } from "./year";
+// views
+import {
+  // generateHourChart,
+  // generateDayChart,
+  generateWeekChart,
+  generateBiWeekChart,
+  generateMonthChart,
+  generateQuarterChart,
+  generateYearChart,
+  getNumberOfDaysBetweenTwoDatesInMonth,
+  getNumberOfDaysBetweenTwoDatesInQuarter,
+  getNumberOfDaysBetweenTwoDatesInYear,
+  getMonthChartItemPositionWidthInMonth,
+} from "../views";
+// types
+import { ChartDataType } from "../types";
+// data
+import { datePreview, currentViewDataWithView } from "../data";
+// context
+import { useChart } from "../hooks";
+
+type ChartViewRootProps = {
+  title: null | string;
+  loaderTitle: string;
+  blocks: any;
+  blockUpdateHandler: (data: any) => void;
+  sidebarBlockRender: FC<any>;
+  blockRender: FC<any>;
+};
+
+export const ChartViewRoot: FC<ChartViewRootProps> = ({
+  title,
+  blocks = null,
+  loaderTitle,
+  blockUpdateHandler,
+  sidebarBlockRender,
+  blockRender,
+}) => {
+  const { currentView, currentViewData, renderView, dispatch, allViews } = useChart();
+
+  const [itemsContainerWidth, setItemsContainerWidth] = useState<number>(0);
+  const [fullScreenMode, setFullScreenMode] = useState<boolean>(false);
+  const [blocksSidebarView, setBlocksSidebarView] = useState<boolean>(false);
+
+  // blocks state management starts
+  const [chartBlocks, setChartBlocks] = useState<any[] | null>(null);
+
+  const renderBlockStructure = (view: any, blocks: any) =>
+    blocks && blocks.length > 0
+      ? blocks.map((_block: any) => ({
+          ..._block,
+          position: getMonthChartItemPositionWidthInMonth(view, _block),
+        }))
+      : [];
+
+  useEffect(() => {
+    if (currentViewData && blocks && blocks.length > 0)
+      setChartBlocks(() => renderBlockStructure(currentViewData, blocks));
+  }, [currentViewData, blocks]);
+
+  // blocks state management ends
+
+  const handleChartView = (key: string) => updateCurrentViewRenderPayload(null, key);
+
+  const updateCurrentViewRenderPayload = (side: null | "left" | "right", view: string) => {
+    const selectedCurrentView = view;
+    const selectedCurrentViewData: ChartDataType | undefined =
+      selectedCurrentView && selectedCurrentView === currentViewData?.key
+        ? currentViewData
+        : currentViewDataWithView(view);
+
+    if (selectedCurrentViewData === undefined) return;
+
+    let currentRender: any;
+
+    // if (view === "hours") currentRender = generateHourChart(selectedCurrentViewData, side);
+    // if (view === "day") currentRender = generateDayChart(selectedCurrentViewData, side);
+    // if (view === "week") currentRender = generateWeekChart(selectedCurrentViewData, side);
+    // if (view === "bi_week") currentRender = generateBiWeekChart(selectedCurrentViewData, side);
+    if (selectedCurrentView === "month")
+      currentRender = generateMonthChart(selectedCurrentViewData, side);
+    // if (view === "quarter") currentRender = generateQuarterChart(selectedCurrentViewData, side);
+    // if (selectedCurrentView === "year")
+    //   currentRender = generateYearChart(selectedCurrentViewData, side);
+
+    // updating the prevData, currentData and nextData
+    if (currentRender.payload.length > 0) {
+      if (side === "left") {
+        dispatch({
+          type: "PARTIAL_UPDATE",
+          payload: {
+            currentView: selectedCurrentView,
+            currentViewData: currentRender.state,
+            renderView: [...currentRender.payload, ...renderView],
+          },
+        });
+        updatingCurrentLeftScrollPosition(currentRender.scrollWidth);
+        setItemsContainerWidth(itemsContainerWidth + currentRender.scrollWidth);
+      } else if (side === "right") {
+        dispatch({
+          type: "PARTIAL_UPDATE",
+          payload: {
+            currentView: view,
+            currentViewData: currentRender.state,
+            renderView: [...renderView, ...currentRender.payload],
+          },
+        });
+        setItemsContainerWidth(itemsContainerWidth + currentRender.scrollWidth);
+      } else {
+        dispatch({
+          type: "PARTIAL_UPDATE",
+          payload: {
+            currentView: view,
+            currentViewData: currentRender.state,
+            renderView: [...currentRender.payload],
+          },
+        });
+        setItemsContainerWidth(currentRender.scrollWidth);
+        setTimeout(() => {
+          handleScrollToCurrentSelectedDate(
+            currentRender.state,
+            currentRender.state.data.currentDate
+          );
+        }, 50);
+      }
+    }
+  };
+
+  const handleToday = () => updateCurrentViewRenderPayload(null, currentView);
+
+  // handling the scroll positioning from left and right
+  useEffect(() => {
+    handleToday();
+  }, []);
+
+  const updatingCurrentLeftScrollPosition = (width: number) => {
+    const scrollContainer = document.getElementById("scroll-container") as HTMLElement;
+    scrollContainer.scrollLeft = width + scrollContainer.scrollLeft;
+    setItemsContainerWidth(width + scrollContainer.scrollLeft);
+  };
+
+  const handleScrollToCurrentSelectedDate = (currentState: ChartDataType, date: Date) => {
+    const scrollContainer = document.getElementById("scroll-container") as HTMLElement;
+    const clientVisibleWidth: number = scrollContainer.clientWidth;
+    let scrollWidth: number = 0;
+    let daysDifference: number = 0;
+
+    // if (currentView === "hours")
+    //   daysDifference = getNumberOfDaysBetweenTwoDatesInMonth(currentState.data.startDate, date);
+    // if (currentView === "day")
+    //   daysDifference = getNumberOfDaysBetweenTwoDatesInMonth(currentState.data.startDate, date);
+    // if (currentView === "week")
+    //   daysDifference = getNumberOfDaysBetweenTwoDatesInMonth(currentState.data.startDate, date);
+    // if (currentView === "bi_week")
+    //   daysDifference = getNumberOfDaysBetweenTwoDatesInMonth(currentState.data.startDate, date);
+    if (currentView === "month")
+      daysDifference = getNumberOfDaysBetweenTwoDatesInMonth(currentState.data.startDate, date);
+    // if (currentView === "quarter")
+    //   daysDifference = getNumberOfDaysBetweenTwoDatesInQuarter(currentState.data.startDate, date);
+    // if (currentView === "year")
+    //   daysDifference = getNumberOfDaysBetweenTwoDatesInYear(currentState.data.startDate, date);
+
+    scrollWidth =
+      daysDifference * currentState.data.width - (clientVisibleWidth / 2 - currentState.data.width);
+
+    scrollContainer.scrollLeft = scrollWidth;
+  };
+
+  // handling scroll functionality
+  const onScroll = () => {
+    const scrollContainer = document.getElementById("scroll-container") as HTMLElement;
+
+    const scrollWidth: number = scrollContainer.scrollWidth;
+    const clientVisibleWidth: number = scrollContainer.clientWidth;
+    const currentScrollPosition: number = scrollContainer.scrollLeft;
+
+    const approxRangeLeft: number =
+      scrollWidth >= clientVisibleWidth + 1000 ? 1000 : scrollWidth - clientVisibleWidth;
+    const approxRangeRight: number = scrollWidth - (approxRangeLeft + clientVisibleWidth);
+
+    if (currentScrollPosition >= approxRangeRight)
+      updateCurrentViewRenderPayload("right", currentView);
+    if (currentScrollPosition <= approxRangeLeft)
+      updateCurrentViewRenderPayload("left", currentView);
+  };
+
+  useEffect(() => {
+    const scrollContainer = document.getElementById("scroll-container") as HTMLElement;
+
+    scrollContainer.addEventListener("scroll", onScroll);
+    return () => {
+      scrollContainer.removeEventListener("scroll", onScroll);
+    };
+  }, [renderView]);
+
+  return (
+    <div
+      className={`${
+        fullScreenMode ? `fixed top-0 bottom-0 left-0 right-0 z-[999999] bg-brand-base` : `relative`
+      } flex h-full flex-col rounded-sm border border-brand-base select-none`}
+    >
+      {/* chart title */}
+      <div className="flex w-full flex-shrink-0 flex-wrap items-center gap-5 gap-y-3 whitespace-nowrap p-2 border-b border-brand-base">
+        {title && (
+          <div className="text-lg font-medium flex gap-2 items-center">
+            <div>{title}</div>
+            <div className="text-xs rounded-full px-2 py-1 font-bold border border-brand-accent/75 bg-brand-accent/5 text-brand-base">
+              Gantt View Beta
+            </div>
+          </div>
+        )}
+        {blocks === null ? (
+          <div className="text-sm font-medium ml-auto">Loading...</div>
+        ) : (
+          <div className="text-sm font-medium ml-auto">
+            {blocks.length} {loaderTitle}
+          </div>
+        )}
+      </div>
+
+      {/* chart header */}
+      <div className="flex w-full flex-shrink-0 flex-wrap items-center gap-5 gap-y-3 whitespace-nowrap p-2">
+        {/* <div
+          className="transition-all border border-brand-base w-[30px] h-[30px] flex justify-center items-center cursor-pointer rounded-sm hover:bg-brand-surface-2"
+          onClick={() => setBlocksSidebarView(() => !blocksSidebarView)}
+        >
+          {blocksSidebarView ? (
+            <XMarkIcon className="h-5 w-5" />
+          ) : (
+            <Bars4Icon className="h-4 w-4" />
+          )}
+        </div> */}
+
+        <div className="mr-auto text-sm font-medium">
+          {`${datePreview(currentViewData?.data?.startDate)} - ${datePreview(
+            currentViewData?.data?.endDate
+          )}`}
+        </div>
+
+        <div className="flex flex-wrap items-center gap-2">
+          {allViews &&
+            allViews.length > 0 &&
+            allViews.map((_chatView: any, _idx: any) => (
+              <div
+                key={_chatView?.key}
+                className={`cursor-pointer rounded-sm border border-brand-base p-1 px-2 text-sm font-medium ${
+                  currentView === _chatView?.key ? `bg-brand-surface-2` : `hover:bg-brand-surface-1`
+                }`}
+                onClick={() => handleChartView(_chatView?.key)}
+              >
+                {_chatView?.title}
+              </div>
+            ))}
+        </div>
+
+        <div className="flex items-center gap-1">
+          <div
+            className={`cursor-pointer rounded-sm border border-brand-base p-1 px-2 text-sm font-medium hover:bg-brand-surface-2`}
+            onClick={handleToday}
+          >
+            Today
+          </div>
+        </div>
+
+        <div
+          className="transition-all border border-brand-base w-[30px] h-[30px] flex justify-center items-center cursor-pointer rounded-sm hover:bg-brand-surface-2"
+          onClick={() => setFullScreenMode(() => !fullScreenMode)}
+        >
+          {fullScreenMode ? (
+            <ArrowsPointingInIcon className="h-4 w-4" />
+          ) : (
+            <ArrowsPointingOutIcon className="h-4 w-4" />
+          )}
+        </div>
+      </div>
+
+      {/* content */}
+      <div className="relative flex h-full w-full flex-1 overflow-hidden border-t border-brand-base">
+        <div
+          className="relative flex h-full w-full flex-1 flex-col overflow-hidden overflow-x-auto"
+          id="scroll-container"
+        >
+          {/* blocks components */}
+          {currentView && currentViewData && (
+            <GanttChartBlocks
+              itemsContainerWidth={itemsContainerWidth}
+              blocks={chartBlocks}
+              sidebarBlockRender={sidebarBlockRender}
+              blockRender={blockRender}
+            />
+          )}
+
+          {/* chart */}
+          {/* {currentView && currentView === "hours" && <HourChartView />} */}
+          {/* {currentView && currentView === "day" && <DayChartView />} */}
+          {/* {currentView && currentView === "week" && <WeekChartView />} */}
+          {/* {currentView && currentView === "bi_week" && <BiWeekChartView />} */}
+          {currentView && currentView === "month" && <MonthChartView />}
+          {/* {currentView && currentView === "quarter" && <QuarterChartView />} */}
+          {/* {currentView && currentView === "year" && <YearChartView />} */}
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/apps/app/components/gantt-chart/chart/month.tsx b/apps/app/components/gantt-chart/chart/month.tsx
new file mode 100644
index 000000000..15d02c488
--- /dev/null
+++ b/apps/app/components/gantt-chart/chart/month.tsx
@@ -0,0 +1,56 @@
+import { FC } from "react";
+// context
+import { useChart } from "../hooks";
+
+export const MonthChartView: FC<any> = () => {
+  const { currentView, currentViewData, renderView, dispatch, allViews } = useChart();
+
+  return (
+    <>
+      <div className="absolute flex h-full flex-grow divide-x divide-brand-base">
+        {renderView &&
+          renderView.length > 0 &&
+          renderView.map((_itemRoot: any, _idxRoot: any) => (
+            <div key={`title-${_idxRoot}`} className="relative flex flex-col">
+              <div className="relative border-b border-brand-base">
+                <div className="sticky left-0 inline-flex whitespace-nowrap px-2 py-1 text-sm font-medium capitalize">
+                  {_itemRoot?.title}
+                </div>
+              </div>
+
+              <div className="flex h-full w-full divide-x divide-brand-base">
+                {_itemRoot.children &&
+                  _itemRoot.children.length > 0 &&
+                  _itemRoot.children.map((_item: any, _idx: any) => (
+                    <div
+                      key={`sub-title-${_idxRoot}-${_idx}`}
+                      className="relative flex h-full flex-col overflow-hidden whitespace-nowrap"
+                      style={{ width: `${currentViewData.data.width}px` }}
+                    >
+                      <div
+                        className={`flex-shrink-0 border-b py-1 text-center text-sm capitalize font-medium ${
+                          _item?.today ? `text-red-500 border-red-500` : `border-brand-base`
+                        }`}
+                      >
+                        <div>{_item.title}</div>
+                      </div>
+                      <div
+                        className={`relative h-full w-full flex-1 flex justify-center ${
+                          ["sat", "sun"].includes(_item?.dayData?.shortTitle || "")
+                            ? `bg-brand-surface-2`
+                            : ``
+                        }`}
+                      >
+                        {_item?.today && (
+                          <div className="absolute top-0 bottom-0 border border-red-500"> </div>
+                        )}
+                      </div>
+                    </div>
+                  ))}
+              </div>
+            </div>
+          ))}
+      </div>
+    </>
+  );
+};
diff --git a/apps/app/components/gantt-chart/chart/quarter.tsx b/apps/app/components/gantt-chart/chart/quarter.tsx
new file mode 100644
index 000000000..57f6f4f5e
--- /dev/null
+++ b/apps/app/components/gantt-chart/chart/quarter.tsx
@@ -0,0 +1,50 @@
+import { FC } from "react";
+// context
+import { useChart } from "../hooks";
+
+export const QuarterChartView: FC<any> = () => {
+  const { currentView, currentViewData, renderView, dispatch, allViews } = useChart();
+
+  return (
+    <>
+      <div className="absolute flex h-full flex-grow divide-x divide-brand-base">
+        {renderView &&
+          renderView.length > 0 &&
+          renderView.map((_itemRoot: any, _idxRoot: any) => (
+            <div key={`title-${_idxRoot}`} className="relative flex flex-col">
+              <div className="relative border-b border-brand-base">
+                <div className="sticky left-0 inline-flex whitespace-nowrap px-2 py-1 text-sm font-medium capitalize">
+                  {_itemRoot?.title}
+                </div>
+              </div>
+
+              <div className="flex h-full w-full divide-x divide-brand-base">
+                {_itemRoot.children &&
+                  _itemRoot.children.length > 0 &&
+                  _itemRoot.children.map((_item: any, _idx: any) => (
+                    <div
+                      key={`sub-title-${_idxRoot}-${_idx}`}
+                      className="relative flex h-full flex-col overflow-hidden whitespace-nowrap"
+                      style={{ width: `${currentViewData.data.width}px` }}
+                    >
+                      <div
+                        className={`flex-shrink-0 border-b py-1 text-center text-sm capitalize font-medium ${
+                          _item?.today ? `text-red-500 border-red-500` : `border-brand-base`
+                        }`}
+                      >
+                        <div>{_item.title}</div>
+                      </div>
+                      <div className={`relative h-full w-full flex-1 flex justify-center`}>
+                        {_item?.today && (
+                          <div className="absolute top-0 bottom-0 border border-red-500"> </div>
+                        )}
+                      </div>
+                    </div>
+                  ))}
+              </div>
+            </div>
+          ))}
+      </div>
+    </>
+  );
+};
diff --git a/apps/app/components/gantt-chart/chart/week.tsx b/apps/app/components/gantt-chart/chart/week.tsx
new file mode 100644
index 000000000..695fa2aa5
--- /dev/null
+++ b/apps/app/components/gantt-chart/chart/week.tsx
@@ -0,0 +1,56 @@
+import { FC } from "react";
+// context
+import { useChart } from "../hooks";
+
+export const WeekChartView: FC<any> = () => {
+  const { currentView, currentViewData, renderView, dispatch, allViews } = useChart();
+
+  return (
+    <>
+      <div className="absolute flex h-full flex-grow divide-x divide-brand-base">
+        {renderView &&
+          renderView.length > 0 &&
+          renderView.map((_itemRoot: any, _idxRoot: any) => (
+            <div key={`title-${_idxRoot}`} className="relative flex flex-col">
+              <div className="relative border-b border-brand-base">
+                <div className="sticky left-0 inline-flex whitespace-nowrap px-2 py-1 text-sm font-medium capitalize">
+                  {_itemRoot?.title}
+                </div>
+              </div>
+
+              <div className="flex h-full w-full divide-x divide-brand-base">
+                {_itemRoot.children &&
+                  _itemRoot.children.length > 0 &&
+                  _itemRoot.children.map((_item: any, _idx: any) => (
+                    <div
+                      key={`sub-title-${_idxRoot}-${_idx}`}
+                      className="relative flex h-full flex-col overflow-hidden whitespace-nowrap"
+                      style={{ width: `${currentViewData.data.width}px` }}
+                    >
+                      <div
+                        className={`flex-shrink-0 border-b py-1 text-center text-sm capitalize font-medium ${
+                          _item?.today ? `text-red-500 border-red-500` : `border-brand-base`
+                        }`}
+                      >
+                        <div>{_item.title}</div>
+                      </div>
+                      <div
+                        className={`relative h-full w-full flex-1 flex justify-center ${
+                          ["sat", "sun"].includes(_item?.dayData?.shortTitle || "")
+                            ? `bg-brand-surface-2`
+                            : ``
+                        }`}
+                      >
+                        {_item?.today && (
+                          <div className="absolute top-0 bottom-0 border border-red-500"> </div>
+                        )}
+                      </div>
+                    </div>
+                  ))}
+              </div>
+            </div>
+          ))}
+      </div>
+    </>
+  );
+};
diff --git a/apps/app/components/gantt-chart/chart/year.tsx b/apps/app/components/gantt-chart/chart/year.tsx
new file mode 100644
index 000000000..d06f0e025
--- /dev/null
+++ b/apps/app/components/gantt-chart/chart/year.tsx
@@ -0,0 +1,50 @@
+import { FC } from "react";
+// context
+import { useChart } from "../hooks";
+
+export const YearChartView: FC<any> = () => {
+  const { currentView, currentViewData, renderView, dispatch, allViews } = useChart();
+
+  return (
+    <>
+      <div className="absolute flex h-full flex-grow divide-x divide-brand-base">
+        {renderView &&
+          renderView.length > 0 &&
+          renderView.map((_itemRoot: any, _idxRoot: any) => (
+            <div key={`title-${_idxRoot}`} className="relative flex flex-col">
+              <div className="relative border-b border-brand-base">
+                <div className="sticky left-0 inline-flex whitespace-nowrap px-2 py-1 text-sm font-medium capitalize">
+                  {_itemRoot?.title}
+                </div>
+              </div>
+
+              <div className="flex h-full w-full divide-x divide-brand-base">
+                {_itemRoot.children &&
+                  _itemRoot.children.length > 0 &&
+                  _itemRoot.children.map((_item: any, _idx: any) => (
+                    <div
+                      key={`sub-title-${_idxRoot}-${_idx}`}
+                      className="relative flex h-full flex-col overflow-hidden whitespace-nowrap"
+                      style={{ width: `${currentViewData.data.width}px` }}
+                    >
+                      <div
+                        className={`flex-shrink-0 border-b py-1 text-center text-sm capitalize font-medium ${
+                          _item?.today ? `text-red-500 border-red-500` : `border-brand-base`
+                        }`}
+                      >
+                        <div>{_item.title}</div>
+                      </div>
+                      <div className={`relative h-full w-full flex-1 flex justify-center`}>
+                        {_item?.today && (
+                          <div className="absolute top-0 bottom-0 border border-red-500"> </div>
+                        )}
+                      </div>
+                    </div>
+                  ))}
+              </div>
+            </div>
+          ))}
+      </div>
+    </>
+  );
+};
diff --git a/apps/app/components/gantt-chart/contexts/index.tsx b/apps/app/components/gantt-chart/contexts/index.tsx
new file mode 100644
index 000000000..4f858cf33
--- /dev/null
+++ b/apps/app/components/gantt-chart/contexts/index.tsx
@@ -0,0 +1,48 @@
+import React, { createContext, useState } from "react";
+// types
+import { ChartContextData, ChartContextActionPayload, ChartContextReducer } from "../types";
+// data
+import { allViewsWithData, currentViewDataWithView } from "../data";
+
+export const ChartContext = createContext<ChartContextReducer | undefined>(undefined);
+
+const chartReducer = (
+  state: ChartContextData,
+  action: ChartContextActionPayload
+): ChartContextData => {
+  switch (action.type) {
+    case "CURRENT_VIEW":
+      return { ...state, currentView: action.payload };
+    case "CURRENT_VIEW_DATA":
+      return { ...state, currentViewData: action.payload };
+    case "RENDER_VIEW":
+      return { ...state, currentViewData: action.payload };
+    case "PARTIAL_UPDATE":
+      return { ...state, ...action.payload };
+    default:
+      return state;
+  }
+};
+
+const initialView = "month";
+
+export const ChartContextProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [state, dispatch] = useState<ChartContextData>({
+    currentView: initialView,
+    currentViewData: currentViewDataWithView(initialView),
+    renderView: [],
+    allViews: allViewsWithData,
+  });
+
+  const handleDispatch = (action: ChartContextActionPayload): ChartContextData => {
+    const newState = chartReducer(state, action);
+    dispatch(() => newState);
+    return newState;
+  };
+
+  return (
+    <ChartContext.Provider value={{ ...state, dispatch: handleDispatch }}>
+      {children}
+    </ChartContext.Provider>
+  );
+};
diff --git a/apps/app/components/gantt-chart/data/index.ts b/apps/app/components/gantt-chart/data/index.ts
new file mode 100644
index 000000000..4be799998
--- /dev/null
+++ b/apps/app/components/gantt-chart/data/index.ts
@@ -0,0 +1,144 @@
+// types
+import { WeekMonthDataType, ChartDataType } from "../types";
+
+// constants
+export const weeks: WeekMonthDataType[] = [
+  { key: 0, shortTitle: "sun", title: "sunday" },
+  { key: 1, shortTitle: "mon", title: "monday" },
+  { key: 2, shortTitle: "tue", title: "tuesday" },
+  { key: 3, shortTitle: "wed", title: "wednesday" },
+  { key: 4, shortTitle: "thurs", title: "thursday" },
+  { key: 5, shortTitle: "fri", title: "friday" },
+  { key: 6, shortTitle: "sat", title: "saturday" },
+];
+
+export const months: WeekMonthDataType[] = [
+  { key: 0, shortTitle: "jan", title: "january" },
+  { key: 1, shortTitle: "feb", title: "february" },
+  { key: 2, shortTitle: "mar", title: "march" },
+  { key: 3, shortTitle: "apr", title: "april" },
+  { key: 4, shortTitle: "may", title: "may" },
+  { key: 5, shortTitle: "jun", title: "june" },
+  { key: 6, shortTitle: "jul", title: "july" },
+  { key: 7, shortTitle: "aug", title: "august" },
+  { key: 8, shortTitle: "sept", title: "september" },
+  { key: 9, shortTitle: "oct", title: "october" },
+  { key: 10, shortTitle: "nov", title: "november" },
+  { key: 11, shortTitle: "dec", title: "december" },
+];
+
+export const charCapitalize = (word: string) =>
+  `${word.charAt(0).toUpperCase()}${word.substring(1)}`;
+
+export const bindZero = (value: number) => (value > 9 ? `${value}` : `0${value}`);
+
+export const timePreview = (date: Date) => {
+  let hours = date.getHours();
+  const amPm = hours >= 12 ? "PM" : "AM";
+  hours = hours % 12;
+  hours = hours ? hours : 12;
+
+  let minutes: number | string = date.getMinutes();
+  minutes = bindZero(minutes);
+
+  return `${bindZero(hours)}:${minutes} ${amPm}`;
+};
+
+export const datePreview = (date: Date, includeTime: boolean = false) => {
+  const day = date.getDate();
+  let month: number | WeekMonthDataType = date.getMonth();
+  month = months[month as number] as WeekMonthDataType;
+  const year = date.getFullYear();
+
+  return `${charCapitalize(month?.shortTitle)} ${day}, ${year}${
+    includeTime ? `, ${timePreview(date)}` : ``
+  }`;
+};
+
+// context data
+export const allViewsWithData: ChartDataType[] = [
+  // {
+  //   key: "hours",
+  //   title: "Hours",
+  //   data: {
+  //     startDate: new Date(),
+  //     currentDate: new Date(),
+  //     endDate: new Date(),
+  //     approxFilterRange: 4,
+  //     width: 40,
+  //   },
+  // },
+  // {
+  //   key: "days",
+  //   title: "Days",
+  //   data: {
+  //     startDate: new Date(),
+  //     currentDate: new Date(),
+  //     endDate: new Date(),
+  //     approxFilterRange: 4,
+  //     width: 40,
+  //   },
+  // },
+  // {
+  //   key: "week",
+  //   title: "Week",
+  //   data: {
+  //     startDate: new Date(),
+  //     currentDate: new Date(),
+  //     endDate: new Date(),
+  //     approxFilterRange: 4,
+  //     width: 180, // it will preview week dates with weekends highlighted with 1 week limitations ex: title (Wed 1, Thu 2, Fri 3)
+  //   },
+  // },
+  // {
+  //   key: "bi_week",
+  //   title: "Bi-Week",
+  //   data: {
+  //     startDate: new Date(),
+  //     currentDate: new Date(),
+  //     endDate: new Date(),
+  //     approxFilterRange: 4,
+  //     width: 100, // it will preview monthly all dates with weekends highlighted with 3 week limitations ex: title (Wed 1, Thu 2, Fri 3)
+  //   },
+  // },
+  {
+    key: "month",
+    title: "Month",
+    data: {
+      startDate: new Date(),
+      currentDate: new Date(),
+      endDate: new Date(),
+      approxFilterRange: 8,
+      width: 80, // it will preview monthly all dates with weekends highlighted with no limitations ex: title (1, 2, 3)
+    },
+  },
+  // {
+  //   key: "quarter",
+  //   title: "Quarter",
+  //   data: {
+  //     startDate: new Date(),
+  //     currentDate: new Date(),
+  //     endDate: new Date(),
+  //     approxFilterRange: 12,
+  //     width: 100, // it will preview week starting dates all months data and there is 3 months limitation for preview ex: title (2, 9, 16, 23, 30)
+  //   },
+  // },
+  // {
+  //   key: "year",
+  //   title: "Year",
+  //   data: {
+  //     startDate: new Date(),
+  //     currentDate: new Date(),
+  //     endDate: new Date(),
+  //     approxFilterRange: 10,
+  //     width: 80, // it will preview week starting dates all months data and there is no limitation for preview ex: title (2, 9, 16, 23, 30)
+  //   },
+  // },
+];
+
+export const currentViewDataWithView = (view: string = "month") => {
+  const currentView: ChartDataType | undefined = allViewsWithData.find(
+    (_viewData) => _viewData.key === view
+  );
+  return currentView;
+};
diff --git a/apps/app/components/gantt-chart/helpers/draggable.tsx b/apps/app/components/gantt-chart/helpers/draggable.tsx
new file mode 100644
index 000000000..a5404cc8e
--- /dev/null
+++ b/apps/app/components/gantt-chart/helpers/draggable.tsx
@@ -0,0 +1,138 @@
+import { useState, useRef } from "react";
+
+export const ChartDraggable = ({ children, block, handleBlock, className }: any) => {
+  const [dragging, setDragging] = useState(false);
+
+  const [chartBlockPositionLeft, setChartBlockPositionLeft] = useState(0);
+  const [blockPositionLeft, setBlockPositionLeft] = useState(0);
+  const [dragBlockOffsetX, setDragBlockOffsetX] = useState(0);
+
+  const handleMouseDown = (event: any) => {
+    const chartBlockPositionLeft: number = block.position.marginLeft;
+    const blockPositionLeft: number = event.target.getBoundingClientRect().left;
+    const dragBlockOffsetX: number = event.clientX - event.target.getBoundingClientRect().left;
+
+    console.log("--------------------");
+    console.log("chartBlockPositionLeft", chartBlockPositionLeft);
+    console.log("blockPositionLeft", blockPositionLeft);
+    console.log("dragBlockOffsetX", dragBlockOffsetX);
+    console.log("-->");
+
+    setDragging(true);
+    setChartBlockPositionLeft(chartBlockPositionLeft);
+    setBlockPositionLeft(blockPositionLeft);
+    setDragBlockOffsetX(dragBlockOffsetX);
+  };
+
+  const handleMouseMove = (event: any) => {
+    if (!dragging) return;
+
+    const currentBlockPosition = event.clientX - dragBlockOffsetX;
+    console.log("currentBlockPosition", currentBlockPosition);
+    if (currentBlockPosition <= blockPositionLeft) {
+      const updatedPosition = chartBlockPositionLeft - (blockPositionLeft - currentBlockPosition);
+      console.log("updatedPosition", updatedPosition);
+      handleBlock({ ...block, position: { ...block.position, marginLeft: updatedPosition } });
+    } else {
+      const updatedPosition = chartBlockPositionLeft + (blockPositionLeft - currentBlockPosition);
+      console.log("updatedPosition", updatedPosition);
+      handleBlock({ ...block, position: { ...block.position, marginLeft: updatedPosition } });
+    }
+    console.log("--------------------");
+  };
+
+  const handleMouseUp = () => {
+    setDragging(false);
+    setChartBlockPositionLeft(0);
+    setBlockPositionLeft(0);
+    setDragBlockOffsetX(0);
+  };
+
+  return (
+    <div
+      onMouseDown={handleMouseDown}
+      onMouseMove={handleMouseMove}
+      onMouseUp={handleMouseUp}
+      className={`${className ? className : ``}`}
+    >
+      {children}
+    </div>
+  );
+};
+
+// import { useState } from "react";
+
+// export const ChartDraggable = ({ children, id, className = "", style }: any) => {
+//   const [dragging, setDragging] = useState(false);
+
+//   const [chartBlockPositionLeft, setChartBlockPositionLeft] = useState(0);
+//   const [blockPositionLeft, setBlockPositionLeft] = useState(0);
+//   const [dragBlockOffsetX, setDragBlockOffsetX] = useState(0);
+
+//   const handleDragStart = (event: any) => {
+//     // event.dataTransfer.setData("text/plain", event.target.id);
+
+//     const chartBlockPositionLeft: number = parseInt(event.target.style.left.slice(0, -2));
+//     const blockPositionLeft: number = event.target.getBoundingClientRect().left;
+//     const dragBlockOffsetX: number = event.clientX - event.target.getBoundingClientRect().left;
+
+//     console.log("chartBlockPositionLeft", chartBlockPositionLeft);
+//     console.log("blockPositionLeft", blockPositionLeft);
+//     console.log("dragBlockOffsetX", dragBlockOffsetX);
+//     console.log("--------------------");
+
+//     setDragging(true);
+//     setChartBlockPositionLeft(chartBlockPositionLeft);
+//     setBlockPositionLeft(blockPositionLeft);
+//     setDragBlockOffsetX(dragBlockOffsetX);
+//   };
+
+//   const handleDragEnd = () => {
+//     setDragging(false);
+//     setChartBlockPositionLeft(0);
+//     setBlockPositionLeft(0);
+//     setDragBlockOffsetX(0);
+//   };
+
+//   const handleDragOver = (event: any) => {
+//     event.preventDefault();
+//     if (dragging) {
+//       const scrollContainer = document.getElementById(`block-parent-${id}`) as HTMLElement;
+//       const currentBlockPosition = event.clientX - dragBlockOffsetX;
+//       console.log('currentBlockPosition')
+//       if (currentBlockPosition <= blockPositionLeft) {
+//         const updatedPosition = chartBlockPositionLeft - (blockPositionLeft - currentBlockPosition);
+//         console.log("updatedPosition", updatedPosition);
+//         if (scrollContainer) scrollContainer.style.left = `${updatedPosition}px`;
+//       } else {
+//         const updatedPosition = chartBlockPositionLeft + (blockPositionLeft - currentBlockPosition);
+//         console.log("updatedPosition", updatedPosition);
+//         if (scrollContainer) scrollContainer.style.left = `${updatedPosition}px`;
+//       }
+//       console.log("--------------------");
+//     }
+//   };
+
+//   const handleDrop = (event: any) => {
+//     event.preventDefault();
+//     setDragging(false);
+//     setChartBlockPositionLeft(0);
+//     setBlockPositionLeft(0);
+//     setDragBlockOffsetX(0);
+//   };
+
+//   return (
+//     <div
+//       id={id}
+//       draggable
+//       onDragStart={handleDragStart}
+//       onDragEnd={handleDragEnd}
+//       onDragOver={handleDragOver}
+//       onDrop={handleDrop}
+//       className={`${className} ${dragging ? "dragging" : ""}`}
+//       style={style}
+//     >
+//       {children}
+//     </div>
+//   );
+// };
diff --git a/apps/app/components/gantt-chart/hooks/index.tsx b/apps/app/components/gantt-chart/hooks/index.tsx
new file mode 100644
index 000000000..a26b56f84
--- /dev/null
+++ b/apps/app/components/gantt-chart/hooks/index.tsx
@@ -0,0 +1,15 @@
+import { useContext } from "react";
+// types
+import { ChartContextReducer } from "../types";
+// context
+import { ChartContext } from "../contexts";
+
+export const useChart = (): ChartContextReducer => {
+  const context = useContext(ChartContext);
+
+  if (!context) {
+    throw new Error("useChart must be used within a GanttChart");
+  }
+
+  return context;
+};
diff --git a/apps/app/components/gantt-chart/index.ts b/apps/app/components/gantt-chart/index.ts
new file mode 100644
index 000000000..1efe34c51
--- /dev/null
+++ b/apps/app/components/gantt-chart/index.ts
@@ -0,0 +1 @@
+export * from "./root";
diff --git a/apps/app/components/gantt-chart/root.tsx b/apps/app/components/gantt-chart/root.tsx
new file mode 100644
index 000000000..787df0e46
--- /dev/null
+++ b/apps/app/components/gantt-chart/root.tsx
@@ -0,0 +1,34 @@
+import { FC } from "react";
+// components
+import { ChartViewRoot } from "./chart";
+// context
+import { ChartContextProvider } from "./contexts";
+
+type GanttChartRootProps = {
+  title: null | string;
+  loaderTitle: string;
+  blocks: any;
+  blockUpdateHandler: (data: any) => void;
+  sidebarBlockRender: FC<any>;
+  blockRender: FC<any>;
+};
+
+export const GanttChartRoot: FC<GanttChartRootProps> = ({
+  title = null,
+  blocks,
+  loaderTitle = "blocks",
+  blockUpdateHandler,
+  sidebarBlockRender,
+  blockRender,
+}) => (
+  <ChartContextProvider>
+    <ChartViewRoot
+      title={title}
+      blocks={blocks}
+      loaderTitle={loaderTitle}
+      blockUpdateHandler={blockUpdateHandler}
+      sidebarBlockRender={sidebarBlockRender}
+      blockRender={blockRender}
+    />
+  </ChartContextProvider>
+);
diff --git a/apps/app/components/gantt-chart/types/index.ts b/apps/app/components/gantt-chart/types/index.ts
new file mode 100644
index 000000000..aa6ebe9da
--- /dev/null
+++ b/apps/app/components/gantt-chart/types/index.ts
@@ -0,0 +1,43 @@
+// context types
+export type allViewsType = {
+  key: string;
+  title: string;
+  data: Object | null;
+};
+
+export interface ChartContextData {
+  allViews: allViewsType[];
+  currentView: "hours" | "day" | "week" | "bi_week" | "month" | "quarter" | "year";
+  currentViewData: any;
+  renderView: any;
+}
+
+export type ChartContextActionPayload = {
+  type: "CURRENT_VIEW" | "CURRENT_VIEW_DATA" | "PARTIAL_UPDATE" | "RENDER_VIEW";
+  payload: any;
+};
+
+export interface ChartContextReducer extends ChartContextData {
+  dispatch: (action: ChartContextActionPayload) => void;
+}
+
+// chart render types
+export interface WeekMonthDataType {
+  key: number;
+  shortTitle: string;
+  title: string;
+}
+
+export interface ChartDataType {
+  key: string;
+  title: string;
+  data: ChartDataTypeData;
+}
+
+export interface ChartDataTypeData {
+  startDate: Date;
+  currentDate: Date;
+  endDate: Date;
+  approxFilterRange: number;
+  width: number;
+}
diff --git a/apps/app/components/gantt-chart/views/bi-week-view.ts b/apps/app/components/gantt-chart/views/bi-week-view.ts
new file mode 100644
index 000000000..b8d8a0bfa
--- /dev/null
+++ b/apps/app/components/gantt-chart/views/bi-week-view.ts
@@ -0,0 +1,163 @@
+// types
+import { ChartDataType } from "../types";
+// data
+import { weeks, months } from "../data";
+// helpers
+import {
+  generateDate,
+  getWeekNumberByDate,
+  getNumberOfDaysInMonth,
+  getDatesBetweenTwoDates,
+} from "./helpers";
+
+type GetAllDaysInMonthInMonthViewType = {
+  date: any;
+  day: any;
+  dayData: any;
+  weekNumber: number;
+  title: string;
+  active: boolean;
+  today: boolean;
+};
+const getAllDaysInMonthInMonthView = (month: number, year: number) => {
+  const day: GetAllDaysInMonthInMonthViewType[] = [];
+  const numberOfDaysInMonth = getNumberOfDaysInMonth(month, year);
+  const currentDate = new Date();
+
+  Array.from(Array(numberOfDaysInMonth).keys()).map((_day: number) => {
+    const date: Date = generateDate(_day + 1, month, year);
+    day.push({
+      date: date,
+      day: _day + 1,
+      dayData: weeks[date.getDay()],
+      weekNumber: getWeekNumberByDate(date),
+      title: `${weeks[date.getDay()].shortTitle} ${_day + 1}`,
+      active: false,
+      today:
+        currentDate.getFullYear() === year &&
+        currentDate.getMonth() === month &&
+        currentDate.getDate() === _day + 1
+          ? true
+          : false,
+    });
+  });
+
+  return day;
+};
+
+const generateMonthDataByMonthAndYearInMonthView = (month: number, year: number) => {
+  const currentMonth: number = month;
+  const currentYear: number = year;
+
+  const monthPayload = {
+    year: currentYear,
+    month: currentMonth,
+    monthData: months[currentMonth],
+    children: getAllDaysInMonthInMonthView(currentMonth, currentYear),
+    title: `${months[currentMonth].title} ${currentYear}`,
+  };
+
+  return monthPayload;
+};
+
+export const generateBiWeekChart = (monthPayload: ChartDataType, side: null | "left" | "right") => {
+  let renderState = monthPayload;
+  const renderPayload: any = [];
+
+  const range: number = renderState.data.approxFilterRange || 6;
+  let filteredDates: Date[] = [];
+  let minusDate: Date = new Date();
+  let plusDate: Date = new Date();
+
+  if (side === null) {
+    const currentDate = renderState.data.currentDate;
+
+    minusDate = new Date(
+      currentDate.getFullYear(),
+      currentDate.getMonth() - range,
+      currentDate.getDate()
+    );
+    plusDate = new Date(
+      currentDate.getFullYear(),
+      currentDate.getMonth() + range,
+      currentDate.getDate()
+    );
+
+    if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate);
+
+    renderState = {
+      ...renderState,
+      data: {
+        ...renderState.data,
+        startDate: filteredDates[0],
+        endDate: filteredDates[filteredDates.length - 1],
+      },
+    };
+  } else if (side === "left") {
+    const currentDate = renderState.data.startDate;
+
+    minusDate = new Date(
+      currentDate.getFullYear(),
+      currentDate.getMonth() - range,
+      currentDate.getDate()
+    );
+    plusDate = new Date(
+      currentDate.getFullYear(),
+      currentDate.getMonth() - 1,
+      currentDate.getDate()
+    );
+
+    if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate);
+
+    renderState = {
+      ...renderState,
+      data: { ...renderState.data, startDate: filteredDates[0] },
+    };
+  } else if (side === "right") {
+    const currentDate = renderState.data.endDate;
+
+    minusDate = new Date(
+      currentDate.getFullYear(),
+      currentDate.getMonth() + 1,
+      currentDate.getDate()
+    );
+    plusDate = new Date(
+      currentDate.getFullYear(),
+      currentDate.getMonth() + range,
+      currentDate.getDate()
+    );
+
+    if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate);
+
+    renderState = {
+      ...renderState,
+      data: { ...renderState.data, endDate: filteredDates[filteredDates.length - 1] },
+    };
+  }
+
+  if (filteredDates && filteredDates.length > 0)
+    for (const currentDate in filteredDates) {
+      const date = filteredDates[parseInt(currentDate)];
+      const currentYear = date.getFullYear();
+      const currentMonth = date.getMonth();
+      renderPayload.push(generateMonthDataByMonthAndYearInMonthView(currentMonth, currentYear));
+    }
+
+  const scrollWidth =
+    renderPayload
+      .map((monthData: any) => monthData.children.length)
+      .reduce((partialSum: number, a: number) => partialSum + a, 0) * monthPayload.data.width;
+
+  return { state: renderState, payload: renderPayload, scrollWidth: scrollWidth };
+};
+
+export const getNumberOfDaysBetweenTwoDatesInBiWeek = (startDate: Date, endDate: Date) => {
+  let daysDifference: number = 0;
+  startDate.setHours(0, 0, 0, 0);
+  endDate.setHours(0, 0, 0, 0);
+
+  const timeDifference: number = startDate.getTime() - endDate.getTime();
+  daysDifference = Math.abs(Math.floor(timeDifference / (1000 * 60 * 60 * 24)));
+
+  return daysDifference;
+};
diff --git a/apps/app/components/gantt-chart/views/day-view.ts b/apps/app/components/gantt-chart/views/day-view.ts
new file mode 100644
index 000000000..67f369361
--- /dev/null
+++ b/apps/app/components/gantt-chart/views/day-view.ts
@@ -0,0 +1,186 @@
+// types
+import { ChartDataType } from "../types";
+// data
+import { weeks, months } from "../data";
+
+export const getWeekNumberByDate = (date: Date) => {
+  const firstDayOfYear = new Date(date.getFullYear(), 0, 1);
+  const daysOffset = firstDayOfYear.getDay();
+
+  const firstWeekStart = firstDayOfYear.getTime() - daysOffset * 24 * 60 * 60 * 1000;
+  const weekStart = new Date(firstWeekStart);
+
+  const weekNumber =
+    Math.floor((date.getTime() - weekStart.getTime()) / (7 * 24 * 60 * 60 * 1000)) + 1;
+
+  return weekNumber;
+};
+
+export const getNumberOfDaysInMonth = (month: number, year: number) => {
+  const date = new Date(year, month, 1);
+
+  date.setMonth(date.getMonth() + 1);
+  date.setDate(date.getDate() - 1);
+
+  return date.getDate();
+};
+
+export const generateDate = (day: number, month: number, year: number) =>
+  new Date(year, month, day);
+
+export const getDatesBetweenTwoDates = (startDate: Date, endDate: Date) => {
+  const months = [];
+
+  const startYear = startDate.getFullYear();
+  const startMonth = startDate.getMonth();
+
+  const endYear = endDate.getFullYear();
+  const endMonth = endDate.getMonth();
+
+  const currentDate = new Date(startYear, startMonth);
+
+  while (currentDate <= endDate) {
+    const currentYear = currentDate.getFullYear();
+    const currentMonth = currentDate.getMonth();
+    months.push(new Date(currentYear, currentMonth));
+    currentDate.setMonth(currentDate.getMonth() + 1);
+  }
+  if (endYear === currentDate.getFullYear() && endMonth === currentDate.getMonth())
+    months.push(endDate);
+
+  return months;
+};
+
+export type GetAllDaysInMonthType = {
+  date: any;
+  day: any;
+  dayData: any;
+  weekNumber: number;
+  title: string;
+  today: boolean;
+};
+export const getAllDaysInMonth = (month: number, year: number) => {
+  const day: GetAllDaysInMonthType[] = [];
+  const numberOfDaysInMonth = getNumberOfDaysInMonth(month, year);
+  const currentDate = new Date();
+
+  Array.from(Array(numberOfDaysInMonth).keys()).map((_day: number) => {
+    const date: Date = generateDate(_day + 1, month, year);
+    day.push({
+      date: date,
+      day: _day + 1,
+      dayData: weeks[date.getDay()],
+      weekNumber: getWeekNumberByDate(date),
+      title: `${weeks[date.getDay()].shortTitle} ${_day + 1}`,
+      today: currentDate.getFullYear() === year && currentDate.getMonth() === month && currentDate.getDate() === (_day + 1) ? true : false,
+    });
+  });
+
+  return day;
+};
+
+export const generateMonthDataByMonth = (month: number, year: number) => {
+  const currentMonth: number = month;
+  const currentYear: number = year;
+
+  const monthPayload = {
+    year: currentYear,
+    month: currentMonth,
+    monthData: months[currentMonth],
+    children: getAllDaysInMonth(currentMonth, currentYear),
+    title: `${months[currentMonth].title} ${currentYear}`,
+  };
+
+  return monthPayload;
+};
+
+export const generateMonthDataByYear = (
+  monthPayload: ChartDataType,
+  side: null | "left" | "right"
+) => {
+  let renderState = monthPayload;
+  const renderPayload: any = [];
+
+  const range: number = renderState.data.approxFilterRange || 6;
+  let filteredDates: Date[] = [];
+  let minusDate: Date = new Date();
+  let plusDate: Date = new Date();
+
+  if (side === null) {
+    const currentDate = renderState.data.currentDate;
+
+    minusDate = new Date(
+      currentDate.getFullYear(),
+      currentDate.getMonth() - range,
+      currentDate.getDate()
+    );
+    plusDate = new Date(
+      currentDate.getFullYear(),
+      currentDate.getMonth() + range,
+      currentDate.getDate()
+    );
+
+    if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate);
+
+    renderState = {
+      ...renderState,
+      data: {
+        ...renderState.data,
+        startDate: filteredDates[0],
+        endDate: filteredDates[filteredDates.length - 1],
+      },
+    };
+  } else if (side === "left") {
+    const currentDate = renderState.data.startDate;
+
+    minusDate = new Date(
+      currentDate.getFullYear(),
+      currentDate.getMonth() - range,
+      currentDate.getDate()
+    );
+    plusDate = new Date(
+      currentDate.getFullYear(),
+      currentDate.getMonth() - 1,
+      currentDate.getDate()
+    );
+
+    if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate);
+
+    renderState = {
+      ...renderState,
+      data: { ...renderState.data, startDate: filteredDates[0] },
+    };
+  } else if (side === "right") {
+    const currentDate = renderState.data.endDate;
+
+    minusDate = new Date(
+      currentDate.getFullYear(),
+      currentDate.getMonth() + 1,
+      currentDate.getDate()
+    );
+    plusDate = new Date(
+      currentDate.getFullYear(),
+      currentDate.getMonth() + range,
+      currentDate.getDate()
+    );
+
+    if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate);
+
+    renderState = {
+      ...renderState,
+      data: { ...renderState.data, endDate: filteredDates[filteredDates.length - 1] },
+    };
+  }
+
+  if (filteredDates && filteredDates.length > 0)
+    for (const currentDate in filteredDates) {
+      const date = filteredDates[parseInt(currentDate)];
+      const currentYear = date.getFullYear();
+      const currentMonth = date.getMonth();
+      renderPayload.push(generateMonthDataByMonth(currentMonth, currentYear));
+    }
+
+  const scrollWidth = ((renderPayload.map((monthData: any) => monthData.children.length)).reduce((partialSum: number, a: number) => partialSum + a, 0)) * monthPayload.data.width;
+
+  return { state: renderState, payload: renderPayload, scrollWidth: scrollWidth };
+};
\ No newline at end of file
diff --git a/apps/app/components/gantt-chart/views/helpers.ts b/apps/app/components/gantt-chart/views/helpers.ts
new file mode 100644
index 000000000..bfea64297
--- /dev/null
+++ b/apps/app/components/gantt-chart/views/helpers.ts
@@ -0,0 +1,93 @@
+// Generating the date by using the year, month, and day
+export const generateDate = (day: number, month: number, year: number) =>
+  new Date(year, month, day);
+
+// Getting the number of days in a month
+export const getNumberOfDaysInMonth = (month: number, year: number) => {
+  const date = new Date(year, month, 1);
+
+  date.setMonth(date.getMonth() + 1);
+  date.setDate(date.getDate() - 1);
+
+  return date.getDate();
+};
+
+// Getting the week number by date
+export const getWeekNumberByDate = (date: Date) => {
+  const firstDayOfYear = new Date(date.getFullYear(), 0, 1);
+  const daysOffset = firstDayOfYear.getDay();
+
+  const firstWeekStart = firstDayOfYear.getTime() - daysOffset * 24 * 60 * 60 * 1000;
+  const weekStart = new Date(firstWeekStart);
+
+  const weekNumber =
+    Math.floor((date.getTime() - weekStart.getTime()) / (7 * 24 * 60 * 60 * 1000)) + 1;
+
+  return weekNumber;
+};
+
+// Getting all weeks between two dates
+export const getWeeksByMonthAndYear = (month: number, year: number) => {
+  const weeks = [];
+  const startDate = new Date(year, month, 1);
+  const endDate = new Date(year, month + 1, 0);
+  const currentDate = new Date(startDate.getTime());
+
+  currentDate.setDate(currentDate.getDate() + ((7 - currentDate.getDay()) % 7));
+
+  while (currentDate <= endDate) {
+    weeks.push({
+      year: year,
+      month: month,
+      weekNumber: getWeekNumberByDate(currentDate),
+      startDate: new Date(currentDate.getTime()),
+      endDate: new Date(currentDate.getTime() + 6 * 24 * 60 * 60 * 1000),
+    });
+    currentDate.setDate(currentDate.getDate() + 7);
+  }
+
+  return weeks;
+};
+
+// Getting all dates in a week by week number and year
+export const getAllDatesInWeekByWeekNumber = (weekNumber: number, year: number) => {
+  const januaryFirst = new Date(year, 0, 1);
+  const firstDayOfYear =
+    januaryFirst.getDay() === 0 ? januaryFirst : new Date(year, 0, 1 + (7 - januaryFirst.getDay()));
+
+  const startDate = new Date(firstDayOfYear.getTime());
+  startDate.setDate(startDate.getDate() + 7 * (weekNumber - 1));
+
+  var datesInWeek = [];
+  for (var i = 0; i < 7; i++) {
+    const currentDate = new Date(startDate.getTime());
+    currentDate.setDate(currentDate.getDate() + i);
+    datesInWeek.push(currentDate);
+  }
+
+  return datesInWeek;
+};
+
+// Getting the dates between two dates
+export const getDatesBetweenTwoDates = (startDate: Date, endDate: Date) => {
+  const dates = [];
+
+  const startYear = startDate.getFullYear();
+  const startMonth = startDate.getMonth();
+
+  const endYear = endDate.getFullYear();
+  const endMonth = endDate.getMonth();
+
+  const currentDate = new Date(startYear, startMonth);
+
+  while (currentDate <= endDate) {
+    const currentYear = currentDate.getFullYear();
+    const currentMonth = currentDate.getMonth();
+    dates.push(new Date(currentYear, currentMonth));
+    currentDate.setMonth(currentDate.getMonth() + 1);
+  }
+  if (endYear === currentDate.getFullYear() && endMonth === currentDate.getMonth())
+    dates.push(endDate);
+
+  return dates;
+};
diff --git a/apps/app/components/gantt-chart/views/hours-view.ts b/apps/app/components/gantt-chart/views/hours-view.ts
new file mode 100644
index 000000000..67f369361
--- /dev/null
+++ b/apps/app/components/gantt-chart/views/hours-view.ts
@@ -0,0 +1,186 @@
+// types
+import { ChartDataType } from "../types";
+// data
+import { weeks, months } from "../data";
+
+export const getWeekNumberByDate = (date: Date) => {
+  const firstDayOfYear = new Date(date.getFullYear(), 0, 1);
+  const daysOffset = firstDayOfYear.getDay();
+
+  const firstWeekStart = firstDayOfYear.getTime() - daysOffset * 24 * 60 * 60 * 1000;
+  const weekStart = new Date(firstWeekStart);
+
+  const weekNumber =
+    Math.floor((date.getTime() - weekStart.getTime()) / (7 * 24 * 60 * 60 * 1000)) + 1;
+
+  return weekNumber;
+};
+
+export const getNumberOfDaysInMonth = (month: number, year: number) => {
+  const date = new Date(year, month, 1);
+
+  date.setMonth(date.getMonth() + 1);
+  date.setDate(date.getDate() - 1);
+
+  return date.getDate();
+};
+
+export const generateDate = (day: number, month: number, year: number) =>
+  new Date(year, month, day);
+
+export const getDatesBetweenTwoDates = (startDate: Date, endDate: Date) => {
+  const months = [];
+
+  const startYear = startDate.getFullYear();
+  const startMonth = startDate.getMonth();
+
+  const endYear = endDate.getFullYear();
+  const endMonth = endDate.getMonth();
+
+  const currentDate = new Date(startYear, startMonth);
+
+  while (currentDate <= endDate) {
+    const currentYear = currentDate.getFullYear();
+    const currentMonth = currentDate.getMonth();
+    months.push(new Date(currentYear, currentMonth));
+    currentDate.setMonth(currentDate.getMonth() + 1);
+  }
+  if (endYear === currentDate.getFullYear() && endMonth === currentDate.getMonth())
+    months.push(endDate);
+
+  return months;
+};
+
+export type GetAllDaysInMonthType = {
+  date: any;
+  day: any;
+  dayData: any;
+  weekNumber: number;
+  title: string;
+  today: boolean;
+};
+export const getAllDaysInMonth = (month: number, year: number) => {
+  const day: GetAllDaysInMonthType[] = [];
+  const numberOfDaysInMonth = getNumberOfDaysInMonth(month, year);
+  const currentDate = new Date();
+
+  Array.from(Array(numberOfDaysInMonth).keys()).map((_day: number) => {
+    const date: Date = generateDate(_day + 1, month, year);
+    day.push({
+      date: date,
+      day: _day + 1,
+      dayData: weeks[date.getDay()],
+      weekNumber: getWeekNumberByDate(date),
+      title: `${weeks[date.getDay()].shortTitle} ${_day + 1}`,
+      today: currentDate.getFullYear() === year && currentDate.getMonth() === month && currentDate.getDate() === (_day + 1) ? true : false,
+    });
+  });
+
+  return day;
+};
+
+export const generateMonthDataByMonth = (month: number, year: number) => {
+  const currentMonth: number = month;
+  const currentYear: number = year;
+
+  const monthPayload = {
+    year: currentYear,
+    month: currentMonth,
+    monthData: months[currentMonth],
+    children: getAllDaysInMonth(currentMonth, currentYear),
+    title: `${months[currentMonth].title} ${currentYear}`,
+  };
+
+  return monthPayload;
+};
+
+export const generateMonthDataByYear = (
+  monthPayload: ChartDataType,
+  side: null | "left" | "right"
+) => {
+  let renderState = monthPayload;
+  const renderPayload: any = [];
+
+  const range: number = renderState.data.approxFilterRange || 6;
+  let filteredDates: Date[] = [];
+  let minusDate: Date = new Date();
+  let plusDate: Date = new Date();
+
+  if (side === null) {
+    const currentDate = renderState.data.currentDate;
+
+    minusDate = new Date(
+      currentDate.getFullYear(),
+      currentDate.getMonth() - range,
+      currentDate.getDate()
+    );
+    plusDate = new Date(
+      currentDate.getFullYear(),
+      currentDate.getMonth() + range,
+      currentDate.getDate()
+    );
+
+    if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate);
+
+    renderState = {
+      ...renderState,
+      data: {
+        ...renderState.data,
+        startDate: filteredDates[0],
+        endDate: filteredDates[filteredDates.length - 1],
+      },
+    };
+  } else if (side === "left") {
+    const currentDate = renderState.data.startDate;
+
+    minusDate = new Date(
+      currentDate.getFullYear(),
+      currentDate.getMonth() - range,
+      currentDate.getDate()
+    );
+    plusDate = new Date(
+      currentDate.getFullYear(),
+      currentDate.getMonth() - 1,
+      currentDate.getDate()
+    );
+
+    if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate);
+
+    renderState = {
+      ...renderState,
+      data: { ...renderState.data, startDate: filteredDates[0] },
+    };
+  } else if (side === "right") {
+    const currentDate = renderState.data.endDate;
+
+    minusDate = new Date(
+      currentDate.getFullYear(),
+      currentDate.getMonth() + 1,
+      currentDate.getDate()
+    );
+    plusDate = new Date(
+      currentDate.getFullYear(),
+      currentDate.getMonth() + range,
+      currentDate.getDate()
+    );
+
+    if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate);
+
+    renderState = {
+      ...renderState,
+      data: { ...renderState.data, endDate: filteredDates[filteredDates.length - 1] },
+    };
+  }
+
+  if (filteredDates && filteredDates.length > 0)
+    for (const currentDate in filteredDates) {
+      const date = filteredDates[parseInt(currentDate)];
+      const currentYear = date.getFullYear();
+      const currentMonth = date.getMonth();
+      renderPayload.push(generateMonthDataByMonth(currentMonth, currentYear));
+    }
+
+  const scrollWidth = ((renderPayload.map((monthData: any) => monthData.children.length)).reduce((partialSum: number, a: number) => partialSum + a, 0)) * monthPayload.data.width;
+
+  return { state: renderState, payload: renderPayload, scrollWidth: scrollWidth };
+};
\ No newline at end of file
diff --git a/apps/app/components/gantt-chart/views/index.ts b/apps/app/components/gantt-chart/views/index.ts
new file mode 100644
index 000000000..8d4cb9be6
--- /dev/null
+++ b/apps/app/components/gantt-chart/views/index.ts
@@ -0,0 +1,7 @@
+// export * from "./hours-view";
+// export * from "./day-view";
+export * from "./week-view";
+export * from "./bi-week-view";
+export * from "./month-view";
+export * from "./quater-view";
+export * from "./year-view";
diff --git a/apps/app/components/gantt-chart/views/month-view.ts b/apps/app/components/gantt-chart/views/month-view.ts
new file mode 100644
index 000000000..df537ba5e
--- /dev/null
+++ b/apps/app/components/gantt-chart/views/month-view.ts
@@ -0,0 +1,199 @@
+// types
+import { ChartDataType } from "../types";
+// data
+import { weeks, months } from "../data";
+// helpers
+import {
+  generateDate,
+  getWeekNumberByDate,
+  getNumberOfDaysInMonth,
+  getDatesBetweenTwoDates,
+} from "./helpers";
+
+type GetAllDaysInMonthInMonthViewType = {
+  date: any;
+  day: any;
+  dayData: any;
+  weekNumber: number;
+  title: string;
+  active: boolean;
+  today: boolean;
+};
+const getAllDaysInMonthInMonthView = (month: number, year: number) => {
+  const day: GetAllDaysInMonthInMonthViewType[] = [];
+  const numberOfDaysInMonth = getNumberOfDaysInMonth(month, year);
+  const currentDate = new Date();
+
+  Array.from(Array(numberOfDaysInMonth).keys()).map((_day: number) => {
+    const date: Date = generateDate(_day + 1, month, year);
+    day.push({
+      date: date,
+      day: _day + 1,
+      dayData: weeks[date.getDay()],
+      weekNumber: getWeekNumberByDate(date),
+      title: `${weeks[date.getDay()].shortTitle} ${_day + 1}`,
+      active: false,
+      today:
+        currentDate.getFullYear() === year &&
+        currentDate.getMonth() === month &&
+        currentDate.getDate() === _day + 1
+          ? true
+          : false,
+    });
+  });
+
+  return day;
+};
+
+const generateMonthDataByMonthAndYearInMonthView = (month: number, year: number) => {
+  const currentMonth: number = month;
+  const currentYear: number = year;
+
+  const monthPayload = {
+    year: currentYear,
+    month: currentMonth,
+    monthData: months[currentMonth],
+    children: getAllDaysInMonthInMonthView(currentMonth, currentYear),
+    title: `${months[currentMonth].title} ${currentYear}`,
+  };
+
+  return monthPayload;
+};
+
+export const generateMonthChart = (monthPayload: ChartDataType, side: null | "left" | "right") => {
+  let renderState = monthPayload;
+  const renderPayload: any = [];
+
+  const range: number = renderState.data.approxFilterRange || 6;
+  let filteredDates: Date[] = [];
+  let minusDate: Date = new Date();
+  let plusDate: Date = new Date();
+
+  if (side === null) {
+    const currentDate = renderState.data.currentDate;
+
+    minusDate = new Date(
+      currentDate.getFullYear(),
+      currentDate.getMonth() - range,
+      currentDate.getDate()
+    );
+    plusDate = new Date(
+      currentDate.getFullYear(),
+      currentDate.getMonth() + range,
+      currentDate.getDate()
+    );
+
+    if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate);
+
+    renderState = {
+      ...renderState,
+      data: {
+        ...renderState.data,
+        startDate: filteredDates[0],
+        endDate: filteredDates[filteredDates.length - 1],
+      },
+    };
+  } else if (side === "left") {
+    const currentDate = renderState.data.startDate;
+
+    minusDate = new Date(
+      currentDate.getFullYear(),
+      currentDate.getMonth() - range,
+      currentDate.getDate()
+    );
+    plusDate = new Date(
+      currentDate.getFullYear(),
+      currentDate.getMonth() - 1,
+      currentDate.getDate()
+    );
+
+    if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate);
+
+    renderState = {
+      ...renderState,
+      data: { ...renderState.data, startDate: filteredDates[0] },
+    };
+  } else if (side === "right") {
+    const currentDate = renderState.data.endDate;
+
+    minusDate = new Date(
+      currentDate.getFullYear(),
+      currentDate.getMonth() + 1,
+      currentDate.getDate()
+    );
+    plusDate = new Date(
+      currentDate.getFullYear(),
+      currentDate.getMonth() + range,
+      currentDate.getDate()
+    );
+
+    if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate);
+
+    renderState = {
+      ...renderState,
+      data: { ...renderState.data, endDate: filteredDates[filteredDates.length - 1] },
+    };
+  }
+
+  if (filteredDates && filteredDates.length > 0)
+    for (const currentDate in filteredDates) {
+      const date = filteredDates[parseInt(currentDate)];
+      const currentYear = date.getFullYear();
+      const currentMonth = date.getMonth();
+      renderPayload.push(generateMonthDataByMonthAndYearInMonthView(currentMonth, currentYear));
+    }
+
+  const scrollWidth =
+    renderPayload
+      .map((monthData: any) => monthData.children.length)
+      .reduce((partialSum: number, a: number) => partialSum + a, 0) * monthPayload.data.width;
+
+  return { state: renderState, payload: renderPayload, scrollWidth: scrollWidth };
+};
+
+export const getNumberOfDaysBetweenTwoDatesInMonth = (startDate: Date, endDate: Date) => {
+  let daysDifference: number = 0;
+  startDate.setHours(0, 0, 0, 0);
+  endDate.setHours(0, 0, 0, 0);
+
+  const timeDifference: number = startDate.getTime() - endDate.getTime();
+  daysDifference = Math.abs(Math.floor(timeDifference / (1000 * 60 * 60 * 24)));
+
+  return daysDifference;
+};
+
+export const getMonthChartItemPositionWidthInMonth = (chartData: ChartDataType, itemData: any) => {
+  let scrollPosition: number = 0;
+  let scrollWidth: number = 0;
+
+  const { startDate } = chartData.data;
+  const { start_date: itemStartDate, target_date: itemTargetDate } = itemData;
+
+  startDate.setHours(0, 0, 0, 0);
+  itemStartDate.setHours(0, 0, 0, 0);
+  itemTargetDate.setHours(0, 0, 0, 0);
+
+  // position code starts
+  const positionTimeDifference: number = startDate.getTime() - itemStartDate.getTime();
+  const positionDaysDifference: number = Math.abs(
+    Math.floor(positionTimeDifference / (1000 * 60 * 60 * 24))
+  );
+  scrollPosition = positionDaysDifference * chartData.data.width;
+
+  var diffMonths = (itemStartDate.getFullYear() - startDate.getFullYear()) * 12;
+  diffMonths -= startDate.getMonth();
+  diffMonths += itemStartDate.getMonth();
+
+  scrollPosition = scrollPosition + diffMonths - 1;
+  // position code ends
+
+  // width code starts
+  const widthTimeDifference: number = itemStartDate.getTime() - itemTargetDate.getTime();
+  const widthDaysDifference: number = Math.abs(
+    Math.floor(widthTimeDifference / (1000 * 60 * 60 * 24))
+  );
+  scrollWidth = (widthDaysDifference + 1) * chartData.data.width + 1;
+  // width code ends
+
+  return { marginLeft: scrollPosition, width: scrollWidth };
+};
diff --git a/apps/app/components/gantt-chart/views/quater-view.ts b/apps/app/components/gantt-chart/views/quater-view.ts
new file mode 100644
index 000000000..0714cb28a
--- /dev/null
+++ b/apps/app/components/gantt-chart/views/quater-view.ts
@@ -0,0 +1,117 @@
+// types
+import { ChartDataType } from "../types";
+// data
+import { weeks, months } from "../data";
+// helpers
+import { getDatesBetweenTwoDates, getWeeksByMonthAndYear } from "./helpers";
+
+const generateMonthDataByMonthAndYearInMonthView = (month: number, year: number) => {
+  const currentMonth: number = month;
+  const currentYear: number = year;
+  const today = new Date();
+
+  const weeksBetweenTwoDates = getWeeksByMonthAndYear(month, year);
+
+  const weekPayload = {
+    year: currentYear,
+    month: currentMonth,
+    monthData: months[currentMonth],
+    children: weeksBetweenTwoDates.map((weekData: any) => {
+      const date: Date = weekData.startDate;
+      return {
+        date: date,
+        startDate: weekData.startDate,
+        endDate: weekData.endDate,
+        day: date.getDay(),
+        dayData: weeks[date.getDay()],
+        weekNumber: weekData.weekNumber,
+        title: `W${weekData.weekNumber} (${date.getDate()})`,
+        active: false,
+        today: today >= weekData.startDate && today <= weekData.endDate ? true : false,
+      };
+    }),
+    title: `${months[currentMonth].title} ${currentYear}`,
+  };
+
+  return weekPayload;
+};
+
+export const generateQuarterChart = (
+  quarterPayload: ChartDataType,
+  side: null | "left" | "right"
+) => {
+  let renderState = quarterPayload;
+  const renderPayload: any = [];
+
+  const range: number = renderState.data.approxFilterRange || 6;
+  let filteredDates: Date[] = [];
+  let minusDate: Date = new Date();
+  let plusDate: Date = new Date();
+
+  if (side === null) {
+    const currentDate = renderState.data.currentDate;
+
+    minusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - range, 1);
+    plusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + range, 0);
+
+    if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate);
+
+    renderState = {
+      ...renderState,
+      data: {
+        ...renderState.data,
+        startDate: filteredDates[0],
+        endDate: filteredDates[filteredDates.length - 1],
+      },
+    };
+  } else if (side === "left") {
+    const currentDate = renderState.data.startDate;
+
+    minusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - range, 1);
+    plusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, 0);
+
+    if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate);
+
+    renderState = {
+      ...renderState,
+      data: { ...renderState.data, startDate: filteredDates[0] },
+    };
+  } else if (side === "right") {
+    const currentDate = renderState.data.endDate;
+
+    minusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 1);
+    plusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + range, 0);
+
+    if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate);
+
+    renderState = {
+      ...renderState,
+      data: { ...renderState.data, endDate: filteredDates[filteredDates.length - 1] },
+    };
+  }
+
+  if (filteredDates && filteredDates.length > 0)
+    for (const currentDate in filteredDates) {
+      const date = filteredDates[parseInt(currentDate)];
+      const currentYear = date.getFullYear();
+      const currentMonth = date.getMonth();
+      renderPayload.push(generateMonthDataByMonthAndYearInMonthView(currentMonth, currentYear));
+    }
+
+  const scrollWidth =
+    renderPayload
+      .map((monthData: any) => monthData.children.length)
+      .reduce((partialSum: number, a: number) => partialSum + a, 0) * quarterPayload.data.width;
+
+  return { state: renderState, payload: renderPayload, scrollWidth: scrollWidth };
+};
+
+export const getNumberOfDaysBetweenTwoDatesInQuarter = (startDate: Date, endDate: Date) => {
+  let weeksDifference: number = 0;
+
+  const timeDiff = Math.abs(endDate.getTime() - startDate.getTime());
+  const diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24));
+  weeksDifference = Math.floor(diffDays / 7);
+
+  return weeksDifference;
+};
diff --git a/apps/app/components/gantt-chart/views/week-view.ts b/apps/app/components/gantt-chart/views/week-view.ts
new file mode 100644
index 000000000..024b8d4e1
--- /dev/null
+++ b/apps/app/components/gantt-chart/views/week-view.ts
@@ -0,0 +1,163 @@
+// types
+import { ChartDataType } from "../types";
+// data
+import { weeks, months } from "../data";
+// helpers
+import {
+  generateDate,
+  getWeekNumberByDate,
+  getNumberOfDaysInMonth,
+  getDatesBetweenTwoDates,
+} from "./helpers";
+
+type GetAllDaysInMonthInMonthViewType = {
+  date: any;
+  day: any;
+  dayData: any;
+  weekNumber: number;
+  title: string;
+  active: boolean;
+  today: boolean;
+};
+const getAllDaysInMonthInMonthView = (month: number, year: number) => {
+  const day: GetAllDaysInMonthInMonthViewType[] = [];
+  const numberOfDaysInMonth = getNumberOfDaysInMonth(month, year);
+  const currentDate = new Date();
+
+  Array.from(Array(numberOfDaysInMonth).keys()).map((_day: number) => {
+    const date: Date = generateDate(_day + 1, month, year);
+    day.push({
+      date: date,
+      day: _day + 1,
+      dayData: weeks[date.getDay()],
+      weekNumber: getWeekNumberByDate(date),
+      title: `${weeks[date.getDay()].shortTitle} ${_day + 1}`,
+      active: false,
+      today:
+        currentDate.getFullYear() === year &&
+        currentDate.getMonth() === month &&
+        currentDate.getDate() === _day + 1
+          ? true
+          : false,
+    });
+  });
+
+  return day;
+};
+
+const generateMonthDataByMonthAndYearInMonthView = (month: number, year: number) => {
+  const currentMonth: number = month;
+  const currentYear: number = year;
+
+  const monthPayload = {
+    year: currentYear,
+    month: currentMonth,
+    monthData: months[currentMonth],
+    children: getAllDaysInMonthInMonthView(currentMonth, currentYear),
+    title: `${months[currentMonth].title} ${currentYear}`,
+  };
+
+  return monthPayload;
+};
+
+export const generateWeekChart = (monthPayload: ChartDataType, side: null | "left" | "right") => {
+  let renderState = monthPayload;
+  const renderPayload: any = [];
+
+  const range: number = renderState.data.approxFilterRange || 6;
+  let filteredDates: Date[] = [];
+  let minusDate: Date = new Date();
+  let plusDate: Date = new Date();
+
+  if (side === null) {
+    const currentDate = renderState.data.currentDate;
+
+    minusDate = new Date(
+      currentDate.getFullYear(),
+      currentDate.getMonth() - range,
+      currentDate.getDate()
+    );
+    plusDate = new Date(
+      currentDate.getFullYear(),
+      currentDate.getMonth() + range,
+      currentDate.getDate()
+    );
+
+    if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate);
+
+    renderState = {
+      ...renderState,
+      data: {
+        ...renderState.data,
+        startDate: filteredDates[0],
+        endDate: filteredDates[filteredDates.length - 1],
+      },
+    };
+  } else if (side === "left") {
+    const currentDate = renderState.data.startDate;
+
+    minusDate = new Date(
+      currentDate.getFullYear(),
+      currentDate.getMonth() - range,
+      currentDate.getDate()
+    );
+    plusDate = new Date(
+      currentDate.getFullYear(),
+      currentDate.getMonth() - 1,
+      currentDate.getDate()
+    );
+
+    if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate);
+
+    renderState = {
+      ...renderState,
+      data: { ...renderState.data, startDate: filteredDates[0] },
+    };
+  } else if (side === "right") {
+    const currentDate = renderState.data.endDate;
+
+    minusDate = new Date(
+      currentDate.getFullYear(),
+      currentDate.getMonth() + 1,
+      currentDate.getDate()
+    );
+    plusDate = new Date(
+      currentDate.getFullYear(),
+      currentDate.getMonth() + range,
+      currentDate.getDate()
+    );
+
+    if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate);
+
+    renderState = {
+      ...renderState,
+      data: { ...renderState.data, endDate: filteredDates[filteredDates.length - 1] },
+    };
+  }
+
+  if (filteredDates && filteredDates.length > 0)
+    for (const currentDate in filteredDates) {
+      const date = filteredDates[parseInt(currentDate)];
+      const currentYear = date.getFullYear();
+      const currentMonth = date.getMonth();
+      renderPayload.push(generateMonthDataByMonthAndYearInMonthView(currentMonth, currentYear));
+    }
+
+  const scrollWidth =
+    renderPayload
+      .map((monthData: any) => monthData.children.length)
+      .reduce((partialSum: number, a: number) => partialSum + a, 0) * monthPayload.data.width;
+
+  return { state: renderState, payload: renderPayload, scrollWidth: scrollWidth };
+};
+
+export const getNumberOfDaysBetweenTwoDatesInWeek = (startDate: Date, endDate: Date) => {
+  let daysDifference: number = 0;
+  startDate.setHours(0, 0, 0, 0);
+  endDate.setHours(0, 0, 0, 0);
+
+  const timeDifference: number = startDate.getTime() - endDate.getTime();
+  daysDifference = Math.abs(Math.floor(timeDifference / (1000 * 60 * 60 * 24)));
+
+  return daysDifference;
+};
diff --git a/apps/app/components/gantt-chart/views/year-view.ts b/apps/app/components/gantt-chart/views/year-view.ts
new file mode 100644
index 000000000..76edb0d57
--- /dev/null
+++ b/apps/app/components/gantt-chart/views/year-view.ts
@@ -0,0 +1,116 @@
+// types
+import { ChartDataType } from "../types";
+// data
+import { weeks, months } from "../data";
+// helpers
+import { getDatesBetweenTwoDates, getWeeksByMonthAndYear } from "./helpers";
+
+const generateMonthDataByMonthAndYearInMonthView = (month: number, year: number) => {
+  const currentMonth: number = month;
+  const currentYear: number = year;
+  const today = new Date();
+
+  const weeksBetweenTwoDates = getWeeksByMonthAndYear(month, year);
+
+  const weekPayload = {
+    year: currentYear,
+    month: currentMonth,
+    monthData: months[currentMonth],
+    children: weeksBetweenTwoDates.map((weekData: any) => {
+      const date: Date = weekData.startDate;
+      return {
+        date: date,
+        startDate: weekData.startDate,
+        endDate: weekData.endDate,
+        day: date.getDay(),
+        dayData: weeks[date.getDay()],
+        weekNumber: weekData.weekNumber,
+        title: `W${weekData.weekNumber} (${date.getDate()})`,
+        active: false,
+        today: today >= weekData.startDate && today <= weekData.endDate ? true : false,
+      };
+    }),
+    title: `${months[currentMonth].title} ${currentYear}`,
+  };
+
+  return weekPayload;
+};
+
+export const generateYearChart = (yearPayload: ChartDataType, side: null | "left" | "right") => {
+  let renderState = yearPayload;
+  const renderPayload: any = [];
+
+  const range: number = renderState.data.approxFilterRange || 6;
+  let filteredDates: Date[] = [];
+  let minusDate: Date = new Date();
+  let plusDate: Date = new Date();
+
+  if (side === null) {
+    const currentDate = renderState.data.currentDate;
+
+    minusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - range, 1);
+    plusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + range, 0);
+
+    if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate);
+
+    renderState = {
+      ...renderState,
+      data: {
+        ...renderState.data,
+        startDate: filteredDates[0],
+        endDate: filteredDates[filteredDates.length - 1],
+      },
+    };
+  } else if (side === "left") {
+    const currentDate = renderState.data.startDate;
+
+    minusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - range, 1);
+    plusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, 0);
+
+    if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate);
+
+    renderState = {
+      ...renderState,
+      data: { ...renderState.data, startDate: filteredDates[0] },
+    };
+  } else if (side === "right") {
+    const currentDate = renderState.data.endDate;
+
+    minusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 1);
+    plusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + range, 0);
+
+    if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate);
+
+    renderState = {
+      ...renderState,
+      data: { ...renderState.data, endDate: filteredDates[filteredDates.length - 1] },
+    };
+  }
+
+  if (filteredDates && filteredDates.length > 0)
+    for (const currentDate in filteredDates) {
+      const date = filteredDates[parseInt(currentDate)];
+      const currentYear = date.getFullYear();
+      const currentMonth = date.getMonth();
+      renderPayload.push(generateMonthDataByMonthAndYearInMonthView(currentMonth, currentYear));
+    }
+
+  const scrollWidth =
+    renderPayload
+      .map((monthData: any) => monthData.children.length)
+      .reduce((partialSum: number, a: number) => partialSum + a, 0) * yearPayload.data.width;
+
+  console.log("scrollWidth", scrollWidth);
+
+  return { state: renderState, payload: renderPayload, scrollWidth: scrollWidth };
+};
+
+export const getNumberOfDaysBetweenTwoDatesInYear = (startDate: Date, endDate: Date) => {
+  let weeksDifference: number = 0;
+
+  const timeDiff = Math.abs(endDate.getTime() - startDate.getTime());
+  const diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24));
+  weeksDifference = Math.floor(diffDays / 7);
+
+  return weeksDifference;
+};
diff --git a/apps/app/components/issues/gantt-chart.tsx b/apps/app/components/issues/gantt-chart.tsx
new file mode 100644
index 000000000..5e79822c5
--- /dev/null
+++ b/apps/app/components/issues/gantt-chart.tsx
@@ -0,0 +1,81 @@
+import { FC } from "react";
+
+import Link from "next/link";
+import { useRouter } from "next/router";
+
+// components
+import { GanttChartRoot } from "components/gantt-chart";
+// hooks
+import useGanttChartIssues from "hooks/gantt-chart/issue-view";
+
+type Props = {};
+
+export const IssueGanttChartView: FC<Props> = ({}) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { ganttIssues, mutateGanttIssues } = useGanttChartIssues(
+    workspaceSlug as string,
+    projectId as string
+  );
+
+  // rendering issues on gantt sidebar
+  const GanttSidebarBlockView = ({ data }: any) => (
+    <div className="relative flex w-full h-full items-center p-1 overflow-hidden gap-1">
+      <div
+        className="rounded-sm flex-shrink-0 w-[10px] h-[10px] flex justify-center items-center"
+        style={{ backgroundColor: data?.state_detail?.color || "#858e96" }}
+      />
+      <div className="text-brand-base text-sm">{data?.name}</div>
+    </div>
+  );
+
+  // rendering issues on gantt card
+  const GanttBlockView = ({ data }: any) => (
+    <div className="relative flex w-full h-full overflow-hidden">
+      <div
+        className="flex-shrink-0 w-[4px] h-auto"
+        style={{ backgroundColor: data?.state_detail?.color || "#858e96" }}
+      />
+      <div className="inline-block text-brand-base text-sm whitespace-nowrap py-[4px] px-1.5">
+        {data?.name}
+      </div>
+    </div>
+  );
+
+  // handle gantt issue start date and target date
+  const handleUpdateDates = async (data: any) => {
+    const payload = {
+      id: data?.id,
+      start_date: data?.start_date,
+      target_date: data?.target_date,
+    };
+
+    console.log("payload", payload);
+  };
+
+  const blockFormat = (blocks: any) =>
+    blocks && blocks.length > 0
+      ? blocks.map((_block: any) => {
+          if (_block?.start_date && _block.target_date) console.log("_block", _block);
+          return {
+            start_date: new Date(_block.created_at),
+            target_date: new Date(_block.updated_at),
+            data: _block,
+          };
+        })
+      : [];
+
+  return (
+    <div className="w-full h-full p-3">
+      <GanttChartRoot
+        title="Issues"
+        loaderTitle="Issues"
+        blocks={ganttIssues ? blockFormat(ganttIssues) : null}
+        blockUpdateHandler={handleUpdateDates}
+        sidebarBlockRender={(data: any) => <GanttSidebarBlockView data={data} />}
+        blockRender={(data: any) => <GanttBlockView data={data} />}
+      />
+    </div>
+  );
+};
diff --git a/apps/app/components/issues/modal.tsx b/apps/app/components/issues/modal.tsx
index acda96a84..de54e65b3 100644
--- a/apps/app/components/issues/modal.tsx
+++ b/apps/app/components/issues/modal.tsx
@@ -58,6 +58,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
 
   const { issueView, params } = useIssuesView();
   const { params: calendarParams } = useCalendarIssuesView();
+  const { order_by, group_by, ...viewGanttParams } = params;
 
   if (cycleId) prePopulateData = { ...prePopulateData, cycle: cycleId as string };
   if (moduleId) prePopulateData = { ...prePopulateData, module: moduleId as string };
@@ -135,7 +136,17 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
     ? VIEW_ISSUES(viewId.toString(), calendarParams)
     : PROJECT_ISSUES_LIST_WITH_PARAMS(projectId?.toString() ?? "", calendarParams);
 
+  const ganttFetchKey = cycleId
+    ? CYCLE_ISSUES_WITH_PARAMS(cycleId.toString())
+    : moduleId
+    ? MODULE_ISSUES_WITH_PARAMS(moduleId.toString())
+    : viewId
+    ? VIEW_ISSUES(viewId.toString(), viewGanttParams)
+    : PROJECT_ISSUES_LIST_WITH_PARAMS(projectId?.toString() ?? "");
+
   const createIssue = async (payload: Partial<IIssue>) => {
+    if (!workspaceSlug) return;
+
     await issuesService
       .createIssues(workspaceSlug as string, activeProject ?? "", payload)
       .then(async (res) => {
@@ -144,6 +155,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
         if (payload.module && payload.module !== "") await addIssueToModule(res.id, payload.module);
 
         if (issueView === "calendar") mutate(calendarFetchKey);
+        if (issueView === "gantt_chart") mutate(ganttFetchKey);
 
         if (!createMore) handleClose();
 
diff --git a/apps/app/components/modules/gantt-chart.tsx b/apps/app/components/modules/gantt-chart.tsx
new file mode 100644
index 000000000..edc24cfc9
--- /dev/null
+++ b/apps/app/components/modules/gantt-chart.tsx
@@ -0,0 +1,81 @@
+import { FC } from "react";
+
+import { useRouter } from "next/router";
+
+// components
+import { GanttChartRoot } from "components/gantt-chart";
+// hooks
+import useGanttChartModuleIssues from "hooks/gantt-chart/module-issues-view";
+
+type Props = {};
+
+export const ModuleIssuesGanttChartView: FC<Props> = ({}) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId, moduleId } = router.query;
+
+  const { ganttIssues, mutateGanttIssues } = useGanttChartModuleIssues(
+    workspaceSlug as string,
+    projectId as string,
+    moduleId as string
+  );
+
+  // rendering issues on gantt sidebar
+  const GanttSidebarBlockView = ({ data }: any) => (
+    <div className="relative flex w-full h-full items-center p-1 overflow-hidden gap-1">
+      <div
+        className="rounded-sm flex-shrink-0 w-[10px] h-[10px] flex justify-center items-center"
+        style={{ backgroundColor: data?.state_detail?.color || "#858e96" }}
+      />
+      <div className="text-brand-base text-sm">{data?.name}</div>
+    </div>
+  );
+
+  // rendering issues on gantt card
+  const GanttBlockView = ({ data }: any) => (
+    <div className="relative flex w-full h-full overflow-hidden">
+      <div
+        className="flex-shrink-0 w-[4px] h-auto"
+        style={{ backgroundColor: data?.state_detail?.color || "#858e96" }}
+      />
+      <div className="inline-block text-brand-base text-sm whitespace-nowrap py-[4px] px-1.5">
+        {data?.name}
+      </div>
+    </div>
+  );
+
+  // handle gantt issue start date and target date
+  const handleUpdateDates = async (data: any) => {
+    const payload = {
+      id: data?.id,
+      start_date: data?.start_date,
+      target_date: data?.target_date,
+    };
+
+    console.log("payload", payload);
+  };
+
+  const blockFormat = (blocks: any) =>
+    blocks && blocks.length > 0
+      ? blocks.map((_block: any) => {
+          if (_block?.start_date && _block.target_date) console.log("_block", _block);
+          return {
+            start_date: new Date(_block.created_at),
+            target_date: new Date(_block.updated_at),
+            data: _block,
+          };
+        })
+      : [];
+
+  return (
+    <div className="w-full h-full p-3">
+      <GanttChartRoot
+        title="Modules"
+        loaderTitle="Modules"
+        blocks={ganttIssues ? blockFormat(ganttIssues) : null}
+        blockUpdateHandler={handleUpdateDates}
+        sidebarBlockRender={(data: any) => <GanttSidebarBlockView data={data} />}
+        blockRender={(data: any) => <GanttBlockView data={data} />}
+      />
+    </div>
+  );
+};
diff --git a/apps/app/components/modules/index.ts b/apps/app/components/modules/index.ts
index 5ba7ea47e..5a5e2a4f1 100644
--- a/apps/app/components/modules/index.ts
+++ b/apps/app/components/modules/index.ts
@@ -2,6 +2,8 @@ export * from "./select";
 export * from "./sidebar-select";
 export * from "./delete-module-modal";
 export * from "./form";
+export * from "./gantt-chart";
 export * from "./modal";
+export * from "./modules-list-gantt-chart";
 export * from "./sidebar";
 export * from "./single-module-card";
diff --git a/apps/app/components/modules/modules-list-gantt-chart.tsx b/apps/app/components/modules/modules-list-gantt-chart.tsx
new file mode 100644
index 000000000..c6fbf329f
--- /dev/null
+++ b/apps/app/components/modules/modules-list-gantt-chart.tsx
@@ -0,0 +1,74 @@
+import { FC } from "react";
+
+// components
+import { GanttChartRoot } from "components/gantt-chart";
+// types
+import { IModule } from "types";
+// constants
+import { MODULE_STATUS } from "constants/module";
+
+type Props = {
+  modules: IModule[];
+};
+
+export const ModulesListGanttChartView: FC<Props> = ({ modules }) => {
+  // rendering issues on gantt sidebar
+  const GanttSidebarBlockView = ({ data }: any) => (
+    <div className="relative flex w-full h-full items-center p-1 overflow-hidden gap-1">
+      <div
+        className="rounded-sm flex-shrink-0 w-[10px] h-[10px] flex justify-center items-center"
+        style={{
+          backgroundColor: MODULE_STATUS.find((s) => s.value === data.status)?.color,
+        }}
+      />
+      <div className="text-brand-base text-sm">{data?.name}</div>
+    </div>
+  );
+
+  // rendering issues on gantt card
+  const GanttBlockView = ({ data }: { data: IModule }) => (
+    <div className="relative flex w-full h-full overflow-hidden">
+      <div
+        className="flex-shrink-0 w-[4px] h-auto"
+        style={{ backgroundColor: MODULE_STATUS.find((s) => s.value === data.status)?.color }}
+      />
+      <div className="inline-block text-brand-base text-sm whitespace-nowrap py-[4px] px-1.5">
+        {data?.name}
+      </div>
+    </div>
+  );
+
+  // handle gantt issue start date and target date
+  const handleUpdateDates = async (data: any) => {
+    const payload = {
+      id: data?.id,
+      start_date: data?.start_date,
+      target_date: data?.target_date,
+    };
+  };
+
+  const blockFormat = (blocks: any) =>
+    blocks && blocks.length > 0
+      ? blocks.map((_block: any) => {
+          if (_block?.start_date && _block.target_date) console.log("_block", _block);
+          return {
+            start_date: new Date(_block.created_at),
+            target_date: new Date(_block.updated_at),
+            data: _block,
+          };
+        })
+      : [];
+
+  return (
+    <div className="w-full h-full overflow-y-auto">
+      <GanttChartRoot
+        title="Modules"
+        loaderTitle="Modules"
+        blocks={modules ? blockFormat(modules) : null}
+        blockUpdateHandler={handleUpdateDates}
+        sidebarBlockRender={(data: any) => <GanttSidebarBlockView data={data} />}
+        blockRender={(data: any) => <GanttBlockView data={data} />}
+      />
+    </div>
+  );
+};
diff --git a/apps/app/components/views/gantt-chart.tsx b/apps/app/components/views/gantt-chart.tsx
new file mode 100644
index 000000000..dbe71fae0
--- /dev/null
+++ b/apps/app/components/views/gantt-chart.tsx
@@ -0,0 +1,81 @@
+import { FC } from "react";
+
+import { useRouter } from "next/router";
+
+// components
+import { GanttChartRoot } from "components/gantt-chart";
+// hooks
+import useGanttChartViewIssues from "hooks/gantt-chart/view-issues-view";
+
+type Props = {};
+
+export const ViewIssuesGanttChartView: FC<Props> = ({}) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId, viewId } = router.query;
+
+  const { ganttIssues, mutateGanttIssues } = useGanttChartViewIssues(
+    workspaceSlug as string,
+    projectId as string,
+    viewId as string
+  );
+
+  // rendering issues on gantt sidebar
+  const GanttSidebarBlockView = ({ data }: any) => (
+    <div className="relative flex w-full h-full items-center p-1 overflow-hidden gap-1">
+      <div
+        className="rounded-sm flex-shrink-0 w-[10px] h-[10px] flex justify-center items-center"
+        style={{ backgroundColor: data?.state_detail?.color || "#858e96" }}
+      />
+      <div className="text-brand-base text-sm">{data?.name}</div>
+    </div>
+  );
+
+  // rendering issues on gantt card
+  const GanttBlockView = ({ data }: any) => (
+    <div className="relative flex w-full h-full overflow-hidden">
+      <div
+        className="flex-shrink-0 w-[4px] h-auto"
+        style={{ backgroundColor: data?.state_detail?.color || "#858e96" }}
+      />
+      <div className="inline-block text-brand-base text-sm whitespace-nowrap py-[4px] px-1.5">
+        {data?.name}
+      </div>
+    </div>
+  );
+
+  // handle gantt issue start date and target date
+  const handleUpdateDates = async (data: any) => {
+    const payload = {
+      id: data?.id,
+      start_date: data?.start_date,
+      target_date: data?.target_date,
+    };
+
+    console.log("payload", payload);
+  };
+
+  const blockFormat = (blocks: any) =>
+    blocks && blocks.length > 0
+      ? blocks.map((_block: any) => {
+          if (_block?.start_date && _block.target_date) console.log("_block", _block);
+          return {
+            start_date: new Date(_block.created_at),
+            target_date: new Date(_block.updated_at),
+            data: _block,
+          };
+        })
+      : [];
+
+  return (
+    <div className="w-full h-full p-3">
+      <GanttChartRoot
+        title="Issue Views"
+        loaderTitle="Issue Views"
+        blocks={ganttIssues ? blockFormat(ganttIssues) : null}
+        blockUpdateHandler={handleUpdateDates}
+        sidebarBlockRender={(data: any) => <GanttSidebarBlockView data={data} />}
+        blockRender={(data: any) => <GanttBlockView data={data} />}
+      />
+    </div>
+  );
+};
diff --git a/apps/app/components/views/index.ts b/apps/app/components/views/index.ts
index 7a6307e56..a68740368 100644
--- a/apps/app/components/views/index.ts
+++ b/apps/app/components/views/index.ts
@@ -1,5 +1,6 @@
 export * from "./delete-view-modal";
 export * from "./form";
+export * from "./gantt-chart";
 export * from "./modal";
 export * from "./select-filters";
-export * from "./single-view-item"
+export * from "./single-view-item";
diff --git a/apps/app/hooks/gantt-chart/cycle-issues-view.tsx b/apps/app/hooks/gantt-chart/cycle-issues-view.tsx
new file mode 100644
index 000000000..1782ca339
--- /dev/null
+++ b/apps/app/hooks/gantt-chart/cycle-issues-view.tsx
@@ -0,0 +1,32 @@
+import useSWR from "swr";
+
+// services
+import cyclesService from "services/cycles.service";
+// fetch-keys
+import { CYCLE_ISSUES_WITH_PARAMS } from "constants/fetch-keys";
+
+const useGanttChartCycleIssues = (
+  workspaceSlug: string | undefined,
+  projectId: string | undefined,
+  cycleId: string | undefined
+) => {
+  // all issues under the workspace and project
+  const { data: ganttIssues, mutate: mutateGanttIssues } = useSWR(
+    workspaceSlug && projectId && cycleId ? CYCLE_ISSUES_WITH_PARAMS(cycleId.toString()) : null,
+    workspaceSlug && projectId && cycleId
+      ? () =>
+          cyclesService.getCycleIssuesWithParams(
+            workspaceSlug.toString(),
+            projectId.toString(),
+            cycleId.toString()
+          )
+      : null
+  );
+
+  return {
+    ganttIssues,
+    mutateGanttIssues,
+  };
+};
+
+export default useGanttChartCycleIssues;
diff --git a/apps/app/hooks/gantt-chart/issue-view.tsx b/apps/app/hooks/gantt-chart/issue-view.tsx
new file mode 100644
index 000000000..bcdb0fca4
--- /dev/null
+++ b/apps/app/hooks/gantt-chart/issue-view.tsx
@@ -0,0 +1,23 @@
+import useSWR from "swr";
+
+// services
+import issuesService from "services/issues.service";
+// fetch-keys
+import { PROJECT_ISSUES_LIST_WITH_PARAMS } from "constants/fetch-keys";
+
+const useGanttChartIssues = (workspaceSlug: string | undefined, projectId: string | undefined) => {
+  // all issues under the workspace and project
+  const { data: ganttIssues, mutate: mutateGanttIssues } = useSWR(
+    workspaceSlug && projectId ? PROJECT_ISSUES_LIST_WITH_PARAMS(projectId) : null,
+    workspaceSlug && projectId
+      ? () => issuesService.getIssuesWithParams(workspaceSlug.toString(), projectId.toString())
+      : null
+  );
+
+  return {
+    ganttIssues,
+    mutateGanttIssues,
+  };
+};
+
+export default useGanttChartIssues;
diff --git a/apps/app/hooks/gantt-chart/module-issues-view.tsx b/apps/app/hooks/gantt-chart/module-issues-view.tsx
new file mode 100644
index 000000000..baf995944
--- /dev/null
+++ b/apps/app/hooks/gantt-chart/module-issues-view.tsx
@@ -0,0 +1,32 @@
+import useSWR from "swr";
+
+// services
+import modulesService from "services/modules.service";
+// fetch-keys
+import { MODULE_ISSUES_WITH_PARAMS } from "constants/fetch-keys";
+
+const useGanttChartModuleIssues = (
+  workspaceSlug: string | undefined,
+  projectId: string | undefined,
+  moduleId: string | undefined
+) => {
+  // all issues under the workspace and project
+  const { data: ganttIssues, mutate: mutateGanttIssues } = useSWR(
+    workspaceSlug && projectId && moduleId ? MODULE_ISSUES_WITH_PARAMS(moduleId.toString()) : null,
+    workspaceSlug && projectId && moduleId
+      ? () =>
+          modulesService.getModuleIssuesWithParams(
+            workspaceSlug.toString(),
+            projectId.toString(),
+            moduleId.toString()
+          )
+      : null
+  );
+
+  return {
+    ganttIssues,
+    mutateGanttIssues,
+  };
+};
+
+export default useGanttChartModuleIssues;
diff --git a/apps/app/hooks/gantt-chart/view-issues-view.tsx b/apps/app/hooks/gantt-chart/view-issues-view.tsx
new file mode 100644
index 000000000..7fc138570
--- /dev/null
+++ b/apps/app/hooks/gantt-chart/view-issues-view.tsx
@@ -0,0 +1,37 @@
+import useSWR from "swr";
+
+// services
+import issuesService from "services/issues.service";
+// hooks
+import useIssuesView from "hooks/use-issues-view";
+// fetch-keys
+import { VIEW_ISSUES } from "constants/fetch-keys";
+
+const useGanttChartViewIssues = (
+  workspaceSlug: string | undefined,
+  projectId: string | undefined,
+  viewId: string | undefined
+) => {
+  const { params } = useIssuesView();
+  const { order_by, group_by, ...viewGanttParams } = params;
+
+  // all issues under the view
+  const { data: ganttIssues, mutate: mutateGanttIssues } = useSWR(
+    workspaceSlug && projectId && viewId ? VIEW_ISSUES(viewId.toString(), viewGanttParams) : null,
+    workspaceSlug && projectId && viewId
+      ? () =>
+          issuesService.getIssuesWithParams(
+            workspaceSlug.toString(),
+            projectId.toString(),
+            viewGanttParams
+          )
+      : null
+  );
+
+  return {
+    ganttIssues,
+    mutateGanttIssues,
+  };
+};
+
+export default useGanttChartViewIssues;
diff --git a/apps/app/layouts/app-layout/app-header.tsx b/apps/app/layouts/app-layout/app-header.tsx
index fb533da93..95f998dec 100644
--- a/apps/app/layouts/app-layout/app-header.tsx
+++ b/apps/app/layouts/app-layout/app-header.tsx
@@ -9,7 +9,7 @@ type Props = {
 };
 
 const Header: React.FC<Props> = ({ breadcrumbs, left, right, setToggleSidebar }) => (
-  <div className="relative flex w-full flex-shrink-0 flex-row items-center justify-between gap-y-4 border border-b border-brand-base bg-brand-sidebar px-5 py-4">
+  <div className="relative flex w-full flex-shrink-0 flex-row items-center justify-between gap-y-4 border-b border-brand-base bg-brand-sidebar px-5 py-4">
     <div className="flex items-center gap-2">
       <div className="block md:hidden">
         <button
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
index ff70bcdcb..377d20fae 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
@@ -116,17 +116,14 @@ const ProjectCycles: NextPage = () => {
         handleClose={() => setCreateUpdateCycleModal(false)}
         data={selectedCycle}
       />
-      <div className="space-y-8 p-8">
-        <div className="flex flex-col gap-5">
-          <h3 className="text-2xl font-semibold text-brand-base">Cycles</h3>
-          <CyclesView
-            setSelectedCycle={setSelectedCycle}
-            setCreateUpdateCycleModal={setCreateUpdateCycleModal}
-            cyclesCompleteList={cyclesCompleteList}
-            currentAndUpcomingCycles={currentAndUpcomingCycles}
-            draftCycles={draftCycles}
-          />
-        </div>
+      <div className="space-y-5 p-8 h-full flex flex-col overflow-hidden">
+        <CyclesView
+          setSelectedCycle={setSelectedCycle}
+          setCreateUpdateCycleModal={setCreateUpdateCycleModal}
+          cyclesCompleteList={cyclesCompleteList}
+          currentAndUpcomingCycles={currentAndUpcomingCycles}
+          draftCycles={draftCycles}
+        />
       </div>
     </ProjectAuthorizationWrapper>
   );
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx
index dc823c929..4a9b2f2bb 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx
@@ -10,12 +10,16 @@ import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
 import projectService from "services/project.service";
 import modulesService from "services/modules.service";
 // components
-import { CreateUpdateModuleModal, SingleModuleCard } from "components/modules";
+import {
+  CreateUpdateModuleModal,
+  ModulesListGanttChartView,
+  SingleModuleCard,
+} from "components/modules";
 // ui
 import { EmptyState, Loader, PrimaryButton } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
-import { PlusIcon } from "@heroicons/react/24/outline";
+import { ChartBarIcon, PlusIcon, Squares2X2Icon } from "@heroicons/react/24/outline";
 // images
 import emptyModule from "public/empty-state/empty-module.svg";
 // types
@@ -28,6 +32,8 @@ const ProjectModules: NextPage = () => {
   const [selectedModule, setSelectedModule] = useState<SelectModuleType>();
   const [createUpdateModule, setCreateUpdateModule] = useState(false);
 
+  const [modulesView, setModulesView] = useState<"grid" | "gantt_chart">("grid");
+
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
@@ -89,19 +95,44 @@ const ProjectModules: NextPage = () => {
       />
       {modules ? (
         modules.length > 0 ? (
-          <div className="space-y-5 p-8">
-            <div className="flex flex-col gap-5">
+          <div className="space-y-5 p-8 flex flex-col h-full overflow-hidden">
+            <div className="flex gap-4 justify-between">
               <h3 className="text-2xl font-semibold text-brand-base">Modules</h3>
-              <div className="grid grid-cols-1 gap-9 sm:grid-cols-2 lg:grid-cols-3">
-                {modules.map((module) => (
-                  <SingleModuleCard
-                    key={module.id}
-                    module={module}
-                    handleEditModule={() => handleEditModule(module)}
-                  />
-                ))}
+              <div className="flex items-center gap-x-1">
+                <button
+                  type="button"
+                  className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-2 ${
+                    modulesView === "grid" ? "bg-brand-surface-2" : ""
+                  }`}
+                  onClick={() => setModulesView("grid")}
+                >
+                  <Squares2X2Icon className="h-4 w-4 text-brand-secondary" />
+                </button>
+                <button
+                  type="button"
+                  className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-2 ${
+                    modulesView === "gantt_chart" ? "bg-brand-surface-2" : ""
+                  }`}
+                  onClick={() => setModulesView("gantt_chart")}
+                >
+                  <ChartBarIcon className="h-4 w-4 text-brand-secondary" />
+                </button>
               </div>
             </div>
+            {modulesView === "grid" && (
+              <div className="h-full overflow-y-auto">
+                <div className="grid grid-cols-1 gap-9 sm:grid-cols-2 lg:grid-cols-3">
+                  {modules.map((module) => (
+                    <SingleModuleCard
+                      key={module.id}
+                      module={module}
+                      handleEditModule={() => handleEditModule(module)}
+                    />
+                  ))}
+                </div>
+              </div>
+            )}
+            {modulesView === "gantt_chart" && <ModulesListGanttChartView modules={modules} />}
           </div>
         ) : (
           <EmptyState
diff --git a/apps/app/styles/globals.css b/apps/app/styles/globals.css
index 4bdd47dbe..2791b4c42 100644
--- a/apps/app/styles/globals.css
+++ b/apps/app/styles/globals.css
@@ -217,3 +217,11 @@ body {
 }
 
 /* end react datepicker styling */
+
+/* lineclamp */
+.lineclamp {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+}
diff --git a/apps/app/types/issues.d.ts b/apps/app/types/issues.d.ts
index 51cdf348e..5caabd131 100644
--- a/apps/app/types/issues.d.ts
+++ b/apps/app/types/issues.d.ts
@@ -263,7 +263,7 @@ export interface IIssueFilterOptions {
   created_by: string[] | null;
 }
 
-export type TIssueViewOptions = "list" | "kanban" | "calendar";
+export type TIssueViewOptions = "list" | "kanban" | "calendar" | "gantt_chart";
 
 export type TIssueGroupByOptions = "state" | "priority" | "labels" | "created_by" | null;
 

From ae67dc6074ff1e36a2729c9af36414ebc9097f53 Mon Sep 17 00:00:00 2001
From: guru_sainath <gurusainath007@gmail.com>
Date: Sat, 20 May 2023 20:08:17 +0530
Subject: [PATCH 68/81] update: changed icons for gantt chat in issues, modules
 and cycles (#1096)

---
 apps/app/components/core/issues-view-filter.tsx             | 6 ++++--
 apps/app/components/cycles/cycles-view.tsx                  | 6 ++++--
 .../[workspaceSlug]/projects/[projectId]/modules/index.tsx  | 6 ++++--
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/apps/app/components/core/issues-view-filter.tsx b/apps/app/components/core/issues-view-filter.tsx
index 64c6f8cfe..6856e8f8b 100644
--- a/apps/app/components/core/issues-view-filter.tsx
+++ b/apps/app/components/core/issues-view-filter.tsx
@@ -85,12 +85,14 @@ export const IssuesFilterView: React.FC = () => {
         </button>
         <button
           type="button"
-          className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-2 ${
+          className={`grid h-7 w-7 place-items-center rounded outline-none duration-300 hover:bg-brand-surface-2 ${
             issueView === "gantt_chart" ? "bg-brand-surface-2" : ""
           }`}
           onClick={() => setIssueView("gantt_chart")}
         >
-          <ChartBarIcon className="h-4 w-4 text-brand-secondary" />
+          <span className="material-symbols-rounded text-brand-secondary text-[18px] rotate-90">
+            waterfall_chart
+          </span>
         </button>
       </div>
       <SelectFilters
diff --git a/apps/app/components/cycles/cycles-view.tsx b/apps/app/components/cycles/cycles-view.tsx
index 9f7ad3922..c0a5da836 100644
--- a/apps/app/components/cycles/cycles-view.tsx
+++ b/apps/app/components/cycles/cycles-view.tsx
@@ -97,12 +97,14 @@ export const CyclesView: React.FC<Props> = ({
           </button>
           <button
             type="button"
-            className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-2 ${
+            className={`grid h-7 w-7 place-items-center rounded outline-none duration-300 hover:bg-brand-surface-2 ${
               cyclesView === "gantt_chart" ? "bg-brand-surface-2" : ""
             }`}
             onClick={() => setCyclesView("gantt_chart")}
           >
-            <ChartBarIcon className="h-4 w-4 text-brand-secondary" />
+            <span className="material-symbols-rounded text-brand-secondary text-[18px] rotate-90">
+              waterfall_chart
+            </span>
           </button>
         </div>
       </div>
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx
index 4a9b2f2bb..3fa24e332 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx
@@ -110,12 +110,14 @@ const ProjectModules: NextPage = () => {
                 </button>
                 <button
                   type="button"
-                  className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-2 ${
+                  className={`grid h-7 w-7 place-items-center rounded outline-none duration-300 hover:bg-brand-surface-2 ${
                     modulesView === "gantt_chart" ? "bg-brand-surface-2" : ""
                   }`}
                   onClick={() => setModulesView("gantt_chart")}
                 >
-                  <ChartBarIcon className="h-4 w-4 text-brand-secondary" />
+                  <span className="material-symbols-rounded text-brand-secondary text-[18px] rotate-90">
+                    waterfall_chart
+                  </span>
                 </button>
               </div>
             </div>

From 8b527f27d01217dac117a85a1f849a5d1c43ac09 Mon Sep 17 00:00:00 2001
From: gurusainath <gurusainath007@gmail.com>
Date: Sat, 20 May 2023 20:18:22 +0530
Subject: [PATCH 69/81] dev: migrations for the analytics fields

---
 .../db/migrations/0032_auto_20230520_2015.py  | 23 +++++++++++++++++++
 1 file changed, 23 insertions(+)
 create mode 100644 apiserver/plane/db/migrations/0032_auto_20230520_2015.py

diff --git a/apiserver/plane/db/migrations/0032_auto_20230520_2015.py b/apiserver/plane/db/migrations/0032_auto_20230520_2015.py
new file mode 100644
index 000000000..27c13537e
--- /dev/null
+++ b/apiserver/plane/db/migrations/0032_auto_20230520_2015.py
@@ -0,0 +1,23 @@
+# Generated by Django 3.2.19 on 2023-05-20 14:45
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('db', '0031_analyticview'),
+    ]
+
+    operations = [
+        migrations.RenameField(
+            model_name='project',
+            old_name='icon',
+            new_name='emoji',
+        ),
+        migrations.AddField(
+            model_name='project',
+            name='icon_prop',
+            field=models.JSONField(null=True),
+        ),
+    ]

From 98a223e5e149f698918ab4cd4aca69ca174f48fc Mon Sep 17 00:00:00 2001
From: anmolsinghbhatia <anmolsinghbhatia@caravel.tech>
Date: Sat, 20 May 2023 22:24:05 +0530
Subject: [PATCH 70/81] fix: cycle view board view fix , feat: on gantt view
 set all cycle as default tab

---
 .../app/components/cycles/completed-cycles.tsx |  8 --------
 apps/app/components/cycles/cycles-view.tsx     | 18 ++++++++++++------
 2 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/apps/app/components/cycles/completed-cycles.tsx b/apps/app/components/cycles/completed-cycles.tsx
index 738b6c5fb..36ef691f5 100644
--- a/apps/app/components/cycles/completed-cycles.tsx
+++ b/apps/app/components/cycles/completed-cycles.tsx
@@ -104,14 +104,6 @@ export const CompletedCycles: React.FC<CompletedCyclesListProps> = ({
                 ))}
               </div>
             )}
-            {cycleView === "gantt" && (
-              <EmptyState
-                type="cycle"
-                title="Create New Cycle"
-                description="Sprint more effectively with Cycles by confining your project to a fixed amount of time. Create new cycle now."
-                imgURL={emptyCycle}
-              />
-            )}
           </div>
         ) : (
           <EmptyState
diff --git a/apps/app/components/cycles/cycles-view.tsx b/apps/app/components/cycles/cycles-view.tsx
index c0a5da836..aedd82ba3 100644
--- a/apps/app/components/cycles/cycles-view.tsx
+++ b/apps/app/components/cycles/cycles-view.tsx
@@ -89,9 +89,9 @@ export const CyclesView: React.FC<Props> = ({
           <button
             type="button"
             className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-2 ${
-              cyclesView === "grid" ? "bg-brand-surface-2" : ""
+              cyclesView === "board" ? "bg-brand-surface-2" : ""
             }`}
-            onClick={() => setCyclesView("grid")}
+            onClick={() => setCyclesView("board")}
           >
             <Squares2X2Icon className="h-4 w-4 text-brand-secondary" />
           </button>
@@ -100,7 +100,10 @@ export const CyclesView: React.FC<Props> = ({
             className={`grid h-7 w-7 place-items-center rounded outline-none duration-300 hover:bg-brand-surface-2 ${
               cyclesView === "gantt_chart" ? "bg-brand-surface-2" : ""
             }`}
-            onClick={() => setCyclesView("gantt_chart")}
+            onClick={() => {
+              setCyclesView("gantt_chart");
+              setCycleTab("All");
+            }}
           >
             <span className="material-symbols-rounded text-brand-secondary text-[18px] rotate-90">
               waterfall_chart
@@ -111,6 +114,7 @@ export const CyclesView: React.FC<Props> = ({
       <Tab.Group
         as={React.Fragment}
         defaultIndex={currentTabValue(cycleTab)}
+        selectedIndex={currentTabValue(cycleTab)}
         onChange={(i) => {
           switch (i) {
             case 0:
@@ -123,7 +127,6 @@ export const CyclesView: React.FC<Props> = ({
               return setCycleTab("Completed");
             case 4:
               return setCycleTab("Drafts");
-
             default:
               return setCycleTab("All");
           }
@@ -132,7 +135,10 @@ export const CyclesView: React.FC<Props> = ({
         <div className="flex justify-between">
           <Tab.List as="div" className="flex flex-wrap items-center justify-start gap-4 text-base">
             {["All", "Active", "Upcoming", "Completed", "Drafts"].map((tab, index) => {
-              if (cyclesView === "gantt_chart" && (tab === "Active" || tab === "Drafts"))
+              if (
+                cyclesView === "gantt_chart" &&
+                (tab === "Active" || tab === "Drafts" || tab === "Completed")
+              )
                 return null;
 
               return (
@@ -162,7 +168,7 @@ export const CyclesView: React.FC<Props> = ({
                 type="current"
               />
             )}
-            {cyclesView === "grid" && (
+            {cyclesView === "board" && (
               <AllCyclesBoard
                 cycles={cyclesCompleteList}
                 setCreateUpdateCycleModal={setCreateUpdateCycleModal}

From 44397407682ec2bc6cda14cc5ca2a9aeb1001fed Mon Sep 17 00:00:00 2001
From: anmolsinghbhatia <anmolsinghbhatia@caravel.tech>
Date: Sat, 20 May 2023 22:30:44 +0530
Subject: [PATCH 71/81] fix: create label modal error message updated

---
 .../components/labels/create-label-modal.tsx  | 28 ++++++++++---------
 1 file changed, 15 insertions(+), 13 deletions(-)

diff --git a/apps/app/components/labels/create-label-modal.tsx b/apps/app/components/labels/create-label-modal.tsx
index 3f1b4d647..858f7f7b5 100644
--- a/apps/app/components/labels/create-label-modal.tsx
+++ b/apps/app/components/labels/create-label-modal.tsx
@@ -156,19 +156,21 @@ export const CreateLabelModal: React.FC<Props> = ({ isOpen, projectId, handleClo
                           </>
                         )}
                       </Popover>
-                      <Input
-                        type="text"
-                        id="name"
-                        name="name"
-                        placeholder="Label title"
-                        autoComplete="off"
-                        error={errors.name}
-                        register={register}
-                        width="full"
-                        validations={{
-                          required: "Name is required",
-                        }}
-                      />
+                      <div className="flex w-full flex-col gap-0.5 justify-center">
+                        <Input
+                          type="text"
+                          id="name"
+                          name="name"
+                          placeholder="Label title"
+                          autoComplete="off"
+                          error={errors.name}
+                          register={register}
+                          width="full"
+                          validations={{
+                            required: "Label title is required",
+                          }}
+                        />
+                      </div>
                     </div>
                   </div>
                   <div className="mt-5 flex justify-end gap-2">

From c1f8766571294eef77085f9b57be380c4bacc263 Mon Sep 17 00:00:00 2001
From: gurusainath <gurusainath007@gmail.com>
Date: Sat, 20 May 2023 23:10:04 +0530
Subject: [PATCH 72/81] styles: UI changes in the gantt blocks

---
 .../components/cycles/cycles-list-gantt-chart.tsx    |  6 +++---
 apps/app/components/cycles/gantt-chart.tsx           |  6 +++---
 apps/app/components/gantt-chart/blocks/index.tsx     | 12 +++++-------
 apps/app/components/gantt-chart/chart/index.tsx      |  2 +-
 apps/app/components/gantt-chart/views/month-view.ts  |  2 +-
 apps/app/components/issues/gantt-chart.tsx           |  6 +++---
 apps/app/components/modules/gantt-chart.tsx          |  6 +++---
 .../components/modules/modules-list-gantt-chart.tsx  |  6 +++---
 apps/app/components/views/gantt-chart.tsx            |  6 +++---
 9 files changed, 25 insertions(+), 27 deletions(-)

diff --git a/apps/app/components/cycles/cycles-list-gantt-chart.tsx b/apps/app/components/cycles/cycles-list-gantt-chart.tsx
index 2b783f4e2..ad298e79d 100644
--- a/apps/app/components/cycles/cycles-list-gantt-chart.tsx
+++ b/apps/app/components/cycles/cycles-list-gantt-chart.tsx
@@ -23,9 +23,9 @@ export const CyclesListGanttChartView: FC<Props> = ({ cycles }) => {
 
   // rendering issues on gantt card
   const GanttBlockView = ({ data }: { data: ICycle }) => (
-    <div className="relative flex w-full h-full overflow-hidden">
-      <div className="flex-shrink-0 w-[4px] h-auto" style={{ backgroundColor: "#858e96" }} />
-      <div className="inline-block text-brand-base text-sm whitespace-nowrap py-[4px] px-1.5">
+    <div className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
+      <div className="flex-shrink-0 w-[4px] h-full" style={{ backgroundColor: "#858e96" }} />
+      <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
         {data?.name}
       </div>
     </div>
diff --git a/apps/app/components/cycles/gantt-chart.tsx b/apps/app/components/cycles/gantt-chart.tsx
index d38ad727b..04de7afb7 100644
--- a/apps/app/components/cycles/gantt-chart.tsx
+++ b/apps/app/components/cycles/gantt-chart.tsx
@@ -32,12 +32,12 @@ export const CycleIssuesGanttChartView: FC<Props> = ({}) => {
 
   // rendering issues on gantt card
   const GanttBlockView = ({ data }: any) => (
-    <div className="relative flex w-full h-full overflow-hidden">
+    <div className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
       <div
-        className="flex-shrink-0 w-[4px] h-auto"
+        className="flex-shrink-0 w-[4px] h-full"
         style={{ backgroundColor: data?.state_detail?.color || "#858e96" }}
       />
-      <div className="inline-block text-brand-base text-sm whitespace-nowrap py-[4px] px-1.5">
+      <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
         {data?.name}
       </div>
     </div>
diff --git a/apps/app/components/gantt-chart/blocks/index.tsx b/apps/app/components/gantt-chart/blocks/index.tsx
index 24ee4d39e..113ca8964 100644
--- a/apps/app/components/gantt-chart/blocks/index.tsx
+++ b/apps/app/components/gantt-chart/blocks/index.tsx
@@ -21,14 +21,14 @@ export const GanttChartBlocks: FC<{
       className="relative z-10 mt-[58px] h-full w-[4000px] divide-x divide-gray-300 overflow-hidden overflow-y-auto bg-[#999] bg-opacity-5"
       style={{ width: `${itemsContainerWidth}px` }}
     >
-      <div className="w-full divide-y divide-brand-base">
+      <div className="w-full">
         {blocks &&
           blocks.length > 0 &&
           blocks.map((block: any, _idx: number) => (
             <>
               {block.start_date && block.target_date && (
                 <ChartDraggable
-                  className="relative flex h-[36.5px] items-center"
+                  className="relative flex h-[40px] items-center"
                   key={`blocks-${_idx}`}
                   block={block}
                   handleBlock={handleChartBlockPosition}
@@ -44,14 +44,12 @@ export const GanttChartBlocks: FC<{
                     </div>
 
                     <div
-                      className="rounded-sm shadow-sm bg-brand-base overflow-hidden relative flex items-center"
+                      className="rounded-sm shadow-sm bg-brand-base overflow-hidden relative flex items-center h-[34px] border border-brand-base"
                       style={{
                         width: `${block?.position?.width}px`,
                       }}
                     >
-                      <div className="w-full h-full relative overflow-hidden">
-                        {blockRender({ ...block?.data })}
-                      </div>
+                      {blockRender({ ...block?.data })}
                     </div>
 
                     <div className="flex-shrink-0 relative w-0 h-0 flex items-center invisible group-hover:visible whitespace-nowrap">
@@ -71,7 +69,7 @@ export const GanttChartBlocks: FC<{
         {blocks &&
           blocks.length > 0 &&
           blocks.map((block: any, _idx: number) => (
-            <div className="relative h-[36.5px] bg-brand-base" key={`sidebar-blocks-${_idx}`}>
+            <div className="relative h-[40px] bg-brand-base" key={`sidebar-blocks-${_idx}`}>
               {sidebarBlockRender(block?.data)}
             </div>
           ))}
diff --git a/apps/app/components/gantt-chart/chart/index.tsx b/apps/app/components/gantt-chart/chart/index.tsx
index a1b80ef84..6724c3552 100644
--- a/apps/app/components/gantt-chart/chart/index.tsx
+++ b/apps/app/components/gantt-chart/chart/index.tsx
@@ -214,7 +214,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
     <div
       className={`${
         fullScreenMode ? `fixed top-0 bottom-0 left-0 right-0 z-[999999] bg-brand-base` : `relative`
-      } flex h-full flex-col rounded-sm border border-brand-base select-none`}
+      } flex h-full flex-col rounded-sm border border-brand-base select-none bg-brand-base shadow`}
     >
       {/* chart title */}
       <div className="flex w-full flex-shrink-0 flex-wrap items-center gap-5 gap-y-3 whitespace-nowrap p-2 border-b border-brand-base">
diff --git a/apps/app/components/gantt-chart/views/month-view.ts b/apps/app/components/gantt-chart/views/month-view.ts
index df537ba5e..7211a45eb 100644
--- a/apps/app/components/gantt-chart/views/month-view.ts
+++ b/apps/app/components/gantt-chart/views/month-view.ts
@@ -184,7 +184,7 @@ export const getMonthChartItemPositionWidthInMonth = (chartData: ChartDataType,
   diffMonths -= startDate.getMonth();
   diffMonths += itemStartDate.getMonth();
 
-  scrollPosition = scrollPosition + diffMonths - 1;
+  scrollPosition = scrollPosition + diffMonths;
   // position code ends
 
   // width code starts
diff --git a/apps/app/components/issues/gantt-chart.tsx b/apps/app/components/issues/gantt-chart.tsx
index 5e79822c5..b35d4a749 100644
--- a/apps/app/components/issues/gantt-chart.tsx
+++ b/apps/app/components/issues/gantt-chart.tsx
@@ -32,12 +32,12 @@ export const IssueGanttChartView: FC<Props> = ({}) => {
 
   // rendering issues on gantt card
   const GanttBlockView = ({ data }: any) => (
-    <div className="relative flex w-full h-full overflow-hidden">
+    <div className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
       <div
-        className="flex-shrink-0 w-[4px] h-auto"
+        className="flex-shrink-0 w-[4px] h-full"
         style={{ backgroundColor: data?.state_detail?.color || "#858e96" }}
       />
-      <div className="inline-block text-brand-base text-sm whitespace-nowrap py-[4px] px-1.5">
+      <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
         {data?.name}
       </div>
     </div>
diff --git a/apps/app/components/modules/gantt-chart.tsx b/apps/app/components/modules/gantt-chart.tsx
index edc24cfc9..0d11da2c0 100644
--- a/apps/app/components/modules/gantt-chart.tsx
+++ b/apps/app/components/modules/gantt-chart.tsx
@@ -32,12 +32,12 @@ export const ModuleIssuesGanttChartView: FC<Props> = ({}) => {
 
   // rendering issues on gantt card
   const GanttBlockView = ({ data }: any) => (
-    <div className="relative flex w-full h-full overflow-hidden">
+    <div className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
       <div
-        className="flex-shrink-0 w-[4px] h-auto"
+        className="flex-shrink-0 w-[4px] h-full"
         style={{ backgroundColor: data?.state_detail?.color || "#858e96" }}
       />
-      <div className="inline-block text-brand-base text-sm whitespace-nowrap py-[4px] px-1.5">
+      <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
         {data?.name}
       </div>
     </div>
diff --git a/apps/app/components/modules/modules-list-gantt-chart.tsx b/apps/app/components/modules/modules-list-gantt-chart.tsx
index c6fbf329f..edff17a95 100644
--- a/apps/app/components/modules/modules-list-gantt-chart.tsx
+++ b/apps/app/components/modules/modules-list-gantt-chart.tsx
@@ -27,12 +27,12 @@ export const ModulesListGanttChartView: FC<Props> = ({ modules }) => {
 
   // rendering issues on gantt card
   const GanttBlockView = ({ data }: { data: IModule }) => (
-    <div className="relative flex w-full h-full overflow-hidden">
+    <div className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
       <div
-        className="flex-shrink-0 w-[4px] h-auto"
+        className="flex-shrink-0 w-[4px] h-full"
         style={{ backgroundColor: MODULE_STATUS.find((s) => s.value === data.status)?.color }}
       />
-      <div className="inline-block text-brand-base text-sm whitespace-nowrap py-[4px] px-1.5">
+      <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
         {data?.name}
       </div>
     </div>
diff --git a/apps/app/components/views/gantt-chart.tsx b/apps/app/components/views/gantt-chart.tsx
index dbe71fae0..461f46835 100644
--- a/apps/app/components/views/gantt-chart.tsx
+++ b/apps/app/components/views/gantt-chart.tsx
@@ -32,12 +32,12 @@ export const ViewIssuesGanttChartView: FC<Props> = ({}) => {
 
   // rendering issues on gantt card
   const GanttBlockView = ({ data }: any) => (
-    <div className="relative flex w-full h-full overflow-hidden">
+    <div className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
       <div
-        className="flex-shrink-0 w-[4px] h-auto"
+        className="flex-shrink-0 w-[4px] h-full"
         style={{ backgroundColor: data?.state_detail?.color || "#858e96" }}
       />
-      <div className="inline-block text-brand-base text-sm whitespace-nowrap py-[4px] px-1.5">
+      <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
         {data?.name}
       </div>
     </div>

From cba62f07c064761260b956646a62f30667e13b1e Mon Sep 17 00:00:00 2001
From: pablohashescobar <118773738+pablohashescobar@users.noreply.github.com>
Date: Sat, 20 May 2023 23:16:19 +0530
Subject: [PATCH 73/81] chore: analytic export mail (#1098)

---
 apiserver/templates/emails/exports/analytics.html | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/apiserver/templates/emails/exports/analytics.html b/apiserver/templates/emails/exports/analytics.html
index 248c5513c..f5611705e 100644
--- a/apiserver/templates/emails/exports/analytics.html
+++ b/apiserver/templates/emails/exports/analytics.html
@@ -1,4 +1,8 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html>
-    Your Export is ready
+    Hey there,<br/>
+    Your requested data export from Plane Analytics is now ready. The information has been compiled into a CSV format for your convenience.<br/>
+    Please find the attachment and download the CSV file. This file can easily be imported into any spreadsheet program for further analysis.<br/>
+    If you require any assistance or have any questions, please do not hesitate to contact us.<br/>
+    Thank you
 </html>

From a01e24152350530fa4c5d11d07de5f53e363d393 Mon Sep 17 00:00:00 2001
From: guru_sainath <gurusainath007@gmail.com>
Date: Sat, 20 May 2023 23:17:44 +0530
Subject: [PATCH 74/81] styles: UI changes in the gantt blocks (#1099)

---
 .../components/cycles/cycles-list-gantt-chart.tsx    |  6 +++---
 apps/app/components/cycles/gantt-chart.tsx           |  6 +++---
 apps/app/components/gantt-chart/blocks/index.tsx     | 12 +++++-------
 apps/app/components/gantt-chart/chart/index.tsx      |  2 +-
 apps/app/components/gantt-chart/views/month-view.ts  |  2 +-
 apps/app/components/issues/gantt-chart.tsx           |  6 +++---
 apps/app/components/modules/gantt-chart.tsx          |  6 +++---
 .../components/modules/modules-list-gantt-chart.tsx  |  6 +++---
 apps/app/components/views/gantt-chart.tsx            |  6 +++---
 9 files changed, 25 insertions(+), 27 deletions(-)

diff --git a/apps/app/components/cycles/cycles-list-gantt-chart.tsx b/apps/app/components/cycles/cycles-list-gantt-chart.tsx
index 2b783f4e2..ad298e79d 100644
--- a/apps/app/components/cycles/cycles-list-gantt-chart.tsx
+++ b/apps/app/components/cycles/cycles-list-gantt-chart.tsx
@@ -23,9 +23,9 @@ export const CyclesListGanttChartView: FC<Props> = ({ cycles }) => {
 
   // rendering issues on gantt card
   const GanttBlockView = ({ data }: { data: ICycle }) => (
-    <div className="relative flex w-full h-full overflow-hidden">
-      <div className="flex-shrink-0 w-[4px] h-auto" style={{ backgroundColor: "#858e96" }} />
-      <div className="inline-block text-brand-base text-sm whitespace-nowrap py-[4px] px-1.5">
+    <div className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
+      <div className="flex-shrink-0 w-[4px] h-full" style={{ backgroundColor: "#858e96" }} />
+      <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
         {data?.name}
       </div>
     </div>
diff --git a/apps/app/components/cycles/gantt-chart.tsx b/apps/app/components/cycles/gantt-chart.tsx
index d38ad727b..04de7afb7 100644
--- a/apps/app/components/cycles/gantt-chart.tsx
+++ b/apps/app/components/cycles/gantt-chart.tsx
@@ -32,12 +32,12 @@ export const CycleIssuesGanttChartView: FC<Props> = ({}) => {
 
   // rendering issues on gantt card
   const GanttBlockView = ({ data }: any) => (
-    <div className="relative flex w-full h-full overflow-hidden">
+    <div className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
       <div
-        className="flex-shrink-0 w-[4px] h-auto"
+        className="flex-shrink-0 w-[4px] h-full"
         style={{ backgroundColor: data?.state_detail?.color || "#858e96" }}
       />
-      <div className="inline-block text-brand-base text-sm whitespace-nowrap py-[4px] px-1.5">
+      <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
         {data?.name}
       </div>
     </div>
diff --git a/apps/app/components/gantt-chart/blocks/index.tsx b/apps/app/components/gantt-chart/blocks/index.tsx
index 24ee4d39e..113ca8964 100644
--- a/apps/app/components/gantt-chart/blocks/index.tsx
+++ b/apps/app/components/gantt-chart/blocks/index.tsx
@@ -21,14 +21,14 @@ export const GanttChartBlocks: FC<{
       className="relative z-10 mt-[58px] h-full w-[4000px] divide-x divide-gray-300 overflow-hidden overflow-y-auto bg-[#999] bg-opacity-5"
       style={{ width: `${itemsContainerWidth}px` }}
     >
-      <div className="w-full divide-y divide-brand-base">
+      <div className="w-full">
         {blocks &&
           blocks.length > 0 &&
           blocks.map((block: any, _idx: number) => (
             <>
               {block.start_date && block.target_date && (
                 <ChartDraggable
-                  className="relative flex h-[36.5px] items-center"
+                  className="relative flex h-[40px] items-center"
                   key={`blocks-${_idx}`}
                   block={block}
                   handleBlock={handleChartBlockPosition}
@@ -44,14 +44,12 @@ export const GanttChartBlocks: FC<{
                     </div>
 
                     <div
-                      className="rounded-sm shadow-sm bg-brand-base overflow-hidden relative flex items-center"
+                      className="rounded-sm shadow-sm bg-brand-base overflow-hidden relative flex items-center h-[34px] border border-brand-base"
                       style={{
                         width: `${block?.position?.width}px`,
                       }}
                     >
-                      <div className="w-full h-full relative overflow-hidden">
-                        {blockRender({ ...block?.data })}
-                      </div>
+                      {blockRender({ ...block?.data })}
                     </div>
 
                     <div className="flex-shrink-0 relative w-0 h-0 flex items-center invisible group-hover:visible whitespace-nowrap">
@@ -71,7 +69,7 @@ export const GanttChartBlocks: FC<{
         {blocks &&
           blocks.length > 0 &&
           blocks.map((block: any, _idx: number) => (
-            <div className="relative h-[36.5px] bg-brand-base" key={`sidebar-blocks-${_idx}`}>
+            <div className="relative h-[40px] bg-brand-base" key={`sidebar-blocks-${_idx}`}>
               {sidebarBlockRender(block?.data)}
             </div>
           ))}
diff --git a/apps/app/components/gantt-chart/chart/index.tsx b/apps/app/components/gantt-chart/chart/index.tsx
index a1b80ef84..6724c3552 100644
--- a/apps/app/components/gantt-chart/chart/index.tsx
+++ b/apps/app/components/gantt-chart/chart/index.tsx
@@ -214,7 +214,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
     <div
       className={`${
         fullScreenMode ? `fixed top-0 bottom-0 left-0 right-0 z-[999999] bg-brand-base` : `relative`
-      } flex h-full flex-col rounded-sm border border-brand-base select-none`}
+      } flex h-full flex-col rounded-sm border border-brand-base select-none bg-brand-base shadow`}
     >
       {/* chart title */}
       <div className="flex w-full flex-shrink-0 flex-wrap items-center gap-5 gap-y-3 whitespace-nowrap p-2 border-b border-brand-base">
diff --git a/apps/app/components/gantt-chart/views/month-view.ts b/apps/app/components/gantt-chart/views/month-view.ts
index df537ba5e..7211a45eb 100644
--- a/apps/app/components/gantt-chart/views/month-view.ts
+++ b/apps/app/components/gantt-chart/views/month-view.ts
@@ -184,7 +184,7 @@ export const getMonthChartItemPositionWidthInMonth = (chartData: ChartDataType,
   diffMonths -= startDate.getMonth();
   diffMonths += itemStartDate.getMonth();
 
-  scrollPosition = scrollPosition + diffMonths - 1;
+  scrollPosition = scrollPosition + diffMonths;
   // position code ends
 
   // width code starts
diff --git a/apps/app/components/issues/gantt-chart.tsx b/apps/app/components/issues/gantt-chart.tsx
index 5e79822c5..b35d4a749 100644
--- a/apps/app/components/issues/gantt-chart.tsx
+++ b/apps/app/components/issues/gantt-chart.tsx
@@ -32,12 +32,12 @@ export const IssueGanttChartView: FC<Props> = ({}) => {
 
   // rendering issues on gantt card
   const GanttBlockView = ({ data }: any) => (
-    <div className="relative flex w-full h-full overflow-hidden">
+    <div className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
       <div
-        className="flex-shrink-0 w-[4px] h-auto"
+        className="flex-shrink-0 w-[4px] h-full"
         style={{ backgroundColor: data?.state_detail?.color || "#858e96" }}
       />
-      <div className="inline-block text-brand-base text-sm whitespace-nowrap py-[4px] px-1.5">
+      <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
         {data?.name}
       </div>
     </div>
diff --git a/apps/app/components/modules/gantt-chart.tsx b/apps/app/components/modules/gantt-chart.tsx
index edc24cfc9..0d11da2c0 100644
--- a/apps/app/components/modules/gantt-chart.tsx
+++ b/apps/app/components/modules/gantt-chart.tsx
@@ -32,12 +32,12 @@ export const ModuleIssuesGanttChartView: FC<Props> = ({}) => {
 
   // rendering issues on gantt card
   const GanttBlockView = ({ data }: any) => (
-    <div className="relative flex w-full h-full overflow-hidden">
+    <div className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
       <div
-        className="flex-shrink-0 w-[4px] h-auto"
+        className="flex-shrink-0 w-[4px] h-full"
         style={{ backgroundColor: data?.state_detail?.color || "#858e96" }}
       />
-      <div className="inline-block text-brand-base text-sm whitespace-nowrap py-[4px] px-1.5">
+      <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
         {data?.name}
       </div>
     </div>
diff --git a/apps/app/components/modules/modules-list-gantt-chart.tsx b/apps/app/components/modules/modules-list-gantt-chart.tsx
index c6fbf329f..edff17a95 100644
--- a/apps/app/components/modules/modules-list-gantt-chart.tsx
+++ b/apps/app/components/modules/modules-list-gantt-chart.tsx
@@ -27,12 +27,12 @@ export const ModulesListGanttChartView: FC<Props> = ({ modules }) => {
 
   // rendering issues on gantt card
   const GanttBlockView = ({ data }: { data: IModule }) => (
-    <div className="relative flex w-full h-full overflow-hidden">
+    <div className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
       <div
-        className="flex-shrink-0 w-[4px] h-auto"
+        className="flex-shrink-0 w-[4px] h-full"
         style={{ backgroundColor: MODULE_STATUS.find((s) => s.value === data.status)?.color }}
       />
-      <div className="inline-block text-brand-base text-sm whitespace-nowrap py-[4px] px-1.5">
+      <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
         {data?.name}
       </div>
     </div>
diff --git a/apps/app/components/views/gantt-chart.tsx b/apps/app/components/views/gantt-chart.tsx
index dbe71fae0..461f46835 100644
--- a/apps/app/components/views/gantt-chart.tsx
+++ b/apps/app/components/views/gantt-chart.tsx
@@ -32,12 +32,12 @@ export const ViewIssuesGanttChartView: FC<Props> = ({}) => {
 
   // rendering issues on gantt card
   const GanttBlockView = ({ data }: any) => (
-    <div className="relative flex w-full h-full overflow-hidden">
+    <div className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
       <div
-        className="flex-shrink-0 w-[4px] h-auto"
+        className="flex-shrink-0 w-[4px] h-full"
         style={{ backgroundColor: data?.state_detail?.color || "#858e96" }}
       />
-      <div className="inline-block text-brand-base text-sm whitespace-nowrap py-[4px] px-1.5">
+      <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
         {data?.name}
       </div>
     </div>

From e5f6be54e0f3fe62579865a96b75b70e2d826dda Mon Sep 17 00:00:00 2001
From: Vihar Kurama <vihar.kurama@gmail.com>
Date: Sat, 20 May 2023 23:30:05 +0530
Subject: [PATCH 75/81] fix: updated discord link on readme (#1101)

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index a7a23d7c5..827a2b146 100644
--- a/README.md
+++ b/README.md
@@ -135,7 +135,7 @@ To see how to Contribute, visit [here](https://github.com/makeplane/plane/blob/m
 
 The Plane community can be found on GitHub Discussions, where you can ask questions, voice ideas, and share your projects.
 
-To chat with other community members you can join the [Plane Discord](https://discord.com/invite/q9HKAdau).
+To chat with other community members you can join the [Plane Discord](https://discord.com/invite/A92xrEGCge).
 
 Our [Code of Conduct](https://github.com/makeplane/plane/blob/master/CODE_OF_CONDUCT.md) applies to all Plane community channels.
 

From 83a0c8163f107334cffb4364b078dba73355cf06 Mon Sep 17 00:00:00 2001
From: guru_sainath <gurusainath007@gmail.com>
Date: Sun, 21 May 2023 18:37:26 +0530
Subject: [PATCH 76/81] dev: redirection implementation on gantt blocks (#1104)

---
 .../cycles/cycles-list-gantt-chart.tsx        | 21 ++++++++++-----
 apps/app/components/cycles/gantt-chart.tsx    | 24 +++++++++--------
 .../components/gantt-chart/blocks/index.tsx   |  4 +--
 apps/app/components/issues/gantt-chart.tsx    | 23 ++++++++--------
 apps/app/components/modules/gantt-chart.tsx   | 24 +++++++++--------
 .../modules/modules-list-gantt-chart.tsx      | 27 ++++++++++++-------
 apps/app/components/views/gantt-chart.tsx     | 24 +++++++++--------
 7 files changed, 84 insertions(+), 63 deletions(-)

diff --git a/apps/app/components/cycles/cycles-list-gantt-chart.tsx b/apps/app/components/cycles/cycles-list-gantt-chart.tsx
index ad298e79d..9c8e922d2 100644
--- a/apps/app/components/cycles/cycles-list-gantt-chart.tsx
+++ b/apps/app/components/cycles/cycles-list-gantt-chart.tsx
@@ -1,5 +1,7 @@
 import { FC } from "react";
-
+// next imports
+import Link from "next/link";
+import { useRouter } from "next/router";
 // components
 import { GanttChartRoot } from "components/gantt-chart";
 // types
@@ -10,6 +12,9 @@ type Props = {
 };
 
 export const CyclesListGanttChartView: FC<Props> = ({ cycles }) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
   // rendering issues on gantt sidebar
   const GanttSidebarBlockView = ({ data }: any) => (
     <div className="relative flex w-full h-full items-center p-1 overflow-hidden gap-1">
@@ -23,12 +28,14 @@ export const CyclesListGanttChartView: FC<Props> = ({ cycles }) => {
 
   // rendering issues on gantt card
   const GanttBlockView = ({ data }: { data: ICycle }) => (
-    <div className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
-      <div className="flex-shrink-0 w-[4px] h-full" style={{ backgroundColor: "#858e96" }} />
-      <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
-        {data?.name}
-      </div>
-    </div>
+    <Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${data?.id}`}>
+      <a className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
+        <div className="flex-shrink-0 w-[4px] h-full" style={{ backgroundColor: "#858e96" }} />
+        <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
+          {data?.name}
+        </div>
+      </a>
+    </Link>
   );
 
   // handle gantt issue start date and target date
diff --git a/apps/app/components/cycles/gantt-chart.tsx b/apps/app/components/cycles/gantt-chart.tsx
index 04de7afb7..44abc392b 100644
--- a/apps/app/components/cycles/gantt-chart.tsx
+++ b/apps/app/components/cycles/gantt-chart.tsx
@@ -1,7 +1,7 @@
 import { FC } from "react";
-
+// next imports
+import Link from "next/link";
 import { useRouter } from "next/router";
-
 // components
 import { GanttChartRoot } from "components/gantt-chart";
 // hooks
@@ -32,15 +32,17 @@ export const CycleIssuesGanttChartView: FC<Props> = ({}) => {
 
   // rendering issues on gantt card
   const GanttBlockView = ({ data }: any) => (
-    <div className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
-      <div
-        className="flex-shrink-0 w-[4px] h-full"
-        style={{ backgroundColor: data?.state_detail?.color || "#858e96" }}
-      />
-      <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
-        {data?.name}
-      </div>
-    </div>
+    <Link href={`/${workspaceSlug}/projects/${projectId}/issues/${data?.id}`}>
+      <a className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
+        <div
+          className="flex-shrink-0 w-[4px] h-full"
+          style={{ backgroundColor: data?.state_detail?.color || "#858e96" }}
+        />
+        <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
+          {data?.name}
+        </div>
+      </a>
+    </Link>
   );
 
   // handle gantt issue start date and target date
diff --git a/apps/app/components/gantt-chart/blocks/index.tsx b/apps/app/components/gantt-chart/blocks/index.tsx
index 113ca8964..98284cce8 100644
--- a/apps/app/components/gantt-chart/blocks/index.tsx
+++ b/apps/app/components/gantt-chart/blocks/index.tsx
@@ -39,7 +39,7 @@ export const GanttChartBlocks: FC<{
                   >
                     <div className="flex-shrink-0 relative w-0 h-0 flex items-center invisible group-hover:visible whitespace-nowrap">
                       <div className="absolute right-0 mr-[5px] rounded-sm bg-brand-surface-1 px-2 py-0.5 text-xs font-medium">
-                        {block?.start_date ? datePreview(block?.start_date, true) : "-"}
+                        {block?.start_date ? datePreview(block?.start_date) : "-"}
                       </div>
                     </div>
 
@@ -54,7 +54,7 @@ export const GanttChartBlocks: FC<{
 
                     <div className="flex-shrink-0 relative w-0 h-0 flex items-center invisible group-hover:visible whitespace-nowrap">
                       <div className="absolute left-0 ml-[5px] mr-[5px] rounded-sm bg-brand-surface-1 px-2 py-0.5 text-xs font-medium">
-                        {block?.target_date ? datePreview(block?.target_date, true) : "-"}
+                        {block?.target_date ? datePreview(block?.target_date) : "-"}
                       </div>
                     </div>
                   </div>
diff --git a/apps/app/components/issues/gantt-chart.tsx b/apps/app/components/issues/gantt-chart.tsx
index b35d4a749..8fce3e96f 100644
--- a/apps/app/components/issues/gantt-chart.tsx
+++ b/apps/app/components/issues/gantt-chart.tsx
@@ -1,8 +1,7 @@
 import { FC } from "react";
-
+// next imports
 import Link from "next/link";
 import { useRouter } from "next/router";
-
 // components
 import { GanttChartRoot } from "components/gantt-chart";
 // hooks
@@ -32,15 +31,17 @@ export const IssueGanttChartView: FC<Props> = ({}) => {
 
   // rendering issues on gantt card
   const GanttBlockView = ({ data }: any) => (
-    <div className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
-      <div
-        className="flex-shrink-0 w-[4px] h-full"
-        style={{ backgroundColor: data?.state_detail?.color || "#858e96" }}
-      />
-      <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
-        {data?.name}
-      </div>
-    </div>
+    <Link href={`/${workspaceSlug}/projects/${projectId}/issues/${data?.id}`}>
+      <a className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
+        <div
+          className="flex-shrink-0 w-[4px] h-full"
+          style={{ backgroundColor: data?.state_detail?.color || "#858e96" }}
+        />
+        <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
+          {data?.name}
+        </div>
+      </a>
+    </Link>
   );
 
   // handle gantt issue start date and target date
diff --git a/apps/app/components/modules/gantt-chart.tsx b/apps/app/components/modules/gantt-chart.tsx
index 0d11da2c0..fa92964c1 100644
--- a/apps/app/components/modules/gantt-chart.tsx
+++ b/apps/app/components/modules/gantt-chart.tsx
@@ -1,7 +1,7 @@
 import { FC } from "react";
-
+// next imports
+import Link from "next/link";
 import { useRouter } from "next/router";
-
 // components
 import { GanttChartRoot } from "components/gantt-chart";
 // hooks
@@ -32,15 +32,17 @@ export const ModuleIssuesGanttChartView: FC<Props> = ({}) => {
 
   // rendering issues on gantt card
   const GanttBlockView = ({ data }: any) => (
-    <div className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
-      <div
-        className="flex-shrink-0 w-[4px] h-full"
-        style={{ backgroundColor: data?.state_detail?.color || "#858e96" }}
-      />
-      <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
-        {data?.name}
-      </div>
-    </div>
+    <Link href={`/${workspaceSlug}/projects/${projectId}/issues/${data?.id}`}>
+      <a className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
+        <div
+          className="flex-shrink-0 w-[4px] h-full"
+          style={{ backgroundColor: data?.state_detail?.color || "#858e96" }}
+        />
+        <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
+          {data?.name}
+        </div>
+      </a>
+    </Link>
   );
 
   // handle gantt issue start date and target date
diff --git a/apps/app/components/modules/modules-list-gantt-chart.tsx b/apps/app/components/modules/modules-list-gantt-chart.tsx
index edff17a95..cb1c7bc07 100644
--- a/apps/app/components/modules/modules-list-gantt-chart.tsx
+++ b/apps/app/components/modules/modules-list-gantt-chart.tsx
@@ -1,5 +1,7 @@
 import { FC } from "react";
-
+// next imports
+import Link from "next/link";
+import { useRouter } from "next/router";
 // components
 import { GanttChartRoot } from "components/gantt-chart";
 // types
@@ -12,6 +14,9 @@ type Props = {
 };
 
 export const ModulesListGanttChartView: FC<Props> = ({ modules }) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
   // rendering issues on gantt sidebar
   const GanttSidebarBlockView = ({ data }: any) => (
     <div className="relative flex w-full h-full items-center p-1 overflow-hidden gap-1">
@@ -27,15 +32,17 @@ export const ModulesListGanttChartView: FC<Props> = ({ modules }) => {
 
   // rendering issues on gantt card
   const GanttBlockView = ({ data }: { data: IModule }) => (
-    <div className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
-      <div
-        className="flex-shrink-0 w-[4px] h-full"
-        style={{ backgroundColor: MODULE_STATUS.find((s) => s.value === data.status)?.color }}
-      />
-      <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
-        {data?.name}
-      </div>
-    </div>
+    <Link href={`/${workspaceSlug}/projects/${projectId}/modules/${data?.id}`}>
+      <a className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
+        <div
+          className="flex-shrink-0 w-[4px] h-full"
+          style={{ backgroundColor: MODULE_STATUS.find((s) => s.value === data.status)?.color }}
+        />
+        <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
+          {data?.name}
+        </div>
+      </a>
+    </Link>
   );
 
   // handle gantt issue start date and target date
diff --git a/apps/app/components/views/gantt-chart.tsx b/apps/app/components/views/gantt-chart.tsx
index 461f46835..dc81f70fa 100644
--- a/apps/app/components/views/gantt-chart.tsx
+++ b/apps/app/components/views/gantt-chart.tsx
@@ -1,7 +1,7 @@
 import { FC } from "react";
-
+// next imports
+import Link from "next/link";
 import { useRouter } from "next/router";
-
 // components
 import { GanttChartRoot } from "components/gantt-chart";
 // hooks
@@ -32,15 +32,17 @@ export const ViewIssuesGanttChartView: FC<Props> = ({}) => {
 
   // rendering issues on gantt card
   const GanttBlockView = ({ data }: any) => (
-    <div className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
-      <div
-        className="flex-shrink-0 w-[4px] h-full"
-        style={{ backgroundColor: data?.state_detail?.color || "#858e96" }}
-      />
-      <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
-        {data?.name}
-      </div>
-    </div>
+    <Link href={`/${workspaceSlug}/projects/${projectId}/issues/${data?.id}`}>
+      <a className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
+        <div
+          className="flex-shrink-0 w-[4px] h-full"
+          style={{ backgroundColor: data?.state_detail?.color || "#858e96" }}
+        />
+        <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
+          {data?.name}
+        </div>
+      </a>
+    </Link>
   );
 
   // handle gantt issue start date and target date

From a44cddb0fc7b1ae2672fa66722ce048b43445c1d Mon Sep 17 00:00:00 2001
From: guru_sainath <gurusainath007@gmail.com>
Date: Sun, 21 May 2023 19:08:28 +0530
Subject: [PATCH 77/81] dev: dropdown overflow issue resolved in kanban (#1106)

---
 apps/app/components/core/board-view/single-board.tsx | 2 +-
 apps/app/components/issues/view-select/assignee.tsx  | 2 ++
 apps/app/components/ui/custom-search-select.tsx      | 6 +++++-
 3 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/apps/app/components/core/board-view/single-board.tsx b/apps/app/components/core/board-view/single-board.tsx
index a4f869cb3..16fe0e887 100644
--- a/apps/app/components/core/board-view/single-board.tsx
+++ b/apps/app/components/core/board-view/single-board.tsx
@@ -99,7 +99,7 @@ export const SingleBoard: React.FC<Props> = ({
                   </div>
                 </>
               )}
-              <div className="pt-3 overflow-y-auto">
+              <div className="pt-3 overflow-hidden overflow-y-scroll">
                 {groupedByIssues?.[groupTitle].map((issue, index) => (
                   <Draggable
                     key={issue.id}
diff --git a/apps/app/components/issues/view-select/assignee.tsx b/apps/app/components/issues/view-select/assignee.tsx
index 48149c24f..71e16a092 100644
--- a/apps/app/components/issues/view-select/assignee.tsx
+++ b/apps/app/components/issues/view-select/assignee.tsx
@@ -122,6 +122,8 @@ export const ViewAssigneeSelect: React.FC<Props> = ({
       noChevron
       position={position}
       disabled={isNotAllowed}
+      selfPositioned={selfPositioned}
+      dropdownWidth="w-full min-w-[8rem]"
     />
   );
 };
diff --git a/apps/app/components/ui/custom-search-select.tsx b/apps/app/components/ui/custom-search-select.tsx
index ef0943377..fb1c0a88c 100644
--- a/apps/app/components/ui/custom-search-select.tsx
+++ b/apps/app/components/ui/custom-search-select.tsx
@@ -29,6 +29,7 @@ type CustomSearchSelectProps = {
   selfPositioned?: boolean;
   multiple?: boolean;
   footerOption?: JSX.Element;
+  dropdownWidth?: string;
 };
 export const CustomSearchSelect = ({
   label,
@@ -47,6 +48,7 @@ export const CustomSearchSelect = ({
   selfPositioned = false,
   multiple = false,
   footerOption,
+  dropdownWidth,
 }: CustomSearchSelectProps) => {
   const [query, setQuery] = useState("");
 
@@ -108,7 +110,9 @@ export const CustomSearchSelect = ({
                 position === "right" ? "right-0" : "left-0"
               } ${
                 verticalPosition === "top" ? "bottom-full mb-1" : "mt-1"
-              } z-10 origin-top-right rounded-md bg-brand-surface-1 text-xs shadow-lg focus:outline-none`}
+              } z-10 origin-top-right rounded-md bg-brand-surface-1 text-xs shadow-lg focus:outline-none ${
+                dropdownWidth ? dropdownWidth : ``
+              } `}
             >
               <div className="flex w-full items-center justify-start rounded-sm border-[0.6px] border-brand-base bg-brand-surface-1 px-2">
                 <MagnifyingGlassIcon className="h-3 w-3 text-brand-secondary" />

From 4238f89cec6bc31cd8ddc1820ec9400da3d62f57 Mon Sep 17 00:00:00 2001
From: gurusainath <gurusainath007@gmail.com>
Date: Sun, 21 May 2023 19:27:08 +0530
Subject: [PATCH 78/81] dev: gantt ui changes

---
 .../components/gantt-chart/blocks/index.tsx   |  4 +--
 .../components/gantt-chart/chart/index.tsx    | 35 ++++++++++++++-----
 .../components/gantt-chart/chart/month.tsx    |  2 +-
 apps/app/components/gantt-chart/root.tsx      |  3 ++
 apps/app/components/issues/gantt-chart.tsx    |  5 +--
 5 files changed, 35 insertions(+), 14 deletions(-)

diff --git a/apps/app/components/gantt-chart/blocks/index.tsx b/apps/app/components/gantt-chart/blocks/index.tsx
index 98284cce8..f2d44b294 100644
--- a/apps/app/components/gantt-chart/blocks/index.tsx
+++ b/apps/app/components/gantt-chart/blocks/index.tsx
@@ -18,7 +18,7 @@ export const GanttChartBlocks: FC<{
 
   return (
     <div
-      className="relative z-10 mt-[58px] h-full w-[4000px] divide-x divide-gray-300 overflow-hidden overflow-y-auto bg-[#999] bg-opacity-5"
+      className="relative z-10 mt-[58px] h-full w-[4000px] divide-x divide-gray-300 overflow-hidden overflow-y-auto"
       style={{ width: `${itemsContainerWidth}px` }}
     >
       <div className="w-full">
@@ -44,7 +44,7 @@ export const GanttChartBlocks: FC<{
                     </div>
 
                     <div
-                      className="rounded-sm shadow-sm bg-brand-base overflow-hidden relative flex items-center h-[34px] border border-brand-base"
+                      className="rounded shadow-sm bg-brand-base overflow-hidden relative flex items-center h-[34px] border border-brand-base"
                       style={{
                         width: `${block?.position?.width}px`,
                       }}
diff --git a/apps/app/components/gantt-chart/chart/index.tsx b/apps/app/components/gantt-chart/chart/index.tsx
index 6724c3552..72d6888e2 100644
--- a/apps/app/components/gantt-chart/chart/index.tsx
+++ b/apps/app/components/gantt-chart/chart/index.tsx
@@ -37,6 +37,7 @@ import { datePreview, currentViewDataWithView } from "../data";
 import { useChart } from "../hooks";
 
 type ChartViewRootProps = {
+  border: boolean;
   title: null | string;
   loaderTitle: string;
   blocks: any;
@@ -46,6 +47,7 @@ type ChartViewRootProps = {
 };
 
 export const ChartViewRoot: FC<ChartViewRootProps> = ({
+  border,
   title,
   blocks = null,
   loaderTitle,
@@ -214,10 +216,12 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
     <div
       className={`${
         fullScreenMode ? `fixed top-0 bottom-0 left-0 right-0 z-[999999] bg-brand-base` : `relative`
-      } flex h-full flex-col rounded-sm border border-brand-base select-none bg-brand-base shadow`}
+      } ${
+        border ? `border border-brand-base` : ``
+      } flex h-full flex-col rounded-sm select-none bg-brand-base shadow`}
     >
       {/* chart title */}
-      <div className="flex w-full flex-shrink-0 flex-wrap items-center gap-5 gap-y-3 whitespace-nowrap p-2 border-b border-brand-base">
+      {/* <div className="flex w-full flex-shrink-0 flex-wrap items-center gap-5 gap-y-3 whitespace-nowrap p-2 border-b border-brand-base">
         {title && (
           <div className="text-lg font-medium flex gap-2 items-center">
             <div>{title}</div>
@@ -233,7 +237,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
             {blocks.length} {loaderTitle}
           </div>
         )}
-      </div>
+      </div> */}
 
       {/* chart header */}
       <div className="flex w-full flex-shrink-0 flex-wrap items-center gap-5 gap-y-3 whitespace-nowrap p-2">
@@ -248,10 +252,23 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
           )}
         </div> */}
 
-        <div className="mr-auto text-sm font-medium">
-          {`${datePreview(currentViewData?.data?.startDate)} - ${datePreview(
-            currentViewData?.data?.endDate
-          )}`}
+        {title && (
+          <div className="text-lg font-medium flex gap-2 items-center">
+            <div>{title}</div>
+            <div className="text-xs rounded-full px-2 py-1 font-bold border border-brand-accent/75 bg-brand-accent/5 text-brand-base">
+              Gantt View Beta
+            </div>
+          </div>
+        )}
+
+        <div className="ml-auto">
+          {blocks === null ? (
+            <div className="text-sm font-medium ml-auto">Loading...</div>
+          ) : (
+            <div className="text-sm font-medium ml-auto">
+              {blocks.length} {loaderTitle}
+            </div>
+          )}
         </div>
 
         <div className="flex flex-wrap items-center gap-2">
@@ -260,7 +277,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
             allViews.map((_chatView: any, _idx: any) => (
               <div
                 key={_chatView?.key}
-                className={`cursor-pointer rounded-sm border border-brand-base p-1 px-2 text-sm font-medium ${
+                className={`cursor-pointer rounded-sm border border-brand-base p-1 px-2 text-xs ${
                   currentView === _chatView?.key ? `bg-brand-surface-2` : `hover:bg-brand-surface-1`
                 }`}
                 onClick={() => handleChartView(_chatView?.key)}
@@ -272,7 +289,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
 
         <div className="flex items-center gap-1">
           <div
-            className={`cursor-pointer rounded-sm border border-brand-base p-1 px-2 text-sm font-medium hover:bg-brand-surface-2`}
+            className={`cursor-pointer rounded-sm border border-brand-base p-1 px-2 text-xs hover:bg-brand-surface-2`}
             onClick={handleToday}
           >
             Today
diff --git a/apps/app/components/gantt-chart/chart/month.tsx b/apps/app/components/gantt-chart/chart/month.tsx
index 15d02c488..197ac9930 100644
--- a/apps/app/components/gantt-chart/chart/month.tsx
+++ b/apps/app/components/gantt-chart/chart/month.tsx
@@ -37,7 +37,7 @@ export const MonthChartView: FC<any> = () => {
                       <div
                         className={`relative h-full w-full flex-1 flex justify-center ${
                           ["sat", "sun"].includes(_item?.dayData?.shortTitle || "")
-                            ? `bg-brand-surface-2`
+                            ? `bg-brand-surface-1`
                             : ``
                         }`}
                       >
diff --git a/apps/app/components/gantt-chart/root.tsx b/apps/app/components/gantt-chart/root.tsx
index 787df0e46..eb7a1b225 100644
--- a/apps/app/components/gantt-chart/root.tsx
+++ b/apps/app/components/gantt-chart/root.tsx
@@ -5,6 +5,7 @@ import { ChartViewRoot } from "./chart";
 import { ChartContextProvider } from "./contexts";
 
 type GanttChartRootProps = {
+  border: boolean;
   title: null | string;
   loaderTitle: string;
   blocks: any;
@@ -14,6 +15,7 @@ type GanttChartRootProps = {
 };
 
 export const GanttChartRoot: FC<GanttChartRootProps> = ({
+  border = true,
   title = null,
   blocks,
   loaderTitle = "blocks",
@@ -23,6 +25,7 @@ export const GanttChartRoot: FC<GanttChartRootProps> = ({
 }) => (
   <ChartContextProvider>
     <ChartViewRoot
+      border={border}
       title={title}
       blocks={blocks}
       loaderTitle={loaderTitle}
diff --git a/apps/app/components/issues/gantt-chart.tsx b/apps/app/components/issues/gantt-chart.tsx
index 8fce3e96f..1330c2438 100644
--- a/apps/app/components/issues/gantt-chart.tsx
+++ b/apps/app/components/issues/gantt-chart.tsx
@@ -32,7 +32,7 @@ export const IssueGanttChartView: FC<Props> = ({}) => {
   // rendering issues on gantt card
   const GanttBlockView = ({ data }: any) => (
     <Link href={`/${workspaceSlug}/projects/${projectId}/issues/${data?.id}`}>
-      <a className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
+      <a className="relative flex items-center w-full h-full overflow-hidden shadow-sm font-normal">
         <div
           className="flex-shrink-0 w-[4px] h-full"
           style={{ backgroundColor: data?.state_detail?.color || "#858e96" }}
@@ -68,8 +68,9 @@ export const IssueGanttChartView: FC<Props> = ({}) => {
       : [];
 
   return (
-    <div className="w-full h-full p-3">
+    <div className="w-full h-full">
       <GanttChartRoot
+        border={false}
         title="Issues"
         loaderTitle="Issues"
         blocks={ganttIssues ? blockFormat(ganttIssues) : null}

From b5325f14aa758ed0d2a7ee09db36533a67a287c4 Mon Sep 17 00:00:00 2001
From: gurusainath <gurusainath007@gmail.com>
Date: Sun, 21 May 2023 19:38:33 +0530
Subject: [PATCH 79/81] fix: gantt build issue resolved

---
 apps/app/components/gantt-chart/root.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/app/components/gantt-chart/root.tsx b/apps/app/components/gantt-chart/root.tsx
index eb7a1b225..c52bc55b0 100644
--- a/apps/app/components/gantt-chart/root.tsx
+++ b/apps/app/components/gantt-chart/root.tsx
@@ -5,7 +5,7 @@ import { ChartViewRoot } from "./chart";
 import { ChartContextProvider } from "./contexts";
 
 type GanttChartRootProps = {
-  border: boolean;
+  border?: boolean;
   title: null | string;
   loaderTitle: string;
   blocks: any;

From 0bd6e53b44d50fb7370ba47b2aad0e10182844e5 Mon Sep 17 00:00:00 2001
From: Vihar Kurama <vihar.kurama@gmail.com>
Date: Wed, 24 May 2023 21:42:40 +0530
Subject: [PATCH 80/81] docs: updated Readme with new features and screenshots
 (#1132)

* update readme images with new features

* remove line-break on readme

* update plane analytics image
---
 README.md | 66 +++++++++++++++++++++++++++++++++++++++----------------
 1 file changed, 47 insertions(+), 19 deletions(-)

diff --git a/README.md b/README.md
index 827a2b146..5b3618363 100644
--- a/README.md
+++ b/README.md
@@ -15,11 +15,18 @@
 </a>
 <img alt="Discord" src="https://img.shields.io/github/commit-activity/m/makeplane/plane?style=for-the-badge" />
 </p>
-<br />
+
 <p>
-    <a href="https://app.plane.so/" target="_blank">
+    <a href="https://app.plane.so/#gh-light-mode-only" target="_blank">
       <img
-        src="https://res.cloudinary.com/toolspacedev/image/upload/v1680599798/Plane/plane_1_1_tnb32j.png"
+        src="https://ik.imagekit.io/killbluedog/Plane_Screen.png?updatedAt=1684942001069"
+        alt="Plane Screens"
+        width="100%"
+      />
+    </a>
+    <a href="https://app.plane.so/#gh-dark-mode-only" target="_blank">
+      <img
+        src="https://ik.imagekit.io/killbluedog/Plane_Screens_Dark_Mode.png?updatedAt=1684942388044"
         alt="Plane Screens"
         width="100%"
       />
@@ -89,41 +96,62 @@ docker-compose -f docker-compose-hub.yml up
 ## 📸 Screenshots
 
 <p>
-    <a href="https://app.plane.so/" target="_blank">
+    <a href="https://plane.so" target="_blank">
       <img
-        src="https://res.cloudinary.com/toolspacedev/image/upload/v1680601719/Plane/plane_2_iqao52.png"
+        src="https://ik.imagekit.io/killbluedog/Plane_Views_Dark_Mode.png?updatedAt=1684943050275"
+        alt="Plane Views"
+        width="100%"
+      />
+    </a>
+  </p>
+<p>
+    <a href="https://plane.so" target="_blank">
+      <img
+        src="https://ik.imagekit.io/killbluedog/Plane_Issue_Detail_Dark_Mode.png?updatedAt=1684943050202"
         alt="Plane Issue Details"
         width="100%"
       />
     </a>
-</p>
-<p>
-    <a href="https://app.plane.so/" target="_blank">
+  </p>
+  <p>
+    <a href="https://plane.so" target="_blank">
       <img
-        src="https://res.cloudinary.com/toolspacedev/image/upload/v1680604273/Plane/plane_5_1_nwsl3a.png"
+        src="https://ik.imagekit.io/killbluedog/Plane_Cycles___Modules_Dark_Mode.png?updatedAt=1684943050281"
         alt="Plane Cycles and Modules"
         width="100%"
       />
     </a>
-</p>
-<p>
-    <a href="https://app.plane.so/" target="_blank">
+  </p>
+  <p>
+    <a href="https://plane.so" target="_blank">
       <img
-        src="https://res.cloudinary.com/toolspacedev/image/upload/v1680601713/Plane/plane_4_cqm0g8.png"
-        alt="Plane Quick Lists"
+        src="https://ik.imagekit.io/killbluedog/Plane_Analytics_Dark_Mode.png?updatedAt=1684944596824"
+        alt="Plane Analytics"
         width="100%"
       />
     </a>
-</p>
-<p>
-    <a href="https://app.plane.so/" target="_blank">
+  </p>
+   <p>
+    <a href="https://plane.so" target="_blank">
       <img
-        src="https://res.cloudinary.com/toolspacedev/image/upload/v1680601712/Plane/plane_3_1_cu4fsc.png"
-        alt="Plane Command K"
+        src="https://ik.imagekit.io/killbluedog/Plane_Pages_Dark_Mode.png?updatedAt=1684943050202"
+        alt="Plane Pages"
         width="100%"
       />
     </a>
+  </p>
 </p>
+   <p>
+    <a href="https://plane.so" target="_blank">
+      <img
+        src="https://ik.imagekit.io/killbluedog/Plane_Commad_K_Dark_Mode.png?updatedAt=1684943050312"
+        alt="Plane Command Menu"
+        width="100%"
+      />
+    </a>
+  </p>
+</p>
+
 
 ## 📚Documentation
 

From 0fb4a87454243b6c2141630f0eee7c9f8b615809 Mon Sep 17 00:00:00 2001
From: pablohashescobar <118773738+pablohashescobar@users.noreply.github.com>
Date: Thu, 25 May 2023 10:24:20 +0530
Subject: [PATCH 81/81] fix: docker image uploads  (#1108)

* dev: basic initial setup for images

* Update docker-compose.yml

* dev: minio setup

* dev: docker minio setup

* dev: update the asset view

* dev: setup minio with default configuration

* dev: update minio setup for creating buckets

* dev: update the permission sets

* dev: get variables from shell for create bucket

* dev: update image uploading setup for docker

* dev: environment variables update

* dev: web url for images

* dev: update image configuration

* dev: env update for email port

---------

Co-authored-by: Narayana <narayana.vadapalli1996@gmail.com>
---
 .env.example                           | 27 +++++++++++++--
 apiserver/plane/api/views/asset.py     | 12 +++++--
 apiserver/plane/api/views/issue.py     |  7 ++--
 apiserver/plane/db/models/asset.py     |  9 +++--
 apiserver/plane/db/models/issue.py     |  8 +++--
 apiserver/plane/settings/local.py      |  4 ++-
 apiserver/plane/settings/production.py | 46 ++++++++++++--------------
 apiserver/plane/settings/staging.py    |  4 +++
 apiserver/plane/urls.py                |  5 ++-
 apiserver/requirements/production.txt  |  2 +-
 apps/app/next.config.js                |  1 +
 docker-compose-hub.yml                 | 24 ++++++++++++--
 docker-compose.yml                     | 27 +++++++++++++--
 nginx/nginx.conf                       |  3 ++
 setup.sh                               | 12 +++++--
 15 files changed, 142 insertions(+), 49 deletions(-)

diff --git a/.env.example b/.env.example
index 118a94883..727ea0806 100644
--- a/.env.example
+++ b/.env.example
@@ -1,20 +1,41 @@
-# Replace with your instance Public IP
+# Frontend
+# Extra image domains that need to be added for Next Image
 NEXT_PUBLIC_EXTRA_IMAGE_DOMAINS=
+# Google Client ID for Google OAuth
 NEXT_PUBLIC_GOOGLE_CLIENTID=""
-NEXT_PUBLIC_GITHUB_APP_NAME=""
+# Github ID for Github OAuth
 NEXT_PUBLIC_GITHUB_ID=""
+# Github App Name for GitHub Integration
+NEXT_PUBLIC_GITHUB_APP_NAME=""
+# Sentry DSN for error monitoring
 NEXT_PUBLIC_SENTRY_DSN=""
+# Enable/Disable OAUTH - default 0 for selfhosted instance 
 NEXT_PUBLIC_ENABLE_OAUTH=0
+# Enable/Disable sentry
 NEXT_PUBLIC_ENABLE_SENTRY=0
+# Enable/Disable session recording 
 NEXT_PUBLIC_ENABLE_SESSION_RECORDER=0
+# Enable/Disable event tracking
 NEXT_PUBLIC_TRACK_EVENTS=0
+# Slack for Slack Integration
 NEXT_PUBLIC_SLACK_CLIENT_ID=""
+
+# Backend
+# Email Settings
 EMAIL_HOST=""
 EMAIL_HOST_USER=""
 EMAIL_HOST_PASSWORD=""
+EMAIL_PORT=587
+
+# AWS Settings
 AWS_REGION=""
 AWS_ACCESS_KEY_ID=""
 AWS_SECRET_ACCESS_KEY=""
 AWS_S3_BUCKET_NAME=""
+AWS_S3_ENDPOINT_URL=""
+
+# GPT settings
 OPENAI_API_KEY=""
-GPT_ENGINE=""
\ No newline at end of file
+GPT_ENGINE=""
+
+# Auto generated and Required
\ No newline at end of file
diff --git a/apiserver/plane/api/views/asset.py b/apiserver/plane/api/views/asset.py
index 98c9f9caf..705735e51 100644
--- a/apiserver/plane/api/views/asset.py
+++ b/apiserver/plane/api/views/asset.py
@@ -3,7 +3,7 @@ from rest_framework import status
 from rest_framework.response import Response
 from rest_framework.parsers import MultiPartParser, FormParser
 from sentry_sdk import capture_exception
-
+from django.conf import settings
 # Module imports
 from .base import BaseAPIView
 from plane.db.models import FileAsset
@@ -34,7 +34,10 @@ class FileAssetEndpoint(BaseAPIView):
                     )
 
                 serializer.save(workspace_id=request.user.last_workspace_id)
-                return Response(serializer.data, status=status.HTTP_201_CREATED)
+                response_data = serializer.data
+                if settings.DOCKERIZED and "minio:9000" in response_data["asset"]:
+                    response_data["asset"] = response_data["asset"].replace("minio:9000", settings.WEB_URL)
+                return Response(response_data, status=status.HTTP_201_CREATED)
             return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
         except Exception as e:
             capture_exception(e)
@@ -82,7 +85,10 @@ class UserAssetsEndpoint(BaseAPIView):
             serializer = FileAssetSerializer(data=request.data)
             if serializer.is_valid():
                 serializer.save()
-                return Response(serializer.data, status=status.HTTP_201_CREATED)
+                response_data = serializer.data
+                if settings.DOCKERIZED and "minio:9000" in response_data["asset"]:
+                    response_data["asset"] = response_data["asset"].replace("minio:9000", settings.WEB_URL)
+                return Response(response_data, status=status.HTTP_201_CREATED)
             return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
         except Exception as e:
             capture_exception(e)
diff --git a/apiserver/plane/api/views/issue.py b/apiserver/plane/api/views/issue.py
index 987677bb2..4f519ce69 100644
--- a/apiserver/plane/api/views/issue.py
+++ b/apiserver/plane/api/views/issue.py
@@ -9,7 +9,7 @@ from django.core.serializers.json import DjangoJSONEncoder
 from django.utils.decorators import method_decorator
 from django.views.decorators.gzip import gzip_page
 from django.db.models.functions import Coalesce
-
+from django.conf import settings
 # Third Party imports
 from rest_framework.response import Response
 from rest_framework import status
@@ -788,6 +788,9 @@ class IssueAttachmentEndpoint(BaseAPIView):
             serializer = IssueAttachmentSerializer(data=request.data)
             if serializer.is_valid():
                 serializer.save(project_id=project_id, issue_id=issue_id)
+                response_data = serializer.data
+                if settings.DOCKERIZED and "minio:9000" in response_data["asset"]:
+                    response_data["asset"] = response_data["asset"].replace("minio:9000", settings.WEB_URL)
                 issue_activity.delay(
                     type="attachment.activity.created",
                     requested_data=None,
@@ -799,7 +802,7 @@ class IssueAttachmentEndpoint(BaseAPIView):
                         cls=DjangoJSONEncoder,
                     ),
                 )
-                return Response(serializer.data, status=status.HTTP_201_CREATED)
+                return Response(response_data, status=status.HTTP_201_CREATED)
             return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
         except Exception as e:
             capture_exception(e)
diff --git a/apiserver/plane/db/models/asset.py b/apiserver/plane/db/models/asset.py
index acbb9428f..e37f2c0b0 100644
--- a/apiserver/plane/db/models/asset.py
+++ b/apiserver/plane/db/models/asset.py
@@ -4,6 +4,7 @@ from uuid import uuid4
 # Django import
 from django.db import models
 from django.core.exceptions import ValidationError
+from django.conf import settings
 
 # Module import
 from . import BaseModel
@@ -16,9 +17,11 @@ def get_upload_path(instance, filename):
 
 
 def file_size(value):
-    limit = 5 * 1024 * 1024
-    if value.size > limit:
-        raise ValidationError("File too large. Size should not exceed 5 MB.")
+    # File limit check is only for cloud hosted
+    if not settings.DOCKERIZED:
+        limit = 5 * 1024 * 1024
+        if value.size > limit:
+            raise ValidationError("File too large. Size should not exceed 5 MB.")
 
 
 class FileAsset(BaseModel):
diff --git a/apiserver/plane/db/models/issue.py b/apiserver/plane/db/models/issue.py
index 6e264566d..f58d4ac13 100644
--- a/apiserver/plane/db/models/issue.py
+++ b/apiserver/plane/db/models/issue.py
@@ -210,9 +210,11 @@ def get_upload_path(instance, filename):
 
 
 def file_size(value):
-    limit = 5 * 1024 * 1024
-    if value.size > limit:
-        raise ValidationError("File too large. Size should not exceed 5 MB.")
+    # File limit check is only for cloud hosted
+    if not settings.DOCKERIZED:
+        limit = 5 * 1024 * 1024
+        if value.size > limit:
+            raise ValidationError("File too large. Size should not exceed 5 MB.")
 
 
 class IssueAttachment(ProjectBaseModel):
diff --git a/apiserver/plane/settings/local.py b/apiserver/plane/settings/local.py
index e03a0b822..87e04e1ed 100644
--- a/apiserver/plane/settings/local.py
+++ b/apiserver/plane/settings/local.py
@@ -25,7 +25,9 @@ DATABASES = {
     }
 }
 
-DOCKERIZED = os.environ.get("DOCKERIZED", False)
+DOCKERIZED = int(os.environ.get(
+    "DOCKERIZED", 0
+))  == 1
 
 if DOCKERIZED:
     DATABASES["default"] = dj_database_url.config()
diff --git a/apiserver/plane/settings/production.py b/apiserver/plane/settings/production.py
index e58736472..4d7da6ce3 100644
--- a/apiserver/plane/settings/production.py
+++ b/apiserver/plane/settings/production.py
@@ -29,9 +29,10 @@ DATABASES = {
 DATABASES["default"] = dj_database_url.config()
 SITE_ID = 1
 
-DOCKERIZED = os.environ.get(
-    "DOCKERIZED", False
-)  # Set the variable true if running in docker-compose environment
+# Set the variable true if running in docker environment
+DOCKERIZED = int(os.environ.get(
+    "DOCKERIZED", 0
+))  == 1
 
 # Enable Connection Pooling (if desired)
 # DATABASES['default']['ENGINE'] = 'django_postgrespool'
@@ -69,7 +70,7 @@ CORS_ALLOW_CREDENTIALS = True
 # Simplified static file serving.
 STATICFILES_STORAGE = "whitenoise.storage.CompressedManifestStaticFilesStorage"
 
-if os.environ.get("SENTRY_DSN", False):
+if bool(os.environ.get("SENTRY_DSN", False)):
     sentry_sdk.init(
         dsn=os.environ.get("SENTRY_DSN", ""),
         integrations=[DjangoIntegration(), RedisIntegration()],
@@ -80,12 +81,21 @@ if os.environ.get("SENTRY_DSN", False):
         environment="production",
     )
 
-if (
-    os.environ.get("AWS_REGION", False)
-    and os.environ.get("AWS_ACCESS_KEY_ID", False)
-    and os.environ.get("AWS_SECRET_ACCESS_KEY", False)
-    and os.environ.get("AWS_S3_BUCKET_NAME", False)
-):
+if DOCKERIZED:
+    DEFAULT_FILE_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage'
+    # The AWS access key to use.
+    AWS_ACCESS_KEY_ID = os.environ.get("AWS_ACCESS_KEY_ID", "access-key")
+    # The AWS secret access key to use.
+    AWS_SECRET_ACCESS_KEY = os.environ.get("AWS_SECRET_ACCESS_KEY", "secret-key")
+    # The name of the bucket to store files in.
+    AWS_STORAGE_BUCKET_NAME = os.environ.get("AWS_S3_BUCKET_NAME", "uploads")
+    # The full URL to the S3 endpoint. Leave blank to use the default region URL.
+    AWS_S3_ENDPOINT_URL = os.environ.get("AWS_S3_ENDPOINT_URL", "http://minio:9000")
+    # Default permissions
+    AWS_DEFAULT_ACL = "public-read"
+    AWS_QUERYSTRING_AUTH = False
+    AWS_S3_FILE_OVERWRITE = False
+else:
     # The AWS region to connect to.
     AWS_REGION = os.environ.get("AWS_REGION", "")
 
@@ -99,7 +109,7 @@ if (
     # AWS_SESSION_TOKEN = ""
 
     # The name of the bucket to store files in.
-    AWS_S3_BUCKET_NAME = os.environ.get("AWS_S3_BUCKET_NAME", "")
+    AWS_S3_BUCKET_NAME = os.environ.get("AWS_S3_BUCKET_NAME")
 
     # How to construct S3 URLs ("auto", "path", "virtual").
     AWS_S3_ADDRESSING_STYLE = "auto"
@@ -166,14 +176,8 @@ if (
     # extra characters appended.
     AWS_S3_FILE_OVERWRITE = False
 
-    # AWS Settings End
-
     DEFAULT_FILE_STORAGE = "django_s3_storage.storage.S3Storage"
-
-else:
-    MEDIA_URL = "/uploads/"
-    MEDIA_ROOT = os.path.join(BASE_DIR, "uploads")
-
+# AWS Settings End
 
 # Enable Connection Pooling (if desired)
 # DATABASES['default']['ENGINE'] = 'django_postgrespool'
@@ -218,12 +222,6 @@ else:
         }
     }
 
-RQ_QUEUES = {
-    "default": {
-        "USE_REDIS_CACHE": "default",
-    }
-}
-
 
 WEB_URL = os.environ.get("WEB_URL")
 
diff --git a/apiserver/plane/settings/staging.py b/apiserver/plane/settings/staging.py
index d4d0e5e12..d1d8e1749 100644
--- a/apiserver/plane/settings/staging.py
+++ b/apiserver/plane/settings/staging.py
@@ -49,6 +49,10 @@ CORS_ALLOW_ALL_ORIGINS = True
 # Simplified static file serving.
 STATICFILES_STORAGE = "whitenoise.storage.CompressedManifestStaticFilesStorage"
 
+# Make true if running in a docker environment
+DOCKERIZED = int(os.environ.get(
+    "DOCKERIZED", 0
+))  == 1
 
 sentry_sdk.init(
     dsn=os.environ.get("SENTRY_DSN"),
diff --git a/apiserver/plane/urls.py b/apiserver/plane/urls.py
index 3dfde38bd..a2244ffe0 100644
--- a/apiserver/plane/urls.py
+++ b/apiserver/plane/urls.py
@@ -7,7 +7,7 @@ from django.urls import path
 from django.views.generic import TemplateView
 
 from django.conf import settings
-from django.conf.urls import include, url
+from django.conf.urls import include, url, static
 
 # from django.conf.urls.static import static
 
@@ -17,9 +17,8 @@ urlpatterns = [
     path("api/", include("plane.api.urls")),
     path("", include("plane.web.urls")),
 ]
-# + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
-# + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
 
+urlpatterns = urlpatterns + static.static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
 
 if settings.DEBUG:
     import debug_toolbar
diff --git a/apiserver/requirements/production.txt b/apiserver/requirements/production.txt
index 2547ce255..c37e98ffd 100644
--- a/apiserver/requirements/production.txt
+++ b/apiserver/requirements/production.txt
@@ -4,7 +4,7 @@ dj-database-url==1.2.0
 gunicorn==20.1.0
 whitenoise==6.3.0
 django-storages==1.13.2
-boto==2.49.0
+boto3==1.26.136
 django-anymail==9.0
 twilio==7.16.2
 django-debug-toolbar==3.8.1
diff --git a/apps/app/next.config.js b/apps/app/next.config.js
index 876694142..646504a54 100644
--- a/apps/app/next.config.js
+++ b/apps/app/next.config.js
@@ -16,6 +16,7 @@ const nextConfig = {
       "planefs.s3.amazonaws.com",
       "images.unsplash.com",
       "avatars.githubusercontent.com",
+      "localhost",
       ...extraImageDomains,
     ],
   },
diff --git a/docker-compose-hub.yml b/docker-compose-hub.yml
index 435e47b29..c3df4684d 100644
--- a/docker-compose-hub.yml
+++ b/docker-compose-hub.yml
@@ -68,7 +68,7 @@ services:
       AWS_ACCESS_KEY_ID: ${AWS_ACCESS_KEY_ID}
       AWS_SECRET_ACCESS_KEY: ${AWS_SECRET_ACCESS_KEY}
       AWS_S3_BUCKET_NAME: ${AWS_S3_BUCKET_NAME}
-      WEB_URL: localhost/
+      WEB_URL: ${WEB_URL}
       GITHUB_CLIENT_SECRET: ${GITHUB_CLIENT_SECRET}
       DISABLE_COLLECTSTATIC: 1
       DOCKERIZED: 1
@@ -104,13 +104,33 @@ services:
       AWS_ACCESS_KEY_ID: ${AWS_ACCESS_KEY_ID}
       AWS_SECRET_ACCESS_KEY: ${AWS_SECRET_ACCESS_KEY}
       AWS_S3_BUCKET_NAME: ${AWS_S3_BUCKET_NAME}
-      WEB_URL: localhost/
+      WEB_URL: ${WEB_URL}
       GITHUB_CLIENT_SECRET: ${GITHUB_CLIENT_SECRET}
       DISABLE_COLLECTSTATIC: 1
       DOCKERIZED: 1
       OPENAI_API_KEY: ${OPENAI_API_KEY}
       GPT_ENGINE: ${GPT_ENGINE}
       SECRET_KEY: ${SECRET_KEY}
+  minio:
+    image: minio/minio
+    ports:
+      - 9000:9000
+    environment:
+      MINIO_ROOT_USER: ${AWS_ACCESS_KEY_ID}
+      MINIO_ROOT_PASSWORD: ${AWS_SECRET_ACCESS_KEY}
+    command: server /export --console-address ":9090"
+
+  createbuckets:
+    image: minio/mc
+    depends_on:
+      - minio
+    entrypoint: >
+      /bin/sh -c "
+      /usr/bin/mc config host add plane-minio http://minio:9000 \$AWS_ACCESS_KEY_ID \$AWS_SECRET_ACCESS_KEY;
+      /usr/bin/mc mb plane-minio/\$AWS_S3_BUCKET_NAME;
+      /usr/bin/mc anonymous set download plane-minio/\$AWS_S3_BUCKET_NAME;
+      exit 0;
+      "
 volumes:
   pgdata:
   redisdata:
diff --git a/docker-compose.yml b/docker-compose.yml
index e4086acb2..68f06a3c8 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -6,6 +6,7 @@ services:
     build:
       context: ./nginx
       dockerfile: Dockerfile
+    restart: always
     ports:
       - 80:80
     depends_on:
@@ -72,7 +73,8 @@ services:
       AWS_ACCESS_KEY_ID: ${AWS_ACCESS_KEY_ID}
       AWS_SECRET_ACCESS_KEY: ${AWS_SECRET_ACCESS_KEY}
       AWS_S3_BUCKET_NAME: ${AWS_S3_BUCKET_NAME}
-      WEB_URL: localhost/
+      AWS_S3_ENDPOINT_URL: ${AWS_S3_ENDPOINT_URL}
+      WEB_URL: ${WEB_URL}
       GITHUB_CLIENT_SECRET: ${GITHUB_CLIENT_SECRET}
       DISABLE_COLLECTSTATIC: 1
       DOCKERIZED: 1
@@ -110,13 +112,34 @@ services:
       AWS_ACCESS_KEY_ID: ${AWS_ACCESS_KEY_ID}
       AWS_SECRET_ACCESS_KEY: ${AWS_SECRET_ACCESS_KEY}
       AWS_S3_BUCKET_NAME: ${AWS_S3_BUCKET_NAME}
-      WEB_URL: localhost/
+      AWS_S3_ENDPOINT_URL: ${AWS_S3_ENDPOINT_URL}
+      WEB_URL: ${WEB_URL}
       GITHUB_CLIENT_SECRET: ${GITHUB_CLIENT_SECRET}
       DISABLE_COLLECTSTATIC: 1
       DOCKERIZED: 1
       OPENAI_API_KEY: ${OPENAI_API_KEY}
       GPT_ENGINE: ${GPT_ENGINE}
       SECRET_KEY: ${SECRET_KEY}
+  minio:
+    image: minio/minio
+    ports:
+      - 9000:9000
+    environment:
+      MINIO_ROOT_USER: ${AWS_ACCESS_KEY_ID}
+      MINIO_ROOT_PASSWORD: ${AWS_SECRET_ACCESS_KEY}
+    command: server /export --console-address ":9090"
+
+  createbuckets:
+    image: minio/mc
+    depends_on:
+      - minio
+    entrypoint: >
+      /bin/sh -c "
+      /usr/bin/mc config host add plane-minio http://minio:9000 \$AWS_ACCESS_KEY_ID \$AWS_SECRET_ACCESS_KEY;
+      /usr/bin/mc mb plane-minio/\$AWS_S3_BUCKET_NAME;
+      /usr/bin/mc anonymous set download plane-minio/\$AWS_S3_BUCKET_NAME;
+      exit 0;
+      "
 volumes:
   pgdata:
   redisdata:
diff --git a/nginx/nginx.conf b/nginx/nginx.conf
index 4ea689700..8f5fc2910 100644
--- a/nginx/nginx.conf
+++ b/nginx/nginx.conf
@@ -16,5 +16,8 @@ server {
         proxy_pass http://planebackend:8000/api/;
     }
 
+   location /uploads/ {
+        proxy_pass http://minio:9000/uploads/;
+    }
 }
 }
\ No newline at end of file
diff --git a/setup.sh b/setup.sh
index e7f9a52dd..0b4ee279f 100755
--- a/setup.sh
+++ b/setup.sh
@@ -1,7 +1,15 @@
 #!/bin/bash
 cp ./.env.example ./.env
 
-echo -e "\nNEXT_PUBLIC_API_BASE_URL=http://$1"  >> ./.env
+# Export for tr error in mac
 export LC_ALL=C
 export LC_CTYPE=C
-echo -e "\nSECRET_KEY=\"$(tr -dc 'a-z0-9!@#$%^&*(-_=+)' < /dev/urandom | head -c50)\""  >> ./.env
+
+# Generate the NEXT_PUBLIC_API_BASE_URL with given IP
+echo -e "\nNEXT_PUBLIC_API_BASE_URL=http://$1"  >> ./.env
+
+# Generate the SECRET_KEY that will be used by django
+echo -e "SECRET_KEY=\"$(tr -dc 'a-z0-9!@#$%^&*(-_=+)' < /dev/urandom | head -c50)\""  >> ./.env
+
+# WEB_URL for email redirection and image saving
+echo -e "WEB_URL=$1" >> ./.env
\ No newline at end of file