Fix User Search trend to use selected year filter

- Trend API now accepts year parameter
- Changed from 6-month rolling window to full 12-month year view
- YTD renamed to "Year Total" showing full year for selected filter
- Chart title shows selected year (e.g., "2024 Monthly Cost Trend")
- Increased chart height to accommodate 12 months

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: clucraft

client/src/pages/UserSearch.tsx

@@ -36,7 +36,7 @@ interface TrendMonth {
 
 interface TrendData {
   monthlyTrend: TrendMonth[];
-  ytd: {
+  yearTotal: {
     year: number;
     totalCost: number;
     totalCalls: number;
@@ -115,7 +115,7 @@ export default function UserSearch() {
     try {
       const [userResponse, trendResponse] = await Promise.all([
         usageApi.searchUser(searchTerm, month, year),
-        usageApi.getUserTrend(searchTerm),
+        usageApi.getUserTrend(searchTerm, year),
       ]);
       setUserData(userResponse.data);
       setTrendData(trendResponse.data);
@@ -362,35 +362,35 @@ export default function UserSearch() {
               </div>
             </div>
 
-            {/* YTD Totals */}
+            {/* Year Totals */}
             {trendData && (
               <div className="bg-gradient-to-br from-indigo-500 to-purple-600 p-6 rounded-lg shadow">
                 <h2 className="text-sm font-medium text-indigo-100 mb-1">
-                  {trendData.ytd.year} Year-to-Date
+                  {trendData.yearTotal.year} Year Total
                 </h2>
                 <p className="text-3xl font-bold text-white mb-4">
-                  {formatCurrency(trendData.ytd.totalCost)}
+                  {formatCurrency(trendData.yearTotal.totalCost)}
                 </p>
                 <div className="grid grid-cols-2 gap-4">
                   <div>
                     <p className="text-xs text-indigo-200">Calls</p>
-                    <p className="text-lg font-semibold text-white">{trendData.ytd.totalCalls.toLocaleString()}</p>
+                    <p className="text-lg font-semibold text-white">{trendData.yearTotal.totalCalls.toLocaleString()}</p>
                   </div>
                   <div>
                     <p className="text-xs text-indigo-200">Minutes</p>
-                    <p className="text-lg font-semibold text-white">{trendData.ytd.totalMinutes.toLocaleString()}</p>
+                    <p className="text-lg font-semibold text-white">{trendData.yearTotal.totalMinutes.toLocaleString()}</p>
                   </div>
                 </div>
               </div>
             )}
 
-            {/* 6-Month Trend Sparkline */}
+            {/* Annual Cost Trend */}
             {convertedTrendData && (
               <div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow transition-colors">
-                <h2 className="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">6-Month Cost Trend</h2>
-                <ResponsiveContainer width="100%" height={100}>
+                <h2 className="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">{year} Monthly Cost Trend</h2>
+                <ResponsiveContainer width="100%" height={120}>
                   <LineChart data={convertedTrendData.monthlyTrend}>
-                    <XAxis dataKey="monthName" tick={{ fontSize: 10, fill: theme === 'dark' ? '#9ca3af' : '#6b7280' }} axisLine={false} tickLine={false} />
+                    <XAxis dataKey="monthName" tick={{ fontSize: 9, fill: theme === 'dark' ? '#9ca3af' : '#6b7280' }} axisLine={false} tickLine={false} interval={0} />
                     <YAxis hide />
                     <Tooltip
                       formatter={(value: number) => [formatCurrency(value), 'Cost']}

client/src/services/api.ts

@@ -39,8 +39,8 @@ export const usageApi = {
     api.get('/usage/top10', { params: { month, year } }),
   searchUser: (email: string, month?: number, year?: number) =>
     api.get(`/usage/user/${encodeURIComponent(email)}`, { params: { month, year } }),
-  getUserTrend: (email: string) =>
-    api.get(`/usage/user/${encodeURIComponent(email)}/trend`),
+  getUserTrend: (email: string, year?: number) =>
+    api.get(`/usage/user/${encodeURIComponent(email)}/trend`, { params: { year } }),
   getMonthlyCosts: (year?: number) =>
     api.get('/usage/monthly-costs', { params: { year } }),
   getDashboardStats: (month?: number, year?: number) =>

src/routes/usage.ts

@@ -256,26 +256,19 @@ router.get('/user/:email', async (req: AuthRequest, res: Response) => {
   }
 });
 
-// Get user trend data (6-month history and YTD)
+// Get user trend data (12-month history and yearly totals)
 router.get('/user/:email/trend', async (req: AuthRequest, res: Response) => {
   try {
     const email = req.params.email as string;
+    const { year } = req.query;
     const rates = await prisma.rateMatrix.findMany();
-    const currentYear = new Date().getFullYear();
-    const currentMonth = new Date().getMonth() + 1;
+    const selectedYear = year ? Number(year) : new Date().getFullYear();
 
-    // Get 6-month trend data
+    // Get 12-month trend data for the selected year
     const monthlyData = [];
-    for (let i = 5; i >= 0; i--) {
-      let targetMonth = currentMonth - i;
-      let targetYear = currentYear;
-      if (targetMonth <= 0) {
-        targetMonth += 12;
-        targetYear -= 1;
-      }
-
-      const startDate = new Date(targetYear, targetMonth - 1, 1);
-      const endDate = new Date(targetYear, targetMonth, 0, 23, 59, 59);
+    for (let month = 1; month <= 12; month++) {
+      const startDate = new Date(selectedYear, month - 1, 1);
+      const endDate = new Date(selectedYear, month, 0, 23, 59, 59);
 
       const calls = await prisma.callRecord.findMany({
         where: {
@@ -303,28 +296,28 @@ router.get('/user/:email/trend', async (req: AuthRequest, res: Response) => {
       }
 
       monthlyData.push({
-        month: targetMonth,
-        year: targetYear,
+        month,
+        year: selectedYear,
         monthName: startDate.toLocaleString('default', { month: 'short' }),
         cost: Math.round(totalCost * 100) / 100,
         calls: calls.length,
         minutes: Math.round(calls.reduce((sum, c) => sum + c.duration, 0) / 60),
       });
     }
 
-    // Get YTD totals
-    const ytdStartDate = new Date(currentYear, 0, 1);
-    const ytdEndDate = new Date();
+    // Get yearly totals for the selected year
+    const yearStartDate = new Date(selectedYear, 0, 1);
+    const yearEndDate = new Date(selectedYear, 11, 31, 23, 59, 59);
 
-    const ytdCalls = await prisma.callRecord.findMany({
+    const yearCalls = await prisma.callRecord.findMany({
       where: {
         userEmail: {
           contains: email,
           mode: 'insensitive',
         },
         callDate: {
-          gte: ytdStartDate,
-          lte: ytdEndDate,
+          gte: yearStartDate,
+          lte: yearEndDate,
         },
       },
       select: {
@@ -335,19 +328,19 @@ router.get('/user/:email/trend', async (req: AuthRequest, res: Response) => {
       },
     });
 
-    let ytdCost = 0;
-    for (const call of ytdCalls) {
+    let yearCost = 0;
+    for (const call of yearCalls) {
       const rate = await findRateForCall(rates, call.originCountry, call.destCountry, call.callType);
-      ytdCost += (call.duration / 60) * rate;
+      yearCost += (call.duration / 60) * rate;
     }
 
     res.json({
       monthlyTrend: monthlyData,
-      ytd: {
-        year: currentYear,
-        totalCost: Math.round(ytdCost * 100) / 100,
-        totalCalls: ytdCalls.length,
-        totalMinutes: Math.round(ytdCalls.reduce((sum, c) => sum + c.duration, 0) / 60),
+      yearTotal: {
+        year: selectedYear,
+        totalCost: Math.round(yearCost * 100) / 100,
+        totalCalls: yearCalls.length,
+        totalMinutes: Math.round(yearCalls.reduce((sum, c) => sum + c.duration, 0) / 60),
       },
     });
   } catch (error) {