fix

app/dashboard/chats/[id]/page.tsx

@@ -8,10 +8,11 @@ export const metadata: Metadata = {
   description: "View and respond to customer messages",
 };
 
-export default function ChatDetailPage({ params }: { params: { id: string } }) {
+export default async function ChatDetailPage({ params }: { params: { id: string } }) {
+  const chatId = await params.id;
   return (
     <Dashboard>
-      <ChatDetail chatId={params.id} />
+      <ChatDetail chatId={chatId} />
     </Dashboard>
   );
 } 

app/dashboard/chats/new/page.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Metadata } from "next";
+import { Metadata, Viewport } from "next";
 import NewChatForm from "@/components/dashboard/NewChatForm";
 import Dashboard from "@/components/dashboard/dashboard";
 
@@ -8,6 +8,15 @@ export const metadata: Metadata = {
   description: "Begin a new conversation with a customer",
 };
 
+export const viewport: Viewport = {
+  width: "device-width",
+  initialScale: 1,
+  themeColor: [
+    { media: "(prefers-color-scheme: dark)", color: "#000000" },
+    { media: "(prefers-color-scheme: light)", color: "#D53F8C" },
+  ],
+};
+
 export default function NewChatPage() {
   return (
     <Dashboard>

app/dashboard/promotions/page.tsx

@@ -1,6 +1,6 @@
 import { Suspense } from "react";
 import Dashboard from "@/components/dashboard/dashboard";
-import { Metadata } from "next";
+import { Metadata, Viewport } from "next";
 import PromotionsList from "@/components/dashboard/promotions/PromotionsList";
 import PromotionsPageSkeleton from "@/components/dashboard/promotions/PromotionsPageSkeleton";
 
@@ -9,6 +9,15 @@ export const metadata: Metadata = {
   description: "Manage promotion codes for your store on Ember Market"
 };
 
+export const viewport: Viewport = {
+  width: "device-width",
+  initialScale: 1,
+  themeColor: [
+    { media: "(prefers-color-scheme: dark)", color: "#000000" },
+    { media: "(prefers-color-scheme: light)", color: "#D53F8C" },
+  ],
+};
+
 export default function PromotionsPage() {
   return (
     <Dashboard>

app/layout.tsx

@@ -4,10 +4,11 @@ import { ThemeProvider } from "@/components/layout/theme-provider"
 import { Toaster } from "sonner"
 import type React from "react"
 import KeepOnline from "@/components/KeepOnline"
+import { Metadata, Viewport } from "next"
 
 const inter = Inter({ subsets: ["latin"] })
   
-export const metadata = {
+export const metadata: Metadata = {
   title: "Ember | E-Commerce Management Platform",
   description: "Transform your e-commerce experience with Ember, a comprehensive platform that integrates secure cryptocurrency payments, efficient order management, and advanced analytics to help you optimize performance, boost sales, and expand your customer base",
   keywords: "e-commerce, marketplace, cryptocurrency payments, order management, vendor platform, online business",
@@ -56,16 +57,17 @@ export const metadata = {
     description: "Streamlined e-commerce management with secure cryptocurrency payments",
     images: ["/twitter-image.jpg"],
   },
-  viewport: {
-    width: "device-width",
-    initialScale: 1,
-    maximumScale: 1,
-  },
+}
+
+export const viewport: Viewport = {
+  width: "device-width",
+  initialScale: 1,
+  maximumScale: 1,
   themeColor: [
     { media: "(prefers-color-scheme: dark)", color: "#000000" },
     { media: "(prefers-color-scheme: light)", color: "#D53F8C" },
   ],
-}
+};
 
 export default function RootLayout({
   children,

app/not-found.tsx

@@ -0,0 +1,40 @@
+import { Metadata, Viewport } from "next";
+import Link from "next/link";
+import { buttonVariants } from "@/components/ui/button";
+import { ArrowLeft } from "lucide-react";
+
+export const metadata: Metadata = {
+  title: "Page Not Found | Ember Market",
+  description: "The page you're looking for doesn't exist or has been moved.",
+};
+
+export const viewport: Viewport = {
+  width: "device-width",
+  initialScale: 1,
+  themeColor: [
+    { media: "(prefers-color-scheme: dark)", color: "#000000" },
+    { media: "(prefers-color-scheme: light)", color: "#D53F8C" },
+  ],
+};
+
+export default function NotFound() {
+  return (
+    <div className="h-screen w-full flex flex-col items-center justify-center gap-6 bg-background text-foreground">
+      <div className="flex flex-col items-center gap-2">
+        <h1 className="text-5xl font-bold">404</h1>
+        <h2 className="text-2xl font-semibold">Page Not Found</h2>
+        <p className="text-muted-foreground text-center max-w-md">
+          The page you're looking for doesn't exist or has been moved.
+        </p>
+      </div>
+      
+      <Link 
+        href="/" 
+        className={buttonVariants({ variant: "default" })}
+      >
+        <ArrowLeft className="mr-2 h-4 w-4" />
+        Back to Home
+      </Link>
+    </div>
+  );
+}