create-fullstack-boilerplate 1.0.0

package/template/Frontend/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "full-stack-template",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@heroicons/react": "^2.2.0",
+    "@tailwindcss/vite": "^4.1.13",
+    "axios": "^1.12.2",
+    "crypto-js": "^4.2.0",
+    "daisyui": "^5.1.14",
+    "jwt-decode": "^4.0.0",
+    "lucide-react": "^0.544.0",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "react-is": "^19.1.1",
+    "react-router-dom": "^7.9.2",
+    "react-spinners": "^0.17.0",
+    "recharts": "^3.2.1",
+    "tailwindcss": "^4.1.13"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.36.0",
+    "@types/react": "^19.1.13",
+    "@types/react-dom": "^19.1.9",
+    "@vitejs/plugin-react-swc": "^4.1.0",
+    "eslint": "^9.36.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "globals": "^16.4.0",
+    "vite": "^7.1.7"
+  }
+}

package/template/Frontend/src/App.jsx

@@ -0,0 +1,71 @@
+import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
+import { AuthProvider, useAuth } from './contexts/AuthContext';
+import { ThemeProvider, useTheme } from './contexts/ThemeContext';
+import SpinningLoader from './components/Loader';
+import Layout from './components/Layout';
+import ProtectedRoute from './components/ProtectedRoute';
+import Login from './pages/Login';
+import Settings from './pages/Settings';
+import Dashboard from './pages/Dashboard';
+import NotFound from './pages/NotFound';
+
+// Reusable wrapper component for protected routes with layout
+const ProtectedLayout = ({ component: Component }) => {
+  return (
+    <ProtectedRoute>
+      <Layout>
+        <Component />
+      </Layout>
+    </ProtectedRoute>
+  );
+};
+
+const AppContent = () => {
+  const { isAuthenticated, isLoading, handleLogout } = useAuth();
+  const { theme } = useTheme();
+
+  if (isLoading) {
+    return <SpinningLoader size={50} />;
+  }
+
+  return (
+    <div className={`min-h-screen ${theme}`}>
+      <Routes>
+        {!isAuthenticated ? (
+          <>
+            <Route path="/login" element={<Login />} />
+            <Route path="*" element={<Navigate to="/login" replace />} />
+          </>
+        ) : (
+          <>
+            {/* Redirect auth pages to dashboard */}
+            <Route path="/login" element={<Navigate to="/dashboard" replace />} />
+
+            {/* Protected routes */}
+            <Route path="/" element={<Navigate to="/dashboard" replace />} />
+            <Route path="/dashboard" element={<ProtectedLayout component={Dashboard} />} />
+            <Route path="/settings" element={<ProtectedLayout component={Settings} />} />
+
+            {/* 404 */}
+            <Route path="*" element={<NotFound />} />
+          </>
+        )}
+      </Routes>
+    </div>
+  );
+};
+
+// Main App component with providers
+const App = () => {
+  return (
+    <Router>
+      <AuthProvider>
+        <ThemeProvider>
+          <AppContent />
+        </ThemeProvider>
+      </AuthProvider>
+    </Router>
+  );
+};
+
+export default App;

package/template/Frontend/src/components/Layout.jsx

