Added Admin page, Login, forgot password, register and owner with profile

app/login/page.js

@@ -0,0 +1,424 @@
+'use client';
+
+import { useState } from 'react';
+import { motion } from 'framer-motion';
+import toast, { Toaster } from 'react-hot-toast';
+import Link from 'next/link';
+import Image from 'next/image';
+import { useRouter } from 'next/navigation';
+import {
+  Mail,
+  Lock,
+  Eye,
+  EyeOff,
+  ArrowLeft,
+  LogIn,
+  CheckCircle,
+  Loader2,
+  Home,
+  Shield
+} from 'lucide-react';
+
+export default function LoginPage() {
+  const router = useRouter();
+  const [showPassword, setShowPassword] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isSuccess, setIsSuccess] = useState(false);
+  const [formData, setFormData] = useState({
+    email: '',
+    password: '',
+    rememberMe: false
+  });
+  const [errors, setErrors] = useState({});
+
+  const ADMIN_EMAIL = 'admin@gmail.com';
+  const ADMIN_PASSWORD = '123';
+
+  const validateEmail = (email) => {
+    const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return re.test(email);
+  };
+
+  const validateForm = () => {
+    const newErrors = {};
+    
+    if (!formData.email) {
+      newErrors.email = 'البريد الإلكتروني مطلوب';
+    } else if (!validateEmail(formData.email)) {
+      newErrors.email = 'البريد الإلكتروني غير صالح';
+    }
+    
+    if (!formData.password) {
+      newErrors.password = 'كلمة المرور مطلوبة';
+    }
+    
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    
+    if (!validateForm()) {
+      toast.error('يرجى تصحيح الأخطاء في النموذج', {
+        style: { background: '#fee2e2', color: '#991b1b' }
+      });
+      return;
+    }
+    
+    setIsLoading(true);
+    
+    setTimeout(() => {
+      if (formData.email.toLowerCase() === ADMIN_EMAIL && formData.password === ADMIN_PASSWORD) {
+        setIsLoading(false);
+        setIsSuccess(true);
+        
+        toast.success('تم تسجيل الدخول كأدمن!', {
+          style: { background: '#dcfce7', color: '#166534' },
+          duration: 3000
+        });
+        
+        localStorage.setItem('user', JSON.stringify({
+          name: 'مدير النظام',
+          email: ADMIN_EMAIL,
+          role: 'admin',
+          avatar: 'أ'
+        }));
+        
+        setTimeout(() => {
+          router.push('/admin');
+        }, 1500);
+      } else {
+        setIsLoading(false);
+        toast.error('بيانات الدخول غير صحيحة. حاول مع admin@gmail.com / 123', {
+          style: { background: '#fee2e2', color: '#991b1b' },
+          duration: 4000
+        });
+      }
+    }, 1500);
+  };
+
+  const particles = Array.from({ length: 30 }, (_, i) => ({
+    id: i,
+    x: Math.random() * 100,
+    y: Math.random() * 100,
+    size: Math.random() * 3 + 1,
+    duration: Math.random() * 15 + 10,
+    delay: Math.random() * 5
+  }));
+
+  const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.1,
+        delayChildren: 0.2
+      }
+    }
+  };
+
+  const itemVariants = {
+    hidden: { y: 20, opacity: 0 },
+    visible: {
+      y: 0,
+      opacity: 1,
+      transition: { type: 'spring', stiffness: 100 }
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-gray-950 via-gray-900 to-gray-950 flex items-center justify-center p-4 relative overflow-hidden">
+      <Toaster position="top-center" reverseOrder={false} />
+      
+      <div className="absolute inset-0 overflow-hidden">
+        {particles.map((particle) => (
+          <motion.div
+            key={particle.id}
+            className="absolute rounded-full bg-amber-500/20"
+            style={{
+              left: `${particle.x}%`,
+              top: `${particle.y}%`,
+              width: particle.size,
+              height: particle.size,
+            }}
+            animate={{
+              y: [0, -20, 0],
+              x: [0, 10, -10, 0],
+              opacity: [0.2, 0.4, 0.2],
+            }}
+            transition={{
+              duration: particle.duration,
+              repeat: Infinity,
+              delay: particle.delay,
+              ease: "linear"
+            }}
+          />
+        ))}
+      </div>
+
+      <motion.div
+        className="absolute top-20 left-20 w-64 h-64 bg-amber-500/10 rounded-full blur-3xl"
+        animate={{
+          scale: [1, 1.2, 1],
+          x: [0, 30, 0],
+          y: [0, -20, 0],
+        }}
+        transition={{ duration: 12, repeat: Infinity }}
+      />
+      <motion.div
+        className="absolute bottom-20 right-20 w-80 h-80 bg-blue-500/10 rounded-full blur-3xl"
+        animate={{
+          scale: [1, 1.3, 1],
+          x: [0, -30, 0],
+          y: [0, 20, 0],
+        }}
+        transition={{ duration: 15, repeat: Infinity }}
+      />
+
+      <motion.div
+        variants={containerVariants}
+        initial="hidden"
+        animate="visible"
+        className="relative w-full max-w-md z-10"
+      >
+        <motion.div
+          variants={itemVariants}
+          className="absolute -top-16 left-0"
+        >
+          <Link
+            href="/"
+            className="group flex items-center gap-2 text-gray-400 hover:text-white transition-colors"
+          >
+            <motion.div
+              whileHover={{ x: -5 }}
+              transition={{ type: 'spring', stiffness: 400 }}
+            >
+              <ArrowLeft className="w-4 h-4" />
+            </motion.div>
+            <span>العودة للرئيسية</span>
+          </Link>
+        </motion.div>
+
+        <motion.div
+          variants={itemVariants}
+          className="bg-white/10 backdrop-blur-2xl rounded-3xl shadow-2xl border border-white/10 overflow-hidden"
+        >
+          <div className="bg-gradient-to-r from-amber-500 to-amber-600 p-8 text-center relative overflow-hidden">
+            <motion.div
+              initial={{ scale: 0 }}
+              animate={{ scale: 1 }}
+              transition={{ delay: 0.2, type: "spring" }}
+              className="absolute -top-10 -right-10 w-40 h-40 bg-white/10 rounded-full"
+            />
+            <motion.div
+              initial={{ scale: 0 }}
+              animate={{ scale: 1 }}
+              transition={{ delay: 0.3, type: "spring" }}
+              className="absolute -bottom-10 -left-10 w-40 h-40 bg-white/10 rounded-full"
+            />
+            
+            <motion.div
+              initial={{ y: 20, opacity: 0 }}
+              animate={{ y: 0, opacity: 1 }}
+              transition={{ delay: 0.2 }}
+              className="relative z-10"
+            >
+              <motion.div
+                animate={{ rotate: [0, 10, -10, 0] }}
+                transition={{ duration: 2, repeat: Infinity }}
+                className="w-20 h-20 mx-auto mb-4 bg-white/20 rounded-2xl flex items-center justify-center backdrop-blur-sm"
+              >
+                <Home className="w-10 h-10 text-white" />
+              </motion.div>
+              <h1 className="text-3xl font-bold text-white mb-2">SweetHome</h1>
+              <p className="text-amber-100">مرحباً بعودتك!</p>
+            </motion.div>
+          </div>
+
+          <div className="p-8">
+            <motion.form
+              variants={itemVariants}
+              onSubmit={handleSubmit}
+              className="space-y-6"
+            >
+              <motion.div variants={itemVariants}>
+                <label className="block text-sm font-medium text-gray-300 mb-2">
+                  البريد الإلكتروني
+                </label>
+                <div className="relative group">
+                  <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
+                    <Mail className={`w-5 h-5 transition-colors ${
+                      errors.email ? 'text-red-500' : 'text-gray-400 group-focus-within:text-amber-500'
+                    }`} />
+                  </div>
+                  <input
+                    type="email"
+                    value={formData.email}
+                    onChange={(e) => {
+                      setFormData({...formData, email: e.target.value});
+                      if (errors.email) setErrors({...errors, email: null});
+                    }}
+                    className={`w-full pr-12 pl-4 py-4 bg-white/5 border rounded-xl focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent text-white placeholder-gray-500 transition-all ${
+                      errors.email ? 'border-red-500' : 'border-gray-700'
+                    }`}
+                    placeholder="أدخل بريدك الإلكتروني"
+                  />
+                  {formData.email && validateEmail(formData.email) && (
+                    <motion.div
+                      initial={{ scale: 0 }}
+                      animate={{ scale: 1 }}
+                      className="absolute inset-y-0 left-0 pl-3 flex items-center"
+                    >
+                      <CheckCircle className="w-5 h-5 text-green-500" />
+                    </motion.div>
+                  )}
+                </div>
+                {errors.email && (
+                  <motion.p
+                    initial={{ opacity: 0, y: -10 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    className="text-red-500 text-sm mt-1"
+                  >
+                    {errors.email}
+                  </motion.p>
+                )}
+              </motion.div>
+
+              <motion.div variants={itemVariants}>
+                <label className="block text-sm font-medium text-gray-300 mb-2">
+                  كلمة المرور
+                </label>
+                <div className="relative group">
+                  <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
+                    <Lock className={`w-5 h-5 transition-colors ${
+                      errors.password ? 'text-red-500' : 'text-gray-400 group-focus-within:text-amber-500'
+                    }`} />
+                  </div>
+                  <input
+                    type={showPassword ? "text" : "password"}
+                    value={formData.password}
+                    onChange={(e) => {
+                      setFormData({...formData, password: e.target.value});
+                      if (errors.password) setErrors({...errors, password: null});
+                    }}
+                    className={`w-full pr-12 pl-12 py-4 bg-white/5 border rounded-xl focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent text-white placeholder-gray-500 transition-all ${
+                      errors.password ? 'border-red-500' : 'border-gray-700'
+                    }`}
+                    placeholder="أدخل كلمة المرور"
+                  />
+                  <button
+                    type="button"
+                    onClick={() => setShowPassword(!showPassword)}
+                    className="absolute inset-y-0 left-0 pl-3 flex items-center"
+                  >
+                    {showPassword ? (
+                      <EyeOff className="w-5 h-5 text-gray-400 hover:text-gray-300 transition-colors" />
+                    ) : (
+                      <Eye className="w-5 h-5 text-gray-400 hover:text-gray-300 transition-colors" />
+                    )}
+                  </button>
+                </div>
+                {errors.password && (
+                  <motion.p
+                    initial={{ opacity: 0, y: -10 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    className="text-red-500 text-sm mt-1"
+                  >
+                    {errors.password}
+                  </motion.p>
+                )}
+              </motion.div>
+
+        
+
+              <motion.div
+                variants={itemVariants}
+                className="flex items-center justify-between"
+              >
+                <label className="flex items-center gap-2 cursor-pointer group">
+                  <input
+                    type="checkbox"
+                    checked={formData.rememberMe}
+                    onChange={(e) => setFormData({...formData, rememberMe: e.target.checked})}
+                    className="w-4 h-4 rounded border-gray-600 bg-white/5 text-amber-500 focus:ring-amber-500 focus:ring-offset-0"
+                  />
+                  <span className="text-sm text-gray-400 group-hover:text-white transition-colors">
+                    تذكرني
+                  </span>
+                </label>
+                <Link
+                  href="/forgot-password"
+                  className="text-sm text-amber-400 hover:text-amber-300 transition-colors"
+                >
+                  نسيت كلمة المرور؟
+                </Link>
+              </motion.div>
+
+              <motion.button
+                variants={itemVariants}
+                type="submit"
+                disabled={isLoading || isSuccess}
+                className="relative w-full bg-gradient-to-r from-amber-500 to-amber-600 text-white py-4 rounded-xl font-bold text-lg overflow-hidden group disabled:opacity-50 disabled:cursor-not-allowed"
+                whileHover={{ scale: 1.02 }}
+                whileTap={{ scale: 0.98 }}
+              >
+                <motion.div
+                  className="absolute inset-0 bg-gradient-to-r from-amber-600 to-amber-700"
+                  initial={{ x: '100%' }}
+                  whileHover={{ x: 0 }}
+                  transition={{ duration: 0.3 }}
+                />
+                <span className="relative z-10 flex items-center justify-center gap-2">
+                  {isLoading ? (
+                    <>
+                      <Loader2 className="w-5 h-5 animate-spin" />
+                      جاري تسجيل الدخول...
+                    </>
+                  ) : isSuccess ? (
+                    <>
+                      <CheckCircle className="w-5 h-5" />
+                      تم بنجاح!
+                    </>
+                  ) : (
+                    <>
+                      <LogIn className="w-5 h-5" />
+                      تسجيل الدخول
+                    </>
+                  )}
+                </span>
+              </motion.button>
+            </motion.form>
+
+            <motion.p
+              variants={itemVariants}
+              className="text-center text-gray-400 mt-6"
+            >
+              ليس لديك حساب؟{' '}
+              <Link
+                href="/auth/choose-role"
+                className="text-amber-400 hover:text-amber-300 font-medium transition-colors"
+              >
+                إنشاء حساب جديد
+              </Link>
+            </motion.p>
+          </div>
+        </motion.div>
+
+        <motion.p
+          variants={itemVariants}
+          className="text-center text-gray-500 text-xs mt-4"
+        >
+          بتسجيل الدخول، أنت توافق على{' '}
+          <Link href="/terms" className="text-amber-400 hover:text-amber-300 transition-colors">
+            شروط الاستخدام
+          </Link>
+          {' '}و{' '}
+          <Link href="/privacy" className="text-amber-400 hover:text-amber-300 transition-colors">
+            سياسة الخصوصية
+          </Link>
+        </motion.p>
+      </motion.div>
+    </div>
+  );
+}