feat: project settings state, filter by cycle

refractor: added types for cycle in IIssue, improved common function used for grouping, made custom hook for my issue filter

apps/app/components/command-palette/shortcuts.tsx

@@ -1,15 +1,53 @@
-import React from "react";
+import React, { useState } from "react";
 // headless ui
 import { Dialog, Transition } from "@headlessui/react";
 // icons
 import { XMarkIcon } from "@heroicons/react/20/solid";
+// ui
+import { Input } from "ui";
 
 type Props = {
   isOpen: boolean;
   setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
+const shortcuts = [
+  {
+    title: "Navigation",
+    shortcuts: [
+      { keys: "ctrl,/", description: "To open navigator" },
+      { keys: "↑", description: "Move up" },
+      { keys: "↓", description: "Move down" },
+      { keys: "←", description: "Move left" },
+      { keys: "→", description: "Move right" },
+      { keys: "Enter", description: "Select" },
+      { keys: "Esc", description: "Close" },
+    ],
+  },
+  {
+    title: "Common",
+    shortcuts: [
+      { keys: "ctrl,p", description: "To create project" },
+      { keys: "ctrl,i", description: "To create issue" },
+      { keys: "ctrl,q", description: "To create cycle" },
+      { keys: "ctrl,h", description: "To open shortcuts guide" },
+      {
+        keys: "ctrl,alt,c",
+        description: "To copy issue url when on issue detail page.",
+      },
+    ],
+  },
+];
+
 const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
+  const [query, setQuery] = useState("");
+
+  const filteredShortcuts = shortcuts.filter((shortcut) =>
+    shortcut.shortcuts.some((item) => item.description.includes(query.trim())) || query === ""
+      ? true
+      : false
+  );
+
   return (
     <Transition.Root show={isOpen} as={React.Fragment}>
       <Dialog as="div" className="relative z-10" onClose={setIsOpen}>
@@ -39,7 +77,7 @@ const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
               <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
                 <div className="bg-white p-5">
                   <div className="sm:flex sm:items-start">
-                    <div className="text-center sm:text-left w-full">
+                    <div className="flex flex-col gap-y-4 text-center sm:text-left w-full">
                       <Dialog.Title
                         as="h3"
                         className="text-lg font-medium leading-6 text-gray-900 flex justify-between"
@@ -54,34 +92,18 @@ const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
                           </button>
                         </span>
                       </Dialog.Title>
-                      <div className="mt-2 pt-5 flex flex-col gap-y-3 w-full">
+                      <div>
-                        {[
+                        <Input
-                          {
+                          id="search"
-                            title: "Navigation",
+                          name="search"
-                            shortcuts: [
+                          type="text"
-                              { keys: "ctrl,/", description: "To open navigator" },
+                          placeholder="Search for shortcuts"
-                              { keys: "↑", description: "Move up" },
+                          onChange={(e) => setQuery(e.target.value)}
-                              { keys: "↓", description: "Move down" },
+                        />
-                              { keys: "←", description: "Move left" },
+                      </div>
-                              { keys: "→", description: "Move right" },
+                      <div className="flex flex-col gap-y-3 w-full">
-                              { keys: "Enter", description: "Select" },
+                        {filteredShortcuts.length > 0 ? (
-                              { keys: "Esc", description: "Close" },
+                          filteredShortcuts.map(({ title, shortcuts }) => (
-                            ],
-                          },
-                          {
-                            title: "Common",
-                            shortcuts: [
-                              { keys: "ctrl,p", description: "To create project" },
-                              { keys: "ctrl,i", description: "To create issue" },
-                              { keys: "ctrl,q", description: "To create cycle" },
-                              { keys: "ctrl,h", description: "To open shortcuts guide" },
-                              {
-                                keys: "ctrl,alt,c",
-                                description: "To copy issue url when on issue detail page.",
-                              },
-                            ],
-                          },
-                        ].map(({ title, shortcuts }) => (
                             <div key={title} className="w-full flex flex-col">
                               <p className="font-medium mb-4">{title}</p>
                               <div className="flex flex-col gap-y-3">
@@ -94,9 +116,6 @@ const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
                                           <kbd className="bg-gray-200 text-sm px-1 rounded">
                                             {key}
                                           </kbd>
-                                        {/* {index !== keys.split(",").length - 1 ? (
-                                          <span className="text-xs">+</span>
-                                        ) : null} */}
                                         </span>
                                       ))}
                                     </div>
@@ -104,7 +123,19 @@ const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
                                 ))}
                               </div>
                             </div>
-                        ))}
+                          ))
+                        ) : (
+                          <div className="flex flex-col gap-y-3">
+                            <p className="text-sm text-gray-500">
+                              No shortcuts found for{" "}
+                              <span className="font-semibold italic">
+                                {`"`}
+                                {query}
+                                {`"`}
+                              </span>
+                            </p>
+                          </div>
+                        )}
                       </div>
                     </div>
                   </div>

