@visns-studio/visns-components 5.15.23 → 5.15.25

package/package.json

@@ -8,15 +8,15 @@
         "@inovua/reactdatagrid-community": "^5.10.2",
         "@inovua/reactdatagrid-enterprise": "^5.10.2",
         "@mapbox/mapbox-gl-geocoder": "^5.1.2",
-        "@nivo/bar": "^0.99.0",
-        "@nivo/core": "^0.99.0",
-        "@nivo/line": "^0.99.0",
-        "@nivo/pie": "^0.99.0",
-        "@react-pdf/renderer": "^4.3.0",
-        "@tanstack/react-query": "^5.89.0",
+        "@nivo/bar": "^0.87.0",
+        "@nivo/core": "^0.87.0",
+        "@nivo/line": "^0.87.0",
+        "@nivo/pie": "^0.87.0",
+        "@react-pdf/renderer": "^4.3.1",
+        "@tanstack/react-query": "^5.90.2",
         "@tinymce/miniature": "^6.0.0",
         "@tinymce/tinymce-react": "^6.3.0",
-        "@uiw/react-color": "^2.8.0",
+        "@uiw/react-color": "^2.9.0",
         "@visns-studio/visns-datagrid-community": "1.1.0",
         "@visns-studio/visns-datagrid-enterprise": "1.1.0",
         "@vitejs/plugin-react": "^4.7.0",
@@ -27,7 +27,7 @@
         "dayjs": "^1.11.18",
         "fabric": "^6.7.1",
         "file-saver": "^2.0.5",
-        "framer-motion": "^12.23.14",
+        "framer-motion": "^12.23.22",
         "html-react-parser": "^5.2.6",
         "html2canvas": "^1.4.1",
         "lodash": "^4.17.21",
@@ -35,7 +35,7 @@
         "lucide-react": "^0.544.0",
         "mapbox-gl": "^3.15.0",
         "moment": "^2.30.1",
-        "motion": "^12.23.14",
+        "motion": "^12.23.22",
         "numeral": "^2.0.6",
         "pluralize": "^8.0.0",
         "qrcode.react": "^4.2.0",
@@ -86,7 +86,7 @@
         "mini-css-extract-plugin": "^2.9.4",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
