[ENG-111] Clicking on an inventory item should display all supply deliveries

public/locale/en.json

@@ -6583,6 +6583,7 @@
   "view_patients": "View Patients",
   "view_payments": "View Payments",
   "view_prescriptions": "View Prescriptions",
+  "view_product_details": "View product details",
   "view_profile": "View Profile",
   "view_real_time_bed_status": "View real-time bed status across all wards",
   "view_report": "View Report",

src/components/Common/ResourceDefinitionCategoryPicker.tsx

@@ -808,9 +808,11 @@ export function ResourceDefinitionCategoryPicker<T>({
                 variant="outline"
                 role="combobox"
                 aria-expanded={open}
+                type="button"
                 className={cn(
                   "justify-between px-3 py-2 w-full shadow-xs border border-gray-300 font-medium h-auto min-h-9",
                   disabled && "opacity-50 cursor-not-allowed",
+                  value && !shouldHideClearButton && "rounded-r-none",
                   className,
                 )}
                 disabled={disabled}
@@ -829,8 +831,9 @@ export function ResourceDefinitionCategoryPicker<T>({
             {value && !shouldHideClearButton && (
               <Button
                 variant="outline"
+                type="button"
                 onClick={handleClearSelection}
-                className="rounded-l-none -ml-2 shadow-none text-gray-400 border-gray-300"
+                className="rounded-l-none shadow-none text-gray-400 border-gray-300 border-l-0 h-9.5"
               >
                 <X />
                 <span className="sr-only">{t("clear_selection")}</span>
@@ -929,6 +932,7 @@ export function ResourceDefinitionCategoryPicker<T>({
                   "hover:bg-gray-50 hover:text-gray-900",
                   "transition-all duration-200",
                   disabled && "opacity-50 cursor-not-allowed",
+                  value && !shouldHideClearButton && "rounded-r-none",
                   className,
                 )}
                 disabled={disabled}
@@ -959,8 +963,9 @@ export function ResourceDefinitionCategoryPicker<T>({
             {value && !shouldHideClearButton && (
               <Button
                 variant="outline"
+                type="button"
                 onClick={handleClearSelection}
-                className="rounded-l-none -ml-2 shadow-none text-gray-400 border-gray-300"
+                className="rounded-l-none shadow-none text-gray-400 border-gray-300 border-l-0 h-9.5"
               >
                 <X />
                 <span className="sr-only">{t("clear_selection")}</span>

src/pages/Facility/services/inventory/InventoryList.tsx

@@ -1,5 +1,5 @@
 import { useQuery } from "@tanstack/react-query";
-import { ArrowDownUp } from "lucide-react";
+import { ArrowDownUp, Truck } from "lucide-react";
 import { Link } from "raviger";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -12,6 +12,7 @@ import { Badge } from "@/components/ui/badge";
 import { EmptyState } from "@/components/ui/empty-state";
 
 import Page from "@/components/Common/Page";
+import PaginationComponent from "@/components/Common/Pagination";
 import { TableSkeleton } from "@/components/Common/SkeletonLoading";
 import {
   Table,
@@ -26,14 +27,23 @@ import useFilters from "@/hooks/useFilters";
 
 import { isLessThan, round } from "@/Utils/decimal";
 import query from "@/Utils/request/query";
+import {
+  Drawer,
+  DrawerContent,
+  DrawerHeader,
+  DrawerTitle,
+} from "@/components/ui/drawer";
 import { FilterSelect } from "@/components/ui/filter-select";
 import { MonetaryDisplay } from "@/components/ui/monetary-display";
 import { MonetaryComponentType } from "@/types/base/monetaryComponent/monetaryComponent";
 import { ACCOUNT_STATUS_COLORS } from "@/types/billing/account/Account";
 import { InventoryStatusOptions } from "@/types/inventory/product/inventory";
 import inventoryApi from "@/types/inventory/product/inventoryApi";
 import { ProductKnowledgeBase } from "@/types/inventory/productKnowledge/productKnowledge";
+import { ACTIVE_SUPPLY_DELIVERY_STATUSES } from "@/types/inventory/supplyDelivery/supplyDelivery";
+import supplyDeliveryApi from "@/types/inventory/supplyDelivery/supplyDeliveryApi";
 import { ProductKnowledgeSelect } from "./ProductKnowledgeSelect";
+import { SupplyDeliveryTable } from "./SupplyDeliveryTable";
 
 const SORT_OPTIONS = {
   low_to_high: "net_content",
@@ -42,6 +52,77 @@ const SORT_OPTIONS = {
 
 type SortOptionKey = keyof typeof SORT_OPTIONS;
 
+const DELIVERIES_PER_PAGE = 10;
+
+// Only in-progress and completed deliveries are shown in the deliveries drawer.
+const ACTIVE_DELIVERY_STATUS_FILTER = ACTIVE_SUPPLY_DELIVERY_STATUSES.join(",");
+
+interface ProductDeliveriesDrawerContentProps {
+  facilityId: string;
+  locationId: string;
+  selectedProductKnowledge?: ProductKnowledgeBase;
+}
+
+function ProductDeliveriesDrawerContent({
+  facilityId,
+  locationId,
+  selectedProductKnowledge,
+}: ProductDeliveriesDrawerContentProps) {
+  const { t } = useTranslation();
+  const [page, setPage] = useState(1);
+
+  const { data: deliveries, isLoading } = useQuery({
+    queryKey: [
+      "supplyDeliveries",
+      facilityId,
+      locationId,
+      selectedProductKnowledge?.id,
+      page,
+    ],
+    queryFn: query(supplyDeliveryApi.listSupplyDelivery, {
+      queryParams: {
+        facility: facilityId,
+        destination: locationId,
+        supplied_inventory_item_product_knowledge: selectedProductKnowledge?.id,
+        status: ACTIVE_DELIVERY_STATUS_FILTER,
+        limit: DELIVERIES_PER_PAGE,
+        offset: (page - 1) * DELIVERIES_PER_PAGE,
+      },
+    }),
+    enabled: !!selectedProductKnowledge?.id,
+  });
+
+  return (
+    <div className="flex flex-col overflow-y-auto pt-4 max-h-[68vh]">
+      {isLoading ? (
+        <TableSkeleton count={2} />
+      ) : deliveries?.results && deliveries.results.length > 0 ? (
+        <>
+          <SupplyDeliveryTable
+            deliveries={deliveries.results}
+            facilityId={facilityId}
+            serialNumberOffset={DELIVERIES_PER_PAGE * (page - 1)}
+            linkToProduct
+            showLocations
+          />
+          <PaginationComponent
+            data={{ totalCount: deliveries.count }}
+            onChange={(newPage) => setPage(newPage)}
+            defaultPerPage={DELIVERIES_PER_PAGE}
+            cPage={page}
+          />
+        </>
+      ) : (
+        <EmptyState
+          icon={<Truck className="size-5 text-primary-600" />}
+          title={t("no_deliveries_found")}
+          description={t("no_deliveries_found_description")}
+        />
+      )}
+    </div>
+  );
+}
+
 interface InventoryListProps {
   facilityId: string;
   locationId: string;
@@ -58,6 +139,11 @@ export function InventoryList({ facilityId, locationId }: InventoryListProps) {
     ProductKnowledgeBase | undefined
   >(undefined);
 
+  // State for the "all deliveries" drawer
+  const [showAllDeliveries, setShowAllDeliveries] = useState(false);
+  const [selectedProductKnowledgeDrawer, setSelectedProductKnowledgeDrawer] =
+    useState<ProductKnowledgeBase | undefined>(undefined);
+
   // Clear selected product knowledge when query parameter is cleared
   useEffect(() => {
     if (!qParams.product_knowledge_id) {
@@ -163,17 +249,31 @@ export function InventoryList({ facilityId, locationId }: InventoryListProps) {
             <TableBody>
               {data?.results?.map((inventory) => (
                 <TableRow key={inventory.id}>
-                  <TableCell className="font-semibold">
+                  <TableCell className="font-semibold space-x-2">
+                    <button
+                      type="button"
+                      className="hover:text-gray-700 underline"
+                      onClick={() => {
+                        setSelectedProductKnowledgeDrawer(
+                          inventory.product.product_knowledge,
+                        );
+                        setShowAllDeliveries(true);
+                      }}
+                    >
+                      {inventory.product.product_knowledge.name}
+                    </button>
                     <Link
                       href={`/facility/${facilityId}/settings/product/${inventory.product.id}`}
                       basePath="/"
-                      className="flex items-center gap-2"
+                      onClick={(e) => e.stopPropagation()}
                     >
-                      {inventory.product.product_knowledge.name}
                       <CareIcon
                         icon="l-external-link-alt"
-                        className="size-4 text-gray-500"
+                        className="size-4 text-gray-500 hover:text-gray-700"
                       />
+                      <span className="sr-only">
+                        {t("view_product_details")}
+                      </span>
                     </Link>
                   </TableCell>
                   <TableCell
@@ -226,6 +326,25 @@ export function InventoryList({ facilityId, locationId }: InventoryListProps) {
       <div className="mt-8 flex justify-center">
         <Pagination totalCount={data?.count || 0} />
       </div>
+
+      <Drawer
+        open={showAllDeliveries}
+        onOpenChange={(open) => {
+          setShowAllDeliveries(open);
+          if (!open) setSelectedProductKnowledgeDrawer(undefined);
+        }}
+      >
+        <DrawerContent className="max-w-7xl mx-auto px-4 sm:px-16 pb-10">
+          <DrawerHeader>
+            <DrawerTitle className="mb-2">{t("all_deliveries")}</DrawerTitle>
+          </DrawerHeader>
+          <ProductDeliveriesDrawerContent
+            facilityId={facilityId}
+            locationId={locationId}
+            selectedProductKnowledge={selectedProductKnowledgeDrawer}
+          />
+        </DrawerContent>
+      </Drawer>
     </Page>
   );
 }

src/pages/Facility/services/inventory/SupplyDeliveryTable.tsx

@@ -63,6 +63,8 @@ interface SupplyDeliveryTableProps {
   isRequester?: boolean;
   facilityId?: string;
   linkToProduct?: boolean;
+  showLocations?: boolean;
+  serialNumberOffset?: number;
 }
 
 export function SupplyDeliveryTable({
@@ -78,6 +80,8 @@ export function SupplyDeliveryTable({
   isRequester = false,
   facilityId,
   linkToProduct = false,
+  showLocations = false,
+  serialNumberOffset = 0,
 }: SupplyDeliveryTableProps) {
   const { t } = useTranslation();
   const queryClient = useQueryClient();
@@ -157,7 +161,7 @@ export function SupplyDeliveryTable({
   // Build a map of delivery id -> serial number for non-cancelled deliveries
   const serialNumberMap = useMemo(() => {
     const map = new Map<string, number>();
-    let serial = 1;
+    let serial = serialNumberOffset + 1;
     for (const delivery of deliveries) {
       if (
         ACTIVE_SUPPLY_DELIVERY_STATUSES.includes(
@@ -168,7 +172,7 @@ export function SupplyDeliveryTable({
       }
     }
     return map;
-  }, [deliveries]);
+  }, [deliveries, serialNumberOffset]);
 
   return (
     <Table>
@@ -190,6 +194,12 @@ export function SupplyDeliveryTable({
           <TableHead rowSpan={2}>{t("#")}</TableHead>
           <TableHead rowSpan={2}>{t("item")}</TableHead>
           <TableHead rowSpan={2}>{t("batch")}</TableHead>
+          {showLocations && (
+            <>
+              <TableHead rowSpan={2}>{t("origin")}</TableHead>
+              <TableHead rowSpan={2}>{t("destination")}</TableHead>
+            </>
+          )}
           <TableHead rowSpan={2}>{t("requested_qty")}</TableHead>
           {!internal && <TableHead rowSpan={2}>{t("pack_size")}</TableHead>}
           {!internal && <TableHead rowSpan={2}>{t("pack_qty")}</TableHead>}
@@ -255,10 +265,13 @@ export function SupplyDeliveryTable({
               onClick={() => onDeliveryClick?.(delivery)}
             >
               {(() => {
-                const productId = internal
+                const internalDelivery =
+                  internal || !!delivery.supplied_inventory_item?.product?.id;
+
+                const productId = internalDelivery
                   ? delivery.supplied_inventory_item?.product?.id
                   : delivery.supplied_item?.id;
-                const productName = internal
+                const productName = internalDelivery
                   ? delivery.supplied_inventory_item?.product?.product_knowledge
                       ?.name
                   : delivery.supplied_item?.product_knowledge?.name;
@@ -286,6 +299,19 @@ export function SupplyDeliveryTable({
               {delivery.supplied_inventory_item?.product?.batch?.lot_number ||
                 "-"}
             </TableCell>
+            {showLocations && (
+              <>
+                <TableCell>
+                  {delivery?.order?.origin?.name ||
+                    delivery?.order?.supplier?.name ||
+                    delivery?.order?.patient?.name ||
+                    "-"}
+                </TableCell>
+                <TableCell>
+                  {delivery?.order?.destination?.name || "-"}
+                </TableCell>
+              </>
+            )}
             <TableCell>
               {delivery.supply_request
                 ? round(delivery.supply_request.quantity)

src/types/inventory/requestOrder/requestOrder.ts

@@ -1,4 +1,5 @@
 import { Badge } from "@/components/ui/badge";
+import { PatientListRead } from "@/types/emr/patient/patient";
 import { TagConfig } from "@/types/emr/tagConfig/tagConfig";
 import { LocationDetail } from "@/types/location/location";
 import { Organization } from "@/types/organization/organization";
@@ -90,4 +91,5 @@ export interface RequestOrderRetrieve extends RequestOrder {
   destination: LocationDetail;
   supplier?: Organization;
   tags: TagConfig[];
+  patient?: PatientListRead;
 }

src/types/inventory/supplyDelivery/supplyDelivery.ts

@@ -1,5 +1,6 @@
 import { InventoryRead } from "@/types/inventory/product/inventory";
 import { ProductRead } from "@/types/inventory/product/product";
+import { RequestOrderRetrieve } from "@/types/inventory/requestOrder/requestOrder";
 import { SupplyRequestRead } from "@/types/inventory/supplyRequest/supplyRequest";
 
 export enum SupplyDeliveryStatus {
@@ -79,4 +80,5 @@ export interface SupplyDeliveryRead extends SupplyDeliveryBase {
   modified_date?: string;
   supply_request?: SupplyRequestRead;
   extensions: Record<string, unknown>;
+  order?: RequestOrderRetrieve;
 }