feat(server): styling financial reports

packages/server/resources/views/modules/financial-sheet.pug

@@ -3,7 +3,7 @@ block head
     include ../../css/modules/financial-sheet.css
 
 style.
-  #{customCSS}
+  !{customCSS}
 
 block content 
   .sheet 
@@ -16,9 +16,9 @@ block content
       thead
         tr
           each column in table.columns
-            th(style=column.style)= column.label
+            th(style=column.style class='column--' + column.key)= column.label
       tbody
         each row in table.rows
           tr(class=row.classNames)
             each cell in row.cells 
-              td!= cell.value
+              td(class='cell--' + cell.key)!= cell.value

packages/server/src/services/FinancialStatements/BalanceSheet/constants.ts

@@ -23,4 +23,42 @@ table tr.row-type--total.row-id--assets td,
 table tr.row-type--total.row-id--liability-equity td {
   border-bottom: 3px double #000;
 }
+table .column--name,
+table .cell--name {
+  width: 400px;
+}
+
+table .column--total {
+  width: 25%;
+}
+
+table td.cell--total,
+table td.cell--previous_year,
+table td.cell--previous_year_change,
+table td.cell--previous_year_percentage,
+
+table td.cell--previous_period,
+table td.cell--previous_period_change,
+table td.cell--previous_period_percentage,
+
+table td.cell--percentage_of_row,
+table td.cell--percentage_of_column,
+table td[class*="cell--date-range"] {
+  text-align: right;
+}
+
+table .column--total,
+table .column--previous_year,
+table .column--previous_year_change,
+table .column--previous_year_percentage,
+
+table .column--previous_period,
+table .column--previous_period_change,
+table .column--previous_period_percentage,
+
+table .column--percentage_of_row,
+table .column--percentage_of_column,
+table [class*="column--date-range"] {
+  text-align: right;
+}
 `;

packages/server/src/services/FinancialStatements/CashFlow/CashFlowTable.ts

@@ -76,7 +76,7 @@ export default class CashFlowTable implements ICashFlowTable {
    */
   private commonColumns = () => {
     return R.compose(
-      R.concat([{ key: 'label', accessor: 'label' }]),
+      R.concat([{ key: 'name', accessor: 'label' }]),
       R.when(
         R.always(this.isDisplayColumnsBy(DISPLAY_COLUMNS_BY.DATE_PERIODS)),
         R.concat(this.datePeriodsColumnsAccessors())

packages/server/src/services/FinancialStatements/CashFlow/CashflowSheetMeta.ts

@@ -23,8 +23,11 @@ export class CashflowSheetMeta {
     const formattedFromDate = moment(query.fromDate).format('YYYY/MM/DD');
     const formattedDateRange = `From ${formattedFromDate} | To ${formattedToDate}`;
 
+    const sheetName = 'Statement of Cash Flow';
+
     return {
       ...meta,
+      sheetName,
       formattedToDate,
       formattedFromDate,
       formattedDateRange,

packages/server/src/services/FinancialStatements/CashFlow/constants.ts

@@ -8,7 +8,7 @@ export const HtmlTableCustomCss = `
 table tr.row-type--accounts td {
   border-top: 1px solid #bbb;
 }
