Add user account settings page with profile management

- Add /account route with profile form (firstName, lastName, address, IBAN) - Create UserProfile type and MongoDB users collection - Implement server actions for getting and updating user profile - Add Account Circle icon to PageHeader linking to /account - Install Material UI icons for account icon - Add form input disabling during save with loading spinner - Add cancel button to discard changes and return home - Add English and Croatian translations for account page - Update locale names with flag emojis in language selector 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-17 18:37:59 +01:00
parent e5ceb59934
commit 80f4c92755
10 changed files with 941 additions and 35 deletions
--- a/app/[locale]/account/page.tsx
+++ b/app/[locale]/account/page.tsx
@@ -0,0 +1,37 @@
+import { FC, Suspense } from 'react';
+import { Main } from '@/app/ui/Main';
+import { AccountForm, AccountFormSkeleton } from '@/app/ui/AccountForm';
+import { getUserProfile } from '@/app/lib/actions/userProfileActions';
+import { useTranslations } from 'next-intl';
+import { getTranslations } from 'next-intl/server';
+
+const AccountPage: FC = async () => {
+    const profile = await getUserProfile();
+    const t = await getTranslations('account-page');
+
+    return (
+        <Main>
+            <div className="flex flex-col items-center">
+                <h1 className="text-2xl font-bold mb-4">{t('heading')}</h1>
+                <AccountForm profile={profile} />
+            </div>
+        </Main>
+    );
+};
+
+const Page: FC = () => {
+    return (
+        <Suspense fallback={
+            <Main>
+                <div className="flex flex-col items-center">
+                    <div className="h-8 w-48 skeleton mb-4"></div>
+                    <AccountFormSkeleton />
+                </div>
+            </Main>
+        }>
+            <AccountPage />
+        </Suspense>
+    );
+};
+
+export default Page;
--- a/app/i18n.ts
+++ b/app/i18n.ts
@@ -6,8 +6,8 @@ import { Formats, TranslationValues } from 'next-intl';
 export const locales = ['en', 'hr'];

 export const localeNames:Record<string,string> = {
-  en: 'English',
-  hr: 'Hrvatski'
+  en: '🇬🇧 En',
+  hr: '🇭🇷 Hr'
 };

 export const defaultLocale = 'hr';
--- a/app/lib/actions/userProfileActions.ts
+++ b/app/lib/actions/userProfileActions.ts
@@ -0,0 +1,100 @@
+'use server';
+
+import { z } from 'zod';
+import { getDbClient } from '../dbClient';
+import { UserProfile } from '../db-types';
+import { withUser } from '@/app/lib/auth';
+import { AuthenticatedUser } from '../types/next-auth';
+import { unstable_noStore as noStore } from 'next/cache';
+import { IntlTemplateFn } from '@/app/i18n';
+import { getTranslations } from "next-intl/server";
+import { revalidatePath } from 'next/cache';
+
+export type State = {
+    errors?: {
+        firstName?: string[];
+        lastName?: string[];
+        address?: string[];
+        iban?: string[];
+    };
+    message?: string | null;
+    success?: boolean;
+};
+
+/**
+ * Schema for validating user profile form fields
+ */
+const FormSchema = (t: IntlTemplateFn) => z.object({
+    firstName: z.string().optional(),
+    lastName: z.string().optional(),
+    address: z.string().optional(),
+    iban: z.string().optional(),
+});
+
+/**
+ * Get user profile
+ */
+export const getUserProfile = withUser(async (user: AuthenticatedUser) => {
+    noStore();
+
+    const dbClient = await getDbClient();
+    const { id: userId } = user;
+
+    const profile = await dbClient.collection<UserProfile>("users")
+        .findOne({ userId });
+
+    return profile;
+});
+
+/**
+ * Update user profile
+ */
+export const updateUserProfile = withUser(async (user: AuthenticatedUser, prevState: State, formData: FormData) => {
+    noStore();
+
+    const t = await getTranslations("account-form.validation");
+
+    const validatedFields = FormSchema(t).safeParse({
+        firstName: formData.get('firstName') || undefined,
+        lastName: formData.get('lastName') || undefined,
+        address: formData.get('address') || undefined,
+        iban: formData.get('iban') || undefined,
+    });
+
+    // If form validation fails, return errors early. Otherwise, continue...
+    if (!validatedFields.success) {
+        return {
+            errors: validatedFields.error.flatten().fieldErrors,
+            message: "Validation failed",
+            success: false,
+        };
+    }
+
+    const { firstName, lastName, address, iban } = validatedFields.data;
+
+    // Update the user profile in MongoDB
+    const dbClient = await getDbClient();
+    const { id: userId } = user;
+
+    const userProfile: UserProfile = {
+        userId,
+        firstName: firstName || null,
+        lastName: lastName || null,
+        address: address || null,
+        iban: iban || null,
+    };
+
+    await dbClient.collection<UserProfile>("users")
+        .updateOne(
+            { userId },
+            { $set: userProfile },
+            { upsert: true }
+        );
+
+    revalidatePath('/account');
+
+    return {
+        message: null,
+        success: true,
+    };
+});
--- a/app/lib/db-types.ts
+++ b/app/lib/db-types.ts
@@ -14,6 +14,20 @@ export interface YearMonth {
    month: number;
 };

