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

add Middleware + fixed all pages and fixed add propertise

Browse Source
This commit is contained in:
hamzaobed7
2026-08-06 22:26:35 +03:00
parent 7da4bf9f2b
commit 4d1b744516
30 changed files with 3618 additions and 4345 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
app/profile/page.js
View File

@ -5,24 +5,11 @@ import { motion } from "framer-motion";
import { useRouter } from "next/navigation";
import Link from "next/link";
import { useTranslation } from "react-i18next";
import {
User,
Mail,
Phone,
MessageCircle,
Check,
X,
ArrowLeft,
Building,
Home,
Calendar,
MapPin,
Loader2,
Pencil,
} from "lucide-react";
import { User, Mail, Phone, MessageCircle, Check, X, ArrowLeft, Building, Home, Calendar, MapPin, Loader2, Pencil } from "lucide-react";
import toast, { Toaster } from "react-hot-toast";
import AuthService from "../services/AuthService";
import { getCustomerByUserId, getOwnerByUserId } from "../utils/api";
import InteractiveBackground from "../components/Animation/Background";
export default function ProfilePage() {
const { t, i18n } = useTranslation();
@ -59,30 +46,23 @@ export default function ProfilePage() {
async function fetchProfile() {
try {
const fetchFn =
userData.role === "owner" ? getOwnerByUserId : getCustomerByUserId;
const fetchFn = userData.role === "owner" ? getOwnerByUserId : getCustomerByUserId;
const profile = await fetchFn(userData.id);
if (profile) {
const profileData = {
name:
profile.fullName ||
profile.name ||
`${profile.firstName || ""} ${profile.lastName || ""}`.trim() ||
userData.name ||
"",
name: profile.fullName || profile.name || `${profile.firstName || ""} ${profile.lastName || ""}`.trim() || userData.name || "",
email: profile.email || userData.email || "",
phone:
profile.phone || profile.phoneNumber || userData.phone || "",
phone: profile.phone || profile.phoneNumber || userData.phone || "",
whatsapp: profile.whatsAppNumber || profile.whatsapp || "",
bio: profile.bio || "",
location: profile.address || profile.location || "",
joinedDate: profile.createdAt
? new Date(profile.createdAt).toLocaleDateString(i18n.language === 'ar' ? 'ar-SA' : 'en-US', {
? new Date(profile.createdAt).toLocaleDateString(i18n.language === "ar" ? "ar-SA" : "en-US", {
month: "long",
year: "numeric",
})
: new Date().toLocaleDateString(i18n.language === 'ar' ? 'ar-SA' : 'en-US', {
: new Date().toLocaleDateString(i18n.language === "ar" ? "ar-SA" : "en-US", {
month: "long",
year: "numeric",
}),
@ -109,7 +89,7 @@ export default function ProfilePage() {
whatsapp: "",
bio: "",
location: "",
joinedDate: new Date().toLocaleDateString(i18n.language === 'ar' ? 'ar-SA' : 'en-US', {
joinedDate: new Date().toLocaleDateString(i18n.language === "ar" ? "ar-SA" : "en-US", {
month: "long",
year: "numeric",
}),
@ -146,7 +126,7 @@ export default function ProfilePage() {
setFormData(updatedData);
localStorage.setItem("userProfile", JSON.stringify(updatedData));
setEditingBio(false);
toast.success(t('bio-updated-success'));
toast.success(t("bio-updated-success"));
};
const fadeInUp = {
@ -160,37 +140,25 @@ export default function ProfilePage() {
<div className="min-h-screen bg-gray-50 flex items-center justify-center">
<div className="text-center">
<Loader2 className="w-12 h-12 text-amber-500 animate-spin mx-auto mb-4" />
<p className="text-gray-600">{t('loading-profile')}</p>
<p className="text-gray-600">{t("loading-profile")}</p>
</div>
</div>
);
}
return (
<div dir={i18n.language === 'ar' ? 'rtl' : 'ltr'} className="min-h-screen bg-gray-50 py-8">
<div dir={i18n.language === "ar" ? "rtl" : "ltr"} className="min-h-screen bg-gray-50 py-8">
<Toaster position="top-center" reverseOrder={false} />
<div className="container mx-auto px-4 max-w-4xl">
<motion.div
initial={{ opacity: 0, y: -20 }}
animate={{ opacity: 1, y: 0 }}
className="flex justify-between items-center mb-6"
>
<Link
href="/"
className="flex items-center gap-2 text-gray-600 hover:text-amber-600 transition-colors"
>
<InteractiveBackground />
<div className="relative z-10 container mx-auto px-4 max-w-2xl">
<motion.div initial={{ opacity: 0, y: -20 }} animate={{ opacity: 1, y: 0 }} className="flex justify-between items-center mb-6">
<Link href="/" className="flex items-center gap-2 text-gray-600 hover:text-amber-600 transition-colors">
<ArrowLeft className="w-5 h-5" />
<span>{t('backToHome')}</span>
<span>{t("backToHome")}</span>
</Link>
</motion.div>
<motion.div
variants={fadeInUp}
initial="initial"
animate="animate"
className="bg-white rounded-3xl shadow-xl overflow-hidden"
>
<motion.div variants={fadeInUp} initial="initial" animate="animate" className="bg-white rounded-3xl shadow-xl overflow-hidden">
<div className="h-48 bg-gradient-to-r from-amber-500 to-amber-600 relative overflow-hidden">
<motion.div
className="absolute inset-0 bg-white/10"
@ -209,43 +177,34 @@ export default function ProfilePage() {
<div className="flex justify-center -mt-16 mb-6">
<div className="relative group">
<div className="w-32 h-32 rounded-full border-4 border-white bg-gradient-to-br from-amber-500 to-amber-600 flex items-center justify-center text-white text-4xl font-bold shadow-xl overflow-hidden">
{avatarPreview ? (
<img
src={avatarPreview}
alt={formData.name}
className="w-full h-full object-cover"
/>
) : (
formData.name?.charAt(0).toUpperCase() || "U"
)}
{avatarPreview ? <img src={avatarPreview} alt={formData.name} className="w-full h-full object-cover" /> : formData.name?.charAt(0).toUpperCase() || "U"}
</div>
</div>
</div>
<div className="text-center mb-6">
<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 className="flex items-center justify-center gap-2 text-gray-500 mt-2">
<MapPin className="w-4 h-4" />
<span>{formData.location || t('addressNotSpecified')}</span>
<span>{formData.location || t("addressNotSpecified")}</span>
</div>
<div className="flex items-center justify-center gap-2 text-gray-500 mt-1">
<Calendar className="w-4 h-4" />
<span> {t('member-since')} {formData.joinedDate}</span>
<span>
{" "}
{t("member-since")} {formData.joinedDate}
</span>
</div>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div className="bg-gray-50 p-4 rounded-xl group">
<div className="flex justify-between items-start mb-2">
<label className="text-sm font-medium text-gray-600">
{t('emailLabel')}
</label>
<label className="text-sm font-medium text-gray-600">{t("emailLabel")}</label>
</div>
<div className="flex items-center gap-2 text-gray-900">
<Mail className="w-5 h-5 text-gray-400" />
@ -255,42 +214,36 @@ export default function ProfilePage() {
<div className="bg-gray-50 p-4 rounded-xl group">
<div className="flex justify-between items-start mb-2">
<label className="text-sm font-medium text-gray-600">
{t('phoneLabel')}
</label>
<label className="text-sm font-medium text-gray-600">{t("phoneLabel")}</label>
</div>
<div className="flex items-center gap-2 text-gray-900">
<Phone className="w-5 h-5 text-gray-400" />
<span>{formData.phone || t('not-specified')}</span>
<span>{formData.phone || t("not-specified")}</span>
</div>
</div>
<div className="bg-gray-50 p-4 rounded-xl group">
<div className="flex justify-between items-start mb-2">
<label className="text-sm font-medium text-gray-600">
{t('whatsapp-label')}
</label>
<label className="text-sm font-medium text-gray-600">{t("whatsapp-label")}</label>
</div>
<div className="flex items-center gap-2 text-gray-900">
<MessageCircle className="w-5 h-5 text-gray-400" />
<span>{formData.whatsapp || t('not-specified')}</span>
<span>{formData.whatsapp || t("not-specified")}</span>
</div>
</div>
<div className="bg-gray-50 p-4 rounded-xl">
<label className="block text-sm font-medium text-gray-600 mb-2">
{t('account-type')}
</label>
<label className="block text-sm font-medium text-gray-600 mb-2">{t("account-type")}</label>
<div className="flex items-center gap-2">
{user?.role === "owner" ? (
<>
<Building className="w-5 h-5 text-amber-500" />
<span className="text-gray-900">{t('property-owner')}</span>
<span className="text-gray-900">{t("property-owner")}</span>
</>
) : (
<>
<Home className="w-5 h-5 text-blue-500" />
<span className="text-gray-900">{t('customer')}</span>
<span className="text-gray-900">{t("customer")}</span>
</>
)}
</div>
@ -348,17 +301,17 @@ export default function ProfilePage() {
{user?.role === "owner" && (
<div className="grid grid-cols-3 gap-4 mt-6">
<div className="bg-amber-50 p-4 rounded-xl text-center">
<div className=" p-4 rounded-xl text-center" style={{backgroundColor:"#0f172a"}} >
<div className="text-2xl font-bold text-amber-600">12</div>
<div className="text-xs text-gray-600">{t('propertiesListed')}</div>
<div className="text-xs text-gray-600">{t("propertiesListed")}</div>
</div>
<div className="bg-blue-50 p-4 rounded-xl text-center">
<div className="bg-blue-50 p-4 rounded-xl text-center"style={{backgroundColor:"#0f172a"}} >
<div className="text-2xl font-bold text-blue-600">8</div>
<div className="text-xs text-gray-600">{t('citiesCovered')}</div>
<div className="text-xs text-gray-600">{t("citiesCovered")}</div>
</div>
<div className="bg-green-50 p-4 rounded-xl text-center">
<div className="bg-green-50 p-4 rounded-xl text-center" style={{backgroundColor:"#0f172a"}}>
<div className="text-2xl font-bold text-green-600">4.8</div>
<div className="text-xs text-gray-600">{t('customerSatisfaction')}</div>
<div className="text-xs text-gray-600">{t("customerSatisfaction")}</div>
</div>
</div>
)}