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

src/app/dashboard/invoices/[id]/page.tsx

@@ -1,63 +1,72 @@
-import { auth } from "~/server/auth";
 import { api, HydrateClient } from "~/trpc/server";
-import { Button } from "~/components/ui/button";
 import { InvoiceView } from "~/components/invoice-view";
+import { InvoiceForm } from "~/components/invoice-form";
+
 import Link from "next/link";
 import { notFound } from "next/navigation";
-import { Edit } from "lucide-react";
+import { Edit, Eye, ArrowLeft } from "lucide-react";
+import { UnifiedInvoicePage } from "./_components/unified-invoice-page";
 
 interface InvoicePageProps {
   params: Promise<{ id: string }>;
+  searchParams: Promise<{ mode?: string }>;
 }
 
-export default async function InvoicePage({ params }: InvoicePageProps) {
-  const session = await auth();
+export default async function InvoicePage({
+  params,
+  searchParams,
+}: InvoicePageProps) {
   const { id } = await params;
-
-  if (!session?.user) {
-    return (
-      <div className="flex min-h-screen items-center justify-center bg-gradient-to-br from-emerald-50 via-white to-teal-50">
-        <div className="text-center">
-          <h1 className="text-4xl font-bold mb-4 bg-gradient-to-r from-emerald-600 to-teal-600 bg-clip-text text-transparent">Access Denied</h1>
-          <p className="text-muted-foreground mb-8">Please sign in to view invoices</p>
-          <Link href="/api/auth/signin">
-            <Button 
-              size="lg"
-              className="bg-gradient-to-r from-emerald-600 to-teal-600 hover:from-emerald-700 hover:to-teal-700 text-white font-medium shadow-lg hover:shadow-xl transition-all duration-200"
-            >
-              Sign In
-            </Button>
-          </Link>
-        </div>
-      </div>
-    );
-  }
-
-  // Prefetch invoice data
-  try {
-    await api.invoices.getById.prefetch({ id: id });
-  } catch (error) {
-    notFound();
-  }
+  const { mode = "view" } = await searchParams;
 
   return (
     <div>
-      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-8 gap-4">
-        <div>
-          <h1 className="text-3xl font-bold bg-gradient-to-r from-emerald-600 to-teal-600 bg-clip-text text-transparent">Invoice Details</h1>
-          <p className="text-gray-600 mt-1 text-lg">View and manage invoice information.</p>
-        </div>
-        <div className="flex gap-3">
-          <Button asChild variant="outline" size="lg" className="bg-white/80 border-gray-200 hover:bg-gray-50 text-gray-700 font-medium shadow-lg hover:shadow-xl">
-            <Link href={`/dashboard/invoices/${id}/edit`}>
-              <Edit className="mr-2 h-5 w-5" /> Edit Invoice
+      <div className="mb-6">
+        <div className="mb-4 flex items-center justify-between">
+          <div>
+            <h1 className="bg-gradient-to-r from-emerald-600 to-teal-600 bg-clip-text text-3xl font-bold text-transparent">
+              Invoice Details
+            </h1>
+            <p className="mt-1 text-lg text-gray-600">
+              View and manage invoice information.
+            </p>
+          </div>
+
+          <div className="relative flex rounded-lg border border-gray-200 bg-gray-100 p-1">
+            <div
+              className={`absolute top-1 bottom-1 rounded-md bg-white shadow-sm transition-all duration-300 ease-in-out ${
+                mode === "view" ? "left-1 w-10" : "left-11 w-10"
+              }`}
+            />
+            <Link
+              href={`/dashboard/invoices/${id}?mode=view`}
+              className={`relative z-10 rounded-md px-3 py-2 transition-all duration-200 ${
+                mode === "view"
+                  ? "text-emerald-600"
+                  : "text-gray-600 hover:bg-gray-50 hover:text-gray-800"
+              }`}
+            >
+              <Eye className="h-4 w-4" />
             </Link>
-          </Button>
+            <Link
+              href={`/dashboard/invoices/${id}?mode=edit`}
+              className={`relative z-10 rounded-md px-3 py-2 transition-all duration-200 ${
+                mode === "edit"
+                  ? "text-emerald-600"
+                  : "text-gray-600 hover:bg-gray-50 hover:text-gray-800"
+              }`}
+            >
+              <Edit className="h-4 w-4" />
+            </Link>
+          </div>
+        </div>
+
+        <div className="mt-4">
+          <HydrateClient>
+            <UnifiedInvoicePage invoiceId={id} mode={mode} />
+          </HydrateClient>
         </div>
       </div>
-      <HydrateClient>
-        <InvoiceView invoiceId={id} />
-      </HydrateClient>
     </div>
   );
-} 
+}