@solidstarters/solid-core-ui 1.1.56 → 1.1.58

package/dist/resources/globals.css

@@ -2484,7 +2484,7 @@ li.header-li-px {
 
 .custom-filter-chip-type {
   display: flex;
-  align-items: center;  
+  align-items: center;
   padding: 0.25rem 0.5rem !important;
   color: var(--primary-color) !important;
   font-size: 0.875rem !important;
@@ -2967,6 +2967,32 @@ li.header-li-px {
   padding: 9px;
 }
 
+
+.solid-media-card {
+  box-shadow: none;
+  border-radius: 0.5rem;
+  border: 1px solid #E0E0E0;
+  background: #FAFAFA;
+  padding: 9px;
+  height: 100%;
+  transition: 0.2s linear;
+}
+
+.solid-media-card:hover {
+  border: 1px solid #722ED1;
+  background: #F9F0FF;
+}
+
+.solid-mimetype-chip {
+  border-radius: 0.25rem;
+  background: #F0F0F0;
+  padding: 0.25rem 0.5rem;
+  color: var(--secondary-dark-color);
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 16px;
+}
+
 .kanban-group-heading {
   font-weight: 600;
   display: flex;
@@ -3001,6 +3027,30 @@ flex-shrink: 0; */
   box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
 }
 
+
+.kanban-media-image-preview {
+  /* width: 100px; */
+  /* width: 240px;
+height: 120px;
+flex-shrink: 0; */
+  width: 100%;
+  border-radius: 8px;
+  height: 145px;
+  object-fit: contain;
+  background-color: #fff;
+}
+
+.kanban-media-view-card {
+  width: 100%;
+  border-radius: 8px;
+  height: 145px;
+  object-fit: contain;
+  background-color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .kanban-image-preview:hover {
   box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solidstarters/solid-core-ui",
-  "version": "1.1.56",
+  "version": "1.1.58",
   "scripts": {
     "prebuild": "npm run copy-styles",
     "build": "tsc && tsc-alias",

package/src/components/Svg/PDFSvg.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+
+export const PDFSvg = () => {
+    return (
+        <svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M15 10.4147V10.4146C14.9999 5.29959 19.6888 1 25.3892 1H53.5858L77 24.4142V69.5852C77 74.7288 72.5287 78.9999 66.8806 78.9999H25.1406C19.47 78.9999 15 74.7276 15 69.5852V10.4147Z" fill="white" stroke="#DBDBDB" stroke-width="2" />
+            <path d="M54.0513 16.32V0L78 24H62.0342C54.8496 24 53.7187 18.88 54.0513 16.32Z" fill="#D4D4D8" />
+            <rect x="2" y="38" width="52" height="30" rx="6" fill="#E62E05" />
+            <path d="M11.4718 60V46.9091H16.6365C17.6294 46.9091 18.4753 47.0987 19.1742 47.478C19.873 47.853 20.4057 48.375 20.7722 49.044C21.1429 49.7088 21.3283 50.4759 21.3283 51.3452C21.3283 52.2145 21.1408 52.9815 20.7658 53.6463C20.3908 54.3111 19.8475 54.8288 19.1358 55.1996C18.4284 55.5703 17.5719 55.7557 16.5662 55.7557H13.2743V53.5376H16.1188C16.6515 53.5376 17.0904 53.446 17.4355 53.2628C17.785 53.0753 18.0449 52.8175 18.2154 52.4893C18.3901 52.157 18.4775 51.7756 18.4775 51.3452C18.4775 50.9105 18.3901 50.5312 18.2154 50.2074C18.0449 49.8793 17.785 49.6257 17.4355 49.4467C17.0861 49.2635 16.6429 49.1719 16.106 49.1719H14.2395V60H11.4718ZM23.1261 60V46.9091H28.2908C29.2837 46.9091 30.1296 47.0987 30.8285 47.478C31.5273 47.853 32.06 48.375 32.4265 49.044C32.7972 49.7088 32.9826 50.4759 32.9826 51.3452C32.9826 52.2145 32.7951 52.9815 32.4201 53.6463C32.0451 54.3111 31.5018 54.8288 30.7901 55.1996C30.0827 55.5703 29.2262 55.7557 28.2205 55.7557H24.9286V53.5376H27.7731C28.3058 53.5376 28.7447 53.446 29.0898 53.2628C29.4393 53.0753 29.6992 52.8175 29.8697 52.4893C30.0444 52.157 30.1317 51.7756 30.1317 51.3452C30.1317 50.9105 30.0444 50.5312 29.8697 50.2074C29.6992 49.8793 29.4393 49.6257 29.0898 49.4467C28.7404 49.2635 28.2972 49.1719 27.7603 49.1719H25.8938V60H23.1261ZM34.2818 49.1911V46.9091H45.0332V49.1911H41.0254V60H38.2896V49.1911H34.2818Z" fill="white" />
+        </svg>
+    )
+}

package/src/components/core/form/SolidFormUserViewLayout.tsx

@@ -11,7 +11,6 @@ import { Toast } from "primereact/toast";
 
 export const SolidFormUserViewLayout = ({ solidFormViewMetaData, setLayoutDialogVisible }: any) => {
     const toast = useRef<Toast>(null);
-    const { user } = useSelector((state: any) => state.auth);
     const entityApi = createSolidEntityApi("userViewMetadata");
     const { useUpsertSolidEntityMutation } = entityApi;
     const [upsertUserView] = useUpsertSolidEntityMutation();
@@ -40,7 +39,6 @@ export const SolidFormUserViewLayout = ({ solidFormViewMetaData, setLayoutDialog
             try {
                 if (solidView.id) {
                     const response = await upsertUserView({
-                        userId: user?.user?.id,
                         viewMetadataId: solidView.id,
                         layout: JSON.stringify(parsedLayout)
                     }).unwrap();

package/src/components/core/form/SolidFormView.tsx

@@ -44,7 +44,11 @@ import { Panel } from "primereact/panel";
 import { SolidFormStepper } from "@/components/common/SolidFormStepper";
 import { SolidFormHeader } from "@/components/common/SolidFormHeader";
 import { SolidFormUserViewLayout } from "./SolidFormUserViewLayout";
-import { useSelector } from "react-redux";
+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";
 
 export type SolidFormViewProps = {
     moduleName: string;
@@ -90,7 +94,7 @@ const getLayoutFieldsAsObject = (layout: any[]): any => {
     }, {});
 }
 
-const fieldFactory = (type: string, fieldContext: SolidFieldProps): ISolidField | null => {
+const fieldFactory = (type: string, fieldContext: SolidFieldProps, setLightboxUrls?: any, setOpenLightbox?: any): ISolidField | null => {
     if (type === 'shortText') {
         return new SolidShortTextField(fieldContext);
     }
@@ -131,10 +135,10 @@ const fieldFactory = (type: string, fieldContext: SolidFieldProps): ISolidField
         return new SolidRelationField(fieldContext);
     }
     if (type === 'mediaSingle') {
-        return new SolidMediaSingleField(fieldContext);
+        return new SolidMediaSingleField(fieldContext, setLightboxUrls, setOpenLightbox);
     }
     if (type === 'mediaMultiple') {
-        return new SolidMediaMultipleField(fieldContext);
+        return new SolidMediaMultipleField(fieldContext, setLightboxUrls, setOpenLightbox);
     }
     if (type === 'password') {
         return new SolidPasswordField(fieldContext);
@@ -146,7 +150,7 @@ const fieldFactory = (type: string, fieldContext: SolidFieldProps): ISolidField
 }
 
 // solidFieldsMetadata={solidFieldsMetadata} solidView={solidView}
-const SolidField = ({ formik, field, fieldMetadata, initialEntityData, solidFormViewMetaData, modelName, readOnly, viewMode, onChange, onBlur }: any) => {
+const SolidField = ({ formik, field, fieldMetadata, initialEntityData, solidFormViewMetaData, modelName, readOnly, viewMode, onChange, onBlur, setLightboxUrls, setOpenLightbox }: any) => {
     const fieldContext: SolidFieldProps = {
         // field metadata - coming from the field-metadata table.
         fieldMetadata: fieldMetadata,
@@ -162,7 +166,7 @@ const SolidField = ({ formik, field, fieldMetadata, initialEntityData, solidForm
         onChange: onChange,
         onBlur: onBlur
     }
-    const solidField = fieldFactory(fieldMetadata?.type, fieldContext);
+    const solidField = fieldFactory(fieldMetadata?.type, fieldContext, setLightboxUrls, setOpenLightbox);
 
     return solidField?.render(formik);
 };
@@ -344,7 +348,6 @@ const SolidPage = ({ attrs, children, key }: any) => (
 // };
 
 const SolidFormView = (params: SolidFormViewProps) => {
-    const { user } = useSelector((state: any) => state.auth);
     const pathname = usePathname();
     const router = useRouter();
     const toast = useRef<Toast>(null);
@@ -358,7 +361,8 @@ const SolidFormView = (params: SolidFormViewProps) => {
 
     const [actionsAllowed, setActionsAllowed] = useState<string[]>([]);
     const [viewMode, setViewMode] = useState<"view" | "edit">("view");
-
+    const [openLightbox, setOpenLightbox] = useState(false);
+    const [lightboxUrls, setLightboxUrls] = useState([]);
     const errorFields: string[] = [];
 
     const [triggerCheckIfPermissionExists] = useLazyCheckIfPermissionExistsQuery();
@@ -440,7 +444,7 @@ const SolidFormView = (params: SolidFormViewProps) => {
 
     // - - - - - - - - - - - -- - - - - - - - - - - - METADATA here
     // Get the form view layout & metadata first. 
-    const formViewMetaDataQs = qs.stringify({ ...params, viewType: 'form', userId: user?.user?.id }, {
+    const formViewMetaDataQs = qs.stringify({ ...params, viewType: 'form' }, {
         encodeValuesOnly: true,
     });
     const [formViewMetaData, setFormViewMetaData] = useState({});
@@ -659,7 +663,7 @@ const SolidFormView = (params: SolidFormViewProps) => {
             const event: SolidLoadForm = {
                 fieldsMetadata: solidFormViewMetaData,
                 formData: solidFormViewData?.data,
-                type: dynamicHeader,
+                type: 'onFormLayoutLoad',
                 viewMetadata: solidFormViewMetaData?.data?.solidView
             }
             if (dynamicHeader) {
@@ -935,6 +939,8 @@ const SolidFormView = (params: SolidFormViewProps) => {
                             viewMode={viewMode}
                             onChange={formFieldOnXXX}
                             onBlur={formFieldOnXXX}
+                            setLightboxUrls={setLightboxUrls}
+                            setOpenLightbox={setOpenLightbox}
                         />;
                     }
                 }
@@ -1292,6 +1298,14 @@ const SolidFormView = (params: SolidFormViewProps) => {
                 >
                     <SolidFormUserViewLayout solidFormViewMetaData={solidFormViewMetaData} setLayoutDialogVisible={setLayoutDialogVisible} />
                 </Dialog>
+                {openLightbox &&
+                    <Lightbox
+                        open={openLightbox}
+                        plugins={[Counter, Download]}
+                        close={() => setOpenLightbox(false)}
+                        slides={lightboxUrls}
+                    />
+                }
             </div>
         );
     }

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

@@ -19,9 +19,13 @@ import { getExtensionComponent } from "@/helpers/registry";
 export class SolidMediaMultipleField implements ISolidField {
 
     private fieldContext: SolidFieldProps;
-
-    constructor(fieldContext: SolidFieldProps) {
+    private setLightboxUrls?: (urls: { src: string; downloadUrl: string }[]) => void;
+    private setOpenLightbox?: (open: boolean) => void;
+    constructor(fieldContext: SolidFieldProps, setLightboxUrls?: (urls: { src: string; downloadUrl: string }[]) => void,
+        setOpenLightbox?: (open: boolean) => void) {
         this.fieldContext = fieldContext;
+        this.setLightboxUrls = setLightboxUrls;
+        this.setOpenLightbox = setOpenLightbox;
     }
 
     updateFormData(value: any, formData: FormData): any {
@@ -223,7 +227,27 @@ export class SolidMediaMultipleField implements ISolidField {
         const widgetProps = {
             formik: formik,
             fieldContext: this.fieldContext,
+            setLightboxUrls: this.setLightboxUrls,
+            setOpenLightbox: this.setOpenLightbox
         }
+
+        const handleFileView = (url: any) => {
+            if (url?.type.includes('image/')) {
+                this.setLightboxUrls?.([
+                    { src: url.fileUrl, downloadUrl: url.fileUrl },
+                ]);
+                this.setOpenLightbox?.(true);
+            } else {
+                const link = document.createElement('a');
+                link.href = url.fileUrl;
+                link.download = ''; // or specify a file name like 'file.pdf'
+                link.target = '_blank';
+                document.body.appendChild(link);
+                link.click();
+                document.body.removeChild(link);
+            }
+        }
+
         return (
             <>
                 {viewMode === "view" &&
@@ -268,7 +292,7 @@ export class SolidMediaMultipleField implements ISolidField {
                                     <FileReaderExt fileDetails={fileDetails[0]} />
                                     <div className="w-full flex flex-column gap-1">
                                         <div className="flex align-items-center justify-content-between">
-                                            <Link className="font-normal w-11" href={`${fileDetails[0]?.fileUrl}`} target="_blank">{fileDetails[0].name}</Link>
+                                            <p className="font-normal w-9 text-primary m-0" style={{ cursor: 'pointer' }} onClick={() => handleFileView(fileDetails[0])}>{fileDetails[0].name}</p>
                                             <div className="flex align-items-center gap-2">
                                                 <div>
                                                     <Button
@@ -335,7 +359,7 @@ export class SolidMediaMultipleField implements ISolidField {
                                                 <FileReaderExt fileDetails={file} />
                                                 <div className="w-full flex flex-column gap-1">
                                                     <div className="flex align-items-center justify-content-between">
-                                                        <Link className="font-normal w-11" href={file?.fileUrl} target="_blank">{file.name}</Link>
+                                                        <p className="font-normal w-11 text-primary m-0" style={{ cursor: 'pointer' }} onClick={() => handleFileView(file)}>{file.name}</p>
                                                         <div className="flex align-items-center gap-2">
                                                             <div>
                                                                 <Button

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

@@ -19,9 +19,13 @@ import { getExtensionComponent } from "@/helpers/registry";
 export class SolidMediaSingleField implements ISolidField {
 
     private fieldContext: SolidFieldProps;
-
-    constructor(fieldContext: SolidFieldProps) {
+    private setLightboxUrls?: (urls: { src: string; downloadUrl: string }[]) => void;
+    private setOpenLightbox?: (open: boolean) => void;
+    constructor(fieldContext: SolidFieldProps, setLightboxUrls?: (urls: { src: string; downloadUrl: string }[]) => void,
+        setOpenLightbox?: (open: boolean) => void) {
         this.fieldContext = fieldContext;
+        this.setLightboxUrls = setLightboxUrls;
+        this.setOpenLightbox = setOpenLightbox;
     }
 
     updateFormData(value: any, formData: FormData): any {
@@ -217,6 +221,25 @@ export class SolidMediaSingleField implements ISolidField {
         const widgetProps = {
             formik: formik,
             fieldContext: this.fieldContext,
+            setLightboxUrls: this.setLightboxUrls,
+            setOpenLightbox: this.setOpenLightbox
+        }
+
+        const handleFileView = (url: any) => {
+            if (url?.type.includes('image/')) {
+                this.setLightboxUrls?.([
+                    { src: url.fileUrl, downloadUrl: url.fileUrl },
+                ]);
+                this.setOpenLightbox?.(true);
+            } else {
+                const link = document.createElement('a');
+                link.href = url.fileUrl;
+                link.download = ''; // or specify a file name like 'file.pdf'
+                link.target = '_blank';
+                document.body.appendChild(link);
+                link.click();
+                document.body.removeChild(link);
+            }
         }
 
         return (
@@ -262,7 +285,7 @@ export class SolidMediaSingleField implements ISolidField {
                                         <FileReaderExt fileDetails={fileDetails} />
                                         <div className="w-full flex flex-column gap-1">
                                             <div className="flex align-items-start justify-content-between">
-                                                <Link className="font-normal w-9 text-primary" href={fileDetails.fileUrl} target="_blank">{fileDetails.name}</Link>
+                                                <p className="font-normal w-9 text-primary m-0" style={{ cursor: 'pointer' }} onClick={() => handleFileView(fileDetails)}>{fileDetails.name}</p>
                                                 <div className="flex align-items-center gap-2">
                                                     <div>
                                                         <Button

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

@@ -144,12 +144,18 @@ export class SolidRelationOneToManyField implements ISolidField {
 
         const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
         const viewMode: string = this.fieldContext.viewMode;
+
+        const userKeyFieldName = fieldMetadata.relationModel?.userKeyField?.name;
+
         let DynamicWidget = getExtensionComponent("SolidFormFieldRelationViewModeWidget");
         const widgetProps = {
             label: fieldLabel,
-            value: formik.values[fieldLayoutInfo.attrs.name],
+            value: (this.fieldContext.data[fieldLayoutInfo.attrs.name] || []).map(
+                (item: any) => ({ label: item[userKeyFieldName] ?? '' })
+            )
         }
 
+
         return (
             <>
                 {viewMode === "view" &&

package/src/components/core/form/fields/widgets/SolidFormFieldViewMediaMultipleWidget.tsx

@@ -7,7 +7,7 @@ import { downloadMediaFile } from "@/helpers/downloadMediaFile";
 import { SolidMediaSingleFieldWidgetProps } from "@/types/solid-core";
 import { Dialog } from "primereact/dialog";
 
-export const SolidFormFieldViewMediaMultipleWidget = ({ formik, fieldContext }: SolidMediaSingleFieldWidgetProps) => {
+export const SolidFormFieldViewMediaMultipleWidget = ({ formik, fieldContext, setLightboxUrls, setOpenLightbox }: SolidMediaSingleFieldWidgetProps) => {
     const [fileDetails, setFileDetails] = useState<{ name: string; type: string; size: number, id: number, fileUrl: string }[]>([]);
     const [isShowAllFiles, setShowAllFiles] = useState(false);
     const fieldMetadata = fieldContext.fieldMetadata;
@@ -60,6 +60,23 @@ export const SolidFormFieldViewMediaMultipleWidget = ({ formik, fieldContext }:
         }
     }, [formik.values, fieldLayoutInfo.attrs.name]);
 
+    const handleFileView = (url: any) => {
+        if (url?.type.includes('image/')) {
+            setLightboxUrls?.([
+                { src: url.fileUrl, downloadUrl: url.fileUrl },
+            ]);
+            setOpenLightbox?.(true);
+        } else {
+            const link = document.createElement('a');
+            link.href = url.fileUrl;
+            link.download = ''; // or specify a file name like 'file.pdf'
+            link.target = '_blank';
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+        }
+    }
+
     return (
         <div className={className}>
             {showFieldLabel != false &&
@@ -72,7 +89,7 @@ export const SolidFormFieldViewMediaMultipleWidget = ({ formik, fieldContext }:
                         <FileReaderExt fileDetails={fileDetails[0]} />
                         <div className="w-full flex flex-column gap-1">
                             <div className="flex align-items-center justify-content-between">
-                                <Link className="font-normal w-11" href={`${fileDetails[0]?.fileUrl}`} target="_blank">{fileDetails[0].name}</Link>
+                                <p className="font-normal w-11 text-primary m-0" style={{ cursor: 'pointer' }} onClick={() => handleFileView(fileDetails[0])}>{fileDetails[0].name}</p>
                                 <div className="flex align-items-center gap-2">
                                     <div>
                                         <Button
@@ -124,7 +141,7 @@ export const SolidFormFieldViewMediaMultipleWidget = ({ formik, fieldContext }:
                                     <FileReaderExt fileDetails={file} />
                                     <div className="w-full flex flex-column gap-1">
                                         <div className="flex align-items-center justify-content-between">
-                                            <Link className="font-normal w-11" href={file?.fileUrl} target="_blank">{file.name}</Link>
+                                            <p className="font-normal w-11" style={{ cursor: 'pointer' }} onClick={() => handleFileView(file)}>{file.name}</p>
                                             <div className="flex align-items-center gap-2">
                                                 <div>
                                                     <Button

package/src/components/core/form/fields/widgets/SolidFormFieldViewMediaSingleWidget.tsx

@@ -6,7 +6,7 @@ import Link from "next/link";
 import { downloadMediaFile } from "@/helpers/downloadMediaFile";
 import { SolidMediaSingleFieldWidgetProps } from "@/types/solid-core";
 
-export const SolidFormFieldViewMediaSingleWidget = ({ formik, fieldContext }: SolidMediaSingleFieldWidgetProps) => {
+export const SolidFormFieldViewMediaSingleWidget = ({ formik, fieldContext, setLightboxUrls, setOpenLightbox }: SolidMediaSingleFieldWidgetProps) => {
     const [fileDetails, setFileDetails] = useState<{ name: string; type: string, fileUrl: string, fileSize: number } | null>(null);
     const fieldMetadata = fieldContext.fieldMetadata;
     const fieldLayoutInfo = fieldContext.field;
@@ -52,6 +52,23 @@ export const SolidFormFieldViewMediaSingleWidget = ({ formik, fieldContext }: So
         }
     }, [formik.values, fieldLayoutInfo.attrs.name]);
 
+    const handleFileView = (url: any) => {
+        if (url?.type.includes('image/')) {
+            setLightboxUrls?.([
+                { src: url.fileUrl, downloadUrl: url.fileUrl },
+            ]);
+            setOpenLightbox?.(true);
+        } else {
+            const link = document.createElement('a');
+            link.href = url.fileUrl;
+            link.download = ''; // or specify a file name like 'file.pdf'
+            link.target = '_blank';
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+        }
+    }
+
     return (
         <div className={className}>
             <div className="flex flex-column gap-2 mt-4 relative">
@@ -66,7 +83,7 @@ export const SolidFormFieldViewMediaSingleWidget = ({ formik, fieldContext }: So
                             <FileReaderExt fileDetails={fileDetails} />
                             <div className="w-full flex flex-column gap-1">
                                 <div className="flex align-items-start justify-content-between">
-                                    <Link className="font-normal w-9 text-primary" href={fileDetails.fileUrl} target="_blank">{fileDetails.name}</Link>
+                                    <p className="font-normal w-9 text-primary m-0" style={{ cursor: 'pointer' }} onClick={() => handleFileView(fileDetails)}>{fileDetails.name}</p>
                                     <div className="flex align-items-center gap-2">
                                         <div>
                                             <Button

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

@@ -21,7 +21,7 @@ interface KanbanCardProps {
 }
 
 // Render columns dynamically based on metadata
-const renderFieldsDynamically = (field: any, data: any, solidKanbanViewMetaData: any, setLightboxUrls?: any, setOpenLightbox?: any) => {
+const renderFieldsDynamically = (field: any, data: any, solidKanbanViewMetaData: any, setLightboxUrls?: any, setOpenLightbox?: any, groupedView: boolean) => {
   if (!solidKanbanViewMetaData) {
     return;
   }
@@ -33,7 +33,7 @@ const renderFieldsDynamically = (field: any, data: any, solidKanbanViewMetaData:
   }
   const fieldMetadata = solidFieldsMetadata[field.attrs.name];
   const fieldLayout = field;
-  return SolidKanbanViewFields({ solidKanbanViewMetaData, fieldMetadata, fieldLayout, data, setLightboxUrls, setOpenLightbox });
+  return SolidKanbanViewFields({ solidKanbanViewMetaData, fieldMetadata, fieldLayout, data, setLightboxUrls, setOpenLightbox, groupedView });
   // return solidView.layout.children?.map((column: any) => {
   //   const fieldMetadata = solidFieldsMetadata[column.attrs.name];
   //   if (!fieldMetadata) {
@@ -45,7 +45,7 @@ const renderFieldsDynamically = (field: any, data: any, solidKanbanViewMetaData:
   // });
 };
 
-const KanbanCard: React.FC<KanbanCardProps> = ({ data, solidKanbanViewMetaData, index, setLightboxUrls, setOpenLightbox, editButtonUrl }) => {
+const KanbanCard: React.FC<KanbanCardProps> = ({ data, solidKanbanViewMetaData, index, setLightboxUrls, setOpenLightbox, editButtonUrl, groupedView }) => {
   const router = useRouter()
 
   const SolidRow = ({ children, attrs }: any) => {
@@ -104,7 +104,7 @@ const KanbanCard: React.FC<KanbanCardProps> = ({ data, solidKanbanViewMetaData,
 
   const SolidField = ({ field, data, solidKanbanViewMetaData }: any) => {
 
-    return renderFieldsDynamically(field, data, solidKanbanViewMetaData, setLightboxUrls, setOpenLightbox)
+    return renderFieldsDynamically(field, data, solidKanbanViewMetaData, setLightboxUrls, setOpenLightbox, groupedView)
     // switch (solidKanbanViewMetaData[field.attrs.name].type) {
     //   case "mediaSingle":
     //     return <img src=""></img>
@@ -164,7 +164,7 @@ const KanbanCard: React.FC<KanbanCardProps> = ({ data, solidKanbanViewMetaData,
 
 
   return (
-    <Draggable draggableId={String(data.id)} index={index}>
+    <Draggable draggableId={String(data.id)} index={index} isDragDisabled={!groupedView}>
       {(provided: DraggableProvided, snapshot) => (
         <div
           className=""
@@ -180,9 +180,10 @@ const KanbanCard: React.FC<KanbanCardProps> = ({ data, solidKanbanViewMetaData,
             style={{
               opacity: snapshot.isDragging ? 0.9 : 1,
               transform: snapshot.isDragging ? "rotate(-2deg)" : "",
+              cursor:'pointer'
             }}
             elevation={snapshot.isDragging ? 3 : 1}
-            className="solid-kanban-card"
+            className={`${!groupedView ? 'solid-media-card' : 'solid-kanban-card'}`}
             onClick={() =>
               router.push(`${editButtonUrl}/${data?.id}`)
             }

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

@@ -60,7 +60,7 @@ const KanbanColumn = ({ groupedView, groupByField, solidKanbanViewMetaData, grou
             </div>
           }
           {!group.folded &&
-              <Button
+            <Button
               onClick={(e: any) => op?.current?.toggle(e)}
               icon='pi pi-cog'
               text
@@ -110,7 +110,7 @@ const KanbanColumn = ({ groupedView, groupByField, solidKanbanViewMetaData, grou
         </div>
       }
       {!group.folded && (
-        <Droppable droppableId={groupByField}>
+        <Droppable droppableId={groupByField} isDropDisable={!groupedView}>
           {(provided: DroppableProvided) => (
             <div
               ref={provided.innerRef}
@@ -119,16 +119,14 @@ const KanbanColumn = ({ groupedView, groupByField, solidKanbanViewMetaData, grou
               className={groupedView === false && "kanban-ungrouped-column-content"}
             >
               {groupData.map((data, index) => (
-                <KanbanCard key={data.id} data={data} solidKanbanViewMetaData={solidKanbanViewMetaData} index={index} setLightboxUrls={setLightboxUrls} setOpenLightbox={setOpenLightbox}  editButtonUrl={editButtonUrl}/>
+                <KanbanCard groupedView={groupedView} key={data.id} data={data} solidKanbanViewMetaData={solidKanbanViewMetaData} index={index} setLightboxUrls={setLightboxUrls} setOpenLightbox={setOpenLightbox} editButtonUrl={editButtonUrl} />
               ))}
               {provided.placeholder}
               {group.count > 0 && (group.count > (group.limit * group.currentPage)) &&
-                <a
-                  className="load-more-button"
+                <Button text className="kaban-load-more" size="small"
                   onClick={() => handleLoadMore(groupByField)}
-                >
-                  Load more data... ({group.count - (group.limit * group.currentPage)} remaining)
-                </a>
+                  label={`Load more data... ( ${group.count - (group.limit * group.currentPage)} remaining)`}
+                />
               }
             </div>
           )}

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

@@ -11,7 +11,6 @@ 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();
@@ -40,7 +39,6 @@ export const KanbanUserViewLayout = ({ solidKanbanViewMetaData, setLayoutDialogV
             try {
                 if (solidView.id) {
                     const response = await upsertUserView({
-                        userId: user?.user?.id,
                         viewMetadataId: solidView.id,
                         layout: JSON.stringify(parsedLayout),
                     }).unwrap();

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

@@ -29,7 +29,6 @@ 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";
 
 
 
@@ -41,7 +40,6 @@ 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();
@@ -121,7 +119,7 @@ export const SolidKanbanView = (params: SolidKanbanViewParams) => {
   } = entityApi;
 
   // Get the kanban view layout & metadata first. 
-  const kanbanViewMetaDataQs = qs.stringify({ ...params, viewType: 'kanban', userId: user?.user?.id }, {
+  const kanbanViewMetaDataQs = qs.stringify({ ...params, viewType: 'kanban' }, {
     encodeValuesOnly: true,
   });
   const [kanbanViewMetaData, setKanbanViewMetaData] = useState<any>({});

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

@@ -71,7 +71,7 @@ export const SolidKanbanViewConfigure = ({ solidKanbanViewMetaData, actionsAllow
                         <Button
                             text
                             type="button"
-                            className="w-8rem text-left gap-2 purple-200"
+                            className="w-8rem text-left text-base gap-2 purple-200"
                             label="Layout"
                             size="small"
                             iconPos="left"