name blurbs, skeleton and link

bun.lock

@@ -14,6 +14,7 @@
         "@mantine/tiptap": "^8.2.4",
         "@phosphor-icons/react": "^2.1.10",
         "@svgmoji/noto": "^3.2.0",
+        "@tanstack/react-devtools": "^0.7.6",
         "@tanstack/react-query": "^5.66.0",
         "@tanstack/react-query-devtools": "^5.66.0",
         "@tanstack/react-router": "^1.130.12",
@@ -26,6 +27,7 @@
         "@tiptap/starter-kit": "^3.4.3",
         "@types/bun": "^1.2.22",
         "@types/ioredis": "^4.28.10",
+        "browser-image-compression": "^2.0.2",
         "dotenv": "^17.2.2",
         "embla-carousel-react": "^8.6.0",
         "framer-motion": "^12.23.12",
@@ -44,6 +46,7 @@
         "supertokens-web-js": "^0.15.0",
         "twilio": "^5.8.0",
         "vaul": "^1.1.2",
+        "xlsx": "^0.18.5",
         "zod": "^4.0.15",
         "zustand": "^5.0.7",
       },
@@ -336,6 +339,14 @@
 
     "@simplewebauthn/browser": ["@simplewebauthn/browser@13.2.0", "", {}, "sha512-N3fuA1AAnTo5gCStYoIoiasPccC+xPLx2YU88Dv0GeAmPQTWHETlZQq5xZ0DgUq1H9loXMWQH5qqUjcI7BHJ1A=="],
 
+    "@solid-primitives/event-listener": ["@solid-primitives/event-listener@2.4.3", "", { "dependencies": { "@solid-primitives/utils": "^6.3.2" }, "peerDependencies": { "solid-js": "^1.6.12" } }, "sha512-h4VqkYFv6Gf+L7SQj+Y6puigL/5DIi7x5q07VZET7AWcS+9/G3WfIE9WheniHWJs51OEkRB43w6lDys5YeFceg=="],
+
+    "@solid-primitives/keyboard": ["@solid-primitives/keyboard@1.3.3", "", { "dependencies": { "@solid-primitives/event-listener": "^2.4.3", "@solid-primitives/rootless": "^1.5.2", "@solid-primitives/utils": "^6.3.2" }, "peerDependencies": { "solid-js": "^1.6.12" } }, "sha512-9dQHTTgLBqyAI7aavtO+HnpTVJgWQA1ghBSrmLtMu1SMxLPDuLfuNr+Tk5udb4AL4Ojg7h9JrKOGEEDqsJXWJA=="],
+
+    "@solid-primitives/rootless": ["@solid-primitives/rootless@1.5.2", "", { "dependencies": { "@solid-primitives/utils": "^6.3.2" }, "peerDependencies": { "solid-js": "^1.6.12" } }, "sha512-9HULb0QAzL2r47CCad0M+NKFtQ+LrGGNHZfteX/ThdGvKIg2o2GYhBooZubTCd/RTu2l2+Nw4s+dEfiDGvdrrQ=="],
+
+    "@solid-primitives/utils": ["@solid-primitives/utils@6.3.2", "", { "peerDependencies": { "solid-js": "^1.6.12" } }, "sha512-hZ/M/qr25QOCcwDPOHtGjxTD8w2mNyVAYvcfgwzBHq2RwNqHNdDNsMZYap20+ruRwW4A3Cdkczyoz0TSxLCAPQ=="],
+
     "@standard-schema/spec": ["@standard-schema/spec@1.0.0", "", {}, "sha512-m2bOd0f2RT9k8QJx1JN85cZYyH1RqFBdlwtkSlf4tBDYLCiiZnv1fIIwacK6cqwXavOydf0NPToMQgpKq+dVlA=="],
 
     "@standard-schema/utils": ["@standard-schema/utils@0.3.0", "", {}, "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g=="],
@@ -344,6 +355,12 @@
 
     "@svgmoji/noto": ["@svgmoji/noto@3.2.0", "", { "dependencies": { "@babel/runtime": "^7.12.5", "@svgmoji/core": "^3.2.0" } }, "sha512-JgtNciB06hMDI1Pb1N2IgLh44XRMZUUNwBANzjY5jXTPqOCu1A1VA35ENvUsRhEUZOm8I+hbdAEHkwMVqxLeIQ=="],
 
+    "@tanstack/devtools": ["@tanstack/devtools@0.6.20", "", { "dependencies": { "@solid-primitives/keyboard": "^1.3.3", "@tanstack/devtools-event-bus": "0.3.2", "@tanstack/devtools-ui": "0.4.2", "clsx": "^2.1.1", "goober": "^2.1.16", "solid-js": "^1.9.9" } }, "sha512-7Sw6bWvwKsHDNLg+8v7xOXhE5tzwx6/KgLWSSP55pJ86wpSXYdIm89vvXm4ED1lgKfEU5l3f4Y6QVagU4rgRiQ=="],
+
+    "@tanstack/devtools-event-bus": ["@tanstack/devtools-event-bus@0.3.2", "", { "dependencies": { "ws": "^8.18.3" } }, "sha512-yJT2As/drc+Epu0nsqCsJaKaLcaNGufiNxSlp/+/oeTD0jsBxF9/PJBfh66XVpYXkKr97b8689mSu7QMef0Rrw=="],
+
+    "@tanstack/devtools-ui": ["@tanstack/devtools-ui@0.4.2", "", { "dependencies": { "clsx": "^2.1.1", "goober": "^2.1.16", "solid-js": "^1.9.9" } }, "sha512-xvALRLeD+TYjaLx9f9OrRBBZITAYPIk7RH8LRiESUQHw7lZO/sBU1ggrcSePh7TwKWXl9zLmtUi+7xVIS+j/dQ=="],
+
     "@tanstack/directive-functions-plugin": ["@tanstack/directive-functions-plugin@1.132.0", "", { "dependencies": { "@babel/code-frame": "7.27.1", "@babel/core": "^7.27.7", "@babel/traverse": "^7.27.7", "@babel/types": "^7.27.7", "@tanstack/router-utils": "1.132.0", "babel-dead-code-elimination": "^1.0.10", "tiny-invariant": "^1.3.3" }, "peerDependencies": { "vite": ">=6.0.0 || >=7.0.0" } }, "sha512-5+K3msIpSYkiDE0PTIAT2HzZRps/M2uQsDEA5HApXxOhIAWykQ/yyO1umgkMwYpgJqnT96AVHb0E559Dfvhj0A=="],
 
     "@tanstack/history": ["@tanstack/history@1.132.0", "", {}, "sha512-GG2R9I6QSlbNR9fEuX2sQCigY6K28w51h2634TWmkaHXlzQw+rWuIWr4nAGM9doA+kWRi1LFSFMvAiG3cOqjXQ=="],
@@ -352,6 +369,8 @@
 
     "@tanstack/query-devtools": ["@tanstack/query-devtools@5.90.1", "", {}, "sha512-GtINOPjPUH0OegJExZ70UahT9ykmAhmtNVcmtdnOZbxLwT7R5OmRztR5Ahe3/Cu7LArEmR6/588tAycuaWb1xQ=="],
 
+    "@tanstack/react-devtools": ["@tanstack/react-devtools@0.7.6", "", { "dependencies": { "@tanstack/devtools": "0.6.20" }, "peerDependencies": { "@types/react": ">=16.8", "@types/react-dom": ">=16.8", "react": ">=16.8", "react-dom": ">=16.8" } }, "sha512-fP0jY7yed0HVIEhs+rjn8wZqABD/6TUiq6SV8jlyYP8NBK2Jfq3ce+IRw5w+N7KBzEokveLQFktxoLNpt3ZOkA=="],
+
     "@tanstack/react-query": ["@tanstack/react-query@5.90.2", "", { "dependencies": { "@tanstack/query-core": "5.90.2" }, "peerDependencies": { "react": "^18 || ^19" } }, "sha512-CLABiR+h5PYfOWr/z+vWFt5VsOA2ekQeRQBFSKlcoW6Ndx/f8rfyVmq4LbgOM4GG2qtxAxjLYLOpCNTYm4uKzw=="],
 
     "@tanstack/react-query-devtools": ["@tanstack/react-query-devtools@5.90.2", "", { "dependencies": { "@tanstack/query-devtools": "5.90.1" }, "peerDependencies": { "@tanstack/react-query": "^5.90.2", "react": "^18 || ^19" } }, "sha512-vAXJzZuBXtCQtrY3F/yUNJCV4obT/A/n81kb3+YqLbro5Z2+phdAbceO+deU3ywPw8B42oyJlp4FhO0SoivDFQ=="],
@@ -512,6 +531,8 @@
 
     "acorn": ["acorn@8.15.0", "", { "bin": { "acorn": "bin/acorn" } }, "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg=="],
 
+    "adler-32": ["adler-32@1.3.1", "", {}, "sha512-ynZ4w/nUUv5rrsR8UUGoe1VC9hZj6V5hU9Qw1HlMDJGEJw5S7TfTErWTjMys6M7vr0YWcPqs3qAr4ss0nDfP+A=="],
+
     "agent-base": ["agent-base@6.0.2", "", { "dependencies": { "debug": "4" } }, "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ=="],
 
     "ansis": ["ansis@4.1.0", "", {}, "sha512-BGcItUBWSMRgOCe+SVZJ+S7yTRG0eGt9cXAHev72yuGcY23hnLA7Bky5L/xLyPINoSN95geovfBkqoTlNZYa7w=="],
@@ -544,6 +565,8 @@
 
     "braces": ["braces@3.0.3", "", { "dependencies": { "fill-range": "^7.1.1" } }, "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA=="],
 
+    "browser-image-compression": ["browser-image-compression@2.0.2", "", { "dependencies": { "uzip": "0.20201231.0" } }, "sha512-pBLlQyUf6yB8SmmngrcOw3EoS4RpQ1BcylI3T9Yqn7+4nrQTXJD4sJDe5ODnJdrvNMaio5OicFo75rDyJD2Ucw=="],
+
     "browser-tabs-lock": ["browser-tabs-lock@1.3.0", "", { "dependencies": { "lodash": ">=4.17.21" } }, "sha512-g6nHaobTiT0eMZ7jh16YpD2kcjAp+PInbiVq3M1x6KKaEIVhT4v9oURNIpZLOZ3LQbQ3XYfNhMAb/9hzNLIWrw=="],
 
     "browserslist": ["browserslist@4.26.2", "", { "dependencies": { "baseline-browser-mapping": "^2.8.3", "caniuse-lite": "^1.0.30001741", "electron-to-chromium": "^1.5.218", "node-releases": "^2.0.21", "update-browserslist-db": "^1.1.3" }, "bin": { "browserslist": "cli.js" } }, "sha512-ECFzp6uFOSB+dcZ5BK/IBaGWssbSYBHvuMeMt3MMFyhI0Z8SqGgEkBLARgpRH3hutIgPVsALcMwbDrJqPxQ65A=="],
@@ -562,6 +585,8 @@
 
     "caniuse-lite": ["caniuse-lite@1.0.30001745", "", {}, "sha512-ywt6i8FzvdgrrrGbr1jZVObnVv6adj+0if2/omv9cmR2oiZs30zL4DIyaptKcbOrBdOIc74QTMoJvSE2QHh5UQ=="],
 
+    "cfb": ["cfb@1.2.2", "", { "dependencies": { "adler-32": "~1.3.0", "crc-32": "~1.2.0" } }, "sha512-KfdUZsSOw19/ObEWasvBP/Ac4reZvAGauZhs6S/gqNhXhI7cKwvlH7ulj+dOEYnca4bm4SGo8C1bTAQvnTjgQA=="],
+
     "cheerio": ["cheerio@1.1.2", "", { "dependencies": { "cheerio-select": "^2.1.0", "dom-serializer": "^2.0.0", "domhandler": "^5.0.3", "domutils": "^3.2.2", "encoding-sniffer": "^0.2.1", "htmlparser2": "^10.0.0", "parse5": "^7.3.0", "parse5-htmlparser2-tree-adapter": "^7.1.0", "parse5-parser-stream": "^7.1.2", "undici": "^7.12.0", "whatwg-mimetype": "^4.0.0" } }, "sha512-IkxPpb5rS/d1IiLbHMgfPuS0FgiWTtFIm/Nj+2woXDLTZ7fOT2eqzgYbdMlLweqlHbsZjxEChoVK+7iph7jyQg=="],
 
     "cheerio-select": ["cheerio-select@2.1.0", "", { "dependencies": { "boolbase": "^1.0.0", "css-select": "^5.1.0", "css-what": "^6.1.0", "domelementtype": "^2.3.0", "domhandler": "^5.0.3", "domutils": "^3.0.1" } }, "sha512-9v9kG0LvzrlcungtnJtpGNxY+fzECQKhK4EGJX2vByejiMX84MFNQw4UxPJl3bFbTMw+Dfs37XaIkCwTZfLh4g=="],
@@ -572,6 +597,8 @@
 
     "cluster-key-slot": ["cluster-key-slot@1.1.2", "", {}, "sha512-RMr0FhtfXemyinomL4hrWcYJxmX6deFdCxpJzhDttxgO1+bcCnkk+9drydLVDmAMG7NE6aN/fl4F7ucU/90gAA=="],
 
+    "codepage": ["codepage@1.15.0", "", {}, "sha512-3g6NUTPd/YtuuGrhMnOMRjFc+LJw/bnMp3+0r/Wcz3IXUuCosKRJvMphm5+Q+bvTVGcJJuRvVLuYba+WojaFaA=="],
+
     "combined-stream": ["combined-stream@1.0.8", "", { "dependencies": { "delayed-stream": "~1.0.0" } }, "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg=="],
 
     "content-type": ["content-type@1.0.5", "", {}, "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA=="],
@@ -584,6 +611,8 @@
 
     "core-js-pure": ["core-js-pure@3.45.1", "", {}, "sha512-OHnWFKgTUshEU8MK+lOs1H8kC8GkTi9Z1tvNkxrCcw9wl3MJIO7q2ld77wjWn4/xuGrVu2X+nME1iIIPBSdyEQ=="],
 
+    "crc-32": ["crc-32@1.2.2", "", { "bin": { "crc32": "bin/crc32.njs" } }, "sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ=="],
+
     "crelt": ["crelt@1.0.6", "", {}, "sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g=="],
 
     "cross-fetch": ["cross-fetch@3.2.0", "", { "dependencies": { "node-fetch": "^2.7.0" } }, "sha512-Q+xVJLoGOeIMXZmbUK4HYk+69cQH6LudR0Vu/pRm2YlU/hDV9CiS0gKUMaWY5f2NeUH9C1nV3bsTlCo0FsTV1Q=="],
@@ -712,6 +741,8 @@
 
     "form-data": ["form-data@4.0.4", "", { "dependencies": { "asynckit": "^0.4.0", "combined-stream": "^1.0.8", "es-set-tostringtag": "^2.1.0", "hasown": "^2.0.2", "mime-types": "^2.1.12" } }, "sha512-KrGhL9Q4zjj0kiUt5OO4Mr/A/jlI2jDYs5eHBpYHPcBEVSiipAvn2Ko2HnPe20rmcuuvMHNdZFp+4IlGTMF0Ow=="],
 
+    "frac": ["frac@1.1.2", "", {}, "sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA=="],
+
     "fraction.js": ["fraction.js@4.3.7", "", {}, "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew=="],
 
     "framer-motion": ["framer-motion@12.23.22", "", { "dependencies": { "motion-dom": "^12.23.21", "motion-utils": "^12.23.6", "tslib": "^2.4.0" }, "peerDependencies": { "@emotion/is-prop-valid": "*", "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" }, "optionalPeers": ["@emotion/is-prop-valid", "react", "react-dom"] }, "sha512-ZgGvdxXCw55ZYvhoZChTlG6pUuehecgvEAJz0BHoC5pQKW1EC5xf1Mul1ej5+ai+pVY0pylyFfdl45qnM1/GsA=="],
@@ -1098,6 +1129,8 @@
 
     "srvx": ["srvx@0.8.7", "", { "dependencies": { "cookie-es": "^2.0.0" }, "bin": { "srvx": "bin/srvx.mjs" } }, "sha512-g3+15LlwVOGL2QpoTPZlvRjg+9a5Tx/69CatXjFP6txvhIaW2FmGyzJfb8yft5wyfGddvJmP/Yx+e/uNDMRSLQ=="],
 
+    "ssf": ["ssf@0.11.2", "", { "dependencies": { "frac": "~1.1.2" } }, "sha512-+idbmIXoYET47hH+d7dfm2epdOMUDjqcB4648sTZ+t2JwoyBFL/insLfB/racrDmsKB3diwsDA696pZMieAC5g=="],
+
     "standard-as-callback": ["standard-as-callback@2.1.0", "", {}, "sha512-qoRRSyROncaz1z0mvYqIE4lCd9p2R90i6GxW3uZv5ucSu8tU7B5HXUP1gG8pVZsYNVaXjk8ClXHPttLyxAL48A=="],
 
     "sugarss": ["sugarss@5.0.1", "", { "peerDependencies": { "postcss": "^8.3.3" } }, "sha512-ctS5RYCBVvPoZAnzIaX5QSShK8ZiZxD5HUqSxlusvEMC+QZQIPCPOIJg6aceFX+K2rf4+SH89eu++h1Zmsr2nw=="],
@@ -1166,6 +1199,8 @@
 
     "util-deprecate": ["util-deprecate@1.0.2", "", {}, "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="],
 
