merged with master

frontend/.yarnrc.yml

@@ -20,4 +20,4 @@ nmMode: hardlinks-local
 
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.1.0.cjs
+yarnPath: .yarn/releases/yarn-4.4.0.cjs

frontend/next.config.js

@@ -7,14 +7,14 @@
 const { redirects } = require('./next.redirects');
 const { generateBuildId, generateBuildIdSync } = require('./next.buildId');
 const { i18n } = require('./next-i18next.config');
-const { runtimeCaching } = require('./next.pwa-cache');
+// const { runtimeCaching } = require('./next.pwa-cache');
 const { withPlausibleProxy } = require('next-plausible');
 
-const withPWA = require('next-pwa')({
-  dest: 'public',
-  disable: process.env.NODE_ENV === 'development',
-  runtimeCaching,
-});
+// const withPWA = require('next-pwa')({
+//   dest: 'public',
+//   disable: process.env.NODE_ENV === 'development',
+//   runtimeCaching,
+// });
 
 // const withBundleAnalyzer = require('@next/bundle-analyzer')({
 //   enabled: process.env.ANALYZE === 'true',

frontend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "lasius-frontend",
   "private": true,
-  "version": "1.0.5",
+  "version": "1.0.7",
   "description": "Lasius NextJS Frontend Application Server",
   "author": "tegonal.com <[email protected]>",
   "license": "AGPL 3.0",
@@ -28,79 +28,80 @@
     "backend": "concurrently --kill-others-on-fail --names \"BACKEND,PROXY,DB\" -c \"bgBlue.bold,bgMagenta.bold,bgGreen.bold\" \"sleep 3 && yarn run _dev-backend-sbt\" \"yarn run _dev-backend-proxy\" \"yarn run _dev-backend-db\"",
     "orval": "rm -rf ./src/lib/api/lasius && orval --config ./orval.config.js && yarn run lint-fix",
     "tsc": "tsc --noEmit --incremental --watch",
