feat: implement the asyncapi financial summary page

.gitignore

@@ -14,4 +14,5 @@ meetings.json
 .netlify
 .env
 cypress/screenshots
-cypress/videos
+cypress/videos
+/config/finance/json-data/*

README.md

@@ -96,6 +96,24 @@ npm run build
 
 Generated files of the website go to the `.next` folder.
 
+## Updating information about project finance
+
+AsyncAPI Financial Summary page aims to provide transparency and clarity regarding the organization's financial activities. It serves as a platform to showcase how donations are accepted, different sponsorship options, and how the generated funds are utilized.
+
+### How to update information
+
+- YAML files must be stored in the `config/finance` directory.
+
+- Create separate folders for each year under `config/finance`, such as `config/finance/2023`. Inside each year's folder, include two YAML files: `Expenses.yml` and `ExpensesLink.yml`.
+
+- In `Expenses.yml`, record expenses for each month, specifying the `Category` and `Amount`.
+
+- In `ExpensesLink.yml`, provide discussion links related to expense categories.
+
+- When a new year begins, create a corresponding folder for that year under `config/finance` and place the YAML files inside the folder for that specific year. For example, create a folder named `config/finance/2024` for the year 2024 and `config/finance/2025` for the year 2025. Place the YAML file for each respective year inside its designated folder.
+
+- Modify the years within the `scripts/finance/index.js` , `lib/getUniqueCategories.js` and `components/FinancialSummary/BarChartComponent.js` to handle data for different years effectively.
+
 ## Case studies
 
 ### Overview

components/FinancialSummary/AsyncAPISummary.js

@@ -0,0 +1,54 @@
+import Button from '../buttons/Button'
+import Heading from '../typography/Heading'
+import Paragraph from '../typography/Paragraph'
+
+export default function AsyncAPISummary() {
+    return (
+        <div className="px-4 sm:px-6 lg:px-8">
+            <div className="grid lg:grid-cols-9 lg:gap-8 lg:text-center my-8 mx-4">
+                <div className="col-start-3 col-span-5">
+                    <Heading level="h2" className="text-5xl my-3 mx-3">
+                        AsyncAPI Financial Summary
+                    </Heading>
+                    <Paragraph typeStyle="body-md" className="my-1 max-w-4xl text-darkGunMetal">
+                        To help improve the current state of Event-Driven Architectures and their tooling, you can show your support for
+                        the AsyncAPI Initiative by making a financial contribution. We offer three donation options: <strong>Open Collective, GitHub
+                            Sponsors, and Linux Foundation Crowdfunding</strong>. Our expenses are managed through Open Collective and GitHub Sponsors,
+                        while Linux Foundation Crowdfunding operates separately.
+                    </Paragraph>
+                </div>
+            </div>
+            <div className="flex justify-center mb-20">
+                <Button
+                    text="Become a Sponsor"
+                    href="https://opencollective.com/asyncapi#category-CONTRIBUTE"
+                    target='_blank'
+                />
+            </div>
+            <div className="text-center text-sm mt-4">
+                <Heading level="h1" typeStyle="heading-md" className="4xl">
+                    Ways to Support Us?
+                </Heading>
+            </div>
+            <div className="text-center my-4 text-base max-width text-darkGunMetal">
+                <Paragraph typeStyle="body-sm" className="my-4">
+                    The easiest way to support AsyncAPI is by becoming a financial sponsor. While <br class="hidden lg:inline-block"></br>there are alternative options,
+                    they may involve greater effort. Contribute <br class="hidden lg:inline-block"></br>monetarily using the following channels.
+                </Paragraph>
+            </div>
+
+            <div className="text-center">
+                <a href="https://opencollective.com/asyncapi" target='_blank'>
+                    <img className="mx-4 inline w-10 h-10 transform transition-transform hover:scale-110 active:scale-90" src="/img/logos/OpenCollective.svg" alt="Open Collective" />
+                </a>
+                <a href="https://crowdfunding.lfx.linuxfoundation.org/projects/445898e9-42a2-4965-9e0a-c2a714f381bc" target='_blank'>
+                    <img className="mx-4 inline w-10 h-10 transform transition-transform hover:scale-110 active:scale-90" src="/img/logos/LFX.svg" alt="Linux Foundation" />
+                </a>
+                <a href="https://github.com/sponsors/asyncapi" target='_blank'>
+                    <img className="mx-4 inline w-10 h-10 transform transition-transform hover:scale-110 active:scale-90" src="/img/logos/github-black.svg" alt="Github" />
+                </a>
+            </div>
+
+        </div>
+    );
+}

components/FinancialSummary/BarChartComponent.js

@@ -0,0 +1,221 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';
+import ExpensesLink from '../../config/finance/json-data/2023/ExpensesLink.json';
+import Expenses from '../../config/finance/json-data/2023/Expenses.json';
+import { getUniqueCategories } from '../../lib/getUniqueCategories';
+/**
+ * CustomTooltip component for the bar chart. Displays additional information on hover.
+ *
+ * @param {Object} props - The component's props.
+ * @param {boolean} props.active - Indicates if the tooltip is active.
+ * @param {Object[]} props.payload - An array of data points.
+ * @returns {JSX.Element} The rendered CustomTooltip component.
+ */
+const CustomTooltip = ({ active, payload }) => {
+    if (active && payload && payload.length) {
+        const data = payload[0].payload;
+        return (
+            <div className="bg-opacity-90 bg-white border border-gray-300 p-2 shadow-md rounded-md">
+                <p className="text-14 font-bold mb-1">{data.Category}</p>
+                <p className="text-12 text-gray-900">${data.Amount.toFixed(2)}</p>
+                <p>Click the bar to learn more</p>
+            </div>
+        );
+    }
+    return null;
+};
+
+/**
+ * Retrieves unique expense categories from the Expenses data.
+ *
+ * @returns {string[]} An array of unique expense categories.
+ */
+
+const months = Object.keys(Expenses);
+const categories = getUniqueCategories();
+
+/**
+ * Card component displays monthly expense data.
+ *
+ * @param {Object} props - The component's props.
+ * @param {string} props.month - The month for which expenses are displayed.
+ * @param {Object[]} props.data - The expense data for the month.
+ * @param {Object[]} props.links - Links to additional information for each category.
+ * @returns {JSX.Element} The rendered Card component.
+ */
+const Card = ({ month, data, links }) => {
+    return (
+        <div className="bg-slate-100 shadow-lg rounded-lg p-4 flex flex-col justify-between h-56 overflow-hidden">
+            <div className="text-lg font-semibold mb-4">{month}</div>
+            <div className="flex flex-col justify-center overflow-x-auto">
+                {data.map((item, index) => (
+                    <div key={index} className="flex justify-between">
+                        <div className="text-sm m-2" onClick={(links) => {
+                            const category = item.Category;
+                            const matchedLinkObject = ExpensesLink.find(obj => obj.category === category);
+                            if (matchedLinkObject) {
+                                window.open(matchedLinkObject.link, '_blank');
+                            }
+                        }}>{item.Category}</div>
+                        <div className="text-sm m-2">${item.Amount}</div>
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+};
+
+/**
+ * ExpensesCard component displays a grid of expense cards for each month.
+ *
+ * @returns {JSX.Element} The rendered ExpensesCard component.
+ */
+const ExpensesCard = () => {
+    return (
+        <div className="overflow-x-auto">
+            <div className="grid grid-flow-col auto-cols-max gap-4 p-4">
+                {Object.keys(Expenses).map((month, index) => (
+                    <Card key={index} month={month} data={Expenses[month]} />
+                ))}
+            </div>
+        </div>
+    );
+};
+
+/**
+ * BarChartComponent displays a budget analysis bar chart with filtering options.
+ *
+ * @returns {JSX.Element} The rendered BarChartComponent component.
+ */
+const BarChartComponent = () => {
+    // State for selected filters
+    const [selectedCategory, setSelectedCategory] = useState("All Categories");
+    const [selectedMonth, setSelectedMonth] = useState("All Months");
+    const [windowWidth, setWindowWidth] = useState(null);
+
+    // Get unique categories and months from the Expenses data
+    const categories = getUniqueCategories();
+    const months = Object.keys(Expenses);
+
+    // Filter the expenses data based on selectedCategory and selectedMonth
+    const filteredData = Object.entries(Expenses).flatMap(([month, entries]) =>
+        (selectedMonth === "All Months" || selectedMonth === month) ?
+            entries.filter(entry =>
+                selectedCategory === "All Categories" || entry.Category === selectedCategory
+            )
+            : []
+    );
+
+    // Calculate total amount for the filtered data
+    const totalAmount = filteredData.reduce((total, entry) => total + parseFloat(entry.Amount), 0);
+
+    const categoryAmounts = {};
+    filteredData.forEach(entry => {
+        if (categoryAmounts[entry.Category]) {
+            categoryAmounts[entry.Category] += parseFloat(entry.Amount);
+        } else {
+            categoryAmounts[entry.Category] = parseFloat(entry.Amount);
+        }
+    });
+
+    // Prepare chartData from the aggregated categoryAmounts
+    const chartData = Object.keys(categoryAmounts).map(category => ({
+        Category: category,
+        Amount: categoryAmounts[category],
+    }));
+
+    // Create a ref for the handleResize function
+    const handleResizeRef = useRef(null);
+
+    // Define the handleResize function
+    handleResizeRef.current = () => {
+        setWindowWidth(window.innerWidth);
+    };
+
+    // Update the window width when the component mounts and when the window is resized
+    useEffect(() => {
+        // Initial width
+        handleResizeRef.current();
+
+        // Listen for window resize events
+        window.addEventListener("resize", handleResizeRef.current);
+
+        // Clean up the event listener when the component unmounts
+        return () => {
+            window.removeEventListener("resize", handleResizeRef.current);
+        };
+    }, []);
+
+    const barWidth = windowWidth < 900 ? null : 800;
+    const barHeight = windowWidth < 900 ? null : 400;
+
+    return (
+        <div className="flex justify-center items-center sm:px-6 lg:px-8 mt-8">
+            <div className="w-full lg:w-2/3 px-4 text-center">
+                <div className='mb-5'>
+                    <h1 id="budget-analysis" className="text-3xl font-semibold mb-4 my-2">Budget Analysis</h1>
+                    <p>Gain insights into the allocation of funds across different categories through our Budget Analysis</p>
+                    <div className="flex flex-col md:flex-row justify-between my-4 md:items-center md:justify-between md:m-8">
+                        <div className="my-2">
+                            <p className="text-center sm:text-left">Expenses</p>
+                            <p className="text-center sm:text-left mt-1 text-xl font-semibold">${totalAmount.toFixed(2)}</p>
+                        </div>
+                        <div className="md:flex space-x-4">
+
+                        <div className="mx-auto">
+                            {/* Select for category filter */}
+                            <select
+                                className="p-2 m-1 border text-gray-600 font-semibold border-gray-600 rounded-md bg-white text-violet text-xs w-full sm:w-auto md:w-48"
+                                value={selectedCategory}
+                                onChange={(e) => setSelectedCategory(e.target.value)}
+                            >
+                                <option value="All Categories">All Categories</option>
+                                {categories.map(category => (
+                                    <option key={category} value={category}>{category}</option>
+                                ))}
+                            </select>
+
+                            {/* Select for month filter */}
+                            <select
+                                className="p-2 m-1 pr-8 border border-gray-600 rounded-md bg-violet text-white font-semibold text-xs w-full sm:w-auto md:w-48"
+                                value={selectedMonth}
+                                onChange={(e) => setSelectedMonth(e.target.value)}
+                            >
+                                <option value="All Months">All Months</option>
+                                {months.map(month => (
+                                    <option key={month} value={month}>{month}</option>
+                                ))}
+                            </select>
+                            </div>
+                        </div>
+                    </div>
+
+                </div>
+                {/* Recharts BarChart */}
+                <BarChart width={barWidth} height={barHeight} data={chartData}>
+                    <CartesianGrid strokeDasharray="3 3" />
+                    <YAxis tickFormatter={(value) => `$${value}`} />
+                    <Tooltip content={<CustomTooltip />} />
+                    <Legend />
+                    <Bar
+                        dataKey="Amount"
+                        fill="#7B5DD3FF"
+                        onClick={(data) => {
+                            // Get the category from the clicked bar's payload
+                            const category = data.payload.Category;
+                            // Replace the URL with the external website URL you want to open
+                            const matchedLinkObject = ExpensesLink.find(obj => obj.category === category);
+                            if (matchedLinkObject) {
+                                // Extract the link from the matched object and open it in a new tab/window
+                                window.open(matchedLinkObject.link, '_blank');
+                            }
+                        }}
+                    />
+                </BarChart>
+                {windowWidth < 900 ? <ExpensesCard data={Expenses} /> : null}
+            </div>
+        </div>
+    );
+};
+
+export default BarChartComponent;

components/FinancialSummary/ContactUs.js

@@ -0,0 +1,28 @@
+import Button from '../buttons/Button'
+import Heading from '../typography/Heading'
+import Paragraph from '../typography/Paragraph'
+
+export default function ContactUs() {
+    return (
+        <div className="px-4 sm:px-6 lg:px-8">
+            <div className="grid lg:grid-cols-9 lg:gap-8 lg:text-center my-4">
+                <div className="col-start-3 col-span-5">
+                    <div className="mx-2">
+                    <Heading level="h1" typeStyle="heading-lg"><h1 id="contact-us">Interested in getting in touch?</h1></Heading>
+                    <Paragraph typeStyle="body-md" className="my-2 max-w-4xl">
+                        Feel free to contact us if you need more explanation. We are happy to hop on a call and help with
+                        onboarding to the project as a sponsor. Write email to <span><a className="text-violet text-base font-semibold" href="mailto:[email protected]" target='_blank'>[email protected]</a></span>
+                    </Paragraph>
+                    </div>
+                </div>
+            </div>
+            <div className="flex justify-center">
+                <Button
+                    text="Contact Us"
+                    href="mailto:[email protected]"
+                    target='_blank'
+                />
+            </div>
+        </div>
+    )
+}