IO-922 Added icons.

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

@@ -1,14 +1,21 @@
 import Icon, {
+  BankFilled,
+  BarChartOutlined,
   CarFilled,
   ClockCircleFilled,
   DollarCircleFilled,
+  ExportOutlined,
+  FieldTimeOutlined,
   FileAddFilled,
   FileFilled,
   GlobalOutlined,
   HomeFilled,
   ImportOutlined,
   LineChartOutlined,
+  PaperClipOutlined,
+  PhoneOutlined,
   ScheduleOutlined,
+  SettingOutlined,
   TeamOutlined,
   ToolFilled,
   UnorderedListOutlined,
@@ -24,6 +31,9 @@ import {
   FaCreditCard,
   FaFileInvoiceDollar,
 } from "react-icons/fa";
+import { GiPayMoney, GiPlayerTime, GiSettingsKnobs } from "react-icons/gi";
+import { IoBusinessOutline } from "react-icons/io5";
+import { RiSurveyLine } from "react-icons/ri";
 import { connect } from "react-redux";
 import { Link } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
@@ -35,6 +45,7 @@ import { setModalContext } from "../../redux/modals/modals.actions";
 import { signOutStart } from "../../redux/user/user.actions";
 import { selectCurrentUser } from "../../redux/user/user.selectors";
 import GlobalSearch from "../global-search/global-search.component";
+
 const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser,
   recentItems: selectRecentItems,
@@ -67,12 +78,12 @@ function Header({
   const { t } = useTranslation();
 
   return (
-    <Layout.Header>
+    <Layout.Header style={{ display: "flex", alignItems: "center" }}>
       <Menu
         mode="horizontal"
         //theme="light"
         theme={"dark"}
-        style={{ flex: 5 }}
+        style={{ flex: 1 }}
         selectedKeys={[selectedHeader]}
         onClick={handleMenuClick}
         subMenuCloseDelay={0.3}
@@ -155,11 +166,15 @@ function Header({
           icon={<DollarCircleFilled />}
           title={t("menus.header.accounting")}
         >
-          <Menu.Item key="bills">
+          <Menu.Item
+            key="bills"
+            icon={<Icon component={FaFileInvoiceDollar} />}
+          >
             <Link to="/manage/bills">{t("menus.header.bills")}</Link>
           </Menu.Item>
           <Menu.Item
             key="enterbills"
+            icon={<Icon component={GiPayMoney} />}
             onClick={() => {
               setBillEnterContext({
                 actions: {},
@@ -167,11 +182,10 @@ function Header({
               });
             }}
           >
-            <Icon component={FaFileInvoiceDollar} />
             {t("menus.header.enterbills")}
           </Menu.Item>
           <Menu.Divider />
-          <Menu.Item key="allpayments">
+          <Menu.Item key="allpayments" icon={<BankFilled />}>
             <Link to="/manage/payments">{t("menus.header.allpayments")}</Link>
           </Menu.Item>
           <Menu.Item
@@ -188,13 +202,14 @@ function Header({
           </Menu.Item>
           <Menu.Divider />
 
-          <Menu.Item key="timetickets">
+          <Menu.Item key="timetickets" icon={<FieldTimeOutlined />}>
             <Link to="/manage/timetickets">
               {t("menus.header.timetickets")}
             </Link>
           </Menu.Item>
           <Menu.Item
             key="entertimetickets"
+            icon={<Icon component={GiPlayerTime} />}
             onClick={() => {
               setTimeTicketContext({
                 actions: {},
@@ -206,7 +221,10 @@ function Header({
           </Menu.Item>
           <Menu.Divider />
 
-          <Menu.SubMenu title={t("menus.header.export")}>
+          <Menu.SubMenu
+            title={t("menus.header.export")}
+            icon={<ExportOutlined />}
+          >
             <Menu.Item key="receivables">
               <Link to="/manage/accounting/receivables">
                 {t("menus.header.accounting-receivables")}
@@ -229,27 +247,22 @@ function Header({
             </Menu.Item>
           </Menu.SubMenu>
         </Menu.SubMenu>
-        <Menu.SubMenu title={t("menus.header.shop")}>
-          <Menu.Item key="shop">
+        <Menu.Item key="phonebook" icon={<PhoneOutlined />}>
+          <Link to="/manage/phonebook">{t("menus.header.phonebook")}</Link>
+        </Menu.Item>
+        <Menu.Item key="temporarydocs" icon={<PaperClipOutlined />}>
+          <Link to="/manage/temporarydocs">
+            {t("menus.header.temporarydocs")}
+          </Link>
+        </Menu.Item>
+        <Menu.SubMenu 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="temporarydocs">
-            <Link to="/manage/temporarydocs">
-              {t("menus.header.temporarydocs")}
-            </Link>
-          </Menu.Item>
-          <Menu.Item key="phonebook">
-            <Link to="/manage/phonebook">{t("menus.header.phonebook")}</Link>
-          </Menu.Item>
-          {
-            // <Menu.Item key="shop-templates">
-            //   <Link to="/manage/shop/templates">
-            //     {t("menus.header.shop_templates")}
-            //   </Link>
-            // </Menu.Item>
-          }
+
           <Menu.Item
             key="reportcenter"
+            icon={<BarChartOutlined />}
             onClick={() => {
               setReportCenterContext({
                 actions: {},
@@ -259,12 +272,15 @@ function Header({
           >
             {t("menus.header.reportcenter")}
           </Menu.Item>
-          <Menu.Item key="shop-vendors">
+          <Menu.Item
+            key="shop-vendors"
+            icon={<Icon component={IoBusinessOutline} />}
+          >
             <Link to="/manage/shop/vendors">
               {t("menus.header.shop_vendors")}
             </Link>
           </Menu.Item>
-          <Menu.Item key="shop-csi">
+          <Menu.Item key="shop-csi" icon={<Icon component={RiSurveyLine} />}>
             <Link to="/manage/shop/csi">{t("menus.header.shop_csi")}</Link>
           </Menu.Item>
         </Menu.SubMenu>
@@ -318,10 +334,10 @@ function Header({
             </Menu.Item>
           ))}
         </Menu.SubMenu>
-        <Menu.Item style={{ float: "right" }}>
-          <GlobalSearch />
-        </Menu.Item>
       </Menu>
+      <div>
+        <GlobalSearch />
+      </div>
     </Layout.Header>
   );
 }