create-crm-starter 0.1.0

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

@@ -0,0 +1,143 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useLocalSearchParams } from 'expo-router';
+import * as WebBrowser from 'expo-web-browser';
+import {
+  ActivityIndicator,
+  Alert,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
+import { api } from '@/lib/api';
+import { apiBaseUrl } from '@/lib/auth';
+import { money, statusLabel } from '@/lib/format';
+import { theme } from '@/lib/theme';
+
+export default function InvoiceScreen() {
+  const { id } = useLocalSearchParams<{ id: string }>();
+  const jobId = String(id);
+  const qc = useQueryClient();
+
+  const { data, isLoading } = useQuery({
+    queryKey: ['job-invoice', jobId],
+    queryFn: () => api.jobInvoice(jobId),
+  });
+
+  const create = useMutation({
+    mutationFn: () => api.createInvoiceFromJob(jobId),
+    onSuccess: () => qc.invalidateQueries({ queryKey: ['job-invoice', jobId] }),
+    onError: (e) => Alert.alert('Could not invoice', e instanceof Error ? e.message : 'Error'),
+  });
+
+  const pay = useMutation({
+    mutationFn: (amount: number) =>
+      api.recordPayment(data!.invoice!.id, { amount, method: 'cash' }),
+    onSuccess: () => qc.invalidateQueries({ queryKey: ['job-invoice', jobId] }),
+    onError: () => Alert.alert('Error', 'Could not record payment.'),
+  });
+
+  if (isLoading) {
+    return (
+      <View style={styles.center}>
+        <ActivityIndicator color={theme.primary} />
+      </View>
+    );
+  }
+
+  const invoice = data?.invoice ?? null;
+
+  if (!invoice) {
+    return (
+      <View style={styles.center}>
+        <Text style={styles.muted}>No invoice for this job yet.</Text>
+        <Pressable style={styles.primaryBtn} onPress={() => create.mutate()} disabled={create.isPending}>
+          <Text style={styles.primaryText}>{create.isPending ? 'Creating…' : 'Create invoice from job'}</Text>
+        </Pressable>
+      </View>
+    );
+  }
+
+  async function openCardPayment() {
+    if (!data?.payPath) return;
+    await WebBrowser.openBrowserAsync(`${apiBaseUrl}${data.payPath}`);
+    qc.invalidateQueries({ queryKey: ['job-invoice', jobId] });
+  }
+
+  function recordCash() {
+    Alert.alert('Record cash payment', `Mark ${money(invoice!.amountDue)} as paid in cash?`, [
+      { text: 'Cancel', style: 'cancel' },
+      { text: 'Confirm', onPress: () => pay.mutate(invoice!.amountDue) },
+    ]);
+  }
+
+  return (
+    <ScrollView style={styles.screen} contentContainerStyle={styles.content}>
+      <View style={styles.card}>
+        <View style={styles.row}>
+          <Text style={styles.num}>{invoice.invoiceNumber}</Text>
+          <View style={styles.badge}>
+            <Text style={styles.badgeText}>{statusLabel(invoice.status)}</Text>
+          </View>
+        </View>
+        {invoice.lineItems.map((li, i) => (
+          <View key={i} style={styles.line}>
+            <Text style={styles.body}>
+              {li.qty} × {li.description}
+            </Text>
+            <Text style={styles.body}>{money(li.qty * li.unitPrice)}</Text>
+          </View>
+        ))}
+        <View style={styles.divider} />
+        <View style={styles.line}>
+          <Text style={styles.body}>Total</Text>
+          <Text style={styles.body}>{money(invoice.total)}</Text>
+        </View>
+        <View style={styles.line}>
+          <Text style={styles.muted}>Paid</Text>
+          <Text style={styles.muted}>{money(invoice.amountPaid)}</Text>
+        </View>
+        <View style={styles.line}>
+          <Text style={styles.due}>Amount due</Text>
+          <Text style={styles.due}>{money(invoice.amountDue)}</Text>
+        </View>
+      </View>
+
+      {invoice.amountDue > 0 ? (
+        <View style={styles.actions}>
+          <Pressable style={styles.primaryBtn} onPress={openCardPayment}>
+            <Text style={styles.primaryText}>Take card payment</Text>
+          </Pressable>
+          <Pressable style={styles.secondaryBtn} onPress={recordCash} disabled={pay.isPending}>
+            <Text style={styles.secondaryText}>{pay.isPending ? 'Saving…' : 'Record cash payment'}</Text>
+          </Pressable>
+        </View>
+      ) : (
+        <Text style={styles.paidNote}>Paid in full ✓</Text>
+      )}
+    </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, gap: 16, padding: 24 },
+  muted: { color: theme.muted },
+  card: { backgroundColor: theme.card, borderWidth: 1, borderColor: theme.border, borderRadius: 12, padding: 16, gap: 6 },
+  row: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 6 },
+  num: { fontSize: 18, fontWeight: '700', color: theme.text },
+  badge: { backgroundColor: theme.bg, borderRadius: 999, paddingHorizontal: 10, paddingVertical: 3 },
+  badgeText: { fontSize: 12, color: theme.muted, fontWeight: '600' },
+  line: { flexDirection: 'row', justifyContent: 'space-between' },
+  body: { fontSize: 15, color: theme.text },
+  divider: { height: 1, backgroundColor: theme.border, marginVertical: 6 },
+  due: { fontSize: 16, fontWeight: '700', color: theme.primary },
+  actions: { gap: 10 },
+  primaryBtn: { backgroundColor: theme.primary, borderRadius: 10, paddingVertical: 14, alignItems: 'center' },
+  primaryText: { color: '#fff', fontWeight: '700', fontSize: 16 },
+  secondaryBtn: { backgroundColor: theme.card, borderWidth: 1, borderColor: theme.border, borderRadius: 10, paddingVertical: 14, alignItems: 'center' },
+  secondaryText: { color: theme.text, fontWeight: '600', fontSize: 16 },
+  paidNote: { textAlign: 'center', color: theme.success, fontWeight: '700', fontSize: 16, marginTop: 8 },
+});

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

