Vue SDK

The URL for the API in use.

This prop accepts boolean value to show / hide loader while fetching payment status.

This is a required prop that accepts the ID of the invoice to be paid.

This prop accepts stripe theme object to apply theme to stripe element.

Triggered when payment is succeeded.

Triggered when payment is processing.

Triggered when payment has error.

This is prop accepts type with value active, archived and both, default value is both.

This prop accepts boolean value to show / hide customer create button. default value is true.

This prop accepts boolean value to show / hide customer table title. default value is true.

This prop accepts boolean value to show / hide filters button. default value is true.

This prop accepts boolean value to show / hide tabs. default value is true.

This prop accepts object with name, email, phone, archived, key and its value for applying filter.

This prop accepts array to customize columns of table. you can pass columns key which you want to show in table.

Available keys: ['checkbox', 'name', 'email', 'phone', 'due_amount', 'created_at', 'actions']

Example:
If you pass ['name', 'email', 'phone', 'due_amount',], the table will only display these columns.

Additionally, you can pass an array of objects with available keys ('key', 'label', 'thClass', 'tdClass', 'sortBy', 'sortable', 'hidden', 'dataType') to override the default properties of a column.

<CustomerTable
  :columns="[{
    key: 'email',
    label: 'Customer Email',
    thClass: 'text-left',
    tdClass: 'text-left',
    sortable: true,
  }]"
/>

You can also pass a combination of both arrays and objects to customize the columns of the table.

<CustomerTable
  :columns="[
    'name',
    {
      key: 'email', 
      label: 'Status', 
      sortable: false
    }
  ]
/>

Triggered when customer create button clicked.

Triggered when customer view option clicked from options menu.

This slot allows you to add custom header in item details component.

This is a required prop that accepts the ID of the customer details to be displayed.

This prop accepts boolean value to show / hide edit option.

This slot allows you to add custom header in item details component.

This prop accepts boolean value to show / hide customer details component after customer created successfully, default value is true.

Triggered when a customer is created successfully.

This slot allows you to add custom header in item details component.

This is prop accepts type with value active, archived and both, default value is both.

This prop accepts boolean value to show / hide vendor create button, default value is true.

This prop accepts boolean value to show / hide vendor view option, default value is true.

This prop accepts boolean value to show / hide vendor table title, default value is true.

This prop accepts boolean value to show / hide filters button, default value is true.

This prop accepts boolean value to show / hide vendor status tabs, default value is true.

This prop accepts object with 'name', 'email', 'phone' key and its value for applying filter.

This prop accepts array to customize columns of table. you can pass columns key which you want to show in table.

Available keys: ['checkbox', 'name', 'email', 'phone', 'due_amount', 'created_at', 'actions']

Example:
If you pass ['checkbox','name', 'email', 'phone', 'due_amount'], the table will only display these columns.

Additionally, you can pass an array of objects with available keys ('key', 'label', 'thClass', 'tdClass', 'sortBy', 'sortable', 'hidden', 'dataType') to override the default properties of a column.

<VendorTable
  :columns="[{
    key: 'name',
    label: 'Vendor Name',
    thClass: 'table-cell',
    tdClass: 'table-cell',
    sortable: true,
  }
  ]"
/>

You can also pass a combination of both arrays and objects to customize the columns of the table.

<VendorTable
  :columns="[
    'name',
    {
      key: 'phone', 
      label: 'Phone', 
      sortable: false
    }
  ]"
/>

Triggered when vendor create button clicked.

Triggered when vendor view option clicked from options menu.

This slot allows you to add custom header in item details component.

This is a required prop that accepts the ID of the vendor details to be displayed.

This slot allows you to add custom header in item details component.

This prop accepts boolean value to show / hide vendor details component after vendor created successfully, default value is true.

Triggered when a vendor is created successfully.

This slot allows you to add custom header in item details component.

This prop accepts boolean value to show / hide item create button, default value is true.

This prop accepts boolean value to show / hide item view button, default value is true.

This prop accepts boolean value to show / hide item edit button, default value is true.

This prop accepts boolean value to show / hide item table title, default value is true.

This prop accepts boolean value to show / hide filters button, default value is true.

This prop accepts object with name, unit, price key and its value for applying filter.

This prop accepts array to customize columns of table. you can pass columns key which you want to show in table.

Available keys: ['name', 'unit_name', 'price', 'created_at', 'actions']

Example:
If you pass ['unit_name', 'price', 'created_at'], the table will only display these columns.

Additionally, you can pass an array of objects with available keys ('key', 'label', 'thClass', 'tdClass', 'sortBy', 'sortable', 'hidden', 'dataType') to override the default properties of a column.

<ItemTable
  :columns="[{
    key: 'name',
    label: 'Item name',
    thClass: 'table-cell',
    tdClass: 'table-cell',
    sortable: true,
  }]"
