Field Service App

Build a field service app that:
• Documents every service visit
• Records before/after photos
• Captures technician location
• Creates verifiable service logs

Perfect for HVAC, plumbing, electrical, and maintenance companies.

npx create-expo-app FieldServiceApp
cd FieldServiceApp
npm install @immutis/react-native

# Or add to existing app
npm install @immutis/react-native

// services/auth.ts
import { supabase } from '@supabase/supabase-js'

export async function loginTechnician(email: string, password: string) {
  const { data, error } = await supabase.auth.signInWithPassword({
    email,
    password
  })
  
  if (error) throw error
  return data.user
}

// screens/ServiceVisit.tsx
import { useImmutis } from '@immutis/react-native'

export function ServiceVisitScreen({ route, navigation }) {
  const { capture } = useImmutis()
  const [step, setStep] = useState('before') // 'before' | 'work' | 'after'
  
  const captureBefore = async () => {
    const evidence = await capture({
      type: 'photo',
      location: true,
      timestamp: true,
      metadata: {
        visitId: visit.id,
        step: 'before',
        technicianId: technician.id
      }
    })
    
    setBeforeEvidence(evidence)
    setStep('work')
  }
  
  return (
    <View>
      <Text>Step: {step.toUpperCase()}</Text>
      <Button onPress={captureBefore} disabled={step !== 'before'}>
        Capture Before Photo
      </Button>
    </View>
  )
}

// Continue documenting during the job
const captureWorkUpdate = async (description: string) => {
  const evidence = await capture({
    type: 'photo',
    location: true,
    timestamp: true,
    metadata: {
      visitId: visit.id,
      step: 'work',
      description // e.g., "Replaced filter", "Fixed leak"
    }
  })
  
  // Work updates create a timeline
  workLogs.push(evidence)
}

// Capture completion photo
const captureAfter = async () => {
  const evidence = await capture({
    type: 'photo',
    location: true,
    timestamp: true,
    metadata: {
      visitId: visit.id,
      step: 'after'
    }
  })
  
  // Complete the visit
  await completeVisit(visit.id, {
    before: beforeEvidence,
    work: workLogs,
    after: evidence
  })
}

// Capture customer signature
import { SignatureCapture } from 'react-native-signature-canvas'

<SignatureCapture
  onOK={(signature) => saveSignature(signature)}
  onClear={() => setSignature(null)}
/>

// Store with visit
const completeVisit = async (visitId, data) => {
  await db.visit.update({
    where: { id: visitId },
    data: {
      ...data,
      customerSignature: data.signature,
      completedAt: new Date()
    }
  })
}

// Generate PDF report for customer
import { PdfGenerator } from '@immutis/reportkit'

async function generateReport(visitId) {
  const visit = await getVisit(visitId)
  
  const pdf = await PdfGenerator.create({
    title: 'Service Report',
    sections: [
      { title: 'Before', image: visit.before.thumbnail },
      { title: 'Work Performed', items: visit.work },
      { title: 'After', image: visit.after.thumbnail },
      { title: 'Location', data: visit.before.location },
      { title: 'Signature', image: visit.customerSignature }
    ]
  })
  
  // Email to customer
  await emailReport(customer.email, pdf)
}

1. Technician logs in
2. Capture before photo
3. Document work (multiple photos)
4. Capture after photo
5. Customer signs
6. Generate PDF report

Every service call is now fully documented and verifiable.