fix: Report

- Tree structured reports
- Profit and Loss

reports/FinancialStatements/FinancialStatements.js

@@ -258,7 +258,7 @@ async function getLedgerEntries(fromDate, toDate, accounts) {
 async function getAccounts(rootType) {
   let accounts = await frappe.db.getAll({
     doctype: 'Account',
-    fields: ['name', 'parentAccount'],
+    fields: ['name', 'parentAccount', 'isGroup'],
     filters: {
       rootType
     }

reports/GeneralLedger/viewConfig.js

@@ -114,17 +114,20 @@ const viewConfig = {
       {
         label: 'Debit',
         fieldtype: 'Currency',
-        fieldname: 'debit'
+        fieldname: 'debit',
+        width: 0.5
       },
       {
         label: 'Credit',
         fieldtype: 'Currency',
-        fieldname: 'credit'
+        fieldname: 'credit',
+        width: 0.5
       },
       {
         label: 'Balance',
         fieldtype: 'Currency',
-        fieldname: 'balance'
+        fieldname: 'balance',
+        width: 0.5
       },
       {
         label: 'Reference Type',

reports/ProfitAndLoss/ProfitAndLoss.js

@@ -4,7 +4,6 @@ const { getData } = require('../FinancialStatements/FinancialStatements');
 
 class ProfitAndLoss {
   async run({ fromDate, toDate, periodicity }) {
-
     let income = await getData({
       rootType: 'Income',
       balanceMustBe: 'Credit',
@@ -21,19 +20,57 @@ class ProfitAndLoss {
       periodicity
     });
 
-        const rows = [
+    let incomeTotalRow = income.totalRow;
-            ...income.accounts, income.totalRow, [],
+    incomeTotalRow.account = {
-            ...expense.accounts, expense.totalRow, []
+      template: `<span class="font-semibold">${income.totalRow.account}</span>`
+    };
+
+    let expenseTotalRow = expense.totalRow;
+    expenseTotalRow.account = {
+      template: `<span class="font-semibold">${expense.totalRow.account}</span>`
+    };
+
+    let rows = [
+      ...income.accounts,
+      incomeTotalRow,
+      {
+        account: {
+          template: '<span>&nbsp;</span>'
+        }
+      },
+      ...expense.accounts,
+      expenseTotalRow,
+      {
+        account: {
+          template: '<span>&nbsp;</span>'
+        }
+      }
     ];
 
-        const columns = unique([...income.periodList, ...expense.periodList])
+    rows = rows.map(row => {
+      if (row.indent === 0) {
+        row.account = {
+          template: `<span class="font-semibold">${row.account}</span>`
+        };
+      }
+      return row;
+    });
+
+    const columns = unique([...income.periodList, ...expense.periodList]);
 
     let profitRow = {
       account: 'Total Profit'
-        }
+    };
 
     for (let column of columns) {
-            profitRow[column] = (income.totalRow[column] || 0.0) - (expense.totalRow[column] || 0.0);
+      profitRow[column] =
+        (income.totalRow[column] || 0.0) - (expense.totalRow[column] || 0.0);
+
+      rows.forEach(row => {
+        if (!row.isGroup) {
+          row[column] = row[column] || 0.0;
+        }
+      });
     }
 
     rows.push(profitRow);

reports/ProfitAndLoss/viewConfig.js

@@ -45,7 +45,7 @@ module.exports = {
   ],
   getColumns(data) {
     const columns = [
-      { label: 'Account', fieldtype: 'Data', fieldname: 'account', width: 340 }
+      { label: 'Account', fieldtype: 'Data', fieldname: 'account', width: 2 }
     ];
 
     if (data && data.columns) {

src/components/Row.vue

@@ -19,6 +19,10 @@ export default {
       type: Array,
       default: () => []
     },
+    gridTemplateColumns: {
+      type: String,
+      default: null
+    },
     gap: String
   },
   computed: {
@@ -30,6 +34,9 @@ export default {
       if (this.ratio.length) {
         obj['grid-template-columns'] = this.ratio.map(r => `${r}fr`).join(' ');
       }
+      if (this.gridTemplateColumns) {
+        obj['grid-template-columns'] = this.gridTemplateColumns;
+      }
       if (this.gap) {
         obj['grid-gap'] = this.gap;
       }

src/pages/Report.vue

@@ -20,11 +20,7 @@
     <div class="px-8 mt-4">
       <div>
         <div ref="header" class="overflow-hidden">
-          <Row
+          <Row gap="2rem" :grid-template-columns="gridTemplateColumns">
-            :columnCount="columns.length"
-            gap="2rem"
-            :column-width="columnWidth"
-          >
             <div
               class="text-gray-600 text-base truncate py-4"
               :class="{
@@ -42,23 +38,31 @@
         <WithScroll @scroll="onBodyScroll">
           <div class="flex-1 overflow-auto" style="height: calc(100vh - 12rem)">
             <Row
+              v-show="row.isShown"
               v-for="(row, i) in rows"
-              :columnCount="columns.length"
-              gap="2rem"
               :key="i"
-              :column-width="columnWidth"
+              gap="2rem"
+              :grid-template-columns="gridTemplateColumns"
             >
               <div
                 class="text-gray-900 text-base truncate py-4"
-                :class="{
+                :class="getCellClasses(row, column)"
-                  'text-right': ['Int', 'Float', 'Currency'].includes(
-                    column.fieldtype
-                  )
-                }"
                 v-for="column in columns"
                 :key="column.label"
+                @click="toggleChildren(row, i)"
               >
-                <component :is="cellComponent(row[column.fieldname], column)" />
+                <div class="inline-flex">
+                  <feather-icon
+                    v-if="row.isBranch && !row.isLeaf && column === columns[0]"
+                    class="w-4 h-4 mr-2 flex-shrink-0"
+                    :name="row.expanded ? 'chevron-down' : 'chevron-right'"
+                  />
+                  <span class="truncate">
+                    <component
+                      :is="cellComponent(row[column.fieldname], column)"
+                    />
+                  </span>
+                </div>
               </div>
             </Row>
           </div>
@@ -136,7 +140,42 @@ export default {
         rows = [];
       }
 
-      this.rows = rows;
+      this.rows = this.addTreeMeta(rows);
+    },
+
+    addTreeMeta(rows) {
+      return rows.map(row => {
+        if ('indent' in row) {
+          row.isBranch = true;
+          row.expanded = true;
+          row.isLeaf = !row.isGroup;
+        }
+        row.isShown = true;
+        return row;
+      });
+    },
+
+    toggleChildren(row, rowIndex) {
+      if (!row.isBranch) return;
+
+      let flag;
+      if (row.expanded) {
+        row.expanded = false;
+        flag = false;
+      } else {
+        row.expanded = true;
+        flag = true;
+      }
+
+      let _rows = this.rows.slice(rowIndex + 1);
+      for (let _row of _rows) {
+        if (row.isBranch && _row.indent > row.indent) {
+          _row.expanded = flag;
+          _row.isShown = flag;
+          continue;
+        }
+        break;
+      }
     },
 
     onFilterChange(df, value) {
@@ -172,12 +211,30 @@ export default {
         return column.component(cellValue, column);
       }
       // default cell component
-      let formattedValue = frappe.format(cellValue, column);
+      let formattedValue =
+        cellValue != null ? frappe.format(cellValue, column) : '';
       return {
         render(h) {
           return h('span', formattedValue);
         }
       };
+    },
+
+    getCellClasses(row, column) {
+      let padding = ['pl-0', 'pl-6', 'pl-12', 'pl-18', 'pl-20'];
+      let treeCellClasses;
+      if (row.isBranch && column === this.columns[0]) {
+        treeCellClasses = [
+          padding[row.indent],
+          'hover:bg-gray-100 cursor-pointer'
+        ];
+      }
+      return [
+        {
+          'text-right': ['Int', 'Float', 'Currency'].includes(column.fieldtype)
+        },
+        treeCellClasses
+      ];
     }
   },
   computed: {
@@ -186,6 +243,20 @@ export default {
     },
     columnWidth() {
       return 'minmax(7rem, 1fr)';
+    },
+    gridTemplateColumns() {
+      return this.columns
+        .map(col => {
+          let multiplier = col.width;
+          if (!multiplier) {
+            multiplier = 1;
+          }
+          let minWidth = `${7 * multiplier}rem`;
+          let maxWidth = `${1 * multiplier}fr`;
+
+          return `minmax(${minWidth}, ${maxWidth})`;
+        })
+        .join(' ');
     }
   }
 };

tailwind.config.js

@@ -29,6 +29,7 @@ module.exports = {
       spacing: {
         '7': '1.75rem',
         '14': '3.5rem',
+        '18': '4.5rem',
         '72': '18rem',
         '80': '20rem'
       },