@solidstarters/solid-core-ui 1.1.6 → 1.1.8

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

@@ -41,7 +41,7 @@ export class SolidTimeField implements ISolidField {
     render(formik: FormikObject) {
         const fieldMetadata = this.fieldContext.fieldMetadata;
         const fieldLayoutInfo = this.fieldContext.field;
-        const className = fieldLayoutInfo.attrs?.className || 'col-12 s-field';
+        const className = fieldLayoutInfo.attrs?.className || 'field col-6 flex flex-column gap-2 mt-4';
         const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
         const calendarRef = useRef<any>(null); // Reference for the Calendar component
         const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
@@ -54,31 +54,26 @@ export class SolidTimeField implements ISolidField {
 
         return (
             <div className={className}>
-                <div className="justify-content-center align-items-center">
-                    <label htmlFor={fieldLayoutInfo.attrs.name}>{fieldLabel}
+                <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
 
-                        &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
-                    </label>
-                </div>
-                <div className="flex-auto">
-                    <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>
+                    &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"
 
+                />
                 {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 || 'col-12 s-field';
+        const className = fieldLayoutInfo.attrs?.className || 'field col-6 flex flex-column gap-2 mt-4';
         const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
         const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
         const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
@@ -115,24 +115,26 @@ export class SolidRelationManyToManyField implements ISolidField {
 
 
         return (
-            <div className={className}>
-                <div className="s-input">
-                    {fieldLayoutInfo.attrs.renderMode === "checkbox" &&
-                        this.renderCheckBoxMode(formik, visibleCreateRelationEntity, setvisibleCreateRelationEntity)
-                    }
-                    {(!fieldLayoutInfo.attrs.renderMode || fieldLayoutInfo.attrs.renderMode === "autocomplete") &&
-                        this.renderAutoCompleteMode(formik, visibleCreateRelationEntity, setvisibleCreateRelationEntity)
-                    }
-                    {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (<Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />)}
-                </div>
-            </div>
+            <>
+                {/* <div className={className}> */}
+                {fieldLayoutInfo.attrs.renderMode === "checkbox" &&
+                    <div className={className}>
+                        {this.renderCheckBoxMode(formik, visibleCreateRelationEntity, setvisibleCreateRelationEntity)}
+                    </div>
+                }
+                {(!fieldLayoutInfo.attrs.renderMode || fieldLayoutInfo.attrs.renderMode === "autocomplete") &&
+                    this.renderAutoCompleteMode(formik, visibleCreateRelationEntity, setvisibleCreateRelationEntity)
+                }
+                {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (<Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />)}
+                {/* </div> */}
+            </>
         );
     }
 
     renderCheckBoxMode(formik: FormikObject, visibleCreateRelationEntity: any, setvisibleCreateRelationEntity: any) {
         const fieldMetadata = this.fieldContext.fieldMetadata;
         const fieldLayoutInfo = this.fieldContext.field;
-        const className = fieldLayoutInfo.attrs?.className || 'col-12 s-field';
+        const className = fieldLayoutInfo.attrs?.className || 'field col-6 flex flex-column gap-2 mt-4';
         const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
 
         // auto complete specific code. 
@@ -232,8 +234,10 @@ export class SolidRelationManyToManyField implements ISolidField {
 
             return (
                 <div className={className}>
-                    <div className="flex align-items-center gap-2">
-                        {capitalize(fieldLayoutInfo.attrs.name)}
+                    <div className="flex align-items-center gap-3">
+                        <label className="form-field-label">
+                            {capitalize(fieldLayoutInfo.attrs.name)}
+                        </label>
                         {fieldLayoutInfo.attrs.inlineCreate === "true" &&
                             this.renderSolidFormEmbededView(formik, customCreateHandler, visibleCreateRelationEntity, setvisibleCreateRelationEntity)
                         }
@@ -259,18 +263,18 @@ export class SolidRelationManyToManyField implements ISolidField {
         return (
             <div>
 
-                <Panel toggleable headerTemplate={headerTemplate} style={{ marginBottom: "30px" }}>
+                <Panel toggleable headerTemplate={headerTemplate}>
 
-                    <div style={{ display: "grid", gridTemplateColumns: "auto auto" }}>
-                        {autoCompleteItems && autoCompleteItems.map((a: any) => {
+                    <div className="formgrid grid">
+                        {autoCompleteItems && autoCompleteItems.map((a: any, i: number) => {
                             return (
-                                <div key={a.label} className="p-field-checkbox many-to-many-checkbox md:col-6 sm:col-12">
+                                <div key={a.label} className={`field col-6 flex gap-2 ${i >= 2 ? 'mt-3' : ''}`}>
                                     <Checkbox
                                         inputId={a.label}
                                         checked={formik.values[fieldLayoutInfo.attrs.name].some((item: any) => item.label === a.label)}
                                         onChange={() => handleCheckboxChange(a)}
                                     />
-                                    <label htmlFor={a.label}> {a.label}</label>
+                                    <label htmlFor={a.label} className="form-field-label m-0"> {a.label}</label>
                                 </div>
                             )
                         })}
@@ -285,7 +289,7 @@ export class SolidRelationManyToManyField implements ISolidField {
     renderAutoCompleteMode(formik: FormikObject, visibleCreateRelationEntity: any, setvisibleCreateRelationEntity: any) {
         const fieldMetadata = this.fieldContext.fieldMetadata;
         const fieldLayoutInfo = this.fieldContext.field;
-        const className = fieldLayoutInfo.attrs?.className || 'col-12 s-field';
+        const className = fieldLayoutInfo.attrs?.className || 'field col-6 flex flex-column gap-2 mt-4';
         const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
 
         // auto complete specific code. 
@@ -354,32 +358,24 @@ export class SolidRelationManyToManyField implements ISolidField {
 
         return (
             <div className={className}>
-                <div className="justify-content-center align-items-center">
-                    <label htmlFor={fieldLayoutInfo.attrs.name}>{fieldLabel}
-
-                    </label>
-                </div>
-                <div className="s-input">
-                    <div className="flex align-items-center justify-content-center">
-                        <AutoComplete
-                            readOnly={readOnly}
-                            disabled={disabled}
-                            multiple
-                            {...formik.getFieldProps(fieldLayoutInfo.attrs.name)}
-                            id={fieldLayoutInfo.attrs.name}
-                            field="label"
-                            value={formik.values[fieldLayoutInfo.attrs.name] || ''}
-                            dropdown
-                            className="w-full autocomplete-small-input"
-                            suggestions={autoCompleteItems}
-                            completeMethod={autoCompleteSearch}
-                            onChange={formik.handleChange} />
-                        {fieldLayoutInfo.attrs.inlineCreate === "true" &&
-                            this.renderSolidFormEmbededView(formik, customCreateHandler, visibleCreateRelationEntity, setvisibleCreateRelationEntity)
-                        }
-                    </div>
-
-                </div>
+                <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
+
+                </label>
+                <AutoComplete
+                    readOnly={readOnly}
+                    disabled={disabled}
+                    multiple
+                    {...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} />
+                {fieldLayoutInfo.attrs.inlineCreate === "true" &&
+                    this.renderSolidFormEmbededView(formik, customCreateHandler, visibleCreateRelationEntity, setvisibleCreateRelationEntity)
+                }
             </div>
         );
     }
@@ -388,7 +384,7 @@ export class SolidRelationManyToManyField implements ISolidField {
 
         const fieldMetadata = this.fieldContext.fieldMetadata;
         const fieldLayoutInfo = this.fieldContext.field;
-        const className = fieldLayoutInfo.attrs?.className || 'col-12 s-field';
+        const className = fieldLayoutInfo.attrs?.className || 'field col-6 flex flex-column gap-2 mt-4';
         const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
 
         const params = {
@@ -406,22 +402,25 @@ export class SolidRelationManyToManyField implements ISolidField {
             }),
             modelName: camelCase(this.fieldContext.fieldMetadata.relationModelSingularName)
         }
+        // console.log("fieldLayoutInfo?.attrs?.inlineCreateLayout?.attrs?.width ", fieldLayoutInfo?.attrs?.inlineCreateLayout?.attrs?.width);
 
         return (
-            <div className="many-to-many-add" >
-                <Button icon="pi pi-plus"
+            <div >
+                <Button
+                    icon="pi pi-plus"
                     rounded
                     outlined
                     aria-label="Filter"
                     type="button"
+                    size="small"
                     onClick={() => setvisibleCreateRelationEntity(true)}
+                    className="custom-add-button"
                 />
                 <Dialog
                     header=""
                     showHeader={false}
                     visible={visibleCreateRelationEntity}
-                    className="many-to-many-creat-form-dialog"
-                    style={{ width: fieldLayoutInfo?.attrs?.inlineCreateLayout?.attrs?.width ?? "40vw" }}
+                    style={{ width: fieldLayoutInfo?.attrs?.inlineCreateLayout?.attrs?.width ?? "60vw" }}
                     onHide={() => {
                         if (!visibleCreateRelationEntity) return;
                         setvisibleCreateRelationEntity(false);

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 || 'col-12 s-field';
+        const className = fieldLayoutInfo.attrs?.className || 'field col-6 flex flex-column gap-2 mt-4';
         const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
         const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
 
@@ -103,35 +103,30 @@ export class SolidRelationManyToOneField implements ISolidField {
                 setAutoCompleteItems(autoCompleteItems);
             }
         }
-console.log("formik",formik.values);
+        console.log("formik", formik.values);
 
         const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
 
         return (
             <div className={className}>
-                <div className="justify-content-center align-items-center">
-                    <label htmlFor={fieldLayoutInfo.attrs.name}>{fieldLabel}
-
-                    </label>
-                </div>
-                <div className="s-input">
-                    <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
-                        className="w-full small-input"
-                        suggestions={autoCompleteItems}
-                        completeMethod={autoCompleteSearch}
-                        onChange={formik.handleChange} />
-
-                    {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
-                        <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
-                    )}
-                </div>
+                <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} />
+
+                {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
+                    <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                )}
             </div>
         );
     }

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

@@ -54,7 +54,7 @@ export class SolidRelationOneToManyField implements ISolidField {
         const fieldMetadata = this.fieldContext.fieldMetadata;
 
         const fieldLayoutInfo = this.fieldContext.field;
-        const className = fieldLayoutInfo.attrs?.className || 'col-12 s-field';
+        const className = fieldLayoutInfo.attrs?.className || 'field col-12 flex flex-column gap-2 mt-3';
         const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
         const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
         const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
@@ -132,10 +132,10 @@ export class SolidRelationOneToManyField implements ISolidField {
 
         return (
             <div className={className}>
-                <div className="justify-content-center align-items-center">
-                    <label htmlFor={fieldLayoutInfo.attrs.name}>{fieldLabel}&nbsp;{fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}</label>
-                </div>
-                <br></br>
+                {/* <div className="justify-content-center align-items-center"> */}
+                    <label htmlFor={fieldLayoutInfo.attrs.name}  className="form-field-label">{fieldLabel}&nbsp;{fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}</label>
+                {/* </div>
+                <br></br> */}
                 {listViewParams &&
                     <SolidListView key={refreshList.toString()}  {...listViewParams} handlePopUpOpen={handlePopupOpen} />
                 }
@@ -183,3 +183,4 @@ export class SolidRelationOneToManyField implements ISolidField {
         )
     }
 }
+

package/src/components/core/list/SolidListView.tsx

@@ -30,6 +30,7 @@ import { SolidLayoutViews } from '../common/SolidLayoutViews'
 import { SolidConfigureLayoutElement } from '../common/SolidConfigureLayoutElement'
 import { FilterIcon } from '../../modelsComponents/filterIcon';
 import { OverlayPanel } from "primereact/overlaypanel";
+import { Toast } from "primereact/toast";
 const getRandomInt = (min: number, max: number) => {
   return Math.floor(Math.random() * (max - min + 1)) + min;
 }
@@ -94,7 +95,10 @@ export const SolidListView = (params: SolidListViewParams) => {
     useLazyGetSolidEntitiesQuery,
     useLazyGetSolidEntityByIdQuery,
     usePrefetch,
-    useUpdateSolidEntityMutation
+    useUpdateSolidEntityMutation,
+    useRecoverSolidEntityByIdQuery,
+    useLazyRecoverSolidEntityByIdQuery,
+    useRecoverSolidEntityMutation
   } = entityApi;
 
   // Get the list view layout & metadata first. 
@@ -110,7 +114,6 @@ export const SolidListView = (params: SolidListViewParams) => {
     refetch
   } = useGetSolidViewLayoutQuery(listViewMetaDataQs);
 
-
   const initialFilterMethod = () => {
 
     const solidView = solidListViewMetaData.data.solidView;
@@ -179,24 +182,30 @@ export const SolidListView = (params: SolidListViewParams) => {
   const [sortField, setSortField] = useState("");
   const [sortOrder, setSortOrder] = useState(0);
   const [selectedRecords, setSelectedRecords] = useState<any[]>([]);
+  const [selectedRecoverRecords, setSelectedRecoverRecords] = useState<any[]>([]);
   const [loading, setLoading] = useState<boolean>(true);
   const [isDialogVisible, setDialogVisible] = useState(false);
+  const [isRecoverDialogVisible, setRecoverDialogVisible] = useState(false);
   const [createButtonUrl, setCreateButtonUrl] = useState<string>();
   const [editButtonUrl, setEditButtonUrl] = useState<string>();
+  const [showArchived, setShowArchived] = useState(false);
 
   // Custom Row Action
   const [listViewRowActionPopupState, setListViewRowActionPopupState] = useState(false);
   const [listViewRowActionData, setListRowActionData] = useState<any>();
 
+  const toast = useRef<Toast>(null);
+
   // Get the list view data.
   const [triggerGetSolidEntities, { data: solidEntityListViewData, isLoading, error }] = useLazyGetSolidEntitiesQuery();
 
+  const [triggerRecoverSolidEntitiesById, { data: recoverByIdData, isLoading: recoverByIdIsLoading, error: recoverByIdError, isError: recoverByIdIsError, isSuccess: recoverByIdIsSuccess }] = useLazyRecoverSolidEntityByIdQuery();
 
+  const [triggerRecoverSolidEntities, { data: recoverByData, isLoading: recoverByIsLoading, error: recoverError, isError: recoverIsError, isSuccess: recoverByIsSuccess }] = useRecoverSolidEntityMutation();
 
   // After data is fetched populate the list view state so as to be able to render the data. 
   useEffect(() => {
     if (solidEntityListViewData) {
-
       setListViewData(solidEntityListViewData?.records);
       setTotalRecords(solidEntityListViewData?.meta.totalRecords);
       setLoading(false);
@@ -231,6 +240,27 @@ export const SolidListView = (params: SolidListViewParams) => {
     },
   ] = useDeleteMultipleSolidEntitiesMutation();
 
+  // Fetch Soft Deleted data
+  useEffect(() => {
+    const queryData = {
+      offset: 0,
+      limit: 25,
+      populate: toPopulate,
+      sort: [`id:desc`],
+    };
+    if (showArchived) {
+      queryData.showSoftDeleted = 'true';
+    }
+    const queryString = qs.stringify(queryData, {
+      encodeValuesOnly: true
+    });
+
+    triggerGetSolidEntities(queryString);
+    setSelectedRecords([]);
+    setSelectedRecoverRecords([]);
+  }, [showArchived, recoverByIdIsSuccess, recoverByIsSuccess]);
+
+
   // Fetch data after toPopulate has been populated...
   useEffect(() => {
     if (toPopulate) {
@@ -250,6 +280,8 @@ export const SolidListView = (params: SolidListViewParams) => {
 
       triggerGetSolidEntities(queryString);
       setSelectedRecords([]);
+      setSelectedRecoverRecords([]);
+      setShowArchived(false);
     }
   }, [isDeleteSolidEntitiesSucess, isDeleteSolidSingleEntitySuccess, toPopulate]);
 
@@ -279,7 +311,11 @@ export const SolidListView = (params: SolidListViewParams) => {
   // handle change in the records which are currently selected...
   const onSelectionChange = (event: any) => {
     const value = event.value;
-    setSelectedRecords(value);
+    const activeRecords = value.filter((record: any) => record.deletedAt === null);
+    const deletedRecords = value.filter((record: any) => record.deletedAt !== null);
+
+    setSelectedRecords(activeRecords);
+    setSelectedRecoverRecords(deletedRecords);
   };
 
   const identifySolidOperatorAndValue = (primeReactMatchMode: FilterMatchMode, value: any): { operator: string, value: string | string[] | any[] } => {
@@ -475,6 +511,51 @@ export const SolidListView = (params: SolidListViewParams) => {
     );
   };
 
+  // Recover functions
+  const recoverById = (id) => {
+    triggerRecoverSolidEntitiesById(id);
+  }
+
+  const recoverAll = () => {
+    let recoverList: any = [];
+    selectedRecoverRecords.forEach((element: any) => {
+      recoverList.push(element.id);
+    });
+    triggerRecoverSolidEntities(recoverList);
+    setRecoverDialogVisible(false);
+  }
+
+  useEffect(() => {
+    if (recoverIsError || recoverByIdIsError) {
+      showError(recoverByIdIsError ? recoverByIdError : recoverError);
+    }
+  }, [recoverIsError, recoverByIdIsError])
+
+  const showError = async (error) => {
+    const errorMessages = error?.data?.message;
+    if (errorMessages.length > 0) {
+      toast?.current?.show({
+        severity: "error",
+        summary: "Can you send me the report?",
+        // sticky: true,
+        life: 3000,
+        //@ts-ignore
+        content: (props) => (
+          <div
+            className="flex flex-column align-items-left"
+            style={{ flex: "1" }}
+          >
+            {errorMessages.map((m, index) => (
+              <div className="flex align-items-center gap-2" key={index}>
+                <span className="font-bold text-900">{String(m)}</span>
+              </div>
+            ))}
+          </div>
+        ),
+      });
+    }
+  };
+
   // handle bulk deletion
   const deleteBulk = () => {
     let deleteList: any = [];
@@ -490,6 +571,7 @@ export const SolidListView = (params: SolidListViewParams) => {
   const onDeleteClose = () => {
     setDialogVisible(false);
     setSelectedRecords([]);
+    setSelectedRecoverRecords([]);
   }
 
   // Render columns dynamically based on metadata
@@ -542,6 +624,7 @@ export const SolidListView = (params: SolidListViewParams) => {
   return (
     <>
       <div className="page-header">
+      <Toast ref={toast} />
         <div className="flex gap-3 align-items-center">
 
 
@@ -566,7 +649,7 @@ export const SolidListView = (params: SolidListViewParams) => {
           }
 
           {solidListViewMetaData?.data?.solidView?.layout?.attrs?.enableGlobalSearch === true && params.embeded === false &&
-            <SolidGlobalSearchElement ref={solidGlobalSearchElementRef} viewData={solidListViewMetaData} handleApplyCustomFilter={handleApplyCustomFilter}  ></SolidGlobalSearchElement>
+            <SolidGlobalSearchElement ref={solidGlobalSearchElementRef} viewData={solidListViewMetaData} handleApplyCustomFilter={handleApplyCustomFilter}  setShowArchived={setShowArchived} showArchived={showArchived}></SolidGlobalSearchElement>
           }
         </div>
         <div className="flex align-items-center gap-3">
@@ -580,6 +663,9 @@ export const SolidListView = (params: SolidListViewParams) => {
               onClick={() => params.handlePopUpOpen(true)}
             ></Button>
           }
+          {showArchived && <Button type="button" icon="pi pi-refresh" label="Recover" size='small' severity="warning"
+              onClick={() => setRecoverDialogVisible(true)}
+          ></Button>}
           <SolidLayoutViews
             sizeOptions={sizeOptions}
             setSize={setSize}
@@ -596,10 +682,13 @@ export const SolidListView = (params: SolidListViewParams) => {
           } */}
         </div>
       </div>
-      <style>{`.p-datatable .p-datatable-loading-overlay {background-color: rgba(0, 0, 0, 0.0);}`}</style>
+      <style>{`.p-datatable .p-datatable-loading-overlay {background-color: rgba(0, 0, 0, 0.0);} .greyed-out-row { background-color: #f5f5f5 !important; color: #a0a0a0 !important; opacity: 0.6;}`}</style>
       <div className="solid-datatable-wrapper">
         <DataTable
           value={listViewData}
+          rowClassName={(rowData) => {
+            return rowData.deletedAt ? "greyed-out-row" : "";
+          }}
           showGridlines={false}
           lazy
           scrollable
@@ -620,7 +709,7 @@ export const SolidListView = (params: SolidListViewParams) => {
           sortOrder={sortOrder === 1 || sortOrder === -1 ? sortOrder : 0}
           loading={loading || isLoading}
           loadingIcon="pi pi-spinner"
-          selection={selectedRecords}
+          selection={[...selectedRecords, ...selectedRecoverRecords]}
           onSelectionChange={onSelectionChange}
           selectionMode="multiple"
           removableSort
@@ -635,7 +724,14 @@ export const SolidListView = (params: SolidListViewParams) => {
 
           {renderColumnsDynamically(listViewMetaData)}
           {actionsAllowed.includes(`${updatePermission(params.modelName)}`) && solidListViewMetaData?.data?.solidView?.layout?.attrs?.edit !== false &&
-            <Column body={detailsBodyTemplate} ></Column>
+            <Column body={(rowData) => (
+              rowData.deletedAt ? (
+                <a onClick={() => recoverById(rowData.id)} className="retrieve-button">
+                  <i className="pi pi-refresh" style={{ fontSize: "1rem" }}/>
+                </a>
+              ) :
+                detailsBodyTemplate(rowData)
+            )}></Column>
           }
           {solidListViewMetaData?.data?.solidView?.layout?.attrs?.rowButtons &&
             solidListViewMetaData?.data?.solidView?.layout?.attrs?.rowButtons.map((rowAction: any) => {
@@ -678,6 +774,20 @@ export const SolidListView = (params: SolidListViewParams) => {
         <p>Are you sure you want to delete the selected records?</p>
       </Dialog>
 
+      <Dialog
+        visible={isRecoverDialogVisible}
+        header="Confirm Recover"
+        modal
+        footer={() => (
+          <div className="flex justify-content-center">
+            <Button label="Yes" icon="pi pi-check" className='small-button' severity="danger" autoFocus onClick={recoverAll} />
+            <Button label="No" icon="pi pi-times" className='small-button' onClick={() => setRecoverDialogVisible(false)} />
+          </div>
+        )}
+        onHide={() => setRecoverDialogVisible(false)}
+      >
+        <p>Are you sure you want to recover all records?</p>
+      </Dialog>
 
       {listViewRowActionData &&
         <Dialog