feat: implement recovery incident management components and form for adding incidents

src/app/recoveryIncidents/components/AddRecoveryIncidents.tsx

@@ -18,6 +18,7 @@ import type { RecoveryIncident } from '../RecoveryIncidentsTypes';
 interface AddRecoveryIncidentsProps {
   isOpen: boolean;
   onClose: () => void;
+  onSuccess?: (createdCount: number, flightNumber: string, passengerName: string) => void;
   incident?: RecoveryIncident | null;
 }
 
@@ -44,7 +45,7 @@ const DEFAULT_JURISDICTION_OPTIONS = [
   { label: "CAA SG (Singapore)", value: "CAA_SG" },
 ];
 
-export default function AddRecoveryIncidents({ isOpen, onClose, incident }: AddRecoveryIncidentsProps) {
+export default function AddRecoveryIncidents({ isOpen, onClose, onSuccess, incident }: AddRecoveryIncidentsProps) {
   const [, setLoyaltyTierOptions] = useState<{ label: string; value: string }[]>([]);
   const [jurisdictionOptions, setJurisdictionOptions] = useState<{ label: string; value: string }[]>(DEFAULT_JURISDICTION_OPTIONS);
   const [scenarioOptions, setScenarioOptions] = useState<{ label: string; value: string }[]>(DEFAULT_SCENARIO_OPTIONS);
@@ -347,6 +348,14 @@ export default function AddRecoveryIncidents({ isOpen, onClose, incident }: AddR
         });
 
         await Promise.all(promises);
+        
+        if (onSuccess) {
+          onSuccess(
+            selectedPassengers.length,
+            formData.flightNumber || "TBD",
+            selectedPassengers[0]?.passengerName || "Unknown"
+          );
+        }
       }
       onClose();
     } catch (error: any) {

src/app/recoveryIncidents/components/RecoveryIncidentsList.tsx

@@ -23,6 +23,7 @@ import {
   CustomActionMenu,
   CustomActionItem,
   CustomAlertBanner,
+  CustomSuccessModal,
 } from "../../../components/custom";
 import type { Column } from "../../../components/custom/CustomTable";
 import type { RecoveryIncident, MetricCardData } from "../RecoveryIncidentsTypes";
@@ -113,6 +114,14 @@ export default function RecoveryIncidentsList() {
   // Selection
   const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
 
+  // Success Modal
+  const [successModalData, setSuccessModalData] = useState<{
+    isOpen: boolean;
+    count: number;
+    flightNumber: string;
+    passengerName: string;
+  }>({ isOpen: false, count: 0, flightNumber: '', passengerName: '' });
+
   // ─── Fetch data ─────────────────────────────────────────────
 
   const fetchIncidents = useCallback(async () => {
@@ -596,6 +605,32 @@ export default function RecoveryIncidentsList() {
           setEditingIncident(null);
           fetchIncidents(); // Refresh list
         }}
+        onSuccess={(createdCount, flightNumber, passengerName) => {
+          setSuccessModalData({
+            isOpen: true,
+            count: createdCount,
+            flightNumber,
+            passengerName,
+          });
+        }}
+      />
+
+      {/* Success Modal */}
+      <CustomSuccessModal
+        isOpen={successModalData.isOpen}
+        onClose={() => setSuccessModalData((prev) => ({ ...prev, isOpen: false }))}
+        title={
+          successModalData.count > 1 
+            ? "Recovery Incidents Created."
+            : "Recovery Incident Created."
+        }
+        label="FLIGHT & PASSENGER DETAILS"
+        cohortName={`Flight ${successModalData.flightNumber}`}
+        cohortDescription={
+          successModalData.count > 1
+            ? `Successfully logged incidents for ${successModalData.count} passengers, including ${successModalData.passengerName}.`
+            : `Successfully logged incident for ${successModalData.passengerName}.`
+        }
       />
     </div>
   );

src/components/custom/index.ts

@@ -24,7 +24,7 @@ import Skeleton from "./CustomSkeleton";
 import CustomTimePicker from "./CustomTimePicker";
 import CustomAccordionSection from "./CustomAccordionSection";
 import CustomFullModal from "./CustomFullModal";
-
+import CustomSuccessModal from "./CustomSuccessModal";
 export {
   CustomInput,
   CustomTextArea,
@@ -51,5 +51,6 @@ export {
   CustomAlertBanner,
   Skeleton,
   CustomTimePicker,
-  CustomAccordionSection
+  CustomAccordionSection,
+  CustomSuccessModal
 };