# Frontend: Route Naming & Kebab-Case Requirements

> Referenced from `steps/step-05-frontend.md` — Route path conventions and naming rules.

---

## Route Naming Rule (BLOCKING)

All route paths MUST use **kebab-case** to match navigation seed data exactly.

**Transformation:** `PascalCase` → `kebab-case`

Examples:
- `HumanResources` → `human-resources`
- `Employees` → `employees`
- `TimeManagement` → `time-management`
- `OrderItems` → `order-items`

---

## Forbidden Patterns

| Pattern | Issue |
|---------|-------|
| `humanresources` | Concatenated words without hyphens |
| `timemanagement` | Missing hyphens in multi-word names |
| `mymodule` | Ambiguous (is this "my-module" or literal "mymodule"?) |

---

## Required Patterns

| Pattern | Correct Usage |
|---------|---------------|
| `human-resources` | Multi-word segment with proper hyphens |
| `time-management` | Proper kebab-case |
| `employees` | Single-word segments stay lowercase |
| `products` | Single-word segments stay lowercase |

---

## Verification

Route paths MUST match the navigation seed data routes (which use `ToKebabCase()`).

**Example verification:**

Navigation seed data:
```csharp
Route = "/human-resources/time-management"  // From ToKebabCase()
```

PageRegistry keys and seed data ComponentKeys must use kebab-case:
```tsx
// v3.7+ (DynamicRouter): componentKey uses dot-separated kebab-case
PageRegistry.register('human-resources.time-management', lazy(() => ...));

// Legacy (applicationRoutes): paths use kebab-case
const applicationRoutes: ApplicationRouteExtensions = {
  'human-resources': [  // ← kebab-case
    { path: 'time-management', element: <TimeManagementPage /> },  // ← kebab-case
  ],
};
```

---

## Kebab-Case Conversion Rules

| Input | Output | Rule |
|-------|--------|------|
| `ProductCode` | `product-code` | Insert `-` before uppercase letters |
| `Product` | `product` | Lowercase single words |
| `IDs` | `ids` | Lowercase acronyms |
| `HTTPSConnection` | `https-connection` | Insert `-` before each uppercase cluster transition |
| `CamelCaseExample` | `camel-case-example` | Insert `-` at each camelCase boundary |

---

## Implementation Pattern

When generating routes, apply kebab-case to all multi-word segments:

```tsx
// CORRECT
<Route path="/human-resources" element={<HRLayout />}>
  <Route path="employees" element={<EmployeesPage />} />
  <Route path="time-management" element={<TimeManagementPage />} />
</Route>

// FORBIDDEN
<Route path="/humanresources" element={<HRLayout />} />
<Route path="/HR" element={<HRLayout />} />
<Route path="/human_resources" element={<HRLayout />} />
```

---

## Cross-Reference with Navigation Seeds

Before finalizing route paths, verify they match navigation seeds:

**Step 1:** Extract application code from `{full_path}` (e.g., `human-resources.time-management` → app: `human-resources`)

**Step 2:** Check existing navigation seeds:
```bash
Glob: **/Seeding/Data/Navigation/NavigationApplicationSeedData.cs
Search for: Route = "/{application_kebab}"
```

**Step 3:** Ensure App.tsx routes use the exact same kebab-case format.

---

## Validation Checklist

- [ ] All multi-word segments use hyphens (kebab-case)
- [ ] Single-word segments are lowercase
- [ ] Route paths match navigation seed data routes
- [ ] No uppercase letters in route paths
- [ ] No underscores (`_`) or camelCase in paths
