@solidstarters/solid-core-ui 1.1.70 → 1.1.72

package/dist/components/common/GeneralSettings.tsx

@@ -0,0 +1,414 @@
+"use client"
+import { useBulkUpdateSolidSettingsMutation, useCreateSolidSettingsMutation, useLazyGetSolidSettingsQuery, useUpdateSolidSettingsMutation } from '@/redux/api/solidSettingsApi';
+import { useFormik } from 'formik';
+import { Button } from 'primereact/button';
+import { InputText } from 'primereact/inputtext';
+import { Toast } from 'primereact/toast';
+import { useEffect, useRef } from 'react'
+import { CancelButton } from './CancelButton';
+import { InputSwitch } from 'primereact/inputswitch';
+import { RadioButton } from 'primereact/radiobutton';
+import { handleError } from '@/helpers/ToastContainer';
+import { usePathname } from 'next/navigation';
+
+export const GeneralSettings = () => {
+    const [trigger, { data: solidSettingsData }] = useLazyGetSolidSettingsQuery()
+    useEffect(() => {
+        trigger("") // Fetch settings on mount
+    }, [trigger])
+    const pathname = usePathname();
+    const [bulkUpdateSolidSettings] = useBulkUpdateSolidSettingsMutation();
+    const toast = useRef<Toast>(null);
+
+    const showToast = (severity: "success" | "error", summary: string, detail: string) => {
+        toast.current?.show({
+            severity,
+            summary,
+            detail,
+            life: 3000,
+        });
+    };
+    const initialValues = {
+        allowPublicRegistration: solidSettingsData?.data?.allowPublicRegistration || false,
+        iamPasswordRegistrationEnabled: solidSettingsData?.data?.iamPasswordRegistrationEnabled || false,
+        passwordlessRegistration: solidSettingsData?.data?.passwordlessRegistration || false,
+        activateUserOnRegistration: solidSettingsData?.data?.activateUserOnRegistration || false,
+        iamGoogleOAuthEnabled: solidSettingsData?.data?.iamGoogleOAuthEnabled || false,
+        shouldQueueEmails: solidSettingsData?.data?.shouldQueueEmails || false,
+        shouldQueueSms: solidSettingsData?.data?.shouldQueueSms || false,
+        authPagesTheme: solidSettingsData?.data?.authPagesTheme || "light",
+        authPagesLayout: solidSettingsData?.data?.authPagesLayout || "center",
+        appTnc: solidSettingsData?.data?.appTnc || "",
+        appPrivacyPolicy: solidSettingsData?.data?.appPrivacyPolicy || "",
+        defaultRole: solidSettingsData?.data?.defaultRole || "Admin",
+        appTitle: solidSettingsData?.data?.appTitle || "SolidX",
+        appDescription: solidSettingsData?.data?.appDescription || "appDescription",
+    };
+    const formik = useFormik({
+        initialValues: initialValues,
+        enableReinitialize: true,
+        onSubmit: async (values) => {
+            try {
+                const updatedSettings: Record<string, any> = {};
+
+                const currentSettings = solidSettingsData?.data || {};
+
+                // Compare values and collect only changed ones
+                Object.entries(values).forEach(([key, value]) => {
+                    const currentValue = currentSettings[key];
+
+                    // Handle boolean, string, null values consistently
+                    const normalizedCurrent = currentValue === undefined || currentValue === null ? "" : currentValue;
+                    const normalizedValue = value === undefined || value === null ? "" : value;
+
+                    if (normalizedCurrent !== normalizedValue) {
+                        updatedSettings[key] = value;
+                    }
+                });
+                
+                if (Object.keys(updatedSettings).length === 0) {
+                    showToast("success", "No Changes", "No settings were updated");
+                    return;
+                }
+                const response = await bulkUpdateSolidSettings({
+                    data: { settings: updatedSettings },
+                }).unwrap();
+                if (response.statusCode === 200) {
+                    showToast("success", "Ypdated", "Settings updated")
+                }
+
+            } catch (error) {
+                showToast("error", "Failed", "Something went wrong");
+            }
+        },
+    })
+
+    const showError = async () => {
+        const errors = await formik.validateForm(); // Trigger validation and get the updated errors
+        const errorMessages = Object.values(errors);
+
+        if (errorMessages.length > 0 && toast.current) {
+            handleError(errorMessages)
+        }
+    }
+    useEffect(() => {
+
+    }, [pathname])
+
+    return (
+        <div className="page-parent-wrapper">
+            <Toast ref={toast} />
+            <div className="solid-form-wrapper">
+                <div className="solid-form-section">
+                    <form onSubmit={formik.handleSubmit}>
+                        <div className="page-header secondary-border-bottom">
+                            <div className="form-wrapper-title">Settings</div>
+                            <div className="gap-3 flex">
+                                <Button label="Save" size="small" onClick={() => showError()} type="submit" />
+                                <CancelButton />
+                            </div>
+                        </div>
+                        <div className="p-4 solid-form-content">
+                            {pathname.includes("app-settings") &&
+                                <>
+                                    <p className='font-bold ' style={{ fontSize: 16, color: 'var(--solid-setting-title)' }}>App Logo </p>
+                                    <div className='formgrid grid'>
+                                        <div className='col-8'>
+                                            <div className="formgrid grid">
+                                                <div className="col-6">
+                                                    <div className="formgrid grid align-items-center">
+                                                        <div className="col-5">
+                                                            <label className="form-field-label">App Logo</label>
+                                                        </div>
+                                                        {/* <div className="col-7">
+                                                <InputText
+                                                    type="text"
+                                                    id="appTitle"
+                                                    name="appTitle"
+                                                    onChange={formik.handleChange}
+                                                    value={formik.values.appTitle}
+                                                />
+                                            </div> */}
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div className='mt-4' style={{ borderBottom: '1px dashed #D8E2EA' }}></div>
+
+                                    <p className='font-bold mt-4' style={{ fontSize: 16, color: 'var(--solid-setting-title)' }}>Title & Description Details </p>
+                                    <div className='formgrid grid'>
+                                        <div className='col-8'>
+                                            <div className="formgrid grid">
+                                                <div className="col-6">
+                                                    <div className="formgrid grid align-items-center">
+                                                        <div className="col-5">
+                                                            <label className="form-field-label">App Title</label>
+                                                        </div>
+                                                        <div className="col-7">
+                                                            <InputText
+                                                                type="text"
+                                                                id="appTitle"
+                                                                name="appTitle"
+                                                                onChange={formik.handleChange}
+                                                                value={formik.values.appTitle}
+                                                            />
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                                <div className="col-6">
+                                                    <div className="formgrid grid align-items-center">
+                                                        <div className="col-5">
+                                                            <label className="form-field-label">Description</label>
+                                                        </div>
+                                                        <div className="col-7">
+                                                            <InputText
+                                                                type="text"
+                                                                id="appDescription"
+                                                                name="appDescription"
+                                                                onChange={formik.handleChange}
+                                                                value={formik.values.appDescription}
+                                                            />
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div className='mt-4' style={{ borderBottom: '1px dashed #D8E2EA' }}></div>
+
+                                    <p className='font-bold mt-4' style={{ fontSize: 16, color: 'var(--solid-setting-title)' }}>Policies Links </p>
+                                    <div className='formgrid grid'>
+                                        <div className='col-8'>
+                                            <div className="formgrid grid">
+                                                <div className="col-6 mt-3">
+                                                    <div className="formgrid grid align-items-center">
+                                                        <div className="col-5">
+                                                            <label className="form-field-label">Terms and Conditions Link</label>
+                                                        </div>
+                                                        <div className="col-7">
+                                                            <InputText
+                                                                type="text"
+                                                                id="appTnc"
+                                                                name="appTnc"
+                                                                onChange={formik.handleChange}
+                                                                value={formik.values.appTnc}
+                                                            />
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                                <div className="col-6 mt-3">
+                                                    <div className="formgrid grid align-items-center">
+                                                        <div className="col-5">
+                                                            <label className="form-field-label">Privacy Policy Link</label>
+                                                        </div>
+                                                        <div className="col-7">
+                                                            <InputText
+                                                                type="text"
+                                                                id="appPrivacyPolicy"
+                                                                name="appPrivacyPolicy"
+                                                                onChange={formik.handleChange}
+                                                                value={formik.values.appPrivacyPolicy}
+                                                            />
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </>
+                            }
+                            {pathname.includes("authentication-settings") &&
+                                <>
+                                    <p className='font-bold' style={{ fontSize: 16, color: 'var(--solid-setting-title)' }}>User Authentication  </p>
+                                    <div className='formgrid grid'>
+                                        <div className='col-8'>
+                                            <div className="formgrid grid">
+                                                <div className="col-6">
+                                                    <div className="formgrid grid align-items-center">
+                                                        <div className="col-5">
+                                                            <label className="form-field-label">Public Registration</label>
+                                                        </div>
+                                                        <div className="col-7">
+                                                            <InputSwitch
+                                                                name="allowPublicRegistration"
+                                                                checked={formik.values.allowPublicRegistration}
+                                                                onChange={(e) => formik.setFieldValue("allowPublicRegistration", e.value)}
+                                                            />
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                                <div className="col-6">
+                                                    <div className="formgrid grid align-items-center">
+                                                        <div className="col-5">
+                                                            <label className="form-field-label">Signup with Password</label>
+                                                        </div>
+                                                        <div className="col-7">
+                                                            <InputSwitch
+                                                                name="iamPasswordRegistrationEnabled"
+                                                                checked={formik.values.iamPasswordRegistrationEnabled}
+                                                                onChange={(e) => formik.setFieldValue("iamPasswordRegistrationEnabled", e.value)}
+                                                            />
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                                <div className="col-6 mt-3">
+                                                    <div className="formgrid grid align-items-center">
+                                                        <div className="col-5">
+                                                            <label className="form-field-label">Signup without Password</label>
+                                                        </div>
+                                                        <div className="col-7">
+                                                            <InputSwitch
+                                                                name="passwordlessRegistration"
+                                                                checked={formik.values.passwordlessRegistration}
+                                                                onChange={(e) => formik.setFieldValue("passwordlessRegistration", e.value)}
+                                                            />
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                                <div className="col-6 mt-3">
+                                                    <div className="formgrid grid align-items-center">
+                                                        <div className="col-5">
+                                                            <label className="form-field-label">Auto Activate User on Registration </label>
+                                                        </div>
+                                                        <div className="col-7">
+                                                            <InputSwitch
+                                                                name="activateUserOnRegistration"
+                                                                checked={formik.values.activateUserOnRegistration}
+                                                                onChange={(e) => formik.setFieldValue("activateUserOnRegistration", e.value)}
+                                                            />
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                                <div className="col-6 mt-3">
+                                                    <div className="formgrid grid align-items-center">
+                                                        <div className="col-5">
+                                                            <label className="form-field-label">Allow Login/ Signup with Google </label>
+                                                        </div>
+                                                        <div className="col-7">
+                                                            <InputSwitch
+                                                                name="iamGoogleOAuthEnabled"
+                                                                checked={formik.values.iamGoogleOAuthEnabled}
+                                                                onChange={(e) => formik.setFieldValue("iamGoogleOAuthEnabled", e.value)}
+                                                            />
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div className='mt-4' style={{ borderBottom: '1px dashed #D8E2EA' }}></div>
+                                    <p className='font-bold mt-4' style={{ fontSize: 16, color: 'var(--solid-setting-title)' }}>Authentication Screen Layout</p>
+                                    <div className='formgrid grid'>
+                                        <div className='col-8'>
+                                            <div className="flex align-items-center gap-3">
+                                                <div className="flex align-items-center">
+                                                    <RadioButton
+                                                        inputId="authPagesLayout-left"
+                                                        name="authPagesLayout"
+                                                        value="left"
+                                                        checked={formik.values.authPagesLayout === "left"}
+                                                        onChange={(e) => formik.setFieldValue("authPagesLayout", e.value)}
+                                                    />
+                                                    <label htmlFor="authPagesLayout-left" className="ml-2">Left</label>
+                                                </div>
+                                                <div className="flex align-items-center">
+                                                    <RadioButton
+                                                        inputId="authPagesLayout-center"
+                                                        name="authPagesLayout"
+                                                        value="center"
+                                                        checked={formik.values.authPagesLayout === "center"}
+                                                        onChange={(e) => formik.setFieldValue("authPagesLayout", e.value)}
+                                                    />
+                                                    <label htmlFor="authPagesLayout-center" className="ml-2">Center</label>
+                                                </div>
+                                                <div className="flex align-items-center">
+                                                    <RadioButton
+                                                        inputId="authPagesLayout-right"
+                                                        name="authPagesLayout"
+                                                        value="right"
+                                                        checked={formik.values.authPagesLayout === "right"}
+                                                        onChange={(e) => formik.setFieldValue("authPagesLayout", e.value)}
+                                                    />
+                                                    <label htmlFor="authPagesLayout-right" className="ml-2">Right</label>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div className='mt-4' style={{ borderBottom: '1px dashed #D8E2EA' }}></div>
+                                    <p className='font-bold mt-4' style={{ fontSize: 16, color: 'var(--solid-setting-title)' }}>Authentication Screen Theme</p>
+                                    <div className='formgrid grid'>
+                                        <div className='col-8'>
+                                            <div className="flex align-items-center gap-3">
+                                                <div className="flex align-items-center">
+                                                    <RadioButton
+                                                        inputId="theme-light"
+                                                        name="authPagesTheme"
+                                                        value="light"
+                                                        checked={formik.values.authPagesTheme === "light"}
+                                                        onChange={(e) => formik.setFieldValue("authPagesTheme", e.value)}
+                                                    />
+                                                    <label htmlFor="theme-light" className="ml-2">Solid Light</label>
+                                                </div>
+                                                <div className="flex align-items-center">
+                                                    <RadioButton
+                                                        inputId="theme-dark"
+                                                        name="authPagesTheme"
+                                                        value="dark"
+                                                        checked={formik.values.authPagesTheme === "dark"}
+                                                        onChange={(e) => formik.setFieldValue("authPagesTheme", e.value)}
+                                                    />
+                                                    <label htmlFor="theme-dark" className="ml-2">Solid Dark</label>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </>
+                            }
+
+                            {pathname.includes("misc-settings") &&
+                                <>
+                                    <p className='font-bold' style={{ fontSize: 16, color: 'var(--solid-setting-title)' }}>Misc Details</p>
+                                    <div className='formgrid grid'>
+                                        <div className='col-8'>
+                                            <div className="formgrid grid">
+                                                <div className="col-6">
+                                                    <div className="formgrid grid align-items-center">
+                                                        <div className="col-5">
+                                                            <label className="form-field-label">Use queue for sending emails</label>
+                                                        </div>
+                                                        <div className="col-7">
+                                                            <InputSwitch
+                                                                name="shouldQueueEmails"
+                                                                checked={formik.values.shouldQueueEmails}
+                                                                onChange={(e) => formik.setFieldValue("shouldQueueEmails", e.value)}
+                                                            />
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                                <div className="col-6">
+                                                    <div className="formgrid grid align-items-center">
+                                                        <div className="col-5">
+                                                            <label className="form-field-label">Use queue for sending SMS</label>
+                                                        </div>
+                                                        <div className="col-7">
+                                                            <InputSwitch
+                                                                name="shouldQueueSms"
+                                                                checked={formik.values.shouldQueueSms}
+                                                                onChange={(e) => formik.setFieldValue("shouldQueueSms", e.value)}
+                                                            />
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </>
+                            }
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+    )
+}

