Upgrade frontend dependencies and tooling

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

frontend/src/features/deposit/Deposit.module.css

@@ -2,9 +2,9 @@
   display: grid;
   height: 800px;
   padding-top: 2rem;
+  column-gap: 16px;
   grid-template-columns: repeat(5, 220px);
   overflow-y: auto;
-  column-gap: 16px;
   row-gap: 24px;
 }
 

frontend/src/features/deposit/useDeposit.ts

@@ -11,7 +11,7 @@ export const useDeposit = () => {
   const [amount, setAmount] = useState("");
   const [userQuery, setUserQuery] = useState("");
   const filteredUsers = (data?.allUsers || []).filter((user) =>
-    `${user.firstName.toLowerCase()} ${user.lastName.toLowerCase()}`.includes(userQuery.toLowerCase())
+    `${user.firstName.toLowerCase()} ${user.lastName.toLowerCase()}`.includes(userQuery.toLowerCase()),
   );
   const { showToast } = useToast();
 
@@ -30,7 +30,7 @@ export const useDeposit = () => {
     if (res.data?.createDeposit?.__typename === "CreateDepositSuccess") {
       const { transaction } = res.data?.createDeposit;
       showToast(
-        `${transaction.user.firstName} har satt inn${transaction.amount}. Ny saldo er ${transaction.user.profile?.balance}.`
+        `${transaction.user.firstName} har satt inn${transaction.amount}. Ny saldo er ${transaction.user.profile?.balance}.`,
       );
       reset();
       return;
@@ -42,7 +42,7 @@ export const useDeposit = () => {
     if (res.data?.createDeposit?.__typename === "AboveMaxSaldo") {
       showToast(
         `${res.data.createDeposit.message}. Ny saldo ville vært ${res.data.createDeposit.above} mer enn maksimalt ${res.data.createDeposit.maxSaldo}.`,
-        "danger"
+        "danger",
       );
     }
   };

frontend/src/features/log/Log.module.css

@@ -20,8 +20,8 @@
 .pagination a {
   padding: 0.4rem 0.8rem;
   border: 1px solid var(--border);
-  margin-top: 1rem;
   border-radius: 4px;
+  margin-top: 1rem;
 }
 .pagination a:hover {
   color: white;

frontend/src/features/register/ProductCard.module.css

@@ -1,51 +1,56 @@
 .product {
-  display: flex;
-  border: none;
-  background: rgb(35, 15, 41);
-  border-radius: 4px;
-  transition: background-color 0.1s ease-out, border 0.1s ease-out;
   position: relative;
+  display: flex;
   align-items: flex-start;
   padding: 1rem;
+  border: none;
+  border-radius: 4px;
+  background: rgb(35, 15, 41);
+  transition:
+    background-color 0.1s ease-out,
+    border 0.1s ease-out;
 }
 
 .product:hover,
 .active.product {
   background-color: var(--background);
-  box-shadow: 0 0 4px var(--background), 0 0 11px var(--background), 0 0 19px var(--background);
+  box-shadow:
+    0 0 4px var(--background),
+    0 0 11px var(--background),
+    0 0 19px var(--background);
 }
 
 .productText {
-  white-space: nowrap;
-  text-overflow: ellipsis;
   overflow: hidden;
-  font-size: 1.2rem;
-  text-shadow: none;
   color: white;
+  font-size: 1.2rem;
+  text-overflow: ellipsis;
+  text-shadow: none;
+  white-space: nowrap;
 }
 
 .amount {
   position: absolute;
   z-index: 1;
   top: 0;
-  bottom: 0;
   right: 0;
+  bottom: 0;
+  display: none;
   padding: 12px 12px 8px 8px;
   border-left: 1px solid transparent;
+  background-color: transparent;
+  border-bottom-right-radius: 4px;
+  border-top-right-radius: 4px;
   color: transparent;
   font-size: 2rem;
   font-weight: bold;
   line-height: 1;
-  background-color: transparent;
-  border-top-right-radius: 4px;
-  border-bottom-right-radius: 4px;
-  display: none;
 }
 
 .active .amount {
   display: block;
-  color: var(--background);
-  text-shadow: none;
   border-left-color: rgb(35, 15, 41);
   background-color: var(--sun-end);
+  color: var(--background);
+  text-shadow: none;
 }

frontend/src/features/register/ProductCard.tsx

@@ -1,7 +1,7 @@
 import clsx from "clsx";
 import React, { MouseEventHandler } from "react";
 
-import { Product } from "../../types";
+import { SchemaProduct as Product } from "../../types";
 import styles from "./ProductCard.module.css";
 
 type ProductCardProps = {

frontend/src/features/register/Register.module.css

@@ -1,7 +1,7 @@
 .userList {
   display: grid;
-  grid-template-columns: repeat(5, 220px);
   column-gap: 16px;
+  grid-template-columns: repeat(5, 220px);
   row-gap: 24px;
 }
 
@@ -11,8 +11,8 @@
 
 .productList {
   display: grid;
-  grid-template-columns: repeat(5, 220px);
   column-gap: 16px;
+  grid-template-columns: repeat(5, 220px);
   row-gap: 24px;
 }
 

frontend/src/features/register/Register.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { OrderLineInput, Product } from "../../types";
+import { OrderLineInput, SchemaProduct as Product } from "../../types";
 import { UserCard } from "../users/UserCard";
 import { ProductCard } from "./ProductCard";
 import styles from "./Register.module.css";

frontend/src/features/register/useRegister.ts

@@ -2,15 +2,15 @@ import { useMutation, useQuery } from "@apollo/client";
 import { useState } from "react";
 
 import { useToast } from "../../components/ToastProvider";
-import { AllProductsDocument, AllUsersDocument, CreateOrderDocument, OrderLineInput, Product } from "../../types";
+import { AllProductsDocument, AllUsersDocument, CreateOrderDocument, OrderLineInput, SchemaProduct } from "../../types";
+import { formatCurrency } from "../../utils/currency";
 import { activeUserFilter } from "../../utils/users";
-import {formatCurrency} from "../../utils/currency";
 
 const USER_EXTERNAL = "external";
 
-const sumTotal = (products: Omit<Product, "userCounts">[], order: OrderLineInput[], isExternal: boolean) => {
+const sumTotal = (products: Omit<SchemaProduct, "userCounts">[], order: OrderLineInput[], isExternal: boolean) => {
   const prices = order.map((orderLine: OrderLineInput) => {
-    const product = products.find((product: Omit<Product, "userCounts">) => product.id === orderLine.productId);
+    const product = products.find((product: Omit<SchemaProduct, "userCounts">) => product.id === orderLine.productId);
     if (!product) return 0;
     return orderLine.amount * (isExternal ? product.salePriceExt : product.salePriceInt);
   });
@@ -60,7 +60,7 @@ export const useRegister = () => {
     let res;
     try {
       res = await createOrderMutation();
-    } catch (e) {
+    } catch {
       showToast("Whoops");
       console.log("woops");
       return;

frontend/src/features/stats/OrderStats.tsx

@@ -2,7 +2,7 @@ import { useQuery } from "@apollo/client";
 import { Bar, BarDatum } from "@nivo/bar";
 import React from "react";
 
-import { OrderStatsDocument, OrderStatsByTime } from "../../types";
+import { OrderStatsDocument, SchemaOrderStatsByTime } from "../../types";
 import { StatsView } from "./StatsView";
 
 const days = { 1: "Mandag", 2: "Tirsdag", 3: "Onsdag", 4: "Torsdag", 5: "Fredag", 6: "Lørdag", 7: "Søndag" };
@@ -42,7 +42,7 @@ const OrderStats = () => {
     <StatsView loading={loading}>
       <h3>Ordre per time</h3>
       <OrderBar
-        data={(data?.orderStats?.hourly || []).map((stat: OrderStatsByTime) => ({
+        data={(data?.orderStats?.hourly || []).map((stat: SchemaOrderStatsByTime) => ({
           id: `${stat.period.toString().padStart(2, "0")}:00`,
           label: stat.period,
           value: stat.count,
@@ -50,7 +50,7 @@ const OrderStats = () => {
       />
       <h3>Ordre per ukedag</h3>
       <OrderBar
-        data={(data?.orderStats?.daily || []).map((stat: OrderStatsByTime) => ({
+        data={(data?.orderStats?.daily || []).map((stat: SchemaOrderStatsByTime) => ({
           /* @ts-expect-error Here, stat.period can only be a key in days range. */
           id: days[stat.period],
           label: stat.period,
@@ -59,7 +59,7 @@ const OrderStats = () => {
       />
       <h3>Ordre per måned</h3>
       <OrderBar
-        data={(data?.orderStats?.monthly || []).map((stat: OrderStatsByTime) => ({
+        data={(data?.orderStats?.monthly || []).map((stat: SchemaOrderStatsByTime) => ({
           /* @ts-expect-error Here, stat.period can only be a key in months range. */
           id: months[stat.period],
           label: stat.period,
@@ -68,7 +68,7 @@ const OrderStats = () => {
       />
       <h3>Ordre per år</h3>
       <OrderBar
-        data={(data?.orderStats?.yearly || []).map((stat: OrderStatsByTime) => ({
+        data={(data?.orderStats?.yearly || []).map((stat: SchemaOrderStatsByTime) => ({
           id: stat.period,
           label: stat.period,
           value: stat.count,

frontend/src/features/stats/Stats.tsx

@@ -8,14 +8,13 @@ import { StatsView } from "./StatsView";
 const Stats = () => {
   const { data, loading } = useQuery(ProductStatsDocument);
 
-  const series: any[] = [];
-  (data?.productStats || [])?.forEach(({ productName: id, data }) => {
-    const lineData: any[] = [];
-    data.forEach((point, index) => {
-      lineData.push({ x: point.x, y: point.y + (lineData?.[index - 1]?.y || 0) });
-    });
-    series.push({ id, data: lineData });
-  });
+  const series = (data?.productStats || []).map(({ productName: id, data }) => ({
+    id,
+    data: data.map((point, index, points) => ({
+      x: point.x,
+      y: point.y + (points[index - 1]?.y || 0),
+    })),
+  }));
 
   return (
     <StatsView loading={loading}>
@@ -59,8 +58,8 @@ const Stats = () => {
               <strong>{point.data.xFormatted}</strong>
             </div>
             <div>
-              <span style={{ background: point.serieColor, width: 13, height: 13, display: "inline-block" }} />{" "}
-              <strong>{point.data.yFormatted}</strong> {point.serieId}
+              <span style={{ background: point.seriesColor, width: 13, height: 13, display: "inline-block" }} />{" "}
+              <strong>{String(point.data.yFormatted)}</strong> {point.seriesId}
             </div>
           </div>
         )}

frontend/src/features/users/UserCard.module.css

@@ -1,14 +1,16 @@
 .user {
   display: flex;
+  max-height: 82px;
   align-items: center;
   padding: 0;
   border: none;
+  border-radius: 4px;
   border-left: 4px solid transparent;
   background: rgb(35, 15, 41);
-  border-radius: 4px;
   color: var(--text);
-  transition: background-color 0.1s ease-out, border 0.1s ease-out;
-  max-height: 82px;
+  transition:
+    background-color 0.1s ease-out,
+    border 0.1s ease-out;
 }
 
 .user:hover {
@@ -17,16 +19,19 @@
 .user:hover,
 .active.user {
   background-color: var(--background);
-  box-shadow: 0 0 4px var(--background), 0 0 11px var(--background), 0 0 19px var(--background);
+  box-shadow:
+    0 0 4px var(--background),
+    0 0 11px var(--background),
+    0 0 19px var(--background);
 }
 .active.user {
-  border-left: 4px solid var(--sun)
+  border-left: 4px solid var(--sun);
 }
 
 .avatar {
-  margin-left: 1rem;
   width: 50px;
   height: 50px;
+  margin-left: 1rem;
   clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
 }
 .avatarWrap {
@@ -35,10 +40,10 @@
 }
 
 .noAvatar {
-  margin-left: 1rem;
   display: block;
   width: 50px;
   height: 50px;
+  margin-left: 1rem;
   background-color: black;
   clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
   content: "";
@@ -46,16 +51,16 @@
 
 .meta {
   display: flex;
-  padding: 1rem;
+  overflow: hidden;
   flex-direction: column;
   align-items: flex-start;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
+  padding: 1rem;
   font-size: 1.2rem;
+  text-overflow: ellipsis;
   text-shadow: none;
+  white-space: nowrap;
 }
 
 .balance {
-  color: var(--sun)
-}
+  color: var(--sun);
+}

frontend/src/features/users/UserCard.tsx

@@ -2,8 +2,8 @@ import clsx from "clsx";
 import React, { MouseEventHandler } from "react";
 
 import { AllUsersQuery } from "../../types";
+import { formatCurrency } from "../../utils/currency";
 import styles from "./UserCard.module.css";
-import {formatCurrency} from "../../utils/currency";
 
 type UserCardProps = {
   user: AllUsersQuery["allUsers"][0] | null;

frontend/src/features/users/UserDetail.tsx

@@ -4,7 +4,7 @@ import React from "react";
 import { useParams } from "react-router-dom";
 
 import { GQLError } from "../../components/GQLError";
-import { User, UserDetailDocument, UserProfile } from "../../types";
+import { SchemaUser as User, UserDetailDocument, SchemaUserProfile as UserProfile } from "../../types";
 import { formatMonth, formatTime } from "../../utils/time";
 import styles from "./UserDetail.module.css";
 
@@ -18,15 +18,13 @@ const UserDetail = () => {
 
   const user = data?.user as User;
   const profile = user?.profile as UserProfile;
-  // FIXME: types
-  const series: any[] = [];
-  (profile?.productOrderStats || [])?.forEach(({ productName: id, data }) => {
-    const lineData: any[] = [];
-    data.forEach((point, index) => {
-      lineData.push({ x: point.x, y: point.y + (lineData?.[index - 1]?.y || 0) });
-    });
-    series.push({ id, data: lineData });
-  });
+  const series = (profile?.productOrderStats || []).map(({ productName: id, data }) => ({
+    id,
+    data: data.map((point, index, points) => ({
+      x: point.x,
+      y: point.y + (points[index - 1]?.y || 0),
+    })),
+  }));
   return (
     <div className={styles.userDetail}>
       <div>
@@ -101,8 +99,8 @@ const UserDetail = () => {
                 <strong>{point.data.xFormatted}</strong>
               </div>
               <div>
-                <span style={{ background: point.serieColor, width: 13, height: 13, display: "inline-block" }} />{" "}
-                <strong>{point.data.yFormatted}</strong> {point.serieId}
+                <span style={{ background: point.seriesColor, width: 13, height: 13, display: "inline-block" }} />{" "}
+                <strong>{String(point.data.yFormatted)}</strong> {point.seriesId}
               </div>
             </div>
           )}