export function PatientPage()

in 3-ai-native-e2e-sample/frontend/src/pages/patient.tsx [11:67]
52 lines of code
8 McCabe index (conditional complexity)

export function PatientPage() {
  const [patientData, setPatientData] = useState<PatientData>({
    age: '',
    gender: '',
    conditions: '',
    medications: ''
  })
  const [eligibility, setEligibility] = useState<EligibilityResponse | null>(null)
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)

  const handleCheckEligibility = async () => {
    if (!patientData.age || !patientData.gender) {
      setError('Please fill in at least age and gender')
      return
    }

    setLoading(true)
    setError(null)
    try {
      const { data, error: apiError } = await api.checkEligibility(patientData)
      if (apiError) {
        throw new Error(apiError)
      }
      setEligibility(data ?? null)
    } catch (error) {
      setError(error instanceof Error ? error.message : 'Failed to check eligibility')
      setEligibility(null)
    } finally {
      setLoading(false)
    }
  }

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl sm:text-3xl font-bold tracking-tight">Clinical Trial Eligibility Explorer</h1>
        <p className="text-base sm:text-lg text-muted-foreground mt-2">
          Explore potential clinical trial matches based on patient information. This is a demonstration tool and not intended for medical decisions.
        </p>
      </div>

      {error && (
        <Card className="border-destructive">
          <CardContent className="p-6">
            <p className="text-center text-destructive">{error}</p>
          </CardContent>
        </Card>
      )}

      <div className="grid md:grid-cols-2 gap-6">
        <Card>
          <CardHeader>
            <CardTitle>Patient Information</CardTitle>
          </CardHeader>
          <CardContent>
            <form className="space-y-4" onSubmit={(e) => e.preventDefault()}>