-    "analyze": "ANALYZE=true yarn run build"
+    "analyze": "ANALYZE=true yarn run build",
+    "self-update": "yarn set version latest"
   },
   "dependencies": {
-    "@emotion/react": "^11.11.4",
-    "@headlessui/react": "^1.7.18",
+    "@emotion/react": "^11.13.3",
+    "@headlessui/react": "^2.1.2",
     "@hookform/error-message": "^2.0.1",
-    "@nivo/bar": "^0.84.0",
-    "@nivo/core": "^0.84.0",
-    "@nivo/pie": "^0.84.0",
+    "@nivo/bar": "^0.87.0",
+    "@nivo/core": "^0.87.0",
+    "@nivo/pie": "^0.87.0",
     "@popperjs/core": "^2.11.8",
     "@theme-ui/color": "^0.16.2",
     "@theme-ui/match-media": "^0.16.2",
-    "axios": "^1.6.7",
-    "boring-avatars": "^1.10.1",
+    "axios": "^1.7.4",
+    "boring-avatars": "^1.10.2",
     "cookie": "^0.6.0",
     "date-fns": "^2.30.0",
-    "date-fns-tz": "^2.0.0",
-    "framer-motion": "^11.0.8",
-    "i18next": "^23.10.0",
+    "date-fns-tz": "^2.0.1",
+    "framer-motion": "^11.3.29",
+    "i18next": "^23.14.0",
     "js-cookie": "^3.0.5",
     "json-stable-stringify": "^1.1.1",
     "lodash": "^4.17.21",
-    "next": "^14.1.2",
-    "next-auth": "4.24.6",
-    "next-i18next": "^15.2.0",
-    "next-plausible": "^3.12.0",
+    "next": "^14.2.5",
+    "next-auth": "4.24.7",
+    "next-i18next": "^15.3.1",
+    "next-plausible": "^3.12.2",
     "next-pwa": "^5.6.0",
     "next-seo": "^6.5.0",
-    "react": "^18.2.0",
+    "react": "^18.3.1",
     "react-async-hook": "^4.0.0",
-    "react-dom": "^18.2.0",
-    "react-hook-form": "7.51.0",
-    "react-i18next": "^14.0.5",
+    "react-dom": "^18.3.1",
+    "react-hook-form": "7.52.2",
+    "react-i18next": "^15.0.1",
     "react-popper": "^2.3.0",
     "react-use-websocket": "^4.8.1",
     "swr": "^2.2.5",
     "theme-ui": "^0.16.2",
     "ts-export-to-csv": "^0.3.3",
-    "tslog": "^4.9.2",
-    "usehooks-ts": "^2.15.1",
-    "zustand": "^4.5.2"
+    "tslog": "^4.9.3",
+    "usehooks-ts": "^3.1.0",
+    "zustand": "^4.5.5"
   },
   "devDependencies": {
-    "@emotion/eslint-plugin": "^11.11.0",
-    "@next/bundle-analyzer": "^14.1.2",
-    "@openapitools/openapi-generator-cli": "^2.10.0",
+    "@emotion/eslint-plugin": "^11.12.0",
+    "@next/bundle-analyzer": "^14.2.5",
+    "@openapitools/openapi-generator-cli": "^2.13.5",
     "@types/cookie": "^0.6.0",
     "@types/d3-shape": "^3.1.6",
     "@types/js-cookie": "^3.0.6",
     "@types/json-stable-stringify": "^1.0.36",
-    "@types/lodash": "^4.14.202",
-    "@types/node": "20.11.24",
-    "@types/react": "^18.2.62",
-    "@types/react-dom": "^18.2.19",
-    "@typescript-eslint/eslint-plugin": "^7.1.1",
-    "@typescript-eslint/parser": "^7.1.1",
+    "@types/lodash": "^4.17.7",
+    "@types/node": "20.16.1",
+    "@types/react": "^18.3.4",
+    "@types/react-dom": "^18.3.0",
+    "@typescript-eslint/eslint-plugin": "^8.2.0",
+    "@typescript-eslint/parser": "^8.2.0",
     "concurrently": "^8.2.2",
     "eslint": "8.57.0",
     "eslint-config-airbnb": "^19.0.4",
-    "eslint-config-next": "^14.1.2",
+    "eslint-config-next": "^14.2.5",
     "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jsx-a11y": "^6.8.0",
-    "eslint-plugin-license-header": "^0.6.0",
-    "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-react": "^7.34.0",
+    "eslint-plugin-jsx-a11y": "^6.9.0",
+    "eslint-plugin-license-header": "^0.6.1",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-react": "^7.35.0",
     "i18next-parser": "^8.13.0",
-    "orval": "6.23.0",
-    "prettier": "^3.2.5",
-    "svgo": "^3.2.0",
+    "orval": "6.31.0",
+    "prettier": "^3.3.3",
+    "svgo": "^3.3.2",
     "svgstore-cli": "^2.0.1",
-    "typescript": "5.3.3"
+    "typescript": "5.5.4"
   },
-  "packageManager": "yarn@4.1.0"
+  "packageManager": "yarn@4.4.0"
 }

frontend/public/locales/de/common.json

@@ -116,6 +116,7 @@
   "Organisations": "Organisationen",
   "Page not found": "Seite nicht gefunden",
   "Password": "Passwort",
+  "Password update failed. Make sure you entered your current password and that it is correct.": "Password update failed. Make sure you entered your current password and that it is correct.",
   "Password updated": "Passwort aktualisiert",
   "Passwords don't match": "Passwörter stimmen nicht überein",
   "Previous month": "Vorheriger Monat",

frontend/public/locales/en/common.json

@@ -116,6 +116,7 @@
   "Organisations": "Organisations",
   "Page not found": "Page not found",
   "Password": "Password",
+  "Password update failed. Make sure you entered your current password and that it is correct.": "Password update failed. Make sure you entered your current password and that it is correct.",
   "Password updated": "Password updated",
   "Passwords don't match": "Passwords don't match",
   "Previous month": "Previous month",

frontend/src/components/error.tsx

