feat: heatmap

app/(tabs)/home/index.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react';
+import React, { useRef, useState, useMemo } from 'react';
 import { NativeScrollEvent, NativeSyntheticEvent, StyleSheet, View } from 'react-native';
 import { Calendar } from 'react-native-calendars';
 import { FlatList } from 'react-native-gesture-handler';
@@ -12,6 +12,29 @@ import { useRouter } from "expo-router";
 import { SimpleDate } from '../../../util/SimpleDate';
 import { useTheme } from '../../contexts/ThemeContext';
 
+
+interface MarkingProps {
+    dots?:{color:string, selectedColor?:string, key?:string}[];
+} 
+
+type MarkedDates  = {
+    [key: string]: MarkingProps;
+}
+
+const constructMarkedDates = (data : {[column: string]: any}) => {
+    console.log("entered")
+    let markedDates: MarkedDates = {};
+    data.forEach((value: any) => {
+        const dateKey: string = String(value["expense_datetime"]).split(" ")[0]
+
+        if(markedDates[dateKey] === undefined){
+            markedDates[dateKey] = {dots: []}
+        }
+        markedDates[dateKey].dots?.push({color: value["category_color"]})
+    })
+    return markedDates;
+}
+
 export default function Page() {
     const { colors, theme } = useTheme()
 
@@ -61,6 +84,10 @@ export default function Page() {
 
     const {data, isLoading, reFetch} = useFetch();
 
+    const expenseDates = useMemo(()=>
+        constructMarkedDates(data)
+    , [data])
+    
 
 
     return (
@@ -86,7 +113,11 @@ export default function Page() {
                         calendarBackground: colors.containerColor,
                         arrowColor: colors.accentColor,
                         monthTextColor: colors.accentColor
-                    }}>
+
+                    }}
+                    markingType='multi-dot'
+                    markedDates={expenseDates}
+                    >
 
                     </Calendar>
                     <SearchBar placeholder='Type to Search...'></SearchBar>