+/** User profile data */
+export interface UserProfile {
+    /** user's ID */
+    userId: string;
+    /** first name */
+    firstName?: string | null;
+    /** last name */
+    lastName?: string | null;
+    /** address */
+    address?: string | null;
+    /** IBAN */
+    iban?: string | null;
+};
+
 /** bill object in the form returned by MongoDB */
 export interface BillingLocation {
    _id: string;
--- a/app/ui/AccountForm.tsx
+++ b/app/ui/AccountForm.tsx
@@ -0,0 +1,193 @@
+"use client";
+
+import { FC, useEffect } from "react";
+import { UserProfile } from "../lib/db-types";
+import { updateUserProfile } from "../lib/actions/userProfileActions";
+import { useFormState, useFormStatus } from "react-dom";
+import { useLocale, useTranslations } from "next-intl";
+import Link from "next/link";
+
+export type AccountFormProps = {
+    profile: UserProfile | null;
+}
+
+type FormFieldsProps = {
+    profile: UserProfile | null;
+    errors: any;
+    success: boolean;
+    message: string | null;
+}
+
+const FormFields: FC<FormFieldsProps> = ({ profile, errors, success, message }) => {
+    const { pending } = useFormStatus();
+    const t = useTranslations("account-form");
+    const locale = useLocale();
+
+    return (
+        <>
+            <div className="form-control w-full">
+                <label className="label">
+                    <span className="label-text">{t("first-name-label")}</span>
+                </label>
+                <input
+                    id="firstName"
+                    name="firstName"
+                    type="text"
+                    placeholder={t("first-name-placeholder")}
+                    className="input input-bordered w-full"
+                    defaultValue={profile?.firstName ?? ""}
+                    disabled={pending}
+                />
+                <div id="firstName-error" aria-live="polite" aria-atomic="true">
+                    {errors?.firstName &&
+                        errors.firstName.map((error: string) => (
+                            <p className="mt-2 text-sm text-red-500" key={error}>
+                                {error}
+                            </p>
+                        ))}
+                </div>
+            </div>
+
+            <div className="form-control w-full">
+                <label className="label">
+                    <span className="label-text">{t("last-name-label")}</span>
+                </label>
+                <input
+                    id="lastName"
+                    name="lastName"
+                    type="text"
+                    placeholder={t("last-name-placeholder")}
+                    className="input input-bordered w-full"
+                    defaultValue={profile?.lastName ?? ""}
+                    disabled={pending}
+                />
+                <div id="lastName-error" aria-live="polite" aria-atomic="true">
+                    {errors?.lastName &&
+                        errors.lastName.map((error: string) => (
+                            <p className="mt-2 text-sm text-red-500" key={error}>
+                                {error}
+                            </p>
+                        ))}
+                </div>
+            </div>
+
+            <div className="form-control w-full">
+                <label className="label">
+                    <span className="label-text">{t("address-label")}</span>
+                </label>
+                <textarea
+                    id="address"
+                    name="address"
+                    className="textarea textarea-bordered w-full"
+                    placeholder={t("address-placeholder")}
+                    defaultValue={profile?.address ?? ""}
+                    disabled={pending}
+                ></textarea>
+                <div id="address-error" aria-live="polite" aria-atomic="true">
+                    {errors?.address &&
+                        errors.address.map((error: string) => (
+                            <p className="mt-2 text-sm text-red-500" key={error}>
+                                {error}
+                            </p>
+                        ))}
+                </div>
+            </div>
+
+            <div className="form-control w-full">
+                <label className="label">
+                    <span className="label-text">{t("iban-label")}</span>
+                </label>
+                <input
+                    id="iban"
+                    name="iban"
+                    type="text"
+                    placeholder={t("iban-placeholder")}
+                    className="input input-bordered w-full"
+                    defaultValue={profile?.iban ?? ""}
+                    disabled={pending}
+                />
+                <div id="iban-error" aria-live="polite" aria-atomic="true">
+                    {errors?.iban &&
+                        errors.iban.map((error: string) => (
+                            <p className="mt-2 text-sm text-red-500" key={error}>
+                                {error}
+                            </p>
+                        ))}
+                </div>
+            </div>
+
+            <div id="general-error" aria-live="polite" aria-atomic="true">
+                {message && !success && (
+                    <p className="mt-2 text-sm text-red-500">
+                        {message}
+                    </p>
+                )}
+                {success && (
+                    <p className="mt-2 text-sm text-success">
+                        {t("success-message")}
+                    </p>
+                )}
+            </div>
+
+            <div className="pt-4">
+                <button className="btn btn-primary w-[5.5em]" disabled={pending}>
+                    {pending ? (
+                        <span className="loading loading-spinner loading-sm"></span>
+                    ) : (
+                        t("save-button")
+                    )}
+                </button>
+                <Link className={`btn btn-neutral w-[5.5em] ml-3 ${pending ? "btn-disabled" : ""}`} href={`/${locale}`}>
+                    {t("cancel-button")}
+                </Link>
+            </div>
+        </>
+    );
+};
+
+export const AccountForm: FC<AccountFormProps> = ({ profile }) => {
+    const initialState = { message: null, errors: {}, success: false };
+    const [state, dispatch] = useFormState(updateUserProfile, initialState);
+    const t = useTranslations("account-form");
+
+    useEffect(() => {
+        if (state.success) {
+            // Show success message or toast notification
+            // For now, we'll just log it
+            console.log("Profile updated successfully");
+        }
+    }, [state.success]);
+
+    return (
+        <div className="card card-compact card-bordered min-w-[20em] max-w-[90em] bg-base-100 shadow-s my-1">
+            <div className="card-body">
+                <h2 className="card-title">{t("title")}</h2>
+                <form action={dispatch}>
+                    <FormFields
+                        profile={profile}
+                        errors={state.errors}
+                        success={state.success ?? false}
+                        message={state.message ?? null}
+                    />
+                </form>
+            </div>
+        </div>
+    );
+};
+
+export const AccountFormSkeleton: FC = () => {
+    return (
+        <div className="card card-compact card-bordered min-w-[20em] max-w-[90em] bg-base-100 shadow-s my-1">
+            <div className="card-body">
+                <div className="h-8 w-32 skeleton mb-4"></div>
+                <div className="input w-full skeleton"></div>
+                <div className="input w-full skeleton mt-4"></div>
+                <div className="textarea w-full h-24 skeleton mt-4"></div>
+                <div className="input w-full skeleton mt-4"></div>
+                <div className="pt-4">
+                    <div className="btn skeleton w-24"></div>
+                </div>
+            </div>
+        </div>
+    );
+};
--- a/app/ui/PageHeader.tsx
+++ b/app/ui/PageHeader.tsx
@@ -1,10 +1,14 @@
 import Image from "next/image";
 import Link from "next/link";
 import { SelectLanguage } from "./SelectLanguage";
+import AccountCircleIcon from "@mui/icons-material/AccountCircle";

 export const PageHeader = () =>
    <div className="navbar bg-base-100 mb-6">
        <Link className="btn btn-ghost text-xl" href="/"><Image src="/icon3.png" alt="logo" width={48} height={48} /> Režije</Link>
        <span className="grow">&nbsp;</span>
        <SelectLanguage />
+        <Link href="/account/" className="btn btn-ghost btn-circle">
+            <AccountCircleIcon className="w-6 h-6" />
+        </Link>
    </div>
--- a/messages/en.json
+++ b/messages/en.json
@@ -130,5 +130,23 @@
    "validation": {
      "location-name-required": "Relaestate name is required"
    }
+  },
+  "account-page": {
+    "heading": "Account Settings"
+  },
+  "account-form": {
+    "title": "Profile Information",
+    "first-name-label": "First Name",
+    "first-name-placeholder": "Enter your first name",
+    "last-name-label": "Last Name",
+    "last-name-placeholder": "Enter your last name",
+    "address-label": "Address",
+    "address-placeholder": "Enter your address",
+    "iban-label": "IBAN",
+    "iban-placeholder": "Enter your IBAN",
+    "save-button": "Save",
+    "cancel-button": "Cancel",
+    "success-message": "Profile updated successfully",
+    "validation": {}
  }
 }