-table tr.row-id--cash-end-period {
+table tr.row-id--cash-end-period td {
   border-bottom: 3px double #333;
 }
 table tr.row-type--total {
@@ -19,4 +19,15 @@ table tr.row-type--total td {
 }
 table tr.row-type--total:not(:first-child) td {
   border-top: 1px solid #bbb;
-}`;
+}
+table .column--name,
+table .cell--name {
+  width: 400px;
+}
+table .column--total,
+table .cell--total,
+table [class*="column--date-range"],
+table [class*="cell--date-range"] {
+  text-align: right;
+}
+`;

packages/server/src/services/FinancialStatements/JournalSheet/constant.ts

@@ -7,4 +7,11 @@ table tr td:not(:first-child) {
 }
 table tr:last-child td {
   border-bottom: 1px solid #ececec; 
-}`;
+}
+table .cell--credit,
+table .cell--debit,
+table .column--credit,
+table .column--debit{
+  text-align: right;
+}
+`;

packages/server/src/services/FinancialStatements/ProfitLossSheet/constants.ts

@@ -26,4 +26,44 @@ table tr.row-type--total td {
   border-top: 1px solid #bbb;
   color: #000;
 }
+table tr.row-id--net-income td{
+  border-bottom: 3px double #000;
+}
+table .column--name,
+table .cell--name {
+  width: 400px;
+}
+
+table .column--total {
+  width: 25%;
+}
+table td.cell--total,
+table td.cell--previous_year,
+table td.cell--previous_year_change,
+table td.cell--previous_year_percentage,
+
+table td.cell--previous_period,
+table td.cell--previous_period_change,
+table td.cell--previous_period_percentage,
+
+table td.cell--percentage_of_row,
+table td.cell--percentage_of_column,
+table td[class*="cell--date-range"] {
+  text-align: right;
+}
+
+table .column--total,
+table .column--previous_year,
+table .column--previous_year_change,
+table .column--previous_year_percentage,
+
+table .column--previous_period,
+table .column--previous_period_change,
+table .column--previous_period_percentage,
+
+table .column--percentage_of_row,
+table .column--percentage_of_column,
+table [class*="column--date-range"] {
+  text-align: right;
+}
 `;

packages/server/src/services/FinancialStatements/PurchasesByItems/_types.ts

@@ -1,7 +1,6 @@
-
 export enum ROW_TYPE {
   TOTAL = 'TOTAL',
-  ITEM = 'ITEM'
+  ITEM = 'ITEM',
 }
 
 export const HtmlTableCustomCss = `
@@ -10,4 +9,15 @@ table tr.row-type--total td {
   border-bottom: 3px double #000;
   font-weight: 600;
 }
+table .column--item_name{
+  width: 300px;
+}
+table .column--quantity_purchases,
+table .column--purchase_amount,
+table .column--average_cost,
+table .cell--quantity_purchases,
+table .cell--purchase_amount,
+table .cell--average_cost{
+  text-align: right;
+}
 `;

packages/server/src/services/FinancialStatements/SalesByItems/constants.ts

@@ -9,4 +9,15 @@ table tr.row-type--total td {
   border-bottom: 3px double #000;
   font-weight: 600;
 }
+table .column--item_name{
+  width: 300px;
+}
+table .column--average_price,
+table .column--sold_quantity,
+table .column--sold_amount,
+table .cell--average_price,
+table .cell--sold_quantity,
+table .cell--sold_amount{
+  text-align: right;
+}
 `;

packages/server/src/services/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetTable.ts

@@ -19,12 +19,13 @@ export class TrialBalanceSheetTable extends R.compose(
   FinancialSheetStructure
 )(FinancialSheet) {
   /**
+   * Trial balance sheet data.
    * @param {ITrialBalanceSheetData}
    */
   public data: ITrialBalanceSheetData;
 
   /**
-   * Balance sheet query.
+   * Trial balance sheet query.
    * @param {ITrialBalanceSheetQuery}
    */
   public query: ITrialBalanceSheetQuery;
@@ -135,7 +136,7 @@ export class TrialBalanceSheetTable extends R.compose(
     return R.compose(
       this.tableColumnsCellIndexing,
       R.concat([
-        { key: 'account_name', label: 'Account' },
+        { key: 'account', label: 'Account' },
         { key: 'debit', label: 'Debit' },
         { key: 'credit', label: 'Credit' },
         { key: 'total', label: 'Total' },

packages/server/src/services/FinancialStatements/TrialBalanceSheet/_constants.ts

@@ -9,4 +9,17 @@ table tr.row-type--total td{
   font-weight: 500;
   border-bottom: 3px double #000;
 }
+
+table .column--account {
+  width: 400px;
+}
+
+table .column--debit,
+table .column--credit,
+table .column--total,
+table .cell--debit,
+table .cell--credit,
+table .cell--total{
+  text-align: right;
+}
 `;

packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/dynamicColumns.ts

@@ -44,7 +44,7 @@ const dynamicColumnMapper = R.curry((data, column) => {
   const totalColumn = amountAccessor(data);
 
   return R.compose(
-    R.when(R.pathEq(['key'], 'account_name'), accountNameColumn),
+    R.when(R.pathEq(['key'], 'account'), accountNameColumn),
     R.when(R.pathEq(['key'], 'credit'), creditColumn),
     R.when(R.pathEq(['key'], 'debit'), debitColumn),
     R.when(R.pathEq(['key'], 'total'), totalColumn),