@fovestta2/web-react 1.1.0

package/dist/components/FvTimeField.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { ValidationSchema } from '@fovestta2/validation-engine';
+export interface FvTimeFieldProps {
+    label?: string;
+    value: string;
+    schema?: ValidationSchema;
+    disabled?: boolean;
+    readonly?: boolean;
+    placeholder?: string;
+    className?: string;
+    labelClassName?: string;
+    errorClassName?: string;
+    onChange: (value: string) => void;
+    onBlur?: () => void;
+    onFocus?: () => void;
+}
+export declare const FvTimeField: React.FC<FvTimeFieldProps>;

package/dist/components/FvTimeField.js

@@ -0,0 +1,190 @@
+"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.FvTimeField = void 0;
+const react_1 = __importStar(require("react"));
+const validation_engine_1 = require("@fovestta2/validation-engine");
+const FvTimeField = ({ label = '', value, schema, disabled = false, readonly = false, placeholder = '--:--', className = '', labelClassName = '', errorClassName = '', onChange, onBlur, onFocus, }) => {
+    const [errorMessage, setErrorMessage] = (0, react_1.useState)(null);
+    const [showPicker, setShowPicker] = (0, react_1.useState)(false);
+    const [selectedHour, setSelectedHour] = (0, react_1.useState)(null);
+    const [selectedMinute, setSelectedMinute] = (0, react_1.useState)(null);
+    const containerRef = (0, react_1.useRef)(null);
+    const hours = Array.from({ length: 24 }, (_, i) => i);
+    const minutes = Array.from({ length: 60 }, (_, i) => i);
+    (0, react_1.useEffect)(() => {
+        validateValue(value);
+        parseTimeValue(value);
+    }, [value, schema]);
+    (0, react_1.useEffect)(() => {
+        const handleClickOutside = (event) => {
+            if (containerRef.current && !containerRef.current.contains(event.target)) {
+                if (showPicker) {
+                    setShowPicker(false);
+                    validateValue(value);
+                    if (onBlur)
+                        onBlur();
+                }
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [showPicker, value]);
+    const parseTimeValue = (val) => {
+        if (!val || typeof val !== 'string') {
+            setSelectedHour(null);
+            setSelectedMinute(null);
+            return;
+        }
+        const parts = val.split(':');
+        if (parts.length === 2) {
+            const h = parseInt(parts[0], 10);
+            const m = parseInt(parts[1], 10);
+            if (!isNaN(h) && h >= 0 && h <= 23)
+                setSelectedHour(h);
+            if (!isNaN(m) && m >= 0 && m <= 59)
+                setSelectedMinute(m);
+        }
+    };
+    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 padZero = (num) => num.toString().padStart(2, '0');
+    const updateTimeValue = (hour, minute) => {
+        if (hour !== null && minute !== null) {
+            const timeVal = `${padZero(hour)}:${padZero(minute)}`;
+            onChange(timeVal);
+            setShowPicker(false);
+        }
+    };
+    const handleSelectHour = (h) => {
+        setSelectedHour(h);
+        updateTimeValue(h, selectedMinute);
+    };
+    const handleSelectMinute = (m) => {
+        setSelectedMinute(m);
+        updateTimeValue(selectedHour, m);
+    };
+    const togglePicker = () => {
+        if (!disabled && !readonly) {
+            if (!showPicker) {
+                if (onFocus)
+                    onFocus();
+            }
+            setShowPicker(!showPicker);
+        }
+    };
+    const isRequired = () => {
+        var _a;
+        return ((_a = schema === null || schema === void 0 ? void 0 : schema.rules) === null || _a === void 0 ? void 0 : _a.some((r) => { var _a; return r.name === 'required' && ((_a = r.params) === null || _a === void 0 ? void 0 : _a['enabled']); })) || false;
+    };
+    const getDisplayValue = () => {
+        if (selectedHour !== null && selectedMinute !== null) {
+            return `${padZero(selectedHour)}:${padZero(selectedMinute)}`;
+        }
+        return placeholder;
+    };
+    const getErrorMessage = () => {
+        if (!errorMessage)
+            return '';
+        const errorMessages = {
+            ERR_REQUIRED: 'Time is required',
+            ERR_INVALID_TIME: 'Invalid time format',
+        };
+        return errorMessages[errorMessage] || errorMessage;
+    };
+    return (react_1.default.createElement("div", { ref: containerRef, className: `fv-field-container ${className}`, style: { marginBottom: '16px', display: 'flex', flexDirection: 'column', position: 'relative' } },
+        label && (react_1.default.createElement("label", { className: `fv-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' } }, " *"))),
+        react_1.default.createElement("div", { className: `time-input ${errorMessage ? 'error' : ''}`, onClick: togglePicker, style: {
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                padding: '10px',
+                border: errorMessage ? '1px solid #dc3545' : '1px solid #ccc',
+                borderRadius: '4px',
+                fontSize: '14px',
+                backgroundColor: disabled ? '#f5f5f5' : '#fff',
+                cursor: disabled || readonly ? 'not-allowed' : 'pointer',
+                ...((disabled || readonly) ? { opacity: 0.6 } : {})
+            } },
+            react_1.default.createElement("span", { style: { color: (selectedHour !== null && selectedMinute !== null) ? '#333' : '#999' } }, getDisplayValue()),
+            react_1.default.createElement("svg", { viewBox: "0 0 24 24", width: "20", height: "20", fill: "currentColor", style: { color: '#666' } },
+                react_1.default.createElement("path", { d: "M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z" }))),
+        showPicker && (react_1.default.createElement("div", { className: "time-picker-dropdown", style: {
+                position: 'absolute',
+                top: '100%',
+                left: 0,
+                marginTop: '4px',
+                backgroundColor: '#fff',
+                border: '1px solid #ccc',
+                borderRadius: '4px',
+                boxShadow: '0 4px 6px rgba(0,0,0,0.1)',
+                zIndex: 1000,
+                width: '200px',
+                display: 'flex',
+                flexDirection: 'column'
+            } },
+            react_1.default.createElement("div", { style: { padding: '10px', display: 'flex', justifyContent: 'space-between', borderBottom: '1px solid #eee', fontWeight: 'bold' } },
+                react_1.default.createElement("span", null,
+                    selectedHour !== null ? padZero(selectedHour) : '--',
+                    ":",
+                    selectedMinute !== null ? padZero(selectedMinute) : '--'),
+                react_1.default.createElement("button", { type: "button", onClick: () => setShowPicker(false), style: { background: 'none', border: 'none', cursor: 'pointer', fontSize: '18px', lineHeight: 1 } }, "\u00D7")),
+            react_1.default.createElement("div", { style: { display: 'flex', height: '200px' } },
+                react_1.default.createElement("div", { style: { flex: 1, overflowY: 'auto', borderRight: '1px solid #eee' } },
+                    react_1.default.createElement("div", { style: { padding: '5px', textAlign: 'center', fontWeight: 'bold', fontSize: '12px', color: '#666', borderBottom: '1px solid #eee' } }, "Hour"),
+                    hours.map((h) => (react_1.default.createElement("div", { key: `h-${h}`, onClick: () => handleSelectHour(h), style: {
+                            padding: '8px',
+                            textAlign: 'center',
+                            cursor: 'pointer',
+                            backgroundColor: selectedHour === h ? '#007bff' : 'transparent',
+                            color: selectedHour === h ? '#fff' : '#333'
+                        } }, padZero(h))))),
+                react_1.default.createElement("div", { style: { flex: 1, overflowY: 'auto' } },
+                    react_1.default.createElement("div", { style: { padding: '5px', textAlign: 'center', fontWeight: 'bold', fontSize: '12px', color: '#666', borderBottom: '1px solid #eee' } }, "Minute"),
+                    minutes.map((m) => (react_1.default.createElement("div", { key: `m-${m}`, onClick: () => handleSelectMinute(m), style: {
+                            padding: '8px',
+                            textAlign: 'center',
+                            cursor: 'pointer',
+                            backgroundColor: selectedMinute === m ? '#007bff' : 'transparent',
+                            color: selectedMinute === m ? '#fff' : '#333'
+                        } }, padZero(m)))))))),
+        errorMessage && (react_1.default.createElement("span", { className: `fv-error-text ${errorClassName}`, style: { marginTop: '4px', fontSize: '12px', color: '#dc3545' } },
+            "\u26A0 ",
+            getErrorMessage()))));
+};
+exports.FvTimeField = FvTimeField;

package/dist/components/FvToggle.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export interface FvToggleProps {
+    label?: string;
+    value: boolean;
+    disabled?: boolean;
+    required?: boolean;
+    className?: string;
+    labelClassName?: string;
+    toggleClassName?: string;
+    onChange: (value: boolean) => void;
+}
+export declare const FvToggle: React.FC<FvToggleProps>;

package/dist/components/FvToggle.js

@@ -0,0 +1,39 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FvToggle = void 0;
+const react_1 = __importDefault(require("react"));
+const FvToggle = ({ label = '', value, disabled = false, required = false, className = '', labelClassName = '', toggleClassName = '', onChange, }) => {
+    const handleChange = (e) => {
+        onChange(e.target.checked);
+    };
+    return (react_1.default.createElement("div", { className: `fv-toggle-container ${className}`, style: { marginBottom: '16px', display: 'flex', alignItems: 'center' } },
+        react_1.default.createElement("label", { className: `fv-toggle-label ${labelClassName}`, style: { display: 'flex', alignItems: 'center', cursor: disabled ? 'not-allowed' : 'pointer', fontSize: '14px', color: disabled ? '#999' : '#333' } },
+            react_1.default.createElement("span", { className: "fv-toggle-text", style: { marginRight: '10px' } },
+                label,
+                required && react_1.default.createElement("span", { className: "fv-required-asterisk", style: { color: '#dc3545', fontWeight: 'bold' } }, " *")),
+            react_1.default.createElement("div", { className: `fv-toggle-switch ${toggleClassName}`, style: { position: 'relative', display: 'inline-block', width: '40px', height: '20px' } },
+                react_1.default.createElement("input", { type: "checkbox", checked: value, onChange: handleChange, disabled: disabled, className: "fv-toggle-input", style: { opacity: 0, width: 0, height: 0 } }),
+                react_1.default.createElement("span", { className: "fv-toggle-slider", style: {
+                        position: 'absolute',
+                        cursor: disabled ? 'not-allowed' : 'pointer',
+                        top: 0, left: 0, right: 0, bottom: 0,
+                        backgroundColor: value ? '#007bff' : (disabled ? '#e0e0e0' : '#ccc'),
+                        transition: '0.4s',
+                        borderRadius: '34px'
+                    } },
+                    react_1.default.createElement("span", { style: {
+                            position: 'absolute',
+                            content: '""',
+                            height: '16px',
+                            width: '16px',
+                            left: value ? '22px' : '2px',
+                            bottom: '2px',
+                            backgroundColor: 'white',
+                            transition: '0.4s',
+                            borderRadius: '50%'
+                        } }))))));
+};
+exports.FvToggle = FvToggle;

package/dist/components/FvUanField.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { ValidationSchema } from '@fovestta2/validation-engine';
+export interface FvUanFieldProps {
+    label?: string;
+    value: string;
+    schema?: ValidationSchema;
+    disabled?: boolean;
+    className?: string;
+    inputClassName?: string;
+    labelClassName?: string;
+    errorClassName?: string;
+    onChange: (value: string) => void;
+    onBlur?: () => void;
+    onFocus?: () => void;
+}
+export declare const FvUanField: React.FC<FvUanFieldProps>;

package/dist/components/FvUanField.js

@@ -0,0 +1,92 @@
+"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.FvUanField = void 0;
+const react_1 = __importStar(require("react"));
+const validation_engine_1 = require("@fovestta2/validation-engine");
+const FvUanField = ({ label = 'UAN Number', value, schema, disabled = false, 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 handleInput = (e) => {
+        let rawVal = e.target.value;
+        const numericValue = rawVal.replace(/[^0-9]/g, '');
+        const truncatedValue = numericValue.substring(0, 12);
+        onChange(truncatedValue);
+    };
+    const handleBlur = (e) => {
+        validateValue(value);
+        if (onBlur)
+            onBlur();
+    };
+    const handleFocus = (e) => {
+        if (onFocus)
+            onFocus();
+    };
+    const isRequired = () => {
+        var _a;
+        return ((_a = schema === null || schema === void 0 ? void 0 : schema.rules) === null || _a === void 0 ? void 0 : _a.some((r) => { var _a; return r.name === 'required' && ((_a = r.params) === null || _a === void 0 ? void 0 : _a['enabled']); })) || false;
+    };
+    const getErrorMessage = () => {
+        if (!errorMessage)
+            return '';
+        const errorMessages = {
+            ERR_REQUIRED: 'This field is required',
+        };
+        return errorMessages[errorMessage] || errorMessage;
+    };
+    return (react_1.default.createElement("div", { className: `fv-field-container ${className}`, style: { marginBottom: '16px', display: 'flex', flexDirection: 'column' } },
+        label && (react_1.default.createElement("label", { className: `fv-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' } }, " *"))),
+        react_1.default.createElement("input", { type: "text", value: value, onChange: handleInput, onBlur: handleBlur, onFocus: handleFocus, disabled: disabled, className: `fv-input ${errorMessage ? 'fv-input-error' : ''} ${inputClassName}`, style: {
+                padding: '10px',
+                border: errorMessage ? '1px solid #dc3545' : '1px solid #ccc',
+                borderRadius: '4px',
+                fontSize: '14px',
+                backgroundColor: disabled ? '#f5f5f5' : '#fff',
+                cursor: disabled ? 'not-allowed' : 'text',
+                outline: 'none',
+                boxSizing: 'border-box',
+                width: '100%',
+                ...(disabled ? { opacity: 0.6 } : {})
+            } }),
+        errorMessage && (react_1.default.createElement("span", { className: `fv-error-text ${errorClassName}`, style: { marginTop: '4px', fontSize: '12px', color: '#dc3545' } },
+            "\u26A0 ",
+            getErrorMessage()))));
+};
+exports.FvUanField = FvUanField;

package/dist/components/QueryForm.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+export interface QueryFormColumn {
+    label: string;
+    key: string;
+    type: 'dropdown' | 'text' | 'number' | 'date' | 'month' | 'file' | 'name-code' | 'phone' | 'uan' | 'pf' | 'esi' | 'ifsc' | 'micr' | 'iban' | 'email' | 'password' | 'toggle';
+    options?: any[];
+    placeholder?: string;
+    onChange?: (value: any) => void;
+    accept?: string;
+    required?: boolean;
+    readonly?: boolean;
+}
+export interface QueryFormRow {
+    columns: QueryFormColumn[];
+}
+export interface QueryFormConfig {
+    title: string;
+    rows: QueryFormRow[];
+    buttonText?: string;
+    showExportButton?: boolean;
+    exportFormats?: string[];
+    showBackButton?: boolean;
+    backButtonText?: string;
+}
+export interface QueryFormProps {
+    config: QueryFormConfig;
+    onSubmit: (data: Record<string, any>) => void;
+    onExport?: (format: string) => void;
+    onBack?: () => void;
+}
+export declare const QueryForm: React.FC<QueryFormProps>;

package/dist/components/QueryForm.js

@@ -0,0 +1,214 @@
+"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.QueryForm = void 0;
+const react_1 = __importStar(require("react"));
+// Import all Fv controls
+const FvEntryField_1 = require("./FvEntryField");
+const FvDropdown_1 = require("./FvDropdown");
+const FvNumberField_1 = require("./FvNumberField");
+const FvDateField_1 = require("./FvDateField");
+const FvMonthYearField_1 = require("./FvMonthYearField");
+const FvFileSelector_1 = require("./FvFileSelector");
+const FvNameCode_1 = require("./FvNameCode");
+const FvPhoneField_1 = require("./FvPhoneField");
+const FvUanField_1 = require("./FvUanField");
+const FvPfField_1 = require("./FvPfField");
+const FvEsiField_1 = require("./FvEsiField");
+const FvIfscField_1 = require("./FvIfscField");
+const FvMicrField_1 = require("./FvMicrField");
+const FvIbanField_1 = require("./FvIbanField");
+const FvEmailField_1 = require("./FvEmailField");
+const FvPasswordField_1 = require("./FvPasswordField");
+const FvToggle_1 = require("./FvToggle");
+const QueryForm = ({ config, onSubmit, onExport, onBack, }) => {
+    const [formData, setFormData] = (0, react_1.useState)({});
+    const [showExportMenu, setShowExportMenu] = (0, react_1.useState)(false);
+    const [showValidationError, setShowValidationError] = (0, react_1.useState)(false);
+    // Initialize form data
+    (0, react_1.useEffect)(() => {
+        const initialData = {};
+        config.rows.forEach(row => {
+            row.columns.forEach(col => {
+                initialData[col.key] = col.type === 'toggle' ? false : '';
+            });
+        });
+        setFormData(initialData);
+    }, [config]);
+    (0, react_1.useEffect)(() => {
+        const handleClickOutside = () => setShowExportMenu(false);
+        document.addEventListener('click', handleClickOutside);
+        return () => document.removeEventListener('click', handleClickOutside);
+    }, []);
+    const handleFieldChange = (key, value, column) => {
+        setFormData(prev => ({ ...prev, [key]: value }));
+        if (column.onChange) {
+            column.onChange(value);
+        }
+    };
+    const mapSearchOptions = (options) => {
+        return options.map(opt => ({
+            code: opt.code || opt.value,
+            name: opt.name || opt.label || opt.value,
+            value: opt.value
+        }));
+    };
+    const mapType = (type) => {
+        switch (type) {
+            case 'text': return 'EntryField';
+            case 'number': return 'NumberField';
+            case 'date': return 'DateField';
+            case 'dropdown': return 'Dropdown';
+            case 'month': return 'MonthYearField';
+            case 'file': return 'FileSelector';
+            case 'name-code': return 'Dropdown';
+            case 'phone': return 'PhoneField';
+            case 'uan': return 'UanField';
+            case 'pf': return 'PfField';
+            case 'esi': return 'EsiField';
+            case 'ifsc': return 'IfscField';
+            case 'micr': return 'MicrField';
+            case 'iban': return 'IbanField';
+            case 'email': return 'EmailField';
+            case 'password': return 'PasswordField';
+            case 'toggle': return 'Toggle';
+            default: return 'EntryField';
+        }
+    };
+    const getSchema = (column) => {
+        const rules = [];
+        const errorPriority = [];
+        if (column.required) {
+            rules.push({ name: 'required', params: { enabled: true }, errorKey: 'ERR_REQUIRED' });
+            errorPriority.push('required');
+        }
+        if (column.type === 'email') {
+            rules.push({ name: 'regex', params: { pattern: '^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$' }, errorKey: 'ERR_EMAIL_INVALID' });
+            errorPriority.push('regex');
+        }
+        if (column.type === 'pf') {
+            rules.push({ name: 'regex', params: { pattern: '^[A-Z]{2}/[A-Z]{3}/[0-9]{7}/[0-9]{3}/[0-9]{7}$' }, errorKey: 'ERR_PF_INVALID' });
+            errorPriority.push('regex');
+        }
+        if (column.type === 'password') {
+            rules.push({
+                name: 'passwordComplexity',
+                params: { minLength: 8, requireUppercase: true, requireLowercase: true, requireNumber: true, requireSpecialChar: true }
+            });
+            errorPriority.push('passwordComplexity');
+        }
+        return {
+            controlType: mapType(column.type),
+            rules: rules,
+            errorPriority: errorPriority
+        };
+    };
+    const validateForm = () => {
+        let isValid = true;
+        config.rows.forEach(row => {
+            row.columns.forEach(col => {
+                if (col.required && (!formData[col.key] || formData[col.key] === '')) {
+                    isValid = false;
+                }
+            });
+        });
+        return isValid;
+    };
+    const handleButtonClick = () => {
+        if (validateForm()) {
+            setShowValidationError(false);
+            onSubmit(formData);
+        }
+        else {
+            setShowValidationError(true);
+        }
+    };
+    const exportToFormat = (format, e) => {
+        e.stopPropagation();
+        if (onExport)
+            onExport(format);
+        setShowExportMenu(false);
+    };
+    const renderField = (column) => {
+        const value = formData[column.key];
+        const schema = getSchema(column);
+        const disabled = column.readonly || false;
+        const onChange = (val) => handleFieldChange(column.key, val, column);
+        switch (column.type) {
+            case 'dropdown':
+                return react_1.default.createElement(FvDropdown_1.FvDropdown, { label: column.label, placeholder: column.placeholder || 'Select option', options: column.options || [], value: value || '', schema: schema, disabled: disabled, onChange: onChange });
+            case 'text':
+                return react_1.default.createElement(FvEntryField_1.FvEntryField, { label: column.label, placeholder: column.placeholder, value: value || '', schema: schema, disabled: disabled, onChange: onChange });
+            case 'number':
+                return react_1.default.createElement(FvNumberField_1.FvNumberField, { label: column.label, placeholder: column.placeholder, value: value || null, schema: schema, disabled: disabled, onChange: onChange });
+            case 'date':
+                return react_1.default.createElement(FvDateField_1.FvDateField, { label: column.label, value: value || '', schema: schema, disabled: disabled, onChange: onChange });
+            case 'month':
+                return react_1.default.createElement(FvMonthYearField_1.FvMonthYearField, { label: column.label, value: value || '', schema: schema, disabled: disabled, onChange: onChange });
+            case 'file':
+                return react_1.default.createElement(FvFileSelector_1.FvFileSelector, { label: column.label, placeholder: column.placeholder, accept: column.accept, value: value || null, schema: schema, disabled: disabled, onChange: onChange });
+            case 'name-code':
+                return react_1.default.createElement(FvNameCode_1.FvNameCode, { label: column.label, placeholder: column.placeholder, options: mapSearchOptions(column.options || []), value: value || '', schema: schema, disabled: disabled, onChange: onChange });
+            case 'phone':
+                return react_1.default.createElement(FvPhoneField_1.FvPhoneField, { label: column.label, value: value || '', schema: schema, disabled: disabled, onChange: onChange });
+            case 'uan':
+                return react_1.default.createElement(FvUanField_1.FvUanField, { label: column.label, value: value || '', schema: schema, disabled: disabled, onChange: onChange });
+            case 'pf':
+                return react_1.default.createElement(FvPfField_1.FvPfField, { label: column.label, value: value || '', schema: schema, disabled: disabled, onChange: onChange });
+            case 'esi':
+                return react_1.default.createElement(FvEsiField_1.FvEsiField, { label: column.label, value: value || '', schema: schema, disabled: disabled, onChange: onChange });
+            case 'ifsc':
+                return react_1.default.createElement(FvIfscField_1.FvIfscField, { label: column.label, value: value || '', schema: schema, disabled: disabled, onChange: onChange });
+            case 'micr':
+                return react_1.default.createElement(FvMicrField_1.FvMicrField, { label: column.label, value: value || '', schema: schema, disabled: disabled, onChange: onChange });
+            case 'iban':
+                return react_1.default.createElement(FvIbanField_1.FvIbanField, { label: column.label, value: value || '', schema: schema, disabled: disabled, onChange: onChange });
+            case 'email':
+                return react_1.default.createElement(FvEmailField_1.FvEmailField, { label: column.label, placeholder: column.placeholder, value: value || '', schema: schema, disabled: disabled, onChange: onChange });
+            case 'password':
+                return react_1.default.createElement(FvPasswordField_1.FvPasswordField, { label: column.label, placeholder: column.placeholder, value: value || '', schema: schema, disabled: disabled, onChange: onChange });
+            case 'toggle':
+                return react_1.default.createElement(FvToggle_1.FvToggle, { label: column.label, value: value || false, disabled: disabled, onChange: onChange });
+            default:
+                return null;
+        }
+    };
+    return (react_1.default.createElement("div", { className: "query-form-container", style: { background: '#f2f2f2', border: '1px solid #e0e0e0', borderRadius: '8px', padding: '16px', marginBottom: '16px' } },
+        react_1.default.createElement("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px' } },
+            react_1.default.createElement("h2", { style: { fontSize: '20px', fontWeight: 700, margin: 0, color: '#303030' } }, config.title),
+            config.showExportButton && config.exportFormats && config.exportFormats.length > 0 && (react_1.default.createElement("div", { style: { position: 'relative' } },
+                react_1.default.createElement("button", { type: "button", onClick: (e) => { e.stopPropagation(); setShowExportMenu(!showExportMenu); }, style: { display: 'flex', alignItems: 'center', gap: '5px', padding: '8px 16px', background: '#006aff', color: '#fff', border: 'none', borderRadius: '7px', cursor: 'pointer' } }, "Export \u25BC"),
+                showExportMenu && (react_1.default.createElement("div", { style: { position: 'absolute', top: '100%', right: 0, background: '#fff', borderRadius: '4px', boxShadow: '0 4px 12px rgba(0,0,0,0.15)', marginTop: '5px', minWidth: '150px', zIndex: 1000 } }, config.exportFormats.map(format => (react_1.default.createElement("button", { key: format, onClick: (e) => exportToFormat(format, e), style: { width: '100%', padding: '10px 16px', background: 'none', border: 'none', textAlign: 'left', cursor: 'pointer', fontSize: '14px', borderBottom: '1px solid #f0f0f0' } },
+                    "Export as ",
+                    format.toUpperCase())))))))),
+        showValidationError && (react_1.default.createElement("div", { style: { background: '#fee', color: '#c33', padding: '12px 16px', borderRadius: '8px', marginBottom: '16px', border: '1px solid #fcc', fontSize: '14px', fontWeight: 500 } }, "\u26A0 Please fill all required fields correctly.")),
+        react_1.default.createElement("div", { style: { background: '#fff', padding: '16px', borderRadius: '12px', border: '1px solid #cfcfcf' } },
+            react_1.default.createElement("form", { onSubmit: (e) => e.preventDefault() },
+                config.rows.map((row, rowIndex) => (react_1.default.createElement("div", { key: rowIndex, style: { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '16px', marginBottom: '16px' } }, row.columns.map((col, colIndex) => (react_1.default.createElement("div", { key: `${rowIndex}-${colIndex}`, style: { minWidth: 0 } }, renderField(col))))))),
+                react_1.default.createElement("div", { style: { display: 'flex', justifyContent: 'space-between', gap: '12px', marginTop: '16px' } },
+                    react_1.default.createElement("button", { type: "button", onClick: handleButtonClick, style: { padding: '8px 24px', background: '#006aff', color: '#fff', border: 'none', borderRadius: '7px', fontWeight: 600, cursor: 'pointer' } }, config.buttonText || 'View'),
+                    config.showBackButton && (react_1.default.createElement("button", { type: "button", onClick: onBack, style: { padding: '8px 24px', background: '#303030', color: '#fff', border: 'none', borderRadius: '7px', fontWeight: 600, cursor: 'pointer' } }, config.backButtonText || 'Back')))))));
+};
+exports.QueryForm = QueryForm;

package/dist/index.d.ts

@@ -0,0 +1,28 @@
+export * from './components/FvEntryField';
+export * from './components/FvEmailField';
+export * from './components/FvPasswordField';
+export * from './components/FvNumberField';
+export * from './components/FvCheckbox';
+export * from './components/FvToggle';
+export * from './components/FvDropdown';
+export * from './components/FvRadioGroup';
+export * from './components/FvDateField';
+export * from './components/FvTimeField';
+export * from './components/FvMonthYearField';
+export * from './components/FvServicePeriod';
+export * from './components/FvEsiField';
+export * from './components/FvIbanField';
+export * from './components/FvIfscField';
+export * from './components/FvMicrField';
+export * from './components/FvPfField';
+export * from './components/FvPhoneField';
+export * from './components/FvUanField';
+export * from './components/FvNameCode';
+export { FileInfo as FvFileInfo, FvFileSelector } from './components/FvFileSelector';
+export type { FvFileSelectorProps } from './components/FvFileSelector';
+export * from './components/FvImageSelector';
+export { FvDocumentField } from './components/FvDocumentField';
+export type { FvDocumentFieldProps } from './components/FvDocumentField';
+export * from './components/FvRichTextEditor';
+export * from './components/AddUpdateForm';
+export * from './components/QueryForm';