Add mcp server, adjust types, add logger (#170)

* Add mcp server for next

* Use loglevel, remove any types

Author: dlebech

.mcp.json

@@ -0,0 +1,8 @@
+{
+  "mcpServers": {
+    "next-devtools": {
+      "command": "npx",
+      "args": ["-y", "next-devtools-mcp@latest"]
+    }
+  }
+}

package-lock.json

@@ -23,6 +23,7 @@
     "immutability-helper": "^3.1.1",
     "jschardet": "^3.1.4",
     "lodash": "^4.17.23",
+    "loglevel": "^1.9.2",
     "lru-cache": "^11.2.6",
     "moment": "^2.30.1",
     "next": "^16.1.6",

package.json

@@ -1,5 +1,6 @@
 import { NextRequest, NextResponse } from 'next/server';
 import { fetchRates } from '../../../utils/eurofx';
+import logger from '../../../utils/logger';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export async function GET(_request: NextRequest) {
@@ -9,7 +10,7 @@ export async function GET(_request: NextRequest) {
 
     return NextResponse.json(currencies);
   } catch (error) {
-    console.error('Error fetching currencies:', error);
+    logger.error('Error fetching currencies:', error);
     return NextResponse.json(
       { error: 'Failed to fetch currencies' },
       { status: 500 }

src/app/api/currencies/route.ts

@@ -1,11 +1,12 @@
 import { NextRequest, NextResponse } from 'next/server';
 import { fetchRates } from '../../../utils/eurofx';
+import logger from '../../../utils/logger';
 
 export async function GET(request: NextRequest) {
   try {
     const url = new URL(request.url);
     const currencyParams = url.searchParams.getAll('currencies');
-    
+
     const options: { historical: boolean; currencies?: string[] } = { historical: true };
     if (currencyParams.length > 0) {
       options.currencies = currencyParams;
@@ -22,7 +23,7 @@ export async function GET(request: NextRequest) {
 
     return NextResponse.json(ratesObject);
   } catch (error) {
-    console.error('Error fetching currency rates:', error);
+    logger.error('Error fetching currency rates:', error);
     return NextResponse.json(
       { error: 'Failed to fetch currency rates' },
       { status: 500 }

src/app/api/currencyRates/route.ts

@@ -4,7 +4,7 @@ import { type AppDispatch, Transaction, Account, Category } from '../types/redux
 import dynamic from 'next/dynamic';
 import moment, { Moment } from 'moment';
 import { nest } from 'd3-collection';
-import { TransactionGroup } from '../types/app';
+import { type TransactionGroup, type CategoryExpense } from '../types/app';
 import { sum } from 'd3-array';
 import { createSelector } from 'reselect';
 import { uncategorized } from '../data/categories';
@@ -18,15 +18,6 @@ import AmountSumBar from './charts/AmountSumBar';
 import IncomeExpensesLine from './charts/IncomeExpensesLine';
 import Loading from './shared/Loading';
 
-interface CategoryExpense {
-  key: string;
-  value: {
-    amount: number;
-    transactions: Transaction[];
-    category: Category;
-  };
-}
-
 const CategoryExpenses = dynamic(() => import('./charts/CategoryExpenses'), {
   loading: () => <Loading />
 });
@@ -190,15 +181,15 @@ const getSortedCategoryExpenses = createSelector(
   [getIncomeAndExpenses],
   (incomeAndExpenses: Transaction[][]): CategoryExpense[] => {
     const expenses = incomeAndExpenses[1];
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    return (nest() as any)
+    return (nest<Transaction>()
       .key((d: Transaction) => (d.category as unknown as Category).id)
+      // @ts-expect-error d3-collection types: .key() this-return doesn't track .rollup() generic
       .rollup((transactions: Transaction[]) => ({
         transactions,
         category: transactions[0].category as unknown as Category,
         amount: Math.abs(sum(transactions, (d: Transaction) => d.amount))
       }))
-      .entries(expenses)
+      .entries(expenses) as unknown as CategoryExpense[])
       .sort((a: CategoryExpense, b: CategoryExpense) => b.value.amount - a.value.amount);
   }
 );

src/components/Charts.tsx

@@ -71,7 +71,21 @@ describe('Intro Component', () => {
       accounts: {
         data: []
       },
-      edit: {},
+      edit: {
+        isCategoryGuessing: false,
+        isParsing: false,
+        isFetchingCurrencies: false,
+        isFetchingCurrencyRates: false,
+        dateSelect: {},
+        transactionList: {
+          page: 1,
+          pageSize: 50,
+          sortKey: 'date',
+          sortAscending: false,
+          filterCategories: new Set<string>()
+        },
+        charts: {}
+      },
       search: {
         transactions: {
           text: '',

src/components/Intro.test.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useState, useRef } from 'react';
 import moment, { Moment } from 'moment';
 import { useSelector, useDispatch } from 'react-redux';
 import { type AppDispatch, type Transaction, type Category } from '../types/redux';
-import type { TransactionGroup } from '../types/app';
+import type { TransactionGroup, DisplayTransaction, DisplayTransactionGroup } from '../types/app';
 import Link from 'next/link';
 import { createSearchAction } from 'redux-search';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -37,9 +37,8 @@ export default function Transactions() {
       return obj;
     }, {});
 
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    let transactionsData: any[] = state.transactions.data
-      .map((t: Transaction) => {
+    let transactionsData: DisplayTransaction[] = state.transactions.data
+      .map((t: Transaction): DisplayTransaction => {
         return {
           categoryGuess: (t.category.guess && categoriesObj[t.category.guess]) || null,
           categoryConfirmed: (t.category.confirmed && categoriesObj[t.category.confirmed]) || null,
@@ -55,8 +54,7 @@ export default function Transactions() {
 
     // Create an ID -> transactions mapping for easier tooltip'ing.
     const transactionGroupsObj = Object.entries(state.transactions.groups || {})
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      .reduce((obj: Record<string, { groupId: string; linkedTransactions: any[] }>, [groupId, group]: [string, TransactionGroup]) => {
+      .reduce((obj: Record<string, DisplayTransactionGroup>, [groupId, group]: [string, TransactionGroup]) => {
         obj[group.primaryId] = {
           groupId,
           linkedTransactions: group.linkedIds.map((id: string) => transactionsData[reverseTransactionLookup[id]])

src/components/Transactions.tsx

@@ -5,7 +5,7 @@ import { formatNumber } from '../../util';
 
 interface Account {
   name: string;
-  currency: string;
+  currency?: string;
 }
 
 interface Amounts {

src/components/charts/AmountCard.tsx

@@ -14,6 +14,7 @@ import { sum, ascending } from 'd3-array';
 import color from '../../data/color';
 import { formatNumber } from '../../util';
 import { Transaction } from '../../types/redux';
+import { type NestEntry } from '../../types/app';
 
 interface Props {
   transactions: Transaction[];
@@ -23,9 +24,9 @@ export default function AmountSumBar({ transactions }: Props) {
   const data = nest<Transaction>()
     .key((d: Transaction) => d.date.substring(0, 7))
     .sortKeys(ascending)
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    .rollup((a: Transaction[]) => sum(a, (d: Transaction) => d.amount) as any)
-    .entries(transactions);
+    // @ts-expect-error d3-collection types: .key() this-return doesn't track .rollup() generic
+    .rollup((a: Transaction[]) => sum(a, (d: Transaction) => d.amount))
+    .entries(transactions) as unknown as NestEntry<number>[];
 
   return (
     <div className="chart">