From 51850b85c2b57c9cf3749da6d84842fcaf38d2c2 Mon Sep 17 00:00:00 2001
From: Rahaf <User@DESKTOP-JSF2AL8>
Date: Sun, 14 Jun 2026 18:04:05 +0300
Subject: [PATCH] Added blocked page with api

---
 app/ClientLayout.js |   1 +
 app/blocked/page.js | 166 ++++++++++++++++++++++++++++++++++++++++++++
 app/utils/api.js    |  77 +++++++++++++++++++-
 3 files changed, 243 insertions(+), 1 deletion(-)
 create mode 100644 app/blocked/page.js

diff --git a/app/ClientLayout.js b/app/ClientLayout.js
index 262d9a4..1a50712 100644
--- a/app/ClientLayout.js
+++ b/app/ClientLayout.js
@@ -126,6 +126,7 @@ export default function ClientLayout({ children }) {
 
   const isAuthPage = [
     "/login",
+    "/blocked",
     "/register",
     "/forgot-password",
     "/auth/choose-role",
diff --git a/app/blocked/page.js b/app/blocked/page.js
new file mode 100644
index 0000000..2270b97
--- /dev/null
+++ b/app/blocked/page.js
@@ -0,0 +1,166 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { motion } from 'framer-motion';
+import { ShieldAlert, LogOut, MessageSquare, Send, Loader2 } from 'lucide-react';
+import toast, { Toaster } from 'react-hot-toast';
+import AuthService from '../services/AuthService';
+import { sendGeneralReport } from '../utils/api';
+
+export default function BlockedPage() {
+  const router = useRouter();
+  const [form, setForm] = useState({ subject: '', body: '' });
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [isSent, setIsSent] = useState(false);
+
+  const handleLogout = () => {
+    AuthService.deleteToken();
+    router.replace('/');
+  };
+
+  const updateField = (field, value) => {
+    setForm((current) => ({ ...current, [field]: value }));
+    if (isSent) setIsSent(false);
+  };
+
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+
+    if (!form.subject.trim() || !form.body.trim()) {
+      toast.error('يرجى تعبئة الموضوع والرسالة');
+      return;
+    }
+
+    setIsSubmitting(true);
+
+    try {
+      await sendGeneralReport(form.subject.trim(), form.body.trim());
+      setIsSent(true);
+      setForm({ subject: '', body: '' });
+      toast.success('تم إرسال طلب الدعم بنجاح');
+    } catch (error) {
+      toast.error('حدث خطأ أثناء إرسال طلب الدعم. حاول مرة أخرى');
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-gradient-to-b from-red-50 via-white to-amber-50 flex items-center justify-center p-4" dir="rtl">
+      <Toaster position="top-center" reverseOrder={false} />
+
+      <motion.div
+        initial={{ opacity: 0, y: 24 }}
+        animate={{ opacity: 1, y: 0 }}
+        className="w-full max-w-5xl"
+      >
+        <div className="text-center mb-10">
+          <motion.div
+            initial={{ scale: 0.9 }}
+            animate={{ scale: 1 }}
+            className="w-24 h-24 bg-red-100 rounded-3xl flex items-center justify-center mx-auto mb-6 shadow-lg shadow-red-100"
+          >
+            <ShieldAlert className="w-12 h-12 text-red-600" />
+          </motion.div>
+          <h1 className="text-4xl font-bold text-gray-900 mb-3">الحساب محظور</h1>
+          <p className="text-gray-600 text-lg max-w-2xl mx-auto">
+            تم تقييد وصولك إلى التطبيق. يمكنك تسجيل الخروج أو مراسلة دعم العملاء للمساعدة في حل المشكلة.
+          </p>
+        </div>
+
+        <div className="grid md:grid-cols-2 gap-6">
+          <motion.div
+            initial={{ opacity: 0, x: -24 }}
+            animate={{ opacity: 1, x: 0 }}
+            transition={{ delay: 0.1 }}
+            className="bg-white rounded-3xl shadow-sm border border-gray-200 p-8 flex flex-col justify-between"
+          >
+            <div>
+              <div className="w-14 h-14 bg-red-50 rounded-2xl flex items-center justify-center mb-6">
+                <LogOut className="w-7 h-7 text-red-600" />
+              </div>
+              <h2 className="text-2xl font-bold text-gray-900 mb-3">تسجيل الخروج</h2>
+              <p className="text-gray-600 leading-7">
+                إنهاء الجلسة الحالية وإزالة بيانات الدخول من هذا الجهاز.
+              </p>
+            </div>
+
+            <button
+              type="button"
+              onClick={handleLogout}
+              className="mt-8 w-full bg-red-600 hover:bg-red-700 text-white rounded-2xl py-4 font-bold transition-colors flex items-center justify-center gap-3"
+            >
+              <LogOut className="w-5 h-5" />
+              تسجيل الخروج
+            </button>
+          </motion.div>
+
+          <motion.div
+            initial={{ opacity: 0, x: 24 }}
+            animate={{ opacity: 1, x: 0 }}
+            transition={{ delay: 0.2 }}
+            className="bg-white rounded-3xl shadow-sm border border-gray-200 p-8"
+          >
+            <div className="flex items-center gap-4 mb-6">
+              <div className="w-14 h-14 bg-amber-50 rounded-2xl flex items-center justify-center">
+                <MessageSquare className="w-7 h-7 text-amber-600" />
+              </div>
+              <div>
+                <h2 className="text-2xl font-bold text-gray-900">مراسلة دعم العملاء</h2>
+                <p className="text-gray-600 mt-1">أرسل تفاصيل المشكلة وسنقوم بمراجعتها.</p>
+              </div>
+            </div>
+
+            <form onSubmit={handleSubmit} className="space-y-5">
+              <div>
+                <label className="block text-sm font-bold text-gray-700 mb-2">الموضوع</label>
+                <input
+                  type="text"
+                  value={form.subject}
+                  onChange={(event) => updateField('subject', event.target.value)}
+                  placeholder="اكتب موضوع الرسالة"
+                  className="w-full px-4 py-3 bg-white border border-gray-200 rounded-2xl focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent text-gray-900 placeholder-gray-400"
+                />
+              </div>
+
+              <div>
+                <label className="block text-sm font-bold text-gray-700 mb-2">الرسالة</label>
+                <textarea
+                  value={form.body}
+                  onChange={(event) => updateField('body', event.target.value)}
+                  rows={6}
+                  placeholder="اشرح المشكلة بالتفصيل"
+                  className="w-full px-4 py-3 bg-white border border-gray-200 rounded-2xl focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent text-gray-900 placeholder-gray-400 resize-none"
+                />
+              </div>
+
+              <button
+                type="submit"
+                disabled={isSubmitting}
+                className="w-full bg-amber-500 hover:bg-amber-600 text-white rounded-2xl py-4 font-bold transition-colors flex items-center justify-center gap-3 disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                {isSubmitting ? (
+                  <>
+                    <Loader2 className="w-5 h-5 animate-spin" />
+                    جاري الإرسال...
+                  </>
+                ) : isSent ? (
+                  <>
+                    <Send className="w-5 h-5" />
+                    تم الإرسال
+                  </>
+                ) : (
+                  <>
+                    <Send className="w-5 h-5" />
+                    إرسال الرسالة
+                  </>
+                )}
+              </button>
+            </form>
+          </motion.div>
+        </div>
+      </motion.div>
+    </div>
+  );
+}
diff --git a/app/utils/api.js b/app/utils/api.js
index 083137e..a1555ad 100644
--- a/app/utils/api.js
+++ b/app/utils/api.js
@@ -450,13 +450,43 @@
 // }
 
 import AuthService from '../services/AuthService';
