Add user profile setup modal for observer information

src/App.jsx

@@ -1,5 +1,5 @@
 import { useState, useCallback, useEffect } from 'react';
-import { useObservationStorage } from './hooks/useLocalStorage';
+import { useObservationStorage, useUserProfile } from './hooks/useLocalStorage';
 
 // Components
 import { ObservationHeader } from './components/Header/ObservationHeader';
@@ -19,6 +19,7 @@ import { BehaviorDataForm } from './components/Forms/BehaviorDataForm';
 import { ABCEntry } from './components/Forms/ABCEntry';
 import { RecommendationsForm } from './components/Forms/RecommendationsForm';
 import { ObservationNote } from './components/Forms/ObservationNote';
+import { UserProfileModal } from './components/UserProfileModal';
 
 const TABS = [
   { id: 'narrative', label: 'Narrative' },
@@ -30,9 +31,21 @@ const TABS = [
 
 function App() {
   const { data, setData, updateField, resetObservation, lastSaved } = useObservationStorage();
+  const { profile, saveProfile } = useUserProfile();
   const [activeTab, setActiveTab] = useState('narrative');
   const [isObserving, setIsObserving] = useState(false);
 
+  const profileFullName = profile.name
+    ? (profile.credentials ? `${profile.name}, ${profile.credentials}` : profile.name)
+    : '';
+
+  const handleProfileSave = useCallback((name, credentials) => {
+    saveProfile(name, credentials);
+    const fullName = credentials ? `${name}, ${credentials}` : name;
+    updateField('header.observer', fullName);
+    updateField('behaviorAnalyst', fullName);
+  }, [saveProfile, updateField]);
+
   // Sync observing state
   useEffect(() => {
     setIsObserving(!!data.header.startTime && !data.header.endTime);
@@ -126,8 +139,12 @@ function App() {
   const handleClear = useCallback(() => {
     if (window.confirm('Are you sure you want to clear all data? This cannot be undone.')) {
       resetObservation();
+      if (profileFullName) {
+        updateField('header.observer', profileFullName);
+        updateField('behaviorAnalyst', profileFullName);
+      }
     }
-  }, [resetObservation]);
+  }, [resetObservation, updateField, profileFullName]);
 
   // Render tab content
   const renderTabContent = () => {
@@ -177,6 +194,11 @@ function App() {
 
   return (
     <div className="min-h-screen bg-gray-100 pb-24">
+      {/* First-launch profile setup */}
+      {!profile.name && (
+        <UserProfileModal onSave={handleProfileSave} />
+      )}
+
       {/* Header */}
       <ObservationHeader
         header={data.header}

src/components/UserProfileModal.jsx

@@ -0,0 +1,58 @@
+import { useState } from 'react';
+
+export function UserProfileModal({ onSave }) {
+  const [name, setName] = useState('');
+  const [credentials, setCredentials] = useState('');
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    onSave(name.trim(), credentials.trim());
+  };
+
+  const canSubmit = name.trim().length > 0;
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+      <div className="bg-white rounded-lg shadow-xl p-6 w-full max-w-md mx-4">
+        <h2 className="text-lg font-semibold text-gray-800 mb-1">Welcome</h2>
+        <p className="text-sm text-gray-500 mb-5">
+          Enter your name and credentials to pre-fill observer fields on every observation.
+        </p>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <label className="block text-sm font-medium text-gray-600 mb-1">Your Name</label>
+            <input
+              type="text"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="e.g. Jane Smith"
+              autoFocus
+              className="w-full border rounded px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none"
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-600 mb-1">
+              Credentials / Title <span className="text-gray-400 font-normal">(optional)</span>
+            </label>
+            <input
+              type="text"
+              value={credentials}
+              onChange={(e) => setCredentials(e.target.value)}
+              placeholder="e.g. MS, BCBA"
+              className="w-full border rounded px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none"
+            />
+          </div>
+          <div className="flex gap-3 pt-2">
+            <button
+              type="submit"
+              disabled={!canSubmit}
+              className="flex-1 bg-blue-600 text-white py-2 px-4 rounded text-sm font-medium hover:bg-blue-700 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
+            >
+              Save &amp; Continue
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}

src/hooks/useLocalStorage.js

@@ -60,7 +60,7 @@ export function useObservationStorage() {
       studentId: '',
       school: '',
       date: new Date().toISOString().split('T')[0],
-      observer: 'Harry Salaman-Bird, MS, BCBA',
+      observer: '',
       startTime: '',
       endTime: '',
       rbtPresent: '',
@@ -142,7 +142,7 @@ export function useObservationStorage() {
     nextSteps: [],
     methodOfFollowUp: '',
     additionalDocuments: '',
-    behaviorAnalyst: 'Harry Salaman-Bird, MS, BCBA'
+    behaviorAnalyst: ''
   });
 
   const [data, setData, { lastSaved, clearValue }] = useLocalStorage(STORAGE_KEY, getInitialState());
@@ -178,3 +178,16 @@ export function useObservationStorage() {
     lastSaved
   };
 }
+
+// Hook for persisting user profile (name + credentials) across observations
+export function useUserProfile() {
+  const PROFILE_KEY = 'user-profile';
+  const defaultProfile = { name: '', credentials: '' };
+  const [profile, setProfile] = useLocalStorage(PROFILE_KEY, defaultProfile);
+
+  const saveProfile = useCallback((name, credentials) => {
+    setProfile({ name, credentials });
+  }, [setProfile]);
+
+  return { profile, saveProfile };
+}