Update CHANGELOG.md

BIG-372: activate branches & warehouses reloading.

CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to Bigcapital server-side will be in this file.
 
+## [1.7.3-rc.2] - 15-04-2022
+
+### Fixed
+  - `BIG-372` Activate branches and warehouses dialog reloading once activating.
+  - `BIG-373` Issue general ledger report select specific account.
+  - `BIG-377` Make readonly details entries as oneline with tooltip for more details.
+
 ## [1.7.2-rc.2] - 04-04-2022
 
 ### Fixed

config/env.js

@@ -85,6 +85,9 @@ function getClientEnvironment(publicUrl) {
         WDS_SOCKET_HOST: process.env.WDS_SOCKET_HOST,
         WDS_SOCKET_PATH: process.env.WDS_SOCKET_PATH,
         WDS_SOCKET_PORT: process.env.WDS_SOCKET_PORT,
+
+        // Application version.
+        VERSION: paths.appVersion
       }
     );
   // Stringify all values so we can feed into webpack DefinePlugin

config/paths.js

@@ -48,6 +48,8 @@ const resolveModule = (resolveFn, filePath) => {
   return resolveFn(`${filePath}.js`);
 };
 
+const appVersion = require(resolveApp('package.json')).version;
+
 // config after eject: we're in ./config/
 module.exports = {
   dotenv: resolveApp('.env'),
@@ -65,6 +67,7 @@ module.exports = {
   proxySetup: resolveApp('src/setupProxy.js'),
   appNodeModules: resolveApp('node_modules'),
   publicUrlOrPath,
+  appVersion
 };
 
 

src/components/CommercialDoc/index.js

@@ -11,7 +11,7 @@ export const CommercialDocHeader = styled.div`
 `;
 
 export const CommercialDocTopHeader = styled.div`
-  margin-bottom: 25px;
+  margin-bottom: 30px;
 `;
 
 export const CommercialDocEntriesTable = styled(DataTable)`

src/components/DataTableCells/TextOverviewTooltipCell.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Tooltip, Position } from '@blueprintjs/core';
+
+/**
+ * Text overview tooltip cell.
+ * @returns {JSX.Element}
+ */
+export function TextOverviewTooltipCell({ cell: { value } }) {
+  const SUBMENU_POPOVER_MODIFIERS = {
+    flip: { boundariesElement: 'viewport', padding: 20 },
+    offset: { offset: '0, 10' },
+    preventOverflow: { boundariesElement: 'viewport', padding: 40 },
+  };
+
+  return (
+    <Tooltip
+      content={value}
+      position={Position.BOTTOM_LEFT}
+      boundary={'viewport'}
+      minimal={true}
+      modifiers={SUBMENU_POPOVER_MODIFIERS}
+      targetClassName={'table-tooltip-overview-target'}
+    >
+      {value}
+    </Tooltip>
+  );
+}

src/components/DataTableCells/index.js

@@ -10,6 +10,7 @@ import CheckBoxFieldCell from './CheckBoxFieldCell';
 import SwitchFieldCell from './SwitchFieldCell';
 import TextAreaCell from './TextAreaCell';
 import BranchesListFieldCell from './BranchesListFieldCell';
+import { TextOverviewTooltipCell } from './TextOverviewTooltipCell';
 
 export {
   AccountsListFieldCell,
@@ -25,4 +26,5 @@ export {
   SwitchFieldCell,
   TextAreaCell,
   BranchesListFieldCell,
+  TextOverviewTooltipCell,
 };

src/components/Sidebar/Sidebar.js

@@ -28,7 +28,7 @@ export default function Sidebar({ dashboardContentRef }) {
  * @returns {React.JSX}
  */
 function SidebarFooterVersion() {
-  const { REACT_APP_VERSION: VERSION } = process.env;
+  const { VERSION } = process.env;
 
   if (!VERSION) {
     return null;

src/components/index.js

@@ -49,7 +49,6 @@ import DrawerHeaderContent from './Drawer/DrawerHeaderContent';
 import Postbox from './Postbox';
 import AccountsSuggestField from './AccountsSuggestField';
 import MaterialProgressBar from './MaterialProgressBar';
-import { MoneyFieldCell } from './DataTableCells';
 import AvaterCell from './AvaterCell';
 
 import { ItemsMultiSelect } from './Items';
@@ -105,6 +104,7 @@ export * from './Currencies';
 export * from './FormTopbar'
 export * from './Paper';
 export * from './Accounts'
+export * from './DataTableCells';
 
 const Hint = FieldHint;
 
@@ -167,7 +167,6 @@ export {
   Postbox,
   AccountsSuggestField,
   MaterialProgressBar,
-  MoneyFieldCell,
   ItemsMultiSelect,
   AvaterCell,
   MoreMenuItems,

src/config/interfaces.tsx

@@ -0,0 +1,45 @@
+export enum ISidebarMenuItemType {
+  Label = 'label',
+  Link = 'link',
+  Group = 'group',
+  Overlay = 'overlay'
+}
+
+export interface ISidebarMenuItemOverlay extends ISidebarMenuItemCommon {
+  type: ISidebarMenuItemType.Overlay;
+}
+
+export interface ISidebarMenuItemLink extends ISidebarMenuItemCommon {
+  text: string | JSX.Element;
+  href: string;
+  type: ISidebarMenuItemType.Link;
+  matchExact?: boolean;
+}
+
+export interface ISidebarMenuItemLabel extends ISidebarMenuItemCommon {
+  text?: string;
+  type: ISidebarMenuItemType.Label;
+}
+
+export interface ISidebarMenuItemGroup extends ISidebarMenuItemCommon {
+  type: ISidebarMenuItemType.Group;
+}
+
+export interface ISidebarMenuItemPermission {
+  subject: string;
+  ability: string;
+}
+
+export interface ISidebarMenuItemCommon {
+  ability?: ISidebarMenuItemPermission | ISidebarMenuItemPermission[];
+  feature?: string;
+  disabled?: boolean;
+  children?: ISidebarMenuItem[];
+  onlySubscriptionExpired?: boolean;
+}
+
+export type ISidebarMenuItem =
+  | ISidebarMenuItemLink
+  | ISidebarMenuItemLabel
+  | ISidebarMenuItemGroup
+  | ISidebarMenuItemOverlay;

src/containers/Alerts/Bills/BillLocatedLandedCostDeleteAlert.js

@@ -57,9 +57,7 @@ function BillTransactionDeleteAlert({
       loading={isLoading}
     >
       <p>
-        <T
+        <T id={`landed_cost.once_your_delete_this_located_landed_cost`} />
-          id={`Once your delete this located landed cost, you won't be able to restore it later, Are your sure you want to delete this transaction?`}
-        />
       </p>
     </Alert>
   );

