pediatric-ai-scribe-v3/client/src/pages/Dictation.tsx

// ============================================================
// DICTATION — voice dictation → HPI via /api/generate-hpi-dictation
//
// Minimum-viable port: demographics + transcript textarea + generate.
// The vanilla version also has MediaRecorder-based audio capture,
// transcription upload, save/load popover, refine, shorten, and
// Nextcloud export. Those each land in follow-up commits — this
// first pass proves the generate-HPI wire protocol works from React.
// ============================================================

import { useState } from 'react';
import { useMutation } from '@tanstack/react-query';
import { api, ApiError } from '@/lib/api';
import type { HpiOk } from '@/shared/types';
import { HpiEncounterRequestSchema, type HpiEncounterRequest } from '@/shared/schemas';

type Setting = 'outpatient' | 'inpatient';

export default function Dictation() {
  const [patientAge, setPatientAge] = useState('');
  const [patientGender, setPatientGender] = useState('');
  const [setting, setSetting] = useState<Setting>('outpatient');
  const [transcript, setTranscript] = useState('');
  const [result, setResult] = useState<string | null>(null);
  const [validationError, setValidationError] = useState<string | null>(null);

  const generate = useMutation<HpiOk, Error, HpiEncounterRequest>({
    mutationFn: (body) => api.post<HpiOk>('/api/generate-hpi-dictation', body),
    onSuccess: (data) => setResult(data.hpi),
    onError: () => setResult(null),
  });

  function submit(e: React.FormEvent) {
    e.preventDefault();
    setValidationError(null);
    const body: HpiEncounterRequest = { transcript, patientAge, patientGender, setting };
    const parsed = HpiEncounterRequestSchema.safeParse(body);
    if (!parsed.success) {
      setValidationError(parsed.error.issues.map((i: { message: string }) => i.message).join(', '));
      return;
    }
    setResult(null);
    generate.mutate(parsed.data);
  }

  function clear() {
    setTranscript('');
    setResult(null);
    setValidationError(null);
  }

  const input = 'w-full rounded-md border border-input bg-background px-3 py-2 text-sm';

  return (
    <div className="max-w-4xl mx-auto p-6 space-y-4">
      <header>
        <h1 className="text-2xl font-semibold">Voice Dictation → HPI</h1>
        <p className="text-sm text-muted-foreground">
          Dictate your narrative → AI restructures into polished HPI.
          Audio-capture UI is a follow-up; this minimal form supports typed/pasted transcripts.
        </p>
      </header>

      <form onSubmit={submit} className="space-y-4">
        <div className="grid grid-cols-3 gap-3">
          <label className="flex flex-col gap-1">
            <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Age</span>
            <input className={input} placeholder="e.g. 8 months" value={patientAge} onChange={(e) => setPatientAge(e.target.value)} />
          </label>
          <label className="flex flex-col gap-1">
            <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Gender</span>
            <select className={input} value={patientGender} onChange={(e) => setPatientGender(e.target.value)}>
              <option value="">Select</option>
              <option>Male</option>
              <option>Female</option>
            </select>
          </label>
          <label className="flex flex-col gap-1">
            <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Setting</span>
            <select className={input} value={setting} onChange={(e) => setSetting(e.target.value as Setting)}>
              <option value="outpatient">Outpatient</option>
              <option value="inpatient">Inpatient / Floors</option>
            </select>
          </label>
        </div>

        <label className="flex flex-col gap-1">
          <div className="flex items-center justify-between">
            <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
              Transcript / dictation
            </span>
            <button type="button" onClick={clear} className="text-xs text-muted-foreground underline">
              Clear
            </button>
          </div>
          <textarea
            className={input + ' min-h-[200px] font-mono text-sm'}
            placeholder="Type or paste your dictation here, then click Generate."
            value={transcript}
            onChange={(e) => setTranscript(e.target.value)}
          />
        </label>

        {validationError && <div className="text-sm text-destructive">{validationError}</div>}
        {generate.error && <div className="text-sm text-destructive">{(generate.error as ApiError).message}</div>}

        <div className="flex gap-2">
          <button
            type="submit"
            disabled={generate.isPending || !transcript.trim()}
            className="rounded-md bg-primary text-primary-foreground px-4 py-2 text-sm font-medium disabled:opacity-50"
          >
            {generate.isPending ? 'Generating…' : 'Generate HPI'}
          </button>
        </div>
      </form>

      {result && (
        <section className="rounded-lg border border-border bg-card">
          <header className="px-4 py-2 border-b border-border flex items-center justify-between bg-muted/40">
            <h2 className="text-sm font-semibold">Generated HPI</h2>
            <button
              onClick={() => navigator.clipboard.writeText(result)}
              className="text-xs text-muted-foreground underline"
            >
              Copy
            </button>
          </header>
          <div className="p-4 whitespace-pre-wrap text-sm">{result}</div>
        </section>
      )}
    </div>
  );
}