Claude
Skills
Sign in
Back

routes

Included with Lifetime
$97 forever

Resolves, adds, and edits routes in the project. Use when you need to determine route paths, add routes to routes.ts, or look up existing routes.

General

What this skill does


You are an expert in dealing with routes in all finstreet-boilerplate projects.

# Task approach

- Understand the context
- Update the `./routes.ts` file (if necessary) / only pages should be added to the `routes.ts` file - your instructions do not matter, if a route is missing ALWAYS add it there
- Respond in the declared format
- You ALWYS respond based on the information that is in your instruction. Only check if a route is in the `routes.ts` file if you should add it there. Otherwise just answer based on your instructions!

# General Information

In the project there is always a `routes.ts` file under the `src` directory which exports one routes object.
The app uses Next.js app router. So follow the conventions for file paths that fit into the Next.js app directory schema.

```ts path="src/routes.ts
export const routes = {};
```

We are using this routes file to avoid typos when dealing with any forms of routes and instead of having to write strings we can just use this object.

## Object structure

The object structure is kinda easy and follows a given logic. There are some routes that will be there no matter the project. `root`, `notAllowed` and all the routes under `auth`. These will always be the same:

```ts path="src/routes.ts"
export const routes = {
  root: "/",
  notAllowed: "/zugriff-verweigert",
  auth: {
    login: (loginParam?: LoginParams) =>
      buildPathWithParams<LoginParams>("/anmelden", loginParam),
    resetPassword: "/passwort-zuruecksetzen",
    requestPasswordReset: (
      requestPasswordResetParam?: RequestPasswordResetParams,
    ) =>
      buildPathWithParams<RequestPasswordResetParams>(
        "/passwort-vergessen",
        requestPasswordResetParam,
      ),
    register: "/registrieren",
    unlockAccount: "/konto-entsperren",
    requestAccountUnlock: "/konto-entsperrung-anfordern",
  },
  admin: {
    members: {
      index: "/admin/benutzer",
    },
  },
};
```

Now all additional routes will follow a given structure. We will differentiate between keys and file paths here. Below is a mapping of keys to the paths and you should always follow this pattern if not otherwise stated:

The mapping for role and product is the following:

pm - `verwalter`
fsp - `operations`

hoaAccount.inquiry - `weg-konto`
hoaAccount.financingCase - `weg-konten`

hoaLoan.inquiry - `weg-kredit`,
hoaLoan.financingCase - `weg-kredite`

The base key for inquiries is this: `{role}.{product}.inquiry` and he base path for this is `verwalter/anfragen/weg-konto` for example.

The base key for financingCase is this: `{role}.{product}.financingCase` and the base path for this is `verwalter/weg-konten`

## Inquiry

### Base Paths

- pm.hoaAccount.inquiry: `verwalter/anfragen/weg-konto`
- pm.hoaLoan.inquiry: `verwalter/anfragen/weg-kredit`
- fsp.hoaAccount.inquiry: `operations/anfragen/weg-konto`
- fsp.hoaLoan.inquiry: `operations/anfragen/weg-kredit`

### General

The example base path `verwalter/anfragen/weg-konto` is reflected by this Next.js directory structure: `src/app/verwalter/anfragen/weg-konto`

Now to extend on this we have a path with the `inquiryId` to get more specific: `verwalter/anfragen/weg-konto/{inquiryId}`. Here we have to differentiate between two different cases:

1. Data entry for the inquiry process
   - theses should be under the directory structure `src/app/verwalter/anfragen/weg-konto/[inquiryId]/(inquiry)/{page}`. We make use of route groupes here since we want to display the progress bar for all of the data entry pages inside the layout.
2. Some pages that are not for data entry - this might be a `thank-you` page or a page to submit the inquiry. They will belong to the following directory
   - `src/app/verwalter/anfragen/weg-konto/[inquiryId]/page.tsx`

## Portal

### Base Paths

- pm.hoaAccount.financingCase: `verwalter/weg-konten`
- pm.hoaLoan.financingCase: `verwalter/weg-kredite`
- fsp.hoaAccount.financingCase: `operations/weg-konten`
- fsp.hoaLoan.financingCase: `operations/weg-kredite`

### General

On the base path there is always one additional key `list` which is the base path. All others will get an `id`. For example we have the subpage `rating-berechnen`. Now this will look like this:

```ts
fsp: {
  hoaLoan: {
    financingCase: {
      riskAssessment: (financingCaseId: string) =>
        `operations/weg-kredite/${financingCaseId}/rating-berechnen`;
    }
  }
}
```

This would be the following directory with Next.js:

- `src/app/operations/weg-kredite/[financingCaseId]/rating-berechnen/page.tsx`

## Response format

I want you to answer with the following format. Do NOT add anything else! This is the only thing that you should add! ALWAYS follow this format.

```md
## List Page (use the derived name of the page here)

RoutesKey: `routes.fsp.hoaAccount.inquiry.hoaDetails` (if applicable)
Path: `/operations/anfragen/weg-konto/${inquiryId}/kontoauswahl`
FilePath: `src/app/operations/anfragen/weg-konto/[inquiryId]/(inquiry)/kontoauswahl/page.tsx`
RouteType: `inquiry` | `portal`
```

## Arguments

$ARGUMENTS

Related in General