fix inconsistency

app/dashboard/chats/page.tsx

@@ -1,24 +1,36 @@
-import React from "react";
-import { Metadata } from "next";
+"use client";
+
+import { useEffect } from "react";
+import { useRouter } from "next/navigation";
 import ChatList from "@/components/dashboard/ChatList";
 import Dashboard from "@/components/dashboard/dashboard";
-
-export const metadata: Metadata = {
-  title: "Customer Chats",
-  description: "Manage conversations with your customers",
-};
+import { MessageCircle } from "lucide-react";
 
 export default function ChatsPage() {
+  const router = useRouter();
+
+  useEffect(() => {
+    const authToken = document.cookie
+      .split("; ")
+      .find((row) => row.startsWith("Authorization="))
+      ?.split("=")[1];
+
+    if (!authToken) {
+      router.push("/login");
+    }
+  }, [router]);
+
   return (
     <Dashboard>
-      <div className="container mx-auto py-6 space-y-6">
+      <div className="space-y-6">
         <div className="flex items-center justify-between">
-          <h1 className="text-3xl font-bold tracking-tight">Customer Chats</h1>
+          <h1 className="text-2xl font-semibold text-gray-900 dark:text-white flex items-center">
+            <MessageCircle className="mr-2 h-6 w-6" />
+            Customer Chats
+          </h1>
         </div>
         
-        <div className="grid grid-cols-1 gap-6">
-          <ChatList />
-        </div>
+        <ChatList />
       </div>
     </Dashboard>
   );