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,110 +80,161 @@ 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>
+      <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>
+          )}
 
-        {message && (
-          <div
-            className={`p-4 rounded mb-6 ${message.includes("Failed") ? "bg-red-100 text-red-700" : "bg-green-100 text-green-700"}`}
+          <form
+            className="space-y-6"
+            onSubmit={(e) => {
+              e.preventDefault();
+              handleSave();
+            }}
+            autoComplete="off"
           >
-            {message}
-          </div>
-        )}
+            <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"
+                      value={csvUrl}
+                      onChange={(e) => setCsvUrl(e.target.value)}
+                      placeholder="https://example.com/data.csv"
+                      autoComplete="off"
+                    />
+                  </div>
 
-        <form
-          className="grid gap-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
-              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"
-              autoComplete="off"
-            />
-          </div>
+                  <div className="space-y-2">
+                    <Label htmlFor="csvUsername">CSV Username</Label>
+                    <Input
+                      id="csvUsername"
+                      type="text"
+                      value={csvUsername}
+                      onChange={(e) => setCsvUsername(e.target.value)}
+                      placeholder="Username for CSV access (if needed)"
+                      autoComplete="off"
+                    />
+                  </div>
 
-          <div className="grid gap-2">
-            <label className="font-medium text-gray-700">CSV Username</label>
-            <input
-              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)"
-              autoComplete="off"
-            />
-          </div>
+                  <div className="space-y-2">
+                    <Label htmlFor="csvPassword">CSV Password</Label>
+                    <Input
+                      id="csvPassword"
+                      type="password"
+                      value={csvPassword}
+                      onChange={(e) => setCsvPassword(e.target.value)}
+                      placeholder="Password will be updated only if provided"
+                      autoComplete="new-password"
+                    />
+                    <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">CSV Password</label>
-            <input
-              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">
-              Leave blank to keep current password
-            </p>
-          </div>
+              <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
+                      id="sentimentThreshold"
+                      type="number"
+                      value={sentimentThreshold}
+                      onChange={(e) => setSentimentThreshold(e.target.value)}
+                      placeholder="Threshold value (0-100)"
+                      min="0"
+                      max="100"
+                      autoComplete="off"
+                    />
+                    <p className="text-sm text-muted-foreground">
+                      Percentage of negative sentiment sessions to trigger alert (0-100)
+                    </p>
+                  </div>
+                </CardContent>
+              </Card>
+            </div>
 
-          <div className="grid gap-2">
-            <label className="font-medium text-gray-700">
-              Sentiment Alert Threshold
-            </label>
-            <input
-              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)"
-              min="0"
-              max="100"
-              autoComplete="off"
-            />
-            <p className="text-sm text-gray-500">
-              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>
-      </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"
-        >
-          Back to Sessions List
-        </Link>
+      <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"
-        >
-          Back to Sessions List
-        </Link>
+      <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>
-            Back to Sessions List
-          </Link>
-        </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>
-            <SessionDetails session={session} />
+    <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>
+              </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>
 
-          {/* Show parsed messages if available */}
-          {session.messages && session.messages.length > 0 && (
-            <div>
-              <MessageViewer messages={session.messages} />
+      {/* 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>
+                <p className="text-sm text-muted-foreground">Start Time</p>
+                <p className="font-semibold">
+                  {new Date(session.startTime).toLocaleString()}
+                </p>
+              </div>
             </div>
-          )}
+          </CardContent>
+        </Card>
 
-          {/* Show transcript URL if available */}
-          {session.fullTranscriptUrl && (
-            <div className="bg-white p-4 rounded-lg shadow">
-              <h3 className="font-bold text-lg mb-3">Source Transcript</h3>
-              <a
-                href={session.fullTranscriptUrl}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-sky-600 hover:underline"
-              >
-                View Original Transcript
-              </a>
+        <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>
-          )}
-        </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>
+
+      {/* Session Details */}
+      <SessionDetails session={session} />
+
+      {/* Messages */}
+      {session.messages && session.messages.length > 0 && (
+        <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} />
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Transcript URL */}
+      {session.fullTranscriptUrl && (
+        <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="inline-flex items-center gap-2 text-primary hover:underline"
+            >
+              <ExternalLink className="h-4 w-4" />
+              View Original Transcript
+            </a>
+          </CardContent>
+        </Card>
+      )}
     </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,227 +141,282 @@ 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"
-          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)}
-        />
-      </div>
+      <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...)"
+              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"
-          >
-            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"
-            value={selectedCategory}
-            onChange={(e) => setSelectedCategory(e.target.value)}
-          >
-            <option value="">All Categories</option>
-            {filterOptions.categories.map((cat) => (
-              <option key={cat} value={cat}>
-                {cat}
-              </option>
-            ))}
-          </select>
-        </div>
+      <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"
+            >
+              {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 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)}
+              >
+                <option value="">All Categories</option>
+                {filterOptions.categories.map((cat) => (
+                  <option key={cat} value={cat}>
+                    {cat}
+                  </option>
+                ))}
+              </select>
+            </div>
 
