chore: update mysql docker container restart policy

fix(webapp): show loading message of cost computing job on financial reports

.all-contributorsrc

@@ -0,0 +1,53 @@
+{
+  "files": [
+    "README.md"
+  ],
+  "imageSize": 100,
+  "commit": false,
+  "commitType": "docs",
+  "commitConvention": "angular",
+  "contributors": [
+    {
+      "login": "abouolia",
+      "name": "Ahmed Bouhuolia",
+      "avatar_url": "https://avatars.githubusercontent.com/u/2197422?v=4",
+      "profile": "https://github.com/abouolia",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "ameir",
+      "name": "Ameir Abdeldayem",
+      "avatar_url": "https://avatars.githubusercontent.com/u/374330?v=4",
+      "profile": "http://ameir.net",
+      "contributions": [
+        "bug"
+      ]
+    },
+    {
+      "login": "elforjani13",
+      "name": "ElforJani13",
+      "avatar_url": "https://avatars.githubusercontent.com/u/39470382?v=4",
+      "profile": "https://github.com/elforjani13",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "scheibling",
+      "name": "Lars Scheibling",
+      "avatar_url": "https://avatars.githubusercontent.com/u/24367830?v=4",
+      "profile": "https://scheibling.se",
+      "contributions": [
+        "bug"
+      ]
+    }
+  ],
+  "contributorsPerLine": 7,
+  "skipCi": true,
+  "repoType": "github",
+  "repoHost": "https://github.com",
+  "projectName": "bigcapital",
+  "projectOwner": "bigcapitalhq"
+}

CHANGELOG.md

@@ -2,6 +2,18 @@
 
 All notable changes to Bigcapital server-side will be in this file.
 
+# [0.9.9] - 28-06-2023
+
+* refactor: Customer and vendor select component by @abouolia in https://github.com/bigcapitalhq/bigcapital/pull/171
+* chore: Move auto-increment components in separate files by @abouolia in https://github.com/bigcapitalhq/bigcapital/pull/170
+* fix: Style of quick item drawer by @abouolia in https://github.com/bigcapitalhq/bigcapital/pull/173
+* fix: Should not show the form before loading account by @abouolia in https://github.com/bigcapitalhq/bigcapital/pull/172
+* fix: Payment made form does not handle not unique number an e… by @abouolia in https://github.com/bigcapitalhq/bigcapital/pull/177
+* fix: Internal note of invoice/bill payment does not saving by @abouolia in https://github.com/bigcapitalhq/bigcapital/pull/181
+* fix: Storing cash flow transaction description by @abouolia in https://github.com/bigcapitalhq/bigcapital/pull/180
+* fix: No currency in amount field on money in/out dialogs by @abouolia in https://github.com/bigcapitalhq/bigcapital/pull/179
+* fix: No default branch for customer/vendor opening balance branch by @abouolia in https://github.com/bigcapitalhq/bigcapital/pull/182
+
 # [0.9.8] - 19-06-2023
 
 `bigcapitalhq/webapp`

README.md

