From 9fb23d05e1eecfea6d613cefa1bd0b4bc4c0af26 Mon Sep 17 00:00:00 2001
From: ectasy663 <namansingh4680@gmail.com>
Date: Mon, 27 Jul 2026 15:12:46 +0530
Subject: [PATCH] fix(ui): separate cbt and pdf dpp viewer logic and fix flex
 layout on dpp cards

---
 src/app/dashboard/ai-coach/cbt-dpp/page.tsx | 32 ++++++++-----------
 src/app/dashboard/dpp/page.tsx              | 34 ++++++++-------------
 2 files changed, 25 insertions(+), 41 deletions(-)

diff --git a/src/app/dashboard/ai-coach/cbt-dpp/page.tsx b/src/app/dashboard/ai-coach/cbt-dpp/page.tsx
index 674753c..738af51 100644
--- a/src/app/dashboard/ai-coach/cbt-dpp/page.tsx
+++ b/src/app/dashboard/ai-coach/cbt-dpp/page.tsx
@@ -145,8 +145,8 @@ export default function PrepPilotAIPage() {
 
           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'}`}>
-            <CardContent className="p-6 flex items-center justify-between">
-              <div className="flex gap-4">
+            <CardContent className="p-6 flex flex-col md:flex-row md:items-center justify-between gap-4">
+              <div className="flex gap-4 items-start w-full">
                 <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>}
                 </div>
@@ -169,7 +169,7 @@ export default function PrepPilotAIPage() {
                       </>
                     ) : null}
                   </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}
                     <span className={`text-[10px] uppercase px-2 py-0.5 rounded-md border font-bold tracking-wider ${getDifficultyColor(dpp.difficulty)}`}>
                       {dpp.difficulty}
@@ -185,36 +185,30 @@ export default function PrepPilotAIPage() {
                   </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 ? (
                   <Button disabled variant="outline" size="sm" className="font-bold">Starts Soon</Button>
                 ) : isExpired && !isAttempted ? (
                   <Button disabled variant="outline" size="sm" className="font-bold bg-secondary/50">Expired</Button>
                 ) : isAttempted ? (
                   <>
-                    <Link href={user?.tier === "Free" ? "#" : `/cbt/${dpp.id}/result`}>
-                      <Button onClick={() => user?.tier === "Free" && setSelectedPdfDpp(dpp)} variant="outline" size="sm" className="font-bold border-border">Result</Button>
+                    <Link href={`/cbt/${dpp.id}/result`}>
+                      <Button variant="outline" size="sm" className="font-bold border-border">Result</Button>
                     </Link>
                     {!isExpired && (
-                      <Link href={user?.tier === "Free" ? "#" : `/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">
-                          {user?.tier === "Free" ? "Read PDF" : "Retake CBT"}
+                      <Link href={`/dashboard/ai-coach/cbt-dpp/${dpp.id}`}>
+                        <Button variant="secondary" size="sm" className="font-bold bg-[#00F0FF]/10 text-[#00F0FF] hover:bg-[#00F0FF]/20 gap-2">
+                          Retake CBT
                         </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">
-                      <Eye size={14} /> Open PDF
+                  <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 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>
-                  )
+                  </Link>
                 )}
               </div>
             </CardContent>
diff --git a/src/app/dashboard/dpp/page.tsx b/src/app/dashboard/dpp/page.tsx
index 00c32f4..a53cc1e 100644
--- a/src/app/dashboard/dpp/page.tsx
+++ b/src/app/dashboard/dpp/page.tsx
@@ -145,8 +145,8 @@ export default function DPPPage() {
 
           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'}`}>
-            <CardContent className="p-6 flex items-center justify-between">
-              <div className="flex gap-4">
+            <CardContent className="p-6 flex flex-col md:flex-row md:items-center justify-between gap-4">
+              <div className="flex gap-4 items-start w-full">
                 <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>}
                 </div>
@@ -169,7 +169,7 @@ export default function DPPPage() {
                       </>
                     ) : null}
                   </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}
                     <span className={`text-[10px] uppercase px-2 py-0.5 rounded-md border font-bold tracking-wider ${getDifficultyColor(dpp.difficulty)}`}>
                       {dpp.difficulty}
@@ -185,36 +185,26 @@ export default function DPPPage() {
                   </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 ? (
                   <Button disabled variant="outline" size="sm" className="font-bold">Starts Soon</Button>
                 ) : isExpired && !isAttempted ? (
                   <Button disabled variant="outline" size="sm" className="font-bold bg-secondary/50">Expired</Button>
                 ) : isAttempted ? (
                   <>
-                    <Link href={user?.tier === "Free" ? "#" : `/cbt/${dpp.id}/result`}>
-                      <Button onClick={() => user?.tier === "Free" && setSelectedPdfDpp(dpp)} variant="outline" size="sm" className="font-bold border-border">Result</Button>
+                    <Link href={`/cbt/${dpp.id}/result`}>
+                      <Button variant="outline" size="sm" className="font-bold border-border">Result</Button>
                     </Link>
                     {!isExpired && (
-                      <Link href={user?.tier === "Free" ? "#" : `/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">
-                          {user?.tier === "Free" ? "Read PDF" : "Retake CBT"}
-                        </Button>
-                      </Link>
+                      <Button onClick={() => setSelectedPdfDpp(dpp)} variant="secondary" size="sm" className="font-bold bg-[#00F0FF]/10 text-[#00F0FF] hover:bg-[#00F0FF]/20 gap-2">
+                        <Eye size={14} /> Read PDF
+                      </Button>
                     )}
                   </>
                 ) : (
-                  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}`}>
-                      <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>
-                  )
+                  <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>
                 )}
               </div>
             </CardContent>