@solidstarters/solid-core-ui 1.1.37 → 1.1.40

package/src/components/core/kanban/kanban-fields/SolidMediaMultipleKanbanField.tsx

@@ -0,0 +1,68 @@
+'use client';
+import React, { useState } from 'react';
+import { Column } from "primereact/column";
+import { SolidKanbanViewFieldsParams } from '../SolidKanbanViewFields';
+import { Dialog } from 'primereact/dialog';
+import { Document, Page, pdfjs } from "react-pdf";
+
+pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs`;
+
+
+const SolidMediaMultipleKanbanField = ({ solidKanbanViewMetaData, fieldMetadata, fieldLayout, data, setLightboxUrls, setOpenLightbox }: SolidKanbanViewFieldsParams) => {
+    // const filterable = column.attrs.filterable;
+    const [visible, setVisible] = useState(false);
+    const header = fieldMetadata.displayName;
+    // const fileData = data && data._media[fieldMetadata.name].length > 0 && data._media[fieldMetadata.name].map((i: any) => {
+    //     const fileData = { mimeType: i.mimeType, url: i._full_url }
+    //     return fileData
+    // }
+    // );
+    const fileData = [
+        { mimeType: "image/jpeg", url: "https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" },
+        { mimeType: "application/pdf", url: "http://localhost:8080/media-files-storage/Holiday List 2025.pdf" },
+        { mimeType: "application/vnd.ms-excel", url: "http://localhost:8080/media-files-storage/PF Form.xls" }
+    ]
+
+    return (
+        <>
+            {fileData && fileData.map((file: any) => {
+                return (
+                    <>
+                        <div>
+                            {file.mimeType.startsWith("image/") &&
+                                <img src={file.url}
+                                    onClick={(event) => {
+                                        event.stopPropagation();
+                                        setLightboxUrls([{ src: file.url }]);
+                                        setOpenLightbox(true);
+                                    }}
+                                    className='image-preview'
+                                    alt={header} />}
+                            {/* Render PDF - Open Lightbox on Click */}
+                            {file.mimeType.includes("pdf") && (
+                                <>
+                                    <i className="pi pi-file-pdf" style={{ fontSize: "24px", color: "red", cursor: "pointer" }} onClick={() => setVisible(true)}></i>
+                                    <Dialog header="PDF Preview" visible={visible} style={{ width: "" }} onHide={() => setVisible(false)} modal>
+                                        <Document file={file.url}>
+                                            <Page pageNumber={1} />
+                                        </Document>
+                                    </Dialog>
+                                </>
+                            )}
+                            {/* Excel or Other Files - Show Download Icon */}
+                            {(file.mimeType.includes("excel") || file.mimeType.includes("spreadsheet")) && (
+                                <a href={file.url} download target="_blank" rel="noopener noreferrer">
+                                    <i className="pi pi-file-excel">Download</i>
+                                </a>
+                            )}
+                        </div>
+                    </>
+                );
+            }
+            )}
+        </>
+    );
+
+};
+
+export default SolidMediaMultipleKanbanField;

package/src/components/core/kanban/kanban-fields/SolidMediaSingleKanbanField.tsx

@@ -0,0 +1,60 @@
+'use client';
+import React, { useState } from 'react';
+import { Column, ColumnFilterElementTemplateOptions } from "primereact/column";
+import { InputTypes, SolidVarInputsFilterElement } from "../SolidVarInputsFilterElement";
+import { SolidKanbanViewFieldsParams } from '../SolidKanbanViewFields';
+import { FormEvent } from "primereact/ts-helpers";
+import { FilterMatchMode } from 'primereact/api';
+import { Document, Page, pdfjs } from "react-pdf";
+import { Dialog } from "primereact/dialog";
+
+pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs`;
+
+
+const SolidMediaSingleKanbanField = ({ solidKanbanViewMetaData, fieldMetadata, fieldLayout, data, setLightboxUrls, setOpenLightbox }: SolidKanbanViewFieldsParams) => {
+    const [visible, setVisible] = useState(false);
+    const header = fieldMetadata.displayName;
+    const url = data && data._media && data._media[fieldMetadata.name].length > 0 && data._media[fieldMetadata.name].map((i: any) => i._full_url)[0];
+    const mimeType = data && data._media && data._media[fieldMetadata.name].length > 0 && data._media[fieldMetadata.name].map((i: any) => i.mimeType)[0];
+    // const mimeType: string = "excel";
+    // const url = "http://localhost:8080/media-files-storage/Holiday List 2025.pdf";
+    // const url = "http://localhost:8080/media-files-storage/PF Form.xls";
+    
+    
+
+    return (
+        <>
+            {mimeType && mimeType.includes("image/") &&
+                <img className='image-preview'
+                    src={url}
+                    onClick={(event) => {
+                        event.stopPropagation();
+                        setLightboxUrls([{ src: url }]);
+                        setOpenLightbox(true);
+                    }} 
+                    alt={header} />}
+
+            {/* Render PDF - Open Lightbox on Click */}
+            {mimeType && mimeType.includes("pdf") && (
+                <>
+                    <i className="pi pi-file-pdf" style={{ fontSize: "24px", color: "red", cursor: "pointer" }} onClick={() => setVisible(true)}></i>
+                    <Dialog header="PDF Preview" visible={visible} style={{ width: "" }} onHide={() => setVisible(false)} modal>
+                        <Document file={url}>
+                            <Page pageNumber={1} />
+                        </Document>
+                    </Dialog>
+                </>
+            )}
+            {/* Excel or Other Files - Show Download Icon */}
+            {mimeType && (mimeType.includes("excel") || mimeType.includes("spreadsheet")) && (
+                <a href={url} download target="_blank" rel="noopener noreferrer">
+                    <i className="pi pi-file-excel">Download</i>
+                </a>
+            )}
+
+        </>
+    );
+
+};
+
+export default SolidMediaSingleKanbanField;

