create-crm-starter 0.1.0

package/template/extras/mobile/mobile/_dot_env.example

@@ -0,0 +1,5 @@
+# The deployed URL of THIS client's CRM (the Next.js app). The field app
+# talks to its /api/mobile/v1/* endpoints. For local dev against the web app
+# running on your machine, use your LAN IP (not localhost) so the phone can
+# reach it, e.g. http://192.168.1.50:3000
+EXPO_PUBLIC_API_URL=https://your-client-domain.com

package/template/extras/mobile/mobile/_dot_gitignore

@@ -0,0 +1,26 @@
+# Expo
+.expo/
+dist/
+web-build/
+expo-env.d.ts
+
+# Native
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+
+# Metro
+.metro-health-check*
+
+# Dependencies
+node_modules/
+
+# Env
+.env
+.env.local
+
+# macOS
+.DS_Store

package/template/extras/mobile/mobile/app/(app)/_layout.tsx

@@ -0,0 +1,37 @@
+import { Stack, useRouter } from 'expo-router';
+import { Pressable, Text } from 'react-native';
+import { features } from '@/app.features';
+import { theme } from '@/lib/theme';
+
+export default function AppLayout() {
+  const router = useRouter();
+  return (
+    <Stack
+      screenOptions={{
+        headerStyle: { backgroundColor: theme.primary },
+        headerTintColor: '#fff',
+        headerTitleStyle: { fontWeight: '700' },
+      }}
+    >
+      <Stack.Screen
+        name="index"
+        options={{
+          title: 'Today',
+          headerRight: features.sms
+            ? () => (
+                <Pressable onPress={() => router.push('/(app)/inbox')} hitSlop={12}>
+                  <Text style={{ color: '#fff', fontWeight: '600' }}>Inbox</Text>
+                </Pressable>
+              )
+            : undefined,
+        }}
+      />
+      <Stack.Screen name="job/[id]" options={{ title: 'Job' }} />
+      <Stack.Screen name="job/[id]/checklist" options={{ title: 'Checklist' }} />
+      <Stack.Screen name="job/[id]/invoice" options={{ title: 'Invoice' }} />
+      <Stack.Screen name="estimate" options={{ title: 'New estimate' }} />
+      <Stack.Screen name="inbox/index" options={{ title: 'Inbox' }} />
+      <Stack.Screen name="inbox/[customerId]" options={{ title: 'Conversation' }} />
+    </Stack>
+  );
+}

package/template/extras/mobile/mobile/app/(app)/estimate.tsx

