5162 response requisition indicator UI

client/packages/common/src/intl/locales/en/common.json

@@ -38,9 +38,9 @@
   "button.close": "Close",
   "button.close-the-menu": "Close the menu",
   "button.create": "Create",
-  "button.create-new": "Create new",
   "button.create-a-new-one": "Create a new one",
   "button.create-log-reason": "Create log reason",
+  "button.create-new": "Create new",
   "button.create-shipment": "Create Shipment",
   "button.dashboard": "Dashboard",
   "button.delete": "Delete",
@@ -49,6 +49,7 @@
   "button.edit": "Edit",
   "button.edit-linked-patient": "Edit Linked Patient",
   "button.export": "Export",
+  "button.hiv": "HIV",
   "button.import": "Import",
   "button.import-fridge-tag": "Import Fridge-tag",
   "button.import-properties": "Import Properties",
@@ -79,6 +80,7 @@
   "button.print-qr": "Print QR code",
   "button.reduce-lines-to-zero": "Reduce lines to 0",
   "button.refresh": "Refresh",
+  "button.regimen": "Regimen",
   "button.remove-file": "Remove file",
   "button.repack": "Repack",
   "button.replenishment-return-lines": "Return selected lines",
@@ -102,8 +104,8 @@
   "button.view": "View",
   "button.view-all-breaches": "View all breaches",
   "button.view-details": "View Details",
-  "button.view-prescription": "View prescription",
   "button.view-patient": "View patient",
+  "button.view-prescription": "View prescription",
   "button.zero-line-quantity": "Set quantities to 0",
   "catalogue": "Catalogue",
   "cmdk.drawer-toggle": "Toggle Menu",
@@ -278,6 +280,7 @@
   "error.no-immunisation-programs": "No Immunization programs found",
   "error.no-inbound-items": "No items have been added to this shipment.",
   "error.no-inbound-shipments": "There are no Inbound Shipments to display.",
+  "error.no-indicators": "There are no indicators for this requisition",
   "error.no-internal-orders": "No internal orders to display.",
   "error.no-items": "No items",
   "error.no-items-filter-on": "No items to display. Try changing the filter criteria.",
@@ -379,6 +382,7 @@
   "error.v6-server-not-configured": "V6 central server not configured",
   "error.v6-server-not-configured-hint": "Check the central server URL",
   "error.vaccine-course-update-failed": "Vaccine course failed to save",
+  "error.value-type-not-correct": "Value type not correct",
   "facilities": "Facilities",
   "filename.asset-categories": "asset-categories",
   "filename.asset-import-example": "Example Asset Item Import",
@@ -419,9 +423,9 @@
   "heading.configuration": "Configuration",
   "heading.confirm-finalise": "Are you sure you want to finalise?",
   "heading.consumption-history": "Consumption History (monthly)",
+  "heading.create-new-asset": "Create new asset",
   "heading.create-outbound-shipment": "Create Outbound Shipment",
   "heading.create-vaccine-course": "Create vaccine course",
-  "heading.create-new-asset": "Create new asset",
   "heading.custom": "Custom",
   "heading.custom-logo": "Custom logo",
   "heading.custom-logo-info": "Replaces the default \"mSupply man\". The logo has to be in svg format, e.g. <?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>...<svg...>",
@@ -737,6 +741,7 @@
   "label.incoming": "Incoming",
   "label.incoming-stock": "Stock arriving",
   "label.increase-qty": "Increase quantity",
+  "label.indicators": "Indicators",
   "label.initial-stock-on-hand": "Initial SOH",
   "label.initialise-store-properties": "Initialise store properties for GAPS",
   "label.initialised": "Initialised",
@@ -882,10 +887,10 @@
   "label.phone": "Phone",
   "label.picked": "Picked",
   "label.placeholder": "Placeholder",
+  "label.prescription-date": "Prescription Date",
   "label.previous-encounters": "Previous Encounters",
   "label.pricing": "Pricing",
   "label.primary": "Primary",
-  "label.prescription-date": "Prescription Date",
   "label.program": "Program",
   "label.program-enrolment": "Program Enrolment",
   "label.program-enrolments": "Program Enrolments",
@@ -1151,7 +1156,10 @@
   "messages.bundled-item-saved": "Bundled item saved successfully",
   "messages.by-user": "by {{username}}",
   "messages.cannot-bundle": "You can't bundle other item variants with this one, as this variant is already bundled with other items",