package/src/components/core/kanban/kanban-fields/SolidRelationKanbanField.tsx

@@ -0,0 +1,13 @@
+'use client';
+import { SolidKanbanViewFieldsParams } from '../SolidKanbanViewFields';
+import SolidRelationManyToOneKanbanField from './relations/SolidRelationManyToOneKanbanField';
+
+const SolidRelationKanbanField = ({ solidKanbanViewMetaData, fieldMetadata, fieldLayout,data }: SolidKanbanViewFieldsParams) => {
+    if (fieldMetadata.relationType === 'many-to-one') {
+        return SolidRelationManyToOneKanbanField({ solidKanbanViewMetaData, fieldMetadata, fieldLayout,data });
+    }
+    // TODO: Support one-to-many
+    // TODO: Support many-to-many
+};
+
+export default SolidRelationKanbanField;

package/src/components/core/kanban/kanban-fields/SolidRichTextKanbanField.tsx

@@ -0,0 +1,9 @@
+'use client';
+import { SolidKanbanViewFieldsParams } from '../SolidKanbanViewFields';
+import SolidShortTextKanbanField from './SolidShortTextKanbanField';
+
+const SolidRichTextKanbanField = ({ solidKanbanViewMetaData, fieldMetadata, fieldLayout,data }: SolidKanbanViewFieldsParams) => {
+    return SolidShortTextKanbanField({ solidKanbanViewMetaData, fieldMetadata, fieldLayout,data });
+};
+
+export default SolidRichTextKanbanField;

package/src/components/core/kanban/kanban-fields/SolidSelectionDynamicKanbanField.tsx

@@ -0,0 +1,13 @@
+'use client';
+import { SolidKanbanViewFieldsParams } from '../SolidKanbanViewFields';
+
+const SolidSelectionDynamicKanbanField = ({ solidKanbanViewMetaData, fieldMetadata, fieldLayout,data }: SolidKanbanViewFieldsParams) => {
+ 
+
+    return (
+        <p>{data && data[fieldMetadata.name] ? `${data[fieldMetadata.name]}`: ""}</p>
+    );
+
+};
+
+export default SolidSelectionDynamicKanbanField;

