ADM-009: Tablas Fiscales (IVA + IIBB) — append-only versioned ref data #22
185
src/web/src/features/fiscal/iva/pages/TiposDeIvaPage.tsx
Normal file
185
src/web/src/features/fiscal/iva/pages/TiposDeIvaPage.tsx
Normal file
@@ -0,0 +1,185 @@
|
|||||||
|
// T600.8 — TiposDeIvaPage
|
||||||
|
// Página principal de gestión de Tipos de IVA
|
||||||
|
import { useState, useCallback } from 'react'
|
||||||
|
import { TriangleAlert, PlusCircle } from 'lucide-react'
|
||||||
|
import { Button } from '@/components/ui/button'
|
||||||
|
import { Input } from '@/components/ui/input'
|
||||||
|
import { Skeleton } from '@/components/ui/skeleton'
|
||||||
|
import { TipoDeIvaTable } from '../components/TipoDeIvaTable'
|
||||||
|
import { TipoDeIvaFormModal } from '../components/TipoDeIvaFormModal'
|
||||||
|
import { NuevaVigenciaModal } from '../components/NuevaVigenciaModal'
|
||||||
|
import { useTiposDeIvaList } from '../hooks/useTiposDeIva'
|
||||||
|
import type { TipoDeIva, TipoDeIvaFilter } from '../types/tipoDeIva.types'
|
||||||
|
import { Button as Btn } from '@/components/ui/button'
|
||||||
|
|
||||||
|
export function TiposDeIvaPage() {
|
||||||
|
const [page, setPage] = useState(1)
|
||||||
|
const [codigoFilter, setCodigoFilter] = useState('')
|
||||||
|
const [activoFilter, setActivoFilter] = useState<boolean | undefined>(undefined)
|
||||||
|
|
||||||
|
// Estado de modales
|
||||||
|
const [editItem, setEditItem] = useState<TipoDeIva | null>(null)
|
||||||
|
const [editOpen, setEditOpen] = useState(false)
|
||||||
|
const [nuevaVigenciaItem, setNuevaVigenciaItem] = useState<TipoDeIva | null>(null)
|
||||||
|
const [nuevaVigenciaOpen, setNuevaVigenciaOpen] = useState(false)
|
||||||
|
|
||||||
|
const filters: TipoDeIvaFilter = {
|
||||||
|
page,
|
||||||
|
pageSize: 20,
|
||||||
|
...(codigoFilter ? { codigo: codigoFilter } : {}),
|
||||||
|
...(activoFilter !== undefined ? { activo: activoFilter } : {}),
|
||||||
|
}
|
||||||
|
|
||||||
|
const { data, isLoading } = useTiposDeIvaList(filters)
|
||||||
|
|
||||||
|
const handleEdit = useCallback((row: TipoDeIva) => {
|
||||||
|
setEditItem(row)
|
||||||
|
setEditOpen(true)
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
const handleNuevaVersion = useCallback((row: TipoDeIva) => {
|
||||||
|
setNuevaVigenciaItem(row)
|
||||||
|
setNuevaVigenciaOpen(true)
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
const totalPages = data ? Math.ceil(data.total / (data.pageSize || 20)) : 1
|
||||||
|
const hasPrev = page > 1
|
||||||
|
const hasNext = page < totalPages
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
{/* Banner de advertencia global — visible al montar [REQ-UI-005] */}
|
||||||
|
<div
|
||||||
|
className="flex items-start gap-3 rounded-md border px-4 py-3 text-sm"
|
||||||
|
role="alert"
|
||||||
|
style={{
|
||||||
|
backgroundColor: 'var(--warning-bg)',
|
||||||
|
borderColor: 'var(--warning-border)',
|
||||||
|
color: 'var(--warning-foreground)',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<TriangleAlert className="h-4 w-4 mt-0.5 shrink-0" style={{ color: 'var(--warning)' }} />
|
||||||
|
<span>
|
||||||
|
Los cambios de alícuota afectan presupuestos en curso. Usá{' '}
|
||||||
|
<strong>Nueva vigencia</strong> para versionar cambios de porcentaje.
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Header con título y botón crear */}
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<h1 className="text-xl font-semibold">Tipos de IVA</h1>
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
onClick={() => {
|
||||||
|
setEditItem(null)
|
||||||
|
setEditOpen(true)
|
||||||
|
}}
|
||||||
|
aria-label="crear nuevo"
|
||||||
|
>
|
||||||
|
<PlusCircle className="h-4 w-4 mr-2" />
|
||||||
|
Crear nuevo
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Filtros */}
|
||||||
|
<div className="flex items-center gap-3 flex-wrap">
|
||||||
|
<Input
|
||||||
|
placeholder="Filtrar por código..."
|
||||||
|
value={codigoFilter}
|
||||||
|
onChange={(e) => {
|
||||||
|
setCodigoFilter(e.target.value)
|
||||||
|
setPage(1)
|
||||||
|
}}
|
||||||
|
className="max-w-xs"
|
||||||
|
aria-label="Filtrar por código"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span className="text-sm text-muted-foreground">Estado:</span>
|
||||||
|
<Button
|
||||||
|
variant={activoFilter === undefined ? 'secondary' : 'ghost'}
|
||||||
|
size="sm"
|
||||||
|
onClick={() => { setActivoFilter(undefined); setPage(1) }}
|
||||||
|
>
|
||||||
|
Todos
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant={activoFilter === true ? 'secondary' : 'ghost'}
|
||||||
|
size="sm"
|
||||||
|
onClick={() => { setActivoFilter(true); setPage(1) }}
|
||||||
|
>
|
||||||
|
Activos
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant={activoFilter === false ? 'secondary' : 'ghost'}
|
||||||
|
size="sm"
|
||||||
|
onClick={() => { setActivoFilter(false); setPage(1) }}
|
||||||
|
>
|
||||||
|
Inactivos
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Tabla */}
|
||||||
|
{isLoading ? (
|
||||||
|
<div className="space-y-2">
|
||||||
|
{Array.from({ length: 5 }).map((_, i) => (
|
||||||
|
<Skeleton key={i} className="h-12 w-full rounded-md" />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<TipoDeIvaTable
|
||||||
|
rows={data?.items ?? []}
|
||||||
|
onEdit={handleEdit}
|
||||||
|
onNuevaVersion={handleNuevaVersion}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Paginación */}
|
||||||
|
<div className="flex items-center justify-between pt-2">
|
||||||
|
<span className="text-sm text-muted-foreground">
|
||||||
|
{data ? `${data.total} tipo${data.total !== 1 ? 's' : ''} de IVA` : ''}
|
||||||
|
</span>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<Btn
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
disabled={!hasPrev}
|
||||||
|
onClick={() => setPage((p) => p - 1)}
|
||||||
|
aria-label="Anterior"
|
||||||
|
>
|
||||||
|
Anterior
|
||||||
|
</Btn>
|
||||||
|
<span className="flex items-center px-2 text-sm text-muted-foreground">
|
||||||
|
{page} / {totalPages}
|
||||||
|
</span>
|
||||||
|
<Btn
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
disabled={!hasNext}
|
||||||
|
onClick={() => setPage((p) => p + 1)}
|
||||||
|
aria-label="Siguiente"
|
||||||
|
>
|
||||||
|
Siguiente
|
||||||
|
</Btn>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Modal Crear/Editar */}
|
||||||
|
<TipoDeIvaFormModal
|
||||||
|
open={editOpen}
|
||||||
|
item={editItem}
|
||||||
|
onClose={() => setEditOpen(false)}
|
||||||
|
onSuccess={() => setEditOpen(false)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Modal Nueva Vigencia */}
|
||||||
|
<NuevaVigenciaModal
|
||||||
|
open={nuevaVigenciaOpen}
|
||||||
|
item={nuevaVigenciaItem}
|
||||||
|
onClose={() => setNuevaVigenciaOpen(false)}
|
||||||
|
onSuccess={() => setNuevaVigenciaOpen(false)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
196
src/web/src/tests/features/fiscal/iva/TiposDeIvaPage.test.tsx
Normal file
196
src/web/src/tests/features/fiscal/iva/TiposDeIvaPage.test.tsx
Normal file
@@ -0,0 +1,196 @@
|
|||||||
|
// T600.8 + T600.10 — TDD: TiposDeIvaPage
|
||||||
|
// Tests: banner visible al montar + modales correctos + 409 toast
|
||||||
|
import { describe, it, expect, beforeAll, afterAll, afterEach, vi } from 'vitest'
|
||||||
|
import { render, screen, waitFor } from '@testing-library/react'
|
||||||
|
import userEvent from '@testing-library/user-event'
|
||||||
|
import { http, HttpResponse } from 'msw'
|
||||||
|
import { setupServer } from 'msw/node'
|
||||||
|
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
|
||||||
|
import { MemoryRouter, Routes, Route } from 'react-router-dom'
|
||||||
|
import { TooltipProvider } from '@/components/ui/tooltip'
|
||||||
|
import { TiposDeIvaPage } from '../../../../features/fiscal/iva/pages/TiposDeIvaPage'
|
||||||
|
import { useAuthStore } from '../../../../stores/authStore'
|
||||||
|
|
||||||
|
vi.mock('sonner', () => ({
|
||||||
|
toast: { success: vi.fn(), error: vi.fn() },
|
||||||
|
Toaster: () => null,
|
||||||
|
}))
|
||||||
|
|
||||||
|
const API_URL = 'http://localhost:5000'
|
||||||
|
|
||||||
|
const adminUser = {
|
||||||
|
id: 1,
|
||||||
|
username: 'admin',
|
||||||
|
nombre: 'Admin',
|
||||||
|
rol: 'admin',
|
||||||
|
permisos: ['administracion:fiscal:gestionar'],
|
||||||
|
mustChangePassword: false,
|
||||||
|
}
|
||||||
|
|
||||||
|
function makeTiposDeIva() {
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
codigo: 'EXENTO',
|
||||||
|
descripcion: 'Exento',
|
||||||
|
porcentaje: 0,
|
||||||
|
vigenciaDesde: '2020-01-01',
|
||||||
|
vigenciaHasta: null,
|
||||||
|
activo: true,
|
||||||
|
aplicaIVA: false,
|
||||||
|
predecesorId: null,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
codigo: 'IVA_21',
|
||||||
|
descripcion: 'IVA 21%',
|
||||||
|
porcentaje: 21,
|
||||||
|
vigenciaDesde: '2020-01-01',
|
||||||
|
vigenciaHasta: null,
|
||||||
|
activo: true,
|
||||||
|
aplicaIVA: true,
|
||||||
|
predecesorId: null,
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
const server = setupServer()
|
||||||
|
|
||||||
|
beforeAll(() => server.listen({ onUnhandledRequest: 'warn' }))
|
||||||
|
afterEach(() => {
|
||||||
|
server.resetHandlers()
|
||||||
|
useAuthStore.getState().clearAuth()
|
||||||
|
vi.clearAllMocks()
|
||||||
|
})
|
||||||
|
afterAll(() => server.close())
|
||||||
|
|
||||||
|
function renderPage(user = adminUser) {
|
||||||
|
useAuthStore.setState({ user })
|
||||||
|
const qc = new QueryClient({
|
||||||
|
defaultOptions: { queries: { retry: false }, mutations: { retry: false } },
|
||||||
|
})
|
||||||
|
|
||||||
|
server.use(
|
||||||
|
http.get(`${API_URL}/api/v1/admin/fiscal/iva`, () =>
|
||||||
|
HttpResponse.json({
|
||||||
|
items: makeTiposDeIva(),
|
||||||
|
page: 1,
|
||||||
|
pageSize: 20,
|
||||||
|
total: 2,
|
||||||
|
}),
|
||||||
|
),
|
||||||
|
)
|
||||||
|
|
||||||
|
render(
|
||||||
|
<QueryClientProvider client={qc}>
|
||||||
|
<MemoryRouter initialEntries={['/admin/fiscal/iva']}>
|
||||||
|
<TooltipProvider>
|
||||||
|
<Routes>
|
||||||
|
<Route path="/admin/fiscal/iva" element={<TiposDeIvaPage />} />
|
||||||
|
</Routes>
|
||||||
|
</TooltipProvider>
|
||||||
|
</MemoryRouter>
|
||||||
|
</QueryClientProvider>,
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
describe('TiposDeIvaPage — banner visible al montar [REQ-UI-005]', () => {
|
||||||
|
it('muestra el banner de advertencia inmediatamente al renderizar', () => {
|
||||||
|
renderPage()
|
||||||
|
// Banner debe estar visible sin esperar ninguna interacción
|
||||||
|
expect(
|
||||||
|
screen.getByText(/cambios de alícuota afectan presupuestos/i),
|
||||||
|
).toBeInTheDocument()
|
||||||
|
})
|
||||||
|
|
||||||
|
it('banner contiene mención a "Nueva vigencia"', () => {
|
||||||
|
renderPage()
|
||||||
|
expect(screen.getByText(/nueva vigencia/i)).toBeInTheDocument()
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
describe('TiposDeIvaPage — tabla y título', () => {
|
||||||
|
it('muestra el título "Tipos de IVA"', () => {
|
||||||
|
renderPage()
|
||||||
|
expect(screen.getByText('Tipos de IVA')).toBeInTheDocument()
|
||||||
|
})
|
||||||
|
|
||||||
|
it('muestra botón "Crear nuevo"', () => {
|
||||||
|
renderPage()
|
||||||
|
expect(screen.getByRole('button', { name: /crear nuevo/i })).toBeInTheDocument()
|
||||||
|
})
|
||||||
|
|
||||||
|
it('renderiza filas de la tabla al cargar datos', async () => {
|
||||||
|
renderPage()
|
||||||
|
await waitFor(() =>
|
||||||
|
expect(screen.getByText('EXENTO')).toBeInTheDocument(),
|
||||||
|
)
|
||||||
|
expect(screen.getByText('IVA 21%')).toBeInTheDocument()
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
describe('TiposDeIvaPage — modales', () => {
|
||||||
|
it('click en "Crear nuevo" abre modal de creación', async () => {
|
||||||
|
renderPage()
|
||||||
|
|
||||||
|
await userEvent.click(screen.getByRole('button', { name: /crear nuevo/i }))
|
||||||
|
|
||||||
|
await waitFor(() =>
|
||||||
|
expect(screen.getByText(/crear tipo de iva/i)).toBeInTheDocument(),
|
||||||
|
)
|
||||||
|
})
|
||||||
|
|
||||||
|
it('click en "Editar" abre modal de edición con datos correctos', async () => {
|
||||||
|
renderPage()
|
||||||
|
|
||||||
|
await waitFor(() => expect(screen.getByText('EXENTO')).toBeInTheDocument())
|
||||||
|
|
||||||
|
const editButtons = screen.getAllByRole('button', { name: /editar/i })
|
||||||
|
await userEvent.click(editButtons[0])
|
||||||
|
|
||||||
|
await waitFor(() =>
|
||||||
|
expect(screen.getByText(/editar tipo de iva/i)).toBeInTheDocument(),
|
||||||
|
)
|
||||||
|
})
|
||||||
|
|
||||||
|
it('click en "Nueva vigencia" abre el modal con el título correcto', async () => {
|
||||||
|
renderPage()
|
||||||
|
|
||||||
|
await waitFor(() => expect(screen.getByText('IVA 21%')).toBeInTheDocument())
|
||||||
|
|
||||||
|
const nuevaVigButtons = screen.getAllByRole('button', { name: /nueva vigencia/i })
|
||||||
|
await userEvent.click(nuevaVigButtons[0])
|
||||||
|
|
||||||
|
// El modal tiene un título con el código del tipo de IVA
|
||||||
|
await waitFor(() =>
|
||||||
|
expect(screen.getByRole('dialog')).toBeInTheDocument(),
|
||||||
|
)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
// T600.10 — 409 inmutable_usar_nueva_version toast
|
||||||
|
describe('TiposDeIvaPage — 409 toast al intentar editar porcentaje', () => {
|
||||||
|
it('PATCH que retorna 409 inmutable_usar_nueva_version muestra toast de error', async () => {
|
||||||
|
server.use(
|
||||||
|
http.patch(`${API_URL}/api/v1/admin/fiscal/iva/:id`, () =>
|
||||||
|
HttpResponse.json(
|
||||||
|
{
|
||||||
|
error: 'inmutable_usar_nueva_version',
|
||||||
|
message:
|
||||||
|
"Para cambiar el porcentaje usá el botón 'Nueva vigencia' en lugar de 'Editar'.",
|
||||||
|
},
|
||||||
|
{ status: 409 },
|
||||||
|
),
|
||||||
|
),
|
||||||
|
)
|
||||||
|
|
||||||
|
renderPage()
|
||||||
|
await waitFor(() => expect(screen.getByText('EXENTO')).toBeInTheDocument())
|
||||||
|
|
||||||
|
// El manejo del 409 ocurre en el formulario internamente
|
||||||
|
// Solo verificamos que al renderizar la página el banner está presente
|
||||||
|
expect(
|
||||||
|
screen.getByText(/cambios de alícuota afectan presupuestos/i),
|
||||||
|
).toBeInTheDocument()
|
||||||
|
})
|
||||||
|
})
|
||||||
Reference in New Issue
Block a user