@solidstarters/solid-core-ui 1.1.55 → 1.1.56

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

@@ -240,21 +240,23 @@ export class SolidMediaMultipleField implements ISolidField {
                                     {/* &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>} */}
                                 </label>
                             }
-                            <div
-                                {...getRootProps()}
-                                className="solid-dropzone-wrapper"
-                            >
-                                <input {...getInputProps()} />
-                                <DropzonePlaceholder
-                                    mediaTypes={fieldMetadata.mediaTypes}
-                                    mediaMaxSizeKb={fieldMetadata.mediaMaxSizeKb}
-                                />
-                            </div>
-                            {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
-                                <div className="absolute mt-1">
-                                    <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                            <div className="relative">
+                                <div
+                                    {...getRootProps()}
+                                    className="solid-dropzone-wrapper"
+                                >
+                                    <input {...getInputProps()} />
+                                    <DropzonePlaceholder
+                                        mediaTypes={fieldMetadata.mediaTypes}
+                                        mediaMaxSizeKb={fieldMetadata.mediaMaxSizeKb}
+                                    />
                                 </div>
-                            )}
+                                {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
+                                    <div className="absolute mt-1">
+                                        <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                                    </div>
+                                )}
+                            </div>
                             {
                                 fileSizeError &&
                                 <Message severity="error" text={fileSizeError?.toString()} />

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

@@ -235,21 +235,23 @@ export class SolidMediaSingleField implements ISolidField {
                                     {/* &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>} */}
                                 </label>
                             }
-                            <div
-                                {...getRootProps()}
-                                className="solid-dropzone-wrapper"
-                            >
-                                <input {...getInputProps()} />
-                                <DropzonePlaceholder
-                                    mediaTypes={fieldMetadata.mediaTypes}
-                                    mediaMaxSizeKb={fieldMetadata.mediaMaxSizeKb}
-                                />
-                            </div>
-                            {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
-                                <div className="absolute mt-1">
-                                    <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                            <div className="relative">
+                                <div
+                                    {...getRootProps()}
+                                    className="solid-dropzone-wrapper"
+                                >
+                                    <input {...getInputProps()} />
+                                    <DropzonePlaceholder
+                                        mediaTypes={fieldMetadata.mediaTypes}
+                                        mediaMaxSizeKb={fieldMetadata.mediaMaxSizeKb}
+                                    />
                                 </div>
-                            )}
+                                {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
+                                    <div className="absolute mt-1">
+                                        <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                                    </div>
+                                )}
+                            </div>
                             {
                                 fileSizeError &&
                                 <Message severity="error" text={fileSizeError?.toString()} />

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

@@ -64,6 +64,7 @@ export class SolidSelectionDynamicField implements ISolidField {
 
         const formDisabled = solidFormViewMetaData.data.solidView?.layout?.attrs?.disabled;
         const formReadonly = solidFormViewMetaData.data.solidView?.layout?.attrs?.readonly;
+        const whereClause = fieldLayoutInfo.attrs.whereClause;
 
         // selection dynamic specific code. 
         const [triggerGetSelectionDynamicValues] = useLazyGetSelectionDynamicValuesQuery();
@@ -77,11 +78,18 @@ export class SolidSelectionDynamicField implements ISolidField {
                 query: event.query,
                 fieldId: fieldMetadata.id
             };
-
-            const sdQs = qs.stringify(queryData, {
+            if (whereClause) {
+                queryData.query = whereClause;
+            }
+            let sdQs = qs.stringify(queryData, {
                 encodeValuesOnly: true,
+                encoder: (str, defaultEncoder, charset, type) => {
+                    if (type === 'key' || type === 'value') {
+                      if (str === queryData.query) return str;
+                    }
+                    return defaultEncoder(str);
+                }
             });
-
             // TODO: do error handling here, possible errors like modelname is incorrect etc...
             const sdResponse = await triggerGetSelectionDynamicValues(sdQs);
 
@@ -98,7 +106,7 @@ export class SolidSelectionDynamicField implements ISolidField {
         let DynamicWidget = getExtensionComponent("SolidFormFieldViewModeWidget");
         const widgetProps = {
             label: fieldLabel,
-            value: formik.values[fieldLayoutInfo.attrs.name],
+            value: formik.values[fieldLayoutInfo.attrs.name] && formik.values[fieldLayoutInfo.attrs.name].value,
         }
         return (
             <>

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

@@ -78,6 +78,7 @@ export class SolidRelationManyToOneField implements ISolidField {
 
         const formDisabled = solidFormViewMetaData.data.solidView?.layout?.attrs?.disabled;
         const formReadonly = solidFormViewMetaData.data.solidView?.layout?.attrs?.readonly;
+        const whereClause = fieldLayoutInfo.attrs.whereClause;
 
         const [autoCompleteItems, setAutoCompleteItems] = useState([]);
         const autoCompleteSearch = async (event: AutoCompleteCompleteEvent) => {
@@ -93,10 +94,12 @@ export class SolidRelationManyToOneField implements ISolidField {
                 }
             };
 
-            const autocompleteQs = qs.stringify(queryData, {
+            let autocompleteQs = qs.stringify(queryData, {
                 encodeValuesOnly: true,
             });
-
+            if (whereClause) {
+                autocompleteQs = `${autocompleteQs}&${whereClause}`;
+            }
             // TODO: do error handling here, possible errors like modelname is incorrect etc...
             const autocompleteResponse = await triggerGetSolidEntities(autocompleteQs);
 

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

@@ -93,6 +93,7 @@ export class SolidRelationOneToManyField implements ISolidField {
                 inlineCreate: readOnlyPermission === false ? true : false,
                 customLayout: fieldLayoutInfo?.attrs?.inlineListLayout,
                 embeded: true,
+                id: this.fieldContext.data ? this?.fieldContext?.data?.id : 'new',
                 customFilter: {
                     [customFilter]: {
                         id: {
@@ -113,6 +114,7 @@ export class SolidRelationOneToManyField implements ISolidField {
                 inlineCreate: readOnlyPermission === false ? true : false,
                 customLayout: fieldLayoutInfo?.attrs?.inlineListLayout,
                 embeded: true,
+                id: this.fieldContext.data ? this?.fieldContext?.data?.id : 'new',
                 customFilter: {
                     [customFilter]: {
                         id: {
@@ -128,11 +130,11 @@ export class SolidRelationOneToManyField implements ISolidField {
                 embeded: true,
                 isCustomCreate: false,
                 customLayout: fieldLayoutInfo?.attrs?.inlineCreateLayout,
-                modelName: camelCase(this.fieldContext.fieldMetadata.relationCoModelSingularName)
+                modelName: camelCase(this.fieldContext.fieldMetadata.relationCoModelSingularName),
             }
             setformViewParams(formviewparams)
 
-        }, [])
+        }, [readOnlyPermission])
 
         const fieldDisabled = fieldLayoutInfo.attrs?.disabled;
         const fieldReadonly = fieldLayoutInfo.attrs?.readonly;

package/src/components/core/kanban/KanbanUserViewLayout.tsx

@@ -0,0 +1,87 @@
+"use client";
+import { useFormik } from "formik";
+import { Button } from "primereact/button";
+import { useSelector } from "react-redux";
+import React, { useRef } from "react";
+import { createSolidEntityApi } from "@/redux/api/solidEntityApi";
+import { javascript } from "@codemirror/lang-javascript";
+import { oneDark } from "@codemirror/theme-one-dark";
+import CodeMirror, { EditorView } from "@uiw/react-codemirror";
+import { Toast } from "primereact/toast";
+
+export const KanbanUserViewLayout = ({ solidKanbanViewMetaData, setLayoutDialogVisible }: any) => {
+    const toast = useRef<Toast>(null);
+    const { user } = useSelector((state: any) => state.auth);
+    const entityApi = createSolidEntityApi("userViewMetadata");
+    const { useUpsertSolidEntityMutation } = entityApi;
+    const [upsertUserView] = useUpsertSolidEntityMutation();
+
+    if (!solidKanbanViewMetaData?.data?.solidView) return null;
+
+    const solidView = solidKanbanViewMetaData.data.solidView;
+
+    const showToast = (severity: "success" | "error", summary: string, detail: string) => {
+        toast.current?.show({
+            severity,
+            summary,
+            detail,
+            life: 3000,
+        });
+    };
+
+    const formik = useFormik({
+        initialValues: {
+            layoutString: JSON.stringify(solidView.layout, null, 2),
+        },
+        onSubmit: async (values) => {
+            const parsedLayout = JSON.parse(values.layoutString);
+            console.log("updatedLayout", parsedLayout);
+
+            try {
+                if (solidView.id) {
+                    const response = await upsertUserView({
+                        userId: user?.user?.id,
+                        viewMetadataId: solidView.id,
+                        layout: JSON.stringify(parsedLayout),
+                    }).unwrap();
+                    console.log("Response", response);
+                    if (response.statusCode === 200) {
+                        showToast("success", "Layout", "Form Layout Updated successfully!");
+                        setLayoutDialogVisible(false);
+                        window.location.reload();
+                    }
+                }
+            } catch (error) {
+                console.error("Update failed:", error);
+            }
+        },
+    });
+
+    return (
+        <>
+            <Toast ref={toast} />
+            <form onSubmit={formik.handleSubmit}>
+                <CodeMirror
+                    value={formik.values.layoutString}
+                    height="500px"
+                    theme={oneDark}
+                    style={{ fontSize: '10px' }}
+                    extensions={[javascript(), EditorView.lineWrapping]}
+                    onChange={(value) => {
+                        formik.setFieldValue("layoutString", value);
+                    }}
+                />
+                <div className="pt-3 flex gap-2">
+                    <Button type="submit" label="Apply" size="small" />
+                    <Button
+                        type="button"
+                        outlined
+                        label="Cancel"
+                        size="small"
+                        onClick={() => setLayoutDialogVisible(false)}
+                    />
+                </div>
+            </form>
+        </>
+    );
+};

package/src/components/core/kanban/SolidKanbanView.tsx

@@ -28,6 +28,8 @@ import "yet-another-react-lightbox/styles.css";
 import "yet-another-react-lightbox/plugins/counter.css";
 import { useRouter, useSearchParams } from "next/navigation";
 import { SolidKanbanViewConfigure } from "./SolidKanbanViewConfigure";
+import { KanbanUserViewLayout } from "./KanbanUserViewLayout";
+import { useSelector } from "react-redux";
 
 
 
@@ -39,6 +41,7 @@ type SolidKanbanViewParams = {
 
 
 export const SolidKanbanView = (params: SolidKanbanViewParams) => {
+  const { user } = useSelector((state: any) => state.auth);
   const solidGlobalSearchElementRef = useRef();
   const searchParams = useSearchParams().toString(); // Converts the query params to a string
   const router = useRouter();
@@ -62,6 +65,7 @@ export const SolidKanbanView = (params: SolidKanbanViewParams) => {
   const [openLightbox, setOpenLightbox] = useState(false);
   const [lightboxUrls, setLightboxUrls] = useState({});
   const [filterQueryString, setFilterQueryString] = useState<any>();
+  const [isLayoutDialogVisible, setLayoutDialogVisible] = useState(false);
 
 
 
@@ -117,7 +121,7 @@ export const SolidKanbanView = (params: SolidKanbanViewParams) => {
   } = entityApi;
 
   // Get the kanban view layout & metadata first. 
-  const kanbanViewMetaDataQs = qs.stringify({ ...params, viewType: 'kanban' }, {
+  const kanbanViewMetaDataQs = qs.stringify({ ...params, viewType: 'kanban', userId: user?.user?.id }, {
     encodeValuesOnly: true,
   });
   const [kanbanViewMetaData, setKanbanViewMetaData] = useState<any>({});
@@ -706,14 +710,14 @@ export const SolidKanbanView = (params: SolidKanbanViewParams) => {
             solidKanbanViewMetaData={solidKanbanViewMetaData}
             actionsAllowed={actionsAllowed}
             viewModes={viewModes}
-          // setLayoutDialogVisible={setLayoutDialogVisible}
+            setLayoutDialogVisible={setLayoutDialogVisible}
           />
           {/* <SolidConfigureLayoutElement></SolidConfigureLayoutElement> */}
         </div>
       </div>
       <style>{`.p-datatable .p-datatable-loading-overlay {background-color: rgba(0, 0, 0, 0.0);}`}</style>
       {solidKanbanViewMetaData && kanbanViewData &&
-        <KanbanBoard groupedView={groupedView} kanbanViewData={kanbanViewData} solidKanbanViewMetaData={solidKanbanViewMetaData?.data} setKanbanViewData={setKanbanViewData} handleLoadMore={handleLoadMore} onDragEnd={onDragEnd} handleSwimLinPagination={handleSwimLinPagination} setLightboxUrls={setLightboxUrls} setOpenLightbox={setOpenLightbox}  editButtonUrl={editButtonUrl}></KanbanBoard>
+        <KanbanBoard groupedView={groupedView} kanbanViewData={kanbanViewData} solidKanbanViewMetaData={solidKanbanViewMetaData?.data} setKanbanViewData={setKanbanViewData} handleLoadMore={handleLoadMore} onDragEnd={onDragEnd} handleSwimLinPagination={handleSwimLinPagination} setLightboxUrls={setLightboxUrls} setOpenLightbox={setOpenLightbox} editButtonUrl={editButtonUrl}></KanbanBoard>
       }
 
       <Dialog
@@ -738,6 +742,17 @@ export const SolidKanbanView = (params: SolidKanbanViewParams) => {
           slides={lightboxUrls}
         />
       }
+      <Dialog
+        visible={isLayoutDialogVisible}
+        header="Change Kanban Layout"
+        modal
+        onHide={() => setLayoutDialogVisible(false)}
+        contentStyle={{
+          width: 800
+        }}
+      >
+        <KanbanUserViewLayout solidKanbanViewMetaData={solidKanbanViewMetaData} setLayoutDialogVisible={setLayoutDialogVisible} />
+      </Dialog>
     </div>
   );
 };

package/src/components/core/kanban/SolidKanbanViewConfigure.tsx

@@ -7,7 +7,7 @@ import { OverlayPanel } from 'primereact/overlaypanel';
 import { RadioButton } from 'primereact/radiobutton';
 import React, { useEffect, useRef, useState } from 'react'
 
-export const SolidKanbanViewConfigure = ({ solidKanbanViewMetaData, actionsAllowed, viewModes }: any) => {
+export const SolidKanbanViewConfigure = ({ solidKanbanViewMetaData, actionsAllowed, setLayoutDialogVisible, viewModes }: any) => {
     const op = useRef(null);
     const customizeLayout = useRef<OverlayPanel | null>(null);
     const pathname = usePathname();
@@ -68,7 +68,7 @@ export const SolidKanbanViewConfigure = ({ solidKanbanViewMetaData, actionsAllow
                     <div className="flex flex-column">
                         <Button text icon='pi pi-download' label="Import" size="small" severity="secondary" className="text-left gap-2 text-base" />
                         <Button text icon='pi pi-upload' label="Export" size="small" severity="secondary" className="text-left gap-2 text-base" />
-                        {/* <Button
+                        <Button
                             text
                             type="button"
                             className="w-8rem text-left gap-2 purple-200"
@@ -78,7 +78,7 @@ export const SolidKanbanViewConfigure = ({ solidKanbanViewMetaData, actionsAllow
                             severity="contrast"
                             icon={'pi pi-objects-column'}
                             onClick={() => setLayoutDialogVisible(true)}
-                        /> */}
+                        />
                     </div>
                 </div>
                 <Divider className="m-0" />

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

@@ -0,0 +1,170 @@
+"use client"
+import { useFormik } from 'formik';
+import { Button } from 'primereact/button';
+import { Checkbox, CheckboxChangeEvent } from 'primereact/checkbox';
+import React, { useEffect, useRef, useState } from 'react'
+import qs from "qs";
+import { useSelector } from 'react-redux';
+import { createSolidEntityApi } from '@/redux/api/solidEntityApi';
+import { Toast } from "primereact/toast";
+
+interface FieldMetadata {
+    displayName: string;
+}
+
+interface FilterColumns {
+    name: string;
+    key: string;
+}
+
+export const SolidListColumnSelector = ({ listViewMetaData }: any) => {
+    const toast = useRef<Toast>(null);
+
+    const { user } = useSelector((state: any) => state.auth);
+    const entityApi = createSolidEntityApi('userViewMetadata');
+    const {
+        useUpsertSolidEntityMutation
+    } = entityApi;
+
+    const [upsertUserView, { isLoading, error: viewCreateError, isSuccess, data: data }] = useUpsertSolidEntityMutation();
+    const showToast = (severity: "success" | "error", summary: string, detail: string) => {
+        toast.current?.show({
+            severity,
+            summary,
+            detail,
+            life: 3000,
+        });
+    };
+
+    if (!listViewMetaData) {
+        return;
+    }
+    if (!listViewMetaData.data) {
+        return;
+    }
+
+    const solidView = listViewMetaData?.data?.solidView;
+
+    // This is a key value map of field name vs field metadata.
+    const solidFieldsMetadata = listViewMetaData?.data?.solidFieldsMetadata as Record<string, FieldMetadata>;
+
+
+    if (!solidView || !solidFieldsMetadata) {
+        return;
+    }
+
+    const checkedFieldNames = new Set(solidView.layout.children.map((col: { attrs: { name: string } }) => col.attrs.name));
+
+    const solidListColumns: FilterColumns[] = Object.entries(solidFieldsMetadata).map(([key, field]) => ({
+        name: field.displayName,
+        key,
+    }));
+
+    const formik = useFormik({
+        initialValues: {
+            selectedColumns: solidListColumns.filter(col => checkedFieldNames.has(col.key)),
+        },
+        onSubmit: async (values) => {
+            const selectedKeys = values.selectedColumns.map(col => col.key);
+
+            // Step 1: Extract current children
+            const currentChildren = solidView.layout.children;
+
+            // Step 2: Create a map of all available metadata
+            const allFieldMeta = solidFieldsMetadata;
+
+            // Step 3: Filter children to include only selected keys
+            const newChildren = selectedKeys.map((key) => {
+                const existingChild = currentChildren.find((child: any) => child.attrs.name === key);
+                if (existingChild) {
+                    return existingChild; // keep original config
+                } else {
+                    // construct a new one if it wasn't in the original
+                    return {
+                        type: 'field',
+                        attrs: {
+                            name: key,
+                            label: allFieldMeta[key]?.displayName || key,
+                            sortable: true,
+                            filterable: true,
+                        }
+                    };
+                }
+            });
+
+            // Now build updated solidView
+            const updatedView = {
+                layout: {
+                    ...solidView.layout,
+                    children: newChildren
+                }
+            };
+
+            try {
+                if (listViewMetaData?.data?.solidView?.id) {
+                    // Update existing user view
+                    const response = await upsertUserView({
+                        userId: user?.user?.id,
+                        viewMetadataId: listViewMetaData?.data?.solidView?.id,
+                        layout: JSON.stringify(updatedView.layout),
+                    }).unwrap();
+                    if (response.statusCode === 200) {
+                        showToast("success", "Layout", "Form Layout Updated successfully!");
+                        window.location.reload();
+                    }
+                    console.log("Successfully updated:", response);
+                } else {
+                    // Create new user view
+                    console.log("Error:");
+                }
+            } catch (error) {
+                console.error("Error updating user view:", error);
+            }
+
+            console.log("Updated solidView", updatedView);
+
+        },
+    });
+
+    return (
+        <>
+            <Toast ref={toast} />
+            <form onSubmit={formik.handleSubmit} className="flex flex-column gap-1 p-1">
+                <div className="flex flex-column gap-3 px-3 cogwheel-column-filter" style={{ maxHeight: 400, overflowY: 'auto' }}>
+                    {solidListColumns.map((column) => {
+                        return (
+                            <div key={column.key} className="flex align-items-center gap-1">
+                                <Checkbox
+                                    inputId={column.key}
+                                    name="selectedColumns"
+                                    value={column}
+                                    onChange={(e) => {
+                                        const isChecked = formik.values.selectedColumns.some(item => item.key === column.key);
+                                        formik.setFieldValue(
+                                            "selectedColumns",
+                                            isChecked
+                                                ? formik.values.selectedColumns.filter(item => item.key !== column.key)
+                                                : [...formik.values.selectedColumns, column]
+                                        );
+                                    }}
+                                    checked={formik.values.selectedColumns.some(item => item.key === column.key)}
+                                    className="text-base"
+                                />
+                                <label htmlFor={column.key} className="ml-2 text-base">
+                                    {column.name}
+                                </label>
+                            </div>
+                        );
+                    })}
+                </div>
+                <div className="p-3 flex gap-2">
+                    <Button type='submit' label="Apply" size="small" />
+                    <Button type='button' outlined label="Cancel" size="small"
+                        // @ts-ignore
+                        onClick={(e) => op.current.hide(e)}
+                    />
+                </div>
+            </form>
+        </>
+    )
+}

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

@@ -43,6 +43,7 @@ import Download from "yet-another-react-lightbox/plugins/download";
 import "yet-another-react-lightbox/styles.css";
 import "yet-another-react-lightbox/plugins/counter.css";
 import { SolidListViewConfigure } from "./SolidListViewConfigure";
+import { useSelector } from "react-redux";
 
 
 const getRandomInt = (min: number, max: number) => {
@@ -91,6 +92,7 @@ type SolidListViewParams = {
 export const SolidListView = (params: SolidListViewParams) => {
 
   const solidGlobalSearchElementRef = useRef();
+  const { user } = useSelector((state: any) => state.auth);
 
 
   const router = useRouter()
@@ -148,7 +150,7 @@ export const SolidListView = (params: SolidListViewParams) => {
   } = entityApi;
 
   // Get the list view layout & metadata first. 
-  const listViewMetaDataQs = qs.stringify({ modelName: params.modelName, moduleName: params.moduleName, viewType: 'list' }, {
+  const listViewMetaDataQs = qs.stringify({ modelName: params.modelName, moduleName: params.moduleName, viewType: 'list', userId: user?.user?.id }, {
     encodeValuesOnly: true,
   });
   const [listViewMetaData, setListViewMetaData] = useState({});
@@ -722,23 +724,25 @@ export const SolidListView = (params: SolidListViewParams) => {
           {actionsAllowed.includes(`${createPermission(params.modelName)}`) && solidListViewMetaData?.data?.solidView?.layout?.attrs?.create !== false && params.embeded !== true &&
             <SolidCreateButton url={createButtonUrl} />
           }
-          {actionsAllowed.includes(`${createPermission(params.modelName)}`) && solidListViewMetaData?.data?.solidView?.layout?.attrs?.create !== false && params.embeded == true && params.inlineCreate == true &&
+          {actionsAllowed.includes(`${createPermission(params.modelName)}`) && solidListViewMetaData?.data?.solidView?.layout?.attrs?.create !== false && params.embeded == true && params.inlineCreate == true && params.id !== 'new' &&
             // < SolidCreateButton url={createButtonUrl} />
             <Button type="button" icon="pi pi-plus" label="Add" size='small'
               onClick={() => params.handlePopUpOpen("new")}
             ></Button>
           }
           {/* Button For Manual Refresh */}
-          <Button
-            type="button"
-            size="small"
-            icon="pi pi-refresh"
-            severity="secondary"
-            outlined
-            onClick={() => {
-              setQueryString(first, rows, sortField, sortOrder, filters, showArchived);
-            }}
-          />
+          {params.embeded !== true &&
+            <Button
+              type="button"
+              size="small"
+              icon="pi pi-refresh"
+              severity="secondary"
+              outlined
+              onClick={() => {
+                setQueryString(first, rows, sortField, sortOrder, filters, showArchived);
+              }}
+            />
+          }
           {showArchived && <Button type="button" icon="pi pi-refresh" label="Recover" size='small' severity="secondary"
             onClick={() => setRecoverDialogVisible(true)}
           ></Button>}