@@ -0,0 +1,259 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import * as ImagePicker from 'expo-image-picker';
+import * as Linking from 'expo-linking';
+import { useLocalSearchParams, useRouter } from 'expo-router';
+import { useState } from 'react';
+import { features } from '@/app.features';
+import {
+  ActivityIndicator,
+  Alert,
+  Image,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
+import { api, uploadJobPhoto } from '@/lib/api';
+import { formatAddress, mapsUrl, money, statusLabel } from '@/lib/format';
+import { theme } from '@/lib/theme';
+import { SignaturePad } from '@/components/SignaturePad';
+
+export default function JobDetail() {
+  const { id } = useLocalSearchParams<{ id: string }>();
+  const jobId = String(id);
+  const qc = useQueryClient();
+  const router = useRouter();
+  const [signing, setSigning] = useState(false);
+  const [uploading, setUploading] = useState(false);
+
+  const { data, isLoading, isError } = useQuery({
+    queryKey: ['job', jobId],
+    queryFn: () => api.job(jobId),
+  });
+
+  const statusMutation = useMutation({
+    mutationFn: (status: string) => api.setStatus(jobId, status),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ['job', jobId] });
+      qc.invalidateQueries({ queryKey: ['jobs'] });
+    },
+    onError: () => Alert.alert('Error', 'Could not update status.'),
+  });
+
+  const { data: timeState } = useQuery({
+    queryKey: ['job-time', jobId],
+    queryFn: () => api.time(jobId),
+  });
+  const clockedIn = Boolean(timeState?.openEntryId);
+  const clock = useMutation({
+    mutationFn: async () => {
+      if (clockedIn) await api.clockOut(jobId);
+      else await api.clockIn(jobId);
+    },
+    onSuccess: () => qc.invalidateQueries({ queryKey: ['job-time', jobId] }),
+  });
+
+  async function addPhoto() {
+    const perm = await ImagePicker.requestCameraPermissionsAsync();
+    const result = perm.granted
+      ? await ImagePicker.launchCameraAsync({ quality: 0.6 })
+      : await ImagePicker.launchImageLibraryAsync({ quality: 0.6, mediaTypes: ['images'] });
+    if (result.canceled || !result.assets[0]) return;
+    setUploading(true);
+    try {
+      await uploadJobPhoto(jobId, result.assets[0].uri, 'image/jpeg', 'photo');
+      qc.invalidateQueries({ queryKey: ['job', jobId] });
+    } catch {
+      Alert.alert('Upload failed', 'Check the connection and try again.');
+    } finally {
+      setUploading(false);
+    }
+  }
+
+  async function onSignature(dataUri: string) {
+    setSigning(false);
+    setUploading(true);
+    try {
+      await uploadJobPhoto(jobId, dataUri, 'image/png', 'signature');
+      qc.invalidateQueries({ queryKey: ['job', jobId] });
+    } catch {
+      Alert.alert('Upload failed', 'Could not save the signature.');
+    } finally {
+      setUploading(false);
+    }
+  }
+
+  if (isLoading) {
+    return (
+      <View style={styles.center}>
+        <ActivityIndicator color={theme.primary} />
+      </View>
+    );
+  }
+  if (isError || !data) {
+    return (
+      <View style={styles.center}>
+        <Text style={styles.muted}>Could not load this job.</Text>
+      </View>
+    );
+  }
+
+  const { job, customer, attachments } = data;
+  const addr = customer?.serviceAddresses?.[0];
+  const phone = customer?.phones?.[0];
+
+  return (
+    <ScrollView style={styles.screen} contentContainerStyle={styles.content}>
+      <Text style={styles.customer}>{job.customerName}</Text>
+      <View style={styles.badge}>
+        <Text style={styles.badgeText}>{statusLabel(job.status)}</Text>
+      </View>
+      <Text style={styles.service}>{job.serviceType}</Text>
+
+      <View style={styles.actionsRow}>
+        {addr ? (
+          <Pressable style={styles.action} onPress={() => Linking.openURL(mapsUrl(addr))}>
+            <Text style={styles.actionText}>Navigate</Text>
+          </Pressable>
+        ) : null}
+        {phone ? (
+          <Pressable style={styles.action} onPress={() => Linking.openURL(`tel:${phone}`)}>
+            <Text style={styles.actionText}>Call</Text>
+          </Pressable>
+        ) : null}
+      </View>
+
+      {addr ? (
+        <View style={styles.section}>
+          <Text style={styles.sectionTitle}>Address</Text>
+          <Text style={styles.body}>{formatAddress(addr)}</Text>
+        </View>
+      ) : null}
+
+      <View style={styles.section}>
+        <Text style={styles.sectionTitle}>Line items</Text>
+        {job.lineItems.length === 0 ? (
+          <Text style={styles.muted}>No line items.</Text>
+        ) : (
+          job.lineItems.map((li, i) => (
+            <View key={i} style={styles.lineItem}>
+              <Text style={styles.body}>
+                {li.qty} × {li.description}
+              </Text>
+              <Text style={styles.body}>{money(li.qty * li.unitPrice)}</Text>
+            </View>
+          ))
+        )}
+        <View style={styles.totalRow}>
+          <Text style={styles.totalLabel}>Total</Text>
+          <Text style={styles.totalValue}>{money(job.total)}</Text>
+        </View>
+      </View>
+
+      {job.notes ? (
+        <View style={styles.section}>
+          <Text style={styles.sectionTitle}>Notes</Text>
+          <Text style={styles.body}>{job.notes}</Text>
+        </View>
+      ) : null}
+
+      <View style={styles.section}>
+        <Text style={styles.sectionTitle}>Photos &amp; signatures</Text>
+        <View style={styles.photoGrid}>
+          {attachments.map((a) => (
+            <Image key={a.id} source={{ uri: a.url }} style={styles.thumb} />
+          ))}
+        </View>
+        <View style={styles.actionsRow}>
+          <Pressable style={styles.action} onPress={addPhoto} disabled={uploading}>
+            <Text style={styles.actionText}>{uploading ? 'Uploading…' : 'Add photo'}</Text>
+          </Pressable>
+          <Pressable style={styles.action} onPress={() => setSigning(true)} disabled={uploading}>
+            <Text style={styles.actionText}>Signature</Text>
+          </Pressable>
+        </View>
+      </View>
+
+      <View style={styles.section}>
+        <Text style={styles.sectionTitle}>Work</Text>
+        <View style={styles.actionsRow}>
+          <Pressable style={[styles.action, clockedIn && styles.clockOn]} onPress={() => clock.mutate()}>
+            <Text style={styles.actionText}>{clockedIn ? 'Clock out' : 'Clock in'}</Text>
+          </Pressable>
+          <Pressable style={styles.action} onPress={() => router.push(`/(app)/job/${jobId}/checklist`)}>
+            <Text style={styles.actionText}>Checklist</Text>
+          </Pressable>
+        </View>
+        {features.invoices || features.estimates ? (
+          <View style={styles.actionsRow}>
+            {features.invoices ? (
+              <Pressable style={styles.action} onPress={() => router.push(`/(app)/job/${jobId}/invoice`)}>
+                <Text style={styles.actionText}>Invoice</Text>
+              </Pressable>
+            ) : null}
+            {features.estimates ? (
+              <Pressable
+                style={styles.action}
+                onPress={() =>
+                  router.push({
+                    pathname: '/(app)/estimate',
+                    params: { customerId: job.customerId, customerName: job.customerName },
+                  })
+                }
+              >
+                <Text style={styles.actionText}>New estimate</Text>
+              </Pressable>
+            ) : null}
+          </View>
+        ) : null}
+      </View>
+
+      <View style={styles.statusRow}>
+        <Pressable
+          style={[styles.statusBtn, styles.start]}
+          onPress={() => statusMutation.mutate('in_progress')}
+        >
+          <Text style={styles.statusText}>Start job</Text>
+        </Pressable>
+        <Pressable
+          style={[styles.statusBtn, styles.complete]}
+          onPress={() => statusMutation.mutate('completed')}
+        >
+          <Text style={styles.statusText}>Complete</Text>
+        </Pressable>
+      </View>
+
+      <SignaturePad visible={signing} onOK={onSignature} onCancel={() => setSigning(false)} />
+    </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  screen: { flex: 1, backgroundColor: theme.bg },
+  content: { padding: 16, gap: 8, paddingBottom: 40 },
+  center: { flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: theme.bg },
+  customer: { fontSize: 24, fontWeight: '700', color: theme.text },
+  badge: { alignSelf: 'flex-start', backgroundColor: theme.card, borderWidth: 1, borderColor: theme.border, borderRadius: 999, paddingHorizontal: 10, paddingVertical: 3 },
+  badgeText: { fontSize: 12, color: theme.muted, fontWeight: '600' },
+  service: { fontSize: 16, color: theme.muted, marginBottom: 4 },
+  actionsRow: { flexDirection: 'row', gap: 10, marginVertical: 6 },
+  action: { flex: 1, backgroundColor: theme.primary, borderRadius: 10, paddingVertical: 12, alignItems: 'center' },
+  actionText: { color: '#fff', fontWeight: '600' },
+  section: { backgroundColor: theme.card, borderWidth: 1, borderColor: theme.border, borderRadius: 12, padding: 14, gap: 6, marginTop: 6 },
+  sectionTitle: { fontSize: 13, fontWeight: '700', color: theme.muted, textTransform: 'uppercase' },
+  body: { fontSize: 15, color: theme.text },
+  muted: { fontSize: 14, color: theme.muted },
+  lineItem: { flexDirection: 'row', justifyContent: 'space-between' },
+  totalRow: { flexDirection: 'row', justifyContent: 'space-between', borderTopWidth: 1, borderTopColor: theme.border, paddingTop: 6, marginTop: 2 },
+  totalLabel: { fontSize: 15, fontWeight: '700', color: theme.text },
+  totalValue: { fontSize: 15, fontWeight: '700', color: theme.primary },
+  photoGrid: { flexDirection: 'row', flexWrap: 'wrap', gap: 8 },
+  thumb: { width: 72, height: 72, borderRadius: 8, backgroundColor: theme.bg },
+  statusRow: { flexDirection: 'row', gap: 10, marginTop: 12 },
+  statusBtn: { flex: 1, borderRadius: 10, paddingVertical: 15, alignItems: 'center' },
+  start: { backgroundColor: theme.accent },
+  complete: { backgroundColor: theme.success },
+  clockOn: { backgroundColor: theme.success },
+  statusText: { color: '#fff', fontWeight: '700', fontSize: 16 },
+});

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

