Merge remote-tracking branch 'origin/client-update' into test-beta
This commit is contained in:
Patrick Fic
1
client/.npmrc
Normal file
1
client/.npmrc
Normal file
@@ -0,0 +1 @@
|
|||||||
|
legacy-peer-deps=true
|
||||||
@@ -2,72 +2,89 @@
|
|||||||
const TerserPlugin = require("terser-webpack-plugin");
|
const TerserPlugin = require("terser-webpack-plugin");
|
||||||
const CracoLessPlugin = require("craco-less");
|
const CracoLessPlugin = require("craco-less");
|
||||||
const SentryWebpackPlugin = require("@sentry/webpack-plugin");
|
const SentryWebpackPlugin = require("@sentry/webpack-plugin");
|
||||||
|
const {convertLegacyToken} = require('@ant-design/compatible/lib');
|
||||||
|
const {theme} = require('antd/lib');
|
||||||
|
|
||||||
|
const {defaultAlgorithm, defaultSeed} = theme;
|
||||||
|
|
||||||
|
const mapToken = defaultAlgorithm(defaultSeed);
|
||||||
|
const v4Token = convertLegacyToken(mapToken);
|
||||||
|
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
plugins: [
|
plugins: [
|
||||||
{
|
{
|
||||||
plugin: SentryWebpackPlugin,
|
plugin: SentryWebpackPlugin,
|
||||||
options: {
|
options: {
|
||||||
// sentry-cli configuration
|
// sentry-cli configuration
|
||||||
authToken:
|
authToken:
|
||||||
"6b45b028a02342db97a9a2f92c0959058665443d379d4a3a876430009e744260",
|
"6b45b028a02342db97a9a2f92c0959058665443d379d4a3a876430009e744260",
|
||||||
org: "snapt-software",
|
org: "snapt-software",
|
||||||
project: "imexonline",
|
project: "imexonline",
|
||||||
release: process.env.REACT_APP_GIT_SHA,
|
release: process.env.REACT_APP_GIT_SHA,
|
||||||
|
|
||||||
// webpack-specific configuration
|
// webpack-specific configuration
|
||||||
include: ".",
|
include: ".",
|
||||||
ignore: ["node_modules", "webpack.config.js"],
|
ignore: ["node_modules", "webpack.config.js"],
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
plugin: CracoLessPlugin,
|
|
||||||
options: {
|
|
||||||
lessLoaderOptions: {
|
|
||||||
lessOptions: {
|
|
||||||
modifyVars: {
|
|
||||||
...(process.env.NODE_ENV === "development"
|
|
||||||
? { "@primary-color": "#a51d1d" }
|
|
||||||
: {
|
|
||||||
//"@primary-color": "#1DA57A"
|
|
||||||
}),
|
|
||||||
// "@primary-color": " #1890ff", // primary color for all components
|
|
||||||
// "@link-color": "#1890ff", // link color
|
|
||||||
// "@success-color": "#52c41a", // success state color
|
|
||||||
// "@warning-color": "#faad14", // warning state color
|
|
||||||
// "@error-color": "#f5222d", // error state color
|
|
||||||
// "@font-size-base": "14px", // major text font size
|
|
||||||
// " @heading-color": "rgba(0, 0, 0, 0.85)", // heading text color
|
|
||||||
// "@text-color": "rgba(0, 0, 0, 0.65)", // major text color
|
|
||||||
// "@text-color-secondary": "rgba(0, 0, 0, 0.45)", // secondary text color
|
|
||||||
// "@disabled-color": "rgba(0, 0, 0, 0.25)", // disable state color
|
|
||||||
// "@border-radius-base": "2px", // major border radius
|
|
||||||
// "@border-color-base": "#d9d9d9", // major border color
|
|
||||||
// "@box-shadow-base":
|
|
||||||
// "0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08),0 9px 28px 8px rgba(0, 0, 0, 0.05); // major shadow for layers }",
|
|
||||||
},
|
},
|
||||||
javascriptEnabled: true,
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
},
|
{
|
||||||
},
|
plugin: CracoLessPlugin,
|
||||||
],
|
options: {
|
||||||
webpack: {
|
lessLoaderOptions: {
|
||||||
configure: (webpackConfig) => ({
|
lessOptions: {
|
||||||
...webpackConfig,
|
modifyVars: {
|
||||||
optimization: {
|
...v4Token,
|
||||||
...webpackConfig.optimization,
|
// TODO: This will no longer work in AntD 5.0
|
||||||
// Workaround for CircleCI bug caused by the number of CPUs shown
|
...(process.env.NODE_ENV === "development"
|
||||||
// https://github.com/facebook/create-react-app/issues/8320
|
? {"colorPrimary": "#a51d1d"}
|
||||||
minimizer: webpackConfig.optimization.minimizer.map((item) => {
|
: {
|
||||||
if (item instanceof TerserPlugin) {
|
//"@primary-color": "#1DA57A"
|
||||||
item.options.parallel = 2;
|
}),
|
||||||
}
|
// "@primary-color": " #1890ff", // primary color for all components
|
||||||
|
// "@link-color": "#1890ff", // link color
|
||||||
|
// "@success-color": "#52c41a", // success state color
|
||||||
|
// "@warning-color": "#faad14", // warning state color
|
||||||
|
// "@error-color": "#f5222d", // error state color
|
||||||
|
// "@font-size-base": "14px", // major text font size
|
||||||
|
// " @heading-color": "rgba(0, 0, 0, 0.85)", // heading text color
|
||||||
|
// "@text-color": "rgba(0, 0, 0, 0.65)", // major text color
|
||||||
|
// "@text-color-secondary": "rgba(0, 0, 0, 0.45)", // secondary text color
|
||||||
|
// "@disabled-color": "rgba(0, 0, 0, 0.25)", // disable state color
|
||||||
|
// "@border-radius-base": "2px", // major border radius
|
||||||
|
// "@border-color-base": "#d9d9d9", // major border color
|
||||||
|
// "@box-shadow-base":
|
||||||
|
// "0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08),0 9px 28px 8px rgba(0, 0, 0, 0.05); // major shadow for layers }",
|
||||||
|
},
|
||||||
|
javascriptEnabled: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
webpack: {
|
||||||
|
configure: (webpackConfig) => {
|
||||||
|
return {
|
||||||
|
...webpackConfig,
|
||||||
|
// Required for Dev Server
|
||||||
|
devServer: {
|
||||||
|
...webpackConfig.devServer,
|
||||||
|
allowedHosts: 'all',
|
||||||
|
},
|
||||||
|
optimization: {
|
||||||
|
...webpackConfig.optimization,
|
||||||
|
// Workaround for CircleCI bug caused by the number of CPUs shown
|
||||||
|
// https://github.com/facebook/create-react-app/issues/8320
|
||||||
|
minimizer: webpackConfig.optimization.minimizer.map((item) => {
|
||||||
|
if (item instanceof TerserPlugin) {
|
||||||
|
item.options.parallel = 2;
|
||||||
|
}
|
||||||
|
|
||||||
return item;
|
return item;
|
||||||
}),
|
}),
|
||||||
},
|
},
|
||||||
}),
|
};
|
||||||
},
|
},
|
||||||
devtool: "source-map",
|
},
|
||||||
|
devtool: "source-map",
|
||||||
};
|
};
|
||||||
|
|||||||
17
client/cypress.config.js
Normal file
17
client/cypress.config.js
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
const { defineConfig } = require('cypress')
|
||||||
|
|
||||||
|
module.exports = defineConfig({
|
||||||
|
experimentalStudio: true,
|
||||||
|
env: {
|
||||||
|
FIREBASE_USERNAME: 'cypress@imex.test',
|
||||||
|
FIREBASE_PASSWORD: 'cypress',
|
||||||
|
},
|
||||||
|
e2e: {
|
||||||
|
// We've imported your old cypress plugins here.
|
||||||
|
// You may want to clean this up later by importing these.
|
||||||
|
setupNodeEvents(on, config) {
|
||||||
|
return require('./cypress/plugins/index.js')(on, config)
|
||||||
|
},
|
||||||
|
baseUrl: 'http://localhost:3000',
|
||||||
|
},
|
||||||
|
})
|
||||||
@@ -1,8 +0,0 @@
|
|||||||
{
|
|
||||||
"baseUrl": "http://localhost:3000",
|
|
||||||
"experimentalStudio": true,
|
|
||||||
"env": {
|
|
||||||
"FIREBASE_USERNAME": "cypress@imex.test",
|
|
||||||
"FIREBASE_PASSWORD": "cypress"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
15979
client/package-lock.json
generated
15979
client/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -4,85 +4,89 @@
|
|||||||
"private": true,
|
"private": true,
|
||||||
"proxy": "http://localhost:4000",
|
"proxy": "http://localhost:4000",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@apollo/client": "^3.7.9",
|
"@ant-design/compatible": "^5.1.2",
|
||||||
|
"@ant-design/pro-layout": "^7.17.16",
|
||||||
|
"@apollo/client": "^3.8.8",
|
||||||
"@asseinfo/react-kanban": "^2.2.0",
|
"@asseinfo/react-kanban": "^2.2.0",
|
||||||
"@craco/craco": "^7.0.0",
|
"@craco/craco": "^7.1.0",
|
||||||
"@fingerprintjs/fingerprintjs": "^3.4.2",
|
"@fingerprintjs/fingerprintjs": "^4.2.1",
|
||||||
"@jsreport/browser-client": "^3.1.0",
|
"@jsreport/browser-client": "^3.1.0",
|
||||||
"@sentry/react": "^7.40.0",
|
"@reduxjs/toolkit": "^2.0.1",
|
||||||
"@sentry/tracing": "^7.40.0",
|
"@sentry/react": "^7.91.0",
|
||||||
"@splitsoftware/splitio-react": "^1.8.1",
|
"@sentry/tracing": "^7.91.0",
|
||||||
"@tanem/react-nprogress": "^5.0.8",
|
"@splitsoftware/splitio-react": "^1.10.2",
|
||||||
"antd": "^4.24.8",
|
"@tanem/react-nprogress": "^5.0.51",
|
||||||
|
"antd": "^5.12.5",
|
||||||
"apollo-link-logger": "^2.0.1",
|
"apollo-link-logger": "^2.0.1",
|
||||||
"axios": "^1.3.4",
|
"axios": "^1.6.3",
|
||||||
"craco-less": "^2.0.0",
|
"craco-less": "^3.0.1",
|
||||||
|
"dayjs": "^1.11.10",
|
||||||
|
"dayjs-business-days2": "^1.2.2",
|
||||||
"dinero.js": "^1.9.1",
|
"dinero.js": "^1.9.1",
|
||||||
"dotenv": "^16.0.1",
|
"dotenv": "^16.3.1",
|
||||||
"enquire-js": "^0.2.1",
|
"enquire-js": "^0.2.1",
|
||||||
"env-cmd": "^10.1.0",
|
"env-cmd": "^10.1.0",
|
||||||
"exifr": "^7.1.3",
|
"exifr": "^7.1.3",
|
||||||
"firebase": "^9.17.1",
|
"firebase": "^10.7.1",
|
||||||
"graphql": "^16.6.0",
|
"graphql": "^16.6.0",
|
||||||
"i18next": "^22.4.10",
|
"i18next": "^23.7.12",
|
||||||
"i18next-browser-languagedetector": "^7.0.1",
|
"i18next-browser-languagedetector": "^7.0.2",
|
||||||
"jsoneditor": "^9.9.0",
|
"jsoneditor": "^10.0.0",
|
||||||
"jsreport-browser-client-dist": "^1.3.0",
|
"jsreport-browser-client-dist": "^1.3.0",
|
||||||
"libphonenumber-js": "^1.10.21",
|
"libphonenumber-js": "^1.10.53",
|
||||||
"logrocket": "^3.0.1",
|
"logrocket": "^7.0.0",
|
||||||
"markerjs2": "^2.28.1",
|
"markerjs2": "^2.31.4",
|
||||||
"moment-business-days": "^1.2.0",
|
|
||||||
"moment-timezone": "^0.5.41",
|
|
||||||
"normalize-url": "^8.0.0",
|
"normalize-url": "^8.0.0",
|
||||||
"phone": "^3.1.35",
|
"phone": "^3.1.41",
|
||||||
"preval.macro": "^5.0.0",
|
"preval.macro": "^5.0.0",
|
||||||
"prop-types": "^15.8.1",
|
"prop-types": "^15.8.1",
|
||||||
"query-string": "^7.1.3",
|
"query-string": "^8.1.0",
|
||||||
"rc-queue-anim": "^2.0.0",
|
"rc-queue-anim": "^2.0.0",
|
||||||
"rc-scroll-anim": "^2.7.6",
|
"rc-scroll-anim": "^2.7.6",
|
||||||
"react": "^17.0.2",
|
"react": "^18.2.0",
|
||||||
"react-big-calendar": "^1.6.8",
|
"react-big-calendar": "^1.8.5",
|
||||||
"react-color": "^2.19.3",
|
"react-color": "^2.19.3",
|
||||||
"react-cookie": "^4.1.1",
|
"react-cookie": "^6.1.1",
|
||||||
"react-dom": "^17.0.2",
|
"react-dom": "^18.2.0",
|
||||||
"react-drag-listview": "^0.2.1",
|
"react-drag-listview": "^2.0.0",
|
||||||
"react-grid-gallery": "^1.0.0",
|
"react-grid-gallery": "^1.0.0",
|
||||||
"react-grid-layout": "^1.3.4",
|
"react-grid-layout": "^1.3.4",
|
||||||
"react-i18next": "^12.2.0",
|
"react-i18next": "^14.0.0",
|
||||||
"react-icons": "^4.7.1",
|
"react-icons": "^4.7.1",
|
||||||
"react-image-lightbox": "^5.1.4",
|
"react-image-lightbox": "^5.1.4",
|
||||||
"react-intersection-observer": "^9.4.3",
|
"react-intersection-observer": "^9.5.3",
|
||||||
"react-number-format": "^5.1.3",
|
"react-number-format": "^5.1.4",
|
||||||
"react-redux": "^8.0.5",
|
"react-redux": "^9.0.4",
|
||||||
"react-resizable": "^3.0.4",
|
"react-resizable": "^3.0.5",
|
||||||
"react-router-dom": "^5.3.0",
|
"react-router-dom": "^6.21.1",
|
||||||
"react-scripts": "^5.0.1",
|
"react-scripts": "^5.0.1",
|
||||||
"react-sticky": "^6.0.3",
|
"react-sticky": "^6.0.3",
|
||||||
"react-sublime-video": "^0.2.5",
|
"react-sublime-video": "^0.2.5",
|
||||||
"react-virtualized": "^9.22.3",
|
"react-virtualized": "^9.22.5",
|
||||||
"recharts": "^2.4.3",
|
"recharts": "^2.4.3",
|
||||||
"redux": "^4.2.1",
|
"redux": "^5.0.1",
|
||||||
"redux-persist": "^6.0.0",
|
"redux-persist": "^6.0.0",
|
||||||
"redux-saga": "^1.2.2",
|
"redux-saga": "^1.2.3",
|
||||||
"redux-state-sync": "^3.1.4",
|
"redux-state-sync": "^3.1.4",
|
||||||
"reselect": "^4.1.7",
|
"reselect": "^5.0.1",
|
||||||
"sass": "^1.58.3",
|
"sass": "^1.58.3",
|
||||||
"socket.io-client": "^4.6.1",
|
"socket.io-client": "^4.7.2",
|
||||||
"styled-components": "^5.3.6",
|
"styled-components": "^6.1.6",
|
||||||
"subscriptions-transport-ws": "^0.11.0",
|
"subscriptions-transport-ws": "^0.11.0",
|
||||||
"web-vitals": "^2.1.4",
|
"terser-webpack-plugin": "^5.3.10",
|
||||||
"workbox-background-sync": "^6.5.3",
|
"web-vitals": "^3.5.1",
|
||||||
"workbox-broadcast-update": "^6.5.3",
|
"workbox-background-sync": "^7.0.0",
|
||||||
"workbox-cacheable-response": "^6.5.3",
|
"workbox-broadcast-update": "^7.0.0",
|
||||||
"workbox-core": "^6.5.3",
|
"workbox-cacheable-response": "^7.0.0",
|
||||||
"workbox-expiration": "^6.5.3",
|
"workbox-core": "^7.0.0",
|
||||||
"workbox-google-analytics": "^6.5.3",
|
"workbox-expiration": "^7.0.0",
|
||||||
"workbox-navigation-preload": "^6.5.3",
|
"workbox-google-analytics": "^7.0.0",
|
||||||
"workbox-precaching": "^6.5.3",
|
"workbox-navigation-preload": "^7.0.0",
|
||||||
"workbox-range-requests": "^6.5.3",
|
"workbox-precaching": "^7.0.0",
|
||||||
"workbox-routing": "^6.5.3",
|
"workbox-range-requests": "^7.0.0",
|
||||||
"workbox-strategies": "^6.5.3",
|
"workbox-routing": "^7.0.0",
|
||||||
"workbox-streams": "^6.5.3",
|
"workbox-strategies": "^7.0.0",
|
||||||
|
"workbox-streams": "^7.0.0",
|
||||||
"yauzl": "^2.10.0"
|
"yauzl": "^2.10.0"
|
||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
@@ -119,12 +123,13 @@
|
|||||||
"react-error-overlay": "6.0.9"
|
"react-error-overlay": "6.0.9"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@sentry/webpack-plugin": "^1.20.0",
|
"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
|
||||||
"@testing-library/cypress": "^8.0.3",
|
"@sentry/webpack-plugin": "^2.10.2",
|
||||||
"cypress": "^10.3.1",
|
"@testing-library/cypress": "^10.0.1",
|
||||||
"eslint-plugin-cypress": "^2.12.1",
|
"cypress": "^13.6.2",
|
||||||
|
"eslint-plugin-cypress": "^2.15.1",
|
||||||
"react-error-overlay": "6.0.11",
|
"react-error-overlay": "6.0.11",
|
||||||
"redux-logger": "^3.0.6",
|
"redux-logger": "^3.0.6",
|
||||||
"source-map-explorer": "^2.5.2"
|
"source-map-explorer": "^2.5.3"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -2,14 +2,15 @@ import { ApolloProvider } from "@apollo/client";
|
|||||||
import { SplitFactory, SplitSdk } from "@splitsoftware/splitio-react";
|
import { SplitFactory, SplitSdk } from "@splitsoftware/splitio-react";
|
||||||
import { ConfigProvider } from "antd";
|
import { ConfigProvider } from "antd";
|
||||||
import enLocale from "antd/es/locale/en_US";
|
import enLocale from "antd/es/locale/en_US";
|
||||||
import moment from "moment";
|
import dayjs from "../utils/day";
|
||||||
|
import 'dayjs/locale/en';
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
import GlobalLoadingBar from "../components/global-loading-bar/global-loading-bar.component";
|
import GlobalLoadingBar from "../components/global-loading-bar/global-loading-bar.component";
|
||||||
import client from "../utils/GraphQLClient";
|
import client from "../utils/GraphQLClient";
|
||||||
import App from "./App";
|
import App from "./App";
|
||||||
|
|
||||||
moment.locale("en-US");
|
dayjs.locale("en");
|
||||||
|
|
||||||
export const factory = SplitSdk({
|
export const factory = SplitSdk({
|
||||||
core: {
|
core: {
|
||||||
|
|||||||
@@ -1,11 +1,11 @@
|
|||||||
import { useClient } from "@splitsoftware/splitio-react";
|
import {useSplitClient} from "@splitsoftware/splitio-react";
|
||||||
import { Button, Result } from "antd";
|
import {Button, Result} from "antd";
|
||||||
import LogRocket from "logrocket";
|
import LogRocket from "logrocket";
|
||||||
import React, { lazy, Suspense, useEffect } from "react";
|
import React, {lazy, Suspense, useEffect} from "react";
|
||||||
import { useTranslation } from "react-i18next";
|
import {useTranslation} from "react-i18next";
|
||||||
import { connect } from "react-redux";
|
import {connect} from "react-redux";
|
||||||
import { Route, Switch } from "react-router-dom";
|
import {Route, Routes} from "react-router-dom";
|
||||||
import { createStructuredSelector } from "reselect";
|
import {createStructuredSelector} from "reselect";
|
||||||
import DocumentEditorContainer from "../components/document-editor/document-editor.container";
|
import DocumentEditorContainer from "../components/document-editor/document-editor.container";
|
||||||
import ErrorBoundary from "../components/error-boundary/error-boundary.component";
|
import ErrorBoundary from "../components/error-boundary/error-boundary.component";
|
||||||
//Component Imports
|
//Component Imports
|
||||||
@@ -13,149 +13,119 @@ import LoadingSpinner from "../components/loading-spinner/loading-spinner.compon
|
|||||||
import DisclaimerPage from "../pages/disclaimer/disclaimer.page";
|
import DisclaimerPage from "../pages/disclaimer/disclaimer.page";
|
||||||
import LandingPage from "../pages/landing/landing.page";
|
import LandingPage from "../pages/landing/landing.page";
|
||||||
import TechPageContainer from "../pages/tech/tech.page.container";
|
import TechPageContainer from "../pages/tech/tech.page.container";
|
||||||
import { setOnline } from "../redux/application/application.actions";
|
import {setOnline} from "../redux/application/application.actions";
|
||||||
import { selectOnline } from "../redux/application/application.selectors";
|
import {selectOnline} from "../redux/application/application.selectors";
|
||||||
import { checkUserSession } from "../redux/user/user.actions";
|
import {checkUserSession} from "../redux/user/user.actions";
|
||||||
import {
|
import {selectBodyshop, selectCurrentUser,} from "../redux/user/user.selectors";
|
||||||
selectBodyshop,
|
import PrivateRoute from "../components/PrivateRoute";
|
||||||
selectCurrentUser,
|
|
||||||
} from "../redux/user/user.selectors";
|
|
||||||
import PrivateRoute from "../utils/private-route";
|
|
||||||
import "./App.styles.scss";
|
import "./App.styles.scss";
|
||||||
|
|
||||||
const ResetPassword = lazy(() =>
|
const ResetPassword = lazy(() =>
|
||||||
import("../pages/reset-password/reset-password.component")
|
import("../pages/reset-password/reset-password.component")
|
||||||
);
|
);
|
||||||
const ManagePage = lazy(() => import("../pages/manage/manage.page.container"));
|
const ManagePage = lazy(() => import("../pages/manage/manage.page.container"));
|
||||||
const SignInPage = lazy(() => import("../pages/sign-in/sign-in.page"));
|
const SignInPage = lazy(() => import("../pages/sign-in/sign-in.page"));
|
||||||
|
|
||||||
const CsiPage = lazy(() => import("../pages/csi/csi.container.page"));
|
const CsiPage = lazy(() => import("../pages/csi/csi.container.page"));
|
||||||
const MobilePaymentContainer = lazy(() =>
|
const MobilePaymentContainer = lazy(() =>
|
||||||
import("../pages/mobile-payment/mobile-payment.container")
|
import("../pages/mobile-payment/mobile-payment.container")
|
||||||
);
|
);
|
||||||
|
|
||||||
const mapStateToProps = createStructuredSelector({
|
const mapStateToProps = createStructuredSelector({
|
||||||
currentUser: selectCurrentUser,
|
currentUser: selectCurrentUser,
|
||||||
online: selectOnline,
|
online: selectOnline,
|
||||||
bodyshop: selectBodyshop,
|
bodyshop: selectBodyshop,
|
||||||
});
|
});
|
||||||
const mapDispatchToProps = (dispatch) => ({
|
const mapDispatchToProps = (dispatch) => ({
|
||||||
checkUserSession: () => dispatch(checkUserSession()),
|
checkUserSession: () => dispatch(checkUserSession()),
|
||||||
setOnline: (isOnline) => dispatch(setOnline(isOnline)),
|
setOnline: (isOnline) => dispatch(setOnline(isOnline)),
|
||||||
});
|
});
|
||||||
|
|
||||||
export function App({
|
export function App({
|
||||||
bodyshop,
|
bodyshop,
|
||||||
checkUserSession,
|
checkUserSession,
|
||||||
currentUser,
|
currentUser,
|
||||||
online,
|
online,
|
||||||
setOnline,
|
setOnline,
|
||||||
}) {
|
}) {
|
||||||
const client = useClient();
|
const client = useSplitClient().client;
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!navigator.onLine) {
|
if (!navigator.onLine) {
|
||||||
setOnline(false);
|
setOnline(false);
|
||||||
}
|
|
||||||
|
|
||||||
checkUserSession();
|
|
||||||
}, [checkUserSession, setOnline]);
|
|
||||||
|
|
||||||
//const b = Grid.useBreakpoint();
|
|
||||||
// console.log("Breakpoints:", b);
|
|
||||||
|
|
||||||
const { t } = useTranslation();
|
|
||||||
|
|
||||||
window.addEventListener("offline", function (e) {
|
|
||||||
setOnline(false);
|
|
||||||
});
|
|
||||||
|
|
||||||
window.addEventListener("online", function (e) {
|
|
||||||
setOnline(true);
|
|
||||||
});
|
|
||||||
useEffect(() => {
|
|
||||||
if (currentUser.authorized && bodyshop) {
|
|
||||||
client.setAttribute("imexshopid", bodyshop.imexshopid);
|
|
||||||
|
|
||||||
if (client.getTreatment("LogRocket_Tracking") === "on") {
|
|
||||||
console.log("LR Start");
|
|
||||||
LogRocket.init("gvfvfw/bodyshopapp");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, [bodyshop, client, currentUser.authorized]);
|
|
||||||
|
|
||||||
if (currentUser.authorized === null) {
|
|
||||||
return <LoadingSpinner message={t("general.labels.loggingin")} />;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!online)
|
|
||||||
return (
|
|
||||||
<Result
|
|
||||||
status="warning"
|
|
||||||
title={t("general.labels.nointernet")}
|
|
||||||
subTitle={t("general.labels.nointernet_sub")}
|
|
||||||
extra={
|
|
||||||
<Button
|
|
||||||
type="primary"
|
|
||||||
onClick={() => {
|
|
||||||
window.location.reload();
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{t("general.actions.refresh")}
|
|
||||||
</Button>
|
|
||||||
}
|
}
|
||||||
/>
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
checkUserSession();
|
||||||
<Switch>
|
}, [checkUserSession, setOnline]);
|
||||||
<Suspense fallback={<LoadingSpinner message="ImEX Online" />}>
|
|
||||||
<ErrorBoundary>
|
//const b = Grid.useBreakpoint();
|
||||||
<Route exact path="/" component={LandingPage} />
|
// console.log("Breakpoints:", b);
|
||||||
</ErrorBoundary>
|
|
||||||
<ErrorBoundary>
|
const {t} = useTranslation();
|
||||||
<Route exact path="/signin" component={SignInPage} />
|
|
||||||
</ErrorBoundary>
|
window.addEventListener("offline", function (e) {
|
||||||
<ErrorBoundary>
|
setOnline(false);
|
||||||
<Route exact path="/resetpassword" component={ResetPassword} />
|
});
|
||||||
</ErrorBoundary>
|
|
||||||
<ErrorBoundary>
|
window.addEventListener("online", function (e) {
|
||||||
<Route exact path="/csi/:surveyId" component={CsiPage} />
|
setOnline(true);
|
||||||
</ErrorBoundary>
|
});
|
||||||
<ErrorBoundary>
|
|
||||||
<Route exact path="/disclaimer" component={DisclaimerPage} />
|
useEffect(() => {
|
||||||
</ErrorBoundary>
|
if (currentUser.authorized && bodyshop) {
|
||||||
<ErrorBoundary>
|
client.setAttribute("imexshopid", bodyshop.imexshopid);
|
||||||
<Route
|
|
||||||
exact
|
if (client.getTreatment("LogRocket_Tracking") === "on") {
|
||||||
path="/mp/:paymentIs"
|
console.log("LR Start");
|
||||||
component={MobilePaymentContainer}
|
LogRocket.init("gvfvfw/bodyshopapp");
|
||||||
/>
|
}
|
||||||
</ErrorBoundary>
|
}
|
||||||
<ErrorBoundary>
|
}, [bodyshop, client, currentUser.authorized]);
|
||||||
<PrivateRoute
|
|
||||||
isAuthorized={currentUser.authorized}
|
if (currentUser.authorized === null) {
|
||||||
path="/manage"
|
return <LoadingSpinner message={t("general.labels.loggingin")}/>;
|
||||||
component={ManagePage}
|
}
|
||||||
/>
|
|
||||||
</ErrorBoundary>
|
if (!online)
|
||||||
<ErrorBoundary>
|
return (
|
||||||
<PrivateRoute
|
<Result
|
||||||
isAuthorized={currentUser.authorized}
|
status="warning"
|
||||||
path="/tech"
|
title={t("general.labels.nointernet")}
|
||||||
component={TechPageContainer}
|
subTitle={t("general.labels.nointernet_sub")}
|
||||||
/>
|
extra={
|
||||||
</ErrorBoundary>
|
<Button
|
||||||
<ErrorBoundary>
|
type="primary"
|
||||||
<PrivateRoute
|
onClick={() => {
|
||||||
isAuthorized={currentUser.authorized}
|
window.location.reload();
|
||||||
path="/edit"
|
}}
|
||||||
component={DocumentEditorContainer}
|
>
|
||||||
/>
|
{t("general.actions.refresh")}
|
||||||
</ErrorBoundary>
|
</Button>
|
||||||
</Suspense>
|
}
|
||||||
</Switch>
|
/>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
// Any route that is not assigned and matched will default to the Landing Page component
|
||||||
|
return (
|
||||||
|
<Suspense fallback={<LoadingSpinner message="ImEX Online"/>}>
|
||||||
|
<Routes>
|
||||||
|
<Route path="*" element={<ErrorBoundary><LandingPage/></ErrorBoundary>}/>
|
||||||
|
<Route path="/signin" element={<ErrorBoundary><SignInPage/></ErrorBoundary>}/>
|
||||||
|
<Route path="/resetpassword" element={<ErrorBoundary><ResetPassword/></ErrorBoundary>}/>
|
||||||
|
<Route path="/csi/:surveyId" element={<ErrorBoundary><CsiPage/></ErrorBoundary>}/>
|
||||||
|
<Route path="/disclaimer" element={<ErrorBoundary><DisclaimerPage/></ErrorBoundary>}/>
|
||||||
|
<Route path="/mp/:paymentIs" element={<ErrorBoundary><MobilePaymentContainer/></ErrorBoundary>}/>
|
||||||
|
<Route path="/manage/*" element={<ErrorBoundary><PrivateRoute isAuthorized={currentUser.authorized}/></ErrorBoundary>}>
|
||||||
|
<Route path="*" element={<ManagePage/>}/>
|
||||||
|
</Route>
|
||||||
|
<Route path="/tech/*" element={<ErrorBoundary><PrivateRoute isAuthorized={currentUser.authorized}/></ErrorBoundary>}>
|
||||||
|
<Route path="*" element={<TechPageContainer/>}/>
|
||||||
|
</Route>
|
||||||
|
<Route path="/edit/*" element={<PrivateRoute isAuthorized={currentUser.authorized}/>}>
|
||||||
|
<Route path="*" element={<DocumentEditorContainer/>}/>
|
||||||
|
</Route>
|
||||||
|
</Routes>
|
||||||
|
</Suspense>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default connect(mapStateToProps, mapDispatchToProps)(App);
|
export default connect(mapStateToProps, mapDispatchToProps)(App);
|
||||||
|
|||||||
17
client/src/components/PrivateRoute.js
Normal file
17
client/src/components/PrivateRoute.js
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
import React, {useEffect} from "react";
|
||||||
|
import {Outlet, useLocation, useNavigate} from "react-router-dom";
|
||||||
|
|
||||||
|
function PrivateRoute({component: Component, isAuthorized, ...rest}) {
|
||||||
|
const location = useLocation();
|
||||||
|
const navigate = useNavigate();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!isAuthorized) {
|
||||||
|
navigate(`/signin?redirect=${location.pathname}`);
|
||||||
|
}
|
||||||
|
}, [isAuthorized, navigate,location]);
|
||||||
|
|
||||||
|
return <Outlet/>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default PrivateRoute;
|
||||||
@@ -61,7 +61,7 @@ export function AllocationsAssignmentComponent({
|
|||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Popover content={popContent} visible={visibility}>
|
<Popover content={popContent} open={visibility}>
|
||||||
<Button onClick={() => setVisibility(true)}>
|
<Button onClick={() => setVisibility(true)}>
|
||||||
{t("allocations.actions.assign")}
|
{t("allocations.actions.assign")}
|
||||||
</Button>
|
</Button>
|
||||||
|
|||||||
@@ -59,7 +59,7 @@ export default connect(
|
|||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Popover content={popContent} visible={visibility}>
|
<Popover content={popContent} open={visibility}>
|
||||||
<Button disabled={disabled} onClick={() => setVisibility(true)}>
|
<Button disabled={disabled} onClick={() => setVisibility(true)}>
|
||||||
{t("allocations.actions.assign")}
|
{t("allocations.actions.assign")}
|
||||||
</Button>
|
</Button>
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
import { useMutation, useQuery } from "@apollo/client";
|
import {useMutation, useQuery} from "@apollo/client";
|
||||||
import { Button, Form, PageHeader, Popconfirm, Space } from "antd";
|
import {Button, Form, Popconfirm, Space} from "antd";
|
||||||
import moment from "moment";
|
import dayjs from "../../utils/day";
|
||||||
import queryString from "query-string";
|
import queryString from "query-string";
|
||||||
import React, { useState } from "react";
|
import React, { useState } from "react";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
@@ -10,7 +10,7 @@ import { createStructuredSelector } from "reselect";
|
|||||||
import {
|
import {
|
||||||
DELETE_BILL_LINE,
|
DELETE_BILL_LINE,
|
||||||
INSERT_NEW_BILL_LINES,
|
INSERT_NEW_BILL_LINES,
|
||||||
UPDATE_BILL_LINE,
|
UPDATE_BILL_LINE
|
||||||
} from "../../graphql/bill-lines.queries";
|
} from "../../graphql/bill-lines.queries";
|
||||||
import { QUERY_BILL_BY_PK, UPDATE_BILL } from "../../graphql/bills.queries";
|
import { QUERY_BILL_BY_PK, UPDATE_BILL } from "../../graphql/bills.queries";
|
||||||
import { insertAuditTrail } from "../../redux/application/application.actions";
|
import { insertAuditTrail } from "../../redux/application/application.actions";
|
||||||
@@ -26,143 +26,142 @@ import JobDocumentsGallery from "../jobs-documents-gallery/jobs-documents-galler
|
|||||||
import JobsDocumentsLocalGallery from "../jobs-documents-local-gallery/jobs-documents-local-gallery.container";
|
import JobsDocumentsLocalGallery from "../jobs-documents-local-gallery/jobs-documents-local-gallery.container";
|
||||||
import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
|
import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
|
||||||
import BillDetailEditReturn from "./bill-detail-edit-return.component";
|
import BillDetailEditReturn from "./bill-detail-edit-return.component";
|
||||||
|
import {PageHeader} from "@ant-design/pro-layout";
|
||||||
|
|
||||||
const mapStateToProps = createStructuredSelector({
|
const mapStateToProps = createStructuredSelector({
|
||||||
bodyshop: selectBodyshop,
|
bodyshop: selectBodyshop,
|
||||||
});
|
});
|
||||||
const mapDispatchToProps = (dispatch) => ({
|
const mapDispatchToProps = (dispatch) => ({
|
||||||
setPartsOrderContext: (context) =>
|
setPartsOrderContext: (context) =>
|
||||||
dispatch(setModalContext({ context: context, modal: "partsOrder" })),
|
dispatch(setModalContext({context: context, modal: "partsOrder"})),
|
||||||
insertAuditTrail: ({ jobid, operation }) =>
|
insertAuditTrail: ({jobid, operation}) =>
|
||||||
dispatch(insertAuditTrail({ jobid, operation })),
|
dispatch(insertAuditTrail({jobid, operation})),
|
||||||
});
|
});
|
||||||
|
|
||||||
export default connect(
|
export default connect(
|
||||||
mapStateToProps,
|
mapStateToProps,
|
||||||
mapDispatchToProps
|
mapDispatchToProps
|
||||||
)(BillDetailEditcontainer);
|
)(BillDetailEditcontainer);
|
||||||
|
|
||||||
export function BillDetailEditcontainer({
|
export function BillDetailEditcontainer({setPartsOrderContext, insertAuditTrail, bodyshop,}) {
|
||||||
setPartsOrderContext,
|
const search = queryString.parse(useLocation().search);
|
||||||
insertAuditTrail,
|
|
||||||
bodyshop,
|
|
||||||
}) {
|
|
||||||
const search = queryString.parse(useLocation().search);
|
|
||||||
|
|
||||||
const { t } = useTranslation();
|
const {t} = useTranslation();
|
||||||
const [form] = Form.useForm();
|
const [form] = Form.useForm();
|
||||||
const [visible, setVisible] = useState(false);
|
const [visible, setVisible] = useState(false);
|
||||||
const [updateLoading, setUpdateLoading] = useState(false);
|
const [updateLoading, setUpdateLoading] = useState(false);
|
||||||
const [update_bill] = useMutation(UPDATE_BILL);
|
const [update_bill] = useMutation(UPDATE_BILL);
|
||||||
const [insertBillLine] = useMutation(INSERT_NEW_BILL_LINES);
|
const [insertBillLine] = useMutation(INSERT_NEW_BILL_LINES);
|
||||||
const [updateBillLine] = useMutation(UPDATE_BILL_LINE);
|
const [updateBillLine] = useMutation(UPDATE_BILL_LINE);
|
||||||
const [deleteBillLine] = useMutation(DELETE_BILL_LINE);
|
const [deleteBillLine] = useMutation(DELETE_BILL_LINE);
|
||||||
|
|
||||||
const { loading, error, data, refetch } = useQuery(QUERY_BILL_BY_PK, {
|
const {loading, error, data, refetch} = useQuery(QUERY_BILL_BY_PK, {
|
||||||
variables: { billid: search.billid },
|
variables: {billid: search.billid},
|
||||||
skip: !!!search.billid,
|
skip: !!!search.billid,
|
||||||
fetchPolicy: "network-only",
|
fetchPolicy: "network-only",
|
||||||
nextFetchPolicy: "network-only",
|
nextFetchPolicy: "network-only",
|
||||||
});
|
|
||||||
|
|
||||||
const handleSave = () => {
|
|
||||||
//It's got a previously deducted bill line!
|
|
||||||
if (
|
|
||||||
data.bills_by_pk.billlines.filter((b) => b.deductedfromlbr).length > 0 ||
|
|
||||||
form.getFieldValue("billlines").filter((b) => b.deductedfromlbr).length >
|
|
||||||
0
|
|
||||||
)
|
|
||||||
setVisible(true);
|
|
||||||
else {
|
|
||||||
form.submit();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleFinish = async (values) => {
|
|
||||||
setUpdateLoading(true);
|
|
||||||
//let adjustmentsToInsert = {};
|
|
||||||
|
|
||||||
const { billlines, upload, ...bill } = values;
|
|
||||||
const updates = [];
|
|
||||||
updates.push(
|
|
||||||
update_bill({
|
|
||||||
variables: { billId: search.billid, bill: bill },
|
|
||||||
})
|
|
||||||
);
|
|
||||||
|
|
||||||
billlines.forEach((l) => {
|
|
||||||
delete l.selected;
|
|
||||||
});
|
});
|
||||||
|
|
||||||
//Find bill lines that were deleted.
|
// ... rest of the code remains the same
|
||||||
const deletedJobLines = [];
|
|
||||||
|
|
||||||
data.bills_by_pk.billlines.forEach((a) => {
|
const handleSave = () => {
|
||||||
const matchingRecord = billlines.find((b) => b.id === a.id);
|
//It's got a previously deducted bill line!
|
||||||
if (!matchingRecord) {
|
if (
|
||||||
deletedJobLines.push(a);
|
data.bills_by_pk.billlines.filter((b) => b.deductedfromlbr).length > 0 ||
|
||||||
}
|
form.getFieldValue("billlines").filter((b) => b.deductedfromlbr).length >
|
||||||
});
|
0
|
||||||
|
)
|
||||||
|
setVisible(true);
|
||||||
|
else {
|
||||||
|
form.submit();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
deletedJobLines.forEach((d) => {
|
const handleFinish = async (values) => {
|
||||||
updates.push(deleteBillLine({ variables: { id: d.id } }));
|
setUpdateLoading(true);
|
||||||
});
|
//let adjustmentsToInsert = {};
|
||||||
|
|
||||||
billlines.forEach((billline) => {
|
const {billlines, upload, ...bill} = values;
|
||||||
const { deductedfromlbr, inventories, jobline, ...il } = billline;
|
const updates = [];
|
||||||
delete il.__typename;
|
|
||||||
|
|
||||||
if (il.id) {
|
|
||||||
updates.push(
|
updates.push(
|
||||||
updateBillLine({
|
update_bill({
|
||||||
variables: {
|
variables: {billId: search.billid, bill: bill},
|
||||||
billLineId: il.id,
|
})
|
||||||
billLine: {
|
|
||||||
...il,
|
|
||||||
deductedfromlbr: deductedfromlbr,
|
|
||||||
joblineid: il.joblineid === "noline" ? null : il.joblineid,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
})
|
|
||||||
);
|
);
|
||||||
} else {
|
|
||||||
//It's a new line, have to insert it.
|
|
||||||
updates.push(
|
|
||||||
insertBillLine({
|
|
||||||
variables: {
|
|
||||||
billLines: [
|
|
||||||
{
|
|
||||||
...il,
|
|
||||||
deductedfromlbr: deductedfromlbr,
|
|
||||||
billid: search.billid,
|
|
||||||
joblineid: il.joblineid === "noline" ? null : il.joblineid,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
})
|
|
||||||
);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
await Promise.all(updates);
|
billlines.forEach((l) => {
|
||||||
|
delete l.selected;
|
||||||
|
});
|
||||||
|
|
||||||
insertAuditTrail({
|
//Find bill lines that were deleted.
|
||||||
jobid: bill.jobid,
|
const deletedJobLines = [];
|
||||||
billid: search.billid,
|
|
||||||
operation: AuditTrailMapping.billupdated(bill.invoice_number),
|
|
||||||
});
|
|
||||||
|
|
||||||
await refetch();
|
data.bills_by_pk.billlines.forEach((a) => {
|
||||||
form.setFieldsValue(transformData(data));
|
const matchingRecord = billlines.find((b) => b.id === a.id);
|
||||||
form.resetFields();
|
if (!matchingRecord) {
|
||||||
setVisible(false);
|
deletedJobLines.push(a);
|
||||||
setUpdateLoading(false);
|
}
|
||||||
};
|
});
|
||||||
|
|
||||||
if (error) return <AlertComponent message={error.message} type="error" />;
|
deletedJobLines.forEach((d) => {
|
||||||
if (!search.billid) return <></>; //<div>{t("bills.labels.noneselected")}</div>;
|
updates.push(deleteBillLine({variables: {id: d.id}}));
|
||||||
|
});
|
||||||
|
|
||||||
const exported = data && data.bills_by_pk && data.bills_by_pk.exported;
|
billlines.forEach((billline) => {
|
||||||
|
const {deductedfromlbr, inventories, jobline, ...il} = billline;
|
||||||
|
delete il.__typename;
|
||||||
|
|
||||||
|
if (il.id) {
|
||||||
|
updates.push(
|
||||||
|
updateBillLine({
|
||||||
|
variables: {
|
||||||
|
billLineId: il.id,
|
||||||
|
billLine: {
|
||||||
|
...il,
|
||||||
|
deductedfromlbr: deductedfromlbr,
|
||||||
|
joblineid: il.joblineid === "noline" ? null : il.joblineid,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
//It's a new line, have to insert it.
|
||||||
|
updates.push(
|
||||||
|
insertBillLine({
|
||||||
|
variables: {
|
||||||
|
billLines: [
|
||||||
|
{
|
||||||
|
...il,
|
||||||
|
deductedfromlbr: deductedfromlbr,
|
||||||
|
billid: search.billid,
|
||||||
|
joblineid: il.joblineid === "noline" ? null : il.joblineid,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
await Promise.all(updates);
|
||||||
|
|
||||||
|
insertAuditTrail({
|
||||||
|
jobid: bill.jobid,
|
||||||
|
billid: search.billid,
|
||||||
|
operation: AuditTrailMapping.billupdated(bill.invoice_number),
|
||||||
|
});
|
||||||
|
|
||||||
|
await refetch();
|
||||||
|
form.setFieldsValue(transformData(data));
|
||||||
|
form.resetFields();
|
||||||
|
setVisible(false);
|
||||||
|
setUpdateLoading(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
if (error) return <AlertComponent message={error.message} type="error"/>;
|
||||||
|
if (!search.billid) return <></>; //<div>{t("bills.labels.noneselected")}</div>;
|
||||||
|
|
||||||
|
const exported = data && data.bills_by_pk && data.bills_by_pk.exported;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
@@ -208,45 +207,45 @@ export function BillDetailEditcontainer({
|
|||||||
>
|
>
|
||||||
<BillFormContainer form={form} billEdit disabled={exported} />
|
<BillFormContainer form={form} billEdit disabled={exported} />
|
||||||
|
|
||||||
{bodyshop.uselocalmediaserver ? (
|
{bodyshop.uselocalmediaserver ? (
|
||||||
<JobsDocumentsLocalGallery
|
<JobsDocumentsLocalGallery
|
||||||
job={{ id: data ? data.bills_by_pk.jobid : null }}
|
job={{id: data ? data.bills_by_pk.jobid : null}}
|
||||||
invoice_number={data ? data.bills_by_pk.invoice_number : null}
|
invoice_number={data ? data.bills_by_pk.invoice_number : null}
|
||||||
vendorid={data ? data.bills_by_pk.vendorid : null}
|
vendorid={data ? data.bills_by_pk.vendorid : null}
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<JobDocumentsGallery
|
<JobDocumentsGallery
|
||||||
jobId={data ? data.bills_by_pk.jobid : null}
|
jobId={data ? data.bills_by_pk.jobid : null}
|
||||||
billId={search.billid}
|
billId={search.billid}
|
||||||
documentsList={data ? data.bills_by_pk.documents : []}
|
documentsList={data ? data.bills_by_pk.documents : []}
|
||||||
billsCallback={refetch}
|
billsCallback={refetch}
|
||||||
/>
|
/>
|
||||||
|
)}
|
||||||
|
</Form>
|
||||||
|
</>
|
||||||
)}
|
)}
|
||||||
</Form>
|
|
||||||
</>
|
</>
|
||||||
)}
|
);
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const transformData = (data) => {
|
const transformData = (data) => {
|
||||||
return data
|
return data
|
||||||
? {
|
? {
|
||||||
...data.bills_by_pk,
|
...data.bills_by_pk,
|
||||||
|
|
||||||
billlines: data.bills_by_pk.billlines.map((i) => {
|
billlines: data.bills_by_pk.billlines.map((i) => {
|
||||||
return {
|
return {
|
||||||
...i,
|
...i,
|
||||||
joblineid: !!i.joblineid ? i.joblineid : "noline",
|
joblineid: !!i.joblineid ? i.joblineid : "noline",
|
||||||
applicable_taxes: {
|
applicable_taxes: {
|
||||||
federal:
|
federal:
|
||||||
(i.applicable_taxes && i.applicable_taxes.federal) || false,
|
(i.applicable_taxes && i.applicable_taxes.federal) || false,
|
||||||
state: (i.applicable_taxes && i.applicable_taxes.state) || false,
|
state: (i.applicable_taxes && i.applicable_taxes.state) || false,
|
||||||
local: (i.applicable_taxes && i.applicable_taxes.local) || false,
|
local: (i.applicable_taxes && i.applicable_taxes.local) || false,
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
}),
|
}),
|
||||||
date: data.bills_by_pk ? moment(data.bills_by_pk.date) : null,
|
date: data.bills_by_pk ? dayjs(data.bills_by_pk.date) : null,
|
||||||
}
|
}
|
||||||
: {};
|
: {};
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ import queryString from "query-string";
|
|||||||
import React, { useEffect, useState } from "react";
|
import React, { useEffect, useState } from "react";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
import { connect } from "react-redux";
|
import { connect } from "react-redux";
|
||||||
import { useHistory, useLocation } from "react-router-dom";
|
import { useLocation, useNavigate } from "react-router-dom";
|
||||||
import { createStructuredSelector } from "reselect";
|
import { createStructuredSelector } from "reselect";
|
||||||
import { insertAuditTrail } from "../../redux/application/application.actions";
|
import { insertAuditTrail } from "../../redux/application/application.actions";
|
||||||
import { setModalContext } from "../../redux/modals/modals.actions";
|
import { setModalContext } from "../../redux/modals/modals.actions";
|
||||||
@@ -33,7 +33,7 @@ export function BillDetailEditReturn({
|
|||||||
disabled,
|
disabled,
|
||||||
}) {
|
}) {
|
||||||
const search = queryString.parse(useLocation().search);
|
const search = queryString.parse(useLocation().search);
|
||||||
const history = useHistory();
|
const history = useNavigate();
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
const [form] = Form.useForm();
|
const [form] = Form.useForm();
|
||||||
const [visible, setVisible] = useState(false);
|
const [visible, setVisible] = useState(false);
|
||||||
@@ -67,7 +67,7 @@ export function BillDetailEditReturn({
|
|||||||
});
|
});
|
||||||
delete search.billid;
|
delete search.billid;
|
||||||
|
|
||||||
history.push({ search: queryString.stringify(search) });
|
history({ search: queryString.stringify(search) });
|
||||||
setVisible(false);
|
setVisible(false);
|
||||||
};
|
};
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@@ -77,7 +77,7 @@ export function BillDetailEditReturn({
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Modal
|
<Modal
|
||||||
visible={visible}
|
open={visible}
|
||||||
onCancel={() => setVisible(false)}
|
onCancel={() => setVisible(false)}
|
||||||
destroyOnClose
|
destroyOnClose
|
||||||
title={t("bills.actions.return")}
|
title={t("bills.actions.return")}
|
||||||
|
|||||||
@@ -1,12 +1,12 @@
|
|||||||
import { Drawer, Grid } from "antd";
|
import { Drawer, Grid } from "antd";
|
||||||
import queryString from "query-string";
|
import queryString from "query-string";
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import { useHistory, useLocation } from "react-router-dom";
|
import { useLocation, useNavigate } from "react-router-dom";
|
||||||
import BillDetailEditComponent from "./bill-detail-edit-component";
|
import BillDetailEditComponent from "./bill-detail-edit-component";
|
||||||
|
|
||||||
export default function BillDetailEditcontainer() {
|
export default function BillDetailEditcontainer() {
|
||||||
const search = queryString.parse(useLocation().search);
|
const search = queryString.parse(useLocation().search);
|
||||||
const history = useHistory();
|
const history = useNavigate();
|
||||||
|
|
||||||
const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
|
const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
|
||||||
.filter((screen) => !!screen[1])
|
.filter((screen) => !!screen[1])
|
||||||
@@ -29,10 +29,10 @@ export default function BillDetailEditcontainer() {
|
|||||||
width={drawerPercentage}
|
width={drawerPercentage}
|
||||||
onClose={() => {
|
onClose={() => {
|
||||||
delete search.billid;
|
delete search.billid;
|
||||||
history.push({ search: queryString.stringify(search) });
|
history({ search: queryString.stringify(search) });
|
||||||
}}
|
}}
|
||||||
destroyOnClose
|
destroyOnClose
|
||||||
visible={search.billid}
|
open={search.billid}
|
||||||
>
|
>
|
||||||
<BillDetailEditComponent />
|
<BillDetailEditComponent />
|
||||||
</Drawer>
|
</Drawer>
|
||||||
|
|||||||
@@ -357,7 +357,7 @@ function BillEnterModalContainer({
|
|||||||
<Modal
|
<Modal
|
||||||
title={t("bills.labels.new")}
|
title={t("bills.labels.new")}
|
||||||
width={"98%"}
|
width={"98%"}
|
||||||
visible={billEnterModal.visible}
|
open={billEnterModal.visible}
|
||||||
okText={t("general.actions.save")}
|
okText={t("general.actions.save")}
|
||||||
keyboard="false"
|
keyboard="false"
|
||||||
onOk={() => form.submit()}
|
onOk={() => form.submit()}
|
||||||
|
|||||||
@@ -1,26 +1,16 @@
|
|||||||
import Icon, { UploadOutlined } from "@ant-design/icons";
|
import Icon, {UploadOutlined} from "@ant-design/icons";
|
||||||
import { useApolloClient } from "@apollo/client";
|
import {useApolloClient} from "@apollo/client";
|
||||||
import { useTreatments } from "@splitsoftware/splitio-react";
|
import {useSplitTreatments} from "@splitsoftware/splitio-react";
|
||||||
import {
|
import {Alert, Divider, Form, Input, Select, Space, Statistic, Switch, Upload,} from "antd";
|
||||||
Alert,
|
import dayjs from "../../utils/day";
|
||||||
Divider,
|
import React, {useEffect, useState} from "react";
|
||||||
Form,
|
import {useTranslation} from "react-i18next";
|
||||||
Input,
|
import {MdOpenInNew} from "react-icons/md";
|
||||||
Select,
|
import {connect} from "react-redux";
|
||||||
Space,
|
import {Link} from "react-router-dom";
|
||||||
Statistic,
|
import {createStructuredSelector} from "reselect";
|
||||||
Switch,
|
import {CHECK_BILL_INVOICE_NUMBER} from "../../graphql/bills.queries";
|
||||||
Upload,
|
import {selectBodyshop} from "../../redux/user/user.selectors";
|
||||||
} from "antd";
|
|
||||||
import moment from "moment";
|
|
||||||
import React, { useEffect, useState } from "react";
|
|
||||||
import { useTranslation } from "react-i18next";
|
|
||||||
import { MdOpenInNew } from "react-icons/md";
|
|
||||||
import { connect } from "react-redux";
|
|
||||||
import { Link } from "react-router-dom";
|
|
||||||
import { createStructuredSelector } from "reselect";
|
|
||||||
import { CHECK_BILL_INVOICE_NUMBER } from "../../graphql/bills.queries";
|
|
||||||
import { selectBodyshop } from "../../redux/user/user.selectors";
|
|
||||||
import AlertComponent from "../alert/alert.component";
|
import AlertComponent from "../alert/alert.component";
|
||||||
import BillFormLinesExtended from "../bill-form-lines-extended/bill-form-lines-extended.component";
|
import BillFormLinesExtended from "../bill-form-lines-extended/bill-form-lines-extended.component";
|
||||||
import FormDatePicker from "../form-date-picker/form-date-picker.component";
|
import FormDatePicker from "../form-date-picker/form-date-picker.component";
|
||||||
@@ -30,54 +20,38 @@ import JobSearchSelect from "../job-search-select/job-search-select.component";
|
|||||||
import LayoutFormRow from "../layout-form-row/layout-form-row.component";
|
import LayoutFormRow from "../layout-form-row/layout-form-row.component";
|
||||||
import VendorSearchSelect from "../vendor-search-select/vendor-search-select.component";
|
import VendorSearchSelect from "../vendor-search-select/vendor-search-select.component";
|
||||||
import BillFormLines from "./bill-form.lines.component";
|
import BillFormLines from "./bill-form.lines.component";
|
||||||
import { CalculateBillTotal } from "./bill-form.totals.utility";
|
import {CalculateBillTotal} from "./bill-form.totals.utility";
|
||||||
|
|
||||||
const mapStateToProps = createStructuredSelector({
|
const mapStateToProps = createStructuredSelector({
|
||||||
bodyshop: selectBodyshop,
|
bodyshop: selectBodyshop,
|
||||||
});
|
});
|
||||||
const mapDispatchToProps = (dispatch) => ({});
|
const mapDispatchToProps = (dispatch) => ({});
|
||||||
|
|
||||||
export function BillFormComponent({
|
export function BillFormComponent({bodyshop, disabled, form, vendorAutoCompleteOptions, lineData, responsibilityCenters, loadLines, billEdit, disableInvNumber, job, loadOutstandingReturns, loadInventory, preferredMake}) {
|
||||||
bodyshop,
|
|
||||||
disabled,
|
|
||||||
form,
|
|
||||||
vendorAutoCompleteOptions,
|
|
||||||
lineData,
|
|
||||||
responsibilityCenters,
|
|
||||||
loadLines,
|
|
||||||
billEdit,
|
|
||||||
disableInvNumber,
|
|
||||||
job,
|
|
||||||
loadOutstandingReturns,
|
|
||||||
loadInventory,
|
|
||||||
preferredMake,
|
|
||||||
}) {
|
|
||||||
const { t } = useTranslation();
|
|
||||||
const client = useApolloClient();
|
|
||||||
const [discount, setDiscount] = useState(0);
|
|
||||||
const { Extended_Bill_Posting } = useTreatments(
|
|
||||||
["Extended_Bill_Posting"],
|
|
||||||
{},
|
|
||||||
bodyshop.imexshopid
|
|
||||||
);
|
|
||||||
const { ClosingPeriod } = useTreatments(
|
|
||||||
["ClosingPeriod"],
|
|
||||||
{},
|
|
||||||
bodyshop.imexshopid
|
|
||||||
);
|
|
||||||
|
|
||||||
const handleVendorSelect = (props, opt) => {
|
const {t} = useTranslation();
|
||||||
setDiscount(opt.discount);
|
const client = useApolloClient();
|
||||||
|
const [discount, setDiscount] = useState(0);
|
||||||
|
|
||||||
opt &&
|
const { treatments: {Extended_Bill_Posting, ClosingPeriod} } = useSplitTreatments({
|
||||||
!billEdit &&
|
attributes: {},
|
||||||
loadOutstandingReturns({
|
names: ["Extended_Bill_Posting", "ClosingPeriod"],
|
||||||
variables: {
|
splitKey: bodyshop.imexshopid,
|
||||||
jobId: form.getFieldValue("jobid"),
|
});
|
||||||
vendorId: opt.value,
|
|
||||||
},
|
|
||||||
});
|
const handleVendorSelect = (props, opt) => {
|
||||||
};
|
setDiscount(opt.discount);
|
||||||
|
|
||||||
|
opt &&
|
||||||
|
!billEdit &&
|
||||||
|
loadOutstandingReturns({
|
||||||
|
variables: {
|
||||||
|
jobId: form.getFieldValue("jobid"),
|
||||||
|
vendorId: opt.value,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
const handleFederalTaxExemptSwitchToggle = (checked) => {
|
const handleFederalTaxExemptSwitchToggle = (checked) => {
|
||||||
// Early gate
|
// Early gate
|
||||||
@@ -97,256 +71,256 @@ export function BillFormComponent({
|
|||||||
if (job) form.validateFields(["is_credit_memo"]);
|
if (job) form.validateFields(["is_credit_memo"]);
|
||||||
}, [job, form]);
|
}, [job, form]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const vendorId = form.getFieldValue("vendorid");
|
const vendorId = form.getFieldValue("vendorid");
|
||||||
if (vendorId && vendorAutoCompleteOptions) {
|
if (vendorId && vendorAutoCompleteOptions) {
|
||||||
const matchingVendors = vendorAutoCompleteOptions.filter(
|
const matchingVendors = vendorAutoCompleteOptions.filter(
|
||||||
(v) => v.id === vendorId
|
(v) => v.id === vendorId
|
||||||
);
|
);
|
||||||
if (matchingVendors.length === 1) {
|
if (matchingVendors.length === 1) {
|
||||||
setDiscount(matchingVendors[0].discount);
|
setDiscount(matchingVendors[0].discount);
|
||||||
}
|
|
||||||
}
|
|
||||||
const jobId = form.getFieldValue("jobid");
|
|
||||||
if (jobId) {
|
|
||||||
loadLines({ variables: { id: jobId } });
|
|
||||||
if (form.getFieldValue("is_credit_memo") && vendorId && !billEdit) {
|
|
||||||
loadOutstandingReturns({
|
|
||||||
variables: {
|
|
||||||
jobId: jobId,
|
|
||||||
vendorId: vendorId,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (vendorId === bodyshop.inhousevendorid && !billEdit) {
|
|
||||||
loadInventory();
|
|
||||||
}
|
|
||||||
}, [
|
|
||||||
form,
|
|
||||||
billEdit,
|
|
||||||
loadOutstandingReturns,
|
|
||||||
loadInventory,
|
|
||||||
setDiscount,
|
|
||||||
vendorAutoCompleteOptions,
|
|
||||||
loadLines,
|
|
||||||
bodyshop.inhousevendorid,
|
|
||||||
]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<FormFieldsChanged form={form} />
|
|
||||||
<Form.Item
|
|
||||||
style={{ display: "none" }}
|
|
||||||
name="isinhouse"
|
|
||||||
valuePropName="checked"
|
|
||||||
>
|
|
||||||
<Switch />
|
|
||||||
</Form.Item>
|
|
||||||
<LayoutFormRow grow>
|
|
||||||
<Form.Item
|
|
||||||
name="jobid"
|
|
||||||
label={t("bills.fields.ro_number")}
|
|
||||||
rules={[
|
|
||||||
{
|
|
||||||
required: true,
|
|
||||||
//message: t("general.validation.required"),
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
<JobSearchSelect
|
|
||||||
disabled={billEdit || disabled}
|
|
||||||
convertedOnly
|
|
||||||
notExported={false}
|
|
||||||
onBlur={() => {
|
|
||||||
if (form.getFieldValue("jobid") !== null) {
|
|
||||||
loadLines({ variables: { id: form.getFieldValue("jobid") } });
|
|
||||||
if (form.getFieldValue("vendorid") !== null) {
|
|
||||||
loadOutstandingReturns({
|
|
||||||
variables: {
|
|
||||||
jobId: form.getFieldValue("jobid"),
|
|
||||||
vendorId: form.getFieldValue("vendorid"),
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</Form.Item>
|
|
||||||
<Form.Item
|
|
||||||
label={t("bills.fields.vendor")}
|
|
||||||
name="vendorid"
|
|
||||||
// style={{ display: billEdit ? "none" : null }}
|
|
||||||
rules={[
|
|
||||||
{
|
|
||||||
required: true,
|
|
||||||
//message: t("general.validation.required"),
|
|
||||||
},
|
|
||||||
({ getFieldValue }) => ({
|
|
||||||
validator(rule, value) {
|
|
||||||
if (
|
|
||||||
value &&
|
|
||||||
!getFieldValue(["isinhouse"]) &&
|
|
||||||
value === bodyshop.inhousevendorid
|
|
||||||
) {
|
|
||||||
return Promise.reject(t("bills.validation.manualinhouse"));
|
|
||||||
}
|
|
||||||
return Promise.resolve();
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
<VendorSearchSelect
|
|
||||||
disabled={disabled}
|
|
||||||
options={vendorAutoCompleteOptions}
|
|
||||||
preferredMake={preferredMake}
|
|
||||||
onSelect={handleVendorSelect}
|
|
||||||
/>
|
|
||||||
</Form.Item>
|
|
||||||
</LayoutFormRow>
|
|
||||||
{job &&
|
|
||||||
job.ious &&
|
|
||||||
job.ious.length > 0 &&
|
|
||||||
job.ious.map((iou) => (
|
|
||||||
<Alert
|
|
||||||
key={iou.id}
|
|
||||||
type="warning"
|
|
||||||
message={
|
|
||||||
<Space>
|
|
||||||
{t("bills.labels.iouexists")}
|
|
||||||
<Link
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
to={`/manage/jobs/${iou.id}?tab=repairdata`}
|
|
||||||
>
|
|
||||||
<Space>
|
|
||||||
{iou.ro_number}
|
|
||||||
<Icon component={MdOpenInNew} />
|
|
||||||
</Space>
|
|
||||||
</Link>
|
|
||||||
</Space>
|
|
||||||
}
|
}
|
||||||
/>
|
}
|
||||||
))}
|
const jobId = form.getFieldValue("jobid");
|
||||||
<LayoutFormRow>
|
if (jobId) {
|
||||||
<Form.Item
|
loadLines({variables: {id: jobId}});
|
||||||
label={t("bills.fields.invoice_number")}
|
if (form.getFieldValue("is_credit_memo") && vendorId && !billEdit) {
|
||||||
name="invoice_number"
|
loadOutstandingReturns({
|
||||||
validateTrigger="onBlur"
|
|
||||||
hasFeedback
|
|
||||||
rules={[
|
|
||||||
{
|
|
||||||
required: true,
|
|
||||||
//message: t("general.validation.required"),
|
|
||||||
},
|
|
||||||
({ getFieldValue }) => ({
|
|
||||||
async validator(rule, value) {
|
|
||||||
const vendorid = getFieldValue("vendorid");
|
|
||||||
if (vendorid && value) {
|
|
||||||
const response = await client.query({
|
|
||||||
query: CHECK_BILL_INVOICE_NUMBER,
|
|
||||||
variables: {
|
variables: {
|
||||||
invoice_number: value,
|
jobId: jobId,
|
||||||
vendorid: vendorid,
|
vendorId: vendorId,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
if (response.data.bills_aggregate.aggregate.count === 0) {
|
if (vendorId === bodyshop.inhousevendorid && !billEdit) {
|
||||||
return Promise.resolve();
|
loadInventory();
|
||||||
} else if (
|
}
|
||||||
response.data.bills_aggregate.nodes.length === 1 &&
|
}, [
|
||||||
response.data.bills_aggregate.nodes[0].id ===
|
form,
|
||||||
form.getFieldValue("id")
|
billEdit,
|
||||||
) {
|
loadOutstandingReturns,
|
||||||
return Promise.resolve();
|
loadInventory,
|
||||||
}
|
setDiscount,
|
||||||
return Promise.reject(
|
vendorAutoCompleteOptions,
|
||||||
t("bills.validation.unique_invoice_number")
|
loadLines,
|
||||||
);
|
bodyshop.inhousevendorid,
|
||||||
} else {
|
]);
|
||||||
return Promise.resolve();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
<Input disabled={disabled || disableInvNumber} />
|
|
||||||
</Form.Item>
|
|
||||||
<Form.Item
|
|
||||||
label={t("bills.fields.date")}
|
|
||||||
name="date"
|
|
||||||
rules={[
|
|
||||||
{
|
|
||||||
required: true,
|
|
||||||
//message: t("general.validation.required"),
|
|
||||||
},
|
|
||||||
({ getFieldValue }) => ({
|
|
||||||
validator(rule, value) {
|
|
||||||
if (
|
|
||||||
ClosingPeriod.treatment === "on" &&
|
|
||||||
bodyshop.accountingconfig.ClosingPeriod
|
|
||||||
) {
|
|
||||||
if (
|
|
||||||
moment(value)
|
|
||||||
.startOf("day")
|
|
||||||
.isSameOrAfter(
|
|
||||||
moment(
|
|
||||||
bodyshop.accountingconfig.ClosingPeriod[0]
|
|
||||||
).startOf("day")
|
|
||||||
) &&
|
|
||||||
moment(value)
|
|
||||||
.startOf("day")
|
|
||||||
.isSameOrBefore(
|
|
||||||
moment(
|
|
||||||
bodyshop.accountingconfig.ClosingPeriod[1]
|
|
||||||
).endOf("day")
|
|
||||||
)
|
|
||||||
) {
|
|
||||||
return Promise.resolve();
|
|
||||||
} else {
|
|
||||||
return Promise.reject(t("bills.validation.closingperiod"));
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
return Promise.resolve();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
<FormDatePicker disabled={disabled} />
|
|
||||||
</Form.Item>
|
|
||||||
<Form.Item
|
|
||||||
label={t("bills.fields.is_credit_memo")}
|
|
||||||
name="is_credit_memo"
|
|
||||||
valuePropName="checked"
|
|
||||||
rules={[
|
|
||||||
({ getFieldValue }) => ({
|
|
||||||
validator(rule, value) {
|
|
||||||
if (
|
|
||||||
value === true &&
|
|
||||||
getFieldValue("jobid") &&
|
|
||||||
getFieldValue("vendorid")
|
|
||||||
) {
|
|
||||||
//Removed as this would cause an additional reload when validating the form on submit and clear the values.
|
|
||||||
// loadOutstandingReturns({
|
|
||||||
// variables: {
|
|
||||||
// jobId: form.getFieldValue("jobid"),
|
|
||||||
// vendorId: form.getFieldValue("vendorid"),
|
|
||||||
// },
|
|
||||||
// });
|
|
||||||
}
|
|
||||||
|
|
||||||
if (
|
return (
|
||||||
!bodyshop.bill_allow_post_to_closed &&
|
<div>
|
||||||
job &&
|
<FormFieldsChanged form={form}/>
|
||||||
(job.status === bodyshop.md_ro_statuses.default_invoiced ||
|
<Form.Item
|
||||||
job.status === bodyshop.md_ro_statuses.default_exported ||
|
style={{display: "none"}}
|
||||||
job.status === bodyshop.md_ro_statuses.default_void) &&
|
name="isinhouse"
|
||||||
(value === false || !value)
|
valuePropName="checked"
|
||||||
) {
|
>
|
||||||
return Promise.reject(t("bills.labels.onlycmforinvoiced"));
|
<Switch/>
|
||||||
}
|
</Form.Item>
|
||||||
|
<LayoutFormRow grow>
|
||||||
|
<Form.Item
|
||||||
|
name="jobid"
|
||||||
|
label={t("bills.fields.ro_number")}
|
||||||
|
rules={[
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
//message: t("general.validation.required"),
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<JobSearchSelect
|
||||||
|
disabled={billEdit || disabled}
|
||||||
|
convertedOnly
|
||||||
|
notExported={false}
|
||||||
|
onBlur={() => {
|
||||||
|
if (form.getFieldValue("jobid") !== null) {
|
||||||
|
loadLines({variables: {id: form.getFieldValue("jobid")}});
|
||||||
|
if (form.getFieldValue("vendorid") !== null) {
|
||||||
|
loadOutstandingReturns({
|
||||||
|
variables: {
|
||||||
|
jobId: form.getFieldValue("jobid"),
|
||||||
|
vendorId: form.getFieldValue("vendorid"),
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item
|
||||||
|
label={t("bills.fields.vendor")}
|
||||||
|
name="vendorid"
|
||||||
|
// style={{ display: billEdit ? "none" : null }}
|
||||||
|
rules={[
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
//message: t("general.validation.required"),
|
||||||
|
},
|
||||||
|
({getFieldValue}) => ({
|
||||||
|
validator(rule, value) {
|
||||||
|
if (
|
||||||
|
value &&
|
||||||
|
!getFieldValue(["isinhouse"]) &&
|
||||||
|
value === bodyshop.inhousevendorid
|
||||||
|
) {
|
||||||
|
return Promise.reject(t("bills.validation.manualinhouse"));
|
||||||
|
}
|
||||||
|
return Promise.resolve();
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<VendorSearchSelect
|
||||||
|
disabled={disabled}
|
||||||
|
options={vendorAutoCompleteOptions}
|
||||||
|
preferredMake={preferredMake}
|
||||||
|
onSelect={handleVendorSelect}
|
||||||
|
/>
|
||||||
|
</Form.Item>
|
||||||
|
</LayoutFormRow>
|
||||||
|
{job &&
|
||||||
|
job.ious &&
|
||||||
|
job.ious.length > 0 &&
|
||||||
|
job.ious.map((iou) => (
|
||||||
|
<Alert
|
||||||
|
key={iou.id}
|
||||||
|
type="warning"
|
||||||
|
message={
|
||||||
|
<Space>
|
||||||
|
{t("bills.labels.iouexists")}
|
||||||
|
<Link
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
to={`/manage/jobs/${iou.id}?tab=repairdata`}
|
||||||
|
>
|
||||||
|
<Space>
|
||||||
|
{iou.ro_number}
|
||||||
|
<Icon component={MdOpenInNew}/>
|
||||||
|
</Space>
|
||||||
|
</Link>
|
||||||
|
</Space>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
<LayoutFormRow>
|
||||||
|
<Form.Item
|
||||||
|
label={t("bills.fields.invoice_number")}
|
||||||
|
name="invoice_number"
|
||||||
|
validateTrigger="onBlur"
|
||||||
|
hasFeedback
|
||||||
|
rules={[
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
//message: t("general.validation.required"),
|
||||||
|
},
|
||||||
|
({getFieldValue}) => ({
|
||||||
|
async validator(rule, value) {
|
||||||
|
const vendorid = getFieldValue("vendorid");
|
||||||
|
if (vendorid && value) {
|
||||||
|
const response = await client.query({
|
||||||
|
query: CHECK_BILL_INVOICE_NUMBER,
|
||||||
|
variables: {
|
||||||
|
invoice_number: value,
|
||||||
|
vendorid: vendorid,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
if (response.data.bills_aggregate.aggregate.count === 0) {
|
||||||
|
return Promise.resolve();
|
||||||
|
} else if (
|
||||||
|
response.data.bills_aggregate.nodes.length === 1 &&
|
||||||
|
response.data.bills_aggregate.nodes[0].id ===
|
||||||
|
form.getFieldValue("id")
|
||||||
|
) {
|
||||||
|
return Promise.resolve();
|
||||||
|
}
|
||||||
|
return Promise.reject(
|
||||||
|
t("bills.validation.unique_invoice_number")
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
return Promise.resolve();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<Input disabled={disabled || disableInvNumber}/>
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item
|
||||||
|
label={t("bills.fields.date")}
|
||||||
|
name="date"
|
||||||
|
rules={[
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
//message: t("general.validation.required"),
|
||||||
|
},
|
||||||
|
({getFieldValue}) => ({
|
||||||
|
validator(rule, value) {
|
||||||
|
if (
|
||||||
|
ClosingPeriod.treatment === "on" &&
|
||||||
|
bodyshop.accountingconfig.ClosingPeriod
|
||||||
|
) {
|
||||||
|
if (
|
||||||
|
dayjs(value)
|
||||||
|
.startOf("day")
|
||||||
|
.isSameOrAfter(
|
||||||
|
dayjs(
|
||||||
|
bodyshop.accountingconfig.ClosingPeriod[0]
|
||||||
|
).startOf("day")
|
||||||
|
) &&
|
||||||
|
dayjs(value)
|
||||||
|
.startOf("day")
|
||||||
|
.isSameOrBefore(
|
||||||
|
dayjs(
|
||||||
|
bodyshop.accountingconfig.ClosingPeriod[1]
|
||||||
|
).endOf("day")
|
||||||
|
)
|
||||||
|
) {
|
||||||
|
return Promise.resolve();
|
||||||
|
} else {
|
||||||
|
return Promise.reject(t("bills.validation.closingperiod"));
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
return Promise.resolve();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<FormDatePicker disabled={disabled}/>
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item
|
||||||
|
label={t("bills.fields.is_credit_memo")}
|
||||||
|
name="is_credit_memo"
|
||||||
|
valuePropName="checked"
|
||||||
|
rules={[
|
||||||
|
({getFieldValue}) => ({
|
||||||
|
validator(rule, value) {
|
||||||
|
if (
|
||||||
|
value === true &&
|
||||||
|
getFieldValue("jobid") &&
|
||||||
|
getFieldValue("vendorid")
|
||||||
|
) {
|
||||||
|
//Removed as this would cause an additional reload when validating the form on submit and clear the values.
|
||||||
|
// loadOutstandingReturns({
|
||||||
|
// variables: {
|
||||||
|
// jobId: form.getFieldValue("jobid"),
|
||||||
|
// vendorId: form.getFieldValue("vendorid"),
|
||||||
|
// },
|
||||||
|
// });
|
||||||
|
}
|
||||||
|
|
||||||
|
if (
|
||||||
|
!bodyshop.bill_allow_post_to_closed &&
|
||||||
|
job &&
|
||||||
|
(job.status === bodyshop.md_ro_statuses.default_invoiced ||
|
||||||
|
job.status === bodyshop.md_ro_statuses.default_exported ||
|
||||||
|
job.status === bodyshop.md_ro_statuses.default_void) &&
|
||||||
|
(value === false || !value)
|
||||||
|
) {
|
||||||
|
return Promise.reject(t("bills.labels.onlycmforinvoiced"));
|
||||||
|
}
|
||||||
|
|
||||||
return Promise.resolve();
|
return Promise.resolve();
|
||||||
},
|
},
|
||||||
@@ -401,15 +375,15 @@ export function BillFormComponent({
|
|||||||
>
|
>
|
||||||
<CurrencyInput min={0} />
|
<CurrencyInput min={0} />
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
{bodyshop.pbs_serialnumber || bodyshop.cdk_dealerid ? (
|
{bodyshop.pbs_serialnumber || bodyshop.cdk_dealerid ? (
|
||||||
<Form.Item
|
<Form.Item
|
||||||
span={2}
|
span={2}
|
||||||
label={t("bills.labels.federal_tax_exempt")}
|
label={t("bills.labels.federal_tax_exempt")}
|
||||||
name="federal_tax_exempt"
|
name="federal_tax_exempt"
|
||||||
>
|
>
|
||||||
<Switch onChange={handleFederalTaxExemptSwitchToggle} />
|
<Switch onChange={handleFederalTaxExemptSwitchToggle} />
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
) : null}
|
) : null}
|
||||||
<Form.Item shouldUpdate span={13}>
|
<Form.Item shouldUpdate span={13}>
|
||||||
{() => {
|
{() => {
|
||||||
const values = form.getFieldsValue([
|
const values = form.getFieldsValue([
|
||||||
@@ -486,55 +460,55 @@ export function BillFormComponent({
|
|||||||
</LayoutFormRow>
|
</LayoutFormRow>
|
||||||
<Divider orientation="left">{t("bills.labels.bill_lines")}</Divider>
|
<Divider orientation="left">{t("bills.labels.bill_lines")}</Divider>
|
||||||
|
|
||||||
{Extended_Bill_Posting.treatment === "on" ? (
|
{Extended_Bill_Posting.treatment === "on" ? (
|
||||||
<BillFormLinesExtended
|
<BillFormLinesExtended
|
||||||
lineData={lineData}
|
lineData={lineData}
|
||||||
discount={discount}
|
discount={discount}
|
||||||
form={form}
|
form={form}
|
||||||
responsibilityCenters={responsibilityCenters}
|
responsibilityCenters={responsibilityCenters}
|
||||||
disabled={disabled}
|
disabled={disabled}
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<BillFormLines
|
<BillFormLines
|
||||||
lineData={lineData}
|
lineData={lineData}
|
||||||
discount={discount}
|
discount={discount}
|
||||||
form={form}
|
form={form}
|
||||||
responsibilityCenters={responsibilityCenters}
|
responsibilityCenters={responsibilityCenters}
|
||||||
disabled={disabled}
|
disabled={disabled}
|
||||||
billEdit={billEdit}
|
billEdit={billEdit}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<Form.Item
|
<Form.Item
|
||||||
name="upload"
|
name="upload"
|
||||||
label="Upload"
|
label="Upload"
|
||||||
style={{ display: billEdit ? "none" : null }}
|
style={{display: billEdit ? "none" : null}}
|
||||||
valuePropName="fileList"
|
valuePropName="fileList"
|
||||||
getValueFromEvent={(e) => {
|
getValueFromEvent={(e) => {
|
||||||
if (Array.isArray(e)) {
|
if (Array.isArray(e)) {
|
||||||
return e;
|
return e;
|
||||||
}
|
}
|
||||||
return e && e.fileList;
|
return e && e.fileList;
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Upload.Dragger
|
<Upload.Dragger
|
||||||
multiple={true}
|
multiple={true}
|
||||||
name="logo"
|
name="logo"
|
||||||
beforeUpload={() => false}
|
beforeUpload={() => false}
|
||||||
listType="picture"
|
listType="picture"
|
||||||
>
|
>
|
||||||
<>
|
<>
|
||||||
<p className="ant-upload-drag-icon">
|
<p className="ant-upload-drag-icon">
|
||||||
<UploadOutlined />
|
<UploadOutlined/>
|
||||||
</p>
|
</p>
|
||||||
<p className="ant-upload-text">
|
<p className="ant-upload-text">
|
||||||
Click or drag files to this area to upload.
|
Click or drag files to this area to upload.
|
||||||
</p>
|
</p>
|
||||||
</>
|
</>
|
||||||
</Upload.Dragger>
|
</Upload.Dragger>
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default connect(mapStateToProps, mapDispatchToProps)(BillFormComponent);
|
export default connect(mapStateToProps, mapDispatchToProps)(BillFormComponent);
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import { useLazyQuery, useQuery } from "@apollo/client";
|
import { useLazyQuery, useQuery } from "@apollo/client";
|
||||||
import { useTreatments } from "@splitsoftware/splitio-react";
|
import {useSplitTreatments} from "@splitsoftware/splitio-react";
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import { connect } from "react-redux";
|
import { connect } from "react-redux";
|
||||||
import { createStructuredSelector } from "reselect";
|
import { createStructuredSelector } from "reselect";
|
||||||
@@ -23,11 +23,11 @@ export function BillFormContainer({
|
|||||||
disabled,
|
disabled,
|
||||||
disableInvNumber,
|
disableInvNumber,
|
||||||
}) {
|
}) {
|
||||||
const { Simple_Inventory } = useTreatments(
|
const { treatments: {Simple_Inventory} } = useSplitTreatments({
|
||||||
["Simple_Inventory"],
|
attributes: {},
|
||||||
{},
|
names: ["Simple_Inventory"],
|
||||||
bodyshop && bodyshop.imexshopid
|
splitKey: bodyshop && bodyshop.imexshopid,
|
||||||
);
|
});
|
||||||
|
|
||||||
const { data: VendorAutoCompleteData } = useQuery(
|
const { data: VendorAutoCompleteData } = useQuery(
|
||||||
SEARCH_VENDOR_AUTOCOMPLETE,
|
SEARCH_VENDOR_AUTOCOMPLETE,
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import { DeleteFilled, DollarCircleFilled } from "@ant-design/icons";
|
import { DeleteFilled, DollarCircleFilled } from "@ant-design/icons";
|
||||||
import { useTreatments } from "@splitsoftware/splitio-react";
|
import {useSplitTreatments} from "@splitsoftware/splitio-react";
|
||||||
import {
|
import {
|
||||||
Button,
|
Button,
|
||||||
Form,
|
Form,
|
||||||
@@ -41,11 +41,14 @@ export function BillEnterModalLinesComponent({
|
|||||||
}) {
|
}) {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
const { setFieldsValue, getFieldsValue, getFieldValue } = form;
|
const { setFieldsValue, getFieldsValue, getFieldValue } = form;
|
||||||
const { Simple_Inventory } = useTreatments(
|
|
||||||
["Simple_Inventory"],
|
const { treatments: {Simple_Inventory} } = useSplitTreatments({
|
||||||
{},
|
attributes: {},
|
||||||
bodyshop && bodyshop.imexshopid
|
names: ["Simple_Inventory"],
|
||||||
);
|
splitKey: bodyshop && bodyshop.imexshopid,
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
const columns = (remove) => {
|
const columns = (remove) => {
|
||||||
return [
|
return [
|
||||||
{
|
{
|
||||||
|
|||||||
@@ -15,7 +15,7 @@ const BillLineSearchSelect = (
|
|||||||
disabled={disabled}
|
disabled={disabled}
|
||||||
ref={ref}
|
ref={ref}
|
||||||
showSearch
|
showSearch
|
||||||
dropdownMatchSelectWidth={false}
|
popupMatchSelectWidth={false}
|
||||||
// optionFilterProp="line_desc"
|
// optionFilterProp="line_desc"
|
||||||
filterOption={(inputValue, option) => {
|
filterOption={(inputValue, option) => {
|
||||||
return (
|
return (
|
||||||
|
|||||||
@@ -2,7 +2,7 @@ import { FileAddFilled } from "@ant-design/icons";
|
|||||||
import { useMutation } from "@apollo/client";
|
import { useMutation } from "@apollo/client";
|
||||||
import { Button, notification, Tooltip } from "antd";
|
import { Button, notification, Tooltip } from "antd";
|
||||||
import { t } from "i18next";
|
import { t } from "i18next";
|
||||||
import moment from "moment";
|
import dayjs from "./../../utils/day";
|
||||||
import React, { useState } from "react";
|
import React, { useState } from "react";
|
||||||
import { connect } from "react-redux";
|
import { connect } from "react-redux";
|
||||||
import { createStructuredSelector } from "reselect";
|
import { createStructuredSelector } from "reselect";
|
||||||
@@ -36,7 +36,6 @@ export function BilllineAddInventory({
|
|||||||
}) {
|
}) {
|
||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
const { billid } = queryString.parse(useLocation().search);
|
const { billid } = queryString.parse(useLocation().search);
|
||||||
|
|
||||||
const [insertInventoryLine] = useMutation(INSERT_INVENTORY_AND_CREDIT);
|
const [insertInventoryLine] = useMutation(INSERT_INVENTORY_AND_CREDIT);
|
||||||
|
|
||||||
const addToInventory = async () => {
|
const addToInventory = async () => {
|
||||||
@@ -50,7 +49,7 @@ export function BilllineAddInventory({
|
|||||||
jobid: jobid,
|
jobid: jobid,
|
||||||
isinhouse: true,
|
isinhouse: true,
|
||||||
is_credit_memo: true,
|
is_credit_memo: true,
|
||||||
date: moment().format("YYYY-MM-DD"),
|
date: dayjs().format("YYYY-MM-DD"),
|
||||||
federal_tax_rate: bodyshop.bill_tax_rates.federal_tax_rate,
|
federal_tax_rate: bodyshop.bill_tax_rates.federal_tax_rate,
|
||||||
state_tax_rate: bodyshop.bill_tax_rates.state_tax_rate,
|
state_tax_rate: bodyshop.bill_tax_rates.state_tax_rate,
|
||||||
local_tax_rate: bodyshop.bill_tax_rates.local_tax_rate,
|
local_tax_rate: bodyshop.bill_tax_rates.local_tax_rate,
|
||||||
@@ -92,7 +91,7 @@ export function BilllineAddInventory({
|
|||||||
pol: {
|
pol: {
|
||||||
returnfrombill: billid,
|
returnfrombill: billid,
|
||||||
vendorid: bodyshop.inhousevendorid,
|
vendorid: bodyshop.inhousevendorid,
|
||||||
deliver_by: moment().format("YYYY-MM-DD"),
|
deliver_by: dayjs().format("YYYY-MM-DD"),
|
||||||
parts_order_lines: {
|
parts_order_lines: {
|
||||||
data: [
|
data: [
|
||||||
{
|
{
|
||||||
|
|||||||
@@ -2,7 +2,7 @@ import React, { useState } from "react";
|
|||||||
import { QUERY_ALL_VENDORS } from "../../graphql/vendors.queries";
|
import { QUERY_ALL_VENDORS } from "../../graphql/vendors.queries";
|
||||||
import { useQuery } from "@apollo/client";
|
import { useQuery } from "@apollo/client";
|
||||||
import queryString from "query-string";
|
import queryString from "query-string";
|
||||||
import { useHistory, useLocation } from "react-router-dom";
|
import { useLocation, useNavigate } from "react-router-dom";
|
||||||
import { Table, Input } from "antd";
|
import { Table, Input } from "antd";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
import { alphaSort } from "../../utils/sorters";
|
import { alphaSort } from "../../utils/sorters";
|
||||||
@@ -10,7 +10,7 @@ import AlertComponent from "../alert/alert.component";
|
|||||||
|
|
||||||
export default function BillsVendorsList() {
|
export default function BillsVendorsList() {
|
||||||
const search = queryString.parse(useLocation().search);
|
const search = queryString.parse(useLocation().search);
|
||||||
const history = useHistory();
|
const history = useNavigate();
|
||||||
|
|
||||||
const { loading, error, data } = useQuery(QUERY_ALL_VENDORS, {
|
const { loading, error, data } = useQuery(QUERY_ALL_VENDORS, {
|
||||||
fetchPolicy: "network-only",
|
fetchPolicy: "network-only",
|
||||||
|
|||||||
@@ -1,54 +1,64 @@
|
|||||||
import { HomeFilled } from "@ant-design/icons";
|
import {HomeFilled} from "@ant-design/icons";
|
||||||
import { Breadcrumb, Row, Col } from "antd";
|
import {Breadcrumb, Col, Row} from "antd";
|
||||||
import React from "react";
|
import React from "react";
|
||||||
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";
|
||||||
import { selectBreadcrumbs } from "../../redux/application/application.selectors";
|
import {selectBreadcrumbs} from "../../redux/application/application.selectors";
|
||||||
import { selectBodyshop } from "../../redux/user/user.selectors";
|
import {selectBodyshop} from "../../redux/user/user.selectors";
|
||||||
import GlobalSearch from "../global-search/global-search.component";
|
import GlobalSearch from "../global-search/global-search.component";
|
||||||
import GlobalSearchOs from "../global-search/global-search-os.component";
|
import GlobalSearchOs from "../global-search/global-search-os.component";
|
||||||
import "./breadcrumbs.styles.scss";
|
import "./breadcrumbs.styles.scss";
|
||||||
import { useTreatments } from "@splitsoftware/splitio-react";
|
import {useSplitTreatments} from "@splitsoftware/splitio-react";
|
||||||
|
|
||||||
const mapStateToProps = createStructuredSelector({
|
const mapStateToProps = createStructuredSelector({
|
||||||
breadcrumbs: selectBreadcrumbs,
|
breadcrumbs: selectBreadcrumbs,
|
||||||
bodyshop: selectBodyshop,
|
bodyshop: selectBodyshop,
|
||||||
});
|
});
|
||||||
|
|
||||||
export function BreadCrumbs({ breadcrumbs, bodyshop }) {
|
export function BreadCrumbs({breadcrumbs, bodyshop}) {
|
||||||
const { OpenSearch } = useTreatments(
|
|
||||||
["OpenSearch"],
|
|
||||||
{},
|
|
||||||
bodyshop && bodyshop.imexshopid
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
const {treatments: {OpenSearch}} = useSplitTreatments({
|
||||||
<Row className="breadcrumb-container">
|
attributes: {},
|
||||||
<Col xs={24} sm={24} md={16}>
|
names: ["OpenSearch"],
|
||||||
<Breadcrumb separator=">">
|
splitKey: bodyshop && bodyshop.imexshopid,
|
||||||
<Breadcrumb.Item>
|
});
|
||||||
<Link to={`/manage`}>
|
// TODO - Client Update - Technically key is not doing anything here
|
||||||
<HomeFilled />{" "}
|
return (
|
||||||
{(bodyshop && bodyshop.shopname && `(${bodyshop.shopname})`) ||
|
<Row className="breadcrumb-container">
|
||||||
""}
|
<Col xs={24} sm={24} md={16}>
|
||||||
</Link>
|
<Breadcrumb
|
||||||
</Breadcrumb.Item>
|
separator=">"
|
||||||
{breadcrumbs.map((item) =>
|
items={[
|
||||||
item.link ? (
|
{
|
||||||
<Breadcrumb.Item key={item.label}>
|
key: "home",
|
||||||
<Link to={item.link}>{item.label} </Link>
|
title: (
|
||||||
</Breadcrumb.Item>
|
<Link to={`/manage/`}>
|
||||||
) : (
|
<HomeFilled/>{" "}
|
||||||
<Breadcrumb.Item key={item.label}>{item.label}</Breadcrumb.Item>
|
{(bodyshop && bodyshop.shopname && `(${bodyshop.shopname})`) ||
|
||||||
)
|
""}
|
||||||
)}
|
</Link>
|
||||||
</Breadcrumb>
|
),
|
||||||
</Col>
|
},
|
||||||
<Col xs={24} sm={24} md={8}>
|
...breadcrumbs.map((item) =>
|
||||||
{OpenSearch.treatment === "on" ? <GlobalSearchOs /> : <GlobalSearch />}
|
item.link
|
||||||
</Col>
|
? {
|
||||||
</Row>
|
key: item.label,
|
||||||
);
|
title: <Link to={item.link}>{item.label}</Link>,
|
||||||
|
}
|
||||||
|
: {
|
||||||
|
key: item.label,
|
||||||
|
title: item.label,
|
||||||
|
}
|
||||||
|
),
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</Col>
|
||||||
|
<Col xs={24} sm={24} md={8}>
|
||||||
|
{OpenSearch.treatment === "on" ? <GlobalSearchOs/> : <GlobalSearch/>}
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default connect(mapStateToProps, null)(BreadCrumbs);
|
export default connect(mapStateToProps, null)(BreadCrumbs);
|
||||||
|
|||||||
@@ -70,7 +70,7 @@ export function ContractsFindModalContainer({
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<Modal
|
<Modal
|
||||||
visible={visible}
|
open={visible}
|
||||||
width="70%"
|
width="70%"
|
||||||
title={t("payments.labels.findermodal")}
|
title={t("payments.labels.findermodal")}
|
||||||
onCancel={() => toggleModalVisible()}
|
onCancel={() => toggleModalVisible()}
|
||||||
|
|||||||
@@ -38,7 +38,7 @@ export default function CABCpvrtCalculator({ disabled, form }) {
|
|||||||
<Popover
|
<Popover
|
||||||
destroyTooltipOnHide
|
destroyTooltipOnHide
|
||||||
content={popContent}
|
content={popContent}
|
||||||
visible={visibility}
|
open={visibility}
|
||||||
disabled={disabled}
|
disabled={disabled}
|
||||||
>
|
>
|
||||||
<Button disabled={disabled} onClick={() => setVisibility(true)}>
|
<Button disabled={disabled} onClick={() => setVisibility(true)}>
|
||||||
|
|||||||
@@ -13,7 +13,7 @@ import {
|
|||||||
notification,
|
notification,
|
||||||
} from "antd";
|
} from "antd";
|
||||||
import axios from "axios";
|
import axios from "axios";
|
||||||
import moment from "moment";
|
import dayjs from "../../utils/day";
|
||||||
import React, { useState } from "react";
|
import React, { useState } from "react";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
import { connect } from "react-redux";
|
import { connect } from "react-redux";
|
||||||
@@ -117,7 +117,7 @@ const CardPaymentModalComponent = ({
|
|||||||
payer: t("payments.labels.customer"),
|
payer: t("payments.labels.customer"),
|
||||||
type: values.paymentResponse.cardbrand,
|
type: values.paymentResponse.cardbrand,
|
||||||
jobid: payment.jobid,
|
jobid: payment.jobid,
|
||||||
date: moment(Date.now()),
|
date: dayjs(Date.now()),
|
||||||
payment_responses: {
|
payment_responses: {
|
||||||
data: [
|
data: [
|
||||||
{
|
{
|
||||||
|
|||||||
@@ -88,8 +88,8 @@ export function ChatMediaSelector({
|
|||||||
}
|
}
|
||||||
title={t("messaging.labels.selectmedia")}
|
title={t("messaging.labels.selectmedia")}
|
||||||
trigger="click"
|
trigger="click"
|
||||||
visible={visible}
|
open={visible}
|
||||||
onVisibleChange={handleVisibleChange}
|
onOpenChange={handleVisibleChange}
|
||||||
>
|
>
|
||||||
<Badge count={selectedMedia.filter((s) => s.isSelected).length}>
|
<Badge count={selectedMedia.filter((s) => s.isSelected).length}>
|
||||||
<PictureFilled style={{ margin: "0 .5rem" }} />
|
<PictureFilled style={{ margin: "0 .5rem" }} />
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
import Icon from "@ant-design/icons";
|
import Icon from "@ant-design/icons";
|
||||||
import { Tooltip } from "antd";
|
import { Tooltip } from "antd";
|
||||||
import i18n from "i18next";
|
import i18n from "i18next";
|
||||||
import moment from "moment";
|
import dayjs from "../../utils/day";
|
||||||
import React, { useEffect, useRef } from "react";
|
import React, { useEffect, useRef } from "react";
|
||||||
import { MdDone, MdDoneAll } from "react-icons/md";
|
import { MdDone, MdDoneAll } from "react-icons/md";
|
||||||
import {
|
import {
|
||||||
@@ -52,7 +52,7 @@ export default function ChatMessageListComponent({ messages }) {
|
|||||||
<div style={{ fontSize: 10 }}>
|
<div style={{ fontSize: 10 }}>
|
||||||
{i18n.t("messaging.labels.sentby", {
|
{i18n.t("messaging.labels.sentby", {
|
||||||
by: messages[index].userid,
|
by: messages[index].userid,
|
||||||
time: moment(messages[index].created_at).format(
|
time: dayjs(messages[index].created_at).format(
|
||||||
"MM/DD/YYYY @ hh:mm a"
|
"MM/DD/YYYY @ hh:mm a"
|
||||||
),
|
),
|
||||||
})}
|
})}
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import { PlusCircleOutlined } from "@ant-design/icons";
|
import { PlusCircleOutlined } from "@ant-design/icons";
|
||||||
import { Dropdown, Menu } from "antd";
|
import { Dropdown } from "antd";
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import { connect } from "react-redux";
|
import { connect } from "react-redux";
|
||||||
import { createStructuredSelector } from "reselect";
|
import { createStructuredSelector } from "reselect";
|
||||||
@@ -16,19 +16,16 @@ const mapDispatchToProps = (dispatch) => ({
|
|||||||
});
|
});
|
||||||
|
|
||||||
export function ChatPresetsComponent({ bodyshop, setMessage, className }) {
|
export function ChatPresetsComponent({ bodyshop, setMessage, className }) {
|
||||||
const menu = (
|
|
||||||
<Menu>
|
const items = bodyshop.md_messaging_presets.map((i, idx) => ({
|
||||||
{bodyshop.md_messaging_presets.map((i, idx) => (
|
key: idx,
|
||||||
<Menu.Item onClick={() => setMessage(i.text)} key={idx}>
|
label: (i.label),
|
||||||
{i.label}
|
onClick: () => setMessage(i.text),
|
||||||
</Menu.Item>
|
}));
|
||||||
))}
|
|
||||||
</Menu>
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={className}>
|
<div className={className}>
|
||||||
<Dropdown trigger={["click"]} overlay={menu}>
|
<Dropdown trigger={["click"]} menu={{items}}>
|
||||||
<PlusCircleOutlined />
|
<PlusCircleOutlined />
|
||||||
</Dropdown>
|
</Dropdown>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -16,42 +16,28 @@ const mapDispatchToProps = (dispatch) => ({
|
|||||||
export function ChatPrintButton({ conversation }) {
|
export function ChatPrintButton({ conversation }) {
|
||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
|
|
||||||
|
const generateDocument = (type) => {
|
||||||
|
setLoading(true);
|
||||||
|
GenerateDocument(
|
||||||
|
{
|
||||||
|
name: TemplateList("messaging").conversation_list.key,
|
||||||
|
variables: { id: conversation.id },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
subject: TemplateList("messaging").conversation_list.subject,
|
||||||
|
},
|
||||||
|
type,
|
||||||
|
conversation.id
|
||||||
|
).catch(e => {
|
||||||
|
console.warn('Something went wrong generating a document.');
|
||||||
|
});
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Space wrap>
|
<Space wrap>
|
||||||
<PrinterOutlined
|
<PrinterOutlined onClick={() => generateDocument('p')}/>
|
||||||
onClick={() => {
|
<MailOutlined onClick={() => generateDocument('e')}/>
|
||||||
setLoading(true);
|
|
||||||
GenerateDocument(
|
|
||||||
{
|
|
||||||
name: TemplateList("messaging").conversation_list.key,
|
|
||||||
variables: { id: conversation.id },
|
|
||||||
},
|
|
||||||
{
|
|
||||||
subject: TemplateList("messaging").conversation_list.subject,
|
|
||||||
},
|
|
||||||
"p",
|
|
||||||
conversation.id
|
|
||||||
);
|
|
||||||
setLoading(false);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<MailOutlined
|
|
||||||
onClick={() => {
|
|
||||||
setLoading(true);
|
|
||||||
GenerateDocument(
|
|
||||||
{
|
|
||||||
name: TemplateList("messaging").conversation_list.key,
|
|
||||||
variables: { id: conversation.id },
|
|
||||||
},
|
|
||||||
{
|
|
||||||
subject: TemplateList("messaging").conversation_list.subject,
|
|
||||||
},
|
|
||||||
"e",
|
|
||||||
conversation.id
|
|
||||||
);
|
|
||||||
setLoading(false);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
{loading && <Spin />}
|
{loading && <Spin />}
|
||||||
</Space>
|
</Space>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -19,7 +19,7 @@ export default function ChatTagRoComponent({
|
|||||||
<Select
|
<Select
|
||||||
showSearch
|
showSearch
|
||||||
autoFocus
|
autoFocus
|
||||||
dropdownMatchSelectWidth
|
popupMatchSelectWidth
|
||||||
placeholder={t("general.labels.search")}
|
placeholder={t("general.labels.search")}
|
||||||
filterOption={false}
|
filterOption={false}
|
||||||
onSearch={handleSearch}
|
onSearch={handleSearch}
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import { useQuery } from "@apollo/client";
|
import { useQuery } from "@apollo/client";
|
||||||
import moment from "moment";
|
import dayjs from "../../utils/day";
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import { QUERY_AVAILABLE_CC } from "../../graphql/courtesy-car.queries";
|
import { QUERY_AVAILABLE_CC } from "../../graphql/courtesy-car.queries";
|
||||||
import AlertComponent from "../alert/alert.component";
|
import AlertComponent from "../alert/alert.component";
|
||||||
@@ -7,7 +7,7 @@ import ContractCarsComponent from "./contract-cars.component";
|
|||||||
|
|
||||||
export default function ContractCarsContainer({ selectedCarState, form }) {
|
export default function ContractCarsContainer({ selectedCarState, form }) {
|
||||||
const { loading, error, data } = useQuery(QUERY_AVAILABLE_CC, {
|
const { loading, error, data } = useQuery(QUERY_AVAILABLE_CC, {
|
||||||
variables: { today: moment().format("YYYY-MM-DD") },
|
variables: { today: dayjs().format("YYYY-MM-DD") },
|
||||||
fetchPolicy: "network-only",
|
fetchPolicy: "network-only",
|
||||||
nextFetchPolicy: "network-only",
|
nextFetchPolicy: "network-only",
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -10,11 +10,11 @@ import {
|
|||||||
Space,
|
Space,
|
||||||
} from "antd";
|
} from "antd";
|
||||||
import axios from "axios";
|
import axios from "axios";
|
||||||
import moment from "moment";
|
import dayjs from "../../utils/day";
|
||||||
import React, { useState } from "react";
|
import React, { useState } from "react";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
import { connect } from "react-redux";
|
import { connect } from "react-redux";
|
||||||
import { useHistory } from "react-router-dom";
|
import { useNavigate } from "react-router-dom";
|
||||||
import { createStructuredSelector } from "reselect";
|
import { createStructuredSelector } from "reselect";
|
||||||
import { INSERT_NEW_JOB } from "../../graphql/jobs.queries";
|
import { INSERT_NEW_JOB } from "../../graphql/jobs.queries";
|
||||||
import {
|
import {
|
||||||
@@ -41,14 +41,14 @@ export function ContractConvertToRo({
|
|||||||
const [visible, setVisible] = useState(false);
|
const [visible, setVisible] = useState(false);
|
||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
const [insertJob] = useMutation(INSERT_NEW_JOB);
|
const [insertJob] = useMutation(INSERT_NEW_JOB);
|
||||||
const history = useHistory();
|
const history = useNavigate();
|
||||||
|
|
||||||
const handleFinish = async (values) => {
|
const handleFinish = async (values) => {
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
|
|
||||||
const contractLength = moment(contract.actualreturn).diff(
|
const contractLength = dayjs(contract.actualreturn).diff(
|
||||||
moment(contract.start),
|
dayjs(contract.start),
|
||||||
"days"
|
"day"
|
||||||
);
|
);
|
||||||
const billingLines = [];
|
const billingLines = [];
|
||||||
if (contractLength > 0)
|
if (contractLength > 0)
|
||||||
@@ -390,7 +390,7 @@ export function ContractConvertToRo({
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<Popover content={popContent} visible={visible}>
|
<Popover content={popContent} open={visible}>
|
||||||
<Button
|
<Button
|
||||||
onClick={() => setVisible(true)}
|
onClick={() => setVisible(true)}
|
||||||
loading={loading}
|
loading={loading}
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
import { WarningFilled } from "@ant-design/icons";
|
import { WarningFilled } from "@ant-design/icons";
|
||||||
import { Form, Input, InputNumber, Space } from "antd";
|
import { Form, Input, InputNumber, Space } from "antd";
|
||||||
import moment from "moment";
|
import dayjs from "../../utils/day";
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
import { DateFormatter } from "../../utils/DateFormatter";
|
import { DateFormatter } from "../../utils/DateFormatter";
|
||||||
@@ -96,8 +96,8 @@ export default function ContractFormComponent({
|
|||||||
const dueForService =
|
const dueForService =
|
||||||
selectedCar &&
|
selectedCar &&
|
||||||
selectedCar.nextservicedate &&
|
selectedCar.nextservicedate &&
|
||||||
moment(selectedCar.nextservicedate).isBefore(
|
dayjs(selectedCar.nextservicedate).isBefore(
|
||||||
moment(form.getFieldValue("scheduledreturn"))
|
dayjs(form.getFieldValue("scheduledreturn"))
|
||||||
);
|
);
|
||||||
|
|
||||||
if (mileageOver || dueForService)
|
if (mileageOver || dueForService)
|
||||||
@@ -190,9 +190,9 @@ export default function ContractFormComponent({
|
|||||||
}
|
}
|
||||||
>
|
>
|
||||||
{() => {
|
{() => {
|
||||||
const dlExpiresBeforeReturn = moment(
|
const dlExpiresBeforeReturn = dayjs(
|
||||||
form.getFieldValue("driver_dlexpiry")
|
form.getFieldValue("driver_dlexpiry")
|
||||||
).isBefore(moment(form.getFieldValue("scheduledreturn")));
|
).isBefore(dayjs(form.getFieldValue("scheduledreturn")));
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import { Button, Input, Modal, Typography } from "antd";
|
import { Button, Input, Modal, Typography } from "antd";
|
||||||
import moment from "moment";
|
import dayjs from "../../utils/day";
|
||||||
import React, { useState } from "react";
|
import React, { useState } from "react";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
import aamva from "../../utils/aamva";
|
import aamva from "../../utils/aamva";
|
||||||
@@ -26,8 +26,8 @@ export default function ContractLicenseDecodeButton({ form }) {
|
|||||||
|
|
||||||
const values = {
|
const values = {
|
||||||
driver_dlnumber: decodedBarcode.dl,
|
driver_dlnumber: decodedBarcode.dl,
|
||||||
driver_dlexpiry: moment(
|
driver_dlexpiry: dayjs(
|
||||||
`20${decodedBarcode.expiration_date}${moment(
|
`20${decodedBarcode.expiration_date}${dayjs(
|
||||||
decodedBarcode.birthday
|
decodedBarcode.birthday
|
||||||
).format("DD")}`
|
).format("DD")}`
|
||||||
),
|
),
|
||||||
@@ -38,7 +38,7 @@ export default function ContractLicenseDecodeButton({ form }) {
|
|||||||
driver_city: decodedBarcode.city,
|
driver_city: decodedBarcode.city,
|
||||||
driver_state: decodedBarcode.state,
|
driver_state: decodedBarcode.state,
|
||||||
driver_zip: decodedBarcode.postal_code,
|
driver_zip: decodedBarcode.postal_code,
|
||||||
driver_dob: moment(decodedBarcode.birthday),
|
driver_dob: dayjs(decodedBarcode.birthday),
|
||||||
};
|
};
|
||||||
|
|
||||||
form.setFieldsValue(values);
|
form.setFieldsValue(values);
|
||||||
@@ -55,7 +55,7 @@ export default function ContractLicenseDecodeButton({ form }) {
|
|||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<Modal
|
<Modal
|
||||||
visible={modalVisible}
|
open={modalVisible}
|
||||||
okText={t("contracts.actions.senddltoform")}
|
okText={t("contracts.actions.senddltoform")}
|
||||||
onOk={handleInsertForm}
|
onOk={handleInsertForm}
|
||||||
okButtonProps={{ disabled: !!!decodedBarcode }}
|
okButtonProps={{ disabled: !!!decodedBarcode }}
|
||||||
@@ -94,14 +94,14 @@ export default function ContractLicenseDecodeButton({ form }) {
|
|||||||
{decodedBarcode.address}
|
{decodedBarcode.address}
|
||||||
</DataLabel>
|
</DataLabel>
|
||||||
<DataLabel label={t("contracts.fields.driver_dlexpiry")}>
|
<DataLabel label={t("contracts.fields.driver_dlexpiry")}>
|
||||||
{moment(
|
{dayjs(
|
||||||
`20${decodedBarcode.expiration_date}${moment(
|
`20${decodedBarcode.expiration_date}${dayjs(
|
||||||
decodedBarcode.birthday
|
decodedBarcode.birthday
|
||||||
).format("DD")}`
|
).format("DD")}`
|
||||||
).format("MM/DD/YYYY")}
|
).format("MM/DD/YYYY")}
|
||||||
</DataLabel>
|
</DataLabel>
|
||||||
<DataLabel label={t("contracts.fields.driver_dob")}>
|
<DataLabel label={t("contracts.fields.driver_dob")}>
|
||||||
{moment(decodedBarcode.birthday).format("MM/DD/YYYY")}
|
{dayjs(decodedBarcode.birthday).format("MM/DD/YYYY")}
|
||||||
</DataLabel>
|
</DataLabel>
|
||||||
<div>
|
<div>
|
||||||
<Typography.Title level={4}>
|
<Typography.Title level={4}>
|
||||||
|
|||||||
@@ -59,7 +59,7 @@ export function ContractsFindModalContainer({
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<Modal
|
<Modal
|
||||||
visible={visible}
|
open={visible}
|
||||||
width="70%"
|
width="70%"
|
||||||
title={t("contracts.labels.findermodal")}
|
title={t("contracts.labels.findermodal")}
|
||||||
onCancel={() => toggleModalVisible()}
|
onCancel={() => toggleModalVisible()}
|
||||||
|
|||||||
@@ -3,13 +3,13 @@ import { Button, Card, Input, Space, Table, Typography } from "antd";
|
|||||||
import queryString from "query-string";
|
import queryString from "query-string";
|
||||||
import React, { useState } from "react";
|
import React, { useState } from "react";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
import { Link, useHistory, useLocation } from "react-router-dom";
|
import { Link, useNavigate, useLocation } from "react-router-dom";
|
||||||
import { setModalContext } from "../../redux/modals/modals.actions";
|
import { setModalContext } from "../../redux/modals/modals.actions";
|
||||||
import { DateTimeFormatter } from "../../utils/DateFormatter";
|
import { DateTimeFormatter } from "../../utils/DateFormatter";
|
||||||
import { alphaSort } from "../../utils/sorters";
|
import { alphaSort } from "../../utils/sorters";
|
||||||
import ContractsFindModalContainer from "../contracts-find-modal/contracts-find-modal.container";
|
import ContractsFindModalContainer from "../contracts-find-modal/contracts-find-modal.container";
|
||||||
|
|
||||||
import moment from "moment";
|
import dayjs from "../../utils/day";
|
||||||
import { connect } from "react-redux";
|
import { connect } from "react-redux";
|
||||||
import { createStructuredSelector } from "reselect";
|
import { createStructuredSelector } from "reselect";
|
||||||
import { selectBodyshop } from "../../redux/user/user.selectors";
|
import { selectBodyshop } from "../../redux/user/user.selectors";
|
||||||
@@ -39,7 +39,7 @@ export function ContractsList({
|
|||||||
sortedInfo: {},
|
sortedInfo: {},
|
||||||
filteredInfo: { text: "" },
|
filteredInfo: { text: "" },
|
||||||
});
|
});
|
||||||
const history = useHistory();
|
const history = useNavigate();
|
||||||
const search = queryString.parse(useLocation().search);
|
const search = queryString.parse(useLocation().search);
|
||||||
const { page } = search;
|
const { page } = search;
|
||||||
|
|
||||||
@@ -152,8 +152,8 @@ export function ContractsList({
|
|||||||
render: (text, record) =>
|
render: (text, record) =>
|
||||||
(record.actualreturn &&
|
(record.actualreturn &&
|
||||||
record.start &&
|
record.start &&
|
||||||
`${moment(record.actualreturn)
|
`${dayjs(record.actualreturn)
|
||||||
.diff(moment(record.start), "days", true)
|
.diff(dayjs(record.start), "day", true)
|
||||||
.toFixed(1)} days`) ||
|
.toFixed(1)} days`) ||
|
||||||
"",
|
"",
|
||||||
},
|
},
|
||||||
@@ -164,7 +164,7 @@ export function ContractsList({
|
|||||||
search.page = pagination.current;
|
search.page = pagination.current;
|
||||||
search.sortcolumn = sorter.columnKey;
|
search.sortcolumn = sorter.columnKey;
|
||||||
search.sortorder = sorter.order;
|
search.sortorder = sorter.order;
|
||||||
history.push({ search: queryString.stringify(search) });
|
history({ search: queryString.stringify(search) });
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@@ -179,7 +179,7 @@ export function ContractsList({
|
|||||||
<Button
|
<Button
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
delete search.search;
|
delete search.search;
|
||||||
history.push({ search: queryString.stringify(search) });
|
history({ search: queryString.stringify(search) });
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{t("general.actions.clear")}
|
{t("general.actions.clear")}
|
||||||
@@ -196,7 +196,7 @@ export function ContractsList({
|
|||||||
placeholder={search.searh || t("general.labels.search")}
|
placeholder={search.searh || t("general.labels.search")}
|
||||||
onSearch={(value) => {
|
onSearch={(value) => {
|
||||||
search.search = value;
|
search.search = value;
|
||||||
history.push({ search: queryString.stringify(search) });
|
history({ search: queryString.stringify(search) });
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</Space>
|
</Space>
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import { DownOutlined } from "@ant-design/icons";
|
import { DownOutlined } from "@ant-design/icons";
|
||||||
import { Dropdown, Menu } from "antd";
|
import { Dropdown } from "antd";
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
import { connect } from "react-redux";
|
import { connect } from "react-redux";
|
||||||
@@ -18,20 +18,16 @@ export function ContractsRatesChangeButton({ disabled, form, bodyshop }) {
|
|||||||
form.setFieldsValue(rate);
|
form.setFieldsValue(rate);
|
||||||
};
|
};
|
||||||
|
|
||||||
const menu = (
|
const menuItems = bodyshop.md_ccc_rates.map((i, idx) => ({
|
||||||
<div>
|
key: idx,
|
||||||
<Menu onClick={handleClick}>
|
label: i.label,
|
||||||
{bodyshop.md_ccc_rates.map((rate, idx) => (
|
value: i,
|
||||||
<Menu.Item value={rate} key={idx}>
|
}));
|
||||||
{rate.label}
|
|
||||||
</Menu.Item>
|
const menu = {items: menuItems, onClick: handleClick};
|
||||||
))}
|
|
||||||
</Menu>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Dropdown overlay={menu} disabled={disabled}>
|
<Dropdown menu={menu} disabled={disabled}>
|
||||||
<a
|
<a
|
||||||
className="ant-dropdown-link"
|
className="ant-dropdown-link"
|
||||||
href=" #"
|
href=" #"
|
||||||
|
|||||||
@@ -2,7 +2,7 @@ import { Card, Table } from "antd";
|
|||||||
import queryString from "query-string";
|
import queryString from "query-string";
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
import { Link, useHistory, useLocation } from "react-router-dom";
|
import { Link, useLocation, useNavigate } from "react-router-dom";
|
||||||
import { DateFormatter } from "../../utils/DateFormatter";
|
import { DateFormatter } from "../../utils/DateFormatter";
|
||||||
import { alphaSort } from "../../utils/sorters";
|
import { alphaSort } from "../../utils/sorters";
|
||||||
import {pageLimit} from "../../utils/config";
|
import {pageLimit} from "../../utils/config";
|
||||||
@@ -11,9 +11,9 @@ export default function CourtesyCarContractListComponent({
|
|||||||
contracts,
|
contracts,
|
||||||
totalContracts,
|
totalContracts,
|
||||||
}) {
|
}) {
|
||||||
const search = queryString.parse(useLocation().search);
|
const search =queryString.parse(useLocation().search);
|
||||||
const { page, sortcolumn, sortorder } = search;
|
const { page, sortcolumn, sortorder } = search;
|
||||||
const history = useHistory();
|
const history = useNavigate();
|
||||||
|
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
|
|
||||||
@@ -81,7 +81,7 @@ export default function CourtesyCarContractListComponent({
|
|||||||
search.page = pagination.current;
|
search.page = pagination.current;
|
||||||
search.sortcolumn = sorter.columnKey;
|
search.sortcolumn = sorter.columnKey;
|
||||||
search.sortorder = sorter.order;
|
search.sortorder = sorter.order;
|
||||||
history.push({ search: queryString.stringify(search) });
|
history({ search: queryString.stringify(search) });
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|||||||
@@ -1,7 +1,8 @@
|
|||||||
import { WarningFilled } from "@ant-design/icons";
|
import { WarningFilled } from "@ant-design/icons";
|
||||||
import { useApolloClient } from "@apollo/client";
|
import { useApolloClient } from "@apollo/client";
|
||||||
import { Button, Form, Input, InputNumber, PageHeader, Space } from "antd";
|
import { Button, Form, Input, InputNumber, Space } from "antd";
|
||||||
import moment from "moment";
|
import {PageHeader} from "@ant-design/pro-layout";
|
||||||
|
import dayjs from "../../utils/day";
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
import { CHECK_CC_FLEET_NUMBER } from "../../graphql/courtesy-car.queries";
|
import { CHECK_CC_FLEET_NUMBER } from "../../graphql/courtesy-car.queries";
|
||||||
@@ -265,7 +266,7 @@ export default function CourtesyCarCreateFormComponent({ form, saveLoading }) {
|
|||||||
const nextservicedate = form.getFieldValue("nextservicedate");
|
const nextservicedate = form.getFieldValue("nextservicedate");
|
||||||
const dueForService =
|
const dueForService =
|
||||||
nextservicedate &&
|
nextservicedate &&
|
||||||
moment(nextservicedate).endOf("day").isSameOrBefore(moment());
|
dayjs(nextservicedate).endOf("day").isSameOrBefore(dayjs());
|
||||||
|
|
||||||
if (dueForService)
|
if (dueForService)
|
||||||
return (
|
return (
|
||||||
@@ -306,7 +307,7 @@ export default function CourtesyCarCreateFormComponent({ form, saveLoading }) {
|
|||||||
const expires = form.getFieldValue("registrationexpires");
|
const expires = form.getFieldValue("registrationexpires");
|
||||||
|
|
||||||
const dateover =
|
const dateover =
|
||||||
expires && moment(expires).endOf("day").isBefore(moment());
|
expires && dayjs(expires).endOf("day").isBefore(dayjs());
|
||||||
|
|
||||||
if (dateover)
|
if (dateover)
|
||||||
return (
|
return (
|
||||||
@@ -342,7 +343,7 @@ export default function CourtesyCarCreateFormComponent({ form, saveLoading }) {
|
|||||||
const expires = form.getFieldValue("insuranceexpires");
|
const expires = form.getFieldValue("insuranceexpires");
|
||||||
|
|
||||||
const dateover =
|
const dateover =
|
||||||
expires && moment(expires).endOf("day").isBefore(moment());
|
expires && dayjs(expires).endOf("day").isBefore(dayjs());
|
||||||
|
|
||||||
if (dateover)
|
if (dateover)
|
||||||
return (
|
return (
|
||||||
|
|||||||
@@ -7,7 +7,7 @@ import { toggleModalVisible } from "../../redux/modals/modals.actions";
|
|||||||
import { selectCourtesyCarReturn } from "../../redux/modals/modals.selectors";
|
import { selectCourtesyCarReturn } from "../../redux/modals/modals.selectors";
|
||||||
import { selectBodyshop } from "../../redux/user/user.selectors";
|
import { selectBodyshop } from "../../redux/user/user.selectors";
|
||||||
import CourtesyCarReturnModalComponent from "./courtesy-car-return-modal.component";
|
import CourtesyCarReturnModalComponent from "./courtesy-car-return-modal.component";
|
||||||
import moment from "moment";
|
import dayjs from "../../utils/day";
|
||||||
import { RETURN_CONTRACT } from "../../graphql/cccontracts.queries";
|
import { RETURN_CONTRACT } from "../../graphql/cccontracts.queries";
|
||||||
import { useMutation } from "@apollo/client";
|
import { useMutation } from "@apollo/client";
|
||||||
|
|
||||||
@@ -64,7 +64,7 @@ export function CCReturnModalContainer({
|
|||||||
return (
|
return (
|
||||||
<Modal
|
<Modal
|
||||||
title={t("courtesycars.labels.return")}
|
title={t("courtesycars.labels.return")}
|
||||||
visible={visible}
|
open={visible}
|
||||||
onCancel={() => toggleModalVisible()}
|
onCancel={() => toggleModalVisible()}
|
||||||
width={"90%"}
|
width={"90%"}
|
||||||
okText={t("general.actions.save")}
|
okText={t("general.actions.save")}
|
||||||
@@ -74,7 +74,7 @@ export function CCReturnModalContainer({
|
|||||||
<Form
|
<Form
|
||||||
form={form}
|
form={form}
|
||||||
onFinish={handleFinish}
|
onFinish={handleFinish}
|
||||||
initialValues={{ fuel: 100, actualreturn: moment(new Date()) }}
|
initialValues={{ fuel: 100, actualreturn: dayjs(new Date()) }}
|
||||||
>
|
>
|
||||||
<CourtesyCarReturnModalComponent />
|
<CourtesyCarReturnModalComponent />
|
||||||
</Form>
|
</Form>
|
||||||
|
|||||||
@@ -4,12 +4,11 @@ import {
|
|||||||
Card,
|
Card,
|
||||||
Dropdown,
|
Dropdown,
|
||||||
Input,
|
Input,
|
||||||
Menu,
|
|
||||||
Space,
|
Space,
|
||||||
Table,
|
Table,
|
||||||
Tooltip,
|
Tooltip,
|
||||||
} from "antd";
|
} from "antd";
|
||||||
import moment from "moment";
|
import dayjs from "../../utils/day";
|
||||||
import React, { useState } from "react";
|
import React, { useState } from "react";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
import { Link } from "react-router-dom";
|
import { Link } from "react-router-dom";
|
||||||
@@ -77,7 +76,7 @@ export default function CourtesyCarsList({ loading, courtesycars, refetch }) {
|
|||||||
const mileageOver = nextservicekm <= mileage;
|
const mileageOver = nextservicekm <= mileage;
|
||||||
|
|
||||||
const dueForService =
|
const dueForService =
|
||||||
nextservicedate && moment(nextservicedate).isBefore(moment());
|
nextservicedate && dayjs(nextservicedate).isBefore(dayjs());
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Space>
|
<Space>
|
||||||
@@ -228,6 +227,27 @@ export default function CourtesyCarsList({ loading, courtesycars, refetch }) {
|
|||||||
(t(c.status) || "").toLowerCase().includes(searchText.toLowerCase())
|
(t(c.status) || "").toLowerCase().includes(searchText.toLowerCase())
|
||||||
)
|
)
|
||||||
: courtesycars;
|
: courtesycars;
|
||||||
|
|
||||||
|
const items = [
|
||||||
|
{
|
||||||
|
key: "courtesycar_inventory",
|
||||||
|
label: t("printcenter.courtesycarcontract.courtesy_car_inventory"),
|
||||||
|
onClick: () =>
|
||||||
|
GenerateDocument(
|
||||||
|
{
|
||||||
|
name: TemplateList("courtesycar").courtesy_car_inventory.key,
|
||||||
|
variables: {
|
||||||
|
//id: contract.id
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{},
|
||||||
|
"p"
|
||||||
|
),
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const menu = { items };
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Card
|
<Card
|
||||||
title={t("menus.header.courtesycars")}
|
title={t("menus.header.courtesycars")}
|
||||||
@@ -236,30 +256,7 @@ export default function CourtesyCarsList({ loading, courtesycars, refetch }) {
|
|||||||
<Button onClick={() => refetch()}>
|
<Button onClick={() => refetch()}>
|
||||||
<SyncOutlined />
|
<SyncOutlined />
|
||||||
</Button>
|
</Button>
|
||||||
<Dropdown
|
<Dropdown trigger="click" menu={menu}>
|
||||||
trigger="click"
|
|
||||||
overlay={
|
|
||||||
<Menu>
|
|
||||||
<Menu.Item
|
|
||||||
onClick={() =>
|
|
||||||
GenerateDocument(
|
|
||||||
{
|
|
||||||
name: TemplateList("courtesycar").courtesy_car_inventory
|
|
||||||
.key,
|
|
||||||
variables: {
|
|
||||||
//id: contract.id
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{},
|
|
||||||
"p"
|
|
||||||
)
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{t("printcenter.courtesycarcontract.courtesy_car_inventory")}
|
|
||||||
</Menu.Item>
|
|
||||||
</Menu>
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<Button>{t("general.labels.print")}</Button>
|
<Button>{t("general.labels.print")}</Button>
|
||||||
</Dropdown>
|
</Dropdown>
|
||||||
<Link to={`/manage/courtesycars/new`}>
|
<Link to={`/manage/courtesycars/new`}>
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ import { Button, Card, Table } from "antd";
|
|||||||
import queryString from "query-string";
|
import queryString from "query-string";
|
||||||
import React, { useState } from "react";
|
import React, { useState } from "react";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
import { Link, useHistory, useLocation } from "react-router-dom";
|
import { Link, useNavigate, useLocation } from "react-router-dom";
|
||||||
import { DateFormatter } from "../../utils/DateFormatter";
|
import { DateFormatter } from "../../utils/DateFormatter";
|
||||||
import { alphaSort } from "../../utils/sorters";
|
import { alphaSort } from "../../utils/sorters";
|
||||||
import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
|
import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
|
||||||
@@ -17,7 +17,7 @@ export default function CsiResponseListPaginated({
|
|||||||
}) {
|
}) {
|
||||||
const search = queryString.parse(useLocation().search);
|
const search = queryString.parse(useLocation().search);
|
||||||
const { responseid, page, sortcolumn, sortorder } = search;
|
const { responseid, page, sortcolumn, sortorder } = search;
|
||||||
const history = useHistory();
|
const history = useNavigate();
|
||||||
const [state, setState] = useState({
|
const [state, setState] = useState({
|
||||||
sortedInfo: {},
|
sortedInfo: {},
|
||||||
filteredInfo: { text: "" },
|
filteredInfo: { text: "" },
|
||||||
@@ -80,18 +80,18 @@ export default function CsiResponseListPaginated({
|
|||||||
search.page = pagination.current;
|
search.page = pagination.current;
|
||||||
search.sortcolumn = sorter.columnKey;
|
search.sortcolumn = sorter.columnKey;
|
||||||
search.sortorder = sorter.order;
|
search.sortorder = sorter.order;
|
||||||
history.push({ search: queryString.stringify(search) });
|
history({ search: queryString.stringify(search) });
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleOnRowClick = (record) => {
|
const handleOnRowClick = (record) => {
|
||||||
if (record) {
|
if (record) {
|
||||||
if (record.id) {
|
if (record.id) {
|
||||||
search.responseid = record.id;
|
search.responseid = record.id;
|
||||||
history.push({ search: queryString.stringify(search) });
|
history({ search: queryString.stringify(search) });
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
delete search.responseid;
|
delete search.responseid;
|
||||||
history.push({ search: queryString.stringify(search) });
|
history({ search: queryString.stringify(search) });
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
import { Card } from "antd";
|
import { Card } from "antd";
|
||||||
import _ from "lodash";
|
import _ from "lodash";
|
||||||
import moment from "moment";
|
import dayjs from "../../../utils/day";
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
import {
|
import {
|
||||||
@@ -27,7 +27,7 @@ export default function DashboardMonthlyEmployeeEfficiency({
|
|||||||
return <DashboardRefreshRequired {...cardProps} />;
|
return <DashboardRefreshRequired {...cardProps} />;
|
||||||
|
|
||||||
const ticketsByDate = _.groupBy(data.monthly_employee_efficiency, (item) =>
|
const ticketsByDate = _.groupBy(data.monthly_employee_efficiency, (item) =>
|
||||||
moment(item.date).format("YYYY-MM-DD")
|
dayjs(item.date).format("YYYY-MM-DD")
|
||||||
);
|
);
|
||||||
|
|
||||||
const listOfDays = Utils.ListOfDaysInCurrentMonth();
|
const listOfDays = Utils.ListOfDaysInCurrentMonth();
|
||||||
@@ -53,7 +53,7 @@ export default function DashboardMonthlyEmployeeEfficiency({
|
|||||||
((dailyHrs.productive - dailyHrs.actual) / dailyHrs.actual + 1) * 100;
|
((dailyHrs.productive - dailyHrs.actual) / dailyHrs.actual + 1) * 100;
|
||||||
|
|
||||||
const theValue = {
|
const theValue = {
|
||||||
date: moment(val).format("DD"),
|
date: dayjs(val).format("DD"),
|
||||||
// ...dailyHrs,
|
// ...dailyHrs,
|
||||||
actual: dailyHrs.actual.toFixed(1),
|
actual: dailyHrs.actual.toFixed(1),
|
||||||
productive: dailyHrs.productive.toFixed(1),
|
productive: dailyHrs.productive.toFixed(1),
|
||||||
@@ -159,9 +159,9 @@ export default function DashboardMonthlyEmployeeEfficiency({
|
|||||||
}
|
}
|
||||||
|
|
||||||
export const DashboardMonthlyEmployeeEfficiencyGql = `
|
export const DashboardMonthlyEmployeeEfficiencyGql = `
|
||||||
monthly_employee_efficiency: timetickets(where: {_and: [{date: {_gte: "${moment()
|
monthly_employee_efficiency: timetickets(where: {_and: [{date: {_gte: "${dayjs()
|
||||||
.startOf("month")
|
.startOf("month")
|
||||||
.format("YYYY-MM-DD")}"}},{date: {_lte: "${moment()
|
.format("YYYY-MM-DD")}"}},{date: {_lte: "${dayjs()
|
||||||
.endOf("month")
|
.endOf("month")
|
||||||
.format("YYYY-MM-DD")}"}} ]}) {
|
.format("YYYY-MM-DD")}"}} ]}) {
|
||||||
actualhrs
|
actualhrs
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import { Card } from "antd";
|
import { Card } from "antd";
|
||||||
import moment from "moment";
|
import dayjs from "../../../utils/day";
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
import _ from "lodash";
|
import _ from "lodash";
|
||||||
@@ -24,7 +24,7 @@ export default function DashboardMonthlyRevenueGraph({ data, ...cardProps }) {
|
|||||||
if (!data.monthly_sales) return <DashboardRefreshRequired {...cardProps} />;
|
if (!data.monthly_sales) return <DashboardRefreshRequired {...cardProps} />;
|
||||||
|
|
||||||
const jobsByDate = _.groupBy(data.monthly_sales, (item) =>
|
const jobsByDate = _.groupBy(data.monthly_sales, (item) =>
|
||||||
moment(item.date_invoiced).format("YYYY-MM-DD")
|
dayjs(item.date_invoiced).format("YYYY-MM-DD")
|
||||||
);
|
);
|
||||||
|
|
||||||
const listOfDays = Utils.ListOfDaysInCurrentMonth();
|
const listOfDays = Utils.ListOfDaysInCurrentMonth();
|
||||||
@@ -43,7 +43,7 @@ export default function DashboardMonthlyRevenueGraph({ data, ...cardProps }) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const theValue = {
|
const theValue = {
|
||||||
date: moment(val).format("DD"),
|
date: dayjs(val).format("DD"),
|
||||||
dailySales: dailySales.getAmount() / 100,
|
dailySales: dailySales.getAmount() / 100,
|
||||||
accSales:
|
accSales:
|
||||||
acc.length > 0
|
acc.length > 0
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
import { Card, Statistic } from "antd";
|
import { Card, Statistic } from "antd";
|
||||||
import Dinero from "dinero.js";
|
import Dinero from "dinero.js";
|
||||||
import moment from "moment";
|
import dayjs from "../../../utils/day";
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
import DashboardRefreshRequired from "../refresh-required.component";
|
import DashboardRefreshRequired from "../refresh-required.component";
|
||||||
@@ -36,10 +36,10 @@ export const DashboardProjectedMonthlySalesGql = `
|
|||||||
_or: [
|
_or: [
|
||||||
{_and: [
|
{_and: [
|
||||||
{date_invoiced:{_is_null: false }},
|
{date_invoiced:{_is_null: false }},
|
||||||
{date_invoiced: {_gte: "${moment()
|
{date_invoiced: {_gte: "${dayjs()
|
||||||
.startOf("month")
|
.startOf("month")
|
||||||
.startOf("day")
|
.startOf("day")
|
||||||
.toISOString()}"}}, {date_invoiced: {_lte: "${moment()
|
.toISOString()}"}}, {date_invoiced: {_lte: "${dayjs()
|
||||||
.endOf("month")
|
.endOf("month")
|
||||||
.endOf("day")
|
.endOf("day")
|
||||||
.toISOString()}"}}]},
|
.toISOString()}"}}]},
|
||||||
@@ -47,10 +47,10 @@ export const DashboardProjectedMonthlySalesGql = `
|
|||||||
|
|
||||||
_and:[
|
_and:[
|
||||||
{date_invoiced:{_is_null: true }},
|
{date_invoiced:{_is_null: true }},
|
||||||
{actual_completion: {_gte: "${moment()
|
{actual_completion: {_gte: "${dayjs()
|
||||||
.startOf("month")
|
.startOf("month")
|
||||||
.startOf("day")
|
.startOf("day")
|
||||||
.toISOString()}"}}, {actual_completion: {_lte: "${moment()
|
.toISOString()}"}}, {actual_completion: {_lte: "${dayjs()
|
||||||
.endOf("month")
|
.endOf("month")
|
||||||
.endOf("day")
|
.endOf("day")
|
||||||
.toISOString()}"}}
|
.toISOString()}"}}
|
||||||
@@ -61,10 +61,10 @@ _and:[
|
|||||||
{_and: [
|
{_and: [
|
||||||
{date_invoiced: {_is_null: true}},
|
{date_invoiced: {_is_null: true}},
|
||||||
{actual_completion: {_is_null: true}}
|
{actual_completion: {_is_null: true}}
|
||||||
{scheduled_completion: {_gte: "${moment()
|
{scheduled_completion: {_gte: "${dayjs()
|
||||||
.startOf("month")
|
.startOf("month")
|
||||||
.startOf("day")
|
.startOf("day")
|
||||||
.toISOString()}"}}, {scheduled_completion: {_lte: "${moment()
|
.toISOString()}"}}, {scheduled_completion: {_lte: "${dayjs()
|
||||||
.endOf("month")
|
.endOf("month")
|
||||||
.endOf("day")
|
.endOf("day")
|
||||||
.toISOString()}"}}
|
.toISOString()}"}}
|
||||||
|
|||||||
@@ -4,7 +4,7 @@ import {
|
|||||||
PauseCircleOutlined,
|
PauseCircleOutlined,
|
||||||
} from "@ant-design/icons";
|
} from "@ant-design/icons";
|
||||||
import { Card, Space, Table, Tooltip } from "antd";
|
import { Card, Space, Table, Tooltip } from "antd";
|
||||||
import moment from "moment";
|
import dayjs from "../../../utils/day";
|
||||||
import React, { useState } from "react";
|
import React, { useState } from "react";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
import { Link } from "react-router-dom";
|
import { Link } from "react-router-dom";
|
||||||
@@ -49,14 +49,14 @@ export default function DashboardScheduledInToday({ data, ...cardProps }) {
|
|||||||
v_vin: item.job.v_vin,
|
v_vin: item.job.v_vin,
|
||||||
vehicleid: item.job.vehicleid,
|
vehicleid: item.job.vehicleid,
|
||||||
note: item.note,
|
note: item.note,
|
||||||
start: moment(item.start).format("hh:mm a"),
|
start: dayjs(item.start).format("hh:mm a"),
|
||||||
title: item.title,
|
title: item.title,
|
||||||
};
|
};
|
||||||
appt.push(i);
|
appt.push(i);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
appt.sort(function (a, b) {
|
appt.sort(function (a, b) {
|
||||||
return new moment(a.start) - new moment(b.start);
|
return new dayjs(a.start) - new dayjs(b.start);
|
||||||
});
|
});
|
||||||
|
|
||||||
const columns = [
|
const columns = [
|
||||||
@@ -189,7 +189,7 @@ export default function DashboardScheduledInToday({ data, ...cardProps }) {
|
|||||||
return (
|
return (
|
||||||
<Card
|
<Card
|
||||||
title={t("dashboard.titles.scheduledintoday", {
|
title={t("dashboard.titles.scheduledintoday", {
|
||||||
date: moment().startOf("day").format("MM/DD/YYYY"),
|
date: dayjs().startOf("day").format("MM/DD/YYYY"),
|
||||||
})}
|
})}
|
||||||
{...cardProps}
|
{...cardProps}
|
||||||
>
|
>
|
||||||
@@ -209,9 +209,9 @@ export default function DashboardScheduledInToday({ data, ...cardProps }) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export const DashboardScheduledInTodayGql = `
|
export const DashboardScheduledInTodayGql = `
|
||||||
scheduled_in_today: appointments(where: {start: {_gte: "${moment()
|
scheduled_in_today: appointments(where: {start: {_gte: "${dayjs()
|
||||||
.startOf("day")
|
.startOf("day")
|
||||||
.toISOString()}", _lte: "${moment()
|
.toISOString()}", _lte: "${dayjs()
|
||||||
.endOf("day")
|
.endOf("day")
|
||||||
.toISOString()}"}, canceled: {_eq: false}, block: {_neq: true}}) {
|
.toISOString()}"}, canceled: {_eq: false}, block: {_neq: true}}) {
|
||||||
canceled
|
canceled
|
||||||
|
|||||||
@@ -4,7 +4,7 @@ import {
|
|||||||
PauseCircleOutlined,
|
PauseCircleOutlined,
|
||||||
} from "@ant-design/icons";
|
} from "@ant-design/icons";
|
||||||
import { Card, Space, Table, Tooltip } from "antd";
|
import { Card, Space, Table, Tooltip } from "antd";
|
||||||
import moment from "moment";
|
import dayjs from "../../../utils/day";
|
||||||
import React, { useState } from "react";
|
import React, { useState } from "react";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
import { Link } from "react-router-dom";
|
import { Link } from "react-router-dom";
|
||||||
@@ -23,7 +23,7 @@ export default function DashboardScheduledOutToday({ data, ...cardProps }) {
|
|||||||
return <DashboardRefreshRequired {...cardProps} />;
|
return <DashboardRefreshRequired {...cardProps} />;
|
||||||
|
|
||||||
data.scheduled_out_today.forEach((item) => {
|
data.scheduled_out_today.forEach((item) => {
|
||||||
item.scheduled_completion= moment(item.scheduled_completion).format("hh:mm a")
|
item.scheduled_completion= dayjs(item.scheduled_completion).format("hh:mm a")
|
||||||
});
|
});
|
||||||
data.scheduled_out_today.sort(function (a, b) {
|
data.scheduled_out_today.sort(function (a, b) {
|
||||||
return new Date(a.scheduled_completion) - new Date(b.scheduled_completion);
|
return new Date(a.scheduled_completion) - new Date(b.scheduled_completion);
|
||||||
@@ -159,7 +159,7 @@ export default function DashboardScheduledOutToday({ data, ...cardProps }) {
|
|||||||
return (
|
return (
|
||||||
<Card
|
<Card
|
||||||
title={t("dashboard.titles.scheduledouttoday", {
|
title={t("dashboard.titles.scheduledouttoday", {
|
||||||
date: moment().startOf("day").format("MM/DD/YYYY"),
|
date: dayjs().startOf("day").format("MM/DD/YYYY"),
|
||||||
})}
|
})}
|
||||||
{...cardProps}
|
{...cardProps}
|
||||||
>
|
>
|
||||||
@@ -183,8 +183,8 @@ export const DashboardScheduledOutTodayGql = `
|
|||||||
date_invoiced: {_is_null: true},
|
date_invoiced: {_is_null: true},
|
||||||
ro_number: {_is_null: false},
|
ro_number: {_is_null: false},
|
||||||
voided: {_eq: false},
|
voided: {_eq: false},
|
||||||
scheduled_completion: {_gte: "${moment().startOf("day").toISOString()}",
|
scheduled_completion: {_gte: "${dayjs().startOf("day").toISOString()}",
|
||||||
_lte: "${moment().endOf("day").toISOString()}"}}) {
|
_lte: "${dayjs().endOf("day").toISOString()}"}}) {
|
||||||
alt_transport
|
alt_transport
|
||||||
clm_no
|
clm_no
|
||||||
jobid: id
|
jobid: id
|
||||||
|
|||||||
@@ -1,9 +1,10 @@
|
|||||||
import Icon, { SyncOutlined } from "@ant-design/icons";
|
import Icon, { SyncOutlined } from "@ant-design/icons";
|
||||||
import { gql, useMutation, useQuery } from "@apollo/client";
|
import { gql, useMutation, useQuery } from "@apollo/client";
|
||||||
import { Button, Dropdown, Menu, PageHeader, Space, notification } from "antd";
|
import { Button, Dropdown, Space, notification } from "antd";
|
||||||
|
import {PageHeader} from "@ant-design/pro-layout";
|
||||||
import i18next from "i18next";
|
import i18next from "i18next";
|
||||||
import _ from "lodash";
|
import _ from "lodash";
|
||||||
import moment from "moment";
|
import dayjs from "../../utils/day";
|
||||||
import React, { useState } from "react";
|
import React, { useState } from "react";
|
||||||
import { Responsive, WidthProvider } from "react-grid-layout";
|
import { Responsive, WidthProvider } from "react-grid-layout";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
@@ -122,19 +123,15 @@ export function DashboardGridComponent({ currentUser, bodyshop }) {
|
|||||||
[data]
|
[data]
|
||||||
);
|
);
|
||||||
const existingLayoutKeys = state.items.map((i) => i.i);
|
const existingLayoutKeys = state.items.map((i) => i.i);
|
||||||
const addComponentOverlay = (
|
|
||||||
<Menu onClick={handleAddComponent}>
|
const menuItems = Object.keys(componentList).map((key) => ({
|
||||||
{Object.keys(componentList).map((key) => (
|
key: key,
|
||||||
<Menu.Item
|
label: componentList[key].label,
|
||||||
key={key}
|
value: key,
|
||||||
value={key}
|
disabled: existingLayoutKeys.includes(key),
|
||||||
disabled={existingLayoutKeys.includes(key)}
|
}));
|
||||||
>
|
|
||||||
{componentList[key].label}
|
const menu = {items: menuItems, onClick: handleAddComponent};
|
||||||
</Menu.Item>
|
|
||||||
))}
|
|
||||||
</Menu>
|
|
||||||
);
|
|
||||||
|
|
||||||
if (error) return <AlertComponent message={error.message} type="error" />;
|
if (error) return <AlertComponent message={error.message} type="error" />;
|
||||||
|
|
||||||
@@ -146,7 +143,7 @@ export function DashboardGridComponent({ currentUser, bodyshop }) {
|
|||||||
<Button onClick={() => refetch()}>
|
<Button onClick={() => refetch()}>
|
||||||
<SyncOutlined />
|
<SyncOutlined />
|
||||||
</Button>
|
</Button>
|
||||||
<Dropdown overlay={addComponentOverlay} trigger={["click"]}>
|
<Dropdown menu={menu} trigger={["click"]}>
|
||||||
<Button>{t("dashboard.actions.addcomponent")}</Button>
|
<Button>{t("dashboard.actions.addcomponent")}</Button>
|
||||||
</Dropdown>
|
</Dropdown>
|
||||||
</Space>
|
</Space>
|
||||||
@@ -276,7 +273,7 @@ const componentList = {
|
|||||||
},
|
},
|
||||||
ScheduleInToday: {
|
ScheduleInToday: {
|
||||||
label: i18next.t("dashboard.titles.scheduledintoday", {
|
label: i18next.t("dashboard.titles.scheduledintoday", {
|
||||||
date: moment().startOf("day").format("MM/DD/YYYY"),
|
date: dayjs().startOf("day").format("MM/DD/YYYY"),
|
||||||
}),
|
}),
|
||||||
component: DashboardScheduledInToday,
|
component: DashboardScheduledInToday,
|
||||||
gqlFragment: DashboardScheduledInTodayGql,
|
gqlFragment: DashboardScheduledInTodayGql,
|
||||||
@@ -287,7 +284,7 @@ const componentList = {
|
|||||||
},
|
},
|
||||||
ScheduleOutToday: {
|
ScheduleOutToday: {
|
||||||
label: i18next.t("dashboard.titles.scheduledouttoday", {
|
label: i18next.t("dashboard.titles.scheduledouttoday", {
|
||||||
date: moment().startOf("day").format("MM/DD/YYYY"),
|
date: dayjs().startOf("day").format("MM/DD/YYYY"),
|
||||||
}),
|
}),
|
||||||
component: DashboardScheduledOutToday,
|
component: DashboardScheduledOutToday,
|
||||||
gqlFragment: DashboardScheduledOutTodayGql,
|
gqlFragment: DashboardScheduledOutTodayGql,
|
||||||
@@ -310,10 +307,10 @@ const createDashboardQuery = (state) => {
|
|||||||
${componentBasedAdditions || ""}
|
${componentBasedAdditions || ""}
|
||||||
monthly_sales: jobs(where: {_and: [
|
monthly_sales: jobs(where: {_and: [
|
||||||
{ voided: {_eq: false}},
|
{ voided: {_eq: false}},
|
||||||
{date_invoiced: {_gte: "${moment()
|
{date_invoiced: {_gte: "${dayjs()
|
||||||
.startOf("month")
|
.startOf("month")
|
||||||
.startOf("day")
|
.startOf("day")
|
||||||
.toISOString()}"}}, {date_invoiced: {_lte: "${moment()
|
.toISOString()}"}}, {date_invoiced: {_lte: "${dayjs()
|
||||||
.endOf("month")
|
.endOf("month")
|
||||||
.endOf("day")
|
.endOf("day")
|
||||||
.toISOString()}"}}]}) {
|
.toISOString()}"}}]}) {
|
||||||
|
|||||||
@@ -51,7 +51,7 @@ export function DmsCdkVehicles({ bodyshop, form, socket, job }) {
|
|||||||
<>
|
<>
|
||||||
<Modal
|
<Modal
|
||||||
width={"90%"}
|
width={"90%"}
|
||||||
visible={visible}
|
open={visible}
|
||||||
onCancel={() => setVisible(false)}
|
onCancel={() => setVisible(false)}
|
||||||
onOk={() => {
|
onOk={() => {
|
||||||
form.setFieldsValue({
|
form.setFieldsValue({
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import { Divider, Space, Tag, Timeline } from "antd";
|
import { Divider, Space, Tag, Timeline } from "antd";
|
||||||
import moment from "moment";
|
import dayjs from "../../utils/day";
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import { connect } from "react-redux";
|
import { connect } from "react-redux";
|
||||||
import { createStructuredSelector } from "reselect";
|
import { createStructuredSelector } from "reselect";
|
||||||
@@ -22,20 +22,22 @@ export default connect(mapStateToProps, mapDispatchToProps)(DmsLogEvents);
|
|||||||
|
|
||||||
export function DmsLogEvents({ socket, logs, bodyshop }) {
|
export function DmsLogEvents({ socket, logs, bodyshop }) {
|
||||||
return (
|
return (
|
||||||
<Timeline pending
|
<Timeline
|
||||||
reverse={true}
|
pending
|
||||||
>
|
reverse={true}
|
||||||
{logs.map((log, idx) => (
|
items={logs.map((log, idx) => ({
|
||||||
<Timeline.Item key={idx} color={LogLevelHierarchy(log.level)}>
|
key: idx,
|
||||||
|
color: LogLevelHierarchy(log.level),
|
||||||
|
label: (
|
||||||
<Space wrap align="start" style={{}}>
|
<Space wrap align="start" style={{}}>
|
||||||
<Tag color={LogLevelHierarchy(log.level)}>{log.level}</Tag>
|
<Tag color={LogLevelHierarchy(log.level)}>{log.level}</Tag>
|
||||||
<span>{moment(log.timestamp).format("MM/DD/YYYY HH:mm:ss")}</span>
|
<span>{dayjs(log.timestamp).format("MM/DD/YYYY HH:mm:ss")}</span>
|
||||||
<Divider type="vertical" />
|
<Divider type="vertical" />
|
||||||
<span>{log.message}</span>
|
<span>{log.message}</span>
|
||||||
</Space>
|
</Space>
|
||||||
</Timeline.Item>
|
),
|
||||||
))}
|
}))}
|
||||||
</Timeline>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1,27 +1,26 @@
|
|||||||
import { DeleteFilled, DownOutlined } from "@ant-design/icons";
|
import {DeleteFilled, DownOutlined} from "@ant-design/icons";
|
||||||
import {
|
import {
|
||||||
Button,
|
Button,
|
||||||
Card,
|
Card,
|
||||||
Divider,
|
Divider,
|
||||||
Dropdown,
|
Dropdown,
|
||||||
Form,
|
Form,
|
||||||
Input,
|
Input,
|
||||||
InputNumber,
|
InputNumber,
|
||||||
Menu,
|
Select,
|
||||||
Select,
|
Space,
|
||||||
Space,
|
Statistic,
|
||||||
Statistic,
|
Switch,
|
||||||
Switch,
|
Typography,
|
||||||
Typography,
|
|
||||||
} from "antd";
|
} from "antd";
|
||||||
import Dinero from "dinero.js";
|
import Dinero from "dinero.js";
|
||||||
import moment from "moment";
|
import dayjs from "../../utils/day";
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import { useTranslation } from "react-i18next";
|
import {useTranslation} from "react-i18next";
|
||||||
import { connect } from "react-redux";
|
import {connect} from "react-redux";
|
||||||
import { createStructuredSelector } from "reselect";
|
import {createStructuredSelector} from "reselect";
|
||||||
import { determineDmsType } from "../../pages/dms/dms.container";
|
import {determineDmsType} from "../../pages/dms/dms.container";
|
||||||
import { selectBodyshop } from "../../redux/user/user.selectors";
|
import {selectBodyshop} from "../../redux/user/user.selectors";
|
||||||
import i18n from "../../translations/i18n";
|
import i18n from "../../translations/i18n";
|
||||||
import DmsCdkMakes from "../dms-cdk-makes/dms-cdk-makes.component";
|
import DmsCdkMakes from "../dms-cdk-makes/dms-cdk-makes.component";
|
||||||
import DmsCdkMakesRefetch from "../dms-cdk-makes/dms-cdk-makes.refetch.component";
|
import DmsCdkMakesRefetch from "../dms-cdk-makes/dms-cdk-makes.refetch.component";
|
||||||
@@ -30,440 +29,425 @@ import CurrencyInput from "../form-items-formatted/currency-form-item.component"
|
|||||||
import LayoutFormRow from "../layout-form-row/layout-form-row.component";
|
import LayoutFormRow from "../layout-form-row/layout-form-row.component";
|
||||||
|
|
||||||
const mapStateToProps = createStructuredSelector({
|
const mapStateToProps = createStructuredSelector({
|
||||||
bodyshop: selectBodyshop,
|
bodyshop: selectBodyshop,
|
||||||
});
|
});
|
||||||
const mapDispatchToProps = (dispatch) => ({
|
const mapDispatchToProps = (dispatch) => ({
|
||||||
//setUserLanguage: language => dispatch(setUserLanguage(language))
|
//setUserLanguage: language => dispatch(setUserLanguage(language))
|
||||||
});
|
});
|
||||||
export default connect(mapStateToProps, mapDispatchToProps)(DmsPostForm);
|
export default connect(mapStateToProps, mapDispatchToProps)(DmsPostForm);
|
||||||
|
|
||||||
export function DmsPostForm({ bodyshop, socket, job, logsRef }) {
|
export function DmsPostForm({bodyshop, socket, job, logsRef}) {
|
||||||
const [form] = Form.useForm();
|
const [form] = Form.useForm();
|
||||||
const { t } = useTranslation();
|
const {t} = useTranslation();
|
||||||
|
|
||||||
const handlePayerSelect = (value, index) => {
|
const handlePayerSelect = (value, index) => {
|
||||||
form.setFieldsValue({
|
form.setFieldsValue({
|
||||||
payers: form.getFieldValue("payers").map((payer, mapIndex) => {
|
payers: form.getFieldValue("payers").map((payer, mapIndex) => {
|
||||||
if (index !== mapIndex) return payer;
|
if (index !== mapIndex) return payer;
|
||||||
const cdkPayer =
|
const cdkPayer =
|
||||||
bodyshop.cdk_configuration.payers &&
|
bodyshop.cdk_configuration.payers &&
|
||||||
bodyshop.cdk_configuration.payers.find((i) => i.name === value);
|
bodyshop.cdk_configuration.payers.find((i) => i.name === value);
|
||||||
|
|
||||||
if (!cdkPayer) return payer;
|
if (!cdkPayer) return payer;
|
||||||
|
|
||||||
return {
|
return {
|
||||||
...cdkPayer,
|
...cdkPayer,
|
||||||
dms_acctnumber: cdkPayer.dms_acctnumber,
|
dms_acctnumber: cdkPayer.dms_acctnumber,
|
||||||
controlnumber: job && job[cdkPayer.control_type],
|
controlnumber: job && job[cdkPayer.control_type],
|
||||||
};
|
};
|
||||||
}),
|
}),
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleFinish = (values) => {
|
|
||||||
socket.emit(`${determineDmsType(bodyshop)}-export-job`, {
|
|
||||||
jobid: job.id,
|
|
||||||
txEnvelope: values,
|
|
||||||
});
|
|
||||||
console.log(logsRef);
|
|
||||||
if (logsRef) {
|
|
||||||
console.log("executing", logsRef);
|
|
||||||
logsRef.curent &&
|
|
||||||
logsRef.current.scrollIntoView({
|
|
||||||
behavior: "smooth",
|
|
||||||
});
|
});
|
||||||
}
|
};
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
const handleFinish = (values) => {
|
||||||
<Card title={t("jobs.labels.dms.postingform")}>
|
socket.emit(`${determineDmsType(bodyshop)}-export-job`, {
|
||||||
<Form
|
jobid: job.id,
|
||||||
form={form}
|
txEnvelope: values,
|
||||||
layout="vertical"
|
});
|
||||||
onFinish={handleFinish}
|
console.log(logsRef);
|
||||||
initialValues={{
|
if (logsRef) {
|
||||||
story: `${t("jobs.labels.dms.defaultstory", {
|
console.log("executing", logsRef);
|
||||||
ro_number: job.ro_number,
|
logsRef.curent &&
|
||||||
ownr_nm: `${job.ownr_fn || ""} ${job.ownr_ln || ""} ${
|
logsRef.current.scrollIntoView({
|
||||||
job.ownr_co_nm || ""
|
behavior: "smooth",
|
||||||
}`.trim(),
|
});
|
||||||
ins_co_nm: job.ins_co_nm || "N/A",
|
}
|
||||||
clm_po: `${job.clm_no ? `${job.clm_no} ` : ""}${
|
};
|
||||||
job.po_number || ""
|
|
||||||
}`,
|
|
||||||
}).trim()}.${
|
|
||||||
job.area_of_damage && job.area_of_damage.impact1
|
|
||||||
? " " +
|
|
||||||
t("jobs.labels.dms.damageto", {
|
|
||||||
area_of_damage:
|
|
||||||
(job.area_of_damage && job.area_of_damage.impact1) ||
|
|
||||||
"UNKNOWN",
|
|
||||||
})
|
|
||||||
: ""
|
|
||||||
}`.substr(0, 239),
|
|
||||||
inservicedate: moment("2019-01-01"),
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<LayoutFormRow grow>
|
|
||||||
<Form.Item
|
|
||||||
name="journal"
|
|
||||||
label={t("jobs.fields.dms.journal")}
|
|
||||||
initialValue={
|
|
||||||
bodyshop.cdk_configuration &&
|
|
||||||
bodyshop.cdk_configuration.default_journal
|
|
||||||
}
|
|
||||||
rules={[
|
|
||||||
{
|
|
||||||
required: true,
|
|
||||||
//message: t("general.validation.required"),
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
<Input />
|
|
||||||
</Form.Item>
|
|
||||||
<Form.Item
|
|
||||||
name="kmin"
|
|
||||||
label={t("jobs.fields.kmin")}
|
|
||||||
initialValue={job && job.kmin}
|
|
||||||
rules={[
|
|
||||||
{
|
|
||||||
required: true,
|
|
||||||
//message: t("general.validation.required"),
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
<InputNumber disabled />
|
|
||||||
</Form.Item>
|
|
||||||
<Form.Item
|
|
||||||
name="kmout"
|
|
||||||
label={t("jobs.fields.kmout")}
|
|
||||||
initialValue={job && job.kmout}
|
|
||||||
rules={[
|
|
||||||
{
|
|
||||||
required: true,
|
|
||||||
//message: t("general.validation.required"),
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
<InputNumber disabled />
|
|
||||||
</Form.Item>
|
|
||||||
</LayoutFormRow>
|
|
||||||
|
|
||||||
{bodyshop.cdk_dealerid && (
|
return (
|
||||||
<div>
|
<Card title={t("jobs.labels.dms.postingform")}>
|
||||||
<LayoutFormRow style={{ justifyContent: "center" }} grow>
|
<Form
|
||||||
<Form.Item
|
form={form}
|
||||||
name="dms_make"
|
layout="vertical"
|
||||||
label={t("jobs.fields.dms.dms_make")}
|
onFinish={handleFinish}
|
||||||
rules={[
|
initialValues={{
|
||||||
{
|
story: `${t("jobs.labels.dms.defaultstory", {
|
||||||
required: true,
|
ro_number: job.ro_number,
|
||||||
},
|
ownr_nm: `${job.ownr_fn || ""} ${job.ownr_ln || ""} ${
|
||||||
]}
|
job.ownr_co_nm || ""
|
||||||
>
|
}`.trim(),
|
||||||
<Input disabled />
|
ins_co_nm: job.ins_co_nm || "N/A",
|
||||||
</Form.Item>
|
clm_po: `${job.clm_no ? `${job.clm_no} ` : ""}${
|
||||||
<Form.Item
|
job.po_number || ""
|
||||||
name="dms_model"
|
}`,
|
||||||
label={t("jobs.fields.dms.dms_model")}
|
}).trim()}.${
|
||||||
rules={[
|
job.area_of_damage && job.area_of_damage.impact1
|
||||||
{
|
? " " +
|
||||||
required: true,
|
t("jobs.labels.dms.damageto", {
|
||||||
},
|
area_of_damage:
|
||||||
]}
|
(job.area_of_damage && job.area_of_damage.impact1) ||
|
||||||
>
|
"UNKNOWN",
|
||||||
<Input disabled />
|
})
|
||||||
</Form.Item>
|
: ""
|
||||||
<Form.Item
|
}`.slice(0, 239),
|
||||||
name="inservicedate"
|
inservicedate: dayjs("2019-01-01"),
|
||||||
label={t("jobs.fields.dms.inservicedate")}
|
}}
|
||||||
>
|
>
|
||||||
<FormDatePicker />
|
<LayoutFormRow grow>
|
||||||
</Form.Item>
|
<Form.Item
|
||||||
</LayoutFormRow>
|
name="journal"
|
||||||
<Space>
|
label={t("jobs.fields.dms.journal")}
|
||||||
<DmsCdkMakes form={form} socket={socket} job={job} />
|
initialValue={
|
||||||
<DmsCdkMakesRefetch />
|
bodyshop.cdk_configuration &&
|
||||||
<Form.Item
|
bodyshop.cdk_configuration.default_journal
|
||||||
name="dms_unsold"
|
|
||||||
label={t("jobs.fields.dms.dms_unsold")}
|
|
||||||
initialValue={false}
|
|
||||||
>
|
|
||||||
<Switch />
|
|
||||||
</Form.Item>
|
|
||||||
<Form.Item
|
|
||||||
name="dms_model_override"
|
|
||||||
label={t("jobs.fields.dms.dms_model_override")}
|
|
||||||
initialValue={false}
|
|
||||||
>
|
|
||||||
<Switch />
|
|
||||||
</Form.Item>
|
|
||||||
</Space>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<Form.Item
|
|
||||||
name="story"
|
|
||||||
label={t("jobs.fields.dms.story")}
|
|
||||||
rules={[
|
|
||||||
{
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
<Input.TextArea maxLength={240} />
|
|
||||||
</Form.Item>
|
|
||||||
|
|
||||||
<Divider />
|
|
||||||
<Space size="large" wrap align="center">
|
|
||||||
<Statistic
|
|
||||||
title={t("jobs.fields.ded_amt")}
|
|
||||||
value={Dinero(
|
|
||||||
job.job_totals.totals.custPayable.deductible
|
|
||||||
).toFormat()}
|
|
||||||
/>
|
|
||||||
<Statistic
|
|
||||||
title={t("jobs.labels.total_cust_payable")}
|
|
||||||
value={Dinero(job.job_totals.totals.custPayable.total).toFormat()}
|
|
||||||
/>
|
|
||||||
<Statistic
|
|
||||||
title={t("jobs.labels.net_repairs")}
|
|
||||||
value={Dinero(job.job_totals.totals.net_repairs).toFormat()}
|
|
||||||
/>
|
|
||||||
</Space>
|
|
||||||
<Form.List name={["payers"]}>
|
|
||||||
{(fields, { add, remove }) => {
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
{fields.map((field, index) => (
|
|
||||||
<Form.Item key={field.key}>
|
|
||||||
<Space wrap>
|
|
||||||
<Form.Item
|
|
||||||
label={t("jobs.fields.dms.payer.name")}
|
|
||||||
key={`${index}name`}
|
|
||||||
name={[field.name, "name"]}
|
|
||||||
rules={[
|
|
||||||
{
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
<Select
|
|
||||||
style={{ minWidth: "15rem" }}
|
|
||||||
onSelect={(value) => handlePayerSelect(value, index)}
|
|
||||||
>
|
|
||||||
{bodyshop.cdk_configuration &&
|
|
||||||
bodyshop.cdk_configuration.payers &&
|
|
||||||
bodyshop.cdk_configuration.payers.map((payer) => (
|
|
||||||
<Select.Option key={payer.name}>
|
|
||||||
{payer.name}
|
|
||||||
</Select.Option>
|
|
||||||
))}
|
|
||||||
</Select>
|
|
||||||
</Form.Item>
|
|
||||||
|
|
||||||
<Form.Item
|
|
||||||
label={t("jobs.fields.dms.payer.dms_acctnumber")}
|
|
||||||
key={`${index}dms_acctnumber`}
|
|
||||||
name={[field.name, "dms_acctnumber"]}
|
|
||||||
rules={[
|
|
||||||
{
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
<Input disabled />
|
|
||||||
</Form.Item>
|
|
||||||
|
|
||||||
<Form.Item
|
|
||||||
label={t("jobs.fields.dms.payer.amount")}
|
|
||||||
key={`${index}amount`}
|
|
||||||
name={[field.name, "amount"]}
|
|
||||||
rules={[
|
|
||||||
{
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
<CurrencyInput min={0} />
|
|
||||||
</Form.Item>
|
|
||||||
|
|
||||||
<Form.Item
|
|
||||||
label={
|
|
||||||
<div>
|
|
||||||
{t("jobs.fields.dms.payer.controlnumber")}{" "}
|
|
||||||
<Dropdown
|
|
||||||
overlay={
|
|
||||||
<Menu>
|
|
||||||
{bodyshop.cdk_configuration.controllist &&
|
|
||||||
bodyshop.cdk_configuration.controllist.map(
|
|
||||||
(key, idx) => (
|
|
||||||
<Menu.Item
|
|
||||||
key={idx}
|
|
||||||
onClick={() => {
|
|
||||||
form.setFieldsValue({
|
|
||||||
payers: form
|
|
||||||
.getFieldValue("payers")
|
|
||||||
.map((row, mapIndex) => {
|
|
||||||
if (index !== mapIndex)
|
|
||||||
return row;
|
|
||||||
|
|
||||||
return {
|
|
||||||
...row,
|
|
||||||
controlnumber:
|
|
||||||
key.controlnumber,
|
|
||||||
};
|
|
||||||
}),
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{key.name}
|
|
||||||
</Menu.Item>
|
|
||||||
)
|
|
||||||
)}
|
|
||||||
</Menu>
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<a href=" #" onClick={(e) => e.preventDefault()}>
|
|
||||||
<DownOutlined />
|
|
||||||
</a>
|
|
||||||
</Dropdown>
|
|
||||||
</div>
|
|
||||||
}
|
}
|
||||||
key={`${index}controlnumber`}
|
|
||||||
name={[field.name, "controlnumber"]}
|
|
||||||
rules={[
|
rules={[
|
||||||
{
|
{
|
||||||
required: true,
|
required: true,
|
||||||
},
|
//message: t("general.validation.required"),
|
||||||
|
},
|
||||||
]}
|
]}
|
||||||
>
|
>
|
||||||
<Input />
|
<Input/>
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
|
<Form.Item
|
||||||
|
name="kmin"
|
||||||
|
label={t("jobs.fields.kmin")}
|
||||||
|
initialValue={job && job.kmin}
|
||||||
|
rules={[
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
//message: t("general.validation.required"),
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<InputNumber disabled/>
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item
|
||||||
|
name="kmout"
|
||||||
|
label={t("jobs.fields.kmout")}
|
||||||
|
initialValue={job && job.kmout}
|
||||||
|
rules={[
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
//message: t("general.validation.required"),
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<InputNumber disabled/>
|
||||||
|
</Form.Item>
|
||||||
|
</LayoutFormRow>
|
||||||
|
|
||||||
<Form.Item shouldUpdate>
|
{bodyshop.cdk_dealerid && (
|
||||||
{() => {
|
<div>
|
||||||
const payers = form.getFieldValue("payers");
|
<LayoutFormRow style={{justifyContent: "center"}} grow>
|
||||||
|
<Form.Item
|
||||||
const row = payers && payers[index];
|
name="dms_make"
|
||||||
|
label={t("jobs.fields.dms.dms_make")}
|
||||||
const cdkPayer =
|
rules={[
|
||||||
bodyshop.cdk_configuration.payers &&
|
{
|
||||||
bodyshop.cdk_configuration.payers.find(
|
required: true,
|
||||||
(i) => i && row && i.name === row.name
|
},
|
||||||
);
|
]}
|
||||||
if (
|
>
|
||||||
i18n.exists(`jobs.fields.${cdkPayer?.control_type}`)
|
<Input disabled/>
|
||||||
)
|
</Form.Item>
|
||||||
return (
|
<Form.Item
|
||||||
<div>
|
name="dms_model"
|
||||||
{cdkPayer &&
|
label={t("jobs.fields.dms.dms_model")}
|
||||||
t(`jobs.fields.${cdkPayer?.control_type}`)}
|
rules={[
|
||||||
</div>
|
{
|
||||||
);
|
required: true,
|
||||||
else if (
|
},
|
||||||
i18n.exists(
|
]}
|
||||||
`jobs.fields.dms.control_type.${cdkPayer?.control_type}`
|
>
|
||||||
)
|
<Input disabled/>
|
||||||
) {
|
</Form.Item>
|
||||||
return (
|
<Form.Item
|
||||||
<div>
|
name="inservicedate"
|
||||||
{cdkPayer &&
|
label={t("jobs.fields.dms.inservicedate")}
|
||||||
t(
|
>
|
||||||
`jobs.fields.dms.control_type.${cdkPayer?.control_type}`
|
<FormDatePicker/>
|
||||||
)}
|
</Form.Item>
|
||||||
</div>
|
</LayoutFormRow>
|
||||||
);
|
<Space>
|
||||||
} else {
|
<DmsCdkMakes form={form} socket={socket} job={job}/>
|
||||||
return null;
|
<DmsCdkMakesRefetch/>
|
||||||
}
|
<Form.Item
|
||||||
}}
|
name="dms_unsold"
|
||||||
</Form.Item>
|
label={t("jobs.fields.dms.dms_unsold")}
|
||||||
|
initialValue={false}
|
||||||
<DeleteFilled
|
>
|
||||||
onClick={() => {
|
<Switch/>
|
||||||
remove(field.name);
|
</Form.Item>
|
||||||
}}
|
<Form.Item
|
||||||
/>
|
name="dms_model_override"
|
||||||
</Space>
|
label={t("jobs.fields.dms.dms_model_override")}
|
||||||
</Form.Item>
|
initialValue={false}
|
||||||
))}
|
>
|
||||||
<Form.Item>
|
<Switch/>
|
||||||
<Button
|
</Form.Item>
|
||||||
disabled={!(fields.length < 3)}
|
</Space>
|
||||||
onClick={() => {
|
</div>
|
||||||
if (fields.length < 3) add();
|
)}
|
||||||
}}
|
<Form.Item
|
||||||
style={{ width: "100%" }}
|
name="story"
|
||||||
>
|
label={t("jobs.fields.dms.story")}
|
||||||
{t("jobs.actions.dms.addpayer")}
|
rules={[
|
||||||
</Button>
|
{
|
||||||
</Form.Item>
|
required: true,
|
||||||
</div>
|
},
|
||||||
);
|
]}
|
||||||
}}
|
|
||||||
</Form.List>
|
|
||||||
<Form.Item shouldUpdate>
|
|
||||||
{() => {
|
|
||||||
//Perform Calculation to determine discrepancy.
|
|
||||||
let totalAllocated = Dinero();
|
|
||||||
|
|
||||||
const payers = form.getFieldValue("payers");
|
|
||||||
payers &&
|
|
||||||
payers.forEach((payer) => {
|
|
||||||
totalAllocated = totalAllocated.add(
|
|
||||||
Dinero({ amount: Math.round((payer?.amount || 0) * 100) })
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
const totals =
|
|
||||||
socket.allocationsSummary &&
|
|
||||||
socket.allocationsSummary.reduce(
|
|
||||||
(acc, val) => {
|
|
||||||
return {
|
|
||||||
totalSale: acc.totalSale.add(Dinero(val.sale)),
|
|
||||||
totalCost: acc.totalCost.add(Dinero(val.cost)),
|
|
||||||
};
|
|
||||||
},
|
|
||||||
{
|
|
||||||
totalSale: Dinero(),
|
|
||||||
totalCost: Dinero(),
|
|
||||||
}
|
|
||||||
);
|
|
||||||
const discrep = totals
|
|
||||||
? totals.totalSale.subtract(totalAllocated)
|
|
||||||
: Dinero();
|
|
||||||
return (
|
|
||||||
<Space size="large" wrap align="center">
|
|
||||||
<Statistic
|
|
||||||
title={t("jobs.labels.subtotal")}
|
|
||||||
value={(totals ? totals.totalSale : Dinero()).toFormat()}
|
|
||||||
/>
|
|
||||||
<Typography.Title>-</Typography.Title>
|
|
||||||
<Statistic
|
|
||||||
title={t("jobs.labels.dms.totalallocated")}
|
|
||||||
value={totalAllocated.toFormat()}
|
|
||||||
/>
|
|
||||||
<Typography.Title>=</Typography.Title>
|
|
||||||
<Statistic
|
|
||||||
title={t("jobs.labels.dms.notallocated")}
|
|
||||||
valueStyle={{
|
|
||||||
color: discrep.getAmount() === 0 ? "green" : "red",
|
|
||||||
}}
|
|
||||||
value={discrep.toFormat()}
|
|
||||||
/>
|
|
||||||
<Button
|
|
||||||
disabled={
|
|
||||||
!socket.allocationsSummary || discrep.getAmount() !== 0
|
|
||||||
}
|
|
||||||
htmlType="submit"
|
|
||||||
>
|
>
|
||||||
{t("jobs.actions.dms.post")}
|
<Input.TextArea maxLength={240}/>
|
||||||
</Button>
|
</Form.Item>
|
||||||
</Space>
|
|
||||||
);
|
<Divider/>
|
||||||
}}
|
<Space size="large" wrap align="center">
|
||||||
</Form.Item>
|
<Statistic
|
||||||
</Form>
|
title={t("jobs.fields.ded_amt")}
|
||||||
</Card>
|
value={Dinero(
|
||||||
);
|
job.job_totals.totals.custPayable.deductible
|
||||||
|
).toFormat()}
|
||||||
|
/>
|
||||||
|
<Statistic
|
||||||
|
title={t("jobs.labels.total_cust_payable")}
|
||||||
|
value={Dinero(job.job_totals.totals.custPayable.total).toFormat()}
|
||||||
|
/>
|
||||||
|
<Statistic
|
||||||
|
title={t("jobs.labels.net_repairs")}
|
||||||
|
value={Dinero(job.job_totals.totals.net_repairs).toFormat()}
|
||||||
|
/>
|
||||||
|
</Space>
|
||||||
|
<Form.List name={["payers"]}>
|
||||||
|
{(fields, {add, remove}) => {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
{fields.map((field, index) => (
|
||||||
|
<Form.Item key={field.key}>
|
||||||
|
<Space wrap>
|
||||||
|
<Form.Item
|
||||||
|
label={t("jobs.fields.dms.payer.name")}
|
||||||
|
key={`${index}name`}
|
||||||
|
name={[field.name, "name"]}
|
||||||
|
rules={[
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<Select
|
||||||
|
style={{minWidth: "15rem"}}
|
||||||
|
onSelect={(value) => handlePayerSelect(value, index)}
|
||||||
|
>
|
||||||
|
{bodyshop.cdk_configuration &&
|
||||||
|
bodyshop.cdk_configuration.payers &&
|
||||||
|
bodyshop.cdk_configuration.payers.map((payer) => (
|
||||||
|
<Select.Option key={payer.name}>
|
||||||
|
{payer.name}
|
||||||
|
</Select.Option>
|
||||||
|
))}
|
||||||
|
</Select>
|
||||||
|
</Form.Item>
|
||||||
|
|
||||||
|
<Form.Item
|
||||||
|
label={t("jobs.fields.dms.payer.dms_acctnumber")}
|
||||||
|
key={`${index}dms_acctnumber`}
|
||||||
|
name={[field.name, "dms_acctnumber"]}
|
||||||
|
rules={[
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<Input disabled/>
|
||||||
|
</Form.Item>
|
||||||
|
|
||||||
|
<Form.Item
|
||||||
|
label={t("jobs.fields.dms.payer.amount")}
|
||||||
|
key={`${index}amount`}
|
||||||
|
name={[field.name, "amount"]}
|
||||||
|
rules={[
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<CurrencyInput min={0}/>
|
||||||
|
</Form.Item>
|
||||||
|
|
||||||
|
<Form.Item
|
||||||
|
label={
|
||||||
|
<div>
|
||||||
|
{t("jobs.fields.dms.payer.controlnumber")}{" "}
|
||||||
|
<Dropdown menu={{
|
||||||
|
items: bodyshop.cdk_configuration.controllist?.map((key, idx) => ({
|
||||||
|
key: idx,
|
||||||
|
label: key.name,
|
||||||
|
onClick: () => {
|
||||||
|
form.setFieldsValue({
|
||||||
|
payers: form.getFieldValue("payers").map((row, mapIndex) => {
|
||||||
|
if (index !== mapIndex) return row;
|
||||||
|
return {
|
||||||
|
...row,
|
||||||
|
controlnumber: key.controlnumber,
|
||||||
|
};
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
},
|
||||||
|
}))
|
||||||
|
}}>
|
||||||
|
<a href=" #" onClick={(e) => e.preventDefault()}>
|
||||||
|
<DownOutlined/>
|
||||||
|
</a>
|
||||||
|
</Dropdown>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
key={`${index}controlnumber`}
|
||||||
|
name={[field.name, "controlnumber"]}
|
||||||
|
rules={[
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<Input/>
|
||||||
|
</Form.Item>
|
||||||
|
|
||||||
|
<Form.Item shouldUpdate>
|
||||||
|
{() => {
|
||||||
|
const payers = form.getFieldValue("payers");
|
||||||
|
|
||||||
|
const row = payers && payers[index];
|
||||||
|
|
||||||
|
const cdkPayer =
|
||||||
|
bodyshop.cdk_configuration.payers &&
|
||||||
|
bodyshop.cdk_configuration.payers.find(
|
||||||
|
(i) => i && row && i.name === row.name
|
||||||
|
);
|
||||||
|
if (
|
||||||
|
i18n.exists(`jobs.fields.${cdkPayer?.control_type}`)
|
||||||
|
)
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
{cdkPayer &&
|
||||||
|
t(`jobs.fields.${cdkPayer?.control_type}`)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
else if (
|
||||||
|
i18n.exists(
|
||||||
|
`jobs.fields.dms.control_type.${cdkPayer?.control_type}`
|
||||||
|
)
|
||||||
|
) {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
{cdkPayer &&
|
||||||
|
t(
|
||||||
|
`jobs.fields.dms.control_type.${cdkPayer?.control_type}`
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
</Form.Item>
|
||||||
|
|
||||||
|
<DeleteFilled
|
||||||
|
onClick={() => {
|
||||||
|
remove(field.name);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Space>
|
||||||
|
</Form.Item>
|
||||||
|
))}
|
||||||
|
<Form.Item>
|
||||||
|
<Button
|
||||||
|
disabled={!(fields.length < 3)}
|
||||||
|
onClick={() => {
|
||||||
|
if (fields.length < 3) add();
|
||||||
|
}}
|
||||||
|
style={{width: "100%"}}
|
||||||
|
>
|
||||||
|
{t("jobs.actions.dms.addpayer")}
|
||||||
|
</Button>
|
||||||
|
</Form.Item>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
</Form.List>
|
||||||
|
<Form.Item shouldUpdate>
|
||||||
|
{() => {
|
||||||
|
//Perform Calculation to determine discrepancy.
|
||||||
|
let totalAllocated = Dinero();
|
||||||
|
|
||||||
|
const payers = form.getFieldValue("payers");
|
||||||
|
payers &&
|
||||||
|
payers.forEach((payer) => {
|
||||||
|
totalAllocated = totalAllocated.add(
|
||||||
|
Dinero({amount: Math.round((payer?.amount || 0) * 100)})
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
const totals =
|
||||||
|
socket.allocationsSummary &&
|
||||||
|
socket.allocationsSummary.reduce(
|
||||||
|
(acc, val) => {
|
||||||
|
return {
|
||||||
|
totalSale: acc.totalSale.add(Dinero(val.sale)),
|
||||||
|
totalCost: acc.totalCost.add(Dinero(val.cost)),
|
||||||
|
};
|
||||||
|
},
|
||||||
|
{
|
||||||
|
totalSale: Dinero(),
|
||||||
|
totalCost: Dinero(),
|
||||||
|
}
|
||||||
|
);
|
||||||
|
const discrep = totals
|
||||||
|
? totals.totalSale.subtract(totalAllocated)
|
||||||
|
: Dinero();
|
||||||
|
return (
|
||||||
|
<Space size="large" wrap align="center">
|
||||||
|
<Statistic
|
||||||
|
title={t("jobs.labels.subtotal")}
|
||||||
|
value={(totals ? totals.totalSale : Dinero()).toFormat()}
|
||||||
|
/>
|
||||||
|
<Typography.Title>-</Typography.Title>
|
||||||
|
<Statistic
|
||||||
|
title={t("jobs.labels.dms.totalallocated")}
|
||||||
|
value={totalAllocated.toFormat()}
|
||||||
|
/>
|
||||||
|
<Typography.Title>=</Typography.Title>
|
||||||
|
<Statistic
|
||||||
|
title={t("jobs.labels.dms.notallocated")}
|
||||||
|
valueStyle={{
|
||||||
|
color: discrep.getAmount() === 0 ? "green" : "red",
|
||||||
|
}}
|
||||||
|
value={discrep.toFormat()}
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
disabled={
|
||||||
|
!socket.allocationsSummary || discrep.getAmount() !== 0
|
||||||
|
}
|
||||||
|
htmlType="submit"
|
||||||
|
>
|
||||||
|
{t("jobs.actions.dms.post")}
|
||||||
|
</Button>
|
||||||
|
</Space>
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
</Form.Item>
|
||||||
|
</Form>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -60,9 +60,9 @@ export function DocumentEditorComponent({ currentUser, bodyshop, document }) {
|
|||||||
markerArea.current = new markerjs2.MarkerArea(imgRef.current);
|
markerArea.current = new markerjs2.MarkerArea(imgRef.current);
|
||||||
|
|
||||||
// attach an event handler to assign annotated image back to our image element
|
// attach an event handler to assign annotated image back to our image element
|
||||||
markerArea.current.addCloseEventListener((closeEvent) => {});
|
markerArea.current.addEventListener("close", (closeEvent) => {});
|
||||||
|
|
||||||
markerArea.current.addRenderEventListener((dataUrl) => {
|
markerArea.current.addEventListener("render", (dataUrl) => {
|
||||||
imgRef.current.src = dataUrl;
|
imgRef.current.src = dataUrl;
|
||||||
markerArea.current.close();
|
markerArea.current.close();
|
||||||
triggerUpload(dataUrl);
|
triggerUpload(dataUrl);
|
||||||
|
|||||||
@@ -4,7 +4,7 @@ import queryString from "query-string";
|
|||||||
import React, { useEffect } from "react";
|
import React, { useEffect } from "react";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
import { connect } from "react-redux";
|
import { connect } from "react-redux";
|
||||||
import { useLocation } from "react-router";
|
import { useLocation } from "react-router-dom";
|
||||||
import { QUERY_BODYSHOP } from "../../graphql/bodyshop.queries";
|
import { QUERY_BODYSHOP } from "../../graphql/bodyshop.queries";
|
||||||
import { GET_DOCUMENT_BY_PK } from "../../graphql/documents.queries";
|
import { GET_DOCUMENT_BY_PK } from "../../graphql/documents.queries";
|
||||||
import { setBodyshop } from "../../redux/user/user.actions";
|
import { setBodyshop } from "../../redux/user/user.actions";
|
||||||
|
|||||||
@@ -1,267 +1,262 @@
|
|||||||
import { UploadOutlined, UserAddOutlined } from "@ant-design/icons";
|
import {UploadOutlined, UserAddOutlined} from "@ant-design/icons";
|
||||||
import {
|
import {Button, Divider, Dropdown, Form, Input, Select, Space, Tabs, Upload,} from "antd";
|
||||||
Button,
|
|
||||||
Divider,
|
|
||||||
Dropdown,
|
|
||||||
Form,
|
|
||||||
Input,
|
|
||||||
Menu,
|
|
||||||
Select,
|
|
||||||
Space,
|
|
||||||
Tabs,
|
|
||||||
Upload,
|
|
||||||
} from "antd";
|
|
||||||
import _ from "lodash";
|
import _ from "lodash";
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import { useTranslation } from "react-i18next";
|
import {useTranslation} from "react-i18next";
|
||||||
import { connect } from "react-redux";
|
import {connect} from "react-redux";
|
||||||
import { createStructuredSelector } from "reselect";
|
import {createStructuredSelector} from "reselect";
|
||||||
import { selectEmailConfig } from "../../redux/email/email.selectors";
|
import {selectEmailConfig} from "../../redux/email/email.selectors";
|
||||||
import {
|
import {selectBodyshop, selectCurrentUser,} from "../../redux/user/user.selectors";
|
||||||
selectBodyshop,
|
import {CreateExplorerLinkForJob} from "../../utils/localmedia";
|
||||||
selectCurrentUser,
|
|
||||||
} from "../../redux/user/user.selectors";
|
|
||||||
import { CreateExplorerLinkForJob } from "../../utils/localmedia";
|
|
||||||
import EmailDocumentsComponent from "../email-documents/email-documents.component";
|
import EmailDocumentsComponent from "../email-documents/email-documents.component";
|
||||||
|
|
||||||
const mapStateToProps = createStructuredSelector({
|
const mapStateToProps = createStructuredSelector({
|
||||||
bodyshop: selectBodyshop,
|
bodyshop: selectBodyshop,
|
||||||
currentUser: selectCurrentUser,
|
currentUser: selectCurrentUser,
|
||||||
emailConfig: selectEmailConfig,
|
emailConfig: selectEmailConfig,
|
||||||
});
|
});
|
||||||
const mapDispatchToProps = (dispatch) => ({
|
const mapDispatchToProps = (dispatch) => ({
|
||||||
//setUserLanguage: language => dispatch(setUserLanguage(language))
|
//setUserLanguage: language => dispatch(setUserLanguage(language))
|
||||||
});
|
});
|
||||||
export default connect(
|
export default connect(
|
||||||
mapStateToProps,
|
mapStateToProps,
|
||||||
mapDispatchToProps
|
mapDispatchToProps
|
||||||
)(EmailOverlayComponent);
|
)(EmailOverlayComponent);
|
||||||
|
|
||||||
export function EmailOverlayComponent({
|
export function EmailOverlayComponent({
|
||||||
emailConfig,
|
emailConfig,
|
||||||
form,
|
form,
|
||||||
selectedMediaState,
|
selectedMediaState,
|
||||||
bodyshop,
|
bodyshop,
|
||||||
currentUser,
|
currentUser,
|
||||||
}) {
|
}) {
|
||||||
const { t } = useTranslation();
|
const {t} = useTranslation();
|
||||||
const handleClick = ({ item, key, keyPath }) => {
|
const handleClick = ({item, key, keyPath}) => {
|
||||||
const email = item.props.value;
|
const email = item.props.value;
|
||||||
form.setFieldsValue({
|
form.setFieldsValue({
|
||||||
to: _.uniq([
|
to: _.uniq([
|
||||||
...form.getFieldValue("to"),
|
...form.getFieldValue("to"),
|
||||||
...(typeof email === "string" ? [email] : email),
|
...(typeof email === "string" ? [email] : email),
|
||||||
]),
|
]),
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
const handle_CC_Click = ({ item, key, keyPath }) => {
|
const handle_CC_Click = ({item, key, keyPath}) => {
|
||||||
const email = item.props.value;
|
const email = item.props.value;
|
||||||
form.setFieldsValue({
|
form.setFieldsValue({
|
||||||
cc: _.uniq([
|
cc: _.uniq([
|
||||||
...(form.getFieldValue("cc") || ""),
|
...(form.getFieldValue("cc") || ""),
|
||||||
...(typeof email === "string" ? [email] : email),
|
...(typeof email === "string" ? [email] : email),
|
||||||
]),
|
]),
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
const menu = (
|
const emailsToMenu = {
|
||||||
<div>
|
items: [
|
||||||
<Menu onClick={handleClick}>
|
...bodyshop.employees
|
||||||
{bodyshop.employees
|
.filter((e) => e.user_email)
|
||||||
.filter((e) => e.user_email)
|
.map((e, idx) => ({
|
||||||
.map((e, idx) => (
|
key: idx,
|
||||||
<Menu.Item value={e.user_email} key={idx}>
|
label: `${e.first_name} ${e.last_name}`,
|
||||||
{`${e.first_name} ${e.last_name}`}
|
value: e.user_email,
|
||||||
</Menu.Item>
|
})),
|
||||||
))}
|
...bodyshop.md_to_emails.map((e, idx) => ({
|
||||||
{bodyshop.md_to_emails.map((e, idx) => (
|
key: idx + "group",
|
||||||
<Menu.Item value={e.emails} key={idx + "group"}>
|
label: e.label,
|
||||||
{e.label}
|
value: e.emails,
|
||||||
</Menu.Item>
|
})),
|
||||||
))}
|
],
|
||||||
</Menu>
|
onClick: handleClick,
|
||||||
</div>
|
};
|
||||||
);
|
const menuCC = {
|
||||||
|
items: [
|
||||||
|
...bodyshop.employees
|
||||||
|
.filter((e) => e.user_email)
|
||||||
|
.map((e, idx) => ({
|
||||||
|
key: idx,
|
||||||
|
label: `${e.first_name} ${e.last_name}`,
|
||||||
|
value: e.user_email,
|
||||||
|
})),
|
||||||
|
...bodyshop.md_to_emails.map((e, idx) => ({
|
||||||
|
key: idx + "group",
|
||||||
|
label: e.label,
|
||||||
|
value: e.emails,
|
||||||
|
})),
|
||||||
|
],
|
||||||
|
onClick: handle_CC_Click,
|
||||||
|
};
|
||||||
|
|
||||||
const menuCC = (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<Menu onClick={handle_CC_Click}>
|
<Form.Item
|
||||||
{bodyshop.employees
|
label={t("emails.fields.from")}
|
||||||
.filter((e) => e.user_email)
|
name="from"
|
||||||
.map((e, idx) => (
|
rules={[
|
||||||
<Menu.Item value={e.user_email} key={idx}>
|
{
|
||||||
{`${e.first_name} ${e.last_name}`}
|
required: true,
|
||||||
</Menu.Item>
|
//message: t("general.validation.required"),
|
||||||
))}
|
},
|
||||||
{bodyshop.md_to_emails.map((e, idx) => (
|
]}
|
||||||
<Menu.Item value={e.emails} key={idx + "group"}>
|
|
||||||
{e.label}
|
|
||||||
</Menu.Item>
|
|
||||||
))}
|
|
||||||
</Menu>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<Form.Item
|
|
||||||
label={t("emails.fields.from")}
|
|
||||||
name="from"
|
|
||||||
rules={[
|
|
||||||
{
|
|
||||||
required: true,
|
|
||||||
//message: t("general.validation.required"),
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
<Select>
|
|
||||||
<Select.Option key={currentUser.email}>
|
|
||||||
{currentUser.email}
|
|
||||||
</Select.Option>
|
|
||||||
<Select.Option key={bodyshop.email}>{bodyshop.email}</Select.Option>
|
|
||||||
{bodyshop.md_from_emails &&
|
|
||||||
bodyshop.md_from_emails.map((e) => (
|
|
||||||
<Select.Option key={e}>{e}</Select.Option>
|
|
||||||
))}
|
|
||||||
</Select>
|
|
||||||
</Form.Item>
|
|
||||||
<Form.Item
|
|
||||||
label={
|
|
||||||
<Space>
|
|
||||||
{t("emails.fields.to")}
|
|
||||||
<Dropdown overlay={menu}>
|
|
||||||
<a
|
|
||||||
className="ant-dropdown-link"
|
|
||||||
href=" #"
|
|
||||||
onClick={(e) => e.preventDefault()}
|
|
||||||
>
|
|
||||||
<UserAddOutlined />
|
|
||||||
</a>
|
|
||||||
</Dropdown>
|
|
||||||
</Space>
|
|
||||||
}
|
|
||||||
name="to"
|
|
||||||
rules={[
|
|
||||||
{
|
|
||||||
required: true,
|
|
||||||
//message: t("general.validation.required"),
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
<Select mode="tags" tokenSeparators={[",", ";"]} />
|
|
||||||
</Form.Item>
|
|
||||||
<Form.Item
|
|
||||||
label={
|
|
||||||
<Space>
|
|
||||||
{t("emails.fields.cc")}
|
|
||||||
<Dropdown overlay={menuCC}>
|
|
||||||
<a
|
|
||||||
className="ant-dropdown-link"
|
|
||||||
href=" #"
|
|
||||||
onClick={(e) => e.preventDefault()}
|
|
||||||
>
|
|
||||||
<UserAddOutlined />
|
|
||||||
</a>
|
|
||||||
</Dropdown>
|
|
||||||
</Space>
|
|
||||||
}
|
|
||||||
name="cc"
|
|
||||||
>
|
|
||||||
<Select mode="tags" tokenSeparators={[",", ";"]} />
|
|
||||||
</Form.Item>
|
|
||||||
<Form.Item
|
|
||||||
label={t("emails.fields.subject")}
|
|
||||||
name="subject"
|
|
||||||
rules={[
|
|
||||||
{
|
|
||||||
required: true,
|
|
||||||
//message: t("general.validation.required"),
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
<Input />
|
|
||||||
</Form.Item>
|
|
||||||
|
|
||||||
<Divider>{t("emails.labels.preview")}</Divider>
|
|
||||||
{bodyshop.attach_pdf_to_email && (
|
|
||||||
<strong>{t("emails.labels.pdfcopywillbeattached")}</strong>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<Form.Item shouldUpdate>
|
|
||||||
{() => {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
padding: "1rem",
|
|
||||||
|
|
||||||
backgroundColor: "lightgray",
|
|
||||||
borderLeft: "6px solid #2196F3",
|
|
||||||
}}
|
|
||||||
dangerouslySetInnerHTML={{ __html: form.getFieldValue("html") }}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}}
|
|
||||||
</Form.Item>
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tabs.TabPane tab={t("emails.labels.documents")} key="documents">
|
|
||||||
<EmailDocumentsComponent
|
|
||||||
selectedMediaState={selectedMediaState}
|
|
||||||
form={form}
|
|
||||||
/>
|
|
||||||
</Tabs.TabPane>
|
|
||||||
|
|
||||||
<Tabs.TabPane tab={t("emails.labels.attachments")} key="attachments">
|
|
||||||
{bodyshop.uselocalmediaserver && emailConfig.jobid && (
|
|
||||||
<a href={CreateExplorerLinkForJob({ jobid: emailConfig.jobid })}>
|
|
||||||
<Button>{t("documents.labels.openinexplorer")}</Button>
|
|
||||||
</a>
|
|
||||||
)}
|
|
||||||
<Form.Item
|
|
||||||
name="fileList"
|
|
||||||
valuePropName="fileList"
|
|
||||||
getValueFromEvent={(e) => {
|
|
||||||
if (Array.isArray(e)) {
|
|
||||||
return e;
|
|
||||||
}
|
|
||||||
return e && e.fileList;
|
|
||||||
}}
|
|
||||||
rules={[
|
|
||||||
({ getFieldValue }) => ({
|
|
||||||
validator(rule, value) {
|
|
||||||
const totalSize = value.reduce(
|
|
||||||
(acc, val) => (acc = acc + val.size),
|
|
||||||
0
|
|
||||||
);
|
|
||||||
|
|
||||||
const limit =
|
|
||||||
10485760 - new Blob([form.getFieldValue("html")]).size;
|
|
||||||
|
|
||||||
if (totalSize > limit) {
|
|
||||||
return Promise.reject(t("general.errors.sizelimit"));
|
|
||||||
}
|
|
||||||
return Promise.resolve();
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
<Upload.Dragger
|
|
||||||
beforeUpload={Upload.LIST_IGNORE}
|
|
||||||
multiple
|
|
||||||
listType="picture-card"
|
|
||||||
>
|
>
|
||||||
<>
|
<Select>
|
||||||
<p className="ant-upload-drag-icon">
|
<Select.Option key={currentUser.email}>
|
||||||
<UploadOutlined />
|
{currentUser.email}
|
||||||
</p>
|
</Select.Option>
|
||||||
<p className="ant-upload-text">
|
<Select.Option key={bodyshop.email}>{bodyshop.email}</Select.Option>
|
||||||
Click or drag files to this area to upload.
|
{bodyshop.md_from_emails &&
|
||||||
</p>
|
bodyshop.md_from_emails.map((e) => (
|
||||||
</>
|
<Select.Option key={e}>{e}</Select.Option>
|
||||||
</Upload.Dragger>
|
))}
|
||||||
</Form.Item>
|
</Select>
|
||||||
</Tabs.TabPane>
|
</Form.Item>
|
||||||
</Tabs>
|
<Form.Item
|
||||||
</div>
|
label={
|
||||||
);
|
<Space>
|
||||||
|
{t("emails.fields.to")}
|
||||||
|
<Dropdown menu={emailsToMenu}>
|
||||||
|
<a
|
||||||
|
className="ant-dropdown-link"
|
||||||
|
href=" #"
|
||||||
|
onClick={(e) => e.preventDefault()}
|
||||||
|
>
|
||||||
|
<UserAddOutlined/>
|
||||||
|
</a>
|
||||||
|
</Dropdown>
|
||||||
|
</Space>
|
||||||
|
}
|
||||||
|
name="to"
|
||||||
|
rules={[
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
//message: t("general.validation.required"),
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<Select mode="tags" tokenSeparators={[",", ";"]}/>
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item
|
||||||
|
label={
|
||||||
|
<Space>
|
||||||
|
{t("emails.fields.cc")}
|
||||||
|
<Dropdown menu={menuCC}>
|
||||||
|
<a
|
||||||
|
className="ant-dropdown-link"
|
||||||
|
href=" #"
|
||||||
|
onClick={(e) => e.preventDefault()}
|
||||||
|
>
|
||||||
|
<UserAddOutlined/>
|
||||||
|
</a>
|
||||||
|
</Dropdown>
|
||||||
|
</Space>
|
||||||
|
}
|
||||||
|
name="cc"
|
||||||
|
>
|
||||||
|
<Select mode="tags" tokenSeparators={[",", ";"]}/>
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item
|
||||||
|
label={t("emails.fields.subject")}
|
||||||
|
name="subject"
|
||||||
|
rules={[
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
//message: t("general.validation.required"),
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<Input/>
|
||||||
|
</Form.Item>
|
||||||
|
|
||||||
|
<Divider>{t("emails.labels.preview")}</Divider>
|
||||||
|
{bodyshop.attach_pdf_to_email && (
|
||||||
|
<strong>{t("emails.labels.pdfcopywillbeattached")}</strong>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<Form.Item shouldUpdate>
|
||||||
|
{() => {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
padding: "1rem",
|
||||||
|
|
||||||
|
backgroundColor: "lightgray",
|
||||||
|
borderLeft: "6px solid #2196F3",
|
||||||
|
}}
|
||||||
|
dangerouslySetInnerHTML={{__html: form.getFieldValue("html")}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
</Form.Item>
|
||||||
|
|
||||||
|
<Tabs
|
||||||
|
defaultActiveKey="documents"
|
||||||
|
items={[
|
||||||
|
{
|
||||||
|
key: "documents",
|
||||||
|
label: t("emails.labels.documents"),
|
||||||
|
children: (
|
||||||
|
<EmailDocumentsComponent
|
||||||
|
selectedMediaState={selectedMediaState}
|
||||||
|
form={form}
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "attachments",
|
||||||
|
label: t("emails.labels.attachments"),
|
||||||
|
children: (
|
||||||
|
<>
|
||||||
|
{bodyshop.uselocalmediaserver && emailConfig.jobid && (
|
||||||
|
<a href={CreateExplorerLinkForJob({jobid: emailConfig.jobid})}>
|
||||||
|
<Button>{t("documents.labels.openinexplorer")}</Button>
|
||||||
|
</a>
|
||||||
|
)}
|
||||||
|
<Form.Item
|
||||||
|
name="fileList"
|
||||||
|
valuePropName="fileList"
|
||||||
|
getValueFromEvent={(e) => {
|
||||||
|
if (Array.isArray(e)) {
|
||||||
|
return e;
|
||||||
|
}
|
||||||
|
return e && e.fileList;
|
||||||
|
}}
|
||||||
|
rules={[
|
||||||
|
({getFieldValue}) => ({
|
||||||
|
validator(rule, value) {
|
||||||
|
const totalSize = value.reduce(
|
||||||
|
(acc, val) => (acc = acc + val.size),
|
||||||
|
0
|
||||||
|
);
|
||||||
|
|
||||||
|
const limit =
|
||||||
|
10485760 - new Blob([form.getFieldValue("html")]).size;
|
||||||
|
|
||||||
|
if (totalSize > limit) {
|
||||||
|
return Promise.reject(t("general.errors.sizelimit"));
|
||||||
|
}
|
||||||
|
return Promise.resolve();
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<Upload.Dragger
|
||||||
|
beforeUpload={Upload.LIST_IGNORE}
|
||||||
|
multiple
|
||||||
|
listType="picture-card"
|
||||||
|
>
|
||||||
|
<>
|
||||||
|
<p className="ant-upload-drag-icon">
|
||||||
|
<UploadOutlined/>
|
||||||
|
</p>
|
||||||
|
<p className="ant-upload-text">
|
||||||
|
Click or drag files to this area to upload.
|
||||||
|
</p>
|
||||||
|
</>
|
||||||
|
</Upload.Dragger>
|
||||||
|
</Form.Item>
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -174,7 +174,7 @@ export function EmailOverlayContainer({
|
|||||||
return (
|
return (
|
||||||
<Modal
|
<Modal
|
||||||
destroyOnClose={true}
|
destroyOnClose={true}
|
||||||
visible={modalVisible}
|
open={modalVisible}
|
||||||
maskClosable={false}
|
maskClosable={false}
|
||||||
width={"80%"}
|
width={"80%"}
|
||||||
onOk={() => form.submit()}
|
onOk={() => form.submit()}
|
||||||
|
|||||||
@@ -7,7 +7,7 @@ import { selectCurrentUser } from "../../redux/user/user.selectors";
|
|||||||
import { GenerateDocument } from "../../utils/RenderTemplate";
|
import { GenerateDocument } from "../../utils/RenderTemplate";
|
||||||
import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component";
|
import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component";
|
||||||
import LayoutFormRow from "../layout-form-row/layout-form-row.component";
|
import LayoutFormRow from "../layout-form-row/layout-form-row.component";
|
||||||
import moment from "moment";
|
import dayjs from "../../utils/day";
|
||||||
|
|
||||||
const mapStateToProps = createStructuredSelector({
|
const mapStateToProps = createStructuredSelector({
|
||||||
currentUser: selectCurrentUser,
|
currentUser: selectCurrentUser,
|
||||||
@@ -27,16 +27,16 @@ export function EmailTestComponent({ currentUser, setEmailOptions }) {
|
|||||||
variables: {
|
variables: {
|
||||||
...(values.start
|
...(values.start
|
||||||
? {
|
? {
|
||||||
start: moment(values.start).startOf("day").format("YYYY-MM-DD"),
|
start: dayjs(values.start).startOf("day").format("YYYY-MM-DD"),
|
||||||
}
|
}
|
||||||
: {}),
|
: {}),
|
||||||
...(values.end
|
...(values.end
|
||||||
? { end: moment(values.end).endOf("day").format("YYYY-MM-DD") }
|
? { end: dayjs(values.end).endOf("day").format("YYYY-MM-DD") }
|
||||||
: {}),
|
: {}),
|
||||||
...(values.start
|
...(values.start
|
||||||
? { starttz: moment(values.start).startOf("day") }
|
? { starttz: dayjs(values.start).startOf("day") }
|
||||||
: {}),
|
: {}),
|
||||||
...(values.end ? { endtz: moment(values.end).endOf("day") } : {}),
|
...(values.end ? { endtz: dayjs(values.end).endOf("day") } : {}),
|
||||||
|
|
||||||
...(values.id ? { id: values.id } : {}),
|
...(values.id ? { id: values.id } : {}),
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import moment from "moment";
|
import dayjs from "../../utils/day";
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
import { connect } from "react-redux";
|
import { connect } from "react-redux";
|
||||||
@@ -34,7 +34,7 @@ function FeatureWrapper({
|
|||||||
export function HasFeatureAccess({ featureName, bodyshop }) {
|
export function HasFeatureAccess({ featureName, bodyshop }) {
|
||||||
return (
|
return (
|
||||||
bodyshop.features.allAccess ||
|
bodyshop.features.allAccess ||
|
||||||
moment(bodyshop.features[featureName]).isAfter(moment())
|
dayjs(bodyshop.features[featureName]).isAfter(dayjs())
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1,31 +1,29 @@
|
|||||||
import { DatePicker } from "antd";
|
import { DatePicker } from "antd";
|
||||||
import moment from "moment";
|
import dayjs from "../../utils/day";
|
||||||
import React, { useRef } from "react";
|
import React, { useRef } from "react";
|
||||||
//To be used as a form element only.
|
|
||||||
|
|
||||||
import { connect } from "react-redux";
|
import { connect } from "react-redux";
|
||||||
import { createStructuredSelector } from "reselect";
|
import { createStructuredSelector } from "reselect";
|
||||||
import { selectBodyshop } from "../../redux/user/user.selectors";
|
import { selectBodyshop } from "../../redux/user/user.selectors";
|
||||||
const mapStateToProps = createStructuredSelector({
|
const mapStateToProps = createStructuredSelector({
|
||||||
//currentUser: selectCurrentUser
|
|
||||||
bodyshop: selectBodyshop,
|
bodyshop: selectBodyshop,
|
||||||
});
|
});
|
||||||
const mapDispatchToProps = (dispatch) => ({
|
const mapDispatchToProps = (dispatch) => ({});
|
||||||
//setUserLanguage: language => dispatch(setUserLanguage(language))
|
|
||||||
});
|
|
||||||
export default connect(mapStateToProps, mapDispatchToProps)(FormDatePicker);
|
export default connect(mapStateToProps, mapDispatchToProps)(FormDatePicker);
|
||||||
|
|
||||||
const dateFormat = "MM/DD/YYYY";
|
const dateFormat = "MM/DD/YYYY";
|
||||||
|
|
||||||
|
|
||||||
|
// TODO, this is causing a dirty change when it should not (click the picker, click off the picker)
|
||||||
export function FormDatePicker({
|
export function FormDatePicker({
|
||||||
bodyshop,
|
bodyshop,
|
||||||
value,
|
value,
|
||||||
onChange,
|
onChange,
|
||||||
onBlur,
|
onBlur,
|
||||||
onlyFuture,
|
onlyFuture,
|
||||||
isDateOnly = true,
|
isDateOnly = true,
|
||||||
...restProps
|
...restProps
|
||||||
}) {
|
}) {
|
||||||
const ref = useRef();
|
const ref = useRef();
|
||||||
|
|
||||||
const handleChange = (newDate) => {
|
const handleChange = (newDate) => {
|
||||||
@@ -37,8 +35,7 @@ export function FormDatePicker({
|
|||||||
const handleKeyDown = (e) => {
|
const handleKeyDown = (e) => {
|
||||||
if (e.key.toLowerCase() === "t") {
|
if (e.key.toLowerCase() === "t") {
|
||||||
if (onChange) {
|
if (onChange) {
|
||||||
onChange(isDateOnly ? moment().format("YYYY-MM-DD") : moment());
|
onChange(isDateOnly ? dayjs().format("YYYY-MM-DD") : dayjs());
|
||||||
// if (ref.current && ref.current.blur) ref.current.blur();
|
|
||||||
}
|
}
|
||||||
} else if (e.key.toLowerCase() === "enter") {
|
} else if (e.key.toLowerCase() === "enter") {
|
||||||
if (ref.current && ref.current.blur) ref.current.blur();
|
if (ref.current && ref.current.blur) ref.current.blur();
|
||||||
@@ -49,14 +46,19 @@ export function FormDatePicker({
|
|||||||
const v = e.target.value;
|
const v = e.target.value;
|
||||||
if (!v) return;
|
if (!v) return;
|
||||||
|
|
||||||
const _a = moment(
|
const _a = dayjs(
|
||||||
v,
|
v,
|
||||||
["MMDDYY", "MMDDYYYY", "MMDD", "MM/DD/YY"],
|
["MMDDYY", "MMDDYYYY", "MMDD", "MM/DD/YY"],
|
||||||
"en",
|
"en",
|
||||||
false
|
false
|
||||||
);
|
);
|
||||||
|
|
||||||
if (_a.isValid() && value && value.isValid && value.isValid()) {
|
if (
|
||||||
|
_a.isValid()
|
||||||
|
&& value
|
||||||
|
&& value.isValid
|
||||||
|
&& value.isValid()
|
||||||
|
) {
|
||||||
_a.set({
|
_a.set({
|
||||||
hours: value.hours(),
|
hours: value.hours(),
|
||||||
minutes: value.minutes(),
|
minutes: value.minutes(),
|
||||||
@@ -67,10 +69,10 @@ export function FormDatePicker({
|
|||||||
|
|
||||||
if (_a.isValid() && onChange) {
|
if (_a.isValid() && onChange) {
|
||||||
if (onlyFuture) {
|
if (onlyFuture) {
|
||||||
if (moment().subtract(1, "day").isBefore(_a)) {
|
if (dayjs().subtract(1, "day").isBefore(_a)) {
|
||||||
onChange(isDateOnly ? _a.format("YYYY-MM-DD") : _a);
|
onChange(isDateOnly ? _a.format("YYYY-MM-DD") : _a);
|
||||||
} else {
|
} else {
|
||||||
onChange(isDateOnly ? moment().format("YYYY-MM-DD") : moment());
|
onChange(isDateOnly ? dayjs().format("YYYY-MM-DD") : dayjs());
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
onChange(isDateOnly ? _a.format("YYYY-MM-DD") : _a);
|
onChange(isDateOnly ? _a.format("YYYY-MM-DD") : _a);
|
||||||
@@ -79,20 +81,20 @@ export function FormDatePicker({
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div onKeyDown={handleKeyDown}>
|
<div onKeyDown={handleKeyDown}>
|
||||||
<DatePicker
|
<DatePicker
|
||||||
ref={ref}
|
ref={ref}
|
||||||
value={value ? moment(value) : null}
|
value={value ? dayjs(value) : null}
|
||||||
onChange={handleChange}
|
onChange={handleChange}
|
||||||
format={dateFormat}
|
format={dateFormat}
|
||||||
onBlur={onBlur || handleBlur}
|
onBlur={onBlur || handleBlur}
|
||||||
showToday={false}
|
showToday={false}
|
||||||
disabledTime
|
disabledTime
|
||||||
{...(onlyFuture && {
|
{...(onlyFuture && {
|
||||||
disabledDate: (d) => moment().subtract(1, "day").isAfter(d),
|
disabledDate: (d) => dayjs().subtract(1, "day").isAfter(d),
|
||||||
})}
|
})}
|
||||||
{...restProps}
|
{...restProps}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -2,7 +2,7 @@ import React, { forwardRef } from "react";
|
|||||||
//import DatePicker from "react-datepicker";
|
//import DatePicker from "react-datepicker";
|
||||||
//import "react-datepicker/src/stylesheets/datepicker.scss";
|
//import "react-datepicker/src/stylesheets/datepicker.scss";
|
||||||
import { TimePicker } from "antd";
|
import { TimePicker } from "antd";
|
||||||
import moment from "moment";
|
import dayjs from "../../utils/day";
|
||||||
import FormDatePicker from "../form-date-picker/form-date-picker.component";
|
import FormDatePicker from "../form-date-picker/form-date-picker.component";
|
||||||
//To be used as a form element only.
|
//To be used as a form element only.
|
||||||
|
|
||||||
@@ -21,7 +21,7 @@ const DateTimePicker = (
|
|||||||
<FormDatePicker
|
<FormDatePicker
|
||||||
{...restProps}
|
{...restProps}
|
||||||
{...(onlyFuture && {
|
{...(onlyFuture && {
|
||||||
disabledDate: (d) => moment().subtract(1, "day").isAfter(d),
|
disabledDate: (d) => dayjs().subtract(1, "day").isAfter(d),
|
||||||
})}
|
})}
|
||||||
value={value}
|
value={value}
|
||||||
onBlur={onBlur}
|
onBlur={onBlur}
|
||||||
@@ -31,9 +31,9 @@ const DateTimePicker = (
|
|||||||
/>
|
/>
|
||||||
|
|
||||||
<TimePicker
|
<TimePicker
|
||||||
value={value ? moment(value) : null}
|
value={value ? dayjs(value) : null}
|
||||||
{...(onlyFuture && {
|
{...(onlyFuture && {
|
||||||
disabledDate: (d) => moment().isAfter(d),
|
disabledDate: (d) => dayjs().isAfter(d),
|
||||||
})}
|
})}
|
||||||
onChange={onChange}
|
onChange={onChange}
|
||||||
showSecond={false}
|
showSecond={false}
|
||||||
|
|||||||
@@ -2,8 +2,8 @@ import React from "react";
|
|||||||
import { Form, Space } from "antd";
|
import { Form, Space } from "antd";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
import AlertComponent from "../alert/alert.component";
|
import AlertComponent from "../alert/alert.component";
|
||||||
import { Prompt, useLocation } from "react-router-dom";
|
|
||||||
import "./form-fields-changed.styles.scss";
|
import "./form-fields-changed.styles.scss";
|
||||||
|
import Prompt from "../../utils/prompt";
|
||||||
|
|
||||||
export default function FormsFieldChanged({ form, skipPrompt }) {
|
export default function FormsFieldChanged({ form, skipPrompt }) {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
@@ -11,7 +11,6 @@ export default function FormsFieldChanged({ form, skipPrompt }) {
|
|||||||
const handleReset = () => {
|
const handleReset = () => {
|
||||||
form.resetFields();
|
form.resetFields();
|
||||||
};
|
};
|
||||||
const loc = useLocation();
|
|
||||||
//if (!form.isFieldsTouched()) return <></>;
|
//if (!form.isFieldsTouched()) return <></>;
|
||||||
return (
|
return (
|
||||||
<Form.Item
|
<Form.Item
|
||||||
@@ -25,11 +24,9 @@ export default function FormsFieldChanged({ form, skipPrompt }) {
|
|||||||
return (
|
return (
|
||||||
<Space direction="vertical" style={{ width: "100%" }}>
|
<Space direction="vertical" style={{ width: "100%" }}>
|
||||||
<Prompt
|
<Prompt
|
||||||
when={skipPrompt ? false : true}
|
when={!skipPrompt}
|
||||||
message={(location) => {
|
beforeUnload={true}
|
||||||
if (loc.pathname === location.pathname) return false;
|
message={t("general.messages.unsavedchangespopup")}
|
||||||
return t("general.messages.unsavedchangespopup");
|
|
||||||
}}
|
|
||||||
/>
|
/>
|
||||||
<AlertComponent
|
<AlertComponent
|
||||||
type="warning"
|
type="warning"
|
||||||
|
|||||||
@@ -94,7 +94,7 @@ const FormInputNUmberCalculator = (
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<Popover content={popContent} visible={history.length > 0}>
|
<Popover content={popContent} open={history.length > 0}>
|
||||||
<InputNumber
|
<InputNumber
|
||||||
ref={ref}
|
ref={ref}
|
||||||
value={value}
|
value={value}
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ import axios from "axios";
|
|||||||
import _ from "lodash";
|
import _ from "lodash";
|
||||||
import React, { useState } from "react";
|
import React, { useState } from "react";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
import { Link, useHistory } from "react-router-dom";
|
import { Link, useNavigate } from "react-router-dom";
|
||||||
import PhoneNumberFormatter from "../../utils/PhoneFormatter";
|
import PhoneNumberFormatter from "../../utils/PhoneFormatter";
|
||||||
import OwnerNameDisplay, {
|
import OwnerNameDisplay, {
|
||||||
OwnerNameDisplayFunction,
|
OwnerNameDisplayFunction,
|
||||||
@@ -12,7 +12,7 @@ import VehicleVinDisplay from "../vehicle-vin-display/vehicle-vin-display.compon
|
|||||||
|
|
||||||
export default function GlobalSearchOs() {
|
export default function GlobalSearchOs() {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
const history = useHistory();
|
const history = useNavigate();
|
||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
const [data, setData] = useState(false);
|
const [data, setData] = useState(false);
|
||||||
|
|
||||||
@@ -201,7 +201,7 @@ export default function GlobalSearchOs() {
|
|||||||
onSearch={handleSearch}
|
onSearch={handleSearch}
|
||||||
defaultActiveFirstOption
|
defaultActiveFirstOption
|
||||||
onSelect={(val, opt) => {
|
onSelect={(val, opt) => {
|
||||||
history.push(opt.label.props.to);
|
history(opt.label.props.to);
|
||||||
}}
|
}}
|
||||||
onClear={() => setData([])}
|
onClear={() => setData([])}
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ import { AutoComplete, Divider, Input, Space } from "antd";
|
|||||||
import _ from "lodash";
|
import _ from "lodash";
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
import { Link, useHistory } from "react-router-dom";
|
import { Link, useNavigate } from "react-router-dom";
|
||||||
import { GLOBAL_SEARCH_QUERY } from "../../graphql/search.queries";
|
import { GLOBAL_SEARCH_QUERY } from "../../graphql/search.queries";
|
||||||
import PhoneNumberFormatter from "../../utils/PhoneFormatter";
|
import PhoneNumberFormatter from "../../utils/PhoneFormatter";
|
||||||
import AlertComponent from "../alert/alert.component";
|
import AlertComponent from "../alert/alert.component";
|
||||||
@@ -13,7 +13,7 @@ import OwnerNameDisplay, {
|
|||||||
import VehicleVinDisplay from "../vehicle-vin-display/vehicle-vin-display.component";
|
import VehicleVinDisplay from "../vehicle-vin-display/vehicle-vin-display.component";
|
||||||
export default function GlobalSearch() {
|
export default function GlobalSearch() {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
const history = useHistory();
|
const history = useNavigate();
|
||||||
const [callSearch, { loading, error, data }] =
|
const [callSearch, { loading, error, data }] =
|
||||||
useLazyQuery(GLOBAL_SEARCH_QUERY);
|
useLazyQuery(GLOBAL_SEARCH_QUERY);
|
||||||
|
|
||||||
@@ -186,7 +186,7 @@ export default function GlobalSearch() {
|
|||||||
onSearch={handleSearch}
|
onSearch={handleSearch}
|
||||||
defaultActiveFirstOption
|
defaultActiveFirstOption
|
||||||
onSelect={(val, opt) => {
|
onSelect={(val, opt) => {
|
||||||
history.push(opt.label.props.to);
|
history(opt.label.props.to);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Input.Search
|
<Input.Search
|
||||||
|
|||||||
@@ -1,439 +1,469 @@
|
|||||||
import Icon, {
|
import Icon, {
|
||||||
BankFilled,
|
BankFilled,
|
||||||
BarChartOutlined,
|
BarChartOutlined,
|
||||||
CarFilled,
|
CarFilled,
|
||||||
CheckCircleOutlined,
|
CheckCircleOutlined,
|
||||||
ClockCircleFilled,
|
ClockCircleFilled,
|
||||||
DashboardFilled,
|
DashboardFilled,
|
||||||
DollarCircleFilled,
|
DollarCircleFilled,
|
||||||
ExportOutlined,
|
ExportOutlined,
|
||||||
FieldTimeOutlined,
|
FieldTimeOutlined,
|
||||||
FileAddFilled,
|
FileAddFilled,
|
||||||
FileAddOutlined,
|
FileAddOutlined,
|
||||||
FileFilled,
|
FileFilled,
|
||||||
//GlobalOutlined,
|
HomeFilled,
|
||||||
HomeFilled,
|
ImportOutlined,
|
||||||
ImportOutlined,
|
LineChartOutlined,
|
||||||
LineChartOutlined,
|
PaperClipOutlined,
|
||||||
PaperClipOutlined,
|
PhoneOutlined,
|
||||||
PhoneOutlined,
|
QuestionCircleFilled,
|
||||||
QuestionCircleFilled,
|
ScheduleOutlined,
|
||||||
ScheduleOutlined,
|
SettingOutlined,
|
||||||
SettingOutlined,
|
TeamOutlined,
|
||||||
TeamOutlined,
|
ToolFilled,
|
||||||
ToolFilled,
|
UnorderedListOutlined,
|
||||||
UnorderedListOutlined,
|
UserOutlined,
|
||||||
UserOutlined,
|
|
||||||
} from "@ant-design/icons";
|
} from "@ant-design/icons";
|
||||||
import { useTreatments } from "@splitsoftware/splitio-react";
|
import {useSplitTreatments} from "@splitsoftware/splitio-react";
|
||||||
import { Layout, Menu } from "antd";
|
import {Layout, Menu} from "antd";
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import { useTranslation } from "react-i18next";
|
import {useTranslation} from "react-i18next";
|
||||||
import { BsKanban } from "react-icons/bs";
|
import {BsKanban} from "react-icons/bs";
|
||||||
import {
|
import {FaCalendarAlt, FaCarCrash, FaCreditCard, FaFileInvoiceDollar,} from "react-icons/fa";
|
||||||
FaCalendarAlt,
|
import {GiPayMoney, GiPlayerTime, GiSettingsKnobs} from "react-icons/gi";
|
||||||
FaCarCrash,
|
import {IoBusinessOutline} from "react-icons/io5";
|
||||||
FaCreditCard,
|
import {RiSurveyLine} from "react-icons/ri";
|
||||||
FaFileInvoiceDollar,
|
import {connect} from "react-redux";
|
||||||
} from "react-icons/fa";
|
import {Link} from "react-router-dom";
|
||||||
import { GiPayMoney, GiPlayerTime, GiSettingsKnobs } from "react-icons/gi";
|
import {createStructuredSelector} from "reselect";
|
||||||
import { IoBusinessOutline } from "react-icons/io5";
|
import {selectRecentItems, selectSelectedHeader,} from "../../redux/application/application.selectors";
|
||||||
import { RiSurveyLine } from "react-icons/ri";
|
import {setModalContext} from "../../redux/modals/modals.actions";
|
||||||
import { connect } from "react-redux";
|
import {signOutStart} from "../../redux/user/user.actions";
|
||||||
import { Link } from "react-router-dom";
|
import {selectBodyshop, selectCurrentUser,} from "../../redux/user/user.selectors";
|
||||||
import { createStructuredSelector } from "reselect";
|
import {FiLogOut} from "react-icons/fi";
|
||||||
import {
|
|
||||||
selectRecentItems,
|
|
||||||
selectSelectedHeader,
|
|
||||||
} from "../../redux/application/application.selectors";
|
|
||||||
import { setModalContext } from "../../redux/modals/modals.actions";
|
|
||||||
import { signOutStart } from "../../redux/user/user.actions";
|
|
||||||
import {
|
|
||||||
selectBodyshop,
|
|
||||||
selectCurrentUser,
|
|
||||||
} from "../../redux/user/user.selectors";
|
|
||||||
|
|
||||||
const mapStateToProps = createStructuredSelector({
|
const mapStateToProps = createStructuredSelector({
|
||||||
currentUser: selectCurrentUser,
|
currentUser: selectCurrentUser,
|
||||||
recentItems: selectRecentItems,
|
recentItems: selectRecentItems,
|
||||||
selectedHeader: selectSelectedHeader,
|
selectedHeader: selectSelectedHeader,
|
||||||
bodyshop: selectBodyshop,
|
bodyshop: selectBodyshop,
|
||||||
});
|
});
|
||||||
|
|
||||||
const mapDispatchToProps = (dispatch) => ({
|
const mapDispatchToProps = (dispatch) => ({
|
||||||
setBillEnterContext: (context) =>
|
setBillEnterContext: (context) =>
|
||||||
dispatch(setModalContext({ context: context, modal: "billEnter" })),
|
dispatch(setModalContext({context: context, modal: "billEnter"})),
|
||||||
setTimeTicketContext: (context) =>
|
setTimeTicketContext: (context) =>
|
||||||
dispatch(setModalContext({ context: context, modal: "timeTicket" })),
|
dispatch(setModalContext({context: context, modal: "timeTicket"})),
|
||||||
setPaymentContext: (context) =>
|
setPaymentContext: (context) =>
|
||||||
dispatch(setModalContext({ context: context, modal: "payment" })),
|
dispatch(setModalContext({context: context, modal: "payment"})),
|
||||||
setReportCenterContext: (context) =>
|
setReportCenterContext: (context) =>
|
||||||
dispatch(setModalContext({ context: context, modal: "reportCenter" })),
|
dispatch(setModalContext({context: context, modal: "reportCenter"})),
|
||||||
signOutStart: () => dispatch(signOutStart()),
|
signOutStart: () => dispatch(signOutStart()),
|
||||||
setCardPaymentContext: (context) =>
|
setCardPaymentContext: (context) =>
|
||||||
dispatch(setModalContext({ context: context, modal: "cardPayment" })),
|
dispatch(setModalContext({context: context, modal: "cardPayment"})),
|
||||||
});
|
});
|
||||||
|
|
||||||
function Header({
|
function Header({handleMenuClick, currentUser, bodyshop, selectedHeader, signOutStart, setBillEnterContext, setTimeTicketContext, setPaymentContext, setReportCenterContext, recentItems, setCardPaymentContext}) {
|
||||||
handleMenuClick,
|
|
||||||
currentUser,
|
|
||||||
bodyshop,
|
|
||||||
selectedHeader,
|
|
||||||
signOutStart,
|
|
||||||
setBillEnterContext,
|
|
||||||
setTimeTicketContext,
|
|
||||||
setPaymentContext,
|
|
||||||
setReportCenterContext,
|
|
||||||
recentItems,
|
|
||||||
setCardPaymentContext,
|
|
||||||
}) {
|
|
||||||
const { Simple_Inventory } = useTreatments(
|
|
||||||
["Simple_Inventory"],
|
|
||||||
{},
|
|
||||||
bodyshop && bodyshop.imexshopid
|
|
||||||
);
|
|
||||||
const { DmsAp } = useTreatments(
|
|
||||||
["DmsAp"],
|
|
||||||
{},
|
|
||||||
bodyshop && bodyshop.imexshopid
|
|
||||||
);
|
|
||||||
const { ImEXPay } = useTreatments(
|
|
||||||
["ImEXPay"],
|
|
||||||
{},
|
|
||||||
bodyshop && bodyshop.imexshopid
|
|
||||||
);
|
|
||||||
|
|
||||||
const { t } = useTranslation();
|
const {treatments: {ImEXPay, DmsAp, Simple_Inventory}} = useSplitTreatments({
|
||||||
|
attributes: {},
|
||||||
|
names: ["ImEXPay", "DmsAp", "Simple_Inventory"],
|
||||||
|
splitKey: bodyshop && bodyshop.imexshopid,
|
||||||
|
});
|
||||||
|
|
||||||
return (
|
const {t} = useTranslation();
|
||||||
<Layout.Header>
|
|
||||||
<Menu
|
const accountingChildren = [
|
||||||
mode="horizontal"
|
{
|
||||||
//theme="light"
|
key: 'bills',
|
||||||
theme={"dark"}
|
icon: <Icon component={FaFileInvoiceDollar}/>,
|
||||||
selectedKeys={[selectedHeader]}
|
label: (<Link to="/manage/bills">{t("menus.header.bills")}</Link>)
|
||||||
onClick={handleMenuClick}
|
},
|
||||||
subMenuCloseDelay={0.3}
|
{
|
||||||
>
|
key: 'enterbills',
|
||||||
<Menu.Item key="home" icon={<HomeFilled />}>
|
icon: <Icon component={GiPayMoney}/>,
|
||||||
<Link to="/manage">{t("menus.header.home")}</Link>
|
label: t("menus.header.enterbills"),
|
||||||
</Menu.Item>
|
onClick: () => {
|
||||||
<Menu.Item key="schedule" icon={<Icon component={FaCalendarAlt} />}>
|
setBillEnterContext({
|
||||||
<Link to="/manage/schedule">{t("menus.header.schedule")}</Link>
|
actions: {},
|
||||||
</Menu.Item>
|
context: {},
|
||||||
<Menu.SubMenu
|
|
||||||
key="jobssubmenu"
|
|
||||||
icon={<Icon component={FaCarCrash} />}
|
|
||||||
title={t("menus.header.jobs")}
|
|
||||||
>
|
|
||||||
<Menu.Item key="activejobs" icon={<FileFilled />}>
|
|
||||||
<Link to="/manage/jobs">{t("menus.header.activejobs")}</Link>
|
|
||||||
</Menu.Item>
|
|
||||||
<Menu.Item key="readyjobs" icon={<CheckCircleOutlined />}>
|
|
||||||
<Link to="/manage/jobs/ready">{t("menus.header.readyjobs")}</Link>
|
|
||||||
</Menu.Item>
|
|
||||||
<Menu.Item key="parts-queue" icon={<ToolFilled />}>
|
|
||||||
<Link to="/manage/partsqueue">{t("menus.header.parts-queue")}</Link>
|
|
||||||
</Menu.Item>
|
|
||||||
<Menu.Item key="availablejobs" icon={<ImportOutlined />}>
|
|
||||||
<Link to="/manage/available">
|
|
||||||
{t("menus.header.availablejobs")}
|
|
||||||
</Link>
|
|
||||||
</Menu.Item>
|
|
||||||
<Menu.Item key="newjob" icon={<FileAddOutlined />}>
|
|
||||||
<Link to="/manage/jobs/new">{t("menus.header.newjob")}</Link>
|
|
||||||
</Menu.Item>
|
|
||||||
<Menu.Divider key="div1" />
|
|
||||||
<Menu.Item key="alljobs" icon={<UnorderedListOutlined />}>
|
|
||||||
<Link to="/manage/jobs/all">{t("menus.header.alljobs")}</Link>
|
|
||||||
</Menu.Item>
|
|
||||||
<Menu.Divider key="div2" />
|
|
||||||
<Menu.Item key="productionlist" icon={<ScheduleOutlined />}>
|
|
||||||
<Link to="/manage/production/list">
|
|
||||||
{t("menus.header.productionlist")}
|
|
||||||
</Link>
|
|
||||||
</Menu.Item>
|
|
||||||
<Menu.Item key="productionboard" icon={<Icon component={BsKanban} />}>
|
|
||||||
<Link to="/manage/production/board">
|
|
||||||
{t("menus.header.productionboard")}
|
|
||||||
</Link>
|
|
||||||
</Menu.Item>
|
|
||||||
<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")}
|
|
||||||
>
|
|
||||||
<Menu.Item key="owners" icon={<TeamOutlined />}>
|
|
||||||
<Link to="/manage/owners">{t("menus.header.owners")}</Link>
|
|
||||||
</Menu.Item>
|
|
||||||
<Menu.Item key="vehicles" icon={<CarFilled />}>
|
|
||||||
<Link to="/manage/vehicles">{t("menus.header.vehicles")}</Link>
|
|
||||||
</Menu.Item>
|
|
||||||
</Menu.SubMenu>
|
|
||||||
<Menu.SubMenu
|
|
||||||
key="ccs"
|
|
||||||
icon={<CarFilled />}
|
|
||||||
title={t("menus.header.courtesycars")}
|
|
||||||
>
|
|
||||||
<Menu.Item key="courtesycarsall" icon={<CarFilled />}>
|
|
||||||
<Link to="/manage/courtesycars">
|
|
||||||
{t("menus.header.courtesycars-all")}
|
|
||||||
</Link>
|
|
||||||
</Menu.Item>
|
|
||||||
<Menu.Item key="contracts" icon={<FileFilled />}>
|
|
||||||
<Link to="/manage/courtesycars/contracts">
|
|
||||||
{t("menus.header.courtesycars-contracts")}
|
|
||||||
</Link>
|
|
||||||
</Menu.Item>
|
|
||||||
<Menu.Item key="newcontract" icon={<FileAddFilled />}>
|
|
||||||
<Link to="/manage/courtesycars/contracts/new">
|
|
||||||
{t("menus.header.courtesycars-newcontract")}
|
|
||||||
</Link>
|
|
||||||
</Menu.Item>
|
|
||||||
</Menu.SubMenu>
|
|
||||||
<Menu.SubMenu
|
|
||||||
key="accounting"
|
|
||||||
icon={<DollarCircleFilled />}
|
|
||||||
title={t("menus.header.accounting")}
|
|
||||||
>
|
|
||||||
<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: {},
|
|
||||||
context: {},
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{t("menus.header.enterbills")}
|
|
||||||
</Menu.Item>
|
|
||||||
{Simple_Inventory.treatment === "on" && (
|
|
||||||
<>
|
|
||||||
<Menu.Divider key="div4" />
|
|
||||||
<Menu.Item
|
|
||||||
key="inventory"
|
|
||||||
icon={<Icon component={FaFileInvoiceDollar} />}
|
|
||||||
>
|
|
||||||
<Link to="/manage/inventory">
|
|
||||||
{t("menus.header.inventory")}
|
|
||||||
</Link>
|
|
||||||
</Menu.Item>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
<Menu.Divider key="div7" />
|
|
||||||
<Menu.Item key="allpayments" icon={<BankFilled />}>
|
|
||||||
<Link to="/manage/payments">{t("menus.header.allpayments")}</Link>
|
|
||||||
</Menu.Item>
|
|
||||||
<Menu.Item
|
|
||||||
key="enterpayments"
|
|
||||||
onClick={() => {
|
|
||||||
setPaymentContext({
|
|
||||||
actions: {},
|
|
||||||
context: null,
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
icon={<Icon component={FaCreditCard} />}
|
|
||||||
>
|
|
||||||
{t("menus.header.enterpayment")}
|
|
||||||
</Menu.Item>
|
|
||||||
{ImEXPay.treatment === "on" && (
|
|
||||||
<Menu.Item
|
|
||||||
key="entercardpayments"
|
|
||||||
onClick={() => {
|
|
||||||
setCardPaymentContext({
|
|
||||||
actions: {},
|
|
||||||
context: {},
|
|
||||||
});
|
});
|
||||||
}}
|
}
|
||||||
icon={<Icon component={FaCreditCard} />}
|
},
|
||||||
>
|
];
|
||||||
{t("menus.header.entercardpayment")}
|
|
||||||
</Menu.Item>
|
if (Simple_Inventory.treatment === "on") {
|
||||||
)}
|
accountingChildren.push(
|
||||||
<Menu.Divider key="div5" />
|
{
|
||||||
<Menu.Item key="timetickets" icon={<FieldTimeOutlined />}>
|
type: 'divider',
|
||||||
<Link to="/manage/timetickets">
|
},
|
||||||
{t("menus.header.timetickets")}
|
{
|
||||||
</Link>
|
key: 'inventory',
|
||||||
</Menu.Item>
|
icon: <Icon component={FaFileInvoiceDollar}/>,
|
||||||
<Menu.Item
|
label: (<Link to="/manage/inventory">{t("menus.header.inventory")}</Link>)
|
||||||
key="entertimetickets"
|
}
|
||||||
icon={<Icon component={GiPlayerTime} />}
|
);
|
||||||
onClick={() => {
|
}
|
||||||
setTimeTicketContext({
|
accountingChildren.push(
|
||||||
actions: {},
|
{
|
||||||
context: {
|
type: 'divider'
|
||||||
created_by: currentUser.displayName
|
},
|
||||||
? currentUser.email.concat(" | ", currentUser.displayName)
|
{
|
||||||
: currentUser.email,
|
key: 'allpayments',
|
||||||
|
icon: <BankFilled/>,
|
||||||
|
label: (<Link to="/manage/payments">{t("menus.header.allpayments")}</Link>)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'enterpayments',
|
||||||
|
icon: <Icon component={FaCreditCard}/>,
|
||||||
|
label: t("menus.header.enterpayment"),
|
||||||
|
onClick: () => {
|
||||||
|
setPaymentContext({
|
||||||
|
actions: {},
|
||||||
|
context: null,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
if (ImEXPay.treatment === "on") {
|
||||||
|
accountingChildren.push({
|
||||||
|
key: 'entercardpayments',
|
||||||
|
icon: <Icon component={FaCreditCard}/>,
|
||||||
|
label: t("menus.header.entercardpayment"),
|
||||||
|
onClick: () => {
|
||||||
|
setCardPaymentContext({
|
||||||
|
actions: {},
|
||||||
|
context: {},
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
accountingChildren.push(
|
||||||
|
{
|
||||||
|
type: 'divider',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'timetickets',
|
||||||
|
icon: <FieldTimeOutlined/>,
|
||||||
|
label: (<Link to="/manage/timetickets">{t("menus.header.timetickets")}</Link>)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'entertimetickets',
|
||||||
|
icon: <Icon component={GiPlayerTime}/>,
|
||||||
|
label: t("menus.header.entertimeticket"),
|
||||||
|
onClick: () => {
|
||||||
|
setTimeTicketContext({
|
||||||
|
actions: {},
|
||||||
|
context: {
|
||||||
|
created_by: currentUser.displayName
|
||||||
|
? currentUser.email.concat(" | ", currentUser.displayName)
|
||||||
|
: currentUser.email,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'divider',
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
const accountingExportChildren = [
|
||||||
|
{
|
||||||
|
key: 'receivables',
|
||||||
|
label: (<Link to="/manage/accounting/receivables">{t("menus.header.accounting-receivables")}</Link>)
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
if (!((bodyshop && bodyshop.cdk_dealerid) || (bodyshop && bodyshop.pbs_serialnumber)) || DmsAp.treatment === "on") {
|
||||||
|
accountingExportChildren.push({
|
||||||
|
key: 'payables',
|
||||||
|
label: (<Link to="/manage/accounting/payables">{t("menus.header.accounting-payables")}</Link>)
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!(
|
||||||
|
(bodyshop && bodyshop.cdk_dealerid) ||
|
||||||
|
(bodyshop && bodyshop.pbs_serialnumber)
|
||||||
|
)) {
|
||||||
|
accountingExportChildren.push({
|
||||||
|
key: 'payments',
|
||||||
|
label: (<Link to="/manage/accounting/payments">{t("menus.header.accounting-payments")}</Link>)
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
accountingExportChildren.push(
|
||||||
|
{
|
||||||
|
key: 'exportlogs',
|
||||||
|
label: (<Link to="/manage/accounting/exportlogs">{t("menus.header.export-logs")}</Link>)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'accountingexport',
|
||||||
|
icon: <ExportOutlined/>,
|
||||||
|
label: t("menus.header.export"),
|
||||||
|
children: accountingExportChildren
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
const menuItems = [
|
||||||
|
{
|
||||||
|
key: 'home',
|
||||||
|
icon: <HomeFilled/>,
|
||||||
|
label: (<Link to="/manage/">{t("menus.header.home")}</Link>)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'schedule',
|
||||||
|
icon: <Icon component={FaCalendarAlt}/>,
|
||||||
|
label: (<Link to="/manage/schedule">{t("menus.header.schedule")}</Link>)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'jobssubmenu',
|
||||||
|
icon: <Icon component={FaCarCrash}/>,
|
||||||
|
label: t("menus.header.jobs"),
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
key: 'activejobs',
|
||||||
|
icon: <FileFilled/>,
|
||||||
|
label: (<Link to="/manage/jobs">{t("menus.header.activejobs")}</Link>)
|
||||||
},
|
},
|
||||||
});
|
{
|
||||||
}}
|
key: 'readyjobs',
|
||||||
>
|
icon: <CheckCircleOutlined/>,
|
||||||
{t("menus.header.entertimeticket")}
|
label: (<Link to="/manage/jobs/ready">{t("menus.header.readyjobs")}</Link>)
|
||||||
</Menu.Item>
|
},
|
||||||
<Menu.Divider key="div6" />
|
{
|
||||||
<Menu.SubMenu
|
key: 'parts-queue',
|
||||||
key="accountingexport"
|
icon: <ToolFilled/>,
|
||||||
title={t("menus.header.export")}
|
label: (<Link to="/manage/partsqueue">{t("menus.header.parts-queue")}</Link>)
|
||||||
icon={<ExportOutlined />}
|
},
|
||||||
>
|
{
|
||||||
<Menu.Item key="receivables">
|
key: 'availablejobs',
|
||||||
<Link to="/manage/accounting/receivables">
|
icon: <ImportOutlined/>,
|
||||||
{t("menus.header.accounting-receivables")}
|
label: (<Link to="/manage/available">{t("menus.header.availablejobs")}</Link>)
|
||||||
</Link>
|
},
|
||||||
</Menu.Item>
|
{
|
||||||
{(!(
|
key: 'newjob',
|
||||||
(bodyshop && bodyshop.cdk_dealerid) ||
|
icon: <FileAddOutlined/>,
|
||||||
(bodyshop && bodyshop.pbs_serialnumber)
|
label: (<Link to="/manage/jobs/new">{t("menus.header.newjob")}</Link>)
|
||||||
) ||
|
},
|
||||||
DmsAp.treatment === "on") && (
|
{
|
||||||
<Menu.Item key="payables">
|
type: 'divider',
|
||||||
<Link to="/manage/accounting/payables">
|
},
|
||||||
{t("menus.header.accounting-payables")}
|
{
|
||||||
</Link>
|
key: 'alljobs',
|
||||||
</Menu.Item>
|
icon: <UnorderedListOutlined/>,
|
||||||
)}
|
label: (<Link to="/manage/jobs/all">{t("menus.header.alljobs")}</Link>)
|
||||||
{!(
|
},
|
||||||
(bodyshop && bodyshop.cdk_dealerid) ||
|
{
|
||||||
(bodyshop && bodyshop.pbs_serialnumber)
|
key: 'productionlist',
|
||||||
) && (
|
icon: <ScheduleOutlined/>,
|
||||||
<Menu.Item key="payments">
|
label: (<Link to="/manage/production/list">{t("menus.header.productionlist")}</Link>)
|
||||||
<Link to="/manage/accounting/payments">
|
},
|
||||||
{t("menus.header.accounting-payments")}
|
{
|
||||||
</Link>
|
key: 'productionboard',
|
||||||
</Menu.Item>
|
icon: <Icon component={BsKanban}/>,
|
||||||
)}
|
label: (<Link to="/manage/production/board">{t("menus.header.productionboard")}</Link>)
|
||||||
<Menu.Item key="export-logs">
|
},
|
||||||
<Link to="/manage/accounting/exportlogs">
|
{
|
||||||
{t("menus.header.export-logs")}
|
type: 'divider',
|
||||||
</Link>
|
},
|
||||||
</Menu.Item>
|
{
|
||||||
</Menu.SubMenu>
|
key: 'scoreboard',
|
||||||
</Menu.SubMenu>
|
icon: <LineChartOutlined/>,
|
||||||
<Menu.Item key="phonebook" icon={<PhoneOutlined />}>
|
label: (<Link to="/manage/scoreboard">{t("menus.header.scoreboard")}</Link>)
|
||||||
<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")}
|
key: 'customers',
|
||||||
</Link>
|
icon: <UserOutlined/>,
|
||||||
</Menu.Item>
|
label: t("menus.header.customers"),
|
||||||
<Menu.SubMenu
|
children: [
|
||||||
key="shopsubmenu"
|
{
|
||||||
title={t("menus.header.shop")}
|
key: 'owners',
|
||||||
icon={<SettingOutlined />}
|
icon: <TeamOutlined/>,
|
||||||
>
|
label: (<Link to="/manage/owners">{t("menus.header.owners")}</Link>)
|
||||||
<Menu.Item key="shop" icon={<Icon component={GiSettingsKnobs} />}>
|
},
|
||||||
<Link to="/manage/shop?tab=info">
|
{
|
||||||
{t("menus.header.shop_config")}
|
key: 'vehicles',
|
||||||
</Link>
|
icon: <CarFilled/>,
|
||||||
</Menu.Item>
|
label: (<Link to="/manage/vehicles">{t("menus.header.vehicles")}</Link>)
|
||||||
<Menu.Item key="dashboard" icon={<DashboardFilled />}>
|
},
|
||||||
<Link to="/manage/dashboard">{t("menus.header.dashboard")}</Link>
|
]
|
||||||
</Menu.Item>
|
},
|
||||||
<Menu.Item
|
{
|
||||||
key="reportcenter"
|
key: 'ccs',
|
||||||
icon={<BarChartOutlined />}
|
icon: <CarFilled/>,
|
||||||
onClick={() => {
|
label: t("menus.header.courtesycars"),
|
||||||
setReportCenterContext({
|
children: [
|
||||||
actions: {},
|
{
|
||||||
context: {},
|
key: 'courtesycarsall',
|
||||||
});
|
icon: <CarFilled/>,
|
||||||
}}
|
label: (<Link to="/manage/courtesycars">{t("menus.header.courtesycars-all")}</Link>)
|
||||||
>
|
},
|
||||||
{t("menus.header.reportcenter")}
|
{
|
||||||
</Menu.Item>
|
key: 'contracts',
|
||||||
<Menu.Item
|
icon: <FileFilled/>,
|
||||||
key="shop-vendors"
|
label: (<Link to="/manage/courtesycars/contracts">{t("menus.header.courtesycars-contracts")}</Link>)
|
||||||
icon={<Icon component={IoBusinessOutline} />}
|
},
|
||||||
>
|
{
|
||||||
<Link to="/manage/shop/vendors">
|
key: 'newcontract',
|
||||||
{t("menus.header.shop_vendors")}
|
icon: <FileAddFilled/>,
|
||||||
</Link>
|
label: (<Link
|
||||||
</Menu.Item>
|
to="/manage/courtesycars/contracts/new">{t("menus.header.courtesycars-newcontract")}</Link>)
|
||||||
<Menu.Item key="shop-csi" icon={<Icon component={RiSurveyLine} />}>
|
},
|
||||||
<Link to="/manage/shop/csi">{t("menus.header.shop_csi")}</Link>
|
]
|
||||||
</Menu.Item>
|
},
|
||||||
</Menu.SubMenu>
|
{
|
||||||
<Menu.SubMenu
|
key: 'accounting',
|
||||||
key="user"
|
icon: <DollarCircleFilled/>,
|
||||||
title={
|
label: t("menus.header.accounting"),
|
||||||
currentUser.displayName ||
|
children: accountingChildren,
|
||||||
currentUser.email ||
|
},
|
||||||
t("general.labels.unknown")
|
{
|
||||||
}
|
key: 'phonebook',
|
||||||
>
|
icon: <PhoneOutlined/>,
|
||||||
<Menu.Item key="signout" danger onClick={() => signOutStart()}>
|
label: (<Link to="/manage/phonebook">{t("menus.header.phonebook")}</Link>)
|
||||||
{t("user.actions.signout")}
|
},
|
||||||
</Menu.Item>
|
{
|
||||||
<Menu.Item
|
key: 'temporarydocs',
|
||||||
key="help"
|
icon: <PaperClipOutlined/>,
|
||||||
onClick={() => {
|
label: (<Link to="/manage/temporarydocs">{t("menus.header.temporarydocs")}</Link>)
|
||||||
window.open("https://help.imex.online/", "_blank");
|
},
|
||||||
}}
|
{
|
||||||
icon={<Icon component={QuestionCircleFilled} />}
|
key: 'shopsubmenu',
|
||||||
>
|
icon: <SettingOutlined/>,
|
||||||
{t("menus.header.help")}
|
label: t("menus.header.shop"),
|
||||||
</Menu.Item>
|
children: [
|
||||||
<Menu.Item
|
{
|
||||||
key="rescue"
|
key: 'shop',
|
||||||
onClick={() => {
|
icon: <Icon component={GiSettingsKnobs}/>,
|
||||||
window.open("https://imexrescue.com/", "_blank");
|
label: (<Link to="/manage/shop?tab=info">{t("menus.header.shop_config")}</Link>)
|
||||||
}}
|
},
|
||||||
>
|
{
|
||||||
{t("menus.header.rescueme")}
|
key: 'dashboard',
|
||||||
</Menu.Item>
|
icon: <DashboardFilled/>,
|
||||||
<Menu.Item key="shiftclock">
|
label: (<Link to="/manage/dashboard">{t("menus.header.dashboard")}</Link>)
|
||||||
<Link to="/manage/shiftclock">{t("menus.header.shiftclock")}</Link>
|
},
|
||||||
</Menu.Item>
|
{
|
||||||
<Menu.Item key="profile">
|
key: 'reportcenter',
|
||||||
<Link to="/manage/profile">{t("menus.currentuser.profile")}</Link>
|
icon: <BarChartOutlined/>,
|
||||||
</Menu.Item>
|
label: t("menus.header.reportcenter"),
|
||||||
{
|
onClick: () => {
|
||||||
// <Menu.SubMenu
|
setReportCenterContext({
|
||||||
// key="langselecter"
|
actions: {},
|
||||||
// title={
|
context: {},
|
||||||
// <span>
|
});
|
||||||
// <GlobalOutlined />
|
}
|
||||||
// <span>{t("menus.currentuser.languageselector")}</span>
|
},
|
||||||
// </span>
|
{
|
||||||
// }
|
key: 'shop-vendors',
|
||||||
// >
|
icon: <Icon component={IoBusinessOutline}/>,
|
||||||
// <Menu.Item actiontype="lang-select" key="en-US">
|
label: (<Link to="/manage/shop/vendors">{t("menus.header.shop_vendors")}</Link>)
|
||||||
// {t("general.languages.english")}
|
},
|
||||||
// </Menu.Item>
|
{
|
||||||
// <Menu.Item actiontype="lang-select" key="fr-CA">
|
key: 'shop-csi',
|
||||||
// {t("general.languages.french")}
|
icon: <Icon component={RiSurveyLine}/>,
|
||||||
// </Menu.Item>
|
label: (<Link to="/manage/shop/csi">{t("menus.header.shop_csi")}</Link>)
|
||||||
// <Menu.Item actiontype="lang-select" key="es-MX">
|
},
|
||||||
// {t("general.languages.spanish")}
|
]
|
||||||
// </Menu.Item>
|
},
|
||||||
// </Menu.SubMenu>
|
{
|
||||||
}
|
key: 'user',
|
||||||
</Menu.SubMenu>
|
label: (
|
||||||
<Menu.SubMenu key="recent" title={<ClockCircleFilled />}>
|
currentUser.displayName ||
|
||||||
{recentItems.map((i, idx) => (
|
currentUser.email ||
|
||||||
<Menu.Item key={idx}>
|
t("general.labels.unknown")
|
||||||
<Link to={i.url}>{i.label}</Link>
|
),
|
||||||
</Menu.Item>
|
children: [
|
||||||
))}
|
{
|
||||||
</Menu.SubMenu>
|
key: 'signout',
|
||||||
</Menu>
|
icon: <Icon component={FiLogOut}/>,
|
||||||
</Layout.Header>
|
danger: true,
|
||||||
);
|
label: t("user.actions.signout"),
|
||||||
|
onClick: () => signOutStart()
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'help',
|
||||||
|
icon: <Icon component={QuestionCircleFilled}/>,
|
||||||
|
label: t("menus.header.help"),
|
||||||
|
onClick: () => {
|
||||||
|
window.open("https://help.imex.online/", "_blank");
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'rescue',
|
||||||
|
icon: <Icon component={CarFilled}/>,
|
||||||
|
label: t("menus.header.rescueme"),
|
||||||
|
onClick: () => {
|
||||||
|
window.open("https://imexrescue.com/", "_blank");
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'shiftclock',
|
||||||
|
icon: <Icon component={GiPlayerTime}/>,
|
||||||
|
label: (<Link to="/manage/shiftclock">{t("menus.header.shiftclock")}</Link>)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'profile',
|
||||||
|
icon: <UserOutlined/>,
|
||||||
|
label: (<Link to="/manage/profile">{t("menus.currentuser.profile")}</Link>)
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// key: 'langselecter',
|
||||||
|
// label: t("menus.currentuser.languageselector"),
|
||||||
|
// children: [
|
||||||
|
// {
|
||||||
|
// key: 'en-US',
|
||||||
|
// label: t("general.languages.english"),
|
||||||
|
// onClick: () => {
|
||||||
|
// window.location.href = "/?lang=en-US";
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// key: 'fr-CA',
|
||||||
|
// label: t("general.languages.french"),
|
||||||
|
// onClick: () => {
|
||||||
|
// window.location.href = "/?lang=fr-CA";
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// key: 'es-MX',
|
||||||
|
// label: t("general.languages.spanish"),
|
||||||
|
// onClick: () => {
|
||||||
|
// window.location.href = "/?lang=es-MX";
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
// ]
|
||||||
|
// },
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'recent',
|
||||||
|
icon: <ClockCircleFilled/>,
|
||||||
|
children: recentItems.map((i, idx) => ({
|
||||||
|
key: idx,
|
||||||
|
label: (<Link to={i.url}>{i.label}</Link>)
|
||||||
|
|
||||||
|
})),
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Layout.Header>
|
||||||
|
<Menu
|
||||||
|
mode="horizontal"
|
||||||
|
//theme="light"
|
||||||
|
theme={"dark"}
|
||||||
|
selectedKeys={[selectedHeader]}
|
||||||
|
onClick={handleMenuClick}
|
||||||
|
subMenuCloseDelay={0.3}
|
||||||
|
items={menuItems}
|
||||||
|
/>
|
||||||
|
|
||||||
|
</Layout.Header>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default connect(mapStateToProps, mapDispatchToProps)(Header);
|
export default connect(mapStateToProps, mapDispatchToProps)(Header);
|
||||||
|
|||||||
@@ -4,7 +4,7 @@ import { connect } from "react-redux";
|
|||||||
import { createStructuredSelector } from "reselect";
|
import { createStructuredSelector } from "reselect";
|
||||||
import { setModalContext } from "../../redux/modals/modals.actions";
|
import { setModalContext } from "../../redux/modals/modals.actions";
|
||||||
import { selectBodyshop } from "../../redux/user/user.selectors";
|
import { selectBodyshop } from "../../redux/user/user.selectors";
|
||||||
import moment from "moment";
|
import dayjs from "../../utils/day";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
const mapStateToProps = createStructuredSelector({
|
const mapStateToProps = createStructuredSelector({
|
||||||
bodyshop: selectBodyshop,
|
bodyshop: selectBodyshop,
|
||||||
@@ -35,7 +35,7 @@ export function InventoryBillRo({
|
|||||||
vendorid: bodyshop.inhousevendorid,
|
vendorid: bodyshop.inhousevendorid,
|
||||||
invoice_number: "ih",
|
invoice_number: "ih",
|
||||||
isinhouse: true,
|
isinhouse: true,
|
||||||
date: moment(),
|
date: dayjs(),
|
||||||
total: 0,
|
total: 0,
|
||||||
billlines: [{}],
|
billlines: [{}],
|
||||||
// billlines: selectedLines.map((p) => {
|
// billlines: selectedLines.map((p) => {
|
||||||
|
|||||||
@@ -1,229 +1,224 @@
|
|||||||
import { EditFilled, SyncOutlined, FileAddFilled } from "@ant-design/icons";
|
import {EditFilled, FileAddFilled, SyncOutlined} from "@ant-design/icons";
|
||||||
import { Button, Card, Input, Space, Table, Typography } from "antd";
|
import {Button, Card, Input, Space, Table, Typography} from "antd";
|
||||||
import queryString from "query-string";
|
import queryString from "query-string";
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import { useTranslation } from "react-i18next";
|
import {useTranslation} from "react-i18next";
|
||||||
import { connect } from "react-redux";
|
import {connect} from "react-redux";
|
||||||
import { Link, useHistory, useLocation } from "react-router-dom";
|
import {Link, useNavigate, useLocation} from "react-router-dom";
|
||||||
import { createStructuredSelector } from "reselect";
|
import {createStructuredSelector} from "reselect";
|
||||||
import { setModalContext } from "../../redux/modals/modals.actions";
|
import {setModalContext} from "../../redux/modals/modals.actions";
|
||||||
import { selectBodyshop } from "../../redux/user/user.selectors";
|
import {selectBodyshop} from "../../redux/user/user.selectors";
|
||||||
import CurrencyFormatter from "../../utils/CurrencyFormatter";
|
import CurrencyFormatter from "../../utils/CurrencyFormatter";
|
||||||
import InventoryBillRo from "../inventory-bill-ro/inventory-bill-ro.component";
|
import InventoryBillRo from "../inventory-bill-ro/inventory-bill-ro.component";
|
||||||
import InventoryLineDelete from "../inventory-line-delete/inventory-line-delete.component";
|
import InventoryLineDelete from "../inventory-line-delete/inventory-line-delete.component";
|
||||||
import {pageLimit} from "../../utils/config";
|
import {pageLimit} from "../../utils/config";
|
||||||
|
|
||||||
const mapStateToProps = createStructuredSelector({
|
const mapStateToProps = createStructuredSelector({
|
||||||
//currentUser: selectCurrentUser
|
//currentUser: selectCurrentUser
|
||||||
bodyshop: selectBodyshop,
|
bodyshop: selectBodyshop,
|
||||||
});
|
});
|
||||||
const mapDispatchToProps = (dispatch) => ({
|
const mapDispatchToProps = (dispatch) => ({
|
||||||
setInventoryUpsertContext: (context) =>
|
setInventoryUpsertContext: (context) =>
|
||||||
dispatch(setModalContext({ context: context, modal: "inventoryUpsert" })),
|
dispatch(setModalContext({context: context, modal: "inventoryUpsert"})),
|
||||||
});
|
});
|
||||||
|
|
||||||
export function JobsList({
|
export function JobsList({bodyshop, refetch, loading, jobs, total, setInventoryUpsertContext,}) {
|
||||||
bodyshop,
|
const search = queryString.parse(useLocation().search);
|
||||||
refetch,
|
const {page, sortcolumn, sortorder} = search;
|
||||||
loading,
|
const history = useNavigate();
|
||||||
jobs,
|
|
||||||
total,
|
|
||||||
setInventoryUpsertContext,
|
|
||||||
}) {
|
|
||||||
const search = queryString.parse(useLocation().search);
|
|
||||||
const { page, sortcolumn, sortorder } = search;
|
|
||||||
const history = useHistory();
|
|
||||||
|
|
||||||
const { t } = useTranslation();
|
const {t} = useTranslation();
|
||||||
const columns = [
|
const columns = [
|
||||||
{
|
{
|
||||||
title: t("billlines.fields.line_desc"),
|
title: t("billlines.fields.line_desc"),
|
||||||
dataIndex: "line_desc",
|
dataIndex: "line_desc",
|
||||||
key: "line_desc",
|
key: "line_desc",
|
||||||
|
|
||||||
sorter: true, //(a, b) => alphaSort(a.line_desc, b.line_desc),
|
sorter: true, //(a, b) => alphaSort(a.line_desc, b.line_desc),
|
||||||
sortOrder: sortcolumn === "line_desc" && sortorder,
|
sortOrder: sortcolumn === "line_desc" && sortorder,
|
||||||
render: (text, record) =>
|
render: (text, record) =>
|
||||||
record.billline?.bill?.job ? (
|
record.billline?.bill?.job ? (
|
||||||
<div>
|
<div>
|
||||||
<div>{text}</div>
|
<div>{text}</div>
|
||||||
<strong>{`(${record.billline?.bill?.job?.v_model_yr} ${record.billline?.bill?.job?.v_make_desc} ${record.billline?.bill?.job?.v_model_desc})`}</strong>
|
<strong>{`(${record.billline?.bill?.job?.v_model_yr} ${record.billline?.bill?.job?.v_make_desc} ${record.billline?.bill?.job?.v_model_desc})`}</strong>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
text
|
text
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: t("inventory.labels.frombillinvoicenumber"),
|
title: t("inventory.labels.frombillinvoicenumber"),
|
||||||
dataIndex: "vendorname",
|
dataIndex: "vendorname",
|
||||||
key: "vendorname",
|
key: "vendorname",
|
||||||
ellipsis: true,
|
ellipsis: true,
|
||||||
//sorter: true, // (a, b) => alphaSort(a.ownr_ln, b.ownr_ln),
|
//sorter: true, // (a, b) => alphaSort(a.ownr_ln, b.ownr_ln),
|
||||||
|
|
||||||
//sortOrder: sortcolumn === "ownr_ln" && sortorder,
|
//sortOrder: sortcolumn === "ownr_ln" && sortorder,
|
||||||
render: (text, record) =>
|
render: (text, record) =>
|
||||||
(
|
(
|
||||||
(record.billline?.bill?.invoice_number || "") +
|
(record.billline?.bill?.invoice_number || "") +
|
||||||
" " +
|
" " +
|
||||||
(record.manualinvoicenumber || "")
|
(record.manualinvoicenumber || "")
|
||||||
).trim(),
|
).trim(),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: t("inventory.labels.fromvendor"),
|
title: t("inventory.labels.fromvendor"),
|
||||||
dataIndex: "vendorname",
|
dataIndex: "vendorname",
|
||||||
key: "vendorname",
|
key: "vendorname",
|
||||||
ellipsis: true,
|
ellipsis: true,
|
||||||
//sorter: true, // (a, b) => alphaSort(a.ownr_ln, b.ownr_ln),
|
//sorter: true, // (a, b) => alphaSort(a.ownr_ln, b.ownr_ln),
|
||||||
|
|
||||||
//sortOrder: sortcolumn === "ownr_ln" && sortorder,
|
//sortOrder: sortcolumn === "ownr_ln" && sortorder,
|
||||||
render: (text, record) =>
|
render: (text, record) =>
|
||||||
(
|
(
|
||||||
(record.billline?.bill?.vendor?.name || "") +
|
(record.billline?.bill?.vendor?.name || "") +
|
||||||
" " +
|
" " +
|
||||||
(record.manualvendor || "")
|
(record.manualvendor || "")
|
||||||
).trim(),
|
).trim(),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: t("billlines.fields.actual_price"),
|
title: t("billlines.fields.actual_price"),
|
||||||
dataIndex: "actual_price",
|
dataIndex: "actual_price",
|
||||||
key: "actual_price",
|
key: "actual_price",
|
||||||
|
|
||||||
render: (text, record) => (
|
render: (text, record) => (
|
||||||
<CurrencyFormatter>{record.actual_price}</CurrencyFormatter>
|
<CurrencyFormatter>{record.actual_price}</CurrencyFormatter>
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: t("billlines.fields.actual_cost"),
|
title: t("billlines.fields.actual_cost"),
|
||||||
dataIndex: "actual_cost",
|
dataIndex: "actual_cost",
|
||||||
key: "actual_cost",
|
key: "actual_cost",
|
||||||
|
|
||||||
render: (text, record) => (
|
render: (text, record) => (
|
||||||
<CurrencyFormatter>{record.actual_cost}</CurrencyFormatter>
|
<CurrencyFormatter>{record.actual_cost}</CurrencyFormatter>
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: t("inventory.fields.comment"),
|
title: t("inventory.fields.comment"),
|
||||||
dataIndex: "comment",
|
dataIndex: "comment",
|
||||||
key: "comment",
|
key: "comment",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: t("inventory.labels.consumedbyjob"),
|
title: t("inventory.labels.consumedbyjob"),
|
||||||
dataIndex: "consumedbyjob",
|
dataIndex: "consumedbyjob",
|
||||||
key: "consumedbyjob",
|
key: "consumedbyjob",
|
||||||
|
|
||||||
ellipsis: true,
|
ellipsis: true,
|
||||||
render: (text, record) =>
|
render: (text, record) =>
|
||||||
record.bill?.job?.ro_number ? (
|
record.bill?.job?.ro_number ? (
|
||||||
<Link to={`/manage/jobs/${record.bill?.job?.id}`}>
|
<Link to={`/manage/jobs/${record.bill?.job?.id}`}>
|
||||||
{record.bill?.job?.ro_number}
|
{record.bill?.job?.ro_number}
|
||||||
</Link>
|
</Link>
|
||||||
) : (
|
) : (
|
||||||
<InventoryBillRo inventoryline={record} />
|
<InventoryBillRo inventoryline={record}/>
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: t("general.labels.actions"),
|
title: t("general.labels.actions"),
|
||||||
dataIndex: "actions",
|
dataIndex: "actions",
|
||||||
key: "actions",
|
key: "actions",
|
||||||
|
|
||||||
ellipsis: true,
|
ellipsis: true,
|
||||||
render: (text, record) => (
|
render: (text, record) => (
|
||||||
<Space wrap>
|
<Space wrap>
|
||||||
<Button
|
<Button
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setInventoryUpsertContext({
|
setInventoryUpsertContext({
|
||||||
actions: { refetch: refetch },
|
actions: {refetch: refetch},
|
||||||
context: {
|
context: {
|
||||||
existingInventory: record,
|
existingInventory: record,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<EditFilled />
|
<EditFilled/>
|
||||||
</Button>
|
</Button>
|
||||||
<InventoryLineDelete inventoryline={record} refetch={refetch} />
|
<InventoryLineDelete inventoryline={record} refetch={refetch}/>
|
||||||
</Space>
|
</Space>
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
const handleTableChange = (pagination, filters, sorter) => {
|
const handleTableChange = (pagination, filters, sorter) => {
|
||||||
search.page = pagination.current;
|
search.page = pagination.current;
|
||||||
search.sortcolumn = sorter.column && sorter.column.key;
|
search.sortcolumn = sorter.column && sorter.column.key;
|
||||||
search.sortorder = sorter.order;
|
search.sortorder = sorter.order;
|
||||||
history.push({ search: queryString.stringify(search) });
|
history({search: queryString.stringify(search)});
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Card
|
<Card
|
||||||
extra={
|
extra={
|
||||||
<Space wrap>
|
<Space wrap>
|
||||||
{search.search && (
|
{search.search && (
|
||||||
<>
|
<>
|
||||||
<Typography.Title level={4}>
|
<Typography.Title level={4}>
|
||||||
{t("general.labels.searchresults", { search: search.search })}
|
{t("general.labels.searchresults", {search: search.search})}
|
||||||
</Typography.Title>
|
</Typography.Title>
|
||||||
<Button
|
<Button
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
delete search.search;
|
delete search.search;
|
||||||
history.push({ search: queryString.stringify(search) });
|
history({search: queryString.stringify(search)});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{t("general.actions.clear")}
|
||||||
|
</Button>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
<Button
|
||||||
|
onClick={() => {
|
||||||
|
setInventoryUpsertContext({
|
||||||
|
actions: {refetch: refetch},
|
||||||
|
context: {},
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<FileAddFilled/>
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
onClick={() => {
|
||||||
|
if (search.showall) delete search.showall;
|
||||||
|
else {
|
||||||
|
search.showall = true;
|
||||||
|
}
|
||||||
|
history({search: queryString.stringify(search)});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{search.showall
|
||||||
|
? t("inventory.labels.showavailable")
|
||||||
|
: t("inventory.labels.showall")}
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<Button onClick={() => refetch()}>
|
||||||
|
<SyncOutlined/>
|
||||||
|
</Button>
|
||||||
|
<Input.Search
|
||||||
|
placeholder={search.search || t("general.labels.search")}
|
||||||
|
onSearch={(value) => {
|
||||||
|
search.search = value;
|
||||||
|
history({search: queryString.stringify(search)});
|
||||||
|
}}
|
||||||
|
enterButton
|
||||||
|
/>
|
||||||
|
</Space>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Table
|
||||||
|
loading={loading}
|
||||||
|
pagination={{
|
||||||
|
position: "top",
|
||||||
|
pageSize: pageLimit,
|
||||||
|
current: parseInt(page || 1),
|
||||||
|
total: total,
|
||||||
}}
|
}}
|
||||||
>
|
columns={columns}
|
||||||
{t("general.actions.clear")}
|
rowKey="id"
|
||||||
</Button>
|
dataSource={jobs}
|
||||||
</>
|
onChange={handleTableChange}
|
||||||
)}
|
/>
|
||||||
<Button
|
</Card>
|
||||||
onClick={() => {
|
);
|
||||||
setInventoryUpsertContext({
|
|
||||||
actions: { refetch: refetch },
|
|
||||||
context: {},
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<FileAddFilled />
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
onClick={() => {
|
|
||||||
if (search.showall) delete search.showall;
|
|
||||||
else {
|
|
||||||
search.showall = true;
|
|
||||||
}
|
|
||||||
history.push({ search: queryString.stringify(search) });
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{search.showall
|
|
||||||
? t("inventory.labels.showavailable")
|
|
||||||
: t("inventory.labels.showall")}
|
|
||||||
</Button>
|
|
||||||
|
|
||||||
<Button onClick={() => refetch()}>
|
|
||||||
<SyncOutlined />
|
|
||||||
</Button>
|
|
||||||
<Input.Search
|
|
||||||
placeholder={search.search || t("general.labels.search")}
|
|
||||||
onSearch={(value) => {
|
|
||||||
search.search = value;
|
|
||||||
history.push({ search: queryString.stringify(search) });
|
|
||||||
}}
|
|
||||||
enterButton
|
|
||||||
/>
|
|
||||||
</Space>
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<Table
|
|
||||||
loading={loading}
|
|
||||||
pagination={{
|
|
||||||
position: "top",
|
|
||||||
pageSize: pageLimit,
|
|
||||||
current: parseInt(page || 1),
|
|
||||||
total: total,
|
|
||||||
}}
|
|
||||||
columns={columns}
|
|
||||||
rowKey="id"
|
|
||||||
dataSource={jobs}
|
|
||||||
onChange={handleTableChange}
|
|
||||||
/>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export default connect(mapStateToProps, mapDispatchToProps)(JobsList);
|
export default connect(mapStateToProps, mapDispatchToProps)(JobsList);
|
||||||
|
|||||||
@@ -103,7 +103,7 @@ export function InventoryUpsertModalContainer({
|
|||||||
? t("inventory.actions.edit")
|
? t("inventory.actions.edit")
|
||||||
: t("inventory.actions.new")
|
: t("inventory.actions.new")
|
||||||
}
|
}
|
||||||
visible={visible}
|
open={visible}
|
||||||
okText={t("general.actions.save")}
|
okText={t("general.actions.save")}
|
||||||
onOk={() => {
|
onOk={() => {
|
||||||
form.submit();
|
form.submit();
|
||||||
|
|||||||
@@ -98,7 +98,7 @@ export function Jobd3RdPartyModal({ bodyshop, jobId, job, technician }) {
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Button onClick={showModal}>{t("printcenter.jobs.3rdpartypayer")}</Button>
|
<Button onClick={showModal}>{t("printcenter.jobs.3rdpartypayer")}</Button>
|
||||||
<Modal visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
|
<Modal open={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
|
||||||
<Form
|
<Form
|
||||||
onFinish={handleFinish}
|
onFinish={handleFinish}
|
||||||
autoComplete={"off"}
|
autoComplete={"off"}
|
||||||
|
|||||||
@@ -4,7 +4,7 @@ import { UPDATE_JOB } from "../../graphql/jobs.queries";
|
|||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
import { connect } from "react-redux";
|
import { connect } from "react-redux";
|
||||||
import { createStructuredSelector } from "reselect";
|
import { createStructuredSelector } from "reselect";
|
||||||
import { Dropdown, Menu, notification } from "antd";
|
import { Dropdown, notification } from "antd";
|
||||||
import { DownOutlined } from "@ant-design/icons";
|
import { DownOutlined } from "@ant-design/icons";
|
||||||
import { selectBodyshop } from "../../redux/user/user.selectors";
|
import { selectBodyshop } from "../../redux/user/user.selectors";
|
||||||
|
|
||||||
@@ -37,18 +37,21 @@ export function JobAltTransportChange({ bodyshop, job }) {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
const menu = (
|
|
||||||
<Menu selectedKeys={[job && job.alt_transport]} onClick={onClick}>
|
const menu = {
|
||||||
{bodyshop.appt_alt_transport &&
|
items: [
|
||||||
bodyshop.appt_alt_transport.map((alt) => (
|
...(bodyshop.appt_alt_transport || []).map((alt) => ({
|
||||||
<Menu.Item key={alt}>{alt}</Menu.Item>
|
key: alt,
|
||||||
))}
|
label: alt,
|
||||||
<Menu.Divider />
|
})),
|
||||||
<Menu.Item key={"null"}>{t("general.actions.clear")}</Menu.Item>
|
{ key: "null", label: t("general.actions.clear") },
|
||||||
</Menu>
|
],
|
||||||
);
|
onClick: onClick,
|
||||||
|
defaultSelectedKeys: [job && job.alt_transport]
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Dropdown overlay={menu}>
|
<Dropdown menu={menu}>
|
||||||
<a href=" #" onClick={(e) => e.preventDefault()}>
|
<a href=" #" onClick={(e) => e.preventDefault()}>
|
||||||
<DownOutlined />
|
<DownOutlined />
|
||||||
</a>
|
</a>
|
||||||
|
|||||||
@@ -4,7 +4,7 @@ import { UPDATE_APPOINTMENT } from "../../graphql/appointments.queries";
|
|||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
import { connect } from "react-redux";
|
import { connect } from "react-redux";
|
||||||
import { createStructuredSelector } from "reselect";
|
import { createStructuredSelector } from "reselect";
|
||||||
import { Dropdown, Menu, notification } from "antd";
|
import { Dropdown, notification } from "antd";
|
||||||
import { DownOutlined } from "@ant-design/icons";
|
import { DownOutlined } from "@ant-design/icons";
|
||||||
import { selectBodyshop } from "../../redux/user/user.selectors";
|
import { selectBodyshop } from "../../redux/user/user.selectors";
|
||||||
|
|
||||||
@@ -44,21 +44,23 @@ export function ScheduleEventColor({ bodyshop, event }) {
|
|||||||
bodyshop.appt_colors.filter((color) => color.color.hex === event.color)[0]
|
bodyshop.appt_colors.filter((color) => color.color.hex === event.color)[0]
|
||||||
?.label;
|
?.label;
|
||||||
|
|
||||||
const menu = (
|
|
||||||
<Menu selectedKeys={[event.color]} onClick={onClick}>
|
const menu = {
|
||||||
{bodyshop.appt_colors &&
|
defaultSelectedKeys: [event.color],
|
||||||
bodyshop.appt_colors.map((color) => (
|
onClick: onClick,
|
||||||
<Menu.Item style={{ color: color.color.hex }} key={color.color.hex}>
|
items: [
|
||||||
{color.label}
|
...(bodyshop.appt_colors || []).map((color) => ({
|
||||||
</Menu.Item>
|
key: color.color.hex,
|
||||||
))}
|
label: color.label,
|
||||||
<Menu.Divider />
|
style: { color: color.color.hex },
|
||||||
<Menu.Item key={"null"}>{t("general.actions.clear")}</Menu.Item>
|
})),
|
||||||
</Menu>
|
{ type: "divider" },
|
||||||
);
|
{ key: "null", label: t("general.actions.clear") },
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Dropdown overlay={menu}>
|
<Dropdown menu={menu}>
|
||||||
<a href=" #" onClick={(e) => e.preventDefault()}>
|
<a href=" #" onClick={(e) => e.preventDefault()}>
|
||||||
{selectedColor}
|
{selectedColor}
|
||||||
<DownOutlined />
|
<DownOutlined />
|
||||||
@@ -66,4 +68,5 @@ export function ScheduleEventColor({ bodyshop, event }) {
|
|||||||
</Dropdown>
|
</Dropdown>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default connect(mapStateToProps, mapDispatchToProps)(ScheduleEventColor);
|
export default connect(mapStateToProps, mapDispatchToProps)(ScheduleEventColor);
|
||||||
|
|||||||
@@ -5,19 +5,18 @@ import {
|
|||||||
Dropdown,
|
Dropdown,
|
||||||
Form,
|
Form,
|
||||||
Input,
|
Input,
|
||||||
Menu,
|
|
||||||
notification,
|
notification,
|
||||||
Popover,
|
Popover,
|
||||||
Select,
|
Select,
|
||||||
Space,
|
Space,
|
||||||
} from "antd";
|
} from "antd";
|
||||||
import parsePhoneNumber from "libphonenumber-js";
|
import parsePhoneNumber from "libphonenumber-js";
|
||||||
import moment from "moment";
|
import dayjs from "../../utils/day";
|
||||||
import queryString from "query-string";
|
import queryString from "query-string";
|
||||||
import React, { useState } from "react";
|
import React, { useState } from "react";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
import { connect } from "react-redux";
|
import { connect } from "react-redux";
|
||||||
import { Link, useHistory, useLocation } from "react-router-dom";
|
import { Link, useNavigate, useLocation } from "react-router-dom";
|
||||||
import { createStructuredSelector } from "reselect";
|
import { createStructuredSelector } from "reselect";
|
||||||
import {
|
import {
|
||||||
openChatByPhone,
|
openChatByPhone,
|
||||||
@@ -59,7 +58,7 @@ export function ScheduleEventComponent({
|
|||||||
}) {
|
}) {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
const [visible, setVisible] = useState(false);
|
const [visible, setVisible] = useState(false);
|
||||||
const history = useHistory();
|
const history = useNavigate();
|
||||||
const searchParams = queryString.parse(useLocation().search);
|
const searchParams = queryString.parse(useLocation().search);
|
||||||
const [updateAppointment] = useMutation(UPDATE_APPOINTMENT);
|
const [updateAppointment] = useMutation(UPDATE_APPOINTMENT);
|
||||||
const [title, setTitle] = useState(event.title);
|
const [title, setTitle] = useState(event.title);
|
||||||
@@ -172,7 +171,7 @@ export function ScheduleEventComponent({
|
|||||||
{event.job ? (
|
{event.job ? (
|
||||||
<Button
|
<Button
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
history.push({
|
history({
|
||||||
search: queryString.stringify({
|
search: queryString.stringify({
|
||||||
...searchParams,
|
...searchParams,
|
||||||
selected: event.job.id,
|
selected: event.job.id,
|
||||||
@@ -185,56 +184,54 @@ export function ScheduleEventComponent({
|
|||||||
) : null}
|
) : null}
|
||||||
{event.job ? (
|
{event.job ? (
|
||||||
<Dropdown
|
<Dropdown
|
||||||
overlay={
|
menu={{items: [
|
||||||
<Menu>
|
{
|
||||||
<Menu.Item
|
key: "email",
|
||||||
onClick={() => {
|
label: t("general.labels.email"),
|
||||||
const Template = TemplateList("job").appointment_reminder;
|
disabled: event.arrived,
|
||||||
GenerateDocument(
|
onClick: () => {
|
||||||
{
|
const Template = TemplateList("job").appointment_reminder;
|
||||||
name: Template.key,
|
GenerateDocument(
|
||||||
variables: { id: event.job.id },
|
{
|
||||||
},
|
name: Template.key,
|
||||||
{
|
variables: { id: event.job.id },
|
||||||
to: event.job && event.job.ownr_ea,
|
},
|
||||||
subject: Template.subject,
|
{
|
||||||
},
|
to: event.job && event.job.ownr_ea,
|
||||||
"e",
|
subject: Template.subject,
|
||||||
event.job && event.job.id
|
},
|
||||||
);
|
"e",
|
||||||
}}
|
event.job && event.job.id
|
||||||
disabled={event.arrived}
|
);
|
||||||
>
|
},
|
||||||
{t("general.labels.email")}
|
},
|
||||||
</Menu.Item>
|
{
|
||||||
<Menu.Item
|
key: "sms",
|
||||||
onClick={() => {
|
label: t("general.labels.sms"),
|
||||||
const p = parsePhoneNumber(event.job.ownr_ph1, "CA");
|
disabled: event.arrived || !bodyshop.messagingservicesid,
|
||||||
if (p && p.isValid()) {
|
onClick: () => {
|
||||||
openChatByPhone({
|
const p = parsePhoneNumber(event.job.ownr_ph1, "CA");
|
||||||
phone_num: p.formatInternational(),
|
if (p && p.isValid()) {
|
||||||
jobid: event.job.id,
|
openChatByPhone({
|
||||||
});
|
phone_num: p.formatInternational(),
|
||||||
setMessage(
|
jobid: event.job.id,
|
||||||
t("appointments.labels.reminder", {
|
});
|
||||||
shopname: bodyshop.shopname,
|
setMessage(
|
||||||
date: moment(event.start).format("MM/DD/YYYY"),
|
t("appointments.labels.reminder", {
|
||||||
time: moment(event.start).format("HH:mm a"),
|
shopname: bodyshop.shopname,
|
||||||
})
|
date: dayjs(event.start).format("MM/DD/YYYY"),
|
||||||
);
|
time: dayjs(event.start).format("HH:mm a"),
|
||||||
setVisible(false);
|
})
|
||||||
} else {
|
);
|
||||||
notification["error"]({
|
setVisible(false);
|
||||||
message: t("messaging.error.invalidphone"),
|
} else {
|
||||||
});
|
notification["error"]({
|
||||||
}
|
message: t("messaging.error.invalidphone"),
|
||||||
}}
|
});
|
||||||
disabled={event.arrived || !bodyshop.messagingservicesid}
|
}
|
||||||
>
|
},
|
||||||
{t("general.labels.sms")}
|
},
|
||||||
</Menu.Item>
|
]}}
|
||||||
</Menu>
|
|
||||||
}
|
|
||||||
>
|
>
|
||||||
<Button>{t("appointments.actions.sendreminder")}</Button>
|
<Button>{t("appointments.actions.sendreminder")}</Button>
|
||||||
</Dropdown>
|
</Dropdown>
|
||||||
@@ -369,8 +366,8 @@ export function ScheduleEventComponent({
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<Popover
|
<Popover
|
||||||
visible={visible}
|
open={visible}
|
||||||
onVisibleChange={(vis) => !event.vacation && setVisible(vis)}
|
onOpenChange={(vis) => !event.vacation && setVisible(vis)}
|
||||||
trigger="click"
|
trigger="click"
|
||||||
content={event.block ? blockContent : popoverContent}
|
content={event.block ? blockContent : popoverContent}
|
||||||
style={{
|
style={{
|
||||||
|
|||||||
@@ -1,11 +1,11 @@
|
|||||||
import { useMutation } from "@apollo/client";
|
import { useMutation } from "@apollo/client";
|
||||||
import { Button, Card, Form, Input, notification, Switch } from "antd";
|
import { Button, Card, Form, Input, notification, Switch } from "antd";
|
||||||
import moment from "moment-business-days";
|
import dayjs from "../../../../utils/day";
|
||||||
import queryString from "query-string";
|
import queryString from "query-string";
|
||||||
import React, { useState } from "react";
|
import React, { useState } from "react";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
import { connect } from "react-redux";
|
import { connect } from "react-redux";
|
||||||
import { useHistory, useLocation, useParams } from "react-router-dom";
|
import { useLocation, useNavigate, useParams } from "react-router-dom";
|
||||||
import { createStructuredSelector } from "reselect";
|
import { createStructuredSelector } from "reselect";
|
||||||
import { logImEXEvent } from "../../../../firebase/firebase.utils";
|
import { logImEXEvent } from "../../../../firebase/firebase.utils";
|
||||||
import {
|
import {
|
||||||
@@ -49,7 +49,7 @@ export function JobChecklistForm({
|
|||||||
const [updateOwner] = useMutation(UPDATE_OWNER);
|
const [updateOwner] = useMutation(UPDATE_OWNER);
|
||||||
|
|
||||||
const { jobId } = useParams();
|
const { jobId } = useParams();
|
||||||
const history = useHistory();
|
const history = useNavigate();
|
||||||
const search = queryString.parse(useLocation().search);
|
const search = queryString.parse(useLocation().search);
|
||||||
const [form] = Form.useForm();
|
const [form] = Form.useForm();
|
||||||
|
|
||||||
@@ -87,9 +87,9 @@ export function JobChecklistForm({
|
|||||||
bodyshop.intakechecklist &&
|
bodyshop.intakechecklist &&
|
||||||
bodyshop.intakechecklist.next_contact_hours &&
|
bodyshop.intakechecklist.next_contact_hours &&
|
||||||
bodyshop.intakechecklist.next_contact_hours > 0 && {
|
bodyshop.intakechecklist.next_contact_hours > 0 && {
|
||||||
date_next_contact: moment().add(
|
date_next_contact: dayjs().add(
|
||||||
bodyshop.intakechecklist.next_contact_hours,
|
bodyshop.intakechecklist.next_contact_hours,
|
||||||
"hours"
|
"hour"
|
||||||
),
|
),
|
||||||
}),
|
}),
|
||||||
...(type === "deliver" && {
|
...(type === "deliver" && {
|
||||||
@@ -172,7 +172,7 @@ export function JobChecklistForm({
|
|||||||
|
|
||||||
if (!!!result.errors) {
|
if (!!!result.errors) {
|
||||||
notification["success"]({ message: t("checklist.successes.completed") });
|
notification["success"]({ message: t("checklist.successes.completed") });
|
||||||
history.push(`/manage/jobs/${jobId}`);
|
history(`/manage/jobs/${jobId}`);
|
||||||
|
|
||||||
insertAuditTrail({
|
insertAuditTrail({
|
||||||
jobid: jobId,
|
jobid: jobId,
|
||||||
@@ -218,26 +218,26 @@ export function JobChecklistForm({
|
|||||||
scheduled_completion:
|
scheduled_completion:
|
||||||
(job &&
|
(job &&
|
||||||
job.scheduled_completion &&
|
job.scheduled_completion &&
|
||||||
moment(job.scheduled_completion)) ||
|
dayjs(job.scheduled_completion)) ||
|
||||||
(job &&
|
(job &&
|
||||||
job.labhrs &&
|
job.labhrs &&
|
||||||
job.larhrs &&
|
job.larhrs &&
|
||||||
moment().businessAdd(
|
dayjs().businessDaysAdd(
|
||||||
(job.labhrs.aggregate.sum.mod_lb_hrs ||
|
(job.labhrs.aggregate.sum.mod_lb_hrs ||
|
||||||
0 + job.larhrs.aggregate.sum.mod_lb_hrs ||
|
0 + job.larhrs.aggregate.sum.mod_lb_hrs ||
|
||||||
0) / bodyshop.target_touchtime,
|
0) / bodyshop.target_touchtime,
|
||||||
"days"
|
"day"
|
||||||
)),
|
)),
|
||||||
scheduled_delivery:
|
scheduled_delivery:
|
||||||
job.scheduled_delivery && moment(job.scheduled_delivery),
|
job.scheduled_delivery && dayjs(job.scheduled_delivery),
|
||||||
production_vars: job.production_vars,
|
production_vars: job.production_vars,
|
||||||
}),
|
}),
|
||||||
...(type === "deliver" && {
|
...(type === "deliver" && {
|
||||||
removeFromProduction: true,
|
removeFromProduction: true,
|
||||||
actual_completion:
|
actual_completion:
|
||||||
job && job.actual_completion && moment(job.actual_completion),
|
job && job.actual_completion && dayjs(job.actual_completion),
|
||||||
actual_delivery:
|
actual_delivery:
|
||||||
job && job.actual_delivery && moment(job.actual_delivery),
|
job && job.actual_delivery && dayjs(job.actual_delivery),
|
||||||
}),
|
}),
|
||||||
...formItems
|
...formItems
|
||||||
.filter((fi) => fi.value)
|
.filter((fi) => fi.value)
|
||||||
|
|||||||
@@ -39,7 +39,7 @@ export function JobCostingModalContainer({
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<Modal
|
<Modal
|
||||||
visible={visible}
|
open={visible}
|
||||||
title={t("jobs.labels.jobcosting")}
|
title={t("jobs.labels.jobcosting")}
|
||||||
onOk={() => {
|
onOk={() => {
|
||||||
toggleModalVisible();
|
toggleModalVisible();
|
||||||
|
|||||||
@@ -1,10 +1,10 @@
|
|||||||
import { useApolloClient } from "@apollo/client";
|
import { useApolloClient } from "@apollo/client";
|
||||||
import { useTreatments } from "@splitsoftware/splitio-react";
|
import { useSplitTreatments } from "@splitsoftware/splitio-react";
|
||||||
import { Button, notification, Popconfirm } from "antd";
|
import { Button, notification, Popconfirm } from "antd";
|
||||||
import React, { useState } from "react";
|
import React, { useState } from "react";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
import { connect } from "react-redux";
|
import { connect } from "react-redux";
|
||||||
import { useHistory } from "react-router";
|
import { useNavigate } from "react-router-dom";
|
||||||
import { createStructuredSelector } from "reselect";
|
import { createStructuredSelector } from "reselect";
|
||||||
import { UPDATE_JOB_LINES_IOU } from "../../graphql/jobs-lines.queries";
|
import { UPDATE_JOB_LINES_IOU } from "../../graphql/jobs-lines.queries";
|
||||||
import {
|
import {
|
||||||
@@ -25,13 +25,15 @@ export function JobCreateIOU({ bodyshop, currentUser, job, selectedJobLines }) {
|
|||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
const client = useApolloClient();
|
const client = useApolloClient();
|
||||||
const history = useHistory();
|
const history = useNavigate();
|
||||||
|
|
||||||
|
|
||||||
|
const { treatments: {IOU_Tracking} } = useSplitTreatments({
|
||||||
|
attributes: {},
|
||||||
|
names: ["IOU_Tracking"],
|
||||||
|
splitKey: bodyshop.imexshopid,
|
||||||
|
});
|
||||||
|
|
||||||
const { IOU_Tracking } = useTreatments(
|
|
||||||
["IOU_Tracking"],
|
|
||||||
{},
|
|
||||||
bodyshop.imexshopid
|
|
||||||
);
|
|
||||||
if (IOU_Tracking.treatment !== "on") return null;
|
if (IOU_Tracking.treatment !== "on") return null;
|
||||||
|
|
||||||
const handleCreateIou = async () => {
|
const handleCreateIou = async () => {
|
||||||
@@ -50,7 +52,7 @@ export function JobCreateIOU({ bodyshop, currentUser, job, selectedJobLines }) {
|
|||||||
notification.open({
|
notification.open({
|
||||||
type: "success",
|
type: "success",
|
||||||
message: t("jobs.successes.ioucreated"),
|
message: t("jobs.successes.ioucreated"),
|
||||||
onClick: () => history.push(`/manage/jobs/${iouId}`),
|
onClick: () => history(`/manage/jobs/${iouId}`),
|
||||||
});
|
});
|
||||||
const selectedJobLinesIds = selectedJobLines.map((l) => l.id);
|
const selectedJobLinesIds = selectedJobLines.map((l) => l.id);
|
||||||
await client.mutate({
|
await client.mutate({
|
||||||
|
|||||||
@@ -5,7 +5,7 @@ import queryString from "query-string";
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
import { connect } from "react-redux";
|
import { connect } from "react-redux";
|
||||||
import { Link, useHistory, useLocation } from "react-router-dom";
|
import { Link, useNavigate, useLocation } from "react-router-dom";
|
||||||
import { createStructuredSelector } from "reselect";
|
import { createStructuredSelector } from "reselect";
|
||||||
import { QUERY_JOB_CARD_DETAILS } from "../../graphql/jobs.queries";
|
import { QUERY_JOB_CARD_DETAILS } from "../../graphql/jobs.queries";
|
||||||
import { setModalContext } from "../../redux/modals/modals.actions";
|
import { setModalContext } from "../../redux/modals/modals.actions";
|
||||||
@@ -56,7 +56,7 @@ export function JobDetailCards({ bodyshop, setPrintCenterContext }) {
|
|||||||
|
|
||||||
const searchParams = queryString.parse(useLocation().search);
|
const searchParams = queryString.parse(useLocation().search);
|
||||||
const { selected } = searchParams;
|
const { selected } = searchParams;
|
||||||
const history = useHistory();
|
const history = useNavigate();
|
||||||
const { loading, error, data, refetch } = useQuery(QUERY_JOB_CARD_DETAILS, {
|
const { loading, error, data, refetch } = useQuery(QUERY_JOB_CARD_DETAILS, {
|
||||||
variables: { id: selected },
|
variables: { id: selected },
|
||||||
skip: !selected,
|
skip: !selected,
|
||||||
@@ -67,7 +67,7 @@ export function JobDetailCards({ bodyshop, setPrintCenterContext }) {
|
|||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
const handleDrawerClose = () => {
|
const handleDrawerClose = () => {
|
||||||
delete searchParams.selected;
|
delete searchParams.selected;
|
||||||
history.push({
|
history({
|
||||||
search: queryString.stringify({
|
search: queryString.stringify({
|
||||||
...searchParams,
|
...searchParams,
|
||||||
}),
|
}),
|
||||||
@@ -76,7 +76,7 @@ export function JobDetailCards({ bodyshop, setPrintCenterContext }) {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<Drawer
|
<Drawer
|
||||||
visible={!!selected}
|
open={!!selected}
|
||||||
destroyOnClose
|
destroyOnClose
|
||||||
width={drawerPercentage}
|
width={drawerPercentage}
|
||||||
placement="right"
|
placement="right"
|
||||||
|
|||||||
@@ -1,119 +1,188 @@
|
|||||||
import { Timeline } from "antd";
|
import {Timeline} from "antd";
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import { useTranslation } from "react-i18next";
|
import {useTranslation} from "react-i18next";
|
||||||
import { DateTimeFormatter } from "../../utils/DateFormatter";
|
import {DateTimeFormatter} from "../../utils/DateFormatter";
|
||||||
import CardTemplate from "./job-detail-cards.template.component";
|
import CardTemplate from "./job-detail-cards.template.component";
|
||||||
|
|
||||||
export default function JobDetailCardsDatesComponent({ loading, data }) {
|
export default function JobDetailCardsDatesComponent({loading, data}) {
|
||||||
const { t } = useTranslation();
|
const {t} = useTranslation();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<CardTemplate loading={loading} title={t("jobs.labels.cards.dates")}>
|
<CardTemplate loading={loading} title={t("jobs.labels.cards.dates")}>
|
||||||
{data ? (
|
{data ? (
|
||||||
<Timeline>
|
<Timeline
|
||||||
{!(
|
items={[
|
||||||
data.actual_in ||
|
...(data.date_last_contacted
|
||||||
data.scheduled_completion ||
|
? [
|
||||||
data.scheduled_in ||
|
{
|
||||||
data.actual_completion ||
|
key: "date_last_contacted",
|
||||||
data.scheduled_delivery ||
|
label: (
|
||||||
data.actual_delivery ||
|
<>
|
||||||
data.date_estimated ||
|
<label>{t("jobs.fields.date_last_contacted")}: </label>
|
||||||
data.date_open ||
|
<DateTimeFormatter>{data.date_last_contacted}</DateTimeFormatter>
|
||||||
data.date_scheduled ||
|
</>
|
||||||
data.date_invoiced ||
|
),
|
||||||
data.date_exported
|
},
|
||||||
) ? (
|
]
|
||||||
<div>{t("jobs.errors.nodates")}</div>
|
: []),
|
||||||
) : null}
|
...(data.date_open
|
||||||
{data.date_last_contacted ? (
|
? [
|
||||||
<Timeline.Item>
|
{
|
||||||
<label>{t("jobs.fields.date_last_contacted")}: </label>
|
key: "date_open",
|
||||||
<DateTimeFormatter>{data.date_last_contacted}</DateTimeFormatter>
|
label: (
|
||||||
</Timeline.Item>
|
<>
|
||||||
) : null}
|
<label>{t("jobs.fields.date_open")}: </label>
|
||||||
{data.date_open ? (
|
<DateTimeFormatter>{data.date_open}</DateTimeFormatter>
|
||||||
<Timeline.Item>
|
</>
|
||||||
<label>{t("jobs.fields.date_open")}: </label>
|
),
|
||||||
<DateTimeFormatter>{data.date_open}</DateTimeFormatter>
|
},
|
||||||
</Timeline.Item>
|
]
|
||||||
) : null}
|
: []),
|
||||||
|
...(data.date_estimated
|
||||||
{data.date_estimated ? (
|
? [
|
||||||
<Timeline.Item>
|
{
|
||||||
<label>{t("jobs.fields.date_estimated")}: </label>
|
key: "date_estimated",
|
||||||
<DateTimeFormatter>{data.date_estimated}</DateTimeFormatter>
|
label: (
|
||||||
</Timeline.Item>
|
<>
|
||||||
) : null}
|
<label>{t("jobs.fields.date_estimated")}: </label>
|
||||||
|
<DateTimeFormatter>{data.date_estimated}</DateTimeFormatter>
|
||||||
{data.date_scheduled ? (
|
</>
|
||||||
<Timeline.Item>
|
),
|
||||||
<label>{t("jobs.fields.date_scheduled")}: </label>
|
},
|
||||||
<DateTimeFormatter>{data.date_scheduled}</DateTimeFormatter>
|
]
|
||||||
</Timeline.Item>
|
: []),
|
||||||
) : null}
|
...(data.date_scheduled
|
||||||
|
? [
|
||||||
{data.scheduled_in ? (
|
{
|
||||||
<Timeline.Item>
|
key: "date_scheduled",
|
||||||
<label>{t("jobs.fields.scheduled_in")}: </label>
|
label: (
|
||||||
<DateTimeFormatter>{data.scheduled_in}</DateTimeFormatter>
|
<>
|
||||||
</Timeline.Item>
|
<label>{t("jobs.fields.date_scheduled")}: </label>
|
||||||
) : null}
|
<DateTimeFormatter>{data.date_scheduled}</DateTimeFormatter>
|
||||||
{data.actual_in ? (
|
</>
|
||||||
<Timeline.Item>
|
),
|
||||||
<label>{t("jobs.fields.actual_in")}: </label>
|
},
|
||||||
<DateTimeFormatter>{data.actual_in}</DateTimeFormatter>
|
]
|
||||||
</Timeline.Item>
|
: []),
|
||||||
) : null}
|
...(data.scheduled_in
|
||||||
{data.date_repairstarted ? (
|
? [
|
||||||
<Timeline.Item>
|
{
|
||||||
<label>{t("jobs.fields.date_repairstarted")}: </label>
|
key: "scheduled_in",
|
||||||
<DateTimeFormatter>{data.date_repairstarted}</DateTimeFormatter>
|
label: (
|
||||||
</Timeline.Item>
|
<>
|
||||||
) : null}
|
<label>{t("jobs.fields.scheduled_in")}: </label>
|
||||||
{data.scheduled_completion ? (
|
<DateTimeFormatter>{data.scheduled_in}</DateTimeFormatter>
|
||||||
<Timeline.Item>
|
</>
|
||||||
<label>{t("jobs.fields.scheduled_completion")}: </label>
|
),
|
||||||
<DateTimeFormatter>{data.scheduled_completion}</DateTimeFormatter>
|
},
|
||||||
</Timeline.Item>
|
]
|
||||||
) : null}
|
: []),
|
||||||
|
...(data.actual_in
|
||||||
{data.actual_completion ? (
|
? [
|
||||||
<Timeline.Item>
|
{
|
||||||
<label>{t("jobs.fields.actual_completion")}: </label>
|
key: "actual_in",
|
||||||
<DateTimeFormatter>{data.actual_completion}</DateTimeFormatter>
|
label: (
|
||||||
</Timeline.Item>
|
<>
|
||||||
) : null}
|
<label>{t("jobs.fields.actual_in")}: </label>
|
||||||
|
<DateTimeFormatter>{data.actual_in}</DateTimeFormatter>
|
||||||
{data.scheduled_delivery ? (
|
</>
|
||||||
<Timeline.Item>
|
),
|
||||||
<label>{t("jobs.fields.scheduled_delivery")}: </label>
|
},
|
||||||
<DateTimeFormatter>{data.scheduled_delivery}</DateTimeFormatter>
|
]
|
||||||
</Timeline.Item>
|
: []),
|
||||||
) : null}
|
...(data.date_repairstarted
|
||||||
|
? [
|
||||||
{data.actual_delivery ? (
|
{
|
||||||
<Timeline.Item>
|
key: "date_repairstarted",
|
||||||
<label>{t("jobs.fields.actual_delivery")}: </label>
|
label: (
|
||||||
<DateTimeFormatter>{data.actual_delivery}</DateTimeFormatter>
|
<>
|
||||||
</Timeline.Item>
|
<label>{t("jobs.fields.date_repairstarted")}: </label>
|
||||||
) : null}
|
<DateTimeFormatter>{data.date_repairstarted}</DateTimeFormatter>
|
||||||
|
</>
|
||||||
{data.date_invoiced ? (
|
),
|
||||||
<Timeline.Item>
|
},
|
||||||
<label>{t("jobs.fields.date_invoiced")}: </label>
|
]
|
||||||
<DateTimeFormatter>{data.date_invoiced}</DateTimeFormatter>
|
: []),
|
||||||
</Timeline.Item>
|
...(data.scheduled_completion
|
||||||
) : null}
|
? [
|
||||||
|
{
|
||||||
{data.date_exported ? (
|
key: "scheduled_completion",
|
||||||
<Timeline.Item>
|
label: (
|
||||||
<label>{t("jobs.fields.date_exported")}: </label>
|
<>
|
||||||
<DateTimeFormatter>{data.date_exported}</DateTimeFormatter>
|
<label>{t("jobs.fields.scheduled_completion")}: </label>
|
||||||
</Timeline.Item>
|
<DateTimeFormatter>{data.scheduled_completion}</DateTimeFormatter>
|
||||||
) : null}
|
</>
|
||||||
</Timeline>
|
),
|
||||||
) : null}
|
},
|
||||||
</CardTemplate>
|
]
|
||||||
);
|
: []),
|
||||||
|
...(data.actual_completion
|
||||||
|
? [
|
||||||
|
{
|
||||||
|
key: "actual_completion",
|
||||||
|
label: (
|
||||||
|
<>
|
||||||
|
<label>{t("jobs.fields.actual_completion")}: </label>
|
||||||
|
<DateTimeFormatter>{data.actual_completion}</DateTimeFormatter>
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
]
|
||||||
|
: []),
|
||||||
|
...(data.scheduled_delivery
|
||||||
|
? [
|
||||||
|
{
|
||||||
|
key: "scheduled_delivery",
|
||||||
|
label: (
|
||||||
|
<>
|
||||||
|
<label>{t("jobs.fields.scheduled_delivery")}: </label>
|
||||||
|
<DateTimeFormatter>{data.scheduled_delivery}</DateTimeFormatter>
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
]
|
||||||
|
: []),
|
||||||
|
...(data.actual_delivery
|
||||||
|
? [
|
||||||
|
{
|
||||||
|
key: "actual_delivery",
|
||||||
|
label: (
|
||||||
|
<>
|
||||||
|
<label>{t("jobs.fields.actual_delivery")}: </label>
|
||||||
|
<DateTimeFormatter>{data.actual_delivery}</DateTimeFormatter>
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
]
|
||||||
|
: []),
|
||||||
|
...(data.date_invoiced
|
||||||
|
? [
|
||||||
|
{
|
||||||
|
key: "date_invoiced",
|
||||||
|
label: (
|
||||||
|
<>
|
||||||
|
<label>{t("jobs.fields.date_invoiced")}: </label>
|
||||||
|
<DateTimeFormatter>{data.date_invoiced}</DateTimeFormatter>
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
]
|
||||||
|
: []),
|
||||||
|
...(data.date_exported
|
||||||
|
? [
|
||||||
|
{
|
||||||
|
key: "date_exported",
|
||||||
|
label: (
|
||||||
|
<>
|
||||||
|
<label>{t("jobs.fields.date_exported")}: </label>
|
||||||
|
<DateTimeFormatter>{data.date_exported}</DateTimeFormatter>
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
]
|
||||||
|
: []),
|
||||||
|
]}
|
||||||
|
/>) : null}
|
||||||
|
</CardTemplate>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,94 +1,95 @@
|
|||||||
import { useQuery } from "@apollo/client";
|
import {useQuery} from "@apollo/client";
|
||||||
import { Col, Divider, Row, Skeleton, Space, Timeline, Typography } from "antd";
|
import {Col, Divider, Row, Skeleton, Space, Timeline, Typography} from "antd";
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import { useTranslation } from "react-i18next";
|
import {useTranslation} from "react-i18next";
|
||||||
import { Link } from "react-router-dom";
|
import {Link} from "react-router-dom";
|
||||||
import { GET_JOB_LINE_ORDERS } from "../../graphql/jobs.queries";
|
import {GET_JOB_LINE_ORDERS} from "../../graphql/jobs.queries";
|
||||||
import CurrencyFormatter from "../../utils/CurrencyFormatter";
|
import CurrencyFormatter from "../../utils/CurrencyFormatter";
|
||||||
import { DateFormatter } from "../../utils/DateFormatter";
|
import {DateFormatter} from "../../utils/DateFormatter";
|
||||||
import AlertComponent from "../alert/alert.component";
|
import AlertComponent from "../alert/alert.component";
|
||||||
|
|
||||||
export default function JobLinesExpander({ jobline, jobid }) {
|
export default function JobLinesExpander({jobline, jobid}) {
|
||||||
const { t } = useTranslation();
|
const {t} = useTranslation();
|
||||||
const { loading, error, data } = useQuery(GET_JOB_LINE_ORDERS, {
|
const {loading, error, data} = useQuery(GET_JOB_LINE_ORDERS, {
|
||||||
fetchPolicy: "network-only",
|
fetchPolicy: "network-only",
|
||||||
nextFetchPolicy: "network-only",
|
nextFetchPolicy: "network-only",
|
||||||
variables: {
|
variables: {
|
||||||
joblineid: jobline.id,
|
joblineid: jobline.id,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
if (loading) return <Skeleton />;
|
if (loading) return <Skeleton/>;
|
||||||
if (error) return <AlertComponent message={error.message} type="error" />;
|
if (error) return <AlertComponent message={error.message} type="error"/>;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Row>
|
<Row>
|
||||||
<Col md={24} lg={12}>
|
<Col md={24} lg={12}>
|
||||||
<Typography.Title level={4}>
|
<Typography.Title level={4}>
|
||||||
{t("parts_orders.labels.parts_orders")}
|
{t("parts_orders.labels.parts_orders")}
|
||||||
</Typography.Title>
|
</Typography.Title>
|
||||||
<Timeline>
|
<Timeline
|
||||||
{data.parts_order_lines.length > 0 ? (
|
items={
|
||||||
data.parts_order_lines.map((line) => (
|
data.parts_order_lines.length > 0
|
||||||
<Timeline.Item key={line.id}>
|
? data.parts_order_lines.map((line) => ({
|
||||||
<Space split={<Divider type="vertical" />} wrap>
|
key: line.id,
|
||||||
<Link
|
label: (
|
||||||
to={`/manage/jobs/${jobid}?partsorderid=${line.parts_order.id}`}
|
<Space split={<Divider type="vertical"/>} wrap>
|
||||||
>
|
<Link
|
||||||
{line.parts_order.order_number}
|
to={`/manage/jobs/${jobid}?partsorderid=${line.parts_order.id}`}
|
||||||
</Link>
|
>
|
||||||
<DateFormatter>{line.parts_order.order_date}</DateFormatter>
|
{line.parts_order.order_number}
|
||||||
{line.parts_order.vendor.name}
|
</Link>
|
||||||
</Space>
|
<DateFormatter>{line.parts_order.order_date}</DateFormatter>
|
||||||
</Timeline.Item>
|
{line.parts_order.vendor.name}
|
||||||
))
|
</Space>
|
||||||
) : (
|
),
|
||||||
<Timeline.Item>
|
}))
|
||||||
{t("parts_orders.labels.notyetordered")}
|
: [
|
||||||
</Timeline.Item>
|
{
|
||||||
)}
|
key: "no-orders",
|
||||||
</Timeline>
|
label: t("parts_orders.labels.notyetordered"),
|
||||||
</Col>
|
},
|
||||||
<Col md={24} lg={12}>
|
]
|
||||||
<Typography.Title level={4}>{t("bills.labels.bills")}</Typography.Title>
|
}
|
||||||
<Timeline>
|
/> </Col>
|
||||||
{data.billlines.length > 0 ? (
|
<Col md={24} lg={12}>
|
||||||
data.billlines.map((line) => (
|
<Typography.Title level={4}>{t("bills.labels.bills")}</Typography.Title>
|
||||||
<Timeline.Item key={line.id}>
|
<Timeline
|
||||||
<Row wrap>
|
items={
|
||||||
<Col span={4}>
|
data.billlines.length > 0
|
||||||
<Link
|
? data.billlines.map((line) => ({
|
||||||
to={`/manage/jobs/${jobid}?tab=partssublet&billid=${line.bill.id}`}
|
key: line.id,
|
||||||
>
|
label: (
|
||||||
{line.bill.invoice_number}
|
<Row wrap>
|
||||||
</Link>
|
<Col span={4}>
|
||||||
</Col>
|
<Link
|
||||||
<Col span={4}>
|
to={`/manage/jobs/${jobid}?tab=partssublet&billid=${line.bill.id}`}
|
||||||
<span>
|
>
|
||||||
{`${t("billlines.fields.actual_price")}: `}
|
{line.bill.invoice_number}
|
||||||
<CurrencyFormatter>{line.actual_price}</CurrencyFormatter>
|
</Link>
|
||||||
</span>
|
</Col>
|
||||||
</Col>
|
<Col span={4}>
|
||||||
<Col span={4}>
|
<span>{`${t("billlines.fields.actual_price")}: `}<CurrencyFormatter>{line.actual_price}</CurrencyFormatter></span>
|
||||||
<span>
|
</Col>
|
||||||
{`${t("billlines.fields.actual_cost")}: `}
|
<Col span={4}>
|
||||||
<CurrencyFormatter>{line.actual_cost}</CurrencyFormatter>
|
<span>{`${t("billlines.fields.actual_cost")}: `}<CurrencyFormatter>{line.actual_cost}</CurrencyFormatter></span>
|
||||||
</span>
|
</Col>
|
||||||
</Col>
|
<Col span={4}>
|
||||||
<Col span={4}>
|
<DateFormatter>{line.bill.date}</DateFormatter>
|
||||||
<DateFormatter>{line.bill.date}</DateFormatter>
|
</Col>
|
||||||
</Col>
|
<Col span={4}> {line.bill.vendor.name}</Col>
|
||||||
<Col span={4}> {line.bill.vendor.name}</Col>
|
</Row>
|
||||||
</Row>
|
),
|
||||||
</Timeline.Item>
|
}))
|
||||||
))
|
: [
|
||||||
) : (
|
{
|
||||||
<Timeline.Item>
|
key: "no-orders",
|
||||||
{t("parts_orders.labels.notyetordered")}
|
label: t("parts_orders.labels.notyetordered"),
|
||||||
</Timeline.Item>
|
},
|
||||||
)}
|
]
|
||||||
</Timeline>
|
}
|
||||||
</Col>
|
/>
|
||||||
</Row>
|
</Col>
|
||||||
);
|
</Row>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -13,12 +13,11 @@ import {
|
|||||||
Button,
|
Button,
|
||||||
Dropdown,
|
Dropdown,
|
||||||
Input,
|
Input,
|
||||||
Menu,
|
|
||||||
PageHeader,
|
|
||||||
Space,
|
Space,
|
||||||
Table,
|
Table,
|
||||||
Tag,
|
Tag,
|
||||||
} from "antd";
|
} from "antd";
|
||||||
|
import {PageHeader} from "@ant-design/pro-layout";
|
||||||
import axios from "axios";
|
import axios from "axios";
|
||||||
import React, { useState } from "react";
|
import React, { useState } from "react";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
@@ -43,7 +42,7 @@ import _ from "lodash";
|
|||||||
import JobCreateIOU from "../job-create-iou/job-create-iou.component";
|
import JobCreateIOU from "../job-create-iou/job-create-iou.component";
|
||||||
import JobLinesExpander from "./job-lines-expander.component";
|
import JobLinesExpander from "./job-lines-expander.component";
|
||||||
import { selectBodyshop } from "../../redux/user/user.selectors";
|
import { selectBodyshop } from "../../redux/user/user.selectors";
|
||||||
import moment from "moment";
|
import dayjs from "../../utils/day";
|
||||||
import JobLineConvertToLabor from "../job-line-convert-to-labor/job-line-convert-to-labor.component";
|
import JobLineConvertToLabor from "../job-line-convert-to-labor/job-line-convert-to-labor.component";
|
||||||
|
|
||||||
const mapStateToProps = createStructuredSelector({
|
const mapStateToProps = createStructuredSelector({
|
||||||
@@ -410,16 +409,17 @@ export function JobLinesComponent({
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const markMenu = (
|
const markMenu = {
|
||||||
<Menu onClick={handleMark}>
|
onClick: handleMark,
|
||||||
<Menu.Item key="PAA">{t("joblines.fields.part_types.PAA")}</Menu.Item>
|
items: [
|
||||||
<Menu.Item key="PAN">{t("joblines.fields.part_types.PAN")}</Menu.Item>
|
{ key: "PAA", label: t("joblines.fields.part_types.PAA") },
|
||||||
<Menu.Item key="PAL">{t("joblines.fields.part_types.PAL")}</Menu.Item>
|
{ key: "PAN", label: t("joblines.fields.part_types.PAN") },
|
||||||
<Menu.Item key="PAS">{t("joblines.fields.part_types.PAS")}</Menu.Item>
|
{ key: "PAL", label: t("joblines.fields.part_types.PAL") },
|
||||||
<Menu.Divider />
|
{ key: "PAS", label: t("joblines.fields.part_types.PAS") },
|
||||||
<Menu.Item key="clear">{t("general.labels.clear")}</Menu.Item>
|
{ type: 'divider' },
|
||||||
</Menu>
|
{ key: "clear", label: t("general.labels.clear") },
|
||||||
);
|
]
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
@@ -466,7 +466,7 @@ export function JobLinesComponent({
|
|||||||
vendorid: bodyshop.inhousevendorid,
|
vendorid: bodyshop.inhousevendorid,
|
||||||
invoice_number: "ih",
|
invoice_number: "ih",
|
||||||
isinhouse: true,
|
isinhouse: true,
|
||||||
date: new moment(),
|
date: new dayjs(),
|
||||||
total: 0,
|
total: 0,
|
||||||
billlines: selectedLines.map((p) => {
|
billlines: selectedLines.map((p) => {
|
||||||
return {
|
return {
|
||||||
@@ -549,7 +549,7 @@ export function JobLinesComponent({
|
|||||||
>
|
>
|
||||||
<FilterFilled /> {t("jobs.actions.filterpartsonly")}
|
<FilterFilled /> {t("jobs.actions.filterpartsonly")}
|
||||||
</Button>
|
</Button>
|
||||||
<Dropdown overlay={markMenu} trigger={["click"]}>
|
<Dropdown menu={markMenu} trigger={["click"]}>
|
||||||
<Button>{t("jobs.actions.mark")}</Button>
|
<Button>{t("jobs.actions.mark")}</Button>
|
||||||
</Dropdown>
|
</Dropdown>
|
||||||
<Button
|
<Button
|
||||||
|
|||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user