added

Signed-off-by: Kenneth Obsequio <k80308392@gmail.com>

src/modules/client/components/LessonCard.jsx

@@ -3,10 +3,11 @@
 // no lesson_count/quiz_id of its own — shows unit_count instead (how many Units
 // it's attached to).
 
-import { Timer, LockIcon, Layers } from "lucide-react";
+import { Timer, LockIcon, Layers, Tag } from "lucide-react";
 import { Badge } from "@/components/ui/badge";
 import { Skeleton } from "@/components/ui/skeleton";
 import { cn } from "@/lib/utils";
+import { resolveTierBadge, cheapestTierSlug } from "@/utils/tierBadge.util";
 
 function formatDuration(seconds = 0) {
     if (!seconds) return null;
@@ -17,11 +18,13 @@ function formatDuration(seconds = 0) {
     return `${m}m`;
 }
 
-export const LessonCard = ({ lesson, onViewDetails }) => {
+export const LessonCard = ({ lesson, tierMap = {}, onViewDetails }) => {
     const locked = lesson.is_locked;
     const duration = formatDuration(lesson.duration_seconds);
     const unitCount = Number(lesson.unit_count ?? 0);
     const courses = lesson.courses ?? [];
+    const slug = cheapestTierSlug(courses.map((c) => c.subscription), tierMap);
+    const { label, cls } = resolveTierBadge(slug, tierMap);
 
     return (
         <div
@@ -35,23 +38,12 @@ export const LessonCard = ({ lesson, onViewDetails }) => {
             onClick={() => onViewDetails(lesson)}
         >
             <div className="flex flex-wrap gap-1.5">
+                <Badge className={cls}>
+                    {locked ? <LockIcon className="size-3" /> : <Tag className="size-3" />}
+                    {label}
+                </Badge>
                 {locked && (
-                    <Badge variant="secondary">
-                        <LockIcon className="size-3" /> Locked
-                    </Badge>
-                )}
-                {unitCount > 0 ? (
-                    <Badge variant="outline">
-                        <Layers className="size-3" /> In {unitCount} unit{unitCount === 1 ? "" : "s"}
-                        {courses[0] && (
-                            <>
-                                {" "}· <span className="truncate max-w-[120px] inline-block align-bottom">{courses[0].title}</span>
-                                {courses.length > 1 ? ` +${courses.length - 1}` : ""}
-                            </>
-                        )}
-                    </Badge>
-                ) : (
-                    !locked && <Badge variant="outline" className="text-muted-foreground">Standalone</Badge>
+                    <Badge variant="outline" className="text-muted-foreground">Locked</Badge>
                 )}
             </div>
 

src/modules/client/components/UnitCard.jsx

@@ -1,96 +1,85 @@
 // UnitCard — grid card for a standalone Unit. Shared by UnitsList.jsx and
 // Dashboard.jsx's "Featured Units" section.
 
-import { Timer, LockIcon, Layers, BookOpen, ClipboardList } from "lucide-react";
+import { Timer, LockIcon, Layers, Tag } from "lucide-react";
 import { Badge } from "@/components/ui/badge";
 import { Skeleton } from "@/components/ui/skeleton";
 import { cn } from "@/lib/utils";
+import { resolveTierBadge, cheapestTierSlug } from "@/utils/tierBadge.util";
 
 function formatDuration(seconds = 0) {
-    if (!seconds) return null;
-    const h = Math.floor(seconds / 3600);
-    const m = Math.floor((seconds % 3600) / 60);
-    if (h && m) return `${h}h ${m}m`;
-    if (h) return `${h}h`;
-    return `${m}m`;
+  if (!seconds) return null;
+  const h = Math.floor(seconds / 3600);
+  const m = Math.floor((seconds % 3600) / 60);
+  if (h && m) return `${h}h ${m}m`;
+  if (h) return `${h}h`;
+  return `${m}m`;
 }
 
-export const UnitCard = ({ unit, onViewDetails }) => {
-    const locked = unit.is_locked;
-    const duration = formatDuration(unit.duration_seconds);
-    const lessonCount = Number(unit.lesson_count ?? 0);
-    const courseCount = Number(unit.course_count ?? 0);
-    const courses = unit.courses ?? [];
+export const UnitCard = ({ unit, tierMap = {}, onViewDetails }) => {
+  const locked = unit.is_locked;
+  const duration = formatDuration(unit.duration_seconds);
+  const lessonCount = Number(unit.lesson_count ?? 0);
+  const courses = unit.courses ?? [];
+  const slug = cheapestTierSlug([unit.subscription, ...courses.map((c) => c.subscription)], tierMap);
+  const { label, cls } = resolveTierBadge(slug, tierMap);
 
-    return (
-        <div
-            className={cn(
-                "bg-card rounded-2xl border p-4 flex flex-col gap-2.5 transition-all cursor-pointer group",
-                "hover:shadow-sm",
-                locked
-                    ? "opacity-80 hover:opacity-100 hover:border-muted-foreground/40"
-                    : "hover:bg-muted/60 dark:hover:border-blue-500"
-            )}
-            onClick={() => onViewDetails(unit)}
-        >
-            <div className="flex flex-wrap gap-1.5">
-                {locked && (
-                    <Badge variant="secondary">
-                        <LockIcon className="size-3" /> Locked
-                    </Badge>
-                )}
-                {courseCount > 0 ? (
-                    <Badge variant="outline">
-                        <BookOpen className="size-3" />
-                        <span className="truncate max-w-[140px] inline-block align-bottom">{courses[0]?.title ?? "Course"}</span>
-                        {courseCount > 1 ? ` +${courseCount - 1}` : ""}
-                    </Badge>
-                ) : (
-                    !locked && <Badge variant="outline" className="text-muted-foreground">Standalone</Badge>
-                )}
-                {unit.quiz_id && (
-                    <Badge variant="outline"><ClipboardList className="size-3" /> Quiz</Badge>
-                )}
-            </div>
+  return (
+    <div
+      className={cn(
+        "bg-card rounded-2xl border p-4 flex flex-col gap-2.5 transition-all cursor-pointer group",
+        "hover:shadow-sm",
+        locked
+          ? "opacity-80 hover:opacity-100 hover:border-muted-foreground/40"
+          : "hover:bg-muted/60 dark:hover:border-blue-500"
+      )}
+      onClick={() => onViewDetails(unit)}
+    >
+      <div className="flex flex-wrap gap-1.5">
+        <Badge className={cls}>
+          {locked ? <LockIcon className="size-3" /> : <Tag className="size-3" />}
+          {label}
+        </Badge>
+      </div>
 
-            <div className="flex flex-col gap-1">
-                <h1 className="text-lg font-medium leading-snug line-clamp-3 transition-colors group-hover:text-blue-700 dark:group-hover:text-blue-400">
-                    {unit.title}
-                </h1>
-                {unit.description && (
-                    <p className="text-sm leading-relaxed line-clamp-2 group-hover:text-blue-700 dark:group-hover:text-blue-400">
-                        {unit.description}
-                    </p>
-                )}
-            </div>
+      <div className="flex flex-col gap-1">
+        <h1 className="text-lg font-medium leading-snug line-clamp-3 transition-colors group-hover:text-blue-700 dark:group-hover:text-blue-400">
+          {unit.title}
+        </h1>
+        {unit.description && (
+          <p className="text-sm leading-relaxed line-clamp-2 group-hover:text-blue-700 dark:group-hover:text-blue-400">
+            {unit.description}
+          </p>
+        )}
+      </div>
 
-            <div className="flex items-center justify-between pt-2 mt-auto border-t">
-                <div className={`flex items-center gap-3 text-sm [&_svg]:size-4 ${locked ? "text-muted-foreground" : "text-card-foreground group-hover:text-blue-700 dark:group-hover:text-blue-400"}`}>
-                    <div className="flex items-center gap-1">
-                        <Layers /> {lessonCount} {lessonCount === 1 ? "Lesson" : "Lessons"}
-                    </div>
-                    <div className="flex items-center gap-1">
-                        <Timer /> {duration ?? "—"}
-                    </div>
-                </div>
-                {locked && (
-                    <span className="text-xs text-muted-foreground">Upgrade to unlock</span>
-                )}
-            </div>
+      <div className="flex items-center justify-between pt-2 mt-auto border-t">
+        <div className={`flex items-center gap-3 text-sm [&_svg]:size-4 ${locked ? "text-muted-foreground" : "text-card-foreground group-hover:text-blue-700 dark:group-hover:text-blue-400"}`}>
+          <div className="flex items-center gap-1">
+            <Layers /> {lessonCount} {lessonCount === 1 ? "Lesson" : "Lessons"}
+          </div>
+          <div className="flex items-center gap-1">
+            <Timer /> {duration ?? "—"}
+          </div>
         </div>
-    );
+        {locked && (
+          <span className="text-xs text-muted-foreground">Upgrade to unlock</span>
+        )}
+      </div>
+    </div>
+  );
 };
 
 export const UnitCardSkeleton = () => (
-    <div className="bg-card rounded-2xl border p-4 flex flex-col gap-2.5">
-        <div className="flex gap-1.5">
-            <Skeleton className="h-5 w-20 rounded-full" />
-        </div>
-        <Skeleton className="h-6 w-3/4" />
-        <Skeleton className="h-4 w-full" />
-        <Skeleton className="h-4 w-2/3" />
-        <div className="pt-2 mt-auto border-t">
-            <Skeleton className="h-4 w-24" />
-        </div>
+  <div className="bg-card rounded-2xl border p-4 flex flex-col gap-2.5">
+    <div className="flex gap-1.5">
+      <Skeleton className="h-5 w-20 rounded-full" />
     </div>
+    <Skeleton className="h-6 w-3/4" />
+    <Skeleton className="h-4 w-full" />
+    <Skeleton className="h-4 w-2/3" />
+    <div className="pt-2 mt-auto border-t">
+      <Skeleton className="h-4 w-24" />
+    </div>
+  </div>
 );