bakery-admin/bakery-ia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve UI

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

18
frontend/src/components/domain/sales/SalesChart.tsx
View File

@@ -10,6 +10,7 @@ import { SalesAnalytics } from '../../../api/types/sales';
import { ProductPerformance } from '../analytics/types';
import { salesService } from '../../../api/services/sales';
import { useSalesAnalytics } from '../../../api/hooks/sales';
import { useTenantCurrency } from '../../../hooks/useTenantCurrency';
// Define missing types
export enum PeriodType {
@@ -137,6 +138,7 @@ export const SalesChart: React.FC<SalesChartProps> = ({
showExport = true,
className = ''
}) => {
const { currencySymbol } = useTenantCurrency();
// State
const [analytics, setAnalytics] = useState<ExtendedSalesAnalytics | null>(null);
const [loading, setLoading] = useState(false);
@@ -247,7 +249,7 @@ export const SalesChart: React.FC<SalesChartProps> = ({
),
datasets: [
{
label: 'Ingresos (€)',
label: `Ingresos (${currencySymbol})`,
data: analytics.daily_trends.map(trend => trend.revenue),
backgroundColor: chartType === ChartType.PIE ?
generateColors(analytics.daily_trends.length) : Colors.primary,
@@ -291,7 +293,7 @@ export const SalesChart: React.FC<SalesChartProps> = ({
),
datasets: [
{
label: 'Ticket Promedio (€)',
label: `Ticket Promedio (${currencySymbol})`,
data: analytics.daily_trends.map(trend => trend.average_order_value),
backgroundColor: chartType === ChartType.PIE ?
generateColors(analytics.daily_trends.length) : Colors.tertiary,
@@ -309,7 +311,7 @@ export const SalesChart: React.FC<SalesChartProps> = ({
labels: topProducts.map(product => product.product_name),
datasets: [
{
label: 'Ingresos por Producto (€)',
label: `Ingresos por Producto (${currencySymbol})`,
data: topProducts.map(product => product.total_revenue),
backgroundColor: generateColors(topProducts.length),
borderColor: Colors.primary,
@@ -323,7 +325,7 @@ export const SalesChart: React.FC<SalesChartProps> = ({
labels: analytics.hourly_patterns.map(pattern => `${pattern.hour}:00`),
datasets: [
{
label: 'Ventas Promedio por Hora (€)',
label: `Ventas Promedio por Hora (${currencySymbol})`,
data: analytics.hourly_patterns.map(pattern => pattern.average_sales),
backgroundColor: Colors.secondary,
borderColor: Colors.secondary,
@@ -474,7 +476,7 @@ export const SalesChart: React.FC<SalesChartProps> = ({
fontSize="12"
fill={Colors.text}
>
€{(minValue + range * (1 - ratio)).toLocaleString('es-ES', { maximumFractionDigits: 0 })}
{currencySymbol}{(minValue + range * (1 - ratio)).toLocaleString('es-ES', { maximumFractionDigits: 0 })}
</text>
</g>
);
@@ -558,7 +560,7 @@ export const SalesChart: React.FC<SalesChartProps> = ({
strokeWidth={2}
>
<title>
{chartData.labels[index]}: €{dataset.data[index].toLocaleString('es-ES', { minimumFractionDigits: 2 })}
{chartData.labels[index]}: {currencySymbol}{dataset.data[index].toLocaleString('es-ES', { minimumFractionDigits: 2 })}
</title>
</circle>
))}
@@ -751,7 +753,7 @@ export const SalesChart: React.FC<SalesChartProps> = ({
<div>
<p className="text-sm font-medium text-[var(--text-secondary)]">Ingresos Totales</p>
<p className="text-2xl font-bold text-[var(--text-primary)]">
€{summaryStats.totalRevenue.toLocaleString('es-ES', { minimumFractionDigits: 2 })}
{currencySymbol}{summaryStats.totalRevenue.toLocaleString('es-ES', { minimumFractionDigits: 2 })}
</p>
</div>
<div className={`flex items-center ${summaryStats.growthRate >= 0 ? 'text-[var(--color-success)]' : 'text-[var(--color-error)]'}`}>
@@ -777,7 +779,7 @@ export const SalesChart: React.FC<SalesChartProps> = ({
<div>
<p className="text-sm font-medium text-[var(--text-secondary)]">Ticket Promedio</p>
<p className="text-2xl font-bold text-[var(--text-primary)]">
€{summaryStats.avgOrderValue.toLocaleString('es-ES', { minimumFractionDigits: 2 })}
{currencySymbol}{summaryStats.avgOrderValue.toLocaleString('es-ES', { minimumFractionDigits: 2 })}
</p>
</div>
</Card>