-        "sass": "^1.92.1",
+        "sass": "^1.93.2",
         "sass-loader": "^16.0.5"
     },
     "peerDependencies": {
@@ -94,7 +94,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.15.23",
+    "version": "5.15.25",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/BusinessCardOcr.jsx

@@ -548,6 +548,33 @@ const BusinessCardOcr = ({
         }
     };
 
+    // AWS Textract cloud OCR
+    const performCloudOCR = async (imageBlob) => {
+        const formData = new FormData();
+        formData.append('image', imageBlob, 'business-card.jpg');
+
+        setOcrProgress(20);
+
+        try {
+            const response = await CustomFetch(
+                '/ajax/ocr/processBusinessCardWithTextract',
+                'POST',
+                formData
+            );
+
+            setOcrProgress(100);
+
+            if (response.data && response.data.success) {
+                return response.data.data.extracted_data;
+            } else {
+                throw new Error(response.data?.message || 'Cloud OCR failed');
+            }
+        } catch (error) {
+            console.error('Cloud OCR error:', error);
+            throw error;
+        }
+    };
+
     const processBusinessCard = async () => {
         if (!capturedImage) return;
 
@@ -556,11 +583,29 @@ const BusinessCardOcr = ({
         setOcrProgress(0);
 
         try {
-            const text = await performAdvancedOCR(capturedImage);
-            const parsedData = intelligentFieldMapping(text);
-            setExtractedData({ ...parsedData, rawText: text });
+            let parsedData;
+
+            // Try AWS Textract first (cloud-based, high accuracy)
+            try {
+                console.log('[OCR] Attempting AWS Textract...');
+                toast.info('Processing with AWS Textract...', { autoClose: 2000 });
+                parsedData = await performCloudOCR(capturedImage);
+                console.log('[OCR] AWS Textract successful:', parsedData);
+                toast.success('Business card processed with AWS Textract!');
+            } catch (cloudError) {
+                // Fallback to local Tesseract.js
+                console.warn('[OCR] AWS Textract failed, falling back to Tesseract.js:', cloudError);
+                toast.warning('Cloud OCR unavailable, using local processing...', { autoClose: 2000 });
+
+                const text = await performAdvancedOCR(capturedImage);
+                parsedData = intelligentFieldMapping(text);
+                parsedData.rawText = text;
+
+                toast.success('Business card processed locally!');
+            }
+
+            setExtractedData(parsedData);
             setCurrentStep('results');
-            toast.success('Business card processed successfully!');
         } catch (error) {
             console.error('OCR Error:', error);
             toast.error('Failed to process business card. Please try again.');

package/src/components/DataGrid.jsx

@@ -28,7 +28,7 @@ import React, {
     useRef,
     useState,
 } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 import debounce from 'lodash.debounce';
 import moment from 'moment';
 import 'reactjs-popup/dist/index.css';
@@ -86,6 +86,7 @@ import DataGridSearch from './controls/DataGridSearch';
 import AutoRefreshControls from './controls/AutoRefreshControls';
 import AudioPlayer from './controls/AudioPlayer';
 import GalleryModal from './modals/GalleryModal';
+import ImportWizardModal from './ImportWizardModal';
 import {
     renderBooleanColumn,
     renderCurrencyColumn,
@@ -253,10 +254,12 @@ const DataGrid = forwardRef(
             style,
             tableSetting,
             userProfile = null,
+            onDataReload,
         },
         ref
     ) => {
         const navigate = useNavigate();
+        const routeParams = useParams();
 
         /**
          * DEBUG: Settings Configuration Tracking
@@ -314,6 +317,9 @@ const DataGrid = forwardRef(
         const [bulkEditMode, setBulkEditMode] = useState(false);
         const [bulkEditGroupData, setBulkEditGroupData] = useState(null);
 
+        /** Import Modal States */
+        const [showImportModal, setShowImportModal] = useState(false);
+
         /** Modal Functions */
         const modalOpen = (formType, formId) => {
             setModalShow(true);
@@ -327,6 +333,29 @@ const DataGrid = forwardRef(
             setBulkEditGroupData(null);
         };
 
+        /** Import Modal Functions */
+        const handleBulkUploadClick = () => {
+            console.log('[DataGrid] Opening import modal with:', {
+                paramValue,
+                pageData,
+                routeParams,
+                'pageData?.id': pageData?.id,
+                'routeParams.dataId': routeParams.dataId,
+                'form.bulkUpload': form.bulkUpload
+            });
+            setShowImportModal(true);
+        };
+
+        const handleImportComplete = () => {
+            setShowImportModal(false);
+            // Trigger data refresh
+            loadData();
+            // Also trigger parent page data reload if callback provided
+            if (onDataReload) {
+                onDataReload();
+            }
+        };
+
         useEffect(() => {
             setFormData(form);
         }, [form]);
@@ -3423,6 +3452,12 @@ const DataGrid = forwardRef(
                 })() && (
                     <div className={styles.dataGridTopContainer}>
                         <div className={styles.dataGridTopLeftContainer}>
+                            {(() => {
+                                console.log('[DataGrid] Rendering DataGridSearch with form:', form);
+                                console.log('[DataGrid] form.bulkUpload:', form.bulkUpload);
+                                console.log('[DataGrid] paramValue:', paramValue);
+                                return null;
+                            })()}
                             <DataGridSearch
                                 form={form}
                                 search={search}
@@ -3433,6 +3468,7 @@ const DataGrid = forwardRef(
                                 paramValue={paramValue}
                                 pageData={pageData}
                                 pageSetting={pageSetting}
+                                onBulkUploadClick={handleBulkUploadClick}
                             />
                         </div>
                         <div className={styles.dataGridTopRightContainer}>
@@ -4100,6 +4136,22 @@ const DataGrid = forwardRef(
                         </div>
                     </div>
                 )}
+
+                {/* Import Wizard Modal */}
+                {form.bulkUpload && form.bulkUpload.enabled && (
+                    <ImportWizardModal
+                        isOpen={showImportModal}
+                        onClose={() => setShowImportModal(false)}
+                        modelConfig={form.bulkUpload.modelConfig}
+                        title={form.bulkUpload.title || 'Import Data'}
+                        importUrl={form.bulkUpload.importUrl}
+                        onComplete={handleImportComplete}
+                        additionalParams={{
+                            visit_request_id: paramValue || routeParams.dataId || pageData?.id,
+                            ...form.bulkUpload.additionalParams
+                        }}
+                    />
+                )}
             </>
         );
     }

package/src/components/Fetch.jsx

@@ -52,12 +52,15 @@ const generateCacheKey = (url, method, formData) => {
 };
 
 // Helper to determine if request should be cached
-const shouldCache = (method, url) => {
+const shouldCache = (method, url, cacheOption = true) => {
     const normalizedMethod = method.toUpperCase();
-    
+
+    // If caching is explicitly disabled via option, return false
+    if (cacheOption === false) return false;
+
     // Don't cache GET requests
     if (normalizedMethod === 'GET') return false;
-    
+
     // Cache specific safe POST endpoints that return reference data
     const cacheableEndpoints = [
         '/dropdown',          // Dropdown data (industries, facilities, etc.)
@@ -69,7 +72,7 @@ const shouldCache = (method, url) => {
         '/getWharfUsage',
         '/getFloatingWharfUsage',
     ];
-    
+
     return cacheableEndpoints.some(endpoint => url.includes(endpoint));
 };
 
@@ -130,11 +133,20 @@ const originalCustomFetch = (
     errorCallback = null
 ) => {
     const baseUrl = '';
+
+    // Check if formData is FormData (for file uploads)
+    const isFormData = formData instanceof FormData;
+
     const headers = {
-        'Content-Type': 'application/json',
         'X-Requested-With': 'XMLHttpRequest',
     };
 
+    // Only set Content-Type for non-FormData requests
+    // FormData will set its own Content-Type with boundary
+    if (!isFormData) {
+        headers['Content-Type'] = 'application/json';
+    }
+
     // Add CSRF token if available
     const csrfToken = document
         .querySelector('meta[name="csrf-token"]')
@@ -155,7 +167,7 @@ const originalCustomFetch = (
     const cookiesSize = cookies ? cookies.length : 0;
 
     // Check payload size
-    const payloadSize = new Blob([JSON.stringify(formData)]).size;
+    const payloadSize = isFormData ? 0 : new Blob([JSON.stringify(formData)]).size; // Skip size check for FormData
     const totalRequestSize = payloadSize + headersSize + cookiesSize;
 
     if (totalRequestSize > MAX_PAYLOAD_SIZE) {
@@ -169,11 +181,18 @@ const originalCustomFetch = (
         return Promise.reject(new Error(errorMessage));
     }
 
+    // Handle PUT/PATCH method workaround for Laravel
     if (method.toUpperCase() === 'PUT' || method.toUpperCase() === 'PATCH') {
-        formData = {
-            ...formData,
-            _method: method,
-        };
+        if (isFormData) {
+            // For FormData, append _method field
+            formData.append('_method', method);
+        } else {
+            // For regular objects, spread and add _method
+            formData = {
+                ...formData,
+                _method: method,
+            };
+        }
     }
 
     // Configure fetch options
@@ -199,7 +218,11 @@ const originalCustomFetch = (
         }
     } else {
         // For other methods, add body
-        fetchOptions.body = formData ? JSON.stringify(formData) : undefined;
+        if (formData) {
+            // If it's FormData, use it directly (for file uploads)
+            // Otherwise, JSON stringify the data
+            fetchOptions.body = isFormData ? formData : JSON.stringify(formData);
+        }
     }
 
     return new Promise((resolve, reject) => {
@@ -292,11 +315,14 @@ const CustomFetch = (
     method,
     formData,
     successCallback = null,
-    errorCallback = null
+    errorCallback = null,
+    options = {}
 ) => {
     const queryClient = getQueryClient();
     const cacheKey = generateCacheKey(url, method, formData);
-    const useCache = shouldCache(method, url);
+    // Default cache to true, allow override via options.cache
+    const cacheEnabled = options.cache !== undefined ? options.cache : true;
+    const useCache = shouldCache(method, url, cacheEnabled);
     
     if (useCache) {
         // Use TanStack Query for cacheable requests

package/src/components/ImportWizardModal.jsx

@@ -15,7 +15,6 @@ import {
 import { toast } from 'react-toastify';
 import { useDropzone } from 'react-dropzone';
 import StandardModal from './generic/StandardModal';
-import Select from './Select';
 import CustomFetch from './Fetch';
 import styles from './styles/ImportWizardModal.module.scss';
 
@@ -28,7 +27,8 @@ const ImportWizardModal = ({
     title = "Import Data",
     targetModel,
     parentId = null,
-    relationKey = null
+    relationKey = null,
+    additionalParams = {}
 }) => {
     const [currentStep, setCurrentStep] = useState(1);
     const [loading, setLoading] = useState(false);
@@ -107,21 +107,19 @@ const ImportWizardModal = ({
             const formData = new FormData();
             formData.append('file', file);
 
-            const response = await CustomFetch('/ajax/import/parse-file', {
-                method: 'POST',
-                body: formData,
-            });
+            const response = await CustomFetch('/ajax/import/parse-file', 'POST', formData);
+            const result = response.data; // Extract data from response object
+
+            if (result.success) {
+                setFileData(result.data);
 
-            if (response.success) {
-                setFileData(response.data);
-                
                 // Auto-suggest column mappings
-                await getSuggestedMappings(response.data.headers);
-                
+                await getSuggestedMappings(result.data.headers);
+
                 setCurrentStep(2);
-                toast.success(`File parsed successfully! Found ${response.data.total_rows} rows.`);
+                toast.success(`File parsed successfully! Found ${result.data.total_rows} rows.`);
             } else {
-                toast.error(response.message || 'Failed to parse file');
+                toast.error(result.message || 'Failed to parse file');
             }
         } catch (error) {
             console.error('File upload error:', error);
@@ -133,17 +131,15 @@ const ImportWizardModal = ({
 
     async function getSuggestedMappings(headers) {
         try {
-            const response = await CustomFetch('/ajax/import/column-suggestions', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({
-                    headers: headers,
-                    model_fields: modelConfig
-                })
-            });
-
-            if (response.success) {
-                setColumnMapping(response.suggestions);
+            const payload = {
+                headers: headers,
+                model_fields: modelConfig
+            };
+            const response = await CustomFetch('/ajax/import/column-suggestions', 'POST', payload);
+            const result = response.data;
+
+            if (result.success) {
+                setColumnMapping(result.suggestions);
             }
         } catch (error) {
             console.error('Error getting suggestions:', error);
@@ -189,17 +185,15 @@ const ImportWizardModal = ({
             formData.append('mapping', JSON.stringify(columnMapping));
             formData.append('model_config', JSON.stringify(modelConfig));
 
-            const response = await CustomFetch('/ajax/import/preview-mapping', {
-                method: 'POST',
-                body: formData,
-            });
+            const response = await CustomFetch('/ajax/import/preview-mapping', 'POST', formData);
+            const result = response.data;
 
-            if (response.success) {
-                setPreviewData(response.preview);
-                setValidationSummary(response.validation_summary);
+            if (result.success) {
+                setPreviewData(result.preview);
+                setValidationSummary(result.validation_summary);
                 setCurrentStep(3);
             } else {
-                toast.error(response.message || 'Failed to preview data');
+                toast.error(result.message || 'Failed to preview data');
             }
         } catch (error) {
             console.error('Preview error:', error);
@@ -211,27 +205,45 @@ const ImportWizardModal = ({
 
     async function handleImport() {
         setLoading(true);
-        
+
         try {
+            console.log('[ImportWizardModal] handleImport called with:', {
+                targetModel,
+                parentId,
+                relationKey,
+                additionalParams
+            });
+
             const formData = new FormData();
             formData.append('file', uploadedFile);
             formData.append('mapping', JSON.stringify(columnMapping));
             formData.append('model_config', JSON.stringify(modelConfig));
-            formData.append('target_model', targetModel);
+
+            if (targetModel) formData.append('target_model', targetModel);
             if (parentId) formData.append('parent_id', parentId.toString());
             if (relationKey) formData.append('relation_key', relationKey);
 
-            const response = await CustomFetch('/ajax/import/process', {
-                method: 'POST',
-                body: formData,
+            // Append any additional parameters
+            Object.keys(additionalParams).forEach(key => {
+                const value = additionalParams[key];
+                console.log(`[ImportWizardModal] additionalParam ${key}:`, value);
+                // Only append if value is not null or undefined
+                if (value !== null && value !== undefined) {
+                    formData.append(key, value);
+                }
             });
 
-            if (response.success) {
-                setImportResults(response);
+            // Use custom importUrl if provided, otherwise use default
+            const endpoint = importUrl || '/ajax/import/process';
+            const response = await CustomFetch(endpoint, 'POST', formData);
+            const result = response.data;
+
+            if (result.success) {
+                setImportResults(result);
                 setCurrentStep(4);
-                toast.success(`Import completed! ${response.imported} records imported successfully.`);
+                toast.success(`Import completed! ${result.imported} records imported successfully.`);
             } else {
-                toast.error(response.message || 'Import failed');
+                toast.error(result.message || 'Import failed');
             }
         } catch (error) {
             console.error('Import error:', error);
@@ -358,19 +370,22 @@ const ImportWizardModal = ({
                             <ArrowRight size={20} className={styles.arrow} />
                             
                             <div className={styles.fieldColumn}>
-                                <Select
+                                <select
+                                    className={styles.fieldSelect}
                                     value={columnMapping[header] || ''}
-                                    onChange={(value) => handleMappingChange(header, value)}
-                                    options={[
-                                        { value: '', label: 'Skip Column' },
-                                        ...modelConfig.map(field => ({
-                                            value: field.id,
-                                            label: `${field.label}${field.required ? ' *' : ''}`,
-                                            disabled: getMappedFields().includes(field.id) && columnMapping[header] !== field.id
-                                        }))
-                                    ]}
-                                    placeholder="Select field..."
-                                />
+                                    onChange={(e) => handleMappingChange(header, e.target.value)}
+                                >
+                                    <option value="">Skip Column</option>
+                                    {modelConfig.map(field => (
+                                        <option
+                                            key={field.id}
+                                            value={field.id}
+                                            disabled={getMappedFields().includes(field.id) && columnMapping[header] !== field.id}
+                                        >
+                                            {field.label}{field.required ? ' *' : ''}
+                                        </option>
+                                    ))}
+                                </select>
                             </div>
                         </div>
                     ))}

package/src/components/controls/DataGridSearch.jsx

@@ -6,6 +6,7 @@ import {
     Plus,
     Search,
     ArrowUpDown,
+    Upload,
 } from 'lucide-react';
 import Download from '../Download';
 import styles from '../styles/DataGrid.module.scss';
@@ -19,9 +20,11 @@ const DataGridSearch = ({
     dataRef,
     filterValue,
     paramValue,
-    // Sort dependencies  
+    // Sort dependencies
     pageData,
     pageSetting,
+    // Bulk upload
+    onBulkUploadClick,
 }) => {
     const navigate = useNavigate();
 
@@ -96,6 +99,11 @@ const DataGridSearch = ({
             ? styles.actionButtons
             : styles.actionButtonsStandalone;
 
+        // Debug log for bulk upload
+        console.log('[DataGridSearch] form.bulkUpload:', form.bulkUpload);
+        console.log('[DataGridSearch] form.bulkUpload?.enabled:', form.bulkUpload?.enabled);
+        console.log('[DataGridSearch] onBulkUploadClick:', onBulkUploadClick);
+
         return (
             <div className={buttonClassName}>
                 {form.export && form.export.url && (
@@ -118,6 +126,24 @@ const DataGridSearch = ({
                         Sort Order
                     </button>
                 )}
+                {form.bulkUpload && form.bulkUpload.enabled && (
+                    <button
+                        className={styles.btn}
+                        onClick={(e) => {
+                            e.preventDefault();
+                            if (onBulkUploadClick) {
+                                onBulkUploadClick();
+                            }
+                        }}
+                    >
+                        <Upload
+                            strokeWidth={2}
+                            size={16}
+                            style={{ marginRight: '10px' }}
+                        />
+                        Bulk Upload
+                    </button>
+                )}
 
                 {(form.create &&
                     form.create.title &&

package/src/components/generic/GenericDashboard.jsx

@@ -645,10 +645,16 @@ function GenericDashboard({ setting, userProfile, dynamicDashboard = false }) {
                         ...widgetFilters,
                     };
 
+                    // Check for cache option in widget.api (default: true)
+                    const cacheOption = widget.api.cache !== undefined ? widget.api.cache : true;
+
                     return CustomFetch(
                         widget.api.url,
                         widget.api.method,
-                        requestParams
+                        requestParams,
+                        null,
+                        null,
+                        { cache: cacheOption }
                     );
                 }
                 return null;

package/src/components/generic/GenericDetail.jsx

@@ -3024,11 +3024,23 @@ function GenericDetail({
                                     ? processUrlParams(config.settings)
                                     : config.settings;
 
+                                // Add bulkUpload from activeTabConfig to form if it exists
+                                const processedForm = activeTabConfig.bulkUpload
+                                    ? {
+                                        ...config.form,
+                                        bulkUpload: activeTabConfig.bulkUpload
+                                    }
+                                    : config.form;
+
                                 const processedConfig = {
                                     ...config,
                                     settings: processedSettings,
+                                    form: processedForm,
                                 };
 
+                                console.log('[GenericDetail] activeTabConfig.bulkUpload:', activeTabConfig.bulkUpload);
+                                console.log('[GenericDetail] processedConfig.form.bulkUpload:', processedConfig.form.bulkUpload);
+
                                 return (
                                     <>
                                         {activeTabConfig.dropzone &&
@@ -3222,6 +3234,7 @@ function GenericDetail({
                                                             ?.style || {}
                                                     }
                                                     userProfile={userProfile}
+                                                    onDataReload={() => setDataReload(prev => prev + 1)}
                                                 />
                                             </div>
                                         </div>

package/src/components/generic/GenericFormBuilder.jsx

@@ -1595,6 +1595,10 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
                                                                                     optionKey
                                                                                 ].label =
                                                                                     e.target.value;
+                                                                                newOptions[
+                                                                                    optionKey
+                                                                                ].id =
+                                                                                    `${slugify(e.target.value)}-`;
                                                                                 setDataField(
                                                                                     (
                                                                                         items
@@ -1732,6 +1736,10 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
                                                                                     optionKey
                                                                                 ].label =
                                                                                     e.target.value;
+                                                                                newOptions[
+                                                                                    optionKey
+                                                                                ].id =
+                                                                                    `${slugify(e.target.value)}-`;
                                                                                 setDataField(
                                                                                     (
                                                                                         items
@@ -2093,6 +2101,10 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
                                                                                     rowKey
                                                                                 ].label =
                                                                                     e.target.value;
+                                                                                newRows[
+                                                                                    rowKey
+                                                                                ].id =
+                                                                                    `${slugify(e.target.value)}-`;
                                                                                 setDataField(
                                                                                     (
                                                                                         items

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

@@ -11,36 +11,46 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: 2rem 0;
+    padding: 2.5rem 2rem;
     border-bottom: 1px solid #e5e7eb;
     margin-bottom: 2rem;
-    
+    background: #f9fafb;
+
     .stepContainer {
         display: flex;
         align-items: center;
         position: relative;
-        
+
         &:not(:last-child) {
-            margin-right: 2rem;
+            margin-right: 3rem;
         }
     }
-    
+
     .step {
-        width: 48px;
-        height: 48px;
+        width: 56px;
+        height: 56px;
+        min-width: 56px;
+        min-height: 56px;
         border-radius: 50%;
-        border: 2px solid #d1d5db;
+        border: 3px solid #d1d5db;
         display: flex;
         align-items: center;
         justify-content: center;
         background: white;
         color: #6b7280;
         transition: all 0.3s ease;
-        
+        flex-shrink: 0;
+
+        svg {
+            width: 24px;
+            height: 24px;
+        }
+
         &.active {
-            border-color: #3b82f6;
-            background: #3b82f6;
+            border-color: #001f3f;
+            background: #001f3f;
             color: white;
+            box-shadow: 0 4px 12px rgba(0, 31, 63, 0.2);
         }
     }
     
@@ -60,14 +70,15 @@
     }
     
     .stepConnector {
-        width: 40px;
-        height: 2px;
+        width: 60px;
+        height: 3px;
         background: #d1d5db;
-        margin: 0 1rem;
+        margin: 0 1.5rem;
         transition: background-color 0.3s ease;
-        
+        border-radius: 2px;
+
         &.completed {
-            background: #3b82f6;
+            background: #001f3f;
         }
     }
 }
@@ -75,28 +86,30 @@
 .stepContent {
     flex: 1;
     overflow-y: auto;
-    padding: 0 1rem;
+    padding: 0 2.5rem;
 }
 
 // Upload Step
 .uploadStep {
     .dropzone {
-        border: 2px dashed #d1d5db;
-        border-radius: 12px;
-        padding: 3rem 2rem;
+        border: 3px dashed #d1d5db;
+        border-radius: 16px;
+        padding: 4rem 3rem;
         text-align: center;
         cursor: pointer;
         transition: all 0.3s ease;
         background: #fafafa;
-        
+        margin: 1rem 0;
+
         &:hover, &.active {
-            border-color: #3b82f6;
-            background: #f0f8ff;
+            border-color: #001f3f;
+            background: #f0f4f8;
+            box-shadow: 0 4px 12px rgba(0, 31, 63, 0.1);
         }
-        
+
         .uploadIcon {
-            color: #6b7280;
-            margin-bottom: 1rem;
+            color: #001f3f;
+            margin-bottom: 1.5rem;
         }
         
         h3 {
@@ -115,21 +128,23 @@
             display: flex;
             align-items: center;
             justify-content: center;
-            gap: 0.5rem;
-            margin-top: 1rem;
-            padding: 0.75rem 1rem;
-            background: #e0f2fe;
-            border-radius: 8px;
-            color: #0369a1;
+            gap: 0.75rem;
+            margin-top: 1.5rem;
+            padding: 1rem 1.5rem;
+            background: #e8f0f7;
+            border-radius: 10px;
+            color: #001f3f;
+            font-weight: 500;
         }
     }
-    
+
     .templateSection {
-        margin-top: 2rem;
-        padding: 1.5rem;
+        margin-top: 2.5rem;
+        padding: 2rem;
         background: #f9fafb;
-        border-radius: 8px;
+        border-radius: 12px;
         text-align: center;
+        border: 1px solid #e5e7eb;
         
         h4 {
             margin: 0 0 0.5rem 0;
@@ -145,18 +160,22 @@
         .templateButton {
             display: inline-flex;
             align-items: center;
-            gap: 0.5rem;
-            padding: 0.75rem 1.25rem;
-            background: #3b82f6;
+            gap: 0.75rem;
+            padding: 1rem 2rem;
+            background: #001f3f;
             color: white;
             border: none;
-            border-radius: 6px;
+            border-radius: 8px;
             cursor: pointer;
-            font-size: 0.9rem;
-            transition: background-color 0.2s ease;
-            
+            font-size: 0.95rem;
+            font-weight: 500;
+            transition: all 0.2s ease;
+            box-shadow: 0 2px 8px rgba(0, 31, 63, 0.2);
+
             &:hover {
-                background: #2563eb;
+                background: #003366;
+                transform: translateY(-1px);
+                box-shadow: 0 4px 12px rgba(0, 31, 63, 0.3);
             }
         }
     }
@@ -216,8 +235,30 @@
             }
             
             .fieldColumn {
-                select, .select-container {
+                .fieldSelect {
                     width: 100%;
+                    padding: 0.75rem 1rem;
+                    border: 2px solid #d1d5db;
+                    border-radius: 6px;
+                    font-size: 0.95rem;
+                    color: #111827;
+                    background-color: white;
+                    cursor: pointer;
+                    transition: all 0.2s;
+
+                    &:hover {
+                        border-color: #001f3f;
+                    }
+
+                    &:focus {
+                        outline: none;
+                        border-color: #001f3f;
+                        box-shadow: 0 0 0 3px rgba(0, 31, 63, 0.1);
+                    }
+
+                    option:disabled {
+                        color: #9ca3af;
+                    }
                 }
             }
         }
@@ -530,9 +571,10 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 1.5rem 0 0 0;
-    border-top: 1px solid #e5e7eb;
+    padding: 2rem 2.5rem;
+    border-top: 2px solid #e5e7eb;
     margin-top: 2rem;
+    background: #fafbfc;
     
     .footerLeft, .footerRight {
         display: flex;
@@ -542,39 +584,45 @@
     .backButton, .nextButton, .finishButton {
         display: inline-flex;
         align-items: center;
-        gap: 0.5rem;
-        padding: 0.75rem 1.5rem;
-        border-radius: 6px;
+        gap: 0.75rem;
+        padding: 1rem 2rem;
+        border-radius: 8px;
         cursor: pointer;
         font-weight: 500;
+        font-size: 0.95rem;
         transition: all 0.2s ease;
         border: none;
-        
+
         &:disabled {
-            opacity: 0.6;
+            opacity: 0.5;
             cursor: not-allowed;
         }
-        
+
         .spinner {
             animation: spin 1s linear infinite;
         }
     }
-    
+
     .backButton {
         background: #f3f4f6;
         color: #374151;
-        
+        border: 2px solid #e5e7eb;
+
         &:hover:not(:disabled) {
             background: #e5e7eb;
+            border-color: #d1d5db;
         }
     }
-    
+
     .nextButton, .finishButton {
-        background: #3b82f6;
+        background: #001f3f;
         color: white;
-        
+        box-shadow: 0 2px 8px rgba(0, 31, 63, 0.2);
+
         &:hover:not(:disabled) {
-            background: #2563eb;
+            background: #003366;
+            transform: translateY(-1px);
+            box-shadow: 0 4px 12px rgba(0, 31, 63, 0.3);
         }
     }
 }