ElementsProject · evansmj · Apr 23, 2024 · Jun 2, 2024 · Jun 2, 2024 · Jun 3, 2024
diff --git a/apps/frontend/build/asset-manifest.json b/apps/frontend/build/asset-manifest.json
@@ -1,17 +1,17 @@
 {
   "files": {
-    "main.css": "/static/css/main.7f1e45cf.css",
-    "main.js": "/static/js/main.c5e37ea7.js",
+    "main.css": "/static/css/main.79f288c9.css",
+    "main.js": "/static/js/main.69a32e2c.js",
     "static/media/Inter-Bold.ttf": "/static/media/Inter-Bold.88fa7ae373b07b41ecce.ttf",
     "static/media/Inter-SemiBold.ttf": "/static/media/Inter-SemiBold.4d56bb21f2399db8ad48.ttf",
     "static/media/Inter-Medium.ttf": "/static/media/Inter-Medium.6dcbc9bed1ec438907ee.ttf",
     "static/media/Inter-Thin.ttf": "/static/media/Inter-Thin.f341ca512063c66296d1.ttf",
     "index.html": "/index.html",
-    "main.7f1e45cf.css.map": "/static/css/main.7f1e45cf.css.map",
-    "main.c5e37ea7.js.map": "/static/js/main.c5e37ea7.js.map"
+    "main.79f288c9.css.map": "/static/css/main.79f288c9.css.map",
+    "main.69a32e2c.js.map": "/static/js/main.69a32e2c.js.map"
   },
   "entrypoints": [
-    "static/css/main.7f1e45cf.css",
-    "static/js/main.c5e37ea7.js"
+    "static/css/main.79f288c9.css",
+    "static/js/main.69a32e2c.js"
   ]
 }
diff --git a/apps/frontend/build/index.html b/apps/frontend/build/index.html
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="./images/cln-favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="color-scheme" content="light dark"><meta name="description" content="Core lightning application"/><link rel="apple-touch-icon" href="./images/cln-logo-dark.png"/><title>Core Lightning</title><script defer="defer" src="/static/js/main.c5e37ea7.js"></script><link href="/static/css/main.7f1e45cf.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="./images/cln-favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="color-scheme" content="light dark"><meta name="description" content="Core lightning application"/><link rel="apple-touch-icon" href="./images/cln-logo-dark.png"/><title>Core Lightning</title><script defer="defer" src="/static/js/main.69a32e2c.js"></script><link href="/static/css/main.79f288c9.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
diff --git a/...ontend/build/static/css/main.7f1e45cf.css → ...ontend/build/static/css/main.79f288c9.css b/...ontend/build/static/css/main.7f1e45cf.css → ...ontend/build/static/css/main.79f288c9.css
diff --git a/apps/frontend/build/static/css/main.79f288c9.css.map b/apps/frontend/build/static/css/main.79f288c9.css.map
diff --git a/apps/frontend/build/static/css/main.7f1e45cf.css.map b/apps/frontend/build/static/css/main.7f1e45cf.css.map
diff --git a/apps/frontend/build/static/js/main.12dcd792.js b/apps/frontend/build/static/js/main.12dcd792.js
diff --git a/apps/frontend/build/static/js/main.12dcd792.js.map b/apps/frontend/build/static/js/main.12dcd792.js.map
diff --git a/apps/frontend/build/static/js/main.69a32e2c.js b/apps/frontend/build/static/js/main.69a32e2c.js
diff --git a/...ld/static/js/main.12dcd792.js.LICENSE.txt → ...ld/static/js/main.69a32e2c.js.LICENSE.txt b/...ld/static/js/main.12dcd792.js.LICENSE.txt → ...ld/static/js/main.69a32e2c.js.LICENSE.txt
@@ -5,8 +5,20 @@
 */
 
 /*!
- * perfect-scrollbar v1.5.3
- * Copyright 2021 Hyunje Jun, MDBootstrap and Contributors
+  react-datepicker v7.6.0
+  https://github.com/Hacker0x01/react-datepicker
+  Released under the MIT License.
+*/
+
+/*!
+ * Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+ * Copyright 2024 Fonticons, Inc.
+ */
+
+/*!
+ * perfect-scrollbar v1.5.6
+ * Copyright 2024 Hyunje Jun, MDBootstrap and Contributors
  * Licensed under MIT
  */
 