@@ -0,0 +1,61 @@
+import { useState } from 'react';
+import { useTheme } from '../contexts/ThemeContext';
+import Sidebar from './Sidebar';
+import ThemeToggle from './ThemeToggle';
+
+const Layout = ({ children, onLogout }) => {
+    const { isDark } = useTheme();
+    const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);
+    const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+
+    return (
+        <div className="flex h-screen overflow-hidden">
+            {/* Sidebar */}
+            <Sidebar
+                isCollapsed={isSidebarCollapsed}
+                setIsCollapsed={setIsSidebarCollapsed}
+                isMobileMenuOpen={isMobileMenuOpen}
+                setIsMobileMenuOpen={setIsMobileMenuOpen}
+                onLogout={onLogout}
+            />
+
+            {/* Mobile overlay */}
+            {isMobileMenuOpen && (
+                <div
+                    className="fixed inset-0 z-40 bg-black/50 lg:hidden"
+                    onClick={() => setIsMobileMenuOpen(false)}
+                />
+            )}
+
+            {/* Main Content */}
+            <main className={`flex-1 flex flex-col overflow-hidden transition-all duration-300 ${isSidebarCollapsed ? 'lg:ml-16' : 'lg:ml-64'
+                } ml-0`}>
+                {/* Mobile Header */}
+                <div className={`lg:hidden ${isDark ? 'bg-gray-800 border-gray-700' : 'bg-white border-gray-200'
+                    } border-b p-4 flex items-center justify-between transition-colors duration-200`}>
+                    <button
+                        onClick={() => setIsMobileMenuOpen(true)}
+                        className={`p-2 rounded-lg transition-colors duration-200 ${isDark ? 'hover:bg-gray-700 text-gray-300' : 'hover:bg-gray-100 text-gray-600'
+                            }`}
+                    >
+                        <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+                        </svg>
+                    </button>
+                    <h1 className={`text-xl font-articulatcf-demibold ${isDark ? 'text-white' : 'text-gray-800'
+                        } transition-colors duration-200`}>
+                        Maxiom
+                    </h1>
+                    <ThemeToggle size="sm" />
+                </div>
+
+                {/* Content Area */}
+                <div className="flex-1 overflow-auto">
+                    {children}
+                </div>
+            </main>
+        </div>
+    );
+};
+
+export default Layout;

package/template/Frontend/src/components/Loader.jsx

@@ -0,0 +1,19 @@
+import { useTheme } from '../contexts/ThemeContext';
+import { BarLoader } from 'react-spinners';
+
+const SpinningLoader = ({ size = 10 }) => {
+    const { isDark } = useTheme()
+    return (
+        <div className={`flex flex-col justify-center items-center gap-4 h-full w-full ${isDark ? 'bg-gray-900' : 'bg-white'}`}>
+            <img
+                src={'/PMDLogo.png'}
+                alt="Loading..."
+                style={{ width: "auto", height: size }}
+                className="animate-pulse"
+            />
+            <BarLoader color={isDark ? 'white' : "black"} width={200} className='w-full' />
+        </div>
+    );
+};
+
+export default SpinningLoader;

package/template/Frontend/src/components/ProtectedRoute.jsx

@@ -0,0 +1,19 @@
+import { Navigate } from 'react-router-dom';
+import { useAuth } from '../contexts/AuthContext';
+import SpinningLoader from './Loader';
+
+const ProtectedRoute = ({ children, fallback = null }) => {
+    const { isAuthenticated, isLoading } = useAuth();
+
+    if (isLoading) {
+        return <SpinningLoader size={50} />;
+    }
+
+    if (!isAuthenticated) {
+        return fallback || <Navigate to="/login" replace />;
+    }
+
+    return children;
+};
+
+export default ProtectedRoute;

package/template/Frontend/src/components/Sidebar.jsx

