Add OSHA Form 301 and Osha page components

- Implemented Form301 component for displaying OSHA Form 301 equivalent, including employee and case information.
- Created Osha component to manage OSHA recordkeeping, including tabs for 300 Log, 300A Summary, Hours & rates, and Submit to OSHA.
- Added functionality for printing and downloading CSV files for OSHA submissions.
- Integrated loading and error handling states for data fetching.

e2e/osha.spec.ts

@@ -0,0 +1,64 @@
+import { expect, test } from '@playwright/test'
+import { signIn, unique } from './fixtures'
+
+test('records an injury on the OSHA log and exports it', async ({ page, browser, isMobile }) => {
+  test.skip(isMobile, 'Recordkeeping is a desktop task')
+  test.setTimeout(60_000)
+  const title = unique('Burn from hot press platen')
+
+  // A supervisor reports it; they can't see medical details
+  const supervisor = await (await browser.newContext()).newPage()
+  await signIn(supervisor, 'supervisor')
+  await supervisor.goto('/report')
+  await supervisor.getByLabel('Incident title').fill(title)
+  await supervisor.getByLabel('Incident type').selectOption('injury')
+  await supervisor.getByRole('button', { name: 'Submit report' }).click()
+  await expect(supervisor.getByRole('heading', { level: 1 })).toHaveText(title)
+  const url = supervisor.url()
+
+  // The safety manager decides recordability
+  await signIn(page, 'safety_manager')
+  await page.goto(url)
+  await page.getByRole('button', { name: 'Add person' }).click()
+  await page.getByLabel('Name', { exact: true }).fill('Casey Worker')
+  await page.getByPlaceholder('e.g. Press operator').fill('Press operator')
+  const verdict = page.locator('[aria-live="polite"]')
+  await expect(verdict).toContainText('Answer the questions above')
+  await page.getByText('Is it work-related?').locator('..').getByLabel('Yes').check()
+  await page.getByText('Is it a new case?').locator('..').getByLabel('Yes').check()
+  await expect(verdict).toContainText('Not recordable') // first aid only
+  await page.getByText('Days away from work (count').click()
+  await page.getByLabel('Days away so far').fill('3')
+  await expect(verdict).toContainText('Recordable: Days away from work')
+  await page.getByText('Hospitalized as an in-patient').click()
+  await expect(page.getByText('Must be reported to OSHA within 24 hours.')).toBeVisible()
+  await page.getByPlaceholder('e.g. Laceration, sprain, burn').fill('Second-degree burn')
+  await page.getByRole('button', { name: 'Add person' }).click()
+
+  await expect(page.getByText('OSHA recordable · Days away from work')).toBeVisible()
+  await expect(page.getByRole('alert').filter({ hasText: 'Report to OSHA within 24 hours' })).toBeVisible()
+
+  // Supervisors see that someone was hurt, nothing more
+  await supervisor.reload()
+  await expect(supervisor.getByText('1 person recorded. Injury and medical details are confidential')).toBeVisible()
+  await expect(supervisor.getByText('Casey Worker')).toHaveCount(0)
+
+  // It's on the 300 Log, and the 301 is one click away
+  await page.getByRole('link', { name: 'OSHA log' }).click()
+  const row = page.getByRole('row').filter({ hasText: 'Casey Worker' })
+  await expect(row).toContainText('Second-degree burn')
+  await expect(row).toContainText('Missing:')
+
+  await page.getByRole('tab', { name: 'Submit to OSHA' }).click()
+  await expect(page.getByText('Enter hours worked for each month.')).toBeVisible()
+  const download = page.waitForEvent('download')
+  await page.getByRole('link', { name: /300A summary CSV/ }).click()
+  expect((await download).suggestedFilename()).toMatch(/^osha-ita-300a-\d{4}\.csv$/)
+})
+
+test("OSHA pages aren't offered to supervisors", async ({ page, isMobile }) => {
+  await signIn(page, 'supervisor')
+  if (isMobile) await page.getByRole('button', { name: 'Open menu' }).click()
+  await expect(page.getByRole('link', { name: 'Incidents' }).first()).toBeVisible()
+  await expect(page.getByRole('link', { name: 'OSHA log' })).toHaveCount(0)
+})