@solidstarters/solid-core-ui 1.1.16 → 1.1.18

package/src/components/common/NotFound.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import Link from "next/link";
+
+export const NotFound = () => {
+  return (
+    <div>
+      <div className="d-flex align-items-center justify-content-center vh-100">
+        <div className="text-center">
+          <h1 className="display-1 fw-bold">404</h1>
+          <p className="fs-3">
+            <span className="text-danger">Opps!</span> Page not found.
+          </p>
+          <p className="lead">The page you are looking for does not exist.</p>
+          <Link href="/" className="btn btn-primary">
+            Go Home
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/components/common/SingleSelectAutoCompleteField.tsx

@@ -32,7 +32,9 @@ export const SingleSelectAutoCompleteField = ({ disabled, formik, isFormFieldVal
                 disabled={disabled ? disabled : false}
                 value={selectedItem}
                 suggestions={filteredItem}
-                invalid={(isFormFieldValid(formik, fieldName) || (formErrors[fieldName]))}
+                // invalid={(isFormFieldValid(formik, fieldName) || (formErrors[fieldName]))}
+                invalid={isFormFieldValid(formik, fieldName)}
+
                 completeMethod={searchItems}
                 virtualScrollerOptions={{ itemSize: 38 }}
                 // style={{

package/src/components/common/SocialMediaLogin.tsx

@@ -1,15 +1,21 @@
 "use client"
 import { signIn } from 'next-auth/react'
-import { useRouter } from 'next/navigation';
+import { usePathname, useRouter } from 'next/navigation';
 import { Button } from 'primereact/button'
 import React from 'react'
 
 export const SocialMediaLogin = () => {
     const router = useRouter();
-
+    const pathname = usePathname();
     return (
         <div className="flex justify-content-center mt-4 gap-3">
-            <Button icon={() => (
+            <Button
+                className='flex justify-content-center gap-3 w-full google-auth-button'
+                outlined
+                severity="secondary"
+                onClick={() => router.push(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/iam/google/connect`)}
+            // onClick={()=>signIn('google', {callbackUrl :'https://uat-api.lm.solidxai.com/api/iam/google/connect'})}
+            >
                 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                     <g clipPath="url(#clip0_3520_3825)">
                         <path d="M23.0938 9.91355L13.3044 9.91309C12.8721 9.91309 12.5217 10.2634 12.5217 10.6957V13.823C12.5217 14.2552 12.8721 14.6056 13.3044 14.6056H18.8171C18.2135 16.1722 17.0868 17.4842 15.6493 18.3178L18 22.387C21.7707 20.2062 24 16.3799 24 12.0965C24 11.4866 23.955 11.0506 23.8651 10.5597C23.7968 10.1867 23.4729 9.91355 23.0938 9.91355Z" fill="#167EE6" />
@@ -25,30 +31,23 @@ export const SocialMediaLogin = () => {
                         </clipPath>
                     </defs>
                 </svg>
-            )}
-                className='flex gap-3'
-                outlined
-                severity="secondary"
-                label='Sign In with Google'
-                onClick={() => router.push(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/iam/google/connect`)}
-            // onClick={()=>signIn('google', {callbackUrl :'https://uat-api.lm.solidxai.com/api/iam/google/connect'})}
-            >
+                {pathname.includes("register") ? "Continue With Google" : "Sign In with Google"}
             </Button>
             {/* <Button icon={() => (
-                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" xlinkHref="http://www.w3.org/1999/xlink">
-                    <rect width="24" height="24" fill="url(#pattern0_3520_3835)" />
-                    <defs>
-                        <pattern id="pattern0_3520_3835" patternContentUnits="objectBoundingBox" width="1" height="1">
-                            <use xlinkHref="#image0_3520_3835" transform="scale(0.00195312)" />
-                        </pattern>
-                        <image id="image0_3520_3835" width="512" height="512" xlinkHref="data:image/png;base64,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" />
-                    </defs>
-                </svg>
-            )}
-                outlined
-                severity="secondary"
-            >
-            </Button> */}
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" xlinkHref="http://www.w3.org/1999/xlink">
+                <rect width="24" height="24" fill="url(#pattern0_3520_3835)" />
+                <defs>
+                    <pattern id="pattern0_3520_3835" patternContentUnits="objectBoundingBox" width="1" height="1">
+                        <use xlinkHref="#image0_3520_3835" transform="scale(0.00195312)" />
+                    </pattern>
+                    <image id="image0_3520_3835" width="512" height="512" xlinkHref="data:image/png;base64,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" />
+                </defs>
+            </svg>
+        )}
+            outlined
+            severity="secondary"
+        >
+        </Button> */}
         </div>
     )
 }

package/src/components/common/SolidAdmin.tsx

@@ -0,0 +1,7 @@
+import React from 'react'
+
+export const SolidAdmin = () => {
+  return (
+    <div>SolidAdmin</div>
+  )
+}

package/src/components/common/SolidFormStepper.tsx

@@ -1,12 +1,65 @@
+"use client"
 import { Button } from 'primereact/button'
-import React from 'react'
+import { OverlayPanel } from 'primereact/overlaypanel';
+import React, { useRef } from 'react'
 
 export const SolidFormStepper = () => {
+    const formStepperOverlay = useRef(null);
+
     return (
         <div className='flex justify-content-end'>
             <Button type='button' severity='secondary' className='solid-step-button btn-step-first'>Step 1</Button>
             <Button type='button' className='solid-step-button btn-step'>Step 2</Button>
-            <Button type='button' className='solid-step-button btn-step-last'>Step 3</Button>
+            <Button type='button' className='solid-step-button btn-step-last relative'>
+                Step 3
+                <div className='absolute' style={{ right: 8 }}>
+                    <Button
+                        type='button'
+                        icon="pi pi-angle-down"
+                        text
+                        size='small'
+                        style={{ height: 24, width: '1.5rem' }}
+                        onClick={(e) =>
+                            // @ts-ignore 
+                            formStepperOverlay.current.toggle(e)
+                        }
+                    />
+                    <OverlayPanel ref={formStepperOverlay} className="solid-custom-overlay solid-form-stepper-overlay">
+                        <div className='flex flex-column gap-1 p-1'>
+                            <Button
+                                type='button'
+                                label='Step 01'
+                                size='small'
+                                text
+                            />
+                            <Button
+                                type='button'
+                                label='Step 02'
+                                size='small'
+                                text
+                            />
+                            <Button
+                                type='button'
+                                label='Step 03'
+                                size='small'
+                                text
+                            />
+                            <Button
+                                type='button'
+                                label='Step 04'
+                                size='small'
+                                text
+                            />
+                            <Button
+                                type='button'
+                                label='Step 05'
+                                size='small'
+                                text
+                            />
+                        </div>
+                    </OverlayPanel>
+                </div>
+            </Button>
         </div>
     )
 }

package/src/components/common/SolidThemeLink.tsx

@@ -0,0 +1,5 @@
+export const SolidThemeLink = () => {
+    return (
+        <link id="theme-css" href={`/themes/solid-light-purple/theme.css`} rel="stylesheet"></link>
+    )
+}

package/src/components/common/error.tsx

@@ -0,0 +1,30 @@
+"use client"; // Error components must be Client Components
+
+interface CustomError extends Error {
+  errMessage: string;
+}
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: CustomError;
+  reset?: () => void;
+}) {
+  return (
+    <div>
+      <div className="d-flex justify-content-center align-items-center vh-100">
+        <div className="text-center">
+          <h2 className="display-4 fw-bold">{error?.errMessage}</h2>
+          <p className="fs-3">
+            <span className="text-danger">Opps!</span> Something went wrong!
+          </p>
+          <p className="lead">Sorry for inconvience</p>
+          <button className="btn btn-primary" onClick={() => reset?.()}>
+            Try again
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/core/common/FilterComponent.tsx

@@ -94,64 +94,64 @@ const FilterRuleComponent = ({ viewData, fields, rule, onChange, onAddRule, onAd
     // <div style={{ marginLeft: (level - 1) * 10 + 'px' }} className="filter-rule">
 
     <div className='mt-2'>
-      <div className='formgrid grid'>
-        <div className='col-3'>
-          <Dropdown
-            key={rule.id}
-            value={fieldName.name}
-            onChange={e => {
-              setFieldName({ name: e.value, value: e.value })
-              onChange(rule.id, 'fieldName', e.value)
-            }}
-            options={fields}
-            optionLabel='name'
-            optionValue='name'
-            placeholder="Select Field"
-            className='w-full'
-          />
-        </div>
-        <div className='col-7'>
-          <div className='formgrid grid'>
-            {rule.fieldName ?
-              <SolidFilterFields viewData={viewData} fieldMetadata={viewData.data.solidFieldsMetadata[rule.fieldName]} onChange={onChange} index={rule.id} rule={rule}></SolidFilterFields>
-              : <>
-                <div className='col-6'>
-                  <InputText
-                    disabled
-                    value={rule.value || ''}
-                    placeholder="operator"
-                    className='w-full'
-                  />
-                </div>
-                <div className='col-6'>
-                  <InputText
-                    disabled
-                    value={rule.value || ''}
-                    placeholder="value"
-                    className='w-full'
-                  />
-                </div>
-              </>
-            }
+      <div className='flex align-items-center gap-3'>
+        <div className='formgrid grid w-full'>
+          <div className='col-4'>
+            <Dropdown
+              key={rule.id}
+              value={fieldName.value}
+              onChange={e => {
+                setFieldName({ name: e.value, value: e.value })
+                onChange(rule.id, 'fieldName', e.value)
+              }}
+              options={fields}
+              optionLabel='name'
+              optionValue='value'
+              placeholder="Select Field"
+              className='w-full'
+            />
           </div>
-        </div>
-        <div className='col-2'>
-          <div className='formgrid grid'>
-            <div className='col-4 flex align-items-center'>
-              <Button text severity='secondary' icon="pi pi-plus" size='small' onClick={() => onAddRule(rule.parentRule)} className='solid-filter-action-btn' />
-            </div>
-            <div className='col-4 flex align-items-center'>
-              <Button text severity='secondary' icon={
-                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
-                  <path d="M11.6665 13.334H13.3332V11.6673H14.9998V10.0007H13.3332V8.33398H11.6665V10.0007H9.99984V11.6673H11.6665V13.334ZM3.33317 16.6673C2.87484 16.6673 2.48248 16.5041 2.15609 16.1777C1.8297 15.8513 1.6665 15.459 1.6665 15.0007V5.00065C1.6665 4.54232 1.8297 4.14996 2.15609 3.82357C2.48248 3.49718 2.87484 3.33398 3.33317 3.33398H8.33317L9.99984 5.00065H16.6665C17.1248 5.00065 17.5172 5.16385 17.8436 5.49023C18.17 5.81662 18.3332 6.20898 18.3332 6.66732V15.0007C18.3332 15.459 18.17 15.8513 17.8436 16.1777C17.5172 16.5041 17.1248 16.6673 16.6665 16.6673H3.33317ZM3.33317 15.0007H16.6665V6.66732H9.31234L7.64567 5.00065H3.33317V15.0007Z" fill="#4B4D52" />
-                </svg>
-              } size='small' onClick={() => onAddGroup(rule.id)} className='solid-filter-action-btn p-0' />
-            </div>
-            <div className='col-4 flex align-items-center'>
-              <Button text severity='secondary' icon="pi pi-trash" size='small' onClick={() => onDelete(rule.id)} className='solid-filter-action-btn' />
+          <div className='col-8'>
+            <div className='formgrid grid'>
+              {rule.fieldName ?
+                <SolidFilterFields viewData={viewData} fieldMetadata={viewData.data.solidFieldsMetadata[rule.fieldName]} onChange={onChange} index={rule.id} rule={rule}></SolidFilterFields>
+                : <>
+                  <div className='col-6'>
+                    <InputText
+                      disabled
+                      value={rule.value || ''}
+                      placeholder="operator"
+                      className='w-full'
+                    />
+                  </div>
+                  <div className='col-6'>
+                    <InputText
+                      disabled
+                      value={rule.value || ''}
+                      placeholder="value"
+                      className='w-full'
+                    />
+                  </div>
+                </>
+              }
             </div>
           </div>
         </div>
+        <div className='formgrid grid'>
+          <div className='col-4 px-0 flex align-items-center'>
+            <Button text severity='secondary' icon="pi pi-plus" size='small' onClick={() => onAddRule(rule.parentRule)} className='solid-filter-action-btn' />
+          </div>
+          <div className='col-4 px-0 flex align-items-center'>
+            <Button text severity='secondary' icon={
+              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+                <path d="M11.6665 13.334H13.3332V11.6673H14.9998V10.0007H13.3332V8.33398H11.6665V10.0007H9.99984V11.6673H11.6665V13.334ZM3.33317 16.6673C2.87484 16.6673 2.48248 16.5041 2.15609 16.1777C1.8297 15.8513 1.6665 15.459 1.6665 15.0007V5.00065C1.6665 4.54232 1.8297 4.14996 2.15609 3.82357C2.48248 3.49718 2.87484 3.33398 3.33317 3.33398H8.33317L9.99984 5.00065H16.6665C17.1248 5.00065 17.5172 5.16385 17.8436 5.49023C18.17 5.81662 18.3332 6.20898 18.3332 6.66732V15.0007C18.3332 15.459 18.17 15.8513 17.8436 16.1777C17.5172 16.5041 17.1248 16.6673 16.6665 16.6673H3.33317ZM3.33317 15.0007H16.6665V6.66732H9.31234L7.64567 5.00065H3.33317V15.0007Z" fill="#4B4D52" />
+              </svg>
+            } size='small' onClick={() => onAddGroup(rule.id)} className='solid-filter-action-btn p-0' />
+          </div>
+          <div className='col-4 px-0 flex align-items-center'>
+            <Button text severity='secondary' icon="pi pi-trash" size='small' onClick={() => onDelete(rule.id)} className='solid-filter-action-btn' />
+          </div>
+        </div>
       </div>
 
       {rule.children && rule.children.map(nestedRule => (
@@ -380,24 +380,24 @@ const FilterComponent = ({ viewData, fields, filterRules, setFilterRules, transf
 
   return (
     <div className=''>
-        {filterRules.map(rule => (
-          <FilterGroupComponent
-            key={rule.id}
-            viewData={viewData}
-            fields={fields}
-            group={rule}
-            onChange={handleChange}
-            onAddRule={handleAddRule}
-            onAddGroup={handleAddGroup}
-            onDelete={handleDeleteRule}
-            level={0} // Top-level group
-          />
-        ))}
-      <div className='text-center'>
+      {filterRules.map(rule => (
+        <FilterGroupComponent
+          key={rule.id}
+          viewData={viewData}
+          fields={fields}
+          group={rule}
+          onChange={handleChange}
+          onAddRule={handleAddRule}
+          onAddGroup={handleAddGroup}
+          onDelete={handleDeleteRule}
+          level={0} // Top-level group
+        />
+      ))}
+      <div className='text-left mt-3'>
         <Button label="Apply" size="small" onClick={() => transformFilterRules(filterRules)} type="submit" className="small-button" />
-
+        {/* 
         <br></br>
-        <textarea value={printedState} readOnly rows={20} cols={100} style={{ marginTop: '20px' }} />
+        <textarea value={printedState} readOnly rows={20} cols={100} style={{ marginTop: '20px' }} /> */}
       </div>
     </div>
   );

package/src/components/core/common/SolidConfigureLayoutElement.tsx

@@ -16,6 +16,7 @@ export const SolidConfigureLayoutElement = ({ setShowArchived, showArchived, vie
     // const [visible, setVisible] = useState<boolean>(false);
     const op = useRef(null);
     const customizeLayout = useRef(null);
+    const [isOverlayOpen, setIsOverlayOpen] = useState(true);
 
     const categories: FilterColumns[] = [
         { name: 'ID', key: 'A' },
@@ -64,6 +65,7 @@ export const SolidConfigureLayoutElement = ({ setShowArchived, showArchived, vie
                         icon='pi pi-sliders-h'
                         label="Customize Layout"
                         size="small"
+                        text={isOverlayOpen}
                         className="text-left gap-2 w-13rem"
                         // @ts-ignore
                         onClick={(e) => customizeLayout.current.toggle(e)}
@@ -71,7 +73,10 @@ export const SolidConfigureLayoutElement = ({ setShowArchived, showArchived, vie
                     />
                     <p className="mt-3 mb-1 font-medium" style={{ color: 'var(--gray-400)' }}>Saved Layouts</p>
                     <Button text severity="secondary" label="Diet Tracking" icon="pi pi-plus" size="small" />
-                    <OverlayPanel ref={customizeLayout} className="customize-layout-panel" style={{ minWidth: 250 }}>
+                    <OverlayPanel ref={customizeLayout} className="customize-layout-panel" style={{ minWidth: 250 }}
+                        onShow={() => setIsOverlayOpen(false)}
+                        onHide={() => setIsOverlayOpen(true)}
+                    >
                         <div className="solid-layout-accordion">
                             <Accordion multiple expandIcon="pi pi-chevron-down" collapseIcon="pi pi-chevron-up">
                                 <AccordionTab header="Switch Type">

package/src/components/core/common/SolidGlobalSearchElement.tsx

@@ -149,7 +149,7 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, handleApplyCusto
     useEffect(() => {
         if (viewData?.data?.solidFieldsMetadata) {
             const fieldsData = viewData?.data?.solidFieldsMetadata
-            const fieldsList = Object.entries(fieldsData).map(([key, value]: any) => ({ name: key, value: key }));
+            const fieldsList = Object.entries(fieldsData).map(([key, value]: any) => ({ name: value.displayName, value: key }));
             setFields(fieldsList)
         }
     }, [])
@@ -196,10 +196,8 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, handleApplyCusto
         if (inputValue?.trim()) {
             const newChip = { columnName: columnName || firstFilterableFieldName, value: inputValue.trim() };
 
-            setSearchChips((prevChips) => {
-                const updatedChips = [...prevChips, newChip];
-                return updatedChips
-            });
+            setSearchChips((prevChips) => [...prevChips, newChip]);
+            setInputValue(""); // Clear input value
         }
     }
 
@@ -228,7 +226,7 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, handleApplyCusto
             children: searchChips.map((chip) => ({
                 children: [],
                 fieldName: chip.columnName,
-                id: null,
+                id: Date.now() + getRandomInt(1, 500),
                 matchMode: "$containsi",
                 parentRule: 1,
                 type: "rule",
@@ -256,9 +254,9 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, handleApplyCusto
     ];
 
 
-    useEffect(() => {
-        console.log("Input Value", customChip, "Input Value", searchChips, "Input Value", inputValue);
-    }, [chipsToDisplay])
+    // useEffect(() => {
+    //     console.log("Input Value", customChip, "Input Value", searchChips, "Input Value", inputValue);
+    // }, [chipsToDisplay])
 
     const customChipTemplate = (item: any) => {
         if (item === customChip) {
@@ -275,9 +273,25 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, handleApplyCusto
         return <div className="flex align-items-center gap-2 text-base" dangerouslySetInnerHTML={{ __html: item }}></div>;
     };
 
+    const handleRemoveChip = (removedChipValue: any) => {
+        console.log("Removing chip:", removedChipValue);
+
+        setSearchChips((prevChips) => {
+            const updatedChips = prevChips.filter((chip) => chip.value !== removedChipValue);
+            console.log("Updated searchChips after removal:", updatedChips);
+            return updatedChips;
+        });
+
+        // Prevent clearing customChip if it is different from the removed chip
+        if (customChip === removedChipValue) {
+            console.log("Clearing custom chip:", customChip);
+            setCustomChip("");
+        }
+    };
+
     return (
         <div className="flex justify-content-center solid-custom-filter-wrapper">
-            <div className="p-inputgroup flex-1"
+            <div className="p-inputgroup flex-1 custom-input-group"
                 ref={chipsRef}
                 onClick={(e) => {
                     e.preventDefault();
@@ -288,11 +302,23 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, handleApplyCusto
             >
                 <Chips
                     value={chipsToDisplay}
-                    onChange={handleChipChange}
-                    onRemove={(e) => {
-                        setCustomChip("");
-                        setSearchChips([]);
-                        clearFilter();
+                    onChange={(e: any) => {
+                        // Compare previous and new values to detect removal
+                        if (e.value.length < searchChips.length) {
+                            const removedChip = searchChips.find(chip => !e.value.includes(chip.value));
+                            if (removedChip) {
+                                handleRemoveChip(removedChip.value);
+                            }
+                        } else {
+                            setSearchChips(e.value.map((val: any) => ({ columnName: firstFilterableFieldName, value: val })));
+                        }
+                    }}
+                    onRemove={(event) => {
+                        setSearchChips((prevChips) => prevChips.filter((chip) => chip.value !== event.value));
+                        if (searchChips.length === 1) {
+                            setCustomChip("");
+                            clearFilter();
+                        }
                     }}
                     itemTemplate={customChipTemplate}
                     onKeyDown={handleKeyDown}
@@ -303,13 +329,15 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, handleApplyCusto
                 />
                 <Button
                     icon="pi pi-search"
+                    style={{ fontSize: 10 }}
                     severity="secondary"
                     outlined size="small"
-                    onClick={(e) => {
-                        if (op.current && e.target) {
-                            op.current.toggle(e);
-                        }
-                    }}
+                    onClick={() => setShowGlobalSearchElement(true)}
+                // onClick={(e) => {
+                //     if (op.current && e.target) {
+                //         op.current.toggle(e);
+                //     }
+                // }}
                 />
             </div>
             <OverlayPanel ref={op} className="solid-custom-overlay" style={{ minWidth: 378 }}>