refactor: move from next js to vite and tanstack router

apps/ui/src/components/views/setup-view/steps/complete-step.tsx

@@ -0,0 +1,46 @@
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { CheckCircle2, AlertCircle, Shield, Sparkles } from "lucide-react";
+import { useSetupStore } from "@/store/setup-store";
+import { useAppStore } from "@/store/app-store";
+
+interface CompleteStepProps {
+  onFinish: () => void;
+}
+
+export function CompleteStep({ onFinish }: CompleteStepProps) {
+  const { claudeCliStatus, claudeAuthStatus } = useSetupStore();
+  const { apiKeys } = useAppStore();
+
+  const claudeReady =
+    (claudeCliStatus?.installed && claudeAuthStatus?.authenticated) ||
+    apiKeys.anthropic;
+
+  return (
+    <div className="text-center space-y-6">
+      <div className="w-20 h-20 rounded-full bg-gradient-to-br from-green-500 to-emerald-600 shadow-lg shadow-green-500/30 flex items-center justify-center mx-auto">
+        <CheckCircle2 className="w-10 h-10 text-white" />
+      </div>
+
+      <div>
+        <h2 className="text-3xl font-bold text-foreground mb-3">
+          Setup Complete!
+        </h2>
+        <p className="text-muted-foreground max-w-md mx-auto">
+          Your development environment is configured. You&apos;re ready to start
+          building with AI-powered assistance.
+        </p>
+      </div>
+
+      <Button
+        size="lg"
+        className="bg-gradient-to-r from-brand-500 to-brand-600 hover:from-brand-600 hover:to-brand-700 text-white"
+        onClick={onFinish}
+        data-testid="setup-finish-button"
+      >
+        <Sparkles className="w-4 h-4 mr-2" />
+        Start Building
+      </Button>
+    </div>
+  );
+}