feat: make filters & sorting section collapsible

- Add collapsible filters section to save space on sessions page
- Show/hide toggle button with chevron icons for better UX
- Filters start collapsed by default for cleaner initial view
- Improves mobile experience by reducing vertical space usage

app/dashboard/company/page.tsx

@@ -3,6 +3,12 @@
 import { useState, useEffect } from "react";
 import { useSession } from "next-auth/react";
 import { Company } from "../../../lib/types";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { ShieldX, Settings, Save, Database, Bell } from "lucide-react";
 
 export default function CompanySettingsPage() {
   const { data: session, status } = useSession();
@@ -74,49 +80,86 @@ export default function CompanySettingsPage() {
 
   // Loading state
   if (loading) {
-    return <div className="text-center py-10">Loading settings...</div>;
+    return (
+      <div className="space-y-6">
+        <Card>
+          <CardHeader>
+            <div className="flex items-center gap-3">
+              <Settings className="h-6 w-6" />
+              <CardTitle>Company Settings</CardTitle>
+            </div>
+          </CardHeader>
+          <CardContent>
+            <div className="text-center py-8 text-muted-foreground">
+              Loading settings...
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    );
   }
 
   // Check for ADMIN access
   if (session?.user?.role !== "ADMIN") {
     return (
-      <div className="text-center py-10 bg-white rounded-xl shadow p-6">
-        <h2 className="font-bold text-xl text-red-600 mb-2">Access Denied</h2>
-        <p>You don&apos;t have permission to view company settings.</p>
+      <div className="space-y-6">
+        <Card>
+          <CardHeader>
+            <div className="flex items-center gap-3">
+              <ShieldX className="h-6 w-6 text-destructive" />
+              <CardTitle className="text-destructive">Access Denied</CardTitle>
+            </div>
+          </CardHeader>
+          <CardContent>
+            <div className="text-center py-8">
+              <p className="text-muted-foreground">
+                You don&apos;t have permission to view company settings.
+              </p>
+            </div>
+          </CardContent>
+        </Card>
       </div>
     );
   }
 
   return (
     <div className="space-y-6">
-      <div className="bg-white p-6 rounded-xl shadow">
-        <h1 className="text-2xl font-bold text-gray-800 mb-6">
-          Company Settings
-        </h1>
-
-        {message && (
-          <div
-            className={`p-4 rounded mb-6 ${message.includes("Failed") ? "bg-red-100 text-red-700" : "bg-green-100 text-green-700"}`}
-          >
-            {message}
+      <Card>
+        <CardHeader>
+          <div className="flex items-center gap-3">
+            <Settings className="h-6 w-6" />
+            <CardTitle>Company Settings</CardTitle>
           </div>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          {message && (
+            <Alert variant={message.includes("Failed") ? "destructive" : "default"}>
+              <AlertDescription>{message}</AlertDescription>
+            </Alert>
           )}
 
           <form
-          className="grid gap-6"
+            className="space-y-6"
             onSubmit={(e) => {
               e.preventDefault();
               handleSave();
             }}
             autoComplete="off"
           >
-          <div className="grid gap-2">
-            <label className="font-medium text-gray-700">
-              CSV Data Source URL
-            </label>
-            <input
+            <div className="grid gap-6 md:grid-cols-2">
+              <Card>
+                <CardHeader>
+                  <div className="flex items-center gap-2">
+                    <Database className="h-5 w-5" />
+                    <CardTitle className="text-lg">Data Source Configuration</CardTitle>
+                  </div>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                  <div className="space-y-2">
+                    <Label htmlFor="csvUrl">CSV Data Source URL</Label>
+                    <Input
+                      id="csvUrl"
                       type="text"
-              className="border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-sky-500"
                       value={csvUrl}
                       onChange={(e) => setCsvUrl(e.target.value)}
                       placeholder="https://example.com/data.csv"
@@ -124,11 +167,11 @@ export default function CompanySettingsPage() {
                     />
                   </div>
 
-          <div className="grid gap-2">
-            <label className="font-medium text-gray-700">CSV Username</label>
-            <input
+                  <div className="space-y-2">
+                    <Label htmlFor="csvUsername">CSV Username</Label>
+                    <Input
+                      id="csvUsername"
                       type="text"
-              className="border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-sky-500"
                       value={csvUsername}
                       onChange={(e) => setCsvUsername(e.target.value)}
                       placeholder="Username for CSV access (if needed)"
@@ -136,28 +179,38 @@ export default function CompanySettingsPage() {
                     />
                   </div>
 
-          <div className="grid gap-2">
-            <label className="font-medium text-gray-700">CSV Password</label>
-            <input
+                  <div className="space-y-2">
+                    <Label htmlFor="csvPassword">CSV Password</Label>
+                    <Input
+                      id="csvPassword"
                       type="password"
-              className="border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-sky-500"
                       value={csvPassword}
                       onChange={(e) => setCsvPassword(e.target.value)}
                       placeholder="Password will be updated only if provided"
                       autoComplete="new-password"
                     />
-            <p className="text-sm text-gray-500">
+                    <p className="text-sm text-muted-foreground">
                       Leave blank to keep current password
                     </p>
                   </div>
+                </CardContent>
+              </Card>
 
-          <div className="grid gap-2">
-            <label className="font-medium text-gray-700">
+              <Card>
+                <CardHeader>
+                  <div className="flex items-center gap-2">
+                    <Bell className="h-5 w-5" />
+                    <CardTitle className="text-lg">Alert Configuration</CardTitle>
+                  </div>
+                </CardHeader>
+                <CardContent>
+                  <div className="space-y-2">
+                    <Label htmlFor="sentimentThreshold">
                       Sentiment Alert Threshold
-            </label>
-            <input
+                    </Label>
+                    <Input
+                      id="sentimentThreshold"
                       type="number"
-              className="border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-sky-500"
                       value={sentimentThreshold}
                       onChange={(e) => setSentimentThreshold(e.target.value)}
                       placeholder="Threshold value (0-100)"
@@ -165,19 +218,23 @@ export default function CompanySettingsPage() {
                       max="100"
                       autoComplete="off"
                     />
-            <p className="text-sm text-gray-500">
+                    <p className="text-sm text-muted-foreground">
                       Percentage of negative sentiment sessions to trigger alert (0-100)
                     </p>
                   </div>
-
-          <button
-            type="submit"
-            className="bg-sky-600 hover:bg-sky-700 text-white py-2 px-4 rounded-lg shadow transition-colors w-full sm:w-auto"
-          >
-            Save Settings
-          </button>
-        </form>
+                </CardContent>
+              </Card>
             </div>
+
+            <div className="flex justify-end">
+              <Button type="submit" className="gap-2">
+                <Save className="h-4 w-4" />
+                Save Settings
+              </Button>
+            </div>
+          </form>
+        </CardContent>
+      </Card>
     </div>
   );
 }

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

@@ -1,13 +1,29 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import { useParams, useRouter } from "next/navigation"; // Import useRouter
-import { useSession } from "next-auth/react"; // Import useSession
+import { useParams, useRouter } from "next/navigation";
+import { useSession } from "next-auth/react";
 import SessionDetails from "../../../../components/SessionDetails";
 import TranscriptViewer from "../../../../components/TranscriptViewer";
 import MessageViewer from "../../../../components/MessageViewer";
 import { ChatSession } from "../../../../lib/types";
 import Link from "next/link";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Separator } from "@/components/ui/separator";
+import { 
+  ArrowLeft, 
+  MessageSquare, 
+  Clock, 
+  Globe, 
+  ExternalLink,
+  User,
+  Bot,
+  AlertCircle,
+  FileText,
+  Activity
+} from "lucide-react";
 
 export default function SessionViewPage() {
   const params = useParams();
@@ -57,110 +73,242 @@ export default function SessionViewPage() {
 
   if (status === "loading") {
     return (
-      <div className="p-4 md:p-6 flex justify-center items-center min-h-screen">
-        <p className="text-gray-600 text-lg">Loading session...</p>
+      <div className="space-y-6">
+        <Card>
+          <CardContent className="pt-6">
+            <div className="text-center py-8 text-muted-foreground">
+              Loading session...
+            </div>
+          </CardContent>
+        </Card>
       </div>
     );
   }
 
   if (status === "unauthenticated") {
     return (
-      <div className="p-4 md:p-6 flex justify-center items-center min-h-screen">
-        <p className="text-gray-600 text-lg">Redirecting to login...</p>
+      <div className="space-y-6">
+        <Card>
+          <CardContent className="pt-6">
+            <div className="text-center py-8 text-muted-foreground">
+              Redirecting to login...
+            </div>
+          </CardContent>
+        </Card>
       </div>
     );
   }
 
   if (loading && status === "authenticated") {
     return (
-      <div className="p-4 md:p-6 flex justify-center items-center min-h-screen">
-        <p className="text-gray-600 text-lg">Loading session details...</p>
+      <div className="space-y-6">
+        <Card>
+          <CardContent className="pt-6">
+            <div className="text-center py-8 text-muted-foreground">
+              Loading session details...
+            </div>
+          </CardContent>
+        </Card>
       </div>
     );
   }
 
   if (error) {
     return (
-      <div className="p-4 md:p-6 min-h-screen">
-        <p className="text-red-500 text-lg mb-4">Error: {error}</p>
-        <Link
-          href="/dashboard/sessions"
-          className="text-sky-600 hover:underline"
-        >
+      <div className="space-y-6">
+        <Card>
+          <CardContent className="pt-6">
+            <div className="text-center py-8">
+              <AlertCircle className="h-12 w-12 text-destructive mx-auto mb-4" />
+              <p className="text-destructive text-lg mb-4">Error: {error}</p>
+              <Link href="/dashboard/sessions">
+                <Button variant="outline" className="gap-2">
+                  <ArrowLeft className="h-4 w-4" />
                   Back to Sessions List
+                </Button>
               </Link>
             </div>
+          </CardContent>
+        </Card>
+      </div>
     );
   }
 
   if (!session) {
     return (
-      <div className="p-4 md:p-6 min-h-screen">
-        <p className="text-gray-600 text-lg mb-4">Session not found.</p>
-        <Link
-          href="/dashboard/sessions"
-          className="text-sky-600 hover:underline"
-        >
+      <div className="space-y-6">
+        <Card>
+          <CardContent className="pt-6">
+            <div className="text-center py-8">
+              <MessageSquare className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
+              <p className="text-muted-foreground text-lg mb-4">Session not found.</p>
+              <Link href="/dashboard/sessions">
+                <Button variant="outline" className="gap-2">
+                  <ArrowLeft className="h-4 w-4" />
                   Back to Sessions List
+                </Button>
               </Link>
             </div>
+          </CardContent>
+        </Card>
+      </div>
     );
   }
 
   return (
-    <div className="min-h-screen bg-linear-to-br from-slate-50 to-sky-100 p-4 md:p-6">
-      <div className="max-w-4xl mx-auto">
-        <div className="mb-6">
-          <Link
-            href="/dashboard/sessions"
-            className="text-sky-700 hover:text-sky-900 hover:underline flex items-center"
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              className="h-5 w-5 mr-1"
-              viewBox="0 0 20 20"
-              fill="currentColor"
-            >
-              <path
-                fillRule="evenodd"
-                d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
-                clipRule="evenodd"
-              />
-            </svg>
+    <div className="space-y-6 max-w-6xl mx-auto">
+      {/* Header */}
+      <Card>
+        <CardContent className="pt-6">
+          <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
+            <div className="space-y-2">
+              <Link href="/dashboard/sessions">
+                <Button variant="ghost" className="gap-2 p-0 h-auto">
+                  <ArrowLeft className="h-4 w-4" />
                   Back to Sessions List
+                </Button>
               </Link>
+              <div className="space-y-2">
+                <h1 className="text-3xl font-bold">Session Details</h1>
+                <div className="flex items-center gap-3">
+                  <Badge variant="outline" className="font-mono text-xs">
+                    ID
+                  </Badge>
+                  <code className="text-sm text-muted-foreground font-mono">
+                    {(session.sessionId || session.id).slice(0, 8)}...
+                  </code>
                 </div>
-        <h1 className="text-3xl font-bold text-gray-800 mb-6">
-          Session: {session.sessionId || session.id}
-        </h1>
-        <div className="grid grid-cols-1 gap-6">
+              </div>
+            </div>
+            <div className="flex flex-wrap gap-2">
+              {session.category && session.category !== 'UNRECOGNIZED_OTHER' && session.category !== 'ACCESS_LOGIN' && (
+                <Badge variant="secondary" className="gap-1">
+                  <Activity className="h-3 w-3" />
+                  {session.category.replace(/_/g, ' ').toLowerCase().replace(/\b\w/g, l => l.toUpperCase())}
+                </Badge>
+              )}
+              {session.language && (
+                <Badge variant="outline" className="gap-1">
+                  <Globe className="h-3 w-3" />
+                  {session.language.toUpperCase()}
+                </Badge>
+              )}
+              {session.sentiment && (
+                <Badge 
+                  variant={session.sentiment === 'positive' ? 'default' : session.sentiment === 'negative' ? 'destructive' : 'secondary'}
+                  className="gap-1"
+                >
+                  {session.sentiment.charAt(0).toUpperCase() + session.sentiment.slice(1)}
+                </Badge>
+              )}
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Session Overview */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+        <Card>
+          <CardContent className="pt-6">
+            <div className="flex items-center gap-3">
+              <Clock className="h-8 w-8 text-blue-500" />
               <div>
-            <SessionDetails session={session} />
+                <p className="text-sm text-muted-foreground">Start Time</p>
+                <p className="font-semibold">
+                  {new Date(session.startTime).toLocaleString()}
+                </p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardContent className="pt-6">
+            <div className="flex items-center gap-3">
+              <MessageSquare className="h-8 w-8 text-green-500" />
+              <div>
+                <p className="text-sm text-muted-foreground">Messages</p>
+                <p className="font-semibold">
+                  {session.messages?.length || 0}
+                </p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardContent className="pt-6">
+            <div className="flex items-center gap-3">
+              <User className="h-8 w-8 text-purple-500" />
+              <div>
+                <p className="text-sm text-muted-foreground">User ID</p>
+                <p className="font-semibold truncate">
+                  {session.userId || 'N/A'}
+                </p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardContent className="pt-6">
+            <div className="flex items-center gap-3">
+              <Activity className="h-8 w-8 text-orange-500" />
+              <div>
+                <p className="text-sm text-muted-foreground">Duration</p>
+                <p className="font-semibold">
+                  {session.endTime && session.startTime
+                    ? `${Math.round(
+                        (new Date(session.endTime).getTime() - new Date(session.startTime).getTime()) / 60000
+                      )} min`
+                    : 'N/A'}
+                </p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
       </div>
 
-          {/* Show parsed messages if available */}
+      {/* Session Details */}
+      <SessionDetails session={session} />
+
+      {/* Messages */}
       {session.messages && session.messages.length > 0 && (
-            <div>
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <MessageSquare className="h-5 w-5" />
+              Conversation ({session.messages.length} messages)
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
             <MessageViewer messages={session.messages} />
-            </div>
+          </CardContent>
+        </Card>
       )}
 
-          {/* Show transcript URL if available */}
+      {/* Transcript URL */}
       {session.fullTranscriptUrl && (
-            <div className="bg-white p-4 rounded-lg shadow">
-              <h3 className="font-bold text-lg mb-3">Source Transcript</h3>
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <FileText className="h-5 w-5" />
+              Source Transcript
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
             <a
               href={session.fullTranscriptUrl}
               target="_blank"
               rel="noopener noreferrer"
-                className="text-sky-600 hover:underline"
+              className="inline-flex items-center gap-2 text-primary hover:underline"
             >
+              <ExternalLink className="h-4 w-4" />
               View Original Transcript
             </a>
-            </div>
+          </CardContent>
+        </Card>
       )}
     </div>
-      </div>
-    </div>
   );
 }

app/dashboard/sessions/page.tsx

@@ -3,6 +3,24 @@
 import { useState, useEffect, useCallback } from "react";
 import { ChatSession } from "../../../lib/types";
 import Link from "next/link";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Badge } from "@/components/ui/badge";
+import { 
+  MessageSquare, 
+  Search, 
+  Filter, 
+  Calendar, 
+  ChevronLeft, 
+  ChevronRight,
+  Clock,
+  Globe,
+  Eye,
+  ChevronDown,
+  ChevronUp
+} from "lucide-react";
 
 // Placeholder for a SessionListItem component to be created later
 // For now, we'll display some basic info directly.
@@ -43,6 +61,9 @@ export default function SessionsPage() {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
   const [pageSize, setPageSize] = useState(10); // Or make this configurable
 
+  // UI states
+  const [filtersExpanded, setFiltersExpanded] = useState(false);
+
   useEffect(() => {
     const timerId = setTimeout(() => {
       setDebouncedSearchTerm(searchTerm);
@@ -120,35 +141,69 @@ export default function SessionsPage() {
   }, [fetchFilterOptions]);
 
   return (
-    <div className="p-4 md:p-6">
-      <h1 className="text-2xl font-semibold text-gray-800 mb-6">
-        Chat Sessions
-      </h1>
+    <div className="space-y-6">
+      {/* Header */}
+      <Card>
+        <CardHeader>
+          <div className="flex items-center gap-3">
+            <MessageSquare className="h-6 w-6" />
+            <CardTitle>Chat Sessions</CardTitle>
+          </div>
+        </CardHeader>
+      </Card>
 
       {/* Search Input */}
-      <div className="mb-4">
-        <input
-          type="text"
+      <Card>
+        <CardContent className="pt-6">
+          <div className="relative">
+            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+            <Input
               placeholder="Search sessions (ID, category, initial message...)"
-          className="w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-sky-500 focus:border-sky-500"
               value={searchTerm}
               onChange={(e) => setSearchTerm(e.target.value)}
+              className="pl-10"
             />
           </div>
+        </CardContent>
+      </Card>
 
       {/* Filter and Sort Controls */}
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6 p-4 bg-gray-50 rounded-lg shadow">
-        {/* Category Filter */}
-        <div>
-          <label
-            htmlFor="category-filter"
-            className="block text-sm font-medium text-gray-700 mb-1"
+      <Card>
+        <CardHeader>
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <Filter className="h-5 w-5" />
+              <CardTitle className="text-lg">Filters & Sorting</CardTitle>
+            </div>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => setFiltersExpanded(!filtersExpanded)}
+              className="gap-2"
             >
-            Category
-          </label>
+              {filtersExpanded ? (
+                <>
+                  <ChevronUp className="h-4 w-4" />
+                  Hide
+                </>
+              ) : (
+                <>
+                  <ChevronDown className="h-4 w-4" />
+                  Show
+                </>
+              )}
+            </Button>
+          </div>
+        </CardHeader>
+        {filtersExpanded && (
+          <CardContent>
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-4">
+            {/* Category Filter */}
+            <div className="space-y-2">
+              <Label htmlFor="category-filter">Category</Label>
               <select
                 id="category-filter"
-            className="w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-sky-500 focus:border-sky-500"
+                className="w-full h-10 px-3 py-2 text-sm rounded-md border border-input bg-background ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
                 value={selectedCategory}
                 onChange={(e) => setSelectedCategory(e.target.value)}
               >
@@ -162,16 +217,11 @@ export default function SessionsPage() {
             </div>
 
             {/* Language Filter */}
-        <div>
-          <label
-            htmlFor="language-filter"
-            className="block text-sm font-medium text-gray-700 mb-1"
-          >
-            Language
-          </label>
+            <div className="space-y-2">
+              <Label htmlFor="language-filter">Language</Label>
               <select
                 id="language-filter"
-            className="w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-sky-500 focus:border-sky-500"
+                className="w-full h-10 px-3 py-2 text-sm rounded-md border border-input bg-background ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
                 value={selectedLanguage}
                 onChange={(e) => setSelectedLanguage(e.target.value)}
               >
@@ -185,50 +235,33 @@ export default function SessionsPage() {
             </div>
 
             {/* Start Date Filter */}
-        <div>
-          <label
-            htmlFor="start-date-filter"
-            className="block text-sm font-medium text-gray-700 mb-1"
-          >
-            Start Date
-          </label>
-          <input
+            <div className="space-y-2">
+              <Label htmlFor="start-date-filter">Start Date</Label>
+              <Input
                 type="date"
                 id="start-date-filter"
-            className="w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-sky-500 focus:border-sky-500"
                 value={startDate}
                 onChange={(e) => setStartDate(e.target.value)}
               />
             </div>
 
             {/* End Date Filter */}
-        <div>
-          <label
-            htmlFor="end-date-filter"
-            className="block text-sm font-medium text-gray-700 mb-1"
-          >
-            End Date
-          </label>
-          <input
+            <div className="space-y-2">
+              <Label htmlFor="end-date-filter">End Date</Label>
+              <Input
                 type="date"
                 id="end-date-filter"
-            className="w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-sky-500 focus:border-sky-500"
                 value={endDate}
                 onChange={(e) => setEndDate(e.target.value)}
               />
             </div>
 
             {/* Sort Key */}
-        <div>
-          <label
-            htmlFor="sort-key"
-            className="block text-sm font-medium text-gray-700 mb-1"
-          >
-            Sort By
-          </label>
+            <div className="space-y-2">
+              <Label htmlFor="sort-key">Sort By</Label>
               <select
                 id="sort-key"
-            className="w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-sky-500 focus:border-sky-500"
+                className="w-full h-10 px-3 py-2 text-sm rounded-md border border-input bg-background ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
                 value={sortKey}
                 onChange={(e) => setSortKey(e.target.value)}
               >
@@ -242,16 +275,11 @@ export default function SessionsPage() {
             </div>
 
             {/* Sort Order */}
-        <div>
-          <label
-            htmlFor="sort-order"
-            className="block text-sm font-medium text-gray-700 mb-1"
-          >
-            Order
-          </label>
+            <div className="space-y-2">
+              <Label htmlFor="sort-order">Order</Label>
               <select
                 id="sort-order"
-            className="w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-sky-500 focus:border-sky-500"
+                className="w-full h-10 px-3 py-2 text-sm rounded-md border border-input bg-background ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
                 value={sortOrder}
                 onChange={(e) => setSortOrder(e.target.value as "asc" | "desc")}
               >
@@ -260,87 +288,135 @@ export default function SessionsPage() {
               </select>
             </div>
             </div>
+          </CardContent>
+        )}
+      </Card>
 
-      {loading && <p className="text-gray-600">Loading sessions...</p>}
-      {error && <p className="text-red-500">Error: {error}</p>}
+      {/* Loading State */}
+      {loading && (
+        <Card>
+          <CardContent className="pt-6">
+            <div className="text-center py-8 text-muted-foreground">
+              Loading sessions...
+            </div>
+          </CardContent>
+        </Card>
+      )}
 
+      {/* Error State */}
+      {error && (
+        <Card>
+          <CardContent className="pt-6">
+            <div className="text-center py-8 text-destructive">
+              Error: {error}
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Empty State */}
       {!loading && !error && sessions.length === 0 && (
-        <p className="text-gray-600">
+        <Card>
+          <CardContent className="pt-6">
+            <div className="text-center py-8 text-muted-foreground">
               {debouncedSearchTerm
                 ? `No sessions found for "${debouncedSearchTerm}".`
                 : "No sessions found."}
-        </p>
+            </div>
+          </CardContent>
+        </Card>
       )}
 
+      {/* Sessions List */}
       {!loading && !error && sessions.length > 0 && (
-        <div className="space-y-4">
+        <div className="grid gap-4">
           {sessions.map((session) => (
-            <div
-              key={session.id}
-              className="bg-white p-4 rounded-lg shadow hover:shadow-md transition-shadow"
-            >
-              <h2 className="text-lg font-semibold text-sky-700 mb-1">
-                Session ID: {session.sessionId || session.id}
-              </h2>
-              <p className="text-sm text-gray-500 mb-1">
-                Start Time{/*  (Local) */}:{" "}
+            <Card key={session.id} className="hover:shadow-md transition-shadow">
+              <CardContent className="pt-6">
+                <div className="flex justify-between items-start mb-4">
+                  <div className="space-y-2 flex-1">
+                    <div className="flex items-center gap-3">
+                      <Badge variant="outline" className="font-mono text-xs">
+                        ID
+                      </Badge>
+                      <code className="text-sm text-muted-foreground font-mono">
+                        {(session.sessionId || session.id).slice(0, 8)}...
+                      </code>
+                    </div>
+                    <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                      <Clock className="h-4 w-4" />
                       {new Date(session.startTime).toLocaleString()}
-              </p>
-              {/* <p className="text-xs text-gray-400 mb-1">
-                Start Time (Raw API): {session.startTime.toString()}
-              </p> */}
-              {session.category && (
-                <p className="text-sm text-gray-700">
-                  Category:{" "}
-                  <span className="font-medium">{session.category}</span>
-                </p>
-              )}
-              {session.language && (
-                <p className="text-sm text-gray-700">
-                  Language:{" "}
-                  <span className="font-medium">
-                    {session.language.toUpperCase()}
-                  </span>
-                </p>
-              )}
-              {session.initialMsg && (
-                <p className="text-sm text-gray-600 mt-1 truncate">
-                  Initial Message: {session.initialMsg}
-                </p>
-              )}
-              <Link
-                href={`/dashboard/sessions/${session.id}`}
-                className="mt-2 text-sm text-sky-600 hover:text-sky-800 hover:underline inline-block"
-              >
+                    </div>
+                  </div>
+                  <Link href={`/dashboard/sessions/${session.id}`}>
+                    <Button variant="outline" size="sm" className="gap-2">
+                      <Eye className="h-4 w-4" />
                       View Details
+                    </Button>
                   </Link>
                 </div>
+
+                <div className="flex flex-wrap gap-2 mb-3">
+                  {session.category && session.category !== 'UNRECOGNIZED_OTHER' && session.category !== 'ACCESS_LOGIN' && (
+                    <Badge variant="secondary" className="gap-1">
+                      <Filter className="h-3 w-3" />
+                      {session.category.replace(/_/g, ' ').toLowerCase().replace(/\b\w/g, l => l.toUpperCase())}
+                    </Badge>
+                  )}
+                  {session.language && (
+                    <Badge variant="outline" className="gap-1">
+                      <Globe className="h-3 w-3" />
+                      {session.language.toUpperCase()}
+                    </Badge>
+                  )}
+                </div>
+
+                {session.summary ? (
+                  <p className="text-sm text-muted-foreground line-clamp-2">
+                    {session.summary}
+                  </p>
+                ) : session.initialMsg ? (
+                  <p className="text-sm text-muted-foreground line-clamp-2">
+                    {session.initialMsg}
+                  </p>
+                ) : null}
+              </CardContent>
+            </Card>
           ))}
         </div>
       )}
 
+      {/* Pagination */}
       {totalPages > 0 && (
-        <div className="mt-6 flex justify-center items-center space-x-2">
-          <button
+        <Card>
+          <CardContent className="pt-6">
+            <div className="flex justify-center items-center gap-4">
+              <Button
+                variant="outline"
                 onClick={() => setCurrentPage((prev) => Math.max(prev - 1, 1))}
                 disabled={currentPage === 1}
-            className="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50"
+                className="gap-2"
               >
+                <ChevronLeft className="h-4 w-4" />
                 Previous
-          </button>
-          <span className="text-sm text-gray-700">
+              </Button>
+              <span className="text-sm text-muted-foreground">
                 Page {currentPage} of {totalPages}
               </span>
-          <button
+              <Button
+                variant="outline"
                 onClick={() =>
                   setCurrentPage((prev) => Math.min(prev + 1, totalPages))
                 }
                 disabled={currentPage === totalPages}
-            className="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50"
+                className="gap-2"
               >
                 Next
-          </button>
+                <ChevronRight className="h-4 w-4" />
+              </Button>
             </div>
+          </CardContent>
+        </Card>
       )}
     </div>
   );

app/globals.css

@@ -171,12 +171,20 @@
   
   /* Custom text selection colors */
   ::selection {
-    background-color: hsl(var(--primary) / 0.2);
-    color: hsl(var(--foreground));
+    background-color: hsl(var(--primary) / 0.3);
+    color: hsl(var(--primary-foreground));
   }
   
   ::-moz-selection {
-    background-color: hsl(var(--primary) / 0.2);
-    color: hsl(var(--foreground));
+    background-color: hsl(var(--primary) / 0.3);
+    color: hsl(var(--primary-foreground));
+  }
+  
+  /* Line clamp utility */
+  .line-clamp-2 {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
   }
 }

components/SessionDetails.tsx

@@ -3,6 +3,10 @@
 import { ChatSession } from "../lib/types";
 import LanguageDisplay from "./LanguageDisplay";
 import CountryDisplay from "./CountryDisplay";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Separator } from "@/components/ui/separator";
+import { ExternalLink } from "lucide-react";
 
 interface SessionDetailsProps {
   session: ChatSession;
@@ -12,157 +16,175 @@ interface SessionDetailsProps {
  * Component to display session details with formatted country and language names
  */
 export default function SessionDetails({ session }: SessionDetailsProps) {
+  // Helper function to format category names
+  const formatCategory = (category: string) => {
+    if (category === 'UNRECOGNIZED_OTHER' || category === 'ACCESS_LOGIN') {
+      return null; // Don't show these internal enum values
+    }
+    return category.replace(/_/g, ' ').toLowerCase().replace(/\b\w/g, l => l.toUpperCase());
+  };
+
   return (
-    <div className="bg-white p-4 rounded-lg shadow">
-      <h3 className="font-bold text-lg mb-3">Session Details</h3>
+    <Card>
+      <CardHeader>
+        <CardTitle>Session Information</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
           <div className="space-y-3">
-        <div className="flex justify-between border-b pb-2">
-          <span className="text-gray-600">Session ID:</span>
-          <span className="font-medium font-mono text-sm">{session.id}</span>
+            <div>
+              <p className="text-sm text-muted-foreground">Session ID</p>
+              <code className="text-sm font-mono bg-muted px-2 py-1 rounded">
+                {session.id.slice(0, 8)}...
+              </code>
             </div>
 
-        <div className="flex justify-between border-b pb-2">
-          <span className="text-gray-600">Start Time:</span>
-          <span className="font-medium">
+            <div>
+              <p className="text-sm text-muted-foreground">Start Time</p>
+              <p className="font-medium">
                 {new Date(session.startTime).toLocaleString()}
-          </span>
+              </p>
             </div>
 
             {session.endTime && (
-          <div className="flex justify-between border-b pb-2">
-            <span className="text-gray-600">End Time:</span>
-            <span className="font-medium">
+              <div>
+                <p className="text-sm text-muted-foreground">End Time</p>
+                <p className="font-medium">
                   {new Date(session.endTime).toLocaleString()}
-            </span>
+                </p>
               </div>
             )}
 
-        {session.category && (
-          <div className="flex justify-between border-b pb-2">
-            <span className="text-gray-600">Category:</span>
-            <span className="font-medium">{session.category}</span>
+            {session.category && formatCategory(session.category) && (
+              <div>
+                <p className="text-sm text-muted-foreground">Category</p>
+                <Badge variant="secondary">
+                  {formatCategory(session.category)}
+                </Badge>
               </div>
             )}
 
             {session.language && (
-          <div className="flex justify-between border-b pb-2">
-            <span className="text-gray-600">Language:</span>
-            <span className="font-medium">
+              <div>
+                <p className="text-sm text-muted-foreground">Language</p>
+                <div className="flex items-center gap-2">
                   <LanguageDisplay languageCode={session.language} />
-              <span className="text-gray-400 text-xs ml-1">
-                ({session.language.toUpperCase()})
-              </span>
-            </span>
+                  <Badge variant="outline" className="text-xs">
+                    {session.language.toUpperCase()}
+                  </Badge>
+                </div>
               </div>
             )}
 
             {session.country && (
-          <div className="flex justify-between border-b pb-2">
-            <span className="text-gray-600">Country:</span>
-            <span className="font-medium">
+              <div>
+                <p className="text-sm text-muted-foreground">Country</p>
+                <div className="flex items-center gap-2">
                   <CountryDisplay countryCode={session.country} />
-              <span className="text-gray-400 text-xs ml-1">
-                ({session.country})
-              </span>
-            </span>
+                  <Badge variant="outline" className="text-xs">
+                    {session.country}
+                  </Badge>
+                </div>
               </div>
             )}
+          </div>
 
+          <div className="space-y-3">
             {session.sentiment !== null && session.sentiment !== undefined && (
-          <div className="flex justify-between border-b pb-2">
-            <span className="text-gray-600">Sentiment:</span>
-            <span
-              className={`font-medium capitalize ${
-                session.sentiment === "POSITIVE"
-                  ? "text-green-500"
-                  : session.sentiment === "NEGATIVE"
-                    ? "text-red-500"
-                    : "text-orange-500"
-              }`}
+              <div>
+                <p className="text-sm text-muted-foreground">Sentiment</p>
+                <Badge
+                  variant={
+                    session.sentiment === "positive"
+                      ? "default"
+                      : session.sentiment === "negative"
+                        ? "destructive"
+                        : "secondary"
+                  }
                 >
-              {session.sentiment.toLowerCase()}
-            </span>
+                  {session.sentiment.charAt(0).toUpperCase() + session.sentiment.slice(1)}
+                </Badge>
               </div>
             )}
 
-        <div className="flex justify-between border-b pb-2">
-          <span className="text-gray-600">Messages Sent:</span>
-          <span className="font-medium">{session.messagesSent || 0}</span>
+            <div>
+              <p className="text-sm text-muted-foreground">Messages Sent</p>
+              <p className="font-medium">{session.messagesSent || 0}</p>
             </div>
 
-        {session.avgResponseTime !== null &&
-          session.avgResponseTime !== undefined && (
-            <div className="flex justify-between border-b pb-2">
-              <span className="text-gray-600">Avg Response Time:</span>
-              <span className="font-medium">
-                {session.avgResponseTime.toFixed(2)}s
-              </span>
+            {session.avgResponseTime !== null && session.avgResponseTime !== undefined && (
+              <div>
+                <p className="text-sm text-muted-foreground">Avg Response Time</p>
+                <p className="font-medium">{session.avgResponseTime.toFixed(2)}s</p>
               </div>
             )}
 
             {session.escalated !== null && session.escalated !== undefined && (
-          <div className="flex justify-between border-b pb-2">
-            <span className="text-gray-600">Escalated:</span>
-            <span
-              className={`font-medium ${session.escalated ? "text-red-500" : "text-green-500"}`}
-            >
+              <div>
+                <p className="text-sm text-muted-foreground">Escalated</p>
+                <Badge variant={session.escalated ? "destructive" : "default"}>
                   {session.escalated ? "Yes" : "No"}
-            </span>
+                </Badge>
               </div>
             )}
 
             {session.forwardedHr !== null && session.forwardedHr !== undefined && (
-          <div className="flex justify-between border-b pb-2">
-            <span className="text-gray-600">Forwarded to HR:</span>
-            <span
-              className={`font-medium ${session.forwardedHr ? "text-amber-500" : "text-green-500"}`}
-            >
+              <div>
+                <p className="text-sm text-muted-foreground">Forwarded to HR</p>
+                <Badge variant={session.forwardedHr ? "secondary" : "default"}>
                   {session.forwardedHr ? "Yes" : "No"}
-            </span>
+                </Badge>
               </div>
             )}
 
             {session.ipAddress && (
-          <div className="flex justify-between border-b pb-2">
-            <span className="text-gray-600">IP Address:</span>
-            <span className="font-medium font-mono text-sm">
+              <div>
+                <p className="text-sm text-muted-foreground">IP Address</p>
+                <code className="text-sm font-mono bg-muted px-2 py-1 rounded">
                   {session.ipAddress}
-            </span>
+                </code>
               </div>
             )}
+          </div>
+        </div>
 
-        {session.initialMsg && (
-          <div className="border-b pb-2">
-            <span className="text-gray-600 block mb-1">Initial Message:</span>
-            <div className="bg-gray-50 p-2 rounded text-sm italic">
-              &quot;{session.initialMsg}&quot;
-            </div>
-          </div>
-        )}
+        {(session.summary || session.initialMsg) && <Separator />}
 
         {session.summary && (
-          <div className="border-b pb-2">
-            <span className="text-gray-600 block mb-1">AI Summary:</span>
-            <div className="bg-blue-50 p-2 rounded text-sm">
+          <div>
+            <p className="text-sm text-muted-foreground mb-2">AI Summary</p>
+            <div className="bg-muted p-3 rounded-md text-sm">
               {session.summary}
             </div>
           </div>
         )}
 
+        {!session.summary && session.initialMsg && (
+          <div>
+            <p className="text-sm text-muted-foreground mb-2">Initial Message</p>
+            <div className="bg-muted p-3 rounded-md text-sm italic">
+              &quot;{session.initialMsg}&quot;
+            </div>
+          </div>
+        )}
+
         {session.fullTranscriptUrl && (
-          <div className="flex justify-between pt-2">
-            <span className="text-gray-600">Transcript:</span>
+          <>
+            <Separator />
+            <div>
               <a
                 href={session.fullTranscriptUrl}
                 target="_blank"
                 rel="noopener noreferrer"
-              className="text-blue-500 hover:text-blue-700 underline"
+                className="inline-flex items-center gap-2 text-primary hover:underline"
               >
+                <ExternalLink className="h-4 w-4" />
                 View Full Transcript
               </a>
             </div>
+          </>
         )}
-      </div>
-    </div>
+      </CardContent>
+    </Card>
   );
 }