Merge pull request #37 from TechTorque-2025/dev

Dev

Author: RandithaK

README.md

@@ -48,3 +48,26 @@ This repository contains the source code for the TechTorque 2025 customer and em
    npm run setup-hooks
    ```
    This configures automatic linting on commit and build checking on push. See [GIT_HOOKS.md](GIT_HOOKS.md) for details.
+
+   ### 🔌 Environment
+
+   - The frontend expects an API base to be available at runtime. You can configure this via the
+      `NEXT_PUBLIC_API_BASE_URL` environment variable. When not set, the runtime defaults to
+      `http://localhost:8080` (useful in development).
+
+   - The AI chat widget reaches the AI chat proxy at `/api/v1/ai/chat` (or `{{NEXT_PUBLIC_API_BASE_URL}}/api/v1/ai/chat` when the public API base is set). This ensures the frontend talks to the configured API gateway or the local Next.js proxy.
+
+### 🎨 Theme & Styling (Centralized)
+
+- A single global stylesheet lives at `src/app/globals.css` and contains all theme variables for light & dark mode, plus utility classes like:
+   - `.theme-button-primary`, `.theme-button-secondary` — semantic buttons
+   - `.theme-bg-primary`, `.theme-text-primary`, `.theme-border`, etc — consistent building blocks
+   - `.automotive-accent`, `.accent-badge`, `.text-gradient-accent`, `.progress-accent` — accent utilities
+
+- Theme switching is implemented using `src/app/contexts/ThemeContext.tsx` plus a small pre-hydration script in `src/app/layout.tsx` (so the app applies the saved system preference or previously saved theme before React mounts to avoid flashes).
+
+- Quick checks added:
+   - `npm run check:theme` — verifies `globals.css` and `ThemeContext` contain expected hooks and variables.
+   - `npm run check:colors` — scans `src/` for hardcoded hex/rgb color usage (ignores `globals.css`).
+
+If you're adding new UI colors, add variables to `src/app/globals.css` and use the semantic utility classes (or create new ones) — this keeps light/dark behavior centralized and consistent across the app.

package-lock.json

@@ -7,14 +7,16 @@
     "build": "next build --turbopack",
     "start": "next start",
     "lint": "eslint",
