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'
]
}
}