@@ -0,0 +1,135 @@
+import { useMutation, useQuery } from '@tanstack/react-query';
+import { useLocalSearchParams, useRouter } from 'expo-router';
+import { useState } from 'react';
+import {
+  ActivityIndicator,
+  Alert,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
+import { api, type ApiPriceBookItem } from '@/lib/api';
+import { money } from '@/lib/format';
+import { theme } from '@/lib/theme';
+
+interface Line {
+  description: string;
+  qty: number;
+  unitPrice: number;
+  unitCost: number;
+}
+
+export default function EstimateBuilder() {
+  const router = useRouter();
+  const { customerId, customerName } = useLocalSearchParams<{ customerId: string; customerName?: string }>();
+  const [lines, setLines] = useState<Line[]>([]);
+
+  const { data, isLoading } = useQuery({ queryKey: ['price-book'], queryFn: () => api.priceBook() });
+
+  const submit = useMutation({
+    mutationFn: () =>
+      api.createEstimate({
+        customerId: String(customerId),
+        lineItems: lines.map((l) => ({ description: l.description, qty: l.qty, unitPrice: l.unitPrice, unitCost: l.unitCost })),
+      }),
+    onSuccess: () => {
+      Alert.alert('Estimate sent', 'The estimate was created.');
+      router.back();
+    },
+    onError: (e) => Alert.alert('Could not send', e instanceof Error ? e.message : 'Error'),
+  });
+
+  function addItem(it: ApiPriceBookItem) {
+    setLines((prev) => {
+      const found = prev.find((l) => l.description === it.name);
+      if (found) {
+        return prev.map((l) => (l.description === it.name ? { ...l, qty: l.qty + 1 } : l));
+      }
+      return [...prev, { description: it.name, qty: it.defaultQty || 1, unitPrice: it.unitPrice, unitCost: it.unitCost }];
+    });
+  }
+
+  function removeLine(desc: string) {
+    setLines((prev) => prev.filter((l) => l.description !== desc));
+  }
+
+  const total = lines.reduce((acc, l) => acc + l.qty * l.unitPrice, 0);
+
+  if (isLoading) {
+    return (
+      <View style={styles.center}>
+        <ActivityIndicator color={theme.primary} />
+      </View>
+    );
+  }
+
+  return (
+    <View style={styles.screen}>
+      <ScrollView contentContainerStyle={styles.content}>
+        <Text style={styles.heading}>Estimate for {customerName ?? 'customer'}</Text>
+
+        {lines.length > 0 ? (
+          <View style={styles.card}>
+            <Text style={styles.cardTitle}>Line items</Text>
+            {lines.map((l) => (
+              <Pressable key={l.description} style={styles.line} onLongPress={() => removeLine(l.description)}>
+                <Text style={styles.body}>
+                  {l.qty} × {l.description}
+                </Text>
+                <Text style={styles.body}>{money(l.qty * l.unitPrice)}</Text>
+              </Pressable>
+            ))}
+            <Text style={styles.hint}>Long-press a line to remove.</Text>
+          </View>
+        ) : (
+          <Text style={styles.muted}>Tap price-book items below to add them.</Text>
+        )}
+
+        {(data?.categories ?? []).map((cat) => (
+          <View key={cat.id} style={styles.card}>
+            <Text style={styles.cardTitle}>{cat.name}</Text>
+            {cat.items.map((it) => (
+              <Pressable key={it.id} style={styles.pbItem} onPress={() => addItem(it)}>
+                <Text style={styles.body}>{it.name}</Text>
+                <Text style={styles.price}>{money(it.unitPrice)}</Text>
+              </Pressable>
+            ))}
+          </View>
+        ))}
+      </ScrollView>
+
+      <View style={styles.footer}>
+        <Text style={styles.total}>Total {money(total)}</Text>
+        <Pressable
+          style={[styles.sendBtn, lines.length === 0 && styles.disabled]}
+          disabled={lines.length === 0 || submit.isPending}
+          onPress={() => submit.mutate()}
+        >
+          <Text style={styles.sendText}>{submit.isPending ? 'Sending…' : 'Send estimate'}</Text>
+        </Pressable>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  screen: { flex: 1, backgroundColor: theme.bg },
+  center: { flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: theme.bg },
+  content: { padding: 16, gap: 12, paddingBottom: 24 },
+  heading: { fontSize: 20, fontWeight: '700', color: theme.text },
+  muted: { color: theme.muted },
+  card: { backgroundColor: theme.card, borderWidth: 1, borderColor: theme.border, borderRadius: 12, padding: 14 },
+  cardTitle: { fontSize: 13, fontWeight: '700', color: theme.muted, textTransform: 'uppercase', marginBottom: 8 },
+  line: { flexDirection: 'row', justifyContent: 'space-between', paddingVertical: 6 },
+  body: { fontSize: 15, color: theme.text },
+  hint: { fontSize: 12, color: theme.muted, marginTop: 6 },
+  pbItem: { flexDirection: 'row', justifyContent: 'space-between', paddingVertical: 10, borderTopWidth: 1, borderTopColor: theme.border },
+  price: { fontSize: 15, color: theme.primary, fontWeight: '600' },
+  footer: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', padding: 16, borderTopWidth: 1, borderTopColor: theme.border, backgroundColor: theme.card },
+  total: { fontSize: 18, fontWeight: '700', color: theme.text },
+  sendBtn: { backgroundColor: theme.primary, borderRadius: 10, paddingVertical: 12, paddingHorizontal: 24 },
+  disabled: { opacity: 0.4 },
+  sendText: { color: '#fff', fontWeight: '700', fontSize: 16 },
+});

package/template/extras/mobile/mobile/app/(app)/inbox/[customerId].tsx

@@ -0,0 +1,103 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useLocalSearchParams } from 'expo-router';
+import { useState } from 'react';
+import {
+  ActivityIndicator,
+  FlatList,
+  KeyboardAvoidingView,
+  Platform,
+  Pressable,
+  StyleSheet,
+  Text,
+  TextInput,
+  View,
+} from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { api, type ApiMessage } from '@/lib/api';
+import { theme } from '@/lib/theme';
+
+export default function Thread() {
+  const { customerId, phone } = useLocalSearchParams<{ customerId: string; name?: string; phone?: string }>();
+  const cid = String(customerId);
+  const qc = useQueryClient();
+  const [text, setText] = useState('');
+
+  const { data, isLoading } = useQuery({
+    queryKey: ['sms-thread', cid],
+    queryFn: () => api.smsMessages(cid),
+  });
+
+  const send = useMutation({
+    mutationFn: (body: string) => api.sendSms({ to: phone ? String(phone) : '', body, customerId: cid }),
+    onSuccess: () => {
+      setText('');
+      qc.invalidateQueries({ queryKey: ['sms-thread', cid] });
+      qc.invalidateQueries({ queryKey: ['sms-threads'] });
+    },
+  });
+
+  if (isLoading) {
+    return (
+      <View style={styles.center}>
+        <ActivityIndicator color={theme.primary} />
+      </View>
+    );
+  }
+
+  const messages = data?.messages ?? [];
+
+  return (
+    <SafeAreaView style={styles.safe} edges={['bottom']}>
+      <KeyboardAvoidingView
+        style={styles.flex}
+        behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+        keyboardVerticalOffset={90}
+      >
+        <FlatList
+          data={messages}
+          keyExtractor={(m) => m.id}
+          contentContainerStyle={styles.list}
+          renderItem={({ item }: { item: ApiMessage }) => (
+            <View style={[styles.bubble, item.direction === 'outbound' ? styles.out : styles.in]}>
+              <Text style={item.direction === 'outbound' ? styles.outText : styles.inText}>{item.body}</Text>
+            </View>
+          )}
+        />
+        <View style={styles.composer}>
+          <TextInput
+            style={styles.input}
+            placeholder="Message…"
+            placeholderTextColor={theme.muted}
+            value={text}
+            onChangeText={setText}
+            multiline
+          />
+          <Pressable
+            style={[styles.sendBtn, (!text.trim() || send.isPending) && styles.disabled]}
+            disabled={!text.trim() || send.isPending}
+            onPress={() => send.mutate(text.trim())}
+          >
+            <Text style={styles.sendText}>Send</Text>
+          </Pressable>
+        </View>
+      </KeyboardAvoidingView>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  safe: { flex: 1, backgroundColor: theme.bg },
+  flex: { flex: 1 },
+  center: { flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: theme.bg },
+  list: { padding: 16, gap: 8 },
+  bubble: { maxWidth: '80%', borderRadius: 14, paddingHorizontal: 12, paddingVertical: 8 },
+  out: { backgroundColor: theme.primary, alignSelf: 'flex-end' },
+  in: { backgroundColor: theme.card, borderWidth: 1, borderColor: theme.border, alignSelf: 'flex-start' },
+  outText: { color: '#fff', fontSize: 15 },
+  inText: { color: theme.text, fontSize: 15 },
+  composer: { flexDirection: 'row', alignItems: 'flex-end', gap: 8, padding: 12, borderTopWidth: 1, borderTopColor: theme.border, backgroundColor: theme.card },
+  input: { flex: 1, maxHeight: 120, backgroundColor: theme.bg, borderWidth: 1, borderColor: theme.border, borderRadius: 18, paddingHorizontal: 14, paddingVertical: 10, fontSize: 15, color: theme.text },
+  sendBtn: { backgroundColor: theme.primary, borderRadius: 18, paddingHorizontal: 18, paddingVertical: 10 },
+  disabled: { opacity: 0.4 },
+  sendText: { color: '#fff', fontWeight: '700' },
+});

