.createAndManage {
    position: absolute;
    top: 36px;
    left: 0px;
    line-height: 16px;
}
.employees {
    position: relative;
    line-height: 28px;
}
.iconQuestionCircle {
    width: 20px;
    position: relative;
    height: 20px;
}
.employeesParent {
    position: absolute;
    top: 0px;
    left: 0px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    font-size: 24px;
}
.title {
    position: absolute;
    top: 112px;
    left: 40px;
    width: 305px;
    height: 52px;
}
.inputFields {
    width: 278px;
    height: 38px;
    display: none;
}
.elementCheckboxCheckedChild {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0%;
    right: 0%;
    bottom: 0%;
    left: 0%;
    background-color: #fff;
    border: 1px solid #4d7080;
    box-sizing: border-box;
}
.boundingBox {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0%;
    right: 0%;
    bottom: 0%;
    left: 0%;
    background-color: #c7384f;
    opacity: 0;
}
.tick {
    position: absolute;
    height: 75%;
    width: 75%;
    top: 12.5%;
    right: 12.5%;
    bottom: 12.5%;
    left: 12.5%;
}
.elementCheckboxChecked {
    position: absolute;
    top: 3px;
    left: 0px;
    width: 16px;
    height: 16px;
}
.labelForCheckbox {
    position: absolute;
    top: calc(50% - 8.5px);
    left: 24px;
}
.checked {
    width: 123px;
    position: relative;
    height: 21px;
}
.checkedWrapper {
    width: 158px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 8px 35px;
    box-sizing: border-box;
}
.selectArea {
    background-color: #e6ebed;
    height: 48px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 8px 8px 8px 2px;
    box-sizing: border-box;
}
.envelopeIcon {
    width: 16px;
    position: relative;
    height: 16px;
    object-fit: cover;
}
.buttonTitle {
    position: relative;
}
.fbutton {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 6px 16px;
    gap: 8px;
}
.fbutton2 {
    width: 155px;
    height: 32px;
    display: none;
}
.fbutton3 {
    width: 119px;
    height: 32px;
    display: none;
}
.moreActions {
    width: 139px;
    height: 32px;
    display: none;
}
.fbuttonBarSimple {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}
.actionsArea {
    flex: 1;
    background-color: #e6ebed;
    height: 48px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0px 8px;
    box-sizing: border-box;
    text-align: center;
}
.cancelButton {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 6px 0px;
    gap: 8px;
}
.cancelArea {
    width: 175px;
    background-color: #e6ebed;
    height: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    box-sizing: border-box;
    text-align: right;
}
.bulkActionsLightVersion {
    position: absolute;
    width: 87.56%;
    top: calc(50% - 584px);
    right: 6.19%;
    left: 6.25%;
    filter: drop-shadow(0px 5px 5px rgba(0, 20, 29, 0.2)) drop-shadow(0px 10px 10px rgba(0, 20, 29, 0.1));
    border: 1px solid #ccd6db;
    box-sizing: border-box;
    display: none;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    color: rgba(0, 0, 0, 0.65);
}
.globalBarBackground {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0%;
    right: 0%;
    bottom: 0%;
    left: 0%;
    background-color: #000;
}
.iconPerson {
    width: 14px;
    position: relative;
    height: 14px;
}
.iconCaretDown {
    width: 7.1px;
    position: relative;
    border-radius: 1px;
    height: 4.5px;
}
.iconPersonParent {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    padding: 0px 16px 0px 0px;
    gap: 7px;
}
.cannyCakes {
    position: relative;
    font-weight: 500;
}
.companyName {
    height: 40px;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 12px 16px;
    box-sizing: border-box;
}
.rightControls {
    position: absolute;
    height: 100%;
    top: 0%;
    right: 40px;
    bottom: 0%;
    width: 450px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
}
.rectangle {
    position: absolute;
    top: calc(50% - 12px);
    left: 96px;
    background-color: #333;
    width: 1px;
    height: 24px;
}
.accounting {
    position: relative;
    line-height: 21px;
    font-weight: 500;
}
.triangleIcon {
    width: 8px;
    position: relative;
    height: 5px;
}
.carat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 4px 0px 0px;
}
.productSwitcher {
    position: absolute;
    top: calc(50% - 12px);
    left: 113px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    text-align: left;
}
.vectorIcon {
    position: absolute;
    top: calc(50% - 12px);
    left: 40px;
    width: 40px;
    height: 24px;
}
.header {
    align-self: stretch;
    position: relative;
    height: 40px;
}
.navChildItems {
    background-color: #fff;
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0px 16px;
    box-sizing: border-box;
}
.navChildItems2 {
    background-color: #f2f5f6;
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0px 16px;
    box-sizing: border-box;
}
.caretDownIcon {
    position: absolute;
    height: 31.67%;
    width: 50%;
    top: 37.5%;
    right: 25%;
    bottom: 30.83%;
    left: 25%;
    max-width: 100%;
    overflow: hidden;
    max-height: 100%;
}
.caretDown {
    width: 12px;
    position: relative;
    height: 12px;
}
.carat1 {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 2px 0px 0px;
}
.navChildItems5 {
    background-color: #fff;
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0px 16px;
    box-sizing: border-box;
    gap: 4px;
}
.navigation {
    align-self: stretch;
    box-shadow: 0px 1px 0px #d9e0e4;
    background-color: #fff;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 0px 40px;
    text-align: left;
    color: rgba(0, 0, 0, 0.9);
}
.headerParent {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 1600px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: right;
    color: #fff;
}
.screenshot20220412At1629 {
    position: absolute;
    top: 191px;
    left: 18px;
    width: 1346px;
    height: 1086px;
}
.employeeRecordAnalysisTypChild {
    position: absolute;
    top: 1226px;
    left: 18px;
    background-color: #f2f5f6;
    width: 1342px;
    height: 67px;
}
.label {
    position: relative;
    line-height: 150%;
    font-weight: 500;
}
.majorButton {
    background-color: #007e45;
    border: 2px solid rgba(0, 0, 0, 0);
    box-sizing: border-box;
    height: 32px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
}
.majorButton1 {
    border: 2px solid #007e45;
    box-sizing: border-box;
    height: 32px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    color: #007e45;
}
.majorButtonParent {
    position: absolute;
    top: 636px;
    left: 1413px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 8px;
    color: #fff;
}
.majorButton2 {
    position: absolute;
    top: 135px;
    left: 1501px;
    border: 2px solid #007e45;
    box-sizing: border-box;
    width: 78px;
    height: 32px;
    display: none;
}
.employeeRecordAnalysisTypItem {
    position: absolute;
    top: 178px;
    left: 35px;
    background-color: #f2f5f6;
    width: 1342px;
    height: 67px;
}
.spacinglR {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 8px 16px;
}
.selectbarindicator {
    align-self: stretch;
    position: relative;
    background-color: #e6ebed;
    height: 2px;
}
.assetssinglehorizontalTab {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.selectbarindicator1 {
    align-self: stretch;
    position: relative;
    background-color: #007e45;
    height: 2px;
}
.assetssinglehorizontalTab1 {
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.assetssinglehorizontalTab6 {
    width: 56px;
    height: 40px;
    display: none;
}
.spacinglR6 {
    width: 76px;
    flex: 1;
}
.doNotSwaphorizlinetab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.tabsHorizontal {
    position: absolute;
    top: 196px;
    left: 42px;
    width: 1518px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
}
.employeeRecordAnalysisTypInner {
    position: absolute;
    top: 260px;
    left: 40px;
    background-color: #fff;
    border: 1px solid #d9e0e4;
    box-sizing: border-box;
    width: 1520px;
    height: 360px;
}
.analysisTypes {
    position: relative;
    font-size: 16px;
    line-height: 150%;
    font-weight: 500;
    color: #000;
}
.department {
    position: relative;
    line-height: 16px;
    font-weight: 500;
}
.basevalidationbar {
    align-self: stretch;
    width: 2px;
}
.selectedOption {
    position: relative;
    line-height: 150%;
}
.input1 {
    flex: 1;
    height: 21px;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
}
.px {
    align-self: stretch;
    width: 8px;
}
.caretLargeDown {
    width: 16px;
    position: relative;
    height: 16px;
}
.icon {
    width: 32px;
    height: 32px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    padding: 0px 8px 0px 0px;
    box-sizing: border-box;
}
.containermain {
    align-self: stretch;
    width: 202px;
    background-color: #fff;
    border: 1px solid #668494;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 0px 0px 0px 8px;
}
.containerfocus {
    align-self: stretch;
    flex: 1;
    border: 3px solid #ffb500;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
}
.inputboxbase {
    align-self: stretch;
    height: 32px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
}
.wrap {
    position: absolute;
    width: calc(100% + 10px);
    top: 0px;
    right: 0px;
    left: -10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.input {
    align-self: stretch;
    position: relative;
    height: 61px;
}
.wrapfordropdowntrigger {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.selectDropdown {
    width: 202px;
    height: 32px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.departmentParent {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 71px;
}
.containermain1 {
    align-self: stretch;
    flex: 1;
    background-color: #fff;
    border: 1px solid #668494;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 0px 0px 0px 8px;
}
.containerfocus1 {
    align-self: stretch;
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
}
.costCentreParent {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 73px;
}
.project {
    width: 77px;
    position: relative;
    line-height: 16px;
    font-weight: 500;
    display: inline-block;
    flex-shrink: 0;
}
.companyCar {
    width: 89px;
    position: relative;
    line-height: 16px;
    font-weight: 500;
    display: inline-block;
    flex-shrink: 0;
}
.companyCarParent {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 61px;
}
.contractBasis {
    width: 98px;
    position: relative;
    line-height: 16px;
    font-weight: 500;
    display: inline-block;
    flex-shrink: 0;
}
.contractBasisParent {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 52px;
}
.analysisTypesParent {
    position: absolute;
    top: 284px;
    left: 64px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 16px;
}
.textwrap {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
}
.px6 {
    width: 8px;
    height: 24px;
}
.optionbasealignlefts {
    flex: 1;
    background-color: #fff;
    height: 32px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 0px 0px 0px 8px;
    box-sizing: border-box;
}
.optionlefts {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
}
.dividerIcon {
    align-self: stretch;
    flex: 1;
    position: relative;
    max-width: 100%;
    overflow: hidden;
    max-height: 100%;
}
.groupdivider {
    width: 147px;
    display: none;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 8px;
    box-sizing: border-box;
}
.optionlefts5 {
    width: 147px;
    height: 32px;
    display: none;
}
.dropdownList {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 8px 0px;
}
.referenceIconPlaceholder {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    padding: 2.5px 0px 0px;
}
.linkWithReficon {
    position: relative;
    text-decoration: underline;
    line-height: 150%;
}
.baselink {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.link {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
}
.optionlink {
    align-self: stretch;
    height: 48px;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 8px;
    box-sizing: border-box;
}
.linkOptional {
    align-self: stretch;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    color: #008146;
}
.dropdownCard {
    position: absolute;
    top: 358px;
    left: 214px;
    box-shadow: 0px 10px 10px rgba(0, 20, 29, 0.1);
    background-color: #fff;
    width: 202px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.employeeRecordAnalysisTyp {
    width: 100%;
    position: relative;
    background-color: #f2f5f6;
    height: 1000px;
    overflow: hidden;
    text-align: left;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.9);
    font-family: 'Sage UI';
}

import { FunctionComponent } from 'react';
import styles from './EmployeeRecordAnalysisTyp.module.css';

const EmployeeRecordAnalysisTyp:FunctionComponent = () => {
  	return (

Review and edit the employee’s details.

          					Employee: Marina Miller

Select 25 items

Invite to Online Payslips

Add Payslip Message

Exit bulk actions

Canny Cakes

Help

Payroll

Summary

Pay Runs

Employees

Pensions

Year End

Reporting

Settings

Save

Cancel

Employee Details

Analysis Types

Working Pattern

Pay Document Preferences

Workplace Pensions

GDPR Personal Data

Analysis Types

Department

005 - Sales

Cost Centre

CC001

Project

Bakery Refit

Region

North East

Company Car

No

Contract Basis

Permanent

001 - Design

002 - Development

003 - Executive Team

004 - HR

005 - Sales

None

Add new option

);
};

export default EmployeeRecordAnalysisTyp;

@import url('https://fonts.googleapis.com/css2?family=Sage+UI:wght@400;500;700&display=swap');
body {
  	margin: 0; line-height: normal;
}

import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import Box from 'carbon-react/lib/components/box';
import Button from 'carbon-react/lib/components/button';
import CarbonProvider from 'carbon-react/lib/components/carbon-provider';
import Form from 'carbon-react/lib/components/form';
import GlobalHeader from 'carbon-react/lib/components/global-header';
import Image from 'carbon-react/lib/components/image';
import Icon from 'carbon-react/lib/components/icon';
import NavigationBar from 'carbon-react/lib/components/navigation-bar';
import { Menu, MenuItem } from 'carbon-react/lib/components/menu';
import { FilterableSelect, Option } from "carbon-react/lib/components/select";
import sageTheme from 'carbon-react/lib/style/themes/sage';
import Typography from 'carbon-react/lib/components/typography';
import VerticalDivider from "carbon-react/lib/components/vertical-divider";
import { Tabs, Tab } from 'carbon-react/lib/components/tabs';
import i18n from './i18n';
import logo from './Logo.png';

const App = ({ locale = 'en', analysisTypes }) => {
  useEffect(() => {
    i18n.locale = locale;
  }, [locale]);

  const [selectedValues, setSelectedValues] = useState(
    Object.fromEntries(
      Object.entries(analysisTypes).map(([key, value]) => [key, value.selectedValue])
    )
  );

  const handleSelectChange = (key, value) => {
    setSelectedValues((prevValues) => ({
      ...prevValues,
      [key]: value,
    }));
  };

  const [activeTab, setActiveTab] = useState('analysisTypes');

  const handleAddNewOptionClick = () => {
    alert('Add new option clicked')
  };
  const handleCancelButtonClick = () => {
    alert('Cancel button clicked')
  };
  const handleSaveButtonClick = () => {
    alert('Save button clicked')
  };
  const handleHelpClick = () => {
    alert('Help button clicked')
  };
  const handleChildClick = () => {
    alert('Child button clicked')
  };
  const handleCompanyClick = () => {
    alert('Company button clicked')
  };
  const handleHomeClick = () => {
    alert('Home button clicked')
  };
  const handleSummaryClick = () => {
    alert('Summary button clicked')
  };
  const handlePayRunClick = () => {
    alert('Pay Run button clicked')
  };
  const handleEmployeeClick = () => {
    alert('Employee button clicked')
  };
  const handlePensionClick = () => {
    alert('Pension button clicked')
  };
  const handleYearEndClick = () => {
    alert('Year End button clicked')
  };
  const handleSettingsClick = () => {
    alert('Settings button clicked')
  };

  const Logo = () => (
    <Image
      onClick={ handleHomeClick }
      alt="Logo"
      src={ logo }
      maxHeight={ 25 }
      ml={ 1 }
      mt={ 1 }
    />
  );

  return (
    <CarbonProvider theme={ sageTheme } >
      <GlobalHeader
        logo={ <Logo /> }
        aria-label="Global header"
        pl="2px"
      >
      <VerticalDivider
        height={ 24 }
        p={ 1 }
        tint={ 40 }
      />
      <Menu menuType="black" flex="1">
        <MenuItem
          flex="1"
          submenu={ i18n.t('payroll') }
          aria-label={ i18n.t('payrollLabel') }
          data-role="menu-item-payroll"
        >
          <MenuItem
            aria-label={ i18n.t('dummyLabel') }
            data-role="menu-item-payroll-child"
            onClick={ handleChildClick }
          >
            { i18n.t('dummy') }
          </MenuItem>
        </MenuItem>
        <Box
          display="flex"
          flexDirection="row"
          alignItems="center"
          marginRight={ 3 }
        >
          <MenuItem
            flex="0 0 auto"
            submenu=" "
            icon="person"
            aria-label={ i18n.t('profileLabel') }
            data-role="menu-item-profile"
          >
            <MenuItem
              href="#"
              aria-label={ i18n.t('dummyLabel') }
              data-role="menu-item-profile-child"
              onClick={ handleChildClick }
            >
              { i18n.t('dummy') }
            </MenuItem>
          </MenuItem>
          <MenuItem
            href="#"
            aria-label={ i18n.t('cannyCakesLabel') }
            data-role="menu-item-company-name"
            onClick={ handleCompanyClick }
          >
            { i18n.t('companyName') }
          </MenuItem>
          <MenuItem
            href="#"
            aria-label={ i18n.t('help') }
            data-role="menu-item-help"
            onClick={ handleHelpClick }
          >
            { i18n.t('help') }
          </MenuItem>
        </Box>
      </Menu>
      </GlobalHeader>
      <NavigationBar
        position="fixed"
        orientation="top"
        offset="40px"
        aria-label="header"
        navigationType="white"
      >
        <Menu menuType="white" flex="1">
          <MenuItem
            href="#"
            aria-label={ i18n.t('summary') }
            data-role="menu-item-summary"
            onClick={ handleSummaryClick }
          >
            { i18n.t('summary') }
          </MenuItem>
          <MenuItem
            href="#"
            aria-label={ i18n.t('payRunsLabel') }
            data-role="menu-item-pay-runs"
            onClick={ handlePayRunClick }
          >
            { i18n.t('payRunsLabel') }
          </MenuItem>
          <MenuItem
            selected
            href="#"
            aria-label={ i18n.t('employeesLabel') }
            data-role="menu-item-employees"
            onClick={ handleEmployeeClick }
          >
            { i18n.t('employeesLabel') }
          </MenuItem>
          <MenuItem
            href="#"
            aria-label={ i18n.t('pensionsLabel') }
            data-role="menu-item-pensions"
            onClick={ handlePensionClick }
          >
            { i18n.t('pensionsLabel') }
          </MenuItem>
          <MenuItem
            href="#"
            aria-label={ i18n.t('yearEndLabel') }
            data-role="menu-item-year-end"
            onClick={ handleYearEndClick }
          >
            { i18n.t('yearEndLabel') }
          </MenuItem>
          <MenuItem
            href="#"
            submenu={ i18n.t('reportingLabel') }
            data-role="menu-item-reporting"
          >
            <MenuItem
              href="#"
              aria-label={ i18n.t('dummyLabel') }
              data-role="menu-item-reporting-child"
              onClick={ handleChildClick }
            >
              { i18n.t('dummy') }
            </MenuItem>
          </MenuItem>
          <MenuItem
            href="#"
            aria-label={ i18n.t('settingsLabel') }
            data-role="menu-item-settings"
            onClick={ handleSettingsClick }
          >
            { i18n.t('settingsLabel') }
          </MenuItem>
        </Menu>
      </NavigationBar>
      <Box
        bg="#F2F5F6"
        minHeight="90vh"
        mt="80px"
      >
        <Box>
          <Box
            display="flex"
            flexDirection="row"
            alignItems="center"
            mt="80px"
            ml="25px"
          >
            <Typography variant="h1" mt="32px">
              { i18n.t('employee') }: { i18n.t('employeeName') }
            </Typography>
            <Icon
              type="help"
              size="small"
              ml="6px"
              mt="32px"
              disabled
            />
          </Box>
          <Typography
            variant="p"
            mt="8px"
            ml="25px"
          >
            { i18n.t('review_and_edit_employee_details') }
          </Typography>
        </Box>
        <Tabs
          align="left"
          position="top"
          extendedLine={ true }
          selectedTabId={ activeTab }
          onTabChange={ (tabId) => setActiveTab(tabId) }
          defaultTab="analysisTypes"
        >
          <Tab tabId="employeeDetails" title={ i18n.t('employeeDetails') }>
            <Box mt="32px" ml="24px">
              <Typography variant="h4"> { i18n.t('employeeDetails') }</Typography>
            </Box>
          </Tab>
          <Tab tabId="analysisTypes" title={ i18n.t('analysisTypes') }>
            <Box
              bg="#FFFFFF"
              mt="32px"
              mr="24px"
              ml="24px"
            >

                <Box
                  mt="16px"
                  ml="24px"
                  width="30%"
                >
                  <Typography variant="h3"> { i18n.t('analysisTypes') }</Typography>
                  <Form>
                    { Object.entries(analysisTypes).map(([key, { label, options }]) => (
                      <Box
                        mt="16px"
                        align="left"
                        key={ key }
                      >
                        <FilterableSelect
                          label={ label }
                          labelInline
                          labelAlign="left"
                          value={ String(selectedValues[key]) }
                          onChange={ (event) => handleSelectChange(key, event.target.value) }
                          listActionButton={
                            <Button
                              ml="1px"
                              iconType="add"
                              iconPosition="before"
                              buttonType="tertiary"
                            >

                                { i18n.t('addNewOption') }

                            </Button>
                          }
                          onListAction={ () => { handleAddNewOptionClick(); } }
                        >
                          { options.map((option) => (
                            <Option
                              key={ option.value }
                              text={ option.text }
                              value={ option.value }
                            />
                          ))}
                        </FilterableSelect>
                      </Box>
                    ))}
                  </Form>
                </Box>

            </Box>
          </Tab>
          <Tab tabId="workingPattern" title={ i18n.t('workingPattern') }>
            <Box mt="32px" ml="24px">
              <Typography variant="h4"> { i18n.t('workingPattern') }</Typography>
            </Box>
          </Tab>
          <Tab tabId="payDocumentPreferences" title={ i18n.t('payDocumentPreferences') }>
            <Box mt="32px" ml="24px">
              <Typography variant="h4"> { i18n.t('payDocumentPreferences') }</Typography>
            </Box>
          </Tab>
          <Tab tabId="workplacePensions" title={ i18n.t('workplacePensions') }>
            <Box mt="32px" ml="24px">
              <Typography variant="h4"> { i18n.t('workplacePensions')}</Typography>
            </Box>
          </Tab>
          <Tab tabId="gdprPersonalData" title={ i18n.t('gdprPersonalData') }>
            <Box mt="32px" ml="24px">
              <Typography variant="h4"> { i18n.t('gdprPersonalData') }</Typography>
            </Box>
          </Tab>
        </Tabs>
        <Form
          saveButton={
            <Button
              onClick={ handleSaveButtonClick }
              buttonType="primary"
              type="submit"
            >
              { i18n.t('save') }
            </Button>
          }
          rightSideButtons={
            <Button
              mr="24px"
              onClick={ handleCancelButtonClick }
              buttonType="secondary"
            >
              { i18n.t('cancel') }
            </Button>
          }
        />
      </Box>
    </CarbonProvider>
  );
};

App.propTypes={
  locale: PropTypes.string,
  analysisTypes: PropTypes.objectOf(
    PropTypes.shape({
      selectedValue: PropTypes.string.isRequired,
      label: PropTypes.string.isRequired,
      options: PropTypes.arrayOf(
        PropTypes.shape({
          text: PropTypes.string.isRequired,
          value: PropTypes.string.isRequired
        })
      ).isRequired
    })
  ).isRequired
};

export default App;

import I18n from 'i18n-js';

I18n.translations={
  en: {
    addNewOption: 'Add new option',
    analysisTypes: 'Analysis Types',
    cancel: 'Cancel',
    companyName: "Canny Cakes",
    dummy: 'Dummy',
    dummyLabel: 'Dummy Label',
    employee: 'Employee',
    employeeName: 'Marina Miller',
    employeesLabel: 'Employees',
    employeeDetails: 'Employee Details',
    gdprPersonalData: 'GDPR Personal Data',
    help: 'Help',
    payroll: 'Payroll',
    payrollLabel: 'Payroll Menu',
    profileLabel: 'Profile',
    payRunsLabel: 'Pay Runs',
    pensionsLabel: 'Pensions',
    payDocumentPreferences: 'Pay Document Preferences',
    review_and_edit_employee_details: 'Review and edit the employee\'s details.',
    reportingLabel: 'Reporting',
    save: 'Save',
    summary: 'Summary',
    settingsLabel: 'Settings',
    workingPattern: 'Working Pattern',
    workplacePensions: 'Workplace Pensions',
    yearEndLabel: 'Year End'
  }
};

I18n.locale='en'
I18n.fallbacks=true

export default I18n;

import React from "react";
import ReactDOM from "react-dom";
import CarbonProvider from "carbon-react/lib/components/carbon-provider";
import sageTheme from "carbon-react/lib/style/themes/sage";
import GlobalStyle from "carbon-react/lib/style/global-style";
import "carbon-react/lib/style/fonts.css";

import App from "./app";

const departmentOptions = [
  { text: "001 - Design", value: "001" },
  { text: "002 - Development", value: "002" },
  { text: "003 - Executive Team", value: "003" },
  { text: "004 - HR", value: "004" },
  { text: "005 - Sales", value: "005" },
  { text: "None", value: "000" },
];

const costCentreOptions = [
  { text: "None", value: "000" },
  { text: "CC001 - Sales North", value: "CC001" },
];

const projectOptions = [
  { text: "None", value: "000" },
  { text: "008 - Bakery Refit", value: "008" },
];

const regionOptions = [
  { text: "None", value: "000" },
  { text: "002 - North East", value: "002" },
  { text: "004 - South West", value: "004" },
];
const companyCarOptions = [
  { text: "None", value: "000" },
  { text: "001 - Yes", value: "001" },
  { text: "002 - No", value: "002" },
];
const contractBasisOptions = [
  { text: "None", value: "000" },
  { text: "001 - Permanent", value: "001" },
  { text: "002 - Temporary", value: "002" },
];

const analysisTypes={
  department: {
    selectedValue: "005",
    label: "Department",
    options: departmentOptions,
  },
  costCentre : {
    selectedValue: "000",
    label: "Cost Centre",
    options: costCentreOptions,
  },
  project : {
    selectedValue: "000",
    label: "Project",
    options: projectOptions,
  },
  region : {
    selectedValue: "000",
    label: "Region",
    options: regionOptions,
  },
  companyCar : {
    selectedValue: "000",
    label: "Company Car",
    options: companyCarOptions,
  },
  contractBasis : {
    selectedValue: "000",
    label: "Contract Basis",
    options: contractBasisOptions,
  }
}

ReactDOM.render(
  <CarbonProvider focusRedesignOptOut theme={ sageTheme }>
    <GlobalStyle/>
    <App
      analysisTypes={ analysisTypes }
    />
  </CarbonProvider>,
  document.getElementById("app")
);