feat: production hardening with security, caching, CI/CD and UX improvements

.github/workflows/ci.yml

@@ -0,0 +1,91 @@
+name: CI
+
+on:
+  push:
+    branches: [main, dev]
+  pull_request:
+    branches: [main]
+
+jobs:
+  # ─── Backend ───────────────────────────────────────────────────────────────
+  backend:
+    name: Backend (Java 17 / Maven)
+    runs-on: ubuntu-latest
+
+    services:
+      postgres:
+        image: postgres:15
+        env:
+          POSTGRES_DB: supportsystem_test
+          POSTGRES_USER: postgres
+          POSTGRES_PASSWORD: postgres
+        ports:
+          - 5432:5432
+        options: >-
+          --health-cmd pg_isready
+          --health-interval 10s
+          --health-timeout 5s
+          --health-retries 5
+
+    env:
+      SPRING_PROFILES_ACTIVE: test
+      SPRING_DATASOURCE_URL: jdbc:postgresql://localhost:5432/supportsystem_test
+      SPRING_DATASOURCE_USERNAME: postgres
+      SPRING_DATASOURCE_PASSWORD: postgres
+      JWT_SECRET: ci-test-secret-that-is-long-enough-for-hmac-sha256
+      SENDGRID_API_KEY: dummy-key-for-ci
+      SENDGRID_FROM_EMAIL: ci@example.com
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Set up Java 17
+        uses: actions/setup-java@v4
+        with:
+          java-version: '17'
+          distribution: 'temurin'
+          cache: maven
+
+      - name: Build and test
+        run: mvn --batch-mode verify
+
+      - name: Upload test reports
+        if: always()
+        uses: actions/upload-artifact@v4
+        with:
+          name: backend-test-reports
+          path: target/surefire-reports/
+
+  # ─── Frontend ──────────────────────────────────────────────────────────────
+  frontend:
+    name: Frontend (Node / Vite)
+    runs-on: ubuntu-latest
+
+    defaults:
+      run:
+        working-directory: frontend
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Set up Node 20
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: npm
+          cache-dependency-path: frontend/package-lock.json
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Type-check
+        run: npx tsc --noEmit
+
+      - name: Build
+        run: npm run build
+
+      - name: Upload build artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: frontend-dist
+          path: frontend/dist/

frontend/src/App.tsx

@@ -1,5 +1,7 @@
 import React, { Suspense, lazy } from 'react';
 import { BrowserRouter as Router, Routes, Route, Navigate, useLocation } from 'react-router-dom';
+import ErrorBoundary from './components/common/ErrorBoundary';
+import NotFoundPage from './pages/NotFoundPage';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Toaster } from 'react-hot-toast';
 import { AuthProvider, useAuth } from './contexts/AuthContext';
