feat: migrated from chart.js to google-charts

lib/storage.ts

@@ -1,16 +1,22 @@
 /* eslint-disable @typescript-eslint/ban-types */
 import { create } from 'zustand';
-import { type Tab } from '@/lib/types';
+import { type UserSpendData, type Tab } from '@/lib/types';
 import { SPEND_SCREEN_ID, SPEND_SCREEN_NAME } from '@/lib/constants';
 
 interface appStore {
   tab: Tab;
   setTab: (props: Tab) => void;
+  setUserSpendData: (props: UserSpendData[]) => void;
+  userSpendData: UserSpendData[];
 }
 
 export const useAppStore = create<appStore>((set) => ({
   setTab: (props: Tab) => {
     set(() => ({ tab: props }));
   },
+  setUserSpendData: (props: UserSpendData[]) => {
+    set(() => ({ userSpendData: props }));
+  },
   tab: { id: SPEND_SCREEN_ID, title: SPEND_SCREEN_NAME },
+  userSpendData: [],
 }));

lib/theme.ts

@@ -0,0 +1,24 @@
+/* eslint-disable sort-keys-fix/sort-keys-fix */
+export interface Theme {
+  colors: {
+    primary: string;
+    secondary: string;
+    complementary: string;
+    textColor: {
+      primary: string;
+    };
+  };
+}
+
+const theme: Theme = {
+  colors: {
+    primary: '#635985',
+    secondary: '#443C68',
+    complementary: '#393053',
+    textColor: {
+      primary: '#ddd',
+    },
+  },
+};
+
+export default theme;

lib/types.d.ts

@@ -1,4 +1,23 @@
 export interface Tab {
-  title: string;
   id: string;
+  title: string;
 }
+
+interface Currency {
+  id: string;
+  label: string;
+}
+
+interface Category {
+  label: string;
+  backgroundColor: string;
+}
+
+export interface UserSpendData {
+  category: Category;
+  currency: Currency;
+  date: Date;
+  value: number;
+}
+
+export type PieCircleData = Array<[[string, number], { backgroundColor: string; label: string }]>;