📁 Showcase
Dashboard

Dashboard

Backend

1. Variables

1. Dashboard report

ensure var VarTextPatternOutputExpenseDashboardLabel kind: text 
  deploy: fixedOnDeploy 
  value: "From: ${P1} To: ${P2}"

a. Input form

ensure form FilterExpense modules: ["Expense"]
ensure section: Details
ensure field From kind: date 
  required: true 
  defaultValue: "startOfMonth"
ensure field To kind: date 
  required: true 
  defaultValue: "endOfMonth"

b. Output form

ensure form OutputExpenseDashboard 
  modules: ["Expense"]
ensure grid: ByTransactionType
ensure field TransactionType kind: pickText sourceVar: VarTransaction
ensure field Amount kind: decimal 
  prefix: "₹ " 
  numberOfDigitsAfterPeriod: 2 
  numberFormat: "#,##,##0"

ensure grid: ByExpenseAllocation
ensure field ExpenseAllocation kind: pickText sourceVar: VarCostAllocation
ensure field Amount kind: decimal 
  prefix: "₹ " 
  numberOfDigitsAfterPeriod: 2 
  numberFormat: "#,##,##0"

ensure grid: ByRevenueAllocation
ensure field RevenueAllocation kind: pickText sourceVar: VarRevenueAllocation
ensure field Amount kind: decimal 
  prefix: "₹ " 
  numberOfDigitsAfterPeriod: 2 
  numberFormat: "#,##,##0"

ensure grid: ByItem
ensure field ItemName kind: text 
ensure field Amount kind: decimal 
  prefix: "₹ " 
  numberOfDigitsAfterPeriod: 2 
  numberFormat: "#,##,##0"
ensure field Date kind: dateTime 
ensure field Transaction kind: pickText sourceVar: VarTransaction
ensure field Category kind: text 
ensure field Verified kind: text 

ensure grid: Cashflow
ensure field Month kind: pickText sourceVar: VarMonths
ensure field IncomingCash kind: decimal numberOfDigitsAfterPeriod: 2
ensure field OutgoingCash kind: decimal numberOfDigitsAfterPeriod: 2

ensure section: DateRange
ensure field From kind: date 
ensure field To kind: date 
ensure field Label kind: label textSize: h6 justifyText: center
  textPatternVar: {
      'var': 'VarTextPatternOutputExpenseDashboardLabel',
      'paramSet': [
        '${f:DateRange.From}',
        '${f:DateRange.To}'
      ]
    }

c. Grid layout

ensure form OutputExpenseDashboard
ensure composite ByTransactionType 

ensure layoutGrid PieChartLayout kind: xyChartPieChart 
  xAxis: ByTransactionType.TransactionType
ensure xAxis Axis1 
  valueOptionId: "keyCredit" 
  color.value: green 
  color.shade: s300
ensure xAxis Axis2 
  valueOptionId: "keyDebit" 
  color.value: red 
  color.shade: s300
ensure yAxis Axis3 field: ByTransactionType.Amount

// layoutGrid, xyChartBarGraph, BarChartLayout
ensure layoutGrid BarChartLayout kind: xyChartBarGraph 
  xAxis: ByTransactionType.TransactionType
ensure xAxis Axis1 
  valueOptionId: "keyCredit" 
  color.value: green 
  color.shade: s300
ensure xAxis Axis2 
  valueOptionId: "keyDebit" 
  color.value: red 
  color.shade: s300
ensure yAxis Axis3 field: ByTransactionType.Amount

ensure composite ByExpenseAllocation 
ensure layoutGrid PieChartLayout kind: xyChartPieChart 
  xAxis: ByExpenseAllocation.ExpenseAllocation
ensure xAxis Axis1 
  valueOptionId: "keyFixed" 
  color.value: blue
  color.shade: s300
ensure xAxis Axis2 
  valueOptionId: "keyEmergency" 
  color.value: red
  color.shade: s300
ensure xAxis Axis3 
  valueOptionId: "keyEssential" 
  color.value: green
  color.shade: s300
