pre match

apps/scouting/frontend/src/PreMatchTab.tsx

@@ -0,0 +1,93 @@
+//בס"ד
+import React, { type FC, type Dispatch, type SetStateAction } from "react";
+import type { TabProps } from "./scouter/pages/ScoutMatch";
+const MATCH_NUMBER_MAX = 127;
+const TEAM_NUMBER_MAX = 16383;
+const PreMatchTab: FC<TabProps> = ({ currentForm: form, setForm }) => {
+  return (
+    <div className="flex flex-col items-center justify-center w-full h-full gap-3  mx-auto">
+      <div className="w-[480px] border-2 border-green-500 rounded-lg p-5 flex flex-col gap-3 py-0 h-15">
+        <div className="flex w-[460px] justify-between items-center text-green-500 pr-[4px] h-50">
+          <div>Scouter Name:</div>
+          <input
+            type="text"
+            className="inputStyle w-[340px] h-full"
+            value={form.scouterName}
+            onChange={(event) =>
+              {setForm((prev) => ({
+                ...prev,
+                scouterName: event.target.value,
+              }))}
+            }
+          />
+        </div>
+      </div>
+      <div className="w-[480px] border-2 border-green-500 rounded-lg p-5 flex flex-col gap-3 py-0 h-15">
+        <div className="flex w-[460px] justify-between items-center text-green-500 pr-[4px] h-30">
+          <div>Match Number:</div>
+          <input
+            type="number"
+            className="inputStyle w-[335px] h-full"
+            min={0}
+            max={MATCH_NUMBER_MAX}
+            value={form.match.number}
+            onChange={(event) =>
+              {setForm((prev) => ({
+                ...prev,
+                match: {
+                  ...prev.match,
+                  number: Number(event.target.value),
+                },
+              }))}
+            }
+          />
+        </div>
+      </div>
+      <div className="w-[480px] border-2 border-green-500 rounded-lg p-5 flex flex-col gap-3 py-0 h-15">
+        <div className="flex w-[460px] justify-between items-center text-green-500 pr-[4px] h-70">
+          <div>Team Number:</div>
+          <input
+            type="number"
+            className="inputStyle w-[340px] h-full"
+            min={0}
+            max={TEAM_NUMBER_MAX}
+            value={form.teamNumber}
+            onChange={(event) =>
+              {setForm((prev) => ({
+                ...prev,
+                teamNumber: Number(event.target.value),
+              }))
+            }}
+          />
+        </div>
+      </div>
+      <div className="w-[480px] border-2 border-green-500 rounded-lg p-5 flex flex-col gap-3 py-0 h-15">
+        <div className="flex w-[460px] justify-between items-center text-green-500 pr-[4px] h-70">
+          <div>Match Type:</div>
+          <select
+            className="inputStyle w-[363px] h-full"
+            value={form.match.type}
+            onChange={(event) =>
+              {setForm((prev) => ({
+                ...prev,
+                match: {
+                  ...prev.match,
+                  type: event.target.value as
+                    | "practice"
+                    | "qualification"
+                    | "playoff",
+                },
+              }))
+            }}
+          >
+            <option value="practice">Practice</option>
+            <option value="qualification">Qualification</option>
+            <option value="playoff">Playoff</option>
+          </select>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export { PreMatchTab };

apps/scouting/frontend/src/index.css

@@ -112,7 +112,7 @@ button:focus-visible {
       portrait:rotate-90 portrait:origin-top-left;
   }
   .highlighted-tab {
-    @apply bg-linear-to-r from-emerald-500 to-emerald-600 
+    @apply bg-linear-to-r from-green-500 to-green-600 
     text-black shadow-[0_0_20px_rgba(34,197,94,0.6)];
   }
   .unhighlighted-tab {

apps/scouting/frontend/src/scouter/pages/ScoutMatch.tsx

@@ -19,21 +19,21 @@ import { PostMatchTab } from "./tabs/PostMatchTab";
 import { useNavigate } from "react-router-dom";
 import { AutoTab } from "./tabs/AutoTab";
 import { ClimbTab } from "./tabs/ClimbTab";
+import { PreMatchTab } from "../../PreMatchTab";
 export interface TabProps {
   setForm: Dispatch<SetStateAction<ScoutingForm>>;
   currentForm: ScoutingForm;
   alliance: Alliance;
   originTime: number;
 }
-
 interface Tab {
   name: string;
   Component: FC<TabProps>;
 }
 const TABS: Tab[] = [
   {
     name: "Pre",
-    Component: () => <div className="p-4">Pre Match</div>,
+    Component: PreMatchTab,
   },
   { name: "Auto", Component: AutoTab },
   {
@@ -81,27 +81,22 @@ const TABS: Tab[] = [
     Component: PostMatchTab,
   },
 ];
-
 interface SideBarProps {
   setActiveTab: Dispatch<SetStateAction<number>>;
   activeTabIndex: number;
 }
-
 const ONE_ARRAY_ELEMENT = 1;
 const MOVEMENT_AMOUNT = 1;
 const STARTING_TAB_INDEX = 0;
-
 const SideBar: FC<SideBarProps> = ({ setActiveTab, activeTabIndex }) => {
   const activeTabRef = useRef<HTMLButtonElement | null>(null);
   const navigate = useNavigate();
-
   const goToPrev = () => {
     setActiveTab((prev) => prev - MOVEMENT_AMOUNT);
   };
   const goToNext = () => {
     setActiveTab((prev) => prev + MOVEMENT_AMOUNT);
   };
-
   useEffect(() => {
     if (activeTabRef.current) {
       activeTabRef.current.scrollIntoView({
@@ -110,7 +105,6 @@ const SideBar: FC<SideBarProps> = ({ setActiveTab, activeTabIndex }) => {
       });
     }
   }, [activeTabIndex]);
-
   return (
     <div className="relative flex flex-col pr-1 p-4 max-w-37.5 max-h-screen">
       <div className="w-full">
@@ -122,7 +116,6 @@ const SideBar: FC<SideBarProps> = ({ setActiveTab, activeTabIndex }) => {
         >
           Back
         </button>
-
         <button
           onClick={goToPrev}
           disabled={activeTabIndex === STARTING_TAB_INDEX}
@@ -173,23 +166,19 @@ const SideBar: FC<SideBarProps> = ({ setActiveTab, activeTabIndex }) => {
     </div>
   );
 };
-
 export const createNewScoutingForm = (): ScoutingForm =>
   JSON.parse(JSON.stringify(defaultScoutForm));
-
 export const ScoutMatch: FC = () => {
   const [scoutingForm, setScoutingForm] = useLocalStorage(
     "form",
     createNewScoutingForm(),
   );
   const [activeTabIndex, setActiveTab] = useState(STARTING_TAB_INDEX);
-
   const originTime = useMemo(() => Date.now(), []);
   const CurrentTab = useMemo(
     () => TABS[activeTabIndex].Component,
     [activeTabIndex],
   );
-
   return (
     <div
       className="max-h-screen bg-black p-4 md:p-6 flex items-center justify-center
@@ -201,19 +190,18 @@ export const ScoutMatch: FC = () => {
        rounded-2xl shadow-[0_0_30px_rgba(34,197,94,0.3)] overflow-hidden h-[90vh] relative"
       >
         <SideBar setActiveTab={setActiveTab} activeTabIndex={activeTabIndex} />
-
         <div className="flex-1 flex flex-col overflow-hidden p-2 relative z-10">
           <div
             className="flex-1 min-h-0 text-green-100 overflow-hidden pr-2
            bg-black/40 rounded-xl p-3 sm:p-4 lg:p-6 border border-green-500/20 shadow-inner
             animate-in fade-in slide-in-from-right-4 duration-300"
           >
-            <CurrentTab
-              setForm={setScoutingForm}
-              alliance="red"
-              originTime={originTime}
-              currentForm={scoutingForm}
-            />
+              <CurrentTab
+                setForm={setScoutingForm}
+                currentForm={scoutingForm}
+                alliance="red"
+                originTime={originTime}
+              />
           </div>
         </div>
       </div>

apps/template/frontend/src/App.tsx

@@ -33,4 +33,4 @@ const App: FC = () => {
   );
 };
 
-export default App;
+export default App;

package.json

@@ -41,13 +41,15 @@
   "dependencies": {
     "@radix-ui/react-slider": "^1.3.6",
     "@tailwindcss/vite": "^4.1.17",
+    "@zxing/browser": "^0.1.5",
     "axios": "^1.13.2",
     "dotenv": "^17.2.3",
     "dotenv-cli": "^11.0.0",
     "eslint-plugin-bsd": "^1.0.0",
     "eslint-plugin-react": "^7.37.5",
     "express": "^5.1.0",
     "fp-ts": "^2.16.11",
+    "html5-qrcode": "^2.3.8",
     "http-status-codes": "^2.3.0",
     "io-ts": "^2.2.22",
     "is-odd": "^3.0.1",