Merge branch 'master' of https://github.com/abouolia/Bigcapital

client/src/containers/Drawers/BillDrawer/BillDetailFooter.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import clsx from 'classnames';
 
-import { TotalLines, TotalLine } from 'components';
+import { T, TotalLines, TotalLine } from 'components';
 import BillDrawerCls from 'style/components/Drawers/BillDrawer.module.scss';
 import { useBillDrawerContext } from './BillDrawerProvider';
 
@@ -12,22 +12,22 @@ export function BillDetailFooter() {
     <div className={clsx(BillDrawerCls.detail_panel_footer)}>
       <TotalLines>
         <TotalLine
-          title={'Subtotal'}
+          title={<T id={'bill.details.subtotal'} />}
           value={bill.amount}
           className={BillDrawerCls.total_line_subtotal}
         />
         <TotalLine
-          title={'TOTAL'}
+          title={<T id={'bill.details.total'} />}
           value={bill.amount}
           className={BillDrawerCls.total_line_total}
         />
         <TotalLine
-          title={'Payment made'}
+          title={<T id={'bill.details.payment_amount'} />}
           value={bill.payment_amount}
           className={BillDrawerCls.total_line_payment}
         />
         <TotalLine
-          title={'Due amount'}
+          title={<T id={'bill.details.due_amount'} />}
           value={bill.formatted_due_amount}
           className={BillDrawerCls.total_line_dueAmount}
         />

client/src/containers/Drawers/BillDrawer/BillDetailHeader.js

@@ -48,7 +48,10 @@ export default function BillDetailHeader() {
           label={intl.get('reference')}
           children={defaultTo(bill.reference_no, '--')}
         />
-        <DetailItem label={'Created at'} children={'2020 Ang 21'} />
+        <DetailItem
+          label={intl.get('bill.details.created_at')}
+          children={'2020 Ang 21'}
+        />
       </DetailsMenu>
     </div>
   );

client/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailFooter.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import clsx from 'classnames';
 
-import { TotalLines, TotalLine, If } from 'components';
+import { T, TotalLines, TotalLine, If } from 'components';
 
 import EstimateDetailsCls from 'style/components/Drawers/EstimateDetails.module.scss';
 
@@ -13,22 +13,22 @@ export default function EstimateDetailFooter() {
     <div className={clsx(EstimateDetailsCls.detail_panel_footer)}>
       <TotalLines className={clsx(EstimateDetailsCls.total_lines)}>
         <TotalLine
-          title={'Subtotal'}
+          title={<T id={'estimate.details.subtotal'} />}
           value={'1000'}
           className={EstimateDetailsCls.total_line_subtotal}
         />
         <TotalLine
-          title={'TOTAL'}
+          title={<T id={'estimate.details.total'} />}
           value={'1000'}
           className={EstimateDetailsCls.total_line_total}
         />
         <TotalLine
-          title={'Payment made'}
+          title={<T id={'estimate.details.payment_made'} />}
           value={'1000'}
           className={EstimateDetailsCls.total_line_payment}
         />
         <TotalLine
-          title={'Due amount'}
+          title={<T id={'estimate.details.due_amount'} />}
           value={'1000'}
           className={EstimateDetailsCls.total_line_dueAmount}
         />
@@ -37,7 +37,7 @@ export default function EstimateDetailFooter() {
       <If condition={false}>
         <div className={clsx(EstimateDetailsCls.detail_panel_note)}>
           <p>
-            <b>Note:</b> --
+            <b><T id={'estimate.details.note'} />:</b> --
           </p>
         </div>
       </If>

client/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailHeader.js

@@ -3,7 +3,7 @@ import intl from 'react-intl-universal';
 import { defaultTo } from 'lodash';
 import clsx from 'classnames';
 
-import { DetailsMenu, DetailItem } from 'components';
+import { T, DetailsMenu, DetailItem } from 'components';
 import { useEstimateDetailDrawerContext } from './EstimateDetailDrawerProvider';
 
 import EstimateDetailsCls from 'style/components/Drawers/EstimateDetails.module.scss';
@@ -43,7 +43,10 @@ export default function EstimateDetailHeader() {
           label={intl.get('reference')}
           children={defaultTo(estimate.reference, '-')}
         />
-        <DetailItem label={'Created at'} children={'2020 Ang 21'} />
+        <DetailItem
+          label={<T id={'estimate.details.created_at'} />}
+          children={'2020 Ang 21'}
+        />
       </DetailsMenu>
     </div>
   );

client/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerFooter.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { T } from 'components';
 import { useExpenseDrawerContext } from './ExpenseDrawerProvider';
 
 export default function ExpenseDrawerFooter() {
@@ -8,11 +9,11 @@ export default function ExpenseDrawerFooter() {
     <div className="expense-drawer__content-footer">
       <div class="total-lines">
         <div class="total-lines__line total-lines__line--subtotal">
-          <div class="title">Subtotal</div>
+          <div class="title"><T id={'expense.details.subtotal'} /></div>
           <div class="amount">{total_amount}</div>
         </div>
         <div class="total-lines__line total-lines__line--total">
-          <div class="title">TOTAL</div>
+          <div class="title"><T id={'expense.details.total'} /></div>
           <div class="amount">{total_amount}</div>
         </div>
       </div>

client/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailFooter.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import clsx from 'classnames';
 
-import { TotalLines, TotalLine } from 'components';
+import { T, TotalLines, TotalLine } from 'components';
 import InvoiceDrawerCls from 'style/components/Drawers/InvoiceDrawer.module.scss';
 import { useInvoiceDetailDrawerContext } from './InvoiceDetailDrawerProvider';
 
@@ -15,22 +15,22 @@ export function InvoiceDetailFooter() {
     <div className={clsx(InvoiceDrawerCls.detail_panel_footer)}>
       <TotalLines>
         <TotalLine
-          title={'Subtotal'}
+          title={<T id={'invoice.details.subtotal'} />}
           value={invoice.balance}
           className={InvoiceDrawerCls.total_line_subtotal}
         />
         <TotalLine
-          title={'TOTAL'}
+          title={<T id={'invoice.details.total'} />}
           value={invoice.balance}
           className={InvoiceDrawerCls.total_line_total}
         />
         <TotalLine
-          title={'Payment made'}
+          title={<T id={'invoice.details.payment_amount'} />}
           value={invoice.payment_amount}
           className={InvoiceDrawerCls.total_line_payment}
         />
         <TotalLine
-          title={'Due amount'}
+          title={<T id={'invoice.details.due_amount'} />}
           value={'1000'}
           className={InvoiceDrawerCls.total_line_dueAmount}
         />

client/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailHeader.js

@@ -47,7 +47,10 @@ export default function InvoiceDetailHeader() {
           label={intl.get('reference')}
           children={defaultTo(invoice.reference_no, '--')}
         />
-        <DetailItem label={'Created at'} children={'2020 Ang 21'} />
+        <DetailItem
+          label={intl.get('invoice.details.created_at')}
+          children={'2020 Ang 21'}
+        />
       </DetailsMenu>
     </div>
   );

client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailFooter.js

@@ -1,28 +1,24 @@
 import React from 'react';
 import clsx from 'classnames';
 
-import { TotalLines, TotalLine } from 'components';
+import { T, TotalLines, TotalLine } from 'components';
-
-import { usePaymentMadeDetailContext } from './PaymentMadeDetailProvider';
-
 import PaymentDrawerCls from './PaymentMadeDrawer.module.scss';
 
 /**
  * Payment made - Details panel - Footer.
  */
 export default function PaymentMadeDetailFooter() {
-  const { } = usePaymentMadeDetailContext();
 
   return (
     <div className={clsx(PaymentDrawerCls.detail_panel_footer)}>
       <TotalLines>
         <TotalLine
-          title={'Subtotal'}
+          title={<T id={'payment_made.details.subtotal'} />}
           value={1000}
           className={clsx(PaymentDrawerCls.total_line_subtotal)}
         />
         <TotalLine
-          title={'TOTAL'}
+          title={<T id={'payment_made.details.total'} />}
           value={1000}
           className={clsx(PaymentDrawerCls.total_line_total)}
         />

client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailFooter.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import clsx from 'classnames';
 
-import { TotalLine, TotalLines } from 'components';
+import { T, TotalLine, TotalLines } from 'components';
 import { usePaymentReceiveDetailContext } from './PaymentReceiveDetailProvider';
 
 import PaymentDrawerCls from './PaymentReceiveDrawer.module.scss';
@@ -16,12 +16,12 @@ export default function PaymentReceiveDetailFooter() {
     <div className={clsx(PaymentDrawerCls.detail_panel_footer)}>
       <TotalLines>
         <TotalLine
-          title={'Subtotal'}
+          title={<T id={'payment_receive.details.subtotal'} />}
           value={paymentReceive.amount}
           className={PaymentDrawerCls.total_line_subtotal}
         />
         <TotalLine
-          title={'TOTAL'}
+          title={<T id={'payment_receive.details.total'} />}
           value={paymentReceive.amount}
           className={PaymentDrawerCls.total_line_total}
         />

client/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailFooter.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import clsx from 'classnames';
 
-import { TotalLines, TotalLine } from 'components';
+import { T, TotalLines, TotalLine } from 'components';
 
 import ReceiptDrawerCls from 'style/components/Drawers/ReceiptDrawer.module.scss';
 import { useReceiptDetailDrawerContext } from './ReceiptDetailDrawerProvider';
@@ -13,22 +13,22 @@ export function ReceiptDetailFooter() {
     <div className={clsx(ReceiptDrawerCls.detail_panel_footer)}>
       <TotalLines>
         <TotalLine
-          title={'Subtotal'}
+          title={<T id={'receipt.details.subtotal'} />}
           value={receipt.amount}
           className={ReceiptDrawerCls.total_line_subtotal}
         />
         <TotalLine
-          title={'TOTAL'}
+          title={<T id={'receipt.details.total'} />}
           value={receipt.amount}
           className={ReceiptDrawerCls.total_line_total}
         />
         <TotalLine
-          title={'Payment made'}
+          title={<T id={'receipt.details.payment_amount'} />}
           value={receipt.amount}
           className={ReceiptDrawerCls.total_line_payment}
         />
         <TotalLine
-          title={'Due amount'}
+          title={<T id={'receipt.details.due_amount'} />}
           value={'0'}
           className={ReceiptDrawerCls.total_line_dueAmount}
         />

client/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailHeader.js

@@ -40,7 +40,7 @@ export default function ReceiptDetailHeader() {
       </DetailsMenu>
 
       <DetailsMenu direction={'horizantal'}>
-      <DetailItem
+        <DetailItem
           label={intl.get('deposit_account')}
           children={receipt.deposit_account?.name}
         />
@@ -48,7 +48,10 @@ export default function ReceiptDetailHeader() {
           label={intl.get('reference')}
           children={defaultTo(receipt.reference_no, '--')}
         />
-        <DetailItem label={'Created at'} children={'2020 Ang 21'} />
+        <DetailItem
+          label={intl.get('receipt.details.created_at')}
+          children={'2020 Ang 21'}
+        />
       </DetailsMenu>
     </div>
   );

client/src/containers/Items/ItemForm.js

@@ -1,10 +1,9 @@
-import React, { useMemo } from 'react';
+import React from 'react';
 import { Formik, Form } from 'formik';
 import { Intent } from '@blueprintjs/core';
 import { useHistory } from 'react-router-dom';
 import intl from 'react-intl-universal';
 import classNames from 'classnames';
-import { defaultTo } from 'lodash';
 
 import 'style/pages/Items/PageForm.scss';
 
@@ -15,43 +14,15 @@ import ItemFormBody from './ItemFormBody';
 import ItemFormFloatingActions from './ItemFormFloatingActions';
 import ItemFormInventorySection from './ItemFormInventorySection';
 
-import withSettings from 'containers/Settings/withSettings';
+import { useItemFormInitialValues } from './utils';
-
+import { EditItemFormSchema, CreateItemFormSchema } from './ItemForm.schema';
-import { compose, transformToForm } from 'utils';
-import {
-  EditItemFormSchema,
-  CreateItemFormSchema,
-  transformItemFormData,
-} from './ItemForm.schema';
 
 import { useItemFormContext } from './ItemFormProvider';
 
-const defaultInitialValues = {
-  active: 1,
-  name: '',
-  type: 'service',
-  code: '',
-  cost_price: '',
-  sell_price: '',
-  cost_account_id: '',
-  sell_account_id: '',
-  inventory_account_id: '',
-  category_id: '',
-  sellable: 1,
-  purchasable: true,
-  sell_description: '',
-  purchase_description: '',
-};
-
 /**
  * Item form.
  */
-function ItemForm({
+export default function ItemForm() {
-  // #withSettings
-  preferredCostAccount,
-  preferredSellAccount,
-  preferredInventoryAccount,
-}) {
   // Item form context.
   const {
     itemId,
@@ -66,32 +37,8 @@ function ItemForm({
   // History context.
   const history = useHistory();
 
-  /**
+  // Initial values in create and edit mode.
-   * Initial values in create and edit mode.
+  const initialValues = useItemFormInitialValues(item);
-   */
-  const initialValues = useMemo(
-    () => ({
-      ...defaultInitialValues,
-      cost_account_id: defaultTo(preferredCostAccount, ''),
-      sell_account_id: defaultTo(preferredSellAccount, ''),
-      inventory_account_id: defaultTo(preferredInventoryAccount, ''),
-      /**
-       * We only care about the fields in the form. Previously unfilled optional
-       * values such as `notes` come back from the API as null, so remove those
-       * as well.
-       */
-      ...transformToForm(
-        transformItemFormData(item, defaultInitialValues),
-        defaultInitialValues,
-      ),
-    }),
-    [
-      item,
-      preferredCostAccount,
-      preferredSellAccount,
-      preferredInventoryAccount,
-    ],
-  );
 
   // Transform API errors.
   const transformApiErrors = (error) => {
@@ -179,11 +126,3 @@ function ItemForm({
     </div>
   );
 }
-
-export default compose(
-  withSettings(({ itemsSettings }) => ({
-    preferredCostAccount: parseInt(itemsSettings?.costAccount),
-    preferredSellAccount: parseInt(itemsSettings?.sellAccount),
-    preferredInventoryAccount: parseInt(itemsSettings?.inventoryAccount),
-  })),
-)(ItemForm);

client/src/containers/Items/ItemFormProvider.js

@@ -1,9 +1,10 @@
 import React, { useEffect, createContext, useState } from 'react';
 import intl from 'react-intl-universal';
-import { useLocation, useParams } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import {
   useItem,
+  useSettingsItems,
   useItemsCategories,
   useCreateItem,
   useEditItem,
@@ -37,6 +38,13 @@ function ItemFormProvider({ itemId, ...props }) {
       enabled: !!itemId || !!duplicateId,
     },
   );
+
+  // Fetches item settings.
+  const {
+    isLoading: isItemsSettingsLoading,
+    isFetching: isItemsSettingsFetching,
+  } = useSettingsItems();
+
   // Create and edit item mutations.
   const { mutateAsync: editItemMutate } = useEditItem();
   const { mutateAsync: createItemMutate } = useCreateItem();
@@ -65,9 +73,6 @@ function ItemFormProvider({ itemId, ...props }) {
     setSubmitPayload,
   };
 
-  // Format message intl.
-  
-
   // Change page title dispatcher.
   const changePageTitle = useDashboardPageTitle();
 
@@ -78,11 +83,14 @@ function ItemFormProvider({ itemId, ...props }) {
       : changePageTitle(intl.get('edit_item_details'));
   }, [changePageTitle, isNewMode]);
 
+  const loading =
+    isItemsSettingsLoading ||
+    isAccountsLoading ||
+    isItemsCategoriesLoading ||
+    isItemLoading;
+
   return (
-    <DashboardInsider
+    <DashboardInsider loading={loading} name={'item-form'}>
-      loading={isAccountsLoading || isItemsCategoriesLoading || isItemLoading}
-      name={'item-form'}
-    >
       <ItemFormContext.Provider value={provider} {...props} />
     </DashboardInsider>
   );

client/src/containers/Items/utils.js

@@ -1,10 +1,61 @@
+import { useMemo } from 'react';
 import intl from 'react-intl-universal';
 import { Intent } from '@blueprintjs/core';
+import { defaultTo } from 'lodash';
 import { AppToaster } from 'components';
 import {
   transformTableStateToQuery,
   defaultFastFieldShouldUpdate,
 } from 'utils';
+import { transformToForm } from 'utils';
+import { useSettingsSelector } from '../../hooks/state';
+import { transformItemFormData } from './ItemForm.schema';
+
+const defaultInitialValues = {
+  active: 1,
+  name: '',
+  type: 'service',
+  code: '',
+  cost_price: '',
+  sell_price: '',
+  cost_account_id: '',
+  sell_account_id: '',
+  inventory_account_id: '',
+  category_id: '',
+  sellable: 1,
+  purchasable: true,
+  sell_description: '',
+  purchase_description: '',
+};
+
+/**
+ * Initial values in create and edit mode.
+ */
+export const useItemFormInitialValues = (item) => {
+  const { items: itemsSettings } = useSettingsSelector();
+
+  return useMemo(
+    () => ({
+      ...defaultInitialValues,
+      cost_account_id: defaultTo(itemsSettings.preferredCostAccount, ''),
+      sell_account_id: defaultTo(itemsSettings.preferredSellAccount, ''),
+      inventory_account_id: defaultTo(
+        itemsSettings.preferredInventoryAccount,
+        '',
+      ),
+      /**
+       * We only care about the fields in the form. Previously unfilled optional
+       * values such as `notes` come back from the API as null, so remove those
+       * as well.
+       */
+      ...transformToForm(
+        transformItemFormData(item, defaultInitialValues),
+        defaultInitialValues,
+      ),
+    }),
+    [item, itemsSettings],
+  );
+};
 
 export const transitionItemTypeKeyToLabel = (itemTypeKey) => {
   const table = {
@@ -130,4 +181,4 @@ export function transformItemsTableState(tableState) {
     ...transformTableStateToQuery(tableState),
     inactive_mode: tableState.inactiveMode,
   };
-}
+}

client/src/containers/Preferences/Item/Item.js

@@ -1,14 +0,0 @@
-import React from 'react';
-import ItemFormPage from './ItemFormPage';
-import { ItemFormProvider } from './ItemFormProvider';
-
-/**
- * items preferences.
- */
-export default function ItemsPreferences() {
-  return (
-    <ItemFormProvider>
-      <ItemFormPage />
-    </ItemFormProvider>
-  );
-}

client/src/containers/Preferences/Item/Item.schema.js

@@ -1,9 +0,0 @@
-import * as Yup from 'yup';
-
-const Schema = Yup.object().shape({
-  sell_account: Yup.number().nullable(),
-  cost_account: Yup.number().nullable(),
-  inventory_account: Yup.number().nullable(),
-});
-
-export const ItemPreferencesSchema = Schema;

client/src/containers/Preferences/Item/ItemPreferences.schema.js

@@ -0,0 +1,9 @@
+import * as Yup from 'yup';
+
+const Schema = Yup.object().shape({
+  preferred_sell_account: Yup.number().nullable(),
+  preferred_cost_account: Yup.number().nullable(),
+  preferred_inventory_account: Yup.number().nullable(),
+});
+
+export const ItemPreferencesSchema = Schema;

client/src/containers/Preferences/Item/ItemPreferencesForm.js

@@ -1,21 +1,23 @@
 import React from 'react';
 import { Form, FastField, useFormikContext } from 'formik';
 import { FormGroup, Button, Intent } from '@blueprintjs/core';
-import { AccountsSelectList, FieldRequiredHint } from 'components';
-import { FormattedMessage as T } from 'components';
-import intl from 'react-intl-universal';
 import { useHistory } from 'react-router-dom';
+import {
+  AccountsSelectList,
+  FieldRequiredHint,
+  FormattedMessage as T,
+} from 'components';
 import { inputIntent } from 'utils';
 import { ACCOUNT_PARENT_TYPE, ACCOUNT_TYPE } from 'common/accountTypes';
 
-import { useItemFormContext } from './ItemFormProvider';
+import { useItemPreferencesFormContext } from './ItemPreferencesFormProvider';
 
 /**
- * item form preferences.
+ * Item preferences form.
  */
 export default function ItemForm() {
   const history = useHistory();
-  const { accounts } = useItemFormContext();
+  const { accounts } = useItemPreferencesFormContext();
 
   const { isSubmitting } = useFormikContext();
 
@@ -26,7 +28,7 @@ export default function ItemForm() {
   return (
     <Form>
       {/* ----------- preferred sell account ----------- */}
-      <FastField name={'sell_account'}>
+      <FastField name={'preferred_sell_account'}>
         {({
           form: { values, setFieldValue },
           field: { value },
@@ -51,7 +53,7 @@ export default function ItemForm() {
             <AccountsSelectList
               accounts={accounts}
               onAccountSelected={({ id }) => {
-                setFieldValue('sell_account', id);
+                setFieldValue('preferred_sell_account', id);
               }}
               selectedAccountId={value}
               defaultSelectText={<T id={'select_payment_account'} />}
@@ -62,7 +64,7 @@ export default function ItemForm() {
       </FastField>
 
       {/* ----------- preferred cost account ----------- */}
-      <FastField name={'cost_account'}>
+      <FastField name={'preferred_cost_account'}>
         {({
           form: { values, setFieldValue },
           field: { value },
@@ -87,7 +89,7 @@ export default function ItemForm() {
             <AccountsSelectList
               accounts={accounts}
               onAccountSelected={({ id }) => {
-                setFieldValue('cost_account', id);
+                setFieldValue('preferred_cost_account', id);
               }}
               selectedAccountId={value}
               defaultSelectText={<T id={'select_payment_account'} />}
@@ -98,7 +100,7 @@ export default function ItemForm() {
       </FastField>
 
       {/* ----------- preferred inventory account ----------- */}
-      <FastField name={'inventory_account'}>
+      <FastField name={'preferred_inventory_account'}>
         {({
           form: { values, setFieldValue },
           field: { value },
@@ -123,7 +125,7 @@ export default function ItemForm() {
             <AccountsSelectList
               accounts={accounts}
               onAccountSelected={({ id }) => {
-                setFieldValue('inventory_account', id);
+                setFieldValue('preferred_inventory_account', id);
               }}
               selectedAccountId={value}
               defaultSelectText={<T id={'select_payment_account'} />}

client/src/containers/Preferences/Item/ItemPreferencesFormPage.js

@@ -3,10 +3,10 @@ import { Formik } from 'formik';
 import { Intent } from '@blueprintjs/core';
 import { AppToaster } from 'components';
 import intl from 'react-intl-universal';
-import { ItemPreferencesSchema } from './Item.schema';
+import { ItemPreferencesSchema } from './ItemPreferences.schema';
-import ItemForm from './ItemForm';
+import ItemPreferencesForm from './ItemPreferencesForm';
 
-import { useItemFormContext } from './ItemFormProvider';
+import { useItemPreferencesFormContext } from './ItemPreferencesFormProvider';
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withSettings from 'containers/Settings/withSettings';
 import { compose, optionsMapToArray, transformGeneralSettings } from 'utils';
@@ -14,20 +14,20 @@ import { compose, optionsMapToArray, transformGeneralSettings } from 'utils';
 import 'style/pages/Preferences/Accounting.scss';
 
 // item form page preferences.
-function ItemFormPage({
+function ItemPreferencesFormPage({
   // #withSettings
   itemsSettings,
 
   // #withDashboardActions
   changePreferencesPageTitle,
 }) {
-  
+  const { saveSettingMutate } = useItemPreferencesFormContext();
-  const { saveSettingMutate } = useItemFormContext();
 
+  // Initial values.
   const initialValues = {
-    sell_account: '',
+    preferred_sell_account: '',
-    cost_account: '',
+    preferred_cost_account: '',
-    inventory_account: '',
+    preferred_inventory_account: '',
     ...transformGeneralSettings(itemsSettings),
   };
 
@@ -59,7 +59,7 @@ function ItemFormPage({
       initialValues={initialValues}
       validationSchema={ItemPreferencesSchema}
       onSubmit={handleFormSubmit}
-      component={ItemForm}
+      component={ItemPreferencesForm}
     />
   );
 }
@@ -67,4 +67,4 @@ function ItemFormPage({
 export default compose(
   withSettings(({ itemsSettings }) => ({ itemsSettings })),
   withDashboardActions,
-)(ItemFormPage);
+)(ItemPreferencesFormPage);

client/src/containers/Preferences/Item/ItemPreferencesFormProvider.js

@@ -2,7 +2,7 @@ import React, { useContext, createContext } from 'react';
 import classNames from 'classnames';
 import { CLASSES } from 'common/classes';
 
-import { useAccounts, useSaveSettings } from 'hooks/query';
+import { useSettingsItems, useAccounts, useSaveSettings } from 'hooks/query';
 import PreferencesPageLoader from '../PreferencesPageLoader';
 
 const ItemFormContext = createContext();
@@ -11,10 +11,15 @@ const ItemFormContext = createContext();
  * Item data provider.
  */
 
-function ItemFormProvider({ ...props }) {
+function ItemPreferencesFormProvider({ ...props }) {
   // Fetches the accounts list.
   const { isLoading: isAccountsLoading, data: accounts } = useAccounts();
 
+  const {
+    isLoading: isItemsSettingsLoading,
+    isFetching: isItemsSettingsFetching,
+  } = useSettingsItems();
+
   // Save Organization Settings.
   const { mutateAsync: saveSettingMutate } = useSaveSettings();
 
@@ -24,7 +29,7 @@ function ItemFormProvider({ ...props }) {
     saveSettingMutate,
   };
 
-  const isLoading = isAccountsLoading;
+  const isLoading = isAccountsLoading || isItemsSettingsLoading;
 
   return (
     <div
@@ -44,6 +49,6 @@ function ItemFormProvider({ ...props }) {
   );
 }
 
-const useItemFormContext = () => useContext(ItemFormContext);
+const useItemPreferencesFormContext = () => useContext(ItemFormContext);
 
-export { useItemFormContext, ItemFormProvider };
+export { useItemPreferencesFormContext, ItemPreferencesFormProvider };

client/src/containers/Preferences/Item/index.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import ItemPreferencesFormPage from './ItemPreferencesFormPage';
+import { ItemPreferencesFormProvider } from './ItemPreferencesFormProvider';
+
+/**
+ * items preferences.
+ */
+export default function ItemsPreferences() {
+  return (
+    <ItemPreferencesFormProvider>
+      <ItemPreferencesFormPage />
+    </ItemPreferencesFormProvider>
+  );
+}

client/src/hooks/query/settings.js

@@ -99,4 +99,16 @@ export function useSettingsManualJournals(props) {
     { group: 'sale_receipts' },
     props,
   );
+}
+
+/**
+ * Retrieve sale receipts settings.
+ * @param {*} props 
+ */
+ export function useSettingsItems(props) {
+  return useSettingsQuery(
+    [t.SETTING, t.SETTING_ITEMS],
+    { group: 'items' },
+    props,
+  );
 }

client/src/hooks/query/types.js

@@ -99,6 +99,7 @@ const SETTING = {
   SETTING_RECEIPTS: 'SETTING_RECEIPTS',
   SETTING_PAYMENT_RECEIVES: 'SETTING_PAYMENT_RECEIVES',
   SETTING_MANUAL_JOURNALS: 'SETTING_MANUAL_JOURNALS',
+  SETTING_ITEMS: 'SETTING_ITEMS'
 };
 
 const ORGANIZATIONS = {

client/src/hooks/state/settings.js

@@ -1,12 +1,21 @@
-import { useCallback } from "react";
+import { useCallback } from 'react';
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from 'react-redux';
 import { setSettings } from 'store/settings/settings.actions';
 
-
 export const useSetSettings = () => {
-  const dispatch =  useDispatch();
+  const dispatch = useDispatch();
 
-  return useCallback((settings) => {
+  return useCallback(
-    dispatch(setSettings(settings));
+    (settings) => {
-  }, [dispatch]);
+      dispatch(setSettings(settings));
-};
+    },
+    [dispatch],
+  );
+};
+
+/**
+ * Retrieve the authentication token.
+ */
+export const useSettingsSelector = () => {
+  return useSelector((state) => state.settings.data);
+};

client/src/lang/ar/index.json

@@ -1155,7 +1155,7 @@
   "valuation": "القيمة",
   "select_transaction": "حدد حساب المعاملة",
   "details": "التفاصيل",
-  "located_landed_cost": "Located Landed Cost",
+  "located_landed_cost": "تكاليف اضافية المحملة",
   "delete_transaction": "مسح العملية",
   "all_items": "كل الاصناف",
   "Specific items": "اصناف محددة",
@@ -1215,14 +1215,41 @@
   "estimate_preview.dialog.title": "معاينة عرض PDF",
   "receipt_preview.dialog.title":"معاينة إيصال PDF",
   "edit_contact": "Edit {name}",
-  "item.sell_description": "Sell description",
+  "item.sell_description": "وصف البيع",
-  "item.purchase_description": "Purchase description",
+  "item.purchase_description": "وصف الشراء",
-  "closed_date": "Closed date",
+  "closed_date": "تاريخ الاغلاق",
-  "payment_made.details.payment_number": "Payment #",
+  "payment_made.details.payment_number": "رقم العملية",
-  "payment_receive.details.payment_number": "Payment #",
+  "payment_made.details.subtotal": "المجموع",
-  "estimate.details.estimate_number": "Estimate #",
+  "payment_made.details.total": "إجمالي",
-  "receipt.details.receipt_number": "Receipt #",
+  "payment_receive.details.payment_number": "رقم العملية",
-  "bill.details.bill_number": "Bill #",
+  "payment_receive.details.total": "إجمالي",
+  "payment_receive.details.subtotal": "المجموع",
+  "estimate.details.estimate_number": "رقم العرض",
+  "estimate.details.subtotal": "المجموع",
+  "estimate.details.total": "إجمالي",
+  "estimate.details.payment_made": "مبلغ المدفوع",
+  "estimate.details.due_amount": "مبلغ المستحق",
+  "estimate.details.note": "ملاحظة",
+  "estimate.details.created_at": "أنشئت في",
+  "receipt.details.receipt_number": "رقم إيصال",
+  "receipt.details.subtotal": "المجموع",
+  "receipt.details.total": "إجمالي",
+  "receipt.details.payment_amount": "مبلغ المدفوع",
+  "receipt.details.due_amount": "مبلغ المستحق",
+  "receipt.details.created_at": "أنشئت في",
+  "bill.details.bill_number": "رقم الفاتورة",
+  "bill.details.created_at": "أنشئت في",
+  "bill.details.total": "إجمالي",
+  "bill.details.subtotal": "المجموع",
+  "bill.details.payment_amount": "مبلغ المدفوع",
+  "bill.details.due_amount": "مبلغ المستحق",
+  "invoice.details.created_at": "أنشئت في",
+  "invoice.details.total": "إجمالي",
+  "invoice.details.subtotal": "المجموع",
+  "invoice.details.due_amount": "مبلغ المستحق",
+  "invoice.details.payment_amount": "مبلغ المدفوع",
+  "expense.details.subtotal": "المجموع",
+  "expense.details.total": "إجمالي",
   "setup.left_side.title": "سجل منشأة جديدة الأن.",
   "setup.left_side.description": "حسابك علي Bigcapital",
   "setup.left_side.footer_help": "نحن هنا للمساعدة!",

client/src/lang/en/index.json

@@ -1190,10 +1190,37 @@
   "item.purchase_description": "Purchase description",
   "closed_date": "Closed date",
   "payment_made.details.payment_number": "Payment #",
+  "payment_made.details.subtotal": "Subtotal",
+  "payment_made.details.total": "TOTAL",
   "payment_receive.details.payment_number": "Payment #",
+  "payment_receive.details.total": "TOTAL",
+  "payment_receive.details.subtotal": "Subtotal",
   "estimate.details.estimate_number": "Estimate #",
+  "estimate.details.subtotal": "Subtotal",
+  "estimate.details.total": "TOTAL",
+  "estimate.details.payment_made": "Payment made",
+  "estimate.details.due_amount": "Due amount",
+  "estimate.details.note": "Note",
+  "estimate.details.created_at": "Created at",
   "receipt.details.receipt_number": "Receipt #",
+  "receipt.details.subtotal": "Subtotal",
+  "receipt.details.total": "TOTAL",
+  "receipt.details.payment_amount": "Payment amount",
+  "receipt.details.due_amount": "Due amount",
+  "receipt.details.created_at": "Created at",
+  "invoice.details.created_at": "Created at",
+  "invoice.details.total": "TOTAL",
+  "invoice.details.subtotal": "Subtotal",
+  "invoice.details.due_amount": "Due amount",
+  "invoice.details.payment_amount": "Payment amount",
   "bill.details.bill_number": "Bill #",
+  "bill.details.created_at": "Created at",
+  "bill.details.total": "TOTAL",
+  "bill.details.subtotal": "Subtotal",
+  "bill.details.payment_amount": "Payment amount",
+  "bill.details.due_amount": "Due amount",
+  "expense.details.subtotal": "Subtotal",
+  "expense.details.total": "Total",
   "setup.left_side.title": "Register a New Organization now!.",
   "setup.left_side.description": "You have a Bigcapital account",
   "setup.left_side.footer_help": "We’re Here to Help!",

client/src/routes/preferences.js

@@ -3,7 +3,7 @@ import Users from 'containers/Preferences/Users/Users';
 import Accountant from 'containers/Preferences/Accountant/Accountant';
 // import Accounts from 'containers/Preferences/Accounts/Accounts';
 import Currencies from 'containers/Preferences/Currencies/Currencies';
-import Item from 'containers/Preferences/Item/Item';
+import Item from 'containers/Preferences/Item';
 import DefaultRoute from '../containers/Preferences/DefaultRoute';
 
 const BASE_URL = '/preferences';

server/src/data/options.js

@@ -93,21 +93,21 @@ export default {
     auto_increment: {
       type: 'boolean',
     },
-    deposit_account: {
+    preferred_deposit_account: {
       type: 'number',
     },
-    advance_deposit: {
+    preferred_advance_deposit: {
       type: 'number',
     },
   },
   items: {
-    sell_account: {
+    preferred_sell_account: {
       type: 'number',
     },
-    cost_account: {
+    preferred_cost_account: {
       type: 'number',
     },
-    inventory_account: {
+    preferred_inventory_account: {
       type: 'number',
     },
   },

server/src/database/seeds/core/20200810121809_seed_settings.js

@@ -16,10 +16,6 @@ exports.up = (knex) => {
     { group: 'sales_invoices', key: 'number_prefix', value: 'INV-' },
     { group: 'sales_invoices', key: 'auto_increment', value: true },
 
-    { group: 'sales_invoices', key: 'next_number', value: '00001' },
-    { group: 'sales_invoices', key: 'number_prefix', value: 'INV-' },
-    { group: 'sales_invoices', key: 'auto_increment', value: true },
-
     // Sale receipts settings.
     { group: 'sales_receipts', key: 'next_number', value: '00001' },
     { group: 'sales_receipts', key: 'number_prefix', value: 'REC-' },

server/src/database/seeds/core/20200810121909_seed_items_settings.js

@@ -0,0 +1,27 @@
+exports.up = async (knex) => {
+  const costAccount = await knex('accounts')
+    .where('slug', 'cost-of-goods-sold')
+    .first();
+
+  const sellAccount = await knex('accounts')
+    .where('slug', 'sales-of-product-income')
+    .first();
+
+  const inventoryAccount = await knex('accounts')
+    .where('slug', 'inventory-asset')
+    .first();
+
+  const settings = [
+    // Items settings.
+    { group: 'items', key: 'preferred_sell_account', value: sellAccount?.id },
+    { group: 'items', key: 'preferred_cost_account', value: costAccount?.id },
+    {
+      group: 'items',
+      key: 'preferred_inventory_account',
+      value: inventoryAccount?.id,
+    },
+  ];
+  return knex('settings').insert(settings);
+};
+
+exports.down = (knex) => {};