Fixed logic and now using generated json data from the script instead…

… of manually adding files

components/FinancialSummary/BarChartComponent.tsx

@@ -6,8 +6,8 @@ import { Bar, BarChart, CartesianGrid, Legend, Tooltip, YAxis } from 'recharts';
 import type { ExpenseItem, ExpensesLinkItem } from '@/types/FinancialSummary/BarChartComponent';
 import { loadYearData } from '@/utils/loadYearData';
 
-import ExpensesData from '../../config/finance/json-data/Expenses.json';
-import ExpensesLinkData from '../../config/finance/json-data/ExpensesLink.json';
+import ExpensesData from '../../config/finance/json-data/2024/Expenses.json';
+import ExpensesLinkData from '../../config/finance/json-data//2024/ExpensesLink.json';
 import { getUniqueCategories } from '../../utils/getUniqueCategories';
 import CustomTooltip from './CustomTooltip';
 import ExpensesCard from './ExpensesCard';
@@ -30,8 +30,8 @@ export default function BarChartComponent() {
     expensesLinkData: ExpensesLinkData
   });
 
-  // Extracting unique categories and months from the data
-  const categories: string[] = getUniqueCategories();
+  // Extracting unique categories from the data
+  const categories: string[] = getUniqueCategories({ selectedYear });
   const years: string[] = ['2023', '2024']; // Add more years as needed
 
   // Effect hook to update windowWidth state on resize
@@ -54,54 +54,19 @@ export default function BarChartComponent() {
 
   // Effect to load year-specific data when year changes
   useEffect(() => {
-    if (selectedYear === 'All Years') {
-      const allYearsData: { [key: string]: ExpenseItem[] } = {};
-      const allLinksData: ExpensesLinkItem[] = [...ExpensesLinkData];
-
-      // Start with the default JSON data
-      Object.keys(ExpensesData).forEach((month) => {
-        allYearsData[month] = [...ExpensesData[month as keyof typeof ExpensesData]];
-      });
-
-      // Add data from each year
-      years.forEach((year) => {
-        const { expensesData, expensesLinkData } = loadYearData(year);
-
-        if (Object.keys(expensesData).length > 0) {
-          // Combine expenses for each month
-          Object.keys(expensesData).forEach((month) => {
-            if (!allYearsData[month]) {
-              allYearsData[month] = [];
-            }
-            allYearsData[month].push(...expensesData[month]);
-          });
-
-          // Merge unique links
-          expensesLinkData.forEach((link: ExpensesLinkItem) => {
-            if (!allLinksData.some((l) => l.category === link.category)) {
-              allLinksData.push(link);
-            }
-          });
-        }
-      });
+    // Load data for the selected year (or All_years)
+    const { expensesData, expensesLinkData } = loadYearData(
+      selectedYear === 'All Years' ? 'All Years' : selectedYear
+    );
 
+    if (Object.keys(expensesData).length === 0) {
+      // If no data found, fallback to default data
       setCurrentData({
-        expensesData: allYearsData,
-        expensesLinkData: allLinksData
+        expensesData: ExpensesData,
+        expensesLinkData: ExpensesLinkData
       });
     } else {
-      // Otherwise load year-specific data
-      const { expensesData, expensesLinkData } = loadYearData(selectedYear);
-
-      if (Object.keys(expensesData).length === 0) {
-        // If no year-specific data found, fallback to JSON data
-        setCurrentData({
-          expensesData: ExpensesData,
-          expensesLinkData: ExpensesLinkData
-        });
-      } else {
-        setCurrentData({ expensesData, expensesLinkData });
-      }
+      setCurrentData({ expensesData, expensesLinkData });
     }
   }, [selectedYear]);
 
@@ -222,7 +187,7 @@ export default function BarChartComponent() {
             />
           </BarChart>
         </div>
-        {windowWidth && windowWidth < 900 ? <ExpensesCard /> : null}
+        {windowWidth && windowWidth < 900 ? <ExpensesCard year={selectedYear} /> : null}
       </div>
     </div>
   );

components/FinancialSummary/Card.tsx

@@ -1,24 +1,22 @@
 import React from 'react';
 
-import type { ExpenseItem, Expenses } from '@/types/FinancialSummary/BarChartComponent';
-
-import ExpensesLinkData from '../../config/finance/json-data/ExpensesLink.json';
+import type { ExpenseItem, Expenses, ExpensesLink } from '@/types/FinancialSummary/BarChartComponent';
 
 /**
  * @description Card component displays expense details for a specific month.
  * @param {Object} props - Props for Card component.
  * @param {string} props.month - Month for which expenses are displayed.
  * @param {ExpenseItem[]} props.data - Expense data for the month.
  */
-export default function Card({ month, data }: { month: keyof Expenses; data: ExpenseItem[] }) {
+export default function Card({ month, data, expensesLinkData }: { month: keyof Expenses; data: ExpenseItem[]; expensesLinkData: ExpensesLink}) {
   /**
    * Handles the click event on an expense category.
    * Opens a new window with the corresponding link if available.
    * @param {string} category - The expense category clicked.
    * {void}
    */
   function handleExpenseClick(category: string) {
-    const matchedLinkObject = ExpensesLinkData.find((obj) => obj.category === category);
+    const matchedLinkObject = expensesLinkData.find((obj) => obj.category === category);
 
     if (matchedLinkObject) {
       window.open(matchedLinkObject.link, '_blank');

components/FinancialSummary/ExpensesCard.tsx

@@ -1,19 +1,21 @@
 import React from 'react';
 
 import type { Expenses } from '@/types/FinancialSummary/BarChartComponent';
-
-import ExpensesData from '../../config/finance/json-data/Expenses.json';
+import { loadYearData } from '@/utils/loadYearData';
 import Card from './Card';
 
 /**
  * @description ExpensesCard component displays all expenses for each month.
  */
-export default function ExpensesCard() {
+export default function ExpensesCard({year}: {year: string}) {
+
+  const { expensesData, expensesLinkData } = loadYearData(year);
+
   return (
     <div className='overflow-x-auto'>
       <div className='grid auto-cols-max grid-flow-col gap-4 p-4'>
-        {Object.entries(ExpensesData).map(function ([month, data], index) {
-          return <Card key={index} month={month as keyof Expenses} data={data} />;
+        {Object.entries(expensesData).map(function ([month, data], index) {
+          return <Card key={index} month={month as keyof Expenses} data={data} expensesLinkData={expensesLinkData} />;
         })}
       </div>
     </div>