@@ -47,3 +47,38 @@ Bigcapital is a smart and open-source accounting and inventory software, Bigcapi
 # Changelog
 
 Please see [Releases](https://github.com/bigcapitalhq/bigcapital/releases) for more information what has changed recently.
+
+# Recognition
+
+<a href="https://news.ycombinator.com/item?id=36118990">
+  <img
+    style="width: 250px; height: 54px;" width="250" height="54"
+    alt="Featured on Hacker News"
+    src="https://hackernews-badge.vercel.app/api?id=36118990"
+  />
+</a>
+
+# Contributors
+
+Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
+
+<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
+<!-- prettier-ignore-start -->
+<!-- markdownlint-disable -->
+<table>
+  <tbody>
+    <tr>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/abouolia"><img src="https://avatars.githubusercontent.com/u/2197422?v=4?s=100" width="100px;" alt="Ahmed Bouhuolia"/><br /><sub><b>Ahmed Bouhuolia</b></sub></a><br /><a href="https://github.com/bigcapitalhq/bigcapital/commits?author=abouolia" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/elforjani13"><img src="https://avatars.githubusercontent.com/u/39470382?v=4?s=100" width="100px;" alt="ElforJani13"/><br /><sub><b>ElforJani13</b></sub></a><br /><a href="https://github.com/bigcapitalhq/bigcapital/commits?author=elforjani13" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="http://ameir.net"><img src="https://avatars.githubusercontent.com/u/374330?v=4?s=100" width="100px;" alt="Ameir Abdeldayem"/><br /><sub><b>Ameir Abdeldayem</b></sub></a><br /><a href="https://github.com/bigcapitalhq/bigcapital/issues?q=author%3Aameir" title="Bug reports">🐛</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://scheibling.se"><img src="https://avatars.githubusercontent.com/u/24367830?v=4?s=100" width="100px;" alt="Lars Scheibling"/><br /><sub><b>Lars Scheibling</b></sub></a><br /><a href="https://github.com/bigcapitalhq/bigcapital/issues?q=author%3Ascheibling" title="Bug reports">🐛</a></td>
+    </tr>
+  </tbody>
+</table>
+
+<!-- markdownlint-restore -->
+<!-- prettier-ignore-end -->
+
+<!-- ALL-CONTRIBUTORS-LIST:END -->
+
+This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

docker-compose.prod.yml

@@ -21,10 +21,16 @@ services:
     depends_on:
       - server
       - webapp
+    deploy:
+      restart_policy:
+        condition: unless-stopped
 
   webapp:
     container_name: bigcapital-webapp
     image: ghcr.io/bigcapitalhq/webapp:latest
+    deploy:
+      restart_policy:
+        condition: unless-stopped
 
   server:
     container_name: bigcapital-server
@@ -37,6 +43,9 @@ services:
       - mysql
       - mongo
       - redis
+    deploy:
+      restart_policy:
+        condition: unless-stopped
     environment:
       # Mail
       - MAIL_HOST=${MAIL_HOST}
@@ -93,6 +102,9 @@ services:
 
   mysql:
     container_name: bigcapital-mysql
+    deploy:
+      restart_policy:
+        condition: unless-stopped
     build:
       context: ./docker/mariadb
     environment:
@@ -106,7 +118,10 @@ services:
       - '3306'
 
   mongo:
-    container_name: bigcapital-mongo 
+    container_name: bigcapital-mongo
+    deploy:
+      restart_policy:
+        condition: unless-stopped
     build: ./docker/mongo
     expose:
       - '27017'
@@ -115,6 +130,9 @@ services:
 
   redis:
     container_name: bigcapital-redis
+    deploy:
+      restart_policy:
+        condition: unless-stopped
     build:
       context: ./docker/redis
     expose:

docker-compose.yml

@@ -20,6 +20,9 @@ services:
       - '3306'
     ports:
       - '3306:3306'
+    deploy:
+      restart_policy:
+        condition: unless-stopped
 
   mongo:
     build: ./docker/mongo
@@ -29,6 +32,9 @@ services:
       - mongo:/var/lib/mongodb
     ports:
       - '27017:27017'
+    deploy:
+      restart_policy:
+        condition: unless-stopped
 
   redis:
     build:
@@ -37,6 +43,9 @@ services:
       - "6379"
     volumes:
       - redis:/data
+    deploy:
+      restart_policy:
+        condition: unless-stopped
 
 # Volumes
 volumes:

e2e/_utils.ts

@@ -0,0 +1,13 @@
+import { Page } from '@playwright/test';
+
+export const clearLocalStorage = (page: Page) => {
+  return page.evaluate(`window.localStorage.clear()`);
+};
+
+export const defaultPageConfig = () => {
+  return {
+    extraHTTPHeaders: {
+      'ngrok-skip-browser-warning': 'any-value',
+    },
+  };
+};

e2e/authentication.spec.ts

@@ -1,14 +1,23 @@
 import { test, expect, Page } from '@playwright/test';
+import { faker } from '@faker-js/faker';
+import { clearLocalStorage, defaultPageConfig } from './_utils';
 
 let authPage: Page;
 
 test.describe('authentication', () => {
   test.beforeAll(async ({ browser }) => {
-    authPage = await browser.newPage();
+    authPage = await browser.newPage({ ...defaultPageConfig() });
+  });
+  test.afterAll(async () => {
+    await authPage.close();
+  });
+  test.afterEach(async ({ context }) => {
+    context.clearCookies();
+    await clearLocalStorage(authPage);
   });
 
   test.describe('login', () => {
-    test.beforeAll(async () => {
+    test.beforeEach(async () => {
       await authPage.goto('/auth/login');
     });
     test('should show the login page.', async () => {
@@ -30,10 +39,23 @@ test.describe('authentication', () => {
       await authPage.getByRole('link', { name: 'Sign up' }).click();
       await expect(authPage.url()).toContain('/auth/register');
     });
+    test('should the email or password is not correct.', async () => {
+      await authPage.getByLabel('Email Address').click();
+      await authPage.getByLabel('Email Address').fill(faker.internet.email());
+
+      await authPage.getByLabel('Password').click();
+      await authPage.getByLabel('Password').fill(faker.internet.password());
+
+      await authPage.getByRole('button', { name: 'Log in' }).click();
+
+      await expect(authPage.locator('body')).toContainText(
+        'The email and password you entered did not match our records.'
+      );
+    });
   });
 
   test.describe('register', () => {
-    test.beforeAll(async () => {
+    test.beforeEach(async () => {
       await authPage.goto('/auth/register');
     });
     test('should first name, last name, email and password be required.', async () => {
@@ -52,10 +74,36 @@ test.describe('authentication', () => {
         'Password is a required field'
       );
     });
+    test('should signup successfully.', async () => {
+      const form = authPage.locator('form');
+      await form.getByLabel('First Name').click();
+      await form.getByLabel('First Name').fill(faker.person.firstName());
+
+      await form.getByLabel('Email').click();
+      await form.getByLabel('Email').fill(faker.internet.email());
+
+      await form.getByLabel('Last Name').click();
+      await form.getByLabel('Last Name').fill(faker.person.lastName());
+
+      await form.getByLabel('Password').click();
+      await form.getByLabel('Password').fill(faker.internet.password());
+
+      await authPage.getByRole('button', { name: 'Register' }).click();
+
+      await expect(authPage.locator('h1')).toContainText(
+        'Register a New Organization now!'
+      );
+    });
   });
 
   test.describe('reset password', () => {
-    test.beforeAll(async () => {
+    test.beforeAll(async ({ browser }) => {
+      authPage = await browser.newPage({ ...defaultPageConfig() });
+    });
+    test.afterAll(async () => {
+      await authPage.close();
+    });
+    test.beforeEach(async () => {
       await authPage.goto('/auth/send_reset_password');
     });
     test('should email be required.', async () => {

e2e/onboarding.spec.ts

@@ -0,0 +1,86 @@
+import { test, expect, Page } from '@playwright/test';
+import { faker } from '@faker-js/faker';
+import { defaultPageConfig } from './_utils';
+
+let authPage: Page;
+let businessLegalName: string = faker.company.name();
+
+test.describe('onboarding', () => {
+  test.beforeAll(async ({ browser }) => {
+    authPage = await browser.newPage({ ...defaultPageConfig() });
+    await authPage.goto('/auth/register');
+
+    const form = authPage.locator('form');
+
+    await form.getByLabel('First Name').fill(faker.person.firstName());
+    await form.getByLabel('Email').fill(faker.internet.email());
+    await form.getByLabel('Last Name').fill(faker.person.lastName());
+    await form.getByLabel('Password').fill(faker.internet.password());
+
+    await authPage.getByRole('button', { name: 'Register' }).click();
+  });
+  test('should validation catch all required fields', async () => {
+    const form = authPage.locator('form');
+
+    await authPage.getByRole('button', { name: 'Save & Continue' }).click();
+
+    await expect(form).toContainText('Organization name is a required field');
+    await expect(form).toContainText('Location is a required field');
+    await expect(form).toContainText('Base currency is a required field');
+    await expect(form).toContainText('Fiscal year is a required field');
+    await expect(form).toContainText('Time zone is a required field');
+  });
+  test.describe('after onboarding', () => {
+    test.beforeAll(async () => {
+      await authPage.getByLabel('Legal Organization Name').click();
+      await authPage
+        .getByLabel('Legal Organization Name')
+        .fill(businessLegalName);
+
+      // Fill Business Location.
+      await authPage
+        .getByRole('button', { name: 'Select Business Location...' })
+        .click();
+      await authPage.locator('a').filter({ hasText: 'Albania' }).click();
+
+      // Fill Base Currency.
+      await authPage
+        .getByRole('button', { name: 'Select Base Currency...' })
+        .click();
+      await authPage
+        .locator('a')
+        .filter({ hasText: 'AED - United Arab Emirates Dirham' })
+        .click();
+
+      // Fill Fasical Year.
+      await authPage
+        .getByRole('button', { name: 'Select Fiscal Year...' })
+        .click();
+      await authPage.locator('a').filter({ hasText: 'June - May' }).click();
+
+      // Fill Timezone.
+      await authPage
+        .getByRole('button', { name: 'Select Time Zone...' })
+        .click();
+      await authPage.getByText('Pacific/Marquesas-09:30').click();
+
+      // Click on Submit button
+      await authPage.getByRole('button', { name: 'Save & Continue' }).click();
+    });
+    test('should onboarding process success', async () => {
+      await expect(authPage.locator('body')).toContainText(
+        'Congrats! You are ready to go',
+        {
+          timeout: 30000,
+        }
+      );
+    });
+    test('should go to the dashboard after clicking on "Go to dashboard" button.', async () => {
+      await authPage.getByRole('button', { name: 'Go to dashboard' }).click();
+
+      await expect(
+        authPage.locator('[data-testId="dashboard-topbar"] h1')
+      ).toContainText(businessLegalName);
+    });
+  });
+});

package-lock.json

@@ -333,6 +333,12 @@
         "@jridgewell/trace-mapping": "0.3.9"
       }
     },
+    "@faker-js/faker": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/@faker-js/faker/-/faker-8.0.2.tgz",
+      "integrity": "sha512-Uo3pGspElQW91PCvKSIAXoEgAUlRnH29sX2/p89kg7sP1m2PzCufHINd0FhTXQf6DYGiUlVncdSPa2F9wxed2A==",
+      "dev": true
+    },
     "@gar/promisify": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz",
@@ -945,6 +951,7 @@
       "version": "1.32.3",
       "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.32.3.tgz",
       "integrity": "sha512-BvWNvK0RfBriindxhLVabi8BRe3X0J9EVjKlcmhxjg4giWBD/xleLcg2dz7Tx0agu28rczjNIPQWznwzDwVsZQ==",
+      "dev": true,
       "requires": {
         "@types/node": "*",
         "fsevents": "2.3.2",
@@ -954,7 +961,8 @@
         "playwright-core": {
           "version": "1.32.3",
           "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.32.3.tgz",
-          "integrity": "sha512-SB+cdrnu74ZIn5Ogh/8278ngEh9NEEV0vR4sJFmK04h2iZpybfbqBY0bX6+BLYWVdV12JLLI+JEFtSnYgR+mWg=="
+          "integrity": "sha512-SB+cdrnu74ZIn5Ogh/8278ngEh9NEEV0vR4sJFmK04h2iZpybfbqBY0bX6+BLYWVdV12JLLI+JEFtSnYgR+mWg==",
+          "dev": true
         }
       }
     },
@@ -1003,7 +1011,8 @@
     "@types/node": {
       "version": "18.14.6",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-18.14.6.tgz",
-      "integrity": "sha512-93+VvleD3mXwlLI/xASjw0FzKcwzl3OdTCzm1LaRfqgS21gfFtK3zDXM5Op9TeeMsJVOaJ2VRDpT9q4Y3d0AvA=="
+      "integrity": "sha512-93+VvleD3mXwlLI/xASjw0FzKcwzl3OdTCzm1LaRfqgS21gfFtK3zDXM5Op9TeeMsJVOaJ2VRDpT9q4Y3d0AvA==",
+      "dev": true
     },
     "@types/normalize-package-data": {
       "version": "2.4.1",
@@ -2324,6 +2333,7 @@
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
       "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
       "optional": true
     },
     "function-bind": {

package.json

@@ -18,12 +18,13 @@
     "shared/*"
   ],
   "devDependencies": {
+    "@commitlint/cli": "^17.4.2",
     "@commitlint/config-conventional": "^17.4.2",
     "@commitlint/config-lerna-scopes": "^17.4.2",
+    "@faker-js/faker": "^8.0.2",
+    "@playwright/test": "^1.32.3",
     "husky": "^8.0.3",
-    "lerna": "^6.4.1",
-    "@commitlint/cli": "^17.4.2",
-    "@playwright/test": "^1.32.3"
+    "lerna": "^6.4.1"
   },
   "engines": {
     "node": "14.x"

packages/webapp/package-lock.json

@@ -1205,9 +1205,9 @@
       }
     },
     "@blueprintjs-formik/core": {
-      "version": "0.3.3",
-      "resolved": "https://registry.npmjs.org/@blueprintjs-formik/core/-/core-0.3.3.tgz",
-      "integrity": "sha512-ko7g54YSEcSq2K/GEpmiTG0foGLqe7DwgXGhkGxYEiHhLAUv8WvQmrFsm8e/KOW7n8mLGq0uaZVe2l8m3JTGGQ==",
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/@blueprintjs-formik/core/-/core-0.3.4.tgz",
+      "integrity": "sha512-gksuBYXXvX7IhZXbPEFEAHgmJWp1vt/GTMW0GYBkCoGBAvXy08hIHjMc85M0WNyen+tic3NRas6I2wsjgokgqw==",
       "requires": {
         "lodash.get": "^4.4.2",
         "lodash.keyby": "^4.6.0",
@@ -1227,9 +1227,9 @@
       }
     },
     "@blueprintjs-formik/select": {
-      "version": "0.2.4",
-      "resolved": "https://registry.npmjs.org/@blueprintjs-formik/select/-/select-0.2.4.tgz",
-      "integrity": "sha512-zB28/hLkuO5zZXkjFmqfiVDGW+uvj9b8e6kHh9aOfY70edSFIfw3bj+NYR7BaDZoIYu3KuZQDFGqgs23ua5Z1g==",
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/@blueprintjs-formik/select/-/select-0.2.5.tgz",
+      "integrity": "sha512-Sztf5dOemedUBfEjnDWD8ryfMU/x95hyhIgJT5/ywC/jQfX+d/K2OhujklTrCDzQilUeAJLoVkSdV+w77n8ckQ==",
       "requires": {
         "lodash.get": "^4.4.2",
         "lodash.keyby": "^4.6.0",
@@ -17751,4 +17751,4 @@
       "integrity": "sha512-7UlRWU4Q3uCMCeDVMOm7eBrIu145OqsIJ3p6zq58l8UsSYwKWxc6zEapC5YA9tIeh0oheb4cT9Kk2Wq353loFg=="
     }
   }
-}
+}

packages/webapp/package.json

@@ -3,9 +3,9 @@
   "version": "0.9.6",
   "private": true,
   "dependencies": {
-    "@blueprintjs-formik/core": "^0.3.3",
+    "@blueprintjs-formik/core": "^0.3.4",
     "@blueprintjs-formik/datetime": "^0.3.4",
-    "@blueprintjs-formik/select": "^0.2.4",
+    "@blueprintjs-formik/select": "^0.2.5",
     "@blueprintjs/core": "^3.50.2",
     "@blueprintjs/datetime": "^3.23.12",
     "@blueprintjs/popover2": "^0.11.1",

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

@@ -53,7 +53,7 @@ function DashboardTopbar({
   };
 
   return (
-    <div class="dashboard__topbar">
+    <div class="dashboard__topbar" data-testId={'dashboard-topbar'}>
       <div class="dashboard__topbar-left">
         <div class="dashboard__topbar-sidebar-toggle">
           <Tooltip

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

@@ -21,19 +21,21 @@ export function BalanceSheetAlerts() {
     refetchBalanceSheet();
   };
   // Can't display any error if the report is loading.
-  if (isLoading) return null;
-
+  if (isLoading) {
+    return null;
+  }
+  // Can't continue if the cost compute job is not running.
+  if (!balanceSheet.meta.is_cost_compute_running) {
+    return null;
+  }
   return (
-    <If condition={balanceSheet.meta.is_cost_compute_running}>
-      <FinancialComputeAlert>
-        <Icon icon="info-block" iconSize={12} />{' '}
-        <T id={'just_a_moment_we_re_calculating_your_cost_transactions'} />
-
-        <Button onClick={handleRecalcReport} minimal={true} small={true}>
-          <T id={'report.compute_running.refresh'} />
-        </Button>
-      </FinancialComputeAlert>
-    </If>
+    <FinancialComputeAlert>
+      <Icon icon="info-block" iconSize={12} />{' '}
+      <T id={'just_a_moment_we_re_calculating_your_cost_transactions'} />
+      <Button onClick={handleRecalcReport} minimal={true} small={true}>
+        <T id={'report.compute_running.refresh'} />
+      </Button>
+    </FinancialComputeAlert>
   );
 }
 

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

@@ -7,6 +7,7 @@ import FinancialLoadingBar from '../FinancialLoadingBar';
 
 import { dynamicColumns } from './dynamicColumns';
 import { useCashFlowStatementContext } from './CashFlowStatementProvider';
+import { FinancialComputeAlert } from '../FinancialReportPage';
 
 /**
  * Retrieve cash flow statement columns.
@@ -27,6 +28,7 @@ export const useCashFlowStatementColumns = () => {
  */
 export function CashFlowStatementLoadingBar() {
   const { isCashFlowFetching } = useCashFlowStatementContext();
+
   return (
     <If condition={isCashFlowFetching}>
       <FinancialLoadingBar />
@@ -45,20 +47,21 @@ export function CashFlowStatementAlerts() {
   const handleRecalcReport = () => {
     refetchCashFlow();
   };
-
   // Can't display any error if the report is loading
   if (isCashFlowLoading) {
     return null;
   }
+  // Can't continue if the cost compute is not running.
+  if (!cashFlowStatement.meta.is_cost_compute_running) {
+    return null;
+  }
   return (
-    <If condition={cashFlowStatement.meta.is_cost_compute_running}>
-      <div className="alert-compute-running">
-        <Icon icon="info-block" iconSize={12} />
-        <T id={'just_a_moment_we_re_calculating_your_cost_transactions'} />
-        <Button onClick={handleRecalcReport} minimal={true} small={true}>
-          <T id={'refresh'} />
-        </Button>
-      </div>
-    </If>
+    <FinancialComputeAlert>
+      <Icon icon="info-block" iconSize={12} />
+      <T id={'just_a_moment_we_re_calculating_your_cost_transactions'} />
+      <Button onClick={handleRecalcReport} minimal={true} small={true}>
+        <T id={'refresh'} />
+      </Button>
+    </FinancialComputeAlert>
   );
 }

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

@@ -8,6 +8,7 @@ import { getColumnWidth } from '@/utils';
 import { useGeneralLedgerContext } from './GeneralLedgerProvider';
 import FinancialLoadingBar from '../FinancialLoadingBar';
 
+import { FinancialComputeAlert } from '../FinancialReportPage';
 import { Align } from '@/constants';
 
 /**
@@ -116,17 +117,18 @@ export function GeneralLedgerSheetAlerts() {
   if (isLoading) {
     return null;
   }
-
+  // Can't continue if the cost compute job is not running.
+  if (!generalLedger.meta.is_cost_compute_running) {
+    return null;
+  }
   return (
-    <If condition={generalLedger.meta.is_cost_compute_running}>
-      <div class="alert-compute-running">
-        <Icon icon="info-block" iconSize={12} />
-        <T id={'just_a_moment_we_re_calculating_your_cost_transactions'} />
-        <Button onClick={handleRecalcReport} minimal={true} small={true}>
-          <T id={'refresh'} />
-        </Button>
-      </div>
-    </If>
+    <FinancialComputeAlert>
+      <Icon icon="info-block" iconSize={12} />
+      <T id={'just_a_moment_we_re_calculating_your_cost_transactions'} />
+      <Button onClick={handleRecalcReport} minimal={true} small={true}>
+        <T id={'refresh'} />
+      </Button>
+    </FinancialComputeAlert>
   );
 }
 

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

@@ -6,6 +6,7 @@ import { Icon, If, FormattedMessage as T } from '@/components';
 import { dynamicColumns } from './utils';
 import FinancialLoadingBar from '../FinancialLoadingBar';
 import { useInventoryItemDetailsContext } from './InventoryItemDetailsProvider';
+import { FinancialComputeAlert } from '../FinancialReportPage';
 
 /**
  * Retrieve inventory item details columns.
@@ -53,17 +54,19 @@ export function InventoryItemDetailsAlerts() {
   if (isInventoryItemDetailsLoading) {
     return null;
   }
+  // Can't continue if the cost compute job is running.
+  if (!inventoryItemDetails.meta.is_cost_compute_running) {
+    return null;
+  }
 
   return (
-    <If condition={inventoryItemDetails.meta.is_cost_compute_running}>
-      <div className="alert-compute-running">
-        <Icon icon="info-block" iconSize={12} />
-        <T id={'just_a_moment_we_re_calculating_your_cost_transactions'} />
+    <FinancialComputeAlert>
+      <Icon icon="info-block" iconSize={12} />
+      <T id={'just_a_moment_we_re_calculating_your_cost_transactions'} />
 
-        <Button onClick={handleRecalcReport} minimal={true} small={true}>
-          <T id={'refresh'} />
-        </Button>
-      </div>
-    </If>
+      <Button onClick={handleRecalcReport} minimal={true} small={true}>
+        <T id={'refresh'} />
+      </Button>
+    </FinancialComputeAlert>
   );
 }

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

@@ -7,6 +7,7 @@ import { Button } from '@blueprintjs/core';
 import { Icon, If, FormattedMessage as T } from '@/components';
 import { useJournalSheetContext } from './JournalProvider';
 import FinancialLoadingBar from '../FinancialLoadingBar';
+import { FinancialComputeAlert } from '../FinancialReportPage';
 
 import { Align } from '@/constants';
 
@@ -99,17 +100,18 @@ export function JournalSheetAlerts() {
   if (isLoading) {
     return null;
   }
-
+  // Can't continue if the cost compute job is running.
+  if (!journalSheet.meta.is_cost_compute_running) {
+    return null;
+  }
   return (
-    <If condition={journalSheet.meta.is_cost_compute_running}>
-      <div class="alert-compute-running">
-        <Icon icon="info-block" iconSize={12} />
-        <T id={'just_a_moment_we_re_calculating_your_cost_transactions'} />
+    <FinancialComputeAlert>
+      <Icon icon="info-block" iconSize={12} />
+      <T id={'just_a_moment_we_re_calculating_your_cost_transactions'} />
 
-        <Button onClick={handleRecalcReport} minimal={true} small={true}>
-          <T id={'refresh'} />
-        </Button>
-      </div>
-    </If>
+      <Button onClick={handleRecalcReport} minimal={true} small={true}>
+        <T id={'refresh'} />
+      </Button>
+    </FinancialComputeAlert>
   );
 }

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

@@ -13,7 +13,7 @@ import withProfitLossActions from './withProfitLossActions';
 
 import { useProfitLossSheetQuery } from './utils';
 import { ProfitLossSheetProvider } from './ProfitLossProvider';
-import { ProfitLossSheetLoadingBar } from './components';
+import { ProfitLossSheetAlerts, ProfitLossSheetLoadingBar } from './components';
 import { ProfitLossBody } from './ProfitLossBody';
 
 /**
@@ -58,7 +58,7 @@ function ProfitLossSheet({
         onNumberFormatSubmit={handleNumberFormatSubmit}
       />
       <ProfitLossSheetLoadingBar />
-      {/* <ProfitLossSheetAlerts /> */}
+      <ProfitLossSheetAlerts />
 
       <DashboardPageContent>
         <ProfitLossSheetHeader

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

@@ -4,6 +4,7 @@ import { Button } from '@blueprintjs/core';
 import { Icon, If, FormattedMessage as T } from '@/components';
 
 import { useProfitLossSheetContext } from './ProfitLossProvider';
+import { FinancialComputeAlert } from '../FinancialReportPage';
 import FinancialLoadingBar from '../FinancialLoadingBar';
 
 /**
@@ -34,17 +35,18 @@ export function ProfitLossSheetAlerts() {
   if (isLoading) {
     return null;
   }
-
+  // Can't continue if the cost compute job is not running.
+  if (!profitLossSheet.meta.is_cost_compute_running) {
+    return null;
+  }
   return (
-    <If condition={profitLossSheet.meta.is_cost_compute_running}>
-      <div class="alert-compute-running">
-        <Icon icon="info-block" iconSize={12} />
-        <T id={'just_a_moment_we_re_calculating_your_cost_transactions'} />
+    <FinancialComputeAlert>
+      <Icon icon="info-block" iconSize={12} />
+      <T id={'just_a_moment_we_re_calculating_your_cost_transactions'} />
 
-        <Button onClick={handleRecalcReport} minimal={true} small={true}>
-          <T id={'refresh'} />
-        </Button>
-      </div>
-    </If>
+      <Button onClick={handleRecalcReport} minimal={true} small={true}>
+        <T id={'refresh'} />
+      </Button>
+    </FinancialComputeAlert>
   );
 }

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

@@ -8,9 +8,9 @@ import { getColumnWidth } from '@/utils';
 import { CellTextSpan } from '@/components/Datatable/Cells';
 import { If, Icon, FormattedMessage as T } from '@/components';
 import { useTrialBalanceSheetContext } from './TrialBalanceProvider';
+import { FinancialComputeAlert } from '../FinancialReportPage';
 import FinancialLoadingBar from '../FinancialLoadingBar';
 
-
 /**
  * Retrieves the credit column.
  */
@@ -114,17 +114,19 @@ export function TrialBalanceSheetAlerts() {
   if (isLoading) {
     return null;
   }
+  // Can't continue if the cost compute job is not running.
+  if (!meta.is_cost_compute_running) {
+    return null;
+  }
 
   return (
-    <If condition={meta.is_cost_compute_running}>
-      <div class="alert-compute-running">
-        <Icon icon="info-block" iconSize={12} />
-        <T id={'just_a_moment_we_re_calculating_your_cost_transactions'} />
+    <FinancialComputeAlert>
+      <Icon icon="info-block" iconSize={12} />
+      <T id={'just_a_moment_we_re_calculating_your_cost_transactions'} />
 
-        <Button onClick={handleRecalcReport} minimal={true} small={true}>
-          <T id={'refresh'} />
-        </Button>
-      </div>
-    </If>
+      <Button onClick={handleRecalcReport} minimal={true} small={true}>
+        <T id={'refresh'} />
+      </Button>
+    </FinancialComputeAlert>
   );
 }

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

@@ -176,7 +176,7 @@ function BillFormVendorField() {
         name={'vendor_id'}
         items={vendors}
         placeholder={<T id={'select_vender_account'} />}
-        onItemChange={(contact) => {
+        onItemSelect={(contact) => {
           setFieldValue('vendor_id', contact.id);
           setFieldValue('currency_code', contact?.currency_code);
         }}

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

@@ -85,7 +85,6 @@ function VendorCreditNoteFormHeaderFields({
         name={'exchange_rate'}
         formGroupProps={{ label: ' ', inline: true }}
       />
-
       {/* ------- Vendor Credit date ------- */}
       <FastField name={'vendor_credit_date'}>
         {({ form, field: { value }, meta: { error, touched } }) => (
@@ -194,7 +193,7 @@ function VendorCreditFormVendorSelect() {
         name={'vendor_id'}
         items={vendors}
         placeholder={<T id={'select_vender_account'} />}
-        onItemChange={(contact) => {
+        onItemSelect={(contact) => {
           setFieldValue('vendor_id', contact.id);
           setFieldValue('currency_code', contact?.currency_code);
         }}

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

@@ -248,7 +248,7 @@ function PaymentFormVendorSelect() {
         name={'vendor_id'}
         items={vendors}
         placeholder={<T id={'select_vender_account'} />}
-        onItemChange={(contact) => {
+        onItemSelect={(contact) => {
           setFieldValue('vendor_id', contact.id);
           setFieldValue('currency_code', contact?.currency_code);
           setPaymentVendorId(contact.id);

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

@@ -110,7 +110,7 @@ function CreditNoteCustomersSelect() {
         name={'customer_id'}
         items={customers}
         placeholder={<T id={'select_customer_account'} />}
-        onItemChange={(customer) => {
+        onItemSelect={(customer) => {
           setFieldValue('customer_id', customer.id);
           setFieldValue('currency_code', customer?.currency_code);
         }}

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

@@ -165,7 +165,7 @@ function EstimateFormCustomerSelect() {
         name={'customer_id'}
         items={customers}
         placeholder={<T id={'select_customer_account'} />}
-        onItemChange={(customer) => {
+        onItemSelect={(customer) => {
           setFieldValue('customer_id', customer.id);
           setFieldValue('currency_code', customer?.currency_code);
         }}

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

@@ -178,7 +178,7 @@ function InvoiceFormCustomerSelect() {
         name={'customer_id'}
         items={customers}
         placeholder={<T id={'select_customer_account'} />}
-        onItemChange={(customer) => {
+        onItemSelect={(customer) => {
           setFieldValue('customer_id', customer.id);
           setFieldValue('currency_code', customer?.currency_code);
         }}

packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveHeaderFields.tsx

@@ -263,7 +263,7 @@ function PaymentReceiveCustomerSelect() {
         name={'customer_id'}
         items={customers}
         placeholder={<T id={'select_customer_account'} />}
-        onItemChange={(customer) => {
+        onItemSelect={(customer) => {
           setFieldValue('customer_id', customer.id);
           setFieldValue('full_amount', '');
           setFieldValue('currency_code', customer?.currency_code);

packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeaderFields.tsx

@@ -162,7 +162,7 @@ function ReceiptFormCustomerSelect() {
         name={'customer_id'}
         items={customers}
         placeholder={<T id={'select_customer_account'} />}
-        onItemChange={(customer) => {
+        onItemSelect={(customer) => {
           setFieldValue('customer_id', customer.id);
           setFieldValue('currency_code', customer?.currency_code);
         }}

vercel.json

@@ -3,7 +3,12 @@
   "buildCommand": "CI='' npm run build:webapp",
   "outputDirectory": "packages/webapp/build",
   "rewrites": [{
-    "source": "/(.*)",
-    "destination": "/"
-  }]
+      "source": "/api/:slug*",
+      "destination": "https://dev.bigcapital.ly/api/:slug*"
+    },
+    {
+      "source": "/(.*)",
+      "destination": "/"
+    }
+  ]
 }