First version

android/.gitignore

@@ -0,0 +1,16 @@
+# OSX
+#
+.DS_Store
+
+# Android/IntelliJ
+#
+build/
+.idea
+.gradle
+local.properties
+*.iml
+*.hprof
+.cxx/
+
+# Bundle artifacts
+*.jsbundle

android/app/build.gradle

@@ -0,0 +1,185 @@
+apply plugin: "com.android.application"
+apply plugin: "org.jetbrains.kotlin.android"
+apply plugin: "com.facebook.react"
+
+def projectRoot = rootDir.getAbsoluteFile().getParentFile().getAbsolutePath()
+
+/**
+ * This is the configuration block to customize your React Native Android app.
+ * By default you don't need to apply any configuration, just uncomment the lines you need.
+ */
+react {
+    entryFile = file(["node", "-e", "require('expo/scripts/resolveAppEntry')", projectRoot, "android", "absolute"].execute(null, rootDir).text.trim())
+    reactNativeDir = new File(["node", "--print", "require.resolve('react-native/package.json')"].execute(null, rootDir).text.trim()).getParentFile().getAbsoluteFile()
+    hermesCommand = new File(["node", "--print", "require.resolve('react-native/package.json')"].execute(null, rootDir).text.trim()).getParentFile().getAbsolutePath() + "/sdks/hermesc/%OS-BIN%/hermesc"
+    codegenDir = new File(["node", "--print", "require.resolve('@react-native/codegen/package.json', { paths: [require.resolve('react-native/package.json')] })"].execute(null, rootDir).text.trim()).getParentFile().getAbsoluteFile()
+
+    enableBundleCompression = (findProperty('android.enableBundleCompression') ?: false).toBoolean()
+    // Use Expo CLI to bundle the app, this ensures the Metro config
+    // works correctly with Expo projects.
+    cliFile = new File(["node", "--print", "require.resolve('@expo/cli', { paths: [require.resolve('expo/package.json')] })"].execute(null, rootDir).text.trim())
+    bundleCommand = "export:embed"
+
+    /* Folders */
+     //   The root of your project, i.e. where "package.json" lives. Default is '../..'
+    // root = file("../../")
+    //   The folder where the react-native NPM package is. Default is ../../node_modules/react-native
+    // reactNativeDir = file("../../node_modules/react-native")
+    //   The folder where the react-native Codegen package is. Default is ../../node_modules/@react-native/codegen
+    // codegenDir = file("../../node_modules/@react-native/codegen")
+
+    /* Variants */
+    //   The list of variants to that are debuggable. For those we're going to
+    //   skip the bundling of the JS bundle and the assets. By default is just 'debug'.
+    //   If you add flavors like lite, prod, etc. you'll have to list your debuggableVariants.
+    // debuggableVariants = ["liteDebug", "prodDebug"]
+
+    /* Bundling */
+    //   A list containing the node command and its flags. Default is just 'node'.
+    // nodeExecutableAndArgs = ["node"]
+
+    //
+    //   The path to the CLI configuration file. Default is empty.
+    // bundleConfig = file(../rn-cli.config.js)
+    //
+    //   The name of the generated asset file containing your JS bundle
+    // bundleAssetName = "MyApplication.android.bundle"
+    //
+    //   The entry file for bundle generation. Default is 'index.android.js' or 'index.js'
+    // entryFile = file("../js/MyApplication.android.js")
+    //
+    //   A list of extra flags to pass to the 'bundle' commands.
+    //   See https://github.com/react-native-community/cli/blob/main/docs/commands.md#bundle
+    // extraPackagerArgs = []
+
+    /* Hermes Commands */
+    //   The hermes compiler command to run. By default it is 'hermesc'
+    // hermesCommand = "$rootDir/my-custom-hermesc/bin/hermesc"
+    //
+    //   The list of flags to pass to the Hermes compiler. By default is "-O", "-output-source-map"
+    // hermesFlags = ["-O", "-output-source-map"]
+
+    /* Autolinking */
+    autolinkLibrariesWithApp()
+}
+
+/**
+ * Set this to true to Run Proguard on Release builds to minify the Java bytecode.
+ */
+def enableProguardInReleaseBuilds = (findProperty('android.enableProguardInReleaseBuilds') ?: false).toBoolean()
+
+/**
+ * The preferred build flavor of JavaScriptCore (JSC)
+ *
+ * For example, to use the international variant, you can use:
+ * `def jscFlavor = 'org.webkit:android-jsc-intl:+'`
+ *
+ * The international variant includes ICU i18n library and necessary data
+ * allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that
+ * give correct results when using with locales other than en-US. Note that
+ * this variant is about 6MiB larger per architecture than default.
+ */
+def jscFlavor = 'io.github.react-native-community:jsc-android:2026004.+'
+
+android {
+    ndkVersion rootProject.ext.ndkVersion
+
+    buildToolsVersion rootProject.ext.buildToolsVersion
+    compileSdk rootProject.ext.compileSdkVersion
+
+    namespace 'com.xaviscript.taskeep'
+    defaultConfig {
+        applicationId 'com.xaviscript.taskeep'
+        minSdkVersion rootProject.ext.minSdkVersion
+        targetSdkVersion rootProject.ext.targetSdkVersion
+        versionCode 1
+        versionName "1.0.0"
+    }
+    signingConfigs {
+        release {
+            if (project.hasProperty('MYAPP_UPLOAD_STORE_FILE')) {
+                storeFile file(MYAPP_UPLOAD_STORE_FILE)
+                storePassword MYAPP_UPLOAD_STORE_PASSWORD
+                keyAlias MYAPP_UPLOAD_KEY_ALIAS
+                keyPassword MYAPP_UPLOAD_KEY_PASSWORD
+            }
+        }
+        debug {
+            storeFile file('debug.keystore')
+            storePassword 'android'
+            keyAlias 'androiddebugkey'
+            keyPassword 'android'
+        }
+    }
+    buildTypes {
+        debug {
+            signingConfig signingConfigs.debug
+        }
+        release {
+            // Caution! In production, you need to generate your own keystore file.
+            // see https://reactnative.dev/docs/signed-apk-android.
+            signingConfig signingConfigs.release
+            shrinkResources (findProperty('android.enableShrinkResourcesInReleaseBuilds')?.toBoolean() ?: false)
+            minifyEnabled enableProguardInReleaseBuilds
+            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
+            crunchPngs (findProperty('android.enablePngCrunchInReleaseBuilds')?.toBoolean() ?: true)
+        }
+    }
+    packagingOptions {
+        jniLibs {
+            useLegacyPackaging (findProperty('expo.useLegacyPackaging')?.toBoolean() ?: false)
+        }
+    }
+    androidResources {
+        ignoreAssetsPattern '!.svn:!.git:!.ds_store:!*.scc:!CVS:!thumbs.db:!picasa.ini:!*~'
+    }
+}
+
+// Apply static values from `gradle.properties` to the `android.packagingOptions`
+// Accepts values in comma delimited lists, example:
+// android.packagingOptions.pickFirsts=/LICENSE,**/picasa.ini
+["pickFirsts", "excludes", "merges", "doNotStrip"].each { prop ->
+    // Split option: 'foo,bar' -> ['foo', 'bar']
+    def options = (findProperty("android.packagingOptions.$prop") ?: "").split(",");
+    // Trim all elements in place.
+    for (i in 0..<options.size()) options[i] = options[i].trim();
+    // `[] - ""` is essentially `[""].filter(Boolean)` removing all empty strings.
+    options -= ""
+
+    if (options.length > 0) {
+        println "android.packagingOptions.$prop += $options ($options.length)"
+        // Ex: android.packagingOptions.pickFirsts += '**/SCCS/**'
+        options.each {
+            android.packagingOptions[prop] += it
+        }
+    }
+}
+
+dependencies {
+    // The version of react-native is set by the React Native Gradle Plugin
+    implementation("com.facebook.react:react-android")
+
+    def isGifEnabled = (findProperty('expo.gif.enabled') ?: "") == "true";
+    def isWebpEnabled = (findProperty('expo.webp.enabled') ?: "") == "true";
+    def isWebpAnimatedEnabled = (findProperty('expo.webp.animated') ?: "") == "true";
+
+    if (isGifEnabled) {
+        // For animated gif support
+        implementation("com.facebook.fresco:animated-gif:${expoLibs.versions.fresco.get()}")
+    }
+
+    if (isWebpEnabled) {
+        // For webp support
+        implementation("com.facebook.fresco:webpsupport:${expoLibs.versions.fresco.get()}")
+        if (isWebpAnimatedEnabled) {
+            // Animated webp support
+            implementation("com.facebook.fresco:animated-webp:${expoLibs.versions.fresco.get()}")
+        }
+    }
+
+    if (hermesEnabled.toBoolean()) {
+        implementation("com.facebook.react:hermes-android")
+    } else {
+        implementation jscFlavor
+    }
+}

android/app/playstore.md

@@ -0,0 +1,7 @@
+Add a description for Google play about the app:
+
+Taskeep is a simple and effective habit tracker and task manager designed to help you build positive routines and stay organized. With Taskeep, you can easily create daily habits, set personalized reminders, and monitor your progress over time. The app features a clean, distraction-free interface and intuitive controls, making it easy to add new tasks or habits, check off completed items, and visualize your achievements.
+
+Whether you want to develop healthy habits, boost your productivity, or simply keep track of your daily to-dos, Taskeep provides the tools you need. Set flexible schedules for each habit, receive motivational notifications, and review your streaks and statistics to stay inspired. Taskeep is lightweight, fast, and respects your privacy—no unnecessary permissions or sign-ups required.
+
+Start building better habits and achieving your goals, one step at a time, with Taskeep!

android/app/proguard-rules.pro

@@ -0,0 +1,14 @@
+# Add project specific ProGuard rules here.
+# By default, the flags in this file are appended to flags specified
+# in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt
+# You can edit the include path and order by changing the proguardFiles
+# directive in build.gradle.
+#
+# For more details, see
+#   http://developer.android.com/guide/developing/tools/proguard.html
+
+# react-native-reanimated
+-keep class com.swmansion.reanimated.** { *; }
+-keep class com.facebook.react.turbomodule.** { *; }
+
+# Add any project specific keep options here:

android/app/src/debug/AndroidManifest.xml

@@ -0,0 +1,7 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools">
+
+    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
+
+    <application android:usesCleartextTraffic="true" tools:targetApi="28" tools:ignore="GoogleAppIndexingWarning" tools:replace="android:usesCleartextTraffic" />
+</manifest>

android/app/src/main/AndroidManifest.xml

@@ -0,0 +1,41 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+  <uses-permission android:name="android.permission.INTERNET"/>
+  <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
+  <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
+  <uses-permission android:name="android.permission.VIBRATE"/>
+  <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
+  <queries>
+    <intent>
+      <action android:name="android.intent.action.VIEW"/>
+      <category android:name="android.intent.category.BROWSABLE"/>
+      <data android:scheme="https"/>
+    </intent>
+  </queries>
+  <application android:name=".MainApplication" android:label="@string/app_name" android:icon="@mipmap/ic_launcher" android:roundIcon="@mipmap/ic_launcher_round" android:allowBackup="true" android:theme="@style/AppTheme" android:supportsRtl="true">
+    <meta-data android:name="com.google.firebase.messaging.default_notification_icon" android:resource="@drawable/notification_icon"/>
+    <meta-data android:name="expo.modules.notifications.default_notification_icon" android:resource="@drawable/notification_icon"/>
+    <meta-data android:name="expo.modules.updates.ENABLED" android:value="false"/>
+    <meta-data android:name="expo.modules.updates.EXPO_UPDATES_CHECK_ON_LAUNCH" android:value="ALWAYS"/>
+    <meta-data android:name="expo.modules.updates.EXPO_UPDATES_LAUNCH_WAIT_MS" android:value="0"/>
+    <service android:name="com.reactnativeandroidwidget.RNWidgetCollectionService" android:permission="android.permission.BIND_REMOTEVIEWS"/>
+    <activity android:name=".MainActivity" android:configChanges="keyboard|keyboardHidden|orientation|screenSize|screenLayout|uiMode" android:launchMode="singleTask" android:windowSoftInputMode="adjustResize" android:theme="@style/Theme.App.SplashScreen" android:exported="true" android:screenOrientation="portrait">
+      <intent-filter>
+        <action android:name="android.intent.action.MAIN"/>
+        <category android:name="android.intent.category.LAUNCHER"/>
+      </intent-filter>
+      <intent-filter>
+        <action android:name="android.intent.action.VIEW"/>
+        <category android:name="android.intent.category.DEFAULT"/>
+        <category android:name="android.intent.category.BROWSABLE"/>
+        <data android:scheme="taskeep"/>
+      </intent-filter>
+    </activity>
+    <receiver android:name=".widget.TaskList" android:exported="false" android:label="Task list widget">
+      <intent-filter>
+        <action android:name="android.appwidget.action.APPWIDGET_UPDATE"/>
+        <action android:name="com.xaviscript.taskeep.WIDGET_CLICK"/>
+      </intent-filter>
+      <meta-data android:name="android.appwidget.provider" android:resource="@xml/widgetprovider_tasklist"/>
+    </receiver>
+  </application>
+</manifest>

android/app/src/main/java/com/xaviscript/taskeep/MainActivity.kt

