Publish

- @bigcapital/server@0.10.1
 - @bigcapital/webapp@0.10.2

.github/FUNDING.yml

@@ -0,0 +1,13 @@
+# These are supported funding model platforms
+
+github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
+patreon: Bigcapital # Replace with a single Patreon username
+open_collective: # Replace with a single Open Collective username
+ko_fi: # Replace with a single Ko-fi username
+tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
+community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
+liberapay: # Replace with a single Liberapay username
+issuehunt: # Replace with a single IssueHunt username
+otechie: # Replace with a single Otechie username
+lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
+custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']

CHANGELOG.md

@@ -2,6 +2,20 @@
 
 All notable changes to Bigcapital server-side will be in this file.
 
+# [0.10.1] - 25-09-2023
+
+* Fix: Running tenants migration on Docker migration container by @abouolia in https://github.com/bigcapitalhq/bigcapital/pull/242
+
+# [0.10.0] - 24-09-2023
+
+* Added: Tax rates service by @abouolia @elforjani13  in https://github.com/bigcapitalhq/bigcapital/pull/204
+* Added: Sales Tax Liability Summary report by @abouolia in https://github.com/bigcapitalhq/bigcapital/pull/204
+* Added: Tax rates tracking with sale invoices by @abouolia in https://github.com/bigcapitalhq/bigcapital/pull/204
+* fix(webapp): Table headers sticky for all reports. by @elforjani13 in https://github.com/bigcapitalhq/bigcapital/pull/240
+* chore(deps): bump word-wrap from 1.2.3 to 1.2.4 by @dependabot in https://github.com/bigcapitalhq/bigcapital/pull/200
+* chore(deps): bump word-wrap from 1.2.3 to 1.2.4 in /packages/webapp by @dependabot in https://github.com/bigcapitalhq/bigcapital/pull/199
+* chore(deps): bump mongoose from 5.13.15 to 5.13.20 by @dependabot in https://github.com/bigcapitalhq/bigcapital/pull/197
+
 # [0.9.12] - 29-08-2023
 
 * Refactor: split the services to multiple service classes. (by @abouolia in https://github.com/bigcapitalhq/bigcapital/pull/202)

README.md

@@ -48,6 +48,12 @@ Bigcapital is a smart and open-source accounting and inventory software, Bigcapi
 
 Please see [Releases](https://github.com/bigcapitalhq/bigcapital/releases) for more information what has changed recently.
 
+# Contact us
+
+Meet our sales team for any commercial inquiries.
+
+<a target="_blank" href="https://cal.com/ahmed-bouhuolia-ekk3ph/30min"><img src="https://cal.com/book-with-cal-dark.svg" alt="Book us with Cal.com"></a>
+
 # Recognition
 
 <a href="https://news.ycombinator.com/item?id=36118990">

docker-compose.prod.yml

@@ -15,8 +15,8 @@ services:
       - ./data/logs/nginx/:/var/log/nginx
       - ./docker/certbot/certs/:/var/certs
     ports:
-      - "${PUBLIC_PROXY_PORT:-80}:80"
+      - '${PUBLIC_PROXY_PORT:-80}:80'
-      - "${PUBLIC_PROXY_SSL_PORT:-443}:443"
+      - '${PUBLIC_PROXY_SSL_PORT:-443}:443'
     tty: true
     depends_on:
       - server
@@ -71,7 +71,7 @@ services:
       # Authentication
       - JWT_SECRET=${JWT_SECRET}
 
-      # MongoDB 
+      # MongoDB
       - MONGODB_DATABASE_URL=mongodb://mongo/bigcapital
 
       # Application
@@ -92,11 +92,14 @@ services:
       context: ./
       dockerfile: docker/migration/Dockerfile
     environment:
+      # Database
       - DB_HOST=mysql
       - DB_USER=${DB_USER}
       - DB_PASSWORD=${DB_PASSWORD}
       - DB_CHARSET=${DB_CHARSET}
       - SYSTEM_DB_NAME=${SYSTEM_DB_NAME}
+      # Tenants databases
+      - TENANT_DB_NAME_PERFIX=${TENANT_DB_NAME_PERFIX}
     depends_on:
       - mysql
 
@@ -136,7 +139,7 @@ services:
     build:
       context: ./docker/redis
     expose:
-      - "6379"
+      - '6379'
     volumes:
       - redis:/data
 

docker/migration/Dockerfile

@@ -34,5 +34,7 @@ WORKDIR /app/packages/server
 
 RUN git clone https://github.com/vishnubob/wait-for-it.git
 
-# Once we listen the mysql port run the migration task.
+ADD docker/migration/start.sh /
-CMD ["./wait-for-it/wait-for-it.sh", "mysql:3306", "--", "node", "./build/commands.js", "system:migrate:latest"]
+RUN chmod +x /start.sh
+
+CMD ["/start.sh"]

docker/migration/start.sh

@@ -0,0 +1,5 @@
+# Migrate the master system database.
+./wait-for-it/wait-for-it.sh mysql:3306 -- node ./build/commands.js system:migrate:latest
+
+# Migrate all tenants.
+./wait-for-it/wait-for-it.sh mysql:3306 -- node ./build/commands.js tenants:migrate:latest

lerna.json

@@ -1,6 +1,6 @@
 {
   "$schema": "node_modules/lerna/schemas/lerna-schema.json",
-  "useWorkspaces": true,
+  "version": "independent",
-  "version": "0.9.6",
+  "npmClient": "pnpm",
-  "npmClient": "npm"
+  "packages": ["packages/*"]
 }

package.json

@@ -2,7 +2,7 @@
   "name": "bigcapital-monorepo",
   "private": true,
   "scripts": {
-    "bootstrap": "lerna exec npm install",
+    "bootstrap": "lerna exec pnpm install",
     "dev": "lerna run dev",
     "build": "lerna run build",
     "dev:webapp": "lerna run dev --scope \"@bigcapital/webapp\"",
@@ -13,10 +13,6 @@
     "test:e2e": "playwright test",
     "prepare": "husky install"
   },
-  "workspaces": [
-    "packages/*",
-    "shared/*"
-  ],
   "devDependencies": {
     "@commitlint/cli": "^17.4.2",
     "@commitlint/config-conventional": "^17.4.2",

packages/server/.gitignore

@@ -1,7 +1,6 @@
 /node_modules/
 /.env
 /storage
-package-lock.json
 stdout.log
 /dist
-/build
+/build

packages/server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigcapital/server",
-  "version": "0.9.5",
+  "version": "0.10.1",
   "description": "",
   "main": "src/server.ts",
   "scripts": {
@@ -35,6 +35,7 @@
     "babel-loader": "^9.1.2",
     "bcryptjs": "^2.4.3",
     "bluebird": "^3.7.2",
+    "body-parser": "^1.20.2",
     "compression": "^1.7.4",
     "country-codes-list": "^1.6.8",
     "cpy": "^8.1.2",
@@ -72,6 +73,8 @@
     "memory-cache": "^0.2.0",
     "moment": "^2.24.0",
     "moment-range": "^4.0.2",
+    "moment-timezone": "^0.5.43",
+    "mongodb": "^6.1.0",
     "mongoose": "^5.10.0",
     "mustache": "^3.0.3",
     "mysql": "^2.17.1",
@@ -131,7 +134,7 @@
     "rimraf": "^3.0.2",
     "rtlcss": "^3.3.0",
     "run-script-webpack-plugin": "^0.1.1",
-    "sass": "^1.37.5",
+    "sass": "^1.58.0",
     "sinon": "^7.4.2",
     "start-server-webpack-plugin": "^2.2.5",
     "ts-loader": "^9.4.2",

packages/webapp/.npmrc

@@ -1 +0,0 @@
-@bigcapitalhq:registry=https://npm.pkg.github.com

packages/webapp/package.json

@@ -1,17 +1,18 @@
 {
   "name": "@bigcapital/webapp",
-  "version": "0.9.6",
+  "version": "0.10.2",
   "private": true,
   "dependencies": {
-    "@blueprintjs-formik/core": "^0.3.4",
+    "@blueprintjs-formik/core": "^0.3.6",
-    "@blueprintjs-formik/datetime": "^0.3.4",
+    "@blueprintjs-formik/datetime": "^0.3.7",
-    "@blueprintjs-formik/select": "^0.3.1",
+    "@blueprintjs-formik/select": "^0.3.5",
-    "@blueprintjs/core": "^3.50.2",
+    "@blueprintjs/colors": "4.1.19",
-    "@blueprintjs/datetime": "^3.23.12",
+    "@blueprintjs/core": "^4.20.2",
+    "@blueprintjs/datetime": "^4.4.37",
     "@blueprintjs/popover2": "^0.11.1",
-    "@blueprintjs/select": "^3.11.2",
+    "@blueprintjs/select": "^4.9.24",
-    "@blueprintjs/table": "^3.8.3",
+    "@blueprintjs/table": "^4.10.12",
-    "@blueprintjs/timezone": "^3.6.2",
+    "@blueprintjs/timezone": "^4.5.43",
     "@casl/ability": "^5.4.3",
     "@casl/react": "^2.3.0",
     "@craco/craco": "^5.9.0",
@@ -26,6 +27,7 @@
     "@types/ramda": "^0.28.14",
     "@types/react": "^16.14.28",
     "@types/react-body-classname": "^1.1.7",
+    "@types/react-dom": "^16.9.16",
     "@types/react-redux": "^7.1.24",
     "@types/react-router-dom": "^5.3.3",
     "@types/react-transition-group": "^4.4.5",
@@ -38,44 +40,49 @@
     "axios": "^0.21.2",
     "basscss": "^8.0.2",
     "camelcase": "^5.3.1",
+    "classnames": "^2.3.2",
     "cross-env": "^7.0.2",
-    "deep-map-keys": "^2.0.1",
     "deepdash": "^5.3.9",
     "dependency-graph": "^0.11.0",
     "dotenv-webpack": "^8.0.1",
+    "eslint": "^8.33.0",
     "fast-deep-equal": "^3.1.3",
     "flat": "^5.0.2",
     "formik": "^2.2.5",
+    "history": "4.10.1",
     "http-proxy-middleware": "^1.0.0",
     "jest": "24.9.0",
     "jest-environment-jsdom-fourteen": "1.0.1",
     "jest-resolve": "24.9.0",
     "jest-watch-typeahead": "0.4.2",
+    "js-cookie": "2.2.1",
     "js-money": "^0.6.3",
     "lodash": "^4.17.15",
     "moment": "^2.24.0",
     "moment-timezone": "^0.5.33",
-    "node-sass": "^4.14.1",
     "path-browserify": "^1.0.1",
+    "prop-types": "15.8.1",
     "query-string": "^7.1.1",
     "ramda": "^0.27.1",
-    "react": "^16.14.0",
+    "react": "^18.2.0",
     "react-app-polyfill": "^1.0.6",
     "react-body-classname": "^1.3.1",
     "react-content-loader": "^6.0.1",
     "react-dev-utils": "^11.0.4",
-    "react-dom": "^16.12.0",
+    "react-dom": "^18.2.0",
     "react-dropzone": "^11.0.1",
     "react-error-boundary": "^3.0.2",
+    "react-error-overlay": "^6.0.9",
     "react-hotkeys-hook": "^3.0.3",
     "react-intl-universal": "^2.4.7",
     "react-loadable": "^5.5.0",
     "react-query": "^3.6.0",
     "react-query-devtools": "^2.1.1",
-    "react-redux": "^7.1.3",
+    "react-redux": "^7.2.9",
+    "react-router": "5.3.4",
     "react-router-breadcrumbs-hoc": "^3.2.10",
     "react-router-dom": "^5.3.3",
-    "react-scripts": "^3.4.4",
+    "react-scripts": "5.0.1",
     "react-scroll-sync": "^0.7.1",
     "react-scrollbars-custom": "^4.0.21",
     "react-sortablejs": "^2.0.11",
@@ -86,11 +93,13 @@
     "react-use": "^13.26.1",
     "react-use-context-menu": "^0.1.4",
     "react-virtualized": "^9.22.3",
-    "redux": "^4.0.5",
+    "redux": "^4.2.1",
     "redux-devtools": "^3.5.0",
     "redux-persist": "^6.0.0",
-    "redux-thunk": "^2.3.0",
+    "redux-thunk": "^2.4.2",
+    "reselect": "4.1.7",
     "rtl-detect": "^1.0.3",
+    "sass": "^1.68.0",
     "semver": "6.3.0",
     "style-loader": "0.23.1",
     "styled-components": "^5.3.1",
@@ -105,10 +114,6 @@
     "storybook": "start-storybook -p 6006"
   },
   "proxy": "http://localhost:3000/",
-  "devDependencies": {
-    "@types/react-dom": "^16.9.16",
-    "react-error-overlay": "^6.0.9"
-  },
   "resolutions": {
     "react-error-overlay": "6.0.9"
   },

packages/webapp/src/components/Accounts/AccountsTypesSelect.tsx

@@ -1,5 +1,4 @@
 // @ts-nocheck
-import React from 'react';
 import { FSelect } from '@/components/Forms';
 
 export function AccountsTypesSelect({ ...props }) {

packages/webapp/src/components/Accounts/_components.tsx

@@ -1,5 +1,4 @@
 // @ts-nocheck
-import React from 'react';
 
 // Filters accounts items.
 export const accountPredicate = (query, account, _index, exactMatch) => {

packages/webapp/src/components/AdvancedFilter/AdvancedFilterDropdown.tsx

@@ -1,6 +1,6 @@
 // @ts-nocheck
 import React from 'react';
-import { Formik, FastField, FieldArray, useFormikContext } from 'formik';
+import { Formik, FastField, FieldArray } from 'formik';
 import {
   Button,
   FormGroup,

packages/webapp/src/components/App.tsx

@@ -1,5 +1,4 @@
 // @ts-nocheck
-import React from 'react';
 import { Router, Switch, Route } from 'react-router';
 import { createBrowserHistory } from 'history';
 import { QueryClientProvider, QueryClient } from 'react-query';

packages/webapp/src/components/Card/index.tsx

@@ -18,10 +18,10 @@ export const CardFooterActions = styled.div`
   border-top: 1px solid #e0e7ea;
   margin-top: 30px;
 
-  .bp3-button {
+  .bp4-button {
     min-width: 70px;
 
-    + .bp3-button {
+    + .bp4-button {
       margin-left: 10px;
     }
   }

packages/webapp/src/components/Dashboard/DashboardRowsHeightButton/style.module.scss

@@ -1,6 +1,6 @@
 
 .menu{
-  :global .bp3-heading{
+  :global .bp4-heading{
     font-weight: 400;
     opacity: 0.5;
     font-size: 12px;

packages/webapp/src/components/Dashboard/SplashScreen.tsx

@@ -1,5 +1,4 @@
 // @ts-nocheck
-import React from 'react';
 import * as R from 'ramda';
 import BigcapitalLoading from './BigcapitalLoading';
 import withDashboard from '@/containers/Dashboard/withDashboard';

packages/webapp/src/components/Datatable/DatatableEditable.tsx

@@ -21,7 +21,7 @@ export function DataTableEditable({
 }
 
 const DatatableEditableRoot = styled.div`
-  .bp3-form-group {
+  .bp4-form-group {
     margin-bottom: 0;
   }
   .table {
@@ -69,17 +69,17 @@ const DatatableEditableRoot = styled.div`
       }
       .tr {
         &:hover .td,
-        .bp3-input {
+        .bp4-input {
           background-color: transparent;
         }
-        .bp3-form-group:not(.bp3-intent-danger) .bp3-input,
+        .bp4-form-group:not(.bp4-intent-danger) .bp4-input,
-        .form-group--select-list .bp3-button {
+        .form-group--select-list .bp4-button {
           border-color: #ffffff;
           color: #222;
           border-radius: 3px;
           text-align: inherit;
         }
-        .bp3-form-group:not(.bp3-intent-danger) .bp3-input {
+        .bp4-form-group:not(.bp4-intent-danger) .bp4-input {
           border-radius: 2px;
           padding-left: 14px;
           padding-right: 14px;
@@ -88,7 +88,7 @@ const DatatableEditableRoot = styled.div`
             box-shadow: 0 0 0 2px #116cd0;
           }
         }
-        .form-group--select-list .bp3-button {
+        .form-group--select-list .bp4-button {
           padding-left: 6px;
           padding-right: 6px;
 
@@ -97,16 +97,16 @@ const DatatableEditableRoot = styled.div`
           }
         }
         .form-group--select-list,
-        .bp3-form-group {
+        .bp4-form-group {
-          &.bp3-intent-danger {
+          &.bp4-intent-danger {
-            .bp3-button:not(.bp3-minimal),
+            .bp4-button:not(.bp4-minimal),
-            .bp3-input {
+            .bp4-input {
               border-color: #f7b6b6;
             }
           }
         }
         .td.actions {
-          .bp3-button {
+          .bp4-button {
             color: #80858f;
           }
         }

packages/webapp/src/components/Dialog/DialogFooterActions.tsx

@@ -35,7 +35,7 @@ const DialogFooterActionsRoot = styled.div`
   ${(props) =>
     props.alignment === 'right' ? 'margin-left: auto;' : 'margin-right: auto;'};
 
-  .bp3-button {
+  .bp4-button {
     margin-left: 5px;
     margin-left: 5px;
   }

packages/webapp/src/components/DialogsContainer.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import AccountDialog from '@/containers/Dialogs/AccountDialog';
 import InviteUserDialog from '@/containers/Dialogs/InviteUserDialog';
 import UserFormDialog from '@/containers/Dialogs/UserFormDialog';

packages/webapp/src/components/Drawer/DrawerMainTabs.tsx

@@ -17,8 +17,8 @@ export function DrawerMainTabs({ children, ...restProps }) {
 }
 
 const DrawerMainTabsRoot = styled.div`
-  .bp3-tabs {
+  .bp4-tabs {
-    .bp3-tab-list {
+    .bp4-tab-list {
       position: relative;
       background-color: #fff;
       padding: 0 15px;
@@ -28,7 +28,7 @@ const DrawerMainTabsRoot = styled.div`
         margin-right: 25px;
       }
 
-      &.bp3-large > .bp3-tab {
+      &.bp4-large > .bp4-tab {
         font-size: 15px;
         color: #7f8596;
         margin: 0 1rem;
@@ -38,13 +38,13 @@ const DrawerMainTabsRoot = styled.div`
           color: #0052cc;
         }
       }
-      .bp3-tab-indicator-wrapper .bp3-tab-indicator {
+      .bp4-tab-indicator-wrapper .bp4-tab-indicator {
         height: 2px;
         bottom: -2px;
       }
     }
 
-    .bp3-tab-panel {
+    .bp4-tab-panel {
       margin-top: 0;
 
       .card {

packages/webapp/src/components/ExchangeRate/ExchangeRateMutedField.tsx

@@ -60,8 +60,8 @@ export function ExchangeRateMutedField({
 }
 
 const ExchangeRateFormGroup = styled(FormGroup)`
-  &.bp3-form-group {
+  &.bp4-form-group {
-    label.bp3-label {
+    label.bp4-label {
       font-size: 12px;
       opacity: 0.7;
       line-height: 1;
@@ -79,7 +79,7 @@ const ExchangeRateButton = styled.div`
   position: relative;
   padding-right: 28px;
 
-  .bp3-button {
+  .bp4-button {
     position: absolute;
     right: 0;
   }
@@ -88,7 +88,7 @@ const ExchangeRateButton = styled.div`
 const ExchangeRateFormGroupContent = styled.div`
   padding: 5px 0;
 
-  .bp3-form-group {
+  .bp4-form-group {
     padding: 2px;
     margin: 2px 4px !important;
   }

packages/webapp/src/components/Forms/Select.tsx

@@ -26,7 +26,7 @@ const SelectButton = styled(Button)`
   position: relative;
   padding-right: 30px;
 
-  &:not(.is-selected):not([class*='bp3-intent-']):not(.bp3-minimal) {
+  &:not(.is-selected):not([class*='bp4-intent-']):not(.bp4-minimal) {
     color: #5c7080;
   }
   &:after {
@@ -46,13 +46,13 @@ const SelectButton = styled(Button)`
     margin-right: 12px;
     border-radius: 1px;
   }
-  &:not([class*='bp3-intent-']):not(.bp3-disabled) {
+  &:not([class*='bp4-intent-']):not(.bp4-disabled) {
     &,
     &:hover {
       background: #fff;
     }
   }
-  .bp3-intent-danger & {
+  .bp4-intent-danger & {
     border-color: #db3737;
   }
 `;

packages/webapp/src/components/Menu/MenuItemLabel.tsx

@@ -2,5 +2,5 @@
 import React from 'react';
 
 export function MenuItemLabel({ text }) {
-  return <span class="bp3-menu-item-labeler">{text}</span>;
+  return <span class="bp4-menu-item-labeler">{text}</span>;
 }

packages/webapp/src/components/PageForm/FormTopbar.tsx

@@ -18,16 +18,16 @@ const FormTopBarRoot = styled(Navbar)`
   height: 35px;
   padding: 0 20px;
 
-  .bp3-navbar-group {
+  .bp4-navbar-group {
     height: 35px;
   }
-  .bp3-navbar-divider {
+  .bp4-navbar-divider {
     border-left-color: #d2dce2;
   }
-  .bp3-skeleton {
+  .bp4-skeleton {
     max-height: 10px;
   }
-  .bp3-button {
+  .bp4-button {
     &:hover {
       background: rgba(167, 182, 194, 0.12);
       color: #32304a;

packages/webapp/src/components/Utils/For.tsx

@@ -1,5 +1,4 @@
 // @ts-nocheck
-import React from 'react';
 import PropTypes from 'prop-types';
 
 export const For = ({ render, of }) =>

packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalFormFooterLeft.tsx

@@ -22,12 +22,12 @@ export function MakeJournalFormFooterLeft() {
 }
 
 const DescriptionFormGroup = styled(FFormGroup)`
-  &.bp3-form-group {
+  &.bp4-form-group {
-    .bp3-label {
+    .bp4-label {
       font-size: 12px;
       margin-bottom: 12px;
     }
-    .bp3-form-content {
+    .bp4-form-content {
       margin-left: 10px;
     }
   }

packages/webapp/src/containers/Authentication/Login.tsx

@@ -1,5 +1,4 @@
 // @ts-nocheck
-import React from 'react';
 import { Formik } from 'formik';
 import { Link } from 'react-router-dom';
 

packages/webapp/src/containers/Authentication/_components.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import React from 'react';
 import styled from 'styled-components';
 import { Spinner } from '@blueprintjs/core';
@@ -39,7 +40,7 @@ export const AuthInsiderCopyright = styled.div`
   color: #666;
   margin-top: 1.2rem;
 
-  .bp3-icon-bigcapital {
+  .bp4-icon-bigcapital {
     svg {
       path {
         fill: #a3a3a3;
@@ -65,11 +66,11 @@ export const AuthFooterLink = styled.p`
 export const AuthSubmitButton = styled(Button)`
   margin-top: 20px;
 
-  &.bp3-intent-primary {
+  &.bp4-intent-primary {
     background-color: #0052cc;
 
     &:disabled,
-    &.bp3-disabled {
+    &.bp4-disabled {
       background-color: rgba(0, 82, 204, 0.4);
     }
   }

packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsDetailsBar.tsx

@@ -178,7 +178,7 @@ const AccountSwitchItemUpdatedAt = styled.div`
 `;
 
 const AccountSwitchButtonBase = styled(Button)`
-  .bp3-button-text {
+  .bp4-button-text {
     margin-right: 5px;
   }
 `;

packages/webapp/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/utils.tsx

@@ -53,7 +53,7 @@ export const ItemManuTransaction = ({ onChange }) => {
 };
 
 const ItemSwitchButton = styled(Button)`
-  .bp3-button-text {
+  .bp4-button-text {
     display: flex;
     color: #727983;
   }

packages/webapp/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailHeader.tsx

@@ -1,5 +1,4 @@
 // @ts-nocheck
-import React from 'react';
 import intl from 'react-intl-universal';
 import { defaultTo } from 'lodash';
 

packages/webapp/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailTab.tsx

@@ -1,5 +1,4 @@
 // @ts-nocheck
-import React from 'react';
 import styled from 'styled-components';
 
 import { CommercialDocBox } from '@/components';

packages/webapp/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveGLEntriesPanel.tsx

@@ -1,5 +1,4 @@
 // @ts-nocheck
-import React from 'react';
 import styled from 'styled-components';
 
 import { Card } from '@/components';

packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFormFooterLeft.tsx

@@ -20,12 +20,12 @@ export function ExpenseFormFooterLeft() {
   );
 }
 const DescriptionFormGroup = styled(FFormGroup)`
-  &.bp3-form-group {
+  &.bp4-form-group {
-    .bp3-label {
+    .bp4-label {
       font-size: 12px;
       margin-bottom: 12px;
     }
-    .bp3-form-content {
+    .bp4-form-content {
       margin-left: 10px;
     }
   }

packages/webapp/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeader.tsx

@@ -110,7 +110,7 @@ export default compose(
 )(APAgingSummaryHeader);
 
 const APAgingDrawerHeader = styled(FinancialStatementHeader)`
-  .bp3-drawer {
+  .bp4-drawer {
     max-height: 520px;
   }
 `;

packages/webapp/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryActionsBar.tsx

@@ -14,12 +14,11 @@ import classNames from 'classnames';
 
 import NumberFormatDropdown from '@/components/NumberFormatDropdown';
 
-import { safeInvoke } from '@blueprintjs/core/lib/esm/common/utils';
 import { useARAgingSummaryContext } from './ARAgingSummaryProvider';
 import withARAgingSummaryActions from './withARAgingSummaryActions';
 import withARAgingSummary from './withARAgingSummary';
 
-import { compose } from '@/utils';
+import { compose, safeInvoke } from '@/utils';
 
 /**
  * A/R Aging summary sheet - Actions bar.

packages/webapp/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeader.tsx

@@ -116,7 +116,7 @@ export default compose(
 )(ARAgingSummaryHeader);
 
 const ARAgingDrawerHeader = styled(FinancialStatementHeader)`
-  .bp3-drawer {
+  .bp4-drawer {
     max-height: 520px;
   }
 `;

packages/webapp/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeader.tsx

@@ -125,7 +125,7 @@ export default compose(
 )(BalanceSheetHeader);
 
 const BalanceSheetFinancialHeader = styled(FinancialStatementHeader)`
-  .bp3-drawer {
+  .bp4-drawer {
     max-height: 520px;
   }
 `;

packages/webapp/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeaderComparisonPanal.tsx

@@ -159,7 +159,7 @@ export default function BalanceSheetHeaderComparisonPanal() {
 }
 
 const BalanceSheetComparisonWrap = styled.div`
-  .bp3-form-group {
+  .bp4-form-group {
     margin-bottom: 3px;
   }
 `;

packages/webapp/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementGeneralPanel.tsx

@@ -1,6 +1,4 @@
 // @ts-nocheck
-import React from 'react';
-
 import { Row, Col } from '@/components';
 import FinancialStatementDateRange from '../FinancialStatementDateRange';
 import FinancialStatementsFilter from '../FinancialStatementsFilter';

packages/webapp/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementTable.tsx

@@ -44,6 +44,7 @@ export default function CashFlowStatementTable({
         expandable={true}
         expanded={expandedRows}
         expandToggleColumn={1}
+        sticky={true}
         expandColumnSpace={0.8}
         styleName={TableStyle.Constrant}
       />

packages/webapp/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryActionsBar.tsx

@@ -1,5 +1,4 @@
 // @ts-nocheck
-import React from 'react';
 import {
   NavbarGroup,
   Button,

packages/webapp/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryGeneralPanelContent.tsx

@@ -1,5 +1,4 @@
 // @ts-nocheck
-import React from 'react';
 import { FastField } from 'formik';
 import { DateInput } from '@blueprintjs/datetime';
 import { FormGroup, Position, Checkbox } from '@blueprintjs/core';

packages/webapp/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryHeader.tsx

@@ -100,7 +100,7 @@ export default compose(
 )(CustomersBalanceSummaryHeader);
 
 const CustomerBalanceDrawerHeader = styled(FinancialStatementHeader)`
-  .bp3-drawer {
+  .bp4-drawer {
     max-height: 450px;
   }
 `;

packages/webapp/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryTable.tsx

@@ -35,6 +35,7 @@ export default function CustomersBalanceSummaryTable({
         data={table.data}
         rowClassNames={tableRowTypesToClassnames}
         noInitialFetch={true}
+        sticky={true}
         styleName={TableStyle.Constrant}
       />
     </FinancialSheet>

packages/webapp/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsHeader.tsx

@@ -101,7 +101,7 @@ export default compose(
 )(CustomersTransactionsHeader);
 
 const CustomerTransactionsDrawerHeader = styled(FinancialStatementHeader)`
-  .bp3-drawer {
+  .bp4-drawer {
     max-height: 450px;
   }
 `;

packages/webapp/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsTable.tsx

@@ -47,6 +47,7 @@ export default function CustomersTransactionsTable({
         noInitialFetch={true}
         expandable={true}
         expanded={expandedRows}
+        sticky={true}
         expandToggleColumn={1}
         expandColumnSpace={0.8}
         styleName={TableStyle.Constrant}

packages/webapp/src/containers/FinancialStatements/FinancialStatementsFilter.tsx

@@ -47,7 +47,7 @@ export default function FinancialStatementsFilter({
       {({ form: { setFieldValue }, field: { value } }) => (
         <FormGroup
           label={label}
-          className="form-group--select-list bp3-fill"
+          className="form-group--select-list bp4-fill"
           inline={false}
         >
           <ListSelect

packages/webapp/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeader.tsx

@@ -120,7 +120,7 @@ export default compose(
 )(GeneralLedgerHeader);
 
 const GeneralLedgerDrawerHeader = styled(FinancialStatementHeader)`
-  .bp3-drawer {
+  .bp4-drawer {
     max-height: 520px;
   }
 `;

packages/webapp/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsHeader.tsx

@@ -119,7 +119,7 @@ export default compose(
 )(InventoryItemDetailsHeader);
 
 const InventoryItemDetailsDrawerHeader = styled(FinancialStatementHeader)`
-  .bp3-drawer {
+  .bp4-drawer {
     max-height: 400px;
   }
 `;

packages/webapp/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsTable.tsx

@@ -48,6 +48,7 @@ export function InventoryItemDetailsTable({
         expanded={expandedRows}
         expandToggleColumn={1}
         expandColumnSpace={0.8}
+        sticky={true}
         styleName={TableStyle.Constrant}
       />
     </FinancialSheet>

packages/webapp/src/containers/FinancialStatements/InventoryValuation/InventoryValuationHeader.tsx

@@ -117,7 +117,7 @@ export default compose(
 )(InventoryValuationHeader);
 
 const InventoryValuationDrawerHeader = styled(FinancialStatementHeader)`
-  .bp3-drawer {
+  .bp4-drawer {
     max-height: 450px;
   }
 `;

packages/webapp/src/containers/FinancialStatements/Journal/JournalHeader.tsx

@@ -98,7 +98,7 @@ export default compose(
 )(JournalHeader);
 
 const JournalDrawerHeader = styled(FinancialStatementHeader)`
-  .bp3-drawer {
+  .bp4-drawer {
     max-height: 350px;
   }
 `;

packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeader.tsx

@@ -114,7 +114,7 @@ export default R.compose(
 )(ProfitLossHeader);
 
 const ProfitLossSheetHeader = styled(FinancialStatementHeader)`
-  .bp3-drawer {
+  .bp4-drawer {
     max-height: 520px;
   }
 `;

packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeaderComparisonPanel.tsx

@@ -191,7 +191,7 @@ export default function ProfitLossSheetHeaderComparisonPanel() {
 }
 
 const ProfitLossSheetComparisonWrap = styled.div`
-  .bp3-form-group {
+  .bp4-form-group {
     margin-bottom: 3px;
   }
 `;

packages/webapp/src/containers/FinancialStatements/ProjectProfitabilitySummary/ProjectProfitabilitySummaryHeader.tsx

@@ -109,7 +109,7 @@ export default compose(
 )(ProjectProfitabilitySummaryHeader);
 
 const ProjectProfitabilityDrawerHeader = styled(FinancialStatementHeader)`
-  .bp3-drawer {
+  .bp4-drawer {
     max-height: 520px;
   }
 `;

packages/webapp/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsHeader.tsx

@@ -98,7 +98,7 @@ export default compose(
 )(PurchasesByItemsHeader);
 
 const PurchasesByItemsDrawerHeader = styled(FinancialStatementHeader)`
-  .bp3-drawer {
+  .bp4-drawer {
     max-height: 450px;
   }
 `;

packages/webapp/src/containers/FinancialStatements/SalesByItems/SalesByItemsHeader.tsx

@@ -105,7 +105,7 @@ export default compose(
 )(SalesByItemsHeader);
 
 const SalesByItemsDrawerHeader = styled(FinancialStatementHeader)`
-  .bp3-drawer {
+  .bp4-drawer {
     max-height: 450px;
   }
 `;

packages/webapp/src/containers/FinancialStatements/SalesTaxLiabilitySummary/SalesTaxLiabilitySummaryHeader.tsx

@@ -108,7 +108,7 @@ export default compose(
 )(SalesTaxLiabilitySummaryHeader);
 
 const SalesTaxSummaryFinancialHeader = styled(FinancialStatementHeader)`
-  .bp3-drawer {
+  .bp4-drawer {
     max-height: 320px;
   }
 `;

packages/webapp/src/containers/FinancialStatements/SelectDisplayColumnsBy.tsx

@@ -18,7 +18,7 @@ export default function SelectsListColumnsBy(props) {
           {({ form, field: { value }, meta: { error, touched } }) => (
             <FormGroup
               label={<T id={'display_report_columns'} />}
-              className="form-group-display-columns-by form-group--select-list bp3-fill"
+              className="form-group-display-columns-by form-group--select-list bp4-fill"
               inline={false}
               {...formGroupProps}
             >

packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeader.tsx

@@ -127,7 +127,7 @@ export default compose(
 )(TrialBalanceSheetHeader);
 
 const TrialBalanceSheetDrawerHeader = styled(FinancialStatementHeader)`
-  .bp3-drawer {
+  .bp4-drawer {
     max-height: 450px;
   }
 `;

packages/webapp/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryHeader.tsx

@@ -102,7 +102,7 @@ export default compose(
 )(VendorsBalanceSummaryHeader);
 
 const VendorBalanceDrawerHeader = styled(FinancialStatementHeader)`
-  .bp3-drawer {
+  .bp4-drawer {
     max-height: 450px;
   }
 `;

packages/webapp/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryTable.tsx

@@ -34,6 +34,7 @@ export default function VendorsBalanceSummaryTable({
         data={table.data}
         rowClassNames={tableRowTypesToClassnames}
         noInitialFetch={true}
+        sticky={true}
         styleName={TableStyle.Constrant}
       />
     </VendorBalanceFinancialSheet>

packages/webapp/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsTable.tsx

@@ -53,6 +53,7 @@ export default function VendorsTransactionsTable({
         expanded={expandedRows}
         expandToggleColumn={1}
         expandColumnSpace={0.8}
+        sticky={true}
         styleName={TableStyle.Constrant}
       />
     </FinancialSheet>

packages/webapp/src/containers/ItemsCategories/ItemsCategoryActionsBar.tsx

@@ -1,5 +1,4 @@
 // @ts-nocheck
-import React from 'react';
 import {
   NavbarGroup,
   NavbarDivider,

packages/webapp/src/containers/Preferences/Branches/BranchesDataTable.tsx

@@ -87,7 +87,7 @@ const BranchesTable = styled(DataTable)`
     min-height: 38px;
 
     .td.td-name {
-      .bp3-icon {
+      .bp4-icon {
         margin: 0;
         margin-left: 2px;
         vertical-align: top;

packages/webapp/src/containers/Preferences/General/GeneralForm.tsx

@@ -221,10 +221,10 @@ const CardFooterActions = styled.div`
   border-top: 1px solid #e0e7ea;
   margin-top: 30px;
 
-  .bp3-button {
+  .bp4-button {
     min-width: 70px;
 
-    + .bp3-button {
+    + .bp4-button {
       margin-left: 10px;
     }
   }

packages/webapp/src/containers/Preferences/PreferencesPageLoader.tsx

@@ -1,5 +1,4 @@
 // @ts-nocheck
-import React from 'react';
 import ContentLoader from 'react-content-loader';
 
 export default function PreferencesPageLoader(props) {

packages/webapp/src/containers/Preferences/Users/Roles/RolesForm/RoleFormFloatingActions.tsx

@@ -49,7 +49,7 @@ const RoleFormFloatingActionsRoot = styled.div`
   border-top: 1px solid #d2dde2;
   box-shadow: 0px -1px 4px 0px rgb(0 0 0 / 5%);
 
-  .bp3-button {
+  .bp4-button {
     margin-right: 10px;
   }
 `;

packages/webapp/src/containers/Preferences/Users/Roles/RolesForm/components.tsx

@@ -374,7 +374,7 @@ export const RolesPermissionList = () => {
 };
 
 const PermissionCheckbox = styled(Checkbox)`
-  &.bp3-control.bp3-checkbox .bp3-control-indicator {
+  &.bp4-control.bp4-checkbox .bp4-control-indicator {
     border-radius: 2px;
     border-color: #555;
 
@@ -454,7 +454,7 @@ const ModulePermissionsTableRoot = styled.table`
     }
 
     tr td {
-      .bp3-control.bp3-inline {
+      .bp4-control.bp4-inline {
         margin: 0;
       }
 

packages/webapp/src/containers/Preferences/Warehouses/components.tsx

@@ -150,7 +150,7 @@ export const WarehouseTitle = styled.div`
   font-weight: 500;
   line-height: 1;
 
-  .bp3-icon {
+  .bp4-icon {
     margin: 0;
     margin-left: 2px;
     vertical-align: top;

packages/webapp/src/containers/Projects/containers/EstimatedExpenseFormDialog/index.tsx

@@ -40,17 +40,17 @@ function EstimatedExpenseFormDialog({
 export default compose(withDialogRedux())(EstimatedExpenseFormDialog);
 
 const EstimateExpenseFormDialogRoot = styled(Dialog)`
-  .bp3-dialog-body {
+  .bp4-dialog-body {
-    .bp3-form-group {
+    .bp4-form-group {
       margin-bottom: 15px;
 
-      label.bp3-label {
+      label.bp4-label {
         margin-bottom: 3px;
         font-size: 13px;
       }
     }
   }
-  .bp3-dialog-footer {
+  .bp4-dialog-footer {
     padding-top: 10px;
   }
 `;

packages/webapp/src/containers/Projects/containers/ProjectBillableEntriesFormDialog/ProjectBillableEntriesFormFloatingActions.tsx

@@ -48,7 +48,7 @@ function ProjectEntriesFormFloatingActions({
 export default compose(withDialogActions)(ProjectEntriesFormFloatingActions);
 
 const SaveButton = styled(Button)`
-  &.bp3-button {
+  &.bp4-button {
     margin-left: 0px;
   }
 `;

packages/webapp/src/containers/Projects/containers/ProjectBillableEntriesFormDialog/components.tsx

@@ -102,8 +102,8 @@ const BillableEntryFooter = styled.div`
 `;
 
 const BillableEntryButton = styled(Button)`
-  &.bp3-button.bp3-small,
+  &.bp4-button.bp4-small,
-  &.bp3-button:not([class*='bp3-intent-']):not(.bp3-minimal).bp3-small {
+  &.bp4-button:not([class*='bp4-intent-']):not(.bp4-minimal).bp4-small {
     font-size: 12px;
     color: #2172ed;
     background: transparent;

packages/webapp/src/containers/Projects/containers/ProjectBillableEntriesFormDialog/index.tsx

@@ -41,18 +41,18 @@ function ProjectBillableEntriesFormDialog({
 export default compose(withDialogRedux())(ProjectBillableEntriesFormDialog);
 
 const ProjectBillableEntriesFormDialogRoot = styled(Dialog)`
-  .bp3-dialog-body {
+  .bp4-dialog-body {
-    .bp3-form-group {
+    .bp4-form-group {
       margin-bottom: 15px;
 
-      label.bp3-label {
+      label.bp4-label {
         margin-bottom: 3px;
         font-size: 13px;
       }
     }
   }
-  .bp3-dialog-footer {
+  .bp4-dialog-footer {
-    .bp3-dialog-footer-actions {
+    .bp4-dialog-footer-actions {
       display: flex;
       justify-content: flex-start;
     }

packages/webapp/src/containers/Projects/containers/ProjectDetails/ProjectDetailTabs.tsx

@@ -48,8 +48,8 @@ export default function ProjectDetailTabs() {
 }
 
 const ProjectTabsContent = styled.div`
-  .bp3-tabs {
+  .bp4-tabs {
-    .bp3-tab-list {
+    .bp4-tab-list {
       padding: 0 20px;
       background-color: #fff;
       border-bottom: 1px solid #d2dce2;
@@ -58,7 +58,7 @@ const ProjectTabsContent = styled.div`
         margin-right: 0;
       }
 
-      &.bp3-large > .bp3-tab {
+      &.bp4-large > .bp4-tab {
         font-size: 15px;
         font-weight: 400;
         color: #7f8596;
@@ -69,12 +69,12 @@ const ProjectTabsContent = styled.div`
           color: #0052cc;
         }
       }
-      .bp3-tab-indicator-wrapper .bp3-tab-indicator {
+      .bp4-tab-indicator-wrapper .bp4-tab-indicator {
         height: 2px;
         bottom: -2px;
       }
     }
-    .bp3-tab-panel {
+    .bp4-tab-panel {
       /* margin: 20px 32px; */
       /* margin: 20px; */
       /* margin-top: 20px;

packages/webapp/src/containers/Projects/containers/ProjectDetails/ProjectTasks/components.tsx

@@ -109,13 +109,13 @@ const TaskTimeFull = styled.div`
 `;
 
 const TaskProgressBar = styled(ProgressBar)`
-  &.bp3-progress-bar {
+  &.bp4-progress-bar {
     display: block;
     flex-shrink: 0;
     height: 4px;
     max-width: 150px;
     &,
-    .bp3-progress-meter {
+    .bp4-progress-meter {
       border-radius: 4px;
     }
   }

packages/webapp/src/containers/Projects/containers/ProjectDetails/components/FinancialSection.tsx

@@ -76,10 +76,10 @@ export const FinancialCardText = styled.div`
   color: #7b8195;
 `;
 export const FinancialCardProgressBar = styled(ProgressBar)`
-  &.bp3-progress-bar {
+  &.bp4-progress-bar {
     height: 3px;
     &,
-    .bp3-progress-meter {
+    .bp4-progress-meter {
       border-radius: 0;
     }
   }

packages/webapp/src/containers/Projects/containers/ProjectExpenseForm/index.tsx

@@ -40,17 +40,17 @@ function ProjectExpenseFormDialog({
 export default compose(withDialogRedux())(ProjectExpenseFormDialog);
 
 const ProjectExpenseFormDialogRoot = styled(Dialog)`
-  .bp3-dialog-body {
+  .bp4-dialog-body {
-    .bp3-form-group {
+    .bp4-form-group {
       margin-bottom: 15px;
 
-      label.bp3-label {
+      label.bp4-label {
         margin-bottom: 3px;
         font-size: 13px;
       }
     }
   }
-  .bp3-dialog-footer {
+  .bp4-dialog-footer {
     padding-top: 10px;
   }
 `;

packages/webapp/src/containers/Projects/containers/ProjectFormDialog/index.tsx

@@ -43,17 +43,17 @@ function ProjectFormDialog({
 export default compose(withDialogRedux())(ProjectFormDialog);
 
 const ProjectFormDialogRoot = styled(Dialog)`
-  .bp3-dialog-body {
+  .bp4-dialog-body {
-    .bp3-form-group {
+    .bp4-form-group {
       margin-bottom: 0;
 
-      label.bp3-label {
+      label.bp4-label {
         margin-bottom: 3px;
         font-size: 13px;
       }
     }
   }
-  .bp3-dialog-footer {
+  .bp4-dialog-footer {
     padding-top: 10px;
   }
 `;

packages/webapp/src/containers/Projects/containers/ProjectInvoicingFormDialog/index.tsx

@@ -34,22 +34,22 @@ function ProjectInvoicingFormDialog({ dialogName, payload: {}, isOpen }) {
 export default compose(withDialogRedux())(ProjectInvoicingFormDialog);
 
 const ProjectInvoicingFormDialogRoot = styled(Dialog)`
-  .bp3-dialog-body {
+  .bp4-dialog-body {
-    .bp3-form-group {
+    .bp4-form-group {
       margin-bottom: 15px;
       margin-top: 15px;
 
-      label.bp3-label {
+      label.bp4-label {
         margin-bottom: 3px;
         font-size: 13px;
       }
     }
 
-    label.bp3-control.bp3-checkbox {
+    label.bp4-control.bp4-checkbox {
       margin-top: 15px;
     }
   }
-  .bp3-dialog-footer {
+  .bp4-dialog-footer {
     padding-top: 10px;
   }
 `;

packages/webapp/src/containers/Projects/containers/ProjectTimeEntryFormDialog/ProjectTimeEntryFormFields.tsx

@@ -113,7 +113,7 @@ function ProjectTimeEntryFormFields() {
 export default ProjectTimeEntryFormFields;
 
 const DurationInputGroup = styled(FInputGroup)`
-  .bp3-input {
+  .bp4-input {
     width: 150px;
   }
 `;

packages/webapp/src/containers/Projects/containers/ProjectTimeEntryFormDialog/index.tsx

@@ -47,18 +47,18 @@ function ProjectTimeEntryFormDialog({
 export default compose(withDialogRedux())(ProjectTimeEntryFormDialog);
 
 const ProjectTimeEntryFormDialogRoot = styled(Dialog)`
-  .bp3-dialog-body {
+  .bp4-dialog-body {
-    .bp3-form-group {
+    .bp4-form-group {
       margin-bottom: 0;
 
-      label.bp3-label {
+      label.bp4-label {
         margin-bottom: 3px;
         font-size: 13px;
       }
     }
     .form-group {
       &--description {
-        .bp3-form-content {
+        .bp4-form-content {
           textarea {
             width: 100%;
             min-width: 100%;
@@ -68,7 +68,7 @@ const ProjectTimeEntryFormDialogRoot = styled(Dialog)`
       }
     }
   }
-  .bp3-dialog-footer {
+  .bp4-dialog-footer {
     padding-top: 10px;
   }
 `;

packages/webapp/src/containers/Projects/containers/ProjectsLanding/components.tsx

@@ -195,13 +195,13 @@ const ProjectStatusTaskAmount = styled.div`
 `;
 
 const ProjectProgressBar = styled(ProgressBar)`
-  &.bp3-progress-bar {
+  &.bp4-progress-bar {
     display: block;
     flex-shrink: 0;
     height: 3px;
     max-width: 110px;
     &,
-    .bp3-progress-meter {
+    .bp4-progress-meter {
       border-radius: 0;
     }
   }

packages/webapp/src/containers/Purchases/Bills/BillForm/BillFormFooterLeft.tsx

@@ -22,12 +22,12 @@ export function BillFormFooterLeft() {
 }
 
 const TermsConditsFormGroup = styled(FFormGroup)`
-  &.bp3-form-group {
+  &.bp4-form-group {
-    .bp3-label {
+    .bp4-label {
       font-size: 12px;
       margin-bottom: 12px;
     }
-    .bp3-form-content {
+    .bp4-form-content {
       margin-left: 10px;
     }
   }

packages/webapp/src/containers/Purchases/Bills/BillUniversalSearch.tsx

@@ -88,7 +88,7 @@ export function BillUniversalSearchItem(
       text={
         <div>
           <div>{item.text}</div>
-          <span class="bp3-text-muted">
+          <span class="bp4-text-muted">
             {item.reference.bill_number}{' '}
             <Icon icon={'caret-right-16'} iconSize={16} />
             {item.reference.formatted_bill_date}

packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormFooterLeft.tsx

@@ -22,12 +22,12 @@ export function VendorCreditNoteFormFooterLeft() {
 }
 
 const TermsConditsFormGroup = styled(FFormGroup)`
-  &.bp3-form-group {
+  &.bp4-form-group {
-    .bp3-label {
+    .bp4-label {
       font-size: 12px;
       margin-bottom: 12px;
     }
-    .bp3-form-content {
+    .bp4-form-content {
       margin-left: 10px;
     }
   }

packages/webapp/src/containers/Purchases/CreditNotes/VendorCreditIUniversalSearchBind.tsx

@@ -74,7 +74,7 @@ export function VendorCreditUniversalSearchItem(
       text={
         <div>
           <div>{item.text}</div>
-          <span class="bp3-text-muted">
+          <span class="bp4-text-muted">
             {item.reference.vendor_credit_number}{' '}
             <Icon icon={'caret-right-16'} iconSize={16} />
             {item.reference.formatted_vendor_credit_date}

packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormFooterLeft.tsx

@@ -28,14 +28,14 @@ export function PaymentMadeFormFooterLeft() {
 }
 
 const InternalNoteFormGroup = styled(FFormGroup)`
-  &.bp3-form-group {
+  &.bp4-form-group {
     margin-bottom: 40px;
 
-    .bp3-label {
+    .bp4-label {
       font-size: 12px;
       margin-bottom: 12px;
     }
-    .bp3-form-content {
+    .bp4-form-content {
       margin-left: 10px;
     }
   }

packages/webapp/src/containers/Purchases/PaymentMades/PaymentMadeUniversalSearch.tsx

@@ -44,7 +44,7 @@ export function PaymentMadeUniversalSearchItem(
         <div>
           <div>{highlightText(text, query)}</div>
 
-          <span class="bp3-text-muted">
+          <span class="bp4-text-muted">
             {reference.payment_number && (
               <>
                 {highlightText(reference.payment_number, query)}

packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormFooterLeft.tsx

@@ -34,26 +34,26 @@ export function CreditNoteFormFooterLeft() {
 }
 
 const CreditNoteMsgFormGroup = styled(FFormGroup)`
-  &.bp3-form-group {
+  &.bp4-form-group {
     margin-bottom: 40px;
 
-    .bp3-label {
+    .bp4-label {
       font-size: 12px;
       margin-bottom: 12px;
     }
-    .bp3-form-content {
+    .bp4-form-content {
       margin-left: 10px;
     }
   }
 `;
 
 const TermsConditsFormGroup = styled(FFormGroup)`
-  &.bp3-form-group {
+  &.bp4-form-group {
-    .bp3-label {
+    .bp4-label {
       font-size: 12px;
       margin-bottom: 12px;
     }
-    .bp3-form-content {
+    .bp4-form-content {
       margin-left: 10px;
     }
   }

packages/webapp/src/containers/Sales/CreditNotes/CreditNoteUniversalSearch.tsx

@@ -73,7 +73,7 @@ export function CreditNoteUniversalSearchItem(
       text={
         <div>
           <div>{item.text}</div>
-          <span class="bp3-text-muted">
+          <span class="bp4-text-muted">
             {item.reference.credit_note_number}{' '}
             <Icon icon={'caret-right-16'} iconSize={16} />
             {item.reference.formatted_credit_note_date}

packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormFooterLeft.tsx

@@ -34,26 +34,26 @@ export function EstimateFormFooterLeft() {
 }
 
 const EstimateMsgFormGroup = styled(FFormGroup)`
-  &.bp3-form-group {
+  &.bp4-form-group {
     margin-bottom: 40px;
 
-    .bp3-label {
+    .bp4-label {
       font-size: 12px;
       margin-bottom: 12px;
     }
-    .bp3-form-content {
+    .bp4-form-content {
       margin-left: 10px;
     }
   }
 `;
 
 const TermsConditsFormGroup = styled(FFormGroup)`
-  &.bp3-form-group {
+  &.bp4-form-group {
-    .bp3-label {
+    .bp4-label {
       font-size: 12px;
       margin-bottom: 12px;
     }
-    .bp3-form-content {
+    .bp4-form-content {
       margin-left: 10px;
     }
   }

packages/webapp/src/containers/Sales/Estimates/EstimatesLanding/EstimateUniversalSearch.tsx

@@ -76,7 +76,7 @@ export function EstimateUniversalSearchItem(
       text={
         <div>
           <div>{item.text}</div>
-          <span class="bp3-text-muted">
+          <span class="bp4-text-muted">
             {item.reference.estimate_number}{' '}
             <Icon icon={'caret-right-16'} iconSize={16} />
             {item.reference.formatted_estimate_date}

packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormActions.tsx

@@ -60,7 +60,7 @@ const InclusiveFormGroup = styled(FFormGroup)`
   margin-bottom: 0;
   margin-left: auto;
 
-  &.bp3-form-group.bp3-inline label.bp3-label {
+  &.bp4-form-group.bp4-inline label.bp4-label {
     line-height: 1.25;
     opacity: 0.6;
     margin-right: 8px;
@@ -68,7 +68,7 @@ const InclusiveFormGroup = styled(FFormGroup)`
 `;
 
 const InclusiveSelect = styled(FSelect)`
-  .bp3-button {
+  .bp4-button {
     padding-right: 24px;
   }
 `;