Tivix · skorekm · Jul 5, 2024 · Jun 28, 2024 · Jul 1, 2024 · Jul 2, 2024
diff --git a/frontend/.husky/pre-commit b/frontend/.husky/pre-commit
@@ -1,5 +1,7 @@
 # hooks start from the project root directory
+
 cd frontend
 
-yarn lint:fix && yarn format
+yarn lint:fix
+yarn format
 yarn compile
diff --git a/frontend/package.json b/frontend/package.json
@@ -15,15 +15,18 @@
   },
   "dependencies": {
     "@headlessui/react": "^2.0.4",
+    "@hookform/error-message": "^2.0.1",
     "clsx": "^2.1.0",
     "next": "14.1.3",
     "react": "^18",
     "react-dom": "^18",
+    "react-hook-form": "^7.52.0",
     "react-easy-crop": "^5.0.7",
     "react-markdown": "^9.0.1",
     "react-tooltip": "^5.26.3",
     "remark-gfm": "^4.0.0",
-    "tailwind-merge": "^2.2.2"
+    "tailwind-merge": "^2.2.2",
+    "zustand": "^4.5.4"
   },
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.13",

diff --git a/frontend/src/app/(app)/(peopleFlow)/people/add-new/layout.tsx b/frontend/src/app/(app)/(peopleFlow)/people/add-new/layout.tsx
@@ -0,0 +1,18 @@
+import { EmployeeSideStepper } from '@app/components/modules/EmployeeSideStepper';
+import { WorkflowTopbar } from '@app/components/modules/WorkflowTopbar';
+
+export default function PeopleLayout({ children }: Readonly<{ children: React.ReactNode }>) {
+  return (
+    <div className="flex">
+      <div className="w-full">
+        <WorkflowTopbar />
+        <main className="p-8">
+          <div className="grid grid-cols-workflow">
+            <EmployeeSideStepper />
+            <div className="col-span-1 px-8">{children}</div>
+          </div>
+        </main>
+      </div>
+    </div>
+  );
+}
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
@@ -0,0 +1,3 @@
+import { PersonalDetails } from '@app/components/pages/PersonalDetails/PersonalDetails';
+
+export default PersonalDetails;
diff --git a/...tend/src/app/(app)/documentation/page.tsx → ...c/app/(app)/(root)/documentation/page.tsx b/...tend/src/app/(app)/documentation/page.tsx → ...c/app/(app)/(root)/documentation/page.tsx
diff --git a/frontend/src/app/(app)/(root)/layout.tsx b/frontend/src/app/(app)/(root)/layout.tsx
@@ -0,0 +1,14 @@
+import { Sidebar } from '@app/components/modules/Sidebar';
+import { Topbar } from '@app/components/modules/Topbar';
+
+export default function AppLayout({ children }: Readonly<{ children: React.ReactNode }>) {
+  return (
+    <div className="flex">
+      <Sidebar />
+      <div className="w-full">
+        <Topbar />
+        <main className="p-8">{children}</main>
+      </div>
+    </div>
+  );
+}
diff --git a/.../(app)/library/[ladder]/[bucket]/page.tsx → ...(root)/library/[ladder]/[bucket]/page.tsx b/.../(app)/library/[ladder]/[bucket]/page.tsx → ...(root)/library/[ladder]/[bucket]/page.tsx
diff --git a/...d/src/app/(app)/library/[ladder]/page.tsx → ...pp/(app)/(root)/library/[ladder]/page.tsx b/...d/src/app/(app)/library/[ladder]/page.tsx → ...pp/(app)/(root)/library/[ladder]/page.tsx
diff --git a/frontend/src/app/(app)/library/page.tsx → ...end/src/app/(app)/(root)/library/page.tsx b/frontend/src/app/(app)/library/page.tsx → ...end/src/app/(app)/(root)/library/page.tsx
diff --git a/frontend/src/app/(app)/my-space/page.tsx → ...nd/src/app/(app)/(root)/my-space/page.tsx b/frontend/src/app/(app)/my-space/page.tsx → ...nd/src/app/(app)/(root)/my-space/page.tsx
diff --git a/frontend/src/app/(app)/page.tsx → frontend/src/app/(app)/(root)/page.tsx b/frontend/src/app/(app)/page.tsx → frontend/src/app/(app)/(root)/page.tsx
diff --git a/.../src/app/(app)/people/my-profile/page.tsx → ...p/(app)/(root)/people/my-profile/page.tsx b/.../src/app/(app)/people/my-profile/page.tsx → ...p/(app)/(root)/people/my-profile/page.tsx
diff --git a/frontend/src/app/(app)/(root)/people/page.tsx b/frontend/src/app/(app)/(root)/people/page.tsx
@@ -0,0 +1,16 @@
+import { Button } from '@app/components/common/Button';
+import { routes } from '@app/constants';
+import Link from 'next/link';
+
+export default function People() {
+  return (
+    <div>
+      <div className="mb-6 flex items-center justify-between">
+        <h1 className="text-lg font-semibold leading-6 text-navy-900">People</h1>
+        <Button>
+          <Link href={routes.people.addNew.personalDetails}>+ Employee</Link>
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/app/(app)/layout.tsx b/frontend/src/app/(app)/layout.tsx
diff --git a/frontend/src/app/(app)/people/page.tsx b/frontend/src/app/(app)/people/page.tsx
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
@@ -0,0 +1,19 @@
+import type { Metadata } from 'next';
+import { Inter } from 'next/font/google';
+
+import './globals.css';
+
+const inter = Inter({ subsets: ['latin'] });
+
+export const metadata: Metadata = {
+  title: 'CPF - Career Progression Framework',
+  description: 'Career Progression Framework Application',
+};
+
+export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
+  return (
+    <html lang="en">
+      <body className={`${inter.className} h-full bg-navy-50`}>{children}</body>
+    </html>
+  );
+}
diff --git a/frontend/src/components/common/Button/Button.interface.ts b/frontend/src/components/common/Button/Button.interface.ts
@@ -1,11 +1,10 @@
-import { ButtonHTMLAttributes, ReactNode } from 'react';
+import { ButtonHTMLAttributes } from 'react';
 
-export interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   styleType?: StyleTypes;
   variant?: Variants;
   disabled?: boolean;
   className?: string;
-  children: ReactNode;
 }
 
 export type StyleTypes = 'primary' | 'natural' | 'warning';

