add: ver()

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

src/modules/client/components/UnitCard.jsx

@@ -0,0 +1,90 @@
+// 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 { Badge } from "@/components/ui/badge";
+import { Skeleton } from "@/components/ui/skeleton";
+import { cn } from "@/lib/utils";
+
+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`;
+}
+
+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);
+
+    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" /> In {courseCount} course{courseCount === 1 ? "" : "s"}</Badge>
+                ) : (
+                    <Badge variant="outline" className="text-muted-foreground">Standalone</Badge>
+                )}
+                {unit.quiz_id && (
+                    <Badge variant="outline"><ClipboardList className="size-3" /> Quiz</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 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>
+);

src/modules/client/components/UnitUpsellModal.jsx

@@ -0,0 +1,70 @@
+// UnitUpsellModal — shown when a learner clicks a locked standalone Unit.
+// Units aren't independently purchasable (no Product row keyed to unit_id, only
+// to course_id), so unlike CourseCard's single "Buy $X" button, this lists every
+// course the unit is attached to so the learner can pick one to view/buy, plus a
+// generic "View Plans" fallback. Shared by UnitsList, UnitDetails, and Dashboard.
+
+import { useNavigate } from "react-router-dom";
+import { LockIcon, BookOpen } from "lucide-react";
+import ResponsiveModal from "@/components/generic/ResponsiveModal";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { resolveTierBadge } from "@/utils/tierBadge.util";
+
+export default function UnitUpsellModal({ open, onOpenChange, unit, tierMap = {} }) {
+  const navigate = useNavigate();
+  const courses = unit?.courses ?? [];
+
+  return (
+    <ResponsiveModal
+      open={open}
+      onOpenChange={onOpenChange}
+      title={unit?.title ?? "Unit Details"}
+      description="This unit is part of one or more courses that require a plan upgrade."
+      footer={
+        <>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>Close</Button>
+          <Button onClick={() => { onOpenChange(false); navigate("/plans"); }}>
+            <LockIcon /> View Plans
+          </Button>
+        </>
+      }
+    >
+      <div className="space-y-3 py-2">
+        {courses.length === 0 ? (
+          <p className="text-sm text-muted-foreground">
+            Upgrade your plan to access this content.
+          </p>
+        ) : (
+          courses.map((course) => {
+            const { label, cls } = resolveTierBadge(course.subscription, tierMap);
+            return (
+              <div
+                key={course.course_id}
+                className="flex items-center justify-between gap-3 p-4 rounded-xl border bg-muted/40"
+              >
+                <div className="flex items-center gap-2.5 min-w-0">
+                  <BookOpen className="size-4 text-muted-foreground shrink-0" />
+                  <div className="min-w-0">
+                    <p className="text-sm font-medium truncate">{course.title}</p>
+                    <Badge className={`${cls} mt-1`}>
+                      <LockIcon className="size-3" /> {label}
+                    </Badge>
+                  </div>
+                </div>
+                <Button
+                  size="sm"
+                  variant="outline"
+                  className="shrink-0"
+                  onClick={() => { onOpenChange(false); navigate(`/course/${course.course_id}`); }}
+                >
+                  View Course
+                </Button>
+              </div>
+            );
+          })
+        )}
+      </div>
+    </ResponsiveModal>
+  );
+}