Add Camper

merge({ name: e.target.value })} required />

merge({ age: e.target.value })} /> merge({ grade: e.target.value })} />

merge({ contact: e.target.value })} /> merge({ cabin: e.target.value })} />

merge({ allergies: e.target.value })} />
            <button type="submit" className={c.btn}>Add to roster</button>
          </form>
        </section>
        <section id="roster" className={c.section}>
          <h2 className={c.h2}>Roster ({campers.length})</h2>
          {campers.length === 0 ? (
            <p className={c.muted}>No campers yet. Add the first one above.</p>
          ) : (
            <div className="space-y-4">
              {Object.entries(campers.reduce((acc, ca) => {
                const k = ca.cabin || "Unassigned"
                ;(acc[k] = acc[k] || []).push(ca)
                return acc
              }, {})).map(([cabin, list]) => (
                <div key={cabin}>
                  <h3 className="font-semibold text-[var(--comp-accent)] mb-2">{cabin}</h3>
                  <ul className="space-y-2">
                    {list.map(ca => (
                      <li key={ca._id} className="border border-[var(--comp-border)] rounded-md p-3 flex justify-between gap-3">
                        <div className="min-w-0">
                          <div className="font-medium">{ca.name}</div>
                          <div className={c.muted}>Age {ca.age} · Grade {ca.grade} · {ca.contact}</div>
                          {ca.allergies && <div className="text-sm mt-1 text-[var(--comp-accent)]">⚠ {ca.allergies}</div>}
                        </div>
                        <button onClick={() => database.del(ca._id)} className="text-sm text-[var(--comp-muted)] hover:text-[var(--comp-accent)]">Remove</button>
                      </li>
                    ))}
                  </ul>
                </div>
              ))}
            </div>
          )}
        </section>
        <section id="safety-briefing" className={c.section}>
          <h2 className={c.h2}>Safety Briefing</h2>
          <p className={c.muted + " mb-3"}>Generate an allergy & safety summary across all campers.</p>
          <button onClick={generateBriefing} disabled={isLoading || campers.length === 0} className={c.btn}>
            {isLoading ? (
              <>
                <svg className="animate-spin" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round">
                  <path d="M21 12a9 9 0 1 1-6.219-8.56" />
                </svg>
                Generating…
              </>
            ) : "Generate briefing"}
          </button>
          {briefing && (
            <div className="mt-4 p-3 border border-[var(--comp-border)] rounded-md bg-[var(--atlas-brand-hover)] whitespace-pre-wrap text-sm">
              {briefing}
            </div>
          )}
        </section>
      </main>
    </div>
  )
}</article></body></html>

Add Camper

Roster (0)

Safety Briefing