Merged in test-beta (pull request #1355)

[DO NOT MERGE] - 3/15/2024 - Beta Release

Approved-by: Allan Carr

.circleci/config.yml

@@ -6,7 +6,7 @@ orbs:
   aws-cli: circleci/aws-cli@4.0
   eb: circleci/aws-elastic-beanstalk@2.0.1
 jobs:
-  imex-api-deploy:
+  api-deploy:
     docker:
       - image: cimg/node:18.18.2
     steps:
@@ -19,9 +19,9 @@ jobs:
             eb deploy
             eb status
 
-  imex-hasura-migrate:
+  hasura-migrate:
     docker:
-      - image: cimg/node:18.18.2
+      - image: cimg/node:16.15.0
     parameters:
       secret:
         type: string
@@ -38,10 +38,10 @@ jobs:
             hasura metadata apply --endpoint https://db.imex.online/ --admin-secret << parameters.secret >>
             hasura metadata reload --endpoint https://db.imex.online/ --admin-secret << parameters.secret >>
 
-  imex-app-build:
+  app-build:
     docker:
-      - image: cimg/node:18.18.2
-
+      - image: cimg/node:16.15.0
+    resource_class: large
     working_directory: ~/repo/client
 
     steps:
@@ -51,54 +51,17 @@ jobs:
           name: Install Dependencies
           command: npm i
 
-      - run: npm run build:imex
-
-      - aws-cli/setup:
-          aws_access_key_id: AWS_ACCESS_KEY_ID
-          aws_secret_access_key: AWS_SECRET_ACCESS_KEY
-          region: AWS_REGION
+      - run: npm run build
 
       - aws-s3/sync:
           from: build
           to: "s3://imex-online-production/"
           arguments: "--exclude '*.map'"
 
-  rome-api-deploy:
-    docker:
-      - image: "cimg/base:stable"
-    steps:
-      - checkout
-      - eb/setup
-      - run:
-          command: |
-            eb init romeonline-productionapi -r us-east-2 -p "Node.js 18 running on 64bit Amazon Linux 2"
-            eb status --verbose
-            eb deploy
-            eb status
-
-  rome-hasura-migrate:
+  app-beta-build:
     docker:
       - image: cimg/node:18.18.2
-    parameters:
-      secret:
-        type: string
-        default: $HASURA_ROME_PROD_SECRET
-    working_directory: ~/repo/hasura
-    steps:
-      - checkout:
-          path: ~/repo
-      - run:
-          name: Execute migration
-          command: |
-            npm install hasura-cli -g
-            hasura migrate apply --endpoint https://db.romeonline.io/ --admin-secret << parameters.secret >>
-            hasura metadata apply --endpoint https://db.romeonline.io/ --admin-secret << parameters.secret >>
-            hasura metadata reload --endpoint https://db.romeonline.io/ --admin-secret << parameters.secret >>
-
-  rome-app-build:
-    docker:
-      - image: cimg/node:18.18.2
-
+    resource_class: large
     working_directory: ~/repo/client
 
     steps:
@@ -108,7 +71,7 @@ jobs:
           name: Install Dependencies
           command: npm i
 
-      - run: npm run build:rome
+      - run: npm run build
 
       - aws-cli/setup:
           aws_access_key_id: AWS_ACCESS_KEY_ID
@@ -117,49 +80,9 @@ jobs:
 
       - aws-s3/sync:
           from: build
-          to: "s3://rome-online-production/"
+          to: "s3://imex-online-beta/"
           arguments: "--exclude '*.map'"
 
-  test-rome-hasura-migrate:
-    docker:
-      - image: cimg/node:16.15.0
-    parameters:
-      secret:
-        type: string
-        default: $HASURA_ROME_TEST_SECRET
-    working_directory: ~/repo/hasura
-    steps:
-      - checkout:
-          path: ~/repo
-      - run:
-          name: Execute migration
-          command: |
-            npm install hasura-cli -g
-            hasura migrate apply --endpoint https://db.test.romeonline.io/ --admin-secret << parameters.secret >>
-            hasura metadata apply --endpoint https://db.test.romeonline.io/ --admin-secret << parameters.secret >>
-            hasura metadata reload --endpoint https://db.test.romeonline.io/ --admin-secret << parameters.secret >>
-
-  test-rome-app-build:
-    docker:
-      - image: cimg/node:18.18.2
-
-    working_directory: ~/repo/client
-
-    steps:
-      - checkout:
-          path: ~/repo
-      - run:
-          name: Install Dependencies
-          command: npm i
-
-      - run: npm run build:test:rome
-
-      - aws-s3/sync:
-          from: build
-          to: "s3://rome-online-test/"
-          arguments: "--exclude '*.map'"
-
-
   test-hasura-migrate:
     docker:
       - image: cimg/node:16.15.0
@@ -175,11 +98,12 @@ jobs:
           name: Execute migration
           command: |
             npm install hasura-cli -g
+            echo ${HASURA_TEST_SECRET}
             hasura migrate apply --endpoint https://db.test.bodyshop.app/ --admin-secret << parameters.secret >>
             hasura metadata apply --endpoint https://db.test.bodyshop.app/ --admin-secret << parameters.secret >>
             hasura metadata reload --endpoint https://db.test.bodyshop.app/ --admin-secret << parameters.secret >>
 
-  imex-test-app-build:
+  test-app-build:
     docker:
       - image: cimg/node:16.15.0
     resource_class: large
@@ -192,13 +116,40 @@ jobs:
           name: Install Dependencies
           command: npm i
 
-      - run: npm run build:test:imex
+      - run: npm run build:test
 
       - aws-s3/sync:
           from: build
           to: "s3://imex-online-test/"
           arguments: "--exclude '*.map'"
 
+  test-app-beta-build:
+    docker:
+      - image: cimg/node:18.18.2
+    resource_class: large
+    working_directory: ~/repo/client
+
+    steps:
+      - checkout:
+          path: ~/repo
+
+      - run:
+          name: Install Dependencies
+          command: npm i
+
+      - run: npm run build:test
+
+      - run: npm run sentry:sourcemaps
+
+      - aws-cli/setup:
+          aws_access_key_id: AWS_ACCESS_KEY_ID
+          aws_secret_access_key: AWS_SECRET_ACCESS_KEY
+          region: AWS_REGION
+
+      - aws-s3/sync:
+          from: build
+          to: "s3://imex-online-test-beta/"
+          arguments: "--exclude '*.map'"
 
   admin-app-build:
     docker:
@@ -233,51 +184,36 @@ jobs:
 workflows:
   deploy_and_build:
     jobs:
-      - imex-api-deploy:
+      - api-deploy:
           filters:
             branches:
               only: master
-      - imex-app-build:
+      - app-build:
           filters:
             branches:
               only: master
+      - app-beta-build:
+          filters:
+            branches:
+              only: master-beta
       - hasura-migrate:
           secret: ${HASURA_PROD_SECRET}
           filters:
             branches:
               only: master
-      - rome-api-deploy:
-          filters:
-            branches:
-              only: rome/master
-      - rome-app-build:
-          filters:
-            branches:
-              only: rome/master
-      - rome-hasura-migrate:
-          secret: ${HASURA_PROD_SECRET}
-          filters:
-            branches:
-              only: rome/master
-      - imex-test-app-build:
+      - test-app-build:
           filters:
             branches:
               only: test
-
+      - test-app-beta-build:
+          filters:
+            branches:
+              only: test-beta
       - test-hasura-migrate:
           secret: ${HASURA_TEST_SECRET}
           filters:
             branches:
               only: test
-      - test-rome-app-build:
-          filters:
-            branches:
-              only: rome/test
-      - test-rome-hasura-migrate:
-          secret: ${HASURA_ROME_TEST_SECRET}
-          filters:
-            branches:
-              only: rome/test
       #- admin-app-build:
       #filters:
       #branches:

.editorconfig

@@ -1,21 +0,0 @@
-root = true
-
-[*]
-charset = utf-8
-indent_style = space
-indent_size = 2
-end_of_line = lf
-insert_final_newline = true
-trim_trailing_whitespace = false
-quote_type = single
-max_line_length = 100
-bracketSpacing = false
-
-[*.md]
-trim_trailing_whitespace = false
-
-[*.yml]
-indent_size = 2
-
-[*.json]
-indent_size = 2

.gitignore

@@ -21,7 +21,6 @@ admin/coverage
 /build
 client/build
 admin/build
-client/dist
 # misc
 .DS_Store
 .env
@@ -120,4 +119,4 @@ logs/oAuthClient-log.log
 
 /*.env.*
 .idea/*
-.idea
+.idea

.prettierrc.js

@@ -2,15 +2,15 @@ exports.default = {
   printWidth: 120,
   useTabs: false,
   tabWidth: 2,
-  trailingComma: 'es5',
+  trailingComma: "es5",
   semi: true,
   singleQuote: false,
   bracketSpacing: true,
-  arrowParens: 'always',
+  arrowParens: "always",
   jsxSingleQuote: false,
   bracketSameLine: false,
-  endOfLine: 'lf',
-  importOrder: ['^@core/(.*)$', '^@server/(.*)$', '^@ui/(.*)$', '^[./]'],
+  endOfLine: "lf",
+  importOrder: ["^@core/(.*)$", "^@server/(.*)$", "^@ui/(.*)$", "^[./]"],
   importOrderSeparation: true,
   importOrderSortSpecifiers: true,
 };

_reference/BodyshopFeatures.json

@@ -1,14 +0,0 @@
-{
-  "mobile": "date",
-  "allAccess": "bool",
-  "timetickets": "date",
-  "payments": "date",
-  "partsorders": "date",
-  "bills": "Date",
-  "export": "date",
-  "csi": "Date",
-  "courtesycars": "date",
-  "media": "date",
-  "visualboard": "date",
-  "scoreboard": "date"
-}

_reference/TeamsSlackInvestigationFinalVersion.md

@@ -0,0 +1,316 @@
+## Microsoft Teams
+
+Integrating Microsoft Teams into your Node.js backend and React frontend application can enhance communication and workflow efficiency,
+especially in a body shop management context for the automotive industry. Microsoft Teams provides several ways to integrate its functionalities into your application, 
+including bots, tabs, messaging extensions, webhooks, and connectors. Here's an overview of the options and how to implement them:
+
+### 0.5 - Share to Teams (TM)
+
+- https://learn.microsoft.com/en-us/microsoftteams/platform/concepts/build-and-test/share-to-teams-from-web-apps
+- https://learn.microsoft.com/en-us/microsoftteams/platform/concepts/build-and-test/share-to-teams-from-personal-app-or-tab
+- https://learn.microsoft.com/en-us/microsoftteams/platform/concepts/device-capabilities/people-picker-capability
+- (Example of some Teams code Integrations) https://github.com/microsoft/teams-powerapps-app-templates/
+
+### 1. Microsoft Graph API
+The Microsoft Graph API is the gateway to data and intelligence in Microsoft 365, including Teams. It allows you to work with Teams data like channels, messages, and more. You can use it to post status changes back to Teams or read data from Teams to affect your site.
+
+Backend (Node.js): Use the @microsoft/microsoft-graph-client package to make API calls to Teams. You will need to handle authentication with Azure AD, which can be done using the @azure/identity package to get tokens for Graph API requests.
+
+*Implementation Steps*:
+
+Register your application in Azure AD to get the client_id and client_secret.
+
+(Is client_id and client_secret going to be something required for every customer or is it going to be a singleton)
+Implement OAuth 2.0 authorization flow to obtain access tokens.
+(This will need to be tracked by association to a bodyshop)
+
+bodyshop->Channels | People ->Messages
+
+Use the access token to make requests to the Microsoft Graph API to interact with Teams.
+
+### 2. Webhooks and Connectors
+Webhooks allow your application to send notifications to a Teams channel, which is useful for posting status changes. Connectors are a set of predefined webhooks that offer a more integrated experience.
+
+Setup:
+In Microsoft Teams, configure an incoming webhook for the channel you want to post messages to.
+Use the webhook URL to send JSON payloads from your Node.js backend, which can then be displayed in Teams.
+
+
+### 3. Bots
+Bots in Teams can interact with users to take commands or post information. You can use the Bot Framework along with the Teams activity handler to create bots that can communicate with your React frontend and Node.js backend.
+
+Backend (Node.js): Use the botbuilder package to create and manage your bot's interactions with Teams.
+
+*Implementation Steps*:
+
+Create a bot registration in Azure Bot Services.
+Implement the bot logic in your Node.js application using the Bot Framework SDK.
+Use the Microsoft Bot Framework's TeamsActivityHandler to respond to Teams-specific activities.
+
+### 4. Tabs
+Tabs in Teams allow you to integrate web-based content as part of Teams, which can be your React application or specific parts of it. This is particularly useful for creating a seamless experience within Teams.
+
+*Implementation Steps*:
+- Create a Teams app manifest that defines your tab and its configuration.
+- Host your React application or the specific parts you want to embed as a tab.
+- Use the Teams SDK in your React application to interact with Teams context and APIs.
+
+*Getting Started*:
+Microsoft Teams Toolkit for Visual Studio Code: This toolkit simplifies the process of setting up your Teams application, including authentication, configuration, and deployment.
+Documentation and Samples: Microsoft provides extensive documentation and sample code for developing Teams applications, which can be invaluable for getting started and solving specific challenges.
+Implementing these features requires a good understanding of both the Microsoft Teams platform and your application's architecture. 
+Start small, perhaps by implementing notifications via webhooks, and gradually add more complex integrations like bots or tabs based on your needs and user feedback.
+
+### Examples:
+
+##### Posting Messages to a Teams Channel Using Incoming Webhooks
+
+1 - Set up an Incoming Webhook in Microsoft Teams:
+- Go to the Teams channel where you want to post messages.
+- Click on the three dots (...) next to the channel name and select Connectors.
+- Search for Incoming Webhook, click Add, and then Configure.
+- Name your webhook, upload an image if desired, and click Create.
+- Copy the webhook URL provided.
+
+  (Patrick Note: The clients might have issues with setting up webhooks, it requires a lot of user configuration and our users are not technical).
+
+2 - Node.js Code to Post a Message:
+
+Ensure you have axios or any HTTP client library installed in your Node.js project. If not, you can install axios via npm: npm install axios.
+Use the following code snippet to post a message to the Teams channel:
+
+```javascript 
+const axios = require('axios');
+
+// Replace 'YOUR_WEBHOOK_URL' with your actual webhook URL
+const webhookUrl = 'YOUR_WEBHOOK_URL';
+
+const message = {
+  "@type": "MessageCard",
+  "@context": "http://schema.org/extensions",
+  "summary": "Issue 176715375",
+  "themeColor": "0078D7",
+  "title": "Issue opened: \"Push notifications not working\"",
+  "sections": [{
+    "activityTitle": "A new issue was created",
+    "activitySubtitle": "Today, 2:36 PM",
+    "activityImage": "https://example.com/issues/image.png",
+    "facts": [{
+        "name": "Repository:",
+        "value": "Repo name"
+      },
+      {
+        "name": "Issue #:",
+        "value": "176715375"
+      }
+    ],
+    "markdown": true
+  }]
+};
+
+axios.post(webhookUrl, message)
+  .then(response => console.log('Successfully sent message to Teams channel'))
+  .catch(error => console.error('Error sending message to Teams channel', error));
+```
+
+#### Creating a Simple Bot for Teams
+1 Prerequisites:
+- Register your bot with the Microsoft Bot Framework and get your bot's App ID and App Password.
+- Use the Bot Framework SDK for JavaScript.
+  2 Install Dependencies:
+- You need to install the botbuilder package. Run npm install botbuilder.
+
+The following example demonstrates a simple bot that echoes back received messages.
+
+```javascript
+const { BotFrameworkAdapter, MemoryStorage, ConversationState, TurnContext } = require('botbuilder');
+
+// Create adapter.
+// See https://aka.ms/about-bot-adapter to learn more about adapters.
+const adapter = new BotFrameworkAdapter({
+    appId: process.env.MicrosoftAppId,
+    appPassword: process.env.MicrosoftAppPassword
+});
+
+// Create conversation state with in-memory storage provider.
+const conversationState = new ConversationState(new MemoryStorage());
+adapter.use(conversationState);
+
+// Listen for incoming requests.
+server.post('/api/messages', (req, res) => {
+    adapter.processActivity(req, res, async (context) => {
+        // Echo back what the user said
+        if (context.activity.type === 'message') {
+            await context.sendActivity(`You said '${context.activity.text}'`);
+        }
+    });
+});
+```
+
+Running Your Bot:
+- Make sure to expose your bot endpoint (/api/messages in this case) to the internet using a service like ngrok.
+- Update your bot's messaging endpoint in the Microsoft Bot Framework portal to point to the ngrok URL.
+
+### Slash Commands (Bot)
+1 -  Create a Microsoft Teams App: You need to develop a Teams app that can interact with users through commands. This involves using the Microsoft Teams Developer Platform and possibly the Bot Framework.
+2 - Use Bots for Custom Commands: The primary way to introduce custom slash commands in Teams is through bots. Bots can respond to specific commands (or messages) that are input by users. When you create a bot for Teams, you can define custom commands that the bot will recognize and respond to.
+3 - Developing the Bot: You can develop a bot using the Microsoft Bot Framework. This allows your bot to receive and send messages to a Teams channel or chat. Within your bot's code, you can define what actions to take when it receives specific commands.
+4 - Register Your Bot with Microsoft Bot Framework: Register your bot with the Microsoft Bot Framework and configure it to work with Microsoft Teams. This step involves getting a Microsoft App ID and password that are necessary for your bot to communicate with the Teams platform.
+5 - Add Your Bot to Microsoft Teams: Once your bot is developed and registered, you can package your Teams app (which includes the bot) and upload it to Microsoft Teams. This will make your bot available to users within Teams, where they can interact with it using the custom commands you've defined.
+6 - Handling Slash Commands: In the context of your bot's code, you will need to interpret messages that start with a slash (/) as commands. You can then parse the command text and perform the appropriate actions or respond accordingly.
+7 - Publish Your App: For broader distribution, you can publish your Teams app to the Teams app store or distribute it within your organization through the Teams admin center.
+/ <command> <arb> ....
+(Unrelated to teams but then used in teams for functionality)
+- A Job has a todo list
+- a todo item may have an employee
+- a todo item may have a due date
+- a todo item may have a priority
+
+--- Call notes ----
+- Tasks (TODO List)
+- EMail reminders
+
+## Slack
+
+Integrating Slack into your Node.js backend and React frontend application can significantly streamline communication and operations for your automotive industry body shop management software. Slack offers various integration points including bots, apps, webhooks, and its rich API to facilitate interactions between your application and Slack workspace. Here's how you can leverage these integration points:
+
+### 1. **Slack Web API**
+
+The Slack Web API allows you to interact with Slack, enabling functionalities like sending messages, managing channels, and more directly from your application.
+
+- **Backend (Node.js)**: Utilize the `@slack/web-api` package to make API calls from your Node.js backend. This will be the backbone for actions such as posting status updates to Slack channels or handling commands from Slack that can affect your site.
+
+- **Implementation Steps**:
+    1. Create a Slack app in your Slack workspace and obtain the API tokens.
+    2. Use the `@slack/web-api` package to authenticate and interact with Slack API endpoints.
+    3. Implement features such as sending messages or processing events from Slack.
+
+### 2. **Incoming Webhooks**
+
+For simpler integrations focused on sending notifications to Slack channels, incoming webhooks are straightforward and effective. They allow you to send messages to a specific channel without a full-blown app.
+
+- **Setup**:
+    1. Create an incoming webhook from the Slack app configuration page.
+    2. Use the webhook URL to send messages from your Node.js backend by making simple HTTP POST requests with your message payload.
+
+### 3. **Bots**
+
+Slack bots can facilitate interactive experiences within your Slack workspace, responding to commands, posting notifications, or even pulling data from your site on demand.
+
+- **Backend (Node.js)**: Leverage the `@slack/bolt` framework, which simplifies creating Slack bots with event handling, messaging, and built-in OAuth support.
+
+- **Implementation Steps**:
+    1. Create a Slack app and enable bot features.
+    2. Use the `@slack/bolt` package to develop your bot, handling events like messages or commands.
+    3. Deploy your bot and set it to listen to incoming events from Slack.
+
+### 4. **Slack Block Kit**
+
+For more engaging and interactive messages, Slack's Block Kit provides a UI framework that allows you to create richly formatted messages, modals, and more.
+
+- **Frontend (React)** and **Backend (Node.js)**: Utilize Slack's Block Kit to design complex messages with buttons, sections, and interactive components. You can send these payloads through the Web API or from bots to enhance your app's interaction with users.
+
+### Getting Started
+
+- **Slack API Documentation and Tools**: Slack's API documentation is comprehensive and includes tutorials, tooling (like Block Kit Builder), and SDK documentation to help you get started.
+
+- **Testing and Development**: Slack provides a sandbox environment for you to test your app's integrations and interactions without affecting your live workspace.
+
+To integrate Slack into your application effectively, start by planning out the interactions you need (e.g., notifications, commands, information retrieval) and map these to the appropriate Slack features. Then, incrementally build and test each integration, utilizing Slack's development tools and your existing Node.js and React knowledge to create a seamless experience for your users.
+
+#### Examples
+
+1. Incoming Webhooks
+   Incoming Webhooks are a simple way to post messages from your Node.js application into Slack channels. They're perfect for notifying team members about status changes or updates.
+
+Setup:
+
+1 - Create a new Slack app in your workspace and enable incoming webhooks.
+2 - Add a new webhook to your app and choose the channel it will post to.
+3 - Use the webhook URL to send messages from your backend.
+
+Node.js Example:
+
+```javascript
+
+const axios = require('axios');
+const webhookUrl = 'YOUR_SLACK_WEBHOOK_URL';
+
+async function postMessageToSlack(message) {
+  await axios.post(webhookUrl, {
+    text: message, // Your message here
+  });
+}
+
+postMessageToSlack('New status update on the automotive project!').catch(console.error);
+```
+2. Bots
+   Slack bots can interact with users via messages, respond to commands, and even post updates. They're great for building interactive features.
+
+Setup:
+
+1 - Create a Slack app and add the Bot Token Scopes (like chat:write).
+2 - Install the app to your workspace to get your bot token.
+3 - Use the @slack/bolt framework for easy bot development in Node.js.
+
+Node.js Example:
+
+```javascript
+const { App } = require('@slack/bolt');
+
+const app = new App({
+  token: process.env.SLACK_BOT_TOKEN, // Set your bot's access token here
+  signingSecret: process.env.SLACK_SIGNING_SECRET // Set your app's signing secret here
+});
+
+app.message('hello', async ({ message, say }) => {
+  await say(`Hey there <@${message.user}>!`);
+});
+
+(async () => {
+  await app.start(process.env.PORT || 3000);
+  console.log('Slack bot is running!');
+})();
+```
+
+3. Slash Commands
+   Slash Commands allow users to interact with your application directly from Slack by typing commands that start with /.
+
+Setup:
+
+1 - Create a Slack app and configure a new Slash Command (e.g., /statusupdate).
+2 - Point the command request URL to your Node.js backend endpoint.
+3 - Implement the endpoint to handle the command and respond accordingly.
+
+Node.js Example:
+
+```javascript
+const express = require('express');
+const bodyParser = require('body-parser');
+
+const app = express();
+app.use(bodyParser.urlencoded({ extended: false }));
+
+app.post('/slack/commands/statusupdate', (req, res) => {
+  const { text, user_name } = req.body; // Command input and user info
+  // Logic to handle the command goes here. For example, update a status or fetch information.
+  res.send(`Status update received: ${text} - from ${user_name}`);
+});
+
+app.listen(process.env.PORT || 3000, () => console.log('Server is running'));
+```
+
+4. Interactive Components
+   Interactive components like buttons or menus can make your Slack messages more engaging and interactive.
+
+Setup:
+1 - Enable Interactivity in your Slack app settings.
+2 - Implement an endpoint in your Node.js backend to handle interactions.
+3 - Send messages with interactive components from your backend.
+
+Implementing these features into your Node.js and React application will enable a more dynamic and integrated experience for users of your body shop management software. Start with the simpler integrations like webhooks and progressively incorporate bots and interactive components as needed.
+
+ACTION ITEMS:
+- Slot in tasks, this will be a dependency for things we want to do in the future.
+- This would involve GUI components
+- This would involve a backend component

_reference/reportFiltersAndSorters.md

@@ -9,7 +9,7 @@ For filters and sorters, valid types include (`type` key in the schema):
 - bool or boolean
 - date
 
-# Special Notes
+## Special Notes
 - When passing the data to the template server, the property filters and sorters is added to the data object and will reflect the filters and sorters the user has selected
 
 ## High level Schema Overview
@@ -46,9 +46,10 @@ Filters effect the where clause of the graphQL query. They are used to filter th
 A note on special notation used in the `name` field.
 
 ## Reflection
+
 Filters can make use of reflection to pre-fill select boxes, the following is an example of that in the filters file.
 
-```
+```json
     {
       "name": "jobs.status",
       "translation": "jobs.fields.status",
@@ -58,7 +59,7 @@ Filters can make use of reflection to pre-fill select boxes, the following is an
         "type": "internal",
         "name": "special.job_statuses"
       }
-    },
+    }
 ```
 
 in this example, a reflector with the type 'internal' (all types at the moment require this, and it is used for future functionality), with a name of `special.job_statuses`
@@ -73,9 +74,13 @@ The following cases are available
 - `special.employees` - This will reflect the employees `bodyshop.employees`
 - `special.first_names` - This will reflect the first names `bodyshop.employees`
 - `special.last_names` - This will reflect the last names `bodyshop.employees`
-- `special.referral_sources` - This will reflect the referral sources `bodyshop.md_referral_sources
+- `special.referral_sources` - This will reflect the referral sources `bodyshop.md_referral_sources`
 - `special.class`- This will reflect the class `bodyshop.md_classes`
-- 
+- `special.lost_sale_reasons` - This will reflect the lost sale reasons `bodyshop.md_lost_sale_reasons`
+- `special.alt_transports` - This will reflect the alternative transports `bodyshop.appt_alt_transport`
+- `special.payment_types` - This will reflect the payment types `bodyshop.md_payment_types`
+- `special.payment_payers` - This is a special case with a key value set of [Customer, Insurance]
+
 ### Path without brackets, multi level
 
 `"name": "jobs.joblines.mod_lb_hrs",`
@@ -155,6 +160,7 @@ query gendoc_hours_sold_detail_open($starttz: timestamptz!, $endtz: timestamptz!
 - Do not add the ability to filter things that are already filtered as part of the original query, this would be
   redundant and could cause issues.
 - Do not add the ability to filter on things like FK constraints, must like the above example.
+- *INHERITANCE CAVEAT* If you have a filters file on a parent report that has a child that you do not want the filters inherited from, you must place a blank filters file (valid json so {}) on the child report level. This will than fetch the child filters, which are empty and move along, versus inheriting the parent filters.
 
 ## Sorters
 
@@ -165,6 +171,7 @@ query gendoc_hours_sold_detail_open($starttz: timestamptz!, $endtz: timestamptz!
   using the sorters.
 
 ### Default Sorters
+
 - A sorter can be given a default object containing a `order` and `direction` key value. This will be used to sort the report if the user does not select any of the sorters themselves.
 - The `order` key is the order in which the sorters are applied, and the `direction` key is the direction of the sort, either `asc` or `desc`.
 

client/.env.development

@@ -0,0 +1,13 @@
+REACT_APP_GRAPHQL_ENDPOINT=https://db.dev.bodyshop.app/v1/graphql
+REACT_APP_GRAPHQL_ENDPOINT_WS=wss://db.dev.bodyshop.app/v1/graphql
+REACT_APP_GA_CODE=231099835
+REACT_APP_FIREBASE_CONFIG={"apiKey":"AIzaSyDPLT8GiDHDR1R4nI66Qi0BY1aYviDPioc","authDomain":"imex-dev.firebaseapp.com","databaseURL":"https://imex-dev.firebaseio.com","projectId":"imex-dev","storageBucket":"imex-dev.appspot.com","messagingSenderId":"759548147434","appId":"1:759548147434:web:e8239868a48ceb36700993","measurementId":"G-K5XRBVVB4S"}
+REACT_APP_CLOUDINARY_ENDPOINT_API=https://api.cloudinary.com/v1_1/io-test
+REACT_APP_CLOUDINARY_ENDPOINT=https://res.cloudinary.com/io-test
+REACT_APP_CLOUDINARY_API_KEY=957865933348715
+REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS=c_fill,h_250,w_250
+REACT_APP_FIREBASE_PUBLIC_VAPID_KEY='BG3tzU7L2BXlGZ_3VLK4PNaRceoEXEnmHfxcVbRMF5o5g05ejslhVPki9kBM9cBBT-08Ad9kN3HSpS6JmrWD6h4'
+REACT_APP_STRIPE_PUBLIC_KEY=pk_test_51GqB4TJl3nQjrZ0wCQWAxAhlNF8jKe0tipIa6ExBaxwJGitwvFsIZUEua4dUzaMIAuXp4qwYHXx7lgjyQSwP0Pe900vzm38C7g
+REACT_APP_AXIOS_BASE_API_URL=http://localhost:4000
+REACT_APP_REPORTS_SERVER_URL=https://reports3.test.imex.online
+REACT_APP_SPLIT_API=ts615lqgnmk84thn72uk18uu5pgce6e0l4rc

client/.env.development.imex

@@ -1,14 +0,0 @@
-VITE_APP_GRAPHQL_ENDPOINT=https://db.dev.bodyshop.app/v1/graphql
-VITE_APP_GRAPHQL_ENDPOINT_WS=wss://db.dev.bodyshop.app/v1/graphql
-VITE_APP_GA_CODE=231099835
-VITE_APP_FIREBASE_CONFIG={"apiKey":"AIzaSyDPLT8GiDHDR1R4nI66Qi0BY1aYviDPioc","authDomain":"imex-dev.firebaseapp.com","databaseURL":"https://imex-dev.firebaseio.com","projectId":"imex-dev","storageBucket":"imex-dev.appspot.com","messagingSenderId":"759548147434","appId":"1:759548147434:web:e8239868a48ceb36700993","measurementId":"G-K5XRBVVB4S"}
-VITE_APP_CLOUDINARY_ENDPOINT_API=https://api.cloudinary.com/v1_1/io-test
-VITE_APP_CLOUDINARY_ENDPOINT=https://res.cloudinary.com/io-test
-VITE_APP_CLOUDINARY_API_KEY=957865933348715
-VITE_APP_CLOUDINARY_THUMB_TRANSFORMATIONS=c_fill,h_250,w_250
-VITE_APP_FIREBASE_PUBLIC_VAPID_KEY='BG3tzU7L2BXlGZ_3VLK4PNaRceoEXEnmHfxcVbRMF5o5g05ejslhVPki9kBM9cBBT-08Ad9kN3HSpS6JmrWD6h4'
-VITE_APP_STRIPE_PUBLIC_KEY=pk_test_51GqB4TJl3nQjrZ0wCQWAxAhlNF8jKe0tipIa6ExBaxwJGitwvFsIZUEua4dUzaMIAuXp4qwYHXx7lgjyQSwP0Pe900vzm38C7g
-VITE_APP_AXIOS_BASE_API_URL=http://localhost:4000
-VITE_APP_REPORTS_SERVER_URL=https://reports3.test.imex.online
-VITE_APP_SPLIT_API=ts615lqgnmk84thn72uk18uu5pgce6e0l4rc
-VITE_APP_INSTANCE=IMEX

client/.env.development.promanager

@@ -1,14 +0,0 @@
-VITE_APP_GRAPHQL_ENDPOINT=https://db.dev.bodyshop.app/v1/graphql
-VITE_APP_GRAPHQL_ENDPOINT_WS=wss://db.dev.bodyshop.app/v1/graphql
-VITE_APP_GA_CODE=231099835
-VITE_APP_FIREBASE_CONFIG={  "apiKey": "AIzaSyAuLQR9SV5LsVxjU8wh9hvFLdhcAHU6cxE",  "authDomain": "rome-prod-1.firebaseapp.com",  "projectId": "rome-prod-1",  "storageBucket": "rome-prod-1.appspot.com",  "messagingSenderId": "147786367145",  "appId": "1:147786367145:web:9d4cba68071c3f29a8a9b8",  "measurementId": "G-G8Z9DRHTZS"}
-VITE_APP_CLOUDINARY_ENDPOINT_API=https://api.cloudinary.com/v1_1/io-test
-VITE_APP_CLOUDINARY_ENDPOINT=https://res.cloudinary.com/io-test
-VITE_APP_CLOUDINARY_API_KEY=957865933348715
-VITE_APP_CLOUDINARY_THUMB_TRANSFORMATIONS=c_fill,h_250,w_250
-VITE_APP_FIREBASE_PUBLIC_VAPID_KEY='BG3tzU7L2BXlGZ_3VLK4PNaRceoEXEnmHfxcVbRMF5o5g05ejslhVPki9kBM9cBBT-08Ad9kN3HSpS6JmrWD6h4'
-VITE_APP_STRIPE_PUBLIC_KEY=pk_test_51GqB4TJl3nQjrZ0wCQWAxAhlNF8jKe0tipIa6ExBaxwJGitwvFsIZUEua4dUzaMIAuXp4qwYHXx7lgjyQSwP0Pe900vzm38C7g
-VITE_APP_AXIOS_BASE_API_URL=http://localhost:4000
-VITE_APP_REPORTS_SERVER_URL=https://reports3.test.imex.online
-VITE_APP_SPLIT_API=ts615lqgnmk84thn72uk18uu5pgce6e0l4rc
-VITE_APP_INSTANCE=PROMANAGER

client/.env.development.rome

@@ -1,15 +0,0 @@
-VITE_APP_GRAPHQL_ENDPOINT=https://db.dev.bodyshop.app/v1/graphql
-VITE_APP_GRAPHQL_ENDPOINT_WS=wss://db.dev.bodyshop.app/v1/graphql
-VITE_APP_GA_CODE=231099835
-VITE_APP_FIREBASE_CONFIG={  "apiKey": "AIzaSyAuLQR9SV5LsVxjU8wh9hvFLdhcAHU6cxE",  "authDomain": "rome-prod-1.firebaseapp.com",  "projectId": "rome-prod-1",  "storageBucket": "rome-prod-1.appspot.com",  "messagingSenderId": "147786367145",  "appId": "1:147786367145:web:9d4cba68071c3f29a8a9b8",  "measurementId": "G-G8Z9DRHTZS"}
-VITE_APP_CLOUDINARY_ENDPOINT_API=https://api.cloudinary.com/v1_1/io-test
-VITE_APP_CLOUDINARY_ENDPOINT=https://res.cloudinary.com/io-test
-VITE_APP_CLOUDINARY_API_KEY=957865933348715
-VITE_APP_CLOUDINARY_THUMB_TRANSFORMATIONS=c_fill,h_250,w_250
-VITE_APP_FIREBASE_PUBLIC_VAPID_KEY='BP1B7ZTYpn-KMt6nOxlld6aS8Skt3Q7ZLEqP0hAvGHxG4UojPYiXZ6kPlzZkUC5jH-EcWXomTLtmadAIxurfcHo'
-VITE_APP_STRIPE_PUBLIC_KEY=pk_test_51GqB4TJl3nQjrZ0wCQWAxAhlNF8jKe0tipIa6ExBaxwJGitwvFsIZUEua4dUzaMIAuXp4qwYHXx7lgjyQSwP0Pe900vzm38C7g
-VITE_APP_AXIOS_BASE_API_URL=http://localhost:4000
-VITE_APP_REPORTS_SERVER_URL=https://reports3.test.imex.online
-VITE_APP_SPLIT_API=ts615lqgnmk84thn72uk18uu5pgce6e0l4rc
-VITE_APP_COUNTRY=USA
-VITE_APP_INSTANCE=ROME

client/.env.production

@@ -0,0 +1,14 @@
+GENERATE_SOURCEMAP=true
+REACT_APP_GRAPHQL_ENDPOINT=https://db.imex.online/v1/graphql
+REACT_APP_GRAPHQL_ENDPOINT_WS=wss://db.imex.online/v1/graphql
+REACT_APP_GA_CODE=231103507
+REACT_APP_FIREBASE_CONFIG={"apiKey":"AIzaSyDSezy-jGJreo7ulgpLdlpOwAOrgcaEkhU","authDomain":"imex-prod.firebaseapp.com","databaseURL":"https://imex-prod.firebaseio.com","projectId":"imex-prod","storageBucket":"imex-prod.appspot.com","messagingSenderId":"253497221485","appId":"1:253497221485:web:3c81c483b94db84b227a64","measurementId":"G-NTWBKG2L0M"}
+REACT_APP_CLOUDINARY_ENDPOINT_API=https://api.cloudinary.com/v1_1/bodyshop
+REACT_APP_CLOUDINARY_ENDPOINT=https://res.cloudinary.com/bodyshop
+REACT_APP_CLOUDINARY_API_KEY=473322739956866
+REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS=c_fill,h_250,w_250
+REACT_APP_FIREBASE_PUBLIC_VAPID_KEY='BMgZT1NZztW2DsJl8Mg2L04hgY9FzAg6b8fbzgNAfww2VDzH3VE63Ot9EaP_U7KWS2JT-7HPHaw0T_Tw_5vkZc8'
+REACT_APP_STRIPE_PUBLIC_KEY=pk_test_51GqB4TJl3nQjrZ0wCQWAxAhlNF8jKe0tipIa6ExBaxwJGitwvFsIZUEua4dUzaMIAuXp4qwYHXx7lgjyQSwP0Pe900vzm38C7g
+REACT_APP_AXIOS_BASE_API_URL=https://api.imex.online/
+REACT_APP_REPORTS_SERVER_URL=https://reports.imex.online
+REACT_APP_SPLIT_API=et9pjkik6bn67he5evpmpr1agoo7gactphgk

client/.env.production.imex

@@ -1,15 +0,0 @@
-GENERATE_SOURCEMAP=true
-VITE_APP_GRAPHQL_ENDPOINT=https://db.imex.online/v1/graphql
-VITE_APP_GRAPHQL_ENDPOINT_WS=wss://db.imex.online/v1/graphql
-VITE_APP_GA_CODE=231103507
-VITE_APP_FIREBASE_CONFIG={"apiKey":"AIzaSyDSezy-jGJreo7ulgpLdlpOwAOrgcaEkhU","authDomain":"imex-prod.firebaseapp.com","databaseURL":"https://imex-prod.firebaseio.com","projectId":"imex-prod","storageBucket":"imex-prod.appspot.com","messagingSenderId":"253497221485","appId":"1:253497221485:web:3c81c483b94db84b227a64","measurementId":"G-NTWBKG2L0M"}
-VITE_APP_CLOUDINARY_ENDPOINT_API=https://api.cloudinary.com/v1_1/bodyshop
-VITE_APP_CLOUDINARY_ENDPOINT=https://res.cloudinary.com/bodyshop
-VITE_APP_CLOUDINARY_API_KEY=473322739956866
-VITE_APP_CLOUDINARY_THUMB_TRANSFORMATIONS=c_fill,h_250,w_250
-VITE_APP_FIREBASE_PUBLIC_VAPID_KEY='BMgZT1NZztW2DsJl8Mg2L04hgY9FzAg6b8fbzgNAfww2VDzH3VE63Ot9EaP_U7KWS2JT-7HPHaw0T_Tw_5vkZc8'
-VITE_APP_STRIPE_PUBLIC_KEY=pk_test_51GqB4TJl3nQjrZ0wCQWAxAhlNF8jKe0tipIa6ExBaxwJGitwvFsIZUEua4dUzaMIAuXp4qwYHXx7lgjyQSwP0Pe900vzm38C7g
-VITE_APP_AXIOS_BASE_API_URL=https://api.imex.online/
-VITE_APP_REPORTS_SERVER_URL=https://reports.imex.online
-VITE_APP_SPLIT_API=et9pjkik6bn67he5evpmpr1agoo7gactphgk
-VITE_APP_INSTANCE=IMEX

client/.env.production.promanager

@@ -1,15 +0,0 @@
-GENERATE_SOURCEMAP=true
-VITE_APP_GRAPHQL_ENDPOINT=https://db.romeonline.io/v1/graphql
-VITE_APP_GRAPHQL_ENDPOINT_WS=wss://db.romeonline.io/v1/graphql
-VITE_APP_GA_CODE=231103507
-VITE_APP_FIREBASE_CONFIG={  "apiKey": "AIzaSyAuLQR9SV5LsVxjU8wh9hvFLdhcAHU6cxE",  "authDomain": "rome-prod-1.firebaseapp.com",  "projectId": "rome-prod-1",  "storageBucket": "rome-prod-1.appspot.com",  "messagingSenderId": "147786367145",  "appId": "1:147786367145:web:9d4cba68071c3f29a8a9b8",  "measurementId": "G-G8Z9DRHTZS"}
-VITE_APP_CLOUDINARY_ENDPOINT_API=https://api.cloudinary.com/v1_1/bodyshop
-VITE_APP_CLOUDINARY_ENDPOINT=https://res.cloudinary.com/bodyshop
-VITE_APP_CLOUDINARY_API_KEY=473322739956866
-VITE_APP_CLOUDINARY_THUMB_TRANSFORMATIONS=c_fill,h_250,w_250
-VITE_APP_FIREBASE_PUBLIC_VAPID_KEY='BMgZT1NZztW2DsJl8Mg2L04hgY9FzAg6b8fbzgNAfww2VDzH3VE63Ot9EaP_U7KWS2JT-7HPHaw0T_Tw_5vkZc8'
-VITE_APP_STRIPE_PUBLIC_KEY=pk_test_51GqB4TJl3nQjrZ0wCQWAxAhlNF8jKe0tipIa6ExBaxwJGitwvFsIZUEua4dUzaMIAuXp4qwYHXx7lgjyQSwP0Pe900vzm38C7g
-VITE_APP_AXIOS_BASE_API_URL=https://api.romeonline.io/
-VITE_APP_REPORTS_SERVER_URL=https://reports.romeonline.io
-VITE_APP_SPLIT_API=et9pjkik6bn67he5evpmpr1agoo7gactphgk
-VITE_APP_INSTANCE=PROMANAGER

client/.env.production.rome

@@ -1,15 +0,0 @@
-GENERATE_SOURCEMAP=true
-VITE_APP_GRAPHQL_ENDPOINT=https://db.romeonline.io/v1/graphql
-VITE_APP_GRAPHQL_ENDPOINT_WS=wss://db.romeonline.io/v1/graphql
-VITE_APP_GA_CODE=231103507
-VITE_APP_FIREBASE_CONFIG={  "apiKey": "AIzaSyAuLQR9SV5LsVxjU8wh9hvFLdhcAHU6cxE",  "authDomain": "rome-prod-1.firebaseapp.com",  "projectId": "rome-prod-1",  "storageBucket": "rome-prod-1.appspot.com",  "messagingSenderId": "147786367145",  "appId": "1:147786367145:web:9d4cba68071c3f29a8a9b8",  "measurementId": "G-G8Z9DRHTZS"}
-VITE_APP_CLOUDINARY_ENDPOINT_API=https://api.cloudinary.com/v1_1/bodyshop
-VITE_APP_CLOUDINARY_ENDPOINT=https://res.cloudinary.com/bodyshop
-VITE_APP_CLOUDINARY_API_KEY=473322739956866
-VITE_APP_CLOUDINARY_THUMB_TRANSFORMATIONS=c_fill,h_250,w_250
-VITE_APP_FIREBASE_PUBLIC_VAPID_KEY='BP1B7ZTYpn-KMt6nOxlld6aS8Skt3Q7ZLEqP0hAvGHxG4UojPYiXZ6kPlzZkUC5jH-EcWXomTLtmadAIxurfcHo'
-VITE_APP_STRIPE_PUBLIC_KEY=pk_test_51GqB4TJl3nQjrZ0wCQWAxAhlNF8jKe0tipIa6ExBaxwJGitwvFsIZUEua4dUzaMIAuXp4qwYHXx7lgjyQSwP0Pe900vzm38C7g
-VITE_APP_AXIOS_BASE_API_URL=https://api.romeonline.io/
-VITE_APP_REPORTS_SERVER_URL=https://reports.romeonline.io
-VITE_APP_SPLIT_API=et9pjkik6bn67he5evpmpr1agoo7gactphgk
-VITE_APP_INSTANCE=ROME

client/.env.test

@@ -0,0 +1,14 @@
+REACT_APP_GRAPHQL_ENDPOINT=https://db.test.bodyshop.app/v1/graphql
+REACT_APP_GRAPHQL_ENDPOINT_WS=wss://db.test.bodyshop.app/v1/graphql
+REACT_APP_GA_CODE=231099835
+REACT_APP_FIREBASE_CONFIG={   "apiKey":"AIzaSyBw7_GTy7GtQyfkIRPVrWHEGKfcqeyXw0c",   "authDomain":"imex-test.firebaseapp.com",   "projectId":"imex-test",   "storageBucket":"imex-test.appspot.com",   "messagingSenderId":"991923618608",   "appId":"1:991923618608:web:633437569cdad78299bef5",   "measurementId":"G-TW0XLZEH18"}
+REACT_APP_CLOUDINARY_ENDPOINT_API=https://api.cloudinary.com/v1_1/bodyshop
+REACT_APP_CLOUDINARY_ENDPOINT=https://res.cloudinary.com/bodyshop
+REACT_APP_CLOUDINARY_API_KEY=473322739956866
+REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS=c_fill,h_250,w_250
+REACT_APP_FIREBASE_PUBLIC_VAPID_KEY='BN2GcDPjipR5MTEosO5dT4CfQ3cmrdBIsI4juoOQrRijn_5aRiHlwj1mlq0W145mOusx6xynEKl_tvYJhpCc9lo'
+REACT_APP_STRIPE_PUBLIC_KEY=pk_test_51GqB4TJl3nQjrZ0wCQWAxAhlNF8jKe0tipIa6ExBaxwJGitwvFsIZUEua4dUzaMIAuXp4qwYHXx7lgjyQSwP0Pe900vzm38C7g
+REACT_APP_AXIOS_BASE_API_URL=https://api.test.imex.online/
+REACT_APP_REPORTS_SERVER_URL=https://reports3.test.imex.online
+REACT_APP_IS_TEST=true
+REACT_APP_SPLIT_API=ts615lqgnmk84thn72uk18uu5pgce6e0l4rc

client/.env.test.imex

@@ -1,15 +0,0 @@
-VITE_APP_GRAPHQL_ENDPOINT=https://db.test.bodyshop.app/v1/graphql
-VITE_APP_GRAPHQL_ENDPOINT_WS=wss://db.test.bodyshop.app/v1/graphql
-VITE_APP_GA_CODE=231099835
-VITE_APP_FIREBASE_CONFIG={   "apiKey":"AIzaSyBw7_GTy7GtQyfkIRPVrWHEGKfcqeyXw0c",   "authDomain":"imex-test.firebaseapp.com",   "projectId":"imex-test",   "storageBucket":"imex-test.appspot.com",   "messagingSenderId":"991923618608",   "appId":"1:991923618608:web:633437569cdad78299bef5",   "measurementId":"G-TW0XLZEH18"}
-VITE_APP_CLOUDINARY_ENDPOINT_API=https://api.cloudinary.com/v1_1/bodyshop
-VITE_APP_CLOUDINARY_ENDPOINT=https://res.cloudinary.com/bodyshop
-VITE_APP_CLOUDINARY_API_KEY=473322739956866
-VITE_APP_CLOUDINARY_THUMB_TRANSFORMATIONS=c_fill,h_250,w_250
-VITE_APP_FIREBASE_PUBLIC_VAPID_KEY='BN2GcDPjipR5MTEosO5dT4CfQ3cmrdBIsI4juoOQrRijn_5aRiHlwj1mlq0W145mOusx6xynEKl_tvYJhpCc9lo'
-VITE_APP_STRIPE_PUBLIC_KEY=pk_test_51GqB4TJl3nQjrZ0wCQWAxAhlNF8jKe0tipIa6ExBaxwJGitwvFsIZUEua4dUzaMIAuXp4qwYHXx7lgjyQSwP0Pe900vzm38C7g
-VITE_APP_AXIOS_BASE_API_URL=https://api.test.imex.online/
-VITE_APP_REPORTS_SERVER_URL=https://reports3.test.imex.online
-VITE_APP_IS_TEST=true
-VITE_APP_SPLIT_API=ts615lqgnmk84thn72uk18uu5pgce6e0l4rc
-VITE_APP_INSTANCE=IMEX

client/.env.test.promanager

@@ -1,15 +0,0 @@
-VITE_APP_GRAPHQL_ENDPOINT=https://db.test.romeonline.io/v1/graphql
-VITE_APP_GRAPHQL_ENDPOINT_WS=wss://db.test.romeonline.io/v1/graphql
-VITE_APP_GA_CODE=231099835
-VITE_APP_FIREBASE_CONFIG={  "apiKey": "AIzaSyAuLQR9SV5LsVxjU8wh9hvFLdhcAHU6cxE",  "authDomain": "rome-prod-1.firebaseapp.com",  "projectId": "rome-prod-1",  "storageBucket": "rome-prod-1.appspot.com",  "messagingSenderId": "147786367145",  "appId": "1:147786367145:web:9d4cba68071c3f29a8a9b8",  "measurementId": "G-G8Z9DRHTZS"}
-VITE_APP_CLOUDINARY_ENDPOINT_API=https://api.cloudinary.com/v1_1/bodyshop
-VITE_APP_CLOUDINARY_ENDPOINT=https://res.cloudinary.com/bodyshop
-VITE_APP_CLOUDINARY_API_KEY=473322739956866
-VITE_APP_CLOUDINARY_THUMB_TRANSFORMATIONS=c_fill,h_250,w_250
-VITE_APP_FIREBASE_PUBLIC_VAPID_KEY='BN2GcDPjipR5MTEosO5dT4CfQ3cmrdBIsI4juoOQrRijn_5aRiHlwj1mlq0W145mOusx6xynEKl_tvYJhpCc9lo'
-VITE_APP_STRIPE_PUBLIC_KEY=pk_test_51GqB4TJl3nQjrZ0wCQWAxAhlNF8jKe0tipIa6ExBaxwJGitwvFsIZUEua4dUzaMIAuXp4qwYHXx7lgjyQSwP0Pe900vzm38C7g
-VITE_APP_AXIOS_BASE_API_URL=https://api.test.romeonline.io/
-VITE_APP_REPORTS_SERVER_URL=https://reports.test.romeonline.io
-VITE_APP_IS_TEST=true
-VITE_APP_SPLIT_API=ts615lqgnmk84thn72uk18uu5pgce6e0l4rc
-VITE_APP_INSTANCE=PROMANAGER

client/.env.test.rome

@@ -1,15 +0,0 @@
-VITE_APP_GRAPHQL_ENDPOINT=https://db.test.romeonline.io/v1/graphql
-VITE_APP_GRAPHQL_ENDPOINT_WS=wss://db.test.romeonline.io/v1/graphql
-VITE_APP_GA_CODE=231103507
-VITE_APP_FIREBASE_CONFIG={  "apiKey": "AIzaSyAuLQR9SV5LsVxjU8wh9hvFLdhcAHU6cxE",  "authDomain": "rome-prod-1.firebaseapp.com",  "projectId": "rome-prod-1",  "storageBucket": "rome-prod-1.appspot.com",  "messagingSenderId": "147786367145",  "appId": "1:147786367145:web:9d4cba68071c3f29a8a9b8",  "measurementId": "G-G8Z9DRHTZS"}
-VITE_APP_CLOUDINARY_ENDPOINT_API=https://api.cloudinary.com/v1_1/bodyshop
-VITE_APP_CLOUDINARY_ENDPOINT=https://res.cloudinary.com/bodyshop
-VITE_APP_CLOUDINARY_API_KEY=473322739956866
-VITE_APP_CLOUDINARY_THUMB_TRANSFORMATIONS=c_fill,h_250,w_250
-VITE_APP_FIREBASE_PUBLIC_VAPID_KEY='BP1B7ZTYpn-KMt6nOxlld6aS8Skt3Q7ZLEqP0hAvGHxG4UojPYiXZ6kPlzZkUC5jH-EcWXomTLtmadAIxurfcHo'
-VITE_APP_STRIPE_PUBLIC_KEY=pk_test_51GqB4TJl3nQjrZ0wCQWAxAhlNF8jKe0tipIa6ExBaxwJGitwvFsIZUEua4dUzaMIAuXp4qwYHXx7lgjyQSwP0Pe900vzm38C7g
-VITE_APP_AXIOS_BASE_API_URL=https://api.test.romeonline.io/
-VITE_APP_REPORTS_SERVER_URL=https://reports.test.romeonline.io
-VITE_APP_IS_TEST=true
-VITE_APP_SPLIT_API=ts615lqgnmk84thn72uk18uu5pgce6e0l4rc
-VITE_APP_INSTANCE=ROME

client/craco.config.js

@@ -13,7 +13,21 @@ const v4Token = convertLegacyToken(mapToken);
 
 module.exports = {
     plugins: [
-
+        // {
+        //     plugin: SentryWebpackPlugin,
+        //     options: {
+        //         // sentry-cli configuration
+        //         authToken:
+        //             "6b45b028a02342db97a9a2f92c0959058665443d379d4a3a876430009e744260",
+        //         org: "snapt-software",
+        //         project: "imexonline",
+        //         release: process.env.REACT_APP_GIT_SHA,
+        //
+        //         // webpack-specific configuration
+        //         include: ".",
+        //         ignore: ["node_modules", "webpack.config.js"],
+        //     },
+        // },
         {
             plugin: CracoLessPlugin,
             options: {

client/dev-dist/registerSW.js

@@ -1 +0,0 @@
-if('serviceWorker' in navigator) navigator.serviceWorker.register('/dev-sw.js?dev-sw', { scope: '/', type: 'classic' })

client/dev-dist/sw.js

@@ -1,92 +0,0 @@
-/**
- * Copyright 2018 Google Inc. All Rights Reserved.
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *     http://www.apache.org/licenses/LICENSE-2.0
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-// If the loader is already loaded, just stop.
-if (!self.define) {
-  let registry = {};
-
-  // Used for `eval` and `importScripts` where we can't get script URL by other means.
-  // In both cases, it's safe to use a global var because those functions are synchronous.
-  let nextDefineUri;
-
-  const singleRequire = (uri, parentUri) => {
-    uri = new URL(uri + ".js", parentUri).href;
-    return registry[uri] || (
-      
-        new Promise(resolve => {
-          if ("document" in self) {
-            const script = document.createElement("script");
-            script.src = uri;
-            script.onload = resolve;
-            document.head.appendChild(script);
-          } else {
-            nextDefineUri = uri;
-            importScripts(uri);
-            resolve();
-          }
-        })
-      
-      .then(() => {
-        let promise = registry[uri];
-        if (!promise) {
-          throw new Error(`Module ${uri} didn’t register its module`);
-        }
-        return promise;
-      })
-    );
-  };
-
-  self.define = (depsNames, factory) => {
-    const uri = nextDefineUri || ("document" in self ? document.currentScript.src : "") || location.href;
-    if (registry[uri]) {
-      // Module is already loading or loaded.
-      return;
-    }
-    let exports = {};
-    const require = depUri => singleRequire(depUri, uri);
-    const specialDeps = {
-      module: { uri },
-      exports,
-      require
-    };
-    registry[uri] = Promise.all(depsNames.map(
-      depName => specialDeps[depName] || require(depName)
-    )).then(deps => {
-      factory(...deps);
-      return exports;
-    });
-  };
-}
-define(['./workbox-b5f7729d'], (function (workbox) { 'use strict';
-
-  self.skipWaiting();
-  workbox.clientsClaim();
-
-  /**
-   * The precacheAndRoute() method efficiently caches and responds to
-   * requests for URLs in the manifest.
-   * See https://goo.gl/S9QRab
-   */
-  workbox.precacheAndRoute([{
-    "url": "registerSW.js",
-    "revision": "3ca0b8505b4bec776b69afdba2768812"
-  }, {
-    "url": "index.html",
-    "revision": "0.sa702m4aq68"
-  }], {});
-  workbox.cleanupOutdatedCaches();
-  workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {
-    allowlist: [/^\/$/]
-  }));
-
-}));