@@ -0,0 +1,14 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { Stack } from 'expo-router';
+import { StatusBar } from 'expo-status-bar';
+import { useRef } from 'react';
+
+export default function RootLayout() {
+  const client = useRef(new QueryClient()).current;
+  return (
+    <QueryClientProvider client={client}>
+      <StatusBar style="dark" />
+      <Stack screenOptions={{ headerShown: false }} />
+    </QueryClientProvider>
+  );
+}

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

@@ -0,0 +1,23 @@
+import { Redirect } from 'expo-router';
+import { useEffect, useState } from 'react';
+import { ActivityIndicator, View } from 'react-native';
+import { getToken } from '@/lib/auth';
+import { theme } from '@/lib/theme';
+
+/** Entry point — route to the app or the sign-in screen based on a stored token. */
+export default function Index() {
+  const [state, setState] = useState<'loading' | 'in' | 'out'>('loading');
+
+  useEffect(() => {
+    getToken().then((t) => setState(t ? 'in' : 'out'));
+  }, []);
+
+  if (state === 'loading') {
+    return (
+      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: theme.bg }}>
+        <ActivityIndicator color={theme.primary} />
+      </View>
+    );
+  }
+  return state === 'in' ? <Redirect href="/(app)" /> : <Redirect href="/sign-in" />;
+}

