fix: darkmode ui bugs

fix: account transactions don't show up

packages/server/src/modules/CreditNoteRefunds/dto/CreditNoteRefund.dto.ts

@@ -1,5 +1,6 @@
 import { ApiProperty } from '@nestjs/swagger';
-import { IsNotEmpty, IsOptional, IsPositive, IsString } from 'class-validator';
+import { ToNumber, IsOptional } from '@/common/decorators/Validators';
+import { IsDateString, IsNotEmpty, IsPositive, IsString } from 'class-validator';
 import { IsDate } from 'class-validator';
 import { IsNumber } from 'class-validator';
 
@@ -10,8 +11,13 @@ export class CreditNoteRefundDto {
     description: 'The id of the from account',
     example: 1,
   })
+  @ApiProperty({
+    description: 'The id of the from account',
+    example: 1,
+  })
   fromAccountId: number;
 
+  @ToNumber()
   @IsNumber()
   @IsPositive()
   @IsNotEmpty()
@@ -21,6 +27,7 @@ export class CreditNoteRefundDto {
   })
   amount: number;
 
+  @ToNumber()
   @IsNumber()
   @IsOptional()
   @IsPositive()
@@ -30,23 +37,23 @@ export class CreditNoteRefundDto {
   })
   exchangeRate?: number;
 
+  @IsOptional()
   @IsString()
-  @IsNotEmpty()
   @ApiProperty({
     description: 'The reference number of the credit note refund',
     example: '123456',
   })
   referenceNo: string;
 
+  @IsOptional()
   @IsString()
-  @IsNotEmpty()
   @ApiProperty({
     description: 'The description of the credit note refund',
     example: 'Credit note refund',
   })
   description: string;
 