+    "uzip": ["uzip@0.20201231.0", "", {}, "sha512-OZeJfZP+R0z9D6TmBgLq2LHzSSptGMGDGigGiEe0pr8UBe/7fdflgHlHBNDASTXB5jnFuxHpNaJywSg8YFeGng=="],
+
     "vaul": ["vaul@1.1.2", "", { "dependencies": { "@radix-ui/react-dialog": "^1.1.1" }, "peerDependencies": { "react": "^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc" } }, "sha512-ZFkClGpWyI2WUQjdLJ/BaGuV6AVQiJ3uELGk3OYtP+B6yCO7Cmn9vPFXVJkRaGkOJu3m8bQMgtyzNHixULceQA=="],
 
     "victory-vendor": ["victory-vendor@37.3.6", "", { "dependencies": { "@types/d3-array": "^3.0.3", "@types/d3-ease": "^3.0.0", "@types/d3-interpolate": "^3.0.1", "@types/d3-scale": "^4.0.2", "@types/d3-shape": "^3.1.0", "@types/d3-time": "^3.0.0", "@types/d3-timer": "^3.0.0", "d3-array": "^3.1.6", "d3-ease": "^3.0.1", "d3-interpolate": "^3.0.1", "d3-scale": "^4.0.2", "d3-shape": "^3.1.0", "d3-time": "^3.0.0", "d3-timer": "^3.0.1" } }, "sha512-SbPDPdDBYp+5MJHhBCAyI7wKM3d5ivekigc2Dk2s7pgbZ9wIgIBYGVw4zGHBml/qTFbexrofXW6Gu4noGxrOwQ=="],
@@ -1190,6 +1225,14 @@
 
     "which": ["which@2.0.2", "", { "dependencies": { "isexe": "^2.0.0" }, "bin": { "node-which": "./bin/node-which" } }, "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA=="],
 
+    "wmf": ["wmf@1.0.2", "", {}, "sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw=="],
+
+    "word": ["word@0.3.0", "", {}, "sha512-OELeY0Q61OXpdUfTp+oweA/vtLVg5VDOXh+3he3PNzLGG/y0oylSOC1xRVj0+l4vQ3tj/bB1HVHv1ocXkQceFA=="],
+
+    "ws": ["ws@8.18.3", "", { "peerDependencies": { "bufferutil": "^4.0.1", "utf-8-validate": ">=5.0.2" }, "optionalPeers": ["bufferutil", "utf-8-validate"] }, "sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg=="],
+
+    "xlsx": ["xlsx@0.18.5", "", { "dependencies": { "adler-32": "~1.3.0", "cfb": "~1.2.1", "codepage": "~1.15.0", "crc-32": "~1.2.1", "ssf": "~0.11.2", "wmf": "~1.0.1", "word": "~0.3.0" }, "bin": { "xlsx": "bin/xlsx.njs" } }, "sha512-dmg3LCjBPHZnQp5/F/+nnTa+miPJxUXB6vtk42YjBBKayDNagxGEeIdWApkYPOf3Z3pm3k62Knjzp7lMeTEtFQ=="],
+
     "xmlbuilder": ["xmlbuilder@13.0.2", "", {}, "sha512-Eux0i2QdDYKbdbA6AM6xE4m6ZTZr4G4xF9kahI2ukSEMCzwce2eX9WlTI5J3s+NU7hpasFsr8hWIONae7LluAQ=="],
 
     "xmlbuilder2": ["xmlbuilder2@3.1.1", "", { "dependencies": { "@oozcitak/dom": "1.15.10", "@oozcitak/infra": "1.0.8", "@oozcitak/util": "8.3.8", "js-yaml": "3.14.1" } }, "sha512-WCSfbfZnQDdLQLiMdGUQpMxxckeQ4oZNMNhLVkcekTu7xhD4tuUDyAPoY8CwXvBYE6LwBHd6QW2WZXlOWr1vCw=="],

package.json

@@ -20,6 +20,7 @@
     "@mantine/tiptap": "^8.2.4",
     "@phosphor-icons/react": "^2.1.10",
     "@svgmoji/noto": "^3.2.0",
+    "@tanstack/react-devtools": "^0.7.6",
     "@tanstack/react-query": "^5.66.0",
     "@tanstack/react-query-devtools": "^5.66.0",
     "@tanstack/react-router": "^1.130.12",
@@ -51,6 +52,7 @@
     "supertokens-web-js": "^0.15.0",
     "twilio": "^5.8.0",
     "vaul": "^1.1.2",
+    "xlsx": "^0.18.5",
     "zod": "^4.0.15",
     "zustand": "^5.0.7"
   },

pb_migrations/1759244692_created_activities.js

@@ -0,0 +1,108 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = new Collection({
+    "createRule": null,
+    "deleteRule": null,
+    "fields": [
+      {
+        "autogeneratePattern": "[a-z0-9]{15}",
+        "hidden": false,
+        "id": "text3208210256",
+        "max": 15,
+        "min": 15,
+        "name": "id",
+        "pattern": "^[a-z0-9]+$",
+        "presentable": false,
+        "primaryKey": true,
+        "required": true,
+        "system": true,
+        "type": "text"
+      },
+      {
+        "autogeneratePattern": "",
+        "hidden": false,
+        "id": "text1579384326",
+        "max": 0,
+        "min": 0,
+        "name": "name",
+        "pattern": "",
+        "presentable": false,
+        "primaryKey": false,
+        "required": false,
+        "system": false,
+        "type": "text"
+      },
+      {
+        "hidden": false,
+        "id": "json4225120046",
+        "maxSize": 0,
+        "name": "arguments",
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "json"
+      },
+      {
+        "cascadeDelete": false,
+        "collectionId": "pbc_3072146508",
+        "hidden": false,
+        "id": "relation2551806565",
+        "maxSelect": 1,
+        "minSelect": 0,
+        "name": "player",
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "relation"
+      },
+      {
+        "autogeneratePattern": "",
+        "hidden": false,
+        "id": "text3293145029",
+        "max": 0,
+        "min": 0,
+        "name": "user_agent",
+        "pattern": "",
+        "presentable": false,
+        "primaryKey": false,
+        "required": false,
+        "system": false,
+        "type": "text"
+      },
+      {
+        "hidden": false,
+        "id": "autodate2990389176",
+        "name": "created",
+        "onCreate": true,
+        "onUpdate": false,
+        "presentable": false,
+        "system": false,
+        "type": "autodate"
+      },
+      {
+        "hidden": false,
+        "id": "autodate3332085495",
+        "name": "updated",
+        "onCreate": true,
+        "onUpdate": true,
+        "presentable": false,
+        "system": false,
+        "type": "autodate"
+      }
+    ],
+    "id": "pbc_1262591861",
+    "indexes": [],
+    "listRule": null,
+    "name": "activities",
+    "system": false,
+    "type": "base",
+    "updateRule": null,
+    "viewRule": null
+  });
+
+  return app.save(collection);
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_1262591861");
+
+  return app.delete(collection);
+})

pb_migrations/1759245857_updated_activities.js

@@ -0,0 +1,27 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("pbc_1262591861")
+
+  // add field
+  collection.fields.addAt(5, new Field({
+    "hidden": false,
+    "id": "number2254405824",
+    "max": null,
+    "min": null,
+    "name": "duration",
+    "onlyInt": false,
+    "presentable": false,
+    "required": false,
+    "system": false,
+    "type": "number"
+  }))
+
+  return app.save(collection)
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_1262591861")
+
+  // remove field
+  collection.fields.removeById("number2254405824")
+
+  return app.save(collection)
+})

pb_migrations/1759246171_updated_activities.js

@@ -0,0 +1,43 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("pbc_1262591861")
+
+  // add field
+  collection.fields.addAt(6, new Field({
+    "hidden": false,
+    "id": "bool1862328242",
+    "name": "success",
+    "presentable": false,
+    "required": false,
+    "system": false,
+    "type": "bool"
+  }))
+
+  // add field
+  collection.fields.addAt(7, new Field({
+    "autogeneratePattern": "",
+    "hidden": false,
+    "id": "text1574812785",
+    "max": 0,
+    "min": 0,
+    "name": "error",
+    "pattern": "",
+    "presentable": false,
+    "primaryKey": false,
+    "required": false,
+    "system": false,
+    "type": "text"
+  }))
+
+  return app.save(collection)
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_1262591861")
+
+  // remove field
+  collection.fields.removeById("bool1862328242")
+
+  // remove field
+  collection.fields.removeById("text1574812785")
+
+  return app.save(collection)
+})

pb_migrations/1759340868_updated_badges.js

@@ -0,0 +1,27 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("pbc_1340419796")
+
+  // add field
+  collection.fields.addAt(7, new Field({
+    "hidden": false,
+    "id": "number4113142680",
+    "max": null,
+    "min": null,
+    "name": "order",
+    "onlyInt": false,
+    "presentable": false,
+    "required": false,
+    "system": false,
+    "type": "number"
+  }))
+
+  return app.save(collection)
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_1340419796")
+
+  // remove field
+  collection.fields.removeById("number4113142680")
+
+  return app.save(collection)
+})

pb_migrations/1759344923_updated_players.js

@@ -0,0 +1,46 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("pbc_3072146508")
+
+  // remove field
+  collection.fields.removeById("relation2029409178")
+
+  // remove field
+  collection.fields.removeById("relation2813965191")
+
+  return app.save(collection)
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_3072146508")
+
+  // add field
+  collection.fields.addAt(5, new Field({
+    "cascadeDelete": false,
+    "collectionId": "pbc_1340419796",
+    "hidden": false,
+    "id": "relation2029409178",
+    "maxSelect": 999,
+    "minSelect": 0,
+    "name": "badges",
+    "presentable": false,
+    "required": false,
+    "system": false,
+    "type": "relation"
+  }))
+
+  // add field
+  collection.fields.addAt(6, new Field({
+    "cascadeDelete": false,
+    "collectionId": "pbc_1340419796",
+    "hidden": false,
+    "id": "relation2813965191",
+    "maxSelect": 1,
+    "minSelect": 0,
+    "name": "featured_badge",
+    "presentable": false,
+    "required": false,
+    "system": false,
+    "type": "relation"
+  }))
+
+  return app.save(collection)
+})

pb_migrations/1759344938_deleted_player_badge_progress.js

@@ -0,0 +1,129 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("pbc_4251874343");
+
+  return app.delete(collection);
+}, (app) => {
+  const collection = new Collection({
+    "createRule": null,
+    "deleteRule": null,
+    "fields": [
+      {
+        "autogeneratePattern": "[a-z0-9]{15}",
+        "hidden": false,
+        "id": "text3208210256",
+        "max": 15,
+        "min": 15,
+        "name": "id",
+        "pattern": "^[a-z0-9]+$",
+        "presentable": false,
+        "primaryKey": true,
+        "required": true,
+        "system": true,
+        "type": "text"
+      },
+      {
+        "cascadeDelete": true,
+        "collectionId": "pbc_3072146508",
+        "hidden": false,
+        "id": "relation2847519201",
+        "maxSelect": 1,
+        "minSelect": 1,
+        "name": "player_id",
+        "presentable": false,
+        "required": true,
+        "system": false,
+        "type": "relation"
+      },
+      {
+        "cascadeDelete": true,
+        "collectionId": "pbc_1340419796",
+        "hidden": false,
+        "id": "relation3948571039",
+        "maxSelect": 1,
+        "minSelect": 1,
+        "name": "badge_id",
+        "presentable": false,
+        "required": true,
+        "system": false,
+        "type": "relation"
+      },
+      {
+        "hidden": false,
+        "id": "number1847293057",
+        "max": null,
+        "min": 0,
+        "name": "current_progress",
+        "onlyInt": false,
+        "presentable": false,
+        "required": true,
+        "system": false,
+        "type": "number"
+      },
+      {
+        "hidden": false,
+        "id": "number2948571040",
+        "max": null,
+        "min": 1,
+        "name": "target_progress",
+        "onlyInt": false,
+        "presentable": false,
+        "required": true,
+        "system": false,
+        "type": "number"
+      },
+      {
+        "hidden": false,
+        "id": "bool3049672141",
+        "name": "is_earned",
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "bool"
+      },
+      {
+        "hidden": false,
+        "id": "date1150773242",
+        "max": "",
+        "min": "",
+        "name": "earned_at",
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "date"
+      },
+      {
+        "hidden": false,
+        "id": "autodate2990389176",
+        "name": "created",
+        "onCreate": true,
+        "onUpdate": false,
+        "presentable": false,
+        "system": false,
+        "type": "autodate"
+      },
+      {
+        "hidden": false,
+        "id": "autodate3332085495",
+        "name": "updated",
+        "onCreate": true,
+        "onUpdate": true,
+        "presentable": false,
+        "system": false,
+        "type": "autodate"
+      }
+    ],
+    "id": "pbc_4251874343",
+    "indexes": [
+      "CREATE UNIQUE INDEX `idx_unique_player_badge` ON `player_badge_progress` (`player_id`, `badge_id`)"
+    ],
+    "listRule": null,
+    "name": "player_badge_progress",
+    "system": false,
+    "type": "base",
+    "updateRule": null,
+    "viewRule": null
+  });
+
+  return app.save(collection);
+})

pb_migrations/1759344944_deleted_badges.js

@@ -0,0 +1,173 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("pbc_1340419796");
+
+  return app.delete(collection);
+}, (app) => {
+  const collection = new Collection({
+    "createRule": null,
+    "deleteRule": null,
+    "fields": [
+      {
+        "autogeneratePattern": "[a-z0-9]{15}",
+        "hidden": false,
+        "id": "text3208210256",
+        "max": 15,
+        "min": 15,
+        "name": "id",
+        "pattern": "^[a-z0-9]+$",
+        "presentable": false,
+        "primaryKey": true,
+        "required": true,
+        "system": true,
+        "type": "text"
+      },
+      {
+        "autogeneratePattern": "",
+        "hidden": false,
+        "id": "text1579384326",
+        "max": 0,
+        "min": 0,
+        "name": "name",
+        "pattern": "",
+        "presentable": false,
+        "primaryKey": false,
+        "required": true,
+        "system": false,
+        "type": "text"
+      },
+      {
+        "autogeneratePattern": "",
+        "hidden": false,
+        "id": "text1843675174",
+        "max": 0,
+        "min": 0,
+        "name": "description",
+        "pattern": "",
+        "presentable": false,
+        "primaryKey": false,
+        "required": true,
+        "system": false,
+        "type": "text"
+      },
+      {
+        "hidden": false,
+        "id": "select4029814376",
+        "maxSelect": 1,
+        "name": "type",
+        "presentable": false,
+        "required": true,
+        "system": false,
+        "type": "select",
+        "values": [
+          "tournament_participation",
+          "tournament_placement",
+          "performance",
+          "overtime",
+          "match_milestone"
+        ]
+      },
+      {
+        "hidden": false,
+        "id": "json1578432567",
+        "maxSize": 2000000,
+        "name": "criteria",
+        "presentable": false,
+        "required": true,
+        "system": false,
+        "type": "json"
+      },
+      {
+        "autogeneratePattern": "",
+        "hidden": false,
+        "id": "text3928475610",
+        "max": 50,
+        "min": 0,
+        "name": "icon",
+        "pattern": "",
+        "presentable": false,
+        "primaryKey": false,
+        "required": false,
+        "system": false,
+        "type": "text"
+      },
+      {
+        "autogeneratePattern": "",
+        "hidden": false,
+        "id": "text1847293056",
+        "max": 50,
+        "min": 0,
+        "name": "color",
+        "pattern": "",
+        "presentable": false,
+        "primaryKey": false,
+        "required": false,
+        "system": false,
+        "type": "text"
+      },
+      {
+        "hidden": false,
+        "id": "number4113142680",
+        "max": null,
+        "min": null,
+        "name": "order",
+        "onlyInt": false,
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "number"
+      },
+      {
+        "hidden": false,
+        "id": "bool2847519203",
+        "name": "is_progressive",
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "bool"
+      },
+      {
+        "hidden": false,
+        "id": "number2948571038",
+        "max": null,
+        "min": null,
+        "name": "progress_target",
+        "onlyInt": false,
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "number"
+      },
+      {
+        "hidden": false,
+        "id": "autodate2990389176",
+        "name": "created",
+        "onCreate": true,
+        "onUpdate": false,
+        "presentable": false,
+        "system": false,
+        "type": "autodate"
+      },
+      {
+        "hidden": false,
+        "id": "autodate3332085495",
+        "name": "updated",
+        "onCreate": true,
+        "onUpdate": true,
+        "presentable": false,
+        "system": false,
+        "type": "autodate"
+      }
+    ],
+    "id": "pbc_1340419796",
+    "indexes": [],
+    "listRule": null,
+    "name": "badges",
+    "system": false,
+    "type": "base",
+    "updateRule": null,
+    "viewRule": null
+  });
+
+  return app.save(collection);
+})

pb_migrations/1759345060_created_badges.js

@@ -0,0 +1,145 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = new Collection({
+    "createRule": null,
+    "deleteRule": null,
+    "fields": [
+      {
+        "autogeneratePattern": "[a-z0-9]{15}",
+        "hidden": false,
+        "id": "text3208210256",
+        "max": 15,
+        "min": 15,
+        "name": "id",
+        "pattern": "^[a-z0-9]+$",
+        "presentable": false,
+        "primaryKey": true,
+        "required": true,
+        "system": true,
+        "type": "text"
+      },
+      {
+        "autogeneratePattern": "",
+        "hidden": false,
+        "id": "text1579384326",
+        "max": 0,
+        "min": 0,
+        "name": "name",
+        "pattern": "",
+        "presentable": false,
+        "primaryKey": false,
+        "required": false,
+        "system": false,
+        "type": "text"
+      },
+      {
+        "autogeneratePattern": "",
+        "hidden": false,
+        "id": "text2324736937",
+        "max": 0,
+        "min": 0,
+        "name": "key",
+        "pattern": "",
+        "presentable": false,
+        "primaryKey": false,
+        "required": false,
+        "system": false,
+        "type": "text"
+      },
+      {
+        "autogeneratePattern": "",
+        "hidden": false,
+        "id": "text1843675174",
+        "max": 0,
+        "min": 0,
+        "name": "description",
+        "pattern": "",
+        "presentable": false,
+        "primaryKey": false,
+        "required": false,
+        "system": false,
+        "type": "text"
+      },
+      {
+        "hidden": false,
+        "id": "json3055524737",
+        "maxSize": 0,
+        "name": "criteria",
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "json"
+      },
+      {
+        "hidden": false,
+        "id": "select2363381545",
+        "maxSelect": 1,
+        "name": "type",
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "select",
+        "values": [
+          "manual",
+          "match",
+          "tournament"
+        ]
+      },
+      {
+        "hidden": false,
+        "id": "bool3646955747",
+        "name": "progressive",
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "bool"
+      },
+      {
+        "hidden": false,
+        "id": "number4113142680",
+        "max": null,
+        "min": null,
+        "name": "order",
+        "onlyInt": false,
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "number"
+      },
+      {
+        "hidden": false,
+        "id": "autodate2990389176",
+        "name": "created",
+        "onCreate": true,
+        "onUpdate": false,
+        "presentable": false,
+        "system": false,
+        "type": "autodate"
+      },
+      {
+        "hidden": false,
+        "id": "autodate3332085495",
+        "name": "updated",
+        "onCreate": true,
+        "onUpdate": true,
+        "presentable": false,
+        "system": false,
+        "type": "autodate"
+      }
+    ],
+    "id": "pbc_1340419796",
+    "indexes": [],
+    "listRule": null,
+    "name": "badges",
+    "system": false,
+    "type": "base",
+    "updateRule": null,
+    "viewRule": null
+  });
+
+  return app.save(collection);
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_1340419796");
+
+  return app.delete(collection);
+})