@@ -0,0 +1,65 @@
+package com.xaviscript.taskeep
+import expo.modules.splashscreen.SplashScreenManager
+
+import android.os.Build
+import android.os.Bundle
+
+import com.facebook.react.ReactActivity
+import com.facebook.react.ReactActivityDelegate
+import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.fabricEnabled
+import com.facebook.react.defaults.DefaultReactActivityDelegate
+
+import expo.modules.ReactActivityDelegateWrapper
+
+class MainActivity : ReactActivity() {
+  override fun onCreate(savedInstanceState: Bundle?) {
+    // Set the theme to AppTheme BEFORE onCreate to support
+    // coloring the background, status bar, and navigation bar.
+    // This is required for expo-splash-screen.
+    // setTheme(R.style.AppTheme);
+    // @generated begin expo-splashscreen - expo prebuild (DO NOT MODIFY) sync-f3ff59a738c56c9a6119210cb55f0b613eb8b6af
+    SplashScreenManager.registerOnActivity(this)
+    // @generated end expo-splashscreen
+    super.onCreate(null)
+  }
+
+  /**
+   * Returns the name of the main component registered from JavaScript. This is used to schedule
+   * rendering of the component.
+   */
+  override fun getMainComponentName(): String = "main"
+
+  /**
+   * Returns the instance of the [ReactActivityDelegate]. We use [DefaultReactActivityDelegate]
+   * which allows you to enable New Architecture with a single boolean flags [fabricEnabled]
+   */
+  override fun createReactActivityDelegate(): ReactActivityDelegate {
+    return ReactActivityDelegateWrapper(
+          this,
+          BuildConfig.IS_NEW_ARCHITECTURE_ENABLED,
+          object : DefaultReactActivityDelegate(
+              this,
+              mainComponentName,
+              fabricEnabled
+          ){})
+  }
+
+  /**
+    * Align the back button behavior with Android S
+    * where moving root activities to background instead of finishing activities.
+    * @see <a href="https://developer.android.com/reference/android/app/Activity#onBackPressed()">onBackPressed</a>
+    */
+  override fun invokeDefaultOnBackPressed() {
+      if (Build.VERSION.SDK_INT <= Build.VERSION_CODES.R) {
+          if (!moveTaskToBack(false)) {
+              // For non-root activities, use the default implementation to finish them.
+              super.invokeDefaultOnBackPressed()
+          }
+          return
+      }
+
+      // Use the default back button implementation on Android S
+      // because it's doing more than [Activity.moveTaskToBack] in fact.
+      super.invokeDefaultOnBackPressed()
+  }
+}

android/app/src/main/java/com/xaviscript/taskeep/MainApplication.kt

@@ -0,0 +1,57 @@
+package com.xaviscript.taskeep
+
+import android.app.Application
+import android.content.res.Configuration
+
+import com.facebook.react.PackageList
+import com.facebook.react.ReactApplication
+import com.facebook.react.ReactNativeHost
+import com.facebook.react.ReactPackage
+import com.facebook.react.ReactHost
+import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.load
+import com.facebook.react.defaults.DefaultReactNativeHost
+import com.facebook.react.soloader.OpenSourceMergedSoMapping
+import com.facebook.soloader.SoLoader
+
+import expo.modules.ApplicationLifecycleDispatcher
+import expo.modules.ReactNativeHostWrapper
+
+class MainApplication : Application(), ReactApplication {
+
+  override val reactNativeHost: ReactNativeHost = ReactNativeHostWrapper(
+        this,
+        object : DefaultReactNativeHost(this) {
+          override fun getPackages(): List<ReactPackage> {
+            val packages = PackageList(this).packages
+            // Packages that cannot be autolinked yet can be added manually here, for example:
+            // packages.add(MyReactNativePackage())
+            return packages
+          }
+
+          override fun getJSMainModuleName(): String = ".expo/.virtual-metro-entry"
+
+          override fun getUseDeveloperSupport(): Boolean = BuildConfig.DEBUG
+
+          override val isNewArchEnabled: Boolean = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED
+          override val isHermesEnabled: Boolean = BuildConfig.IS_HERMES_ENABLED
+      }
+  )
+
+  override val reactHost: ReactHost
+    get() = ReactNativeHostWrapper.createReactHost(applicationContext, reactNativeHost)
+
+  override fun onCreate() {
+    super.onCreate()
+    SoLoader.init(this, OpenSourceMergedSoMapping)
+    if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
+      // If you opted-in for the New Architecture, we load the native entry point for this app.
+      load()
+    }
+    ApplicationLifecycleDispatcher.onApplicationCreate(this)
+  }
+
+  override fun onConfigurationChanged(newConfig: Configuration) {
+    super.onConfigurationChanged(newConfig)
+    ApplicationLifecycleDispatcher.onConfigurationChanged(this, newConfig)
+  }
+}

android/app/src/main/java/com/xaviscript/taskeep/widget/TaskList.java

@@ -0,0 +1,6 @@
+package com.xaviscript.taskeep.widget;
+
+import com.reactnativeandroidwidget.RNWidgetProvider;
+
+public class TaskList extends RNWidgetProvider {
+}

android/app/src/main/res/drawable/ic_launcher_background.xml

@@ -0,0 +1,6 @@
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+  <item android:drawable="@color/splashscreen_background"/>
+  <item>
+    <bitmap android:gravity="center" android:src="@drawable/splashscreen_logo"/>
+  </item>
+</layer-list>

android/app/src/main/res/drawable/rn_edit_text_material.xml

@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright (C) 2014 The Android Open Source Project
+
+     Licensed under the Apache License, Version 2.0 (the "License");
+     you may not use this file except in compliance with the License.
+     You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+     Unless required by applicable law or agreed to in writing, software
+     distributed under the License is distributed on an "AS IS" BASIS,
+     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     See the License for the specific language governing permissions and
+     limitations under the License.
+-->
+<inset xmlns:android="http://schemas.android.com/apk/res/android"
+       android:insetLeft="@dimen/abc_edit_text_inset_horizontal_material"
+       android:insetRight="@dimen/abc_edit_text_inset_horizontal_material"
+       android:insetTop="@dimen/abc_edit_text_inset_top_material"
+       android:insetBottom="@dimen/abc_edit_text_inset_bottom_material"
+       >
+
+    <selector>
+        <!--
+          This file is a copy of abc_edit_text_material (https://bit.ly/3k8fX7I).
+          The item below with state_pressed="false" and state_focused="false" causes a NullPointerException.
+          NullPointerException:tempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable$ConstantState.newDrawable(android.content.res.Resources)'
+
+          <item android:state_pressed="false" android:state_focused="false" android:drawable="@drawable/abc_textfield_default_mtrl_alpha"/>
+
+          For more info, see https://bit.ly/3CdLStv (react-native/pull/29452) and https://bit.ly/3nxOMoR.
+        -->
+        <item android:state_enabled="false" android:drawable="@drawable/abc_textfield_default_mtrl_alpha"/>
+        <item android:drawable="@drawable/abc_textfield_activated_mtrl_alpha"/>
+    </selector>
+
+</inset>

android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+    <background android:drawable="@color/iconBackground"/>
+    <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
+</adaptive-icon>

android/app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+    <background android:drawable="@color/iconBackground"/>
+    <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
+</adaptive-icon>

android/app/src/main/res/values-night/colors.xml

@@ -0,0 +1 @@
+<resources/>

android/app/src/main/res/values/colors.xml

@@ -0,0 +1,6 @@
+<resources>
+  <color name="splashscreen_background">#ffffff</color>
+  <color name="iconBackground">#ffffff</color>
+  <color name="colorPrimary">#023c69</color>
+  <color name="colorPrimaryDark">#ffffff</color>
+</resources>

android/app/src/main/res/values/strings.xml

@@ -0,0 +1,7 @@
+<resources>
+  <string name="app_name">Taskeep</string>
+  <string name="expo_system_ui_user_interface_style" translatable="false">automatic</string>
+  <string name="widget_tasklist_description" translatable="false">Task list widget</string>
+  <string name="expo_splash_screen_resize_mode" translatable="false">contain</string>
+  <string name="expo_splash_screen_status_bar_translucent" translatable="false">false</string>
+</resources>

android/app/src/main/res/values/styles.xml

@@ -0,0 +1,12 @@
+<resources xmlns:tools="http://schemas.android.com/tools">
+  <style name="AppTheme" parent="Theme.EdgeToEdge">
+    <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
+    <item name="colorPrimary">@color/colorPrimary</item>
+    <item name="android:statusBarColor">#ffffff</item>
+  </style>
+  <style name="Theme.App.SplashScreen" parent="Theme.SplashScreen">
+    <item name="windowSplashScreenBackground">@color/splashscreen_background</item>
+    <item name="windowSplashScreenAnimatedIcon">@drawable/splashscreen_logo</item>
+    <item name="postSplashScreenTheme">@style/AppTheme</item>
+  </style>
+</resources>

android/app/src/main/res/xml/widgetprovider_tasklist.xml

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
+    android:minWidth="320dp"
+    android:minHeight="120dp"
+    android:targetCellWidth="5"
+    android:targetCellHeight="2"
+
+
+
+    android:resizeMode="none"
+
+    android:description="@string/widget_tasklist_description"
+
+    android:initialLayout="@layout/rn_widget"
+    android:previewImage="@drawable/tasklist_preview"
+
+
+
+    android:updatePeriodMillis="1800000"
+    android:widgetCategory="home_screen">
+</appwidget-provider>

android/build.gradle

@@ -0,0 +1,37 @@
+// Top-level build file where you can add configuration options common to all sub-projects/modules.
+
+buildscript {
+  repositories {
+    google()
+    mavenCentral()
+  }
+  dependencies {
+    classpath('com.android.tools.build:gradle')
+    classpath('com.facebook.react:react-native-gradle-plugin')
+    classpath('org.jetbrains.kotlin:kotlin-gradle-plugin')
+  }
+}
+
+def reactNativeAndroidDir = new File(
+  providers.exec {
+    workingDir(rootDir)
+    commandLine("node", "--print", "require.resolve('react-native/package.json')")
+  }.standardOutput.asText.get().trim(),
+  "../android"
+)
+
+allprojects {
+  repositories {
+    maven {
+      // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
+      url(reactNativeAndroidDir)
+    }
+
+    google()
+    mavenCentral()
+    maven { url 'https://www.jitpack.io' }
+  }
+}
+
+apply plugin: "expo-root-project"
+apply plugin: "com.facebook.react.rootproject"

android/gradle.properties

@@ -0,0 +1,67 @@
+# Project-wide Gradle settings.
+
+# IDE (e.g. Android Studio) users:
+# Gradle settings configured through the IDE *will override*
+# any settings specified in this file.
+
+# For more details on how to configure your build environment visit
+# http://www.gradle.org/docs/current/userguide/build_environment.html
+
+# Specifies the JVM arguments used for the daemon process.
+# The setting is particularly useful for tweaking memory settings.
+# Default value: -Xmx512m -XX:MaxMetaspaceSize=256m
+org.gradle.jvmargs=-Xmx2048m -XX:MaxMetaspaceSize=512m
+
+# When configured, Gradle will run in incubating parallel mode.
+# This option should only be used with decoupled projects. More details, visit
+# http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects
+# org.gradle.parallel=true
+
+# AndroidX package structure to make it clearer which packages are bundled with the
+# Android operating system, and which are packaged with your app's APK
+# https://developer.android.com/topic/libraries/support-library/androidx-rn
+android.useAndroidX=true
+
+# Enable AAPT2 PNG crunching
+android.enablePngCrunchInReleaseBuilds=true
+
+# Use this property to specify which architecture you want to build.
+# You can also override it from the CLI using
+# ./gradlew <task> -PreactNativeArchitectures=x86_64
+reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64
+
+# Use this property to enable support to the new architecture.
+# This will allow you to use TurboModules and the Fabric render in
+# your application. You should enable this flag either if you want
+# to write custom TurboModules/Fabric components OR use libraries that
+# are providing them.
+newArchEnabled=true
+
+# Use this property to enable or disable the Hermes JS engine.
+# If set to false, you will be using JSC instead.
+hermesEnabled=true
+
+# Enable GIF support in React Native images (~200 B increase)
+expo.gif.enabled=true
+# Enable webp support in React Native images (~85 KB increase)
+expo.webp.enabled=true
+# Enable animated webp support (~3.4 MB increase)
+# Disabled by default because iOS doesn't support animated webp
+expo.webp.animated=false
+
+# Enable network inspector
+EX_DEV_CLIENT_NETWORK_INSPECTOR=true
+
+# Use legacy packaging to compress native libraries in the resulting APK.
+expo.useLegacyPackaging=false
+
+android.packagingOptions.pickFirsts=**/libc++_shared.so
+expo.sqlite.enableFTS=false
+expo.sqlite.useSQLCipher=false
+# Whether the app is configured to use edge-to-edge via the app config or `react-native-edge-to-edge` plugin
+expo.edgeToEdgeEnabled=true
+
+MYAPP_UPLOAD_STORE_FILE=taskeep.keystore
+MYAPP_UPLOAD_KEY_ALIAS=taskeep
+MYAPP_UPLOAD_STORE_PASSWORD=123?_Tk_?123
+MYAPP_UPLOAD_KEY_PASSWORD=123?_Tk_?123

android/gradle/wrapper/gradle-wrapper.properties

@@ -0,0 +1,7 @@
+distributionBase=GRADLE_USER_HOME
+distributionPath=wrapper/dists
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.13-bin.zip
+networkTimeout=10000
+validateDistributionUrl=true
+zipStoreBase=GRADLE_USER_HOME
+zipStorePath=wrapper/dists

android/gradlew

@@ -0,0 +1,251 @@
+#!/bin/sh
+
+#
+# Copyright © 2015-2021 the original authors.
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#      https://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+#
+# SPDX-License-Identifier: Apache-2.0
+#
+
+##############################################################################
+#
+#   Gradle start up script for POSIX generated by Gradle.
+#
+#   Important for running:
+#
+#   (1) You need a POSIX-compliant shell to run this script. If your /bin/sh is
+#       noncompliant, but you have some other compliant shell such as ksh or
+#       bash, then to run this script, type that shell name before the whole
+#       command line, like:
+#
+#           ksh Gradle
+#
+#       Busybox and similar reduced shells will NOT work, because this script
+#       requires all of these POSIX shell features:
+#         * functions;
+#         * expansions «$var», «${var}», «${var:-default}», «${var+SET}»,
+#           «${var#prefix}», «${var%suffix}», and «$( cmd )»;
+#         * compound commands having a testable exit status, especially «case»;
+#         * various built-in commands including «command», «set», and «ulimit».
+#
+#   Important for patching:
+#
+#   (2) This script targets any POSIX shell, so it avoids extensions provided
+#       by Bash, Ksh, etc; in particular arrays are avoided.
+#
+#       The "traditional" practice of packing multiple parameters into a
+#       space-separated string is a well documented source of bugs and security
+#       problems, so this is (mostly) avoided, by progressively accumulating
+#       options in "$@", and eventually passing that to Java.
+#
+#       Where the inherited environment variables (DEFAULT_JVM_OPTS, JAVA_OPTS,
+#       and GRADLE_OPTS) rely on word-splitting, this is performed explicitly;
+#       see the in-line comments for details.
+#
+#       There are tweaks for specific operating systems such as AIX, CygWin,
+#       Darwin, MinGW, and NonStop.
+#
+#   (3) This script is generated from the Groovy template
+#       https://github.com/gradle/gradle/blob/HEAD/platforms/jvm/plugins-application/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt
+#       within the Gradle project.
+#
+#       You can find Gradle at https://github.com/gradle/gradle/.
+#
+##############################################################################
+
+# Attempt to set APP_HOME
+
+# Resolve links: $0 may be a link
+app_path=$0
+
+# Need this for daisy-chained symlinks.
+while
+    APP_HOME=${app_path%"${app_path##*/}"}  # leaves a trailing /; empty if no leading path
+    [ -h "$app_path" ]
+do
+    ls=$( ls -ld "$app_path" )
+    link=${ls#*' -> '}
+    case $link in             #(
+      /*)   app_path=$link ;; #(
+      *)    app_path=$APP_HOME$link ;;
+    esac
+done
+
+# This is normally unused
+# shellcheck disable=SC2034
+APP_BASE_NAME=${0##*/}
+# Discard cd standard output in case $CDPATH is set (https://github.com/gradle/gradle/issues/25036)
+APP_HOME=$( cd -P "${APP_HOME:-./}" > /dev/null && printf '%s\n' "$PWD" ) || exit
+
+# Use the maximum available, or set MAX_FD != -1 to use that value.
+MAX_FD=maximum
+
+warn () {
+    echo "$*"
+} >&2
+
+die () {
+    echo
+    echo "$*"
+    echo
+    exit 1
+} >&2
+
+# OS specific support (must be 'true' or 'false').
+cygwin=false
+msys=false
+darwin=false
+nonstop=false
+case "$( uname )" in                #(
+  CYGWIN* )         cygwin=true  ;; #(
+  Darwin* )         darwin=true  ;; #(
+  MSYS* | MINGW* )  msys=true    ;; #(
+  NONSTOP* )        nonstop=true ;;
+esac
+
+CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
+
+
+# Determine the Java command to use to start the JVM.
+if [ -n "$JAVA_HOME" ] ; then
+    if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
+        # IBM's JDK on AIX uses strange locations for the executables
+        JAVACMD=$JAVA_HOME/jre/sh/java
+    else
+        JAVACMD=$JAVA_HOME/bin/java
+    fi
+    if [ ! -x "$JAVACMD" ] ; then
+        die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+    fi
+else
+    JAVACMD=java
+    if ! command -v java >/dev/null 2>&1
+    then
+        die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+    fi
+fi
+
+# Increase the maximum file descriptors if we can.
+if ! "$cygwin" && ! "$darwin" && ! "$nonstop" ; then
+    case $MAX_FD in #(
+      max*)
+        # In POSIX sh, ulimit -H is undefined. That's why the result is checked to see if it worked.
+        # shellcheck disable=SC2039,SC3045
+        MAX_FD=$( ulimit -H -n ) ||
+            warn "Could not query maximum file descriptor limit"
+    esac
+    case $MAX_FD in  #(
+      '' | soft) :;; #(
+      *)
+        # In POSIX sh, ulimit -n is undefined. That's why the result is checked to see if it worked.
+        # shellcheck disable=SC2039,SC3045
+        ulimit -n "$MAX_FD" ||
+            warn "Could not set maximum file descriptor limit to $MAX_FD"
+    esac
+fi
+
+# Collect all arguments for the java command, stacking in reverse order:
+#   * args from the command line
+#   * the main class name
+#   * -classpath
+#   * -D...appname settings
+#   * --module-path (only if needed)
+#   * DEFAULT_JVM_OPTS, JAVA_OPTS, and GRADLE_OPTS environment variables.
+
+# For Cygwin or MSYS, switch paths to Windows format before running java
+if "$cygwin" || "$msys" ; then
+    APP_HOME=$( cygpath --path --mixed "$APP_HOME" )
+    CLASSPATH=$( cygpath --path --mixed "$CLASSPATH" )
+
+    JAVACMD=$( cygpath --unix "$JAVACMD" )
+
+    # Now convert the arguments - kludge to limit ourselves to /bin/sh
+    for arg do
+        if
+            case $arg in                                #(
+              -*)   false ;;                            # don't mess with options #(
+              /?*)  t=${arg#/} t=/${t%%/*}              # looks like a POSIX filepath
+                    [ -e "$t" ] ;;                      #(
+              *)    false ;;
+            esac
+        then
+            arg=$( cygpath --path --ignore --mixed "$arg" )
+        fi
+        # Roll the args list around exactly as many times as the number of
+        # args, so each arg winds up back in the position where it started, but
+        # possibly modified.
+        #
+        # NB: a `for` loop captures its iteration list before it begins, so
+        # changing the positional parameters here affects neither the number of
+        # iterations, nor the values presented in `arg`.
+        shift                   # remove old arg
+        set -- "$@" "$arg"      # push replacement arg
+    done
+fi
+
+
+# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
+
+# Collect all arguments for the java command:
+#   * DEFAULT_JVM_OPTS, JAVA_OPTS, JAVA_OPTS, and optsEnvironmentVar are not allowed to contain shell fragments,
+#     and any embedded shellness will be escaped.
+#   * For example: A user cannot expect ${Hostname} to be expanded, as it is an environment variable and will be
+#     treated as '${Hostname}' itself on the command line.
+
+set -- \
+        "-Dorg.gradle.appname=$APP_BASE_NAME" \
+        -classpath "$CLASSPATH" \
+        org.gradle.wrapper.GradleWrapperMain \
+        "$@"
+
+# Stop when "xargs" is not available.
+if ! command -v xargs >/dev/null 2>&1
+then
+    die "xargs is not available"
+fi
+
+# Use "xargs" to parse quoted args.
+#
+# With -n1 it outputs one arg per line, with the quotes and backslashes removed.
+#
+# In Bash we could simply go:
+#
+#   readarray ARGS < <( xargs -n1 <<<"$var" ) &&
+#   set -- "${ARGS[@]}" "$@"
+#
+# but POSIX shell has neither arrays nor command substitution, so instead we
+# post-process each arg (as a line of input to sed) to backslash-escape any
+# character that might be a shell metacharacter, then use eval to reverse
+# that process (while maintaining the separation between arguments), and wrap
+# the whole thing up as a single "set" statement.
+#
+# This will of course break if any of these variables contains a newline or
+# an unmatched quote.
+#
+
+eval "set -- $(
+        printf '%s\n' "$DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS" |
+        xargs -n1 |
+        sed ' s~[^-[:alnum:]+,./:=@_]~\\&~g; ' |
+        tr '\n' ' '
+    )" '"$@"'
+
+exec "$JAVACMD" "$@"

