From 4a9380313b458f32aafed1d4ddf3b4cd273cf36c Mon Sep 17 00:00:00 2001
From: mouazkh <mouazalkhatib2013@gmail.com>
Date: Wed, 24 Jun 2026 00:07:09 +0300
Subject: [PATCH] fixed the support and removed the send general report no need
 for that also fixed the client layout

---
 app/components/BottomNav.js |  10 ++-
 app/settings/page.js        | 118 +++++++++++-------------------------
 2 files changed, 46 insertions(+), 82 deletions(-)

diff --git a/app/components/BottomNav.js b/app/components/BottomNav.js
index c72e92a..e0a61ff 100644
--- a/app/components/BottomNav.js
+++ b/app/components/BottomNav.js
@@ -1,11 +1,13 @@
 "use client";
 
 import Link from "next/link";
+import { usePathname } from "next/navigation";
 import { Home, Building, Calendar, Heart, Bell, Settings, CreditCard, Briefcase } from "lucide-react";
 import React, { useEffect, useState } from "react";
 import { useNotifications } from "@/app/contexts/NotificationsContext";
 
 export default function BottomNav({ isOwner, isOwnerOrAgent }) {
+  const pathname = usePathname();
   const { unreadCount } = useNotifications();
   const [isMounted, setIsMounted] = useState(false);
   const bookingsHref = isOwner ? "/owner/reservations" : "/reservations";
@@ -25,16 +27,22 @@ export default function BottomNav({ isOwner, isOwnerOrAgent }) {
     { href: "/settings", label: "الإعدادات", icon: Settings },
   ];
 
+  const isActive = (href) => {
+    if (href === "/") return pathname === "/";
+    return pathname.startsWith(href);
+  };
+
   return (
     <nav className="fixed bottom-4 left-1/2 transform -translate-x-1/2 z-50">
       <div className="bg-white/95 backdrop-blur-sm border border-gray-200 rounded-3xl shadow-lg px-2 py-2 flex items-center gap-3">
         {items.map((it) => {
           const Icon = it.icon;
+          const active = isActive(it.href);
           return (
             <Link
               key={it.href}
               href={it.href}
-              className="relative group flex flex-col items-center justify-center px-2.5 py-2 text-gray-700 hover:text-amber-600 transition-colors"
+              className={`relative group flex flex-col items-center justify-center px-2.5 py-2 transition-colors ${active ? "text-amber-600" : "text-gray-700 hover:text-amber-600"}`}
             >
               <div className="relative">
                 <Icon className="w-6 h-6" />
diff --git a/app/settings/page.js b/app/settings/page.js
index 5c4c0ec..7d15105 100644
--- a/app/settings/page.js
+++ b/app/settings/page.js
@@ -276,7 +276,7 @@ import {
 } from 'lucide-react';
 import toast, { Toaster } from 'react-hot-toast';
 import AuthService from '../services/AuthService';
-import { changePassword, deleteMyAccount } from '../utils/api';
+import { changePassword, deleteMyAccount, submitReport } from '../utils/api';
 
 export default function SettingsPage() {
   const router = useRouter();
@@ -285,10 +285,10 @@ export default function SettingsPage() {
   const [isDeleting, setIsDeleting] = useState(false);
   const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
 
-  const [showReportDialog, setShowReportDialog] = useState(false);
-  const [reportSubject, setReportSubject] = useState('');
-  const [reportBody, setReportBody] = useState('');
-  const [isSendingReport, setIsSendingReport] = useState(false);
+  const [showContactDialog, setShowContactDialog] = useState(false);
+  const [contactSubject, setContactSubject] = useState('');
+  const [contactBody, setContactBody] = useState('');
+  const [isSendingContact, setIsSendingContact] = useState(false);
 
   const handleSignOut = () => {
     AuthService.deleteToken();
@@ -317,66 +317,23 @@ export default function SettingsPage() {
     }
   };
 
-  const handleSendGeneralReport = async () => {
-    if (!reportSubject.trim() || !reportBody.trim()) {
-      toast.error('الرجاء تعبئة عنوان البلاغ ونصه');
+  const handleSendContact = async () => {
+    if (!contactSubject.trim() || !contactBody.trim()) {
+      toast.error('الرجاء تعبئة العنوان والرسالة');
       return;
     }
 
-    if (reportSubject.trim().length > 300) {
-      toast.error('عنوان البلاغ يجب ألا يتجاوز 300 حرف');
-      return;
-    }
-
-    const token =
-      AuthService.getToken?.() ||
-      (typeof window !== 'undefined'
-        ? localStorage.getItem('token') ||
-          localStorage.getItem('accessToken') ||
-          localStorage.getItem('authToken')
-        : null);
-
-    if (!token) {
-      console.error('No token found. Checked AuthService.getToken and localStorage keys: token, accessToken, authToken');
-      toast.error('لم يتم العثور على التوكن');
-      return;
-    }
-
-    setIsSendingReport(true);
-
+    setIsSendingContact(true);
     try {
-      const res = await fetch('http://45.93.137.91/api/Reports/SendGeneralReport', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          Authorization: `Bearer ${token}`,
-        },
-        body: JSON.stringify({
-          subject: reportSubject.trim(),
-          body: reportBody.trim(),
-        }),
-      });
-
-      const responseText = await res.text();
-
-      if (!res.ok) {
-        console.error('Send report failed:', {
-          status: res.status,
-          statusText: res.statusText,
-          responseText,
-        });
-        throw new Error(responseText || `فشل إرسال البلاغ (HTTP ${res.status})`);
-      }
-
-      toast.success(responseText || 'تم إرسال البلاغ بنجاح');
-      setShowReportDialog(false);
-      setReportSubject('');
-      setReportBody('');
+      await submitReport(contactSubject.trim(), contactBody.trim());
+      toast.success('تم إرسال رسالتك بنجاح');
+      setShowContactDialog(false);
+      setContactSubject('');
+      setContactBody('');
     } catch (err) {
-      console.error('Send report error:', err);
-      toast.error(err.message || 'حدث خطأ أثناء إرسال البلاغ');
+      toast.error(err.message || 'حدث خطأ أثناء الإرسال');
     } finally {
-      setIsSendingReport(false);
+      setIsSendingContact(false);
     }
   };
 
@@ -399,10 +356,9 @@ export default function SettingsPage() {
       title: 'الدعم',
       items: [
         { icon: HelpCircle, label: 'الأسئلة الشائعة', href: '/faq', desc: 'إجابات للأسئلة المتكررة' },
-        { icon: MessageCircle, label: 'تواصل معنا', href: '/support', desc: 'الحصول على المساعدة والدعم' },
+        { icon: MessageCircle, label: 'تواصل معنا', desc: 'الحصول على المساعدة والدعم', action: () => setShowContactDialog(true) },
         { icon: FileText, label: 'الشروط والأحكام', href: '/terms', desc: 'سياسة الاستخدام والخصوصية' },
         { icon: Eye, label: 'سياسة الخصوصية', href: '/privacy', desc: 'كيف نحمي بياناتك' },
-        { icon: AlertTriangle, label: 'إرسال بلاغ عام', desc: 'إرسال مشكلة أو ملاحظة إلى الإدارة', action: () => setShowReportDialog(true) },
       ]
     },
   ];
@@ -421,7 +377,7 @@ export default function SettingsPage() {
   };
 
   return (
-    <div className="min-h-screen bg-gray-50 py-8" dir="rtl">
+    <div className="min-h-screen bg-gray-50 py-8 pb-28" dir="rtl">
       <Toaster position="top-center" reverseOrder={false} />
 
       <div className="container mx-auto px-4 max-w-2xl">
@@ -586,7 +542,7 @@ export default function SettingsPage() {
         </div>
       )}
 
-      {showReportDialog && (
+      {showContactDialog && (
         <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50">
           <motion.div
             initial={{ opacity: 0, scale: 0.95 }}
@@ -598,14 +554,14 @@ export default function SettingsPage() {
                 <MessageCircle className="w-5 h-5 text-amber-600" />
               </div>
               <div>
-                <h3 className="text-lg font-semibold text-gray-900">إرسال بلاغ عام</h3>
-                <p className="text-sm text-gray-500">سيتم إرسال البلاغ إلى الإدارة</p>
+                <h3 className="text-lg font-semibold text-gray-900">تواصل معنا</h3>
+                <p className="text-sm text-gray-500">سنقوم بالرد عليك في أقرب وقت</p>
               </div>
               <button
                 onClick={() => {
-                  setShowReportDialog(false);
-                  setReportSubject('');
-                  setReportBody('');
+                  setShowContactDialog(false);
+                  setContactSubject('');
+                  setContactBody('');
                 }}
                 className="mr-auto p-1 hover:bg-gray-100 rounded-lg transition-colors"
               >
@@ -615,17 +571,17 @@ export default function SettingsPage() {
 
             <input
               type="text"
-              value={reportSubject}
-              onChange={(e) => setReportSubject(e.target.value)}
-              placeholder="عنوان البلاغ"
+              value={contactSubject}
+              onChange={(e) => setContactSubject(e.target.value)}
+              placeholder="الموضوع"
               maxLength={300}
               className="w-full px-4 py-3 border border-gray-300 rounded-xl mb-4 focus:ring-2 focus:ring-amber-500 focus:border-transparent outline-none"
             />
 
             <textarea
-              value={reportBody}
-              onChange={(e) => setReportBody(e.target.value)}
-              placeholder="اكتب تفاصيل البلاغ هنا..."
+              value={contactBody}
+              onChange={(e) => setContactBody(e.target.value)}
+              placeholder="اكتب رسالتك هنا..."
               rows={5}
               className="w-full px-4 py-3 border border-gray-300 rounded-xl mb-4 focus:ring-2 focus:ring-amber-500 focus:border-transparent outline-none resize-none"
             />
@@ -633,21 +589,21 @@ export default function SettingsPage() {
             <div className="flex gap-3">
               <button
                 onClick={() => {
-                  setShowReportDialog(false);
-                  setReportSubject('');
-                  setReportBody('');
+                  setShowContactDialog(false);
+                  setContactSubject('');
+                  setContactBody('');
                 }}
                 className="flex-1 px-4 py-3 rounded-xl border border-gray-200 text-gray-700 hover:bg-gray-50 transition-colors text-sm font-medium"
               >
                 إلغاء
               </button>
               <button
-                onClick={handleSendGeneralReport}
-                disabled={isSendingReport}
+                onClick={handleSendContact}
+                disabled={isSendingContact}
                 className="flex-1 px-4 py-3 rounded-xl bg-amber-600 text-white hover:bg-amber-700 transition-colors text-sm font-medium disabled:opacity-50 flex items-center justify-center gap-2"
               >
-                {isSendingReport ? <Loader2 className="w-4 h-4 animate-spin" /> : <MessageCircle className="w-4 h-4" />}
-                {isSendingReport ? 'جاري الإرسال...' : 'إرسال البلاغ'}
+                {isSendingContact ? <Loader2 className="w-4 h-4 animate-spin" /> : <MessageCircle className="w-4 h-4" />}
+                {isSendingContact ? 'جاري الإرسال...' : 'إرسال'}
               </button>
             </div>
           </motion.div>