Merge dev to master

.env

@@ -1 +1 @@
-EXPO_PUBLIC_DATABASE_VERSION=2
+EXPO_PUBLIC_DATABASE_VERSION=1

.eslintignore

@@ -0,0 +1,5 @@
+.eslintrc.js
+
+babel.config.js
+
+metro.config.js

.eslintrc.js

@@ -1,4 +1,18 @@
 // https://docs.expo.dev/guides/using-eslint/
 module.exports = {
-  extends: 'expo',
+  extends: ['expo'],
+  rules: {
+    '@typescript-eslint/no-unused-vars': [
+      'error',
+      {
+        args: 'all',
+        argsIgnorePattern: '^_',
+        caughtErrors: 'all',
+        caughtErrorsIgnorePattern: '^_',
+        destructuredArrayIgnorePattern: '^_',
+        varsIgnorePattern: '^_',
+        ignoreRestSiblings: true,
+      },
+    ],
+  },
 };

.github/workflows/lint.yml

@@ -0,0 +1,26 @@
+name: Lint code
+
+on: [pull_request, workflow_dispatch]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [20.x]
+
+    steps:
+      - name: checkout code
+        uses: actions/checkout@v2
+
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v2
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Linting code
+        run: npm run lint

.github/workflows/test.yml

@@ -0,0 +1,26 @@
+name: Test code
+
+on: [pull_request, workflow_dispatch]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [20.x]
+
+    steps:
+      - name: checkout code
+        uses: actions/checkout@v2
+
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v2
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Testing code
+        run: npm run test-coverage

.gitignore

@@ -40,4 +40,7 @@ yarn-error.*
 expo-env.d.ts
 # @end expo-cli
 
-.eslintcache
+.eslintcache
+
+# Unit test coverages
+coverage/

app/(tabs)/_layout.tsx

@@ -1,3 +1,5 @@
+import { RouteNames } from '@/app/_layout';
+import { getDefaultTypeFromTabIndex } from '@/components/add/utils';
 import BottomBar from '@/components/navigation/BottomBar/BottomBar';
 import { router, Tabs } from 'expo-router';
 import React, { ComponentProps } from 'react';
@@ -7,11 +9,13 @@ import { SafeAreaView } from 'react-native';
 export enum TabName {
   Home = 'index',
   Journal = 'journal',
-  Add = 'add',
   Expense = 'expenses',
   Todo = 'todos',
 }
 
