fixd larg lines in HomePage , add cookies rather than localStorage,make canvas background Login page
This commit is contained in:
hamzaobed7
@ -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>
|
||||
|
||||
Reference in New Issue
Block a user