fixed type errors

src/components/SessionForm/HitSearchCard.tsx

@@ -6,9 +6,8 @@ import { useState } from "react";
 
 const SessionCard = () => {
   const [searchTerm, setSearchTerm] = useState("");
-  const { state, disptach } = useAlertHitContext();
+  const { dispatch } = useAlertHitContext();
 
-  console.log(state);
   return (
     <Card>
       <CardHeader title={"Hit Search"} />
@@ -27,16 +26,29 @@ const SessionCard = () => {
               type="text"
               className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
               placeholder="Enter VRM"
+              value={searchTerm}
               onChange={(e) => setSearchTerm(e.target.value)}
             />
           </div>
         </FormGroup>
         <button
           className="bg-[#26B170] text-white px-4 py-2 rounded hover:bg-green-700 transition w-full max-w-md"
-          onClick={() => disptach({ type: "SEARCH", payload: searchTerm })}
+          onClick={() => dispatch({ type: "SEARCH", payload: searchTerm })}
+          disabled={searchTerm.trim().length < 2}
         >
           Search Hit list
         </button>
+        {searchTerm && (
+          <button
+            className="bg-gray-300 text-gray-900 px-4 py-2 rounded hover:bg-gray-700 transition w-full max-w-md"
+            onClick={() => {
+              setSearchTerm("");
+              dispatch({ type: "SEARCH", payload: "" });
+            }}
+          >
+            Clear Search
+          </button>
+        )}
       </div>
     </Card>
   );

src/components/SessionForm/SessionCard.tsx

@@ -2,22 +2,29 @@ import Card from "../UI/Card";
 import CardHeader from "../UI/CardHeader";
 
 const SessionCard = () => {
+  function onStart(): void {
+    throw new Error("Function not implemented.");
+  }
+
   return (
     <Card>
-      <CardHeader title={"Session"} />
+      <CardHeader title="Session" />
       <div className="flex flex-col gap-4">
         <button
           className="bg-[#26B170] text-white px-4 py-2 rounded hover:bg-green-700 transition w-full max-w-md"
-          //onClick={() => handleModemSave(apn, username, password, authType)}
+          onClick={onStart}
         >
           Start Session
         </button>
-        <h2 className="text-white mb-2">Number of Vehicles: </h2>
-        <h2 className="text-white mb-2">Vehicles without Tax: </h2>
-        <h2 className="text-white mb-2">Vehicles without MOT: </h2>
-        <h2 className="text-white mb-2">Vehicles with NPED Cat A: </h2>
-        <h2 className="text-white mb-2">Vehicles with NPED Cat B: </h2>
-        <h2 className="text-white mb-2">Vehicles with NPED Cat C: </h2>
+
+        <ul className="text-white space-y-2">
+          <li>Number of Vehicles: </li>
+          <li>Vehicles without Tax: </li>
+          <li>Vehicles without MOT: </li>
+          <li>Vehicles with NPED Cat A: </li>
+          <li>Vehicles with NPED Cat B: </li>
+          <li>Vehicles with NPED Cat C: </li>
+        </ul>
       </div>
     </Card>
   );