V2 Clients Page

src/caretogether-pwa/src/AppRoutes.tsx

@@ -31,7 +31,7 @@ import { RootRoute } from './Access/RootRoute';
 import { Dashboard } from './Dashboard/Dashboard';
 import { InboxScreen } from './Inbox/InboxScreen';
 import { FamilyScreenRoute } from './Families/FamilyScreenRoute';
-import { V1Cases } from './V1Cases/V1Cases';
+import { ClientsScreenRoute } from './V1Cases/ClientsScreenRoute';
 import { V1Referrals } from './V1Referrals/V1Referrals';
 import { Volunteers } from './Volunteers/Volunteers';
 import { Communities } from './Communities/Communities';
@@ -188,7 +188,7 @@ function AuthorizedLocationContextWrapper({
             path="families/:familyId"
             element={<FamilyScreenRoute />}
           />
-          <Route path="clients/*" element={<V1Cases />} />
+          <Route path="clients/*" element={<ClientsScreenRoute />} />
           <Route path="cases/*" element={<CasesToClientsRedirect />} />
           <Route path="referrals/*" element={<V1Referrals />} />
           <Route path="volunteers/*" element={<Volunteers />} />

src/caretogether-pwa/src/Families/v2DataGridStyles.ts

@@ -1,7 +1,7 @@
 import type { Theme } from '@mui/material/styles';
 
 type V2DataGridStylesOptions = {
-  height?: number;
+  height?: number | string;
   highlightedRowClassName?: string;
   highlightedRowColor?: string;
 };

src/caretogether-pwa/src/FunctionAssignments/AssignmentRoleFilters.tsx

@@ -1,4 +1,6 @@
+import { useMemo } from 'react';
 import { AssignedIndividualVolunteer, Person } from '../GeneratedClient';
+import type { SelectProps } from '@mui/material';
 import { CustomFieldsFilterSelect } from '../Generic/CustomFieldsFilter/CustomFieldsFilterSelect';
 import {
   CustomFieldFilterOption,
@@ -13,6 +15,8 @@ type AssignmentRoleFiltersProps = {
   selectedValuesByRole: AssignmentFilterSelectionsByRole;
   onChange: (assignmentRole: string, selectedValues: (string | null)[]) => void;
   personLookup: (personId: string) => Person | undefined;
+  size?: SelectProps<string[]>['size'];
+  variant?: SelectProps<string[]>['variant'];
 };
 
 function assignmentFilterOptions(
@@ -63,7 +67,25 @@ export function AssignmentRoleFilters({
   selectedValuesByRole,
   onChange,
   personLookup,
+  size,
+  variant,
 }: AssignmentRoleFiltersProps) {
+  const optionsByAssignmentRole = useMemo(
+    () =>
+      Object.fromEntries(
+        assignmentRoles.map((assignmentRole) => [
+          assignmentRole,
+          assignmentFilterOptions(
+            assignmentRole,
+            assignments,
+            selectedValuesByRole[assignmentRole] ?? [],
+            personLookup
+          ),
+        ])
+      ),
+    [assignmentRoles, assignments, personLookup, selectedValuesByRole]
+  );
+
   return (
     <>
       {assignmentRoles.map((assignmentRole) => {
@@ -73,13 +95,10 @@ export function AssignmentRoleFilters({
           <CustomFieldsFilterSelect
             key={assignmentRole}
             label={assignmentRole}
-            options={assignmentFilterOptions(
-              assignmentRole,
-              assignments,
-              selectedValues,
-              personLookup
-            )}
+            options={optionsByAssignmentRole[assignmentRole]}
             selectedValues={selectedValues}
+            size={size}
+            variant={variant}
             onChange={(selectedValues) =>
               onChange(assignmentRole, assignmentFilterValues(selectedValues))
             }

src/caretogether-pwa/src/Generic/CustomFieldsFilter/CustomFieldsFilter.tsx

@@ -9,7 +9,7 @@ import {
 
 type Props = {
   customFields: CustomField[];
-  optionsByField: Record<string, CustomFieldFilterOption[]>;
+  getOptionsForField: (field: CustomField) => CustomFieldFilterOption[];
   selectedValuesByField: CustomFieldFilterSelectionsByField;
   onFieldChange: (
     fieldName: string,
@@ -21,7 +21,7 @@ type Props = {
 
 export function CustomFieldsFilter({
   customFields,
-  optionsByField,
+  getOptionsForField,
   selectedValuesByField,
   onFieldChange,
   direction = 'row',
@@ -40,14 +40,13 @@ export function CustomFieldsFilter({
       {customFields.map((field) => {
         if (!field.name) return null;
 
-        const options = optionsByField[field.name] ?? [];
         const selectedValues = selectedValuesByField[field.name] ?? [];
 
         return (
           <CustomFieldsFilterSelect
             key={field.name}
             label={field.name}
-            options={options}
+            getOptions={() => getOptionsForField(field)}
             selectedValues={selectedValues}
             onChange={(selected) => onFieldChange(field.name, selected)}
             fullWidth={fullWidthSelects}

src/caretogether-pwa/src/Generic/CustomFieldsFilter/CustomFieldsFilterSelect.tsx

@@ -7,15 +7,20 @@ import {
   Select,
   SelectChangeEvent,
 } from '@mui/material';
+import type { SelectProps } from '@mui/material';
 import { FilterList as FilterListIcon } from '@mui/icons-material';
+import { useMemo, useState } from 'react';
 import { CustomFieldFilterOption, CustomFieldFilterValue } from './types';
 
 type Props = {
   label: string;
-  options: CustomFieldFilterOption[];
+  options?: CustomFieldFilterOption[];
+  getOptions?: () => CustomFieldFilterOption[];
   selectedValues: CustomFieldFilterValue[];
   onChange: (selected: CustomFieldFilterValue[]) => void;
   fullWidth?: boolean;
+  size?: SelectProps<string[]>['size'];
+  variant?: SelectProps<string[]>['variant'];
 };
 
 function encodeValue(value: CustomFieldFilterValue) {
@@ -44,17 +49,31 @@ function decodeValue(value: string): CustomFieldFilterValue {
 
 export function CustomFieldsFilterSelect({
   label,
-  options,
+  getOptions,
+  options: providedOptions,
   selectedValues,
   onChange,
   fullWidth = false,
+  size,
+  variant = 'standard',
 }: Props) {
+  const [open, setOpen] = useState(false);
   const selectedCount = selectedValues.length;
-  const selectedOptionValues = selectedValues.map(encodeValue);
-  const displayText =
-    selectedCount === options.length
-      ? label
-      : `${label} (${selectedCount}/${options.length})`;
+  const shouldLoadOptions = open || selectedCount > 0 || !getOptions;
+  const options = useMemo(
+    () => (shouldLoadOptions ? (getOptions?.() ?? providedOptions ?? []) : []),
+    [getOptions, providedOptions, shouldLoadOptions]
+  );
+  const selectedOptionValues = useMemo(
+    () => selectedValues.map(encodeValue),
+    [selectedValues]
+  );
+  const displayText = (() => {
+    if (selectedCount === 0) return label;
+    if (options.length === 0) return `${label} (${selectedCount})`;
+    if (selectedCount === options.length) return label;
+    return `${label} (${selectedCount}/${options.length})`;
+  })();
 
   return (
     <FormControl
@@ -82,16 +101,21 @@ export function CustomFieldsFilterSelect({
         }}
         multiple
         value={selectedOptionValues}
-        variant="standard"
+        variant={variant}
+        size={size}
         label={`${label} Filters`}
+        open={open}
+        onOpen={() => setOpen(true)}
+        onClose={() => setOpen(false)}
         onChange={(event: SelectChangeEvent<string[]>) => {
           const selected = event.target.value;
           if (typeof selected !== 'string') {
             onChange(selected.map(decodeValue));
           }
         }}
-        input={<InputBase />}
-        IconComponent={FilterListIcon}
+        {...(variant === 'standard'
+          ? { input: <InputBase />, IconComponent: FilterListIcon }
+          : {})}
         SelectDisplayProps={{ title: displayText }}
         renderValue={() => displayText}
       >

src/caretogether-pwa/src/Generic/CustomFieldsFilter/useCustomFieldFilters.ts

@@ -14,6 +14,84 @@ type Args<TItem> = {
   getValue: (item: TItem, fieldName: string) => unknown;
 };
 
+function optionsForField<TItem>({
+  field,
+  getValue,
+  isBlank,
+  items,
+  selectedValuesByField,
+}: Args<TItem> & {
+  field: CustomField;
+  selectedValuesByField: CustomFieldFilterSelectionsByField;
+}) {
+  const selectedSet = new Set<CustomFieldFilterValue>(
+    selectedValuesByField[field.name] ?? []
+  );
+
+  if (field.type === CustomFieldType.Boolean) {
+    const options: CustomFieldFilterOption[] = [
+      { key: '(blank)', value: null, selected: selectedSet.has(null) },
+      { key: 'Yes', value: true, selected: selectedSet.has(true) },
+      { key: 'No', value: false, selected: selectedSet.has(false) },
+    ];
+
+    return options;
+  }
+
+  const observedValues: CustomFieldFilterValue[] =
+    items.flatMap<CustomFieldFilterValue>((item) => {
+      if (isBlank(item, field.name)) return [];
+
+      const raw = getValue(item, field.name);
+
+      if (raw === undefined || raw === null || raw === '') return [];
+
+      if (field.type === CustomFieldType.StringArray) {
+        if (Array.isArray(raw)) return raw as string[];
+        return [];
+      }
+
+      return [raw.toString()];
+    });
+
+  const values = Array.from(
+    new Set<CustomFieldFilterValue>([
+      null,
+      ...observedValues,
+      ...(field.validValues ?? []),
+    ])
+  );
+
+  const mappedOptions: CustomFieldFilterOption[] = values.map((v) => {
+    const key = v === null ? '(blank)' : v.toString();
+    return {
+      key,
+      value: v,
+      selected: selectedSet.has(v),
+    };
+  });
+
+  const optionsByKey = new Map<string, CustomFieldFilterOption>(
+    mappedOptions.map((o) => [o.key, o])
+  );
+
+  return field.type === CustomFieldType.StringArray &&
+    field.validValues &&
+    field.validValues.length > 0
+    ? [
+        ...mappedOptions.filter((o) => o.value === null),
+        ...sortByPolicyOrder(
+          mappedOptions.filter((o) => o.value !== null).map((o) => o.key),
+          field.validValues
+        ).map((key) => optionsByKey.get(key)!),
+      ]
+    : mappedOptions.sort((a, b) => {
+        if (a.value === null) return -1;
+        if (b.value === null) return 1;
+        return a.key.localeCompare(b.key);
+      });
+}
+
 export function useCustomFieldFilters<TItem>({
   customFields,
   items,
@@ -33,84 +111,23 @@ export function useCustomFieldFilters<TItem>({
     []
   );
 
-  const optionsByField = React.useMemo(() => {
-    return Object.fromEntries(
-      customFields.map((field) => {
-        const selectedSet = new Set<CustomFieldFilterValue>(
-          selectedValuesByField[field.name] ?? []
-        );
-
-        if (field.type === CustomFieldType.Boolean) {
-          const options: CustomFieldFilterOption[] = [
-            { key: '(blank)', value: null, selected: selectedSet.has(null) },
-            { key: 'Yes', value: true, selected: selectedSet.has(true) },
-            { key: 'No', value: false, selected: selectedSet.has(false) },
-          ];
-
-          return [field.name, options] as const;
-        }
-
-        const observedValues: CustomFieldFilterValue[] =
-          items.flatMap<CustomFieldFilterValue>((item) => {
-            if (isBlank(item, field.name)) return [];
-
-            const raw = getValue(item, field.name);
-
-            if (raw === undefined || raw === null || raw === '') return [];
-
-            if (field.type === CustomFieldType.StringArray) {
-              if (Array.isArray(raw)) return raw as string[];
-              return [];
-            }
-
-            return [raw.toString()];
-          });
-
-        const values = Array.from(
-          new Set<CustomFieldFilterValue>([null, ...observedValues, ...(field.validValues ?? [])])
-        );
-
-        const mappedOptions: CustomFieldFilterOption[] = values.map((v) => {
-          const key = v === null ? '(blank)' : v.toString();
-          return {
-            key,
-            value: v,
-            selected: selectedSet.has(v),
-          };
-        });
-
-        const optionsByKey = new Map<string, CustomFieldFilterOption>(
-          mappedOptions.map((o) => [o.key, o])
-        );
-
-        const options: CustomFieldFilterOption[] =
-          field.type === CustomFieldType.StringArray &&
-          field.validValues &&
-          field.validValues.length > 0
-            ? [
-                ...mappedOptions.filter((o) => o.value === null),
-                ...sortByPolicyOrder(
-                  mappedOptions
-                    .filter((o) => o.value !== null)
-                    .map((o) => o.key),
-                  field.validValues
-                ).map((key) => optionsByKey.get(key)!),
-              ]
-            : mappedOptions.sort((a, b) => {
-                if (a.value === null) return -1;
-                if (b.value === null) return 1;
-                return a.key.localeCompare(b.key);
-              });
-
-        return [field.name, options] as const;
-      })
-    ) as Record<string, CustomFieldFilterOption[]>;
-  }, [customFields, getValue, isBlank, items, selectedValuesByField]);
+  const getOptionsForField = React.useCallback(
+    (field: CustomField) =>
+      optionsForField({
+        customFields,
+        field,
+        getValue,
+        isBlank,
+        items,
+        selectedValuesByField,
+      }),
+    [customFields, getValue, isBlank, items, selectedValuesByField]
+  );
 
   return {
     selectedValuesByField,
     setSelectedValuesByField,
     setSelectedValuesForField,
-    optionsByField,
+    getOptionsForField,
   };
 }