Function AddProgram

web/src/pages/AddProgram.tsx:22–288

()

  const [loading, setLoading] = useState(false)
  const [error, setError] = useState('')
  const [pickerExercises, setPickerExercises] = useState<Record<number, types.Exercise>>({})
  const [formData, setFormData] = useState<ProgramFormData>({ name: '', notes: '', days: [] })

  useEffect(() => { if (error) window.scrollTo({ top: 0, behavior: 'smooth' }) }, [error])

  const cacheExercise = (ex: types.Exercise) => setPickerExercises(prev => ({ ...prev, [ex.id]: ex }))

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!formData.name.trim()) { setError('Program name required'); return }
    if (formData.days.length === 0) { setError('Add at least one day'); return }
    const hasAnyExercise = hasWorkoutExercises(formData.days)
    if (!hasAnyExercise) { setError('Add at least one exercise to a workout day'); return }
    setLoading(true)
    try {
      const payload = {
        name: formData.name,
        notes: formData.notes,
        days: formData.days.map(d => ({
          ...d,
          exercises: d.exercises.map(ex => ({
            ...ex,
            sets: ex.sets.map(s => ({ ...s, target_weight: displayToLbs(s.target_weight, settings.weight_unit) })),
          })),
        })),
      }
      await programAPI.create(payload)
      navigate('/programs')
    } catch (err: any) {
      setError(err.response?.data?.error || 'Failed to create program')
    } finally {
      setLoading(false)
    }
  }

  const totalExercises = formData.days.reduce((s, d) => s + d.exercises.length, 0)
  const totalSets = formData.days.reduce((s, d) => s + d.exercises.reduce((s2, ex) => s2 + ex.sets.length, 0), 0)

  return (
    <div className="space-y-6 animate-slide-up pb-10">
      <div className="flex items-center gap-3">
        <button aria-label="Go back" onClick={() => navigate(-1)} className="p-2 hover:bg-surface-muted rounded-lg transition-colors">
          <ArrowLeft className="w-5 h-5 text-tx-muted" />
        </button>
        <div>
          <h1 className="font-display font-bold text-2xl text-tx-primary">New Program</h1>
          <p className="text-xs text-tx-muted">
            {formData.days.length} day{formData.days.length === 1 ? '' : 's'} • {totalExercises} exercise{totalExercises === 1 ? '' : 's'} • {totalSets} set{totalSets === 1 ? '' : 's'}
          </p>
        </div>
      </div>

      <form onSubmit={handleSubmit} className="space-y-6">
        {error && (
          <div className="alert-error">
            <AlertCircle className="w-4 h-4 flex-shrink-0" />
            <span>{error}</span>
          </div>