@solidxai/core-ui 0.0.1

package/src/components/common/HeaderDynamicTitles.tsx

@@ -0,0 +1,13 @@
+
+
+import { usePathname } from "../../hooks/usePathname";
+export const HeaderDynamicTitles = () => {
+    const path = usePathname();
+    const getHeading = path.split('/').slice(-2, -1)[0].replace(/-/g, ' ').replace(/\b\w/g, char => char.toUpperCase());
+
+    return (
+        <div className='text-xl font-bold'>
+            All {getHeading}s
+        </div>
+    )
+}

package/src/components/common/Image.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+
+type ImageProps = React.ImgHTMLAttributes<HTMLImageElement> & {
+  src: string;
+  alt: string;
+  fill?: boolean;
+  unoptimized?: boolean;
+};
+
+export default function Image({ src, alt, fill, unoptimized, ...rest }: ImageProps) {
+  // 'fill' and 'unoptimized' are Next.js Image props; ignore for <img>.
+  return <img src={src} alt={alt} {...rest} />;
+}

package/src/components/common/Link.tsx

@@ -0,0 +1,13 @@
+import { Link } from "react-router-dom";
+import React from "react";
+
+// Wrapper for Link to allow easy migration from Next.js to React Router
+export const SolidLink: React.FC<any> = ({ href, children, ...props }) => {
+  return (
+    <Link to={href} {...props}>
+      {children}
+    </Link>
+  );
+};
+
+export default SolidLink;

package/src/components/common/MarkdownViewer.tsx

@@ -0,0 +1,84 @@
+
+
+import React from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
+
+type MarkdownViewerProps = { data: string };
+
+// Custom CodeBlock renderer
+const CodeBlock = ({ inline, className, children, ...props }: any) => {
+  const codeString = String(children).replace(/\n$/, '');
+  const isFenced = !inline && /language-(\w+)/.test(className || '');
+  const match = /language-(\w+)/.exec(className || '');
+  const language = match?.[1] ?? '';
+
+  if (inline || !isFenced) {
+    // Inline code or non-fenced code
+    return (
+      <code className="bg-gray-100 px-1 py-0.5 rounded text-sm">
+        {children}
+      </code>
+    );
+  }
+
+  // Fenced code block
+  return (
+    <div className="relative group my-4">
+      <button
+        className="absolute right-2 top-2 px-2 py-1 text-xs rounded bg-white text-black transition"
+        style={{ cursor: 'pointer',right:0  }}
+        onClick={() => navigator.clipboard.writeText(codeString)}
+      >
+        Copy
+      </button>
+      <SyntaxHighlighter
+        language={language}
+        style={oneDark}
+        PreTag="div"
+        customStyle={{
+          borderRadius: '0.5rem',
+          padding: '1rem',
+          fontSize: '0.85rem',
+          background: '#282c34',
+        }}
+        {...props}
+      >
+        {codeString}
+      </SyntaxHighlighter>
+    </div>
+  );
+};
+
+const MarkdownViewer: React.FC<MarkdownViewerProps> = ({ data }) => (
+  <ReactMarkdown
+    remarkPlugins={[remarkGfm]} // Enable GitHub-style tables
+    className="markdown-view prose prose-invert max-w-none"
+    components={{
+      code: CodeBlock,
+      table: (props) => (
+        <div className="overflow-x-auto my-4">
+          <table className="min-w-full border border-gray-700 text-sm">
+            {props.children}
+          </table>
+        </div>
+      ),
+      th: (props) => (
+        <th className="border border-gray-700 px-3 py-1 font-semibold text-left bg-gray-800" style={{color:"#fff"}}>
+          {props.children}
+        </th>
+      ),
+      td: (props) => (
+        <td className="border border-gray-700 px-3 py-1 align-top">
+          {props.children}
+        </td>
+      ),
+    }}
+  >
+    {data}
+  </ReactMarkdown>
+);
+
+export default MarkdownViewer;

package/src/components/common/MultipleSelectAutoCompleteField.tsx