ensure xAxis Axis4 
  valueOptionId: "keyEntertainment" 
  color.value: yellow
  color.shade: s300
ensure xAxis Axis5 
  valueOptionId: "keyGrocery" 
  color.value: purple
  color.shade: s300
ensure xAxis Axis6 
  valueOptionId: "keySubscription" 
  color.value: cyan
  color.shade: s300
ensure xAxis Axis7 
  valueOptionId: "keyTransportation" 
  color.value: grey
  color.shade: s300
ensure xAxis Axis8 
  valueOptionId: "keyInvestment" 
  color.value: orange
  color.shade: s300
ensure yAxis Axis9 field: ByExpenseAllocation.Amount

// layoutGrid, xyChartBarGraph, BarChartLayout
ensure layoutGrid BarChartLayout kind: xyChartBarGraph 
  xAxis: ByExpenseAllocation.ExpenseAllocation
ensure xAxis Axis1 
  valueOptionId: "keyFixed" 
  color.value: blue
  color.shade: s300
ensure xAxis Axis2 
  valueOptionId: "keyEmergency" 
  color.value: red
  color.shade: s300
ensure xAxis Axis3 
  valueOptionId: "keyEssential" 
  color.value: green
  color.shade: s300
ensure xAxis Axis4 
  valueOptionId: "keyEntertainment" 
  color.value: yellow
  color.shade: s300
ensure xAxis Axis5 
  valueOptionId: "keyGrocery" 
  color.value: purple
  color.shade: s300
ensure xAxis Axis6 
  valueOptionId: "keySubscription" 
  color.value: cyan
  color.shade: s300
ensure xAxis Axis7 
  valueOptionId: "keyTransportation" 
  color.value: grey
  color.shade: s300
ensure xAxis Axis8 
  valueOptionId: "keyInvestment" 
  color.value: orange
  color.shade: s300
ensure yAxis Axis9 field: ByExpenseAllocation.Amount

ensure composite ByRevenueAllocation
ensure layoutGrid PieChartLayout kind: xyChartPieChart 
  xAxis: ByExpenseAllocation.ExpenseAllocation
ensure xAxis Axis1 
  valueOptionId: "keyPayCheck" 
  color.value: blue
  color.shade: s300
ensure xAxis Axis2 
  valueOptionId: "keyInterest" 
  color.value: green
  color.shade: s300
ensure xAxis Axis3 
  valueOptionId: "keyRental" 
  color.value: cyan
  color.shade: s300
ensure xAxis Axis4 
  valueOptionId: "keyDividend" 
  color.value: orange
  color.shade: s300
ensure xAxis Axis5 
  valueOptionId: "keySale" 
  color.value: deepPurple
  color.shade: s300
ensure xAxis Axis6 
  valueOptionId: "keyOther" 
  color.value: grey
  color.shade: s300
ensure yAxis Axis7 field: ByRevenueAllocation.Amount

// layoutGrid, xyChartBarGraph, BarChartLayout
ensure layoutGrid BarChartLayout kind: xyChartBarGraph 
  xAxis: ByExpenseAllocation.ExpenseAllocation
ensure xAxis Axis1
  valueOptionId: "keyPayCheck" 
  color.value: blue
  color.shade: s300
ensure xAxis Axis2 
  valueOptionId: "keyInterest" 
  color.value: green
  color.shade: s300
ensure xAxis Axis3 
  valueOptionId: "keyRental" 
  color.value: cyan
  color.shade: s300
ensure xAxis Axis4 
  valueOptionId: "keyDividend" 
  color.value: orange
  color.shade: s300
ensure xAxis Axis5 
  valueOptionId: "keySale" 
  color.value: deepPurple
  color.shade: s300
ensure xAxis Axis6 
  valueOptionId: "keyOther" 
  color.value: grey
  color.shade: s300
ensure yAxis Axis7 field: ByRevenueAllocation.Amount