pb_migrations/1759345122_created_player_badge_progress.js

@@ -0,0 +1,104 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = new Collection({
+    "createRule": null,
+    "deleteRule": null,
+    "fields": [
+      {
+        "autogeneratePattern": "[a-z0-9]{15}",
+        "hidden": false,
+        "id": "text3208210256",
+        "max": 15,
+        "min": 15,
+        "name": "id",
+        "pattern": "^[a-z0-9]+$",
+        "presentable": false,
+        "primaryKey": true,
+        "required": true,
+        "system": true,
+        "type": "text"
+      },
+      {
+        "cascadeDelete": false,
+        "collectionId": "pbc_1340419796",
+        "hidden": false,
+        "id": "relation4277159965",
+        "maxSelect": 1,
+        "minSelect": 0,
+        "name": "badge",
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "relation"
+      },
+      {
+        "cascadeDelete": false,
+        "collectionId": "pbc_3072146508",
+        "hidden": false,
+        "id": "relation2551806565",
+        "maxSelect": 1,
+        "minSelect": 0,
+        "name": "player",
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "relation"
+      },
+      {
+        "hidden": false,
+        "id": "number570552902",
+        "max": null,
+        "min": null,
+        "name": "progress",
+        "onlyInt": false,
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "number"
+      },
+      {
+        "hidden": false,
+        "id": "bool2625885481",
+        "name": "earned",
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "bool"
+      },
+      {
+        "hidden": false,
+        "id": "autodate2990389176",
+        "name": "created",
+        "onCreate": true,
+        "onUpdate": false,
+        "presentable": false,
+        "system": false,
+        "type": "autodate"
+      },
+      {
+        "hidden": false,
+        "id": "autodate3332085495",
+        "name": "updated",
+        "onCreate": true,
+        "onUpdate": true,
+        "presentable": false,
+        "system": false,
+        "type": "autodate"
+      }
+    ],
+    "id": "pbc_1063824264",
+    "indexes": [],
+    "listRule": null,
+    "name": "player_badge_progress",
+    "system": false,
+    "type": "base",
+    "updateRule": null,
+    "viewRule": null
+  });
+
+  return app.save(collection);
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_1063824264");
+
+  return app.delete(collection);
+})

pb_migrations/1759345318_updated_player_badge_progress.js

@@ -0,0 +1,20 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("pbc_1063824264")
+
+  // update collection data
+  unmarshal({
+    "name": "badge_progress"
+  }, collection)
+
+  return app.save(collection)
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_1063824264")
+
+  // update collection data
+  unmarshal({
+    "name": "player_badge_progress"
+  }, collection)
+
+  return app.save(collection)
+})

pb_migrations/1759594431_updated_tournaments.js

@@ -0,0 +1,29 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("pbc_340646327")
+
+  // add field
+  collection.fields.addAt(10, new Field({
+    "hidden": false,
+    "id": "file538556518",
+    "maxSelect": 1,
+    "maxSize": 0,
+    "mimeTypes": [],
+    "name": "glitch_logo",
+    "presentable": false,
+    "protected": false,
+    "required": false,
+    "system": false,
+    "thumbs": [],
+    "type": "file"
+  }))
+
+  return app.save(collection)
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_340646327")
+
+  // remove field
+  collection.fields.removeById("file538556518")
+
+  return app.save(collection)
+})

pb_migrations/1759594880_updated_tournaments.js

@@ -0,0 +1,42 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("pbc_340646327")
+
+  // update field
+  collection.fields.addAt(10, new Field({
+    "hidden": false,
+    "id": "file538556518",
+    "maxSelect": 1,
+    "maxSize": 6000000,
+    "mimeTypes": [],
+    "name": "glitch_logo",
+    "presentable": false,
+    "protected": false,
+    "required": false,
+    "system": false,
+    "thumbs": [],
+    "type": "file"
+  }))
+
+  return app.save(collection)
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_340646327")
+
+  // update field
+  collection.fields.addAt(10, new Field({
+    "hidden": false,
+    "id": "file538556518",
+    "maxSelect": 1,
+    "maxSize": 0,
+    "mimeTypes": [],
+    "name": "glitch_logo",
+    "presentable": false,
+    "protected": false,
+    "required": false,
+    "system": false,
+    "thumbs": [],
+    "type": "file"
+  }))
+
+  return app.save(collection)
+})

pb_migrations/1760127117_updated_players.js

@@ -0,0 +1,26 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("pbc_3072146508")
+
+  // add field
+  collection.fields.addAt(5, new Field({
+    "hidden": false,
+    "id": "date3558165700",
+    "max": "",
+    "min": "",
+    "name": "last_activity",
+    "presentable": false,
+    "required": false,
+    "system": false,
+    "type": "date"
+  }))
+
+  return app.save(collection)
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_3072146508")
+
+  // remove field
+  collection.fields.removeById("date3558165700")
+
+  return app.save(collection)
+})

pb_migrations/1760556705_updated_teams.js

@@ -0,0 +1,24 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("pbc_1568971955")
+
+  // add field
+  collection.fields.addAt(14, new Field({
+    "hidden": false,
+    "id": "bool3523658193",
+    "name": "private",
+    "presentable": false,
+    "required": false,
+    "system": false,
+    "type": "bool"
+  }))
+
+  return app.save(collection)
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_1568971955")
+
+  // remove field
+  collection.fields.removeById("bool3523658193")
+
+  return app.save(collection)
+})

pb_migrations/1760556851_updated_tournaments.js

@@ -0,0 +1,24 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("pbc_340646327")
+
+  // add field
+  collection.fields.addAt(12, new Field({
+    "hidden": false,
+    "id": "bool3403970290",
+    "name": "regional",
+    "presentable": false,
+    "required": false,
+    "system": false,
+    "type": "bool"
+  }))
+
+  return app.save(collection)
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_340646327")
+
+  // remove field
+  collection.fields.removeById("bool3403970290")
+
+  return app.save(collection)
+})

pb_migrations/1760556905_updated_tournaments.js

@@ -0,0 +1,31 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("pbc_340646327")
+
+  // add field
+  collection.fields.addAt(13, new Field({
+    "hidden": false,
+    "id": "select3736761055",
+    "maxSelect": 1,
+    "name": "format",
+    "presentable": false,
+    "required": false,
+    "system": false,
+    "type": "select",
+    "values": [
+      "single_elim",
+      "double_elim",
+      "groups",
+      "swiss"
+    ]
+  }))
+
+  return app.save(collection)
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_340646327")
+
+  // remove field
+  collection.fields.removeById("select3736761055")
+
+  return app.save(collection)
+})

pb_migrations/1760559911_created_player_regional_stats.js

@@ -0,0 +1,165 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = new Collection({
+    "createRule": null,
+    "deleteRule": null,
+    "fields": [
+      {
+        "autogeneratePattern": "",
+        "hidden": false,
+        "id": "text3208210256",
+        "max": 0,
+        "min": 0,
+        "name": "id",
+        "pattern": "^[a-z0-9]+$",
+        "presentable": false,
+        "primaryKey": true,
+        "required": true,
+        "system": true,
+        "type": "text"
+      },
+      {
+        "cascadeDelete": false,
+        "collectionId": "pbc_3072146508",
+        "hidden": false,
+        "id": "relation2582050271",
+        "maxSelect": 1,
+        "minSelect": 0,
+        "name": "player_id",
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "relation"
+      },
+      {
+        "hidden": false,
+        "id": "json4231605813",
+        "maxSize": 1,
+        "name": "player_name",
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "json"
+      },
+      {
+        "hidden": false,
+        "id": "number103159226",
+        "max": null,
+        "min": null,
+        "name": "matches",
+        "onlyInt": false,
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "number"
+      },
+      {
+        "hidden": false,
+        "id": "number3837590211",
+        "max": null,
+        "min": null,
+        "name": "tournaments",
+        "onlyInt": false,
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "number"
+      },
+      {
+        "hidden": false,
+        "id": "json2732118329",
+        "maxSize": 1,
+        "name": "wins",
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "json"
+      },
+      {
+        "hidden": false,
+        "id": "json724428801",
+        "maxSize": 1,
+        "name": "losses",
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "json"
+      },
+      {
+        "hidden": false,
+        "id": "json3154249934",
+        "maxSize": 1,
+        "name": "total_cups_made",
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "json"
+      },
+      {
+        "hidden": false,
+        "id": "json3227208027",
+        "maxSize": 1,
+        "name": "total_cups_against",
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "json"
+      },
+      {
+        "hidden": false,
+        "id": "json2379943496",
+        "maxSize": 1,
+        "name": "win_percentage",
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "json"
+      },
+      {
+        "hidden": false,
+        "id": "json3165107022",
+        "maxSize": 1,
+        "name": "avg_cups_per_match",
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "json"
+      },
+      {
+        "hidden": false,
+        "id": "json3041953980",
+        "maxSize": 1,
+        "name": "margin_of_victory",
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "json"
+      },
+      {
+        "hidden": false,
+        "id": "json1531431708",
+        "maxSize": 1,
+        "name": "margin_of_loss",
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "json"
+      }
+    ],
+    "id": "pbc_4086490894",
+    "indexes": [],
+    "listRule": null,
+    "name": "player_regional_stats",
+    "system": false,
+    "type": "view",
+    "updateRule": null,
+    "viewQuery": "SELECT\n      p.id as id,\n      p.id as player_id,\n      (p.first_name || ' ' || p.last_name) as player_name,\n      COUNT(m.id) as matches,\n      COUNT(DISTINCT m.tournament) as tournaments,\n      SUM(CASE\n          WHEN (m.home = t.id AND m.home_cups > m.away_cups) OR\n               (m.away = t.id AND m.away_cups > m.home_cups)\n          THEN 1 ELSE 0\n      END) as wins,\n      SUM(CASE\n          WHEN (m.home = t.id AND m.home_cups < m.away_cups) OR\n               (m.away = t.id AND m.away_cups < m.home_cups)\n          THEN 1 ELSE 0\n      END) as losses,\n      SUM(CASE\n          WHEN m.home = t.id THEN m.home_cups\n          WHEN m.away = t.id THEN m.away_cups\n          ELSE 0\n      END) as total_cups_made,\n      SUM(CASE\n          WHEN m.home = t.id THEN m.away_cups\n          WHEN m.away = t.id THEN m.home_cups\n          ELSE 0\n      END) as total_cups_against,\n      -- Win percentage\n      ROUND((CAST(SUM(CASE\n          WHEN (m.home = t.id AND m.home_cups > m.away_cups) OR\n               (m.away = t.id AND m.away_cups > m.home_cups)\n          THEN 1 ELSE 0\n      END) AS REAL) / COUNT(m.id)) * 100, 2) as win_percentage,\n      -- Average cups per match\n      ROUND(CAST(SUM(CASE\n          WHEN m.home = t.id THEN m.home_cups\n          WHEN m.away = t.id THEN m.away_cups\n          ELSE 0\n      END) AS REAL) / COUNT(m.id), 2) as avg_cups_per_match,\n      -- Margin of Victory\n      ROUND(AVG(CASE\n          WHEN m.home = t.id AND m.home_cups > m.away_cups\n          THEN m.home_cups - m.away_cups\n          WHEN m.away = t.id AND m.away_cups > m.home_cups\n          THEN m.away_cups - m.home_cups\n          ELSE NULL\n      END), 2) as margin_of_victory,\n      -- Margin of Loss\n      ROUND(AVG(CASE\n          WHEN m.home = t.id AND m.home_cups < m.away_cups\n          THEN m.away_cups - m.home_cups\n          WHEN m.away = t.id AND m.away_cups < m.home_cups\n          THEN m.home_cups - m.away_cups\n          ELSE NULL\n      END), 2) as margin_of_loss\n  FROM players p, teams t, matches m, tournaments tour\n  WHERE\n      t.players LIKE '%\"' || p.id || '\"%' AND\n      (m.home = t.id OR m.away = t.id) AND\n      m.tournament = tour.id AND\n      m.status = 'ended' AND\n      tour.regional = true\n  GROUP BY p.id",
+    "viewRule": null
+  });
+
+  return app.save(collection);
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_4086490894");
+
+  return app.delete(collection);
+})

pb_migrations/1760559954_created_player_mainline_stats.js

@@ -0,0 +1,165 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = new Collection({
+    "createRule": null,
+    "deleteRule": null,
+    "fields": [
+      {
+        "autogeneratePattern": "",
+        "hidden": false,
+        "id": "text3208210256",
+        "max": 0,
+        "min": 0,
+        "name": "id",
+        "pattern": "^[a-z0-9]+$",
+        "presentable": false,
+        "primaryKey": true,
+        "required": true,
+        "system": true,
+        "type": "text"
+      },
+      {
+        "cascadeDelete": false,
+        "collectionId": "pbc_3072146508",
+        "hidden": false,
+        "id": "relation2582050271",
+        "maxSelect": 1,
+        "minSelect": 0,
+        "name": "player_id",
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "relation"
+      },
+      {
+        "hidden": false,
+        "id": "json4231605813",
+        "maxSize": 1,
+        "name": "player_name",
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "json"
+      },
+      {
+        "hidden": false,
+        "id": "number103159226",
+        "max": null,
+        "min": null,
+        "name": "matches",
+        "onlyInt": false,
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "number"
+      },
+      {
+        "hidden": false,
+        "id": "number3837590211",
+        "max": null,
+        "min": null,
+        "name": "tournaments",
+        "onlyInt": false,
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "number"
+      },
+      {
+        "hidden": false,
+        "id": "json2732118329",
+        "maxSize": 1,
+        "name": "wins",
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "json"
+      },
+      {
+        "hidden": false,
+        "id": "json724428801",
+        "maxSize": 1,
+        "name": "losses",
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "json"
+      },
+      {
+        "hidden": false,
+        "id": "json3154249934",
+        "maxSize": 1,
+        "name": "total_cups_made",
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "json"
+      },
+      {
+        "hidden": false,
+        "id": "json3227208027",
+        "maxSize": 1,
+        "name": "total_cups_against",
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "json"
+      },
+      {
+        "hidden": false,
+        "id": "json2379943496",
+        "maxSize": 1,
+        "name": "win_percentage",
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "json"
+      },
+      {
+        "hidden": false,
+        "id": "json3165107022",
+        "maxSize": 1,
+        "name": "avg_cups_per_match",
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "json"
+      },
+      {
+        "hidden": false,
+        "id": "json3041953980",
+        "maxSize": 1,
+        "name": "margin_of_victory",
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "json"
+      },
+      {
+        "hidden": false,
+        "id": "json1531431708",
+        "maxSize": 1,
+        "name": "margin_of_loss",
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "json"
+      }
+    ],
+    "id": "pbc_15286826",
+    "indexes": [],
+    "listRule": null,
+    "name": "player_mainline_stats",
+    "system": false,
+    "type": "view",
+    "updateRule": null,
+    "viewQuery": "SELECT\n      p.id as id,\n      p.id as player_id,\n      (p.first_name || ' ' || p.last_name) as player_name,\n      COUNT(m.id) as matches,\n      COUNT(DISTINCT m.tournament) as tournaments,\n      SUM(CASE\n          WHEN (m.home = t.id AND m.home_cups > m.away_cups) OR\n               (m.away = t.id AND m.away_cups > m.home_cups)\n          THEN 1 ELSE 0\n      END) as wins,\n      SUM(CASE\n          WHEN (m.home = t.id AND m.home_cups < m.away_cups) OR\n               (m.away = t.id AND m.away_cups < m.home_cups)\n          THEN 1 ELSE 0\n      END) as losses,\n      SUM(CASE\n          WHEN m.home = t.id THEN m.home_cups\n          WHEN m.away = t.id THEN m.away_cups\n          ELSE 0\n      END) as total_cups_made,\n      SUM(CASE\n          WHEN m.home = t.id THEN m.away_cups\n          WHEN m.away = t.id THEN m.home_cups\n          ELSE 0\n      END) as total_cups_against,\n      -- Win percentage\n      ROUND((CAST(SUM(CASE\n          WHEN (m.home = t.id AND m.home_cups > m.away_cups) OR\n               (m.away = t.id AND m.away_cups > m.home_cups)\n          THEN 1 ELSE 0\n      END) AS REAL) / COUNT(m.id)) * 100, 2) as win_percentage,\n      -- Average cups per match\n      ROUND(CAST(SUM(CASE\n          WHEN m.home = t.id THEN m.home_cups\n          WHEN m.away = t.id THEN m.away_cups\n          ELSE 0\n      END) AS REAL) / COUNT(m.id), 2) as avg_cups_per_match,\n      -- Margin of Victory\n      ROUND(AVG(CASE\n          WHEN m.home = t.id AND m.home_cups > m.away_cups\n          THEN m.home_cups - m.away_cups\n          WHEN m.away = t.id AND m.away_cups > m.home_cups\n          THEN m.away_cups - m.home_cups\n          ELSE NULL\n      END), 2) as margin_of_victory,\n      -- Margin of Loss\n      ROUND(AVG(CASE\n          WHEN m.home = t.id AND m.home_cups < m.away_cups\n          THEN m.away_cups - m.home_cups\n          WHEN m.away = t.id AND m.away_cups < m.home_cups\n          THEN m.home_cups - m.away_cups\n          ELSE NULL\n      END), 2) as margin_of_loss\n  FROM players p, teams t, matches m, tournaments tour\n  WHERE\n      t.players LIKE '%\"' || p.id || '\"%' AND\n      (m.home = t.id OR m.away = t.id) AND\n      m.tournament = tour.id AND\n      m.status = 'ended' AND\n      (tour.regional = false OR tour.regional IS NULL)\n  GROUP BY p.id",
+    "viewRule": null
+  });
+
+  return app.save(collection);
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_15286826");
+
+  return app.delete(collection);
+})