client/index.html

@@ -1,174 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <% if (env.VITE_APP_INSTANCE === 'IMEX') { %>
-    <link rel="icon" href="/favicon.png" />
-    <% } %> <% if (env.VITE_APP_INSTANCE === 'ROME') { %>
-    <link rel="icon" href="/ro-favicon.png" />
-    <% } %> <% if (env.VITE_APP_INSTANCE === 'PROMANAGER') { %>
-    <link rel="icon" href="/pm/pm-favicon.ico" />
-    <% } %>
-
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#1690ff" />
-    <!-- <link rel="apple-touch-icon" href="logo192.png" /> -->
-    <!-- TODO:AIo Update the individual logos for each.-->
-    <link rel="apple-touch-icon" href="public/logo192.png" />
-    <link rel="mask-icon" href="/mask-icon.svg" color="#FFFFFF">
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <% if (env.VITE_APP_INSTANCE === 'IMEX') { %>
-    <meta name="description" content="ImEX Online" />
-    <title>ImEX Online</title>
-    <script type="text/javascript">
-      window.$crisp = [];
-      window.CRISP_WEBSITE_ID = '36724f62-2eb0-4b29-9cdd-9905fb99913e';
-      (function () {
-        d = document;
-        s = d.createElement('script');
-        s.src = 'https://client.crisp.chat/l.js';
-        s.async = 1;
-        d.getElementsByTagName('head')[0].appendChild(s);
-      })();
-    </script>
-    <% } %> <% if (env.VITE_APP_INSTANCE === 'ROME') { %>
-    <meta name="description" content="Rome Online" />
-    <title>Rome Online</title>
-
-    <!--Use the below code snippet to provide real time updates to the live chat plugin without the need of copying and paste each time to your website when changes are made via PBX-->
-
-    <call-us-selector phonesystem-url=https://rometech.east.3cx.us:5001 party="LiveChat528346"></call-us-selector>
-
-    <!--Incase you don't want real time updates to the live chat plugin when options are changed, use the below code snippet. Please note that each time you change the settings you will need to copy and paste the snippet code to your website-->
-    
-    <!--<call-us
-    
-    phonesystem-url=https://rometech.east.3cx.us:5001
-    
-    style="position:fixed;font-size:16px;line-height:17px;z-index: 99999;right: 20px; bottom: 20px;"
-    
-    id="wp-live-chat-by-3CX"
-    
-    minimized="true"
-    
-    animation-style="noanimation"
-    
-    party="LiveChat528346"
-    
-    minimized-style="bubbleright"
-    
-    allow-call="true"
-    
-    allow-video="false"
-    
-    allow-soundnotifications="true"
-    
-    enable-mute="true"
-    
-    enable-onmobile="true"
-    
-    offline-enabled="true"
-    
-    enable="true"
-    
-    ignore-queueownership="false"
-    
-    authentication="both"
-    
-    show-operator-actual-name="true"
-    
-    aknowledge-received="true"
-    
-    gdpr-enabled="false"
-    
-    message-userinfo-format="name"
-    
-    message-dateformat="both"
-    
-    lang="browser"
-    
-    button-icon-type="default"
-    
-    greeting-visibility="none"
-    
-    greeting-offline-visibility="none"
-    
-    chat-delay="2000"
-    
-    enable-direct-call="true"
-    
-    enable-ga="false"
-    
-    ></call-us>-->
-    
-    <script defer src=https://downloads-global.3cx.com/downloads/livechatandtalk/v1/callus.js id="tcx-callus-js" charset="utf-8"></script>
-
-
-
-    <% } %> <% if (env.VITE_APP_INSTANCE === 'PROMANAGER') { %>
-    <title>ProManager</title>
-    <meta name="description" content="ProManager" />
-
-    <% } %>
-    <script>
-      !(function () {
-        'use strict';
-        var e = [
-          'debug',
-          'destroy',
-          'do',
-          'help',
-          'identify',
-          'is',
-          'off',
-          'on',
-          'ready',
-          'render',
-          'reset',
-          'safe',
-          'set',
-        ];
-        if (window.noticeable) console.warn('Noticeable SDK code snippet loaded more than once');
-        else {
-          var n = (window.noticeable = window.noticeable || []);
-          function t(e) {
-            return function () {
-              var t = Array.prototype.slice.call(arguments);
-              return t.unshift(e), n.push(t), n;
-            };
-          }
-          !(function () {
-            for (var o = 0; o < e.length; o++) {
-              var r = e[o];
-              n[r] = t(r);
-            }
-          })(),
-            (function () {
-              var e = document.createElement('script');
-              (e.async = !0), (e.src = 'https://sdk.noticeable.io/l.js');
-              var n = document.head;
-              n.insertBefore(e, n.firstChild);
-            })();
-        }
-      })();
-    </script>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-
-    <script type="module" src="src/index.jsx"></script>
-  </body>
-</html>