+    "check:colors": "node ./scripts/check-hardcoded-colors.js",
+    "check:theme": "node ./scripts/check-theme-setup.js",
     "setup-hooks": "chmod +x .githooks/pre-commit .githooks/pre-push && git config core.hooksPath .githooks && echo '✅ Git hooks configured successfully!'"
   },
   "dependencies": {
     "@stomp/stompjs": "^7.2.1",
     "axios": "^1.12.2",
     "js-cookie": "^3.0.5",
     "lucide-react": "^0.553.0",
-    "next": "^16.0.1",
+    "next": "^16.0.3",
     "react": "19.1.0",
     "react-dom": "19.1.0",
     "sockjs-client": "^1.6.1"

package.json

@@ -0,0 +1,35 @@
+#!/usr/bin/env node
+import fs from 'fs'
+import path from 'path'
+
+const root = path.resolve(__dirname, '..', 'src')
+
+const hexRe = /#[0-9a-fA-F]{3,6}/g
+const rgbRe = /rgba?\(/gi
+
+function walk(dir) {
+  const entries = fs.readdirSync(dir, { withFileTypes: true })
+  for (const e of entries) {
+    const full = path.join(dir, e.name)
+    if (e.isDirectory()) {
+      walk(full)
+    } else if (e.isFile()) {
+      if (full.endsWith('globals.css')) continue
+      if (!full.endsWith('.css') && !full.endsWith('.tsx') && !full.endsWith('.ts') && !full.endsWith('.jsx') && !full.endsWith('.js') && !full.endsWith('.svg')) continue
+      const content = fs.readFileSync(full, 'utf8')
+      const hex = content.match(hexRe)
+      const rgb = content.match(rgbRe)
+      if ((hex && hex.length) || (rgb && rgb.length)) {
+        console.log(`Found in ${path.relative(process.cwd(), full)} -> hex:${hex ? hex.join(',') : '0'} rgb:${rgb ? rgb.length : 0}`)
+      }
+    }
+  }
+}
+
+try {
+  walk(root)
+  console.log('\nSearch complete — open the above files and replace hardcoded colors with theme variables in src/app/globals.css.')
+} catch (err) {
+  console.error(err)
+  process.exit(1)
+}

scripts/check-hardcoded-colors.js

@@ -0,0 +1,27 @@
+#!/usr/bin/env node
+import fs from 'fs'
+import path from 'path'
+
+const globals = fs.readFileSync(path.resolve(__dirname, '../src/app/globals.css'), 'utf8')
+const themeContext = fs.readFileSync(path.resolve(__dirname, '../src/app/contexts/ThemeContext.tsx'), 'utf8')
+
+let ok = true
+
+function assert(cond, msg) {
+  if (!cond) {
+    console.error('FAIL:', msg)
+    ok = false
+  } else {
+    console.log('OK:', msg)
+  }
+}
+
+assert(globals.includes(':root'), 'globals.css has :root declarations')
+assert(globals.includes('html.dark'), 'globals.css has html.dark overrides')
+assert(globals.includes('--accent-primary'), 'globals.css defines --accent-primary var')
+
+assert(themeContext.includes("localStorage.getItem('theme')"), 'ThemeContext reads localStorage')
+assert(themeContext.includes("document.documentElement.classList"), 'ThemeContext manipulates document.documentElement classList')
+
+if (!ok) process.exit(1)
+console.log('\nTheme setup basic checks passed — globals.css + ThemeContext look correctly configured.')

scripts/check-theme-setup.js

@@ -94,7 +94,7 @@ export default function AdminDashboard() {
           <div className="flex gap-4">
             <button
               onClick={() => router.push("/profile")}
-              className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors"
+              className="px-4 py-2 theme-button-primary rounded-lg transition-colors"
             >
               My Profile
             </button>
@@ -108,13 +108,13 @@ export default function AdminDashboard() {
         </div>
 
         {error && (
-          <div className="mb-6 p-4 bg-red-50 dark:bg-red-900/20 rounded-lg border border-red-200 dark:border-red-800">
-            <p className="text-sm text-red-600 dark:text-red-400">{error}</p>
+          <div className="mb-6 theme-alert-danger">
+            <p className="text-sm">{error}</p>
           </div>
         )}
 
         {success && (
-          <div className="mb-6 p-4 bg-green-50 dark:bg-green-900/20 rounded-lg border border-green-200 dark:border-green-800">
+          <div className="mb-6 theme-alert-success">
             <p className="text-sm text-green-600 dark:text-green-400">
               {success}
             </p>

src/app/admin/page.tsx

@@ -6,8 +6,8 @@ import Link from 'next/link'
 import authService from '../../../services/authService'
 import ThemeToggle from '../../components/ThemeToggle'
 
-const Icon = ({ d, size = 10 }: { d: string; size?: number }) => ( <svg className={`w-${size} h-${size} text-white`} fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d={d} /></svg>);
-const BoltIcon = ({size = 10}) => <Icon d="M13 10V3L4 14h7v7l9-11h-7z" size={size} />;
+// (removed unused Icon helper)
+
 
 // --- Forgot Password Page Component ---
 export default function ForgotPasswordPage() {
@@ -46,7 +46,7 @@ export default function ForgotPasswordPage() {
       <header className="sticky-header shadow-lg border-b theme-border">
         <div className="max-w-7xl mx-auto py-4 px-4 sm:px-6 lg:px-8">
           <div className="flex justify-between items-center">
-            <Link href="/" className="flex items-center space-x-3 group"><div className="w-12 h-12 rounded-full bg-gradient-to-r from-blue-500 to-cyan-400 flex items-center justify-center shadow-lg transform transition-transform duration-300 group-hover:scale-110"><BoltIcon size={6} /></div><h1 className="text-2xl font-bold theme-text-primary hidden sm:block">TechTorque Auto</h1></Link>
+            <Link href="/" className="flex items-center space-x-3 group"><div className="automotive-accent w-12 h-12 rounded-full flex items-center justify-center shadow-lg transform transition-transform duration-300 group-hover:scale-110"><span className="text-white font-bold text-lg">TT</span></div><h1 className="text-2xl font-bold theme-text-primary hidden sm:block">TechTorque</h1></Link>
             <div className="flex items-center space-x-4"><Link href="/auth/login" className="theme-link hidden md:inline-block">Back to Sign In</Link><ThemeToggle /></div>
           </div>
         </div>
@@ -74,7 +74,7 @@ export default function ForgotPasswordPage() {
                 </div>
                 {error && (
                   <div className="mb-6 p-4 bg-red-50 dark:bg-red-900/20 rounded-lg border border-red-200 dark:border-red-800">
-                    <p className="text-sm text-red-600 dark:text-red-400">{error}</p>
+                    <p className="text-sm theme-text-danger">{error}</p>
                   </div>
                 )}
                 <form className="space-y-6" onSubmit={handleSubmit}>

src/app/auth/forgot-password/page.tsx

@@ -8,13 +8,8 @@ import authService from '../../../services/authService';
 import type { LoginRequest } from '../../../types/api';
 import ThemeToggle from '../../components/ThemeToggle';
 
-// Icon Components
-const Icon = ({ d, size = 10 }: { d: string; size?: number }) => (
-  <svg className={`w-${size} h-${size} text-white`} fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d={d} />
-  </svg>
-);
-const BoltIcon = ({size = 10}) => <Icon d="M13 10V3L4 14h7v7l9-11h-7z" size={size} />;
+// (removed unused Icon helper)
+
 const LockClosedIcon = () => <svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" /></svg>;
 
 
@@ -74,11 +69,11 @@ export default function LoginPage() {
         <div className="max-w-7xl mx-auto py-4 px-4 sm:px-6 lg:px-8">
           <div className="flex justify-between items-center">
             <Link href="/" className="flex items-center space-x-3 group">
-              <div className="w-12 h-12 rounded-full bg-gradient-to-r from-blue-500 to-cyan-400 flex items-center justify-center shadow-lg transform transition-transform duration-300 group-hover:scale-110">
-                <BoltIcon size={6} />
+              <div className="automotive-accent w-12 h-12 rounded-full flex items-center justify-center shadow-lg transform transition-transform duration-300 group-hover:scale-110">
+                <span className="text-white font-bold text-lg">TT</span>
               </div>
               <h1 className="text-2xl font-bold theme-text-primary hidden sm:block">
-                TechTorque Auto
+                TechTorque
               </h1>
             </Link>
             <div className="flex items-center space-x-4">
@@ -152,7 +147,7 @@ export default function LoginPage() {
                 </form>
                 {error && (
                   <div role="alert" className="mt-4 p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
-                    <p className="text-sm text-red-600 dark:text-red-400 mb-2">{error}</p>
+                    <p className="text-sm theme-text-danger mb-2">{error}</p>
                     {unverifiedEmail && (
                       <Link 
                         href={`/auth/resend-verification?email=${encodeURIComponent(unverifiedEmail)}`}