+  "messages.cannot-delete-finalised-requisition": "Cannot delete finalised requisition",
   "messages.cannot-delete-multiple-lines": "One or more lines cannot be deleted",
+  "messages.cannot-delete-requisition-with-shipment": "Cannot delete requisition linked to a shipment",
+  "messages.cannot-delete-transfer-requisition": "Cannot delete transfer requisition",
   "messages.cannot-view-vaccine-card": "You cannot view this patient's Vaccination Card from this store, because they were enrolled in the {{ programName }} by another store",
   "messages.cant-delete-generic": "You cannot delete one or more of the selected items",
   "messages.cant-delete-requisitions": "Can only delete requisitions with a status of 'Draft'",
@@ -1269,11 +1277,11 @@
   "messages.confirm-zero-shipment-lines_other": "This will set the quantity of {{count}} lines to 0",
   "messages.connected-to-printer": "Connected successfully to printer!",
   "messages.could-not-save": "Could not Save",
+  "messages.create-new-asset-confirmation": "The asset you scanned is not currently in the system, but has provided appropriate GS1 data. Would you like to create a new asset with this data?",
   "messages.create-outbound-from-requisition": "Are you sure you want to create an Outbound Shipment from this Customer Requisition?",
   "messages.create-stocktake-1": "You can create a stocktake based on items currently assigned to a location, items that you currently have in stock, items assigned to a master list, or items expiring before a particular date.",
   "messages.create-stocktake-2": "To create an empty stocktake, simply click OK to continue.",
   "messages.created-new-vaccine-course": "Successfully created vaccine course",
-  "messages.create-new-asset-confirmation": "The asset you scanned is not currently in the system, but has provided appropriate GS1 data. Would you like to create a new asset with this data?",
   "messages.customer-requisition-created-on": "Customer requisition created on {{date}}",
   "messages.delete-this-line": "Delete this line",
   "messages.deleted-assets_one": "Deleted {{count}} asset",
@@ -1429,6 +1437,7 @@
   "messages.prescription-saved": "Prescription saved 🥳",
   "messages.properties-download-example": "Download a template CSV",
   "messages.properties-template-download-text": " with the facilities' current properties ",
+  "messages.record-not-found": "Record not found",
   "messages.recorded-on": "Recorded on {{datetime}}",
   "messages.reduced-to-zero_one": "Reduced 1 line to quantity of 0",
   "messages.reduced-to-zero_other": "Reduced {{ count }} lines to quantity of 0",
@@ -1478,10 +1487,6 @@
   "messages.zero-line-quantities_one": "The quantity of 1 line has been set to 0",
   "messages.zero-line-quantities_other": "The quantity of {{count}} lines has been set to 0",
   "messages.zero-return-quantity-will-delete-lines": "There are no return quantities specified. Click OK again to confirm and remove these lines from the return.",
-  "messages.cannot-delete-finalised-requisition": "Cannot delete finalised requisition",
-  "messages.record-not-found": "Record not found",
-  "messages.cannot-delete-requisition-with-shipment": "Cannot delete requisition linked to a shipment",
-  "messages.cannot-delete-transfer-requisition": "Cannot delete transfer requisition",
   "monitoring": "Monitoring",
   "multiple": "[multiple]",
   "outbound-shipment": "Outbound Shipments",

client/packages/common/src/types/schema.ts

