Add expiration date filter, sorting and expiry badges to inventory list

Move the inventory list filters onto MultiFilter, adding a product
expiration date range filter with Expired and Expiring soon presets
derived from the configured expiry restriction. Date presets may now be
open ended so a preset can bound only one end of the range.

Also supports sorting by expiration date and flags expired or expiring
stock in the table.

Co-authored-by: Cursor <cursoragent@cursor.com>
Entire-Checkpoint: b16eb5dd7780

Author: rithviknishad

src/Utils/inventory.ts

@@ -1,4 +1,10 @@
-import { addMonths, endOfMonth, formatDate, isAfter } from "date-fns";
+import {
+  addMonths,
+  endOfMonth,
+  formatDate,
+  isAfter,
+  startOfMonth,
+} from "date-fns";
 
 import { Badge } from "@/components/ui/badge";
 import { InventoryRead } from "@/types/inventory/product/inventory";
@@ -33,6 +39,30 @@ export function getExpiryStatus(
   return "valid";
 }
 
+/**
+ * Gets the expiration date range of products considered "expired" by
+ * {@link getExpiryStatus}.
+ */
+export function getExpiredDateRange() {
+  return { to: endOfMonth(new Date()) };
+}
+
+/**
+ * Gets the expiration date range of products considered "expiring_soon" by
+ * {@link getExpiryStatus}, or `null` if no such range exists, i.e. when the
+ * expiry restriction is disabled or covers only the current month.
+ */
+export function getExpiringSoonDateRange() {
+  const expiryMonthOffset = careConfig.inventory.expiryMonthOffset;
+  if (!expiryMonthOffset) return null;
+
+  const today = new Date();
+  return {
+    from: startOfMonth(addMonths(today, 1)),
+    to: endOfMonth(addMonths(today, expiryMonthOffset)),
+  };
+}
+
 /**
  * Checks if a product is restricted based on its expiration date
  * (i.e., expired or expiring soon)

src/components/ui/multi-filter/dateFilter.tsx

@@ -25,6 +25,7 @@ import {
   FilterConfig,
   FilterDateRange,
   FilterValues,
+  isSameDateRange,
   longDateRangeOptions,
 } from "./utils/Utils";
 
@@ -169,7 +170,7 @@ function DateRangeOptions({
   isCustomDateRangeSelected: boolean;
   filter: FilterConfig;
   handleDateRangeSelect: (option: DateRangeOption) => void;
-  isSameRange: (option: DateRangeOption) => boolean | undefined;
+  isSameRange: (option: DateRangeOption) => boolean;
 }) {
   const { t } = useTranslation();
   const [focusItemRef, setFocusItemRef] = useState<HTMLDivElement | null>(null);
@@ -259,12 +260,8 @@ export default function RenderDateFilter({
     setDateTo(date?.to);
   };
 
-  const isSameRange = (option: DateRangeOption) => {
-    const { from, to } = option.getDateRange();
-    return (
-      dateFrom && isSameDay(dateFrom, from) && dateTo && isSameDay(dateTo, to)
-    );
-  };
+  const isSameRange = (option: DateRangeOption) =>
+    isSameDateRange({ from: dateFrom, to: dateTo }, option.getDateRange());
 
   const isCustomDateRangeSelected =
     selected.from || selected.to
@@ -335,15 +332,8 @@ export const SelectedDateBadge = ({
     selected.from && selected.to && isSameDay(selected.from, selected.to);
   const presentDate = isSameDate ? selected.from : selected.from || selected.to;
 
-  const isSameRange = (option: DateRangeOption) => {
-    const { from, to } = option.getDateRange();
-    return (
-      selected.from &&
-      isSameDay(selected.from, from) &&
-      selected.to &&
-      isSameDay(selected.to, to)
-    );
-  };
+  const isSameRange = (option: DateRangeOption) =>
+    isSameDateRange(selected, option.getDateRange());
 
   const isRangeSelected = (filter.meta as DateFilterMeta)?.presetOptions?.find(
     (option) => isSameRange(option),

src/components/ui/multi-filter/filterConfigs.tsx

@@ -37,6 +37,7 @@ import {
   Operation,
   createFilterConfig,
   getVariantColorClasses,
+  isSameDateRange,
 } from "./utils/Utils";
 
 import { SelectedFacilityUserBadge } from "@/components/ui/multi-filter/facilityUserFilter";
@@ -71,10 +72,19 @@ import {
   MEDICATION_DISPENSE_STATUS_COLORS,
   MedicationDispenseStatus,
 } from "@/types/emr/medicationDispense/medicationDispense";
+import {
+  INVENTORY_STATUS_COLORS,
+  InventoryStatus,
+  InventoryStatusOptions,
+} from "@/types/inventory/product/inventory";
 import {
   REQUEST_ORDER_PRIORITY_COLORS,
   RequestOrderPriority,
 } from "@/types/inventory/requestOrder/requestOrder";
+import {
+  getExpiredDateRange,
+  getExpiringSoonDateRange,
+} from "@/Utils/inventory";
 import careConfig from "@careConfig";
 import { Zap } from "lucide-react";
 export const encounterStatusFilter = (
@@ -189,6 +199,7 @@ export const dateFilter = (
   label?: string,
   dateRangeOptions?: DateRangeOption[],
   disableClear?: boolean,
+  getOperations: (selected: FilterDateRange) => Operation[] = getDateOperations,
 ) =>
   createFilterConfig(key, label || t("started_date"), "date", [], {
     renderSelected: (
@@ -205,7 +216,7 @@ export const dateFilter = (
       );
     },
     getOperations: (selected: FilterValues) =>
-      getDateOperations(selected as FilterDateRange),
+      getOperations(selected as FilterDateRange),
     mode: "single",
     icon: <CalendarFold className="w-4 h-4" />,
     dateRangeOptions,
@@ -684,6 +695,70 @@ export const inventoryPriorityFilter = (
     },
   );
 
+export const inventoryStatusFilter = (
+  key: string = "status",
+  mode: FilterMode = "single",
+  customOperations?: Operation[],
+) =>
+  createFilterConfig(
+    key,
+    t("status"),
+    "command",
+    InventoryStatusOptions.map((value) => ({
+      value: value,
+      label: t(value),
+      color: getVariantColorClasses(INVENTORY_STATUS_COLORS[value]),
+    })),
+    {
+      renderSelected: (selected: FilterValues) => {
+        const selectedStatus = selected as string[];
+        if (typeof selectedStatus[0] === "string") {
+          const option = selectedStatus[0];
+          const variant = INVENTORY_STATUS_COLORS[option as InventoryStatus];
+          return (
+            <GenericSelectedBadge
+              selectedValue={option}
+              selectedLength={selectedStatus.length}
+              variant={variant}
+            />
+          );
+        }
+        return <></>;
+      },
+      getOperations: () => customOperations || [{ label: "is" }],
+      mode,
+      icon: <CircleDashed className="size-4" />,
+      showColorIndicators: true,
+    },
+  );
+
+export const productExpirationDateFilter = (
+  key: string = "product_expiration_date",
+  label?: string,
+) => {
+  const expiringSoonRange = getExpiringSoonDateRange();
+
+  const presetOptions: DateRangeOption[] = [
+    { label: "expired", getDateRange: getExpiredDateRange },
+    ...(expiringSoonRange
+      ? [{ label: "expiring_soon", getDateRange: () => expiringSoonRange }]
+      : []),
+  ];
+
+  return dateFilter(
+    key,
+    label || t("expiration_date"),
+    presetOptions,
+    undefined,
+    (selected) =>
+      presetOptions.some((option) =>
+        isSameDateRange(selected, option.getDateRange()),
+      )
+        ? [{ label: "is" }]
+        : getDateOperations(selected),
+  );
+};
+
 export const dispenseStatusFilter = (
   key: string = "dispense_status",
   mode: FilterMode = "single",

src/components/ui/multi-filter/utils/Utils.tsx

@@ -1,6 +1,13 @@
 import React from "react";
 
-import { addDays, subDays, subMonths, subWeeks, subYears } from "date-fns";
+import {
+  addDays,
+  isSameDay,
+  subDays,
+  subMonths,
+  subWeeks,
+  subYears,
+} from "date-fns";
 
 import { ActivityDefinitionFilterValue } from "@/components/ui/multi-filter/activityDefinitionFilter";
 import { GenericSelectedBadge } from "@/components/ui/multi-filter/genericFilter";
@@ -153,10 +160,20 @@ export interface FilterDateRange {
 
 export interface DateRangeOption {
   label: string;
-  getDateRange: () => { from: Date; to: Date };
+  /** Ranges may be open ended, i.e. bound on only one end. */
+  getDateRange: () => FilterDateRange;
   count?: number;
 }
 
+const isSameBoundary = (a?: Date, b?: Date) =>
+  a && b ? isSameDay(a, b) : !a && !b;
+
+/**
+ * Compares two (possibly open ended) date ranges with a day's precision.
+ */
+export const isSameDateRange = (a: FilterDateRange, b: FilterDateRange) =>
+  isSameBoundary(a.from, b.from) && isSameBoundary(a.to, b.to);
+
 export type Operation = {
   value?: string;
   label: string;