Remove Tailwind CSS configuration file

app/dashboard/page.tsx

@@ -4,6 +4,19 @@ import { useSession } from "next-auth/react";
 import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 import { FC } from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import {
+  BarChart3,
+  MessageSquare,
+  Settings,
+  Users,
+  ArrowRight,
+  TrendingUp,
+  Shield,
+  Zap,
+} from "lucide-react";
 
 const DashboardPage: FC = () => {
   const { data: session, status } = useSession();
@@ -21,82 +34,223 @@ const DashboardPage: FC = () => {
 
   if (loading) {
     return (
-      <div className="flex items-center justify-center min-h-[40vh]">
-        <div className="text-center">
-          <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-sky-500 mx-auto mb-4"></div>
-          <p className="text-lg text-gray-600">Loading dashboard...</p>
+      <div className="flex items-center justify-center min-h-[60vh]">
+        <div className="text-center space-y-4">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto"></div>
+          <p className="text-lg text-muted-foreground">Loading dashboard...</p>
         </div>
       </div>
     );
   }
 
+  const navigationCards = [
+    {
+      title: "Analytics Overview",
+      description: "View comprehensive metrics, charts, and insights from your chat sessions",
+      icon: <BarChart3 className="h-6 w-6" />,
+      href: "/dashboard/overview",
+      variant: "primary" as const,
+      features: ["Real-time metrics", "Interactive charts", "Trend analysis"],
+    },
+    {
+      title: "Session Browser",
+      description: "Browse, search, and analyze individual conversation sessions",
+      icon: <MessageSquare className="h-6 w-6" />,
+      href: "/dashboard/sessions",
+      variant: "success" as const,
+      features: ["Session search", "Conversation details", "Export data"],
+    },
+    ...(session?.user?.role === "ADMIN"
+      ? [
+          {
+            title: "Company Settings",
+            description: "Configure company settings, integrations, and API connections",
+            icon: <Settings className="h-6 w-6" />,
+            href: "/dashboard/company",
+            variant: "warning" as const,
+            features: ["API configuration", "Integration settings", "Data management"],
+            adminOnly: true,
+          },
+          {
+            title: "User Management",
+            description: "Invite team members and manage user accounts and permissions",
+            icon: <Users className="h-6 w-6" />,
+            href: "/dashboard/users",
+            variant: "default" as const,
+            features: ["User invitations", "Role management", "Access control"],
+            adminOnly: true,
+          },
+        ]
+      : []),
+  ];
+
+  const getCardClasses = (variant: string) => {
+    switch (variant) {
+      case "primary":
+        return "border-primary/20 bg-gradient-to-br from-primary/5 to-primary/10 hover:from-primary/10 hover:to-primary/15";
+      case "success":
+        return "border-green-200 bg-gradient-to-br from-green-50 to-green-100 hover:from-green-100 hover:to-green-150 dark:border-green-800 dark:from-green-950 dark:to-green-900";
+      case "warning":
+        return "border-amber-200 bg-gradient-to-br from-amber-50 to-amber-100 hover:from-amber-100 hover:to-amber-150 dark:border-amber-800 dark:from-amber-950 dark:to-amber-900";
+      default:
+        return "border-border bg-gradient-to-br from-card to-muted/20 hover:from-muted/30 hover:to-muted/40";
+    }
+  };
+
+  const getIconClasses = (variant: string) => {
+    switch (variant) {
+      case "primary":
+        return "bg-primary/10 text-primary border-primary/20";
+      case "success":
+        return "bg-green-100 text-green-600 border-green-200 dark:bg-green-900 dark:text-green-400 dark:border-green-800";
+      case "warning":
+        return "bg-amber-100 text-amber-600 border-amber-200 dark:bg-amber-900 dark:text-amber-400 dark:border-amber-800";
+      default:
+        return "bg-muted text-muted-foreground border-border";
+    }
+  };
+
   return (
-    <div className="space-y-6">
-      <div className="bg-white rounded-xl shadow p-6">
-        <h1 className="text-2xl font-bold mb-4">Dashboard</h1>
-
-        <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
-          <div className="bg-gradient-to-br from-sky-50 to-sky-100 p-6 rounded-xl shadow-sm hover:shadow-md transition-shadow">
-            <h2 className="text-lg font-semibold text-sky-700">Analytics</h2>
-            <p className="text-gray-600 mt-2 mb-4">
-              View your chat session metrics and analytics
-            </p>
-            <button
-              onClick={() => router.push("/dashboard/overview")}
-              className="bg-sky-500 hover:bg-sky-600 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors"
-            >
-              View Analytics
-            </button>
-          </div>
-
-          <div className="bg-gradient-to-br from-emerald-50 to-emerald-100 p-6 rounded-xl shadow-sm hover:shadow-md transition-shadow">
-            <h2 className="text-lg font-semibold text-emerald-700">Sessions</h2>
-            <p className="text-gray-600 mt-2 mb-4">
-              Browse and analyze conversation sessions
-            </p>
-            <button
-              onClick={() => router.push("/dashboard/sessions")}
-              className="bg-emerald-500 hover:bg-emerald-600 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors"
-            >
-              View Sessions
-            </button>
-          </div>
-
-          {session?.user?.role === "ADMIN" && (
-            <div className="bg-gradient-to-br from-purple-50 to-purple-100 p-6 rounded-xl shadow-sm hover:shadow-md transition-shadow">
-              <h2 className="text-lg font-semibold text-purple-700">
-                Company Settings
-              </h2>
-              <p className="text-gray-600 mt-2 mb-4">
-                Configure company settings and integrations
+    <div className="space-y-8">
+      {/* Welcome Header */}
+      <Card className="border-0 bg-gradient-to-r from-primary/5 via-primary/10 to-primary/5">
+        <CardHeader>
+          <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
+            <div className="space-y-2">
+              <div className="flex items-center gap-3">
+                <h1 className="text-3xl font-bold tracking-tight">
+                  Welcome back, {session?.user?.name || "User"}!
+                </h1>
+                <Badge variant="secondary" className="text-xs">
+                  {session?.user?.role}
+                </Badge>
+              </div>
+              <p className="text-muted-foreground">
+                Choose a section below to explore your analytics dashboard
               </p>
-              <button
-                onClick={() => router.push("/dashboard/company")}
-                className="bg-purple-500 hover:bg-purple-600 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors"
-              >
-                Manage Settings
-              </button>
             </div>
-          )}
+            
+            <div className="flex items-center gap-2">
+              <div className="flex items-center gap-1 text-sm text-muted-foreground">
+                <Shield className="h-4 w-4" />
+                Secure Dashboard
+              </div>
+            </div>
+          </div>
+        </CardHeader>
+      </Card>
 
-          {session?.user?.role === "ADMIN" && (
-            <div className="bg-gradient-to-br from-amber-50 to-amber-100 p-6 rounded-xl shadow-sm hover:shadow-md transition-shadow">
-              <h2 className="text-lg font-semibold text-amber-700">
-                User Management
-              </h2>
-              <p className="text-gray-600 mt-2 mb-4">
-                Invite and manage user accounts
-              </p>
-              <button
-                onClick={() => router.push("/dashboard/users")}
-                className="bg-amber-500 hover:bg-amber-600 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors"
+      {/* Navigation Cards */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        {navigationCards.map((card, index) => (
+          <Card
+            key={index}
+            className={`relative overflow-hidden transition-all duration-200 hover:shadow-lg hover:-translate-y-0.5 cursor-pointer ${getCardClasses(
+              card.variant
+            )}`}
+            onClick={() => router.push(card.href)}
+          >
+            {/* Subtle gradient overlay */}
+            <div className="absolute inset-0 bg-gradient-to-br from-white/50 to-transparent dark:from-white/5 pointer-events-none" />
+            
+            <CardHeader className="relative">
+              <div className="flex items-start justify-between">
+                <div className="space-y-3">
+                  <div className="flex items-center gap-3">
+                    <div
+                      className={`flex h-12 w-12 shrink-0 items-center justify-center rounded-full border transition-colors ${getIconClasses(
+                        card.variant
+                      )}`}
+                    >
+                      {card.icon}
+                    </div>
+                    <div>
+                      <CardTitle className="text-xl font-semibold flex items-center gap-2">
+                        {card.title}
+                        {card.adminOnly && (
+                          <Badge variant="outline" className="text-xs">
+                            Admin
+                          </Badge>
+                        )}
+                      </CardTitle>
+                    </div>
+                  </div>
+                  <p className="text-muted-foreground leading-relaxed">
+                    {card.description}
+                  </p>
+                </div>
+              </div>
+            </CardHeader>
+
+            <CardContent className="relative space-y-4">
+              {/* Features List */}
+              <div className="space-y-2">
+                {card.features.map((feature, featureIndex) => (
+                  <div key={featureIndex} className="flex items-center gap-2 text-sm">
+                    <div className="h-1.5 w-1.5 rounded-full bg-current opacity-60" />
+                    <span className="text-muted-foreground">{feature}</span>
+                  </div>
+                ))}
+              </div>
+
+              {/* Action Button */}
+              <Button
+                className="w-full gap-2 mt-4"
+                variant={card.variant === "primary" ? "default" : "outline"}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  router.push(card.href);
+                }}
               >
-                Manage Users
-              </button>
-            </div>
-          )}
-        </div>
+                <span>
+                  {card.title === "Analytics Overview" && "View Analytics"}
+                  {card.title === "Session Browser" && "Browse Sessions"}
+                  {card.title === "Company Settings" && "Manage Settings"}
+                  {card.title === "User Management" && "Manage Users"}
+                </span>
+                <ArrowRight className="h-4 w-4" />
+              </Button>
+            </CardContent>
+          </Card>
+        ))}
       </div>
+
+      {/* Quick Stats */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <TrendingUp className="h-5 w-5" />
+            Quick Stats
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="grid grid-cols-1 sm:grid-cols-3 gap-6">
+            <div className="text-center space-y-2">
+              <div className="flex items-center justify-center gap-2">
+                <Zap className="h-5 w-5 text-primary" />
+                <span className="text-2xl font-bold">Real-time</span>
+              </div>
+              <p className="text-sm text-muted-foreground">Data updates</p>
+            </div>
+            
+            <div className="text-center space-y-2">
+              <div className="flex items-center justify-center gap-2">
+                <Shield className="h-5 w-5 text-green-600" />
+                <span className="text-2xl font-bold">Secure</span>
+              </div>
+              <p className="text-sm text-muted-foreground">Data protection</p>
+            </div>
+            
+            <div className="text-center space-y-2">
+              <div className="flex items-center justify-center gap-2">
+                <BarChart3 className="h-5 w-5 text-blue-600" />
+                <span className="text-2xl font-bold">Advanced</span>
+              </div>
+              <p className="text-sm text-muted-foreground">Analytics</p>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
     </div>
   );
 };