@@ -57,7 +69,7 @@
  */
 
 /**
- * @remix-run/router v1.15.2
+ * @remix-run/router v1.22.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -68,7 +80,7 @@
  */
 
 /**
- * React Router DOM v6.22.2
+ * React Router DOM v6.29.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -79,7 +91,7 @@
  */
 
 /**
- * React Router v6.22.2
+ * React Router v6.29.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -88,3 +100,5 @@
  *
  * @license MIT
  */
+
+//! moment.js
diff --git a/apps/frontend/build/static/js/main.69a32e2c.js.map b/apps/frontend/build/static/js/main.69a32e2c.js.map
diff --git a/apps/frontend/build/static/js/main.c5e37ea7.js b/apps/frontend/build/static/js/main.c5e37ea7.js
diff --git a/apps/frontend/build/static/js/main.c5e37ea7.js.map b/apps/frontend/build/static/js/main.c5e37ea7.js.map
diff --git a/apps/frontend/package.json b/apps/frontend/package.json
@@ -17,11 +17,14 @@
     "bootstrap": "^5.3.2",
     "copy-to-clipboard": "^3.3.3",
     "crypto-js": "^4.2.0",
+    "d3": "^7.9.0",
     "framer-motion": "^10.16.5",
+    "moment": "^2.30.1",
     "node-sass": "^7.0.3",
     "qrcode.react": "^3.1.0",
     "react": "^18.2.0",
     "react-bootstrap": "^2.10.1",
+    "react-datepicker": "^7.3.0",
     "react-dom": "^18.2.0",
     "react-perfect-scrollbar": "^1.5.8",
     "react-router-dom": "^6.22.1",
@@ -31,6 +34,7 @@
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^14.2.1",
     "@testing-library/user-event": "^14.5.1",
+    "@types/d3": "^7.4.3",
     "@types/jest": "^29.5.12",
     "@types/node": "^20.9.4",
     "@types/react": "^18.2.61",

diff --git a/apps/frontend/src/components/App/App.tsx b/apps/frontend/src/components/App/App.tsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
 import './App.scss';
 import { useContext, useEffect } from 'react';
 import { Navigate, Outlet, RouterProvider, createBrowserRouter } from 'react-router-dom';
@@ -20,6 +18,10 @@ import logger from '../../services/logger.service';
 import { AuthResponse } from '../../types/app-config.type';
 import Bookkeeper from '../bookkeeper/BkprRoot/BkprRoot';
 import CLNHome from '../cln/CLNHome/CLNHome';
+import BalanceSheetRoot from '../bookkeeper/BalanceSheet/BalanceSheetRoot';
+import SatsFlowRoot from '../bookkeeper/SatsFlow/SatsFlowRoot';
+import VolumeRoot from '../bookkeeper/Volume/VolumeRoot';
+import Terminal from '../bookkeeper/Terminal/TerminalRoot';
 
 export const rootRouteConfig = [
   {
@@ -28,6 +30,10 @@ export const rootRouteConfig = [
       { path: "/", Component: () => <Navigate to="/home" replace /> },
       { path: "home", Component: CLNHome },
       { path: "bookkeeper", Component: Bookkeeper },
+      { path: "bookkeeper/balancesheet", Component: BalanceSheetRoot },
+      { path: "bookkeeper/satsflow", Component: SatsFlowRoot },
+      { path: "bookkeeper/volume", Component: VolumeRoot },
+      { path: "bookkeeper/terminal", Component: Terminal }
     ]
   },
 ];