/>

You can also pass a combination of both arrays and objects to customize the columns of the table.

<ItemTable
  :columns="[
    'name',
    {
      key: 'price', 
      label: 'Price', 
      sortable: false
    }
  ]"
/>

Triggered when item create button clicked.

Triggered when item view option clicked from options menu.

Triggered when item edit option clicked from options menu.

This slot allows you to add custom header in item details component.

This is a required prop that accepts the ID of the item details to be displayed.

This prop accepts boolean value to show / hide edit option, default value is true.

This prop accepts boolean value to show / hide delete option, default value is true.

Triggered when item edit button clicked.

This slot allows you to add custom header in item details component.

This prop accepts boolean value to show / hide item details component after item created successfully, default value is true.

Triggered when a item is created successfully.

This slot allows you to add custom header in item details component.

This is a required prop that accepts the ID of the item.

This prop accepts boolean value to show / hide item details component after item updated successfully, default value is true.

Triggered when the item is updated successfully.

This slot allows you to add custom header in item details component.

This prop accepts boolean value to show / hide filters button, default value is true.

This prop accepts object with customer_id, status, from_date, to_date, estimate_number key and its value for applying filter.

This prop accepts boolean value to show / hide estimate table title, default value is true.

This prop accepts boolean value to show / hide estimate status tabs, default value is true.

This prop accepts boolean value to show / hide estimate create button, default value is true.

This prop accepts boolean value to show / hide estimate edit option in table, default value is true.

This prop accepts boolean value to show / hide estimate delete option in table, default value is true.

This prop accepts boolean value to show / hide estimate send option in table, default value is true.

This prop accepts boolean value to show / hide estimate approve option in table, default value is true.

This prop accepts boolean value to show / hide estimate reject option in table, default value is true.

This prop accepts boolean value to show / hide estimate finalize option in table, default value is true.

This prop accepts boolean value to show / hide estimate void option in table, default value is true.

This prop accepts array to customize columns of table. you can pass columns key which you want to show in table.

Available keys: ['checkbox', 'estimate_date', 'estimate_number', 'business_name', 'status', 'total', 'convert', 'actions']

Example:
If you pass ['estimate_date', 'estimate_number', 'business_name', 'status'], the table will only display these columns.

Additionally, you can pass an array of objects with available keys ('key', 'label', 'thClass', 'tdClass', 'sortBy', 'sortable', 'hidden', 'dataType') to override the default properties of a column.

<EstimateTable
  :columns="[{
    key: 'estimate_number',
    label: 'Estimate Number',
    thClass: 'text-left',
    tdClass: 'text-left',
    sortable: true,
  }]"
/>

You can also pass a combination of both arrays and objects to customize the columns of the table.

<EstimateTable
  :columns="[
    'estimate_number',
    {
      key: 'status', 
      label: 'Status', 
      sortable: false
    }
  ]
/>

Triggered when estimate create button clicked.

Triggered when estimate edit option clicked from options menu.

Triggered when estimate view option clicked from options menu.

This slot allows you to add custom header in item details component.

This is a required prop that accepts the ID of the estimate details to be displayed.

This is a optional prop that accepts the boolean value to show / hide edit option, default value is true.

This is a optional prop that accepts the boolean value to show / hide delete option, default value is true.

This is a optional prop that accepts the boolean value to show / hide send estimate option, default value is true.

This is a optional prop that accepts the boolean value to show / hide approve estimate option, default value is true.

This is a optional prop that accepts the boolean value to show / hide reject estimate option, default value is true.

This is a optional prop that accepts the boolean value to show / hide void estimate option, default value is true.

This is a optional prop that accepts the boolean value to show / hide finalize estimate button, default value is true.

This is a optional prop that accepts classes which applies to card container.

Triggered when invoice edit option clicked from options menu.

This slot allows you to add custom header in item details component.

This prop accepts boolean value to show / hide estimate details component after estimate created successfully, default value is true.

Triggered when an estimate is created successfully.

This slot allows you to add custom header in item details component.

This is a required prop that accepts the ID of the estimate.

This prop accepts boolean value to show / hide estimate details component after estimate updated successfully.

Triggered when the estimate is updated successfully.

This slot allows you to add custom header in item details component.

This prop accepts boolean value to show / hide stats section, default value is true.

This prop accepts boolean value to show / hide filters button, default value is true.

This prop accepts object with customer_id, status, paid_status, from_date, to_date, invoice_number, tab_status key and its value for applying filter.

This prop accepts boolean value to show / hide invoice table title, default value is true.

This prop accepts boolean value to show / hide invoice status tabs, default value is true.

This prop accepts boolean value to show / hide invoice create button, default value is true.

This prop accepts boolean value to show / hide invoice edit option in table, default value is true.

