fix: landed cost dialog

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,

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;
   }
 `;

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'} />}

packages/webapp/src/hooks/query/landedCost.tsx

@@ -67,9 +67,6 @@ export function useLandedCostTransaction(query, props) {
     },
     {
       select: (res) => res.data,
-      defaultData: {
-        transactions: [],
-      },
       ...props,
     },
   );

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;