package/src/components/core/kanban/kanban-fields/SolidSelectionStaticKanbanField.tsx

@@ -0,0 +1,14 @@
+'use client';
+import { SolidKanbanViewFieldsParams } from '../SolidKanbanViewFields';
+
+
+const SolidSelectionStaticKanbanField = ({ solidKanbanViewMetaData, fieldMetadata, fieldLayout,data }: SolidKanbanViewFieldsParams) => {
+
+   
+
+    return (
+      <p>{data && data[fieldMetadata.name] ? `${data[fieldMetadata.name]}`: ""}</p>
+    );
+};
+
+export default SolidSelectionStaticKanbanField;

package/src/components/core/kanban/kanban-fields/SolidShortTextKanbanField.tsx

@@ -0,0 +1,29 @@
+'use client';
+import { SolidKanbanViewFieldsParams } from '../SolidKanbanViewFields';
+
+const SolidShortTextKanbanField = ({ solidKanbanViewMetaData, fieldMetadata, fieldLayout, data, setLightboxUrls, setOpenLightbox }: SolidKanbanViewFieldsParams) => {
+    const renderMode = fieldLayout?.attrs?.renderMode ? fieldLayout?.attrs?.renderMode : "text";
+
+    return (
+        <>
+            {renderMode === "text" &&
+                <p>{data && data[fieldMetadata.name] ? `${data[fieldMetadata.name]}` : ""}</p>
+            }
+            {renderMode === "image" &&
+                <img
+                    src={data[fieldMetadata.name]}
+                    onClick={(event) => {
+                        event.stopPropagation();
+                        setLightboxUrls([{ src: data[fieldMetadata.name] }]);
+                        setOpenLightbox(true);
+                    }}
+                    className='image-preview'
+                ></img>
+
+            }
+        </>
+    );
+
+};
+
+export default SolidShortTextKanbanField;

package/src/components/core/kanban/kanban-fields/SolidTimeKanbanField.tsx

@@ -0,0 +1,12 @@
+'use client';
+import { SolidKanbanViewFieldsParams } from '../SolidKanbanViewFields';
+
+const SolidTimeKanbanField = ({ solidKanbanViewMetaData, fieldMetadata, fieldLayout,data }: SolidKanbanViewFieldsParams) => {
+   
+    return (
+        <p>{data && data[fieldMetadata.name] ? `${data[fieldMetadata.name]}`: ""}</p>
+    );
+
+};
+
+export default SolidTimeKanbanField;

package/src/components/core/kanban/kanban-fields/SolidUuidKanbanField.tsx

@@ -0,0 +1,13 @@
+'use client';
+import { SolidKanbanViewFieldsParams } from '../SolidKanbanViewFields';
+
+const SolidUuidKanbanField = ({ solidKanbanViewMetaData, fieldMetadata, fieldLayout,data }: SolidKanbanViewFieldsParams) => {
+    
+
+    return (
+        <p>{data && data[fieldMetadata.name] ? `${data[fieldMetadata.name]}`: ""}</p>
+    );
+
+};
+
+export default SolidUuidKanbanField;

package/src/components/core/kanban/kanban-fields/relations/SolidRelationManyToOneKanbanField.tsx

@@ -0,0 +1,16 @@
+'use client';
+import { FilterMatchMode } from 'primereact/api';
+import { Column, ColumnFilterElementTemplateOptions } from "primereact/column";
+import { FormEvent } from "primereact/ts-helpers";
+import { InputTypes, SolidVarInputsFilterElement } from "../../SolidVarInputsFilterElement";
+import { SolidKanbanViewFieldsParams } from '../../SolidKanbanViewFields';
+
+const SolidRelationManyToOneKanbanField = ({ solidKanbanViewMetaData, fieldMetadata, fieldLayout,data }: SolidKanbanViewFieldsParams) => {
+ 
+    return (
+       <></>
+    );
+
+};
+
+export default SolidRelationManyToOneKanbanField;

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

