feat: call transcripts

src/components/Table.jsx

@@ -31,6 +31,9 @@ import { useNavigate } from "react-router-dom";
 
 import { useStyles } from "./styles/tableStyles";
 import ProtectedComponent from "../components/ProtectedComponent";
+import { DesktopDatePicker, LocalizationProvider } from "@mui/x-date-pickers";
+import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
+import { DateRangePicker } from "@mui/x-date-pickers-pro";
 
 const Table = memo(
   forwardRef((props, ref) => {
@@ -52,6 +55,7 @@ const Table = memo(
       getRowStyle = () => {},
       searchText,
       navigateTo,
+      showDateFilters = false,
     } = props;
     const [data, setData] = useState([]);
     const [formattedColumns, setFormattedColumns] = useState([]);
@@ -62,6 +66,7 @@ const Table = memo(
     const [columnFilters, setColumnFilters] = useState([]);
     const [globalFilter, setGlobalFilter] = useState("");
     const [sorting, setSorting] = useState([]);
+    const [dateRange, setDateRange] = useState([null, null]);
     const tableRef = useRef();
     const [pagination, setPagination] = useState({
       pageIndex: options?.pageIndex ?? 0,
@@ -69,6 +74,14 @@ const Table = memo(
     });
     const navigate = useNavigate();
 
+
+    useEffect(()=>{
+      if(dateRange){
+        console.log(dateRange);
+        
+      }
+    },[dateRange])
+
     useImperativeHandle(ref, () => ({
       reFetchData() {
         setIsLoading(true);
@@ -149,12 +162,20 @@ const Table = memo(
           (sort) => `orderBy=${sort.id}&order=${sort.desc ? "DESC" : "ASC"}&`
         )
         .join("");
+      let startDate = "";
+      let endDate = "";
+      if (dateRange) {
+        startDate = dateRange[0];
+        endDate = dateRange[1];
+      }
       try {
         const response = await getData({
           pagination,
           filterString,
           globalFilter,
           sortingString,
+          startDate,
+          endDate,
         });
         setData(response.data);
         setRowCount(response.rowCount);
@@ -178,6 +199,7 @@ const Table = memo(
       pagination.pageIndex,
       pagination.pageSize,
       sorting,
+      dateRange,
     ]);
 
     const debouncedSearch = useMemo(
@@ -229,6 +251,32 @@ const Table = memo(
               ),
             }}
           />
+          {showDateFilters && (
+            <LocalizationProvider
+              className={classes.searchContainer}
+              dateAdapter={AdapterDateFns}
+            >
+              <DateRangePicker
+                className={classes.searchDatePicker}
+                renderInput={(props) => (
+                  <TextField {...props} variant="outlined" />
+                )}
+                slotProps={{
+                  field: {
+                   clearable: true,
+                   
+                  }
+                }}
+                value={dateRange}
+                onChange={(newValue) => {
+                  setDateRange(newValue);
+                  // column.setFilterValue(newValue);
+                }}
+                inputFormat="MMM d, yyyy"
+                format="MMM d, yyyy"
+              />
+            </LocalizationProvider>
+          )}
           {!hideShowPerPage && (
             <Box className={classes.pageSizeDropdown}>
               <Typography className={classes.dropDownLabel}>Show:</Typography>
@@ -287,11 +335,11 @@ const Table = memo(
               padding: "16px 8px",
               whiteSpace: "nowrap",
               justifyContent: "flex-start",
-              '& .MuiTableSortLabel-root': {
-                width: '100%',
-                justifyContent: 'flex-start',
-              }
-            }
+              "& .MuiTableSortLabel-root": {
+                width: "100%",
+                justifyContent: "flex-start",
+              },
+            },
           }}
           enableRowNumbers={enableRowNumbers}
           rowNumberMode={rowNumberMode}
@@ -383,28 +431,30 @@ const Table = memo(
             className: classes?.tableCheckbox,
           }}
           renderRowActionMenuItems={({ row, closeMenu }) =>
-            actions?.filter(action => !action.render)?.map((action, index) =>
-              !(action?.renderAction?.(row) ?? true) ? null : (
-                <MenuItem
-                  key={index}
-                  className={classes.menuItem}
-                  onClick={(event) => {
-                    event.stopPropagation();
-                    action.onClick && action.onClick(row);
-                    closeMenu();
-                  }}
-                  disabled={
-                    action?.isDisabledValue
-                      ? action?.isDisabledValue ===
-                        row?.original?.[action?.rowKey]
-                      : false
-                  }
-                >
-                  {action?.icon} {action?.text}{" "}
-                  {action.textFn && action.textFn(row)}
-                </MenuItem>
-              )
-            ) ?? []
+            actions
+              ?.filter((action) => !action.render)
+              ?.map((action, index) =>
+                !(action?.renderAction?.(row) ?? true) ? null : (
+                  <MenuItem
+                    key={index}
+                    className={classes.menuItem}
+                    onClick={(event) => {
+                      event.stopPropagation();
+                      action.onClick && action.onClick(row);
+                      closeMenu();
+                    }}
+                    disabled={
+                      action?.isDisabledValue
+                        ? action?.isDisabledValue ===
+                          row?.original?.[action?.rowKey]
+                        : false
+                    }
+                  >
+                    {action?.icon} {action?.text}{" "}
+                    {action.textFn && action.textFn(row)}
+                  </MenuItem>
+                )
+              ) ?? []
           }
           renderTopToolbarCustomActions={({ table }) => {
             const handleActive = () => {
@@ -617,4 +667,4 @@ const CustomPagination = ({ table }) => {
   );
 };
 
-export default Table;
+export default Table;

src/components/styles/tableStyles.js

@@ -150,6 +150,31 @@ export const useStyles = makeStyles((theme) => ({
       opacity: 0.9,
     },
   },
+  searchDatePicker: {
+    margin: theme.spacing(2.0),
+    backgroundColor: theme.palette.grey[0],
+    borderRadius: theme.spacing(1.8),
+    width: theme.spacing(32.0),
+    '& .MuiOutlinedInput-root': {
+      borderRadius: theme.spacing(1.8),
+    },
+    '&.MuiTextField-root': {
+      width: theme.spacing(40.0),
+      borderRadius: theme.spacing(1.8),
+    },
+    '& .MuiOutlinedInput-input::placeholder': {
+      fontStyle: 'normal',
+      fontSize: pxToRem(14),
+      color: theme.palette.grey[10],
+      opacity: 0.9,
+    },
+    '& .MuiPickersInputBase-root': {
+      borderRadius: theme.spacing(1.4),
+    },
+    '& .MuiPickersSectionList-root': {
+      padding: `12.5px !important`,
+    },
+  },
   searchIconImg: {
     width: theme.spacing(2.0),
     minWidth: theme.spacing(1.8),