chore: Hook up backend API calls for adding repairs

Author: diego-oxd

admin/frontend/src/pages/rec-resource-page/components/RecResourceAssetsSection/AddRepairModal.tsx

@@ -5,6 +5,8 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import clsx from 'clsx';
 import Select from 'react-select';
 import { CustomButton } from '@/components';
+import { useBulkInsertAssetRepairs } from '@/services/hooks/recreation-resource-admin';
+import { buildBulkRepairPayload } from './buildBulkRepairPayload';
 import {
   createRepairGroupFormState,
   isRepairGroupValid,
@@ -32,6 +34,7 @@ export interface AddRepairFormState {
 
 interface AddRepairModalProps {
   show: boolean;
+  recResourceId: string;
   repairCodes: RepairCode[];
   assetCodes: AssetCode[];
   assets: Asset[];
@@ -41,6 +44,7 @@ interface AddRepairModalProps {
 
 export function AddRepairModal({
   show,
+  recResourceId,
   repairCodes,
   assetCodes,
   assets,
@@ -49,6 +53,7 @@ export function AddRepairModal({
 }: AddRepairModalProps) {
   const { scrollRef, contentRef, canScrollUp, canScrollDown } =
     useModalScrollFade();
+  const bulkInsertAssetRepairs = useBulkInsertAssetRepairs();
   const [selectedRepairType, setSelectedRepairType] = useState('');
   const [completionDate, setCompletionDate] = useState('');
   const [repairGroups, setRepairGroups] = useState<RepairGroupFormState[]>([
@@ -116,10 +121,27 @@ export function AddRepairModal({
         isRepairGroupValid(group, assets, assetCodes),
       );
 
-    if (isValid) {
-      onCreate();
-      resetForm();
+    if (!isValid) {
+      return;
     }
+
+    const dto = buildBulkRepairPayload(
+      selectedRepairType,
+      completionDate,
+      repairGroups,
+      assets,
+      assetCodes,
+    );
+
+    bulkInsertAssetRepairs.mutate(
+      { recResourceId, dto },
+      {
+        onSuccess: () => {
+          resetForm();
+          onCreate();
+        },
+      },
+    );
   };
 
   return (
@@ -233,15 +255,21 @@ export function AddRepairModal({
         </div>
       </Modal.Body>
       <Modal.Footer className="add-repair-modal__footer">
-        <CustomButton variant="outline-primary" onClick={handleCancel}>
+        <CustomButton
+          variant="outline-primary"
+          onClick={handleCancel}
+          disabled={bulkInsertAssetRepairs.isPending}
+        >
           Cancel
         </CustomButton>
         <CustomButton
           variant="primary"
           onClick={handleCreateClick}
-          disabled={!hasSelectedAsset}
+          disabled={!hasSelectedAsset || bulkInsertAssetRepairs.isPending}
         >
-          Create repairs
+          {bulkInsertAssetRepairs.isPending
+            ? 'Creating repairs...'
+            : 'Create repairs'}
         </CustomButton>
       </Modal.Footer>
     </Modal>

admin/frontend/src/pages/rec-resource-page/components/RecResourceAssetsSection/RecResourceAssetsSection.tsx

@@ -212,6 +212,7 @@ export function RecResourceAssetsSection() {
 
       <AddRepairModal
         show={isAddRepairModalOpen}
+        recResourceId={recResourceId}
         repairCodes={repairCodes}
         assetCodes={assetCodes ?? []}
         assets={assets ?? []}

admin/frontend/src/pages/rec-resource-page/components/RecResourceAssetsSection/RepairAssetEntry.tsx

@@ -44,9 +44,10 @@ export function createRepairGroupFormState(id: number): RepairGroupFormState {
   };
 }
 
-// Shared with AddRepairModal so the "Create repairs" submit check validates
-// against exactly the same matching/selection logic this component renders.
-function getRepairGroupContext(
+// Shared with AddRepairModal so the "Create repairs" submit check and the
+// submit payload builder both use exactly the same matching/selection logic
+// this component renders.
+export function getRepairGroupContext(
   entry: RepairGroupFormState,
   assets: Asset[],
   assetCodes: AssetCode[],

admin/frontend/src/pages/rec-resource-page/components/RecResourceAssetsSection/buildBulkRepairPayload.ts

@@ -0,0 +1,56 @@
+import type {
+  RecreationAssetBulkRepairDto,
+  RepairChange,
+} from '@/services/recreation-resource-admin';
+import { getRepairGroupContext } from './RepairAssetEntry';
+import type { RepairGroupFormState } from './RepairAssetEntry';
+import type { Asset, AssetCode } from './types';
+
+/**
+ * Builds the bulk-repair API payload from the modal's form state. Assumes
+ * every group has already passed isRepairGroupValid. Non-trail groups
+ * collapse into one RepairChange covering every selected asset; trail groups
+ * split into one RepairChange per selected asset so each can carry its own
+ * start/end station.
+ */
+export function buildBulkRepairPayload(
+  recreationRemedRepairCode: string,
+  completionDate: string,
+  repairGroups: RepairGroupFormState[],
+  assets: Asset[],
+  assetCodes: AssetCode[],
+): RecreationAssetBulkRepairDto {
+  const changes: RepairChange[] = repairGroups
+    .filter((group) => group.assetTypeCode)
+    .flatMap((group) => {
+      const { selectedAssets, isTrailAssetType } = getRepairGroupContext(
+        group,
+        assets,
+        assetCodes,
+      );
+
+      if (isTrailAssetType) {
+        return selectedAssets.map((asset) => ({
+          estimated_repair_cost: group.estimatedCost ?? 0,
+          actual_repair_cost: group.actualCost,
+          station_start: group.trailStations[asset.asset_id]?.startStation,
+          station_end: group.trailStations[asset.asset_id]?.endStation,
+          asset_ids: [asset.asset_id],
+        }));
+      }
+
+      return [
+        {
+          estimated_repair_cost: group.estimatedCost ?? 0,
+          actual_repair_cost: group.actualCost,
+          asset_ids: selectedAssets.map((asset) => asset.asset_id),
+        },
+      ];
+    });
+
+  return {
+    recreation_remed_repair_code: recreationRemedRepairCode,
+    completed_date: completionDate || undefined,
+    changes,
+  };
+}

admin/frontend/src/services/hooks/recreation-resource-admin/index.ts

@@ -28,6 +28,7 @@ export * from './useCreateTrail';
 export * from './useUpdateTrail';
 export * from './useDeleteTrail';
 export * from './useAssetsApiClient';
+export * from './useBulkInsertAssetRepairs';
 export * from './useGetAssetsByRecResourceId';
 export * from './useGetAssetCodes';
 export * from './useGetRepairCodes';

admin/frontend/src/services/hooks/recreation-resource-admin/useBulkInsertAssetRepairs.ts

@@ -0,0 +1,62 @@
+import {
+  RecreationAssetBulkRepairDto,
+  ResponseError,
+} from '@/services/recreation-resource-admin';
+import { useAssetsApiClient } from '@/services/hooks/recreation-resource-admin/useAssetsApiClient';
+import {
+  addErrorNotification,
+  addSuccessNotification,
+} from '@/store/notificationStore';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { createRetryHandler } from './helpers';
+import { RECREATION_RESOURCE_QUERY_KEYS } from './queryKeys';
+
+export interface BulkInsertAssetRepairsRequest {
+  recResourceId: string;
+  dto: RecreationAssetBulkRepairDto;
+}
+
+export function useBulkInsertAssetRepairs() {
+  const assetsApiClient = useAssetsApiClient();
+  const queryClient = useQueryClient();
+
+  return useMutation<void, ResponseError, BulkInsertAssetRepairsRequest>({
+    mutationFn: async ({ dto }) => {
+      await assetsApiClient.bulkInsertAssetRepairs({
+        recreationAssetBulkRepairDto: dto,
+      });
+    },
+    retry: createRetryHandler({
+      onFail: () =>
+        addErrorNotification(
+          'Failed to add repairs after multiple attempts. Please try again later.',
+          'bulkInsertAssetRepairs-error',
+        ),
+    }),
+    onSuccess: (_data, variables) => {
+      addSuccessNotification(
+        'Repairs added successfully',
+        'bulkInsertAssetRepairs-success',
+      );
+      queryClient.invalidateQueries({
+        queryKey: RECREATION_RESOURCE_QUERY_KEYS.assets(
+          variables.recResourceId,
+        ),
+      });
+    },
+    onError: (error) => {
+      const statusCode = error.response?.status;
+      if (statusCode === 404) {
+        addErrorNotification(
+          'One or more selected assets could not be found',
+          'bulkInsertAssetRepairs-notfound',
+        );
+      } else if (statusCode === 400) {
+        addErrorNotification(
+          'Invalid repair details. Please check the form and try again',
+          'bulkInsertAssetRepairs-badrequest',
+        );
+      }
+    },
+  });
+}