From db305f54e7d156ae92a83d967561a7dfd720a47d Mon Sep 17 00:00:00 2001
From: Michael Chihlas <michael@chihlas.com>
Date: Sat, 14 Mar 2026 23:53:02 -0400
Subject: [PATCH] feat(psa): add Member Mapping tab with auto-match and manual
 assignment

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 frontend/src/api/integrations.ts              |  10 +-
 .../src/pages/account/IntegrationsPage.tsx    | 270 +++++++++++++++++-
 frontend/src/types/integrations.ts            |  22 ++
 3 files changed, 299 insertions(+), 3 deletions(-)

diff --git a/frontend/src/api/integrations.ts b/frontend/src/api/integrations.ts
index 49958403..ed90f88d 100644
--- a/frontend/src/api/integrations.ts
+++ b/frontend/src/api/integrations.ts
@@ -1,6 +1,6 @@
 import { apiClient } from './client'
 import type { PsaConnectionResponse, PsaConnectionCreate, PsaConnectionUpdate, PsaConnectionTestResponse } from '@/types'
-import type { TicketLinkResponse, PSATicketSearchResult, PSATicketInfo, PSATicketStatusItem, PsaPreviewResponse, PsaPostResponse, PsaPostLogEntry } from '@/types/integrations'
+import type { TicketLinkResponse, PSATicketSearchResult, PSATicketInfo, PSATicketStatusItem, PsaPreviewResponse, PsaPostResponse, PsaPostLogEntry, PsaMemberResponse, PsaMemberMappingResponse, AutoMatchResult } from '@/types/integrations'
 
 export const integrationsApi = {
   getConnection: () =>
@@ -19,6 +19,14 @@ export const integrationsApi = {
     apiClient.get<PSATicketInfo>(`/integrations/psa/tickets/${id}`).then(r => r.data),
   getTicketStatuses: (ticketId: string) =>
     apiClient.get<PSATicketStatusItem[]>(`/integrations/psa/tickets/${ticketId}/statuses`).then(r => r.data),
+  listMembers: () =>
+    apiClient.get<PsaMemberResponse[]>('/integrations/psa/members').then(r => r.data),
+  getMemberMappings: () =>
+    apiClient.get<PsaMemberMappingResponse[]>('/integrations/psa/member-mappings').then(r => r.data),
+  saveMemberMappings: (mappings: { user_id: string; external_member_id: string; external_member_name: string }[]) =>
+    apiClient.post<PsaMemberMappingResponse[]>('/integrations/psa/member-mappings', mappings).then(r => r.data),
+  autoMatchMembers: () =>
+    apiClient.post<AutoMatchResult>('/integrations/psa/member-mappings/auto-match').then(r => r.data),
 }
 
 export const sessionPsaApi = {
diff --git a/frontend/src/pages/account/IntegrationsPage.tsx b/frontend/src/pages/account/IntegrationsPage.tsx
index fd5595d3..15076550 100644
--- a/frontend/src/pages/account/IntegrationsPage.tsx
+++ b/frontend/src/pages/account/IntegrationsPage.tsx
@@ -1,8 +1,10 @@
 import { useEffect, useState } from 'react'
-import { Plug, CheckCircle2, AlertCircle, Loader2, Pencil, Trash2, Shield, History, Ticket } from 'lucide-react'
+import { Plug, CheckCircle2, AlertCircle, Loader2, Pencil, Trash2, Shield, History, Ticket, Users, Zap, Save } from 'lucide-react'
 import { PageMeta } from '@/components/common/PageMeta'
 import { integrationsApi } from '@/api/integrations'
 import type { PsaConnectionResponse, PsaConnectionCreate, PsaConnectionUpdate, PsaConnectionTestResponse } from '@/types'
+import type { PsaMemberResponse, PsaMemberMappingResponse } from '@/types/integrations'
+import { toast } from '@/lib/toast'
 import { cn } from '@/lib/utils'
 import { Input } from '@/components/ui/Input'
 
@@ -38,7 +40,7 @@ const emptyForm: ConnectionForm = {
   client_id: '',
 }
 
-type Tab = 'connection' | 'post-history'
+type Tab = 'connection' | 'member-mapping' | 'post-history'
 
 export function IntegrationsPage() {
   const [activeTab, setActiveTab] = useState<Tab>('connection')
@@ -231,6 +233,7 @@ export function IntegrationsPage() {
         <div className="mb-6 flex gap-1 border-b border-border">
           {([
             { id: 'connection' as Tab, label: 'Connection', icon: Plug },
+            { id: 'member-mapping' as Tab, label: 'Member Mapping', icon: Users },
             { id: 'post-history' as Tab, label: 'Post History', icon: History },
           ]).map(({ id, label, icon: Icon }) => (
             <button
@@ -526,6 +529,11 @@ export function IntegrationsPage() {
         </div>
         )}
 
+        {/* Member Mapping Tab */}
+        {activeTab === 'member-mapping' && (
+          <MemberMappingTab connection={connection} />
+        )}
+
         {/* Post History Tab */}
         {activeTab === 'post-history' && (
           <div className="max-w-3xl">
@@ -547,4 +555,262 @@ export function IntegrationsPage() {
   )
 }
 
+/* ─── Member Mapping Tab ─── */
+
+function MemberMappingTab({ connection }: { connection: PsaConnectionResponse | null }) {
+  const [cwMembers, setCwMembers] = useState<PsaMemberResponse[]>([])
+  const [mappings, setMappings] = useState<PsaMemberMappingResponse[]>([])
+  const [localMappings, setLocalMappings] = useState<Record<string, { external_member_id: string; external_member_name: string }>>({})
+  const [isLoadingData, setIsLoadingData] = useState(false)
+  const [isAutoMatching, setIsAutoMatching] = useState(false)
+  const [isSavingMappings, setIsSavingMappings] = useState(false)
+  const [isDirty, setIsDirty] = useState(false)
+  const [hasLoaded, setHasLoaded] = useState(false)
+
+  useEffect(() => {
+    if (connection) {
+      loadMappingData()
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [connection?.id])
+
+  const loadMappingData = async () => {
+    setIsLoadingData(true)
+    try {
+      const [members, existingMappings] = await Promise.all([
+        integrationsApi.listMembers(),
+        integrationsApi.getMemberMappings(),
+      ])
+      setCwMembers(members)
+      setMappings(existingMappings)
+
+      // Build local mapping state from existing mappings
+      const lookup: Record<string, { external_member_id: string; external_member_name: string }> = {}
+      for (const m of existingMappings) {
+        lookup[m.user_id] = { external_member_id: m.external_member_id, external_member_name: m.external_member_name }
+      }
+      setLocalMappings(lookup)
+      setIsDirty(false)
+      setHasLoaded(true)
+    } catch (err) {
+      console.error('Failed to load mapping data:', err)
+      toast.error('Failed to load member data')
+    } finally {
+      setIsLoadingData(false)
+    }
+  }
+
+  const handleAutoMatch = async () => {
+    setIsAutoMatching(true)
+    try {
+      const result = await integrationsApi.autoMatchMembers()
+      toast.success(`Matched ${result.matched.length} user${result.matched.length !== 1 ? 's' : ''}${result.unmatched_users > 0 ? `, ${result.unmatched_users} remain unmapped` : ''}`)
+      await loadMappingData()
+    } catch (err) {
+      console.error('Auto-match failed:', err)
+      toast.error('Auto-match failed')
+    } finally {
+      setIsAutoMatching(false)
+    }
+  }
+
+  const handleMemberChange = (userId: string, externalMemberId: string) => {
+    setLocalMappings(prev => {
+      const next = { ...prev }
+      if (!externalMemberId) {
+        delete next[userId]
+      } else {
+        const member = cwMembers.find(m => m.id === externalMemberId)
+        next[userId] = {
+          external_member_id: externalMemberId,
+          external_member_name: member?.name || '',
+        }
+      }
+      return next
+    })
+    setIsDirty(true)
+  }
+
+  const handleSave = async () => {
+    setIsSavingMappings(true)
+    try {
+      const payload = Object.entries(localMappings).map(([user_id, mapping]) => ({
+        user_id,
+        external_member_id: mapping.external_member_id,
+        external_member_name: mapping.external_member_name,
+      }))
+      await integrationsApi.saveMemberMappings(payload)
+      toast.success('Member mappings saved')
+      setIsDirty(false)
+      // Reload to get fresh data with matched_by etc.
+      await loadMappingData()
+    } catch (err) {
+      console.error('Failed to save mappings:', err)
+      toast.error('Failed to save mappings')
+    } finally {
+      setIsSavingMappings(false)
+    }
+  }
+
+  // Derive user list from mappings response (all account users are returned)
+  const userRows = mappings.length > 0
+    ? mappings.map(m => ({ user_id: m.user_id, user_email: m.user_email, user_name: m.user_name, matched_by: m.matched_by }))
+    : []
+
+  // Deduplicate: mappings may only contain mapped users, so we show what we have
+  const uniqueUsers = hasLoaded ? userRows : []
+
+  if (!connection) {
+    return (
+      <div className="max-w-3xl">
+        <div className="glass-card-static p-6">
+          <div className="flex items-center gap-3 mb-4">
+            <Users className="h-5 w-5 text-muted-foreground" />
+            <h2 className="text-lg font-semibold text-foreground">Member Mapping</h2>
+          </div>
+          <p className="text-sm text-muted-foreground">
+            Set up a PSA connection first to map team members to ConnectWise members.
+          </p>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="max-w-3xl space-y-4">
+      {/* Header + Auto-Match */}
+      <div className="glass-card-static p-6">
+        <div className="flex items-center justify-between mb-2">
+          <div className="flex items-center gap-3">
+            <Users className="h-5 w-5 text-muted-foreground" />
+            <h2 className="text-lg font-semibold text-foreground">Member Mapping</h2>
+          </div>
+          <button
+            type="button"
+            onClick={handleAutoMatch}
+            disabled={isAutoMatching || isLoadingData}
+            className={cn(
+              'inline-flex items-center gap-2 rounded-[10px] px-4 py-2 text-sm font-medium',
+              'bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-foreground',
+              'hover:border-[rgba(255,255,255,0.12)] transition-all',
+              'disabled:opacity-50 disabled:cursor-not-allowed'
+            )}
+          >
+            {isAutoMatching ? (
+              <Loader2 className="h-4 w-4 animate-spin" />
+            ) : (
+              <Zap className="h-4 w-4" />
+            )}
+            Auto-Match by Email
+          </button>
+        </div>
+        <p className="text-sm text-muted-foreground">
+          Map your ResolutionFlow users to ConnectWise members so session posts are attributed correctly.
+        </p>
+      </div>
+
+      {/* Loading state */}
+      {isLoadingData && (
+        <div className="flex justify-center py-8">
+          <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+        </div>
+      )}
+
+      {/* Mapping Table */}
+      {hasLoaded && !isLoadingData && (
+        <div className="glass-card-static overflow-hidden">
+          {uniqueUsers.length === 0 ? (
+            <div className="p-6 text-center text-sm text-muted-foreground">
+              No users found. Use Auto-Match to discover and map users.
+            </div>
+          ) : (
+            <>
+              {/* Table header */}
+              <div className="grid grid-cols-[1fr_1fr_1fr_auto] gap-4 border-b border-border px-6 py-3">
+                <span className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">User</span>
+                <span className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">Email</span>
+                <span className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">Mapped To</span>
+                <span className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground w-20 text-center">Method</span>
+              </div>
+
+              {/* Rows */}
+              {uniqueUsers.map((user) => {
+                const currentMapping = localMappings[user.user_id]
+                return (
+                  <div
+                    key={user.user_id}
+                    className="grid grid-cols-[1fr_1fr_1fr_auto] gap-4 items-center border-b border-border/50 px-6 py-3 last:border-b-0"
+                  >
+                    <span className="text-sm text-foreground truncate">{user.user_name}</span>
+                    <span className="text-sm text-muted-foreground truncate">{user.user_email}</span>
+                    <select
+                      title={`Map ${user.user_name} to a ConnectWise member`}
+                      value={currentMapping?.external_member_id || ''}
+                      onChange={(e) => handleMemberChange(user.user_id, e.target.value)}
+                      className={cn(
+                        'w-full rounded-lg border bg-card px-3 py-1.5 text-sm text-foreground',
+                        'border-border focus:border-[rgba(6,182,212,0.3)] focus:outline-none',
+                        !currentMapping && 'text-muted-foreground'
+                      )}
+                    >
+                      <option value="">-- Unmapped --</option>
+                      {cwMembers.map((member) => (
+                        <option key={member.id} value={member.id}>
+                          {member.name}{member.email ? ` (${member.email})` : ''}
+                        </option>
+                      ))}
+                    </select>
+                    <span className="w-20 text-center">
+                      {currentMapping && !isDirty && user.matched_by ? (
+                        <span className={cn(
+                          'inline-flex items-center rounded-full px-2 py-0.5 text-[0.625rem] font-label',
+                          user.matched_by === 'auto_email'
+                            ? 'bg-primary/10 text-primary'
+                            : 'bg-card border border-border text-muted-foreground'
+                        )}>
+                          {user.matched_by === 'auto_email' ? 'auto' : 'manual'}
+                        </span>
+                      ) : currentMapping ? (
+                        <span className="inline-flex items-center rounded-full px-2 py-0.5 text-[0.625rem] font-label bg-card border border-border text-muted-foreground">
+                          manual
+                        </span>
+                      ) : (
+                        <span className="text-[0.625rem] text-muted-foreground/50">—</span>
+                      )}
+                    </span>
+                  </div>
+                )
+              })}
+            </>
+          )}
+        </div>
+      )}
+
+      {/* Save button */}
+      {isDirty && (
+        <div className="flex justify-end">
+          <button
+            type="button"
+            onClick={handleSave}
+            disabled={isSavingMappings}
+            className={cn(
+              'inline-flex items-center gap-2 rounded-[10px] px-5 py-2.5 text-sm font-semibold',
+              'bg-gradient-brand text-[#101114] shadow-lg shadow-primary/20',
+              'hover:opacity-90 active:scale-[0.97] transition-all',
+              'disabled:opacity-50 disabled:cursor-not-allowed'
+            )}
+          >
+            {isSavingMappings ? (
+              <Loader2 className="h-4 w-4 animate-spin" />
+            ) : (
+              <Save className="h-4 w-4" />
+            )}
+            Save Mappings
+          </button>
+        </div>
+      )}
+    </div>
+  )
+}
+
 export default IntegrationsPage
diff --git a/frontend/src/types/integrations.ts b/frontend/src/types/integrations.ts
index 40060122..b80da91f 100644
--- a/frontend/src/types/integrations.ts
+++ b/frontend/src/types/integrations.ts
@@ -101,3 +101,25 @@ export interface PsaPostLogEntry {
   posted_at: string
   content_preview: string
 }
+
+export interface PsaMemberResponse {
+  id: string
+  identifier: string
+  name: string
+  email: string | null
+}
+
+export interface PsaMemberMappingResponse {
+  id: string
+  user_id: string
+  user_email: string
+  user_name: string
+  external_member_id: string
+  external_member_name: string
+  matched_by: string
+}
+
+export interface AutoMatchResult {
+  matched: PsaMemberMappingResponse[]
+  unmatched_users: number
+}