IO-922 Added icons.

client/src/components/global-search/global-search.component.jsx

@@ -166,12 +166,12 @@ export default function GlobalSearch() {
 
   return (
     <AutoComplete
-      dropdownMatchSelectWidth={false}
+      dropdownMatchSelectWidth={"false"}
       options={options}
       onSearch={handleSearch}
       allowClear
     >
-      <Input.Search loading={loading} style={{ width: "20vw" }} />
+      <Input.Search loading={loading} />
     </AutoComplete>
   );
 }

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>
   );
 }

client/src/components/tech-sider/tech-sider.component.jsx

@@ -1,4 +1,4 @@
-import Icon, { SearchOutlined } from "@ant-design/icons";
+import Icon, { SearchOutlined, ScheduleOutlined } from "@ant-design/icons";
 import { Layout, Menu } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -10,6 +10,7 @@ import { Link } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import { techLogout } from "../../redux/tech/tech.actions";
 import { selectTechnician } from "../../redux/tech/tech.selectors";
+import { BsKanban } from "react-icons/bs";
 
 const { Sider } = Layout;
 
@@ -29,39 +30,47 @@ export function TechSider({ technician, techLogout }) {
 
   return (
     <Sider collapsible collapsed={collapsed} onCollapse={onCollapse}>
-      <Menu theme='dark' defaultSelectedKeys={["1"]} mode='inline'>
+      <Menu theme="dark" defaultSelectedKeys={["1"]} mode="inline">
         <Menu.Item
-          key='1'
+          key="1"
           disabled={!!technician}
-          icon={<Icon component={FiLogIn} />}>
+          icon={<Icon component={FiLogIn} />}
+        >
           <Link to={`/tech/login`}>{t("menus.tech.login")}</Link>
         </Menu.Item>
-        <Menu.Item key='2' disabled={!!!technician} icon={<SearchOutlined />}>
+        <Menu.Item key="2" disabled={!!!technician} icon={<SearchOutlined />}>
           <Link to={`/tech/joblookup`}>{t("menus.tech.joblookup")}</Link>
         </Menu.Item>
         <Menu.Item
-          key='3'
+          key="3"
           disabled={!!!technician}
-          icon={<Icon component={FaBusinessTime} />}>
+          icon={<Icon component={FaBusinessTime} />}
+        >
           <Link to={`/tech/jobclock`}>{t("menus.tech.jobclockin")}</Link>
         </Menu.Item>
         <Menu.Item
-          key='4'
+          key="4"
           disabled={!!!technician}
-          icon={<Icon component={MdTimer} />}>
+          icon={<Icon component={MdTimer} />}
+        >
           <Link to={`/tech/shiftclock`}>{t("menus.tech.shiftclockin")}</Link>
         </Menu.Item>
-        <Menu.Item key='5' disabled={!!!technician} icon={<SearchOutlined />}>
+        <Menu.Item key="5" disabled={!!!technician} icon={<ScheduleOutlined />}>
           <Link to={`/tech/list`}>{t("menus.tech.productionlist")}</Link>
         </Menu.Item>
-        <Menu.Item key='6' disabled={!!!technician} icon={<SearchOutlined />}>
+        <Menu.Item
+          key="6"
+          disabled={!!!technician}
+          icon={<Icon component={BsKanban} />}
+        >
           <Link to={`/tech/board`}> {t("menus.tech.productionboard")}</Link>
         </Menu.Item>
         <Menu.Item
-          key='7'
+          key="7"
           disabled={!!!technician}
           onClick={() => techLogout()}
-          icon={<Icon component={FiLogOut} />}>
+          icon={<Icon component={FiLogOut} />}
+        >
           {t("menus.tech.logout")}
         </Menu.Item>
       </Menu>