--- a/messages/hr.json
+++ b/messages/hr.json
@@ -129,5 +129,23 @@
    "validation": {
      "location-name-required": "Ime nekretnine je obavezno"
    }
+  },
+  "account-page": {
+    "heading": "Postavke Računa"
+  },
+  "account-form": {
+    "title": "Podaci o profilu",
+    "first-name-label": "Ime",
+    "first-name-placeholder": "Unesite svoje ime",
+    "last-name-label": "Prezime",
+    "last-name-placeholder": "Unesite svoje prezime",
+    "address-label": "Adresa",
+    "address-placeholder": "Unesite svoju adresu",
+    "iban-label": "IBAN",
+    "iban-placeholder": "Unesite svoj IBAN",
+    "save-button": "Spremi",
+    "cancel-button": "Odbaci",
+    "success-message": "Profil uspješno ažuriran",
+    "validation": {}
  }
 }
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,10 +5,13 @@
  "requires": true,
  "packages": {
    "": {
-      "name": "evidencija-rezija",
      "version": "1.59.0",
      "dependencies": {
+        "@emotion/react": "^11.14.0",
+        "@emotion/styled": "^11.14.1",
        "@heroicons/react": "^2.0.18",
+        "@mui/icons-material": "^7.3.5",
+        "@mui/material": "^7.3.5",
        "@tailwindcss/typography": "^0.5.10",
        "@types/node": "20.5.7",
        "@zxing/browser": "^0.1.4",
@@ -117,7 +120,6 @@
      "version": "7.27.1",
      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.27.1.tgz",
      "integrity": "sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "@babel/helper-validator-identifier": "^7.27.1",
@@ -255,7 +257,6 @@
      "version": "7.22.15",
      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.22.15.tgz",
      "integrity": "sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==",
-      "dev": true,
      "dependencies": {
        "@babel/types": "^7.22.15"
      },
@@ -310,7 +311,6 @@
      "version": "7.27.1",
      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
      "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
-      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">=6.9.0"
@@ -320,7 +320,6 @@
      "version": "7.28.5",
      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz",
      "integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==",
-      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">=6.9.0"
@@ -369,7 +368,6 @@
      "version": "7.28.4",
      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.4.tgz",
      "integrity": "sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==",
-      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">=6.9.0"
@@ -415,7 +413,6 @@
      "version": "7.28.5",
      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.5.tgz",
      "integrity": "sha512-qQ5m48eI/MFLQ5PxQj4PFaprjyCTLI37ElWMmNs0K8Lk3dVeOdNpB3ks8jc7yM5CDmVC73eMVk/trk3fgmrUpA==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "@babel/helper-string-parser": "^7.27.1",
@@ -425,6 +422,172 @@
        "node": ">=6.9.0"
      }
    },
+    "node_modules/@emotion/babel-plugin": {
+      "version": "11.13.5",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.13.5.tgz",
+      "integrity": "sha512-pxHCpT2ex+0q+HH91/zsdHkw/lXd468DIN2zvfvLtPKLLMo6gQj7oLObq8PhkrxOZb/gGCq03S3Z7PDhS8pduQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.16.7",
+        "@babel/runtime": "^7.18.3",
+        "@emotion/hash": "^0.9.2",
+        "@emotion/memoize": "^0.9.0",
+        "@emotion/serialize": "^1.3.3",
+        "babel-plugin-macros": "^3.1.0",
+        "convert-source-map": "^1.5.0",
+        "escape-string-regexp": "^4.0.0",
+        "find-root": "^1.1.0",
+        "source-map": "^0.5.7",
+        "stylis": "4.2.0"
+      }
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/convert-source-map": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
+      "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@emotion/cache": {
+      "version": "11.14.0",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.14.0.tgz",
+      "integrity": "sha512-L/B1lc/TViYk4DcpGxtAVbx0ZyiKM5ktoIyafGkH6zg/tj+mA+NE//aPYKG0k8kCHSHVJrpLpcAlOBEXQ3SavA==",
+      "license": "MIT",
+      "dependencies": {
+        "@emotion/memoize": "^0.9.0",
+        "@emotion/sheet": "^1.4.0",
+        "@emotion/utils": "^1.4.2",
+        "@emotion/weak-memoize": "^0.4.0",
+        "stylis": "4.2.0"
+      }
+    },
+    "node_modules/@emotion/hash": {
+      "version": "0.9.2",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.2.tgz",
+      "integrity": "sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/is-prop-valid": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.4.0.tgz",
+      "integrity": "sha512-QgD4fyscGcbbKwJmqNvUMSE02OsHUa+lAWKdEUIJKgqe5IwRSKd7+KhibEWdaKwgjLj0DRSHA9biAIqGBk05lw==",
+      "license": "MIT",
+      "dependencies": {
+        "@emotion/memoize": "^0.9.0"
+      }
+    },
+    "node_modules/@emotion/memoize": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.9.0.tgz",
+      "integrity": "sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/react": {
+      "version": "11.14.0",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.14.0.tgz",
+      "integrity": "sha512-O000MLDBDdk/EohJPFUqvnp4qnHeYkVP5B0xEG0D/L7cOKP9kefu2DXn8dj74cQfsEzUqh+sr1RzFqiL1o+PpA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.13.5",
+        "@emotion/cache": "^11.14.0",
+        "@emotion/serialize": "^1.3.3",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.2.0",
+        "@emotion/utils": "^1.4.2",
+        "@emotion/weak-memoize": "^0.4.0",
+        "hoist-non-react-statics": "^3.3.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@emotion/serialize": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.3.3.tgz",
+      "integrity": "sha512-EISGqt7sSNWHGI76hC7x1CksiXPahbxEOrC5RjmFRJTqLyEK9/9hZvBbiYn70dw4wuwMKiEMCUlR6ZXTSWQqxA==",
+      "license": "MIT",
+      "dependencies": {
+        "@emotion/hash": "^0.9.2",
+        "@emotion/memoize": "^0.9.0",
+        "@emotion/unitless": "^0.10.0",
+        "@emotion/utils": "^1.4.2",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@emotion/sheet": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.4.0.tgz",
+      "integrity": "sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/styled": {
+      "version": "11.14.1",
+      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.14.1.tgz",
+      "integrity": "sha512-qEEJt42DuToa3gurlH4Qqc1kVpNq8wO8cJtDzU46TjlzWjDlsVyevtYCRijVq3SrHsROS+gVQ8Fnea108GnKzw==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.13.5",
+        "@emotion/is-prop-valid": "^1.3.0",
+        "@emotion/serialize": "^1.3.3",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.2.0",
+        "@emotion/utils": "^1.4.2"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.0.0-rc.0",
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@emotion/unitless": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.10.0.tgz",
+      "integrity": "sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/use-insertion-effect-with-fallbacks": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.2.0.tgz",
+      "integrity": "sha512-yJMtVdH59sxi/aVJBpk9FQq+OR8ll5GT8oWd57UpeaKEVGab41JWaCFA7FRLoMLloOZF/c/wsPoe+bfGmRKgDg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@emotion/utils": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.4.2.tgz",
+      "integrity": "sha512-3vLclRofFziIa3J2wDh9jjbkUz9qk5Vi3IZ/FSTKViB0k+ef0fPV7dYrUIugbgupYDx7v9ud/SjrtEP8Y4xLoA==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/weak-memoize": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.4.0.tgz",
+      "integrity": "sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==",
+      "license": "MIT"
+    },
    "node_modules/@eslint-community/eslint-utils": {
      "version": "4.4.0",
      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@@ -865,6 +1028,252 @@
        "sparse-bitfield": "^3.0.3"
      }
    },
+    "node_modules/@mui/core-downloads-tracker": {
+      "version": "7.3.5",
+      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-7.3.5.tgz",
+      "integrity": "sha512-kOLwlcDPnVz2QMhiBv0OQ8le8hTCqKM9cRXlfVPL91l3RGeOsxrIhNRsUt3Xb8wb+pTVUolW+JXKym93vRKxCw==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      }
+    },
+    "node_modules/@mui/icons-material": {
+      "version": "7.3.5",
+      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-7.3.5.tgz",
+      "integrity": "sha512-LciL1GLMZ+VlzyHAALSVAR22t8IST4LCXmljcUSx2NOutgO2XnxdIp8ilFbeNf9wpo0iUFbAuoQcB7h+HHIf3A==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.4"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@mui/material": "^7.3.5",
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/material": {
+      "version": "7.3.5",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-7.3.5.tgz",
+      "integrity": "sha512-8VVxFmp1GIm9PpmnQoCoYo0UWHoOrdA57tDL62vkpzEgvb/d71Wsbv4FRg7r1Gyx7PuSo0tflH34cdl/NvfHNQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/runtime": "^7.28.4",
+        "@mui/core-downloads-tracker": "^7.3.5",
+        "@mui/system": "^7.3.5",
+        "@mui/types": "^7.4.8",
+        "@mui/utils": "^7.3.5",
+        "@popperjs/core": "^2.11.8",
+        "@types/react-transition-group": "^4.4.12",
+        "clsx": "^2.1.1",
+        "csstype": "^3.1.3",
+        "prop-types": "^15.8.1",
+        "react-is": "^19.2.0",
+        "react-transition-group": "^4.4.5"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.5.0",
+        "@emotion/styled": "^11.3.0",
+        "@mui/material-pigment-css": "^7.3.5",
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "@mui/material-pigment-css": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/material/node_modules/react-is": {
+      "version": "19.2.0",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.2.0.tgz",
+      "integrity": "sha512-x3Ax3kNSMIIkyVYhWPyO09bu0uttcAIoecO/um/rKGQ4EltYWVYtyiGkS/3xMynrbVQdS69Jhlv8FXUEZehlzA==",
+      "license": "MIT"
+    },
+    "node_modules/@mui/private-theming": {
+      "version": "7.3.5",
+      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-7.3.5.tgz",
+      "integrity": "sha512-cTx584W2qrLonwhZLbEN7P5pAUu0nZblg8cLBlTrZQ4sIiw8Fbvg7GvuphQaSHxPxrCpa7FDwJKtXdbl2TSmrA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.4",
+        "@mui/utils": "^7.3.5",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/styled-engine": {
+      "version": "7.3.5",
+      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-7.3.5.tgz",
+      "integrity": "sha512-zbsZ0uYYPndFCCPp2+V3RLcAN6+fv4C8pdwRx6OS3BwDkRCN8WBehqks7hWyF3vj1kdQLIWrpdv/5Y0jHRxYXQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.4",
+        "@emotion/cache": "^11.14.0",
+        "@emotion/serialize": "^1.3.3",
+        "@emotion/sheet": "^1.4.0",
+        "csstype": "^3.1.3",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.4.1",
+        "@emotion/styled": "^11.3.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/system": {
+      "version": "7.3.5",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-7.3.5.tgz",
+      "integrity": "sha512-yPaf5+gY3v80HNkJcPi6WT+r9ebeM4eJzrREXPxMt7pNTV/1eahyODO4fbH3Qvd8irNxDFYn5RQ3idHW55rA6g==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.4",
+        "@mui/private-theming": "^7.3.5",
+        "@mui/styled-engine": "^7.3.5",
+        "@mui/types": "^7.4.8",
+        "@mui/utils": "^7.3.5",
+        "clsx": "^2.1.1",
+        "csstype": "^3.1.3",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.5.0",
+        "@emotion/styled": "^11.3.0",
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/types": {
+      "version": "7.4.8",
+      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.4.8.tgz",
+      "integrity": "sha512-ZNXLBjkPV6ftLCmmRCafak3XmSn8YV0tKE/ZOhzKys7TZXUiE0mZxlH8zKDo6j6TTUaDnuij68gIG+0Ucm7Xhw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.4"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/utils": {
+      "version": "7.3.5",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-7.3.5.tgz",
+      "integrity": "sha512-jisvFsEC3sgjUjcPnR4mYfhzjCDIudttSGSbe1o/IXFNu0kZuR+7vqQI0jg8qtcVZBHWrwTfvAZj9MNMumcq1g==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.4",
+        "@mui/types": "^7.4.8",
+        "@types/prop-types": "^15.7.15",
+        "clsx": "^2.1.1",
+        "prop-types": "^15.8.1",
+        "react-is": "^19.2.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/utils/node_modules/react-is": {
+      "version": "19.2.0",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.2.0.tgz",
+      "integrity": "sha512-x3Ax3kNSMIIkyVYhWPyO09bu0uttcAIoecO/um/rKGQ4EltYWVYtyiGkS/3xMynrbVQdS69Jhlv8FXUEZehlzA==",
+      "license": "MIT"
+    },
    "node_modules/@napi-rs/canvas": {
      "version": "0.1.82",
      "resolved": "https://registry.npmjs.org/@napi-rs/canvas/-/canvas-0.1.82.tgz",
@@ -1281,6 +1690,16 @@
        "url": "https://opencollective.com/unts"
      }
    },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
    "node_modules/@rushstack/eslint-patch": {
      "version": "1.7.2",
      "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.7.2.tgz",
@@ -1349,6 +1768,12 @@
      "integrity": "sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==",
      "dev": true
    },
+    "node_modules/@types/parse-json": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz",
+      "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==",
+      "license": "MIT"
+    },
    "node_modules/@types/pg": {
      "version": "8.11.0",
      "resolved": "https://registry.npmjs.org/@types/pg/-/pg-8.11.0.tgz",
@@ -1361,16 +1786,16 @@
      }
    },
    "node_modules/@types/prop-types": {
-      "version": "15.7.11",
-      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.11.tgz",
-      "integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==",
-      "dev": true
+      "version": "15.7.15",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz",
+      "integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==",
+      "license": "MIT"
    },
    "node_modules/@types/react": {
      "version": "18.2.21",
      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.21.tgz",
      "integrity": "sha512-neFKG/sBAwGxHgXiIxnbm3/AAVQ/cMRS93hvBpg8xYRbeQSPVABp9U2bRnPf0iI4+Ucdv3plSxKK+3CW2ENJxA==",
-      "dev": true,
+      "peer": true,
      "dependencies": {
        "@types/prop-types": "*",
        "@types/scheduler": "*",
@@ -1386,11 +1811,19 @@
        "@types/react": "*"
      }
    },
+    "node_modules/@types/react-transition-group": {
+      "version": "4.4.12",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.12.tgz",
+      "integrity": "sha512-8TV6R3h2j7a91c+1DXdJi3Syo69zzIZbz7Lg5tORM5LEJG7X/E6a1V3drRyBRZq7/utz7A+c4OgYLiLcYGHG6w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*"
+      }
+    },
    "node_modules/@types/scheduler": {
      "version": "0.16.8",
      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz",
-      "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==",
-      "dev": true
+      "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A=="
    },
    "node_modules/@types/semver": {
      "version": "7.5.7",
@@ -2151,6 +2584,21 @@
        "dequal": "^2.0.3"
      }
    },
