feat: added monorepo

packages/client/screens/Header/Header.tsx

@@ -0,0 +1,51 @@
+/* eslint-disable no-empty-pattern */
+import React from 'react';
+import styled from 'styled-components';
+import { useAppStore } from '@/lib/storage';
+import { type Theme } from '@/lib/theme';
+import { tabs } from './data';
+
+export const Header = (): JSX.Element => {
+  const tab = useAppStore((state) => state.tab);
+  const setTab = useAppStore((state) => state.setTab);
+  return (
+    <TabsContainer>
+      {tabs.map((tabData) => (
+        <StyledTab
+          active={tab.id === tabData.id}
+          key={tabData.id}
+          onClick={() => {
+            setTab(tabData);
+          }}
+        >
+          <TabText>{tabData.title}</TabText>
+        </StyledTab>
+      ))}
+    </TabsContainer>
+  );
+};
+
+const TabsContainer = styled.div`
+  background: ${({ theme }) => theme.colors.secondary};
+  display: flex;
+`;
+
+const StyledTab = styled.div<{
+  active: boolean;
+}>`
+  background: ${({ active, theme }: { active: boolean; theme: Theme }) =>
+    active ? theme.colors.complementary : theme.colors.secondary};
+  padding: 12px 0px;
+  text-align: center;
+  transition: 0.2s ease-in-out all;
+  user-select: none;
+  width: 100%;
+  :hover {
+    filter: ${({ active }) => !active && 'brightness(90%)'};
+    transition: 0.2s ease-in-out all;
+  }
+`;
+
+const TabText = styled.h3`
+  color: ${({ theme }: { theme: Theme }) => theme.colors.textColor.primary};
+`;

packages/client/screens/Header/data.ts

@@ -0,0 +1,17 @@
+import { SPEND_SCREEN_ID, SPEND_SCREEN_NAME } from '../../lib/constants';
+import { type Tab } from '../../lib/types';
+
+export const tabs: Tab[] = [
+  {
+    id: 'tab-1',
+    title: 'Tab 1',
+  },
+  {
+    id: SPEND_SCREEN_ID,
+    title: SPEND_SCREEN_NAME,
+  },
+  {
+    id: 'tab-3',
+    title: 'Tab 3',
+  },
+];

packages/client/screens/Header/index.ts

@@ -0,0 +1 @@
+export * from './Header';

packages/client/screens/SpendScreen/SpendScreen.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import styled from 'styled-components';
+import { PieCircle } from '@/components';
+import { type Theme } from '@/lib/theme';
+import { useAppStore } from '@/lib/storage';
+import { type PieCircleData } from '@/lib/types';
+
+export const SpendScreen = (): JSX.Element => {
+  const userSpendData = useAppStore((state) => state.userSpendData);
+  const reducedUserData = userSpendData.reduce(
+    (acc, value) =>
+      acc.set(value.category.label, [...(acc.get(value.category.label) || []), value]),
+    new Map(),
+  );
+  const combinedUserData: PieCircleData = [...reducedUserData.entries()].map(([key, values]) => [
+    [key, values.reduce((acc: number, { value }: { value: number }) => acc + value, 0)],
+    { backgroundColor: values[0].category.backgroundColor, label: values[0].category.label },
+  ]);
+  return (
+    <SpendScreenContainer>
+      <PieCircle pieCircleData={combinedUserData} />
+    </SpendScreenContainer>
+  );
+};
+
+const SpendScreenContainer = styled.div`
+  background-color: ${({ theme }: { theme: Theme }) => theme.colors.primary};
+  height: 100%;
+`;

packages/client/screens/SpendScreen/index.ts

@@ -0,0 +1 @@
+export * from './SpendScreen';

packages/client/screens/index.ts

@@ -0,0 +1,2 @@
+export * from './Header';
+export * from './SpendScreen';