Merge pull request #142 from ghotso/develop-fix-incident_assigned_user

fix(incident): unify assigned user handling with fallback and UI update 🎯

application/src/components/schedule-incident/incident/detail-dialog/IncidentDetailContent.tsx

@@ -25,19 +25,20 @@ export const IncidentDetailContent = ({
   onClose, 
   assignedUser 
 }: IncidentDetailContentProps) => {
-  // Fetch assigned user details if one wasn't provided and there's an assigned_to field
+  // Fetch assigned user details if none was provided; prefer server field
+  const assigneeId = incident?.assigned_users || incident?.assigned_to;
   const { data: fetchedUser } = useQuery({
-    queryKey: ['user', incident?.assigned_to],
+    queryKey: ['user', assigneeId],
     queryFn: async () => {
-      if (!incident?.assigned_to) return null;
+      if (!assigneeId) return null;
       try {
-        return await userService.getUser(incident.assigned_to);
+        return await userService.getUser(assigneeId);
       } catch (error) {
         console.error("Failed to fetch assigned user:", error);
         return null;
       }
     },
-    enabled: !!incident?.assigned_to && !assignedUser,
+    enabled: !!assigneeId && !assignedUser,
     staleTime: 300000 // Cache for 5 minutes
   });
 

application/src/components/schedule-incident/incident/detail-dialog/IncidentDetailDialog.tsx

@@ -17,7 +17,7 @@ export const IncidentDetailDialog = ({
   onOpenChange, 
   incident 
 }: IncidentDetailDialogProps) => {
-  // Fetch user data for assigned_to field
+  // Fetch user data for assigned field (prefer assigned_users, fallback to assigned_to)
   const { data: users = [] } = useQuery({
     queryKey: ['users'],
     queryFn: async () => {
@@ -25,12 +25,12 @@ export const IncidentDetailDialog = ({
       return Array.isArray(usersList) ? usersList : [];
     },
     staleTime: 300000, // Cache for 5 minutes
-    enabled: !!incident?.assigned_to && open // Only run query if there's an assigned_to value and dialog is open
+    enabled: !!(incident?.assigned_users || incident?.assigned_to) && open // Only run query if there's an assigned value and dialog is open
   });
 
-  // Find the assigned user
-  const assignedUser = incident?.assigned_to 
-    ? users.find(user => user.id === incident.assigned_to) 
+  // Find the assigned user (prefer assigned_users, fallback to assigned_to)
+  const assignedUser = (incident?.assigned_users || incident?.assigned_to)
+    ? users.find(user => user.id === (incident?.assigned_users || incident?.assigned_to)) 
     : null;
   
   if (!incident) return null;

application/src/components/schedule-incident/incident/detail-dialog/IncidentDetailSections.tsx

@@ -23,19 +23,19 @@ export {
 
 // Legacy component - keeping this for backward compatibility with other imports
 export const IncidentDetailSections = ({ incident }: { incident: IncidentItem | null }) => {
-  // Fetch assigned user details if there's an assigned_to field
+  // Fetch assigned user details if there's an assigned field (prefer assigned_users, fallback to assigned_to)
   const { data: assignedUser } = useQuery({
-    queryKey: ['user', incident?.assigned_to],
+    queryKey: ['user', incident?.assigned_users || incident?.assigned_to],
     queryFn: async () => {
-      if (!incident?.assigned_to) return null;
+      if (!(incident?.assigned_users || incident?.assigned_to)) return null;
       try {
-        return await userService.getUser(incident.assigned_to);
+        return await userService.getUser(incident?.assigned_users || incident?.assigned_to);
       } catch (error) {
         console.error("Failed to fetch assigned user:", error);
         return null;
       }
     },
-    enabled: !!incident?.assigned_to,
+    enabled: !!(incident?.assigned_users || incident?.assigned_to),
     staleTime: 300000 // Cache for 5 minutes
   });
 

application/src/components/schedule-incident/incident/detail-dialog/sections/AssignmentSection.tsx

@@ -31,8 +31,8 @@ export const AssignmentSection: React.FC<AssignmentSectionProps> = ({ incident,
               </Avatar>
               <span>{assignedUser.full_name || assignedUser.username}</span>
             </div>
-          ) : incident.assigned_to ? (
-            <span>{incident.assigned_to}</span>
+          ) : (incident.assigned_users || incident.assigned_to) ? (
+           <span>{incident.assigned_users || incident.assigned_to}</span>
           ) : (
             <span className="text-muted-foreground italic">{t('unassigned')}</span>
           )}

application/src/components/schedule-incident/incident/detail-dialog/sections/BasicInfoSection.tsx

@@ -50,8 +50,8 @@ export const BasicInfoSection: React.FC<BasicInfoSectionProps> = ({ incident, as
                 </Avatar>
                 <span>{assignedUser.full_name || assignedUser.username}</span>
               </div>
-            ) : incident.assigned_to ? (
-              <span>{incident.assigned_to}</span>
+            ) : (incident.assigned_users || incident.assigned_to) ? (
+              <span>{incident.assigned_users || incident.assigned_to}</span>
             ) : (
               <span className="text-muted-foreground italic">{t('unassigned')}</span>
             )}

application/src/components/schedule-incident/incident/form/IncidentBasicFields.tsx

@@ -68,7 +68,7 @@ export const IncidentBasicFields: React.FC = () => {
   const selectedUser = users.find(user => user.id === form.getValues('assigned_to'));
 
   // Function to get user initials from name
-  const getUserInitials = (user: any): string => {
+  const getUserInitials = (user: { full_name?: string; username: string }): string => {
     if (user.full_name) {
       const nameParts = user.full_name.split(' ');
       if (nameParts.length > 1) {

application/src/components/schedule-incident/incident/hooks/useIncidentEditForm.ts

@@ -25,7 +25,7 @@ export const useIncidentEditForm = (
       impact: (incident.impact?.toLowerCase() || 'minor') as any,
       priority: (incident.priority?.toLowerCase() || 'medium') as any,
       service_id: incident.service_id || '',
-      assigned_to: incident.assigned_to || '',
+      assigned_to: incident.assigned_users || incident.assigned_to || '',
       root_cause: incident.root_cause || '',
       resolution_steps: incident.resolution_steps || '',
       lessons_learned: incident.lessons_learned || '',
@@ -45,11 +45,14 @@ export const useIncidentEditForm = (
         impact: data.impact,
         priority: data.priority,
         service_id: data.service_id,
-        assigned_to: data.assigned_to, // This is the user ID from the form
+        ...(data.assigned_to
+          ? { assigned_to: data.assigned_to, assigned_users: data.assigned_to }
+          : {}),
         root_cause: data.root_cause,
         resolution_steps: data.resolution_steps,
         lessons_learned: data.lessons_learned,
       });
+
       
       toast({
         title: t('incidentUpdated'),

application/src/components/schedule-incident/incident/hooks/useIncidentForm.ts

@@ -57,6 +57,7 @@ export const useIncidentForm = (onSuccess: () => void, onClose: () => void) => {
         priority: data.priority,
         service_id: data.service_id,
         assigned_to: data.assigned_to,
+        assigned_users: data.assigned_to, // map to server field
         root_cause: data.root_cause,
         resolution_steps: data.resolution_steps,
         lessons_learned: data.lessons_learned,

application/src/components/schedule-incident/incident/table/IncidentTableRow.tsx

@@ -86,7 +86,7 @@ export const IncidentTableRow = memo(({
         </Badge>
       </TableCell>
       <TableCell>
-        <AssignedUserCell userId={localItem.assigned_to} />
+        <AssignedUserCell userId={localItem.assigned_users || localItem.assigned_to} />
       </TableCell>
       <TableCell className="text-right" onClick={(e) => e.stopPropagation()}>
         <div className="flex justify-end items-center space-x-2">