ensure composite ByItem
ensure layoutGrid TableLayout kind: table
  columnSizeSet: ["AutoSize", "AutoSize", "Flex"] 
  showComps: [ByItem.Verified, ByItem.Date, ByItem.ItemName, ByItem.Category, ByItem.Amount]
ensure style Style1 
  value: black 
  fields: [ItemName, Transaction, Amount, Category, Verified, Date] 
  fieldLayoutOn: header 
  textStyleSet: ["bold"] 
  textColor.value: white
ensure style Style2 
  conditionVar: VarConditionCredit 
  fields: [ByItem.Amount] 
  fieldLayoutOn: column 
  textStyleSet: ["bold"] 
  textColor.value: green 
  textColor.shade: s500
ensure style Style3 
  conditionVar: VarConditionDebit 
  fields: [ByItem.Amount] 
  fieldLayoutOn: column 
  textStyleSet: ["bold"] 
  textColor.value: red 
  textColor.shade: s500

ensure composite Cashflow 
ensure layoutGrid TableLayout kind: table columnSizeSet: ["Flex"]
  showComps: [Month, IncomingCash, OutgoingCash]
ensure style Style1 
  value: black 
  fields: [Cashflow.Month, Cashflow.IncomingCash, Cashflow.OutgoingCash] 
  fieldLayoutOn: header 
  textStyleSet: ["bold"] 
  textColor.value: white

// layoutGrid, xyChartLineChart, LineChart
ensure layoutGrid LineChart kind: xyChartLineChart 
  xAxis: Cashflow.Month
ensure yAxis AxisKWv4vy color.value: green color.shade: s300
ensure yAxis AxisVnNdiJ color.value: red color.shade: s300

// layoutGrid, xyChartBarGraph, BarChart
ensure layoutGrid BarChart kind: xyChartBarGraph 
  xAxis: Cashflow.Month
ensure yAxis AxisKvZIzc color.value: green color.shade: s300
ensure yAxis AxisOgiu5L color.value: red color.shade: s300

d. Form layout

ensure layout TransactionLayout kind: content 
  start.gridLayouts: [ByTransactionType.PieChartLayout]
  displayLabel: "Monthly Cashflow" 
  direction: vertical 
  showBorderSet: ["top", "bottom", "right", "left"] 
  contentPadding: thin 
  showPaddingSet: ["top", "bottom", "right", "left"] 
  start.padding: thin

ensure layout DebitLayout kind: content 
  start.gridLayouts: [ByExpenseAllocation.PieChartLayout]
  displayLabel: "Debit Breakdown" 
  direction: vertical 
  showBorderSet: ["top", "bottom", "left", "right"] 
  contentPadding: thin 
  showPaddingSet: ["top", "bottom", "left", "right"] 
  start.padding: thin

ensure layout CreditLayout kind: content 
  start.gridLayouts: [ByRevenueAllocation.PieChartLayout]
  displayLabel: "Credit Breakdown" 
  direction: vertical 
  showBorderSet: ["top", "bottom", "left", "right"] 
  contentPadding: thin 
  showPaddingSet: ["top", "bottom", "left", "right"] 
  start.padding: thin

ensure layout FlexMainTop kind: content direction: horizontal contentPadding: thick
  flexCenter.formLayouts: [TransactionLayout, DebitLayout, CreditLayout]

ensure layout FlexMainCenter kind: content 
flexCenter.gridLayouts: [Cashflow.LineChart]
  displayLabel: "Yearly Cashflow" 
  direction: vertical 
  showBorderSet: ["top", "left", "bottom", "right"] 
  contentPadding: thin 
  showPaddingSet: ["top", "bottom", "left", "right"]

ensure layout FlexMainFooter kind: content 
  flexCenter.gridLayouts: [ByItem.TableLayout]
  displayLabel: "Transaction History" 
  direction: vertical 
  showBorderSet: ["top", "left", "bottom", "right"] 
  contentPadding: thin 
  showPaddingSet: ["top", "bottom", "left", "right"]

