[ENG-887] Fix internal and external delivery batch failure and refine supply delivery limit UI

.example.env

@@ -190,5 +190,9 @@ REACT_DECIMAL_ROUNDING_METHOD=ROUND_HALF_UP
 # Maximum number of forms that can be favorited in the forms dialog (default: 5)
 REACT_MAX_FORM_DIALOG_FAVORITES=5
 
+# Maximum number of datapoints allowed in a single upsert request (default: 100)
+# Must not exceed the backend limit
+REACT_MAX_DATAPOINTS_PER_UPSERT=100
+
 # Default tab for medication selector. Valid values: product, valueset
 REACT_MEDICATION_VALUE_SET_SELECT_DEFAULT_TAB=product

care.config.ts

@@ -79,8 +79,7 @@ const careConfig = {
       : undefined),
 
   defaultDischargeDisposition: env.REACT_DEFAULT_DISCHARGE_DISPOSITION as
-    | EncounterDischargeDisposition
-    | undefined,
+    EncounterDischargeDisposition | undefined,
 
   mapFallbackUrlTemplate:
     env.REACT_MAPS_FALLBACK_URL_TEMPLATE ||
@@ -407,6 +406,14 @@ const careConfig = {
   maxFormDialogFavorites: env.REACT_MAX_FORM_DIALOG_FAVORITES
     ? parseInt(env.REACT_MAX_FORM_DIALOG_FAVORITES, 10)
     : 5,
+
+  /**
+   * Maximum number of datapoints allowed in a single upsert request.
+   * Must not exceed the backend limit (defaults to 100).
+   */
+  maxDatapointsPerUpsert: env.REACT_MAX_DATAPOINTS_PER_UPSERT
+    ? parseInt(env.REACT_MAX_DATAPOINTS_PER_UPSERT, 10)
+    : 100,
 } as const;
 
 export default careConfig;

public/locale/en.json

@@ -3063,6 +3063,7 @@
   "issuer_type": "Issuer Type",
   "item": "Item",
   "item_condition": "Item Condition?",
+  "item_limit_reached": "Item limit reached",
   "item_location": "Item Location",
   "item_marked_as_abandoned": "Item marked as abandoned successfully",
   "item_marked_as_entered_in_error": "Item marked as entered in error successfully",
@@ -3183,7 +3184,7 @@
   "live": "Live",
   "live_monitoring": "Live Monitoring",
   "live_patients_total_beds": "Live Patients / Total beds",
-  "load_from_order": "Load from order",
+  "load_from_order_with_items": "Load from order ({{count}} items)",
   "load_more": "Load More",
   "loading": "Loading...",
   "loading_appointment_details": "Loading appointment details...",
@@ -3410,6 +3411,7 @@
   "max": "Max",
   "max_applicable_discounts": "Maximum Applicable Discounts",
   "max_applicable_discounts_description": "The maximum number of discount components that can be applied to a single invoice. Set to 0 for no discount.",
+  "max_datapoints_per_upsert_limit": "You cannot add more than {{count}} items in a single delivery.",
   "max_dosage_24_hrs": "Max. dosage in 24 hrs.",
   "max_dosage_in_24hrs_gte_base_dosage_error": "Max. dosage in 24 hours must be greater than or equal to base dosage",
   "max_favorites_reached": "You've reached the limit. Only {{count}} forms can be favourited.",

scripts/validate-env.ts

@@ -170,6 +170,7 @@ const envSchema = z
       })
       .optional(),
     REACT_MAX_FORM_DIALOG_FAVORITES: numberAsString.optional(),
