fixed payment ,colors , add Mosque distance and fixed some elemnent

app/owner/properties/add/loading.js

@@ -1,14 +0,0 @@
-'use client';
-
-import { motion } from 'framer-motion';
-
-export default function Loading() {
-  return (
-    <div className="min-h-screen bg-gradient-to-br from-gray-950 via-gray-900 to-gray-950 flex items-center justify-center">
-      <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="text-center">
-        <div className="w-14 h-14 border-4 border-amber-500 border-t-transparent rounded-full animate-spin mx-auto mb-4" />
-        <p className="text-gray-400 text-lg">جاري التحميل...</p>
-      </motion.div>
-    </div>
-  );
-}

app/owner/properties/add/page.js

@@ -141,6 +141,7 @@ export default function AddPropertyPage() {
     nearbyUniversity: "",
     nearbyPark: "",
     nearbyMall: "",
+    neaebymosque: "",
 
     roomAreaType: "Private room",
     roomPeopleAllowed: "",
@@ -693,6 +694,7 @@ export default function AddPropertyPage() {
         university: formData.nearbyUniversity || "",
         park: formData.nearbyPark || "",
         mall: formData.nearbyMall || "",
+        mosque: formData.neaebymosque || "",
       },
     };
 
@@ -747,11 +749,9 @@ export default function AddPropertyPage() {
     try {
       if (purpose === "sale") {
         const payload = {
-         
-            propInfo,
-            price: parseFloat(formData.salePrice),
-            deposit: parseFloat(formData.deposit) || 0,
-      
+          propInfo,
+          price: parseFloat(formData.salePrice),
+          deposit: parseFloat(formData.deposit) || 0,
         };
         console.log("ff", payload);
         const res = await addSaleProperty(payload);
@@ -862,7 +862,7 @@ export default function AddPropertyPage() {
                         type="button"
                         onClick={() => setFormData({ ...formData, propertyType: type.id })}
                         className={`p-4 border rounded-xl flex flex-col items-center gap-2 transition-all ${
-                          formData.propertyType === type.id ? "border-amber-500 bg-amber-50 text-amber-700" : "border-gray-200 hover:border-amber-200 hover:bg-amber-50/50"
+                          formData.propertyType === type.id ? "border-amber-500 bg-[#1E293B] text-amber-700" : "border-gray-200 hover:border-amber-200 hover:bg-amber-50/50"
                         }`}
                       >
                         <Icon className="w-6 h-6" />
@@ -895,7 +895,7 @@ export default function AddPropertyPage() {
                 <select
                   value={formData.documentType}
                   onChange={(e) => setFormData({ ...formData, documentType: e.target.value })}
-                  className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-amber-500"
+                  className="w-full px-4 bg-[#1E293B] py-3 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-amber-500"
                 >
                   {DocumentTypeList.map((type) => (
                     <option key={type} value={type}>
@@ -1037,19 +1037,19 @@ export default function AddPropertyPage() {
                     const Icon = service.icon;
                     const isSelected = formData.services[service.id];
                     return (
-                      <div key={service.id} className={`border rounded-xl transition-all ${isSelected ? "border-amber-500 bg-amber-50" : "border-gray-200"}`}>
+                      <div key={service.id} className={`border rounded-xl transition-all ${isSelected ? "border-amber-500 bg-[#1E293B]" : "border-gray-200"}`}>
                         <label className="flex items-center gap-3 p-3 cursor-pointer">
-                          <input type="checkbox" checked={isSelected} onChange={() => toggleService(service.id)} className="w-4 h-4 text-amber-500 rounded" />
+                          <input type="checkbox" checked={isSelected} onChange={() => toggleService(service.id)} className="w-4 h-4 bg-[#1E293B] text-amber-500 rounded" />
                           <Icon className={`w-5 h-5 ${isSelected ? "text-amber-600" : "text-gray-400"}`} />
                           <span className={`text-sm font-medium ${isSelected ? "text-amber-700" : "text-gray-600"}`}>{service.label}</span>
                         </label>
                         {isSelected && (
-                          <div className="px-3 pb-3">
+                          <div className="px-3 pb-3 bg-[#1E293B]">
                             <input
                               type="text"
                               value={formData.serviceDetails[service.id] || ""}
                               onChange={(e) => updateServiceDetail(service.id, e.target.value)}
-                              className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-amber-500"
+                              className="w-full px-3 py-2 border bg-[#1E293B] border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-amber-500"
                               placeholder={t("addProperty.serviceDetailPlaceholder")}
                             />
                           </div>
@@ -1060,7 +1060,7 @@ export default function AddPropertyPage() {
                 </div>
               </div>
 
-              <div className="bg-white rounded-xl p-6 border border-gray-200 mt-6">
+              <div className="bg-[#1E293B] rounded-xl p-6 border border-gray-200 mt-6">
                 <h3 className="text-lg font-bold text-gray-800 mb-4 flex items-center gap-2">
                   <MapPin className="w-5 h-5 text-amber-600" />
                   {t("addProperty.nearbyServicesTitle")}
@@ -1090,6 +1090,19 @@ export default function AddPropertyPage() {
                       placeholder={t("addProperty.nearbyPlaceholder")}
                     />
                   </div>
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 mb-2">{t("neaebymosque")}</label>
+                    <input
+                      type="number"
+                      min="0"
+                      step="0.1"
+                      required
+                      value={formData.neaebymosque}
+                      onChange={(e) => setFormData({ ...formData, neaebymosque: e.target.value })}
+                      className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-amber-500"
+                      placeholder={t("addProperty.nearbyPlaceholder")}
+                    />
+                  </div>
                   <div>
                     <label className="block text-sm font-medium text-gray-700 mb-2">{t("addProperty.nearbyRestaurantLabel")}</label>
                     <input
@@ -1151,7 +1164,7 @@ export default function AddPropertyPage() {
                         <label
                           key={term.id}
                           className={`flex items-center gap-2 p-3 border rounded-xl cursor-pointer transition-all ${
-                            formData.terms[term.id] ? "border-amber-500 bg-amber-50" : "border-gray-200 hover:border-amber-200 hover:bg-amber-50/50"
+                            formData.terms[term.id] ? "border-amber-500 bg-[#1E293B]" : "border-gray-200 hover:border-amber-200 hover:bg-amber-50/50"
                           }`}
                         >
                           <input type="checkbox" checked={formData.terms[term.id]} onChange={() => toggleTerm(term.id)} className="hidden" />
@@ -1208,7 +1221,7 @@ export default function AddPropertyPage() {
           {step === 3 && purpose === "sale" && (
             <motion.div variants={fadeInUp} className="space-y-8">
               <div className="text-center mb-6">
-                <div className="w-20 h-20 bg-amber-100 rounded-2xl flex items-center justify-center mx-auto mb-4">
+                <div className="w-20 h-20 bg-amber-500 rounded-2xl flex items-center justify-center mx-auto mb-4">
                   <DollarSign className="w-10 h-10 text-amber-600" />
                 </div>
                 <h2 className="text-2xl font-bold text-gray-900 mb-2">{t("addProperty.salePriceTitle")}</h2>
@@ -1234,7 +1247,7 @@ export default function AddPropertyPage() {
                     onKeyDown={(e) => {
                       if (["-", "e", "E", "+"].includes(e.key)) e.preventDefault();
                     }}
-                    className={`w-full pr-12 pl-4 py-3 border rounded-xl focus:outline-none focus:ring-2 focus:ring-amber-500 ${errors.salePrice ? "border-red-500" : "border-gray-300"}`}
+                    className={`w-full pr-12 pl-4  py-3 border rounded-xl focus:outline-none focus:ring-2 focus:ring-amber-500 ${errors.salePrice ? "border-red-500" : "border-gray-300"}`}
                     placeholder={t("addProperty.salePricePlaceholder")}
                   />
                 </div>
@@ -1248,7 +1261,7 @@ export default function AddPropertyPage() {
                 <select
                   value={selectedCurrencyId}
                   onChange={(e) => setSelectedCurrencyId(parseInt(e.target.value))}
-                  className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-amber-500"
+                  className="w-full px-4 py-3 border border-gray-300 bg-[#1E293B] rounded-xl focus:outline-none focus:ring-2 focus:ring-amber-500"
                 >
                   <option value={Currency.USD}>{t("addProperty.usdOption")}</option>
                   <option value={Currency.SYP}>{t("addProperty.sypOption")}</option>
@@ -1280,7 +1293,7 @@ export default function AddPropertyPage() {
                         type="button"
                         onClick={() => setFormData({ ...formData, offerType: type.id })}
                         className={`p-4 border rounded-xl flex flex-col items-center gap-2 transition-all ${
-                          formData.offerType === type.id ? "border-amber-500 bg-amber-50 text-amber-700" : "border-gray-200 hover:border-amber-200 hover:bg-amber-50/50"
+                          formData.offerType === type.id ? "border-amber-500 bg-[#1E293B] text-amber-700" : "border-gray-200 hover:border-amber-200 hover:bg-amber-50/50"
                         }`}
                       >
                         <Icon className="w-6 h-6" />
@@ -1290,7 +1303,7 @@ export default function AddPropertyPage() {
                   })}
                 </div>
               </div>
-
+              {/* كمسيون */}
               <div>
                 <label className="block text-sm font-medium text-gray-700 mb-2">
                   {t("addProperty.currencyLabel")} <span className="text-red-500">*</span>
@@ -1298,7 +1311,7 @@ export default function AddPropertyPage() {
                 <select
                   value={selectedCurrencyId}
                   onChange={(e) => setSelectedCurrencyId(parseInt(e.target.value))}
-                  className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-amber-500"
+                  className="w-full px-4 py-3 border bg-[#1E293B] border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-amber-500"
                 >
                   <option value={Currency.USD}>{t("addProperty.usdOption")}</option>
                   <option value={Currency.SYP}>{t("addProperty.sypOption")}</option>
@@ -1506,8 +1519,8 @@ export default function AddPropertyPage() {
           )}
 
           {step === 4 && (
-            <motion.div variants={fadeInUp} className="space-y-8">
-              <div className="text-center mb-6">
+            <motion.div variants={fadeInUp} className="space-y-8 ">
+              <div className="text-center mb-6  ">
                 <div className="w-20 h-20 bg-amber-100 rounded-2xl flex items-center justify-center mx-auto mb-4">
                   <MapPin className="w-10 h-10 text-amber-600" />
                 </div>
@@ -1515,7 +1528,7 @@ export default function AddPropertyPage() {
                 <p className="text-gray-600">{t("addProperty.locationAndImagesSubtitle")}</p>
               </div>
 
-              <div className="rounded-3xl border border-amber-100 bg-linear-to-br from-amber-50 via-white to-orange-50 p-4 sm:p-5 md:p-6 shadow-sm">
+              <div className="rounded-3xl border border-amber-100  p-4 sm:p-5 md:p-6 shadow-sm">
                 <div className="flex flex-col gap-3 md:flex-row md:items-start md:justify-between mb-5">
                   <div>
                     <div className="flex items-center gap-2 text-amber-700 font-semibold mb-1">
@@ -1568,7 +1581,7 @@ export default function AddPropertyPage() {
                         {t("addProperty.searchButton")}
                       </button>
                     </div>
-                    <div className="mt-3 flex items-start gap-2 text-sm text-amber-700">
+                    <div className="mt-3 flex items-start gap-2  text-sm text-amber-700">
                       <Info className="w-4 h-4 mt-0.5 shrink-0" />
                       <span>{t("addProperty.clickMapHint")}</span>
                     </div>
@@ -1589,7 +1602,7 @@ export default function AddPropertyPage() {
                       {t("addProperty.confirmLocation")}
                     </button>
                   ) : (
-                    <div className="rounded-2xl border border-amber-100 bg-amber-50 px-4 py-3 text-sm text-amber-800 flex items-start gap-2">
+                    <div className="rounded-2xl border border-amber-100 bg-[#1E293B] px-4 py-3 text-sm text-amber-800 flex items-start gap-2">
                       <Info className="w-4 h-4 mt-0.5 shrink-0" />
                       <span>{t("addProperty.clickMapHint")}</span>
                     </div>

app/owner/properties/loading.js

@@ -1,14 +0,0 @@
-'use client';
-
-import { motion } from 'framer-motion';
-
-export default function Loading() {
-  return (
-    <div className="min-h-screen bg-gradient-to-br from-gray-950 via-gray-900 to-gray-950 flex items-center justify-center">
-      <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="text-center">
-        <div className="w-14 h-14 border-4 border-amber-500 border-t-transparent rounded-full animate-spin mx-auto mb-4" />
-        <p className="text-gray-400 text-lg">جاري التحميل...</p>
-      </motion.div>
-    </div>
-  );
-}