@lssm/example.learning-journey-ui-coaching 0.0.0-canary-20251212210835

package/src/components/TipCard.tsx

@@ -0,0 +1,102 @@
+'use client';
+
+import { Button } from '@lssm/lib.design-system';
+import { Card, CardContent } from '@lssm/lib.ui-kit-web/ui/card';
+import { cn } from '@lssm/lib.ui-kit-web/ui/utils';
+import type { LearningJourneyStepSpec } from '@lssm/module.learning-journey/track-spec';
+
+interface TipCardProps {
+  step: LearningJourneyStepSpec;
+  isCompleted: boolean;
+  isCurrent: boolean;
+  onComplete?: () => void;
+  onDismiss?: () => void;
+}
+
+const TIP_ICONS: Record<string, string> = {
+  cash_buffer_too_high: '💰',
+  no_savings_goal: '🎯',
+  irregular_savings: '📅',
+  noise_late_evening: '🔇',
+  guest_frequency_high: '👥',
+  shared_space_conflicts: '🏠',
+  default: '💡',
+};
+
+export function TipCard({
+  step,
+  isCompleted,
+  isCurrent,
+  onComplete,
+  onDismiss,
+}: TipCardProps) {
+  const tipId = (step.metadata?.tipId as string) ?? 'default';
+  const icon = TIP_ICONS[tipId] ?? TIP_ICONS.default;
+
+  return (
+    <Card
+      className={cn(
+        'transition-all',
+        isCompleted && 'opacity-60',
+        isCurrent && 'ring-2 ring-amber-500'
+      )}
+    >
+      <CardContent className="p-4">
+        <div className="flex gap-4">
+          {/* Icon */}
+          <div
+            className={cn(
+              'flex h-12 w-12 shrink-0 items-center justify-center rounded-xl text-2xl',
+              isCompleted
+                ? 'bg-green-500/10'
+                : isCurrent
+                  ? 'bg-amber-500/10'
+                  : 'bg-muted'
+            )}
+          >
+            {isCompleted ? '✓' : icon}
+          </div>
+
+          {/* Content */}
+          <div className="min-w-0 flex-1">
+            <div className="flex items-start justify-between gap-2">
+              <h4 className="font-semibold">{step.title}</h4>
+              {step.xpReward && (
+                <span
+                  className={cn(
+                    'shrink-0 rounded-full px-2 py-0.5 text-xs font-semibold',
+                    isCompleted
+                      ? 'bg-green-500/10 text-green-500'
+                      : 'bg-amber-500/10 text-amber-500'
+                  )}
+                >
+                  +{step.xpReward} XP
+                </span>
+              )}
+            </div>
+            <p className="text-muted-foreground mt-1 text-sm">
+              {step.description}
+            </p>
+
+            {/* Actions */}
+            {!isCompleted && (
+              <div className="mt-3 flex flex-wrap gap-2">
+                <Button size="sm" onClick={onComplete}>
+                  Take Action
+                </Button>
+                <Button variant="outline" size="sm" onClick={onDismiss}>
+                  Dismiss
+                </Button>
+              </div>
+            )}
+
+            {isCompleted && (
+              <p className="mt-2 text-sm text-green-500">✓ Tip acknowledged</p>
+            )}
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+

package/src/components/TipFeed.tsx

@@ -0,0 +1,102 @@
+'use client';
+
+import { cn } from '@lssm/lib.ui-kit-web/ui/utils';
+import type { LearningJourneyStepSpec } from '@lssm/module.learning-journey/track-spec';
+
+interface TipFeedItem {
+  step: LearningJourneyStepSpec;
+  isCompleted: boolean;
+  completedAt?: string;
+}
+
+interface TipFeedProps {
+  items: TipFeedItem[];
+}
+
+const TIP_ICONS: Record<string, string> = {
+  cash_buffer_too_high: '💰',
+  no_savings_goal: '🎯',
+  irregular_savings: '📅',
+  noise_late_evening: '🔇',
+  guest_frequency_high: '👥',
+  shared_space_conflicts: '🏠',
+  default: '💡',
+};
+
+export function TipFeed({ items }: TipFeedProps) {
+  if (items.length === 0) {
+    return (
+      <div className="text-muted-foreground py-8 text-center">
+        No tips yet. Start engaging with coaching tips!
+      </div>
+    );
+  }
+
+  return (
+    <div className="relative">
+      {/* Timeline line */}
+      <div className="bg-border absolute top-0 left-4 h-full w-0.5" />
+
+      {/* Feed items */}
+      <div className="space-y-4">
+        {items.map((item, index) => {
+          const tipId = (item.step.metadata?.tipId as string) ?? 'default';
+          const icon = TIP_ICONS[tipId] ?? TIP_ICONS.default;
+
+          return (
+            <div key={item.step.id} className="relative flex gap-4 pl-2">
+              {/* Node */}
+              <div
+                className={cn(
+                  'relative z-10 flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-sm',
+                  item.isCompleted
+                    ? 'bg-green-500 text-white'
+                    : 'bg-muted text-muted-foreground'
+                )}
+              >
+                {item.isCompleted ? '✓' : icon}
+              </div>
+
+              {/* Content */}
+              <div className="bg-card flex-1 rounded-lg border p-3">
+                <div className="flex items-start justify-between gap-2">
+                  <div>
+                    <p className="font-medium">{item.step.title}</p>
+                    <p className="text-muted-foreground mt-0.5 text-sm">
+                      {item.step.description}
+                    </p>
+                  </div>
+                  {item.step.xpReward && (
+                    <span
+                      className={cn(
+                        'shrink-0 text-xs font-medium',
+                        item.isCompleted
+                          ? 'text-green-500'
+                          : 'text-muted-foreground'
+                      )}
+                    >
+                      +{item.step.xpReward} XP
+                    </span>
+                  )}
+                </div>
+
+                {/* Timestamp */}
+                <div className="text-muted-foreground mt-2 flex items-center gap-2 text-xs">
+                  {item.isCompleted ? (
+                    <span className="text-green-500">
+                      ✓ Completed
+                      {item.completedAt && ` • ${item.completedAt}`}
+                    </span>
+                  ) : (
+                    <span>Pending action</span>
+                  )}
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+

package/src/components/index.ts

@@ -0,0 +1,4 @@
+export { TipCard } from './TipCard';
+export { EngagementMeter } from './EngagementMeter';
+export { TipFeed } from './TipFeed';
+

package/src/index.ts

@@ -0,0 +1,9 @@
+// Main mini-app
+export { CoachingMiniApp } from './CoachingMiniApp';
+
+// Views
+export { Overview, Steps, Progress, Timeline } from './views';
+
+// Components
+export { TipCard, EngagementMeter, TipFeed } from './components';
+

package/src/views/Overview.tsx

@@ -0,0 +1,155 @@
+'use client';
+
+import { Button } from '@lssm/lib.design-system';
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from '@lssm/lib.ui-kit-web/ui/card';
+import { XpBar, StreakCounter } from '@lssm/example.learning-journey-ui-shared';
+import { TipCard } from '../components/TipCard';
+import type { LearningViewProps } from '@lssm/example.learning-journey-ui-shared';
+
+interface CoachingOverviewProps extends LearningViewProps {
+  onStart?: () => void;
+}
+
+export function Overview({
+  track,
+  progress,
+  onStepComplete,
+  onStart,
+}: CoachingOverviewProps) {
+  const totalXp =
+    track.totalXp ?? track.steps.reduce((sum, s) => sum + (s.xpReward ?? 0), 0);
+
+  const completedSteps = progress.completedStepIds.length;
+  const totalSteps = track.steps.length;
+  const pendingSteps = totalSteps - completedSteps;
+
+  // Get active tips (incomplete ones)
+  const activeTips = track.steps
+    .filter((s) => !progress.completedStepIds.includes(s.id))
+    .slice(0, 3);
+
+  return (
+    <div className="space-y-6">
+      {/* Header Card */}
+      <Card className="overflow-hidden bg-gradient-to-br from-amber-500/10 via-orange-500/10 to-red-500/10">
+        <CardContent className="p-6">
+          <div className="flex flex-col items-center gap-4 text-center md:flex-row md:text-left">
+            <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-amber-500 to-orange-600 text-3xl shadow-lg">
+              💡
+            </div>
+            <div className="flex-1">
+              <h1 className="text-2xl font-bold">{track.name}</h1>
+              <p className="text-muted-foreground mt-1">{track.description}</p>
+            </div>
+            <div className="flex items-center gap-4">
+              <StreakCounter days={progress.streakDays} size="lg" />
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Quick Stats */}
+      <div className="grid gap-4 md:grid-cols-3">
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-muted-foreground text-sm font-medium">
+              Active Tips
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-3xl font-bold text-amber-500">
+              {pendingSteps}
+            </div>
+            <p className="text-muted-foreground text-sm">tips for you today</p>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-muted-foreground text-sm font-medium">
+              Tips Actioned
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-3xl font-bold text-green-500">
+              {completedSteps}
+            </div>
+            <p className="text-muted-foreground text-sm">
+              out of {totalSteps} total
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-muted-foreground text-sm font-medium">
+              XP Earned
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-3xl font-bold text-orange-500">
+              {progress.xpEarned}
+            </div>
+            <XpBar
+              current={progress.xpEarned}
+              max={totalXp}
+              showLabel={false}
+              size="sm"
+            />
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Active Tips Preview */}
+      {activeTips.length > 0 && (
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between">
+            <CardTitle className="flex items-center gap-2">
+              <span>💡</span>
+              <span>Tips for You</span>
+            </CardTitle>
+            {activeTips.length < pendingSteps && (
+              <Button variant="outline" size="sm" onClick={onStart}>
+                View All ({pendingSteps})
+              </Button>
+            )}
+          </CardHeader>
+          <CardContent className="space-y-3">
+            {activeTips.map((step) => (
+              <TipCard
+                key={step.id}
+                step={step}
+                isCompleted={false}
+                isCurrent={step.id === activeTips[0]?.id}
+                onComplete={() => onStepComplete?.(step.id)}
+              />
+            ))}
+          </CardContent>
+        </Card>
+      )}
+
+      {/* All Complete */}
+      {pendingSteps === 0 && (
+        <Card className="border-green-500/50 bg-green-500/5">
+          <CardContent className="flex items-center gap-4 p-6">
+            <div className="text-4xl">🎉</div>
+            <div>
+              <h3 className="text-lg font-semibold text-green-500">
+                All Tips Actioned!
+              </h3>
+              <p className="text-muted-foreground">
+                Great job! You've addressed all {totalSteps} coaching tips.
+              </p>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  );
+}
+

package/src/views/Progress.tsx

@@ -0,0 +1,165 @@
+'use client';
+
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from '@lssm/lib.ui-kit-web/ui/card';
+import {
+  XpBar,
+  BadgeDisplay,
+  StreakCounter,
+} from '@lssm/example.learning-journey-ui-shared';
+import { EngagementMeter } from '../components/EngagementMeter';
+import type { LearningViewProps } from '@lssm/example.learning-journey-ui-shared';
+
+export function ProgressView({ track, progress }: LearningViewProps) {
+  const totalXp =
+    track.totalXp ?? track.steps.reduce((sum, s) => sum + (s.xpReward ?? 0), 0);
+
+  const completedSteps = progress.completedStepIds.length;
+  const totalSteps = track.steps.length;
+  const pendingSteps = totalSteps - completedSteps;
+
+  // For demo: split completed into "actioned" and "acknowledged"
+  // In real app, this would come from progress data
+  const actioned = Math.floor(completedSteps * 0.7);
+  const acknowledged = completedSteps - actioned;
+
+  return (
+    <div className="space-y-6">
+      {/* Engagement Overview */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <span>📊</span>
+            <span>Engagement Overview</span>
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <EngagementMeter
+            actioned={actioned}
+            acknowledged={acknowledged}
+            pending={pendingSteps}
+            streak={progress.streakDays}
+          />
+        </CardContent>
+      </Card>
+
+      {/* Stats Grid */}
+      <div className="grid gap-4 md:grid-cols-2">
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-muted-foreground text-sm font-medium">
+              XP Earned
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-3">
+            <div className="flex items-baseline gap-2">
+              <span className="text-3xl font-bold text-orange-500">
+                {progress.xpEarned}
+              </span>
+              <span className="text-muted-foreground">/ {totalXp} XP</span>
+            </div>
+            <XpBar
+              current={progress.xpEarned}
+              max={totalXp}
+              showLabel={false}
+              size="lg"
+            />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-muted-foreground text-sm font-medium">
+              Engagement Streak
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="flex items-center gap-4">
+              <StreakCounter days={progress.streakDays} size="lg" />
+              <div className="text-muted-foreground text-sm">
+                {progress.streakDays > 0
+                  ? 'Keep going!'
+                  : 'Start your streak today!'}
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Achievements */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <span>🏅</span>
+            <span>Achievements</span>
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <BadgeDisplay badges={progress.badges} size="lg" maxVisible={10} />
+          {progress.badges.length === 0 && (
+            <p className="text-muted-foreground text-sm">
+              Action tips to unlock achievements!
+            </p>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Tip Breakdown */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <span>💡</span>
+            <span>Tip Status</span>
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-3">
+            {track.steps.map((step) => {
+              const isCompleted = progress.completedStepIds.includes(step.id);
+
+              return (
+                <div
+                  key={step.id}
+                  className="flex items-center justify-between rounded-lg border p-3"
+                >
+                  <div className="flex items-center gap-3">
+                    <span
+                      className={
+                        isCompleted ? 'text-green-500' : 'text-amber-500'
+                      }
+                    >
+                      {isCompleted ? '✓' : '○'}
+                    </span>
+                    <span
+                      className={
+                        isCompleted
+                          ? 'text-muted-foreground'
+                          : 'text-foreground'
+                      }
+                    >
+                      {step.title}
+                    </span>
+                  </div>
+                  <span
+                    className={`text-sm ${
+                      isCompleted ? 'text-green-500' : 'text-muted-foreground'
+                    }`}
+                  >
+                    {isCompleted ? 'Actioned' : 'Pending'}
+                  </span>
+                </div>
+              );
+            })}
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+export { ProgressView as Progress };
+

package/src/views/Steps.tsx

@@ -0,0 +1,64 @@
+'use client';
+
+import { TipCard } from '../components/TipCard';
+import type { LearningViewProps } from '@lssm/example.learning-journey-ui-shared';
+
+export function Steps({ track, progress, onStepComplete }: LearningViewProps) {
+  const completedSteps = progress.completedStepIds.length;
+  const totalSteps = track.steps.length;
+
+  // Sort: pending first, then completed
+  const sortedSteps = [...track.steps].sort((a, b) => {
+    const aCompleted = progress.completedStepIds.includes(a.id);
+    const bCompleted = progress.completedStepIds.includes(b.id);
+    if (aCompleted === bCompleted) return 0;
+    return aCompleted ? 1 : -1;
+  });
+
+  const currentStepId = track.steps.find(
+    (s) => !progress.completedStepIds.includes(s.id)
+  )?.id;
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="text-center">
+        <h2 className="text-xl font-bold">Coaching Tips</h2>
+        <p className="text-muted-foreground">
+          Review and take action on personalized tips
+        </p>
+        <p className="text-muted-foreground mt-2 text-sm">
+          {completedSteps} of {totalSteps} tips actioned
+        </p>
+      </div>
+
+      {/* Tips Stack */}
+      <div className="space-y-3">
+        {sortedSteps.map((step) => {
+          const isCompleted = progress.completedStepIds.includes(step.id);
+          const isCurrent = step.id === currentStepId;
+
+          return (
+            <TipCard
+              key={step.id}
+              step={step}
+              isCompleted={isCompleted}
+              isCurrent={isCurrent}
+              onComplete={() => onStepComplete?.(step.id)}
+              onDismiss={() => onStepComplete?.(step.id)} // Dismiss also completes
+            />
+          );
+        })}
+      </div>
+
+      {/* All done */}
+      {completedSteps === totalSteps && (
+        <div className="text-muted-foreground text-center">
+          <span className="text-2xl">✨</span>
+          <p className="mt-2">All tips have been addressed!</p>
+        </div>
+      )}
+    </div>
+  );
+}
+