+    REACT_MAX_DATAPOINTS_PER_UPSERT: numberAsString.optional(),
   })
   .superRefine(async (data, ctx) => {
     // Ensure at least one API URL configuration is provided

src/CAREUI/display/Callout.tsx

@@ -1,11 +1,11 @@
-import React from "react";
+import React, { ReactNode } from "react";
 
 import { cn } from "@/lib/utils";
 
 interface CalloutProps {
   variant?: "primary" | "secondary" | "warning" | "alert" | "danger";
   className?: string;
-  badge: string;
+  badge: ReactNode;
   children: React.ReactNode;
 }
 
@@ -27,20 +27,7 @@ export default function Callout({
         props.className,
       )}
     >
-      <div
-        className={cn(
-          "h-min rounded-full border bg-white px-2",
-          {
-            primary: "border-primary-200",
-            secondary: "border-secondary-300",
-            warning: "border-warning-300",
-            alert: "border-purple-300",
-            danger: "border-danger-300",
-          }[variant],
-        )}
-      >
-        <span className="font-medium">{props.badge}</span>
-      </div>
+      <span className="font-medium">{props.badge}</span>
       <div className="flex-1">
         <span className="font-medium">{props.children}</span>
       </div>

src/pages/Facility/services/inventory/externalSupply/deliveryOrder/AddSupplyDeliveryForm.tsx

@@ -1,6 +1,6 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { PlusCircle, Trash2 } from "lucide-react";
+import { PlusCircle, Trash2, TriangleAlert } from "lucide-react";
 import { useQueryParams } from "raviger";
 import { useCallback, useMemo, useState } from "react";
 import { useFieldArray, useForm } from "react-hook-form";
@@ -12,6 +12,7 @@ import careConfig from "@/../care.config";
 import { cn } from "@/lib/utils";
 
 import { DisablingCover } from "@/components/Common/DisablingCover";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import Autocomplete from "@/components/ui/autocomplete";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
@@ -129,6 +130,9 @@ interface Props {
   origin?: string;
   destination: string;
   onSuccess: () => void;
+
+  supplyDeliveriesCount: number;
+  isFetchingSupplyDeliveries: boolean;
 }
 
 export function AddSupplyDeliveryForm({
@@ -137,6 +141,8 @@ export function AddSupplyDeliveryForm({
   origin,
   destination,
   onSuccess,
+  supplyDeliveriesCount,
+  isFetchingSupplyDeliveries,
 }: Props) {
   const { t } = useTranslation();
   const queryClient = useQueryClient();
@@ -237,6 +243,9 @@ export function AddSupplyDeliveryForm({
     name: "items",
   });
 
+  const hasReachedUpsertLimit =
+    supplyDeliveriesCount >= careConfig.maxDatapointsPerUpsert;
+
   const loadFromSupplyRequests = () => {
     setIsSelectDialogOpen(true);
     handleSelectAll(true);
@@ -897,29 +906,42 @@ export function AddSupplyDeliveryForm({
                     </div>
                   </div>
 
-                  <div className="flex flex-row gap-2 mt-4 items-end">
-                    <Button
-                      type="button"
-                      variant="outline"
-                      onClick={handleAddAnotherItem}
-                    >
-                      <PlusCircle className="mr-2 size-4" />
-                      {t("add_another")}
-                    </Button>
-                    {supplyRequests?.results?.length &&
-                      supplyRequests?.results?.length > 0 && (
-                        <Button
-                          type="button"
-                          variant="secondary"
-                          onClick={loadFromSupplyRequests}
-                        >
-                          {t("load_from_order")} ({supplyRequests?.count}{" "}
-                          {t("items")}
-                          )
-                          <ShortcutBadge actionId="load-from-order" />
-                        </Button>
-                      )}
-                  </div>
+                  {supplyDeliveriesCount + fields.length >=
+                  careConfig.maxDatapointsPerUpsert ? (
+                    <Alert className="border-amber-300 bg-amber-50 text-amber-800 [&>svg]:text-amber-600 *:data-[slot=alert-description]:text-amber-700">
+                      <TriangleAlert />
+                      <AlertTitle>{t("item_limit_reached")}</AlertTitle>
+                      <AlertDescription>
+                        {t("max_datapoints_per_upsert_limit", {
+                          count: careConfig.maxDatapointsPerUpsert,
+                        })}
+                      </AlertDescription>
+                    </Alert>
+                  ) : (
+                    <div className="flex flex-row gap-2 mt-4 items-end">
+                      <Button
+                        type="button"
+                        variant="outline"
+                        onClick={handleAddAnotherItem}
+                      >
+                        <PlusCircle className="mr-2 size-4" />
+                        {t("add_another")}
+                      </Button>
+                      {supplyRequests?.results?.length &&
+                        supplyRequests?.results?.length > 0 && (
+                          <Button
+                            type="button"
+                            variant="secondary"
+                            onClick={loadFromSupplyRequests}
+                          >
+                            {t("load_from_order_with_items", {
+                              count: supplyRequests?.count,
+                            })}
+                            <ShortcutBadge actionId="load-from-order" />
+                          </Button>
+                        )}
+                    </div>
+                  )}
 
                   <div className="flex justify-between">
                     <Button
@@ -952,10 +974,15 @@ export function AddSupplyDeliveryForm({
                           type="button"
                           variant="outline_primary"
                           onClick={loadFromSupplyRequests}
+                          disabled={
+                            isProcessing ||
+                            hasReachedUpsertLimit ||
+                            isFetchingSupplyDeliveries
+                          }
                         >
-                          {t("load_from_order")} ({supplyRequests?.count}{" "}
-                          {t("items")}
-                          )
+                          {t("load_from_order_with_items", {
+                            count: supplyRequests?.count,
+                          })}
                           <ShortcutBadge actionId="load-from-order" />
                         </Button>
                         <p>- {t("or")} -</p>
@@ -971,6 +998,11 @@ export function AddSupplyDeliveryForm({
                     type="button"
                     variant="outline_primary"
                     onClick={() => handleAddAnotherItem()}
+                    disabled={
+                      isProcessing ||
+                      hasReachedUpsertLimit ||
+                      isFetchingSupplyDeliveries
+                    }
                   >
                     <PlusCircle className="mr-2 size-4" />
                     {t("add_item")}

src/pages/Facility/services/inventory/externalSupply/deliveryOrder/DeliveryOrderShow.tsx

@@ -7,13 +7,15 @@ import {
   Hash,
   MoreVertical,
   Printer,
+  TriangleAlert,
   Truck,
 } from "lucide-react";
 import { Link, navigate } from "raviger";
 import { useMemo, useState } from "react";
 import { Trans, useTranslation } from "react-i18next";
 import { toast } from "sonner";
 
+import Callout from "@/CAREUI/display/Callout";
 import CareIcon from "@/CAREUI/icons/CareIcon";
 import ConfirmActionDialog from "@/components/Common/ConfirmActionDialog";
 import Page from "@/components/Common/Page";
@@ -76,6 +78,7 @@ import mutate from "@/Utils/request/mutate";
 import query from "@/Utils/request/query";
 import { ExtensionContexts } from "@/Utils/schema/types";
 import { formatDateTime, formatName } from "@/Utils/utils";
+import careConfig from "@careConfig";
 
 interface Props {
   facilityId: string;
@@ -264,18 +267,22 @@ export function DeliveryOrderShow({
 
   const isRequester = locationId === deliveryOrder?.destination.id;
 
-  const { data: supplyDeliveries, isLoading: isLoadingSupplyDeliveries } =
-    useQuery({
-      queryKey: ["supplyDeliveries", deliveryOrderId],
-      queryFn: query.paginated(supplyDeliveryApi.listSupplyDelivery, {
-        queryParams: {
-          order: deliveryOrderId,
-          facility: facilityId,
-          ordering: "created_date",
-        },
-      }),
-      enabled: !!deliveryOrderId,
-    });
+  const {
+    data: supplyDeliveries,
+    isLoading: isLoadingSupplyDeliveries,
+    isFetching: isFetchingSupplyDeliveries,
+  } = useQuery({
+    queryKey: ["supplyDeliveries", deliveryOrderId],
+    queryFn: query.paginated(supplyDeliveryApi.listSupplyDelivery, {
+      queryParams: {
+        order: deliveryOrderId,
+        facility: facilityId,
+        ordering: "created_date",
+      },
+      pageSize: careConfig.maxDatapointsPerUpsert,
+    }),
+    enabled: !!deliveryOrderId,
+  });
 
   const supplyOrderId = supplyDeliveries?.results?.find(
     (delivery) => delivery.supply_request && delivery.supply_request.id,
@@ -471,6 +478,10 @@ export function DeliveryOrderShow({
     anyCompletedSupplyDeliveries,
   );
 
+  const hasReachedUpsertLimit =
+    supplyDeliveries &&
+    supplyDeliveries.results.length >= careConfig.maxDatapointsPerUpsert;
+
   return (
     <Page
       title={t("delivery_order_details")}
@@ -841,7 +852,7 @@ export function DeliveryOrderShow({
             </div>
           </CardHeader>
           <CardContent className="p-2">
-            {isLoadingSupplyDeliveries ? (
+            {isLoadingSupplyDeliveries || isFetchingSupplyDeliveries ? (
               <div className="space-y-2">
                 {Array.from({ length: 3 }).map((_, i) => (
                   <div key={i} className="animate-pulse">
@@ -911,14 +922,33 @@ export function DeliveryOrderShow({
                   <></>
                 )}
 
+                {hasReachedUpsertLimit && (
+                  <Callout
+                    variant="warning"
+                    className="border border-amber-300 bg-amber-50 text-amber-800"
+                    badge={
+                      <TriangleAlert className="size-4 shrink-0 text-amber-600" />
+                    }
+                  >
+                    <span className="flex items-center gap-2">
+                      {t("max_datapoints_per_upsert_limit", {
+                        count: careConfig.maxDatapointsPerUpsert,
+                      })}
+                    </span>
+                  </Callout>
+                )}
+
                 {/* Add New Supply Delivery Form - Always show when in draft mode */}
-                {canAddSupplyDeliveries && (
+                {canAddSupplyDeliveries && !hasReachedUpsertLimit && (
                   <AddSupplyDeliveryForm
                     deliveryOrderId={deliveryOrderId}
                     facilityId={facilityId}
                     origin={deliveryOrder.origin?.id}
                     destination={deliveryOrder.destination.id}
                     onSuccess={handleSupplyDeliverySuccess}
+                    supplyDeliveriesCount={
+                      supplyDeliveries?.results.length || 0
+                    }
                   />
                 )}
               </div>

src/pages/Facility/services/pharmacy/components/AddMedicationReturnItemForm.tsx

@@ -467,8 +467,9 @@ export function AddMedicationReturnItemForm({
                       variant="secondary"
                       onClick={loadFromMedicationDispenses}
                     >
-                      {t("load_from_order")} ({medicationDispenses.length}{" "}
-                      {t("items")})
+                      {t("load_from_order_with_items", {
+                        count: medicationDispenses.length,
+                      })}
                       <ShortcutBadge actionId="load-from-order" />
                     </Button>
                   )}
@@ -506,8 +507,9 @@ export function AddMedicationReturnItemForm({
                       variant="outline_primary"
                       onClick={loadFromMedicationDispenses}
                     >
-                      {t("load_from_order")} ({medicationDispenses.length}{" "}
-                      {t("items")})
+                      {t("load_from_order_with_items", {
+                        count: medicationDispenses.length,
+                      })}
                       <ShortcutBadge actionId="load-from-order" />
                     </Button>
                     <p>- {t("or")} -</p>