@@ -27,7 +27,6 @@ import { useRouter } from "next/navigation";
 import { ListViewRowActionPopup } from "./ListViewRowActionPopup";
 import FilterComponent, { FilterOperator, FilterRule, FilterRuleType } from "@/components/core/common/FilterComponent";
 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";
@@ -37,11 +36,13 @@ import CozyImage from '../../../resources/images/layout/images/cozy.png';
 import ComfortableImage from '../../../resources/images/layout/images/comfortable.png';
 import ListImage from '../../../resources/images/layout/images/cozy.png';
 import KanbanImage from '../../../resources/images/layout/images/kanban.png';
+import { capitalize } from "lodash";
 import Lightbox from "yet-another-react-lightbox";
 import Counter from "yet-another-react-lightbox/plugins/counter";
 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";
 
 const getRandomInt = (min: number, max: number) => {
   return Math.floor(Math.random() * (max - min + 1)) + min;
@@ -212,6 +213,22 @@ export const SolidListView = (params: SolidListViewParams) => {
   const [editButtonUrl, setEditButtonUrl] = useState<string>();
   const [showArchived, setShowArchived] = useState(false);
 
+  const sizeOptions = [
+    { label: 'Compact', value: 'small', image: CompactImage },
+    { label: 'Cozy', value: 'normal', image: CozyImage },
+    { label: 'Comfortable', value: 'large', image: ComfortableImage }
+  ]
+
+  // const viewModes = [
+  //   { label: 'List ', value: 'list', image: ListImage },
+  //   { label: 'Kanban', value: 'kanban', image: KanbanImage },
+  // ]
+
+  const [size, setSize] = useState<string | any>(sizeOptions[1].value);
+  const [viewModes, setViewModes] = useState<any>([]);
+
+
+
   // Custom Row Action
   const [listViewRowActionPopupState, setListViewRowActionPopupState] = useState(false);
   const [listViewRowActionData, setListRowActionData] = useState<any>();
@@ -240,6 +257,8 @@ export const SolidListView = (params: SolidListViewParams) => {
     if (solidListViewMetaData) {
       const createActionUrl = solidListViewMetaData?.data?.solidView?.layout?.attrs?.createAction && solidListViewMetaData?.data?.solidView?.layout?.attrs?.createAction?.type === "custom" ? solidListViewMetaData?.data?.solidView?.layout?.attrs?.createAction?.customComponent : "form/new";
       const editActionUrl = solidListViewMetaData?.data?.solidView?.layout?.attrs?.editAction && solidListViewMetaData?.data?.solidView?.layout?.attrs?.editAction?.type === "custom" ? solidListViewMetaData?.data?.solidView?.layout?.attrs?.editAction?.customComponent : "form";
+      const viewModes = solidListViewMetaData?.data?.solidView?.layout?.attrs?.allowedViews && solidListViewMetaData?.data?.solidView?.layout?.attrs?.allowedViews.length > 0 && solidListViewMetaData?.data?.solidView?.layout?.attrs?.allowedViews.map((view: any) => { return { label: capitalize(view), value: view } });
+      setViewModes(viewModes);
       if (createActionUrl) {
         setCreateButtonUrl(createActionUrl)
       }
@@ -624,19 +643,6 @@ export const SolidListView = (params: SolidListViewParams) => {
     setListViewRowActionPopupState(false)
   }
 
-  const sizeOptions = [
-    { label: 'Compact', value: 'small', image: CompactImage },
-    { label: 'Cozy', value: 'normal', image: CozyImage },
-    { label: 'Comfortable', value: 'large', image: ComfortableImage }
-  ]
-
-  const viewModes = [
-    { label: 'List ', value: 'list', image: ListImage },
-    { label: 'Kanban', value: 'kanban', image: KanbanImage },
-  ]
-
-  const [size, setSize] = useState<string | any>(sizeOptions[1].value);
-  const [view, setView] = useState<string | any>(viewModes[0].value);
 
   const listViewTitle = solidListViewMetaData?.data?.solidView?.displayName
 
@@ -677,7 +683,8 @@ export const SolidListView = (params: SolidListViewParams) => {
           ></Button>}
 
           {params.embeded === false && (solidListViewMetaData?.data?.solidView?.layout?.attrs?.configureView !== false) &&
-            <SolidConfigureLayoutElement
+            <SolidListViewConfigure
+              listViewMetaData={listViewMetaData}
               setShowArchived={setShowArchived}
               showArchived={showArchived}
               viewData={solidListViewMetaData}
@@ -685,13 +692,11 @@ export const SolidListView = (params: SolidListViewParams) => {
               setSize={setSize}
               size={size}
               viewModes={viewModes}
-              setView={setView}
-              view={view}
               params={params}
               actionsAllowed={actionsAllowed}
               selectedRecords={selectedRecords}
               setDialogVisible={setDialogVisible}
-            ></SolidConfigureLayoutElement>
+            />
           }
 
         </div>
@@ -885,5 +890,4 @@ export const SolidListView = (params: SolidListViewParams) => {
       }
     </div>
   );
-};
-
+};

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

@@ -92,7 +92,7 @@ export const SolidListViewColumn = ({ solidListViewMetaData, fieldMetadata, colu
         return SolidDecimalColumn({ solidListViewMetaData, fieldMetadata, column });
     }
     if (fieldMetadata.type === 'shortText') {
-        return SolidShortTextColumn({ solidListViewMetaData, fieldMetadata, column });
+        return SolidShortTextColumn({ solidListViewMetaData, fieldMetadata, column, setLightboxUrls, setOpenLightbox });
     }
     if (fieldMetadata.type === 'longText') {
         return SolidLongTextColumn({ solidListViewMetaData, fieldMetadata, column });

package/src/components/core/{common/SolidConfigureLayoutElement.tsx → list/SolidListViewConfigure.tsx}

@@ -1,6 +1,7 @@
 "use client"
 import { deleteManyPermission, deletePermission } from "@/helpers/permissions";
 import Image from "next/image";
+import { usePathname, useRouter } from "next/navigation";
 import { Accordion, AccordionTab } from "primereact/accordion";
 import { Button } from "primereact/button";
 import { Checkbox, CheckboxChangeEvent } from "primereact/checkbox";
@@ -9,15 +10,53 @@ import { OverlayPanel } from "primereact/overlaypanel";
 import { RadioButton } from "primereact/radiobutton";
 import { useEffect, useRef, useState } from "react";
 
+interface FieldMetadata {
+    displayName: string;
+}
+
 interface FilterColumns {
     name: string;
     key: string;
+    isChecked: boolean;
 }
-export const SolidConfigureLayoutElement = ({ setShowArchived, showArchived, viewData, sizeOptions, setSize, size, viewModes, setView, view, params, actionsAllowed, selectedRecords, setDialogVisible }: any) => {
+export const SolidListViewConfigure = ({ listViewMetaData, setShowArchived, showArchived, viewData, sizeOptions, setSize, size, viewModes, params, actionsAllowed, selectedRecords, setDialogVisible }: any) => {
+    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>;
 
     // const [visible, setVisible] = useState<boolean>(false);
     const op = useRef(null);
     const customizeLayout = useRef<OverlayPanel | null>(null);
+    const pathname = usePathname();
+    const router = useRouter();
+    const [view, setView] = useState<string>("");
+
+    const handleViewChange = (newView: string) => {
+        if (view === newView) return; // Prevent unnecessary updates
+        const pathSegments = pathname.split('/').filter(Boolean);
+        pathSegments[pathSegments.length - 1] = newView; // Replace the last part with new view
+        const newPath = '/' + pathSegments.join('/');
+        router.push(newPath);
+    };
+
+    useEffect(() => {
+        if (typeof pathname === 'string') {
+            const pathSegments = pathname.split('/').filter(Boolean);
+            if (pathSegments.length > 0) {
+                setView(pathSegments[pathSegments.length - 1]);
+            }
+        }
+    }, [])
+
+
     const [isOverlayOpen, setIsOverlayOpen] = useState(false);
     useEffect(() => {
         const handleClickOutside = (event: MouseEvent) => {
@@ -38,23 +77,30 @@ export const SolidConfigureLayoutElement = ({ setShowArchived, showArchived, vie
         return () => document.removeEventListener("click", handleClickOutside);
     }, [isOverlayOpen])
 
-    const categories: FilterColumns[] = [
-        { name: 'ID', key: 'A' },
-        { name: 'Tracker Date', key: 'M' },
-        { name: 'Production', key: 'P' },
-        { name: 'Research', key: 'R' }
-    ];
-    const [selectedCategories, setSelectedCategories] = useState<FilterColumns[]>([categories[1]]);
+    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,
+        isChecked: checkedFieldNames.has(key),
+    }));
+
+    const [selectedColumns, setSelectedColumns] = useState<FilterColumns[]>(solidListColumns.filter(col => col.isChecked));
 
     const onCategoryChange = (e: CheckboxChangeEvent) => {
-        let _selectedCategories = [...selectedCategories];
+        let _selectedColumns = [...selectedColumns];
 
         if (e.checked)
-            _selectedCategories.push(e.value);
+            _selectedColumns.push(e.value);
         else
-            _selectedCategories = _selectedCategories.filter(category => category.key !== e.value.key);
+            _selectedColumns = _selectedColumns.filter(column => column.key !== e.value.key);
 
-        setSelectedCategories(_selectedCategories);
+        setSelectedColumns(_selectedColumns);
     };
 
     return (
@@ -87,8 +133,8 @@ export const SolidConfigureLayoutElement = ({ setShowArchived, showArchived, vie
                         <Button text icon='pi pi-upload' label="Export" size="small" severity="secondary" className="text-left gap-2 text-base" />
                         {/* <Button text icon='pi pi-share-alt' label="Share" size="small" severity="secondary" className="text-left gap-2" /> */}
                         {/* {viewData?.data?.solidView?.model?.enableSoftDelete &&
-                            <Button text severity="secondary" size="small" className="text-left w-13rem" label={showArchived ? "Hide Archived Records" : "Show Archived Records"} iconPos="left" onClick={() => { setShowArchived(!showArchived); }} />
-                        } */}
+                        <Button text severity="secondary" size="small" className="text-left w-13rem" label={showArchived ? "Hide Archived Records" : "Show Archived Records"} iconPos="left" onClick={() => { setShowArchived(!showArchived); }} />
+                    } */}
                         {viewData?.data?.solidView?.model?.enableSoftDelete && (
                             <div className="flex align-items-center px-3 gap-2 mt-2 mb-1">
                                 <Checkbox
@@ -131,35 +177,39 @@ export const SolidConfigureLayoutElement = ({ setShowArchived, showArchived, vie
                             setTimeout(() => setIsOverlayOpen(false), 50); // ✅ Ensure state updates
                         }}
                     >
+
                         <div className="solid-layout-accordion">
-                            <Accordion multiple expandIcon="pi pi-chevron-down" collapseIcon="pi pi-chevron-up">
-                                <AccordionTab header="Switch Type">
-                                    <div className="flex flex-column gap-1 p-1">
-                                        {viewModes.map((option: any) => (
-                                            <div key={option.value} className={`flex align-items-center ${option.value === view ? 'solid-active-view' : 'solid-view'}`}>
-                                                <RadioButton
-                                                    inputId={option.value}
-                                                    name="views"
-                                                    value={option.value}
-                                                    onChange={(e) => setView(e.value)}
-                                                    checked={option.value === view}
-                                                />
-                                                <label htmlFor={option.value} className="ml-2 flex align-items-center justify-content-between w-full">
-                                                    {option.label}
-                                                    <Image
+                            <Accordion multiple expandIcon="pi pi-chevron-down" collapseIcon="pi pi-chevron-up" activeIndex={[2]}>
+                                {viewModes && viewModes.length > 0 &&
+                                    <AccordionTab header="Switch Type">
+                                        <div className="flex flex-column gap-1 p-1">
+                                            {viewModes.map((option: any) => (
+                                                <div key={option.value} className={`flex align-items-center ${option.value === view ? 'solid-active-view' : 'solid-view'}`}>
+                                                    <RadioButton
+                                                        inputId={option.value}
+                                                        name="views"
+                                                        value={option.value}
+                                                        // onChange={(e) => router}
+                                                        onChange={() => handleViewChange(option.value)}
+                                                        checked={option.value === view}
+                                                    />
+                                                    <label htmlFor={option.value} className="ml-2 flex align-items-center justify-content-between w-full">
+                                                        {option.label}
+                                                        {/* <Image
                                                         src={option.image}
                                                         alt={option.value}
                                                         fill
                                                         className='relative row-spacing-img'
-                                                    />
-                                                </label>
-                                            </div>
-                                        ))}
-                                    </div>
-                                </AccordionTab>
-                                <AccordionTab header="List">
-                                    <div className="flex flex-column gap-1 p-1">
-                                        <p className="m-0 px-3">Row Spacing</p>
+                                                    /> */}
+                                                    </label>
+                                                </div>
+                                            ))}
+                                        </div>
+                                    </AccordionTab>
+                                }
+                                <AccordionTab header="Row Spacing">
+                                    <div className="flex flex-column gap-1 p-1flex flex-column gap-1 p-1">
+                                        {/* <p className="m-0 px-3">Row Spacing</p> */}
                                         {sizeOptions.map((option: any) => (
                                             <div key={option.value} className={`flex align-items-center ${option.value === size ? 'solid-active-view' : 'solid-view'}`}>
                                                 <RadioButton
@@ -182,39 +232,37 @@ export const SolidConfigureLayoutElement = ({ setShowArchived, showArchived, vie
                                         ))}
                                     </div>
                                 </AccordionTab>
-                            </Accordion>
-                        </div>
-                        <Divider className="m-0" />
-                        <div className="pl-3 pt-3 flex align-items-center justify-content-between">
-                            <p className="m-0">Column Selector</p>
-                            {/* <Button text label="Save Layout" icon="pi pi-plus" /> */}
-                        </div>
-                        <div className="flex flex-column gap-3 p-3 cogwheel-column-filter">
-                            {categories.map((category) => {
-                                return (
-                                    <div key={category.key} className="flex align-items-center gap-1">
-                                        <Checkbox
-                                            inputId={category.key}
-                                            name="category"
-                                            value={category}
-                                            onChange={onCategoryChange}
-                                            checked={selectedCategories.some((item) => item.key === category.key)}
-                                            className="text-base"
-                                        />
-                                        <label htmlFor={category.key} className="ml-2 text-base">
-                                            {category.name}
-                                        </label>
+                                <AccordionTab header="Column Selector">
+                                    <div className="flex flex-column gap-1 p-1">
+                                        <div className="flex flex-column gap-3 px-3 cogwheel-column-filter">
+                                            {solidListColumns.map((column) => {
+                                                return (
+                                                    <div key={column.key} className="flex align-items-center gap-1">
+                                                        <Checkbox
+                                                            inputId={column.key}
+                                                            name="column"
+                                                            value={column}
+                                                            onChange={onCategoryChange}
+                                                            checked={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 label="Apply" size="small" />
+                                            <Button outlined label="Cancel" size="small"
+                                                // @ts-ignore
+                                                onClick={(e) => op.current.hide(e)}
+                                            />
+                                        </div>
                                     </div>
-                                );
-                            })}
-                        </div>
-                        <Divider className="m-0" />
-                        <div className="p-3 flex gap-2">
-                            <Button label="Apply" size="small" />
-                            <Button outlined label="Cancel" size="small"
-                                // @ts-ignore
-                                onClick={(e) => op.current.hide(e)}
-                            />
+                                </AccordionTab>
+                            </Accordion>
                         </div>
                     </OverlayPanel>
                 </div>