@visns-studio/visns-components 5.14.7 → 5.14.9

package/README.md

@@ -50,6 +50,7 @@ VISNS Components is a React-based UI component library that provides a set of re
 -   **Download** - File download functionality
 -   **Loader** - Loading indicators
 -   **Notification** - Toast notifications
+-   **StandardModal** - Reusable modal component with consistent styling
 -   **Call Popup** - Modal dialogs
 -   **QR Code** - QR code generation and printing
 
@@ -2312,6 +2313,64 @@ The QrCode component fetches QR code data from the specified URL and displays it
 }
 ```
 
+#### StandardModal
+
+A reusable modal component that standardizes the look and feel across all components. Uses the same styling as GenericIndex, GenericDetail, and DataGrid modals, providing consistent modal behavior throughout the application.
+
+```jsx
+import { StandardModal } from '@visns-studio/visns-components';
+
+// Basic usage (for custom content with header)
+<StandardModal
+    isOpen={showModal}
+    onClose={() => setShowModal(false)}
+    title="Modal Title"
+    showHeader={true}
+>
+    <div>Your custom content here</div>
+</StandardModal>
+
+// Usage with Form components (no header - Form provides its own)
+<StandardModal
+    isOpen={modalShow}
+    onClose={modalClose}
+    closeOnDocumentClick={false}
+    verticalAlign="top"
+>
+    <Form
+        closeModal={modalClose}
+        formSettings={formData}
+        // ... other Form props
+    />
+</StandardModal>
+```
+
+**Props:**
+
+- `isOpen` (boolean): Whether the modal is open
+- `onClose` (function): Function to call when modal should close
+- `title` (string): Modal title (only used if showHeader is true)
+- `children` (ReactNode): Modal content
+- `size` (string): Modal size - 'small' (400px), 'medium' (90vw, default), 'large' (95vw)
+- `closeOnDocumentClick` (boolean): Whether to close on outside click (default: true)
+- `closeOnEscape` (boolean): Whether to close on escape key (default: true)
+- `verticalAlign` (string): Vertical alignment - 'center' (default) or 'top'
+- `showHeader` (boolean): Whether to show modal header (default: false)
+- `customStyles` (object): Custom styles to override defaults
+
+**Size Options:**
+
+- **Small**: 400px width, ideal for simple dialogs and confirmations
+- **Medium** (default): 90vw width with 600px min and 1400px max, matches original modal sizing
+- **Large**: 95vw width with 800px min and 1600px max, for very large content
+
+**Important Notes:**
+
+- When wrapping Form components, use `showHeader={false}` (default) since Form components render their own headers
+- When creating custom modals with simple content, use `showHeader={true}` to display the title and close button
+- The component automatically handles responsive sizing and vertical alignment
+- Uses the same CSS classes as existing modals (modalwrap, modal, modal__header, modal__content)
+
 ### Enhanced OCR Template Component
 
 #### OcrTemplateEnhanced (v5.14.0+)

package/package.json

@@ -88,7 +88,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.14.7",
+    "version": "5.14.9",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/DataGrid.jsx

@@ -30,7 +30,6 @@ import React, {
 import { useNavigate } from 'react-router-dom';
 import debounce from 'lodash.debounce';
 import moment from 'moment';
-import Popup from 'reactjs-popup';
 import 'reactjs-popup/dist/index.css';
 import parse from 'html-react-parser';
 import { saveAs } from 'file-saver';
@@ -80,6 +79,7 @@ import CustomFetch from './Fetch';
 import Download from './Download';
 import Form from './Form';
 import CellWithTooltip from './cells/CellWithTooltip';
+import StandardModal from './generic/StandardModal';
 import DataGridSearch from './controls/DataGridSearch';
 import AutoRefreshControls from './controls/AutoRefreshControls';
 import AudioPlayer from './controls/AudioPlayer';
@@ -3714,55 +3714,32 @@ const DataGrid = forwardRef(
                 )}
 
                 <AudioPlayer audioSource={audioSource} />
-                <Popup
-                    open={modalShow}
+                <StandardModal
+                    isOpen={modalShow}
                     onClose={modalClose}
+                    title={formData.title || 'Edit Data'}
                     closeOnDocumentClick={false}
-                    contentStyle={{
-                        width: windowWidth < 768 ? '95vw' : '80vw',
-                        minWidth: windowWidth < 768 ? '95vw' : '600px',
-                        maxWidth: '1200px',
-                        ...(formData.verticalAlign === 'top' && {
-                            position: 'fixed',
-                            top: '5vh',
-                            left: '50%',
-                            transform: 'translateX(-50%)',
-                            margin: '0',
-                        }),
-                    }}
-                    nested
+                    verticalAlign={formData.verticalAlign || 'center'}
                 >
-                    <div
-                        className={`${styles.modalwrap} ${
-                            styles['top--modal']
-                        } ${styles.modalWide} ${
-                            formData.verticalAlign === 'top'
-                                ? 'modal-top-aligned'
-                                : ''
-                        }`}
-                    >
-                        <div className={styles.modal}>
-                            <Form
-                                ajaxSetting={ajaxSetting}
-                                api={api}
-                                closeModal={modalClose}
-                                columnId={formId}
-                                fetchTable={handleReload}
-                                formSettings={formData}
-                                formType={formType}
-                                gridRef={gridRef}
-                                mapbox={mapbox}
-                                modalOpen={modalOpen}
-                                paramValue={paramValue}
-                                style={style}
-                                updateForm={setFormData}
-                                userProfile={userProfile}
-                                bulkEditMode={bulkEditMode}
-                                bulkEditGroupData={bulkEditGroupData}
-                            />
-                        </div>
-                    </div>
-                </Popup>
+                    <Form
+                        ajaxSetting={ajaxSetting}
+                        api={api}
+                        closeModal={modalClose}
+                        columnId={formId}
+                        fetchTable={handleReload}
+                        formSettings={formData}
+                        formType={formType}
+                        gridRef={gridRef}
+                        mapbox={mapbox}
+                        modalOpen={modalOpen}
+                        paramValue={paramValue}
+                        style={style}
+                        updateForm={setFormData}
+                        userProfile={userProfile}
+                        bulkEditMode={bulkEditMode}
+                        bulkEditGroupData={bulkEditGroupData}
+                    />
+                </StandardModal>
                 <GalleryModal
                     modalGalleryShow={modalGalleryShow}
                     modalGalleryClose={modalGalleryClose}

package/src/components/generic/GenericDashboard.jsx

@@ -4,15 +4,15 @@ import { Link, useNavigate } from 'react-router-dom';
 import { ResponsiveBar } from '@nivo/bar';
 import { ResponsiveLine } from '@nivo/line';
 import { ResponsivePie } from '@nivo/pie';
-import Popup from 'reactjs-popup';
 import dayjs from 'dayjs';
 import parse from 'html-react-parser';
 import { createSwapy } from 'swapy';
-import { X, Minus, Plus, Star, Trash2, Eye, RotateCcw, Clock, Database, BarChart3, AlertCircle } from 'lucide-react';
+import { Minus, Plus, Star, Trash2, Eye, RotateCcw, Clock, Database, BarChart3, AlertCircle } from 'lucide-react';
 import { confirmDialog } from '../utils/ConfirmDialog';
 
 import CustomFetch from '../Fetch';
 import MultiSelect from '../MultiSelect';
+import StandardModal from './StandardModal';
 
 import styles from '../styles/GenericDashboard.module.scss';
 
@@ -1961,63 +1961,49 @@ function GenericDashboard({ setting, userProfile, dynamicDashboard = false }) {
             )}
             <div className={styles.grid} ref={container}>
                 {renderWidgets()}
-                <Popup
-                    open={showAddWidgetModal}
+                <StandardModal
+                    isOpen={showAddWidgetModal}
                     onClose={() => setShowAddWidgetModal(false)}
-                    modal
+                    title="Add a Widget"
+                    showHeader={true}
                 >
-                    <div className="modalwrap">
-                        <div className={`${styles.addWidgetPopup} modal`}>
-                            <div className="modal__header">
-                                <h1>Add a Widget</h1>
-                                <button
-                                    className="modal__close"
-                                    onClick={() => setShowAddWidgetModal(false)}
-                                >
-                                    <X strokeWidth={1} size={24} />
-                                </button>
-                            </div>
-                            <div className="modal__content">
-                                {availableWidgets.length > 0 ? (
-                                    <div>
-                                        <select
-                                            value={selectedAddWidgetId}
-                                            onChange={(e) =>
-                                                setSelectedAddWidgetId(
-                                                    e.target.value
-                                                )
-                                            }
-                                            className={styles.addWidgetSelect}
-                                        >
-                                            <option value="">
-                                                -- Select a widget --
-                                            </option>
-                                            {availableWidgets.map((widget) => (
-                                                <option
-                                                    key={widget.id}
-                                                    value={widget.id}
-                                                >
-                                                    {widget.title}
-                                                </option>
-                                            ))}
-                                        </select>
-                                        <button
-                                            className={styles.addWidgetButton}
-                                            onClick={handleAddWidget}
-                                            disabled={!selectedAddWidgetId}
-                                        >
-                                            Add
-                                        </button>
-                                    </div>
-                                ) : (
-                                    <div className={styles.noWidgetsMessage}>
-                                        No more widgets available
-                                    </div>
-                                )}
-                            </div>
+                    {availableWidgets.length > 0 ? (
+                        <div>
+                            <select
+                                value={selectedAddWidgetId}
+                                onChange={(e) =>
+                                    setSelectedAddWidgetId(
+                                        e.target.value
+                                    )
+                                }
+                                className={styles.addWidgetSelect}
+                            >
+                                <option value="">
+                                    -- Select a widget --
+                                </option>
+                                {availableWidgets.map((widget) => (
+                                    <option
+                                        key={widget.id}
+                                        value={widget.id}
+                                    >
+                                        {widget.title}
+                                    </option>
+                                ))}
+                            </select>
+                            <button
+                                className={styles.addWidgetButton}
+                                onClick={handleAddWidget}
+                                disabled={!selectedAddWidgetId}
+                            >
+                                ADD
+                            </button>
                         </div>
-                    </div>
-                </Popup>
+                    ) : (
+                        <div className={styles.noWidgetsMessage}>
+                            No more widgets available
+                        </div>
+                    )}
+                </StandardModal>
             </div>
         </>
     );

package/src/components/generic/GenericDetail.jsx

@@ -39,7 +39,6 @@ import { Calendar, momentLocalizer } from 'react-big-calendar';
 import withDragAndDrop from 'react-big-calendar/lib/addons/dragAndDrop';
 import moment from 'moment';
 import parse from 'html-react-parser';
-import Popup from 'reactjs-popup';
 import { motion } from 'framer-motion';
 import Dropzone from 'react-dropzone';
 import truncate from 'truncate';
@@ -79,6 +78,7 @@ import MergeEntity from '../MergeEntity';
 import MultiSelect from '../MultiSelect';
 import QrCode from '../QrCode';
 import StagePopupModal from './StagePopupModal';
+import StandardModal from './StandardModal';
 import Table from '../DataGrid';
 import TableFilter from '../TableFilter';
 import CategorizedDropZone from '../CategorizedDropZone';
@@ -242,7 +242,7 @@ function GenericDetail({
 
     /** Fileupload states */
     const [files, setFiles] = useState([]);
-    
+
     // Debug logging for files state changes
     useEffect(() => {
         console.log('GenericDetail: Files state changed:', {
@@ -250,7 +250,7 @@ function GenericDetail({
             filesCount: files ? files.length : 0,
             filesType: typeof files,
             isArray: Array.isArray(files),
-            firstFile: files && files.length > 0 ? files[0] : null
+            firstFile: files && files.length > 0 ? files[0] : null,
         });
     }, [files]);
     const [loadingProgress, setLoadingProgress] = useState(0);
@@ -275,6 +275,16 @@ function GenericDetail({
     const [lightboxOpen, setLightboxOpen] = useState(false);
     const [lightboxIndex, setLightboxIndex] = useState(0);
 
+    /** Window Width State for Responsive Modal */
+    const [windowWidth, setWindowWidth] = useState(window.innerWidth);
+
+    // Handle window resize for responsive modal
+    useEffect(() => {
+        const handleResize = () => setWindowWidth(window.innerWidth);
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, []);
+
     // Gallery modal close function
     const modalGalleryClose = () => {
         setModalGalleryShow(false);
@@ -1437,7 +1447,7 @@ function GenericDetail({
                 return renderLink();
             case 'ocrTemplate':
                 return (
-                    <OcrTemplateEnhanced 
+                    <OcrTemplateEnhanced
                         id={id}
                         data={data}
                         setData={setData}
@@ -1754,14 +1764,20 @@ function GenericDetail({
                             // Helper function to get nested object value using dot notation
                             const getNestedValue = (obj, path) => {
                                 if (!obj || !path) return null;
-                                return path.split('.').reduce((current, key) => {
-                                    return current && current[key] !== undefined ? current[key] : null;
-                                }, obj);
+                                return path
+                                    .split('.')
+                                    .reduce((current, key) => {
+                                        return current &&
+                                            current[key] !== undefined
+                                            ? current[key]
+                                            : null;
+                                    }, obj);
                             };
 
                             // Extract files using nested key support
-                            const files = activeTabConfig.key 
-                                ? getNestedValue(data, activeTabConfig.key) || []
+                            const files = activeTabConfig.key
+                                ? getNestedValue(data, activeTabConfig.key) ||
+                                  []
                                 : [];
 
                             const downloadFile = (file) => {
@@ -1874,7 +1890,9 @@ function GenericDetail({
 
                             // Create a fetchData function that refetches the main data
                             const handleFetchData = () => {
-                                console.log('GenericDetail: DropZone fetchData called, refetching main data...');
+                                console.log(
+                                    'GenericDetail: DropZone fetchData called, refetching main data...'
+                                );
                                 setDataReload(!dataReload);
                             };
 
@@ -1889,20 +1907,38 @@ function GenericDetail({
                                         fetchData={handleFetchData}
                                         files={files}
                                         settings={{
-                                            url: replaceDropzoneUrlParams(activeTabConfig.url),
+                                            url: replaceDropzoneUrlParams(
+                                                activeTabConfig.url
+                                            ),
                                             method: 'PUT',
-                                            type: activeTabConfig.filetype === 'image' ? 'gallery' : 'list',
+                                            type:
+                                                activeTabConfig.filetype ===
+                                                'image'
+                                                    ? 'gallery'
+                                                    : 'list',
                                             data: {
-                                                file_relationship: activeTabConfig.file_relationship,
+                                                file_relationship:
+                                                    activeTabConfig.file_relationship,
                                             },
-                                            folder: activeTabConfig.folder || 'uploads',
+                                            folder:
+                                                activeTabConfig.folder ||
+                                                'uploads',
                                             filetype: activeTabConfig.filetype,
-                                            deleteUrl: replaceDropzoneUrlParams(activeTabConfig.deleteUrl) || '/ajax/files/delete',
+                                            deleteUrl:
+                                                replaceDropzoneUrlParams(
+                                                    activeTabConfig.deleteUrl
+                                                ) || '/ajax/files/delete',
                                             showDescription: true,
                                         }}
-                                        url={replaceDropzoneUrlParams(activeTabConfig.url)}
+                                        url={replaceDropzoneUrlParams(
+                                            activeTabConfig.url
+                                        )}
                                         urlKey={activeTabConfig.urlKey}
-                                        deleteUrl={replaceDropzoneUrlParams(activeTabConfig.deleteUrl) || '/ajax/files/delete'}
+                                        deleteUrl={
+                                            replaceDropzoneUrlParams(
+                                                activeTabConfig.deleteUrl
+                                            ) || '/ajax/files/delete'
+                                        }
                                         entityData={data}
                                         routeParams={routeParams}
                                         dataKey={activeTabConfig.key}
@@ -2623,19 +2659,27 @@ function GenericDetail({
                                                                                 className={
                                                                                     item.size ===
                                                                                     'full'
-                                                                                        ? item.type === 'ocrTemplate' 
-                                                                                            ? styles['fw-grid-item']
+                                                                                        ? item.type ===
+                                                                                          'ocrTemplate'
+                                                                                            ? styles[
+                                                                                                  'fw-grid-item'
+                                                                                              ]
                                                                                             : `${styles['fw-grid-item']} ${styles.notecolor}`
                                                                                         : null
                                                                                 }
                                                                             >
-                                                                                {item.type !== 'ocrTemplate' && (
+                                                                                {item.type !==
+                                                                                    'ocrTemplate' && (
                                                                                     <strong>
                                                                                         {item.label
                                                                                             ? `${item.label}:`
                                                                                             : null}
                                                                                     </strong>
-                                                                                )}{item.type !== 'ocrTemplate' ? ' ' : ''}
+                                                                                )}
+                                                                                {item.type !==
+                                                                                'ocrTemplate'
+                                                                                    ? ' '
+                                                                                    : ''}
                                                                                 {item
                                                                                     .href
                                                                                     ?.url &&
@@ -3787,48 +3831,29 @@ function GenericDetail({
                 </div>
             </div>
 
-            <Popup
-                open={modalShow}
+            <StandardModal
+                isOpen={modalShow}
                 onClose={modalClose}
+                title={formData.title || 'Edit Details'}
                 closeOnDocumentClick={false}
-                contentStyle={{
-                    width: '80vw',
-                    maxWidth: '1200px',
-                    ...(formData.verticalAlign === 'top' && {
-                        position: 'fixed',
-                        top: '5vh',
-                        left: '50%',
-                        transform: 'translateX(-50%)',
-                        margin: '0',
-                    }),
-                }}
+                verticalAlign={formData.verticalAlign || 'center'}
             >
-                <div
-                    className={`modalwrap top--modal modalWide ${
-                        formData.verticalAlign === 'top'
-                            ? 'modal-top-aligned'
-                            : ''
-                    }`}
-                >
-                    <div className="modal">
-                        <Form
-                            closeModal={modalClose}
-                            columnId={formId}
-                            fetchTable={handleReload}
-                            formSettings={formData}
-                            formType={formType}
-                            style={userProfile?.settings?.style || {}}
-                            updateForm={setFormData}
-                            userProfile={userProfile}
-                            paramValue={
-                                routeParams[urlParam]
-                                    ? routeParams[urlParam]
-                                    : 0
-                            }
-                        />
-                    </div>
-                </div>
-            </Popup>
+                <Form
+                    closeModal={modalClose}
+                    columnId={formId}
+                    fetchTable={handleReload}
+                    formSettings={formData}
+                    formType={formType}
+                    style={userProfile?.settings?.style || {}}
+                    updateForm={setFormData}
+                    userProfile={userProfile}
+                    paramValue={
+                        routeParams[urlParam]
+                            ? routeParams[urlParam]
+                            : 0
+                    }
+                />
+            </StandardModal>
 
             <StagePopupModal
                 show={showStagePopup}

package/src/components/generic/GenericIndex.jsx

@@ -7,7 +7,6 @@ import { saveAs } from 'file-saver';
 import _ from 'lodash';
 import parse from 'html-react-parser';
 import moment from 'moment';
-import Popup from 'reactjs-popup';
 
 import CustomFetch from '../Fetch';
 import Download from '../Download';
@@ -16,19 +15,24 @@ import Table from '../DataGrid';
 import TableFilter from '../TableFilter';
 import GenericGrid from './GenericGrid';
 import GenericReportForm from './GenericReportForm';
+import StandardModal from './StandardModal';
 
 import styles from '../styles/GenericIndex.module.scss';
 
-function useWindowHeight() {
+function useWindowDimensions() {
     const [windowHeight, setWindowHeight] = useState(window.innerHeight);
+    const [windowWidth, setWindowWidth] = useState(window.innerWidth);
 
     useEffect(() => {
-        const handleResize = () => setWindowHeight(window.innerHeight);
+        const handleResize = () => {
+            setWindowHeight(window.innerHeight);
+            setWindowWidth(window.innerWidth);
+        };
         window.addEventListener('resize', handleResize);
         return () => window.removeEventListener('resize', handleResize);
     }, []);
 
-    return windowHeight;
+    return { windowHeight, windowWidth };
 }
 
 function useConfig(setting, tabs, filters, setRowsSelected, tableSetting) {
@@ -236,7 +240,7 @@ function GenericIndex({
     const [customActionModalShow, setCustomActionModalShow] = useState(false);
     const [customActionFormData, setCustomActionFormData] = useState({});
     const [customActionConfig, setCustomActionConfig] = useState(null);
-    const windowHeight = useWindowHeight();
+    const { windowHeight, windowWidth } = useWindowDimensions();
     const { config, setConfig, subnav, setSubnav } = useConfig(
         setting,
         setting.tabs,
@@ -1002,41 +1006,22 @@ function GenericIndex({
             </div>
 
             {/* Custom Action Modal */}
-            <Popup
-                open={customActionModalShow}
+            <StandardModal
+                isOpen={customActionModalShow}
                 onClose={closeCustomActionModal}
+                title={customActionFormData.title || 'Custom Action'}
                 closeOnDocumentClick={false}
-                contentStyle={{
-                    width: '80vw',
-                    maxWidth: '1200px',
-                    ...(customActionFormData.verticalAlign === 'top' && {
-                        position: 'fixed',
-                        top: '5vh',
-                        left: '50%',
-                        transform: 'translateX(-50%)',
-                        margin: '0',
-                    }),
-                }}
+                verticalAlign={customActionFormData.verticalAlign || 'center'}
             >
-                <div
-                    className={`modalwrap top--modal modalWide ${
-                        customActionFormData.verticalAlign === 'top'
-                            ? 'modal-top-aligned'
-                            : ''
-                    }`}
-                >
-                    <div className="modal">
-                        <Form
-                            closeModal={closeCustomActionModal}
-                            formSettings={customActionFormData}
-                            formType="create"
-                            fetchTable={handleCustomActionSubmit}
-                            style={userProfile?.settings?.style || {}}
-                            userProfile={userProfile}
-                        />
-                    </div>
-                </div>
-            </Popup>
+                <Form
+                    closeModal={closeCustomActionModal}
+                    formSettings={customActionFormData}
+                    formType="create"
+                    fetchTable={handleCustomActionSubmit}
+                    style={userProfile?.settings?.style || {}}
+                    userProfile={userProfile}
+                />
+            </StandardModal>
         </>
     );
 }

package/src/components/generic/NotificationList.jsx

@@ -1,13 +1,11 @@
 import React, { useState, useCallback } from 'react';
-import { useNavigate } from 'react-router-dom';
 import Table from '../DataGrid';
-import { Bell, Check, ArrowLeft } from 'lucide-react';
+import { Bell, Check } from 'lucide-react';
 import { toast } from 'react-toastify';
 import CustomFetch from '../Fetch';
 import styles from '../styles/NotificationList.module.scss';
 
 const NotificationList = () => {
-    const navigate = useNavigate();
     const [loading, setLoading] = useState(false);
 
     const markAllAsRead = useCallback(() => {
@@ -50,25 +48,26 @@ const NotificationList = () => {
         },
         columns: [
             {
-                id: 'data',
-                jsonData: 'label',
+                id: ['data'],
+                nameFrom: 'label',
                 label: 'Message',
-                type: 'json',
-                flex: 1,
+                type: 'relation',
+                minWidth: 300,
+                wordWrap: true,
             },
             {
                 id: 'created_at',
                 label: 'Created At',
                 type: 'datetime',
                 minWidth: 180,
-                maxWidth: 180,
+                maxWidth: 200,
             },
             {
                 id: 'read_at',
                 label: 'Read At',
                 type: 'datetime',
                 minWidth: 180,
-                maxWidth: 180,
+                maxWidth: 200,
             },
         ],
         settings: [],
@@ -111,21 +110,6 @@ const NotificationList = () => {
                     </div>
                 </div>
             </div>
-            <div className={styles.grid}>
-                <div className={styles.grid__row}>
-                    <div className={styles.grid__full}>
-                        <div className={styles.backButtonContainer}>
-                            <button
-                                className={styles.backButton}
-                                onClick={() => navigate('/')}
-                            >
-                                <ArrowLeft size={16} />
-                                <span>Back to Dashboard</span>
-                            </button>
-                        </div>
-                    </div>
-                </div>
-            </div>
         </div>
     );
 };

package/src/components/generic/StandardModal.jsx

@@ -0,0 +1,119 @@
+import React from 'react';
+import Popup from 'reactjs-popup';
+import { X } from 'lucide-react';
+import formStyles from '../styles/Form.module.scss';
+
+/**
+ * StandardModal Component
+ * 
+ * A reusable modal component that standardizes the look and feel across all components.
+ * Uses the same styles as GenericIndex, GenericDetail, and DataGrid via Form.module.scss.
+ * 
+ * @param {Object} props
+ * @param {boolean} props.isOpen - Whether the modal is open
+ * @param {Function} props.onClose - Function to call when modal should close
+ * @param {string} props.title - Modal title (only used if showHeader is true)
+ * @param {React.ReactNode} props.children - Modal content
+ * @param {string} props.size - Modal size: 'small', 'medium', 'large' (default: 'medium')
+ * @param {boolean} props.closeOnDocumentClick - Whether to close on outside click (default: true)
+ * @param {boolean} props.closeOnEscape - Whether to close on escape key (default: true)
+ * @param {string} props.verticalAlign - Vertical alignment: 'center', 'top' (default: 'center')
+ * @param {boolean} props.showHeader - Whether to show modal header (default: false, because Form components have their own headers)
+ * @param {Object} props.customStyles - Custom styles to override defaults
+ */
+const StandardModal = ({
+    isOpen,
+    onClose,
+    title,
+    children,
+    size = 'medium',
+    closeOnDocumentClick = true,
+    closeOnEscape = true,
+    verticalAlign = 'center',
+    showHeader = false,
+    customStyles = {}
+}) => {
+    // Apply vertical alignment class if needed
+    const getModalClasses = () => {
+        let classes = formStyles.modal;
+        if (verticalAlign === 'top') {
+            classes += ' modal-top-aligned';
+        }
+        return classes;
+    };
+
+    // Get size-based styles for the popup content
+    const getContentStyle = () => {
+        const baseStyle = {
+            ...customStyles.modal
+        };
+
+        // Apply size-based styles
+        switch (size) {
+            case 'small':
+                return {
+                    ...baseStyle,
+                    width: '400px',
+                    minWidth: '400px',
+                    maxWidth: '600px'
+                };
+            case 'large':
+                return {
+                    ...baseStyle,
+                    width: '95vw',
+                    minWidth: '800px',
+                    maxWidth: '1600px'
+                };
+            case 'medium':
+            default:
+                // Use the same dimensions as modalWide class (original modal sizing)
+                return {
+                    ...baseStyle,
+                    width: '90vw',
+                    minWidth: '600px',
+                    maxWidth: '1400px'
+                };
+        }
+    };
+
+    return (
+        <Popup
+            open={isOpen}
+            onClose={onClose}
+            modal
+            closeOnDocumentClick={closeOnDocumentClick}
+            closeOnEscape={closeOnEscape}
+            contentStyle={getContentStyle()}
+        >
+            <div className={formStyles.modalwrap}>
+                <div 
+                    className={getModalClasses()}
+                >
+                    {showHeader && (
+                        <div className={formStyles.modal__header} style={customStyles.header}>
+                            <h1 style={customStyles.title}>{title}</h1>
+                            <button
+                                className={formStyles.modal__close}
+                                onClick={onClose}
+                                style={customStyles.closeButton}
+                                type="button"
+                                aria-label="Close modal"
+                            >
+                                <X strokeWidth={1} size={24} />
+                            </button>
+                        </div>
+                    )}
+                    {showHeader ? (
+                        <div className={formStyles.modal__content} style={customStyles.content}>
+                            {children}
+                        </div>
+                    ) : (
+                        children
+                    )}
+                </div>
+            </div>
+        </Popup>
+    );
+};
+
+export default StandardModal;

package/src/components/styles/DataGrid.module.scss

@@ -145,8 +145,9 @@
 }
 
 .modalWide {
-    width: 80vw;
-    max-width: 1200px;
+    width: 90vw;
+    max-width: 1400px;
+    min-width: 600px;
 }
 
 .modal {

package/src/components/styles/Form.module.scss

@@ -11,6 +11,12 @@
         grid-template-columns: 1fr 1fr 1fr 1fr;
         gap: 1em;
     }
+
+    /* Enhanced styling for wider modals */
+    .modal & form {
+        gap: 1.5em;
+        max-width: none;
+    }
 }
 
 .formItem {
@@ -238,9 +244,10 @@ input[type='file'] {
 .modal__content {
     width: 100%;
     position: relative;
-    padding: 0.75rem;
-    max-height: 80vh;
+    padding: 1rem;
+    max-height: 85vh;
     overflow-y: auto;
+    min-height: 400px;
 
     .btn {
         background: var(--primary-color);

package/src/components/styles/GenericDetail.module.scss

@@ -945,3 +945,27 @@
     }
 }
 
+// Modal styles (consistent with DataGrid)
+.modalwrap {
+    background: var(--tertiary-color);
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+}
+
+.top--modal {
+    position: relative;
+    z-index: 1000;
+}
+
+.modalWide {
+    width: 90vw;
+    max-width: 1400px;
+    min-width: 600px;
+}
+
+.modal {
+    width: 100%;
+    position: relative;
+}
+

package/src/components/styles/GenericIndex.module.scss

@@ -1090,3 +1090,27 @@
         filter: brightness(1.1);
     }
 }
+
+// Modal styles (consistent with DataGrid)
+.modalwrap {
+    background: var(--tertiary-color);
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+}
+
+.top--modal {
+    position: relative;
+    z-index: 1000;
+}
+
+.modalWide {
+    width: 90vw;
+    max-width: 1400px;
+    min-width: 600px;
+}
+
+.modal {
+    width: 100%;
+    position: relative;
+}

package/src/components/styles/Notification.module.scss

@@ -84,20 +84,22 @@
 
 /* Notification Box Header */
 .notiboxHeader {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 12px 16px;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
-    gap: 10px;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: space-between !important;
+    padding: 12px 16px !important;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
+    gap: 12px !important;
+    min-height: 48px !important;
 }
 
 .notiboxHeader h3 {
-    margin: 0;
-    font-size: 16px;
-    font-weight: 600;
-    color: var(--heading-color, #333);
-    flex-shrink: 0;
+    margin: 0 !important;
+    font-size: 16px !important;
+    font-weight: 600 !important;
+    color: #333 !important;
+    flex-shrink: 0 !important;
+    flex-grow: 1 !important;
 }
 
 /* Notification Scroll Wrap */
@@ -231,42 +233,41 @@
 }
 
 .notiDismiss {
-    position: absolute;
-    right: 12px;
-    top: 10px;
-    background: transparent;
-    border: none;
-    color: #666;
-    cursor: pointer;
-    padding: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 24px;
-    height: 24px;
-    border-radius: 50%;
-    transition: all 0.2s;
-    opacity: 0.7;
+    position: absolute !important;
+    right: 12px !important;
+    top: 10px !important;
+    background: #f8f9fa !important;
+    border: 1px solid #dee2e6 !important;
+    color: #6c757d !important;
+    cursor: pointer !important;
+    padding: 4px !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    width: 24px !important;
+    height: 24px !important;
+    border-radius: 50% !important;
+    transition: all 0.2s !important;
+    opacity: 1 !important;
+    visibility: visible !important;
+    z-index: 10 !important;
 }
 
 .notiContent:hover .notiDismiss {
-    opacity: 1;
+    background: #e9ecef !important;
+    color: #495057 !important;
+    border-color: #adb5bd !important;
 }
 
 .notiDismiss:hover {
-    background-color: rgba(220, 53, 69, 0.1);
-    color: #dc3545;
-    transform: scale(1.1);
+    background-color: #dc3545 !important;
+    color: #ffffff !important;
+    border-color: #dc3545 !important;
 }
 
 .notiDismiss:focus {
-    outline: none;
-    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.3);
-    background-color: rgba(220, 53, 69, 0.05);
-}
-
-.notiDismiss:active {
-    transform: scale(0.95);
+    outline: none !important;
+    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.3) !important;
 }
 
 /* Empty State */
@@ -322,46 +323,45 @@
 
 /* Mark All as Read Button */
 .markAllBtn {
-    background-color: var(--primary-color, #0056b3);
-    color: var(--tertiary-color, white);
-    padding: 8px 16px;
-    border-radius: var(--br, 6px);
-    border: none;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 6px;
-    font-size: 14px;
-    font-weight: 500;
-    cursor: pointer;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    transition: all 0.2s ease;
-    outline: none;
-    white-space: nowrap;
-    flex-shrink: 0;
-    /* Ensure visibility */
-    opacity: 1;
+    background-color: #6c757d !important;
+    color: #ffffff !important;
+    padding: 6px 10px !important;
+    border-radius: 4px !important;
+    border: none !important;
+    display: inline-flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    gap: 4px !important;
+    font-size: 12px !important;
+    font-weight: 500 !important;
+    cursor: pointer !important;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
+    transition: all 0.2s ease !important;
+    outline: none !important;
+    white-space: nowrap !important;
+    flex-shrink: 0 !important;
+    min-width: 120px !important;
+    height: 32px !important;
+    line-height: 1.2 !important;
+    opacity: 1 !important;
+    visibility: visible !important;
+    position: relative !important;
+    z-index: 10 !important;
 }
 
 .markAllBtn:hover:not(:disabled) {
-    background-color: var(--secondary-color, #004494);
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
-    transform: translateY(-1px);
+    background-color: #5a6268 !important;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
 }
 
 .markAllBtn:focus:not(:disabled) {
-    box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb, 0, 86, 179), 0.4);
-}
-
-.markAllBtn:active:not(:disabled) {
-    transform: translateY(0);
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 0 0 2px rgba(108, 117, 125, 0.4) !important;
 }
 
 .markAllBtn:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-    background-color: #6c757d;
+    opacity: 0.6 !important;
+    cursor: not-allowed !important;
+    background-color: #adb5bd !important;
 }
 
 /* Footer Actions */
@@ -374,41 +374,37 @@
 }
 
 .viewAllBtn {
-    background-color: var(--primary-color, #0056b3);
-    color: var(--tertiary-color, white);
-    font-size: 14px;
-    font-weight: 500;
-    cursor: pointer;
-    padding: 10px 20px;
-    border-radius: var(--br, 6px);
-    border: none;
-    width: auto;
-    min-width: 200px;
-    text-align: center;
-    transition: all 0.2s ease;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    outline: none;
-    position: relative;
-    z-index: 1;
-    /* Ensure visibility and proper contrast */
-    opacity: 1;
-    display: block;
+    background-color: #6c757d !important;
+    color: #ffffff !important;
+    font-size: 14px !important;
+    font-weight: 500 !important;
+    cursor: pointer !important;
+    padding: 12px 24px !important;
+    border-radius: 6px !important;
+    border: none !important;
+    width: 100% !important;
+    max-width: 280px !important;
+    text-align: center !important;
+    transition: all 0.2s ease !important;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
+    outline: none !important;
+    position: relative !important;
+    height: 44px !important;
+    opacity: 1 !important;
+    visibility: visible !important;
+    display: block !important;
+    line-height: 1.2 !important;
+    z-index: 10 !important;
 }
 
 .viewAllBtn:hover:not(:disabled) {
-    background-color: var(--secondary-color, #004494);
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
-    transform: translateY(-1px);
+    background-color: #5a6268 !important;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25) !important;
 }
 
 .viewAllBtn:focus:not(:disabled) {
-    box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb, 0, 86, 179), 0.4);
-    outline: none;
-}
-
-.viewAllBtn:active:not(:disabled) {
-    transform: translateY(0);
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 0 0 2px rgba(108, 117, 125, 0.4) !important;
+    outline: none !important;
 }
 
 /* Bell Animation */

package/src/components/styles/NotificationList.module.scss

@@ -1,7 +1,7 @@
 .notificationListContainer {
     width: 100%;
-    max-width: 1200px;
-    margin: 0 auto;
+    margin: 0;
+    padding: 0;
 }
 
 .grid {
@@ -88,31 +88,3 @@
     opacity: 0.6;
     cursor: not-allowed;
 }
-
-.backButtonContainer {
-    display: flex;
-    justify-content: center;
-    padding: 16px 0;
-}
-
-.backButton {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    background-color: var(--primary-color);
-    color: white;
-    border: none;
-    border-radius: 6px;
-    padding: 12px 24px;
-    font-size: 14px;
-    font-weight: 500;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    min-width: 200px;
-}
-
-.backButton:hover {
-    background-color: var(--primary-color-darker, #0056b3);
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
-}

package/src/components/styles/SweetAlert.module.css

@@ -65,9 +65,28 @@
     box-shadow: 0 0 0 2px rgba(107, 114, 128, 0.3) !important;
 }
 
-/* Make the modal more compact */
+/* Make the modal use full width like GenericIndex */
 :global(.swal2-popup.swal2-modal) {
-    max-width: 90%;
+    max-width: 95%;
+    width: 95%;
+    min-width: 800px;
+}
+
+/* Responsive adjustments for smaller screens */
+@media (max-width: 1024px) {
+    :global(.swal2-popup.swal2-modal) {
+        max-width: 90%;
+        width: 90%;
+        min-width: 600px;
+    }
+}
+
+@media (max-width: 768px) {
+    :global(.swal2-popup.swal2-modal) {
+        max-width: 95%;
+        width: 95%;
+        min-width: 320px;
+    }
 }
 
 /* Reduce spacing between elements */

package/src/components/styles/global.css

@@ -225,11 +225,6 @@ input[type]:not([type='search']):not([type='url']):not([type='hidden']):not(
     backdrop-filter: blur(3px);
 }
 
-.modalWide {
-    width: 80vw !important;
-    max-width: 1200px !important;
-}
-
 /* Top-aligned modal styles */
 .modal-top-aligned {
     max-height: 90vh !important;

package/src/index.js

@@ -72,6 +72,7 @@ import GenericSort from './components/generic/GenericSort';
 import NotificationList from './components/generic/NotificationList';
 import OcrTemplateEnhanced from './components/generic/OcrTemplateEnhanced';
 import StagePopupModal from './components/generic/StagePopupModal';
+import StandardModal from './components/generic/StandardModal';
 
 /** Proposal Components */
 import ProposalTemplateSectionManager from './components/proposal/ProposalTemplateSectionManager';
@@ -145,6 +146,7 @@ export {
     showConfirmDialog,
     SortableList,
     StagePopupModal,
+    StandardModal,
     Table,
     TableFilter,
     VariableInserter,