feat: cycles and modules toggle in settings, refactor: folder structure (#247)

* feat: link option in remirror

* fix: removed link import from remirror toolbar

* refactor: constants folder

* refactor: layouts folder structure

* fix: issue view context

* feat: cycles and modules toggle in settings

apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/control.tsx

@@ -9,7 +9,7 @@ import { Controller, useForm } from "react-hook-form";
 // lib
 import { requiredAdmin } from "lib/auth";
 // layouts
-import SettingsLayout from "layouts/settings-layout";
+import AppLayout from "layouts/app-layout";
 // services
 import projectService from "services/project.service";
 import workspaceService from "services/workspace.service";
@@ -103,8 +103,8 @@ const ControlSettings: NextPage<TControlSettingsProps> = (props) => {
   };
 
   return (
-    <SettingsLayout
-      type="project"
+    <AppLayout
+      settingsLayout="project"
       memberType={{ isMember, isOwner, isViewer, isGuest }}
       breadcrumbs={
         <Breadcrumbs>
@@ -247,7 +247,7 @@ const ControlSettings: NextPage<TControlSettingsProps> = (props) => {
           </div>
         </div>
       </form>
-    </SettingsLayout>
+    </AppLayout>
   );
 };
 

apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx

@@ -0,0 +1,187 @@
+import React from "react";
+
+import { useRouter } from "next/router";
+
+import useSWR, { mutate } from "swr";
+
+// services
+import projectService from "services/project.service";
+// lib
+import { requiredAdmin } from "lib/auth";
+// layouts
+import AppLayout from "layouts/app-layout";
+// hooks
+import useToast from "hooks/use-toast";
+// ui
+import { Button } from "components/ui";
+import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
+// types
+import { IProject, UserAuth } from "types";
+import type { NextPage, NextPageContext } from "next";
+// fetch-keys
+import { PROJECTS_LIST, PROJECT_DETAILS } from "constants/fetch-keys";
+
+const FeaturesSettings: NextPage<UserAuth> = (props) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const { data: projectDetails } = useSWR(
+    workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => projectService.getProject(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const handleSubmit = async (formData: Partial<IProject>) => {
+    if (!workspaceSlug || !projectId) return;
+
+    mutate<IProject>(
+      PROJECT_DETAILS(projectId as string),
+      (prevData) => ({ ...(prevData as IProject), ...formData }),
+      false
+    );
+
+    mutate<IProject[]>(
+      PROJECTS_LIST(workspaceSlug as string),
+      (prevData) =>
+        prevData?.map((p) => {
+          if (p.id === projectId)
+            return {
+              ...p,
+              ...formData,
+            };
+
+          return p;
+        }),
+      false
+    );
+
+    await projectService
+      .updateProject(workspaceSlug as string, projectId as string, formData)
+      .then((res) => {
+        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);
+      });
+  };
+
+  return (
+    <AppLayout
+      settingsLayout="project"
+      memberType={props}
+      breadcrumbs={
+        <Breadcrumbs>
+          <BreadcrumbItem
+            title={`${projectDetails?.name ?? "Project"}`}
+            link={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}
+          />
+          <BreadcrumbItem title="Features Settings" />
+        </Breadcrumbs>
+      }
+    >
+      <section className="space-y-8">
+        <div>
+          <h3 className="text-3xl font-bold leading-6 text-gray-900">Project Features</h3>
+        </div>
+        <div className="space-y-8 md:w-2/3">
+          <div className="flex items-center justify-between gap-x-10 gap-y-2">
+            <div>
+              <h4 className="text-md mb-1 leading-6 text-gray-900">Use cycles</h4>
+              <p className="mb-3 text-sm text-gray-500">
+                Cycles are enabled for all the projects in this workspace. Access it from the
+                navigation bar.
+              </p>
+            </div>
+            <div>
+              <button
+                type="button"
+                className={`relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ${
+                  projectDetails?.cycle_view ? "bg-indigo-500" : "bg-gray-200"
+                }`}
+                role="switch"
+                aria-checked={projectDetails?.cycle_view}
+                onClick={() => handleSubmit({ cycle_view: !projectDetails?.cycle_view })}
+              >
+                <span className="sr-only">Use cycles</span>
+                <span
+                  aria-hidden="true"
+                  className={`inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out ${
+                    projectDetails?.cycle_view ? "translate-x-5" : "translate-x-0"
+                  }`}
+                />
+              </button>
+            </div>
+          </div>
+          <div className="flex items-center justify-between gap-x-10 gap-y-2">
+            <div>
+              <h4 className="text-md mb-1 leading-6 text-gray-900">Use modules</h4>
+              <p className="mb-3 text-sm text-gray-500">
+                Modules are enabled for all the projects in this workspace. Access it from the
+                navigation bar.
+              </p>
+            </div>
+            <div>
+              <button
+                type="button"
+                className={`relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ${
+                  projectDetails?.module_view ? "bg-indigo-500" : "bg-gray-200"
+                }`}
+                role="switch"
+                aria-checked={projectDetails?.module_view}
+                onClick={() => handleSubmit({ module_view: !projectDetails?.module_view })}
+              >
+                <span className="sr-only">Use cycles</span>
+                <span
+                  aria-hidden="true"
+                  className={`inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out ${
+                    projectDetails?.module_view ? "translate-x-5" : "translate-x-0"
+                  }`}
+                />
+              </button>
+            </div>
+          </div>
+          <div className="flex items-center gap-2">
+            <a href="https://plane.so/" target="_blank" rel="noreferrer">
+              <Button theme="secondary" size="rg" className="text-xs">
+                Plane is open-source, view Roadmap
+              </Button>
+            </a>
+            <a href="https://github.com/makeplane/plane" target="_blank" rel="noreferrer">
+              <Button theme="secondary" size="rg" className="text-xs">
+                Star us on GitHub
+              </Button>
+            </a>
+          </div>
+        </div>
+      </section>
+    </AppLayout>
+  );
+};
+
+export const getServerSideProps = async (ctx: NextPageContext) => {
+  const projectId = ctx.query.projectId as string;
+  const workspaceSlug = ctx.query.workspaceSlug as string;
+
+  const memberDetail = await requiredAdmin(workspaceSlug, projectId, ctx.req?.headers.cookie);
+
+  return {
+    props: {
+      isOwner: memberDetail?.role === 20,
+      isMember: memberDetail?.role === 15,
+      isViewer: memberDetail?.role === 10,
+      isGuest: memberDetail?.role === 5,
+    },
+  };
+};
+
+export default FeaturesSettings;

apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx

@@ -6,11 +6,11 @@ import useSWR, { mutate } from "swr";
 
 // react-hook-form
 import { Controller, useForm } from "react-hook-form";
-import { IProject, IWorkspace } from "types";
+import { IProject, IWorkspace, UserAuth } from "types";
 // lib
 import { requiredAdmin } from "lib/auth";
 // layouts
-import SettingsLayout from "layouts/settings-layout";
+import AppLayout from "layouts/app-layout";
 // services
 import projectService from "services/project.service";
 import workspaceService from "services/workspace.service";
@@ -24,13 +24,13 @@ import { Button, Input, TextArea, Loader, CustomSelect } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 import OutlineButton from "components/ui/outline-button";
 // helpers
-import { debounce } from "helpers/functions.helper";
+import { debounce } from "helpers/common.helper";
 // types
 import type { NextPage, NextPageContext } from "next";
 // fetch-keys
 import { PROJECTS_LIST, PROJECT_DETAILS, WORKSPACE_DETAILS } from "constants/fetch-keys";
 // constants
-import { NETWORK_CHOICES } from "constants/";
+import { NETWORK_CHOICES } from "constants/project";
 
 const defaultValues: Partial<IProject> = {
   name: "",
@@ -39,14 +39,7 @@ const defaultValues: Partial<IProject> = {
   network: 0,
 };
 
-type TGeneralSettingsProps = {
-  isMember: boolean;
-  isOwner: boolean;
-  isViewer: boolean;
-  isGuest: boolean;
-};
-
-const GeneralSettings: NextPage<TGeneralSettingsProps> = (props) => {
+const GeneralSettings: NextPage<UserAuth> = (props) => {
   const { isMember, isOwner, isViewer, isGuest } = props;
 
   const [selectProject, setSelectedProject] = useState<string | null>(null);
@@ -100,6 +93,7 @@ const GeneralSettings: NextPage<TGeneralSettingsProps> = (props) => {
 
   const onSubmit = async (formData: IProject) => {
     if (!activeWorkspace || !projectDetails) return;
+
     const payload: Partial<IProject> = {
       name: formData.name,
       network: formData.network,
@@ -109,6 +103,7 @@ const GeneralSettings: NextPage<TGeneralSettingsProps> = (props) => {
       project_lead: formData.project_lead,
       icon: formData.icon,
     };
+
     await projectService
       .updateProject(activeWorkspace.slug, projectDetails.id, payload)
       .then((res) => {
@@ -130,9 +125,9 @@ const GeneralSettings: NextPage<TGeneralSettingsProps> = (props) => {
   };
 
   return (
-    <SettingsLayout
+    <AppLayout
+      settingsLayout="project"
       memberType={{ isMember, isOwner, isViewer, isGuest }}
-      type="project"
       breadcrumbs={
         <Breadcrumbs>
           <BreadcrumbItem
@@ -341,7 +336,7 @@ const GeneralSettings: NextPage<TGeneralSettingsProps> = (props) => {
           </div>
         </div>
       </form>
-    </SettingsLayout>
+    </AppLayout>
   );
 };
 

apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx

@@ -1,11 +1,15 @@
 import React, { useState } from "react";
+
 import { useRouter } from "next/router";
+
 import useSWR from "swr";
+
+// react-hook-form
 import { Controller, SubmitHandler, useForm } from "react-hook-form";
-import { PlusIcon } from "@heroicons/react/24/outline";
-import { Popover, Transition } from "@headlessui/react";
+// react-color
 import { TwitterPicker } from "react-color";
-import type { NextPageContext, NextPage } from "next";
+// headless ui
+import { Popover, Transition } from "@headlessui/react";
 // services
 import projectService from "services/project.service";
 import workspaceService from "services/workspace.service";
@@ -13,20 +17,23 @@ import issuesService from "services/issues.service";
 // lib
 import { requiredAdmin } from "lib/auth";
 // layouts
-import SettingsLayout from "layouts/settings-layout";
+import AppLayout from "layouts/app-layout";
 // components
 import SingleLabel from "components/project/settings/single-label";
 // ui
 import { Button, Input, Loader } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
-// fetch-keys
-import { PROJECT_DETAILS, PROJECT_ISSUE_LABELS, WORKSPACE_DETAILS } from "constants/fetch-keys";
+// icons
+import { PlusIcon } from "@heroicons/react/24/outline";
 // types
 import { IIssueLabels } from "types";
+import type { NextPageContext, NextPage } from "next";
+// fetch-keys
+import { PROJECT_DETAILS, PROJECT_ISSUE_LABELS, WORKSPACE_DETAILS } from "constants/fetch-keys";
 
 const defaultValues: Partial<IIssueLabels> = {
   name: "",
-  colour: "#ff0000",
+  color: "#ff0000",
 };
 
 type TLabelSettingsProps = {
@@ -52,7 +59,7 @@ const LabelsSettings: NextPage<TLabelSettingsProps> = (props) => {
     () => (workspaceSlug ? workspaceService.getWorkspace(workspaceSlug as string) : null)
   );
 
-  const { data: activeProject } = useSWR(
+  const { data: projectDetails } = useSWR(
     workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
     workspaceSlug && projectId
       ? () => projectService.getProject(workspaceSlug as string, projectId as string)
@@ -77,9 +84,9 @@ const LabelsSettings: NextPage<TLabelSettingsProps> = (props) => {
   );
 
   const handleNewLabel: SubmitHandler<IIssueLabels> = async (formData) => {
-    if (!activeWorkspace || !activeProject || isSubmitting) return;
+    if (!activeWorkspace || !projectDetails || isSubmitting) return;
     await issuesService
-      .createIssueLabel(activeWorkspace.slug, activeProject.id, formData)
+      .createIssueLabel(activeWorkspace.slug, projectDetails.id, formData)
       .then((res) => {
         reset(defaultValues);
         mutate((prevData) => [...(prevData ?? []), res], false);
@@ -89,16 +96,17 @@ const LabelsSettings: NextPage<TLabelSettingsProps> = (props) => {
 
   const editLabel = (label: IIssueLabels) => {
     setNewLabelForm(true);
-    setValue("colour", label.colour);
+    setValue("color", label.color);
     setValue("name", label.name);
     setIsUpdating(true);
     setLabelIdForUpdate(label.id);
   };
 
   const handleLabelUpdate: SubmitHandler<IIssueLabels> = async (formData) => {
-    if (!activeWorkspace || !activeProject || isSubmitting) return;
+    if (!activeWorkspace || !projectDetails || isSubmitting) return;
+
     await issuesService
-      .patchIssueLabel(activeWorkspace.slug, activeProject.id, labelIdForUpdate ?? "", formData)
+      .patchIssueLabel(activeWorkspace.slug, projectDetails.id, labelIdForUpdate ?? "", formData)
       .then((res) => {
         console.log(res);
         reset(defaultValues);
@@ -112,10 +120,10 @@ const LabelsSettings: NextPage<TLabelSettingsProps> = (props) => {
   };
 
   const handleLabelDelete = (labelId: string) => {
-    if (activeWorkspace && activeProject) {
+    if (activeWorkspace && projectDetails) {
       mutate((prevData) => prevData?.filter((p) => p.id !== labelId), false);
       issuesService
-        .deleteIssueLabel(activeWorkspace.slug, activeProject.id, labelId)
+        .deleteIssueLabel(activeWorkspace.slug, projectDetails.id, labelId)
         .then((res) => {
           console.log(res);
         })
@@ -126,14 +134,14 @@ const LabelsSettings: NextPage<TLabelSettingsProps> = (props) => {
   };
 
   return (
-    <SettingsLayout
-      type="project"
+    <AppLayout
+      settingsLayout="project"
       memberType={{ isMember, isOwner, isViewer, isGuest }}
       breadcrumbs={
         <Breadcrumbs>
           <BreadcrumbItem
-            title={`${activeProject?.name ?? "Project"}`}
-            link={`/${workspaceSlug}/projects/${activeProject?.id}/issues`}
+            title={`${projectDetails?.name ?? "Project"}`}
+            link={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}
           />
           <BreadcrumbItem title="Labels Settings" />
         </Breadcrumbs>
@@ -170,13 +178,13 @@ const LabelsSettings: NextPage<TLabelSettingsProps> = (props) => {
                         open ? "text-gray-900" : "text-gray-500"
                       }`}
                     >
-                      {watch("colour") && watch("colour") !== "" && (
+                      {watch("color") && watch("color") !== "" && (
                         <span
                           className="h-4 w-4 rounded"
                           style={{
-                            backgroundColor: watch("colour") ?? "green",
+                            backgroundColor: watch("color") ?? "green",
                           }}
-                         />
+                        />
                       )}
                     </Popover.Button>
 
@@ -191,7 +199,7 @@ const LabelsSettings: NextPage<TLabelSettingsProps> = (props) => {
                     >
                       <Popover.Panel className="absolute top-full left-0 z-20 mt-3 w-screen max-w-xs px-2 sm:px-0">
                         <Controller
-                          name="colour"
+                          name="color"
                           control={control}
                           render={({ field: { value, onChange } }) => (
                             <TwitterPicker
@@ -258,7 +266,7 @@ const LabelsSettings: NextPage<TLabelSettingsProps> = (props) => {
           </>
         </div>
       </section>
-    </SettingsLayout>
+    </AppLayout>
   );
 };
 

apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx

@@ -2,9 +2,8 @@ import { useState } from "react";
 
 import Image from "next/image";
 import { useRouter } from "next/router";
+
 import useSWR from "swr";
-import { PlusIcon } from "@heroicons/react/24/outline";
-import type { NextPage, NextPageContext } from "next";
 
 // services
 import projectService from "services/project.service";
@@ -13,10 +12,8 @@ import workspaceService from "services/workspace.service";
 import { requiredAdmin } from "lib/auth";
 // hooks
 import useToast from "hooks/use-toast";
-// constants
-import { ROLE } from "constants/";
 // layouts
-import SettingsLayout from "layouts/settings-layout";
+import AppLayout from "layouts/app-layout";
 // components
 import ConfirmProjectMemberRemove from "components/project/confirm-project-member-remove";
 import SendProjectInvitationModal from "components/project/send-project-invitation-modal";
@@ -24,6 +21,9 @@ import SendProjectInvitationModal from "components/project/send-project-invitati
 import { Button, CustomListbox, CustomMenu, Loader } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
+import { PlusIcon } from "@heroicons/react/24/outline";
+// types
+import type { NextPage, NextPageContext } from "next";
 // fetch-keys
 import {
   PROJECT_DETAILS,
@@ -31,6 +31,8 @@ import {
   PROJECT_MEMBERS,
   WORKSPACE_DETAILS,
 } from "constants/fetch-keys";
+// constants
+import { ROLE } from "constants/workspace";
 
 type TMemberSettingsProps = {
   isMember: boolean;
@@ -58,7 +60,7 @@ const MembersSettings: NextPage<TMemberSettingsProps> = (props) => {
     () => (workspaceSlug ? workspaceService.getWorkspace(workspaceSlug as string) : null)
   );
 
-  const { data: activeProject } = useSWR(
+  const { data: projectDetails } = useSWR(
     workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
     workspaceSlug && projectId
       ? () => projectService.getProject(workspaceSlug as string, projectId as string)
@@ -120,11 +122,11 @@ const MembersSettings: NextPage<TMemberSettingsProps> = (props) => {
           (item) => item.id === selectedRemoveMember || item.id === selectedInviteRemoveMember
         )}
         handleDelete={async () => {
-          if (!activeWorkspace || !activeProject) return;
+          if (!activeWorkspace || !projectDetails) return;
           if (selectedRemoveMember) {
             await projectService.deleteProjectMember(
               activeWorkspace.slug,
-              activeProject.id,
+              projectDetails.id,
               selectedRemoveMember
             );
             mutateMembers(
@@ -135,7 +137,7 @@ const MembersSettings: NextPage<TMemberSettingsProps> = (props) => {
           if (selectedInviteRemoveMember) {
             await projectService.deleteProjectInvitation(
               activeWorkspace.slug,
-              activeProject.id,
+              projectDetails.id,
               selectedInviteRemoveMember
             );
             mutateInvitations(
@@ -155,14 +157,14 @@ const MembersSettings: NextPage<TMemberSettingsProps> = (props) => {
         setIsOpen={setInviteModal}
         members={members}
       />
-      <SettingsLayout
-        type="project"
+      <AppLayout
+        settingsLayout="project"
         memberType={{ isMember, isOwner, isViewer, isGuest }}
         breadcrumbs={
           <Breadcrumbs>
             <BreadcrumbItem
-              title={`${activeProject?.name ?? "Project"}`}
-              link={`/${workspaceSlug}/projects/${activeProject?.id}/issues`}
+              title={`${projectDetails?.name ?? "Project"}`}
+              link={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}
             />
             <BreadcrumbItem title="Members Settings" />
           </Breadcrumbs>
@@ -235,11 +237,11 @@ const MembersSettings: NextPage<TMemberSettingsProps> = (props) => {
                               title={ROLE[member.role as keyof typeof ROLE] ?? "Select Role"}
                               value={member.role}
                               onChange={(value) => {
-                                if (!activeWorkspace || !activeProject) return;
+                                if (!activeWorkspace || !projectDetails) return;
                                 projectService
                                   .updateProjectMember(
                                     activeWorkspace.slug,
-                                    activeProject.id,
+                                    projectDetails.id,
                                     member.id,
                                     {
                                       role: value,
@@ -306,7 +308,7 @@ const MembersSettings: NextPage<TMemberSettingsProps> = (props) => {
             </div>
           )}
         </section>
-      </SettingsLayout>
+      </AppLayout>
     </>
   );
 };

apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx

@@ -11,7 +11,7 @@ import projectService from "services/project.service";
 // lib
 import { requiredAdmin } from "lib/auth";
 // layouts
-import SettingsLayout from "layouts/settings-layout";
+import AppLayout from "layouts/app-layout";
 // components
 import { CreateUpdateStateInline, DeleteStateModal, StateGroup } from "components/states";
 // ui
@@ -43,7 +43,7 @@ const StatesSettings: NextPage<TStateSettingsProps> = (props) => {
     query: { workspaceSlug, projectId },
   } = useRouter();
 
-  const { data: activeProject } = useSWR(
+  const { data: projectDetails } = useSWR(
     workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
     workspaceSlug && projectId
       ? () => projectService.getProject(workspaceSlug as string, projectId as string)
@@ -68,14 +68,14 @@ const StatesSettings: NextPage<TStateSettingsProps> = (props) => {
         data={states?.find((state) => state.id === selectDeleteState) ?? null}
         onClose={() => setSelectDeleteState(null)}
       />
-      <SettingsLayout
-        type="project"
+      <AppLayout
+        settingsLayout="project"
         memberType={{ isMember, isOwner, isViewer, isGuest }}
         breadcrumbs={
           <Breadcrumbs>
             <BreadcrumbItem
-              title={`${activeProject?.name ?? "Project"}`}
-              link={`/${workspaceSlug}/projects/${activeProject?.id}/issues`}
+              title={`${projectDetails?.name ?? "Project"}`}
+              link={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}
             />
             <BreadcrumbItem title="States Settings" />
           </Breadcrumbs>
@@ -87,7 +87,7 @@ const StatesSettings: NextPage<TStateSettingsProps> = (props) => {
             <p className="mt-4 text-sm text-gray-500">Manage the state of this project.</p>
           </div>
           <div className="flex flex-col justify-between gap-4">
-            {states && activeProject ? (
+            {states && projectDetails ? (
               Object.keys(groupedStates).map((key) => (
                 <div key={key}>
                   <div className="mb-2 flex w-full justify-between md:w-2/3">
@@ -104,7 +104,7 @@ const StatesSettings: NextPage<TStateSettingsProps> = (props) => {
                   <div className="space-y-1 rounded-xl border p-1 md:w-2/3">
                     {key === activeGroup && (
                       <CreateUpdateStateInline
-                        projectId={activeProject.id}
+                        projectId={projectDetails.id}
                         onClose={() => {
                           setActiveGroup(null);
                           setSelectedState(null);
@@ -143,7 +143,7 @@ const StatesSettings: NextPage<TStateSettingsProps> = (props) => {
                       ) : (
                         <div className="border-b last:border-b-0" key={state.id}>
                           <CreateUpdateStateInline
-                            projectId={activeProject.id}
+                            projectId={projectDetails.id}
                             onClose={() => {
                               setActiveGroup(null);
                               setSelectedState(null);
@@ -168,7 +168,7 @@ const StatesSettings: NextPage<TStateSettingsProps> = (props) => {
             )}
           </div>
         </div>
-      </SettingsLayout>
+      </AppLayout>
     </>
   );
 };