create-fullstack-boilerplate 1.0.0

package/template/Frontend/src/pages/Login.jsx

@@ -0,0 +1,195 @@
+import { useState } from 'react';
+import { useNavigate, Link } from 'react-router-dom';
+import { Eye, EyeOff, Mail, Lock, AlertCircle, User } from 'lucide-react';
+import { useAuth } from '../contexts/AuthContext';
+const Login = () => {
+    const navigate = useNavigate();
+    const { handleLogin } = useAuth();
+
+    const [formData, setFormData] = useState({
+        email: '',
+        password: ''
+    });
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState('');
+    const [showPassword, setShowPassword] = useState(false);
+    const [rememberMe, setRememberMe] = useState(false);
+
+    const handleChange = (e) => {
+        const { name, value } = e.target;
+        setFormData(prev => ({ ...prev, [name]: value }));
+        setError('');
+    };
+
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        setIsLoading(true);
+        setError('');
+
+        if (!formData.email || !formData.password) {
+            setError('Please fill in all fields');
+            setIsLoading(false);
+            return;
+        }
+
+        try {
+            const result = await handleLogin(formData.email, formData.password);
+
+            if (result.success) {
+                navigate('/dashboard');
+            } else {
+                setError(result.error);
+            }
+        } catch (error) {
+            console.error('Login error:', error);
+            setError('An unexpected error occurred. Please try again.');
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const handleForgotPassword = () => {
+        console.log('Forgot password clicked');
+        // Navigate to forgot password page when implemented
+        // navigate('/forgot-password');
+    };
+
+    return (
+        <div className="h-screen flex items-center justify-center relative overflow-hidden bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-100">
+            {/* Decorative diagonal lines */}
+            <div className="absolute inset-0 overflow-hidden pointer-events-none">
+                <div className="absolute -top-20 -right-20 w-40 h-full bg-gradient-to-b from-blue-400/20 via-indigo-400/10 to-transparent transform rotate-12"></div>
+                <div className="absolute -bottom-20 -left-20 w-40 h-full bg-gradient-to-t from-indigo-400/20 via-blue-400/10 to-transparent transform -rotate-12"></div>
+            </div>
+
+            {/* Main content */}
+            <div className="relative z-10 w-full max-w-md mx-4">
+                {/* Main Card */}
+                <div className="bg-white/90 backdrop-blur-sm shadow-2xl rounded-2xl border border-white/20 overflow-hidden">
+                    {/* Header */}
+                    <div className="px-6 pt-6 pb-4 text-center">
+                        <div className="relative mb-4">
+                            <img src={'/PMDLogo.png'} alt="PMD Logo" className='w-max h-14 mx-auto' />
+                        </div>
+
+                        <h1 className="text-2xl font-articulatcf-demibold text-gray-800 mb-1">Welcome Back</h1>
+                        <p className="text-gray-600 font-articulat-cf text-sm">Sign in to your account</p>
+
+                        {/* Accent line */}
+                        <div className="w-12 h-0.5 bg-gradient-to-r from-blue-500 to-indigo-500 rounded-full mx-auto mt-3"></div>  
+                    </div>
+
+                    {/* Error Alert */}
+                    {error && (
+                        <div className="mx-6 mb-4">
+                            <div className="bg-red-50 border border-red-200 rounded-lg p-3 flex items-start space-x-2">
+                                <AlertCircle className="w-4 h-4 text-red-500 flex-shrink-0 mt-0.5" />
+                                <span className="text-xs text-red-700 font-articulat-cf">{error}</span>
+                            </div>
+                        </div>
+                    )}
+
+                    <div className='flex flex-col w-full my-6 px-6 justify-start items-start'>
+                        <p><strong><i>Temp Email:</i></strong> admin@npmjs.com</p>
+                        <p><strong><i>Temp Pass:</i></strong> admin@786</p>
+                    </div>
+
+                    {/* Form */}
+                    <form onSubmit={handleSubmit} className="px-6 pb-4 space-y-8">
+                        {/* Email Field */}
+                        <div className="space-y-3">
+                            <label className="flex items-start text-md font-articulat-cf font-semibold text-gray-700">
+                                <Mail className="w-5 h-5 mr-1.5 text-blue-500" />
+                                Email Address
+                            </label>
+                            <input
+                                type="email"
+                                name="email"
+                                value={formData.email}
+                                onChange={handleChange}
+                                placeholder="Enter your email"
+                                className="w-full px-3 py-2.5 bg-gray-50 border border-gray-200 rounded-lg font-articulat-cf text-gray-800 placeholder:text-gray-400 text-sm"
+                                required
+                                disabled={isLoading}
+                                autoComplete="email"
+                            />
+                        </div>
+
+                        {/* Password Field */}
+                        <div className="space-y-3">
+                            <label className="flex items-start text-md font-articulat-cf font-medium text-gray-700">
+                                <Lock className="w-5 h-5 mr-1.5 text-blue-500" />
+                                Password
+                            </label>
+                            <div className="relative">
+                                <input
+                                    type={showPassword ? "text" : "password"}
+                                    name="password"
+                                    value={formData.password}
+                                    onChange={handleChange}
+                                    placeholder="Enter your password"
+                                    className="w-full px-3 py-2.5 bg-gray-50 border border-gray-200 rounded-lg font-articulat-cf text-gray-800 placeholder:text-gray-400 pr-10 text-sm"
+                                    required
+                                    disabled={isLoading}
+                                    autoComplete="current-password"
+                                />
+                                <button
+                                    type="button"
+                                    onClick={() => setShowPassword(!showPassword)}
+                                    className="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600 transition-colors"
+                                    disabled={isLoading}
+                                >
+                                    {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+                                </button>
+                            </div>
+                        </div>
+
+                        {/* Remember Me & Forgot Password */}
+                        <div className="flex items-center justify-between">
+                            <label className="flex items-center cursor-pointer">
+                                <input
+                                    type="checkbox"
+                                    checked={rememberMe}
+                                    onChange={(e) => setRememberMe(e.target.checked)}
+                                    disabled={isLoading}
+                                    className="w-3.5 h-3.5 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 focus:ring-1"
+                                />
+                                <span className="ml-2 text-xs text-gray-600 font-articulat-cf">Remember me</span>
+                            </label>
+                            <button
+                                type="button"
+                                onClick={handleForgotPassword}
+                                className="text-xs text-blue-600 hover:text-blue-700 font-articulat-cf font-medium transition-colors"
+                                disabled={isLoading}
+                            >
+                                Forgot password?
+                            </button>
+                        </div>
+
+                        {/* Submit Button */}
+                        <button
+                            type="submit"
+                            disabled={isLoading}
+                            className="mx-auto w-max bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white font-articulatcf-demibold py-2.5 px-4 rounded-lg transition-all duration-200 shadow-lg hover:shadow-xl disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center text-sm"
+                        >
+                            {isLoading ? (
+                                <>
+                                    <div className="w-4 h-4 border-2 border-white/20 border-t-white rounded-full animate-spin mr-2"></div>
+                                    Signing In...
+                                </>
+                            ) : (
+                                <>
+                                    <User className="w-4 h-4 mr-2" />
+                                    Sign In
+                                </>
+                            )}
+                        </button>
+                    </form>
+
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default Login;

package/template/Frontend/src/pages/NotFound.jsx

@@ -0,0 +1,70 @@
+import { useTheme } from "../contexts/ThemeContext";
+import { useNavigate } from "react-router-dom";
+import { Home, User, AlertCircle } from "lucide-react";
+
+const NotFound = () => {
+    const { isDark } = useTheme();
+    const navigate = useNavigate();
+
+    return (
+        <div className={`min-h-screen w-full flex items-center justify-center p-4 ${isDark ? 'bg-gray-900' : 'bg-gray-50'} transition-colors duration-200`}>
+            <div className="max-w-2xl w-full text-center">
+                {/* Animated 404 Icon */}
+                <div className="mb-8 relative">
+                    <div className={`inline-flex items-center justify-center w-32 h-32 rounded-full ${isDark ? 'bg-gray-800 border-gray-700' : 'bg-white border-gray-200'} border-2 shadow-xl mb-4`}>
+                        <AlertCircle className={`w-16 h-16 ${isDark ? 'text-blue-400' : 'text-blue-500'}`} strokeWidth={1.5} />
+                    </div>
+                </div>
+
+                {/* 404 Large Text */}
+                <h1 className={`text-8xl md:text-9xl font-bold mb-6 ${isDark ? 'text-gray-100' : 'text-gray-900'}`}>
+                    404
+                </h1>
+
+                {/* Error Message */}
+                <h2 className={`text-2xl md:text-3xl font-bold mb-4 ${isDark ? 'text-gray-200' : 'text-gray-800'}`}>
+                    Page Not Found
+                </h2>
+
+                <p className={`text-lg mb-8 ${isDark ? 'text-gray-400' : 'text-gray-600'} max-w-md mx-auto`}>
+                    The page you're looking for doesn't exist or has been moved.
+                </p>
+
+                {/* Divider */}
+                <div className={`w-24 h-1 mx-auto mb-8 rounded-full ${isDark ? 'bg-blue-600' : 'bg-blue-500'}`}></div>
+
+                {/* Navigation Buttons */}
+                <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
+                    <button
+                        onClick={() => navigate('/')}
+                        className={`flex items-center justify-center gap-2 px-8 py-3 rounded-lg font-medium transition-all duration-200 w-full sm:w-auto cursor-pointer ${isDark
+                                ? 'bg-blue-600 hover:bg-blue-700 text-white'
+                                : 'bg-blue-500 hover:bg-blue-600 text-white'
+                            } shadow-lg hover:shadow-xl transform hover:-translate-y-0.5`}
+                    >
+                        <Home className="w-5 h-5" />
+                        <span>Go to Main Page</span>
+                    </button>
+
+                    <button
+                        onClick={() => navigate('/profile')}
+                        className={`flex items-center justify-center gap-2 px-8 py-3 rounded-lg font-medium transition-all duration-200 w-full sm:w-auto cursor-pointer ${isDark
+                                ? 'bg-gray-800 hover:bg-gray-700 text-gray-200 border border-gray-700'
+                                : 'bg-white hover:bg-gray-50 text-gray-700 border border-gray-300'
+                            } shadow-lg hover:shadow-xl transform hover:-translate-y-0.5`}
+                    >
+                        <User className="w-5 h-5" />
+                        <span>View Profile</span>
+                    </button>
+                </div>
+
+                {/* Additional Help */}
+                <p className={`mt-12 text-sm ${isDark ? 'text-gray-500' : 'text-gray-500'}`}>
+                    Need help? Contact our support team
+                </p>
+            </div>
+        </div>
+    );
+};
+
+export default NotFound;

package/template/Frontend/src/pages/Settings.jsx

@@ -0,0 +1,69 @@
+import { useState, useEffect } from 'react';
+import { useTheme } from '../contexts/ThemeContext';
+import { axiosSettingsClient } from '../config/axiosClient';
+import SpinningLoader from '../components/Loader';
+
+const Settings = () => {
+  const { isDark } = useTheme();
+  const [sections, setSections] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+
+  const fetchSettingsInfo = async () => {
+    setLoading(true);
+    setError(null);
+
+    try {
+      const response = await axiosSettingsClient.get('getSettingsHealth');
+      setSections(response.data);
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchSettingsInfo();
+  }, []);
+
+  return (
+    <div className={`min-h-screen py-14 px-8 transition-colors duration-300
+      ${isDark ? "bg-[#0d0d0d] text-gray-200" : "bg-gray-100 text-gray-800"}`}>
+
+      <h1 className="text-4xl font-extrabold text-center mb-10 tracking-wide">
+        ⚙️ Settings Overview
+      </h1>
+
+      {loading && <div className="flex justify-center"><SpinningLoader size={50} /></div>}
+      {error && <p className="text-center text-red-500">{error}</p>}
+
+      <div className="grid gap-6 max-w-5xl mx-auto">
+        {sections.map((section, index) => (
+          <div key={index}
+            className={`p-6 rounded-2xl shadow-xl border transition-all duration-300
+            ${isDark
+                ? "bg-[#111] border-gray-800 hover:border-gray-600"
+                : "bg-white border-gray-200 hover:border-gray-300"}`}>
+
+            <h2 className="text-2xl font-semibold flex items-center gap-2 mb-4">
+              <span className="text-3xl">{section.icon}</span> {section.title}
+            </h2>
+
+            <ul className="space-y-2">
+              {section.items.map((item, i) => (
+                <li key={i} className="flex items-start gap-3">
+                  <span className="text-blue-500 mt-1">•</span>
+                  <span className="opacity-90">{item}</span>
+                </li>
+              ))}
+            </ul>
+
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default Settings;

package/template/Frontend/tailwind.config.js

@@ -0,0 +1,90 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      animation: {
+        'fade-in': 'fadeIn 0.5s ease-in-out',
+        'slide-in': 'slideIn 0.3s ease-out',
+        'bounce-subtle': 'bounceSubtle 0.6s ease-in-out',
+      },
+      keyframes: {
+        fadeIn: {
+          '0%': { opacity: '0' },
+          '100%': { opacity: '1' },
+        },
+        slideIn: {
+          '0%': { transform: 'translateX(-100%)' },
+          '100%': { transform: 'translateX(0)' },
+        },
+        bounceSubtle: {
+          '0%, 100%': { transform: 'translateY(0)' },
+          '50%': { transform: 'translateY(-5px)' },
+        }
+      }
+    },
+  },
+  plugins: [
+    require('daisyui'),
+  ],
+  daisyui: {
+    themes: [
+      {
+        light: {
+          "primary": "#3b82f6",
+          "primary-content": "#ffffff",
+          "secondary": "#6366f1",
+          "secondary-content": "#ffffff",
+          "accent": "#06b6d4",
+          "accent-content": "#ffffff",
+          "neutral": "#374151",
+          "neutral-content": "#ffffff",
+          "base-100": "#ffffff",
+          "base-200": "#f8fafc",
+          "base-300": "#e2e8f0",
+          "base-content": "#1f2937",
+          "info": "#0ea5e9",
+          "info-content": "#ffffff",
+          "success": "#10b981",
+          "success-content": "#ffffff",
+          "warning": "#f59e0b",
+          "warning-content": "#ffffff",
+          "error": "#ef4444",
+          "error-content": "#ffffff",
+        },
+        dark: {
+          "primary": "#3b82f6",
+          "primary-content": "#ffffff",
+          "secondary": "#6366f1",
+          "secondary-content": "#ffffff",
+          "accent": "#06b6d4",
+          "accent-content": "#ffffff",
+          "neutral": "#1f2937",
+          "neutral-content": "#ffffff",
+          "base-100": "#0f172a",
+          "base-200": "#1e293b",
+          "base-300": "#334155",
+          "base-content": "#f1f5f9",
+          "info": "#0ea5e9",
+          "info-content": "#ffffff",
+          "success": "#10b981",
+          "success-content": "#ffffff",
+          "warning": "#f59e0b",
+          "warning-content": "#ffffff",
+          "error": "#ef4444",
+          "error-content": "#ffffff",
+        }
+      }
+    ],
+    darkTheme: "dark",
+    base: true,
+    styled: true,
+    utils: true,
+    prefix: "",
+    logs: true,
+    themeRoot: ":root",
+  },
+}

package/template/Frontend/vite.config.js

@@ -0,0 +1,37 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react-swc'
+import tailwindcss from '@tailwindcss/vite'
+import path from 'path'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [tailwindcss(), react()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+  css: {
+    preprocessorOptions: {
+      scss: {
+        additionalData: `@import "@/styles/variables.scss";`
+      }
+    }
+  },
+  server: {
+    port: 5173,
+    open: false
+  },
+  build: {
+    outDir: 'dist',
+    sourcemap: true,
+    rollupOptions: {
+      output: {
+        manualChunks: {
+          vendor: ['react', 'react-dom'],
+          aws: ['aws-amplify'],
+        }
+      }
+    }
+  }
+})