Merge pull request #904 from bigcapitalhq/fix-landed-cost-dialog

fix: landed cost dialog
2026-02-15 12:20:31 +00:00 · 2026-01-17 21:45:23 +02:00
parent 4efc0b3eb4 7ee161733f
commit f26a59f0fb
11 changed files with 77 additions and 33 deletions
--- a/packages/server/src/i18n/en/bill.json
+++ b/packages/server/src/i18n/en/bill.json
@@ -22,6 +22,9 @@
  "field.status.unpaid": "Unpaid",
  "field.status.opened": "Opened",
  "field.status.draft": "Draft",
-  "field.created_at": "Created At"
+  "field.created_at": "Created At",
+  "allocation_method": "Allocation Method",
+  "allocation_method.quantity": "Quantity",
+  "allocation_method.value": "Valuation"
 }

--- a/packages/server/src/modules/BillLandedCosts/LandedCost.controller.ts
+++ b/packages/server/src/modules/BillLandedCosts/LandedCost.controller.ts
@@ -25,7 +25,7 @@ export class BillAllocateLandedCostController {
    private billAllocatedCostTransactions: BillAllocatedLandedCostTransactions,
    private revertAllocatedLandedCost: RevertAllocatedLandedCost,
    private landedCostTransactions: LandedCostTranasctions,
-  ) {}
+  ) { }

  @Get('/transactions')
  @ApiOperation({ summary: 'Get landed cost transactions' })
