@visns-studio/visns-components 5.12.3 → 5.12.4

package/package.json

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

package/src/components/DataGrid.jsx

@@ -40,9 +40,12 @@ import DateFilter from '@visns-studio/visns-datagrid-enterprise/DateFilter';
 import ReactDataGrid from '@visns-studio/visns-datagrid-enterprise';
 import { toast } from 'react-toastify';
 import fetchUtil from '../utils/fetchUtil';
-import { confirmDialog } from '../utils/ConfirmDialog';
+import { confirmDialog } from './utils/ConfirmDialog';
 import { DEFAULT_INTELLIGENT_SORTING_CONFIG } from '../utils/relationshipSortingUtils';
-import { extractColumnsMetadata, isColumnSortable } from '../utils/columnsMetadataUtils';
+import {
+    extractColumnsMetadata,
+    isColumnSortable,
+} from '../utils/columnsMetadataUtils';
 import {
     AlarmClock,
     RotateCcw,
@@ -207,10 +210,10 @@ const loadData = async (
     try {
         const response = await fetchUtil.post(url, params);
         const { data, total } = response.data;
-        
+
         // Extract columns metadata if available
         const metadata = extractColumnsMetadata(response);
-        
+
         return { data, count: total, metadata };
     } catch (error) {
         console.error('Error fetching data:', error);
@@ -391,7 +394,7 @@ const DataGrid = forwardRef(
                     if (res.metadata) {
                         setColumnsMetadata(res.metadata);
                     }
-                    
+
                     // Sort data by grouping field if grouping is enabled
                     if (ajaxSetting?.groupBy?.length > 0) {
                         const groupField = ajaxSetting.groupBy[0]; // groupBy is array of strings
@@ -449,9 +452,9 @@ const DataGrid = forwardRef(
                     }, 10);
                 });
 
-                return sqlResult.then(res => ({
+                return sqlResult.then((res) => ({
                     data: res.data,
-                    count: res.count
+                    count: res.count,
                 }));
             },
             [ajaxSetting, dSearch, collapsedGroups]
@@ -872,15 +875,12 @@ const DataGrid = forwardRef(
                 case 'file':
                 case 'image':
                 case 'undo':
+                case 'restore':
                     // Execute the action directly since confirmation was already handled
-                    CustomFetch(
-                        s.url,
-                        'POST',
-                        { id: d[s.key] },
-                        (result) => {
-                            toast.success(result.message);
-                        }
-                    );
+                    CustomFetch(s.url, 'POST', { id: d[s.key] }, (result) => {
+                        toast.success(result.message);
+                        handleReload(); // Add reload to refresh data after action
+                    });
                     break;
                 case 'clone':
                     if (s.url && s.url !== '') {
@@ -1346,17 +1346,19 @@ const DataGrid = forwardRef(
                         if (iconConfig.formModal) {
                             // Get all rows in the group for bulk editing
                             const groupRows = getGroupRows(groupValue);
-                            const groupRowIds = groupRows.map(row => row[form?.primaryKey || 'id']);
-                            
+                            const groupRowIds = groupRows.map(
+                                (row) => row[form?.primaryKey || 'id']
+                            );
+
                             // Set bulk edit data
                             setBulkEditMode(true);
                             setBulkEditGroupData({
                                 groupValue: groupValue,
                                 groupRows: groupRows,
                                 groupRowIds: groupRowIds,
-                                iconConfig: iconConfig
+                                iconConfig: iconConfig,
                             });
-                            
+
                             // Open modal for bulk editing
                             modalOpen('update', null);
                         } else {
@@ -2374,8 +2376,11 @@ const DataGrid = forwardRef(
 
                         // Check if column is sortable based on metadata
                         const columnKey = column.id;
-                        const sortable = isColumnSortable(columnKey, columnsMetadata);
-                        
+                        const sortable = isColumnSortable(
+                            columnKey,
+                            columnsMetadata
+                        );
+
                         const commonProps = {
                             header: column.label,
                             defaultFlex: 1,
@@ -2481,20 +2486,26 @@ const DataGrid = forwardRef(
                                             ? column.filter.placeholder
                                             : 'All Options',
                                         dataSource: selectedDataSource,
-                                        searchable: column.filter.searchable !== false,
+                                        searchable:
+                                            column.filter.searchable !== false,
                                         // Enable clear functionality even when searchable is false
-                                        allowClearWhenNotSearchable: column.filter.searchable === false,
+                                        allowClearWhenNotSearchable:
+                                            column.filter.searchable === false,
                                         // Explicitly enable clear icon
                                         clearIcon: true,
                                     };
-                                    
+
                                     // Debug: Check if fix is applied
                                     if (column.filter.searchable === false) {
-                                        console.log('Filter Debug - searchable=false:', {
-                                            columnName: column.name || 'unknown',
-                                            props: filterEditorProps,
-                                            visnsDataGridVersion: 'v1.0.18'
-                                        });
+                                        console.log(
+                                            'Filter Debug - searchable=false:',
+                                            {
+                                                columnName:
+                                                    column.name || 'unknown',
+                                                props: filterEditorProps,
+                                                visnsDataGridVersion: 'v1.0.18',
+                                            }
+                                        );
                                     }
                                     break;
                                 default:
@@ -2638,7 +2649,9 @@ const DataGrid = forwardRef(
                                     filterEditor,
                                     filterEditorProps,
                                     relationName,
-                                    intelligentSortingConfig: tableSetting?.intelligentSorting || DEFAULT_INTELLIGENT_SORTING_CONFIG,
+                                    intelligentSortingConfig:
+                                        tableSetting?.intelligentSorting ||
+                                        DEFAULT_INTELLIGENT_SORTING_CONFIG,
                                 });
                             case 'relationArray':
                                 return renderRelationArrayColumn({
@@ -2647,7 +2660,9 @@ const DataGrid = forwardRef(
                                     filterEditor,
                                     filterEditorProps,
                                     relationName,
-                                    intelligentSortingConfig: tableSetting?.intelligentSorting || DEFAULT_INTELLIGENT_SORTING_CONFIG,
+                                    intelligentSortingConfig:
+                                        tableSetting?.intelligentSorting ||
+                                        DEFAULT_INTELLIGENT_SORTING_CONFIG,
                                 });
                             case 'richtext':
                                 return renderRichTextColumn({
@@ -2697,22 +2712,37 @@ const DataGrid = forwardRef(
                                     : column.id;
 
                                 // Auto-detect columns that should have word wrap enabled
-                                const shouldAutoEnableWordWrap = 
+                                const shouldAutoEnableWordWrap =
                                     column.wordWrap !== false && // Allow explicit disable with wordWrap: false
-                                    (
-                                        // Text-heavy column patterns
-                                        /^(task|description|notes?|comments?|content|message|details?|summary|reason|remarks?)$/i.test(columnId) ||
-                                        /.*_(task|description|notes?|comments?|content|message|details?|summary|reason|remarks?)$/i.test(columnId) ||
-                                        /(task|description|notes?|comments?|content|message|details?|summary|reason|remarks?)_.*$/i.test(columnId) ||
+                                    // Text-heavy column patterns
+                                    (/^(task|description|notes?|comments?|content|message|details?|summary|reason|remarks?)$/i.test(
+                                        columnId
+                                    ) ||
+                                        /.*_(task|description|notes?|comments?|content|message|details?|summary|reason|remarks?)$/i.test(
+                                            columnId
+                                        ) ||
+                                        /(task|description|notes?|comments?|content|message|details?|summary|reason|remarks?)_.*$/i.test(
+                                            columnId
+                                        ) ||
                                         // Check for long labels that might indicate text content
-                                        (column.label && column.label.length > 15 && /description|notes|comments|details|content/i.test(column.label))
-                                    );
+                                        (column.label &&
+                                            column.label.length > 15 &&
+                                            /description|notes|comments|details|content/i.test(
+                                                column.label
+                                            )));
 
-                                const finalWordWrap = column.wordWrap === true || shouldAutoEnableWordWrap;
+                                const finalWordWrap =
+                                    column.wordWrap === true ||
+                                    shouldAutoEnableWordWrap;
 
                                 // Debug logging for word wrap detection
-                                if (shouldAutoEnableWordWrap && column.wordWrap !== true) {
-                                    console.log(`DataGrid: Auto-enabled wordWrap for column "${columnId}" (${column.label})`);
+                                if (
+                                    shouldAutoEnableWordWrap &&
+                                    column.wordWrap !== true
+                                ) {
+                                    console.log(
+                                        `DataGrid: Auto-enabled wordWrap for column "${columnId}" (${column.label})`
+                                    );
                                 }
 
                                 return {
@@ -2720,7 +2750,9 @@ const DataGrid = forwardRef(
                                     name: columnId,
                                     filterEditor: filterEditor,
                                     filterEditorProps: filterEditorProps,
-                                    className: finalWordWrap ? 'cell-word-wrap' : '',
+                                    className: finalWordWrap
+                                        ? 'cell-word-wrap'
+                                        : '',
                                     render: ({ data }) => {
                                         if (
                                             data &&
@@ -2751,7 +2783,10 @@ const DataGrid = forwardRef(
                                             }
 
                                             // If removeFormat or stripHtml is true, strip HTML tags
-                                            if (column.removeFormat || column.stripHtml) {
+                                            if (
+                                                column.removeFormat ||
+                                                column.stripHtml
+                                            ) {
                                                 content = content.replace(
                                                     /<\/?[^>]+(>|$)/g,
                                                     ''
@@ -3093,15 +3128,22 @@ const DataGrid = forwardRef(
                 {/* Top container with search, action buttons, and auto-refresh */}
                 {/* Only show top container if there are controls to display */}
                 {(() => {
-                    const hasSearchOrCreate = !form.searchDisable || !form.createDisable;
-                    const hasAutoRefresh = !shouldRelocateAutoRefresh() && ajaxSetting && ajaxSetting.autoRefresh !== undefined;
-                    
-                    // If DataGridSearch would return null (both search and create disabled), 
+                    const hasSearchOrCreate =
+                        !form.searchDisable || !form.createDisable;
+                    const hasAutoRefresh =
+                        !shouldRelocateAutoRefresh() &&
+                        ajaxSetting &&
+                        ajaxSetting.autoRefresh !== undefined;
+
+                    // If DataGridSearch would return null (both search and create disabled),
                     // only show container if there are other controls besides auto-refresh
-                    if (form.searchDisable === true && form.createDisable === true) {
+                    if (
+                        form.searchDisable === true &&
+                        form.createDisable === true
+                    ) {
                         return false; // Hide AutoRefreshControls when it would be the only control
                     }
-                    
+
                     return hasSearchOrCreate || hasAutoRefresh;
                 })() && (
                     <div className={styles.dataGridTopContainer}>

package/src/components/generic/GenericDetail.jsx

@@ -71,6 +71,7 @@ import GenericEditableTable from './GenericEditableTable';
 import MergeEntity from '../MergeEntity';
 import MultiSelect from '../MultiSelect';
 import QrCode from '../QrCode';
+import StagePopupModal from './StagePopupModal';
 import Table from '../DataGrid';
 import TableFilter from '../TableFilter';
 
@@ -157,6 +158,10 @@ function GenericDetail({
     const [total, setTotal] = useState(0);
     const [windowHeight, setWindowHeight] = useState(window.innerHeight);
 
+    /** Stage Popup States */
+    const [showStagePopup, setShowStagePopup] = useState(false);
+    const [stagePopupData, setStagePopupData] = useState(null);
+
     /** Ocr States */
     const [ocrRowsSelected, setOcrRowsSelected] = useState('');
 
@@ -297,6 +302,45 @@ function GenericDetail({
     };
 
     const handleStageUpdate = async (stage, type) => {
+        try {
+            // Check if stage has popup configuration
+            if (stage.popup?.enabled) {
+                setStagePopupData({ stage, type });
+                setShowStagePopup(true);
+                return;
+            }
+
+            // If no popup, proceed with normal stage update
+            await performStageUpdate(stage, type);
+        } catch (error) {
+            console.error(error);
+        }
+    };
+
+    const handleStagePopupConfirm = async (popupFormData) => {
+        try {
+            setShowStagePopup(false);
+            
+            if (!stagePopupData) return;
+            
+            const { stage, type } = stagePopupData;
+            
+            // Proceed with normal stage update, but include popup form data
+            await performStageUpdate(stage, type, popupFormData);
+            
+            setStagePopupData(null);
+        } catch (error) {
+            console.error('Stage popup confirm error:', error);
+            toast.error('Failed to update stage');
+        }
+    };
+
+    const handleStagePopupCancel = () => {
+        setShowStagePopup(false);
+        setStagePopupData(null);
+    };
+
+    const performStageUpdate = async (stage, type, additionalData = {}) => {
         try {
             const activeTab = subnav.find((s) => s.show === true);
 
@@ -307,7 +351,7 @@ function GenericDetail({
                     setActiveStage(stage.id);
                 } else if (type === 'stageCounter') {
                     // Handle new stageCounter functionality
-                    console.log('handleStageUpdate called with stageCounter type:', { stage, data, stages });
+                    console.log('performStageUpdate called with stageCounter type:', { stage, data, stages });
                     
                     const stageConfig = stages.stageConfig || activeTabConfig.stages?.stageConfig;
                     if (!stageConfig?.toggleable || !stageConfig?.toggleConfig) {
@@ -319,13 +363,6 @@ function GenericDetail({
                     const stageDataArray = data[stageConfig.key] || [];
                     const currentStage = stageDataArray.find(s => s.id === stage.id);
                     
-                    console.log('Stage data lookup:', { 
-                        stageDataKey: stageConfig.key, 
-                        stageDataArray, 
-                        searchingForId: stage.id, 
-                        currentStage 
-                    });
-                    
                     if (!currentStage) {
                         console.warn('Stage not found in data');
                         return;
@@ -337,26 +374,19 @@ function GenericDetail({
                     const targetStatus = isActive 
                         ? stageConfig.toggleConfig.inactiveStatusValue 
                         : stageConfig.toggleConfig.activeStatusValue;
-                    
-                    console.log('Status toggle logic:', {
-                        currentStatus,
-                        activeStatusValue: stageConfig.toggleConfig.activeStatusValue,
-                        inactiveStatusValue: stageConfig.toggleConfig.inactiveStatusValue,
-                        isActive,
-                        targetStatus
-                    });
 
                     // Build API URL
                     let url = stageConfig.toggleConfig.updateUrl;
                     url = url.replace('{id}', routeParams[stages.urlParam]);
                     url = url.replace('{stage_id}', stage.id);
                     
-                    // Make API call
+                    // Make API call with additional data from popup
                     const res = await CustomFetch(
                         url,
                         stageConfig.toggleConfig.updateMethod || 'PUT',
                         {
                             [stageConfig.toggleConfig.updateKey]: targetStatus,
+                            ...additionalData
                         }
                     );
 
@@ -369,7 +399,7 @@ function GenericDetail({
                     }
                 } else if (type === 'legacy_toggle') {
                     // Handle legacy toggle functionality - toggle between current stage and previous
-                    console.log('handleStageUpdate called with legacy_toggle type:', { stage, data, stages });
+                    console.log('performStageUpdate called with legacy_toggle type:', { stage, data, stages });
                     
                     if (
                         stages &&
@@ -392,21 +422,16 @@ function GenericDetail({
                             // Stage is not completed, move to this stage
                             targetStatus = stage.id;
                         }
-                        
-                        console.log('Legacy toggle logic:', {
-                            currentStatus,
-                            clickedStageId: stage.id,
-                            targetStatus,
-                            isToggleBack: currentStatus >= stage.id
-                        });
 
                         const url = `${stages.url}/${routeParams[stages.urlParam]}`;
 
+                        // Include additional data from popup
                         const res = await CustomFetch(
                             url,
                             stages.method || 'PUT',
                             {
                                 [stages.key]: targetStatus,
+                                ...additionalData
                             }
                         );
 
@@ -433,6 +458,7 @@ function GenericDetail({
 
                         const res = await CustomFetch(url, 'POST', {
                             [activeTabConfig.stages.key]: stage.id,
+                            ...additionalData
                         });
 
                         if (res.data.error === '') {
@@ -457,6 +483,7 @@ function GenericDetail({
                             stages.method || 'POST',
                             {
                                 [stages.key]: stage.id,
+                                ...additionalData
                             }
                         );
 
@@ -3130,6 +3157,16 @@ function GenericDetail({
                     </div>
                 </div>
             </Popup>
+
+            <StagePopupModal
+                show={showStagePopup}
+                stage={stagePopupData?.stage}
+                popupConfig={stagePopupData?.stage?.popup}
+                onConfirm={handleStagePopupConfirm}
+                onCancel={handleStagePopupCancel}
+                entityData={data}
+                routeParams={routeParams}
+            />
         </>
     );
 }

package/src/components/generic/StagePopupModal.jsx

@@ -0,0 +1,451 @@
+import React, { useState, useEffect } from 'react';
+import Swal from 'sweetalert2';
+import CustomFetch from '../Fetch';
+import styles from '../styles/StagePopupModal.module.scss';
+
+const StagePopupModal = ({
+    show,
+    stage,
+    popupConfig,
+    onConfirm,
+    onCancel,
+    entityData = {},
+    routeParams = {}
+}) => {
+    const [formData, setFormData] = useState({});
+    const [fieldOptions, setFieldOptions] = useState({});
+    const [loading, setLoading] = useState(false);
+    const [validationErrors, setValidationErrors] = useState({});
+
+    useEffect(() => {
+        if (show && popupConfig?.fields) {
+            initializeForm();
+        }
+    }, [show, popupConfig]);
+
+    // Re-render form fields when fieldOptions change
+    useEffect(() => {
+        console.log('[StagePopupModal] useEffect triggered:', { 
+            show, 
+            loading, 
+            fieldOptionsKeys: Object.keys(fieldOptions), 
+            fieldOptions 
+        });
+        if (show && !loading && Object.keys(fieldOptions).length > 0) {
+            console.log('[StagePopupModal] Re-rendering form fields after fieldOptions update');
+            renderFormFields();
+        }
+    }, [fieldOptions, loading, formData, validationErrors, show]);
+
+    const initializeForm = async () => {
+        const initialData = {};
+        const options = {};
+
+        setLoading(true);
+
+        for (const field of popupConfig.fields) {
+            // Set default values
+            if (field.value !== undefined) {
+                initialData[field.id] = field.value;
+            } else if (field.urlParam && routeParams[field.urlParam]) {
+                initialData[field.id] = routeParams[field.urlParam];
+            } else if (entityData[field.id] !== undefined) {
+                initialData[field.id] = entityData[field.id];
+            }
+
+            // Load dropdown options
+            if (field.type === 'select' && field.url) {
+                try {
+                    let url = field.url;
+                    
+                    // Replace URL parameters
+                    Object.keys(routeParams).forEach(key => {
+                        url = url.replace(`{${key}}`, routeParams[key]);
+                    });
+
+                    const response = await CustomFetch(url, 'POST');
+                    console.log(`[StagePopupModal] Response for ${field.id}:`, response);
+                    console.log(`[StagePopupModal] Response.data:`, response.data);
+                    
+                    if (response.data && !response.data.error) {
+                        // Handle both nested (response.data.data) and direct (response.data) array formats
+                        const optionsData = Array.isArray(response.data.data) ? response.data.data : 
+                                          Array.isArray(response.data) ? response.data : [];
+                        console.log(`[StagePopupModal] Processed options for ${field.id}:`, optionsData);
+                        options[field.id] = optionsData;
+                    }
+                } catch (error) {
+                    console.error(`Failed to load options for ${field.id}:`, error);
+                    options[field.id] = [];
+                }
+            }
+        }
+
+        console.log(`[StagePopupModal] Final options object:`, options);
+        console.log(`[StagePopupModal] Setting fieldOptions state:`, options);
+        
+        setFormData(initialData);
+        setFieldOptions(options);
+        setLoading(false);
+    };
+
+    const handleFieldChange = (fieldId, value) => {
+        setFormData(prev => ({
+            ...prev,
+            [fieldId]: value
+        }));
+
+        // Clear validation error for this field
+        if (validationErrors[fieldId]) {
+            setValidationErrors(prev => ({
+                ...prev,
+                [fieldId]: null
+            }));
+        }
+    };
+
+    const validateForm = () => {
+        const errors = {};
+
+        popupConfig.fields?.forEach(field => {
+            if (field.required && (!formData[field.id] || formData[field.id] === '')) {
+                errors[field.id] = `${field.label} is required`;
+            }
+
+            if (field.validation) {
+                const value = formData[field.id];
+                
+                if (field.validation.minLength && value && value.length < field.validation.minLength) {
+                    errors[field.id] = `${field.label} must be at least ${field.validation.minLength} characters`;
+                }
+                
+                if (field.validation.maxLength && value && value.length > field.validation.maxLength) {
+                    errors[field.id] = `${field.label} must not exceed ${field.validation.maxLength} characters`;
+                }
+            }
+        });
+
+        setValidationErrors(errors);
+        return Object.keys(errors).length === 0;
+    };
+
+    const handleConfirm = () => {
+        if (!validateForm()) {
+            return;
+        }
+
+        const dataToSend = {};
+        
+        // Only include fields specified in saveFields, or all fields if not specified
+        const fieldsToSave = popupConfig.saveFields || popupConfig.fields?.map(f => f.id) || [];
+        
+        fieldsToSave.forEach(fieldId => {
+            if (formData[fieldId] !== undefined) {
+                dataToSend[fieldId] = formData[fieldId];
+            }
+        });
+
+        onConfirm(dataToSend);
+    };
+
+    const renderField = (field) => {
+        const value = formData[field.id] || '';
+        const hasError = validationErrors[field.id];
+        const fieldClass = `${styles.field} ${hasError ? styles.fieldError : ''}`;
+
+        switch (field.type) {
+            case 'select':
+                return (
+                    <div key={field.id} className={fieldClass}>
+                        <label className={styles.label}>
+                            {field.label}
+                            {field.required && <span className={styles.required}>*</span>}
+                        </label>
+                        <select
+                            className={styles.select}
+                            value={value}
+                            onChange={(e) => handleFieldChange(field.id, e.target.value)}
+                            disabled={loading}
+                        >
+                            <option value="">-- Select {field.label} --</option>
+                            {(() => {
+                                console.log(`[StagePopupModal] Rendering JSX options for ${field.id}:`, fieldOptions[field.id]);
+                                return (fieldOptions[field.id] || []).map(option => (
+                                    <option key={option.id || option.value} value={option.id || option.value}>
+                                        {option.label || option.name || option.text}
+                                    </option>
+                                ));
+                            })()}
+                        </select>
+                        {hasError && <span className={styles.errorText}>{validationErrors[field.id]}</span>}
+                    </div>
+                );
+
+            case 'textarea':
+                return (
+                    <div key={field.id} className={fieldClass}>
+                        <label className={styles.label}>
+                            {field.label}
+                            {field.required && <span className={styles.required}>*</span>}
+                        </label>
+                        <textarea
+                            className={styles.textarea}
+                            value={value}
+                            onChange={(e) => handleFieldChange(field.id, e.target.value)}
+                            placeholder={field.placeholder}
+                            rows={field.rows || 3}
+                            disabled={loading}
+                        />
+                        {hasError && <span className={styles.errorText}>{validationErrors[field.id]}</span>}
+                    </div>
+                );
+
+            case 'date':
+                return (
+                    <div key={field.id} className={fieldClass}>
+                        <label className={styles.label}>
+                            {field.label}
+                            {field.required && <span className={styles.required}>*</span>}
+                        </label>
+                        <input
+                            type="date"
+                            className={styles.input}
+                            value={value}
+                            onChange={(e) => handleFieldChange(field.id, e.target.value)}
+                            disabled={loading}
+                        />
+                        {hasError && <span className={styles.errorText}>{validationErrors[field.id]}</span>}
+                    </div>
+                );
+
+            case 'datetime':
+                return (
+                    <div key={field.id} className={fieldClass}>
+                        <label className={styles.label}>
+                            {field.label}
+                            {field.required && <span className={styles.required}>*</span>}
+                        </label>
+                        <input
+                            type="datetime-local"
+                            className={styles.input}
+                            value={value}
+                            onChange={(e) => handleFieldChange(field.id, e.target.value)}
+                            disabled={loading}
+                        />
+                        {hasError && <span className={styles.errorText}>{validationErrors[field.id]}</span>}
+                    </div>
+                );
+
+            case 'number':
+                return (
+                    <div key={field.id} className={fieldClass}>
+                        <label className={styles.label}>
+                            {field.label}
+                            {field.required && <span className={styles.required}>*</span>}
+                        </label>
+                        <input
+                            type="number"
+                            className={styles.input}
+                            value={value}
+                            onChange={(e) => handleFieldChange(field.id, e.target.value)}
+                            placeholder={field.placeholder}
+                            min={field.min}
+                            max={field.max}
+                            step={field.step}
+                            disabled={loading}
+                        />
+                        {hasError && <span className={styles.errorText}>{validationErrors[field.id]}</span>}
+                    </div>
+                );
+
+            case 'text':
+            default:
+                return (
+                    <div key={field.id} className={fieldClass}>
+                        <label className={styles.label}>
+                            {field.label}
+                            {field.required && <span className={styles.required}>*</span>}
+                        </label>
+                        <input
+                            type="text"
+                            className={styles.input}
+                            value={value}
+                            onChange={(e) => handleFieldChange(field.id, e.target.value)}
+                            placeholder={field.placeholder}
+                            disabled={loading}
+                        />
+                        {hasError && <span className={styles.errorText}>{validationErrors[field.id]}</span>}
+                    </div>
+                );
+        }
+    };
+
+    useEffect(() => {
+        if (show && popupConfig) {
+            if (popupConfig.type === 'confirm') {
+                // Simple confirmation dialog
+                Swal.fire({
+                    title: popupConfig.title || 'Confirm Action',
+                    text: popupConfig.message || 'Are you sure you want to proceed?',
+                    icon: 'question',
+                    showCancelButton: true,
+                    confirmButtonText: popupConfig.confirmText || 'Yes, proceed',
+                    cancelButtonText: popupConfig.cancelText || 'Cancel',
+                    customClass: {
+                        popup: styles.swalPopup,
+                        confirmButton: styles.swalConfirm,
+                        cancelButton: styles.swalCancel
+                    }
+                }).then((result) => {
+                    if (result.isConfirmed) {
+                        onConfirm({});
+                    } else {
+                        onCancel();
+                    }
+                });
+            } else if (popupConfig.type === 'form') {
+                // Custom form dialog
+                const formHTML = `
+                    <div class="${styles.stagePopupForm}">
+                        ${popupConfig.message ? `<p class="${styles.message}">${popupConfig.message}</p>` : ''}
+                        <div id="stage-popup-fields" class="${styles.fields}">
+                            ${loading ? '<div class="' + styles.loading + '">Loading...</div>' : ''}
+                        </div>
+                    </div>
+                `;
+
+                Swal.fire({
+                    title: popupConfig.title || 'Additional Information Required',
+                    html: formHTML,
+                    showCancelButton: true,
+                    confirmButtonText: popupConfig.confirmText || 'Complete Stage',
+                    cancelButtonText: popupConfig.cancelText || 'Cancel',
+                    customClass: {
+                        popup: styles.swalPopup,
+                        confirmButton: styles.swalConfirm,
+                        cancelButton: styles.swalCancel,
+                        htmlContainer: styles.swalHtmlContainer
+                    },
+                    didOpen: () => {
+                        renderFormFields();
+                    },
+                    preConfirm: () => {
+                        if (!validateForm()) {
+                            Swal.showValidationMessage('Please correct the errors below');
+                            return false;
+                        }
+                        return true;
+                    }
+                }).then((result) => {
+                    if (result.isConfirmed) {
+                        handleConfirm();
+                    } else {
+                        onCancel();
+                    }
+                });
+            }
+        }
+    }, [show, popupConfig, loading, formData, fieldOptions]);
+
+    const renderFormFields = () => {
+        console.log('[StagePopupModal] renderFormFields called');
+        const fieldsContainer = document.getElementById('stage-popup-fields');
+        console.log('[StagePopupModal] fieldsContainer:', fieldsContainer);
+        console.log('[StagePopupModal] loading:', loading);
+        
+        if (!fieldsContainer || loading) {
+            console.log('[StagePopupModal] Early return - no container or loading');
+            return;
+        }
+
+        console.log('[StagePopupModal] Clearing container and rendering fields');
+        fieldsContainer.innerHTML = '';
+
+        console.log('[StagePopupModal] popupConfig.fields:', popupConfig.fields);
+        popupConfig.fields?.forEach(field => {
+            console.log(`[StagePopupModal] Processing field: ${field.id}, type: ${field.type}`);
+            const fieldElement = document.createElement('div');
+            fieldElement.className = styles.fieldWrapper;
+            
+            const fieldHTML = renderFieldHTML(field);
+            console.log(`[StagePopupModal] Generated HTML for ${field.id}:`, fieldHTML);
+            fieldElement.innerHTML = fieldHTML;
+            
+            fieldsContainer.appendChild(fieldElement);
+            
+            // Add event listeners
+            const input = fieldElement.querySelector('input, select, textarea');
+            if (input) {
+                input.addEventListener('change', (e) => {
+                    handleFieldChange(field.id, e.target.value);
+                });
+            }
+        });
+    };
+
+    const renderFieldHTML = (field) => {
+        const value = formData[field.id] || '';
+        const hasError = validationErrors[field.id];
+        const requiredStar = field.required ? '<span class="' + styles.required + '">*</span>' : '';
+
+        switch (field.type) {
+            case 'select':
+                console.log(`[StagePopupModal] Rendering HTML options for ${field.id}:`, fieldOptions[field.id]);
+                const options = (fieldOptions[field.id] || []).map(option => 
+                    `<option value="${option.id || option.value}" ${value === (option.id || option.value) ? 'selected' : ''}>
+                        ${option.label || option.name || option.text}
+                    </option>`
+                ).join('');
+
+                return `
+                    <label class="${styles.label}">${field.label}${requiredStar}</label>
+                    <select class="${styles.select}" data-field-id="${field.id}">
+                        <option value="">-- Select ${field.label} --</option>
+                        ${options}
+                    </select>
+                    ${hasError ? `<span class="${styles.errorText}">${validationErrors[field.id]}</span>` : ''}
+                `;
+
+            case 'textarea':
+                return `
+                    <label class="${styles.label}">${field.label}${requiredStar}</label>
+                    <textarea class="${styles.textarea}" data-field-id="${field.id}" placeholder="${field.placeholder || ''}" rows="${field.rows || 3}">${value}</textarea>
+                    ${hasError ? `<span class="${styles.errorText}">${validationErrors[field.id]}</span>` : ''}
+                `;
+
+            case 'date':
+                return `
+                    <label class="${styles.label}">${field.label}${requiredStar}</label>
+                    <input type="date" class="${styles.input}" data-field-id="${field.id}" value="${value}">
+                    ${hasError ? `<span class="${styles.errorText}">${validationErrors[field.id]}</span>` : ''}
+                `;
+
+            case 'datetime':
+                return `
+                    <label class="${styles.label}">${field.label}${requiredStar}</label>
+                    <input type="datetime-local" class="${styles.input}" data-field-id="${field.id}" value="${value}">
+                    ${hasError ? `<span class="${styles.errorText}">${validationErrors[field.id]}</span>` : ''}
+                `;
+
+            case 'number':
+                return `
+                    <label class="${styles.label}">${field.label}${requiredStar}</label>
+                    <input type="number" class="${styles.input}" data-field-id="${field.id}" value="${value}" placeholder="${field.placeholder || ''}" min="${field.min || ''}" max="${field.max || ''}" step="${field.step || ''}">
+                    ${hasError ? `<span class="${styles.errorText}">${validationErrors[field.id]}</span>` : ''}
+                `;
+
+            case 'text':
+            default:
+                return `
+                    <label class="${styles.label}">${field.label}${requiredStar}</label>
+                    <input type="text" class="${styles.input}" data-field-id="${field.id}" value="${value}" placeholder="${field.placeholder || ''}">
+                    ${hasError ? `<span class="${styles.errorText}">${validationErrors[field.id]}</span>` : ''}
+                `;
+        }
+    };
+
+    // This component doesn't render directly - it uses SweetAlert2 for the modal
+    return null;
+};
+
+export default StagePopupModal;

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

@@ -0,0 +1,234 @@
+.stagePopupForm {
+    text-align: left;
+    min-width: 400px;
+}
+
+.message {
+    margin-bottom: 20px;
+    color: #666;
+    font-size: 14px;
+    line-height: 1.4;
+}
+
+.fields {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.fieldWrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+
+.field {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+
+.fieldError {
+    .input,
+    .select,
+    .textarea {
+        border-color: #e74c3c;
+        box-shadow: 0 0 0 2px rgba(231, 76, 60, 0.1);
+    }
+}
+
+.label {
+    font-weight: 500;
+    color: #333;
+    font-size: 14px;
+    margin-bottom: 4px;
+}
+
+.required {
+    color: #e74c3c;
+    margin-left: 2px;
+}
+
+.input,
+.select,
+.textarea {
+    padding: 8px 12px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    font-size: 14px;
+    font-family: inherit;
+    transition: border-color 0.2s ease, box-shadow 0.2s ease;
+    
+    &:focus {
+        outline: none;
+        border-color: #3498db;
+        box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.1);
+    }
+    
+    &:disabled {
+        background-color: #f8f9fa;
+        color: #6c757d;
+        cursor: not-allowed;
+    }
+}
+
+.select {
+    cursor: pointer;
+    
+    &:disabled {
+        cursor: not-allowed;
+    }
+}
+
+.textarea {
+    resize: vertical;
+    min-height: 80px;
+}
+
+.errorText {
+    color: #e74c3c;
+    font-size: 12px;
+    margin-top: 4px;
+}
+
+.loading {
+    text-align: center;
+    padding: 20px;
+    color: #666;
+    font-style: italic;
+}
+
+// SweetAlert2 customizations
+.swalPopup {
+    border-radius: 8px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+}
+
+.swalHtmlContainer {
+    padding: 0 !important;
+    margin: 16px 0 !important;
+}
+
+.swalConfirm {
+    background-color: #3498db !important;
+    border: none !important;
+    border-radius: 4px !important;
+    font-weight: 500 !important;
+    padding: 10px 20px !important;
+    
+    &:hover {
+        background-color: #2980b9 !important;
+    }
+    
+    &:focus {
+        box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.3) !important;
+    }
+}
+
+.swalCancel {
+    background-color: #95a5a6 !important;
+    border: none !important;
+    border-radius: 4px !important;
+    font-weight: 500 !important;
+    padding: 10px 20px !important;
+    
+    &:hover {
+        background-color: #7f8c8d !important;
+    }
+    
+    &:focus {
+        box-shadow: 0 0 0 2px rgba(149, 165, 166, 0.3) !important;
+    }
+}
+
+// Responsive adjustments
+@media (max-width: 768px) {
+    .stagePopupForm {
+        min-width: 300px;
+    }
+    
+    .fields {
+        gap: 12px;
+    }
+    
+    .input,
+    .select,
+    .textarea {
+        font-size: 16px; // Prevents zoom on iOS
+    }
+}
+
+// Theme variations
+.stagePopupForm {
+    &.theme-dark {
+        .label {
+            color: #f8f9fa;
+        }
+        
+        .message {
+            color: #adb5bd;
+        }
+        
+        .input,
+        .select,
+        .textarea {
+            background-color: #343a40;
+            border-color: #495057;
+            color: #f8f9fa;
+            
+            &:focus {
+                border-color: #3498db;
+                box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
+            }
+            
+            &:disabled {
+                background-color: #495057;
+                color: #6c757d;
+            }
+        }
+        
+        .select option {
+            background-color: #343a40;
+            color: #f8f9fa;
+        }
+    }
+}
+
+// Animation for field validation
+.field {
+    transition: all 0.2s ease;
+}
+
+.fieldError {
+    animation: shake 0.3s ease-in-out;
+}
+
+@keyframes shake {
+    0%, 100% { transform: translateX(0); }
+    25% { transform: translateX(-2px); }
+    75% { transform: translateX(2px); }
+}
+
+// Loading state
+.loading {
+    position: relative;
+    
+    &::after {
+        content: '';
+        position: absolute;
+        top: 50%;
+        right: 20px;
+        transform: translateY(-50%);
+        width: 16px;
+        height: 16px;
+        border: 2px solid #ddd;
+        border-top: 2px solid #3498db;
+        border-radius: 50%;
+        animation: spin 1s linear infinite;
+    }
+}
+
+@keyframes spin {
+    0% { transform: translateY(-50%) rotate(0deg); }
+    100% { transform: translateY(-50%) rotate(360deg); }
+}

package/src/components/utils/ConfirmDialog.js

@@ -1,5 +1,5 @@
 import Swal from 'sweetalert2';
-import '../crm/generic/styles/SweetAlert.module.css';
+import '../styles/SweetAlert.module.css';
 
 /**
  * A utility function that replaces react-confirm-alert with SweetAlert2

package/src/index.js

@@ -63,6 +63,7 @@ import GenericQuote from './components/generic/GenericQuote';
 import GenericReport from './components/generic/GenericReport';
 import GenericSort from './components/generic/GenericSort';
 import NotificationList from './components/generic/NotificationList';
+import StagePopupModal from './components/generic/StagePopupModal';
 
 /** Proposal Components */
 import ProposalTemplateSectionManager from './components/proposal/ProposalTemplateSectionManager';
@@ -129,6 +130,7 @@ export {
     SelectList,
     Select,
     SortableList,
+    StagePopupModal,
     Table,
     TableFilter,
     VariableInserter,