revops + onboarding

src/components/dashboard/OnboardingChecklist.tsx

@@ -0,0 +1,133 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import Link from 'next/link';
+import { ArrowRight, Check, QrCode, Sparkles, X } from 'lucide-react';
+import { Button } from '@/components/ui/Button';
+import { Badge } from '@/components/ui/Badge';
+import { Card, CardContent } from '@/components/ui/Card';
+import {
+  getChecklistItems,
+  ONBOARDING_CHECKLIST_DISMISS_KEY,
+} from '@/lib/revops';
+
+type OnboardingChecklistProps = {
+  state: {
+    signupSourceSelfReported?: string | null;
+    primaryUseCase?: string | null;
+    firstQrCreatedAt?: string | null;
+    firstDynamicQrAt?: string | null;
+    firstScanAt?: string | null;
+    activationAt?: string | null;
+  } | null;
+};
+
+export function OnboardingChecklist({ state }: OnboardingChecklistProps) {
+  const [dismissed, setDismissed] = useState(false);
+
+  useEffect(() => {
+    setDismissed(localStorage.getItem(ONBOARDING_CHECKLIST_DISMISS_KEY) === '1');
+  }, []);
+
+  if (!state || state.firstScanAt || dismissed) {
+    return null;
+  }
+
+  const items = getChecklistItems(state);
+  const completed = items.filter((item) => item.done).length;
+  const progress = Math.round((completed / items.length) * 100);
+
+  return (
+    <Card className="overflow-hidden rounded-[28px] border border-slate-200 bg-gradient-to-br from-white via-slate-50 to-blue-50 p-0 shadow-lg shadow-slate-200/60">
+      <div className="border-b border-slate-200/80 bg-slate-950 px-6 py-6 text-white">
+        <div className="flex flex-wrap items-start justify-between gap-4">
+          <div className="max-w-2xl">
+            <div className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/10 px-3 py-1 text-xs font-semibold uppercase tracking-[0.16em] text-white/80">
+              <Sparkles className="h-3.5 w-3.5" />
+              Activation path
+            </div>
+            <h3 className="mt-4 text-2xl font-semibold tracking-tight text-white">Get to your first result faster</h3>
+            <p className="mt-3 text-sm leading-7 text-slate-300">
+              Finish the onboarding checklist to unlock a cleaner dashboard state and move from setup into real usage.
+            </p>
+          </div>
+          <div className="flex items-center gap-3">
+            <Badge className="border border-white/10 bg-white/10 px-3 py-1 text-white" variant="default">
+              {completed}/{items.length} done
+            </Badge>
+            <button
+              type="button"
+              aria-label="Dismiss onboarding checklist"
+              className="flex h-10 w-10 items-center justify-center rounded-2xl border border-white/10 bg-white/10 text-white/80 transition hover:text-white"
+              onClick={() => {
+                localStorage.setItem(ONBOARDING_CHECKLIST_DISMISS_KEY, '1');
+                setDismissed(true);
+              }}
+            >
+              <X className="h-4 w-4" />
+            </button>
+          </div>
+        </div>
+
+        <div className="mt-5 h-2 overflow-hidden rounded-full bg-white/10">
+          <div
+            className="h-full rounded-full bg-gradient-to-r from-primary-400 via-cyan-300 to-emerald-300 transition-all duration-300"
+            style={{ width: `${progress}%` }}
+          />
+        </div>
+      </div>
+
+      <CardContent className="space-y-5 p-6">
+        <div className="grid gap-3 md:grid-cols-2">
+          {items.map((item) => (
+            <div
+              key={item.id}
+              className={`rounded-[22px] border p-4 transition-colors ${
+                item.done
+                  ? 'border-emerald-200 bg-emerald-50'
+                  : 'border-slate-200 bg-white'
+              }`}
+            >
+              <div className="flex items-start gap-3">
+                <div
+                  className={`flex h-10 w-10 items-center justify-center rounded-2xl ${
+                    item.done ? 'bg-emerald-500 text-slate-950' : 'bg-slate-100 text-slate-500'
+                  }`}
+                >
+                  {item.done ? <Check className="h-4 w-4" /> : <QrCode className="h-4 w-4" />}
+                </div>
+                <div className="min-w-0">
+                  <p className={`text-sm font-semibold ${item.done ? 'text-emerald-900' : 'text-slate-900'}`}>
+                    {item.label}
+                  </p>
+                  <p className="mt-1 text-sm leading-6 text-slate-600">
+                    {item.done ? 'Completed and saved in your setup state.' : 'Still pending. Finish this to move closer to activation.'}
+                  </p>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        <div className="flex flex-col gap-3 sm:flex-row">
+          <Link href="/onboarding" className="block">
+            <Button className="h-11 rounded-2xl px-5 text-sm font-semibold">
+              Continue onboarding
+              <ArrowRight className="ml-2 h-4 w-4" />
+            </Button>
+          </Link>
+          <Button
+            variant="outline"
+            className="h-11 rounded-2xl border-slate-300 px-5 text-sm font-semibold"
+            onClick={() => {
+              localStorage.setItem(ONBOARDING_CHECKLIST_DISMISS_KEY, '1');
+              setDismissed(true);
+            }}
+          >
+            Dismiss
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}