--- a/packages/server/src/modules/BillLandedCosts/commands/BillAllocatedLandedCostTransactions.service.ts
+++ b/packages/server/src/modules/BillLandedCosts/commands/BillAllocatedLandedCostTransactions.service.ts
@@ -21,7 +21,7 @@ export class BillAllocatedLandedCostTransactions {
    private readonly billLandedCostModel: TenantModelProxy<
      typeof BillLandedCost
    >,
-  ) {}
+  ) { }

  /**
   * Retrieve the bill associated landed cost transactions.
@@ -77,6 +77,13 @@ export class BillAllocatedLandedCostTransactions {
      transaction.fromTransactionType,
      transaction,
    );
+    const allocationMethodFormattedKey = transaction.allocationMethodFormatted;
+    const allocationMethodFormatted = allocationMethodFormattedKey
+      ? this.i18nService.t(allocationMethodFormattedKey, {
+        defaultValue: allocationMethodFormattedKey,
+      })
+      : '';
+
    return {
      formattedAmount: formatNumber(transaction.amount, {
        currencyCode: transaction.currencyCode,
@@ -84,12 +91,14 @@ export class BillAllocatedLandedCostTransactions {
      ...omit(transaction, [
        'allocatedFromBillEntry',
        'allocatedFromExpenseEntry',
+        'allocationMethodFormatted',
      ]),
      name,
      description,
      formattedLocalAmount: formatNumber(transaction.localAmount, {
        currencyCode: 'USD',
      }),
+      allocationMethodFormatted,
    };
  };

--- a/packages/server/src/modules/BillLandedCosts/commands/LandedCostTransactions.service.ts
+++ b/packages/server/src/modules/BillLandedCosts/commands/LandedCostTransactions.service.ts
@@ -14,7 +14,7 @@ import { LandedCostTransactionsQueryDto } from '../dtos/LandedCostTransactionsQu

@Injectable()
 export class LandedCostTranasctions {
-  constructor(private readonly transactionLandedCost: TransactionLandedCost) {}
+  constructor(private readonly transactionLandedCost: TransactionLandedCost) { }

  /**
   * Retrieve the landed costs based on the given query.
@@ -45,8 +45,8 @@ export class LandedCostTranasctions {
    )(transactionType);

    return pipe(
-      this.transformLandedCostTransactions,
      R.map(transformLandedCost),
+      this.transformLandedCostTransactions,
    )(transactions);
  };

@@ -90,7 +90,7 @@ export class LandedCostTranasctions {
    const entries = R.map<
      ILandedCostTransactionEntry,
      ILandedCostTransactionEntryDOJO
-    >(transformLandedCostEntry)(transaction.entries);
+    >(transformLandedCostEntry)(transaction.entries ?? []);

    return {
      ...transaction,
--- a/packages/server/src/modules/BillLandedCosts/dtos/AllocateBillLandedCost.dto.ts
+++ b/packages/server/src/modules/BillLandedCosts/dtos/AllocateBillLandedCost.dto.ts
@@ -4,7 +4,6 @@ import {
  IsOptional,
  IsArray,
  ValidateNested,
-  IsDecimal,
  IsString,
  IsNumber,
 } from 'class-validator';
@@ -17,8 +16,9 @@ export class AllocateBillLandedCostItemDto {
  @ToNumber()
  entryId: number;

-  @IsDecimal()
-  cost: string; // Use string for IsDecimal, or use @IsNumber() if you want a number
+  @IsNumber()
+  @ToNumber()
+  cost: number;
 }

 export class AllocateBillLandedCostDto {
--- a/packages/server/src/modules/BillLandedCosts/models/BillLandedCost.ts
+++ b/packages/server/src/modules/BillLandedCosts/models/BillLandedCost.ts
@@ -60,8 +60,8 @@ export class BillLandedCost extends BaseModel {
    const allocationMethod = lowerCase(this.allocationMethod);

    const keyLabelsPairs = {
-      value: 'allocation_method.value.label',
-      quantity: 'allocation_method.quantity.label',
+      value: 'bill.allocation_method.value',
+      quantity: 'bill.allocation_method.quantity',
    };
    return keyLabelsPairs[allocationMethod] || '';
  }
--- a/packages/webapp/src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostDialogProvider.tsx
+++ b/packages/webapp/src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostDialogProvider.tsx
@@ -24,7 +24,7 @@ function AllocateLandedCostDialogProvider({
  dialogName,
  ...props
 }) {
-  const [transactionsType, setTransactionsType] = React.useState(null);
+  const [transactionsType, setTransactionsType] = React.useState('Bill');
  const [transactionId, setTransactionId] = React.useState(null);
  const [transactionEntryId, setTransactionEntryId] = React.useState(null);

@@ -34,7 +34,8 @@ function AllocateLandedCostDialogProvider({
  });
  // Retrieve the landed cost transactions based on the given transactions type.
  const {
-    data: { transactions: landedCostTransactions },
+    data: landedCostTransactions,
+    isLoading: isLandedCostTransactionsLoading,
  } = useLandedCostTransaction(transactionsType, {
    enabled: !!transactionsType,
  });
@@ -88,6 +89,7 @@ function AllocateLandedCostDialogProvider({
    costTransactionEntries,
    transactionsType,
    landedCostTransactions,
+    isLandedCostTransactionsLoading,
    setTransactionsType,
    setTransactionId,
    setTransactionEntryId,
--- a/packages/webapp/src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostFloatingActions.tsx
+++ b/packages/webapp/src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostFloatingActions.tsx
@@ -38,7 +38,7 @@ function AllocateLandedCostFloatingActions({
      <DialogFooterActions alignment={'left'}>
        {costTransactionEntry && (
          <UnallocatedAmount>
-           <T id={'landed_cost.dialog.label_unallocated_cost_amount'}/>
+            <T id={'landed_cost.dialog.label_unallocated_cost_amount'} />
            <strong>{formattedUnallocatedCostAmount}</strong>
          </UnallocatedAmount>
        )}
@@ -68,11 +68,16 @@ const AllocateDialogFooter = styled(DialogFooter)`
 `;

 const UnallocatedAmount = styled.div`
-  color: #3f5278;
+  --x-color-text: #3f5278;
+
+  .bp4-dark & {
+    --x-color-text: var(--color-light-gray1);
+  }
+  color: var(--x-color-text);
  align-self: center;

  strong {
-    color: #353535;
+    color: var(--x-color-text);
    padding-left: 4px;
  }
 `;
--- a/packages/webapp/src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostFormFields.tsx
+++ b/packages/webapp/src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostFormFields.tsx
@@ -8,8 +8,10 @@ import {
  RadioGroup,
  Radio,
  InputGroup,
+  Spinner,
 } from '@blueprintjs/core';
 import classNames from 'classnames';
+import { x } from '@xstyled/emotion';
 import { FormattedMessage as T, If, FFormGroup, FSelect, FRadioGroup, FInputGroup } from '@/components';
 import { handleStringChange } from '@/utils';
 import { FieldRequiredHint } from '@/components';
@@ -28,7 +30,7 @@ import { useAllocateLandedConstDialogContext } from './AllocateLandedCostDialogP
 */
 export default function AllocateLandedCostFormFields() {
  // Allocated landed cost dialog.
-  const { costTransactionEntries, landedCostTransactions } =
+  const { costTransactionEntries, landedCostTransactions, isLandedCostTransactionsLoading } =
    useAllocateLandedConstDialogContext();

  const { values, setFieldValue, form } = useFormikContext();
@@ -97,21 +99,35 @@ export default function AllocateLandedCostFormFields() {
        inline
        fill
      >
-        <FSelect
-          name={'transaction_id'}
-          items={landedCostTransactions}
-          onItemChange={handleTransactionChange}
-          filterable={false}
-          valueAccessor={'id'}
-          textAccessor={'name'}
-          labelAccessor={'formatted_unallocated_cost_amount'}
-          placeholder={intl.get('landed_cost.dialog.label_select_transaction')}
-          popoverProps={{ minimal: true }}
-        />
+        <x.div position="relative" w="100%">
+          <FSelect
+            name={'transaction_id'}
+            items={landedCostTransactions || []}
+            onItemChange={handleTransactionChange}
+            filterable={false}
+            valueAccessor={'id'}
+            textAccessor={'name'}
+            labelAccessor={'formatted_unallocated_cost_amount'}
+            placeholder={intl.get('landed_cost.dialog.label_select_transaction')}
+            popoverProps={{ minimal: true }}
+            disabled={isLandedCostTransactionsLoading}
+          />
+          {isLandedCostTransactionsLoading && (
+            <x.div
+              position="absolute"
+              right="35px"
+              top="50%"
+              transform="translateY(-50%)"
+              pointerEvents="none"
+            >
+              <Spinner size={16} />
+            </x.div>
+          )}
+        </x.div>
      </FFormGroup>

      {/*------------ Transaction line  -----------*/}
-      <If condition={costTransactionEntries.length > 0}>
+      <If condition={costTransactionEntries?.length > 0}>
        <FFormGroup
          name={'transaction_entry_id'}
          label={<T id={'transaction_line'} />}
--- a/packages/webapp/src/hooks/query/landedCost.tsx
+++ b/packages/webapp/src/hooks/query/landedCost.tsx
@@ -67,9 +67,6 @@ export function useLandedCostTransaction(query, props) {
    },
    {
      select: (res) => res.data,
-      defaultData: {
-        transactions: [],
-      },
      ...props,
    },
  );
--- a/packages/webapp/src/style/pages/AllocateLandedCost/AllocateLandedCostForm.scss
+++ b/packages/webapp/src/style/pages/AllocateLandedCost/AllocateLandedCostForm.scss
@@ -21,7 +21,7 @@
  }

  .bp4-dialog-footer{
-    padding-top: 10px;
+    // padding-top: 10px;
  }

  .bigcapital-datatable {
@@ -30,6 +30,10 @@
      border: 1px solid #d1dee2;
      min-width: auto;

+      .bp4-dark & {
+        border-color: var(--color-dark-gray5);
+      }
+
      .tbody,
      .tbody-inner {
        height: auto;
@@ -43,6 +47,10 @@
          padding: 0.4rem;
          margin-left: -1px;
          border-left: 1px solid #ececec;
+
+          .bp4-dark & {
+            border-left-color: var(--color-dark-gray5);
+          }
        }

        .bp4-form-group{
@@ -51,6 +59,10 @@
          &:not(.bp4-intent-danger) .bp4-input{
            border: 1px solid #d0dfe2;

+            .bp4-dark & {
+              border-color: var(--color-dark-gray5);
+            }
+
            &:focus{
              box-shadow: 0 0 0 1px #116cd0;
              border-color: #116cd0;