package/template/extras/mobile/mobile/app/sign-in.tsx

@@ -0,0 +1,101 @@
+import { useRouter } from 'expo-router';
+import { useState } from 'react';
+import {
+  ActivityIndicator,
+  KeyboardAvoidingView,
+  Platform,
+  Pressable,
+  StyleSheet,
+  Text,
+  TextInput,
+  View,
+} from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { signIn } from '@/lib/auth';
+import { registerForPush } from '@/lib/push';
+import { appName, theme } from '@/lib/theme';
+
+export default function SignIn() {
+  const router = useRouter();
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState<string | null>(null);
+  const [busy, setBusy] = useState(false);
+
+  async function onSubmit() {
+    setError(null);
+    setBusy(true);
+    try {
+      await signIn(email.trim(), password);
+      void registerForPush();
+      router.replace('/(app)');
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Sign-in failed');
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <SafeAreaView style={styles.safe}>
+      <KeyboardAvoidingView
+        behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+        style={styles.container}
+      >
+        <Text style={styles.title}>{appName}</Text>
+        <Text style={styles.subtitle}>Field technician sign-in</Text>
+
+        <TextInput
+          style={styles.input}
+          placeholder="Email"
+          autoCapitalize="none"
+          keyboardType="email-address"
+          value={email}
+          onChangeText={setEmail}
+          placeholderTextColor={theme.muted}
+        />
+        <TextInput
+          style={styles.input}
+          placeholder="Password"
+          secureTextEntry
+          value={password}
+          onChangeText={setPassword}
+          placeholderTextColor={theme.muted}
+        />
+
+        {error ? <Text style={styles.error}>{error}</Text> : null}
+
+        <Pressable style={[styles.button, busy && styles.buttonBusy]} onPress={onSubmit} disabled={busy}>
+          {busy ? <ActivityIndicator color="#fff" /> : <Text style={styles.buttonText}>Sign in</Text>}
+        </Pressable>
+      </KeyboardAvoidingView>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  safe: { flex: 1, backgroundColor: theme.bg },
+  container: { flex: 1, justifyContent: 'center', padding: 24, gap: 12 },
+  title: { fontSize: 28, fontWeight: '700', color: theme.text, textAlign: 'center' },
+  subtitle: { fontSize: 15, color: theme.muted, textAlign: 'center', marginBottom: 16 },
+  input: {
+    backgroundColor: theme.card,
+    borderWidth: 1,
+    borderColor: theme.border,
+    borderRadius: 10,
+    paddingHorizontal: 14,
+    paddingVertical: 14,
+    fontSize: 16,
+    color: theme.text,
+  },
+  error: { color: theme.danger, fontSize: 14 },
+  button: {
+    backgroundColor: theme.primary,
+    borderRadius: 10,
+    paddingVertical: 15,
+    alignItems: 'center',
+    marginTop: 8,
+  },
+  buttonBusy: { opacity: 0.7 },
+  buttonText: { color: '#fff', fontSize: 16, fontWeight: '600' },
+});

package/template/extras/mobile/mobile/app.brand.ts

@@ -0,0 +1,14 @@
+/**
+ * Per-client branding for the field-tech app. This file is GENERATED by the
+ * create-crm-starter `mobile` installer from the business name + colors you
+ * entered at scaffold time, then overwritten on each `create-crm-starter add
+ * mobile`. Edit the scaffold inputs (not this file) to rebrand.
+ */
+export const brand = {
+  name: 'Field App',
+  slug: 'crm-mobile',
+  scheme: 'crmmobile',
+  bundleId: 'com.example.crmmobile',
+  primaryColor: '#0ea5e9',
+  accentColor: '#f59e0b',
+} as const;

package/template/extras/mobile/mobile/app.config.ts

@@ -0,0 +1,40 @@
+import type { ExpoConfig } from 'expo/config';
+import { brand } from './app.brand';
+
+/**
+ * Expo app config. Branding (name, scheme, bundle id, colors) comes from
+ * the generated app.brand.ts. The API URL the app talks to is read at
+ * runtime from EXPO_PUBLIC_API_URL (set in mobile/.env to your deployed
+ * CRM URL — see mobile/README.md).
+ */
+const config: ExpoConfig = {
+  name: brand.name,
+  slug: brand.slug,
+  scheme: brand.scheme,
+  version: '1.0.0',
+  orientation: 'portrait',
+  userInterfaceStyle: 'light',
+  newArchEnabled: true,
+  splash: {
+    backgroundColor: brand.primaryColor,
+    resizeMode: 'contain',
+  },
+  ios: {
+    bundleIdentifier: brand.bundleId,
+    supportsTablet: true,
+    infoPlist: {
+      NSCameraUsageDescription: 'Take photos of job sites and equipment.',
+      NSPhotoLibraryUsageDescription: 'Attach photos to a job.',
+    },
+  },
+  android: {
+    package: brand.bundleId,
+  },
+  plugins: ['expo-router', 'expo-secure-store', 'expo-image-picker', 'expo-notifications'],
+  extra: {
+    primaryColor: brand.primaryColor,
+    accentColor: brand.accentColor,
+  },
+};
+
+export default config;

package/template/extras/mobile/mobile/app.features.ts

@@ -0,0 +1,11 @@
+/**
+ * Which optional features this client's CRM exposes — GENERATED by the
+ * create-crm-starter `mobile` installer from your scaffold choices. The app
+ * hides buttons/tabs for features the backend doesn't have. (Checklists +
+ * time tracking are always available.)
+ */
+export const features = {
+  invoices: true,
+  estimates: true,
+  sms: true,
+} as const;

package/template/extras/mobile/mobile/components/SignaturePad.tsx

@@ -0,0 +1,60 @@
+import { useRef } from 'react';
+import { Modal, Pressable, StyleSheet, Text, View } from 'react-native';
+import SignatureScreen, { type SignatureViewRef } from 'react-native-signature-canvas';
+import { theme } from '@/lib/theme';
+
+/**
+ * Full-screen signature capture. Calls onOK with a base64 data URI
+ * ("data:image/png;base64,..."). The parent converts + uploads it.
+ */
+export function SignaturePad({
+  visible,
+  onOK,
+  onCancel,
+}: {
+  visible: boolean;
+  onOK: (dataUri: string) => void;
+  onCancel: () => void;
+}) {
+  const ref = useRef<SignatureViewRef>(null);
+
+  return (
+    <Modal visible={visible} animationType="slide" onRequestClose={onCancel}>
+      <View style={styles.container}>
+        <Text style={styles.title}>Customer signature</Text>
+        <View style={styles.canvas}>
+          <SignatureScreen
+            ref={ref}
+            onOK={onOK}
+            webStyle={`.m-signature-pad--footer { display: none; } body,html { height: 100%; }`}
+            backgroundColor="#ffffff"
+            penColor={theme.text}
+          />
+        </View>
+        <View style={styles.row}>
+          <Pressable style={[styles.btn, styles.secondary]} onPress={onCancel}>
+            <Text style={styles.secondaryText}>Cancel</Text>
+          </Pressable>
+          <Pressable style={[styles.btn, styles.secondary]} onPress={() => ref.current?.clearSignature()}>
+            <Text style={styles.secondaryText}>Clear</Text>
+          </Pressable>
+          <Pressable style={[styles.btn, styles.primary]} onPress={() => ref.current?.readSignature()}>
+            <Text style={styles.primaryText}>Save</Text>
+          </Pressable>
+        </View>
+      </View>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1, backgroundColor: theme.bg, padding: 16, gap: 12 },
+  title: { fontSize: 18, fontWeight: '700', color: theme.text, marginTop: 32 },
+  canvas: { flex: 1, borderWidth: 1, borderColor: theme.border, borderRadius: 12, overflow: 'hidden' },
+  row: { flexDirection: 'row', gap: 10 },
+  btn: { flex: 1, borderRadius: 10, paddingVertical: 14, alignItems: 'center' },
+  primary: { backgroundColor: theme.primary },
+  primaryText: { color: '#fff', fontWeight: '600' },
+  secondary: { backgroundColor: theme.card, borderWidth: 1, borderColor: theme.border },
+  secondaryText: { color: theme.text, fontWeight: '600' },
+});