feat(targeted): add targeted practice functionality

feat(analytics); add analytics page
This commit is contained in:
shafin-r
2026-02-05 15:07:24 +06:00
parent 2ac88835f9
commit 903653a212
20 changed files with 2018 additions and 35 deletions

View File

@ -6,7 +6,14 @@ import {
TabsContent,
} from "../../components/ui/tabs";
import { useAuthStore } from "../../stores/authStore";
import { CheckCircle, Search } from "lucide-react";
import {
CheckCircle,
DecimalsArrowRight,
DraftingCompass,
List,
Search,
SquarePen,
} from "lucide-react";
import { api } from "../../utils/api";
import {
Card,
@ -21,6 +28,8 @@ import { Button } from "../../components/ui/button";
import type { PracticeSheet } from "../../types/sheet";
import { formatStatus } from "../../lib/utils";
import { useNavigate } from "react-router-dom";
import { Progress } from "../../components/ui/progress";
import { Field, FieldLabel } from "../../components/ui/field";
export const Home = () => {
const user = useAuthStore((state) => state.user);
@ -78,15 +87,68 @@ export const Home = () => {
fetchPracticeSheets();
}, [user]);
const handleStartPractice = (sheetId: string) => {
const handleStartPracticeSheet = (sheetId: string) => {
navigate(`/student/practice/${sheetId}`);
};
return (
<main className="min-h-screen bg-gray-50 flex flex-col gap-12 max-w-full mx-auto px-8 sm:px-6 lg:px-8 py-12">
<main className="min-h-screen bg-gray-50 space-y-6 max-w-full mx-auto px-8 sm:px-6 lg:px-8 py-12">
<h1 className="text-4xl font-satoshi-bold tracking-tight text-gray-800 text-center">
Welcome, {user?.name || "Student"}
</h1>
{/* <section className="border rounded-3xl p-5 space-y-4">
<p className="font-satoshi">
Your predictive SAT score is low. Take a practice test to increase
your scores now!
</p>
</section> */}
<Card
className="relative bg-linear-to-br from-red-600 to-red-700 rounded-4xl
flex-row"
>
<div className="space-y-4">
<CardHeader className="w-[200%] md:w-full">
<CardTitle className="font-satoshi-bold tracking-tight text-3xl text-white">
Your score is low!
</CardTitle>
</CardHeader>
<CardContent className="md:w-full space-y-4">
<Field className="w-full max-w-sm">
<FieldLabel htmlFor="progress-upload">
<span className="font-satoshi text-white">Score</span>
<span className="ml-auto font-satoshi text-white">
854/1600
</span>
</FieldLabel>
<Progress value={55} id="progress-upload" max={100} />
</Field>
<p className="font-satoshi text-white">
Taking more practice tests can increase your score today!
</p>
</CardContent>
<CardFooter className="flex justify-between">
<Button
onClick={() => navigate("/student/analytics")}
className="bg-transparent border-2 py-3 px-5 text-md font-satoshi rounded-full"
>
<List />
View
</Button>
<Button className="bg-gray-50 py-3 px-5 text-md font-satoshi text-black rounded-full">
<SquarePen />
Take a practice test
</Button>
</CardFooter>
</div>
<div className="overflow-hidden opacity-30 -rotate-45 absolute -top-2 -right-30 ">
<DecimalsArrowRight size={380} color="white" />
</div>
</Card>
<h1 className="font-satoshi-bold text-2xl tracking-tight">
What are you looking for?
</h1>
<section className="relative w-full">
<input
type="text"
@ -133,7 +195,7 @@ export const Home = () => {
</CardContent>
<CardFooter>
<Button
onClick={() => handleStartPractice(sheet?.id)}
onClick={() => handleStartPracticeSheet(sheet?.id)}
variant="outline"
className="font-satoshi rounded-3xl w-full text-lg py-6 bg-linear-to-br from-purple-500 to-purple-600 text-white"
>
@ -203,7 +265,7 @@ export const Home = () => {
</CardContent>
<CardFooter>
<Button
onClick={() => handleStartPractice(sheet?.id)}
onClick={() => handleStartPracticeSheet(sheet?.id)}
variant="outline"
className="font-satoshi rounded-3xl w-full text-lg py-6 bg-linear-to-br from-purple-500 to-purple-600 text-white"
>