@pagamio/frontend-commons-lib
Version:
Pagamio library for Frontend reusable components like the form engine and table container
32 lines (31 loc) • 2.41 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import Card from '../components/CardWrapper';
import ChartWrapper from '../components/ChartWrapper';
import { useChartData } from '../hooks/useChartData';
import { DashboardPaths } from '../utils';
// Format number with thousands separator
const formatNumber = (num) => {
return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
};
// Format currency in ZAR
const formatCurrency = (amount) => {
return `R ${formatNumber(amount)}`;
};
const ItemPerformanceCard = ({ title, query, url = DashboardPaths.QUERY, itemNameKey, amountValueKey, unitsValueKey, metricDetailData, }) => {
const { data: metricData = [], error, isEmpty, loading, refresh } = useChartData(url, query);
const getRankBackground = (rank) => {
if (rank === 1)
return 'bg-core-add';
if (rank === 2)
return 'bg-blue-400';
return 'bg-amber-600';
};
return (_jsx(Card, { title: title, children: _jsx(ChartWrapper, { loading: loading, error: error, isEmpty: isEmpty, onRetry: refresh, children: _jsx("div", { className: "mt-[19px]", children: _jsx("div", { className: "space-y-4", children: metricData.map((item, index) => {
const itemIndex = index + 1;
return (_jsxs("div", { className: "flex flex-col sm:flex-row items-start sm:items-center gap-4 p-4 hover:bg-gray-50 rounded-lg transition-colors duration-200", children: [_jsx("div", { className: "flex-shrink-0", children: _jsx("span", { className: `
w-8 h-8 rounded-full flex items-center justify-center text-white font-semibold
${getRankBackground(itemIndex)}
`, children: itemIndex }) }), _jsxs("div", { className: "flex-grow", children: [_jsx("h3", { className: "font-medium text-gray-900 mb-1", children: item[itemNameKey] }), _jsxs("div", { className: "flex justify-between text-sm", children: [_jsxs("div", { className: "text-gray-600", children: ["Revenue:", ' ', _jsx("span", { className: "font-semibold text-gray-900", children: formatCurrency(item[amountValueKey]) })] }), _jsxs("div", { className: "text-gray-600", children: ["Units: ", _jsx("span", { className: "font-semibold text-gray-900", children: formatNumber(item[unitsValueKey]) })] })] })] })] }, item.name));
}) }) }) }) }));
};
export default ItemPerformanceCard;