card design update

platform/src/common/components/AQNumberCard/index.jsx

@@ -114,7 +114,7 @@ const AQNumberCard = () => {
   };
 
   const SkeletonCard = () => (
-    <div className="w-full border border-gray-200 rounded-xl px-4 py-6">
+    <div className="w-full border border-gray-200 bg-white rounded-xl px-4 py-6">
       <div className="w-full bg-gray-200 animate-pulse rounded-xl px-4 py-10">
         <div className="h-6 w-3/4 bg-gray-300 rounded"></div>
         <div className="mt-2 h-4 w-1/2 bg-gray-300 rounded"></div>

platform/src/common/components/Layout/index.jsx

@@ -36,9 +36,6 @@ const Layout = ({
   const isCollapsed = useSelector((state) => state.sidebar.isCollapsed);
   const isOpen = useSelector((state) => state.modal.openModal);
 
-  // Error Handling (Assuming useUserChecklists returns error)
-  const { error } = useUserChecklists();
-
   // Handler to close the modal
   const handleCloseModal = () => {
     dispatch(setOpenModal(false));
@@ -78,13 +75,6 @@ const Layout = ({
             />
           )}
 
-          {/* Error Message */}
-          {error && (
-            <div className="w-full p-4 bg-red-100 text-red-700 rounded-md">
-              {error}
-            </div>
-          )}
-
           {/* Children */}
           <div className="text-[#1C1D20] transition-all duration-300 ease-in-out overflow-hidden">
             {children}

platform/src/common/components/Modal/dataDownload/index.jsx

@@ -1,7 +1,6 @@
-'use client';
 import React from 'react';
 import { useSelector } from 'react-redux';
-import { Transition, TransitionChild } from '@headlessui/react';
+import { Transition } from '@headlessui/react';
 import Close from '@/icons/close_icon';
 import PropTypes from 'prop-types';
 import DataDownload, { DownloadDataHeader } from './modules/DataDownload';
@@ -15,6 +14,9 @@ import SelectMore, { SelectMoreHeader } from './modules/SelectMore';
 const Modal = ({ isOpen, onClose }) => {
   const modalType = useSelector((state) => state.modal.modalType.type);
 
+  /**
+   * Renders the appropriate header based on the modal type.
+   */
   const renderHeader = () => {
     switch (modalType) {
       case 'download':
@@ -32,9 +34,13 @@ const Modal = ({ isOpen, onClose }) => {
       case 'search':
         return <AddSearchHeader />;
       default:
+        return null; // Provide a fallback
     }
   };
 
+  /**
+   * Renders the appropriate body content based on the modal type.
+   */
   const renderBody = () => {
     switch (modalType) {
       case 'download':
@@ -52,27 +58,33 @@ const Modal = ({ isOpen, onClose }) => {
       case 'search':
         return <Search onClose={onClose} />;
       default:
+        return <div className="p-4">Invalid Modal Type</div>;
     }
   };
 
   return (
     <Transition show={isOpen} as={React.Fragment}>
-      <div className="fixed inset-0 z-50  min-h-screen flex items-center justify-center overflow-y-auto">
-        <TransitionChild
+      <div
+        className="fixed inset-0 z-50 flex items-center justify-center overflow-y-auto"
+        aria-labelledby="modal-title"
+        role="dialog"
+        aria-modal="true"
+      >
+        {/* Background Overlay */}
+        <Transition.Child
           as={React.Fragment}
           enter="ease-out duration-300"
           enterFrom="opacity-0"
-          enterTo="opacity-100"
+          enterTo="opacity-75"
           leave="ease-in duration-200"
-          leaveFrom="opacity-100"
+          leaveFrom="opacity-75"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 transition-opacity" aria-hidden="true">
-            <div className="absolute inset-0 bg-gray-500 opacity-75"></div>
-          </div>
-        </TransitionChild>
+          <div className="fixed inset-0 bg-gray-500 transition-opacity"></div>
+        </Transition.Child>
 
-        <TransitionChild
+        {/* Modal Panel */}
+        <Transition.Child
           as={React.Fragment}
           enter="ease-out duration-300"
           enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
@@ -81,29 +93,37 @@ const Modal = ({ isOpen, onClose }) => {
           leaveFrom="opacity-100 translate-y-0 sm:scale-100"
           leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
         >
-          <div className="inline-bloc relative align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle lg:min-h-[658px] lg:min-w-[1020px] max-w-[1020px] h-auto ">
-            {/* header */}
-            <div className="flex items-center justify-between py-4 px-5 border-b border-[#E2E3E5]">
-              {renderHeader()}
-              <div>
-                <button type="button" onClick={onClose}>
-                  <Close fill="#000" />
-                  <span className="sr-only">Close Modal</span>
-                </button>
-              </div>
+          <div
+            className="relative bg-white rounded-lg shadow-xl transform transition-all sm:max-w-4xl w-full max-h-screen flex flex-col"
+            style={{ maxWidth: '1020px' }}
+          >
+            {/* Header */}
+            <div className="flex items-center justify-between p-4 rounded-t-xl border-b border-gray-200 sticky top-0 bg-white z-10">
+              <div>{renderHeader()}</div>
+              <button
+                type="button"
+                onClick={onClose}
+                className="text-gray-500 hover:text-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 rounded"
+                aria-label="Close Modal"
+              >
+                <Close fill="#000" />
+              </button>
+            </div>
+
+            {/* Body */}
+            <div className="relative flex-1 overflow-y-auto flex flex-col lg:flex-row">
+              {renderBody()}
             </div>
-            {/* body */}
-            <div className="flex relative flex-grow">{renderBody()}</div>
           </div>
-        </TransitionChild>
+        </Transition.Child>
       </div>
     </Transition>
   );
 };
 
 Modal.propTypes = {
-  isOpen: PropTypes.bool,
-  onClose: PropTypes.func,
+  isOpen: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
 };
 
 export default Modal;