Pit scouting

apps/scouting/backend/build.ts

@@ -2,7 +2,7 @@
 import { build, context } from "esbuild";
 import { spawn } from "child_process";
 
-const isDev = process.env.NODE_ENV === "DEV";
+const isDev = process.env.NODE_ENV !== "DEV";
 
 const bundlePath = "dist/bundle.js";
 

apps/scouting/backend/src/routes/index.ts

@@ -12,6 +12,7 @@ import { compareRouter } from "./compare-router";
 import { tinderRouter } from "./tinder-router";
 import { superScoutRouter } from "./super-scout-router";
 import { picklistRouter } from "./picklist-router";
+import { pitScoutRouter } from "./pit-scout-router";
 
 export const apiRouter = Router();
 
@@ -26,6 +27,7 @@ apiRouter.use("/compare", compareRouter);
 apiRouter.use("/tinder", tinderRouter);
 apiRouter.use("/super", superScoutRouter);
 apiRouter.use("/picklist", picklistRouter);
+apiRouter.use("/pit", pitScoutRouter);
 
 apiRouter.get("/health", (req, res) => {
   res.status(StatusCodes.OK).send({ message: "Healthy!" });

apps/scouting/backend/src/routes/pit-scout-router.ts

@@ -0,0 +1,49 @@
+//בס"ד
+
+import { Router } from "express";
+import { flow, pipe } from "fp-ts/lib/function";
+import { getDb } from "../middleware/db";
+import { bind, bindTo, fromEither, map } from "fp-ts/lib/TaskEither";
+import {
+  createBodyVerificationPipe,
+  flatTryCatch,
+  foldResponse,
+} from "@repo/flow-utils";
+import { right as rightEither } from "fp-ts/lib/Either";
+import { mongofyQuery } from "@repo/flow-utils";
+import { PitScout, pitScoutCodec } from "@repo/scouting_types";
+import { StatusCodes } from "http-status-codes";
+
+export const pitScoutRouter = Router();
+
+export const getPitCollection = flow(
+  getDb,
+  map((db) => db.collection<PitScout>("pit")),
+);
+
+pitScoutRouter.post("/", async (req, res) => {
+  await pipe(
+    rightEither(req),
+    createBodyVerificationPipe(pitScoutCodec),
+    fromEither,
+    bindTo("pitScout"),
+    bind("collection", getPitCollection),
+    map(({ pitScout, collection }) => collection.insertOne(pitScout)),
+    foldResponse(res),
+  )();
+});
+
+pitScoutRouter.get("/", async (req, res) => {
+  await flow(
+    getPitCollection,
+    flatTryCatch(
+      (collection) => collection.find(mongofyQuery(req.query)).toArray(),
+      () => ({
+        status: StatusCodes.INTERNAL_SERVER_ERROR,
+        reason: "Error Inserting Forms To Collection ",
+      }),
+    ),
+    bindTo("forms"),
+    foldResponse(res),
+  )();
+});

apps/scouting/frontend/src/App.tsx

@@ -13,6 +13,7 @@ import { CURRENT_COMPETITION } from "@repo/scouting_types";
 import { StrategyNavigationBar } from "./strategy/components/StrategyNavBar";
 import { SuperScoutTab } from "./strategy/tabs/super-scout/SuperScoutTab";
 import { Tinder } from "./strategy/tabs/Tinder";
+import { PitScoutTab } from "./strategy/tabs/pit-scout/PitScoutTab";
 
 const App: FC = () => {
   return (
@@ -30,6 +31,7 @@ const App: FC = () => {
         <Route path="compare" element={<CompareTwo />} />
         <Route path="super" element={<SuperScoutTab />} />
         <Route path="tinder" element={<Tinder />} />
+        <Route path="pit" element={<PitScoutTab />} />
       </Route>
       <Route path="*" element={<ScoutedMatches />} />
     </Routes>

apps/scouting/frontend/src/strategy/components/MetricsChart.tsx

@@ -6,7 +6,7 @@ import type { TeamData } from "@repo/scouting_types";
 const NUMBER_OF_DIGITS = 2;
 const Metric: FC<{
   name: string;
-  value: number;
+  value?: number;
   colors: string;
   onClick?: () => void;
 }> = ({ name, value, colors, onClick }) => (
@@ -19,7 +19,7 @@ const Metric: FC<{
       {name}
     </span>
     <span className="text-3xl font-black">
-      {value.toFixed(NUMBER_OF_DIGITS)}
+      {value?.toFixed(NUMBER_OF_DIGITS)}
     </span>
   </div>
 );

apps/scouting/frontend/src/strategy/tabs/pit-scout/BooleanStats.tsx

@@ -0,0 +1,53 @@
+//בס"ד
+
+import type { FC } from "react";
+import type {
+  PitScout,
+  PitScoutBoolean,
+  PitScoutBooleanKey,
+  PitScoutBooleanMetric,
+} from "@repo/scouting_types";
+
+interface BooleanStatsProps {
+  statKey: PitScoutBooleanKey;
+  label: string;
+  form: PitScout;
+  setBoolForm: (key: PitScoutBooleanKey, value: PitScoutBooleanMetric) => void;
+}
+
+export const BooleanStats: FC<BooleanStatsProps> = ({
+  statKey,
+  label,
+  form,
+  setBoolForm,
+}) => {
+  return (
+    <div key={statKey} className="flex items-center justify-between group">
+      <span className="text-sm font-medium text-slate-300 group-hover:text-white transition-colors">
+        {label}
+      </span>
+      <div className="flex gap-2 bg-slate-900/80 p-1 rounded-xl border border-white/5">
+        <button
+          onClick={() => setBoolForm(statKey, true)}
+          className={`px-4 py-1.5 rounded-lg text-[10px] font-black uppercase transition-all ${
+            form.booleanMetrics[statKey] === true
+              ? "bg-emerald-500 text-slate-950 shadow-[0_0_10px_rgba(16,185,129,0.2)]"
+              : "text-slate-500 hover:text-slate-300"
+          }`}
+        >
+          Yes
+        </button>
+        <button
+          onClick={() => setBoolForm(statKey, false)}
+          className={`px-4 py-1.5 rounded-lg text-[10px] font-black uppercase transition-all ${
+            form.booleanMetrics[statKey] === false
+              ? "bg-rose-500 text-slate-950 shadow-[0_0_10px_rgba(244,63,94,0.2)]"
+              : "text-slate-500 hover:text-slate-300"
+          }`}
+        >
+          No
+        </button>
+      </div>
+    </div>
+  );
+};

apps/scouting/frontend/src/strategy/tabs/pit-scout/NumberStats.tsx

@@ -0,0 +1,44 @@
+//בס"ד
+
+import type {
+  PitScout,
+  PitScoutNumberKey,
+  SuperScout,
+} from "@repo/scouting_types";
+import type { FC } from "react";
+
+interface NumberStatsProps {
+  statKey: PitScoutNumberKey;
+  label: string;
+  placeholder: string;
+  form: PitScout;
+  setNumberForm: (key: PitScoutNumberKey, value: number) => void;
+}
+
+export const NumberStats: FC<NumberStatsProps> = ({
+  statKey,
+  label,
+  placeholder,
+  form,
+  setNumberForm,
+}) => {
+  return (
+    <div
+      key={statKey}
+      className="bg-slate-800/40 border border-white/5 p-5 rounded-2xl"
+    >
+      <label className="text-[10px] font-bold uppercase text-slate-500 block mb-2">
+        {label}
+      </label>
+      <input
+        type="number"
+        className="w-full bg-slate-900/50 border border-white/10 rounded-xl px-4 py-2.5 outline-none focus:border-amber-500/50 transition-all text-sm font-medium"
+        value={form.numberMetrics[statKey] ?? ""}
+        onChange={(event) =>
+          setNumberForm(statKey, parseFloat(event.target.value))
+        }
+        placeholder={placeholder}
+      />
+    </div>
+  );
+};

apps/scouting/frontend/src/strategy/tabs/pit-scout/PitScoutTab.tsx

@@ -0,0 +1,191 @@
+//בס"ד
+
+import { useState, type FC } from "react";
+import type {
+  PitScout,
+  PitScoutBoolean,
+  PitScoutBooleanKey,
+  PitScoutBooleanMetric,
+  PitScoutNumber,
+  PitScoutNumberKey,
+} from "@repo/scouting_types";
+import { NumberStats } from "./NumberStats";
+import { BooleanStats } from "./BooleanStats";
+
+const NUMBER_FIELDS: {
+  statKey: PitScoutNumberKey;
+  label: string;
+  placeholder: string;
+}[] = [
+  {
+    statKey: "robotWeight",
+    label: "Robot Weight (lbs)",
+    placeholder: "e.g. 120",
+  },
+  { statKey: "ballCapacity", label: "Ball Capacity", placeholder: "e.g. 50" },
+];
+
+const PIT_SCOUT_URL = "/api/v1/pit/";
+
+const BOOLEAN_FIELDS: { statKey: PitScoutBooleanKey; label: string }[] = [
+  { statKey: "hasTurret", label: "Has turret?" },
+  { statKey: "canPassTrench", label: "Can pass trench?" },
+  { statKey: "canPassBumpEasily", label: "Can pass bump easily?" },
+];
+
+const initialState: PitScout = {
+  teamNumber: 0,
+  numberMetrics: { robotWeight: undefined, ballCapacity: undefined },
+  booleanMetrics: {
+    hasTurret: undefined,
+    canPassTrench: undefined,
+    canPassBumpEasily: undefined,
+  },
+  extraInfo: undefined,
+};
+
+export const PitScoutTab: FC = () => {
+  const [form, setForm] = useState<PitScout>(initialState);
+  const [status, setStatus] = useState<
+    "idle" | "loading" | "success" | "error"
+  >("idle");
+  const [errorMsg, setErrorMsg] = useState("");
+
+  const setNumberForm = (key: PitScoutNumberKey, value: number) =>
+    setForm((form) => ({
+      ...form,
+      numberMetrics: { ...form.numberMetrics, [key]: value || undefined },
+    }));
+  const setBoolForm = (key: PitScoutBooleanKey, value: PitScoutBooleanMetric) =>
+    setForm((form) => ({
+      ...form,
+      booleanMetrics: {
+        ...form.booleanMetrics,
+        [key]: form.booleanMetrics[key] === value ? undefined : value,
+      },
+    }));
+
+  const setExtraForm = (value: string) =>
+    setForm((form) => ({ ...form, extraInfo: value || undefined }));
+
+  const handleSubmit = async () => {
+    if (!form.teamNumber) {
+      setStatus("error");
+      setErrorMsg("Team number is required.");
+      return;
+    }
+
+    setStatus("loading");
+    try {
+      const res = await fetch(PIT_SCOUT_URL, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(form),
+      });
+
+      if (res.ok) {
+        setStatus("success");
+        setForm(initialState);
+      } else {
+        const text = await res.text();
+        setStatus("error");
+        setErrorMsg(text || "Submission failed.");
+      }
+    } catch (error) {
+      setStatus("error");
+      setErrorMsg(error instanceof Error ? error.message : "Network error.");
+    }
+  };
+
+  return (
+    <div className="flex flex-col items-center gap-6 max-w-2xl mx-auto pb-12 text-slate-200">
+      <div className="w-full bg-slate-800/40 border border-white/5 p-6 rounded-2xl backdrop-blur-sm shadow-xl">
+        <h2 className="text-xs font-black uppercase tracking-[0.2em] text-amber-500 mb-4">
+          Team Identification
+        </h2>
+        <div className="flex flex-col gap-2">
+          <label className="text-[10px] font-bold uppercase text-slate-500 ml-1">
+            Team Number
+          </label>
+          <input
+            type="number"
+            className="bg-slate-900/50 border border-white/10 rounded-xl px-4 py-3 text-xl font-mono focus:border-amber-500/50 outline-none transition-all placeholder:text-slate-700"
+            value={form.teamNumber || ""}
+            onChange={(event) =>
+              setForm((form) => ({
+                ...form,
+                teamNumber: parseInt(event.target.value) || 0,
+              }))
+            }
+            placeholder="0000"
+          />
+        </div>
+      </div>
+
+      <div className="w-full grid grid-cols-1 md:grid-cols-2 gap-4">
+        {NUMBER_FIELDS.map(({ statKey: key, label, placeholder }) => (
+          <NumberStats
+            statKey={key}
+            label={label}
+            placeholder={placeholder}
+            form={form}
+            setNumberForm={setNumberForm}
+          />
+        ))}
+      </div>
+
+      <div className="w-full bg-slate-800/40 border border-white/5 p-6 rounded-2xl">
+        <h2 className="text-xs font-black uppercase tracking-[0.2em] text-amber-500 mb-6">
+          Mechanical Capabilities
+        </h2>
+        <div className="grid gap-4">
+          {BOOLEAN_FIELDS.map(({ statKey: key, label }) => (
+            <BooleanStats
+              statKey={key}
+              label={label}
+              form={form}
+              setBoolForm={setBoolForm}
+            />
+          ))}
+        </div>
+      </div>
+
+      <div className="w-full bg-slate-800/40 border border-white/5 p-6 rounded-2xl">
+        <h2 className="text-xs font-black uppercase tracking-[0.2em] text-amber-500 mb-4">
+          extra information
+        </h2>
+        <textarea
+          className="w-full bg-slate-900/50 border border-white/10 rounded-xl p-4 min-h-[120px] outline-none focus:border-amber-500/50 transition-all text-sm resize-none placeholder:text-slate-700"
+          value={form.extraInfo ?? ""}
+          onChange={(event) => setExtraForm(event.target.value)}
+          placeholder="Enter extra observations..."
+        />
+      </div>
+
+      <div className="w-full flex flex-col items-center gap-4 mt-4">
+        <button
+          onClick={handleSubmit}
+          disabled={status === "loading"}
+          className="w-full max-w-xs py-4 bg-emerald-500 text-slate-950 text-xs font-black uppercase tracking-widest rounded-xl
+            disabled:opacity-40 hover:bg-emerald-400 transition-all active:scale-95
+            shadow-lg shadow-emerald-900/20"
+        >
+          {status === "loading" ? "Transmitting..." : "Submit"}
+        </button>
+
+        {status === "success" && (
+          <div className="flex items-center gap-2 text-emerald-400 animate-pulse">
+            <span className="text-[10px] font-black tracking-widest uppercase">
+              ✓ Data Synced Successfully
+            </span>
+          </div>
+        )}
+        {status === "error" && (
+          <div className="text-rose-400 text-[10px] font-black tracking-widest uppercase bg-rose-500/10 border border-rose-500/20 px-4 py-2 rounded-lg">
+            ⚠ ERROR: {errorMsg}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};