MonthlyTransactions

Purpose

MonthlyTransactions is the Profile-tab reusable that renders a monthly transactions summary.

It shows:

KPI cards (Debit, Credit, Balance) using balSheetData.total

A fiscal year selector (if multiple years exist)

A per-period breakdown (desktop table + mobile stacked view)

Where it's rendered

In Components/Profile/Default.liquid (tab monthlytransactions):

{% render 'Reusables\\MonthlyTransactions\\Default', balSheetData: balSheetData %}

Inputs (Liquid render parameters)

Model shape (storefront example)

Below is a sanitized excerpt from a Profile component model containing the balSheetData object passed to this reusable.

{
  "balSheetData": {
    "years": [
      {
        "fiscalYear": "2026",
        "lines": [
          {
            "period": "January",
            "fiscalYear": "2026",
            "credit": 1500.0,
            "creditText": "1,500.00 €",
            "debit": 1200.5,
            "debitText": "1,200.50 €",
            "turnover": 299.5,
            "turnoverText": "299.50 €"
          }
        ],
        "total": {
          "credit": 2300.0,
          "creditText": "2,300.00 €",
          "debit": 2150.5,
          "debitText": "2,150.50 €",
          "turnover": 149.5,
          "turnoverText": "149.50 €",
          "balance": null,
          "balanceText": null
        }
      }
    ],
    "availableFiscalYears": ["2026", "2025"],
    "total": {
      "credit": 45000.0,
      "creditText": "45,000.00 €",
      "debit": 42500.0,
      "debitText": "42,500.00 €",
      "turnover": 2500.0,
      "turnoverText": "2,500.00 €",
      "balance": 2500.0,
      "balanceText": "2,500.00 €"
    }
  }
}

`balSheetData`

years (array, optional)

each year:

fiscalYear (string)

lines[] (array)

template uses period, debitText, creditText

total (object)

template uses debitText, creditText, balance, balanceText

availableFiscalYears (array, optional)

when size > 1, the year <select> is shown.

total (object, optional)

template uses debitText, creditText, balanceText

Template behavior (Liquid + Alpine)

If years is empty/missing, shows Reusables.MonthlyTransactions.Translations.NoDataFound.

Initial fiscal year is availableFiscalYears[0].

Desktop:

shows a table and filters by selected year using x-show="selectedYear === '{year.fiscalYear}'".

Mobile:

shows each line as key/value rows (Period/Debit/Credit).

Footer totals include a balance row where the value is shown:

in the Debit column if year.total.balance > 0

in the Credit column if year.total.balance <= 0

JavaScript

Global object: monthlytransactionsreusabledefault.

`initComponent(selectedYear)`

Returns Alpine state:

selectedYear

No other logic exists in Default.js currently.

Notes

This reusable reads translations from Reusables/MonthlyTransactions/Default.json (e.g. Reusables.MonthlyTransactions.Translations.*).

MonthlyTransactions

Purpose#

Where it's rendered#

Inputs (Liquid render parameters)#

Model shape (storefront example)#

balSheetData#

Template behavior (Liquid + Alpine)#

JavaScript#

initComponent(selectedYear)#

Notes#