UI revamp (#78)

* init nextjs project

* remove nextjs project

* bring back nextjs

* left navbar arrangement

* menu component

* add subpages and MenuItem component

* menu icons

* move menu-item

* smaller screen menu items

* main container is scrollable

* remove redundant tags

* replace font

* fix last item stickying to the menu bottom

* main page h1 and h2

* current indicators

* indicator component

* pie chart

* add pie chart

* simple table

* table style

* add color circle

* add 2 pie placholders

* add dummy line chart with zoom plugin

* style LineChart

* chart with only subheadline

* bar chart

* main page layout completed

* simple fetching main indicators

* update file names

* useHttp hook

* API_BASE const

* introduce formatter

* fetch savings distribution

* table chart

* fix double circle

* bold total last row

* currency format

* currency format

* correct dummy table data

* line chart data

* account page skeleton

* fetch and select accounts

* transactions table

* account balance history line chart

* correct condition

* add UploadFileButton

* better positioning of upload file button

* useUploadFile hook

* acount name placeholder

* loader

* textLoader init

* account openedAt and sort account buttons

* correct savings distribution query

* static loading text

* home page cleanup

* accounts page

* ignore undefined account transactions loading

* account page loaders

* table refactor

* table refactoring

* Rename line.tsx to Line.tsx

* Rename piechart.module.css to Piechart.module.css

* Rename piechart.tsx to Piechart.tsx

* Rename table.module.css to Table.module.css

* Rename table.tsx to Table.tsx

* Rename headline.module.css to Headline.module.css

* Rename headline.tsx to Headline.tsx

* Rename indicator.module.css to Indicator.module.css

* Rename indicator.tsx to Indicator.tsx

* Rename menu.module.css to Menu.module.css

* Rename menu.tsx to Menu.tsx

* node-version bump

* component names

* component names

* Rename Subheadline.module.css to SubHeadline.module.css

* type errors

* compilation fix

* compilation fix

* TableData compilation fix

* compilation fix

* compilation fix

* CustomTooltipItem

* better

* Table.tsx

* TileHeader fix

* page.tsx

* menuItem

* fix test

* cleanup db

---------

Co-authored-by: Wojciech Krzywiec <wojciech.krzywiec@sartorius.com>

.devcontainer/Dockerfile

@@ -9,7 +9,7 @@ ENV POETRY_NO_INTERACTION=1
 
 ENV NVM_DIR=/usr/local/nvm
 # ENV NVM_DIR=~/.nvm
-ENV NODE_VERSION=20.11.0
+ENV NODE_VERSION=20.18.0
 # replace shell with bash so we can source files
 RUN rm /bin/sh && ln -s /bin/bash /bin/sh
 
@@ -53,6 +53,7 @@ ENV PATH=$NVM_DIR/versions/node/v$NODE_VERSION/bin:$PATH
 # confirm installation
 RUN node -v
 RUN npm -v
+RUN npm install -g pnpm
 
 
 # install Taskfile

.devcontainer/devcontainer.json

@@ -37,6 +37,10 @@
 			// Set *default* container specific settings.json values on container create.
 			"settings": { 
 				"html.format.templating": false,
+				"files.associations": {
+					"*.css": "css",
+					"css": "css"
+				},
 				"python.testing.unittestEnabled": false,
 				"python.testing.pytestEnabled": true,
 				"python.testing.pytestArgs": [
@@ -53,7 +57,7 @@
 				"ms-toolsai.jupyter",
 				"ms-python.flake8",
 				"ms-python.mypy-type-checker",
-				"ms-vscode.vscode-typescript-tslint-plugin",
+				"ecmel.vscode-html-css",
 				"dbaeumer.vscode-eslint",
 				"formulahendry.code-runner",
 				"mechatroner.rainbow-csv",
@@ -71,5 +75,9 @@
 	],
 
 	// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
-	"remoteUser": "root"
+	"remoteUser": "root",
+
+	"remoteEnv": {
+		"WATCHPACK_POLLING": "true"
+	}
 }

.github/workflows/services-branch.yaml

@@ -49,7 +49,7 @@ jobs:
       - name: Set up NodeJS ✨
         uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 20
 
       - name: Cache node modules
         id: cache-npm

.gitignore

@@ -132,4 +132,7 @@ dmypy.json
 /app/data/real
 
 # Backup
-/backup/*.gz
+/backup/*.gz
+
+/services/ui
+.pnpm-store/**

Taskfile.yaml

@@ -89,7 +89,7 @@ tasks:
     dir: services/mankkoo-ui
     cmds:
       - echo "Starting mankkoo UI..."
-      - npm start
+      - npm run dev --turbo
 
   test:
     desc: Run all tests

globals.css

@@ -0,0 +1,54 @@
+body {
+  margin: 50px;
+}
+
+.main {
+  display: flex;
+  height: 100vh;
+}
+
+
+/* ================================= */
+/* LEFT SIDE MENU  */
+/* ================================= */
+.menu {
+  background-color: var(--secondary-bg-color);
+  display: flex;
+  flex-direction: column;
+  width: 200px;
+}
+
+/* Smaller screens - menu width is changing size to meet screen proportions*/
+@media (max-width: 800px) {
+  .menu {
+    width: 20vw;
+  }
+}
+
+.menu ul {
+  list-style-type: none;
+  padding: 0;
+}
+
+.menu ul li {
+  margin: 5%;
+  color: var(--main-bg-color);
+  text-align: center;
+}
+
+.menu li.menuHeader {
+  font-size: 1.1em;
+  text-align: center;
+  padding: 10%;
+}
+
+
+/* ================================= */
+/* PAGE CONTENT  */
+/* ================================= */
+.content {
+  background-color: var(--main-bg-color);
+}
+
+
+

layout.tsx

@@ -0,0 +1,42 @@
+import type { Metadata } from "next";
+import localFont from "next/font/local";
+import "./globals.css";
+
+const geistSans = localFont({
+  src: "./fonts/GeistVF.woff",
+  variable: "--font-geist-sans",
+  weight: "100 900",
+});
+
+const geistMono = localFont({
+  src: "./fonts/GeistMonoVF.woff",
+  variable: "--font-geist-mono",
+  weight: "100 900",
+});
+
+export const metadata: Metadata = {
+  title: "Mankkoo",
+  description: "Mankkoo - personal finances",
+};
+
+export default function RootLayout({ children, }: Readonly<{children: React.ReactNode;}>) {
+  return (
+    <html lang="en">
+      <body className={`${geistSans.variable} ${geistMono.variable}`}>
+        <div className="main">
+          <div className="menu">
+            <ul>
+              <li className="menuHeader">Mankkoo</li>
+              <li>Overview</li>
+              <li>Investments</li>
+              <li>Streams</li>
+            </ul>
+          </div>
+          <div className="content">
+            {children}
+          </div>
+        </div>
+      </body>
+    </html>
+  );
+}

services/mankkoo-ui/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["next/core-web-vitals", "next/typescript"]
+}

