Refactor UI imports and update component paths

Replaces imports from 'components/ui' with 'components/common' across the app and dashboard pages, and updates model and API imports to use new paths under 'lib'. Removes redundant authentication checks from several dashboard pages. Adds new dashboard components and utility files, and reorganizes hooks and services into the 'lib' directory for improved structure.

app/dashboard/chats/page.tsx

@@ -5,10 +5,10 @@ import { useRouter } from "next/navigation";
 import Dashboard from "@/components/dashboard/dashboard";
 import { MessageCircle, AlertCircle, RefreshCw } from "lucide-react";
 import dynamic from "next/dynamic";
-import { Skeleton } from "@/components/ui/skeleton";
-import { Card, CardContent, CardHeader } from "@/components/ui/card";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/common/skeleton";
+import { Card, CardContent, CardHeader } from "@/components/common/card";
+import { Alert, AlertDescription, AlertTitle } from "@/components/common/alert";
+import { Button } from "@/components/common/button";
 
 // Error Boundary Component
 interface ErrorBoundaryState {
@@ -95,7 +95,7 @@ function ChatTableSkeleton() {
     <Card className="animate-in fade-in duration-500 relative">
       {/* Subtle loading indicator */}
       <div className="absolute top-0 left-0 right-0 h-1 bg-muted overflow-hidden rounded-t-lg">
-        <div className="h-full bg-primary w-1/3" 
+        <div className="h-full bg-primary w-1/3"
           style={{
             background: 'linear-gradient(90deg, transparent, hsl(var(--primary)), transparent)',
             backgroundSize: '200% 100%',
@@ -103,7 +103,7 @@ function ChatTableSkeleton() {
           }}
         />
       </div>
-      
+
       <CardHeader>
         <div className="flex items-center justify-between">
           <Skeleton className="h-6 w-32" />
@@ -115,8 +115,8 @@ function ChatTableSkeleton() {
           <div className="border-b p-4">
             <div className="flex items-center gap-4">
               {['Customer', 'Last Message', 'Date', 'Status', 'Actions'].map((header, i) => (
-                <Skeleton 
-                  key={i} 
+                <Skeleton
+                  key={i}
                   className="h-4 w-20 flex-1 animate-in fade-in"
                   style={{
                     animationDelay: `${i * 50}ms`,
@@ -127,10 +127,10 @@ function ChatTableSkeleton() {
               ))}
             </div>
           </div>
-          
+
           {[...Array(6)].map((_, i) => (
-            <div 
-              key={i} 
+            <div
+              key={i}
               className="border-b last:border-b-0 p-4 animate-in fade-in"
               style={{
                 animationDelay: `${300 + i * 50}ms`,
@@ -163,19 +163,6 @@ function ChatTableSkeleton() {
 }
 
 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="space-y-6">
@@ -185,7 +172,7 @@ export default function ChatsPage() {
             Customer Chats
           </h1>
         </div>
-        
+
         <ErrorBoundary componentName="Chat Table">
           <Suspense fallback={<ChatTableSkeleton />}>
             <ChatTable />
@@ -194,4 +181,4 @@ export default function ChatsPage() {
       </div>
     </Dashboard>
   );
-} 
+}