-        {/* Language Filter */}
-        <div>
-          <label
-            htmlFor="language-filter"
-            className="block text-sm font-medium text-gray-700 mb-1"
-          >
-            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"
-            value={selectedLanguage}
-            onChange={(e) => setSelectedLanguage(e.target.value)}
-          >
-            <option value="">All Languages</option>
-            {filterOptions.languages.map((lang) => (
-              <option key={lang} value={lang}>
-                {lang.toUpperCase()}
-              </option>
-            ))}
-          </select>
-        </div>
+            {/* Language Filter */}
+            <div className="space-y-2">
+              <Label htmlFor="language-filter">Language</Label>
+              <select
+                id="language-filter"
+                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)}
+              >
+                <option value="">All Languages</option>
+                {filterOptions.languages.map((lang) => (
+                  <option key={lang} value={lang}>
+                    {lang.toUpperCase()}
+                  </option>
+                ))}
+              </select>
+            </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
-            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>
+            {/* Start Date Filter */}
+            <div className="space-y-2">
+              <Label htmlFor="start-date-filter">Start Date</Label>
+              <Input
+                type="date"
+                id="start-date-filter"
+                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
-            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>
+            {/* End Date Filter */}
+            <div className="space-y-2">
+              <Label htmlFor="end-date-filter">End Date</Label>
+              <Input
+                type="date"
+                id="end-date-filter"
+                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>
-          <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"
-            value={sortKey}
-            onChange={(e) => setSortKey(e.target.value)}
-          >
-            <option value="startTime">Start Time</option>
-            <option value="category">Category</option>
-            <option value="language">Language</option>
-            <option value="sentiment">Sentiment</option>
-            <option value="messagesSent">Messages Sent</option>
-            <option value="avgResponseTime">Avg. Response Time</option>
-          </select>
-        </div>
+            {/* Sort Key */}
+            <div className="space-y-2">
+              <Label htmlFor="sort-key">Sort By</Label>
+              <select
+                id="sort-key"
+                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)}
+              >
+                <option value="startTime">Start Time</option>
+                <option value="category">Category</option>
+                <option value="language">Language</option>
+                <option value="sentiment">Sentiment</option>
+                <option value="messagesSent">Messages Sent</option>
+                <option value="avgResponseTime">Avg. Response Time</option>
+              </select>
+            </div>
 
-        {/* Sort Order */}
-        <div>
-          <label
-            htmlFor="sort-order"
-            className="block text-sm font-medium text-gray-700 mb-1"
-          >
-            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"
-            value={sortOrder}
-            onChange={(e) => setSortOrder(e.target.value as "asc" | "desc")}
-          >
-            <option value="desc">Descending</option>
-            <option value="asc">Ascending</option>
-          </select>
-        </div>
-      </div>
+            {/* Sort Order */}
+            <div className="space-y-2">
+              <Label htmlFor="sort-order">Order</Label>
+              <select
+                id="sort-order"
+                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")}
+              >
+                <option value="desc">Descending</option>
+                <option value="asc">Ascending</option>
+              </select>
+            </div>
+            </div>
+          </CardContent>
+        )}
+      </Card>
 
-      {loading && <p className="text-gray-600">Loading sessions...</p>}
-      {error && <p className="text-red-500">Error: {error}</p>}
-
-      {!loading && !error && sessions.length === 0 && (
-        <p className="text-gray-600">
-          {debouncedSearchTerm
-            ? `No sessions found for "${debouncedSearchTerm}".`
-            : "No sessions found."}
-        </p>
+      {/* Loading State */}
+      {loading && (
+        <Card>
+          <CardContent className="pt-6">
+            <div className="text-center py-8 text-muted-foreground">
+              Loading sessions...
+            </div>
+          </CardContent>
+        </Card>
       )}
 
-      {!loading && !error && sessions.length > 0 && (
-        <div className="space-y-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) */}:{" "}
-                {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"
-              >
-                View Details
-              </Link>
+      {/* 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 && (
+        <Card>
+          <CardContent className="pt-6">
+            <div className="text-center py-8 text-muted-foreground">
+              {debouncedSearchTerm
+                ? `No sessions found for "${debouncedSearchTerm}".`
+                : "No sessions found."}
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Sessions List */}
+      {!loading && !error && sessions.length > 0 && (
+        <div className="grid gap-4">
+          {sessions.map((session) => (
+            <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()}
+                    </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
-            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"
-          >
-            Previous
-          </button>
-          <span className="text-sm text-gray-700">
-            Page {currentPage} of {totalPages}
-          </span>
-          <button
-            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"
-          >
-            Next
-          </button>
-        </div>
+        <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="gap-2"
+              >
+                <ChevronLeft className="h-4 w-4" />
+                Previous
+              </Button>
+              <span className="text-sm text-muted-foreground">
+                Page {currentPage} of {totalPages}
+              </span>
+              <Button
+                variant="outline"
+                onClick={() =>
+                  setCurrentPage((prev) => Math.min(prev + 1, totalPages))
+                }
+                disabled={currentPage === totalPages}
+                className="gap-2"
+              >
+                Next
+                <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;
   }
 }