Merge pull request #187 from bitovi/fix-essential-details-fields-initial-load

Author: shoumaw

packages/client/src/components/CaseDetails/components/CaseEssentialDetails/CaseEssentialDetails.stories.tsx

@@ -55,21 +55,24 @@ const mockCustomers = [
 const mockUsers = [
   {
     id: '1',
-    name: 'Admin User',
+    firstName: 'Admin',
+    lastName: 'User',
     email: 'admin@example.com',
     createdAt: new Date('2024-01-01T00:00:00Z'),
     updatedAt: new Date('2024-01-01T00:00:00Z'),
   },
   {
     id: '2',
-    name: 'Jane Smith',
+    firstName: 'Jane',
+    lastName: 'Smith',
     email: 'jane@example.com',
     createdAt: new Date('2024-01-02T00:00:00Z'),
     updatedAt: new Date('2024-01-02T00:00:00Z'),
   },
   {
     id: '3',
-    name: 'John Doe',
+    firstName: 'John',
+    lastName: 'Doe',
     email: 'john@example.com',
     createdAt: new Date('2024-01-03T00:00:00Z'),
     updatedAt: new Date('2024-01-03T00:00:00Z'),

packages/client/src/components/CaseDetails/components/CaseEssentialDetails/CaseEssentialDetails.tsx

@@ -98,6 +98,7 @@ export function CaseEssentialDetails({ caseData, caseId }: CaseEssentialDetailsP
           <EditableSelect
             label="Customer Name"
             value={caseData.customerId}
+            displayValue={`${caseData.customer.firstName} ${caseData.customer.lastName}`}
             options={(customers || []).map((c: { id: string; firstName: string; lastName: string }) => ({ value: c.id, label: `${c.firstName} ${c.lastName}` }))}
             onSave={handleCustomerChange}
             readonly={updateCaseMutation.isPending}
@@ -113,6 +114,7 @@ export function CaseEssentialDetails({ caseData, caseId }: CaseEssentialDetailsP
           <EditableSelect
             label="Assigned To"
             value={caseData.assignedTo || UNASSIGNED_VALUE}
+            displayValue={caseData.assignee ? `${caseData.assignee.firstName} ${caseData.assignee.lastName}` : 'Unassigned'}
             options={[
               { value: UNASSIGNED_VALUE, label: 'Unassigned' },
               ...(users || []).map((user: { id: string; firstName: string; lastName: string }) => ({