feat: wip UI upload attachments

packages/server/src/api/controllers/Sales/SalesReceipts.ts

@@ -158,6 +158,8 @@ export default class SalesReceiptsController extends BaseController {
         .toInt(),
       check('receipt_message').optional().trim().escape(),
       check('statement').optional().trim().escape(),
+      check('attachments').isArray().optional(),
+      check('attachments.*.key').exists().isString(),
     ];
   }
 

packages/server/src/models/SaleEstimate.ts

@@ -236,7 +236,7 @@ export default class SaleEstimate extends mixin(TenantModel, [
           to: 'documents.id',
         },
         filter(query) {
-          query.where('model_ref', 'Expense');
+          query.where('model_ref', 'SaleEstimate');
         },
       },
     };

packages/server/src/models/SaleInvoice.ts

@@ -540,7 +540,7 @@ export default class SaleInvoice extends mixin(TenantModel, [
           to: 'documents.id',
         },
         filter(query) {
-          query.where('model_ref', 'Expense');
+          query.where('model_ref', 'SaleInvoice');
         },
       },
     };

packages/server/src/services/Attachments/events/AttachmentsOnManualJournals.ts

@@ -99,8 +99,6 @@ export class AttachmentsOnManualJournals {
     manualJournalDTO,
     manualJournal,
   }: IManualJournalEventEditedPayload) {
-    // if (isEmpty(saleInvoiceDTO.attachments)) return;
-
     const keys = manualJournalDTO.attachments?.map(
       (attachment) => attachment.key
     );

packages/server/src/services/CreditNotes/CreditNoteTransformer.ts

@@ -2,6 +2,7 @@ import { Transformer } from '@/lib/Transformer/Transformer';
 import { formatNumber } from 'utils';
 import { ItemEntryTransformer } from '../Sales/Invoices/ItemEntryTransformer';
 import { ICreditNote } from '@/interfaces';
+import { AttachmentTransformer } from '../Attachments/AttachmentTransformer';
 
 export class CreditNoteTransformer extends Transformer {
   /**
@@ -16,6 +17,7 @@ export class CreditNoteTransformer extends Transformer {
       'formattedCreditsUsed',
       'formattedSubtotal',
       'entries',
+      'attachments',
     ];
   };
 
@@ -80,4 +82,13 @@ export class CreditNoteTransformer extends Transformer {
       currencyCode: credit.currencyCode,
     });
   };
+
+  /**
+   * Retrieves the credit note attachments.
+   * @param {ISaleInvoice} invoice
+   * @returns
+   */
+  protected attachments = (creditNote) => {
+    return this.item(creditNote.attachments, new AttachmentTransformer());
+  };
 }

packages/server/src/services/ManualJournals/EditManualJournal.ts

@@ -78,7 +78,7 @@ export class EditManualJournal {
 
     return {
       id: oldManualJournal.id,
-      ...omit(manualJournalDTO, ['publish']),
+      ...omit(manualJournalDTO, ['publish', 'attachments']),
       ...(manualJournalDTO.publish && !oldManualJournal.publishedAt
         ? { publishedAt: moment().toMySqlDateTime() }
         : {}),
@@ -143,6 +143,7 @@ export class EditManualJournal {
         tenantId,
         manualJournal,
         oldManualJournal,
+        manualJournalDTO,
         trx,
       } as IManualJournalEventEditedPayload);
 

packages/server/src/services/ManualJournals/GetManualJournal.ts

@@ -28,7 +28,7 @@ export class GetManualJournal {
       .withGraphFetched('entries.contact')
       .withGraphFetched('entries.branch')
       .withGraphFetched('transactions')
-      .withGraphFetched('media')
+      .withGraphFetched('attachments')
       .throwIfNotFound();
 
     return this.transformer.transform(

packages/server/src/services/ManualJournals/ManualJournalTransformer.ts

@@ -1,6 +1,7 @@
 import { IManualJournal } from '@/interfaces';
 import { Transformer } from '@/lib/Transformer/Transformer';
 import { formatNumber } from 'utils';
+import { AttachmentTransformer } from '../Attachments/AttachmentTransformer';
 
 export class ManualJournalTransfromer extends Transformer {
   /**
@@ -8,7 +9,12 @@ export class ManualJournalTransfromer extends Transformer {
    * @returns {Array}
    */
   public includeAttributes = (): string[] => {
-    return ['formattedAmount', 'formattedDate', 'formattedPublishedAt'];
+    return [
+      'formattedAmount',
+      'formattedDate',
+      'formattedPublishedAt',
+      'attachments',
+    ];
   };
 
   /**
@@ -39,4 +45,13 @@ export class ManualJournalTransfromer extends Transformer {
   protected formattedPublishedAt = (manualJorunal: IManualJournal): string => {
     return this.formatDate(manualJorunal.publishedAt);
   };
+
+  /**
+   * Retrieves the manual journal attachments.
+   * @param {ISaleInvoice} invoice
+   * @returns
+   */
+  protected attachments = (manualJorunal: IManualJournal) => {
+    return this.item(manualJorunal.attachments, new AttachmentTransformer());
+  };
 }

packages/server/src/services/Purchases/BillPayments/BillPaymentTransformer.ts

@@ -2,6 +2,7 @@ import { IBillPayment } from '@/interfaces';
 import { Transformer } from '@/lib/Transformer/Transformer';
 import { formatNumber } from 'utils';
 import { BillPaymentEntryTransformer } from './BillPaymentEntryTransformer';
+import { AttachmentTransformer } from '@/services/Attachments/AttachmentTransformer';
 
 export class BillPaymentTransformer extends Transformer {
   /**
@@ -9,7 +10,12 @@ export class BillPaymentTransformer extends Transformer {
    * @returns {Array}
    */
   public includeAttributes = (): string[] => {
-    return ['formattedPaymentDate', 'formattedAmount', 'entries'];
+    return [
+      'formattedPaymentDate',
+      'formattedAmount',
+      'entries',
+      'attachments',
+    ];
   };
 
   /**
@@ -38,4 +44,13 @@ export class BillPaymentTransformer extends Transformer {
   protected entries = (billPayment) => {
     return this.item(billPayment.entries, new BillPaymentEntryTransformer());
   };
+
+  /**
+   * Retrieves the bill attachments.
+   * @param {ISaleInvoice} invoice
+   * @returns
+   */
+  protected attachments = (billPayment) => {
+    return this.item(billPayment.attachments, new AttachmentTransformer());
+  };
 }

packages/server/src/services/Purchases/BillPayments/CommandBillPaymentDTOTransformer.ts

@@ -1,6 +1,6 @@
 import { Inject, Service } from 'typedi';
 import * as R from 'ramda';
-import { sumBy } from 'lodash';
+import { omit, sumBy } from 'lodash';
 import { IBillPayment, IBillPaymentDTO, IVendor } from '@/interfaces';
 import { BranchTransactionDTOTransform } from '@/services/Branches/Integrations/BranchTransactionDTOTransform';
 import { formatDateFields } from '@/utils';
@@ -24,7 +24,9 @@ export class CommandBillPaymentDTOTransformer {
     oldBillPayment?: IBillPayment
   ): Promise<IBillPayment> {
     const initialDTO = {
-      ...formatDateFields(billPaymentDTO, ['paymentDate']),
+      ...formatDateFields(omit(billPaymentDTO, ['attachments']), [
+        'paymentDate',
+      ]),
       amount: sumBy(billPaymentDTO.entries, 'paymentAmount'),
       currencyCode: vendor.currencyCode,
       exchangeRate: billPaymentDTO.exchangeRate || 1,

packages/server/src/services/Purchases/BillPayments/GetBillPayment.ts

@@ -13,7 +13,7 @@ export class GetBillPayment {
   private transformer: TransformerInjectable;
 
   /**
-   * Retrieve bill payment.
+   * Retrieves bill payment.
    * @param {number} tenantId
    * @param {number} billPyamentId
    * @return {Promise<IBillPayment>}
@@ -30,6 +30,7 @@ export class GetBillPayment {
       .withGraphFetched('paymentAccount')
       .withGraphFetched('transactions')
       .withGraphFetched('branch')
+      .withGraphFetched('attachments')
       .findById(billPyamentId)
       .throwIfNotFound();
 

packages/server/src/services/Purchases/Bills/GetBill.ts

@@ -29,7 +29,8 @@ export class GetBill {
       .withGraphFetched('vendor')
       .withGraphFetched('entries.item')
       .withGraphFetched('branch')
-      .withGraphFetched('taxes.taxRate');
+      .withGraphFetched('taxes.taxRate')
+      .withGraphFetched('attachments');
 
     // Validates the bill existance.
     this.validators.validateBillExistance(bill);

packages/server/src/services/Purchases/Bills/PurchaseInvoiceTransformer.ts

@@ -1,5 +1,6 @@
 import { IBill } from '@/interfaces';
 import { Transformer } from '@/lib/Transformer/Transformer';
+import { AttachmentTransformer } from '@/services/Attachments/AttachmentTransformer';
 import { ItemEntryTransformer } from '@/services/Sales/Invoices/ItemEntryTransformer';
 import { SaleInvoiceTaxEntryTransformer } from '@/services/Sales/Invoices/SaleInvoiceTaxEntryTransformer';
 import { formatNumber } from 'utils';
@@ -26,6 +27,7 @@ export class PurchaseInvoiceTransformer extends Transformer {
       'totalLocalFormatted',
       'taxes',
       'entries',
+      'attachments',
     ];
   };
 
@@ -192,4 +194,13 @@ export class PurchaseInvoiceTransformer extends Transformer {
       currencyCode: bill.currencyCode,
     });
   };
+
+  /**
+   * Retrieves the bill attachments.
+   * @param {ISaleInvoice} invoice
+   * @returns
+   */
+  protected attachments = (bill) => {
+    return this.item(bill.attachments, new AttachmentTransformer());
+  };
 }

packages/server/src/services/Purchases/VendorCredits/BaseVendorCredit.ts

@@ -64,7 +64,7 @@ export default class BaseVendorCredit {
       autoNextNumber;
 
     const initialDTO = {
-      ...omit(vendorCreditDTO, ['open']),
+      ...omit(vendorCreditDTO, ['open', 'attachments']),
       amount,
       currencyCode: vendorCurrencyCode,
       exchangeRate: vendorCreditDTO.exchangeRate || 1,

packages/server/src/services/Purchases/VendorCredits/GetVendorCredit.ts

@@ -26,7 +26,8 @@ export default class GetVendorCredit {
       .findById(vendorCreditId)
       .withGraphFetched('entries.item')
       .withGraphFetched('vendor')
-      .withGraphFetched('branch');
+      .withGraphFetched('branch')
+      .withGraphFetched('attachments');
 
     if (!vendorCredit) {
       throw new ServiceError(ERRORS.VENDOR_CREDIT_NOT_FOUND);

packages/server/src/services/Purchases/VendorCredits/VendorCreditTransformer.ts

@@ -1,5 +1,6 @@
 import { IVendorCredit } from '@/interfaces';
 import { Transformer } from '@/lib/Transformer/Transformer';
+import { AttachmentTransformer } from '@/services/Attachments/AttachmentTransformer';
 import { ItemEntryTransformer } from '@/services/Sales/Invoices/ItemEntryTransformer';
 import { formatNumber } from 'utils';
 
@@ -16,6 +17,7 @@ export class VendorCreditTransformer extends Transformer {
       'formattedCreditsRemaining',
       'formattedInvoicedAmount',
       'entries',
+      'attachments',
     ];
   };
 
@@ -80,4 +82,13 @@ export class VendorCreditTransformer extends Transformer {
       currencyCode: vendorCredit.currencyCode,
     });
   };
+
+  /**
+   * Retrieves the vendor credit attachments.
+   * @param {IVendorCredit} invoice
+   * @returns
+   */
+  protected attachments = (vendorCredit) => {
+    return this.item(vendorCredit.attachments, new AttachmentTransformer());
+  };
 }

packages/server/src/services/Sales/Estimates/GetSaleEstimate.ts

@@ -28,7 +28,8 @@ export class GetSaleEstimate {
       .findById(estimateId)
       .withGraphFetched('entries.item')
       .withGraphFetched('customer')
-      .withGraphFetched('branch');
+      .withGraphFetched('branch')
+      .withGraphFetched('attachments');
 
     // Validates the estimate existance.
     this.validators.validateEstimateExistance(estimate);

packages/server/src/services/Sales/Estimates/SaleEstimateTransformer.ts

@@ -2,6 +2,7 @@ import { ISaleEstimate } from '@/interfaces';
 import { Transformer } from '@/lib/Transformer/Transformer';
 import { formatNumber } from 'utils';
 import { ItemEntryTransformer } from '../Invoices/ItemEntryTransformer';
+import { AttachmentTransformer } from '@/services/Attachments/AttachmentTransformer';
 
 export class SaleEstimateTransfromer extends Transformer {
   /**
@@ -18,6 +19,7 @@ export class SaleEstimateTransfromer extends Transformer {
       'formattedApprovedAtDate',
       'formattedRejectedAtDate',
       'entries',
+      'attachments',
     ];
   };
 
@@ -91,9 +93,18 @@ export class SaleEstimateTransfromer extends Transformer {
    * @param {ISaleEstimate} estimate
    * @returns {}
    */
-  protected entries = (estimate) => {
+  protected entries = (estimate: ISaleEstimate) => {
     return this.item(estimate.entries, new ItemEntryTransformer(), {
       currencyCode: estimate.currencyCode,
     });
   };
+
+  /**
+   * Retrieves the sale estimate attachments.
+   * @param {ISaleInvoice} invoice
+   * @returns
+   */
+  protected attachments = (estimate: ISaleEstimate) => {
+    return this.item(estimate.attachments, new AttachmentTransformer());
+  };
 }

packages/server/src/services/Sales/Receipts/CreateSaleReceipt.ts

@@ -101,6 +101,7 @@ export class CreateSaleReceipt {
           tenantId,
           saleReceipt,
           saleReceiptId: saleReceipt.id,
+          saleReceiptDTO,
           trx,
         } as ISaleReceiptCreatedPayload);
 

packages/server/src/services/Sales/Receipts/EditSaleReceipt.ts

@@ -110,6 +110,7 @@ export class EditSaleReceipt {
         oldSaleReceipt,
         saleReceipt,
         saleReceiptId,
+        saleReceiptDTO,
         trx,
       } as ISaleReceiptEditedPayload);
 

packages/server/src/services/Sales/Receipts/GetSaleReceipt.ts

@@ -28,7 +28,8 @@ export class GetSaleReceipt {
       .withGraphFetched('entries.item')
       .withGraphFetched('customer')
       .withGraphFetched('depositAccount')
-      .withGraphFetched('branch');
+      .withGraphFetched('branch')
+      .withGraphFetched('attachments');
 
     // Valdiates the sale receipt existance.
     this.validators.validateReceiptExistance(saleReceipt);

packages/server/src/services/Sales/Receipts/SaleReceiptDTOTransformer.ts

@@ -68,9 +68,10 @@ export class SaleReceiptDTOTransformer {
 
     const initialDTO = {
       amount,
-      ...formatDateFields(omit(saleReceiptDTO, ['closed', 'entries']), [
+      ...formatDateFields(
-        'receiptDate',
+        omit(saleReceiptDTO, ['closed', 'entries', 'attachments']),
-      ]),
+        ['receiptDate']
+      ),
       currencyCode: paymentCustomer.currencyCode,
       exchangeRate: saleReceiptDTO.exchangeRate || 1,
       receiptNumber,

packages/server/src/services/Sales/Receipts/SaleReceiptTransformer.ts

@@ -3,6 +3,7 @@ import { ISaleReceipt } from '@/interfaces';
 import { Transformer } from '@/lib/Transformer/Transformer';
 import { formatNumber } from 'utils';
 import { ItemEntryTransformer } from '../Invoices/ItemEntryTransformer';
+import { AttachmentTransformer } from '@/services/Attachments/AttachmentTransformer';
 
 @Service()
 export class SaleReceiptTransformer extends Transformer {
@@ -17,6 +18,7 @@ export class SaleReceiptTransformer extends Transformer {
       'formattedReceiptDate',
       'formattedClosedAtDate',
       'entries',
+      'attachments',
     ];
   };
 
@@ -68,4 +70,13 @@ export class SaleReceiptTransformer extends Transformer {
       currencyCode: receipt.currencyCode,
     });
   };
+
+  /**
+   * Retrieves the sale receipt attachments.
+   * @param {ISaleReceipt} invoice
+   * @returns
+   */
+  protected attachments = (receipt) => {
+    return this.item(receipt.attachments, new AttachmentTransformer());
+  };
 }

packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalEntriesForm.tsx

@@ -32,6 +32,7 @@ import {
   defaultManualJournal,
 } from './utils';
 import { JournalSyncIncrementSettingsToForm } from './components';
+import { transformAttachmentsToRequest } from '@/containers/Attachments/utils';
 
 /**
  * Journal entries form.
@@ -61,7 +62,6 @@ function MakeJournalEntriesForm({
     journalNumberPrefix,
     journalNextNumber,
   );
-
   // Form initial values.
   const initialValues = useMemo(
     () => ({
@@ -112,6 +112,7 @@ function MakeJournalEntriesForm({
       setSubmitting(false);
       return;
     }
+    const attachments = transformAttachmentsToRequest(values);
     const form = {
       ...omit(values, ['journal_number_manually']),
       ...(values.journal_number_manually && {
@@ -119,6 +120,7 @@ function MakeJournalEntriesForm({
       }),
       entries: R.compose(orderingLinesIndexes)(entries),
       publish: submitPayload.publish,
+      attachments,
     };
     // Handle the request error.
     const handleError = ({

packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalFormFooter.tsx

@@ -7,6 +7,7 @@ import { CLASSES } from '@/constants/classes';
 import { Row, Col, Paper } from '@/components';
 import { MakeJournalFormFooterLeft } from './MakeJournalFormFooterLeft';
 import { MakeJournalFormFooterRight } from './MakeJournalFormFooterRight';
+import { UploadAttachmentButton } from '@/containers/Attachments/UploadAttachmentButton';
 
 export default function MakeJournalFormFooter() {
   return (
@@ -15,6 +16,7 @@ export default function MakeJournalFormFooter() {
         <Row>
           <Col md={8}>
             <MakeJournalFormFooterLeft />
+            <UploadAttachmentButton />
           </Col>
 
           <Col md={4}>

packages/webapp/src/containers/Accounting/MakeJournal/utils.tsx

@@ -18,6 +18,7 @@ import { AppToaster } from '@/components';
 import { useFormikContext } from 'formik';
 import { useMakeJournalFormContext } from './MakeJournalProvider';
 import { useCurrentOrganization } from '@/hooks/state';
+import { transformAttachmentsToForm } from '@/containers/Attachments/utils';
 
 const ERROR = {
   JOURNAL_NUMBER_ALREADY_EXISTS: 'JOURNAL.NUMBER.ALREADY.EXISTS',
@@ -57,6 +58,7 @@ export const defaultManualJournal = {
   branch_id: '',
   exchange_rate: 1,
   entries: [...repeatValue(defaultEntry, DEFAULT_LINES_NUMBER)],
+  attachments: [],
 };
 
 // Transform to edit form.
@@ -76,9 +78,12 @@ export function transformToEditForm(manualJournal) {
     ensureEntriesHasEmptyLine(MIN_LINES_NUMBER, defaultEntry),
   )(initialEntries);
 
+  const attachments = transformAttachmentsToForm(manualJournal);
+
   return {
     ...transformToForm(manualJournal, defaultManualJournal),
     entries,
+    attachments,
   };
 }
 

packages/webapp/src/containers/Attachments/UploadAttachmentButton.tsx

@@ -9,6 +9,7 @@ import {
 } from '@blueprintjs/core';
 import { FFormGroup } from '@/components';
 import { UploadAttachmentsPopoverContent } from './UploadAttachmentsPopoverContent';
+import { transformToCamelCase, transfromToSnakeCase } from '@/utils';
 import styles from './UploadAttachmentButton.module.scss';
 
 function UploadAttachmentButtonButtonContentField() {
@@ -16,9 +17,9 @@ function UploadAttachmentButtonButtonContentField() {
     <Field name={'attachments'}>
       {({ form: { setFieldValue }, field: { value } }) => (
         <UploadAttachmentsPopoverContent
-          value={value}
+          value={transformToCamelCase(value)}
-          onChange={(value) => {
+          onChange={(changedValue) => {
-            setFieldValue('attachments', value);
+            setFieldValue('attachments', transfromToSnakeCase(changedValue));
           }}
         />
       )}
@@ -35,6 +36,7 @@ export function UploadAttachmentButton() {
       name={'attachments'}
       label={'Attachments'}
       className={styles.attachmentField}
+      fastField={true}
     >
       <Popover
         interactionKind={PopoverInteractionKind.CLICK}

packages/webapp/src/containers/Attachments/UploadAttachmentsPopoverContent.tsx

@@ -1,16 +1,16 @@
 // @ts-nocheck
-import { useState } from 'react';
 import { isEmpty } from 'lodash';
 import { Button, Intent, Text, Spinner } from '@blueprintjs/core';
 import { Box, Group, Icon, Stack } from '@/components';
-import { ImportDropzoneField } from '@/containers/Import/ImportDropzoneFile';
-import { useUncontrolled } from '@/hooks/useUncontrolled';
 import {
-  useDeleteAttachment,
+  ImportDropzoneField,
-  useUploadAttachments,
+  ImportDropzoneFieldProps,
-} from '@/hooks/query/attachments';
+} from '@/containers/Import/ImportDropzoneFile';
-import { formatBytes } from './utils';
+import { useUncontrolled } from '@/hooks/useUncontrolled';
+import { useUploadAttachments } from '@/hooks/query/attachments';
+import { formatBytes } from '../Sales/Invoices/InvoiceForm/utils';
 import styles from './UploadAttachmentPopoverContent.module.scss';
+import { MIME_TYPES } from '@/components/Dropzone/mine-types';
 
 interface AttachmentFileCommon {
   originName: string;
@@ -28,6 +28,8 @@ interface UploadAttachmentsPopoverContentProps {
   initialValue?: AttachmentFile[];
   value?: AttachmentFile[];
   onChange?: (value: AttachmentFile[]) => void;
+  onUploadedChange?: (value: AttachmentFile[]) => void;
+  dropzoneFieldProps?: ImportDropzoneFieldProps;
 }
 
 /**
@@ -38,6 +40,8 @@ export function UploadAttachmentsPopoverContent({
   initialValue,
   value,
   onChange,
+  onUploadedChange,
+  dropzoneFieldProps,
 }: UploadAttachmentsPopoverContentProps) {
   // Controlled/uncontrolled value state.
   const [localFiles, handleFilesChange] = useUncontrolled<AttachmentFile[]>({
@@ -66,45 +70,23 @@ export function UploadAttachmentsPopoverContent({
   };
   // Uploads the attachments.
   const { mutateAsync: uploadAttachments } = useUploadAttachments({
-    onSuccess: (data, variables, context) => {
+    onSuccess: (data) => {
       const newLocalFiles = stopLoadingAttachment(
         localFiles,
         data.config.data.get('internalKey'),
         data.data.data.key,
       );
       handleFilesChange(newLocalFiles);
+      onUploadedChange && onUploadedChange(newLocalFiles);
     },
   });
-  // Deletes the attachment.
-  const { mutateAsync: deleteAttachment } = useDeleteAttachment();
-
   // Deletes the attachment of the given file key.
-  const DeleteButton = ({ fileKey }: { fileKey: string }) => {
+  const handleClick = (key: string) => () => {
-    const [loading, setLoading] = useState<boolean>(false);
+    const updatedFiles = localFiles.filter((file, i) => file.key !== key);
-
+    handleFilesChange(updatedFiles);
-    const handleClick = () => {
+    onUploadedChange && onUploadedChange(updatedFiles);
-      setLoading(true);
-      deleteAttachment(fileKey).then(() => {
-        const updatedFiles = localFiles.filter(
-          (file, i) => file.key !== fileKey,
-        );
-        handleFilesChange(updatedFiles);
-        setLoading(false);
-      });
-    };
-    return (
-      <Button
-        small
-        minimal
-        intent={Intent.DANGER}
-        loading={loading}
-        disabled={loading}
-        onClick={handleClick}
-      >
-        <Icon icon={'trash-16'} iconSize={16} />
-      </Button>
-    );
   };
+
   // Handle change dropzone.
   const handleChangeDropzone = (file: File) => {
     const formData = new FormData();
@@ -136,6 +118,16 @@ export function UploadAttachmentsPopoverContent({
             title={''}
             classNames={{ root: styles.dropzoneRoot }}
             onChange={handleChangeDropzone}
+            dropzoneProps={{
+              accept: [
+                MIME_TYPES.doc,
+                MIME_TYPES.docx,
+                MIME_TYPES.pdf,
+                MIME_TYPES.png,
+                MIME_TYPES.jpeg,
+              ],
+            }}
+            {...dropzoneFieldProps}
           />
           <Group className={styles.hintText}>
             <Box>Formats: CSV, XLSX</Box>
@@ -180,7 +172,14 @@ export function UploadAttachmentsPopoverContent({
                     <Button small minimal>
                       View
                     </Button>
-                    <DeleteButton fileKey={localFile.key} />
+                    <Button
+                      small
+                      minimal
+                      intent={Intent.DANGER}
+                      onClick={handleClick(localFile.key)}
+                    >
+                      <Icon icon={'trash-16'} iconSize={16} />
+                    </Button>
                   </Group>
                 )}
               </Group>

packages/webapp/src/containers/Attachments/utils.ts

@@ -0,0 +1,19 @@
+// @ts-nocheck
+import { transformToForm } from '@/utils';
+
+const attachmentReqSchema = {
+  key: '',
+  size: '',
+  origin_name: '',
+  mime_type: '',
+};
+
+export const transformAttachmentsToForm = (values) => {
+  return values.attachments?.map((attachment) =>
+    transformToForm(attachment, attachmentReqSchema),
+  );
+};
+
+export const transformAttachmentsToRequest = (values) => {
+  return values.attachments?.map((attachment) => ({ key: attachment.key }));
+};

packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFormFooter.tsx

@@ -7,6 +7,7 @@ import { CLASSES } from '@/constants/classes';
 import { Row, Col, Paper } from '@/components';
 import { ExpenseFormFooterLeft } from './ExpenseFormFooterLeft';
 import { ExpenseFormFooterRight } from './ExpenseFormFooterRight';
+import { UploadAttachmentButton } from '@/containers/Attachments/UploadAttachmentButton';
 
 export default function ExpenseFormFooter() {
   return (
@@ -15,6 +16,7 @@ export default function ExpenseFormFooter() {
         <Row>
           <Col md={8}>
             <ExpenseFormFooterLeft />
+            <UploadAttachmentButton />
           </Col>
 
           <Col md={4}>

packages/webapp/src/containers/Expenses/ExpenseForm/utils.tsx

@@ -18,6 +18,10 @@ import {
   formattedAmount,
 } from '@/utils';
 import { useCurrentOrganization } from '@/hooks/state';
+import {
+  transformAttachmentsToForm,
+  transformAttachmentsToRequest,
+} from '@/containers/Attachments/utils';
 
 const ERROR = {
   EXPENSE_ALREADY_PUBLISHED: 'EXPENSE.ALREADY.PUBLISHED',
@@ -46,6 +50,7 @@ export const defaultExpense = {
   branch_id: '',
   exchange_rate: 1,
   categories: [...repeatValue(defaultExpenseEntry, MIN_LINES_NUMBER)],
+  attachments: [],
 };
 
 /**
@@ -93,9 +98,12 @@ export const transformToEditForm = (
     ensureEntriesHasEmptyLine(MIN_LINES_NUMBER, expenseEntry),
   )(initialEntries);
 
+  const attachments = transformAttachmentsToForm(expense);
+
   return {
     ...transformToForm(expense, defaultExpense),
     categories,
+    attachments,
   };
 };
 
@@ -133,10 +141,12 @@ export const filterNonZeroEntries = (categories) => {
  */
 export const transformFormValuesToRequest = (values) => {
   const categories = filterNonZeroEntries(values.categories);
+  const attachments = transformAttachmentsToRequest(values);
 
   return {
     ...values,
     categories: R.compose(orderingLinesIndexes)(categories),
+    attachments,
   };
 };
 

packages/webapp/src/containers/Import/ImportDropzoneFile.tsx

@@ -8,7 +8,7 @@ import { MIME_TYPES } from '@/components/Dropzone/mine-types';
 import { useUncontrolled } from '@/hooks/useUncontrolled';
 import styles from './ImportDropzone.module.css';
 
-interface ImportDropzoneFieldProps {
+export interface ImportDropzoneFieldProps {
   initialValue?: File;
   value?: File;
   onChange?: (file: File) => void;

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

@@ -7,6 +7,7 @@ import { CLASSES } from '@/constants/classes';
 import { Paper, Row, Col } from '@/components';
 import { BillFormFooterLeft } from './BillFormFooterLeft';
 import { BillFormFooterRight } from './BillFormFooterRight';
+import { UploadAttachmentButton } from '@/containers/Attachments/UploadAttachmentButton';
 
 // Bill form floating actions.
 export default function BillFormFooter() {
@@ -16,6 +17,7 @@ export default function BillFormFooter() {
         <Row>
           <Col md={8}>
             <BillFormFooterLeft />
+            <UploadAttachmentButton />
           </Col>
 
           <Col md={4}>

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

@@ -27,6 +27,10 @@ import {
 } from '@/containers/Entries/utils';
 import { useBillFormContext } from './BillFormProvider';
 import { TaxType } from '@/interfaces/TaxRates';
+import {
+  transformAttachmentsToForm,
+  transformAttachmentsToRequest,
+} from '@/containers/Attachments/utils';
 
 export const MIN_LINES_NUMBER = 1;
 
@@ -60,6 +64,7 @@ export const defaultBill = {
   exchange_rate: 1,
   currency_code: '',
   entries: [...repeatValue(defaultBillEntry, MIN_LINES_NUMBER)],
+  attachments: [],
 };
 
 export const ERRORS = {
@@ -88,12 +93,15 @@ export const transformToEditForm = (bill) => {
     updateItemsEntriesTotal,
   )(initialEntries);
 
+  const attachments = transformAttachmentsToForm(bill);
+
   return {
     ...transformToForm(bill, defaultBill),
     inclusive_exclusive_tax: bill.is_inclusive_tax
       ? TaxType.Inclusive
       : TaxType.Exclusive,
     entries,
+    attachments,
   };
 };
 
@@ -120,11 +128,13 @@ export const filterNonZeroEntries = (entries) => {
  */
 export const transformFormValuesToRequest = (values) => {
   const entries = filterNonZeroEntries(values.entries);
+  const attachments = transformAttachmentsToRequest(values);
 
   return {
     ...values,
     entries: transformEntriesToSubmit(entries),
     open: false,
+    attachments,
   };
 };
 

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

@@ -7,6 +7,7 @@ import { CLASSES } from '@/constants/classes';
 import { Row, Col, Paper } from '@/components';
 import { VendorCreditNoteFormFooterLeft } from './VendorCreditNoteFormFooterLeft';
 import { VendorCreditNoteFormFooterRight } from './VendorCreditNoteFormFooterRight';
+import { UploadAttachmentButton } from '@/containers/Attachments/UploadAttachmentButton';
 
 /**
  * Vendor Credit note form footer.
@@ -18,6 +19,7 @@ export default function VendorCreditNoteFormFooter() {
         <Row>
           <Col md={8}>
             <VendorCreditNoteFormFooterLeft />
+            <UploadAttachmentButton />
           </Col>
 
           <Col md={4}>

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

@@ -20,6 +20,10 @@ import { useFormikContext } from 'formik';
 import { useVendorCreditNoteFormContext } from './VendorCreditNoteFormProvider';
 import { useCurrentOrganization } from '@/hooks/state';
 import { getEntriesTotal } from '@/containers/Entries/utils';
+import {
+  transformAttachmentsToForm,
+  transformAttachmentsToRequest,
+} from '@/containers/Attachments/utils';
 
 export const MIN_LINES_NUMBER = 1;
 
@@ -48,6 +52,7 @@ export const defaultVendorsCreditNote = {
   exchange_rate: 1,
   currency_code: '',
   entries: [...repeatValue(defaultCreditNoteEntry, MIN_LINES_NUMBER)],
+  attachments: [],
 };
 
 /**
@@ -68,9 +73,12 @@ export const transformToEditForm = (creditNote) => {
     updateItemsEntriesTotal,
   )(initialEntries);
 
+  const attachments = transformAttachmentsToForm(creditNote);
+
   return {
     ...transformToForm(creditNote, defaultVendorsCreditNote),
     entries,
+    attachments,
   };
 };
 
@@ -100,11 +108,13 @@ export const filterNonZeroEntries = (entries) => {
  */
 export const transformFormValuesToRequest = (values) => {
   const entries = filterNonZeroEntries(values.entries);
+  const attachments = transformAttachmentsToRequest(values);
 
   return {
     ...values,
     entries: transformEntriesToSubmit(entries),
     open: false,
+    attachments,
   };
 };
 

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

@@ -7,6 +7,7 @@ import { CLASSES } from '@/constants/classes';
 import { Row, Col, Paper } from '@/components';
 import { PaymentMadeFormFooterLeft } from './PaymentMadeFormFooterLeft';
 import { PaymentMadeFormFooterRight } from './PaymentMadeFormFooterRight';
+import { UploadAttachmentButton } from '@/containers/Attachments/UploadAttachmentButton';
 
 /**
  * Payment made form footer.
@@ -18,6 +19,7 @@ export default function PaymentMadeFooter() {
         <Row>
           <Col md={8}>
             <PaymentMadeFormFooterLeft />
+            <UploadAttachmentButton />
           </Col>
 
           <Col md={4}>

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

@@ -16,6 +16,10 @@ import {
 } from '@/utils';
 import { useCurrentOrganization } from '@/hooks/state';
 import { PAYMENT_MADE_ERRORS } from '../constants';
+import {
+  transformAttachmentsToForm,
+  transformAttachmentsToRequest,
+} from '@/containers/Attachments/utils';
 
 export const ERRORS = {
   PAYMENT_NUMBER_NOT_UNIQUE: 'PAYMENT.NUMBER.NOT.UNIQUE',
@@ -44,9 +48,12 @@ export const defaultPaymentMade = {
   branch_id: '',
   exchange_rate: 1,
   entries: [],
+  attachments: [],
 };
 
 export const transformToEditForm = (paymentMade, paymentMadeEntries) => {
+  const attachments = transformAttachmentsToForm(paymentMade);
+
   return {
     ...transformToForm(paymentMade, defaultPaymentMade),
     full_amount: safeSumBy(paymentMadeEntries, 'payment_amount'),
@@ -56,6 +63,7 @@ export const transformToEditForm = (paymentMade, paymentMadeEntries) => {
         payment_amount: paymentMadeEntry.payment_amount || '',
       })),
     ],
+    attachments,
   };
 };
 
@@ -101,7 +109,9 @@ export const transformFormToRequest = (form) => {
       ...pick(entry, ['payment_amount', 'bill_id']),
     }));
 
-  return { ...form, entries: orderingLinesIndexes(entries) };
+  const attachments = transformAttachmentsToRequest(form);
+
+  return { ...form, entries: orderingLinesIndexes(entries), attachments };
 };
 
 export const useSetPrimaryBranchToForm = () => {

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

@@ -7,6 +7,7 @@ import { CLASSES } from '@/constants/classes';
 import { Row, Col, Paper } from '@/components';
 import { CreditNoteFormFooterLeft } from './CreditNoteFormFooterLeft';
 import { CreditNoteFormFooterRight } from './CreditNoteFormFooterRight';
+import { UploadAttachmentButton } from '@/containers/Attachments/UploadAttachmentButton';
 
 /**
  * Credit note form footer.
@@ -18,6 +19,7 @@ export default function CreditNoteFormFooter() {
         <Row>
           <Col md={8}>
             <CreditNoteFormFooterLeft />
+            <UploadAttachmentButton />
           </Col>
 
           <Col md={4}>

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

@@ -8,7 +8,6 @@ import {
   defaultFastFieldShouldUpdate,
   transformToForm,
   repeatValue,
-  transactionNumber,
   formattedAmount,
   orderingLinesIndexes,
 } from '@/utils';
@@ -21,6 +20,10 @@ import {
 } from '@/containers/Entries/utils';
 import { useCurrentOrganization } from '@/hooks/state';
 import { getEntriesTotal } from '@/containers/Entries/utils';
+import {
+  transformAttachmentsToForm,
+  transformAttachmentsToRequest,
+} from '@/containers/Attachments/utils';
 
 export const MIN_LINES_NUMBER = 1;
 
@@ -51,6 +54,7 @@ export const defaultCreditNote = {
   exchange_rate: 1,
   currency_code: '',
   entries: [...repeatValue(defaultCreditNoteEntry, MIN_LINES_NUMBER)],
+  attachments: []
 };
 
 /**
@@ -71,9 +75,12 @@ export function transformToEditForm(creditNote) {
     updateItemsEntriesTotal,
   )(initialEntries);
 
+  const attachment = transformAttachmentsToForm(creditNote);
+
   return {
     ...transformToForm(creditNote, defaultCreditNote),
     entries,
+    attachment,
   };
 }
 
@@ -103,11 +110,13 @@ export const filterNonZeroEntries = (entries) => {
  */
 export const transformFormValuesToRequest = (values) => {
   const entries = filterNonZeroEntries(values.entries);
+  const attachments = transformAttachmentsToRequest(values);
 
   return {
     ...values,
     entries: transformEntriesToSubmit(entries),
     open: false,
+    attachments,
   };
 };
 

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

@@ -7,6 +7,7 @@ import { CLASSES } from '@/constants/classes';
 import { Row, Col, Paper } from '@/components';
 import { EstimateFormFooterLeft } from './EstimateFormFooterLeft';
 import { EstimateFormFooterRight } from './EstimateFormFooterRight';
+import { UploadAttachmentButton } from '@/containers/Attachments/UploadAttachmentButton';
 
 /**
  * Estimate form footer.
@@ -18,6 +19,7 @@ export default function EstiamteFormFooter() {
         <Row>
           <Col md={8}>
             <EstimateFormFooterLeft />
+            <UploadAttachmentButton />
           </Col>
 
           <Col md={4}>

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

@@ -18,6 +18,10 @@ import {
 } from '@/containers/Entries/utils';
 import { useCurrentOrganization } from '@/hooks/state';
 import { getEntriesTotal } from '@/containers/Entries/utils';
+import {
+  transformAttachmentsToForm,
+  transformAttachmentsToRequest,
+} from '@/containers/Attachments/utils';
 
 export const MIN_LINES_NUMBER = 1;
 
@@ -56,6 +60,7 @@ export const defaultEstimate = {
   exchange_rate: 1,
   currency_code: '',
   entries: [...repeatValue(defaultEstimateEntry, MIN_LINES_NUMBER)],
+  attachments: []
 };
 
 const ERRORS = {
@@ -78,9 +83,12 @@ export const transformToEditForm = (estimate) => {
     updateItemsEntriesTotal,
   )(initialEntries);
 
+  const attachments = transformAttachmentsToForm(estimate);
+
   return {
     ...transformToForm(estimate, defaultEstimate),
     entries,
+    attachments,
   };
 };
 
@@ -150,6 +158,8 @@ export const transfromsFormValuesToRequest = (values) => {
   const entries = values.entries.filter(
     (item) => item.item_id && item.quantity,
   );
+  const attachments = transformAttachmentsToRequest(values);
+
   return {
     ...omit(values, ['estimate_number_manually', 'estimate_number']),
     // The `estimate_number_manually` will be presented just if the auto-increment
@@ -160,6 +170,7 @@ export const transfromsFormValuesToRequest = (values) => {
     entries: entries.map((entry) => ({
       ...transformToForm(entry, defaultEstimateEntryReq),
     })),
+    attachments,
   };
 };
 

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

@@ -7,7 +7,7 @@ import { CLASSES } from '@/constants/classes';
 import { Paper, Row, Col } from '@/components';
 import { InvoiceFormFooterLeft } from './InvoiceFormFooterLeft';
 import { InvoiceFormFooterRight } from './InvoiceFormFooterRight';
-import { UploadAttachmentButton } from './UploadAttachmentButton';
+import { UploadAttachmentButton } from '../../../Attachments/UploadAttachmentButton';
 
 export default function InvoiceFormFooter() {
   return (

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

@@ -7,6 +7,7 @@ import { CLASSES } from '@/constants/classes';
 import { Row, Col, Paper } from '@/components';
 import { PaymentReceiveFormFootetLeft } from './PaymentReceiveFormFootetLeft';
 import { PaymentReceiveFormFootetRight } from './PaymentReceiveFormFootetRight';
+import { UploadAttachmentButton } from '@/containers/Attachments/UploadAttachmentButton';
 
 /**
  * Payment receive form footer.
@@ -18,6 +19,7 @@ export default function PaymentReceiveFormFooter() {
         <Row>
           <Col md={8}>
             <PaymentReceiveFormFootetLeft />
+            <UploadAttachmentButton />
           </Col>
 
           <Col md={4}>

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

@@ -9,13 +9,16 @@ import { AppToaster } from '@/components';
 import { usePaymentReceiveFormContext } from './PaymentReceiveFormProvider';
 import {
   defaultFastFieldShouldUpdate,
-  transactionNumber,
   transformToForm,
   safeSumBy,
   orderingLinesIndexes,
   formattedAmount,
 } from '@/utils';
 import { useCurrentOrganization } from '@/hooks/state';
+import {
+  transformAttachmentsToForm,
+  transformAttachmentsToRequest,
+} from '@/containers/Attachments/utils';
 
 // Default payment receive entry.
 export const defaultPaymentReceiveEntry = {
@@ -39,11 +42,12 @@ export const defaultPaymentReceive = {
   // Holds the payment number that entered manually only.
   payment_receive_no_manually: '',
   statement: '',
-  full_amount: '', 
+  full_amount: '',
   currency_code: '',
   branch_id: '',
   exchange_rate: 1,
   entries: [],
+  attachments: []
 };
 
 export const defaultRequestPaymentEntry = {
@@ -74,6 +78,7 @@ export const transformToEditForm = (paymentReceive, paymentReceiveEntries) => ({
       payment_amount: paymentReceiveEntry.payment_amount || '',
     })),
   ],
+  attachments: transformAttachmentsToForm(paymentReceive),
 });
 
 /**
@@ -155,6 +160,8 @@ export const transformFormToRequest = (form) => {
       ...pick(entry, Object.keys(defaultRequestPaymentEntry)),
     }));
 
+  const attachments = transformAttachmentsToRequest(form);
+
   return {
     ...omit(form, ['payment_receive_no_manually', 'payment_receive_no']),
     // The `payment_receive_no_manually` will be presented just if the auto-increment
@@ -163,6 +170,7 @@ export const transformFormToRequest = (form) => {
       payment_receive_no: form.payment_receive_no,
     }),
     entries: orderingLinesIndexes(entries),
+    attachments,
   };
 };
 

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

@@ -7,6 +7,7 @@ import { CLASSES } from '@/constants/classes';
 import { Paper, Row, Col } from '@/components';
 import { ReceiptFormFooterLeft } from './ReceiptFormFooterLeft';
 import { ReceiptFormFooterRight } from './ReceiptFormFooterRight';
+import { UploadAttachmentButton } from '@/containers/Attachments/UploadAttachmentButton';
 
 export default function ReceiptFormFooter({}) {
   return (
@@ -15,6 +16,7 @@ export default function ReceiptFormFooter({}) {
         <Row>
           <Col md={8}>
             <ReceiptFormFooterLeft />
+            <UploadAttachmentButton />
           </Col>
 
           <Col md={4}>

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

@@ -18,6 +18,10 @@ import {
 } from '@/containers/Entries/utils';
 import { useCurrentOrganization } from '@/hooks/state';
 import { getEntriesTotal } from '@/containers/Entries/utils';
+import {
+  transformAttachmentsToForm,
+  transformAttachmentsToRequest,
+} from '@/containers/Attachments/utils';
 
 export const MIN_LINES_NUMBER = 1;
 
@@ -56,6 +60,7 @@ export const defaultReceipt = {
   exchange_rate: 1,
   currency_code: '',
   entries: [...repeatValue(defaultReceiptEntry, MIN_LINES_NUMBER)],
+  attachments: [],
 };
 
 const ERRORS = {
@@ -81,9 +86,12 @@ export const transformToEditForm = (receipt) => {
     updateItemsEntriesTotal,
   )(initialEntries);
 
+  const attachments = transformAttachmentsToForm(receipt);
+
   return {
     ...transformToForm(receipt, defaultReceipt),
     entries,
+    attachments,
   };
 };
 
@@ -142,6 +150,7 @@ export const transformFormValuesToRequest = (values) => {
   const entries = values.entries.filter(
     (item) => item.item_id && item.quantity,
   );
+  const attachments = transformAttachmentsToRequest(values);
 
   return {
     ...omit(values, ['receipt_number_manually', 'receipt_number']),
@@ -152,6 +161,7 @@ export const transformFormValuesToRequest = (values) => {
       ...transformToForm(entry, defaultReceiptEntryReq),
     })),
     closed: false,
+    attachments,
   };
 };