From 238b95937960df5ca5f14f0c4e48d78f35724559 Mon Sep 17 00:00:00 2001
From: Jonathan Samuel <jonathansamuel2k@gmail.com>
Date: Sun, 29 Dec 2024 10:01:55 +0530
Subject: [PATCH 1/2] tournaments: Show type badge

---
 frontend/src/components/Tournaments.js | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/frontend/src/components/Tournaments.js b/frontend/src/components/Tournaments.js
index 6e81a420..cef491bf 100644
--- a/frontend/src/components/Tournaments.js
+++ b/frontend/src/components/Tournaments.js
@@ -30,6 +30,22 @@ const Tournaments = () => {
                 }
                 class="block w-full rounded-lg border border-blue-600 bg-white p-4 shadow dark:border-blue-400 dark:bg-gray-800"
               >
+                <Show when={tournament.event?.type}>
+                  <span class="mr-2 h-fit rounded bg-blue-200 px-2.5 py-0.5 text-sm font-medium text-blue-800 dark:bg-green-900 dark:text-green-300">
+                    <Switch>
+                      <Match when={tournament.event?.type === "MXD"}>
+                        Mixed
+                      </Match>
+                      <Match when={tournament.event?.type === "OPN"}>
+                        Opens
+                      </Match>
+                      <Match when={tournament.event?.type === "WMN"}>
+                        Womens
+                      </Match>
+                    </Switch>
+                  </span>
+                </Show>
+
                 <Switch>
                   <Match when={tournament.status === "REG"}>
                     <span class="h-fit rounded bg-green-200 px-2.5 py-0.5 text-sm font-medium text-green-800 dark:bg-green-900 dark:text-green-300">

From b31c964d5421f93de9d4c11dc9218a20938a1fad Mon Sep 17 00:00:00 2001
From: Jonathan Samuel <jonathansamuel2k@gmail.com>
Date: Sun, 29 Dec 2024 10:51:03 +0530
Subject: [PATCH 2/2] tournaments: Add filters based on type

---
 frontend/src/components/Tournaments.js | 74 +++++++++++++++++++++++++-
 1 file changed, 72 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/Tournaments.js b/frontend/src/components/Tournaments.js
index cef491bf..83fb86a6 100644
--- a/frontend/src/components/Tournaments.js
+++ b/frontend/src/components/Tournaments.js
@@ -1,12 +1,17 @@
 import { A } from "@solidjs/router";
 import { createQuery } from "@tanstack/solid-query";
 import clsx from "clsx";
-import { For, Match, Show, Switch } from "solid-js";
+import { createSignal, For, Match, Show, Switch } from "solid-js";
 
 import { fetchTournaments } from "../queries";
 
 const Tournaments = () => {
   const tournamentsQuery = createQuery(() => ["tournaments"], fetchTournaments);
+
+  const [showMixed, setShowMixed] = createSignal(true);
+  const [showOpens, setShowOpens] = createSignal(true);
+  const [showWomens, setShowWomens] = createSignal(true);
+
   return (
     <div>
       <h1 class="mb-5 text-center">
@@ -14,12 +19,77 @@ const Tournaments = () => {
           Tournaments
         </span>
       </h1>
+
+      <ul class="flex w-full items-center rounded-lg border border-blue-500 bg-white text-sm font-medium text-gray-900 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
+        <li class="w-full border-b-0 border-r border-blue-500 dark:border-gray-600">
+          <div class="flex items-center ps-3">
+            <input
+              id="mixed-checkbox"
+              type="checkbox"
+              value="mixed"
+              checked={showMixed()}
+              onChange={e => setShowMixed(e.target.checked)}
+              class="h-4 w-4 rounded border-gray-300 bg-gray-100 text-blue-600 focus:ring-2 focus:ring-blue-500 dark:border-gray-500 dark:bg-gray-600 dark:ring-offset-gray-700 dark:focus:ring-blue-600 dark:focus:ring-offset-gray-700"
+            />
+            <label
+              for="mixed-checkbox"
+              class="ms-2 w-full py-3 text-sm font-medium text-blue-600 dark:text-gray-300"
+            >
+              Mixed
+            </label>
+          </div>
+        </li>
+        <li class="w-full border-b-0 border-r border-blue-500 dark:border-gray-600">
+          <div class="flex items-center ps-3">
+            <input
+              id="opens-checkbox"
+              type="checkbox"
+              value="mens"
+              checked={showOpens()}
+              onChange={e => setShowOpens(e.target.checked)}
+              class="h-4 w-4 rounded border-gray-300 bg-gray-100 text-blue-600 focus:ring-2 focus:ring-blue-500 dark:border-gray-500 dark:bg-gray-600 dark:ring-offset-gray-700 dark:focus:ring-blue-600 dark:focus:ring-offset-gray-700"
+            />
+            <label
+              for="opens-checkbox"
+              class="ms-2 w-full py-3 text-sm font-medium text-blue-600 dark:text-gray-300"
+            >
+              Opens
+            </label>
+          </div>
+        </li>
+        <li class="w-full border-b-0 border-blue-500 dark:border-gray-600">
+          <div class="flex items-center ps-3">
+            <input
+              id="womens-checkbox"
+              type="checkbox"
+              value="womens"
+              checked={showWomens()}
+              onChange={e => setShowWomens(e.target.checked)}
+              class="h-4 w-4 rounded border-gray-300 bg-gray-100 text-blue-600 focus:ring-2 focus:ring-blue-500 dark:border-gray-500 dark:bg-gray-600 dark:ring-offset-gray-700 dark:focus:ring-blue-600 dark:focus:ring-offset-gray-700"
+            />
+            <label
+              for="womens-checkbox"
+              class="ms-2 w-full py-3 text-sm font-medium text-blue-600 dark:text-gray-300"
+            >
+              Womens
+            </label>
+          </div>
+        </li>
+      </ul>
+
       <div
         class={
           "mt-5 grid grid-cols-1 justify-items-center gap-5 md:grid-cols-2 lg:grid-cols-3 "
         }
       >
-        <For each={tournamentsQuery.data}>
+        <For
+          each={tournamentsQuery.data?.filter(t => {
+            if (t.event?.type === "OPN" && showOpens()) return true;
+            if (t.event?.type === "MXD" && showMixed()) return true;
+            if (t.event?.type === "WMN" && showWomens()) return true;
+            return false;
+          })}
+        >
           {tournament => (
             <Show when={tournament.status !== "DFT"}>
               <A