From 00f2f5c59b9e1dd795013f64dc8e36c711feeaa1 Mon Sep 17 00:00:00 2001
From: Kaj Kowalski <dev@kajkowalski.nl>
Date: Thu, 22 May 2025 04:40:56 +0200
Subject: [PATCH] Updates dashboard UI and improves styling

Improves the dashboard's appearance and user experience by updating styles and layouts.

Changes include:
- Updates to color schemes and spacing for better readability and visual appeal.
- Implements a responsive layout for the header to adapt to different screen sizes.
- Refactors button styles for consistency and clarity.
- Adds a gradient background to the main dashboard page.
- Updates the NextAuth URL in the development environment.
---
 .env.development       |   2 +-
 app/dashboard/page.tsx |  46 +++++++-----
 app/globals.css        |   2 +
 next.config.js         |   2 +-
 package-lock.json      | 165 +----------------------------------------
 package.json           |   7 +-
 postcss.config.js      |   6 --
 postcss.config.mjs     |   6 ++
 tailwind.config.js     |   4 +-
 9 files changed, 46 insertions(+), 194 deletions(-)
 delete mode 100644 postcss.config.js
 create mode 100644 postcss.config.mjs

diff --git a/.env.development b/.env.development
index 6c3a6ac..da2f1f6 100644
--- a/.env.development
+++ b/.env.development
@@ -2,7 +2,7 @@
 # This file ensures NextAuth always has necessary environment variables in development
 
 # NextAuth.js configuration
-NEXTAUTH_URL=http://localhost:3000
+NEXTAUTH_URL=http://192.168.1.2:3000
 NEXTAUTH_SECRET=this_is_a_fixed_secret_for_development_only
 NODE_ENV=development
 
diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx
index f73dcb0..be3b26c 100644
--- a/app/dashboard/page.tsx
+++ b/app/dashboard/page.tsx
@@ -172,24 +172,31 @@ function DashboardContent() {
   };
 
   return (
-    <div className="space-y-6">
+    <div className="space-y-8">
+      {" "}
+      {/* Increased spacing */}
       {/* Welcome Banner */}
       <WelcomeBanner companyName={company.name} />
-
       {/* Header with company info */}
-      <div className="flex justify-between items-center bg-white p-4 rounded-xl shadow">
+      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center bg-white p-6 rounded-2xl shadow-lg ring-1 ring-slate-200/50">
         <div>
-          <h1 className="text-2xl font-bold text-blue-700">{company.name}</h1>
-          <p className="text-gray-600">
+          <h1 className="text-3xl font-bold text-slate-800">{company.name}</h1>
+          <p className="text-slate-500 mt-1">
+            {" "}
+            {/* Adjusted text color and margin */}
             Dashboard updated{" "}
-            <span className="font-medium">
+            <span className="font-medium text-slate-600">
+              {" "}
+              {/* Adjusted text color */}
               {new Date(metrics.lastUpdated || Date.now()).toLocaleString()}
             </span>
           </p>
         </div>
-        <div className="flex items-center gap-4">
+        <div className="flex items-center gap-3 mt-4 sm:mt-0">
+          {" "}
+          {/* Adjusted gap and responsive margin */}
           <button
-            className="bg-blue-600 text-white py-2 px-4 rounded-lg shadow-sm hover:bg-blue-700 disabled:opacity-50 flex items-center"
+            className="bg-sky-600 text-white py-2 px-5 rounded-lg shadow hover:bg-sky-700 transition-colors disabled:opacity-60 disabled:cursor-not-allowed flex items-center text-sm font-medium" // Adjusted padding, shadow, colors, and added font style
             onClick={handleRefresh}
             disabled={refreshing || isAuditor}
           >
@@ -220,7 +227,7 @@ function DashboardContent() {
             ) : (
               <>
                 <svg
-                  className="w-4 h-4 mr-1"
+                  className="w-4 h-4 mr-2" /* Adjusted margin */
                   fill="none"
                   stroke="currentColor"
                   viewBox="0 0 24 24"
@@ -238,11 +245,11 @@ function DashboardContent() {
             )}
           </button>
           <button
-            className="bg-gray-200 py-2 px-4 rounded-lg shadow-sm hover:bg-gray-300 flex items-center"
+            className="bg-slate-100 text-slate-700 py-2 px-5 rounded-lg shadow hover:bg-slate-200 transition-colors flex items-center text-sm font-medium" // Adjusted padding, colors, and added font style
             onClick={() => signOut()}
           >
             <svg
-              className="w-4 h-4 mr-1"
+              className="w-4 h-4 mr-2" /* Adjusted margin */
               fill="none"
               stroke="currentColor"
               viewBox="0 0 24 24"
@@ -259,7 +266,6 @@ function DashboardContent() {
           </button>
         </div>
       </div>
-
       {/* Key Performance Metrics */}
       <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
         <MetricCard
@@ -297,7 +303,6 @@ function DashboardContent() {
           variant="success"
         />
       </div>
-
       {/* Sentiment & Escalation Metrics */}
       <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
         <div className="bg-white p-6 rounded-xl shadow lg:col-span-1">
@@ -362,7 +367,6 @@ function DashboardContent() {
           </div>
         </div>
       </div>
-
       {/* Charts Row */}
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
         <div className="bg-white p-6 rounded-xl shadow">
@@ -378,7 +382,6 @@ function DashboardContent() {
           <CategoriesBarChart categories={metrics.categories || {}} />
         </div>
       </div>
-
       {/* Word Cloud and World Map */}
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
         <div className="bg-white p-6 rounded-xl shadow">
@@ -394,7 +397,6 @@ function DashboardContent() {
           <GeographicMap countries={getCountryData()} height={300} />
         </div>
       </div>
-
       {/* Response Time Distribution and Language Distribution */}
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
         <div className="bg-white p-6 rounded-xl shadow">
@@ -411,7 +413,6 @@ function DashboardContent() {
           <LanguagePieChart languages={metrics.languages || {}} />
         </div>
       </div>
-
       {/* Token Usage */}
       <div className="bg-white p-6 rounded-xl shadow">
         <div className="flex justify-between items-center mb-4">
@@ -431,7 +432,6 @@ function DashboardContent() {
         </div>
         <TokenUsageChart tokenData={getTokenData()} />
       </div>
-
       {/* Admin Controls */}
       {isAdmin && (
         <>
@@ -447,8 +447,14 @@ function DashboardContent() {
 export default function DashboardPage() {
   // We don't use useSession here to avoid the error outside the provider
   return (
-    <div className="p-4 md:p-6 max-w-7xl mx-auto">
-      <DashboardContent />
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-sky-100 p-4 md:p-6">
+      {" "}
+      {/* Added gradient background */}
+      <div className="max-w-7xl mx-auto">
+        {" "}
+        {/* Added inner container for content alignment */}
+        <DashboardContent />
+      </div>
     </div>
   );
 }
diff --git a/app/globals.css b/app/globals.css
index 843d8bc..c4871c8 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -7,3 +7,5 @@ input,
 button {
   font-family: inherit;
 }
+
+@import "tailwindcss";
diff --git a/next.config.js b/next.config.js
index 998f06e..fc1a237 100644
--- a/next.config.js
+++ b/next.config.js
@@ -2,7 +2,7 @@
 const nextConfig = {
   reactStrictMode: true,
   // Allow cross-origin requests from specific origins in development
-  allowedDevOrigins: ["192.168.1.2"],
+  allowedDevOrigins: ["192.168.1.2","localhost","propc"],
 };
 
 export default nextConfig;
diff --git a/package-lock.json b/package-lock.json
index 394c415..98aa8ae 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -29,8 +29,7 @@
         "react": "^19.1.0",
         "react-chartjs-2": "^5.0.0",
         "react-dom": "^19.1.0",
-        "react-leaflet": "^5.0.0",
-        "tailwindcss": "^4.1.7"
+        "react-leaflet": "^5.0.0"
       },
       "devDependencies": {
         "@eslint/eslintrc": "^3.3.1",
@@ -43,13 +42,13 @@
         "@types/react-dom": "^19.1.5",
         "@typescript-eslint/eslint-plugin": "^8.32.1",
         "@typescript-eslint/parser": "^8.32.1",
-        "autoprefixer": "^10.4.0",
         "eslint": "^9.27.0",
         "eslint-config-next": "^15.3.2",
         "eslint-plugin-prettier": "^5.4.0",
-        "postcss": "^8.4.0",
+        "postcss": "^8.5.3",
         "prettier": "^3.5.3",
         "prisma": "^6.8.2",
+        "tailwindcss": "^4.1.7",
         "typescript": "^5.0.0"
       }
     },
@@ -2531,44 +2530,6 @@
       "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
       "license": "MIT"
     },
-    "node_modules/autoprefixer": {
-      "version": "10.4.21",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.21.tgz",
-      "integrity": "sha512-O+A6LWV5LDHSJD3LjHYoNi4VLsj/Whi7k6zG12xTYaU4cQ8oxQGckXNX8cRHK5yOZ/ppVHe0ZBXGzSV9jXdVbQ==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "browserslist": "^4.24.4",
-        "caniuse-lite": "^1.0.30001702",
-        "fraction.js": "^4.3.7",
-        "normalize-range": "^0.1.2",
-        "picocolors": "^1.1.1",
-        "postcss-value-parser": "^4.2.0"
-      },
-      "bin": {
-        "autoprefixer": "bin/autoprefixer"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14"
-      },
-      "peerDependencies": {
-        "postcss": "^8.1.0"
-      }
-    },
     "node_modules/available-typed-arrays": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
@@ -2645,39 +2606,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/browserslist": {
-      "version": "4.24.5",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.24.5.tgz",
-      "integrity": "sha512-FDToo4Wo82hIdgc1CQ+NQD0hEhmpPjrZ3hiUgwgOG6IuTdlpr8jdjyG24P6cNP1yJpTLzS5OcGgSw0xmDU1/Tw==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/browserslist"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/browserslist"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "caniuse-lite": "^1.0.30001716",
-        "electron-to-chromium": "^1.5.149",
-        "node-releases": "^2.0.19",
-        "update-browserslist-db": "^1.1.3"
-      },
-      "bin": {
-        "browserslist": "cli.js"
-      },
-      "engines": {
-        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
-      }
-    },
     "node_modules/busboy": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",
@@ -3527,13 +3455,6 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/electron-to-chromium": {
-      "version": "1.5.155",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.155.tgz",
-      "integrity": "sha512-ps5KcGGmwL8VaeJlvlDlu4fORQpv3+GIcF5I3f9tUKUlJ/wsysh6HU8P5L1XWRYeXfA0oJd4PyM8ds8zTFf6Ng==",
-      "dev": true,
-      "license": "ISC"
-    },
     "node_modules/emoji-regex": {
       "version": "9.2.2",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
@@ -3725,16 +3646,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/escalade": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
-      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/escape-string-regexp": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
@@ -4455,20 +4366,6 @@
         "node": ">=12.20.0"
       }
     },
-    "node_modules/fraction.js": {
-      "version": "4.3.7",
-      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
-      "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": "*"
-      },
-      "funding": {
-        "type": "patreon",
-        "url": "https://github.com/sponsors/rawify"
-      }
-    },
     "node_modules/function-bind": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
@@ -6019,23 +5916,6 @@
         "url": "https://opencollective.com/node-fetch"
       }
     },
