amer2004/SweetHome
2
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

removed the descption on the profile
All checks were successful
Build frontend / build (push) Successful in 49s
Details

Browse Source
This commit is contained in:
mouazkh
2026-06-24 00:15:21 +03:00
parent 4a9380313b
commit 13b83e9aea
2 changed files with 127 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

142
app/profile/page.js
View File

@ -1,9 +1,9 @@
'use client'; "use client";
import { useState, useEffect } from 'react'; import { useState, useEffect } from "react";
import { motion } from 'framer-motion'; import { motion } from "framer-motion";
import { useRouter } from 'next/navigation'; import { useRouter } from "next/navigation";
import Link from 'next/link'; import Link from "next/link";
import { import {
User, User,
Mail, Mail,
@ -17,11 +17,11 @@ import {
Calendar, Calendar,
MapPin, MapPin,
Loader2, Loader2,
Pencil Pencil,
} from 'lucide-react'; } from "lucide-react";
import toast, { Toaster } from 'react-hot-toast'; import toast, { Toaster } from "react-hot-toast";
import AuthService from '../services/AuthService'; import AuthService from "../services/AuthService";
import { getCustomerByUserId, getOwnerByUserId } from '../utils/api'; import { getCustomerByUserId, getOwnerByUserId } from "../utils/api";
export default function ProfilePage() { export default function ProfilePage() {
const router = useRouter(); const router = useRouter();
@ -29,52 +29,65 @@ export default function ProfilePage() {
const [isLoading, setIsLoading] = useState(true); const [isLoading, setIsLoading] = useState(true);
const [editingBio, setEditingBio] = useState(false); const [editingBio, setEditingBio] = useState(false);
const [bioDraft, setBioDraft] = useState(''); const [bioDraft, setBioDraft] = useState("");
const [formData, setFormData] = useState({ const [formData, setFormData] = useState({
name: '', name: "",
email: '', email: "",
phone: '', phone: "",
whatsapp: '', whatsapp: "",
bio: '', bio: "",
location: '', location: "",
joinedDate: '' joinedDate: "",
}); });
const [avatarPreview, setAvatarPreview] = useState(''); const [avatarPreview, setAvatarPreview] = useState("");
useEffect(() => { useEffect(() => {
const authUser = AuthService.getUser(); const authUser = AuthService.getUser();
if (authUser) { if (authUser) {
const userData = { const userData = {
id: authUser.id, id: authUser.id,
name: authUser.name || '', name: authUser.name || "",
email: authUser.email || '', email: authUser.email || "",
phone: authUser.phone || '', phone: authUser.phone || "",
role: AuthService.isOwner() ? 'owner' : 'customer', role: AuthService.isOwner() ? "owner" : "customer",
}; };
setUser(userData); setUser(userData);
async function fetchProfile() { async function fetchProfile() {
try { try {
const fetchFn = userData.role === 'owner' ? getOwnerByUserId : getCustomerByUserId; const fetchFn =
userData.role === "owner" ? getOwnerByUserId : getCustomerByUserId;
const profile = await fetchFn(userData.id); const profile = await fetchFn(userData.id);
if (profile) { if (profile) {
const profileData = { const profileData = {
name: profile.fullName || profile.name || `${profile.firstName || ''} ${profile.lastName || ''}`.trim() || userData.name || '', name:
email: profile.email || userData.email || '', profile.fullName ||
phone: profile.phone || profile.phoneNumber || userData.phone || '', profile.name ||
whatsapp: profile.whatsAppNumber || profile.whatsapp || '', `${profile.firstName || ""} ${profile.lastName || ""}`.trim() ||
bio: profile.bio || '', userData.name ||
location: profile.address || profile.location || '', "",
email: profile.email || userData.email || "",
phone:
profile.phone || profile.phoneNumber || userData.phone || "",
whatsapp: profile.whatsAppNumber || profile.whatsapp || "",
bio: profile.bio || "",
location: profile.address || profile.location || "",
joinedDate: profile.createdAt joinedDate: profile.createdAt
? new Date(profile.createdAt).toLocaleDateString('ar-SA', { month: 'long', year: 'numeric' }) ? new Date(profile.createdAt).toLocaleDateString("ar-SA", {
: new Date().toLocaleDateString('ar-SA', { month: 'long', year: 'numeric' }), month: "long",
year: "numeric",
})
: new Date().toLocaleDateString("ar-SA", {
month: "long",
year: "numeric",
}),
}; };
setFormData(profileData); setFormData(profileData);
setBioDraft(profileData.bio); setBioDraft(profileData.bio);
localStorage.setItem('userProfile', JSON.stringify(profileData)); localStorage.setItem("userProfile", JSON.stringify(profileData));
setIsLoading(false); setIsLoading(false);
return; return;
} }
@ -82,59 +95,62 @@ export default function ProfilePage() {
// Ignore API errors and fall back to local data. // Ignore API errors and fall back to local data.
} }
const savedProfile = localStorage.getItem('userProfile'); const savedProfile = localStorage.getItem("userProfile");
let profileData; let profileData;
if (savedProfile) { if (savedProfile) {
profileData = JSON.parse(savedProfile); profileData = JSON.parse(savedProfile);
} else { } else {
profileData = { profileData = {
name: userData.name || '', name: userData.name || "",
email: userData.email || '', email: userData.email || "",
phone: '', phone: "",
whatsapp: '', whatsapp: "",
bio: '', bio: "",
location: '', location: "",
joinedDate: new Date().toLocaleDateString('ar-SA', { month: 'long', year: 'numeric' }) joinedDate: new Date().toLocaleDateString("ar-SA", {
month: "long",
year: "numeric",
}),
}; };
} }
setFormData(profileData); setFormData(profileData);
setBioDraft(profileData.bio || ''); setBioDraft(profileData.bio || "");
setIsLoading(false); setIsLoading(false);
} }
const savedAvatar = localStorage.getItem('userAvatar'); const savedAvatar = localStorage.getItem("userAvatar");
if (savedAvatar) { if (savedAvatar) {
setAvatarPreview(savedAvatar); setAvatarPreview(savedAvatar);
} }
fetchProfile(); fetchProfile();
} else { } else {
router.push('/login'); router.push("/login");
} }
}, [router]); }, [router]);
const startBioEditing = () => { const startBioEditing = () => {
setBioDraft(formData.bio || ''); setBioDraft(formData.bio || "");
setEditingBio(true); setEditingBio(true);
}; };
const cancelBioEditing = () => { const cancelBioEditing = () => {
setBioDraft(formData.bio || ''); setBioDraft(formData.bio || "");
setEditingBio(false); setEditingBio(false);
}; };
const saveBio = () => { const saveBio = () => {
const updatedData = { ...formData, bio: bioDraft }; const updatedData = { ...formData, bio: bioDraft };
setFormData(updatedData); setFormData(updatedData);
localStorage.setItem('userProfile', JSON.stringify(updatedData)); localStorage.setItem("userProfile", JSON.stringify(updatedData));
setEditingBio(false); setEditingBio(false);
toast.success('تم تحديث نبذة عني بنجاح'); toast.success("تم تحديث نبذة عني بنجاح");
}; };
const fadeInUp = { const fadeInUp = {
initial: { opacity: 0, y: 20 }, initial: { opacity: 0, y: 20 },
animate: { opacity: 1, y: 0 }, animate: { opacity: 1, y: 0 },
transition: { duration: 0.5 } transition: { duration: 0.5 },
}; };
if (isLoading) { if (isLoading) {
@ -177,12 +193,12 @@ export default function ProfilePage() {
<motion.div <motion.div
className="absolute inset-0 bg-white/10" className="absolute inset-0 bg-white/10"
animate={{ animate={{
x: ['-100%', '100%'], x: ["-100%", "100%"],
}} }}
transition={{ transition={{
duration: 3, duration: 3,
repeat: Infinity, repeat: Infinity,
ease: 'linear', ease: "linear",
}} }}
/> />
</div> </div>
@ -198,7 +214,7 @@ export default function ProfilePage() {
className="w-full h-full object-cover" className="w-full h-full object-cover"
/> />
) : ( ) : (
formData.name?.charAt(0).toUpperCase() || 'U' formData.name?.charAt(0).toUpperCase() || "U"
)} )}
</div> </div>
</div> </div>
@ -206,12 +222,14 @@ export default function ProfilePage() {
<div className="text-center mb-6"> <div className="text-center mb-6">
<div className="flex items-center justify-center gap-2"> <div className="flex items-center justify-center gap-2">
<h1 className="text-3xl font-bold text-gray-900">{formData.name}</h1> <h1 className="text-3xl font-bold text-gray-900">
{formData.name}
</h1>
</div> </div>
<div className="flex items-center justify-center gap-2 text-gray-500 mt-2"> <div className="flex items-center justify-center gap-2 text-gray-500 mt-2">
<MapPin className="w-4 h-4" /> <MapPin className="w-4 h-4" />
<span>{formData.location || 'الموقع غير محدد'}</span> <span>{formData.location || "الموقع غير محدد"}</span>
</div> </div>
<div className="flex items-center justify-center gap-2 text-gray-500 mt-1"> <div className="flex items-center justify-center gap-2 text-gray-500 mt-1">
@ -241,7 +259,7 @@ export default function ProfilePage() {
</div> </div>
<div className="flex items-center gap-2 text-gray-900"> <div className="flex items-center gap-2 text-gray-900">
<Phone className="w-5 h-5 text-gray-400" /> <Phone className="w-5 h-5 text-gray-400" />
<span>{formData.phone || 'غير محدد'}</span> <span>{formData.phone || "غير محدد"}</span>
</div> </div>
</div> </div>
@ -253,7 +271,7 @@ export default function ProfilePage() {
</div> </div>
<div className="flex items-center gap-2 text-gray-900"> <div className="flex items-center gap-2 text-gray-900">
<MessageCircle className="w-5 h-5 text-gray-400" /> <MessageCircle className="w-5 h-5 text-gray-400" />
<span>{formData.whatsapp || 'غير محدد'}</span> <span>{formData.whatsapp || "غير محدد"}</span>
</div> </div>
</div> </div>
@ -262,7 +280,7 @@ export default function ProfilePage() {
نوع الحساب نوع الحساب
</label> </label>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
{user?.role === 'owner' ? ( {user?.role === "owner" ? (
<> <>
<Building className="w-5 h-5 text-amber-500" /> <Building className="w-5 h-5 text-amber-500" />
<span className="text-gray-900">مالك عقار</span> <span className="text-gray-900">مالك عقار</span>
@ -276,8 +294,8 @@ export default function ProfilePage() {
</div> </div>
</div> </div>
</div> </div>
{/* noo need for the descption of me on the profile*/}
<div className="mt-6 bg-gray-50 p-4 rounded-xl group"> {/* <div className="mt-6 bg-gray-50 p-4 rounded-xl group">
<div className="flex justify-between items-start mb-2"> <div className="flex justify-between items-start mb-2">
<label className="text-sm font-medium text-gray-600"> <label className="text-sm font-medium text-gray-600">
نبذة عني نبذة عني
@ -324,9 +342,9 @@ export default function ProfilePage() {
{formData.bio || 'لا توجد نبذة تعريفية بعد'} {formData.bio || 'لا توجد نبذة تعريفية بعد'}
</p> </p>
)} )}
</div> </div> */}
{user?.role === 'owner' && ( {user?.role === "owner" && (
<div className="grid grid-cols-3 gap-4 mt-6"> <div className="grid grid-cols-3 gap-4 mt-6">
<div className="bg-amber-50 p-4 rounded-xl text-center"> <div className="bg-amber-50 p-4 rounded-xl text-center">
<div className="text-2xl font-bold text-amber-600">12</div> <div className="text-2xl font-bold text-amber-600">12</div>
@ -347,4 +365,4 @@ export default function ProfilePage() {
</div> </div>
</div> </div>
); );
} }

71
app/support/page.js
View File

@ -1,44 +1,54 @@
'use client'; "use client";
import { useState } from 'react'; import { useState } from "react";
import { motion } from 'framer-motion'; import { motion } from "framer-motion";
import { MessageCircle, Mail, Phone, MapPin, Send, Loader2 } from 'lucide-react'; import {
import toast, { Toaster } from 'react-hot-toast'; MessageCircle,
import { submitReport } from '../utils/api'; Mail,
import AuthService from '../services/AuthService'; Phone,
MapPin,
Send,
Loader2,
} from "lucide-react";
import toast, { Toaster } from "react-hot-toast";
import { submitReport } from "../utils/api";
import AuthService from "../services/AuthService";
export default function SupportPage() { export default function SupportPage() {
const [subject, setSubject] = useState(''); const [subject, setSubject] = useState("");
const [body, setBody] = useState(''); const [body, setBody] = useState("");
const [isSubmitting, setIsSubmitting] = useState(false); const [isSubmitting, setIsSubmitting] = useState(false);
const handleSubmit = async (e) => { const handleSubmit = async (e) => {
e.preventDefault(); e.preventDefault();
if (!subject.trim() || !body.trim()) { if (!subject.trim() || !body.trim()) {
toast.error('يرجى تعبئة جميع الحقول'); toast.error("يرجى تعبئة جميع الحقول");
return; return;
} }
if (!AuthService.isAuthenticated()) { if (!AuthService.isAuthenticated()) {
toast.error('يرجى تسجيل الدخول أولاً لإرسال طلب دعم'); toast.error("يرجى تسجيل الدخول أولاً لإرسال طلب دعم");
return; return;
} }
setIsSubmitting(true); setIsSubmitting(true);
try { try {
await submitReport(subject, body); await submitReport(subject, body);
toast.success('تم إرسال طلب الدعم بنجاح'); toast.success("تم إرسال طلب الدعم بنجاح");
setSubject(''); setSubject("");
setBody(''); setBody("");
} catch (error) { } catch (error) {
toast.error('حدث خطأ أثناء إرسال الطلب. حاول مرة أخرى'); toast.error("حدث خطأ أثناء إرسال الطلب. حاول مرة أخرى");
} finally { } finally {
setIsSubmitting(false); setIsSubmitting(false);
} }
}; };
return ( return (
<div className="min-h-screen bg-gradient-to-b from-amber-50/50 to-white py-12" dir="rtl"> <div
className="min-h-screen bg-gradient-to-b from-amber-50/50 to-white py-12"
dir="rtl"
>
<Toaster position="top-center" reverseOrder={false} /> <Toaster position="top-center" reverseOrder={false} />
<div className="container mx-auto px-4 max-w-5xl"> <div className="container mx-auto px-4 max-w-5xl">
<motion.div <motion.div
@ -49,9 +59,12 @@ export default function SupportPage() {
<div className="w-20 h-20 bg-amber-100 rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-lg shadow-amber-100"> <div className="w-20 h-20 bg-amber-100 rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-lg shadow-amber-100">
<MessageCircle className="w-10 h-10 text-amber-600" /> <MessageCircle className="w-10 h-10 text-amber-600" />
</div> </div>
<h1 className="text-4xl font-bold text-gray-900 mb-4">خدمة العملاء</h1> <h1 className="text-4xl font-bold text-gray-900 mb-4">
خدمة العملاء
</h1>
<p className="text-lg text-gray-600 max-w-2xl mx-auto"> <p className="text-lg text-gray-600 max-w-2xl mx-auto">
نحن هنا لمساعدتك. تواصل معنا عبر النموذج أدناه أو من خلال معلومات الاتصال المباشرة نحن هنا لمساعدتك. تواصل معنا عبر النموذج أدناه أو من خلال معلومات
الاتصال المباشرة
</p> </p>
</motion.div> </motion.div>
@ -63,7 +76,9 @@ export default function SupportPage() {
className="md:col-span-2" className="md:col-span-2"
> >
<div className="bg-white rounded-2xl shadow-sm border border-gray-200 p-8"> <div className="bg-white rounded-2xl shadow-sm border border-gray-200 p-8">
<h2 className="text-2xl font-bold text-gray-900 mb-6">أرسل لنا رسالة</h2> <h2 className="text-2xl font-bold text-gray-900 mb-6">
أرسل لنا رسالة
</h2>
<form onSubmit={handleSubmit} className="space-y-6"> <form onSubmit={handleSubmit} className="space-y-6">
<div> <div>
<label className="block text-sm font-medium text-gray-700 mb-2"> <label className="block text-sm font-medium text-gray-700 mb-2">
@ -99,7 +114,7 @@ export default function SupportPage() {
) : ( ) : (
<Send className="w-5 h-5" /> <Send className="w-5 h-5" />
)} )}
{isSubmitting ? 'جاري الإرسال...' : 'إرسال'} {isSubmitting ? "جاري الإرسال..." : "إرسال"}
</button> </button>
</form> </form>
</div> </div>
@ -112,7 +127,9 @@ export default function SupportPage() {
className="space-y-6" className="space-y-6"
> >
<div className="bg-white rounded-2xl shadow-sm border border-gray-200 p-6"> <div className="bg-white rounded-2xl shadow-sm border border-gray-200 p-6">
<h3 className="text-lg font-bold text-gray-900 mb-4">معلومات الاتصال</h3> <h3 className="text-lg font-bold text-gray-900 mb-4">
معلومات الاتصال
</h3>
<div className="space-y-4"> <div className="space-y-4">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="w-10 h-10 bg-blue-100 rounded-xl flex items-center justify-center shrink-0"> <div className="w-10 h-10 bg-blue-100 rounded-xl flex items-center justify-center shrink-0">
@ -120,7 +137,9 @@ export default function SupportPage() {
</div> </div>
<div> <div>
<p className="text-sm text-gray-500">البريد الإلكتروني</p> <p className="text-sm text-gray-500">البريد الإلكتروني</p>
<p className="font-medium text-gray-900">support@sweethome.com</p> <p className="font-medium text-gray-900">
support@sweethome.com
</p>
</div> </div>
</div> </div>
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
@ -129,7 +148,9 @@ export default function SupportPage() {
</div> </div>
<div> <div>
<p className="text-sm text-gray-500">رقم الهاتف</p> <p className="text-sm text-gray-500">رقم الهاتف</p>
<p className="font-medium text-gray-900" dir="ltr">+963 11 234 5678</p> <p className="font-medium text-gray-900" dir="ltr">
+963 11 234 5678
</p>
</div> </div>
</div> </div>
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
@ -145,7 +166,9 @@ export default function SupportPage() {
</div> </div>
<div className="bg-amber-50 rounded-2xl border border-amber-200 p-6"> <div className="bg-amber-50 rounded-2xl border border-amber-200 p-6">
<h3 className="text-lg font-bold text-amber-800 mb-2">ساعات العمل</h3> <h3 className="text-lg font-bold text-amber-800 mb-2">
ساعات العمل
</h3>
<div className="space-y-2 text-amber-700"> <div className="space-y-2 text-amber-700">
<div className="flex justify-between"> <div className="flex justify-between">
<span>السبت - الخميس</span> <span>السبت - الخميس</span>