ensure layout FlexMain kind: content direction: vertical contentPadding: thick
  flexCenter.formLayouts: [FlexMainTop, FlexMainCenter, FlexMainFooter]

ensure layout TemplateLayout kind: template paperSize: a4Size contentPadding: thick

ensure layout Header kind: content 
  direction: horizontal 
  contentPadding: thick 
  flexCenter.fields: [DateRange.Label]

ensure layout Template kind: template 
  formLayout: Header
  paperSize: fitToScreen
  contentPadding: thick

e. ByTypeReport

ensure report TransactionalReport kind: query 
  modules: ["Expense"] 
  inputForm: FilterExpense 
  outputForm: OutputExpenseDashboard 
  fromSpreadsheets: [QuikBooksSheet] 
  neoQL: "SELECT
    ${ss:s26.Details.TransactionType} as ${out:ByTransactionType.TransactionType},
    SUM(${ss:s26.Details.TotalAmount}) as ${out:ByTransactionType.Amount}
  FROM ${ss}
  WHERE ${ctx:row.type} = ${ss:s26}
    AND ${in:Details.From} <= ${ss:s26.Details.Date}
    AND ${in:Details.To} > ${ss:s26.Details.Date}
  GROUP BY ${ss:s26.Details.TransactionType}"

f. DebitAllocationReport

ensure report ExpenseAllocationReport kind: query 
  modules: ["Expense"] 
  inputForm: FilterExpense 
  outputForm: OutputExpenseDashboard 
  fromSpreadsheets: [QuikBooksSheet] 
  neoQL: "SELECT
    ${ss:s26.Details.ExpenseAllocation} as ${out:ByExpenseAllocation.ExpenseAllocation},
    SUM(${ss:s26.Details.TotalAmount}) as ${out:ByExpenseAllocation.Amount}
  FROM ${ss}
  WHERE ${ctx:row.type} = ${ss:s26}
    AND ${in:Details.From} <= ${ss:s26.Details.Date}
    AND ${in:Details.To} > ${ss:s26.Details.Date}
  GROUP BY ${ss:s26.Details.ExpenseAllocation}"

g. CreditAllocationReport

ensure report RevenueAllocationReport kind: query 
  modules: ["Expense"] 
  inputForm: FilterExpense 
  outputForm: OutputExpenseDashboard 
  fromSpreadsheets: [QuikBooksSheet] 
  neoQL: "SELECT
    ${ss:s26.Details.RevenueAllocation} as ${out:ByRevenueAllocation.RevenueAllocation},
    SUM(${ss:s26.Details.TotalAmount}) as ${out:ByRevenueAllocation.Amount}
  FROM ${ss}
  WHERE ${ctx:row.type} = ${ss:s26}
    AND ${in:Details.From} <= ${ss:s26.Details.Date}
    AND ${in:Details.To} > ${ss:s26.Details.Date}
  GROUP BY ${ss:s26.Details.RevenueAllocation}"

h. ByItemReport

ensure report ExpenseByItemReport kind: query 
  modules: ["Expense"] 
  inputForm: FilterExpense 
  outputForm: OutputExpenseDashboard 
  fromSpreadsheets: [QuikBooksSheet] 
  neoQL: "SELECT
    IFMISSINGORNULL(${ss:s26.Details.ExpenseName}, ${ss:s26.Details.RevenueName}) as ${out:ByItem.ItemName},
    ${ss:s26.Details.TotalAmount} as ${out:ByItem.Amount},
    ${ss:s26.Details.Date} as ${out:ByItem.Date},
    ${ss:s26.Details.TransactionType} as ${out:ByItem.Transaction},
    IFMISSINGORNULL(${ss:s26.Details.ExpenseCategory}, ${ss:s26.Details.RevenueCategory}) as ${out:ByItem.Category},
    CASE WHEN ${ss:s26.Summary.Verified.value} = true THEN '☑️' ELSE '' END as ${out:ByItem.Verified}
  FROM ${ss}
  WHERE ${ctx:row.type} = ${ss:s26}
    AND ${in:Details.From} <= ${ss:s26.Details.Date}
    AND ${in:Details.To} > ${ss:s26.Details.Date}"

