format all code with npm run format

Author: Julian Luneburg

frontend/src/components/AppContainer.tsx

@@ -1,6 +1,12 @@
 import { Avatar, ConfigProvider, Dropdown, Layout, Menu, theme as antdTheme } from "utils/antd.tsx";
 import { Outlet, useLocation, useNavigate } from "react-router-dom";
-import { CalendarOutlined, DashboardOutlined, LogoutOutlined, TeamOutlined, UserOutlined } from "@ant-design/icons";
+import {
+  CalendarOutlined,
+  DashboardOutlined,
+  LogoutOutlined,
+  TeamOutlined,
+  UserOutlined,
+} from "@ant-design/icons";
 import { useAuth } from "../contexts/AuthContext";
 import useApiService from "../services/apiService.ts";
 import { useState } from "react";
@@ -27,11 +33,15 @@ export const AppContainer = () => {
       icon: <CalendarOutlined />,
       label: "Events",
     },
-    ...(user?.roles?.find(role => role === "ADMIN") ? [{
-      key: "/employees",
-      icon: <TeamOutlined />,
-      label: "Employees",
-    }] : []),
+    ...(user?.roles?.find(role => role === "ADMIN")
+      ? [
+          {
+            key: "/employees",
+            icon: <TeamOutlined />,
+            label: "Employees",
+          },
+        ]
+      : []),
   ].filter(Boolean);
 
   const handleMenuClick = (key: string) => {
@@ -186,11 +196,15 @@ export const AppContainer = () => {
                 }}
                 placement="topLeft"
               >
-                <div style={{ backgroundColor: "#00aeff", borderRadius: "50%" }}
-                     className="w-28 h-28 shadow-md flex flex-col items-center justify-center cursor-pointer hover:shadow-lg transition-all">
+                <div
+                  style={{ backgroundColor: "#00aeff", borderRadius: "50%" }}
+                  className="w-28 h-28 shadow-md flex flex-col items-center justify-center cursor-pointer hover:shadow-lg transition-all"
+                >
                   <Avatar icon={<UserOutlined />} className="bg-blue-200" size="large" />
-                  <span
-                    className="mt-1 text-white text-sm font-medium text-center"> {user?.name || user?.email || "User"} </span>
+                  <span className="mt-1 text-white text-sm font-medium text-center">
+                    {" "}
+                    {user?.name || user?.email || "User"}{" "}
+                  </span>
                 </div>
               </Dropdown>
             </div>
@@ -208,11 +222,14 @@ export const AppContainer = () => {
               <Outlet />
             </div>
           </Content>
-          <Footer className="text-center border-t border-white-200" style={{ background: "transparent" }}>
+          <Footer
+            className="text-center border-t border-white-200"
+            style={{ background: "transparent" }}
+          >
             Event Exchange Platform ©{new Date().getFullYear()}
           </Footer>
         </Layout>
       </Layout>
     </ConfigProvider>
   );
-};
+};

frontend/src/components/CanvasTooltip.tsx

@@ -3,23 +3,23 @@ import { Tooltip } from "utils/antd.tsx";
 
 const tooltipSteps = [
   {
-    text: "Select multiple items: Hold \"<b>SHIFT</b>\" and drag your mouse.",
-    icon: '⇧',
+    text: 'Select multiple items: Hold "<b>SHIFT</b>" and drag your mouse.',
+    icon: "⇧",
   },
   {
-    text: "Delete selected items: Press \"<b>BACKSPACE</b>\".",
-    icon: '⌫',
+    text: 'Delete selected items: Press "<b>BACKSPACE</b>".',
+    icon: "⌫",
   },
   {
-    text: "Deactivate Quick Wall: Press \"<b>ESC</b>\".",
+    text: 'Deactivate Quick Wall: Press "<b>ESC</b>".',
     icon: "␛",
   },
   {
-    text: "Duplicate selected items: Press \"<b>D</b>\".",
-    icon: 'D',
+    text: 'Duplicate selected items: Press "<b>D</b>".',
+    icon: "D",
   },
   {
-    text: "Undo/Redo: Press \"<b>CTRL + Z</b>\" / \"<b>CTRL + SHIFT + Z</b>\".",
+    text: 'Undo/Redo: Press "<b>CTRL + Z</b>" / "<b>CTRL + SHIFT + Z</b>".',
     icon: "↩️",
   },
   {
@@ -34,36 +34,56 @@ export const CanvasTooltip = () => {
       className="ms-3 mt-2"
       title={
         <div style={{ minWidth: 500, padding: 4 }}>
-          <div style={{ fontWeight: 600, marginBottom: 8, color: '#1677ff', display: 'flex', alignItems: 'center' }}>
+          <div
+            style={{
+              fontWeight: 600,
+              marginBottom: 8,
+              color: "#1677ff",
+              display: "flex",
+              alignItems: "center",
+            }}
+          >
             <InfoCircleOutlined style={{ marginRight: 8, fontSize: 18 }} />
             Canvas Shortcuts
           </div>
           <ul style={{ paddingLeft: 18, margin: 0 }}>
             {tooltipSteps.map((step, idx) => (
-              <li key={idx} style={{ marginBottom: 6, display: 'flex', alignItems: 'center' }}>
-                <span style={{
-                  display: 'inline-block',
-                  width: 22,
-                  height: 22,
-                  background: '#e6f7ff',
-                  color: '#1677ff',
-                  borderRadius: '50%',
-                  textAlign: 'center',
-                  lineHeight: '22px',
-                  fontWeight: 700,
-                  marginRight: 10,
-                  fontSize: 13,
-                  border: '1px solid #91d5ff',
-                }}>{step.icon}</span>
+              <li key={idx} style={{ marginBottom: 6, display: "flex", alignItems: "center" }}>
+                <span
+                  style={{
+                    display: "inline-block",
+                    width: 22,
+                    height: 22,
+                    background: "#e6f7ff",
+                    color: "#1677ff",
+                    borderRadius: "50%",
+                    textAlign: "center",
+                    lineHeight: "22px",
+                    fontWeight: 700,
+                    marginRight: 10,
+                    fontSize: 13,
+                    border: "1px solid #91d5ff",
+                  }}
+                >
+                  {step.icon}
+                </span>
                 <span dangerouslySetInnerHTML={{ __html: step.text }} />
               </li>
             ))}
           </ul>
         </div>
       }
       placement="rightBottom"
-      styles={{ body: { borderRadius: 12, boxShadow: "0 4px 24px #1677ff22", width: "500px" } }}>
-      <InfoCircleOutlined style={{ fontSize: 28, cursor: "pointer", color: "#1677ff", filter: 'drop-shadow(0 2px 6px #1677ff44)' }} />
+      styles={{ body: { borderRadius: 12, boxShadow: "0 4px 24px #1677ff22", width: "500px" } }}
+    >
+      <InfoCircleOutlined
+        style={{
+          fontSize: 28,
+          cursor: "pointer",
+          color: "#1677ff",
+          filter: "drop-shadow(0 2px 6px #1677ff44)",
+        }}
+      />
     </Tooltip>
   );
 };