feat(test): add functionality for drill, hard test module testing

src/pages/student/targeted-practice/page.tsx

@@ -5,51 +5,14 @@ import { useAuthStore } from "../../../stores/authStore";
 import { Loader2 } from "lucide-react";
 import { motion, AnimatePresence } from "framer-motion";
 import { slideVariants } from "../../../lib/utils";
-import { Badge } from "../../../components/ui/badge";
+import { ChoiceCard } from "../../../components/ChoiceCard";
 import { useAuthToken } from "../../../hooks/useAuthToken";
-import type {
-  TargetedSessionRequest,
-  TargetedSessionResponse,
-} from "../../../types/session";
 
 import { useExamConfigStore } from "../../../stores/useExamConfigStore";
-import { replace, useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 
 type Step = "topic" | "difficulty" | "duration" | "review";
 
-const ChoiceCard = ({
-  label,
-  selected,
-  subLabel,
-  section,
-  onClick,
-}: {
-  label: string;
-  selected?: boolean;
-  subLabel?: string;
-  section?: string;
-  onClick: () => void;
-}) => (
-  <button
-    onClick={onClick}
-    className={`rounded-2xl border p-4 text-left transition flex flex-col
-      ${selected ? "border-purple-600 bg-purple-50" : "hover:border-gray-300"}`}
-  >
-    <div className="flex justify-between">
-      <span className="font-satoshi-bold text-lg">{label}</span>
-      {section && (
-        <Badge
-          variant={"secondary"}
-          className={`font-satoshi text-sm ${section === "EBRW" ? "bg-blue-400 text-blue-100" : "bg-red-400 text-red-100"}`}
-        >
-          {section}
-        </Badge>
-      )}
-    </div>
-    {subLabel && <span className="font-satoshi text-md">{subLabel}</span>}
-  </button>
-);
-
 export const TargetedPractice = () => {
   const navigate = useNavigate();
   const {
@@ -129,7 +92,13 @@ export const TargetedPractice = () => {
 
   return (
     <main className="relative min-h-screen max-w-7xl mx-auto px-8 sm:px-6 lg:px-8 py-8 space-y-4">
-      <h1 className="font-satoshi-bold text-3xl">Targeted Practice</h1>
+      <header className="space-y-2">
+        <h1 className="font-satoshi-bold text-3xl">Targeted Practice</h1>
+        <p className="font-satoshi text-md text-gray-500">
+          Focus on what really matters. Define your own test and get to
+          practicing what you really need.
+        </p>
+      </header>
 
       <div className="relative overflow-hidden">
         <AnimatePresence mode="wait">
@@ -183,7 +152,7 @@ export const TargetedPractice = () => {
               <button
                 disabled={selectedTopics.length === 0}
                 onClick={() => {
-                  setTopics(selectedTopics.map((t) => t.id)); // ✅ STORE
+                  // ✅ STORE
                   storeTopics(selectedTopics.map((t) => t.id)); // ✅ STORE
                   setMode("TARGETED"); // ✅ STORE
                   setQuestionCount(7); // ✅ STORE