+    "node_modules/babel-plugin-macros": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz",
+      "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "cosmiconfig": "^7.0.0",
+        "resolve": "^1.19.0"
+      },
+      "engines": {
+        "node": ">=10",
+        "npm": ">=6"
+      }
+    },
    "node_modules/balanced-match": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -2292,7 +2740,6 @@
      "version": "3.1.0",
      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
-      "dev": true,
      "engines": {
        "node": ">=6"
      }
@@ -2399,9 +2846,10 @@
      "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="
    },
    "node_modules/clsx": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.0.tgz",
-      "integrity": "sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
      "engines": {
        "node": ">=6"
      }
@@ -2438,6 +2886,31 @@
      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
      "dev": true
    },
+    "node_modules/cosmiconfig": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
+      "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/parse-json": "^4.0.0",
+        "import-fresh": "^3.2.1",
+        "parse-json": "^5.0.0",
+        "path-type": "^4.0.0",
+        "yaml": "^1.10.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/cosmiconfig/node_modules/yaml": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
    "node_modules/cross-spawn": {
      "version": "7.0.6",
      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -2475,8 +2948,7 @@
    "node_modules/csstype": {
      "version": "3.1.3",
      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
-      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "dev": true
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
    },
    "node_modules/culori": {
      "version": "3.3.0",
@@ -2643,6 +3115,16 @@
        "node": ">=6.0.0"
      }
    },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
    "node_modules/dotenv": {
      "version": "16.4.4",
      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.4.tgz",
@@ -2687,7 +3169,6 @@
      "version": "1.3.2",
      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
      "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
-      "dev": true,
      "dependencies": {
        "is-arrayish": "^0.2.1"
      }
@@ -4052,6 +4533,12 @@
        "node": ">=8"
      }
    },
