admin/bodyshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

IO-922 Added icons.

Browse Source
This commit is contained in:
Patrick Fic
2021-05-03 11:21:25 -07:00
parent b39c12e955
commit bf77bbd4ee
3 changed files with 69 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
client/src/components/global-search/global-search.component.jsx
View File

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

74
client/src/components/header/header.component.jsx
View File

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

35
client/src/components/tech-sider/tech-sider.component.jsx
View File

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