fixd larg lines in HomePage , add cookies rather than localStorage,make canvas background Login page

app/owner/account-book/page.js

@@ -1,32 +1,22 @@
-'use client';
+"use client";
 
-import { useState, useEffect } from 'react';
-import { motion } from 'framer-motion';
-import { useTranslation } from 'react-i18next';
-import {
-  DollarSign,
-  TrendingUp,
-  Calendar,
-  Loader2,
-  Star,
-} from 'lucide-react';
-import toast, { Toaster } from 'react-hot-toast';
-import AuthService from '@/app/services/AuthService';
-import { getOwnerStatistics } from '@/app/utils/api';
+import { useState, useEffect } from "react";
+import { motion } from "framer-motion";
+import { useTranslation } from "react-i18next";
+import { DollarSign, TrendingUp, Calendar, Loader2, Star } from "lucide-react";
+import toast, { Toaster } from "react-hot-toast";
+import AuthService from "@/app/services/AuthService";
+import { getOwnerStatistics } from "@/app/utils/api";
 
 const StatCard = ({ title, value, icon: Icon, color, subtitle, isNA }) => (
-  <motion.div
-    initial={{ opacity: 0, y: 20 }}
-    animate={{ opacity: 1, y: 0 }}
-    className="bg-white rounded-2xl shadow-sm border border-gray-200 p-6 hover:shadow-md transition-all"
-  >
+  <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} className="bg-white rounded-2xl shadow-sm border border-gray-200 p-6 hover:shadow-md transition-all">
     <div className="flex items-center justify-between mb-4">
       <div className={`w-12 h-12 ${color} rounded-xl flex items-center justify-center`}>
         <Icon className="w-6 h-6 text-white" />
       </div>
     </div>
     <h3 className="text-sm text-gray-500 mb-1">{title}</h3>
-    <div className="text-2xl font-bold text-gray-900">{isNA ? 'N/A' : value}</div>
+    <div className="text-2xl font-bold text-gray-900">{isNA ? "N/A" : value}</div>
     {subtitle && <p className="text-xs text-gray-400 mt-1">{subtitle}</p>}
   </motion.div>
 );
@@ -65,156 +55,93 @@ export default function OwnerAccountBookPage() {
       });
     }
 
- async function fetchData() {
-  try {
-    const data = await getOwnerStatistics();
+    async function fetchData() {
+      try {
+        const data = await getOwnerStatistics();
 
-    if (data) {
-      setStats({
-        totalRevenue: data.totalRevenue ?? null,
-        totalReservations: data.totalReservations ?? null,
-        activeProperties: data.activeProperties ?? null,
+        if (data) {
+          setStats({
+            totalRevenue: data.totalRevenue ?? null,
+            totalReservations: data.totalReservations ?? null,
+            activeProperties: data.activeProperties ?? null,
 
-       
-        financialRevenue:
-          data.financialRevenue ?? data.totalRevenue ?? null,
+            financialRevenue: data.financialRevenue ?? data.totalRevenue ?? null,
 
-        financialCommission: data.financialCommission ?? null,
-        financialBalance: data.financialBalance ?? null,
-        directRevenue: data.directRevenue ?? null,
-        directCommission: data.directCommission ?? null,
-        directBalance: data.directBalance ?? null,
-        directRating: data.directRating ?? null,
-        directPostponements: data.directPostponements ?? null,
-      });
+            financialCommission: data.financialCommission ?? null,
+            financialBalance: data.financialBalance ?? null,
+            directRevenue: data.directRevenue ?? null,
+            directCommission: data.directCommission ?? null,
+            directBalance: data.directBalance ?? null,
+            directRating: data.directRating ?? null,
+            directPostponements: data.directPostponements ?? null,
+          });
+        }
+      } catch {
+        toast.error(t("accountBook.loadError"));
+      } finally {
+        setIsLoading(false);
+      }
     }
-  } catch {
-    toast.error(t('accountBook.loadError'));
-  } finally {
-    setIsLoading(false);
-  }
-}
     fetchData();
   }, []);
 
   const formatCurrency = (amount) => {
     const num = Number(amount);
-    if (isNaN(num)) return 'N/A';
-    return num.toLocaleString() + ' ' + t('currency-syp-suffix');
+    if (isNaN(num)) return "N/A";
+    return num.toLocaleString() + " " + t("currency-syp-suffix");
   };
 
   const formatNumber = (val) => {
     const num = Number(val);
-    if (isNaN(num)) return 'N/A';
+    if (isNaN(num)) return "N/A";
     return num.toLocaleString();
   };
 
   const formatRating = (val) => {
     const num = Number(val);
-    if (isNaN(num)) return 'N/A';
+    if (isNaN(num)) return "N/A";
     return num.toFixed(1);
   };
 
