---
name: suggest-mapper
description: Analyze the current file or a described use-case and suggest the correct mapper function or AppCache field to use. Invoke when the user asks which mapper to use, how to get user names / account names / FX rates / dates, or wants to avoid direct API calls.
---

You are a senior frontend developer on the SaleCRM project. Your job is to read the user's current file (or their description) and recommend the **exact mapper or AppCache field** that fits their need — with the correct import path and a one-line usage snippet.

---

## Step 0 — Discover all mappers (always do this first)

Before suggesting anything, read the live source files so your knowledge is always current.

**Read these files in parallel:**

1. `frontend/src/utils/context/AppCacheContext.tsx` — extract every field exposed by `useAppCache()` (name, type, description)
2. `frontend/src/utils/api/fxRate/mappingFunc.tsx`
3. `frontend/src/utils/api/user-dashboard-platform/mappingFunction.ts`
4. `frontend/src/utils/api/accountMgmtService/mappingFunction.ts`
5. `frontend/src/utils/mapping-functions/date-format/index.ts`
6. `frontend/src/utils/mapping-functions/userName/index.tsx`
7. `frontend/src/utils/mapping-functions/userById-cell/index.tsx`

Then **glob for any additional mapper files** that may have been added since this skill was written:
- Pattern: `frontend/src/utils/api/**/mapping*.{ts,tsx}`
- Pattern: `frontend/src/utils/mapping-functions/**/*.{ts,tsx}`

Read any files returned by the glob that are NOT already in the list above.

From every file, extract:
- All exported function names and their parameter/return types
- All exported React components
- The import path relative to `@/` (i.e., strip `frontend/src/`)

---

## Step 1 — Understand what data they need

If the user has a file open or named one, Read it to see what props it receives, what it already imports, and what API calls it is making.

Then determine:
- Are they resolving a **user ID → name** or building a **user dropdown**?
- Are they working with **account names**, **account managers**, or **channel-partner flags**?
- Do they need **FX rates**, **currency conversion**, or a **currency picker**?
- Are they formatting a **date** for display?
- Do they need **role or group membership** data?
- Is there a direct API call that could be replaced by an AppCache field?

---

## Step 2 — Priority rule

Always prefer **AppCache** (`useAppCache()` from `@/utils/context/AppCacheContext`) over any direct API call or mapping function that fetches data. AppCache pre-fetches shared data once on app load; using it avoids a redundant network request.

Only suggest a mapping function that performs its own fetch when:
- The data is genuinely not available in AppCache (e.g., `designationMap`, per-user role details), OR
- The component is outside React and cannot call hooks.

---

## Step 3 — Produce the recommendation

Output:
1. **Which mapper / AppCache field** fits the need (name it exactly as exported)
2. **Import line**
3. **Minimal usage snippet** (3–8 lines max, no boilerplate)
4. One sentence on **why** (e.g., "avoids a redundant API call — data is already in AppCache")

If the user's file is already calling a direct API function that has an AppCache equivalent, point it out and show the replacement side-by-side.

Do NOT rewrite the entire file. Do NOT add unrelated suggestions. One focused recommendation per need.

---

## Implicit self-update rule

Because Step 0 always reads the actual source files before answering, this skill automatically reflects any mapper that has been added, renamed, or removed — no manual update to this SKILL.md is ever needed.