@argusoft/medplat-app-shell 1.0.6 → 1.0.7

package/package.json

@@ -1,27 +1,113 @@
 {
   "name": "@argusoft/medplat-app-shell",
-  "version": "1.0.6",
-  "description": "MEDplat application shell — providers, layout, routing, error boundaries, generic utilities, store.",
-  "license": "MIT",
-  "type": "module",
+  "version": "1.0.7",
+  "proxy": "http://localhost:3000",
+  "homepage": "/ui",
   "exports": {
-    ".": "./dist/index.js",
-    "./styles": "./dist/medplat-app-shell.css",
-    "./assets/*": "./src/assets/*"
+    "./src": "./src",
+    "./src/*": "./src/*"
   },
   "files": [
-    "dist",
-    "src/assets"
-  ],
-  "sideEffects": [
-    "*.css",
-    "*.scss"
+    "src/"
   ],
+  "dependencies": {
+    "@codemirror/autocomplete": "^6.18.6",
+    "@codemirror/state": "^6.5.2",
+    "@codemirror/commands": "^6.8.0",
+    "@ckeditor/ckeditor5-react": "^9.3.0",
+    "@codemirror/lang-sql": "^6.8.0",
+    "@codemirror/view": "^6.36.4",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^8.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@dnd-kit/modifiers": "^7.0.0",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@ffmpeg/core": "^0.12.6",
+    "@ffmpeg/ffmpeg": "^0.12.15",
+    "@ffmpeg/util": "^0.12.2",
+    "@fontsource/mulish": "^5.2.5",
+    "@fortawesome/fontawesome-svg-core": "^6.7.2",
+    "@fortawesome/free-solid-svg-icons": "^6.7.2",
+    "@fortawesome/react-fontawesome": "^0.2.2",
+    "@fullcalendar/core": "^6.1.17",
+    "@fullcalendar/daygrid": "^6.1.17",
+    "@fullcalendar/interaction": "^6.1.17",
+    "@fullcalendar/list": "^6.1.17",
+    "@fullcalendar/react": "^6.1.17",
+    "@fullcalendar/timegrid": "^6.1.17",
+    "@hookform/resolvers": "^3.9.0",
+    "@monaco-editor/react": "^4.7.0",
+    "@mui/icons-material": "^6.4.8",
+    "@mui/material": "^6.4.8",
+    "@mui/system": "^6.1.1",
+    "@reduxjs/toolkit": "^2.2.6",
+    "@stomp/stompjs": "^7.2.1",
+    "@tabler/icons-react": "^3.17.0",
+    "@tanstack/react-query": "^5.59.0",
+    "@uiw/react-codemirror": "^4.23.10",
+    "crypto-js": "^4.2.0",
+    "classnames": "^2.5.1",
+    "axios": "^1.8.3",
+    "ckeditor5": "^45.2.0",
+    "date-fns": "^4.1.0",
+    "dayjs": "^1.11.11",
+    "file-saver": "^2.0.5",
+    "file-type": "^19.6.0",
+    "firebase": "^11.9.1",
+    "glob": "^9.2.1",
+    "framer-motion": "^12.23.11",
+    "html2pdf.js": "^0.10.3",
+    "i18next": "^24.1.0",
+    "konva": "^8.3.13",
+    "leaflet": "^1.9.4",
+    "moment": "^2.30.1",
+    "monaco-editor": "^0.55.1",
+    "pdfmake": "^0.2.18",
+    "print-js": "^1.6.0",
+    "prop-types": "15.8.1",
+    "react": "^18.3.1",
+    "react-color": "^2.19.3",
+    "react-date-range": "^2.0.1",
+    "react-dom": "^18.3.1",
+    "react-grid-layout": "^1.5.0",
+    "react-hook-form": "^7.62.0",
+    "react-i18next": "^15.2.0",
+    "react-infinite-scroller": "^1.2.6",
+    "react-joyride": "^2.9.3",
+    "react-konva": "^18.2.10",
+    "react-leaflet": "^4.2.1",
+    "react-media-recorder": "^1.7.1",
+    "react-password-strength-bar": "^0.4.1",
+    "react-player": "^2.16.0",
+    "react-qr-code": "^2.0.18",
+    "react-redux": "^9.1.2",
+    "react-responsive-carousel": "^3.2.23",
+    "react-router": "^6.25.0",
+    "react-router-dom": "^6.25.0",
+    "react-select": "^5.10.1",
+    "react-simple-maps": "^3.0.0",
+    "react-toastify": "^10.0.5",
+    "react-virtuoso": "^4.17.0",
+    "recharts": "^2.15.1",
+    "redux": "^5.0.1",
+    "react-transition-group": "^4.4.5",
+    "sockjs-client": "^1.6.1",
+    "sonar-scanner": "^3.1.0",
+    "topojson-client": "^3.1.0",
+    "useranalytics": "^1.0.539",
+    "use-image": "^1.1.1",
+    "uuid": "^10.0.0",
+    "web-vitals": "^2.1.0",
+    "xlsx-js-style": "^1.2.0",
+    "yup": "^1.4.0",
+    "lodash": "^4.17.21",
+    "dompurify": "^3.3.1",
+    "react-zoom-pan-pinch": "3.7.0"
+  },
   "scripts": {
-    "generate-exports": "node generate-exports.js",
-    "generate-exports:watch": "node generate-exports.js --watch",
-    "prebuild": "node generate-exports.js",
-    "build": "vite build",
+    "start": "vite",
+    "build": "node generate-version.js && vite build",
     "test": "jest",
     "lint": "eslint .",
     "prettier": "prettier --write .",
@@ -29,108 +115,23 @@
     "docs:markdown": "npx documentation build src/**/*.js --format md > docs.md",
     "docs:generate": "node generate-docs.cjs"
   },
-  "peerDependencies": {
-    "@ckeditor/ckeditor5-react": "^9",
-    "@codemirror/autocomplete": "^6",
-    "@codemirror/commands": "^6",
-    "@codemirror/lang-sql": "^6",
-    "@codemirror/state": "^6",
-    "@codemirror/view": "^6",
-    "@dnd-kit/core": "^6",
-    "@dnd-kit/modifiers": "^7",
-    "@dnd-kit/sortable": "^8",
-    "@dnd-kit/utilities": "^3",
-    "@emotion/react": "^11",
-    "@emotion/styled": "^11",
-    "@ffmpeg/core": "^0.12",
-    "@ffmpeg/ffmpeg": "^0.12",
-    "@ffmpeg/util": "^0.12",
-    "@fontsource/mulish": "^5",
-    "@fortawesome/fontawesome-svg-core": "^6",
-    "@fortawesome/free-solid-svg-icons": "^6",
-    "@fortawesome/react-fontawesome": "^0.2",
-    "@fullcalendar/core": "^6",
-    "@fullcalendar/daygrid": "^6",
-    "@fullcalendar/interaction": "^6",
-    "@fullcalendar/list": "^6",
-    "@fullcalendar/react": "^6",
-    "@fullcalendar/timegrid": "^6",
-    "@hookform/resolvers": "^3",
-    "@monaco-editor/react": "^4",
-    "@mui/icons-material": "^6",
-    "@mui/material": "^6",
-    "@mui/system": "^6",
-    "@mui/x-date-pickers": "^7",
-    "@reduxjs/toolkit": "^2",
-    "@stomp/stompjs": "^7",
-    "@tabler/icons-react": "^3",
-    "@tanstack/react-query": "^5",
-    "@uiw/react-codemirror": "^4",
-    "axios": "^1",
-    "ckeditor5": "^45",
-    "classnames": "^2",
-    "crypto-js": "^4",
-    "date-fns": "^4",
-    "dayjs": "^1",
-    "dompurify": "^3",
-    "file-saver": "^2",
-    "file-type": "^19",
-    "firebase": "^11",
-    "framer-motion": "^12",
-    "glob": "^9",
-    "html2pdf.js": "^0.10",
-    "i18next": "^24",
-    "konva": "^8",
-    "leaflet": "^1",
-    "lodash": "^4",
-    "moment": "^2",
-    "monaco-editor": "^0.55",
-    "pdfmake": "^0.2",
-    "print-js": "^1",
-    "prop-types": "^15",
-    "react": "^18",
-    "react-color": "^2",
-    "react-date-range": "^2",
-    "react-dom": "^18",
-    "react-grid-layout": "^1",
-    "react-hook-form": "^7",
-    "react-i18next": "^15",
-    "react-infinite-scroller": "^1",
-    "react-joyride": "^2",
-    "react-konva": "^18",
-    "react-leaflet": "^4",
-    "react-media-recorder": "^1",
-    "react-password-strength-bar": "^0.4",
-    "react-player": "^2",
-    "react-qr-code": "^2",
-    "react-redux": "^9",
-    "react-responsive-carousel": "^3",
-    "react-router": "^6",
-    "react-router-dom": "^6",
-    "react-select": "^5",
-    "react-simple-maps": "^3",
-    "react-toastify": "^10",
-    "react-transition-group": "^4",
-    "react-virtuoso": "^4",
-    "react-zoom-pan-pinch": "^3",
-    "recharts": "^2",
-    "redux": "^5",
-    "sockjs-client": "^1",
-    "topojson-client": "^3",
-    "use-image": "^1",
-    "useranalytics": "^1",
-    "uuid": "^10",
-    "web-vitals": "^2",
-    "xlsx-js-style": "^1",
-    "yup": "^1"
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
   },
-  "peerDependenciesMeta": {
-    "react": {
-      "optional": false
-    },
-    "react-dom": {
-      "optional": false
-    }
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",
@@ -147,6 +148,7 @@
     "babel-plugin-transform-vite-meta-env": "^1.0.3",
     "clean-jsdoc-theme": "^4.3.0",
     "documentation": "^14.0.3",
+    "dotenv": "^16.4.5",
     "eslint": "^9.11.1",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-react": "^7.37.0",
@@ -155,34 +157,13 @@
     "jest-environment-jsdom": "^29.7.0",
     "jest-transform-stub": "^2.0.0",
     "jsdoc": "^4.0.3",
-    "postcss": "^8.4.47",
+    "postcss": "^8.4.49",
     "prettier": "3.3.3",
     "redux-mock-store": "^1.5.4",
     "sass": "^1.79.4",
     "tailwindcss": "^4.0.14",
     "vite": "^6.2.0",
-    "vite-plugin-lib-inject-css": "^2.2.2"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
+    "vite-plugin-pwa": "^1.0.2"
   },
   "jest": {
     "testEnvironment": "jest-environment-jsdom",
@@ -205,5 +186,22 @@
     "transformIgnorePatterns": [
       "/node_modules/"
     ]
+  },
+  "type": "module",
+  "resolutions": {
+    "glob": "^9.2.1",
+    "jsdom": "^26.0.0",
+    "rimraf": "^4.0.0",
+    "magic-string": "^0.30.17",
+    "d3-color": "^3.1.0",
+    "brace-expansion": "^1.1.0"
+  },
+  "overrides": {
+    "glob": "^9.2.1",
+    "jsdom": "^26.0.0",
+    "rimraf": "^4.0.0",
+    "magic-string": "^0.30.17",
+    "d3-color": "^3.1.0",
+    "brace-expansion": "^1.1.0"
   }
 }

