Finanseer

A Finance App Dashboard designed to provide valuable insights and financial data visualization. The dashboard includes various types of charts, a data grid for displaying product and order information, and machine learning predictions for revenue forecasting.

Tech Stack

This project uses the following libraries and tools:

1. React - A JavaScript library for building user interfaces

2. Material UI - A popular React UI framework

3. TailWindCSS Shades - A utility-first CSS framework for rapid UI development

4. Regression.js - A library for making machine learning predictions using regression

5. Recharts - A composable charting library built on React components

6. MUI DataGrid - A powerful data grid for displaying tables in Material-UI

7. Redux Toolkit Query - A data-fetching and caching library for Redux apps

8. Redux - A predictable state container for JavaScript apps

9. TypeScript - A statically typed superset of JavaScript

10. Render - A unified platform to build and run all your apps and websites

Code Snippets

Prediction

This code snippet is a React functional component called Predictions. It fetches KPI data and processes it to create a regression line. The regression line is used to predict future revenue based on past revenue data. The component prepares this data in a suitable format for visualization in a chart.

const Predictions = () => {
  const { palette } = useTheme();
  const [isPredictions, setIsPredictions] = useState(false);
  const { data: kpiData } = useGetKpisQuery();
 
  const formattedData = useMemo(() => {
    if (!kpiData) return [];
    const monthData = kpiData[0].monthlyData;
 
    const formatted: Array<DataPoint> = monthData.map(
      ({ revenue }, i: number) => {
        return [i, revenue];
      }
    );
    const regressionLine = regression.linear(formatted);
 
    return monthData.map(({ month, revenue }, i: number) => {
      return {
        name: month,
        "Actual Revenue": revenue,
        "Regression Line": regressionLine.points[i][1],
        "Predicted Revenue": regressionLine.predict(i + 12)[1],
      };
    });
  }, [kpiData]);
  /// rest of component
},