Add Referrals navigation button to volunteer social feed page

Bunker Admin

admin/src/pages/volunteer/SocialFeedPage.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
-import { Typography, Skeleton, Empty, Pagination, Button, Space, Card, List } from 'antd';
+import { Typography, Skeleton, Empty, Pagination, Button, Space, Card, List, Tag } from 'antd';
-import { TeamOutlined, CompassOutlined, TrophyOutlined } from '@ant-design/icons';
+import { TeamOutlined, CompassOutlined, TrophyOutlined, FlagOutlined, ThunderboltOutlined, GiftOutlined } from '@ant-design/icons';
 import { useNavigate } from 'react-router-dom';
 import { api } from '@/lib/api';
 import FeedCard from '@/components/social/FeedCard';
@@ -26,12 +26,14 @@ export default function SocialFeedPage() {
   const [items, setItems] = useState<FeedItem[]>([]);
   const [pagination, setPagination] = useState<PaginationMeta | null>(null);
   const [topVolunteers, setTopVolunteers] = useState<LeaderboardEntry[]>([]);
+  const [activeChallenge, setActiveChallenge] = useState<{ id: string; title: string; teamName: string; score: number } | null>(null);
   const [loading, setLoading] = useState(true);
   const [page, setPage] = useState(1);
 
   useEffect(() => {
     loadFeed(page);
     loadTopVolunteers();
+    loadActiveChallenge();
   }, [page]);
 
   const loadFeed = async (p: number) => {
@@ -52,6 +54,22 @@ export default function SocialFeedPage() {
     } catch {}
   };
 
+  const loadActiveChallenge = async () => {
+    try {
+      const { data } = await api.get('/social/challenges', { params: { status: 'ACTIVE' } });
+      const challenges = data.challenges || [];
+      for (const c of challenges) {
+        try {
+          const { data: teamData } = await api.get(`/social/challenges/${c.id}/my-team`);
+          if (teamData.team) {
+            setActiveChallenge({ id: c.id, title: c.title, teamName: teamData.team.name, score: teamData.team.score });
+            break;
+          }
+        } catch {}
+      }
+    } catch {}
+  };
+
   return (
     <div style={{ padding: '12px 0' }}>
       <Space style={{ width: '100%', justifyContent: 'space-between', marginBottom: 12 }}>
@@ -63,9 +81,38 @@ export default function SocialFeedPage() {
           <Button size="small" icon={<TeamOutlined />} onClick={() => navigate('/volunteer/friends')}>
             Friends
           </Button>
+          <Button size="small" icon={<GiftOutlined />} onClick={() => navigate('/volunteer/referrals')}>
+            Referrals
+          </Button>
         </Space>
       </Space>
 
+      {activeChallenge && (
+        <Card
+          size="small"
+          style={{
+            marginBottom: 12,
+            borderLeft: '3px solid #52c41a',
+            cursor: 'pointer',
+          }}
+          onClick={() => navigate(`/volunteer/challenges/${activeChallenge.id}`)}
+        >
+          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+            <ThunderboltOutlined style={{ color: '#52c41a', fontSize: 18 }} />
+            <div style={{ flex: 1 }}>
+              <Typography.Text strong style={{ fontSize: 13 }}>
+                <FlagOutlined style={{ marginRight: 4 }} />
+                Active Challenge: {activeChallenge.title}
+              </Typography.Text>
+              <Typography.Text type="secondary" style={{ display: 'block', fontSize: 12 }}>
+                Team "{activeChallenge.teamName}" — {activeChallenge.score} pts
+              </Typography.Text>
+            </div>
+            <Tag color="green">LIVE</Tag>
+          </div>
+        </Card>
+      )}
+
       <FriendSuggestions limit={5} />
 
       {topVolunteers.length > 0 && (