IO-306 Creation of dashboard.

client/src/components/header/header.component.jsx

@@ -18,6 +18,7 @@ import Icon, {
   ScheduleOutlined,
   SettingOutlined,
   TeamOutlined,
+  DashboardFilled,
   ToolFilled,
   UnorderedListOutlined,
   UserOutlined,
@@ -79,12 +80,12 @@ function Header({
   const { t } = useTranslation();
 
   return (
-    <Layout.Header style={{ display: "flex", alignItems: "center" }}>
+    <Layout.Header>
       <Menu
         mode="horizontal"
         //theme="light"
         theme={"dark"}
-        style={{ flex: 1 }}
+        style={{ flex: "auto" }}
         selectedKeys={[selectedHeader]}
         onClick={handleMenuClick}
         subMenuCloseDelay={0.3}
@@ -96,6 +97,7 @@ function Header({
           <Link to="/manage/schedule">{t("menus.header.schedule")}</Link>
         </Menu.Item>
         <Menu.SubMenu
+          key="jobssubmenu"
           icon={<Icon component={FaCarCrash} />}
           title={t("menus.header.jobs")}
         >
@@ -110,11 +112,11 @@ function Header({
               {t("menus.header.availablejobs")}
             </Link>
           </Menu.Item>
-          <Menu.Divider />
+          <Menu.Divider key="div1" />
           <Menu.Item key="alljobs" icon={<UnorderedListOutlined />}>
             <Link to="/manage/jobs/all">{t("menus.header.alljobs")}</Link>
           </Menu.Item>
-          <Menu.Divider />
+          <Menu.Divider key="div2" />
 
           <Menu.Item key="productionlist" icon={<ScheduleOutlined />}>
             <Link to="/manage/production/list">
@@ -126,13 +128,14 @@ function Header({
               {t("menus.header.productionboard")}
             </Link>
           </Menu.Item>
-          <Menu.Divider />
+          <Menu.Divider key="div3" />
 
           <Menu.Item key="scoreboard" icon={<LineChartOutlined />}>
             <Link to="/manage/scoreboard">{t("menus.header.scoreboard")}</Link>
           </Menu.Item>
         </Menu.SubMenu>
         <Menu.SubMenu
+          key="customers"
           icon={<UserOutlined />}
           title={t("menus.header.customers")}
         >
@@ -144,6 +147,7 @@ function Header({
           </Menu.Item>
         </Menu.SubMenu>
         <Menu.SubMenu
+          key="ccs"
           icon={<CarFilled />}
           title={t("menus.header.courtesycars")}
         >
@@ -164,6 +168,7 @@ function Header({
           </Menu.Item>
         </Menu.SubMenu>
         <Menu.SubMenu
+          key="accounting"
           icon={<DollarCircleFilled />}
           title={t("menus.header.accounting")}
         >
@@ -185,7 +190,7 @@ function Header({
           >
             {t("menus.header.enterbills")}
           </Menu.Item>
-          <Menu.Divider />
+          <Menu.Divider key="div4" />
           <Menu.Item key="allpayments" icon={<BankFilled />}>
             <Link to="/manage/payments">{t("menus.header.allpayments")}</Link>
           </Menu.Item>
@@ -201,7 +206,7 @@ function Header({
             <Icon component={FaCreditCard} />
             {t("menus.header.enterpayment")}
           </Menu.Item>
-          <Menu.Divider />
+          <Menu.Divider key="div5" />
 
           <Menu.Item key="timetickets" icon={<FieldTimeOutlined />}>
             <Link to="/manage/timetickets">
@@ -220,9 +225,10 @@ function Header({
           >
             {t("menus.header.entertimeticket")}
           </Menu.Item>
-          <Menu.Divider />
+          <Menu.Divider key="div6" />
 
           <Menu.SubMenu
+            key="accountingexport"
             title={t("menus.header.export")}
             icon={<ExportOutlined />}
           >
@@ -256,18 +262,18 @@ function Header({
             {t("menus.header.temporarydocs")}
           </Link>
         </Menu.Item>
-        <Menu.Item
-          key="help"
-          onClick={() => {
-            window.open("https://help.imex.online/", "_blank");
-          }}
-          icon={<Icon component={QuestionCircleFilled} />}
-        />
-        <Menu.SubMenu title={t("menus.header.shop")} icon={<SettingOutlined />}>
+
+        <Menu.SubMenu
+          key="shopsubmenu"
+          title={t("menus.header.shop")}
+          icon={<SettingOutlined />}
+        >
           <Menu.Item key="shop" icon={<Icon component={GiSettingsKnobs} />}>
             <Link to="/manage/shop">{t("menus.header.shop_config")}</Link>
           </Menu.Item>
-
+          <Menu.Item key="dashboard" icon={<DashboardFilled />}>
+            <Link to="/manage/dashboard">{t("menus.header.dashboard")}</Link>
+          </Menu.Item>
           <Menu.Item
             key="reportcenter"
             icon={<BarChartOutlined />}
@@ -294,16 +300,25 @@ function Header({
         </Menu.SubMenu>
         <Menu.SubMenu
           style={{ float: "right" }}
+          key="user"
           title={
             currentUser.displayName ||
             currentUser.email ||
             t("general.labels.unknown")
           }
         >
-          <Menu.Item danger onClick={() => signOutStart()}>
+          <Menu.Item key="signout" danger onClick={() => signOutStart()}>
             {t("user.actions.signout")}
           </Menu.Item>
           <Menu.Item
+            key="help"
+            onClick={() => {
+              window.open("https://help.imex.online/", "_blank");
+            }}
+            icon={<Icon component={QuestionCircleFilled} />}
+          />
+          <Menu.Item
+            key="rescue"
             onClick={() => {
               window.open("https://imexrescue.com/", "_blank");
             }}
@@ -317,6 +332,7 @@ function Header({
             <Link to="/manage/profile">{t("menus.currentuser.profile")}</Link>
           </Menu.Item>
           <Menu.SubMenu
+            key="langselecter"
             title={
               <span>
                 <GlobalOutlined />
@@ -335,7 +351,12 @@ function Header({
             </Menu.Item>
           </Menu.SubMenu>
         </Menu.SubMenu>
-        <Menu.SubMenu style={{ float: "right" }} title={<ClockCircleFilled />}>
+
+        <Menu.SubMenu
+          key="recent"
+          style={{ float: "right" }}
+          title={<ClockCircleFilled />}
+        >
           {recentItems.map((i, idx) => (
             <Menu.Item key={idx}>
               <Link to={i.url}>{i.label}</Link>
@@ -343,9 +364,6 @@ function Header({
           ))}
         </Menu.SubMenu>
       </Menu>
-      <div>
-        <GlobalSearch />
-      </div>
     </Layout.Header>
   );
 }