Compare commits
10 Commits
6fe6ebef13
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
7df91a8e55 | ||
| 92532306ab | |||
| 5a885990b9 | |||
| 27efa10ece | |||
|
|
6f02dee5c6 | ||
|
|
059de91a04 | ||
|
|
0e9c953564 | ||
|
|
e01769b025 | ||
|
|
6a4ee9e80f | ||
|
|
c8fe67f346 |
4
.easignore
Normal file
4
.easignore
Normal file
@@ -0,0 +1,4 @@
|
||||
node_modules/
|
||||
.expo/
|
||||
*.keystore
|
||||
credentials.json
|
||||
37
.gitea/workflows/build.yml
Normal file
37
.gitea/workflows/build.yml
Normal file
@@ -0,0 +1,37 @@
|
||||
name: Build (EAS)
|
||||
|
||||
# Triggered on push to main branch.
|
||||
# IMPORTANT: Set EXPO_TOKEN as a Gitea Actions secret before running this workflow.
|
||||
# Go to: Repo → Settings → Actions → Secrets → Add secret: EXPO_TOKEN
|
||||
# Get your token at: https://expo.dev/accounts/[username]/settings/access-tokens
|
||||
|
||||
on:
|
||||
push:
|
||||
branches:
|
||||
- main
|
||||
|
||||
jobs:
|
||||
eas-build:
|
||||
name: EAS Build (Android Preview APK)
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
steps:
|
||||
- name: Checkout code
|
||||
uses: actions/checkout@v4
|
||||
|
||||
- name: Setup Node.js 20
|
||||
uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: '20'
|
||||
cache: 'npm'
|
||||
|
||||
- name: Install dependencies
|
||||
run: npm ci
|
||||
|
||||
- name: Install EAS CLI
|
||||
run: npm install -g eas-cli
|
||||
|
||||
- name: Build Android APK (preview)
|
||||
run: eas build --platform android --profile preview --non-interactive
|
||||
env:
|
||||
EXPO_TOKEN: ${{ secrets.EXPO_TOKEN }}
|
||||
31
.gitea/workflows/ci.yml
Normal file
31
.gitea/workflows/ci.yml
Normal file
@@ -0,0 +1,31 @@
|
||||
name: CI
|
||||
|
||||
on:
|
||||
push:
|
||||
branches:
|
||||
- dev
|
||||
- 'sprint/**'
|
||||
|
||||
jobs:
|
||||
lint-and-typecheck:
|
||||
name: Lint & TypeScript Check
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
steps:
|
||||
- name: Checkout code
|
||||
uses: actions/checkout@v4
|
||||
|
||||
- name: Setup Node.js 20
|
||||
uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: '20'
|
||||
cache: 'npm'
|
||||
|
||||
- name: Install dependencies
|
||||
run: npm ci
|
||||
|
||||
- name: Run ESLint
|
||||
run: npx eslint . --ext .ts,.tsx --max-warnings 0
|
||||
|
||||
- name: Run TypeScript check
|
||||
run: npx tsc --noEmit
|
||||
4
.gitignore
vendored
4
.gitignore
vendored
@@ -10,3 +10,7 @@ npm-debug.*
|
||||
*.orig.*
|
||||
web-build/
|
||||
.env
|
||||
|
||||
# EAS credentials (generated locally, managed by Expo)
|
||||
credentials.json
|
||||
*.keystore
|
||||
|
||||
103
BUILDING.md
Normal file
103
BUILDING.md
Normal file
@@ -0,0 +1,103 @@
|
||||
# Building TerritoryLog with EAS
|
||||
|
||||
This document explains how to build TerritoryLog APKs and production bundles using **Expo Application Services (EAS)**.
|
||||
|
||||
---
|
||||
|
||||
## Prerequisites
|
||||
|
||||
### 1. Install EAS CLI
|
||||
|
||||
```bash
|
||||
npm install -g eas-cli
|
||||
```
|
||||
|
||||
Verify installation:
|
||||
|
||||
```bash
|
||||
eas --version
|
||||
# Should output >= 12.0.0
|
||||
```
|
||||
|
||||
### 2. Log in to Expo Account
|
||||
|
||||
```bash
|
||||
eas login
|
||||
```
|
||||
|
||||
You will be prompted for your Expo username and password. If you don't have an account, create one at [https://expo.dev](https://expo.dev).
|
||||
|
||||
---
|
||||
|
||||
## Building
|
||||
|
||||
### Preview Build (APK — for internal testing)
|
||||
|
||||
This generates a standard `.apk` file that can be installed directly on Android devices without the Play Store.
|
||||
|
||||
```bash
|
||||
eas build --platform android --profile preview
|
||||
```
|
||||
|
||||
Once the build completes, EAS will provide a download URL for the APK.
|
||||
|
||||
### Production Build (AAB — for Play Store submission)
|
||||
|
||||
This generates an `.aab` (Android App Bundle) optimized for Play Store distribution.
|
||||
|
||||
```bash
|
||||
eas build --platform android --profile production
|
||||
```
|
||||
|
||||
### Development Build (for local development with Expo Go replacement)
|
||||
|
||||
```bash
|
||||
eas build --platform android --profile development
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## About Keystores
|
||||
|
||||
> **EAS manages keystores automatically.** On your first build, EAS will generate and securely store a keystore on Expo's servers. You don't need to manually create or manage a keystore. If you need to use an existing keystore, see the [EAS credentials documentation](https://docs.expo.dev/app-signing/managed-credentials/).
|
||||
|
||||
---
|
||||
|
||||
## CI/CD — Setting Up `EXPO_TOKEN` in Gitea
|
||||
|
||||
The CI/CD pipeline in `.gitea/workflows/build.yml` requires an `EXPO_TOKEN` secret to authenticate with EAS without interactive login.
|
||||
|
||||
### Steps to set up:
|
||||
|
||||
1. **Generate an Expo access token:**
|
||||
- Go to [https://expo.dev/accounts/\[your-username\]/settings/access-tokens](https://expo.dev/accounts/)
|
||||
- Click **"Create Token"**
|
||||
- Name it something like `gitea-ci` and copy the token value
|
||||
|
||||
2. **Add the secret to Gitea:**
|
||||
- In this repo, go to **Settings → Actions → Secrets**
|
||||
- Click **"Add Secret"**
|
||||
- Name: `EXPO_TOKEN`
|
||||
- Value: *(paste your token)*
|
||||
- Click **"Save"**
|
||||
|
||||
3. The `build.yml` workflow will now authenticate automatically when triggered by a push to `main`.
|
||||
|
||||
---
|
||||
|
||||
## Build Profiles Summary
|
||||
|
||||
| Profile | Output | Distribution | Use Case |
|
||||
|---------------|----------|--------------|------------------------------|
|
||||
| `development` | APK | Internal | Dev client for local testing |
|
||||
| `preview` | APK | Internal | QA / internal testing |
|
||||
| `production` | AAB | Play Store | Public release |
|
||||
|
||||
---
|
||||
|
||||
## Useful Links
|
||||
|
||||
- [EAS Build documentation](https://docs.expo.dev/build/introduction/)
|
||||
- [EAS CLI reference](https://docs.expo.dev/eas-cli/)
|
||||
- [Android app signing with EAS](https://docs.expo.dev/app-signing/managed-credentials/)
|
||||
- [Expo access tokens](https://docs.expo.dev/accounts/programmatic-access/)
|
||||
4
README.md
Normal file
4
README.md
Normal file
@@ -0,0 +1,4 @@
|
||||
|
||||
<!-- EAS Build Pipeline Test - Fri Feb 20 07:47:34 AM PST 2026 -->
|
||||
<!-- Runner test Fri Feb 20 08:19:13 AM PST 2026 -->
|
||||
<!-- Host runner test Fri Feb 20 08:54:45 AM PST 2026 -->
|
||||
23
app.json
23
app.json
@@ -8,18 +8,29 @@
|
||||
"scheme": "territorylog",
|
||||
"userInterfaceStyle": "light",
|
||||
"splash": {
|
||||
"image": "./assets/images/splash.png",
|
||||
"resizeMode": "contain",
|
||||
"backgroundColor": "#1A6B72"
|
||||
},
|
||||
"ios": {
|
||||
"supportsTablet": false,
|
||||
"bundleIdentifier": "space.juankibin.territorylog"
|
||||
"bundleIdentifier": "com.juankibin.territorylog"
|
||||
},
|
||||
"android": {
|
||||
"adaptiveIcon": {
|
||||
"foregroundImage": "./assets/images/adaptive-icon.png",
|
||||
"backgroundColor": "#1A6B72"
|
||||
},
|
||||
"package": "space.juankibin.territorylog"
|
||||
"package": "com.juankibin.territorylog",
|
||||
"versionCode": 1,
|
||||
"permissions": [
|
||||
"android.permission.ACCESS_COARSE_LOCATION",
|
||||
"android.permission.ACCESS_FINE_LOCATION",
|
||||
"android.permission.USE_BIOMETRIC",
|
||||
"android.permission.USE_FINGERPRINT",
|
||||
"android.permission.CAMERA",
|
||||
"android.permission.RECORD_AUDIO"
|
||||
]
|
||||
},
|
||||
"web": {
|
||||
"bundler": "metro"
|
||||
@@ -48,6 +59,14 @@
|
||||
],
|
||||
"experiments": {
|
||||
"typedRoutes": true
|
||||
},
|
||||
"extra": {
|
||||
"router": {
|
||||
"origin": false
|
||||
},
|
||||
"eas": {
|
||||
"projectId": "3cbc82c9-a3ef-4589-9984-0e71b6474d9c"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -7,6 +7,7 @@ import { useContactStore, Contact } from '@/store/useContactStore';
|
||||
import { getDatabase } from '@/lib/database';
|
||||
import { ContactCard } from '@/components/contacts/ContactCard';
|
||||
import { AddContactSheet } from '@/components/contacts/AddContactSheet';
|
||||
import { EmptyState } from '@/components/ui/EmptyState';
|
||||
import { dbToContact } from '@/lib/contactHelpers';
|
||||
|
||||
export default function ContactsScreen() {
|
||||
@@ -26,7 +27,6 @@ export default function ContactsScreen() {
|
||||
);
|
||||
setContacts(rows.map(dbToContact));
|
||||
|
||||
// Load territory codes for filter
|
||||
const tRows = await db.getAllAsync<any>('SELECT territory_code FROM territories ORDER BY territory_code ASC');
|
||||
setTerritories(tRows.map((r: any) => r.territory_code));
|
||||
}
|
||||
@@ -41,13 +41,21 @@ export default function ContactsScreen() {
|
||||
return matchSearch && matchStatus && matchTerritory;
|
||||
});
|
||||
|
||||
const isFiltered = search.length > 0 || statusFilter !== 'All' || territoryFilter !== 'All';
|
||||
|
||||
return (
|
||||
<View className="flex-1 bg-secondary">
|
||||
{/* Header */}
|
||||
<View className="bg-primary pt-14 pb-4 px-4">
|
||||
<View className="flex-row justify-between items-center mb-3">
|
||||
<Text className="text-white text-2xl font-bold">Contacts</Text>
|
||||
<TouchableOpacity onPress={() => setShowAdd(true)} className="bg-white/20 rounded-full p-2">
|
||||
<Text className="text-white text-2xl font-bold" accessibilityRole="header">Contacts</Text>
|
||||
<TouchableOpacity
|
||||
onPress={() => setShowAdd(true)}
|
||||
className="bg-white/20 rounded-full p-2"
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel="Add new contact"
|
||||
style={{ minWidth: 44, minHeight: 44, alignItems: 'center', justifyContent: 'center' }}
|
||||
>
|
||||
<Plus size={22} color="white" />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
@@ -60,8 +68,18 @@ export default function ContactsScreen() {
|
||||
placeholderTextColor="rgba(255,255,255,0.6)"
|
||||
value={search}
|
||||
onChangeText={setSearch}
|
||||
accessibilityLabel="Search contacts"
|
||||
/>
|
||||
{search ? <TouchableOpacity onPress={() => setSearch('')}><X size={16} color="rgba(255,255,255,0.7)" /></TouchableOpacity> : null}
|
||||
{search ? (
|
||||
<TouchableOpacity
|
||||
onPress={() => setSearch('')}
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel="Clear search"
|
||||
hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
|
||||
>
|
||||
<X size={16} color="rgba(255,255,255,0.7)" />
|
||||
</TouchableOpacity>
|
||||
) : null}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
@@ -77,6 +95,10 @@ export default function ContactsScreen() {
|
||||
<TouchableOpacity
|
||||
onPress={() => setStatusFilter(item)}
|
||||
className={`px-3 py-1.5 rounded-full border ${statusFilter === item ? 'bg-primary border-primary' : 'bg-white border-gray-200'}`}
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel={`Filter by ${item}`}
|
||||
accessibilityState={{ selected: statusFilter === item }}
|
||||
style={{ minHeight: 36 }}
|
||||
>
|
||||
<Text className={`text-sm font-medium ${statusFilter === item ? 'text-white' : 'text-charcoal'}`}>{item}</Text>
|
||||
</TouchableOpacity>
|
||||
@@ -97,6 +119,10 @@ export default function ContactsScreen() {
|
||||
<TouchableOpacity
|
||||
onPress={() => setTerritoryFilter(item)}
|
||||
className={`px-3 py-1 rounded-full border ${territoryFilter === item ? 'bg-accent border-accent' : 'bg-white border-gray-200'}`}
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel={`Filter by territory ${item === 'All' ? 'all' : item}`}
|
||||
accessibilityState={{ selected: territoryFilter === item }}
|
||||
style={{ minHeight: 32 }}
|
||||
>
|
||||
<Text className={`text-xs font-medium ${territoryFilter === item ? 'text-white' : 'text-gray-500'}`}>{item === 'All' ? 'All Territories' : item}</Text>
|
||||
</TouchableOpacity>
|
||||
@@ -111,14 +137,23 @@ export default function ContactsScreen() {
|
||||
keyExtractor={(item) => item.id}
|
||||
contentContainerStyle={{ paddingHorizontal: 16, paddingBottom: 100, paddingTop: 4, gap: 8 }}
|
||||
renderItem={({ item }) => <ContactCard contact={item} onRefresh={loadContacts} />}
|
||||
ListEmptyComponent={() => (
|
||||
<View className="flex-1 items-center justify-center py-20">
|
||||
<Text className="text-gray-400 text-lg">
|
||||
{search ? 'No contacts found' : 'No contacts yet'}
|
||||
</Text>
|
||||
{!search && <Text className="text-gray-400 mt-1">Tap + to add your first contact</Text>}
|
||||
</View>
|
||||
)}
|
||||
ListEmptyComponent={() =>
|
||||
isFiltered ? (
|
||||
<EmptyState
|
||||
icon="Search"
|
||||
title="No contacts found"
|
||||
message="Try adjusting your search or filters."
|
||||
/>
|
||||
) : (
|
||||
<EmptyState
|
||||
icon="Users"
|
||||
title="No contacts yet"
|
||||
message="Start building your ministry records by adding your first contact."
|
||||
actionLabel="Add Contact"
|
||||
onAction={() => setShowAdd(true)}
|
||||
/>
|
||||
)
|
||||
}
|
||||
/>
|
||||
|
||||
<AddContactSheet visible={showAdd} onClose={() => setShowAdd(false)} onSaved={() => { setShowAdd(false); loadContacts(); }} />
|
||||
|
||||
@@ -1,11 +1,10 @@
|
||||
import { View, Text, ScrollView, TouchableOpacity, Modal, FlatList } from 'react-native';
|
||||
import { View, Text, ScrollView, TouchableOpacity, Modal } from 'react-native';
|
||||
import { useState, useCallback } from 'react';
|
||||
import { useFocusEffect, router } from 'expo-router';
|
||||
import { Plus, Users, Calendar, BookOpen, ChevronRight, X } from 'lucide-react-native';
|
||||
import { Plus, ChevronRight } from 'lucide-react-native';
|
||||
import { useUserStore } from '@/store/useUserStore';
|
||||
import { getDatabase } from '@/lib/database';
|
||||
import { Contact } from '@/store/useContactStore';
|
||||
import { dbToContact } from '@/lib/contactHelpers';
|
||||
import { EmptyState } from '@/components/ui/EmptyState';
|
||||
import { formatDate } from '@/lib/visitHelpers';
|
||||
|
||||
interface Stats {
|
||||
@@ -29,8 +28,7 @@ export default function HomeScreen() {
|
||||
|
||||
async function loadDashboard() {
|
||||
const db = await getDatabase();
|
||||
const now = Math.floor(Date.now() / 1000);
|
||||
const todayEnd = now + 86400 * 3; // next 3 days
|
||||
const todayEnd = Math.floor(Date.now() / 1000) + 86400 * 3; // next 3 days
|
||||
|
||||
const contacts = await db.getAllAsync<any>('SELECT status FROM contacts WHERE deleted_at IS NULL');
|
||||
const total = contacts.length;
|
||||
@@ -46,7 +44,7 @@ export default function HomeScreen() {
|
||||
);
|
||||
|
||||
setStats({ total, returnVisits, bibleStudies, visitsDue: due.length });
|
||||
setDueVisits(due.map((d) => ({ contactId: d.contact_id, contactName: d.full_name, nextVisitDate: d.next_visit_date })));
|
||||
setDueVisits(due.map((d: any) => ({ contactId: d.contact_id, contactName: d.full_name, nextVisitDate: d.next_visit_date })));
|
||||
}
|
||||
|
||||
useFocusEffect(useCallback(() => { loadDashboard(); }, []));
|
||||
@@ -81,14 +79,24 @@ export default function HomeScreen() {
|
||||
</View>
|
||||
|
||||
{/* Return Visits Due */}
|
||||
{dueVisits.length > 0 && (
|
||||
<View className="bg-white rounded-2xl p-4">
|
||||
<Text className="text-charcoal font-semibold mb-3">⏰ Visits Due Soon</Text>
|
||||
{dueVisits.length === 0 ? (
|
||||
<EmptyState
|
||||
icon="Calendar"
|
||||
title="No visits due"
|
||||
message="You're all caught up! No visits are due in the next 3 days."
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
{dueVisits.slice(0, 5).map((v) => (
|
||||
<TouchableOpacity
|
||||
key={v.contactId}
|
||||
onPress={() => router.push({ pathname: '/contact/[id]', params: { id: v.contactId } })}
|
||||
className="flex-row items-center justify-between py-2 border-b border-gray-50"
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel={`Visit ${v.contactName} on ${formatDate(v.nextVisitDate)}`}
|
||||
style={{ minHeight: 44 }}
|
||||
>
|
||||
<Text className="text-charcoal font-medium">{v.contactName}</Text>
|
||||
<Text className="text-primary text-sm">{formatDate(v.nextVisitDate)}</Text>
|
||||
@@ -97,8 +105,9 @@ export default function HomeScreen() {
|
||||
{dueVisits.length > 5 && (
|
||||
<Text className="text-gray-400 text-sm text-center mt-2">+{dueVisits.length - 5} more</Text>
|
||||
)}
|
||||
</View>
|
||||
</>
|
||||
)}
|
||||
</View>
|
||||
|
||||
{/* Quick actions */}
|
||||
<View className="bg-white rounded-2xl p-4">
|
||||
@@ -114,13 +123,21 @@ export default function HomeScreen() {
|
||||
onPress={() => setShowFAB(true)}
|
||||
className="absolute bottom-8 right-6 w-14 h-14 bg-primary rounded-full items-center justify-center shadow-lg"
|
||||
style={{ elevation: 8 }}
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel="Quick add"
|
||||
accessibilityHint="Open quick actions menu to add a contact or log a visit"
|
||||
>
|
||||
<Plus size={28} color="white" />
|
||||
</TouchableOpacity>
|
||||
|
||||
{/* FAB Action Sheet */}
|
||||
<Modal visible={showFAB} transparent animationType="fade">
|
||||
<TouchableOpacity className="flex-1 bg-black/50 justify-end" onPress={() => setShowFAB(false)}>
|
||||
<TouchableOpacity
|
||||
className="flex-1 bg-black/50 justify-end"
|
||||
onPress={() => setShowFAB(false)}
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel="Close menu"
|
||||
>
|
||||
<View className="bg-white rounded-t-3xl px-4 pt-6 pb-10">
|
||||
<Text className="text-charcoal font-semibold text-lg mb-4 text-center">Quick Add</Text>
|
||||
<FABAction
|
||||
@@ -147,7 +164,7 @@ export default function HomeScreen() {
|
||||
|
||||
function StatCard({ label, value, color, icon }: { label: string; value: number; color: string; icon: string }) {
|
||||
return (
|
||||
<View className={`flex-1 ${color} rounded-2xl p-4`}>
|
||||
<View className={`flex-1 ${color} rounded-2xl p-4`} accessibilityRole="text" accessibilityLabel={`${label}: ${value}`}>
|
||||
<Text className="text-2xl mb-1">{icon}</Text>
|
||||
<Text className="text-white text-2xl font-bold">{value}</Text>
|
||||
<Text className="text-white/80 text-xs">{label}</Text>
|
||||
@@ -157,7 +174,13 @@ function StatCard({ label, value, color, icon }: { label: string; value: number;
|
||||
|
||||
function QuickAction({ icon, label, onPress }: { icon: string; label: string; onPress: () => void }) {
|
||||
return (
|
||||
<TouchableOpacity onPress={onPress} className="flex-row items-center py-3 border-b border-gray-50">
|
||||
<TouchableOpacity
|
||||
onPress={onPress}
|
||||
className="flex-row items-center py-3 border-b border-gray-50"
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel={label}
|
||||
style={{ minHeight: 48 }}
|
||||
>
|
||||
<Text className="text-2xl mr-3">{icon}</Text>
|
||||
<Text className="flex-1 text-charcoal font-medium">{label}</Text>
|
||||
<ChevronRight size={16} color="#9CA3AF" />
|
||||
@@ -167,7 +190,13 @@ function QuickAction({ icon, label, onPress }: { icon: string; label: string; on
|
||||
|
||||
function FABAction({ icon, label, sub, onPress }: { icon: string; label: string; sub: string; onPress: () => void }) {
|
||||
return (
|
||||
<TouchableOpacity onPress={onPress} className="flex-row items-center py-3 px-2 mb-2 border border-gray-100 rounded-xl">
|
||||
<TouchableOpacity
|
||||
onPress={onPress}
|
||||
className="flex-row items-center py-3 px-2 mb-2 border border-gray-100 rounded-xl"
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel={`${label} - ${sub}`}
|
||||
style={{ minHeight: 64 }}
|
||||
>
|
||||
<Text className="text-3xl mr-4">{icon}</Text>
|
||||
<View>
|
||||
<Text className="text-charcoal font-semibold">{label}</Text>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -5,6 +5,7 @@ import { Plus, Search, X, ChevronRight } from 'lucide-react-native';
|
||||
import { getDatabase } from '@/lib/database';
|
||||
import { Territory, dbToTerritory } from '@/lib/territoryHelpers';
|
||||
import { AddTerritorySheet } from '@/components/territories/AddTerritorySheet';
|
||||
import { EmptyState } from '@/components/ui/EmptyState';
|
||||
import { router } from 'expo-router';
|
||||
|
||||
export default function TerritoriesScreen() {
|
||||
@@ -30,8 +31,14 @@ export default function TerritoriesScreen() {
|
||||
<View className="flex-1 bg-secondary">
|
||||
<View className="bg-primary pt-14 pb-4 px-4">
|
||||
<View className="flex-row justify-between items-center mb-3">
|
||||
<Text className="text-white text-2xl font-bold">Territories</Text>
|
||||
<TouchableOpacity onPress={() => setShowAdd(true)} className="bg-white/20 rounded-full p-2">
|
||||
<Text className="text-white text-2xl font-bold" accessibilityRole="header">Territories</Text>
|
||||
<TouchableOpacity
|
||||
onPress={() => setShowAdd(true)}
|
||||
className="bg-white/20 rounded-full p-2"
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel="Add new territory"
|
||||
style={{ minWidth: 44, minHeight: 44, alignItems: 'center', justifyContent: 'center' }}
|
||||
>
|
||||
<Plus size={22} color="white" />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
@@ -43,8 +50,18 @@ export default function TerritoriesScreen() {
|
||||
placeholderTextColor="rgba(255,255,255,0.6)"
|
||||
value={search}
|
||||
onChangeText={setSearch}
|
||||
accessibilityLabel="Search territories"
|
||||
/>
|
||||
{search ? <TouchableOpacity onPress={() => setSearch('')}><X size={16} color="rgba(255,255,255,0.7)" /></TouchableOpacity> : null}
|
||||
{search ? (
|
||||
<TouchableOpacity
|
||||
onPress={() => setSearch('')}
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel="Clear search"
|
||||
hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
|
||||
>
|
||||
<X size={16} color="rgba(255,255,255,0.7)" />
|
||||
</TouchableOpacity>
|
||||
) : null}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
@@ -56,6 +73,10 @@ export default function TerritoriesScreen() {
|
||||
<TouchableOpacity
|
||||
onPress={() => router.push({ pathname: '/territory/[id]', params: { id: item.id } })}
|
||||
className="bg-white rounded-2xl p-4 flex-row items-center shadow-sm"
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel={`Territory ${item.territoryCode}${item.barangay ? `, ${item.barangay}` : ''}`}
|
||||
accessibilityHint="Tap to view territory details"
|
||||
style={{ minHeight: 72 }}
|
||||
>
|
||||
<View className="w-12 h-12 rounded-full bg-primary/10 items-center justify-center mr-3">
|
||||
<Text className="text-primary font-bold text-sm">{item.territoryCode}</Text>
|
||||
@@ -68,12 +89,23 @@ export default function TerritoriesScreen() {
|
||||
<ChevronRight size={18} color="#9CA3AF" />
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
ListEmptyComponent={() => (
|
||||
<View className="items-center justify-center py-20">
|
||||
<Text className="text-gray-400 text-lg">{search ? 'No territories found' : 'No territories yet'}</Text>
|
||||
{!search && <Text className="text-gray-400 mt-1">Tap + to add your first territory</Text>}
|
||||
</View>
|
||||
)}
|
||||
ListEmptyComponent={() =>
|
||||
search.length > 0 ? (
|
||||
<EmptyState
|
||||
icon="Search"
|
||||
title="No territories found"
|
||||
message="Try adjusting your search."
|
||||
/>
|
||||
) : (
|
||||
<EmptyState
|
||||
icon="MapPin"
|
||||
title="No territories yet"
|
||||
message="Add your first territory to organize your ministry work."
|
||||
actionLabel="Add Territory"
|
||||
onAction={() => setShowAdd(true)}
|
||||
/>
|
||||
)
|
||||
}
|
||||
/>
|
||||
|
||||
<AddTerritorySheet visible={showAdd} onClose={() => setShowAdd(false)} onSaved={() => { setShowAdd(false); loadTerritories(); }} />
|
||||
|
||||
@@ -6,6 +6,7 @@ import { View, ActivityIndicator, AppState, AppStateStatus } from 'react-native'
|
||||
import { useUserStore } from '@/store/useUserStore';
|
||||
import { getDatabase } from '@/lib/database';
|
||||
import { isPinEnabled } from '@/lib/pinService';
|
||||
import { ToastProvider } from '@/components/ui/Toast';
|
||||
import '../global.css';
|
||||
|
||||
const LOCK_AFTER_SECONDS = 60;
|
||||
@@ -100,6 +101,7 @@ export default function RootLayout() {
|
||||
|
||||
return (
|
||||
<GestureHandlerRootView style={{ flex: 1 }}>
|
||||
<ToastProvider>
|
||||
<Stack screenOptions={{ headerShown: false }}>
|
||||
<Stack.Screen name="onboarding" />
|
||||
<Stack.Screen name="(tabs)" />
|
||||
@@ -119,6 +121,7 @@ export default function RootLayout() {
|
||||
}}
|
||||
/>
|
||||
</Stack>
|
||||
</ToastProvider>
|
||||
</GestureHandlerRootView>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,12 +1,15 @@
|
||||
import { View, Text, ScrollView, TouchableOpacity, Alert } from 'react-native';
|
||||
import { View, Text, ScrollView, TouchableOpacity } from 'react-native';
|
||||
import { useLocalSearchParams, router, useFocusEffect } from 'expo-router';
|
||||
import { useState, useCallback } from 'react';
|
||||
import { ArrowLeft, Edit2, Trash2, MapPin } from 'lucide-react-native';
|
||||
import { ArrowLeft, Edit2, Trash2 } from 'lucide-react-native';
|
||||
import { getDatabase } from '@/lib/database';
|
||||
import { dbToContact } from '@/lib/contactHelpers';
|
||||
import { Contact } from '@/store/useContactStore';
|
||||
import { EditContactSheet } from '@/components/contacts/EditContactSheet';
|
||||
import { LogVisitSheet } from '@/components/visits/LogVisitSheet';
|
||||
import { ConfirmDialog } from '@/components/ui/ConfirmDialog';
|
||||
import { EmptyState } from '@/components/ui/EmptyState';
|
||||
import { useToast } from '@/components/ui/Toast';
|
||||
import { Visit, dbToVisit, formatDate } from '@/lib/visitHelpers';
|
||||
|
||||
const statusColors: Record<string, string> = {
|
||||
@@ -23,6 +26,8 @@ export default function ContactDetailScreen() {
|
||||
const [visits, setVisits] = useState<Visit[]>([]);
|
||||
const [showEdit, setShowEdit] = useState(false);
|
||||
const [showLogVisit, setShowLogVisit] = useState(false);
|
||||
const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
|
||||
const { showToast } = useToast();
|
||||
|
||||
async function loadData() {
|
||||
const db = await getDatabase();
|
||||
@@ -34,19 +39,12 @@ export default function ContactDetailScreen() {
|
||||
|
||||
useFocusEffect(useCallback(() => { loadData(); }, [id]));
|
||||
|
||||
async function handleDelete() {
|
||||
Alert.alert('Delete Contact', `Are you sure you want to delete ${contact?.fullName}?`, [
|
||||
{ text: 'Cancel', style: 'cancel' },
|
||||
{
|
||||
text: 'Delete', style: 'destructive',
|
||||
onPress: async () => {
|
||||
async function handleDeleteConfirmed() {
|
||||
const db = await getDatabase();
|
||||
await db.runAsync('UPDATE contacts SET deleted_at = ? WHERE id = ?', [Math.floor(Date.now() / 1000), id]);
|
||||
showToast(`${contact?.fullName} deleted`, 'success');
|
||||
router.back();
|
||||
}
|
||||
}
|
||||
]);
|
||||
}
|
||||
|
||||
if (!contact) return <View className="flex-1 bg-secondary" />;
|
||||
|
||||
@@ -56,14 +54,32 @@ export default function ContactDetailScreen() {
|
||||
<View className="flex-1 bg-secondary">
|
||||
<View className="bg-primary pt-14 pb-6 px-4">
|
||||
<View className="flex-row items-center justify-between mb-4">
|
||||
<TouchableOpacity onPress={() => router.back()} className="bg-white/20 rounded-full p-2">
|
||||
<TouchableOpacity
|
||||
onPress={() => router.back()}
|
||||
className="bg-white/20 rounded-full p-2"
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel="Go back"
|
||||
style={{ minWidth: 44, minHeight: 44, alignItems: 'center', justifyContent: 'center' }}
|
||||
>
|
||||
<ArrowLeft size={20} color="white" />
|
||||
</TouchableOpacity>
|
||||
<View className="flex-row gap-2">
|
||||
<TouchableOpacity onPress={() => setShowEdit(true)} className="bg-white/20 rounded-full p-2">
|
||||
<TouchableOpacity
|
||||
onPress={() => setShowEdit(true)}
|
||||
className="bg-white/20 rounded-full p-2"
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel="Edit contact"
|
||||
style={{ minWidth: 44, minHeight: 44, alignItems: 'center', justifyContent: 'center' }}
|
||||
>
|
||||
<Edit2 size={18} color="white" />
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity onPress={handleDelete} className="bg-white/20 rounded-full p-2">
|
||||
<TouchableOpacity
|
||||
onPress={() => setShowDeleteConfirm(true)}
|
||||
className="bg-white/20 rounded-full p-2"
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel="Delete contact"
|
||||
style={{ minWidth: 44, minHeight: 44, alignItems: 'center', justifyContent: 'center' }}
|
||||
>
|
||||
<Trash2 size={18} color="white" />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
@@ -99,12 +115,22 @@ export default function ContactDetailScreen() {
|
||||
<View className="bg-white rounded-2xl p-4">
|
||||
<View className="flex-row justify-between items-center mb-3">
|
||||
<Text className="text-charcoal font-semibold">Visit History ({visits.length})</Text>
|
||||
<TouchableOpacity onPress={() => setShowLogVisit(true)} className="bg-primary rounded-lg px-3 py-1.5">
|
||||
<TouchableOpacity
|
||||
onPress={() => setShowLogVisit(true)}
|
||||
className="bg-primary rounded-lg px-3 py-1.5"
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel="Log a new visit"
|
||||
style={{ minHeight: 36 }}
|
||||
>
|
||||
<Text className="text-white text-sm font-medium">+ Log Visit</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
{visits.length === 0 ? (
|
||||
<Text className="text-gray-400 text-sm">No visits recorded yet</Text>
|
||||
<EmptyState
|
||||
icon="Calendar"
|
||||
title="No visits logged yet"
|
||||
message="Tap '+ Log Visit' to record your first visit with this contact."
|
||||
/>
|
||||
) : (
|
||||
visits.map((v) => (
|
||||
<View key={v.id} className="border-l-2 border-primary pl-3 mb-3 last:mb-0">
|
||||
@@ -127,6 +153,15 @@ export default function ContactDetailScreen() {
|
||||
onClose={() => setShowLogVisit(false)}
|
||||
onSaved={() => { setShowLogVisit(false); loadData(); }}
|
||||
/>
|
||||
<ConfirmDialog
|
||||
visible={showDeleteConfirm}
|
||||
title="Delete Contact"
|
||||
message={`Are you sure you want to delete ${contact.fullName}? This action cannot be undone.`}
|
||||
confirmText="Delete"
|
||||
confirmStyle="danger"
|
||||
onConfirm={() => { setShowDeleteConfirm(false); handleDeleteConfirmed(); }}
|
||||
onCancel={() => setShowDeleteConfirm(false)}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { View, Text, ScrollView, TouchableOpacity, Alert } from 'react-native';
|
||||
import { View, Text, ScrollView, TouchableOpacity } from 'react-native';
|
||||
import { useLocalSearchParams, router, useFocusEffect } from 'expo-router';
|
||||
import { useState, useCallback } from 'react';
|
||||
import { ArrowLeft, Edit2, Trash2, ChevronRight } from 'lucide-react-native';
|
||||
@@ -7,12 +7,17 @@ import { Territory, dbToTerritory } from '@/lib/territoryHelpers';
|
||||
import { Contact } from '@/store/useContactStore';
|
||||
import { dbToContact } from '@/lib/contactHelpers';
|
||||
import { EditTerritorySheet } from '@/components/territories/EditTerritorySheet';
|
||||
import { ConfirmDialog } from '@/components/ui/ConfirmDialog';
|
||||
import { EmptyState } from '@/components/ui/EmptyState';
|
||||
import { useToast } from '@/components/ui/Toast';
|
||||
|
||||
export default function TerritoryDetailScreen() {
|
||||
const { id } = useLocalSearchParams<{ id: string }>();
|
||||
const [territory, setTerritory] = useState<Territory | null>(null);
|
||||
const [contacts, setContacts] = useState<Contact[]>([]);
|
||||
const [showEdit, setShowEdit] = useState(false);
|
||||
const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
|
||||
const { showToast } = useToast();
|
||||
|
||||
async function loadData() {
|
||||
const db = await getDatabase();
|
||||
@@ -30,15 +35,11 @@ export default function TerritoryDetailScreen() {
|
||||
|
||||
useFocusEffect(useCallback(() => { loadData(); }, [id]));
|
||||
|
||||
async function handleDelete() {
|
||||
Alert.alert('Delete Territory', `Delete territory ${territory?.territoryCode}? Contacts will keep their territory code but it won't link to a territory record.`, [
|
||||
{ text: 'Cancel', style: 'cancel' },
|
||||
{ text: 'Delete', style: 'destructive', onPress: async () => {
|
||||
async function handleDeleteConfirmed() {
|
||||
const db = await getDatabase();
|
||||
await db.runAsync('DELETE FROM territories WHERE id = ?', [id]);
|
||||
showToast(`Territory ${territory?.territoryCode} deleted`, 'success');
|
||||
router.back();
|
||||
}}
|
||||
]);
|
||||
}
|
||||
|
||||
if (!territory) return <View className="flex-1 bg-secondary" />;
|
||||
@@ -47,14 +48,32 @@ export default function TerritoryDetailScreen() {
|
||||
<View className="flex-1 bg-secondary">
|
||||
<View className="bg-primary pt-14 pb-6 px-4">
|
||||
<View className="flex-row items-center justify-between mb-4">
|
||||
<TouchableOpacity onPress={() => router.back()} className="bg-white/20 rounded-full p-2">
|
||||
<TouchableOpacity
|
||||
onPress={() => router.back()}
|
||||
className="bg-white/20 rounded-full p-2"
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel="Go back"
|
||||
style={{ minWidth: 44, minHeight: 44, alignItems: 'center', justifyContent: 'center' }}
|
||||
>
|
||||
<ArrowLeft size={20} color="white" />
|
||||
</TouchableOpacity>
|
||||
<View className="flex-row gap-2">
|
||||
<TouchableOpacity onPress={() => setShowEdit(true)} className="bg-white/20 rounded-full p-2">
|
||||
<TouchableOpacity
|
||||
onPress={() => setShowEdit(true)}
|
||||
className="bg-white/20 rounded-full p-2"
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel="Edit territory"
|
||||
style={{ minWidth: 44, minHeight: 44, alignItems: 'center', justifyContent: 'center' }}
|
||||
>
|
||||
<Edit2 size={18} color="white" />
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity onPress={handleDelete} className="bg-white/20 rounded-full p-2">
|
||||
<TouchableOpacity
|
||||
onPress={() => setShowDeleteConfirm(true)}
|
||||
className="bg-white/20 rounded-full p-2"
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel="Delete territory"
|
||||
style={{ minWidth: 44, minHeight: 44, alignItems: 'center', justifyContent: 'center' }}
|
||||
>
|
||||
<Trash2 size={18} color="white" />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
@@ -80,13 +99,20 @@ export default function TerritoryDetailScreen() {
|
||||
<View className="bg-white rounded-2xl p-4">
|
||||
<Text className="text-charcoal font-semibold mb-3">Contacts in this territory ({contacts.length})</Text>
|
||||
{contacts.length === 0 ? (
|
||||
<Text className="text-gray-400 text-sm">No contacts assigned to this territory</Text>
|
||||
<EmptyState
|
||||
icon="Users"
|
||||
title="No contacts here yet"
|
||||
message="Assign contacts to this territory to see them here."
|
||||
/>
|
||||
) : (
|
||||
contacts.map((c) => (
|
||||
<TouchableOpacity
|
||||
key={c.id}
|
||||
onPress={() => router.push({ pathname: '/contact/[id]', params: { id: c.id } })}
|
||||
className="flex-row items-center py-2 border-b border-gray-50"
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel={`View contact ${c.fullName}`}
|
||||
style={{ minHeight: 44 }}
|
||||
>
|
||||
<Text className="flex-1 text-charcoal font-medium">{c.fullName}</Text>
|
||||
<Text className="text-gray-400 text-xs mr-2">{c.status}</Text>
|
||||
@@ -98,6 +124,17 @@ export default function TerritoryDetailScreen() {
|
||||
</ScrollView>
|
||||
|
||||
<EditTerritorySheet territory={territory} visible={showEdit} onClose={() => setShowEdit(false)} onSaved={() => { setShowEdit(false); loadData(); }} />
|
||||
|
||||
<ConfirmDialog
|
||||
visible={showDeleteConfirm}
|
||||
title="Delete Territory"
|
||||
message={`Delete territory ${territory.territoryCode}? Contacts will keep their territory code but it won't link to a territory record.`}
|
||||
confirmText="Delete"
|
||||
confirmStyle="danger"
|
||||
impactCount={contacts.length}
|
||||
onConfirm={() => { setShowDeleteConfirm(false); handleDeleteConfirmed(); }}
|
||||
onCancel={() => setShowDeleteConfirm(false)}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
BIN
assets/images/adaptive-icon.png
Normal file
BIN
assets/images/adaptive-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.4 KiB |
BIN
assets/images/icon.png
Normal file
BIN
assets/images/icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.4 KiB |
BIN
assets/images/splash-icon.png
Normal file
BIN
assets/images/splash-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
BIN
assets/images/splash.png
Normal file
BIN
assets/images/splash.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
@@ -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; }
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
))}
|
||||
|
||||
@@ -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" />
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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
166
components/ui/ConfirmDialog.tsx
Normal 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',
|
||||
},
|
||||
});
|
||||
@@ -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
107
components/ui/EmptyState.tsx
Normal 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,
|
||||
},
|
||||
});
|
||||
@@ -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
127
components/ui/Toast.tsx
Normal 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,
|
||||
},
|
||||
});
|
||||
@@ -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>
|
||||
))}
|
||||
|
||||
@@ -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>}
|
||||
|
||||
27
eas.json
Normal file
27
eas.json
Normal file
@@ -0,0 +1,27 @@
|
||||
{
|
||||
"cli": {
|
||||
"version": ">= 12.0.0"
|
||||
},
|
||||
"build": {
|
||||
"development": {
|
||||
"developmentClient": true,
|
||||
"distribution": "internal"
|
||||
},
|
||||
"preview": {
|
||||
"distribution": "internal",
|
||||
"android": {
|
||||
"buildType": "apk",
|
||||
"credentialsSource": "local"
|
||||
},
|
||||
"credentialsSource": "local"
|
||||
},
|
||||
"production": {
|
||||
"android": {
|
||||
"buildType": "app-bundle"
|
||||
}
|
||||
}
|
||||
},
|
||||
"submit": {
|
||||
"production": {}
|
||||
}
|
||||
}
|
||||
140
package-lock.json
generated
140
package-lock.json
generated
@@ -9,6 +9,8 @@
|
||||
"version": "1.0.0",
|
||||
"dependencies": {
|
||||
"@gorhom/bottom-sheet": "^5.0.0",
|
||||
"ajv": "^8.18.0",
|
||||
"ajv-keywords": "^5.1.0",
|
||||
"expo": "~52.0.0",
|
||||
"expo-camera": "~16.0.0",
|
||||
"expo-crypto": "~13.0.0",
|
||||
@@ -1760,6 +1762,30 @@
|
||||
"url": "https://opencollective.com/eslint"
|
||||
}
|
||||
},
|
||||
"node_modules/@eslint/eslintrc/node_modules/ajv": {
|
||||
"version": "6.12.6",
|
||||
"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
|
||||
"integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"fast-deep-equal": "^3.1.1",
|
||||
"fast-json-stable-stringify": "^2.0.0",
|
||||
"json-schema-traverse": "^0.4.1",
|
||||
"uri-js": "^4.2.2"
|
||||
},
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/epoberezkin"
|
||||
}
|
||||
},
|
||||
"node_modules/@eslint/eslintrc/node_modules/json-schema-traverse": {
|
||||
"version": "0.4.1",
|
||||
"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
|
||||
"integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@eslint/js": {
|
||||
"version": "8.57.1",
|
||||
"resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.57.1.tgz",
|
||||
@@ -4571,16 +4597,15 @@
|
||||
}
|
||||
},
|
||||
"node_modules/ajv": {
|
||||
"version": "6.12.6",
|
||||
"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
|
||||
"integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
|
||||
"dev": true,
|
||||
"version": "8.18.0",
|
||||
"resolved": "https://registry.npmjs.org/ajv/-/ajv-8.18.0.tgz",
|
||||
"integrity": "sha512-PlXPeEWMXMZ7sPYOHqmDyCJzcfNrUr3fGNKtezX14ykXOEIvyK81d+qydx89KY5O71FKMPaQ2vBfBFI5NHR63A==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"fast-deep-equal": "^3.1.1",
|
||||
"fast-json-stable-stringify": "^2.0.0",
|
||||
"json-schema-traverse": "^0.4.1",
|
||||
"uri-js": "^4.2.2"
|
||||
"fast-deep-equal": "^3.1.3",
|
||||
"fast-uri": "^3.0.1",
|
||||
"json-schema-traverse": "^1.0.0",
|
||||
"require-from-string": "^2.0.2"
|
||||
},
|
||||
"funding": {
|
||||
"type": "github",
|
||||
@@ -4604,28 +4629,6 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/ajv-formats/node_modules/ajv": {
|
||||
"version": "8.18.0",
|
||||
"resolved": "https://registry.npmjs.org/ajv/-/ajv-8.18.0.tgz",
|
||||
"integrity": "sha512-PlXPeEWMXMZ7sPYOHqmDyCJzcfNrUr3fGNKtezX14ykXOEIvyK81d+qydx89KY5O71FKMPaQ2vBfBFI5NHR63A==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"fast-deep-equal": "^3.1.3",
|
||||
"fast-uri": "^3.0.1",
|
||||
"json-schema-traverse": "^1.0.0",
|
||||
"require-from-string": "^2.0.2"
|
||||
},
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/epoberezkin"
|
||||
}
|
||||
},
|
||||
"node_modules/ajv-formats/node_modules/json-schema-traverse": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
|
||||
"integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/ajv-keywords": {
|
||||
"version": "5.1.0",
|
||||
"resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
|
||||
@@ -7073,6 +7076,23 @@
|
||||
"url": "https://eslint.org/donate"
|
||||
}
|
||||
},
|
||||
"node_modules/eslint-plugin-expo/node_modules/ajv": {
|
||||
"version": "6.12.6",
|
||||
"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
|
||||
"integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"fast-deep-equal": "^3.1.1",
|
||||
"fast-json-stable-stringify": "^2.0.0",
|
||||
"json-schema-traverse": "^0.4.1",
|
||||
"uri-js": "^4.2.2"
|
||||
},
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/epoberezkin"
|
||||
}
|
||||
},
|
||||
"node_modules/eslint-plugin-expo/node_modules/eslint": {
|
||||
"version": "9.39.2",
|
||||
"resolved": "https://registry.npmjs.org/eslint/-/eslint-9.39.2.tgz",
|
||||
@@ -7221,6 +7241,13 @@
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/eslint-plugin-expo/node_modules/json-schema-traverse": {
|
||||
"version": "0.4.1",
|
||||
"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
|
||||
"integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/eslint-plugin-import": {
|
||||
"version": "2.32.0",
|
||||
"resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.32.0.tgz",
|
||||
@@ -7391,6 +7418,30 @@
|
||||
"url": "https://opencollective.com/eslint"
|
||||
}
|
||||
},
|
||||
"node_modules/eslint/node_modules/ajv": {
|
||||
"version": "6.12.6",
|
||||
"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
|
||||
"integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"fast-deep-equal": "^3.1.1",
|
||||
"fast-json-stable-stringify": "^2.0.0",
|
||||
"json-schema-traverse": "^0.4.1",
|
||||
"uri-js": "^4.2.2"
|
||||
},
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/epoberezkin"
|
||||
}
|
||||
},
|
||||
"node_modules/eslint/node_modules/json-schema-traverse": {
|
||||
"version": "0.4.1",
|
||||
"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
|
||||
"integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/espree": {
|
||||
"version": "9.6.1",
|
||||
"resolved": "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz",
|
||||
@@ -9838,10 +9889,9 @@
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/json-schema-traverse": {
|
||||
"version": "0.4.1",
|
||||
"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
|
||||
"integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
|
||||
"dev": true,
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
|
||||
"integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/json-stable-stringify-without-jsonify": {
|
||||
@@ -13479,28 +13529,6 @@
|
||||
"url": "https://opencollective.com/webpack"
|
||||
}
|
||||
},
|
||||
"node_modules/schema-utils/node_modules/ajv": {
|
||||
"version": "8.18.0",
|
||||
"resolved": "https://registry.npmjs.org/ajv/-/ajv-8.18.0.tgz",
|
||||
"integrity": "sha512-PlXPeEWMXMZ7sPYOHqmDyCJzcfNrUr3fGNKtezX14ykXOEIvyK81d+qydx89KY5O71FKMPaQ2vBfBFI5NHR63A==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"fast-deep-equal": "^3.1.3",
|
||||
"fast-uri": "^3.0.1",
|
||||
"json-schema-traverse": "^1.0.0",
|
||||
"require-from-string": "^2.0.2"
|
||||
},
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/epoberezkin"
|
||||
}
|
||||
},
|
||||
"node_modules/schema-utils/node_modules/json-schema-traverse": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
|
||||
"integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/selfsigned": {
|
||||
"version": "2.4.1",
|
||||
"resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-2.4.1.tgz",
|
||||
|
||||
41
package.json
41
package.json
@@ -10,39 +10,44 @@
|
||||
"lint": "eslint . --ext .ts,.tsx"
|
||||
},
|
||||
"dependencies": {
|
||||
"@gorhom/bottom-sheet": "^5.0.0",
|
||||
"ajv": "^8.18.0",
|
||||
"ajv-keywords": "^5.1.0",
|
||||
"expo": "~52.0.0",
|
||||
"expo-crypto": "~13.0.0",
|
||||
"expo-router": "~4.0.0",
|
||||
"expo-sqlite": "~15.0.0",
|
||||
"expo-location": "~18.0.0",
|
||||
"expo-local-authentication": "~14.0.0",
|
||||
"expo-camera": "~16.0.0",
|
||||
"expo-sharing": "~12.0.0",
|
||||
"expo-crypto": "~13.0.0",
|
||||
"expo-document-picker": "~12.0.0",
|
||||
"expo-file-system": "~18.0.0",
|
||||
"expo-local-authentication": "~14.0.0",
|
||||
"expo-location": "~18.0.0",
|
||||
"expo-router": "~4.0.0",
|
||||
"expo-secure-store": "~14.0.1",
|
||||
"expo-sharing": "~12.0.0",
|
||||
"expo-sqlite": "~15.0.0",
|
||||
"lucide-react-native": "^0.460.0",
|
||||
"nativewind": "^4.0.0",
|
||||
"react": "18.3.1",
|
||||
"react-native": "0.76.7",
|
||||
"expo-secure-store": "~14.0.1",
|
||||
"react-native-gesture-handler": "~2.20.0",
|
||||
"react-native-map-clustering": "^1.1.0",
|
||||
"react-native-maps": "1.27.1",
|
||||
"react-native-qrcode-svg": "^6.3.0",
|
||||
"react-native-reanimated": "~3.16.0",
|
||||
"react-native-safe-area-context": "4.12.0",
|
||||
"react-native-screens": "~4.0.0",
|
||||
"react-native-gesture-handler": "~2.20.0",
|
||||
"react-native-reanimated": "~3.16.0",
|
||||
"@gorhom/bottom-sheet": "^5.0.0",
|
||||
"zustand": "^5.0.0",
|
||||
"nativewind": "^4.0.0",
|
||||
"lucide-react-native": "^0.460.0",
|
||||
"react-native-svg": "15.8.0",
|
||||
"react-native-maps": "1.27.1",
|
||||
"react-native-map-clustering": "^1.1.0"
|
||||
"zustand": "^5.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.25.0",
|
||||
"@types/react": "~18.3.12",
|
||||
"typescript": "^5.3.0",
|
||||
"tailwindcss": "^3.4.0",
|
||||
"eslint": "^8.57.0",
|
||||
"eslint-config-expo": "~8.0.0",
|
||||
"prettier": "^3.3.0"
|
||||
"prettier": "^3.3.0",
|
||||
"tailwindcss": "^3.4.0",
|
||||
"typescript": "^5.3.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=18.0.0"
|
||||
}
|
||||
}
|
||||
@@ -4,6 +4,13 @@
|
||||
"strict": true,
|
||||
"paths": {
|
||||
"@/*": ["./*"]
|
||||
}
|
||||
}
|
||||
},
|
||||
"types": ["nativewind/types"]
|
||||
},
|
||||
"include": [
|
||||
"**/*.ts",
|
||||
"**/*.tsx",
|
||||
".expo/types/**/*.d.ts",
|
||||
"expo-env.d.ts"
|
||||
]
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user