From 90ad03ba56b803a0f69a0be2776ec98807dd4e3b Mon Sep 17 00:00:00 2001
From: Owen <owenrees.dev@gmail.com>
Date: Fri, 12 Dec 2025 09:35:44 +0100
Subject: [PATCH] allow empty player slots for manual entry

---
 .../(main)/match/components/TeamSelection.tsx | 19 ++++++++++++++-----
 src/app/[locale]/(main)/match/page.tsx        |  2 +-
 src/schemas.ts                                |  6 +++---
 3 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/src/app/[locale]/(main)/match/components/TeamSelection.tsx b/src/app/[locale]/(main)/match/components/TeamSelection.tsx
index f9a40f8..c9724dd 100644
--- a/src/app/[locale]/(main)/match/components/TeamSelection.tsx
+++ b/src/app/[locale]/(main)/match/components/TeamSelection.tsx
@@ -71,15 +71,24 @@ const TeamSelection = ({ name, label, clubOptions, className }: IProps) => {
     fetchPlayers();
   }, [selectedId, name, setTeamsPlayers]);
 
-  const playerOptions =
-    teamsPlayers[name]?.map((player) => ({
+  const playerOptions = [
+    {
+      value: {
+        nrFFE: "",
+        name: "",
+        elo: "",
+      },
+      label: "-- EMPTY PLAYER --",
+    },
+    ...(teamsPlayers[name]?.map((player) => ({
       value: {
         nrFFE: player.nrFFE,
         name: player.name,
         elo: player.elo,
       },
       label: `${player.name} (${player.elo})`,
-    })) || [];
+    })) || []),
+  ];
 
   return (
     <div className={className}>
@@ -122,7 +131,7 @@ const TeamSelection = ({ name, label, clubOptions, className }: IProps) => {
                     instanceId={`${name}-player-${index}`}
                     options={playerOptions}
                     isSearchable
-                    placeholder="Search player..."
+                    placeholder="Search for a player..."
                     onChange={(option) => selectField.onChange(option?.value)}
                     value={playerOptions.find(
                       (op) => op.value === selectField.value,
@@ -152,7 +161,7 @@ const TeamSelection = ({ name, label, clubOptions, className }: IProps) => {
         teamsPlayers[name]?.length > 0 && (
           <button
             type="button"
-            onClick={() => append({ nrFFE: "", name: "", elo: 0 })}
+            onClick={() => append({ nrFFE: "", name: "", elo: "" })}
             className="flex items-center gap-2 text-sm font-medium text-blue-600 hover:text-blue-800"
           >
             <FaPlus />
diff --git a/src/app/[locale]/(main)/match/page.tsx b/src/app/[locale]/(main)/match/page.tsx
index 00898dd..8f0cea7 100644
--- a/src/app/[locale]/(main)/match/page.tsx
+++ b/src/app/[locale]/(main)/match/page.tsx
@@ -46,7 +46,7 @@ export default async function Match() {
   )();
 
   return (
-    <section className="grid place-items-center bg-white pb-20 dark:bg-gray-800">
+    <section className="grid place-items-center bg-white p-2 pb-20 dark:bg-gray-800">
       <div className="mx-auto max-w-screen-md px-4 py-8 lg:py-16">
         <h2 className="mb-4 text-center text-4xl font-extrabold tracking-tight text-gray-900 dark:text-white">
           Match
diff --git a/src/schemas.ts b/src/schemas.ts
index 716e6cf..edcb85e 100644
--- a/src/schemas.ts
+++ b/src/schemas.ts
@@ -65,9 +65,9 @@ export const fetchClubPlayersSchema = z.object({
 });
 
 const matchPlayerSchema = z.object({
-  name: z.string(),
-  elo: z.string(),
-  nrFFE: z.string(),
+  name: z.string().optional(),
+  elo: z.string().optional(),
+  nrFFE: z.string().optional(),
 });
 
 export const matchSchema = z.object({