()
+ const error = errors[name]?.message as string | undefined
+
+ return (
+
+
+ (
+ {
+ const digits = onlyDigits(event.target.value).replace(/^0+/, '').slice(0, 12)
+ field.onChange(digits ? formatBRLFromDigits(digits) : '')
+ }}
+ onBlur={field.onBlur}
+ />
+ )}
+ />
+ {error && (
+
+ {error}
+
+ )}
+
+ )
+}
diff --git a/frontend/src/components/form/MaskedTextField.test.tsx b/frontend/src/components/form/MaskedTextField.test.tsx
new file mode 100644
index 0000000..0625150
--- /dev/null
+++ b/frontend/src/components/form/MaskedTextField.test.tsx
@@ -0,0 +1,28 @@
+import { describe, expect, it } from 'vitest'
+import { screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { renderWithForm } from '../../test/renderWithForm'
+import { MaskedTextField } from './MaskedTextField'
+import { CPF_MASK, PHONE_MASK } from '../../constants/masks'
+
+describe('MaskedTextField', () => {
+ it('applies a fixed pattern mask as the user types', async () => {
+ const user = userEvent.setup()
+ renderWithForm()
+
+ const input = screen.getByLabelText('CPF')
+ await user.type(input, '52998224725')
+
+ expect(input).toHaveValue('529.982.247-25')
+ })
+
+ it('picks the right mask variant for a dynamic pattern', async () => {
+ const user = userEvent.setup()
+ renderWithForm()
+
+ const input = screen.getByLabelText('Telefone')
+ await user.type(input, '11987654321')
+
+ expect(input).toHaveValue('(11) 98765-4321')
+ })
+})
diff --git a/frontend/src/components/form/MaskedTextField.tsx b/frontend/src/components/form/MaskedTextField.tsx
new file mode 100644
index 0000000..50dec08
--- /dev/null
+++ b/frontend/src/components/form/MaskedTextField.tsx
@@ -0,0 +1,60 @@
+import { Controller, useFormContext } from 'react-hook-form'
+import { IMaskInput } from 'react-imask'
+import type { FormValues } from '../../schemas/formSchema'
+
+interface MaskedTextFieldProps {
+ name: keyof FormValues
+ label: string
+ maskOptions: Record
+ placeholder?: string
+ inputMode?: 'text' | 'numeric' | 'decimal'
+ hint?: string
+ fullWidth?: boolean
+}
+
+export function MaskedTextField({
+ name,
+ label,
+ maskOptions,
+ placeholder,
+ inputMode,
+ hint,
+ fullWidth,
+}: Readonly) {
+ const {
+ control,
+ formState: { errors },
+ } = useFormContext()
+ const error = errors[name]?.message as string | undefined
+
+ return (
+
+
+ (
+ field.onChange(value)}
+ onBlur={field.onBlur}
+ />
+ )}
+ />
+ {error && (
+
+ {error}
+
+ )}
+ {!error && hint && {hint}}
+
+ )
+}
diff --git a/frontend/src/components/form/SelectField.test.tsx b/frontend/src/components/form/SelectField.test.tsx
new file mode 100644
index 0000000..3393ff8
--- /dev/null
+++ b/frontend/src/components/form/SelectField.test.tsx
@@ -0,0 +1,34 @@
+import { describe, expect, it } from 'vitest'
+import { screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { renderWithForm } from '../../test/renderWithForm'
+import { SelectField } from './SelectField'
+
+const options = [
+ { value: 'SP', label: 'São Paulo' },
+ { value: 'RJ', label: 'Rio de Janeiro' },
+]
+
+describe('SelectField', () => {
+ it('renders the placeholder plus every option', () => {
+ renderWithForm()
+
+ expect(screen.getByRole('option', { name: 'UF' })).toBeInTheDocument()
+ expect(screen.getByRole('option', { name: 'São Paulo' })).toBeInTheDocument()
+ expect(screen.getByRole('option', { name: 'Rio de Janeiro' })).toBeInTheDocument()
+ })
+
+ it('lets the user pick an option', async () => {
+ const user = userEvent.setup()
+ renderWithForm()
+
+ await user.selectOptions(screen.getByLabelText('Estado'), 'RJ')
+
+ expect(screen.getByLabelText('Estado')).toHaveValue('RJ')
+ })
+
+ it('can be disabled while options are loading', () => {
+ renderWithForm()
+ expect(screen.getByLabelText('Profissão')).toBeDisabled()
+ })
+})
diff --git a/frontend/src/components/form/SelectField.tsx b/frontend/src/components/form/SelectField.tsx
new file mode 100644
index 0000000..3bc11c6
--- /dev/null
+++ b/frontend/src/components/form/SelectField.tsx
@@ -0,0 +1,48 @@
+import { useFormContext } from 'react-hook-form'
+import type { FormValues } from '../../schemas/formSchema'
+import type { SelectOption } from '../../constants/options'
+
+interface SelectFieldProps {
+ name: keyof FormValues
+ label: string
+ options: SelectOption[]
+ placeholder?: string
+ disabled?: boolean
+ fullWidth?: boolean
+}
+
+export function SelectField({ name, label, options, placeholder, disabled, fullWidth }: Readonly) {
+ const {
+ register,
+ formState: { errors },
+ } = useFormContext()
+ const error = errors[name]?.message as string | undefined
+
+ return (
+
+
+
+ {error && (
+
+ {error}
+
+ )}
+
+ )
+}
diff --git a/frontend/src/components/form/TextField.test.tsx b/frontend/src/components/form/TextField.test.tsx
new file mode 100644
index 0000000..23bd939
--- /dev/null
+++ b/frontend/src/components/form/TextField.test.tsx
@@ -0,0 +1,22 @@
+import { describe, expect, it } from 'vitest'
+import { screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { renderWithForm } from '../../test/renderWithForm'
+import { TextField } from './TextField'
+
+describe('TextField', () => {
+ it('renders a label wired to the input', () => {
+ renderWithForm()
+ expect(screen.getByLabelText('Nome completo')).toBeInTheDocument()
+ })
+
+ it('lets the user type into the field', async () => {
+ const user = userEvent.setup()
+ renderWithForm()
+
+ const input = screen.getByLabelText('Nome completo')
+ await user.type(input, 'Maria Souza')
+
+ expect(input).toHaveValue('Maria Souza')
+ })
+})
diff --git a/frontend/src/components/form/TextField.tsx b/frontend/src/components/form/TextField.tsx
new file mode 100644
index 0000000..fc345a3
--- /dev/null
+++ b/frontend/src/components/form/TextField.tsx
@@ -0,0 +1,49 @@
+import { useFormContext } from 'react-hook-form'
+import type { FormValues } from '../../schemas/formSchema'
+
+interface TextFieldProps {
+ name: keyof FormValues
+ label: string
+ placeholder?: string
+ type?: string
+ autoComplete?: string
+ fullWidth?: boolean
+ readOnly?: boolean
+}
+
+export function TextField({
+ name,
+ label,
+ placeholder,
+ type = 'text',
+ autoComplete,
+ fullWidth,
+ readOnly,
+}: Readonly) {
+ const {
+ register,
+ formState: { errors },
+ } = useFormContext()
+ const error = errors[name]?.message as string | undefined
+
+ return (
+
+
+
+ {error && (
+
+ {error}
+
+ )}
+
+ )
+}
diff --git a/frontend/src/components/layout/Layout.test.tsx b/frontend/src/components/layout/Layout.test.tsx
new file mode 100644
index 0000000..c29adb2
--- /dev/null
+++ b/frontend/src/components/layout/Layout.test.tsx
@@ -0,0 +1,21 @@
+import { describe, expect, it } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { MemoryRouter } from 'react-router-dom'
+import { Layout } from './Layout'
+
+describe('Layout', () => {
+ it('renders the logo, step indicator and page content', () => {
+ render(
+
+
+ conteúdo da etapa
+
+ ,
+ )
+
+ expect(screen.getByAltText('Verity')).toBeInTheDocument()
+ expect(screen.getByText('Dados Pessoais')).toBeInTheDocument()
+ expect(screen.getByText('conteúdo da etapa')).toBeInTheDocument()
+ expect(screen.getByText(/Verity\. Todos os direitos reservados\./)).toBeInTheDocument()
+ })
+})
diff --git a/frontend/src/components/layout/Layout.tsx b/frontend/src/components/layout/Layout.tsx
new file mode 100644
index 0000000..273636c
--- /dev/null
+++ b/frontend/src/components/layout/Layout.tsx
@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react'
+import { Logo } from './Logo'
+import { StepIndicator } from '../wizard/StepIndicator'
+
+export function Layout({ children }: { children: ReactNode }) {
+ return (
+
+ )
+}
diff --git a/frontend/src/components/layout/Logo.test.tsx b/frontend/src/components/layout/Logo.test.tsx
new file mode 100644
index 0000000..17737b3
--- /dev/null
+++ b/frontend/src/components/layout/Logo.test.tsx
@@ -0,0 +1,12 @@
+import { describe, expect, it } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { Logo } from './Logo'
+
+describe('Logo', () => {
+ it('renders the Verity logo image', () => {
+ render()
+ const image = screen.getByAltText('Verity')
+ expect(image).toBeInTheDocument()
+ expect(image).toHaveAttribute('src', '/logo.avif')
+ })
+})
diff --git a/frontend/src/components/layout/Logo.tsx b/frontend/src/components/layout/Logo.tsx
new file mode 100644
index 0000000..e2196dd
--- /dev/null
+++ b/frontend/src/components/layout/Logo.tsx
@@ -0,0 +1,7 @@
+export function Logo() {
+ return (
+
+
+
+ {STEPS.map((step, index) => {
+ const status = index < currentIndex ? 'done' : index === currentIndex ? 'active' : 'pending'
+ return (
+ -
+ {status === 'done' ? '✓' : index + 1}
+ {step.label}
+
+ )
+ })}
+
+ )
+}
diff --git a/frontend/src/components/wizard/SummarySection.test.tsx b/frontend/src/components/wizard/SummarySection.test.tsx
new file mode 100644
index 0000000..1a5e473
--- /dev/null
+++ b/frontend/src/components/wizard/SummarySection.test.tsx
@@ -0,0 +1,34 @@
+import { describe, expect, it, vi } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { SummarySection } from './SummarySection'
+
+describe('SummarySection', () => {
+ it('renders every item label and value', () => {
+ render(
+ {}}
+ items={[
+ { label: 'Nome completo', value: 'Maria Souza' },
+ { label: 'E-mail', value: '' },
+ ]}
+ />,
+ )
+
+ expect(screen.getByText('Dados Pessoais')).toBeInTheDocument()
+ expect(screen.getByText('Nome completo')).toBeInTheDocument()
+ expect(screen.getByText('Maria Souza')).toBeInTheDocument()
+ expect(screen.getByText('—')).toBeInTheDocument()
+ })
+
+ it('calls onEdit when the edit button is clicked', async () => {
+ const user = userEvent.setup()
+ const onEdit = vi.fn()
+ render()
+
+ await user.click(screen.getByText('Editar'))
+
+ expect(onEdit).toHaveBeenCalledOnce()
+ })
+})
diff --git a/frontend/src/components/wizard/SummarySection.tsx b/frontend/src/components/wizard/SummarySection.tsx
new file mode 100644
index 0000000..a765e3c
--- /dev/null
+++ b/frontend/src/components/wizard/SummarySection.tsx
@@ -0,0 +1,31 @@
+interface SummaryItem {
+ label: string
+ value: string
+}
+
+interface SummarySectionProps {
+ title: string
+ items: SummaryItem[]
+ onEdit: () => void
+}
+
+export function SummarySection({ title, items, onEdit }: Readonly) {
+ return (
+
+
+
{title}
+
+
+
+ {items.map((item) => (
+
+
- {item.label}
+ - {item.value || '—'}
+
+ ))}
+
+
+ )
+}
diff --git a/frontend/src/components/wizard/WizardActions.test.tsx b/frontend/src/components/wizard/WizardActions.test.tsx
new file mode 100644
index 0000000..3d7af68
--- /dev/null
+++ b/frontend/src/components/wizard/WizardActions.test.tsx
@@ -0,0 +1,25 @@
+import { describe, expect, it, vi } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { WizardActions } from './WizardActions'
+
+describe('WizardActions', () => {
+ it('omits the back button when onBack is not provided', () => {
+ render( {}} />)
+ expect(screen.queryByText('Voltar')).not.toBeInTheDocument()
+ expect(screen.getByText('Próximo')).toBeInTheDocument()
+ })
+
+ it('calls the provided callbacks', async () => {
+ const user = userEvent.setup()
+ const onNext = vi.fn()
+ const onBack = vi.fn()
+ render()
+
+ await user.click(screen.getByText('Voltar'))
+ await user.click(screen.getByText('Ver resumo'))
+
+ expect(onBack).toHaveBeenCalledOnce()
+ expect(onNext).toHaveBeenCalledOnce()
+ })
+})
diff --git a/frontend/src/components/wizard/WizardActions.tsx b/frontend/src/components/wizard/WizardActions.tsx
new file mode 100644
index 0000000..6f7af0b
--- /dev/null
+++ b/frontend/src/components/wizard/WizardActions.tsx
@@ -0,0 +1,21 @@
+interface WizardActionsProps {
+ onBack?: () => void
+ onNext: () => void
+ nextLabel?: string
+ backLabel?: string
+}
+
+export function WizardActions({ onBack, onNext, nextLabel = 'Próximo', backLabel = 'Voltar' }: Readonly) {
+ return (
+
+ {onBack && (
+
+ )}
+
+
+ )
+}
diff --git a/frontend/src/components/wizard/WizardStepShell.test.tsx b/frontend/src/components/wizard/WizardStepShell.test.tsx
new file mode 100644
index 0000000..3928fd1
--- /dev/null
+++ b/frontend/src/components/wizard/WizardStepShell.test.tsx
@@ -0,0 +1,27 @@
+import { describe, expect, it } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { WizardStepShell } from './WizardStepShell'
+
+describe('WizardStepShell', () => {
+ it('renders the title, optional description and children', () => {
+ render(
+
+ conteúdo
+ ,
+ )
+
+ expect(screen.getByRole('heading', { name: 'Dados Pessoais' })).toBeInTheDocument()
+ expect(screen.getByText('Preencha seus dados')).toBeInTheDocument()
+ expect(screen.getByText('conteúdo')).toBeInTheDocument()
+ })
+
+ it('omits the description when not provided', () => {
+ render(
+
+ conteúdo
+ ,
+ )
+
+ expect(screen.getByRole('heading', { name: 'Resumo' })).toBeInTheDocument()
+ })
+})
diff --git a/frontend/src/components/wizard/WizardStepShell.tsx b/frontend/src/components/wizard/WizardStepShell.tsx
new file mode 100644
index 0000000..d8504c8
--- /dev/null
+++ b/frontend/src/components/wizard/WizardStepShell.tsx
@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react'
+
+interface WizardStepShellProps {
+ title: string
+ description?: string
+ children: ReactNode
+}
+
+export function WizardStepShell({ title, description, children }: Readonly) {
+ return (
+
+ {title}
+ {description && {description}
}
+ {children}
+
+ )
+}
diff --git a/frontend/src/constants/breakpoints.css b/frontend/src/constants/breakpoints.css
new file mode 100644
index 0000000..36d0003
--- /dev/null
+++ b/frontend/src/constants/breakpoints.css
@@ -0,0 +1,2 @@
+@custom-media --breakpoint-tablet (min-width: 40rem);
+@custom-media --breakpoint-mobile (max-width: 30rem);
diff --git a/frontend/src/constants/colors.css b/frontend/src/constants/colors.css
new file mode 100644
index 0000000..bf70e28
--- /dev/null
+++ b/frontend/src/constants/colors.css
@@ -0,0 +1,18 @@
+:root {
+ --verity-blue-900: #082b63;
+ --verity-blue-700: #0d47a1;
+ --verity-blue-600: #1257b8;
+ --verity-blue-500: #1e6fd9;
+ --verity-blue-100: #e8f1fc;
+ --verity-blue-50: #f4f8fe;
+
+ --color-white: #ffffff;
+ --color-gray-900: #1a1f29;
+ --color-gray-600: #5b6472;
+ --color-gray-400: #8b93a1;
+ --color-gray-200: #e2e6ec;
+ --color-gray-100: #f1f3f7;
+
+ --color-error: #c62828;
+ --color-success: #1e8e3e;
+}
diff --git a/frontend/src/constants/masks.ts b/frontend/src/constants/masks.ts
new file mode 100644
index 0000000..d904a11
--- /dev/null
+++ b/frontend/src/constants/masks.ts
@@ -0,0 +1,9 @@
+export const CPF_MASK = { mask: '000.000.000-00' }
+
+export const DATE_MASK = { mask: '00/00/0000' }
+
+export const CEP_MASK = { mask: '00000-000' }
+
+export const PHONE_MASK = {
+ mask: [{ mask: '(00) 0000-0000' }, { mask: '(00) 00000-0000' }],
+}
diff --git a/frontend/src/constants/options.test.ts b/frontend/src/constants/options.test.ts
new file mode 100644
index 0000000..5c1ba0a
--- /dev/null
+++ b/frontend/src/constants/options.test.ts
@@ -0,0 +1,13 @@
+import { describe, expect, it } from 'vitest'
+import { getOptionLabel, TEMPO_EMPRESA_OPTIONS, UF_OPTIONS } from './options'
+
+describe('getOptionLabel', () => {
+ it('returns the matching label', () => {
+ expect(getOptionLabel(UF_OPTIONS, 'SP')).toBe('São Paulo')
+ expect(getOptionLabel(TEMPO_EMPRESA_OPTIONS, '2-5-anos')).toBe('De 2 a 5 anos')
+ })
+
+ it('falls back to the raw value when there is no match', () => {
+ expect(getOptionLabel(UF_OPTIONS, 'ZZ')).toBe('ZZ')
+ })
+})
diff --git a/frontend/src/constants/options.ts b/frontend/src/constants/options.ts
new file mode 100644
index 0000000..79682b1
--- /dev/null
+++ b/frontend/src/constants/options.ts
@@ -0,0 +1,46 @@
+export interface SelectOption {
+ value: string
+ label: string
+}
+
+export const UF_OPTIONS: SelectOption[] = [
+ { value: 'AC', label: 'Acre' },
+ { value: 'AL', label: 'Alagoas' },
+ { value: 'AP', label: 'Amapá' },
+ { value: 'AM', label: 'Amazonas' },
+ { value: 'BA', label: 'Bahia' },
+ { value: 'CE', label: 'Ceará' },
+ { value: 'DF', label: 'Distrito Federal' },
+ { value: 'ES', label: 'Espírito Santo' },
+ { value: 'GO', label: 'Goiás' },
+ { value: 'MA', label: 'Maranhão' },
+ { value: 'MT', label: 'Mato Grosso' },
+ { value: 'MS', label: 'Mato Grosso do Sul' },
+ { value: 'MG', label: 'Minas Gerais' },
+ { value: 'PA', label: 'Pará' },
+ { value: 'PB', label: 'Paraíba' },
+ { value: 'PR', label: 'Paraná' },
+ { value: 'PE', label: 'Pernambuco' },
+ { value: 'PI', label: 'Piauí' },
+ { value: 'RJ', label: 'Rio de Janeiro' },
+ { value: 'RN', label: 'Rio Grande do Norte' },
+ { value: 'RS', label: 'Rio Grande do Sul' },
+ { value: 'RO', label: 'Rondônia' },
+ { value: 'RR', label: 'Roraima' },
+ { value: 'SC', label: 'Santa Catarina' },
+ { value: 'SP', label: 'São Paulo' },
+ { value: 'SE', label: 'Sergipe' },
+ { value: 'TO', label: 'Tocantins' },
+]
+
+export const TEMPO_EMPRESA_OPTIONS: SelectOption[] = [
+ { value: 'menos-6-meses', label: 'Menos de 6 meses' },
+ { value: '6-meses-1-ano', label: 'De 6 meses a 1 ano' },
+ { value: '1-2-anos', label: 'De 1 a 2 anos' },
+ { value: '2-5-anos', label: 'De 2 a 5 anos' },
+ { value: 'mais-5-anos', label: 'Mais de 5 anos' },
+]
+
+export function getOptionLabel(options: SelectOption[], value: string): string {
+ return options.find((option) => option.value === value)?.label ?? value
+}
diff --git a/frontend/src/constants/spacing.css b/frontend/src/constants/spacing.css
new file mode 100644
index 0000000..8fd562f
--- /dev/null
+++ b/frontend/src/constants/spacing.css
@@ -0,0 +1,14 @@
+:root {
+ --space-0: 0.125rem;
+ --space-1: 0.25rem;
+ --space-2: 0.375rem;
+ --space-3: 0.5rem;
+ --space-4: 0.625rem;
+ --space-5: 0.75rem;
+ --space-6: 1rem;
+ --space-7: 1.125rem;
+ --space-8: 1.25rem;
+ --space-9: 1.5rem;
+ --space-10: 2rem;
+ --space-11: 3rem;
+}
diff --git a/frontend/src/context/WizardFormProvider.test.tsx b/frontend/src/context/WizardFormProvider.test.tsx
new file mode 100644
index 0000000..cb266ae
--- /dev/null
+++ b/frontend/src/context/WizardFormProvider.test.tsx
@@ -0,0 +1,54 @@
+import { describe, expect, it } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { useFormContext } from 'react-hook-form'
+import { WizardFormProvider } from './WizardFormProvider'
+import type { FormValues } from '../schemas/formSchema'
+import { persistFormValues } from '../lib/storage'
+
+function FullNameProbe() {
+ const { register, watch } = useFormContext()
+ return (
+
+
+ valor: {watch('fullName')}
+
+ )
+}
+
+describe('WizardFormProvider', () => {
+ it('starts from the default empty values when nothing is stored', () => {
+ render(
+
+
+ ,
+ )
+
+ expect(screen.getByText('valor:')).toBeInTheDocument()
+ })
+
+ it('hydrates from previously persisted values', () => {
+ persistFormValues({ fullName: 'Maria Souza' })
+
+ render(
+
+
+ ,
+ )
+
+ expect(screen.getByLabelText('Nome completo')).toHaveValue('Maria Souza')
+ })
+
+ it('persists changes to localStorage as the user types', async () => {
+ const user = userEvent.setup()
+ render(
+
+
+ ,
+ )
+
+ await user.type(screen.getByLabelText('Nome completo'), 'Ana')
+
+ expect(JSON.parse(window.localStorage.getItem('verity:cadastro-wizard') ?? '{}').fullName).toBe('Ana')
+ })
+})
diff --git a/frontend/src/context/WizardFormProvider.tsx b/frontend/src/context/WizardFormProvider.tsx
new file mode 100644
index 0000000..2a24c89
--- /dev/null
+++ b/frontend/src/context/WizardFormProvider.tsx
@@ -0,0 +1,26 @@
+import { useEffect, type ReactNode } from 'react'
+import { FormProvider, useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { defaultFormValues, formSchema, type FormValues } from '../schemas/formSchema'
+import { loadStoredFormValues, persistFormValues } from '../lib/storage'
+
+export function WizardFormProvider({ children }: { children: ReactNode }) {
+ const methods = useForm({
+ resolver: zodResolver(formSchema),
+ mode: 'onSubmit',
+ reValidateMode: 'onChange',
+ defaultValues: {
+ ...defaultFormValues,
+ ...loadStoredFormValues(),
+ },
+ })
+
+ useEffect(() => {
+ const subscription = methods.watch((values) => {
+ persistFormValues(values)
+ })
+ return () => subscription.unsubscribe()
+ }, [methods])
+
+ return {children}
+}
diff --git a/frontend/src/hooks/useRequireStepData.test.tsx b/frontend/src/hooks/useRequireStepData.test.tsx
new file mode 100644
index 0000000..ecedb4b
--- /dev/null
+++ b/frontend/src/hooks/useRequireStepData.test.tsx
@@ -0,0 +1,37 @@
+import { describe, expect, it } from 'vitest'
+import { screen } from '@testing-library/react'
+import { Route, Routes } from 'react-router-dom'
+import { renderWithForm } from '../test/renderWithForm'
+import { useRequireStepData } from './useRequireStepData'
+
+function GuardedStep() {
+ useRequireStepData('fullName', '/etapa-1')
+ return conteúdo protegido
+}
+
+describe('useRequireStepData', () => {
+ it('redirects when the required field is empty', () => {
+ renderWithForm(
+
+ } />
+ etapa 1} />
+ ,
+ { initialPath: '/etapa-2' },
+ )
+
+ expect(screen.getByText('etapa 1')).toBeInTheDocument()
+ expect(screen.queryByText('conteúdo protegido')).not.toBeInTheDocument()
+ })
+
+ it('renders normally when the required field is already filled', () => {
+ renderWithForm(
+
+ } />
+ etapa 1} />
+ ,
+ { initialPath: '/etapa-2', initialValues: { fullName: 'Maria Souza' } },
+ )
+
+ expect(screen.getByText('conteúdo protegido')).toBeInTheDocument()
+ })
+})
diff --git a/frontend/src/hooks/useRequireStepData.ts b/frontend/src/hooks/useRequireStepData.ts
new file mode 100644
index 0000000..69a7457
--- /dev/null
+++ b/frontend/src/hooks/useRequireStepData.ts
@@ -0,0 +1,15 @@
+import { useEffect } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { useFormContext } from 'react-hook-form'
+import type { FormValues } from '../schemas/formSchema'
+
+export function useRequireStepData(requiredField: keyof FormValues, redirectTo: string) {
+ const { getValues } = useFormContext()
+ const navigate = useNavigate()
+
+ useEffect(() => {
+ if (!getValues(requiredField)) {
+ navigate(redirectTo, { replace: true })
+ }
+ }, [])
+}
diff --git a/frontend/src/hooks/useStepNavigation.test.tsx b/frontend/src/hooks/useStepNavigation.test.tsx
new file mode 100644
index 0000000..1d402b3
--- /dev/null
+++ b/frontend/src/hooks/useStepNavigation.test.tsx
@@ -0,0 +1,71 @@
+import { describe, expect, it } from 'vitest'
+import { screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { Route, Routes } from 'react-router-dom'
+import { renderWithForm } from '../test/renderWithForm'
+import { useStepNavigation } from './useStepNavigation'
+import { TextField } from '../components/form/TextField'
+import type { FormValues } from '../schemas/formSchema'
+
+function TestStep({ fields, nextPath }: { fields: (keyof FormValues)[]; nextPath: string }) {
+ const { goNext, goBack } = useStepNavigation(fields)
+ return (
+
+
+
+
+
+ )
+}
+
+describe('useStepNavigation', () => {
+ it('does not navigate when the required fields are invalid', async () => {
+ const user = userEvent.setup()
+ renderWithForm(
+
+ } />
+ chegou na etapa 2} />
+ ,
+ { initialPath: '/etapa-1' },
+ )
+
+ await user.click(screen.getByText('avançar'))
+
+ expect(screen.queryByText('chegou na etapa 2')).not.toBeInTheDocument()
+ })
+
+ it('navigates once the required fields are valid', async () => {
+ const user = userEvent.setup()
+ renderWithForm(
+
+ } />
+ chegou na etapa 2} />
+ ,
+ { initialPath: '/etapa-1' },
+ )
+
+ await user.type(screen.getByLabelText('Nome completo'), 'Maria Souza')
+ await user.click(screen.getByText('avançar'))
+
+ expect(await screen.findByText('chegou na etapa 2')).toBeInTheDocument()
+ })
+
+ it('goBack always navigates regardless of validity', async () => {
+ const user = userEvent.setup()
+ renderWithForm(
+
+ etapa 1} />
+ } />
+ ,
+ { initialPath: '/etapa-2' },
+ )
+
+ await user.click(screen.getByText('voltar'))
+
+ expect(await screen.findByText('etapa 1')).toBeInTheDocument()
+ })
+})
diff --git a/frontend/src/hooks/useStepNavigation.ts b/frontend/src/hooks/useStepNavigation.ts
new file mode 100644
index 0000000..9584ed2
--- /dev/null
+++ b/frontend/src/hooks/useStepNavigation.ts
@@ -0,0 +1,21 @@
+import { useNavigate } from 'react-router-dom'
+import { useFormContext } from 'react-hook-form'
+import type { FormValues } from '../schemas/formSchema'
+
+export function useStepNavigation(fields: (keyof FormValues)[]) {
+ const { trigger } = useFormContext()
+ const navigate = useNavigate()
+
+ async function goNext(path: string) {
+ const isValid = await trigger(fields)
+ if (isValid) {
+ navigate(path)
+ }
+ }
+
+ function goBack(path: string) {
+ navigate(path)
+ }
+
+ return { goNext, goBack }
+}
diff --git a/frontend/src/index.css b/frontend/src/index.css
new file mode 100644
index 0000000..393ee2a
--- /dev/null
+++ b/frontend/src/index.css
@@ -0,0 +1,342 @@
+@import './constants/spacing.css';
+@import './constants/colors.css';
+@import './constants/breakpoints.css';
+
+:root {
+ --radius-sm: 6px;
+ --radius-md: 10px;
+ --radius-lg: 16px;
+
+ --shadow-card: 0 1px 3px rgba(8, 43, 99, 0.08), 0 8px 24px rgba(8, 43, 99, 0.06);
+
+ color-scheme: light;
+ font-family: 'Segoe UI', 'Inter', system-ui, -apple-system, sans-serif;
+ color: var(--color-gray-900);
+ background-color: var(--verity-blue-50);
+}
+
+* {
+ box-sizing: border-box;
+}
+
+html,
+body,
+#root {
+ min-height: 100%;
+}
+
+body {
+ margin: 0;
+ background-color: var(--verity-blue-50);
+}
+
+h1,
+h2,
+h3,
+p {
+ margin: 0;
+}
+
+button {
+ font-family: inherit;
+}
+
+.app-shell {
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+}
+
+.app-header {
+ background-color: var(--color-white);
+ border-bottom: 1px solid var(--color-gray-200);
+ padding: var(--space-6) var(--space-9);
+ display: flex;
+ align-items: center;
+}
+
+.app-main {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: var(--space-9) var(--space-6) var(--space-11);
+}
+
+.app-footer {
+ text-align: center;
+ padding: var(--space-6);
+ color: var(--color-gray-400);
+ font-size: 12px;
+}
+
+.logo-mark {
+ display: flex;
+ align-items: center;
+ gap: var(--space-3);
+}
+
+.logo-image {
+ height: 36px;
+ width: auto;
+ display: block;
+}
+
+.step-indicator {
+ list-style: none;
+ display: flex;
+ justify-content: center;
+ gap: var(--space-3);
+ margin: var(--space-9) auto 0;
+ padding: 0 var(--space-6);
+ max-width: 720px;
+ width: 100%;
+}
+
+.step {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: var(--space-2);
+ text-align: center;
+}
+
+.step-index {
+ width: 30px;
+ height: 30px;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 13px;
+ font-weight: 700;
+ background-color: var(--color-gray-200);
+ color: var(--color-gray-600);
+}
+
+.step-label {
+ font-size: 12px;
+ color: var(--color-gray-600);
+}
+
+.step-active .step-index {
+ background-color: var(--verity-blue-600);
+ color: var(--color-white);
+}
+
+.step-active .step-label {
+ color: var(--verity-blue-700);
+ font-weight: 600;
+}
+
+.step-done .step-index {
+ background-color: var(--verity-blue-100);
+ color: var(--verity-blue-600);
+ border: 2px solid var(--verity-blue-500);
+}
+
+.card {
+ width: 100%;
+ max-width: 720px;
+ background-color: var(--color-white);
+ border-radius: var(--radius-lg);
+ box-shadow: var(--shadow-card);
+ padding: var(--space-10);
+ margin-top: var(--space-9);
+}
+
+.step-title {
+ font-size: 22px;
+ font-weight: 700;
+ color: var(--verity-blue-900);
+}
+
+.step-description {
+ margin-top: var(--space-2);
+ color: var(--color-gray-600);
+ font-size: 14px;
+}
+
+.field-grid {
+ display: grid;
+ grid-template-columns: 1fr;
+ gap: var(--space-7);
+ margin-top: var(--space-9);
+}
+
+@media (--breakpoint-tablet) {
+ .field-grid {
+ grid-template-columns: 1fr 1fr;
+ }
+
+ .field-full {
+ grid-column: 1 / -1;
+ }
+}
+
+.field {
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-2);
+}
+
+.field label {
+ font-size: 13px;
+ font-weight: 600;
+ color: var(--color-gray-900);
+}
+
+.field input,
+.field select {
+ border: 1px solid var(--color-gray-200);
+ border-radius: var(--radius-sm);
+ padding: var(--space-4) var(--space-5);
+ font-size: 14px;
+ background-color: var(--color-white);
+ color: var(--color-gray-900);
+ transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.field input:focus,
+.field select:focus {
+ outline: none;
+ border-color: var(--verity-blue-500);
+ box-shadow: 0 0 0 3px var(--verity-blue-100);
+}
+
+.field input[aria-invalid='true'],
+.field select[aria-invalid='true'] {
+ border-color: var(--color-error);
+}
+
+.field-error {
+ font-size: 12px;
+ color: var(--color-error);
+}
+
+.field-hint {
+ font-size: 12px;
+ color: var(--color-gray-400);
+}
+
+.field-hint.loading {
+ color: var(--verity-blue-600);
+}
+
+.field-hint.error {
+ color: var(--color-error);
+}
+
+.wizard-actions {
+ display: flex;
+ justify-content: flex-end;
+ gap: var(--space-5);
+ margin-top: var(--space-10);
+}
+
+.btn {
+ border: none;
+ border-radius: var(--radius-sm);
+ padding: var(--space-5) var(--space-9);
+ font-size: 14px;
+ font-weight: 600;
+ cursor: pointer;
+ transition: background-color 0.15s ease, transform 0.05s ease;
+}
+
+.btn:active {
+ transform: translateY(1px);
+}
+
+.btn-primary {
+ background-color: var(--verity-blue-600);
+ color: var(--color-white);
+}
+
+.btn-primary:hover {
+ background-color: var(--verity-blue-700);
+}
+
+.btn-secondary {
+ background-color: var(--color-white);
+ color: var(--verity-blue-600);
+ border: 1px solid var(--verity-blue-500);
+}
+
+.btn-secondary:hover {
+ background-color: var(--verity-blue-50);
+}
+
+.btn-link {
+ background: none;
+ border: none;
+ color: var(--verity-blue-600);
+ font-weight: 600;
+ font-size: 13px;
+ cursor: pointer;
+ padding: 0;
+}
+
+.btn-link:hover {
+ text-decoration: underline;
+}
+
+.summary-section {
+ margin-top: var(--space-8);
+ padding: var(--space-7);
+ background-color: var(--verity-blue-50);
+ border-radius: var(--radius-md);
+}
+
+.summary-section-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+
+.summary-section-header h3 {
+ color: var(--verity-blue-900);
+ font-size: 15px;
+}
+
+.summary-list {
+ margin: var(--space-5) 0 0;
+ display: grid;
+ grid-template-columns: 1fr;
+ gap: var(--space-4);
+}
+
+@media (--breakpoint-tablet) {
+ .summary-list {
+ grid-template-columns: 1fr 1fr;
+ }
+}
+
+.summary-row dt {
+ font-size: 11px;
+ text-transform: uppercase;
+ letter-spacing: 0.04em;
+ color: var(--color-gray-400);
+}
+
+.summary-row dd {
+ margin: var(--space-0) 0 0;
+ font-size: 14px;
+ color: var(--color-gray-900);
+ font-weight: 500;
+}
+
+@media (--breakpoint-mobile) {
+ .card {
+ padding: var(--space-8);
+ }
+
+ .wizard-actions {
+ flex-direction: column-reverse;
+ }
+
+ .btn {
+ width: 100%;
+ }
+}
diff --git a/frontend/src/lib/api.test.ts b/frontend/src/lib/api.test.ts
new file mode 100644
index 0000000..835ad78
--- /dev/null
+++ b/frontend/src/lib/api.test.ts
@@ -0,0 +1,74 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+const { instanceGet, topLevelGet } = vi.hoisted(() => ({
+ instanceGet: vi.fn(),
+ topLevelGet: vi.fn(),
+}))
+
+vi.mock('axios', () => ({
+ default: {
+ create: vi.fn(() => ({ get: instanceGet })),
+ get: topLevelGet,
+ },
+}))
+
+import { fetchAddressByCep, fetchProfessions } from './api'
+
+beforeEach(() => {
+ instanceGet.mockReset()
+ topLevelGet.mockReset()
+})
+
+describe('fetchAddressByCep', () => {
+ it('returns the address from the mocked json-server when found', async () => {
+ instanceGet.mockResolvedValueOnce({
+ data: { endereco: 'Avenida Paulista', bairro: 'Bela Vista', cidade: 'São Paulo', estado: 'SP' },
+ })
+
+ const result = await fetchAddressByCep('01310100')
+
+ expect(result).toEqual({ endereco: 'Avenida Paulista', bairro: 'Bela Vista', cidade: 'São Paulo', estado: 'SP' })
+ expect(instanceGet).toHaveBeenCalledWith('/ceps/01310100')
+ expect(topLevelGet).not.toHaveBeenCalled()
+ })
+
+ it('falls back to ViaCEP when the CEP is not in the mock db', async () => {
+ instanceGet.mockRejectedValueOnce(new Error('Request failed with status code 404'))
+ topLevelGet.mockResolvedValueOnce({
+ data: { logradouro: 'Rua das Flores', bairro: 'Centro', localidade: 'Rio de Janeiro', uf: 'RJ' },
+ })
+
+ const result = await fetchAddressByCep('20000000')
+
+ expect(result).toEqual({ endereco: 'Rua das Flores', bairro: 'Centro', cidade: 'Rio de Janeiro', estado: 'RJ' })
+ })
+
+ it('returns null when ViaCEP reports the CEP does not exist', async () => {
+ instanceGet.mockRejectedValueOnce(new Error('Request failed with status code 404'))
+ topLevelGet.mockResolvedValueOnce({ data: { erro: true } })
+
+ const result = await fetchAddressByCep('00000000')
+
+ expect(result).toBeNull()
+ })
+
+ it('returns null when both the mock and ViaCEP fail', async () => {
+ instanceGet.mockRejectedValueOnce(new Error('network error'))
+ topLevelGet.mockRejectedValueOnce(new Error('network error'))
+
+ const result = await fetchAddressByCep('00000000')
+
+ expect(result).toBeNull()
+ })
+})
+
+describe('fetchProfessions', () => {
+ it('returns the list of professions from the mocked API', async () => {
+ instanceGet.mockResolvedValueOnce({ data: [{ id: 1, name: 'Engenheiro(a) Civil' }] })
+
+ const result = await fetchProfessions()
+
+ expect(result).toEqual([{ id: 1, name: 'Engenheiro(a) Civil' }])
+ expect(instanceGet).toHaveBeenCalledWith('/professions')
+ })
+})
diff --git a/frontend/src/lib/api.ts b/frontend/src/lib/api.ts
new file mode 100644
index 0000000..51e3e3c
--- /dev/null
+++ b/frontend/src/lib/api.ts
@@ -0,0 +1,60 @@
+import axios from 'axios'
+
+export const mockApi = axios.create({
+ baseURL: import.meta.env.VITE_MOCK_API_URL ?? 'http://localhost:3001',
+})
+
+export interface CepResult {
+ endereco: string
+ bairro: string
+ cidade: string
+ estado: string
+}
+
+interface ViaCepResponse {
+ logradouro: string
+ bairro: string
+ localidade: string
+ uf: string
+ erro?: boolean
+}
+
+async function fetchCepFromMock(cep: string): Promise {
+ try {
+ const { data } = await mockApi.get(`/ceps/${cep}`)
+ return data
+ } catch {
+ return null
+ }
+}
+
+async function fetchCepFromViaCep(cep: string): Promise {
+ try {
+ const { data } = await axios.get(`https://viacep.com.br/ws/${cep}/json/`)
+ if (data.erro) return null
+ return {
+ endereco: data.logradouro,
+ bairro: data.bairro,
+ cidade: data.localidade,
+ estado: data.uf,
+ }
+ } catch {
+ return null
+ }
+}
+
+export async function fetchAddressByCep(cep: string): Promise {
+ const mockResult = await fetchCepFromMock(cep)
+ if (mockResult) return mockResult
+ return fetchCepFromViaCep(cep)
+}
+
+export interface Profession {
+ id: number | string
+ name: string
+}
+
+export async function fetchProfessions(): Promise {
+ const { data } = await mockApi.get('/professions')
+ return data
+}
diff --git a/frontend/src/lib/cpf.test.ts b/frontend/src/lib/cpf.test.ts
new file mode 100644
index 0000000..4bcf52a
--- /dev/null
+++ b/frontend/src/lib/cpf.test.ts
@@ -0,0 +1,37 @@
+import { describe, expect, it } from 'vitest'
+import { isValidCPF, onlyDigits } from './cpf'
+
+describe('onlyDigits', () => {
+ it('strips every non-digit character', () => {
+ expect(onlyDigits('529.982.247-25')).toBe('52998224725')
+ expect(onlyDigits('(11) 98765-4321')).toBe('11987654321')
+ })
+})
+
+describe('isValidCPF', () => {
+ it('accepts a valid formatted CPF', () => {
+ expect(isValidCPF('529.982.247-25')).toBe(true)
+ })
+
+ it('accepts a valid unformatted CPF', () => {
+ expect(isValidCPF('52998224725')).toBe(true)
+ })
+
+ it('rejects a CPF with a wrong check digit', () => {
+ expect(isValidCPF('529.982.247-26')).toBe(false)
+ })
+
+ it('rejects a CPF made of the same repeated digit', () => {
+ expect(isValidCPF('111.111.111-11')).toBe(false)
+ expect(isValidCPF('000.000.000-00')).toBe(false)
+ })
+
+ it('rejects a CPF with the wrong length', () => {
+ expect(isValidCPF('1234567890')).toBe(false)
+ expect(isValidCPF('123456789012')).toBe(false)
+ })
+
+ it('rejects an empty value', () => {
+ expect(isValidCPF('')).toBe(false)
+ })
+})
diff --git a/frontend/src/lib/cpf.ts b/frontend/src/lib/cpf.ts
new file mode 100644
index 0000000..5e06579
--- /dev/null
+++ b/frontend/src/lib/cpf.ts
@@ -0,0 +1,26 @@
+export function onlyDigits(value: string): string {
+ return value.replace(/\D/g, '')
+}
+
+function calcCheckDigit(digits: number[], length: number): number {
+ let sum = 0
+ for (let i = 0; i < length; i++) {
+ sum += digits[i] * (length + 1 - i)
+ }
+ const remainder = (sum * 10) % 11
+ return remainder === 10 ? 0 : remainder
+}
+
+export function isValidCPF(rawValue: string): boolean {
+ const cpf = onlyDigits(rawValue)
+
+ if (cpf.length !== 11 || /^(\d)\1{10}$/.test(cpf)) {
+ return false
+ }
+
+ const digits = cpf.split('').map(Number)
+ const firstCheckDigit = calcCheckDigit(digits, 9)
+ const secondCheckDigit = calcCheckDigit(digits, 10)
+
+ return firstCheckDigit === digits[9] && secondCheckDigit === digits[10]
+}
diff --git a/frontend/src/lib/masks.test.ts b/frontend/src/lib/masks.test.ts
new file mode 100644
index 0000000..7d6252a
--- /dev/null
+++ b/frontend/src/lib/masks.test.ts
@@ -0,0 +1,50 @@
+import { describe, expect, it } from 'vitest'
+import { isValidBirthDate, onlyDigits, parseCurrencyToNumber } from './masks'
+
+describe('onlyDigits', () => {
+ it('removes non-numeric characters', () => {
+ expect(onlyDigits('01310-100')).toBe('01310100')
+ })
+})
+
+describe('isValidBirthDate', () => {
+ it('accepts a real past date in dd/mm/yyyy format', () => {
+ expect(isValidBirthDate('15/05/1990')).toBe(true)
+ })
+
+ it('rejects an incomplete date', () => {
+ expect(isValidBirthDate('15/05/19')).toBe(false)
+ expect(isValidBirthDate('')).toBe(false)
+ })
+
+ it('rejects a calendar-impossible date', () => {
+ expect(isValidBirthDate('31/02/2020')).toBe(false)
+ expect(isValidBirthDate('32/01/2020')).toBe(false)
+ expect(isValidBirthDate('01/13/2020')).toBe(false)
+ })
+
+ it('rejects a date in the future', () => {
+ const future = new Date()
+ future.setFullYear(future.getFullYear() + 1)
+ const day = String(future.getDate()).padStart(2, '0')
+ const month = String(future.getMonth() + 1).padStart(2, '0')
+ expect(isValidBirthDate(`${day}/${month}/${future.getFullYear()}`)).toBe(false)
+ })
+
+ it('rejects unreasonable years', () => {
+ expect(isValidBirthDate('01/01/1800')).toBe(false)
+ })
+})
+
+describe('parseCurrencyToNumber', () => {
+ it('parses a BRL formatted string into a number', () => {
+ expect(parseCurrencyToNumber('R$ 8.500,50')).toBe(8500.5)
+ expect(parseCurrencyToNumber('R$ 0,00')).toBe(0)
+ expect(parseCurrencyToNumber('R$ 1.234.567,89')).toBe(1234567.89)
+ })
+
+ it('returns 0 for an unparsable value', () => {
+ expect(parseCurrencyToNumber('')).toBe(0)
+ expect(parseCurrencyToNumber('abc')).toBe(0)
+ })
+})
diff --git a/frontend/src/lib/masks.ts b/frontend/src/lib/masks.ts
new file mode 100644
index 0000000..12494bc
--- /dev/null
+++ b/frontend/src/lib/masks.ts
@@ -0,0 +1,31 @@
+export function onlyDigits(value: string): string {
+ return value.replace(/\D/g, '')
+}
+
+export function isValidBirthDate(value: string): boolean {
+ const match = /^(\d{2})\/(\d{2})\/(\d{4})$/.exec(value)
+ if (!match) return false
+
+ const day = Number(match[1])
+ const month = Number(match[2])
+ const year = Number(match[3])
+ const date = new Date(year, month - 1, day)
+
+ const isRealCalendarDate =
+ date.getFullYear() === year &&
+ date.getMonth() === month - 1 &&
+ date.getDate() === day
+
+ if (!isRealCalendarDate) return false
+
+ const today = new Date()
+ today.setHours(0, 0, 0, 0)
+
+ return date <= today && year >= 1900
+}
+
+export function parseCurrencyToNumber(value: string): number {
+ const normalized = value.replace(/[^\d,-]/g, '').replace(',', '.')
+ const parsed = Number.parseFloat(normalized)
+ return Number.isNaN(parsed) ? 0 : parsed
+}
diff --git a/frontend/src/lib/pdf.test.ts b/frontend/src/lib/pdf.test.ts
new file mode 100644
index 0000000..83c152a
--- /dev/null
+++ b/frontend/src/lib/pdf.test.ts
@@ -0,0 +1,62 @@
+import { describe, expect, it, vi } from 'vitest'
+import type { FormValues } from '../schemas/formSchema'
+
+const { docMock, MockJsPDF } = vi.hoisted(() => {
+ const docMock = {
+ internal: {
+ pageSize: { getWidth: () => 210, getHeight: () => 297 },
+ },
+ setFillColor: vi.fn(),
+ rect: vi.fn(),
+ setTextColor: vi.fn(),
+ setFont: vi.fn(),
+ setFontSize: vi.fn(),
+ text: vi.fn(),
+ setDrawColor: vi.fn(),
+ line: vi.fn(),
+ save: vi.fn(),
+ }
+ class MockJsPDF {
+ constructor() {
+ return docMock
+ }
+ }
+ return { docMock, MockJsPDF }
+})
+
+vi.mock('jspdf', () => ({ jsPDF: MockJsPDF }))
+
+const { generateSummaryPdf } = await import('./pdf')
+
+const values: FormValues = {
+ fullName: 'Maria da Silva Souza',
+ birthDate: '15/05/1990',
+ cpf: '529.982.247-25',
+ phone: '(11) 98765-4321',
+ email: 'maria@example.com',
+ cep: '01310-100',
+ endereco: 'Avenida Paulista',
+ bairro: 'Bela Vista',
+ cidade: 'São Paulo',
+ estado: 'SP',
+ empresa: 'Verity Tecnologia',
+ profissao: 'Desenvolvedor(a) de Software',
+ salario: 'R$ 8.500,50',
+ tempoDeEmpresa: '2-5-anos',
+}
+
+describe('generateSummaryPdf', () => {
+ it('draws the branded header and every field, then saves the file', () => {
+ generateSummaryPdf(values)
+
+ expect(docMock.text).toHaveBeenCalledWith('verity', expect.any(Number), expect.any(Number))
+ expect(docMock.text).toHaveBeenCalledWith('Maria da Silva Souza', expect.any(Number), expect.any(Number))
+ expect(docMock.text).toHaveBeenCalledWith('São Paulo', expect.any(Number), expect.any(Number))
+ expect(docMock.save).toHaveBeenCalledWith('verity-cadastro-maria-da-silva-souza.pdf')
+ })
+
+ it('falls back to a generic filename when the name is blank', () => {
+ generateSummaryPdf({ ...values, fullName: '' })
+ expect(docMock.save).toHaveBeenCalledWith('verity-cadastro-cadastro.pdf')
+ })
+})
diff --git a/frontend/src/lib/pdf.ts b/frontend/src/lib/pdf.ts
new file mode 100644
index 0000000..be8dc85
--- /dev/null
+++ b/frontend/src/lib/pdf.ts
@@ -0,0 +1,95 @@
+import { jsPDF } from 'jspdf'
+import type { FormValues } from '../schemas/formSchema'
+import { getOptionLabel, TEMPO_EMPRESA_OPTIONS, UF_OPTIONS } from '../constants/options'
+
+const VERITY_BLUE: [number, number, number] = [13, 71, 161]
+const VERITY_BLUE_DARK: [number, number, number] = [8, 43, 99]
+const TEXT_GRAY: [number, number, number] = [60, 68, 82]
+const MARGIN_X = 16
+
+interface Section {
+ title: string
+ rows: [string, string][]
+}
+
+function buildSections(data: FormValues): Section[] {
+ return [
+ {
+ title: 'Dados Pessoais',
+ rows: [
+ ['Nome completo', data.fullName],
+ ['Data de nascimento', data.birthDate],
+ ['CPF', data.cpf],
+ ['Telefone', data.phone],
+ ['E-mail', data.email],
+ ],
+ },
+ {
+ title: 'Informações Residenciais',
+ rows: [
+ ['CEP', data.cep],
+ ['Endereço', data.endereco],
+ ['Bairro', data.bairro],
+ ['Cidade', data.cidade],
+ ['Estado', getOptionLabel(UF_OPTIONS, data.estado)],
+ ],
+ },
+ {
+ title: 'Informações Profissionais',
+ rows: [
+ ['Empresa', data.empresa],
+ ['Profissão', data.profissao],
+ ['Salário', data.salario],
+ ['Tempo de empresa', getOptionLabel(TEMPO_EMPRESA_OPTIONS, data.tempoDeEmpresa)],
+ ],
+ },
+ ]
+}
+
+export function generateSummaryPdf(data: FormValues): void {
+ const doc = new jsPDF()
+ const pageWidth = doc.internal.pageSize.getWidth()
+
+ doc.setFillColor(...VERITY_BLUE)
+ doc.rect(0, 0, pageWidth, 30, 'F')
+ doc.setTextColor(255, 255, 255)
+ doc.setFont('helvetica', 'bold')
+ doc.setFontSize(18)
+ doc.text('verity', MARGIN_X, 19)
+ doc.setFontSize(11)
+ doc.setFont('helvetica', 'normal')
+ doc.text('Resumo do Cadastro', pageWidth - MARGIN_X, 19, { align: 'right' })
+
+ let cursorY = 44
+
+ for (const section of buildSections(data)) {
+ doc.setTextColor(...VERITY_BLUE_DARK)
+ doc.setFont('helvetica', 'bold')
+ doc.setFontSize(13)
+ doc.text(section.title, MARGIN_X, cursorY)
+ cursorY += 3
+ doc.setDrawColor(...VERITY_BLUE)
+ doc.line(MARGIN_X, cursorY, pageWidth - MARGIN_X, cursorY)
+ cursorY += 8
+
+ doc.setFontSize(11)
+ for (const [label, value] of section.rows) {
+ doc.setFont('helvetica', 'bold')
+ doc.setTextColor(...TEXT_GRAY)
+ doc.text(`${label}:`, MARGIN_X, cursorY)
+ doc.setFont('helvetica', 'normal')
+ doc.text(value || '—', MARGIN_X + 55, cursorY)
+ cursorY += 7
+ }
+
+ cursorY += 6
+ }
+
+ const generatedAt = new Date().toLocaleString('pt-BR')
+ doc.setFontSize(9)
+ doc.setTextColor(...TEXT_GRAY)
+ doc.text(`Gerado em ${generatedAt}`, MARGIN_X, doc.internal.pageSize.getHeight() - 10)
+
+ const fileSuffix = data.fullName.trim().toLowerCase().replace(/\s+/g, '-') || 'cadastro'
+ doc.save(`verity-cadastro-${fileSuffix}.pdf`)
+}
diff --git a/frontend/src/lib/storage.test.ts b/frontend/src/lib/storage.test.ts
new file mode 100644
index 0000000..ab74160
--- /dev/null
+++ b/frontend/src/lib/storage.test.ts
@@ -0,0 +1,42 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { clearStoredFormValues, loadStoredFormValues, persistFormValues } from './storage'
+
+interface Sample {
+ fullName: string
+}
+
+afterEach(() => {
+ window.localStorage.clear()
+ vi.restoreAllMocks()
+})
+
+describe('persistFormValues / loadStoredFormValues', () => {
+ it('round-trips values through localStorage', () => {
+ persistFormValues({ fullName: 'Maria Souza' })
+ expect(loadStoredFormValues()).toEqual({ fullName: 'Maria Souza' })
+ })
+
+ it('returns undefined when nothing was stored', () => {
+ expect(loadStoredFormValues()).toBeUndefined()
+ })
+
+ it('returns undefined when stored value is not valid JSON', () => {
+ window.localStorage.setItem('verity:cadastro-wizard', '{not-json')
+ expect(loadStoredFormValues()).toBeUndefined()
+ })
+
+ it('silently ignores a localStorage write failure', () => {
+ vi.spyOn(window.localStorage.__proto__, 'setItem').mockImplementation(() => {
+ throw new Error('quota exceeded')
+ })
+ expect(() => persistFormValues({ fullName: 'Maria' })).not.toThrow()
+ })
+})
+
+describe('clearStoredFormValues', () => {
+ it('removes the stored value', () => {
+ persistFormValues({ fullName: 'Maria Souza' })
+ clearStoredFormValues()
+ expect(loadStoredFormValues()).toBeUndefined()
+ })
+})
diff --git a/frontend/src/lib/storage.ts b/frontend/src/lib/storage.ts
new file mode 100644
index 0000000..6c5c777
--- /dev/null
+++ b/frontend/src/lib/storage.ts
@@ -0,0 +1,21 @@
+const STORAGE_KEY = 'verity:cadastro-wizard'
+
+export function loadStoredFormValues(): Partial | undefined {
+ try {
+ const raw = window.localStorage.getItem(STORAGE_KEY)
+ if (!raw) return undefined
+ return JSON.parse(raw) as Partial
+ } catch {
+ return undefined
+ }
+}
+
+export function persistFormValues(values: unknown): void {
+ try {
+ window.localStorage.setItem(STORAGE_KEY, JSON.stringify(values))
+ } catch {}
+}
+
+export function clearStoredFormValues(): void {
+ window.localStorage.removeItem(STORAGE_KEY)
+}
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
new file mode 100644
index 0000000..bef5202
--- /dev/null
+++ b/frontend/src/main.tsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+
+
+ ,
+)
diff --git a/frontend/src/pages/Step1PersonalData.test.tsx b/frontend/src/pages/Step1PersonalData.test.tsx
new file mode 100644
index 0000000..5154b70
--- /dev/null
+++ b/frontend/src/pages/Step1PersonalData.test.tsx
@@ -0,0 +1,51 @@
+import { describe, expect, it } from 'vitest'
+import { screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { Route, Routes } from 'react-router-dom'
+import { renderWithForm } from '../test/renderWithForm'
+import { Step1PersonalData } from './Step1PersonalData'
+
+function renderStep1() {
+ return renderWithForm(
+
+ } />
+ Informações Residenciais} />
+ ,
+ { initialPath: '/etapa-1' },
+ )
+}
+
+describe('Step1PersonalData', () => {
+ it('renders every personal data field', () => {
+ renderStep1()
+ expect(screen.getByLabelText('Nome completo')).toBeInTheDocument()
+ expect(screen.getByLabelText('Data de nascimento')).toBeInTheDocument()
+ expect(screen.getByLabelText('CPF')).toBeInTheDocument()
+ expect(screen.getByLabelText('Telefone')).toBeInTheDocument()
+ expect(screen.getByLabelText('E-mail')).toBeInTheDocument()
+ })
+
+ it('blocks navigation and shows errors when the form is invalid', async () => {
+ const user = userEvent.setup()
+ renderStep1()
+
+ await user.click(screen.getByText('Próximo'))
+
+ expect(await screen.findByText('Informe o nome completo')).toBeInTheDocument()
+ expect(screen.queryByText('Informações Residenciais')).not.toBeInTheDocument()
+ })
+
+ it('navigates to step 2 once all fields are valid', async () => {
+ const user = userEvent.setup()
+ renderStep1()
+
+ await user.type(screen.getByLabelText('Nome completo'), 'Maria Souza')
+ await user.type(screen.getByLabelText('Data de nascimento'), '15051990')
+ await user.type(screen.getByLabelText('CPF'), '52998224725')
+ await user.type(screen.getByLabelText('Telefone'), '11987654321')
+ await user.type(screen.getByLabelText('E-mail'), 'maria@example.com')
+ await user.click(screen.getByText('Próximo'))
+
+ expect(await screen.findByText('Informações Residenciais')).toBeInTheDocument()
+ })
+})
diff --git a/frontend/src/pages/Step1PersonalData.tsx b/frontend/src/pages/Step1PersonalData.tsx
new file mode 100644
index 0000000..d99d8e4
--- /dev/null
+++ b/frontend/src/pages/Step1PersonalData.tsx
@@ -0,0 +1,36 @@
+import { TextField } from '../components/form/TextField'
+import { MaskedTextField } from '../components/form/MaskedTextField'
+import { WizardActions } from '../components/wizard/WizardActions'
+import { WizardStepShell } from '../components/wizard/WizardStepShell'
+import { useStepNavigation } from '../hooks/useStepNavigation'
+import { STEP1_FIELDS } from '../schemas/formSchema'
+import { CPF_MASK, DATE_MASK, PHONE_MASK } from '../constants/masks'
+
+export function Step1PersonalData() {
+ const { goNext } = useStepNavigation(STEP1_FIELDS)
+
+ return (
+
+
+
+
+
+
+
+
+ goNext('/etapa-2')} />
+
+ )
+}
diff --git a/frontend/src/pages/Step2Address.test.tsx b/frontend/src/pages/Step2Address.test.tsx
new file mode 100644
index 0000000..6e31378
--- /dev/null
+++ b/frontend/src/pages/Step2Address.test.tsx
@@ -0,0 +1,82 @@
+import { describe, expect, it, vi, beforeEach } from 'vitest'
+import { screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { Route, Routes } from 'react-router-dom'
+import { renderWithForm } from '../test/renderWithForm'
+import { Step2Address } from './Step2Address'
+import { fetchAddressByCep } from '../lib/api'
+
+vi.mock('../lib/api', () => ({
+ fetchAddressByCep: vi.fn(),
+}))
+
+function renderStep2(initialValues = { fullName: 'Maria Souza' }) {
+ return renderWithForm(
+
+ Dados Pessoais} />
+ } />
+ Informações Profissionais} />
+ ,
+ { initialPath: '/etapa-2', initialValues },
+ )
+}
+
+beforeEach(() => {
+ vi.mocked(fetchAddressByCep).mockReset()
+})
+
+describe('Step2Address', () => {
+ it('auto-fills the address fields once the CEP lookup resolves', async () => {
+ vi.mocked(fetchAddressByCep).mockResolvedValueOnce({
+ endereco: 'Avenida Paulista',
+ bairro: 'Bela Vista',
+ cidade: 'São Paulo',
+ estado: 'SP',
+ })
+ const user = userEvent.setup()
+ renderStep2()
+
+ await user.type(screen.getByLabelText('CEP'), '01310100')
+
+ expect(await screen.findByDisplayValue('Avenida Paulista')).toBeInTheDocument()
+ expect(screen.getByDisplayValue('Bela Vista')).toBeInTheDocument()
+ expect(screen.getByLabelText('Cidade')).toHaveValue('São Paulo')
+ expect(screen.getByLabelText('Estado')).toHaveValue('SP')
+ })
+
+ it('shows a not-found hint when no service has the CEP', async () => {
+ vi.mocked(fetchAddressByCep).mockResolvedValueOnce(null)
+ const user = userEvent.setup()
+ renderStep2()
+
+ await user.type(screen.getByLabelText('CEP'), '99999999')
+
+ expect(await screen.findByText('CEP não encontrado, preencha manualmente.')).toBeInTheDocument()
+ })
+
+ it('navigates back to step 1', async () => {
+ const user = userEvent.setup()
+ renderStep2()
+
+ await user.click(screen.getByText('Voltar'))
+
+ expect(await screen.findByText('Dados Pessoais')).toBeInTheDocument()
+ })
+
+ it('navigates to step 3 once the address is valid', async () => {
+ vi.mocked(fetchAddressByCep).mockResolvedValueOnce({
+ endereco: 'Avenida Paulista',
+ bairro: 'Bela Vista',
+ cidade: 'São Paulo',
+ estado: 'SP',
+ })
+ const user = userEvent.setup()
+ renderStep2()
+
+ await user.type(screen.getByLabelText('CEP'), '01310100')
+ await screen.findByDisplayValue('Avenida Paulista')
+ await user.click(screen.getByText('Próximo'))
+
+ expect(await screen.findByText('Informações Profissionais')).toBeInTheDocument()
+ })
+})
diff --git a/frontend/src/pages/Step2Address.tsx b/frontend/src/pages/Step2Address.tsx
new file mode 100644
index 0000000..a4b9bd4
--- /dev/null
+++ b/frontend/src/pages/Step2Address.tsx
@@ -0,0 +1,81 @@
+import { useEffect, useState } from 'react'
+import { useFormContext, useWatch } from 'react-hook-form'
+import { TextField } from '../components/form/TextField'
+import { SelectField } from '../components/form/SelectField'
+import { MaskedTextField } from '../components/form/MaskedTextField'
+import { WizardActions } from '../components/wizard/WizardActions'
+import { WizardStepShell } from '../components/wizard/WizardStepShell'
+import { useStepNavigation } from '../hooks/useStepNavigation'
+import { useRequireStepData } from '../hooks/useRequireStepData'
+import { STEP2_FIELDS, type FormValues } from '../schemas/formSchema'
+import { CEP_MASK } from '../constants/masks'
+import { UF_OPTIONS } from '../constants/options'
+import { fetchAddressByCep } from '../lib/api'
+import { onlyDigits } from '../lib/masks'
+
+type CepStatus = 'idle' | 'loading' | 'success' | 'not-found'
+
+const CEP_STATUS_HINTS: Partial> = {
+ loading: 'Buscando endereço...',
+ 'not-found': 'CEP não encontrado, preencha manualmente.',
+}
+
+export function Step2Address() {
+ useRequireStepData('fullName', '/etapa-1')
+ const { control, setValue } = useFormContext()
+ const { goNext, goBack } = useStepNavigation(STEP2_FIELDS)
+ const [cepStatus, setCepStatus] = useState('idle')
+ const cep = useWatch({ control, name: 'cep' })
+
+ useEffect(() => {
+ const digits = onlyDigits(cep ?? '')
+ if (digits.length !== 8) {
+ setCepStatus('idle')
+ return
+ }
+
+ let cancelled = false
+ setCepStatus('loading')
+
+ fetchAddressByCep(digits).then((result) => {
+ if (cancelled) return
+ if (result) {
+ setValue('endereco', result.endereco, { shouldValidate: true })
+ setValue('bairro', result.bairro, { shouldValidate: true })
+ setValue('cidade', result.cidade, { shouldValidate: true })
+ setValue('estado', result.estado.toUpperCase(), { shouldValidate: true })
+ setCepStatus('success')
+ } else {
+ setCepStatus('not-found')
+ }
+ })
+
+ return () => {
+ cancelled = true
+ }
+ }, [cep, setValue])
+
+ return (
+
+
+
+
+
+
+
+
+ goBack('/etapa-1')} onNext={() => goNext('/etapa-3')} />
+
+ )
+}
diff --git a/frontend/src/pages/Step3Professional.test.tsx b/frontend/src/pages/Step3Professional.test.tsx
new file mode 100644
index 0000000..fc38c15
--- /dev/null
+++ b/frontend/src/pages/Step3Professional.test.tsx
@@ -0,0 +1,66 @@
+import { describe, expect, it, vi, beforeEach } from 'vitest'
+import { screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { Route, Routes } from 'react-router-dom'
+import { renderWithForm } from '../test/renderWithForm'
+import { Step3Professional } from './Step3Professional'
+import { fetchProfessions } from '../lib/api'
+
+vi.mock('../lib/api', () => ({
+ fetchProfessions: vi.fn(),
+}))
+
+function renderStep3() {
+ return renderWithForm(
+
+ Informações Residenciais} />
+ } />
+ Resumo do Cadastro} />
+ ,
+ { initialPath: '/etapa-3', initialValues: { endereco: 'Avenida Paulista' } },
+ )
+}
+
+beforeEach(() => {
+ vi.mocked(fetchProfessions).mockReset()
+})
+
+describe('Step3Professional', () => {
+ it('disables the profession select while loading, then populates it', async () => {
+ vi.mocked(fetchProfessions).mockResolvedValueOnce([
+ { id: 1, name: 'Desenvolvedor(a) de Software' },
+ { id: 2, name: 'Analista de Sistemas' },
+ ])
+ renderStep3()
+
+ expect(screen.getByLabelText('Profissão')).toBeDisabled()
+
+ await screen.findByRole('option', { name: 'Desenvolvedor(a) de Software' })
+ expect(screen.getByLabelText('Profissão')).not.toBeDisabled()
+ expect(screen.getByRole('option', { name: 'Analista de Sistemas' })).toBeInTheDocument()
+ })
+
+ it('formats the salary field as currency', async () => {
+ vi.mocked(fetchProfessions).mockResolvedValueOnce([])
+ const user = userEvent.setup()
+ renderStep3()
+
+ await user.type(screen.getByLabelText('Salário'), '500000')
+ expect(screen.getByLabelText('Salário')).toHaveValue('R$ 5.000,00')
+ })
+
+ it('navigates to the summary once the step is valid', async () => {
+ vi.mocked(fetchProfessions).mockResolvedValueOnce([{ id: 1, name: 'Analista de Sistemas' }])
+ const user = userEvent.setup()
+ renderStep3()
+
+ await screen.findByRole('option', { name: 'Analista de Sistemas' })
+ await user.type(screen.getByLabelText('Empresa'), 'Verity Tecnologia')
+ await user.selectOptions(screen.getByLabelText('Profissão'), 'Analista de Sistemas')
+ await user.type(screen.getByLabelText('Salário'), '500000')
+ await user.selectOptions(screen.getByLabelText('Tempo de empresa'), 'De 2 a 5 anos')
+ await user.click(screen.getByText('Ver resumo'))
+
+ expect(await screen.findByText('Resumo do Cadastro')).toBeInTheDocument()
+ })
+})
diff --git a/frontend/src/pages/Step3Professional.tsx b/frontend/src/pages/Step3Professional.tsx
new file mode 100644
index 0000000..396f475
--- /dev/null
+++ b/frontend/src/pages/Step3Professional.tsx
@@ -0,0 +1,56 @@
+import { useEffect, useState } from 'react'
+import { TextField } from '../components/form/TextField'
+import { SelectField } from '../components/form/SelectField'
+import { CurrencyField } from '../components/form/CurrencyField'
+import { WizardActions } from '../components/wizard/WizardActions'
+import { WizardStepShell } from '../components/wizard/WizardStepShell'
+import { useStepNavigation } from '../hooks/useStepNavigation'
+import { useRequireStepData } from '../hooks/useRequireStepData'
+import { STEP3_FIELDS } from '../schemas/formSchema'
+import { TEMPO_EMPRESA_OPTIONS, type SelectOption } from '../constants/options'
+import { fetchProfessions } from '../lib/api'
+
+export function Step3Professional() {
+ useRequireStepData('endereco', '/etapa-2')
+ const { goNext, goBack } = useStepNavigation(STEP3_FIELDS)
+ const [professionOptions, setProfessionOptions] = useState([])
+ const [loadingProfessions, setLoadingProfessions] = useState(true)
+
+ useEffect(() => {
+ let cancelled = false
+
+ fetchProfessions()
+ .then((professions) => {
+ if (cancelled) return
+ setProfessionOptions(professions.map((p) => ({ value: p.name, label: p.name })))
+ })
+ .catch(() => {
+ if (!cancelled) setProfessionOptions([])
+ })
+ .finally(() => {
+ if (!cancelled) setLoadingProfessions(false)
+ })
+
+ return () => {
+ cancelled = true
+ }
+ }, [])
+
+ return (
+
+
+
+
+
+
+
+ goBack('/etapa-2')} onNext={() => goNext('/resumo')} nextLabel="Ver resumo" />
+
+ )
+}
diff --git a/frontend/src/pages/SummaryPage.test.tsx b/frontend/src/pages/SummaryPage.test.tsx
new file mode 100644
index 0000000..7214876
--- /dev/null
+++ b/frontend/src/pages/SummaryPage.test.tsx
@@ -0,0 +1,85 @@
+import { describe, expect, it, vi, beforeEach } from 'vitest'
+import { screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { Route, Routes } from 'react-router-dom'
+import { renderWithForm } from '../test/renderWithForm'
+import { SummaryPage } from './SummaryPage'
+import { generateSummaryPdf } from '../lib/pdf'
+import { clearStoredFormValues } from '../lib/storage'
+import type { FormValues } from '../schemas/formSchema'
+
+vi.mock('../lib/pdf', () => ({ generateSummaryPdf: vi.fn() }))
+vi.mock('../lib/storage', () => ({ clearStoredFormValues: vi.fn(), persistFormValues: vi.fn() }))
+
+const filledValues: Partial = {
+ fullName: 'Maria da Silva Souza',
+ birthDate: '15/05/1990',
+ cpf: '529.982.247-25',
+ phone: '(11) 98765-4321',
+ email: 'maria@example.com',
+ cep: '01310-100',
+ endereco: 'Avenida Paulista',
+ bairro: 'Bela Vista',
+ cidade: 'São Paulo',
+ estado: 'SP',
+ empresa: 'Verity Tecnologia',
+ profissao: 'Desenvolvedor(a) de Software',
+ salario: 'R$ 8.500,50',
+ tempoDeEmpresa: '2-5-anos',
+}
+
+function renderSummary() {
+ return renderWithForm(
+
+ Dados Pessoais} />
+ Informações Profissionais} />
+ } />
+ ,
+ { initialPath: '/resumo', initialValues: filledValues },
+ )
+}
+
+beforeEach(() => {
+ vi.mocked(generateSummaryPdf).mockReset()
+ vi.mocked(clearStoredFormValues).mockReset()
+})
+
+describe('SummaryPage', () => {
+ it('renders every filled value grouped by section, translating select values to labels', () => {
+ renderSummary()
+
+ expect(screen.getByText('Maria da Silva Souza')).toBeInTheDocument()
+ expect(screen.getByText('529.982.247-25')).toBeInTheDocument()
+ expect(screen.getByText('R$ 8.500,50')).toBeInTheDocument()
+ expect(screen.getAllByText('São Paulo')).toHaveLength(2)
+ expect(screen.getByText('De 2 a 5 anos')).toBeInTheDocument()
+ })
+
+ it('exports the PDF with the current form values', async () => {
+ const user = userEvent.setup()
+ renderSummary()
+
+ await user.click(screen.getByText('Exportar PDF'))
+
+ expect(generateSummaryPdf).toHaveBeenCalledWith(expect.objectContaining({ fullName: 'Maria da Silva Souza' }))
+ })
+
+ it('navigates to the matching step when Editar is clicked', async () => {
+ const user = userEvent.setup()
+ renderSummary()
+
+ await user.click(screen.getAllByText('Editar')[0])
+
+ expect(await screen.findByText('Dados Pessoais')).toBeInTheDocument()
+ })
+
+ it('clears the stored data and restarts on "Novo cadastro"', async () => {
+ const user = userEvent.setup()
+ renderSummary()
+
+ await user.click(screen.getByText('Novo cadastro'))
+
+ expect(clearStoredFormValues).toHaveBeenCalledOnce()
+ expect(await screen.findByText('Dados Pessoais')).toBeInTheDocument()
+ })
+})
diff --git a/frontend/src/pages/SummaryPage.tsx b/frontend/src/pages/SummaryPage.tsx
new file mode 100644
index 0000000..2370824
--- /dev/null
+++ b/frontend/src/pages/SummaryPage.tsx
@@ -0,0 +1,71 @@
+import { useNavigate } from 'react-router-dom'
+import { useFormContext } from 'react-hook-form'
+import { WizardStepShell } from '../components/wizard/WizardStepShell'
+import { SummarySection } from '../components/wizard/SummarySection'
+import { useRequireStepData } from '../hooks/useRequireStepData'
+import { defaultFormValues, type FormValues } from '../schemas/formSchema'
+import { getOptionLabel, TEMPO_EMPRESA_OPTIONS, UF_OPTIONS } from '../constants/options'
+import { generateSummaryPdf } from '../lib/pdf'
+import { clearStoredFormValues } from '../lib/storage'
+
+export function SummaryPage() {
+ useRequireStepData('profissao', '/etapa-3')
+ const { getValues, reset } = useFormContext()
+ const navigate = useNavigate()
+ const values = getValues()
+
+ function handleExport() {
+ generateSummaryPdf(values)
+ }
+
+ function handleNewRegistration() {
+ clearStoredFormValues()
+ reset(defaultFormValues)
+ navigate('/etapa-1')
+ }
+
+ return (
+
+ navigate('/etapa-1')}
+ items={[
+ { label: 'Nome completo', value: values.fullName },
+ { label: 'Data de nascimento', value: values.birthDate },
+ { label: 'CPF', value: values.cpf },
+ { label: 'Telefone', value: values.phone },
+ { label: 'E-mail', value: values.email },
+ ]}
+ />
+ navigate('/etapa-2')}
+ items={[
+ { label: 'CEP', value: values.cep },
+ { label: 'Endereço', value: values.endereco },
+ { label: 'Bairro', value: values.bairro },
+ { label: 'Cidade', value: values.cidade },
+ { label: 'Estado', value: getOptionLabel(UF_OPTIONS, values.estado) },
+ ]}
+ />
+ navigate('/etapa-3')}
+ items={[
+ { label: 'Empresa', value: values.empresa },
+ { label: 'Profissão', value: values.profissao },
+ { label: 'Salário', value: values.salario },
+ { label: 'Tempo de empresa', value: getOptionLabel(TEMPO_EMPRESA_OPTIONS, values.tempoDeEmpresa) },
+ ]}
+ />
+
+
+
+
+
+ )
+}
diff --git a/frontend/src/schemas/formSchema.test.ts b/frontend/src/schemas/formSchema.test.ts
new file mode 100644
index 0000000..a6a002a
--- /dev/null
+++ b/frontend/src/schemas/formSchema.test.ts
@@ -0,0 +1,95 @@
+import { describe, expect, it } from 'vitest'
+import { addressSchema, defaultFormValues, formSchema, personalDataSchema, professionalSchema } from './formSchema'
+
+const validValues = {
+ fullName: 'Maria da Silva Souza',
+ birthDate: '15/05/1990',
+ cpf: '529.982.247-25',
+ phone: '(11) 98765-4321',
+ email: 'maria@example.com',
+ cep: '01310-100',
+ endereco: 'Avenida Paulista',
+ bairro: 'Bela Vista',
+ cidade: 'São Paulo',
+ estado: 'SP',
+ empresa: 'Verity Tecnologia',
+ profissao: 'Desenvolvedor(a) de Software',
+ salario: 'R$ 8.500,50',
+ tempoDeEmpresa: '2-5-anos',
+}
+
+describe('formSchema', () => {
+ it('accepts a fully valid payload', () => {
+ expect(formSchema.safeParse(validValues).success).toBe(true)
+ })
+
+ it('rejects the untouched default values', () => {
+ expect(formSchema.safeParse(defaultFormValues).success).toBe(false)
+ })
+})
+
+describe('personalDataSchema', () => {
+ it('requires at least two words for the full name', () => {
+ const result = personalDataSchema.safeParse({ ...validValues, fullName: 'Maria' })
+ expect(result.success).toBe(false)
+ })
+
+ it('rejects an invalid CPF', () => {
+ const result = personalDataSchema.safeParse({ ...validValues, cpf: '111.111.111-11' })
+ expect(result.success).toBe(false)
+ })
+
+ it('rejects a malformed phone number', () => {
+ const result = personalDataSchema.safeParse({ ...validValues, phone: '11987654321' })
+ expect(result.success).toBe(false)
+ })
+
+ it('accepts an 8-digit landline phone number', () => {
+ const result = personalDataSchema.safeParse({ ...validValues, phone: '(11) 3456-7890' })
+ expect(result.success).toBe(true)
+ })
+
+ it('rejects an invalid email', () => {
+ const result = personalDataSchema.safeParse({ ...validValues, email: 'not-an-email' })
+ expect(result.success).toBe(false)
+ })
+
+ it('rejects an impossible birth date', () => {
+ const result = personalDataSchema.safeParse({ ...validValues, birthDate: '31/02/2020' })
+ expect(result.success).toBe(false)
+ })
+})
+
+describe('addressSchema', () => {
+ it('rejects a malformed CEP', () => {
+ const result = addressSchema.safeParse({ ...validValues, cep: '01310100' })
+ expect(result.success).toBe(false)
+ })
+
+ it('rejects an unknown UF', () => {
+ const result = addressSchema.safeParse({ ...validValues, estado: 'XX' })
+ expect(result.success).toBe(false)
+ })
+
+ it('rejects an empty bairro', () => {
+ const result = addressSchema.safeParse({ ...validValues, bairro: '' })
+ expect(result.success).toBe(false)
+ })
+})
+
+describe('professionalSchema', () => {
+ it('rejects a zero salary', () => {
+ const result = professionalSchema.safeParse({ ...validValues, salario: 'R$ 0,00' })
+ expect(result.success).toBe(false)
+ })
+
+ it('rejects a missing profession', () => {
+ const result = professionalSchema.safeParse({ ...validValues, profissao: '' })
+ expect(result.success).toBe(false)
+ })
+
+ it('rejects a missing tempoDeEmpresa', () => {
+ const result = professionalSchema.safeParse({ ...validValues, tempoDeEmpresa: '' })
+ expect(result.success).toBe(false)
+ })
+})
diff --git a/frontend/src/schemas/formSchema.ts b/frontend/src/schemas/formSchema.ts
new file mode 100644
index 0000000..b49f098
--- /dev/null
+++ b/frontend/src/schemas/formSchema.ts
@@ -0,0 +1,81 @@
+import { z } from 'zod'
+import { isValidCPF } from '../lib/cpf'
+import { isValidBirthDate, parseCurrencyToNumber } from '../lib/masks'
+import { UF_OPTIONS } from '../constants/options'
+
+const PHONE_REGEX = /^\(\d{2}\) \d{4,5}-\d{4}$/
+const CEP_REGEX = /^\d{5}-\d{3}$/
+const UF_CODES = UF_OPTIONS.map((option) => option.value)
+
+export const personalDataSchema = z.object({
+ fullName: z
+ .string()
+ .trim()
+ .min(1, 'Informe o nome completo')
+ .refine((value) => value.trim().split(/\s+/).length >= 2, {
+ message: 'Informe nome e sobrenome',
+ }),
+ birthDate: z
+ .string()
+ .min(1, 'Informe a data de nascimento')
+ .refine(isValidBirthDate, { message: 'Data de nascimento inválida' }),
+ cpf: z
+ .string()
+ .min(1, 'Informe o CPF')
+ .refine(isValidCPF, { message: 'CPF inválido' }),
+ phone: z
+ .string()
+ .min(1, 'Informe o telefone')
+ .regex(PHONE_REGEX, 'Telefone inválido'),
+ email: z.string().min(1, 'Informe o e-mail').email('E-mail inválido'),
+})
+
+export const addressSchema = z.object({
+ cep: z.string().min(1, 'Informe o CEP').regex(CEP_REGEX, 'CEP inválido'),
+ endereco: z.string().min(1, 'Informe o endereço'),
+ bairro: z.string().min(1, 'Informe o bairro'),
+ cidade: z.string().min(1, 'Informe a cidade'),
+ estado: z
+ .string()
+ .min(1, 'Informe o estado')
+ .refine((value) => UF_CODES.includes(value.toUpperCase()), {
+ message: 'Estado inválido',
+ }),
+})
+
+export const professionalSchema = z.object({
+ empresa: z.string().min(1, 'Informe a empresa'),
+ profissao: z.string().min(1, 'Selecione uma profissão'),
+ salario: z
+ .string()
+ .min(1, 'Informe o salário')
+ .refine((value) => parseCurrencyToNumber(value) > 0, {
+ message: 'Informe um salário válido',
+ }),
+ tempoDeEmpresa: z.string().min(1, 'Selecione o tempo de empresa'),
+})
+
+export const formSchema = personalDataSchema.merge(addressSchema).merge(professionalSchema)
+
+export type FormValues = z.infer
+
+export const STEP1_FIELDS = Object.keys(personalDataSchema.shape) as (keyof FormValues)[]
+export const STEP2_FIELDS = Object.keys(addressSchema.shape) as (keyof FormValues)[]
+export const STEP3_FIELDS = Object.keys(professionalSchema.shape) as (keyof FormValues)[]
+
+export const defaultFormValues: FormValues = {
+ fullName: '',
+ birthDate: '',
+ cpf: '',
+ phone: '',
+ email: '',
+ cep: '',
+ endereco: '',
+ bairro: '',
+ cidade: '',
+ estado: '',
+ empresa: '',
+ profissao: '',
+ salario: '',
+ tempoDeEmpresa: '',
+}
diff --git a/frontend/src/test/renderWithForm.tsx b/frontend/src/test/renderWithForm.tsx
new file mode 100644
index 0000000..aa64c30
--- /dev/null
+++ b/frontend/src/test/renderWithForm.tsx
@@ -0,0 +1,36 @@
+import type { ReactElement, ReactNode } from 'react'
+import { render } from '@testing-library/react'
+import { MemoryRouter } from 'react-router-dom'
+import { FormProvider, useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { defaultFormValues, formSchema, type FormValues } from '../schemas/formSchema'
+
+function FormWrapper({
+ children,
+ initialValues,
+}: {
+ children: ReactNode
+ initialValues?: Partial
+}) {
+ const methods = useForm({
+ resolver: zodResolver(formSchema),
+ defaultValues: { ...defaultFormValues, ...initialValues },
+ })
+
+ return {children}
+}
+
+interface RenderWithFormOptions {
+ initialValues?: Partial
+ initialPath?: string
+}
+
+export function renderWithForm(ui: ReactElement, options: RenderWithFormOptions = {}) {
+ const { initialValues, initialPath = '/' } = options
+
+ return render(
+
+ {ui}
+ ,
+ )
+}
diff --git a/frontend/src/test/setup.ts b/frontend/src/test/setup.ts
new file mode 100644
index 0000000..1555cbe
--- /dev/null
+++ b/frontend/src/test/setup.ts
@@ -0,0 +1,8 @@
+import '@testing-library/jest-dom'
+import { cleanup } from '@testing-library/react'
+import { afterEach } from 'vitest'
+
+afterEach(() => {
+ cleanup()
+ window.localStorage.clear()
+})
diff --git a/frontend/tsconfig.app.json b/frontend/tsconfig.app.json
new file mode 100644
index 0000000..6830b6f
--- /dev/null
+++ b/frontend/tsconfig.app.json
@@ -0,0 +1,26 @@
+{
+ "compilerOptions": {
+ "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+ "target": "es2023",
+ "lib": ["ES2023", "DOM"],
+ "module": "esnext",
+ "types": ["vite/client"],
+ "allowArbitraryExtensions": true,
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "verbatimModuleSyntax": true,
+ "moduleDetection": "force",
+ "noEmit": true,
+ "jsx": "react-jsx",
+
+ /* Linting */
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "erasableSyntaxOnly": true,
+ "noFallthroughCasesInSwitch": true
+ },
+ "include": ["src"]
+}
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
new file mode 100644
index 0000000..1ffef60
--- /dev/null
+++ b/frontend/tsconfig.json
@@ -0,0 +1,7 @@
+{
+ "files": [],
+ "references": [
+ { "path": "./tsconfig.app.json" },
+ { "path": "./tsconfig.node.json" }
+ ]
+}
diff --git a/frontend/tsconfig.node.json b/frontend/tsconfig.node.json
new file mode 100644
index 0000000..8455dcb
--- /dev/null
+++ b/frontend/tsconfig.node.json
@@ -0,0 +1,23 @@
+{
+ "compilerOptions": {
+ "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+ "target": "es2023",
+ "lib": ["ES2023"],
+ "types": ["node"],
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "module": "nodenext",
+ "allowImportingTsExtensions": true,
+ "verbatimModuleSyntax": true,
+ "moduleDetection": "force",
+ "noEmit": true,
+
+ /* Linting */
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "erasableSyntaxOnly": true,
+ "noFallthroughCasesInSwitch": true
+ },
+ "include": ["vite.config.ts"]
+}
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
new file mode 100644
index 0000000..5f23a90
--- /dev/null
+++ b/frontend/vite.config.ts
@@ -0,0 +1,31 @@
+///
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vite.dev/config/
+export default defineConfig({
+ plugins: [react()],
+ test: {
+ environment: 'jsdom',
+ globals: true,
+ setupFiles: ['./src/test/setup.ts'],
+ css: true,
+ coverage: {
+ provider: 'v8',
+ reporter: ['text', 'html', 'lcov'],
+ include: ['src/**/*.{ts,tsx}'],
+ exclude: [
+ 'src/main.tsx',
+ 'src/vite-env.d.ts',
+ 'src/test/**',
+ 'src/**/*.d.ts',
+ ],
+ thresholds: {
+ lines: 80,
+ statements: 80,
+ functions: 80,
+ branches: 80,
+ },
+ },
+ },
+})