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/1759344931_deleted_player_badges_view.js

@@ -1,187 +0,0 @@
-/// <reference path="../pb_data/types.d.ts" />
-migrate((app) => {
-  const collection = app.findCollectionByNameOrId("pbc_5062686152");
-
-  return app.delete(collection);
-}, (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"
-      },
-      {
-        "cascadeDelete": false,
-        "collectionId": "pbc_1340419796",
-        "hidden": false,
-        "id": "relation4154639100",
-        "maxSelect": 1,
-        "minSelect": 0,
-        "name": "badge_id",
-        "presentable": false,
-        "required": false,
-        "system": false,
-        "type": "relation"
-      },
-      {
-        "autogeneratePattern": "",
-        "hidden": false,
-        "id": "_clone_GhrR",
-        "max": 0,
-        "min": 0,
-        "name": "badge_name",
-        "pattern": "",
-        "presentable": false,
-        "primaryKey": false,
-        "required": true,
-        "system": false,
-        "type": "text"
-      },
-      {
-        "autogeneratePattern": "",
-        "hidden": false,
-        "id": "_clone_DEaW",
-        "max": 0,
-        "min": 0,
-        "name": "badge_description",
-        "pattern": "",
-        "presentable": false,
-        "primaryKey": false,
-        "required": true,
-        "system": false,
-        "type": "text"
-      },
-      {
-        "hidden": false,
-        "id": "_clone_MHmw",
-        "maxSelect": 1,
-        "name": "badge_type",
-        "presentable": false,
-        "required": true,
-        "system": false,
-        "type": "select",
-        "values": [
-          "tournament_participation",
-          "tournament_placement",
-          "performance",
-          "overtime",
-          "match_milestone"
-        ]
-      },
-      {
-        "autogeneratePattern": "",
-        "hidden": false,
-        "id": "_clone_11YE",
-        "max": 50,
-        "min": 0,
-        "name": "badge_icon",
-        "pattern": "",
-        "presentable": false,
-        "primaryKey": false,
-        "required": false,
-        "system": false,
-        "type": "text"
-      },
-      {
-        "autogeneratePattern": "",
-        "hidden": false,
-        "id": "_clone_qAJu",
-        "max": 50,
-        "min": 0,
-        "name": "badge_color",
-        "pattern": "",
-        "presentable": false,
-        "primaryKey": false,
-        "required": false,
-        "system": false,
-        "type": "text"
-      },
-      {
-        "hidden": false,
-        "id": "_clone_giOf",
-        "name": "is_progressive",
-        "presentable": false,
-        "required": false,
-        "system": false,
-        "type": "bool"
-      },
-      {
-        "hidden": false,
-        "id": "json3212413036",
-        "maxSize": 1,
-        "name": "current_progress",
-        "presentable": false,
-        "required": false,
-        "system": false,
-        "type": "json"
-      },
-      {
-        "hidden": false,
-        "id": "json4171899439",
-        "maxSize": 1,
-        "name": "target_progress",
-        "presentable": false,
-        "required": false,
-        "system": false,
-        "type": "json"
-      },
-      {
-        "hidden": false,
-        "id": "json3435813110",
-        "maxSize": 1,
-        "name": "is_earned",
-        "presentable": false,
-        "required": false,
-        "system": false,
-        "type": "json"
-      },
-      {
-        "hidden": false,
-        "id": "_clone_Q7lC",
-        "max": "",
-        "min": "",
-        "name": "earned_at",
-        "presentable": false,
-        "required": false,
-        "system": false,
-        "type": "date"
-      }
-    ],
-    "id": "pbc_5062686152",
-    "indexes": [],
-    "listRule": null,
-    "name": "player_badges_view",
-    "system": false,
-    "type": "view",
-    "updateRule": null,
-    "viewQuery": "\n      SELECT\n        (p.id || '_' || b.id) as id,\n        p.id as player_id,\n        b.id as badge_id,\n        b.name as badge_name,\n        b.description as badge_description,\n        b.type as badge_type,\n        b.icon as badge_icon,\n        b.color as badge_color,\n        b.is_progressive,\n        COALESCE(pbp.current_progress, 0) as current_progress,\n        COALESCE(pbp.target_progress, b.progress_target, 1) as target_progress,\n        COALESCE(pbp.is_earned, false) as is_earned,\n        pbp.earned_at\n      FROM players p\n      CROSS JOIN badges b\n      LEFT JOIN player_badge_progress pbp ON pbp.player_id = p.id AND pbp.badge_id = b.id\n    ",
-    "viewRule": null
-  });
-
-  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)
+})

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'
@@ -76,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',
@@ -215,6 +221,7 @@ export interface FileRoutesByFullPath {
   '/logout': typeof LogoutRoute
   '/refresh-session': typeof RefreshSessionRoute
   '/admin': typeof AuthedAdminRouteWithChildren
+  '/badges': typeof AuthedBadgesRoute
   '/settings': typeof AuthedSettingsRoute
   '/stats': typeof AuthedStatsRoute
   '/': typeof AuthedIndexRoute
@@ -247,6 +254,7 @@ export interface FileRoutesByTo {
   '/login': typeof LoginRoute
   '/logout': typeof LogoutRoute
   '/refresh-session': typeof RefreshSessionRoute
+  '/badges': typeof AuthedBadgesRoute
   '/settings': typeof AuthedSettingsRoute
   '/stats': typeof AuthedStatsRoute
   '/': typeof AuthedIndexRoute
@@ -282,6 +290,7 @@ 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
@@ -317,6 +326,7 @@ export interface FileRouteTypes {
     | '/logout'
     | '/refresh-session'
     | '/admin'
+    | '/badges'
     | '/settings'
     | '/stats'
     | '/'
@@ -349,6 +359,7 @@ export interface FileRouteTypes {
     | '/login'
     | '/logout'
     | '/refresh-session'
+    | '/badges'
     | '/settings'
     | '/stats'
     | '/'
@@ -383,6 +394,7 @@ export interface FileRouteTypes {
     | '/logout'
     | '/refresh-session'
     | '/_authed/admin'
+    | '/_authed/badges'
     | '/_authed/settings'
     | '/_authed/stats'
     | '/_authed/'
@@ -481,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'
@@ -687,6 +706,7 @@ const AuthedAdminRouteWithChildren = AuthedAdminRoute._addFileChildren(
 
 interface AuthedRouteChildren {
   AuthedAdminRoute: typeof AuthedAdminRouteWithChildren
+  AuthedBadgesRoute: typeof AuthedBadgesRoute
   AuthedSettingsRoute: typeof AuthedSettingsRoute
   AuthedStatsRoute: typeof AuthedStatsRoute
   AuthedIndexRoute: typeof AuthedIndexRoute
@@ -699,6 +719,7 @@ interface AuthedRouteChildren {
 
 const AuthedRouteChildren: AuthedRouteChildren = {
   AuthedAdminRoute: AuthedAdminRouteWithChildren,
+  AuthedBadgesRoute: AuthedBadgesRoute,
   AuthedSettingsRoute: AuthedSettingsRoute,
   AuthedStatsRoute: AuthedStatsRoute,
   AuthedIndexRoute: AuthedIndexRoute,

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/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 />}>
+  const [viewType, setViewType] = useState<'all' | 'mainline' | 'regional'>('all');
-    <PlayerStatsTable />
+  const deferredViewType = useDeferredValue(viewType);
-  </Suspense>;
+  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/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/sheet/drawer.tsx

@@ -1,5 +1,10 @@
-import { Box, Container, Flex, Loader, Title, useComputedColorScheme } from "@mantine/core";
+import {
-import { PropsWithChildren, Suspense, useEffect, useRef } from "react";
+  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 order={2}>{title}</Title></VaulDrawer.Title>
+              <VaulDrawer.Title>
-              <Suspense fallback={
+                <Title order={2}>{title}</Title>
-                <Flex justify='center' align='center' w='100%' h={400}>
+              </VaulDrawer.Title>
-                  <Loader size='lg' />
+              {children}
-                </Flex>
-              }>
-                {children}
-              </Suspense>
             </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
+      <Suspense fallback={
-        style={{ flex: 1, maxHeight: '75dvh' }}
+        <Flex justify='center' align='center' w='100%' style={{ minHeight: '25vh' }}>
-        scrollbarSize={8}
+          <Loader size='lg' />
-        scrollbars="y"
+        </Flex>
-        type="scroll"
+      }>
-      >
+        <ScrollArea.Autosize
-        {children}
+          style={{ flex: 1, maxHeight: '75dvh' }}
-      </ScrollArea.Autosize>
+          scrollbarSize={8}
+          scrollbars="y"
+          type="scroll"
+        >
+          {children}
+        </ScrollArea.Autosize>
+      </Suspense>
     </SheetComponent>
   );
 };

src/components/stats-overview.tsx

@@ -101,7 +101,7 @@ 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 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 },
@@ -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/features/badges/components/badge-showcase.tsx

@@ -18,15 +18,15 @@ interface BadgeDisplay {
 
 interface BadgeIconProps {
   badge: Badge;
-  earned: boolean;
+  filled: boolean;
 }
 
-const BadgeIcon = ({ badge, earned, size = 48 }: BadgeIconProps & { size?: number }) => {
+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 earned ? (
+    return filled ? (
       <MedalIcon
         size={size}
         weight="fill"
@@ -50,7 +50,7 @@ const BadgeIcon = ({ badge, earned, size = 48 }: BadgeIconProps & { size?: numbe
       onError={() => setImageError(true)}
       style={{
         objectFit: 'contain',
-        opacity: earned ? 1 : 0.4,
+        opacity: filled ? 1 : 0.4,
       }}
     />
   );
@@ -218,7 +218,7 @@ const BadgeShowcase = ({ playerId }: BadgeShowcaseProps) => {
                         zIndex: 1,
                       }}
                     >
-                      <BadgeIcon badge={display.badge} earned={display.earned} />
+                      <BadgeIcon badge={display.badge} filled={display.earned} />
 
                       {showStack && (
                         <Box
@@ -256,7 +256,7 @@ const BadgeShowcase = ({ playerId }: BadgeShowcaseProps) => {
                 <Popover.Dropdown>
                   <Stack gap={4} align="center">
                     <Box style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-                      <BadgeIcon badge={display.badge} earned={display.earned} size={80} />
+                      <BadgeIcon badge={display.badge} filled={display.earned} size={80} />
                     </Box>
 
                     <Title order={5} ta="center">

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

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

src/features/badges/server.ts

@@ -23,6 +23,10 @@ export const getAllBadges = createServerFn()
     toServerResult(() => pbAdmin.listBadges())
   );
 
+export const getAllEarnedBadges = createServerFn()
+  .middleware([superTokensFunctionMiddleware])
+  .handler(async () => toServerResult(() => pbAdmin.listEarnedBadges()));
+
 export const awardManualBadge = createServerFn()
   .inputValidator(z.object({
     playerId: z.string(),

src/features/badges/types.ts

@@ -1,3 +1,5 @@
+import { PlayerInfo } from '../players/types';
+
 export interface BadgeInfo {
   id: string;
   name: string;
@@ -23,3 +25,13 @@ export interface BadgeProgress {
   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/providers.tsx

@@ -1,6 +1,9 @@
 import { AuthProvider } from "@/contexts/auth-context"
 import { SpotifyProvider } from "@/contexts/spotify-context"
 import MantineProvider from "@/lib/mantine/mantine-provider"
+//import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools'
+//import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
+//import { TanStackDevtools } from '@tanstack/react-devtools'
 import { Toaster } from "sonner"
 
 const Providers = ({ children }: { children: React.ReactNode }) => {
@@ -8,6 +11,22 @@ const Providers = ({ children }: { children: React.ReactNode }) => {
     <AuthProvider>
       <SpotifyProvider>
         <MantineProvider>
+          {/*<TanStackDevtools
+            eventBusConfig={{
+              debug: false,
+              connectToServerBus: true,
+            }}
+            plugins={[
+              {
+                name: 'TanStack Query',
+                render: <ReactQueryDevtoolsPanel />,
+              },
+              {
+                name: 'TanStack Router',
+                render: <TanStackRouterDevtoolsPanel />,
+              }
+            ]}
+          />*/}
           <Toaster position='top-center' />
           {children}
         </MantineProvider>

src/features/core/components/pullable.tsx

@@ -32,7 +32,10 @@ const Pullable: React.FC<PullableProps> = ({ children, scrollPosition, onScrollP
     if (refresh.length > 0) {
       // TODO: Remove this after testing - or does the delay help ux?
       await new Promise(resolve => setTimeout(resolve, 1000));
-      await queryClient.refetchQueries({ queryKey: refresh, exact: true});
+      refresh.forEach(async (queryKey) => {
+        const keyArray = Array.isArray(queryKey) ? queryKey : [queryKey];
+        await queryClient.refetchQueries({ queryKey: keyArray, exact: true });
+      });
     }
     setIsRefreshing(false);
   }, [refresh]);

src/features/matches/components/match-card.tsx

@@ -1,20 +1,26 @@
-import { Text, Group, Stack, Paper, Indicator, Box, Tooltip } from "@mantine/core";
+import { Text, Group, Stack, Paper, Indicator, Box, Tooltip, ActionIcon } from "@mantine/core";
-import { CrownIcon } from "@phosphor-icons/react";
+import { CrownIcon, FootballHelmetIcon } from "@phosphor-icons/react";
 import { useNavigate } from "@tanstack/react-router";
 import { Match } from "../types";
 import Avatar from "@/components/avatar";
 import EmojiBar from "@/features/reactions/components/emoji-bar";
 import { Suspense } from "react";
+import { useSheet } from "@/hooks/use-sheet";
+import Sheet from "@/components/sheet/sheet";
+import TeamHeadToHeadSheet from "./team-head-to-head-sheet";
 
 interface MatchCardProps {
   match: Match;
+  hideH2H?: boolean;
 }
 
-const MatchCard = ({ match }: MatchCardProps) => {
+const MatchCard = ({ match, hideH2H = false }: MatchCardProps) => {
   const navigate = useNavigate();
+  const h2hSheet = useSheet();
   const isHomeWin = match.home_cups > match.away_cups;
   const isAwayWin = match.away_cups > match.home_cups;
   const isStarted = match.status === "started";
+  const hasPrivate = match.home?.private || match.away?.private;
 
   const handleHomeTeamClick = (e: React.MouseEvent) => {
     e.stopPropagation();
@@ -30,15 +36,13 @@ const MatchCard = ({ match }: MatchCardProps) => {
     }
   };
 
+  const handleH2HClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    h2hSheet.open();
+  };
+
   return (
-    <Indicator
+    <>
-      disabled={!isStarted}
-      size={12}
-      color="red"
-      processing
-      position="top-end"
-      offset={24}
-    >
       <Box style={{ position: "relative" }}>
         <Paper
           px="md"
@@ -48,15 +52,62 @@ const MatchCard = ({ match }: MatchCardProps) => {
           style={{ position: "relative", zIndex: 2 }}
         >
           <Stack gap="sm">
-            <Group gap="xs">
+            <Group gap="xs" justify="space-between">
-              <Text size="xs" fw={600} lineClamp={1} c="dimmed">
+              <Group gap="xs" style={{ flex: 1 }}>
-                {match.tournament.name}
+                {isStarted && (
-              </Text>
+                  <Indicator
-              <Text c="dimmed">-</Text>
+                    size={8}
-              <Text size="xs" c="dimmed">
+                    color="red"
-                Round {match.round + 1}
+                    processing
-                {match.is_losers_bracket && " (Losers)"}
+                    position="middle-start"
-              </Text>
+                    offset={0}
+                  />
+                )}
+                <Text size="xs" fw={600} lineClamp={1} c="dimmed">
+                  {match.tournament.name}
+                </Text>
+                {!match.tournament.regional && (
+                  <>
+                    <Text c="dimmed">-</Text>
+                    <Text size="xs" c="dimmed">
+                      Round {match.round + 1}
+                      {match.is_losers_bracket && " (Losers)"}
+                    </Text>
+                  </>
+                )}
+              </Group>
+              {match.home && match.away && !hideH2H && !hasPrivate && (
+                <Tooltip label="Head to Head" withArrow position="left">
+                  <ActionIcon
+                    variant="subtle"
+                    size="sm"
+                    onClick={handleH2HClick}
+                    aria-label="View head-to-head"
+                    w={40}
+                  >
+                    <Group style={{ position: 'relative', width: 27.5, height: 16 }}>
+                      <FootballHelmetIcon
+                        size={14}
+                        style={{
+                          position: 'absolute',
+                          left: 0,
+                          top: 0,
+                          transform: 'rotate(25deg)',
+                        }}
+                      />
+                      <FootballHelmetIcon
+                        size={14}
+                        style={{
+                          position: 'absolute',
+                          right: 0,
+                          top: 0,
+                          transform: 'scaleX(-1) rotate(25deg)',
+                        }}
+                      />
+                    </Group>
+                  </ActionIcon>
+                </Tooltip>
+              )}
             </Group>
 
             <Group justify="space-between" align="center">
@@ -205,7 +256,16 @@ const MatchCard = ({ match }: MatchCardProps) => {
           </Suspense>
         </Paper>
       </Box>
-    </Indicator>
+
+      {match.home && match.away && !hideH2H && h2hSheet.isOpen && (
+        <Sheet
+          title="Head to Head"
+          {...h2hSheet.props}
+        >
+          <TeamHeadToHeadSheet team1={match.home} team2={match.away} isOpen={h2hSheet.props.opened} />
+        </Sheet>
+      )}
+    </>
   );
 };
 

src/features/matches/components/match-list.tsx

@@ -1,12 +1,13 @@
-import { Stack } from "@mantine/core";
+import { Stack, Text } from "@mantine/core";
 import { Match } from "../types";
 import MatchCard from "./match-card";
 
 interface MatchListProps {
   matches: Match[];
+  hideH2H?: boolean;
 }
 
-const MatchList = ({ matches }: MatchListProps) => {
+const MatchList = ({ matches, hideH2H = false }: MatchListProps) => {
   const filteredMatches = matches?.filter(match =>
     match.home && match.away && !match.bye && match.status != "tbd"
   ).sort((a, b) => a.start_time < b.start_time ? 1 : -1) || [];
@@ -15,13 +16,20 @@ const MatchList = ({ matches }: MatchListProps) => {
     return undefined;
   }
 
+  const isRegional = filteredMatches[0]?.tournament?.regional;
+
   return (
     <Stack p="md" gap="sm">
+      {isRegional && (
+        <Text size="xs" c="dimmed" ta="center" px="md">
+          Matches for regionals are unordered
+        </Text>
+      )}
       {filteredMatches.map((match, index) => (
         <div
           key={`match-${match.id}-${index}`}
         >
-          <MatchCard match={match} />
+          <MatchCard match={match} hideH2H={hideH2H} />
         </div>
       ))}
     </Stack>

src/features/matches/components/team-head-to-head-sheet.tsx

@@ -0,0 +1,217 @@
+import { Stack, Text, Group, Box, Divider, Paper } from "@mantine/core";
+import { TeamInfo } from "@/features/teams/types";
+import { useTeamHeadToHead } from "../queries";
+import { useMemo, useEffect, useState, Suspense } from "react";
+import { CrownIcon } from "@phosphor-icons/react";
+import MatchList from "./match-list";
+import TeamHeadToHeadSkeleton from "./team-head-to-head-skeleton";
+
+interface TeamHeadToHeadSheetProps {
+  team1: TeamInfo;
+  team2: TeamInfo;
+  isOpen?: boolean;
+}
+
+const TeamHeadToHeadContent = ({ team1, team2, isOpen = true }: TeamHeadToHeadSheetProps) => {
+  const [shouldFetch, setShouldFetch] = useState(false);
+
+  useEffect(() => {
+    if (isOpen && !shouldFetch) {
+      setShouldFetch(true);
+    }
+  }, [isOpen, shouldFetch]);
+
+  const { data: matches, isLoading } = useTeamHeadToHead(team1.id, team2.id, shouldFetch);
+
+  const stats = useMemo(() => {
+    if (!matches || matches.length === 0) {
+      return {
+        team1Wins: 0,
+        team2Wins: 0,
+        team1CupsFor: 0,
+        team2CupsFor: 0,
+        team1CupsAgainst: 0,
+        team2CupsAgainst: 0,
+        team1AvgMargin: 0,
+        team2AvgMargin: 0,
+      };
+    }
+
+    let team1Wins = 0;
+    let team2Wins = 0;
+    let team1CupsFor = 0;
+    let team2CupsFor = 0;
+    let team1CupsAgainst = 0;
+    let team2CupsAgainst = 0;
+    let team1TotalWinMargin = 0;
+    let team2TotalWinMargin = 0;
+
+    matches.forEach((match) => {
+      const isTeam1Home = match.home?.id === team1.id;
+      const team1Cups = isTeam1Home ? match.home_cups : match.away_cups;
+      const team2Cups = isTeam1Home ? match.away_cups : match.home_cups;
+
+      if (team1Cups > team2Cups) {
+        team1Wins++;
+        team1TotalWinMargin += (team1Cups - team2Cups);
+      } else if (team2Cups > team1Cups) {
+        team2Wins++;
+        team2TotalWinMargin += (team2Cups - team1Cups);
+      }
+
+      team1CupsFor += team1Cups;
+      team2CupsFor += team2Cups;
+      team1CupsAgainst += team2Cups;
+      team2CupsAgainst += team1Cups;
+    });
+
+    const team1AvgMargin = team1Wins > 0
+      ? team1TotalWinMargin / team1Wins
+      : 0;
+    const team2AvgMargin = team2Wins > 0
+      ? team2TotalWinMargin / team2Wins
+      : 0;
+
+    return {
+      team1Wins,
+      team2Wins,
+      team1CupsFor,
+      team2CupsFor,
+      team1CupsAgainst,
+      team2CupsAgainst,
+      team1AvgMargin,
+      team2AvgMargin,
+    };
+  }, [matches, team1.id]);
+
+  if (isLoading) {
+    return (
+      <Stack p="md" gap="md">
+        <Text size="sm" c="dimmed" ta="center">Loading...</Text>
+      </Stack>
+    );
+  }
+
+  if (!matches || matches.length === 0) {
+    return (
+      <Stack p="md" gap="md">
+        <Text size="sm" c="dimmed" ta="center">
+          These teams have not faced each other yet.
+        </Text>
+      </Stack>
+    );
+  }
+
+  const totalMatches = stats.team1Wins + stats.team2Wins;
+  const leader = stats.team1Wins > stats.team2Wins ? team1 : stats.team2Wins > stats.team1Wins ? team2 : null;
+
+  return (
+    <Stack gap="md">
+      <Paper p="md" withBorder radius="md">
+        <Stack gap="sm">
+          <Group justify="center" gap="xs">
+            <Text size="lg" fw={700}>{team1.name}</Text>
+            <Text size="sm" c="dimmed">vs</Text>
+            <Text size="lg" fw={700}>{team2.name}</Text>
+          </Group>
+
+          <Group justify="center" gap="lg">
+            <Stack gap={0} align="center">
+              <Text size="xl" fw={700}>{stats.team1Wins}</Text>
+              <Text size="xs" c="dimmed">{team1.name}</Text>
+            </Stack>
+            <Text size="md" c="dimmed">-</Text>
+            <Stack gap={0} align="center">
+              <Text size="xl" fw={700}>{stats.team2Wins}</Text>
+              <Text size="xs" c="dimmed">{team2.name}</Text>
+            </Stack>
+          </Group>
+
+          {leader && (
+            <Group justify="center" gap="xs">
+              <CrownIcon size={16} weight="fill" color="gold" />
+              <Text size="xs" c="dimmed">
+                {leader.name} leads the series
+              </Text>
+            </Group>
+          )}
+
+          {!leader && totalMatches > 0 && (
+            <Text size="xs" c="dimmed" ta="center">
+              Series is tied
+            </Text>
+          )}
+        </Stack>
+      </Paper>
+
+      <Stack gap={0}>
+        <Text size="sm" fw={600} px="md" mb="xs">Stats Comparison</Text>
+
+        <Paper withBorder>
+          <Stack gap={0}>
+            <Group justify="space-between" px="md" py="sm">
+              <Group gap="xs">
+                <Text size="sm" fw={600}>{stats.team1CupsFor}</Text>
+                <Text size="xs" c="dimmed">cups</Text>
+              </Group>
+              <Text size="xs" fw={500}>Total Cups</Text>
+              <Group gap="xs">
+                <Text size="xs" c="dimmed">cups</Text>
+                <Text size="sm" fw={600}>{stats.team2CupsFor}</Text>
+              </Group>
+            </Group>
+            <Divider />
+
+            <Group justify="space-between" px="md" py="sm">
+              <Group gap="xs">
+                <Text size="sm" fw={600}>
+                  {totalMatches > 0 ? (stats.team1CupsFor / totalMatches).toFixed(1) : '0.0'}
+                </Text>
+                <Text size="xs" c="dimmed">avg</Text>
+              </Group>
+              <Text size="xs" fw={500}>Avg Cups/Match</Text>
+              <Group gap="xs">
+                <Text size="xs" c="dimmed">avg</Text>
+                <Text size="sm" fw={600}>
+                  {totalMatches > 0 ? (stats.team2CupsFor / totalMatches).toFixed(1) : '0.0'}
+                </Text>
+              </Group>
+            </Group>
+            <Divider />
+
+            <Group justify="space-between" px="md" py="sm">
+              <Group gap="xs">
+                <Text size="sm" fw={600}>
+                  {!isNaN(stats.team1AvgMargin) ? stats.team1AvgMargin.toFixed(1) : '0.0'}
+                </Text>
+                <Text size="xs" c="dimmed">margin</Text>
+              </Group>
+              <Text size="xs" fw={500}>Avg Win Margin</Text>
+              <Group gap="xs">
+                <Text size="xs" c="dimmed">margin</Text>
+                <Text size="sm" fw={600}>
+                  {!isNaN(stats.team2AvgMargin) ? stats.team2AvgMargin.toFixed(1) : '0.0'}
+                </Text>
+              </Group>
+            </Group>
+          </Stack>
+        </Paper>
+      </Stack>
+
+      <Stack gap="xs">
+        <Text size="sm" fw={600} px="md">Match History ({totalMatches} match{totalMatches !== 1 ? 'es' : ''})</Text>
+        <MatchList matches={matches} hideH2H />
+      </Stack>
+    </Stack>
+  );
+};
+
+const TeamHeadToHeadSheet = (props: TeamHeadToHeadSheetProps) => {
+  return (
+    <Suspense fallback={<TeamHeadToHeadSkeleton />}>
+      <TeamHeadToHeadContent {...props} />
+    </Suspense>
+  );
+};
+
+export default TeamHeadToHeadSheet;

src/features/matches/components/team-head-to-head-skeleton.tsx

@@ -0,0 +1,72 @@
+import { Stack, Skeleton, Group, Paper, Divider } from "@mantine/core";
+
+const TeamHeadToHeadSkeleton = () => {
+  return (
+    <Stack gap="md">
+      <Paper p="md" withBorder radius="md">
+        <Stack gap="sm">
+          <Group justify="center" gap="xs">
+            <Skeleton height={28} width={140} />
+            <Skeleton height={20} width={20} />
+            <Skeleton height={28} width={140} />
+          </Group>
+
+          <Group justify="center" gap="lg">
+            <Stack gap={0} align="center">
+              <Skeleton height={32} width={40} />
+              <Skeleton height={16} width={100} mt={4} />
+            </Stack>
+            <Skeleton height={24} width={10} />
+            <Stack gap={0} align="center">
+              <Skeleton height={32} width={40} />
+              <Skeleton height={16} width={100} mt={4} />
+            </Stack>
+          </Group>
+
+          <Group justify="center">
+            <Skeleton height={16} width={150} />
+          </Group>
+        </Stack>
+      </Paper>
+
+      <Stack gap={0}>
+        <Skeleton height={18} width={130} ml="md" mb="xs" />
+
+        <Paper withBorder>
+          <Stack gap={0}>
+            <Group justify="space-between" px="md" py="sm">
+              <Skeleton height={20} width={60} />
+              <Skeleton height={16} width={80} />
+              <Skeleton height={20} width={60} />
+            </Group>
+            <Divider />
+
+            <Group justify="space-between" px="md" py="sm">
+              <Skeleton height={20} width={60} />
+              <Skeleton height={16} width={100} />
+              <Skeleton height={20} width={60} />
+            </Group>
+            <Divider />
+
+            <Group justify="space-between" px="md" py="sm">
+              <Skeleton height={20} width={60} />
+              <Skeleton height={16} width={110} />
+              <Skeleton height={20} width={60} />
+            </Group>
+          </Stack>
+        </Paper>
+      </Stack>
+
+      <Stack gap="xs">
+        <Skeleton height={18} width={150} ml="md" />
+        <Stack gap="sm" p="md">
+          <Skeleton height={100} />
+          <Skeleton height={100} />
+          <Skeleton height={100} />
+        </Stack>
+      </Stack>
+    </Stack>
+  );
+};
+
+export default TeamHeadToHeadSkeleton;

src/features/matches/queries.ts

@@ -0,0 +1,30 @@
+import { useServerSuspenseQuery } from "@/lib/tanstack-query/hooks";
+import { getMatchesBetweenTeams, getMatchesBetweenPlayers } from "./server";
+
+export const matchKeys = {
+  headToHeadTeams: (team1Id: string, team2Id: string) => ['matches', 'headToHead', 'teams', team1Id, team2Id] as const,
+  headToHeadPlayers: (player1Id: string, player2Id: string) => ['matches', 'headToHead', 'players', player1Id, player2Id] as const,
+};
+
+export const matchQueries = {
+  headToHeadTeams: (team1Id: string, team2Id: string) => ({
+    queryKey: matchKeys.headToHeadTeams(team1Id, team2Id),
+    queryFn: () => getMatchesBetweenTeams({ data: { team1Id, team2Id } }),
+  }),
+  headToHeadPlayers: (player1Id: string, player2Id: string) => ({
+    queryKey: matchKeys.headToHeadPlayers(player1Id, player2Id),
+    queryFn: () => getMatchesBetweenPlayers({ data: { player1Id, player2Id } }),
+  }),
+};
+
+export const useTeamHeadToHead = (team1Id: string, team2Id: string, enabled = true) =>
+  useServerSuspenseQuery({
+    ...matchQueries.headToHeadTeams(team1Id, team2Id),
+    enabled,
+  });
+
+export const usePlayerHeadToHead = (player1Id: string, player2Id: string, enabled = true) =>
+  useServerSuspenseQuery({
+    ...matchQueries.headToHeadPlayers(player1Id, player2Id),
+    enabled,
+  });

src/features/matches/server.ts

@@ -347,3 +347,35 @@ export const getMatchReactions = createServerFn()
       return reactions as Reaction[]
     })
   );
+
+const matchesBetweenPlayersSchema = z.object({
+  player1Id: z.string(),
+  player2Id: z.string(),
+});
+
+export const getMatchesBetweenPlayers = createServerFn()
+  .inputValidator(matchesBetweenPlayersSchema)
+  .middleware([superTokensFunctionMiddleware])
+  .handler(async ({ data: { player1Id, player2Id } }) =>
+    toServerResult(async () => {
+      logger.info("Getting matches between players", { player1Id, player2Id });
+      const matches = await pbAdmin.getMatchesBetweenPlayers(player1Id, player2Id);
+      return matches;
+    })
+  );
+
+const matchesBetweenTeamsSchema = z.object({
+  team1Id: z.string(),
+  team2Id: z.string(),
+});
+
+export const getMatchesBetweenTeams = createServerFn()
+  .inputValidator(matchesBetweenTeamsSchema)
+  .middleware([superTokensFunctionMiddleware])
+  .handler(async ({ data: { team1Id, team2Id } }) =>
+    toServerResult(async () => {
+      logger.info("Getting matches between teams", { team1Id, team2Id });
+      const matches = await pbAdmin.getMatchesBetweenTeams(team1Id, team2Id);
+      return matches;
+    })
+  );

src/features/players/components/league-head-to-head.tsx

@@ -0,0 +1,276 @@
+import { Stack, Text, TextInput, Box, Paper, Group, Divider, Center, ActionIcon, Badge } from "@mantine/core";
+import { useState, useMemo } from "react";
+import { MagnifyingGlassIcon, XIcon, ArrowRightIcon } from "@phosphor-icons/react";
+import { useAllPlayerStats } from "../queries";
+import { useSheet } from "@/hooks/use-sheet";
+import Sheet from "@/components/sheet/sheet";
+import PlayerHeadToHeadSheet from "./player-head-to-head-sheet";
+import Avatar from "@/components/avatar";
+
+const LeagueHeadToHead = () => {
+  const [player1Id, setPlayer1Id] = useState<string | null>(null);
+  const [player2Id, setPlayer2Id] = useState<string | null>(null);
+  const [search, setSearch] = useState("");
+  const { data: allPlayerStats } = useAllPlayerStats();
+  const h2hSheet = useSheet();
+
+  const player1Name = useMemo(() => {
+    if (!player1Id || !allPlayerStats) return "";
+    return allPlayerStats.find((p) => p.player_id === player1Id)?.player_name || "";
+  }, [player1Id, allPlayerStats]);
+
+  const player2Name = useMemo(() => {
+    if (!player2Id || !allPlayerStats) return "";
+    return allPlayerStats.find((p) => p.player_id === player2Id)?.player_name || "";
+  }, [player2Id, allPlayerStats]);
+
+  const filteredPlayers = useMemo(() => {
+    if (!allPlayerStats) return [];
+
+    return allPlayerStats
+      .filter((stat) => {
+        if (player1Id && stat.player_id === player1Id) return false;
+        if (player2Id && stat.player_id === player2Id) return false;
+        return true;
+      })
+      .filter((stat) =>
+        stat.player_name.toLowerCase().includes(search.toLowerCase())
+      )
+      .sort((a, b) => b.matches - a.matches);
+  }, [allPlayerStats, player1Id, player2Id, search]);
+
+  const handlePlayerClick = (playerId: string) => {
+    if (!player1Id) {
+      setPlayer1Id(playerId);
+    } else if (!player2Id) {
+      setPlayer2Id(playerId);
+      h2hSheet.open();
+    }
+  };
+
+  const handleClearPlayer1 = () => {
+    setPlayer1Id(null);
+    if (player2Id) {
+      setPlayer1Id(player2Id);
+      setPlayer2Id(null);
+    }
+  };
+
+  const handleClearPlayer2 = () => {
+    setPlayer2Id(null);
+  };
+
+  const activeStep = !player1Id ? 1 : !player2Id ? 2 : 0;
+
+  return (
+    <>
+      <Stack gap="md">
+        <Paper px="md" pt="md" pb="sm" withBorder shadow="sm">
+          <Stack gap="xs">
+            <Group gap="xs" wrap="nowrap">
+              <Paper
+                p="sm"
+                withBorder
+                style={{
+                  flex: 1,
+                  minHeight: 70,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  position: "relative",
+                  borderWidth: 2,
+                  borderColor: activeStep === 1 ? "var(--mantine-primary-color-filled)" : undefined,
+                  backgroundColor: player1Id && activeStep !== 1 ? "var(--mantine-color-default-hover)" : undefined,
+                  cursor: player1Id && activeStep === 0 ? "pointer" : undefined,
+                  transition: "all 150ms ease",
+                }}
+                onClick={player1Id && activeStep === 0 ? handleClearPlayer1 : undefined}
+              >
+                {player1Id ? (
+                  <>
+                    <Stack gap={4} align="center" style={{ flex: 1 }}>
+                      <Avatar name={player1Name} size={36} />
+                      <Text size="xs" fw={600} ta="center" lineClamp={1}>
+                        {player1Name}
+                      </Text>
+                    </Stack>
+                    <ActionIcon
+                      variant="light"
+                      color="gray"
+                      size="xs"
+                      radius="xl"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        handleClearPlayer1();
+                      }}
+                      style={{ position: "absolute", top: 4, right: 4 }}
+                    >
+                      <XIcon size={10} />
+                    </ActionIcon>
+                  </>
+                ) : (
+                  <Stack gap={4} align="center">
+                    <Avatar size={36} />
+                    <Text size="xs" c="dimmed" fw={500}>
+                      Player 1
+                    </Text>
+                  </Stack>
+                )}
+              </Paper>
+
+              <Center>
+                <Text size="xl" fw={700} c="dimmed">
+                  VS
+                </Text>
+              </Center>
+
+              <Paper
+                p="sm"
+                withBorder
+                style={{
+                  flex: 1,
+                  minHeight: 70,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  position: "relative",
+                  borderWidth: 2,
+                  borderColor: activeStep === 2 ? "var(--mantine-primary-color-filled)" : undefined,
+                  backgroundColor: player2Id && activeStep !== 2 ? "var(--mantine-color-default-hover)" : undefined,
+                  cursor: player2Id && activeStep === 0 ? "pointer" : undefined,
+                  transition: "all 150ms ease",
+                }}
+                onClick={player2Id && activeStep === 0 ? handleClearPlayer2 : undefined}
+              >
+                {player2Id ? (
+                  <>
+                    <Stack gap={4} align="center" style={{ flex: 1 }}>
+                      <Avatar name={player2Name} size={36} />
+                      <Text size="xs" fw={600} ta="center" lineClamp={1}>
+                        {player2Name}
+                      </Text>
+                    </Stack>
+                    <ActionIcon
+                      variant="light"
+                      color="gray"
+                      size="xs"
+                      radius="xl"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        handleClearPlayer2();
+                      }}
+                      style={{ position: "absolute", top: 4, right: 4 }}
+                    >
+                      <XIcon size={10} />
+                    </ActionIcon>
+                  </>
+                ) : (
+                  <Stack gap={4} align="center">
+                    <Avatar size={36} />
+                    <Text size="xs" c="dimmed" fw={500}>
+                      Player 2
+                    </Text>
+                  </Stack>
+                )}
+              </Paper>
+            </Group>
+
+            {activeStep > 0 ? (
+              <Badge
+                variant="light"
+                size="sm"
+                radius="sm"
+                fullWidth
+                styles={{ label: { textTransform: "none" } }}
+              >
+                {activeStep === 1 && "Select first player"}
+                {activeStep === 2 && "Select second player"}
+              </Badge>
+            ) : (
+              <Group justify="center">
+                <Text
+                  size="xs"
+                  c="dimmed"
+                  style={{ cursor: "pointer" }}
+                  onClick={() => {
+                    setPlayer1Id(null);
+                    setPlayer2Id(null);
+                  }}
+                  td="underline"
+                >
+                  Clear both players
+                </Text>
+              </Group>
+            )}
+          </Stack>
+        </Paper>
+
+        <TextInput
+          placeholder="Search players"
+          value={search}
+          onChange={(e) => setSearch(e.currentTarget.value)}
+          leftSection={<MagnifyingGlassIcon size={16} />}
+          size="md"
+          px="md"
+        />
+
+        <Box px="md" pb="md">
+          <Paper withBorder>
+            {filteredPlayers.length === 0 && (
+              <Text size="sm" c="dimmed" ta="center" py="xl">
+                {search ? `No players found matching "${search}"` : "No players available"}
+              </Text>
+            )}
+
+            {filteredPlayers.map((player, index) => (
+              <Box key={player.player_id}>
+                <Group
+                  p="md"
+                  gap="sm"
+                  wrap="nowrap"
+                  style={{
+                    cursor: "pointer",
+                    transition: "background-color 150ms ease",
+                  }}
+                  onClick={() => handlePlayerClick(player.player_id)}
+                  styles={{
+                    root: {
+                      "&:hover": {
+                        backgroundColor: "var(--mantine-color-default-hover)",
+                      },
+                    },
+                  }}
+                >
+                  <Avatar name={player.player_name} size={44} />
+                  <Box style={{ flex: 1, minWidth: 0 }}>
+                    <Text size="sm" fw={600} truncate>
+                      {player.player_name}
+                    </Text>
+                  </Box>
+                  <ActionIcon variant="subtle" color="gray" size="lg" radius="xl">
+                    <ArrowRightIcon size={18} />
+                  </ActionIcon>
+                </Group>
+                {index < filteredPlayers.length - 1 && <Divider />}
+              </Box>
+            ))}
+          </Paper>
+        </Box>
+      </Stack>
+
+      {player1Id && player2Id && (
+        <Sheet title="Head to Head" {...h2hSheet.props}>
+          <PlayerHeadToHeadSheet
+            player1Id={player1Id}
+            player1Name={player1Name}
+            player2Id={player2Id}
+            player2Name={player2Name}
+            isOpen={h2hSheet.props.opened}
+          />
+        </Sheet>
+      )}
+    </>
+  );
+};
+
+export default LeagueHeadToHead;

src/features/players/components/player-head-to-head-sheet.tsx

@@ -0,0 +1,279 @@
+import { Stack, Text, Group, Box, Divider, Paper } from "@mantine/core";
+import { usePlayerHeadToHead } from "@/features/matches/queries";
+import { useMemo, useEffect, useState, Suspense } from "react";
+import { CrownIcon } from "@phosphor-icons/react";
+import MatchList from "@/features/matches/components/match-list";
+import PlayerHeadToHeadSkeleton from "./player-head-to-head-skeleton";
+
+interface PlayerHeadToHeadSheetProps {
+  player1Id: string;
+  player1Name: string;
+  player2Id: string;
+  player2Name: string;
+  isOpen?: boolean;
+}
+
+const PlayerHeadToHeadContent = ({
+  player1Id,
+  player1Name,
+  player2Id,
+  player2Name,
+  isOpen = true,
+}: PlayerHeadToHeadSheetProps) => {
+  const [shouldFetch, setShouldFetch] = useState(false);
+
+  useEffect(() => {
+    if (isOpen && !shouldFetch) {
+      setShouldFetch(true);
+    }
+  }, [isOpen, shouldFetch]);
+
+  const { data: matches, isLoading } = usePlayerHeadToHead(player1Id, player2Id, shouldFetch);
+
+  const stats = useMemo(() => {
+    if (!matches || matches.length === 0) {
+      return {
+        player1Wins: 0,
+        player2Wins: 0,
+        player1CupsFor: 0,
+        player2CupsFor: 0,
+        player1CupsAgainst: 0,
+        player2CupsAgainst: 0,
+        player1AvgMargin: 0,
+        player2AvgMargin: 0,
+      };
+    }
+
+    let player1Wins = 0;
+    let player2Wins = 0;
+    let player1CupsFor = 0;
+    let player2CupsFor = 0;
+    let player1CupsAgainst = 0;
+    let player2CupsAgainst = 0;
+    let player1TotalWinMargin = 0;
+    let player2TotalWinMargin = 0;
+
+    matches.forEach((match) => {
+      const isPlayer1Home = match.home?.players?.some((p) => p.id === player1Id);
+      const player1Cups = isPlayer1Home ? match.home_cups : match.away_cups;
+      const player2Cups = isPlayer1Home ? match.away_cups : match.home_cups;
+
+      if (player1Cups > player2Cups) {
+        player1Wins++;
+        player1TotalWinMargin += (player1Cups - player2Cups);
+      } else if (player2Cups > player1Cups) {
+        player2Wins++;
+        player2TotalWinMargin += (player2Cups - player1Cups);
+      }
+
+      player1CupsFor += player1Cups;
+      player2CupsFor += player2Cups;
+      player1CupsAgainst += player2Cups;
+      player2CupsAgainst += player1Cups;
+    });
+
+    const player1AvgMargin =
+      player1Wins > 0 ? player1TotalWinMargin / player1Wins : 0;
+    const player2AvgMargin =
+      player2Wins > 0 ? player2TotalWinMargin / player2Wins : 0;
+
+    return {
+      player1Wins,
+      player2Wins,
+      player1CupsFor,
+      player2CupsFor,
+      player1CupsAgainst,
+      player2CupsAgainst,
+      player1AvgMargin,
+      player2AvgMargin,
+    };
+  }, [matches, player1Id]);
+
+  if (isLoading) {
+    return (
+      <Stack p="md" gap="md">
+        <Text size="sm" c="dimmed" ta="center">
+          Loading...
+        </Text>
+      </Stack>
+    );
+  }
+
+  if (!matches || matches.length === 0) {
+    return (
+      <Stack p="md" gap="md">
+        <Text size="sm" c="dimmed" ta="center">
+          These players have not faced each other yet.
+        </Text>
+      </Stack>
+    );
+  }
+
+  const totalMatches = stats.player1Wins + stats.player2Wins;
+  const leader =
+    stats.player1Wins > stats.player2Wins
+      ? player1Name
+      : stats.player2Wins > stats.player1Wins
+      ? player2Name
+      : null;
+
+  return (
+    <Stack gap="md">
+      <Paper p="md" withBorder radius="md">
+        <Stack gap="sm">
+          <Group justify="center" gap="xs">
+            <Text size="lg" fw={700}>
+              {player1Name}
+            </Text>
+            <Text size="sm" c="dimmed">
+              vs
+            </Text>
+            <Text size="lg" fw={700}>
+              {player2Name}
+            </Text>
+          </Group>
+
+          <Group justify="center" gap="lg">
+            <Stack gap={0} align="center">
+              <Text size="xl" fw={700}>
+                {stats.player1Wins}
+              </Text>
+              <Text size="xs" c="dimmed">
+                {player1Name}
+              </Text>
+            </Stack>
+            <Text size="md" c="dimmed">
+              -
+            </Text>
+            <Stack gap={0} align="center">
+              <Text size="xl" fw={700}>
+                {stats.player2Wins}
+              </Text>
+              <Text size="xs" c="dimmed">
+                {player2Name}
+              </Text>
+            </Stack>
+          </Group>
+
+          {leader && (
+            <Group justify="center" gap="xs">
+              <CrownIcon size={16} weight="fill" color="gold" />
+              <Text size="xs" c="dimmed">
+                {leader} leads the series
+              </Text>
+            </Group>
+          )}
+
+          {!leader && totalMatches > 0 && (
+            <Text size="xs" c="dimmed" ta="center">
+              Series is tied
+            </Text>
+          )}
+        </Stack>
+      </Paper>
+
+      <Stack gap={0}>
+        <Text size="sm" fw={600} px="md" mb="xs">
+          Stats Comparison
+        </Text>
+
+        <Paper withBorder>
+          <Stack gap={0}>
+            <Group justify="space-between" px="md" py="sm">
+              <Group gap="xs">
+                <Text size="sm" fw={600}>
+                  {stats.player1CupsFor}
+                </Text>
+                <Text size="xs" c="dimmed">
+                  cups
+                </Text>
+              </Group>
+              <Text size="xs" fw={500}>
+                Total Cups
+              </Text>
+              <Group gap="xs">
+                <Text size="xs" c="dimmed">
+                  cups
+                </Text>
+                <Text size="sm" fw={600}>
+                  {stats.player2CupsFor}
+                </Text>
+              </Group>
+            </Group>
+            <Divider />
+
+            <Group justify="space-between" px="md" py="sm">
+              <Group gap="xs">
+                <Text size="sm" fw={600}>
+                  {totalMatches > 0
+                    ? (stats.player1CupsFor / totalMatches).toFixed(1)
+                    : "0.0"}
+                </Text>
+                <Text size="xs" c="dimmed">
+                  avg
+                </Text>
+              </Group>
+              <Text size="xs" fw={500}>
+                Avg Cups/Match
+              </Text>
+              <Group gap="xs">
+                <Text size="xs" c="dimmed">
+                  avg
+                </Text>
+                <Text size="sm" fw={600}>
+                  {totalMatches > 0
+                    ? (stats.player2CupsFor / totalMatches).toFixed(1)
+                    : "0.0"}
+                </Text>
+              </Group>
+            </Group>
+            <Divider />
+
+            <Group justify="space-between" px="md" py="sm">
+              <Group gap="xs">
+                <Text size="sm" fw={600}>
+                  {!isNaN(stats.player1AvgMargin)
+                    ? stats.player1AvgMargin.toFixed(1)
+                    : "0.0"}
+                </Text>
+                <Text size="xs" c="dimmed">
+                  margin
+                </Text>
+              </Group>
+              <Text size="xs" fw={500}>
+                Avg Win Margin
+              </Text>
+              <Group gap="xs">
+                <Text size="xs" c="dimmed">
+                  margin
+                </Text>
+                <Text size="sm" fw={600}>
+                  {!isNaN(stats.player2AvgMargin)
+                    ? stats.player2AvgMargin.toFixed(1)
+                    : "0.0"}
+                </Text>
+              </Group>
+            </Group>
+          </Stack>
+        </Paper>
+      </Stack>
+
+      <Stack gap="xs">
+        <Text size="sm" fw={600} px="md">
+          Match History ({totalMatches})
+        </Text>
+        <MatchList matches={matches} hideH2H />
+      </Stack>
+    </Stack>
+  );
+};
+
+const PlayerHeadToHeadSheet = (props: PlayerHeadToHeadSheetProps) => {
+  return (
+    <Suspense fallback={<PlayerHeadToHeadSkeleton />}>
+      <PlayerHeadToHeadContent {...props} />
+    </Suspense>
+  );
+};
+
+export default PlayerHeadToHeadSheet;

src/features/players/components/player-head-to-head-skeleton.tsx

@@ -0,0 +1,72 @@
+import { Stack, Skeleton, Group, Paper, Divider } from "@mantine/core";
+
+const PlayerHeadToHeadSkeleton = () => {
+  return (
+    <Stack gap="md">
+      <Paper p="md" withBorder radius="md">
+        <Stack gap="sm">
+          <Group justify="center" gap="xs">
+            <Skeleton height={28} width={120} />
+            <Skeleton height={20} width={20} />
+            <Skeleton height={28} width={120} />
+          </Group>
+
+          <Group justify="center" gap="lg">
+            <Stack gap={0} align="center">
+              <Skeleton height={32} width={40} />
+              <Skeleton height={16} width={80} mt={4} />
+            </Stack>
+            <Skeleton height={24} width={10} />
+            <Stack gap={0} align="center">
+              <Skeleton height={32} width={40} />
+              <Skeleton height={16} width={80} mt={4} />
+            </Stack>
+          </Group>
+
+          <Group justify="center">
+            <Skeleton height={16} width={150} />
+          </Group>
+        </Stack>
+      </Paper>
+
+      <Stack gap={0}>
+        <Skeleton height={18} width={130} ml="md" mb="xs" />
+
+        <Paper withBorder>
+          <Stack gap={0}>
+            <Group justify="space-between" px="md" py="sm">
+              <Skeleton height={20} width={60} />
+              <Skeleton height={16} width={80} />
+              <Skeleton height={20} width={60} />
+            </Group>
+            <Divider />
+
+            <Group justify="space-between" px="md" py="sm">
+              <Skeleton height={20} width={60} />
+              <Skeleton height={16} width={100} />
+              <Skeleton height={20} width={60} />
+            </Group>
+            <Divider />
+
+            <Group justify="space-between" px="md" py="sm">
+              <Skeleton height={20} width={60} />
+              <Skeleton height={16} width={110} />
+              <Skeleton height={20} width={60} />
+            </Group>
+          </Stack>
+        </Paper>
+      </Stack>
+
+      <Stack gap="xs">
+        <Skeleton height={18} width={130} ml="md" />
+        <Stack gap="sm" p="md">
+          <Skeleton height={100} />
+          <Skeleton height={100} />
+          <Skeleton height={100} />
+        </Stack>
+      </Stack>
+    </Stack>
+  );
+};
+
+export default PlayerHeadToHeadSkeleton;

src/features/players/components/player-stats-table-skeleton.tsx

@@ -5,68 +5,86 @@ import {
   Container,
   Divider,
   Skeleton,
+  ScrollArea,
 } from "@mantine/core";
 
 const PlayerListItemSkeleton = () => {
   return (
     <Box p="md">
-      <Group justify="space-between" align="center" w="100%">
+      <Group gap="sm" align="center" w="100%" wrap="nowrap" style={{ overflow: 'hidden' }}>
-        <Group gap="sm" align="center">
+        <Skeleton height={40} width={40} circle style={{ flexShrink: 0 }} />
-          <Skeleton height={45} circle />
+        <Stack gap={2} style={{ flexGrow: 1, overflow: 'hidden', minWidth: 0 }}>
-          <Stack gap={2}>
+          <Group gap='xs'>
-            <Group gap='xs'>
+            <Skeleton height={16} width={120} />
-              <Skeleton height={16} width={120} />
+            <Skeleton height={12} width={30} />
-              <Skeleton height={12} width={60} />
+            <Skeleton height={12} width={30} />
-              <Skeleton height={12} width={80} />
+          </Group>
-            </Group>
+
-            <Group gap="md" ta="center">
+          <ScrollArea type="never">
-              <Stack gap={0}>
+            <Group gap='xs' wrap="nowrap">
+              <Stack gap={0} style={{ flexShrink: 0 }}>
                 <Skeleton height={10} width={25} />
                 <Skeleton height={10} width={30} />
               </Stack>
-              <Stack gap={0}>
+              <Stack gap={0} style={{ flexShrink: 0 }}>
                 <Skeleton height={10} width={10} />
                 <Skeleton height={10} width={15} />
               </Stack>
-              <Stack gap={0}>
+              <Stack gap={0} style={{ flexShrink: 0 }}>
                 <Skeleton height={10} width={10} />
                 <Skeleton height={10} width={15} />
               </Stack>
-              <Stack gap={0}>
+              <Stack gap={0} style={{ flexShrink: 0 }}>
                 <Skeleton height={10} width={20} />
                 <Skeleton height={10} width={25} />
               </Stack>
-              <Stack gap={0}>
+              <Stack gap={0} style={{ flexShrink: 0 }}>
                 <Skeleton height={10} width={25} />
                 <Skeleton height={10} width={20} />
               </Stack>
-              <Stack gap={0}>
+              <Stack gap={0} style={{ flexShrink: 0 }}>
+                <Skeleton height={10} width={25} />
+                <Skeleton height={10} width={20} />
+              </Stack>
+              <Stack gap={0} style={{ flexShrink: 0 }}>
+                <Skeleton height={10} width={30} />
+                <Skeleton height={10} width={25} />
+              </Stack>
+              <Stack gap={0} style={{ flexShrink: 0 }}>
+                <Skeleton height={10} width={30} />
+                <Skeleton height={10} width={25} />
+              </Stack>
+              <Stack gap={0} style={{ flexShrink: 0 }}>
                 <Skeleton height={10} width={15} />
                 <Skeleton height={10} width={25} />
               </Stack>
-              <Stack gap={0}>
+              <Stack gap={0} style={{ flexShrink: 0 }}>
                 <Skeleton height={10} width={15} />
                 <Skeleton height={10} width={25} />
               </Stack>
             </Group>
-          </Stack>
+          </ScrollArea>
-        </Group>
+        </Stack>
       </Group>
     </Box>
   );
 };
 
-const PlayerStatsTableSkeleton = () => {
+interface PlayerStatsTableSkeletonProps {
+  hideFilters?: boolean;
+}
+
+const PlayerStatsTableSkeleton = ({ hideFilters = false }: PlayerStatsTableSkeletonProps) => {
   return (
     <Container size="100%" px={0}>
       <Stack gap="xs">
-        <Box px="md" pb="xs">
+        <Skeleton mx="md" height={12} width={100} />
+        <Box px="md" pb={4}>
           <Skeleton height={40} />
         </Box>
 
-        <Group px="md" justify="space-between" align="center">
+        <Group justify="space-between" align="center" w='100%'>
-          <Skeleton height={12} width={100} />
+          <Group ml="auto" gap="xs">
-          <Group gap="xs">
             <Skeleton height={12} width={200} />
           </Group>
         </Group>

src/features/players/components/player-stats-table.tsx

@@ -1,4 +1,4 @@
-import { useState, useMemo, useCallback, memo } from "react";
+import { useState, useMemo, useCallback, memo, useRef, useEffect } from "react";
 import {
   Text,
   TextInput,
@@ -12,6 +12,7 @@ import {
   UnstyledButton,
   Popover,
   ActionIcon,
+  ScrollArea,
 } from "@mantine/core";
 import {
   MagnifyingGlassIcon,
@@ -37,9 +38,41 @@ interface PlayerListItemProps {
   stat: PlayerStats;
   onPlayerClick: (playerId: string) => void;
   mmr: number;
+  onRegisterViewport: (viewport: HTMLDivElement) => void;
+  onUnregisterViewport: (viewport: HTMLDivElement) => void;
 }
 
-const PlayerListItem = memo(({ stat, onPlayerClick, mmr }: PlayerListItemProps) => {
+interface StatCellProps {
+  label: string;
+  value: string | number;
+}
+
+const StatCell = memo(({ label, value }: StatCellProps) => (
+  <Stack justify="center" gap={0} style={{ textAlign: 'center', flexShrink: 0 }}>
+    <Text size="xs" c="dimmed" fw={700}>
+      {label}
+    </Text>
+    <Text size="xs" c="dimmed">
+      {value}
+    </Text>
+  </Stack>
+));
+
+const PlayerListItem = memo(({ stat, onPlayerClick, mmr, onRegisterViewport, onUnregisterViewport }: PlayerListItemProps) => {
+  const viewportRef = useRef<HTMLDivElement>(null);
+
+  const avg_cups_against = useMemo(() => stat.total_cups_against / stat.matches || 0, [stat.total_cups_against, stat.matches]);
+
+  useEffect(() => {
+    if (viewportRef.current) {
+      onRegisterViewport(viewportRef.current);
+      return () => {
+        if (viewportRef.current) {
+          onUnregisterViewport(viewportRef.current);
+        }
+      };
+    }
+  }, [onRegisterViewport, onUnregisterViewport]);
 
   return (
     <>
@@ -59,90 +92,62 @@ const PlayerListItem = memo(({ stat, onPlayerClick, mmr }: PlayerListItemProps)
           },
         }}
       >
-        <Group justify="space-between" align="center" w="100%">
+        <Group p={0} gap="sm" align="center" w="100%" wrap="nowrap" style={{ overflow: 'hidden' }}>
-          <Group gap="sm" align="center">
+          <Avatar name={stat.player_name} size={40} style={{ flexShrink: 0 }} />
-            <Avatar name={stat.player_name} size={40} />
+          <Stack gap={2} style={{ flexGrow: 1, overflow: 'hidden', minWidth: 0 }}>
-            <Stack gap={2}>
+            <Group gap='xs'>
-              <Group gap='xs'>
+              <Text size="sm" fw={600}>
-                <Text size="sm" fw={600}>
+                {stat.player_name}
-                  {stat.player_name}
+              </Text>
-                </Text>
+              <Text size="xs" c="dimmed" ta="right">
-                <Text size="xs" c="dimmed" ta="right">
+                {stat.matches}
-                  {stat.matches} matches
+                <Text span fw={800}>M</Text>
-                </Text>
+              </Text>
-                <Text size="xs" c="dimmed" ta="right">
+              <Text size="xs" c="dimmed" ta="right">
-                  {stat.tournaments} tournaments
+                {stat.tournaments}
-                </Text>
+                <Text span fw={800}>T</Text>
-              </Group>
+              </Text>
-              <Group gap="md" ta="center">
+            </Group>
-                <Stack gap={0}>
-                  <Text size="xs" c="dimmed" fw={700}>
-                    MMR
-                  </Text>
-                  <Text size="xs" c="dimmed">
-                    {mmr.toFixed(1)}
-                  </Text>
-                </Stack>
-                <Stack gap={0}>
-                  <Text size="xs" c="dimmed" fw={700}>
-                    W
-                  </Text>
-                  <Text size="xs" c="dimmed">
-                    {stat.wins}
-                  </Text>
-                </Stack>
-                <Stack gap={0}>
-                  <Text size="xs" c="dimmed" fw={700}>
-                    L
-                  </Text>
-                  <Text size="xs" c="dimmed">
-                    {stat.losses}
-                  </Text>
-                </Stack>
-                <Stack gap={0}>
-                  <Text size="xs" c="dimmed" fw={700}>
-                    W%
-                  </Text>
-                  <Text size="xs" c="dimmed">
-                    {stat.win_percentage.toFixed(1)}%
-                  </Text>
-                </Stack>
-                <Stack gap={0}>
-                  <Text size="xs" c="dimmed" fw={700}>
-                    AVG
-                  </Text>
-                  <Text size="xs" c="dimmed">
-                    {stat.avg_cups_per_match.toFixed(1)}
-                  </Text>
-                </Stack>
-                <Stack gap={0}>
-                  <Text size="xs" c="dimmed" fw={700}>
-                    CF
-                  </Text>
-                  <Text size="xs" c="dimmed">
-                    {stat.total_cups_made}
-                  </Text>
-                </Stack>
-                <Stack gap={0}>
-                  <Text size="xs" c="dimmed" fw={700}>
-                    CA
-                  </Text>
-                  <Text size="xs" c="dimmed">
-                    {stat.total_cups_against}
-                  </Text>
-                </Stack>
-              </Group>
-            </Stack>
-          </Group>
 
+            <ScrollArea
+              viewportRef={viewportRef}
+              type="never"
+              styles={{
+                viewport: {
+                  WebkitOverflowScrolling: 'touch',
+                  scrollBehavior: 'auto',
+                  willChange: 'scroll-position',
+                  transform: 'translateZ(0)',
+                  backfaceVisibility: 'hidden',
+                },
+              }}
+            >
+              <Group gap='xs' wrap="nowrap">
+                <StatCell label="MMR" value={mmr.toFixed(1)} />
+                <StatCell label="W" value={stat.wins} />
+                <StatCell label="L" value={stat.losses} />
+                <StatCell label="W%" value={`${stat.win_percentage.toFixed(1)}%`} />
+                <StatCell label="AWM" value={stat.margin_of_victory?.toFixed(1) || 0} />
+                <StatCell label="ALM" value={stat.margin_of_loss?.toFixed(1) || 0} />
+                <StatCell label="AC" value={stat.avg_cups_per_match.toFixed(1)} />
+                <StatCell label="ACA" value={avg_cups_against?.toFixed(1) || 0} />
+                <StatCell label="CF" value={stat.total_cups_made} />
+                <StatCell label="CA" value={stat.total_cups_against} />
+              </Group>
+            </ScrollArea>
+          </Stack>
         </Group>
       </UnstyledButton>
     </>
   );
 });
 
-const PlayerStatsTable = () => {
+interface PlayerStatsTableProps {
-  const { data: playerStats } = useAllPlayerStats();
+  viewType?: 'all' | 'mainline' | 'regional';
+}
+
+const PlayerStatsTable = ({ viewType = 'all' }: PlayerStatsTableProps) => {
+  const { data: playerStats } = useAllPlayerStats(viewType);
   const navigate = useNavigate();
   const [search, setSearch] = useState("");
   const [sortConfig, setSortConfig] = useState<SortConfig>({
@@ -150,6 +155,64 @@ const PlayerStatsTable = () => {
     direction: "desc",
   });
 
+  const viewportsRef = useRef<Set<HTMLDivElement>>(new Set());
+  const scrollHandlersRef = useRef<Map<HTMLDivElement, (e: Event) => void>>(new Map());
+  const scrollLeaderRef = useRef<HTMLDivElement | null>(null);
+  const scrollTimeoutRef = useRef<number | null>(null);
+
+  const handleRegisterViewport = useCallback((viewport: HTMLDivElement) => {
+    viewportsRef.current.add(viewport);
+
+    const handleScrollStart = () => {
+      scrollLeaderRef.current = viewport;
+    };
+
+    const handleScroll = (e: Event) => {
+      const target = e.target as HTMLDivElement;
+
+      if (!scrollLeaderRef.current) {
+        scrollLeaderRef.current = target;
+      }
+
+      if (scrollLeaderRef.current !== target) {
+        return;
+      }
+
+      const scrollLeft = target.scrollLeft;
+
+      viewportsRef.current.forEach((vp) => {
+        if (vp !== target && Math.abs(vp.scrollLeft - scrollLeft) > 0.5) {
+          vp.scrollLeft = scrollLeft;
+        }
+      });
+
+      if (scrollTimeoutRef.current) {
+        clearTimeout(scrollTimeoutRef.current);
+      }
+      scrollTimeoutRef.current = window.setTimeout(() => {
+        scrollLeaderRef.current = null;
+      }, 150);
+    };
+
+    viewport.addEventListener('touchstart', handleScrollStart, { passive: true });
+    viewport.addEventListener('mousedown', handleScrollStart, { passive: true });
+    viewport.addEventListener('scroll', handleScroll, { passive: true });
+
+    scrollHandlersRef.current.set(viewport, handleScroll);
+  }, []);
+
+  const handleUnregisterViewport = useCallback((viewport: HTMLDivElement) => {
+    viewportsRef.current.delete(viewport);
+
+    const handler = scrollHandlersRef.current.get(viewport);
+    if (handler) {
+      viewport.removeEventListener('scroll', handler);
+      viewport.removeEventListener('touchstart', handler);
+      viewport.removeEventListener('mousedown', handler);
+      scrollHandlersRef.current.delete(viewport);
+    }
+  }, []);
+
   const calculateMMR = (stat: PlayerStats): number => {
     if (stat.matches === 0) return 0;
 
@@ -233,22 +296,23 @@ const PlayerStatsTable = () => {
 
   if (playerStats.length === 0) {
     return (
-      <Container px={0} size="md">
+      <Stack align="center" gap="md" py="xl">
-        <Stack align="center" gap="md" py="xl">
+        <ThemeIcon size="xl" variant="light" radius="md">
-          <ThemeIcon size="xl" variant="light" radius="md">
+          <ChartBarIcon size={32} />
-            <ChartBarIcon size={32} />
+        </ThemeIcon>
-          </ThemeIcon>
+        <Title order={3} c="dimmed">
-          <Title order={3} c="dimmed">
+          No Stats Available
-            No Stats Available
+        </Title>
-          </Title>
+      </Stack>
-        </Stack>
-      </Container>
     );
   }
 
   return (
     <Container size="100%" px={0}>
       <Stack gap="xs">
+        <Text px="md" size="10px" lh={0} c="dimmed">
+          Showing {filteredAndSortedStats.length} of {playerStats.length} players
+        </Text>
         <TextInput
           placeholder="Search players"
           value={search}
@@ -259,11 +323,9 @@ const PlayerStatsTable = () => {
         />
 
         <Group px="md" justify="space-between" align="center">
-          <Text size="10px" lh={0} c="dimmed">
+          <Group gap="xs" w="100%">
-            {filteredAndSortedStats.length} of {playerStats.length} players
+            <div></div>
-          </Text>
+            <Text ml='auto' size="xs" c="dimmed">Sort:</Text>
-          <Group gap="xs">
-            <Text size="xs" c="dimmed">Sort:</Text>
             <UnstyledButton
               onClick={() => handleSort("mmr")}
               style={{ display: "flex", alignItems: "center", gap: 4 }}
@@ -301,6 +363,48 @@ const PlayerStatsTable = () => {
               </Popover.Target>
               <Popover.Dropdown>
                 <Box maw={280}>
+                  <Text size="sm" fw={500} mb="xs">
+                    Stat Abbreviations:
+                  </Text>
+                  <Text size="xs" mb={2}>
+                    • <strong>M:</strong> Matches
+                  </Text>
+                  <Text size="xs" mb={2}>
+                    • <strong>T:</strong> Tournaments
+                  </Text>
+                  <Text size="xs" mb={2}>
+                    • <strong>MMR:</strong> Matchmaking Rating
+                  </Text>
+                  <Text size="xs" mb={2}>
+                    • <strong>W:</strong> Wins
+                  </Text>
+                  <Text size="xs" mb={2}>
+                    • <strong>L:</strong> Losses
+                  </Text>
+                  <Text size="xs" mb={2}>
+                    • <strong>W%:</strong> Win Percentage
+                  </Text>
+                  <Text size="xs" mb={2}>
+                    • <strong>AWM:</strong> Average Win Margin
+                  </Text>
+                  <Text size="xs" mb={2}>
+                    • <strong>ALM:</strong> Average Loss Margin
+                  </Text>
+                  <Text size="xs" mb={2}>
+                    • <strong>AC:</strong> Average Cups Per Match
+                  </Text>
+                  <Text size="xs" mb={2}>
+                    • <strong>ACA:</strong> Average Cups Against
+                  </Text>
+                  <Text size="xs" mb={2}>
+                    • <strong>CF:</strong> Cups For
+                  </Text>
+                  <Text size="xs" mb={2}>
+                    • <strong>CA:</strong> Cups Against
+                  </Text>
+
+                  <Divider my="sm" />
+
                   <Text size="sm" fw={500} mb="xs">
                     MMR Calculation:
                   </Text>
@@ -335,6 +439,8 @@ const PlayerStatsTable = () => {
                 stat={stat}
                 onPlayerClick={handlePlayerClick}
                 mmr={stat.mmr}
+                onRegisterViewport={handleRegisterViewport}
+                onUnregisterViewport={handleUnregisterViewport}
               />
               {index < filteredAndSortedStats.length - 1 && <Divider />}
             </Box>

src/features/players/components/profile/header.tsx

@@ -1,23 +1,29 @@
 import Sheet from "@/components/sheet/sheet";
 import { useAuth } from "@/contexts/auth-context";
-import { Flex, Title, ActionIcon } from "@mantine/core";
+import { Flex, Title, ActionIcon, Stack, Button, Box } from "@mantine/core";
-import { PencilIcon } from "@phosphor-icons/react";
+import { PencilIcon, FootballHelmetIcon } from "@phosphor-icons/react";
 import { useMemo } from "react";
 import NameUpdateForm from "./name-form";
 import Avatar from "@/components/avatar";
 import { useSheet } from "@/hooks/use-sheet";
 import { Player } from "../../types";
+import PlayerHeadToHeadSheet from "../player-head-to-head-sheet";
 
 interface HeaderProps {
   player: Player;
 }
 
 const Header = ({ player }: HeaderProps) => {
-  const sheet = useSheet();
+  const nameSheet = useSheet();
+  const h2hSheet = useSheet();
   const { user: authUser } = useAuth();
 
   const owner = useMemo(() => authUser?.id === player.id, [authUser?.id, player.id]);
   const name = useMemo(() => `${player.first_name} ${player.last_name}`, [player.first_name, player.last_name]);
+  const authUserName = useMemo(() => {
+    if (!authUser) return "";
+    return `${authUser.first_name} ${authUser.last_name}`;
+  }, [authUser]);
 
   const fontSize = useMemo(() => {
     const baseSize = 28;
@@ -33,19 +39,62 @@ const Header = ({ player }: HeaderProps) => {
 
   return (
     <>
-      <Flex h="15dvh" px='xl' w='100%' align='self-end' gap='md'>
+      <Stack gap="sm" align="center" pt="md">
-        <Avatar name={name} size={100} />
+        <Flex h="15dvh" px='xl' w='100%' align='self-end' gap='md'>
-        <Flex align='center' justify='center' gap={4} pb={20} w='100%'>
+          <Avatar name={name} size={100} />
-          <Title ta='center' style={{ fontSize, lineHeight: 1.2 }}>{name}</Title>
+          <Flex align='center' justify='center' gap={4} pb={20} w='100%'>
-          <ActionIcon display={owner ? 'block' : 'none'} radius='xl' variant='subtle' onClick={sheet.open}>
+            <Title ta='center' style={{ fontSize, lineHeight: 1.2 }}>{name}</Title>
-            <PencilIcon size={20} />
+            <ActionIcon display={owner ? 'block' : 'none'} radius='xl' variant='subtle' onClick={nameSheet.open}>
-          </ActionIcon>
+              <PencilIcon size={20} />
+            </ActionIcon>
+            <ActionIcon
+              variant="subtle"
+              size="sm"
+              radius="xl"
+              onClick={h2hSheet.open}
+              w={40}
+              display={!owner ? 'block' : 'none'}
+            >
+              <Box style={{ position: 'relative', width: 27.5, height: 16 }}>
+                <FootballHelmetIcon
+                  size={14}
+                  style={{
+                    position: 'absolute',
+                    left: 0,
+                    top: 0,
+                    transform: 'rotate(25deg)'
+                  }}
+                />
+                <FootballHelmetIcon
+                  size={14}
+                  style={{
+                    position: 'absolute',
+                    right: 0,
+                    top: 0,
+                    transform: 'scaleX(-1) rotate(25deg)'
+                  }}
+                />
+              </Box>
+            </ActionIcon>
+          </Flex>
         </Flex>
-      </Flex>
+      </Stack>
 
-      <Sheet title='Update Name' {...sheet.props}>
+      <Sheet title='Update Name' {...nameSheet.props}>
-        <NameUpdateForm player={player} toggle={sheet.toggle} />
+        <NameUpdateForm player={player} toggle={nameSheet.toggle} />
       </Sheet>
+
+      {!owner && authUser && (
+        <Sheet title="Head to Head" {...h2hSheet.props}>
+          <PlayerHeadToHeadSheet
+            player1Id={authUser.id}
+            player1Name={authUserName}
+            player2Id={player.id}
+            player2Name={name}
+            isOpen={h2hSheet.props.opened}
+          />
+        </Sheet>
+      )}
     </>
   )
 };

src/features/players/components/profile/index.tsx

@@ -1,10 +1,11 @@
-import { Box, Stack, Text, Divider } from "@mantine/core";
+import { Box, Stack, Text, Divider, Group, Button, Anchor } from "@mantine/core";
-import { Suspense } from "react";
+import { Suspense, useState, useDeferredValue } from "react";
+import { Link } from "@tanstack/react-router";
 import Header from "./header";
 import SwipeableTabs from "@/components/swipeable-tabs";
 import { usePlayer, usePlayerMatches, usePlayerStats } from "../../queries";
 import TeamList from "@/features/teams/components/team-list";
-import StatsOverview from "@/components/stats-overview";
+import StatsOverview, { StatsSkeleton } from "@/components/stats-overview";
 import MatchList from "@/features/matches/components/match-list";
 import BadgeShowcase from "@/features/badges/components/badge-showcase";
 import BadgeShowcaseSkeleton from "@/features/badges/components/badge-showcase-skeleton";
@@ -13,26 +14,56 @@ interface ProfileProps {
   id: string;
 }
 
+const StatsWithFilter = ({ id }: { id: string }) => {
+  const [viewType, setViewType] = useState<'all' | 'mainline' | 'regional'>('all');
+  const deferredViewType = useDeferredValue(viewType);
+  const isStale = viewType !== deferredViewType;
+
+  return (
+    <Stack>
+      <Group gap="xs" px="md" justify="space-between" align="center">
+        <Text size="md" fw={700}>Statistics</Text>
+        <Group gap="xs">
+          <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>
+      </Group>
+      <Box style={{ opacity: isStale ? 0.6 : 1, transition: 'opacity 150ms' }}>
+        <Suspense key={deferredViewType} fallback={<StatsSkeleton />}>
+          <StatsContent id={id} viewType={deferredViewType} />
+        </Suspense>
+      </Box>
+    </Stack>
+  );
+};
+
+const StatsContent = ({ id, viewType }: { id: string; viewType: 'all' | 'mainline' | 'regional' }) => {
+  const { data: stats, isLoading: statsLoading } = usePlayerStats(id, viewType);
+  return <StatsOverview statsData={stats} isLoading={statsLoading} />;
+};
+
 const Profile = ({ id }: ProfileProps) => {
   const { data: player } = usePlayer(id);
   const { data: matches } = usePlayerMatches(id);
-  const { data: stats, isLoading: statsLoading } = usePlayerStats(id);
 
   const tabs = [
     {
       label: "Overview",
       content: <>
         <Stack px="md">
-          <Text size="md" fw={700}>Badges</Text>
+          <Group justify="space-between" align="center">
+            <Text size="md" fw={700}>Badges</Text>
+            <Anchor component={Link} to="/badges" size="sm" fw={500}>
+              View all badges
+            </Anchor>
+          </Group>
           <Suspense fallback={<BadgeShowcaseSkeleton />}>
             <BadgeShowcase playerId={id} />
           </Suspense>
         </Stack>
         <Divider my="md" />
-        <Stack>
+        <StatsWithFilter id={id} />
-          <Text px="md" size="md" fw={700}>Statistics</Text>
-          <StatsOverview statsData={stats} isLoading={statsLoading} />
-        </Stack>
       </>,
     },
     {

src/features/players/queries.ts

@@ -7,8 +7,8 @@ export const playerKeys = {
   details: (id: string) => ['players', 'details', id],
   unassociated: ['players','unassociated'],
   unenrolled: (tournamentId: string) => ['players', 'unenrolled', tournamentId],
-  stats: (id: string) => ['players', 'stats', id],
+  stats: (id: string, viewType?: 'all' | 'mainline' | 'regional') => ['players', 'stats', id, viewType ?? 'all'],
-  allStats: ['players', 'stats', 'all'],
+  allStats: (viewType?: 'all' | 'mainline' | 'regional') => ['players', 'stats', 'all', viewType ?? 'all'],
   matches: (id: string) => ['players', 'matches', id],
   activity: ['players', 'activity'],
 };
@@ -34,13 +34,13 @@ export const playerQueries = {
     queryKey: playerKeys.unenrolled(tournamentId),
     queryFn: async () => await getUnenrolledPlayers({ data: tournamentId })
   }),
-  stats: (id: string) => ({
+  stats: (id: string, viewType?: 'all' | 'mainline' | 'regional') => ({
-    queryKey: playerKeys.stats(id),
+    queryKey: playerKeys.stats(id, viewType),
-    queryFn: async () => await getPlayerStats({ data: id })
+    queryFn: async () => await getPlayerStats({ data: { playerId: id, viewType } })
   }),
-  allStats: () => ({
+  allStats: (viewType?: 'all' | 'mainline' | 'regional') => ({
-    queryKey: playerKeys.allStats,
+    queryKey: playerKeys.allStats(viewType),
-    queryFn: async () => await getAllPlayerStats()
+    queryFn: async () => await getAllPlayerStats({ data: viewType })
   }),
   matches: (id: string) => ({
     queryKey: playerKeys.matches(id),
@@ -84,11 +84,11 @@ export const usePlayers = () =>
 export const useUnassociatedPlayers = () => 
   useServerSuspenseQuery(playerQueries.unassociated());
 
-export const usePlayerStats = (id: string) =>
+export const usePlayerStats = (id: string, viewType?: 'all' | 'mainline' | 'regional') =>
-  useServerSuspenseQuery(playerQueries.stats(id));
+  useServerSuspenseQuery(playerQueries.stats(id, viewType));
 
-export const useAllPlayerStats = () =>
+export const useAllPlayerStats = (viewType?: 'all' | 'mainline' | 'regional') =>
-  useServerSuspenseQuery(playerQueries.allStats());
+  useServerSuspenseQuery(playerQueries.allStats(viewType));
 
 export const usePlayerMatches = (id: string) =>
   useServerSuspenseQuery(playerQueries.matches(id));

src/features/players/server.ts

@@ -136,16 +136,20 @@ export const getUnassociatedPlayers = createServerFn()
   );
 
 export const getPlayerStats = createServerFn()
-  .inputValidator(z.string())
+  .inputValidator(z.object({
+    playerId: z.string(),
+    viewType: z.enum(['all', 'mainline', 'regional']).optional()
+  }))
   .middleware([superTokensFunctionMiddleware])
   .handler(async ({ data }) =>
-    toServerResult<PlayerStats>(async () => await pbAdmin.getPlayerStats(data))
+    toServerResult<PlayerStats>(async () => await pbAdmin.getPlayerStats(data.playerId, data.viewType))
   );
 
 export const getAllPlayerStats = createServerFn()
+  .inputValidator(z.enum(['all', 'mainline', 'regional']).optional())
   .middleware([superTokensFunctionMiddleware])
-  .handler(async () =>
+  .handler(async ({ data }) =>
-    toServerResult<PlayerStats[]>(async () => await pbAdmin.getAllPlayerStats())
+    toServerResult<PlayerStats[]>(async () => await pbAdmin.getAllPlayerStats(data))
   );
 
 export const getPlayerMatches = createServerFn()

src/features/teams/components/team-list.tsx

@@ -22,12 +22,21 @@ const TeamListItem = React.memo(({ team }: TeamListItemProps) => {
     [team.players]
   );
 
+  const teamNameSize = useMemo(() => {
+    const nameLength = team.name.length;
+    if (nameLength > 20) return 'xs';
+    if (nameLength > 15) return 'sm';
+    return 'md';
+  }, [team.name]);
+
   return (
-    <Group justify="space-between" w="100%">
+    <Group justify="space-between" w="100%" wrap="nowrap">
-      <Text fw={500}>{`${team.name}`}</Text>
+      <Text fw={500} size={teamNameSize} style={{ flexShrink: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-      <Stack ml="auto" gap={0}>
+        {`${team.name}`}
-        {playerNames.map((name) => (
+      </Text>
-          <Text size="xs" c="dimmed" ta="right">
+      <Stack ml="auto" gap={0} style={{ flexShrink: 0 }}>
+        {playerNames.map((name, idx) => (
+          <Text key={idx} size="xs" c="dimmed" ta="right">
             {name}
           </Text>
         ))}
@@ -46,10 +55,10 @@ const TeamList = ({ teams, loading = false, onTeamClick }: TeamListProps) => {
   const navigate = useNavigate();
 
   const handleClick = useCallback(
-    (teamId: string) => {
+    (teamId: string, priv: boolean) => {
       if (onTeamClick) {
         onTeamClick(teamId);
-      } else {
+      } else if (!priv) {
         navigate({ to: `/teams/${teamId}` });
       }
     },
@@ -91,7 +100,7 @@ const TeamList = ({ teams, loading = false, onTeamClick }: TeamListProps) => {
               />
             }
             style={{ cursor: "pointer" }}
-            onClick={() => handleClick(team.id)}
+            onClick={() => handleClick(team.id, team.private)}
             styles={{
               itemWrapper: { width: "100%" },
               itemLabel: { width: "100%" },

src/features/teams/hooks/use-available-players.ts

@@ -41,3 +41,5 @@ export const useAvailablePlayers = (excludedPlayerIds: string[] = []) => {
     allPlayers
   };
 };
+
+export const useAllPlayers = () => useServerSuspenseQuery(playerQueries.all());

src/features/teams/types.ts

@@ -19,6 +19,7 @@ export interface Team {
   updated: string;
   players: PlayerInfo[];
   tournaments: TournamentInfo[];
+  private: boolean;
 }
 
 export interface TeamInfo {
@@ -28,6 +29,7 @@ export interface TeamInfo {
   accent_color: string;
   logo?: string;
   players: PlayerInfo[];
+  private: boolean;
 }
 
 export const teamInputSchema = z

src/features/tournaments/components/tournament-card.tsx

@@ -58,7 +58,7 @@ export const TournamentCard = ({ tournament }: TournamentCardProps) => {
               <Title mb={-6} order={3} lineClamp={2}>
                 {tournament.name}
               </Title>
-              {(tournament.first_place || tournament.second_place || tournament.third_place) && (
+              {((tournament.first_place || tournament.second_place || tournament.third_place) && !tournament.regional) && (
                 <Stack gap={6} >
                   {tournament.first_place && (
                     <Badge

src/features/tournaments/components/tournament-stats.tsx

@@ -9,9 +9,10 @@ import {
   Center,
   ThemeIcon,
   Divider,
+  Alert,
 } from "@mantine/core";
 import { Tournament } from "@/features/tournaments/types";
-import { CrownIcon, MedalIcon, TreeStructureIcon } from "@phosphor-icons/react";
+import { CrownIcon, TreeStructureIcon, InfoIcon } from "@phosphor-icons/react";
 import Avatar from "@/components/avatar";
 import ListLink from "@/components/list-link";
 import { Podium } from "./podium";
@@ -156,7 +157,12 @@ export const TournamentStats = memo(({ tournament }: TournamentStatsProps) => {
   return (
     <Container size="100%" px={0}>
       <Stack gap="md">
-        <Podium tournament={tournament} />
+        {tournament.regional && (
+          <Alert px="md" variant="light" title="Regional Tournament" icon={<InfoIcon size={16} />}>
+            Regional tournaments are a work in progress. Some features might not work as expected.
+          </Alert>
+        )}
+        {!tournament.regional && <Podium tournament={tournament} />}
         <ListLink
           label={`View Bracket`}
           to={`/tournaments/${tournament.id}/bracket`}

src/features/tournaments/types.ts

@@ -29,6 +29,7 @@ export interface TournamentInfo {
   first_place?: TeamInfo;
   second_place?: TeamInfo;
   third_place?: TeamInfo;
+  regional?: boolean;
 }
 
 export interface Tournament {
@@ -50,6 +51,7 @@ export interface Tournament {
   second_place?: TeamInfo;
   third_place?: TeamInfo;
   team_stats?: TournamentTeamStats[];
+  regional?: boolean;
 }
 
 export const tournamentInputSchema = z.object({

src/lib/pocketbase/services/badges.ts

@@ -1,6 +1,6 @@
 import PocketBase from "pocketbase";
-import { Badge, BadgeProgress } from "@/features/badges/types";
+import { Badge, BadgeProgress, EarnedBadge } from "@/features/badges/types";
-import { transformBadge, transformBadgeProgress } from "@/lib/pocketbase/util/transform-types";
+import { transformBadge, transformBadgeProgress, transformEarnedBadge } from "@/lib/pocketbase/util/transform-types";
 
 export interface PlayerStats {
   player_id: string;
@@ -41,6 +41,14 @@ export function createBadgesService(pb: PocketBase) {
       return results.map(transformBadgeProgress);
     },
 
+     async listEarnedBadges(): Promise<EarnedBadge[]> {
+      const results = await pb.collection("badge_progress").getFullList({
+        filter: `earned = true`,
+        expand: 'player',
+      });
+      return results.map(transformEarnedBadge);
+    },
+
     async createBadgeProgress(data: {
       badge: string;
       player: string;
@@ -91,7 +99,7 @@ export function createBadgesService(pb: PocketBase) {
     async calculateMatchBadgeProgress(playerId: string, badge: Badge): Promise<number> {
       const criteria = badge.criteria;
 
-      const stats = await pb.collection("player_stats").getFirstListItem<PlayerStats>(
+      const stats = await pb.collection("player_mainline_stats").getFirstListItem<PlayerStats>(
         `player_id = "${playerId}"`
       ).catch(() => null);
 
@@ -103,8 +111,8 @@ export function createBadgesService(pb: PocketBase) {
 
       if (criteria.overtime_matches !== undefined || criteria.overtime_wins !== undefined) {
         const matches = await pb.collection("matches").getFullList({
-          filter: `(home.players.id ?~ "${playerId}" || away.players.id ?~ "${playerId}") && status = "ended" && ot_count > 0`,
+          filter: `(home.players.id ?~ "${playerId}" || away.players.id ?~ "${playerId}") && status = "ended" && ot_count > 0 && (tournament.regional = false || tournament.regional = null)`,
-          expand: 'home,away,home.players,away.players',
+          expand: 'tournament,home,away,home.players,away.players',
         });
 
         if (criteria.overtime_matches !== undefined) {
@@ -131,8 +139,8 @@ export function createBadgesService(pb: PocketBase) {
 
       if (criteria.margin_of_victory !== undefined) {
         const matches = await pb.collection("matches").getFullList({
-          filter: `(home.players.id ?~ "${playerId}" || away.players.id ?~ "${playerId}") && status = "ended"`,
+          filter: `(home.players.id ?~ "${playerId}" || away.players.id ?~ "${playerId}") && status = "ended" && (tournament.regional = false || tournament.regional = null)`,
-          expand: 'home,away,home.players,away.players',
+          expand: 'tournament,home,away,home.players,away.players',
         });
 
         const bigWins = matches.filter(m => {
@@ -159,7 +167,7 @@ export function createBadgesService(pb: PocketBase) {
       const criteria = badge.criteria;
 
       const matches = await pb.collection("matches").getFullList({
-        filter: `(home.players.id ?~ "${playerId}" || away.players.id ?~ "${playerId}") && status = "ended"`,
+        filter: `(home.players.id ?~ "${playerId}" || away.players.id ?~ "${playerId}") && status = "ended" && (tournament.regional = false || tournament.regional = null)`,
         expand: 'tournament,home,away,home.players,away.players',
       });
 
@@ -209,8 +217,8 @@ export function createBadgesService(pb: PocketBase) {
 
         for (const tournamentId of tournamentIds) {
           const tournamentMatches = await pb.collection("matches").getFullList({
-            filter: `tournament = "${tournamentId}" && status = "ended"`,
+            filter: `tournament = "${tournamentId}" && status = "ended" && (tournament.regional = false || tournament.regional = null)`,
-            expand: 'home,away,home.players,away.players',
+            expand: 'tournament,home,away,home.players,away.players',
           });
 
           const winnersMatches = tournamentMatches.filter(m => !m.is_losers_bracket);
@@ -241,8 +249,8 @@ export function createBadgesService(pb: PocketBase) {
 
         for (const tournamentId of tournamentIds) {
           const tournamentMatches = await pb.collection("matches").getFullList({
-            filter: `tournament = "${tournamentId}" && status = "ended"`,
+            filter: `tournament = "${tournamentId}" && status = "ended" && (tournament.regional = false || tournament.regional = null)`,
-            expand: 'home,away,home.players,away.players',
+            expand: 'tournament,home,away,home.players,away.players',
           });
 
           if (criteria.placement === 2) {
@@ -293,6 +301,7 @@ export function createBadgesService(pb: PocketBase) {
 
       if (criteria.tournament_record !== undefined) {
         const tournaments = await pb.collection("tournaments").getFullList({
+          filter: 'regional = false || regional = null',
           sort: 'start_time',
         });
 
@@ -344,6 +353,7 @@ export function createBadgesService(pb: PocketBase) {
 
       if (criteria.consecutive_wins !== undefined) {
         const tournaments = await pb.collection("tournaments").getFullList({
+          filter: 'regional = false || regional = null',
           sort: 'start_time',
         });
 

src/lib/pocketbase/services/matches.ts

@@ -32,7 +32,7 @@ export function createMatchesService(pb: PocketBase) {
     },
 
     async createMatch(data: MatchInput): Promise<Match> {
-      logger.info("PocketBase | Creating match", data);
+      // logger.info("PocketBase | Creating match", data);
       const result = await pb.collection("matches").create<Match>(data);
       return result;
     },
@@ -71,5 +71,75 @@ export function createMatchesService(pb: PocketBase) {
         matches.map((match) => pb.collection("matches").delete(match.id))
       );
     },
+
+    async getMatchesBetweenPlayers(player1Id: string, player2Id: string): Promise<Match[]> {
+      logger.info("PocketBase | Getting matches between players", { player1Id, player2Id });
+
+      const player1Teams = await pb.collection("teams").getFullList({
+        filter: `players ~ "${player1Id}"`,
+        fields: "id",
+      });
+
+      const player2Teams = await pb.collection("teams").getFullList({
+        filter: `players ~ "${player2Id}"`,
+        fields: "id",
+      });
+
+      const player1TeamIds = player1Teams.map(t => t.id);
+      const player2TeamIds = player2Teams.map(t => t.id);
+
+      if (player1TeamIds.length === 0 || player2TeamIds.length === 0) {
+        return [];
+      }
+
+      const allTeamIds = [...new Set([...player1TeamIds, ...player2TeamIds])];
+      const batchSize = 10;
+      const allMatches: any[] = [];
+
+      for (let i = 0; i < allTeamIds.length; i += batchSize) {
+        const batch = allTeamIds.slice(i, i + batchSize);
+        const teamFilters = batch.map(id => `home="${id}" || away="${id}"`).join(' || ');
+
+        const results = await pb.collection("matches").getFullList({
+          filter: teamFilters,
+          expand: "tournament, home, away, home.players, away.players",
+          sort: "-created",
+        });
+
+        allMatches.push(...results);
+      }
+
+      const uniqueMatches = Array.from(
+        new Map(allMatches.map(m => [m.id, m])).values()
+      );
+
+      return uniqueMatches
+        .filter(match => {
+          const homeTeamId = typeof match.home === 'string' ? match.home : match.home?.id;
+          const awayTeamId = typeof match.away === 'string' ? match.away : match.away?.id;
+
+          const player1InHome = player1TeamIds.includes(homeTeamId);
+          const player1InAway = player1TeamIds.includes(awayTeamId);
+          const player2InHome = player2TeamIds.includes(homeTeamId);
+          const player2InAway = player2TeamIds.includes(awayTeamId);
+
+          return (player1InHome && player2InAway) || (player1InAway && player2InHome);
+        })
+        .map(match => transformMatch(match));
+    },
+
+    async getMatchesBetweenTeams(team1Id: string, team2Id: string): Promise<Match[]> {
+      logger.info("PocketBase | Getting matches between teams", { team1Id, team2Id });
+
+      const filter = `(home="${team1Id}" && away="${team2Id}") || (home="${team2Id}" && away="${team1Id}")`;
+
+      const results = await pb.collection("matches").getFullList({
+        filter,
+        expand: "tournament, home, away, home.players, away.players",
+        sort: "-created",
+      });
+
+      return results.map(match => transformMatch(match));
+    },
   };
 }

src/lib/pocketbase/services/players.ts

@@ -8,7 +8,6 @@ import type {
 import type { Match } from "@/features/matches/types";
 import { transformPlayer, transformPlayerInfo, transformMatch } from "@/lib/pocketbase/util/transform-types";
 import PocketBase from "pocketbase";
-import { DataFetchOptions } from "./base";
 
 export function createPlayersService(pb: PocketBase) {
   return {
@@ -65,9 +64,15 @@ export function createPlayersService(pb: PocketBase) {
       return result.map(transformPlayer);
     },
 
-    async getPlayerStats(playerId: string): Promise<PlayerStats> {
+    async getPlayerStats(playerId: string, viewType: 'all' | 'mainline' | 'regional' = 'all'): Promise<PlayerStats> {
       try {
-        const result = await pb.collection("player_stats").getFirstListItem<PlayerStats>(
+        const collectionMap = {
+          all: 'player_stats',
+          mainline: 'player_mainline_stats',
+          regional: 'player_regional_stats',
+        };
+
+        const result = await pb.collection(collectionMap[viewType]).getFirstListItem<PlayerStats>(
           `player_id = "${playerId}"`
         );
         return result;
@@ -90,8 +95,14 @@ export function createPlayersService(pb: PocketBase) {
       }
     },
 
-    async getAllPlayerStats(): Promise<PlayerStats[]> {
+    async getAllPlayerStats(viewType: 'all' | 'mainline' | 'regional' = 'all'): Promise<PlayerStats[]> {
-      const result = await pb.collection("player_stats").getFullList<PlayerStats>({
+      const collectionMap = {
+        all: 'player_stats',
+        mainline: 'player_mainline_stats',
+        regional: 'player_regional_stats',
+      };
+
+      const result = await pb.collection(collectionMap[viewType]).getFullList<PlayerStats>({
         sort: "-win_percentage,-total_cups_made",
       });
       return result;

src/lib/pocketbase/services/tournaments.ts

@@ -34,7 +34,7 @@ export function createTournamentsService(pb: PocketBase) {
         .getFirstListItem('',
           {
             expand: "teams, teams.players, matches, matches.tournament, matches.home, matches.away, matches.home.players, matches.away.players",
-            sort: "-created",
+            sort: "-start_time",
           }
         );
 
@@ -52,7 +52,7 @@ export function createTournamentsService(pb: PocketBase) {
         .collection("tournaments")
         .getFullList({
           expand: "teams,teams.players,matches",
-          sort: "-created",
+          sort: "-start_time",
         });
 
       const tournamentsWithStats = await Promise.all(result.map(async (tournament) => {

src/lib/pocketbase/util/transform-types.ts

@@ -1,9 +1,8 @@
-import { Reaction } from "@/features/matches/server";
 import { Match } from "@/features/matches/types";
 import { Player, PlayerInfo } from "@/features/players/types";
 import { Team, TeamInfo } from "@/features/teams/types";
 import { Tournament, TournamentInfo } from "@/features/tournaments/types";
-import { Badge, BadgeInfo, BadgeProgress } from "@/features/badges/types";
+import { Badge, BadgeInfo, BadgeProgress, EarnedBadge } from "@/features/badges/types";
 import { Activity } from "../services/activities";
 
 // pocketbase does this weird thing with relations where it puts them under a seperate "expand" field
@@ -25,7 +24,8 @@ export function transformTeamInfo(record: any): TeamInfo {
     primary_color: record.primary_color,
     accent_color: record.accent_color,
     players,
-    logo: record.logo
+    logo: record.logo,
+    private: record.private || false,
   };
 }
 
@@ -107,6 +107,7 @@ export const transformTournamentInfo = (record: any): TournamentInfo => {
     end_time: record.end_time,
     logo: record.logo,
     glitch_logo: record.glitch_logo,
+    regional: record.regional || false,
     first_place,
     second_place,
     third_place,
@@ -116,6 +117,7 @@ export const transformTournamentInfo = (record: any): TournamentInfo => {
 export function transformPlayer(record: any): Player {
   const teams =
     record.expand?.teams
+      ?.filter((team: any) => !team.private)
       ?.sort((a: any, b: any) =>
         new Date(a.created) < new Date(b.created) ? -1 : 0
       )
@@ -135,13 +137,6 @@ export function transformPlayer(record: any): Player {
 
 export function transformFreeAgent(record: any) {
   const player = record.expand?.player ? transformPlayerInfo(record.expand.player) : undefined;
-  const tournaments =
-    record.expand?.tournaments
-      ?.sort((a: any, b: any) =>
-        new Date(a.created!) < new Date(b.created!) ? -1 : 0
-      )
-      ?.map(transformTournamentInfo) ?? [];
-
   return {
     id: record.id as string,
     phone: record.phone as string,
@@ -180,6 +175,7 @@ export function transformTeam(record: any): Team {
     updated: record.updated,
     players,
     tournaments,
+    private: record.private || false,
   };
 }
 
@@ -264,6 +260,7 @@ export function transformTournament(record: any, isAdmin: boolean = false): Tour
     end_time: record.end_time,
     created: record.created,
     updated: record.updated,
+    regional: record.regional || false,
     teams,
     matches,
     first_place,
@@ -315,6 +312,18 @@ export function transformBadgeProgress(record: any): BadgeProgress {
   };
 }
 
+export function transformEarnedBadge(record: any): EarnedBadge {
+  return {
+    id: record.id,
+    badge: record.badge,
+    player: record.expand?.player ? transformPlayerInfo(record.expand.player) : record.player,
+    progress: record.progress,
+    earned: record.earned,
+    created: record.created,
+    updated: record.updated,
+  };
+}
+
 export function transformActivity(record: any): Activity {
   return {
     id: record.id,

src/lib/tanstack-query/hooks/index.ts

@@ -1,4 +1,4 @@
 export * from './use-optimistic-mutation';
 export * from './use-server-mutation';
 export * from './use-server-query';
-export * from './user-server-suspense-query';
+export * from './use-server-suspense-query';

src/lib/tanstack-query/hooks/use-server-query.ts

@@ -8,6 +8,7 @@ export function useServerQuery<TData>(
       queryFn: () => Promise<ServerResult<TData>>;
       options?: Omit<UseQueryOptions<TData, Error, TData>, 'queryFn' | 'queryKey'>
       showErrorToast?: boolean;
+      enabled?: boolean;
   }
 ) {
   const { queryKey, queryFn, showErrorToast = true, options: queryOptions } = options;

src/lib/tanstack-query/hooks/use-server-suspense-query.ts

@@ -8,6 +8,7 @@ export function useServerSuspenseQuery<TData>(
       queryFn: () => Promise<ServerResult<TData>>;
       options?: Omit<UseQueryOptions<TData, Error, TData>, 'queryFn' | 'queryKey'>
       showErrorToast?: boolean;
+      enabled?: boolean;
   }
 ) {
   const { queryKey, queryFn, showErrorToast = true, options: queryOptions } = options;

test.js

@@ -0,0 +1,269 @@
+import PocketBase from "pocketbase";
+import * as xlsx from "xlsx";
+import { nanoid } from "nanoid";
+
+import { createTeamsService } from "./src/lib/pocketbase/services/teams.ts";
+import { createPlayersService } from "./src/lib/pocketbase/services/players.ts";
+import { createMatchesService } from "./src/lib/pocketbase/services/matches.ts";
+import { createTournamentsService } from "./src/lib/pocketbase/services/tournaments.ts";
+
+const POCKETBASE_URL = "http://127.0.0.1:8090";
+const EXCEL_FILE_PATH = "./Teams-2.xlsx";
+
+const ADMIN_EMAIL = "kyle.yohler@gmail.com";
+const ADMIN_PASSWORD = "xj44aqz9CWrNNM0o";
+
+// --- Helpers ---
+async function createPlayerIfMissing(playersService, nameColumn, idColumn) {
+  const playerId = idColumn?.trim();
+  if (playerId) return playerId;
+
+  let firstName, lastName;
+  if (!nameColumn || !nameColumn.trim()) {
+    firstName = `Player_${nanoid(4)}`;
+    lastName = "(Regional)";
+  } else {
+    const parts = nameColumn.trim().split(" ");
+    firstName = parts[0];
+    lastName = parts[1] || "(Regional)";
+  }
+
+  const newPlayer = await playersService.createPlayer({ first_name: firstName, last_name: lastName });
+  return newPlayer.id;
+}
+
+async function handleTeamsSheet(rows, teamsService, playersService, pb, tournamentIdMap = {}) {
+  console.log(`📥 Importing ${rows.length} teams...`);
+  const teamIdMap = {}; // spreadsheet ID -> PocketBase ID
+
+  for (const [i, row] of rows.entries()) {
+    try {
+      const spreadsheetTeamId = row["ID"]?.toString().trim();
+      if (!spreadsheetTeamId) {
+        console.warn(`⚠️ [${i + 1}] Team row missing spreadsheet ID, skipping.`);
+        continue;
+      }
+
+      const p1Id = await createPlayerIfMissing(playersService, row["P1 Name"], row["P1 ID"]);
+      const p2Id = await createPlayerIfMissing(playersService, row["P2 Name"], row["P2 ID"]);
+
+      let name = row["Name"]?.trim();
+      if (!name) {
+        const p1First = row["P1 Name"]?.split(" ")[0] || "Player1";
+        const p2First = row["P2 Name"]?.split(" ")[0] || "Player2";
+        name = `${p1First} and ${p2First}`;
+        console.warn(`⚠️ [${i + 1}] No team name found. Using generated name: ${name}`);
+      }
+
+      const existing = await pb.collection("teams").getFullList({
+        filter: `name = "${name}"`,
+        fields: "id",
+      });
+
+      if (existing.length > 0) {
+        console.log(`ℹ️ [${i + 1}] Team "${name}" already exists, skipping.`);
+        teamIdMap[spreadsheetTeamId] = existing[0].id;
+        continue;
+      }
+
+      // If there's a tournament for this team, get its PB ID
+      const tournamentSpreadsheetId = row["Tournament ID"]?.toString().trim();
+      const tournamentId = tournamentSpreadsheetId ? tournamentIdMap[tournamentSpreadsheetId] : undefined;
+
+      const teamInput = {
+        name,
+        primary_color: row.primary_color || "",
+        accent_color: row.accent_color || "",
+        logo: row.logo || "",
+        players: [p1Id, p2Id],
+        tournament: tournamentId, // single tournament relation,
+        private: true
+      };
+
+      const team = await teamsService.createTeam(teamInput);
+      teamIdMap[spreadsheetTeamId] = team.id;
+
+      console.log(`✅ [${i + 1}] Created team: ${team.name} with players: ${[p1Id, p2Id].join(", ")}`);
+
+      // Add the team to the tournament's "teams" relation
+      if (tournamentId) {
+        await pb.collection("tournaments").update(tournamentId, {
+          "teams+": [team.id],
+        });
+        console.log(`✅ Added team "${team.name}" to tournament ${tournamentId}`);
+      }
+    } catch (err) {
+      console.error(`❌ [${i + 1}] Failed to create team: ${err.message}`);
+    }
+  }
+
+  return teamIdMap;
+}
+
+
+async function handleTournamentSheet(rows, tournamentsService, teamIdMap, pb) {
+  console.log(`📥 Importing ${rows.length} tournaments...`);
+  const tournamentIdMap = {};
+  const validFormats = ["double_elim", "single_elim", "groups", "swiss", "swiss_bracket"];
+
+  for (const [i, row] of rows.entries()) {
+    try {
+      const spreadsheetId = row["ID"]?.toString().trim();
+      if (!spreadsheetId) {
+        console.warn(`⚠️ [${i + 1}] Tournament missing spreadsheet ID, skipping.`);
+        continue;
+      }
+
+      if (!row["Name"]) {
+        console.warn(`⚠️ [${i + 1}] Tournament name missing, skipping.`);
+        continue;
+      }
+
+      const format = validFormats.includes(row["Format"]) ? row["Format"] : "double_elim";
+
+      // Convert start_time to ISO datetime string
+      let startTime = null;
+      if (row["Start Time"]) {
+        try {
+          startTime = new Date(row["Start Time"]).toISOString();
+        } catch (e) {
+          console.warn(`⚠️ [${i + 1}] Invalid start time format, using null`);
+        }
+      }
+
+      const tournamentInput = {
+        name: row["Name"],
+        start_time: startTime,
+        format,
+        regional: true,
+        teams: Object.values(teamIdMap), // Add all created teams
+      };
+
+      const tournament = await tournamentsService.createTournament(tournamentInput);
+      tournamentIdMap[spreadsheetId] = tournament.id;
+
+      console.log(`✅ [${i + 1}] Created tournament: ${tournament.name} with ${Object.values(teamIdMap).length} teams`);
+    } catch (err) {
+      console.error(`❌ [${i + 1}] Failed to create tournament: ${err.message}`);
+    }
+  }
+
+  return tournamentIdMap;
+}
+
+
+async function handleMatchesSheet(rows, matchesService, teamIdMap, tournamentIdMap, pb) {
+  console.log(`📥 Importing ${rows.length} matches...`);
+
+  const tournamentMatchesMap = {};
+
+  for (const [i, row] of rows.entries()) {
+    try {
+      const homeId = teamIdMap[row["Home ID"]];
+      const awayId = teamIdMap[row["Away ID"]];
+      const tournamentId = tournamentIdMap[row["Tournament ID"]];
+
+      if (!homeId || !awayId || !tournamentId) {
+        console.warn(`⚠️ [${i + 1}] Could not find mapping for Home, Away, or Tournament, skipping.`);
+        continue;
+      }
+
+      // --- Ensure the teams are linked to the tournament ---
+      for (const teamId of [homeId, awayId]) {
+        const team = await pb.collection("teams").getOne(teamId, { fields: "tournaments" });
+        const tournaments = team.tournaments || [];
+        if (!tournaments.includes(tournamentId)) {
+          // Add tournament to team
+          await pb.collection("teams").update(teamId, { "tournaments+": [tournamentId] });
+          // Add team to tournament
+          await pb.collection("tournaments").update(tournamentId, { "teams+": [teamId] });
+          console.log(`✅ Linked team ${team.name} to tournament ${tournamentId}`);
+        }
+      }
+
+      // --- Create match ---
+      const data = {
+        tournament: tournamentId,
+        home: homeId,
+        away: awayId,
+        home_cups: Number(row["Home cups"] || 0),
+        away_cups: Number(row["Away cups"] || 0),
+        status: "ended",
+        lid: i+1
+      };
+
+      const match = await matchesService.createMatch(data);
+      console.log(`✅ [${i + 1}] Created match ID: ${match.id}`);
+
+      if (!tournamentMatchesMap[tournamentId]) tournamentMatchesMap[tournamentId] = [];
+      tournamentMatchesMap[tournamentId].push(match.id);
+    } catch (err) {
+      console.error(`❌ [${i + 1}] Failed to create match: ${err.message}`);
+    }
+  }
+
+  // Update each tournament with the created match IDs
+  for (const [tournamentId, matchIds] of Object.entries(tournamentMatchesMap)) {
+    try {
+      await pb.collection("tournaments").update(tournamentId, { "matches+": matchIds });
+      console.log(`✅ Updated tournament ${tournamentId} with ${matchIds.length} matches`);
+    } catch (err) {
+      console.error(`❌ Failed to update tournament ${tournamentId} with matches: ${err.message}`);
+    }
+  }
+}
+
+
+// --- Main Import ---
+export async function importExcel() {
+  const pb = new PocketBase(POCKETBASE_URL);
+  await pb.admins.authWithPassword(ADMIN_EMAIL, ADMIN_PASSWORD);
+
+  const teamsService = createTeamsService(pb);
+  const playersService = createPlayersService(pb);
+  const tournamentsService = createTournamentsService(pb);
+  const matchesService = createMatchesService(pb);
+
+  const workbook = xlsx.readFile(EXCEL_FILE_PATH);
+
+  let teamIdMap  = {};
+  let tournamentIdMap  = {};
+
+  // Process sheets in correct order: Tournaments -> Teams -> Matches
+  const sheetOrder = ["tournament", "tournaments", "teams", "matches"];
+  const processedSheets = new Set();
+
+  for (const sheetNamePattern of sheetOrder) {
+    for (const sheetName of workbook.SheetNames) {
+      if (processedSheets.has(sheetName)) continue;
+      if (sheetName.toLowerCase() !== sheetNamePattern) continue;
+
+      const worksheet = workbook.Sheets[sheetName];
+      const rows = xlsx.utils.sheet_to_json(worksheet);
+
+      console.log(`\n📘 Processing sheet: ${sheetName}`);
+
+      switch (sheetName.toLowerCase()) {
+        case "teams":
+          teamIdMap = await handleTeamsSheet(rows, teamsService, playersService, pb, tournamentIdMap);
+          break;
+        case "tournament":
+        case "tournaments":
+          tournamentIdMap = await handleTournamentSheet(rows, tournamentsService, teamIdMap, pb);
+          break;
+        case "matches":
+          await handleMatchesSheet(rows, matchesService, teamIdMap, tournamentIdMap, pb);
+          break;
+        default:
+          console.log(`⚠️ No handler found for sheet '${sheetName}', skipping.`);
+      }
+
+      processedSheets.add(sheetName);
+    }
+  }
+
+  console.log("\n🎉 All sheets imported successfully!");
+}
+
+// --- Run ---
+importExcel().catch(console.error);