package/dist/components/common/HeaderDynamicTitles.tsx

@@ -0,0 +1,13 @@
+'use client';
+
+import { usePathname } from 'next/navigation';
+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/dist/components/common/MarkdownViewer.tsx

@@ -0,0 +1,16 @@
+'use client';
+
+import { useState } from 'react';
+import ReactMarkdown from 'react-markdown';
+
+const MarkdownViewer = ({ data }: any) => {
+  const [markdown, setMarkdown] = useState(data);
+
+  return (
+    <div>
+      <ReactMarkdown className="markdown-view">{markdown}</ReactMarkdown>
+    </div>
+  );
+};
+
+export default MarkdownViewer;

package/dist/components/common/MultipleSelectAutoCompleteField.tsx

@@ -0,0 +1,62 @@
+'use client';
+import { AutoComplete } from "primereact/autocomplete";
+import { useEffect, useState } from "react";
+
+
+
+// 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 }}
+            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/dist/components/common/NotFound.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import Link from "next/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/dist/components/common/SingleSelectAutoCompleteField.tsx

@@ -0,0 +1,67 @@
+'use client';
+import { AutoComplete } from "primereact/autocomplete";
+import { useEffect, useState } from "react";
+
+
+
+// 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 }}
+                // 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"
+            />
+
+        </>
+
+
+    )
+}