From 641a0acae2d4e19cecd956d39bbb03ec53dea744 Mon Sep 17 00:00:00 2001
From: r1skz3ro <mikolaj.schatt@kellton.com>
Date: Mon, 15 Jul 2024 12:36:11 +0200
Subject: [PATCH] feat: refactor and id support

---
 .../people/add-new/layout.tsx                 |  5 +-
 .../add-new/main-ladder/[[...id]]/page.tsx    |  3 +
 .../personal-details/[[...id]]/page.tsx       |  3 +
 .../people/add-new/main-ladder/page.tsx       |  3 -
 .../people/add-new/personal-details/page.tsx  |  3 -
 .../modules/SideStepper/SideStepper.tsx       | 14 ++-
 .../pages/MainLadder/MainLadder.hooks.ts      | 38 --------
 .../pages/MainLadder/MainLadder.interface.ts  | 11 ---
 .../pages/MainLadder/MainLadder.tsx           | 88 -------------------
 .../PersonalDetails.interface.ts              | 11 ---
 .../AddEmployeeForm.interface.ts              | 17 ++++
 .../AddEmployeeForm.tsx                       | 19 ++++
 .../AddEmployeeFormProvider/index.ts          |  3 +
 .../MainLadder/MainLadder.hooks.ts            | 37 ++++++++
 .../addEmployee/MainLadder/MainLadder.tsx     | 86 ++++++++++++++++++
 .../MainLadder/MainLadder.utils.tsx           |  0
 .../{ => addEmployee}/MainLadder/index.ts     |  0
 .../PersonalDetails/PersonalDetails.hooks.ts  | 16 ++--
 .../PersonalDetails/PersonalDetails.tsx       | 17 ++--
 .../PersonalDetails/index.ts                  |  0
 20 files changed, 196 insertions(+), 178 deletions(-)
 rename frontend/src/app/(app)/{(peopleFlow) => (addEmployee)}/people/add-new/layout.tsx (68%)
 create mode 100644 frontend/src/app/(app)/(addEmployee)/people/add-new/main-ladder/[[...id]]/page.tsx
 create mode 100644 frontend/src/app/(app)/(addEmployee)/people/add-new/personal-details/[[...id]]/page.tsx
 delete mode 100644 frontend/src/app/(app)/(peopleFlow)/people/add-new/main-ladder/page.tsx
 delete mode 100644 frontend/src/app/(app)/(peopleFlow)/people/add-new/personal-details/page.tsx
 delete mode 100644 frontend/src/components/pages/MainLadder/MainLadder.hooks.ts
 delete mode 100644 frontend/src/components/pages/MainLadder/MainLadder.interface.ts
 delete mode 100644 frontend/src/components/pages/MainLadder/MainLadder.tsx
 delete mode 100644 frontend/src/components/pages/PersonalDetails/PersonalDetails.interface.ts
 create mode 100644 frontend/src/components/pages/addEmployee/AddEmployeeFormProvider/AddEmployeeForm.interface.ts
 create mode 100644 frontend/src/components/pages/addEmployee/AddEmployeeFormProvider/AddEmployeeForm.tsx
 create mode 100644 frontend/src/components/pages/addEmployee/AddEmployeeFormProvider/index.ts
 create mode 100644 frontend/src/components/pages/addEmployee/MainLadder/MainLadder.hooks.ts
 create mode 100644 frontend/src/components/pages/addEmployee/MainLadder/MainLadder.tsx
 rename frontend/src/components/pages/{ => addEmployee}/MainLadder/MainLadder.utils.tsx (100%)
 rename frontend/src/components/pages/{ => addEmployee}/MainLadder/index.ts (100%)
 rename frontend/src/components/pages/{ => addEmployee}/PersonalDetails/PersonalDetails.hooks.ts (64%)
 rename frontend/src/components/pages/{ => addEmployee}/PersonalDetails/PersonalDetails.tsx (78%)
 rename frontend/src/components/pages/{ => addEmployee}/PersonalDetails/index.ts (100%)

