Refactor components and enhance metrics calculations:

- Update access denied messages to use HTML entities.
- Add autoComplete attributes to forms for better user experience.
- Improve trend calculations in sessionMetrics function.
- Update MetricCard props to accept React nodes for icons.
- Integrate Next.js Image component in Sidebar for optimization.
- Adjust ESLint rules for better code quality.
- Add new properties for trends in MetricsResult interface.
- Bump version to 0.2.0 in package.json.

app/dashboard/company/page.tsx

@@ -77,7 +77,7 @@ export default function CompanySettingsPage() {
     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't have permission to view company settings.</p>
+        <p>You don&apos;t have permission to view company settings.</p>
       </div>
     );
   }
@@ -103,6 +103,7 @@ export default function CompanySettingsPage() {
             e.preventDefault();
             handleSave();
           }}
+          autoComplete="off"
         >
           <div className="grid gap-2">
             <label className="font-medium text-gray-700">
@@ -114,6 +115,7 @@ export default function CompanySettingsPage() {
               value={csvUrl}
               onChange={(e) => setCsvUrl(e.target.value)}
               placeholder="https://example.com/data.csv"
+              autoComplete="off"
             />
           </div>
 
@@ -125,6 +127,7 @@ export default function CompanySettingsPage() {
               value={csvUsername}
               onChange={(e) => setCsvUsername(e.target.value)}
               placeholder="Username for CSV access (if needed)"
+              autoComplete="off"
             />
           </div>
 
@@ -136,6 +139,7 @@ export default function CompanySettingsPage() {
               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
@@ -154,6 +158,7 @@ export default function CompanySettingsPage() {
               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)

app/dashboard/overview/page.tsx

@@ -246,12 +246,12 @@ function DashboardContent() {
             </svg>
           }
           trend={{
-            value: metrics.sessionTrend,
+            value: metrics.sessionTrend ?? 0,
             label:
-              metrics.sessionTrend > 0
-                ? `${metrics.sessionTrend}% increase`
-                : `${Math.abs(metrics.sessionTrend || 0)}% decrease`,
-            positive: metrics.sessionTrend >= 0,
+              (metrics.sessionTrend ?? 0) > 0
+                ? `${metrics.sessionTrend ?? 0}% increase`
+                : `${Math.abs(metrics.sessionTrend ?? 0)}% decrease`,
+            isPositive: (metrics.sessionTrend ?? 0) >= 0,
           }}
         />
         <MetricCard
@@ -274,12 +274,12 @@ function DashboardContent() {
             </svg>
           }
           trend={{
-            value: metrics.usersTrend,
+            value: metrics.usersTrend ?? 0,
             label:
               metrics.usersTrend > 0
                 ? `${metrics.usersTrend}% increase`
                 : `${Math.abs(metrics.usersTrend || 0)}% decrease`,
-            positive: metrics.usersTrend >= 0,
+            isPositive: metrics.usersTrend >= 0,
           }}
         />
         <MetricCard
@@ -302,12 +302,12 @@ function DashboardContent() {
             </svg>
           }
           trend={{
-            value: metrics.sessionTimeTrend,
+            value: metrics.sessionTimeTrend ?? 0,
             label:
               metrics.sessionTimeTrend > 0
                 ? `${metrics.sessionTimeTrend}% increase`
                 : `${Math.abs(metrics.sessionTimeTrend || 0)}% decrease`,
-            positive: metrics.sessionTimeTrend >= 0,
+            isPositive: metrics.sessionTimeTrend >= 0,
           }}
         />
         <MetricCard
@@ -330,12 +330,12 @@ function DashboardContent() {
             </svg>
           }
           trend={{
-            value: metrics.responseTimeTrend,
+            value: metrics.avgResponseTimeTrend ?? 0,
             label:
-              metrics.responseTimeTrend > 0
-                ? `${metrics.responseTimeTrend}% increase`
-                : `${Math.abs(metrics.responseTimeTrend || 0)}% decrease`,
-            positive: metrics.responseTimeTrend <= 0, // Lower response time is better
+              (metrics.avgResponseTimeTrend ?? 0) > 0
+                ? `${metrics.avgResponseTimeTrend ?? 0}% increase`
+                : `${Math.abs(metrics.avgResponseTimeTrend ?? 0)}% decrease`,
+            isPositive: (metrics.avgResponseTimeTrend ?? 0) <= 0, // Lower response time is better
           }}
         />
       </div>
@@ -345,7 +345,7 @@ function DashboardContent() {
           <h3 className="font-bold text-lg text-gray-800 mb-4">
             Sessions Over Time
           </h3>
-          <SessionsLineChart sessions={metrics.sessionsByDate || {}} />
+          <SessionsLineChart sessionsPerDay={metrics.days} />
         </div>
         <div className="bg-white p-6 rounded-xl shadow">
           <h3 className="font-bold text-lg text-gray-800 mb-4">

app/dashboard/users/page.tsx

@@ -74,7 +74,7 @@ export default function UserManagementPage() {
     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't have permission to view user management.</p>
+        <p>You don&apos;t have permission to view user management.</p>
       </div>
     );
   }
@@ -102,6 +102,7 @@ export default function UserManagementPage() {
               e.preventDefault();
               inviteUser();
             }}
+            autoComplete="off" // Disable autofill for the form
           >
             <div className="grid gap-2">
               <label className="font-medium text-gray-700">Email</label>
@@ -112,6 +113,7 @@ export default function UserManagementPage() {
                 value={email}
                 onChange={(e) => setEmail(e.target.value)}
                 required
+                autoComplete="off" // Disable autofill for this input
               />
             </div>