@fovestta2/web-react 1.2.2 → 1.2.3

package/dist/components/AddUpdateForm.js

@@ -419,7 +419,7 @@ const sectionTitleStyle = {
 // ── Helpers ──────────────────────────────────────────────────────────────────
 const buildGridStyle = (maxCols) => ({
     display: 'grid',
-    gridTemplateColumns: `repeat(${maxCols}, 1fr)`,
+    gridTemplateColumns: `repeat(${maxCols}, minmax(0, 1fr))`,
     gap: '16px',
 });
 // ── Component ────────────────────────────────────────────────────────────────
@@ -512,17 +512,37 @@ const AddUpdateForm = ({ config, asModal = false, }) => {
                     errorPriority.push('regex');
                 }
                 if (v.type === 'minLength') {
-                    rules.push({ name: 'minLength', params: { value: v.value }, errorKey: 'ERR_MIN_LENGTH', message: v.message });
+                    rules.push({ name: 'minLength', params: { value: v.value }, errorKey: v.errorKey || 'ERR_MIN_LENGTH', message: v.message });
                     errorPriority.push('minLength');
                 }
                 if (v.type === 'maxLength') {
-                    rules.push({ name: 'maxLength', params: { value: v.value }, errorKey: 'ERR_MAX_LENGTH', message: v.message });
+                    rules.push({ name: 'maxLength', params: { value: v.value }, errorKey: v.errorKey || 'ERR_MAX_LENGTH', message: v.message });
                     errorPriority.push('maxLength');
                 }
                 if (v.type === 'pattern') {
-                    rules.push({ name: 'regex', params: { pattern: v.value }, errorKey: 'ERR_REGEX_MISMATCH', message: v.message });
+                    rules.push({ name: 'regex', params: { pattern: v.value }, errorKey: v.errorKey || 'ERR_REGEX_MISMATCH', message: v.message });
                     errorPriority.push('regex');
                 }
+                if (v.type === 'min') {
+                    rules.push({ name: 'min', params: { value: v.value }, errorKey: v.errorKey || 'ERR_MIN_VALUE', message: v.message });
+                    errorPriority.push('min');
+                }
+                if (v.type === 'max') {
+                    rules.push({ name: 'max', params: { value: v.value }, errorKey: v.errorKey || 'ERR_MAX_VALUE', message: v.message });
+                    errorPriority.push('max');
+                }
+                if (v.type === 'custom') {
+                    rules.push({ name: 'custom', params: { validator: v.value }, errorKey: v.errorKey || 'ERR_CUSTOM_INVALID', message: v.message });
+                    errorPriority.push('custom');
+                }
+                if (v.type === 'duplicate') {
+                    rules.push({ name: 'duplicate', params: v.params, errorKey: v.errorKey || 'ERR_DUPLICATE', message: v.message });
+                    errorPriority.push('duplicate');
+                }
+                if (v.type === 'passwordComplexity') {
+                    rules.push({ name: 'passwordComplexity', params: v.params, errorKey: v.errorKey || 'ERR_PASSWORD_COMPLEXITY', message: v.message });
+                    errorPriority.push('passwordComplexity');
+                }
             });
         }
         return { controlType: 'EntryField', rules, errorPriority };
