IEN-941 | QA fix

apps/api/src/applicant/endofjourney.service.ts

@@ -251,21 +251,21 @@ export class EndOfJourneyService implements OnModuleInit {
       `Setting end of journey incomplete: ${STATUS.NOT_PROCEEDING}. Number of lists: ${list.length}`,
       'END-OF-JOURNEY',
     );
-    const results = [];
-    for (const applicant of list) {
-      // update the end_of_journey_flag and updated_date of the applicant
-      let query = this.getIncompleteQuery(manager, applicant.applicant_id);
-      query = this.checkReEngagedStatusForEoJIncompleteQuery(query);
+    const results = await Promise.all(
+      list.map(applicant => {
+        let query = this.getIncompleteQuery(manager, applicant.applicant_id);
+        query = this.checkReEngagedStatusForEoJIncompleteQuery(query);
+
+        return query
+          .update('ien_applicants')
+          .set({
+            end_of_journey: END_OF_JOURNEY_FLAG.JOURNEY_INCOMPLETE,
+            updated_date: dayjs().tz('America/Los_Angeles').toDate(),
+          })
+          .execute();
+      }),
+    );
 
-      const result = await query
-        .update('ien_applicants')
-        .set({
-          end_of_journey: END_OF_JOURNEY_FLAG.JOURNEY_INCOMPLETE,
-          updated_date: dayjs().tz('America/Los_Angeles').toDate(),
-        })
-        .execute();
-      results.push(result);
-    }
     this.logger.log({ results }, 'END-OF-JOURNEY');
   };
   getIncompleteQuery(
@@ -315,25 +315,20 @@ export class EndOfJourneyService implements OnModuleInit {
    * Event handler for delete re-engaged applicants
    */
   @OnEvent(`${SystemMilestoneEvent.REENGAGED}.*`)
-  async handleReEngagedDeleteEvent(
+  async handleReEngagedEvent(
     payload: IENApplicantStatusAudit,
     event: SystemMilestoneEvent,
+    manager: EntityManager,
   ): Promise<void> {
     this.logger.log(`Handling re-engaged event: ${event}`, 'END-OF-JOURNEY');
 
-    const connection = this.connection;
-    if (!connection) {
+    if (!manager) {
       this.logger.error('Connection failed', 'END-OF-JOURNEY');
       return;
     }
-    const queryRunner = connection.createQueryRunner();
-    await queryRunner.startTransaction();
-    const manager = queryRunner.manager;
 
     await this.handleReEngagedForJourneyComplete(manager, payload);
     await this.handleReEngagedForJourneyIncomplete(manager, payload);
-
-    await queryRunner.commitTransaction();
   }
 
   private async handleReEngagedForJourneyComplete(

apps/api/src/applicant/ienapplicant.service.ts

@@ -348,10 +348,11 @@ export class IENApplicantService {
       });
       // handle update re-engaged
       if (status_audit.status.status === STATUS.RE_ENGAGED) {
-        this.eventEmitter.emit(
+        await this.eventEmitter.emitAsync(
           SystemMilestoneEvent.CREATE_REENGAGED,
           status_audit,
           SystemMilestoneEvent.CREATE_REENGAGED,
+          manager,
         );
       }
       return status_audit;
@@ -418,16 +419,17 @@ export class IENApplicantService {
         [audit.applicant.id],
         manager,
       );
-    });
 
-    // handle update re-engaged
-    if (audit.status.status === STATUS.RE_ENGAGED) {
-      this.eventEmitter.emit(
-        SystemMilestoneEvent.UPDATE_REENGAGED,
-        audit,
-        SystemMilestoneEvent.UPDATE_REENGAGED,
-      );
-    }
+      // handle update re-engaged
+      if (audit.status.status === STATUS.RE_ENGAGED) {
+        await this.eventEmitter.emitAsync(
+          SystemMilestoneEvent.UPDATE_REENGAGED,
+          audit,
+          SystemMilestoneEvent.UPDATE_REENGAGED,
+          manager,
+        );
+      }
+    });
 
     return audit;
   }
@@ -463,10 +465,11 @@ export class IENApplicantService {
 
       // handle delete re-engaged
       if (status.status.status === STATUS.RE_ENGAGED) {
-        this.eventEmitter.emit(
+        await this.eventEmitter.emitAsync(
           SystemMilestoneEvent.DELETE_REENGAGED,
           status,
           SystemMilestoneEvent.DELETE_REENGAGED,
+          manager,
         );
       }
     });

apps/web/package.json

@@ -22,6 +22,7 @@
     "@radix-ui/react-dialog": "1.1.2",
     "@radix-ui/react-label": "2.1.0",
     "@radix-ui/react-popover": "1.1.2",
+    "@radix-ui/react-scroll-area": "1.2.1",
     "@radix-ui/react-select": "2.1.2",
     "@radix-ui/react-slot": "1.1.0",
     "@types/cookie": "0.4.1",

apps/web/src/components/milestone-logs/system/SystemForm.tsx

@@ -44,7 +44,7 @@ import { useSystem } from './SystemContext';
 
 const formSchema = z.object({
   id: z.string().optional(),
-  status: z.string(),
+  status: z.string().min(1, { message: 'Milestone is required' }),
   start_date: z.date(),
   notes: z.string().optional(),
 });
@@ -113,6 +113,8 @@ export function SystemForm() {
     }
   }, [selectedMilestone, form]);
 
