Improve UI

This commit is contained in:
Urtzi Alfaro
2025-12-30 14:40:20 +01:00
parent e494ea8635
commit c07df124fb
71 changed files with 647 additions and 265 deletions

View File

@@ -4,10 +4,11 @@ import { ChartWidget } from './ChartWidget';
import { ReportsTable } from './ReportsTable';
import { FilterPanel } from './FilterPanel';
import { ExportOptions } from './ExportOptions';
import type {
BakeryMetrics,
AnalyticsReport,
ChartWidget as ChartWidgetType,
import { useTenantCurrency } from '../../../hooks/useTenantCurrency';
import type {
BakeryMetrics,
AnalyticsReport,
ChartWidget as ChartWidgetType,
FilterPanel as FilterPanelType,
AppliedFilter,
TimeRange,
@@ -45,6 +46,7 @@ export const AnalyticsDashboard: React.FC<AnalyticsDashboardProps> = ({
onMetricsLoad,
onExport,
}) => {
const { currencySymbol } = useTenantCurrency();
const [selectedTimeRange, setSelectedTimeRange] = useState<TimeRange>(initialTimeRange);
const [customDateRange, setCustomDateRange] = useState<{ from: Date; to: Date } | null>(null);
const [bakeryMetrics, setBakeryMetrics] = useState<BakeryMetrics | null>(null);
@@ -319,7 +321,7 @@ export const AnalyticsDashboard: React.FC<AnalyticsDashboardProps> = ({
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
{renderKPICard(
'Ingresos Totales',
`${bakeryMetrics.sales.total_revenue.toLocaleString()}`,
`${currencySymbol}${bakeryMetrics.sales.total_revenue.toLocaleString()}`,
undefined,
bakeryMetrics.sales.revenue_growth,
'💰',
@@ -328,7 +330,7 @@ export const AnalyticsDashboard: React.FC<AnalyticsDashboardProps> = ({
{renderKPICard(
'Pedidos',
bakeryMetrics.sales.total_orders.toLocaleString(),
`Ticket medio: ${bakeryMetrics.sales.average_order_value.toFixed(2)}`,
`Ticket medio: ${currencySymbol}${bakeryMetrics.sales.average_order_value.toFixed(2)}`,
bakeryMetrics.sales.order_growth,
'📦',
'text-[var(--color-info)]'
@@ -336,7 +338,7 @@ export const AnalyticsDashboard: React.FC<AnalyticsDashboardProps> = ({
{renderKPICard(
'Margen de Beneficio',
`${bakeryMetrics.financial.profit_margin.toFixed(1)}%`,
`Beneficio: ${bakeryMetrics.financial.net_profit.toLocaleString()}`,
`Beneficio: ${currencySymbol}${bakeryMetrics.financial.net_profit.toLocaleString()}`,
undefined,
'📈',
'text-purple-600'
@@ -366,7 +368,7 @@ export const AnalyticsDashboard: React.FC<AnalyticsDashboardProps> = ({
</div>
<div className="text-right">
<p className="font-semibold text-[var(--color-success)]">
{channel.revenue.toLocaleString()}
{currencySymbol}{channel.revenue.toLocaleString()}
</p>
<p className="text-sm text-[var(--text-secondary)]">
Conv. {channel.conversion_rate.toFixed(1)}%
@@ -390,7 +392,7 @@ export const AnalyticsDashboard: React.FC<AnalyticsDashboardProps> = ({
</div>
<div className="text-right">
<p className="font-semibold text-[var(--color-success)]">
{product.revenue.toLocaleString()}
{currencySymbol}{product.revenue.toLocaleString()}
</p>
<p className="text-sm text-[var(--text-secondary)]">
Margen {product.profit_margin.toFixed(1)}%
@@ -444,7 +446,7 @@ export const AnalyticsDashboard: React.FC<AnalyticsDashboardProps> = ({
</div>
<div className="text-center">
<p className="text-2xl font-bold text-pink-600">
{bakeryMetrics.customer.customer_lifetime_value.toFixed(0)}
{currencySymbol}{bakeryMetrics.customer.customer_lifetime_value.toFixed(0)}
</p>
<p className="text-sm text-[var(--text-secondary)]">Valor Cliente</p>
</div>