@@ -576,7 +596,7 @@ const AddUpdateForm = ({ config, asModal = false, }) => {
                     react_1.default.createElement("div", { style: { position: 'absolute', top: '8px', right: '8px', display: 'flex', gap: '4px' }, className: "fv-form-repeatable-actions" },
                         react_1.default.createElement("button", { type: "button", onClick: () => addSectionItem(section.sectionKey, section.fields), style: { background: 'none', border: 'none', cursor: 'pointer', fontSize: '18px', color: '#2ecc71' }, className: "fv-form-add-btn" }, "\u2295"),
                         (formData[section.sectionKey] || []).length > 1 && (react_1.default.createElement("button", { type: "button", onClick: () => removeSectionItem(section.sectionKey, idx), style: { background: 'none', border: 'none', cursor: 'pointer', fontSize: '18px', color: '#e74c3c' }, className: "fv-form-remove-btn" }, "\u2297"))),
-                    react_1.default.createElement("div", { style: buildGridStyle(sectionMaxCols), className: "fv-form-grid" }, section.fields.map((col, cIdx) => (react_1.default.createElement("div", { key: cIdx, style: { gridColumn: `span ${col.colSpan || 1}` }, className: `fv-form-field-wrapper ${col.className || ''}`.trim() }, renderField(col, group[col.name], section.sectionKey, idx))))))))) : (react_1.default.createElement("div", { style: buildGridStyle(sectionMaxCols), className: "fv-form-grid" }, section.fields.map((col, cIdx) => (react_1.default.createElement("div", { key: cIdx, style: { gridColumn: `span ${col.colSpan || 1}` }, className: `fv-form-field-wrapper ${col.className || ''}`.trim() }, renderField(col, formData[col.name]))))))));
+                    react_1.default.createElement("div", { style: buildGridStyle(sectionMaxCols), className: "fv-form-grid" }, section.fields.map((col, cIdx) => (react_1.default.createElement("div", { key: cIdx, style: { gridColumn: `span ${col.colSpan || 1}`, minWidth: 0 }, className: `fv-form-field-wrapper ${col.className || ''}`.trim() }, renderField(col, group[col.name], section.sectionKey, idx))))))))) : (react_1.default.createElement("div", { style: buildGridStyle(sectionMaxCols), className: "fv-form-grid" }, section.fields.map((col, cIdx) => (react_1.default.createElement("div", { key: cIdx, style: { gridColumn: `span ${col.colSpan || 1}`, minWidth: 0 }, className: `fv-form-field-wrapper ${col.className || ''}`.trim() }, renderField(col, formData[col.name]))))))));
         }),
         react_1.default.createElement("div", { style: { display: 'flex', gap: '12px', marginTop: '8px' }, className: "fv-form-footer" }, !config.hideSubmit && (react_1.default.createElement("button", { type: "submit", disabled: config.disableSubmit, style: getSubmitButtonStyle(!!config.disableSubmit), className: "fv-form-submit-btn" }, config.submitLabel || 'Save')))));
     if (asModal) {

package/dist/components/FvDropdown.js

@@ -27,7 +27,7 @@ exports.FvDropdown = void 0;
 const react_1 = __importStar(require("react"));
 const validation_engine_1 = require("@fovestta2/validation-engine");
 const FvDropdown = ({ label = '', placeholder = 'Select an option', options = [], value, schema, disabled = false, className = '', inputClassName = '', labelClassName = '', errorClassName = '', onChange, onBlur, onFocus, }) => {
-    const [errorMessage, setErrorMessage] = (0, react_1.useState)(null);
+    const [isTouched, setIsTouched] = (0, react_1.useState)(false);
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     const [searchText, setSearchText] = (0, react_1.useState)('');
     const [filteredOptions, setFilteredOptions] = (0, react_1.useState)([]);
@@ -35,6 +35,12 @@ const FvDropdown = ({ label = '', placeholder = 'Select an option', options = []
     const containerRef = (0, react_1.useRef)(null);
     const inputRef = (0, react_1.useRef)(null);
     const listRef = (0, react_1.useRef)(null);
+    const errorMessage = (0, react_1.useMemo)(() => {
+        if (!isTouched || !schema)
+            return null;
+        const result = validation_engine_1.Validator.validate(value, schema);
+        return result.isValid ? null : (result.message || result.errorKey);
+    }, [value, schema, isTouched]);
     // Helper type guards
     const isGroup = (item) => {
         return 'items' in item && Array.isArray(item.items);
@@ -89,7 +95,6 @@ const FvDropdown = ({ label = '', placeholder = 'Select an option', options = []
     };
     // Sync initial and prop changes
     (0, react_1.useEffect)(() => {
-        validateValue(value);
         const selected = findOption(value);
         if (selected) {
             setSearchText(selected.label);
@@ -104,6 +109,7 @@ const FvDropdown = ({ label = '', placeholder = 'Select an option', options = []
             if (containerRef.current && !containerRef.current.contains(event.target)) {
                 if (isOpen) {
                     closeDropdown();
+                    setIsTouched(true);
                     if (onBlur)
                         onBlur();
                 }
@@ -114,17 +120,6 @@ const FvDropdown = ({ label = '', placeholder = 'Select an option', options = []
             document.removeEventListener('mousedown', handleClickOutside);
         };
     }, [isOpen, value, options]);
-    const validateValue = (val) => {
-        if (!schema)
-            return;
-        const result = validation_engine_1.Validator.validate(val, schema);
-        if (!result.isValid && result.errorKey) {
-            setErrorMessage(result.errorKey);
-        }
-        else {
-            setErrorMessage(null);
-        }
-    };
     const openDropdown = () => {
         if (disabled)
             return;
@@ -157,7 +152,6 @@ const FvDropdown = ({ label = '', placeholder = 'Select an option', options = []
             if (!value)
                 setSearchText('');
         }
-        validateValue(value);
     };
     const toggleDropdown = () => {
         var _a;
@@ -186,6 +180,7 @@ const FvDropdown = ({ label = '', placeholder = 'Select an option', options = []
         setSearchText(viewItem.label);
         setIsOpen(false);
         setHighlightedIndex(-1);
+        setIsTouched(true);
         (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
         if (onBlur)
             onBlur();
@@ -260,10 +255,13 @@ const FvDropdown = ({ label = '', placeholder = 'Select an option', options = []
             ERR_REQUIRED: 'This field is required',
             ERR_INVALID_VALUE: 'Invalid selection',
             ERR_DUPLICATE: 'This selection already exists',
+            ERR_MIN_VALUE: 'Value is too small',
+            ERR_MAX_VALUE: 'Value is too large',
+            ERR_CUSTOM_INVALID: 'Invalid value',
         };
         return errorMessages[errorMessage] || errorMessage;
     };
-    return (react_1.default.createElement("div", { ref: containerRef, className: `fv-dropdown-container ${className}`, style: { marginBottom: '16px', display: 'flex', flexDirection: 'column', position: 'relative' }, onKeyDown: handleKeyDown },
+    return (react_1.default.createElement("div", { ref: containerRef, className: `fv-dropdown-container ${className}`, style: { marginBottom: '16px', display: 'flex', flexDirection: 'column', position: 'relative', width: '100%' }, onKeyDown: handleKeyDown },
         label && (react_1.default.createElement("label", { className: `fv-dropdown-label ${labelClassName}`, style: { marginBottom: '6px', fontSize: '14px', fontWeight: 500, color: disabled ? '#999' : '#333' } },
             label,
             isRequired() && react_1.default.createElement("span", { className: "fv-required", style: { color: '#dc3545', fontWeight: 'bold' } }, " *"))),
@@ -273,7 +271,8 @@ const FvDropdown = ({ label = '', placeholder = 'Select an option', options = []
                 borderRadius: '4px',
                 backgroundColor: disabled ? '#f5f5f5' : '#fff',
                 cursor: disabled ? 'not-allowed' : 'text',
-                position: 'relative'
+                position: 'relative',
+                width: '100%'
             }, onClick: (e) => {
                 var _a;
                 if (disabled)
@@ -287,6 +286,8 @@ const FvDropdown = ({ label = '', placeholder = 'Select an option', options = []
             } },
             react_1.default.createElement("input", { ref: inputRef, type: "text", className: `fv-dropdown-input ${inputClassName}`, value: searchText, onChange: handleSearchChange, onFocus: openDropdown, disabled: disabled, placeholder: placeholder, style: {
                     flex: 1,
+                    width: '100%',
+                    minWidth: 0,
                     padding: '10px',
                     border: 'none',
                     background: 'transparent',

package/dist/components/FvEmailField.js

@@ -27,7 +27,7 @@ exports.FvEmailField = void 0;
 const react_1 = __importStar(require("react"));
 const validation_engine_1 = require("@fovestta2/validation-engine");
 const FvEmailField = ({ label = 'Email Address', placeholder = 'e.g. john@example.com', value, schema, disabled = false, readonly = false, className = '', inputClassName = '', labelClassName = '', errorClassName = '', onChange, onBlur, onFocus, }) => {
-    const [errorMessage, setErrorMessage] = (0, react_1.useState)(null);
+    const [isTouched, setIsTouched] = (0, react_1.useState)(false);
     const defaultSchema = schema || {
         controlType: 'EntryField',
         errorPriority: ['required', 'regex'],
@@ -41,23 +41,18 @@ const FvEmailField = ({ label = 'Email Address', placeholder = 'e.g. john@exampl
             },
         ],
     };
-    (0, react_1.useEffect)(() => {
-        validateValue(value);
-    }, [value, schema]);
-    const validateValue = (val) => {
-        const result = validation_engine_1.Validator.validate(val, schema || defaultSchema);
-        if (!result.isValid && result.errorKey) {
-            setErrorMessage(result.errorKey);
-        }
-        else {
-            setErrorMessage(null);
-        }
-    };
+    const errorMessage = (0, react_1.useMemo)(() => {
+        if (!isTouched)
+            return null;
+        const result = validation_engine_1.Validator.validate(value, schema || defaultSchema);
+        return result.isValid ? null : (result.message || result.errorKey);
+    }, [value, schema, isTouched, defaultSchema]);
+    // Sync logic removed in favor of useMemo
     const handleInput = (e) => {
         onChange(e.target.value);
     };
     const handleBlur = (e) => {
-        validateValue(value);
+        setIsTouched(true);
         if (onBlur)
             onBlur();
     };
@@ -77,6 +72,9 @@ const FvEmailField = ({ label = 'Email Address', placeholder = 'e.g. john@exampl
             ERR_EMAIL_INVALID: 'Invalid email format',
             ERR_REGEX_MISMATCH: 'Invalid email format',
             ERR_DUPLICATE: 'Email already exists',
+            ERR_MIN_VALUE: 'Value is too small',
+            ERR_MAX_VALUE: 'Value is too large',
+            ERR_CUSTOM_INVALID: 'Invalid value',
         };
         return errorMessages[errorMessage] || errorMessage;
     };

package/dist/components/FvEntryField.js

@@ -27,22 +27,14 @@ exports.FvEntryField = void 0;
 const react_1 = __importStar(require("react"));
 const validation_engine_1 = require("@fovestta2/validation-engine");
 const FvEntryField = ({ label = '', placeholder = '', value, schema, disabled = false, readonly = false, type = 'text', allowAlphabetsOnly = false, maxLength, className = '', inputClassName = '', labelClassName = '', errorClassName = '', onChange, onBlur, onFocus, }) => {
-    const [errorMessage, setErrorMessage] = (0, react_1.useState)(null);
-    (0, react_1.useEffect)(() => {
-        validateValue(value);
-    }, [value, schema]);
-    const validateValue = (val) => {
-        if (!schema)
-            return;
-        const result = validation_engine_1.Validator.validate(val, schema);
-        // In React this is fully controlled by state, without formControl injection
-        if (!result.isValid && result.errorKey) {
-            setErrorMessage(result.errorKey);
-        }
-        else {
-            setErrorMessage(null);
-        }
-    };
+    const [isTouched, setIsTouched] = (0, react_1.useState)(false);
+    const errorMessage = (0, react_1.useMemo)(() => {
+        if (!isTouched || !schema)
+            return null;
+        const result = validation_engine_1.Validator.validate(value, schema);
+        return result.isValid ? null : (result.message || result.errorKey);
+    }, [value, schema, isTouched]);
+    // Sync logic removed in favor of useMemo
     const handleInput = (e) => {
         let newValue = e.target.value;
         if (allowAlphabetsOnly) {
@@ -54,7 +46,7 @@ const FvEntryField = ({ label = '', placeholder = '', value, schema, disabled =
         onChange(newValue);
     };
     const handleBlur = (e) => {
-        validateValue(value);
+        setIsTouched(true);
         if (onBlur)
             onBlur();
     };
@@ -75,6 +67,9 @@ const FvEntryField = ({ label = '', placeholder = '', value, schema, disabled =
             ERR_MAX_LENGTH: 'Value is too long',
             ERR_REGEX_MISMATCH: 'Invalid format',
             ERR_DUPLICATE: 'This value already exists',
+            ERR_MIN_VALUE: 'Value is too small',
+            ERR_MAX_VALUE: 'Value is too large',
+            ERR_CUSTOM_INVALID: 'Invalid value',
         };
         return errorMessages[errorMessage] || errorMessage;
     };

package/dist/components/FvMasterScreen.d.ts

@@ -0,0 +1,78 @@
+import React from 'react';
+export interface FvMasterAction {
+    label: string;
+    onClick: () => void;
+    icon?: React.ReactNode;
+    variant?: 'primary' | 'secondary' | 'danger';
+    className?: string;
+}
+export interface FvMasterHeaderConfig {
+    title?: string;
+    subtitle?: string;
+    addAction?: FvMasterAction;
+    addOptions?: FvMasterAction[];
+    className?: string;
+}
+export interface FvMasterCardConfig {
+    label: string;
+    value: string | number;
+    icon?: React.ReactNode;
+    colSpan?: number;
+    color?: string;
+    className?: string;
+}
+export interface FvMasterTab {
+    label: string;
+    key: string;
+    count?: number;
+    colSpan?: number;
+}
+export interface FvMasterColumn {
+    header: string;
+    key: string;
+    render?: (row: any) => React.ReactNode;
+    width?: string;
+    sortable?: boolean;
+    sortKey?: string;
+}
+export interface FvMasterTableActions {
+    onView?: (row: any) => void;
+    onUpdate?: (row: any) => void;
+    onDelete?: (row: any) => void;
+    className?: string;
+}
+export interface FvMasterPaginationConfig {
+    totalItems: number;
+    pageSize: number;
+    currentPage: number;
+    onPageChange: (page: number) => void;
+    onPageSizeChange?: (size: number) => void;
+    pageSizeOptions?: number[];
+}
+export interface FvMasterConfig {
+    header?: FvMasterHeaderConfig;
+    cards?: {
+        items: FvMasterCardConfig[];
+        maxColsPerRow?: number;
+    };
+    tabs?: {
+        items: FvMasterTab[];
+        activeKey: string;
+        onTabChange: (key: string) => void;
+    };
+    filters?: {
+        onExport?: (format: 'excel' | 'csv') => void;
+        className?: string;
+    };
+    table?: {
+        columns: FvMasterColumn[];
+        data: any[];
+        actions?: FvMasterTableActions;
+        pagination?: FvMasterPaginationConfig;
+    };
+    className?: string;
+}
+export interface FvMasterScreenProps {
+    config: FvMasterConfig;
+}
+export declare const FvMasterScreen: React.FC<FvMasterScreenProps>;

package/dist/components/FvMasterScreen.js

@@ -0,0 +1,317 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FvMasterScreen = void 0;
+const react_1 = __importStar(require("react"));
+// ─── Styles ──────────────────────────────────────────────────────────────────
+const containerStyle = {
+    padding: '24px',
+    background: '#f8fafc',
+    minHeight: '100%',
+    fontFamily: 'Inter, system-ui, sans-serif',
+};
+const headerRowStyle = {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'flex-start',
+    marginBottom: '24px',
+};
+const titleStyle = {
+    fontSize: '28px',
+    fontWeight: 700,
+    color: '#0f172a',
+    margin: 0,
+};
+const subtitleStyle = {
+    fontSize: '14px',
+    color: '#64748b',
+    marginTop: '4px',
+};
+const addBtnStyle = {
+    background: '#005bb5',
+    color: '#fff',
+    border: 'none',
+    padding: '10px 20px',
+    borderRadius: '8px',
+    fontWeight: 600,
+    cursor: 'pointer',
+    display: 'flex',
+    alignItems: 'center',
+    gap: '8px',
+    boxShadow: '0 1px 2px rgba(0,0,0,0.05)',
+    position: 'relative',
+};
+const cardGridStyle = (cols) => ({
+    display: 'grid',
+    gridTemplateColumns: `repeat(${cols}, 1fr)`,
+    gap: '20px',
+    marginBottom: '32px',
+});
+const cardStyle = {
+    background: '#fff',
+    padding: '20px',
+    borderRadius: '12px',
+    border: '1px solid #e2e8f0',
+    boxShadow: '0 1px 3px rgba(0,0,0,0.02)',
+    display: 'flex',
+    alignItems: 'center', // Align horizontal
+    gap: '16px',
+};
+const toolbarRowStyle = {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: '20px',
+    gap: '16px',
+};
+const tabBarStyle = {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(12, 1fr)', // Use 12-column grid for dynamic sizing
+    gap: '12px',
+    flex: 1,
+};
+const pillTabStyle = (isActive, colSpan) => ({
+    padding: '8px 20px',
+    borderRadius: '9999px', // Pill shape
+    background: isActive ? '#005bb5' : '#fff',
+    color: isActive ? '#fff' : '#64748b',
+    fontWeight: 600,
+    fontSize: '14px',
+    cursor: 'pointer',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: '8px',
+    boxShadow: '0 1px 3px rgba(0,0,0,0.05)',
+    transition: 'all 0.2s',
+    border: isActive ? '1px solid #005bb5' : '1px solid #e2e8f0', // Simplified
+    gridColumn: colSpan ? `span ${colSpan}` : 'span 2', // Default span if not specified
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+});
+const tableContainerStyle = {
+    background: '#fff',
+    borderRadius: '12px',
+    border: '1px solid #e2e8f0',
+    overflow: 'hidden',
+    boxShadow: '0 1px 3px rgba(0,0,0,0.05)',
+};
+const tableStyle = {
+    width: '100%',
+    borderCollapse: 'collapse',
+    fontSize: '14px',
+};
+const thStyle = {
+    background: '#f8fafc',
+    padding: '14px 16px',
+    textAlign: 'left',
+    fontWeight: 700,
+    color: '#475569',
+    borderBottom: '1px solid #e2e8f0',
+};
+const tdStyle = {
+    padding: '16px',
+    borderBottom: '1px solid #e2e8f0',
+    color: '#1e293b',
+};
+const actionIconStyle = {
+    cursor: 'pointer',
+    // padding: '6px',
+    borderRadius: '6px',
+    fontSize: '18px',
+    border: 'none',
+    background: 'none',
+    transition: 'background 0.2s',
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+};
+const dropdownMenuStyle = {
+    position: 'absolute',
+    top: '100%',
+    right: 0,
+    background: '#fff',
+    borderRadius: '8px',
+    boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
+    marginTop: '8px',
+    minWidth: '160px',
+    zIndex: 100,
+    border: '1px solid #e2e8f0',
+    padding: '4px',
+};
+const dropdownItemStyle = {
+    width: '100%',
+    padding: '10px 16px',
+    background: 'none',
+    border: 'none',
+    textAlign: 'left',
+    cursor: 'pointer',
+    fontSize: '14px',
+    borderRadius: '6px',
+    color: '#1e293b',
+    fontWeight: 500,
+    display: 'flex',
+    alignItems: 'center',
+    gap: '8px',
+};
+// ─── Component ───────────────────────────────────────────────────────────────
+const FvMasterScreen = ({ config }) => {
+    var _a, _b, _c;
+    const [showAddDropdown, setShowAddDropdown] = (0, react_1.useState)(false);
+    const [sortConfig, setSortConfig] = (0, react_1.useState)(null);
+    const handleSort = (key) => {
+        let direction = 'desc'; // Default to descending as requested
+        if (sortConfig && sortConfig.key === key && sortConfig.direction === 'desc') {
+            direction = 'asc';
+        }
+        setSortConfig({ key, direction });
+    };
+    const getSortedData = () => {
+        var _a;
+        const data = [...(((_a = config.table) === null || _a === void 0 ? void 0 : _a.data) || [])];
+        if (!sortConfig)
+            return data;
+        return data.sort((a, b) => {
+            const aValue = a[sortConfig.key];
+            const bValue = b[sortConfig.key];
+            if (aValue === bValue)
+                return 0;
+            const isAsc = sortConfig.direction === 'asc';
+            // Handle numeric sorting
+            if (typeof aValue === 'number' && typeof bValue === 'number') {
+                return isAsc ? aValue - bValue : bValue - aValue;
+            }
+            // Handle string/other sorting
+            const aStr = String(aValue || '').toLowerCase();
+            const bStr = String(bValue || '').toLowerCase();
+            if (aStr < bStr)
+                return isAsc ? -1 : 1;
+            if (aStr > bStr)
+                return isAsc ? 1 : -1;
+            return 0;
+        });
+    };
+    const sortedData = getSortedData();
+    const renderPagination = () => {
+        var _a;
+        const pag = (_a = config.table) === null || _a === void 0 ? void 0 : _a.pagination;
+        if (!pag)
+            return null;
+        const totalPages = Math.ceil(pag.totalItems / pag.pageSize);
+        return (react_1.default.createElement("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '16px', borderTop: '1px solid #e2e8f0' }, className: "fv-master-pagination" },
+            react_1.default.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: '8px', fontSize: '14px', color: '#64748b' } },
+                "Results Per Page",
+                react_1.default.createElement("select", { value: pag.pageSize, onChange: (e) => { var _a; return (_a = pag.onPageSizeChange) === null || _a === void 0 ? void 0 : _a.call(pag, Number(e.target.value)); }, style: { padding: '6px 12px', borderRadius: '6px', border: '1px solid #e2e8f0', background: '#fff' } }, (pag.pageSizeOptions || [10, 20, 50, 100]).map(opt => (react_1.default.createElement("option", { key: opt, value: opt }, opt))))),
+            react_1.default.createElement("div", { style: { display: 'flex', gap: '6px' } },
+                react_1.default.createElement("button", { disabled: pag.currentPage === 1, onClick: () => pag.onPageChange(pag.currentPage - 1), style: { padding: '6px 14px', borderRadius: '8px', border: '1px solid #e2e8f0', background: '#fff', cursor: pag.currentPage === 1 ? 'not-allowed' : 'pointer', fontWeight: 600 } }, "\u2039"),
+                [...Array(totalPages)].map((_, i) => (react_1.default.createElement("button", { key: i + 1, onClick: () => pag.onPageChange(i + 1), style: {
+                        padding: '6px 14px',
+                        borderRadius: '8px',
+                        border: '1px solid #e2e8f0',
+                        background: pag.currentPage === i + 1 ? '#005bb5' : '#fff',
+                        color: pag.currentPage === i + 1 ? '#fff' : '#1e293b',
+                        fontWeight: 700,
+                        cursor: 'pointer'
+                    } }, i + 1))),
+                react_1.default.createElement("button", { disabled: pag.currentPage === totalPages, onClick: () => pag.onPageChange(pag.currentPage + 1), style: { padding: '6px 14px', borderRadius: '8px', border: '1px solid #e2e8f0', background: '#fff', cursor: pag.currentPage === totalPages ? 'not-allowed' : 'pointer', fontWeight: 600 } }, "\u203A"))));
+    };
+    return (react_1.default.createElement("div", { style: containerStyle, className: `fv-master-screen ${config.className || ''}`.trim() },
+        config.header && (react_1.default.createElement("div", { style: headerRowStyle, className: `fv-master-header ${config.header.className || ''}`.trim() },
+            react_1.default.createElement("div", null,
+                config.header.title && react_1.default.createElement("h1", { style: titleStyle }, config.header.title),
+                config.header.subtitle && react_1.default.createElement("p", { style: subtitleStyle }, config.header.subtitle)),
+            react_1.default.createElement("div", { style: { position: 'relative' } }, config.header.addOptions ? (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement("button", { onClick: () => setShowAddDropdown(!showAddDropdown), style: addBtnStyle, className: "fv-master-add-dropdown-btn" },
+                    react_1.default.createElement("span", null, ((_a = config.header.addAction) === null || _a === void 0 ? void 0 : _a.icon) || '+'),
+                    ((_b = config.header.addAction) === null || _b === void 0 ? void 0 : _b.label) || 'Add',
+                    react_1.default.createElement("span", { style: { fontSize: '12px', marginLeft: '4px' } }, "\u25BC")),
+                showAddDropdown && (react_1.default.createElement("div", { style: dropdownMenuStyle, className: "fv-master-add-dropdown-menu" }, config.header.addOptions.map((opt, i) => (react_1.default.createElement("button", { key: i, onClick: () => { opt.onClick(); setShowAddDropdown(false); }, style: dropdownItemStyle, onMouseOver: (e) => (e.currentTarget.style.backgroundColor = '#f1f5f9'), onMouseOut: (e) => (e.currentTarget.style.backgroundColor = 'transparent') },
+                    opt.icon,
+                    " ",
+                    opt.label))))))) : (config.header.addAction && (react_1.default.createElement("button", { onClick: config.header.addAction.onClick, style: addBtnStyle, className: `fv-master-add-btn ${config.header.addAction.className || ''}`.trim() },
+                config.header.addAction.icon || react_1.default.createElement("span", null, "+"),
+                config.header.addAction.label)))))),
+        config.cards && config.cards.items.length > 0 && (react_1.default.createElement("div", { style: cardGridStyle(config.cards.maxColsPerRow || 4), className: "fv-master-cards" }, config.cards.items.map((card, idx) => (react_1.default.createElement("div", { key: idx, style: {
+                ...cardStyle,
+                gridColumn: card.colSpan ? `span ${card.colSpan}` : undefined
+            }, className: `fv-master-card ${card.className || ''}`.trim() },
+            react_1.default.createElement("div", { style: { background: card.color ? `${card.color}15` : '#f1f5f9', padding: '12px', borderRadius: '12px', color: card.color || '#64748b', display: 'flex', alignItems: 'center', justifyContent: 'center' } },
+                react_1.default.createElement("span", { style: { fontSize: '20px' } }, card.icon || '🛒')),
+            react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column' } },
+                react_1.default.createElement("div", { style: { fontSize: '24px', fontWeight: 800, color: '#1e293b', lineHeight: 1.2 } }, card.value),
+                react_1.default.createElement("div", { style: { fontSize: '13px', color: '#64748b', fontWeight: 600 } }, card.label))))))),
+        react_1.default.createElement("div", { style: toolbarRowStyle, className: "fv-master-toolbar" },
+            config.tabs && (react_1.default.createElement("div", { style: tabBarStyle, className: "fv-master-tabs" }, config.tabs.items.map(tab => {
+                var _a;
+                const isActive = ((_a = config.tabs) === null || _a === void 0 ? void 0 : _a.activeKey) === tab.key;
+                return (react_1.default.createElement("button", { key: tab.key, onClick: () => { var _a; return (_a = config.tabs) === null || _a === void 0 ? void 0 : _a.onTabChange(tab.key); }, style: pillTabStyle(isActive, tab.colSpan) },
+                    tab.label,
+                    tab.count !== undefined && (react_1.default.createElement("span", { style: {
+                            fontSize: '11px',
+                            background: isActive ? 'rgba(255,255,255,0.2)' : '#e2e8f0',
+                            color: isActive ? '#fff' : '#64748b',
+                            padding: '1px 8px',
+                            borderRadius: '10px'
+                        } }, tab.count))));
+            }))),
+            ((_c = config.filters) === null || _c === void 0 ? void 0 : _c.onExport) && (react_1.default.createElement("div", { style: { display: 'flex', gap: '8px' } },
+                react_1.default.createElement("button", { onClick: () => { var _a, _b; return (_b = (_a = config.filters) === null || _a === void 0 ? void 0 : _a.onExport) === null || _b === void 0 ? void 0 : _b.call(_a, 'excel'); }, style: { ...addBtnStyle, background: '#fff', color: '#1e293b', border: '1px solid #e2e8f0', padding: '8px 16px' }, className: "fv-master-export-btn" },
+                    react_1.default.createElement("span", { style: { fontSize: '16px' } }, "\uD83D\uDCE5"),
+                    " Export")))),
+        config.table && (react_1.default.createElement("div", { style: tableContainerStyle, className: "fv-master-table-container" },
+            react_1.default.createElement("table", { style: tableStyle },
+                react_1.default.createElement("thead", null,
+                    react_1.default.createElement("tr", null,
+                        config.table.columns.map(col => (react_1.default.createElement("th", { key: col.key, style: {
+                                ...thStyle,
+                                width: col.width,
+                                cursor: col.sortable !== false ? 'pointer' : 'default',
+                                userSelect: 'none'
+                            }, onClick: () => col.sortable !== false && handleSort(col.sortKey || col.key) },
+                            react_1.default.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: '4px' } },
+                                col.header,
+                                col.sortable !== false && (react_1.default.createElement("span", { style: {
+                                        fontSize: '12px',
+                                        opacity: (sortConfig === null || sortConfig === void 0 ? void 0 : sortConfig.key) === (col.sortKey || col.key) ? 1 : 0.3,
+                                        color: (sortConfig === null || sortConfig === void 0 ? void 0 : sortConfig.key) === (col.sortKey || col.key) ? '#005bb5' : 'inherit'
+                                    } }, (sortConfig === null || sortConfig === void 0 ? void 0 : sortConfig.key) === (col.sortKey || col.key)
+                                    ? (sortConfig.direction === 'asc' ? '↑' : '↓')
+                                    : '↓')))))),
+                        config.table.actions && react_1.default.createElement("th", { style: { ...thStyle, textAlign: 'center' } }, "Actions"))),
+                react_1.default.createElement("tbody", null, sortedData.length > 0 ? (sortedData.map((row, rIdx) => (react_1.default.createElement("tr", { key: rIdx, style: { transition: 'background 0.2s' }, onMouseOver: (e) => (e.currentTarget.style.backgroundColor = '#f8fafc'), onMouseOut: (e) => (e.currentTarget.style.backgroundColor = 'transparent') },
+                    config.table.columns.map(col => (react_1.default.createElement("td", { key: col.key, style: tdStyle }, col.render ? col.render(row) : row[col.key]))),
+                    config.table.actions && (react_1.default.createElement("td", { style: { ...tdStyle, textAlign: 'right' } },
+                        react_1.default.createElement("div", { style: { display: 'flex', justifyContent: 'center', gap: '12px' } },
+                            config.table.actions.onView && (react_1.default.createElement("button", { onClick: () => config.table.actions.onView(row), style: { ...actionIconStyle, color: '#64748b' }, title: "View" }, "\uD83D\uDC41")),
+                            config.table.actions.onUpdate && (react_1.default.createElement("button", { onClick: () => config.table.actions.onUpdate(row), style: { ...actionIconStyle, color: '#005bb5' }, title: "Edit" }, "\u270E")),
+                            config.table.actions.onDelete && (react_1.default.createElement("button", { onClick: () => config.table.actions.onDelete(row), style: { ...actionIconStyle, color: '#ef4444' }, title: "Delete" }, "\uD83D\uDDD1"))))))))) : (react_1.default.createElement("tr", null,
+                    react_1.default.createElement("td", { colSpan: (config.table.columns.length || 0) + (config.table.actions ? 1 : 0), style: { ...tdStyle, textAlign: 'center', padding: '64px', color: '#94a3b8' } },
+                        react_1.default.createElement("div", { style: { fontSize: '48px', marginBottom: '16px', opacity: 0.5 } }, "\uD83D\uDCE6"),
+                        react_1.default.createElement("div", { style: { fontSize: '16px', fontWeight: 600 } }, "No records found"),
+                        react_1.default.createElement("div", { style: { fontSize: '14px', marginTop: '4px' } }, "Try adjusting your filters or search.")))))),
+            renderPagination()))));
+};
+exports.FvMasterScreen = FvMasterScreen;

package/dist/components/FvNumberField.js

@@ -27,27 +27,20 @@ exports.FvNumberField = void 0;
 const react_1 = __importStar(require("react"));
 const validation_engine_1 = require("@fovestta2/validation-engine");
 const FvNumberField = ({ label = '', placeholder = '', value, schema, disabled = false, readonly = false, min, max, step = 1, className = '', inputClassName = '', labelClassName = '', errorClassName = '', onChange, onBlur, onFocus, }) => {
-    const [errorMessage, setErrorMessage] = (0, react_1.useState)(null);
-    (0, react_1.useEffect)(() => {
-        validateValue(value);
-    }, [value, schema]);
-    const validateValue = (val) => {
-        if (!schema)
-            return;
-        const result = validation_engine_1.Validator.validate(val, schema);
-        if (!result.isValid && result.errorKey) {
-            setErrorMessage(result.errorKey);
-        }
-        else {
-            setErrorMessage(null);
-        }
-    };
+    const [isTouched, setIsTouched] = (0, react_1.useState)(false);
+    const errorMessage = (0, react_1.useMemo)(() => {
+        if (!isTouched || !schema)
+            return null;
+        const result = validation_engine_1.Validator.validate(value, schema);
+        return result.isValid ? null : (result.message || result.errorKey);
+    }, [value, schema, isTouched]);
+    // Sync logic removed in favor of useMemo
     const handleInput = (e) => {
         const val = e.target.value;
         onChange(val === '' ? '' : Number(val));
     };
     const handleBlur = (e) => {
-        validateValue(value);
+        setIsTouched(true);
         if (onBlur)
             onBlur();
     };
@@ -72,6 +65,9 @@ const FvNumberField = ({ label = '', placeholder = '', value, schema, disabled =
             ERR_NUMERIC_INVALID: 'Please enter a valid number',
             ERR_RANGE_INVALID: 'Number is out of range',
             ERR_DUPLICATE: 'This value already exists',
+            ERR_MIN_VALUE: 'Value is too small',
+            ERR_MAX_VALUE: 'Value is too large',
+            ERR_CUSTOM_INVALID: 'Invalid value',
         };
         return errorMessages[errorMessage] || errorMessage;
     };

package/dist/components/FvPasswordField.js

@@ -27,27 +27,20 @@ exports.FvPasswordField = void 0;
 const react_1 = __importStar(require("react"));
 const validation_engine_1 = require("@fovestta2/validation-engine");
 const FvPasswordField = ({ label = 'Password', placeholder = '••••••••', value, schema, disabled = false, readonly = false, className = '', inputClassName = '', labelClassName = '', errorClassName = '', onChange, onBlur, onFocus, }) => {
-    const [errorMessage, setErrorMessage] = (0, react_1.useState)(null);
+    const [isTouched, setIsTouched] = (0, react_1.useState)(false);
     const [showPassword, setShowPassword] = (0, react_1.useState)(false);
-    (0, react_1.useEffect)(() => {
-        validateValue(value);
-    }, [value, schema]);
-    const validateValue = (val) => {
-        if (!schema)
-            return;
-        const result = validation_engine_1.Validator.validate(val, schema);
-        if (!result.isValid && result.errorKey) {
-            setErrorMessage(result.errorKey);
-        }
-        else {
-            setErrorMessage(null);
-        }
-    };
+    const errorMessage = (0, react_1.useMemo)(() => {
+        if (!isTouched || !schema)
+            return null;
+        const result = validation_engine_1.Validator.validate(value, schema);
+        return result.isValid ? null : (result.message || result.errorKey);
+    }, [value, schema, isTouched]);
+    // Sync logic removed in favor of useMemo
     const handleInput = (e) => {
         onChange(e.target.value);
     };
     const handleBlur = (e) => {
-        validateValue(value);
+        setIsTouched(true);
         if (onBlur)
             onBlur();
     };
@@ -76,6 +69,9 @@ const FvPasswordField = ({ label = 'Password', placeholder = '••••••
             ERR_PASSWORD_MISSING_LOWERCASE: 'Lowercase letter missing',
             ERR_PASSWORD_MISSING_NUMBER: 'At least one number missing',
             ERR_PASSWORD_MISSING_SPECIAL_CHAR: 'Special character missing',
+            ERR_MIN_VALUE: 'Value is too small',
+            ERR_MAX_VALUE: 'Value is too large',
+            ERR_CUSTOM_INVALID: 'Invalid value',
         };
         return errorMessages[errorMessage] || errorMessage;
     };

package/dist/index.d.ts

@@ -26,3 +26,4 @@ export type { FvDocumentFieldProps } from './components/FvDocumentField';
 export * from './components/FvRichTextEditor';
 export * from './components/AddUpdateForm';
 export * from './components/QueryForm';
+export * from './components/FvMasterScreen';

package/dist/index.js

@@ -45,3 +45,4 @@ Object.defineProperty(exports, "FvDocumentField", { enumerable: true, get: funct
 __exportStar(require("./components/FvRichTextEditor"), exports);
 __exportStar(require("./components/AddUpdateForm"), exports);
 __exportStar(require("./components/QueryForm"), exports);
+__exportStar(require("./components/FvMasterScreen"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fovestta2/web-react",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "publishConfig": {
     "access": "public"
   },
@@ -25,7 +25,7 @@
     "react-dom": ">=18.0.0"
   },
   "dependencies": {
-    "@fovestta2/validation-engine": "^1.2.2"
+    "@fovestta2/validation-engine": "^1.2.3"
   },
   "devDependencies": {
     "@types/react": "^18.2.0",