+    "node_modules/find-root": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==",
+      "license": "MIT"
+    },
    "node_modules/find-up": {
      "version": "5.0.0",
      "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
@@ -4499,6 +4986,15 @@
        "node": ">= 0.4"
      }
    },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
    "node_modules/hosted-git-info": {
      "version": "2.8.9",
      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
@@ -4530,7 +5026,6 @@
      "version": "3.3.0",
      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
      "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
-      "dev": true,
      "dependencies": {
        "parent-module": "^1.0.0",
        "resolve-from": "^4.0.0"
@@ -4635,8 +5130,7 @@
    "node_modules/is-arrayish": {
      "version": "0.2.1",
      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
-      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
-      "dev": true
+      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg=="
    },
    "node_modules/is-async-function": {
      "version": "2.0.0",
@@ -5089,8 +5583,7 @@
    "node_modules/json-parse-even-better-errors": {
      "version": "2.3.1",
      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
-      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
-      "dev": true
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w=="
    },
    "node_modules/json-schema-traverse": {
      "version": "0.4.1",
@@ -5882,7 +6375,6 @@
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
-      "dev": true,
      "dependencies": {
        "callsites": "^3.0.0"
      },
@@ -5894,7 +6386,6 @@
      "version": "5.2.0",
      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
      "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
-      "dev": true,
      "dependencies": {
        "@babel/code-frame": "^7.0.0",
        "error-ex": "^1.3.1",
@@ -5965,7 +6456,6 @@
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
-      "dev": true,
      "engines": {
        "node": ">=8"
      }
@@ -6508,7 +6998,6 @@
      "version": "15.8.1",
      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "dev": true,
      "dependencies": {
        "loose-envify": "^1.4.0",
        "object-assign": "^4.1.1",
@@ -6581,8 +7070,7 @@
    "node_modules/react-is": {
      "version": "16.13.1",
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "dev": true
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
    },
    "node_modules/react-toastify": {
      "version": "10.0.6",
@@ -6596,6 +7084,22 @@
        "react-dom": ">=18"
      }
    },
+    "node_modules/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
+      }
+    },
    "node_modules/read-cache": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -6810,7 +7314,6 @@
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
-      "dev": true,
      "engines": {
        "node": ">=4"
      }
@@ -7127,6 +7630,15 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/source-map": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+      "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/source-map-js": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
@@ -7402,6 +7914,12 @@
        }
      }
    },
+    "node_modules/stylis": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
+      "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==",
+      "license": "MIT"
+    },
    "node_modules/sucrase": {
      "version": "3.35.0",
      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
--- a/package.json
+++ b/package.json
@@ -9,7 +9,11 @@
    "seed": "node -r dotenv/config ./scripts/seed.js"
  },
  "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
    "@heroicons/react": "^2.0.18",
+    "@mui/icons-material": "^7.3.5",
+    "@mui/material": "^7.3.5",
    "@tailwindcss/typography": "^0.5.10",
    "@types/node": "20.5.7",
    "@zxing/browser": "^0.1.4",