@@ -17,25 +17,25 @@
  *
  */
 
-import React from 'react';
+import React, { useEffect } from 'react';
 
 import { Box, Flex, Heading } from 'theme-ui';
 import { PageError } from 'dynamicTranslationStrings';
 import { usePlausible } from 'next-plausible';
 import { LasiusPlausibleEvents } from 'lib/telemetry/plausibleEvents';
-import { useEffectOnce } from 'usehooks-ts';
 
 export const Error: React.FC<{ statusCode: number }> = ({ statusCode }) => {
   const plausible = usePlausible<LasiusPlausibleEvents>();
 
-  useEffectOnce(() => {
+  useEffect(() => {
     plausible('error', {
       props: {
         status: statusCode.toString(),
         message: PageError[statusCode.toString()],
       },
     });
-  });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   return (
     <Flex sx={{ label: 'Error', height: '66vh', justifyContent: 'center', alignItems: 'center' }}>

frontend/src/components/forms/formErrorBadge.tsx

@@ -34,10 +34,10 @@ export const FormErrorBadge: React.FC<Props> = ({ error }) => {
     <Box sx={{ bottom: 0, position: 'absolute', right: 0, transform: 'translate(6px, 50%)' }}>
       <Badge variant="warning">
         <ErrorSign />
-        {/*
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore */}
-        {FormError[error.type]}
+        {
+          // @ts-expect-error - error.type is a string
+          FormError[error.type]
+        }
       </Badge>
     </Box>
   );

frontend/src/components/forms/formErrorsMultiple.tsx

@@ -46,10 +46,10 @@ export const FormErrorsMultiple: React.FC<Props> = ({ errors = null }) => {
         {Object.keys(types).map((key) => (
           <Badge key={key} sx={{ transform: 'translate(6px, -50%)' }} variant="warning">
             <ErrorSign />
-            {/*
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore */}
-            {t(FormError[key])}
+            {
+              // @ts-expect-error - error.type is a string
+              t(FormError[key])
+            }
           </Badge>
         ))}
       </Flex>

frontend/src/components/forms/formErrorsSummary.tsx

@@ -41,10 +41,10 @@ export const FormErrorsSummary: React.FC<Props> = ({ errors }) => {
           {Object.keys(errors[field].types).map((key) => (
             <Badge key={key} variant="warning">
               <ErrorSign />
-              {/*
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore */}
-              {t(FormError[key])}
+              {
+                // @ts-expect-error - error.type is a string
+                t(FormError[key])
+              }
             </Badge>
           ))}
         </Flex>

frontend/src/components/modal/modalConfirm.tsx

@@ -22,9 +22,8 @@ import { ModalResponsive } from 'components/modal/modalResponsive';
 import { FormElement } from 'components/forms/formElement';
 import { Button } from '@theme-ui/components';
 import { useTranslation } from 'next-i18next';
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Box } from 'theme-ui';
-import { useEffectOnce } from 'usehooks-ts';
 
 type Props = {
   text?: {
@@ -60,9 +59,10 @@ export const ModalConfirm: React.FC<Props> = ({
     closeModal();
   };
 
-  useEffectOnce(() => {
+  useEffect(() => {
     openModal();
-  });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   return (
     <ModalResponsive modalId={modalId} blockViewport>

frontend/src/components/shared/dateRangeFilter.tsx

@@ -26,7 +26,6 @@ import { useTranslation } from 'next-i18next';
 import React, { useEffect, useRef } from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
 import { Select } from 'theme-ui';
-import { useEffectOnce } from 'usehooks-ts';
 import { isAfter, isBefore } from 'date-fns';
 
 type Props = {
@@ -58,9 +57,10 @@ export const DateRangeFilter: React.FC<Props> = ({ name: rangeFieldName }) => {
     parentFormContext.trigger();
   };
 
-  useEffectOnce(() => {
+  useEffect(() => {
     resetForm();
-  });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   const watchFrom = parentFormContext.watch('from');
   const watchTo = parentFormContext.watch('to');

frontend/src/components/shared/iconTabs.tsx

@@ -23,7 +23,6 @@ import { Box, Flex, Grid } from 'theme-ui';
 import { Button } from '@theme-ui/components';
 import { Icon } from 'components/shared/icon';
 import { SelectedTabIcon } from 'components/shared/motion/selectedTabIcon';
-import { useEffectOnce } from 'usehooks-ts';
 import { IconNames } from 'types/iconNames';
 import { fullWidthHeight } from 'styles/shortcuts';
 import { ScrollContainer } from 'components/scrollContainer';
@@ -53,11 +52,12 @@ export const IconTabs: React.FC<Props> = ({ tabs, position = 'top' }) => {
 
   const [selected, setSelected] = useState(0);
 
-  useEffectOnce(() => {
+  useEffect(() => {
     if (!tabViews.find((tab) => tab.id === tabId)) {
       dispatch({ type: 'tabview.add', payload: { id: tabId, activeIndex: 0 } });
     }
-  });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   useEffect(() => {
     const tabView = tabViews.find((tab) => tab.id === tabId);

frontend/src/components/shared/tabs.tsx

@@ -23,7 +23,6 @@ import { Box, Flex } from 'theme-ui';
 import { Button } from '@theme-ui/components';
 import { SelectedTab } from 'components/shared/motion/selectedTab';
 import { useStore } from 'storeContext/store';
-import { useEffectOnce } from 'usehooks-ts';
 
 type TabItem = { label: string; component: React.ReactNode; icon?: string };
 
@@ -41,11 +40,12 @@ export const Tabs: React.FC<Props> = ({ tabs }) => {
 
   const tabId = useId();
 
-  useEffectOnce(() => {
+  useEffect(() => {
     if (!tabViews.find((tab) => tab.id === tabId)) {
       dispatch({ type: 'tabview.add', payload: { id: tabId, activeIndex: 0 } });
     }
-  });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   useEffect(() => {
     const tabView = tabViews.find((tab) => tab.id === tabId);

frontend/src/components/system/bootstrapTasks.tsx

@@ -17,8 +17,7 @@
  *
  */
 
-import React from 'react';
-import { useEffectOnce } from 'usehooks-ts';
+import React, { useEffect } from 'react';
 import { useRouter } from 'next/router';
 import { logger } from 'lib/logger';
 import { useContextMenu } from 'components/contextMenuBar/hooks/useContextMenu';
@@ -36,7 +35,7 @@ export const BootstrapTasks: React.FC = () => {
     logger.error('[BootstrapTasks][onRouteChangeError]', errorRoute);
   };
 
-  useEffectOnce(() => {
+  useEffect(() => {
     logger.info('[initializer][loadOnRefresh]');
     events.on('routeChangeComplete', handleRouteChangeComplete);
     events.on('routeChangeError', handleRouteChangeError);
@@ -45,7 +44,8 @@ export const BootstrapTasks: React.FC = () => {
       events.off('routeChangeStart', handleRouteChangeComplete);
       events.off('routeChangeError', handleRouteChangeError);
     };
-  });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   return null;
 };

frontend/src/components/toasts/toasts.tsx

@@ -18,22 +18,22 @@
  */
 
 import { Alert, Box, Close, Flex } from 'theme-ui';
-import React from 'react';
+import React, { useEffect } from 'react';
 import { AnimatePresence, m } from 'framer-motion';
 import { ToastViewType } from 'types/dynamicViews';
-import { useEffectOnce, useIsClient } from 'usehooks-ts';
+import { useIsClient } from 'usehooks-ts';
 import { useToast } from 'components/toasts/hooks/useToast';
 
 const ToastItem: React.FC<{ item: ToastViewType }> = ({ item }) => {
   const { removeToast } = useToast();
 
-  // eslint-disable-next-line consistent-return
-  useEffectOnce(() => {
+  useEffect(() => {
     const timer = setTimeout(() => {
       removeToast(item);
     }, item.ttl);
     return () => clearTimeout(timer);
-  });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   return (
     <Box sx={{ pt: 3 }}>