@solidstarters/solid-core-ui 1.1.11 → 1.1.12

package/src/components/core/form/fields/SolidMediaSingleField.tsx

@@ -1,6 +1,5 @@
 'use client';
 import { DropzonePlaceholder } from "@/components/common/DropzonePlaceholder";
-import { DropzoneUpload } from "@/components/common/DropzoneUpload";
 import { useDeleteMediaMutation } from "@/redux/api/mediaApi";
 import { Button } from "primereact/button";
 import { Dialog } from "primereact/dialog";
@@ -10,7 +9,8 @@ import { useDropzone } from "react-dropzone";
 import * as Yup from 'yup';
 import { Schema } from "yup";
 import { FormikObject, ISolidField, SolidFieldProps } from "./ISolidField";
-
+import { FileReaderExt } from "@/components/common/FileReaderExt";
+import { ProgressBar } from "primereact/progressbar";
 export class SolidMediaSingleField implements ISolidField {
 
     private fieldContext: SolidFieldProps;
@@ -74,7 +74,7 @@ export class SolidMediaSingleField implements ISolidField {
     render(formik: FormikObject) {
         const fieldMetadata = this.fieldContext.fieldMetadata;
         const fieldLayoutInfo = this.fieldContext.field;
-        const className = fieldLayoutInfo.attrs?.className || 'field col-6 flex flex-column gap-2 mt-4';
+        const className = fieldLayoutInfo.attrs?.className || 'field col-12';
         const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
         const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
         const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
@@ -82,6 +82,17 @@ export class SolidMediaSingleField implements ISolidField {
         const [isDeleteImageDialogVisible, setDeleteImageDialogVisible] = useState(false);
         const [imageToBeDeletedData, setImageToBeDeletedData] = useState<any>();
         const [imagesPreview, setImagesPreview] = useState<string | ArrayBuffer | null>(null);
+        const [uploadProgress, setUploadProgress] = useState<number>(0);
+        const [uploadCompleted, setUploadCompleted] = useState<boolean>(false);
+        const [fileDetails, setFileDetails] = useState<{ name: string; type: string } | null>(null);
+        const [uploadedSize, setUploadedSize] = useState<string>("0 MB");
+        const [totalSize, setTotalSize] = useState<string>("0 KB");
+
+        const formatFileSize = (size: number) => {
+            return size >= 1024 * 1024
+                ? `${(size / (1024 * 1024)).toFixed(1)} MB`
+                : `${(size / 1024).toFixed(1)} KB`;
+        };
 
         const fieldDisabled = fieldLayoutInfo.attrs?.disabled;
         const fieldReadonly = fieldLayoutInfo.attrs?.readonly;
@@ -102,30 +113,92 @@ export class SolidMediaSingleField implements ISolidField {
             formik.setFieldValue(fieldLayoutInfo.attrs.name, null);
             setDeleteImageDialogVisible(false);
         };
+        const handleCancelUpload = (e: React.MouseEvent) => {
+            e.stopPropagation();
+            if (imageToBeDeletedData?.imagesPreview.id) {
+                deleteMedia(imageToBeDeletedData.imagesPreview.id);
+            }
+            e.stopPropagation();
+            setUploadProgress(0);
+            setUploadCompleted(false);
+            setFileDetails(null);
+            formik.setFieldValue(fieldLayoutInfo.attrs.name, null);
+            setDeleteImageDialogVisible(false);
+        };
 
         const handleDropImage = (acceptedFiles: File[]) => {
+            // const file = acceptedFiles[0];
+            // if (file) {
+            //     formik.setFieldValue(fieldLayoutInfo.attrs.name, file);
+            // } else {
+            //     console.error("No file was accepted");
+            // }
             const file = acceptedFiles[0];
-            if (file) {
-                formik.setFieldValue(fieldLayoutInfo.attrs.name, file);
-            } else {
-                console.error("No file was accepted");
-            }
+            if (!file) return;
+
+            setUploadCompleted(false);
+            setUploadProgress(0);
+            setTotalSize(formatFileSize(file.size));
+            setUploadedSize("0 KB");
+            setFileDetails({ name: file.name, type: file.type });
+
+            const reader = new FileReader();
+
+            reader.onloadstart = () => {
+                setUploadProgress(0);
+                setUploadedSize("0 KB");
+            };
+            reader.onprogress = (event) => {
+                if (event.loaded && event.total) {
+                    const percent = Math.round((event.loaded / event.total) * 100);
+                    setUploadProgress(percent);
+                    setUploadedSize(formatFileSize(event.loaded));
+                }
+            };
+
+            reader.onloadend = () => {
+                setUploadProgress(100);
+                setUploadCompleted(true);
+                setUploadedSize(totalSize); // Set uploaded size to total size after completion
+            };
+
+            reader.readAsDataURL(file);
+            formik.setFieldValue(fieldLayoutInfo.attrs.name, file);
         };
 
+        // useEffect(() => {
+        //     const fieldValue = formik?.values[fieldLayoutInfo.attrs.name];
+
+        //     if (fieldValue instanceof File) {
+        //         setImagesPreview(URL.createObjectURL(fieldValue)); // Generate preview URL for file
+        //     }
+        //     if (typeof fieldValue === 'object') {
+        //         setImagesPreview(fieldValue); // Generate preview URL for file
+        //     }
+        //     if (!fieldValue) {
+        //         setImagesPreview(null);
+        //     }
+        // }, [formik.values, fieldLayoutInfo.attrs.name]);
         useEffect(() => {
             const fieldValue = formik?.values[fieldLayoutInfo.attrs.name];
 
-            if (fieldValue instanceof File) {
-                setImagesPreview(URL.createObjectURL(fieldValue)); // Generate preview URL for file
-            }
-            if (typeof fieldValue === 'object') {
-                setImagesPreview(fieldValue); // Generate preview URL for file
-            }
-            if (!fieldValue) {
-                setImagesPreview(null);
+            if (fieldValue && typeof fieldValue === "object") {
+                const fileUrl = fieldValue._full_url;
+                if (typeof fileUrl === "string" && fileUrl.length > 0) {
+                    const fileName = fileUrl.split("/").pop(); // Extract filename from URL
+                    setFileDetails({ name: fileName || "Unknown File", type: "Uploaded File" });
+
+                    // Set upload progress
+                    setUploadProgress(100);
+                    setUploadCompleted(true);
+
+                    // Ensure Formik has the existing file URL
+                    formik.setFieldValue(fieldLayoutInfo.attrs.name, fieldValue);
+                }
             }
         }, [formik.values, fieldLayoutInfo.attrs.name]);
 
+
         const {
             getRootProps: getRootProps,
             getInputProps: getInputProps,
@@ -156,61 +229,75 @@ export class SolidMediaSingleField implements ISolidField {
 
         return (
             <div className={className}>
-                <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
-                    &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
-                </label>
-                <div
-                    {...getRootProps()}
-                    className="dropzone p-3 border-1 border-round surface-border"
-                >
-                    <input {...getInputProps()} />
-
-                    {isDragActive ? (
+                <div className="flex flex-column gap-2 mt-4">
+                    <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
+                        &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
+                    </label>
+                    <div
+                        {...getRootProps()}
+                        className="solid-dropzone-wrapper"
+                    >
+                        <input {...getInputProps()} />
                         <DropzonePlaceholder />
-                    ) : imagesPreview ? (
-                        <div className="relative">
-                            <img
-                                src={imageFormatHandler(imagesPreview) as string}
-                                alt="Banner Image"
-                                className="bg-white h-10rem w-14rem"
-                            />
-                            <Button
-                                type="button"
-                                onClick={(e) => {
-                                    e.stopPropagation();
-                                    setDeleteImageDialogVisible(true);
-                                    const data = {
-                                        e, imagesPreview
+                    </div>
+                    {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
+                        <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                    )}
+                    {fileDetails && (
+                        <div className="solid-file-upload-wrapper">
+                            <div className="flex align-items-center gap-2">
+                                <FileReaderExt fileDetails={fileDetails} />
+                                <div className="w-full flex flex-column gap-1">
+                                    <div className="flex align-items-center justify-content-between">
+                                        <div className="font-bold">{fileDetails.name}</div>
+                                        <div className="cancel-upload-button" onClick={() => setDeleteImageDialogVisible(true)}>
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="6" height="6" viewBox="0 0 6 6" fill="none">
+                                                <path d="M0.6 6L0 5.4L2.4 3L0 0.6L0.6 0L3 2.4L5.4 0L6 0.6L3.6 3L6 5.4L5.4 6L3 3.6L0.6 6Z" fill="#4B4D52" />
+                                            </svg>
+                                        </div>
+                                    </div>
+                                    {
+                                        uploadCompleted ?
+                                            <div className="flex align-items-center gap-2 text-sm">
+                                                {totalSize} of {totalSize}
+                                                <svg xmlns="http://www.w3.org/2000/svg" width="4" height="4" viewBox="0 0 4 4" fill="none">
+                                                    <circle cx="2" cy="2" r="2" fill="#C1C1C1" />
+                                                </svg>
+                                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+                                                    <mask id="mask0_2480_8635" style={{ maskType: 'alpha' }} maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
+                                                        <rect width="20" height="20" fill="#D9D9D9" />
+                                                    </mask>
+                                                    <g mask="url(#mask0_2480_8635)">
+                                                        <path d="M9.16 12.76L13.39 8.53L12.55 7.69L9.16 11.08L7.45 9.37L6.61 10.21L9.16 12.76ZM10 16C9.17 16 8.39 15.8424 7.66 15.5272C6.93 15.2124 6.295 14.785 5.755 14.245C5.215 13.705 4.7876 13.07 4.4728 12.34C4.1576 11.61 4 10.83 4 10C4 9.17 4.1576 8.39 4.4728 7.66C4.7876 6.93 5.215 6.295 5.755 5.755C6.295 5.215 6.93 4.7874 7.66 4.4722C8.39 4.1574 9.17 4 10 4C10.83 4 11.61 4.1574 12.34 4.4722C13.07 4.7874 13.705 5.215 14.245 5.755C14.785 6.295 15.2124 6.93 15.5272 7.66C15.8424 8.39 16 9.17 16 10C16 10.83 15.8424 11.61 15.5272 12.34C15.2124 13.07 14.785 13.705 14.245 14.245C13.705 14.785 13.07 15.2124 12.34 15.5272C11.61 15.8424 10.83 16 10 16Z" fill="#722ED1" />
+                                                    </g>
+                                                </svg>
+                                                Completed
+                                            </div>
+                                            :
+                                            <div className="flex align-items-center gap-2 text-sm">
+                                                {uploadedSize} of {totalSize}
+                                                <svg xmlns="http://www.w3.org/2000/svg" width="4" height="4" viewBox="0 0 4 4" fill="none">
+                                                    <circle cx="2" cy="2" r="2" fill="#C1C1C1" />
+                                                </svg>
+                                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+                                                    <path d="M7.375 10.5V5.40625L5.75 7.03125L4.875 6.125L8 3L11.125 6.125L10.25 7.03125L8.625 5.40625V10.5H7.375ZM4.25 13C3.90625 13 3.61198 12.8776 3.36719 12.6328C3.1224 12.388 3 12.0938 3 11.75V9.875H4.25V11.75H11.75V9.875H13V11.75C13 12.0938 12.8776 12.388 12.6328 12.6328C12.388 12.8776 12.0938 13 11.75 13H4.25Z" fill="black" />
+                                                </svg>
+                                                Uploading ${uploadProgress}% Completed
+                                            </div>
                                     }
-                                    setImageToBeDeletedData(data)
-                                }}
-                                icon="pi pi-trash"
-                                severity="secondary"
-                                outlined
-                                aria-label="Bookmark"
-                                className="absolute right-0 top-0 bg-white z-5 m-2"
-                                style={{
-                                    height: 25,
-                                    width: 25,
-                                }}
-                            />
-                            <DropzoneUpload />
+                                </div>
+                            </div>
+                            <ProgressBar value={uploadProgress} showValue={false} style={{ height: 4 }} className="mt-2" />
                         </div>
-                    ) : (
-                        <DropzonePlaceholder />
                     )}
-                    { }
                 </div>
-                {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
-                    <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
-                )}
                 <Dialog
                     visible={isDeleteImageDialogVisible}
                     header="Confirm Delete"
                     modal
                     footer={() => (
                         <div className="flex justify-content-center">
-                            <Button label="Yes" icon="pi pi-check" className='small-button' severity="danger" autoFocus onClick={handleDelete} />
+                            <Button label="Yes" icon="pi pi-check" className='small-button' severity="danger" autoFocus onClick={handleCancelUpload} />
                             <Button label="No" icon="pi pi-times" className='small-button' onClick={() => setDeleteImageDialogVisible(false)} />
                         </div>
                     )}
@@ -221,4 +308,4 @@ export class SolidMediaSingleField implements ISolidField {
             </div>
         );
     }
-}
+}

package/src/components/core/form/fields/SolidRichTextField.tsx

@@ -57,7 +57,7 @@ export class SolidRichTextField implements ISolidField {
     render(formik: FormikObject) {
         const fieldMetadata = this.fieldContext.fieldMetadata;
         const fieldLayoutInfo = this.fieldContext.field;
-        const className = fieldLayoutInfo.attrs?.className || 'field col-6 flex flex-column gap-2 mt-4';
+        const className = fieldLayoutInfo.attrs?.className || 'field col-12';
         const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
         const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
         const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
@@ -73,6 +73,7 @@ export class SolidRichTextField implements ISolidField {
 
         return (
             <div className={className}>
+                <div className="flex flex-column gap-2 mt-4">
                     <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
                         &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
                     </label>
@@ -85,9 +86,10 @@ export class SolidRichTextField implements ISolidField {
                         onTextChange={e => formik.setFieldValue(fieldLayoutInfo.attrs.name, e.htmlValue)}
                         style={{ height: "320px" }}
                     />
-                    {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
-                        <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
-                    )}
+                </div>
+                {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
+                    <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                )}
             </div>
         );
     }

package/src/components/core/form/fields/SolidSelectionDynamicField.tsx

@@ -51,7 +51,7 @@ export class SolidSelectionDynamicField implements ISolidField {
     render(formik: FormikObject) {
         const fieldMetadata = this.fieldContext.fieldMetadata;
         const fieldLayoutInfo = this.fieldContext.field;
-        const className = fieldLayoutInfo.attrs?.className || 'field col-6 flex flex-column gap-2 mt-4';
+        const className = fieldLayoutInfo.attrs?.className || 'field col-12';
         const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
         const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
         const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
@@ -93,8 +93,8 @@ export class SolidSelectionDynamicField implements ISolidField {
 
         return (
             <div className={className}>
+                <div className="flex flex-column gap-2 mt-4">
                     <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
-
                         &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
                     </label>
                     <AutoComplete
@@ -109,9 +109,10 @@ export class SolidSelectionDynamicField implements ISolidField {
                         completeMethod={selectionDynamicSearch}
                         // onChange={(e) => updateInputs(index, e.value)} />
                         onChange={formik.handleChange} />
-                    {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
-                        <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
-                    )}
+                </div>
+                {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
+                    <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                )}
             </div>
         );
     }

package/src/components/core/form/fields/SolidSelectionStaticField.tsx

@@ -26,10 +26,10 @@ export class SolidSelectionStaticField implements ISolidField {
         const fieldName = this.fieldContext.field.attrs.name;
         const fieldMetadata = this.fieldContext.fieldMetadata;
         const fieldDefaultValue = fieldMetadata?.defaultValue;
-    
+
         // Get existing value from form data
         const existingValue = this.fieldContext.data[fieldName];
-    
+
         // Function to get display value based on selectionStaticValues
         const getDisplayValue = (value: string | null): string | null => {
             if (!value) return null;
@@ -41,16 +41,16 @@ export class SolidSelectionStaticField implements ISolidField {
             }
             return null;
         };
-    
+
         // Determine the final value to use (existing value or default value)
         const finalValue = existingValue ?? fieldDefaultValue ?? '';
-    
+
         // Get display value for the final value
         const displayValue = getDisplayValue(finalValue);
-    
+
         return { label: displayValue ?? '', value: finalValue };
     }
-    
+
 
     validationSchema(): Schema {
 
@@ -72,7 +72,7 @@ export class SolidSelectionStaticField implements ISolidField {
     render(formik: FormikObject) {
         const fieldMetadata = this.fieldContext.fieldMetadata;
         const fieldLayoutInfo = this.fieldContext.field;
-        const className = fieldLayoutInfo.attrs?.className || 'field col-6 flex flex-column gap-2 mt-4';
+        const className = fieldLayoutInfo.attrs?.className || 'field col-12';
         const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
         const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
         const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
@@ -98,22 +98,23 @@ export class SolidSelectionStaticField implements ISolidField {
 
         return (
             <div className={className}>
-                <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
-                    &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
-                </label>
-                <AutoComplete
-                    readOnly={formReadonly || fieldReadonly}
-                    disabled={formDisabled || fieldDisabled}
-                    {...formik.getFieldProps(fieldLayoutInfo.attrs.name)}
-                    id={fieldLayoutInfo.attrs.name}
-                    field="label"
-                    value={formik.values[fieldLayoutInfo.attrs.name] || ''}
-                    dropdown
-                    suggestions={selectionStaticItems}
-                    completeMethod={selectionStaticSearch}
-                    // onChange={(e) => updateInputs(index, e.value)} />
-                    onChange={formik.handleChange} />
-
+                <div className="flex flex-column gap-2 mt-4">
+                    <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
+                        &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
+                    </label>
+                    <AutoComplete
+                        readOnly={formReadonly || fieldReadonly}
+                        disabled={formDisabled || fieldDisabled}
+                        {...formik.getFieldProps(fieldLayoutInfo.attrs.name)}
+                        id={fieldLayoutInfo.attrs.name}
+                        field="label"
+                        value={formik.values[fieldLayoutInfo.attrs.name] || ''}
+                        dropdown
+                        suggestions={selectionStaticItems}
+                        completeMethod={selectionStaticSearch}
+                        // onChange={(e) => updateInputs(index, e.value)} />
+                        onChange={formik.handleChange} />
+                </div>
                 {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
                     <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
                 )}

package/src/components/core/form/fields/SolidShortTextField.tsx

@@ -23,12 +23,12 @@ export class SolidShortTextField implements ISolidField {
     initialValue(): any {
         const fieldName = this.fieldContext.field.attrs.name;
         const fieldDefaultValue = this.fieldContext?.fieldMetadata?.defaultValue;
-    
+
         const existingValue = this.fieldContext.data[fieldName];
-    
+
         return existingValue !== undefined && existingValue !== null ? existingValue : fieldDefaultValue || '';
     }
-    
+
 
     validationSchema(): Schema {
         let schema: Yup.StringSchema<string | null | undefined> = Yup.string();
@@ -64,7 +64,7 @@ export class SolidShortTextField implements ISolidField {
     render(formik: FormikObject) {
         const fieldMetadata = this.fieldContext.fieldMetadata;
         const fieldLayoutInfo = this.fieldContext.field;
-        const className = fieldLayoutInfo.attrs?.className || 'field col-6 flex flex-column gap-2 mt-4';
+        const className = fieldLayoutInfo.attrs?.className || 'field col-12';
         const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
         const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
         const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
@@ -78,19 +78,21 @@ export class SolidShortTextField implements ISolidField {
 
         return (
             <div className={className}>
-                <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
-                    &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
-
-                    {/* &nbsp;   {fieldDescription &&  <span  className="form_field_help_text">`(${fieldDescription})` </span>} */}
-                </label>
-                <InputText
-                    readOnly={formReadonly || fieldReadonly}
-                    disabled={formDisabled || fieldDisabled}
-                    id={fieldLayoutInfo.attrs.name}
-                    aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
-                    onChange={formik.handleChange}
-                    value={formik.values[fieldLayoutInfo.attrs.name] || ''}
-                />
+                <div className="flex flex-column gap-2 mt-4">
+                    <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
+                        &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
+
+                        {/* &nbsp;   {fieldDescription &&  <span  className="form_field_help_text">`(${fieldDescription})` </span>} */}
+                    </label>
+                    <InputText
+                        readOnly={formReadonly || fieldReadonly}
+                        disabled={formDisabled || fieldDisabled}
+                        id={fieldLayoutInfo.attrs.name}
+                        aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
+                        onChange={formik.handleChange}
+                        value={formik.values[fieldLayoutInfo.attrs.name] || ''}
+                    />
+                </div>
                 {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
                     <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
                 )}

package/src/components/core/form/fields/SolidTimeField.tsx

@@ -24,9 +24,9 @@ export class SolidTimeField implements ISolidField {
     initialValue(): any {
         const fieldName = this.fieldContext.field.attrs.name;
         const fieldDefaultValue = this.fieldContext?.fieldMetadata?.defaultValue;
-    
+
         const existingValue = this.fieldContext.data[fieldName];
-    
+
         return existingValue !== undefined && existingValue !== null ? existingValue : fieldDefaultValue || '';
     }
 
@@ -46,7 +46,7 @@ export class SolidTimeField implements ISolidField {
     render(formik: FormikObject) {
         const fieldMetadata = this.fieldContext.fieldMetadata;
         const fieldLayoutInfo = this.fieldContext.field;
-        const className = fieldLayoutInfo.attrs?.className || 'field col-6 flex flex-column gap-2 mt-4';
+        const className = fieldLayoutInfo.attrs?.className || 'field col-12';
         const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
         const calendarRef = useRef<any>(null); // Reference for the Calendar component
         const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
@@ -59,26 +59,28 @@ export class SolidTimeField implements ISolidField {
 
         return (
             <div className={className}>
-                <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
+                <div className="flex flex-column gap-2 mt-4">
+                    <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
 
-                    &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
-                </label>
-                <Calendar
-                    disabled={formDisabled || fieldDisabled}
-                    ref={calendarRef} // Attach ref to Calendar
-                    id={fieldLayoutInfo.attrs.name}
-                    aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
-                    onChange={formik.handleChange}
-                    //@ts-ignore
-                    value={formik.values[fieldLayoutInfo.attrs.name] ? formik.values[fieldLayoutInfo.attrs.name] : Date()}
-                    // dateFormat="mm/dd/yy"
-                    // placeholder="mm/dd/yyyy hh:mm"
-                    hideOnDateTimeSelect
-                    timeOnly
-                    showTime className=""
-                    hourFormat="24"
+                        &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
+                    </label>
+                    <Calendar
+                        disabled={formDisabled || fieldDisabled}
+                        ref={calendarRef} // Attach ref to Calendar
+                        id={fieldLayoutInfo.attrs.name}
+                        aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
+                        onChange={formik.handleChange}
+                        //@ts-ignore
+                        value={formik.values[fieldLayoutInfo.attrs.name] ? formik.values[fieldLayoutInfo.attrs.name] : Date()}
+                        // dateFormat="mm/dd/yy"
+                        // placeholder="mm/dd/yyyy hh:mm"
+                        hideOnDateTimeSelect
+                        timeOnly
+                        showTime className=""
+                        hourFormat="24"
 
-                />
+                    />
+                </div>
                 {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
                     <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
                 )}

package/src/components/core/form/fields/relations/SolidRelationManyToManyField.tsx

@@ -97,7 +97,7 @@ export class SolidRelationManyToManyField implements ISolidField {
     render(formik: FormikObject) {
         const fieldMetadata = this.fieldContext.fieldMetadata;
         const fieldLayoutInfo = this.fieldContext.field;
-        const className = fieldLayoutInfo.attrs?.className || 'field col-6 flex flex-column gap-2 mt-4';
+        const className = fieldLayoutInfo.attrs?.className || 'field col-12';
         const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
         const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
         const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
@@ -134,7 +134,7 @@ export class SolidRelationManyToManyField implements ISolidField {
     renderCheckBoxMode(formik: FormikObject, visibleCreateRelationEntity: any, setvisibleCreateRelationEntity: any) {
         const fieldMetadata = this.fieldContext.fieldMetadata;
         const fieldLayoutInfo = this.fieldContext.field;
-        const className = fieldLayoutInfo.attrs?.className || 'field col-6 flex flex-column gap-2 mt-4';
+        const className = fieldLayoutInfo.attrs?.className || 'field col-12';
         const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
 
         // auto complete specific code. 

package/src/components/core/form/fields/relations/SolidRelationManyToOneField.tsx

@@ -54,7 +54,7 @@ export class SolidRelationManyToOneField implements ISolidField {
     render(formik: FormikObject) {
         const fieldMetadata = this.fieldContext.fieldMetadata;
         const fieldLayoutInfo = this.fieldContext.field;
-        const className = fieldLayoutInfo.attrs?.className || 'field col-6 flex flex-column gap-2 mt-4';
+        const className = fieldLayoutInfo.attrs?.className || 'field col-12';
         const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
         const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
 
@@ -109,21 +109,22 @@ export class SolidRelationManyToOneField implements ISolidField {
 
         return (
             <div className={className}>
-                <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
-
-                </label>
-                <AutoComplete
-                    readOnly={formReadonly || fieldReadonly}
-                    disabled={formDisabled || fieldDisabled}
-                    {...formik.getFieldProps(fieldLayoutInfo.attrs.name)}
-                    id={fieldLayoutInfo.attrs.name}
-                    field="label"
-                    value={formik.values[fieldLayoutInfo.attrs.name] || ''}
-                    dropdown
-                    suggestions={autoCompleteItems}
-                    completeMethod={autoCompleteSearch}
-                    onChange={formik.handleChange} />
-
+                <div className="flex flex-column gap-2 mt-4">
+                    <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
+                    </label>
+                    <AutoComplete
+                        readOnly={formReadonly || fieldReadonly}
+                        disabled={formDisabled || fieldDisabled}
+                        {...formik.getFieldProps(fieldLayoutInfo.attrs.name)}
+                        id={fieldLayoutInfo.attrs.name}
+                        field="label"
+                        value={formik.values[fieldLayoutInfo.attrs.name] || ''}
+                        dropdown
+                        suggestions={autoCompleteItems}
+                        completeMethod={autoCompleteSearch}
+                        onChange={formik.handleChange}
+                    />
+                </div>
                 {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
                     <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
                 )}