Added add admin and privacy in sidebar for admin

app/ClientLayout.js

@@ -709,9 +709,9 @@ export default function ClientLayout({ children }) {
         className={`${!isAuthPage && !isProfilePage ? "pt-20" : ""} min-h-screen bg-gradient-to-b from-gray-50 to-white ${currentLanguage === "ar" ? "text-right" : "text-left"}`}
       >
         <FavoritesProvider>
-        {children}
+          {children}
-        {!isAdmin && <FloatingSidebar isRTL={currentLanguage === 'ar'} />}
+          <FloatingSidebar isRTL={currentLanguage === 'ar'} isAdmin={isAdmin} />
-</FavoritesProvider>
+        </FavoritesProvider>
       </main>
 
       {!isAuthPage && !isProfilePage && (

app/admin/add-admin/page.js

@@ -0,0 +1,123 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import AuthService from '@/app/services/AuthService';
+import Link from 'next/link';
+
+export default function AddAdminPage() {
+  const [isAdmin, setIsAdmin] = useState(false);
+  const [checked, setChecked] = useState(false);
+  const [formState, setFormState] = useState({ fullName: '', email: '', password: '' });
+  const [saved, setSaved] = useState(false);
+
+  useEffect(() => {
+    setIsAdmin(AuthService.isAuthenticated() && AuthService.isAdmin());
+    setChecked(true);
+  }, []);
+
+  const handleChange = (field) => (event) => {
+    setFormState((prev) => ({ ...prev, [field]: event.target.value }));
+  };
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    setSaved(true);
+    console.log('Add admin payload', formState);
+  };
+
+  if (!checked) {
+    return (
+      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
+        <div className="w-14 h-14 border-4 border-amber-500 border-t-transparent rounded-full animate-spin" />
+      </div>
+    );
+  }
+
+  if (!isAdmin) {
+    return (
+      <div className="min-h-screen bg-gray-50 flex items-center justify-center p-4">
+        <div className="max-w-md text-center bg-white rounded-3xl shadow-lg border border-gray-200 p-8">
+          <Link href="/" className="inline-flex items-center justify-center px-6 py-3 rounded-full bg-amber-500 text-white hover:bg-amber-600 transition-colors">
+            العودة للرئيسية
+          </Link>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <main className="min-h-screen bg-slate-50 p-6 md:p-10">
+      <div className="max-w-4xl mx-auto">
+        <div className="flex items-center justify-between mb-8">
+          <div>
+            <p className="text-sm text-amber-600 uppercase tracking-[0.2em]">لوحة المدير</p>
+            <h1 className="text-3xl font-bold text-slate-900 mt-3">إضافة مدير جديد</h1>
+            <p className="text-slate-500 mt-2">انشئ حساب مسؤول جديد مع صلاحيات الإدارة.</p>
+          </div>
+          <div className="rounded-2xl bg-white border border-slate-200 px-5 py-3 shadow-sm">
+            <p className="text-sm text-slate-500">رابط سريع</p>
+            <Link href="/admin/privacy" className="mt-2 block text-amber-600 hover:underline">تعديل سياسة الخصوصية</Link>
+          </div>
+        </div>
+
+        <div className="grid gap-6 md:grid-cols-[1.5fr_0.8fr]">
+          <section className="rounded-[28px] bg-white p-8 shadow-sm border border-slate-200">
+            <h2 className="text-xl font-semibold mb-6">بيانات المدير</h2>
+            <form onSubmit={handleSubmit} className="space-y-5">
+              <label className="block">
+                <span className="text-sm font-medium text-slate-700">الاسم الكامل</span>
+                <input
+                  type="text"
+                  value={formState.fullName}
+                  onChange={handleChange('fullName')}
+                  className="mt-2 w-full rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 outline-none focus:border-amber-500 focus:ring-2 focus:ring-amber-100"
+                  placeholder="مثال: محمد الأحمد"
+                  required
+                />
+              </label>
+
+              <label className="block">
+                <span className="text-sm font-medium text-slate-700">البريد الإلكتروني</span>
+                <input
+                  type="email"
+                  value={formState.email}
+                  onChange={handleChange('email')}
+                  className="mt-2 w-full rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 outline-none focus:border-amber-500 focus:ring-2 focus:ring-amber-100"
+                  placeholder="admin@example.com"
+                  required
+                />
+              </label>
+
+              <label className="block">
+                <span className="text-sm font-medium text-slate-700">كلمة المرور</span>
+                <input
+                  type="password"
+                  value={formState.password}
+                  onChange={handleChange('password')}
+                  className="mt-2 w-full rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 outline-none focus:border-amber-500 focus:ring-2 focus:ring-amber-100"
+                  placeholder="••••••••"
+                  required
+                />
+              </label>
+
+              <button type="submit" className="inline-flex items-center justify-center rounded-2xl bg-amber-600 px-6 py-3 text-white font-semibold shadow-lg shadow-amber-100 transition hover:bg-amber-700">
+                حفظ المدير الجديد
+              </button>
+            </form>
+            {saved && (
+              <div className="mt-6 rounded-3xl bg-emerald-50 border border-emerald-200 p-4 text-emerald-700">
+                تم حفظ بيانات المدير بنجاح
+              </div>
+            )}
+          </section>
+
+          <aside className="rounded-[28px] bg-white p-6 shadow-sm border border-slate-200">
+            <ul className="space-y-3 text-slate-600">
+              <li>احرص على استخدام بريد إلكتروني صالح وكلمة مرور قوية.</li>
+            </ul>
+          </aside>
+        </div>
+      </div>
+    </main>
+  );
+}

app/admin/privacy/page.js

@@ -0,0 +1,88 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import AuthService from '@/app/services/AuthService';
+import Link from 'next/link';
+
+const initialPolicy = `1. نحترم خصوصيتك ونلتزم بحماية بياناتك الشخصية.
+2. يتم استخدام المعلومات لتحسين تجربة المستخدم وتأمين الخدمة.
+3. لا نشارك البيانات مع أطراف خارجية بدون موافقتك.
+4. يمكنك طلب حذف بياناتك من النظام في أي وقت.`;
+
+export default function PrivacyPolicyAdminPage() {
+  const [isAdmin, setIsAdmin] = useState(false);
+  const [checked, setChecked] = useState(false);
+  const [policyText, setPolicyText] = useState(initialPolicy);
+  const [saved, setSaved] = useState(false);
+
+  useEffect(() => {
+    setIsAdmin(AuthService.isAuthenticated() && AuthService.isAdmin());
+    setChecked(true);
+  }, []);
+
+  const handleSave = (event) => {
+    event.preventDefault();
+    setSaved(true);
+    console.log('Privacy policy updated:', policyText);
+  };
+
+  if (!checked) {
+    return (
+      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
+        <div className="w-14 h-14 border-4 border-amber-500 border-t-transparent rounded-full animate-spin" />
+      </div>
+    );
+  }
+
+  if (!isAdmin) {
+    return (
+      <div className="min-h-screen bg-gray-50 flex items-center justify-center p-4">
+        <div className="max-w-md text-center bg-white rounded-3xl shadow-lg border border-gray-200 p-8">
+          <p className="text-gray-600 mb-6">هذه الصفحة لتحرير سياسة الخصوصية ولا يمكن الوصول إليها إلا للمدير.</p>
+          <Link href="/" className="inline-flex items-center justify-center px-6 py-3 rounded-full bg-amber-500 text-white hover:bg-amber-600 transition-colors">
+            العودة للرئيسية
+          </Link>
+        </div>
+      </div>
+    );
+  }
+  return (
+    <main className="min-h-screen bg-slate-50 p-6 md:p-10">
+      <div className="max-w-4xl mx-auto">
+        <div className="mb-8 rounded-[28px] bg-white p-8 shadow-sm border border-slate-200">
+          <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+            <div>
+              <p className="text-sm text-amber-600 uppercase tracking-[0.2em]">لوحة المدير</p>
+              <p className="text-slate-500 mt-2">قم بتحديث نص سياسة الخصوصية</p>
+            </div>
+            <Link href="/admin/add-admin" className="inline-flex items-center justify-center rounded-2xl bg-slate-800 px-5 py-3 text-sm font-semibold text-white hover:bg-slate-900 transition-colors">
+              إضافة أدمن جديد
+            </Link>
+          </div>
+        </div>
+
+        <form onSubmit={handleSave} className="space-y-6 rounded-[28px] bg-white p-8 shadow-sm border border-slate-200">
+          <div>
+            <label className="block text-sm font-medium text-slate-700 mb-3">نص سياسة الخصوصية</label>
+            <textarea
+              value={policyText}
+              onChange={(e) => setPolicyText(e.target.value)}
+              rows={12}
+              className="w-full rounded-3xl border border-slate-200 bg-slate-50 px-5 py-4 text-slate-700 outline-none focus:border-amber-500 focus:ring-2 focus:ring-amber-100"
+            />
+          </div>
+          <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+            <button type="submit" className="rounded-2xl bg-amber-600 px-6 py-3 text-white font-semibold shadow-lg shadow-amber-100 transition hover:bg-amber-700">
+              حفظ السياسة
+            </button>
+          </div>
+          {saved && (
+            <div className="rounded-3xl bg-emerald-50 border border-emerald-200 p-4 text-emerald-700">
+              تمت حفظ سياسة الخصوصية بنجاح
+            </div>
+          )}
+        </form>
+      </div>
+    </main>
+  );
+}

app/components/FloatingSidebar.js

@@ -3,10 +3,10 @@
 import { useState } from 'react';
 import { motion } from 'framer-motion';
 import Link from 'next/link';
-import { Heart, Bell, CreditCard } from 'lucide-react';
+import { Heart, Bell, CreditCard, Shield, UserPlus } from 'lucide-react';
 import { useFavorites } from '@/app/contexts/FavoritesContext';
 
-export default function FloatingSidebar({ isRTL }) {
+export default function FloatingSidebar({ isRTL, isAdmin }) {
   const { favorites } = useFavorites();
   const [tooltip, setTooltip] = useState(null);
   let timeoutId = null;
@@ -40,6 +40,24 @@ export default function FloatingSidebar({ isRTL }) {
     tap: { scale: 0.95 },
   };
 
+  const renderTooltip = (id, label) => {
+    if (tooltip !== id) return null;
+    return (
+      <div
+        className={`absolute ${isRTL ? 'right-full mr-2' : 'left-full ml-2'} top-1/2 -translate-y-1/2 px-2 py-1 bg-gray-800 text-white text-xs rounded-lg whitespace-nowrap z-20 shadow-lg flex items-center`}
+      >
+        <span className="relative">
+          {label}
+          <span
+            className={`absolute ${isRTL ? 'right-full -mr-1' : 'left-full -ml-1'} top-1/2 -translate-y-1/2 w-0 h-0 border-t-4 border-b-4 border-transparent ${
+              isRTL ? 'border-r-4 border-r-gray-800' : 'border-l-4 border-l-gray-800'
+            }`}
+          ></span>
+        </span>
+      </div>
+    );
+  };
+
   return (
     <motion.div
       className="fixed z-50"
@@ -48,117 +66,120 @@ export default function FloatingSidebar({ isRTL }) {
       initial="initial"
       animate="animate"
     >
-      <div className="bg-white/80 backdrop-blur-md rounded-2xl shadow-lg border border-gray-200/50 py-3 px-2 flex flex-col gap-3 transition-all duration-300 hover:shadow-xl hover:bg-white/90">
+      <div className="bg-white/90 backdrop-blur-md rounded-2xl shadow-lg border border-gray-200/60 py-3 px-2 flex flex-col gap-3 transition-all duration-300 hover:shadow-xl hover:bg-white/95">
-        <motion.div
+        {isAdmin ? (
-          className="relative group"
+          <>
-          variants={buttonVariants}
+            <motion.div
-          initial="rest"
+              className="relative group"
-          whileHover="hover"
+              variants={buttonVariants}
-          whileTap="tap"
+              initial="rest"
-          onMouseEnter={() => showTooltip('favorites')}
+              whileHover="hover"
-          onMouseLeave={hideTooltip}
+              whileTap="tap"
-        >
+              onMouseEnter={() => showTooltip('addAdmin')}
-          <Link
+              onMouseLeave={hideTooltip}
-            href="/favorites"
-            className="flex items-center justify-center w-12 h-12 rounded-xl transition-colors"
-          >
-            <div className="relative">
-              <Heart className="w-6 h-6 text-gray-600 transition-colors group-hover:text-amber-600" />
-              {favorites.length > 0 && (
-                <motion.span
-                  initial={{ scale: 0 }}
-                  animate={{ scale: 1 }}
-                  className="absolute -right-1 -top-1 w-5 h-5 bg-gradient-to-r from-amber-500 to-amber-600 text-white text-xs rounded-full flex items-center justify-center shadow-md"
-                >
-                  {favorites.length}
-                </motion.span>
-              )}
-            </div>
-          </Link>
-          {tooltip === 'favorites' && (
-            <div
-              className={`absolute ${isRTL ? 'right-full mr-2' : 'left-full ml-2'} top-1/2 -translate-y-1/2 px-2 py-1 bg-gray-800 text-white text-xs rounded-lg whitespace-nowrap z-20 shadow-lg flex items-center`}
             >
-              <span className="relative">
+              <Link
-                المفضلة
+                href="/admin/add-admin"
-                <span
+                className="flex items-center justify-center w-12 h-12 rounded-xl bg-amber-50 border border-amber-200 text-amber-600 hover:bg-amber-100 transition-colors"
-                  className={`absolute ${isRTL ? 'right-full -mr-1' : 'left-full -ml-1'} top-1/2 -translate-y-1/2 w-0 h-0 border-t-4 border-b-4 border-transparent ${
-                    isRTL ? 'border-r-4 border-r-gray-800' : 'border-l-4 border-l-gray-800'
-                  }`}
-                ></span>
-              </span>
-            </div>
-          )}
-        </motion.div>
-        <motion.div
-          className="relative group"
-          variants={buttonVariants}
-          initial="rest"
-          whileHover="hover"
-          whileTap="tap"
-          onMouseEnter={() => showTooltip('notifications')}
-          onMouseLeave={hideTooltip}
-        >
-          <Link
-            href="/notifications"
-            className="flex items-center justify-center w-12 h-12 rounded-xl transition-colors"
-          >
-            <div className="relative">
-              <Bell className="w-6 h-6 text-gray-600 transition-colors group-hover:text-amber-600" />
-              <motion.span
-                initial={{ scale: 0 }}
-                animate={{ scale: 1 }}
-                className="absolute -right-1 -top-1 w-5 h-5 bg-gradient-to-r from-red-500 to-red-600 text-white text-xs rounded-full flex items-center justify-center shadow-md"
               >
-                3
+                <UserPlus className="w-6 h-6" />
-              </motion.span>
+              </Link>
-            </div>
+              {renderTooltip('addAdmin', 'إضافة أدمن')}
-          </Link>
+            </motion.div>
-          {tooltip === 'notifications' && (
+
-            <div
+            <motion.div
-              className={`absolute ${isRTL ? 'right-full mr-2' : 'left-full ml-2'} top-1/2 -translate-y-1/2 px-2 py-1 bg-gray-800 text-white text-xs rounded-lg whitespace-nowrap z-20 shadow-lg flex items-center`}
+              className="relative group"
+              variants={buttonVariants}
+              initial="rest"
+              whileHover="hover"
+              whileTap="tap"
+              onMouseEnter={() => showTooltip('editPrivacy')}
+              onMouseLeave={hideTooltip}
             >
-              <span className="relative">
+              <Link
-                الإشعارات
+                href="/admin/privacy"
-                <span
+                className="flex items-center justify-center w-12 h-12 rounded-xl bg-slate-50 border border-slate-200 text-slate-700 hover:bg-slate-100 transition-colors"
-                  className={`absolute ${isRTL ? 'right-full -mr-1' : 'left-full -ml-1'} top-1/2 -translate-y-1/2 w-0 h-0 border-t-4 border-b-4 border-transparent ${
+              >
-                    isRTL ? 'border-r-4 border-r-gray-800' : 'border-l-4 border-l-gray-800'
+                <Shield className="w-6 h-6" />
-                  }`}
+              </Link>
-                ></span>
+              {renderTooltip('editPrivacy', 'تعديل سياسة الخصوصية')}
-              </span>
+            </motion.div>
-            </div>
+          </>
-          )}
+        ) : (
-        </motion.div>
+          <>
-        <motion.div
+            <motion.div
-          className="relative group"
+              className="relative group"
-          variants={buttonVariants}
+              variants={buttonVariants}
-          initial="rest"
+              initial="rest"
-          whileHover="hover"
+              whileHover="hover"
-          whileTap="tap"
+              whileTap="tap"
-          onMouseEnter={() => showTooltip('payments')}
+              onMouseEnter={() => showTooltip('favorites')}
-          onMouseLeave={hideTooltip}
+              onMouseLeave={hideTooltip}
-        >
-          <Link
-            href="/payments"
-            className="flex items-center justify-center w-12 h-12 rounded-xl transition-colors"
-          >
-            <CreditCard className="w-6 h-6 text-gray-600 transition-colors group-hover:text-amber-600" />
-          </Link>
-          {tooltip === 'payments' && (
-            <div
-              className={`absolute ${isRTL ? 'right-full mr-2' : 'left-full ml-2'} top-1/2 -translate-y-1/2 px-2 py-1 bg-gray-800 text-white text-xs rounded-lg whitespace-nowrap z-20 shadow-lg flex items-center`}
             >
-              <span className="relative">
+              <Link
-                المدفوعات
+                href="/favorites"
-                <span
+                className="flex items-center justify-center w-12 h-12 rounded-xl transition-colors"
-                  className={`absolute ${isRTL ? 'right-full -mr-1' : 'left-full -ml-1'} top-1/2 -translate-y-1/2 w-0 h-0 border-t-4 border-b-4 border-transparent ${
+              >
-                    isRTL ? 'border-r-4 border-r-gray-800' : 'border-l-4 border-l-gray-800'
+                <div className="relative">
-                  }`}
+                  <Heart className="w-6 h-6 text-gray-600 transition-colors group-hover:text-amber-600" />
-                ></span>
+                  {favorites.length > 0 && (
-              </span>
+                    <motion.span
-            </div>
+                      initial={{ scale: 0 }}
-          )}
+                      animate={{ scale: 1 }}
-        </motion.div>
+                      className="absolute -right-1 -top-1 w-5 h-5 bg-linear-to-r from-amber-500 to-amber-600 text-white text-xs rounded-full flex items-center justify-center shadow-md"
+                    >
+                      {favorites.length}
+                    </motion.span>
+                  )}
+                </div>
+              </Link>
+              {renderTooltip('favorites', 'المفضلة')}
+            </motion.div>
+            <motion.div
+              className="relative group"
+              variants={buttonVariants}
+              initial="rest"
+              whileHover="hover"
+              whileTap="tap"
+              onMouseEnter={() => showTooltip('notifications')}
+              onMouseLeave={hideTooltip}
+            >
+              <Link
+                href="/notifications"
+                className="flex items-center justify-center w-12 h-12 rounded-xl transition-colors"
+              >
+                <div className="relative">
+                  <Bell className="w-6 h-6 text-gray-600 transition-colors group-hover:text-amber-600" />
+                  <motion.span
+                    initial={{ scale: 0 }}
+                    animate={{ scale: 1 }}
+                    className="absolute -right-1 -top-1 w-5 h-5 bg-linear-to-r from-red-500 to-red-600 text-white text-xs rounded-full flex items-center justify-center shadow-md"
+                  >
+                    3
+                  </motion.span>
+                </div>
+              </Link>
+              {renderTooltip('notifications', 'الإشعارات')}
+            </motion.div>
+            <motion.div
+              className="relative group"
+              variants={buttonVariants}
+              initial="rest"
+              whileHover="hover"
+              whileTap="tap"
+              onMouseEnter={() => showTooltip('payments')}
+              onMouseLeave={hideTooltip}
+            >
+              <Link
+                href="/payments"
+                className="flex items-center justify-center w-12 h-12 rounded-xl transition-colors"
+              >
+                <CreditCard className="w-6 h-6 text-gray-600 transition-colors group-hover:text-amber-600" />
+              </Link>
+              {renderTooltip('payments', 'المدفوعات')}
+            </motion.div>
+          </>
+        )}
       </div>
     </motion.div>
   );