src/containers/CashFlow/AccountTransactions/utils.js

@@ -79,6 +79,10 @@ export const handleCashFlowTransactionType = (reference, openDrawer) => {
       return openDrawer('refund-vendor-detail-drawer', {
         refundTransactionId: reference.reference_id,
       });
+    case 'InventoryAdjustment':
+      return openDrawer('inventory-adjustment-drawer', {
+        inventoryId: reference.reference_id,
+      });
 
     default:
       return openDrawer('cashflow-transaction-drawer', {

src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostFloatingActions.js

@@ -37,7 +37,7 @@ function AllocateLandedCostFloatingActions({
       <DialogFooterActions alignment={'left'}>
         {costTransactionEntry && (
           <UnallocatedAmount>
-            Unallocated cost Amount:{' '}
+           <T id={'landed_cost.dialog.label_unallocated_cost_amount'}/>
             <strong>{formattedUnallocatedCostAmount}</strong>
           </UnallocatedAmount>
         )}

src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostForm.js

@@ -42,7 +42,10 @@ function AllocateLandedCostForm({
       .map((entry) => transformToForm(entry, defaultInitialValues.items[0]));
 
     if (entries.length <= 0) {
-      AppToaster.show({ message: 'Something wrong!', intent: Intent.DANGER });
+      AppToaster.show({
+        message: intl.get('something_wrong'),
+        intent: Intent.DANGER,
+      });
       return;
     }
     const form = {
@@ -69,13 +72,14 @@ function AllocateLandedCostForm({
         )
       ) {
         AppToaster.show({
-          message:
+          message: intl.get(
-            'The total located cost is bigger than the transaction line.',
+            'landed_cost.error.the_total_located_cost_is_bigger_than_the_transaction_line',
+          ),
           intent: Intent.DANGER,
         });
       } else {
         AppToaster.show({
-          message: 'Something went wrong!',
+          message: intl.get('something_went_wrong'),
           intent: Intent.DANGER,
         });
       }

src/containers/Dialogs/BranchActivateDialog/BranchActivateFormProvider.js

@@ -9,7 +9,7 @@ const BranchActivateContext = React.createContext();
  * Branch activate form provider.
  */
 function BranchActivateFormProvider({ dialogName, ...props }) {
-  const { mutateAsync: activateBranches, isLoading } = useActivateBranches();
+  const { mutateAsync: activateBranches } = useActivateBranches();
 
   // State provider.
   const provider = {
@@ -18,7 +18,7 @@ function BranchActivateFormProvider({ dialogName, ...props }) {
   };
 
   return (
-    <DialogContent isLoading={isLoading}>
+    <DialogContent>
       <BranchActivateContext.Provider value={provider} {...props} />
     </DialogContent>
   );

src/containers/Dialogs/PaymentViaVoucherDialog/PaymentViaVoucherDialogContent.js

@@ -36,7 +36,7 @@ function PaymentViaLicenseDialogContent({
     setSubmitting(true);
 
     const mutateValues = {
-      plan_slug: `${values.plan_slug}-${values.period}ly`,
+      plan_slug: `essentials-monthly`,
       license_code: values.license_code,
     };
     // Payment via voucher mutate.

src/containers/Dialogs/WarehouseActivateDialog/WarehouseActivateFormProvider.js

@@ -9,8 +9,7 @@ const WarehouseActivateContext = React.createContext();
  * warehouse activate form provider.
  */
 function WarehouseActivateFormProvider({ dialogName, ...props }) {
-  const { mutateAsync: activateWarehouses, isLoading } =
+  const { mutateAsync: activateWarehouses } = useActivateWarehouses();
-    useActivateWarehouses();
 
   // State provider.
   const provider = {
@@ -19,7 +18,7 @@ function WarehouseActivateFormProvider({ dialogName, ...props }) {
   };
 
   return (
-    <DialogContent isLoading={isLoading}>
+    <DialogContent>
       <WarehouseActivateContext.Provider value={provider} {...props} />
     </DialogContent>
   );

src/containers/Drawers/BillDrawer/utils.js

@@ -13,57 +13,81 @@ import {
 } from '@blueprintjs/core';
 import {
   FormatNumberCell,
+  TextOverviewTooltipCell,
   FormattedMessage as T,
   Choose,
   Icon,
 } from '../../../components';
+import { getColumnWidth } from 'utils';
+import { useBillDrawerContext } from './BillDrawerProvider';
 
 /**
  * Retrieve bill readonly details entries table columns.
  */
-export const useBillReadonlyEntriesTableColumns = () =>
+export const useBillReadonlyEntriesTableColumns = () => {
-  React.useMemo(
+  const {
+    bill: { entries },
+  } = useBillDrawerContext();
+
+  return React.useMemo(
     () => [
       {
         Header: intl.get('product_and_service'),
         accessor: 'item.name',
+        Cell: TextOverviewTooltipCell,
         width: 150,
         className: 'item',
         disableSortBy: true,
+        textOverview: true,
       },
       {
         Header: intl.get('description'),
         accessor: 'description',
+        Cell: TextOverviewTooltipCell,
         className: 'description',
         disableSortBy: true,
+        textOverview: true,
       },
       {
         Header: intl.get('quantity'),
         accessor: 'quantity',
         Cell: FormatNumberCell,
-        width: 100,
+        width: getColumnWidth(entries, 'quantity', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
         align: 'right',
         disableSortBy: true,
+        textOverview: true,
       },
       {
         Header: intl.get('rate'),
         accessor: 'rate',
         Cell: FormatNumberCell,
-        width: 100,
+        width: getColumnWidth(entries, 'rate', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
         align: 'right',
         disableSortBy: true,
+        textOverview: true,
       },
       {
         Header: intl.get('amount'),
         accessor: 'amount',
         Cell: FormatNumberCell,
-        width: 100,
+        width: getColumnWidth(entries, 'amount', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
         align: 'right',
         disableSortBy: true,
+        textOverview: true,
       },
     ],
     [],
   );
+};
 
 /**
  * Bill details status.

src/containers/Drawers/CreditNoteDetailDrawer/utils.js

@@ -10,56 +10,81 @@ import {
   Tag,
   Intent,
 } from '@blueprintjs/core';
+import { getColumnWidth } from 'utils';
 import {
   Icon,
   FormattedMessage as T,
+  TextOverviewTooltipCell,
   FormatNumberCell,
   Choose,
 } from '../../../components';
+import { useCreditNoteDetailDrawerContext } from './CreditNoteDetailDrawerProvider';
 
-export const useCreditNoteReadOnlyEntriesColumns = () =>
+export const useCreditNoteReadOnlyEntriesColumns = () => {
-  React.useMemo(
+  // credit note details drawer context.
+  const {
+    creditNote: { entries },
+  } = useCreditNoteDetailDrawerContext();
+
+  return React.useMemo(
     () => [
       {
         Header: intl.get('product_and_service'),
         accessor: 'item.name',
+        Cell: TextOverviewTooltipCell,
         width: 150,
         className: 'name',
         disableSortBy: true,
+        textOverview: true,
       },
       {
         Header: intl.get('description'),
         accessor: 'description',
+        Cell: TextOverviewTooltipCell,
         className: 'description',
         disableSortBy: true,
+        textOverview: true,
       },
       {
         Header: intl.get('quantity'),
         accessor: 'quantity',
         Cell: FormatNumberCell,
-        width: 100,
+        width: getColumnWidth(entries, 'quantity', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
         align: 'right',
         disableSortBy: true,
+        textOverview: true,
       },
       {
         Header: intl.get('rate'),
         accessor: 'rate',
         Cell: FormatNumberCell,
-        width: 100,
+        width: getColumnWidth(entries, 'rate', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
         align: 'right',
         disableSortBy: true,
+        textOverview: true,
       },
       {
         Header: intl.get('amount'),
         accessor: 'amount',
         Cell: FormatNumberCell,
-        width: 100,
+        width: getColumnWidth(entries, 'amount', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
         align: 'right',
         disableSortBy: true,
+        textOverview: true,
       },
     ],
     [],
   );
+};
 
 /**
  * Credit note more actions mneu.

src/containers/Drawers/EstimateDetailDrawer/utils.js

@@ -1,47 +1,74 @@
 import React from 'react';
 import intl from 'react-intl-universal';
-import { FormatNumberCell } from '../../../components';
+import { FormatNumberCell, TextOverviewTooltipCell } from '../../../components';
+import { getColumnWidth } from 'utils';
+import { useEstimateDetailDrawerContext } from './EstimateDetailDrawerProvider';
 
 /**
  * Retrieve table columns of estimate readonly entries details.
  */
-export const useEstimateReadonlyEntriesColumns = () =>
+export const useEstimateReadonlyEntriesColumns = () => {
-  React.useMemo(() => [
+  // estimate details drawer context.
-    {
+  const {
-      Header: intl.get('product_and_service'),
+    estimate: { entries },
-      accessor: 'item.name',
+  } = useEstimateDetailDrawerContext();
-      width: 150,
+
-      className: 'name',
+  return React.useMemo(
-      disableSortBy: true,
+    () => [
-    },
+      {
-    {
+        Header: intl.get('product_and_service'),
-      Header: intl.get('description'),
+        accessor: 'item.name',
-      accessor: 'description',
+        Cell: TextOverviewTooltipCell,
-      className: 'description',
+        width: 150,
-      disableSortBy: true,
+        className: 'name',
-    },
+        disableSortBy: true,
-    {
+        textOverview: true,
-      Header: intl.get('quantity'),
+      },
-      accessor: 'quantity',
+      {
-      Cell: FormatNumberCell,
+        Header: intl.get('description'),
-      width: 100,
+        accessor: 'description',
-      align: 'right',
+        Cell: TextOverviewTooltipCell,
-      disableSortBy: true,
+        className: 'description',
-    },
+        disableSortBy: true,
-    {
+        textOverview: true,
-      Header: intl.get('rate'),
+      },
-      accessor: 'rate',
+      {
-      Cell: FormatNumberCell,
+        Header: intl.get('quantity'),
-      width: 100,
+        accessor: 'quantity',
-      align: 'right',
+        Cell: FormatNumberCell,
-      disableSortBy: true,
+        width: getColumnWidth(entries, 'quantity', {
-    },
+          minWidth: 60,
-    {
+          magicSpacing: 5,
-      Header: intl.get('amount'),
+        }),
-      accessor: 'amount',
+        align: 'right',
-      Cell: FormatNumberCell,
+        disableSortBy: true,
-      width: 100,
+        textOverview: true,
-      align: 'right',
+      },
-      disableSortBy: true,
+      {
-    },
+        Header: intl.get('rate'),
-  ], []);
+        accessor: 'rate',
+        Cell: FormatNumberCell,
+        width: getColumnWidth(entries, 'rate', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
+        align: 'right',
+        disableSortBy: true,
+        textOverview: true,
+      },
+      {
+        Header: intl.get('amount'),
+        accessor: 'amount',
+        Cell: FormatNumberCell,
+        width: getColumnWidth(entries, 'amount', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
+        align: 'right',
+        disableSortBy: true,
+        textOverview: true,
+      },
+    ],
+    [],
+  );
+};

src/containers/Drawers/ExpenseDrawer/utils.js

@@ -1,33 +1,46 @@
 import React from 'react';
 import intl from 'react-intl-universal';
 
-import { FormatNumberCell } from '../../../components';
+import { FormatNumberCell, TextOverviewTooltipCell } from '../../../components';
+import { useExpenseDrawerContext } from './ExpenseDrawerProvider';
+import { getColumnWidth } from 'utils';
 
 /**
  * Retrieve expense readonly details entries table columns.
  */
-export const useExpenseReadEntriesColumns = () =>
+export const useExpenseReadEntriesColumns = () => {
-  React.useMemo(
+  // Expense drawer context.
+  const {
+    expense: { categories },
+  } = useExpenseDrawerContext();
+
+  return React.useMemo(
     () => [
       {
         Header: intl.get('expense_account'),
         accessor: 'expense_account.name',
+        Cell: TextOverviewTooltipCell,
         width: 110,
         disableSortBy: true,
+        textOverview: true,
         className: 'account',
       },
       {
         Header: intl.get('description'),
         accessor: 'description',
-        width: 110,
+        Cell: TextOverviewTooltipCell,
-        disableSortBy: true,
         className: 'description',
+        disableSortBy: true,
+        textOverview: true,
       },
       {
         Header: intl.get('amount'),
         accessor: 'amount',
         Cell: FormatNumberCell,
-        width: 100,
+        width: getColumnWidth(categories, 'amount', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
         disableSortBy: true,
         className: 'amount',
         align: 'right',
@@ -35,3 +48,4 @@ export const useExpenseReadEntriesColumns = () =>
     ],
     [],
   );
+};

src/containers/Drawers/InventoryAdjustmentDetailDrawer/utils.js

@@ -1,37 +1,60 @@
 import React from 'react';
 import intl from 'react-intl-universal';
+import { getColumnWidth } from 'utils';
+import { TextOverviewTooltipCell } from 'components';
+import { useInventoryAdjustmentDrawerContext } from './InventoryAdjustmentDrawerProvider';
 
-export const useInventoryAdjustmentEntriesColumns = () =>
+export const useInventoryAdjustmentEntriesColumns = () => {
-  React.useMemo(
+  // Inventory adjustment details drawer context.
+  const {
+    inventoryAdjustment: { entries },
+  } = useInventoryAdjustmentDrawerContext();
+
+  return React.useMemo(
     () => [
       {
         Header: intl.get('inventory_adjustment.column.product'),
         accessor: 'item.name',
-        width: 150,
+        Cell: TextOverviewTooltipCell,
+        width: 100,
         className: 'name',
         disableSortBy: true,
+        textOverview: true,
       },
       {
         Header: intl.get('quantity'),
         accessor: 'quantity',
-        width: 100,
+        width: getColumnWidth(entries, 'quantity', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
         align: 'right',
         disableSortBy: true,
+        textOverview: true,
       },
       {
         Header: intl.get('cost'),
         accessor: 'cost',
-        width: 100,
+        width: getColumnWidth(entries, 'cost', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
         align: 'right',
         disableSortBy: true,
+        textOverview: true,
       },
       {
         Header: intl.get('value'),
         accessor: 'value',
-        width: 100,
+        width: getColumnWidth(entries, 'value', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
         align: 'right',
         disableSortBy: true,
+        textOverview: true,
       },
     ],
     [],
   );
+};

src/containers/Drawers/InvoiceDetailDrawer/utils.js

@@ -11,12 +11,14 @@ import {
   Intent,
   Tag,
 } from '@blueprintjs/core';
+import { getColumnWidth } from 'utils';
 import {
   FormatNumberCell,
   Icon,
   FormattedMessage as T,
   Choose,
   Can,
+  TextOverviewTooltipCell,
 } from 'components';
 import {
   SaleInvoiceAction,
@@ -27,49 +29,69 @@ import { useInvoiceDetailDrawerContext } from './InvoiceDetailDrawerProvider';
 /**
  * Retrieve invoice readonly details table columns.
  */
-export const useInvoiceReadonlyEntriesColumns = () =>
+export const useInvoiceReadonlyEntriesColumns = () => {
-  React.useMemo(
+  // Invoice details drawer context.
+  const {
+    invoice: { entries },
+  } = useInvoiceDetailDrawerContext();
+
+  return React.useMemo(
     () => [
       {
         Header: intl.get('product_and_service'),
         accessor: 'item.name',
-        width: 150,
+        Cell: TextOverviewTooltipCell,
-        className: 'name',
         disableSortBy: true,
+        textOverview: true,
+        width: 150,
       },
       {
         Header: intl.get('description'),
         accessor: 'description',
-        className: 'description',
+        Cell: TextOverviewTooltipCell,
         disableSortBy: true,
+        textOverview: true,
       },
       {
         Header: intl.get('quantity'),
         accessor: 'quantity',
         Cell: FormatNumberCell,
-        width: 100,
         align: 'right',
         disableSortBy: true,
+        textOverview: true,
+        width: getColumnWidth(entries, 'quantity', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
       },
       {
         Header: intl.get('rate'),
         accessor: 'rate',
         Cell: FormatNumberCell,
-        width: 100,
         align: 'right',
         disableSortBy: true,
+        textOverview: true,
+        width: getColumnWidth(entries, 'rate', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
       },
       {
         Header: intl.get('amount'),
         accessor: 'amount',
         Cell: FormatNumberCell,
-        width: 100,
         align: 'right',
         disableSortBy: true,
+        textOverview: true,
+        width: getColumnWidth(entries, 'amount', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
       },
     ],
     [],
   );
+};
 
 /**
  * Invoice details more actions menu.

src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerTable.js

@@ -10,7 +10,10 @@ import { TableStyle } from '../../../common';
  * Manual journal drawer table.
  */
 export default function ManualJournalDrawerTable() {
+  // Retrieves the readonly manual journal entries columns.
   const columns = useManualJournalEntriesColumns();
+
+  // Manual journal drawer context.
   const { manualJournal } = useManualJournalDrawerContext();
 
   return (

src/containers/Drawers/ManualJournalDrawer/utils.js

@@ -1,28 +1,17 @@
 import intl from 'react-intl-universal';
 import React from 'react';
-import { Tag, Intent, Classes, Tooltip, Position } from '@blueprintjs/core';
+import { Tag, Intent } from '@blueprintjs/core';
 
-import { T, Choose, FormatNumberCell, If, Icon } from '../../../components';
+import {
+  T,
+  Choose,
+  FormatNumberCell,
+  TextOverviewTooltipCell,
+} from '../../../components';
 import { Features } from 'common';
+import { getColumnWidth } from 'utils';
 import { useFeatureCan } from 'hooks/state';
-
+import { useManualJournalDrawerContext } from './ManualJournalDrawerProvider';
-/**
- * Note column accessor.
- */
-export function NoteAccessor(row) {
-  return (
-    <If condition={row.note}>
-      <Tooltip
-        className={Classes.TOOLTIP_INDICATOR}
-        content={row.note}
-        position={Position.LEFT_TOP}
-        hoverOpenDelay={50}
-      >
-        <Icon icon={'file-alt'} iconSize={16} />
-      </Tooltip>
-    </If>
-  );
-}
 
 /**
  * Publish column accessor.
@@ -50,37 +39,45 @@ export function ManualJournalDetailsStatus({ manualJournal }) {
  */
 export const useManualJournalEntriesColumns = () => {
   const { featureCan } = useFeatureCan();
+
+  // manual journal details drawer context.
+  const {
+    manualJournal: { entries },
+  } = useManualJournalDrawerContext();
+
   return React.useMemo(
     () => [
       {
         Header: intl.get('account_name'),
+        Cell: TextOverviewTooltipCell,
         accessor: 'account.name',
         width: 130,
         disableSortBy: true,
-        className: 'account',
+        textOverview: true,
       },
       {
         Header: intl.get('contact'),
         accessor: 'contact.display_name',
-        width: 130,
+        Cell: TextOverviewTooltipCell,
+        width: 100,
         disableSortBy: true,
-        className: 'contact',
+        textOverview: true,
       },
       {
         Header: intl.get('note'),
-        accessor: NoteAccessor,
+        accessor: 'note',
-        width: 80,
+        Cell: TextOverviewTooltipCell,
         disableSortBy: true,
-        className: 'note',
+        textOverview: true,
+        width: 100,
       },
       ...(featureCan(Features.Branches)
         ? [
             {
               Header: intl.get('branch'),
-              width: 130,
+              width: 100,
               accessor: 'branch.name',
               disableSortBy: true,
-              className: 'branch',
             },
           ]
         : []),
@@ -88,25 +85,31 @@ export const useManualJournalEntriesColumns = () => {
         Header: intl.get('credit'),
         accessor: 'credit',
         Cell: FormatNumberCell,
-        width: 100,
+        width: getColumnWidth(entries, 'credit', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
         disableResizable: true,
         disableSortBy: true,
+        textOverview: true,
         formatNumber: { noZero: true },
-        className: 'credit',
         align: 'right',
       },
       {
         Header: intl.get('debit'),
         accessor: 'debit',
         Cell: FormatNumberCell,
-        width: 100,
+        width: getColumnWidth(entries, 'debit', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
         disableResizable: true,
+        textOverview: true,
         disableSortBy: true,
         formatNumber: { noZero: true },
-        className: 'debit',
         align: 'right',
       },
     ],
-    [featureCan],
+    [],
   );
 };

src/containers/Drawers/PaymentMadeDetailDrawer/utils.js

@@ -3,43 +3,65 @@ import intl from 'react-intl-universal';
 import moment from 'moment';
 
 import { FormatNumberCell } from '../../../components';
+import { getColumnWidth } from 'utils';
+import { usePaymentMadeDetailContext } from './PaymentMadeDetailProvider';
 
-export const usePaymentMadeEntriesColumns = () =>
+export const usePaymentMadeEntriesColumns = () => {
-  React.useMemo(() => [
+  // Payment made details context.
-    {
+  const {
-      Header: intl.get('date'),
+    paymentMade: { entries },
-      accessor: (row) => moment(row.date).format('YYYY MMM DD'),
+  } = usePaymentMadeDetailContext();
-      width: 100,
+
-      disableSortBy: true,
+  return React.useMemo(
-      className: 'date',
+    () => [
-    },
+      {
-    {
+        Header: intl.get('date'),
-      Header: intl.get('bill_number'),
+        accessor: (row) => moment(row.date).format('YYYY MMM DD'),
-      accessor: 'bill_no',
+        width: 100,
-      width: 150,
+        disableSortBy: true,
-      disableSortBy: true,
+        className: 'date',
-      className: 'bill_number',
+      },
-    },
+      {
-    {
+        Header: intl.get('bill_number'),
-      Header: intl.get('bill_amount'),
+        accessor: 'bill_no',
-      accessor: 'bill.amount',
+        width: 150,
-      Cell: FormatNumberCell,
+        disableSortBy: true,
-      align: 'right',
+        className: 'bill_number',
-    },
+      },
-    {
+      {
-      Header: intl.get('due_amount'),
+        Header: intl.get('bill_amount'),
-      accessor: 'bill.due_amount',
+        accessor: 'bill.amount',
-      Cell: FormatNumberCell,
+        Cell: FormatNumberCell,
-      width: 100,
+        width: getColumnWidth(entries, 'bill.amount', {
-      disableSortBy: true,
+          minWidth: 60,
-      align: 'right',
+          magicSpacing: 5,
-    },
+        }),
-    {
+        align: 'right',
-      Header: intl.get('payment_amount'),
+      },
-      accessor: 'payment_amount',
+      {
-      Cell: FormatNumberCell,
+        Header: intl.get('due_amount'),
-      width: 100,
+        accessor: 'bill.due_amount',
-      disableSortBy: true,
+        Cell: FormatNumberCell,
-      align: 'right',
+        width: getColumnWidth(entries, 'bill.due_amount', {
-    },
+          minWidth: 60,
-  ], []);
+          magicSpacing: 5,
+        }),
+        disableSortBy: true,
+        align: 'right',
+      },
+      {
+        Header: intl.get('payment_amount'),
+        accessor: 'payment_amount',
+        Cell: FormatNumberCell,
+        width: getColumnWidth(entries, 'payment_amount', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
+        disableSortBy: true,
+        textOverview: true,
+        align: 'right',
+      },
+    ],
+    [],
+  );
+};

src/containers/Drawers/PaymentReceiveDetailDrawer/utils.js

@@ -2,12 +2,18 @@ import React from 'react';
 import intl from 'react-intl-universal';
 import moment from 'moment';
 import { FormatNumberCell } from '../../../components';
+import { getColumnWidth } from 'utils';
+import { usePaymentReceiveDetailContext } from './PaymentReceiveDetailProvider';
 
 /**
  * Retrieve payment entries table columns.
  */
-export const usePaymentReceiveEntriesColumns = () =>
+export const usePaymentReceiveEntriesColumns = () => {
-  React.useMemo(
+  const {
+    paymentReceive: { entries },
+  } = usePaymentReceiveDetailContext();
+
+  return React.useMemo(
     () => [
       {
         Header: intl.get('date'),
@@ -27,24 +33,38 @@ export const usePaymentReceiveEntriesColumns = () =>
         Header: intl.get('invoice_amount'),
         accessor: 'invoice.balance',
         Cell: FormatNumberCell,
+        width: getColumnWidth(entries, 'invoice.balance', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
         align: 'right',
+        textOverview: true,
       },
       {
         Header: intl.get('amount_due'),
         accessor: 'invoice.due_amount',
         Cell: FormatNumberCell,
         align: 'right',
-        width: 100,
+        width: getColumnWidth(entries, 'invoice.due_amount', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
         disableSortBy: true,
+        textOverview: true,
       },
       {
         Header: intl.get('payment_amount'),
         accessor: 'invoice.payment_amount',
         Cell: FormatNumberCell,
         align: 'right',
-        width: 100,
+        width: getColumnWidth(entries, 'invoice.payment_amount', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
         disableSortBy: true,
+        textOverview: true,
       },
     ],
     [],
   );
+};

src/containers/Drawers/ReceiptDetailDrawer/utils.js

@@ -1,44 +1,69 @@
 import React from 'react';
 import intl from 'react-intl-universal';
-import { FormatNumberCell } from '../../../components';
+import { getColumnWidth } from 'utils';
+import { FormatNumberCell, TextOverviewTooltipCell } from '../../../components';
+import { useReceiptDetailDrawerContext } from './ReceiptDetailDrawerProvider.js';
 
-export const useReceiptReadonlyEntriesTableColumns = () => React.useMemo(() => [
+export const useReceiptReadonlyEntriesTableColumns = () => {
-    {
+  // Receipt details drawer context.
-      Header: intl.get('product_and_service'),
+  const {
-      accessor: 'item.name',
+    receipt: { entries },
-      width: 150,
+  } = useReceiptDetailDrawerContext();
-      className: 'name',
+  return React.useMemo(
-      disableSortBy: true
+    () => [
-    },
+      {
-    {
+        Header: intl.get('product_and_service'),
-      Header: intl.get('description'),
+        accessor: 'item.name',
-      accessor: 'description',
+        Cell: TextOverviewTooltipCell,
-      className: 'description',
+        width: 150,
-      disableSortBy: true
+        className: 'name',
-    },
+        disableSortBy: true,
-    {
+        textOverview: true,
-      Header: intl.get('quantity'),
+      },
-      accessor: 'quantity',
+      {
-      Cell: FormatNumberCell,
+        Header: intl.get('description'),
-      width: 100,
+        accessor: 'description',
-      align: 'right',
+        Cell: TextOverviewTooltipCell,
-      disableSortBy: true
+        className: 'description',
-    },
+        disableSortBy: true,
-    {
+        textOverview: true,
-      Header: intl.get('rate'),
+      },
-      accessor: 'rate',
+      {
-      Cell: FormatNumberCell,
+        Header: intl.get('quantity'),
-      width: 100,
+        accessor: 'quantity',
-      align: 'right',
+        Cell: FormatNumberCell,
-      disableSortBy: true
+        width: getColumnWidth(entries, 'quantity', {
-    },
+          minWidth: 60,
-    {
+          magicSpacing: 5,
-      Header: intl.get('amount'),
+        }),
-      accessor: 'amount',
+        align: 'right',
-      Cell: FormatNumberCell,
+        disableSortBy: true,
-      width: 100,
+      },
-      align: 'right',
+      {
-      disableSortBy: true
+        Header: intl.get('rate'),
-    },
+        accessor: 'rate',
-  ], []);
+        Cell: FormatNumberCell,
-  
+        width: getColumnWidth(entries, 'rate', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
+        align: 'right',
+        disableSortBy: true,
+        textOverview: true,
+      },
+      {
+        Header: intl.get('amount'),
+        accessor: 'amount',
+        Cell: FormatNumberCell,
+        width: getColumnWidth(entries, 'amount', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
+        align: 'right',
+        disableSortBy: true,
+        textOverview: true,
+      },
+    ],
+    [],
+  );
+};

src/containers/Drawers/VendorCreditDetailDrawer/utils.js

@@ -10,59 +10,82 @@ import {
   Tag,
   Intent,
 } from '@blueprintjs/core';
+import { getColumnWidth } from 'utils';
 import {
   Icon,
   FormattedMessage as T,
+  TextOverviewTooltipCell,
   FormatNumberCell,
   Choose,
 } from '../../../components';
+import { useVendorCreditDetailDrawerContext } from './VendorCreditDetailDrawerProvider';
 
 /**
  * Retrieve vendor credit readonly details entries table columns.
  */
-export const useVendorCreditReadonlyEntriesTableColumns = () =>
+export const useVendorCreditReadonlyEntriesTableColumns = () => {
-  React.useMemo(
+  const {
+    vendorCredit: { entries },
+  } = useVendorCreditDetailDrawerContext();
+  return React.useMemo(
     () => [
       {
         Header: intl.get('product_and_service'),
         accessor: 'item.name',
+        Cell: TextOverviewTooltipCell,
         width: 150,
         className: 'item',
         disableSortBy: true,
+        textOverview: true,
       },
       {
         Header: intl.get('description'),
         accessor: 'description',
+        Cell: TextOverviewTooltipCell,
         className: 'description',
         disableSortBy: true,
+        textOverview: true,
       },
       {
         Header: intl.get('quantity'),
         accessor: 'quantity',
         Cell: FormatNumberCell,
-        width: 100,
+        width: getColumnWidth(entries, 'quantity', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
         align: 'right',
         disableSortBy: true,
+        textOverview: true,
       },
       {
         Header: intl.get('rate'),
         accessor: 'rate',
         Cell: FormatNumberCell,
-        width: 100,
+        width: getColumnWidth(entries, 'rate', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
         align: 'right',
         disableSortBy: true,
+        textOverview: true,
       },
       {
         Header: intl.get('amount'),
         accessor: 'amount',
         Cell: FormatNumberCell,
-        width: 100,
+        width: getColumnWidth(entries, 'amount', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
         align: 'right',
         disableSortBy: true,
+        textOverview: true,
       },
     ],
     [],
   );
+};
 
 /**
  * Vendor note more actions menu.

src/containers/Drawers/WarehouseTransferDetailDrawer/utils.js

@@ -1,40 +1,58 @@
 import React from 'react';
 import intl from 'react-intl-universal';
 import { Intent, Tag } from '@blueprintjs/core';
+import { getColumnWidth } from 'utils';
+import { useWarehouseDetailDrawerContext } from './WarehouseTransferDetailDrawerProvider';
 
 import {
   FormattedMessage as T,
   FormatNumberCell,
+  TextOverviewTooltipCell,
   Choose,
 } from '../../../components';
 
-export const useWarehouseTransferReadOnlyEntriesColumns = () =>
+/**
-  React.useMemo(
+ * Retrieves the readonly warehouse transfer entries columns.
+ */
+export const useWarehouseTransferReadOnlyEntriesColumns = () => {
+  const {
+    warehouseTransfer: { entries },
+  } = useWarehouseDetailDrawerContext();
+
+  return React.useMemo(
     () => [
       {
         Header: intl.get('warehouse_transfer.column.item_name'),
         accessor: 'item.name',
-        width: 150,
+        Cell: TextOverviewTooltipCell,
+        width: 100,
         className: 'name',
         disableSortBy: true,
+        textOverview: true,
       },
       {
         Header: intl.get('warehouse_transfer.column.description'),
         accessor: 'description',
+        Cell: TextOverviewTooltipCell,
         className: 'description',
         disableSortBy: true,
+        textOverview: true,
       },
       {
         Header: intl.get('warehouse_transfer.column.transfer_quantity'),
         accessor: 'quantity',
         Cell: FormatNumberCell,
-        width: 100,
+        width: getColumnWidth(entries, 'quantity', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
         align: 'right',
         disableSortBy: true,
       },
     ],
     [],
   );
+};
 
 /**
  * Warehouses transfer details status.

src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeaderGeneralPane.js

@@ -1,7 +1,6 @@
 import React from 'react';
-import { FormGroup, Classes } from '@blueprintjs/core';
+import { Classes } from '@blueprintjs/core';
 import { FormattedMessage as T } from 'components';
-import classNames from 'classnames';
 
 import { AccountMultiSelect, Row, Col } from 'components';
 import { FFormGroup } from '../../../components/Forms';
@@ -47,10 +46,10 @@ function GLHeaderGeneralPaneContent() {
         <Col xs={4}>
           <FFormGroup
             label={<T id={'specific_accounts'} />}
-            name={'accounts'}
+            name={'accountsIds'}
             className={Classes.FILL}
           >
-            <AccountMultiSelect name="accounts" accounts={accounts} />
+            <AccountMultiSelect name="accountsIds" accounts={accounts} />
           </FFormGroup>
         </Col>
       </Row>

src/containers/FinancialStatements/GeneralLedger/common.js

@@ -32,7 +32,7 @@ export const getDefaultGeneralLedgerQuery = () => {
     basis: 'accural',
     filterByOption: 'with-transactions',
     branchesIds: [],
-    accounts: [],
+    accountsIds: [],
   };
 };
 
@@ -49,8 +49,9 @@ const parseGeneralLedgerQuery = (locationQuery) => {
   return {
     ...transformed,
 
-    // Ensures the branches ids is always array.
+    // Ensures the branches, accounts ids is always array.
     branchesIds: castArray(transformed.branchesIds),
+    accountsIds: castArray(transformed.accountsIds),
   };
 };
 

src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryProvider.js

@@ -12,7 +12,6 @@ function VendorsBalanceSummaryProvider({ filter, ...props }) {
   const query = React.useMemo(() => transformFilterFormToQuery(filter), [
     filter,
   ]);
-
   // Fetching vendors balance summary report based on the given query.
   const {
     data: VendorBalanceSummary,

src/lang/ar/index.json

@@ -1173,7 +1173,6 @@
   "From transaction": "من معاملة",
   "Landed": "Landed",
   "This options allows you to be able to add additional cost eg. freight then allocate cost to the items in your bills.": "يتيح لك هذا الخيار إمكانية إضافة تكلفة إضافية على سبيل المثال اضافة تكلفة الشحن ومن ثم تخصيص التكلفة لفواتير الشراء.",
-  "Once your delete this located landed cost, you won't be able to restore it later, Are your sure you want to delete this transaction?": "بمجرد حذف معاملة تحميل التكلفة ، لن تتمكن من استعادتها لاحقًا ، هل أنت متأكد من أنك تريد حذف هذه المعاملة؟",
   "journal_entries": "القيود",
   "contact": "جهة الاتصال",
   "invoice_details": "تفاصيل الفاتورة",
@@ -1390,7 +1389,7 @@
   "filter.value": "قيمة",
   "payment_made.empty_status.title": "المنشأة لم تدفع اي اموال إلي الموردين ، إلي حد الأن!.",
   "estimate.delete.error.estimate_converted_to_invoice": "لا يمكن حذف عملية عرض اسعار الذي تم تحويلها إلي فاتورة بيع.",
-  "landed_cost.action.delete.success_message": "The landed cost has been deleted successfully.",
+  "landed_cost.action.delete.success_message": "تم حذف تكلفة اضافية بنجاح. ",
   "items.option.only_active": "Only active",
   "items.option_all_items.hint": "جميع الاصناف ، بما في ذلك تلك الاصناف لديها رصيد صفر.",
   "items.option_with_transactions": "الاصناف مع معاملات",
@@ -1594,6 +1593,9 @@
   "refund": "استرجاع",
   "landed_cost.dialog.label_select_transaction": "حدد المعاملة ",
   "landed_cost.dialog.label_select_transaction_entry": "حدد سطر المعاملة ",
+  "landed_cost.dialog.label_unallocated_cost_amount":"قيمة التكلفة غير المحملة:",
+  "landed_cost.error.the_total_located_cost_is_bigger_than_the_transaction_line":"إجمالي قيمة التكلفة المحملة أكبر من قيمة سطر المعاملة.",
+  "landed_cost.once_your_delete_this_located_landed_cost": "بمجرد حذف معاملة تحميل التكلفة ، لن تتمكن من استعادتها لاحقًا ، هل أنت متأكد من أنك تريد حذف هذه المعاملة؟",
   "refund_credit_note.dialog.label": "استرجاع اموال",
   "refund_credit_note.dialog.success_message": "تم انشاء معاملة استرجاع الاموال لإشعار الدائن بنجاح.",
   "refund_credit_note.dialog.refund_date": "تاريخ الاسترجاع",

src/lang/en/index.json

@@ -1147,7 +1147,6 @@
   "From transaction": "From transaction",
   "landed": "Landed",
   "This options allows you to be able to add additional cost eg. freight then allocate cost to the items in your bills.": "This options allows you to be able to add additional cost eg. freight then allocate cost to the items in your bills.",
-  "Once your delete this located landed cost, you won't be able to restore it later, Are your sure you want to delete this transaction?": "Once your delete this located landed cost, you won't be able to restore it later, Are your sure you want to delete this transaction?",
   "journal_entries": "Journal Entries",
   "contact": "Contact",
   "invoice_details": "Invoice details",
@@ -1320,11 +1319,11 @@
   "inventory_adjustment.details_drawer.title": "Inventory adjustment details",
   "setup.organization.location": "Location",
   "preferences.general.success_message": "The general preferences has been saved.",
-  "customer.drawer.action.new_invoice": "New invoice",
+  "customer.drawer.action.new_invoice": "New Invoice",
-  "customer.drawer.action.new_estimate": "New estimate",
+  "customer.drawer.action.new_estimate": "New Estimate",
-  "customer.drawer.action.new_payment": "New payment",
+  "customer.drawer.action.new_payment": "New Payment",
-  "customer.drawer.action.new_receipt": "New receipt",
+  "customer.drawer.action.new_receipt": "New Receipt",
-  "customer.drawer.action.new_transaction": "New transaction",
+  "customer.drawer.action.new_transaction": "New Transaction",
   "customer.drawer.action.edit_opening_balance": "Edit Opening Balance",
   "customer.drawer.action.edit": "Edit",
   "customer.drawer.label.outstanding_receivable": "Outstanding receivable",
@@ -1351,9 +1350,9 @@
   "vendor.drawer.label.note": "Note",
   "vendor.drawer.action.edit_vendor": "Edit vendor",
   "vendor.drawer.action.delete": "Delete",
-  "vendor.drawer.action.new_transaction": "New transaction",
+  "vendor.drawer.action.new_transaction": "New Transaction",
-  "vendor.drawer.action.new_payment": "New payment",
+  "vendor.drawer.action.new_payment": "New Payment",
-  "vendor.drawer.action.new_invoice": "New purchase invoice",
+  "vendor.drawer.action.new_invoice": "New Purchase Invoice",
   "vendor.drawer.action.edit": "Edit",
   "vendor.drawer.action.edit_opening_balance": "Edit Opening Balance",
   "manual_journals.empty_status.description": "Manual journals can be used to record financial transactions manually, used by accountants to work with the ledger.",
@@ -1612,6 +1611,9 @@
   "refund": "Refund",
   "landed_cost.dialog.label_select_transaction": "Select transaction",
   "landed_cost.dialog.label_select_transaction_entry": "Select transaction entry",
+  "landed_cost.dialog.label_unallocated_cost_amount": "Unallocated cost Amount:",
+  "landed_cost.error.the_total_located_cost_is_bigger_than_the_transaction_line": "The total located cost is bigger than the transaction line.",
+  "landed_cost.once_your_delete_this_located_landed_cost": "Once your delete this located landed cost, you won't be able to restore it later, Are your sure you want to delete this transaction?",
   "refund_credit_note.dialog.label": "Refund Credit Note",
   "refund_credit_note.dialog.success_message": "The customer credit note refund has been created successfully.",
   "refund_credit_note.dialog.refund_date": "Refund date",

src/style/App.scss

@@ -290,3 +290,8 @@ html[lang^='ar'] {
 .font-bold {
   font-weight: 600;
 }
+
+
+span.table-tooltip-overview-target{
+  display: inline;
+}