hamzeh/SweetHomeWeb
1
0
Fork 0
forked from amer2004/SweetHome
Code Pull Requests Activity

Added translation to all site with edit style

Browse Source
This commit is contained in:
Rahaf
2026-07-01 15:43:58 +03:00
parent 3052209df8
commit dab5b62fb7
56 changed files with 5136 additions and 3190 deletions
Download Patch File Download Diff File Expand all files Collapse all files

334
app/settings/page.js
View File

@ -1,257 +1,3 @@
// 'use client';
// import { useState } from 'react';
// import { useRouter } from 'next/navigation';
// import Link from 'next/link';
// import { motion } from 'framer-motion';
// import {
// User,
// Shield,
// Trash2,
// LogOut,
// ChevronLeft,
// Bell,
// Lock,
// Eye,
// FileText,
// HelpCircle,
// MessageCircle,
// Loader2,
// AlertTriangle,
// X
// } from 'lucide-react';
// import toast, { Toaster } from 'react-hot-toast';
// import AuthService from '../services/AuthService';
// import { changePassword, deleteMyAccount } from '../utils/api';
// export default function SettingsPage() {
// const router = useRouter();
// const [showDeleteDialog, setShowDeleteDialog] = useState(false);
// const [deletePassword, setDeletePassword] = useState('');
// const [isDeleting, setIsDeleting] = useState(false);
// const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
// const handleSignOut = () => {
// AuthService.deleteToken();
// toast.success('تم تسجيل الخروج بنجاح');
// router.push('/');
// };
// const handleDeleteAccount = async () => {
// if (!deletePassword) {
// toast.error('الرجاء إدخال كلمة المرور');
// return;
// }
// setIsDeleting(true);
// try {
// await deleteMyAccount(deletePassword);
// AuthService.deleteToken();
// toast.success('تم حذف الحساب بنجاح');
// router.push('/');
// } catch (err) {
// toast.error(err.message || 'فشل حذف الحساب');
// } finally {
// setIsDeleting(false);
// setShowDeleteDialog(false);
// setDeletePassword('');
// }
// };
// const sections = [
// {
// title: 'الحساب',
// items: [
// { icon: User, label: 'الملف الشخصي', href: '/profile', desc: 'عرض وتعديل معلوماتك الشخصية' },
// { icon: Lock, label: 'تغيير كلمة المرور', href: '/change-password', desc: 'تحديث كلمة المرور الخاصة بك' },
// { icon: Shield, label: 'التحقق من الحساب', href: '/account-verification', desc: 'تأكيد البريد الإلكتروني ورقم الهاتف' },
// ]
// },
// {
// title: 'الإشعارات',
// items: [
// { icon: Bell, label: 'الإشعارات', href: '/notifications', desc: 'إدارة تفضيلات الإشعارات' },
// ]
// },
// {
// title: 'الدعم',
// items: [
// { icon: HelpCircle, label: 'الأسئلة الشائعة', href: '/faq', desc: 'إجابات للأسئلة المتكررة' },
// { icon: MessageCircle, label: 'تواصل معنا', href: '/support', desc: 'الحصول على المساعدة والدعم' },
// { icon: FileText, label: 'الشروط والأحكام', href: '/terms', desc: 'سياسة الاستخدام والخصوصية' },
// { icon: Eye, label: 'سياسة الخصوصية', href: '/privacy', desc: 'كيف نحمي بياناتك' },
// ]
// },
// ];
// const containerVariants = {
// hidden: { opacity: 0 },
// visible: {
// opacity: 1,
// transition: { staggerChildren: 0.08 }
// }
// };
// const itemVariants = {
// hidden: { opacity: 0, y: 20 },
// visible: { opacity: 1, y: 0 }
// };
// return (
// <div className="min-h-screen bg-gray-50 py-8" dir="rtl">
// <Toaster position="top-center" reverseOrder={false} />
// <div className="container mx-auto px-4 max-w-2xl">
// <motion.div
// initial={{ opacity: 0, y: -20 }}
// animate={{ opacity: 1, y: 0 }}
// className="flex items-center gap-3 mb-8"
// >
// <Link
// href="/profile"
// className="p-2 rounded-xl hover:bg-gray-200 transition-colors text-gray-600"
// >
// <ChevronLeft className="w-5 h-5" />
// </Link>
// <h1 className="text-2xl font-bold text-gray-900">الإعدادات</h1>
// </motion.div>
// <motion.div
// variants={containerVariants}
// initial="hidden"
// animate="visible"
// className="space-y-6"
// >
// {sections.map((section) => (
// <motion.div
// key={section.title}
// variants={itemVariants}
// className="bg-white rounded-2xl shadow-sm overflow-hidden"
// >
// <div className="px-6 py-4 border-b border-gray-100">
// <h2 className="text-lg font-semibold text-gray-800">{section.title}</h2>
// </div>
// <div className="divide-y divide-gray-50">
// {section.items.map((item) => {
// const Icon = item.icon;
// return (
// <Link
// key={item.label}
// href={item.href}
// className="flex items-center gap-4 px-6 py-4 hover:bg-gray-50 transition-colors group"
// >
// <div className="w-10 h-10 rounded-xl bg-amber-50 flex items-center justify-center flex-shrink-0 group-hover:bg-amber-100 transition-colors">
// <Icon className="w-5 h-5 text-amber-600" />
// </div>
// <div className="flex-1 min-w-0">
// <p className="text-sm font-medium text-gray-900">{item.label}</p>
// <p className="text-xs text-gray-500 truncate">{item.desc}</p>
// </div>
// <ChevronLeft className="w-4 h-4 text-gray-400" />
// </Link>
// );
// })}
// </div>
// </motion.div>
// ))}
// <motion.div variants={itemVariants} className="space-y-4">
// <div className="bg-white rounded-2xl shadow-sm overflow-hidden">
// <div className="px-6 py-4 border-b border-gray-100">
// <h2 className="text-lg font-semibold text-gray-800">الأمان</h2>
// </div>
// <div className="p-6">
// <button
// onClick={() => setShowDeleteDialog(true)}
// className="w-full flex items-center gap-3 px-4 py-3 rounded-xl border border-red-200 text-red-600 hover:bg-red-50 transition-colors"
// >
// <Trash2 className="w-5 h-5" />
// <span className="text-sm font-medium">حذف الحساب</span>
// </button>
// <p className="text-xs text-gray-500 mt-2 pr-12">
// سيتم حذف جميع بياناتك بشكل دائم ولا يمكن التراجع عن هذا الإجراء
// </p>
// </div>
// </div>
// <div className="bg-white rounded-2xl shadow-sm overflow-hidden">
// <div className="p-6">
// <button
// onClick={handleSignOut}
// className="w-full flex items-center gap-3 px-4 py-3 rounded-xl border border-gray-200 text-gray-700 hover:bg-gray-50 transition-colors"
// >
// <LogOut className="w-5 h-5" />
// <span className="text-sm font-medium">تسجيل الخروج</span>
// </button>
// </div>
// </div>
// </motion.div>
// </motion.div>
// </div>
// {showDeleteDialog && (
// <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 }}
// animate={{ opacity: 1, scale: 1 }}
// className="bg-white rounded-2xl shadow-xl max-w-md w-full p-6"
// >
// <div className="flex items-center gap-3 mb-4">
// <div className="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center">
// <AlertTriangle className="w-5 h-5 text-red-600" />
// </div>
// <div>
// <h3 className="text-lg font-semibold text-gray-900">حذف الحساب</h3>
// <p className="text-sm text-gray-500">هذا الإجراء لا يمكن التراجع عنه</p>
// </div>
// <button
// onClick={() => { setShowDeleteDialog(false); setDeletePassword(''); }}
// className="mr-auto p-1 hover:bg-gray-100 rounded-lg transition-colors"
// >
// <X className="w-5 h-5 text-gray-400" />
// </button>
// </div>
// <p className="text-sm text-gray-600 mb-4">
// أدخل كلمة المرور لتأكيد حذف حسابك نهائياً. سيتم حذف جميع بياناتك وملفاتك بشكل دائم.
// </p>
// <input
// type="password"
// value={deletePassword}
// onChange={(e) => setDeletePassword(e.target.value)}
// placeholder="كلمة المرور"
// className="w-full px-4 py-3 border border-gray-300 rounded-xl mb-4 focus:ring-2 focus:ring-red-500 focus:border-transparent outline-none"
// />
// <div className="flex gap-3">
// <button
// onClick={() => { setShowDeleteDialog(false); setDeletePassword(''); }}
// 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={handleDeleteAccount}
// disabled={isDeleting}
// className="flex-1 px-4 py-3 rounded-xl bg-red-600 text-white hover:bg-red-700 transition-colors text-sm font-medium disabled:opacity-50 flex items-center justify-center gap-2"
// >
// {isDeleting ? <Loader2 className="w-4 h-4 animate-spin" /> : <Trash2 className="w-4 h-4" />}
// {isDeleting ? 'جاري الحذف...' : 'تأكيد الحذف'}
// </button>
// </div>
// </motion.div>
// </div>
// )}
// </div>
// );
// }
'use client';
import { useState } from 'react';
@ -266,19 +12,21 @@ import {
ChevronLeft,
Bell,
Lock,
Eye,
FileText,
HelpCircle,
MessageCircle,
FileText,
Eye,
Loader2,
AlertTriangle,
X
} from 'lucide-react';
import { useTranslation } from 'react-i18next';
import toast, { Toaster } from 'react-hot-toast';
import AuthService from '../services/AuthService';
import { changePassword, deleteMyAccount, submitReport } from '../utils/api';
export default function SettingsPage() {
const { t, i18n } = useTranslation();
const router = useRouter();
const [showDeleteDialog, setShowDeleteDialog] = useState(false);
const [deletePassword, setDeletePassword] = useState('');
@ -292,24 +40,24 @@ export default function SettingsPage() {
const handleSignOut = () => {
AuthService.deleteToken();
toast.success('تم تسجيل الخروج بنجاح');
toast.success(t('logout-success'));
router.push('/');
};
const handleDeleteAccount = async () => {
if (!deletePassword) {
toast.error('الرجاء إدخال كلمة المرور');
toast.error(t('enter-password-prompt'));
return;
}
setIsDeleting(true);
try {
await deleteMyAccount(deletePassword);
AuthService.deleteToken();
toast.success('تم حذف الحساب بنجاح');
toast.success(t('delete-account-success'));
router.push('/');
} catch (err) {
console.error('Delete account error:', err);
toast.error(err.message || 'فشل حذف الحساب');
toast.error(err.message || t('delete-account-failed'));
} finally {
setIsDeleting(false);
setShowDeleteDialog(false);
@ -319,19 +67,19 @@ export default function SettingsPage() {
const handleSendContact = async () => {
if (!contactSubject.trim() || !contactBody.trim()) {
toast.error('الرجاء تعبئة العنوان والرسالة');
toast.error(t('fill-subject-and-message'));
return;
}
setIsSendingContact(true);
try {
await submitReport(contactSubject.trim(), contactBody.trim());
toast.success('تم إرسال رسالتك بنجاح');
toast.success(t('send-success'));
setShowContactDialog(false);
setContactSubject('');
setContactBody('');
} catch (err) {
toast.error(err.message || 'حدث خطأ أثناء الإرسال');
toast.error(err.message || t('send-error'));
} finally {
setIsSendingContact(false);
}
@ -339,26 +87,26 @@ export default function SettingsPage() {
const sections = [
{
title: 'الحساب',
title: t('account'),
items: [
{ icon: User, label: 'الملف الشخصي', href: '/profile', desc: 'عرض وتعديل معلوماتك الشخصية' },
{ icon: Lock, label: 'تغيير كلمة المرور', href: '/change-password', desc: 'تحديث كلمة المرور الخاصة بك' },
{ icon: Shield, label: 'التحقق من الحساب', href: '/account-verification', desc: 'تأكيد البريد الإلكتروني ورقم الهاتف' },
{ icon: User, label: t('profile'), href: '/profile', desc: t('profileDesc') },
{ icon: Lock, label: t('change-password'), href: '/change-password', desc: t('change-password-desc') },
{ icon: Shield, label: t('account-verification'), href: '/account-verification', desc: t('account-verification-desc') },
]
},
{
title: 'الإشعارات',
title: t('notifications'),
items: [
{ icon: Bell, label: 'الإشعارات', href: '/notifications', desc: 'إدارة تفضيلات الإشعارات' },
{ icon: Bell, label: t('notifications'), href: '/notifications', desc: t('notification-preferences-desc') },
]
},
{
title: 'الدعم',
title: t('support'),
items: [
{ icon: HelpCircle, label: 'الأسئلة الشائعة', href: '/faq', desc: 'إجابات للأسئلة المتكررة' },
{ icon: MessageCircle, label: 'تواصل معنا', desc: 'الحصول على المساعدة والدعم', action: () => setShowContactDialog(true) },
{ icon: FileText, label: 'الشروط والأحكام', href: '/terms', desc: 'سياسة الاستخدام والخصوصية' },
{ icon: Eye, label: 'سياسة الخصوصية', href: '/privacy', desc: 'كيف نحمي بياناتك' },
{ icon: HelpCircle, label: t('faq'), href: '/faq', desc: t('faq-desc') },
{ icon: MessageCircle, label: t('contactUs'), desc: t('contact-us-desc'), action: () => setShowContactDialog(true) },
{ icon: FileText, label: t('terms-and-conditions'), href: '/terms', desc: t('terms-desc') },
{ icon: Eye, label: t('privacy'), href: '/privacy', desc: t('privacy-desc') },
]
},
];
@ -377,7 +125,7 @@ export default function SettingsPage() {
};
return (
<div className="min-h-screen bg-gray-50 py-8 pb-28" dir="rtl">
<div className="min-h-screen bg-gray-50 py-8 pb-28" dir={i18n.language === 'ar' ? 'rtl' : 'ltr'}>
<Toaster position="top-center" reverseOrder={false} />
<div className="container mx-auto px-4 max-w-2xl">
@ -392,7 +140,7 @@ export default function SettingsPage() {
>
<ChevronLeft className="w-5 h-5" />
</Link>
<h1 className="text-2xl font-bold text-gray-900">الإعدادات</h1>
<h1 className="text-2xl font-bold text-gray-900">{t('settings')}</h1>
</motion.div>
<motion.div
@ -456,7 +204,7 @@ export default function SettingsPage() {
<motion.div variants={itemVariants} className="space-y-4">
<div className="bg-white rounded-2xl shadow-sm overflow-hidden">
<div className="px-6 py-4 border-b border-gray-100">
<h2 className="text-lg font-semibold text-gray-800">الأمان</h2>
<h2 className="text-lg font-semibold text-gray-800">{t('security')}</h2>
</div>
<div className="p-6">
<button
@ -464,10 +212,10 @@ export default function SettingsPage() {
className="w-full flex items-center gap-3 px-4 py-3 rounded-xl border border-red-200 text-red-600 hover:bg-red-50 transition-colors"
>
<Trash2 className="w-5 h-5" />
<span className="text-sm font-medium">حذف الحساب</span>
<span className="text-sm font-medium">{t('deleteAccount')}</span>
</button>
<p className="text-xs text-gray-500 mt-2 pr-12">
سيتم حذف جميع بياناتك بشكل دائم ولا يمكن التراجع عن هذا الإجراء
{t('delete-account-warning')}
</p>
</div>
</div>
@ -479,7 +227,7 @@ export default function SettingsPage() {
className="w-full flex items-center gap-3 px-4 py-3 rounded-xl border border-gray-200 text-gray-700 hover:bg-gray-50 transition-colors"
>
<LogOut className="w-5 h-5" />
<span className="text-sm font-medium">تسجيل الخروج</span>
<span className="text-sm font-medium">{t('signOut')}</span>
</button>
</div>
</div>
@ -499,8 +247,8 @@ export default function SettingsPage() {
<AlertTriangle className="w-5 h-5 text-red-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">{t('deleteDialogTitle')}</h3>
<p className="text-sm text-gray-500">{t('deleteDialogWarning')}</p>
</div>
<button
onClick={() => { setShowDeleteDialog(false); setDeletePassword(''); }}
@ -511,14 +259,14 @@ export default function SettingsPage() {
</div>
<p className="text-sm text-gray-600 mb-4">
أدخل كلمة المرور لتأكيد حذف حسابك نهائياً. سيتم حذف جميع بياناتك وملفاتك بشكل دائم.
{t('delete-account-confirm-desc')}
</p>
<input
type="password"
value={deletePassword}
onChange={(e) => setDeletePassword(e.target.value)}
placeholder="كلمة المرور"
placeholder={t('enter-password-prompt')}
className="w-full px-4 py-3 border border-gray-300 rounded-xl mb-4 focus:ring-2 focus:ring-red-500 focus:border-transparent outline-none"
/>
@ -527,7 +275,7 @@ export default function SettingsPage() {
onClick={() => { setShowDeleteDialog(false); setDeletePassword(''); }}
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"
>
إلغاء
{t('cancel')}
</button>
<button
onClick={handleDeleteAccount}
@ -535,7 +283,7 @@ export default function SettingsPage() {
className="flex-1 px-4 py-3 rounded-xl bg-red-600 text-white hover:bg-red-700 transition-colors text-sm font-medium disabled:opacity-50 flex items-center justify-center gap-2"
>
{isDeleting ? <Loader2 className="w-4 h-4 animate-spin" /> : <Trash2 className="w-4 h-4" />}
{isDeleting ? 'جاري الحذف...' : 'تأكيد الحذف'}
{isDeleting ? t('deleting') : t('confirm-delete')}
</button>
</div>
</motion.div>
@ -554,8 +302,8 @@ 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">{t('contactUs')}</h3>
<p className="text-sm text-gray-500">{t('contact-reply-prompt')}</p>
</div>
<button
onClick={() => {
@ -573,7 +321,7 @@ export default function SettingsPage() {
type="text"
value={contactSubject}
onChange={(e) => setContactSubject(e.target.value)}
placeholder="الموضوع"
placeholder={t('subject')}
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"
/>
@ -581,7 +329,7 @@ export default function SettingsPage() {
<textarea
value={contactBody}
onChange={(e) => setContactBody(e.target.value)}
placeholder="اكتب رسالتك هنا..."
placeholder={t('write-message-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"
/>
@ -595,7 +343,7 @@ export default function SettingsPage() {
}}
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"
>
إلغاء
{t('cancel')}
</button>
<button
onClick={handleSendContact}
@ -603,7 +351,7 @@ export default function SettingsPage() {
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"
>
{isSendingContact ? <Loader2 className="w-4 h-4 animate-spin" /> : <MessageCircle className="w-4 h-4" />}
{isSendingContact ? 'جاري الإرسال...' : 'إرسال'}
{isSendingContact ? t('sending') : t('send')}
</button>
</div>
</motion.div>
@ -611,4 +359,4 @@ export default function SettingsPage() {
)}
</div>
);
}
}