@@ -0,0 +1,64 @@
+
+import { AutoComplete } from "primereact/autocomplete";
+import { useEffect, useState } from "react";
+import { getVirtualScrollerOptions } from "../../helpers/autoCompleteVirtualScroll";
+
+
+// UsesCases
+// Suppose you have a moduelId field In create Dto then you need to creaate a module key in firmik and use that to store the autocomplete state and along with it update the moduleId  Field with id
+// In case of relationType the Id field will always will be id   
+// Else the value will be whatever valuekey use passed 
+
+export const MultipleSelectAutoCompleteField = ({ formik, isFormFieldValid, relationField, fieldName, fieldNameId, labelKey, valueKey, searchData, existingData, additionalAction }: any) => {
+
+    const [selectedItem, setSelectedItem] = useState(existingData && existingData.length > 0 && existingData.map((i: any) => ({ label: i, value: i })));
+    const [filteredItem, setFilteredItem] = useState([]);
+    useEffect(() => {
+        // if (existingData) {
+        setSelectedItem(existingData && existingData.length > 0 && existingData.map((i: any) => ({ label: i, value: i })))
+        // formik.setFieldValue(fieldName, existingData);
+
+        // }
+    }, [existingData])
+    const searchItems = async (event: any) => {
+        const data = await searchData(event);
+        setFilteredItem(data);
+
+    };
+
+
+
+    return (
+
+        <AutoComplete
+            multiple
+            value={selectedItem}
+            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={labelKey}
+            dropdown
+            onChange={(e) => {
+                setSelectedItem(e.value);
+                if (additionalAction) {
+                    additionalAction(e);
+                }
+                if (relationField === true) {
+                    formik.setFieldValue(fieldName, e.value);
+                    // formik.setFieldValue(fieldNameId, e.value.id);
+                } else {
+                    const mediaTypes = e.value.map((i: any) => i[valueKey]);
+                    formik.setFieldValue(fieldName, mediaTypes);
+                }
+            }}
+        />
+    )
+}

package/src/components/common/NotFound.tsx