-  const isNA = (val) => val === null || val === undefined || val === '';
+  const isNA = (val) => val === null || val === undefined || val === "";
 
   if (isLoading) {
     return (
       <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('accountBook.loading')}</p>
+          <p className="text-gray-600">{t("accountBook.loading")}</p>
         </div>
       </div>
     );
   }
 
   return (
-    <div className="min-h-screen bg-gray-50 py-8" dir={i18n.language === 'ar' ? 'rtl' : 'ltr'}>
+    <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="mb-8"
-        >
-          <h1 className="text-3xl font-bold text-gray-900">{t('accountBook')}</h1>
-          <p className="text-gray-600">{t('financialRecords')}</p>
+        <motion.div initial={{ opacity: 0, y: -20 }} animate={{ opacity: 1, y: 0 }} className="mb-8">
+          <h1 className="text-3xl font-bold text-gray-900">{t("accountBook")}</h1>
+          <p className="text-gray-600">{t("financialRecords")}</p>
         </motion.div>
 
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          className="mb-8"
-        >
-          <h2 className="text-xl font-bold text-gray-900 mb-4">{t('accountBook.ownerFinancialOverview')}</h2>
+        <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} className="mb-8">
+          <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={t('accountBook.revenue')}
-              value={formatCurrency(stats.financialRevenue)}
-              icon={TrendingUp}
-              color="bg-emerald-500"
-              isNA={isNA(stats.financialRevenue)}
-            />
-            <StatCard
-              title={t('accountBook.commission')}
-              value={formatCurrency(stats.financialCommission)}
-              icon={DollarSign}
-              color="bg-orange-500"
-              isNA={isNA(stats.financialCommission)}
-            />
-            <StatCard
-              title={t('accountBook.remainingBalance')}
-              value={formatCurrency(stats.financialBalance)}
-              icon={DollarSign}
-              color="bg-blue-500"
-              isNA={isNA(stats.financialBalance)}
-            />
+            <StatCard title={t("accountBook.revenue")} value={formatCurrency(stats.financialRevenue)} icon={TrendingUp} color="bg-emerald-500" isNA={isNA(stats.financialRevenue)} />
+            <StatCard title={t("accountBook.commission")} value={formatCurrency(stats.financialCommission)} icon={DollarSign} color="bg-orange-500" isNA={isNA(stats.financialCommission)} />
+            <StatCard title={t("accountBook.remainingBalance")} value={formatCurrency(stats.financialBalance)} icon={DollarSign} color="bg-blue-500" isNA={isNA(stats.financialBalance)} />
           </div>
         </motion.div>
 
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ delay: 0.1 }}
-          className="mb-8"
-        >
-          <h2 className="text-xl font-bold text-gray-900 mb-4">{t('accountBook.directPropertyStats')}</h2>
+        <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.1 }} className="mb-8">
+          <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={t('accountBook.revenue')}
-              value={formatCurrency(stats.directRevenue)}
-              icon={TrendingUp}
-              color="bg-emerald-500"
-              isNA={isNA(stats.directRevenue)}
-            />
-            <StatCard
-              title={t('accountBook.commission')}
-              value={formatCurrency(stats.directCommission)}
-              icon={DollarSign}
-              color="bg-orange-500"
-              isNA={isNA(stats.directCommission)}
-            />
-            <StatCard
-              title={t('accountBook.remainingBalance')}
-              value={formatCurrency(stats.directBalance)}
-              icon={DollarSign}
-              color="bg-blue-500"
-              isNA={isNA(stats.directBalance)}
-            />
-            <StatCard
-              title={t('accountBook.overallRating')}
-              value={formatRating(stats.directRating)}
-              icon={Star}
-              color="bg-purple-500"
-              isNA={isNA(stats.directRating)}
-            />
-            <StatCard
-              title={t('accountBook.postponements')}
-              value={formatNumber(stats.directPostponements)}
-              icon={Calendar}
-              color="bg-red-500"
-              isNA={isNA(stats.directPostponements)}
-            />
+            <StatCard title={t("accountBook.revenue")} value={formatCurrency(stats.directRevenue)} icon={TrendingUp} color="bg-emerald-500" isNA={isNA(stats.directRevenue)} />
+            <StatCard title={t("accountBook.commission")} value={formatCurrency(stats.directCommission)} icon={DollarSign} color="bg-orange-500" isNA={isNA(stats.directCommission)} />
+            <StatCard title={t("accountBook.remainingBalance")} value={formatCurrency(stats.directBalance)} icon={DollarSign} color="bg-blue-500" isNA={isNA(stats.directBalance)} />
+            <StatCard title={t("accountBook.overallRating")} value={formatRating(stats.directRating)} icon={Star} color="bg-purple-500" isNA={isNA(stats.directRating)} />
+            <StatCard title={t("accountBook.postponements")} value={formatNumber(stats.directPostponements)} icon={Calendar} color="bg-red-500" isNA={isNA(stats.directPostponements)} />
           </div>
         </motion.div>
       </div>

app/owner/bookings/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/calendar/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/profits/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>
-  );
-}