yazan/car_mms
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

demo2

Browse Source
This commit is contained in:
yznahmad
2026-03-08 14:27:16 +03:00
parent 66c151653e
commit 11b58b68c3
22 changed files with 4652 additions and 204 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
app/routes/financial-reports.tsx
View File

@@ -258,17 +258,17 @@ export default function FinancialReportsPage() {
{/* Charts and Breakdowns */}
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
{/* Income by Maintenance Type */}
<div className="bg-white p-6 rounded-lg shadow">
<h2 className="text-lg font-semibold text-gray-900 mb-4">الإيرادات حسب نوع الصيانة</h2>
<div className="bg-white p-4 sm:p-6 rounded-lg shadow">
<h2 className="text-base sm:text-lg font-semibold text-gray-900 mb-4">الإيرادات حسب نوع الصيانة</h2>
<div className="space-y-3">
{incomeByType.map((item, index) => (
<div key={index} className="flex items-center justify-between">
<div className="flex-1">
<div className="flex justify-between items-center mb-1">
<span className="text-sm font-medium text-gray-700">
<span className="text-xs sm:text-sm font-medium text-gray-700">
{item.category}
</span>
<span className="text-sm text-gray-500">
<span className="text-xs sm:text-sm text-gray-500">
{item.percentage.toFixed(1)}%
</span>
</div>
@@ -279,7 +279,7 @@ export default function FinancialReportsPage() {
></div>
</div>
<div className="flex justify-between items-center mt-1">
<span className="text-sm font-semibold text-gray-900">
<span className="text-xs sm:text-sm font-semibold text-gray-900">
{formatCurrency(item.amount)}
</span>
<span className="text-xs text-gray-500">
@@ -293,17 +293,17 @@ export default function FinancialReportsPage() {
</div>
{/* Expense Breakdown */}
<div className="bg-white p-6 rounded-lg shadow">
<h2 className="text-lg font-semibold text-gray-900 mb-4">تفصيل المصروفات</h2>
<div className="bg-white p-4 sm:p-6 rounded-lg shadow">
<h2 className="text-base sm:text-lg font-semibold text-gray-900 mb-4">تفصيل المصروفات</h2>
<div className="space-y-3">
{expenseBreakdown.map((item, index) => (
<div key={index} className="flex items-center justify-between">
<div className="flex-1">
<div className="flex justify-between items-center mb-1">
<span className="text-sm font-medium text-gray-700">
<span className="text-xs sm:text-sm font-medium text-gray-700">
{item.category}
</span>
<span className="text-sm text-gray-500">
<span className="text-xs sm:text-sm text-gray-500">
{item.percentage.toFixed(1)}%
</span>
</div>
@@ -314,7 +314,7 @@ export default function FinancialReportsPage() {
></div>
</div>
<div className="flex justify-between items-center mt-1">
<span className="text-sm font-semibold text-gray-900">
<span className="text-xs sm:text-sm font-semibold text-gray-900">
{formatCurrency(item.amount)}
</span>
<span className="text-xs text-gray-500">
@@ -331,24 +331,24 @@ export default function FinancialReportsPage() {
{/* Top Customers and Monthly Data */}
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
{/* Top Customers */}
<div className="bg-white p-6 rounded-lg shadow">
<h2 className="text-lg font-semibold text-gray-900 mb-4">أفضل العملاء</h2>
<div className="bg-white p-4 sm:p-6 rounded-lg shadow">
<h2 className="text-base sm:text-lg font-semibold text-gray-900 mb-4">أفضل العملاء</h2>
<div className="space-y-3">
{topCustomers.map((customer, index) => (
<div key={customer.customerId} className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
<div className="flex items-center space-x-3 space-x-reverse">
<div className="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
<div className="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center flex-shrink-0">
<span className="text-sm font-semibold text-blue-600">
{index + 1}
</span>
</div>
<div>
<p className="font-medium text-gray-900">{customer.customerName}</p>
<p className="text-sm text-gray-500">{customer.visitCount} زيارة</p>
<div className="min-w-0 flex-1">
<p className="font-medium text-gray-900 truncate">{customer.customerName}</p>
<p className="text-xs sm:text-sm text-gray-500">{customer.visitCount} زيارة</p>
</div>
</div>
<div className="text-left">
<p className="font-semibold text-gray-900">
<div className="text-left flex-shrink-0 mr-2">
<p className="text-sm sm:text-base font-semibold text-gray-900">
{formatCurrency(customer.totalRevenue)}
</p>
</div>
@@ -358,20 +358,20 @@ export default function FinancialReportsPage() {
</div>
{/* Monthly Performance */}
<div className="bg-white p-6 rounded-lg shadow">
<h2 className="text-lg font-semibold text-gray-900 mb-4">الأداء الشهري</h2>
<div className="bg-white p-4 sm:p-6 rounded-lg shadow">
<h2 className="text-base sm:text-lg font-semibold text-gray-900 mb-4">الأداء الشهري</h2>
<div className="space-y-3 max-h-96 overflow-y-auto">
{monthlyData.slice(-6).reverse().map((month, index) => (
<div key={`${month.year}-${month.month}`} className="p-3 bg-gray-50 rounded-lg">
<div className="flex justify-between items-center mb-2">
<span className="font-medium text-gray-900">
<span className="text-sm sm:text-base font-medium text-gray-900">
{getArabicMonthName(month.month)} {month.year}
</span>
<span className={`font-semibold ${month.profit >= 0 ? 'text-green-600' : 'text-red-600'}`}>
<span className={`text-sm sm:text-base font-semibold ${month.profit >= 0 ? 'text-green-600' : 'text-red-600'}`}>
{formatCurrency(month.profit)}
</span>
</div>
<div className="grid grid-cols-2 gap-4 text-sm">
<div className="grid grid-cols-2 gap-2 sm:gap-4 text-xs sm:text-sm">
<div>
<span className="text-gray-600">الإيرادات: </span>
<span className="font-medium text-green-600">