@@ -178,6 +180,7 @@ const AnimatedRoutes: React.FC = () => {
             {/* Landing & misc */}
             <Route path="/"     element={<LandingPage />} />
             <Route path="/home" element={<Navigate to="/dashboard" replace />} />
+            <Route path="*"     element={<NotFoundPage />} />
           </Route>
         </Routes>
       </Suspense>
@@ -188,6 +191,7 @@ const AnimatedRoutes: React.FC = () => {
 // ─── App ──────────────────────────────────────────────────────────────────────
 function App() {
   return (
+    <ErrorBoundary>
     <QueryClientProvider client={queryClient}>
       <ThemeProvider>
         <LanguageProvider>
@@ -225,6 +229,7 @@ function App() {
         </LanguageProvider>
       </ThemeProvider>
     </QueryClientProvider>
+    </ErrorBoundary>
   );
 }
 

frontend/src/components/common/ErrorBoundary.tsx

@@ -0,0 +1,77 @@
+import React, { Component, ErrorInfo } from 'react';
+
+interface Props {
+  children: React.ReactNode;
+  fallback?: React.ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+  error: Error | null;
+}
+
+class ErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, info: ErrorInfo) {
+    console.error('ErrorBoundary caught:', error, info.componentStack);
+  }
+
+  handleReset = () => {
+    this.setState({ hasError: false, error: null });
+  };
+
+  render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) return this.props.fallback;
+
+      return (
+        <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-slate-900 px-4">
+          <div className="max-w-md w-full text-center space-y-6">
+            <div className="w-16 h-16 bg-black dark:bg-white rounded-2xl flex items-center justify-center mx-auto">
+              <svg className="w-8 h-8 text-white dark:text-black" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01M12 3a9 9 0 100 18A9 9 0 0012 3z" />
+              </svg>
+            </div>
+            <div className="space-y-2">
+              <h1 className="text-2xl font-extrabold text-gray-900 dark:text-white">Something went wrong</h1>
+              <p className="text-gray-500 dark:text-slate-400 text-sm">
+                An unexpected error occurred. Please try refreshing the page.
+              </p>
+              {this.state.error && (
+                <p className="text-xs font-mono text-gray-400 dark:text-slate-500 bg-gray-100 dark:bg-slate-800 rounded-lg px-3 py-2 mt-3 text-left break-all">
+                  {this.state.error.message}
+                </p>
+              )}
+            </div>
+            <div className="flex gap-3 justify-center">
+              <button
+                onClick={this.handleReset}
+                className="px-5 py-2.5 bg-black dark:bg-white text-white dark:text-black text-sm font-semibold rounded-xl hover:opacity-80 transition-opacity"
+              >
+                Try again
+              </button>
+              <button
+                onClick={() => window.location.replace('/')}
+                className="px-5 py-2.5 border border-gray-200 dark:border-slate-700 text-gray-700 dark:text-slate-300 text-sm font-semibold rounded-xl hover:bg-gray-50 dark:hover:bg-slate-800 transition-colors"
+              >
+                Go home
+              </button>
+            </div>
+          </div>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;

frontend/src/pages/NotFoundPage.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+
+const NotFoundPage: React.FC = () => {
+  const navigate = useNavigate();
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-slate-900 px-4">
+      <div className="max-w-md w-full text-center space-y-6">
+        <div className="space-y-1">
+          <p className="text-8xl font-extrabold text-black dark:text-white tracking-tight">404</p>
+          <p className="text-lg font-bold text-gray-900 dark:text-white">Page not found</p>
+          <p className="text-sm text-gray-500 dark:text-slate-400">
+            The page you are looking for does not exist or has been moved.
+          </p>
+        </div>
+        <div className="flex gap-3 justify-center">
+          <button
+            onClick={() => navigate(-1)}
+            className="px-5 py-2.5 border border-gray-200 dark:border-slate-700 text-gray-700 dark:text-slate-300 text-sm font-semibold rounded-xl hover:bg-gray-50 dark:hover:bg-slate-800 transition-colors"
+          >
+            Go back
+          </button>
+          <Link
+            to="/"
+            className="px-5 py-2.5 bg-black dark:bg-white text-white dark:text-black text-sm font-semibold rounded-xl hover:opacity-80 transition-opacity"
+          >
+            Go home
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default NotFoundPage;

frontend/src/pages/admin/AdminAnalyticsPage.tsx

@@ -7,7 +7,7 @@ import {
 import Card from '../../components/common/Card';
 import Button from '../../components/common/Button';
 import { exportToCSV } from '../../utils/exportUtils';
-import LoadingSpinner from '../../components/common/LoadingSpinner';
+import { StatCardSkeleton } from '../../components/common/SkeletonLoader';
 import { api } from '../../services/api';
 
 interface AnalyticsData {
@@ -96,7 +96,16 @@ const AdminAnalyticsPage: React.FC = () => {
     }
   };
 
-  if (isLoading) return <LoadingSpinner size="lg" text="Loading analytics..." />;
+  if (isLoading) return (
+    <div className="space-y-6">
+      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+        <StatCardSkeleton /><StatCardSkeleton /><StatCardSkeleton /><StatCardSkeleton />
+      </div>
+      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+        <StatCardSkeleton /><StatCardSkeleton /><StatCardSkeleton /><StatCardSkeleton />
+      </div>
+    </div>
+  );
 
   if (error) {
     return (

frontend/src/pages/admin/AdminRequestsPage.tsx

@@ -6,7 +6,7 @@ import { RequestStatus } from '../../types';
 import Card from '../../components/common/Card';
 import Button from '../../components/common/Button';
 import Badge from '../../components/common/Badge';
-import LoadingSpinner from '../../components/common/LoadingSpinner';
+import { TableSkeleton } from '../../components/common/SkeletonLoader';
 import EmptyState from '../../components/common/EmptyState';
 import { exportToCSV } from '../../utils/exportUtils';
 import Modal from '../../components/common/Modal';
@@ -270,7 +270,7 @@ const AdminRequestsPage: React.FC = () => {
   };
 
   if (isLoading) {
-    return <LoadingSpinner size="lg" text="Loading requests..." />;
+    return <TableSkeleton cols={6} rows={8} />;
   }
 
   return (

frontend/src/pages/admin/AdminUsersPage.tsx

@@ -7,7 +7,7 @@ import { UserRole } from '../../types';
 import Card from '../../components/common/Card';
 import Button from '../../components/common/Button';
 import Badge from '../../components/common/Badge';
-import LoadingSpinner from '../../components/common/LoadingSpinner';
+import { TableSkeleton, StatCardSkeleton } from '../../components/common/SkeletonLoader';
 import EmptyState from '../../components/common/EmptyState';
 import Modal from '../../components/common/Modal';
 import Input from '../../components/common/Input';
@@ -390,7 +390,17 @@ const AdminUsersPage: React.FC = () => {
   };
 
   if (isLoading) {
-    return <LoadingSpinner size="lg" text="Loading users..." />;
+    return (
+      <div className="space-y-6">
+        <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+          <StatCardSkeleton />
+          <StatCardSkeleton />
+          <StatCardSkeleton />
+          <StatCardSkeleton />
+        </div>
+        <TableSkeleton cols={5} rows={8} />
+      </div>
+    );
   }
 
   return (

src/main/java/om/community/supportsystem/CommunitySupportSystemApplication.java

@@ -2,8 +2,10 @@
 
 import org.springframework.boot.SpringApplication;
 import org.springframework.boot.autoconfigure.SpringBootApplication;
+import org.springframework.cache.annotation.EnableCaching;
 
 @SpringBootApplication
+@EnableCaching
 public class CommunitySupportSystemApplication {
 
 	public static void main(String[] args) {