package/template/extras/mobile/mobile/app/(app)/inbox/index.tsx

@@ -0,0 +1,70 @@
+import { useQuery } from '@tanstack/react-query';
+import { Link } from 'expo-router';
+import {
+  ActivityIndicator,
+  FlatList,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { api } from '@/lib/api';
+import { theme } from '@/lib/theme';
+
+export default function Inbox() {
+  const { data, isLoading, refetch, isRefetching } = useQuery({
+    queryKey: ['sms-threads'],
+    queryFn: () => api.smsThreads(),
+  });
+
+  if (isLoading) {
+    return (
+      <View style={styles.center}>
+        <ActivityIndicator color={theme.primary} />
+      </View>
+    );
+  }
+
+  const threads = data?.threads ?? [];
+
+  return (
+    <SafeAreaView style={styles.safe} edges={['bottom']}>
+      <FlatList
+        data={threads}
+        keyExtractor={(t) => t.customerId}
+        contentContainerStyle={threads.length === 0 ? styles.emptyWrap : styles.list}
+        onRefresh={refetch}
+        refreshing={isRefetching}
+        ListEmptyComponent={<Text style={styles.empty}>No conversations yet.</Text>}
+        renderItem={({ item }) => (
+          <Link
+            href={{
+              pathname: '/(app)/inbox/[customerId]',
+              params: { customerId: item.customerId, name: item.customerName, phone: item.customerPhone },
+            }}
+            asChild
+          >
+            <Pressable style={styles.row}>
+              <Text style={styles.name}>{item.customerName}</Text>
+              <Text style={styles.preview} numberOfLines={1}>
+                {item.lastBody}
+              </Text>
+            </Pressable>
+          </Link>
+        )}
+      />
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  safe: { flex: 1, backgroundColor: theme.bg },
+  center: { flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: theme.bg },
+  list: { padding: 16, gap: 10 },
+  emptyWrap: { flexGrow: 1, padding: 16, alignItems: 'center', justifyContent: 'center' },
+  empty: { color: theme.muted },
+  row: { backgroundColor: theme.card, borderWidth: 1, borderColor: theme.border, borderRadius: 12, padding: 14, gap: 4 },
+  name: { fontSize: 16, fontWeight: '600', color: theme.text },
+  preview: { fontSize: 14, color: theme.muted },
+});

package/template/extras/mobile/mobile/app/(app)/index.tsx

@@ -0,0 +1,111 @@
+import { useQuery } from '@tanstack/react-query';
+import { Link, useRouter } from 'expo-router';
+import {
+  ActivityIndicator,
+  FlatList,
+  Pressable,
+  RefreshControl,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { api, type ApiJob } from '@/lib/api';
+import { signOut } from '@/lib/auth';
+import { money, statusLabel } from '@/lib/format';
+import { theme } from '@/lib/theme';
+
+export default function Today() {
+  const router = useRouter();
+  const { data, isLoading, isError, refetch, isRefetching } = useQuery({
+    queryKey: ['jobs', 'today'],
+    queryFn: () => api.jobs('today'),
+  });
+
+  async function onSignOut() {
+    await signOut();
+    router.replace('/sign-in');
+  }
+
+  if (isLoading) {
+    return (
+      <View style={styles.center}>
+        <ActivityIndicator color={theme.primary} />
+      </View>
+    );
+  }
+
+  const jobs = data?.jobs ?? [];
+
+  return (
+    <SafeAreaView style={styles.safe} edges={['bottom']}>
+      <FlatList
+        data={jobs}
+        keyExtractor={(j) => j.id}
+        contentContainerStyle={jobs.length === 0 ? styles.emptyWrap : styles.list}
+        refreshControl={<RefreshControl refreshing={isRefetching} onRefresh={refetch} tintColor={theme.primary} />}
+        ListHeaderComponent={
+          <View style={styles.header}>
+            <Text style={styles.heading}>Today&apos;s jobs</Text>
+            <Pressable onPress={onSignOut}>
+              <Text style={styles.signOut}>Sign out</Text>
+            </Pressable>
+          </View>
+        }
+        ListEmptyComponent={
+          <Text style={styles.empty}>
+            {isError ? 'Could not load jobs. Pull to retry.' : 'No jobs scheduled for today.'}
+          </Text>
+        }
+        renderItem={({ item }) => <JobRow job={item} />}
+      />
+    </SafeAreaView>
+  );
+}
+
+function JobRow({ job }: { job: ApiJob }) {
+  return (
+    <Link href={{ pathname: '/(app)/job/[id]', params: { id: job.id } }} asChild>
+      <Pressable style={styles.card}>
+        <View style={styles.cardTop}>
+          <Text style={styles.customer}>{job.customerName}</Text>
+          <View style={styles.badge}>
+            <Text style={styles.badgeText}>{statusLabel(job.status)}</Text>
+          </View>
+        </View>
+        <Text style={styles.service}>{job.serviceType}</Text>
+        <View style={styles.cardBottom}>
+          <Text style={styles.window}>{job.arrivalWindow ?? 'Anytime'}</Text>
+          <Text style={styles.total}>{money(job.total)}</Text>
+        </View>
+      </Pressable>
+    </Link>
+  );
+}
+
+const styles = StyleSheet.create({
+  safe: { flex: 1, backgroundColor: theme.bg },
+  center: { flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: theme.bg },
+  list: { padding: 16, gap: 12 },
+  emptyWrap: { flexGrow: 1, padding: 16 },
+  header: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 },
+  heading: { fontSize: 22, fontWeight: '700', color: theme.text },
+  signOut: { color: theme.muted, fontSize: 14 },
+  empty: { textAlign: 'center', color: theme.muted, marginTop: 48 },
+  card: {
+    backgroundColor: theme.card,
+    borderRadius: 12,
+    padding: 16,
+    borderWidth: 1,
+    borderColor: theme.border,
+    gap: 6,
+  },
+  cardTop: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' },
+  customer: { fontSize: 17, fontWeight: '600', color: theme.text, flex: 1 },
+  badge: { backgroundColor: theme.bg, borderRadius: 999, paddingHorizontal: 10, paddingVertical: 3 },
+  badgeText: { fontSize: 12, color: theme.muted, fontWeight: '600' },
+  service: { fontSize: 15, color: theme.muted },
+  cardBottom: { flexDirection: 'row', justifyContent: 'space-between', marginTop: 4 },
+  window: { fontSize: 14, color: theme.text },
+  total: { fontSize: 14, fontWeight: '600', color: theme.primary },
+});

package/template/extras/mobile/mobile/app/(app)/job/[id]/checklist.tsx

@@ -0,0 +1,99 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useLocalSearchParams } from 'expo-router';
+import {
+  ActivityIndicator,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
+import { api, type ApiChecklist } from '@/lib/api';
+import { theme } from '@/lib/theme';
+
+export default function ChecklistScreen() {
+  const { id } = useLocalSearchParams<{ id: string }>();
+  const jobId = String(id);
+  const qc = useQueryClient();
+
+  const { data, isLoading } = useQuery({
+    queryKey: ['checklists', jobId],
+    queryFn: () => api.checklists(jobId),
+  });
+
+  const toggle = useMutation({
+    mutationFn: (v: { jobChecklistId: string; itemId: string; completed: boolean }) =>
+      api.setChecklistItem(jobId, v),
+    onSuccess: () => qc.invalidateQueries({ queryKey: ['checklists', jobId] }),
+  });
+
+  if (isLoading) {
+    return (
+      <View style={styles.center}>
+        <ActivityIndicator color={theme.primary} />
+      </View>
+    );
+  }
+
+  const checklists = data?.checklists ?? [];
+  if (checklists.length === 0) {
+    return (
+      <View style={styles.center}>
+        <Text style={styles.muted}>No checklist attached to this job.</Text>
+      </View>
+    );
+  }
+
+  return (
+    <ScrollView style={styles.screen} contentContainerStyle={styles.content}>
+      {checklists.map((cl: ApiChecklist) => (
+        <View key={cl.id} style={styles.card}>
+          <View style={styles.cardHead}>
+            <Text style={styles.title}>{cl.templateName}</Text>
+            <Text style={[styles.pct, cl.allRequiredComplete && styles.pctDone]}>{cl.progressPct}%</Text>
+          </View>
+          {cl.items.map((it) => (
+            <Pressable
+              key={it.id}
+              style={styles.item}
+              onPress={() =>
+                toggle.mutate({ jobChecklistId: cl.id, itemId: it.id, completed: !it.completed })
+              }
+            >
+              <View style={[styles.box, it.completed && styles.boxOn]}>
+                {it.completed ? <Text style={styles.check}>✓</Text> : null}
+              </View>
+              <Text style={[styles.label, it.completed && styles.labelDone]}>
+                {it.label}
+                {it.required ? <Text style={styles.req}> *</Text> : null}
+              </Text>
+            </Pressable>
+          ))}
+          {!cl.allRequiredComplete ? (
+            <Text style={styles.warn}>Complete all required (*) items before finishing the job.</Text>
+          ) : null}
+        </View>
+      ))}
+    </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  screen: { flex: 1, backgroundColor: theme.bg },
+  content: { padding: 16, gap: 12 },
+  center: { flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: theme.bg },
+  muted: { color: theme.muted },
+  card: { backgroundColor: theme.card, borderWidth: 1, borderColor: theme.border, borderRadius: 12, padding: 14 },
+  cardHead: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 },
+  title: { fontSize: 16, fontWeight: '700', color: theme.text },
+  pct: { fontSize: 14, fontWeight: '700', color: theme.muted },
+  pctDone: { color: theme.success },
+  item: { flexDirection: 'row', alignItems: 'center', gap: 12, paddingVertical: 10 },
+  box: { width: 24, height: 24, borderRadius: 6, borderWidth: 2, borderColor: theme.border, alignItems: 'center', justifyContent: 'center' },
+  boxOn: { backgroundColor: theme.success, borderColor: theme.success },
+  check: { color: '#fff', fontWeight: '800', fontSize: 14 },
+  label: { fontSize: 15, color: theme.text, flex: 1 },
+  labelDone: { color: theme.muted, textDecorationLine: 'line-through' },
+  req: { color: theme.danger },
+  warn: { marginTop: 8, fontSize: 13, color: theme.danger },
+});