feat: add date range filter to fills

libs/fills/src/lib/Fills.graphql

@@ -42,8 +42,12 @@ fragment FillEdge on TradeEdge {
   cursor
 }
 
-query Fills($filter: TradesFilter, $pagination: Pagination) {
-  trades(filter: $filter, pagination: $pagination) {
+query Fills(
+  $filter: TradesFilter
+  $pagination: Pagination
+  $dateRange: DateRange
+) {
+  trades(filter: $filter, dateRange: $dateRange, pagination: $pagination) {
     edges {
       ...FillEdge
     }

libs/fills/src/lib/__generated__/Fills.ts

@@ -12,6 +12,7 @@ export type FillEdgeFragment = { __typename?: 'TradeEdge', cursor: string, node:
 export type FillsQueryVariables = Types.Exact<{
   filter?: Types.InputMaybe<Types.TradesFilter>;
   pagination?: Types.InputMaybe<Types.Pagination>;
+  dateRange?: Types.InputMaybe<Types.DateRange>;
 }>;
 
 
@@ -95,8 +96,8 @@ export const FillUpdateFieldsFragmentDoc = gql`
 }
     ${TradeFeeFieldsFragmentDoc}`;
 export const FillsDocument = gql`
-    query Fills($filter: TradesFilter, $pagination: Pagination) {
-  trades(filter: $filter, pagination: $pagination) {
+    query Fills($filter: TradesFilter, $pagination: Pagination, $dateRange: DateRange) {
+  trades(filter: $filter, dateRange: $dateRange, pagination: $pagination) {
     edges {
       ...FillEdge
     }
@@ -124,6 +125,7 @@ export const FillsDocument = gql`
  *   variables: {
  *      filter: // value for 'filter'
  *      pagination: // value for 'pagination'
+ *      dateRange: // value for 'dateRange'
  *   },
  * });
  */

libs/fills/src/lib/fills-manager.tsx

@@ -1,5 +1,5 @@
 import type { AgGridReact } from 'ag-grid-react';
-import { useRef } from 'react';
+import { useRef, useState } from 'react';
 import { t } from '@vegaprotocol/i18n';
 import { FillsTable } from './fills-table';
 import type { useDataGridEvents } from '@vegaprotocol/datagrid';
@@ -22,6 +22,7 @@ export const FillsManager = ({
   const filter: Schema.TradesFilter | Schema.TradesSubscriptionFilter = {
     partyIds: [partyId],
   };
+  const [dateRange, setDateRange] = useState<Schema.DateRange | null>(null);
   const { data, error } = useDataProvider({
     dataProvider: fillsWithMarketProvider,
     update: ({ data }) => {
@@ -31,17 +32,35 @@ export const FillsManager = ({
       }
       return false;
     },
-    variables: { filter },
+    variables: { filter, dateRange },
   });
-
+  const { onFilterChanged, ...props } = gridProps;
+  const overlayNoRowsTemplate = dateRange
+    ? t('No fills matching selected date range')
+    : t('No fills');
   return (
     <FillsTable
       ref={gridRef}
       rowData={data}
+      onFilterChanged={(event) => {
+        const { api } = event;
+        const filterModel = api.getFilterModel();
+        if (filterModel['createdAt']?.value) {
+          if (
+            filterModel['createdAt'].value.start !== dateRange?.start ||
+            filterModel['createdAt'].value.end !== dateRange?.end
+          ) {
+            setDateRange(filterModel['createdAt'].value);
+          }
+        } else {
+          setDateRange(null);
+        }
+        onFilterChanged(event);
+      }}
       partyId={partyId}
       onMarketClick={onMarketClick}
-      overlayNoRowsTemplate={error ? error.message : t('No fills')}
-      {...gridProps}
+      overlayNoRowsTemplate={error ? error.message : overlayNoRowsTemplate}
+      {...props}
     />
   );
 };

libs/fills/src/lib/fills-table.tsx

@@ -20,6 +20,7 @@ import {
   negativeClassNames,
   MarketNameCell,
   COL_DEFS,
+  DateRangeFilter,
 } from '@vegaprotocol/datagrid';
 import type {
   VegaValueFormatterParams,
@@ -120,6 +121,7 @@ export const FillsTable = forwardRef<AgGridReact, Props>(
         },
         {
           headerName: t('Date'),
+          filter: DateRangeFilter,
           field: 'createdAt',
           valueFormatter: ({
             value,