Add Turso/Vercel deployment configuration

- Updated database connection to support Turso auth token - Added vercel.json with bun build configuration - Updated environment schema for production deployment - Added new features and components for production readiness
2025-07-12 01:42:43 -04:00
parent 2d217fab47
commit a1b40e7a9c
75 changed files with 8821 additions and 1803 deletions
@@ -1,8 +1,8 @@
 "use client";

 import Link from "next/link";
-import { useState } from "react";
-import { useRouter } from "next/navigation";
+import { useState, Suspense } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
 import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
 import { Input } from "~/components/ui/input";
 import { Button } from "~/components/ui/button";
@@ -11,8 +11,10 @@ import { toast } from "sonner";
 import { Logo } from "~/components/logo";
 import { User, Mail, Lock, ArrowRight } from "lucide-react";

-export default function RegisterPage() {
+function RegisterForm() {
  const router = useRouter();
+  const searchParams = useSearchParams();
+  const callbackUrl = searchParams.get("callbackUrl") ?? "/dashboard";
  const [firstName, setFirstName] = useState("");
  const [lastName, setLastName] = useState("");
  const [email, setEmail] = useState("");
@@ -25,17 +27,21 @@ export default function RegisterPage() {
    const res = await fetch("/api/auth/register", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ 
-        firstName, 
-        lastName, 
-        email, 
-        password 
+      body: JSON.stringify({
+        firstName,
+        lastName,
+        email,
+        password,
      }),
    });
    setLoading(false);
    if (res.ok) {
      toast.success("Account created successfully! Please sign in.");
-      router.push("/auth/signin");
+      const signInUrl =
+        callbackUrl !== "/dashboard"
+          ? `/auth/signin?callbackUrl=${encodeURIComponent(callbackUrl)}`
+          : "/auth/signin";
+      router.push(signInUrl);
    } else {
      const error = await res.text();
      toast.error(error || "Failed to create account");
@@ -43,21 +49,25 @@ export default function RegisterPage() {
  }

  return (
-    <div className="min-h-screen bg-gradient-to-br from-green-50 to-emerald-100 flex items-center justify-center p-4">
+    <div className="flex min-h-screen items-center justify-center bg-gradient-to-br from-green-50 to-emerald-100 p-4">
      <div className="w-full max-w-md space-y-8">
        {/* Logo and Welcome */}
-        <div className="text-center space-y-4">
+        <div className="space-y-4 text-center">
          <Logo size="lg" className="mx-auto" />
          <div>
            <h1 className="text-2xl font-bold text-gray-900">Join beenvoice</h1>
-            <p className="text-gray-600 mt-2">Create your account to get started</p>
+            <p className="mt-2 text-gray-600">
+              Create your account to get started
+            </p>
          </div>
        </div>

        {/* Registration Form */}
-        <Card className="shadow-xl border-0">
+        <Card className="border-0 shadow-xl">
          <CardHeader className="space-y-1">
-            <CardTitle className="text-xl text-center">Create Account</CardTitle>
+            <CardTitle className="text-center text-xl">
+              Create Account
+            </CardTitle>
          </CardHeader>
          <CardContent>
            <form onSubmit={handleRegister} className="space-y-4">
@@ -65,12 +75,12 @@ export default function RegisterPage() {
                <div className="space-y-2">
                  <Label htmlFor="firstName">First Name</Label>
                  <div className="relative">
-                    <User className="absolute left-3 top-3 h-4 w-4 text-gray-400" />
+                    <User className="absolute top-3 left-3 h-4 w-4 text-gray-400" />
                    <Input
                      id="firstName"
                      type="text"
                      value={firstName}
-                      onChange={e => setFirstName(e.target.value)}
+                      onChange={(e) => setFirstName(e.target.value)}
                      required
                      autoFocus
                      className="pl-10"
@@ -81,12 +91,12 @@ export default function RegisterPage() {
                <div className="space-y-2">
                  <Label htmlFor="lastName">Last Name</Label>
                  <div className="relative">
-                    <User className="absolute left-3 top-3 h-4 w-4 text-gray-400" />
+                    <User className="absolute top-3 left-3 h-4 w-4 text-gray-400" />
                    <Input
                      id="lastName"
                      type="text"
                      value={lastName}
-                      onChange={e => setLastName(e.target.value)}
+                      onChange={(e) => setLastName(e.target.value)}
                      required
                      className="pl-10"
                      placeholder="Last name"
@@ -97,12 +107,12 @@ export default function RegisterPage() {
              <div className="space-y-2">
                <Label htmlFor="email">Email</Label>
                <div className="relative">
-                  <Mail className="absolute left-3 top-3 h-4 w-4 text-gray-400" />
+                  <Mail className="absolute top-3 left-3 h-4 w-4 text-gray-400" />
                  <Input
                    id="email"
                    type="email"
                    value={email}
-                    onChange={e => setEmail(e.target.value)}
+                    onChange={(e) => setEmail(e.target.value)}
                    required
                    className="pl-10"
                    placeholder="Enter your email"
@@ -112,19 +122,21 @@ export default function RegisterPage() {
              <div className="space-y-2">
                <Label htmlFor="password">Password</Label>
                <div className="relative">
-                  <Lock className="absolute left-3 top-3 h-4 w-4 text-gray-400" />
+                  <Lock className="absolute top-3 left-3 h-4 w-4 text-gray-400" />
                  <Input
                    id="password"
                    type="password"
                    value={password}
-                    onChange={e => setPassword(e.target.value)}
+                    onChange={(e) => setPassword(e.target.value)}
                    required
                    minLength={6}
                    className="pl-10"
                    placeholder="Create a password"
                  />
                </div>
-                <p className="text-xs text-gray-500">Must be at least 6 characters</p>
+                <p className="text-xs text-gray-500">
+                  Must be at least 6 characters
+                </p>
              </div>
              <Button type="submit" className="w-full" disabled={loading}>
                {loading ? (
@@ -139,7 +151,10 @@ export default function RegisterPage() {
            </form>
            <div className="mt-6 text-center text-sm">
              <span className="text-gray-600">Already have an account? </span>
-              <Link href="/auth/signin" className="text-green-600 hover:text-green-700 font-medium">
+              <Link
+                href="/auth/signin"
+                className="font-medium text-green-600 hover:text-green-700"
+              >
                Sign in here
              </Link>
            </div>
@@ -147,7 +162,7 @@ export default function RegisterPage() {
        </Card>

        {/* Features */}
-        <div className="text-center space-y-4">
+        <div className="space-y-4 text-center">
          <p className="text-sm text-gray-500">Start invoicing like a pro</p>
          <div className="flex justify-center space-x-6 text-xs text-gray-400">
            <span>✓ Free to start</span>
@@ -158,4 +173,28 @@ export default function RegisterPage() {
      </div>
    </div>
  );
-} 
+}
+
+export default function RegisterPage() {
+  return (
+    <Suspense
+      fallback={
+        <div className="flex min-h-screen items-center justify-center bg-gradient-to-br from-green-50 to-emerald-100 p-4">
+          <div className="w-full max-w-md space-y-8">
+            <div className="space-y-4 text-center">
+              <Logo size="lg" className="mx-auto" />
+              <div>
+                <h1 className="text-2xl font-bold text-gray-900">
+                  Join beenvoice
+                </h1>
+                <p className="mt-2 text-gray-600">Loading...</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      }
+    >
+      <RegisterForm />
+    </Suspense>
+  );
+}
@@ -1,8 +1,8 @@
 "use client";

 import Link from "next/link";
-import { useState } from "react";
-import { useRouter } from "next/navigation";
+import { useState, Suspense } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
 import { signIn } from "next-auth/react";
 import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
 import { Input } from "~/components/ui/input";
@@ -12,8 +12,10 @@ import { toast } from "sonner";
 import { Logo } from "~/components/logo";
 import { Mail, Lock, ArrowRight } from "lucide-react";

-export default function SignInPage() {
+function SignInForm() {
  const router = useRouter();
+  const searchParams = useSearchParams();
+  const callbackUrl = searchParams.get("callbackUrl") ?? "/dashboard";
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [loading, setLoading] = useState(false);
@@ -21,7 +23,7 @@ export default function SignInPage() {
  async function handleSignIn(e: React.FormEvent) {
    e.preventDefault();
    setLoading(true);
-    
+
    const result = await signIn("credentials", {
      email,
      password,
@@ -29,44 +31,46 @@ export default function SignInPage() {
    });

    setLoading(false);
-    
+
    if (result?.error) {
      toast.error("Invalid email or password");
    } else {
      toast.success("Signed in successfully!");
-      router.push("/dashboard");
+      router.push(callbackUrl);
      router.refresh();
    }
  }

  return (
-    <div className="min-h-screen bg-gradient-to-br from-green-50 to-emerald-100 flex items-center justify-center p-4">
+    <div className="flex min-h-screen items-center justify-center bg-gradient-to-br from-green-50 to-emerald-100 p-4">
      <div className="w-full max-w-md space-y-8">
        {/* Logo and Welcome */}
-        <div className="text-center space-y-4">
+        <div className="space-y-4 text-center">
          <Logo size="lg" className="mx-auto" />
          <div>
            <h1 className="text-2xl font-bold text-gray-900">Welcome back</h1>
-            <p className="text-gray-600 mt-2">Sign in to your beenvoice account</p>
+            <p className="mt-2 text-gray-600">
+              Sign in to your beenvoice account
+            </p>
          </div>
        </div>

        {/* Sign In Form */}
-        <Card className="shadow-xl border-0">
+        <Card className="border-0 shadow-xl">
          <CardHeader className="space-y-1">
-            <CardTitle className="text-xl text-center">Sign In</CardTitle>
+            <CardTitle className="text-center text-xl">Sign In</CardTitle>
          </CardHeader>
          <CardContent>
            <form onSubmit={handleSignIn} className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="email">Email</Label>
                <div className="relative">
-                  <Mail className="absolute left-3 top-3 h-4 w-4 text-gray-400" />
+                  <Mail className="absolute top-3 left-3 h-4 w-4 text-gray-400" />
                  <Input
                    id="email"
                    type="email"
                    value={email}
-                    onChange={e => setEmail(e.target.value)}
+                    onChange={(e) => setEmail(e.target.value)}
                    required
                    autoFocus
                    className="pl-10"
@@ -77,12 +81,12 @@ export default function SignInPage() {
              <div className="space-y-2">
                <Label htmlFor="password">Password</Label>
                <div className="relative">
-                  <Lock className="absolute left-3 top-3 h-4 w-4 text-gray-400" />
+                  <Lock className="absolute top-3 left-3 h-4 w-4 text-gray-400" />
                  <Input
                    id="password"
                    type="password"
                    value={password}
-                    onChange={e => setPassword(e.target.value)}
+                    onChange={(e) => setPassword(e.target.value)}
                    required
                    className="pl-10"
                    placeholder="Enter your password"
@@ -101,8 +105,13 @@ export default function SignInPage() {
              </Button>
            </form>
            <div className="mt-6 text-center text-sm">
-              <span className="text-gray-600">Don&apos;t have an account? </span>
-              <Link href="/auth/register" className="text-green-600 hover:text-green-700 font-medium">
+              <span className="text-gray-600">
+                Don&apos;t have an account?{" "}
+              </span>
+              <Link
+                href="/auth/register"
+                className="font-medium text-green-600 hover:text-green-700"
+              >
                Create one now
              </Link>
            </div>
@@ -110,8 +119,10 @@ export default function SignInPage() {
        </Card>

        {/* Features */}
-        <div className="text-center space-y-4">
-          <p className="text-sm text-gray-500">Simple invoicing for freelancers and small businesses</p>
+        <div className="space-y-4 text-center">
+          <p className="text-sm text-gray-500">
+            Simple invoicing for freelancers and small businesses
+          </p>
          <div className="flex justify-center space-x-6 text-xs text-gray-400">
            <span>✓ Easy client management</span>
            <span>✓ Professional invoices</span>
@@ -121,4 +132,28 @@ export default function SignInPage() {
      </div>
    </div>
  );
-} 
+}
+
+export default function SignInPage() {
+  return (
+    <Suspense
+      fallback={
+        <div className="flex min-h-screen items-center justify-center bg-gradient-to-br from-green-50 to-emerald-100 p-4">
+          <div className="w-full max-w-md space-y-8">
+            <div className="space-y-4 text-center">
+              <Logo size="lg" className="mx-auto" />
+              <div>
+                <h1 className="text-2xl font-bold text-gray-900">
+                  Welcome back
+                </h1>
+                <p className="mt-2 text-gray-600">Loading...</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      }
+    >
+      <SignInForm />
+    </Suspense>
+  );
+}