60 lines
3.4 KiB
JavaScript
60 lines
3.4 KiB
JavaScript
import React from 'react';
|
|
import { MoreVertical } from 'lucide-react';
|
|
|
|
export default function ProfitTable({ data = [] }) {
|
|
const formatCurrency = (val) => {
|
|
return new Intl.NumberFormat('en-AE', { style: 'currency', currency: 'AED' }).format(val);
|
|
};
|
|
|
|
return (
|
|
<div className="bg-white rounded-[2rem] p-8 border border-gray-100 shadow-sm">
|
|
<div className="flex items-center justify-between mb-8">
|
|
<h3 className="text-xl font-bold text-gray-900">Profit & Loss Trend (Monthly)</h3>
|
|
<button className="text-gray-400 hover:text-gray-900 transition-colors">
|
|
<MoreVertical size={20} />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full">
|
|
<thead>
|
|
<tr className="text-left border-b border-gray-50">
|
|
<th className="pb-4 text-[10px] uppercase font-bold text-gray-400 tracking-wider">Month</th>
|
|
<th className="pb-4 text-[10px] uppercase font-bold text-gray-400 tracking-wider">Income</th>
|
|
<th className="pb-4 text-[10px] uppercase font-bold text-gray-400 tracking-wider">Expense</th>
|
|
<th className="pb-4 text-[10px] uppercase font-bold text-gray-400 tracking-wider">Profit</th>
|
|
<th className="pb-4 text-[10px] uppercase font-bold text-gray-400 tracking-wider">Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-gray-50">
|
|
{data.length === 0 && (
|
|
<tr>
|
|
<td colSpan="5" className="py-8 text-center text-sm font-medium text-gray-400 italic">No trend data available for the selected period.</td>
|
|
</tr>
|
|
)}
|
|
{data.map((row, index) => (
|
|
<tr key={index} className="group hover:bg-gray-50/50 transition-all">
|
|
<td className="py-4 text-sm font-medium text-gray-500">{row.month}</td>
|
|
<td className="py-4 text-sm font-bold text-emerald-500">{formatCurrency(row.income)}</td>
|
|
<td className="py-4 text-sm font-bold text-rose-500">{formatCurrency(row.expense)}</td>
|
|
<td className={`py-4 text-sm font-bold ${row.profit >= 0 ? 'text-blue-500' : 'text-rose-500'}`}>
|
|
{formatCurrency(row.profit)}
|
|
</td>
|
|
<td className="py-4">
|
|
<span className={`px-3 py-1 text-[10px] font-bold uppercase tracking-wider rounded-lg border ${
|
|
row.status === 'Profit'
|
|
? 'bg-emerald-50 text-emerald-600 border-emerald-100'
|
|
: 'bg-rose-50 text-rose-600 border-rose-100'
|
|
}`}>
|
|
{row.status}
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|