Imports date filter indicates if there are imports on specific dates

src/components/common/ChipDatePicker.jsx

@@ -1,20 +1,37 @@
 import React from 'react';
 import { DatePicker } from "@material-ui/pickers";
-import { Chip, Tooltip } from '@material-ui/core';
+import { Chip, Tooltip, Badge } from '@material-ui/core';
 import { Schedule, Cancel } from '@material-ui/icons';
+import { isEmpty, get } from 'lodash';
 
 
 const ChipDatePicker = props => {
   const ref = React.useRef(null);
-  const { label, size, date, defaultValue } = props;
+  const { label, size, date, defaultValue, badgedDates } = props;
   const clickHidden = () => document.getElementById('hidden-chip-date-picker').click()
   const onChange = mDate => {
     let date = null;
     if(mDate)
       date = mDate.format('YYYY-MM-DD')
     props.onChange(date);
   }
-
+  const renderDay = (date, selectedDate, dayInCurrentMonth, dayComponent) => {
+    if(!badgedDates || isEmpty(badgedDates))
+      return dayComponent
+    const fSelectedDate = selectedDate.format('DD-MM-YYYY')
+    const fDate = date.format('DD-MM-YYYY')
+    const count = get(badgedDates, fDate)
+    if(count && fDate !== fSelectedDate) {
+      return (
+        <Tooltip title={`${count} imports`}>
+          <Badge badgeContent={count} color="primary" variant="dot" overlap="circle">
+            {dayComponent}
+          </Badge>
+        </Tooltip>
+      )
+    }
+    return dayComponent;
+  }
 
   return (
     <Tooltip title={props.tooltip || 'Updated Since'}>
@@ -51,6 +68,7 @@ const ChipDatePicker = props => {
             PopoverProps={{
               anchorEl: ref.current
             }}
+            renderDay={renderDay}
           />
         </span>
       </span>

src/components/imports/ExistingImports.jsx

@@ -9,7 +9,7 @@ import {
   Refresh as RefreshIcon,
   Check as CheckIcon
 } from '@material-ui/icons';
-import { filter, map, startCase, includes, without, uniqBy, isEmpty, orderBy } from 'lodash';
+import { filter, map, startCase, includes, without, uniqBy, isEmpty, orderBy, forEach } from 'lodash';
 import { BLACK } from '../../common/constants';
 import { formatDate } from '../../common/utils';
 import ChipDatePicker from '../common/ChipDatePicker';
@@ -51,6 +51,18 @@ const ExistingImports = ({isLoading, onRefresh, onRevoke, onDownload, tasks, err
     return tasks
   }
   const filteredTasks = getTasks()
+  const getTasksCountByDate = () => {
+    const results = {}
+    forEach(tasks, task => {
+      const date = task.details.started || task.details.received
+      const fDate = moment(date * 1000).format('DD-MM-YYYY')
+      if(!results[fDate])
+        results[fDate] = 0
+      results[fDate] += 1;
+    })
+    return results
+  }
+  const tasksCountByDate = getTasksCountByDate()
   const getTitle = () => {
     const prefix = 'Existing Imports'
 
@@ -143,6 +155,7 @@ const ExistingImports = ({isLoading, onRefresh, onRevoke, onDownload, tasks, err
             label={getDateText()}
             date={date}
             size='medium'
+            badgedDates={tasksCountByDate}
           />
         </div>
       </div>