i. YearlyCashflow

ensure report YearlyCashflow kind: query 
  modules: ["Expense"] 
  inputForm: FilterExpense 
  outputForm: OutputExpenseDashboard 
  fromSpreadsheets: [QuikBooksSheet] 
  neoQL: "WITH q1 as (
    SELECT
        TOSTRING(DATE_PART_STR(MILLIS_TO_TZ(${ss:s26.Details.Date}, 'Asia/Kolkata'), 'month')) as `month`,
        SUM(${ss:s26.Details.TotalAmount}) as `expenseValue`
    FROM ${ss}
    WHERE ${ctx:row.type} = ${ss:s26}
        AND DATE_TRUNC_MILLIS(${in:From}, 'year') <= ${ss:s26.Details.Date}
        AND (DATE_TRUNC_MILLIS(${in:From}, 'year') + 31536000000 - 1) > ${ss:s26.Details.Date}
        AND ${ss:s26.Details.TransactionType.optionId} = 'keyDebit'
    GROUP BY DATE_PART_STR(MILLIS_TO_TZ(${ss:s26.Details.Date}, 'Asia/Kolkata'), 'month')
  ),

  q2 as (
      SELECT
          TOSTRING(DATE_PART_STR(MILLIS_TO_TZ(${ss:s26.Details.Date}, 'Asia/Kolkata'), 'month')) as `month`,
          SUM(${ss:s26.Details.TotalAmount}) as `revenueValue`
      FROM ${ss}
      WHERE ${ctx:row.type} = ${ss:s26}
          AND DATE_TRUNC_MILLIS(${in:From}, 'year') <= ${ss:s26.Details.Date}
          AND (DATE_TRUNC_MILLIS(${in:From}, 'year') + 31536000000 - 1) > ${ss:s26.Details.Date}
          AND ${ss:s26.Details.TransactionType.optionId} = 'keyCredit'
      GROUP BY DATE_PART_STR(MILLIS_TO_TZ(${ss:s26.Details.Date}, 'Asia/Kolkata'), 'month')
  )

  SELECT 
      q1.month as ${out:Month},
      q1.expenseValue as ${out:Cashflow.OutgoingCash},
      q2.revenueValue as ${out:Cashflow.IncomingCash}
  FROM q1
  JOIN q2 ON q1.month = q2.month"

j. DateRangeQuery

//** report, DateRangeQuery
  ensure report DateRangeQuery kind: query 
    inputForm: FilterExpense 
    outputForm: OutputExpenseDashboard 
    fromSpreadsheets: [QuikBooksSheet] 
    neoQL: "SELECT 
      ${in:From} as ${out:From},
      ${in:To} as ${out:To}
    "

k. CashflowReport

//** report, DateRangeQuery
ensure report CashflowReport kind: composite 
  label: "Dashboard" 
  modules: ["Expense"] 
  inputForm: FilterExpense 
  outputForm: OutputExpenseDashboard
  mergeReports: [
    TransactionalReport,
    ExpenseAllocationReport, 
    ExpenseByItemReport, 
    RevenueAllocationReport, 
    YearlyCashflow, 
    DateRangeQuery
  ]
  "

Frontend

1. TransactionCompositeReport

ensure action TransactionCompositeReport kind: report 
  label: "Dashboard" 
  modules: ["Expense"] 
  icon: "DashboardRounded" 
  report: CashflowReport 
  outputFormContentLayout: FlexMain 
  outputFormTemplateLayout: Template

2. Group actions

Group these actions under a section named LastPass for easy access.

ensure group QuickBooks 
  pinnedActions: [AddTransaction, TransactionCompositeReport] 
  pinnedActionSetMobile: [AddTransaction, TransactionCompositeReport] 
  actionPermission: {
      'TransactionCompositeReport': {
        'menuGroup': '5',
        'roles': [
          'Member'
        ]
      }
    }