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>
   );
 }