fix(audit-wave-9): standardize on Sheet for previews; doctrine in CLAUDE.md

Swap the one outlier (client-interests-tab.tsx) from Vaul Drawer to
Sheet side=right so every detail-preview surface uses the same
primitive. Document the doctrine: Sheet for side panels on both desktop
and mobile; Vaul Drawer reserved for mobile-only bottom-sheet UX
(currently just MoreSheet).

Closes ui/ux M11.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/components/admin/users/user-form.tsx

@@ -1,7 +1,8 @@
 'use client';
 import { formatErrorBanner } from '@/lib/api/toast-error';
 
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
@@ -53,75 +54,49 @@ interface UserFormProps {
   onSuccess: () => void;
 }
 
-export function UserForm({ open, onOpenChange, user, onSuccess }: UserFormProps) {
-  const [roles, setRoles] = useState<Role[]>([]);
-  const [firstName, setFirstName] = useState('');
-  const [lastName, setLastName] = useState('');
-  const [email, setEmail] = useState('');
-  const [originalEmail, setOriginalEmail] = useState('');
+export function UserForm(props: UserFormProps) {
+  return (
+    <UserFormBody key={props.open ? `open:${props.user?.userId ?? 'new'}` : 'closed'} {...props} />
+  );
+}
+
+function UserFormBody({ open, onOpenChange, user, onSuccess }: UserFormProps) {
+  // Derive initial first/last names from the user payload.
+  const initialNames = (() => {
+    if (!user) return { first: '', last: '' };
+    if (user.firstName || user.lastName) {
+      return { first: user.firstName ?? '', last: user.lastName ?? '' };
+    }
+    const source = user.fullName ?? user.displayName;
+    const parts = source.split(/\s+/);
+    return { first: parts[0] ?? '', last: parts.slice(1).join(' ') };
+  })();
+  // useQuery replaces the prior useEffect(fetch+setRoles) pattern.
+  const rolesQuery = useQuery<{ data: Role[] }>({
+    queryKey: ['admin', 'roles'],
+    queryFn: () => apiFetch('/api/v1/admin/roles'),
+    enabled: open,
+  });
+  const roles = rolesQuery.data?.data ?? [];
+  const [firstName, setFirstName] = useState(initialNames.first);
+  const [lastName, setLastName] = useState(initialNames.last);
+  const [email, setEmail] = useState(user?.email ?? '');
+  const [originalEmail] = useState(user?.email ?? '');
   const [emailConfirmOpen, setEmailConfirmOpen] = useState(false);
   const [password, setPassword] = useState('');
-  const [displayName, setDisplayName] = useState('');
-  const [phoneValue, setPhoneValue] = useState<PhoneInputValue | null>(null);
-  const [roleId, setRoleId] = useState('');
-  const [isActive, setIsActive] = useState(true);
-  const [residentialAccess, setResidentialAccess] = useState(false);
+  const [displayName, setDisplayName] = useState(user?.displayName ?? '');
+  const [phoneValue, setPhoneValue] = useState<PhoneInputValue | null>(
+    user?.phone ? { e164: user.phone, country: 'US' } : null,
+  );
+  const [roleId, setRoleId] = useState(user?.role.id ?? '');
+  const [isActive, setIsActive] = useState(user?.isActive ?? true);
+  const [residentialAccess, setResidentialAccess] = useState(user?.residentialAccess ?? false);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
   const isEdit = !!user;
   const fullName = `${firstName} ${lastName}`.trim();
 
-  useEffect(() => {
-    if (open) {
-      void apiFetch<{ data: Role[] }>('/api/v1/admin/roles').then((res) => setRoles(res.data));
-    }
-  }, [open]);
-
-  useEffect(() => {
-    if (open) {
-      if (user) {
-        // Prefer canonical first/last from the API; fall back to a best-
-        // effort split of displayName for older records that pre-date the
-        // first_name/last_name columns.
-        const first = user.firstName ?? '';
-        const last = user.lastName ?? '';
-        if (first || last) {
-          setFirstName(first);
-          setLastName(last);
-        } else if (user.fullName) {
-          const parts = user.fullName.split(/\s+/);
-          setFirstName(parts[0] ?? '');
-          setLastName(parts.slice(1).join(' '));
-        } else {
-          const parts = user.displayName.split(/\s+/);
-          setFirstName(parts[0] ?? '');
-          setLastName(parts.slice(1).join(' '));
-        }
-        setEmail(user.email);
-        setOriginalEmail(user.email);
-        setDisplayName(user.displayName);
-        setPhoneValue(user.phone ? { e164: user.phone, country: 'US' } : null);
-        setRoleId(user.role.id);
-        setIsActive(user.isActive);
-        setResidentialAccess(user.residentialAccess ?? false);
-        setPassword('');
-      } else {
-        setFirstName('');
-        setLastName('');
-        setEmail('');
-        setOriginalEmail('');
-        setDisplayName('');
-        setPhoneValue(null);
-        setRoleId('');
-        setIsActive(true);
-        setResidentialAccess(false);
-        setPassword('');
-      }
-      setError(null);
-    }
-  }, [open, user]);
-
   function handleSubmit(e: React.FormEvent) {
     e.preventDefault();
     // Admin email change for an existing user goes through a confirmation

src/components/admin/users/user-permission-matrix.tsx

@@ -12,6 +12,8 @@ import { Button } from '@/components/ui/button';
 import { Label } from '@/components/ui/label';
 import { ScrollArea } from '@/components/ui/scroll-area';
 import { apiFetch } from '@/lib/api/client';
+import { formatEnum } from '@/lib/constants';
+import { WarningCallout } from '@/components/ui/warning-callout';
 import { cn } from '@/lib/utils';
 
 /**
@@ -103,7 +105,7 @@ const PERMISSION_LEAVES: Record<string, string[]> = {
 };
 
 function formatAction(action: string): string {
-  return action.replace(/_/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase());
+  return formatEnum(action);
 }
 
 type Overrides = Record<string, Record<string, boolean>>;
@@ -223,13 +225,13 @@ export function UserPermissionMatrix({ userId }: UserPermissionMatrixProps) {
 
   return (
     <div className="space-y-3">
-      <div className="rounded-md border border-amber-200 bg-amber-50 px-3 py-2 text-xs text-amber-900">
-        <p>
+      <WarningCallout icon={false}>
+        <span className="text-xs">
           Permission overrides save <strong>on the button below</strong>, separately from the
-          Profile &amp; role tab. Switching tabs or closing the drawer without clicking
-          <strong> Save overrides</strong> drops your changes.
-        </p>
-      </div>
+          Profile &amp; role tab. Switching tabs or closing the drawer without clicking{' '}
+          <strong>Save overrides</strong> drops your changes.
+        </span>
+      </WarningCallout>
       <p className="text-xs text-muted-foreground">
         Each toggle defaults to <strong>Inherit</strong> (role + port override decide). Switch to
         <strong> Grant</strong> or <strong>Deny</strong> to force the value for this user only.