-    "node_modules/node-releases": {
-      "version": "2.0.19",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz",
-      "integrity": "sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/normalize-range": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
-      "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/oauth": {
       "version": "0.9.15",
       "resolved": "https://registry.npmjs.org/oauth/-/oauth-0.9.15.tgz",
@@ -6364,13 +6244,6 @@
         "node": "^10 || ^12 || >=14"
       }
     },
-    "node_modules/postcss-value-parser": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
-      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/preact": {
       "version": "10.26.6",
       "resolved": "https://registry.npmjs.org/preact/-/preact-10.26.6.tgz",
@@ -7200,6 +7073,7 @@
       "version": "4.1.7",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.7.tgz",
       "integrity": "sha512-kr1o/ErIdNhTz8uzAYL7TpaUuzKIE6QPQ4qmSdxnoX/lo+5wmUHQA6h3L5yIqEImSRnAAURDirLu/BgiXGPAhg==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/tapable": {
@@ -7493,37 +7367,6 @@
         "@unrs/resolver-binding-win32-x64-msvc": "1.7.2"
       }
     },
-    "node_modules/update-browserslist-db": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.3.tgz",
-      "integrity": "sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/browserslist"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/browserslist"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "escalade": "^3.2.0",
-        "picocolors": "^1.1.1"
-      },
-      "bin": {
-        "update-browserslist-db": "cli.js"
-      },
-      "peerDependencies": {
-        "browserslist": ">= 4.21.0"
-      }
-    },
     "node_modules/uri-js": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
diff --git a/package.json b/package.json
index ef4aeb6..3c3e184 100644
--- a/package.json
+++ b/package.json
@@ -36,8 +36,7 @@
     "react": "^19.1.0",
     "react-chartjs-2": "^5.0.0",
     "react-dom": "^19.1.0",
-    "react-leaflet": "^5.0.0",
-    "tailwindcss": "^4.1.7"
+    "react-leaflet": "^5.0.0"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3.3.1",
@@ -50,13 +49,13 @@
     "@types/react-dom": "^19.1.5",
     "@typescript-eslint/eslint-plugin": "^8.32.1",
     "@typescript-eslint/parser": "^8.32.1",
-    "autoprefixer": "^10.4.0",
     "eslint": "^9.27.0",
     "eslint-config-next": "^15.3.2",
     "eslint-plugin-prettier": "^5.4.0",
-    "postcss": "^8.4.0",
+    "postcss": "^8.5.3",
     "prettier": "^3.5.3",
     "prisma": "^6.8.2",
+    "tailwindcss": "^4.1.7",
     "typescript": "^5.0.0"
   }
 }
diff --git a/postcss.config.js b/postcss.config.js
deleted file mode 100644
index f69c5d4..0000000
--- a/postcss.config.js
+++ /dev/null
@@ -1,6 +0,0 @@
-export default {
-  plugins: {
-    "@tailwindcss/postcss": {},
-    autoprefixer: {},
-  },
-};
diff --git a/postcss.config.mjs b/postcss.config.mjs
new file mode 100644
index 0000000..74f9c72
--- /dev/null
+++ b/postcss.config.mjs
@@ -0,0 +1,6 @@
+const config = {
+    plugins: {
+        "@tailwindcss/postcss": {},
+    },
+};
+export default config;
diff --git a/tailwind.config.js b/tailwind.config.js
index 73a3072..cd3d49d 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,5 +1,5 @@
 /** @type {import('tailwindcss').Config} */
-export default {
+const config = {
   content: [
     "./pages/**/*.{js,ts,jsx,tsx,mdx}",
     "./components/**/*.{js,ts,jsx,tsx,mdx}",
@@ -10,3 +10,5 @@ export default {
   },
   plugins: [],
 };
+
+export default config;