client/package.json

@@ -1,10 +1,6 @@
 {
   "name": "bodyshop",
   "version": "0.2.1",
-  "engines": {
-    "node": "18.18.2"
-  },
-  "type": "module",
   "private": true,
   "proxy": "http://localhost:4000",
   "dependencies": {
@@ -17,28 +13,23 @@
     "@jsreport/browser-client": "^3.1.0",
     "@reduxjs/toolkit": "^2.2.1",
     "@sentry/cli": "^2.28.6",
-    "@sentry/react": "^7.102.1",
-    "@sentry/tracing": "^7.102.1",
+    "@sentry/react": "^7.104.0",
+    "@sentry/tracing": "^7.104.0",
     "@splitsoftware/splitio-react": "^1.11.0",
     "@tanem/react-nprogress": "^5.0.51",
-    "@vitejs/plugin-legacy": "^5.3.0",
-    "@vitejs/plugin-react": "^4.2.1",
-    "@vitejs/plugin-react-refresh": "^1.3.6",
-    "@vitejs/plugin-react-swc": "^3.6.0",
     "antd": "^5.14.2",
     "apollo-link-logger": "^2.0.1",
     "apollo-link-sentry": "^3.3.0",
     "axios": "^1.6.7",
-    "consola": "^3.2.3",
+    "craco-less": "^3.0.1",
     "dayjs": "^1.11.10",
     "dayjs-business-days2": "^1.2.2",
     "dinero.js": "^1.9.1",
     "dotenv": "^16.4.5",
     "enquire-js": "^0.2.1",
     "env-cmd": "^10.1.0",
-    "esbuild": "^0.20.0",
     "exifr": "^7.1.3",
-    "firebase": "^10.8.0",
+    "firebase": "^10.8.1",
     "graphql": "^16.6.0",
     "i18next": "^23.10.0",
     "i18next-browser-languagedetector": "^7.0.2",
@@ -51,11 +42,11 @@
     "phone": "^3.1.42",
     "preval.macro": "^5.0.0",
     "prop-types": "^15.8.1",
-    "query-string": "^8.2.0",
+    "query-string": "^9.0.0",
     "rc-queue-anim": "^2.0.0",
     "rc-scroll-anim": "^2.7.6",
     "react": "^18.2.0",
-    "react-big-calendar": "^1.10.3",
+    "react-big-calendar": "^1.11.0",
     "react-color": "^2.19.3",
     "react-cookie": "^7.1.0",
     "react-dom": "^18.2.0",
@@ -67,15 +58,15 @@
     "react-image-lightbox": "^5.1.4",
     "react-intersection-observer": "^9.8.1",
     "react-markdown": "^9.0.1",
-    "react-number-format": "^5.1.4",
+    "react-number-format": "^5.3.3",
     "react-redux": "^9.1.0",
     "react-resizable": "^3.0.5",
-    "react-router-dom": "^6.22.1",
+    "react-router-dom": "^6.22.2",
     "react-scripts": "^5.0.1",
     "react-sticky": "^6.0.3",
     "react-sublime-video": "^0.2.5",
     "react-virtualized": "^9.22.5",
-    "recharts": "^2.12.1",
+    "recharts": "^2.12.2",
     "redux": "^5.0.1",
     "redux-persist": "^6.0.0",
     "redux-saga": "^1.3.0",
@@ -86,9 +77,6 @@
     "styled-components": "^6.1.8",
     "subscriptions-transport-ws": "^0.11.0",
     "terser-webpack-plugin": "^5.3.10",
-    "vite-plugin-compression": "^0.5.1",
-    "vite-plugin-ejs": "^1.7.0",
-    "vite-plugin-svgr": "^4.2.0",
     "web-vitals": "^3.5.2",
     "workbox-core": "^7.0.0",
     "workbox-expiration": "^7.0.0",
@@ -96,26 +84,20 @@
     "workbox-precaching": "^7.0.0",
     "workbox-routing": "^7.0.0",
     "workbox-strategies": "^7.0.0",
-    "yauzl": "^3.1.0"
+    "yauzl": "^3.1.1"
   },
   "scripts": {
     "analyze": "source-map-explorer 'build/static/js/*.js'",
-    "start": "vite",
-    "build": "vite build",
-    "start:imex": "dotenvx run --env-file=.env.development.imex -- vite",
-    "start:rome": "dotenvx run --env-file=.env.development.rome -- vite",
-    "start:promanager": "dotenvx run --env-file=.env.development.promanager -- vite",
-    "build:test:imex": "env-cmd -f .env.test.imex npm run build",
-    "build:test:rome": "env-cmd -f .env.test.rome npm run build",
-    "build:test:promanager": "env-cmd -f .env.test.promanager npm run build",
-    "build:production:imex": "env-cmd -f .env.production.imex npm run build",
-    "build:production:rome": "env-cmd -f .env.production.rome npm run build",
-    "build:production:promanager": "env-cmd -f .env.production.promanager npm run build",
+    "start": "craco start",
+    "build": "REACT_APP_GIT_SHA=`git rev-parse --short HEAD` craco build",
+    "build:test": "env-cmd -f .env.test npm run build",
+    "build-deploy:test": "npm run build:test && s3cmd sync build/* s3://imex-online-test && echo '🚀 TESTING Deployed!'",
+    "buildcra": "REACT_APP_GIT_SHA=`git rev-parse --short HEAD` craco build",
     "test": "cypress open",
     "eject": "react-scripts eject",
     "madge": "madge  --image ./madge-graph.svg --extensions js,jsx,ts,tsx --circular .",
     "eulaize": "node src/utils/eulaize.js",
-    "sentry:sourcemaps:imex": "sentry-cli sourcemaps inject --org imex --project imexonline ./build && sentry-cli sourcemaps upload --org imex --project imexonline ./build"
+    "sentry:sourcemaps": "sentry-cli sourcemaps inject --org imex --project imexonline ./build && sentry-cli sourcemaps upload --org imex --project imexonline ./build"
   },
   "eslintConfig": {
     "extends": [
@@ -141,30 +123,12 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@babel/preset-react": "^7.23.3",
-    "@dotenvx/dotenvx": "^0.15.0",
-    "@emotion/babel-plugin": "^11.11.0",
-    "@emotion/react": "^11.11.3",
     "@sentry/webpack-plugin": "^2.14.2",
-    "@swc/core": "^1.3.107",
-    "@swc/plugin-styled-components": "^1.5.108",
     "@testing-library/cypress": "^10.0.1",
-    "browserslist": "^4.22.3",
-    "browserslist-to-esbuild": "^2.1.1",
-    "craco-less": "^3.0.1",
-    "cross-env": "^7.0.3",
     "cypress": "^13.6.6",
     "eslint-plugin-cypress": "^2.15.1",
-    "memfs": "^4.6.0",
-    "os-browserify": "^0.3.0",
     "react-error-overlay": "6.0.11",
     "redux-logger": "^3.0.6",
-    "source-map-explorer": "^2.5.3",
-    "vite": "^5.0.11",
-    "vite-plugin-babel": "^1.2.0",
-    "vite-plugin-legacy": "^2.1.0",
-    "vite-plugin-node-polyfills": "^0.19.0",
-    "vite-plugin-pwa": "^0.19.0",
-    "vite-plugin-style-import": "^2.0.0"
+    "source-map-explorer": "^2.5.3"
   }
 }

client/public/editor.js

@@ -0,0 +1,95 @@
+// unlayer.registerPropertyEditor({
+//   name: "field_name",
+//   layout: "bottom",
+//   Widget: unlayer.createWidget({
+//     render(value) {
+//       return `
+//         <input class="field" value=${value} />
+//       `;
+//     },
+//     mount(node, value, updateValue) {
+//       var input = node.getElementsByClassName("field")[0];
+//       input.onchange = function (event) {
+//         updateValue(event.target.value);
+//       };
+//     },
+//   }),
+// });
+
+// unlayer.registerTool({
+//   type: "whatever",
+//   category: "contents",
+//   label: "Begin Repeat",
+//   icon: "fa-smile",
+//   values: {},
+//   options: {
+//     default: {
+//       title: null,
+//     },
+//     text: {
+//       title: "Field",
+//       position: 1,
+//       options: {
+//         field: {
+//           label: "Field",
+//           defaultValue: "",
+//           widget: "field_name",
+//         },
+//       },
+//     },
+//   },
+//   renderer: {
+//     Viewer: unlayer.createViewer({
+//       render(values) {
+//         console.log(values);
+//         return `
+//           <div style="display: none;">{{#each ${values.field}}}</div>
+//         `;
+//       },
+//     }),
+//     exporters: {
+//       web: function () {},
+//       email: function () {},
+//     },
+//   },
+// });
+
+// unlayer.registerTool({
+//   type: "whatever",
+//   category: "contents",
+//   label: "End Repeat",
+//   icon: "fa-smile",
+//   values: {},
+//   options: {
+//     default: {
+//       title: null,
+//     },
+//     text: {
+//       title: "Field",
+//       position: 1,
+//       options: {
+//         field: {
+//           label: "Field",
+//           defaultValue: "",
+//           widget: "field_name",
+//         },
+//       },
+//     },
+//   },
+//   renderer: {
+//     Viewer: unlayer.createViewer({
+//       render(values) {
+//         return `
+//           <div style="display: none;">{{ /each }}</div>
+//         `;
+//       },
+//     }),
+//     exporters: {
+//       web: function () {},
+//       email: function () {},
+//     },
+//   },
+// });
+
+unlayer.registerColumns([2, 2, 2, 2, 2, 2]);
+unlayer.registerColumns([1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]);

client/public/firebase-messaging-sw.js

@@ -0,0 +1,56 @@
+// Scripts for firebase and firebase messaging
+importScripts("https://www.gstatic.com/firebasejs/8.2.0/firebase-app.js");
+importScripts("https://www.gstatic.com/firebasejs/8.2.0/firebase-messaging.js");
+
+// Initialize the Firebase app in the service worker by passing the generated config
+let firebaseConfig;
+switch (this.location.hostname) {
+    case "localhost":
+        firebaseConfig = {
+            apiKey: "AIzaSyDPLT8GiDHDR1R4nI66Qi0BY1aYviDPioc",
+            authDomain: "imex-dev.firebaseapp.com",
+            databaseURL: "https://imex-dev.firebaseio.com",
+            projectId: "imex-dev",
+            storageBucket: "imex-dev.appspot.com",
+            messagingSenderId: "759548147434",
+            appId: "1:759548147434:web:e8239868a48ceb36700993",
+            measurementId: "G-K5XRBVVB4S",
+        };
+        break;
+    case "test.imex.online":
+        firebaseConfig = {
+            apiKey: "AIzaSyBw7_GTy7GtQyfkIRPVrWHEGKfcqeyXw0c",
+            authDomain: "imex-test.firebaseapp.com",
+            projectId: "imex-test",
+            storageBucket: "imex-test.appspot.com",
+            messagingSenderId: "991923618608",
+            appId: "1:991923618608:web:633437569cdad78299bef5",
+            // measurementId: "${config.measurementId}",
+        };
+        break;
+    case "imex.online":
+    default:
+        firebaseConfig = {
+            apiKey: "AIzaSyDSezy-jGJreo7ulgpLdlpOwAOrgcaEkhU",
+            authDomain: "imex-prod.firebaseapp.com",
+            databaseURL: "https://imex-prod.firebaseio.com",
+            projectId: "imex-prod",
+            storageBucket: "imex-prod.appspot.com",
+            messagingSenderId: "253497221485",
+            appId: "1:253497221485:web:3c81c483b94db84b227a64",
+            measurementId: "G-NTWBKG2L0M",
+        };
+}
+
+firebase.initializeApp(firebaseConfig);
+
+// Retrieve firebase messaging
+const messaging = firebase.messaging();
+
+messaging.onBackgroundMessage(function (payload) {
+    // Customize notification here
+    const channel = new BroadcastChannel("imex-sw-messages");
+    channel.postMessage(payload);
+
+    //self.registration.showNotification(notificationTitle, notificationOptions);
+});

client/public/index.html

@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8"/>
+    <link href="%PUBLIC_URL%/favicon.png" rel="icon"/>
+    <meta content="width=device-width, initial-scale=1" name="viewport"/>
+    <meta content="#002366" name="theme-color"/>
+    <meta content="ImEX Online" name="description"/>
+    <!-- <link rel="apple-touch-icon" href="logo192.png" /> -->
+    <link href="logo192.png" rel="apple-touch-icon"/>
+    <script type="text/javascript">
+        window.$crisp = [];
+        window.CRISP_WEBSITE_ID = "36724f62-2eb0-4b29-9cdd-9905fb99913e";
+        (function () {
+            d = document;
+            s = d.createElement("script");
+            s.src = "https://client.crisp.chat/l.js";
+            s.async = 1;
+            d.getElementsByTagName("head")[0].appendChild(s);
+        })();
+    </script>
+    <script>
+        !(function () {
+            "use strict";
+            var e = [
+                "debug",
+                "destroy",
+                "do",
+                "help",
+                "identify",
+                "is",
+                "off",
+                "on",
+                "ready",
+                "render",
+                "reset",
+                "safe",
+                "set",
+            ];
+            if (window.noticeable)
+                console.warn("Noticeable SDK code snippet loaded more than once");
+            else {
+                var n = (window.noticeable = window.noticeable || []);
+
+                function t(e) {
+                    return function () {
+                        var t = Array.prototype.slice.call(arguments);
+                        return t.unshift(e), n.push(t), n;
+                    };
+                }
+
+                !(function () {
+                    for (var o = 0; o < e.length; o++) {
+                        var r = e[o];
+                        n[r] = t(r);
+                    }
+                })(),
+                    (function () {
+                        var e = document.createElement("script");
+                        (e.async = !0), (e.src = "https://sdk.noticeable.io/l.js");
+                        var n = document.head;
+                        n.insertBefore(e, n.firstChild);
+                    })();
+            }
+        })();
+    </script>
+
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link href="%PUBLIC_URL%/manifest.json" rel="manifest"/>
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>ImEX Online</title>
+</head>
+<body>
+<noscript>You need to enable JavaScript to run this app.</noscript>
+<div id="root"></div>
+</body>
+</html>

client/public/manifest.json

@@ -0,0 +1,27 @@
+{
+  "short_name": "ImEX Online",
+  "name": "ImEX Online",
+  "description": "The ultimate bodyshop management system.",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo1024.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#fff",
+  "background_color": "#fff",
+  "gcm_sender_id": "103953800507"
+}

client/src/App/App.container.jsx

@@ -17,7 +17,7 @@ dayjs.locale("en");
 
 const config = {
     core: {
-        authorizationKey: import.meta.env.VITE_APP_SPLIT_API,
+        authorizationKey: process.env.REACT_APP_SPLIT_API,
         key: "anon",
     },
 };

client/src/App/App.jsx

@@ -1,11 +1,11 @@
-import { useSplitClient } from "@splitsoftware/splitio-react";
-import { Button, Result } from "antd";
+import {useSplitClient} from "@splitsoftware/splitio-react";
+import {Button, Result} from "antd";
 import LogRocket from "logrocket";
-import React, { lazy, Suspense, useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { connect } from "react-redux";
-import { Route, Routes } from "react-router-dom";
-import { createStructuredSelector } from "reselect";
+import React, {lazy, Suspense, useEffect, useState} from "react";
+import {useTranslation} from "react-i18next";
+import {connect} from "react-redux";
+import {Route, Routes} from "react-router-dom";
+import {createStructuredSelector} from "reselect";
 import DocumentEditorContainer from "../components/document-editor/document-editor.container";
 import ErrorBoundary from "../components/error-boundary/error-boundary.component";
 
@@ -14,19 +14,15 @@ import LoadingSpinner from "../components/loading-spinner/loading-spinner.compon
 import DisclaimerPage from "../pages/disclaimer/disclaimer.page";
 import LandingPage from "../pages/landing/landing.page";
 import TechPageContainer from "../pages/tech/tech.page.container";
-import { setOnline } from "../redux/application/application.actions";
-import { selectOnline } from "../redux/application/application.selectors";
-import { checkUserSession } from "../redux/user/user.actions";
-import {
-    selectBodyshop,
-    selectCurrentEula,
-    selectCurrentUser,
-} from "../redux/user/user.selectors";
+import {setOnline} from "../redux/application/application.actions";
+import {selectOnline} from "../redux/application/application.selectors";
+import {checkUserSession} from "../redux/user/user.actions";
+import {selectBodyshop, selectCurrentEula, selectCurrentUser,} from "../redux/user/user.selectors";
 import PrivateRoute from "../components/PrivateRoute";
 import "./App.styles.scss";
 import handleBeta from "../utils/betaHandler";
 import Eula from "../components/eula/eula.component";
-import InstanceRenderMgr from "../utils/instanceRenderMgr";
+
 const ResetPassword = lazy(() =>
     import("../pages/reset-password/reset-password.component")
 );
@@ -41,24 +37,18 @@ const mapStateToProps = createStructuredSelector({
     currentUser: selectCurrentUser,
     online: selectOnline,
     bodyshop: selectBodyshop,
-    currentEula: selectCurrentEula,
+    currentEula: selectCurrentEula
 });
 const mapDispatchToProps = (dispatch) => ({
     checkUserSession: () => dispatch(checkUserSession()),
     setOnline: (isOnline) => dispatch(setOnline(isOnline)),
 });
 
-export function App({
-    bodyshop,
-    checkUserSession,
-    currentUser,
-    online,
-    setOnline,
-    currentEula,
-}) {
+export function App({bodyshop, checkUserSession, currentUser, online, setOnline, currentEula}) {
     const client = useSplitClient().client;
-    const [listenersAdded, setListenersAdded] = useState(false);
-    const { t } = useTranslation();
+    const [listenersAdded, setListenersAdded] = useState(false)
+    const {t} = useTranslation();
+
 
     useEffect(() => {
         if (!navigator.onLine) {
@@ -75,14 +65,14 @@ export function App({
     useEffect(() => {
         const offlineListener = (e) => {
             setOnline(false);
-        };
+        }
 
         const onlineListener = (e) => {
             setOnline(true);
-        };
+        }
 
         if (!listenersAdded) {
-            console.log("Added events for offline and online");
+            console.log('Added events for offline and online');
             window.addEventListener("offline", offlineListener);
             window.addEventListener("online", onlineListener);
             setListenersAdded(true);
@@ -91,7 +81,7 @@ export function App({
         return () => {
             window.removeEventListener("offline", offlineListener);
             window.removeEventListener("online", onlineListener);
-        };
+        }
     }, [setOnline, listenersAdded]);
 
     useEffect(() => {
@@ -100,26 +90,16 @@ export function App({
 
             if (
                 client.getTreatment("LogRocket_Tracking") === "on" ||
-                window.location.hostname ===
-                    InstanceRenderMgr({
-                        imex: "beta.imex.online",
-                        rome: "beta.romeonline.io",
-                    })
+                window.location.hostname === 'beta.imex.online'
             ) {
                 console.log("LR Start");
-                LogRocket.init(
-                    InstanceRenderMgr({
-                        imex: "gvfvfw/bodyshopapp",
-                        rome: "rome-online/rome-online",
-                        promanager: "", //TODO:AIO Add in log rocket for promanager instances.
-                    })
-                );
+                LogRocket.init("gvfvfw/bodyshopapp");
             }
         }
     }, [bodyshop, client, currentUser.authorized]);
 
     if (currentUser.authorized === null) {
-        return <LoadingSpinner message={t("general.labels.loggingin")} />;
+        return <LoadingSpinner message={t("general.labels.loggingin")}/>;
     }
 
     handleBeta();
@@ -144,102 +124,29 @@ export function App({
         );
 
     if (currentEula && !currentUser.eulaIsAccepted) {
-        return <Eula />;
+        return <Eula/>
     }
 
     // Any route that is not assigned and matched will default to the Landing Page component
     return (
-        <Suspense
-            fallback={
-                <LoadingSpinner
-                    message={InstanceRenderMgr({
-                      imex: t("titles.imexonline"),
-                      rome: t("titles.romeonline"),
-                      promanager: t("titles.promanager")
-                    })}
-                />
-            }
-        >
+        <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 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 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 path="/edit/*" element={<PrivateRoute isAuthorized={currentUser.authorized}/>}>
+                    <Route path="*" element={<DocumentEditorContainer/>}/>
                 </Route>
             </Routes>
         </Suspense>

client/src/App/themeProvider.js

@@ -1,6 +1,5 @@
 import {defaultsDeep} from "lodash";
 import {theme} from "antd";
-import InstanceRenderMgr from '../utils/instanceRenderMgr'
 
 const {defaultAlgorithm, darkAlgorithm} = theme;
 
@@ -11,30 +10,21 @@ let isDarkMode = false;
  * @type {{components: {Menu: {itemDividerBorderColor: string}}}}
  */
 const defaultTheme = {
-  components: {
-    Table: {
-      rowHoverBg: '#e7f3ff',
-      rowSelectedBg: '#e6f7ff',
-      headerSortHoverBg: 'transparent',
+    components: {
+        Table: {
+            rowHoverBg: '#e7f3ff',
+            rowSelectedBg: '#e6f7ff',
+            headerSortHoverBg: 'transparent',
+        },
+        Menu: {
+            darkItemHoverBg: '#1677ff',
+            itemHoverBg: '#1677ff',
+            horizontalItemHoverBg: '#1677ff',
+        }
     },
-    Menu: {
-      darkItemHoverBg: '#1890ff',
-      itemHoverBg: '#1890ff',
-      horizontalItemHoverBg: '#1890ff',
-    },
-  },
-  token: {
-    colorPrimary: InstanceRenderMgr({ 
-      imex: '#1890ff',
-      rome: '#326ade',
-      promanager:"#1d69a6"
-    }),
-    colorInfo: InstanceRenderMgr({
-      imex: '#1890ff',
-      rome: '#326ade',
-      promanager:"#1d69a6"
-    }),
-  },
+    token: {
+        colorPrimary: '#1677ff'
+    }
 };
 
 /**
@@ -60,11 +50,11 @@ const devTheme = {
  */
 const prodTheme = {};
 
-const currentTheme = import.meta.env.DEV ? devTheme
+const currentTheme = process.env.NODE_ENV === "development" ? devTheme
     : prodTheme;
 
 const finaltheme = {
     algorithm: isDarkMode ? darkAlgorithm : defaultAlgorithm,
     ...defaultsDeep(currentTheme, defaultTheme)
 }
-export default finaltheme;
+export default finaltheme;

client/src/assets/promanager/android/res/mipmap-anydpi-v26/ic_launcher.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
-  <background android:drawable="@mipmap/ic_launcher_background"/>
-  <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
-  <monochrome android:drawable="@mipmap/ic_launcher_monochrome"/>
-</adaptive-icon>

client/src/assets/promanager/ios/Contents.json

@@ -1,134 +0,0 @@
-{
-  "images": [
-    {
-      "filename": "AppIcon@2x.png",
-      "idiom": "iphone",
-      "scale": "2x",
-      "size": "60x60"
-    },
-    {
-      "filename": "AppIcon@3x.png",
-      "idiom": "iphone",
-      "scale": "3x",
-      "size": "60x60"
-    },
-    {
-      "filename": "AppIcon~ipad.png",
-      "idiom": "ipad",
-      "scale": "1x",
-      "size": "76x76"
-    },
-    {
-      "filename": "AppIcon@2x~ipad.png",
-      "idiom": "ipad",
-      "scale": "2x",
-      "size": "76x76"
-    },
-    {
-      "filename": "AppIcon-83.5@2x~ipad.png",
-      "idiom": "ipad",
-      "scale": "2x",
-      "size": "83.5x83.5"
-    },
-    {
-      "filename": "AppIcon-40@2x.png",
-      "idiom": "iphone",
-      "scale": "2x",
-      "size": "40x40"
-    },
-    {
-      "filename": "AppIcon-40@3x.png",
-      "idiom": "iphone",
-      "scale": "3x",
-      "size": "40x40"
-    },
-    {
-      "filename": "AppIcon-40~ipad.png",
-      "idiom": "ipad",
-      "scale": "1x",
-      "size": "40x40"
-    },
-    {
-      "filename": "AppIcon-40@2x~ipad.png",
-      "idiom": "ipad",
-      "scale": "2x",
-      "size": "40x40"
-    },
-    {
-      "filename": "AppIcon-20@2x.png",
-      "idiom": "iphone",
-      "scale": "2x",
-      "size": "20x20"
-    },
-    {
-      "filename": "AppIcon-20@3x.png",
-      "idiom": "iphone",
-      "scale": "3x",
-      "size": "20x20"
-    },
-    {
-      "filename": "AppIcon-20~ipad.png",
-      "idiom": "ipad",
-      "scale": "1x",
-      "size": "20x20"
-    },
-    {
-      "filename": "AppIcon-20@2x~ipad.png",
-      "idiom": "ipad",
-      "scale": "2x",
-      "size": "20x20"
-    },
-    {
-      "filename": "AppIcon-29.png",
-      "idiom": "iphone",
-      "scale": "1x",
-      "size": "29x29"
-    },
-    {
-      "filename": "AppIcon-29@2x.png",
-      "idiom": "iphone",
-      "scale": "2x",
-      "size": "29x29"
-    },
-    {
-      "filename": "AppIcon-29@3x.png",
-      "idiom": "iphone",
-      "scale": "3x",
-      "size": "29x29"
-    },
-    {
-      "filename": "AppIcon-29~ipad.png",
-      "idiom": "ipad",
-      "scale": "1x",
-      "size": "29x29"
-    },
-    {
-      "filename": "AppIcon-29@2x~ipad.png",
-      "idiom": "ipad",
-      "scale": "2x",
-      "size": "29x29"
-    },
-    {
-      "filename": "AppIcon-60@2x~car.png",
-      "idiom": "car",
-      "scale": "2x",
-      "size": "60x60"
-    },
-    {
-      "filename": "AppIcon-60@3x~car.png",
-      "idiom": "car",
-      "scale": "3x",
-      "size": "60x60"
-    },
-    {
-      "filename": "AppIcon~ios-marketing.png",
-      "idiom": "ios-marketing",
-      "scale": "1x",
-      "size": "1024x1024"
-    }
-  ],
-  "info": {
-    "author": "iconkitchen",
-    "version": 1
-  }
-}

client/src/assets/promanager/web/README.txt

@@ -1,18 +0,0 @@
-Add this to your HTML <head>:
-
-    <link rel="icon" href="/favicon.ico" sizes="any">
-    <link rel="apple-touch-icon" href="/apple-touch-icon.png">
-
-Add this to your app's manifest.json:
-
-    ...
-    {
-      "icons": [
-        { "src": "/favicon.ico", "type": "image/x-icon", "sizes": "16x16 32x32" },
-        { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
-        { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" },
-        { "src": "/icon-192-maskable.png", "type": "image/png", "sizes": "192x192", "purpose": "maskable" },
-        { "src": "/icon-512-maskable.png", "type": "image/png", "sizes": "512x512", "purpose": "maskable" }
-      ]
-    }
-    ...

client/src/components/PrivateRoute.js

@@ -14,4 +14,4 @@ function PrivateRoute({component: Component, isAuthorized, ...rest}) {
     return <Outlet/>;
 }
 
-export default PrivateRoute;
+export default PrivateRoute;

client/src/components/accounting-payables-table/accounting-payables-table.component.jsx

@@ -1,21 +1,20 @@
-import {Card, Checkbox, Input, Space, Table} from "antd";
+import {Card, Checkbox, Input, Space, Table} from "antd";import queryString from "query-string";
 import React, {useState} from "react";
 import {useTranslation} from "react-i18next";
+import {connect } from "react-redux";
 import {Link} from "react-router-dom";
-import CurrencyFormatter from "../../utils/CurrencyFormatter";
-import {alphaSort, dateSort} from "../../utils/sorters";
-import PayableExportButton from "../payable-export-button/payable-export-button.component";
-import PayableExportAll from "../payable-export-all-button/payable-export-all-button.component";
-import {DateFormatter} from "../../utils/DateFormatter";
-import queryString from "query-string";
+import { createStructuredSelector } from "reselect";
 import {logImEXEvent} from "../../firebase/firebase.utils";
-import QboAuthorizeComponent from "../qbo-authorize/qbo-authorize.component";
-import {connect} from "react-redux";
-import {createStructuredSelector} from "reselect";
-import {selectBodyshop} from "../../redux/user/user.selectors";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import CurrencyFormatter from "../../utils/CurrencyFormatter";
+import {DateFormatter} from "../../utils/DateFormatter";
+import { pageLimit } from "../../utils/config";
+import {alphaSort, dateSort} from "../../utils/sorters";
 import ExportLogsCountDisplay from "../export-logs-count-display/export-logs-count-display.component";
+import PayableExportAll from "../payable-export-all-button/payable-export-all-button.component";
+import PayableExportButton from "../payable-export-button/payable-export-button.component";
 import BillMarkSelectedExported from "../payable-mark-selected-exported/payable-mark-selected-exported.component";
-import {pageLimit} from "../../utils/config";
+import QboAuthorizeComponent from "../qbo-authorize/qbo-authorize.component";
 
 const mapStateToProps = createStructuredSelector({
     bodyshop: selectBodyshop,
@@ -147,7 +146,7 @@ export function AccountingPayablesTableComponent({
             title: t("general.labels.actions"),
             dataIndex: "actions",
             key: "actions",
-            sorter: (a, b) => a.clm_total - b.clm_total,
+
 
             render: (text, record) => (
                 <PayableExportButton

client/src/components/accounting-payments-table/accounting-payments-table.component.jsx

@@ -8,14 +8,16 @@ import {logImEXEvent} from "../../firebase/firebase.utils";
 import {selectBodyshop} from "../../redux/user/user.selectors";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import {DateFormatter, DateTimeFormatter} from "../../utils/DateFormatter";
+import {pageLimit } from "../../utils/config";
 import {alphaSort, dateSort} from "../../utils/sorters";
 import ExportLogsCountDisplay from "../export-logs-count-display/export-logs-count-display.component";
-import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
+import OwnerNameDisplay, {
+  OwnerNameDisplayFunction,
+} from "../owner-name-display/owner-name-display.component";
 import PaymentExportButton from "../payment-export-button/payment-export-button.component";
 import PaymentMarkSelectedExported from "../payment-mark-selected-exported/payment-mark-selected-exported.component";
 import PaymentsExportAllButton from "../payments-export-all-button/payments-export-all-button.component";
 import QboAuthorizeComponent from "../qbo-authorize/qbo-authorize.component";
-import {pageLimit} from "../../utils/config";
 
 const mapStateToProps = createStructuredSelector({
     bodyshop: selectBodyshop,
@@ -75,7 +77,11 @@ export function AccountingPayablesTableComponent({
             dataIndex: "owner",
             key: "owner",
             ellipsis: true,
-            sorter: (a, b) => alphaSort(a.job.ownr_ln, b.job.ownr_ln),
+            sorter: (a, b) =>
+        alphaSort(
+          OwnerNameDisplayFunction(a.job),
+          OwnerNameDisplayFunction(b.job)
+        ),
             sortOrder:
                 state.sortedInfo.columnKey === "owner" && state.sortedInfo.order,
             render: (text, record) => {
@@ -94,7 +100,9 @@ export function AccountingPayablesTableComponent({
             title: t("payments.fields.amount"),
             dataIndex: "amount",
             key: "amount",
-            render: (text, record) => (
+            sorter: (a, b) => a.amount - b.amount,
+      sortOrder:
+        state.sortedInfo.columnKey === "amount" && state.sortedInfo.order,render: (text, record) => (
                 <CurrencyFormatter>{record.amount}</CurrencyFormatter>
             ),
         },
@@ -111,19 +119,21 @@ export function AccountingPayablesTableComponent({
         {
             title: t("payments.fields.created_at"),
             dataIndex: "created_at",
-            key: "created_at",
+            key: "created_at",sorter: (a, b) => dateSort(a.created_at, b.created_at),
+      sortOrder:
+        state.sortedInfo.columnKey === "created_at" && state.sortedInfo.order,
             render: (text, record) => (
                 <DateTimeFormatter>{record.created_at}</DateTimeFormatter>
             ),
         },
-        {
-            title: t("payments.fields.exportedat"),
-            dataIndex: "exportedat",
-            key: "exportedat",
-            render: (text, record) => (
-                <DateTimeFormatter>{record.exportedat}</DateTimeFormatter>
-            ),
-        },
+        //{
+          //  title: t("payments.fields.exportedat"),
+          //  dataIndex: "exportedat",
+          //  key: "exportedat",
+          //  render: (text, record) => (
+            //    <DateTimeFormatter>{record.exportedat}</DateTimeFormatter>
+          //  ),
+        //},
         {
             title: t("exportlogs.labels.attempts"),
             dataIndex: "attempts",
@@ -137,7 +147,7 @@ export function AccountingPayablesTableComponent({
             title: t("general.labels.actions"),
             dataIndex: "actions",
             key: "actions",
-            sorter: (a, b) => a.clm_total - b.clm_total,
+
 
             render: (text, record) => (
                 <PaymentExportButton

client/src/components/accounting-receivables-table/accounting-receivables-table.component.jsx

@@ -4,17 +4,19 @@ import {useTranslation} from "react-i18next";
 import {Link} from "react-router-dom";
 import {logImEXEvent} from "../../firebase/firebase.utils";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
-import {alphaSort, dateSort} from "../../utils/sorters";
+import {alphaSort, dateSort, statusSort } from "../../utils/sorters";
 import JobExportButton from "../jobs-close-export-button/jobs-close-export-button.component";
 import JobsExportAllButton from "../jobs-export-all-button/jobs-export-all-button.component";
 
 import {connect} from "react-redux";
 import {createStructuredSelector} from "reselect";
 import {selectBodyshop} from "../../redux/user/user.selectors";
-import QboAuthorizeComponent from "../qbo-authorize/qbo-authorize.component";
 import {DateFormatter} from "../../utils/DateFormatter";
-import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
 import ExportLogsCountDisplay from "../export-logs-count-display/export-logs-count-display.component";
+import OwnerNameDisplay, {
+  OwnerNameDisplayFunction,
+} from "../owner-name-display/owner-name-display.component";
+import QboAuthorizeComponent from "../qbo-authorize/qbo-authorize.component";
 
 const mapStateToProps = createStructuredSelector({
     bodyshop: selectBodyshop,
@@ -63,7 +65,7 @@ export function AccountingReceivablesTableComponent({
             title: t("jobs.fields.status"),
             dataIndex: "status",
             key: "status",
-            sorter: (a, b) => a.status - b.status,
+            sorter: (a, b) => statusSort(a, b, bodyshop.md_ro_statuses.statuses),
             sortOrder:
                 state.sortedInfo.columnKey === "status" && state.sortedInfo.order,
         },
@@ -83,7 +85,8 @@ export function AccountingReceivablesTableComponent({
             title: t("jobs.fields.owner"),
             dataIndex: "owner",
             key: "owner",
-            sorter: (a, b) => alphaSort(a.ownr_ln, b.ownr_ln),
+            sorter: (a, b) =>
+        alphaSort(OwnerNameDisplayFunction(a), OwnerNameDisplayFunction(b)),
             sortOrder:
                 state.sortedInfo.columnKey === "owner" && state.sortedInfo.order,
             render: (text, record) => {
@@ -103,7 +106,15 @@ export function AccountingReceivablesTableComponent({
             dataIndex: "vehicle",
             key: "vehicle",
             ellipsis: true,
-            render: (text, record) => {
+            sorter: (a, b) =>
+        alphaSort(
+          `${a.v_model_yr || ""} ${a.v_make_desc || ""} ${
+            a.v_model_desc || ""
+          }`,
+          `${b.v_model_yr || ""} ${b.v_make_desc || ""} ${b.v_model_desc || ""}`
+        ),
+      sortOrder:
+        state.sortedInfo.columnKey === "vehicle" && state.sortedInfo.order,render: (text, record) => {
                 return record.vehicleid ? (
                     <Link to={"/manage/vehicles/" + record.vehicleid}>
                         {`${record.v_model_yr || ""} ${record.v_make_desc || ""} ${