This prop accepts boolean value to show / hide invoice delete option in table, default value is true.

This prop accepts boolean value to show / hide invoice send option in table, default value is true.

This prop accepts boolean value to show / hide invoice clone option in table, default value is true.

This prop accepts boolean value to show / hide invoice approve option in table, default value is true.

This prop accepts boolean value to show / hide invoice finalize option in table, default value is true.

This prop accepts boolean value to show / hide invoice void option in table, default value is true.

This prop accepts boolean value to show / hide invoice pay option in table, default value is true.

This prop accepts array to customize columns of table. you can pass columns key which you want to show in table.

Available keys: ['checkbox', 'invoice_date', 'invoice_number', 'business_name', 'status', 'loan_status', 'due_amount', 'total', 'advance', 'actions']

Example:
If you pass ['invoice_number', 'customer', 'total', 'due_date', 'status'], the table will only display these columns.

Additionally, you can pass an array of objects with available keys ('key', 'label', 'thClass', 'tdClass', 'sortBy', 'sortable', 'hidden', 'dataType') to override the default properties of a column.

<InvoiceTable
  :columns="[{
    key: 'invoice_number',
    label: 'Invoice Number',
    thClass: 'text-left',
    tdClass: 'text-left',
    sortable: true,
  }]"
/>

You can also pass a combination of both arrays and objects to customize the columns of the table.

<InvoiceTable
  :columns="[
    'invoice_number',
    {
      key: 'status', 
      label: 'Status', 
      sortable: false
    }
  ]
/>

Triggered when invoice create button clicked.

Triggered when invoice edit option clicked from options menu.

Triggered when invoice view option clicked from options menu.

This slot allows you to add custom header in item details component.

This is a required prop that accepts the ID of the invoice details to be displayed.

This is a optional prop that accepts the boolean value to show / hide edit option, default value is true.

This is a optional prop that accepts the boolean value to show / hide delete option, default value is true.

This is a optional prop that accepts the boolean value to show / hide send invoice option, default value is true.

This is a optional prop that accepts the boolean value to show / hide clone invoice, default value is true.

This is a optional prop that accepts the boolean value to show / hide approve invoice option, default value is true.

This is a optional prop that accepts the boolean value to show / hide pay invoice button, default value is true.

This is a optional prop that accepts the boolean value to show / hide void invoice option, default value is true.

This is a optional prop that accepts the boolean value to show / hide finalize invoice button, default value is true.

This is a optional prop that accepts classes which applies to card container.

Triggered when invoice edit option clicked from options menu.

This slot allows you to add custom header in item details component.

This prop accepts boolean value to show / hide invoice details component after invoice created successfully, default value is true.

Triggered when an invoice is created successfully.

This slot allows you to add custom header in item details component.

This is a required prop that accepts the ID of the invoice.

This prop accepts boolean value to show / hide invoice details component after invoice edited successfully.

Triggered when the invoice is updated successfully.

This slot allows you to add custom header in item details component.

This is a required prop that accepts the ID of the invoice.

Triggered when the invoice approved successfully.

Triggered if the invoice approve has some issue.

This prop accepts boolean value to show / hide filters button, default value is true.

This prop accepts object with 'customer_id', 'status', 'from_date', 'to_date' key and its value for applying filter.

This prop accepts boolean value to show / hide recurring invoice table title, default value is true.

This prop accepts boolean value to show / hide recurring invoice status tabs, default value is true.

This prop accepts boolean value to show / hide recurring invoice create button, default value is true.

This prop accepts boolean value to show / hide recurring invoice edit option, default value is true.

This prop accepts boolean value to show / hide recurring invoice delete option, default value is true.

This prop accepts boolean value to show / hide recurring invoice view option, default value is true.

This prop accepts boolean value to show / hide recurring invoice view button, default value is true.

This prop accepts array to customize columns of table. you can pass columns key which you want to show in table.

Available keys: ['start_date', 'name', 'repeat_interval', 'status', 'total', 'view_action', 'actions']

Example:
If you pass ['start_date', 'name', 'repeat_interval',], the table will only display these columns.

Additionally, you can pass an array of objects with available keys ('key', 'label', 'thClass', 'tdClass', 'sortBy', 'sortable', 'hidden', 'dataType') to override the default properties of a column.

<RecurringInvoiceTable
  :columns="[{
    key: 'name',
    label: 'Customer Name',
    thClass: 'table-cell',
    tdClass: 'table-cell',
    sortable: true,
  }]"
/>

You can also pass a combination of both arrays and objects to customize the columns of the table.

<RecurringInvoiceTable
  :columns="[
    'name',
    {
      key: 'status', 
      label: 'Status', 
      sortable: false
    }
  ]"
/>

Triggered when recurring invoice create button clicked.

Triggered when recurring invoice view option clicked from options menu.