diff --git a/frontend/src/components/common/Button/Button.tsx b/frontend/src/components/common/Button/Button.tsx
@@ -1,6 +1,6 @@
 import { generateClassNames } from '@app/utils';
-import React from 'react';
-import { Props, StyleTypes, Variants } from './Button.interface';
+import React, { FC } from 'react';
+import { ButtonProps, StyleTypes, Variants } from './Button.interface';
 
 const types: {
   [key in StyleTypes]: {
@@ -10,38 +10,45 @@ const types: {
   primary: {
     solid: 'bg-blue-600 text-white hover:bg-blue-900',
     border:
-      'bg-white text-blue-800 border border-blue-800 hover:bg-navy-100 active:bg-white active:text-blue-900 active:border-blue-900',
-    borderless: 'px-2 bg-transparent text-blue-800 hover:bg-navy-100 active:bg-white active:text-blue-900',
+      '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',
   },
   natural: {
     solid: 'bg-navy-600 text-white hover:bg-navy-700',
-    border: 'bg-white text-navy-600 border border-navy-300 hover:bg-navy-100',
+    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',
   },
   warning: {
     solid: 'bg-red-600 text-white hover:bg-red-700',
-    border: 'bg-white text-red-600 border border-red-600 hover:bg-navy-100 hover:text-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',
   },
 };
 
-export const Button = ({
+const disabledStyles = {
+  solid: 'bg-navy-200',
+  border: 'bg-transparent border-navy-200 border',
+  borderless: 'px-2 border-none',
+  link: 'px-0 border-none',
+};
+
+export const Button: FC<ButtonProps> = ({
   styleType = 'primary',
   variant = 'solid',
   disabled = false,
   className,
   children,
   ...props
-}: Props) => {
+}) => {
   const buttonClass = generateClassNames(
     'h-11 px-5 items-center justify-center rounded-full transition duration-200',
     {
       [types[styleType][variant]]: !disabled,
-      'bg-navy-200 border-navy-200 text-navy-300 cursor-not-allowed': disabled,
+      [`text-navy-300 cursor-not-allowed ${disabledStyles[variant]}`]: disabled,
     },
     className,
   );

diff --git a/frontend/src/components/common/Button/index.ts b/frontend/src/components/common/Button/index.ts
@@ -1,2 +1 @@
 export { Button } from './Button';
-export type { StyleTypes, Variants, Props } from './Button.interface';
diff --git a/frontend/src/components/common/FormProvider/FormProvider.tsx b/frontend/src/components/common/FormProvider/FormProvider.tsx
@@ -0,0 +1,15 @@
+import { PropsWithChildren } from 'react';
+import { FieldValues, FormProvider as RHFFormProvider, UseFormReturn } from 'react-hook-form';
+
+interface Props<T extends FieldValues> extends PropsWithChildren {
+  form: UseFormReturn<T>;
+  onSubmit?: (values: T) => void;
+}
+
+export const FormProvider = <T extends FieldValues>({ form, onSubmit, children }: Props<T>) => {
+  return (
+    <RHFFormProvider {...form}>
+      <form {...(onSubmit && { onSubmit: form.handleSubmit(onSubmit) })}>{children}</form>
+    </RHFFormProvider>
+  );
+};
diff --git a/frontend/src/components/common/FormProvider/index.ts b/frontend/src/components/common/FormProvider/index.ts
@@ -0,0 +1 @@
+export { FormProvider } from './FormProvider';
diff --git a/frontend/src/components/common/Input/Input.interface.ts b/frontend/src/components/common/Input/Input.interface.ts
@@ -0,0 +1,8 @@
+import { FieldValues, RegisterOptions } from 'react-hook-form';
+
+export interface InputProps {
+  label?: string;
+  placeholder?: string;
+  name: string;
+  options?: RegisterOptions<FieldValues, string>;
+}
diff --git a/frontend/src/components/common/Input/Input.tsx b/frontend/src/components/common/Input/Input.tsx
@@ -0,0 +1,43 @@
+import { FC, memo } from 'react';
+import { InputProps } from './Input.interface';
+import { useFormContext } from 'react-hook-form';
+import { generateClassNames } from '@app/utils';
+import { ErrorMessage } from '@hookform/error-message';
+import { CheckMarkIcon } from '@app/static/icons/AlertTriangleIcon';
+
+export const Input: FC<InputProps> = memo(({ label, name, placeholder, options = {}, ...otherProps }) => {
+  const { formState, register, getFieldState } = useFormContext();
+  const error = getFieldState(name).error;
+
+  return (
+    <div className="flex flex-col gap-y-3">
+      {label && (
+        <label className="text-navy-900" htmlFor={`input-${name}`}>
+          {label}
+        </label>
+      )}
+      <input
+        className={generateClassNames(
+          'outline-black h-12 w-full rounded-xl border border-navy-200 px-4 outline-none focus:border-navy-700',
+          { 'border-red-600 focus:border-red-600': !!error },
+        )}
+        placeholder={placeholder}
+        id={`input-${name}`}
+        {...register(name, options)}
+        {...otherProps}
+      />
+      <ErrorMessage
+        errors={formState.errors}
+        name={name}
+        render={({ message }) => (
+          <div className="flex items-center gap-x-2">
+            <CheckMarkIcon />
+            <div className="text-sm text-red-600 first-letter:uppercase">{message}</div>
+          </div>
+        )}
+      />
+    </div>
+  );
+});
+
+Input.displayName = 'Input';
diff --git a/frontend/src/components/common/Input/index.ts b/frontend/src/components/common/Input/index.ts
@@ -0,0 +1,2 @@
+export { Input } from './Input';
+export type { InputProps } from './Input.interface';
diff --git a/frontend/src/components/common/Typography/Typography.tsx b/frontend/src/components/common/Typography/Typography.tsx
@@ -64,7 +64,7 @@ export const Typography = ({
     case 'h5':
       return <h5 className={classnames}>{children}</h5>;
     case 'h6':
-      return <p className={classnames}>{children}</p>;
+      return <h6 className={classnames}>{children}</h6>;
     case 'p':
     default:
       return <p className={classnames}>{children}</p>;

diff --git a/frontend/src/components/modules/EmployeeSideStepper/EmployeeSideStepper.const.ts b/frontend/src/components/modules/EmployeeSideStepper/EmployeeSideStepper.const.ts
@@ -0,0 +1,8 @@
+import { routes } from '@app/constants';
+import { Step } from '../SideStepper';
+import { AddNewPersonRouteKeys } from './EmployeeSideStepper.interface';
+
+export const addEmployeeInitialSteps: Step<AddNewPersonRouteKeys>[] = [
+  { 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 },
+];
diff --git a/frontend/src/components/modules/EmployeeSideStepper/EmployeeSideStepper.interface.tsx b/frontend/src/components/modules/EmployeeSideStepper/EmployeeSideStepper.interface.tsx
@@ -0,0 +1,4 @@
+import { routes } from '@app/constants';
+
+type AddNewPersonRoutes = typeof routes.people.addNew;
+export type AddNewPersonRouteKeys = AddNewPersonRoutes[keyof AddNewPersonRoutes];
diff --git a/frontend/src/components/modules/EmployeeSideStepper/EmployeeSideStepper.tsx b/frontend/src/components/modules/EmployeeSideStepper/EmployeeSideStepper.tsx
@@ -0,0 +1,30 @@
+'use client';
+import { SideStepper, StepStates } from '../SideStepper';
+import { useEffect, useState } from 'react';
+import { usePathname } from 'next/navigation';
+import { AddNewPersonRouteKeys } from './EmployeeSideStepper.interface';
+import { addEmployeeInitialSteps } from './EmployeeSideStepper.const';
+import { usePeopleStore } from '@app/store/people/store';
+
+export const EmployeeSideStepper = () => {
+  const progress = usePeopleStore((state) => state.progress);
+  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 state: StepStates =
+          progress[step.href] !== 'completed' && pathname.endsWith(step.href) ? 'inProgress' : progress[step.href];
+
+        return {
+          ...step,
+          state: state,
+        };
+      }),
+    );
+  }, [pathname, progress]);
+
+  return <SideStepper<AddNewPersonRouteKeys> steps={addEmployeeSteps} />;
+};
diff --git a/frontend/src/components/modules/EmployeeSideStepper/index.ts b/frontend/src/components/modules/EmployeeSideStepper/index.ts
@@ -0,0 +1,2 @@
+export { EmployeeSideStepper } from './EmployeeSideStepper';
+export type { AddNewPersonRouteKeys } from './EmployeeSideStepper.interface';
diff --git a/frontend/src/components/modules/SideStepper/SideStepper.interface.ts b/frontend/src/components/modules/SideStepper/SideStepper.interface.ts
@@ -0,0 +1,12 @@
+export type StepStates = 'completed' | 'inProgress' | 'notStarted';
+
+export interface Step<T> {
+  label: string;
+  state: StepStates;
+  current: boolean;
+  href: T;
+}
+
+export interface SideStepperProps<T> {
+  steps: Step<T>[];
+}