update name

components/ProfileSettings.tsx

@@ -4,11 +4,15 @@ import { Button } from './ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from './ui/card';
 import { Input } from './ui/input';
 import { Label } from './ui/label';
-import { useSession, signOut } from '../lib/auth-client';
+import { useSession, signOut, updateUser } from '../lib/auth-client';
 import { validatePhoneOrEmail } from '../lib/validators';
 
 export function ProfileSettings() {
   const { data: session } = useSession();
+  const [userName, setUserName] = useState('');
+  const [savingName, setSavingName] = useState(false);
+  const [nameSaved, setNameSaved] = useState(false);
+  const [nameError, setNameError] = useState('');
   const [piFirstName, setPiFirstName] = useState('');
   const [bldgCode, setBldgCode] = useState('');
   const [lab, setLab] = useState('');
@@ -21,6 +25,10 @@ export function ProfileSettings() {
   const [deleting, setDeleting] = useState(false);
   const [deleteError, setDeleteError] = useState('');
 
+  useEffect(() => {
+    if (session?.user.name) setUserName(session.user.name);
+  }, [session?.user.name]);
+
   useEffect(() => {
     fetch('/api/profile', { credentials: 'include' })
       .then(r => (r.ok ? r.json() : null))
@@ -35,6 +43,25 @@ export function ProfileSettings() {
       .finally(() => setLoading(false));
   }, []);
 
+  async function handleSaveName() {
+    setNameError('');
+    setNameSaved(false);
+    const trimmed = userName.trim();
+    if (!trimmed) {
+      setNameError('Name is required.');
+      return;
+    }
+    setSavingName(true);
+    const { error: err } = await updateUser({ name: trimmed });
+    setSavingName(false);
+    if (err) {
+      setNameError(err.message || 'Failed to save name.');
+    } else {
+      setNameSaved(true);
+      setTimeout(() => setNameSaved(false), 3000);
+    }
+  }
+
   async function handleSubmit(e: React.FormEvent) {
     e.preventDefault();
     setError('');
@@ -93,15 +120,31 @@ export function ProfileSettings() {
         <CardHeader>
           <CardTitle className="text-base">Account</CardTitle>
         </CardHeader>
-        <CardContent className="space-y-3 pb-6">
-          <div>
-            <Label className="text-xs text-muted-foreground">Name</Label>
-            <p className="text-sm">{session?.user.name || '—'}</p>
+        <CardContent className="space-y-4 pb-6">
+          <div className="space-y-1">
+            <Label htmlFor="name">Name</Label>
+            <Input
+              id="name"
+              value={userName}
+              onChange={e => setUserName(e.target.value)}
+              placeholder="Your name"
+            />
           </div>
           <div>
             <Label className="text-xs text-muted-foreground">Email</Label>
             <p className="text-sm">{session?.user.email || '—'}</p>
           </div>
+          {nameError && <p className="text-sm text-red-600">{nameError}</p>}
+          {nameSaved && (
+            <p className="text-sm text-green-600 flex items-center gap-1">
+              <Check className="w-4 h-4" /> Name saved
+            </p>
+          )}
+          <div className="pt-1">
+            <Button type="button" onClick={handleSaveName} disabled={savingName}>
+              {savingName ? 'Saving…' : 'Save name'}
+            </Button>
+          </div>
         </CardContent>
       </Card>