fix(frontend): resolve linting errors and build issues

- Fix unused vars and unescaped entities in Waitlist.tsx
- Remove unused imports in PredictionList.tsx
- Fix explicit any in StakedChart.tsx
- Fix conditional hook usage in checkbox.tsx
- Fix unused id prop in toast.tsx

Author: Sundayabel222

frontend/components/Waitlist.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState, FormEvent } from "react";
+import Link from "next/link";
 
 export default function Waitlist() {
   const [email, setEmail] = useState("");
@@ -39,7 +40,7 @@ export default function Waitlist() {
       setStatus("success");
       setName("");
       setEmail("");
-    } catch (error) {
+    } catch (_error) {
       setStatus("error");
       setErrorMessage("Something went wrong. Please try again.");
     }
@@ -132,23 +133,23 @@ export default function Waitlist() {
               </svg>
             </div>
             <h3 className="text-2xl font-bold text-white">
-              You're on the list!
+              You&apos;re on the list!
             </h3>
             <p className="text-gray-400">
-              We'll notify you when PrediFi launches. Get ready to predict!
+              We&apos;ll notify you when PrediFi launches. Get ready to predict!
             </p>
           </div>
         )}
 
         {/* Footer */}
         <p className="mt-8 text-center text-sm text-gray-500">
           Already have an account?{" "}
-          <a
+          <Link
             href="/login"
             className="text-[#00D9D9] hover:text-[#00c4c4] font-medium transition-colors"
           >
             Sign in
-          </a>
+          </Link>
         </p>
       </div>
     </div>

frontend/components/dashboard/PredictionList.tsx

@@ -3,9 +3,7 @@
 import { useState } from "react";
 import { cn } from "@/lib/utils";
 import { Card, CardContent } from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
 import { ChefHat, ChevronRight, Users, Copy } from "lucide-react";
-import Image from "next/image";
 
 interface Prediction {
     id: string;

frontend/components/dashboard/StakedChart.tsx

@@ -20,14 +20,23 @@ const data = [
     { name: "DEC", value: 60000 },
 ];
 
-const CustomTooltip = ({ active, payload, label }: any) => {
+const CustomTooltip = ({
+    active,
+    payload,
+    label,
+}: {
+    active?: boolean;
+    payload?: { value: number }[];
+    label?: string | number;
+}) => {
     if (active && payload && payload.length) {
+        const value = payload[0].value ?? 0;
         return (
             <div className="bg-zinc-900 border border-white/10 p-2 rounded-lg shadow-xl">
                 <p className="text-zinc-400 text-xs mb-1">{label}</p>
                 <p className="text-white font-bold font-mono">
                     {/* Formatter for currency */}
-                    ${(payload[0].value / 1000).toFixed(0)}k
+                    ${((value as number) / 1000).toFixed(0)}k
                 </p>
             </div>
         );

frontend/components/ui/checkbox.tsx

@@ -31,7 +31,8 @@ const Checkbox = React.forwardRef<
     },
     ref
   ) => {
-    const checkboxId = id || React.useId();
+    const generatedId = React.useId();
+    const checkboxId = id ?? generatedId;
     const isIndeterminate = indeterminate && checked !== true;
 
     return (
@@ -52,8 +53,8 @@ const Checkbox = React.forwardRef<
               error
                 ? `${checkboxId}-error`
                 : helperText
-                ? `${checkboxId}-helper`
-                : undefined
+                  ? `${checkboxId}-helper`
+                  : undefined
             }
             {...props}
           >

frontend/components/ui/toast.tsx

@@ -54,6 +54,7 @@ const Toast = React.forwardRef<HTMLDivElement, ToastProps>(
     return (
       <div
         ref={ref}
+        data-id={id}
         className={cn(toastVariants({ variant }))}
         role="alert"
         aria-live="assertive"