@solidstarters/solid-core-ui 1.1.211 → 1.1.212

package/dist/components/common/AuthBanner.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+const AuthBanner = () => {
+  return (
+    <div
+      style={{
+        position: "relative",
+        width: "100%",
+        height: "calc(100vh)",
+        background: 'url(/images/loginhero.png)',
+        // background: 'url(/images/LoginBanner.png)',
+        backgroundSize: 'cover',
+        marginTop: process.env.ENABLE_CUSTOM_HEADER_FOOTER === "true" ? 70 : 0
+      }}
+      className="flex align-items-center"
+    >
+      <div className="grid m-0">
+        <div className="col-8 mx-auto">
+          <div className="text-5xl text-white font-semibold line-height-3">
+            {process.env.SOLID_APP_TITLE}
+          </div>
+          <div className="text-sm text-white line-height-3">
+            {process.env.NEXT_PUBLIC_SOLID_APP_DESCRIPTION}
+          </div>
+          <div className="mt-5">
+            {/* <AvatarGroup>
+              <Avatar image="/images/AvatarDemo.png" size="large" shape="circle" />
+              <Avatar image="/images/AvatarDemo.png" size="large" shape="circle" />
+              <Avatar image="/images/AvatarDemo.png" size="large" shape="circle" />
+              <Avatar image="/images/AvatarDemo.png" size="large" shape="circle" />
+              <Avatar image="/images/AvatarDemo.png" size="large" shape="circle" />
+              <Avatar label="60k+" shape="circle" size="large" className="text-sm text-bold" style={{ color: '#191866', backgroundColor: '#fff' }} />
+            </AvatarGroup> */}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AuthBanner;

package/dist/components/common/AutoCompleteField.tsx

@@ -0,0 +1,79 @@
+'use client';
+
+import { AutoComplete } from "primereact/autocomplete";
+import { useEffect, useState } from "react";
+import { getVirtualScrollerOptions } from "../../helpers/autoCompleteVirtualScroll";
+
+
+
+export const AutoCompleteField = ({ multiple, isFormFieldValid, formik, fieldName, searchData, existingData, existingDataTitle, existingDataId, onBlur }: any) => {
+
+
+
+
+    const [selectedItem, setSelectedItem] = useState(existingData);
+    const [filteredItem, setFilteredItem] = useState([]);
+    useEffect(() => {
+        if (existingData) {
+            setSelectedItem(existingData)
+            // formik.setFieldValue(fieldName, existingData);
+
+        }
+    }, [existingData])
+    const searchItems = async (event: any) => {
+        const data = await searchData(event);
+        setFilteredItem(data);
+    };
+
+
+    return (
+
+        <AutoComplete
+            value={selectedItem}
+            multiple={multiple ? multiple : false}
+            suggestions={filteredItem}
+            invalid={isFormFieldValid(formik, fieldName)}
+            completeMethod={searchItems}
+            // virtualScrollerOptions={{ itemSize: 38 }}
+            virtualScrollerOptions={getVirtualScrollerOptions({
+                itemsLength: filteredItem.length,
+              })}
+            className="solid-standard-autocomplete w-full"
+            // style={{
+            //     maxHeight: 39.67
+            // }}
+            field="label"
+            dropdown
+            onBlur={onBlur}
+            onChange={(e) => {
+                let data = {};
+
+              
+                if (typeof (e.value) == "string") {
+                    data = e.value
+                } else {
+                    if (multiple === true) {
+                        data = e.value.map((m: any) =>
+                        ({
+                            label: m.label,
+                            name: m.label,
+                            value: m.value,
+                            id: m.value,
+                        }))
+                    } else {
+                        data = {
+                            label: e.value.label,
+                            name: e.value.label,
+                            value: e.value.value,
+                            id: e.value.value,
+                        }
+                    }
+                }
+
+
+                setSelectedItem(data);
+                formik.setFieldValue(fieldName, data);
+            }}
+        />
+    )
+}

package/dist/components/common/BackButton.tsx

@@ -0,0 +1,72 @@
+"use client"
+
+import { usePathname, useRouter } from 'next/navigation';
+import { Button } from 'primereact/button';
+import { useEffect, useState } from 'react';
+export const BackButton = () => {
+    const router = useRouter();
+    const pathname = usePathname();
+    const segments = pathname.split("/").filter(Boolean);
+
+    // const handleGoBack = () => {
+    //     let fromView: string | null = null;
+    //     fromView = sessionStorage.getItem("fromView");
+    //     if (fromView) {
+    //         router.push(fromView);
+    //     } else {
+    //         // fallback if path is not matched
+    //         router.back();
+    //     }
+    // };
+
+
+    // const [fromView, setFromView] = useState<"list" | "kanban" | null>(null);
+
+    // useEffect(() => {
+    //     if (typeof window !== "undefined") {
+    //         const storedView = sessionStorage.getItem("fromView");
+    //         if (storedView === "list" || storedView === "kanban") {
+    //             setFromView(storedView);
+    //         }
+    //     }
+    // }, []);
+
+    const handleGoBack = () => {
+        if (segments.length >= 4 && segments[0] === "admin" && segments[1] === "core") {
+            const moduleName = segments[2];
+            const modelName = segments[3];
+            // Prefer a fully qualified stored return URL (preserves query params like actionId/actionName)
+            if (typeof window !== "undefined") {
+                const storedFullUrl = sessionStorage.getItem("fromViewUrl");
+                if (storedFullUrl) {
+                    router.push(storedFullUrl);
+                    return;
+                }
+            }
+
+            const storedView = sessionStorage.getItem("fromView");
+            let fromView = "list"
+            if (storedView === "list" || storedView === "kanban") {
+                fromView = storedView;
+            }
+            const targetView = fromView || "list";
+            const targetUrl = `/admin/core/${moduleName}/${modelName}/${targetView}`;
+            router.push(targetUrl);
+        } else {
+            // fallback if path is not matched
+            router.back();
+        }
+    };
+
+    return (
+        <Button
+            text
+            icon='pi pi-arrow-left'
+            size="small"
+            type="button"
+            aria-label="Back"
+            onClick={handleGoBack}
+            className='max-w-2rem bg-primary-reverse text-color solid-icon-button'
+        />
+    )
+}

package/dist/components/common/CancelButton.tsx

@@ -0,0 +1,61 @@
+"use client"
+
+import { usePathname, useRouter } from 'next/navigation';
+import { Button } from 'primereact/button';
+
+
+export const CancelButton = () => {
+    const router = useRouter();
+    const pathname = usePathname(); // Get the current path
+
+    const handleGoBack = () => {
+        const segments = pathname.split('/').filter(Boolean); // Split and filter empty segments
+        if (segments.length > 1) {
+            // const newPath = '/' + segments.slice(0, -1).join('/') + '/all'; // Remove last segment and add "/all"
+            // router.push(newPath); // Navigate to the parent route with "/all"            
+            router.back()
+        }
+    };
+    return (
+        <div>
+            <Button outlined size="small" type="button" label="Close" onClick={handleGoBack} className='bg-primary-reverse' style={{ minWidth: 66 }} />
+        </div>
+    )
+}
+
+export const SolidCancelButton = () => {
+    const router = useRouter();
+    const pathname = usePathname(); // Get the current path
+
+    const handleGoBack = () => {
+        let fromView: string | null = null;
+        if (typeof window !== "undefined") {
+            fromView = sessionStorage.getItem("fromView");
+        }
+
+        // Default to 'list' if not available
+        const view = fromView === "kanban" ? "kanban" : "list";
+
+        // Navigate back to the previous path with the appropriate view type
+        const newPath = pathname.replace(/\/form\/[^/]+$/, `/${view}`);
+        router.push(newPath);
+        // fromView = sessionStorage.getItem("fromView");
+        // if (fromView) {
+        //     router.push(fromView);
+        // } else {
+        //     // fallback if path is not matched
+        //     router.back();
+        // }
+    };
+    return (
+        <>
+            {/* <div className="hidden lg:flex"> */}
+            {/* <div> */}
+            <Button outlined size="small" type="button" label="Close" onClick={handleGoBack} className='bg-primary-reverse hidden lg:flex' style={{ minWidth: 66 }} />
+            {/* </div> */}
+            {/* </div> */}
+            <Button size="small" type="button" icon="pi pi-times" onClick={handleGoBack} className='bg-primary-reverse solid-icon-button flex lg:hidden' />
+        </>
+    )
+}
+

package/dist/components/common/CodeEditor.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import { javascript } from '@codemirror/lang-javascript';
+import { oneDark } from '@codemirror/theme-one-dark';
+import CodeMirror, { EditorView } from '@uiw/react-codemirror'; // Correct import
+
+const CodeEditor = ({ formik, field, height, fontSize, readOnly }: any) => {
+  let code;
+  const value = formik?.values[field];
+
+  if (value == null) {
+    // null or undefined → empty string
+    code = "";
+  } else if (typeof value === "string") {
+    code = value;
+  } else {
+    code = JSON.stringify(value, null, 2);
+  }
+
+
+  return (
+    <CodeMirror
+      id={field}
+      value={code}
+      height={height ?? '300px'}
+      style={{ fontSize: fontSize ?? '10px' }}
+      theme={oneDark}
+      readOnly={readOnly}
+      extensions={[javascript(), EditorView.lineWrapping]}
+      onChange={(e: any) => {
+        formik.setFieldValue(field, e);
+      }}
+    // Line numbers are now handled through a theme or extension
+    />
+  );
+};
+
+export default CodeEditor;

package/dist/components/common/CreateButton.tsx

@@ -0,0 +1,17 @@
+'use client';
+
+import { usePathname, useRouter } from 'next/navigation';
+import { Button } from 'primereact/button';
+
+export const CreateButton = () => {
+    const router = useRouter();
+    const pathName = usePathname();
+    
+    const createPAth = pathName.split('/').slice(0, -1).join('/') + '/create';
+
+    return (
+        <div>
+            <Button type="button" label="Add" size='small' onClick={() => router.push(createPAth)} className='small-button'/>
+        </div>
+    )
+}

package/dist/components/common/DownloadProgressToast.tsx

@@ -0,0 +1,55 @@
+import { Button } from "primereact/button";
+import { ProgressBar } from "primereact/progressbar";
+import { useEffect, useState } from "react";
+import "./solid-export.css";
+export const DownloadProgressToast = ({
+  progress,
+  visible,
+  onClose,
+  message,
+  submessage,
+  status
+}: {
+  progress: number;
+  visible: boolean;
+  onClose: () => void;
+  message?: string;
+  submessage?: string;
+  status?: string;
+}) => {
+  useEffect(() => {
+    if (progress >= 100) {
+      setTimeout(onClose, 2000);
+    }
+  }, [progress]);
+
+  if (!visible) return null;
+
+  return (
+    <div className="SolidExportProgressToaster">
+     <div className="flex align-items-center justify-content-between gap-3">
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M9 12.5H10V10.5H11C11.2833 10.5 11.5208 10.4042 11.7125 10.2125C11.9042 10.0208 12 9.78333 12 9.5V8.5C12 8.21667 11.9042 7.97917 11.7125 7.7875C11.5208 7.59583 11.2833 7.5 11 7.5H9V12.5ZM10 9.5V8.5H11V9.5H10ZM13 12.5H15C15.2833 12.5 15.5208 12.4042 15.7125 12.2125C15.9042 12.0208 16 11.7833 16 11.5V8.5C16 8.21667 15.9042 7.97917 15.7125 7.7875C15.5208 7.59583 15.2833 7.5 15 7.5H13V12.5ZM14 11.5V8.5H15V11.5H14ZM17 12.5H18V10.5H19V9.5H18V8.5H19V7.5H17V12.5ZM8 18C7.45 18 6.97917 17.8042 6.5875 17.4125C6.19583 17.0208 6 16.55 6 16V4C6 3.45 6.19583 2.97917 6.5875 2.5875C6.97917 2.19583 7.45 2 8 2H20C20.55 2 21.0208 2.19583 21.4125 2.5875C21.8042 2.97917 22 3.45 22 4V16C22 16.55 21.8042 17.0208 21.4125 17.4125C21.0208 17.8042 20.55 18 20 18H8ZM8 16H20V4H8V16ZM4 22C3.45 22 2.97917 21.8042 2.5875 21.4125C2.19583 21.0208 2 20.55 2 20V6H4V20H18V22H4Z" fill={ status === "error" ? "red" :"#722ED1"}/>
+        </svg>
+        <div className="flex-1">
+          <h2 className={`text-lg font-semibold m-0 ${status === "error" ? "text-red-500" : "ExportText"}`}>
+            {message}
+          </h2>
+          <p className={`text-sm ${status === "error" ? "text-red-400" : "ExportText"}`}>
+            {submessage}
+          </p>
+        </div>
+        {status === "success" && (  
+        <Button label="View Status" size="small" className="p-button-sm white-space-nowrap p-button-primary" />
+        )}
+        <svg onClick={onClose} width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <rect width="20" height="20" rx="10" fill="#F0F0F0"/>
+        <path d="M6.8 14L6 13.2L9.2 10L6 6.8L6.8 6L10 9.2L13.2 6L14 6.8L10.8 10L14 13.2L13.2 14L10 10.8L6.8 14Z" fill="#4B4D52"/>
+        </svg>
+      </div>
+      {status !== "error" && (
+        <ProgressBar value={progress} showValue={false} className="ExportCustomProgressbar mt-2" />
+      )}
+    </div>
+  );
+};

package/dist/components/common/DropzonePlaceholder.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import { Button } from "primereact/button";
+interface DropzonePlaceholderProps {
+    mediaTypes?: string[];
+    mediaMaxSizeKb?: number;
+}
+
+export const DropzonePlaceholder = ({ mediaTypes, mediaMaxSizeKb }: DropzonePlaceholderProps) => {
+    const supportedFormats = mediaTypes?.length
+        ? mediaTypes.map(type => type.toUpperCase()).join(", ")
+        : "PDF, JPEG | File";
+
+    // Convert max size from KB to MB and ensure it's at least 1MB
+    const maxSizeMB = mediaMaxSizeKb ? (mediaMaxSizeKb / 1024).toFixed(1) : "10";
+
+    return (
+        <div className='solid-dropzone'>
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                <path d="M11 16V7.85L8.4 10.45L7 9L12 4L17 9L15.6 10.45L13 7.85V16H11ZM6 20C5.45 20 4.97917 19.8042 4.5875 19.4125C4.19583 19.0208 4 18.55 4 18V15H6V18H18V15H20V18C20 18.55 19.8042 19.0208 19.4125 19.4125C19.0208 19.8042 18.55 20 18 20H6Z" fill="#666666" />
+            </svg>
+            <div className='font-bold mt-2 text-center'>
+                Drag and Drop or <span className='text-primary'> choose files</span> to upload
+            </div>
+            <p>Supported format: {supportedFormats} | Max size: {maxSizeMB} MB</p>
+            <div>
+                <Button outlined size='small' severity='secondary' label='Click to Browse' type="button" />
+            </div>
+        </div>
+    )
+}

package/dist/components/common/DropzoneUpload.tsx

@@ -0,0 +1,11 @@
+'use client';
+
+import { Button } from 'primereact/button'
+
+export const DropzoneUpload = () => {
+    return (
+        <div className='text-center mt-2'>
+            <Button type='button' label="Click here to Upload" className='no-underline' size='small' text raised={false}/>
+        </div>
+    )
+}

package/dist/components/common/FileReaderExt.tsx

@@ -0,0 +1,20 @@
+"use client"
+import FileSvg from '../Svg/FileSvg'
+
+export const FileReaderExt = ({ fileDetails }: { fileDetails: any }) => {
+    const renderFile = () => {
+        const type = fileDetails.type
+        switch (type) {
+            case "image/png":
+                return '/images/fileReader/image-jpg.png'
+            default:
+                return '/images/fileReader/image-jpg.png'
+        }
+    }
+    return (
+        <div>
+            <FileSvg />
+            {/* <img src={renderFile()} style={{height: 50, width:50}}/> */}
+        </div>
+    )
+}