services/mankkoo-ui/.gitignore

@@ -4,20 +4,33 @@
 /node_modules
 /.pnp
 .pnp.js
+.yarn/install-state.gz
 
 # testing
 /coverage
 
+# next.js
+/.next/
+/out/
+
 # production
 /build
 
 # misc
 .DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
+*.pem
 
+# debug
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

services/mankkoo-ui/README.md

@@ -1,52 +1,36 @@
-# Getting Started with Create React App
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
 
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app), using the [Redux](https://redux.js.org/) and [Redux Toolkit](https://redux-toolkit.js.org/) TS template.
+## Getting Started
 
-## Requirements
+First, run the development server:
 
-* npm 9.5.1
-* NodeJS 18.16.0
-* npx 9.6.4
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
 
-## Available Scripts
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
-In the project directory, you can run:
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
 
-### `npm start`
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
 
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
-
-The page will reload if you make edits.\
-You will also see any lint errors in the console.
-
-### `npm test`
-
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
-
-### `npm run build`
-
-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
-
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
-
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
-
-### `npm run eject`
-
-**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+## Learn More
 
-If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+To learn more about Next.js, take a look at the following resources:
 
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
 
-You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
 
-## Learn More
+## Deploy on Vercel
 
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
 
-To learn React, check out the [React documentation](https://reactjs.org/).
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

services/mankkoo-ui/api/AccountsPageResponses.ts

@@ -0,0 +1,24 @@
+export interface AccountInfoResponse {
+    id: string;
+    name: string;
+    number: string;
+    alias?: string;
+    type: string;
+    importer: string;
+    active: boolean;
+    bankName: string;
+    bankUrl: string;
+    hidden: boolean;
+    openedAt: string;
+}
+
+export interface AccountTransactionResponse {
+    balance: number;
+    comment?: string;
+    currency: string;
+    date: string;
+    details?: string;
+    id: string;
+    operation: number;
+    title: string;
+}

services/mankkoo-ui/api/ApiUrl.ts

@@ -0,0 +1 @@
+export const API_BASE = 'http://localhost:5000/api/';

services/mankkoo-ui/api/MainPageResponses.ts

@@ -0,0 +1,17 @@
+export interface MainIndicatorsResponse {
+    savings: number;
+    debt: number;
+    lastMonthProfit: number;
+    investments: number;
+}
+
+export interface SavingsDistribution {
+    type: string;
+    total: number;
+    percentage: number;
+}
+
+export interface TotalHistory {
+    date: string[];
+    total: number[];
+}

services/mankkoo-ui/app/accounts/page.module.css

@@ -0,0 +1,3 @@
+.bold {
+    font-weight: bold;
+}