diff --git a/frontend/src/app/(app)/(peopleFlow)/people/add-new/layout.tsx b/frontend/src/app/(app)/(addEmployee)/people/add-new/layout.tsx
similarity index 68%
rename from frontend/src/app/(app)/(peopleFlow)/people/add-new/layout.tsx
rename to frontend/src/app/(app)/(addEmployee)/people/add-new/layout.tsx
index c51e4e58..189c8645 100644
--- a/frontend/src/app/(app)/(peopleFlow)/people/add-new/layout.tsx
+++ b/frontend/src/app/(app)/(addEmployee)/people/add-new/layout.tsx
@@ -1,5 +1,6 @@
 import { EmployeeSideStepper } from '@app/components/modules/EmployeeSideStepper';
 import { WorkflowTopbar } from '@app/components/modules/WorkflowTopbar';
+import { AddEmployeeFormProvider } from '@app/components/pages/addEmployee/AddEmployeeFormProvider';
 
 export default function PeopleLayout({ children }: Readonly<{ children: React.ReactNode }>) {
   return (
@@ -9,7 +10,9 @@ export default function PeopleLayout({ children }: Readonly<{ children: React.Re
         <main className="p-8">
           <div className="grid grid-cols-workflow">
             <EmployeeSideStepper />
-            <div className="col-span-1 px-8">{children}</div>
+            <div className="col-span-1 px-8">
+              <AddEmployeeFormProvider>{children}</AddEmployeeFormProvider>
+            </div>
           </div>
         </main>
       </div>
diff --git a/frontend/src/app/(app)/(addEmployee)/people/add-new/main-ladder/[[...id]]/page.tsx b/frontend/src/app/(app)/(addEmployee)/people/add-new/main-ladder/[[...id]]/page.tsx
new file mode 100644
index 00000000..36903561
--- /dev/null
+++ b/frontend/src/app/(app)/(addEmployee)/people/add-new/main-ladder/[[...id]]/page.tsx
@@ -0,0 +1,3 @@
+import { MainLadder } from '@app/components/pages/addEmployee/MainLadder';
+
+export default MainLadder;
diff --git a/frontend/src/app/(app)/(addEmployee)/people/add-new/personal-details/[[...id]]/page.tsx b/frontend/src/app/(app)/(addEmployee)/people/add-new/personal-details/[[...id]]/page.tsx
new file mode 100644
index 00000000..3953665e
--- /dev/null
+++ b/frontend/src/app/(app)/(addEmployee)/people/add-new/personal-details/[[...id]]/page.tsx
@@ -0,0 +1,3 @@
+import { PersonalDetails } from '@app/components/pages/addEmployee/PersonalDetails';
+
+export default PersonalDetails;
diff --git a/frontend/src/app/(app)/(peopleFlow)/people/add-new/main-ladder/page.tsx b/frontend/src/app/(app)/(peopleFlow)/people/add-new/main-ladder/page.tsx
deleted file mode 100644
index 0b96dbcd..00000000
--- a/frontend/src/app/(app)/(peopleFlow)/people/add-new/main-ladder/page.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-import { MainLadder } from '@app/components/pages/MainLadder';
-
-export default MainLadder;
diff --git a/frontend/src/app/(app)/(peopleFlow)/people/add-new/personal-details/page.tsx b/frontend/src/app/(app)/(peopleFlow)/people/add-new/personal-details/page.tsx
deleted file mode 100644
index 41475a48..00000000
--- a/frontend/src/app/(app)/(peopleFlow)/people/add-new/personal-details/page.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-import { PersonalDetails } from '@app/components/pages/PersonalDetails/PersonalDetails';
-
-export default PersonalDetails;
diff --git a/frontend/src/components/modules/SideStepper/SideStepper.tsx b/frontend/src/components/modules/SideStepper/SideStepper.tsx
index c0f446f7..da6ede53 100644
--- a/frontend/src/components/modules/SideStepper/SideStepper.tsx
+++ b/frontend/src/components/modules/SideStepper/SideStepper.tsx
@@ -3,16 +3,24 @@ import { SideStepperProps } from './SideStepper.interface';
 import { Fragment } from 'react';
 import { Typography } from '@app/components/common/Typography';
 import { stepComponentsMap } from './SideStepper.utils';
+import { Button } from '@app/components/common/Button';
+import { useRouter } from 'next/navigation';
 
 export const SideStepper = <T extends string>({ steps }: SideStepperProps<T>) => {
+  const router = useRouter();
   return (
     <div className="flex">
       <div className="flex flex-col">
-        {steps.map(({ label, state, active }, i) => {
+        {steps.map(({ label, state, active, href }, i) => {
           const last = i === steps.length - 1;
           return (
             <Fragment key={label}>
-              <div className="flex items-center gap-x-3">
+              <Button
+                className="flex items-center justify-start gap-x-3"
+                variant="link"
+                disabled={state === 'notStarted'}
+                onClick={() => router.push(href)}
+              >
                 {stepComponentsMap[state]}
                 <Typography
                   variant="body-m/semibold"
@@ -20,7 +28,7 @@ export const SideStepper = <T extends string>({ steps }: SideStepperProps<T>) =>
                 >
                   {label}
                 </Typography>
-              </div>
+              </Button>
               {!last && (
                 <div className="flex w-7 justify-center py-2">
                   <div className="flex h-[16px] w-[1.5px] border border-navy-300" />
diff --git a/frontend/src/components/pages/MainLadder/MainLadder.hooks.ts b/frontend/src/components/pages/MainLadder/MainLadder.hooks.ts
deleted file mode 100644
index 340720ed..00000000
--- a/frontend/src/components/pages/MainLadder/MainLadder.hooks.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { useFieldArray, useForm } from 'react-hook-form';
-import { MainLadderForm, MainLadderFormNames } from './MainLadder.interface';
-import { useEffect, useState } from 'react';
-
-export const useMainLadder = () => {
-  const form = useForm<MainLadderForm>({
-    mode: 'onChange',
-    defaultValues: {
-      [MainLadderFormNames.ladder]: {},
-      [MainLadderFormNames.technology]: [],
-    },
-  });
-
-  const technologyFields = useFieldArray({
-    name: MainLadderFormNames.technology,
-    control: form.control,
-  });
-
-  const [open, setOpen] = useState(true);
-  const [selectLadderValid, setSelectLadderValid] = useState(false);
-
-  const handleSubmit = form.handleSubmit((data) => console.log('data', data));
-  const values = form.watch();
-  const ladderSelected = values?.[MainLadderFormNames.ladder]?.name?.length > 0;
-
-  useEffect(() => {
-    const firstTechnology = values?.[MainLadderFormNames.technology]?.[0];
-    const technologySelected = firstTechnology && firstTechnology.name?.length > 0;
-
-    if (ladderSelected && technologySelected) {
-      setSelectLadderValid(true);
-    } else {
-      setSelectLadderValid(false);
-    }
-  }, [values, ladderSelected]);
-
-  return { form, handleSubmit, technologyFields, open, setOpen, ladderSelected, selectLadderValid };
-};
diff --git a/frontend/src/components/pages/MainLadder/MainLadder.interface.ts b/frontend/src/components/pages/MainLadder/MainLadder.interface.ts
deleted file mode 100644
index ef9640a7..00000000
--- a/frontend/src/components/pages/MainLadder/MainLadder.interface.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Option } from '@app/components/common/Combobox';
-
-export const MainLadderFormNames = {
-  ladder: 'ladder',
-  technology: 'technology',
-} as const;
-
-export interface MainLadderForm {
-  [MainLadderFormNames.ladder]: Option;
-  [MainLadderFormNames.technology]: Option[];
-}
diff --git a/frontend/src/components/pages/MainLadder/MainLadder.tsx b/frontend/src/components/pages/MainLadder/MainLadder.tsx
deleted file mode 100644
index f2514184..00000000
--- a/frontend/src/components/pages/MainLadder/MainLadder.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-'use client';
-import { Button } from '@app/components/common/Button';
-import { Combobox } from '@app/components/common/Combobox';
-import { FormProvider } from '@app/components/common/FormProvider';
-import { Typography } from '@app/components/common/Typography';
-import { stepComponentsMap } from '@app/components/modules/SideStepper';
-import { MainLadderForm, MainLadderFormNames } from './MainLadder.interface';
-import { useMainLadder } from './MainLadder.hooks';
-import { DeleteIcon } from '@app/static/icons/DeleteIcon';
-import { generateClassNames } from '@app/utils';
-import { ChevronUpIcon } from '@app/static/icons/ChevronUpIcon';
-import { Spacer, ladders, technologies } from './MainLadder.utils';
-
-export const MainLadder = () => {
-  const { form, technologyFields, open, setOpen, ladderSelected, selectLadderValid } = useMainLadder();
-  const values = form.watch();
-
-  return (
-    <FormProvider<MainLadderForm> form={form}>
-      <div className="flex flex-col gap-y-10 rounded-[20px] border-navy-200 bg-white p-8">
-        <div className="flex items-center justify-between">
-          <div className="flex items-center gap-x-4">
-            <div>{stepComponentsMap.inProgress}</div>
-            <Typography variant="head-s/medium">1. Select Ladder</Typography>
-          </div>
-          <Button
-            variant="link"
-            className={generateClassNames(`flex h-8 w-8 duration-150 ${open ? 'rotate-0' : 'rotate-180'} items-center`)}
-            onClick={() => setOpen((prev) => !prev)}
-          >
-            {<ChevronUpIcon className="text-navy-600" />}
-          </Button>
-        </div>
-        {open && (
-          <div className="flex flex-col gap-y-6">
-            <div className="flex w-1/2 flex-col gap-y-6">
-              <Combobox
-                label="Ladder"
-                options={ladders}
-                name={MainLadderFormNames.ladder}
-                renderRightContent={() => <Spacer />}
-              />
-              {values?.[MainLadderFormNames.technology].map((tech, i) => {
-                return (
-                  <Combobox
-                    label="Technology"
-                    key={`${tech.id}-${i}`}
-                    options={technologies}
-                    name={`${MainLadderFormNames.technology}.${i}`}
-                    renderRightContent={() =>
-                      i !== 0 ? (
-                        <Button
-                          variant="link"
-                          styleType="natural"
-                          className="flex h-8 w-8 items-center"
-                          onClick={() => technologyFields.remove(i)}
-                        >
-                          <DeleteIcon />
-                        </Button>
-                      ) : (
-                        <Spacer />
-                      )
-                    }
-                  />
-                );
-              })}
-              {ladderSelected && (
-                <Button
-                  styleType="primary"
-                  variant="link"
-                  className="w-fit"
-                  onClick={() => technologyFields.append({ id: '', name: '' })}
-                >
-                  + Technology
-                </Button>
-              )}
-            </div>
-            <div className="self-end">
-              <Button styleType="primary" variant="solid" disabled={!selectLadderValid}>
-                Confirm and continue
-              </Button>
-            </div>
-          </div>
-        )}
-      </div>
-    </FormProvider>
-  );
-};
diff --git a/frontend/src/components/pages/PersonalDetails/PersonalDetails.interface.ts b/frontend/src/components/pages/PersonalDetails/PersonalDetails.interface.ts
deleted file mode 100644
index 503ad06a..00000000
--- a/frontend/src/components/pages/PersonalDetails/PersonalDetails.interface.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export const PersonalDetailsFormNames = {
-  firstName: 'firstName',
-  lastName: 'lastName',
-  email: 'email',
-} as const;
-
-export interface PersonalDetailsForm {
-  [PersonalDetailsFormNames.firstName]: string;
-  [PersonalDetailsFormNames.lastName]: string;
-  [PersonalDetailsFormNames.email]: string;
-}
diff --git a/frontend/src/components/pages/addEmployee/AddEmployeeFormProvider/AddEmployeeForm.interface.ts b/frontend/src/components/pages/addEmployee/AddEmployeeFormProvider/AddEmployeeForm.interface.ts
new file mode 100644
index 00000000..7547ed39
--- /dev/null
+++ b/frontend/src/components/pages/addEmployee/AddEmployeeFormProvider/AddEmployeeForm.interface.ts
@@ -0,0 +1,17 @@
+import { Option } from '@app/components/common/Combobox';
+
+export const addEmployeeFormNames = {
+  firstName: 'firstName',
+  lastName: 'lastName',
+  email: 'email',
+  ladder: 'ladder',
+  technology: 'technology',
+} as const;
+
+export interface AddEmployeeForm {
+  [addEmployeeFormNames.firstName]: string;
+  [addEmployeeFormNames.lastName]: string;
+  [addEmployeeFormNames.email]: string;
+  [addEmployeeFormNames.ladder]: Option;
+  [addEmployeeFormNames.technology]: Option[];
+}
diff --git a/frontend/src/components/pages/addEmployee/AddEmployeeFormProvider/AddEmployeeForm.tsx b/frontend/src/components/pages/addEmployee/AddEmployeeFormProvider/AddEmployeeForm.tsx
new file mode 100644
index 00000000..8e654493
--- /dev/null
+++ b/frontend/src/components/pages/addEmployee/AddEmployeeFormProvider/AddEmployeeForm.tsx
@@ -0,0 +1,19 @@
+import { FC, PropsWithChildren } from 'react';
+import { useForm } from 'react-hook-form';
+
+import { FormProvider } from '@app/components/common/FormProvider';
+import { AddEmployeeForm, addEmployeeFormNames } from './AddEmployeeForm.interface';
+
+export const AddEmployeeFormProvider: FC<PropsWithChildren> = ({ children }) => {
+  const form = useForm<AddEmployeeForm>({
+    mode: 'onChange',
+    defaultValues: {
+      [addEmployeeFormNames.firstName]: '',
+      [addEmployeeFormNames.lastName]: '',
+      [addEmployeeFormNames.email]: '',
+      [addEmployeeFormNames.ladder]: {},
+      [addEmployeeFormNames.technology]: [],
+    },
+  });
+  return <FormProvider<AddEmployeeForm> form={form}>{children}</FormProvider>;
+};
diff --git a/frontend/src/components/pages/addEmployee/AddEmployeeFormProvider/index.ts b/frontend/src/components/pages/addEmployee/AddEmployeeFormProvider/index.ts
new file mode 100644
index 00000000..7f7db7f2
--- /dev/null
+++ b/frontend/src/components/pages/addEmployee/AddEmployeeFormProvider/index.ts
@@ -0,0 +1,3 @@
+export { AddEmployeeFormProvider } from './AddEmployeeForm';
+export type { AddEmployeeForm } from './AddEmployeeForm.interface';
+export { addEmployeeFormNames } from './AddEmployeeForm.interface';
diff --git a/frontend/src/components/pages/addEmployee/MainLadder/MainLadder.hooks.ts b/frontend/src/components/pages/addEmployee/MainLadder/MainLadder.hooks.ts
new file mode 100644
index 00000000..f22bbfcc
--- /dev/null
+++ b/frontend/src/components/pages/addEmployee/MainLadder/MainLadder.hooks.ts
@@ -0,0 +1,37 @@
+import { useFieldArray, useFormContext } from 'react-hook-form';
+import { useEffect, useState } from 'react';
+import { AddEmployeeForm, addEmployeeFormNames } from '../AddEmployeeFormProvider';
+import { usePeopleStore } from '@app/store/people';
+import { routes } from '@app/constants';
+
+export const useMainLadder = () => {
+  const form = useFormContext<AddEmployeeForm>();
+  const updateProgress = usePeopleStore((state) => state.updateProgress);
+
+  const technologyFields = useFieldArray({
+    name: addEmployeeFormNames.technology,
+    control: form.control,
+  });
+
+  const [open, setOpen] = useState(true);
+  const [formValid, setFormValid] = useState(false);
+
+  const handleSubmit = form.handleSubmit((data) => console.log('data', data));
+  const values = form.watch();
+  const ladderSelected = values?.[addEmployeeFormNames.ladder]?.name?.length > 0;
+  const firstTechnology = values?.[addEmployeeFormNames.technology]?.[0];
+
+  useEffect(() => {
+    const technologySelected = firstTechnology && firstTechnology.name?.length > 0;
+
+    setFormValid(ladderSelected && technologySelected);
+  }, [values, ladderSelected, firstTechnology]);
+
+  // INFO: update progress in sidebar stepper
+  useEffect(() => {
+    if (formValid) updateProgress({ [routes.people.addNew.mainLadder]: 'completed' });
+    else updateProgress({ [routes.people.addNew.mainLadder]: 'inProgress' });
+  }, [formValid, updateProgress]);
+
+  return { firstTechnology, form, handleSubmit, technologyFields, open, setOpen, ladderSelected, formValid };
+};
diff --git a/frontend/src/components/pages/addEmployee/MainLadder/MainLadder.tsx b/frontend/src/components/pages/addEmployee/MainLadder/MainLadder.tsx
new file mode 100644
index 00000000..0a9a662f
--- /dev/null
+++ b/frontend/src/components/pages/addEmployee/MainLadder/MainLadder.tsx
@@ -0,0 +1,86 @@
+'use client';
+import { Button } from '@app/components/common/Button';
+import { Combobox } from '@app/components/common/Combobox';
+import { Typography } from '@app/components/common/Typography';
+import { stepComponentsMap } from '@app/components/modules/SideStepper';
+import { useMainLadder } from './MainLadder.hooks';
+import { DeleteIcon } from '@app/static/icons/DeleteIcon';
+import { generateClassNames } from '@app/utils';
+import { ChevronUpIcon } from '@app/static/icons/ChevronUpIcon';
+import { Spacer, ladders, technologies } from './MainLadder.utils';
+import { addEmployeeFormNames } from '../AddEmployeeFormProvider';
+
+export const MainLadder = () => {
+  const { form, technologyFields, open, setOpen, ladderSelected, formValid, firstTechnology } = useMainLadder();
+  const values = form.watch();
+
+  return (
+    <div className="flex flex-col gap-y-10 rounded-[20px] border-navy-200 bg-white p-8">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-x-4">
+          <div>{formValid ? stepComponentsMap.completed : stepComponentsMap.inProgress}</div>
+          <Typography variant="head-s/medium">1. Select Ladder</Typography>
+        </div>
+        <Button
+          variant="link"
+          className={generateClassNames(`flex h-8 w-8 duration-150 ${open ? 'rotate-0' : 'rotate-180'} items-center`)}
+          onClick={() => setOpen((prev) => !prev)}
+        >
+          {<ChevronUpIcon className="text-navy-600" />}
+        </Button>
+      </div>
+      {open && (
+        <div className="flex flex-col gap-y-6">
+          <div className="flex w-1/2 flex-col gap-y-6">
+            <Combobox
+              label="Ladder"
+              options={ladders}
+              name={addEmployeeFormNames.ladder}
+              renderRightContent={() => <Spacer />}
+            />
+            {values?.[addEmployeeFormNames.technology].map((tech, i) => {
+              return (
+                <Combobox
+                  label="Technology"
+                  key={`${tech.id}-${i}`}
+                  options={technologies}
+                  name={`${addEmployeeFormNames.technology}.${i}`}
+                  renderRightContent={() =>
+                    i !== 0 ? (
+                      <Button
+                        variant="link"
+                        styleType="natural"
+                        className="flex h-8 w-8 items-center"
+                        onClick={() => technologyFields.remove(i)}
+                      >
+                        <DeleteIcon />
+                      </Button>
+                    ) : (
+                      <Spacer />
+                    )
+                  }
+                />
+              );
+            })}
+            {ladderSelected && (
+              <Button
+                styleType="primary"
+                variant="link"
+                className="w-fit"
+                onClick={() => technologyFields.append({ id: '', name: '' })}
+                disabled={firstTechnology && !firstTechnology.name}
+              >
+                + Technology
+              </Button>
+            )}
+          </div>
+          <div className="self-end">
+            <Button styleType="primary" variant="solid" disabled={!formValid}>
+              Confirm and continue
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/frontend/src/components/pages/MainLadder/MainLadder.utils.tsx b/frontend/src/components/pages/addEmployee/MainLadder/MainLadder.utils.tsx
similarity index 100%
rename from frontend/src/components/pages/MainLadder/MainLadder.utils.tsx
rename to frontend/src/components/pages/addEmployee/MainLadder/MainLadder.utils.tsx
diff --git a/frontend/src/components/pages/MainLadder/index.ts b/frontend/src/components/pages/addEmployee/MainLadder/index.ts
similarity index 100%
rename from frontend/src/components/pages/MainLadder/index.ts
rename to frontend/src/components/pages/addEmployee/MainLadder/index.ts
diff --git a/frontend/src/components/pages/PersonalDetails/PersonalDetails.hooks.ts b/frontend/src/components/pages/addEmployee/PersonalDetails/PersonalDetails.hooks.ts
similarity index 64%
rename from frontend/src/components/pages/PersonalDetails/PersonalDetails.hooks.ts
rename to frontend/src/components/pages/addEmployee/PersonalDetails/PersonalDetails.hooks.ts
index f7fcda6e..dc91569a 100644
--- a/frontend/src/components/pages/PersonalDetails/PersonalDetails.hooks.ts
+++ b/frontend/src/components/pages/addEmployee/PersonalDetails/PersonalDetails.hooks.ts
@@ -1,18 +1,12 @@
 import { routes } from '@app/constants';
 import { useEffect, useState } from 'react';
-import { useForm } from 'react-hook-form';
-import { PersonalDetailsForm, PersonalDetailsFormNames } from './PersonalDetails.interface';
+import { useFormContext } from 'react-hook-form';
+
 import { usePeopleStore } from '@app/store/people/store';
+import { AddEmployeeForm } from '../AddEmployeeFormProvider';
 
 export const usePersonalDetails = () => {
-  const form = useForm<PersonalDetailsForm>({
-    mode: 'onChange',
-    defaultValues: {
-      [PersonalDetailsFormNames.firstName]: '',
-      [PersonalDetailsFormNames.lastName]: '',
-      [PersonalDetailsFormNames.email]: '',
-    },
-  });
+  const form = useFormContext<AddEmployeeForm>();
   const { isDirty, isValid } = form.formState;
   const [formValid, setFormValid] = useState(false);
   const updateProgress = usePeopleStore((state) => state.updateProgress);
@@ -27,5 +21,5 @@ export const usePersonalDetails = () => {
     else updateProgress({ [routes.people.addNew.personalDetails]: 'inProgress' });
   }, [formValid, updateProgress]);
 
-  return { form, formValid };
+  return { formValid };
 };
diff --git a/frontend/src/components/pages/PersonalDetails/PersonalDetails.tsx b/frontend/src/components/pages/addEmployee/PersonalDetails/PersonalDetails.tsx
similarity index 78%
rename from frontend/src/components/pages/PersonalDetails/PersonalDetails.tsx
rename to frontend/src/components/pages/addEmployee/PersonalDetails/PersonalDetails.tsx
index dbbd85a6..7bf94d13 100644
--- a/frontend/src/components/pages/PersonalDetails/PersonalDetails.tsx
+++ b/frontend/src/components/pages/addEmployee/PersonalDetails/PersonalDetails.tsx
@@ -1,25 +1,24 @@
 'use client';
 import { Button } from '@app/components/common/Button';
-import { FormProvider } from '@app/components/common/FormProvider';
 import { Input } from '@app/components/common/Input';
 import { Typography } from '@app/components/common/Typography';
-import { PersonalDetailsForm, PersonalDetailsFormNames } from './PersonalDetails.interface';
 import { usePersonalDetails } from './PersonalDetails.hooks';
 import { routes } from '@app/constants';
 import { useRouter } from 'next/navigation';
+import { addEmployeeFormNames } from '../AddEmployeeFormProvider';
 
 export const PersonalDetails = () => {
-  const { form, formValid } = usePersonalDetails();
+  const { formValid } = usePersonalDetails();
   const router = useRouter();
 
   return (
-    <FormProvider<PersonalDetailsForm> form={form}>
+    <>
       <Typography variant="head-m/semibold" className="mb-6">
         Personal details
       </Typography>
       <div className="mb-6 grid w-full grid-cols-2 gap-x-8 gap-y-6 rounded-[20px] border border-navy-200 bg-white p-8">
         <Input
-          name={PersonalDetailsFormNames.firstName}
+          name={addEmployeeFormNames.firstName}
           label="First name"
           options={{
             minLength: { value: 2, message: 'First name must contain at least 2 characters' },
@@ -27,7 +26,7 @@ export const PersonalDetails = () => {
           }}
         />
         <Input
-          name={PersonalDetailsFormNames.lastName}
+          name={addEmployeeFormNames.lastName}
           label="Last name"
           options={{
             minLength: { value: 2, message: 'Last name must contain at least 2 characters' },
@@ -35,7 +34,7 @@ export const PersonalDetails = () => {
           }}
         />
         <Input
-          name={PersonalDetailsFormNames.email}
+          name={addEmployeeFormNames.email}
           label="Email"
           options={{
             pattern: { value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i, message: 'invalid email address' },
@@ -48,11 +47,11 @@ export const PersonalDetails = () => {
           styleType="primary"
           variant="border"
           onClick={() => router.push(routes.people.addNew.mainLadder)}
-          disabled={formValid}
+          disabled={!formValid}
         >
           Continue
         </Button>
       </div>
-    </FormProvider>
+    </>
   );
 };
diff --git a/frontend/src/components/pages/PersonalDetails/index.ts b/frontend/src/components/pages/addEmployee/PersonalDetails/index.ts
similarity index 100%
rename from frontend/src/components/pages/PersonalDetails/index.ts
rename to frontend/src/components/pages/addEmployee/PersonalDetails/index.ts