Initial Mobile
This commit is contained in:
55
mobile/app/(tabs)/_layout.tsx
Normal file
55
mobile/app/(tabs)/_layout.tsx
Normal file
@@ -0,0 +1,55 @@
|
||||
import { Redirect, Tabs } from 'expo-router';
|
||||
|
||||
import { HapticTab } from '@/components/haptic-tab';
|
||||
import { IconSymbol } from '@/components/ui/icon-symbol';
|
||||
import { Colors } from '@/constants/theme';
|
||||
import { useColorScheme } from '@/hooks/use-color-scheme';
|
||||
import { useAuth } from '@/src/providers/auth-provider';
|
||||
|
||||
export default function TabLayout() {
|
||||
const colorScheme = useColorScheme();
|
||||
const { isBootstrapping, token, requiresTenantSelection } = useAuth();
|
||||
|
||||
if (isBootstrapping) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (!token) {
|
||||
return <Redirect href="/login" />;
|
||||
}
|
||||
|
||||
if (requiresTenantSelection) {
|
||||
return <Redirect href="/tenant-select" />;
|
||||
}
|
||||
|
||||
return (
|
||||
<Tabs
|
||||
screenOptions={{
|
||||
tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
|
||||
headerShown: true,
|
||||
tabBarButton: HapticTab,
|
||||
}}>
|
||||
<Tabs.Screen
|
||||
name="index"
|
||||
options={{
|
||||
title: 'Aufgaben',
|
||||
tabBarIcon: ({ color }) => <IconSymbol size={24} name="checklist" color={color} />,
|
||||
}}
|
||||
/>
|
||||
<Tabs.Screen
|
||||
name="explore"
|
||||
options={{
|
||||
title: 'Konto',
|
||||
tabBarIcon: ({ color }) => <IconSymbol size={24} name="person.crop.circle.fill" color={color} />,
|
||||
}}
|
||||
/>
|
||||
<Tabs.Screen
|
||||
name="time"
|
||||
options={{
|
||||
title: 'Zeit',
|
||||
tabBarIcon: ({ color }) => <IconSymbol size={24} name="clock.fill" color={color} />,
|
||||
}}
|
||||
/>
|
||||
</Tabs>
|
||||
);
|
||||
}
|
||||
187
mobile/app/(tabs)/explore.tsx
Normal file
187
mobile/app/(tabs)/explore.tsx
Normal file
@@ -0,0 +1,187 @@
|
||||
import { useState } from 'react';
|
||||
import { Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
|
||||
|
||||
import { useAuth, useTokenStorageInfo } from '@/src/providers/auth-provider';
|
||||
|
||||
const PRIMARY = '#69c350';
|
||||
|
||||
export default function AccountScreen() {
|
||||
const { token, user, tenants, activeTenantId, activeTenant, switchTenant, logout } = useAuth();
|
||||
const storageInfo = useTokenStorageInfo();
|
||||
|
||||
const [switchingTenantId, setSwitchingTenantId] = useState<number | null>(null);
|
||||
const [switchError, setSwitchError] = useState<string | null>(null);
|
||||
|
||||
const userId = String(user?.id || 'unbekannt');
|
||||
|
||||
async function onSwitchTenant(tenantId: number) {
|
||||
setSwitchingTenantId(tenantId);
|
||||
setSwitchError(null);
|
||||
|
||||
try {
|
||||
await switchTenant(tenantId);
|
||||
} catch (err) {
|
||||
setSwitchError(err instanceof Error ? err.message : 'Tenant konnte nicht gewechselt werden.');
|
||||
} finally {
|
||||
setSwitchingTenantId(null);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<ScrollView contentContainerStyle={styles.container}>
|
||||
<Text style={styles.title}>Konto</Text>
|
||||
<Text style={styles.subtitle}>Session-Infos und Tenant-Wechsel.</Text>
|
||||
|
||||
<View style={styles.card}>
|
||||
<Text style={styles.label}>Token vorhanden</Text>
|
||||
<Text style={styles.value}>{token ? 'ja' : 'nein'}</Text>
|
||||
|
||||
<Text style={styles.label}>User ID</Text>
|
||||
<Text style={styles.value}>{userId}</Text>
|
||||
|
||||
<Text style={styles.label}>Aktiver Tenant</Text>
|
||||
<Text style={styles.value}>{activeTenant ? `${activeTenant.name} (#${activeTenantId})` : 'nicht gesetzt'}</Text>
|
||||
|
||||
<Text style={styles.label}>Storage Modus</Text>
|
||||
<Text style={styles.value}>{storageInfo.mode}</Text>
|
||||
</View>
|
||||
|
||||
<View style={styles.card}>
|
||||
<Text style={styles.sectionTitle}>Tenant wechseln</Text>
|
||||
|
||||
{switchError ? <Text style={styles.error}>{switchError}</Text> : null}
|
||||
|
||||
{tenants.map((tenant) => {
|
||||
const tenantId = Number(tenant.id);
|
||||
const isActive = tenantId === activeTenantId;
|
||||
const isSwitching = switchingTenantId === tenantId;
|
||||
|
||||
return (
|
||||
<Pressable
|
||||
key={String(tenant.id)}
|
||||
style={[
|
||||
styles.tenantButton,
|
||||
isActive ? styles.tenantButtonActive : null,
|
||||
isSwitching ? styles.tenantButtonDisabled : null,
|
||||
]}
|
||||
onPress={() => onSwitchTenant(tenantId)}
|
||||
disabled={isActive || switchingTenantId !== null}>
|
||||
<View style={styles.tenantInfo}>
|
||||
<Text style={styles.tenantName} numberOfLines={2} ellipsizeMode="tail">
|
||||
{tenant.name}
|
||||
</Text>
|
||||
<Text style={styles.tenantMeta}>ID: {tenantId}</Text>
|
||||
</View>
|
||||
<View style={styles.tenantActionWrap}>
|
||||
<Text style={styles.tenantAction}>{isActive ? 'Aktiv' : isSwitching ? 'Wechsel...' : 'Wechseln'}</Text>
|
||||
</View>
|
||||
</Pressable>
|
||||
);
|
||||
})}
|
||||
</View>
|
||||
|
||||
<Pressable style={styles.logoutButton} onPress={logout}>
|
||||
<Text style={styles.logoutText}>Logout</Text>
|
||||
</Pressable>
|
||||
</ScrollView>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flexGrow: 1,
|
||||
backgroundColor: '#f9fafb',
|
||||
padding: 16,
|
||||
gap: 12,
|
||||
},
|
||||
title: {
|
||||
fontSize: 24,
|
||||
fontWeight: '700',
|
||||
color: '#111827',
|
||||
},
|
||||
subtitle: {
|
||||
color: '#6b7280',
|
||||
},
|
||||
card: {
|
||||
backgroundColor: '#ffffff',
|
||||
borderRadius: 12,
|
||||
padding: 14,
|
||||
borderWidth: 1,
|
||||
borderColor: '#e5e7eb',
|
||||
gap: 8,
|
||||
},
|
||||
sectionTitle: {
|
||||
fontSize: 16,
|
||||
fontWeight: '600',
|
||||
color: '#111827',
|
||||
marginBottom: 2,
|
||||
},
|
||||
label: {
|
||||
fontSize: 12,
|
||||
color: '#6b7280',
|
||||
textTransform: 'uppercase',
|
||||
},
|
||||
value: {
|
||||
fontSize: 16,
|
||||
color: '#111827',
|
||||
marginBottom: 2,
|
||||
},
|
||||
error: {
|
||||
color: '#dc2626',
|
||||
marginBottom: 4,
|
||||
},
|
||||
tenantButton: {
|
||||
borderRadius: 10,
|
||||
padding: 12,
|
||||
borderWidth: 1,
|
||||
borderColor: '#d1d5db',
|
||||
backgroundColor: '#ffffff',
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
},
|
||||
tenantButtonActive: {
|
||||
borderColor: PRIMARY,
|
||||
backgroundColor: '#eff9ea',
|
||||
},
|
||||
tenantButtonDisabled: {
|
||||
opacity: 0.6,
|
||||
},
|
||||
tenantInfo: {
|
||||
flex: 1,
|
||||
minWidth: 0,
|
||||
paddingRight: 10,
|
||||
},
|
||||
tenantName: {
|
||||
fontSize: 15,
|
||||
fontWeight: '600',
|
||||
color: '#111827',
|
||||
flexShrink: 1,
|
||||
},
|
||||
tenantMeta: {
|
||||
color: '#6b7280',
|
||||
marginTop: 3,
|
||||
},
|
||||
tenantActionWrap: {
|
||||
minWidth: 84,
|
||||
alignItems: 'flex-end',
|
||||
},
|
||||
tenantAction: {
|
||||
color: PRIMARY,
|
||||
fontWeight: '600',
|
||||
textAlign: 'right',
|
||||
},
|
||||
logoutButton: {
|
||||
marginTop: 4,
|
||||
backgroundColor: '#dc2626',
|
||||
minHeight: 44,
|
||||
borderRadius: 10,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
logoutText: {
|
||||
color: '#ffffff',
|
||||
fontWeight: '600',
|
||||
fontSize: 16,
|
||||
},
|
||||
});
|
||||
567
mobile/app/(tabs)/index.tsx
Normal file
567
mobile/app/(tabs)/index.tsx
Normal file
@@ -0,0 +1,567 @@
|
||||
import { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import {
|
||||
ActivityIndicator,
|
||||
KeyboardAvoidingView,
|
||||
Modal,
|
||||
Platform,
|
||||
Pressable,
|
||||
RefreshControl,
|
||||
ScrollView,
|
||||
StyleSheet,
|
||||
Text,
|
||||
TextInput,
|
||||
View,
|
||||
} from 'react-native';
|
||||
|
||||
import { createTask, fetchTasks, fetchTenantProfiles, Task, TaskStatus, updateTask } from '@/src/lib/api';
|
||||
import { useAuth } from '@/src/providers/auth-provider';
|
||||
|
||||
const STATUSES: TaskStatus[] = ['Offen', 'In Bearbeitung', 'Abgeschlossen'];
|
||||
const PRIMARY = '#69c350';
|
||||
|
||||
function normalizeStatus(status: unknown): TaskStatus {
|
||||
if (status === 'In Bearbeitung' || status === 'Abgeschlossen') return status;
|
||||
return 'Offen';
|
||||
}
|
||||
|
||||
function getTaskAssigneeId(task: Task): string | null {
|
||||
return (task.userId || task.user_id || task.profile || null) as string | null;
|
||||
}
|
||||
|
||||
export default function TasksScreen() {
|
||||
const { token, user, activeTenantId } = useAuth();
|
||||
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [refreshing, setRefreshing] = useState(false);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [updatingTaskId, setUpdatingTaskId] = useState<number | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const [tasks, setTasks] = useState<Task[]>([]);
|
||||
const [profiles, setProfiles] = useState<{ id: string; label: string }[]>([]);
|
||||
|
||||
const [search, setSearch] = useState('');
|
||||
const [statusFilter, setStatusFilter] = useState<'Alle' | TaskStatus>('Alle');
|
||||
const [showCompleted, setShowCompleted] = useState(false);
|
||||
|
||||
const [showSearchPanel, setShowSearchPanel] = useState(false);
|
||||
const [showFilterPanel, setShowFilterPanel] = useState(false);
|
||||
|
||||
const [createModalOpen, setCreateModalOpen] = useState(false);
|
||||
const [createError, setCreateError] = useState<string | null>(null);
|
||||
const [newTaskName, setNewTaskName] = useState('');
|
||||
const [newTaskDescription, setNewTaskDescription] = useState('');
|
||||
|
||||
const currentUserId = useMemo(() => (user?.id ? String(user.id) : null), [user]);
|
||||
|
||||
const filteredTasks = useMemo(() => {
|
||||
const needle = search.trim().toLowerCase();
|
||||
|
||||
return tasks
|
||||
.filter((task) => {
|
||||
const status = normalizeStatus(task.categorie);
|
||||
if (!showCompleted && status === 'Abgeschlossen') return false;
|
||||
const statusMatch = statusFilter === 'Alle' || status === statusFilter;
|
||||
const textMatch =
|
||||
!needle ||
|
||||
[task.name, task.description, task.categorie].some((value) =>
|
||||
String(value || '').toLowerCase().includes(needle)
|
||||
);
|
||||
return statusMatch && textMatch;
|
||||
})
|
||||
.sort((a, b) => Number(a.id) - Number(b.id));
|
||||
}, [search, showCompleted, statusFilter, tasks]);
|
||||
|
||||
function getAssigneeLabel(task: Task): string {
|
||||
const assigneeId = getTaskAssigneeId(task);
|
||||
if (!assigneeId) return '-';
|
||||
return profiles.find((profile) => profile.id === assigneeId)?.label || assigneeId;
|
||||
}
|
||||
|
||||
const loadTasks = useCallback(
|
||||
async (showSpinner = true) => {
|
||||
if (!token) return;
|
||||
|
||||
if (showSpinner) setLoading(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
const [taskRows, profileRows] = await Promise.all([fetchTasks(token), fetchTenantProfiles(token)]);
|
||||
setTasks(taskRows || []);
|
||||
setProfiles(
|
||||
(profileRows || [])
|
||||
.map((profile) => {
|
||||
const id = profile.user_id || (profile.id ? String(profile.id) : null);
|
||||
const label = profile.full_name || profile.fullName || profile.email || id;
|
||||
return id ? { id: String(id), label: String(label || id) } : null;
|
||||
})
|
||||
.filter((value): value is { id: string; label: string } => Boolean(value))
|
||||
);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Aufgaben konnten nicht geladen werden.');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
setRefreshing(false);
|
||||
}
|
||||
},
|
||||
[token]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (!token || !activeTenantId) return;
|
||||
void loadTasks(true);
|
||||
}, [token, activeTenantId, loadTasks]);
|
||||
|
||||
async function onRefresh() {
|
||||
if (!token) return;
|
||||
setRefreshing(true);
|
||||
await loadTasks(false);
|
||||
}
|
||||
|
||||
function closeCreateModal() {
|
||||
setCreateModalOpen(false);
|
||||
setCreateError(null);
|
||||
setNewTaskName('');
|
||||
setNewTaskDescription('');
|
||||
}
|
||||
|
||||
async function onCreateTask() {
|
||||
if (!token) return;
|
||||
|
||||
const name = newTaskName.trim();
|
||||
if (!name) {
|
||||
setCreateError('Bitte einen Aufgabennamen eingeben.');
|
||||
return;
|
||||
}
|
||||
|
||||
setSaving(true);
|
||||
setCreateError(null);
|
||||
|
||||
try {
|
||||
await createTask(token, {
|
||||
name,
|
||||
description: newTaskDescription.trim() || null,
|
||||
categorie: 'Offen',
|
||||
userId: currentUserId,
|
||||
});
|
||||
|
||||
closeCreateModal();
|
||||
await loadTasks(false);
|
||||
} catch (err) {
|
||||
setCreateError(err instanceof Error ? err.message : 'Aufgabe konnte nicht erstellt werden.');
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function setTaskStatus(task: Task, status: TaskStatus) {
|
||||
if (!token || !task?.id) return;
|
||||
if (normalizeStatus(task.categorie) === status) return;
|
||||
|
||||
setUpdatingTaskId(Number(task.id));
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
await updateTask(token, Number(task.id), { categorie: status });
|
||||
setTasks((prev) => prev.map((item) => (item.id === task.id ? { ...item, categorie: status } : item)));
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Status konnte nicht gesetzt werden.');
|
||||
} finally {
|
||||
setUpdatingTaskId(null);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<View style={styles.screen}>
|
||||
<ScrollView
|
||||
contentContainerStyle={styles.container}
|
||||
refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />}>
|
||||
<View style={styles.topActions}>
|
||||
<Pressable
|
||||
style={[styles.topActionButton, showSearchPanel ? styles.topActionButtonActive : null]}
|
||||
onPress={() => setShowSearchPanel((prev) => !prev)}>
|
||||
<Text style={[styles.topActionText, showSearchPanel ? styles.topActionTextActive : null]}>Suche</Text>
|
||||
</Pressable>
|
||||
<Pressable
|
||||
style={[styles.topActionButton, showFilterPanel ? styles.topActionButtonActive : null]}
|
||||
onPress={() => setShowFilterPanel((prev) => !prev)}>
|
||||
<Text style={[styles.topActionText, showFilterPanel ? styles.topActionTextActive : null]}>Filter</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
|
||||
{showSearchPanel ? (
|
||||
<View style={styles.panel}>
|
||||
<TextInput
|
||||
placeholder="Suche"
|
||||
placeholderTextColor="#9ca3af"
|
||||
style={styles.input}
|
||||
value={search}
|
||||
onChangeText={setSearch}
|
||||
/>
|
||||
</View>
|
||||
) : null}
|
||||
|
||||
{showFilterPanel ? (
|
||||
<View style={styles.panel}>
|
||||
<View style={styles.filterRow}>
|
||||
{(['Alle', 'Offen', 'In Bearbeitung'] as const).map((status) => (
|
||||
<Pressable
|
||||
key={status}
|
||||
style={[styles.filterChip, statusFilter === status ? styles.filterChipActive : null]}
|
||||
onPress={() => setStatusFilter(status)}>
|
||||
<Text
|
||||
style={[
|
||||
styles.filterChipText,
|
||||
statusFilter === status ? styles.filterChipTextActive : null,
|
||||
]}>
|
||||
{status}
|
||||
</Text>
|
||||
</Pressable>
|
||||
))}
|
||||
<Pressable
|
||||
style={[styles.filterChip, showCompleted ? styles.filterChipActive : null]}
|
||||
onPress={() => setShowCompleted((prev) => !prev)}>
|
||||
<Text style={[styles.filterChipText, showCompleted ? styles.filterChipTextActive : null]}>
|
||||
Abgeschlossene anzeigen
|
||||
</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
</View>
|
||||
) : null}
|
||||
|
||||
{error ? <Text style={styles.error}>{error}</Text> : null}
|
||||
|
||||
{loading ? (
|
||||
<View style={styles.loadingBox}>
|
||||
<ActivityIndicator />
|
||||
<Text style={styles.loadingText}>Aufgaben werden geladen...</Text>
|
||||
</View>
|
||||
) : null}
|
||||
|
||||
{!loading && filteredTasks.length === 0 ? (
|
||||
<Text style={styles.empty}>Keine Aufgaben gefunden.</Text>
|
||||
) : null}
|
||||
|
||||
{!loading &&
|
||||
filteredTasks.map((task) => {
|
||||
const status = normalizeStatus(task.categorie);
|
||||
const isUpdating = updatingTaskId === Number(task.id);
|
||||
|
||||
return (
|
||||
<View key={String(task.id)} style={styles.taskCard}>
|
||||
<View style={styles.taskHeader}>
|
||||
<Text style={styles.taskTitle} numberOfLines={2}>
|
||||
{task.name}
|
||||
</Text>
|
||||
<Text style={styles.statusBadge}>{status}</Text>
|
||||
</View>
|
||||
|
||||
{task.description ? (
|
||||
<Text style={styles.taskDescription} numberOfLines={3}>
|
||||
{task.description}
|
||||
</Text>
|
||||
) : null}
|
||||
|
||||
<Text style={styles.taskMeta}>Zuweisung: {getAssigneeLabel(task)}</Text>
|
||||
|
||||
<View style={styles.actionRow}>
|
||||
{STATUSES.map((nextStatus) => (
|
||||
<Pressable
|
||||
key={nextStatus}
|
||||
style={[
|
||||
styles.actionButton,
|
||||
nextStatus === status ? styles.actionButtonActive : null,
|
||||
isUpdating ? styles.buttonDisabled : null,
|
||||
]}
|
||||
onPress={() => setTaskStatus(task, nextStatus)}
|
||||
disabled={isUpdating || nextStatus === status}>
|
||||
<Text style={styles.actionButtonText}>{nextStatus}</Text>
|
||||
</Pressable>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
})}
|
||||
</ScrollView>
|
||||
|
||||
<Pressable style={styles.fab} onPress={() => setCreateModalOpen(true)}>
|
||||
<Text style={styles.fabText}>+</Text>
|
||||
</Pressable>
|
||||
|
||||
<Modal visible={createModalOpen} transparent animationType="fade" onRequestClose={closeCreateModal}>
|
||||
<View style={styles.modalOverlay}>
|
||||
<KeyboardAvoidingView
|
||||
behavior={Platform.OS === 'ios' ? 'padding' : undefined}
|
||||
style={styles.modalKeyboardWrap}>
|
||||
<View style={styles.modalCard}>
|
||||
<Text style={styles.modalTitle}>Neue Aufgabe</Text>
|
||||
|
||||
<TextInput
|
||||
placeholder="Titel"
|
||||
placeholderTextColor="#9ca3af"
|
||||
style={styles.input}
|
||||
value={newTaskName}
|
||||
onChangeText={setNewTaskName}
|
||||
/>
|
||||
<TextInput
|
||||
placeholder="Beschreibung (optional)"
|
||||
placeholderTextColor="#9ca3af"
|
||||
style={[styles.input, styles.inputMultiline]}
|
||||
multiline
|
||||
value={newTaskDescription}
|
||||
onChangeText={setNewTaskDescription}
|
||||
/>
|
||||
|
||||
{createError ? <Text style={styles.error}>{createError}</Text> : null}
|
||||
|
||||
<View style={styles.modalActions}>
|
||||
<Pressable style={styles.secondaryButton} onPress={closeCreateModal} disabled={saving}>
|
||||
<Text style={styles.secondaryButtonText}>Abbrechen</Text>
|
||||
</Pressable>
|
||||
<Pressable
|
||||
style={[styles.primaryButton, saving ? styles.buttonDisabled : null]}
|
||||
onPress={onCreateTask}
|
||||
disabled={saving}>
|
||||
<Text style={styles.primaryButtonText}>{saving ? 'Speichere...' : 'Anlegen'}</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
</View>
|
||||
</KeyboardAvoidingView>
|
||||
</View>
|
||||
</Modal>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
screen: {
|
||||
flex: 1,
|
||||
backgroundColor: '#f9fafb',
|
||||
},
|
||||
container: {
|
||||
padding: 16,
|
||||
gap: 12,
|
||||
paddingBottom: 96,
|
||||
},
|
||||
topActions: {
|
||||
flexDirection: 'row',
|
||||
gap: 8,
|
||||
},
|
||||
topActionButton: {
|
||||
borderWidth: 1,
|
||||
borderColor: '#d1d5db',
|
||||
borderRadius: 10,
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 8,
|
||||
backgroundColor: '#ffffff',
|
||||
},
|
||||
topActionButtonActive: {
|
||||
borderColor: PRIMARY,
|
||||
backgroundColor: '#eff9ea',
|
||||
},
|
||||
topActionText: {
|
||||
color: '#374151',
|
||||
fontWeight: '600',
|
||||
},
|
||||
topActionTextActive: {
|
||||
color: '#3d7a30',
|
||||
},
|
||||
panel: {
|
||||
backgroundColor: '#ffffff',
|
||||
borderRadius: 12,
|
||||
padding: 12,
|
||||
borderWidth: 1,
|
||||
borderColor: '#e5e7eb',
|
||||
},
|
||||
input: {
|
||||
borderWidth: 1,
|
||||
borderColor: '#d1d5db',
|
||||
borderRadius: 10,
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 10,
|
||||
fontSize: 15,
|
||||
color: '#111827',
|
||||
backgroundColor: '#ffffff',
|
||||
},
|
||||
inputMultiline: {
|
||||
minHeight: 72,
|
||||
textAlignVertical: 'top',
|
||||
},
|
||||
filterRow: {
|
||||
flexDirection: 'row',
|
||||
flexWrap: 'wrap',
|
||||
gap: 8,
|
||||
},
|
||||
filterChip: {
|
||||
borderRadius: 999,
|
||||
borderWidth: 1,
|
||||
borderColor: '#d1d5db',
|
||||
paddingHorizontal: 10,
|
||||
paddingVertical: 6,
|
||||
backgroundColor: '#ffffff',
|
||||
},
|
||||
filterChipActive: {
|
||||
borderColor: PRIMARY,
|
||||
backgroundColor: '#eff9ea',
|
||||
},
|
||||
filterChipText: {
|
||||
color: '#374151',
|
||||
fontSize: 13,
|
||||
fontWeight: '500',
|
||||
},
|
||||
filterChipTextActive: {
|
||||
color: '#3d7a30',
|
||||
},
|
||||
error: {
|
||||
color: '#dc2626',
|
||||
fontSize: 13,
|
||||
},
|
||||
loadingBox: {
|
||||
padding: 16,
|
||||
alignItems: 'center',
|
||||
gap: 8,
|
||||
},
|
||||
loadingText: {
|
||||
color: '#6b7280',
|
||||
},
|
||||
empty: {
|
||||
color: '#6b7280',
|
||||
textAlign: 'center',
|
||||
paddingVertical: 16,
|
||||
},
|
||||
taskCard: {
|
||||
backgroundColor: '#ffffff',
|
||||
borderRadius: 12,
|
||||
padding: 12,
|
||||
gap: 8,
|
||||
borderWidth: 1,
|
||||
borderColor: '#e5e7eb',
|
||||
},
|
||||
taskHeader: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'flex-start',
|
||||
gap: 8,
|
||||
},
|
||||
taskTitle: {
|
||||
flex: 1,
|
||||
color: '#111827',
|
||||
fontSize: 16,
|
||||
fontWeight: '600',
|
||||
},
|
||||
statusBadge: {
|
||||
color: '#3d7a30',
|
||||
backgroundColor: '#eff9ea',
|
||||
borderRadius: 999,
|
||||
paddingHorizontal: 8,
|
||||
paddingVertical: 4,
|
||||
fontSize: 12,
|
||||
overflow: 'hidden',
|
||||
},
|
||||
taskDescription: {
|
||||
color: '#374151',
|
||||
fontSize: 14,
|
||||
},
|
||||
taskMeta: {
|
||||
color: '#6b7280',
|
||||
fontSize: 12,
|
||||
},
|
||||
actionRow: {
|
||||
flexDirection: 'row',
|
||||
gap: 8,
|
||||
flexWrap: 'wrap',
|
||||
},
|
||||
actionButton: {
|
||||
borderRadius: 8,
|
||||
borderWidth: 1,
|
||||
borderColor: '#d1d5db',
|
||||
backgroundColor: '#ffffff',
|
||||
paddingHorizontal: 10,
|
||||
paddingVertical: 7,
|
||||
},
|
||||
actionButtonActive: {
|
||||
borderColor: PRIMARY,
|
||||
backgroundColor: '#eff9ea',
|
||||
},
|
||||
actionButtonText: {
|
||||
color: '#1f2937',
|
||||
fontSize: 12,
|
||||
fontWeight: '500',
|
||||
},
|
||||
fab: {
|
||||
position: 'absolute',
|
||||
right: 18,
|
||||
bottom: 24,
|
||||
width: 56,
|
||||
height: 56,
|
||||
borderRadius: 28,
|
||||
backgroundColor: PRIMARY,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
elevation: 4,
|
||||
shadowColor: '#111827',
|
||||
shadowOpacity: 0.18,
|
||||
shadowRadius: 10,
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
},
|
||||
fabText: {
|
||||
color: '#ffffff',
|
||||
fontSize: 30,
|
||||
lineHeight: 30,
|
||||
fontWeight: '500',
|
||||
marginTop: -1,
|
||||
},
|
||||
modalOverlay: {
|
||||
flex: 1,
|
||||
backgroundColor: 'rgba(0,0,0,0.35)',
|
||||
justifyContent: 'center',
|
||||
padding: 16,
|
||||
},
|
||||
modalKeyboardWrap: {
|
||||
width: '100%',
|
||||
},
|
||||
modalCard: {
|
||||
backgroundColor: '#ffffff',
|
||||
borderRadius: 14,
|
||||
padding: 14,
|
||||
gap: 10,
|
||||
},
|
||||
modalTitle: {
|
||||
fontSize: 18,
|
||||
fontWeight: '700',
|
||||
color: '#111827',
|
||||
},
|
||||
modalActions: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'flex-end',
|
||||
gap: 8,
|
||||
marginTop: 2,
|
||||
},
|
||||
secondaryButton: {
|
||||
minHeight: 42,
|
||||
borderRadius: 10,
|
||||
paddingHorizontal: 14,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
backgroundColor: '#e5e7eb',
|
||||
},
|
||||
secondaryButtonText: {
|
||||
color: '#111827',
|
||||
fontWeight: '600',
|
||||
},
|
||||
primaryButton: {
|
||||
minHeight: 42,
|
||||
borderRadius: 10,
|
||||
paddingHorizontal: 14,
|
||||
backgroundColor: PRIMARY,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
primaryButtonText: {
|
||||
color: '#ffffff',
|
||||
fontWeight: '600',
|
||||
},
|
||||
buttonDisabled: {
|
||||
opacity: 0.6,
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user