@argusoft/medplat-app-shell 1.0.6 → 1.0.7

package/src/views/feature-components/FeatureUsageAnalytics/FeatureUsageAnalytics.jsx

@@ -0,0 +1,989 @@
+import { useSelector } from 'react-redux';
+import { getUseSkeleton } from '@/store/reducers/SkeletonReducer';
+import { useForm } from 'react-hook-form';
+import Grid from '@mui/material/Grid2';
+import { Card, FormControl } from '@mui/material';
+import CustomAutocomplete from '@/views/custom-components/CustomAutoComplete';
+import { showToast } from '@/common/toaster/toaster';
+import { getAllRoleList } from '@/common/services/Roles';
+import { useEffect, useState } from 'react';
+import { execute } from '@/common/services/QueryBuilder';
+import dayjs from 'dayjs';
+import {
+  ScatterChart,
+  Scatter,
+  XAxis,
+  YAxis,
+  ZAxis,
+  Tooltip,
+  ResponsiveContainer,
+  LabelList,
+  Bar,
+  BarChart,
+  Legend,
+} from 'recharts';
+import PropTypes from 'prop-types';
+import CustomDatePicker from '@/views/custom-components/CustomDatePicker';
+import CustomizedTable from '@/views/custom-components/CustomizedTable/CustomizedTableV2';
+const FeatureUsageAnalytics = () => {
+  const [isLoading, setIsLoading] = useState(false);
+  const [chartDataLoading, setChartDataLoading] = useState(false);
+  const today = dayjs();
+  const oneMonthAgo = today.subtract(1, 'month');
+  const minDate = oneMonthAgo.format('YYYY-MM-DD');
+  const maxDate = today.format('YYYY-MM-DD');
+  const [roleList, setRoleList] = useState([]);
+  const [pageList, setPageList] = useState([]);
+  const [roleIds, setRoleIds] = useState(null);
+  const [filteredData, setFilteredData] = useState([]);
+  const [filteredpageList, setFilteredpageList] = useState([]);
+  const [transformedData, setTransformedData] = useState([]);
+
+  const [barChartData, setBarChartData] = useState([]);
+  const [rawDataTableData, setrawDataTableData] = useState([]);
+  const [top5ByPageCount, setTop5ByPageCount] = useState([]);
+  const [top5ByAvgTime, setTop5ByAvgTime] = useState([]);
+  const [bottom5ByPageCount, setBottom5ByPageCount] = useState([]);
+  const [bottom5ByAvgTime, setBottom5ByAvgTime] = useState([]);
+
+  const rawDataTableFields = [
+    { field: 'Sr. No.', label: '#', align: 'left' },
+    { field: 'menu_name', label: 'Page title' },
+    { field: 'page_count', label: 'Number of time page visited' },
+    { field: 'avg_time', label: 'Average time spent (in seconds)' },
+    { field: 'user_count', label: 'Number of distinct users visited the page' },
+    { field: 'percentvalue', label: 'Percentage of distinct users visited the page' },
+  ];
+
+  const pageVisitedTableFields = [
+    { field: 'menu_name', label: 'Page title' },
+    { field: 'page_count', label: 'Number of time page visited' },
+  ];
+
+  const averageTimeTableFields = [
+    { field: 'menu_name', label: 'Page title' },
+    { field: 'avg_time', label: 'Average time spent (in seconds)' },
+  ];
+  const {
+    control,
+    watch,
+    setValue,
+    // handleSubmit,
+    // formState: { errors },
+  } = useForm({
+    defaultValues: {
+      fromDate: minDate,
+      endDate: maxDate,
+    },
+    // resolver: yupResolver(validationSchema),
+    mode: 'onChange', // Trigger validation on change
+  });
+
+  /**
+   * @function formatDate
+   * @description Formats a date into DD-MM-YYYY format.
+   * @param {string|Date} date - The input date to format.
+   * @returns {string} - The formatted date string.
+   */
+  function formatDate(date) {
+    const dd = String(new Date(date).getDate()).padStart(2, '0');
+    const mm = String(new Date(date).getMonth() + 1).padStart(2, '0'); // Months are 0-based
+    const yyyy = new Date(date).getFullYear();
+    return `${dd}-${mm}-${yyyy}`;
+  }
+
+  /**
+   * @function getFeatureUsageAnalyticsDetails
+   * @description Fetches analytics data based on selected roles and pages, processes it for charts and tables.
+   */
+  const getFeatureUsageAnalyticsDetails = async () => {
+    try {
+      setChartDataLoading(true);
+
+      const from_date = formatDate(watch('fromDate'));
+      const end_date = formatDate(watch('endDate'));
+      let dtoUsage = {
+        code: 'feature_usage_analytics',
+        parameters: {
+          end_date,
+          from_date,
+          rids: roleIds,
+        },
+      };
+      const res = await execute(dtoUsage);
+      const data = res?.data?.result;
+      let rawDataTableData = [];
+      let filteredData = [];
+      let bubbleChartData = [];
+      let barChartData = [];
+      var xValues = [8, 5, 7, 9, 4, 2, 6, 3, 10, 1];
+      var yValues = [5, 9, 2, 10, 1, 4, 3, 6, 7, 8];
+      var bValues = [
+        'rgba(255,221,50,0.2)',
+        'rgba(60,186,159,0.2)',
+        'rgba(0,0,0,0.2)',
+        'rgba(193,46,12,0.2)',
+        'rgba(255,221,50,0.2)',
+        'rgba(60,186,159,0.2)',
+        'rgba(0,0,0,0.2)',
+        'rgba(193,46,12,0.2)',
+        'rgba(255,221,50,0.2)',
+        'rgba(60,186,159,0.2)',
+      ];
+      var bdValues = [
+        'rgba(255,221,50,1)',
+        'rgba(60,186,159,1)',
+        '#000',
+        'rgba(193,46,12,1)',
+        'rgba(255,221,50,1)',
+        'rgba(60,186,159,1)',
+        '#000',
+        'rgba(193,46,12,1)',
+        'rgba(255,221,50,1)',
+        'rgba(60,186,159,1)',
+      ];
+      var count = 0,
+        maxR = 80,
+        minR = 30;
+      let minValue = 0;
+      let maxValue = 0;
+      if (data?.length > 0) {
+        filteredData = data.filter((tmp) => {
+          return filteredpageList.some((t) => {
+            return t === tmp.menu_name;
+          });
+        });
+        setFilteredData(filteredData);
+        if (filteredData.length > 0) {
+          if (filteredData && filteredData.length >= 10) {
+            minValue = filteredData[9].page_count;
+            maxValue = filteredData[0].page_count;
+          } else if (filteredData && filteredData.length < 10) {
+            minValue = filteredData[filteredData.length - 1].page_count;
+            maxValue = filteredData[0].page_count;
+          } else if (!filteredData) {
+            minValue = 0;
+            maxValue = 0;
+          } else {
+            minValue = minR;
+            maxValue = maxR;
+          }
+          filteredData.forEach(function (value) {
+            rawDataTableData.push({
+              menu_name: value?.menu_name,
+              page_count: value?.page_count,
+              user_count: value?.user_count,
+              avg_time: parseInt((value.avg_time / 1000).toFixed(0)),
+              percentvalue: value.percentvalue.toFixed(2) + '%',
+            });
+            barChartData.push({
+              name: value.menu_name,
+              average: parseInt((value.avg_time / 1000).toFixed(0)),
+              maximum: parseInt((value.max_time / 1000).toFixed(0)),
+            });
+
+            if (filteredData.length >= 10) {
+              if (count < 10) {
+                bubbleChartData.push({
+                  label: [
+                    'Page Title : ' + value.menu_name,
+                    'Number of times page visited : ' + value.page_count,
+                    'Distinct number of users visited the page :' + value.user_count,
+                  ],
+                  backgroundColor: bValues[count],
+                  borderColor: bdValues[count],
+                  title: value.menu_name,
+                  hoverRadius: 0,
+                  data: [
+                    {
+                      x: xValues[count],
+                      y: yValues[count],
+                      r:
+                        maxValue !== minValue
+                          ? (((maxR - minR) * (value.page_count - minValue)) / (maxValue - minValue) + minR).toFixed(0)
+                          : minR,
+                    },
+                  ],
+                });
+              }
+            } else {
+              bubbleChartData.push({
+                label: [
+                  'Page Title : ' + value.menu_name,
+                  'Number of times page visited : ' + value.page_count,
+                  'Distinct number of users visited the page :' + value.user_count,
+                ],
+                backgroundColor: bValues[count],
+                borderColor: bdValues[count],
+                title: value.menu_name,
+                hoverRadius: 0,
+                data: [
+                  {
+                    x: xValues[count],
+                    y: yValues[count],
+                    r:
+                      maxValue !== minValue
+                        ? (((maxR - minR) * (value.page_count - minValue)) / (maxValue - minValue) + minR).toFixed(0)
+                        : minR,
+                  },
+                ],
+              });
+            }
+            count++;
+          });
+        }
+      } else {
+        setFilteredData([]);
+      }
+
+      setrawDataTableData(rawDataTableData);
+      setBarChartData(barChartData);
+      setTransformedData(prepareChartData(bubbleChartData));
+      setChartDataLoading(false);
+    } catch (error) {
+      console.error(error);
+      showToast({ message: 'Error in getting Feature Usage Analytics data.', type: 'error' });
+    }
+  };
+
+  /**
+   * @description Side effect that processes raw table data to get top and bottom 5 lists.
+   */
+  useEffect(() => {
+    if (!rawDataTableData?.length) return;
+
+    const sortedByPageCount = [...rawDataTableData].sort((a, b) => b.page_count - a.page_count);
+    const sortedByAvgTime = [...rawDataTableData].sort((a, b) => b.avg_time - a.avg_time);
+
+    setTop5ByPageCount(sortedByPageCount.slice(0, 5));
+
+    setTop5ByAvgTime(sortedByAvgTime.slice(0, 5));
+
+    const sortedByPageCountBottom = [...rawDataTableData].sort((a, b) => a.page_count - b.page_count);
+    const sortedByAvgTimeBottom = [...rawDataTableData].sort((a, b) => a.avg_time - b.avg_time);
+    setBottom5ByPageCount(sortedByPageCountBottom.slice(0, 5));
+    setBottom5ByAvgTime(sortedByAvgTimeBottom.slice(0, 5));
+  }, [rawDataTableData]);
+
+  /**
+   * @function CustomTooltip
+   * @description Tooltip component for Bubble chart points.
+   */
+  const CustomTooltip = ({ active, payload }) => {
+    if (active && payload?.length) {
+      const d = payload[0].payload;
+      return (
+        <div className="bg-black/60 text-white p-2 rounded-md text-xs">
+          <div className="flex items-start gap-1">
+            <div
+              className="w-3 h-3 mt-0.5"
+              style={{
+                backgroundColor: d.backgroundColor, // Use the fill color for the average or fallback
+                border: `1px solid ${d.borderColor}`, // Use the stroke color for the border or fallback
+              }}
+            ></div>
+            <div>
+              <div>
+                <strong>Page Title :</strong> {d.title}
+              </div>
+              <div>
+                <strong>Number of times page visited :</strong> {d.page_count}
+              </div>
+              <div>
+                <strong>Distinct number of users visited the page :</strong> {d.user_count}
+              </div>
+            </div>
+          </div>
+        </div>
+      );
+    }
+    return null;
+  };
+  CustomTooltip.propTypes = {
+    active: PropTypes.any,
+    payload: PropTypes.any,
+  };
+
+  /**
+   * @function CustomTooltipBarChart
+   * @description Tooltip component for Bar chart.
+   */
+  const CustomTooltipBarChart = ({ active, payload }) => {
+    if (active && payload?.length) {
+      const d = payload[0]; // Directly access the item in payload
+
+      return (
+        <div className="bg-black/60 text-white p-2 rounded-md text-xs">
+          <div className="">
+            {/* Display for Average */}
+            <div>
+              <strong>{d.payload.name}</strong> {/* This will be Web Tasks, for example */}
+            </div>
+
+            <div>
+              <div className="flex items-center gap-1">
+                <div
+                  className="w-3 h-3 mt-0.5"
+                  style={{
+                    backgroundColor: d.fill, // Use the fill color for the average or fallback
+                    border: `1px solid ${d.stroke}`, // Use the stroke color for the border or fallback
+                  }}
+                ></div>
+                <div>
+                  <strong>Average Usage:</strong> {d.payload?.average} {/* Access the average value */}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Display for Maximum */}
+          <div className="flex items-start gap-1 ">
+            <div
+              className="w-3 h-3 mt-0.5"
+              style={{
+                backgroundColor: payload[1].fill || '#F4D8C6', // Use the fill color for the maximum or fallback
+                border: `1px solid ${payload[1].stroke || '#E65C00'}`, // Use the stroke color for the border or fallback
+              }}
+            ></div>
+            <div>
+              <div>
+                <strong>Maximum Usage:</strong> {d.payload?.maximum} {/* Access the maximum value */}
+              </div>
+            </div>
+          </div>
+        </div>
+      );
+    }
+
+    return null;
+  };
+
+  CustomTooltipBarChart.propTypes = {
+    active: PropTypes.any,
+    payload: PropTypes.any,
+  };
+
+  /**
+   * @function prepareChartData
+   * @description Converts raw bubble chart data into usable chart format.
+   * @param {Array} raw - Raw bubble chart data.
+   * @returns {Array} - Transformed chart data.
+   */
+  const prepareChartData = (raw) => {
+    return raw.map((item) => {
+      const page_count = Number(item?.label[1]?.split(':')[1].trim());
+      const user_count = Number(item?.label[2]?.split(':')[1].trim());
+
+      return {
+        ...item.data[0],
+        title: item.title,
+        page_count,
+        user_count,
+        backgroundColor: item.backgroundColor,
+        borderColor: item.borderColor,
+      };
+    });
+  };
+
+  /**
+   * @function fetchPages
+   * @description Fetches page list based on selected roles and triggers data fetch.
+   */
+  const fetchPages = async () => {
+    try {
+      let dtoPage = {
+        code: 'menu_list_by_role_ids',
+        parameters: {
+          rids: roleIds,
+        },
+      };
+      const res = await execute(dtoPage);
+      setPageList(res?.data?.result || []);
+      const filteredpageList = [];
+      res?.data?.result?.forEach((page) => {
+        filteredpageList.push(page?.menu_name);
+      });
+      setFilteredpageList(filteredpageList);
+      await getFeatureUsageAnalyticsDetails();
+    } catch (error) {
+      console.error(error);
+      showToast({ message: 'Error in fetching pages', type: 'error' });
+    }
+  };
+
+  /**
+   * @function handleSelectedRoleChange
+   * @description Handles role selection change and updates related state.
+   * @param {*} _ - Event object (unused).
+   * @param {Array} value - Selected roles.
+   */
+  const handleSelectedRoleChange = async (_, value) => {
+    setValue('selectPage', []);
+    let roleIds = [];
+    value?.forEach((role) => {
+      roleIds.push(role.id);
+    });
+    if (roleIds?.length > 0) {
+      setRoleIds(roleIds);
+    } else {
+      await loadInitial();
+    }
+  };
+
+  /**
+   * @function handleSelectedPageChange
+   * @description Handles page selection change and updates filtered pages.
+   * @param {*} _ - Event object (unused).
+   * @param {Array} value - Selected pages.
+   */
+  const handleSelectedPageChange = async (_, value) => {
+    const selectedPages = [];
+    value?.forEach((page) => {
+      selectedPages.push(page?.menu_name);
+    });
+    const filteredpageList = pageList
+      ?.filter((page) => {
+        return Array.isArray(selectedPages) && selectedPages.length ? selectedPages.includes(page.menu_name) : true;
+      })
+      .map((page) => page.menu_name);
+    setFilteredpageList(filteredpageList);
+  };
+
+  /**
+   * @function loadInitial
+   * @description Loads initial roles and sets roleIds.
+   */
+  const loadInitial = async () => {
+    try {
+      const res = await getAllRoleList();
+      setRoleList(res?.data || []);
+      const roleIds = res?.data?.map((role) => role.id);
+      setRoleIds(roleIds);
+    } catch (error) {
+      console.error(error);
+      showToast({ message: 'Error in loading Feature Usage Analytics', type: 'error' });
+    }
+  };
+
+  /**
+   * @function CustomBarWithoutBottomStroke
+   * @description Custom Bar shape component excluding bottom stroke for styling.
+   */
+  const CustomBarWithoutBottomStroke = (props) => {
+    const { x, y, width, height, fill, stroke } = props;
+
+    return (
+      <g>
+        <rect x={x} y={y} width={width} height={height} fill={fill} />
+
+        <line x1={x} y1={y} x2={x + width} y2={y} stroke={stroke} strokeWidth={2} />
+
+        <line x1={x} y1={y} x2={x} y2={y + height} stroke={stroke} strokeWidth={2} />
+
+        <line x1={x + width} y1={y} x2={x + width} y2={y + height} stroke={stroke} strokeWidth={2} />
+      </g>
+    );
+  };
+
+  CustomBarWithoutBottomStroke.propTypes = {
+    x: PropTypes.any,
+    y: PropTypes.any,
+    width: PropTypes.any,
+    height: PropTypes.any,
+    stroke: PropTypes.any,
+    fill: PropTypes.any,
+  };
+
+  /**
+   * @function CustomLegend
+   * @description Renders custom legend for charts.
+   */
+  const CustomLegend = ({ payload }) => {
+    return (
+      <ul className="flex flex-wrap justify-center gap-6 mb-4">
+        {payload.map((entry, index) => (
+          <li key={`item-${index}`} className="flex items-center gap-2 text-black">
+            <svg width="50" height="15">
+              <rect width="50" height="15" fill={entry.color} stroke={entry.payload.stroke} strokeWidth="4" />
+            </svg>
+            <span className="text-sm">{entry.value}</span>
+          </li>
+        ))}
+      </ul>
+    );
+  };
+  CustomLegend.propTypes = {
+    payload: PropTypes.any,
+  };
+
+  /**
+   * @description Initial effect to load roles.
+   */
+  useEffect(() => {
+    setIsLoading(true);
+    loadInitial();
+    setIsLoading(false);
+  }, []);
+
+  /**
+   * @description Effect to fetch page list when roleIds change.
+   */
+  useEffect(() => {
+    if (roleIds) {
+      fetchPages();
+    }
+  }, [roleIds]);
+
+  /**
+   * @description Effect to fetch analytics data whenever the filtered page list changes.
+   */
+  useEffect(() => {
+    getFeatureUsageAnalyticsDetails();
+  }, [filteredpageList]);
+
+  return (
+    <FeatureUsageAnalyticsSkeleton isLoading={isLoading}>
+      <Card variant="elevation" container className="mt-6 p-3 shadow-2xl">
+        <Grid item size={{ xs: 12 }}>
+          <Grid container spacing={2} component="form" className="w-full">
+            <Grid item size={{ xs: 12, md: 3 }}>
+              <FormControl variant="outlined" className="w-full">
+                <label>Select Role</label>
+                <CustomAutocomplete
+                  options={roleList || []}
+                  control={control}
+                  // value={canDelete}
+                  name="selectRole"
+                  getOptionLabel={(option) => option?.name}
+                  onChange={handleSelectedRoleChange}
+                  dataTestId="feature-usage-analytics-select-role"
+                />
+              </FormControl>
+            </Grid>
+            <Grid item size={{ xs: 12, md: 3 }}>
+              <FormControl variant="outlined" className="w-full">
+                <label>Select Page</label>
+                <CustomAutocomplete
+                  options={pageList || []}
+                  control={control}
+                  checkEquality="menu_name"
+                  name="selectPage"
+                  getOptionLabel={(option) => option?.menu_name}
+                  onChange={handleSelectedPageChange}
+                  dataTestId="feature-usage-analytics-select-page"
+                />
+              </FormControl>
+            </Grid>
+            <Grid item size={{ xs: 12, md: 3 }}>
+              <FormControl variant="outlined" className="w-full">
+                <label>Select From Date</label>
+                <CustomDatePicker
+                  name="fromDate"
+                  format="DD/MM/YYYY"
+                  control={control}
+                  onChange={() => {
+                    getFeatureUsageAnalyticsDetails(); // pass dayjs object for validation
+                  }}
+                  maxDate={watch('endDate') ? dayjs(watch('endDate')) : null}
+                  dataTestId="sohchartconfiguration-datepicker-input-to date"
+                />
+              </FormControl>
+            </Grid>
+            <Grid item size={{ xs: 12, md: 3 }}>
+              <FormControl variant="outlined" className="w-full">
+                <label>Select To Date</label>
+                <CustomDatePicker
+                  name="endDate"
+                  format="DD/MM/YYYY"
+                  control={control}
+                  onChange={() => {
+                    getFeatureUsageAnalyticsDetails(); // pass dayjs object for validation
+                  }}
+                  minDate={watch('fromDate') ? dayjs(watch('fromDate')) : null}
+                  dataTestId="sohchartconfiguration-datepicker-input-to date"
+                />
+                {/* <Controller
+                  name="endDate"
+                  control={control}
+                  // defaultValue={today}
+                  render={({ field }) => (
+                    <TextField
+                      {...field}
+                      type="date"
+                      className="bg-white"
+                      slotProps={{
+                        inputLabel: {
+                          shrink: true, // Keeps the label visible even when the input is filled
+                        },
+                        htmlInput: {
+                          // min: dayjs().subtract(1, 'month').format('YYYY-MM-DD'),
+                          min: watch('fromDate') ? dayjs(watch('fromDate')).format('YYYY-MM-DD') : null,
+                        },
+                      }}
+                      // InputLabelProps={{
+                      //   shrink: true, // Keeps the label visible even when the input is filled
+                      // }}
+
+                      onChange={async (e) => {
+                        const dateValue = e.target.value;
+                        field.onChange(dateValue);
+                        getFeatureUsageAnalyticsDetails(); // Custom validation logic
+                      }}
+                      value={field.value || ''}
+                      size="small"
+                      dataTestId="feature-usage-analytics-to-date"
+                    />
+                  )}
+                /> */}
+              </FormControl>
+            </Grid>
+          </Grid>
+        </Grid>
+        <Grid item size={{ xs: 12 }}>
+          <ChartDataSkeleton isLoading={chartDataLoading}>
+            {filteredData.length > 0 ? (
+              <Grid container>
+                <Grid item size={{ xs: 12 }} className="h-fit w-full">
+                  <Grid container justifyContent="center" alignItems="center" className="h-fit w-full mt-5">
+                    <Grid item size={{ xs: 12 }} className="text-center text-base font-semibold">
+                      Top 10 usage based on number of times page visited
+                    </Grid>
+                    <Grid
+                      item
+                      size={{ xs: 12, md: 9 }}
+                      className="h-45 sm:h-60 md:h-75 lg:h-110 xl:h-120 2xl:h-140"
+                      style={{ border: '2px solid black' }}
+                    >
+                      <ResponsiveContainer className="h-full w-full">
+                        <ScatterChart
+                          className="h-full w-full"
+                          margin={{ top: 50, left: -70 }}
+                          dataTestId="feature-usage-analytics-bubble-chart"
+                        >
+                          <XAxis type="number" dataKey="x" name="X" tick={false} axisLine={false} domain={[0, 12]} />
+                          <YAxis type="number" dataKey="y" name="Y" tick={false} axisLine={false} domain={[0, 10]} />
+                          <ZAxis type="number" dataKey="r" range={[10, 80]} />
+                          <Tooltip content={<CustomTooltip />} cursor={false} />
+                          <Scatter
+                            data={transformedData}
+                            shape={(props) => {
+                              // eslint-disable-next-line react/prop-types
+                              const { cx, cy, r, payload } = props;
+                              return (
+                                <circle
+                                  cx={cx}
+                                  cy={cy}
+                                  r={r}
+                                  // eslint-disable-next-line react/prop-types
+                                  fill={payload.backgroundColor}
+                                  // eslint-disable-next-line react/prop-types
+                                  stroke={payload.borderColor}
+                                  strokeWidth={1}
+                                  fillOpacity={1}
+                                />
+                              );
+                            }}
+                          >
+                            <LabelList
+                              dataKey="title"
+                              content={({ x, y, value }) => (
+                                <foreignObject x={x + 10} y={y - 10} width={120} height={40}>
+                                  <div className="text-left text-[12px] text-[#333] break-words whitespace-normal leading-[1.2]">
+                                    {value}
+                                  </div>
+                                </foreignObject>
+                              )}
+                            />
+                          </Scatter>
+                        </ScatterChart>
+                      </ResponsiveContainer>
+                    </Grid>
+                  </Grid>
+
+                  <Grid container justifyContent="center" alignItems="center" className="h-fit w-full mt-10">
+                    <Grid item size={{ xs: 12 }} className="text-center text-base font-semibold">
+                      User engagement graph
+                    </Grid>
+                    <Grid item size={{ xs: 12, md: 9 }} className="h-140" style={{ border: '2px solid black' }}>
+                      <ResponsiveContainer className="h-full w-full barchart-analytics">
+                        <BarChart
+                          data={barChartData}
+                          margin={{ top: 30, right: 30, left: 30, bottom: 100 }}
+                          className="h-full w-full"
+                          dataTestId="feature-usage-analytics-bar-chart"
+                        >
+                          <Legend
+                            layout="horizontal"
+                            verticalAlign="top"
+                            align="center"
+                            wrapperStyle={{ paddingBottom: 20 }}
+                            content={<CustomLegend />}
+                          />
+                          <XAxis
+                            dataKey="name"
+                            angle={-45}
+                            textAnchor="end"
+                            interval={0}
+                            height={100}
+                            axisLine={false}
+                            tickLine={false}
+                            className="text-sm font-normal"
+                          />
+                          <YAxis
+                            label={{
+                              value: 'Time in seconds',
+                              angle: -90,
+                              position: 'insideLeft',
+                              dy: 50,
+                              dx: -20,
+                            }}
+                            axisLine={false}
+                            tickLine={false}
+                            className="text-sm font-normal"
+                          />
+                          <Tooltip content={<CustomTooltipBarChart />} cursor={false} />
+                          <Bar
+                            dataKey="average"
+                            name="Average usage of all visits"
+                            fill="#C6DCF2"
+                            stackId="stack1"
+                            stroke="#2B7DCE"
+                            shape={<CustomBarWithoutBottomStroke stroke="#2B7DCE" />}
+                          />
+                          <Bar
+                            dataKey="maximum"
+                            name="Maximum usage of all visits"
+                            fill="#F4D8C6"
+                            stackId="stack1"
+                            stroke="#E65C00"
+                            shape={<CustomBarWithoutBottomStroke stroke="#E65C00" />}
+                          />
+                        </BarChart>
+                      </ResponsiveContainer>
+                    </Grid>
+                  </Grid>
+                  <Grid container justifyContent="center" alignItems="center" className="h-fit w-full mt-10">
+                    <Grid item size={{ xs: 12 }} className="text-center text-base font-semibold">
+                      Page/Feature usage raw data
+                    </Grid>
+                    <Grid item size={{ xs: 12, md: 9 }}>
+                      <CustomizedTable
+                        styleConfig={{ tableStyle: { maxHeight: 120 } }}
+                        columns={rawDataTableFields}
+                        tableData={rawDataTableData}
+                        paginationConfig={{ pagination: false }}
+                        dataTestId="feature-usage-analytics-raw-data"
+                      />
+                    </Grid>
+                  </Grid>
+
+                  {filteredData?.length > 9 && (
+                    <Grid container justifyContent="space-between" alignItems="center" className="h-fit w-full mt-10">
+                      <Grid item size={{ xs: 12 }} className="text-center text-base font-semibold">
+                        Page/Feature usage overview
+                      </Grid>
+
+                      <Grid item size={{ xs: 12, md: 5.5 }} className="mt-5">
+                        <Grid container>
+                          <Grid item size={{ xs: 12 }}>
+                            Top 5 usage based on number of time page visited
+                          </Grid>
+                          <Grid item size={{ xs: 12 }}>
+                            <CustomizedTable
+                              styleConfig={{ tableStyle: { maxHeight: 200 } }}
+                              columns={pageVisitedTableFields}
+                              tableData={top5ByPageCount}
+                              paginationConfig={{ pagination: false }}
+                              dataTestId="feature-usage-analytics-top-5-page-visited"
+                            />
+                          </Grid>
+                        </Grid>
+                      </Grid>
+                      <Grid item size={{ xs: 12, md: 5.5 }} className="mt-5">
+                        <Grid container>
+                          <Grid item size={{ xs: 12 }}>
+                            Top 5 usage based on average time (in seconds)
+                          </Grid>
+                          <Grid item size={{ xs: 12 }}>
+                            <CustomizedTable
+                              styleConfig={{ tableStyle: { maxHeight: 200 } }}
+                              columns={averageTimeTableFields}
+                              tableData={top5ByAvgTime}
+                              paginationConfig={{ pagination: false }}
+                              dataTestId="feature-usage-analytics-top-5-avg-time"
+                            />
+                          </Grid>
+                        </Grid>
+                      </Grid>
+                      <Grid item size={{ xs: 12, md: 5.5 }} className="mt-10">
+                        <Grid container>
+                          <Grid item size={{ xs: 12 }}>
+                            Bottom 5 usage based on number of time page visited
+                          </Grid>
+                          <Grid item size={{ xs: 12 }}>
+                            <CustomizedTable
+                              styleConfig={{ tableStyle: { maxHeight: 200 } }}
+                              columns={pageVisitedTableFields}
+                              tableData={bottom5ByPageCount}
+                              paginationConfig={{ pagination: false }}
+                              dataTestId="feature-usage-analytics-bottom-5-page-visited"
+                            />
+                          </Grid>
+                        </Grid>
+                      </Grid>
+                      <Grid item size={{ xs: 12, md: 5.5 }} className="mt-10">
+                        <Grid container>
+                          <Grid item size={{ xs: 12 }}>
+                            Bottom 5 usage based on average time (in seconds)
+                          </Grid>
+                          <Grid item size={{ xs: 12 }}>
+                            <CustomizedTable
+                              styleConfig={{ tableStyle: { maxHeight: 200 } }}
+                              columns={averageTimeTableFields}
+                              tableData={bottom5ByAvgTime}
+                              paginationConfig={{ pagination: false }}
+                              dataTestId="feature-usage-analytics-bottom-5-avg-time"
+                            />
+                          </Grid>
+                        </Grid>
+                      </Grid>
+                    </Grid>
+                  )}
+                </Grid>
+              </Grid>
+            ) : (
+              <Grid container>
+                <Grid
+                  item
+                  size={{ xs: 12 }}
+                  className="mt-10 bg-[#F8D7DA] p-1 text-center text-[0.8rem] text-[#722E59]"
+                >
+                  Sorry !! no data to display !! kindly try modifying the filter
+                </Grid>
+              </Grid>
+            )}
+          </ChartDataSkeleton>
+        </Grid>
+      </Card>
+    </FeatureUsageAnalyticsSkeleton>
+  );
+};
+
+export default FeatureUsageAnalytics;
+
+export const FeatureUsageAnalyticsSkeleton = ({ children, isLoading }) => {
+  const useSkeleton = useSelector(getUseSkeleton);
+  if (!useSkeleton) {
+    return children;
+  }
+  if (!isLoading) {
+    return children;
+  }
+
+  return (
+    <div className="pl-20 pr-20 pt-5 mb-10 animate-pulse">
+      <div className="grid grid-cols-1 md:grid-cols-4 gap-4 w-full">
+        {/* Select Role */}
+        <div className="space-y-2">
+          <div className="h-4 bg-gray-300 rounded w-1/2"></div>
+          <div className="h-10 bg-gray-300 rounded w-full"></div>
+        </div>
+
+        {/* Select Page */}
+        <div className="space-y-2">
+          <div className="h-4 bg-gray-300 rounded w-1/2"></div>
+          <div className="h-10 bg-gray-300 rounded w-full"></div>
+        </div>
+
+        {/* From Date */}
+        <div className="space-y-2">
+          <div className="h-4 bg-gray-300 rounded w-1/2"></div>
+          <div className="h-10 bg-gray-300 rounded w-full"></div>
+        </div>
+
+        {/* To Date */}
+        <div className="space-y-2">
+          <div className="h-4 bg-gray-300 rounded w-1/2"></div>
+          <div className="h-10 bg-gray-300 rounded w-full"></div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+FeatureUsageAnalyticsSkeleton.propTypes = {
+  children: PropTypes.any,
+  loading: PropTypes.any,
+  isLoading: PropTypes.any,
+};
+
+const SkeletonBox = ({ height = 'h-10', width = 'w-full' }) => (
+  <div className={`bg-gray-300 animate-pulse rounded ${height} ${width}`}></div>
+);
+
+SkeletonBox.propTypes = {
+  height: PropTypes.any,
+  width: PropTypes.any,
+};
+
+export const ChartDataSkeleton = ({ children, isLoading }) => {
+   const useSkeleton = useSelector(getUseSkeleton);
+   if (!useSkeleton) {
+     return children;
+   }
+  if (!isLoading) {
+    return children;
+  }
+
+  return (
+    <div className="p-4 space-y-10">
+      {/* Top 10 usage */}
+      <div className="text-center text-base font-semibold">
+        <SkeletonBox height="h-6" width="w-2/3 mx-auto" />
+      </div>
+      <div className="border-2 h-60 md:h-75 lg:h-110 xl:h-120 2xl:h-140">
+        <SkeletonBox height="h-full" />
+      </div>
+
+      {/* Bar Chart */}
+      <div className="text-center text-base font-semibold">
+        <SkeletonBox height="h-6" width="w-2/3 mx-auto" />
+      </div>
+      <div className="border-2 h-140">
+        <SkeletonBox height="h-full" />
+      </div>
+
+      {/* Raw Data Table */}
+      <div className="text-center text-base font-semibold">
+        <SkeletonBox height="h-6" width="w-1/2 mx-auto" />
+      </div>
+      <div className="space-y-2">
+        {[...Array(5)].map((_, i) => (
+          <SkeletonBox key={i} height="h-6" />
+        ))}
+      </div>
+
+      {/* Overview Section - Top 5 / Bottom 5 */}
+      <div className="text-center text-base font-semibold">
+        <SkeletonBox height="h-6" width="w-1/2 mx-auto" />
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mt-5">
+        {[...Array(4)].map((_, i) => (
+          <div key={i} className="space-y-2">
+            <SkeletonBox height="h-5" width="w-3/4" />
+            {[...Array(5)].map((_, j) => (
+              <SkeletonBox key={j} height="h-6" />
+            ))}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+ChartDataSkeleton.propTypes = {
+  children: PropTypes.any,
+  loading: PropTypes.any,
+  isLoading: PropTypes.any,
+};