@@ -0,0 +1,286 @@
+import { useState } from 'react';
+import { Link, useLocation } from 'react-router-dom';
+import { ChevronLeft, ChevronRight, LogOut } from 'lucide-react';
+import { useAuth } from '../contexts/AuthContext';
+import { useTheme } from '../contexts/ThemeContext';
+import { getGroupedRoutes, routeCategories } from '../config/routes';
+import ClipLoader from 'react-spinners/ClipLoader'
+import ThemeToggle from './ThemeToggle';
+
+const Sidebar = ({
+    isCollapsed,
+    setIsCollapsed,
+    isMobileMenuOpen,
+    setIsMobileMenuOpen,
+    onLogout
+}) => {
+    const location = useLocation();
+    const { handleLogout, getEmail } = useAuth();
+    const { isDark } = useTheme();
+    const groupedRoutes = getGroupedRoutes();
+    const [loggingOut, isLoggingOut] = useState(false)
+
+    const handleLogoutClick = async () => {
+        try {
+            isLoggingOut(true)
+            await handleLogout();
+            isLoggingOut(false)
+        } catch (error) {
+            console.error('Logout error:', error);
+            isLoggingOut(false)
+        }
+    };
+
+    const closeMobileMenu = () => {
+        setIsMobileMenuOpen(false);
+    };
+
+    const SidebarContent = ({ isMobile = false }) => (
+        <div className={`flex flex-col h-full ${isDark ? 'bg-gradient-to-b from-gray-900 via-gray-900 to-gray-800' : 'bg-white'
+            } transition-all duration-300 ${isMobile ? 'shadow-2xl' : 'shadow-2xl border-r'} ${isDark && !isMobile ? 'border-gray-800' : !isMobile ? 'border-gray-100' : ''
+            }`}>
+
+            {/* Header with Logo */}
+            <div className={`flex items-center ${!isMobile && isCollapsed ? 'justify-center px-4' : 'justify-between px-6'
+                } py-5 ${isDark ? 'border-gray-800' : 'border-gray-100'
+                } border-b transition-all duration-300`}>
+                <div className={`flex items-center justify-center w-full space-x-3 overflow-hidden transition-all duration-300 ${!isMobile && isCollapsed ? 'opacity-0 w-0' : 'opacity-100 w-auto'
+                    }`}>
+                    <img
+                        src={'/pp.jpg'}
+                        alt="Cat"
+                        className='h-20 w-auto object-contain rounded-full'
+                    />
+                </div>
+
+                {!isMobile ? (
+                    <button
+                        onClick={() => setIsCollapsed(!isCollapsed)}
+                        className={`p-2.5 rounded-xl transition-all duration-200 group hover:cursor-pointer ${isDark
+                            ? 'hover:bg-gray-800 text-gray-400 hover:text-blue-400'
+                            : 'hover:bg-blue-50 text-gray-500 hover:text-blue-600'
+                            }`}
+                    >
+                        <div className="relative">
+                            {isCollapsed ? (
+                                <ChevronRight className="w-5 h-5 transition-transform group-hover:translate-x-0.5" />
+                            ) : (
+                                <ChevronLeft className="w-5 h-5 transition-transform group-hover:-translate-x-0.5" />
+                            )}
+                        </div>
+                    </button>
+                ) : (
+                    <button
+                        onClick={closeMobileMenu}
+                        className={`p-2.5 rounded-xl transition-all duration-200 ${isDark
+                            ? 'hover:bg-gray-800 text-gray-400 hover:text-blue-400'
+                            : 'hover:bg-blue-50 text-gray-500 hover:text-blue-600'
+                            }`}
+                    >
+                        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                        </svg>
+                    </button>
+                )}
+            </div>
+
+            {/* User Profile Card */}
+            <div className={`transition-all duration-300 ${!isMobile && isCollapsed ? 'px-2 py-4' : 'px-3 py-5'
+                }`}>
+                <div className={`relative rounded-2xl transition-all duration-300 overflow-hidden ${isDark
+                    ? 'bg-gradient-to-br from-gray-800 via-gray-800 to-gray-800/80 border border-gray-700/50'
+                    : 'bg-gradient-to-br from-blue-50 via-white to-blue-50/50 border border-blue-100'
+                    } ${!isMobile && isCollapsed ? 'p-2' : 'p-4'}`}>
+                    {/* Subtle gradient overlay */}
+                    <div className={`absolute inset-0 bg-gradient-to-br ${isDark ? 'from-blue-500/5 to-transparent' : 'from-blue-400/5 to-transparent'
+                        } pointer-events-none`}></div>
+
+                    <div className={`relative flex items-center ${!isMobile && isCollapsed ? 'justify-center' : 'space-x-3'
+                        }`}>
+                        <div className={`flex-shrink-0 relative ${!isMobile && isCollapsed ? 'w-8 h-8' : 'w-10 h-10'
+                            } rounded-xl bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center font-bold text-white shadow-lg shadow-blue-500/20 transition-all duration-300`}>
+                            <div className="absolute inset-0 rounded-xl bg-white/10"></div>
+                            <span className={`relative ${!isMobile && isCollapsed ? 'text-sm' : 'text-base'}`}>
+                                {getEmail()?.charAt(0).toUpperCase() || 'U'}
+                            </span>
+                        </div>
+
+                        <div className={`flex-1 min-w-0 overflow-hidden transition-all duration-300 ${!isMobile && isCollapsed ? 'opacity-0 w-0' : 'opacity-100 w-auto'
+                            }`}>
+                            <div className={`font-semibold truncate text-sm ${isDark ? 'text-white' : 'text-gray-800'
+                                }`}>
+                                {getEmail()?.split('@')[0] || 'User'}
+                            </div>
+                            <div className={`text-xs truncate ${isDark ? 'text-gray-400' : 'text-gray-500'
+                                }`}>
+                                {getEmail() || 'user@email.com'}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            {/* Navigation */}
+            <nav className={`flex-1 overflow-y-auto overflow-x-hidden ${!isMobile && isCollapsed ? 'px-2' : 'px-4'
+                } pb-4 scrollbar-thin ${isDark ? 'scrollbar-thumb-gray-700 scrollbar-track-gray-800' : 'scrollbar-thumb-gray-300 scrollbar-track-gray-100'
+                }`}>
+                <div className="space-y-8 py-2">
+                    {Object.entries(groupedRoutes).map(([categoryKey, routes], categoryIndex) => {
+                        const category = routeCategories[categoryKey];
+
+                        return (
+                            <div
+                                key={categoryKey}
+                                style={{ animationDelay: `${categoryIndex * 50}ms` }}
+                                className="nav-item-enter"
+                            >
+                                {/* Category Header */}
+                                {category.showHeader && (!isCollapsed || isMobile) && (
+                                    <div className="mb-6 px-3">
+                                        <div className="flex items-center space-x-2">
+                                            <div className={`flex-1 h-px ${isDark ? 'bg-gradient-to-r from-gray-400 to-transparent' : 'bg-gradient-to-r from-blue-900 to-transparent'
+                                                }`}></div>
+                                            <h3 className={`text-xs font-bold uppercase tracking-widest ${isDark ? 'text-white' : 'text-blue-900'
+                                                }`}>
+                                                {category.name}
+                                            </h3>
+                                            <div className={`flex-1 h-px ${isDark ? 'bg-gradient-to-l from-gray-400 to-transparent' : 'bg-gradient-to-l from-blue-900 to-transparent'
+                                                }`}></div>
+                                        </div>
+                                    </div>
+                                )}
+
+                                {/* Category Routes */}
+                                <div className="space-y-1.5">
+                                    {routes.map((route, routeIndex) => {
+                                        const Icon = route.icon;
+                                        const isActive = location.pathname === route.path;
+
+                                        return (
+                                            <Link
+                                                key={route.id}
+                                                to={route.path}
+                                                onClick={isMobile ? closeMobileMenu : undefined}
+                                                style={{ animationDelay: `${(categoryIndex * routes.length + routeIndex) * 30}ms` }}
+                                                className={`group relative flex items-center transition-all duration-200 ${!isMobile && isCollapsed
+                                                    ? 'justify-center p-3 mx-auto w-12 h-12'
+                                                    : 'space-x-3 px-4 py-3.5'
+                                                    } rounded-xl ${isActive
+                                                        ? isDark
+                                                            ? 'bg-gradient-to-r from-blue-600 to-indigo-600 text-white shadow-lg shadow-blue-600/25'
+                                                            : 'bg-gradient-to-r from-blue-600 to-indigo-600 text-white shadow-lg shadow-blue-600/20'
+                                                        : isDark
+                                                            ? 'text-gray-400 hover:bg-gray-800/50 hover:text-blue-400'
+                                                            : 'text-gray-600 hover:bg-blue-50 hover:text-blue-600'
+                                                    } nav-item-enter`}
+                                                title={!isMobile && isCollapsed ? route.name : undefined}
+                                            >
+                                                {/* Active indicator */}
+                                                {isActive && (isMobile || !isCollapsed) && (
+                                                    <div className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-8 bg-white rounded-r-full shadow-lg"></div>
+                                                )}
+
+                                                {/* Icon with animation */}
+                                                <div className={`relative ${isActive ? 'scale-110' : 'group-hover:scale-105'
+                                                    } transition-transform duration-200`}>
+                                                    <Icon
+                                                        strokeWidth={isActive ? 2.5 : 2}
+                                                        className="w-5 h-5 flex-shrink-0"
+                                                    />
+                                                    {isActive && (
+                                                        <div className="absolute inset-0 animate-ping opacity-20">
+                                                            <Icon className="w-5 h-5" />
+                                                        </div>
+                                                    )}
+                                                </div>
+
+                                                {/* Route name with smooth fade */}
+                                                <span className={`font-semibold text-sm truncate transition-all duration-300 ${!isMobile && isCollapsed ? 'opacity-0 w-0' : 'opacity-100 w-auto'
+                                                    }`}>
+                                                    {route.name}
+                                                </span>
+
+                                                {/* Hover effect overlay */}
+                                                {!isActive && (
+                                                    <div className={`absolute inset-0 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-200 ${isDark
+                                                        ? 'bg-gradient-to-r from-blue-500/5 to-indigo-500/5'
+                                                        : 'bg-gradient-to-r from-blue-400/5 to-indigo-400/5'
+                                                        }`}></div>
+                                                )}
+                                            </Link>
+                                        );
+                                    })}
+                                </div>
+                            </div>
+                        );
+                    })}
+                </div>
+            </nav>
+
+            {/* Footer */}
+            <div className={`${!isMobile && isCollapsed ? 'px-2' : 'px-6'
+                } py-4 space-y-3 border-t ${isDark ? 'border-gray-800 bg-gray-900/50' : 'border-gray-100 bg-gray-50/50'
+                } transition-all duration-300`}>
+                {/* Theme Toggle */}
+                <div className={`flex items-center ${!isMobile && isCollapsed ? 'justify-center' : 'justify-between'
+                    } transition-all duration-300`}>
+                    <span className={`text-sm font-medium ${isDark ? 'text-white' : 'text-gray-600'
+                        } transition-all duration-300 ${!isMobile && isCollapsed ? 'opacity-0 w-0' : 'opacity-100 w-auto'
+                        }`}>
+                        Theme
+                    </span>
+                    <ThemeToggle size="sm" />
+                </div>
+
+                {/* Logout Button */}
+                <button
+                    onClick={handleLogoutClick}
+                    disabled={loggingOut}
+                    className={`w-full flex items-center ${!isMobile && isCollapsed ? 'justify-center p-3' : 'justify-center space-x-2 px-4 py-3'
+                        } rounded-xl font-semibold text-sm transition-all duration-200 group relative overflow-hidden ${isDark
+                            ? 'bg-red-900/20 text-red-400 hover:bg-red-900/30 border border-red-800/50 hover:border-red-700/50'
+                            : 'bg-red-50 text-red-600 hover:bg-red-100 border border-red-200 hover:border-red-300'
+                        } disabled:opacity-50 disabled:cursor-not-allowed`}
+                    title={!isMobile && isCollapsed ? "Logout" : undefined}
+                >
+                    {/* Animated background on hover */}
+                    <div className={`absolute inset-0 ${isDark ? 'bg-red-500/10' : 'bg-red-500/5'
+                        } transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left`}></div>
+
+                    <LogOut className={`w-5 h-5 flex-shrink-0 relative z-10 ${loggingOut ? 'animate-pulse' : 'group-hover:rotate-12 transition-transform duration-200'
+                        }`} />
+
+                    <span className={`relative z-10 transition-all duration-300 ${!isMobile && isCollapsed ? 'opacity-0 w-0' : 'opacity-100 w-auto'
+                        }`}>
+                        {loggingOut ? 'Logging out...' : 'Logout'}
+                    </span>
+
+                    {loggingOut && (isMobile || !isCollapsed) && (
+                        <ClipLoader size={16} color={isDark ? '#f87171' : '#dc2626'} className='ml-2 relative z-10' />
+                    )}
+                </button>
+            </div>
+        </div>
+    );
+
+
+    return (
+        <>
+            {/* Desktop Sidebar - Fixed with smooth transitions */}
+            <div
+                className={`hidden lg:flex lg:flex-col lg:fixed lg:inset-y-0 lg:z-50 transition-all duration-300 ease-in-out ${isCollapsed ? 'lg:w-16' : 'lg:w-64'
+                    }`}
+            >
+                <SidebarContent isMobile={false} />
+            </div>
+
+            {/* Mobile Sidebar with slide animation */}
+            <div className={`fixed inset-y-0 left-0 z-50 w-72 transform transition-transform duration-300 ease-in-out lg:hidden ${isMobileMenuOpen ? 'translate-x-0' : '-translate-x-full'
+                }`}>
+                <SidebarContent isMobile={true} />
+            </div>
+        </>
+    );
+};
+
+export default Sidebar;