apps/app/components/project/issues/BoardView/state/confirm-state-delete.tsx

@@ -61,7 +61,7 @@ const ConfirmStateDeletion: React.FC<Props> = ({ isOpen, onClose, data }) => {
 
   useEffect(() => {
     if (data) setIssuesWithThisStateExist(!!groupedIssues[data.id]);
-  }, [groupedIssues]);
+  }, [groupedIssues, data]);
 
   return (
     <Transition.Root show={isOpen} as={React.Fragment}>

apps/app/components/project/issues/BoardView/state/create-update-state-inline.tsx

@@ -8,11 +8,12 @@ import { TwitterPicker } from "react-color";
 // headless
 import { Popover, Transition } from "@headlessui/react";
 // constants
+import { GROUP_CHOICES } from "constants/";
 import { STATE_LIST } from "constants/fetch-keys";
 // services
 import stateService from "lib/services/state.service";
 // ui
-import { Button, Input } from "ui";
+import { Button, Input, Select, Spinner } from "ui";
 // types
 import type { IState } from "types";
 
@@ -26,6 +27,12 @@ type Props = {
 
 export type StateGroup = "backlog" | "unstarted" | "started" | "completed" | "cancelled" | null;
 
+const defaultValues: Partial<IState> = {
+  name: "",
+  color: "#000000",
+  group: "backlog",
+};
+
 export const CreateUpdateStateInline: React.FC<Props> = ({
   workspaceSlug,
   projectId,
@@ -36,17 +43,13 @@ export const CreateUpdateStateInline: React.FC<Props> = ({
   const {
     register,
     handleSubmit,
-    formState: { errors },
+    formState: { errors, isSubmitting },
     setError,
     watch,
     reset,
     control,
   } = useForm<IState>({
-    defaultValues: {
+    defaultValues,
-      name: "",
-      color: "#000000",
-      group: "backlog",
-    },
   });
 
   const handleClose = () => {
@@ -55,13 +58,13 @@ export const CreateUpdateStateInline: React.FC<Props> = ({
   };
 
   const onSubmit = async (formData: IState) => {
-    if (!workspaceSlug || !projectId) return;
+    if (!workspaceSlug || !projectId || isSubmitting) return;
     const payload: IState = {
       ...formData,
     };
     if (!data) {
       await stateService
-        .createState(workspaceSlug, projectId, { ...payload, group: selectedGroup })
+        .createState(workspaceSlug, projectId, { ...payload })
         .then((res) => {
           mutate<IState[]>(STATE_LIST(projectId), (prevData) => [...(prevData ?? []), res], false);
           handleClose();
@@ -77,7 +80,6 @@ export const CreateUpdateStateInline: React.FC<Props> = ({
       await stateService
         .updateState(workspaceSlug, projectId, data.id, {
           ...payload,
-          group: selectedGroup ?? "backlog",
         })
         .then((res) => {
           mutate<IState[]>(
@@ -108,7 +110,15 @@ export const CreateUpdateStateInline: React.FC<Props> = ({
   useEffect(() => {
     if (data === null) return;
     reset(data);
-  }, [data]);
+  }, [data, reset]);
+
+  useEffect(() => {
+    if (!data)
+      reset({
+        ...defaultValues,
+        group: selectedGroup ?? "backlog",
+      });
+  }, [selectedGroup, data, reset]);
 
   return (
     <div className="flex items-center gap-x-2 p-2 bg-gray-50">
@@ -160,11 +170,26 @@ export const CreateUpdateStateInline: React.FC<Props> = ({
         register={register}
         placeholder="Enter state name"
         validations={{
-          required: "Name is required",
+          required: true,
         }}
         error={errors.name}
         autoComplete="off"
       />
+      {data && (
+        <Select
+          id="group"
+          name="group"
+          error={errors.group}
+          register={register}
+          validations={{
+            required: true,
+          }}
+          options={Object.keys(GROUP_CHOICES).map((key) => ({
+            value: key,
+            label: GROUP_CHOICES[key as keyof typeof GROUP_CHOICES],
+          }))}
+        />
+      )}
       <Input
         id="description"
         name="description"
@@ -176,8 +201,8 @@ export const CreateUpdateStateInline: React.FC<Props> = ({
       <Button theme="secondary" onClick={handleClose}>
         Cancel
       </Button>
-      <Button theme="primary" onClick={handleSubmit(onSubmit)}>
+      <Button theme="primary" disabled={isSubmitting} onClick={handleSubmit(onSubmit)}>
-        Save
+        {isSubmitting ? "Loading..." : data ? "Update" : "Create"}
       </Button>
     </div>
   );

apps/app/components/project/issues/ListView/index.tsx

@@ -93,6 +93,9 @@ const ListView: React.FC<Props> = ({
                         <h2 className="font-medium leading-5 capitalize">
                           {singleGroup === null || singleGroup === "null"
                             ? selectedGroup === "priority" && "No priority"
+                            : selectedGroup === "created_by"
+                            ? people?.find((p) => p.member.id === singleGroup)?.member
+                                ?.first_name ?? "Loading..."
                             : addSpaceIfCamelCase(singleGroup)}
                         </h2>
                       ) : (

apps/app/components/socialbuttons/google-login.tsx

@@ -1,4 +1,4 @@
-import { FC, CSSProperties } from "react";
+import { FC, CSSProperties, useEffect, useRef, useCallback } from "react";
 // next
 import Script from "next/script";
 
@@ -10,19 +10,16 @@ export interface IGoogleLoginButton {
 }
 
 export const GoogleLoginButton: FC<IGoogleLoginButton> = (props) => {
-  return (
+  const googleSignInButton = useRef<HTMLDivElement>(null);
-    <>
+
-      <Script
+  const loadScript = useCallback(() => {
-        src="https://accounts.google.com/gsi/client"
+    if (!googleSignInButton.current) return;
-        async
-        defer
-        onLoad={() => {
     window?.google?.accounts.id.initialize({
       client_id: process.env.NEXT_PUBLIC_GOOGLE_CLIENTID || "",
       callback: props.onSuccess as any,
     });
     window?.google?.accounts.id.renderButton(
-            document.getElementById("googleSignInButton") as HTMLElement,
+      googleSignInButton.current,
       {
         type: "standard",
         theme: "outline",
@@ -33,9 +30,18 @@ export const GoogleLoginButton: FC<IGoogleLoginButton> = (props) => {
       } as GsiButtonConfiguration // customization attributes
     );
     window?.google?.accounts.id.prompt(); // also display the One Tap dialog
-        }}
+  }, [props.onSuccess]);
-      />
+
-      <div className="w-full" id="googleSignInButton"></div>
+  useEffect(() => {
+    if (window?.google?.accounts?.id) {
+      loadScript();
+    }
+  }, [loadScript]);
+
+  return (
+    <>
+      <Script src="https://accounts.google.com/gsi/client" async defer onLoad={loadScript} />
+      <div className="w-full" id="googleSignInButton" ref={googleSignInButton}></div>
     </>
   );
 };

apps/app/constants/common.ts

@@ -26,7 +26,7 @@ export const renderShortNumericDateFormat = (date: string | Date) => {
 export const groupBy = (array: any[], key: string) => {
   const innerKey = key.split("."); // split the key by dot
   return array.reduce((result, currentValue) => {
-    const key = innerKey.reduce((obj, i) => obj[i], currentValue); // get the value of the inner key
+    const key = innerKey.reduce((obj, i) => obj?.[i], currentValue) ?? "None"; // get the value of the inner key
     (result[key] = result[key] || []).push(currentValue);
     return result;
   }, {});

apps/app/constants/fetch-keys.ts

@@ -5,6 +5,7 @@ export const USER_WORKSPACES = "USER_WORKSPACES";
 export const WORKSPACE_MEMBERS = (workspaceSlug: string) => `WORKSPACE_MEMBERS_${workspaceSlug}`;
 export const WORKSPACE_INVITATIONS = "WORKSPACE_INVITATIONS";
 export const WORKSPACE_INVITATION = "WORKSPACE_INVITATION";
+export const LAST_ACTIVE_WORKSPACE_AND_PROJECTS = "LAST_ACTIVE_WORKSPACE_AND_PROJECTS";
 
 export const PROJECTS_LIST = (workspaceSlug: string) => `PROJECTS_LIST_${workspaceSlug}`;
 export const PROJECT_DETAILS = (projectId: string) => `PROJECT_DETAILS_${projectId}`;
@@ -30,3 +31,4 @@ export const STATE_LIST = (projectId: string) => `STATE_LIST_${projectId}`;
 export const STATE_DETAIL = "STATE_DETAIL";
 
 export const USER_ISSUE = (workspaceSlug: string) => `USER_ISSUE_${workspaceSlug}`;
+export const USER_PROJECT_VIEW = (projectId: string) => `USER_PROJECT_VIEW_${projectId}`;

apps/app/contexts/theme.context.tsx

@@ -1,4 +1,6 @@
 import React, { createContext, useCallback, useReducer, useEffect } from "react";
+// swr
+import useSWR from "swr";
 // constants
 import {
   TOGGLE_SIDEBAR,
@@ -10,6 +12,12 @@ import {
 } from "constants/theme.context.constants";
 // components
 import ToastAlert from "components/toast-alert";
+// hooks
+import useUser from "lib/hooks/useUser";
+// constants
+import { PROJECT_MEMBERS, USER_PROJECT_VIEW } from "constants/fetch-keys";
+// services
+import projectService from "lib/services/project.service";
 
 export const themeContext = createContext<ContextType>({} as ContextType);
 
@@ -122,53 +130,89 @@ export const reducer: ReducerFunctionType = (state, action) => {
 export const ThemeContextProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   const [state, dispatch] = useReducer(reducer, initialState);
 
+  const { activeProject, activeWorkspace, user } = useUser();
+
+  const { data: projectMember } = useSWR(
+    activeWorkspace && activeProject ? PROJECT_MEMBERS(activeProject.id) : null,
+    activeWorkspace && activeProject
+      ? () => projectService.projectMembers(activeWorkspace.slug, activeProject.id)
+      : null
+  );
+
   const toggleCollapsed = useCallback(() => {
     dispatch({
       type: TOGGLE_SIDEBAR,
     });
   }, []);
 
-  const setIssueView = useCallback((display: "list" | "kanban") => {
+  const saveDataToServer = useCallback(() => {
+    if (!activeProject || !activeWorkspace) return;
+    projectService
+      .setProjectView(activeWorkspace.slug, activeProject.id, state)
+      .then((res) => {
+        console.log("saved", res);
+      })
+      .catch((error) => {});
+  }, [activeProject, activeWorkspace, state]);
+
+  const setIssueView = useCallback(
+    (display: "list" | "kanban") => {
       dispatch({
         type: SET_ISSUE_VIEW,
         payload: {
           issueView: display,
         },
       });
-  }, []);
+      saveDataToServer();
+    },
+    [saveDataToServer]
+  );
 
-  const setGroupByProperty = useCallback((property: NestedKeyOf<IIssue> | null) => {
+  const setGroupByProperty = useCallback(
+    (property: NestedKeyOf<IIssue> | null) => {
       dispatch({
         type: SET_GROUP_BY_PROPERTY,
         payload: {
           groupByProperty: property,
         },
       });
-  }, []);
+      saveDataToServer();
+    },
+    [saveDataToServer]
+  );
 
-  const setOrderBy = useCallback((property: NestedKeyOf<IIssue> | null) => {
+  const setOrderBy = useCallback(
+    (property: NestedKeyOf<IIssue> | null) => {
       dispatch({
         type: SET_ORDER_BY_PROPERTY,
         payload: {
           orderBy: property,
         },
       });
-  }, []);
+      saveDataToServer();
+    },
+    [saveDataToServer]
+  );
 
-  const setFilterIssue = useCallback((property: "activeIssue" | "backlogIssue" | null) => {
+  const setFilterIssue = useCallback(
+    (property: "activeIssue" | "backlogIssue" | null) => {
       dispatch({
         type: SET_FILTER_ISSUES,
         payload: {
           filterIssue: property,
         },
       });
-  }, []);
+      saveDataToServer();
+    },
+    [saveDataToServer]
+  );
 
   useEffect(() => {
     dispatch({
       type: REHYDRATE_THEME,
+      payload: projectMember?.find((member) => member.member.id === user?.id)?.view_props,
     });
-  }, []);
+  }, [projectMember, user]);
 
   return (
     <themeContext.Provider

apps/app/lib/hooks/useMyIssueFilter.tsx

@@ -0,0 +1,105 @@
+import { useEffect, useState } from "react";
+// hooks
+import useUser from "./useUser";
+// types
+import { Properties, NestedKeyOf, IIssue } from "types";
+// services
+import userService from "lib/services/user.service";
+// common
+import { groupBy } from "constants/common";
+
+import { PRIORITIES } from "constants/";
+
+const initialValues: Properties = {
+  key: true,
+  state: true,
+  assignee: true,
+  priority: false,
+  start_date: false,
+  target_date: false,
+  cycle: false,
+};
+
+const useMyIssuesProperties = (issues?: IIssue[]) => {
+  const [properties, setProperties] = useState<Properties>(initialValues);
+  const [groupByProperty, setGroupByProperty] = useState<NestedKeyOf<IIssue> | null>(null);
+
+  const { states, user } = useUser();
+
+  useEffect(() => {
+    if (!user) return;
+    setProperties({ ...initialValues, ...user.my_issues_prop?.properties });
+    setGroupByProperty(user.my_issues_prop?.groupBy ?? null);
+  }, [user]);
+
+  let groupedByIssues: {
+    [key: string]: IIssue[];
+  } = {
+    ...(groupByProperty === "state_detail.name"
+      ? Object.fromEntries(
+          states
+            ?.sort((a, b) => a.sequence - b.sequence)
+            ?.map((state) => [
+              state.name,
+              issues?.filter((issue) => issue.state === state.name) ?? [],
+            ]) ?? []
+        )
+      : groupByProperty === "priority"
+      ? Object.fromEntries(
+          PRIORITIES.map((priority) => [
+            priority,
+            issues?.filter((issue) => issue.priority === priority) ?? [],
+          ])
+        )
+      : {}),
+    ...groupBy(issues ?? [], groupByProperty ?? ""),
+  };
+
+  const setMyIssueProperty = (key: keyof Properties) => {
+    if (!user) return;
+    userService.updateUser({ my_issues_prop: { properties, groupBy: groupByProperty } });
+    setProperties((prevData) => ({
+      ...prevData,
+      [key]: !prevData[key],
+    }));
+    localStorage.setItem(
+      "my_issues_prop",
+      JSON.stringify({
+        properties: {
+          ...properties,
+          [key]: !properties[key],
+        },
+        groupBy: groupByProperty,
+      })
+    );
+  };
+
+  const setMyIssueGroupByProperty = (groupByProperty: NestedKeyOf<IIssue> | null) => {
+    if (!user) return;
+    userService.updateUser({ my_issues_prop: { properties, groupBy: groupByProperty } });
+    setGroupByProperty(groupByProperty);
+    localStorage.setItem(
+      "my_issues_prop",
+      JSON.stringify({ properties, groupBy: groupByProperty })
+    );
+  };
+
+  useEffect(() => {
+    const viewProps = localStorage.getItem("my_issues_prop");
+    if (viewProps) {
+      const { properties, groupBy } = JSON.parse(viewProps);
+      setProperties(properties);
+      setGroupByProperty(groupBy);
+    }
+  }, []);
+
+  return {
+    filteredIssues: groupedByIssues,
+    groupByProperty,
+    properties,
+    setMyIssueProperty,
+    setMyIssueGroupByProperty,
+  } as const;
+};
+
+export default useMyIssuesProperties;

apps/app/lib/services/project.service.ts

@@ -132,6 +132,20 @@ class ProjectServices extends APIService {
       });
   }
 
+  async getProjectMember(
+    workspacSlug: string,
+    projectId: string,
+    memberId: string
+  ): Promise<IProjectMember> {
+    return this.get(PROJECT_MEMBER_DETAIL(workspacSlug, projectId, memberId))
+      .then((response) => {
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
   async updateProjectMember(
     workspacSlug: string,
     projectId: string,
@@ -207,7 +221,7 @@ class ProjectServices extends APIService {
     projectId: string,
     data: ProjectViewTheme
   ): Promise<any> {
-    await this.patch(PROJECT_VIEW_ENDPOINT(workspacSlug, projectId), data)
+    await this.post(PROJECT_VIEW_ENDPOINT(workspacSlug, projectId), data)
       .then((response) => {
         return response?.data;
       })

apps/app/lib/services/user.service.ts

@@ -1,6 +1,7 @@
 // services
 import { USER_ENDPOINT, USER_ISSUES_ENDPOINT, USER_ONBOARD_ENDPOINT } from "constants/api-routes";
 import APIService from "lib/services/api.service";
+import type { IUser } from "types";
 
 const { NEXT_PUBLIC_API_BASE_URL } = process.env;
 
@@ -38,7 +39,7 @@ class UserService extends APIService {
       });
   }
 
-  async updateUser(data = {}): Promise<any> {
+  async updateUser(data: Partial<IUser>): Promise<any> {
     return this.patch(USER_ENDPOINT, data)
       .then((response) => {
         return response?.data;

apps/app/lib/services/workspace.service.ts

@@ -19,7 +19,12 @@ import APIService from "lib/services/api.service";
 const { NEXT_PUBLIC_API_BASE_URL } = process.env;
 
 // types
-import { IWorkspace, IWorkspaceMember, IWorkspaceMemberInvitation } from "types";
+import {
+  IWorkspace,
+  IWorkspaceMember,
+  IWorkspaceMemberInvitation,
+  ILastActiveWorkspaceDetails,
+} from "types";
 
 class WorkspaceService extends APIService {
   constructor() {
@@ -98,6 +103,16 @@ class WorkspaceService extends APIService {
       });
   }
 
+  async getLastActiveWorkspaceAndProjects(): Promise<ILastActiveWorkspaceDetails> {
+    return this.get(LAST_ACTIVE_WORKSPACE_AND_PROJECTS)
+      .then((response) => {
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
   async userWorkspaceInvitations(): Promise<IWorkspaceMemberInvitation[]> {
     return this.get(USER_WORKSPACE_INVITATIONS)
       .then((response) => {

apps/app/pages/me/my-issues.tsx

@@ -1,39 +1,52 @@
 // react
-import React, { useState } from "react";
+import React from "react";
 // next
+import Link from "next/link";
 import type { NextPage } from "next";
 // swr
 import useSWR from "swr";
+// headless ui
+import { Transition, Popover } from "@headlessui/react";
 // layouts
 import AppLayout from "layouts/app-layout";
 // hooks
 import useUser from "lib/hooks/useUser";
 // ui
-import { Spinner } from "ui";
+import {
-import { BreadcrumbItem, Breadcrumbs } from "ui/Breadcrumbs";
+  Spinner,
-import { EmptySpace, EmptySpaceItem } from "ui/EmptySpace";
+  HeaderButton,
-import HeaderButton from "ui/HeaderButton";
+  EmptySpace,
+  EmptySpaceItem,
+  Breadcrumbs,
+  BreadcrumbItem,
+  CustomMenu,
+} from "ui";
 // constants
 import { USER_ISSUE } from "constants/fetch-keys";
-import { classNames } from "constants/common";
+import { classNames, replaceUnderscoreIfSnakeCase } from "constants/common";
 // services
 import userService from "lib/services/user.service";
 import issuesServices from "lib/services/issues.service";
 // hoc
 import withAuth from "lib/hoc/withAuthWrapper";
+import useMyIssuesProperties from "lib/hooks/useMyIssueFilter";
 // components
 import ChangeStateDropdown from "components/project/issues/my-issues/ChangeStateDropdown";
 // icons
 import { ChevronDownIcon, PlusIcon, RectangleStackIcon } from "@heroicons/react/24/outline";
 // types
-import { IIssue } from "types";
+import { IIssue, NestedKeyOf, Properties } from "types";
-import Link from "next/link";
+
-import { Menu, Transition } from "@headlessui/react";
+const groupByOptions: Array<{ name: string; key: NestedKeyOf<IIssue> | null }> = [
+  { name: "State", key: "state_detail.name" },
+  { name: "Priority", key: "priority" },
+  { name: "Cycle", key: "issue_cycle.cycle_detail.name" },
+  { name: "Created By", key: "created_by" },
+  { name: "None", key: null },
+];
 
 const MyIssues: NextPage = () => {
-  const [selectedWorkspace, setSelectedWorkspace] = useState<string | null>(null);
+  const { user, activeWorkspace } = useUser();
-
-  const { user, workspaces, activeWorkspace } = useUser();
 
   const { data: myIssues, mutate: mutateMyIssues } = useSWR<IIssue[]>(
     user && activeWorkspace ? USER_ISSUE(activeWorkspace.slug) : null,
@@ -71,6 +84,14 @@ const MyIssues: NextPage = () => {
       });
   };
 
+  const {
+    filteredIssues,
+    properties,
+    setMyIssueGroupByProperty,
+    setMyIssueProperty,
+    groupByProperty,
+  } = useMyIssuesProperties(myIssues);
+
   return (
     <AppLayout
       breadcrumbs={
@@ -79,6 +100,75 @@ const MyIssues: NextPage = () => {
         </Breadcrumbs>
       }
       right={
+        <>
+          <Popover className="relative">
+            {({ open }) => (
+              <>
+                <Popover.Button
+                  className={classNames(
+                    open ? "bg-gray-100 text-gray-900" : "text-gray-500",
+                    "group flex gap-2 items-center rounded-md bg-transparent text-xs font-medium hover:bg-gray-100 hover:text-gray-900 focus:outline-none border p-2"
+                  )}
+                >
+                  <span>View</span>
+                  <ChevronDownIcon className="h-4 w-4" aria-hidden="true" />
+                </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 mr-5 right-1/2 z-10 mt-1 w-screen max-w-xs translate-x-1/2 transform p-3 bg-white rounded-lg shadow-lg">
+                    <div className="relative flex flex-col gap-1 gap-y-4">
+                      <div className="flex justify-between items-center">
+                        <h4 className="text-sm text-gray-600">Group by</h4>
+                        <CustomMenu
+                          label={
+                            groupByOptions.find((option) => option.key === groupByProperty)?.name ??
+                            "Select"
+                          }
+                        >
+                          {groupByOptions.map((option) => (
+                            <CustomMenu.MenuItem
+                              key={option.key}
+                              onClick={() => setMyIssueGroupByProperty(option.key)}
+                            >
+                              {option.name}
+                            </CustomMenu.MenuItem>
+                          ))}
+                        </CustomMenu>
+                      </div>
+                      <div className="border-b-2"></div>
+                      <div className="relative flex flex-col gap-1">
+                        <h4 className="text-base text-gray-600">Properties</h4>
+                        <div className="flex items-center gap-2 flex-wrap">
+                          {Object.keys(properties).map((key) => (
+                            <button
+                              key={key}
+                              type="button"
+                              className={`px-2 py-1 capitalize rounded border border-theme text-xs ${
+                                properties[key as keyof Properties]
+                                  ? "border-theme bg-theme text-white"
+                                  : ""
+                              }`}
+                              onClick={() => setMyIssueProperty(key as keyof Properties)}
+                            >
+                              {replaceUnderscoreIfSnakeCase(key)}
+                            </button>
+                          ))}
+                        </div>
+                      </div>
+                    </div>
+                  </Popover.Panel>
+                </Transition>
+              </>
+            )}
+          </Popover>
           <HeaderButton
             Icon={PlusIcon}
             label="Add Issue"
@@ -90,6 +180,7 @@ const MyIssues: NextPage = () => {
               document.dispatchEvent(e);
             }}
           />
+        </>
       }
     >
       <div className="w-full h-full flex flex-col space-y-5">

apps/app/pages/projects/[projectId]/issues/index.tsx

@@ -49,6 +49,7 @@ import { PROJECT_ISSUES_LIST } from "constants/fetch-keys";
 const groupByOptions: Array<{ name: string; key: NestedKeyOf<IIssue> | null }> = [
   { name: "State", key: "state_detail.name" },
   { name: "Priority", key: "priority" },
+  { name: "Cycle", key: "issue_cycle.cycle_detail.name" },
   { name: "Created By", key: "created_by" },
   { name: "None", key: null },
 ];

apps/app/pages/workspace/settings.tsx

@@ -223,7 +223,14 @@ const WorkspaceSettings = () => {
                   </div>
                 </Tab.Panel>
                 <Tab.Panel>
-                  <div>
+                  <div className="space-y-3">
+                    <h2 className="text-2xl text-red-500 font-semibold">Danger Zone</h2>
+                    <p className="w-full md:w-1/2">
+                      The danger zone of the workspace delete page is a critical area that requires
+                      careful consideration and attention. When deleting a workspace, all of the
+                      data and resources within that workspace will be permanently removed and
+                      cannot be recovered.
+                    </p>
                     <Button theme="danger" onClick={() => setIsOpen(true)}>
                       Delete the workspace
                     </Button>

apps/app/types/issues.d.ts

@@ -1,4 +1,4 @@
-import type { IState, IUser, IProject } from "./";
+import type { IState, IUser, IProject, ICycle } from "./";
 
 export interface IssueResponse {
   next_cursor: string;
@@ -11,6 +11,19 @@ export interface IssueResponse {
   results: IIssue[];
 }
 
+export interface IIssueCycle {
+  id: string;
+  cycle_detail: ICycle;
+  created_at: Date;
+  updated_at: Date;
+  created_by: string;
+  updated_by: string;
+  project: string;
+  workspace: string;
+  issue: string;
+  cycle: string;
+}
+
 export interface IIssue {
   id: string;
   state_detail: IState;
@@ -47,6 +60,8 @@ export interface IIssue {
   blocked_issue_details: any[];
   sprints: string | null;
   cycle: string | null;
+
+  issue_cycle: IIssueCycle;
 }
 
 export interface BlockeIssue {

apps/app/types/users.d.ts

@@ -1,3 +1,5 @@
+import { IIssue, NestedKeyOf, Properties } from "./";
+
 export interface IUser {
   id: readonly string;
   last_login: readonly Date;
@@ -14,6 +16,12 @@ export interface IUser {
   created_location: readonly string;
   is_email_verified: boolean;
   token: string;
+
+  my_issues_prop?: {
+    properties: Properties;
+    groupBy: NestedKeyOf<IIssue> | null;
+  };
+
   [...rest: string]: any;
 }
 

apps/app/types/workspace.d.ts

@@ -1,4 +1,4 @@
-import type { IUser, IUserLite } from "./";
+import type { IProjectMember, IUser, IUserLite } from "./";
 
 export interface IWorkspace {
   readonly id: string;
@@ -36,3 +36,8 @@ export interface IWorkspaceMember {
   created_by: string;
   updated_by: string;
 }
+
+export interface ILastActiveWorkspaceDetails {
+  workspace_details: IWorkspace;
+  project_details?: IProjectMember[];
+}

yarn.lock

@@ -778,7 +778,12 @@ camelcase-css@^2.0.1:
   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.30001332, caniuse-lite@^1.0.30001400, caniuse-lite@^1.0.30001426:
+caniuse-lite@^1.0.30001332:
+  version "1.0.30001439"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001439.tgz#ab7371faeb4adff4b74dad1718a6fd122e45d9cb"
+  integrity sha512-1MgUzEkoMO6gKfXflStpYgZDlFM7M/ck/bgfVCACO5vnAf0fXoNVHdWtqGU+MYca+4bL9Z5bpOVmR33cWW9G2A==
+
+caniuse-lite@^1.0.30001400, caniuse-lite@^1.0.30001426:
   version "1.0.30001434"
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001434.tgz#ec1ec1cfb0a93a34a0600d37903853030520a4e5"
   integrity sha512-aOBHrLmTQw//WFa2rcF1If9fa3ypkC1wzqqiKHgfdrXTWcU8C4gKVZT77eQAPWN1APys3+uQ0Df07rKauXGEYA==