+  const isUpdate = !!selectedMilestone?.id;
+
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>
@@ -134,7 +136,7 @@ export function SystemForm() {
         <Form {...form}>
           <form onSubmit={form.handleSubmit(onSubmit)}>
             <DialogHeader>
-              <DialogTitle>Add Milestone</DialogTitle>
+              <DialogTitle>{isUpdate ? 'Update' : 'Add'} Milestone</DialogTitle>
             </DialogHeader>
 
             <section className='flex flex-col gap-4 py-6'>
@@ -190,11 +192,10 @@ export function SystemForm() {
                           mode='single'
                           showOutsideDays
                           selected={field.value}
+                          defaultMonth={field.value}
                           autoFocus
-                          onSelect={value => {
-                            field.onChange(value);
-                            setCalendarOpen(false);
-                          }}
+                          onSelect={field.onChange}
+                          onDayClick={() => setCalendarOpen(false)}
                         />
                       </PopoverContent>
                     </Popover>

apps/web/src/components/ui/calendar.tsx

@@ -2,10 +2,25 @@
 
 import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon } from 'lucide-react';
 import * as React from 'react';
-import { DayFlag, DayPicker, SelectionState, UI } from 'react-day-picker';
+import {
+  DayFlag,
+  DayPicker,
+  DropdownProps,
+  SelectionState,
+  UI,
+  DropdownNavProps,
+} from 'react-day-picker';
 
 import { cn } from '@/lib/utils';
 import { buttonVariants } from './button';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { ScrollArea } from '@/components/ui/scroll-area';
 
 export type CalendarProps = React.ComponentProps<typeof DayPicker>;
 
@@ -17,6 +32,7 @@ export const Calendar = ({
 }: CalendarProps) => {
   return (
     <DayPicker
+      captionLayout='dropdown'
       showOutsideDays={showOutsideDays}
       className={cn('p-3 bg-white', className)}
       classNames={{
@@ -55,7 +71,49 @@ export const Calendar = ({
         ...classNames,
       }}
       components={{
+        Dropdown: ({ value, onChange, options }: DropdownProps) => {
+          const selected = options?.find(child => child.value === value);
+          const isYearDropdown = options && options.length > 12;
+          const sortedOptions = isYearDropdown
+            ? options?.sort((a, b) => b.value - a.value)
+            : options;
+          const handleChange = (value: string) => {
+            const changeEvent = {
+              target: { value },
+            } as React.ChangeEvent<HTMLSelectElement>;
+            onChange?.(changeEvent);
+          };
+          return (
+            <Select
+              value={value?.toString()}
+              onValueChange={value => {
+                handleChange(value);
+              }}
+            >
+              <SelectTrigger
+                className={cn('pr-1.5 focus:ring-0', isYearDropdown ? 'w-auto' : 'w-[104px]')}
+              >
+                <SelectValue>{selected?.label}</SelectValue>
+              </SelectTrigger>
+              <SelectContent position='popper'>
+                <ScrollArea className='h-80'>
+                  {sortedOptions?.map((option, id: number) => (
+                    <SelectItem
+                      key={`${option.value}-${id}`}
+                      value={option.value?.toString() ?? ''}
+                    >
+                      {option.label}
+                    </SelectItem>
+                  ))}
+                </ScrollArea>
+              </SelectContent>
+            </Select>
+          );
+        },
         Chevron: ({ ...props }) => <Chevron {...props} />,
+        DropdownNav: ({ className, ...props }: DropdownNavProps) => (
+          <div className={`${className} flex gap-2`} {...props} />
+        ),
       }}
       {...props}
     />

apps/web/src/components/ui/form.tsx

@@ -148,7 +148,7 @@ const FormMessage = React.forwardRef<
     <p
       ref={ref}
       id={formMessageId}
-      className={cn('text-[0.8rem] font-medium text-destructive', className)}
+      className={cn('text-[0.8rem] font-medium text-destructive text-red-500', className)}
       {...props}
     >
       {body}

apps/web/src/components/ui/scroll-area.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import * as React from 'react';
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+
+import { cn } from '@/lib/utils';
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn('relative overflow-hidden', className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className='h-full w-full rounded-[inherit]'>
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = 'vertical', ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      'flex touch-none select-none transition-colors',
+      orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent p-[1px]',
+      orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent p-[1px]',
+      className,
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className='relative flex-1 rounded-full bg-border' />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+
+export { ScrollArea, ScrollBar };

apps/web/src/components/ui/select.tsx

@@ -68,9 +68,10 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
         position === 'popper' &&
           'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+        'bg-white',
         className,
       )}
       position={position}

yarn.lock

@@ -1447,6 +1447,7 @@ __metadata:
     "@radix-ui/react-dialog": 1.1.2
     "@radix-ui/react-label": 2.1.0
     "@radix-ui/react-popover": 1.1.2
+    "@radix-ui/react-scroll-area": 1.2.1
     "@radix-ui/react-select": 2.1.2
     "@radix-ui/react-slot": 1.1.0
     "@tailwindcss/typography": 0.4.1
@@ -2810,6 +2811,33 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-scroll-area@npm:1.2.1":
+  version: 1.2.1
+  resolution: "@radix-ui/react-scroll-area@npm:1.2.1"
+  dependencies:
+    "@radix-ui/number": 1.1.0
+    "@radix-ui/primitive": 1.1.0
+    "@radix-ui/react-compose-refs": 1.1.0
+    "@radix-ui/react-context": 1.1.1
+    "@radix-ui/react-direction": 1.1.0
+    "@radix-ui/react-presence": 1.1.1
+    "@radix-ui/react-primitive": 2.0.0
+    "@radix-ui/react-use-callback-ref": 1.1.0
+    "@radix-ui/react-use-layout-effect": 1.1.0
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: f22d0a96f27802c37ed3bebc2b737661d5d8abb927c8f68d7a293b5da52b8d4bafac5b7dede2ecf908c9846bae043e13806ef32642774edcc8982a6d182c3cb3
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-select@npm:2.1.2":
   version: 2.1.2
   resolution: "@radix-ui/react-select@npm:2.1.2"