Merge pull request #926 from bigcapitalhq/20260202-185120-9c84

fix(webapp): constrant not found row color

packages/webapp/src/components/FinancialSheet/ReportDataTable.tsx

@@ -4,7 +4,12 @@ import styled from 'styled-components';
 import { DataTable } from '../Datatable';
 
 export const ReportDataTable = styled(DataTable)`
+  --x-table-no-results-border-color: #ddd;
+
+  .bp4-dark & {
+    --x-table-no-results-border-color: var(--color-dark-gray5);
+  }
   .table .tbody .tr.no-results:last-of-type .td {
-    border-bottom: 1px solid #ddd;
+    border-bottom: 1px solid var(--x-table-no-results-border-color);
   }
 `;

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

@@ -1,8 +1,20 @@
 // @ts-nocheck
+import React from 'react';
 import { getColumnWidth } from '@/utils';
 import * as R from 'ramda';
 import { useGeneralLedgerContext } from './GeneralLedgerProvider';
-import { Align } from '@/constants';
+import { Align, CLASSES } from '@/constants';
+
+/**
+ * Description cell – wraps value in a div with muted text class.
+ */
+function DescriptionCell({ cell: { value } }) {
+  return React.createElement(
+    'div',
+    { className: `cell ${CLASSES.TEXT_MUTED}` },
+    value,
+  );
+}
 
 const getTableCellValueAccessor = (index) => `cells[${index}].value`;
 
@@ -75,6 +87,16 @@ const transactionIdColumnAccessor = (column) => {
   };
 };
 
+/**
+ * Description column accessor (muted text in wrapped cell).
+ */
+const descriptionColumnAccessor = (column) => {
+  return {
+    ...column,
+    Cell: DescriptionCell,
+  };
+};
+
 const dynamiColumnMapper = R.curry((data, column) => {
   const _numericColumnAccessor = numericColumnAccessor(data);
 
@@ -88,6 +110,7 @@ const dynamiColumnMapper = R.curry((data, column) => {
       R.pathEq(['key'], 'reference_number'),
       transactionIdColumnAccessor,
     ),
+    R.when(R.pathEq(['key'], 'description'), descriptionColumnAccessor),
     R.when(R.pathEq(['key'], 'credit'), _numericColumnAccessor),
     R.when(R.pathEq(['key'], 'debit'), _numericColumnAccessor),
     R.when(R.pathEq(['key'], 'amount'), _numericColumnAccessor),

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

@@ -1,9 +1,21 @@
 // @ts-nocheck
-import { Align } from '@/constants';
+import React from 'react';
+import { Align, CLASSES } from '@/constants';
 import { getColumnWidth } from '@/utils';
 import * as R from 'ramda';
 import { useJournalSheetContext } from './JournalProvider';
 
+/**
+ * Description cell – wraps value in a div with muted text class.
+ */
+function DescriptionCell({ cell: { value } }) {
+  return React.createElement(
+    'span',
+    { className: `cell ${CLASSES.TEXT_MUTED}` },
+    value,
+  );
+}
+
 const getTableCellValueAccessor = (index) => `cells[${index}].value`;
 
 const getReportColWidth = (data, accessor, headerText) => {
@@ -86,6 +98,16 @@ const accountCodeColumnAccessor = (column) => {
   };
 };
 
+/**
+ * Description column accessor (muted text in wrapped cell).
+ */
+const descriptionColumnAccessor = (column) => {
+  return {
+    ...column,
+    Cell: DescriptionCell,
+  };
+};
+
 /**
  * Dynamic column mapper.
  * @param {} data -
@@ -105,6 +127,7 @@ const dynamicColumnMapper = R.curry((data, column) => {
       R.pathEq(['key'], 'transaction_number'),
       transactionNumberColumnAccessor,
     ),
+    R.when(R.pathEq(['key'], 'description'), descriptionColumnAccessor),
     R.when(R.pathEq(['key'], 'account_code'), accountCodeColumnAccessor),
     R.when(R.pathEq(['key'], 'credit'), _numericColumnAccessor),
     R.when(R.pathEq(['key'], 'debit'), _numericColumnAccessor),
@@ -113,7 +136,7 @@ const dynamicColumnMapper = R.curry((data, column) => {
 });
 
 /**
- * Composes the fetched dynamic columns from the server to the columns to pass it 
+ * Composes the fetched dynamic columns from the server to the columns to pass it
  * to the table component.
  */
 export const dynamicColumns = (columns, data) => {

packages/webapp/src/style/_variables.scss

@@ -196,7 +196,6 @@ $ns: bp4;
   --color-preferences-sidebar-head-border: #bbcbd0;
   --color-preferences-sidebar-head-text: #3b3b4c;
 
-
   // Preferences - Topbar.
   --color-preferences-topbar-background: #fff;
   --color-preferences-topbar-border: #d2dde2;
@@ -209,7 +208,7 @@ $ns: bp4;
   --color-financial-sheet-title-text: rgb(31, 50, 85);
   --color-financial-sheet-type-text: rgb(31, 50, 85);
   --color-financial-sheet-date-text: rgb(31, 50, 85);
-  --color-financial-sheet-footer-text: rgb(31, 50, 85);
+  --color-financial-sheet-footer-text: var(--color-muted-text);
   --color-financial-sheet-minimal-title-text: #333;
 
   // Transaction locking.
@@ -514,7 +513,7 @@ body.bp4-dark  {
   --color-financial-sheet-title-text: var(--color-light-gray1);
   --color-financial-sheet-type-text: var(--color-light-gray1);
   --color-financial-sheet-date-text: var(--color-light-gray1);
-  --color-financial-sheet-footer-text: var(--color-light-gray1);
+  --color-financial-sheet-footer-text: var(--color-muted-text);
   --color-financial-sheet-minimal-title-text: var(--color-white);
 
   // Transaction locking.

packages/webapp/src/style/components/DataTable/DataTable.scss

@@ -365,7 +365,7 @@
       border-bottom: 1px solid var(--color-datatable-constrant-head-border);
       padding: 0.5rem;
     }
-    
+
     .tbody .tr .td {
       background: transparent;
       padding: 0.5rem 0.5rem;
@@ -375,3 +375,18 @@
     }
   }
 }
+
+// Sticky header: blurred transparent background so body rows don't show through
+.bigcapital-datatable.has-sticky,
+.bigcapital-datatable.has-sticky-header {
+  &.table-constrant .table .thead .th,
+  &.table--constrant .table .thead .th {
+    background: rgba(255, 255, 255, 0.25);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+
+    body.bp4-dark & {
+      background: rgba(28, 33, 39, 0.6);
+    }
+  }
+}