Update artifacts/fb-publisher/src/pages/Admin.tsx

artifacts/fb-publisher/src/pages/Admin.tsx

@@ -6,7 +6,6 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { useToast } from "@/hooks/use-toast";
 
-// ========== Supabase Client ==========
 const supabase = createClient(
   "https://eijwjjbkluurxjiiuhay.supabase.co",
   "sb_publishable_VZEm1rag3JF-39xXx2F5og_1oNkjR5h"
@@ -18,6 +17,13 @@ interface UpdateStatus {
   message: string | null;
 }
 
+// ========== دالة مساعدة لجلب الـ token ==========
+async function getAuthHeaders(): Promise<Record<string, string>> {
+  const { data: { session } } = await supabase.auth.getSession();
+  const token = session?.access_token;
+  return token ? { Authorization: `Bearer ${token}`, "Content-Type": "application/json" } : { "Content-Type": "application/json" };
+}
+
 async function fetchUpdateStatus(): Promise<UpdateStatus> {
   const res = await fetch(apiUrl("extension-update"));
   if (!res.ok) return { updateAvailable: false, version: null, message: null };
@@ -25,10 +31,10 @@ async function fetchUpdateStatus(): Promise<UpdateStatus> {
 }
 
 async function setExtensionUpdate(body: { enabled: boolean; version?: string; message?: string }): Promise<void> {
+  const headers = await getAuthHeaders();
   const res = await fetch(apiUrl("admin/extension-update"), {
     method: "PATCH",
-    credentials: "include",
-    headers: { "Content-Type": "application/json" },
+    headers,
     body: JSON.stringify(body),
   });
   if (!res.ok) throw new Error((await res.json()).error ?? "خطأ في التحديث");
@@ -81,82 +87,75 @@ interface BlockedEmail {
 }
 
 async function fetchUsers(): Promise<{ users: UserRow[] }> {
-  const res = await fetch(apiUrl("admin/users"), { credentials: "include" });
+  const headers = await getAuthHeaders();
+  const res = await fetch(apiUrl("admin/users"), { headers });
   if (!res.ok) throw new Error((await res.json()).error ?? "خطأ في الجلب");
   return res.json();
 }
 
 async function fetchBlockedEmails(): Promise<{ blockedEmails: BlockedEmail[] }> {
-  const res = await fetch(apiUrl("admin/blocked-emails"), { credentials: "include" });
+  const headers = await getAuthHeaders();
+  const res = await fetch(apiUrl("admin/blocked-emails"), { headers });
   if (!res.ok) throw new Error((await res.json()).error ?? "خطأ في الجلب");
   return res.json();
 }
 
 async function blockEmail(email: string, reason: string): Promise<void> {
+  const headers = await getAuthHeaders();
   const res = await fetch(apiUrl("admin/blocked-emails"), {
     method: "POST",
-    credentials: "include",
-    headers: { "Content-Type": "application/json" },
+    headers,
     body: JSON.stringify({ email, reason }),
   });
   if (!res.ok) throw new Error((await res.json()).error ?? "خطأ في الحظر");
 }
 
 async function cleanupOrphans(): Promise<{ removed: string[]; count: number }> {
-  const res = await fetch(apiUrl("admin/cleanup-orphans"), {
-    method: "POST",
-    credentials: "include",
-  });
+  const headers = await getAuthHeaders();
+  const res = await fetch(apiUrl("admin/cleanup-orphans"), { method: "POST", headers });
   if (!res.ok) throw new Error((await res.json()).error ?? "خطأ في التنظيف");
   return res.json();
 }
 
 async function forceSignOutBanned(): Promise<{ usersNotified: number; connectionsSent: number }> {
-  const res = await fetch(apiUrl("admin/force-signout-banned"), {
-    method: "POST",
-    credentials: "include",
-  });
+  const headers = await getAuthHeaders();
+  const res = await fetch(apiUrl("admin/force-signout-banned"), { method: "POST", headers });
   if (!res.ok) throw new Error((await res.json()).error ?? "خطأ في الطرد");
   return res.json();
 }
 
 async function unblockEmail(email: string): Promise<void> {
+  const headers = await getAuthHeaders();
   const res = await fetch(apiUrl(`admin/blocked-emails/${encodeURIComponent(email)}`), {
     method: "DELETE",
-    credentials: "include",
+    headers,
   });
   if (!res.ok) throw new Error((await res.json()).error ?? "خطأ في إلغاء الحظر");
 }
 
 async function banUser(id: string): Promise<void> {
-  const res = await fetch(apiUrl(`admin/ban/${id}`), {
-    method: "POST",
-    credentials: "include",
-  });
+  const headers = await getAuthHeaders();
+  const res = await fetch(apiUrl(`admin/ban/${id}`), { method: "POST", headers });
   if (!res.ok) throw new Error((await res.json()).error ?? "خطأ في الحظر");
 }
 
 async function unbanUser(id: string): Promise<void> {
-  const res = await fetch(apiUrl(`admin/unban/${id}`), {
-    method: "POST",
-    credentials: "include",
-  });
+  const headers = await getAuthHeaders();
+  const res = await fetch(apiUrl(`admin/unban/${id}`), { method: "POST", headers });
   if (!res.ok) throw new Error((await res.json()).error ?? "خطأ في رفع الحظر");
 }
 
 async function deleteUser(id: string): Promise<void> {
-  const res = await fetch(apiUrl(`admin/users/${id}`), {
-    method: "DELETE",
-    credentials: "include",
-  });
+  const headers = await getAuthHeaders();
+  const res = await fetch(apiUrl(`admin/users/${id}`), { method: "DELETE", headers });
   if (!res.ok) throw new Error((await res.json()).error ?? "خطأ في الحذف");
 }
 
 async function updateSubscription(userId: string, body: { status?: string; trialEnd?: string | null }): Promise<void> {
+  const headers = await getAuthHeaders();
   const res = await fetch(apiUrl(`admin/subscription/${userId}`), {
     method: "PATCH",
-    credentials: "include",
-    headers: { "Content-Type": "application/json" },
+    headers,
     body: JSON.stringify(body),
   });
   if (!res.ok) throw new Error((await res.json()).error ?? "خطأ في التحديث");
@@ -173,7 +172,6 @@ export default function Admin() {
   const [blockEmailInput, setBlockEmailInput] = useState("");
   const [blockReasonInput, setBlockReasonInput] = useState("");
 
-  // ========== Supabase Auth State ==========
   const [session, setSession] = useState<any>(null);
   const [authLoading, setAuthLoading] = useState(true);
 
@@ -182,11 +180,9 @@ export default function Admin() {
       setSession(session);
       setAuthLoading(false);
     });
-
     const { data: { subscription } } = supabase.auth.onAuthStateChange((_event, session) => {
       setSession(session);
     });
-
     return () => subscription.unsubscribe();
   }, []);
 
@@ -337,9 +333,7 @@ export default function Admin() {
       <div className="flex min-h-screen items-center justify-center bg-[#0f0f1e]">
         <div className="text-center space-y-3">
           <div className="text-red-400 text-2xl">⛔ غير مصرح بالدخول</div>
-          <div className="text-gray-500 text-sm">
-            البريد المسجل: {userEmail}
-          </div>
+          <div className="text-gray-500 text-sm">البريد المسجل: {userEmail}</div>
         </div>
       </div>
     );
@@ -364,7 +358,8 @@ export default function Admin() {
               size="sm"
               onClick={async () => {
                 if (!confirm("مسح إعدادات PayPal المخزّنة؟ ستُعاد إنشاؤها تلقائياً عند أول اشتراك.")) return;
-                const res = await fetch(apiUrl("admin/paypal-config"), { method: "DELETE", credentials: "include" });
+                const headers = await getAuthHeaders();
+                const res = await fetch(apiUrl("admin/paypal-config"), { method: "DELETE", headers });
                 const data = await res.json();
                 toast({ title: res.ok ? "✅ تم المسح" : "❌ خطأ", description: data.message ?? data.error });
               }}
@@ -400,31 +395,17 @@ export default function Admin() {
               variant="outline"
               size="sm"
               onClick={() => {
-                const emails = (users ?? [])
-                  .map((u) => u.email)
-                  .filter(Boolean)
-                  .join("\n");
-                if (!emails) {
-                  toast({ title: "لا توجد إيميلات", variant: "destructive" });
-                  return;
-                }
+                const emails = (users ?? []).map((u) => u.email).filter(Boolean).join("\n");
+                if (!emails) { toast({ title: "لا توجد إيميلات", variant: "destructive" }); return; }
                 navigator.clipboard.writeText(emails).then(() => {
-                  toast({
-                    title: `✅ تم النسخ`,
-                    description: `${emails.split("\n").length} إيميل في الحافظة`,
-                  });
+                  toast({ title: `✅ تم النسخ`, description: `${emails.split("\n").length} إيميل في الحافظة` });
                 });
               }}
               className="border-blue-700 text-blue-400 hover:bg-blue-900/20 text-xs"
             >
               📋 نسخ الإيميلات
             </Button>
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={() => refetch()}
-              className="border-[#3a3a55] text-gray-300 hover:text-white"
-            >
+            <Button variant="outline" size="sm" onClick={() => refetch()} className="border-[#3a3a55] text-gray-300 hover:text-white">
               تحديث
             </Button>
           </div>
@@ -441,42 +422,17 @@ export default function Admin() {
               )}
             </div>
             <div className="flex gap-2">
-              <Button
-                size="sm"
-                disabled={updateExtMutation.isPending}
-                onClick={() => updateExtMutation.mutate({
-                  enabled: true,
-                  version: newVersion.trim() || undefined,
-                  message: newMessage.trim() || undefined,
-                })}
-                className="bg-[#bb86fc] hover:bg-[#a070e0] text-black font-bold text-xs"
-              >
+              <Button size="sm" disabled={updateExtMutation.isPending} onClick={() => updateExtMutation.mutate({ enabled: true, version: newVersion.trim() || undefined, message: newMessage.trim() || undefined })} className="bg-[#bb86fc] hover:bg-[#a070e0] text-black font-bold text-xs">
                 📢 إرسال الإشعار للجميع
               </Button>
-              <Button
-                size="sm"
-                variant="outline"
-                disabled={updateExtMutation.isPending || !updateStatus?.updateAvailable}
-                onClick={() => updateExtMutation.mutate({ enabled: false })}
-                className="border-red-800 text-red-400 hover:bg-red-900/20 text-xs"
-              >
+              <Button size="sm" variant="outline" disabled={updateExtMutation.isPending || !updateStatus?.updateAvailable} onClick={() => updateExtMutation.mutate({ enabled: false })} className="border-red-800 text-red-400 hover:bg-red-900/20 text-xs">
                 ✕ إيقاف الإشعار
               </Button>
             </div>
           </div>
           <div className="flex gap-2 flex-wrap">
-            <Input
-              placeholder="رقم الإصدار — مثال: 1.3.0"
-              value={newVersion}
-              onChange={(e) => setNewVersion(e.target.value)}
-              className="bg-[#0f0f1e] border-[#3a3a55] text-white placeholder:text-gray-600 text-sm flex-1 min-w-[140px]"
-            />
-            <Input
-              placeholder="رسالة اختيارية للمستخدمين"
-              value={newMessage}
-              onChange={(e) => setNewMessage(e.target.value)}
-              className="bg-[#0f0f1e] border-[#3a3a55] text-white placeholder:text-gray-600 text-sm flex-1 min-w-[200px]"
-            />
+            <Input placeholder="رقم الإصدار — مثال: 1.3.0" value={newVersion} onChange={(e) => setNewVersion(e.target.value)} className="bg-[#0f0f1e] border-[#3a3a55] text-white placeholder:text-gray-600 text-sm flex-1 min-w-[140px]" />
+            <Input placeholder="رسالة اختيارية للمستخدمين" value={newMessage} onChange={(e) => setNewMessage(e.target.value)} className="bg-[#0f0f1e] border-[#3a3a55] text-white placeholder:text-gray-600 text-sm flex-1 min-w-[200px]" />
           </div>
           {updateStatus?.updateAvailable && (
             <div className="mt-2 text-xs text-gray-500">
@@ -489,83 +445,35 @@ export default function Admin() {
         <div className="mb-6 rounded-xl border border-[#3a3a55] bg-[#1a1a30] p-4">
           <div className="flex items-center gap-2 mb-3">
             <span className="text-base font-semibold text-red-400">🚫 البريد الإلكتروني المحظور</span>
-            <span className="rounded-full bg-red-900/30 px-2 py-0.5 text-xs text-red-400 border border-red-800">
-              {blockedData?.blockedEmails.length ?? 0}
-            </span>
+            <span className="rounded-full bg-red-900/30 px-2 py-0.5 text-xs text-red-400 border border-red-800">{blockedData?.blockedEmails.length ?? 0}</span>
           </div>
           <div className="flex gap-2 flex-wrap mb-3">
-            <Input
-              placeholder="بريد إلكتروني للحظر"
-              value={blockEmailInput}
-              onChange={(e) => setBlockEmailInput(e.target.value)}
-              onKeyDown={(e) => {
-                if (e.key === "Enter" && blockEmailInput.includes("@")) {
-                  blockMutation.mutate({ email: blockEmailInput, reason: blockReasonInput });
-                }
-              }}
-              className="bg-[#0f0f1e] border-[#3a3a55] text-white placeholder:text-gray-600 text-sm flex-1 min-w-[200px]"
-            />
-            <Input
-              placeholder="سبب الحظر (اختياري)"
-              value={blockReasonInput}
-              onChange={(e) => setBlockReasonInput(e.target.value)}
-              className="bg-[#0f0f1e] border-[#3a3a55] text-white placeholder:text-gray-600 text-sm flex-1 min-w-[150px]"
-            />
-            <Button
-              size="sm"
-              disabled={blockMutation.isPending || !blockEmailInput.includes("@")}
-              onClick={() => blockMutation.mutate({ email: blockEmailInput, reason: blockReasonInput })}
-              className="bg-red-700 hover:bg-red-800 text-white text-xs font-bold"
-            >
+            <Input placeholder="بريد إلكتروني للحظر" value={blockEmailInput} onChange={(e) => setBlockEmailInput(e.target.value)} onKeyDown={(e) => { if (e.key === "Enter" && blockEmailInput.includes("@")) blockMutation.mutate({ email: blockEmailInput, reason: blockReasonInput }); }} className="bg-[#0f0f1e] border-[#3a3a55] text-white placeholder:text-gray-600 text-sm flex-1 min-w-[200px]" />
+            <Input placeholder="سبب الحظر (اختياري)" value={blockReasonInput} onChange={(e) => setBlockReasonInput(e.target.value)} className="bg-[#0f0f1e] border-[#3a3a55] text-white placeholder:text-gray-600 text-sm flex-1 min-w-[150px]" />
+            <Button size="sm" disabled={blockMutation.isPending || !blockEmailInput.includes("@")} onClick={() => blockMutation.mutate({ email: blockEmailInput, reason: blockReasonInput })} className="bg-red-700 hover:bg-red-800 text-white text-xs font-bold">
               🚫 حظر البريد
             </Button>
           </div>
-          {blockedData?.blockedEmails.length === 0 && (
-            <div className="text-xs text-gray-600 text-center py-2">لا توجد بريد محظور</div>
-          )}
+          {blockedData?.blockedEmails.length === 0 && <div className="text-xs text-gray-600 text-center py-2">لا توجد بريد محظور</div>}
           {(blockedData?.blockedEmails.length ?? 0) > 0 && (
             <div className="space-y-1 max-h-48 overflow-y-auto">
               {blockedData!.blockedEmails.map((b) => (
                 <div key={b.email} className="flex items-center justify-between rounded-lg bg-[#0f0f1e] px-3 py-2 text-sm">
-                  <div>
-                    <span className="text-red-300 font-mono text-xs">{b.email}</span>
-                    {b.reason && <span className="text-gray-500 text-xs mr-2">— {b.reason}</span>}
-                  </div>
-                  <Button
-                    size="sm"
-                    variant="outline"
-                    disabled={unblockMutation.isPending}
-                    onClick={() => unblockMutation.mutate(b.email)}
-                    className="text-xs border-gray-700 text-gray-400 hover:text-white h-6 px-2"
-                  >
-                    رفع الحظر
-                  </Button>
+                  <div><span className="text-red-300 font-mono text-xs">{b.email}</span>{b.reason && <span className="text-gray-500 text-xs mr-2">— {b.reason}</span>}</div>
+                  <Button size="sm" variant="outline" disabled={unblockMutation.isPending} onClick={() => unblockMutation.mutate(b.email)} className="text-xs border-gray-700 text-gray-400 hover:text-white h-6 px-2">رفع الحظر</Button>
                 </div>
               ))}
             </div>
           )}
         </div>
         <div className="mb-4">
-          <Input
-            placeholder="ابحث بالبريد أو المعرّف..."
-            value={search}
-            onChange={(e) => setSearch(e.target.value)}
-            className="bg-[#1f1f3a] border-[#3a3a55] text-white placeholder:text-gray-500"
-          />
+          <Input placeholder="ابحث بالبريد أو المعرّف..." value={search} onChange={(e) => setSearch(e.target.value)} className="bg-[#1f1f3a] border-[#3a3a55] text-white placeholder:text-gray-500" />
         </div>
-        {isLoading && (
-          <div className="text-center text-gray-400 py-16">جارٍ تحميل المستخدمين...</div>
-        )}
-        {error && (
-          <div className="text-center text-red-400 py-16">
-            خطأ: {(error as any).message}
-          </div>
-        )}
+        {isLoading && <div className="text-center text-gray-400 py-16">جارٍ تحميل المستخدمين...</div>}
+        {error && <div className="text-center text-red-400 py-16">خطأ: {(error as any).message}</div>}
         {!isLoading && !error && (
           <>
-            <div className="text-sm text-gray-500 mb-3">
-              إجمالي المستخدمين: {users.length} | المعروض: {filtered.length}
-            </div>
+            <div className="text-sm text-gray-500 mb-3">إجمالي المستخدمين: {users.length} | المعروض: {filtered.length}</div>
             <div className="rounded-xl border border-[#3a3a55] overflow-hidden">
               <table className="w-full text-sm">
                 <thead className="bg-[#1f1f3a] text-gray-400">
@@ -579,140 +487,32 @@ export default function Admin() {
                   </tr>
                 </thead>
                 <tbody>
-                  {filtered.length === 0 && (
-                    <tr>
-                      <td colSpan={5} className="text-center text-gray-500 py-10">
-                        لا يوجد مستخدمون
-                      </td>
-                    </tr>
-                  )}
+                  {filtered.length === 0 && <tr><td colSpan={5} className="text-center text-gray-500 py-10">لا يوجد مستخدمون</td></tr>}
                   {filtered.map((u) => {
                     const sl = statusLabel(u.subscription);
                     const isMe = u.email?.toLowerCase() === OWNER_EMAIL.toLowerCase();
                     return (
-                      <tr
-                        key={u.id}
-                        style={u.isBanned ? { opacity: 0.7, background: "rgba(234,88,12,0.05)" } : undefined}
-                        className="border-t border-[#2a2a45] hover:bg-[#1a1a30] transition-colors"
-                      >
+                      <tr key={u.id} style={u.isBanned ? { opacity: 0.7, background: "rgba(234,88,12,0.05)" } : undefined} className="border-t border-[#2a2a45] hover:bg-[#1a1a30] transition-colors">
                         <td className="px-4 py-3">
                           <div className="font-medium flex items-center gap-2 flex-wrap">
                             {u.email ?? <span className="text-gray-500">بدون بريد</span>}
-                            {u.isBanned && (
-                              <span className="text-xs bg-orange-900/40 text-orange-400 border border-orange-700 rounded px-1.5 py-0.5">🚫 محظور</span>
-                            )}
+                            {u.isBanned && <span className="text-xs bg-orange-900/40 text-orange-400 border border-orange-700 rounded px-1.5 py-0.5">🚫 محظور</span>}
                           </div>
-                          {isMe && (
-                            <span className="text-xs text-[#bb86fc]">أنت (المالك)</span>
-                          )}
+                          {isMe && <span className="text-xs text-[#bb86fc]">أنت (المالك)</span>}
                         </td>
                         <td className="px-4 py-3">
                           <span className={sl.color}>{sl.text}</span>
-                          {u.subscription?.trialEnd && u.subscription.status === "trialing" && (
-                            <div className="text-xs text-gray-500">
-                              تنتهي: {formatDate(u.subscription.trialEnd)}
-                            </div>
-                          )}
-                        </td>
-                        <td className="px-4 py-3">
-                          {u.ipAddress ? (
-                            <div className="flex flex-col gap-1">
-                              <span className="font-mono text-xs text-gray-300 select-all">{u.ipAddress}</span>
-                              {!isMe && (
-                                <button
-                                  className="text-xs text-red-400 hover:text-red-300 underline text-right"
-                                  onClick={() => blockMutation.mutate({ email: u.ipAddress!, reason: "حظر بالـ IP" })}
-                                  disabled={blockMutation.isPending}
-                                >
-                                  🚫 حظر IP
-                                </button>
-                              )}
-                            </div>
-                          ) : (
-                            <span className="text-gray-600 text-xs">—</span>
-                          )}
-                        </td>
-                        <td className="px-4 py-3 text-gray-400">
-                          {formatDate(u.createdAt)}
-                        </td>
-                        <td className="px-4 py-3 text-gray-400">
-                          {u.lastSeenAt ? (
-                            <div>
-                              <div>{formatDate(u.lastSeenAt)}</div>
-                              <div className="text-xs text-gray-600">يُحدَّث مرة/يوم</div>
-                            </div>
-                          ) : (
-                            <span className="text-gray-600">—</span>
-                          )}
+                          {u.subscription?.trialEnd && u.subscription.status === "trialing" && <div className="text-xs text-gray-500">تنتهي: {formatDate(u.subscription.trialEnd)}</div>}
                         </td>
+                        <td className="px-4 py-3">{u.ipAddress ? <div className="flex flex-col gap-1"><span className="font-mono text-xs text-gray-300 select-all">{u.ipAddress}</span>{!isMe && <button className="text-xs text-red-400 hover:text-red-300 underline text-right" onClick={() => blockMutation.mutate({ email: u.ipAddress!, reason: "حظر بالـ IP" })} disabled={blockMutation.isPending}>🚫 حظر IP</button>}</div> : <span className="text-gray-600 text-xs">—</span>}</td>
+                        <td className="px-4 py-3 text-gray-400">{formatDate(u.createdAt)}</td>
+                        <td className="px-4 py-3 text-gray-400">{u.lastSeenAt ? <div><div>{formatDate(u.lastSeenAt)}</div><div className="text-xs text-gray-600">يُحدَّث مرة/يوم</div></div> : <span className="text-gray-600">—</span>}</td>
                         <td className="px-4 py-3">
                           <div className="flex flex-col gap-1">
-                            {(u.subscription?.status === "trialing" || isMe) && (
-                              <Button
-                                size="sm"
-                                variant="outline"
-                                disabled={updateSubMutation.isPending}
-                                onClick={() => updateSubMutation.mutate({
-                                  userId: u.id,
-                                  body: { status: "trial_expired", trialEnd: new Date(Date.now() - 60000).toISOString() }
-                                })}
-                                className="text-xs border-yellow-700 text-yellow-400 hover:bg-yellow-900/20"
-                              >
-                                ⏰ إنهاء التجربة
-                              </Button>
-                            )}
-                            {u.subscription && u.subscription.status !== "trialing" && (
-                              <Button
-                                size="sm"
-                                variant="outline"
-                                disabled={updateSubMutation.isPending}
-                                onClick={() => updateSubMutation.mutate({
-                                  userId: u.id,
-                                  body: { status: "trialing", trialEnd: new Date(Date.now() + 30 * 24 * 3600 * 1000).toISOString() }
-                                })}
-                                className="text-xs border-blue-700 text-blue-400 hover:bg-blue-900/20"
-                              >
-                                🔄 إعادة التجربة
-                              </Button>
-                            )}
-                            {!isMe && (
-                              u.isBanned ? (
-                                <Button
-                                  size="sm"
-                                  variant="outline"
-                                  disabled={unbanMutation.isPending}
-                                  onClick={() => unbanMutation.mutate(u.id)}
-                                  className="text-xs border-green-700 text-green-400 hover:bg-green-900/20"
-                                >
-                                  {unbanMutation.isPending ? "⏳" : "✅ رفع الحظر"}
-                                </Button>
-                              ) : (
-                                <Button
-                                  size="sm"
-                                  variant="outline"
-                                  disabled={banMutation.isPending}
-                                  onClick={() => {
-                                    if (!confirm(`حظر ${u.email ?? u.id}؟ يمكن فك الحظر لاحقاً.`)) return;
-                                    banMutation.mutate(u.id);
-                                  }}
-                                  className="text-xs border-orange-700 text-orange-400 hover:bg-orange-900/20"
-                                >
-                                  {banMutation.isPending ? "⏳" : "🚫 حظر الحساب"}
-                                </Button>
-                              )
-                            )}
-                            {!isMe && confirmId === u.id ? (
-                              <div className="flex gap-1">
-                                <Button size="sm" variant="destructive" onClick={() => deleteMutation.mutate(u.id)} disabled={deleteMutation.isPending} className="text-xs">
-                                  {deleteMutation.isPending ? "جارٍ..." : "تأكيد"}
-                                </Button>
-                                <Button size="sm" variant="outline" onClick={() => setConfirmId(null)} className="text-xs border-[#3a3a55] text-gray-300">إلغاء</Button>
-                              </div>
-                            ) : !isMe ? (
-                              <Button size="sm" variant="outline" onClick={() => setConfirmId(u.id)} className="text-xs border-red-800 text-red-400 hover:bg-red-900/20">
-                                🗑️ حظر وحذف البيانات
-                              </Button>
-                            ) : null}
+                            {(u.subscription?.status === "trialing" || isMe) && <Button size="sm" variant="outline" disabled={updateSubMutation.isPending} onClick={() => updateSubMutation.mutate({ userId: u.id, body: { status: "trial_expired", trialEnd: new Date(Date.now() - 60000).toISOString() } })} className="text-xs border-yellow-700 text-yellow-400 hover:bg-yellow-900/20">⏰ إنهاء التجربة</Button>}
+                            {u.subscription && u.subscription.status !== "trialing" && <Button size="sm" variant="outline" disabled={updateSubMutation.isPending} onClick={() => updateSubMutation.mutate({ userId: u.id, body: { status: "trialing", trialEnd: new Date(Date.now() + 30 * 24 * 3600 * 1000).toISOString() } })} className="text-xs border-blue-700 text-blue-400 hover:bg-blue-900/20">🔄 إعادة التجربة</Button>}
+                            {!isMe && (u.isBanned ? <Button size="sm" variant="outline" disabled={unbanMutation.isPending} onClick={() => unbanMutation.mutate(u.id)} className="text-xs border-green-700 text-green-400 hover:bg-green-900/20">{unbanMutation.isPending ? "⏳" : "✅ رفع الحظر"}</Button> : <Button size="sm" variant="outline" disabled={banMutation.isPending} onClick={() => { if (!confirm(`حظر ${u.email ?? u.id}؟ يمكن فك الحظر لاحقاً.`)) return; banMutation.mutate(u.id); }} className="text-xs border-orange-700 text-orange-400 hover:bg-orange-900/20">{banMutation.isPending ? "⏳" : "🚫 حظر الحساب"}</Button>)}
+                            {!isMe && confirmId === u.id ? <div className="flex gap-1"><Button size="sm" variant="destructive" onClick={() => deleteMutation.mutate(u.id)} disabled={deleteMutation.isPending} className="text-xs">{deleteMutation.isPending ? "جارٍ..." : "تأكيد"}</Button><Button size="sm" variant="outline" onClick={() => setConfirmId(null)} className="text-xs border-[#3a3a55] text-gray-300">إلغاء</Button></div> : !isMe && <Button size="sm" variant="outline" onClick={() => setConfirmId(u.id)} className="text-xs border-red-800 text-red-400 hover:bg-red-900/20">🗑️ حظر وحذف البيانات</Button>}
                           </div>
                         </td>
                       </tr>