diff --git a/apps/frontend/src/components/bookkeeper/BalanceSheet/BalanceSheetRoot.scss b/apps/frontend/src/components/bookkeeper/BalanceSheet/BalanceSheetRoot.scss
@@ -0,0 +1,93 @@
+@import '../../../styles/constants.scss';
+
+.react-datepicker-popper {
+  .react-datepicker {
+    border-color: $border-color;
+
+    &__header {
+      background-color: transparent;
+      border-bottom-color: $border-color;
+    }
+
+    &__navigation {
+      &-icon::before {
+        border-color: currentColor;
+      }
+
+      &:hover *::before {
+        border-color: $primary;
+      }
+    }
+
+    &__day {
+      &:hover {
+        background-color: rgba($primary, 0.1);
+        color: $primary;
+      }
+
+      &--selected {
+        background-color: $primary;
+        color: white;
+
+        &:hover {
+          background-color: darken($primary, 5%);
+        }
+      }
+
+      &--keyboard-selected {
+        background-color: rgba($primary, 0.1);
+        color: $primary;
+      }
+    }
+
+    &__current-month,
+    &__day-name {
+      color: inherit;
+    }
+  }
+}
+
+@include color-mode(dark) {
+  .react-datepicker-popper {
+    .react-datepicker {
+      background-color: $picker-background-color-dark;
+      border-color: $picker-border-color-dark;
+
+      &__header {
+        background-color: $picker-background-color-dark;
+        border-bottom-color: $picker-border-color-dark;
+      }
+
+      &__current-month,
+      &__day-name,
+      &__day {
+        color: $light-dark;
+      }
+
+      &__day {
+        &:hover {
+          background-color: rgba($primary, 0.1);
+          color: $primary;
+        }
+
+        &--selected {
+          background-color: $primary;
+          color: $white;
+
+          &:hover {
+            background-color: darken($primary, 5%);
+          }
+        }
+
+        &--keyboard-selected {
+          background-color: rgba($primary, 0.1);
+          color: $primary;
+        }
+      }
+
+      &__navigation-icon::before {
+        border-color: $light-dark;
+      }
+    }
+  }
+}
diff --git a/apps/frontend/src/components/bookkeeper/BalanceSheet/BalanceSheetRoot.test.tsx b/apps/frontend/src/components/bookkeeper/BalanceSheet/BalanceSheetRoot.test.tsx
@@ -0,0 +1,15 @@
+import { render, screen } from '@testing-library/react';
+import BalanceSheetRoot from './BalanceSheetRoot';
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useNavigate: jest.fn(),
+}));
+
+describe('Balance Sheet component ', () => {
+  beforeEach(() => render(<BalanceSheetRoot />));
+
+  it('should be in the document', () => {
+    expect(screen.getByTestId('balancesheet-container')).not.toBeEmptyDOMElement()
+  });
+});
diff --git a/apps/frontend/src/components/bookkeeper/BalanceSheet/BalanceSheetRoot.tsx b/apps/frontend/src/components/bookkeeper/BalanceSheet/BalanceSheetRoot.tsx
@@ -0,0 +1,131 @@
+import { useCallback, useContext, useEffect, useRef, useState } from 'react';
+
+import './BalanceSheetRoot.scss';
+import 'react-datepicker/dist/react-datepicker.css';
+import Card from 'react-bootstrap/Card';
+import Row from 'react-bootstrap/Row';
+import BalanceSheetGraph from './Graph/BalanceSheetGraph';
+import { AppContext } from '../../../store/AppContext';
+import BalanceSheetTable from './Table/BalanceSheetTable';
+import useHttp from '../../../hooks/use-http';
+import { TimeGranularity } from '../../../utilities/constants';
+import { BalanceSheet } from '../../../types/lightning-balancesheet.type';
+import TimeGranularitySelection from '../TimeGranularitySelection/TimeGranularitySelection';
+import { Container } from 'react-bootstrap';
+import DatePicker from 'react-datepicker';
+import DatepickerInput from '../DatepickerInput/DatepickerInput';
+
+const BalanceSheetRoot = () => {
+  const appCtx = useContext(AppContext);
+  const [containerWidth, setContainerWidth] = useState(0);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [balanceSheetData, setBalanceSheetData] = useState<BalanceSheet>({ periods: [] });
+  const [timeGranularity, setTimeGranularity] = useState<TimeGranularity>(TimeGranularity.MONTHLY);
+  const [rangeStart, setRangeStart] = useState<Date | undefined>(undefined);
+  const [rangeEnd, setRangeEnd] = useState<Date | undefined>(undefined);
+  const [hideZeroActivityPeriods, setHideZeroActivityPeriods] = useState<boolean>(true);
+  const { getBalanceSheet } = useHttp();
+
+  const updateWidth = () => {
+    if (containerRef.current) {
+      setContainerWidth(containerRef.current.getBoundingClientRect().width);
+    }
+  };
+
+  const fetchBalanceSheetData = useCallback(
+    async (timeGranularity: TimeGranularity, hideZeroActivityPeriods: Boolean, startDate?: Date, endDate?: Date) => {
+      getBalanceSheet(timeGranularity, hideZeroActivityPeriods, startDate, endDate)
+        .then((response: BalanceSheet) => {
+          setBalanceSheetData(response);
+        })
+        .catch(err => {
+          console.error('fetchBalanceSheet error ' + JSON.stringify(err));
+        });
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [],
+  );
+
+  const timeGranularityChangeHandler = timeGranularity => {
+    setTimeGranularity(timeGranularity);
+  };
+
+  const hideZeroActivityPeriodsChangeHandler = (event) => {
+    setHideZeroActivityPeriods(event.target.checked);
+  };
+
+  useEffect(() => {
+    updateWidth();
+    window.addEventListener('resize', updateWidth);
+    return () => window.removeEventListener('resize', updateWidth);
+  }, []);
+
+  useEffect(() => {
+    if (appCtx.authStatus.isAuthenticated) {
+      fetchBalanceSheetData(timeGranularity, hideZeroActivityPeriods, rangeStart, rangeEnd);
+    }
+  }, [
+    appCtx.authStatus.isAuthenticated,
+    timeGranularity,
+    rangeStart,
+    rangeEnd,
+    fetchBalanceSheetData,
+    hideZeroActivityPeriods,
+  ]);
+
+  return (
+    <div data-testid="balancesheet-container" ref={containerRef}>
+      <Card className="d-flex align-items-stretch inner-box-shadow">
+        <Card.Header className="p-2">
+          <Container fluid>
+            <Row>
+              <div className="fs-4 mt-2 fw-bold">Balance Sheet</div>
+            </Row>
+            <div className="d-flex align-items-center mt-2 gap-4">
+              <div className="fw-bold">Time Granularity</div>
+              <TimeGranularitySelection
+                className="time-granularity-dropdown"
+                timeGranularity={timeGranularity}
+                onTimeGranularityChanged={timeGranularityChangeHandler}
+              />
+              <DatePicker
+                customInput={<DatepickerInput />}
+                selected={rangeStart}
+                onChange={date => setRangeStart(date ?? undefined)}
+                placeholderText="Starts"
+              />
+              <DatePicker
+                customInput={<DatepickerInput />}
+                selected={rangeEnd}
+                onChange={date => setRangeEnd(date ?? undefined)}
+                placeholderText="Ends"
+              />
+              <div className="ms-3 me-3 mt-2 d-flex align-items-center">
+                <input
+                  type="checkbox"
+                  id="hideZeroActivityCheckbox"
+                  name="hideZeroActivity"
+                  checked={hideZeroActivityPeriods}
+                  onChange={hideZeroActivityPeriodsChangeHandler}
+                />
+                <label htmlFor="hideZeroActivityCheckbox" className="ms-2">
+                  Hide Zero Activity
+                </label>
+              </div>
+            </div>
+          </Container>
+        </Card.Header>
+        <Card.Body className="pb-4 d-flex flex-column align-items-center">
+          <Row>
+            <BalanceSheetGraph balanceSheetData={balanceSheetData} width={containerWidth} />
+          </Row>
+          <Row className="w-100 overflow-x-auto">
+            <BalanceSheetTable balanceSheetData={balanceSheetData} />
+          </Row>
+        </Card.Body>
+      </Card>
+    </div>
+  );
+};
+
+export default BalanceSheetRoot;
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="./images/cln-favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="color-scheme" content="light dark"><meta name="description" content="Core lightning application"/><link rel="apple-touch-icon" href="./images/cln-logo-dark.png"/><title>Core Lightning</title><script defer="defer" src="/static/js/main.c5e37ea7.js"></script><link href="/static/css/main.7f1e45cf.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
		<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="./images/cln-favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="color-scheme" content="light dark"><meta name="description" content="Core lightning application"/><link rel="apple-touch-icon" href="./images/cln-logo-dark.png"/><title>Core Lightning</title><script defer="defer" src="/static/js/main.69a32e2c.js"></script><link href="/static/css/main.79f288c9.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>