pb_migrations/1760585178_updated_tournaments.js

@@ -0,0 +1,48 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("pbc_340646327")
+
+  // update field
+  collection.fields.addAt(13, new Field({
+    "hidden": false,
+    "id": "select3736761055",
+    "maxSelect": 1,
+    "name": "format",
+    "presentable": false,
+    "required": false,
+    "system": false,
+    "type": "select",
+    "values": [
+      "single_elim",
+      "double_elim",
+      "groups",
+      "swiss",
+      "swiss_bracket",
+      "round_robin"
+    ]
+  }))
+
+  return app.save(collection)
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_340646327")
+
+  // update field
+  collection.fields.addAt(13, new Field({
+    "hidden": false,
+    "id": "select3736761055",
+    "maxSelect": 1,
+    "name": "format",
+    "presentable": false,
+    "required": false,
+    "system": false,
+    "type": "select",
+    "values": [
+      "single_elim",
+      "double_elim",
+      "groups",
+      "swiss"
+    ]
+  }))
+
+  return app.save(collection)
+})

public/site.webmanifest

@@ -1,14 +1,14 @@
 {
-  "name": "",
-  "short_name": "",
+  "name": "FLXN IX",
+  "short_name": "FLXN",
   "icons": [
     {
-      "src": "/android-chrome-192x192.png",
+      "src": "/favicon.png",
       "sizes": "192x192",
       "type": "image/png"
     },
     {
-      "src": "/android-chrome-512x512.png",
+      "src": "/favicon.png",
       "sizes": "512x512",
       "type": "image/png"
     }

server.ts

@@ -330,6 +330,8 @@ async function startServer() {
   const server = Bun.serve({
     port: PORT,
 
+    idleTimeout: 255,
+
     routes: {
       // Serve static assets (preloaded or on-demand)
       ...routes,

src/app/routeTree.gen.ts

@@ -16,6 +16,7 @@ import { Route as AuthedRouteImport } from './routes/_authed'
 import { Route as AuthedIndexRouteImport } from './routes/_authed/index'
 import { Route as AuthedStatsRouteImport } from './routes/_authed/stats'
 import { Route as AuthedSettingsRouteImport } from './routes/_authed/settings'
+import { Route as AuthedBadgesRouteImport } from './routes/_authed/badges'
 import { Route as AuthedAdminRouteImport } from './routes/_authed/admin'
 import { Route as AuthedTournamentsIndexRouteImport } from './routes/_authed/tournaments/index'
 import { Route as AuthedAdminIndexRouteImport } from './routes/_authed/admin/index'
@@ -33,6 +34,8 @@ import { Route as AuthedTournamentsTournamentIdRouteImport } from './routes/_aut
 import { Route as AuthedTeamsTeamIdRouteImport } from './routes/_authed/teams.$teamId'
 import { Route as AuthedProfilePlayerIdRouteImport } from './routes/_authed/profile.$playerId'
 import { Route as AuthedAdminPreviewRouteImport } from './routes/_authed/admin/preview'
+import { Route as AuthedAdminBadgesRouteImport } from './routes/_authed/admin/badges'
+import { Route as AuthedAdminActivitiesRouteImport } from './routes/_authed/admin/activities'
 import { Route as AuthedAdminTournamentsIndexRouteImport } from './routes/_authed/admin/tournaments/index'
 import { Route as AuthedTournamentsIdBracketRouteImport } from './routes/_authed/tournaments/$id.bracket'
 import { Route as AuthedAdminTournamentsIdIndexRouteImport } from './routes/_authed/admin/tournaments/$id/index'
@@ -74,6 +77,11 @@ const AuthedSettingsRoute = AuthedSettingsRouteImport.update({
   path: '/settings',
   getParentRoute: () => AuthedRoute,
 } as any)
+const AuthedBadgesRoute = AuthedBadgesRouteImport.update({
+  id: '/badges',
+  path: '/badges',
+  getParentRoute: () => AuthedRoute,
+} as any)
 const AuthedAdminRoute = AuthedAdminRouteImport.update({
   id: '/admin',
   path: '/admin',
@@ -161,6 +169,16 @@ const AuthedAdminPreviewRoute = AuthedAdminPreviewRouteImport.update({
   path: '/preview',
   getParentRoute: () => AuthedAdminRoute,
 } as any)
+const AuthedAdminBadgesRoute = AuthedAdminBadgesRouteImport.update({
+  id: '/badges',
+  path: '/badges',
+  getParentRoute: () => AuthedAdminRoute,
+} as any)
+const AuthedAdminActivitiesRoute = AuthedAdminActivitiesRouteImport.update({
+  id: '/activities',
+  path: '/activities',
+  getParentRoute: () => AuthedAdminRoute,
+} as any)
 const AuthedAdminTournamentsIndexRoute =
   AuthedAdminTournamentsIndexRouteImport.update({
     id: '/tournaments/',
@@ -203,9 +221,12 @@ export interface FileRoutesByFullPath {
   '/logout': typeof LogoutRoute
   '/refresh-session': typeof RefreshSessionRoute
   '/admin': typeof AuthedAdminRouteWithChildren
+  '/badges': typeof AuthedBadgesRoute
   '/settings': typeof AuthedSettingsRoute
   '/stats': typeof AuthedStatsRoute
   '/': typeof AuthedIndexRoute
+  '/admin/activities': typeof AuthedAdminActivitiesRoute
+  '/admin/badges': typeof AuthedAdminBadgesRoute
   '/admin/preview': typeof AuthedAdminPreviewRoute
   '/profile/$playerId': typeof AuthedProfilePlayerIdRoute
   '/teams/$teamId': typeof AuthedTeamsTeamIdRoute
@@ -233,9 +254,12 @@ export interface FileRoutesByTo {
   '/login': typeof LoginRoute
   '/logout': typeof LogoutRoute
   '/refresh-session': typeof RefreshSessionRoute
+  '/badges': typeof AuthedBadgesRoute
   '/settings': typeof AuthedSettingsRoute
   '/stats': typeof AuthedStatsRoute
   '/': typeof AuthedIndexRoute
+  '/admin/activities': typeof AuthedAdminActivitiesRoute
+  '/admin/badges': typeof AuthedAdminBadgesRoute
   '/admin/preview': typeof AuthedAdminPreviewRoute
   '/profile/$playerId': typeof AuthedProfilePlayerIdRoute
   '/teams/$teamId': typeof AuthedTeamsTeamIdRoute
@@ -266,9 +290,12 @@ export interface FileRoutesById {
   '/logout': typeof LogoutRoute
   '/refresh-session': typeof RefreshSessionRoute
   '/_authed/admin': typeof AuthedAdminRouteWithChildren
+  '/_authed/badges': typeof AuthedBadgesRoute
   '/_authed/settings': typeof AuthedSettingsRoute
   '/_authed/stats': typeof AuthedStatsRoute
   '/_authed/': typeof AuthedIndexRoute
+  '/_authed/admin/activities': typeof AuthedAdminActivitiesRoute
+  '/_authed/admin/badges': typeof AuthedAdminBadgesRoute
   '/_authed/admin/preview': typeof AuthedAdminPreviewRoute
   '/_authed/profile/$playerId': typeof AuthedProfilePlayerIdRoute
   '/_authed/teams/$teamId': typeof AuthedTeamsTeamIdRoute
@@ -299,9 +326,12 @@ export interface FileRouteTypes {
     | '/logout'
     | '/refresh-session'
     | '/admin'
+    | '/badges'
     | '/settings'
     | '/stats'
     | '/'
+    | '/admin/activities'
+    | '/admin/badges'
     | '/admin/preview'
     | '/profile/$playerId'
     | '/teams/$teamId'
@@ -329,9 +359,12 @@ export interface FileRouteTypes {
     | '/login'
     | '/logout'
     | '/refresh-session'
+    | '/badges'
     | '/settings'
     | '/stats'
     | '/'
+    | '/admin/activities'
+    | '/admin/badges'
     | '/admin/preview'
     | '/profile/$playerId'
     | '/teams/$teamId'
@@ -361,9 +394,12 @@ export interface FileRouteTypes {
     | '/logout'
     | '/refresh-session'
     | '/_authed/admin'
+    | '/_authed/badges'
     | '/_authed/settings'
     | '/_authed/stats'
     | '/_authed/'
+    | '/_authed/admin/activities'
+    | '/_authed/admin/badges'
     | '/_authed/admin/preview'
     | '/_authed/profile/$playerId'
     | '/_authed/teams/$teamId'
@@ -457,6 +493,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AuthedSettingsRouteImport
       parentRoute: typeof AuthedRoute
     }
+    '/_authed/badges': {
+      id: '/_authed/badges'
+      path: '/badges'
+      fullPath: '/badges'
+      preLoaderRoute: typeof AuthedBadgesRouteImport
+      parentRoute: typeof AuthedRoute
+    }
     '/_authed/admin': {
       id: '/_authed/admin'
       path: '/admin'
@@ -576,6 +619,20 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AuthedAdminPreviewRouteImport
       parentRoute: typeof AuthedAdminRoute
     }
+    '/_authed/admin/badges': {
+      id: '/_authed/admin/badges'
+      path: '/badges'
+      fullPath: '/admin/badges'
+      preLoaderRoute: typeof AuthedAdminBadgesRouteImport
+      parentRoute: typeof AuthedAdminRoute
+    }
+    '/_authed/admin/activities': {
+      id: '/_authed/admin/activities'
+      path: '/activities'
+      fullPath: '/admin/activities'
+      preLoaderRoute: typeof AuthedAdminActivitiesRouteImport
+      parentRoute: typeof AuthedAdminRoute
+    }
     '/_authed/admin/tournaments/': {
       id: '/_authed/admin/tournaments/'
       path: '/tournaments'
@@ -622,6 +679,8 @@ declare module '@tanstack/react-router' {
 }
 
 interface AuthedAdminRouteChildren {
+  AuthedAdminActivitiesRoute: typeof AuthedAdminActivitiesRoute
+  AuthedAdminBadgesRoute: typeof AuthedAdminBadgesRoute
   AuthedAdminPreviewRoute: typeof AuthedAdminPreviewRoute
   AuthedAdminIndexRoute: typeof AuthedAdminIndexRoute
   AuthedAdminTournamentsIndexRoute: typeof AuthedAdminTournamentsIndexRoute
@@ -631,6 +690,8 @@ interface AuthedAdminRouteChildren {
 }
 
 const AuthedAdminRouteChildren: AuthedAdminRouteChildren = {
+  AuthedAdminActivitiesRoute: AuthedAdminActivitiesRoute,
+  AuthedAdminBadgesRoute: AuthedAdminBadgesRoute,
   AuthedAdminPreviewRoute: AuthedAdminPreviewRoute,
   AuthedAdminIndexRoute: AuthedAdminIndexRoute,
   AuthedAdminTournamentsIndexRoute: AuthedAdminTournamentsIndexRoute,
@@ -645,6 +706,7 @@ const AuthedAdminRouteWithChildren = AuthedAdminRoute._addFileChildren(
 
 interface AuthedRouteChildren {
   AuthedAdminRoute: typeof AuthedAdminRouteWithChildren
+  AuthedBadgesRoute: typeof AuthedBadgesRoute
   AuthedSettingsRoute: typeof AuthedSettingsRoute
   AuthedStatsRoute: typeof AuthedStatsRoute
   AuthedIndexRoute: typeof AuthedIndexRoute
@@ -657,6 +719,7 @@ interface AuthedRouteChildren {
 
 const AuthedRouteChildren: AuthedRouteChildren = {
   AuthedAdminRoute: AuthedAdminRouteWithChildren,
+  AuthedBadgesRoute: AuthedBadgesRoute,
   AuthedSettingsRoute: AuthedSettingsRoute,
   AuthedStatsRoute: AuthedStatsRoute,
   AuthedIndexRoute: AuthedIndexRoute,

src/app/router.tsx

@@ -13,7 +13,7 @@ export function getRouter() {
         gcTime: 5 * 60 * 1000, // 5 minutes
         refetchOnWindowFocus: false,
         refetchOnReconnect: "always",
-        retry: 3,
+        retry: 1,
       },
     },
   });

src/app/routes/__root.tsx

@@ -30,6 +30,7 @@ export const Route = createRootRouteWithContext<{
   fullWidth: boolean;
 }>()({
   head: () => ({
+    title: "FLXN IX",
     meta: [
       {
         charSet: "utf-8",
@@ -37,33 +38,49 @@ export const Route = createRootRouteWithContext<{
       {
         name: "viewport",
         content:
-          "width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, interactive-widget=overlays-content",
+          "width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, interactive-widget=resizes-content",
       },
+      { property: 'og:title', content: 'FLXN IX' },
+      { property: 'og:description', content: 'Register for FLXN IX and view FLXN stats' },
+      { property: 'og:url', content: 'https://flexxon.app' },
+      { property: 'og:type', content: 'website' },
+      { property: 'og:site_name', content: 'FLXN IX' },
+      { property: 'og:image', content: 'https://flexxon.app/favicon.png' },
     ],
     links: [
       {
         rel: "apple-touch-icon",
         sizes: "180x180",
-        href: "/apple-touch-icon.png",
+        href: "/favicon.png",
       },
       {
         rel: "icon",
         type: "image/png",
         sizes: "32x32",
-        href: "/favicon-32x32.png",
+        href: "/favicon.png",
       },
       {
         rel: "icon",
         type: "image/png",
         sizes: "16x16",
-        href: "/favicon-16x16.png",
+        href: "/favicon.png",
       },
       { rel: "manifest", href: "/site.webmanifest" },
       { rel: "icon", href: "/favicon.ico" },
       { rel: 'stylesheet', href: mantineCssUrl },
       { rel: 'stylesheet', href: mantineCarouselCssUrl },
       { rel: 'stylesheet', href: mantineDatesCssUrl },
-      { rel: 'stylesheet', href: mantineTiptapCssUrl }
+      { rel: 'stylesheet', href: mantineTiptapCssUrl },
+      { rel: "preconnect", href: "https://fonts.googleapis.com" },
+      {
+        rel: "preconnect",
+        href: "https://fonts.gstatic.com",
+        crossOrigin: "anonymous",
+      },
+      {
+        rel: "stylesheet",
+        href: "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=League+Spartan:wght@100..900&display=swap",
+      }
     ],
   }),
   errorComponent: (props) => {
@@ -122,8 +139,7 @@ function RootDocument({ children }: { children: React.ReactNode }) {
       {...mantineHtmlProps}
       style={{
         overflowX: "hidden",
-        overflowY: "hidden",
-        position: "fixed",
+        height: "100%",
         width: "100%",
       }}
     >
@@ -135,9 +151,10 @@ function RootDocument({ children }: { children: React.ReactNode }) {
       <body
         style={{
           overflowX: "hidden",
-          overflowY: "hidden",
-          position: "fixed",
+          height: "100%",
           width: "100%",
+          margin: 0,
+          padding: 0,
         }}
       >
         <div className="app">{children}</div>

src/app/routes/_authed/admin/activities.tsx

@@ -0,0 +1,45 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { prefetchServerQuery } from "@/lib/tanstack-query/utils/prefetch";
+import { ActivitiesTable, activityQueries } from "@/features/activities";
+import { PlayersActivityTable, playerQueries } from "@/features/players";
+import { Tabs } from "@mantine/core";
+import { useState } from "react";
+
+export const Route = createFileRoute("/_authed/admin/activities")({
+  component: Stats,
+  beforeLoad: ({ context }) => {
+    const queryClient = context.queryClient;
+    prefetchServerQuery(queryClient, activityQueries.search());
+    prefetchServerQuery(queryClient, playerQueries.activity());
+  },
+  loader: () => ({
+    withPadding: false,
+    fullWidth: true,
+    header: {
+      title: "Activities",
+      withBackButton: true,
+    },
+    refresh: [activityQueries.search().queryKey, playerQueries.activity().queryKey],
+  }),
+});
+
+function Stats() {
+  const [activeTab, setActiveTab] = useState<string | null>("server-functions");
+
+  return (
+    <Tabs value={activeTab} onChange={setActiveTab}>
+      <Tabs.List mb='md'>
+        <Tabs.Tab value="server-functions">Server Functions</Tabs.Tab>
+        <Tabs.Tab value="player-activity">Player Activity</Tabs.Tab>
+      </Tabs.List>
+
+      <Tabs.Panel value="server-functions">
+        <ActivitiesTable />
+      </Tabs.Panel>
+
+      <Tabs.Panel value="player-activity">
+        <PlayersActivityTable />
+      </Tabs.Panel>
+    </Tabs>
+  );
+}

src/app/routes/_authed/admin/badges.tsx

@@ -0,0 +1,10 @@
+import { createFileRoute } from "@tanstack/react-router";
+import AwardBadges from "@/features/admin/components/award-badges";
+
+export const Route = createFileRoute("/_authed/admin/badges")({
+  component: RouteComponent,
+});
+
+function RouteComponent() {
+  return <AwardBadges />;
+}

src/app/routes/_authed/admin/tournaments/run.$id.tsx

@@ -11,6 +11,7 @@ import { BracketData } from "@/features/bracket/types";
 import { Match } from "@/features/matches/types";
 import BracketView from "@/features/bracket/components/bracket-view";
 import { SpotifyControlsBar } from "@/features/spotify/components";
+import { useAuth } from "@/contexts/auth-context";
 
 export const Route = createFileRoute("/_authed/admin/tournaments/run/$id")({
   beforeLoad: async ({ context, params }) => {
@@ -39,6 +40,8 @@ export const Route = createFileRoute("/_authed/admin/tournaments/run/$id")({
 function RouteComponent() {
   const { id } = Route.useParams();
   const { data: tournament } = useTournament(id);
+  const { roles } = useAuth();
+  const isAdmin = roles?.includes('Admin') || false;
 
   const bracket: BracketData = useMemo(() => {
     if (!tournament.matches || tournament.matches.length === 0) {
@@ -76,7 +79,7 @@ function RouteComponent() {
 
   return (
     <Container size="md" px={0}>
-      <SpotifyControlsBar />
+      { isAdmin && <SpotifyControlsBar />}
       {tournament.matches?.length ? (
         <BracketView bracket={bracket} showControls />
       ) : (

src/app/routes/_authed/badges.tsx

@@ -0,0 +1,34 @@
+import BadgeStatsTable from '@/features/badges/components/badge-stats-table';
+import BadgeStatsTableSkeleton from '@/features/badges/components/badge-stats-table-skeleton';
+import { badgeQueries, useAllBadges } from '@/features/badges/queries';
+import PlayerStatsTableSkeleton from '@/features/players/components/player-stats-table-skeleton';
+import { prefetchServerQuery } from '@/lib/tanstack-query/utils/prefetch';
+import { createFileRoute } from '@tanstack/react-router';
+import { Suspense } from 'react';
+
+export const Route = createFileRoute('/_authed/badges')({
+  component: Badges,
+  beforeLoad: ({ context }) => {
+    const queryClient = context.queryClient;
+    prefetchServerQuery(queryClient, badgeQueries.allBadges());
+  },
+  loader: () => ({
+    withPadding: false,
+    fullWidth: true,
+    header: {
+      title: 'All Badges',
+      withBackButton: true,
+    },
+    refresh: [badgeQueries.allBadges().queryKey],
+  }),
+});
+
+function Badges() {
+  return (
+    <Suspense fallback={<BadgeStatsTableSkeleton />}>
+      <div>
+        <BadgeStatsTable />
+      </div>
+    </Suspense>
+  );
+}

src/app/routes/_authed/profile.$playerId.tsx

@@ -1,3 +1,4 @@
+import { badgeKeys, badgeQueries } from "@/features/badges/queries";
 import Profile from "@/features/players/components/profile";
 import HeaderSkeleton from "@/features/players/components/profile/header-skeleton";
 import ProfileSkeleton from "@/features/players/components/profile/skeleton";
@@ -24,6 +25,14 @@ export const Route = createFileRoute("/_authed/profile/$playerId")({
         queryClient,
         playerQueries.matches(params.playerId)
       ),
+      prefetchServerQuery(
+        queryClient,
+        playerQueries.stats(params.playerId)
+      ),
+      prefetchServerQuery(
+        queryClient,
+        badgeQueries.playerBadges(params.playerId)
+      ),
     ]);
   },
   loader: ({ params, context }) => ({
@@ -34,7 +43,7 @@ export const Route = createFileRoute("/_authed/profile/$playerId")({
         context?.auth.user.id === params.playerId ? "/settings" : undefined,
     },
     withPadding: false,
-    refresh: [playerKeys.details(params.playerId), playerKeys.matches(params.playerId), playerKeys.stats(params.playerId)],
+    refresh: [playerKeys.details(params.playerId), playerKeys.matches(params.playerId), playerKeys.stats(params.playerId), badgeKeys.playerBadges(params.playerId)],
   }),
   component: () => {
     const { playerId } = Route.useParams();

src/app/routes/_authed/stats.tsx

@@ -1,15 +1,19 @@
 import { createFileRoute } from "@tanstack/react-router";
 import { playerQueries } from "@/features/players/queries";
 import PlayerStatsTable from "@/features/players/components/player-stats-table";
-import { Suspense } from "react";
+import { Suspense, useState, useDeferredValue } from "react";
 import PlayerStatsTableSkeleton from "@/features/players/components/player-stats-table-skeleton";
 import { prefetchServerQuery } from "@/lib/tanstack-query/utils/prefetch";
+import LeagueHeadToHead from "@/features/players/components/league-head-to-head";
+import { Box, Loader, Tabs, Button, Group, Container, Stack } from "@mantine/core";
 
 export const Route = createFileRoute("/_authed/stats")({
   component: Stats,
   beforeLoad: ({ context }) => {
     const queryClient = context.queryClient;
-    prefetchServerQuery(queryClient, playerQueries.allStats());
+    prefetchServerQuery(queryClient, playerQueries.allStats('all'));
+    prefetchServerQuery(queryClient, playerQueries.allStats('mainline'));
+    prefetchServerQuery(queryClient, playerQueries.allStats('regional'));
   },
   loader: () => ({
     withPadding: false,
@@ -17,12 +21,62 @@ export const Route = createFileRoute("/_authed/stats")({
     header: {
       title: "Player Stats"
     },
-        refresh: [playerQueries.allStats().queryKey],
+    refresh: [playerQueries.allStats().queryKey],
   }),
 });
 
 function Stats() {
-  return <Suspense fallback={<PlayerStatsTableSkeleton />}>
-    <PlayerStatsTable />
-  </Suspense>;
+  const [viewType, setViewType] = useState<'all' | 'mainline' | 'regional'>('all');
+  const deferredViewType = useDeferredValue(viewType);
+  const isStale = viewType !== deferredViewType;
+
+  return (
+    <Tabs defaultValue="stats">
+      <Tabs.List grow>
+        <Tabs.Tab value="stats">Stats</Tabs.Tab>
+        <Tabs.Tab value="h2h">Head to Head</Tabs.Tab>
+      </Tabs.List>
+
+      <Tabs.Panel value="stats">
+        <Container size="100%" px={0} mt="md">
+          <Stack gap="xs">
+            <Group gap="xs" px="md" justify="center">
+              <Button
+                variant={viewType === 'all' ? 'filled' : 'light'}
+                size="compact-xs"
+                onClick={() => setViewType('all')}
+              >
+                All
+              </Button>
+              <Button
+                variant={viewType === 'mainline' ? 'filled' : 'light'}
+                size="compact-xs"
+                onClick={() => setViewType('mainline')}
+              >
+                Mainline
+              </Button>
+              <Button
+                variant={viewType === 'regional' ? 'filled' : 'light'}
+                size="compact-xs"
+                onClick={() => setViewType('regional')}
+              >
+                Regional
+              </Button>
+            </Group>
+            <Box style={{ opacity: isStale ? 0.6 : 1, transition: 'opacity 150ms' }}>
+              <Suspense key={deferredViewType} fallback={<PlayerStatsTableSkeleton hideFilters />}>
+                <PlayerStatsTable viewType={deferredViewType} />
+              </Suspense>
+            </Box>
+          </Stack>
+        </Container>
+      </Tabs.Panel>
+
+      <Tabs.Panel value="h2h">
+        <Suspense fallback={<Box w='100vw' py='xl'><Loader ml='45vw' /></Box>}>
+          <LeagueHeadToHead />
+        </Suspense>
+      </Tabs.Panel>
+    </Tabs>
+  );
 }

src/app/routes/_authed/tournaments/$id.bracket.tsx

@@ -10,7 +10,6 @@ import { useMemo } from "react";
 import { BracketData } from "@/features/bracket/types";
 import { Match } from "@/features/matches/types";
 import BracketView from "@/features/bracket/components/bracket-view";
-import { SpotifyControlsBar } from "@/features/spotify/components";
 
 export const Route = createFileRoute("/_authed/tournaments/$id/bracket")({
   beforeLoad: async ({ context, params }) => {

src/app/routes/api/events.$.ts

@@ -3,11 +3,16 @@ import { serverEvents, type ServerEvent } from "@/lib/events/emitter";
 import { logger } from "@/lib/logger";
 import { superTokensRequestMiddleware } from "@/utils/supertokens";
 
+let activeConnections = 0;
+
 export const Route = createFileRoute("/api/events/$")({
   server: {
     middleware: [superTokensRequestMiddleware],
     handlers: {
-      GET: ({ request, context }) => {
+      GET: ({ request }) => {
+        activeConnections++;
+        const connectionId = `conn_${Date.now()}_${Math.random().toString(36).substring(2, 11)}`;
+        logger.info(`ServerEvents | New connection ${connectionId}. Active: ${activeConnections}`);
         const stream = new ReadableStream({
           start(controller) {
             const connectMessage = `data: ${JSON.stringify({ type: "connected" })}\n\n`;
@@ -17,6 +22,10 @@ export const Route = createFileRoute("/api/events/$")({
               logger.info("ServerEvents | Event received", event);
               const message = `data: ${JSON.stringify(event)}\n\n`;
               try {
+                if (!controller.desiredSize || controller.desiredSize <= 0) {
+                  logger.warn("ServerEvents | Stream closed, skipping event");
+                  return;
+                }
                 controller.enqueue(new TextEncoder().encode(message));
               } catch (error) {
                 logger.error("ServerEvents | Error sending SSE message", error);
@@ -29,16 +38,34 @@ export const Route = createFileRoute("/api/events/$")({
 
             const pingInterval = setInterval(() => {
               try {
-                const pingMessage = `data: ${JSON.stringify({ type: "ping" })}\n\n`;
+                if (!controller.desiredSize || controller.desiredSize <= 0) {
+                  clearInterval(pingInterval);
+                  return;
+                }
+                const pingMessage = `data: ${JSON.stringify({ type: "ping", timestamp: Date.now() })}\n\n`;
                 controller.enqueue(new TextEncoder().encode(pingMessage));
               } catch (e) {
+                logger.error("ServerEvents | Ping interval error", e);
                 clearInterval(pingInterval);
               }
-            }, 30000);
+            }, 15000);
+
+            setTimeout(() => {
+              try {
+                const heartbeatMessage = `data: ${JSON.stringify({ type: "heartbeat", timestamp: Date.now() })}\n\n`;
+                controller.enqueue(new TextEncoder().encode(heartbeatMessage));
+              } catch (e) {
+                logger.error("ServerEvents | Heartbeat error", e);
+              }
+            }, 1000);
 
             const cleanup = () => {
+              activeConnections--;
               serverEvents.off("test", handleEvent);
+              serverEvents.off("match", handleEvent);
+              serverEvents.off("reaction", handleEvent);
               clearInterval(pingInterval);
+              logger.info(`ServerEvents | Connection ${connectionId} cleanup completed. Active: ${activeConnections}`);
             };
 
             request.signal?.addEventListener("abort", cleanup);
@@ -49,10 +76,14 @@ export const Route = createFileRoute("/api/events/$")({
         return new Response(stream, {
           headers: {
             "Content-Type": "text/event-stream",
-            "Cache-Control": "no-cache",
-            Connection: "keep-alive",
+            "Cache-Control": "no-cache, no-store, must-revalidate",
+            "Connection": "keep-alive",
             "Access-Control-Allow-Origin": "*",
             "Access-Control-Allow-Headers": "Cache-Control",
+            "X-Accel-Buffering": "no",
+            "X-Proxy-Buffering": "no",
+            "Proxy-Buffering": "off",
+            "Transfer-Encoding": "chunked",
           },
         });
       },

src/app/routes/api/files/$collection/$recordId/$file.ts

@@ -13,13 +13,6 @@ export const Route = createFileRoute(
             process.env.POCKETBASE_URL || "http://127.0.0.1:8090";
           const fileUrl = `${pocketbaseUrl}/api/files/${collection}/${recordId}/${file}`;
 
-          logger.info("File proxy", {
-            collection,
-            recordId,
-            file,
-            targetUrl: fileUrl,
-          });
-
           const response = await fetch(fileUrl, {
             method: "GET",
             headers: {
@@ -81,12 +74,6 @@ export const Route = createFileRoute(
             "Range, If-None-Match, If-Modified-Since"
           );
 
-          logger.info("File proxy response", {
-            status: response.status,
-            contentType: response.headers.get("content-type"),
-            contentLength: response.headers.get("content-length"),
-          });
-
           return new Response(body, {
             status: response.status,
             statusText: response.statusText,

src/app/routes/api/teams/upload-logo.ts

@@ -107,10 +107,9 @@ export const Route = createFileRoute("/api/teams/upload-logo")({
           const pbFormData = new FormData();
           pbFormData.append("logo", logoFile);
 
-          const updatedTeam = await pbAdmin.updateTeam(
-            teamId,
-            pbFormData as any
-          );
+          await pbAdmin.updateTeam(teamId, pbFormData as any);
+          const updatedTeam = await pbAdmin.getTeam(teamId);
+          if (!updatedTeam) throw new Error("Failed to fetch updated team");
 
           logger.info("Team logo uploaded successfully", {
             teamId,

src/components/avatar.tsx

@@ -13,7 +13,7 @@ import { XIcon } from "@phosphor-icons/react";
 
 interface AvatarProps
   extends Omit<MantineAvatarProps, "radius" | "color" | "size"> {
-  name: string;
+  name?: string;
   size?: number;
   radius?: string | number;
   withBorder?: boolean;

src/components/button.tsx

@@ -10,5 +10,4 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
   return <MantineButton fullWidth ref={ref} {...props} />;
 });
 
-Button.displayName = "Button";
 export default Button;

src/components/glitch-avatar.tsx

@@ -0,0 +1,179 @@
+import { useState, useEffect, useRef } from "react";
+import { Paper, Box } from "@mantine/core";
+import {
+  Avatar as MantineAvatar,
+  AvatarProps as MantineAvatarProps,
+} from "@mantine/core";
+
+interface GlitchAvatarProps
+  extends Omit<MantineAvatarProps, "radius" | "color" | "size"> {
+  name: string;
+  src?: string;
+  glitchSrc?: string;
+  size?: number;
+  radius?: string | number;
+  withBorder?: boolean;
+  contain?: boolean;
+  children?: React.ReactNode;
+  px?: string | number;
+}
+
+const GlitchAvatar = ({
+  name,
+  src,
+  glitchSrc,
+  size = 35,
+  radius = "100%",
+  withBorder = true,
+  contain = false,
+  children,
+  px,
+  ...props
+}: GlitchAvatarProps) => {
+  const [showGlitch, setShowGlitch] = useState(false);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const videoRef = useRef<HTMLVideoElement>(null);
+
+  useEffect(() => {
+    if (!glitchSrc) return;
+
+    const scheduleNextGlitch = () => {
+      const delay = Math.random() * 10000 + 5000;
+      return setTimeout(() => {
+        setShowGlitch(true);
+        setIsPlaying(true);
+
+        setTimeout(() => {
+          setShowGlitch(false);
+          setIsPlaying(false);
+          scheduleNextGlitch();
+        }, 4000);
+      }, delay);
+    };
+
+    const timeoutId = scheduleNextGlitch();
+    return () => clearTimeout(timeoutId);
+  }, [glitchSrc]);
+
+  useEffect(() => {
+    const video = videoRef.current;
+    if (!video) return;
+
+    const handleEnded = () => {
+      setShowGlitch(false);
+      setIsPlaying(false);
+    };
+
+    video.addEventListener("ended", handleEnded);
+    return () => video.removeEventListener("ended", handleEnded);
+  }, []);
+
+  useEffect(() => {
+    const video = videoRef.current;
+    if (!video) return;
+
+    video.load();
+  }, [glitchSrc]);
+
+  useEffect(() => {
+    const video = videoRef.current;
+    if (!video || !showGlitch || !isPlaying) return;
+
+    video.currentTime = 0;
+    video.play().catch((err) => {
+      console.error("Failed to play glitch", err);
+    });
+  }, [showGlitch, isPlaying]);
+
+  return (
+    <Box
+      style={{
+        padding: "8px",
+        borderRadius:
+          typeof radius === "number"
+            ? `${radius + 8}px`
+            : "calc(var(--mantine-radius-md) + 8px)",
+        position: "relative",
+      }}
+    >
+      <Box
+        style={{
+          opacity: showGlitch ? 0 : 1,
+          transition: "opacity 0.05s ease-in-out",
+        }}
+      >
+        <Paper
+          py={size / 12.5}
+          px={size / 20}
+          bg="var(--mantine-color-default-border)"
+          radius={radius}
+          withBorder={false}
+          style={{
+            cursor: "default",
+          }}
+        >
+          <MantineAvatar
+            alt={name}
+            key={name}
+            name={name}
+            color="initials"
+            size={size}
+            radius={radius}
+            w={size}
+            styles={{
+              image: {
+                objectFit: contain ? "contain" : "cover",
+              },
+            }}
+            src={src}
+            {...props}
+          >
+            {children}
+          </MantineAvatar>
+        </Paper>
+      </Box>
+
+      {glitchSrc && (
+        <Box
+          style={{
+            position: "absolute",
+            top: "8px",
+            left: "8px",
+            opacity: showGlitch ? 1 : 0,
+            visibility: showGlitch ? "visible" : "hidden",
+            transition: "opacity 0.05s ease-in-out",
+            pointerEvents: "none",
+          }}
+        >
+          <Paper
+            py={size / 12.5}
+            px={size / 20}
+            bg="var(--mantine-color-default-border)"
+            radius={radius}
+            withBorder={false}
+            style={{
+              overflow: "hidden",
+            }}
+          >
+            <video
+              ref={videoRef}
+              src={glitchSrc}
+              style={{
+                width: `${size}px`,
+                height: `${size}px`,
+                objectFit: contain ? "contain" : "cover",
+                borderRadius: typeof radius === "number" ? `${radius}px` : radius,
+                display: "block",
+              }}
+              muted
+              playsInline
+              preload="auto"
+            />
+          </Paper>
+        </Box>
+      )}
+    </Box>
+  );
+};
+
+export default GlitchAvatar;

src/components/list-button.tsx

@@ -1,22 +1,33 @@
-import { Divider, Group, Text, UnstyledButton } from "@mantine/core";
+import { Divider, Group, Loader, Text, UnstyledButton } from "@mantine/core";
 import { CaretRightIcon, Icon } from "@phosphor-icons/react";
 
 interface ListButtonProps {
   label: string;
   Icon: Icon;
   onClick: () => void;
+  loading?: boolean;
 }
 
-const ListButton = ({ label, onClick, Icon }: ListButtonProps) => {
+const ListButton = ({ label, onClick, Icon, loading }: ListButtonProps) => {
   return (
     <>
-      <UnstyledButton w="100%" p="md" component={"button"} onClick={onClick}>
+      <UnstyledButton
+        w="100%"
+        p="md"
+        component={"button"}
+        onClick={onClick}
+        disabled={loading}
+      >
         <Group>
           <Icon weight="bold" size={20} />
           <Text fw={500} size="md">
             {label}
           </Text>
-          <CaretRightIcon style={{ marginLeft: "auto" }} size={20} />
+          {loading ? (
+            <Loader size="sm" style={{ marginLeft: "auto" }} />
+          ) : (
+            <CaretRightIcon style={{ marginLeft: "auto" }} size={20} />
+          )}
         </Group>
       </UnstyledButton>
       <Divider />

src/components/sheet/drawer.tsx

@@ -1,5 +1,10 @@
-import { Box, Container, Flex, Loader, useComputedColorScheme } from "@mantine/core";
-import { PropsWithChildren, Suspense, useEffect, useRef } from "react";
+import {
+  Box,
+  Container,
+  Title,
+  useComputedColorScheme,
+} from "@mantine/core";
+import { PropsWithChildren, useEffect, useRef } from "react";
 import { Drawer as VaulDrawer } from "vaul";
 import styles from "./styles.module.css";
 
@@ -17,6 +22,11 @@ const Drawer: React.FC<DrawerProps> = ({
 }) => {
   const colorScheme = useComputedColorScheme("light");
   const contentRef = useRef<HTMLDivElement>(null);
+  const openedRef = useRef(opened);
+
+  useEffect(() => {
+    openedRef.current = opened;
+  }, [opened]);
 
   useEffect(() => {
     const appElement = document.querySelector(".app") as HTMLElement;
@@ -57,7 +67,7 @@ const Drawer: React.FC<DrawerProps> = ({
       appElement.classList.remove("drawer-scaling");
       themeColorMeta.content = currentColors.normal;
     };
-  }, [opened, colorScheme]);
+  }, [opened]);
 
   useEffect(() => {
     if (!opened || !contentRef.current) return;
@@ -69,46 +79,44 @@ const Drawer: React.FC<DrawerProps> = ({
 
         if (visualViewport) {
           const availableHeight = visualViewport.height;
-          const maxDrawerHeight = Math.min(availableHeight * 0.75, window.innerHeight * 0.75);
+          const maxDrawerHeight = Math.min(
+            availableHeight * 0.75,
+            window.innerHeight * 0.75
+          );
 
           drawerContent.style.maxHeight = `${maxDrawerHeight}px`;
         } else {
-          drawerContent.style.maxHeight = '75vh';
+          drawerContent.style.maxHeight = "75vh";
         }
       }
     };
 
-    const resizeObserver = new ResizeObserver(() => {
-      if (contentRef.current) {
-        const drawerContent = contentRef.current.closest('[data-vaul-drawer-wrapper]');
-        if (drawerContent) {
-          (drawerContent as HTMLElement).style.height = 'auto';
-          (drawerContent as HTMLElement).offsetHeight;
-        }
-      }
-    });
-
     updateDrawerHeight();
 
     if (window.visualViewport) {
-      window.visualViewport.addEventListener('resize', updateDrawerHeight);
+      window.visualViewport.addEventListener("resize", updateDrawerHeight);
     }
 
-    resizeObserver.observe(contentRef.current);
-
     return () => {
-      resizeObserver.disconnect();
       if (window.visualViewport) {
-        window.visualViewport.removeEventListener('resize', updateDrawerHeight);
+        window.visualViewport.removeEventListener("resize", updateDrawerHeight);
       }
     };
-  }, [opened, children]);
+  }, [opened]);
 
   return (
-    <VaulDrawer.Root repositionInputs={false} open={opened} onOpenChange={onChange}>
+    <VaulDrawer.Root
+      repositionInputs={false}
+      open={opened}
+      onOpenChange={onChange}
+    >
       <VaulDrawer.Portal>
         <VaulDrawer.Overlay className={styles.drawerOverlay} />
-        <VaulDrawer.Content className={styles.drawerContent} aria-describedby="drawer" ref={contentRef}>
+        <VaulDrawer.Content
+          className={styles.drawerContent}
+          aria-describedby="drawer"
+          ref={contentRef}
+        >
           <Container flex={1} p="md">
             <Box
               mb="sm"
@@ -120,14 +128,10 @@ const Drawer: React.FC<DrawerProps> = ({
               style={{ borderRadius: "9999px" }}
             />
             <Container mx="auto" maw="28rem" px={0}>
-              <VaulDrawer.Title>{title}</VaulDrawer.Title>
-              <Suspense fallback={
-                <Flex justify='center' align='center' w='100%' h={400}>
-                  <Loader size='lg' />
-                </Flex>
-              }>
-                {children}
-              </Suspense>
+              <VaulDrawer.Title>
+                <Title order={2}>{title}</Title>
+              </VaulDrawer.Title>
+              {children}
             </Container>
           </Container>
         </VaulDrawer.Content>

src/components/sheet/sheet.tsx

@@ -1,8 +1,8 @@
-import { PropsWithChildren, useCallback } from "react";
+import { PropsWithChildren, Suspense, useCallback } from "react";
 import { useIsMobile } from "@/hooks/use-is-mobile";
 import Drawer from "./drawer";
 import Modal from "./modal";
-import { ScrollArea } from "@mantine/core";
+import { ScrollArea, Flex, Loader } from "@mantine/core";
 
 interface SheetProps extends PropsWithChildren {
   title?: string;
@@ -16,6 +16,8 @@ const Sheet: React.FC<SheetProps> = ({ title, children, opened, onChange }) => {
 
   const SheetComponent = isMobile ? Drawer : Modal;
 
+  if (!opened) return null;
+
   return (
     <SheetComponent
       title={title}
@@ -23,14 +25,20 @@ const Sheet: React.FC<SheetProps> = ({ title, children, opened, onChange }) => {
       onChange={onChange}
       onClose={handleClose}
     >
-      <ScrollArea.Autosize
-        style={{ flex: 1, maxHeight: '75dvh' }}
-        scrollbarSize={8}
-        scrollbars="y"
-        type="scroll"
-      >
-        {children}
-      </ScrollArea.Autosize>
+      <Suspense fallback={
+        <Flex justify='center' align='center' w='100%' style={{ minHeight: '25vh' }}>
+          <Loader size='lg' />
+        </Flex>
+      }>
+        <ScrollArea.Autosize
+          style={{ flex: 1, maxHeight: '75dvh' }}
+          scrollbarSize={8}
+          scrollbars="y"
+          type="scroll"
+        >
+          {children}
+        </ScrollArea.Autosize>
+      </Suspense>
     </SheetComponent>
   );
 };

src/components/sheet/slide-panel/slide-panel.tsx

@@ -5,6 +5,7 @@ import {
   ActionIcon,
   ScrollArea,
   Divider,
+  Stack,
 } from "@mantine/core";
 import { ArrowLeftIcon, CheckIcon } from "@phosphor-icons/react";
 import { useState, ReactNode } from "react";
@@ -69,6 +70,7 @@ const SlidePanel = ({
           overflow: "hidden",
           display: "flex",
           flexDirection: "column",
+          width: "100%",
         }}
       >
         <Box
@@ -167,11 +169,17 @@ const SlidePanel = ({
                 bg="var(--mantine-color-dimmed)"
                 my="xs"
               />
-              <panelConfig.Component
-                value={tempValue}
-                onChange={setTempValue}
-                {...(panelConfig.componentProps || {})}
-              />
+              <ScrollArea.Autosize w="100%" p={0} offsetScrollbars>
+                <panelConfig.Component
+                  value={tempValue}
+                  onChange={setTempValue}
+                  {...(panelConfig.componentProps || {})}
+                />
+              </ScrollArea.Autosize>
+              <Stack mt="auto" w="100%" gap={2}>
+                <Button mt="md" onClick={handleConfirm}>Confirm</Button>
+                <Button variant="subtle" onClick={closePanel} mt="sm" color="red">Cancel</Button>
+              </Stack>
             </>
           )}
         </Box>

src/components/stats-overview.tsx

@@ -101,10 +101,10 @@ const StatsOverview = ({ statsData, isLoading = false }: StatsOverviewProps) =>
     { label: "Losses", value: overallStats.losses, Icon: XIcon },
     { label: "Cups Made", value: overallStats.total_cups_made, Icon: FireIcon },
     { label: "Cups Against", value: overallStats.total_cups_against, Icon: ShieldIcon },
-    { label: "Avg Cups Per Game", value: avgCupsPerMatch > 0 ? avgCupsPerMatch : null, Icon: ChartLineUpIcon },
-    { label: "Avg Cups Against", value: avgCupsAgainstPerMatch > 0 ? avgCupsAgainstPerMatch : null, Icon: ShieldCheckIcon },
-    { label: "Avg Win Margin", value: avgMarginOfVictory > 0 ? avgMarginOfVictory : null, Icon: ArrowUpIcon },
-    { label: "Avg Loss Margin", value: avgMarginOfLoss > 0 ? avgMarginOfLoss : null, Icon: ArrowDownIcon },
+    { label: "Avg Cups Per Match", value: avgCupsPerMatch >= 0 ? avgCupsPerMatch : null, Icon: ChartLineUpIcon },
+    { label: "Avg Cups Against", value: avgCupsAgainstPerMatch >= 0 ? avgCupsAgainstPerMatch : null, Icon: ShieldCheckIcon },
+    { label: "Avg Win Margin", value: avgMarginOfVictory >= 0 ? avgMarginOfVictory : null, Icon: ArrowUpIcon },
+    { label: "Avg Loss Margin", value: avgMarginOfLoss >= 0 ? avgMarginOfLoss : null, Icon: ArrowDownIcon },
   ];
 
   return (
@@ -133,7 +133,7 @@ export const StatsSkeleton = () => {
     { label: "Losses", Icon: XIcon },
     { label: "Cups Made", Icon: FireIcon },
     { label: "Cups Against", Icon: ShieldIcon },
-    { label: "Avg Cups Per Game", Icon: ChartLineUpIcon },
+    { label: "Avg Cups Per Match", Icon: ChartLineUpIcon },
     { label: "Avg Cups Against", Icon: ShieldCheckIcon },
     { label: "Avg Win Margin", Icon: ArrowUpIcon },
     { label: "Avg Loss Margin", Icon: ArrowDownIcon },

src/components/swipeable-tabs.tsx

@@ -18,6 +18,7 @@ interface TabItem {
 interface SwipeableTabsProps {
   tabs: TabItem[];
   defaultTab?: number;
+  mb?: string | number;
   onTabChange?: (index: number, tab: TabItem) => void;
 }
 
@@ -25,6 +26,7 @@ function SwipeableTabs({
   tabs,
   defaultTab = 0,
   onTabChange,
+  mb,
 }: SwipeableTabsProps) {
   const router = useRouter();
   const search = router.state.location.search as any;
@@ -144,7 +146,7 @@ function SwipeableTabs({
         style={{
           display: "flex",
           paddingInline: "var(--mantine-spacing-md)",
-          marginBottom: "var(--mantine-spacing-md)",
+          marginBottom: mb !== undefined ? mb : "var(--mantine-spacing-md)",
           zIndex: 100,
           backgroundColor: "var(--mantine-color-body)",
         }}
@@ -205,11 +207,13 @@ function SwipeableTabs({
           height: carouselHeight === "auto" ? "auto" : `${carouselHeight}px`,
           transition: "height 300ms ease",
           touchAction: "pan-y",
+          width: "100%",
+          maxWidth: "100vw",
         }}
       >
         {tabs.map((tab, index) => (
           <Carousel.Slide key={`${tab.label}-content-${index}`}>
-            <Box ref={setSlideRef(index)} style={{ height: "auto" }}>
+            <Box ref={setSlideRef(index)} style={{ height: "auto", width: "100%", maxWidth: "100vw", overflow: "hidden" }}>
               {tab.content}
             </Box>
           </Carousel.Slide>

src/components/typeahead.tsx

@@ -16,6 +16,7 @@ export interface TypeaheadProps<T> {
   debounceMs?: number;
   disabled?: boolean;
   initialValue?: string;
+  maxHeight?: number | string;
 }
 
 const Typeahead = <T,>({
@@ -26,7 +27,8 @@ const Typeahead = <T,>({
   placeholder = "Search...",
   debounceMs = 300,
   disabled = false,
-  initialValue = ""
+  initialValue = "",
+  maxHeight = 200,
 }: TypeaheadProps<T>) => {
   const [searchQuery, setSearchQuery] = useState(initialValue);
   const [searchResults, setSearchResults] = useState<TypeaheadOption<T>[]>([]);
@@ -36,13 +38,7 @@ const Typeahead = <T,>({
   const containerRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
 
-  const debouncedSearch = useDebouncedCallback(async (query: string) => {
-    if (!query.trim()) {
-      setSearchResults([]);
-      setIsOpen(false);
-      return;
-    }
-
+  const performSearch = async (query: string) => {
     setIsLoading(true);
     try {
       const results = await searchFn(query);
@@ -56,7 +52,9 @@ const Typeahead = <T,>({
     } finally {
       setIsLoading(false);
     }
-  }, debounceMs);
+  };
+
+  const debouncedSearch = useDebouncedCallback(performSearch, debounceMs);
 
   const handleSearchChange = (value: string) => {
     setSearchQuery(value);
@@ -114,8 +112,12 @@ const Typeahead = <T,>({
         value={searchQuery}
         onChange={(event) => handleSearchChange(event.currentTarget.value)}
         onKeyDown={handleKeyDown}
-        onFocus={() => {
-          if (searchResults.length > 0) setIsOpen(true);
+        onFocus={async () => {
+          if (searchResults.length > 0) {
+            setIsOpen(true);
+            return;
+          }
+          await performSearch(searchQuery);
         }}
         placeholder={placeholder}
         rightSection={isLoading ? <Loader size="xs" /> : null}
@@ -133,7 +135,7 @@ const Typeahead = <T,>({
             left: 0,
             right: 0,
             zIndex: 9999,
-            maxHeight: '160px',
+            maxHeight,
             overflowY: 'auto',
             WebkitOverflowScrolling: 'touch',
             touchAction: 'pan-y',

src/features/activities/components/activities-table.tsx

@@ -0,0 +1,382 @@
+import { useState, useMemo, memo } from "react";
+import {
+  Text,
+  TextInput,
+  Stack,
+  Group,
+  Box,
+  Container,
+  Divider,
+  UnstyledButton,
+  Select,
+  Pagination,
+  Code,
+  Alert,
+} from "@mantine/core";
+import {
+  MagnifyingGlassIcon,
+  CaretUpIcon,
+  CaretDownIcon,
+  CheckIcon,
+  XIcon,
+  ChecksIcon,
+} from "@phosphor-icons/react";
+import { Activity, ActivitySearchParams } from "../types";
+import { useActivities } from "../queries";
+import Sheet from "@/components/sheet/sheet";
+import { useSheet } from "@/hooks/use-sheet";
+
+interface ActivityListItemProps {
+  activity: Activity;
+  onClick: () => void;
+}
+
+const ActivityListItem = memo(({ activity, onClick }: ActivityListItemProps) => {
+  const playerName = typeof activity.player === "object" && activity.player
+    ? `${activity.player.first_name} ${activity.player.last_name}`
+    : "System";
+
+  const formatDate = (dateStr: string) => {
+    const date = new Date(dateStr);
+    return date.toLocaleString();
+  };
+
+  return (
+    <UnstyledButton
+      w="100%"
+      p="md"
+      onClick={onClick}
+      style={{
+        borderRadius: 0,
+        transition: "background-color 0.15s ease",
+      }}
+      styles={{
+        root: {
+          '&:hover': {
+            backgroundColor: 'var(--mantine-color-gray-0)',
+          },
+        },
+      }}
+    >
+      <Group justify="space-between" align="flex-start" w="100%">
+        <Stack gap={4} flex={1}>
+          <Group gap="xs">
+            <Text size="sm" fw={600}>
+              {activity.name}
+            </Text>
+            {activity.success ? (
+              <CheckIcon size={16} color="var(--mantine-color-green-6)" />
+            ) : (
+              <XIcon size={16} color="var(--mantine-color-red-6)" />
+            )}
+          </Group>
+          <Group gap="md">
+            <Text size="xs" c="dimmed">
+              {playerName}
+            </Text>
+            <Text size="xs" c="dimmed">
+              {activity.duration}ms
+            </Text>
+            <Text size="xs" c="dimmed">
+              {formatDate(activity.created)}
+            </Text>
+          </Group>
+          {activity.error && (
+            <Text size="xs" c="red" lineClamp={1}>
+              {activity.error}
+            </Text>
+          )}
+        </Stack>
+      </Group>
+    </UnstyledButton>
+  );
+});
+
+interface ActivityDetailsSheetProps {
+  activity: Activity | null;
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+const ActivityDetailsSheet = memo(({ activity, isOpen, onClose }: ActivityDetailsSheetProps) => {
+  if (!activity) return null;
+
+  const playerName = typeof activity.player === "object" && activity.player
+    ? `${activity.player.first_name} ${activity.player.last_name}`
+    : "System";
+
+  const formatDate = (dateStr: string) => {
+    const date = new Date(dateStr);
+    return date.toLocaleString();
+  };
+
+  return (
+    <Sheet title="Activity Details" opened={isOpen} onChange={onClose}>
+      <Stack gap="md" p="md">
+        <Stack gap="xs">
+          <Text size="xs" fw={700} c="dimmed">
+            Function Name
+          </Text>
+          <Text size="sm">{activity.name}</Text>
+        </Stack>
+
+        <Stack gap="xs">
+          <Text size="xs" fw={700} c="dimmed">
+            Status
+          </Text>
+          <Group gap="xs">
+            {activity.success ? (
+              <>
+                <CheckIcon size={16} color="var(--mantine-color-green-6)" />
+                <Text size="sm" c="green">
+                  Success
+                </Text>
+              </>
+            ) : (
+              <>
+                <XIcon size={16} color="var(--mantine-color-red-6)" />
+                <Text size="sm" c="red">
+                  Failed
+                </Text>
+              </>
+            )}
+          </Group>
+        </Stack>
+
+        <Stack gap="xs">
+          <Text size="xs" fw={700} c="dimmed">
+            Player
+          </Text>
+          <Text size="sm">{playerName}</Text>
+        </Stack>
+
+        <Stack gap="xs">
+          <Text size="xs" fw={700} c="dimmed">
+            Duration
+          </Text>
+          <Text size="sm">{activity.duration}ms</Text>
+        </Stack>
+
+        <Stack gap="xs">
+          <Text size="xs" fw={700} c="dimmed">
+            Created
+          </Text>
+          <Text size="sm">{formatDate(activity.created)}</Text>
+        </Stack>
+
+        {activity.user_agent && (
+          <Stack gap="xs">
+            <Text size="xs" fw={700} c="dimmed">
+              User Agent
+            </Text>
+            <Text size="xs" style={{ wordBreak: "break-word" }}>
+              {activity.user_agent}
+            </Text>
+          </Stack>
+        )}
+
+        {activity.error && (
+          <Stack gap="xs">
+            <Text size="xs" fw={700} c="dimmed">
+              Error Message
+            </Text>
+            <Alert color="red" variant="light">
+              <Text size="sm" style={{ wordBreak: "break-word" }}>
+                {activity.error}
+              </Text>
+            </Alert>
+          </Stack>
+        )}
+
+        {activity.arguments && (
+          <Stack gap="xs">
+            <Text size="xs" fw={700} c="dimmed">
+              Arguments
+            </Text>
+            <Code block style={{ fontSize: "11px" }}>
+              {JSON.stringify(activity.arguments, null, 2)}
+            </Code>
+          </Stack>
+        )}
+      </Stack>
+    </Sheet>
+  );
+});
+
+const ActivitiesResults = ({ searchParams, page, setPage, onActivityClick }: any) => {
+  const { data: result } = useActivities(searchParams);
+  return (
+    <>
+      <Stack gap={0}>
+        {result.items.map((activity: Activity, index: number) => (
+          <Box key={activity.id}>
+            <ActivityListItem
+              activity={activity}
+              onClick={() => onActivityClick(activity)}
+            />
+            {index < result.items.length - 1 && <Divider />}
+          </Box>
+        ))}
+      </Stack>
+
+      {result.items.length === 0 && (
+        <Text ta="center" c="dimmed" py="xl">
+          No activities found
+        </Text>
+      )}
+
+      {result.totalPages > 1 && (
+        <Group justify="center" py="md">
+          <Pagination
+            total={result.totalPages}
+            value={page}
+            onChange={setPage}
+            size="sm"
+          />
+        </Group>
+      )}
+    </>
+  );
+};
+
+export const ActivitiesTable = () => {
+  const [page, setPage] = useState(1);
+  const [search, setSearch] = useState("");
+  const [successFilter, setSuccessFilter] = useState<string | null>(null);
+  const [sortBy, setSortBy] = useState("-created");
+  const [selectedActivity, setSelectedActivity] = useState<Activity | null>(null);
+
+  const {
+    isOpen: detailsOpened,
+    open: openDetails,
+    close: closeDetails,
+  } = useSheet();
+
+  const searchParams: ActivitySearchParams = useMemo(
+    () => ({
+      page,
+      perPage: 100,
+      name: search || undefined,
+      success: successFilter === "success" ? true : successFilter === "failure" ? false : undefined,
+      sortBy,
+    }),
+    [page, search, successFilter, sortBy]
+  );
+
+  const { data: result } = useActivities(searchParams);
+
+  const handleSort = (field: string) => {
+    setSortBy((prev) => {
+      if (prev === field) return `-${field}`;
+      if (prev === `-${field}`) return field;
+      return `-${field}`;
+    });
+  };
+
+  const getSortIcon = (field: string) => {
+    if (sortBy === field) return <CaretUpIcon size={14} />;
+    if (sortBy === `-${field}`) return <CaretDownIcon size={14} />;
+    return null;
+  };
+
+  const handleActivityClick = (activity: Activity) => {
+    setSelectedActivity(activity);
+    openDetails();
+  };
+
+  const handleCloseDetails = () => {
+    setSelectedActivity(null);
+    closeDetails();
+  };
+
+  return (
+    <Container size="100%" px={0}>
+      <Stack gap="xs">
+        <Stack gap="xs" px="md">
+          <TextInput
+            placeholder="serverFn name"
+            value={search}
+            onChange={(e) => {
+              setSearch(e.currentTarget.value);
+              setPage(1);
+            }}
+            leftSection={<MagnifyingGlassIcon size={16} />}
+            size="md"
+          />
+
+          <Group>
+            <Select
+              placeholder="Status"
+              value={successFilter}
+              onChange={(value) => {
+                setSuccessFilter(value);
+                setPage(1);
+              }}
+              data={[
+                { value: "all", label: "All" },
+                { value: "success", label: "Success" },
+                { value: "failure", label: "Failure" },
+              ]}
+              clearable
+              size="sm"
+              style={{ flex: 1 }}
+            />
+          </Group>
+        </Stack>
+
+        <Group px="md" justify="space-between" align="center">
+          <Text size="10px" lh={0} c="dimmed">
+            {result.totalItems} total activities
+          </Text>
+          <Group gap="xs">
+            <Text size="xs" c="dimmed">
+              Sort:
+            </Text>
+            <UnstyledButton
+              onClick={() => handleSort("created")}
+              style={{ display: "flex", alignItems: "center", gap: 4 }}
+            >
+              <Text
+                size="xs"
+                fw={sortBy.includes("created") ? 600 : 400}
+                c={sortBy.includes("created") ? "dark" : "dimmed"}
+              >
+                Date
+              </Text>
+              {getSortIcon("created")}
+            </UnstyledButton>
+            <Text size="xs" c="dimmed">
+              •
+            </Text>
+            <UnstyledButton
+              onClick={() => handleSort("duration")}
+              style={{ display: "flex", alignItems: "center", gap: 4 }}
+            >
+              <Text
+                size="xs"
+                fw={sortBy.includes("duration") ? 600 : 400}
+                c={sortBy.includes("duration") ? "dark" : "dimmed"}
+              >
+                Duration
+              </Text>
+              {getSortIcon("duration")}
+            </UnstyledButton>
+          </Group>
+        </Group>
+
+        <ActivitiesResults
+          searchParams={searchParams}
+          page={page}
+          setPage={setPage}
+          onActivityClick={handleActivityClick}
+        />
+      </Stack>
+
+      <ActivityDetailsSheet
+        activity={selectedActivity}
+        isOpen={detailsOpened}
+        onClose={handleCloseDetails}
+      />
+    </Container>
+  );
+};

src/features/activities/index.ts

@@ -0,0 +1,3 @@
+export * from "./types";
+export * from "./queries";
+export { ActivitiesTable } from "./components/activities-table";

src/features/activities/queries.ts

@@ -0,0 +1,17 @@
+import { useServerSuspenseQuery } from "@/lib/tanstack-query/hooks";
+import { searchActivities } from "./server";
+import { ActivitySearchParams } from "./types";
+
+export const activityKeys = {
+  search: (params: ActivitySearchParams) => ['activities', 'search', params] as const,
+};
+
+export const activityQueries = {
+  search: (params: ActivitySearchParams = {}) => ({
+    queryKey: activityKeys.search(params),
+    queryFn: () => searchActivities({ data: params }),
+  }),
+};
+
+export const useActivities = (params: ActivitySearchParams = {}) =>
+  useServerSuspenseQuery(activityQueries.search(params));

src/features/activities/server.ts

@@ -0,0 +1,29 @@
+import { superTokensAdminFunctionMiddleware } from "@/utils/supertokens";
+import { createServerFn } from "@tanstack/react-start";
+import { pbAdmin } from "@/lib/pocketbase/client";
+import { z } from "zod";
+import { toServerResult } from "@/lib/tanstack-query/utils/to-server-result";
+import { transformActivity } from "@/lib/pocketbase/util/transform-types";
+import { Activity, ActivityListResult, ActivitySearchParams } from "./types";
+
+const activitySearchParamsSchema = z.object({
+  page: z.number().optional(),
+  perPage: z.number().optional(),
+  name: z.string().optional(),
+  player: z.string().optional(),
+  success: z.boolean().optional(),
+  sortBy: z.string().optional(),
+});
+
+export const searchActivities = createServerFn()
+  .inputValidator(activitySearchParamsSchema)
+  .middleware([superTokensAdminFunctionMiddleware])
+  .handler(async ({ data }) =>
+    toServerResult<ActivityListResult>(async () => {
+      const result = await pbAdmin.searchActivities(data);
+      return {
+        ...result,
+        items: result.items.map(transformActivity),
+      };
+    })
+  );

src/features/activities/types.ts

@@ -0,0 +1 @@
+export type { Activity, ActivityListResult, ActivitySearchParams } from "@/lib/pocketbase/services/activities";

src/features/admin/components/admin-page.tsx

@@ -4,10 +4,25 @@ import {
   DatabaseIcon,
   TreeStructureIcon,
   TrophyIcon,
+  MedalIcon,
+  CrownIcon,
+  ListIcon,
 } from "@phosphor-icons/react";
 import ListButton from "@/components/list-button";
+import { migrateBadgeProgress } from "@/features/badges/server";
+import { useState } from "react";
 
 const AdminPage = () => {
+  const [isMigrating, setIsMigrating] = useState(false);
+
+  const handleMigrateBadges = async () => {
+    if (isMigrating) return;
+
+    setIsMigrating(true);
+    await migrateBadgeProgress();
+    setIsMigrating(false);
+  };
+
   return (
     <List p="0">
       <ListLink
@@ -15,6 +30,22 @@ const AdminPage = () => {
         Icon={TrophyIcon}
         to="/admin/tournaments"
       />
+      <ListLink
+        label="Award Badges"
+        Icon={CrownIcon}
+        to="/admin/badges"
+      />
+      <ListButton
+        label="Migrate Badge Progress"
+        Icon={MedalIcon}
+        onClick={handleMigrateBadges}
+        loading={isMigrating}
+      />
+      <ListLink
+        label="Activities"
+        Icon={ListIcon}
+        to="/admin/activities"
+      />
       <ListButton
         label="Open Pocketbase"
         Icon={DatabaseIcon}

src/features/admin/components/award-badges.tsx

@@ -0,0 +1,114 @@
+import { useState } from "react";
+import { Box, Card, Text, Select, Button, Group, Stack, Badge, Divider } from "@mantine/core";
+import { awardManualBadge } from "@/features/badges/server";
+import { useAllBadges } from "@/features/badges/queries";
+import toast from "@/lib/sonner";
+import { usePlayers } from "@/features/players/queries";
+
+const AwardBadges = () => {
+  const { data: players } = usePlayers();
+  const { data: allBadges } = useAllBadges();
+
+  const [selectedPlayerId, setSelectedPlayerId] = useState<string | null>(null);
+  const [selectedBadgeId, setSelectedBadgeId] = useState<string | null>(null);
+  const [isAwarding, setIsAwarding] = useState(false);
+
+  const manualBadges = allBadges.filter((badge) => badge.type === "manual");
+
+  const handleAwardBadge = async () => {
+    if (!selectedPlayerId || !selectedBadgeId) return;
+
+    setIsAwarding(true);
+    try {
+      await awardManualBadge({
+        data: {
+          playerId: selectedPlayerId,
+          badgeId: selectedBadgeId,
+        },
+      });
+
+      const selectedPlayer = players.find((p) => p.id === selectedPlayerId);
+      const playerName = selectedPlayer
+        ? `${selectedPlayer.first_name} ${selectedPlayer.last_name}`
+        : "Player";
+
+      toast.success(`Badge awarded to ${playerName}`);
+
+      setSelectedPlayerId(null);
+    } catch (error) {
+      toast.error("Failed to award badge");
+    } finally {
+      setIsAwarding(false);
+    }
+  };
+
+  const playerOptions = players.map((player) => ({
+    value: player.id,
+    label: `${player.first_name} ${player.last_name}`,
+  }));
+
+  const badgeOptions = manualBadges.map((badge) => ({
+    value: badge.id,
+    label: badge.name,
+  }));
+
+  const selectedBadge = manualBadges.find((b) => b.id === selectedBadgeId);
+
+  return (
+    <Box p="md">
+      <Card withBorder radius="md" p="md">
+        <Stack gap="lg">
+          <Box>
+            <Text size="lg" fw={600} mb="xs">
+              Award Manual Badge
+            </Text>
+          </Box>
+
+          <Select
+            label="Badge Type"
+            placeholder="Select a badge"
+            data={badgeOptions}
+            value={selectedBadgeId}
+            onChange={setSelectedBadgeId}
+            searchable
+            clearable
+            size="md"
+          />
+
+          {selectedBadgeId && (
+            <>
+              <Divider />
+
+              <Stack gap="md">
+                <Select
+                  label="Select Player"
+                  placeholder="Choose a player"
+                  data={playerOptions}
+                  value={selectedPlayerId}
+                  onChange={setSelectedPlayerId}
+                  searchable
+                  clearable
+                  size="md"
+                  autoFocus
+                />
+
+                <Group justify="flex-end">
+                  <Button
+                    onClick={handleAwardBadge}
+                    disabled={!selectedPlayerId}
+                    loading={isAwarding}
+                    size="md"
+                  >
+                    Award Badge
+                  </Button>
+                </Group>
+              </Stack>
+            </>
+          )}
+        </Stack>
+      </Card>
+    </Box>
+  );
+};
+
+export default AwardBadges;

src/features/badges/components/badge-showcase-skeleton.tsx

@@ -0,0 +1,47 @@
+import { Box, Skeleton, Text } from "@mantine/core";
+
+const BadgeShowcaseSkeleton = () => {
+  return (
+    <Box mb="lg">
+      <Box
+        px="md"
+        style={{
+          maxHeight: '220px',
+          overflowY: 'auto',
+          overflowX: 'hidden',
+          width: '100%',
+        }}
+      >
+        <Box
+          style={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(auto-fill, minmax(85px, 1fr))',
+            gap: 'var(--mantine-spacing-md)',
+            paddingBottom: 'var(--mantine-spacing-sm)',
+            width: '100%',
+          }}
+        >
+          {[1, 2, 3, 4, 5, 6].map((i) => (
+            <Box
+              key={i}
+              style={{
+                aspectRatio: '1',
+                position: 'relative',
+              }}
+            >
+              <Skeleton
+                height="100%"
+                radius="12px"
+                style={{
+                  aspectRatio: '1',
+                }}
+              />
+            </Box>
+          ))}
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+export default BadgeShowcaseSkeleton;

src/features/badges/components/badge-showcase.tsx

@@ -0,0 +1,312 @@
+import { Box, Text, Progress, Image, Popover, Title, Stack } from "@mantine/core";
+import { usePlayerBadges, useAllBadges } from "../queries";
+import { useAuth } from "@/contexts/auth-context";
+import { Badge, BadgeProgress } from "../types";
+import { useMemo, useState } from "react";
+import { MedalIcon, LockKeyIcon } from "@phosphor-icons/react";
+
+interface BadgeShowcaseProps {
+  playerId: string;
+}
+
+interface BadgeDisplay {
+  badge: Badge;
+  progress?: BadgeProgress;
+  earned: boolean;
+  progressText: string;
+}
+
+interface BadgeIconProps {
+  badge: Badge;
+  filled: boolean;
+}
+
+export const BadgeIcon = ({ badge, filled, size = 48 }: BadgeIconProps & { size?: number }) => {
+  const [imageError, setImageError] = useState(false);
+  const imagePath = `/static/img/${badge.key}.png`;
+
+  if (imageError) {
+    return filled ? (
+      <MedalIcon
+        size={size}
+        weight="fill"
+        color="var(--mantine-primary-color-6)"
+      />
+    ) : (
+      <LockKeyIcon
+        size={size - 4}
+        weight="regular"
+        color="var(--mantine-color-dimmed)"
+      />
+    );
+  }
+
+  return (
+    <Image
+      src={imagePath}
+      alt={badge.name}
+      width={size}
+      height={size}
+      onError={() => setImageError(true)}
+      style={{
+        objectFit: 'contain',
+        opacity: filled ? 1 : 0.4,
+      }}
+    />
+  );
+};
+
+
+const BadgeShowcase = ({ playerId }: BadgeShowcaseProps) => {
+  const { user } = useAuth();
+  const { data: badgeProgress } = usePlayerBadges(playerId);
+  const { data: allBadges } = useAllBadges();
+
+  const isCurrentUser = user?.id === playerId;
+
+  const badgesToDisplay = useMemo(() => {
+    const displays: BadgeDisplay[] = [];
+
+    if (isCurrentUser) {
+      for (const badge of allBadges) {
+        const progress = badgeProgress.find(bp => bp.badge.id === badge.id);
+        const earned = progress?.earned || false;
+
+        if (badge.type === 'manual' && !earned) {
+          continue;
+        }
+
+        const isVeteranBadge = /^veteran_\d+_badge$/.test(badge.key);
+        if (isVeteranBadge && !earned) {
+          continue;
+        }
+
+        if (badge.key === 'new_player_badge') {
+          continue;
+        }
+
+        let progressText = "";
+        if (progress) {
+          const target = getTargetProgress(badge);
+          progressText = `${progress.progress} / ${target}`;
+        } else {
+          const target = getTargetProgress(badge);
+          progressText = `0 / ${target}`;
+        }
+
+        displays.push({
+          badge,
+          progress,
+          earned,
+          progressText,
+        });
+      }
+
+      displays.sort((a, b) => {
+        if (a.earned && !b.earned) return -1;
+        if (!a.earned && b.earned) return 1;
+        return a.badge.order - b.badge.order;
+      });
+    } else {
+      const earnedProgress = badgeProgress.filter(bp => bp.earned);
+      for (const progress of earnedProgress) {
+        const badge: Badge = {
+          ...progress.badge,
+          criteria: {},
+          created: progress.created,
+          updated: progress.updated,
+        };
+
+        const target = getTargetProgress(badge);
+        displays.push({
+          badge,
+          progress,
+          earned: true,
+          progressText: `${progress.progress} / ${target}`,
+        });
+      }
+
+      displays.sort((a, b) => a.badge.order - b.badge.order);
+    }
+
+    return displays;
+  }, [allBadges, badgeProgress, isCurrentUser]);
+
+  if (badgesToDisplay.length === 0) {
+    return null;
+  }
+
+  return (
+    <Box mb="lg">
+      <Box
+        px="md"
+        style={{
+          maxHeight: '240px',
+          overflowY: 'auto',
+          overflowX: 'hidden',
+          width: '100%',
+        }}
+      >
+        <Box
+          style={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(auto-fill, minmax(85px, 1fr))',
+            gap: 'var(--mantine-spacing-md)',
+            paddingBottom: 'var(--mantine-spacing-sm)',
+            width: '100%',
+          }}
+        >
+          {badgesToDisplay.map((display) => {
+            const isStackableBadge = ['winner_badge', 'silver_medal_badge', 'bronze_medal_badge'].includes(display.badge.key);
+            const stackCount = display.earned && isStackableBadge
+              ? (display.progress?.progress || 0)
+              : 1;
+            const showStack = stackCount > 1;
+
+            return (
+              <Popover key={display.badge.id} width={280} position="top" withArrow shadow="md" withinPortal>
+                <Popover.Target>
+                  <Box
+                    style={{
+                      cursor: "pointer",
+                      transition: 'all 0.2s ease',
+                      position: 'relative',
+                    }}
+                  >
+                    {showStack && (
+                      <>
+                        {[...Array(Math.min(stackCount - 1, 2))].map((_, i) => (
+                          <Box
+                            key={i}
+                            style={{
+                              width: '100px',
+                              height: '100px',
+                              borderRadius: '12px',
+                              background: 'light-dark(var(--mantine-color-white), var(--mantine-color-dark-7))',
+                              border: '2px solid var(--mantine-primary-color-5)',
+                              position: 'absolute',
+                              top: `${(i + 1) * 4}px`,
+                              left: `${(i + 1) * 4}px`,
+                              opacity: 0.3 - (i * 0.1),
+                              zIndex: -(i + 1),
+                            }}
+                          />
+                        ))}
+                      </>
+                    )}
+
+                    <Box
+                      style={{
+                        width: '100px',
+                        height: '100px',
+                        borderRadius: '12px',
+                        background: 'light-dark(var(--mantine-color-white), var(--mantine-color-dark-7))',
+                        border: display.earned
+                          ? '2px solid var(--mantine-primary-color-6)'
+                          : '2px dashed var(--mantine-primary-color-4)',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        flexDirection: 'column',
+                        gap: '4px',
+                        padding: 'var(--mantine-spacing-sm)',
+                        position: 'relative',
+                        boxShadow: display.earned
+                          ? '0 0 0 1px color-mix(in srgb, var(--mantine-primary-color-6) 20%, transparent)'
+                          : 'none',
+                        opacity: display.earned ? 1 : 0.4,
+                        zIndex: 1,
+                      }}
+                    >
+                      <BadgeIcon badge={display.badge} filled={display.earned} />
+
+                      {showStack && (
+                        <Box
+                          style={{
+                            position: 'absolute',
+                            top: '4px',
+                            right: '4px',
+                            color: 'var(--mantine-primary-color-6)',
+                            width: '20px',
+                            height: '20px',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            fontSize: '10px',
+                            fontWeight: 700,
+                          }}
+                        >
+                          x{stackCount}
+                        </Box>
+                      )}
+
+                      <Text
+                        size="xs"
+                        px={4}
+                        fw={display.earned ? 600 : 500}
+                        ta="center"
+                        c={display.earned ? undefined : 'dimmed'}
+                        style={{ lineHeight: 1.1 }}
+                      >
+                        {display.badge.name}
+                      </Text>
+                    </Box>
+                  </Box>
+                </Popover.Target>
+                <Popover.Dropdown>
+                  <Stack gap={4} align="center">
+                    <Box style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+                      <BadgeIcon badge={display.badge} filled={display.earned} size={80} />
+                    </Box>
+
+                    <Title order={5} ta="center">
+                      {display.badge.name}
+                    </Title>
+
+                    <Text size="sm" c="dimmed" ta="center">
+                      {display.badge.description}
+                    </Text>
+
+                    {isCurrentUser && (
+                      <Box>
+                        <Box mb="xs" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                          <Text size="sm" fw={500} c="dimmed">
+                            Progress&nbsp;
+                          </Text>
+                          <Text size="sm" fw={600} c="dimmed">
+                            {display.progressText}
+                          </Text>
+                        </Box>
+                        <Progress
+                          value={(display.progress?.progress || 0) / getTargetProgress(display.badge) * 100}
+                          size="sm"
+                          radius="sm"
+                          color={display.earned ? "green" : undefined}
+                        />
+                      </Box>
+                    )}
+                  </Stack>
+                </Popover.Dropdown>
+              </Popover>
+            );
+          })}
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+function getTargetProgress(badge: Badge): number {
+  const criteria = badge.criteria;
+  return (
+    criteria.matches_played ||
+    criteria.tournament_wins ||
+    criteria.tournaments_attended ||
+    criteria.overtime_matches ||
+    criteria.overtime_wins ||
+    criteria.consecutive_wins ||
+    1
+  );
+}
+
+export default BadgeShowcase;

src/features/badges/components/badge-stats-table-skeleton.tsx

@@ -0,0 +1,67 @@
+import {
+  Stack,
+  Container,
+  Box,
+  Divider,
+  Grid,
+  Skeleton,
+} from '@mantine/core';
+
+const BadgeStatsTableSkeleton = () => {
+  return (
+    <Container size='100%' px={0}>
+      <Stack gap='xs'>
+        <Stack gap={0}>
+          {Array.from({ length: 15 }).map((_, index) => (
+            <BadgeStatRowSkeleton
+              key={`skeleton-${index}`}
+              isLastRow={index >= 14}
+            />
+          ))}
+        </Stack>
+      </Stack>
+    </Container>
+  );
+};
+
+export default BadgeStatsTableSkeleton;
+
+interface BadgeStatRowSkeletonProps {
+  isLastRow: boolean;
+}
+
+const BadgeStatRowSkeleton: React.FC<BadgeStatRowSkeletonProps> = ({
+  isLastRow,
+}) => {
+  return (
+    <Box>
+      <Grid p={'xs'} align='center'>
+        <Grid.Col span={2} style={{ display: 'flex', alignItems: 'center' }}>
+          <Skeleton circle height={48} width={48} />
+        </Grid.Col>
+        <Grid.Col span={'auto'}>
+          <Stack gap={8}>
+            <Skeleton height={16} width='60%' />
+            <Skeleton height={14} width='80%' />
+            <Skeleton height={12} width='50%' mt={4} />
+          </Stack>
+        </Grid.Col>
+        <Grid.Col
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'flex-end',
+            width: '73px',
+            flexBasis: '73px',
+          }}
+        >
+          <Stack gap={4} align='center'>
+            <Skeleton height={20} width={40} />
+            <Skeleton height={12} width={50} />
+          </Stack>
+        </Grid.Col>
+      </Grid>
+      {!isLastRow && <Divider />}
+    </Box>
+  );
+};

src/features/badges/components/badge-stats-table.tsx

@@ -0,0 +1,177 @@
+import {
+  Stack,
+  Container,
+  Title,
+  Box,
+  Divider,
+  Text,
+  Grid,
+  UnstyledButton,
+} from '@mantine/core';
+import { useAllBadges, useAllEarnedBadges } from '../queries';
+import { BadgeIcon } from './badge-showcase';
+import { useMemo } from 'react';
+import { Badge, EarnedBadge } from '../types';
+import { useAllPlayers } from '@/features/teams/hooks/use-available-players';
+import { useSheet } from '@/hooks/use-sheet';
+import Sheet from '@/components/sheet/sheet';
+import PlayerList from '@/features/players/components/player-list';
+import { useAuth } from '@/contexts/auth-context';
+import { Player } from '@/features/players/types';
+
+const BadgeStatsTable = () => {
+  const { data: allBadges } = useAllBadges();
+  const { data: allEarnedBadges } = useAllEarnedBadges();
+  const { data: allPlayers } = useAllPlayers();
+  const totalNumPlayers = allPlayers?.length || 0;
+
+  const groupedEarnedBadges = useMemo(() => {
+    const returnDict = new Map<string, EarnedBadge[]>();
+    allEarnedBadges?.forEach((earnedBadge) => {
+      if (!returnDict.has(earnedBadge.badge)) {
+        returnDict.set(earnedBadge.badge, []);
+      }
+      returnDict.get(earnedBadge.badge)!.push(earnedBadge);
+    });
+    return returnDict;
+  }, [allEarnedBadges]);
+
+  if (allBadges.length === 0) {
+    return (
+      <Container px={0} size='md'>
+        <Stack align='center' gap='md' py='xl'>
+          <Title order={3} c='dimmed'>
+            No Badges Available
+          </Title>
+        </Stack>
+      </Container>
+    );
+  }
+
+  return (
+    <Container size='100%' px={0}>
+      <Stack gap='xs'>
+        <Stack gap={0}>
+          {allBadges.map((badge, index) => (
+            <BadgeStatRow
+              badge={badge}
+              totalNumPlayers={totalNumPlayers}
+              earnedBadges={groupedEarnedBadges.get(badge.id) || []}
+              isLastRow={index >= allBadges.length - 1}
+            />
+          ))}
+        </Stack>
+      </Stack>
+    </Container>
+  );
+};
+
+export default BadgeStatsTable;
+
+interface BadgeStatRowProps {
+  badge: Badge;
+  totalNumPlayers: number;
+  earnedBadges: EarnedBadge[];
+  isLastRow: boolean;
+}
+
+const BadgeStatRow: React.FC<BadgeStatRowProps> = ({
+  badge,
+  totalNumPlayers,
+  earnedBadges,
+  isLastRow,
+}) => {
+  const badgeSheet = useSheet();
+  const { user } = useAuth();
+
+  const playerNamesBlurb = useMemo(() => {
+    if (earnedBadges.length === 0) return 'No players yet';
+
+    const currentUserHasBadge = earnedBadges.some(
+      (eb) => eb.player.id === user?.id
+    );
+
+    const otherPlayers = earnedBadges.filter(
+      (eb) => eb.player.id !== user?.id
+    );
+
+    const displayPlayers = currentUserHasBadge
+      ? otherPlayers.slice(0, 2)
+      : earnedBadges.slice(0, 3);
+
+    const names = displayPlayers.map((eb) => eb.player.first_name);
+
+    if (currentUserHasBadge) {
+      const remaining = earnedBadges.length - 1 - names.length;
+      if (names.length === 0 && remaining === 0) {
+        return 'You';
+      } else if (names.length === 0 && remaining > 0) {
+        return `You and ${remaining} other${remaining > 1 ? 's' : ''}`;
+      } else if (remaining > 0) {
+        return `You, ${names.join(', ')} and ${remaining} other${remaining > 1 ? 's' : ''}`;
+      } else {
+        return `You${names.length > 0 ? ` and ${names.join(', ')}` : ''}`;
+      }
+    } else {
+      const remaining = earnedBadges.length - names.length;
+      if (remaining > 0) {
+        return `${names.join(', ')} and ${remaining} other${remaining > 1 ? 's' : ''}`;
+      } else {
+        return names.join(', ');
+      }
+    }
+  }, [earnedBadges, user?.id]);
+
+  const playersForList: Player[] = useMemo(() => {
+    return earnedBadges.map((eb) => ({
+      id: eb.player.id,
+      first_name: eb.player.first_name,
+      last_name: eb.player.last_name,
+    } as Player));
+  }, [earnedBadges]);
+
+  return (
+    <Box key={badge.id}>
+      <UnstyledButton onClick={badgeSheet.open} w='100%'>
+        <Grid p={'xs'} align='center'>
+          <Grid.Col span={2} style={{ display: 'flex', alignItems: 'center' }}>
+            <BadgeIcon badge={badge} filled={true} />
+          </Grid.Col>
+          <Grid.Col span={'auto'}>
+            <Stack gap={2}>
+              <Text fw={700}>{badge.name}</Text>
+              <Text size="sm" fw={500}>{badge.description}</Text>
+              <Text size='xs' c='dimmed' mt={4}>
+                {playerNamesBlurb}
+              </Text>
+            </Stack>
+          </Grid.Col>
+          <Grid.Col
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'flex-end',
+              width: '73px',
+              flexBasis: '73px', // ensures the width is respected
+            }}
+          >
+            <Stack gap={0} align='center'>
+              <Text c="dimmed" size='lg' fw={700}>
+                {(
+                  ((earnedBadges?.length ?? 0) / totalNumPlayers) *
+                  100
+                ).toFixed(0)}
+                %
+              </Text>
+              <Text c="dimmed" size='xs'>of players</Text>
+            </Stack>
+          </Grid.Col>
+        </Grid>
+      </UnstyledButton>
+      <Sheet title={badge.name + ' Badge Holders'} {...badgeSheet.props}>
+        <PlayerList players={playersForList} />
+      </Sheet>
+      {!isLastRow && <Divider />}
+    </Box>
+  );
+};

src/features/badges/queries.ts

@@ -0,0 +1,32 @@
+import { useServerSuspenseQuery } from "@/lib/tanstack-query/hooks";
+import { getPlayerBadges, getAllBadges, getAllEarnedBadges } from "./server";
+
+export const badgeKeys = {
+  playerBadges: (playerId: string) => ['badges', 'player', playerId],
+  allBadges: () => ['badges', 'all'],
+  allEarnedBadges: () => ['badges', 'earned'],
+};
+
+export const badgeQueries = {
+  playerBadges: (playerId: string) => ({
+    queryKey: badgeKeys.playerBadges(playerId),
+    queryFn: async () => await getPlayerBadges({ data: playerId })
+  }),
+  allBadges: () => ({
+    queryKey: badgeKeys.allBadges(),
+    queryFn: async () => await getAllBadges()
+  }),
+  allEarnedBadges: () => ({
+    queryKey: badgeKeys.allEarnedBadges(),
+    queryFn: async () => await getAllEarnedBadges(),
+  }),
+};
+
+export const usePlayerBadges = (playerId: string) =>
+  useServerSuspenseQuery(badgeQueries.playerBadges(playerId));
+
+export const useAllBadges = () =>
+  useServerSuspenseQuery(badgeQueries.allBadges());
+
+export const useAllEarnedBadges = () =>
+  useServerSuspenseQuery(badgeQueries.allEarnedBadges());

src/features/badges/server.ts

@@ -1,4 +1,38 @@
 import { toServerResult } from "@/lib/tanstack-query/utils/to-server-result";
-import { superTokensAdminFunctionMiddleware } from "@/utils/supertokens";
+import { superTokensAdminFunctionMiddleware, superTokensFunctionMiddleware } from "@/utils/supertokens";
 import { createServerFn } from "@tanstack/react-start";
+import { pbAdmin } from "@/lib/pocketbase/client";
+import { z } from "zod";
 
+export const getPlayerBadges = createServerFn()
+  .inputValidator(z.string())
+  .middleware([superTokensFunctionMiddleware])
+  .handler(async ({ data: playerId }) =>
+    toServerResult(() => pbAdmin.getPlayerBadgeProgress(playerId))
+  );
+
+export const migrateBadgeProgress = createServerFn()
+  .middleware([superTokensAdminFunctionMiddleware])
+  .handler(async () =>
+    toServerResult(() => pbAdmin.migrateBadgeProgress())
+  );
+
+export const getAllBadges = createServerFn()
+  .middleware([superTokensFunctionMiddleware])
+  .handler(async () =>
+    toServerResult(() => pbAdmin.listBadges())
+  );
+
+export const getAllEarnedBadges = createServerFn()
+  .middleware([superTokensFunctionMiddleware])
+  .handler(async () => toServerResult(() => pbAdmin.listEarnedBadges()));
+
+export const awardManualBadge = createServerFn()
+  .inputValidator(z.object({
+    playerId: z.string(),
+    badgeId: z.string(),
+  }))
+  .middleware([superTokensAdminFunctionMiddleware])
+  .handler(async ({ data }) =>
+    toServerResult(() => pbAdmin.awardManualBadge(data.playerId, data.badgeId))
+  );

src/features/badges/types.ts

@@ -0,0 +1,37 @@
+import { PlayerInfo } from '../players/types';
+
+export interface BadgeInfo {
+  id: string;
+  name: string;
+  key: string;
+  description: string;
+  type: "manual" | "match" | "tournament";
+  progressive: boolean;
+  order: number;
+}
+
+export interface Badge extends BadgeInfo {
+  criteria: Record<string, any>;
+  created: string;
+  updated: string;
+}
+
+export interface BadgeProgress {
+  id: string;
+  badge: BadgeInfo;
+  player: string;
+  progress: number;
+  earned: boolean;
+  created: string;
+  updated: string;
+}
+
+export interface EarnedBadge {
+  id: string;
+  badge: string;
+  player: PlayerInfo;
+  progress: number;
+  earned: boolean;
+  created: string;
+  updated: string;
+}

src/features/core/components/header.tsx

@@ -8,11 +8,12 @@ const Header = ({ collapsed, title, withBackButton }: HeaderProps) => {
   return (
     <AppShell.Header
       id='app-header'
-      display={collapsed ? 'none' : 'block'}
+      display={collapsed ? 'none' : 'flex'}
+      style={{ alignItems: 'center', justifyContent: 'center' }}
     >
       { withBackButton && <BackButton /> }
-      <Flex justify='center' align='center' h='100%' px='md'>
-        <Title order={2}>{title}</Title>
+      <Flex justify='center' px='md' mt={8}>
+        <Title order={1}>{title?.toLocaleUpperCase()}</Title>
       </Flex>
     </AppShell.Header>
   );

src/features/core/components/layout.tsx

@@ -31,14 +31,18 @@ const Layout: React.FC<PropsWithChildren> = ({ children }) => {
       pos='relative'
       h='100dvh'
       mah='100dvh'
-      // style={{ top: viewport.top }} //, transition: 'top 0.1s ease-in-out' }}
+      style={{
+        height: `${viewport.height}px`,
+        minHeight: '100dvh',
+        // top: viewport.top
+      }}
     >
       <Header {...header} />
       <AppShell.Main
         pos='relative'
         h='100%'
         mah='100%'
-        pb={{ base: 65, md: 0 }}
+        pb={{ base: 65, sm: 0 }}
         px={{ base: 0.01, sm: 100, md: 200, lg: 300 }}
         maw='100dvw'
         style={{ transition: 'none', overflow: 'hidden' }}