package/template/Frontend/src/components/ThemeToggle.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { useTheme } from '../contexts/ThemeContext';
+import { SunIcon, MoonIcon } from '@heroicons/react/24/outline';
+
+const ThemeToggle = ({ size = 'md', className = '' }) => {
+    const { theme, toggleTheme } = useTheme();
+
+    const sizeClasses = {
+        sm: 'btn-sm',
+        md: '',
+        lg: 'btn-lg'
+    };
+
+    return (
+        <button
+            onClick={toggleTheme}
+            className={`btn btn-ghost cursor-pointer ${sizeClasses[size]} ${className}`}
+            aria-label={`Switch to ${theme === 'light' ? 'dark' : 'light'} mode`}
+            title={`Switch to ${theme === 'light' ? 'dark' : 'light'} mode`}
+        >
+            {theme === 'light' ? (
+            <MoonIcon strokeWidth={'2'} className="w-6 h-6 text-blue-500" />
+            ) : (
+                <SunIcon strokeWidth={'2'} className="w-6 h-6 text-yellow-400" />
+            )}
+        </button>
+    );
+};
+
+export default ThemeToggle;

package/template/Frontend/src/config/axiosClient.js

@@ -0,0 +1,46 @@
+import axios from "axios";
+
+const API_BASE_URL = import.meta.env.VITE_API_BASE_URL;
+
+// Helper function to create a client with common interceptors
+function createAxiosClient(baseURL) {
+    const client = axios.create({
+        baseURL,
+        timeout: 10000,
+        headers: {
+            "Content-Type": "application/json",
+        },
+    });
+
+    // Request interceptor (attach token)
+    client.interceptors.request.use(
+        (config) => {
+            const token = localStorage.getItem("authToken");
+            if (token) {
+                config.headers.Authorization = `Bearer ${token}`;
+            }
+            return config;
+        },
+        (error) => Promise.reject(error)
+    );
+
+    // Response interceptor (handle 401)
+    client.interceptors.response.use(
+        (response) => response,
+        (error) => {
+            if (error.response?.status === 401) {
+                localStorage.removeItem("authToken");
+                localStorage.removeItem("user");
+                window.location.href = "/login";
+            }
+            return Promise.reject(error);
+        }
+    );
+
+    return client;
+}
+
+// Export separate clients
+export const axiosAuthClient = createAxiosClient(`${API_BASE_URL}/auth`);
+export const axiosDashboardClient = createAxiosClient(`${API_BASE_URL}/dashboard`);
+export const axiosSettingsClient = createAxiosClient(`${API_BASE_URL}/settings`);

package/template/Frontend/src/config/encryption.js

@@ -0,0 +1,11 @@
+import CryptoJS from 'crypto-js';
+
+const AES_KEY = import.meta.env.VITE_PASSWORD_ENCRYPTION_KEY;
+
+// Encrypt plain password -> return base64-like string
+export function encryptPassword(password) {
+  if (!AES_KEY) {
+    throw new Error('Encryption key not configured in VITE_PASSWORD_ENCRYPTION_KEY');
+  }
+  return CryptoJS.AES.encrypt(password, AES_KEY).toString();
+}