@argusoft/medplat-app-shell 1.0.6 → 1.0.8

package/src/views/feature-components/Dashboard/DashboardUI.jsx

@@ -0,0 +1,1043 @@
+import React, { lazy, Suspense, useEffect, useRef, useState } from 'react';
+import {
+  getCount,
+  getWebTasksBasketDetails,
+  retrieveBasketPreferenceByUserId,
+  saveBasketPreferenceByUserId,
+} from '@/common/services/Webtasks';
+import SideOverlay from '@/views/custom-components/SideOverlay';
+import { getAssignedFeatures } from '@/utils/feature';
+const ActionModal = lazy(() => import('@/views/feature-components/Dashboard/actionModal'));
+const Taskbar = lazy(() => import('@/views/feature-components/Dashboard/Taskbar'));
+import WebtasksFilterForm from '@/views/feature-components/Dashboard/WebtasksFilterForm';
+const WidgetCard = lazy(() => import('@/views/feature-components/Dashboard/WidgetCard'));
+import QuickLinks from './QuickLinks';
+import { Card, IconButton, Popover, Typography, Chip } from '@mui/material';
+import Grid from '@mui/material/Grid2';
+import { Box } from '@mui/system';
+import { saveAs } from 'file-saver';
+import { useDispatch, useSelector } from 'react-redux';
+import useTrackEvent from '@/hooks/useTrackEvent';
+import * as XLSX from 'xlsx-js-style';
+import { showToast } from '@/common/toaster/toaster';
+import CustomizedTable from '@/views/custom-components/CustomizedTable/CustomizedTableV2';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faBars, faEllipsisVertical, faFileExcel } from '@fortawesome/free-solid-svg-icons';
+import { setHeaderTitle } from '@/store/reducers/AuthenticationReducer';
+import { useNavigate } from 'react-router';
+import GeneralUtil from '@/common/services/util/GeneralUtil';
+import HealthWorkerIncorrectDetailsModal from './ekavachModal/HealthWorkerIncorrectDetailsModal';
+import MoMaternalDeathVerifcationModal from './ekavachModal/MoMaternalDeathVerifcationModal';
+import { saveAction } from '@/common/services/Webtasks';
+import MoVerficationForChildScreeningMoadal from './ekavachModal/MoVerficationForChildScreeningMoadal';
+import AshaScreenedMembersModal from './DhnddModal/AshaDataQualityVerificationModal';
+import { useTheme } from '@mui/material/styles';
+import { alpha } from '@mui/material/styles';
+import { execute } from '@/common/services/QueryBuilder';
+
+const Dashboard = () => {
+  const defaultColors = ['#dd4b39', '#00a65a', '#f39c12', '#00c0ef', '#333333', '#ffc90e'];
+  const [widgetData, setWidgetData] = useState([]);
+  const [open, setOpen] = useState(false);
+  const [modalName, setModalName] = useState('');
+  const [hiddenWidgetData, setHiddenWidgetData] = useState([]);
+  const [showTaskbar, setShowTaskbar] = useState(null);
+  const [showFilter, setShowFilter] = useState(false);
+  const [rights, setRights] = useState({});
+  const [isLoading, setIsLoading] = useState(false);
+  const [webTasksData, setWebTasksData] = useState([]);
+  const [selectedWidgetData, setSelectedWidgetData] = useState({});
+  const [overlayOpen, setOverlayOpen] = useState(false);
+  const [hasMore, setHasMore] = useState(true);
+  const [showActionModal, setShowActionModal] = useState(false);
+  const [basketPreference, setBasketPreference] = useState({});
+  const [taskData, setTaskData] = useState({});
+  const [basketData, setBasketData] = useState([]);
+  const [selectedLocation, setSelectedLocation] = useState({});
+  const [locations, setLocations] = useState([]);
+  const navigate = useNavigate();
+  const theme = useTheme();
+  const isDark = theme.palette.mode === 'dark';
+  const [columns, setColumns] = useState([{ field: 'index', label: '#', align: 'left' }]);
+  const [scrollToTop, setScrollToTop] = useState(false);
+  const [amountEarned, setAmountEarned] = useState(null);
+  const { user } = useSelector((state) => state.Authenticate);
+  const dispatch = useDispatch();
+  const implementation = GeneralUtil.getEnv();
+
+  const webtaskSaveActions = async (task) => {
+    await saveAction([task]);
+    await getWebTasksDetails(selectedWidgetData);
+  };
+
+  const loadInitialData = async () => {
+    try{
+      setIsLoading(true);
+      const { data: assignedFeatures } = await getAssignedFeatures('techo.dashboard.webtasks');
+      if (assignedFeatures) {
+        setRights(JSON.parse(assignedFeatures));
+      }
+      const { data: widgetData } = await getCount(implementation);
+      let currentBasketPreference = {};
+      if ((!GeneralUtil.isTecho || rights?.['view.manage.webtasks.retrievebasketpreference']) !== false) {
+        const { data: basketPreferenceData } = await retrieveBasketPreferenceByUserId({ userId: user?.id });
+        currentBasketPreference = basketPreferenceData || {};
+      }
+      if (currentBasketPreference) setBasketPreference(currentBasketPreference);
+      if (currentBasketPreference?.baskets?.length) {
+        setWidgetData(widgetData.filter((data) => !currentBasketPreference.baskets.includes(data.id)));
+        setHiddenWidgetData(
+          widgetData
+            .filter((data) => currentBasketPreference.baskets.includes(data.id))
+            .map((data) => ({
+              ...data,
+              colorCode: data.colorCode || defaultColors[Math.floor(Math.random() * defaultColors.length)],
+            }))
+        );
+      } else {
+        setWidgetData(widgetData);
+      }
+      setIsLoading(false);
+    } catch {
+      setIsLoading(false);
+    }
+  };
+  useEffect(() => {
+    loadInitialData();
+  }, []);
+
+  const handleHideWidget = async (item) => {
+    if (Object.keys(basketPreference).length === 0) {
+      basketPreference.baskets = [];
+      basketPreference.taskbar = 'show';
+    }
+    const updatedBasketPreference = { ...basketPreference, baskets: [...basketPreference.baskets, item.id] };
+    setBasketPreference(updatedBasketPreference);
+
+    await saveBasketPreferenceByUserId({ preference: JSON.stringify(updatedBasketPreference), userId: user?.id });
+    setHiddenWidgetData((prev) => [...prev, item]);
+    setWidgetData((prev) => {
+      // Filter out the item from widgetData by matching its id
+      return prev.filter((widgetItem) => widgetItem.id !== item.id);
+    });
+  };
+
+  const actions = (row) => {
+    return row.isActionRequired
+      ? [
+          (!GeneralUtil.isTecho || rights?.['view.manage.webtasks.getaction']) && {
+            label: '',
+            icon: <FontAwesomeIcon icon={faBars} size="lg" data-testid="webtaskslist-button-menu" />,
+            menuItems: [
+              (!GeneralUtil.isTecho || rights?.['create.manage.webtasks.saveaction']) && {
+                label: row?.url_name ? 'Fill the form' : row?.modal_name ? 'Perform Actions' : 'Actions',
+                onClick: () => {
+                  if (row?.url_name) {
+                    const formatToCamelCase = (str) => {
+                      return str?.replace(/-([a-z])/g, (_, char) => char.toUpperCase());
+                    };
+
+                    const match = row.url_name.match(/^(.*?)\((\{.*\})\)$/);
+
+                    if (!match) {
+                      navigate('notfound');
+                    }
+
+                    let baseStructure = match[1].replace(/\./g, '/');
+                    baseStructure = formatToCamelCase(baseStructure);
+
+                    try {
+                      const params = JSON.parse(match[2].replace(/'/g, '"'));
+
+                      const { id, queryParams, ...restParams } = params;
+
+                      const pathWithId = id ? `${baseStructure}/${id}` : baseStructure;
+
+                      let queryString = '';
+                      if (queryParams) {
+                        queryString = `queryParams=${encodeURIComponent(JSON.stringify(queryParams))}`;
+                      } else if (Object.keys(restParams).length > 0) {
+                        queryString = new URLSearchParams(restParams).toString();
+                      }
+
+                      const finalUrl = queryString ? `/${pathWithId}?${queryString}` : `/${pathWithId}`;
+                      const pathName = finalUrl.replace(/^\/?techo\//, 'medplat/');
+                      navigate(`/ui/${pathName}`);
+                    } catch (error) {
+                      console.error('Navigation Error:', error);
+                      navigate('notfound');
+                    }
+                  } else if (row?.modal_name) {
+                    setModalName(row?.modal_name);
+                    setOpen(true);
+                    setTaskData({
+                      ...basketData.find((data) => data.taskId === row.taskId),
+                      title: selectedWidgetData.name,
+                    });
+                  } else {
+                    setTaskData({
+                      ...basketData.find((data) => data.taskId === row.taskId),
+                      title: selectedWidgetData.name,
+                    });
+                    setShowActionModal(true);
+                  }
+                },
+              },
+            ].filter(Boolean), // Filter out null/false items
+          },
+        ]
+      : [];
+  };
+
+  const handleOverlayState = () => setOverlayOpen(!overlayOpen);
+
+  const getWebTasksDetails = async (item) => {
+    dispatch(setHeaderTitle(item.name));
+    setSelectedWidgetData(item);
+    const { id, isLocationBasedFilterRequired } = item;
+    setShowFilter(isLocationBasedFilterRequired);
+
+    const { data: basketDetail } = await getWebTasksBasketDetails(
+      { limit: 100, offset: 0, taskTypeId: id },
+      implementation
+    ).catch((error) => {
+      console.error('🚀 ~ getWebTasksDetails ~ error:', error);
+      showToast({ message: 'Unable to retrieve task details', type: 'error' });
+      setWebTasksData([]);
+      return null;
+    });
+
+    setHasMore(() => basketDetail.length && basketDetail.length === 100);
+    setBasketData(basketDetail);
+    setWebTasksData(
+      basketDetail.map((data, index) => {
+        const { details, taskId, ...rest } = data;
+        return { index: index + 1, ...details, taskId, ...rest };
+      })
+    );
+
+    const excludedColumns = ['modal_name', 'url_name', 'id', 'widgetMessage'];
+    const columnNames = Object.keys(basketDetail[0].details).filter((column) => !excludedColumns.includes(column));
+
+    const columns = columnNames.map((column) => {
+      return {
+        field: column,
+        label: column,
+        align: 'left',
+        render: (row) => (
+          <div className="w-48 h-full flex items-center h-full">
+            <div dangerouslySetInnerHTML={{ __html: row?.[column] }} />
+          </div>
+        ),
+      };
+    });
+
+    const showActions = basketDetail.some((data) => data.isActionRequired);
+    const finalColumns = [{ field: 'index', label: '#', align: 'left' }, ...columns];
+
+    if (showActions) {
+      finalColumns.push({
+        field: 'Actions',
+        label: 'Actions',
+        align: 'left',
+      });
+    }
+
+    setColumns(finalColumns);
+    setScrollToTop(true);
+  };
+
+  const processAndDownloadExcel = async (data, locationId) => {
+    try {
+      const indexedData = data.map((item, index) => ({ '#': index + 1, ...item }));
+
+      const now = new Date();
+      const month = now.getMonth() + 1;
+      const fileName = `${selectedWidgetData.name}-${now.getDate()}/${month} ${now.getHours()}:${now.getMinutes()} ${now.getFullYear().toString().slice(-2)}`;
+
+      const worksheet = XLSX.utils.json_to_sheet(indexedData);
+
+      const headerStyle = {
+        font: { bold: true },
+        alignment: { horizontal: 'center' },
+      };
+
+      if (indexedData.length > 0) {
+        const range = XLSX.utils.decode_range(worksheet['!ref']);
+
+        for (let C = range.s.c; C <= range.e.c; ++C) {
+          const cell = worksheet[XLSX.utils.encode_cell({ r: 0, c: C })];
+          if (!cell) continue;
+          cell.s = headerStyle;
+        }
+      }
+
+      const workbook = XLSX.utils.book_new();
+      XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
+
+      const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
+
+      const blob = new Blob([excelBuffer], {
+        type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+      });
+      const blobSizeInMB = (blob.size / (1024 * 1024)).toFixed(2);
+
+      saveAs(blob, `${fileName}.xlsx`);
+
+      trackEvent('file_download', {
+        file_type: 'excel',
+        file_name: `${fileName}.xlsx`,
+        file_size: `${blobSizeInMB} MB`,
+        filter_parameters: {
+          location_id: locationId || null,
+          taskTypeId: selectedWidgetData.id,
+        },
+        download_status: 'success',
+      });
+    } catch (error) {
+      console.error('Error generating Excel file:', error);
+      showToast({ message: 'Error generating Excel file', type: 'error' });
+    }
+  };
+
+  const downloadExcel = async () => {
+    const selectedLocationId = selectedLocation?.finalSelected?.optionSelected?.id;
+    const downloadObject = {
+      limit: null,
+      offset: 0,
+      taskTypeId: selectedWidgetData.id,
+    };
+    if (selectedLocationId) downloadObject['locationId'] = selectedLocationId;
+
+    const { data: downloadWebtasksList } = await getWebTasksBasketDetails(downloadObject, implementation);
+
+    let taskDetails = [];
+    if (downloadWebtasksList && downloadWebtasksList.length > 0) {
+      taskDetails = downloadWebtasksList.map((task) => {
+        const details = { ...task.details };
+
+        // Convert `null` values to empty strings and boolean values to "Yes" or "No"
+        Object.keys(details).forEach((key) => {
+          if (details[key] === null) {
+            details[key] = '';
+          } else if (typeof details[key] === 'boolean') {
+            details[key] = details[key] ? 'Yes' : 'No';
+          }
+        });
+
+        return details;
+      });
+
+      // Call the function to process data and download the Excel file
+    }
+    processAndDownloadExcel(taskDetails, selectedLocationId);
+  };
+  const webTasksDataRef = useRef(null);
+  useEffect(() => {
+    webTasksDataRef.current = webTasksData;
+  }, [webTasksData]);
+  const loadMore = async (selectedWidgetData) => {
+    if (webTasksDataRef?.current?.length >= 100) {
+      const { data: basketDetail } = await getWebTasksBasketDetails(
+        {
+          limit: 100,
+          offset: webTasksDataRef?.current?.length,
+          taskTypeId: selectedWidgetData.id,
+        },
+        implementation
+      );
+      if (basketDetail) {
+        setHasMore(() => basketDetail.length && basketDetail.length === 100);
+        setWebTasksData([
+          ...webTasksDataRef.current,
+          ...basketDetail.map((data, index) => {
+            const { details, taskId, ...rest } = data;
+            return { index: webTasksDataRef?.current?.length + index + 1, ...details, taskId, ...rest };
+            // return data.details;
+          }),
+        ]);
+      }
+    }
+  };
+
+  const getUnhideWidgetPermission = () => {
+    return (!GeneralUtil.isTecho || rights?.['create.manage.webtasks.savebasketpreference']) ? true : false;
+  };
+
+  const getAmountEarned = async () => {
+    try {
+      const hasChesWidget = widgetData.some((widget) => widget.code === 'TOTAL_AMOUNT_EARNED_BY_CHES');
+
+      if (hasChesWidget) {
+        const res = await execute({
+          code: 'TOTAL_AMOUNT_EARNED_BY_CHES_QUERY',
+          paramerter: {
+            locationId: null,
+          },
+        });
+
+        if (res?.data) {
+          setAmountEarned(res.data?.result?.[0]['Grand Total Amount'] || null);
+        }
+      }
+    } catch (error) {
+      console.error('Error in getting total amount earned:', error);
+      // showToast({ message: 'Error generating Excel file', type: 'error' });
+    }
+  };
+  useEffect(() => {
+    getAmountEarned();
+  }, [widgetData]);
+
+  const handleUnhideWidget = async (item) => {
+    const updatedBaskets = basketPreference.baskets.filter((basketId) => basketId !== item.id);
+    const updatedBasketPreference = { ...basketPreference, baskets: updatedBaskets };
+
+    setBasketPreference(updatedBasketPreference);
+    await saveBasketPreferenceByUserId({ preference: JSON.stringify(updatedBasketPreference), userId: user?.id });
+
+    setHiddenWidgetData((prev) => {
+      return prev.filter((widgetItem) => widgetItem.id !== item.id);
+    });
+    setWidgetData((prev) => [...prev, item]);
+  };
+  const trackEvent = useTrackEvent();
+
+  const handleHideTaskbar = () => {
+    trackEvent('button_click', {
+      button_name: 'hide taskbar',
+      button_type: 'navigate',
+      button_id: 'taskbar-hide-button',
+    });
+
+    setShowTaskbar(null);
+  };
+
+  const closeActionBar = async (reload) => {
+    setShowActionModal(false);
+    if (reload) loadInitialData();
+  };
+
+  const hiddenWidgetsTotal = hiddenWidgetData.reduce((acc, item) => acc + (item.count || 0), 0);
+  const sortedWidgets = [...widgetData].sort((a, b) => {
+    if (a.orderNo === null) return 1;
+    if (b.orderNo === null) return -1;
+    return a.orderNo - b.orderNo;
+  });
+  const accentColor = selectedWidgetData?.colorCode || (isDark ? '#4da8da' : '#1c6fb7');
+  const shellBorder = theme.palette.custom?.shellBorder || alpha('#0f172a', 0.12);
+  const sectionSurface = {
+    borderRadius: '24px',
+    border: `1px solid ${shellBorder}`,
+    background: isDark ? theme.palette.background.paper : 'rgba(255,255,255,0.84)',
+    boxShadow: isDark ? '0 18px 36px rgba(0,0,0,0.3)' : '0 14px 30px rgba(148, 163, 184, 0.12)',
+    backdropFilter: 'blur(14px)',
+  };
+  const mutedTextColor = isDark ? alpha('#fff', 0.62) : '#6d8298';
+
+  return GeneralUtil.isTecho && !isLoading && !rights?.["view.manage.webtasks"] ? (
+    <Box className="flex justify-center items-center w-full h-[80vh]">
+      <Card
+        className="h-80 w-150 flex justify-center items-center"
+      >
+        <Typography variant="h5" className="text-customBlue">
+          You dont have permission to view Web Tasks
+        </Typography>
+      </Card>
+    </Box>
+  ) : (
+    <Grid
+      container
+      spacing={2}
+      className="w-full m-0"
+      sx={{
+        position: 'relative',
+        px: { xs: 0.25, md: 0.75 },
+        pb: 2.5,
+      }}
+    >
+      {modalName === 'health_workers_incorrect_details_modal' && (
+        <HealthWorkerIncorrectDetailsModal
+          open={open}
+          onClose={() => {
+            setOpen(false);
+          }}
+          task={taskData}
+          onSave={async (task) => await webtaskSaveActions(task)}
+        />
+      )}
+      {modalName === 'maternal_death_verification_modal_mo' && (
+        <MoMaternalDeathVerifcationModal
+          open={open}
+          onClose={() => {
+            setOpen(false);
+          }}
+          task={taskData}
+          onSave={async (task) => await webtaskSaveActions(task)}
+        />
+      )}
+      {modalName === 'cmtc_probable_confirmation_modal' && (
+        <MoVerficationForChildScreeningMoadal
+          open={open}
+          onClose={() => {
+            setOpen(false);
+          }}
+          task={taskData}
+          onSave={async (task) => await webtaskSaveActions(task)}
+        />
+      )}
+      {modalName === 'asha_data_quality_verification_modal' && (
+        <AshaScreenedMembersModal
+          open={open}
+          onClose={() => {
+            setOpen(false);
+          }}
+          task={taskData}
+          onSave={async () => await getWebTasksDetails(selectedWidgetData)}
+        />
+      )}
+      <Suspense>
+        {showActionModal && <ActionModal open={showActionModal} onClose={closeActionBar} selectedTask={taskData} />}
+      </Suspense>
+
+      <Grid size={12}>
+        <Box
+          sx={{
+            ...sectionSurface,
+            position: 'relative',
+            overflow: 'hidden',
+            mt: { xs: 0.5, md: 0.75 },
+            p: { xs: 1.75, md: 2.1 },
+            '&::before': {
+              content: '""',
+              position: 'absolute',
+              inset: 'auto auto -78px -62px',
+              width: 150,
+              height: 150,
+              borderRadius: '999px',
+              background: alpha(accentColor, isDark ? 0.18 : 0.12),
+              filter: 'blur(14px)',
+            },
+            '&::after': {
+              content: '""',
+              position: 'absolute',
+              top: -86,
+              right: -22,
+              width: 130,
+              height: 130,
+              borderRadius: '999px',
+              background: alpha('#7dd3fc', isDark ? 0.08 : 0.07),
+              filter: 'blur(16px)',
+            },
+          }}
+        >
+          <Box
+            sx={{
+              position: 'relative',
+              zIndex: 1,
+              display: 'flex',
+              alignItems: { xs: 'flex-start', md: 'center' },
+              justifyContent: 'space-between',
+              gap: 2,
+              flexWrap: 'wrap',
+            }}
+          >
+            <Box sx={{ minWidth: 0 }}>
+              <Typography
+                variant="h5"
+                sx={{ fontWeight: 800, letterSpacing: '-0.03em', color: theme.palette.text.primary }}
+              >
+                Dashboard
+              </Typography>
+              <Typography
+                sx={{
+                  mt: 0.45,
+                  maxWidth: 560,
+                  color: mutedTextColor,
+                  lineHeight: 1.5,
+                }}
+              >
+                Pick a basket and the related tasks appear here. The page stays intentionally light so the work is easy
+                to scan.
+              </Typography>
+            </Box>
+            <Box className="flex flex-wrap gap-2" sx={{ alignItems: 'center' }}>
+              <Box
+                sx={{
+                  px: 1.25,
+                  py: 0.65,
+                  borderRadius: '999px',
+                  background: isDark ? alpha('#fff', 0.08) : alpha('#0f172a', 0.05),
+                  color: isDark ? alpha('#fff', 0.86) : '#38506c',
+                  fontSize: '0.78rem',
+                  fontWeight: 700,
+                }}
+              >
+                {widgetData.length} baskets
+              </Box>
+              {!GeneralUtil.isBahaar && (
+                <Box
+                  sx={{
+                    px: 1.25,
+                    py: 0.65,
+                    borderRadius: '999px',
+                    background: alpha(accentColor, isDark ? 0.18 : 0.12),
+                    color: isDark ? '#dbeafe' : accentColor,
+                    fontSize: '0.78rem',
+                    fontWeight: 700,
+                  }}
+                >
+                  {hiddenWidgetData.length} hidden
+                </Box>
+              )}
+              <Box
+                sx={{
+                  px: 1.25,
+                  py: 0.65,
+                  borderRadius: '999px',
+                  background: isDark ? alpha('#fff', 0.08) : alpha('#ffffff', 0.78),
+                  color: isDark ? '#e2e8f0' : '#38506c',
+                  fontSize: '0.78rem',
+                  fontWeight: 700,
+                  maxWidth: { xs: '100%', sm: 240 },
+                  overflow: 'hidden',
+                  textOverflow: 'ellipsis',
+                  whiteSpace: 'nowrap',
+                }}
+              >
+                {selectedWidgetData?.name ? selectedWidgetData.name : 'No basket selected'}
+              </Box>
+            </Box>
+          </Box>
+        </Box>
+      </Grid>
+
+      <Grid size={{ xs: 12, lg: GeneralUtil.isBahaar ? 12 : 9 }}>
+        <Box
+          sx={{
+            ...sectionSurface,
+            p: { xs: 1.75, md: 2.25 },
+          }}
+        >
+          <Box className="flex items-start justify-between gap-4 flex-wrap">
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 3 }}>
+              <Box>
+                <Typography variant="h6" sx={{ fontWeight: 800, color: theme.palette.text.primary }}>
+                  Workflow baskets
+                </Typography>
+                <Typography sx={{ mt: 0.4, color: mutedTextColor }}>Select a basket to load its task list.</Typography>
+              </Box>
+              {amountEarned && (
+                <Chip
+                  label={
+                    <span style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+                      <span style={{ fontWeight: 900 }}>Total Earnings:</span>
+                      <span style={{ fontWeight: 600, letterSpacing: '0.5px' }}>₹ {amountEarned}</span>
+                    </span>
+                  }
+                  sx={{
+                    fontSize: '0.85rem',
+                    px: 0.5,
+                    py: 2,
+                    borderRadius: '12px',
+                    backgroundColor: isDark ? alpha('#10b981', 0.15) : alpha('#10b981', 0.1),
+                    color: isDark ? '#34d399' : '#059669',
+                    border: '1px solid',
+                    borderColor: isDark ? alpha('#10b981', 0.3) : alpha('#10b981', 0.4),
+                    boxShadow: '0 2px 8px rgba(16, 185, 129, 0.15)',
+                  }}
+                />
+              )}
+            </Box>
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+              <Box
+                sx={{
+                  px: 1.3,
+                  py: 0.65,
+                  borderRadius: '999px',
+                  background: isDark ? alpha('#fff', 0.08) : alpha('#0f172a', 0.05),
+                  color: isDark ? alpha('#fff', 0.82) : '#38506c',
+                  fontSize: '0.78rem',
+                  fontWeight: 700,
+                }}
+              >
+                {sortedWidgets.length} available
+              </Box>
+              {GeneralUtil.isBahaar && (
+                <IconButton
+                  onClick={(e) => setShowTaskbar(e.currentTarget)}
+                  sx={{
+                    width: 34,
+                    height: 34,
+                    background: isDark ? alpha('#fff', 0.08) : alpha(accentColor, 0.1),
+                  }}
+                  data-testid="bahaar-manage-tray-button"
+                >
+                  <FontAwesomeIcon icon={faEllipsisVertical} className={isDark ? 'text-white' : 'text-slate-700'} />
+                </IconButton>
+              )}
+            </Box>
+          </Box>
+
+          <Grid container spacing={1.5} className="mt-2">
+            {sortedWidgets.map((item) => {
+              item.colorCode = item.colorCode || defaultColors[Math.floor(Math.random() * defaultColors.length)];
+              return (
+                <Suspense key={item.id}>
+                  <Grid item size={{ xs: 12, sm: 6, md: 4, xl: 3 }}>
+                    <WidgetCard
+                      widgetData={item}
+                      hidden={false}
+                      isSelected={item.id === selectedWidgetData?.id}
+                      onClick={() => getWebTasksDetails(item)}
+                      onArrowClick={() => (handleHideWidget(item))}
+                      showIcon = {(!GeneralUtil.isTecho || rights?.['create.manage.webtasks.savebasketpreference'])? true: false}
+                      dataTestId="Dashboard-Widget-Card"
+                    />
+                  </Grid>
+                </Suspense>
+              );
+            })}
+          </Grid>
+        </Box>
+      </Grid>
+
+      {!GeneralUtil.isBahaar && (
+        <Grid size={{ xs: 12, lg: 3 }}>
+          <Card
+            sx={{
+              ...sectionSurface,
+              borderRadius: '24px',
+              overflow: 'hidden',
+              background: isDark
+                ? theme.palette.background.paper
+                : 'linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(246,249,255,0.98) 100%)',
+            }}
+            data-testid="taskbar-widget-card"
+            onClick={(e) => setShowTaskbar(e.currentTarget)}
+          >
+            <Box sx={{ p: 2 }}>
+              <Box className="flex items-start justify-between gap-3">
+                <Box>
+                  <Typography
+                    sx={{ fontSize: '0.82rem', fontWeight: 800, color: isDark ? alpha('#fff', 0.7) : '#60768f' }}
+                  >
+                    Hidden basket tray
+                  </Typography>
+                  <Typography
+                    data-testid="dashboard-hidden-count"
+                    sx={{ mt: 0.8, fontSize: '1.75rem', fontWeight: 800, color: theme.palette.text.primary }}
+                  >
+                    {hiddenWidgetsTotal}
+                  </Typography>
+                </Box>
+                <Box
+                  sx={{
+                    px: 1.1,
+                    py: 0.55,
+                    borderRadius: '999px',
+                    background: isDark ? alpha('#fff', 0.08) : alpha(accentColor, 0.08),
+                    color: isDark ? alpha('#fff', 0.84) : '#38506c',
+                    fontSize: '0.72rem',
+                    fontWeight: 700,
+                  }}
+                >
+                  {hiddenWidgetData.length} items
+                </Box>
+              </Box>
+              <Typography sx={{ mt: 0.5, color: mutedTextColor, lineHeight: 1.55 }}>
+                Hidden baskets stay here until you need them again.
+              </Typography>
+              <Box className="flex flex-wrap gap-2 mt-3">
+                {hiddenWidgetData.slice(0, 2).map((item) => (
+                  <Box
+                    key={item.id}
+                    sx={{
+                      px: 1.2,
+                      py: 0.6,
+                      borderRadius: '999px',
+                      background: isDark ? alpha('#fff', 0.08) : alpha(accentColor, 0.08),
+                      color: isDark ? alpha('#fff', 0.86) : '#38506c',
+                      fontSize: '0.74rem',
+                      maxWidth: '100%',
+                    }}
+                  >
+                    {item.name}
+                  </Box>
+                ))}
+                {hiddenWidgetData.length > 2 && (
+                  <Box
+                    sx={{
+                      px: 1.2,
+                      py: 0.6,
+                      borderRadius: '999px',
+                      background: isDark ? alpha('#fff', 0.08) : alpha(accentColor, 0.08),
+                      color: isDark ? alpha('#fff', 0.86) : '#38506c',
+                      fontSize: '0.74rem',
+                    }}
+                  >
+                    +{hiddenWidgetData.length - 2} more
+                  </Box>
+                )}
+                {hiddenWidgetData.length === 0 && (
+                  <Box
+                    sx={{
+                      px: 1.2,
+                      py: 0.6,
+                      borderRadius: '999px',
+                      background: isDark ? alpha('#fff', 0.06) : alpha('#0f172a', 0.05),
+                      color: isDark ? alpha('#fff', 0.62) : '#72859c',
+                      fontSize: '0.74rem',
+                    }}
+                  >
+                    Nothing hidden right now
+                  </Box>
+                )}
+              </Box>
+            </Box>
+            <Box
+              sx={{
+                px: 2,
+                py: 1.05,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                background: isDark ? alpha('#fff', 0.05) : alpha(accentColor, 0.06),
+                borderTop: `1px solid ${shellBorder}`,
+              }}
+            >
+              <Typography sx={{ fontWeight: 700, color: theme.palette.text.primary }}>Manage tray</Typography>
+              <IconButton
+                sx={{
+                  width: 34,
+                  height: 34,
+                  background: isDark ? alpha('#fff', 0.08) : alpha(accentColor, 0.1),
+                }}
+              >
+                <FontAwesomeIcon icon={faEllipsisVertical} className={isDark ? 'text-white' : 'text-slate-700'} />
+              </IconButton>
+            </Box>
+          </Card>
+
+          <Popover
+            id={showTaskbar ? 'simple-popover' : undefined}
+            open={!!showTaskbar}
+            anchorEl={showTaskbar}
+            onClose={handleHideTaskbar}
+            anchorOrigin={{
+              vertical: 'bottom',
+              horizontal: 'right',
+            }}
+            transformOrigin={{
+              vertical: 'top',
+              horizontal: 'right',
+            }}
+            slotProps={{
+              paper: {
+                style: {
+                  width: '450px',
+                  borderRadius: '24px',
+                  overflow: 'hidden',
+                },
+              },
+            }}
+          >
+            <Suspense>
+              <Taskbar
+                show={showTaskbar}
+                hiddenWidgets={hiddenWidgetData}
+                handleHideTaskbar={handleHideTaskbar}
+                handleUnhideWidget={getUnhideWidgetPermission()? handleUnhideWidget : null}
+                onWidgetClick={getWebTasksDetails}
+              />
+            </Suspense>
+          </Popover>
+        </Grid>
+      )}
+
+      {GeneralUtil.isBahaar && (
+        <Popover
+          id={showTaskbar ? 'bahaar-popover' : undefined}
+          open={!!showTaskbar}
+          anchorEl={showTaskbar}
+          onClose={handleHideTaskbar}
+          anchorOrigin={{
+            vertical: 'bottom',
+            horizontal: 'right',
+          }}
+          transformOrigin={{
+            vertical: 'top',
+            horizontal: 'right',
+          }}
+          slotProps={{
+            paper: {
+              style: {
+                width: '450px',
+                borderRadius: '24px',
+                overflow: 'hidden',
+              },
+            },
+          }}
+        >
+          <Suspense>
+            <Taskbar
+              show={showTaskbar}
+              hiddenWidgets={hiddenWidgetData}
+              handleHideTaskbar={handleHideTaskbar}
+              handleUnhideWidget={getUnhideWidgetPermission()? handleUnhideWidget : null}
+              onWidgetClick={getWebTasksDetails}
+            />
+          </Suspense>
+        </Popover>
+      )}
+
+      <Grid size={12}>
+        <Box
+          sx={{
+            ...sectionSurface,
+            p: { xs: 1.75, md: 2.25 },
+          }}
+        >
+          <Box className="flex items-start justify-between gap-4 flex-wrap">
+            <Box>
+              <Typography variant="h6" sx={{ fontWeight: 800, color: theme.palette.text.primary }}>
+                {selectedWidgetData?.name || 'Task workspace'}
+              </Typography>
+              <Typography sx={{ mt: 0.4, color: mutedTextColor }}>
+                Review tasks, act on pending work, and export when needed.
+              </Typography>
+            </Box>
+            <Box className="flex items-center gap-3 flex-wrap">
+              {showFilter && (
+                <button
+                  onClick={handleOverlayState}
+                  className="cursor-pointer px-4 py-2 rounded-xl transition-all text-sm font-bold"
+                  style={{
+                    background: isDark ? alpha('#fff', 0.08) : alpha(accentColor, 0.08),
+                    color: isDark ? '#f8fafc' : accentColor,
+                    border: `1px solid ${alpha(accentColor, 0.22)}`,
+                  }}
+                >
+                  Filters
+                </button>
+              )}
+              {webTasksData.length > 0 && (
+                <button
+                  onClick={downloadExcel}
+                  className="cursor-pointer px-4 py-2 rounded-xl transition-all flex items-center gap-2 text-sm font-black"
+                  style={{
+                    background: `linear-gradient(135deg, ${accentColor} 0%, ${isDark ? '#245c89' : '#0f4f8a'} 100%)`,
+                    color: '#ffffff',
+                    boxShadow: isDark ? '0 14px 28px rgba(2, 8, 23, 0.3)' : '0 14px 30px rgba(28, 111, 183, 0.22)',
+                  }}
+                  data-testid="dashboard-webtaskslist-icon-pdf"
+                >
+                  <FontAwesomeIcon icon={faFileExcel} className="mr-1" />
+                  Export Excel
+                </button>
+              )}
+            </Box>
+          </Box>
+
+          {webTasksData?.[0]?.widgetMessage && (
+            <Box
+              sx={{
+                mt: 2,
+                px: 1.35,
+                py: 1.1,
+                borderRadius: '16px',
+                background: isDark ? alpha('#fff', 0.06) : alpha(accentColor, 0.06),
+                color: theme.palette.text.primary,
+              }}
+            >
+              <div
+                dangerouslySetInnerHTML={{
+                  __html: webTasksData?.[0]?.widgetMessage,
+                }}
+              />
+            </Box>
+          )}
+
+          {webTasksData.length > 0 ? (
+            <Box sx={{ mt: 2 }}>
+              <CustomizedTable
+                columns={columns}
+                tableData={webTasksData}
+                actions={actions}
+                paginationConfig={{
+                  pagination: true,
+                  paginationType: 'infinite-scroll',
+                  hasMore,
+                  loadMore: () => loadMore(selectedWidgetData),
+                }}
+                styleConfig={{ tableStyle: { maxHeight: 80 } }}
+                scrollToTop={scrollToTop}
+                setScrollToTop={setScrollToTop}
+                dataTestId="widgetlist-table-customized"
+              />
+            </Box>
+          ) : (
+            <Box
+              sx={{
+                mt: 2,
+                borderRadius: '20px',
+                p: { xs: 2.25, md: 3.25 },
+                textAlign: 'center',
+                border: `1px dashed ${alpha(accentColor, 0.28)}`,
+                background: isDark ? alpha('#fff', 0.03) : alpha(accentColor, 0.04),
+              }}
+            >
+              <Typography sx={{ fontSize: '1.05rem', fontWeight: 700, color: theme.palette.text.primary }}>
+                Select a basket to open the task table
+              </Typography>
+              <Typography sx={{ mt: 0.65, color: mutedTextColor }}>
+                Task rows, filters, actions, and export controls will appear here.
+              </Typography>
+            </Box>
+          )}
+        </Box>
+      </Grid>
+
+      {showFilter && (
+        <SideOverlay
+          title="Filter"
+          showSideBarTitle={false}
+          FormBody={WebtasksFilterForm}
+          handleOverlayState={handleOverlayState}
+          overlayOpen={overlayOpen}
+          dataTestId="dashboard-webtasks-overlay-filter"
+          formProps={{
+            setWebTasksData,
+            selectedWidgetData,
+            locations,
+            setLocations,
+            selectedLocation,
+            setSelectedLocation,
+          }}
+        />
+      )}
+
+      <Grid size={12}>
+        <Box
+          sx={{
+            ...sectionSurface,
+            px: { xs: 1, md: 1.5 },
+            py: { xs: 1.1, md: 1.35 },
+            background: isDark ? theme.palette.background.paper : 'rgba(255,255,255,0.72)',
+            boxShadow: 'none',
+          }}
+        >
+          <Box className="flex items-center justify-between gap-3 flex-wrap px-3 pt-1">
+            <Box>
+              <Typography sx={{ fontWeight: 800, color: theme.palette.text.primary }}>Quick links</Typography>
+              <Typography sx={{ mt: 0.35, color: mutedTextColor }}>Your frequent destinations, kept close.</Typography>
+            </Box>
+          </Box>
+          <QuickLinks />
+        </Box>
+      </Grid>
+    </Grid>
+  );
+};
+
+export default Dashboard;