kibin/territory-log
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Sprint 5 - Toast, ConfirmDialog, EmptyStates, Settings, Export/Import, Accessibility (TERLOG-52/53/54/55/56/57/58/59)

Browse Source
This commit is contained in:
root
2026-02-19 22:05:40 +08:00
parent 6fe6ebef13
commit c8fe67f346
20 changed files with 1416 additions and 619 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
components/contacts/AddContactSheet.tsx
View File

@@ -65,11 +65,16 @@ export function AddContactSheet({ visible, onClose, onSaved }: Props) {
<View className="flex-1 bg-secondary">
{/* Header */}
<View className="flex-row items-center justify-between px-4 py-4 border-b border-gray-200 bg-white">
<TouchableOpacity onPress={() => { reset(); onClose(); }}>
<TouchableOpacity
onPress={() => { reset(); onClose(); }}
accessibilityRole="button"
accessibilityLabel="Close"
style={{ minWidth: 44, minHeight: 44, alignItems: 'center', justifyContent: 'center' }}
>
<X size={22} color="#2C3E50" />
</TouchableOpacity>
<Text className="text-charcoal font-semibold text-lg">New Contact</Text>
<View style={{ width: 22 }} />
<View style={{ width: 44 }} />
</View>
<ScrollView className="flex-1 px-4 pt-4" keyboardShouldPersistTaps="handled">
@@ -80,7 +85,15 @@ export function AddContactSheet({ visible, onClose, onSaved }: Props) {
<Text className="text-charcoal font-medium mb-2">Status</Text>
<View className="flex-row flex-wrap gap-2 mb-4">
{STATUS_OPTIONS.map((s) => (
<TouchableOpacity key={s} onPress={() => setStatus(s)} className={`px-3 py-1.5 rounded-full border ${status === s ? 'bg-primary border-primary' : 'bg-white border-gray-200'}`}>
<TouchableOpacity
key={s}
onPress={() => setStatus(s)}
className={`px-3 py-1.5 rounded-full border ${status === s ? 'bg-primary border-primary' : 'bg-white border-gray-200'}`}
accessibilityRole="button"
accessibilityLabel={`Status: ${s}`}
accessibilityState={{ selected: status === s }}
style={{ minHeight: 36 }}
>
<Text className={`text-sm ${status === s ? 'text-white' : 'text-charcoal'}`}>{s}</Text>
</TouchableOpacity>
))}
@@ -90,7 +103,15 @@ export function AddContactSheet({ visible, onClose, onSaved }: Props) {
<Text className="text-charcoal font-medium mb-2">Category</Text>
<View className="flex-row gap-2 mb-4">
{CATEGORY_OPTIONS.map((c) => (
<TouchableOpacity key={c} onPress={() => setCategory(c)} className={`px-3 py-1.5 rounded-full border ${category === c ? 'bg-primary border-primary' : 'bg-white border-gray-200'}`}>
<TouchableOpacity
key={c}
onPress={() => setCategory(c)}
className={`px-3 py-1.5 rounded-full border ${category === c ? 'bg-primary border-primary' : 'bg-white border-gray-200'}`}
accessibilityRole="button"
accessibilityLabel={`Category: ${c}`}
accessibilityState={{ selected: category === c }}
style={{ minHeight: 36 }}
>
<Text className={`text-sm ${category === c ? 'text-white' : 'text-charcoal'}`}>{c}</Text>
</TouchableOpacity>
))}
@@ -101,6 +122,10 @@ export function AddContactSheet({ visible, onClose, onSaved }: Props) {
{/* GPS Tag */}
<TouchableOpacity
accessibilityRole="button"
accessibilityLabel={coords ? `GPS location tagged: ${coords.lat.toFixed(5)}, ${coords.lng.toFixed(5)}` : 'Tag GPS location'}
accessibilityHint="Requests location permission and tags the current GPS coordinates"
style={{ minHeight: 48 }}
onPress={async () => {
const { status } = await Location.requestForegroundPermissionsAsync();
if (status !== 'granted') { alert('Location permission denied'); return; }

10
components/contacts/ContactCard.tsx
View File

@@ -1,4 +1,4 @@
import { View, Text, TouchableOpacity } from 'react-native';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import { useRouter } from 'expo-router';
import { ChevronRight } from 'lucide-react-native';
import { Contact } from '@/store/useContactStore';
@@ -25,9 +25,13 @@ export function ContactCard({ contact, onRefresh }: Props) {
<TouchableOpacity
className="bg-white rounded-2xl p-4 flex-row items-center shadow-sm"
onPress={() => router.push({ pathname: '/contact/[id]', params: { id: contact.id } })}
accessibilityRole="button"
accessibilityLabel={`${contact.fullName}, ${contact.status}${contact.address ? `, ${contact.address}` : ''}`}
accessibilityHint="Tap to view contact details"
style={{ minHeight: 72 }}
>
<View className="w-12 h-12 rounded-full bg-primary items-center justify-center mr-3">
<Text className="text-white font-bold text-lg">{initials}</Text>
<Text className="text-white font-bold text-lg" accessibilityElementsHidden>{initials}</Text>
</View>
<View className="flex-1">
<Text className="text-charcoal font-semibold text-base" numberOfLines={1}>{contact.fullName}</Text>
@@ -36,7 +40,7 @@ export function ContactCard({ contact, onRefresh }: Props) {
<Text className={`text-xs font-medium px-2 py-0.5 rounded-full self-start ${statusStyle}`}>{contact.status}</Text>
</View>
</View>
<ChevronRight size={18} color="#9CA3AF" />
<ChevronRight size={18} color="#9CA3AF" accessibilityElementsHidden />
</TouchableOpacity>
);
}

31
components/contacts/EditContactSheet.tsx
View File

@@ -55,9 +55,16 @@ export function EditContactSheet({ contact, visible, onClose, onSaved }: Props)
<KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'} className="flex-1">
<View className="flex-1 bg-secondary">
<View className="flex-row items-center justify-between px-4 py-4 border-b border-gray-200 bg-white">
<TouchableOpacity onPress={onClose}><X size={22} color="#2C3E50" /></TouchableOpacity>
<TouchableOpacity
onPress={onClose}
accessibilityRole="button"
accessibilityLabel="Close"
style={{ minWidth: 44, minHeight: 44, alignItems: 'center', justifyContent: 'center' }}
>
<X size={22} color="#2C3E50" />
</TouchableOpacity>
<Text className="text-charcoal font-semibold text-lg">Edit Contact</Text>
<View style={{ width: 22 }} />
<View style={{ width: 44 }} />
</View>
<ScrollView className="flex-1 px-4 pt-4" keyboardShouldPersistTaps="handled">
<Input label="Full Name *" value={fullName} onChangeText={setFullName} />
@@ -65,7 +72,15 @@ export function EditContactSheet({ contact, visible, onClose, onSaved }: Props)
<Text className="text-charcoal font-medium mb-2">Status</Text>
<View className="flex-row flex-wrap gap-2 mb-4">
{STATUS_OPTIONS.map((s) => (
<TouchableOpacity key={s} onPress={() => setStatus(s as any)} className={`px-3 py-1.5 rounded-full border ${status === s ? 'bg-primary border-primary' : 'bg-white border-gray-200'}`}>
<TouchableOpacity
key={s}
onPress={() => setStatus(s as any)}
className={`px-3 py-1.5 rounded-full border ${status === s ? 'bg-primary border-primary' : 'bg-white border-gray-200'}`}
accessibilityRole="button"
accessibilityLabel={`Status: ${s}`}
accessibilityState={{ selected: status === s }}
style={{ minHeight: 36 }}
>
<Text className={`text-sm ${status === s ? 'text-white' : 'text-charcoal'}`}>{s}</Text>
</TouchableOpacity>
))}
@@ -73,7 +88,15 @@ export function EditContactSheet({ contact, visible, onClose, onSaved }: Props)
<Text className="text-charcoal font-medium mb-2">Category</Text>
<View className="flex-row gap-2 mb-4">
{CATEGORY_OPTIONS.map((c) => (
<TouchableOpacity key={c} onPress={() => setCategory(c as any)} className={`px-3 py-1.5 rounded-full border ${category === c ? 'bg-primary border-primary' : 'bg-white border-gray-200'}`}>
<TouchableOpacity
key={c}
onPress={() => setCategory(c as any)}
className={`px-3 py-1.5 rounded-full border ${category === c ? 'bg-primary border-primary' : 'bg-white border-gray-200'}`}
accessibilityRole="button"
accessibilityLabel={`Category: ${c}`}
accessibilityState={{ selected: category === c }}
style={{ minHeight: 36 }}
>
<Text className={`text-sm ${category === c ? 'text-white' : 'text-charcoal'}`}>{c}</Text>
</TouchableOpacity>
))}

11
components/territories/AddTerritorySheet.tsx
View File

@@ -50,9 +50,16 @@ export function AddTerritorySheet({ visible, onClose, onSaved }: Props) {
<KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'} className="flex-1">
<View className="flex-1 bg-secondary">
<View className="flex-row items-center justify-between px-4 py-4 border-b border-gray-200 bg-white">
<TouchableOpacity onPress={() => { reset(); onClose(); }}><X size={22} color="#2C3E50" /></TouchableOpacity>
<TouchableOpacity
onPress={() => { reset(); onClose(); }}
accessibilityRole="button"
accessibilityLabel="Close"
style={{ minWidth: 44, minHeight: 44, alignItems: 'center', justifyContent: 'center' }}
>
<X size={22} color="#2C3E50" />
</TouchableOpacity>
<Text className="text-charcoal font-semibold text-lg">New Territory</Text>
<View style={{ width: 22 }} />
<View style={{ width: 44 }} />
</View>
<ScrollView className="flex-1 px-4 pt-4" keyboardShouldPersistTaps="handled">
<Input label="Territory Code *" placeholder="e.g. T-01, A-12" value={code} onChangeText={(t) => { setCode(t); setErrors((e) => ({ ...e, code: '' })); }} error={errors.code} autoCapitalize="characters" />

11
components/territories/EditTerritorySheet.tsx
View File

@@ -40,9 +40,16 @@ export function EditTerritorySheet({ territory, visible, onClose, onSaved }: Pro
<KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'} className="flex-1">
<View className="flex-1 bg-secondary">
<View className="flex-row items-center justify-between px-4 py-4 border-b border-gray-200 bg-white">
<TouchableOpacity onPress={onClose}><X size={22} color="#2C3E50" /></TouchableOpacity>
<TouchableOpacity
onPress={onClose}
accessibilityRole="button"
accessibilityLabel="Close"
style={{ minWidth: 44, minHeight: 44, alignItems: 'center', justifyContent: 'center' }}
>
<X size={22} color="#2C3E50" />
</TouchableOpacity>
<Text className="text-charcoal font-semibold text-lg">Edit Territory</Text>
<View style={{ width: 22 }} />
<View style={{ width: 44 }} />
</View>
<ScrollView className="flex-1 px-4 pt-4" keyboardShouldPersistTaps="handled">
<View className="mb-4 bg-gray-100 rounded-xl px-4 py-3">

4
components/ui/Button.tsx
View File

@@ -26,6 +26,10 @@ export function Button({ label, onPress, variant = 'primary', loading, disabled
className={`${base} ${variants[variant]} ${disabled || loading ? 'opacity-50' : ''}`}
onPress={onPress}
disabled={disabled || loading}
accessibilityRole="button"
accessibilityLabel={label}
accessibilityState={{ disabled: !!(disabled || loading) }}
style={{ minHeight: 52 }}
>
{loading ? (
<ActivityIndicator color={variant === 'secondary' ? '#1A6B72' : 'white'} />

166
components/ui/ConfirmDialog.tsx Normal file
View File

@@ -0,0 +1,166 @@
import { Modal, View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import { AlertTriangle } from 'lucide-react-native';
interface Props {
visible: boolean;
title: string;
message: string;
confirmText?: string;
confirmStyle?: 'danger' | 'default';
onConfirm: () => void;
onCancel: () => void;
impactCount?: number;
}
export function ConfirmDialog({
visible,
title,
message,
confirmText = 'Confirm',
confirmStyle = 'default',
onConfirm,
onCancel,
impactCount,
}: Props) {
const isDanger = confirmStyle === 'danger';
return (
<Modal
visible={visible}
transparent
animationType="fade"
onRequestClose={onCancel}
accessibilityViewIsModal
>
<View style={styles.overlay}>
<View
style={styles.dialog}
accessibilityRole="alert"
accessibilityLabel={title}
>
{isDanger && (
<View style={styles.iconWrap}>
<AlertTriangle size={28} color="#C0392B" />
</View>
)}
<Text style={styles.title}>{title}</Text>
<Text style={styles.message}>{message}</Text>
{impactCount !== undefined && impactCount > 0 && (
<View style={styles.impactBadge}>
<Text style={styles.impactText}>
This will affect {impactCount} record{impactCount !== 1 ? 's' : ''}
</Text>
</View>
)}
<View style={styles.buttons}>
<TouchableOpacity
style={[styles.btn, styles.cancelBtn]}
onPress={onCancel}
accessibilityRole="button"
accessibilityLabel="Cancel"
>
<Text style={styles.cancelText}>Cancel</Text>
</TouchableOpacity>
<TouchableOpacity
style={[styles.btn, isDanger ? styles.dangerBtn : styles.confirmBtn]}
onPress={onConfirm}
accessibilityRole="button"
accessibilityLabel={confirmText}
>
<Text style={styles.confirmText}>{confirmText}</Text>
</TouchableOpacity>
</View>
</View>
</View>
</Modal>
);
}
const styles = StyleSheet.create({
overlay: {
flex: 1,
backgroundColor: 'rgba(0,0,0,0.5)',
justifyContent: 'center',
alignItems: 'center',
paddingHorizontal: 24,
},
dialog: {
backgroundColor: 'white',
borderRadius: 20,
padding: 24,
width: '100%',
maxWidth: 400,
shadowColor: '#000',
shadowOffset: { width: 0, height: 8 },
shadowOpacity: 0.2,
shadowRadius: 16,
elevation: 10,
},
iconWrap: {
alignItems: 'center',
marginBottom: 12,
},
title: {
fontSize: 18,
fontWeight: '700',
color: '#2C3E50',
textAlign: 'center',
marginBottom: 8,
},
message: {
fontSize: 14,
color: '#6B7280',
textAlign: 'center',
lineHeight: 20,
marginBottom: 12,
},
impactBadge: {
backgroundColor: '#FEF3C7',
borderRadius: 8,
paddingVertical: 8,
paddingHorizontal: 12,
marginBottom: 20,
alignItems: 'center',
},
impactText: {
fontSize: 12,
color: '#92400E',
fontWeight: '500',
},
buttons: {
flexDirection: 'row',
gap: 12,
marginTop: 4,
},
btn: {
flex: 1,
paddingVertical: 14,
borderRadius: 12,
alignItems: 'center',
minHeight: 48,
justifyContent: 'center',
},
cancelBtn: {
backgroundColor: '#F3F4F6',
},
confirmBtn: {
backgroundColor: '#1A6B72',
},
dangerBtn: {
backgroundColor: '#C0392B',
},
cancelText: {
fontSize: 15,
fontWeight: '600',
color: '#374151',
},
confirmText: {
fontSize: 15,
fontWeight: '600',
color: 'white',
},
});

12
components/ui/DatePicker.tsx
View File

@@ -40,6 +40,10 @@ export function DatePicker({ label, value, onChange }: Props) {
<TouchableOpacity
onPress={() => setShow(true)}
className="flex-row items-center border border-gray-200 rounded-xl px-4 py-3 bg-white"
accessibilityRole="button"
accessibilityLabel={label ? `${label}: ${displayDate}` : displayDate}
accessibilityHint="Opens date picker"
style={{ minHeight: 48 }}
>
<Calendar size={16} color="#1A6B72" />
<Text className={`ml-2 flex-1 ${value ? 'text-charcoal' : 'text-gray-400'}`}>{displayDate}</Text>
@@ -88,7 +92,13 @@ export function DatePicker({ label, value, onChange }: Props) {
</View>
</View>
<TouchableOpacity onPress={handleConfirm} className="bg-primary rounded-xl py-4">
<TouchableOpacity
onPress={handleConfirm}
className="bg-primary rounded-xl py-4"
accessibilityRole="button"
accessibilityLabel="Confirm date selection"
style={{ minHeight: 52 }}
>
<Text className="text-white text-center font-semibold text-base">Confirm</Text>
</TouchableOpacity>
</View>

107
components/ui/EmptyState.tsx Normal file
View File

@@ -0,0 +1,107 @@
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import {
Users, MapPin, Map, Calendar, BookOpen, Settings,
Inbox, FileText, Bell, Star, Heart, Search,
Package, Archive, List, Clipboard, Tag, Shield,
type LucideIcon,
} from 'lucide-react-native';
// Map of icon name strings to actual components
const ICON_MAP: Record<string, LucideIcon> = {
Users,
MapPin,
Map,
Calendar,
BookOpen,
Settings,
Inbox,
FileText,
Bell,
Star,
Heart,
Search,
Package,
Archive,
List,
Clipboard,
Tag,
Shield,
};
interface Props {
icon?: string;
title: string;
message?: string;
actionLabel?: string;
onAction?: () => void;
}
export function EmptyState({ icon, title, message, actionLabel, onAction }: Props) {
const IconComponent = icon ? ICON_MAP[icon] ?? Inbox : Inbox;
return (
<View style={styles.container} accessibilityRole="text" accessibilityLabel={title}>
<View style={styles.iconWrap}>
<IconComponent size={40} color="#9CA3AF" strokeWidth={1.5} />
</View>
<Text style={styles.title}>{title}</Text>
{message ? <Text style={styles.message}>{message}</Text> : null}
{actionLabel && onAction ? (
<TouchableOpacity
style={styles.button}
onPress={onAction}
accessibilityRole="button"
accessibilityLabel={actionLabel}
>
<Text style={styles.buttonText}>{actionLabel}</Text>
</TouchableOpacity>
) : null}
</View>
);
}
const styles = StyleSheet.create({
container: {
alignItems: 'center',
justifyContent: 'center',
paddingVertical: 60,
paddingHorizontal: 32,
},
iconWrap: {
width: 80,
height: 80,
borderRadius: 40,
backgroundColor: '#F3F4F6',
alignItems: 'center',
justifyContent: 'center',
marginBottom: 16,
},
title: {
fontSize: 17,
fontWeight: '600',
color: '#374151',
textAlign: 'center',
marginBottom: 6,
},
message: {
fontSize: 14,
color: '#9CA3AF',
textAlign: 'center',
lineHeight: 20,
marginBottom: 20,
},
button: {
backgroundColor: '#1A6B72',
paddingVertical: 12,
paddingHorizontal: 28,
borderRadius: 12,
minHeight: 44,
alignItems: 'center',
justifyContent: 'center',
},
buttonText: {
color: 'white',
fontWeight: '600',
fontSize: 14,
},
});

2
components/ui/Input.tsx
View File

@@ -14,6 +14,8 @@ export function Input({ label, error, ...props }: InputProps) {
error ? 'border-danger' : 'border-gray-200'
}`}
placeholderTextColor="#9CA3AF"
accessibilityLabel={label}
style={{ minHeight: 48 }}
{...props}
/>
{error && <Text className="text-danger text-sm mt-1">{error}</Text>}

127
components/ui/Toast.tsx Normal file
View File

@@ -0,0 +1,127 @@
import React, { createContext, useContext, useState, useCallback, useRef } from 'react';
import { View, Text, Animated, TouchableOpacity, StyleSheet } from 'react-native';
import { CheckCircle, AlertTriangle, XCircle, X } from 'lucide-react-native';
export type ToastType = 'success' | 'warning' | 'error';
interface Toast {
id: string;
message: string;
type: ToastType;
}
interface ToastContextValue {
showToast: (message: string, type?: ToastType) => void;
}
const ToastContext = createContext<ToastContextValue>({ showToast: () => {} });
const COLORS: Record<ToastType, string> = {
success: '#4CAF7D',
warning: '#D4A843',
error: '#C0392B',
};
function ToastItem({ toast, onDismiss }: { toast: Toast; onDismiss: (id: string) => void }) {
const opacity = useRef(new Animated.Value(0)).current;
const translateY = useRef(new Animated.Value(-20)).current;
React.useEffect(() => {
Animated.parallel([
Animated.timing(opacity, { toValue: 1, duration: 250, useNativeDriver: true }),
Animated.timing(translateY, { toValue: 0, duration: 250, useNativeDriver: true }),
]).start();
const timer = setTimeout(() => dismiss(), 3000);
return () => clearTimeout(timer);
}, []);
function dismiss() {
Animated.parallel([
Animated.timing(opacity, { toValue: 0, duration: 200, useNativeDriver: true }),
Animated.timing(translateY, { toValue: -20, duration: 200, useNativeDriver: true }),
]).start(() => onDismiss(toast.id));
}
const color = COLORS[toast.type];
const Icon = toast.type === 'success' ? CheckCircle : toast.type === 'warning' ? AlertTriangle : XCircle;
return (
<Animated.View
style={[styles.toast, { backgroundColor: color, opacity, transform: [{ translateY }] }]}
accessibilityRole="alert"
accessibilityLabel={`${toast.type}: ${toast.message}`}
>
<Icon size={18} color="white" />
<Text style={styles.message} numberOfLines={3}>{toast.message}</Text>
<TouchableOpacity
onPress={dismiss}
accessibilityLabel="Dismiss notification"
accessibilityRole="button"
hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
>
<X size={16} color="rgba(255,255,255,0.8)" />
</TouchableOpacity>
</Animated.View>
);
}
export function ToastProvider({ children }: { children: React.ReactNode }) {
const [toasts, setToasts] = useState<Toast[]>([]);
const counterRef = useRef(0);
const showToast = useCallback((message: string, type: ToastType = 'success') => {
const id = `toast-${++counterRef.current}-${Date.now()}`;
setToasts((prev) => [...prev, { id, message, type }]);
}, []);
const dismissToast = useCallback((id: string) => {
setToasts((prev) => prev.filter((t) => t.id !== id));
}, []);
return (
<ToastContext.Provider value={{ showToast }}>
{children}
<View style={styles.container} pointerEvents="box-none">
{toasts.map((toast) => (
<ToastItem key={toast.id} toast={toast} onDismiss={dismissToast} />
))}
</View>
</ToastContext.Provider>
);
}
export function useToast(): ToastContextValue {
return useContext(ToastContext);
}
const styles = StyleSheet.create({
container: {
position: 'absolute',
bottom: 90,
left: 16,
right: 16,
gap: 8,
zIndex: 9999,
},
toast: {
flexDirection: 'row',
alignItems: 'center',
borderRadius: 12,
paddingVertical: 12,
paddingHorizontal: 14,
gap: 10,
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.2,
shadowRadius: 4,
elevation: 6,
},
message: {
flex: 1,
color: 'white',
fontSize: 14,
fontWeight: '500',
lineHeight: 20,
},
});

21
components/visits/LogVisitSheet.tsx
View File

@@ -64,9 +64,16 @@ export function LogVisitSheet({ contactId, contactName, visible, onClose, onSave
<KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'} className="flex-1">
<View className="flex-1 bg-secondary">
<View className="flex-row items-center justify-between px-4 py-4 border-b border-gray-200 bg-white">
<TouchableOpacity onPress={() => { reset(); onClose(); }}><X size={22} color="#2C3E50" /></TouchableOpacity>
<TouchableOpacity
onPress={() => { reset(); onClose(); }}
accessibilityRole="button"
accessibilityLabel="Close"
style={{ minWidth: 44, minHeight: 44, alignItems: 'center', justifyContent: 'center' }}
>
<X size={22} color="#2C3E50" />
</TouchableOpacity>
<Text className="text-charcoal font-semibold text-lg">Log Visit</Text>
<View style={{ width: 22 }} />
<View style={{ width: 44 }} />
</View>
<ScrollView className="flex-1 px-4 pt-4" keyboardShouldPersistTaps="handled">
@@ -78,7 +85,15 @@ export function LogVisitSheet({ contactId, contactName, visible, onClose, onSave
<Text className="text-charcoal font-medium mb-2">Response</Text>
<View className="flex-row flex-wrap gap-2 mb-4">
{RESPONSE_OPTIONS.map((r) => (
<TouchableOpacity key={r} onPress={() => setResponse(r === response ? '' : r)} className={`px-3 py-1.5 rounded-full border ${response === r ? 'bg-primary border-primary' : 'bg-white border-gray-200'}`}>
<TouchableOpacity
key={r}
onPress={() => setResponse(r === response ? '' : r)}
className={`px-3 py-1.5 rounded-full border ${response === r ? 'bg-primary border-primary' : 'bg-white border-gray-200'}`}
accessibilityRole="button"
accessibilityLabel={r}
accessibilityState={{ selected: response === r }}
style={{ minHeight: 36 }}
>
<Text className={`text-sm ${response === r ? 'text-white' : 'text-charcoal'}`}>{r}</Text>
</TouchableOpacity>
))}

32
components/visits/TopicSelector.tsx
View File

@@ -40,7 +40,14 @@ export function TopicSelector({ value, onChange }: Props) {
return (
<View className="mb-4">
<Text className="text-charcoal font-medium mb-1">Topic</Text>
<TouchableOpacity onPress={() => setShow(true)} className="flex-row items-center border border-gray-200 rounded-xl px-4 py-3 bg-white">
<TouchableOpacity
onPress={() => setShow(true)}
className="flex-row items-center border border-gray-200 rounded-xl px-4 py-3 bg-white"
accessibilityRole="button"
accessibilityLabel={value ? `Selected topic: ${value}` : 'Select topic'}
accessibilityHint="Opens topic selector"
style={{ minHeight: 48 }}
>
<Text className={`flex-1 ${value ? 'text-charcoal' : 'text-gray-400'}`}>{value || 'Select topic...'}</Text>
<ChevronDown size={16} color="#9CA3AF" />
</TouchableOpacity>
@@ -48,9 +55,16 @@ export function TopicSelector({ value, onChange }: Props) {
<Modal visible={show} animationType="slide" presentationStyle="pageSheet">
<View className="flex-1 bg-secondary">
<View className="flex-row items-center justify-between px-4 py-4 border-b border-gray-200 bg-white">
<TouchableOpacity onPress={() => setShow(false)}><X size={22} color="#2C3E50" /></TouchableOpacity>
<TouchableOpacity
onPress={() => setShow(false)}
accessibilityRole="button"
accessibilityLabel="Close topic selector"
style={{ minWidth: 44, minHeight: 44, alignItems: 'center', justifyContent: 'center' }}
>
<X size={22} color="#2C3E50" />
</TouchableOpacity>
<Text className="text-charcoal font-semibold text-lg">Select Topic</Text>
<View style={{ width: 22 }} />
<View style={{ width: 44 }} />
</View>
<View className="px-4 pt-3 pb-2">
@@ -66,7 +80,13 @@ export function TopicSelector({ value, onChange }: Props) {
onChangeText={setNewTopic}
onSubmitEditing={addCustomTopic}
/>
<TouchableOpacity onPress={addCustomTopic} className="bg-primary rounded-xl px-3 items-center justify-center">
<TouchableOpacity
onPress={addCustomTopic}
className="bg-primary rounded-xl px-3 items-center justify-center"
accessibilityRole="button"
accessibilityLabel="Add custom topic"
style={{ minWidth: 44, minHeight: 44 }}
>
<Plus size={18} color="white" />
</TouchableOpacity>
</View>
@@ -80,6 +100,10 @@ export function TopicSelector({ value, onChange }: Props) {
<TouchableOpacity
onPress={() => { onChange(item.name); setShow(false); }}
className={`bg-white rounded-xl px-4 py-3 flex-row items-center justify-between ${value === item.name ? 'border-2 border-primary' : 'border border-gray-100'}`}
accessibilityRole="button"
accessibilityLabel={item.name}
accessibilityState={{ selected: value === item.name }}
style={{ minHeight: 48 }}
>
<Text className="text-charcoal">{item.name}</Text>
{item.is_default === 1 && <Text className="text-xs text-gray-400">Default</Text>}