Compare commits
1 Commits
| Author | SHA1 | Date |
|---|---|---|
Justn Ursan
|
acd29e1a11 |
|
|
@ -7,7 +7,7 @@ SUPABASE_ANON_KEY=your-anon-key-here
|
|||
# Gitea (NICHT IN GIT COMMITEN!)
|
||||
GITEA_URL=http://192.168.1.142:3000
|
||||
GITEA_TOKEN=ec01d92db7f02dec1089cbb00076d9cbd533fd3f
|
||||
GITEA_USER=Firstly
|
||||
GITEA_ORG=Fristy-app
|
||||
|
||||
# App Configuration
|
||||
NODE_ENV=development
|
||||
|
|
|
|||
46
App.tsx
46
App.tsx
|
|
@ -1,44 +1,12 @@
|
|||
import React, { useEffect } from 'react';
|
||||
import { SafeAreaProvider } from 'react-native-safe-area-context';
|
||||
import { RootNavigation } from './src/navigation';
|
||||
import { authService } from './src/modules/auth/services/authService';
|
||||
import { useAuthStore } from './src/store';
|
||||
|
||||
function App(): React.JSX.Element {
|
||||
const { setLoading } = useAuthStore();
|
||||
|
||||
useEffect(() => {
|
||||
// Session wiederherstellen beim App-Start
|
||||
const initAuth = async () => {
|
||||
setLoading(true);
|
||||
await authService.restoreSession();
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
initAuth();
|
||||
|
||||
// Auth State Listener
|
||||
const { data: subscription } = authService.onAuthStateChange((session) => {
|
||||
if (session) {
|
||||
// Session aktiv
|
||||
console.log('User authenticated');
|
||||
} else {
|
||||
// Keine Session
|
||||
console.log('User logged out');
|
||||
}
|
||||
});
|
||||
|
||||
// Cleanup
|
||||
return () => {
|
||||
subscription?.subscription?.unsubscribe();
|
||||
};
|
||||
}, [setLoading]);
|
||||
import React from 'react';
|
||||
import { RootNavigation } from './src/navigation/RootNavigation';
|
||||
import { StatusBar } from 'expo-status-bar';
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<SafeAreaProvider>
|
||||
<>
|
||||
<RootNavigation />
|
||||
</SafeAreaProvider>
|
||||
<StatusBar style="auto" />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
|
|
|||
|
|
@ -36,5 +36,5 @@ und dieses Projekt folgt [Semantic Versioning](https://semver.org/lang/de/).
|
|||
- Supabase 2.38.4
|
||||
- React Navigation 6.x
|
||||
|
||||
[Unreleased]: http://192.168.1.142:3000/Firstly/fristy/compare/v0.0.1...HEAD
|
||||
[0.0.1]: http://192.168.1.142:3000/Firstly/fristy/releases/tag/v0.0.1
|
||||
[Unreleased]: http://192.168.1.142:3000/Fristy-app/fristy/compare/v0.0.1...HEAD
|
||||
[0.0.1]: http://192.168.1.142:3000/Fristy-app/fristy/releases/tag/v0.0.1
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
## Server Details
|
||||
- **URL**: http://192.168.1.142:3000
|
||||
- **Organization/User**: Firstly
|
||||
- **Organization**: Fristy-app
|
||||
- **Token**: Gespeichert in `.env` (nicht in Git!)
|
||||
|
||||
## Repository Setup
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
|
||||
```bash
|
||||
# 1. Remote hinzufügen
|
||||
git remote add origin http://192.168.1.142:3000/Firstly/fristy.git
|
||||
git remote add origin http://192.168.1.142:3000/Fristy-app/fristy.git
|
||||
|
||||
# 2. Initial Commit (falls noch nicht gemacht)
|
||||
git add .
|
||||
|
|
@ -30,7 +30,7 @@ git push -u origin develop
|
|||
**Option 1: HTTPS mit Token**
|
||||
```bash
|
||||
# Token als Passwort verwenden
|
||||
git remote set-url origin http://<username>:<token>@192.168.1.142:3000/Firstly/fristy.git
|
||||
git remote set-url origin http://<username>:<token>@192.168.1.142:3000/Fristy-app/fristy.git
|
||||
```
|
||||
|
||||
**Option 2: Git Credential Helper**
|
||||
|
|
@ -49,7 +49,7 @@ ssh-keygen -t ed25519 -C "your-email@example.com"
|
|||
# Unter: http://192.168.1.142:3000/user/settings/keys
|
||||
|
||||
# Remote auf SSH umstellen
|
||||
git remote set-url origin git@192.168.1.142:Firstly/fristy.git
|
||||
git remote set-url origin git@192.168.1.142:Fristy-app/fristy.git
|
||||
```
|
||||
|
||||
## Gitea-spezifische Features
|
||||
|
|
@ -146,7 +146,9 @@ brew install tea # macOS
|
|||
tea login add
|
||||
|
||||
# Repository clonen
|
||||
tea clone Firstly/fristy
|
||||
```bash
|
||||
# Repository clonen
|
||||
tea clone Fristy-app/fristy
|
||||
|
||||
# Issues erstellen
|
||||
tea issues create
|
||||
|
|
@ -185,7 +187,7 @@ git config --global http.sslVerify false
|
|||
|
||||
```bash
|
||||
# Token in URL
|
||||
git clone http://token@192.168.1.142:3000/Firstly/fristy.git
|
||||
git clone http://token@192.168.1.142:3000/Fristy-app/fristy.git
|
||||
|
||||
# Oder in .netrc speichern
|
||||
# ~/.netrc
|
||||
|
|
@ -220,11 +222,11 @@ git push origin main
|
|||
|
||||
## Repository-Links
|
||||
|
||||
- **Repository**: http://192.168.1.142:3000/Firstly/fristy
|
||||
- **Issues**: http://192.168.1.142:3000/Firstly/fristy/issues
|
||||
- **Pull Requests**: http://192.168.1.142:3000/Firstly/fristy/pulls
|
||||
- **Releases**: http://192.168.1.142:3000/Firstly/fristy/releases
|
||||
- **Settings**: http://192.168.1.142:3000/Firstly/fristy/settings
|
||||
- **Repository**: http://192.168.1.142:3000/Fristy-app/fristy
|
||||
- **Issues**: http://192.168.1.142:3000/Fristy-app/fristy/issues
|
||||
- **Pull Requests**: http://192.168.1.142:3000/Fristy-app/fristy/pulls
|
||||
- **Releases**: http://192.168.1.142:3000/Fristy-app/fristy/releases
|
||||
- **Settings**: http://192.168.1.142:3000/Fristy-app/fristy/settings
|
||||
|
||||
## Quick Commands
|
||||
|
||||
|
|
@ -233,7 +235,7 @@ git push origin main
|
|||
git init
|
||||
git add .
|
||||
git commit -m "chore: initial project setup"
|
||||
git remote add origin http://192.168.1.142:3000/Firstly/fristy.git
|
||||
git remote add origin http://192.168.1.142:3000/Fristy-app/fristy.git
|
||||
git push -u origin main
|
||||
|
||||
# Develop Branch
|
||||
|
|
|
|||
|
|
@ -0,0 +1,174 @@
|
|||
# React Native Test Guide
|
||||
|
||||
## 📱 Erste Schritte zum App-Testen
|
||||
|
||||
### Option 1: Expo (Schnellste Methode - EMPFOHLEN für erste Tests)
|
||||
|
||||
Expo ist einfacher und schneller für erste Tests ohne native Builds.
|
||||
|
||||
```bash
|
||||
# 1. Expo installieren
|
||||
npm install --global expo-cli
|
||||
|
||||
# 2. Expo projekt initialisieren (in separatem Ordner)
|
||||
npx create-expo-app fristy-test
|
||||
cd fristy-test
|
||||
|
||||
# 3. Unsere Source-Files kopieren
|
||||
# (Nur src/ Ordner kopieren)
|
||||
|
||||
# 4. Expo starten
|
||||
npx expo start
|
||||
|
||||
# 5. Expo Go App auf Handy installieren
|
||||
# iOS: App Store
|
||||
# Android: Play Store
|
||||
|
||||
# 6. QR-Code scannen und App testen
|
||||
```
|
||||
|
||||
### Option 2: React Native CLI (Für Production)
|
||||
|
||||
Für vollständige iOS/Android Builds.
|
||||
|
||||
#### Voraussetzungen:
|
||||
|
||||
**macOS (für iOS):**
|
||||
```bash
|
||||
# Xcode installieren (App Store)
|
||||
# Command Line Tools
|
||||
xcode-select --install
|
||||
|
||||
# Homebrew
|
||||
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
|
||||
|
||||
# Node, Watchman, CocoaPods
|
||||
brew install node
|
||||
brew install watchman
|
||||
sudo gem install cocoapods
|
||||
```
|
||||
|
||||
**Android:**
|
||||
```bash
|
||||
# Android Studio herunterladen
|
||||
# https://developer.android.com/studio
|
||||
|
||||
# Android SDK installieren
|
||||
# Android Studio > Preferences > Appearance & Behavior > System Settings > Android SDK
|
||||
# - Android 13 (Tiramisu) SDK installieren
|
||||
# - Android SDK Build-Tools
|
||||
# - Android SDK Platform-Tools
|
||||
|
||||
# Umgebungsvariablen setzen
|
||||
export ANDROID_HOME=$HOME/Library/Android/sdk
|
||||
export PATH=$PATH:$ANDROID_HOME/emulator
|
||||
export PATH=$PATH:$ANDROID_HOME/platform-tools
|
||||
```
|
||||
|
||||
#### React Native Projekt initialisieren:
|
||||
|
||||
```bash
|
||||
# React Native CLI global installieren
|
||||
npm install -g react-native-cli
|
||||
|
||||
# Neues Projekt mit TypeScript
|
||||
npx react-native@latest init FristyApp --template react-native-template-typescript
|
||||
|
||||
# In Projekt-Ordner
|
||||
cd FristyApp
|
||||
|
||||
# Unsere Source-Files kopieren
|
||||
# src/ Ordner von unserem Projekt kopieren
|
||||
```
|
||||
|
||||
### Option 3: Expo mit unserem bestehenden Code (BESTE OPTION)
|
||||
|
||||
Wir konvertieren unser Projekt zu Expo für schnelles Testen:
|
||||
|
||||
```bash
|
||||
# 1. Expo Dependencies hinzufügen
|
||||
npm install expo expo-status-bar
|
||||
|
||||
# 2. Metro Config für Expo
|
||||
# (Wird automatisch erstellt)
|
||||
|
||||
# 3. App starten
|
||||
npx expo start
|
||||
|
||||
# 4. Im Terminal:
|
||||
# - i für iOS Simulator
|
||||
# - a für Android Emulator
|
||||
# - w für Web Browser
|
||||
# - QR-Code für Expo Go App
|
||||
```
|
||||
|
||||
## 🚀 Schnellstart: Expo-Setup (EMPFOHLEN)
|
||||
|
||||
Ich empfehle Expo für die ersten Tests, da es:
|
||||
- ✅ Keine native Builds benötigt
|
||||
- ✅ Sofort auf echtem Gerät testbar
|
||||
- ✅ Hot Reload funktioniert perfekt
|
||||
- ✅ Später zu React Native CLI migrierbar
|
||||
|
||||
### Schritt-für-Schritt:
|
||||
|
||||
1. **Expo Dependencies installieren:**
|
||||
```bash
|
||||
cd /Users/justinursan/Documents/Projekt/fristy/app-v0.0.1
|
||||
npm install expo expo-status-bar --legacy-peer-deps
|
||||
```
|
||||
|
||||
2. **Metro Bundler starten:**
|
||||
```bash
|
||||
npx expo start
|
||||
```
|
||||
|
||||
3. **Expo Go App installieren:**
|
||||
- iOS: https://apps.apple.com/app/expo-go/id982107779
|
||||
- Android: https://play.google.com/store/apps/details?id=host.exp.exponent
|
||||
|
||||
4. **QR-Code scannen und testen!**
|
||||
|
||||
## 🔧 Aktuelle Einschränkungen
|
||||
|
||||
Unser aktuelles Setup hat noch keine nativen Projektdateien (ios/, android/).
|
||||
|
||||
**Du hast 2 Optionen:**
|
||||
|
||||
### Option A: Expo-basiert (schnell & einfach)
|
||||
- Installiere Expo Dependencies
|
||||
- Teste sofort mit Expo Go
|
||||
- Später React Native CLI hinzufügen
|
||||
|
||||
### Option B: Vollständiges React Native Setup
|
||||
- Native Projekte generieren
|
||||
- Xcode/Android Studio konfigurieren
|
||||
- Volle Kontrolle über native Code
|
||||
|
||||
## 📝 Empfohlene Reihenfolge
|
||||
|
||||
1. **Jetzt: Expo für schnelles Prototyping**
|
||||
```bash
|
||||
npm install expo expo-status-bar --legacy-peer-deps
|
||||
npx expo start
|
||||
```
|
||||
|
||||
2. **Später: Migration zu React Native CLI**
|
||||
```bash
|
||||
npx create-react-native-app --template
|
||||
# Native Ordner generieren
|
||||
```
|
||||
|
||||
3. **Production: Vollständige Builds**
|
||||
- iOS: Xcode
|
||||
- Android: Android Studio
|
||||
|
||||
## 🎯 Was ich jetzt machen soll?
|
||||
|
||||
Sag mir einfach:
|
||||
|
||||
**A)** "Expo Setup" - Ich richte Expo ein für schnelles Testen
|
||||
**B)** "React Native CLI" - Ich erstelle vollständiges RN-Projekt
|
||||
**C)** "Erst mal nur Code sehen" - Ich zeige dir die Struktur
|
||||
|
||||
Welche Option möchtest du? 😊
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
{
|
||||
"expo": {
|
||||
"name": "Fristy",
|
||||
"slug": "fristy",
|
||||
"version": "0.0.1",
|
||||
"orientation": "portrait",
|
||||
"icon": "./assets/icon.png",
|
||||
"userInterfaceStyle": "light",
|
||||
"splash": {
|
||||
"image": "./assets/splash.png",
|
||||
"resizeMode": "contain",
|
||||
"backgroundColor": "#6366F1"
|
||||
},
|
||||
"assetBundlePatterns": [
|
||||
"**/*"
|
||||
],
|
||||
"ios": {
|
||||
"supportsTablet": true,
|
||||
"bundleIdentifier": "com.fristyapp.fristy"
|
||||
},
|
||||
"android": {
|
||||
"adaptiveIcon": {
|
||||
"foregroundImage": "./assets/adaptive-icon.png",
|
||||
"backgroundColor": "#6366F1"
|
||||
},
|
||||
"package": "com.fristyapp.fristy"
|
||||
},
|
||||
"web": {
|
||||
"favicon": "./assets/favicon.png"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,21 +1,6 @@
|
|||
module.exports = {
|
||||
presets: ['module:@react-native/babel-preset'],
|
||||
plugins: [
|
||||
[
|
||||
'module-resolver',
|
||||
{
|
||||
root: ['./src'],
|
||||
extensions: ['.ios.js', '.android.js', '.js', '.ts', '.tsx', '.json'],
|
||||
alias: {
|
||||
'@modules': './src/modules',
|
||||
'@shared': './src/shared',
|
||||
'@navigation': './src/navigation',
|
||||
'@store': './src/store',
|
||||
'@config': './src/config',
|
||||
'@assets': './assets',
|
||||
},
|
||||
},
|
||||
],
|
||||
'react-native-reanimated/plugin',
|
||||
],
|
||||
module.exports = function(api) {
|
||||
api.cache(true);
|
||||
return {
|
||||
presets: ['babel-preset-expo'],
|
||||
};
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
const { getDefaultConfig } = require('expo/metro-config');
|
||||
|
||||
const config = getDefaultConfig(__dirname);
|
||||
|
||||
module.exports = config;
|
||||
File diff suppressed because it is too large
Load Diff
62
package.json
62
package.json
|
|
@ -34,47 +34,59 @@
|
|||
]
|
||||
},
|
||||
"dependencies": {
|
||||
"@react-native-community/datetimepicker": "8.4.4",
|
||||
"@react-native-community/netinfo": "^11.4.1",
|
||||
"@react-navigation/bottom-tabs": "^6.5.11",
|
||||
"@react-navigation/native": "^6.1.9",
|
||||
"@react-navigation/native-stack": "^6.9.17",
|
||||
"@react-navigation/bottom-tabs": "^6.5.11",
|
||||
"@supabase/supabase-js": "^2.38.4",
|
||||
"react": "18.2.0",
|
||||
"react-native": "0.73.0",
|
||||
"react-native-safe-area-context": "^4.8.0",
|
||||
"react-native-screens": "^3.29.0",
|
||||
"react-native-vector-icons": "^10.0.3",
|
||||
"react-native-gesture-handler": "^2.14.0",
|
||||
"react-native-reanimated": "^3.6.1",
|
||||
"zustand": "^4.4.7",
|
||||
"date-fns": "^3.0.6",
|
||||
"expo": "^54.0.24",
|
||||
"expo-constants": "^18.0.10",
|
||||
"expo-status-bar": "^3.0.8",
|
||||
"react": "19.1.0",
|
||||
"react-dom": "19.1.0",
|
||||
"react-native": "0.81.5",
|
||||
"react-native-biometrics": "^3.0.1",
|
||||
"react-native-document-picker": "^9.1.1",
|
||||
"react-native-push-notification": "^8.1.1",
|
||||
"react-native-encrypted-storage": "^4.0.3",
|
||||
"react-native-biometrics": "^3.0.1"
|
||||
"react-native-gesture-handler": "~2.28.0",
|
||||
"react-native-push-notification": "^8.1.1",
|
||||
"react-native-reanimated": "~4.1.1",
|
||||
"react-native-safe-area-context": "~5.6.0",
|
||||
"react-native-screens": "~4.16.0",
|
||||
"react-native-vector-icons": "^10.0.3",
|
||||
"react-native-web": "^0.21.2",
|
||||
"react-native-worklets": "^0.6.1",
|
||||
"react-native-worklets-core": "^1.6.2",
|
||||
"zustand": "^4.4.7"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.23.5",
|
||||
"@babel/preset-env": "^7.23.5",
|
||||
"@babel/runtime": "^7.23.5",
|
||||
"@babel/runtime": "^7.28.4",
|
||||
"@commitlint/cli": "^18.4.3",
|
||||
"@commitlint/config-conventional": "^18.4.3",
|
||||
"@react-native/babel-preset": "^0.73.18",
|
||||
"@react-native/eslint-config": "^0.73.1",
|
||||
"@react-native/metro-config": "^0.73.2",
|
||||
"@react-native/typescript-config": "^0.73.1",
|
||||
"@types/react": "^18.2.45",
|
||||
"@types/react-test-renderer": "^18.0.7",
|
||||
"typescript": "^5.3.3",
|
||||
"jest": "^29.7.0",
|
||||
"@testing-library/react-native": "^12.4.2",
|
||||
"prettier": "^3.1.1",
|
||||
"eslint": "^8.56.0",
|
||||
"@commitlint/cli": "^18.4.3",
|
||||
"@commitlint/config-conventional": "^18.4.3",
|
||||
"husky": "^8.0.3",
|
||||
"lint-staged": "^15.2.0",
|
||||
"standard-version": "^9.5.0",
|
||||
"@semantic-release/changelog": "^6.0.3",
|
||||
"@semantic-release/git": "^10.0.1",
|
||||
"semantic-release": "^22.0.12"
|
||||
"@testing-library/react-native": "^12.4.2",
|
||||
"@types/react": "~19.1.10",
|
||||
"@types/react-test-renderer": "^18.0.7",
|
||||
"babel-plugin-module-resolver": "^5.0.2",
|
||||
"babel-preset-expo": "^54.0.7",
|
||||
"eslint": "^8.56.0",
|
||||
"husky": "^8.0.3",
|
||||
"jest": "^29.7.0",
|
||||
"lint-staged": "^15.2.0",
|
||||
"prettier": "^3.1.1",
|
||||
"react-test-renderer": "18.2.0",
|
||||
"semantic-release": "^22.0.12",
|
||||
"standard-version": "^9.5.0",
|
||||
"typescript": "^5.3.3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=18",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,34 @@
|
|||
#!/bin/bash
|
||||
|
||||
# Fristy Repository in Gitea erstellen
|
||||
# Verwendung: ./scripts/create-gitea-repo.sh
|
||||
|
||||
GITEA_URL="http://192.168.1.142:3000"
|
||||
GITEA_TOKEN="ec01d92db7f02dec1089cbb00076d9cbd533fd3f"
|
||||
REPO_NAME="fristy"
|
||||
REPO_DESCRIPTION="Modulare Vertrags-Management App für iOS und Android"
|
||||
|
||||
echo "📦 Erstelle Repository in Gitea..."
|
||||
|
||||
# Repository erstellen
|
||||
curl -X POST "${GITEA_URL}/api/v1/user/repos" \
|
||||
-H "Authorization: token ${GITEA_TOKEN}" \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{
|
||||
"name": "'"${REPO_NAME}"'",
|
||||
"description": "'"${REPO_DESCRIPTION}"'",
|
||||
"private": false,
|
||||
"auto_init": false,
|
||||
"default_branch": "main",
|
||||
"gitignores": "",
|
||||
"license": "",
|
||||
"readme": "Default"
|
||||
}'
|
||||
|
||||
echo ""
|
||||
echo "✅ Repository erstellt!"
|
||||
echo "🔗 URL: ${GITEA_URL}/Firstly/${REPO_NAME}"
|
||||
echo ""
|
||||
echo "Nächste Schritte:"
|
||||
echo "1. git remote set-url origin ${GITEA_URL}/Firstly/${REPO_NAME}.git"
|
||||
echo "2. git push -u origin main"
|
||||
|
|
@ -0,0 +1,191 @@
|
|||
import React, { useState } from 'react';
|
||||
import { View, Text, StyleSheet, ScrollView, TouchableOpacity, TextInput, Switch, Platform } from 'react-native';
|
||||
import { Contract, ContractCategory } from '../../../shared/types';
|
||||
import { DatePickerInput } from '../../../shared/components/DatePickerInput';
|
||||
|
||||
interface AddContractScreenProps {
|
||||
onClose: () => void;
|
||||
onSave: (contract: Omit<Contract, 'id'>) => void;
|
||||
}
|
||||
|
||||
export const AddContractScreen: React.FC<AddContractScreenProps> = ({ onClose, onSave }) => {
|
||||
const [name, setName] = useState('');
|
||||
const [provider, setProvider] = useState('');
|
||||
const [category, setCategory] = useState<ContractCategory>('other');
|
||||
const [amount, setAmount] = useState('0');
|
||||
const [billingCycle, setBillingCycle] = useState<'monthly' | 'quarterly' | 'yearly'>('monthly');
|
||||
const [startDate, setStartDate] = useState('');
|
||||
const [endDate, setEndDate] = useState('');
|
||||
const [autoRenewal, setAutoRenewal] = useState(true);
|
||||
const [cancellationPeriod, setCancellationPeriod] = useState('');
|
||||
const [notes, setNotes] = useState('');
|
||||
|
||||
const getCategoryIcon = (cat: string) => {
|
||||
const icons: Record<string, string> = {
|
||||
internet: '🌐',
|
||||
mobile: '📱',
|
||||
streaming: '📺',
|
||||
utilities: '💡',
|
||||
insurance: '🛡️',
|
||||
other: '📄',
|
||||
};
|
||||
return icons[cat] || '📄';
|
||||
};
|
||||
|
||||
const handleSave = () => {
|
||||
if (!name.trim() || !provider.trim()) {
|
||||
alert('Bitte fülle mindestens Name und Anbieter aus!');
|
||||
return;
|
||||
}
|
||||
|
||||
const newContract: Omit<Contract, 'id'> = {
|
||||
name: name.trim(),
|
||||
provider: provider.trim(),
|
||||
category,
|
||||
amount: parseFloat(amount) || 0,
|
||||
currency: 'EUR',
|
||||
billingCycle,
|
||||
startDate: startDate || new Date().toISOString().split('T')[0],
|
||||
endDate: endDate || undefined,
|
||||
autoRenewal,
|
||||
cancellationPeriod: cancellationPeriod || undefined,
|
||||
notes: notes || undefined,
|
||||
};
|
||||
|
||||
onSave(newContract);
|
||||
};
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<View style={styles.header}>
|
||||
<TouchableOpacity onPress={onClose} style={styles.closeButton}>
|
||||
<Text style={styles.closeIcon}>✕</Text>
|
||||
</TouchableOpacity>
|
||||
<Text style={styles.headerTitle}>Neuer Vertrag</Text>
|
||||
<View style={styles.placeholder} />
|
||||
</View>
|
||||
|
||||
<ScrollView style={styles.content} contentContainerStyle={styles.scrollContent}>
|
||||
<View style={styles.card}>
|
||||
<Text style={styles.cardTitle}>Kategorie wählen</Text>
|
||||
<View style={styles.categoryGrid}>
|
||||
{(['internet', 'mobile', 'streaming', 'utilities', 'insurance', 'other'] as ContractCategory[]).map((cat) => (
|
||||
<TouchableOpacity
|
||||
key={cat}
|
||||
style={[styles.categoryCard, category === cat && styles.categoryCardActive]}
|
||||
onPress={() => setCategory(cat)}
|
||||
>
|
||||
<Text style={styles.categoryIcon}>{getCategoryIcon(cat)}</Text>
|
||||
<Text style={styles.categoryLabel}>
|
||||
{cat === 'internet' ? 'Internet' :
|
||||
cat === 'mobile' ? 'Mobilfunk' :
|
||||
cat === 'streaming' ? 'Streaming' :
|
||||
cat === 'utilities' ? 'Versorgung' :
|
||||
cat === 'insurance' ? 'Versicherung' : 'Sonstiges'}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.card}>
|
||||
<Text style={styles.cardTitle}>Grunddaten</Text>
|
||||
<View style={styles.inputGroup}>
|
||||
<Text style={styles.inputLabel}>Vertragsname *</Text>
|
||||
<TextInput style={styles.textInput} value={name} onChangeText={setName} placeholder="z.B. Vodafone DSL" placeholderTextColor="#C7C7CC" />
|
||||
</View>
|
||||
<View style={styles.inputGroup}>
|
||||
<Text style={styles.inputLabel}>Anbieter *</Text>
|
||||
<TextInput style={styles.textInput} value={provider} onChangeText={setProvider} placeholder="z.B. Vodafone" placeholderTextColor="#C7C7CC" />
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.card}>
|
||||
<Text style={styles.cardTitle}>Kosten</Text>
|
||||
<View style={styles.inputGroup}>
|
||||
<Text style={styles.inputLabel}>Betrag (EUR)</Text>
|
||||
<TextInput style={styles.textInput} value={amount} onChangeText={setAmount} placeholder="0.00" keyboardType="decimal-pad" placeholderTextColor="#C7C7CC" />
|
||||
</View>
|
||||
<View style={styles.inputGroup}>
|
||||
<Text style={styles.inputLabel}>Zahlungsrhythmus</Text>
|
||||
<View style={styles.cycleButtons}>
|
||||
{[
|
||||
{ value: 'monthly', label: 'Monatlich' },
|
||||
{ value: 'quarterly', label: 'Vierteljährlich' },
|
||||
{ value: 'yearly', label: 'Jährlich' }
|
||||
].map((cycle) => (
|
||||
<TouchableOpacity key={cycle.value} style={[styles.cycleButton, billingCycle === cycle.value && styles.cycleButtonActive]} onPress={() => setBillingCycle(cycle.value as any)}>
|
||||
<Text style={[styles.cycleButtonText, billingCycle === cycle.value && styles.cycleButtonTextActive]}>{cycle.label}</Text>
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.card}>
|
||||
<Text style={styles.cardTitle}>Vertragslaufzeit</Text>
|
||||
<View style={styles.inputGroup}>
|
||||
<Text style={styles.inputLabel}>Startdatum</Text>
|
||||
<DatePickerInput value={startDate} onChange={setStartDate} placeholder="Startdatum wählen" />
|
||||
</View>
|
||||
<View style={styles.inputGroup}>
|
||||
<Text style={styles.inputLabel}>Enddatum (optional)</Text>
|
||||
<DatePickerInput value={endDate} onChange={setEndDate} placeholder="Enddatum wählen (optional)" />
|
||||
</View>
|
||||
<View style={styles.switchRow}>
|
||||
<Text style={styles.inputLabel}>Automatische Verlängerung</Text>
|
||||
<Switch value={autoRenewal} onValueChange={setAutoRenewal} trackColor={{ false: '#D1D1D6', true: '#34C75980' }} thumbColor={autoRenewal ? '#34C759' : '#F4F3F4'} />
|
||||
</View>
|
||||
<View style={styles.inputGroup}>
|
||||
<Text style={styles.inputLabel}>Kündigungsfrist (optional)</Text>
|
||||
<TextInput style={styles.textInput} value={cancellationPeriod} onChangeText={setCancellationPeriod} placeholder="z.B. 3 Monate" placeholderTextColor="#C7C7CC" />
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.card}>
|
||||
<Text style={styles.cardTitle}>Notizen (optional)</Text>
|
||||
<TextInput style={styles.notesInput} value={notes} onChangeText={setNotes} placeholder="Füge zusätzliche Informationen hinzu..." placeholderTextColor="#C7C7CC" multiline numberOfLines={4} />
|
||||
</View>
|
||||
|
||||
<View style={styles.actionButtons}>
|
||||
<TouchableOpacity style={styles.cancelButton} onPress={onClose}><Text style={styles.cancelButtonText}>Abbrechen</Text></TouchableOpacity>
|
||||
<TouchableOpacity style={styles.saveButton} onPress={handleSave}><Text style={styles.saveButtonText}>Speichern</Text></TouchableOpacity>
|
||||
</View>
|
||||
<View style={{ height: 100 }} />
|
||||
</ScrollView>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: { flex: 1, backgroundColor: '#F2F2F7' },
|
||||
header: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', paddingTop: 60, paddingHorizontal: 20, paddingBottom: 16, backgroundColor: '#F2F2F7' },
|
||||
closeButton: { width: 40, height: 40, borderRadius: 20, backgroundColor: 'rgba(255, 255, 255, 0.7)', alignItems: 'center', justifyContent: 'center' },
|
||||
closeIcon: { fontSize: 24, color: '#007AFF', fontWeight: '300' as any },
|
||||
headerTitle: { fontSize: 17, fontWeight: '600' as any, color: '#000000' },
|
||||
placeholder: { width: 40 },
|
||||
content: { flex: 1 },
|
||||
scrollContent: { paddingHorizontal: 20 },
|
||||
card: { backgroundColor: Platform.OS === 'ios' ? 'rgba(255, 255, 255, 0.7)' : '#FFFFFF', borderRadius: 20, padding: 20, marginBottom: 16, borderWidth: 1, borderColor: 'rgba(255, 255, 255, 0.5)', shadowColor: '#000', shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.1, shadowRadius: 12, elevation: 4 },
|
||||
cardTitle: { fontSize: 20, fontWeight: 'bold', color: '#000000', marginBottom: 16 },
|
||||
categoryGrid: { flexDirection: 'row', flexWrap: 'wrap', gap: 12 },
|
||||
categoryCard: { width: '30%', aspectRatio: 1, backgroundColor: '#F2F2F7', borderRadius: 16, alignItems: 'center', justifyContent: 'center', padding: 12 },
|
||||
categoryCardActive: { backgroundColor: '#007AFF20', borderWidth: 2, borderColor: '#007AFF' },
|
||||
categoryIcon: { fontSize: 36, marginBottom: 8 },
|
||||
categoryLabel: { fontSize: 12, color: '#000000', textAlign: 'center', fontWeight: '600' as any },
|
||||
inputGroup: { marginBottom: 16 },
|
||||
inputLabel: { fontSize: 15, color: '#000000', marginBottom: 8, fontWeight: '600' as any },
|
||||
textInput: { backgroundColor: '#F2F2F7', borderRadius: 12, padding: 14, fontSize: 17, color: '#000000', borderWidth: 1, borderColor: 'transparent' },
|
||||
cycleButtons: { gap: 8 },
|
||||
cycleButton: { backgroundColor: '#F2F2F7', padding: 14, borderRadius: 12, alignItems: 'center' },
|
||||
cycleButtonActive: { backgroundColor: '#007AFF' },
|
||||
cycleButtonText: { fontSize: 17, color: '#000000', fontWeight: '600' as any },
|
||||
cycleButtonTextActive: { color: '#FFFFFF' },
|
||||
switchRow: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 },
|
||||
notesInput: { backgroundColor: '#F2F2F7', borderRadius: 12, padding: 14, fontSize: 15, color: '#000000', minHeight: 100, textAlignVertical: 'top' },
|
||||
actionButtons: { flexDirection: 'row', gap: 12, marginTop: 8 },
|
||||
cancelButton: { flex: 1, backgroundColor: '#F2F2F7', padding: 16, borderRadius: 12, alignItems: 'center' },
|
||||
cancelButtonText: { fontSize: 17, fontWeight: '600' as any, color: '#000000' },
|
||||
saveButton: { flex: 1, backgroundColor: '#007AFF', padding: 16, borderRadius: 12, alignItems: 'center' },
|
||||
saveButtonText: { fontSize: 17, fontWeight: '600' as any, color: '#FFFFFF' },
|
||||
});
|
||||
|
|
@ -0,0 +1,127 @@
|
|||
import React, { useState } from 'react';
|
||||
import { View, Text, StyleSheet, ScrollView, TouchableOpacity, TextInput, Switch, Platform } from 'react-native';
|
||||
import { Contract } from '../../../shared/types';
|
||||
import { DatePickerInput } from '../../../shared/components/DatePickerInput';
|
||||
import { IconPickerModal } from '../../../shared/components/IconPickerModal';
|
||||
|
||||
interface ContractDetailsScreenProps {
|
||||
contract: Contract;
|
||||
onClose: () => void;
|
||||
onSave: (contract: Contract) => void;
|
||||
}
|
||||
|
||||
export const ContractDetailsScreen: React.FC<ContractDetailsScreenProps> = ({ contract, onClose, onSave }) => {
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
const [editedContract, setEditedContract] = useState<Contract>(contract);
|
||||
const [showIconPicker, setShowIconPicker] = useState(false);
|
||||
|
||||
const getCategoryIcon = (category: string) => {
|
||||
const icons: Record<string, string> = { internet: '🌐', mobile: '📱', streaming: '📺', utilities: '💡', insurance: '🛡️', other: '📄' };
|
||||
return icons[category] || '📄';
|
||||
};
|
||||
|
||||
const getDefaultColor = (category: string) => {
|
||||
const colors: Record<string, string> = { internet: '#007AFF', mobile: '#34C759', streaming: '#E50914', utilities: '#FFCC00', insurance: '#0066B2', other: '#8E8E93' };
|
||||
return colors[category] || '#8E8E93';
|
||||
};
|
||||
|
||||
const displayIcon = editedContract.customIcon || getCategoryIcon(editedContract.category);
|
||||
const displayColor = editedContract.iconColor || getDefaultColor(editedContract.category);
|
||||
|
||||
const handleSave = () => {
|
||||
onSave(editedContract);
|
||||
setIsEditing(false);
|
||||
};
|
||||
|
||||
const handleIconSelect = (icon: string, color: string) => {
|
||||
setEditedContract({ ...editedContract, customIcon: icon, iconColor: color });
|
||||
};
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<View style={styles.header}>
|
||||
<TouchableOpacity onPress={onClose} style={styles.closeButton}><Text style={styles.closeIcon}>✕</Text></TouchableOpacity>
|
||||
<Text style={styles.headerTitle}>Vertragsdetails</Text>
|
||||
<TouchableOpacity onPress={isEditing ? handleSave : () => setIsEditing(true)} style={styles.editButton}>
|
||||
<Text style={styles.editButtonText}>{isEditing ? 'Fertig' : 'Bearbeiten'}</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
<ScrollView style={styles.content} contentContainerStyle={styles.scrollContent}>
|
||||
<View style={styles.iconSection}>
|
||||
<TouchableOpacity style={[styles.iconContainer, { backgroundColor: displayColor + '20' }]} onPress={isEditing ? () => setShowIconPicker(true) : undefined} disabled={!isEditing}>
|
||||
<Text style={styles.icon}>{displayIcon}</Text>
|
||||
{isEditing && <View style={styles.editIconBadge}><Text style={styles.editIconBadgeText}>✎</Text></View>}
|
||||
</TouchableOpacity>
|
||||
{isEditing ? <TextInput style={styles.titleInput} value={editedContract.name} onChangeText={(text) => setEditedContract({ ...editedContract, name: text })} /> : <Text style={styles.title}>{contract.name}</Text>}
|
||||
<Text style={styles.provider}>{contract.provider}</Text>
|
||||
</View>
|
||||
|
||||
<View style={styles.card}>
|
||||
<Text style={styles.cardTitle}>Kosten</Text>
|
||||
<View style={styles.detailRow}><Text style={styles.detailLabel}>Betrag</Text>
|
||||
{isEditing ? <TextInput style={styles.detailInput} value={editedContract.amount.toString()} onChangeText={(text) => setEditedContract({ ...editedContract, amount: parseFloat(text) || 0 })} keyboardType="decimal-pad" /> : <Text style={styles.detailValue}>€{contract.amount.toFixed(2)}</Text>}
|
||||
</View>
|
||||
<View style={styles.detailRow}><Text style={styles.detailLabel}>Zahlungsrhythmus</Text><Text style={styles.detailValue}>{contract.billingCycle === 'monthly' ? 'Monatlich' : contract.billingCycle === 'quarterly' ? 'Vierteljährlich' : 'Jährlich'}</Text></View>
|
||||
</View>
|
||||
|
||||
<View style={styles.card}>
|
||||
<Text style={styles.cardTitle}>Vertragslaufzeit</Text>
|
||||
<View style={styles.detailRow}><Text style={styles.detailLabel}>Startdatum</Text>
|
||||
{isEditing ? <DatePickerInput value={editedContract.startDate} onChange={(date) => setEditedContract({ ...editedContract, startDate: date })} /> : <Text style={styles.detailValue}>{new Date(contract.startDate).toLocaleDateString('de-DE')}</Text>}
|
||||
</View>
|
||||
{(contract.endDate || isEditing) && (
|
||||
<View style={styles.detailRow}><Text style={styles.detailLabel}>Enddatum</Text>
|
||||
{isEditing ? <DatePickerInput value={editedContract.endDate || ''} onChange={(date) => setEditedContract({ ...editedContract, endDate: date })} /> : <Text style={styles.detailValue}>{contract.endDate ? new Date(contract.endDate).toLocaleDateString('de-DE') : '-'}</Text>}
|
||||
</View>
|
||||
)}
|
||||
<View style={styles.detailRow}><Text style={styles.detailLabel}>Automatische Verlängerung</Text>
|
||||
{isEditing ? <Switch value={editedContract.autoRenewal} onValueChange={(value) => setEditedContract({ ...editedContract, autoRenewal: value })} trackColor={{ false: '#D1D1D6', true: '#34C75980' }} thumbColor={editedContract.autoRenewal ? '#34C759' : '#F4F3F4'} /> : <Text style={styles.detailValue}>{contract.autoRenewal ? 'Ja' : 'Nein'}</Text>}
|
||||
</View>
|
||||
{(contract.cancellationPeriod || isEditing) && (
|
||||
<View style={styles.detailRow}><Text style={styles.detailLabel}>Kündigungsfrist</Text>
|
||||
{isEditing ? <TextInput style={styles.detailInput} value={editedContract.cancellationPeriod || ''} onChangeText={(text) => setEditedContract({ ...editedContract, cancellationPeriod: text })} placeholder="z.B. 3 Monate" /> : <Text style={styles.detailValue}>{contract.cancellationPeriod || '-'}</Text>}
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
|
||||
{(contract.notes || isEditing) && (
|
||||
<View style={styles.card}><Text style={styles.cardTitle}>Notizen</Text>
|
||||
{isEditing ? <TextInput style={styles.notesInput} value={editedContract.notes || ''} onChangeText={(text) => setEditedContract({ ...editedContract, notes: text })} placeholder="Füge Notizen hinzu..." multiline numberOfLines={4} /> : <Text style={styles.notesText}>{contract.notes || 'Keine Notizen'}</Text>}
|
||||
</View>
|
||||
)}
|
||||
<View style={{ height: 100 }} />
|
||||
</ScrollView>
|
||||
|
||||
<IconPickerModal visible={showIconPicker} onClose={() => setShowIconPicker(false)} onSelect={handleIconSelect} currentIcon={displayIcon} currentColor={displayColor} />
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: { flex: 1, backgroundColor: '#F2F2F7' },
|
||||
header: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', paddingTop: 60, paddingHorizontal: 20, paddingBottom: 16, backgroundColor: '#F2F2F7' },
|
||||
closeButton: { width: 40, height: 40, borderRadius: 20, backgroundColor: 'rgba(255, 255, 255, 0.7)', alignItems: 'center', justifyContent: 'center' },
|
||||
closeIcon: { fontSize: 24, color: '#007AFF', fontWeight: '300' as any },
|
||||
headerTitle: { fontSize: 17, fontWeight: '600' as any, color: '#000000' },
|
||||
editButton: { paddingHorizontal: 16, paddingVertical: 8 },
|
||||
editButtonText: { fontSize: 17, fontWeight: '600' as any, color: '#007AFF' },
|
||||
content: { flex: 1 },
|
||||
scrollContent: { paddingHorizontal: 20 },
|
||||
iconSection: { alignItems: 'center', paddingVertical: 32 },
|
||||
iconContainer: { width: 120, height: 120, borderRadius: 30, alignItems: 'center', justifyContent: 'center', marginBottom: 20, position: 'relative' },
|
||||
icon: { fontSize: 64 },
|
||||
editIconBadge: { position: 'absolute', bottom: 0, right: 0, backgroundColor: '#007AFF', width: 32, height: 32, borderRadius: 16, alignItems: 'center', justifyContent: 'center', borderWidth: 3, borderColor: '#F2F2F7' },
|
||||
editIconBadgeText: { color: '#FFFFFF', fontSize: 16, fontWeight: 'bold' },
|
||||
title: { fontSize: 28, fontWeight: 'bold', color: '#000000', marginBottom: 4, textAlign: 'center' },
|
||||
titleInput: { fontSize: 28, fontWeight: 'bold', color: '#000000', marginBottom: 4, textAlign: 'center', backgroundColor: '#FFFFFF', paddingHorizontal: 16, paddingVertical: 8, borderRadius: 12, minWidth: 200 },
|
||||
provider: { fontSize: 17, color: '#8E8E93', textAlign: 'center' },
|
||||
card: { backgroundColor: Platform.OS === 'ios' ? 'rgba(255, 255, 255, 0.7)' : '#FFFFFF', borderRadius: 20, padding: 20, marginBottom: 16, borderWidth: 1, borderColor: 'rgba(255, 255, 255, 0.5)', shadowColor: '#000', shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.1, shadowRadius: 12, elevation: 4 },
|
||||
cardTitle: { fontSize: 20, fontWeight: 'bold', color: '#000000', marginBottom: 16 },
|
||||
detailRow: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingVertical: 12, borderBottomWidth: 1, borderBottomColor: '#E5E5EA' },
|
||||
detailLabel: { fontSize: 17, color: '#000000', fontWeight: '500' as any, flex: 1 },
|
||||
detailValue: { fontSize: 17, color: '#8E8E93', textAlign: 'right', flex: 1 },
|
||||
detailInput: { fontSize: 17, color: '#000000', textAlign: 'right', flex: 1, backgroundColor: '#F2F2F7', paddingHorizontal: 12, paddingVertical: 8, borderRadius: 8 },
|
||||
notesInput: { backgroundColor: '#F2F2F7', borderRadius: 12, padding: 14, fontSize: 15, color: '#000000', minHeight: 100, textAlignVertical: 'top' },
|
||||
notesText: { fontSize: 15, color: '#000000', lineHeight: 22 },
|
||||
});
|
||||
|
|
@ -0,0 +1,94 @@
|
|||
import React, { useState } from 'react';
|
||||
import { View, Text, StyleSheet, ScrollView, TouchableOpacity, Modal, Platform } from 'react-native';
|
||||
import { Contract } from '../../../shared/types';
|
||||
import { ContractCard } from '../../../shared/components/ContractCard';
|
||||
import { ContractDetailsScreen } from '../../contracts/screens/ContractDetailsScreen';
|
||||
import { AddContractScreen } from '../../contracts/screens/AddContractScreen';
|
||||
|
||||
export const DashboardScreen = () => {
|
||||
const [contracts, setContracts] = useState<Contract[]>([
|
||||
{ id: '1', name: 'Vodafone DSL', provider: 'Vodafone', category: 'internet', amount: 39.99, currency: 'EUR', billingCycle: 'monthly', startDate: '2024-01-01', autoRenewal: true, customIcon: '🌐', iconColor: '#007AFF' },
|
||||
{ id: '2', name: 'iPhone 15 Pro', provider: 'Apple', category: 'mobile', amount: 59.99, currency: 'EUR', billingCycle: 'monthly', startDate: '2024-03-15', endDate: '2026-03-14', autoRenewal: false, customIcon: '📱', iconColor: '#34C759' },
|
||||
{ id: '3', name: 'Netflix Premium', provider: 'Netflix', category: 'streaming', amount: 17.99, currency: 'EUR', billingCycle: 'monthly', startDate: '2023-06-01', autoRenewal: true, customIcon: '🎬', iconColor: '#E50914' },
|
||||
{ id: '4', name: 'Amazon Prime', provider: 'Amazon', category: 'streaming', amount: 8.99, currency: 'EUR', billingCycle: 'monthly', startDate: '2023-01-10', autoRenewal: true, customIcon: '📦', iconColor: '#FF9900' },
|
||||
{ id: '5', name: 'Spotify Family', provider: 'Spotify', category: 'streaming', amount: 16.99, currency: 'EUR', billingCycle: 'monthly', startDate: '2023-08-20', autoRenewal: true, customIcon: '🎵', iconColor: '#1DB954' },
|
||||
{ id: '6', name: 'Haftpflicht', provider: 'Allianz', category: 'insurance', amount: 89.99, currency: 'EUR', billingCycle: 'yearly', startDate: '2023-01-01', endDate: '2025-12-31', autoRenewal: true, cancellationPeriod: '3 Monate', customIcon: '🛡️', iconColor: '#0066B2' },
|
||||
{ id: '7', name: 'Strom', provider: 'Vattenfall', category: 'utilities', amount: 85.00, currency: 'EUR', billingCycle: 'monthly', startDate: '2022-11-01', autoRenewal: true, customIcon: '⚡', iconColor: '#FFCC00' },
|
||||
]);
|
||||
|
||||
const [selectedContract, setSelectedContract] = useState<Contract | null>(null);
|
||||
const [showDetails, setShowDetails] = useState(false);
|
||||
const [showAddContract, setShowAddContract] = useState(false);
|
||||
|
||||
const calculateTotalMonthly = () => {
|
||||
return contracts.reduce((total, contract) => {
|
||||
const monthlyAmount = contract.billingCycle === 'yearly' ? contract.amount / 12 : contract.billingCycle === 'quarterly' ? contract.amount / 3 : contract.amount;
|
||||
return total + monthlyAmount;
|
||||
}, 0);
|
||||
};
|
||||
|
||||
const handleContractPress = (contract: Contract) => {
|
||||
setSelectedContract(contract);
|
||||
setShowDetails(true);
|
||||
};
|
||||
|
||||
const handleUpdateContract = (updatedContract: Contract) => {
|
||||
setContracts(contracts.map(c => c.id === updatedContract.id ? updatedContract : c));
|
||||
setShowDetails(false);
|
||||
};
|
||||
|
||||
const handleAddContract = (newContract: Omit<Contract, 'id'>) => {
|
||||
const contract: Contract = {
|
||||
...newContract,
|
||||
id: Date.now().toString(),
|
||||
};
|
||||
setContracts([...contracts, contract]);
|
||||
setShowAddContract(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
{/* Fixed Summary Card */}
|
||||
<View style={styles.summaryCard}>
|
||||
<View>
|
||||
<Text style={styles.summaryLabel}>Monatliche Gesamtkosten</Text>
|
||||
<Text style={styles.summaryAmount}>€{calculateTotalMonthly().toFixed(2)}</Text>
|
||||
</View>
|
||||
<TouchableOpacity style={styles.addButton} onPress={() => setShowAddContract(true)}>
|
||||
<Text style={styles.addButtonText}>+</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
{/* Scrollable Contract List */}
|
||||
<ScrollView style={styles.scrollView} contentContainerStyle={styles.scrollContent} showsVerticalScrollIndicator={false}>
|
||||
<Text style={styles.sectionTitle}>Meine Verträge</Text>
|
||||
{contracts.map((contract) => (
|
||||
<ContractCard key={contract.id} contract={contract} onPress={() => handleContractPress(contract)} />
|
||||
))}
|
||||
<View style={{ height: 20 }} />
|
||||
</ScrollView>
|
||||
|
||||
{/* Contract Details Modal */}
|
||||
<Modal visible={showDetails} animationType="slide" presentationStyle="pageSheet" onRequestClose={() => setShowDetails(false)}>
|
||||
{selectedContract && <ContractDetailsScreen contract={selectedContract} onClose={() => setShowDetails(false)} onSave={handleUpdateContract} />}
|
||||
</Modal>
|
||||
|
||||
{/* Add Contract Modal */}
|
||||
<Modal visible={showAddContract} animationType="slide" presentationStyle="pageSheet" onRequestClose={() => setShowAddContract(false)}>
|
||||
<AddContractScreen onClose={() => setShowAddContract(false)} onSave={handleAddContract} />
|
||||
</Modal>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: { flex: 1, backgroundColor: '#F2F2F7' },
|
||||
summaryCard: { backgroundColor: Platform.OS === 'ios' ? 'rgba(255, 255, 255, 0.7)' : '#FFFFFF', marginHorizontal: 20, marginTop: 60, marginBottom: 16, padding: 20, borderRadius: 20, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', borderWidth: 1, borderColor: 'rgba(255, 255, 255, 0.5)', shadowColor: '#000', shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.1, shadowRadius: 12, elevation: 4 },
|
||||
summaryLabel: { fontSize: 15, color: '#8E8E93', marginBottom: 4 },
|
||||
summaryAmount: { fontSize: 32, fontWeight: 'bold', color: '#000000' },
|
||||
addButton: { width: 56, height: 56, borderRadius: 14, backgroundColor: '#007AFF', alignItems: 'center', justifyContent: 'center', shadowColor: '#007AFF', shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.3, shadowRadius: 8, elevation: 8 },
|
||||
addButtonText: { fontSize: 32, color: '#FFFFFF', fontWeight: '300' as any, marginTop: -4 },
|
||||
scrollView: { flex: 1 },
|
||||
scrollContent: { paddingHorizontal: 20 },
|
||||
sectionTitle: { fontSize: 22, fontWeight: 'bold', color: '#000000', marginBottom: 16 },
|
||||
});
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
import React from 'react';
|
||||
import { View, Text, StyleSheet } from 'react-native';
|
||||
|
||||
export const ProfileScreen = () => {
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Text style={styles.title}>Profil & Einstellungen</Text>
|
||||
<Text style={styles.subtitle}>Coming soon...</Text>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: '#F2F2F7',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
title: {
|
||||
fontSize: 24,
|
||||
fontWeight: 'bold',
|
||||
marginBottom: 8,
|
||||
},
|
||||
subtitle: {
|
||||
fontSize: 16,
|
||||
color: '#8E8E93',
|
||||
},
|
||||
});
|
||||
|
|
@ -1,142 +1,44 @@
|
|||
import React from 'react';
|
||||
import { NavigationContainer } from '@react-navigation/native';
|
||||
import { createNativeStackNavigator } from '@react-navigation/native-stack';
|
||||
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
|
||||
import { useAuthStore } from '@store';
|
||||
import { Text } from 'react-native';
|
||||
|
||||
// Auth Screens (werden später erstellt)
|
||||
// import { LoginScreen } from '@modules/auth/screens/LoginScreen';
|
||||
// import { RegisterScreen } from '@modules/auth/screens/RegisterScreen';
|
||||
// Screens
|
||||
import { DashboardScreen } from '../modules/dashboard/screens/DashboardScreen';
|
||||
import { ProfileScreen } from '../modules/profile/screens/ProfileScreen';
|
||||
|
||||
// App Screens (werden später erstellt)
|
||||
// import { DashboardScreen } from '@modules/dashboard/screens/DashboardScreen';
|
||||
// import { ContractsScreen } from '@modules/contracts/screens/ContractsScreen';
|
||||
// import { AddContractScreen } from '@modules/contracts/screens/AddContractScreen';
|
||||
// import { NotificationsScreen } from '@modules/notifications/screens/NotificationsScreen';
|
||||
// import { ProfileScreen } from '@modules/profile/screens/ProfileScreen';
|
||||
|
||||
const Stack = createNativeStackNavigator();
|
||||
const Tab = createBottomTabNavigator();
|
||||
|
||||
// Placeholder Komponenten für die Navigation
|
||||
const PlaceholderScreen = ({ title }: { title: string }) => (
|
||||
<div style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
|
||||
<h1>{title}</h1>
|
||||
</div>
|
||||
);
|
||||
|
||||
const LoginScreen = () => <PlaceholderScreen title="Login" />;
|
||||
const RegisterScreen = () => <PlaceholderScreen title="Register" />;
|
||||
const DashboardScreen = () => <PlaceholderScreen title="Dashboard" />;
|
||||
const ContractsScreen = () => <PlaceholderScreen title="Contracts" />;
|
||||
const AddContractScreen = () => <PlaceholderScreen title="Add Contract" />;
|
||||
const NotificationsScreen = () => <PlaceholderScreen title="Notifications" />;
|
||||
const ProfileScreen = () => <PlaceholderScreen title="Profile" />;
|
||||
|
||||
/**
|
||||
* Auth Stack - für nicht eingeloggte Benutzer
|
||||
* Root Navigation mit Bottom Tabs
|
||||
*/
|
||||
const AuthStack = () => {
|
||||
return (
|
||||
<Stack.Navigator
|
||||
screenOptions={{
|
||||
headerShown: false,
|
||||
}}>
|
||||
<Stack.Screen name="Login" component={LoginScreen} />
|
||||
<Stack.Screen name="Register" component={RegisterScreen} />
|
||||
</Stack.Navigator>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* Tab Navigator - Hauptnavigation für eingeloggte Benutzer
|
||||
*/
|
||||
const AppTabs = () => {
|
||||
export const RootNavigation = () => {
|
||||
return (
|
||||
<NavigationContainer>
|
||||
<Tab.Navigator
|
||||
screenOptions={{
|
||||
headerShown: true,
|
||||
tabBarActiveTintColor: '#6366F1',
|
||||
tabBarInactiveTintColor: '#9CA3AF',
|
||||
}}>
|
||||
<Tab.Screen
|
||||
name="Dashboard"
|
||||
component={DashboardScreen}
|
||||
options={{
|
||||
title: 'Übersicht',
|
||||
// tabBarIcon: ({ color, size }) => (
|
||||
// <Icon name="home" size={size} color={color} />
|
||||
// ),
|
||||
headerShown: false,
|
||||
tabBarActiveTintColor: '#007AFF',
|
||||
tabBarInactiveTintColor: '#8E8E93',
|
||||
}}
|
||||
/>
|
||||
>
|
||||
<Tab.Screen
|
||||
name="Contracts"
|
||||
component={ContractsScreen}
|
||||
component={DashboardScreen}
|
||||
options={{
|
||||
title: 'Verträge',
|
||||
// tabBarIcon: ({ color, size }) => (
|
||||
// <Icon name="file-text" size={size} color={color} />
|
||||
// ),
|
||||
}}
|
||||
/>
|
||||
<Tab.Screen
|
||||
name="AddContract"
|
||||
component={AddContractScreen}
|
||||
options={{
|
||||
title: 'Hinzufügen',
|
||||
// tabBarIcon: ({ color, size }) => (
|
||||
// <Icon name="plus-circle" size={size} color={color} />
|
||||
// ),
|
||||
}}
|
||||
/>
|
||||
<Tab.Screen
|
||||
name="Notifications"
|
||||
component={NotificationsScreen}
|
||||
options={{
|
||||
title: 'Erinnerungen',
|
||||
// tabBarIcon: ({ color, size }) => (
|
||||
// <Icon name="bell" size={size} color={color} />
|
||||
// ),
|
||||
tabBarLabel: 'Verträge',
|
||||
tabBarIcon: ({ color }) => <Text style={{ fontSize: 28 }}>📄</Text>,
|
||||
}}
|
||||
/>
|
||||
<Tab.Screen
|
||||
name="Profile"
|
||||
component={ProfileScreen}
|
||||
options={{
|
||||
title: 'Profil',
|
||||
// tabBarIcon: ({ color, size }) => (
|
||||
// <Icon name="user" size={size} color={color} />
|
||||
// ),
|
||||
tabBarLabel: 'Profil',
|
||||
tabBarIcon: ({ color }) => <Text style={{ fontSize: 28 }}>⚙️</Text>,
|
||||
}}
|
||||
/>
|
||||
</Tab.Navigator>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* App Stack - für eingeloggte Benutzer
|
||||
*/
|
||||
const AppStack = () => {
|
||||
return (
|
||||
<Stack.Navigator>
|
||||
<Stack.Screen
|
||||
name="MainTabs"
|
||||
component={AppTabs}
|
||||
options={{ headerShown: false }}
|
||||
/>
|
||||
</Stack.Navigator>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* Root Navigation
|
||||
*/
|
||||
export const RootNavigation = () => {
|
||||
const { user } = useAuthStore();
|
||||
|
||||
return (
|
||||
<NavigationContainer>
|
||||
{user ? <AppStack /> : <AuthStack />}
|
||||
</NavigationContainer>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,112 +1,39 @@
|
|||
import React from 'react';
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
TouchableOpacity,
|
||||
StyleSheet,
|
||||
ViewStyle,
|
||||
} from 'react-native';
|
||||
import { Contract, ContractCategory } from '@shared/types';
|
||||
import { COLORS, SPACING, FONT_SIZE, BORDER_RADIUS, SHADOWS } from '@shared/theme';
|
||||
import { format } from 'date-fns';
|
||||
import { de } from 'date-fns/locale';
|
||||
import { View, Text, TouchableOpacity, StyleSheet, Platform } from 'react-native';
|
||||
import { Contract } from '../types';
|
||||
|
||||
interface ContractCardProps {
|
||||
contract: Contract;
|
||||
onPress: () => void;
|
||||
style?: ViewStyle;
|
||||
}
|
||||
|
||||
export const ContractCard: React.FC<ContractCardProps> = ({
|
||||
contract,
|
||||
onPress,
|
||||
style,
|
||||
}) => {
|
||||
const getCategoryColor = (category: ContractCategory): string => {
|
||||
return COLORS.categories[category] || COLORS.textSecondary;
|
||||
export const ContractCard: React.FC<ContractCardProps> = ({ contract, onPress }) => {
|
||||
const getCategoryIcon = (category: string) => {
|
||||
const icons: Record<string, string> = {
|
||||
internet: '🌐', mobile: '📱', streaming: '📺', utilities: '💡', insurance: '🛡️', other: '📄',
|
||||
};
|
||||
return icons[category] || '📄';
|
||||
};
|
||||
|
||||
const formatCost = (cost: number, cycle: string): string => {
|
||||
const formatted = cost.toFixed(2);
|
||||
switch (cycle) {
|
||||
case 'monthly':
|
||||
return `${formatted}€/Monat`;
|
||||
case 'quarterly':
|
||||
return `${formatted}€/Quartal`;
|
||||
case 'yearly':
|
||||
return `${formatted}€/Jahr`;
|
||||
default:
|
||||
return `${formatted}€`;
|
||||
}
|
||||
const getDefaultColor = (category: string) => {
|
||||
const colors: Record<string, string> = {
|
||||
internet: '#007AFF', mobile: '#34C759', streaming: '#E50914', utilities: '#FFCC00', insurance: '#0066B2', other: '#8E8E93',
|
||||
};
|
||||
return colors[category] || '#8E8E93';
|
||||
};
|
||||
|
||||
const getDaysUntilDeadline = (): number | null => {
|
||||
if (!contract.cancellationDeadline) return null;
|
||||
const today = new Date();
|
||||
const deadline = new Date(contract.cancellationDeadline);
|
||||
const diff = deadline.getTime() - today.getTime();
|
||||
return Math.ceil(diff / (1000 * 60 * 60 * 24));
|
||||
};
|
||||
|
||||
const daysLeft = getDaysUntilDeadline();
|
||||
const displayIcon = contract.customIcon || getCategoryIcon(contract.category);
|
||||
const displayColor = contract.iconColor || getDefaultColor(contract.category);
|
||||
|
||||
return (
|
||||
<TouchableOpacity
|
||||
style={[styles.card, style]}
|
||||
onPress={onPress}
|
||||
activeOpacity={0.7}>
|
||||
<View
|
||||
style={[
|
||||
styles.categoryIndicator,
|
||||
{ backgroundColor: getCategoryColor(contract.category) },
|
||||
]}
|
||||
/>
|
||||
|
||||
<TouchableOpacity style={styles.card} onPress={onPress} activeOpacity={0.7}>
|
||||
<View style={[styles.iconContainer, { backgroundColor: displayColor + '20' }]}>
|
||||
<Text style={styles.icon}>{displayIcon}</Text>
|
||||
</View>
|
||||
<View style={styles.content}>
|
||||
<View style={styles.header}>
|
||||
<Text style={styles.name} numberOfLines={1}>
|
||||
{contract.name}
|
||||
</Text>
|
||||
<Text style={styles.cost}>
|
||||
{formatCost(contract.cost, contract.billingCycle)}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<Text style={styles.provider} numberOfLines={1}>
|
||||
{contract.provider}
|
||||
</Text>
|
||||
|
||||
{contract.cancellationDeadline && (
|
||||
<View style={styles.deadline}>
|
||||
<Text
|
||||
style={[
|
||||
styles.deadlineText,
|
||||
daysLeft && daysLeft < 30 && styles.deadlineWarning,
|
||||
daysLeft && daysLeft < 7 && styles.deadlineDanger,
|
||||
]}>
|
||||
Kündigung bis:{' '}
|
||||
{format(new Date(contract.cancellationDeadline), 'dd.MM.yyyy', {
|
||||
locale: de,
|
||||
})}
|
||||
</Text>
|
||||
{daysLeft !== null && daysLeft > 0 && (
|
||||
<Text
|
||||
style={[
|
||||
styles.daysLeft,
|
||||
daysLeft < 30 && styles.daysLeftWarning,
|
||||
daysLeft < 7 && styles.daysLeftDanger,
|
||||
]}>
|
||||
{daysLeft} Tage
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
)}
|
||||
|
||||
{contract.status === 'cancelled' && (
|
||||
<View style={styles.statusBadge}>
|
||||
<Text style={styles.statusText}>Gekündigt</Text>
|
||||
</View>
|
||||
)}
|
||||
<Text style={styles.name} numberOfLines={1}>{contract.name}</Text>
|
||||
<Text style={styles.provider} numberOfLines={1}>{contract.provider}</Text>
|
||||
<Text style={styles.cost}>€{contract.amount.toFixed(2)}{contract.billingCycle === 'monthly' ? '/Monat' : contract.billingCycle === 'quarterly' ? '/Quartal' : '/Jahr'}</Text>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
|
|
@ -114,82 +41,31 @@ export const ContractCard: React.FC<ContractCardProps> = ({
|
|||
|
||||
const styles = StyleSheet.create({
|
||||
card: {
|
||||
backgroundColor: COLORS.surface,
|
||||
borderRadius: BORDER_RADIUS.lg,
|
||||
marginBottom: SPACING.md,
|
||||
backgroundColor: Platform.OS === 'ios' ? 'rgba(255, 255, 255, 0.7)' : '#FFFFFF',
|
||||
borderRadius: 20,
|
||||
padding: 16,
|
||||
marginBottom: 12,
|
||||
flexDirection: 'row',
|
||||
overflow: 'hidden',
|
||||
...SHADOWS.md,
|
||||
},
|
||||
categoryIndicator: {
|
||||
width: 6,
|
||||
},
|
||||
content: {
|
||||
flex: 1,
|
||||
padding: SPACING.md,
|
||||
},
|
||||
header: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'flex-start',
|
||||
marginBottom: SPACING.xs,
|
||||
},
|
||||
name: {
|
||||
flex: 1,
|
||||
fontSize: FONT_SIZE.lg,
|
||||
fontWeight: '600',
|
||||
color: COLORS.text,
|
||||
marginRight: SPACING.sm,
|
||||
},
|
||||
cost: {
|
||||
fontSize: FONT_SIZE.md,
|
||||
fontWeight: '700',
|
||||
color: COLORS.primary,
|
||||
},
|
||||
provider: {
|
||||
fontSize: FONT_SIZE.sm,
|
||||
color: COLORS.textSecondary,
|
||||
marginBottom: SPACING.sm,
|
||||
},
|
||||
deadline: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(255, 255, 255, 0.5)',
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 8,
|
||||
elevation: 3,
|
||||
},
|
||||
deadlineText: {
|
||||
fontSize: FONT_SIZE.sm,
|
||||
color: COLORS.textSecondary,
|
||||
},
|
||||
deadlineWarning: {
|
||||
color: COLORS.warning,
|
||||
},
|
||||
deadlineDanger: {
|
||||
color: COLORS.danger,
|
||||
fontWeight: '600',
|
||||
},
|
||||
daysLeft: {
|
||||
fontSize: FONT_SIZE.xs,
|
||||
color: COLORS.textLight,
|
||||
fontWeight: '500',
|
||||
},
|
||||
daysLeftWarning: {
|
||||
color: COLORS.warning,
|
||||
},
|
||||
daysLeftDanger: {
|
||||
color: COLORS.danger,
|
||||
fontWeight: '700',
|
||||
},
|
||||
statusBadge: {
|
||||
marginTop: SPACING.sm,
|
||||
alignSelf: 'flex-start',
|
||||
backgroundColor: COLORS.danger,
|
||||
paddingHorizontal: SPACING.sm,
|
||||
paddingVertical: 4,
|
||||
borderRadius: BORDER_RADIUS.sm,
|
||||
},
|
||||
statusText: {
|
||||
fontSize: FONT_SIZE.xs,
|
||||
color: '#FFF',
|
||||
fontWeight: '600',
|
||||
iconContainer: {
|
||||
width: 60,
|
||||
height: 60,
|
||||
borderRadius: 15,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginRight: 16,
|
||||
},
|
||||
icon: { fontSize: 32 },
|
||||
content: { flex: 1 },
|
||||
name: { fontSize: 17, fontWeight: '600' as any, color: '#000000', marginBottom: 4 },
|
||||
provider: { fontSize: 15, color: '#8E8E93', marginBottom: 4 },
|
||||
cost: { fontSize: 17, fontWeight: 'bold', color: '#007AFF' },
|
||||
});
|
||||
|
|
|
|||
|
|
@ -0,0 +1,136 @@
|
|||
import React, { useState } from 'react';
|
||||
import { View, Text, TouchableOpacity, StyleSheet, Platform } from 'react-native';
|
||||
import DateTimePicker, { DateTimePickerEvent } from '@react-native-community/datetimepicker';
|
||||
|
||||
interface DatePickerInputProps {
|
||||
value: string; // ISO date string YYYY-MM-DD
|
||||
onChange: (date: string) => void;
|
||||
placeholder?: string;
|
||||
style?: any;
|
||||
}
|
||||
|
||||
export const DatePickerInput: React.FC<DatePickerInputProps> = ({
|
||||
value,
|
||||
onChange,
|
||||
placeholder = 'Datum wählen',
|
||||
style,
|
||||
}) => {
|
||||
const [showPicker, setShowPicker] = useState(false);
|
||||
|
||||
const parseDate = (dateString: string): Date => {
|
||||
if (!dateString) return new Date();
|
||||
return new Date(dateString + 'T12:00:00'); // Noon to avoid timezone issues
|
||||
};
|
||||
|
||||
const formatDisplayDate = (dateString: string): string => {
|
||||
if (!dateString) return '';
|
||||
const date = parseDate(dateString);
|
||||
return date.toLocaleDateString('de-DE', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric',
|
||||
});
|
||||
};
|
||||
|
||||
const handleDateChange = (event: DateTimePickerEvent, selectedDate?: Date) => {
|
||||
if (Platform.OS === 'android') {
|
||||
setShowPicker(false);
|
||||
}
|
||||
|
||||
if (event.type === 'set' && selectedDate) {
|
||||
const isoDate = selectedDate.toISOString().split('T')[0];
|
||||
onChange(isoDate);
|
||||
}
|
||||
};
|
||||
|
||||
const handleConfirm = () => {
|
||||
setShowPicker(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<View style={style}>
|
||||
<TouchableOpacity
|
||||
style={styles.input}
|
||||
onPress={() => setShowPicker(true)}
|
||||
>
|
||||
<Text style={[styles.inputText, !value && styles.placeholder]}>
|
||||
{value ? formatDisplayDate(value) : placeholder}
|
||||
</Text>
|
||||
<Text style={styles.icon}>📅</Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
{showPicker && Platform.OS === 'ios' && (
|
||||
<View style={styles.iosPickerContainer}>
|
||||
<View style={styles.iosPickerHeader}>
|
||||
<TouchableOpacity onPress={handleConfirm} style={styles.doneButton}>
|
||||
<Text style={styles.doneButtonText}>Fertig</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
<DateTimePicker
|
||||
value={parseDate(value)}
|
||||
mode="date"
|
||||
display="spinner"
|
||||
onChange={handleDateChange}
|
||||
locale="de-DE"
|
||||
textColor="#000000"
|
||||
style={styles.picker}
|
||||
/>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{showPicker && Platform.OS === 'android' && (
|
||||
<DateTimePicker
|
||||
value={parseDate(value)}
|
||||
mode="date"
|
||||
display="default"
|
||||
onChange={handleDateChange}
|
||||
locale="de-DE"
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
input: {
|
||||
backgroundColor: '#F2F2F7',
|
||||
borderRadius: 12,
|
||||
padding: 14,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
},
|
||||
inputText: {
|
||||
fontSize: 17,
|
||||
color: '#000000',
|
||||
},
|
||||
placeholder: {
|
||||
color: '#C7C7CC',
|
||||
},
|
||||
icon: {
|
||||
fontSize: 20,
|
||||
},
|
||||
iosPickerContainer: {
|
||||
backgroundColor: '#FFFFFF',
|
||||
borderRadius: 12,
|
||||
marginTop: 8,
|
||||
overflow: 'hidden',
|
||||
},
|
||||
iosPickerHeader: {
|
||||
backgroundColor: '#F2F2F7',
|
||||
padding: 12,
|
||||
alignItems: 'flex-end',
|
||||
},
|
||||
doneButton: {
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 8,
|
||||
},
|
||||
doneButtonText: {
|
||||
color: '#007AFF',
|
||||
fontSize: 17,
|
||||
fontWeight: '600',
|
||||
},
|
||||
picker: {
|
||||
backgroundColor: '#FFFFFF',
|
||||
},
|
||||
});
|
||||
|
|
@ -0,0 +1,237 @@
|
|||
import React, { useState } from 'react';
|
||||
import { View, Text, Modal, TouchableOpacity, StyleSheet, ScrollView, Platform } from 'react-native';
|
||||
|
||||
interface IconPickerModalProps {
|
||||
visible: boolean;
|
||||
onClose: () => void;
|
||||
onSelect: (icon: string, color: string) => void;
|
||||
currentIcon?: string;
|
||||
currentColor?: string;
|
||||
}
|
||||
|
||||
const ICONS = [
|
||||
'🌐', '📱', '📺', '💡', '🛡️', '📄', '🎬', '🎵', '🎮', '📦',
|
||||
'💳', '🏠', '🚗', '✈️', '🏋️', '🍕', '☕', '📚', '💼', '🔒',
|
||||
'📧', '💰', '🎓', '🏥', '🔧', '🎨', '📷', '🎯', '⚡', '🔥',
|
||||
'💎', '🌟', '🎁', '🔔', '📊', '📈', '💻', '⌚', '🎪', '🎭',
|
||||
'🏆', '🎸', '🎹', '🎤', '🎧', '📹', '🎞️', '📡',
|
||||
];
|
||||
|
||||
const COLORS = [
|
||||
'#007AFF', // iOS Blue
|
||||
'#34C759', // iOS Green
|
||||
'#FF3B30', // iOS Red
|
||||
'#FF9500', // iOS Orange
|
||||
'#FFCC00', // iOS Yellow
|
||||
'#AF52DE', // iOS Purple
|
||||
'#FF2D55', // iOS Pink
|
||||
'#5856D6', // iOS Indigo
|
||||
'#00C7BE', // iOS Teal
|
||||
'#E50914', // Netflix Red
|
||||
'#1DB954', // Spotify Green
|
||||
'#0066B2', // Professional Blue
|
||||
];
|
||||
|
||||
export const IconPickerModal: React.FC<IconPickerModalProps> = ({
|
||||
visible,
|
||||
onClose,
|
||||
onSelect,
|
||||
currentIcon = '📄',
|
||||
currentColor = '#007AFF',
|
||||
}) => {
|
||||
const [selectedIcon, setSelectedIcon] = useState(currentIcon);
|
||||
const [selectedColor, setSelectedColor] = useState(currentColor);
|
||||
|
||||
const handleSave = () => {
|
||||
onSelect(selectedIcon, selectedColor);
|
||||
onClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
visible={visible}
|
||||
animationType="slide"
|
||||
transparent={true}
|
||||
onRequestClose={onClose}
|
||||
>
|
||||
<View style={styles.modalOverlay}>
|
||||
<View style={styles.modalContent}>
|
||||
{/* Header */}
|
||||
<View style={styles.header}>
|
||||
<TouchableOpacity onPress={onClose}>
|
||||
<Text style={styles.cancelText}>Abbrechen</Text>
|
||||
</TouchableOpacity>
|
||||
<Text style={styles.headerTitle}>Icon & Farbe wählen</Text>
|
||||
<TouchableOpacity onPress={handleSave}>
|
||||
<Text style={styles.saveText}>Fertig</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
<ScrollView style={styles.scrollView} showsVerticalScrollIndicator={false}>
|
||||
{/* Preview */}
|
||||
<View style={styles.previewSection}>
|
||||
<Text style={styles.sectionTitle}>Vorschau</Text>
|
||||
<View style={[styles.previewIcon, { backgroundColor: selectedColor + '20' }]}>
|
||||
<Text style={styles.previewEmoji}>{selectedIcon}</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Color Selection */}
|
||||
<View style={styles.section}>
|
||||
<Text style={styles.sectionTitle}>Farbe</Text>
|
||||
<View style={styles.colorGrid}>
|
||||
{COLORS.map((color) => (
|
||||
<TouchableOpacity
|
||||
key={color}
|
||||
style={[
|
||||
styles.colorOption,
|
||||
{ backgroundColor: color },
|
||||
selectedColor === color && styles.colorOptionSelected,
|
||||
]}
|
||||
onPress={() => setSelectedColor(color)}
|
||||
>
|
||||
{selectedColor === color && (
|
||||
<Text style={styles.checkmark}>✓</Text>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Icon Selection */}
|
||||
<View style={styles.section}>
|
||||
<Text style={styles.sectionTitle}>Icon</Text>
|
||||
<View style={styles.iconGrid}>
|
||||
{ICONS.map((icon) => (
|
||||
<TouchableOpacity
|
||||
key={icon}
|
||||
style={[
|
||||
styles.iconOption,
|
||||
selectedIcon === icon && styles.iconOptionSelected,
|
||||
]}
|
||||
onPress={() => setSelectedIcon(icon)}
|
||||
>
|
||||
<Text style={styles.iconEmoji}>{icon}</Text>
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={{ height: 40 }} />
|
||||
</ScrollView>
|
||||
</View>
|
||||
</View>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
modalOverlay: {
|
||||
flex: 1,
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.5)',
|
||||
justifyContent: 'flex-end',
|
||||
},
|
||||
modalContent: {
|
||||
backgroundColor: '#F2F2F7',
|
||||
borderTopLeftRadius: 20,
|
||||
borderTopRightRadius: 20,
|
||||
maxHeight: '80%',
|
||||
},
|
||||
header: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
padding: 20,
|
||||
paddingTop: 24,
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: '#E5E5EA',
|
||||
},
|
||||
headerTitle: {
|
||||
fontSize: 17,
|
||||
fontWeight: '600',
|
||||
color: '#000000',
|
||||
},
|
||||
cancelText: {
|
||||
fontSize: 17,
|
||||
color: '#8E8E93',
|
||||
},
|
||||
saveText: {
|
||||
fontSize: 17,
|
||||
fontWeight: '600',
|
||||
color: '#007AFF',
|
||||
},
|
||||
scrollView: {
|
||||
flex: 1,
|
||||
},
|
||||
previewSection: {
|
||||
alignItems: 'center',
|
||||
padding: 24,
|
||||
},
|
||||
section: {
|
||||
padding: 20,
|
||||
},
|
||||
sectionTitle: {
|
||||
fontSize: 15,
|
||||
fontWeight: '600',
|
||||
color: '#000000',
|
||||
marginBottom: 12,
|
||||
},
|
||||
previewIcon: {
|
||||
width: 100,
|
||||
height: 100,
|
||||
borderRadius: 20,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginTop: 12,
|
||||
},
|
||||
previewEmoji: {
|
||||
fontSize: 56,
|
||||
},
|
||||
colorGrid: {
|
||||
flexDirection: 'row',
|
||||
flexWrap: 'wrap',
|
||||
gap: 12,
|
||||
},
|
||||
colorOption: {
|
||||
width: 50,
|
||||
height: 50,
|
||||
borderRadius: 25,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
colorOptionSelected: {
|
||||
borderWidth: 3,
|
||||
borderColor: '#FFFFFF',
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
shadowOpacity: 0.3,
|
||||
shadowRadius: 4,
|
||||
elevation: 4,
|
||||
},
|
||||
checkmark: {
|
||||
color: '#FFFFFF',
|
||||
fontSize: 24,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
iconGrid: {
|
||||
flexDirection: 'row',
|
||||
flexWrap: 'wrap',
|
||||
gap: 8,
|
||||
},
|
||||
iconOption: {
|
||||
width: 60,
|
||||
height: 60,
|
||||
backgroundColor: '#FFFFFF',
|
||||
borderRadius: 12,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
iconOptionSelected: {
|
||||
backgroundColor: '#007AFF20',
|
||||
borderWidth: 2,
|
||||
borderColor: '#007AFF',
|
||||
},
|
||||
iconEmoji: {
|
||||
fontSize: 32,
|
||||
},
|
||||
});
|
||||
|
|
@ -1,14 +1,5 @@
|
|||
// TypeScript Typen für die gesamte App
|
||||
export enum ContractCategory {
|
||||
MOBILE = 'mobile',
|
||||
INTERNET = 'internet',
|
||||
STREAMING = 'streaming',
|
||||
INSURANCE = 'insurance',
|
||||
UTILITIES = 'utilities',
|
||||
GYM = 'gym',
|
||||
SUBSCRIPTIONS = 'subscriptions',
|
||||
OTHER = 'other',
|
||||
}
|
||||
export type ContractCategory = 'mobile' | 'internet' | 'streaming' | 'insurance' | 'utilities' | 'other';
|
||||
|
||||
export type BillingCycle = 'monthly' | 'quarterly' | 'yearly';
|
||||
export type ContractStatus = 'active' | 'cancelled' | 'expired';
|
||||
|
|
@ -32,24 +23,27 @@ export interface Document {
|
|||
|
||||
export interface Contract {
|
||||
id: string;
|
||||
userId: string;
|
||||
userId?: string;
|
||||
name: string;
|
||||
provider: string;
|
||||
category: ContractCategory;
|
||||
startDate: Date;
|
||||
endDate?: Date;
|
||||
startDate: string; // ISO date format YYYY-MM-DD
|
||||
endDate?: string; // ISO date format YYYY-MM-DD
|
||||
cancellationDeadline?: Date;
|
||||
noticePeriod: number; // in Monaten
|
||||
cost: number;
|
||||
cancellationPeriod?: string; // z.B. "3 Monate"
|
||||
amount: number;
|
||||
currency: string;
|
||||
billingCycle: BillingCycle;
|
||||
autoRenewal: boolean;
|
||||
notes?: string;
|
||||
documents: Document[];
|
||||
reminderEnabled: boolean;
|
||||
reminderDays: number;
|
||||
status: ContractStatus;
|
||||
createdAt: Date;
|
||||
updatedAt: Date;
|
||||
customIcon?: string; // Emoji für benutzerdefinierte Icons
|
||||
iconColor?: string; // Hex color code
|
||||
documents?: Document[];
|
||||
reminderEnabled?: boolean;
|
||||
reminderDays?: number;
|
||||
status?: ContractStatus;
|
||||
createdAt?: Date;
|
||||
updatedAt?: Date;
|
||||
}
|
||||
|
||||
export interface Notification {
|
||||
|
|
|
|||
|
|
@ -1,30 +1,10 @@
|
|||
{
|
||||
"extends": "@react-native/typescript-config/tsconfig.json",
|
||||
"extends": "expo/tsconfig.base",
|
||||
"compilerOptions": {
|
||||
"target": "esnext",
|
||||
"module": "commonjs",
|
||||
"lib": ["es2019"],
|
||||
"allowJs": true,
|
||||
"jsx": "react-native",
|
||||
"noEmit": true,
|
||||
"isolatedModules": true,
|
||||
"strict": true,
|
||||
"moduleResolution": "node",
|
||||
"resolveJsonModule": true,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"esModuleInterop": true,
|
||||
"skipLibCheck": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@modules/*": ["src/modules/*"],
|
||||
"@shared/*": ["src/shared/*"],
|
||||
"@navigation/*": ["src/navigation/*"],
|
||||
"@store/*": ["src/store/*"],
|
||||
"@config/*": ["src/config/*"],
|
||||
"@assets/*": ["assets/*"]
|
||||
}
|
||||
"strict": true
|
||||
},
|
||||
"include": ["src/**/*", "App.tsx"],
|
||||
"exclude": ["node_modules", "babel.config.js", "metro.config.js", "jest.config.js"]
|
||||
"include": [
|
||||
"**/*.ts",
|
||||
"**/*.tsx"
|
||||
]
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue