@solidstarters/solid-core-ui 1.1.38 → 1.1.41

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

@@ -0,0 +1,59 @@
+import { createSolidEntityApi } from "@/redux/api/solidEntityApi";
+import { InputTypes } from "./SolidVarInputsFilterElement"
+import { AutoComplete, AutoCompleteCompleteEvent } from "primereact/autocomplete";
+import { useState } from "react";
+import qs from "qs";
+
+
+export const SolidManyToOneFilterElement = ({ value, updateInputs, index, fieldMetadata }: any) => {
+
+    const entityApi = createSolidEntityApi(fieldMetadata.relationCoModelSingularName);
+    const { useLazyGetSolidEntitiesQuery } = entityApi;
+    const [triggerGetSolidEntities] = useLazyGetSolidEntitiesQuery();
+
+    const [autoCompleteItems, setAutoCompleteItems] = useState([]);
+    const autoCompleteSearch = async (event: AutoCompleteCompleteEvent) => {
+
+        // Get the list view layout & metadata first. 
+        const queryData = {
+            offset: 0,
+            limit: 10,
+            filters: {
+                [fieldMetadata?.relationModel?.userKeyField?.name]: {
+                    $containsi: event.query
+                }
+            }
+        };
+
+        const autocompleteQs = qs.stringify(queryData, {
+            encodeValuesOnly: true,
+        });
+
+        // TODO: do error handling here, possible errors like modelname is incorrect etc...
+        const autocompleteResponse = await triggerGetSolidEntities(autocompleteQs);
+
+        // TODO: if no data found then can we show no matching "entities", where entities can be replaced with the model plural name,
+        const autocompleteData = autocompleteResponse.data;
+
+        if (autocompleteData) {
+            const autoCompleteItems = autocompleteData.records.map((item: any) => {
+                return {
+                    label: item[fieldMetadata?.relationModel?.userKeyField?.name],
+                    value: item['id']
+                }
+            });
+            setAutoCompleteItems(autoCompleteItems);
+        }
+    }
+
+    return (
+        <AutoComplete
+            field="label"
+            value={value}
+            suggestions={autoCompleteItems}
+            completeMethod={autoCompleteSearch}
+            onChange={(e) => updateInputs(index, e.value)}
+            className="solid-standard-autocomplete"
+        />
+    )
+}

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

@@ -0,0 +1,50 @@
+'use client';
+import { useLazyGetSelectionDynamicValuesQuery } from "@/redux/api/fieldApi";
+import { AutoComplete, AutoCompleteCompleteEvent } from "primereact/autocomplete";
+import qs from "qs";
+import { useState } from "react";
+
+
+export const SolidSelectionDynamicFilterElement = ({ value, updateInputs, index, fieldMetadata }: any) => {
+
+
+    // selection dynamic specific code. 
+    const [triggerGetSelectionDynamicValues] = useLazyGetSelectionDynamicValuesQuery();
+    const [selectionDynamicItems, setSelectionDynamicItems] = useState([]);
+    const selectionDynamicSearch = async (event: AutoCompleteCompleteEvent) => {
+
+        // Get the list view layout & metadata first. 
+        const queryData = {
+            offset: 0,
+            limit: 10,
+            query: event.query,
+            id: fieldMetadata.id
+        };
+
+        const sdQs = qs.stringify(queryData, {
+            encodeValuesOnly: true,
+        });
+
+        // TODO: do error handling here, possible errors like modelname is incorrect etc...
+        const sdResponse = await triggerGetSelectionDynamicValues(sdQs);
+
+        // TODO: if no data found then can we show no matching "entities", where entities can be replaced with the model plural name,
+        const sdData = sdResponse.data.data;
+
+        // @ts-ignore
+        setSelectionDynamicItems(sdData);
+    }
+
+
+    return (
+
+        <AutoComplete
+            field="label"
+            value={value}
+            dropdown
+            className="w-full solid-standard-autocomplete"
+            suggestions={selectionDynamicItems}
+            completeMethod={selectionDynamicSearch}
+            onChange={(e) => updateInputs(index, e.value)} />
+    )
+}

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

@@ -0,0 +1,32 @@
+'use client';
+import { AutoComplete, AutoCompleteCompleteEvent } from "primereact/autocomplete";
+import { useState } from "react";
+
+
+export const SolidSelectionStaticFilterElement = ({ value, updateInputs, index, fieldMetadata }: any) => {
+
+    // selection dynamic specific code. 
+    const [selectionStaticItems, setSelectionStaticItems] = useState([]);
+    const selectionStaticSearch = (event: AutoCompleteCompleteEvent) => {
+        const selectionStaticData = fieldMetadata.selectionStaticValues.map((i: string) => {
+            return {
+                label: i.split(":")[1],
+                value: i.split(":")[0]
+            }
+        });
+        const suggestionData = selectionStaticData.filter((t: any) => t.value.toLowerCase().startsWith(event.query.toLowerCase()));
+        setSelectionStaticItems(suggestionData)
+    }
+
+    return (
+
+        <AutoComplete
+            field="label"
+            value={value}
+            dropdown
+            className="w-full solid-standard-autocomplete"
+            suggestions={selectionStaticItems}
+            completeMethod={selectionStaticSearch}
+            onChange={(e) => updateInputs(index, e.value)} />
+    )
+}

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

@@ -0,0 +1,184 @@
+'use client';
+import { Button } from "primereact/button";
+import { Calendar } from "primereact/calendar";
+import { InputNumber } from "primereact/inputnumber";
+import { InputText } from "primereact/inputtext";
+import { useEffect, useState } from "react";
+import { SolidManyToOneFilterElement } from "./SolidManyToOneFilterElement";
+import { SolidSelectionDynamicFilterElement } from "./SolidSelectionDynamicFilterElement";
+import { SolidSelectionStaticFilterElement } from "./SolidSelectionStaticFilterElement";
+
+export enum InputTypes {
+    Date = 'Date',
+    DateTime = 'DateTime',
+    Time = 'Time',
+    Numeric = 'Numeric',
+    Text = 'Text',
+    SelectionStatic = 'SelectionStatic',
+    RelationManyToOne = 'RelationManyToOne',
+    SelectionDynamic = 'SelectionDynamic'
+}
+
+
+// Based on numberOfInputs map the input filed and hide add and delete 
+export const SolidVarInputsFilterElement = ({ values, onChange, inputType = InputTypes.Text, numberOfInputs = null, solidKanbanViewMetaData, fieldMetadata }: any) => {
+
+    if (!values) {
+        values = numberOfInputs && numberOfInputs > 0 ? Array(numberOfInputs).fill('') : [''];
+        // values = [''];
+    } else {
+        if (values[0] == '') {
+            values = numberOfInputs && numberOfInputs > 0 ? Array(numberOfInputs).fill('') : [''];
+        } else {
+
+            values = values
+        }
+    }
+
+    
+
+    // TODO: Ideally values will be an array, so we can spread them here instead of making a nested array.
+    const [inputs, setInputs] = useState([...values]);
+    useEffect(() => {
+        setInputs([...values])
+    }, [numberOfInputs])
+
+    const updateInputs = (index: number, value: any) => {
+        const updatedSpecification = inputs.map((item, i) =>
+            i === index ? value : item
+        );
+        setInputs(updatedSpecification);
+    };
+
+    const addInput = () => {
+        setInputs([...inputs, '']);
+    };
+
+    const deleteInput = (index: number) => {
+        if (inputs.length > 1) {
+            const updatedRows = inputs.filter((_, rowIndex) => rowIndex !== index);
+            setInputs(updatedRows);
+
+        } else {
+        }
+    };
+
+    useEffect(() => {
+        onChange(inputs)
+    }, [inputs])
+
+
+
+    return (
+        <div className="grid formgrid">
+            <div className="col-12">
+                <div className="flex flex-column gap-2">
+                    {inputs && inputs.map((value: any, index: number) => (
+
+                        <div key={index} className="flex align-items-center gap-2">
+
+                            {inputType === InputTypes.Text &&
+                                <InputText
+                                    value={value}
+                                    onChange={(e) => updateInputs(index, e.target.value)}
+                                    placeholder=""
+                                    className="p-inputtext-sm small-input w-full"
+                                />
+                            }
+                            {inputType === InputTypes.Numeric &&
+                                <InputNumber
+                                    value={value}
+                                    onChange={(e) => updateInputs(index, e.value)}
+                                    placeholder=""
+                                    className="p-inputtext-sm small-input w-full"
+                                />
+                            }
+                            {inputType === InputTypes.Date &&
+                                <Calendar
+                                    value={value}
+                                    onChange={(e) => updateInputs(index, e.target.value)}
+                                    dateFormat="mm/dd/yy"
+                                    placeholder="mm/dd/yyyy"
+                                    mask="99/99/9999"
+                                />
+                            }
+                            {inputType === InputTypes.DateTime &&
+                                <Calendar
+                                    value={value}
+                                    onChange={(e) => updateInputs(index, e.target.value)}
+                                    dateFormat="mm/dd/yy"
+                                    placeholder="mm/dd/yyyy hh:mm"
+                                    mask="99/99/9999 99:99"
+                                    showTime
+                                    hourFormat="24"
+                                />
+                            }
+                            {inputType === InputTypes.Time &&
+                                <Calendar
+                                    value={value}
+                                    onChange={(e) => updateInputs(index, e.target.value)}
+                                    placeholder="hh:mm"
+                                    mask="99:99"
+                                    timeOnly
+                                    hourFormat="24"
+                                />
+                            }
+                            {inputType === InputTypes.RelationManyToOne &&
+                                <SolidManyToOneFilterElement
+                                    value={value}
+                                    index={index}
+                                    updateInputs={updateInputs}
+                                    fieldMetadata={fieldMetadata}
+                                ></SolidManyToOneFilterElement>
+                            }
+                            {inputType === InputTypes.SelectionDynamic &&
+                                <SolidSelectionDynamicFilterElement
+                                    value={value}
+                                    index={index}
+                                    updateInputs={updateInputs}
+                                    fieldMetadata={fieldMetadata}
+                                ></SolidSelectionDynamicFilterElement>
+                            }
+                            {inputType === InputTypes.SelectionStatic &&
+
+                                <SolidSelectionStaticFilterElement
+                                    value={value}
+                                    index={index}
+                                    updateInputs={updateInputs}
+                                    fieldMetadata={fieldMetadata}
+                                ></SolidSelectionStaticFilterElement>
+                            }
+
+                            {numberOfInputs === null &&
+                                <>
+                                    {/* Plus Button to add a new row */}
+                                    < Button
+                                        icon="pi pi-plus"
+                                        size="small"
+                                        className="small-button"
+                                        onClick={addInput}
+                                        type="button"
+                                    />
+
+                                    {/* Trash Button to delete the row */}
+                                    <Button
+                                        icon="pi pi-trash"
+                                        size="small"
+                                        className="small-button"
+                                        onClick={() => deleteInput(index)}
+                                        outlined
+                                        severity="danger"
+                                        type="button"
+                                    />
+                                </>
+                            }
+                        </div>
+
+                    ))}
+
+                </div>
+
+            </div>
+        </div>
+    )
+}

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

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

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

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

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

@@ -0,0 +1,23 @@
+'use client';
+import { SolidKanbanViewFieldsParams } from '../SolidKanbanViewFields';
+import SolidDateKanbanField from './SolidDateKanbanField';
+import SolidDatetimeKanbanField from './SolidDatetimeKanbanField';
+import SolidIntKanbanField from './SolidIntKanbanField';
+import SolidShortTextKanbanField from './SolidShortTextKanbanField';
+
+const SolidComputedKanbanField = ({ solidKanbanViewMetaData, fieldMetadata, fieldLayout,data }: SolidKanbanViewFieldsParams) => {
+    if (['text', 'string'].includes(fieldMetadata.computedFieldValueType)) {
+        return SolidShortTextKanbanField({ solidKanbanViewMetaData, fieldMetadata, fieldLayout,data });
+    }
+    if (['int', 'decimal'].includes(fieldMetadata.computedFieldValueType)) {
+        return SolidIntKanbanField({ solidKanbanViewMetaData, fieldMetadata, fieldLayout,data });
+    }
+    if (fieldMetadata.computedFieldValueType === 'date') {
+        return SolidDateKanbanField({ solidKanbanViewMetaData, fieldMetadata, fieldLayout,data });
+    }
+    if (fieldMetadata.computedFieldValueType === 'datetime') {
+        return SolidDatetimeKanbanField({ solidKanbanViewMetaData, fieldMetadata, fieldLayout,data });
+    }
+};
+
+export default SolidComputedKanbanField;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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;