added nped list functionality

src/components/CameraSettings/CameraSettingFields.tsx

@@ -26,7 +26,6 @@ const CameraSettingFields = () => {
   const handleSubmit = (values: CameraSettingValues) => {
     // post values to endpoint
     toast("Settings Saved");
-    console.log(values);
   };
 
   return (

src/components/SettingForms/BearerType/BearerTypeFields.tsx

@@ -8,7 +8,6 @@ export const ValuesComponent = () => {
 
 const BearerTypeFields = () => {
   const { values } = useFormikContext();
-  console.log(values);
 
   return (
     <div className="flex flex-col space-y-4">

src/components/SettingForms/NPED/NPEDCard.tsx

@@ -1,11 +1,8 @@
 import Card from "../../UI/Card";
 import CardHeader from "../../UI/CardHeader";
 import NPEDFields from "./NPEDFields";
-import { useNPEDContext } from "../../../context/NPEDUserContext";
 
 const NPEDCard = () => {
-  const { user } = useNPEDContext();
-  console.log(user);
   return (
     <Card>
       <CardHeader title={"NPED Config"} />

src/components/SettingForms/NPED/NPEDFields.tsx

@@ -5,22 +5,30 @@ import { useNPEDAuth } from "../../../hooks/useNPEDAuth";
 import { toast } from "sonner";
 
 const NPEDFields = () => {
-  const { signIn } = useNPEDAuth();
+  const { signIn, user, signOut } = useNPEDAuth();
 
-  const initialValues = {
-    username: "",
-    password: "",
-    clientId: "",
-    frontId: "NPEDFront",
-    rearId: "NPEDRear",
-  };
+  const initialValues = user
+    ? {
+        username: user.propUsername.value,
+        password: "",
+        clientId: user.propClientID.value,
+        frontId: "NPED",
+        rearId: "NPED",
+      }
+    : {
+        username: "",
+        password: "",
+        clientId: "",
+        frontId: "NPED",
+        rearId: "NPED",
+      };
 
   const handleSubmit = (values: NPEDFieldType) => {
     const valuesToSend = {
       ...values,
     };
     signIn(valuesToSend);
-    toast("Signed in successfully");
+    toast.success("Signed in successfully");
   };
 
   const validateValues = (values: NPEDFieldType) => {
@@ -31,6 +39,10 @@ const NPEDFields = () => {
     return errors;
   };
 
+  const handleLogoutClick = () => {
+    signOut();
+  };
+
   return (
     <Formik
       initialValues={initialValues}
@@ -84,12 +96,22 @@ const NPEDFields = () => {
               className="p-1.5 border border-gray-400 rounded-lg"
             />
           </FormGroup>
-          <button
-            type="submit"
-            className="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
-          >
-            Login
-          </button>
+          {!user?.propClientID?.value ? (
+            <button
+              type="submit"
+              className="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5 hover:cursor-pointer"
+            >
+              Login
+            </button>
+          ) : (
+            <button
+              type="button"
+              className="w-1/4  border-red-700 bg-red-800 text-white font-small rounded-lg text-sm px-2 py-2.5 hover:cursor-pointer"
+              onClick={handleLogoutClick}
+            >
+              Logout
+            </button>
+          )}
         </Form>
       )}
     </Formik>

src/components/SightingOverview/SightingOverview.tsx

@@ -23,13 +23,14 @@ const SightingOverview = () => {
     setOverlayMode((m) => ((m + 1) % 3) as 0 | 1 | 2);
   }, []);
 
-  const { effectiveSelected, side, mostRecent, noSighting } =
+  const { effectiveSelected, side, mostRecent, noSighting, isPending } =
     useSightingFeedContext();
 
   useOverviewOverlay(mostRecent, overlayMode, imgRef, canvasRef);
 
   const { sync } = useHiDPICanvas(imgRef, canvasRef);
-  if (noSighting) return <p>loading</p>;
+
+  if (noSighting || isPending) return <p>loading</p>;
   return (
     <div className="mt-2 grid gap-3">
       <div className="inline-block w-[90%] mx-auto" {...handlers}>

src/components/SightingsWidget/SightingWidget.tsx

@@ -50,11 +50,12 @@ export default function SightingHistoryWidget({
         {/* Rows */}
         <div className="flex flex-col">
           {rows?.map((obj, idx) => {
+            console.log(obj);
+            const isNPEDHit = obj?.metadata?.npedJSON?.status_code === 201;
             const isSelected = obj?.ref === selectedRef;
             const motionAway = (obj?.motion ?? "").toUpperCase() === "AWAY";
             const primaryIsColour = obj?.srcCam === 1;
             const secondaryMissing = (obj?.vrmSecondary ?? "") === "";
-
             return (
               <div
                 key={idx}
@@ -80,7 +81,11 @@ export default function SightingHistoryWidget({
                 </div>
 
                 {/* Patch row */}
-                <div className="flex items-center gap-3 mt-2">
+                <div
+                  className={`flex items-center gap-3 mt-2
+                  ${isNPEDHit ? "border border-red-600" : ""}
+                  `}
+                >
                   <div
                     className={`border p-1 ${
                       primaryIsColour ? "" : "ring-2 ring-lime-400"

src/components/Skeleton/SkeletonBox.tsx

@@ -0,0 +1,11 @@
+import { clsx } from "clsx";
+
+type SkeletonBoxProps = {
+  className: string;
+};
+
+const SkeletonBox = ({ className }: SkeletonBoxProps) => {
+  return <div className={clsx(...className)}></div>;
+};
+
+export default SkeletonBox;