fix(profile): replace any type with StatCardProps interface in KPIStats

[Srushti-Kamble14]

Summary

1. Replaced unsafe as any type assertion in setUserApiKey function with properly typed Partial
2. Changed stateKeys type from Record<AIProvider, string> to Record<AIProvider, keyof Pick<AIState, 'userGeminiKey' | 'userGroqKey' | 'userMistralKey'>> for stricter type safety
3. Improved type safety for Zustand state setter by using explicit Partial type instead of type assertion

Type of change

• Refactor

Related issue

Closes #300

Validation

• npm run lint
• npm test
• npm run build

List any additional manual verification you performed:

Verified TypeScript compilation succeeds without errors
Confirmed runtime behavior remains unchanged after refactoring

Checklist

• I kept this PR focused on one primary change
• I did not commit secrets, local logs, or scratch files
• I am requesting review on the correct scopeged

Summary by CodeRabbit

• Refactor
  • Enhanced type safety and code structure in the KPI Statistics component for improved maintainability.

[qodo-code-review]

Qodo reviews are paused for this user.

Troubleshooting steps vary by plan Learn more →

On a Teams plan?
Reviews resume once this user has a paid seat and their Git account is linked in Qodo.
Link Git account →

Using GitHub Enterprise Server, GitLab Self-Managed, or Bitbucket Data Center?
These require an Enterprise plan - Contact us
Contact us →

[github-actions]

👋 Thanks for opening a PR, @Srushti-Kamble14!

Your PR has entered the 🚦 PR Review Pipeline.

⚪ Standard PR detected — your PR will follow the standard review pipeline.

---

What happens next

Stage	Reviewer	Checks
Stage 1 — Automated Validation	🤖 Bot	DCO · Format · AI/Slop · Duplicate
Stage 2 — Human Review	👥 Maintainer	Code + Quality Review
Stage 3 — PA / Maintainer Review	🔑 Project Admin	Final Merge Decision

A pipeline status comment will appear below and update automatically as your PR progresses.

---

While you wait

• Sign all commits (git commit -s)
• Link your issue (Closes #123)
• Use a feature branch (not main)
• Avoid unrelated changes

This comment is posted only once.

[coderabbitai]

Warning

Review limit reached

@Srushti-Kamble14, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 13 minutes and 55 seconds. Learn how PR review limits work.

Your organization has run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 3371bb45-bd51-4d33-8cde-5f9867edbabd

📥 Commits

Reviewing files that changed from the base of the PR and between e3745d3 and a686a82.

📒 Files selected for processing (2)

• modules/playground/hooks/useAI.ts
• modules/profile/components/KPIStats.tsx

Walkthrough

KPIStats.tsx imports the LucideIcon type from Lucide and introduces a StatCardProps interface to replace the previously any-typed props in the StatCard component, providing explicit types for icon, label, value, color, and delay properties.

Changes

StatCard Component Typing

Layer / File(s)	Summary
StatCard component prop typing modules/profile/components/KPIStats.tsx	LucideIcon type is imported from Lucide; StatCardProps interface is defined with explicitly typed properties for icon (LucideIcon), label (string), value (string or number), color (string), and delay (number); StatCard component is refactored to use the StatCardProps interface instead of any-typed props.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

A rabbit hops through types so clear,
No any shadows here to fear,
With StatCardProps fresh and bright,
The props align in perfect sight! 🐰✨

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The PR description discusses AIState, setUserApiKey, and stateKeys type changes, which do not match the raw_summary showing only KPIStats.tsx changes with StatCardProps interface.	Update the PR description to accurately reflect the actual changes: replacing 'any' type with StatCardProps interface in KPIStats.tsx, matching the commit and file changes shown in raw_summary.
Out of Scope Changes check	❓ Inconclusive	The PR description mentions AIState and setUserApiKey changes, but raw_summary only shows KPIStats.tsx changes with StatCardProps; scope clarity is needed to confirm if all changes align with issue #300.	Clarify whether AIState/setUserApiKey changes in the description are actually part of this PR or if the description is outdated; ensure all changes target only issue #300 requirements.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately and concisely describes the main change: replacing the 'any' type with a StatCardProps interface in the KPIStats component.
Linked Issues check	✅ Passed	The PR addresses issue #300 by removing the unsafe 'any' type and introducing a properly typed StatCardProps interface in KPIStats.tsx as required.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@modules/profile/components/KPIStats.tsx`:
- Around line 15-20: Change StatCardProps.color from a generic string to a
string-literal union matching the used values (e.g., "blue" | "amber" |
"orange") and update the StatCard/KPIStats rendering to stop using template
literals for Tailwind classes; create a small mapping (e.g., colorClassMap or
colorStyles) keyed by the color union that returns the exact class strings used
previously (text-blue-500, bg-blue-500/10, ring-blue-500/20, etc.) and reference
those mapped strings in the JSX instead of
`text-${color}-500`/`bg-${color}-500/10`/`ring-${color}-500/20`; ensure
statItems uses the same union values so types align (references: StatCardProps,
statItems, KPIStats/StatCard).

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 199e8f32-b39f-48d3-8047-2a9a0d71e7a1

📥 Commits

Reviewing files that changed from the base of the PR and between f12b223 and e3745d3.

📒 Files selected for processing (1)

• modules/profile/components/KPIStats.tsx

[Srushti-Kamble14]

Fixed both issues:

1. Replaced generic string type with KpiColor union type ("blue" | "amber" | "orange") on line 19
2. Eliminated template literals for Tailwind classes by creating a colorStyles mapping object that returns exact class strings
3. Updated all references to use the mapping:
4. Line 40: ${colorStyles[color].text} instead of text-${color}-500
5. Line 44: ${colorStyles[color].bg}, ${colorStyles[color].text}, ${colorStyles[color].ring} instead of template literals
6. Typed statItems array to ensure color values align with the KpiColor union