@@ -2379,6 +2379,7 @@ export type IndicatorLineNode = {
 export type IndicatorLineRowNode = {
   __typename: 'IndicatorLineRowNode';
   code: Scalars['String']['output'];
+  id: Scalars['String']['output'];
   lineNumber: Scalars['Int']['output'];
   name: Scalars['String']['output'];
   valueType?: Maybe<IndicatorValueTypeNode>;
@@ -6717,6 +6718,8 @@ export type RequisitionNode = {
   otherPartyId: Scalars['String']['output'];
   otherPartyName: Scalars['String']['output'];
   period?: Maybe<PeriodNode>;
+  program?: Maybe<ProgramNode>;
+  /** @deprecated use `program.name` instead. */
   programName?: Maybe<Scalars['String']['output']>;
   requisitionNumber: Scalars['Int']['output'];
   /** Applicable to request requisition only */
@@ -8929,6 +8932,11 @@ export type VaccineCourseSortInput = {
 
 export type VaccineCoursesResponse = VaccineCourseConnector;
 
+export type ValueTypeNotCorrect = UpdateIndicatorValueErrorInterface & {
+  __typename: 'ValueTypeNotCorrect';
+  description: Scalars['String']['output'];
+};
+
 export enum VenCategoryType {
   E = 'E',
   N = 'N',

client/packages/common/src/ui/components/navigation/ListOptions/ListOptions.tsx

@@ -50,7 +50,7 @@ export const ListOptions = ({
   );
 
   return (
-    <List sx={{ padding: 0, maxHeight: height * 0.8, overflow: 'auto' }}>
+    <List sx={{ padding: 0, maxHeight: height * 0.7, overflow: 'auto' }}>
       {options?.map((option, _) => (
         <React.Fragment key={option.id}>
           <ListItem

client/packages/config/src/routes.ts

@@ -38,6 +38,7 @@ export enum AppRoute {
   Locations = 'locations',
   MasterLists = 'master-lists',
   IndicatorsDemographics = 'indicators-demographics',
+  Indicators = 'indicators',
 
   Manage = 'manage',
   Programs = 'programs',

client/packages/reports/src/ListView/ListView.tsx

@@ -18,8 +18,8 @@ import {
 import { AppBarButtons } from './AppBarButton';
 import { SidePanel } from './SidePanel';
 import { ReportWidget } from '../components';
-import { JsonData } from 'packages/programs/src';
-import { AppRoute } from 'packages/config/src';
+import { JsonData } from '@openmsupply-client/programs';
+import { AppRoute } from '@openmsupply-client/config';
 
 export const ListView = () => {
   const t = useTranslation();

client/packages/requisitions/src/RequisitionService.tsx

@@ -8,6 +8,7 @@ import {
   ListView as ResponseRequisitionListView,
   DetailView as ResponseRequisitionDetailView,
   ResponseLineEditPage,
+  IndicatorEditPage,
 } from './ResponseRequisition';
 import { RouteBuilder, Routes, Route } from '@openmsupply-client/common';
 import { AppRoute } from '@openmsupply-client/config';
@@ -29,6 +30,13 @@ const customerRequisitionLineRoute = RouteBuilder.create(
   .addPart(':itemId')
   .build();
 
+const indicatorLineRoute = RouteBuilder.create(AppRoute.CustomerRequisition)
+  .addPart(':requisitionNumber')
+  .addPart(AppRoute.Indicators)
+  .addPart(':programIndicatorCode')
+  .addPart(':programIndicatorLineId')
+  .build();
+
 const internalOrdersRoute = RouteBuilder.create(AppRoute.InternalOrder).build();
 const internalOrderRoute = RouteBuilder.create(AppRoute.InternalOrder)
   .addPart(':requisitionNumber')
@@ -55,6 +63,7 @@ export const RequisitionService: FC = () => {
         path={customerRequisitionLineRoute}
         element={<ResponseLineEditPage />}
       />
+      <Route path={indicatorLineRoute} element={<IndicatorEditPage />} />
       <Route
         path={internalOrdersRoute}
         element={<RequestRequisitionListView />}

client/packages/requisitions/src/ResponseRequisition/DetailView/DetailView.tsx

@@ -13,6 +13,7 @@ import {
   BasicModal,
   Box,
   FnUtils,
+  IndicatorLineRowNode,
 } from '@openmsupply-client/common';
 import { AppRoute } from '@openmsupply-client/config';
 import {
@@ -25,7 +26,13 @@ import { Footer } from './Footer';
 import { AppBarButtons } from './AppBarButtons';
 import { SidePanel } from './SidePanel';
 import { ContentArea } from './ContentArea';
-import { useResponse, ResponseLineFragment } from '../api';
+import {
+  useResponse,
+  ResponseLineFragment,
+  ResponseFragment,
+  ProgramIndicatorFragment,
+} from '../api';
+import { IndicatorsTab } from './IndicatorsTab';
 import { ResponseRequisitionLineErrorProvider } from '../context';
 
 export const DetailView: FC = () => {
@@ -35,6 +42,13 @@ export const DetailView: FC = () => {
   const isDisabled = useResponse.utils.isDisabled();
   const { onOpen, isOpen, onClose } = useEditModal<ItemRowFragment>();
   const { mutateAsync } = useResponse.line.insert();
+  const { data: programIndicators, isLoading: isProgramIndicatorsLoading } =
+    useResponse.document.indicators(
+      data?.otherPartyId ?? '',
+      data?.period?.id ?? '',
+      data?.program?.id ?? '',
+      !!data
+    );
 
   const onRowClick = useCallback((line: ResponseLineFragment) => {
     navigate(
@@ -46,6 +60,27 @@ export const DetailView: FC = () => {
     );
   }, []);
 
+  const onProgramIndicatorClick = useCallback(
+    (
+      programIndicator?: ProgramIndicatorFragment,
+      indicatorLine?: IndicatorLineRowNode,
+      response?: ResponseFragment
+    ) => {
+      // TODO: Snack?
+      if (!response || !indicatorLine) return;
+      navigate(
+        RouteBuilder.create(AppRoute.Distribution)
+          .addPart(AppRoute.CustomerRequisition)
+          .addPart(String(response.requisitionNumber))
+          .addPart(AppRoute.Indicators)
+          .addPart(String(programIndicator?.code))
+          .addPart(String(indicatorLine.id))
+          .build()
+      );
+    },
+    []
+  );
+
   if (isLoading) return <DetailViewSkeleton />;
 
   const tabs = [
@@ -67,6 +102,20 @@ export const DetailView: FC = () => {
     },
   ];
 
+  if (data?.programName && !!data?.otherParty.store) {
+    tabs.push({
+      Component: (
+        <IndicatorsTab
+          onClick={onProgramIndicatorClick}
+          isLoading={isLoading || isProgramIndicatorsLoading}
+          response={data}
+          indicators={programIndicators?.nodes}
+        />
+      ),
+      value: t('label.indicators'),
+    });
+  }
+
   return !!data ? (
     <ResponseRequisitionLineErrorProvider>
       <TableProvider

client/packages/requisitions/src/ResponseRequisition/DetailView/IndicatorEdit/Footer.tsx

@@ -0,0 +1,83 @@
+import React, { FC } from 'react';
+import {
+  Box,
+  AppFooterPortal,
+  DialogButton,
+  RouteBuilder,
+  useNavigate,
+  useParams,
+} from '@openmsupply-client/common';
+import { AppRoute } from '@openmsupply-client/config';
+import { IndicatorLineRowFragment } from '../../api';
+
+interface FooterProps {
+  hasNext: boolean;
+  next: IndicatorLineRowFragment | null;
+  hasPrevious: boolean;
+  previous: IndicatorLineRowFragment | null;
+  requisitionNumber?: number;
+}
+
+export const Footer: FC<FooterProps> = ({
+  hasNext,
+  next,
+  hasPrevious,
+  previous,
+  requisitionNumber,
+}) => {
+  const navigate = useNavigate();
+  const { programIndicatorCode } = useParams();
+
+  return (
+    <AppFooterPortal
+      Content={
+        <Box
+          gap={2}
+          display="flex"
+          flexDirection="row"
+          alignItems="center"
+          height={64}
+        >
+          <Box
+            flex={1}
+            display="flex"
+            justifyContent="flex-end"
+            gap={2}
+            marginLeft="auto"
+          >
+            <DialogButton
+              variant="previous"
+              disabled={!hasPrevious}
+              onClick={() =>
+                navigate(
+                  RouteBuilder.create(AppRoute.Distribution)
+                    .addPart(AppRoute.CustomerRequisition)
+                    .addPart(String(requisitionNumber))
+                    .addPart(AppRoute.Indicators)
+                    .addPart(String(programIndicatorCode))
+                    .addPart(String(previous?.id))
+                    .build()
+                )
+              }
+            />
+            <DialogButton
+              variant="next"
+              disabled={!hasNext}
+              onClick={() =>
+                navigate(
+                  RouteBuilder.create(AppRoute.Distribution)
+                    .addPart(AppRoute.CustomerRequisition)
+                    .addPart(String(requisitionNumber))
+                    .addPart(AppRoute.Indicators)
+                    .addPart(String(programIndicatorCode))
+                    .addPart(String(next?.id))
+                    .build()
+                )
+              }
+            />
+          </Box>
+        </Box>
+      }
+    />
+  );
+};