+/** Don't modify the arrangement of this array since it is used to get the current route from the navigation */
+const tabs = [TabName.Home, TabName.Expense, TabName.Todo, TabName.Journal];
+
 export default function TabLayout() {
   return (
     <Tabs
@@ -20,19 +24,26 @@ export default function TabLayout() {
       }}
       tabBar={TabBar}
     >
-      <Tabs.Screen name={TabName.Home}></Tabs.Screen>
-      <Tabs.Screen name={TabName.Journal}></Tabs.Screen>
-      <Tabs.Screen name={TabName.Add}></Tabs.Screen>
-      <Tabs.Screen name={TabName.Expense}></Tabs.Screen>
-      <Tabs.Screen name={TabName.Todo}></Tabs.Screen>
+      {tabs.map(tab => (
+        <Tabs.Screen key={tab} name={tab}></Tabs.Screen>
+      ))}
     </Tabs>
   );
 }
 
 const TabBar: ComponentProps<typeof Tabs>['tabBar'] = props => {
   const { navigation } = props;
 
-  const handleAddPress = () => router.push('add');
+  const handleAddPress = () => {
+    const defaultType = getDefaultTypeFromTabIndex(navigation.getState().index);
+    router.push({
+      pathname: RouteNames.Add,
+      params: {
+        defaultType: defaultType,
+      },
+    });
+  };
+
   const handleHomePress = () => navigation.navigate(TabName.Home);
   const handleTodoPress = () => navigation.navigate(TabName.Todo);
   const handleJournalPress = () => navigation.navigate(TabName.Journal);

app/(tabs)/expenses.tsx

@@ -1,10 +1,66 @@
+import Container from '@/components/common/Container';
+import ParallaxScrollView, { HEADER_HEIGHT } from '@/components/common/ParallaxScrollView';
+import Tabs from '@/components/common/Tabs';
 import ThemedText from '@/components/common/ThemedText';
 import ThemedView from '@/components/common/ThemedView';
+import BudgetCard from '@/components/expenses/BudgetCard';
+import BudgetModal from '@/components/expenses/BudgetCard/BudgetModal';
+import ExpensesList from '@/components/expenses/ExpensesList';
+import ExpensesListHeader from '@/components/expenses/ExpensesList/ExpensesListHeader/ExpensesListHeader';
+import ExpensesStatistics from '@/components/expenses/ExpensesStatistics';
+import {
+  EXPENSES_STATISTICS_VARIANTS,
+  ExpensesStatisticsVariantEnum,
+} from '@/components/expenses/ExpensesStatistics/ExpensesStatistics';
+import { colors } from '@/constants/Colors';
+import ModalProvider, { ModalTypes } from '@/providers/ModalProvider';
+import { useState } from 'react';
 
 export default function ExpensesScreen() {
+  const [selectedDate, setSelectedDate] = useState(new Date());
+  const [filter, setFilter] = useState<ExpensesStatisticsVariantEnum>(
+    ExpensesStatisticsVariantEnum.daily,
+  );
+
   return (
-    <ThemedView>
-      <ThemedText variant="heading">Expenses</ThemedText>
-    </ThemedView>
+    <ModalProvider
+      modals={[
+        {
+          element: <BudgetModal />,
+          type: ModalTypes.updateBudgetModal,
+        },
+      ]}
+    >
+      <ParallaxScrollView
+        headerBackgroundColor={colors.black}
+        headerContent={<ExpensesListHeader />}
+      >
+        <ThemedView
+          style={{
+            marginTop: -HEADER_HEIGHT + 24,
+            gap: 32,
+          }}
+        >
+          <Container style={{ gap: 32 }}>
+            <ThemedText variant="heading" style={{ color: colors.white }}>
+              Expenses
+            </ThemedText>
+            <Tabs<ExpensesStatisticsVariantEnum>
+              items={EXPENSES_STATISTICS_VARIANTS}
+              onSelect={setFilter}
+              selectedItem={filter}
+              variant="inverted"
+            />
+            <ExpensesStatistics
+              selectedDate={selectedDate}
+              variant={filter}
+              onSelectDate={setSelectedDate}
+            />
+            <BudgetCard />
+          </Container>
+          <ExpensesList />
+        </ThemedView>
+      </ParallaxScrollView>
+    </ModalProvider>
   );
 }

app/(tabs)/index.tsx

@@ -1,13 +1,7 @@
 import Stack from '@/components/common/Stack';
 import ThemedText from '@/components/common/ThemedText';
-import useExpense from '@/hooks/services/expenses/useExpense';
-import { useSQLiteContext } from 'expo-sqlite';
 
 export default function Home() {
-  const db = useSQLiteContext();
-  let keyword:string = '%gamb%'
-  const {data: expenses, isLoading, error} = useExpense([{columnName: "description", condition: "LIKE", value: keyword}]);
-  console.log(expenses);
   return (
     <Stack>
       <ThemedText variant="heading">Home</ThemedText>

app/(tabs)/todos.tsx

@@ -1,10 +1,5 @@
-import ThemedText from '@/components/common/ThemedText';
-import ThemedView from '@/components/common/ThemedView';
+import TodoWorkArea from '@/components/todos/TodoWorkArea';
 
 export default function TodoScreen() {
-  return (
-    <ThemedView>
-      <ThemedText variant="heading">Todo</ThemedText>
-    </ThemedView>
-  );
+  return <TodoWorkArea />;
 }

app/+not-found.tsx

@@ -14,7 +14,7 @@ export default function NotFoundScreen() {
     <>
       <ThemedView style={styles.container}>
         <ThemedText variant="heading">404</ThemedText>
-        <ThemedText variant="body-lg">This screen doesn't exist.</ThemedText>
+        <ThemedText variant="body2">This screen doesn't exist.</ThemedText>
         <Link href="/" style={styles.link}>
           <ThemedText variant="body">Back to home screen</ThemedText>
         </Link>

app/_layout.tsx

@@ -34,7 +34,7 @@ export default function RootLayout() {
   }
 
   return (
-    <GestureHandlerRootView>
+    <GestureHandlerRootView style={{ flex: 1 }}>
       <DatabaseProvider>
         <ThemeProvider value={DefaultTheme}>
           <Stack initialRouteName={RouteNames.Tabs}>

app/add.tsx

@@ -1,16 +1,21 @@
 import AddFactory from '@/components/add/AddFactory';
+import { isSupportedAddType } from '@/components/add/utils';
+import Container from '@/components/common/Container';
 import Tabs from '@/components/common/Tabs';
 import ThemedText from '@/components/common/ThemedText';
 import ThemedView from '@/components/common/ThemedView';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
-import { useNavigation } from 'expo-router';
+import { useLocalSearchParams, useNavigation } from 'expo-router';
 import React, { useState } from 'react';
-import { SafeAreaView, ScrollView, StyleSheet } from 'react-native';
+import { KeyboardAvoidingView, Platform, ScrollView, StyleSheet } from 'react-native';
 
 export type SupportedAddItems = 'Expense' | 'Todo' | 'Journal';
 
 export default function AddScreen() {
-  const [selectedItem, setSelectedItem] = useState<SupportedAddItems>('Expense');
+  const { defaultType } = useLocalSearchParams<{ defaultType?: string }>();
+  const resolvedDefaultType = isSupportedAddType(defaultType) ? defaultType : 'Expense';
+  const [selectedItem, setSelectedItem] = useState<SupportedAddItems>(resolvedDefaultType);
+
   const navigation = useNavigation();
   const handleBackPress = () => {
     if (navigation.canGoBack()) {
@@ -19,41 +24,47 @@ export default function AddScreen() {
   };
 
   return (
-    <ThemedView style={styles.container}>
+    <KeyboardAvoidingView
+      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+      style={styles.container}
+    >
       <ThemedView style={styles.main}>
-        <ThemedView style={styles.header}>
-          <MaterialCommunityIcons name={'chevron-left'} size={32} onPress={handleBackPress} />
-          <ThemedText variant="body-lg">Add</ThemedText>
-          <MaterialCommunityIcons name={'chevron-left'} size={32} style={{ opacity: 0 }} />
-        </ThemedView>
-        <Tabs<SupportedAddItems>
-          onSelect={setSelectedItem}
-          selectedItem={selectedItem}
-          items={['Expense', 'Todo', 'Journal']}
-        />
+        <ThemedView style={{ flex: 1 }}>
+          <Container>
+            <ThemedView style={styles.header}>
+              <MaterialCommunityIcons name={'chevron-left'} size={32} onPress={handleBackPress} />
+              <ThemedText variant="body2">Add</ThemedText>
+              <MaterialCommunityIcons name={'chevron-left'} size={32} style={{ opacity: 0 }} />
+            </ThemedView>
+          </Container>
+          <ScrollView keyboardShouldPersistTaps="handled">
+            <Container style={{ gap: 16 }}>
+              <Tabs<SupportedAddItems>
+                onSelect={setSelectedItem}
+                selectedItem={selectedItem}
+                items={['Expense', 'Todo', 'Journal']}
+              />
 
-        <SafeAreaView style={{ flex: 1 }}>
-          <ScrollView>
-            <ThemedView style={styles.formContainer}>
               <AddFactory type={selectedItem} />
-            </ThemedView>
+            </Container>
           </ScrollView>
-        </SafeAreaView>
+        </ThemedView>
       </ThemedView>
-    </ThemedView>
+    </KeyboardAvoidingView>
   );
 }
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
     flexDirection: 'column',
-    padding: 24,
+    paddingVertical: 12,
   },
   header: {
     display: 'flex',
     flexDirection: 'row',
     justifyContent: 'space-between',
+    paddingVertical: 12,
   },
   main: {
     flex: 1,