-
 const API_BASE = process.env.NEXT_PUBLIC_API_URL || 'https://45.93.137.91.nip.io/api';
+const REPORT_API_BASE = process.env.NEXT_PUBLIC_REPORT_API_URL || 'http://45.93.137.91/api';
+
 
 function isFormData(value) {
   return typeof FormData !== 'undefined' && value instanceof FormData;
 }
 
+class ApiBlockedError extends Error {
+  constructor(message = 'Your account is blocked') {
+    super(message);
+    this.name = 'ApiBlockedError';
+    this.status = 451;
+  }
+}
+
+export function isApiBlockedError(error) {
+  return error instanceof ApiBlockedError || error?.status === 451;
+}
+
+function redirectToBlockedPage() {
+  if (typeof window !== 'undefined' && window.location.pathname !== '/blocked') {
+    window.location.replace('/blocked');
+  }
+}
+
+function assertNotBlocked(response) {
+  if (response.status === 451) {
+    redirectToBlockedPage();
+    throw new ApiBlockedError();
+  }
+}
+
+function buildApiUrl(base, endpoint) {
+  return `${base.replace(/\/$/, '')}${endpoint.startsWith('/') ? endpoint : `/${endpoint}`}`;
+}
+
 /**
  * Generic API fetch — attaches auth token, unwraps { data } envelope
  */
@@ -484,6 +514,8 @@ async function apiFetch(endpoint, options = {}) {
         : options.body,
   });
 
+  assertNotBlocked(res);
+
   if (!res.ok && res.status !== 206) {
     const text = await res.text().catch(() => '');
     throw new Error(`API ${res.status}: ${text || res.statusText}`);
@@ -524,6 +556,36 @@ async function authFetch(endpoint, body, token = null) {
     body: bodyIsFormData ? body : JSON.stringify(body),
   });
 
+  assertNotBlocked(res);
+
+  const text = await res.text();
+  let data = null;
+
+  try {
+    data = text ? JSON.parse(text) : null;
+    if (data && typeof data === 'object' && 'data' in data) {
+      data = data.data;
+    }
+  } catch {
+    data = text;
+  }
+
+  const message = typeof data === 'object' && data?.message ? data.message : null;
+
+  return { status: res.status, data, ok: res.ok || res.status === 206, message };
+}
+
+async function reportFetch(endpoint, body) {
+  const res = await fetch(buildApiUrl(REPORT_API_BASE, endpoint), {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(body),
+  });
+
+  assertNotBlocked(res);
+
   const text = await res.text();
   let data = null;
 
@@ -721,6 +783,8 @@ export async function uploadPicture(file) {
     body: formData,
   });
 
+  assertNotBlocked(res);
+
   const text = await res.text();
 
   if (!res.ok) throw new Error(`Upload failed: ${res.status} ${text}`);
@@ -746,6 +810,8 @@ async function multipartAuthFetch(endpoint, formData) {
     body: formData,
   });
 
+  assertNotBlocked(res);
+
   const text = await res.text();
   let data = null;
 
@@ -948,6 +1014,8 @@ export async function registerRealEstateAgent(formData) {
     body: formData,
   });
 
+  assertNotBlocked(res);
+
   const text = await res.text();
   let data = null;
 
@@ -1028,6 +1096,13 @@ export async function filterRentProperties(params = {}) {
 
 // ─── Reports ───
 
+export async function sendGeneralReport(subject, reportBody) {
+  return reportFetch('/Reports/SendGeneralReport', {
+    subject,
+    body: reportBody,
+  });
+}
+
 export async function submitReport(subject, body) {
   return apiFetch('/Reports', {
     method: 'POST',