naman_panwar_gnpl/pragativeer-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): separate cbt and pdf dpp viewer logic and fix flex layout on dpp cards

Browse Source
This commit is contained in:
ectasy663
2026-07-27 15:12:46 +05:30
parent d79671ee73
commit 9fb23d05e1
2 changed files with 25 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/app/dashboard/ai-coach/cbt-dpp/page.tsx
View File

@@ -145,8 +145,8 @@ export default function PrepPilotAIPage() {
return ( return (
<Card key={dpp.id} className={`group cursor-pointer transition-all hover:shadow-md ${isAttempted ? 'opacity-70 hover:opacity-100 bg-secondary/10 border-primary/20' : isExpired ? 'opacity-80' : 'hover:border-[#00F0FF]/50 bg-background'}`}> <Card key={dpp.id} className={`group cursor-pointer transition-all hover:shadow-md ${isAttempted ? 'opacity-70 hover:opacity-100 bg-secondary/10 border-primary/20' : isExpired ? 'opacity-80' : 'hover:border-[#00F0FF]/50 bg-background'}`}>
<CardContent className="p-6 flex items-center justify-between"> <CardContent className="p-6 flex flex-col md:flex-row md:items-center justify-between gap-4">
<div className="flex gap-4"> <div className="flex gap-4 items-start w-full">
<div className={`mt-1 flex-shrink-0 ${isAttempted ? 'text-green-500' : 'text-foreground'}`}> <div className={`mt-1 flex-shrink-0 ${isAttempted ? 'text-green-500' : 'text-foreground'}`}>
{isAttempted ? <CheckCircle2 size={24} /> : <div className="size-6 rounded-full border-2 border-muted-foreground group-hover:border-[#00F0FF] transition-colors flex items-center justify-center"></div>} {isAttempted ? <CheckCircle2 size={24} /> : <div className="size-6 rounded-full border-2 border-muted-foreground group-hover:border-[#00F0FF] transition-colors flex items-center justify-center"></div>}
</div> </div>
@@ -169,7 +169,7 @@ export default function PrepPilotAIPage() {
</> </>
) : null} ) : null}
</div> </div>
<h3 className="font-bold text-lg leading-tight group-hover:text-[#00F0FF] transition-colors flex items-center gap-2"> <h3 className="font-bold text-lg leading-tight group-hover:text-[#00F0FF] transition-colors flex flex-wrap items-center gap-2">
{dpp.title} {dpp.title}
<span className={`text-[10px] uppercase px-2 py-0.5 rounded-md border font-bold tracking-wider ${getDifficultyColor(dpp.difficulty)}`}> <span className={`text-[10px] uppercase px-2 py-0.5 rounded-md border font-bold tracking-wider ${getDifficultyColor(dpp.difficulty)}`}>
{dpp.difficulty} {dpp.difficulty}
@@ -185,36 +185,30 @@ export default function PrepPilotAIPage() {
</div> </div>
</div> </div>
</div> </div>
<div className="flex flex-col sm:flex-row gap-2 shrink-0"> <div className="flex flex-col sm:flex-row gap-2 shrink-0 md:self-center">
{isUpcoming ? ( {isUpcoming ? (
<Button disabled variant="outline" size="sm" className="font-bold">Starts Soon</Button> <Button disabled variant="outline" size="sm" className="font-bold">Starts Soon</Button>
) : isExpired && !isAttempted ? ( ) : isExpired && !isAttempted ? (
<Button disabled variant="outline" size="sm" className="font-bold bg-secondary/50">Expired</Button> <Button disabled variant="outline" size="sm" className="font-bold bg-secondary/50">Expired</Button>
) : isAttempted ? ( ) : isAttempted ? (
<> <>
<Link href={user?.tier === "Free" ? "#" : `/cbt/${dpp.id}/result`}> <Link href={`/cbt/${dpp.id}/result`}>
<Button onClick={() => user?.tier === "Free" && setSelectedPdfDpp(dpp)} variant="outline" size="sm" className="font-bold border-border">Result</Button> <Button variant="outline" size="sm" className="font-bold border-border">Result</Button>
</Link> </Link>
{!isExpired && ( {!isExpired && (
<Link href={user?.tier === "Free" ? "#" : `/dashboard/ai-coach/cbt-dpp/${dpp.id}`}> <Link href={`/dashboard/ai-coach/cbt-dpp/${dpp.id}`}>
<Button onClick={() => user?.tier === "Free" && setSelectedPdfDpp(dpp)} variant="secondary" size="sm" className="font-bold bg-[#00F0FF]/10 text-[#00F0FF] hover:bg-[#00F0FF]/20"> <Button variant="secondary" size="sm" className="font-bold bg-[#00F0FF]/10 text-[#00F0FF] hover:bg-[#00F0FF]/20 gap-2">
{user?.tier === "Free" ? "Read PDF" : "Retake CBT"} Retake CBT
</Button> </Button>
</Link> </Link>
)} )}
</> </>
) : (
user?.tier === "Free" ? (
<Button onClick={() => setSelectedPdfDpp(dpp)} variant="secondary" className="rounded-xl bg-primary/10 text-primary hover:bg-primary/20 font-bold gap-2 text-xs">
<Eye size={14} /> Open PDF
</Button>
) : ( ) : (
<Link href={`/dashboard/ai-coach/cbt-dpp/${dpp.id}`}> <Link href={`/dashboard/ai-coach/cbt-dpp/${dpp.id}`}>
<Button variant="secondary" size="sm" className="rounded-xl bg-[#00F0FF] text-black hover:bg-[#00F0FF]/90 font-extrabold gap-2 text-xs shadow-[0_0_12px_rgba(0,240,255,0.2)]"> <Button variant="secondary" size="sm" className="rounded-xl bg-[#00F0FF] text-black hover:bg-[#00F0FF]/90 font-extrabold gap-2 text-xs shadow-[0_0_12px_rgba(0,240,255,0.2)]">
<Play size={14} className="fill-black" /> Launch CBT DPP <Play size={14} className="fill-black" /> Launch CBT DPP
</Button> </Button>
</Link> </Link>
)
)} )}
</div> </div>
</CardContent> </CardContent>

26
src/app/dashboard/dpp/page.tsx
View File

@@ -145,8 +145,8 @@ export default function DPPPage() {
return ( return (
<Card key={dpp.id} className={`group cursor-pointer transition-all hover:shadow-md ${isAttempted ? 'opacity-70 hover:opacity-100 bg-secondary/10 border-primary/20' : isExpired ? 'opacity-80' : 'hover:border-[#00F0FF]/50 bg-background'}`}> <Card key={dpp.id} className={`group cursor-pointer transition-all hover:shadow-md ${isAttempted ? 'opacity-70 hover:opacity-100 bg-secondary/10 border-primary/20' : isExpired ? 'opacity-80' : 'hover:border-[#00F0FF]/50 bg-background'}`}>
<CardContent className="p-6 flex items-center justify-between"> <CardContent className="p-6 flex flex-col md:flex-row md:items-center justify-between gap-4">
<div className="flex gap-4"> <div className="flex gap-4 items-start w-full">
<div className={`mt-1 flex-shrink-0 ${isAttempted ? 'text-green-500' : 'text-foreground'}`}> <div className={`mt-1 flex-shrink-0 ${isAttempted ? 'text-green-500' : 'text-foreground'}`}>
{isAttempted ? <CheckCircle2 size={24} /> : <div className="size-6 rounded-full border-2 border-muted-foreground group-hover:border-[#00F0FF] transition-colors flex items-center justify-center"></div>} {isAttempted ? <CheckCircle2 size={24} /> : <div className="size-6 rounded-full border-2 border-muted-foreground group-hover:border-[#00F0FF] transition-colors flex items-center justify-center"></div>}
</div> </div>
@@ -169,7 +169,7 @@ export default function DPPPage() {
</> </>
) : null} ) : null}
</div> </div>
<h3 className="font-bold text-lg leading-tight group-hover:text-[#00F0FF] transition-colors flex items-center gap-2"> <h3 className="font-bold text-lg leading-tight group-hover:text-[#00F0FF] transition-colors flex flex-wrap items-center gap-2">
{dpp.title} {dpp.title}
<span className={`text-[10px] uppercase px-2 py-0.5 rounded-md border font-bold tracking-wider ${getDifficultyColor(dpp.difficulty)}`}> <span className={`text-[10px] uppercase px-2 py-0.5 rounded-md border font-bold tracking-wider ${getDifficultyColor(dpp.difficulty)}`}>
{dpp.difficulty} {dpp.difficulty}
@@ -185,36 +185,26 @@ export default function DPPPage() {
</div> </div>
</div> </div>
</div> </div>
<div className="flex flex-col sm:flex-row gap-2 shrink-0"> <div className="flex flex-col sm:flex-row gap-2 shrink-0 md:self-center">
{isUpcoming ? ( {isUpcoming ? (
<Button disabled variant="outline" size="sm" className="font-bold">Starts Soon</Button> <Button disabled variant="outline" size="sm" className="font-bold">Starts Soon</Button>
) : isExpired && !isAttempted ? ( ) : isExpired && !isAttempted ? (
<Button disabled variant="outline" size="sm" className="font-bold bg-secondary/50">Expired</Button> <Button disabled variant="outline" size="sm" className="font-bold bg-secondary/50">Expired</Button>
) : isAttempted ? ( ) : isAttempted ? (
<> <>
<Link href={user?.tier === "Free" ? "#" : `/cbt/${dpp.id}/result`}> <Link href={`/cbt/${dpp.id}/result`}>
<Button onClick={() => user?.tier === "Free" && setSelectedPdfDpp(dpp)} variant="outline" size="sm" className="font-bold border-border">Result</Button> <Button variant="outline" size="sm" className="font-bold border-border">Result</Button>
</Link> </Link>
{!isExpired && ( {!isExpired && (
<Link href={user?.tier === "Free" ? "#" : `/dashboard/ai-coach/cbt-dpp/${dpp.id}`}> <Button onClick={() => setSelectedPdfDpp(dpp)} variant="secondary" size="sm" className="font-bold bg-[#00F0FF]/10 text-[#00F0FF] hover:bg-[#00F0FF]/20 gap-2">
<Button onClick={() => user?.tier === "Free" && setSelectedPdfDpp(dpp)} variant="secondary" size="sm" className="font-bold bg-[#00F0FF]/10 text-[#00F0FF] hover:bg-[#00F0FF]/20"> <Eye size={14} /> Read PDF
{user?.tier === "Free" ? "Read PDF" : "Retake CBT"}
</Button> </Button>
</Link>
)} )}
</> </>
) : ( ) : (
user?.tier === "Free" ? (
<Button onClick={() => setSelectedPdfDpp(dpp)} variant="secondary" className="rounded-xl bg-primary/10 text-primary hover:bg-primary/20 font-bold gap-2 text-xs"> <Button onClick={() => setSelectedPdfDpp(dpp)} variant="secondary" className="rounded-xl bg-primary/10 text-primary hover:bg-primary/20 font-bold gap-2 text-xs">
<Eye size={14} /> Open PDF <Eye size={14} /> Open PDF
</Button> </Button>
) : (
<Link href={`/dashboard/ai-coach/cbt-dpp/${dpp.id}`}>
<Button variant="secondary" size="sm" className="rounded-xl bg-[#00F0FF] text-black hover:bg-[#00F0FF]/90 font-extrabold gap-2 text-xs shadow-[0_0_12px_rgba(0,240,255,0.2)]">
<Play size={14} className="fill-black" /> Launch CBT DPP
</Button>
</Link>
)
)} )}
</div> </div>
</CardContent> </CardContent>