Added translation to all site with edit style

app/owner/account-book/page.js

@@ -2,14 +2,12 @@
 
 import { useState, useEffect } from 'react';
 import { motion } from 'framer-motion';
-import { useRouter } from 'next/navigation';
+import { useTranslation } from 'react-i18next';
 import {
   DollarSign,
   TrendingUp,
   Calendar,
-  Building,
   Loader2,
-  ArrowLeft,
   Star,
 } from 'lucide-react';
 import toast, { Toaster } from 'react-hot-toast';
@@ -34,7 +32,7 @@ const StatCard = ({ title, value, icon: Icon, color, subtitle, isNA }) => (
 );
 
 export default function OwnerAccountBookPage() {
-  const router = useRouter();
+  const { t, i18n } = useTranslation();
   const [user, setUser] = useState(null);
   const [isLoading, setIsLoading] = useState(true);
   const [stats, setStats] = useState({
@@ -53,11 +51,9 @@ export default function OwnerAccountBookPage() {
 
   useEffect(() => {
     if (AuthService.isGuest()) {
-      router.push('/auth/choose-role');
       return;
     }
     if (!AuthService.isOwner()) {
-      router.push('/');
       return;
     }
 
@@ -93,18 +89,18 @@ export default function OwnerAccountBookPage() {
       });
     }
   } catch {
-    toast.error('تعذر تحميل إحصائيات الحساب');
+    toast.error(t('accountBook.loadError'));
   } finally {
     setIsLoading(false);
   }
 }
     fetchData();
-  }, [router]);
+  }, []);
 
   const formatCurrency = (amount) => {
     const num = Number(amount);
     if (isNaN(num)) return 'N/A';
-    return num.toLocaleString() + ' ل.س';
+    return num.toLocaleString() + ' ' + t('currency-syp-suffix');
   };
 
   const formatNumber = (val) => {
@@ -126,32 +122,23 @@ export default function OwnerAccountBookPage() {
       <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">جاري تحميل بيانات الحساب...</p>
+          <p className="text-gray-600">{t('accountBook.loading')}</p>
         </div>
       </div>
     );
   }
 
   return (
-    <div className="min-h-screen bg-gray-50 py-8" dir="rtl">
+    <div className="min-h-screen bg-gray-50 py-8" dir={i18n.language === 'ar' ? 'rtl' : 'ltr'}>
       <Toaster position="top-center" reverseOrder={false} />
       <div className="container mx-auto px-4 max-w-7xl">
         <motion.div
           initial={{ opacity: 0, y: -20 }}
           animate={{ opacity: 1, y: 0 }}
-          className="flex flex-col md:flex-row justify-between items-start md:items-center mb-8 gap-4"
+          className="mb-8"
         >
-          <div className="flex items-center gap-4">
-            <button
-              onClick={() => router.back()}
-              className="p-2 hover:bg-gray-200 rounded-xl transition-colors"
-            >
-              <ArrowLeft className="w-5 h-5 text-gray-600" />
-            </button>
-            <div>
-              <h1 className="text-3xl font-bold text-gray-900">دفتر الحسابات</h1>
-            </div>
-          </div>
+          <h1 className="text-3xl font-bold text-gray-900">{t('accountBook')}</h1>
+          <p className="text-gray-600">{t('financialRecords')}</p>
         </motion.div>
 
         <motion.div
@@ -159,24 +146,24 @@ export default function OwnerAccountBookPage() {
           animate={{ opacity: 1, y: 0 }}
           className="mb-8"
         >
-          <h2 className="text-xl font-bold text-gray-900 mb-4">نظرة مالية للمالك</h2>
+          <h2 className="text-xl font-bold text-gray-900 mb-4">{t('accountBook.ownerFinancialOverview')}</h2>
           <div className="grid grid-cols-1 sm:grid-cols-3 gap-6">
             <StatCard
-              title="الإيرادات"
+              title={t('accountBook.revenue')}
               value={formatCurrency(stats.financialRevenue)}
               icon={TrendingUp}
               color="bg-emerald-500"
               isNA={isNA(stats.financialRevenue)}
             />
             <StatCard
-              title="العمولة"
+              title={t('accountBook.commission')}
               value={formatCurrency(stats.financialCommission)}
               icon={DollarSign}
               color="bg-orange-500"
               isNA={isNA(stats.financialCommission)}
             />
             <StatCard
-              title="الرصيد المتبقي"
+              title={t('accountBook.remainingBalance')}
               value={formatCurrency(stats.financialBalance)}
               icon={DollarSign}
               color="bg-blue-500"
@@ -191,38 +178,38 @@ export default function OwnerAccountBookPage() {
           transition={{ delay: 0.1 }}
           className="mb-8"
         >
-          <h2 className="text-xl font-bold text-gray-900 mb-4">إحصائيات العقارات المباشرة</h2>
+          <h2 className="text-xl font-bold text-gray-900 mb-4">{t('accountBook.directPropertyStats')}</h2>
           <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-6">
             <StatCard
-              title="الإيرادات"
+              title={t('accountBook.revenue')}
               value={formatCurrency(stats.directRevenue)}
               icon={TrendingUp}
               color="bg-emerald-500"
               isNA={isNA(stats.directRevenue)}
             />
             <StatCard
-              title="العمولة"
+              title={t('accountBook.commission')}
               value={formatCurrency(stats.directCommission)}
               icon={DollarSign}
               color="bg-orange-500"
               isNA={isNA(stats.directCommission)}
             />
             <StatCard
-              title="الرصيد المتبقي"
+              title={t('accountBook.remainingBalance')}
               value={formatCurrency(stats.directBalance)}
               icon={DollarSign}
               color="bg-blue-500"
               isNA={isNA(stats.directBalance)}
             />
             <StatCard
-              title="التقييم العام"
+              title={t('accountBook.overallRating')}
               value={formatRating(stats.directRating)}
               icon={Star}
               color="bg-purple-500"
               isNA={isNA(stats.directRating)}
             />
             <StatCard
-              title="مرات التأجيل"
+              title={t('accountBook.postponements')}
               value={formatNumber(stats.directPostponements)}
               icon={Calendar}
               color="bg-red-500"