-  @IsDate()
+  @IsDateString()
   @IsNotEmpty()
   @ApiProperty({
     description: 'The date of the credit note refund',
@@ -54,6 +61,7 @@ export class CreditNoteRefundDto {
   })
   date: Date;
 
+  @ToNumber()
   @IsNumber()
   @IsOptional()
   @ApiProperty({

packages/server/src/modules/CreditNotes/queries/GetCreditNotePdf.serivce.ts

@@ -1,10 +1,10 @@
 import { Inject, Injectable } from '@nestjs/common';
+import { renderCreditNotePaperTemplateHtml } from '@bigcapital/pdf-templates';
 import { GetCreditNoteService } from './GetCreditNote.service';
 import { CreditNoteBrandingTemplate } from './CreditNoteBrandingTemplate.service';
 import { transformCreditNoteToPdfTemplate } from '../utils';
 import { CreditNote } from '../models/CreditNote';
 import { ChromiumlyTenancy } from '@/modules/ChromiumlyTenancy/ChromiumlyTenancy.service';
-import { TemplateInjectable } from '@/modules/TemplateInjectable/TemplateInjectable.service';
 import { EventEmitter2 } from '@nestjs/event-emitter';
 import { PdfTemplateModel } from '@/modules/PdfTemplate/models/PdfTemplate';
 import { CreditNotePdfTemplateAttributes } from '../types/CreditNotes.types';
@@ -15,7 +15,6 @@ import { TenantModelProxy } from '@/modules/System/models/TenantBaseModel';
 export class GetCreditNotePdf {
   /**
    * @param {ChromiumlyTenancy} chromiumlyTenancy - Chromiumly tenancy service.
-   * @param {TemplateInjectable} templateInjectable - Template injectable service.
    * @param {GetCreditNote} getCreditNoteService - Get credit note service.
    * @param {CreditNoteBrandingTemplate} creditNoteBrandingTemplate - Credit note branding template service.
    * @param {EventEmitter2} eventPublisher - Event publisher service.
@@ -24,7 +23,6 @@ export class GetCreditNotePdf {
    */
   constructor(
     private readonly chromiumlyTenancy: ChromiumlyTenancy,
-    private readonly templateInjectable: TemplateInjectable,
     private readonly getCreditNoteService: GetCreditNoteService,
     private readonly creditNoteBrandingTemplate: CreditNoteBrandingTemplate,
     private readonly eventPublisher: EventEmitter2,
@@ -36,23 +34,40 @@ export class GetCreditNotePdf {
     private readonly pdfTemplateModel: TenantModelProxy<
       typeof PdfTemplateModel
     >,
-  ) {}
+  ) { }
 
   /**
-   * Retrieves sale invoice pdf content.
+   * Retrieves credit note html content.
+   * @param {number} creditNoteId - Credit note id.
+   * @returns {Promise<string>}
+   */
+  public async getCreditNoteHtml(creditNoteId: number): Promise<string> {
+    const brandingAttributes =
+      await this.getCreditNoteBrandingAttributes(creditNoteId);
+
+    // Map attributes to match the React component props
+    // The branding template returns companyLogoUri, but type may have companyLogo
+    const props = {
+      ...brandingAttributes,
+      companyLogoUri:
+        (brandingAttributes as any).companyLogoUri ||
+        (brandingAttributes as any).companyLogo ||
+        '',
+    };
+
+    return renderCreditNotePaperTemplateHtml(props);
+  }
+
+  /**
+   * Retrieves credit note pdf content.
    * @param {number} creditNoteId - Credit note id.
    * @returns {Promise<[Buffer, string]>}
    */
   public async getCreditNotePdf(
     creditNoteId: number,
   ): Promise<[Buffer, string]> {
-    const brandingAttributes =
-      await this.getCreditNoteBrandingAttributes(creditNoteId);
-    const htmlContent = await this.templateInjectable.render(
-      'modules/credit-note-standard',
-      brandingAttributes,
-    );
     const filename = await this.getCreditNoteFilename(creditNoteId);
+    const htmlContent = await this.getCreditNoteHtml(creditNoteId);
 
     const document =
       await this.chromiumlyTenancy.convertHtmlContent(htmlContent);

packages/server/src/modules/VendorCreditsRefund/VendorCreditsRefund.application.ts

@@ -2,19 +2,35 @@ import { Injectable } from '@nestjs/common';
 import { DeleteRefundVendorCreditService } from './commands/DeleteRefundVendorCredit.service';
 import { RefundVendorCredit } from './models/RefundVendorCredit';
 import { CreateRefundVendorCredit } from './commands/CreateRefundVendorCredit.service';
-import { IRefundVendorCreditDTO } from './types/VendorCreditRefund.types';
 import { RefundVendorCreditDto } from './dtos/RefundVendorCredit.dto';
+import { GetRefundVendorCreditsService } from './queries/GetRefundVendorCredits.service';
+import { IRefundVendorCreditPOJO } from './types/VendorCreditRefund.types';
 
 @Injectable()
 export class VendorCreditsRefundApplication {
   /**
    * @param {CreateRefundVendorCredit} createRefundVendorCreditService
    * @param {DeleteRefundVendorCreditService} deleteRefundVendorCreditService
+   * @param {GetRefundVendorCreditsService} getRefundVendorCreditsService
    */
   constructor(
     private readonly createRefundVendorCreditService: CreateRefundVendorCredit,
     private readonly deleteRefundVendorCreditService: DeleteRefundVendorCreditService,
-  ) {}
+    private readonly getRefundVendorCreditsService: GetRefundVendorCreditsService,
+  ) { }
+
+  /**
+   * Retrieve the vendor credit refunds graph.
+   * @param {number} vendorCreditId - Vendor credit id.
+   * @returns {Promise<IRefundVendorCreditPOJO[]>}
+   */
+  public getVendorCreditRefunds(
+    vendorCreditId: number,
+  ): Promise<IRefundVendorCreditPOJO[]> {
+    return this.getRefundVendorCreditsService.getVendorCreditRefunds(
+      vendorCreditId,
+    );
+  }
 
   /**
    * Creates a refund vendor credit.

packages/server/src/modules/VendorCreditsRefund/VendorCreditsRefund.controller.ts

@@ -1,4 +1,4 @@
-import { Body, Controller, Delete, Param, Post } from '@nestjs/common';
+import { Body, Controller, Delete, Get, Param, Post } from '@nestjs/common';
 import { VendorCreditsRefundApplication } from './VendorCreditsRefund.application';
 import { RefundVendorCredit } from './models/RefundVendorCredit';
 import { ApiOperation, ApiTags } from '@nestjs/swagger';
@@ -9,7 +9,22 @@ import { RefundVendorCreditDto } from './dtos/RefundVendorCredit.dto';
 export class VendorCreditsRefundController {
   constructor(
     private readonly vendorCreditsRefundApplication: VendorCreditsRefundApplication,
-  ) {}
+  ) { }
+
+  /**
+   * Retrieve the vendor credit refunds graph.
+   * @param {number} vendorCreditId - Vendor credit id.
+   * @returns {Promise<IRefundVendorCreditPOJO[]>}
+   */
+  @Get(':vendorCreditId/refund')
+  @ApiOperation({ summary: 'Retrieve the vendor credit refunds graph.' })
+  public getVendorCreditRefunds(
+    @Param('vendorCreditId') vendorCreditId: string,
+  ) {
+    return this.vendorCreditsRefundApplication.getVendorCreditRefunds(
+      Number(vendorCreditId),
+    );
+  }
 
   /**
    * Creates a refund vendor credit.
@@ -17,7 +32,7 @@ export class VendorCreditsRefundController {
    * @param {IRefundVendorCreditDTO} refundVendorCreditDTO
    * @returns {Promise<RefundVendorCredit>}
    */
-  @Post(':vendorCreditId/refunds')
+  @Post(':vendorCreditId/refund')
   @ApiOperation({ summary: 'Create a refund for the given vendor credit.' })
   public async createRefundVendorCredit(
     @Param('vendorCreditId') vendorCreditId: string,

packages/server/src/modules/VendorCreditsRefund/dtos/RefundVendorCredit.dto.ts

@@ -1,10 +1,12 @@
+import { IsOptional, ToNumber } from '@/common/decorators/Validators';
 import { ApiProperty } from '@nestjs/swagger';
-import { Min } from 'class-validator';
+import { IsDateString, Min } from 'class-validator';
 import { IsString } from 'class-validator';
 import { IsDate } from 'class-validator';
-import { IsNotEmpty, IsNumber, IsOptional, IsPositive } from 'class-validator';
+import { IsNotEmpty, IsNumber, IsPositive } from 'class-validator';
 
 export class RefundVendorCreditDto {
+  @ToNumber()
   @IsNumber()
   @IsNotEmpty()
   @Min(0)
@@ -32,6 +34,7 @@ export class RefundVendorCreditDto {
   })
   depositAccountId: number;
 
+  @IsOptional()
   @IsString()
   @IsNotEmpty()
   @ApiProperty({
@@ -40,7 +43,7 @@ export class RefundVendorCreditDto {
   })
   description: string;
 
-  @IsDate()
+  @IsDateString()
   @IsNotEmpty()
   @ApiProperty({
     description: 'The date of the refund',

packages/server/src/modules/Warehouses/WarehouseItems.controller.ts

@@ -0,0 +1,37 @@
+import { Controller, Get, Param } from '@nestjs/common';
+import { WarehousesApplication } from './WarehousesApplication.service';
+import {
+  ApiOperation,
+  ApiParam,
+  ApiResponse,
+  ApiTags,
+} from '@nestjs/swagger';
+import { ApiCommonHeaders } from '@/common/decorators/ApiCommonHeaders';
+
+@Controller('items')
+@ApiTags('Warehouses')
+@ApiCommonHeaders()
+export class WarehouseItemsController {
+  constructor(private warehousesApplication: WarehousesApplication) { }
+
+  @Get(':id/warehouses')
+  @ApiOperation({
+    summary: 'Retrieves the item associated warehouses.',
+  })
+  @ApiResponse({
+    status: 200,
+    description:
+      'The item associated warehouses have been successfully retrieved.',
+  })
+  @ApiResponse({ status: 404, description: 'The item not found.' })
+  @ApiParam({
+    name: 'id',
+    required: true,
+    type: Number,
+    description: 'The item id',
+  })
+  getItemWarehouses(@Param('id') itemId: string) {
+    return this.warehousesApplication.getItemWarehouses(Number(itemId));
+  }
+}
+

packages/server/src/modules/Warehouses/Warehouses.controller.ts

@@ -85,10 +85,4 @@ export class WarehousesController {
   markWarehousePrimary(@Param('id') warehouseId: string) {
     return this.warehousesApplication.markWarehousePrimary(Number(warehouseId));
   }
-
-  @Get('items/:itemId')
-  @ApiOperation({ summary: 'Get item warehouses' })
-  getItemWarehouses(@Param('itemId') itemId: string) {
-    return this.warehousesApplication.getItemWarehouses(Number(itemId));
-  }
 }

packages/server/src/modules/Warehouses/Warehouses.module.ts

@@ -7,6 +7,7 @@ import { CreateWarehouse } from './commands/CreateWarehouse.service';
 import { EditWarehouse } from './commands/EditWarehouse.service';
 import { DeleteWarehouseService } from './commands/DeleteWarehouse.service';
 import { WarehousesController } from './Warehouses.controller';
+import { WarehouseItemsController } from './WarehouseItems.controller';
 import { GetWarehouse } from './queries/GetWarehouse';
 import { WarehouseMarkPrimary } from './commands/WarehouseMarkPrimary.service';
 import { GetWarehouses } from './queries/GetWarehouses';
@@ -47,7 +48,7 @@ const models = [RegisterTenancyModel(Warehouse)];
 
 @Module({
   imports: [TenancyDatabaseModule, ...models],
-  controllers: [WarehousesController],
+  controllers: [WarehousesController, WarehouseItemsController],
   providers: [
     CreateWarehouse,
     EditWarehouse,
@@ -90,6 +91,6 @@ const models = [RegisterTenancyModel(Warehouse)];
     InventoryTransactionsWarehouses,
     ValidateWarehouseExistance
   ],
-  exports: [WarehousesSettings, WarehouseTransactionDTOTransform, ...models],
+  exports: [WarehousesSettings, WarehouseTransactionDTOTransform, WarehousesApplication, ...models],
 })
 export class WarehousesModule {}

packages/webapp/src/components/AdvancedFilter/AdvancedFilterValueField.tsx

@@ -1,5 +1,5 @@
 // @ts-nocheck
-import React from 'react';
+import React, { useMemo } from 'react';
 import { Position, Checkbox, InputGroup } from '@blueprintjs/core';
 import { DateInput } from '@blueprintjs/datetime';
 import moment from 'moment';
@@ -7,23 +7,29 @@ import intl from 'react-intl-universal';
 import { isUndefined } from 'lodash';
 
 import { useAutofocus } from '@/hooks';
-import { T, Choose, ListSelect } from '@/components';
+import { T, Choose } from '@/components';
+import { Select } from '@/components/Forms';
 import { momentFormatter } from '@/utils';
 
 function AdvancedFilterEnumerationField({ options, value, ...rest }) {
+  const selectedItem = useMemo(
+    () => options.find((opt) => opt.key === value) || null,
+    [options, value],
+  );
+
   return (
-    <ListSelect
+    <Select
       items={options}
-      selectedItem={value}
+      selectedItem={selectedItem}
       popoverProps={{
         fill: true,
         inline: true,
         minimal: true,
         captureDismiss: true,
       }}
-      defaultText={<T id={'filter.select_option'} />}
-      textProp={'label'}
-      selectedItemProp={'key'}
+      placeholder={<T id={'filter.select_option'} />}
+      textAccessor={'label'}
+      valueAccessor={'key'}
       {...rest}
     />
   );

packages/webapp/src/containers/Accounts/withAccountsTableActions.tsx

@@ -14,4 +14,3 @@ const mapActionsToProps = (dispatch) => ({
 });
 
 export const withAccountsTableActions = connect(null, mapActionsToProps);
-export const withAccountsActions = withAccountsTableActions;

packages/webapp/src/containers/Dialogs/BillNumberDialog/BillNumberDialogContent.tsx

@@ -8,7 +8,7 @@ import ReferenceNumberForm from '@/containers/JournalNumber/ReferenceNumberForm'
 import { withDialogActions } from '@/containers/Dialog/withDialogActions';
 import { withSettingsActions } from '@/containers/Settings/withSettingsActions';
 import { withSettings } from '@/containers/Settings/withSettings';
-import { withBillActions } from '@/containers/Purchases/Bills/BillsLanding/withBillsActions';
+import { withBillsActions } from '@/containers/Purchases/Bills/BillsLanding/withBillsActions';
 
 import { compose, optionsMapToArray } from '@/utils';
 
@@ -28,7 +28,7 @@ function BillNumberDialogContent({
   // #withDialogActions
   closeDialog,
 
-  // #withBillActions
+  // #withBillsActions
   setBillNumberChanged,
 }) {
   const fetchSettings = useQuery(['settings'], () => requestFetchOptions({}));
@@ -76,5 +76,5 @@ export default compose(
     nextNumber: billsettings?.next_number,
     numberPrefix: billsettings?.number_prefix,
   })),
-  withBillActions,
+  withBillsActions,
 )(BillNumberDialogContent);

packages/webapp/src/containers/Dialogs/ContactDuplicateDialog/ContactDuplicateForm.tsx

@@ -63,7 +63,6 @@ function ContactDuplicateForm({
               name={'contact_type'}
               label={<T id={'contact_type'} />}
               labelInfo={<FieldRequiredHint />}
-              className={'form-group--select-list'}
             >
               <FSelect
                 name={'contact_type'}

packages/webapp/src/containers/Dialogs/InventoryAdjustmentFormDialog/DecrementAdjustmentFields.tsx

@@ -1,9 +1,17 @@
 // @ts-nocheck
 import React from 'react';
-import { Field, ErrorMessage, FastField } from 'formik';
+import { Field, ErrorMessage, FastField, useFormikContext } from 'formik';
 import { FormGroup, InputGroup } from '@blueprintjs/core';
 import { inputIntent, toSafeNumber } from '@/utils';
-import { Row, Col, MoneyInputGroup, FormattedMessage as T } from '@/components';
+import {
+  Row,
+  Col,
+  MoneyInputGroup,
+  FormattedMessage as T,
+  FMoneyInputGroup,
+  FFormGroup,
+  FInputGroup,
+} from '@/components';
 import { useAutofocus } from '@/hooks';
 import { decrementQuantity } from './utils';
 
@@ -12,27 +20,19 @@ import { decrementQuantity } from './utils';
  */
 function DecrementAdjustmentFields() {
   const decrementFieldRef = useAutofocus();
+  const { values, setFieldValue } = useFormikContext();
 
   return (
     <Row className={'row--decrement-fields'}>
       {/*------------ Quantity on hand  -----------*/}
       <Col className={'col--quantity-on-hand'}>
-        <FastField name={'quantity_on_hand'}>
-          {({ field, meta: { error, touched } }) => (
-            <FormGroup
-              label={<T id={'qty_on_hand'} />}
-              intent={inputIntent({ error, touched })}
-              helperText={<ErrorMessage name="quantity_on_hand" />}
-            >
-              <InputGroup
-                disabled={true}
-                medium={'true'}
-                intent={inputIntent({ error, touched })}
-                {...field}
-              />
-            </FormGroup>
-          )}
-        </FastField>
+        <FFormGroup name={'quantity_on_hand'} label={<T id={'qty_on_hand'} />}>
+          <FInputGroup
+            name={'quantity_on_hand'}
+            disabled={true}
+            medium={'true'}
+          />
+        </FFormGroup>
       </Col>
 
       <Col className={'col--sign'}>
@@ -41,40 +41,23 @@ function DecrementAdjustmentFields() {
 
       {/*------------ Decrement -----------*/}
       <Col className={'col--decrement'}>
-        <Field name={'quantity'}>
-          {({
-            form: { values, setFieldValue },
-            field,
-            meta: { error, touched },
-          }) => (
-            <FormGroup
-              label={<T id={'decrement'} />}
-              intent={inputIntent({ error, touched })}
-              helperText={<ErrorMessage name="quantity" />}
-              fill={true}
-            >
-              <MoneyInputGroup
-                value={field.value}
-                allowDecimals={false}
-                allowNegativeValue={true}
-                inputRef={(ref) => (decrementFieldRef.current = ref)}
-                onChange={(value) => {
-                  setFieldValue('quantity', value);
-                }}
-                onBlurValue={(value) => {
-                  setFieldValue(
-                    'new_quantity',
-                    decrementQuantity(
-                      toSafeNumber(value),
-                      toSafeNumber(values.quantity_on_hand),
-                    ),
-                  );
-                }}
-                intent={inputIntent({ error, touched })}
-              />
-            </FormGroup>
-          )}
-        </Field>
+        <FFormGroup name={'quantity'} label={<T id={'decrement'} />} fill>
+          <FMoneyInputGroup
+            name={'quantity'}
+            allowDecimals={false}
+            allowNegativeValue={true}
+            inputRef={(ref) => (decrementFieldRef.current = ref)}
+            onBlurValue={(value) => {
+              setFieldValue(
+                'new_quantity',
+                decrementQuantity(
+                  toSafeNumber(value),
+                  toSafeNumber(values.quantity_on_hand),
+                ),
+              );
+            }}
+          />
+        </FFormGroup>
       </Col>
 
       <Col className={'col--sign'}>
@@ -82,38 +65,27 @@ function DecrementAdjustmentFields() {
       </Col>
       {/*------------ New quantity -----------*/}
       <Col className={'col--quantity'}>
-        <Field name={'new_quantity'}>
-          {({
-            form: { values, setFieldValue },
-            field,
-            meta: { error, touched },
-          }) => (
-            <FormGroup
-              label={<T id={'new_quantity'} />}
-              intent={inputIntent({ error, touched })}
-              helperText={<ErrorMessage name="new_quantity" />}
-            >
-              <MoneyInputGroup
-                value={field.value}
-                allowDecimals={false}
-                allowNegativeValue={true}
-                onChange={(value) => {
-                  setFieldValue('new_quantity', value);
-                }}
-                onBlurValue={(value) => {
-                  setFieldValue(
-                    'quantity',
-                    decrementQuantity(
-                      toSafeNumber(value),
-                      toSafeNumber(values.quantity_on_hand),
-                    ),
-                  );
-                }}
-                intent={inputIntent({ error, touched })}
-              />
-            </FormGroup>
-          )}
-        </Field>
+        <FFormGroup
+          name={'new_quantity'}
+          label={<T id={'new_quantity'} />}
+          fill
+          fastField
+        >
+          <FMoneyInputGroup
+            name={'new_quantity'}
+            allowDecimals={false}
+            allowNegativeValue={true}
+            onBlurValue={(value) => {
+              setFieldValue(
+                'quantity',
+                decrementQuantity(
+                  toSafeNumber(value),
+                  toSafeNumber(values.quantity_on_hand),
+                ),
+              );
+            }}
+          />
+        </FFormGroup>
       </Col>
     </Row>
   );

packages/webapp/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentFormDialogContent.tsx

@@ -1,8 +1,8 @@
 // @ts-nocheck
 import React from 'react';
- 
+
 import '@/style/pages/Items/ItemAdjustmentDialog.scss';
- 
+
 import { InventoryAdjustmentFormProvider } from './InventoryAdjustmentFormProvider';
 import InventoryAdjustmentForm from './InventoryAdjustmentForm';
 

packages/webapp/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentFormDialogFields.tsx

@@ -160,7 +160,7 @@ export default function InventoryAdjustmentFormDialogFields() {
         name={'adjustment_account_id'}
         label={<T id={'adjustment_account'} />}
         labelInfo={<FieldRequiredHint />}
-        className={'form-group--adjustment-account'}
+        fill
       >
         <FAccountsSuggestField
           name={'adjustment_account_id'}
@@ -168,6 +168,8 @@ export default function InventoryAdjustmentFormDialogFields() {
           inputProps={{
             placeholder: intl.get('select_adjustment_account'),
           }}
+          fill
+          fastField
         />
       </FFormGroup>
 
@@ -185,16 +187,21 @@ export default function InventoryAdjustmentFormDialogFields() {
         name={'reason'}
         label={<T id={'adjustment_reasons'} />}
         labelInfo={<FieldRequiredHint />}
+        fill
         fastField
       >
-        <FTextArea name={'reason'} growVertically large fastField />
+        <FTextArea name={'reason'} growVertically large fastField fill />
       </FFormGroup>
     </div>
   );
 }
 
 export const FeatureRowDivider = styled.div`
+  --x-color-background: #e9e9e9;
+  .bp4-dark & {
+    --x-color-background: rgba(255, 255, 255, 0.1);
+  }
   height: 2px;
-  background: #e9e9e9;
+  background: var(--x-color-background);
   margin-bottom: 15px;
 `;

packages/webapp/src/containers/Dialogs/RefundCreditNoteDialog/RefundCreditNoteFormFields.tsx

@@ -27,10 +27,12 @@ import {
   FormattedMessage as T,
   ExchangeRateMutedField,
   BranchSelect,
-  BranchSelectButton,
   FeatureCan,
   FInputGroup,
   FMoneyInputGroup,
+  FDateInput,
+  FFormGroup,
+  FTextArea,
 } from '@/components';
 import {
   inputIntent,
@@ -66,16 +68,13 @@ function RefundCreditNoteFormFields({
       <FeatureCan feature={Features.Branches}>
         <Row>
           <Col xs={5}>
-            <FormGroup
-              label={<T id={'branch'} />}
-              className={classNames('form-group--select-list', Classes.FILL)}
-            >
+            <FFormGroup name={'branch_id'} label={<T id={'branch'} />}>
               <BranchSelect
                 name={'branch_id'}
                 branches={branches}
                 popoverProps={{ minimal: true }}
               />
-            </FormGroup>
+            </FFormGroup>
           </Col>
         </Row>
         <BranchRowDivider />
@@ -84,29 +83,23 @@ function RefundCreditNoteFormFields({
       <Row>
         <Col xs={5}>
           {/* ------------- Refund date ------------- */}
-          <FastField name={'date'}>
-            {({ form, field: { value }, meta: { error, touched } }) => (
-              <FFormGroup
-                name={'date'}
-                label={<T id={'refund_credit_note.dialog.refund_date'} />}
-                labelInfo={<FieldRequiredHint />}
-                fill
-              >
-                <DateInput
-                  {...momentFormatter('YYYY/MM/DD')}
-                  value={tansformDateValue(value)}
-                  onChange={handleDateChange((formattedDate) => {
-                    form.setFieldValue('date', formattedDate);
-                  })}
-                  popoverProps={{ position: Position.BOTTOM, minimal: true }}
-                  inputProps={{
-                    leftIcon: <Icon icon={'date-range'} />,
-                  }}
-                />
-              </FFormGroup>
-            )}
-          </FastField>
+          <FFormGroup
+            name={'date'}
+            label={<T id={'refund_credit_note.dialog.refund_date'} />}
+            labelInfo={<FieldRequiredHint />}
+            fill
+          >
+            <FDateInput
+              name={'date'}
+              {...momentFormatter('YYYY/MM/DD')}
+              popoverProps={{ position: Position.BOTTOM, minimal: true }}
+              inputProps={{
+                leftIcon: <Icon icon={'date-range'} />,
+              }}
+            />
+          </FFormGroup>
         </Col>
+
         <Col xs={5}>
           {/* ------------ Form account ------------ */}
           <FFormGroup
@@ -114,6 +107,7 @@ function RefundCreditNoteFormFields({
             label={<T id={'refund_credit_note.dialog.from_account'} />}
             labelInfo={<FieldRequiredHint />}
             fill
+            fastField
           >
             <FAccountsSuggestField
               name={'from_account_id'}
@@ -126,6 +120,7 @@ function RefundCreditNoteFormFields({
                 ACCOUNT_TYPE.CASH,
                 ACCOUNT_TYPE.FIXED_ASSET,
               ]}
+              fastField
             />
           </FFormGroup>
         </Col>
@@ -137,6 +132,7 @@ function RefundCreditNoteFormFields({
         label={<T id={'refund_credit_note.dialog.amount'} />}
         labelInfo={<FieldRequiredHint />}
         fill
+        fastField
       >
         <ControlGroup>
           <InputPrependText text={values.currency_code} />
@@ -144,6 +140,7 @@ function RefundCreditNoteFormFields({
             name={'amount'}
             minimal={true}
             inputRef={(ref) => (amountFieldRef.current = ref)}
+
           />
         </ControlGroup>
       </FFormGroup>
@@ -161,21 +158,19 @@ function RefundCreditNoteFormFields({
       </If>
 
       {/* ------------ Reference No. ------------ */}
-      <FFormGroup name={'reference_no'} label={<T id={'reference_no'} />} fill>
+      <FFormGroup name={'reference_no'} label={<T id={'reference_no'} />} fill fastField>
         <FInputGroup name={'reference_no'} minimal fill />
       </FFormGroup>
 
       {/* --------- Statement --------- */}
-      <FastField name={'description'}>
-        {({ form, field, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'refund_credit_note.dialog.description'} />}
-            className={'form-group--description'}
-          >
-            <TextArea growVertically={true} {...field} />
-          </FormGroup>
-        )}
-      </FastField>
+      <FFormGroup
+        name={'description'}
+        label={<T id={'refund_credit_note.dialog.description'} />}
+        fill
+        fastField
+      >
+        <FTextArea name={'description'} growVertically fill fastField />
+      </FFormGroup>
     </div>
   );
 }
@@ -183,7 +178,12 @@ function RefundCreditNoteFormFields({
 export default compose(withCurrentOrganization())(RefundCreditNoteFormFields);
 
 export const BranchRowDivider = styled.div`
+  --x-divider-color: #ebf1f6;
+
+  .bp4-dark & {
+    --x-divider-color: rgba(255, 255, 255, 0.1);
+  }
   height: 1px;
-  background: #ebf1f6;
+  background: var(--x-divider-color);
   margin-bottom: 13px;
 `;

packages/webapp/src/containers/Dialogs/RefundVendorCreditDialog/RefundVendorCreditFormFields.tsx

@@ -152,8 +152,8 @@ function RefundVendorCreditFormFields({
       </FFormGroup>
 
       {/* --------- Statement --------- */}
-      <FFormGroup name={'description'} fill fastField>
-        <FTextArea name={'description'} growVertically={true} fastField />
+      <FFormGroup name={'description'} label={<T id={'refund_vendor_credit.dialog.description'} />} fill fastField>
+        <FTextArea name={'description'} growVertically fill fastField />
       </FFormGroup>
     </div>
   );
@@ -162,7 +162,12 @@ function RefundVendorCreditFormFields({
 export default compose(withCurrentOrganization())(RefundVendorCreditFormFields);
 
 export const BranchRowDivider = styled.div`
+  --x-divider-color: #ebf1f6;
+
+  .bp4-dark & {
+    --x-divider-color: rgba(255, 255, 255, 0.1);
+  }
   height: 1px;
-  background: #ebf1f6;
+  background: var(--x-divider-color);
   margin-bottom: 13px;
 `;

packages/webapp/src/containers/Drawers/AccountDrawer/AccountDrawerTable.tsx

@@ -70,9 +70,14 @@ function AccountDrawerDataTable() {
 export default compose(withDrawerActions)(AccountDrawerTable);
 
 const TableFooter = styled.div`
+  --x-border-color: #d2dde2;
+
+  .bp4-dark & {
+    --x-border-color: var(--color-dark-gray5);
+  }
   padding: 6px 14px;
   display: block;
-  border-top: 1px solid #d2dde2;
-  border-bottom: 1px solid #d2dde2;
+  border-top: 1px solid var(--x-border-color);
+  border-bottom: 1px solid var(--x-border-color);
   font-size: 12px;
 `;

packages/webapp/src/containers/ItemsCategories/ItemCategoriesList.tsx

@@ -9,13 +9,13 @@ import { ItemsCategoriesProvider } from './ItemsCategoriesProvider';
 
 import ItemCategoriesTable from './ItemCategoriesTable';
 import ItemsCategoryActionsBar from './ItemsCategoryActionsBar';
-import { withItemsCategories } from './withItemCategories';
+import { withItemCategories } from './withItemCategories';
 
 /**
  * Item categories list.
  */
 function ItemCategoryList({
-  // #withItemsCategories
+  // #withItemCategories
   itemsCategoriesTableState
 }) {
   return (
@@ -32,7 +32,7 @@ function ItemCategoryList({
 }
 
 export default R.compose(
-  withItemsCategories(({ itemsCategoriesTableState }) => ({
+  withItemCategories(({ itemsCategoriesTableState }) => ({
     itemsCategoriesTableState,
   })),
 )(ItemCategoryList);

packages/webapp/src/containers/ItemsCategories/withItemCategories.tsx

@@ -15,5 +15,3 @@ export const withItemCategories = (mapState) => {
   };
   return connect(mapStateToProps);
 };
-
-export const withItemsCategories = withItemCategories;

packages/webapp/src/containers/PaymentMethods/PaymentMethodSelect.tsx

@@ -63,7 +63,12 @@ export function PaymentMethodSelectField({
 }
 
 const PaymentMethodSelectRoot = styled(Group)`
-  border: 1px solid #d3d8de;
+  --x-color-border: #d3d8de;
+
+  .bp4-dark & {
+    --x-color-border: rgba(255, 255, 255, 0.2);
+  }
+  border: 1px solid var(--x-color-border);
   border-radius: 3px;
   padding: 8px;
   gap: 0;
@@ -72,13 +77,23 @@ const PaymentMethodSelectRoot = styled(Group)`
 `;
 
 const PaymentMethodCheckbox = styled(Checkbox)`
+  --x-color-border: #c5cbd3;
+
+  .bp4-dark & {
+    --x-color-border: rgba(255, 255, 255, 0.2);
+  }
   margin: 0;
 
   &.bp4-control .bp4-control-indicator {
-    box-shadow: 0 0 0 1px #c5cbd3;
+    box-shadow: 0 0 0 1px var(--x-color-border);
   }
 `;
 
 const PaymentMethodText = styled(Text)`
-  color: #404854;
+  --x-color-text: #404854;
+
+  .bp4-dark & {
+    --x-color-text: var(--color-light-gray4);
+  }
+  color: var(--x-color-text);
 `;

packages/webapp/src/containers/PaymentMethods/SelectPaymentMethodPopover.tsx

@@ -48,5 +48,5 @@ const PaymentMethodsTitle = styled('h6')`
   font-size: 12px;
   font-weight: 500;
   margin: 0;
-  color: rgb(95, 107, 124);
+  color: var(--color-muted-text);
 `;

packages/webapp/src/containers/Purchases/Bills/BillsLanding/BillsActionsBar.tsx

@@ -45,7 +45,7 @@ import { isEmpty } from 'lodash';
  * Bills actions bar.
  */
 function BillActionsBar({
-  // #withBillActions
+  // #withBillsActions
   setBillsTableState,
 
   // #withBills

packages/webapp/src/containers/Purchases/Bills/BillsLanding/BillsTable.tsx

@@ -13,7 +13,7 @@ import {
 import BillsEmptyStatus from './BillsEmptyStatus';
 
 import { withBills } from './withBills';
-import { withBillActions } from './withBillsActions';
+import { withBillsActions } from './withBillsActions';
 import { withAlertActions } from '@/containers/Alert/withAlertActions';
 import { withDialogActions } from '@/containers/Dialog/withDialogActions';
 import { withDrawerActions } from '@/containers/Drawer/withDrawerActions';
@@ -163,7 +163,7 @@ function BillsDataTable({
 
 export default compose(
   withBills(({ billsTableState }) => ({ billsTableState })),
-  withBillActions,
+  withBillsActions,
   withAlertActions,
   withDrawerActions,
   withDialogActions,

packages/webapp/src/containers/Purchases/Bills/BillsLanding/BillsViewsTabs.tsx

@@ -6,7 +6,7 @@ import { DashboardViewsTabs } from '@/components';
 import { useBillsListContext } from './BillsListProvider';
 
 import { withBills } from './withBills';
-import { withBillActions } from './withBillsActions';
+import { withBillsActions } from './withBillsActions';
 
 import { compose, transfromViewsToTabs } from '@/utils';
 
@@ -14,7 +14,7 @@ import { compose, transfromViewsToTabs } from '@/utils';
  * Bills view tabs.
  */
 function BillViewTabs({
-  // #withBillActions
+  // #withBillsActions
   setBillsTableState,
 
   // #withBills
@@ -47,7 +47,7 @@ function BillViewTabs({
 }
 
 export default compose(
-  withBillActions,
+  withBillsActions,
   withBills(({ billsTableState }) => ({
     billsCurrentView: billsTableState.viewSlug,
   })),

packages/webapp/src/containers/Purchases/Bills/BillsLanding/withBillsActions.tsx

@@ -14,4 +14,3 @@ const mapDispatchToProps = (dispatch) => ({
 });
 
 export const withBillsActions = connect(null, mapDispatchToProps);
-export const withBillActions = withBillsActions;

packages/webapp/src/containers/Purchases/PaymentsMade/PaymentsLanding/withPaymentMade.tsx

@@ -18,5 +18,3 @@ export const withPaymentMade = (mapState) => {
   };
   return connect(mapStateToProps);
 };
-
-export const withPaymentMades = withPaymentMade;

packages/webapp/src/containers/Router/withRouteActions.tsx

@@ -29,4 +29,4 @@ const mapDispatchToProps = (dispatch, props) => {
   }
 }
 
-export const withRouteActions = connect(null, mapDispatchToProps)  
+export const withRouteActions = connect(null, mapDispatchToProps);

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

@@ -12,7 +12,6 @@ import { useIsDarkMode } from '@/hooks/useDarkMode';
 const inputGroupCss = css`
   & .bp4-input {
     max-width: 110px;
-    color: rgb(17, 17, 17);
     padding-left: 8px;
   }
 `;

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

@@ -13,7 +13,6 @@ import { useIsDarkMode } from '@/hooks/useDarkMode';
 const inputGroupCss = css`
   & .bp4-input {
     max-width: 110px;
-    color: rgb(17, 17, 17);
     padding-left: 8px;
   }
 `;

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

@@ -127,7 +127,7 @@ const PaymentOptionsText = styled(Box)`
   font-size: 13px;
   display: inline-flex;
   align-items: center;
-  color: #5f6b7c;
+  color: var(--color-muted-text);
 `;
 
 const PaymentOptionsButton = styled(Button)`

packages/webapp/src/containers/Setup/SetupSubscription/SubscriptionPlansPeriodSwitcher.tsx

@@ -10,7 +10,7 @@ import { SubscriptionPlansPeriod } from '@/store/plans/plans.reducer';
 import styles from './SetupSubscription.module.scss';
 
 interface SubscriptionPlansPeriodsSwitchCombinedProps
-  extends WithSubscriptionPlansActionsProps {}
+  extends WithSubscriptionPlansActionsProps { }
 
 function SubscriptionPlansPeriodSwitcherRoot({
   // #withSubscriptionPlansActions

packages/webapp/src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferFloatingActions.tsx

@@ -11,12 +11,11 @@ import {
   Menu,
   MenuItem,
 } from '@blueprintjs/core';
-import { If, Icon, FormattedMessage as T } from '@/components';
+import { If, Icon, FormattedMessage as T, Group } from '@/components';
 import classNames from 'classnames';
 import { useFormikContext } from 'formik';
-import { CLASSES } from '@/constants/classes';
-
 import { useWarehouseTransferFormContext } from './WarehouseTransferFormProvider';
+import { CLASSES } from '@/constants/classes';
 
 /**
  * Warehouse transfer floating actions bar.
@@ -77,98 +76,101 @@ export default function WarehouseTransferFloatingActions() {
 
   return (
     <div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
-      {/* ----------- Save Intitate & transferred ----------- */}
-      <If condition={!warehouseTransfer || !warehouseTransfer?.is_transferred}>
-        <ButtonGroup>
+      <Group spacing={10}>
+        {/* ----------- Save Intitate & transferred ----------- */}
+        <If condition={!warehouseTransfer || !warehouseTransfer?.is_transferred}>
+          <ButtonGroup>
+            <Button
+              disabled={isSubmitting}
+              loading={isSubmitting}
+              intent={Intent.PRIMARY}
+              type="submit"
+              onClick={handleSubmitInitiateBtnClick}
+              style={{ minWidth: '85px' }}
+              text={<T id={'warehouse_transfer.save_initiate_transfer'} />}
+            />
+            <Popover
+              content={
+                <Menu>
+                  <MenuItem
+                    text={
+                      <T id={'warehouse_transfer.save_mark_as_transferred'} />
+                    }
+                    onClick={handleSubmitTransferredBtnClick}
+                  />
+                </Menu>
+              }
+              minimal={true}
+              interactionKind={PopoverInteractionKind.CLICK}
+              position={Position.BOTTOM_LEFT}
+            >
+              <Button
+                disabled={isSubmitting}
+                intent={Intent.PRIMARY}
+                rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
+              />
+            </Popover>
+          </ButtonGroup>
+
+          {/* ----------- Save As Draft ----------- */}
+          <ButtonGroup>
+            <Button
+              disabled={isSubmitting}
+              className={'ml1'}
+              onClick={handleSubmitDraftBtnClick}
+              text={<T id={'save_as_draft'} />}
+            />
+            <Popover
+              content={
+                <Menu>
+                  <MenuItem
+                    text={<T id={'save_and_new'} />}
+                    onClick={handleSubmitDraftAndNewBtnClick}
+                  />
+                  <MenuItem
+                    text={<T id={'save_continue_editing'} />}
+                    onClick={handleSubmitDraftContinueEditingBtnClick}
+                  />
+                </Menu>
+              }
+              minimal={true}
+              interactionKind={PopoverInteractionKind.CLICK}
+              position={Position.BOTTOM_LEFT}
+            >
+              <Button
+                disabled={isSubmitting}
+                rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
+              />
+            </Popover>
+          </ButtonGroup>
+        </If>
+        <If condition={warehouseTransfer && warehouseTransfer?.is_transferred}>
           <Button
             disabled={isSubmitting}
             loading={isSubmitting}
             intent={Intent.PRIMARY}
-            type="submit"
-            onClick={handleSubmitInitiateBtnClick}
-            style={{ minWidth: '85px' }}
-            text={<T id={'warehouse_transfer.save_initiate_transfer'} />}
+            onClick={handleSubmitTransferredBtnClick}
+            style={{ minWidth: '100px' }}
+            text={<T id={'save'} />}
           />
-          <Popover
-            content={
-              <Menu>
-                <MenuItem
-                  text={
-                    <T id={'warehouse_transfer.save_mark_as_transferred'} />
-                  }
-                  onClick={handleSubmitTransferredBtnClick}
-                />
-              </Menu>
-            }
-            minimal={true}
-            interactionKind={PopoverInteractionKind.CLICK}
-            position={Position.BOTTOM_LEFT}
-          >
-            <Button
-              disabled={isSubmitting}
-              intent={Intent.PRIMARY}
-              rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
-            />
-          </Popover>
-        </ButtonGroup>
+        </If>
 
-        {/* ----------- Save As Draft ----------- */}
-        <ButtonGroup>
-          <Button
-            disabled={isSubmitting}
-            className={'ml1'}
-            onClick={handleSubmitDraftBtnClick}
-            text={<T id={'save_as_draft'} />}
-          />
-          <Popover
-            content={
-              <Menu>
-                <MenuItem
-                  text={<T id={'save_and_new'} />}
-                  onClick={handleSubmitDraftAndNewBtnClick}
-                />
-                <MenuItem
-                  text={<T id={'save_continue_editing'} />}
-                  onClick={handleSubmitDraftContinueEditingBtnClick}
-                />
-              </Menu>
-            }
-            minimal={true}
-            interactionKind={PopoverInteractionKind.CLICK}
-            position={Position.BOTTOM_LEFT}
-          >
-            <Button
-              disabled={isSubmitting}
-              rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
-            />
-          </Popover>
-        </ButtonGroup>
-      </If>
-      <If condition={warehouseTransfer && warehouseTransfer?.is_transferred}>
+        {/* ----------- Clear & Reset----------- */}
         <Button
+          className={'ml1'}
           disabled={isSubmitting}
-          loading={isSubmitting}
-          intent={Intent.PRIMARY}
-          onClick={handleSubmitTransferredBtnClick}
-          style={{ minWidth: '100px' }}
-          text={<T id={'save'} />}
+          onClick={handleClearBtnClick}
+          text={warehouseTransfer ? <T id={'reset'} /> : <T id={'clear'} />}
         />
-      </If>
-      {/* ----------- Clear & Reset----------- */}
-      <Button
-        className={'ml1'}
-        disabled={isSubmitting}
-        onClick={handleClearBtnClick}
-        text={warehouseTransfer ? <T id={'reset'} /> : <T id={'clear'} />}
-      />
 
-      {/* ----------- Cancel  ----------- */}
-      <Button
-        className={'ml1'}
-        disabled={isSubmitting}
-        onClick={handleCancelBtnClick}
-        text={<T id={'cancel'} />}
-      />
+        {/* ----------- Cancel  ----------- */}
+        <Button
+          className={'ml1'}
+          disabled={isSubmitting}
+          onClick={handleCancelBtnClick}
+          text={<T id={'cancel'} />}
+        />
+      </Group>
     </div>
   );
 }

packages/webapp/src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferFormHeaderFields.tsx

@@ -80,6 +80,7 @@ function WarehouseTransferFormHeaderFields({
           inputProps={{
             leftIcon: <Icon icon={'date-range'} />,
           }}
+          fill
           fastField
         />
       </FFormGroup>

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

@@ -205,7 +205,7 @@ export function useAccountTransactions(id, props) {
     [t.ACCOUNT_TRANSACTION, id],
     { method: 'get', url: `accounts/transactions?account_id=${id}` },
     {
-      select: (res) => res.data.transactions,
+      select: (res) => res.data,
       defaultData: [],
       ...props,
     },

packages/webapp/src/style/pages/Customers/List.scss

@@ -8,12 +8,19 @@
 
       .avatar.td {
         .avatar {
+          --x-color-background: #adbcc9;
+          --x-color-text: #fff;
+            
+          .bp4-dark & {
+            --x-color-background: rgba(255, 255, 255, 0.2);
+            --x-color-text: #fff;
+          }
           display: inline-block;
-          background: #adbcc9;
+          background: var(--x-color-background);
           border-radius: 50%;
           text-align: center;
           font-weight: 400;
-          color: #fff;
+          color: var(--x-color-text);
 
           &[data-size='medium'] {
             height: 30px;

packages/webapp/src/style/pages/Vendors/List.scss

@@ -9,12 +9,19 @@
 
     .avatar.td {
       .avatar {
+        --x-color-background: #adbcc9;
+        --x-color-text: #fff;
+        
+        .bp4-dark & {
+          --x-color-background: rgba(255, 255, 255, 0.2);
+          --x-color-text: #fff;
+        }
         display: inline-block;
-        background: #adbcc9;
+        background: var(--x-color-background);
+        color: var(--x-color-text);
         border-radius: 50%;
         text-align: center;
         font-weight: 400;
-        color: #fff;
 
         &[data-size='medium'] {
           height: 30px;

shared/pdf-templates/src/components/CreditNotePaperTemplate.tsx

@@ -0,0 +1,257 @@
+import {
+  PaperTemplate,
+  PaperTemplateProps,
+  PaperTemplateTotalBorder,
+} from './PaperTemplate';
+import { Box } from '../lib/layout/Box';
+import { Text } from '../lib/text/Text';
+import { Stack } from '../lib/layout/Stack';
+import { Group } from '../lib/layout/Group';
+import {
+  DefaultPdfTemplateTerms,
+  DefaultPdfTemplateItemDescription,
+  DefaultPdfTemplateItemName,
+  DefaultPdfTemplateAddressBilledTo,
+  DefaultPdfTemplateAddressBilledFrom,
+} from './_constants';
+
+interface CreditNoteLine {
+  item?: string;
+  description?: string;
+  quantity?: string;
+  rate?: string;
+  total?: string;
+}
+
+export interface CreditNotePaperTemplateProps extends PaperTemplateProps {
+  primaryColor?: string;
+  secondaryColor?: string;
+
+  // Company
+  showCompanyLogo?: boolean;
+  companyLogoUri?: string;
+
+  companyName?: string;
+
+  // Credit Note number
+  showCreditNoteNumber?: boolean;
+  creditNoteNumebr?: string;
+  creditNoteNumberLabel?: string;
+
+  // Credit Note date
+  showCreditNoteDate?: boolean;
+  creditNoteDate?: string;
+  creditNoteDateLabel?: string;
+
+  // Address
+  showCustomerAddress?: boolean;
+  customerAddress?: string;
+
+  showCompanyAddress?: boolean;
+  companyAddress?: string;
+
+  billedToLabel?: string;
+
+  // Entries
+  lineItemLabel?: string;
+  lineQuantityLabel?: string;
+  lineRateLabel?: string;
+  lineTotalLabel?: string;
+
+  // Subtotal
+  showSubtotal?: boolean;
+  subtotalLabel?: string;
+  subtotal?: string;
+
+  // Total
+  showTotal?: boolean;
+  totalLabel?: string;
+  total?: string;
+
+  // Customer Note
+  showCustomerNote?: boolean;
+  customerNote?: string;
+  customerNoteLabel?: string;
+
+  // Terms & Conditions
+  showTermsConditions?: boolean;
+  termsConditions?: string;
+  termsConditionsLabel?: string;
+
+  lines?: Array<CreditNoteLine>;
+}
+
+export function CreditNotePaperTemplate({
+  // # Colors
+  primaryColor,
+  secondaryColor,
+
+  // # Company
+  companyName = 'Bigcapital Technology, Inc.',
+
+  showCompanyLogo = true,
+  companyLogoUri = '',
+
+  // # Credit Note number
+  creditNoteNumberLabel = 'Credit Note Number',
+  creditNoteNumebr = '346D3D40-0001',
+  showCreditNoteNumber = true,
+
+  // # Credit Note date
+  creditNoteDate = 'September 3, 2024',
+  creditNoteDateLabel = 'Credit Note Date',
+  showCreditNoteDate = true,
+
+  // Address
+  showCustomerAddress = true,
+  customerAddress = DefaultPdfTemplateAddressBilledTo,
+
+  showCompanyAddress = true,
+  companyAddress = DefaultPdfTemplateAddressBilledFrom,
+
+  billedToLabel = 'Billed To',
+
+  // Entries
+  lineItemLabel = 'Item',
+  lineQuantityLabel = 'Qty',
+  lineRateLabel = 'Rate',
+  lineTotalLabel = 'Total',
+
+  // Subtotal
+  subtotalLabel = 'Subtotal',
+  showSubtotal = true,
+  subtotal = '1000.00',
+
+  // Total
+  totalLabel = 'Total',
+  showTotal = true,
+  total = '$1000.00',
+
+  // Customer Note
+  showCustomerNote = true,
+  customerNote = '',
+  customerNoteLabel = 'Customer Note',
+
+  // Terms & Conditions
+  termsConditionsLabel = 'Terms & Conditions',
+  showTermsConditions = true,
+  termsConditions = DefaultPdfTemplateTerms,
+
+  lines = [
+    {
+      item: DefaultPdfTemplateItemName,
+      description: DefaultPdfTemplateItemDescription,
+      rate: '1',
+      quantity: '1000',
+      total: '$1000.00',
+    },
+  ],
+  ...props
+}: CreditNotePaperTemplateProps) {
+  return (
+    <PaperTemplate
+      primaryColor={primaryColor}
+      secondaryColor={secondaryColor}
+      {...props}
+    >
+      <Stack spacing={24}>
+        <Group align="start" spacing={10}>
+          <Stack flex={1}>
+            <PaperTemplate.BigTitle title={'Credit Note'} />
+
+            <PaperTemplate.TermsList>
+              {showCreditNoteNumber && (
+                <PaperTemplate.TermsItem label={creditNoteNumberLabel}>
+                  {creditNoteNumebr}
+                </PaperTemplate.TermsItem>
+              )}
+              {showCreditNoteDate && (
+                <PaperTemplate.TermsItem label={creditNoteDateLabel}>
+                  {creditNoteDate}
+                </PaperTemplate.TermsItem>
+              )}
+            </PaperTemplate.TermsList>
+          </Stack>
+
+          {companyLogoUri && showCompanyLogo && (
+            <PaperTemplate.Logo logoUri={companyLogoUri} />
+          )}
+        </Group>
+
+        <PaperTemplate.AddressesGroup>
+          {showCompanyAddress && (
+            <PaperTemplate.Address>
+              <Box dangerouslySetInnerHTML={{ __html: companyAddress }} />
+            </PaperTemplate.Address>
+          )}
+          {showCustomerAddress && (
+            <PaperTemplate.Address>
+              <strong>{billedToLabel}</strong>
+              <Box dangerouslySetInnerHTML={{ __html: customerAddress }} />
+            </PaperTemplate.Address>
+          )}
+        </PaperTemplate.AddressesGroup>
+
+        <Stack spacing={0}>
+          <PaperTemplate.Table
+            columns={[
+              {
+                label: lineItemLabel,
+                accessor: (data) => (
+                  <Stack spacing={2}>
+                    <Text>{data.item}</Text>
+                    {data.description && (
+                      <Text color={'#5f6b7c'} fontSize={12}>
+                        {data.description}
+                      </Text>
+                    )}
+                  </Stack>
+                ),
+                thStyle: { width: '60%' },
+              },
+              {
+                label: lineQuantityLabel,
+                accessor: 'quantity',
+                align: 'right',
+              },
+              { label: lineRateLabel, accessor: 'rate', align: 'right' },
+              { label: lineTotalLabel, accessor: 'total', align: 'right' },
+            ]}
+            data={lines}
+          />
+          <PaperTemplate.Totals>
+            {showSubtotal && (
+              <PaperTemplate.TotalLine
+                label={subtotalLabel}
+                amount={subtotal}
+                border={PaperTemplateTotalBorder.Gray}
+              />
+            )}
+            {showTotal && (
+              <PaperTemplate.TotalLine
+                label={totalLabel}
+                amount={total}
+                border={PaperTemplateTotalBorder.Dark}
+                style={{ fontWeight: 500 }}
+              />
+            )}
+          </PaperTemplate.Totals>
+        </Stack>
+
+        <Stack spacing={0}>
+          {showCustomerNote && customerNote && (
+            <PaperTemplate.Statement label={customerNoteLabel}>
+              {customerNote}
+            </PaperTemplate.Statement>
+          )}
+
+          {showTermsConditions && termsConditions && (
+            <PaperTemplate.Statement label={termsConditionsLabel}>
+              {termsConditions}
+            </PaperTemplate.Statement>
+          )}
+        </Stack>
+      </Stack>
+    </PaperTemplate>
+  );
+}

shared/pdf-templates/src/index.ts

@@ -1,5 +1,6 @@
 export * from './components/PaperTemplate';
 export * from './components/InvoicePaperTemplate';
+export * from './components/CreditNotePaperTemplate';
 export * from './components/EstimatePaperTemplate';
 export * from './components/ReceiptPaperTemplate';
 export * from './components/PaymentReceivedPaperTemplate';
@@ -7,6 +8,7 @@ export * from './components/FinancialSheetTemplate';
 export * from './components/ExportResourceTableTemplate';
 
 export * from './renders/render-invoice-paper-template';
+export * from './renders/render-credit-note-paper-template';
 export * from './renders/render-estimate-paper-template';
 export * from './renders/render-receipt-paper-template';
 export * from './renders/render-payment-received-paper-template';

shared/pdf-templates/src/renders/render-credit-note-paper-template.tsx

@@ -0,0 +1,17 @@
+import {
+  CreditNotePaperTemplate,
+  CreditNotePaperTemplateProps,
+} from '../components/CreditNotePaperTemplate';
+import { renderSSR } from './render-ssr';
+
+/**
+ * Renders credit note paper template html.
+ * @param {CreditNotePaperTemplateProps} props
+ * @returns {string}
+ */
+export const renderCreditNotePaperTemplateHtml = (
+  props: CreditNotePaperTemplateProps
+) => {
+  return renderSSR(<CreditNotePaperTemplate {...props} />);
+};
+