@@ -0,0 +1,22 @@
+
+
+import Link from "./Link";
+
+export const NotFound = () => {
+  return (
+    <div>
+      <div className="d-flex align-items-center justify-content-center vh-100">
+        <div className="text-center">
+          <h1 className="display-1 fw-bold">404</h1>
+          <p className="fs-3">
+            <span className="text-danger">Opps!</span> Page not found.
+          </p>
+          <p className="lead">The page you are looking for does not exist.</p>
+          <Link href="/" className="btn btn-primary">
+            Go Home
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/components/common/SingleSelectAutoCompleteField.tsx

@@ -0,0 +1,73 @@
+
+import { AutoComplete } from "primereact/autocomplete";
+import { useEffect, useState } from "react";
+import { getVirtualScrollerOptions } from "../../helpers/autoCompleteVirtualScroll";
+
+
+
+// UsesCases
+// Suppose you have a moduelId field In create Dto then you need to creaate a module key in firmik and use that to store the autocomplete state and along with it update the moduleId  Field with id
+// In case of relationType the Id field will always will be id   
+// Else the value will be whatever valuekey use passed 
+
+export const SingleSelectAutoCompleteField = ({ disabled, formik, isFormFieldValid, relationField, fieldName, fieldNameId, labelKey, valueKey, searchData, existingData, additionalAction, formErrors }: 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
+                disabled={disabled ? disabled : false}
+                value={selectedItem}
+                suggestions={filteredItem}
+                // invalid={(isFormFieldValid(formik, fieldName) || (formErrors[fieldName]))}
+                invalid={isFormFieldValid(formik, fieldName)}
+
+                completeMethod={searchItems}
+                // virtualScrollerOptions={{ itemSize: 38 }}
+                virtualScrollerOptions={getVirtualScrollerOptions({
+                    itemsLength: filteredItem.length,
+                  })}
+                  
+                // style={{
+                //     maxHeight: 39.67
+                // }}
+                field={labelKey}
+                dropdown
+                onChange={(e) => {
+                    // formik.handleChange(e)
+                    setSelectedItem(e.value);
+                    if (additionalAction) {
+                        additionalAction(e);
+                    }
+                    if (relationField === true) {
+                        formik.setFieldValue(fieldName, e.value);
+                        formik.setFieldValue(fieldNameId, e.value.id);
+                    } else {
+                        formik.setFieldValue(fieldName, e.value[valueKey]);
+
+                    }
+
+                }}
+                className="solid-standard-autocomplete"
+            />
+
+        </>
+
+
+    )
+}

package/src/components/common/SocialMediaLogin.tsx

@@ -0,0 +1,55 @@
+import { usePathname } from "../../hooks/usePathname";
+import { useRouter } from "../../hooks/useRouter";
+import { Button } from 'primereact/button'
+import { env } from "../../adapters/env";
+
+export const SocialMediaLogin = () => {
+    const router = useRouter();
+    const pathname = usePathname();
+
+    const googleApiConnectRedirectUrl = `${env("NEXT_PUBLIC_BACKEND_API_URL")}/api/iam/google/connect`;
+
+    return (
+        <div className="flex justify-content-center mt-4 gap-3">
+            <Button
+                className='flex justify-content-center gap-3 w-full google-auth-button'
+                outlined
+                severity="secondary"
+                onClick={() => router.push(googleApiConnectRedirectUrl)}
+            // onClick={()=>signIn('google', {callbackUrl :'https://uat-api.lm.solidxai.com/api/iam/google/connect'})}
+            >
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                    <g clipPath="url(#clip0_3520_3825)">
+                        <path d="M23.0938 9.91355L13.3044 9.91309C12.8721 9.91309 12.5217 10.2634 12.5217 10.6957V13.823C12.5217 14.2552 12.8721 14.6056 13.3044 14.6056H18.8171C18.2135 16.1722 17.0868 17.4842 15.6493 18.3178L18 22.387C21.7707 20.2062 24 16.3799 24 12.0965C24 11.4866 23.955 11.0506 23.8651 10.5597C23.7968 10.1867 23.4729 9.91355 23.0938 9.91355Z" fill="#167EE6" />
+                        <path d="M12 19.3047C9.30218 19.3047 6.94699 17.8306 5.68207 15.6494L1.61304 17.9948C3.68374 21.5836 7.56283 24.0003 12 24.0003C14.1768 24.0003 16.2307 23.4143 18 22.3929V22.3873L15.6494 18.3181C14.5742 18.9417 13.3299 19.3047 12 19.3047Z" fill="#12B347" />
+                        <path d="M18 22.3922V22.3866L15.6494 18.3174C14.5741 18.941 13.33 19.304 12 19.304V23.9996C14.1767 23.9996 16.2308 23.4135 18 22.3922Z" fill="#0F993E" />
+                        <path d="M4.69566 12.0003C4.69566 10.6705 5.05856 9.42637 5.68205 8.3512L1.61302 6.00586C0.586031 7.76962 0 9.81797 0 12.0003C0 14.1826 0.586031 16.2309 1.61302 17.9947L5.68205 15.6494C5.05856 14.5742 4.69566 13.3301 4.69566 12.0003Z" fill="#FFD500" />
+                        <path d="M12 4.69566C13.7593 4.69566 15.3753 5.32078 16.6375 6.36061C16.9488 6.61711 17.4014 6.59859 17.6867 6.31336L19.9024 4.09758C20.2261 3.77395 20.203 3.24422 19.8573 2.94431C17.7425 1.10967 14.991 0 12 0C7.56283 0 3.68374 2.41673 1.61304 6.00558L5.68207 8.35092C6.94699 6.16969 9.30218 4.69566 12 4.69566Z" fill="#FF4B26" />
+                        <path d="M16.6374 6.36061C16.9488 6.61711 17.4015 6.59859 17.6866 6.31336L19.9024 4.09758C20.226 3.77395 20.2029 3.24422 19.8573 2.94431C17.7425 1.10963 14.991 0 12 0V4.69566C13.7592 4.69566 15.3752 5.32078 16.6374 6.36061Z" fill="#D93F21" />
+                    </g>
+                    <defs>
+                        <clipPath id="clip0_3520_3825">
+                            <rect width="24" height="24" fill="white" />
+                        </clipPath>
+                    </defs>
+                </svg>
+                {pathname.includes("register") ? "Continue With Google" : "Sign In with Google"}
+            </Button>
+            {/* <Button icon={() => (
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" xlinkHref="http://www.w3.org/1999/xlink">
+                <rect width="24" height="24" fill="url(#pattern0_3520_3835)" />
+                <defs>
+                    <pattern id="pattern0_3520_3835" patternContentUnits="objectBoundingBox" width="1" height="1">
+                        <use xlinkHref="#image0_3520_3835" transform="scale(0.00195312)" />
+                    </pattern>
+                    <image id="image0_3520_3835" width="512" height="512" xlinkHref="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAIACAMAAADDpiTIAAAAA3NCSVQICAjb4U/gAAAACXBIWXMAATcvAAE3LwE2dZYYAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAwBQTFRF////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACyO34QAAAP90Uk5TAAECAwQFBgcICQoLDA0ODxAREhMUFRYXGBkaGxwdHh8gISIjJCUmJygpKissLS4vMDEyMzQ1Njc4OTo7PD0+P0BBQkNERUZHSElKS0xNTk9QUVJTVFVWV1hZWltcXV5fYGFiY2RlZmdoaWprbG1ub3BxcnN0dXZ3eHl6e3x9fn+AgYKDhIWGh4iJiouMjY6PkJGSk5SVlpeYmZqbnJ2en6ChoqOkpaanqKmqq6ytrq+wsbKztLW2t7i5uru8vb6/wMHCw8TFxsfIycrLzM3Oz9DR0tPU1dbX2Nna29zd3t/g4eLj5OXm5+jp6uvs7e7v8PHy8/T19vf4+fr7/P3+6wjZNQAAEfVJREFUGBntwQmc13P+B/DX3DPNTCchRzkqKZS7WKWtLaUVuSmRozYUWnJk3Ve1my6ELVm7lvwNi7KiXUcMKiIWlVRDJ9U0U9PM/F7/xz727/HHdszM7/v5ft+f7+/1fALiTqMuw6bOryB5JCTF7H/6bc8v4w86QlJIbs8JS/gTnSGpYr/Bfyvjz3WHpIL0E+/9mNvTGxJ/+936NXfgNEjMZfWbWc0dOhsSa63uX82d6Q+Jr+z+/+QuDILEVc7Q5dylIZB4yhtWwhoYDomj/GtXsUaug8RPwfVrWEM3Q+ImZ+R61tj1kJjp+QVr4SJIrDR/jrXSGxIjOTeXs3aOhsRHr8WsreaQuGjxPGsvDxITF5Wy9jZB4qHRM6yLxZBYOGkF62QuJAay7qtm3RRB/Nd6HutqCsR7l5Wxzu6EeC7zQSZhMMRv9WcxGcdCvLbfQiajMhfis6O+ZVIWQHx2WhmT8yjEY9dWM0mDIf4azaQdBfHWrUxaRTbEVyOYvHkQXw1hAB6GeGpAggG4FOKnM6oYhA4QL/XaxiCsSof46LAyBmIKxEdNljIYJ0M8lDGbwdiYDfHQ7xmQv0A81J9BOQvin6O2MCBbCyHeabqcQXkJ4p2MfzIwl0C8cyMDU90U4psjtjEwcyC+yfuUwekH8c14BmdZBsQz3RMMzgiIZxqXMDibG0I881cGaCLEM+cxQIlWEL8UfssAvQjxzH0MUneIXw6qYIA+gXjmBQZpIMQvPRikj9IhXsn8lEHqDvHLcAZpJsQvu3/PAFW1g/hlIoM0BeKX3csZoNI9IX65jUEaBfFLvXUM0Mp6EL8MZZD6Q/ySsYQBegnimTMZoO+aQTzzHgN0AcQznRmg5yC+eZHBWdsU4plmCQbnTIhvhjE4T0G8M5eBWdUE4pv9EgxK5UkQ74xgYK6G+Od9BuVJiH8OYFAW5EH8cwMDsq4FxEMfMhhV3SAeas2A/Bbio2sYjL9AvPRXBmJODsRLyxiEhQ0gXtqDQfi6GcRPv2YA1reBeOouJq+8E8RXs5m0qlMhvkrfyKRdBvHWIUxWYijEXxcxSdWXQDz2EJNT1R/is7lMSuXZEK8tYzIq+kL8VsEkbOkF8VsTJqG0G8Rzh7LuFreD+O5XrLNXGkG8N5B1NToD4r8bWDfl50HiYALrZFkHSCzMYF3M2R0SD3NZe1tGZkJiYhlr7fWWkNj4jrX03cWQGFnL2vnrHpA4WcXaWN4HEi8lrLmt4wohMbOcNbXhnj0hsfMVa+ab6+pDYmgxa+LzS3IgsfQ5d+29fumQmFrEXfjk7mMh8bWQO1H5+vADILG2gDuy4S/nNoTE3QfcjtVvTbvpl1mQFFDMH1vz9rSbzz6iPiR1pGdm5+TlFzZo1Hi3poUQEREREamr7BYnnHHeBQMGXnzJZUOGXnnV+V3bNIQkoaBZ84MOPrTDMZ06d+vatgmsSjuw56BbHn5xwZoE/8uWpW/PmHDjRd2aQmqu8NA+V46Z8cE6/kTF18VFD/3u8l+3zYAZ6W3OHztnA2ug5G+3n9Ycsiv7nDn27fXcubK5Ey8+PAtRO2Tg+Lc2s1bWzx593sHpkO3K7XTtMytZU1vff2jQ/ohKswHTv2EdbZ47/pQ8yE8dfmtxBWtt8YOnN0LYCvs8sIhJ2vLy0BaQ/5N+wtilrKvq4ju7ZCM0bW56q5LBWHR/50xI9slTVjFJm5/qm4MQdLjjUwZqw9MXNkVKO+rRjQzExmk9M+FSWscxS+lA4p1LC5CiCi6dxwCtfahLOhzpNLGEzmx6qANS0OGTNzFo34w7DsFrdfsSOvbeoHyklKwB79CNr+5tjyA1veo9hmHjpMOQMrIvX0aH/nXrwQhGvXNfrmRo3hmYh1SQM3QFXZt3eQGSld798VKGa/1vcxF3ecNKGIZNkw9DMjqM/YYRWHlpJuIs55pVDM3b/XNRN/uN/IRR+fysNMTW6UsYqnVjWqLW8vr/I8EozeuBeDp8DkOXeLVfJmrjyMkbGLk5xyF+mk6pZiS+uX1f1FCjKxbQhqJDEC/ZIzYyMlXPn5yOXUo76cktNGPbzRmIkaM/YbSW3nN8Onam2Y2LaUtxa8RFzr1VjN7a6Wc1wPbtPXhmFc0pH56GWDjuUxqx7bWrW+LnOvzuAxo1pwX8lzu6mpZ89bfRF3fap2EmkHFgj6HjXlxJwzZdAt+1/5w2bV23jR54cS94bdAWSlLW94O/8qZSkpW4Eb5q+RElAI9kwkv9NlIC8Up9+CftbkpQFu4L32T/iRKckg7wS/3XKEEq7QWf7L2QEqyqIfBHuxWUwN0KX3TeQHHgKvihSxnFhcQ58MGJmylubOsO+04opbhSejSs61RKcWdtK9h23CaKS8uawbKjN1Lc+rgh7DpgNcW1N/NgVZPPKe5Ng1G5b1PCcC5MSp9BCcXG/WHRHygheScT9gyjhOZOmNOtmhKa6s4wZu81lBCtaAxTMt+ihOp/YMoYSsguhyF9KWFbXwAzDthACdm8NjAjZz4lXFV3ZcGO0ZRwLTkehnSqpoTqsUIYUu8LSpjW9oUpD1DC9NIeMKVzghKessGwpWApJTzFLWHMZEp4/pgFY05IUMKSuAnWZCyghGXrOTBnCCUs646HOU3WU0LyxUGw50FKSN5oAns6VFPC8WQODHqLEo47YNH5lFBsGwiLspdRwlDWFSYNoYSh8mSYlLuSEoLE+bBpOCUMw2BT/mpKCO6CUddTQjAFRtVfR3Hv2QwYdQvFvddzYFS99RTn5hXCqsspzn3RFFalfUpxraQFzOpJca38cNg1i+LaZbDrEIprT8GwhymOLa4Pu5qUU9yqOBKGXU9x7CpY9hnFrZmw7BiKW2UtYNkkilsjYFn2eopT8zNgWT+KU1VHwrQXKE79HqY1raS4tCIfpg2nODUItr1PcemzDJi2d4LiUj/YNpjiUjGMm0lxqStsK6ygOPR3GHcGxaWOMO4JikPvwrjM9RSHzoFxXSgOrciEcWMoDl0P6+ZR3ClrDOMaVFPceRDW9aY4dCisu5/iziKYV0xxZxSsK6ikuNMK1vWkuDMf5t1Dced6mDeX4k4LWJe5heJMMcxrS3HnVph3PsWdzjDvfooz5Tkw7xWKM7Nh32qKMzfCvD0p7nSEeT0pzpRmwrzrKc7MhH1/pjhzF+x7j+LMObBvDcWZtjAvn+JMRRbMa0txZiHsO4XizJOw7wqKMyNh31iKM71h37MUZ1rDvvkUZ+rDvu8orpTBviyKM0tgX1OKM2/DvoMpzsyAfZ0ozkyEfadQnLkJ9g2gODMI9g2jOHMm7LuN4kxf2DeB4kxv2PckxZnusO85ijNdYF8RxZnjYV8RxZljYF8RxZkOsK+I4kw72FdEcaYt7CuiOHMs7CuiONMN9hVRnDkN9hVRnBkA+4oozgyFfUUUZ0bCviKKM3fBviKKM+NhXxHFmamwr4jizPOwr4jizDzYV0RxZg3sK6I4k8iBeUUUdw6EeUUUdzrDvCKKOxfAvCKKOyNh3pMUdybBvLEUd2bBvOso7qyCeRdSHNoT1vWgONQT1rWnODQS1u1FcegpWJdRTXHnXzBvDcWd6nxY9zHFoY6w7lWKQyNh3Z8oDr0K68ZSHCrPgXG/pbjUBcZdQHHpDhh3PMWluTBuL4pLlYWwLa2c4tIpMG4RxaWpMO4FikvfZ8O2cRSn+sC2qyhOPQnbTqE4VZoH09pQ3DoDpuUlKE49A9tKKE6VN4Jpb1LcGgHTHqe49VU6LBtFcexUWHYaxbHZsOwgimuHwLD0zRTHJsOyYopjmxvDsEcprt0Pw4ZRXCvfC3Z1pTg3CXbtRnFu2/6w61uKc4/Drr9TnKs+BGaNpbj3EswaSAnB6bDqCEoIVhTAqJwKSgh+D6uKKSGoag+jxlHC8G46bDqHEoqhsKkFJRTlh8CmVZRQLMyFSUWUcEyCSSMpIekLizpTQrJ+HxiUX0UJyRtZMGgBJSxTYNCDlNBcA3supISm+hSYcxAlPKWHwZzllPAs3xPWTKWEaF4DGHMBJUxzC2DLXpRQ/SMPtiyihOqVHJgynhKuF7JgyamUkD2XB0MaVFFCVrwHDCmmhO3rdrDjbkroNvaAGb+khK9qCKzI3UKJwB/SYcQrlCi8kA8bhlIiMX9vmLAvJRorO8CEeZRobD4VFtxCicqUQkSvPSUyX3dD9L6mROehAkRtPCVCX3VFxLpRopSYXIBIZW2gRGppF0Tqz5RoJSbmI0JnU6K2pDOiU7+CErln2yAyz1OiV/XYvojIWRQLto5tgkjkbaKYsHFUAaIwnWLE6iuzEb4eFDO+6p+OsGWsptjxcXeEbQLFkJcRtuMohtyM0C2h2HEAQncHxYx3EL42FDOuRATmU4yoaooIXEExYhai0LCcYkN/RGIaxYTyQkSiE8WEpxCRTygW/BoRuYpiwPpsRKTRFkr0JiEy0ynROxyROZ4SuXcRoUWUqF2ECA2jRGxDPUSocTklWhMQqQmUaLVDpJpXUqL0NiI2nRKlAYhY2wQlOt/lImovUKIzDpHrRIlMdStE7w1KVJ6BAb0oUTkCFnxEicYsmHAuJRonwoSMJZQovAUjhlCi0BtG5K6ihO9DmHEDJXxnw4wGGylh+yIddtxLCdslMGTPrZRwrcyGJQ9RwjUcphxYRQnT2nzY8hQlTKNgTHtKiDY1gjUzKeG5D+YcnaCEZcuesOcJSlgmw6B9yijhqGwBi26jhGM6TMovoYShsjVsupAShnEwKu0DintrG8KqX1DcGwy7ZlBc+ygDdh1QQXHsJFh2P8WtZ2FagzUUl7buD9sGU1y6G8ZlfEJxp6QA1vWguDMA9r1McaU4Dfa1qaS4kTgOPphIceMJeKHJ9xQXNjeDH66huHATPJH9JSV4X+XCF7+iBK8f/PEIJWhz4JH6yynBqj4cPulBCdYf4JdHKUH6PA9+qb+CEpzqjvBNT0pw7oN/HqMEZVEO/NNgBSUYlUfBRydTgnEn/PRHShA+yoafGqykJG9be/iqFyV5t8Bf0yjJmpcJfzUsoSSnoh181puSnBvgt8cpySjOgN8afUOpuy0Hw3d9KHV3Lfz3OKWu3kqH/wo+o9RNWUvEQdvNlDq5CvFwPqUuZqYhJiZTau+b3REX2e9Raqv6JMRH8/WUWroNcdIrQamVf2QgVu6g1MbaZoiX9NmUmkv0QtzsvpJSY6MRP522UWro3SzE0HBKzXzfArH0DKVG+iGeCj+n1MAkxNWhZZRd+jAXsTWAsiulrRFjD1N2oT/iLGceZaemId72XUnZic/yEXOHbqDsUNlhiL3OWyk7kOiHFHBGNWX7bkBKuJKyXY8jRdxD2Y43s5EqHqf8lyW7IWVkzqL8zIY2SCEF71N+ovJXSClNv6T82G+QYg5cTfl/Y5Byjiyl/GAcUlCXUsp/PICUdNz3lH8bjxTVYS2FnICU1fZbykSksJbLGYEtC2Y9M3XCPTcNu/isXice1fW8q++dOnN+SSUjMQkprflihqny06dvOb1VBrYnbbe2p4+Zu5XhmoQUt/ubDEflG3efd1g2diWn4zUzShiaB9KQ6rIfo3srHunXADXX/NyJyxmCrYMgwNVVdKli9oh2qLW0Y+5bTMeWHw35t54b6MrGaX3yUVft7/iUDr2+O+Q/Dv6SLlQ8d2YuktNm1Ed0ZEwG5AeNnmXQql+/pCGC0P6BdQze5rMhPzZgA4M0/9q9EZjsfi9WMVhftoP81L6vMSirxh6KgO113WcM0PMNID+XNmwLA1Ax45RMuNBxykYGo+QsyPYc/D6T9f4VjeFM3vmvVjNpVeMKIduXOXQNk/Dt6LZwbL9Ri5mcdzpAdqzwzjLWzdane2UgBGknTi1lnc3vA9m5vR+rZu0V/6YRQpN/7jObWRcf9oXsWruXWTsr72uDkOX1nf49ayfx2ulpkBo59pFNrKHqd0cdkYYoZPV4eDVrbMUd+0NqLn/gm9y1DU9f2BQRSj/x1lnfcddWPdEzHVJLre79ljtR/cmYk7IQvbTWF06eX8kd2jr7uvZpkLrIPP66ojX8b1WLpg/7RQEMqfeLEdNnvr90E3+sevGLowd1qgdJSsuBjyxK8AeVC6de0akerMreq12XMy6/dvB5fTofcVAuzPpfTkq1f/bQtVEAAAAASUVORK5CYII=" />
+                </defs>
+            </svg>
+        )}
+            outlined
+            severity="secondary"
+        >
+        </Button> */}
+        </div>
+    )
+}

package/src/components/common/SolidAdmin.tsx

@@ -0,0 +1,29 @@
+import { Card } from "primereact/card";
+import { Message } from "primereact/message";
+import { env } from "../../adapters/env";
+
+export const SolidAdmin = () => {
+  const redirectUrl = env("NEXT_PUBLIC_LOGIN_REDIRECT_URL");
+  const hasRedirect = Boolean(redirectUrl);
+
+  return (
+    <div className="flex align-items-center justify-content-center" style={{ minHeight: "60vh" }}>
+      <div className="w-full" style={{ maxWidth: 720 }}>
+        {!hasRedirect && (
+          <div className="mb-3">
+            <Message
+              severity="warn"
+              text="Default redirect URL is not configured. Please ask your system administrator to set VITE_LOGIN_REDIRECT_URL."
+            />
+          </div>
+        )}
+        {hasRedirect && (<Card title="Welcome to SolidX">
+          <p className="m-0">
+            SolidX is the admin console for managing modules, models, views, and permissions. Use the
+            left navigation to explore modules, configure settings, and build your app.
+          </p>
+        </Card>)}
+      </div>
+    </div>
+  );
+};

package/src/components/common/SolidBreadcrumb.tsx

@@ -0,0 +1,130 @@
+
+
+import { usePathname } from "../../hooks/usePathname";
+import { useRouter } from "../../hooks/useRouter";
+import { useSearchParams } from "../../hooks/useSearchParams";
+import { BreadCrumb } from "primereact/breadcrumb";
+import { useEffect, useState } from "react";
+
+interface BreadcrumbItem {
+  label: string;
+  link?: string;
+}
+
+interface Props {
+  solidFormViewMetaData?: any;
+  initialEntityData?: any;
+}
+
+const toTitleCase = (str: string) => {
+  return str
+    .replace(/[-_]/g, " ")
+    .replace(/([a-z])([A-Z])/g, "$1 $2")
+    .replace(/\b\w/g, (char) => char.toUpperCase());
+};
+
+const truncateText = (text: string, maxLength: number = 15) => {
+  if (text.length <= maxLength) return text;
+  return `${text.substring(0, maxLength)}...`;
+};
+
+export const SolidBreadcrumb = (props: Props) => {
+  const { solidFormViewMetaData, initialEntityData } = props;
+
+  const modelMetadata = solidFormViewMetaData?.data?.solidView?.model;
+  const pathname = usePathname();
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const segments = pathname.split("/").filter(Boolean);
+
+  let userKeyFieldValue: string | null = null;
+
+  if (modelMetadata?.userKeyField) {
+    const userKeyFieldName = modelMetadata.userKeyField.name;
+    if (userKeyFieldName && initialEntityData?.[userKeyFieldName] !== undefined) {
+      userKeyFieldValue = initialEntityData[userKeyFieldName];
+    }
+  }
+
+  const queryUserKeyField = searchParams.get("userKeyField");
+  const isNewForm = pathname.endsWith("/new");
+
+  useEffect(() => {
+    if (!isNewForm && userKeyFieldValue && !queryUserKeyField) {
+      const params = new URLSearchParams(searchParams.toString());
+      params.set("userKeyField", userKeyFieldValue);
+      const newUrl = `${pathname}?${params.toString()}`;
+      router.push(newUrl);
+    }
+  }, [pathname, userKeyFieldValue, queryUserKeyField, isNewForm, router]);
+
+  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 breadcrumbItems: BreadcrumbItem[] = [];
+
+  if (segments.length >= 4 && segments[0] === "admin" && segments[1] === "core") {
+    const moduleName = segments[2];
+    const modelName = segments[3];
+    const modelDisplayName = modelMetadata?.displayName || toTitleCase(modelName);
+
+    // Link to model list or kanban view based on stored view
+    breadcrumbItems.push({
+      label: modelDisplayName,
+      link: `/admin/core/${moduleName}/${modelName}/${fromView || "list"}`,
+    });
+
+    breadcrumbItems.push({
+      label: isNewForm
+        ? `Add ${modelDisplayName} Details`
+        : decodeURIComponent(queryUserKeyField || userKeyFieldValue || segments[segments.length - 1] || ""),
+    });
+  }
+
+  const items = breadcrumbItems.map((item, index) => ({
+    label: item.label,
+    ...(item.link
+      ? {
+        template: () => {
+          const fullLabel = item.label;
+          const truncatedLabel = truncateText(fullLabel, 10);
+          const shouldTruncate = fullLabel.length > 10;
+
+          const handleClick = (e: any) => {
+            e.preventDefault();
+            // prefer stored full return url which preserves query params (action/menu)
+            if (typeof window !== "undefined") {
+              const storedFullUrl = sessionStorage.getItem("fromViewUrl");
+              if (storedFullUrl) {
+                router.push(storedFullUrl);
+                return;
+              }
+            }
+            router.push(item.link!);
+          };
+
+          return (
+            <a onClick={handleClick}>
+              <p
+                className={`${index === 1 ? 'font-bold' : 'font-normal'} ${shouldTruncate ? 'cursor-pointer' : ''}`}
+                title={shouldTruncate ? fullLabel : undefined}
+              >
+                {truncatedLabel}
+              </p>
+            </a>
+          );
+        },
+      }
+      : {}),
+  }));
+
+  return <BreadCrumb model={items} className="solid-breadcrumb" />;
+};

package/src/components/common/SolidErrorPage.tsx

@@ -0,0 +1,37 @@
+import { Card } from "primereact/card";
+import { Button } from "primereact/button";
+import { useRouter } from "../../hooks/useRouter";
+
+type SolidErrorPageProps = {
+  title?: string;
+  message?: string;
+  actionLabel?: string;
+  actionHref?: string;
+};
+
+export const SolidErrorPage = ({
+  title = "Error Occurred",
+  message = "Something went wrong.",
+  actionLabel = "Go to Dashboard",
+  actionHref = "/admin",
+}: SolidErrorPageProps) => {
+  const router = useRouter();
+
+  return (
+    <div className="flex align-items-center justify-content-center" style={{ minHeight: "70vh" }}>
+      <Card className="w-full" style={{ maxWidth: 420 }}>
+        <div className="flex flex-column align-items-center text-center gap-3">
+          <i className="pi pi-exclamation-circle" style={{ fontSize: 28, color: "#e91e63" }} />
+          <h2 className="m-0">{title}</h2>
+          <p className="m-0 text-sm">{message}</p>
+          <Button
+            label={actionLabel}
+            link
+            onClick={() => router.push(actionHref)}
+            className="mt-2"
+          />
+        </div>
+      </Card>
+    </div>
+  );
+};