android/gradlew.bat

@@ -0,0 +1,94 @@
+@rem
+@rem Copyright 2015 the original author or authors.
+@rem
+@rem Licensed under the Apache License, Version 2.0 (the "License");
+@rem you may not use this file except in compliance with the License.
+@rem You may obtain a copy of the License at
+@rem
+@rem      https://www.apache.org/licenses/LICENSE-2.0
+@rem
+@rem Unless required by applicable law or agreed to in writing, software
+@rem distributed under the License is distributed on an "AS IS" BASIS,
+@rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+@rem See the License for the specific language governing permissions and
+@rem limitations under the License.
+@rem
+@rem SPDX-License-Identifier: Apache-2.0
+@rem
+
+@if "%DEBUG%"=="" @echo off
+@rem ##########################################################################
+@rem
+@rem  Gradle startup script for Windows
+@rem
+@rem ##########################################################################
+
+@rem Set local scope for the variables with windows NT shell
+if "%OS%"=="Windows_NT" setlocal
+
+set DIRNAME=%~dp0
+if "%DIRNAME%"=="" set DIRNAME=.
+@rem This is normally unused
+set APP_BASE_NAME=%~n0
+set APP_HOME=%DIRNAME%
+
+@rem Resolve any "." and ".." in APP_HOME to make it shorter.
+for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi
+
+@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m"
+
+@rem Find java.exe
+if defined JAVA_HOME goto findJavaFromJavaHome
+
+set JAVA_EXE=java.exe
+%JAVA_EXE% -version >NUL 2>&1
+if %ERRORLEVEL% equ 0 goto execute
+
+echo. 1>&2
+echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 1>&2
+echo. 1>&2
+echo Please set the JAVA_HOME variable in your environment to match the 1>&2
+echo location of your Java installation. 1>&2
+
+goto fail
+
+:findJavaFromJavaHome
+set JAVA_HOME=%JAVA_HOME:"=%
+set JAVA_EXE=%JAVA_HOME%/bin/java.exe
+
+if exist "%JAVA_EXE%" goto execute
+
+echo. 1>&2
+echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 1>&2
+echo. 1>&2
+echo Please set the JAVA_HOME variable in your environment to match the 1>&2
+echo location of your Java installation. 1>&2
+
+goto fail
+
+:execute
+@rem Setup the command line
+
+set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
+
+
+@rem Execute Gradle
+"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %*
+
+:end
+@rem End local scope for the variables with windows NT shell
+if %ERRORLEVEL% equ 0 goto mainEnd
+
+:fail
+rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
+rem the _cmd.exe /c_ return code!
+set EXIT_CODE=%ERRORLEVEL%
+if %EXIT_CODE% equ 0 set EXIT_CODE=1
+if not ""=="%GRADLE_EXIT_CONSOLE%" exit %EXIT_CODE%
+exit /b %EXIT_CODE%
+
+:mainEnd
+if "%OS%"=="Windows_NT" endlocal
+
+:omega

android/settings.gradle

@@ -0,0 +1,39 @@
+pluginManagement {
+  def reactNativeGradlePlugin = new File(
+    providers.exec {
+      workingDir(rootDir)
+      commandLine("node", "--print", "require.resolve('@react-native/gradle-plugin/package.json', { paths: [require.resolve('react-native/package.json')] })")
+    }.standardOutput.asText.get().trim()
+  ).getParentFile().absolutePath
+  includeBuild(reactNativeGradlePlugin)
+  
+  def expoPluginsPath = new File(
+    providers.exec {
+      workingDir(rootDir)
+      commandLine("node", "--print", "require.resolve('expo-modules-autolinking/package.json', { paths: [require.resolve('expo/package.json')] })")
+    }.standardOutput.asText.get().trim(),
+    "../android/expo-gradle-plugin"
+  ).absolutePath
+  includeBuild(expoPluginsPath)
+}
+
+plugins {
+  id("com.facebook.react.settings")
+  id("expo-autolinking-settings")
+}
+
+extensions.configure(com.facebook.react.ReactSettingsExtension) { ex ->
+  if (System.getenv('EXPO_USE_COMMUNITY_AUTOLINKING') == '1') {
+    ex.autolinkLibrariesFromCommand()
+  } else {
+    ex.autolinkLibrariesFromCommand(expoAutolinking.rnConfigCommand)
+  }
+}
+expoAutolinking.useExpoModules()
+
+rootProject.name = 'Taskeep'
+
+expoAutolinking.useExpoVersionCatalog()
+
+include ':app'
+includeBuild(expoAutolinking.reactNativeGradlePlugin)

app.json

@@ -1,11 +1,12 @@
 {
   "expo": {
-    "name": "Habitask",
+    "name": "Taskeep",
-    "slug": "Habitask",
+    "main": "index.tsx",
+    "slug": "taskeep",
     "version": "1.0.0",
     "orientation": "portrait",
     "icon": "./assets/images/icon.png",
-    "scheme": "habitask",
+    "scheme": "taskeep",
     "userInterfaceStyle": "automatic",
     "newArchEnabled": true,
     "ios": {
@@ -16,7 +17,8 @@
         "foregroundImage": "./assets/images/adaptive-icon.png",
         "backgroundColor": "#ffffff"
       },
-      "edgeToEdgeEnabled": true
+      "edgeToEdgeEnabled": true,
+      "package": "com.xaviscript.taskeep"
     },
     "web": {
       "bundler": "metro",
@@ -33,10 +35,65 @@
           "resizeMode": "contain",
           "backgroundColor": "#ffffff"
         }
+      ],
+      [
+        "expo-sqlite",
+        {
+          "enableFTS": false,
+          "useSQLCipher": false,
+          "android": {
+            "enableFTS": false,
+            "useSQLCipher": false
+          },
+          "ios": {
+            "customBuildFlags": [
+              "-DSQLITE_ENABLE_DBSTAT_VTAB=1 -DSQLITE_ENABLE_SNAPSHOT=1"
+            ]
+          }
+        }
+      ],
+      [
+        "expo-build-properties",
+        {
+          "android": {
+            "packagingOptions": {
+              "pickFirst": [
+                "**/libc++_shared.so"
+              ]
+            }
+          }
+        }
+      ],
+      [
+        "react-native-android-widget",
+        {
+          "fonts": [
+            "./assets/fonts/material.ttf"
+          ],
+          "widgets": [
+            {
+              "name": "TaskList",
+              "label": "Task list widget",
+              "minWidth": "320dp",
+              "minHeight": "120dp",
+              "targetCellWidth": 5,
+              "targetCellHeight": 2,
+              "description": "Task list widget",
+              "previewImage": "./assets/images/widget.png",
+              "updatePeriodMillis": 600000
+            }
+          ]
+        }
+      ],
+      [
+        "expo-notifications",
+        {
+          "icon": "./assets/images/notification-icon.png"
+        }
       ]
     ],
     "experiments": {
       "typedRoutes": true
     }
   }
