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
-
{children}
+
+ {children} +
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/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/common/Button/Button.interface.ts b/frontend/src/components/common/Button/Button.interface.ts index f043369d..387b8fe4 100644 --- a/frontend/src/components/common/Button/Button.interface.ts +++ b/frontend/src/components/common/Button/Button.interface.ts @@ -5,6 +5,7 @@ export interface ButtonProps extends ButtonHTMLAttributes { variant?: Variants; disabled?: boolean; className?: string; + type?: ButtonHTMLAttributes['type']; } export type StyleTypes = 'primary' | 'natural' | 'warning'; diff --git a/frontend/src/components/common/Button/Button.tsx b/frontend/src/components/common/Button/Button.tsx index a6a8f929..7108caed 100644 --- a/frontend/src/components/common/Button/Button.tsx +++ b/frontend/src/components/common/Button/Button.tsx @@ -12,20 +12,20 @@ const types: { border: 'bg-transparent text-blue-800 border border-blue-800 hover:bg-navy-100 active:text-blue-900 active:border-blue-900', borderless: 'px-2 bg-transparent text-blue-800 hover:bg-navy-100 active:text-blue-900', - link: 'px-0 bg-transparent text-blue-800 hover:underline hover:text-blue-900 active:text-blue-900 active:no-underline', + link: 'px-0 h-auto bg-transparent text-blue-800 hover:underline hover:text-blue-900 active:text-blue-900 active:no-underline', }, natural: { solid: 'bg-navy-600 text-white hover:bg-navy-700', border: 'bg-transparent text-navy-600 border border-navy-300 hover:bg-navy-100', borderless: 'px-2 bg-transparent text-navy-600 hover:bg-navy-50 active:bg-navy-100', - link: 'px-0 bg-transparent text-navy-600 hover:underline hover:text-navy-700 active:no-underline', + link: 'px-0 h-auto bg-transparent text-navy-600 hover:underline hover:text-navy-700 active:no-underline', }, warning: { solid: 'bg-red-600 text-white hover:bg-red-700', border: 'bg-transparent text-red-600 border border-red-600 hover:bg-navy-100 hover:text-red-700', borderless: 'px-2 bg-transparent text-red-600 hover:bg-navy-50 hover:border-[1.5px] hover:border-red-700 hover:text-red-700', - link: 'px-0 bg-transparent text-red-600 hover:underline hover:text-red-700 active:no-underline', + link: 'px-0 h-auto bg-transparent text-red-600 hover:underline hover:text-red-700 active:no-underline', }, }; @@ -39,6 +39,7 @@ const disabledStyles = { export const Button: FC = ({ styleType = 'primary', variant = 'solid', + type = 'button', disabled = false, className, children, @@ -54,7 +55,7 @@ export const Button: FC = ({ ); return ( - ); diff --git a/frontend/src/components/common/Combobox/Combobox.interface.ts b/frontend/src/components/common/Combobox/Combobox.interface.ts new file mode 100644 index 00000000..11437d81 --- /dev/null +++ b/frontend/src/components/common/Combobox/Combobox.interface.ts @@ -0,0 +1,13 @@ +import { ReactNode } from 'react'; + +export interface Option { + id: string; + name: string; +} + +export interface ComboboxProps { + label?: string; + options: Option[]; + name: string; + renderRightContent?: () => ReactNode; +} diff --git a/frontend/src/components/common/Combobox/Combobox.tsx b/frontend/src/components/common/Combobox/Combobox.tsx new file mode 100644 index 00000000..1e93dbe1 --- /dev/null +++ b/frontend/src/components/common/Combobox/Combobox.tsx @@ -0,0 +1,76 @@ +'use client'; + +import { ChevronRightIcon } from '@app/static/icons/ChevronRightIcon'; +import { + Combobox as HeadlessCombobox, + ComboboxButton, + ComboboxInput, + ComboboxOption, + ComboboxOptions, + Label, +} from '@headlessui/react'; +import { useMemo, useState } from 'react'; +import { ComboboxProps, Option } from './Combobox.interface'; +import { Controller, useFormContext } from 'react-hook-form'; + +export const Combobox: React.FC = ({ label, options, name, renderRightContent }) => { + const [query, setQuery] = useState(''); + const { control } = useFormContext(); + + const filteredOptions = useMemo( + () => + options + .sort((a, b) => a.name.toLocaleLowerCase().localeCompare(b.name.toLocaleLowerCase())) + .filter((option) => option.name.toLowerCase().includes(query.toLowerCase())), + [options, query], + ); + + return ( + ( + { + setQuery(''); + onChange(person); + }} + className="flex flex-1 flex-col gap-y-2" + > + {label && } +
+
+ setQuery(event.target.value)} + onBlur={() => setQuery('')} + displayValue={(item: Option) => item?.name} + /> + + + + {filteredOptions?.length > 0 && ( + + {filteredOptions.map((option) => ( + + {option.name} + + ))} + + )} +
+ {renderRightContent?.()} +
+ + )} + /> + ); +}; diff --git a/frontend/src/components/common/Combobox/index.ts b/frontend/src/components/common/Combobox/index.ts new file mode 100644 index 00000000..ea06979d --- /dev/null +++ b/frontend/src/components/common/Combobox/index.ts @@ -0,0 +1,3 @@ +export { Combobox } from './Combobox'; + +export type { Option } from './Combobox.interface'; diff --git a/frontend/src/components/modules/EmployeeSideStepper/EmployeeSideStepper.const.ts b/frontend/src/components/modules/EmployeeSideStepper/EmployeeSideStepper.const.ts index 5921c8a5..6a4d3e41 100644 --- a/frontend/src/components/modules/EmployeeSideStepper/EmployeeSideStepper.const.ts +++ b/frontend/src/components/modules/EmployeeSideStepper/EmployeeSideStepper.const.ts @@ -3,6 +3,6 @@ import { Step } from '../SideStepper'; import { AddNewPersonRouteKeys } from './EmployeeSideStepper.interface'; export const addEmployeeInitialSteps: Step[] = [ - { label: '1. Personal details', state: 'notStarted', current: true, href: routes.people.addNew.personalDetails }, - { label: '2. Main ladder', state: 'notStarted', current: false, href: routes.people.addNew.mainLadder }, + { label: '1. Personal details', state: 'notStarted', active: true, href: routes.people.addNew.personalDetails }, + { label: '2. Main ladder', state: 'notStarted', active: false, href: routes.people.addNew.mainLadder }, ]; diff --git a/frontend/src/components/modules/EmployeeSideStepper/EmployeeSideStepper.tsx b/frontend/src/components/modules/EmployeeSideStepper/EmployeeSideStepper.tsx index 4bbff74f..efa8be13 100644 --- a/frontend/src/components/modules/EmployeeSideStepper/EmployeeSideStepper.tsx +++ b/frontend/src/components/modules/EmployeeSideStepper/EmployeeSideStepper.tsx @@ -11,16 +11,18 @@ export const EmployeeSideStepper = () => { const pathname = usePathname(); const [addEmployeeSteps, setAddEmployeeSteps] = useState(addEmployeeInitialSteps); - // INFO: If current step is not 'completed', then set 'inProgress' state to the current path useEffect(() => { setAddEmployeeSteps((prevState) => prevState.map((step) => { + const active = pathname.endsWith(step.href); + // INFO: If current step is not 'completed', then set 'inProgress' state to the current path const state: StepStates = progress[step.href] !== 'completed' && pathname.endsWith(step.href) ? 'inProgress' : progress[step.href]; return { ...step, - state: state, + state, + active, }; }), ); diff --git a/frontend/src/components/modules/SideStepper/SideStepper.interface.ts b/frontend/src/components/modules/SideStepper/SideStepper.interface.ts index 3c856636..99eda4f6 100644 --- a/frontend/src/components/modules/SideStepper/SideStepper.interface.ts +++ b/frontend/src/components/modules/SideStepper/SideStepper.interface.ts @@ -3,7 +3,7 @@ export type StepStates = 'completed' | 'inProgress' | 'notStarted'; export interface Step { label: string; state: StepStates; - current: boolean; + active: boolean; href: T; } diff --git a/frontend/src/components/modules/SideStepper/SideStepper.tsx b/frontend/src/components/modules/SideStepper/SideStepper.tsx index 881b0ea4..da6ede53 100644 --- a/frontend/src/components/modules/SideStepper/SideStepper.tsx +++ b/frontend/src/components/modules/SideStepper/SideStepper.tsx @@ -1,32 +1,34 @@ import { generateClassNames } from '@app/utils'; -import { SideStepperProps, StepStates } from './SideStepper.interface'; +import { SideStepperProps } from './SideStepper.interface'; import { Fragment } from 'react'; import { Typography } from '@app/components/common/Typography'; -import { Completed, InProgress, NotStarted } from './SideStepper.utils'; - -const stepsMap: { [key in StepStates]: JSX.Element } = { - completed: , - inProgress: , - notStarted: , -}; +import { stepComponentsMap } from './SideStepper.utils'; +import { Button } from '@app/components/common/Button'; +import { useRouter } from 'next/navigation'; export const SideStepper = ({ steps }: SideStepperProps) => { + const router = useRouter(); return (
- {steps.map(({ label, state, current }, i) => { + {steps.map(({ label, state, active, href }, i) => { const last = i === steps.length - 1; return ( -
- {stepsMap[state]} +
+ {!last && (
diff --git a/frontend/src/components/modules/SideStepper/SideStepper.utils.tsx b/frontend/src/components/modules/SideStepper/SideStepper.utils.tsx index b5079fcf..1e6d7d3c 100644 --- a/frontend/src/components/modules/SideStepper/SideStepper.utils.tsx +++ b/frontend/src/components/modules/SideStepper/SideStepper.utils.tsx @@ -1,19 +1,26 @@ import { CheckMarkIcon } from '@app/static/icons/CheckMarkIcon'; +import { StepStates } from './SideStepper.interface'; -export const Completed = () => { +const Completed = () => { return (
); }; -export const InProgress = () => { +const InProgress = () => { return (
); }; -export const NotStarted = () => { +const NotStarted = () => { return
; }; + +export const stepComponentsMap: { [key in StepStates]: JSX.Element } = { + completed: , + inProgress: , + notStarted: , +}; diff --git a/frontend/src/components/modules/SideStepper/index.ts b/frontend/src/components/modules/SideStepper/index.ts index 34724540..3f65f2f0 100644 --- a/frontend/src/components/modules/SideStepper/index.ts +++ b/frontend/src/components/modules/SideStepper/index.ts @@ -1,2 +1,3 @@ export { SideStepper } from './SideStepper'; +export { stepComponentsMap } from './SideStepper.utils'; export type { SideStepperProps, Step, StepStates } from './SideStepper.interface'; 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 = ({ children }) => { + const form = useForm({ + mode: 'onChange', + defaultValues: { + [addEmployeeFormNames.firstName]: '', + [addEmployeeFormNames.lastName]: '', + [addEmployeeFormNames.email]: '', + [addEmployeeFormNames.ladder]: {}, + [addEmployeeFormNames.technology]: [], + }, + }); + return form={form}>{children}; +}; 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(); + 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 ( +
+
+
+
{formValid ? stepComponentsMap.completed : stepComponentsMap.inProgress}
+ 1. Select Ladder +
+ +
+ {open && ( +
+
+ } + /> + {values?.[addEmployeeFormNames.technology].map((tech, i) => { + return ( + + i !== 0 ? ( + + ) : ( + + ) + } + /> + ); + })} + {ladderSelected && ( + + )} +
+
+ +
+
+ )} +
+ ); +}; diff --git a/frontend/src/components/pages/addEmployee/MainLadder/MainLadder.utils.tsx b/frontend/src/components/pages/addEmployee/MainLadder/MainLadder.utils.tsx new file mode 100644 index 00000000..e61f0302 --- /dev/null +++ b/frontend/src/components/pages/addEmployee/MainLadder/MainLadder.utils.tsx @@ -0,0 +1,55 @@ +export const ladders = [ + { + name: 'Frontend', + id: 'frontend', + }, + { + name: 'Backend', + id: 'backend', + }, + { + name: 'Design', + id: 'design', + }, + { + name: 'QA', + id: 'qa', + }, + { + name: 'Project Manager', + id: 'project-manager', + }, + { + name: 'Dev Ops', + id: 'dev-ops', + }, +]; + +export const technologies = [ + { + name: 'Next.js', + id: 'next.js', + }, + { + name: 'React', + id: 'react', + }, + { + name: 'Python', + id: 'python', + }, + { + name: 'Django', + id: 'django', + }, + { + name: 'Typescript', + id: 'typescript', + }, + { + name: 'Docker', + id: 'docker', + }, +]; + +export const Spacer = () =>
; diff --git a/frontend/src/components/pages/addEmployee/MainLadder/index.ts b/frontend/src/components/pages/addEmployee/MainLadder/index.ts new file mode 100644 index 00000000..77d8ce3c --- /dev/null +++ b/frontend/src/components/pages/addEmployee/MainLadder/index.ts @@ -0,0 +1 @@ +export { MainLadder } from './MainLadder'; 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({ - mode: 'onChange', - defaultValues: { - [PersonalDetailsFormNames.firstName]: '', - [PersonalDetailsFormNames.lastName]: '', - [PersonalDetailsFormNames.email]: '', - }, - }); + const form = useFormContext(); 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 71% rename from frontend/src/components/pages/PersonalDetails/PersonalDetails.tsx rename to frontend/src/components/pages/addEmployee/PersonalDetails/PersonalDetails.tsx index 86aee9a4..7bf94d13 100644 --- a/frontend/src/components/pages/PersonalDetails/PersonalDetails.tsx +++ b/frontend/src/components/pages/addEmployee/PersonalDetails/PersonalDetails.tsx @@ -1,22 +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 ( - form={form}> + <> Personal details
{ }} /> { }} /> { />
-
- + ); }; 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 diff --git a/frontend/src/constants/routes.ts b/frontend/src/constants/routes.ts index 4f927cd9..95cb813d 100644 --- a/frontend/src/constants/routes.ts +++ b/frontend/src/constants/routes.ts @@ -12,8 +12,8 @@ export const routes = { index: '/people', myProfile: '/people/my-profile', addNew: { - personalDetails: 'people/add-new/personal-details', - mainLadder: 'people/add-new/main-ladder', + personalDetails: '/people/add-new/personal-details', + mainLadder: '/people/add-new/main-ladder', }, }, } as const; diff --git a/frontend/src/static/icons/ChevronUpIcon.tsx b/frontend/src/static/icons/ChevronUpIcon.tsx new file mode 100644 index 00000000..c2b7538d --- /dev/null +++ b/frontend/src/static/icons/ChevronUpIcon.tsx @@ -0,0 +1,11 @@ +export const ChevronUpIcon: React.FC> = (props) => ( + + + +);