sort formatted filter values

src/app/(main)/reports/[id]/FieldFilterForm.js

@@ -1,6 +1,6 @@
-import { useState } from 'react';
+import { useState, useMemo } from 'react';
 import { Form, FormRow, Item, Flexbox, Dropdown, Button } from 'react-basics';
-import { useMessages, useFilters, useFormat } from 'components/hooks';
+import { useMessages, useFilters, useFormat, useLocale } from 'components/hooks';
 import styles from './FieldFilterForm.module.css';
 
 export default function FieldFilterForm({
@@ -16,14 +16,26 @@ export default function FieldFilterForm({
   const [value, setValue] = useState();
   const { getFilters } = useFilters();
   const { formatValue } = useFormat();
+  const { locale } = useLocale();
   const filters = getFilters(type);
 
+  const formattedValues = useMemo(() => {
+    const formatted = {};
+    const { compare } = new Intl.Collator(locale, { numeric: true });
+    const format = val => {
+      formatted[val] = formatValue(val, name);
+      return formatted[val];
+    };
+    values.sort((a, b) => compare(formatted[a] ?? format(a), formatted[b] ?? format(b)));
+    return formatted;
+  }, [values]);
+
   const renderFilterValue = value => {
     return filters.find(f => f.value === value)?.label;
   };
 
   const renderValue = value => {
-    return formatValue(value, name);
+    return formattedValues[value];
   };
 
   const handleAdd = () => {
@@ -59,7 +71,7 @@ export default function FieldFilterForm({
             }}
           >
             {value => {
-              return <Item key={value}>{formatValue(value, name)}</Item>;
+              return <Item key={value}>{formattedValues[value]}</Item>;
             }}
           </Dropdown>
         </Flexbox>