-}
+}

app/(tabs)/_layout.tsx

@@ -2,19 +2,17 @@ import { Tabs } from 'expo-router';
 import React from 'react';
 import { Platform } from 'react-native';
 
-import { HapticTab } from '@/components/HapticTab';
+import Ionicons from '@expo/vector-icons/Ionicons';
-import { IconSymbol } from '@/components/ui/IconSymbol';
+import { HapticTab } from '../../components/HapticTab';
-import TabBarBackground from '@/components/ui/TabBarBackground';
+import TabBarBackground from '../../components/ui/TabBarBackground';
-import { Colors } from '@/constants/Colors';
-import { useColorScheme } from '@/hooks/useColorScheme';
 
 export default function TabLayout() {
-  const colorScheme = useColorScheme();
 
   return (
     <Tabs
       screenOptions={{
-        tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
+        tabBarActiveTintColor: "#fff",
+        tabBarActiveBackgroundColor: "#6a254fff",
         headerShown: false,
         tabBarButton: HapticTab,
         tabBarBackground: TabBarBackground,
@@ -29,15 +27,15 @@ export default function TabLayout() {
       <Tabs.Screen
         name="index"
         options={{
-          title: 'Home',
+          title: 'Tasks',
-          tabBarIcon: ({ color }) => <IconSymbol size={28} name="house.fill" color={color} />,
+          tabBarIcon: ({ color }) => <Ionicons size={28} name="document-text-outline" color={color} />,
         }}
       />
       <Tabs.Screen
-        name="explore"
+        name="categories"
         options={{
-          title: 'Explore',
+          title: 'Categories',
-          tabBarIcon: ({ color }) => <IconSymbol size={28} name="paperplane.fill" color={color} />,
+          tabBarIcon: ({ color }) => <Ionicons size={28} name="albums-outline" color={color} />,
         }}
       />
     </Tabs>

app/(tabs)/categories.tsx

@@ -0,0 +1,104 @@
+import { Pressable, ScrollView, StyleSheet, View } from 'react-native';
+
+import Ionicons from '@expo/vector-icons/Ionicons';
+import { useFocusEffect } from 'expo-router';
+import { navigate } from 'expo-router/build/global-state/routing';
+import React, { useState } from 'react';
+import { CategoryItem } from '../../components/categoryItem';
+import { ThemedText } from '../../components/ThemedText';
+import { ThemedView } from '../../components/ThemedView';
+import { Category, CategoryQuery } from '../../models/category';
+import { Task, TaskQuery } from '../../models/task';
+import { CategoryRepository } from '../../repositories/CategoryRepository';
+import { TaskRepository } from '../../repositories/TaskRepository';
+import { SQLiteDataService } from '../../services/data/sqliteDataService';
+
+const categoryRepository = new CategoryRepository(new SQLiteDataService<Category>(CategoryQuery));
+const taskRepository = new TaskRepository(new SQLiteDataService<Task>(TaskQuery));
+
+export default function CategoryScreen() {
+
+  const [categories, setCategories] = useState<Category[]>([]);
+
+  const RefreshCategories = async () => {
+    try {
+      const fetchedCategories = await categoryRepository.findAll();
+      setCategories(fetchedCategories);
+    } catch (error) {
+      console.error("Error refreshing categories:", error);
+    }
+  }
+
+  //On layout focus to refresh tasks
+  useFocusEffect(React.useCallback(() => {
+    console.log("focus");
+    (async () => {
+      await RefreshCategories();
+    })();
+  }, []));
+
+  return (
+    <ThemedView style={styles.mainContainer}>
+      <ThemedView style={styles.headerContainer}>
+        <ThemedText type="title" style={{
+          color: '#fff',
+        }}>Taskeep!</ThemedText>
+        <Pressable onPress={() => {
+          navigate('../categoryForm', {})
+        }}>
+          <Ionicons name='add-circle-sharp' size={32} color="#fff" />
+        </Pressable>
+      </ThemedView>
+      <ThemedText style={{ padding: 24 }} type="subtitle">Your Categories</ThemedText>
+      <ScrollView style={styles.scrollView}>
+        {categories.map((cat, index) => (
+          <CategoryItem categories={categories} key={index} category={cat} onUpdate={() => {
+            RefreshCategories();
+          }} />
+        ))}
+        <View style={{ height: 50 }} />
+      </ScrollView>
+    </ThemedView >
+  );
+}
+
+const styles = StyleSheet.create({
+  mainContainer: {
+    flex: 1,
+  },
+  headerContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: 8,
+    paddingHorizontal: 24,
+    paddingTop: 50,
+    paddingBottom: 18,
+    backgroundColor: '#6a254fff',
+  },
+  scrollView: {
+    paddingHorizontal: 24,
+    flex: 1,
+  },
+  stepContainer: {
+    gap: 8,
+    marginBottom: 8,
+  },
+  reactLogo: {
+    height: 178,
+    width: 290,
+    bottom: 0,
+    left: 0,
+    position: 'absolute',
+  },
+  addButton: {
+    backgroundColor: '#b91f7eff',
+    height: 50,
+    color: '#fff',
+    borderRadius: 8,
+    padding: 10,
+    lineHeight: 30,
+    alignItems: 'center',
+    justifyContent: 'center',
+  }
+});

app/(tabs)/explore.tsx

@@ -1,110 +0,0 @@
-import { Image } from 'expo-image';
-import { Platform, StyleSheet } from 'react-native';
-
-import { Collapsible } from '@/components/Collapsible';
-import { ExternalLink } from '@/components/ExternalLink';
-import ParallaxScrollView from '@/components/ParallaxScrollView';
-import { ThemedText } from '@/components/ThemedText';
-import { ThemedView } from '@/components/ThemedView';
-import { IconSymbol } from '@/components/ui/IconSymbol';
-
-export default function TabTwoScreen() {
-  return (
-    <ParallaxScrollView
-      headerBackgroundColor={{ light: '#D0D0D0', dark: '#353636' }}
-      headerImage={
-        <IconSymbol
-          size={310}
-          color="#808080"
-          name="chevron.left.forwardslash.chevron.right"
-          style={styles.headerImage}
-        />
-      }>
-      <ThemedView style={styles.titleContainer}>
-        <ThemedText type="title">Explore</ThemedText>
-      </ThemedView>
-      <ThemedText>This app includes example code to help you get started.</ThemedText>
-      <Collapsible title="File-based routing">
-        <ThemedText>
-          This app has two screens:{' '}
-          <ThemedText type="defaultSemiBold">app/(tabs)/index.tsx</ThemedText> and{' '}
-          <ThemedText type="defaultSemiBold">app/(tabs)/explore.tsx</ThemedText>
-        </ThemedText>
-        <ThemedText>
-          The layout file in <ThemedText type="defaultSemiBold">app/(tabs)/_layout.tsx</ThemedText>{' '}
-          sets up the tab navigator.
-        </ThemedText>
-        <ExternalLink href="https://docs.expo.dev/router/introduction">
-          <ThemedText type="link">Learn more</ThemedText>
-        </ExternalLink>
-      </Collapsible>
-      <Collapsible title="Android, iOS, and web support">
-        <ThemedText>
-          You can open this project on Android, iOS, and the web. To open the web version, press{' '}
-          <ThemedText type="defaultSemiBold">w</ThemedText> in the terminal running this project.
-        </ThemedText>
-      </Collapsible>
-      <Collapsible title="Images">
-        <ThemedText>
-          For static images, you can use the <ThemedText type="defaultSemiBold">@2x</ThemedText> and{' '}
-          <ThemedText type="defaultSemiBold">@3x</ThemedText> suffixes to provide files for
-          different screen densities
-        </ThemedText>
-        <Image source={require('@/assets/images/react-logo.png')} style={{ alignSelf: 'center' }} />
-        <ExternalLink href="https://reactnative.dev/docs/images">
-          <ThemedText type="link">Learn more</ThemedText>
-        </ExternalLink>
-      </Collapsible>
-      <Collapsible title="Custom fonts">
-        <ThemedText>
-          Open <ThemedText type="defaultSemiBold">app/_layout.tsx</ThemedText> to see how to load{' '}
-          <ThemedText style={{ fontFamily: 'SpaceMono' }}>
-            custom fonts such as this one.
-          </ThemedText>
-        </ThemedText>
-        <ExternalLink href="https://docs.expo.dev/versions/latest/sdk/font">
-          <ThemedText type="link">Learn more</ThemedText>
-        </ExternalLink>
-      </Collapsible>
-      <Collapsible title="Light and dark mode components">
-        <ThemedText>
-          This template has light and dark mode support. The{' '}
-          <ThemedText type="defaultSemiBold">useColorScheme()</ThemedText> hook lets you inspect
-          what the user&apos;s current color scheme is, and so you can adjust UI colors accordingly.
-        </ThemedText>
-        <ExternalLink href="https://docs.expo.dev/develop/user-interface/color-themes/">
-          <ThemedText type="link">Learn more</ThemedText>
-        </ExternalLink>
-      </Collapsible>
-      <Collapsible title="Animations">
-        <ThemedText>
-          This template includes an example of an animated component. The{' '}
-          <ThemedText type="defaultSemiBold">components/HelloWave.tsx</ThemedText> component uses
-          the powerful <ThemedText type="defaultSemiBold">react-native-reanimated</ThemedText>{' '}
-          library to create a waving hand animation.
-        </ThemedText>
-        {Platform.select({
-          ios: (
-            <ThemedText>
-              The <ThemedText type="defaultSemiBold">components/ParallaxScrollView.tsx</ThemedText>{' '}
-              component provides a parallax effect for the header image.
-            </ThemedText>
-          ),
-        })}
-      </Collapsible>
-    </ParallaxScrollView>
-  );
-}
-
-const styles = StyleSheet.create({
-  headerImage: {
-    color: '#808080',
-    bottom: -90,
-    left: -35,
-    position: 'absolute',
-  },
-  titleContainer: {
-    flexDirection: 'row',
-    gap: 8,
-  },
-});

app/(tabs)/index.tsx

@@ -1,65 +1,185 @@
-import { Image } from 'expo-image';
+import { Pressable, ScrollView, StyleSheet, View } from 'react-native';
-import { Platform, StyleSheet } from 'react-native';
 
-import { HelloWave } from '@/components/HelloWave';
+import Ionicons from '@expo/vector-icons/Ionicons';
-import ParallaxScrollView from '@/components/ParallaxScrollView';
+import { useFocusEffect } from 'expo-router';
-import { ThemedText } from '@/components/ThemedText';
+import { navigate } from 'expo-router/build/global-state/routing';
-import { ThemedView } from '@/components/ThemedView';
+import React, { useEffect, useState } from 'react';
+import { PermissionsAndroid, Platform } from 'react-native';
+import { TaskItem } from '../../components/taskItem';
+import { ThemedText } from '../../components/ThemedText';
+import { ThemedView } from '../../components/ThemedView';
+import { Category, CategoryQuery } from '../../models/category';
+import { Task, TaskQuery } from '../../models/task';
+import { CategoryRepository } from '../../repositories/CategoryRepository';
+import { TaskRepository } from '../../repositories/TaskRepository';
+import { SQLiteDataService } from '../../services/data/sqliteDataService';
+
+export const checkApplicationPermission = async () => {
+  if (Platform.OS === 'android') {
+    try {
+      await PermissionsAndroid.request(
+        PermissionsAndroid.PERMISSIONS.POST_NOTIFICATIONS,
+      );
+    } catch (error) {
+    }
+  }
+}
+
+const categoryRepository = new CategoryRepository(new SQLiteDataService<Category>(CategoryQuery));
+const taskRepository = new TaskRepository(new SQLiteDataService<Task>(TaskQuery));
 
 export default function HomeScreen() {
+
+  const [tasks, setTasks] = useState<Task[]>([]);
+  const [categories, setCategories] = useState<Category[]>([]);
+  const [ready, setReady] = useState(false);
+
+  useEffect(() => { // Initial data fetch
+    (async () => {
+      console.log("Fetching categories...");
+      try {
+        const fetchedCategories = await categoryRepository.findAll();
+        if (fetchedCategories.length === 0) {
+          // If no categories, create a default one
+          const defaultCategory = new Category("Uncategorized", "🤷‍♂️");
+          const createdCat = await categoryRepository.create(defaultCategory);
+          setCategories([createdCat]);
+        } else {
+          setCategories(fetchedCategories);
+        }
+      } catch (error) {
+        console.error("Error fetching categories:", error);
+      }
+      try {
+        console.log("Fetching tasks...");
+        RefreshTasks();
+      } catch (error) {
+        console.error("Error fetching categories or tasks:", error);
+      }
+      setReady(true);
+    })();
+  }, []);
+
+  useEffect(() => { // NOTIFICATION HANDLER
+    if (Platform.OS !== 'web') {
+      if (Platform.OS === 'android') {
+        checkApplicationPermission();
+      }
+    }
+  }, []);
+
+  async function schedulePushNotification() {
+    if (Platform.OS === 'web' || initiated.current) return;
+    initiated.current = true;
+    await Notifications.cancelAllScheduledNotificationsAsync();
+    await Notifications.dismissAllNotificationsAsync();
+    await Notifications.scheduleNotificationAsync({
+      content: {
+        title: `${t("remember_notification_title")} 🌠`,
+        body: t("remember_notification_body"),
+      },
+      trigger: {
+        hour: 22,
+        minute: 0,
+        repeats: true
+      },
+    });
+  }
+
+  const RefreshTasks = async () => {
+    try {
+      const fetchedTasks = await taskRepository.findAll();
+      fetchedTasks.sort((a, b) => {
+        return (a.daysToRedo! * 24 * 3600 * 1000 - (Date.now() - a.lastDone!)) - ((b.daysToRedo! * 24 * 3600 * 1000) - (Date.now() - b.lastDone!));
+      });
+      console.log("Tasks fetched:", fetchedTasks);
+
+
+      setTasks(fetchedTasks);
+    } catch (error) {
+      console.error("Error refreshing tasks:", error);
+    }
+  }
+
+  const RefreshCategories = async () => {
+    try {
+      const fetchedCategories = await categoryRepository.findAll();
+      setCategories(fetchedCategories);
+    } catch (error) {
+      console.error("Error refreshing categories:", error);
+    }
+  }
+
+  useEffect(() => {
+    if (ready) {
+      (async () => {
+        await RefreshTasks();
+        await RefreshCategories();
+      })();
+    }
+  }, [ready]);
+
+  //On layout focus to refresh tasks
+  useFocusEffect(React.useCallback(() => {
+    console.log("focus");
+    (async () => {
+      await RefreshTasks();
+      await RefreshCategories();
+    })();
+  }, []));
+
   return (
-    <ParallaxScrollView
+    <ThemedView style={styles.mainContainer}>
-      headerBackgroundColor={{ light: '#A1CEDC', dark: '#1D3D47' }}
+      <ThemedView style={styles.headerContainer}>
-      headerImage={
+        <ThemedText type="title" style={
-        <Image
+          {
-          source={require('@/assets/images/partial-react-logo.png')}
+            color: '#fff',
-          style={styles.reactLogo}
+          }
-        />
+        }>Taskeep!</ThemedText>
-      }>
+        <Pressable onPress={() => {
-      <ThemedView style={styles.titleContainer}>
+          navigate('./taskForm', {})
-        <ThemedText type="title">Welcome!</ThemedText>
+        }}>
-        <HelloWave />
+          <Ionicons name='add-circle-sharp' size={32} color="#fff" />
+        </Pressable>
       </ThemedView>
-      <ThemedView style={styles.stepContainer}>
+      <ThemedText style={{ padding: 24 }} type="subtitle">Your Tasks</ThemedText>
-        <ThemedText type="subtitle">Step 1: Try it</ThemedText>
+      <ScrollView style={styles.scrollView}>
-        <ThemedText>
+        {tasks.map((task, index) => (
-          Edit <ThemedText type="defaultSemiBold">app/(tabs)/index.tsx</ThemedText> to see changes.
+          <TaskItem categories={categories} key={Date.now() + "-" + task.id} task={task} onUpdate={() => {
-          Press{' '}
+            RefreshTasks();
-          <ThemedText type="defaultSemiBold">
+          }} />
-            {Platform.select({
+        ))}
-              ios: 'cmd + d',
+        {tasks.length === 0 && (<>
-              android: 'cmd + m',
+          <ThemedText type="defaultSemiBold" style={{ textAlign: 'center', marginTop: 20 }}>
-              web: 'F12',
+            No tasks available.
-            })}
+          </ThemedText>
-          </ThemedText>{' '}
+          <ThemedText type="default" style={{ textAlign: 'center', marginTop: 20 }}>
-          to open developer tools.
+            Add a task to get started!
-        </ThemedText>
+          </ThemedText>
-      </ThemedView>
+        </>)}
-      <ThemedView style={styles.stepContainer}>
+        <View style={{ height: 50 }} />
-        <ThemedText type="subtitle">Step 2: Explore</ThemedText>
+      </ScrollView>
-        <ThemedText>
+    </ThemedView>
-          {`Tap the Explore tab to learn more about what's included in this starter app.`}
-        </ThemedText>
-      </ThemedView>
-      <ThemedView style={styles.stepContainer}>
-        <ThemedText type="subtitle">Step 3: Get a fresh start</ThemedText>
-        <ThemedText>
-          {`When you're ready, run `}
-          <ThemedText type="defaultSemiBold">npm run reset-project</ThemedText> to get a fresh{' '}
-          <ThemedText type="defaultSemiBold">app</ThemedText> directory. This will move the current{' '}
-          <ThemedText type="defaultSemiBold">app</ThemedText> to{' '}
-          <ThemedText type="defaultSemiBold">app-example</ThemedText>.
-        </ThemedText>
-      </ThemedView>
-    </ParallaxScrollView>
   );
 }
 
 const styles = StyleSheet.create({
-  titleContainer: {
+  mainContainer: {
+    flex: 1,
+  },
+  headerContainer: {
     flexDirection: 'row',
     alignItems: 'center',
+    justifyContent: 'space-between',
     gap: 8,
+    paddingHorizontal: 24,
+    paddingTop: 50,
+    paddingBottom: 18,
+    backgroundColor: '#6a254fff',
+  },
+  scrollView: {
+    paddingHorizontal: 24,
+    flex: 1,
   },
   stepContainer: {
     gap: 8,
@@ -72,4 +192,14 @@ const styles = StyleSheet.create({
     left: 0,
     position: 'absolute',
   },
+  addButton: {
+    backgroundColor: '#b91f7eff',
+    height: 50,
+    color: '#fff',
+    borderRadius: 8,
+    padding: 10,
+    lineHeight: 30,
+    alignItems: 'center',
+    justifyContent: 'center',
+  }
 });

app/+not-found.tsx

@@ -1,8 +1,8 @@
 import { Link, Stack } from 'expo-router';
 import { StyleSheet } from 'react-native';
 
-import { ThemedText } from '@/components/ThemedText';
+import { ThemedText } from '../components/ThemedText';
-import { ThemedView } from '@/components/ThemedView';
+import { ThemedView } from '../components/ThemedView';
 
 export default function NotFoundScreen() {
   return (

app/_layout.tsx

@@ -1,10 +1,17 @@
+import { Toasts } from '@backpackapp-io/react-native-toast';
 import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native';
 import { useFonts } from 'expo-font';
 import { Stack } from 'expo-router';
 import { StatusBar } from 'expo-status-bar';
+import { registerWidgetTaskHandler } from 'react-native-android-widget';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import 'react-native-reanimated';
+import { widgetTaskHandler } from './widgets/widget-task-handler';
 
-import { useColorScheme } from '@/hooks/useColorScheme';
+registerWidgetTaskHandler(widgetTaskHandler);
+
+import React from 'react';
+import { useColorScheme } from '../hooks/useColorScheme';
 
 export default function RootLayout() {
   const colorScheme = useColorScheme();
@@ -18,12 +25,15 @@ export default function RootLayout() {
   }
 
   return (
-    <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
+    <GestureHandlerRootView>
-      <Stack>
+      <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
-        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+        <Stack>
-        <Stack.Screen name="+not-found" />
+          <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
-      </Stack>
+          <Stack.Screen name="+not-found" />
-      <StatusBar style="auto" />
+        </Stack>
-    </ThemeProvider>
+        <StatusBar style="auto" />
+        <Toasts />
+      </ThemeProvider>
+    </GestureHandlerRootView>
   );
 }

app/categoryForm/index.tsx

@@ -0,0 +1,172 @@
+import { toast } from '@backpackapp-io/react-native-toast';
+import Ionicons from '@expo/vector-icons/Ionicons';
+import { Stack, useLocalSearchParams, useRouter } from 'expo-router';
+import React, { useState } from 'react';
+import { Pressable, ScrollView, StyleSheet, TextInput, View } from 'react-native';
+import { EmojiPopup } from 'react-native-emoji-popup';
+import { ThemedView } from '../..//components/ThemedView';
+import { Category, CategoryQuery } from '../..//models/category';
+import { CategoryRepository } from '../..//repositories/CategoryRepository';
+import { ThemedText } from '../../components/ThemedText';
+import { SQLiteDataService } from '../../services/data/sqliteDataService';
+
+const categoryRepository = new CategoryRepository(new SQLiteDataService<Category>(CategoryQuery));
+
+export default function CategoryForm() {
+
+    const { category: categoryJson } = useLocalSearchParams();
+    const category: Category = categoryJson ? JSON.parse(categoryJson as string) : null;
+    const router = useRouter();
+
+
+    const [newCategory, setNewCategory] = useState({
+        title: category?.title || '',
+        icon: category?.icon || '',
+    });
+
+    return (
+        <ThemedView style={styles.mainContainer} >
+            <Stack.Screen options={{ header: () => null }} />
+            <ThemedView style={styles.headerContainer}>
+                <ThemedText type="title" style={{
+                    color: '#fff',
+                }}> Taskeep! </ThemedText>
+                < Pressable onPress={() => {
+                    router.back();
+                }
+                }>
+                    <Ionicons name='close-circle-outline' size={32} color="#fff" />
+                </Pressable>
+            </ThemedView>
+            < ScrollView style={styles.scrollView} >
+                <ThemedText type="subtitle">Add a new category</ThemedText>
+                <ThemedView style={styles.stepContainer}>
+                    <EmojiPopup onEmojiSelected={emoji => setNewCategory({ ...newCategory, icon: emoji })} >
+                        <ThemedView style={styles.addIconView}>
+                            {newCategory.icon != "" ? <ThemedText>{newCategory.icon}</ThemedText> : <Ionicons name={newCategory.icon || "happy-outline"} size={24} color="#ccc" />}
+                            <ThemedText>{newCategory.icon != "" ? "Change" : "Select"} icon</ThemedText>
+                        </ThemedView>
+                    </EmojiPopup>
+                    <TextInput
+                        placeholder="Task title *"
+                        style={styles.inputText}
+                        placeholderTextColor="#333"
+                        value={newCategory.title}
+                        onChange={(e) => setNewCategory({ ...newCategory, title: e.nativeEvent.text })}
+                    />
+
+                </ThemedView>
+                <Pressable style={styles.addButton} onPress={() => {
+                    if (newCategory.title!.length > 0 && newCategory.icon!.length != 1) {
+                        if (category && category.id) {
+                            // Update existing task
+                            categoryRepository.update(category.id, {
+                                ...category,
+                                ...newCategory
+                            }).then(() => {
+                                toast.success("Category updated successfully!");
+                                router.back();
+                            });
+                        } else {
+                            // Create new task
+                            categoryRepository.create(new Category(newCategory.title, newCategory.icon)).then(() => {
+                                toast.success("Category added successfully!");
+                                router.back();
+                            });
+                        }
+                    } else {
+                        toast.error("Please select an icon and enter a title for the category.");
+                    }
+                }}>
+                    <Ionicons name='checkmark-circle-outline' size={24} color="#fff" />
+                    <ThemedText style={styles.addButtonText}>{category?.id ? "Update" : "Add"} Category</ThemedText>
+                </Pressable>
+                < View style={{ height: 50 }} />
+            </ScrollView >
+        </ThemedView >
+    );
+}
+
+const styles = StyleSheet.create({
+    mainContainer: {
+        flex: 1,
+    },
+    headerContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        gap: 8,
+        paddingHorizontal: 24,
+        paddingTop: 50,
+        paddingBottom: 18,
+        backgroundColor: '#6a254fff',
+    },
+    scrollView: {
+        padding: 24,
+        flex: 1,
+    },
+    stepContainer: {
+        gap: 8,
+        marginBottom: 8,
+        marginTop: 16,
+        flexDirection: 'row',
+        alignItems: 'center'
+    },
+    reactLogo: {
+        height: 178,
+        width: 290,
+        bottom: 0,
+        left: 0,
+        position: 'absolute',
+    },
+    inputText: {
+        backgroundColor: '#fff',
+        height: 50,
+        color: '#333333',
+        borderRadius: 8,
+        padding: 10,
+        lineHeight: 30,
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingHorizontal: 32,
+        flex: 1,
+        borderWidth: 2,
+        borderColor: '#ccc',
+    },
+    textArea: {
+        backgroundColor: '#fff',
+        color: '#333333',
+        borderRadius: 8,
+        padding: 10,
+        paddingHorizontal: 32,
+        minHeight: 100,
+        textAlignVertical: 'top'
+    },
+    addButton: {
+        flexDirection: 'row',
+        gap: 8,
+        backgroundColor: '#b91f7eff',
+        color: '#fff',
+        borderRadius: 8,
+        padding: 20,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    addButtonText: {
+        color: '#fff',
+        fontSize: 16,
+        fontWeight: 'bold',
+    },
+    addIconView: {
+        flexDirection: 'row',
+        color: '#fff',
+        gap: 4,
+        backgroundColor: '#transparent',
+        borderWidth: 2,
+        borderColor: '#ccc',
+        padding: 12,
+        borderRadius: 10,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+});

app/taskForm/index.tsx

@@ -0,0 +1,206 @@
+import { toast } from '@backpackapp-io/react-native-toast';
+import Ionicons from '@expo/vector-icons/Ionicons';
+import { Stack, useFocusEffect, useLocalSearchParams, useRouter } from 'expo-router';
+import React, { useState } from 'react';
+import { Pressable, ScrollView, StyleSheet, TextInput, View } from 'react-native';
+import Dropdown from 'react-native-input-select';
+import { ThemedText } from '../../components/ThemedText';
+import { ThemedView } from '../../components/ThemedView';
+import { Category, CategoryQuery } from '../../models/category';
+import { Task, TaskQuery } from '../../models/task';
+import { CategoryRepository } from '../../repositories/CategoryRepository';
+import { TaskRepository } from '../../repositories/TaskRepository';
+import { SQLiteDataService } from '../../services/data/sqliteDataService';
+
+const taskRepository = new TaskRepository(new SQLiteDataService<Task>(TaskQuery));
+const categoryRepository = new CategoryRepository(new SQLiteDataService<Category>(CategoryQuery));
+
+export default function TasksForm() {
+
+    const { task: taskJson } = useLocalSearchParams();
+    const task: Task = taskJson ? JSON.parse(taskJson as string) : null;
+    const [categories, setCategories] = useState<Category[]>([]);
+    const router = useRouter();
+
+
+    const [newTask, setNewTask] = useState({
+        title: task?.title || '',
+        daysToRedo: task?.daysToRedo || NaN,
+        category: task?.category || -1,
+    });
+
+    useFocusEffect(React.useCallback(() => {
+        categoryRepository.findAll().then((categories) => {
+            categories.push(new Category("_create new_", "➕", 0));
+            setCategories(categories);
+            if (newTask.category === 0) {
+                setNewTask({ ...newTask, category: -1 });
+            }
+        }).catch((error) => {
+            console.error("Error fetching categories:", error);
+        });
+    }, []));
+
+    return (
+        <ThemedView style={styles.mainContainer} >
+            <Stack.Screen options={{ header: () => null }} />
+            <ThemedView style={styles.headerContainer}>
+                <ThemedText type="title" style={{
+                    color: '#fff',
+                }}> Taskeep! </ThemedText>
+                < Pressable onPress={() => {
+                    router.back();
+                }
+                }>
+                    <Ionicons name='close-circle-outline' size={32} color="#fff" />
+                </Pressable>
+            </ThemedView>
+            < ScrollView style={styles.scrollView} >
+                <ThemedText type="subtitle">Add a new task</ThemedText>
+                <ThemedView style={styles.stepContainer}>
+                    <TextInput
+                        placeholder="Task title *"
+                        style={styles.inputText}
+                        placeholderTextColor="#333"
+                        value={newTask.title}
+                        onChange={(e) => setNewTask({ ...newTask, title: e.nativeEvent.text })}
+                    />
+                    <TextInput
+                        placeholder="Days after which task is due *"
+                        style={styles.inputText}
+                        placeholderTextColor="#333"
+                        keyboardType='numeric'
+                        value={isNaN(newTask.daysToRedo ?? NaN) ? undefined : newTask.daysToRedo?.toString()}
+                        onChange={(e) => setNewTask({ ...newTask, daysToRedo: e.nativeEvent.text.length > 0 ? parseInt(e.nativeEvent.text) : NaN })}
+                    />
+                    <Dropdown
+                        placeholder="Select category *"
+                        options={
+                            categories.map(category => ({
+                                label: `${category.icon}  ${category.title}`,
+                                value: category.id
+                            }))
+                        }
+                        onValueChange={(value) => {
+                            if (value === 0) {
+                                router.push({ pathname: "./categoryForm" });
+                            }
+                            setNewTask({ ...newTask, category: (value ?? -1) as number }
+                            )
+                        }}
+                        selectedValue={newTask.category > -1 ? newTask.category : undefined}
+                        maxSelectableItems={1}
+                        checkboxControls={{
+                            checkboxLabelStyle: { fontSize: 20, paddingVertical: 10 },
+                            checkboxStyle: {
+                                backgroundColor: '#e744a9ff',
+                                borderColor: 'transparent',
+                            }
+                        }}
+                        dropdownIconStyle={{
+                            alignSelf: 'flex-start',
+                            margin: 0,
+                            padding: 0,
+                            marginTop: -30
+                        }}
+                    />
+                </ThemedView>
+                <Pressable style={styles.addButton} onPress={() => {
+                    if (newTask.title.length > 0 && newTask.daysToRedo > 0 && newTask.category > -1) {
+                        if (task && task.id) {
+                            // Update existing task
+                            taskRepository.update(task.id, {
+                                ...task,
+                                ...newTask
+                            }).then(() => {
+                                toast.success("Task updated successfully!");
+                                router.back();
+                            });
+                        } else {
+                            // Create new task
+                            taskRepository.create(new Task(newTask.title, newTask.daysToRedo, newTask.category)).then(() => {
+                                toast.success("Task added successfully!");
+                                router.back();
+                            });
+                        }
+                    } else {
+                        toast.error("Please fill in all fields correctly.");
+                    }
+                }}>
+                    <Ionicons name='checkmark-circle-outline' size={24} color="#fff" />
+                    <ThemedText style={styles.addButtonText}>{task?.id ? "Update" : "Add"} Task</ThemedText>
+                </Pressable>
+                < View style={{ height: 50 }} />
+            </ScrollView >
+        </ThemedView >
+    );
+}
+
+const styles = StyleSheet.create({
+    mainContainer: {
+        flex: 1,
+    },
+    headerContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        gap: 8,
+        paddingHorizontal: 24,
+        paddingTop: 50,
+        paddingBottom: 18,
+        backgroundColor: '#6a254fff',
+    },
+    scrollView: {
+        padding: 24,
+        flex: 1,
+    },
+    stepContainer: {
+        gap: 24,
+        marginBottom: 8,
+        marginTop: 16,
+    },
+    reactLogo: {
+        height: 178,
+        width: 290,
+        bottom: 0,
+        left: 0,
+        position: 'absolute',
+    },
+    inputText: {
+        backgroundColor: '#fff',
+        height: 50,
+        color: '#333333',
+        borderRadius: 8,
+        padding: 10,
+        lineHeight: 30,
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingHorizontal: 32,
+        borderWidth: 2,
+        borderColor: '#ccc',
+    },
+    textArea: {
+        backgroundColor: '#fff',
+        color: '#333333',
+        borderRadius: 8,
+        padding: 10,
+        paddingHorizontal: 32,
+        minHeight: 100,
+        textAlignVertical: 'top'
+    },
+    addButton: {
+        flexDirection: 'row',
+        gap: 8,
+        backgroundColor: '#b91f7eff',
+        color: '#fff',
+        borderRadius: 8,
+        padding: 20,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    addButtonText: {
+        color: '#fff',
+        fontSize: 16,
+        fontWeight: 'bold',
+    },
+});

app/widgets/hello.tsx

@@ -0,0 +1,116 @@
+import React from 'react';
+import { ColorProp, FlexWidget, IconWidget, ListWidget, SvgWidget, TextWidget, } from 'react-native-android-widget';
+import { getClockProgressSVG } from '../../components/clockProgress';
+import { Category } from '../../models/category';
+import { Task } from '../../models/task';
+import { GetTaskColor } from '../../utils/colors';
+
+export function HelloWidget({ tasks, categories }: { tasks: Task[], categories?: Category[] }) {
+
+    const demoTasks: Task[] = [
+        new Task('Task 1', 3, 1, new Date().getTime()),
+        new Task('Task 2', 5, 1, new Date().getTime()),
+        new Task('Task 2', 5, 1, new Date().getTime()),
+        new Task('Task 2', 5, 1, new Date().getTime()),
+        new Task('Task 2', 5, 1, new Date().getTime())
+    ];
+
+    return (
+        <FlexWidget
+            style={{
+                height: 'match_parent',
+                width: 'match_parent',
+                backgroundColor: '#121212',
+                borderRadius: 16,
+                padding: 24
+            }}
+        >
+            <FlexWidget style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                marginBottom: 16,
+                width: 'match_parent',
+            }}>
+                <TextWidget
+                    text="Hello, Tasks!"
+                    style={{
+                        color: '#ffffff',
+                        fontSize: 24,
+                        fontWeight: 'bold',
+                    }}
+                />
+                <IconWidget font="material" icon="refresh" size={32} style={{
+                    color: '#ffffff',
+                }} clickAction='REFRESH' />
+            </FlexWidget>
+            <ListWidget
+                style={{
+                    width: 'match_parent',
+                    height: 'match_parent',
+                }}
+            >
+                {(tasks ?? demoTasks).map((task, index) => (
+                    <FlexWidget
+                        key={Date.now() + "-" + Math.random() + "-" + index + "-" + task.id}
+                        style={{
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            justifyContent: 'space-between',
+                            width: 'match_parent',
+                            paddingVertical: 8
+                        }}>
+                        <FlexWidget
+                            style={{
+                                width: 'match_parent',
+                                borderLeftWidth: 20,
+                                borderLeftColor: GetTaskColor(task) as ColorProp,
+                                alignItems: 'center',
+                                flexDirection: 'row',
+                                justifyContent: 'space-between',
+                                paddingVertical: 16,
+                                paddingHorizontal: 16,
+                                borderRadius: 8,
+                                backgroundColor: '#333333',
+                            }}
+                        >
+                            <FlexWidget
+                                style={{
+                                    flexDirection: 'column'
+                                }}>
+                                <TextWidget
+                                    text={task.title}
+                                    style={{
+                                        color: '#ffffff',
+                                        fontSize: 20,
+                                        fontWeight: 'bold',
+                                    }}
+                                />
+                                <TextWidget
+                                    text={categories?.find(c => c.id === task.category)?.title || 'Uncategorized'}
+                                    style={{
+                                        color: '#ffffff',
+                                        fontSize: 16,
+                                    }}
+                                />
+                            </FlexWidget>
+                            <SvgWidget svg={getClockProgressSVG(
+                                ((task.daysToRedo! - (((Date.now() - task.lastDone!) / (24 * 3600 * 1000)))) / task.daysToRedo!) * 360, // Example calculation for degree
+                                100,
+                                100,
+                                GetTaskColor(task) as ColorProp
+                            )} clickAction='UPDATE_TASK' clickActionData={{
+                                id: task.id
+                            }} />
+                        </FlexWidget>
+                    </FlexWidget>
+                ))}
+                {(tasks && tasks.length === 0) &&
+                    <TextWidget text='No tasks created.' style={{
+                        color: '#ffffff'
+                    }}>
+                    </TextWidget>}
+            </ListWidget>
+        </FlexWidget>
+    );
+}

app/widgets/widget-task-handler.tsx

@@ -0,0 +1,126 @@
+import * as Notifications from 'expo-notifications';
+import React from 'react';
+import type { WidgetTaskHandlerProps } from 'react-native-android-widget';
+import { Category, CategoryQuery } from '../../models/category';
+import { Task, TaskQuery } from '../../models/task';
+import { CategoryRepository } from '../../repositories/CategoryRepository';
+import { TaskRepository } from '../../repositories/TaskRepository';
+import { SQLiteDataService } from '../../services/data/sqliteDataService';
+import { HelloWidget } from './hello';
+
+
+const taskRepository = new TaskRepository(new SQLiteDataService<Task>(TaskQuery));
+const categoryRepository = new CategoryRepository(new SQLiteDataService<Category>(CategoryQuery));
+
+let tasks: Task[] = [];
+let categories: Category[] = [];
+
+Notifications.setNotificationHandler({
+    handleNotification: async () => ({
+        shouldShowAlert: true,
+        shouldPlaySound: true,
+        shouldSetBadge: false,
+        shouldShowBanner: false,
+        shouldShowList: true,
+    }),
+});
+
+let notify_channels: Notifications.NotificationChannel[] = [];
+let notify_notification: Notifications.Notification | undefined = undefined;
+let notify_listener: Notifications.EventSubscription | null = null;
+let notify_responseListener: Notifications.EventSubscription | null = null;
+
+Notifications.getNotificationChannelsAsync().then((channels) => {
+    if (channels.length === 0) {
+        Notifications.setNotificationChannelAsync('default', {
+            name: 'Default Channel',
+            importance: Notifications.AndroidImportance.HIGH,
+            sound: 'default',
+            vibrationPattern: [0, 250, 250, 250],
+        }).then((channel) => {
+            if (channel) notify_channels = [channel];
+        });
+    }
+    notify_channels = channels;
+});
+
+notify_listener = Notifications.addNotificationReceivedListener(notification => {
+    notify_notification = notification;
+});
+
+notify_responseListener = Notifications.addNotificationResponseReceivedListener(response => { });
+
+const CheckTaskAndNotify = async (): Promise<{ tasks: Task[], categories: Category[] }> => {
+    tasks = await taskRepository.findAll();
+    categories = await categoryRepository.findAll();
+
+    const expiredTasks = tasks.filter(task => {
+        const expirationDate = task.lastDone! + (task.daysToRedo! * 24 * 60 * 60 * 1000); // Convert days to milliseconds
+        return expirationDate < Date.now();
+    });
+
+    if (expiredTasks.length > 0) {
+        for (const task of expiredTasks) {
+            const category = categories.find(cat => cat.id === task.category);
+            await Notifications.scheduleNotificationAsync({
+                identifier: `task-due-${task.id}`,
+                content: {
+                    title: 'Task Reminder',
+                    body: `${category?.icon} "${task.title}" is due! ⌛`,
+                    data: { taskId: task.id },
+                },
+                trigger: null
+            });
+        }
+    }
+
+    return { tasks, categories };
+}
+
+setInterval(async () => {
+    CheckTaskAndNotify();
+}, 1000 * 60 * 30); // Check every 30 minutes
+
+
+export async function widgetTaskHandler(props: WidgetTaskHandlerProps) {
+
+    async function updateAndRenderWidget() {
+        const { tasks, categories } = await CheckTaskAndNotify();
+
+        props.renderWidget(<HelloWidget tasks={tasks} categories={categories} />);
+    }
+
+    switch (props.widgetAction) {
+        case 'WIDGET_ADDED':
+        case 'WIDGET_UPDATE':
+        case 'WIDGET_RESIZED':
+            // Not needed for now
+            updateAndRenderWidget();
+            break;
+
+        case 'WIDGET_DELETED':
+            // Not needed for now
+            break;
+
+        case 'WIDGET_CLICK':
+            switch (props.clickAction) {
+                case 'REFRESH':
+                    await updateAndRenderWidget();
+                    break;
+                case 'UPDATE_TASK':
+                    if (props.clickActionData && props.clickActionData.id) {
+                        const taskId = props.clickActionData.id;
+                        const task = await taskRepository.findById(parseInt(taskId.toString()));
+                        if (task) {
+                            task.lastDone = Math.floor(Date.now() / 1000 / 60 / 60 / 24); // Set last done to today
+                            await taskRepository.update(parseInt(taskId.toString()), { ...task, lastDone: new Date().getTime() });
+                            await updateAndRenderWidget();
+                        }
+                    }
+                    break;
+
+                default:
+                    break;
+            }
+    }
+}

components/Collapsible.tsx

@@ -1,45 +0,0 @@
-import { PropsWithChildren, useState } from 'react';
-import { StyleSheet, TouchableOpacity } from 'react-native';
-
-import { ThemedText } from '@/components/ThemedText';
-import { ThemedView } from '@/components/ThemedView';
-import { IconSymbol } from '@/components/ui/IconSymbol';
-import { Colors } from '@/constants/Colors';
-import { useColorScheme } from '@/hooks/useColorScheme';
-
-export function Collapsible({ children, title }: PropsWithChildren & { title: string }) {
-  const [isOpen, setIsOpen] = useState(false);
-  const theme = useColorScheme() ?? 'light';
-
-  return (
-    <ThemedView>
-      <TouchableOpacity
-        style={styles.heading}
-        onPress={() => setIsOpen((value) => !value)}
-        activeOpacity={0.8}>
-        <IconSymbol
-          name="chevron.right"
-          size={18}
-          weight="medium"
-          color={theme === 'light' ? Colors.light.icon : Colors.dark.icon}
-          style={{ transform: [{ rotate: isOpen ? '90deg' : '0deg' }] }}
-        />
-
-        <ThemedText type="defaultSemiBold">{title}</ThemedText>
-      </TouchableOpacity>
-      {isOpen && <ThemedView style={styles.content}>{children}</ThemedView>}
-    </ThemedView>
-  );
-}
-
-const styles = StyleSheet.create({
-  heading: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 6,
-  },
-  content: {
-    marginTop: 6,
-    marginLeft: 24,
-  },
-});

components/ExternalLink.tsx

@@ -1,24 +0,0 @@
-import { Href, Link } from 'expo-router';
-import { openBrowserAsync } from 'expo-web-browser';
-import { type ComponentProps } from 'react';
-import { Platform } from 'react-native';
-
-type Props = Omit<ComponentProps<typeof Link>, 'href'> & { href: Href & string };
-
-export function ExternalLink({ href, ...rest }: Props) {
-  return (
-    <Link
-      target="_blank"
-      {...rest}
-      href={href}
-      onPress={async (event) => {
-        if (Platform.OS !== 'web') {
-          // Prevent the default behavior of linking to the default browser on native.
-          event.preventDefault();
-          // Open the link in an in-app browser.
-          await openBrowserAsync(href);
-        }
-      }}
-    />
-  );
-}

components/HelloWave.tsx

@@ -1,40 +0,0 @@
-import { useEffect } from 'react';
-import { StyleSheet } from 'react-native';
-import Animated, {
-  useAnimatedStyle,
-  useSharedValue,
-  withRepeat,
-  withSequence,
-  withTiming,
-} from 'react-native-reanimated';
-
-import { ThemedText } from '@/components/ThemedText';
-
-export function HelloWave() {
-  const rotationAnimation = useSharedValue(0);
-
-  useEffect(() => {
-    rotationAnimation.value = withRepeat(
-      withSequence(withTiming(25, { duration: 150 }), withTiming(0, { duration: 150 })),
-      4 // Run the animation 4 times
-    );
-  }, [rotationAnimation]);
-
-  const animatedStyle = useAnimatedStyle(() => ({
-    transform: [{ rotate: `${rotationAnimation.value}deg` }],
-  }));
-
-  return (
-    <Animated.View style={animatedStyle}>
-      <ThemedText style={styles.text}>👋</ThemedText>
-    </Animated.View>
-  );
-}
-
-const styles = StyleSheet.create({
-  text: {
-    fontSize: 28,
-    lineHeight: 32,
-    marginTop: -6,
-  },
-});

components/ParallaxScrollView.tsx

@@ -1,82 +0,0 @@
-import type { PropsWithChildren, ReactElement } from 'react';
-import { StyleSheet } from 'react-native';
-import Animated, {
-  interpolate,
-  useAnimatedRef,
-  useAnimatedStyle,
-  useScrollViewOffset,
-} from 'react-native-reanimated';
-
-import { ThemedView } from '@/components/ThemedView';
-import { useBottomTabOverflow } from '@/components/ui/TabBarBackground';
-import { useColorScheme } from '@/hooks/useColorScheme';
-
-const HEADER_HEIGHT = 250;
-
-type Props = PropsWithChildren<{
-  headerImage: ReactElement;
-  headerBackgroundColor: { dark: string; light: string };
-}>;
-
-export default function ParallaxScrollView({
-  children,
-  headerImage,
-  headerBackgroundColor,
-}: Props) {
-  const colorScheme = useColorScheme() ?? 'light';
-  const scrollRef = useAnimatedRef<Animated.ScrollView>();
-  const scrollOffset = useScrollViewOffset(scrollRef);
-  const bottom = useBottomTabOverflow();
-  const headerAnimatedStyle = useAnimatedStyle(() => {
-    return {
-      transform: [
-        {
-          translateY: interpolate(
-            scrollOffset.value,
-            [-HEADER_HEIGHT, 0, HEADER_HEIGHT],
-            [-HEADER_HEIGHT / 2, 0, HEADER_HEIGHT * 0.75]
-          ),
-        },
-        {
-          scale: interpolate(scrollOffset.value, [-HEADER_HEIGHT, 0, HEADER_HEIGHT], [2, 1, 1]),
-        },
-      ],
-    };
-  });
-
-  return (
-    <ThemedView style={styles.container}>
-      <Animated.ScrollView
-        ref={scrollRef}
-        scrollEventThrottle={16}
-        scrollIndicatorInsets={{ bottom }}
-        contentContainerStyle={{ paddingBottom: bottom }}>
-        <Animated.View
-          style={[
-            styles.header,
-            { backgroundColor: headerBackgroundColor[colorScheme] },
-            headerAnimatedStyle,
-          ]}>
-          {headerImage}
-        </Animated.View>
-        <ThemedView style={styles.content}>{children}</ThemedView>
-      </Animated.ScrollView>
-    </ThemedView>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  header: {
-    height: HEADER_HEIGHT,
-    overflow: 'hidden',
-  },
-  content: {
-    flex: 1,
-    padding: 32,
-    gap: 16,
-    overflow: 'hidden',
-  },
-});

components/ThemedText.tsx

@@ -1,6 +1,6 @@
 import { StyleSheet, Text, type TextProps } from 'react-native';
 
-import { useThemeColor } from '@/hooks/useThemeColor';
+import { useThemeColor } from '../hooks/useThemeColor';
 
 export type ThemedTextProps = TextProps & {
   lightColor?: string;

components/ThemedView.tsx

@@ -1,6 +1,6 @@
 import { View, type ViewProps } from 'react-native';
 
-import { useThemeColor } from '@/hooks/useThemeColor';
+import { useThemeColor } from '../hooks/useThemeColor';
 
 export type ThemedViewProps = ViewProps & {
   lightColor?: string;

components/categoryItem.tsx

@@ -0,0 +1,129 @@
+import { Alert, ColorSchemeName, Pressable, StyleSheet, useColorScheme, type ViewProps } from 'react-native';
+
+import { Text } from '@react-navigation/elements';
+import { useRouter } from 'expo-router';
+import { useThemeColor } from '../hooks/useThemeColor';
+import { Category, CategoryQuery } from '../models/category';
+import { Task, TaskQuery } from '../models/task';
+import { CategoryRepository } from '../repositories/CategoryRepository';
+import { TaskRepository } from '../repositories/TaskRepository';
+import { SQLiteDataService } from '../services/data/sqliteDataService';
+import { GetTaskColor } from '../utils/colors';
+import { ThemedText } from './ThemedText';
+import { ThemedView } from './ThemedView';
+
+export type CategoryItemProps = ViewProps & {
+    lightColor?: string;
+    darkColor?: string;
+    category: Category;
+    onUpdate: () => void;
+    categories: Category[];
+};
+
+const categoryRepository = new CategoryRepository(new SQLiteDataService<Category>(CategoryQuery));
+const taskRepository = new TaskRepository(new SQLiteDataService<Task>(TaskQuery));
+
+export function CategoryItem({ category, categories, onUpdate, lightColor, darkColor, ...otherProps }: CategoryItemProps) {
+    const backgroundColor = useThemeColor({ light: lightColor, dark: darkColor }, 'background');
+    const router = useRouter();
+    const colorScheme = useColorScheme();
+
+    const LongPressHandler = () => {
+        //select edit or remove
+        console.log("Long pressed task:", category);
+        Alert.alert(
+            "Select action",
+            "Choose an action for the task",
+            [
+                {
+                    text: "Edit",
+                    onPress: () => {
+                        // Navigate to edit task form
+                        console.log("Editing category:", category);
+                        if (!category?.id) return;
+                        router.push({ pathname: "../categoryForm", params: { category: JSON.stringify(category) } });
+                    }
+                },
+                {
+                    text: "Remove",
+                    onPress: () => {
+                        // Remove the task
+                        taskRepository.findAll().then((tasks) => {
+                            const tasksInCategory = tasks.filter(task => task.category === category.id);
+                            if (tasksInCategory.length > 0) {
+                                Alert.alert(
+                                    "Cannot delete category",
+                                    "This category has tasks assigned to it. Please remove or reassign tasks before deleting the category.",
+                                    [{ text: "OK" }]
+                                );
+                            } else {
+                                categoryRepository.delete(category.id!).then(() => {
+                                    onUpdate?.();
+                                }).catch((error) => {
+                                    console.error("Error removing category:", error);
+                                });
+                            }
+                        }).catch((error) => {
+                            console.error("Error fetching tasks:", error);
+                        });
+                    },
+                    style: "destructive"
+                },
+                { text: "Cancel", style: "cancel" }
+            ]);
+    }
+
+    return <Pressable onLongPress={() => {
+        LongPressHandler();
+    }}>
+        <ThemedView style={[{ backgroundColor }, styles(colorScheme).taskItemMain, {
+            borderLeftColor: GetTaskColor(category!)
+        }]} {...otherProps}>
+            <ThemedView style={[{ backgroundColor }, styles(colorScheme).taskItemSubcontainer]}>
+                <ThemedText style={styles(colorScheme).taskItemTitle}>
+                    {category.icon}
+                </ThemedText>
+                <Text style={styles(colorScheme).taskItemTitle}>
+                    {category?.title}
+                </Text>
+            </ThemedView>
+        </ThemedView >
+    </Pressable >;
+}
+
+
+const styles = (theme: ColorSchemeName) => {
+    return StyleSheet.create({
+        taskItemMain: {
+            borderLeftWidth: 0,
+            borderColor: 'color-mix(in oklab, #a71e14 100%, white)',
+            flexDirection: 'row',
+            padding: 16,
+            borderRadius: 8,
+            marginBottom: 8,
+            backgroundColor: theme === 'dark' ? '#555' : '#f0f0f0',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+        },
+        taskItemSubcontainer: {
+            flexDirection: 'row',
+            backgroundColor: 'transparent',
+            gap: 12,
+        },
+        taskItemText: {
+            color: theme === 'dark' ? '#fff' : '#000',
+            fontSize: 16,
+            marginBottom: 4,
+        },
+        taskItemTitle: {
+            fontWeight: 'bold',
+            fontSize: 20,
+            marginBottom: 4,
+            color: theme === 'dark' ? '#fff' : '#000',
+        },
+        checkButton: {
+            width: 40,
+            height: 40,
+        }
+    })
+}

components/clockProgress.tsx

@@ -0,0 +1,60 @@
+// ClockProgress.tsx
+import React from 'react';
+import Svg, { Circle, Path } from 'react-native-svg';
+
+interface ClockProgressProps {
+    degree: number; // Valor entre 0 y 360
+    width: number; // Ancho del SVG
+    height: number; // Alto del SVG
+    color: string;
+}
+
+function polarToCartesian(cx: number, cy: number, r: number, angleDeg: number) {
+    const angleRad = (angleDeg - 90) * Math.PI / 180;
+    return {
+        x: cx + r * Math.cos(angleRad),
+        y: cy + r * Math.sin(angleRad)
+    };
+}
+
+function describeSector(cx: number, cy: number, r: number, startAngle: number, endAngle: number) {
+    const start = polarToCartesian(cx, cy, r, endAngle);
+    const end = polarToCartesian(cx, cy, r, startAngle);
+    const largeArc = endAngle - startAngle <= 180 ? 0 : 1;
+
+    return [
+        `M ${cx},${cy}`,
+        `L ${start.x},${start.y}`,
+        `A ${r},${r} 0 ${largeArc} 0 ${end.x},${end.y}`,
+        'Z'
+    ].join(' ');
+}
+
+const ClockProgress: React.FC<ClockProgressProps> = ({ degree, width, height, color }) => {
+    const path = describeSector(100, 100, 70, 0, degree == 360 ? 359.9 : degree);
+
+    return (
+        <Svg width={width} height={height} viewBox="0 0 200 200">
+            <Circle cx="100" cy="100" r="70" fill="none" />
+            <Circle cx="100" cy="100" r="90" fill="none" stroke={color} strokeWidth="10" />
+            <Path d={path} fill={color} />
+        </Svg>
+    );
+};
+
+export default ClockProgress;
+
+// Create a exported function that returns the SVG as a string
+export function getClockProgressSVG(degree: number, width: number, height: number, color: string): string {
+
+    const path = describeSector(100, 100, 70, 0, degree == 360 ? 359.9 : degree);
+
+    const svg = (
+        `<svg width="${width}" height="${height}" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+            <circle cx="100" cy="100" r="70" fill="none"/>
+            <circle cx="100" cy="100" r="90" fill="none" stroke="${color}" stroke-width="10"/>
+            <path d="${path}" fill="${color}"/>
+        </svg>`
+    );
+    return svg;
+}

components/taskItem.tsx

@@ -0,0 +1,134 @@
+import { Alert, ColorSchemeName, Pressable, StyleSheet, useColorScheme, type ViewProps } from 'react-native';
+
+import { toast } from '@backpackapp-io/react-native-toast';
+import { Text } from '@react-navigation/elements';
+import { useRouter } from 'expo-router';
+import { useRef } from 'react';
+import { useThemeColor } from '../hooks/useThemeColor';
+import { Category } from '../models/category';
+import { Task, TaskQuery } from '../models/task';
+import { TaskRepository } from '../repositories/TaskRepository';
+import { SQLiteDataService } from '../services/data/sqliteDataService';
+import { GetTaskColor } from '../utils/colors';
+import { ThemedView } from './ThemedView';
+import ClockProgress from './clockProgress';
+
+export type TaskItemProps = ViewProps & {
+    lightColor?: string;
+    darkColor?: string;
+    task: Task;
+    onUpdate: () => void;
+    categories: Category[];
+};
+
+const taskRepository = new TaskRepository(new SQLiteDataService<Task>(TaskQuery));
+
+export function TaskItem({ task, categories, onUpdate, lightColor, darkColor, ...otherProps }: TaskItemProps) {
+    const backgroundColor = useThemeColor({ light: lightColor, dark: darkColor }, 'background');
+    const router = useRouter();
+    const daysLeft = useRef(task.daysToRedo! * 24 * 3600 * 1000 - (Date.now() - task.lastDone!));
+    const colorScheme = useColorScheme();
+    const category = categories?.find((c) => {
+        return c.id === task?.category;
+    });
+
+    const LongPressHandler = () => {
+        //select edit or remove
+        console.log("Long pressed task:", task);
+        Alert.alert(
+            "Select action",
+            "Choose an action for the task",
+            [
+                {
+                    text: "Edit",
+                    onPress: () => {
+                        // Navigate to edit task form
+                        console.log("Editing task:", task);
+                        if (!task?.id) return;
+                        router.push({ pathname: "./taskForm", params: { task: JSON.stringify(task) } });
+                    }
+                },
+                {
+                    text: "Remove",
+                    onPress: () => {
+                        // Remove the task
+                        console.log("Removing task:", task);
+                        if (!task?.id) return;
+                        taskRepository.delete(task.id).then(() => {
+                            toast.success("Task removed successfully");
+                            onUpdate?.();
+                        }).catch((error) => {
+                            toast.success("Error removing task");
+                            console.error("Error removing task:", error);
+                        });
+                    },
+                    style: "destructive"
+                },
+                { text: "Cancel", style: "cancel" }
+            ]);
+    }
+
+    return <Pressable onLongPress={() => {
+        LongPressHandler();
+    }}>
+        <ThemedView style={[{ backgroundColor }, styles(colorScheme).taskItemMain, {
+            borderLeftColor: GetTaskColor(task!)
+        }]} {...otherProps}>
+            <ThemedView style={[{ backgroundColor }, styles(colorScheme).taskItemSubcontainer]}>
+                <Text style={styles(colorScheme).taskItemTitle}>
+                    {task?.title}
+                </Text>
+                <Text style={styles(colorScheme).taskItemText}>
+                    {category?.icon + " " + category?.title + " - " + Math.ceil(daysLeft.current / (3600 * 1000))} hours left
+                </Text>
+            </ThemedView>
+            <Pressable style={styles(colorScheme).checkButton} onPress={() => {
+
+                taskRepository.update(task!.id!, { ...task, lastDone: Date.now() }).then(() => {
+                    toast.success("Task updated successfully");
+                    onUpdate?.();
+                }).catch((error) => {
+                    toast.error("Error updating task");
+                    console.error("Error updating task:", error);
+                });
+            }}>
+                <ClockProgress degree={((daysLeft.current / (24 * 3600 * 1000)) / task.daysToRedo!) * 360} width={40} height={40} color={GetTaskColor(task!)} />
+            </Pressable>
+        </ThemedView></Pressable>;
+}
+
+
+const styles = (theme: ColorSchemeName) => {
+    return StyleSheet.create({
+        taskItemMain: {
+            borderLeftWidth: 20,
+            borderColor: 'color-mix(in oklab, #a71e14 100%, white)',
+            flexDirection: 'row',
+            padding: 16,
+            borderRadius: 8,
+            marginBottom: 8,
+            backgroundColor: theme === 'dark' ? '#555' : '#f0f0f0',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+        },
+        taskItemSubcontainer: {
+            flexDirection: 'column',
+            backgroundColor: 'transparent'
+        },
+        taskItemText: {
+            color: theme === 'dark' ? '#fff' : '#000',
+            fontSize: 15,
+            marginBottom: 4,
+        },
+        taskItemTitle: {
+            fontWeight: 'bold',
+            fontSize: 20,
+            marginBottom: 4,
+            color: theme === 'dark' ? '#fff' : '#000',
+        },
+        checkButton: {
+            width: 40,
+            height: 40,
+        }
+    })
+}

hooks/useThemeColor.ts

@@ -3,8 +3,8 @@
  * https://docs.expo.dev/guides/color-schemes/
  */
 
-import { Colors } from '@/constants/Colors';
+import { Colors } from '../constants/Colors';
-import { useColorScheme } from '@/hooks/useColorScheme';
+import { useColorScheme } from '../hooks/useColorScheme';
 
 export function useThemeColor(
   props: { light?: string; dark?: string },

index.tsx

@@ -0,0 +1,7 @@
+import { registerWidgetTaskHandler } from 'react-native-android-widget';
+import { widgetTaskHandler } from './app/widgets/widget-task-handler';
+
+registerWidgetTaskHandler(widgetTaskHandler);
+
+import 'expo-router/entry';
+

metro.config.js

@@ -0,0 +1,19 @@
+// Learn more https://docs.expo.io/guides/customizing-metro
+const { getDefaultConfig } = require('expo/metro-config');
+
+/** @type {import('expo/metro-config').MetroConfig} */
+const config = getDefaultConfig(__dirname);
+
+// Add wasm asset support
+config.resolver.assetExts.push('wasm');
+
+// Add COEP and COOP headers to support SharedArrayBuffer
+config.server.enhanceMiddleware = (middleware) => {
+    return (req, res, next) => {
+        res.setHeader('Cross-Origin-Embedder-Policy', 'credentialless');
+        res.setHeader('Cross-Origin-Opener-Policy', 'same-origin');
+        middleware(req, res, next);
+    };
+};
+
+module.exports = config;

models/IEntity.ts

@@ -0,0 +1,5 @@
+// Example entity type
+export interface IEntity {
+    id?: number;
+    [key: string]: any;
+}

models/IQuery.ts

@@ -0,0 +1,4 @@
+export interface IQuery {
+    tableName: string;
+    tableQuery: string;
+}

models/category.ts

@@ -0,0 +1,24 @@
+import { IEntity } from "./IEntity";
+import { IQuery } from "./IQuery";
+
+export class Category implements IEntity {
+    title: string;
+    icon?: string;
+    id?: number;
+
+    constructor(title: string, icon?: string, id?: number) {
+        this.title = title;
+        this.icon = icon;
+        this.id = id;
+    }
+
+}
+
+export const CategoryQuery: IQuery = {
+    tableName: "categories",
+    tableQuery: `CREATE TABLE IF NOT EXISTS categories (
+        id INTEGER PRIMARY KEY AUTOINCREMENT,
+        title TEXT NOT NULL,
+        icon TEXT
+    );`
+};

models/task.ts

@@ -0,0 +1,30 @@
+import { IEntity } from "./IEntity";
+import { IQuery } from "./IQuery";
+
+export class Task implements IEntity {
+    title: string;
+    daysToRedo?: number;
+    lastDone?: number;
+    id?: number;
+    category?: number;
+
+    constructor(title: string, daysToRedo?: number, category?: number, lastDone?: number, id?: number) {
+        this.id = id;
+        this.title = title;
+        this.daysToRedo = daysToRedo;
+        this.category = category;
+        this.lastDone = lastDone ?? Date.now()
+    }
+}
+
+export const TaskQuery: IQuery = {
+    tableName: "tasks",
+    tableQuery: `CREATE TABLE IF NOT EXISTS tasks (
+        id  INTEGER PRIMARY KEY AUTOINCREMENT,
+        title TEXT NOT NULL,
+        daysToRedo INTEGER NOT NULL,
+        lastDone number NOT NULL,
+        category INTEGER NOT NULL,
+        FOREIGN KEY (category) REFERENCES categories(id)
+    );`
+};

models/taskUpdate.ts

@@ -0,0 +1,24 @@
+import { IEntity } from "./IEntity";
+import { IQuery } from "./IQuery";
+
+export class TaskUpdate implements IEntity {
+    id?: number;
+    taskId: string;
+    updateDate: Date;
+
+    constructor(taskId: string, updateDate: Date, id?: number) {
+        this.id = id;
+        this.taskId = taskId;
+        this.updateDate = new Date(updateDate);
+    }
+}
+
+export const TaskUpdateQuery: IQuery = {
+    tableName: "taskUpdates",
+    tableQuery: `CREATE TABLE IF NOT EXISTS taskUpdates (
+        id INTEGER PRIMARY KEY AUTOINCREMENT,
+        taskId TEXT NOT NULL,
+        updateDate TEXT NOT NULL,
+        FOREIGN KEY (taskId) REFERENCES tasks(id)
+    );`
+};

package.json

@@ -1,29 +1,35 @@
 {
-  "name": "habitask",
+  "name": "taskeep",
-  "main": "expo-router/entry",
+  "main": "index.tsx",
   "version": "1.0.0",
   "scripts": {
     "start": "expo start",
     "reset-project": "node ./scripts/reset-project.js",
-    "android": "expo start --android",
+    "android": "expo run:android",
-    "ios": "expo start --ios",
+    "ios": "expo run:ios",
     "web": "expo start --web",
     "lint": "expo lint"
   },
   "dependencies": {
+    "@backpackapp-io/react-native-toast": "^0.14.0",
     "@expo/vector-icons": "^14.1.0",
+    "@morrowdigital/watermelondb-expo-plugin": "^2.3.3",
+    "@nozbe/watermelondb": "^0.28.0",
     "@react-navigation/bottom-tabs": "^7.3.10",
     "@react-navigation/elements": "^2.3.8",
     "@react-navigation/native": "^7.1.6",
     "expo": "~53.0.17",
     "expo-blur": "~14.1.5",
+    "expo-build-properties": "~0.14.8",
     "expo-constants": "~17.1.7",
     "expo-font": "~13.3.2",
     "expo-haptics": "~14.1.4",
     "expo-image": "~2.3.2",
     "expo-linking": "~7.1.7",
+    "expo-navigation-bar": "~4.2.7",
     "expo-router": "~5.1.3",
     "expo-splash-screen": "~0.30.10",
+    "expo-sqlite": "~15.2.14",
     "expo-status-bar": "~2.2.3",
     "expo-symbols": "~0.4.5",
     "expo-system-ui": "~5.0.10",
@@ -31,19 +37,28 @@
     "react": "19.0.0",
     "react-dom": "19.0.0",
     "react-native": "0.79.5",
+    "react-native-android-widget": "^0.17.0",
+    "react-native-emoji-popup": "^0.3.2",
     "react-native-gesture-handler": "~2.24.0",
+    "react-native-input-select": "^2.1.7",
     "react-native-reanimated": "~3.17.4",
     "react-native-safe-area-context": "5.4.0",
     "react-native-screens": "~4.11.1",
+    "react-native-svg": "^15.12.0",
+    "react-native-vector-icons": "^10.2.0",
     "react-native-web": "~0.20.0",
-    "react-native-webview": "13.13.5"
+    "react-native-webview": "13.13.5",
+    "sqlite": "^5.1.1",
+    "expo-notifications": "~0.31.4"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",
+    "@react-native-community/cli": "^19.1.0",
     "@types/react": "~19.0.10",
-    "typescript": "~5.8.3",
+    "@types/react-native-vector-icons": "^6.4.18",
     "eslint": "^9.25.0",
-    "eslint-config-expo": "~9.2.0"
+    "eslint-config-expo": "~9.2.0",
+    "typescript": "~5.8.3"
   },
   "private": true
 }