feat(dashboard): add advanced achievements system with progress tracking (JhaSourav07#924)

## Description
Fixes JhaSourav07#914

## Pillar

- [ ] 🎨 Pillar 1 — New Theme Design
- [ ] 📐 Pillar 2 — Geometric SVG Improvement
- [ ] 🕐 Pillar 3 — Timezone Logic Optimization
- [ ] 🛠️ Other (Bug fix, refactoring, docs)

## Visual Preview

## Checklist before requesting a review:

- [ ] I have read the `CONTRIBUTING.md` file.
- [ ] I have tested these changes locally
(`localhost:3000/api/streak?user=YOUR_USERNAME`).
- [ ] I have run `npm run format` and `npm run lint` locally and
resolved all errors (CI will fail otherwise).
- [ ] My commits follow the Conventional Commits format (e.g.,
`feat(themes): ...`, `fix(calculate): ...`).
- [ ] I have updated `README.md` if I added a new theme or URL
parameter.
- [ ] I have started the repo.
- [ ] I have made sure that i have only one commit to merge in this PR.
- [ ] The SVG output matches the CommitPulse "premium quality" aesthetic
standard (no raw elements, smooth animations, correct fonts).
- [ ] (Recommended) I joined the CommitPulse Discord community for
contributor discussions, mentorship, and faster PR support.

Author: PiyushBorban49

components/dashboard/Achievements.test.tsx

@@ -37,7 +37,7 @@ const mockAchievements = [
     id: '1',
     title: 'Achiev 1',
     description: 'Desc 1',
-    icon: 'award',
+    icon: '🏆',
     type: 'streak' as const,
     isUnlocked: true,
     currentValue: 10,
@@ -48,7 +48,7 @@ const mockAchievements = [
     id: '2',
     title: 'Achiev 2',
     description: 'Desc 2',
-    icon: 'award',
+    icon: '🏆',
     type: 'contributions' as const,
     isUnlocked: false,
     currentValue: 5,
@@ -59,7 +59,7 @@ const mockAchievements = [
     id: '3',
     title: 'Achiev 3',
     description: 'Desc 3',
-    icon: 'award',
+    icon: '🔥',
     type: 'streak' as const,
     isUnlocked: true,
     currentValue: 5,
@@ -70,7 +70,7 @@ const mockAchievements = [
     id: '4',
     title: 'Achiev 4',
     description: 'Desc 4',
-    icon: 'award',
+    icon: '🏆',
     type: 'contributions' as const,
     isUnlocked: false,
     currentValue: 1,
@@ -81,7 +81,7 @@ const mockAchievements = [
     id: '5',
     title: 'Achiev 5',
     description: 'Desc 5',
-    icon: 'award',
+    icon: '🔥',
     type: 'streak' as const,
     isUnlocked: false,
     currentValue: 0,
@@ -90,6 +90,43 @@ const mockAchievements = [
   },
 ];
 
+// New achievement types for extended tests
+const behaviorAchievements = [
+  {
+    id: 'weekend-warrior',
+    title: 'Weekend Warrior',
+    description: '10+ contributions on weekends (Sat & Sun)',
+    icon: '🏋️',
+    type: 'behavior' as const,
+    isUnlocked: true,
+    currentValue: 15,
+    threshold: 10,
+    progress: 100,
+  },
+  {
+    id: 'polyglot',
+    title: 'Polyglot',
+    description: 'Used 5+ distinct programming languages',
+    icon: '🐙',
+    type: 'behavior' as const,
+    isUnlocked: false,
+    currentValue: 3,
+    threshold: 5,
+    progress: 60,
+  },
+  {
+    id: 'consistency-500',
+    title: 'Consistency King',
+    description: 'Reached 500 total contributions',
+    icon: '👑',
+    type: 'contributions' as const,
+    isUnlocked: false,
+    currentValue: 250,
+    threshold: 500,
+    progress: 50,
+  },
+];
+
 describe('Achievements', () => {
   it('renders without crashing and shows the title', () => {
     render(<Achievements achievements={mockAchievements} />);
@@ -132,4 +169,37 @@ describe('Achievements', () => {
     expect(screen.queryByText('Achiev 5')).toBeNull();
     expect(screen.getByText('See All Achievements')).toBeDefined();
   });
+
+  // ── New achievement type tests ──────────────────────────────────────────────
+
+  it('renders a behavior achievement (Weekend Warrior) when unlocked', () => {
+    render(<Achievements achievements={behaviorAchievements} />);
+    expect(screen.getByText('Weekend Warrior')).toBeDefined();
+    const card = screen.getByText('Weekend Warrior').parentElement;
+    // Unlocked card should NOT have grayscale
+    expect(card?.className).not.toContain('grayscale');
+    expect(card?.className).toContain('bg-gray-100');
+  });
+
+  it('renders a behavior achievement (Polyglot) as locked with progress bar text', () => {
+    render(<Achievements achievements={behaviorAchievements} />);
+    expect(screen.getByText('Polyglot')).toBeDefined();
+    const card = screen.getByText('Polyglot').parentElement;
+    // Locked card has grayscale
+    expect(card?.className).toContain('grayscale');
+    // Progress counter should appear (3/5)
+    expect(screen.getByText('3/5')).toBeDefined();
+  });
+
+  it('renders Consistency King as locked with correct progress text', () => {
+    render(<Achievements achievements={behaviorAchievements} />);
+    expect(screen.getByText('Consistency King')).toBeDefined();
+    // Progress counter shows 250/500
+    expect(screen.getByText('250/500')).toBeDefined();
+  });
+
+  it('does not render a "See All" button when 4 or fewer achievements', () => {
+    render(<Achievements achievements={behaviorAchievements} />);
+    expect(screen.queryByText('See All Achievements')).toBeNull();
+  });
 });

components/dashboard/Achievements.tsx

@@ -2,12 +2,21 @@
 
 import { motion } from 'framer-motion';
 import { useState } from 'react';
-import { Trophy, Flame } from 'lucide-react';
+import { Trophy, Flame, Sparkles } from 'lucide-react';
 import { Achievement } from '@/types/dashboard';
 
+/** Map achievement type to the matching Lucide icon component. */
+function AchievementIcon({ type, isUnlocked }: { type: Achievement['type']; isUnlocked: boolean }) {
+  const cls = `mb-2.5 ${isUnlocked ? 'text-[#A1A1AA]' : 'text-[#555]'}`;
+  if (type === 'streak') return <Flame size={18} className={cls} />;
+  if (type === 'behavior') return <Sparkles size={18} className={cls} />;
+  return <Trophy size={18} className={cls} />;
+}
+
 export default function Achievements({ achievements }: { achievements: Achievement[] }) {
   const [showAll, setShowAll] = useState(false);
   const visibleAchievements = showAll ? achievements : achievements.slice(0, 4);
+
   return (
     <motion.div
       initial={{ opacity: 0, y: 12 }}
@@ -24,40 +33,45 @@ export default function Achievements({ achievements }: { achievements: Achieveme
       </div>
 
       <div className="grid grid-cols-2 gap-2">
-        {visibleAchievements.map((achievement, i) => {
-          const Icon = achievement.type === 'streak' ? Flame : Trophy;
-          return (
-            <motion.div
-              key={achievement.id}
-              initial={{ opacity: 0, scale: 0.97 }}
-              whileInView={{ opacity: 1, scale: 1 }}
-              viewport={{ once: true }}
-              transition={{ delay: 0.15 + i * 0.07, duration: 0.2 }}
-              className={`p-4 flex flex-col items-center text-center rounded-lg border transition-all duration-200 ${
-                achievement.isUnlocked
-                  ? 'bg-gray-100 dark:bg-[#111] border-[rgba(255,255,255,0.08)] hover:border-[rgba(255,255,255,0.16)] hover:bg-gray-200 dark:hover:bg-[#161616] cursor-default'
-                  : 'bg-white dark:bg-[#0a0a0a] border border-gray-300 dark:border-[rgba(255,255,255,0.04)] opacity-30 grayscale pointer-events-none'
-              }`}
-            >
-              <Icon
-                size={18}
-                className={`mb-2.5 ${achievement.isUnlocked ? 'text-[#A1A1AA]' : 'text-[#555]'}`}
-              />
-              <h4 className="text-[11px] font-semibold text-gray-900 dark:text-white mb-1 text-center w-full leading-snug">
-                {achievement.title}
-              </h4>
-              <p className="text-[10px] text-[#A1A1AA] line-clamp-2 w-full leading-relaxed">
-                {achievement.description}
-              </p>
-              {achievement.progress !== undefined && !achievement.isUnlocked && (
-                <p className="text-[10px] text-[#777] mt-2">
+        {visibleAchievements.map((achievement, i) => (
+          <motion.div
+            key={achievement.id}
+            initial={{ opacity: 0, scale: 0.97 }}
+            whileInView={{ opacity: 1, scale: 1 }}
+            viewport={{ once: true }}
+            transition={{ delay: 0.15 + i * 0.07, duration: 0.2 }}
+            className={`p-4 flex flex-col items-center text-center rounded-lg border transition-all duration-200 ${
+              achievement.isUnlocked
+                ? 'bg-gray-100 dark:bg-[#111] border-[rgba(255,255,255,0.08)] hover:border-[rgba(255,255,255,0.16)] hover:bg-gray-200 dark:hover:bg-[#161616] cursor-default'
+                : 'bg-white dark:bg-[#0a0a0a] border border-gray-300 dark:border-[rgba(255,255,255,0.04)] opacity-30 grayscale pointer-events-none'
+            }`}
+          >
+            <AchievementIcon type={achievement.type} isUnlocked={achievement.isUnlocked} />
+            <h4 className="text-[11px] font-semibold text-gray-900 dark:text-white mb-1 text-center w-full leading-snug">
+              {achievement.title}
+            </h4>
+            <p className="text-[10px] text-[#A1A1AA] line-clamp-2 w-full leading-relaxed">
+              {achievement.description}
+            </p>
+
+            {/* Progress indicator for locked achievements */}
+            {!achievement.isUnlocked && achievement.progress !== undefined && (
+              <div className="mt-2 w-full">
+                <div className="w-full h-1 rounded-full bg-[rgba(255,255,255,0.08)] overflow-hidden">
+                  <div
+                    className="h-full rounded-full bg-[#A1A1AA]/40 transition-all duration-500"
+                    style={{ width: `${achievement.progress}%` }}
+                  />
+                </div>
+                <p className="text-[10px] text-[#777] mt-1">
                   {achievement.currentValue}/{achievement.threshold}
                 </p>
-              )}
-            </motion.div>
-          );
-        })}
+              </div>
+            )}
+          </motion.div>
+        ))}
       </div>
+
       {achievements.length > 4 && (
         <button
           onClick={() => setShowAll(!showAll)}

lib/github.test.ts

@@ -751,16 +751,49 @@ describe('GitHub API cache behavior', () => {
 
 describe('generateAchievements', () => {
   it('marks contribution milestones correctly', () => {
-    const achievements = generateAchievements(600, 10);
+    // 600 contributions satisfies the '500 Contributions' achievement but not '1000 Contributions'
+    const achievements = generateAchievements(600, 10, 0, 0);
+
     const unlocked = achievements.filter((a) => a.isUnlocked);
     expect(unlocked.some((a) => a.title === '500 Contributions')).toBe(true);
+    expect(unlocked.some((a) => a.title === 'Consistency King')).toBe(true);
     expect(unlocked.some((a) => a.title === '1000 Contributions')).toBe(false);
   });
 
   it('unlocks all achievements for max contribution and streak values', () => {
-    const achievements = generateAchievements(1001, 101);
+    // Consistency King III requires 2000, streak needs 100, weekend needs 10, polyglot needs 5
+    const achievements = generateAchievements(2001, 101, 11, 6);
+
     expect(achievements.every((achievement) => achievement.isUnlocked === true)).toBe(true);
   });
+
+  it('marks streak milestones correctly', () => {
+    const achievements = generateAchievements(50, 35, 0, 0);
+
+    const unlocked = achievements.filter((a) => a.isUnlocked);
+
+    expect(unlocked.some((a) => a.title === '30 Day Streak')).toBe(true);
+    expect(unlocked.some((a) => a.title === '100 Day Streak')).toBe(false);
+  });
+
+  it('marks behavior milestones correctly', () => {
+    const achievements = generateAchievements(10, 1, 15, 6);
+
+    const unlocked = achievements.filter((a) => a.isUnlocked);
+
+    expect(unlocked.some((a) => a.title === 'Weekend Warrior')).toBe(true);
+    expect(unlocked.some((a) => a.title === 'Polyglot')).toBe(true);
+  });
+
+  it('caps progress between 0 and 100 for extreme values', () => {
+    const achievements = generateAchievements(999999, 999999, 999999, 999999);
+
+    for (const item of achievements) {
+      expect(Number.isFinite(item.progress)).toBe(true);
+      expect(item.progress).toBeGreaterThanOrEqual(0);
+      expect(item.progress).toBeLessThanOrEqual(100);
+    }
+  });
 });
 
 describe('validateGitHubUsername', () => {