From 1278a2b972bf85649d0f2390277765b8a3f0bc8b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADctor=20Falc=C3=B3n?= <victoor89@gmail.com>
Date: Mon, 25 May 2026 17:00:23 +0200
Subject: [PATCH] fix(cashflow): defer period label translation (#427)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary
- translate cashflow period type labels during render
- keep Spanish labels as Mes / Trimestre / Año
- add regression coverage for period label translation

## Tests
- npx eslint resources/js/components/cashflow/period-navigation.tsx
resources/js/components/cashflow/period-navigation.test.tsx
- npx vitest run
resources/js/components/cashflow/period-navigation.test.tsx
---
 .../cashflow/period-navigation.test.tsx       | 37 +++++++++++++++++++
 .../components/cashflow/period-navigation.tsx | 10 ++---
 2 files changed, 42 insertions(+), 5 deletions(-)
 create mode 100644 resources/js/components/cashflow/period-navigation.test.tsx

diff --git a/resources/js/components/cashflow/period-navigation.test.tsx b/resources/js/components/cashflow/period-navigation.test.tsx
new file mode 100644
index 00000000..65d5092a
--- /dev/null
+++ b/resources/js/components/cashflow/period-navigation.test.tsx
@@ -0,0 +1,37 @@
+import { setTranslations } from '@/utils/i18n';
+import { render, screen } from '@testing-library/react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { PeriodNavigation } from './period-navigation';
+
+vi.mock('@inertiajs/react', () => ({
+    usePage: () => ({ props: { locale: 'es' } }),
+}));
+
+describe('PeriodNavigation', () => {
+    afterEach(() => {
+        setTranslations({});
+    });
+
+    it('translates period type labels at render time', () => {
+        setTranslations({
+            Month: 'Mes',
+            Quarter: 'Trimestre',
+            Year: 'Año',
+        });
+
+        render(
+            <PeriodNavigation
+                currentDate={new Date(2026, 0, 1)}
+                periodType="month"
+                onDateChange={() => undefined}
+                onPeriodTypeChange={() => undefined}
+            />,
+        );
+
+        expect(screen.getByRole('button', { name: 'Mes' })).toBeInTheDocument();
+        expect(
+            screen.getByRole('button', { name: 'Trimestre' }),
+        ).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: 'Año' })).toBeInTheDocument();
+    });
+});
diff --git a/resources/js/components/cashflow/period-navigation.tsx b/resources/js/components/cashflow/period-navigation.tsx
index a9ee3241..1567dc0d 100644
--- a/resources/js/components/cashflow/period-navigation.tsx
+++ b/resources/js/components/cashflow/period-navigation.tsx
@@ -31,11 +31,11 @@ interface PeriodNavigationProps {
 
 const periodTypeOptions: Array<{
     value: CashflowPeriodType;
-    label: string;
+    labelKey: string;
 }> = [
-    { value: 'month', label: __('Month') },
-    { value: 'quarter', label: __('Quarter') },
-    { value: 'year', label: __('Year') },
+    { value: 'month', labelKey: 'Month' },
+    { value: 'quarter', labelKey: 'Quarter' },
+    { value: 'year', labelKey: 'Year' },
 ];
 
 export function PeriodNavigation({
@@ -77,7 +77,7 @@ export function PeriodNavigation({
                                 'border-primary bg-primary text-primary-foreground',
                         )}
                     >
-                        {option.label}
+                        {__(option.labelKey)}
                     </Button>
                 ))}
             </ButtonGroup>