package/src/GlobalErrorBoundary.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import SilentErrorFallback from './SilentErrorFallback';
+
+class GlobalErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError() {
+    return { hasError: true };
+  }
+
+  componentDidCatch(error, info) {
+    console.group('%c :rotating_light: Global App Crash ', 'background:#09090b;color:#f43f5e');
+    console.error(error);
+    console.error(info);
+    console.groupEnd();
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return <SilentErrorFallback />;
+    }
+
+    // eslint-disable-next-line react/prop-types
+    return this.props.children;
+  }
+}
+
+export default GlobalErrorBoundary;

package/src/SilentErrorFallback.jsx

@@ -0,0 +1,68 @@
+
+import { faArrowRotateRight, faCircleExclamation, faHouse, faRotate } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Button } from "@mui/material";
+import { alpha, Box, useTheme } from "@mui/system";
+import { useNavigate } from "react-router-dom";
+
+function SilentErrorFallback() {
+  console.group('%c 🚨 System Error Log ', 'background: #09090b; color: #f43f5e; font-weight: bold;');
+  // console.error('Error:', error?.message || 'Unknown');
+  console.groupEnd();
+  const theme = useTheme();
+  const navigate = useNavigate();
+
+  return (
+    <div className="flex items-center justify-center min-h-[500px] w-full p-6 ">
+      {/* The Card - Clean White Slate */}
+      <div className="flex flex-col items-center bg-[#fff] justify-center w-full max-w-md p-10 text-center border border-slate-200 rounded-[2.5rem] shadow-xl shadow-slate-200/50">
+        {/* Icon Box - Soft Indigo Tint */}
+        <div className="mb-8">
+          <Box
+            sx={{
+              color: theme.palette.primary.main, // Solid primary color
+              borderColor: alpha(theme.palette.primary.main, 0.2),
+            }}
+            className="flex h-20 w-20 items-center justify-center rounded-3xl border transition-all"
+          >
+            <FontAwesomeIcon icon={faCircleExclamation} className="text-3xl" />
+          </Box>
+        </div>
+
+        {/* Text Content */}
+        <h3 className="text-2xl font-extrabold tracking-tight text-customBlue">{'Oops! Something went wrong'}</h3>
+
+        <p className="mt-4 text-slate-500 text-base font-medium leading-relaxed">
+          {"   The page didn't load quite right. Try giving it a quick refresh or head back to your dashboard."}
+        </p>
+
+        {/* Button Group */}
+        <div className="mt-10 flex flex-col sm:flex-row items-center justify-center gap-3 w-full px-4">
+          <Button
+            color="primary"
+            variant="contained"
+            onClick={() => navigate(0)}
+          >
+            <FontAwesomeIcon icon={faRotate} className="mr-2" />
+            Retry
+          </Button>
+
+          <Button onClick={() => navigate('/ui/medplat/dashboard/webtasks')} color="secondary" variant="contained">
+            <FontAwesomeIcon icon={faHouse} className="mr-2 text-xs" />
+            Go Home
+          </Button>
+        </div>
+
+        {/* Bottom Footer */}
+        <div className="mt-12 pt-6 border-t border-slate-100 w-full">
+          <p className="text-[11px] text-slate-400 uppercase tracking-widest font-bold">
+            {"Contact support if this issue persists. We're here to help!"}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+
+export default SilentErrorFallback;

package/src/TrackingProviderWrapper.jsx

@@ -0,0 +1,40 @@
+import { execute } from '@/common/services/QueryBuilder';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { TrackingProvider } from 'useranalytics'; // Ensure correct path or package name
+import GeneralUtil from '@/common/services/util/GeneralUtil';
+
+const TrackingProviderWrapper = ({ children }) => {
+  const { user } = useSelector((state) => state.Authenticate);
+  const token = localStorage.getItem('token');
+  const apiBaseUrl = import.meta.env.VITE_API_BASE_URL;
+  let device_type = navigator.userAgent;
+  let device;
+  function isMobileDevice() {
+    const userAgent = device_type.toLowerCase();
+    return /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent);
+  }
+
+  if (isMobileDevice()) {
+    device = 'Mobile';
+  } else {
+    device = 'Web';
+  }
+if(GeneralUtil.isEkavach){
+  return (
+    <TrackingProvider config={{ apiBaseUrl }} eventProps={{ user, device_type, device, token, execute }}>
+      {children}
+    </TrackingProvider>
+  );
+}else{
+  return <>{children}</>;
+}
+ 
+};
+
+export default TrackingProviderWrapper;
+
+TrackingProviderWrapper.propTypes = {
+  children: PropTypes.any,
+};

package/src/_tests_/__mocks__/MockTranslationProvider.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import PropTypes from 'prop-types';
+import { TranslationContext } from '@/common/languageTranslator/TranslationContext';
+
+const MockTranslationProvider = ({ children }) => {
+  const translate = (value) => {
+    // Mock behavior: Return the input value as-is or add a prefix for testing
+    return `${value}`;
+  };
+
+  const contextValue = React.useMemo(() => ({ translate }), [translate]);
+
+  return <TranslationContext.Provider value={contextValue}>{children}</TranslationContext.Provider>;
+};
+
+export default MockTranslationProvider;
+
+MockTranslationProvider.propTypes = {
+  children: PropTypes.any,
+};

package/src/_tests_/__mocks__/ckeditor.js

@@ -0,0 +1,45 @@
+import React from 'react';
+// __mocks__/ckeditor.js
+// eslint-disable-next-line react/prop-types
+export const CKEditor = ({ data = '', onChange = () => {} }) => {
+  return (
+    <div data-testid="othertypeeventconfigmodal-template-ckeditor" className="ck-editor">
+      <textarea
+        data-testid="ckeditor-textarea"
+        defaultValue={data}
+        onChange={(e) => onChange(null, { getData: () => e.target.value })}
+      />
+    </div>
+  );
+};
+export class ClassicEditor {}
+
+ClassicEditor.builtinPlugins = [];
+ClassicEditor.defaultConfig = {};
+
+export const Essentials = {};
+export const CKFinderUploadAdapter = {};
+export const Autoformat = {};
+export const Bold = {};
+export const Italic = {};
+export const BlockQuote = {};
+export const CKBox = {};
+export const CKFinder = {};
+export const EasyImage = {};
+export const Heading = {};
+export const Image = {};
+export const ImageCaption = {};
+export const ImageStyle = {};
+export const ImageToolbar = {};
+export const ImageUpload = {};
+export const PictureEditing = {};
+export const Indent = {};
+export const Link = {};
+export const List = {};
+export const MediaEmbed = {};
+export const Paragraph = {};
+export const PasteFromOffice = {};
+export const Table = {};
+export const TableToolbar = {};
+export const TextTransformation = {};
+export const CloudServices = {};

package/src/_tests_/__mocks__/fileMock.js

@@ -0,0 +1 @@
+module.exports = 'test-file-stub';

package/src/_tests_/__mocks__/useranalytics.js

@@ -0,0 +1,5 @@
+const mockTrackEvent = jest.fn();
+
+module.exports = {
+  useTracking: () => ({ trackEvent: mockTrackEvent }),
+};

package/src/_tests_/views/components/Dashboard/DashboardUI.test.jsx

@@ -0,0 +1,137 @@
+import React, { act } from 'react';
+
+import {
+  mockDeathVerificationDetailsResponse,
+  mockGetCountResponse,
+  mockGetWebtasksBasketDetailsResponse,
+  mockRetrieveBasketPreferenceByUserIdResponse,
+} from './DashboardUIMock.js';
+import {
+  getCount,
+  getWebTasksBasketDetails,
+  retrieveBasketPreferenceByUserId,
+  saveBasketPreferenceByUserId,
+} from '@/common/services/Webtasks.js';
+import { customRender } from '@/common/tests/CustomWrapper.jsx';
+import DashboardUI from '@/views/feature-components/Dashboard/DashboardUI.jsx';
+import { cleanup, fireEvent, screen, waitFor } from '@testing-library/react';
+
+// jest.mock('exceljs', () => ({
+//   Workbook: jest.fn(() => ({
+//     addWorksheet: jest.fn(() => mockWorksheet),
+//     xlsx: {
+//       writeBuffer: jest.fn().mockResolvedValue(Buffer.from('mocked data')),
+//     },
+//   })),
+// }));
+
+// const mockWorksheet = {
+//   addRow: jest.fn(),
+// };
+
+// Mock `saveAs` from `file-saver`
+jest.mock('file-saver', () => ({
+  saveAs: jest.fn(),
+}));
+
+jest.mock('../../../../common/services/Webtasks', () => ({
+  getCount: jest.fn(),
+  getWebTasksBasketDetails: jest.fn(),
+  retrieveBasketPreferenceByUserId: jest.fn(),
+  saveBasketPreferenceByUserId: jest.fn(),
+}));
+
+describe('Dashboard  UI Webtasks', () => {
+  const renderComponent = async (params = {}) => {
+    await customRender(<DashboardUI />, params);
+  };
+  beforeEach(async () => {
+    retrieveBasketPreferenceByUserId.mockResolvedValue(mockRetrieveBasketPreferenceByUserIdResponse);
+    getCount.mockResolvedValue(mockGetCountResponse);
+    await act(async () => {
+      await renderComponent({ url: '/ui/medplat/dashboard/webtasks' });
+    });
+  });
+  afterEach(() => {
+    jest.clearAllMocks();
+    cleanup();
+  });
+
+  it('Webtasks render Successfully', async () => {
+    const WidgetCardList = screen.queryAllByTestId('Dashboard-Widget-Card');
+    expect(WidgetCardList.length).toBeGreaterThan(0);
+  });
+  it('on Click of 3 Dot card Taskbar should open', async () => {
+    const TaskbarWidgetCard = screen.queryByTestId('taskbar-widget-card');
+    expect(TaskbarWidgetCard).toBeInTheDocument();
+    await act(async () => {
+      TaskbarWidgetCard.click();
+    });
+    await waitFor(async () => {
+      const TaskbarComponent = screen.getByTestId('Dashboard-Taskbar');
+      expect(TaskbarComponent).toBeInTheDocument();
+
+      const TaskbarWidgetCardList = screen.queryAllByTestId('Dashboard-Taskbar-Widget-Card');
+      expect(TaskbarWidgetCardList.length).toBe(4);
+    });
+
+    const HideTaskbarButton = screen.getByTestId('taskbar-hide-button');
+
+    await act(async () => {
+      HideTaskbarButton.click();
+    });
+    await waitFor(async () => {
+      const TaskbarComponent = screen.queryByTestId('Dashboard-Taskbar');
+      expect(TaskbarComponent).not.toBeInTheDocument();
+    });
+  });
+  it('Webtasks render hide unhide functionality', async () => {
+    const WidgetCardList = screen.queryAllByTestId('Dashboard-Widget-Card');
+    const NumberOfDashboardWidget = WidgetCardList.length;
+    let NumberOfTaskbarWidget;
+
+    const TaskbarWidgetCard = screen.queryByTestId('taskbar-widget-card');
+    expect(TaskbarWidgetCard).toBeInTheDocument();
+    await act(async () => {
+      TaskbarWidgetCard.click();
+    });
+    await waitFor(async () => {
+      saveBasketPreferenceByUserId.mockResolvedValueOnce({ data: { taskbar: 'show', baskets: [62, 33, 26] } });
+      getWebTasksBasketDetails.mockResolvedValueOnce(mockGetWebtasksBasketDetailsResponse);
+      const TaskbarWidgetCardList = screen.queryAllByTestId('Dashboard-Taskbar-Widget-Card');
+      NumberOfTaskbarWidget = TaskbarWidgetCardList.length;
+
+      const TaskbarWidget = TaskbarWidgetCardList[0];
+      fireEvent.mouseEnter(TaskbarWidget);
+    });
+    await waitFor(async () => {
+      const ArrowBackIcon = screen.getByTestId('widgetcard-arrow-button');
+      await act(async () => {
+        ArrowBackIcon.click();
+      });
+    });
+
+    await waitFor(async () => {
+      expect(saveBasketPreferenceByUserId).toHaveBeenCalled();
+      const TaskbarWidgetCardList = screen.queryAllByTestId('Dashboard-Taskbar-Widget-Card');
+      expect(TaskbarWidgetCardList.length).toBe(NumberOfTaskbarWidget - 1);
+      const WidgetCardList = screen.queryAllByTestId('Dashboard-Widget-Card');
+      expect(WidgetCardList.length).toBe(NumberOfDashboardWidget + 1);
+    });
+  });
+  it('Click on Webtasks Details should be rendered', async () => {
+    getWebTasksBasketDetails.mockResolvedValueOnce(mockDeathVerificationDetailsResponse);
+
+    const WidgetCardList = screen.queryAllByTestId('Dashboard-Widget-Card');
+
+    await act(async () => {
+      WidgetCardList[2].click();
+    });
+
+    await waitFor(async () => {
+      expect(getWebTasksBasketDetails).toHaveBeenCalled();
+      expect(screen.getByTestId('dashboard-webtaskslist-icon-pdf')).toBeInTheDocument();
+      expect(screen.getByTestId('widgetlist-table-customized')).toBeInTheDocument();
+    });
+  });
+});